/* Passport Power — standalone web service stylesheet.
   Ported faithfully from the owner-approved design (design/passport-power/web/web.css)
   + the per-page styles inlined in mockups 02/03/04 + responsive breakpoints
   (1100 hides A·S·R, 760 collapses to mobile rows). "A precision instrument for
   measuring documents": warm paper, ink, one cobalt accent, hairlines over cards. */
:root {
  --paper: #F6F4EF; --surface: #FFFFFF;
  --ink: #171612; --ink2: #595550; --ink3: #7C7564;
  --hairline: #E7E3DA; --hairline2: #D9D4C7;
  --cobalt: #2741E6; --wash: rgba(39, 65, 230, 0.08);
  --pos: #1E7A46; --warn: #B45309; --danger: #C9302B;
  --maxw: 1280px;
  --toolbar-h: 64px;
  --sans: 'General Sans', 'Helvetica Neue', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; font-feature-settings: 'tnum'; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
main { padding-bottom: 40px; }
.shell { max-width: var(--maxw); margin: 0 auto; padding: 0 48px; }
/* the functional label voice (retired the uppercase-mono plaque voice — that now
   survives only in .stamp/.tier/.mrz artifact families). Sentence case, sans. */
.mono { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.35; }
.mono.sm { font-size: 11.5px; }
.c2 { color: var(--ink2); } .c3 { color: var(--ink3); } .cob { color: var(--cobalt); }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 8px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: 8px; z-index: 50; }

/* ── toolbar ─────────────────────────────────────────────────────────── */
.toolbar { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--hairline2); height: var(--toolbar-h); }
.toolbar .shell { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 12px; }
/* Countly app mark — the real android-icon-foreground artwork (tilt baked in), tight-trimmed to /countly-mark.png. Near-black ink, transparent interior: reads on paper (#F6F4EF) + white dock alike. */
.clogo { flex: none; display: block; width: 34px; height: 34px; }
.clogo.dsm { width: 24px; height: 24px; }
.brand .brandtext { display: flex; flex-direction: column; }
.brand .word { font-weight: 600; font-size: 17px; letter-spacing: -0.02em; line-height: 1.1; display: block; }
.brand .by { font-size: 11.5px; font-weight: 500; letter-spacing: 0; color: var(--ink3); display: block; margin-top: 1px; }
.seg { display: flex; border: 1px solid var(--hairline2); border-radius: 12px; padding: 3px; background: var(--surface); }
.seg a { padding: 7px 16px 6px; border-radius: 9px; font-size: 13px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink2); white-space: nowrap; }
.seg a.on { background: var(--wash); color: var(--cobalt); }
.tsearch { margin-left: auto; display: flex; align-items: center; gap: 10px; border: 1px solid var(--hairline2); border-radius: 12px; background: var(--surface); height: 40px; padding: 0 16px; width: 300px; color: var(--ink3); font-size: 13px; letter-spacing: 0.01em; }
.tsearch svg { flex: none; }
.tsearch input { border: 0; background: transparent; outline: none; width: 100%; font-family: var(--sans); font-size: 13px; letter-spacing: 0.01em; color: var(--ink); }
.tsearch input::placeholder { color: var(--ink3); }
.langwrap { position: relative; }
.langwrap > summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink); }
.langwrap > summary::-webkit-details-marker { display: none; }
.langmenu { position: absolute; right: 0; top: 26px; background: var(--surface); border: 1px solid var(--hairline2); border-radius: 12px; padding: 6px; z-index: 30; min-width: 132px; box-shadow: 0 8px 30px rgba(23,22,18,0.10); }
.langmenu a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink2); }
.langmenu a:hover, .langmenu a[aria-current="true"] { background: var(--wash); color: var(--cobalt); }

/* ── ticker strip ─────────────────────────────────────────────────────── */
.ticker { border-bottom: 1px solid var(--hairline); }
.ticker .shell { display: flex; gap: 34px; padding: 10px 48px; flex-wrap: wrap; align-items: baseline; }
.ticker .ti { display: flex; align-items: baseline; gap: 8px; }
.ticker .ti.tibc { gap: 0; }
.ticker b { font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink); }
.ticker span { font-size: 12px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink3); }
.ticker .mlink { margin-left: auto; color: var(--cobalt); font-weight: 600; font-size: 12.5px; }

