:root{
    --night:#0E0E10; --ember:#E8843A; --terracotta:#C96A28;
    --parchment:#F0EDE8; --linen:#F8F6F2; --slate:#1A1A1D;

    /* ═══ LAYERING SCALE — every PAGE-LEVEL z-index comes from here ═══
       Low → high. Add new layers by slotting a value between two tiers, not by inventing an ad-hoc
       number elsewhere. Values are spaced so there is always room to insert.
       (Component-INTERNAL z-indexes — e.g. the map/scrim/number layers inside .hero, all z-index:4 —
       are local to their own stacking context inside .layout and never interact with this scale.)

         --z-grain     full-page noise texture (pointer-events:none), just above the background
         --z-ads       .layout and EVERY ad slot — leaderboard, bento, the sticky rail and the vendor
                       iframes inside it. They all live inside .layout's stacking context, so this one
                       value is their shared ceiling no matter what z-index a vendor sets inside its own
                       cross-origin iframe (a descendant can't escape its ancestor's context).
         --z-mobilebar the fixed mobile sticky ad bar (bottom of viewport)
         --z-header    the header — ABOVE the ads and the mobile bar. It has to be, because it CONTAINS
                       the language menu, and the menu (a descendant) can't paint above the header's own
                       stacking context. Header is a top bar and the mobile bar a bottom bar, so they
                       never overlap — lifting the header past the mobile bar costs nothing visually.
         --z-langmenu  the open dropdown, WITHIN the header context. Its effective global tier is the
                       header's (it can't exceed it); this value only orders it above the trigger. */
    --z-grain: 1;
    --z-ads: 2;
    --z-mobilebar: 6;
    --z-langmenu: 10;
    --z-header: 60;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:'Inter',-apple-system,sans-serif; background:var(--night); color:var(--parchment); padding-bottom:70px}
  body::before{
    content:''; position:fixed; inset:0; pointer-events:none; opacity:.03; z-index:var(--z-grain);
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  header{
    display:flex; justify-content:space-between; align-items:center;
    /* z-index lifts the WHOLE header context above the ads and the mobile bar so the language menu it
       contains can paint over them — see the layering scale in :root. */
    padding:22px 40px; position:relative; z-index:var(--z-header);
  }
  .wordmark{font-weight:900; font-size:19px; letter-spacing:.22em}
  .wordmark small{display:block; font-weight:500; font-size:10px; letter-spacing:.3em; color:var(--terracotta); margin-top:3px}
  .hnav{font-size:12px; font-weight:500; letter-spacing:.08em; display:flex; align-items:center; gap:12px}
  .hnav-tail{opacity:.55}
  /* language switcher pill + dropdown (matches .chip/.gobtn treatment — no Ember) */
  .langsel{position:relative}
  .langtrigger{
    display:inline-flex; align-items:center; gap:6px; font-family:inherit;
    font-weight:700; font-size:11px; letter-spacing:.08em; color:var(--parchment);
    background:transparent; border:1.5px solid var(--terracotta); border-radius:999px;
    padding:5px 12px; cursor:pointer; transition:background .2s, color .2s;
  }
  .langtrigger:hover{background:var(--terracotta); color:var(--night)}
  .langtrigger:focus-visible{outline:2px solid var(--parchment); outline-offset:3px}
  .langtrigger .chev{font-size:9px; opacity:.8}
  .langmenu{
    position:absolute; inset-inline-end:0; top:calc(100% + 6px); z-index:var(--z-langmenu);
    margin:0; padding:5px; list-style:none; min-width:150px;
    background:var(--slate); border:1px solid rgba(240,237,232,.14); border-radius:12px;
    box-shadow:0 12px 32px rgba(0,0,0,.4);
  }
  .langmenu[hidden]{display:none}
  .langmenu .lang{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:8px 12px; border-radius:8px; cursor:pointer; color:var(--parchment);
    font-size:12px; font-weight:600; white-space:nowrap;
  }
  .langmenu .lang:hover{background:rgba(240,237,232,.06)}
  .langmenu .lang:focus-visible{outline:2px solid var(--parchment); outline-offset:-2px}
  .langmenu .lang::after{content:''; flex:none; width:7px; height:7px; border-radius:50%; background:var(--terracotta); opacity:0}
  .langmenu .lang.active::after{opacity:1}   /* active-language dot */

  .layout{
    display:grid; grid-template-columns:1fr 300px; gap:24px;
    max-width:1300px; margin:0 auto; padding:8px 40px 0; position:relative; z-index:var(--z-ads);
  }
  .col-main{display:flex; flex-direction:column; gap:18px}

  /* ═══ HERO: map backdrop + number overlay ═══ */
  .hero{
    background:var(--slate); border:1px solid rgba(240,237,232,.07);
    border-radius:18px; position:relative; overflow:hidden; height:480px;
  }
  .mapwrap{position:absolute; inset:0;
    background:radial-gradient(ellipse at 50% 45%, #16161a 0%, var(--slate) 75%)}
  svg#map{width:100%; height:100%; display:block; opacity:.9}
  #zoomG{transform-origin:47.46% 32.07%; transition:transform 3.4s cubic-bezier(.22,.8,.24,1)}
  .zoomed #zoomG{transform:scale(4.6)}
  .grat{stroke:rgba(240,237,232,.08); stroke-width:.5; fill:none}
  .land{fill:rgba(240,237,232,.09)}
  .dots{fill:none;stroke:rgba(240,237,232,.32);stroke-width:2.6;stroke-linecap:round}
  .edgeDot{fill:rgba(201,106,40,.85)}
  .edgeDot.pulse{animation:edgePulse 2.4s infinite}
  @keyframes edgePulse{0%,100%{opacity:.5}50%{opacity:1}}
  .pin{fill:var(--terracotta)}
  .pinRing{fill:none; stroke:var(--parchment); stroke-width:1; opacity:0}
  .zoomed .pinRing{animation:ring 2s .9s infinite}
  @keyframes ring{0%{opacity:.7; r:3}100%{opacity:0; r:16}}
  .route{stroke:rgba(240,237,232,.4); stroke-width:.7; stroke-dasharray:3 3; fill:none; opacity:0; transition:opacity 1s 2.4s}
  .zoomed .route{opacity:1; animation:dash 1.4s linear infinite}
  @keyframes dash{to{stroke-dashoffset:-12}}
  /* dark scrim so the number reads over the map */
  .scrim{position:absolute; inset:0;
    background:radial-gradient(ellipse at 50% 52%, rgba(14,14,16,.72) 0%, rgba(14,14,16,.25) 55%, rgba(14,14,16,.55) 100%)}

  .hero-head{
    position:absolute; top:0; left:0; right:0; z-index:4;
    display:flex; justify-content:space-between; align-items:center; padding:18px 26px;
  }
  .hero-head .t{font-weight:800; font-size:13px; letter-spacing:.16em; text-transform:uppercase}
  .hero-head .loc{font-size:12px; font-weight:500; opacity:.6; font-variant-numeric:tabular-nums}

  .overlay{
    position:absolute; inset:0; z-index:4;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding-bottom:56px;
  }
  .sidewrap{display:flex; align-items:center; gap:16px; position:relative; z-index:4}
  .side{
    writing-mode:vertical-rl; transform:rotate(180deg);
    font-size:10px; font-weight:700; letter-spacing:.3em;
    text-transform:uppercase; opacity:.5;
  }
  /* RTL: label sits on the trailing edge, upright orientation, no rotation */
  [dir="rtl"] .sidewrap{flex-direction:row-reverse}
  [dir="rtl"] .side{writing-mode:vertical-lr; transform:none}
  .reading{display:flex; align-items:baseline; gap:12px; line-height:.9}
  /* THE Ember element */
  .num{
    font-weight:900; font-size:clamp(90px,13vw,170px); color:var(--ember);
    letter-spacing:-.04em; font-variant-numeric:tabular-nums;
    text-shadow:0 0 70px rgba(232,132,58,.28);
  }
  .unit{font-weight:700; font-size:clamp(20px,2.4vw,32px); opacity:.85}
  .phase{font-size:11px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; opacity:.6; margin-top:16px; min-height:14px}
  .gobtn{
    margin-top:22px; background:transparent; border:1.5px solid var(--terracotta); color:var(--parchment);
    font-family:inherit; font-weight:800; font-size:14px; letter-spacing:.14em;
    padding:13px 48px; border-radius:999px; cursor:pointer; transition:background .25s, opacity .4s;
    backdrop-filter:blur(4px);
  }
  .gobtn:hover{background:var(--terracotta)}
  .gobtn:focus-visible{outline:2px solid var(--parchment); outline-offset:3px}
  /* Readiness gate: START is held until page activity quiesces so ad init can't overlap measurement.
     Deliberately SUBTLE and copy-free — no spinner, no "loading ads" text. The user is never asked to
     wait for advertising; the button simply isn't active yet. */
  .gobtn:disabled{opacity:.45; cursor:default; border-color:rgba(201,106,40,.45)}
  .gobtn:disabled:hover{background:transparent}
  /* data-use disclosure + light-mode toggle (below START) */
  .datactl{display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:14px; transition:opacity .4s}
  .dataline{font-size:11px; opacity:.45; letter-spacing:.04em}
  .lightmode{
    display:inline-flex; align-items:center; gap:8px; cursor:pointer;
    font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--parchment);
    border:1.5px solid var(--terracotta); border-radius:999px; padding:6px 14px;
    background:rgba(14,14,16,.35); backdrop-filter:blur(4px); transition:background .2s, opacity .2s;
  }
  .lightmode:hover{background:rgba(201,106,40,.18)}
  .lightmode input{accent-color:var(--terracotta); cursor:pointer; margin:0}
  .lightmode:focus-within{outline:2px solid var(--parchment); outline-offset:3px}
  .lightmode.locked{cursor:default; opacity:.7}
  .lightmode.locked input{cursor:default}
  .edgeline{
    position:absolute; bottom:64px; left:26px; z-index:4;
    font-size:11px; font-weight:500; opacity:.6; letter-spacing:.06em;
  }
  /* C's live bars along hero bottom */
  .bars{
    position:absolute; left:0; right:0; bottom:0; height:52px; z-index:4;
    display:flex; align-items:flex-end; gap:4px; padding:0 20px;
  }
  .bars i{flex:1; background:#2E2E33; border-radius:2px 2px 0 0; height:3%; transition:height .26s ease}
  .bars i.hot{background:var(--terracotta)}

  /* ═══ bento band (C) ═══ */
  .band{display:grid; grid-template-columns:repeat(12,1fr); gap:16px}
  .card{background:var(--slate); border:1px solid rgba(240,237,232,.07); border-radius:14px; padding:18px 20px}
  .card .l{font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; opacity:.45}
  .stat{grid-column:span 2; display:flex; flex-direction:column; justify-content:space-between; min-height:96px}
  .stat .v{font-weight:800; font-size:25px; font-variant-numeric:tabular-nums}
  .stat .v small{font-size:12px; font-weight:600; opacity:.5; margin-left:3px}
  .verdict{grid-column:span 4; display:flex; flex-direction:column; justify-content:space-between;
    background:linear-gradient(135deg, var(--slate), #232326)}
  .verdict .v{font-weight:800; font-size:16px; line-height:1.3}

  /* B's score track */
  .score{grid-column:span 12; display:flex; align-items:center; gap:26px; padding:20px 26px}
  .score .t{font-weight:800; font-size:13px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap}
  .track{flex:1; height:10px; border-radius:6px; background:rgba(240,237,232,.08); position:relative}
  .track .fill{position:absolute; inset:0 auto 0 0; width:0; border-radius:6px;
    background:linear-gradient(90deg, var(--terracotta), #d98a45); transition:width 1.6s ease}
  .track .marker{
    position:absolute; top:-32px; transform:translateX(-50%);
    /* clamp so the (translateX-centred) marker never escapes the track at 0% or 100%;
       --mhw is a half-width guard, --mpos is the score position set from JS. */
    --mhw:64px;
    left:clamp(var(--mhw), var(--mpos, 0%), calc(100% - var(--mhw)));
    font-weight:800; font-size:12px; background:var(--parchment); color:var(--night);
    padding:4px 10px; border-radius:6px; transition:left 1.6s ease; white-space:nowrap;
  }
  .track .marker::after{content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
    border:5px solid transparent; border-top-color:var(--parchment)}

  .details{grid-column:span 4; min-height:150px}
  .details table{width:100%; margin-top:10px; border-collapse:collapse; font-size:12.5px}
  .details td{padding:6px 0; border-bottom:1px solid rgba(240,237,232,.06)}
  .details td:first-child{opacity:.45; font-weight:500}
  .details td:last-child{text-align:right; font-weight:600; font-variant-numeric:tabular-nums}
  .tips{grid-column:span 4}
  .tips ul{list-style:none; margin-top:10px; font-size:12.5px; line-height:1.5}
  .tips li{padding:6px 0 6px 18px; position:relative; opacity:.75; border-bottom:1px solid rgba(240,237,232,.06)}
  .tips li::before{content:''; position:absolute; left:0; top:12px; width:6px; height:6px; border-radius:50%; background:var(--terracotta)}

  /* ═══ viewing data card (no Ember — hero keeps the sole Ember slot) ═══ */
  .viewing{grid-column:span 6; display:flex; flex-direction:column; gap:12px}   /* 6+6 with .ad-bento */
  .chips{display:flex; gap:8px; flex-wrap:wrap}
  .chip{
    font-family:inherit; font-weight:700; font-size:12px; letter-spacing:.08em;
    padding:6px 15px; border-radius:999px; cursor:pointer;
    background:transparent; border:1.5px solid var(--terracotta); color:var(--parchment);
    transition:background .2s, color .2s;
  }
  .chip:hover{background:var(--terracotta); color:var(--night)}
  .chip.active{background:var(--terracotta); color:var(--night)}
  .chip:focus-visible{outline:2px solid var(--parchment); outline-offset:3px}
  .vhead{display:flex; align-items:baseline; gap:8px; margin-top:2px}
  .vval{font-weight:800; font-size:32px; font-variant-numeric:tabular-nums; color:var(--parchment); transition:opacity .2s}
  .vunit{font-size:13px; font-weight:600; opacity:.55}
  .vcaption{font-size:12.5px; font-weight:600; opacity:.8; min-height:16px}
  .vif{opacity:.7}
  .vslider-row{display:flex; align-items:center; gap:14px; margin-top:2px}
  .vslider-wrap{position:relative; flex:1; display:flex; align-items:center}
  .vslider{width:100%; accent-color:var(--terracotta); cursor:pointer}
  .vslider:focus-visible{outline:2px solid var(--parchment); outline-offset:3px}
  .vmark{position:absolute; top:50%; transform:translate(-50%,-50%); inset-inline-start:50%;
    width:2px; height:16px; background:var(--parchment); opacity:.6; pointer-events:none; border-radius:1px}
  .vreset{
    font-family:inherit; font-weight:700; font-size:11px; letter-spacing:.06em; white-space:nowrap;
    background:transparent; border:1px solid rgba(240,237,232,.25); color:var(--parchment);
    padding:6px 12px; border-radius:999px; cursor:pointer; transition:border-color .2s, background .2s;
  }
  .vreset:hover{border-color:var(--terracotta); background:rgba(201,106,40,.12)}
  .vreset:focus-visible{outline:2px solid var(--parchment); outline-offset:3px}
  .viewing-note{font-size:11px; opacity:.4; line-height:1.4; margin-top:2px}

  /* ═══ ads — friendly-iframe slots (all fill on page load; heights reserved → no CLS) ═══ */
  /* Every ad container is pinned to its DECLARED IAB unit size and CENTRED in whatever cell it sits in.
     Vendor creatives are fixed-size: a 300×250 clipped into 215px or floated in a 944px box corrupts
     both viewability and fill detection. The grid cell may be wider — the container is not stretched to
     it (margin-inline:auto does the centring in grid and flex alike).
     `min(<unit>, 100%)` keeps the box EXACTLY the unit wherever it fits and prevents overflow where it
     does not; ads.js refuses to serve a vendor into a container narrower than the declared unit and
     falls to house instead (we hold no 468×60 or 320×100 tag — see the note there). */
  .adslot{
    position:relative; display:flex; align-items:center; justify-content:center;
    overflow:hidden; border-radius:10px; margin-inline:auto;
  }
  .adslot iframe{border:0; display:block}
  /* dashed-border styling is a FALLBACK only — shown when a slot is genuinely empty (no creative) */
  .adslot:empty{ background:#141417; border:1px dashed rgba(240,237,232,.18); }
  /* LTR-isolate numeric pairs + Latin technical tokens so bidi doesn't reorder them under RTL. */
  #num, .unit, .stat .v, #loc, #edgeline, #dProto{ direction:ltr; unicode-bidi:isolate; }
  /* span 6 (was 4): at 1081px a 4-track span is only 215px, too narrow to hold the 300×250 it declares.
     6 tracks give >=330px at 1081 and 440px at 1440, so the unit always fits and centres. .viewing drops
     to span 6 to match (6+6=12). Height is the DECLARED 250, not the old arbitrary 266. */
  .ad-bento{grid-column:span 6; width:min(300px,100%); height:250px}
  .ad-leader{grid-column:span 12; width:min(728px,100%); height:90px}
  .col-rail{display:flex; flex-direction:column; gap:18px}
  /* rail-half split: a 300px flex-row wrapper holding two side-by-side units (160 + 8px gap + 120 =
     288, centred in the 300px track). The 8px gap sits INSIDE the track and eats 8 of the 20px of slack
     (300-280), leaving 12px of gutter — deliberately smaller than col-rail's vertical 18px, since the
     horizontal axis is the constrained one here. Height 600 preserved, so the rail total (868px) and
     the sticky top:min(20px,calc(100vh-888px)) offset are unchanged → no CLS. */
  .ad-half-wrap{display:flex; flex-direction:row; justify-content:center; gap:8px; width:300px; margin-inline:auto}
  /* cancel the inherited .adslot{margin-inline:auto}: on flex children those auto margins would absorb
     the slack and inflate the 8px gap to ~14px. margin-inline:0 + the wrapper's justify-content:center
     make the gap EXACTLY 8px with 6px gutters either side (160+8+120=288, centred in 300). */
  .ad-half-a{width:160px; height:600px; margin-inline:0}
  .ad-half-b{width:120px; height:600px; margin-inline:0}
  .ad-mpu{width:300px; height:250px}
  .sticky{
    position:fixed; left:0; right:0; bottom:0; z-index:var(--z-mobilebar);
    display:flex; justify-content:center; padding:8px;
    background:rgba(14,14,16,.92); backdrop-filter:blur(8px);
    border-top:1px solid rgba(240,237,232,.08);
  }
  .sticky .ad-sticky{width:320px; height:50px; border-radius:8px}
  /* mobile-only format — must not occupy the desktop viewport */
  @media (min-width:769px){ .sticky{display:none} }

  /* ═══ STICKY RIGHT RAIL — desktop only ═══
     The rail (300×600 + 18px gap + 300×250 ≈ 868px) bottoms out while the left column keeps going,
     leaving dead space. Sticking it raises viewable time on inventory we already have — no new slot.

     `align-self:start` is REQUIRED, not cosmetic: .col-rail is a grid item and grid items stretch to
     the row height by default, so the rail would be as tall as the left column and have nothing to
     stick within. Starting it also collapses the empty tail that caused the dead space. The ad units
     themselves do not move (column flex, packed to the top either way), and the row height is still
     set by the left column, so the left column's flow is untouched — no layout shift.

     Scoped to ≥1081px deliberately. NOTE: the rail is NOT display:none below that — the ≤1080px rule
     only hides .ad-half and turns the rail into a row — so the scoping has to be explicit here rather
     than relying on the rail being hidden. No collision with the fixed mobile bar: .sticky is
     display:none from 769px up, so it never coexists with the sticky rail. */
  @media (min-width:1081px){
    .col-rail{
      position:sticky;
      align-self:start;
      /* One rule covers both viewport cases, via a top offset that can go negative:
           TALL screen  (100vh ≥ 888+20): min() picks 20px → the rail pins 20px below the page top and
                        BOTH units stay on screen for the whole scroll.
           SHORT screen (100vh < 908): min() picks the negative value → the rail pins with its top that
                        far ABOVE the viewport, which puts its BOTTOM 20px above the fold. The user
                        scrolls down through the rail and the lower unit stays visible.
         The negative-top form is why this is `top` and not `bottom`: a plain `bottom:20px` does not
         engage here (verified — the rail just scrolled away at its flow position). A flat `top:20px`
         would be worse than nothing on a short screen: the rail would freeze immediately with its
         lower ~170px permanently below the fold and unreachable. 888px = 868px rail + 20px offset. */
      top: min(20px, calc(100vh - 888px));
    }
  }

  footer{max-width:1300px; margin:24px auto 0; padding:0 40px; font-size:11px; line-height:1.6; opacity:.4; position:relative; z-index:var(--z-ads)}

  @media (max-width:1080px){
    .layout{grid-template-columns:1fr}
    .col-rail{flex-direction:row}
    .ad-half-wrap{display:none}   /* hides BOTH rail-half units together; the two children need no separate rule */
    .stat{grid-column:span 3}
    .verdict,.details,.tips,.ad-bento,.viewing{grid-column:span 6}
    .band{grid-template-columns:repeat(6,1fr)}
    .ad-leader,.score{grid-column:span 6}
  }