/* Bak site — shared stylesheet (landing in both languages, 404, and later privacy/support).
   Brand: TABLO, brand/BRAND.md (11 Oct 2026). Every colour below is a BRAND §4 token; contrast pairs from that table:
   Graphite on Chalk 14.60 · Chalk on Graphite 14.60 · Amber on Graphite 8.93 · Ink2 #5E5A53 on Chalk 6.13 ·
   Dim #B5B1AA on Graphite 7.65. Amber appears ONLY on Graphite (lit figures, small accents): never text, icons or a
   field on light grounds, and never a field with Graphite type on it (BRAND §4, §7, §8). Links: Graphite + underline. */

@font-face{font-family:"Fira Sans Condensed";src:url(fonts/FiraSansCondensed-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Fira Sans";src:url(fonts/FiraSans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fira Sans";src:url(fonts/FiraSans-500.woff2) format("woff2");font-weight:500 700;font-display:swap}

:root{
  --graphite:#1E2023;--amber:#FFB020;--amber-text:#8A5300;--chalk:#F4F2EE;--unlit:#34383E;--white:#FFFFFF;
  --ink2:#5E5A53;--dim:#B5B1AA;--line:#DCD8D0;
  --display:"Fira Sans Condensed","Fira Sans",system-ui,sans-serif;
  --text:"Fira Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1200px;--gutter:16px;
  --s-sec:clamp(56px,6vw,96px);   /* section padding: one tier for every section */
  --s-grp:clamp(24px,3vw,40px);   /* group gap */
  --s-in:16px;                    /* in-group gap */
}
@media (min-width:900px){:root{--gutter:32px}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font:18px/1.55 var(--text);color:var(--graphite);background:var(--chalk)}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.num{font-variant-numeric:tabular-nums lining-nums}
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip:focus{width:auto;height:auto;clip:auto;clip-path:none;left:16px;top:8px;z-index:30;min-height:48px;display:inline-flex;align-items:center;padding:0 14px;background:var(--white);color:var(--graphite)}
:focus-visible{outline:3px solid currentColor;outline-offset:3px;border-radius:4px}

/* ── header ─────────────────────────────────────────────────────────────── */
.hd{position:sticky;top:0;z-index:20;background:var(--chalk);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:10px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:9px;min-height:48px;text-decoration:none;color:var(--graphite);flex:0 0 auto}
.brand .tile{width:34px;height:34px}
.brand .wm{height:22px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav>a{min-height:48px;display:inline-flex;align-items:center;text-decoration:none;font-weight:500;font-size:16px;white-space:nowrap}
.nav>a:hover{text-decoration:underline}
.nav>a.wide,.nav>a.dl{display:none}
.nav>a.lang{justify-content:center;min-width:48px;padding:0 10px;border:1px solid var(--line);border-radius:12px;min-height:48px;font-size:15px;align-self:center}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;min-height:48px;display:inline-flex;align-items:center;padding:0 14px;border-radius:12px;
  font-weight:500;font-size:16px;border:2px solid var(--graphite)}
.menu summary::-webkit-details-marker{display:none}
.menu ul{position:absolute;right:0;top:56px;margin:0;padding:8px;list-style:none;min-width:260px;border-radius:14px;
  background:var(--white);box-shadow:0 0 0 1px var(--line),0 14px 34px rgba(30,32,35,.16)}
.menu li a{display:flex;align-items:center;min-height:48px;padding:0 12px;text-decoration:none;font-size:17px;border-radius:8px}
.menu li a:hover{background:var(--chalk)}
@media (min-width:960px){.nav{gap:22px}.nav>a.wide{display:inline-flex}.nav>a.dl{display:inline-flex;padding:0 16px;border-radius:12px;background:var(--graphite);color:var(--chalk)}.nav>a.dl:hover{text-decoration:none;background:#2B2E32}.menu{display:none}}

/* ── buttons / store CTA ────────────────────────────────────────────────── */
.cta-row{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 26px;border-radius:14px;text-decoration:none;
  font:700 21px/1 var(--display);letter-spacing:.005em;background:var(--graphite);color:var(--chalk)}
a.btn:hover{background:#2B2E32}
a.btn:active{transform:translateY(1px)}
.btn.soon{cursor:default}
.badge{display:inline-block;line-height:0;padding:0}  /* Apple: clear space ≥ ¼ badge height around it (margins below) */
.badge img{height:56px;width:auto}
.cta-row .badge{margin:14px 14px 14px 0}
.cta2{min-height:48px;display:inline-flex;align-items:center;font-size:18px}
.small{font-size:16px;color:var(--ink2);max-width:60ch}
.small b{font-weight:400;color:var(--graphite)}
.on-dark .btn{background:var(--chalk);color:var(--graphite)}
.on-dark a.btn:hover{background:var(--white)}
.on-dark .small{color:var(--dim)}.on-dark .small b{color:var(--chalk)}

/* ── media: real app captures (placeholder footage is labelled) ─────────── */
.shot{position:relative}
.shot>img,.shot>video{border-radius:28px;width:100%}
.tag{position:absolute;left:12px;top:12px;z-index:2;padding:4px 9px;border-radius:7px;background:rgba(30,32,35,.88);color:var(--chalk);
  font:500 13px/1.25 var(--text)}
.still{display:none}
@media (prefers-reduced-motion:reduce){video.auto{display:none}.still{display:block}}

/* ── hero (D: copy on Chalk, the real app moving on a Graphite stage) ───── */
.hero{display:grid;background:var(--chalk)}
.hero .copy{padding:28px var(--gutter) 36px}
.hero h1{font-size:clamp(40px,3.4vw + 22px,80px);max-width:14ch}
.hero .lead{margin-top:16px;font-size:18px;max-width:40ch}
.hero .cta{margin-top:24px;display:grid;gap:10px}
.stage{background:var(--graphite);display:flex;justify-content:center;align-items:center;padding:32px var(--gutter)}
.stage .shot{width:min(66vw,280px)}
.stage .shot>img,.stage .shot>video{border:3px solid var(--unlit)}
@media (min-width:900px){
  .hero{grid-template-columns:1fr 1fr;min-height:min(calc(100vh - 65px),860px)}
  .hero .copy{padding:48px 56px 48px max(var(--gutter),calc((100vw - var(--wrap))/2 + var(--gutter)));align-self:center}
  .stage{padding:48px}.stage .shot{width:300px}
}
@media (prefers-reduced-motion:no-preference){
  .enter>*{animation:rise .7s cubic-bezier(.22,1,.36,1) both}
  .enter>*:nth-child(2){animation-delay:.08s}.enter>*:nth-child(3){animation-delay:.16s}.enter>*:nth-child(4){animation-delay:.24s}
  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}

/* ── sections ───────────────────────────────────────────────────────────── */
.sec{padding:var(--s-sec) 0}
.sec h2{font-size:clamp(32px,2.2vw + 22px,56px);max-width:20ch}
.sec .sub{margin-top:12px;font-size:19px;color:var(--ink2);max-width:52ch}
.dark{background:var(--graphite);color:var(--chalk)}
.dark .sub{color:var(--dim)}
.note{margin-top:var(--s-grp);font-size:16px;color:var(--ink2);max-width:62ch}

/* step number: a small display panel — Amber figure on Graphite (never an Amber field) */
.chip{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:11px;background:var(--graphite);color:var(--amber);
  font:700 30px/1 var(--display);transform:skewX(-7deg);flex:0 0 auto}

/* walkthrough: per-step videos (always works); with JS on wide screens, one sticky rail plays the step in view */
.walk{display:grid;gap:var(--s-grp);margin-top:var(--s-grp)}
.st{display:grid;gap:var(--s-in)}
.st .head{display:flex;align-items:center;gap:16px}
.st h3{font-size:clamp(26px,1vw + 20px,34px)}
.st p{font-size:19px;max-width:44ch}
.st .shot{max-width:300px}
.st .shot>video,.st .shot>img{border-radius:24px;background:var(--graphite)}
.rail{display:none}
@media (min-width:900px){
  .walk{grid-template-columns:1fr 1fr 1fr;gap:32px}
  .st .shot{max-width:none}
  .js .walk{grid-template-columns:400px 1fr;gap:64px;align-items:start}
  .js .rail{display:block;position:sticky;top:96px;background:var(--graphite);border-radius:32px;padding:28px 50px}
  .js .rail .shot>video,.js .rail .shot>img{border-radius:24px}
  .js .st{padding:44px 0;border-top:1px solid var(--line)}
  .js .st:first-child{border-top:0;padding-top:8px}
  .js .st .shot{display:none}
}

/* the station card, explained (Graphite band) */
.cardrow{display:grid;gap:var(--s-grp);margin-top:var(--s-grp)}
.cardrow .shot{max-width:330px}
.cardrow .shot>img{border:3px solid var(--unlit)}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.facts li{display:grid;grid-template-columns:12px 1fr;gap:16px;align-items:start}
.facts li::before{content:"";width:10px;height:10px;margin-top:10px;background:var(--amber);transform:skewX(-7deg)}
.facts b{display:block;font:700 23px/1.2 var(--display);color:var(--chalk);margin-bottom:2px}
.facts span{color:var(--dim)}
.dark a{color:var(--chalk)}
@media (min-width:900px){.cardrow{grid-template-columns:340px 1fr;gap:64px;align-items:center}.facts{grid-template-columns:1fr 1fr;column-gap:40px}}

/* honesty ledger (from direction E): the rules as figures — Fira Condensed tabular figures in Graphite on Chalk.
   Not seven-segment figures: the segment figure is the mark and is never re-lit as other figures (BRAND §8). */
.ledger{list-style:none;margin:var(--s-grp) 0 0;padding:0;display:grid}
.ledger li{display:grid;grid-template-columns:minmax(118px,170px) 1fr;gap:20px;align-items:baseline;padding:24px 0;border-top:1px solid var(--line)}
.ledger .fig{font:700 clamp(44px,3vw + 28px,64px)/1 var(--display);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em}
.ledger .fig small{display:block;margin-top:6px;font:700 17px/1.2 var(--display);letter-spacing:.02em;color:var(--ink2)}
.ledger .fig.word{font-size:clamp(30px,1.6vw + 22px,40px)}
.ledger h3{font-size:24px;margin-bottom:6px}
.ledger p{max-width:52ch}
.ledger .tel{white-space:nowrap}
a.tel{white-space:nowrap}
.ledger li.stack{grid-template-columns:1fr;gap:8px}
.data{margin-top:var(--s-grp);font-size:16px;color:var(--ink2);max-width:62ch}
@media (max-width:640px){.ledger li{grid-template-columns:1fr;gap:8px}.ledger .fig small{display:inline;margin:0 0 0 8px}}
@media (min-width:900px){.ledger{grid-template-columns:1fr 1fr;column-gap:64px}.ledger li{grid-template-columns:180px 1fr}}

/* FAQ — <details>, readable with JS off */
.faq{max-width:840px;margin-top:var(--s-grp)}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;min-height:56px;display:flex;align-items:center;gap:14px;font-weight:500;font-size:19px;padding:10px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";font:700 26px/1 var(--display);width:20px;flex:0 0 auto}
.faq details[open] summary::before{content:"–"}
.faq details p{padding:0 0 20px 34px;max-width:62ch}

/* closing CTA (Graphite band) */
.end h2{margin-bottom:var(--s-grp)}

/* ── footer ─────────────────────────────────────────────────────────────── */
.ft{padding:44px 0 64px;font-size:16px;color:var(--ink2);border-top:1px solid var(--line);background:var(--chalk)}
.ft .brand{margin-bottom:8px}
.ft p{max-width:62ch}
.fnav{display:flex;flex-wrap:wrap;gap:0 24px;margin:12px 0}
.fnav a{color:var(--graphite);min-height:48px;display:inline-flex;align-items:center}
.cred{margin-top:8px}
.cred a{color:var(--graphite)}

/* ── documents (privacy, support): long text, restyled later — keeps their own text verbatim ───────────── */
.doc{max-width:46rem;margin:0 auto;padding:var(--s-grp) var(--gutter) var(--s-sec)}
.doc h1{font-size:clamp(34px,2vw + 24px,52px);margin-bottom:12px}
.doc h2{font-size:clamp(26px,1vw + 20px,34px);margin:40px 0 12px}
.doc h3{font-size:22px;margin:28px 0 8px}
.doc p,.doc li{max-width:66ch}
.doc p{margin:0 0 14px}
.doc ul,.doc ol{margin:0 0 14px;padding-left:1.3rem}
.doc li{margin:0 0 6px}
.doc .langs{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 20px}
.doc .langs a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);text-decoration:none;font-weight:500}
.doc section{scroll-margin-top:80px}

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.nf{padding-top:var(--s-sec);padding-bottom:var(--s-sec)}
.nf h1{font-size:clamp(40px,3vw + 24px,72px);max-width:16ch}
.nf p{margin-top:14px;font-size:19px;max-width:44ch}
.nf .cta-row{margin-top:24px}