/* ==========================================================================
   Global header/footer revamp (Figma: QF - BilAraby - WebsiteDesign-Concept-2).
   Loaded on every page (see style.blade.php) — keep selectors scoped under
   .header-revamp / .footer-revamp so nothing here leaks onto page content.
   ========================================================================== */
/* Almarai ExtraBold ships in the repo but was never declared, so any
   font-weight:800 text fell through the stack to `serif` (app.css defines
   --primary-font as "Almarai", serif). Register it here. */
@font-face {
    font-family: 'Almarai';
    src: url('../fonts/Almarai-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --hr-green-400: #338a81;
    --hr-green-500: #006d62;
    --hr-yellow-400: #e19d33;
    --hr-yellow-500: #d98500;
    --hr-cream-50: #fefefd;
    --hr-cream-400: #faf9ed;
    --hr-cream-500: #f9f7e9;
    --hr-brown-300: #66655c;
    /* Declared here, not only on .summit-revamp/.about-revamp as they were:
       event-detail-revamp.css reaches for both WITHOUT a fallback, and the Event
       details page loads neither of those files, so each var() resolved to
       nothing. An unresolved var is invalid at computed-value time, which takes
       the whole declaration with it - `border-bottom: 1px dashed
       var(--hr-brown-400)` unset its style as well as its colour, so the agenda
       card's dashed rule did not render at all, and the day badge's inner chip
       lost its fill and went transparent. Values are summit-revamp.css's own. */
    --hr-brown-400: #49473d;
    --hr-brown-500: #1b190c;
    --hr-brown-700: #131209;
    --hr-brown-900: #0b0b05;
    --hr-blue-50: #e6eef3;
    --hr-blue-400: #33739f;
    --hr-blue-500: #005087;
    --hr-purple-500: #8e3b78;
}

/* Every in-page anchor has to clear the fixed header, or the target heading
   lands underneath it. --hr-header-h is measured and kept in sync by
   layout-revamp.js; the fallback is the desktop header height, used for the
   moment before that script runs (and if it never does).

   Only the header's own height belongs here - pages add their own breathing
   room on the target itself, e.g. .tnc-section / .pp-section carry
   scroll-margin-top: 24px, which stacks on top of this. */
html {
    scroll-padding-top: var(--hr-header-h, 146px);
}

.header-revamp .hr-btn,
.footer-revamp .hr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: 61px;
    font-weight: 700;
    font-size: 15px;
    border: 1.5px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .2s ease;
}
.header-revamp .hr-btn:hover,
.footer-revamp .hr-btn:hover { transform: translateY(-2px); text-decoration: none; }
.header-revamp .hr-btn-primary,
.footer-revamp .hr-btn-primary,.hr-btn-primary { background: var(--hr-yellow-500); color: var(--hr-cream-50);
    border: 2px outset #ffffff9c;
    border-bottom-width: 0px;
    box-shadow:
        inset 0 4px 6.1px rgba(255,255,255,.23),
        7px 63px 18px rgba(0,0,0,.02),
        2px 23px 14px rgba(0,0,0,.02),
        1px 10px 10px rgba(0,0,0,.03),
        0 3px 6px rgba(0,0,0,.03);
}
/* Glass pill. This is the third copy of this component to have shipped as a
   flat translucent tint instead of glass - home-revamp.css fixed it for
   .home-revamp (BIL-557) and summit-revamp.css for .summit-revamp (BIL-598),
   but the header/footer copy here kept the stripped version: .15 fill, no
   frosted blur, no inset highlight, no ambient shadow, and no hover. Values
   below are home-revamp.css's, so the footer's "Join Now" and the home page's
   identical pill now render the same. */
.header-revamp .hr-btn-ghost-light,
.footer-revamp .hr-btn-ghost-light {
    background: rgba(255,255,255,.2);
    color: #fff;
    border: 2px outset #ffffff9c;
    border-bottom-width: 0px;
    /*border-color: rgba(255,255,255,.2);*/
    backdrop-filter: blur(20px);
    box-shadow:
        inset 0 4px 6.1px rgba(255,255,255,.23),
        7px 63px 18px rgba(0,0,0,.02),
        2px 23px 14px rgba(0,0,0,.02),
        1px 10px 10px rgba(0,0,0,.03),
        0 3px 6px rgba(0,0,0,.03);
}
/* BIL-539: hover is the bottom ellipse (see the shared glow block further
   down), not a brighter tint - Figma's Variant3 holds the .2 fill. The .3
   swap that used to be here fought the glow for the same "lit up" read. */
.header-revamp .hr-btn-ghost-light:hover,
.footer-revamp .hr-btn-ghost-light:hover { color: #fff; }
.footer-revamp .hr-diamond {
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    background: var(--hr-blue-400);
    flex-shrink: 0;
}

/* ---------- Header ---------- */
/* On the home page the header floats over the hero photo (per Figma) instead of
   sitting on its own solid bar. Other pages have no hero image behind the
   header, so they keep the solid bar for legibility. */
/* Never fills with a solid colour. Instead it uses the frosted translucent
   backdrop from Figma: a slight darkening plus blur, which keeps the white nav
   text readable over BOTH the dark hero and the cream sections further down.

   The glass itself (background + blur + fade mask) lives on ::before rather
   than on .header-revamp directly. mask-image applies to an element's ENTIRE
   painted subtree, including descendants that visually escape its box (like
   the ABOUT/EVENTS/etc dropdown panels) — masking the header itself faded
   the dropdowns out and broke their layout. A ::before has no children of
   its own, so it can carry the mask without ever touching real nav content;
   pointer-events:none keeps it from blocking clicks on the nav above it.

   z-index:-1 is load-bearing, and this comment used to claim the opposite -
   "it paints behind its siblings by default (no z-index needed)". It does not:
   an absolutely positioned box with z-index:auto paints in the
   positioned-descendants step, i.e. ABOVE the header's non-positioned in-flow
   content. So this frosted layer sat on top of the actions pill and blurred
   its contents away - the search glyph and the language label rendered as
   invisible smudges, while the logo, the globe (masked, so its own stacking
   context) and the toggler stayed crisp and hid the cause. .header-revamp
   carries z-index:99 and a position, so it is a stacking context: -1 keeps
   this layer above the header's own background and below all nav content. */
.header-revamp.header-overlay {
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    transition: box-shadow .25s ease;
}
.header-revamp.header-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(28, 26, 18, .1) 0%, rgba(28, 26, 18, .06) 70%, rgba(28, 26, 18, 0) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
    transition: background-color .25s ease;
}
/* Past the hero, content of any colour can scroll underneath the fixed
   header (layout-revamp.js toggles this once scrollY passes the hero) — a
   touch more frost keeps nav text legible without a full light/dark recolour.
   Eases down through many stops (90/80/60/50/10% of peak) rather than a
   short 2-3 stop ramp, so the fade reads as a soft blur into whatever's
   scrolled underneath instead of a hard-edged cutoff line. */