/* ── headline block ───────────────────────────────────────────────────── */
.head { padding: 64px 0 44px; display: flex; align-items: flex-end; gap: 60px; position: relative; overflow: hidden; }
.head h1 { font-size: clamp(38px, 5vw, 62px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.02; max-width: 15ch; text-wrap: balance; }
.head h1 em { font-style: normal; color: var(--cobalt); }
.head .lede { margin-top: 18px; font-size: 17px; color: var(--ink2); max-width: 52ch; }
.dotworld { position: absolute; right: -40px; top: 10px; width: 460px; height: 260px; background-image: radial-gradient(var(--ink3) 1.6px, transparent 1.6px); background-size: 11px 11px; opacity: 0.28; -webkit-mask-image: radial-gradient(ellipse 65% 85% at 60% 45%, black 30%, transparent 75%); mask-image: radial-gradient(ellipse 65% 85% at 60% 45%, black 30%, transparent 75%); pointer-events: none; }

/* ── stamp chip ───────────────────────────────────────────────────────── */
.stamp { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 50px; height: 28px; padding: 0 8px; border: 1.5px solid var(--ink); border-radius: 6px; font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; background: transparent; color: var(--ink); white-space: nowrap; }
.stamp .fl { font-size: 14px; line-height: 1; letter-spacing: 0; }
.stamp.cob { border-color: var(--cobalt); color: var(--cobalt); }
.stamp.t1 { border-color: var(--cobalt); color: var(--cobalt); }
.stamp.lg { min-width: 72px; height: 42px; gap: 7px; font-size: 18px; border-width: 2px; padding: 0 11px; }
.stamp.lg .fl { font-size: 20px; }

/* ── the board (full-bleed ledger) ────────────────────────────────────── */
.board { border-top: 1px solid var(--ink); }
.brow, .bhead { display: grid; grid-template-columns: 64px 70px 1fr 265px 235px 96px 110px; align-items: center; gap: 18px; padding: 0 8px; }
.bhead { height: 42px; border-bottom: 1px solid var(--hairline2); }
/* sticky table heads pin just under the toolbar (heads are display:none ≤760) */
.bhead, .rhead, .dhead, .uhead { position: sticky; top: var(--toolbar-h); background: var(--paper); z-index: 5; }
.bhead span, .rhead span, .dhead span, .uhead span { font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink2); }
.brow { min-height: 72px; border-bottom: 1px solid var(--hairline); color: inherit; }
a.brow:hover { background: rgba(39,65,230,0.03); }
.brow .rk { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--ink3); text-align: right; padding-right: 6px; }
.brow .nm { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.brow .nm small { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink3); margin-top: 3px; }
.score { display: flex; align-items: center; gap: 16px; }
.score b { font-size: 31px; font-weight: 600; letter-spacing: -0.01em; width: 76px; }
.score .rail { flex: 1; height: 3px; background: var(--hairline); position: relative; }
.score .rail i { position: absolute; inset: 0 auto 0 0; background: var(--ink); display: block; }
.asr { display: flex; gap: 18px; }
.asr div { flex: none; }
.asr .k { font-size: 11px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink3); margin-right: 5px; }
.asr b { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); font-feature-settings: 'tnum'; }
.asr .rail { width: 52px; height: 3px; background: var(--hairline); position: relative; margin-top: 5px; }
.asr .rail i { position: absolute; inset: 0 auto 0 0; background: var(--ink2); display: block; }
.doors { font-family: var(--mono); font-size: 19px; font-weight: 600; }
.tier { justify-self: start; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; border: 1.5px solid var(--ink2); color: var(--ink2); border-radius: 6px; padding: 4px 10px; white-space: nowrap; }
.tier.t1 { border-color: var(--cobalt); color: var(--cobalt); transform: rotate(-3deg); }
.allrow { display: flex; align-items: center; justify-content: space-between; padding: 18px 8px; border-bottom: 1px solid var(--ink); gap: 18px; }
.allrow b { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--cobalt); }
/* full-board disclosure */
details.fullboard > summary { list-style: none; cursor: pointer; }
details.fullboard > summary::-webkit-details-marker { display: none; }
details.fullboard[open] > summary .allrow b::after { content: ' ▲'; }
details.fullboard:not([open]) > summary .allrow b::after { content: ' ▼'; }

