/* ==========================================================================
   ZUVA ENERGY 2027 — THE SHELL
   ==========================================================================
   The five-slot frame Miti 2027 uses:

       badge · header (logo · nav · auth)
       ┌───────────┬──────────────────────────┬───────────┐
       │  nav      │  main                    │  aside    │
       │  panel    │                          │  panel    │
       └───────────┴──────────────────────────┴───────────┘
       ticker (fixed, bottom)

   On the homepage the header carries the nav links; on inner pages it
   carries product pills instead, and the panels do the navigating. Below
   64rem both panels become off-canvas drawers.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;

    /* Both bars are fixed, so an in-page anchor would otherwise land its
       target underneath them. */
    scroll-padding-top: calc(var(--bar-h) * 2);
}

body {
    margin: 0;
    background: var(--color-page-bg);
    color: var(--color-surface-800);
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;

    /* Fixed elements leave no space behind them. Two bars up, one down.
       Zuva's shell has carried this since its own port; this file did not,
       and the omission had been invisible rather than absent. Every page was
       rendering its first 64px underneath the header and the menu — measured
       at 852px on / and /schemes, first element at y=16 against bars ending
       at y=80. What was being swallowed was the top of a card, which reads as
       tight spacing rather than as missing content, so it survived every
       visual check made on this site.

       The profile page is where it finally showed: the breadcrumb is 34px
       tall and sits above the cover, so the whole element vanished under the
       bars and looked like it had never been rendered at all. */
    padding-top: calc(var(--bar-h) * 2);
    padding-bottom: var(--shell-ticker-h);
}

h1, h2, h3, h4, h5 {
    margin: 0;
    font-weight: 600;
    line-height: var(--lh-tight);
    color: var(--color-surface-900);
    letter-spacing: -0.01em;
}
p { margin: 0 0 var(--s-4); }
a { color: var(--color-brand-700); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0 0 var(--s-4); padding-left: var(--s-5); }
small { font-size: var(--fs-xs); }
code, .mono { font-family: var(--font-mono); font-size: 0.9em; }

/* Display face — the Lobster headers Miti uses for section titles */
.display {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.1;
}

/* ==========================================================================
   BRAND STATE — the default→scrolled change, held as four variables.

                        at rest        compact (y >= 80)
     badge w/h          4.375rem       1.875rem
     name height        2.689rem       2.1rem
     name padding-left  4.375rem       1.625rem
     menu brand slot    "Stream"       the hashline

   Only the badge box and the two gutters transition. The name HEIGHT snaps,
   deliberately — that is what Miti does.
   ========================================================================== */
body {
    --brand-gutter-live: var(--brand-gutter);
    --brand-name-live:   var(--brand-name-h);
    --brand-badge-live:  var(--brand-badge-h);
    /* Derived, never set directly, so the qualifier tracks the name. */
    --brand-qualifier-live: calc(var(--brand-name-live) * var(--brand-qualifier-ratio));
}
body.body--compact-brand {
    --brand-gutter-live: var(--brand-gutter-compact);
    --brand-name-live:   var(--brand-name-h-compact);
    --brand-badge-live:  var(--brand-badge-h-compact);
}

/* The opening frame only. A page does not always open at the top — reload at
   depth, a #fragment, or back through history. header.js reads that position
   and applies the compact brand at once; without this the correction would
   PLAY and the seal would be seen shrinking for no visible reason. */
body.body--preload { --motion-shell: 0s; }

/* ------------------------------------------------------------- badge -- */
/* 4.375rem square against a 2.5rem bar: it OVERHANGS the header and overlaps
   the menu. That is why its z-index is above both, and why both wordmarks
   carry a left gutter of exactly its width — they step around the same seal. */
.inside-badge {
    position: fixed;
    top: 0.313rem;
    left: 0.313rem;
    width: var(--brand-badge-live);
    height: var(--brand-badge-live);
    margin: 0;
    z-index: 320;
    pointer-events: auto;
    transition: width var(--motion-shell) ease, height var(--motion-shell) ease;
}
.inside-badge-link { display: block; width: 100%; height: 100%; }
.inside-badge img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ------------------------------------------------------------ header -- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--shell-header-h);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: 0 0.875rem;
    background: var(--color-white);
    box-shadow: 0 0.0625rem 0.25rem rgba(19, 26, 30, 0.04);
    transition: transform var(--motion-shell) ease;
}
.header--hidden { transform: translateY(-100%); }
.header--scrolled { box-shadow: 0 0.125rem 0.5rem rgba(19, 26, 30, 0.10); }
.header--no-shadow,
.header--no-shadow.header--scrolled { box-shadow: none; }

