:root{
  /* Light neutrals are greys in the same faint-mauve family as --bg-main,
     not the original creams: cream surfaces read as mismatched against the
     grey reading column. Lightness is unchanged from the cream palette
     (canvas 92.4%, panel 95%, card 97%), so surface elevation is identical -
     only the hue moved off 48deg yellow. */
  --bg:#ECE9EA; --panel:#F3F1F2; --card:#F9F7F8; --ink:#191818; --ink-2:#55514C;
  /* The reading column only (<main> and the shell around it). Deliberately a
     separate token from --bg: the sidebar (--panel) and every card surface
     (--card/--panel) keep their own warmer greys. */
  --bg-main:#EBE8E9;
  --dark:#141312; --dark-2:#1D1B1A; --line:rgba(25,24,24,.13); --line-strong:rgba(25,24,24,.22);
  --red:#E5391C; --red-text:#C22C12; --red-deep:#9E2221; --orange:#FF6A2C;
  /* AA-safe status colours: >=4.5:1 as chip text on their own tint and on --panel/--card/--bg/--bg-main */
  --st-effect:#296F46; --st-up:#7A5510;
  --solar:radial-gradient(120% 140% at 15% 0%, #FF9A4D 0%, #FF5A1F 32%, #E2301A 58%, #57110A 100%);
  --display:'Overused Grotesk', Inter, system-ui, sans-serif;
  --sans:Inter, system-ui, -apple-system, sans-serif;
  --r-card:1rem; --r-pill:999px;
  --sh:0 1px 2px rgba(25,24,24,.05), 0 8px 28px rgba(25,24,24,.07);
  --ease:cubic-bezier(.16,1,.3,1); --ease-quint:cubic-bezier(.22,1,.36,1); --ease-quart:cubic-bezier(.25,1,.5,1);
  --z-sticky:20; --z-switch:40; --z-scrim:44; --z-drawer:45; --z-backdrop:50; --z-modal:60; --z-toast:70;
  --side-w:16.5rem;
  /* fluid display type: shrinks on small screens, grows on widescreen */
  --fs-h1:clamp(1.8rem, 1.1rem + 3.1vw, 2.875rem);
  --fs-h2:clamp(1.4rem, 1.16rem + 1.05vw, 1.625rem);
  --fs-h2-lg:clamp(1.55rem, 1.15rem + 1.9vw, 1.875rem);
  --fs-price:clamp(2.6rem, 1.7rem + 4.3vw, 3.5rem);
}
*{box-sizing:border-box}
/* Fluid root: locked to the signed-off scale up to 1536px, then grows gently to widescreen.
   rem anchor keeps it responsive to the user's browser font-size (zoom-safe). */
html{scroll-behavior:smooth;font-size:clamp(1rem, 0.719rem + 0.293vw, 1.1875rem);-webkit-text-size-adjust:100%}
#cic-app{margin:0;background:var(--bg);color:var(--ink);font:400 0.9375rem/1.6 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-.01em;margin:0}
h1{font-size:var(--fs-h1);line-height:1.08;text-wrap:balance}
h2{font-size:var(--fs-h2);line-height:1.15}
h3{font-size:1.1875rem;line-height:1.25}
p{margin:0}
a{color:inherit}
img{max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:0.375rem}
::placeholder{color:#6B6660;opacity:1}

/* ---------- auth-state visibility ---------- */
#cic-app[data-auth="visitor"] [class*="auth-"]:not(.auth-visitor){display:none!important}
#cic-app[data-auth="free"]    [class*="auth-"]:not(.auth-free){display:none!important}
#cic-app[data-auth="member"]  [class*="auth-"]:not(.auth-member){display:none!important}
#view-library,#view-guide,#view-myguides,#view-downloads,#view-prefs,#view-markets{display:none}
#cic-app[data-view="library"] #view-library{display:block}
#cic-app[data-view="guide"] #view-guide{display:block}
#cic-app[data-view="myguides"] #view-myguides{display:block}
#cic-app[data-view="downloads"] #view-downloads{display:block}
#cic-app[data-view="prefs"] #view-prefs{display:block}
#cic-app[data-view="markets"] #view-markets{display:block}
/* Phase 3 (Task 3) deviation: `login` is a new screen with no equivalent in
   index.html, so extract-assets.mjs never regenerates this pair from the
   demo source (unlike the six rules above). Keep it in sync by hand if the
   #view-* selector list above ever changes. */
#view-login{display:none}
#cic-app[data-view="login"] #view-login{display:block}
/* Phase 5 (Task 4) same deviation, same fix: `radar` is a new screen with no
   equivalent in index.html, so extract-assets.mjs never regenerates this pair
   from the demo source (unlike the six rules above). Keep it in sync by hand
   if the #view-* selector list above ever changes. */
#view-radar,#view-radararchive{display:none}
#cic-app[data-view="radar"] #view-radar{display:block}
#cic-app[data-view="radararchive"] #view-radararchive{display:block}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;font-family:var(--display);font-size:0.9375rem;line-height:1;border-radius:var(--r-pill);padding:0 1.25rem;height:2.75rem;transition:transform .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn .ic{width:1rem;height:1rem}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000}
.btn-ghost{border:1px solid var(--line-strong);background:transparent;color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(25,24,24,.04)}
.btn-solar{background:linear-gradient(100deg,#FF6A2C,#E2301A);color:#fff}
.btn-solar:hover{filter:brightness(1.06)}
.btn-white{background:#fff;color:var(--ink);border:1px solid rgba(25,24,24,.08)}
.btn-white:hover{background:#F1EEEF}
.btn-sm{height:2.25rem;padding:0 0.9375rem;font-size:0.875rem}
.btn-lg{height:3.25rem;padding:0 1.625rem;font-size:1rem}
.btn-block{width:100%}
.btn-locked{opacity:.5;cursor:not-allowed}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed;pointer-events:none}
.btn-white.btn-locked:hover{background:#fff}

.chip{display:inline-flex;align-items:center;gap:0.375rem;height:1.5rem;padding:0 0.625rem;border-radius:var(--r-pill);font-size:0.75rem;font-weight:500;line-height:1;border:1px solid var(--line);color:var(--ink-2);background:transparent}
.chip .ic{width:0.75rem;height:0.75rem}
.chip-red{border-color:transparent;background:rgba(229,57,28,.1);color:var(--red-text)}
.chip-dark{border-color:transparent;background:var(--ink);color:#fff}
.chip-ok{border-color:transparent;background:rgba(25,24,24,.07);color:var(--ink)}

.ic{width:1.125rem;height:1.125rem;flex:none}

/* ---------- shell ---------- */
.side{position:fixed;inset:0 auto 0 0;width:var(--side-w);background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:0 1rem 1rem;z-index:var(--z-sticky)}
/* Painted on the shell as well as .main: .main is only as tall as its content,
   so a short view would otherwise show the app canvas below it. The shell's
   own box starts after the fixed sidebar, so this never paints under it. */
.shell{margin-left:var(--side-w);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg-main)}
.wrap{width:100%;max-width:clamp(1220px, 530px + 45vw, 1680px);margin:0 auto;padding:0 1.875rem}
/* Every view gets a bottom cushion so no page ends flush with the scroll
   boundary; .foot's own bottom margin is reduced by the same amount below,
   so pages that carry a footer look exactly as before. */
.main{padding-bottom:3.5rem;background:var(--bg-main)}
/* The hidden attribute must always win: any class that sets its own display
   (.btn is inline-flex) silently defeats the UA's [hidden]{display:none},
   which left the subscribe modal's start button visible under the account
   step. Scoped to the app so theme markup is untouched. */
#cic-app [hidden]{display:none!important}

/* mobile menu button + drawer scrim (inert until the mobile breakpoint) */
.menu-btn{display:none;width:2.375rem;height:2.375rem;border-radius:0.75rem;border:1px solid var(--line-strong);align-items:center;justify-content:center;flex:none;color:var(--ink);margin-right:0.25rem;transition:background .14s var(--ease),border-color .14s var(--ease)}
.menu-btn:hover{border-color:var(--ink);background:rgba(25,24,24,.04)}
.menu-btn .ic{width:1.25rem;height:1.25rem}
.nav-scrim{display:none}

/* The lockup is exactly the .topbar-in height and starts at the very top of
   the sidebar, so the logo sits on the same centre line as the topbar's
   controls and its border-bottom continues the topbar's bottom line. */
.logo-lockup{display:flex;align-items:center;height:3.875rem;flex:none;padding:0 0.5rem;border-bottom:1px solid var(--line);text-decoration:none}
.logo-lockup svg{width:9.875rem;height:auto;display:block;color:var(--ink)}

.nav{display:flex;flex-direction:column;gap:0.125rem;margin-top:1rem}
.nav-label{font-size:0.7188rem;font-weight:500;color:var(--ink-2);letter-spacing:.04em;margin:0.875rem 0.625rem 0.375rem}
.nav a, .nav button{display:flex;align-items:center;gap:0.6875rem;width:100%;text-align:left;padding:0.5625rem 0.625rem;border-radius:0.625rem;font-size:0.875rem;font-weight:450;color:var(--ink);text-decoration:none;transition:background .14s var(--ease)}
.nav a:hover, .nav button:hover{background:rgba(25,24,24,.05)}
.nav .active{background:var(--ink);color:#fff}
.nav .active:hover{background:var(--ink)}
.nav .ic{width:1.0625rem;height:1.0625rem;opacity:.75}
.nav .active .ic{opacity:1}
.nav .end{margin-left:auto;display:inline-flex;align-items:center;gap:0.375rem}
.nav .count{font-size:0.7188rem;color:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:1px 0.4375rem}
.nav .active .count{color:#fff;border-color:rgba(255,255,255,.35)}
.nav .lockmini{width:0.8125rem;height:0.8125rem;opacity:.55}
.nav .dot{width:0.4375rem;height:0.4375rem;border-radius:50%;background:var(--red)}
.nav .miniflag{width:1.125rem;height:0.8125rem;border-radius:0.1563rem;object-fit:cover}

.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:0.625rem}
.side-card{background:var(--card);border:1px solid var(--line);border-radius:0.875rem;padding:1rem}
.side-card h4{font-size:1.0313rem;margin:0.5rem 0 0.375rem}
.side-card p{font-size:0.8125rem;color:var(--ink-2);line-height:1.5}
.side-card .btn{margin-top:0.75rem}
.side-card .fine{font-size:0.7188rem;color:var(--ink-2);margin-top:0.5rem;text-align:center}
.side-card-solar{background:var(--dark);border-color:transparent;color:#fff;position:relative;overflow:hidden}
.side-card-solar::after{content:"";position:absolute;inset:auto -40% -75% auto;width:150%;height:130%;background:var(--solar);opacity:.5;filter:blur(34px);pointer-events:none}
.side-card-solar>*{position:relative;z-index:1}
.side-card-solar p{color:rgba(255,255,255,.75)}
.side-card-solar .chip-red{background:#fff;color:var(--ink)}
.strike{text-decoration:line-through;opacity:.55;font-weight:400}

.profile{display:flex;align-items:center;gap:0.6875rem}
.avatar{width:2.375rem;height:2.375rem;border-radius:50%;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-size:0.875rem;flex:none;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.profile b{display:block;font-size:0.875rem;font-weight:550;line-height:1.25}
.profile div>span{font-size:0.75rem;color:var(--ink-2)}
.profile .avatar{color:#fff}
.side-meta{display:flex;justify-content:space-between;align-items:center;margin-top:0.75rem;padding-top:0.75rem;border-top:1px solid var(--line);font-size:0.75rem;color:var(--ink-2)}
.side-meta a{text-decoration:underline;text-underline-offset:3px}

/* ---------- topbar ---------- */
/* --bg-main, not --bg: the sticky bar is inside <main> and blurs whatever
   scrolls beneath it, so it has to tint from the same surface. */
.topbar{position:sticky;top:0;z-index:var(--z-sticky);background:color-mix(in srgb, var(--bg-main) 86%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;gap:1rem;height:3.875rem}
.crumb{display:flex;align-items:center;gap:0.5rem;font-size:0.875rem;color:var(--ink-2);min-width:0}
.crumb .here{color:var(--ink);font-weight:500}
.crumb .ic{width:0.875rem;height:0.875rem;opacity:.5}
.crumb button{text-decoration:underline;text-underline-offset:3px}
.topbar .grow{flex:1}
.iconbtn{width:2.375rem;height:2.375rem;border-radius:50%;border:1px solid var(--line-strong);display:inline-flex;align-items:center;justify-content:center;position:relative;transition:border-color .14s var(--ease)}
.iconbtn:hover{border-color:var(--ink)}
.iconbtn .badge{position:absolute;top:-0.1875rem;right:-0.1875rem;min-width:1rem;height:1rem;padding:0 0.25rem;border-radius:var(--r-pill);background:var(--red);color:#fff;font-size:0.625rem;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.avatar-sm{width:2.125rem;height:2.125rem;font-size:0.7813rem}

/* ---------- hero ---------- */
.hero{padding:1.75rem 0 1.375rem;text-align:center}
.hero .badge{display:inline-flex;align-items:center;gap:0.5rem;border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:0.4375rem 0.875rem;font-size:0.8125rem;color:var(--ink-2);background:rgba(255,255,255,.4)}
.hero .badge .dot{width:0.375rem;height:0.375rem;border-radius:50%;background:var(--red)}
.hero h1{max-width:47.5rem;margin:0.9375rem auto 0.5rem}
.hero h1 em{font-style:italic;padding-right:.09em}
.hero .sub{max-width:37.5rem;margin:0 auto;font-size:1.0313rem;font-weight:300;color:var(--ink-2);line-height:1.55}
.searchrow{display:flex;gap:0.625rem;max-width:40rem;margin:1.25rem auto 0}
.search{flex:1;display:flex;align-items:center;gap:0.625rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:0 0.5rem 0 1.125rem;height:3.25rem;box-shadow:var(--sh)}
.search input{flex:1;border:0;background:none;font:inherit;font-size:max(16px, 0.9375rem);color:var(--ink);min-width:0}
/* The hero search opts out of the global focus ring: the pill itself darkens
   via :focus-within below and the suggestion dropdown opens on focus, so the
   2px ring reads as doubled-up chrome on this one control (client call). */
.search input:focus{outline:none}
.search:focus-within{border-color:var(--ink)}
.search .ic{opacity:.5}
.search kbd{font:500 0.6875rem var(--sans);letter-spacing:.04em;white-space:nowrap;color:var(--ink-2);border:1px solid var(--line);border-bottom-width:2px;border-radius:0.4375rem;padding:0.25rem 0.4375rem;background:#fff;margin-right:0.375rem}

/* ---------- panels ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:1.25rem}
/* shared layout for the synopsis PDF/claim CTA panels (was duplicated inline) */
.synopsis-cta{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.25rem 1.5rem}
.synopsis-cta .row{display:flex;gap:0.625rem;flex-wrap:wrap}
/* fine print means the same everywhere; scoped rules (.railcard .fine etc.) still override */
.fine{font-size:0.75rem;color:var(--ink-2)}
.terms{display:flex;gap:0.5rem;align-items:flex-start;margin-top:0.9375rem;font-size:0.75rem;line-height:1.45;color:var(--ink-2)}
.terms input{margin:0.15em 0 0;flex:none;accent-color:var(--ink)}
.terms a{color:inherit;text-decoration:underline;text-underline-offset:0.15em}
.terms a:hover{color:var(--ink)}
.section{margin-top:1.125rem}
.sechead{display:flex;align-items:baseline;gap:1.125rem;margin:1.875rem 0 1rem}
.sechead h2{white-space:nowrap}
.sechead .rule{flex:1;height:1px;background:var(--line-strong)}
.sechead a,.sechead button{font-size:0.875rem;color:var(--ink-2);display:inline-flex;gap:0.375rem;align-items:center;white-space:nowrap;text-decoration:none}
.sechead a:hover,.sechead button:hover{color:var(--ink)}

/* reach */
.reach{display:grid;grid-template-columns:18.5rem 1fr 14.6875rem;gap:1.875rem;align-items:center;padding:1.375rem 1.875rem}
.reach h3{font-size:1.375rem}
.reach .lead{font-size:0.875rem;font-weight:300;color:var(--ink-2);margin:0.625rem 0 1.125rem;line-height:1.55}
.reach-stats{display:flex;gap:1.375rem;margin-bottom:1.25rem}
.reach-stats b{display:block;font:400 var(--fs-h2-lg)/1 var(--display);color:var(--red)}
.reach-stats span{font-size:0.75rem;color:var(--ink-2);white-space:nowrap}
.mapbox{position:relative}
.regions{display:flex;flex-direction:column}
.regions button{display:flex;align-items:center;gap:0.6875rem;padding:0.6875rem 0.5rem;border-bottom:1px solid var(--line);font-size:0.9063rem;text-align:left;transition:background .14s var(--ease)}
.regions button:last-child{border-bottom:0}
.regions button:hover{background:rgba(25,24,24,.04)}
.regions .ic{width:1rem;height:1rem;opacity:.6}
.regions .n{margin-left:auto;font-size:0.7813rem;color:var(--ink-2)}
.regions .chev{width:0.875rem;height:0.875rem;margin-left:0.125rem;opacity:.45}

/* guide cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.125rem}
.gcard{grid-column:span 1;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s var(--ease), box-shadow .18s var(--ease)}
.gcard:hover{transform:translateY(-0.125rem);box-shadow:var(--sh)}
.cover{position:relative;color:#fff;padding:1rem 1.125rem 0.9375rem;min-height:10rem;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background-color:var(--dark);background-image:linear-gradient(90deg,rgba(16,14,13,.9) 0%,rgba(16,14,13,.6) 52%,rgba(16,14,13,.02) 100%),var(--img,none);background-size:cover;background-position:center}
.cover .vchip{position:absolute;top:0.75rem;right:1rem;font-size:0.6875rem;letter-spacing:.02em;color:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.32);border-radius:var(--r-pill);padding:0.1875rem 0.5625rem;background:rgba(16,14,13,.38)}
.cover .flag{width:2.125rem;height:1.5rem;object-fit:cover;border-radius:0.25rem;box-shadow:0 1px 4px rgba(0,0,0,.4);margin-bottom:0.5625rem}
.cover .kind{font-size:0.7188rem;color:rgba(255,255,255,.66);letter-spacing:.02em}
.cover .name{font:400 1.3125rem/1.1 var(--display);margin-top:0.125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Cover fallback: the bundled photographs are of specific places, so a market
   without one of its own gets a branded panel - a tint held steady per country
   (--h) with its own flag as a watermark - rather than another country's
   skyline. Doubled class so it always outranks .cover's background-image. */
.cover.cover-plain{background-image:linear-gradient(90deg,rgba(16,14,13,.92) 0%,rgba(16,14,13,.74) 55%,rgba(16,14,13,.58) 100%),radial-gradient(130% 130% at 100% 0%,hsl(var(--h,20) 34% 30%) 0%,var(--dark) 64%)}
.cover.cover-plain::after{content:"";position:absolute;right:-1rem;bottom:-1.25rem;width:8.5rem;height:6rem;background:var(--flag) center/cover no-repeat;border-radius:0.375rem;opacity:.13;pointer-events:none}
.gbody{padding:0.8125rem 1rem 0.9375rem;display:flex;flex-direction:column;gap:0.5625rem;flex:1}
.gmeta{display:flex;align-items:center;gap:0.4375rem;flex-wrap:wrap;font-size:0.7813rem;color:var(--ink-2)}
.gmeta .gdate{display:inline-flex;gap:0.375rem;align-items:center;margin-right:0.125rem}
.gmeta .gdate .ic{width:0.8125rem;height:0.8125rem;opacity:.65}
.mpill{border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:0.1875rem 0.625rem;font-size:0.7188rem;color:var(--ink-2);white-space:nowrap}
.gchange{display:flex;gap:0.5rem;font-size:0.8125rem;line-height:1.45;color:var(--ink)}
.gchange .spark{color:var(--red);flex:none;margin-top:0.125rem;width:0.625rem;height:0.625rem}
.gfoot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:0.5rem;padding-top:0.625rem;border-top:1px solid var(--line)}
.gfoot .lockline{display:inline-flex;align-items:center;gap:0.375rem;font-size:0.75rem;color:var(--ink-2)}
.gfoot .lockline .ic{width:0.8125rem;height:0.8125rem}
.freechip{display:inline-flex;align-items:center;gap:0.375rem;font-size:0.75rem;font-weight:550;color:var(--red-text)}
.freechip .ic{width:0.8125rem;height:0.8125rem}

/* video */
.video{padding:1.875rem;display:grid;grid-template-columns:1fr 1.4fr;gap:1.875rem;align-items:center}
.video h3{font-size:1.375rem}
.video .lead{font-size:0.875rem;font-weight:300;color:var(--ink-2);margin:0.625rem 0 0;line-height:1.55}
.videoframe{position:relative;aspect-ratio:16/9;border-radius:0.875rem;background:var(--dark);display:flex;align-items:center;justify-content:center;overflow:hidden}
.videoplay{width:3.5rem;height:3.5rem;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);display:inline-flex;align-items:center;justify-content:center;color:#fff}
.videoplay .ic{width:1.375rem;height:1.375rem;margin-left:0.1875rem}
.videobadge{position:absolute;bottom:0.875rem;left:0.875rem;font-size:0.75rem;color:rgba(255,255,255,.75);background:rgba(0,0,0,.35);padding:0.25rem 0.625rem;border-radius:var(--r-pill)}

/* radar */
.radar{background:var(--dark);border-radius:1.375rem;color:#fff;padding:2.375rem;display:grid;grid-template-columns:5fr 6fr;gap:2.75rem;position:relative;overflow:hidden}
.radar::before{content:"";position:absolute;inset:-40% auto auto -20%;width:70%;height:120%;background:var(--solar);opacity:.16;filter:blur(60px);pointer-events:none}
.radar>*{position:relative;z-index:1}
.radar h2{font-size:var(--fs-h2-lg);color:#fff}
.radar .lead{color:rgba(255,255,255,.72);font-weight:300;font-size:0.9688rem;margin:0.875rem 0 1.375rem;max-width:44ch}
.radar .chips{display:flex;gap:0.5rem;flex-wrap:wrap}
.radar .chip{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.85)}
.issue{background:var(--dark-2);border:1px solid rgba(255,255,255,.12);border-radius:1rem;padding:1.25rem 1.375rem}
.issue-head{display:flex;align-items:center;justify-content:space-between;gap:0.625rem;padding-bottom:0.875rem;border-bottom:1px solid rgba(255,255,255,.1)}
.issue-head b{font:400 1.0625rem var(--display)}
.issue-head span{font-size:0.7813rem;color:rgba(255,255,255,.6)}
.ritem{display:flex;gap:0.8125rem;padding:0.9375rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
.ritem:last-of-type{border-bottom:0}
.ritem .flag{width:1.625rem;height:1.125rem;border-radius:0.1875rem;object-fit:cover;flex:none;margin-top:0.125rem}
.ritem b{display:block;font-size:0.875rem;font-weight:550;line-height:1.4}
.ritem .src{font-size:0.75rem;color:rgba(255,255,255,.55);margin-top:0.125rem}
.ritem .means{font-size:0.8125rem;color:rgba(255,255,255,.78);margin-top:0.375rem;line-height:1.5}
.ritem .means i{font-style:normal;color:var(--orange);font-weight:550}
.rlock{position:relative}
.rlock .blurred{filter:blur(6px);opacity:.55;user-select:none;pointer-events:none}
.rlock-cta{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.75rem;text-align:center}
.rlock-cta p{font-size:0.8438rem;color:rgba(255,255,255,.85);max-width:30ch}

/* changed list */
.changed{padding:0.5rem 1.5rem}
.crow{display:grid;grid-template-columns:12.5rem 1fr 7.5rem 6rem 2.5rem;gap:0.875rem;align-items:center;padding:0.9375rem 0;border-bottom:1px solid var(--line);font-size:0.875rem}
.crow:last-child{border-bottom:0}
/* Block, not flex: a long market name ("United Arab Emirates") must ellipsize
   on one line, and text-overflow needs a block container - the flag rides
   inline with a baseline nudge instead of flex centring. */
.crow .mk{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:550}
.crow .flag{display:inline-block;vertical-align:-0.1875rem;margin-right:0.625rem;width:1.5rem;height:1.0625rem;border-radius:0.1875rem;object-fit:cover}
.crow .what{color:var(--ink);font-weight:400}
.crow time{color:var(--ink-2);font-size:0.8125rem}
.crow .ver{font-size:0.75rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.crow .ver b{color:var(--ink);font-weight:550}
.crow .go{justify-self:end}

/* footer */
.foot{margin:3.5rem 0 2.125rem;padding-top:1.25rem;border-top:1px solid var(--line);display:flex;align-items:center;gap:1.25rem;font-size:0.7813rem;color:var(--ink-2)}
.foot .grow{flex:1}
.foot span{font-variant-numeric:tabular-nums}
.foot a{color:inherit;text-decoration:none;opacity:0.85}
.foot a:hover{text-decoration:underline;opacity:1}
.foot-right{display:flex;flex-direction:column;align-items:flex-end;gap:0.35rem}
.foot-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0.9rem;font-size:0.7188rem}

/* ---------- guide view ---------- */
.gv-head{padding:2.125rem 0 0.375rem}
.backlink{display:inline-flex;align-items:center;gap:0.4375rem;font-size:0.875rem;color:var(--ink-2);margin-bottom:1.375rem}
.backlink:hover{color:var(--ink)}
.backlink .ic{width:0.9375rem;height:0.9375rem;transform:rotate(180deg)}
.gv-title{display:flex;align-items:flex-start;gap:1.25rem;flex-wrap:wrap}
.gv-title .flag{width:3.625rem;height:2.5625rem;border-radius:0.375rem;object-fit:cover;box-shadow:0 2px 8px rgba(25,24,24,.18)}
.gv-title h1{font-size:clamp(1.6rem, 1.05rem + 2.5vw, 2.5rem)}
/* Radar header leads with a chip above the h1 (h1 has margin:0) - give it a gap */
.gv-title > div > .chip:first-child{margin-bottom:0.75rem}
.gv-meta{display:flex;gap:0.5rem;align-items:center;margin-top:0.5625rem;flex-wrap:wrap}
.gv-actions{margin-left:auto;display:flex;gap:0.625rem;align-items:center;flex-wrap:wrap}
.gv-grid{display:grid;grid-template-columns:1fr 18.5rem;gap:2.375rem;margin-top:1.875rem}
.gv-col{min-width:0}
.blocklabel{display:flex;align-items:center;gap:0.75rem;margin:2.125rem 0 0.875rem;font-size:0.8125rem;font-weight:550;color:var(--ink-2)}
.blocklabel::after{content:"";flex:1;height:1px;background:var(--line-strong)}
.blocklabel .ic{width:0.875rem;height:0.875rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:0.75rem}
.gv-intro{margin-top:1.125rem;color:var(--ink-2)}
.gv-intro p+p{margin-top:0.75rem}
/* clear the sticky topbar when the "In this guide" contents scrolls to a target */
#g-synopsis,#g-paywall,#g-changelog,[id^="g-sec-"],[id^="i-"],[id^="r-cat-"]{scroll-margin-top:5.5rem}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:0.875rem;padding:1rem}
.stat b{display:block;font:400 1.625rem/1.1 var(--display);color:var(--red)}
.stat span{font-size:0.75rem;color:var(--ink-2);display:block;margin-top:0.3125rem;line-height:1.4}
.fourbox{background:var(--panel);border:1px solid var(--line);border-radius:1rem;padding:1.375rem 1.5rem}
.fourbox h3{margin-bottom:0.25rem}
.fitem{display:flex;gap:0.9375rem;padding:0.875rem 0;border-bottom:1px solid var(--line)}
.fitem:last-child{border-bottom:0;padding-bottom:0.125rem}
.fitem .n{font:400 1.3125rem/1.25 var(--display);color:var(--red);flex:none;width:1.625rem}
.fitem b{font-size:0.9063rem;font-weight:550}
.fitem p{font-size:0.8438rem;color:var(--ink-2);margin-top:0.1875rem;line-height:1.5}
.fitem time{font-size:0.75rem;color:var(--ink-2)}
.glance{width:100%;border-collapse:collapse;font-size:0.875rem}
.glance tr{border-bottom:1px solid var(--line)}
.glance tr:last-child{border-bottom:0}
.glance th{text-align:left;font-weight:500;color:var(--ink-2);padding:0.6875rem 0.875rem 0.6875rem 0;width:13.75rem;vertical-align:top}
.glance td{padding:0.6875rem 0}
.checkcard{display:flex;gap:0.875rem;background:var(--card);border:1px solid var(--line);border-radius:0.875rem;padding:1.125rem 1.25rem;align-items:flex-start}
.checkcard .box{width:1.25rem;height:1.25rem;border:1.5px solid var(--ink);border-radius:0.375rem;flex:none;margin-top:0.125rem;display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
.checkcard .box .ic{width:0.8125rem;height:0.8125rem}
.checkcard b{font-size:0.9063rem;font-weight:550}
.checkcard p{font-size:0.8125rem;color:var(--ink-2);margin-top:0.25rem}
.problem{background:var(--dark);color:#fff;border-radius:1rem;padding:1.5rem;position:relative;overflow:hidden}
.problem::after{content:"";position:absolute;right:-3.125rem;bottom:-4.375rem;width:13.75rem;height:13.75rem;background:var(--solar);opacity:.3;filter:blur(46px)}
.problem>*{position:relative;z-index:1}
.problem h3{color:#fff}
.problem p{font-size:0.875rem;color:rgba(255,255,255,.78);margin-top:0.5625rem;max-width:62ch;line-height:1.6}
.problem .tag{font-size:0.7188rem;color:var(--orange);font-weight:550;letter-spacing:.02em}

.paywall{position:relative;border:1px solid var(--line);border-radius:1.125rem;overflow:hidden;margin-top:2.125rem}
.paywall .fade{padding:1.625rem 1.75rem 8.125rem;filter:blur(5px);opacity:.5;user-select:none;pointer-events:none}
.paywall .fade h3{margin-bottom:0.625rem}
.paywall .fade p{font-size:0.875rem;color:var(--ink-2);max-width:70ch;margin-bottom:0.875rem}
.paywall-cta{position:absolute;inset:auto 0 0 0;padding:6.875rem 1.75rem 1.875rem;background:linear-gradient(to bottom, transparent, var(--bg-main) 52%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:0.375rem}
.paywall-cta h3{font-size:1.375rem}
.paywall-cta p{font-size:0.875rem;color:var(--ink-2);max-width:46ch}
.paywall-cta .row{display:flex;gap:0.625rem;margin-top:0.75rem;flex-wrap:wrap;justify-content:center}

.msection{border:1px solid var(--line);border-radius:1rem;padding:1.375rem 1.5rem;margin-top:0.875rem;background:var(--card)}
.msection h3{display:flex;align-items:center;gap:0.625rem}
.msection h3 .ic{width:1rem;height:1rem;color:var(--red)}
.msection p{font-size:0.875rem;color:var(--ink-2);margin-top:0.5625rem;max-width:72ch}
/* authored member-section HTML (wp_kses_post) can carry lists/subheads - keep them on the rhythm */
.msection ul,.msection ol{margin-top:0.5625rem;padding-left:1.125rem;color:var(--ink-2);font-size:0.875rem;line-height:1.6;max-width:72ch}
.msection li+li{margin-top:0.25rem}
.msection h4,.msection h5{margin-top:0.875rem;font-size:0.9375rem}
/* Field lists. The guides set their reference detail as labelled fields -
   "Payment methods", "De minimis", "Statement on origin" - and run of them
   as prose is what makes a section unreadable: a VAT rate lands at the end
   of the paragraph about invoicing currency. Stacked on narrow screens,
   two columns once there is room for a label column to align against. */
.msection dl.cic-fields{margin-top:0.75rem;max-width:72ch}
.msection dl.cic-fields dt{font-weight:600;color:var(--ink);font-size:0.8125rem;line-height:1.5;margin-top:0.8125rem}
.msection dl.cic-fields dt:first-child{margin-top:0}
.msection dl.cic-fields dd{margin:0.1875rem 0 0;font-size:0.875rem;color:var(--ink-2);line-height:1.6}
@media (min-width:48rem){
  .msection dl.cic-fields{display:grid;grid-template-columns:minmax(6.5rem,11rem) 1fr;column-gap:1.5rem;row-gap:0.75rem}
  .msection dl.cic-fields dt{margin-top:0;padding-top:0.0625rem}
  .msection dl.cic-fields dd{margin:0}
}
/* Reference tables. Some guides set a section as a real grid (decision /
   operating rule / release evidence); flattened to prose the columns
   interleave mid-sentence. Scrolls inside its own box so the page never
   scrolls sideways on a phone. */
.msection .cic-scroll{margin-top:0.875rem;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:0.625rem}
.msection table.cic-table{border-collapse:collapse;width:100%;min-width:34rem;font-size:0.8125rem;line-height:1.55}
.msection table.cic-table th{text-align:left;font-weight:600;color:var(--ink);background:var(--panel);white-space:nowrap}
.msection table.cic-table td{color:var(--ink-2);vertical-align:top}
.msection table.cic-table th,.msection table.cic-table td{padding:0.5625rem 0.75rem;border-bottom:1px solid var(--line)}
.msection table.cic-table tr:last-child td{border-bottom:0}
.msection table.cic-table td:first-child{color:var(--ink);font-weight:600;width:11rem}
/* The guides' own practical notes, kept distinct from the body prose they
   sit in - as a bare sub-heading they read as part of the surrounding text. */
.msection .cic-note{margin-top:1rem;padding:0.875rem 1rem;background:var(--panel);border:1px solid var(--line);border-radius:0.625rem}
.msection .cic-note .tag{margin:0;font-size:0.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--red-text)}
.msection .cic-note h4{margin-top:0.25rem}
.msection .cic-note p{margin-top:0.375rem}
.loglist{margin-top:0.375rem}
.logrow{display:flex;align-items:baseline;gap:1rem;padding:0.8125rem 0;border-bottom:1px solid var(--line);font-size:0.8438rem}
.logrow:last-child{border-bottom:0}
.logrow .ver{font-weight:600;font-variant-numeric:tabular-nums;flex:none;width:2.75rem}
.logrow time{color:var(--ink-2);flex:none;width:5.375rem}
.logrow p{color:var(--ink)}
.rail{position:sticky;top:5.375rem;display:flex;flex-direction:column;gap:1rem;align-self:start}
.railcard{background:var(--panel);border:1px solid var(--line);border-radius:1rem;padding:1.1875rem 1.25rem}
.railcard h4{font-size:1rem;margin-bottom:0.625rem}
.toc{display:flex;flex-direction:column}
.toc li{list-style:none}
.toc{padding:0;margin:0}
.toc a{display:flex;align-items:center;gap:0.5625rem;padding:0.4688rem 0;font-size:0.8438rem;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.toc li:last-child a{border-bottom:0}
.toc a:hover{color:var(--red-text)}
.toc .ic{width:0.8125rem;height:0.8125rem;opacity:.5;margin-left:auto;flex:none}
.toc .free-tag{margin-left:auto;font-size:0.6875rem;color:var(--red-text);font-weight:550}
.vrow{display:flex;gap:0.75rem;font-size:0.8125rem;padding:0.5rem 0;border-bottom:1px solid var(--line)}
.vrow:last-child{border-bottom:0}
/* min-width, not the old fixed 2.375rem width: the selected row's label is a
   month ("Aug 2026") since 1.7.4, and the fixed issue-number width forced it
   onto two lines. */
.vrow b{font-variant-numeric:tabular-nums;flex:none;min-width:2.375rem;white-space:nowrap;font-weight:600}
.vrow span{color:var(--ink-2)}

/* ---------- Radar archive (view-radararchive) ---------- */
.ra-year{margin-bottom:1.5rem}
.ra-list{padding:0.25rem 1.375rem}
.ra-row{display:flex;align-items:center;gap:0.875rem;padding:1rem 0;border-bottom:1px solid var(--line);font-size:0.875rem;color:inherit;text-decoration:none}
.ra-row:last-child{border-bottom:0}
.ra-dot{width:0.5rem;height:0.5rem;border-radius:50%;background:var(--ink-2);opacity:.35;flex:none;transition:opacity .15s var(--ease)}
.ra-row:hover .ra-dot{opacity:.85}
.ra-row b{font-weight:550;min-width:7.5rem;white-space:nowrap}
.ra-issue{color:var(--ink-2)}
.ra-count{margin-left:auto;color:var(--ink-2);font-size:0.8125rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.ra-row .ic{width:0.875rem;height:0.875rem;opacity:.4;flex:none;transition:transform .32s var(--ease-quint)}
.ra-row:hover .ic{transform:translateX(2px)}
.railcard .fine{font-size:0.75rem;color:var(--ink-2);margin-top:0.625rem}
.railcard-dark{background:var(--dark);border-color:transparent;color:#fff}
.railcard-dark h4{color:#fff}
.railcard-dark p{font-size:0.8125rem;color:rgba(255,255,255,.72);line-height:1.5}
.railcard-dark .btn{margin-top:0.875rem}

/* search dropdown */
.searchwrap{position:relative;flex:1}
.searchwrap .search{width:100%}
.searchdrop{position:absolute;top:calc(100% + 0.5rem);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:1rem;box-shadow:0 14px 44px rgba(25,24,24,.14);padding:0.375rem;display:none;z-index:30;max-height:20.375rem;overflow:auto;overscroll-behavior:contain;text-align:left}
.searchdrop.open{display:block}
.srow{display:flex;align-items:center;gap:0.6875rem;width:100%;padding:0.5625rem 0.75rem;border-radius:0.625rem;font-size:0.875rem;text-align:left}
.srow:hover,.srow:focus-visible{background:var(--panel)}
.srow img{width:1.5rem;height:1.0625rem;border-radius:0.1875rem;object-fit:cover;flex:none}
.srow b{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow .rg{margin-left:auto;font-size:0.75rem;color:var(--ink-2);flex:none}
.srow .ic{width:0.8125rem;height:0.8125rem;opacity:.4;flex:none}
.sempty{padding:0.75rem 0.875rem;font-size:0.8125rem;color:var(--ink-2)}

/* globe */
.mapbox{display:flex;justify-content:center;align-items:center}
#globe{width:19.875rem;height:19.875rem;max-width:100%;opacity:0;transition:opacity .7s var(--ease)}

/* member views */
.viewhead{padding:2rem 0 1.125rem}
.viewhead h2{font-size:var(--fs-h2-lg)}
.viewsub{color:var(--ink-2);font-size:0.9063rem;margin-top:0.5rem;font-weight:300}
.drow{display:grid;grid-template-columns:13.125rem 4.375rem 1fr 7.5rem 2.75rem;gap:0.875rem;align-items:center;padding:0.875rem 0;border-bottom:1px solid var(--line);font-size:0.875rem}
.drow:last-child{border-bottom:0}
/* Same one-line ellipsis treatment as .crow .mk above. */
.drow .mk{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:550}
.drow .flag{display:inline-block;vertical-align:-0.1875rem;margin-right:0.625rem;width:1.5rem;height:1.0625rem;border-radius:0.1875rem;object-fit:cover}
.drow .ver{font-size:0.7813rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.drow .fn{color:var(--ink-2);font-size:0.8125rem}
.drow time{color:var(--ink-2);font-size:0.8125rem}
.prefgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.125rem;align-items:start;max-width:61.25rem}
.prefcard{background:var(--panel);border:1px solid var(--line);border-radius:1rem;padding:1.375rem}
.prefcard h3{font-size:1.125rem;margin-bottom:0.375rem}
.prefcard .btn{margin-top:1rem}
.togrow{display:flex;align-items:center;gap:0.875rem;padding:0.8125rem 0;border-bottom:1px solid var(--line)}
.togrow:last-of-type{border-bottom:0}
.togrow b{display:block;font-size:0.875rem;font-weight:550}
.togrow span{display:block;font-size:0.7813rem;color:var(--ink-2);margin-top:0.125rem}
.tog{width:2.5rem;height:1.5rem;border-radius:var(--r-pill);background:#CBC5BB;position:relative;flex:none;margin-left:auto;transition:background .18s var(--ease)}
.tog::after{content:"";position:absolute;width:1.125rem;height:1.125rem;border-radius:50%;background:#fff;top:0.1875rem;left:0.1875rem;box-shadow:0 1px 3px rgba(25,24,24,.25);transition:transform .18s var(--ease)}
.tog[aria-pressed="true"]{background:var(--ink)}
.tog[aria-pressed="true"]::after{transform:translateX(1rem)}
.brow{display:flex;justify-content:space-between;gap:0.875rem;padding:0.6875rem 0;border-bottom:1px solid var(--line);font-size:0.875rem}
.brow:last-of-type{border-bottom:0}
.brow span{color:var(--ink-2)}
.brow b{font-weight:550;text-align:right}

/* favourite heart */
.heartbtn{width:2.25rem;height:2.25rem;border-radius:50%;border:1px solid var(--line-strong);display:inline-flex;align-items:center;justify-content:center;flex:none;transition:border-color .14s var(--ease),background .14s var(--ease)}
.heartbtn .ic{width:1rem;height:1rem}
.heartbtn:hover{border-color:var(--red)}
.heartbtn[aria-pressed="true"]{border-color:rgba(229,57,28,.35);background:rgba(229,57,28,.08)}
.heartbtn[aria-pressed="true"] .ic{fill:var(--red);stroke:var(--red)}

/* all markets archive */
.mfilters{display:flex;gap:0.75rem;align-items:center;flex-wrap:wrap;margin-bottom:1.125rem}
.msearch{height:2.75rem;max-width:20rem;flex:1;min-width:13.75rem;box-shadow:none}
.mregions{display:flex;gap:0.375rem;flex-wrap:wrap}
.rpill{height:2.375rem;padding:0 0.9375rem;border:1px solid var(--line-strong);border-radius:var(--r-pill);font-size:0.8438rem;color:var(--ink-2);display:inline-flex;align-items:center;transition:background .14s var(--ease),color .14s var(--ease),border-color .14s var(--ease)}
.rpill:hover{border-color:var(--ink);color:var(--ink)}
.rpill.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.rpill .n{opacity:.55;margin-left:0.375rem;font-size:0.75rem}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%, 17.5rem),1fr));gap:0.625rem}
.mrow{display:flex;align-items:center;gap:0.6875rem;background:var(--card);border:1px solid var(--line);border-radius:0.75rem;padding:0.6875rem 0.875rem;font-size:0.875rem;text-align:left;transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.mrow:hover{transform:translateY(-1px);box-shadow:var(--sh)}
.mrow img{width:1.625rem;height:1.125rem;border-radius:0.1875rem;object-fit:cover;flex:none}
.mrow b{font-weight:550;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* min-width:0 (not flex:none): on a cramped card - "Argentina" + Yours chip +
   "v1.3 · 22 Aug 2026" - the meta ellipsizes inside the card instead of
   overflowing past its border. */
.mrow .meta{margin-left:auto;font-size:0.75rem;color:var(--ink-2);text-align:right;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .chip{flex:none}
/* Slimmer than the global .mpill and right-aligned like .meta, so both card
   states share one silhouette: name left, status/version right. */
.mrow .mpill{flex:none;margin-left:auto;padding:0.125rem 0.4375rem;font-size:0.6563rem}

/* ---------- modals ---------- */
.backdrop{position:fixed;inset:0;background:rgba(15,14,13,.56);backdrop-filter:blur(5px);z-index:var(--z-backdrop);opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
.modal{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:1.375rem;opacity:0;pointer-events:none;transition:opacity .2s var(--ease);overflow:hidden auto;overscroll-behavior:contain}
.modal .dialog{background:var(--bg);border-radius:1.375rem;box-shadow:0 30px 90px rgba(15,14,13,.45);width:100%;transform:scale(.975) translateY(0.375rem);transition:transform .22s var(--ease);max-height:calc(100vh - 2.75rem);max-height:calc(100dvh - 2.75rem);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(25,24,24,.25) transparent}
.modal .dialog::-webkit-scrollbar{width:0.375rem}
.modal .dialog::-webkit-scrollbar-track{background:transparent}
.modal .dialog::-webkit-scrollbar-thumb{background:rgba(25,24,24,.22);border-radius:999px}
body.cic-modal-open .backdrop{opacity:1;pointer-events:auto}
/* Both elements: body{overflow:hidden} alone only locks the viewport while
   the html element's own overflow is untouched, and a theme-level
   html{overflow-x:hidden} (Elementor et al.) breaks that propagation.
   Hiding the viewport scrollbar would shift the page by its width, so
   dashboard.js measures that width at open and pads the body by the same
   amount for as long as the modal is up: nothing behind it moves. */
html.cic-modal-open,body.cic-modal-open{overflow:hidden}
/* background made non-interactive while a modal owns the screen (paired with [inert] in dashboard.js) */
body.cic-modal-open .shell[aria-hidden="true"]{pointer-events:none}
.modal.open{opacity:1;pointer-events:auto}
.modal.open .dialog{transform:none}
.modal-x{position:absolute;top:1rem;right:1rem;width:2.25rem;height:2.25rem;border-radius:50%;display:grid;place-items:center;background:rgba(25,24,24,.06);z-index:2}
.modal-x:hover{background:rgba(25,24,24,.12)}
.modal .dialog{position:relative}

/* subscribe modal */
#m-sub .dialog{max-width:57.5rem}
.sub-grid{display:grid;grid-template-columns:5fr 6fr}
/* The panel is the supplied gradient artwork; the CSS gradient beneath it
   is the same picture for a browser that cannot decode AVIF. */
.sub-left{background:url('../img/modal-bck.avif') center/cover, radial-gradient(120% 90% at 0% 6%, #c43a1d 0%, #7a2211 32%, #2a110a 62%, #0f0907 100%) var(--dark);border-radius:1.375rem 0 0 1.375rem;color:#fff;padding:2.75rem 2.125rem 2.375rem;position:relative;overflow:hidden;display:flex;flex-direction:column}
.sub-left>*{position:relative;z-index:1}
.sub-left h2{color:#fff;font-size:1.875rem;text-wrap:balance}
.sub-left .kicker{font-size:0.8125rem;color:#fff;font-weight:550;margin-bottom:1.125rem}
.sub-list{margin:2.375rem 0 0;padding:0;display:flex;flex-direction:column;gap:1.125rem}
.sub-list li{list-style:none;display:flex;gap:0.6875rem;font-size:0.875rem;line-height:1.5;color:rgba(255,255,255,.88)}
.sub-list .ic{width:1rem;height:1rem;color:#fff;flex:none;margin-top:0.1875rem}
.sub-trust{margin-top:auto;padding-top:2.25rem;font-size:0.7188rem;color:rgba(255,255,255,.6);line-height:1.6}
/* A flex column so the pitch can grow: when the artwork panel is the taller
   side, the spare height goes between the notes and the button rather than
   leaving the button floating high with a blank band beneath it. */
/* Top padding clears the close button, which sits in the dialog corner
   above the founder row rather than over the end of its text. */
.sub-right{padding:3.25rem 2.25rem 1.875rem;display:flex;flex-direction:column}
#m-sub .modal-x{top:0.875rem;right:0.875rem}
#sub-pitch{flex:1 0 auto}
.founder-row{display:flex;align-items:center;gap:0.625rem}
.places{flex:1;text-align:right;font-size:0.7813rem;color:var(--ink-2)}
.meter{height:0.25rem;border-radius:0.25rem;background:rgba(25,24,24,.1);margin-top:0.625rem;overflow:hidden}
.meter i{display:block;height:100%;width:68%;background:linear-gradient(90deg,var(--orange),var(--red))}
.price{display:flex;align-items:baseline;gap:0.625rem;margin-top:2.125rem}
.price b{font:400 var(--fs-price)/1 var(--display);letter-spacing:-.02em}
.price .per{font-size:0.875rem;color:var(--ink-2)}
.price .was{font:400 1.5rem/1 var(--display);letter-spacing:-.02em;color:var(--ink-2);text-decoration:line-through;text-decoration-color:currentColor;text-decoration-thickness:1px;margin-left:0.125rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.anchor{margin-top:1.5rem;font-size:0.8438rem;color:var(--ink-2)}
.anchor .strike{margin-right:0.25rem}
.subnote{display:flex;gap:0.625rem;font-size:0.8125rem;color:var(--ink-2);margin-top:1.25rem;line-height:1.5}
.anchor+.subnote{margin-top:2.125rem}
.subnote .ic{width:0.9375rem;height:0.9375rem;flex:none;margin-top:0.125rem;opacity:.7}
.sub-right .btn-lg{margin-top:2.125rem}
.paynote{margin-top:0.75rem;text-align:center;font-size:0.75rem;color:var(--ink-2)}
.paynote b{font-weight:600}

/* claim modal */
#m-claim .dialog{max-width:29.5rem;padding:2.125rem 2.125rem 1.75rem}
#m-claim h2{font-size:1.5625rem;padding-right:2.5rem}
#m-claim .sub{font-size:0.875rem;color:var(--ink-2);margin-top:0.625rem;line-height:1.55}
.field{margin-top:0.9375rem}
.field label{display:block;font-size:0.8125rem;font-weight:550;margin-bottom:0.375rem}
.field input,.field select{width:100%;height:2.75rem;border:1px solid var(--line-strong);border-radius:0.625rem;background:#fff;padding:0 0.875rem;font:inherit;font-size:max(16px, 0.875rem);color:var(--ink);appearance:none}
.field select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2355514C' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right 0.875rem center no-repeat}
/* FE3: the border darkening stays for every focus; the outline is only
   suppressed for pointer focus, so keyboard users keep a visible 2px ring. */
.field input:focus,.field select:focus{border-color:var(--ink)}
.field input:focus:not(:focus-visible),.field select:focus:not(:focus-visible){outline:none}
.field input:focus-visible,.field select:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.field input:read-only,.field input[readonly]{background:var(--panel);color:var(--ink-2);cursor:default}
.turnstile{margin-top:1rem;display:flex;align-items:center;gap:0.6875rem;border:1px solid var(--line-strong);border-radius:0.625rem;padding:0.75rem 0.875rem;background:var(--panel);font-size:0.8125rem;color:var(--ink-2)}
.turnstile .box{width:1.25rem;height:1.25rem;border:1.5px solid var(--ink-2);border-radius:0.3125rem;flex:none;display:grid;place-items:center;color:var(--ink)}
.turnstile .box .ic{width:0.8125rem;height:0.8125rem}
.turnstile .cf{margin-left:auto;font-size:0.6563rem;letter-spacing:.03em;color:var(--ink-2);text-align:right;line-height:1.3}
#m-claim .btn-block{margin-top:1.125rem}
#m-claim .fine{margin-top:0.75rem;font-size:0.75rem;color:var(--ink-2);text-align:center;line-height:1.5}

/* ---------- switcher & toast ---------- */
.switcher{position:fixed;left:50%;bottom:max(1.125rem, env(safe-area-inset-bottom));transform:translateX(-50%);z-index:var(--z-switch);background:var(--dark);color:#fff;border-radius:var(--r-pill);padding:0.375rem 0.4375rem 0.375rem 1rem;display:flex;align-items:center;gap:0.625rem;box-shadow:0 12px 40px rgba(15,14,13,.35);max-width:calc(100vw - 1.5rem)}
.switcher .lbl{font-size:0.75rem;color:rgba(255,255,255,.6)}
.switcher .seg{display:flex;gap:0.25rem}
.switcher .segbtn{display:inline-block;font-size:0.8125rem;font-weight:500;padding:0.5rem 0.875rem;border-radius:var(--r-pill);color:rgba(255,255,255,.75);white-space:nowrap;text-decoration:none;transition:background .15s var(--ease),color .15s var(--ease)}
.switcher .segbtn:hover{color:#fff}
.switcher .segbtn.on{color:var(--ink)}
.toast{position:fixed;right:max(1.25rem, env(safe-area-inset-right));bottom:max(1.25rem, env(safe-area-inset-bottom));z-index:var(--z-toast);background:var(--dark);color:#fff;border-radius:0.875rem;padding:0.8125rem 1.125rem;font-size:0.8438rem;max-width:min(21.25rem, calc(100vw - 2.5rem));box-shadow:0 12px 40px rgba(15,14,13,.35);opacity:0;transform:translateY(0.5rem);transition:opacity .22s var(--ease),transform .22s var(--ease);pointer-events:none;line-height:1.45}
.toast.show{opacity:1;transform:none}

/* ---------- premium motion ---------- */
/* entrance reveals via animation (keeps element transitions free for hover); JS toggles .in then removes classes on animationend */
html.anim .reveal{opacity:0}
html.anim .reveal.in{animation:reveal-in .6s var(--ease-quint) both;animation-delay:calc(var(--i,0) * 55ms)}
html.anim .mrow.reveal.in{animation-duration:.5s;animation-delay:calc(var(--i,0) * 42ms)}
@keyframes reveal-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* card hover: smoother lift + subtle image warmth */
.gcard{transition:transform .4s var(--ease-quint), box-shadow .4s var(--ease-quint)}
.gcard:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(25,24,24,.05), 0 16px 40px rgba(25,24,24,.14)}
.gcard .cover{transition:filter .45s var(--ease-quint)}
.gcard:hover .cover{filter:brightness(1.07) saturate(1.04)}
.mrow{transition:transform .28s var(--ease-quint), box-shadow .28s var(--ease-quint)}
.mrow:hover{transform:translateY(-2px)}

/* primary buttons: gentle lift + shadow bloom */
.btn-dark,.btn-solar,.btn-white{transition:transform .18s var(--ease), background .16s var(--ease), color .16s var(--ease), box-shadow .3s var(--ease-quint), filter .16s var(--ease)}
.btn-dark:hover{transform:translateY(-1px);box-shadow:0 9px 24px rgba(25,24,24,.18)}
.btn-solar:hover{transform:translateY(-1px);box-shadow:0 9px 26px rgba(226,48,26,.34)}
.iconbtn{transition:border-color .14s var(--ease), background .2s var(--ease), transform .3s var(--ease-quint)}
.iconbtn:hover{transform:translateY(-1px)}

/* nav + arrow nudges */
.nav a,.nav button{transition:background .16s var(--ease), color .16s var(--ease), transform .3s var(--ease-quint)}
.nav a:not(.active):hover,.nav button:not(.active):hover{transform:translateX(3px)}
.sechead a .ic,.sechead button .ic,.backlink .ic,.regions .chev,.toc a .ic,.srow .ic{transition:transform .32s var(--ease-quint)}
.sechead a:hover .ic,.sechead button:hover .ic{transform:translateX(3px)}
.backlink:hover .ic{transform:translateX(-3px)}
.regions button:hover .chev{transform:translateX(3px)}
.toc a:hover .ic{transform:translateX(2px)}

/* favourite heart pop */
@keyframes heart-pop{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}}
.heartbtn.pop .ic{animation:heart-pop .4s var(--ease-quint)}

/* demo switcher: sliding thumb + one-time attention pulse */
.seg{position:relative}
.seg-thumb{position:absolute;top:0;left:0;height:100%;width:0;background:#fff;border-radius:var(--r-pill);box-shadow:0 2px 8px rgba(0,0,0,.2);transition:transform .5s var(--ease-quint), width .5s var(--ease-quint);z-index:0;pointer-events:none}
.switcher .segbtn{position:relative;z-index:1}
.switcher.hint{animation:switcher-hint 1.9s var(--ease) 2}
@keyframes switcher-hint{0%,100%{box-shadow:0 12px 40px rgba(15,14,13,.35)}45%{box-shadow:0 12px 40px rgba(15,14,13,.42), 0 0 0 3px rgba(255,106,44,.42)}}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .reach{grid-template-columns:1fr;gap:1.375rem}
  .regions{flex-direction:row;flex-wrap:wrap;gap:0.25rem 1.125rem}
  .regions button{border-bottom:0;padding:0.4375rem 0.25rem}
  .video{grid-template-columns:1fr;gap:1.375rem}
  .radar{grid-template-columns:1fr;gap:1.625rem;padding:1.75rem}
  .gv-grid{grid-template-columns:1fr}
  .rail{position:static}
}
@media (max-width:960px){
  /* sidebar collapses into an off-canvas drawer */
  .shell{margin-left:0}
  .menu-btn{display:inline-flex}
  .side{transform:translateX(-100%);transition:transform .32s var(--ease);z-index:var(--z-drawer);overflow-y:auto;padding-top:env(safe-area-inset-top, 0px);padding-bottom:max(1rem, env(safe-area-inset-bottom))}
  body.cic-nav-open .side{transform:none;box-shadow:0 24px 80px rgba(15,14,13,.5)}
  .nav-scrim{display:block;position:fixed;inset:0;background:rgba(15,14,13,.5);backdrop-filter:blur(2px);z-index:var(--z-scrim);opacity:0;pointer-events:none;transition:opacity .32s var(--ease)}
  body.cic-nav-open{overflow:hidden}
  body.cic-nav-open .nav-scrim{opacity:1;pointer-events:auto}
  .sub-grid{grid-template-columns:1fr}
  .sub-left{border-radius:1.375rem 1.375rem 0 0}
  /* .go is the row's only link (myguides/library "what changed") - it must survive here */
  .crow{grid-template-columns:9.375rem 1fr 5.625rem 2.5rem}
  .crow .ver{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .prefgrid{grid-template-columns:1fr}
  .drow{grid-template-columns:10.625rem 1fr 2.75rem}
  .drow .ver,.drow time{display:none}
  /* header actions align left with the title once the layout is single-column */
  .gv-actions{margin-left:0;width:100%}
}
@media (max-width:640px){
  /* the visitor "Sign in" ghost button is the only sign-in entry point on a phone */
  .topbar .btn-ghost:not(.btn-signin){display:none}
  .topbar .crumb{display:none}
  .grid{grid-template-columns:1fr}
  .wrap{padding:0 1.125rem}
  .hero{padding-top:2.375rem}
  .searchrow{flex-direction:column}
  .sechead{flex-wrap:wrap;row-gap:0.5rem}
  .sechead h2{white-space:normal}
  .switcher .lbl{display:none}
  .switcher{gap:0.25rem;padding:0.375rem 0.5rem}
  .switcher .segbtn{font-size:0.8125rem;padding:0.5rem 0.6875rem}
  .foot{flex-direction:column;align-items:flex-start;gap:0.5rem;margin:2.5rem 0 4rem}
  .foot-right{align-items:flex-start}
  .foot-links{justify-content:flex-start}
  .foot .grow{display:none}
  .paywall-cta{padding-left:1.125rem;padding-right:1.125rem}
  .paywall-cta .row .btn{white-space:normal;height:auto;min-height:2.75rem;padding-top:0.55rem;padding-bottom:0.55rem}
  .sub-left{padding:1.75rem 1.5rem}
  .sub-right{padding:1.75rem 1.5rem 1.5rem}
  #m-claim .dialog{padding:1.75rem 1.375rem 1.5rem}
  /* dense change/download rows stack: market + date on top, detail full-width below */
  .changed{padding:0.5rem 1rem}
  .crow{grid-template-columns:1fr auto;gap:0.25rem 0.75rem}
  .crow .mk{grid-column:1;grid-row:1}
  .crow time{grid-column:2;grid-row:1;justify-self:end}
  .crow .what{grid-column:1;grid-row:2}
  .crow .go{grid-column:2;grid-row:2;justify-self:end}
  .drow{grid-template-columns:1fr auto;gap:0.25rem 0.75rem}
  .drow .mk{grid-column:1;grid-row:1}
  .drow > a{grid-column:2;grid-row:1;justify-self:end}
  .drow .fn{grid-column:1 / -1;grid-row:2}
}
@media (max-width:400px){
  .stats{grid-template-columns:1fr}
  .reach-stats{gap:1rem}
  .price b{font-size:clamp(2.4rem, 8vw, 2.75rem)}
  .switcher .segbtn{font-size:0.75rem;padding:0.4375rem 0.5625rem}
}
/* larger touch targets on touch devices, without shrinking pointer/mouse UIs */
@media (pointer:coarse){
  .nav a, .nav button{padding-top:0.6875rem;padding-bottom:0.6875rem}
  .btn-sm{height:2.5rem}
  .iconbtn,.heartbtn{width:2.6875rem;height:2.6875rem}
  .rpill{height:2.6875rem}
  .switcher .segbtn{padding-top:0.625rem;padding-bottom:0.625rem}
  .toc a{padding-top:0.625rem;padding-bottom:0.625rem}
  .modal-x{width:2.6875rem;height:2.6875rem}
  .search kbd{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  html{scroll-behavior:auto}
  html.anim .reveal{opacity:1!important}
  html.anim .reveal.in{animation:none!important}
  .seg-thumb{transition:none!important}
}

/* ---------- Radar reader (1.5.0) ---------- */
.gv-lead{margin-top:1rem;font-size:0.9375rem;font-weight:300;color:var(--ink-2);max-width:62ch;line-height:1.6}
.gv-h1-muted{color:var(--ink-2);font-weight:300}
.rswitch{display:flex;align-items:center;gap:0.5rem;margin-left:auto;align-self:center}
.rswitch-lbl{font-size:0.8125rem;color:var(--ink-2);white-space:nowrap}
.radar-item{position:relative;border:1px solid var(--line);border-radius:1rem;padding:1.25rem 1.375rem;margin-top:0.875rem;background:var(--card);transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.radar-item:hover{border-color:var(--line-strong);box-shadow:var(--sh)}
.radar-item:target{border-color:var(--ink);box-shadow:var(--sh)}
.radar-item .rtop{display:flex;align-items:center;gap:0.625rem;flex-wrap:wrap}
.radar-item .rtop .mkt{display:inline-flex;align-items:center;gap:0.4375rem;font-size:0.8125rem;font-weight:550;color:var(--ink);text-decoration:none}
.radar-item .rtop .mkt:hover{text-decoration:underline;text-underline-offset:3px}
.radar-item .rtop .flag{width:1.5rem;height:1.0625rem;border-radius:0.1875rem;object-fit:cover;box-shadow:0 1px 3px rgba(25,24,24,.2)}
.radar-item .rtop .when{margin-left:auto;font-size:0.7813rem;color:var(--ink-2);white-space:nowrap}
.radar-item h3{font-size:1.0625rem;line-height:1.3;margin-top:0.7rem}
.radar-item h3 a{color:inherit;text-decoration:none}
.radar-item h3 a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.stchip{display:inline-flex;align-items:center;gap:0.4rem;height:1.5rem;padding:0 0.625rem;border-radius:var(--r-pill);font-size:0.7188rem;font-weight:550;line-height:1;border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.stchip .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.stchip-in_effect{border-color:transparent;background:rgba(46,125,79,.09);color:var(--st-effect)}
.stchip-upcoming{border-color:transparent;background:rgba(200,145,40,.13);color:var(--st-up)}
/* .stchip-proposed keeps the default outline chip styling on purpose */
.radar-item .eff{display:flex;align-items:center;gap:0.45rem;font-size:0.8125rem;margin-top:0.45rem;color:var(--ink-2)}
.radar-item .eff .ic{width:0.8125rem;height:0.8125rem;flex:none}
.radar-item .eff b{font-weight:550;color:var(--ink)}
.eff-in_effect .ic{color:var(--st-effect)}
.eff-upcoming .ic{color:var(--st-up)}
.radar-item .rmeans{font-size:0.875rem;color:var(--ink);line-height:1.6;margin-top:0.7rem;max-width:70ch}
.radar-item .rmeans i{font-style:normal;color:var(--red-text);font-weight:550}
.radar-item .rfoot{display:flex;align-items:center;gap:0.75rem;margin-top:0.8rem;padding-top:0.7rem;border-top:1px solid var(--line);flex-wrap:wrap}
.radar-item .rsrc{font-size:0.7813rem;color:var(--ink-2)}
.radar-item .rsrc a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-strong)}
.radar-item .rsrc a:hover{border-color:var(--ink)}
.rcopy{margin-left:auto;font-size:0.75rem;color:var(--ink-2);text-decoration:none;opacity:0;transition:opacity .14s var(--ease),color .14s var(--ease)}
.radar-item:hover .rcopy,.radar-item:focus-within .rcopy{opacity:1}
.rcopy:hover{color:var(--ink)}
@media (hover:none){.rcopy{opacity:1}}
.blocklabel .cnt{font-size:0.7188rem;font-weight:500;border:1px solid var(--line);border-radius:var(--r-pill);padding:0.05rem 0.45rem}
.rtoc{list-style:none;margin:0;padding:0}
.rtoc button{display:flex;align-items:center;gap:0.55rem;width:100%;text-align:left;padding:0.45rem 0.1rem;font-size:0.8438rem;color:var(--ink-2);border-bottom:1px solid var(--line);transition:color .14s var(--ease)}
.rtoc li:last-child button{border-bottom:0}
.rtoc button:hover{color:var(--ink)}
.rtoc .cnt{margin-left:auto;font-size:0.7188rem;border:1px solid var(--line);border-radius:var(--r-pill);padding:0 0.42rem;min-width:1.35rem;text-align:center}
.rlegend{display:flex;flex-direction:column;gap:0.55rem}
.rlegend .lrow{display:flex;align-items:center;gap:0.55rem;font-size:0.8125rem;color:var(--ink-2)}
.rlegend .dot{width:8px;height:8px;border-radius:50%;flex:none}
.rlegend .dot-upcoming{background:var(--st-up)}
.rlegend .dot-in_effect{background:var(--st-effect)}
.rlegend .dot-proposed{background:var(--ink-2)}
.rlegend small{margin-left:auto;font-size:0.7rem;color:var(--ink-2);opacity:.75}
.paywall .fade .radar-item{box-shadow:none}

/* ---------- claim-form market combobox (1.6.0) ---------- */
.combo{position:relative}
.combo .combo-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0;padding:0;border:0;clip:rect(0 0 0 0)}
.combo input{padding-right:2.5rem}
.combo-chev{position:absolute;right:0.875rem;top:1.375rem;transform:translateY(-50%);color:var(--ink-2);pointer-events:none;display:flex}
.combo-chev .ic{width:1rem;height:1rem}
.combo-list{position:absolute;top:calc(100% + 0.375rem);left:0;right:0;background:var(--card);border:1px solid var(--line);border-radius:0.625rem;box-shadow:0 12px 32px rgba(25,24,24,.14);max-height:16rem;overflow:auto;overscroll-behavior:contain;z-index:40;padding:0.375rem;scrollbar-width:thin;scrollbar-color:rgba(25,24,24,.25) transparent}
.combo-list::-webkit-scrollbar{width:0.375rem}
.combo-list::-webkit-scrollbar-track{background:transparent}
.combo-list::-webkit-scrollbar-thumb{background:rgba(25,24,24,.22);border-radius:999px}
.combo-list::-webkit-scrollbar-thumb:hover{background:rgba(25,24,24,.35)}
/* The Turnstile widget (light + flexible via data attrs in modals.php) sits
   flush in the claim form: clip its iframe to the form's own corner radius. */
.cf-turnstile{border-radius:0.625rem;overflow:hidden;line-height:0}
.combo-opt{display:flex;align-items:center;gap:0.625rem;width:100%;padding:0.5rem 0.625rem;border:0;background:transparent;border-radius:0.5rem;font-size:0.9063rem;text-align:left;cursor:pointer;transition:background .12s var(--ease)}
.combo-opt:hover,.combo-opt.is-active{background:var(--panel)}
.combo-opt[aria-selected="true"]{background:var(--panel)}
.combo-opt img{width:1.5rem;height:1.0625rem;border-radius:0.1875rem;object-fit:cover;flex:none}
.combo-opt b{font-weight:500}
.combo-opt span{margin-left:auto;font-size:0.75rem;color:var(--ink-2);flex:none;padding-left:0.625rem}
.combo-none{padding:0.75rem;font-size:0.8438rem;color:var(--ink-2)}