.header-revamp.header-overlay.is-scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, -0.92) !important;
}
.header-revamp.header-overlay.is-scrolled::before {
    background: linear-gradient(to bottom,
        rgba(26, 24, 10, .32) 0%,
        rgba(26, 24, 10, .29) 15%,
        rgba(25, 23, 10, .26) 30%,
        rgba(25, 22, 9, .19) 50%,
        rgba(24, 21, 9, .16) 65%,
        rgba(20, 19, 8, .10) 80%,
        rgba(18, 17, 7, .03) 90%,
        rgba(0, 0, 0, 0) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
body:has(.header-overlay) main {
    padding-top: 0 !important;
    /* app.css sets main{background:#0e6057}. On the revamped home page that
       green flashes through during load and behind any sub-pixel gap between
       stacked sections, so neutralise it to the page's cream. */
    background-color: var(--hr-cream-500, #f9f7e9) !important;
}

/* Centre the nav pill across the full header width (per Figma). Only from
   1500px up: below that the absolutely-positioned pill is wide enough to slide
   underneath the search/language pill on the right. */
@media (min-width: 1500px) {
    .header-revamp .container-xl > .row { position: relative; }
    /* Bootstrap sets .navbar{position:relative}; neutralise it so the pill
       centres against the header row rather than the logo's navbar. */
    .header-revamp .container-xl > .row .navbar { position: static; }
    .header-revamp .navbar-nav-pill {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
    }
}
/* The 1300-1499px tightening that used to live here has moved below the base
   .navbar-nav-pill / .header-actions-pill rules. It was dead where it stood:
   every declaration it makes is also made by those base rules at the same
   specificity, and the base rules come later in the file, so source order won
   and the override never applied (the nav pill overlapped the actions pill by
   ~166px in that band as a result). */
/* Below 1300px the six nav items can't coexist with the actions pill on one
   row — they were sliding underneath the search icon. Fall back to the existing
   offcanvas hamburger here instead of at Bootstrap's 992px lg breakpoint. */
/* The trimmed Bootstrap copy in head.blade.php has no `.offcanvas-backdrop`
   rule, so the backdrop element its JS appends when the menu opens rendered as
   a zero-size invisible div — the page behind the panel stayed fully lit and
   the open menu read as part of the page rather than a layer over it.
   `.fade:not(.show){opacity:0}` from that same copy supplies the closed state. */
.offcanvas-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    transition: opacity .3s ease-in-out;
}
.offcanvas-backdrop.show { opacity: .6; }
@media (max-width: 1299.98px) {
    .header-revamp .navbar-nav-pill { display: none !important; }
    .header-revamp .navbar.d-lg-none { display: block !important; }
    .header-revamp .offcanvas .navbar-nav.d-lg-none { display: flex !important; }
    /* Bootstrap's own `.navbar-expand-lg .offcanvas` rule makes the offcanvas
       render inline (position:static, always visible) from 992px up — that's
       correct when a full desktop nav takes over at that width, but here the
       hamburger fallback is deliberately extended to 1300px, so it collides:
       the offcanvas panel was rendering inline in the header instead of as a
       hidden slide-out. The trimmed Bootstrap bundle in head.blade.php also
       has no `.offcanvas.show` rule at all (trimmed as "unused" since the
       original page never needed the panel to work above 992px), so both
       halves of the toggle need restoring here. */
    .header-revamp .navbar-expand-lg .offcanvas {
        position: fixed !important;
        z-index: 1045;
        /* 383px swallowed two thirds of a phone screen. The longest labels
           ("PARTICIPATE" / "TRANSLATORS") still fit on one line at 300px with
           the 15px bold type and 18px inline padding the items carry. */
        width: min(300px, 80vw) !important;
        height: 100vh !important;
        height: 100dvh !important;
        visibility: hidden !important;
        background-color: initial;
        transform: translateX(-100%);
        transition: transform .3s ease-in-out;
    }
    /* In Arabic the panel belongs on the right edge and has to slide in from
       it. `.offcanvas-start` pins left:0, so translateX(100%) on its own parked
       the closed panel one panel-width right of the left edge — i.e. mid
       screen — and it read as expanding out of the middle of the page. Anchor
       it to the right first, then the same transform slides it in from there. */
    [dir="rtl"] .header-revamp .navbar-expand-lg .offcanvas,
    [dir="rtl"] .main-header .offcanvas.offcanvas-start {
        right: 0;
        left: auto;
    }
    [dir="rtl"] .header-revamp .navbar-expand-lg .offcanvas { transform: translateX(100%); }
    .header-revamp .navbar-expand-lg .offcanvas.show,
    .header-revamp .navbar-expand-lg .offcanvas.showing {
        visibility: visible !important;
        transform: none;
    }
    /* The panel itself must scroll. Bootstrap locks body scroll while an
       offcanvas is open, so if the menu is taller than the screen and the panel
       can't scroll, the lower items are simply unreachable — which reads as
       "scroll stopped working". */
    /* The project ships a trimmed inline copy of Bootstrap's CSS (see the
       <style> block in head.blade.php) which omits the offcanvas height rule.
       top:0 + bottom:0 alone left the panel collapsed to its header height
       (~72px) while the menu inside was ~353px, so most items were clipped and
       unreachable. Force full viewport height; dvh accounts for mobile chrome. */
    .main-header .offcanvas.offcanvas-start {
        width: min(300px, 80vw);
        top: 0;
        bottom: 0;
        height: 100vh;
        height: 100dvh;
    }
    .main-header .offcanvas-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 48px;
    }
    /* Bootstrap's own .navbar-expand-lg .navbar-nav{flex-direction:row} rule
       (see head.blade.php's trimmed inline copy) applies from 992px up and
       isn't overridden anywhere else, so within this 992-1299px fallback
       range the mobile nav rendered as a horizontal row instead of a list. */
    .main-header .offcanvas-body .navbar-nav { width: 100%; flex-direction: column !important; }
    /* Submenus expand inline rather than as floating popovers, which on a phone
       rendered off-screen. */
    .main-header .offcanvas-body .dropdown-menu {
        position: static !important;
        transform: none !important;
        width: 100%;
        background: rgba(255,255,255,.06) !important;
        border: 0 !important;
        border-radius: 12px !important;
        margin: 4px 0 8px !important;
    }
    .main-header .offcanvas-body .dropdown-menu .dropdown-item,
    .main-header .offcanvas-body .dropdown-menu p { white-space: normal; }

    /* ---- Mobile menu styled to match the desktop revamp ---- */
    /* app.css has a legacy `.main-header .offcanvas.offcanvas-start.show`
       rule (solid #0e6057, !important) that's MORE specific than this one
       was (missing `.show`), so it always won while the menu was actually
       open — the dark-glass look below never rendered. Matching `.show`
       here restores it (this file loads after app.css, so equal specificity
       + !important on both sides is decided by source order). */
    /* Same dark tint as the header's own glass (rgba(28,26,18, ...)) — the
       earlier rgba(18,17,11,.96) was near-opaque and read as solid black.
       But the header's own .22 opacity is tuned for a small pill sitting
       over one hero photo; at that opacity this full-height panel let the
       page's own text/buttons behind it show through strongly enough to
       clash with the menu's own labels and become hard to read. Same hue,
       higher opacity + more blur so it reads as glass without being see-through. */
    .main-header .offcanvas.offcanvas-start,
    .main-header .offcanvas.offcanvas-start.show {
        background: rgba(28, 26, 18, .82) !important;
        backdrop-filter: blur(28px);
        -webkit-backdrop-filter: blur(28px);
        border-right: 1px solid rgba(255,255,255,.28) !important;
    }
    [dir="rtl"] .main-header .offcanvas.offcanvas-start,
    [dir="rtl"] .main-header .offcanvas.offcanvas-start.show {
        border-right: 0 !important;
        border-left: 1px solid rgba(255,255,255,.28) !important;
    }
    .main-header .offcanvas-header {
        padding: 18px 20px;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .main-header .offcanvas .btn-close {
        filter: brightness(0) invert(1);
        opacity: .85;
        position: static;
        width: 18px;
        height: 18px;
        /* Bootstrap's `.offcanvas-header .btn-close` sets a *physical*
           `margin: -.5rem -.5rem -.5rem auto`. `margin-inline-start: auto`
           alone resolves to margin-right in RTL, so Bootstrap's margin-left:auto
           stayed in force too and the auto margins on both sides centred the X
           instead of putting it at the panel's leading edge. Set both inline
           margins so exactly one of them is auto whichever way the page runs. */
        margin-block: 0;
        margin-inline: auto 0;
    }
    .main-header .offcanvas-body { padding-inline: 12px; }
    .main-header .offcanvas-body .nav-item { margin: 0 0 4px !important; width: 100%; }
    /* Same pill treatment as the desktop nav links. */
    .main-header .offcanvas-body .nav-link {
        color: var(--hr-cream-400) !important;
        font-size: 15px !important;
        font-weight: 700;
        letter-spacing: .3px;
        padding: 14px 18px !important;
        border-radius: 50px;
        transition: background-color .2s ease;
    }
    .main-header .offcanvas-body .nav-link:hover,
    .main-header .offcanvas-body .nav-link[aria-expanded="true"] { background: rgba(255,255,255,.1); }
    .main-header .offcanvas-body .nav-link.active-pill {
        background: var(--hr-green-500);
        color: var(--hr-cream-50) !important;
    }
    /* Chevron caret, matching desktop (base theme uses a solid triangle). */
    .main-header .offcanvas-body .dropdown-toggle::after {
        border: 0;
        width: 8px;
        height: 8px;
        border-right: 2.5px solid currentColor;
        border-bottom: 2.5px solid currentColor;
        /* See the desktop caret above: the rotation drops the ink below the
           baseline, and the translate pulls it back level with the word. */
        transform: translateY(-3px) rotate(45deg);
        margin-inline-start: 8px;
        vertical-align: 1px;
        transition: transform .2s ease;
    }
    /* Open: the same square rotated the other way puts its ink in the box's
       upper half, so the correction flips sign and has to cover the whole
       swing rather than half of it. */
    .main-header .offcanvas-body .nav-link[aria-expanded="true"]::after { transform: translateY(2.7px) rotate(-135deg); }
    .main-header .offcanvas-body .dropdown-menu .dropdown-item {
        color: var(--hr-cream-400) !important;
        border-radius: 10px;
        font-size: 15px !important;
        padding: 10px 14px;
    }
    /* Matches the desktop dropdown above: no hover plate, just the text going
       white. This one carried no colour change of its own, so it gains one -
       without it, removing the background would leave no hover state at all. */
    .main-header .offcanvas-body .dropdown-menu .dropdown-item:hover {
        background: transparent !important;
        color: #fff !important;
    }
    .main-header .offcanvas-body .dropdown-menu p.custom-item {
        color: rgba(249,247,234,.55) !important;
        font-size: 13px !important;
    }
    .main-header .offcanvas-body .dropdown-menu img { filter: brightness(0) invert(1); opacity: .6; }
    /* Sign-in CTA gets the amber primary-button look. */
    .main-header .offcanvas-body .signup {
        background: var(--hr-yellow-500) !important;
        color: var(--hr-cream-50) !important;
        border-radius: 61px;
        font-weight: 700;
        padding: 14px 22px !important;
        height: auto !important;
        width: 100%;
        margin-bottom: 12px;
    }
}

/* ---- Header glass pills (Figma "Frame 2147239038" node 1583:15223 for the nav
   pill, node 1583:15231 for the actions pill — both carry an identical
   treatment) ----

   Figma spec: fill #fff at 15%, radius 100px, drop shadow 0/4/20 rgba(0,0,0,.2),
   and a GLASS effect (lightAngle -45deg, lightIntensity .8). That glass is what
   BIL-544 is about: the pill should read as a lit slab, with a bright rim along
   its top-left arc fading around to a faint pickup bottom-right, not the flat
   uniform hairline it had.

   The rim is a gradient border rather than a pseudo-element: the fill layer is
   clipped to padding-box and the -45deg gradient to border-box, so only the 1px
   ring shows the gradient. A positioned ::before would be fragile here — the
   nav pill switches to position:absolute when it gets centred at >=1500px. */
.header-revamp .navbar-nav-pill,
.header-revamp .header-actions-pill {
    /* Fill is a variable so the scrolled state can swap it without
       re-declaring `background` — see the .is-scrolled rule below. It has to
       stay declared here: with the var undefined, `background` is invalid at
       computed-value time and the browser drops the whole shorthand, so the
       glass rim disappears along with the fill. Commenting this one line out is
       what re-opened BIL-544 — to make the pill untinted, set it to
       `transparent`, never remove it. */
    --hr-pill-fill: rgba(255,255,255,.15);
    background:
        linear-gradient(var(--hr-pill-fill), var(--hr-pill-fill)) padding-box,
        linear-gradient(135deg,
            rgba(255,255,255,.70) 0%,
            rgba(255,255,255,.14) 38%,
            rgba(255,255,255,.05) 62%,
            rgba(255,255,255,.24) 100%) border-box;
    border: 1px outset #ffffff9c;
    border-bottom-width:0px;
    border-radius: 100px;
    /* Figma's glass radius is 4px, but its own backdrop is flat black so the
       blur is invisible there. Keeping 16px — the value already tuned for this
       header — is what holds the white nav text legible over the real hero
       photos without changing anything the design actually shows. */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    /* Drop shadow exactly per Figma. The -45deg light the glass effect throws
       is carried by the border gradient above, not by an inset glow. */
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.20);
}
/* The toggler is the actions pill's round sibling in the design - same glass
   fill and rim, circular, about the pill's own height. Bootstrap styles it
   with a 6px radius and a border in --bs-emphasis-color at 15% (near-black),
   neither of which registers over the hero, so it read as three bare lines
   with no button around them. No media query needed: the toggler only renders
   below the nav's own breakpoint. */
.header-revamp .hamburger-menu {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.20);
}
.header-revamp .hamburger-menu:focus { box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.20); }
/* The three bars are drawn in app.css as ::before, ::after and
   .navbar-toggler-icon, each `width: 100%` of the button (Bootstrap's own
   background-image glyph is switched off there). At the button's old 30px that
   read as a hamburger; inside a 44px circle the three full-width bars filled
   it as a solid block. Column layout with an explicit 20px bar keeps the glyph
   at the design's size, centred: 3*3px bars + 2*4px gaps = 17px in a 44px
   circle. The extra .navbar-toggler class is there to outrank app.css's
   `.main-header .navbar-toggler:before` without depending on stylesheet
   order. */
.header-revamp .hamburger-menu.navbar-toggler {
    flex-direction: column;
    gap: 4px;
}
.header-revamp .hamburger-menu.navbar-toggler::before,
.header-revamp .hamburger-menu.navbar-toggler::after,
.header-revamp .hamburger-menu.navbar-toggler .navbar-toggler-icon {
    width: 20px;
}

/* Figma only ever draws this navbar over the dark hero, which is the state
   BIL-544 is about. Once the page scrolls the same fixed pills pass over the
   cream sections, and there white-on-white-15% leaves both the pill and its
   cream-400 labels washed out (verified side by side over .hr-voices). So the
   design's fill applies over the hero, and the scrolled state keeps the dark
   tint it already had — only the fill swaps, the glass rim and shadow carry
   through both. */
.header-revamp.header-overlay.is-scrolled .navbar-nav-pill,
.header-revamp.header-overlay.is-scrolled .header-actions-pill {
    --hr-pill-fill: rgba(28,26,18,.22);
}
.header-revamp .navbar-nav-pill {
    display: flex;
    align-items: center;
    /* Figma: 8px padding, no gap between items — the items carry their own. */
    gap: 0;
    padding: 8px;
}
/* The theme's .nav-item{margin} squeezed the links; keep spacing on the link
   itself so each pill keeps its full width. */
.header-revamp .navbar-nav-pill .nav-item { margin: 0 !important; }
.header-revamp .navbar-nav-pill .nav-link {
    border-radius: 50px;
    /* Figma nav item (node 1583:15200): 16px inline padding, 43px tall, Almarai
       Bold 16/24 with no tracking. The old 13px/26px + 15px/.3px built a 67px
       pill against the design's 59px, and ran ~112px wider overall.
       Vertical padding is 8.5px rather than the 9.5px that would reproduce
       Figma's 43px item: Figma's glass is an effect with no stroke, so its 59px
       pill is 43 + 16 padding exactly, whereas the rim here is a real 1px
       border that adds 2px to the box. Taking those 2px off the item's own
       padding lands the pill's outer height on 59px — which is what lines it up
       with the actions pill beside it — and the 2px never shows on the item.
       !important overrides the inline <style> in head.blade.php, which forces
       padding-inline:1px on .main-header .navbar-nav .nav-link above 992px. */
    padding: 8.5px 16px !important;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--hr-cream-400) !important;
    white-space: nowrap;
    transition: background-color .2s ease;
}
.header-revamp .navbar-nav-pill .nav-link.active-pill {
    background: var(--hr-green-500);
    color: var(--hr-cream-50) !important;
}
.header-revamp .navbar-nav-pill .nav-link:hover { background: rgba(255,255,255,.15); }
/* Figma uses a chevron, not Bootstrap's solid triangle caret. */
.header-revamp .navbar-nav-pill .dropdown-toggle::after {
    border: 0;
    width: 9px;
    height: 9px;
    margin-inline-start: 9px;
    vertical-align: 1px;
    /* 2px measured thin against the board's stroke, which sits at ~2.5px once
       the export scale is divided out. */
    border-right: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    /* The chevron is the bottom-right corner of a square, so rotating it puts
       its ink in the LOWER half of the box — the caret hung ~3px past the
       label's baseline instead of sitting level with the word. vertical-align
       can't fix that on its own here (the offcanvas twin flips the same box
       upwards when its submenu opens and would need the opposite value), so
       the correction rides on the transform, where each state can carry its
       own. -3px lands the chevron's ink centre on the cap-height centre. */
    transform: translateY(-3px) rotate(45deg);
    transform-origin: center;
}