/* On the homepage the bar is not a bar: badge, wordmark, nav lozenge and auth
   pill float on the page. It is why the homepage nav gets a white capsule —
   a white pill is only legible because the bar behind it is not white. */
body.homepage .header {
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
}

/* ---------------------------------------------------------- the menu -- */
/* A SEPARATE fixed element, not the header's second row. They are separate so
   they can slide independently on scroll — that is the whole mechanic.
   top == height == --bar-h, so translateY(-100%) lands it at top: 0. */
menu.menu {
    position: fixed;
    top: var(--shell-header-h);
    left: 0;
    width: 100%;
    height: var(--shell-menu-h);
    margin: 0;                 /* <menu> is a list element — drop the UA */
    list-style: none;
    z-index: 290;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: 0 0.875rem;
    background: var(--color-white);
    border-bottom: var(--border);
    box-shadow: 0 0.125rem 0.375rem rgba(19, 26, 30, 0.08);
    transition: transform var(--motion-shell) ease;
}
body.homepage menu.menu {
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
}
/* NOT a hide — this is the pin-to-top. */
menu.menu--hidden { transform: translateY(-100%); }
menu.menu.menu--home-chat .menu-advert { width: auto; flex: 0 0 auto; }

/* ------------------------------------------------------- the columns --
   Both bars share one geometry: 15rem brand column, absolutely-centred nav,
   15rem end column. The nav is out of flow so it centres on the VIEWPORT, not
   between its neighbours — which is why the flanks are locked. */
.header-logo,
.header-auth,
.menu-logo,
.menu-advert {
    width: 15rem;
    flex: 0 0 15rem;
    min-width: 0;
}

.header-list,
.menu-list {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    min-width: max-content;
}
.header-list { gap: var(--s-2); }
.menu-list   { gap: var(--s-4); justify-content: center; }

body.homepage .header-list {
    gap: var(--s-4);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--color-white);
}

.header-auth {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: auto;
    gap: 0.625rem;
}

/* Empty today and still a box: the padding and the ceiling are what survive
   whatever is eventually dropped in. */
.menu-advert {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    padding: 0.75rem 0 0.75rem 0.875rem;
    overflow: hidden;
    max-height: 16rem;
}

/* ==========================================================================
   THE LOCKUP — "Akwa" in the header bar, "Stream" in the menu bar beneath.
   The two bars read as one stacked wordmark, which is the only reason the
   halves can separate on scroll. Neither anchor is centred in its bar: both
   are top-seated so the name can spill past the header's own 2.5rem.
   ========================================================================== */
.header-logo,
.menu-logo {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
}
.header-logo { margin-top: 0.375rem; }
.menu-logo   { margin-top: 1.125rem; }

.header-logo img,
.menu-logo img {
    display: block;
    width: auto;
    max-width: none;
    object-position: left center;
    padding-left: var(--brand-gutter-live);
    /* In lockstep with the badge's own transition: the gutter closes as the
       seal shrinks, so the wordmark appears to slide left into the space it
       vacates. No transform, no margin animation — this padding IS it. */
    transition: padding-left var(--motion-shell) ease;
}
.header-logo img { height: var(--brand-name-live); }
.menu-logo img   { height: 1rem; }

/* The qualifier takes its own height and inset so it centres UNDER the name.
   Must stay after the generic rules above — equal specificity, source order. */
.menu-logo--stream img {
    height: var(--brand-qualifier-live);
    padding-left: calc(
        var(--brand-gutter-live)
        + var(--brand-name-live) * var(--brand-name-ink-centre)
        - var(--brand-qualifier-live) * var(--brand-qualifier-half)
    );
}

/* Seat "Stream" so its top meets the foot of "Akwa". max() keeps it off the
   header's underside where the compact name makes the raw calc go negative. */
body .menu-logo--stream {
    margin-top: max(0rem, calc(
        0.375rem
        + var(--brand-name-live) * var(--brand-name-ink-end)
        - var(--bar-h)
    ));
}

/* The swap. Both anchors are ALWAYS in the DOM; display:none keeps the hidden
   one out of the flex row so the column keeps its width in either state. */