/* ── definition rows / method ─────────────────────────────────────────── */
.defs { border-top: 1px solid var(--ink); }
.def { display: grid; grid-template-columns: 190px 1fr 340px; gap: 32px; padding: 26px 8px; border-bottom: 1px solid var(--hairline); align-items: baseline; }
.def .k { font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--cobalt); }
.def h3 { font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.def p { font-size: 14.5px; color: var(--ink2); max-width: 58ch; }
.def .f { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; color: var(--ink2); line-height: 1.95; }

/* ── instrument panel (detail hero) ───────────────────────────────────── */
.hero2 { display: grid; grid-template-columns: 430px 1fr; gap: 56px; padding: 52px 0 40px; align-items: start; }
.hero2 > * { min-width: 0; }
.panel { background: var(--surface); border: 1px solid var(--hairline2); border-radius: 16px; padding: 30px 32px; }
.panel .num { font-size: clamp(72px, 9vw, 112px); font-weight: 600; line-height: 0.95; letter-spacing: -0.03em; }
.prail { height: 4px; background: var(--hairline); position: relative; }
.prail i { position: absolute; inset: 0 auto 0 0; background: var(--cobalt); display: block; }
.countstrip { display: flex; border-top: 1px solid var(--hairline); margin-top: 22px; padding-top: 16px; gap: 10px; flex-wrap: wrap; }
.countstrip div { flex: 1; text-align: left; min-width: 64px; }
.countstrip b { font-size: 27px; font-weight: 600; display: block; }
.countstrip span { font-size: 11px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink3); }
/* detail-panel header + dimension rows */
.panelname { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.plbl { font-size: 12px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink2); }
.pdv { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink); }
.detail-h1 { font-size: clamp(34px, 4.4vw, 50px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.04; text-wrap: balance; }
.detail-h1 em { font-style: normal; color: var(--cobalt); }
.detail-lede { margin-top: 16px; font-size: 16.5px; color: var(--ink2); max-width: 56ch; }

/* rank-neighbourhood mini-board (detail pages) — rank | stamp+flag | name | score | rail */
.cmp { border-top: 1px solid var(--ink); margin-top: 28px; }
.cmphd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 4px 10px; }
.cmpttl { font: 600 13px/1.35 var(--sans); letter-spacing: 0.01em; color: var(--ink2); }
.cmpsub { font: 500 12px/1.35 var(--sans); letter-spacing: 0.01em; color: var(--ink3); }
.cmprow { display: grid; grid-template-columns: 38px auto 1fr 68px 176px; gap: 16px; align-items: center; min-height: 52px; border-bottom: 1px solid var(--hairline); padding: 0 4px; color: var(--ink); text-decoration: none; }
a.cmprow:hover { background: var(--surface); }
.cmprow.cur { background: var(--wash); }
.cmprow .rk { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--ink3); text-align: right; }
.cmprow.cur .rk { color: var(--cobalt); }
.cmprow .nm { font-weight: 600; font-size: 15px; }
.cmprow b { font-size: 19px; font-variant-numeric: tabular-nums; }
.cmprow .rail { height: 3px; background: var(--hairline); position: relative; }
.cmprow .rail i { position: absolute; inset: 0 auto 0 0; background: var(--ink2); display: block; }

/* ── MRZ strip ────────────────────────────────────────────────────────── */
.mrz { font-family: var(--mono); font-size: 13px; letter-spacing: 0.18em; color: var(--ink3); white-space: nowrap; overflow: hidden; padding: 14px 0; border-block: 1px solid var(--hairline2); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }

/* ── destination ledger ───────────────────────────────────────────────── */
.filters { display: flex; gap: 10px; padding: 22px 0 16px; flex-wrap: wrap; }
.filters button { border: 1px solid var(--hairline2); background: var(--surface); border-radius: 999px; padding: 7px 15px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.07em; color: var(--ink2); cursor: pointer; }
.filters button.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dhead, .drow { display: grid; grid-template-columns: 70px 1fr 155px 135px 120px 250px; gap: 18px; align-items: center; padding: 0 8px; }
.dhead { height: 40px; border-block: 1px solid var(--ink); }
.drow { min-height: 62px; border-bottom: 1px solid var(--hairline); }
.drow .nm { font-size: 16.5px; font-weight: 500; }
.status { font-size: 13px; font-weight: 600; letter-spacing: 0.01em; }
.status.pos { color: var(--pos); } .status.warn { color: var(--warn); } .status.req { color: var(--ink3); } .status.danger { color: var(--danger); }
.days { font-size: 26px; font-weight: 600; }
.days small { font-family: var(--mono); font-size: 11px; color: var(--ink3); letter-spacing: 0.06em; }
.win { font-size: 12.5px; font-weight: 500; color: var(--ink2); letter-spacing: 0.01em; }
.src { font-size: 11.5px; font-weight: 500; color: var(--ink3); letter-spacing: 0.01em; }
.src.flag { color: var(--warn); }

/* ── callout band ─────────────────────────────────────────────────────── */
.callout { border-block: 1px solid var(--ink); padding: 40px 0; display: flex; align-items: baseline; gap: 40px; flex-wrap: wrap; }
.callout b.big { font-size: clamp(44px, 7vw, 68px); font-weight: 600; letter-spacing: -0.02em; flex: none; }
.callout p { font-size: 17px; color: var(--ink2); max-width: 52ch; }

/* ── residency board ──────────────────────────────────────────────────── */
.rrow, .rhead { display: grid; grid-template-columns: 64px 70px 1fr 240px 230px 170px; align-items: center; gap: 18px; padding: 0 8px; }
.rhead { height: 42px; border-bottom: 1px solid var(--hairline2); }
.rrow { min-height: 72px; border-bottom: 1px solid var(--hairline); }
a.rrow:hover { background: rgba(39,65,230,0.03); }
.rrow .rk { font-family: var(--mono); color: var(--ink3); text-align: right; padding-right: 6px; font-size: 14px; }
.rrow .nm { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.dim4 { display: flex; gap: 16px; }
.dim4 div { flex: none; }
.dim4 .k { font-size: 10px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink3); margin-right: 4px; }
.dim4 b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); font-feature-settings: 'tnum'; }
.dim4 .rail { width: 42px; height: 3px; background: var(--hairline); position: relative; margin-top: 5px; }
.dim4 .rail i { position: absolute; inset: 0 auto 0 0; background: var(--ink2); display: block; }
.keep { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.keep small { display: block; font-size: 11px; font-weight: 500; color: var(--ink3); letter-spacing: 0.01em; margin-top: 3px; }

/* residency page: keeps / unlock / path rail */
.keeps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); }
.keeps > div { padding: 26px 26px 28px 8px; border-bottom: 1px solid var(--hairline); }
.keeps > div + div { border-left: 1px solid var(--hairline); padding-left: 26px; }
.keeps small { font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink3); }
.keeps b.n { font-size: 54px; font-weight: 600; letter-spacing: -0.02em; display: block; line-height: 1.05; margin-top: 10px; }
.keeps b.n span { font-size: 20px; font-weight: 500; color: var(--ink2); letter-spacing: 0; }
.keeps p { font-size: 13.5px; color: var(--ink2); margin-top: 8px; }
.keeps .star b.n, .keeps .star small { color: var(--cobalt); }
.urow { display: grid; grid-template-columns: 70px 1fr 160px 260px; gap: 18px; align-items: center; min-height: 62px; border-bottom: 1px solid var(--hairline); padding: 0 8px; }
.uhead { display: grid; grid-template-columns: 70px 1fr 160px 260px; gap: 18px; height: 40px; align-items: center; border-block: 1px solid var(--ink); padding: 0 8px; }
.urow .nm { font-size: 16.5px; font-weight: 500; }
.urow .nm small { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink3); margin-top: 3px; }
.pathrail { position: relative; height: 3px; background: var(--hairline); margin: 46px 90px 60px 8px; }
.pathrail .fill { position: absolute; inset: 0 33% 0 0; background: var(--cobalt); }
.stop { position: absolute; top: -7px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 3px solid var(--cobalt); }
.stop.mut { border-color: var(--hairline2); }
.stoplbl { position: absolute; top: 22px; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.stoplbl b { font-size: 17px; font-weight: 600; display: block; }
.stoplbl span { font-size: 11px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink3); }
.prose { font-size: 15px; color: var(--ink2); max-width: 74ch; line-height: 1.7; }
.prose + .prose { margin-top: 12px; }