/* Dropdown panels: dark translucent + rounded, matching Figma (the base theme
   ships a square cream panel, which clashed with the dark overlay header). */
.header-revamp .navbar-nav-pill .dropdown-menu {
    background: rgba(38, 38, 34, .92) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
    padding: 8px !important;
    margin-top: 10px !important;
    min-width: 200px;
    width: max-content;
}
.header-revamp .navbar-nav-pill .dropdown-menu .dropdown-item,
.header-revamp .navbar-nav-pill .dropdown-menu .custom-item {
    color: var(--hr-cream-400) !important;
    border-radius: 8px;
    white-space: nowrap;
    font-size: 15px !important;
    line-height: 1.3;
    padding: 10px 14px !important;
}
.header-revamp .navbar-nav-pill .dropdown-menu li:not(:last-child) {
    margin-bottom: 2px;
}
/* Hover is the text brightening to white, with no plate behind it: the panel is
   already a dark translucent card, so a second translucent white fill on one row
   read as a grey box sitting inside it. The colour shift alone still marks the
   row without redrawing it. Bootstrap's own --bs-dropdown-link-hover-bg has to
   be overridden here too, not just left unset, or it repaints the default. */
.header-revamp .navbar-nav-pill .dropdown-menu .dropdown-item:hover,
.header-revamp .navbar-nav-pill .dropdown-menu .dropdown-item:focus {
    background: transparent !important;
    color: #fff !important;
}
.header-revamp .navbar-nav-pill .dropdown-menu p.custom-item {
    color: rgba(249,247,234,.6) !important;
    padding-inline: 1rem;
}
.header-revamp .navbar-nav-pill .dropdown-menu img { filter: brightness(0) invert(1); opacity: .7; }
.header-revamp .header-actions-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Figma: pl-12 pr-8 py-8 (asymmetric, not a flat 8px 12px). */
    padding: 8px 8px 8px 12px;
}
/* Search / accessibility icons and the language label sit in the same pill and
   must stay white for contrast against the dark translucent backdrop. */
.header-revamp .header-actions-pill .btn,
.header-revamp .header-actions-pill .lang,
.header-revamp .header-actions-pill .bi { color: var(--hr-cream-400) !important; }
/* Divider between the search icon and the globe/language control, per
   Figma. Kept as a plain CSS line (matching the breadcrumb separators
   elsewhere) rather than a new icon asset. */
.header-revamp .header-actions-pill .header-actions-sep {
    width: 1px;
    height: 13px;
    background: rgba(249, 247, 234, .4);
    flex-shrink: 0;
}
/* Guest sign-in trigger — a filled round chip per Figma. It borrows the
   .custom-toggle-accessibility class for the click behaviour, but that base rule
   is a 28x28 box with no radius and no background, which rendered as a square,
   so the circle is defined explicitly here. */
.header-revamp .hr-header-signin {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: var(--hr-cream-400) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0 !important;
    border: 0;
    transition: transform .2s ease;
}
.header-revamp .hr-header-signin img {
    width: 19px;
    height: 19px;
    /* The source SVG is stroked in cream for dark backgrounds; darken it now
       that it sits on a light chip. */
    filter: brightness(0) saturate(100%) invert(21%) sepia(29%) saturate(1352%) hue-rotate(134deg) brightness(94%) contrast(101%);
}
.header-revamp .hr-header-signin:hover { transform: scale(1.06); }
/* Logged-in avatar: round, and sized to sit inside the pill rather than the
   49px used when this control lived outside it. */
.header-revamp .header-actions-pill .profile-settings .custom-toggle {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(249,247,234,.6);
}
.header-revamp .header-actions-pill .profile-settings { display: inline-flex; position: relative; }
/* Profile menu gets the same dark translucent treatment as the nav dropdowns —
   it was still the base theme's cream panel, which clashed with the header. */
.header-revamp .header-actions-pill .profile-settings .dropdown-menu {
    background: rgba(38, 38, 34, .92) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
    padding: 12px !important;
    margin-top: 12px !important;
    min-width: 268px;
    /* Anchor to the pill's end so a wide menu can't overflow the viewport. */
    inset-inline-end: 0;
    inset-inline-start: auto;
}
.header-revamp .header-actions-pill .profile-settings .dropdown-item {
    color: var(--hr-cream-400) !important;
    border-radius: 10px;
    padding: 10px 12px !important;
}
.header-revamp .header-actions-pill .profile-settings .dropdown-item:hover,
.header-revamp .header-actions-pill .profile-settings .dropdown-item:focus {
    background: transparent !important;
    color: #fff !important;
}
/* The menu's icons are dark-stroked for the light panel; invert them now that
   the panel is dark. */
.header-revamp .header-actions-pill .profile-settings .dropdown-item img {
    filter: brightness(0) invert(1);
    opacity: .8;
}
.header-revamp .header-actions-pill .profile-settings .dropdown-item .fs-20 { font-size: 16px !important; }
/* 1300-1499px: pill stays in normal flow, tightened so logo / nav / actions
   still fit on one row. Must sit after the base pill rules above — it overrides
   their padding/gap/font-size at the same specificity, so source order decides
   it. */