body .menu-logo--hashline { display: none; }
body.body--compact-brand .menu-logo--stream   { display: none; }
body.body--compact-brand .menu-logo--hashline { display: inline-flex; }

/* height + line-height give the type the same 1rem box an image would have,
   so the mark sits on the same baseline. */
.menu-logo--hashline {
    padding-left: var(--brand-gutter-live);
    height: 1rem;
    line-height: 1;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-brand-700);
    white-space: nowrap;
    transition: padding-left var(--motion-shell) ease;
}
.menu-logo--hashline:hover { text-decoration: none; color: var(--color-brand-600); }

body.body--compact-brand .menu-logo { margin-top: 0.8125rem; }

/* ------------------------------------------------------------- links -- */
.top-list-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--fs-bar-link);
    line-height: var(--lh-bar);
    font-weight: 500;
    color: var(--color-surface-700);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.18s;
}
.top-list-link:hover,
.top-list-link.is-active { color: var(--color-brand-700); text-decoration: none; }

/* The icon keeps the brand colour independently of the label, so an inactive
   link still reads as part of the brand. */
.top-list-icon {
    width: 1.15rem;
    height: 1.15rem;
    color: var(--color-brand-500);
    flex: none;
}

/* ------------------------------------------------------------- pills -- */
.top-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 1.75rem;
    padding: 0 0.9rem;
    border-radius: var(--radius-pill);
    border: 0.09375rem solid;       /* 1.5px — heavier than --border on purpose */
    background: var(--color-white);
    text-decoration: none;
    font-size: var(--fs-bar-pill);
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* Outline at rest, SOLID FILL on hover and active. Miti fills the pill rather
   than tinting it, and treats hover and active identically. */
.top-pill--schemes   { border-color: var(--pill-schemes);   color: var(--pill-schemes); }
.top-pill--community { border-color: var(--pill-community); color: var(--pill-community); }
.top-pill--coin      { border-color: var(--pill-coin);      color: var(--pill-coin); }

.top-pill:hover,
.top-pill.is-active { color: var(--color-white); text-decoration: none; }

.top-pill--schemes:hover,
.top-pill--schemes.is-active   { background: var(--pill-schemes);   border-color: var(--pill-schemes); }
.top-pill--community:hover,
.top-pill--community.is-active { background: var(--pill-community); border-color: var(--pill-community); }
.top-pill--coin:hover,
.top-pill--coin.is-active      { background: var(--pill-coin);      border-color: var(--pill-coin); }

/* x-icon renders stroke="currentColor", so the stroke tracks the pill through
   all three states with no second asset and no CSS mask. */
.top-pill-icon {
    width: 0.9rem;
    height: 0.9rem;
    flex: none;
}
.top-pill-name { display: inline; }

/* -------------------------------------------------------------- auth -- */
/* Zimbabwe-only, so this is the switcher's geometry without its dropdown. The
   classes stay so config('brand.countries') can light it up later. Not a
   button: it does nothing yet, and a control that does nothing is worse than
   a label that admits it. */
.country-switcher { position: relative; display: inline-flex; }
.country-switcher__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: var(--border);
    border-radius: var(--radius-pill);
    background: var(--color-white);
    box-shadow: 0 0.0625rem 0.1875rem rgba(19, 26, 30, 0.08);
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}

/* One connected pill with a hairline divider, not two loose chips. */
.header-auth-pill {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    border: var(--border);
    border-radius: var(--radius-pill);
    background: var(--color-surface-50);
    overflow: hidden;
    width: fit-content;
}
.header-auth-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 var(--s-3);
    color: var(--color-surface-700);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 500;
    white-space: nowrap;
}
.header-auth-link:hover {
    color: var(--color-brand-700);
    background: var(--color-white);
    text-decoration: none;
}
.header-auth-divider {
    width: 0.0625rem;
    height: 65%;
    background: var(--color-surface-200);
    flex: none;
}