/* ── app cross-link: the planet band ──────────────────────────────────── */
.appband { position: relative; overflow: hidden; background: #171612; color: #F1EEE6; border-radius: 20px; padding: 58px 64px; min-height: 400px; display: flex; align-items: center; }
.appband .planet { position: absolute; right: 84px; top: 50%; transform: translateY(-50%); width: 316px; height: 316px; border-radius: 50%; pointer-events: none;
  background-image: radial-gradient(rgba(241,238,230,0.6) 1.8px, transparent 1.8px); background-size: 13px 13px; background-position: 3px 5px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 0 68%, transparent 100%); mask-image: radial-gradient(circle at 50% 50%, black 0 68%, transparent 100%); }
.appband .planet::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background-image: radial-gradient(#6373FF 2.6px, transparent 2.6px); background-size: 13px 13px; background-position: 3px 5px;
  -webkit-mask-image: radial-gradient(ellipse 34% 22% at 40% 32%, black 55%, transparent 78%), radial-gradient(ellipse 20% 14% at 66% 58%, black 55%, transparent 78%), radial-gradient(ellipse 14% 10% at 30% 62%, black 55%, transparent 78%);
  mask-image: radial-gradient(ellipse 34% 22% at 40% 32%, black 55%, transparent 78%), radial-gradient(ellipse 20% 14% at 66% 58%, black 55%, transparent 78%), radial-gradient(ellipse 14% 10% at 30% 62%, black 55%, transparent 78%); }
.appband .planet::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.14), transparent 48%), radial-gradient(circle at 74% 82%, rgba(0,0,0,0.65), transparent 62%);
  box-shadow: inset 0 0 44px rgba(0,0,0,0.55); }
