/* ============================================================================
   eSLIPTA — public resource centre
   Shared design system (warm editorial / institutional). Loaded by every page
   under /get/. Tokens and components are cloned from the original resource
   page; multi-page chrome (drawer nav, page headers, audience cards, stat band,
   resource cards, site-map footer) is added on top. No external requests.
   ========================================================================== */
:root{
  --paper:#f7f5ef; --paper-2:#f0ede3; --surface:#fffefb; --surface-2:#faf8f2; --ink-band:#14312a;
  --ink:#1b1a15; --ink-2:#3b382f; --muted:#5d5949; --faint:#6f6a57;
  --rule:#e4dfd1; --rule-2:#d6d0be;
  --accent:#0f5b4c; --accent-ink:#0a4034; --accent-soft:#e6efe9; --accent-line:#bcd6ce;
  --gold:#8a6a20; --flag:#9c3b2e;
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"SFMono-Regular",ui-monospace,"Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;font-size:16px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:#dfeae4;color:var(--ink)}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.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}
/* A skip link that never becomes visible is only half a skip link. The link existing satisfies 2.4.1 for a
   screen-reader user, but a SIGHTED keyboard user tabs into it, sees nothing at all, and never learns the
   shortcut is offered — which is 2.4.7 Focus Visible. Reveal it while it holds focus, above everything else.
   Both `clip` and `clip-path` are reset: the hiding rule above uses the legacy `clip`, and leaving either in
   place keeps the element clipped to nothing even once it is positioned back on screen. */
.sr-only:focus,.sr-only:focus-visible{position:fixed;top:10px;left:10px;width:auto;height:auto;margin:0;padding:10px 16px;
  clip:auto;clip-path:none;overflow:visible;white-space:nowrap;z-index:100;background:var(--surface);color:var(--ink);
  border:1px solid var(--accent);border-radius:8px;box-shadow:0 10px 30px -12px rgba(20,18,12,.45);font-weight:600;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* ---- document band + masthead nav (multi-page, with drawer) ---------------- */
.band{height:5px;background:var(--accent)}
header.mast{background:var(--paper);border-bottom:1px solid var(--rule-2);position:sticky;top:0;z-index:40}
.mast-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.seal{width:38px;height:38px;flex:none;border:1.5px solid var(--accent);border-radius:2px;display:grid;place-items:center;color:var(--accent);background:var(--surface)}
.seal svg{width:22px;height:22px}
.brand .name{display:block;font-family:var(--serif);font-weight:600;font-size:18px;letter-spacing:.01em;line-height:1.1}
.brand .org{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-top:2px}
nav.top{display:flex;align-items:center;gap:20px}
nav.top a{font-size:13.5px;color:var(--muted);white-space:nowrap;border-bottom:1.5px solid transparent;padding-bottom:3px}
nav.top a:hover{color:var(--accent);border-bottom-color:var(--accent-line)}
nav.top a.active{color:var(--ink);border-bottom-color:var(--accent)}
nav.top a.cta{color:#fff;background:var(--accent);padding:8px 14px;border-radius:6px;font-weight:600;border-bottom:0}
nav.top a.cta:hover{background:var(--accent-ink)}
nav.top .sep{width:1px;height:18px;background:var(--rule-2)}
.burger{display:none;width:44px;height:44px;flex:none;border:1px solid var(--rule-2);border-radius:7px;background:var(--surface);color:var(--ink);align-items:center;justify-content:center;cursor:pointer}
.burger svg{width:22px;height:22px}
/* drawer */
.drawer-scrim{position:fixed;inset:0;background:rgba(20,18,12,.42);z-index:44;opacity:0;visibility:hidden;transition:opacity .28s ease}
.drawer-scrim.open{opacity:1;visibility:visible}
/* A closed drawer must leave the TAB ORDER, not merely leave the screen. Hiding it with transform alone kept
   its close button, six navigation links and its call-to-action focusable on every page: a keyboard user
   tabbed into eight controls they could not see, with the focus ring off-screen entirely on a phone. Automated
   rule sets do not catch this — a translated element still has dimensions and is still "visible" to them — so
   it survived until the page was actually operated with a keyboard. `visibility` removes an element from the
   tab order and from the accessibility tree, and is delayed by the length of the slide so the drawer is still
   painted while it animates shut. Same mechanism the scrim above already uses. */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(88vw,340px);background:var(--paper);z-index:45;border-left:1px solid var(--rule-2);
  transform:translateX(100%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s linear .3s;
  display:flex;flex-direction:column;overflow-y:auto;box-shadow:-18px 0 44px -28px rgba(20,18,12,.5)}
.drawer.open{transform:translateX(0);visibility:visible;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s}
.drawer-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--rule)}
.drawer-hd .dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.drawer-x{width:40px;height:40px;border:1px solid var(--rule-2);border-radius:7px;background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.drawer-x svg{width:20px;height:20px}
.drawer nav{display:flex;flex-direction:column;padding:8px 0}
.drawer nav a{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 20px;font-size:16px;color:var(--ink-2);border-bottom:1px solid var(--rule)}
.drawer nav a .di{width:30px;height:30px;flex:none;border:1px solid var(--rule-2);border-radius:6px;display:grid;place-items:center;color:var(--accent);background:var(--surface-2)}
.drawer nav a .di svg{width:16px;height:16px}
.drawer nav a.active{color:var(--ink);font-weight:600}
.drawer nav a.active .di{background:var(--accent);color:#fff;border-color:var(--accent)}
.drawer-cta{padding:16px 20px 26px;display:grid;gap:10px}
@media(max-width:900px){nav.top{display:none}.burger{display:inline-flex}}

/* ---- section scaffolding --------------------------------------------------- */
section{scroll-margin-top:74px}
.blk{padding:52px 0 8px}
.blk.tight{padding:34px 0 8px}
.sechead{display:flex;align-items:baseline;gap:14px;margin:0 0 22px}
.sechead h2{font-family:var(--serif);font-weight:600;font-size:23px;letter-spacing:-.01em;margin:0;white-space:nowrap;min-width:0}
/* The heading keeps its "title — hairline" rule on a wide screen, but `nowrap` cannot hold on a phone:
   a long heading then pushes the whole document wider than the viewport. It was invisible in testing
   because `body{overflow-x:hidden}` swallows the scrollbar, so a scrollX probe reads 0 on a page that
   genuinely overflows. Measured, not assumed: 518px of document inside a 390px viewport. */
@media(max-width:760px){
  .sechead{flex-wrap:wrap;gap:9px}
  .sechead h2{white-space:normal;flex:1 1 100%;font-size:21px;line-height:1.25}
  .sechead .line{flex:1 1 100%}
}
.sechead .line{flex:1;border-top:1px solid var(--rule)}
.sechead .idx{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:600}
.lead-note{font-size:14.5px;color:var(--muted);max-width:66ch;line-height:1.62;margin:0 0 24px}

/* ---- buttons --------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:6px;font-weight:600;font-size:15px;cursor:pointer;border:1px solid transparent;transition:background .14s ease,border-color .14s,color .14s}
.btn svg{width:17px;height:17px;flex:none}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-ink)}
.btn-line{background:var(--surface);color:var(--ink);border-color:var(--rule-2)}.btn-line:hover{border-color:var(--accent);color:var(--accent)}
.btn-ghost{background:transparent;color:var(--accent)}.btn-ghost:hover{background:var(--accent-soft)}
.btn.sm{height:40px;font-size:13.5px;padding:0 15px;border-radius:5px}
.btn.block{width:100%;justify-content:center}
.cta-row{margin-top:22px;display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.apk-note{font-size:12.5px;color:var(--faint);font-family:var(--mono)}

/* ---- home hero (two-column editorial) ------------------------------------- */
.hero{padding:46px 0 40px;border-bottom:1px solid var(--rule)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
@media(min-width:920px){.hero-grid{grid-template-columns:1.04fr .96fr;gap:52px}}
.hero-lead{min-width:0}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4.2vw,49px);line-height:1.04;letter-spacing:-.014em;margin:15px 0 0;max-width:19ch;color:var(--ink)}
.lede{margin:18px 0 0;font-size:clamp(15.5px,1.35vw,17.5px);color:var(--ink-2);max-width:54ch;line-height:1.62}
.lede b{font-weight:600;color:var(--ink)}
.hero .cta-row{margin-top:24px}
.provided{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px}
.provided .plabel{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.logostrip{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logochip{background:#fff;border:1px solid var(--rule-2);border-radius:5px;padding:8px 12px;display:flex;align-items:center;height:46px}
.logochip img{height:26px;width:auto}
.logochip.wb img{height:30px}
.hero-visual{min-width:0}
.hero-shot{margin:0;border:1px solid var(--rule-2);border-radius:10px;overflow:hidden;background:var(--surface);box-shadow:0 24px 52px -30px rgba(20,18,12,.55),0 4px 14px -9px rgba(20,18,12,.16)}
.hero-shot .chrome{display:flex;align-items:center;gap:6px;padding:10px 13px;background:var(--surface-2);border-bottom:1px solid var(--rule)}
.hero-shot .chrome i{width:9px;height:9px;border-radius:50%;background:var(--rule-2);display:block}
.hero-shot .chrome .u{margin-left:8px;font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-shot img{width:100%;height:auto;display:block}

/* ---- interior page header -------------------------------------------------- */
.pagehead{background:var(--surface);border-bottom:1px solid var(--rule-2)}
.pagehead .wrap{padding:26px 22px 30px}
.crumb{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);flex-wrap:wrap}
.crumb a{color:var(--muted)}.crumb a:hover{color:var(--accent)}
.crumb .s{color:var(--rule-2)}
.pagehead h1{font-size:clamp(28px,3.4vw,40px);margin:16px 0 0;max-width:22ch}
.pagehead .lede{margin-top:14px}
.pagehead .cta-row{margin-top:22px}

/* ---- key-figures stat band ------------------------------------------------- */
.statband{border:1px solid var(--rule-2);border-radius:5px;background:var(--surface);overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
@media(min-width:760px){.statband{grid-template-columns:repeat(4,1fr)}}
.statband .stat{padding:20px 22px;border-top:1px solid var(--rule);border-left:1px solid var(--rule);min-width:0}
.statband .stat:nth-child(-n+2){border-top:0}
.statband .stat:nth-child(odd){border-left:0}
@media(min-width:760px){.statband .stat{border-top:0}.statband .stat:nth-child(4n+1){border-left:0}.statband .stat:nth-child(odd){border-left:1px solid var(--rule)}.statband .stat:nth-child(4n+1){border-left:0}}
.statband .n{font-family:var(--serif);font-weight:600;font-size:29px;letter-spacing:-.02em;color:var(--accent);line-height:1}
.statband .l{font-size:13px;color:var(--ink-2);margin-top:8px;line-height:1.42}
.statband .src{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-top:8px}

/* ---- audience cards (home) ------------------------------------------------- */
.audience{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.audience{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.audience{grid-template-columns:1fr 1fr 1fr 1fr}}
.aud{display:flex;flex-direction:column;border:1px solid var(--rule-2);border-radius:8px;background:var(--surface);padding:20px 20px 18px;transition:border-color .14s,box-shadow .14s;min-width:0}
.aud:hover{border-color:var(--accent-line);box-shadow:0 12px 26px -20px rgba(20,18,12,.35)}
.aud .ai{width:38px;height:38px;flex:none;border:1px solid var(--rule-2);border-radius:8px;display:grid;place-items:center;color:var(--accent);background:var(--surface-2);margin-bottom:14px}
.aud .ai svg{width:20px;height:20px}
.aud .who{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.aud h3{font-family:var(--serif);font-size:19px;font-weight:600;margin:4px 0 8px;letter-spacing:-.01em}
.aud p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0 0 14px;flex:1}
.aud .go{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-weight:600;display:inline-flex;align-items:center;gap:7px}
.aud .go svg{width:14px;height:14px;transition:transform .16s}
.aud:hover .go svg{transform:translateX(3px)}

/* ---- generic prose + two-column ------------------------------------------- */
.prose p{font-size:15.5px;color:var(--ink-2);line-height:1.68;margin:0 0 14px;max-width:64ch}
.prose p b{color:var(--ink);font-weight:600}
.prose h3{font-family:var(--serif);font-size:20px;font-weight:600;margin:26px 0 10px;letter-spacing:-.01em}
.cols2{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:860px){.cols2{grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}}
.featlist{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:14px}
.featlist li{display:flex;gap:12px;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.featlist .fi{width:30px;height:30px;flex:none;border:1px solid var(--rule-2);border-radius:5px;display:grid;place-items:center;color:var(--accent);background:var(--surface-2)}
.featlist b{color:var(--ink);font-weight:600}

/* ---- feature cards (grid of capability cards) ----------------------------- */
.cardgrid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.cardgrid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.cardgrid.three{grid-template-columns:1fr 1fr 1fr}}
.fcard{border:1px solid var(--rule-2);border-radius:8px;background:var(--surface);padding:20px 20px 18px;min-width:0}
.fcard .fi{width:34px;height:34px;flex:none;border:1px solid var(--rule-2);border-radius:7px;display:grid;place-items:center;color:var(--accent);background:var(--surface-2);margin-bottom:13px}
.fcard .fi svg{width:18px;height:18px}
.fcard h3{font-family:var(--serif);font-size:18px;font-weight:600;margin:0 0 7px;letter-spacing:-.01em}
.fcard p{font-size:13.5px;color:var(--ink-2);line-height:1.58;margin:0}

/* ---- screenshot gallery ---------------------------------------------------- */
.shotgrid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:760px){.shotgrid{grid-template-columns:1fr 1fr}}
figure.shot{margin:0;border:1px solid var(--rule-2);border-radius:8px;overflow:hidden;background:var(--surface);cursor:zoom-in}
figure.shot .chrome{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--surface-2);border-bottom:1px solid var(--rule)}
figure.shot .chrome i{width:9px;height:9px;border-radius:50%;background:var(--rule-2);display:block}
figure.shot .chrome .u{margin-left:8px;font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.02em}
figure.shot img{width:100%;height:auto;display:block}
figure.shot figcaption{padding:12px 15px;font-size:13.5px;color:var(--muted);border-top:1px solid var(--rule)}
figure.shot figcaption b{color:var(--ink);font-weight:600;font-family:var(--serif);font-size:15px}
.phonerow{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin-top:22px}
figure.phone{margin:0;width:220px;max-width:44vw;border:6px solid #17150f;border-radius:26px;overflow:hidden;background:#17150f;box-shadow:0 8px 24px -14px rgba(0,0,0,.4)}
figure.phone img{width:100%;border-radius:19px;cursor:zoom-in}
figure.phone figcaption{color:#cfc9ba;font-size:11.5px;text-align:center;padding:8px 4px 2px;font-family:var(--mono);letter-spacing:.04em}

/* ---- numbered flow ledger -------------------------------------------------- */
ol.flow{list-style:none;counter-reset:f;margin:0;padding:0;display:grid;gap:0;border:1px solid var(--rule-2);border-radius:4px;overflow:hidden;background:var(--surface)}
ol.flow li{counter-increment:f;display:grid;grid-template-columns:auto 1fr;gap:18px;padding:18px 22px;border-top:1px solid var(--rule)}
ol.flow li:first-child{border-top:0}
ol.flow li::before{content:counter(f,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:600;padding-top:3px;letter-spacing:.04em}
ol.flow .ft{font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:-.01em}
ol.flow .fd{font-size:14px;color:var(--muted);margin-top:3px;line-height:1.55;max-width:70ch}
ol.flow .frole{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-line);border-radius:3px;padding:1px 7px;display:inline-block;margin-top:8px}

/* ---- context / concept cards ---------------------------------------------- */
.trigrid{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--rule-2);border-radius:4px;background:var(--surface);overflow:hidden}
@media(min-width:720px){.trigrid{grid-template-columns:1fr 1fr 1fr}}
.tricol{padding:22px;border-top:1px solid var(--rule)}
@media(min-width:720px){.tricol{border-top:0;border-left:1px solid var(--rule)}.tricol:first-child{border-left:0}}
@media(max-width:719px){.tricol:first-child{border-top:0}}
.tricol .h{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600}
.tricol .t{font-family:var(--serif);font-size:18px;font-weight:600;margin:9px 0 8px}
.tricol p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.62}

/* ---- programme band (dark) ------------------------------------------------- */
.programme{background:var(--ink-band);color:#eef2ef}
.programme.mt{margin-top:52px}
.programme .wrap{padding:48px 22px 44px}
.programme .kicker{color:#8fc7b8}
.programme h2{font-family:var(--serif);font-weight:600;font-size:26px;margin:14px 0 0;color:#fff;letter-spacing:-.01em}
.programme .pintro{font-size:15px;color:#d5ded9;line-height:1.62;max-width:70ch;margin:16px 0 0}
.porg{display:grid;grid-template-columns:1fr;gap:26px;margin-top:30px}
@media(min-width:820px){.porg{grid-template-columns:1fr 1fr}}
.pcard{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:22px 24px}
.pcard .ph{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.pcard .ph .logobox{background:#fff;border-radius:4px;padding:7px 10px;height:44px;display:flex;align-items:center}
.pcard .ph .logobox img{height:26px;width:auto}
.pcard .ph .logobox.wb img{height:30px}
.pcard h3{font-family:var(--serif);font-size:19px;font-weight:600;margin:0;color:#fff}
.pcard .sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#8fc7b8;margin-top:2px}
.pcard p{font-size:14px;line-height:1.62;color:#d5ded9;margin:0 0 12px}
.pcard p:last-child{margin-bottom:0}
.pcard .facts{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:9px}
.pcard .facts li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:13.5px;color:#d5ded9;line-height:1.45}
.pcard .facts .fk{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#7fb3a5;padding-top:2px}
.members{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.members span{font-size:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:4px;padding:3px 9px;color:#eef2ef}
.members span.obs{color:#c9d3ce;font-style:italic;border-style:dashed}
.pnote{margin-top:26px;font-size:12.5px;color:var(--muted);line-height:1.6;max-width:80ch}
.pnote a{color:var(--accent);text-decoration:underline}

/* ---- install (get) --------------------------------------------------------- */
.reco{display:grid;grid-template-columns:1fr;border:1px solid var(--rule-2);border-left:3px solid var(--accent);border-radius:4px;background:var(--surface);overflow:hidden}
@media(min-width:760px){.reco{grid-template-columns:1.55fr .95fr}}
.reco-main{padding:26px 28px;min-width:0}
.reco .forwho{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600}
.reco h3{font-family:var(--serif);font-weight:600;font-size:25px;letter-spacing:-.01em;margin:11px 0 3px}
.reco .tag{color:var(--muted);font-size:14.5px}
.reco-qr{border-top:1px solid var(--rule);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;padding:24px;background:var(--surface-2)}
@media(min-width:760px){.reco-qr{border-top:0;border-left:1px solid var(--rule)}}
.qrframe{background:#fff;border:1px solid var(--rule-2);padding:12px;border-radius:3px}
.qrframe img{width:150px;height:150px;image-rendering:pixelated}
.qrcap{font-size:12px;color:var(--faint);text-align:center;max-width:22ch;line-height:1.4}
ol.steps{margin:20px 0 0;padding:0;list-style:none;counter-reset:s}
ol.steps li{position:relative;padding:0 0 13px 40px;font-size:14.5px;color:var(--ink-2)}
ol.steps li:last-child{padding-bottom:0}
ol.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:-2px;font-family:var(--serif);font-size:19px;font-weight:600;color:var(--accent);width:26px;text-align:center}
ol.steps li::after{content:"";position:absolute;left:12px;top:22px;bottom:6px;width:1px;background:var(--rule)}
ol.steps li:last-child::after{display:none}
.ptable{border:1px solid var(--rule-2);border-radius:4px;overflow:hidden;background:var(--surface);margin-top:18px}
.prow{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:16px 18px;border-top:1px solid var(--rule)}
.prow:first-child{border-top:0}
.prow .pmark{width:40px;height:40px;flex:none;border:1px solid var(--rule-2);border-radius:4px;display:grid;place-items:center;color:var(--accent);background:var(--surface-2)}
.prow .pmark svg{width:21px;height:21px}
.prow .pbody{min-width:0}
.prow .pname{font-family:var(--serif);font-size:17px;font-weight:600;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.prow .pnat{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-line);border-radius:3px;padding:1px 6px}
.prow .ptag{color:var(--muted);font-size:13px;margin-top:2px}
.prow .pget{white-space:nowrap}
@media(max-width:560px){.prow{grid-template-columns:auto 1fr}.prow .pget{grid-column:1/-1;margin-top:2px}}

/* full multi-QR strip (download page) */
.qrwall{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px}
@media(min-width:640px){.qrwall{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.qrwall{grid-template-columns:repeat(3,1fr)}}
.qrcard{border:1px solid var(--rule-2);border-radius:8px;background:var(--surface);padding:22px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;min-width:0}
.qrcard h3{font-family:var(--serif);font-size:18px;font-weight:600;margin:0}
.qrcard p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.55;max-width:30ch}
.qrcard .btn{margin-top:2px}
.qrcard .qrframe img{width:118px;height:118px}
.qrcard .qb{min-width:0}
.qrcard .qb .pname{font-family:var(--serif);font-size:17px;font-weight:600;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.qrcard .qb .ptag{color:var(--muted);font-size:13px;margin:3px 0 10px}

/* ---- updates explainer ----------------------------------------------------- */
.updgrid{display:grid;grid-template-columns:1fr;border:1px solid var(--rule-2);border-radius:4px;background:var(--surface);overflow:hidden}
@media(min-width:720px){.updgrid{grid-template-columns:1fr 1fr 1fr}}
.updcol{padding:22px 22px 24px;border-top:1px solid var(--rule)}
@media(min-width:720px){.updcol{border-top:0;border-left:1px solid var(--rule)}.updcol:first-child{border-left:0}}
@media(max-width:719px){.updcol:first-child{border-top:0}}
.updcol .h{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600}
.updcol .t{font-family:var(--serif);font-size:18px;font-weight:600;margin:9px 0 8px}
.updcol p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.62}

/* ---- release specimen ------------------------------------------------------ */
.specimen{margin-top:28px;display:flex;flex-wrap:wrap;border:1px solid var(--rule-2);border-radius:4px;background:var(--surface);overflow:hidden}
.spec{padding:13px 20px 12px;min-width:0;flex:1 1 auto;border-right:1px solid var(--rule)}
.spec:last-child{border-right:0}
.spec .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.spec .v{font-family:var(--mono);font-size:15px;color:var(--ink);margin-top:5px}
.spec .v.big{font-size:17px}
.spec .v .flagdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:1px}
@media(max-width:640px){.spec{flex:1 1 50%;border-bottom:1px solid var(--rule)}}

/* ---- changelog + sources --------------------------------------------------- */
.changelog{border:1px solid var(--rule-2);border-radius:4px;background:var(--surface);padding:22px 24px}
.changelog .top{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.changelog .rel{font-family:var(--serif);font-size:18px;font-weight:600}
.changelog ul{margin:15px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.changelog li{position:relative;padding-left:22px;font-size:14.5px;color:var(--ink-2);line-height:1.55}
.changelog li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;background:var(--accent);border-radius:1px;transform:rotate(45deg)}
.skeleton{color:var(--faint)}
.sources{margin-top:26px}
.sources h3{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 12px}
.sources ol{margin:0;padding-left:20px;display:grid;gap:8px}
.sources li{font-size:12.5px;color:var(--muted);line-height:1.5}
.sources a{font-family:var(--mono);color:var(--accent);word-break:break-all}
.sources a:hover{text-decoration:underline}
.logsrc{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:860px){.logsrc{grid-template-columns:1.12fr .88fr;gap:40px;align-items:start}}
.logsrc .sources{margin-top:0}

/* ---- resource library (docs) ---------------------------------------------- */
.doclist{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--rule-2);border-radius:6px;background:var(--surface);overflow:hidden}
.docrow{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:18px 20px;border-top:1px solid var(--rule)}
.docrow:first-child{border-top:0}
.docrow .dmark{width:42px;height:42px;flex:none;border:1px solid var(--rule-2);border-radius:6px;display:grid;place-items:center;color:var(--accent);background:var(--surface-2)}
.docrow .dmark svg{width:21px;height:21px}
.docrow .dbody{min-width:0}
.docrow .dpub{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.docrow .dtitle{font-family:var(--serif);font-size:17px;font-weight:600;margin:3px 0 4px;letter-spacing:-.01em;line-height:1.25}
.docrow .ddesc{font-size:13.5px;color:var(--muted);line-height:1.5;max-width:74ch}
.docrow .dget{white-space:nowrap}
@media(max-width:620px){.docrow{grid-template-columns:auto 1fr}.docrow .dget{grid-column:1/-1;margin-top:2px}}

/* ---- callout notice -------------------------------------------------------- */
.notice{border:1px solid var(--rule-2);border-left:3px solid var(--gold);border-radius:4px;background:var(--surface);padding:18px 22px;font-size:14px;color:var(--ink-2);line-height:1.6}
.notice b{color:var(--ink);font-weight:600}
.notice.accent{border-left-color:var(--accent)}

/* ---- cross-page next nav --------------------------------------------------- */
.pagenav{display:grid;grid-template-columns:1fr;gap:14px;margin-top:44px}
@media(min-width:680px){.pagenav{grid-template-columns:1fr 1fr}}
.pnl{border:1px solid var(--rule-2);border-radius:8px;background:var(--surface);padding:18px 20px;transition:border-color .14s}
.pnl:hover{border-color:var(--accent-line)}
.pnl .dir{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.pnl .tt{font-family:var(--serif);font-size:18px;font-weight:600;margin-top:5px;color:var(--ink)}
.pnl.next{text-align:right}

/* ---- footer (site map) ----------------------------------------------------- */
footer.site{margin-top:6px;border-top:2px solid var(--accent);padding:34px 0 60px;background:var(--paper)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot-brand .foot-logos{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.foot-brand .foot-logos .logochip{height:44px}
.foot-brand p{font-size:13px;color:var(--muted);line-height:1.6;max-width:42ch;margin:0}
.foot-col h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 12px}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot-col a{font-size:13.5px;color:var(--ink-2)}
.foot-col a:hover{color:var(--accent)}
.foot-in{margin-top:28px;padding-top:18px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--muted)}
.foot-in .stamp{font-family:var(--mono);color:var(--faint)}

/* ---- lightbox + live-update toast ----------------------------------------- */
.lb{position:fixed;inset:0;z-index:60;background:rgba(20,18,12,.9);display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.lb.show{display:flex}
.lb img{max-width:96vw;max-height:92vh;width:auto;border-radius:6px;box-shadow:0 20px 60px -20px rgba(0,0,0,.7)}
.toast{position:fixed;left:22px;right:22px;bottom:20px;max-width:520px;margin:0 auto;z-index:50;background:var(--ink);color:var(--paper);padding:13px 16px;border-radius:6px;display:flex;gap:14px;align-items:center;justify-content:space-between;box-shadow:0 10px 30px -12px rgba(0,0,0,.5);transform:translateY(160%);transition:transform .38s cubic-bezier(.2,.8,.2,1);font-size:13.5px}
.toast.show{transform:translateY(0)}
.toast b{font-weight:600}.toast a{color:#fff;text-decoration:underline;font-weight:600;white-space:nowrap}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Data tables. `.ptable` above is a CONTAINER style for the platform rows, not a table style — using it
   on a real <table> leaves cells with no padding and no separators. These are real tables: the star
   bands, the twelve sections, the roles, and what each answer does to the score.
   The wrapper is load-bearing on a phone: a wide table must scroll INSIDE its own box, never take the
   page sideways with it. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule-2);border-radius:4px;margin-top:18px;min-width:0;
  /* A table that scrolls inside its own box is only usable if the reader can tell there is more to the
     right. These four layers are the CSS-only scroll shadow: two paper-coloured covers that scroll WITH
     the content (`local`) and two soft edges pinned to the box (`scroll`). Where the content is flush
     against an edge the cover hides the shadow; where it is scrolled away the shadow shows. No script,
     and it degrades to a plain panel if gradients are unsupported. */
  background-color:var(--surface);
  background-image:
    linear-gradient(to right,var(--surface) 40%,rgba(255,254,251,0)),
    linear-gradient(to left,var(--surface) 40%,rgba(255,254,251,0)),
    radial-gradient(farthest-side at 0 50%,rgba(20,18,12,.16),rgba(20,18,12,0)),
    radial-gradient(farthest-side at 100% 50%,rgba(20,18,12,.16),rgba(20,18,12,0));
  background-position:left center,right center,left center,right center;
  background-size:44px 100%,44px 100%,15px 100%,15px 100%;
  background-repeat:no-repeat;
  background-attachment:local,local,scroll,scroll}
.dtable{width:100%;border-collapse:collapse;font-size:14px;min-width:0}
.dtable caption{text-align:left;padding:12px 16px;color:var(--muted);font-size:13px}
.dtable th,.dtable td{padding:11px 16px;text-align:left;border-top:1px solid var(--rule);vertical-align:top;line-height:1.5}
.dtable thead th{border-top:0;background:var(--surface-2);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600;white-space:nowrap}
.dtable tbody tr:first-child th,.dtable tbody tr:first-child td{border-top:1px solid var(--rule-2)}
.dtable tbody th{font-weight:600;color:var(--ink);white-space:nowrap}
.dtable td{color:var(--ink-2)}

/* --- language switcher (English · Français · Português) ------------------
   .on   = the page's own language; .pref = the locale site.js resolved for the visitor when it differs
   from the page (a hint only — the page never redirects on its own). ------------------------------ */
nav.top .lang{display:flex;align-items:center;gap:10px}
nav.top .lang a{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
nav.top .lang a.on{color:var(--ink);border-bottom-color:var(--accent)}
nav.top .lang a.pref{color:var(--accent);border-bottom-color:var(--accent-line)}
.drawer-lang{display:flex;gap:8px;padding:12px 20px;border-bottom:1px solid var(--rule)}
.drawer-lang a{flex:1;text-align:center;padding:9px 6px;border:1px solid var(--rule-2);border-radius:6px;font-size:13px;color:var(--ink-2)}
.drawer-lang a.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.drawer-lang a.pref{border-color:var(--accent);color:var(--accent)}