/* --------------------------------------------------------- the frame -- */
.shell {
    display: grid;
    grid-template-columns: var(--shell-nav-w) minmax(0, 1fr) var(--shell-aside-w);
    gap: var(--shell-gap);
    max-width: var(--shell-max);
    margin: 0 auto;

    /* No inset at the top or the sides. Miti's .page carries `padding: 0` and
       lets the nav panel sit flush against the viewport edge — measured at
       1440px, its nav runs 0–240 and its aside 1185–1425. The 1rem on all
       four sides here pushed the nav in to 16, cost the middle column another
       32px, and — the part that was actually visible — put 16px between the
       bottom of the menu bar and the top of the page content where Miti has
       none. Miti's main begins at y=80, exactly where the second bar ends.

       The bottom inset stays: it is the only one Miti has an equivalent for
       (`.page { margin-bottom: var(--bar-h) }`). */
    padding: 0 0 var(--shell-gap);
    align-items: start;
}
.shell--full { grid-template-columns: minmax(0, 1fr); }

.panel {
    position: sticky;

    /* The two bars, and nothing else. The extra --shell-gap that used to be
       here lined the panels up with main only because the shell carried a
       matching 1rem of top padding; with that padding gone — it is what put
       16px between the menu bar and the page content, which Miti does not
       have — the same 16px became a misalignment instead, panels at y=96
       against main at y=80. Miti's panels sit at exactly bar-h × 2. */
    top: calc(var(--shell-header-h) + var(--shell-menu-h));
    display: flex;
    flex-direction: column;
    gap: var(--shell-gap);

    /* The panel BOX starts flush under the bars at y=80, as Miti's does, but
       its CONTENT begins 16px lower. Measured on Miti at 1440px: its panels
       are fixed at top 80 with `padding: 0`, and the first section inside
       each carries `margin-top: 16px` — so the visible card starts at 96.

       Ours had nothing: the shell's 1rem of padding used to supply it, and
       removing that padding (to close the gap between the menu bar and the
       page content, which Miti does not have) took this with it. The panels
       ended up tight against the bars while main kept its own 16px from
       `py-4`, which is the mismatch that showed.

       Padding here rather than a margin on the first child: this site's
       panels are filled with plain `.box` elements by a dozen different
       pages, and one rule on the container cannot be forgotten by the next
       page that adds one. */
    padding-top: var(--shell-gap);
}
.panel--nav { }
.panel--aside { }

.main { min-width: 0; display: flex; flex-direction: column; gap: var(--shell-gap); }

/* --------------------------------------------------------------- box -- */
.box {
    background: var(--color-white);
    border: var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.box__head {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-4) var(--s-5);
    border-bottom: var(--border-soft);
}
.box__title {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-surface-600);
}
.box__body { padding: var(--s-5); }
.box__body--flush { padding: 0; }

/* ------------------------------------------------------------ ticker -- */
.ticker {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    height: var(--shell-ticker-h);
    display: flex;
    align-items: center;
    background: var(--color-white);
    border-top: var(--border);
    overflow: hidden;
}
.ticker__label {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--s-2);
    height: 100%;
    padding: 0 var(--s-4);
    border-right: var(--border);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--color-surface-700);
    background: var(--color-surface-50);
    white-space: nowrap;
}
.ticker__track {
    display: flex;
    align-items: center;
    gap: var(--s-7);
    padding-left: var(--s-6);
    white-space: nowrap;
    animation: ticker-roll 60s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker-roll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.tick {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-sm);
    color: var(--color-surface-700);
}
.tick__name { font-weight: 600; color: var(--color-surface-900); }
.tick__sun { color: var(--color-brand-500); }
.tick__val { font-variant-numeric: tabular-nums; font-weight: 600; }
.tick__up { color: var(--color-success-600); }
.tick__down { color: var(--color-danger-600); }
.tick__unit {
    font-size: var(--fs-2xs);
    font-weight: 700;
    padding: 0.05rem var(--s-2);
    border-radius: var(--radius-sm);
    background: var(--color-moss-100);
    color: var(--color-moss-700);
}

/* ------------------------------------------------------------ footer --
   Miti's footer, rule for rule (layout.css .brandfoot*), read off the page
   that actually renders rather than off the partial that does not — Miti
   carries TWO footer implementations and `layouts/partials/footer.blade.php`
   with its .site-footer__* classes is dead code. The live one is inline in
   its layout and uses .brandfoot*.

   WHAT THIS REPLACED, so the change is not mistaken for drift: a dark
   surface-900 band holding a four-column `auto-fit minmax(12rem, 1fr)` grid
   of link lists. Miti has no columns, no dark band and no link lists — one
   centred column, transparent, dark text on the cream page. Both sites'
   page backgrounds are cream (Miti #FAF2ED, this site's --color-page-bg),
   so transparent reads the same on both.

   Colours are this site's tokens rather than Miti's literals: Miti hardcodes
   #0f1c14, a near-black green, and var(--color-brand-800), which this
   palette does not define. --color-surface-900 and --color-brand-700 are the
   same roles here. Structure is Miti's; palette is ours.

   The twin of zuva-energy-2027's block. Keep them the same. */