.appband .in { position: relative; max-width: 52%; }
.appband .eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.01em; color: #A7A296; }
.appband h3 { font-size: clamp(24px, 3vw, 34px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; margin-top: 14px; text-wrap: balance; }
.appband p { color: #A7A296; font-size: 16px; max-width: 46ch; margin-top: 12px; }
.appband .btns { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.appband .store { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(241,238,230,0.35); border-radius: 12px; padding: 12px 22px; font-weight: 600; font-size: 14.5px; white-space: nowrap; color: #F1EEE6; }
.appband .store.fill { background: #2741E6; border-color: #2741E6; color: #fff; }
/* store brand marks — inherit currentColor; sized here, never via attrs */
.sic { flex: none; }
.appband .store .sic { width: 16px; height: 16px; }
.appband .store .sic-apple { width: 17px; height: 17px; margin-top: -1px; }
.appband .freeline { font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em; color: #837D70; margin-top: 16px; }

/* ── FAQ rows ─────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--hairline); padding: 20px 8px; }
.faq summary { list-style: none; display: flex; justify-content: space-between; cursor: pointer; font-size: 16.5px; font-weight: 600; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--mono); color: var(--cobalt); font-size: 18px; }
.faq details[open] summary::after { content: '–'; }
.faq p { margin-top: 10px; color: var(--ink2); font-size: 14.5px; max-width: 76ch; }

/* ── footer ───────────────────────────────────────────────────────────── */
.footer { background: var(--ink); color: #A7A296; margin-top: 72px; padding-bottom: 52px; }
.footer .mrzline { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; color: #4d493f; padding: 16px 0; border-bottom: 1px solid #2A2823; white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.footer .in { display: grid; grid-template-columns: 1.1fr 1fr 1.6fr 1.2fr; gap: 40px; align-items: start; padding: 40px 0 44px; font-size: 13.5px; }
.footer b { color: #F1EEE6; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }
.footer .col { min-width: 0; }
.footer .col p { margin-top: 10px; line-height: 2; }
.footer .col p.links a { display: block; }
.footer .col a:hover { color: #F1EEE6; }
.footer .col.colend p.locales { line-height: 1.9; }
.footer .col.colend p.locales a { white-space: nowrap; }

/* ── sections ─────────────────────────────────────────────────────────── */
.sect { padding: 56px 0; }
.sect h2 { font-size: clamp(24px, 3.4vw, 30px); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 6px; }
.sect .sub { color: var(--ink2); font-size: 15.5px; max-width: 68ch; }
.statgrid { display: flex; gap: 44px; flex: none; flex-wrap: wrap; }
.statgrid b { font-size: 38px; font-weight: 600; }
.statgrid .mono { margin-top: 4px; }

/* methodology tables */
.methtable { width: 100%; border-collapse: collapse; margin: 8px 0 4px; font-size: 14px; }
.methtable th, .methtable td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--hairline); }
.methtable th { font-size: 11px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink3); }
.methtable td.mono { font-family: var(--mono); font-size: 13px; }
.formula { font-family: var(--mono); font-size: 14px; background: var(--surface); border: 1px solid var(--hairline2); border-radius: 12px; padding: 16px 18px; margin: 4px 0 14px; color: var(--ink); overflow-x: auto; white-space: nowrap; letter-spacing: 0.02em; -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent); mask-image: linear-gradient(90deg, #000 94%, transparent); }
.tablescroll { overflow-x: auto; }

/* ── Countly dock (bottom-right, dismissable) ─────────────────────────── */
.appdock { position: fixed; right: 20px; bottom: 20px; z-index: 25; width: 280px; background: var(--surface); border: 1px solid var(--hairline2); border-radius: 16px; box-shadow: 0 12px 40px rgba(23,22,18,0.14); padding: 16px; }
.appdock[hidden] { display: none; }
.appdock .dockx { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 1px solid var(--hairline); border-radius: 50%; background: var(--surface); color: var(--ink3); line-height: 1; cursor: pointer; }
.appdock .dockx:hover { color: var(--ink); border-color: var(--hairline2); background: var(--paper); }
.appdock .dockpm { display: none; }
.appdock .dockhead { display: flex; align-items: center; gap: 8px; }
.appdock .dockname { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.appdock .dockh { font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--ink); margin-top: 10px; padding-right: 22px; }
.appdock .dockp { font-size: 12.5px; line-height: 1.45; color: var(--ink2); margin-top: 6px; }
.appdock .docklinks { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.appdock .docklinks a { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--cobalt); }
.appdock .docklinks a .sic { width: 12px; height: 12px; }
.appdock .docklinks a .sic-apple { margin-top: -1px; }
.appdock .docklinks a + a { position: relative; }
.appdock .docklinks a + a::before { content: '·'; position: absolute; left: -9px; color: var(--ink3); font-weight: 400; }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .brow, .bhead { grid-template-columns: 52px 62px 1fr 200px 90px 96px; }
  .brow .asr, .bhead .asr-h { display: none; }
  .rrow, .rhead { grid-template-columns: 52px 62px 1fr 190px 150px; }
  .rrow .dim4, .rhead .dim4-h { display: none; }
  .dhead, .drow { grid-template-columns: 60px 1fr 130px 110px 220px; }
  .dhead .win-h, .drow .win { display: none; }
}
@media (max-width: 900px) {
  .hero2 { grid-template-columns: 1fr; gap: 28px; }
  .appband .in { max-width: 66%; }
  .footer .in { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 760px) {
  :root { --toolbar-h: 56px; }
  .shell { padding: 0 20px; }
  main { padding-bottom: 84px; }
  /* dock is a slim fixed bar on mobile — reserve footer clearance so it never hides the locale row */
  .footer { padding-bottom: 64px; }
  /* single-row header: [logo] [3 seg tabs] [lang menu] — wordmark text hidden, logo alone carries the brand */
  .toolbar { height: var(--toolbar-h); }
  .toolbar .shell { flex-wrap: nowrap; gap: 10px; }
  .toolbar .tsearch { display: none; }
  .brand { order: 0; gap: 0; flex: none; }
  .brand .clogo { width: 30px; height: 30px; }
  .brand .brandtext { display: none; }
  .seg { order: 1; flex: 1; min-width: 0; padding: 3px; }
  .seg a { flex: 1; text-align: center; padding: 6px 8px; font-size: 11.5px; }
  .langwrap { order: 2; flex: none; margin-left: 0; }
  /* ticker → 2×2 grid, pairs never split */
  .ticker .shell { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 12px 20px; }
  .ticker .ti { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ticker .ti.tibc { grid-column: 1 / -1; }
  .ticker b { font-size: 15px; }
  .ticker span { font-size: 11px; }
  .ticker .mlink { grid-column: 1 / -1; margin-left: 0; font-size: 12px; }
  /* neighbour mini-board: drop the rail, keep rank/stamp+flag/name/score */
  .cmprow { grid-template-columns: 26px auto 1fr auto; gap: 12px; }
  .cmprow .rail { display: none; }
  /* dock → compact right-anchored card with adapted (shorter) pitch */
  .appdock { left: auto; right: 10px; bottom: 10px; width: min(300px, calc(100vw - 20px)); border-radius: 14px; padding: 12px 14px; }
  .appdock .clogo.dsm { width: 20px; height: 20px; }
  .appdock .dockname { font-size: 12.5px; }
  .appdock .dockh { margin-top: 8px; padding-right: 16px; font-size: 13px; }
  .appdock .dockp { display: none; }
  .appdock .dockpm { display: block; font-size: 12px; margin-top: 5px; }
  .appdock .docklinks { margin-top: 10px; }
  .appdock .dockx { top: 9px; right: 9px; width: 24px; height: 24px; }
  .head { padding: 32px 0 24px; }
  .dotworld { display: none; }
  .sect { padding: 40px 0; }
  /* board → mobile rows */
  .bhead, .rhead, .dhead, .uhead { display: none; }
  .brow, .rrow { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 2px; }
  .brow .rk, .rrow .rk { width: 22px; font-size: 12px; }
  .brow .nm, .rrow .nm { flex: 1; font-size: 15.5px; }
  .brow .nm small, .rrow .nm small { font-size: 9px; }
  .brow .asr, .brow .doors, .rrow .dim4, .rrow .keep { display: none; }
  .brow .score, .rrow .score { margin-left: auto; gap: 0; flex: none; }
  .brow .score .rail, .rrow .score .rail { display: none; }
  .brow .score b, .rrow .score b { font-size: 19px; width: auto; }
  .brow .tier { display: none; }
  .allrow { flex-wrap: wrap; gap: 8px; }
  .allrow .mono { display: none; }
  /* destination ledger → compact */
  .drow { display: flex; align-items: center; gap: 10px; min-height: 56px; }
  .drow .nm { flex: 1; font-size: 15px; }
  .drow .win, .drow .src { display: none; }
  .drow .days { font-size: 19px; }
  .def { grid-template-columns: 1fr; gap: 8px; }
  .def .f { margin-top: 4px; }
  .keeps { grid-template-columns: 1fr; }
  .keeps > div + div { border-left: 0; padding-left: 8px; }
  .keeps b.n { font-size: 44px; }
  .urow { grid-template-columns: 54px 1fr 110px; }
  .urow .src { display: none; }
  .appband { padding: 34px 24px; min-height: 0; }
  .appband .in { max-width: 78%; }
  .appband .planet { width: 170px; height: 170px; right: -46px; }
  .pathrail { margin: 46px 40px 118px 8px; }
  .pathrail .stoplbl b { font-size: 15px; }
  .pathrail .stoplbl.mid { top: 74px; } /* drop the centred middle label fully below the row-0 labels so it never overlaps the right-aligned last label */
  .statgrid { gap: 20px 28px; flex: 1 1 100%; min-width: 0; }
  .statgrid > div { min-width: 0; }
  .statgrid b { font-size: 30px; }
  .callout { padding: 30px 0; gap: 18px; }
}
@media (max-width: 520px) {
  .footer .in { grid-template-columns: 1fr; gap: 26px; padding: 36px 0 44px; }
}
@media (max-width: 480px) {
  .appband .planet { opacity: 0.5; }
  .appband .in { max-width: 100%; }
}
/* very narrow phones: compress the single-row toolbar tabs so the lang menu never gets pushed off-canvas */
@media (max-width: 360px) {
  .toolbar .shell { gap: 8px; }
  .seg a { padding: 6px 6px; font-size: 11px; letter-spacing: 0; }
}