@media (min-width: 1300px) and (max-width: 1499.98px) {
    .header-revamp .navbar-nav-pill { padding: 6px; gap: 0; }
    .header-revamp .navbar-nav-pill .nav-link {
        padding: 8px 11px !important;
        font-size: 14px;
        letter-spacing: 0;
    }
    .header-revamp .navbar-nav-pill .dropdown-toggle::after {
        margin-inline-start: 5px;
        width: 7px;
        height: 7px;
        /* Smaller box + 14px type, so the drop to correct for is smaller too. */
        transform: translateY(-2.5px) rotate(45deg);
    }
    .header-revamp .header-actions-pill { padding: 6px 6px 6px 10px; gap: 8px; }
    /* The two pills are sized by their own tallest child, and in this band
       those differ (nav item 40px vs search form 33px), which left them
       visibly mismatched side by side. Floor both at the taller one. */
    .header-revamp .navbar-nav-pill,
    .header-revamp .header-actions-pill { min-height: 54px; }
    .header-revamp .navbar-brand .logo { width: 84px; }
}
@media (max-width: 991.98px) {
    /* Only the NAV pill loses its chrome here - it is hidden below 1300px
       anyway (see the max-width:1299.98px block above), so its glass rim would
       just be ringing an invisible box. The ACTIONS pill keeps its own glass:
       the phone board draws it exactly as the desktop one, a translucent fill
       with the light rim around the search / language controls, and stripping
       it left those controls floating loose on the hero. */
    .header-revamp .navbar-nav-pill {
        background: none;
        padding: 0;
        border: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}
/* ---------- Phone board: navbar metrics ----------
   Figma node 40002946:108296 "Navbar" (355x36.8 on the 402-wide Home board),
   with the pill itself at 40002946:108304 (143.5x36.8). Everything here is the
   design's own figure, rounded to the nearest half pixel; the desktop pill is
   roughly half again as tall (58px), which is what made the phone header read
   oversized:

     pill      36.826 tall, pl 7.49 / pr 4.993 / py 4.993, gap 9.987,
               fill rgba(255,255,255,.15), shadow 0 2.497 12.483 rgba(0,0,0,.2)
     icons     17.477 square (search and globe)
     label     Almarai Regular 12 / 17.477, primary-2 #f9f7e9
     globe->label gap  3.745
     divider   1 x 8.114
     MenuButton (40002946:108318) 36 square with an 18 glyph, 8 from the pill

   The design's third pill item is a 29.3px white user avatar; it stays out per
   the brief ("no need user icon"), so the pill needs its height stated - the
   remaining 18px-tall row would otherwise only make it ~28px. */
@media (max-width: 767.98px) {
    .header-revamp .header-actions-pill {
        gap: 10px;
        padding: 5px 5px 5px 7.5px;
        min-height: 37px;
        box-shadow: 0px 2.5px 12.5px 0px rgba(0, 0, 0, 0.20);
    }
    /* The search glyph is an icon font, so its box comes from font-size; the
       Bootstrap button's own 6px/12px padding has to go with it. */
    .header-revamp .header-actions-pill form[role="search"] .btn {
        padding: 0;
        font-size: 17.5px;
        line-height: 1;
        display: flex;
        align-items: center;
    }
    /* Beats app.css's .size-23 (single class, no !important). */
    .header-revamp .header-actions-pill .lang-globe { width: 17.5px; height: 17.5px; }
    .header-revamp .header-actions-pill .lang { font-size: 12px; line-height: 17.5px; }
    .header-revamp .header-actions-pill .lang-btn { gap: 3.75px; }
    /* app.css gives .lang-globe margin-inline-end: 8px, which stacked on top
       of the gap above and put 11.75px between globe and label. */
    .header-revamp .header-actions-pill .lang-globe { margin-inline-end: 0; }
    /* Figma's mobile logo is 82.6x35.4 (node 40002946:108297 "Layer_1");
       app.css sets 100px for everything below 992px. Width only - the ratio
       is already 2.34:1, so the height follows. */
    .header-revamp .navbar-brand .logo { width: 82.5px; }
    .header-revamp .header-actions-pill .header-actions-sep { height: 8px; }
    .header-revamp .hamburger-menu {
        width: 36px;
        height: 36px;
        /* app.css sets margin-inline-start: 20px; the board's right-hand group
           puts 8px between the pill and the button. */
        margin-inline-start: 8px;
    }
    /* 18px glyph: three 3px bars with 3px gaps = 15px, centred in the 36px
       button, against the 20px bars the desktop circle carries. */
    .header-revamp .hamburger-menu.navbar-toggler { gap: 3px; }
    .header-revamp .hamburger-menu.navbar-toggler::before,
    .header-revamp .hamburger-menu.navbar-toggler::after,
    .header-revamp .hamburger-menu.navbar-toggler .navbar-toggler-icon { width: 18px; }
}

/* ---------- Footer ---------- */
.footer-revamp {
    background: var(--hr-brown-500);
    /* app.css still has `footer { border-top: 1px solid #fff }` from the old
       design; Figma's footer has no rule above it. */
    border-top: 0;
    /* Figma frame: 120px above the content, 60px below it (the 160px side inset
       is applied on the container below). */
    padding-block: 120px 60px;
}
/* Figma's 160px inset, but fluid below the width that can seat it rather than
   held flat — the Bootstrap container was starting the content at ~47px, out of
   line with the rest of the page, and a flat 160px overcorrected the other way:
   on a laptop it spent 320px of a 1440px screen on empty margin while the five
   link columns and the newsletter card fought over what was left.
   8vw is the same ratio --smt-gutter uses, so the footer now tracks the content
   sections' own gutter instead of diverging from it as the viewport narrows,
   and the 160px cap keeps the design's inset exactly wherever there is room for
   it (from 2000px up; 1920px lands 6px inside it). The width this returns is
   what lets the newsletter card hold its single-line row down to ~1366px —
   see the .footer-newsletter-card band further down. */
.footer-revamp > .container,
.footer-revamp > .container-lg,
.footer-revamp > .container-xl {
    max-width: 100%;
    width: 100%;
    padding-inline: clamp(40px, 8vw, 160px);
}
@media (max-width: 1199.98px) {
    .footer-revamp { padding-block: 80px 48px; }
    .footer-revamp > .container,
    .footer-revamp > .container-lg,
    .footer-revamp > .container-xl { padding-inline: 40px; }
}
@media (max-width: 767.98px) {
    .footer-revamp { padding-block: 56px 40px; }
    .footer-revamp > .container,
    .footer-revamp > .container-lg,
    .footer-revamp > .container-xl { padding-inline: 16px; }
}
/* Figma's footer buttons are a step up from the shared header pill: 56px tall,
   24px side inset, 16/24 bold. Height is set explicitly instead of through
   padding so Subscribe and the email field — which carry different border
   widths — still land on exactly 56px and line up. */
.footer-revamp .hr-btn {
    min-height: 56px;
    padding: 0 24px;
    font-size: 16px;
    line-height: 24px;
}
/*.footer-revamp .hr-btn-ghost-light {*/
/*    background: rgba(255,255,255,.2);*/
/*    border-color: rgba(255,255,255,.1);*/
/*}*/

.footer-cta {
    position: relative;
    /* Visible, not hidden: Figma centres the two blue diamonds ON the card's
       left edge and the third ON its bottom edge, so half of each sits outside
       the card. They live in footer-cta-art.png, which is positioned below to
       overhang by exactly that much — clipping here would halve them. Nothing
       needs the clip: the glow is a background and is trimmed by
       border-radius regardless, and the PNG has the 24px corners baked in. */
    overflow: visible;
    border-radius: 24px;
    padding: 60px 80px 45px;
    margin-bottom: 83px;
    min-height: 409px;
    /* Figma's glow, transcribed rather than eyeballed: a radial at 40% layer
       opacity (folded into the stop alphas) centred 209.65px ABOVE the card's
       top-left corner with a 567px radius, so the card only ever shows the
       outer two-thirds of the ramp. Stated as percentages of the 1602x409
       frame — 567/1602 and 567/409 — so it stays a circle at the design width
       and narrows with the card instead of swamping it. The previous
       22% x 50% ellipse matched the corner's brightness but died out around
       a third of the way to where Figma's does. */
    background:
        radial-gradient(35.39% 138.63% at 0% -51.26%,
            rgba(205,136,27,.2) 0%,
            rgba(116,81,20,.1) 50%,
            rgba(27,25,12,0) 100%),
        var(--hr-brown-500);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}
/* No CSS outline or diamonds here: the banner's lines and blue diamonds are
   already part of footer-cta-art.png. Drawing them again produced a second,
   slightly offset line running alongside the artwork's own. */
/* Figma artwork layers — above the outline (z-index 1) so they mask it on the
   right, below the text content (z-index 3). */
/* Both layers are sized as a PERCENTAGE of the banner, matching their ratios in
   Figma's 1600x409 frame. Sizing by height instead made the art render
   oversized whenever the container was narrower than 1400px. */
/* The export's bounds are the UNION of the outline and the diamonds, not the
   card: it covers card-space x -14.68..1600.75 and y 0..423.5 (card 1602x409),
   because the left diamonds straddle x=0 and the bottom one hangs 14.5px below
   y=409. Stretching that to inset:0 therefore landed the outline 14.5px inside
   the card on the left and 14.5px above its bottom — which is what left the
   card's own glow and 24px corner showing OUTSIDE the drawn border. Insetting
   by the export's margins (-14.68/1602 and -14.5/409 as percentages, so they
   scale with the card) puts the outline back on the card's edge and lets the
   diamonds overhang as Figma has them. Physical sides on purpose: the artwork
   is not mirrored in RTL (see the RTL section). */
.footer-cta-art {
    position: absolute;
    inset: 0 0.078% -3.5452% -0.9162%;
    z-index: 2;
    background-image: url("../images/home-revamp/footer-cta-art.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    pointer-events: none;
}
.footer-cta-envelope {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    /* 575 / 1600 = 35.9% of the banner width in Figma. */
    width: 35.9%;
    height: 100%;
    background-image: url("../images/home-revamp/footer-cta-envelope.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 100% 100%;
    pointer-events: none;
}
/* 620px is the Figma width, and it only clears the envelope on a full 1600px
   card: the envelope keeps taking 35.9% of the card as the viewport narrows
   while a fixed 620px does not. An earlier cap of `64.1% - 2px` stopped the
   copy sliding UNDER the artwork, but it only just did - it left a 25px gap at
   every laptop width, against the ~326px Figma has at 1600, so the copy read as
   jammed against the art with the card's other half empty.

   43.06% reproduces Figma's proportion instead of merely avoiding a collision:
   at a 1600 card the containing block here is 1440 (less the 80px padding
   either side) and 620/1440 = 43.06%, so the Figma width is exact at the design
   size and every narrower card keeps the same copy : gap : art ratio. min()
   still caps it at the literal 620px on anything wider. */
.footer-cta-content { position: relative; z-index: 3; max-width: min(620px, 43.06%); }
@media (max-width: 991.98px) {
    .footer-cta { padding: 32px; min-height: 0; }
    .footer-cta-envelope { display: none; }
    .footer-cta-art { opacity: .35; }
    /* Envelope is hidden here, so the copy can use the full card again. */
    .footer-cta-content { max-width: 620px; }
}
/* Figma H3/Bold 48/56, then a 24px gap to the body copy. Figma puts 48px from
   there to the button, which reproduced the card's 304px content height, but it
   read as the button floating away from the copy it belongs to — the gap under
   the paragraph was twice the one above it. Matched to the heading's 24px so the
   block keeps one rhythm; the card is centred inside min-height:409px, so the
   24px it loses is shared top and bottom rather than left dead at the foot. */
.footer-cta-content h3 { font-size: 48px; line-height: 56px; font-weight: 700; color: #f8f6e6; margin-bottom: 24px; }
.footer-cta-content h3 .hr-accent { color: var(--hr-yellow-400); }
/* brown-200 (#96958f) at the 80% layer opacity Figma sets on the wrapper. Kept
   as a single rgba rather than an opacity property so the mobile override
   further down can restate the colour without inheriting the fade. */
.footer-cta-content p { font-size: 24px; line-height: 32px; color: rgba(150,149,143,.8); margin-bottom: 24px; }
/* No artboard exists between the 1440 desktop and the 402 mobile one, so the
   48/24 pair steps down once here rather than jumping straight to the mobile
   24/14 at 768. Has to sit after the two rules above, not in the 991 block
   further up — equal specificity, so source order decides. */
/* Between the 1600px design width and the 992px step, the copy column is
   proportionally narrower (see .footer-cta-content's 43.06% cap), so Figma's
   48/24 pair wraps the heading to a third line and pushed the card from its
   409px height to 497px. One step down here keeps the heading at two lines and
   the card at its design height. Scoped above 992 so the mobile block below,
   which is the narrower step, still wins there. */
@media (max-width: 1399.98px) and (min-width: 992px) {
    .footer-cta-content h3 { font-size: 40px; line-height: 48px; }
    .footer-cta-content p { font-size: 20px; line-height: 28px; margin-bottom: 24px; }
}
@media (max-width: 991.98px) {
    .footer-cta-content h3 { font-size: 36px; line-height: 44px; margin-bottom: 20px; }
    .footer-cta-content p { font-size: 20px; line-height: 28px; margin-bottom: 20px; }
}
/* Figma card is 603x200: 40px padding, a 32px gap, and a 523px row (383px
   field + 15px + Subscribe). The 603px cap reproduces that at desktop widths —
   col-lg-5 is wider than the card — and below it the card just fills its
   column. */
.footer-newsletter-card {
    position: relative;
    border: 1px solid var(--hr-green-500);
    border-radius: 30px;
    padding: 40px;
    width: 100%;
    max-width: 603px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.footer-newsletter-card h4 { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--hr-cream-500); margin: 0; }
/* Input + Subscribe on one row (Figma). */
.footer-newsletter-card .newsletter-row {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    /* Wrap rather than crushing the input to a few characters wide. */
    flex-wrap: wrap;
}
/* Small basis plus grow, so the field takes whatever the 603px card leaves
   after Subscribe — 383px, the Figma width. A 383px basis instead put the
   hypothetical line at 525px against a 523px row and wrapped the button. The
   200px floor is where it gives up and wraps rather than crushing the field. */
.footer-newsletter-card .newsletter-wrap { flex: 1 1 200px; min-width: 0; }
.footer-newsletter-card .newsletter-input {
    border: 1px solid rgba(249,247,233,.3);
    border-radius: 10px;
    background: transparent;
    color: #fff;
    /* Fixed height rather than 16px padding: the field and Subscribe carry
       different border widths, and both have to come out at Figma's 56px. */
    height: 56px;
    padding: 0 24px;
    font-size: 16px;
    line-height: 24px;
}
.footer-newsletter-card .newsletter-input::placeholder { color: #bbbab7; opacity: .51; }
.footer-newsletter-card .newsletter-row .hr-btn { flex: 0 0 auto; }
/* jquery-validate injects <label class="error"> after the input; keep it inside
   the field column so it doesn't push the button out of the row. */
.footer-newsletter-card .newsletter-wrap label.error {
    display: block;
    /* app.css styles EVERY label.error globally: position:absolute plus
       `bottom:-27px` for this very wrapper, and colour/size/margin with
       !important. Absolute took the message out of flow and dropped it
       underneath the Subscribe button - on the phone board, where the row
       stacks, the button sits directly below the field and covered it
       completely, so a failed submit looked like nothing happened. Static puts
       it back in the field column (which is what keeps the button in the row
       on desktop - .newsletter-row is align-items:flex-start), and the three
       !importants have to be answered in kind. */
    position: static;
    margin-top: 6px !important;
    font-size: 14px !important;
    /* Light red: app.css's pure `red` is barely legible on the dark footer. */
    color: #ff8f8f !important;
}
.footer-newsletter-card .news-letter-success { display: block; margin-top: 12px; }
@media (max-width: 575.98px) {
    .footer-newsletter-card .newsletter-row { flex-direction: column; align-items: stretch; }
    /* Once the row stacks, flex-grow acts on HEIGHT — the 1 1 200px basis made
       the field stretch and pushed Subscribe to the bottom of the card, leaving
       a large empty gap. Pin it to its content height instead. */
    .footer-newsletter-card .newsletter-wrap { flex: 0 0 auto; }
    .footer-newsletter-card .newsletter-row .hr-btn { width: 100%; }
}
/* Figma: 64px below the row, then the rule, then a 32px gap to the social
   line. */
.footer-main-row { margin-bottom: 64px; }
/* Figma right-aligns the five columns as one 825px group with 40px gaps and
   content-width columns — not spread across the track, which is what
   space-between plus a 140px column floor was doing. */
.footer-links-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: flex-end;
    /* The separating rule is now a full-width sibling (.footer-divider), not a
       border on this column. */
}

/* ---------- Newsletter card / link columns ----------
   Figma right-aligns the five columns as one group of CONTENT-width columns
   beside the 603px newsletter card, and the whole difficulty is that the
   Bootstrap 5/7 split hands the group a share of the row rather than the width
   it needs: 664px at 1440, against the 704px the five want at a 24px gap
   (608px of content plus the four gaps). Forty pixels short is enough to orphan
   TRANSLATORS on a second line, and the shortfall persists at every laptop
   width, so the row of five used to be reserved for >=1600px.

   Splitting by ratio is the thing to drop, not the row. Here the columns take
   exactly the width their content needs and the CARD absorbs whatever is left
   over - so one line holds at every width in this range with no per-breakpoint
   basis to re-derive, which is what the two hand-tuned bands above this were
   doing. What the card is left with is comfortable: ~410px at 1440 and ~380px
   at the 1200 floor, against the ~300px its email field and Subscribe need to
   share a row (they stack at 575.98px, far below this).

   Note this supersedes the old five-even-tracks arithmetic - 5 x 143 + 4 x 24 =
   811px - which priced every column at the LONGEST label's width. Content
   widths run 96-149px, so the real group is 704px, and that is the difference
   between fitting and not. */
@media (min-width: 1200px) {
    .footer-main-row > .footer-links-col { flex: 0 0 auto; width: auto; max-width: none; }
    /* min-width:0 so the card yields instead of overflowing the row, whatever a
       locale's labels measure - Arabic's are shorter than English's here, but
       nothing about this layout depends on that holding. */
    .footer-main-row > .col-lg-5 { flex: 1 1 0; max-width: none; min-width: 0; }
    .footer-links-grid { flex-wrap: nowrap; gap: 24px; }
}
/* Figma's own 40px gap, once the row is wide enough to seat it (768px of
   columns, which the track clears from ~1750px up). */
@media (min-width: 1920px) {
    .footer-links-grid { gap: 40px; }
}
/* The card absorbs the columns' now-fixed width, so it is the card that has to
   cope with a narrow row rather than the columns giving up their line.
   From 1366px it copes by letting the FIELD shrink: min-width:0 clears the
   default min-content floor on the field's flex item, which is what was
   throwing Subscribe onto a second line while ~190px of usable field width was
   still available. The field lands at ~193px at 1366 and ~255px at 1440.
   Card width here is 0.84 x viewport - 726 (the 8vw gutter pair, the row's 24px
   gutter and 702px of columns), which is what puts that floor at 1366. */
@media (min-width: 1366px) {
    .footer-newsletter-card .newsletter-wrap { min-width: 0; }
    .footer-newsletter-card .newsletter-row { flex-wrap: nowrap; }
}
/* Below that the field would shrink past usable (54px at 1200), so the card
   stacks instead - exactly as it already does at 575.98px - and the field gets
   the card's full width. The five columns keep their single line either way,
   which is what this whole band exists for. */
@media (min-width: 1200px) and (max-width: 1365.98px) {
    .footer-newsletter-card .newsletter-row { flex-direction: column; align-items: stretch; }
    .footer-newsletter-card .newsletter-wrap { flex: 0 0 auto; }
    .footer-newsletter-card .newsletter-row .hr-btn { width: 100%; }
}
/* Below 1200 one line of five really is out of reach: 704px of columns against
   a 489px track, and buying that back would leave the card under 300px. Three
   even tracks are what the row can hold, and unlike flex's wrap they line up -
   grid columns are shared down the rows, so PARTICIPATE and TRANSLATORS sit
   under ABOUT US and EVENTS instead of at their own text widths. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .footer-links-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 40px 24px;
    }
}
/* Stacked on mobile the newsletter card sat flush against the link columns. */
@media (max-width: 991.98px) {
    .footer-main-row > [class*="col-"] + [class*="col-"] { margin-top: 40px; }
}
/* Full-bleed, edge to edge. The rule lives inside .footer-revamp's container,
   whose gutter is `padding-inline: clamp(40px, 8vw, 160px)` - so it was inset by
   that much on both sides (112px at a 1394px viewport) instead of spanning the
   page. Negating the same clamp pushes it back out to the container's border
   box, which is the footer's full width since that container is width:100% /
   max-width:100%.

   Deliberately NOT 100vw: vw counts the vertical scrollbar, so a 100vw rule
   inside a centred box overhangs by ~3px per side and lands in the document's
   scrollable overflow - the same trap noted on .hr-diamond-border::before and
   .abt-diamond-divider::before. Negating the container's own value tracks it
   exactly, including through the breakpoint override below. */
.footer-divider {
    height: 1px;
    background: rgba(249,247,234,.2);
    margin-bottom: 32px;
    margin-inline: calc(-1 * clamp(40px, 8vw, 160px));
}
/* The container's gutter is a flat 40px from here down (see the .container-xl
   override above), so the negation is too. Below 768px the rule is hidden
   altogether, so there is no third case. */
@media (max-width: 1199.98px) {
    .footer-divider { margin-inline: -40px; }
}
.footer-links-grid .footer-col { color: #f9f7ea; }
/* Label Medium/Bold 20/28, then Figma's 31px gap down to the links, which are
   Body XSmall/Regular 16/24 at 80% and 8px apart. */
.footer-links-grid .footer-col h5 { font-size: 20px; line-height: 28px; font-weight: 700; margin-bottom: 31px; text-transform: uppercase; }
.footer-links-grid .footer-col a {
    display: block;
    color: #f9f7ea;
    opacity: .8;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 8px;
    text-decoration: none;
}
.footer-links-grid .footer-col a:last-child { margin-bottom: 0; }
.footer-links-grid .footer-col a:hover { opacity: 1; text-decoration: underline; }

/* ---------- Social + legal line ---------- */
/* Figma: 16/24 bold label, 24px glyphs 31px apart, legal links 16/24 at 60%.
   Stated here rather than through app.css utilities because that file still
   carries pre-revamp `footer ul li { height: 17px }`, `.fs-18` (18px) and
   `.gap-30` (15px below 1200px) rules aimed at the old footer. */
.footer-social-col { gap: 31px; }
.footer-social-col > p { font-size: 16px; line-height: 24px; font-weight: 700; color: #f8f6e6; }
.footer-social-list { gap: 31px; margin: 0; padding: 0; list-style: none; }
.footer-social-list .nav-social-item { height: auto; }
.footer-social-list .nav-social-item > a { display: flex; align-items: center; }
.footer-social-list .nav-social-item i { display: block; width: 24px; height: 24px; }
.footer-legal-col .link-wrap a {
    font-size: 16px;
    line-height: 24px;
    color: #f8f6e6;
    opacity: .6;
    text-decoration: none;
}
.footer-legal-col .link-wrap a:hover { opacity: 1; }
@media (max-width: 767.98px) {
    .footer-cta { padding: 32px; flex-direction: column; align-items: flex-start; }
    .footer-links-grid { gap: 24px; }
}

/* ==========================================================================
   Mobile footer (Figma: node 40003003:109751 "footer-mobile", 402.57x702).

   A restyle of the desktop markup rather than a second DOM: everything below
   is scoped to this one media query. The hook classes it targets
   (.footer-links-col / .footer-bottom / .footer-social-col /
   .footer-social-list / .footer-legal-col) now also carry desktop rules in the
   section above, so overrides here have to restate rather than assume.

   The artboard stacks: 40px pad, CTA card 232, 48 gap, newsletter 204, 32,
   social row 54, 32, legal 20, 40px pad = 702.
   ========================================================================== */
@media (max-width: 767.98px) {
    .footer-revamp { padding: 40px 0; }
/* The exported marks are square (16.041px in Figma); 18px keeps the row's
   previous footprint. object-fit:contain guards against a non-square export. */
.footer-social-icon { width: 18px; height: 18px; object-fit: contain; display: block; }
    /* Figma's side gutter is 24px, not the 16px the shared container override
       further up this file applies. */
    .footer-revamp > .container,
    .footer-revamp > .container-lg,
    .footer-revamp > .container-xl { padding-inline: 24px; }

    /* ---------- Community CTA card ---------- */
    /* min-height, not the artboard's flat 232px: the heading and body are
       translated strings, so Arabic (or a longer future line) has to be able
       to push the card taller instead of spilling out of it. Equal 24px
       padding top and bottom means centring reproduces Figma's own layout at
       exactly 232px. */
    .footer-cta {
        min-height: 232px;
        padding: 24px;
        margin-bottom: 48px;
        border-radius: 16px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        /* The blue diamonds sit outside the card's left edge (Figma places
           them on the footer, not the card), so this cannot clip. Nothing
           else here needs clipping - the glow and outline are backgrounds,
           and border-radius already trims them. */
        overflow: visible;
        /* Figma's radial: an ellipse anchored to the top centre, half the
           card wide and its full height, at 40% layer opacity (folded into
           the stop alphas below). */
        background:
            radial-gradient(ellipse 50% 100% at 50% 0%,
                rgba(205,136,27,.2) 0%,
                rgba(116,81,20,.1) 50%,
                rgba(27,25,12,0) 100%),
            var(--hr-brown-500);
    }
    /* Reuse of the desktop artwork layer, repointed at the mobile outline -
       a part-drawn rounded rect that stops short on the left and bottom-left
       so the diamonds below cap its two open ends. Figma stretches this same
       vector to the card, so preserveAspectRatio is none in the file and the
       corner radii track the card's width. */
    .footer-cta-art {
        background-image: url("../images/home-revamp/footer-cta-outline-mobile.svg");
        background-size: 100% 100%;
        opacity: 1;
        /* This SVG is cropped to the card, so it does not want the desktop
           PNG's overhang; the mobile diamonds are drawn by ::before/::after. */
        inset: 0;
    }
    /* Two diamonds capping the left edge's open end, and one capping the
       bottom edge's. Positioned as a share of the card so they stay with the
       stroke ends as it stretches. */
    .footer-cta::before,
    .footer-cta::after {
        content: "";
        position: absolute;
        z-index: 3;
        width: 12.98px;
        height: 12.98px;
        background: var(--hr-blue-400, #33739f);
        transform: rotate(45deg);
        pointer-events: none;
    }
    /* The pair: one element plus a box-shadow clone. The offset is given in
       the element's own rotated space - (10.77, 10.77) there lands exactly
       15.23px straight down on the page, which is the gap Figma uses. */
    .footer-cta::before {
        left: -6.5px;
        top: 49.1%;
        box-shadow: 10.77px 10.77px 0 0 var(--hr-blue-400, #33739f);
    }
    /* Seats on the open end of the bottom stroke so the two actually touch.
       footer-cta-outline-mobile.svg ends that stroke at (66.6337, 232.5) in its
       356x233 viewBox, and the file is stretched over the card at 100% 100%, so
       those map straight to 18.72% / 99.79% of the card. The diamond meets it
       tip-first, so its centre sits back by half its rotated width
       (12.981 * sqrt(2) / 2 = 9.18px => 16.13%), and `left`/`top` address the
       element's corner, hence the further 6.49px (half the unrotated box).
       Confirmed against Figma, which places this diamond's centre at 16.13% /
       99.75% of the card. The old 13.5% / 95.8% sat it ~17px short of the
       stroke and ~10px above it, which is the gap. */
    .footer-cta::after {
        left: calc(16.13% - 6.49px);
        top: calc(99.75% - 6.49px);
    }
    .footer-cta-envelope { display: none; }
    .footer-cta-content { max-width: 100%; text-align: center; }
    .footer-cta-content h3 { font-size: 24px; line-height: 32px; color: #f8f6e6; margin-bottom: 16px; }
    .footer-cta-content h3 .hr-accent { color: #e19d33; }
    .footer-cta-content p { font-size: 14px; line-height: 20px; color: #b8b8b4; margin-bottom: 16px; }
    /* Figma's mobile Join Now is a size down from the desktop pill. It sits on
       the dark band, where the component's declared translucent white really
       does read as glass - so no --smt-glass-style substitution here. */
    /* min-height reset: the desktop rule pins footer buttons to 56px. */
    .footer-cta-content .hr-btn { min-height: 0; padding: 12px 20px; font-size: 14px; line-height: 24px; }

    /* ---------- Link columns: not in the mobile design ---------- */
    /* The same destinations are all reachable from the header's mobile menu,
       which is why the artboard drops them here rather than stacking five
       columns into a long list. */
    .footer-links-col,
    .footer-divider { display: none; }
    .footer-main-row { margin-bottom: 32px; }

    /* ---------- Newsletter ---------- */
    .footer-newsletter-card {
        border: 1.5px solid var(--hr-green-500);
        border-radius: 20px;
        padding: 24px;
        gap: 20px;
    }
    .footer-newsletter-card h4 { font-size: 16px; line-height: 24px; color: var(--hr-cream-500); }
    .footer-newsletter-card .newsletter-row { flex-direction: column; align-items: stretch; gap: 12px; }
    .footer-newsletter-card .newsletter-wrap { flex: 0 0 auto; }
    .footer-newsletter-card .newsletter-input {
        /* height reset: desktop pins the field to 56px. */
        height: auto;
        padding: 14px 16px;
        font-size: 14px;
        line-height: 20px;
        border-radius: 10px;
    }
    .footer-newsletter-card .newsletter-input::placeholder { color: #bbbab7; opacity: .51; }
    .footer-newsletter-card .newsletter-row .hr-btn {
        width: 100%;
        min-height: 0;
        padding: 14px 24px;
        font-size: 14px;
        line-height: 24px;
    }

    /* ---------- Social + legal ---------- */
    .footer-bottom { flex-direction: column; gap: 32px !important; margin: 0; }
    .footer-bottom > [class*="col-"] { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; }
    /* Figma stacks the label above the icons and centres both, rather than
       running them inline as the desktop row does. */
    .footer-social-col {
        flex-direction: column;
        gap: 12px;
        justify-content: center;
    }
    .footer-social-col > p { font-size: 14px; line-height: 20px; font-weight: 700; color: #f8f6e6; }
    .footer-social-list { gap: 6.56px; justify-content: center; }
    /* Each icon keeps Figma's 30.08x22.06 hit area around a 16px glyph. */
    .footer-social-list .nav-social-item > a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30.08px;
        height: 22.06px;
    }
    .footer-social-list .nav-social-item i { width: 16px; height: 16px; }
    .footer-legal-col .link-wrap { gap: 24px !important; justify-content: center; }
    .footer-legal-col .link-wrap a { font-size: 14px; line-height: 20px; color: var(--hr-cream-500); }
}

/* ==========================================================================
   RTL (Arabic)
   ========================================================================== */
/* Footer CTA: the artwork is deliberately NOT mirrored in RTL. Figma's Arabic
   footer (node 40003028:110415) keeps the envelope, green wedge and blue
   triangle on the right and the blue diamonds on the left — identical to LTR,
   because footer-cta-art.png is already drawn in that orientation. Mirroring
   it turned the envelope inside out and threw the diamonds across the copy.
   Only the copy swaps sides: justify-content:flex-end resolves to the LEFT
   under RTL, which parks it clear of the art on the right. */
[dir="rtl"] .footer-cta { justify-content: flex-end; text-align: right; }
[dir="rtl"] .footer-links-grid { text-align: right; }
[dir="rtl"] .footer-newsletter-card .newsletter-input { text-align: right; }

/* The desktop RTL rule above is unscoped and outranks the mobile block's
   plain .footer-cta selector, so on a phone it was still pushing the column's
   content to the bottom of the card - invisible only because the copy happens
   to fill the card at 375px, and wrong the moment it doesn't. The mobile
   artboard centres the card either way: it has no side-by-side artwork to sit
   opposite, so there is nothing for RTL to mirror. */
@media (max-width: 767.98px) {
    [dir="rtl"] .footer-cta { justify-content: center; text-align: center; }
}

@media (min-width: 992px) {
    .header-revamp .container-xl {
        --bs-gutter-x: 0;
        max-width: none;
        padding-inline: 160px;
    }
}

.header-revamp .navbar-brand {
    margin-right: 0;
    margin-inline-end: 16px;
}


/* ==========================================================================
   Shared glass ring (BIL-710)
   --------------------------------------------------------------------------
   Every glass Button in the Figma file carries the same 1.5px stroke: a
   3-stop linear gradient running bottom -> top (0deg) - faint at the bottom
   edge, colour at 74.04%, white at the very top. Figma's Dev Mode CSS
   flattens that gradient to its first stop, which is why every page copied
   it in as a flat `border: 1.5px solid <one colour>`; the real stroke is
   under "Border colors -> Linear Gradient" in the same panel.

   It must NOT be painted as a background layer clipped to border-box: a
   background layer covers everything its clip allows, so it also paints
   behind the translucent fill and tints the button's face - that is what
   turned the home page's pills grey (BIL-710). Masked ::after ring instead,
   so it only ever covers the 1.5px edge.

   Only glass buttons get this - solid-coloured buttons (primary/orange,
   solid-white) keep their own borders. `:not(.is-active)` drops the ring on
   pagination/like buttons once they flip to the solid yellow active state,
   since those are no longer glass.

   The middle stop is softened from Figma's .39 to .3: the nodes also carry
   a GLASS effect (refraction .8, depth 20) that Dev Mode doesn't export and
   CSS can't reproduce - it refracts the edge, so Figma's ring reads softer
   than a literal .39 stroke does here.

   This lives in layout-revamp.css (the only stylesheet loaded on every
   page) rather than being copied into all 15 page stylesheets. The selector
   list is explicit rather than a broad match, so it can't leak onto page
   content the way a bare element selector would.
   ========================================================================== */
.home-revamp .hr-btn-ghost-light,
.home-revamp .hr-btn-ghost-dark,
.home-revamp .hr-icon-btn,
.summit-revamp .hr-btn-ghost-light,
.smt-speakers-head-actions .hr-btn-ghost-dark,
.smt-speaker-card-arrow,
/* The Event details page's own copy of the speaker card (see
   events/partials/speakers.blade.php). Its arrow is the same glass circle as the
   Annual Gathering page's, so it needs the same three list memberships: this rim
   base, the ::after masked ring below, and the white-20% ring start. */
.evtd-speaker-card-arrow,
.tlkd-btn-ghost, .tlkd-nav-btn,
.tlk-carousel-arrow, .tlk-page-arrow, .tlk-page-ellipsis,
.tlk-card-like:not(.is-active), .tlk-page-number:not(.is-active),
.blg-read-btn,
.cta-map-card-arrow,
.evtd-btn-ghost, .evtd-map-btn, .evtd-stat-icon,
.evt-btn-ghost, .evt-card-arrow, .evt-page-arrow, .evtd-video-play,
.evt-page-number:not(.is-active),
.pod-page-arrow, .pod-page-number:not(.is-active),
.pr-btn-read, .pr-page-arrow, .pr-page-ellipsis,
.pr-page-number:not(.is-active),
.spk-card-arrow, .spk-card-play,
.sml-page-arrow, .sml-tile-arrow,
.sml-page-number:not(.is-active),
.trn-lang-add, .trn-btn-ghost,
.vidd-btn-ghost, .vidd-nav-btn,
.vid-carousel-arrow, .vid-page-arrow, .vid-page-ellipsis,
.vid-card-like:not(.is-active), .vid-page-number:not(.is-active),
.vidd-card-heart:not(.is-active),
.tlkd-card-heart:not(.is-active),
.smt-performance-nav, .smt-community-nav,
.sml-btn-ghost-light, .sml-btn-highlights,
.smt-agenda-head .hr-btn-ghost-dark,
/* BIL-710/539: the legal pages' "Back to top" is the same ghost-dark pill as
   the home page's "Discover More"/"View All" - its fill, border, padding and
   shadow already matched, but without these two shared pseudo-elements it read
   as a flat translucent tint rather than glass. */
.tnc-back-to-top,
.pp-back-to-top,
.agd-day-tab.is-active {
    position: relative;
}
.home-revamp .hr-btn-ghost-light::after,
.home-revamp .hr-btn-ghost-dark::after,
.home-revamp .hr-icon-btn::after,
.summit-revamp .hr-btn-ghost-light::after,
.smt-speakers-head-actions .hr-btn-ghost-dark::after,
.smt-speaker-card-arrow::after,
.evtd-speaker-card-arrow::after,
.evtd-moments-arrow::after,
.tlkd-btn-ghost::after, .tlkd-nav-btn::after,
.tlk-carousel-arrow::after, .tlk-page-arrow::after, .tlk-page-ellipsis::after,
.tlk-card-like:not(.is-active)::after, .tlk-page-number:not(.is-active)::after,
.blg-read-btn::after,
.cta-map-card-arrow::after,
.evtd-btn-ghost::after, .evtd-map-btn::after, .evtd-stat-icon::after,
.evt-btn-ghost::after, .evt-card-arrow::after, .evt-page-arrow::after,
.evtd-video-play::after,
.evt-page-number:not(.is-active)::after,
.pod-page-arrow::after, .pod-page-number:not(.is-active)::after,
.pr-btn-read::after, .pr-page-arrow::after, .pr-page-ellipsis::after,
.pr-page-number:not(.is-active)::after,
.spk-card-arrow::after, .spk-card-play::after,
.sml-page-arrow::after, .sml-tile-arrow::after,
.sml-page-number:not(.is-active)::after,
.trn-lang-add::after, .trn-btn-ghost::after,
.vidd-btn-ghost::after, .vidd-nav-btn::after,
.vid-carousel-arrow::after, .vid-page-arrow::after, .vid-page-ellipsis::after,
.vid-card-like:not(.is-active)::after, .vid-page-number:not(.is-active)::after,
.vidd-card-heart:not(.is-active)::after,
.tlkd-card-heart:not(.is-active)::after,
/* The two play circles carry their own --hr-ring-start/-mid (white 30%,
   #65686F 39%) on their rules in video-revamp.css, so they are deliberately
   NOT in the .2 list below. Neither is in the position:relative list either —
   both are absolutely positioned already, and relative would undo their
   centring. */
.vid-feature-play::after, .vid-card-play::after, .vidd-player-play::after,
/* .vidd-card-play is the SAME circle on the related-video card, which the
   video detail page, the talks detail page and the events listing's "Past
   Annual Gatherings" row all render. It already declares its own
   --hr-ring-start/-mid, but was in none of these lists, so those variables
   set nothing and it was the only play circle on the site with neither rim
   nor bloom. */
.vidd-card-play::after,
/* Talks: the two play circles and the detail page's player button. They carry
   their own --hr-ring-start/-mid on their rules, so they are deliberately NOT in
   the .2 list below, and not in the position:relative list either — all three are
   absolutely positioned already and relative would undo their centring. */
.tlk-feature-play::after, .tlk-card-play::after, .tlkd-player-play::after,
.smt-performance-nav::after, .smt-community-nav::after,
.sml-btn-ghost-light::after, .sml-btn-highlights::after,
.smt-agenda-head .hr-btn-ghost-dark::after,
.agd-day-tab.is-active::after,
.tnc-back-to-top::after,
.pp-back-to-top::after,
/* The Join popup's close circle. It was already in the bottom-bloom list below
   but in neither rim list, so it carried a flat `border: .924px solid #fff`
   instead - a hard white ring at full strength all the way round, where every
   other glass control on the site fades from white 20% at the bottom to 75% at
   the top. Absolutely positioned already, so it stays out of the
   position:relative list, like the play circles. */
.hr-join-close::after,
.smt-attend-btn::before {
    content: "";
    position: absolute;
    /* -1.5px so the ring lands on the border box: an absolutely-positioned
       child is placed against the padding box, and Figma's stroke is
       strokeAlign INSIDE - exactly where the 1.5px transparent border sits.
       .smt-attend-btn has no border and clips its own overflow, so it
       overrides this to 0. */
    inset: var(--hr-ring-inset, -1.5px);
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(0deg,
        var(--hr-ring-start, rgba(255,255,255,.1)) 0%,
        var(--hr-ring-mid, rgba(101,104,111,.3)) 74.04%,
        rgba(255,255,255,.75) 100%);
    /* Subtract the content box from the border box, leaving only the edge. */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

/* ---------- BIL-900: the hover "jump" ------------------------------------
   One lift, everywhere. translateY(-2px) over .2s was already the site's
   answer - .header-revamp/.footer-revamp .hr-btn, .vid-tab, .evt-tab, .pr-tab,
   .blg-read-btn and ~25 others carry it - but it had been added per page, so
   whether a button moved depended on which stylesheet it happened to live in.
   These two lists generalise it to the button registry below (the same
   selectors the masked rim enumerates, which is this design system's de-facto
   list of every pill on the site).

   Not included, deliberately:
     - the "..." in pagination (.*-page-ellipsis): not interactive;
     - .evtd-stat-icon: a decorative circle, not a control;
     - the ACTIVE pill in any tab row - the convention throughout is
       :not(.is-active), since the current tab is not a target;
     - .tnc-back-to-top / .pp-back-to-top and the other ~25 that already lift.

   The transition sits on a bare class, so it loses to any page rule that sets
   its own - which is what keeps a page that transitions colour AND transform
   from having this one flatten it back to transform alone. */
.home-revamp .hr-btn-ghost-light,
.home-revamp .hr-btn-ghost-dark,
.home-revamp .hr-icon-btn,
.summit-revamp .hr-btn-ghost-light,
.smt-speakers-head-actions .hr-btn-ghost-dark,
.smt-speaker-card-arrow,
.evtd-speaker-card-arrow,
.evtd-moments-arrow,
.tlkd-btn-ghost,
.tlkd-nav-btn,
.tlk-carousel-arrow,
.tlk-page-arrow,
.tlk-card-like:not(.is-active),
.tlk-page-number:not(.is-active),
.blg-read-btn,
.cta-map-card-arrow,
.evtd-btn-ghost,
.evtd-map-btn,
.evt-btn-ghost,
.evt-card-arrow,
.evt-page-arrow,
.evt-page-number:not(.is-active),
.pod-page-arrow,
.pod-page-number:not(.is-active),
.pr-btn-read,
.pr-page-arrow,
.pr-page-number:not(.is-active),
.spk-card-arrow,
.sml-page-arrow,
.sml-tile-arrow,
.sml-page-number:not(.is-active),
.trn-lang-add,
.trn-btn-ghost,
.vidd-btn-ghost,
.vidd-nav-btn,
.vid-carousel-arrow,
.vid-page-arrow,
.vid-card-like:not(.is-active),
.vid-page-number:not(.is-active),
.vidd-card-heart:not(.is-active),
.tlkd-card-heart:not(.is-active),
.smt-performance-nav,
.smt-community-nav,
.sml-btn-ghost-light,
.sml-btn-highlights,
.smt-agenda-head .hr-btn-ghost-dark,
.smt-attend-btn,
.agd-day-tab:not(.is-active),
.evtd-video-play,
.spk-card-play,
.vidd-player-play,
.tlkd-player-play,
.hr-btn {
    transition: transform .2s ease;
}
/* The amber PRIMARY buttons. They were missed by the pass above because that
   list came from the masked-rim registry, which is the GHOST pills' - the solid
   amber ones are enumerated separately, in the plus-lighter glow lists further
   down this file. So "Download PDF" on a press release card sat still while the
   "Read" button beside it jumped.
   Same lift, and none of these carries a transform at rest, so it is the plain
   value. Their :disabled rules set transform:none and load after this file, so
   a disabled primary still stays put. */
.pr-btn-pdf,
.evt-btn-primary,
.vidd-btn-primary,
.tlkd-btn-primary,
.sml-btn-primary,
.sml-btn-know,
.agd-pdf-btn,
.mns-btn-primary,
.nom-btn-primary,
.trn-btn-primary,
.podd-btn-primary {
    transition: transform .2s ease;
}
.pr-btn-pdf:hover,
.evt-btn-primary:hover,
.vidd-btn-primary:hover,
.tlkd-btn-primary:hover,
.sml-btn-primary:hover,
.sml-btn-know:hover,
.agd-pdf-btn:hover,
.mns-btn-primary:hover,
.nom-btn-primary:hover,
.trn-btn-primary:hover,
.podd-btn-primary:hover {
    transform: translateY(-2px);
}

.home-revamp .hr-btn-ghost-light:hover,
.home-revamp .hr-btn-ghost-dark:hover,
.home-revamp .hr-icon-btn:hover,
.summit-revamp .hr-btn-ghost-light:hover,
.smt-speakers-head-actions .hr-btn-ghost-dark:hover,
.smt-speaker-card-arrow:hover,
.evtd-speaker-card-arrow:hover,
.evtd-moments-arrow:hover,
.tlkd-btn-ghost:hover,
.tlkd-nav-btn:hover,
.tlk-carousel-arrow:hover,
.tlk-page-arrow:hover,
.tlk-card-like:not(.is-active):hover,
.tlk-page-number:not(.is-active):hover,
.blg-read-btn:hover,
.cta-map-card-arrow:hover,
.evtd-btn-ghost:hover,
.evtd-map-btn:hover,
.evt-btn-ghost:hover,
.evt-card-arrow:hover,
.evt-page-arrow:hover,
.evt-page-number:not(.is-active):hover,
.pod-page-arrow:hover,
.pod-page-number:not(.is-active):hover,
.pr-btn-read:hover,
.pr-page-arrow:hover,
.pr-page-number:not(.is-active):hover,
.spk-card-arrow:hover,
.sml-page-arrow:hover,
.sml-tile-arrow:hover,
.sml-page-number:not(.is-active):hover,
.trn-lang-add:hover,
.trn-btn-ghost:hover,
.vidd-btn-ghost:hover,
.vidd-nav-btn:hover,
.vid-carousel-arrow:hover,
.vid-page-arrow:hover,
.vid-card-like:not(.is-active):hover,
.vid-page-number:not(.is-active):hover,
.vidd-card-heart:not(.is-active):hover,
.tlkd-card-heart:not(.is-active):hover,
.smt-performance-nav:hover,
.smt-community-nav:hover,
.sml-btn-ghost-light:hover,
.sml-btn-highlights:hover,
.smt-agenda-head .hr-btn-ghost-dark:hover,
.smt-attend-btn:hover,
.agd-day-tab:not(.is-active):hover,
.evtd-video-play:hover,
.spk-card-play:hover,
.vidd-player-play:hover,
.tlkd-player-play:hover,
.hr-btn:hover {
    transform: translateY(-2px);
}

/* The play circles are centred WITH a transform - translate(-50%, -50%) - so a
   bare translateY here would drop the centring and fling them to the frame's
   corner. The lift has to be composed into the value they already carry.
   .podd-episode-play is deliberately absent: it already answers the cursor with
   its own translate(-50%, -50%) scale(1.05), and its page loads after this file
   so that rule wins regardless. */
.vid-feature-play,
.vid-card-play,
.tlk-feature-play,
.tlk-card-play,
.vidd-card-play,
.tlkd-card-play,
.pod-card-play,
.mns-play-badge {
    transition: transform .2s ease;
}
.vid-feature-play:hover,
.vid-card-play:hover,
.tlk-feature-play:hover,
.tlk-card-play:hover,
.vidd-card-play:hover,
.tlkd-card-play:hover,
.pod-card-play:hover,
.mns-play-badge:hover {
    transform: translate(-50%, calc(-50% - 2px));
}

/* Icon/arrow circles start their stroke at white 20%, not 10% (Figma nodes
   40001286:67887, :67863).

   BIL-710: .hr-btn-ghost-dark ("Discover More", "View All") is in this list
   too, so the pill and the testimonials arrow next to it on the same page
   now render one identical glass recipe - same .2 fill, same three-stop
   masked rim - instead of the pill alone starting its rim at 10% white and
   reading a shade duller than the circles. */
.home-revamp .hr-icon-btn,
.home-revamp .hr-btn-ghost-dark,
.smt-speaker-card-arrow,
.evtd-speaker-card-arrow,
.evtd-moments-arrow,
.tlkd-nav-btn, .tlk-carousel-arrow, .tlk-page-arrow, .tlk-card-like,
.tlkd-nav-btn, .tlk-carousel-arrow, .tlk-page-arrow, .tlk-page-ellipsis, .tlk-card-like,
.cta-map-card-arrow, .evtd-map-btn, .evt-card-arrow, .evt-page-arrow,
.pod-page-arrow, .pr-page-arrow, .pr-page-ellipsis,
.spk-card-arrow, .spk-card-play, .sml-page-arrow, .sml-tile-arrow,
.trn-lang-add, .vidd-nav-btn, .vid-carousel-arrow, .vid-page-arrow, .vid-page-ellipsis,
.vid-card-like, .vidd-card-heart, .smt-attend-btn,
.tlkd-card-heart,
.evt-btn-ghost,
.tlk-page-number, .evt-page-number, .pod-page-number,
.pr-page-number, .sml-page-number, .vid-page-number,
.smt-performance-nav, .smt-community-nav,
.sml-btn-ghost-light, .sml-btn-highlights,
.smt-agenda-head .hr-btn-ghost-dark,
.tnc-back-to-top,
.pp-back-to-top,
.agd-day-tab.is-active,
.hr-join-close {
    --hr-ring-start: rgba(255,255,255,.2);
}

/* ==========================================================================
   Shared hover glow — the "ellipse from the bottom" (BIL-539)

   Every button in Figma's Button set (node 1558:35895) carries a child
   "Ellipse 262": a 100px circle, white at 40-50%, layer-blurred at
   stdDeviation 18.55, composited plus-lighter and clipped to the pill.

   It is a HOVER-only effect, which is why it kept reading as missing. In the
   Default variants the ellipse is either set to opacity 0 (primary
   1558:35894, icon 1563:59191) or parked entirely below the clip box
   (Secondary 1563:8855, bottom:-102.55px against a 53px-tall box) - so the
   resting state genuinely has no glow. Only the Variant2/Variant3 rows, the
   hover states, raise it to bottom:-78.55px (text pills) / -82.55px (icon
   circles) and turn it on.

   CSS cannot blur a pseudo-element's circle and still clip it to the pill:
   filter: blur() would smear the clip edge with it, and overflow:hidden on
   the button would eat the shared ::after ring above, which sits at
   inset:-1.5px out on the border box. So the blurred disc is baked into a
   radial-gradient instead - the stops are the Gaussian profile of a 50px
   disc convolved with sigma 18.55, 1 - PHI((d - 50) / 18.55), sampled at
   0/13/25/40/50/60/70/87/100px out from the centre.

   Two liberties, both below the blur's resolution: Figma nudges the circle
   8px (primary) / 3.5px (Secondary) off-centre, and anchors it to the 56px
   frame rather than the padding box this ::before spans (a 1.5px shift).

   Lives here rather than in home-revamp.css because the footer's "Join Now"
   is the same component and the footer ships on every page - same reason the
   glass ring above is shared. Keep the selector list explicit so it can't
   leak onto page content.
   ========================================================================== */
.home-revamp .hr-btn,
.home-revamp .hr-icon-btn,
.footer-revamp .hr-btn,
/* Video detail page's two action pills. isolation keeps plus-lighter blending
   against the button's own fill; .vidd-btn-ghost already gets position:relative
   from the glass-rim list above, .vidd-btn-primary does not. */
.vidd-btn-primary, .vidd-btn-ghost,
.tlkd-btn-primary, .tlkd-btn-ghost,
.summit-revamp .smt-hero-copy .hr-btn-primary,
.event-detail-revamp .evtd-actions .hr-btn-primary,
.smt-performance-nav, .smt-community-nav,
.smt-performance-nav, .smt-community-nav, .vidd-nav-btn,
.sml-btn-primary, .sml-btn-know, .sml-btn-ghost-light, .sml-btn-highlights,
.smt-agenda-head .hr-btn-ghost-dark,
.smt-speakers-head-actions .hr-btn-ghost-dark,
.summit-revamp .hr-btn-ghost-light,
.agenda-revamp .hr-btn-primary, .agd-pdf-btn, .agd-day-tab.is-active,
/* The Terms and Privacy pages' own Download PDF buttons. Identical recipe to
   .agd-pdf-btn beside them here - same yellow-500 fill, same 2px outset rim,
   same inset highlight and ambient stack - but they were never added to these
   three shared lists, so they were the only orange buttons on the site with no
   hover glow. */
.pp-pdf-btn, .tnc-pdf-btn,
.speakers-revamp .hr-btn-primary,
/* BIL-581: the press-release pagination controls are the same 56px glass
   circle as the home page's .hr-icon-btn (they already share the masked rim
   above), so they take its hover glow too - without it they were the only
   glass circles on the site that stayed inert under the cursor. */
.pr-page-arrow, .pr-page-number, .pr-page-ellipsis,
/* BIL-539: the press-release card buttons (and .prd-view-all, which is a
   .pr-btn-read) carry the glass fill and rim but stayed inert under the cursor. */
.pr-btn-read,
.pr-btn-pdf,
/* BIL-823: the events page's featured CTAs are the same two pills as the home
   page's .hr-btn-primary / .hr-btn-ghost-dark, so they take the same bottom
   ellipse. Without it they were the only copies of that component on the site
   that stayed inert under the cursor. */
.evt-btn-primary, .evt-btn-ghost,
/* BIL-823: the video card's play button is the same glass circle as the rest of
   the Button set (Figma node I40001286:71204;40001144:63016), so it takes the
   same Ellipse 262 bloom. Driven by the CARD's hover, not its own - the whole
   card is the link. */
.vid-card-play,
.evtd-video-play,
/* BIL-823: the event listing card's arrow is the same 56px glass circle as the
   home page's memories-filmstrip .hr-icon-btn (it already shares the masked rim
   above), so it takes that identical hover bloom. It hangs off the card's hover,
   not its own, because the whole card is the link. */
.evt-card-arrow,
.tnc-back-to-top,
.pp-back-to-top,
.contact-revamp .cta-submit {
    position: relative;
    /* Keeps plus-lighter blending against the button's own fill rather than
       whatever section colour happens to sit behind it. */
    isolation: isolate;
}
.home-revamp .hr-btn::before,
.home-revamp .hr-icon-btn::before,
.footer-revamp .hr-btn::before,
.summit-revamp .smt-hero-copy .hr-btn-primary::before,
.event-detail-revamp .evtd-actions .hr-btn-primary::before,
.smt-performance-nav::before, .smt-community-nav::before,
.smt-performance-nav::before, .smt-community-nav::before, .vidd-nav-btn::before,
.sml-btn-primary::before, .sml-btn-know::before,
.sml-btn-ghost-light::before, .sml-btn-highlights::before,
.smt-agenda-head .hr-btn-ghost-dark::before,
.smt-speakers-head-actions .hr-btn-ghost-dark::before,
.summit-revamp .hr-btn-ghost-light::before,
.agenda-revamp .hr-btn-primary::before, .agd-pdf-btn::before,
.pp-pdf-btn::before, .tnc-pdf-btn::before,
.agd-day-tab.is-active::before,
.speakers-revamp .hr-btn-primary::before,
.pr-page-arrow::before, .pr-page-number::before, .pr-page-ellipsis::before,
.vid-page-arrow::before, .vid-page-number::before, .vid-page-ellipsis::before,
.tlk-page-arrow::before, .tlk-page-number::before, .tlk-page-ellipsis::before,
.pr-btn-read::before,
.pr-btn-pdf::before,
.evt-card-arrow::before,
.evt-btn-primary::before, .evt-btn-ghost::before,
.vid-card-play::before,
.evtd-video-play::before,
.tnc-back-to-top::before,
.pp-back-to-top::before,
/* The Join popup's close circle carries Figma's "Ellipse 263" (node
   40002531:25472), the same bottom bloom as the rest of the Button set. It
   sets its own position/isolation on .hr-join-close in home-revamp.css rather
   than joining the position:relative list above - it is absolutely positioned
   into the card's corner, and relative would drop it back into flow. */
.hr-join-close::before,
/* Video listing: the two play circles and the watchlist heart. These sit in the
   ring list above but were never opted in here, which is why they were the only
   buttons on that page not answering the cursor. They set their own
   position/isolation in video-revamp.css rather than joining the list below,
   which would relative-position the absolutely-centred play buttons. */
.vid-feature-play::before, .vid-card-play::before, .vid-card-like::before,
.vidd-player-play::before, .vidd-card-heart::before, .vidd-card-play::before,
.tlkd-card-heart::before,
.tlk-feature-play::before, .tlk-card-play::before, .tlk-card-like::before,
.tlkd-player-play::before,
.vidd-btn-primary::before, .vidd-btn-ghost::before,
.contact-revamp .cta-submit::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Above the button's own fill, below its label and its ::after ring. */
    z-index: -1;
    border-radius: inherit;
    /* Circle at white 40% under a group opacity of .7 (1558:35896). */
    --hr-glow-peak: .28;
    --hr-glow-drop: 28.55px;
    background: radial-gradient(circle 100px at 50% calc(100% + var(--hr-glow-drop)),
        rgb(255 255 255 / calc(var(--hr-glow-peak) * 1))      0%,
        rgb(255 255 255 / calc(var(--hr-glow-peak) * .977))  13%,
        rgb(255 255 255 / calc(var(--hr-glow-peak) * .911))  25%,
        rgb(255 255 255 / calc(var(--hr-glow-peak) * .705))  40%,
        rgb(255 255 255 / calc(var(--hr-glow-peak) * .5))    50%,
        rgb(255 255 255 / calc(var(--hr-glow-peak) * .295))  60%,
        rgb(255 255 255 / calc(var(--hr-glow-peak) * .14))   70%,
        rgb(255 255 255 / calc(var(--hr-glow-peak) * .023))  87%,
        rgb(255 255 255 / 0) 100%);
    mix-blend-mode: plus-lighter;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}
/* Icon circles: white 50% with no group opacity, sitting 4px deeper
   (1563:59195). */
.home-revamp .hr-icon-btn::before,
.smt-performance-nav::before, .smt-community-nav::before, .vidd-nav-btn::before,
.pr-page-arrow::before, .pr-page-ellipsis::before,
.pr-page-number:not(.is-active)::before,
.vid-feature-play::before, .vid-card-play::before, .vid-card-like::before,
.vidd-card-heart::before, .vidd-card-play::before,
.tlkd-card-heart::before,
.vid-page-arrow::before, .vid-page-ellipsis::before,
.vid-page-number:not(.is-active)::before,
.tlk-feature-play::before, .tlk-card-play::before, .tlk-card-like::before,
.tlkd-player-play::before,
.tlk-page-arrow::before, .tlk-page-ellipsis::before,
.tlk-page-number:not(.is-active)::before,
.evt-card-arrow::before,
.evtd-video-play::before,
.hr-join-close::before {
    --hr-glow-peak: .5;
    --hr-glow-drop: 32.55px;
}
.home-revamp .hr-btn:hover::before,
.home-revamp .hr-icon-btn:hover::before,
.footer-revamp .hr-btn:hover::before,
.summit-revamp .smt-hero-copy .hr-btn-primary:hover::before,
.event-detail-revamp .evtd-actions .hr-btn-primary:hover::before,
.smt-performance-nav:hover::before, .smt-community-nav:hover::before,
.smt-performance-nav:hover::before, .smt-community-nav:hover::before, .vidd-nav-btn:hover::before,
.sml-btn-primary:hover::before, .sml-btn-know:hover::before,
.sml-btn-ghost-light:hover::before, .sml-btn-highlights:hover::before,
.smt-agenda-head .hr-btn-ghost-dark:hover::before,
.smt-speakers-head-actions .hr-btn-ghost-dark:hover::before,
.summit-revamp .hr-btn-ghost-light:hover::before,
.agenda-revamp .hr-btn-primary:hover::before, .agd-pdf-btn:hover::before,
.pp-pdf-btn:hover::before, .tnc-pdf-btn:hover::before,
.agd-day-tab.is-active:hover::before,
.speakers-revamp .hr-btn-primary:hover::before,
.pr-page-arrow:not(.is-disabled):hover::before,
.pr-page-number:hover::before,
.vid-page-arrow:not(.is-disabled):hover::before,
.tlk-page-arrow:not(.is-disabled):hover::before,
.tlk-page-number:hover::before,
.vid-page-number:hover::before,
.pr-btn-read:hover::before,
.pr-btn-pdf:hover::before,
.evt-card:hover .evt-card-arrow::before,
.evt-btn-primary:hover::before, .evt-btn-ghost:hover::before,
.vid-card:hover .vid-card-play::before,
.evtd-video-play:hover::before,
.tnc-back-to-top:hover::before,
.pp-back-to-top:hover::before,
.hr-join-close:hover::before,
.vid-feature-play:hover::before, .vid-card-play:hover::before,
.vid-card-like:hover::before, .vidd-card-heart:hover::before,
.tlkd-card-heart:hover::before,
/* The play circles sit inside the card's own <a>, so hovering anywhere on a card
   should light its play button — the cursor is over the link either way. */
.tlk-feature-play:hover::before, .tlk-card-play:hover::before,
.tlk-card-like:hover::before, .tlkd-player-play:hover::before,
.tlkd-btn-primary:hover::before, .tlkd-btn-ghost:hover::before,
.tlk-feature-card:hover .tlk-feature-play::before,
.tlk-card:hover .tlk-card-play::before,
.vid-feature-card:hover .vid-feature-play::before,
.vid-card:hover .vid-card-play::before,
/* Off the CARD's hover, not the button's: .vidd-card-play is pointer-events:none
   (the whole media area is the link), so it can never match :hover itself. */
.vidd-card:hover .vidd-card-play::before,
.vidd-btn-primary:hover::before, .vidd-btn-ghost:hover::before,
.vidd-player-play:hover::before,
.contact-revamp .cta-submit:hover::before { opacity: 1; }

/* ---------- Filter selects: focus ----------
   Every listing page's filter <select>: Events, Annual Gatherings, Videos,
   Blogs, Podcasts, Talks, Speakers, Press Releases.

   No ring and no accent colour on focus - only the border a shade darker. The
   browser's own outline is suppressed too, since that blue ring is the same
   highlight. This has to be handled centrally because of two <select> quirks:
   Chrome keeps focus on one after its popup closes, so anything drawn here
   stays on screen looking like a selected state rather than a focus hint, and
   it matches :focus-visible even for a plain mouse click - so moving a ring to
   :focus-visible does not confine it to keyboard use.

   Full-opacity version of the resting rgba(177,175,165,.5) border, so the
   change reads as a darkening rather than a colour shift. .blg-select has no
   border of its own, so there only the ring removal applies.

   No box-shadow reset here on purpose: there is no focus ring left to cancel
   (the two that existed have been deleted), and .vid-select/.tlk-select carry a
   resting 0 3px 6px shadow as part of their pill - resetting it would drop that
   shadow for as long as the control held focus. */
.evt-select:focus,
.sml-select:focus,
.vid-select:focus,
.blg-select:focus,
.pod-select:focus,
.tlk-select:focus,
.spk-select:focus,
.pr-select:focus {
    outline: none;
    border-color: rgba(177, 175, 165, 1);
}

/* ==========================================================================
   TEMPORARY - watchlist ("favourite") buttons hidden site-wide
   --------------------------------------------------------------------------
   The public login flow is commented out at the moment, so nothing can be
   added to a watchlist and the heart on every card was a control that could
   only ever fail. Hidden here rather than deleted from the six partials that
   render it, so restoring it is one change in one place when login comes back:

     video/partials/video_card.blade.php            .vid-card-like
     video/partials/related_video_card.blade.php    .vidd-card-heart
     bilaraby_talks/partials/talk_card.blade.php    .tlk-card-like
     bilaraby_talks/partials/related_talk_card.blade.php   .tlkd-card-heart
     bilaraby_talks/partials/related-video-talks.blade.php .watchlist-love (x2)

   display:none, not visibility/opacity - it has to leave the tab order and the
   accessibility tree too, or a control that does nothing is still reachable by
   keyboard and still announced to a screen reader.

   Two selectors, deliberately. `.watchlist-toggle` (0,1,0) carries !important
   so it beats the per-page rules in video/talks CSS, which load AFTER this
   file. The second is (0,2,0) because those two instances also carry Bootstrap's
   `.d-flex` / `.d-lg-flex`, which are themselves !important - at equal
   importance the winner is decided on specificity, and a single class would
   have lost to them.

   The header's own Watchlist link needs nothing: it sits inside the
   authenticated dropdown, which cannot render while login is disabled. */
.watchlist-toggle,
.watchlist-love.related-watchlist-toggle {
    display: none !important;
}