.footer {
    /* in-flow, no fixed positioning — same as Miti's .footer */
}

.brandfoot {
    background: transparent;
    color: var(--color-surface-900);
    padding: 2.5rem 1.5rem 1.5rem;
}

.brandfoot__inner { text-align: center; }

.brandfoot__heading {
    font-family: var(--font-display);
    font-size: 1.75rem;
    color: var(--color-surface-900);
    margin: 0 0 0.5rem;
}

.brandfoot__desc {
    max-width: 50rem;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 auto;
    text-align: center;
}

.brandfoot__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
    font-size: 0.8rem;
    opacity: 0.85;
}

.brandfoot__legal a {
    color: var(--color-brand-700);
    text-decoration: none;
    margin: 0 0.5rem;
}
.brandfoot__legal a:hover { color: var(--color-brand-600); }

/* NOT IN MITI, and kept deliberately.

   Miti's footer ends at the bottom bar. This site's carried a pre-launch
   disclosure there — no offer open, no money moved, the water statement
   (Akwa sells abstraction, lifting, storage and treatment, not water; all
   water vests in the President; a permit passes with the land), and the
   S.I. 48 of 2025 statement that no carbon revenue is offered or marketed
   because the platform holds no ZiCMA Certificate of Registration. Those are
   legal notices, not decoration, and matching a footer that has no slot for
   one is not a reason to delete them.

   It sits below the bottom bar in the same centred column, quieter than the
   body text, with a hairline above it so it reads as a footnote rather than
   as part of the brand block. */
.brandfoot__disclosure {
    max-width: 50rem;
    margin: 1.5rem auto 0;
    padding-top: 1rem;
    border-top: 0.0625rem solid var(--color-surface-200);
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--color-surface-600);
    text-align: left;
}

/* --------------------------------------------------------- utilities -- */
.row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: var(--s-3); }
.stack-5 { display: flex; flex-direction: column; gap: var(--s-5); }
/* `.grid` COLLIDES WITH TAILWIND'S `.grid`, and this sheet loads after the
   Tailwind bundle, so whatever it declares wins at equal specificity.

   It used to carry `gap: var(--shell-gap)` too, which quietly beat every
   Tailwind gap utility on any element carrying both classes. The profile
   page's `grid grid-cols-1 lg:grid-cols-3 gap-6` came out at a 16px gap
   against Miti's 24px — 5px narrower per column, 288.3px there against
   293.7px here, on a row whose every other measurement already matched.

   The gap moves to the two modifiers instead. Every bespoke use in this
   codebase is `grid grid-2` or `grid grid-3`, so nothing loses its spacing,
   and `display: grid` is safe to leave: Tailwind's `.grid` declares the same
   thing, so the two agreeing costs nothing. */
.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--shell-gap); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--shell-gap); }
.muted { color: var(--color-surface-500); }
.tnum { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------- responsive -- */
/* :not(.shell--full) IS LOAD-BEARING, AND ITS ABSENCE WAS A REAL BUG.

   These rules re-declare grid-template-columns on `.shell`. They sit LATER in
   the file than `.shell--full` and carry the same specificity — one class — so
   without the :not() they win.

   The effect: between 64rem and 78rem, every page WITHOUT a nav section got a
   240px phantom nav column it had no element to fill, and `main`, being the
   first child, was placed into it. Content rendered in a 240px strip beside
   900px of empty page. That is roughly 1024-1248px: a very large share of
   actual laptops.

   It failed silently because it looks like a deliberately narrow column rather
   than a broken grid, and because the layout is correct on either side of that
   band. Only the middle is wrong.

   Found and fixed on Hewa Wind, back-ported here. */
@media (max-width: 78rem) {
    .shell:not(.shell--full) { grid-template-columns: var(--shell-nav-w) minmax(0, 1fr); }
    .panel--aside { display: none; }
}
@media (max-width: 64rem) {
    .shell:not(.shell--full) { grid-template-columns: minmax(0, 1fr); }
    .panel--nav { display: none; }

    /* Match Miti: the badge carries the brand alone and the nav becomes
       icons. The badge is NOT hidden and NOT held compact — it stays 70 at
       rest and shrinks to 30 on scroll exactly as it does on the desktop
       bar, so a phone always carries a brand mark. An earlier version of
       this block hid it, which left an inner page scrolled down with no
       mark at all. */
    .header-logo,
    .menu-logo { display: none; }

    /* Visually hidden, not display:none — the icon carries no accessible
       name, so the label has to stay reachable by a screen reader. */
    .top-list-link span,
    .top-pill-name {
        position: absolute;
        width: 0.0625rem;
        height: 0.0625rem;
        padding: 0;
        margin: -0.0625rem;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* BOTH bars inset past the badge, not only the one it sits in. At rest
       the badge falls inside the header, but when the header tucks away the
       menu rises to top: 0 and takes that space — and the badge would then
       sit on the first nav link. */
    .header,
    menu.menu { padding-left: 5rem; }

    /* .menu-logo carries align-self: flex-start, so its desktop margin-top
       is what centres it. Zeroing that margin without releasing the
       align-self pins the brand above the bar's centre line while the links
       beside it sit centred. Hand the job back to the flex row — centre
       needs no number and cannot drift when the type size changes. */
    .menu-logo,
    body.body--compact-brand .menu-logo {
        margin-top: 0;
        align-self: center;
    }

    /* Only on the inner-page menu. The homepage menu carries no nav, so
       hiding its hashline leaves a pinned bar with nothing in it. */
    body.body--compact-brand menu.menu:not(.menu--home-chat) .menu-logo--hashline {
        display: none;
    }

    .header-logo,
    .header-auth,
    .menu-logo,
    .menu-advert {
        width: auto;
        flex: 0 1 auto;
    }
    .menu-advert { padding: 0; }

    /* The nav rejoins the flex row.

       Both rows are absolutely centred on the VIEWPORT at desktop, which is
       right there because the two 15rem end columns are symmetric. Below
       64rem they are not: the badge takes 5rem off the left and the auth
       cluster takes what it needs off the right. The viewport centre is no
       longer the centre of the free space, so an absolutely-centred row sits
       too far right and runs into the auth cluster.

       At 390px that put the last nav icon on top of the ZW switcher — 46px of
       overlap, the two drawn over each other. It is inherited: Miti does the
       same, and Zuva after it, and the same change is going into both.

       position:static hands the job back to the flex row, and `space-between`
       on .header already puts the nav after the brand column and the auth
       cluster at the end. Flex items cannot overlap, so this cannot come
       back at some width nobody measured.

       min-width stays at the base rule's `max-content`. Overriding it to 0
       let the row be squeezed narrower than the pills inside it, which do not
       shrink — so they spilled out of their own box and reached the switcher
       again from 375px down, which is most phones. The nav holds its width
       and the auth cluster, which is `flex: 0 1 auto`, gives way instead. */
    .header-list,
    .menu-list {
        position: static;
        left: auto;
        transform: none;
    }

    /* The switcher goes. It is a label, not a control: one country, and the
       markup is a <span> that says so. Keeping a dead 38px chip is what made
       the row 7px too narrow at 390px, and this bar is 66px tighter than
       Zuva's and Miti's because Akwa reserves 5rem for the full-size seal
       rather than shrinking it. Miti's switcher IS live — three countries and
       a dropdown — so it keeps its own. */
    .country-switcher { display: none; }
    .header-list { gap: var(--s-2); }   /* Miti: 45px pills, 8px apart  */
    .menu-list   { gap: var(--s-4); }   /* Miti: 18px icons, 16px apart */

    /* Miti's small-screen pill is 45px. Padding alone gives 40, so the width
       is stated and the icon centred inside it. */
    .top-pill {
        min-width: 2.8125rem;
        justify-content: center;
    }

    .header-auth-link { padding: 0 0.45rem; font-size: var(--fs-xs); }

    /* The username goes; the avatar stays and carries the identity.

       Miti's signed-in pill is avatar | divider | caret and is 106px wide, so
       it clears the centred nav at every phone width. Akwa's spells the
       account out — avatar, username, divider, the word Logout — which runs to
       156px at 390px and puts the avatar 51px underneath the last nav icon.
       Desktop has a 240px column and is unaffected; this band is the only
       place the extra width costs anything.

       The name is still in the anchor's title attribute, so hovering or a
       screen reader still resolves who is signed in. */
    .header-auth-name { display: none; }
}

/* Now that the nav sits in the flex row rather than over it, the row either
   fits or it squeezes something — and the thing that gives is .header-auth,
   the only child that is `flex: 0 1 auto`. Below about 371px it starts taking
   width off the Login | Register pill, which has `overflow: hidden`, so the
   pill does not shrink gracefully: it CLIPS. At 360px, a width plenty of
   Android phones still ship, it read "Registe".

   0.45rem to 0.25rem across two links and four sides is 12.8px, which is more
   than the 11px short at 360 and costs nothing above it. Set at 24rem rather
   than at the exact 371px where clipping starts, so the relief arrives before
   the squeeze does and no band is left balanced on a rounding difference.

   320px still clips. Badge 80 + nav 152 + pill 113 + gutters needs 371px and
   there is no arrangement of those four that fits 320 — the honest failure is
   a clipped word rather than two controls drawn on top of each other. */
@media (max-width: 24rem) {
    .header-auth-link { padding: 0 0.25rem; }
}

/* Four fixed bars sliding and a badge resizing on every scroll reversal is
   exactly the motion this query exists for. The classes still toggle and the
   states are still correct; they simply arrive instantly. One variable rather
   than a list of selectors, which cannot fall out of step with itself. */
@media (prefers-reduced-motion: reduce) {
    body { --motion-shell: 0s; }
    .ticker__track { animation: none; }
    html { scroll-behavior: auto; }
}

/* ==========================================================================
   SIGNED-IN PILL — a verbatim copy of Miti's .mast__auth / .mast__dropdown
   and .country-switcher rules (miti-exchange-2027, layout.css 3000-3181 and
   18705-18796). Re-copy from Miti when Miti's change.

   The alias block maps the names Miti uses onto Zuva's. Miti's --theme-*
   values come from its theme.css light/dark pair; the light values are taken
   here, because Zuva has no dark mode to switch between.
   ========================================================================== */
.header-auth {
    --radius-full:  var(--radius-pill);
    --transition-fast: 150ms ease;
    --color-gray-100: var(--color-surface-100);
    --color-gray-200: var(--color-surface-200);

    --theme-glass-mid:        rgba(255, 255, 255, 0.45);
    --theme-bg-mast-pill:     var(--color-white);
    --theme-border-mast-pill: var(--color-surface-200);
    --theme-text-primary:     var(--color-surface-900);
    --theme-shadow-mast-pill: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
}
.mast__auth {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 1.75rem;                 /* fixed pill height so avatar can fill it */
    background: var(--theme-glass-mid);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-brand-600, #7d2793);
    box-shadow: var(--theme-shadow-mast-pill);
    overflow: visible;            /* allow dropdown to escape */
}

[data-theme="dark"] .mast__auth {
    background: rgba(255, 255, 255, 0.1);
}

/* Avatar + name link wrapper */
.mast__auth-link {
    display: flex;
    align-items: center;
    align-self: stretch;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-full) 0 0 var(--radius-full);
    transition: background var(--transition-fast);
}

.mast__auth-link:hover {
    background: var(--color-gray-200);
}

/* Avatar inside auth pill — fill the full pill height */
.mast__auth .mast__auth-avatar {
    flex-shrink: 0;
    align-self: stretch;
    width: auto !important;
    height: calc(100% - 0.25rem) !important;
    margin: 0.125rem;
    aspect-ratio: 1;
    border-radius: var(--radius-full);
}

/* Display name */
.mast__auth-name {
    padding: 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    white-space: nowrap;
}

/* Vertical divider between items */
.mast__auth-divider {
    width: 0.0625rem;
    margin: 0.4rem 0;
    align-self: stretch;
    background: var(--theme-border-mast-pill);
    transition: opacity var(--transition-fast);
}

.mast__auth:hover .mast__auth-divider {
    opacity: 0;
}

/* Action links/buttons inside the pill */
.mast__auth-action {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    padding: 0.45rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-primary);
    text-decoration: none;
    background: none;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.mast__auth-action:hover {
    background: var(--color-gray-200);
}

/* Caret toggle button */
.mast__auth-toggle {
    display: inline-flex;
    align-items: center;
    padding: 0 0.188rem 0 0.125rem;
    border-radius: 0 var(--radius-full) var(--radius-full) 0;  
}

.mast__auth-caret {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.2s ease;
}
.mast__auth-caret--open {
    transform: rotate(180deg);
}

/* ── Auth dropdown menu ── */
.mast__dropdown {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 200;
    min-width: 11rem;
    list-style: none;
    margin: 0;
    padding: 0.35rem;
    background: var(--theme-bg-mast-pill);
    border: 0.0625rem solid var(--theme-border-mast-pill);
    border-radius: 0.65rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
}

[data-theme="dark"] .mast__dropdown {
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.3);
}

/* Links & form buttons inside dropdown */
.mast__dropdown a,
.mast__dropdown button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-primary);
    text-decoration: none;
    background: none;
    border-radius: 0.65rem;
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.mast__dropdown a:hover,
.mast__dropdown button:hover {
    background: var(--color-gray-100);
}

.mast__dropdown svg {
    flex-shrink: 0;
    opacity: 0.55;
}

/* Account name — heads the dropdown now that the pill shows the avatar alone.
   A label, not a menu item, so it takes no hover or icon gutter. */
.mast__dropdown-user {
    padding: 0.3rem 0.85rem 0.5rem;
    margin-bottom: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    white-space: nowrap;
    border-bottom: 0.125rem solid var(--color-brand-500);
}

/* Separator line between groups */
.mast__dropdown-sep {
    height: 0.0625rem;
    margin: 0.3rem 0.65rem;
    background: var(--theme-border-mast-pill);
}

/* Hide form wrapper styling inside dropdown */
.mast__dropdown form {
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   CART SPLIT BUTTON  (green pill in mast__right, left of auth)
   ========================================================================== */
.country-switcher {
  position: relative;
  display: inline-flex;
}

.country-switcher__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid #d9dce2;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}

.country-switcher__toggle:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.country-switcher__flag {
  display: block;
  width: 100%;
  height: 100%;
  /* Overrides the inline text sizing .country-flag carries for card titles —
   this instance fills a circular badge instead. That includes its
   margin-left: 0.4em, which was pushing the flag off-centre and clipping it
   against the right edge of the badge. */
  object-fit: cover;
  margin: 0;
  vertical-align: middle;
  border-radius: 0;
  box-shadow: none;
}

.country-switcher__option-flag {
  display: inline-flex;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
}

.country-switcher__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 10rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.375rem;
  background: #ffffff;
  border: 1px solid #ececed;
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 320;
}

.country-switcher__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  color: #3a3a3a;
  font-size: 0.84rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease;
}

.country-switcher__option:hover {
  background: #f4f5f7;
}

.country-switcher__option.is-active {
  background: #eef7ee;
  color: var(--livetrees);
  font-weight: 600;
}

.country-switcher__flag--sm {
  font-size: 1rem;
}



/* ==========================================================================
   AVATAR — a verbatim copy of Miti's .avatar rules (layout.css 6115-6162).
   Miti renders these through its <x-avatar> component; this site writes the
   same classes by hand, because a component that only ever draws one shape
   in one place is a file to keep in step for no gain.

   --radius-full and --color-surface-0 are Miti's names; the aliases below
   point them at Zuva's. Scoped to .avatar so nothing leaks.
   ========================================================================== */
.avatar {
    --radius-full:     var(--radius-pill);
    --color-surface-0: var(--color-white);
}
.avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    overflow: hidden;
    flex-shrink: 0;
    vertical-align: middle;
    background: var(--color-brand-100);
    color: var(--color-brand-700);
    font-weight: 700;
    line-height: 1;
    user-select: none;
}

/* ── Image inside wrapper ── */
.avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* ── Initials text ── */
.avatar__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: inherit;
    letter-spacing: 0.03em;
}

/* ── Size variants ── */
.avatar--xs  { width: 1.5rem;  height: 1.5rem;  font-size: 0.625rem; }
.avatar--sm  { width: 2rem;  height: 2rem;  font-size: 0.75rem;  }
.avatar--md  { width: 2.5rem;  height: 2.5rem;  font-size: 0.875rem; }
.avatar--lg  { width: 4rem;  height: 4rem;  font-size: 1.25rem;  }
.avatar--xl  { width: 6rem;  height: 6rem;  font-size: 2rem;     }
.avatar--2xl { width: 8rem; height: 8rem; font-size: 2.5rem;   }

/* ── Ring modifier (white border for overlaying covers / dark BGs) ── */
.avatar--ring {
    border: 0.25rem solid var(--color-surface-0);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}