/* ── THE BRAND, NOT AN INTERPRETATION ────────────────────────────────────
   Every value below is lifted from the Brand Book, the Logo Standard and the
   shipped theme.dart — not invented for the website.

   "Dark isn't a mode. It's the material." The product defaults to GRAPHITE
   and the toggle is Graphite / Paper — the pencil and the page — so the site
   defaults to Graphite too and offers the same two, never "light/dark".

   Paper is BRISTOL #F6F5F1: a bright near-white sheet with true cool-graphite
   ink and crisp hairlines. NEVER the warm beige this site shipped first.      */
/* v1.1 boundary ladder (R-334 dark-contrast study, mirrored from theme.dart
   §01 as amended by R-343): the TEXT layer was never the problem — the
   STRUCTURE layer was (hairlines ~1.2:1, washes ~1.1:1). Ground drops a
   step, well/deep/line rise (line:card now 1.75:1), tints lift to the wash
   floor (~1.35 dark / ~1.28 paper). Every value below is the app's own
   machine-verified token, not a web-side guess. */
:root{
  /* Graphite — the default material */
  --paper:#141619; --card:#26292E; --sand:#33373E; --sand-deep:#3D424A;
  --line:#494E58; --ink:#E8E6E1; --ink-soft:#C6C9CC;
  --taupe:#9BA0A8; --taupe-light:#8B9198;
  --accent:#D9A441;            /* fill — identical in BOTH themes, never dims */
  --accent-text:#D9A441;       /* accent as text/thin stroke */
  --accent-tint:#4D3B17;
  --on-accent:#1B1D21;         /* text on an accent fill is always this */
  --sheen:linear-gradient(135deg,#2A2D33 0%,#232529 60%);
  --shadow:0 24px 60px rgba(0,0,0,.35);

  --maxw:1020px; --pad:clamp(1rem,4vw,28px);
  /* Aptos is the brand face; its web licence is unconfirmed (THEMING §2), so
     the site sets the same stack the brand documents themselves use. */
  --body:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --mono:"Cascadia Code","SF Mono",Consolas,monospace;
  --hand:"Ink Free","Segoe Print","Bradley Hand","Comic Sans MS",cursive;
}
:root[data-theme=paper]{
  --paper:#F6F5F1; --card:#FFFFFF; --sand:#EFEDE8; --sand-deep:#E6E4DE;
  --line:#C9CBCE; --ink:#22242A; --ink-soft:#3A3D44;
  /* taupe deepened #6A6F77 → #656A72 (v1.1): the old value sat ~4.3:1 on
     well fills — the exact defect DS-006 caught in the app. */
  --taupe:#656A72; --taupe-light:#72757C;
  --accent:#D9A441;            /* the brass never dims */
  --accent-text:#805F13;       /* only accent-as-TEXT deepens on Paper */
  --accent-tint:#F3E1C1;
  --sheen:linear-gradient(135deg,#FBF9F5 0%,#F1EDE5 60%);
  --shadow:0 24px 60px rgba(34,36,42,.13);
}

/* The tin of coloured pencils (§05). Fill is identical in both themes; only
   the as-text value deepens on Paper. Marketing always leads with gold. */
/* v1.1 ramps: accent-as-TEXT solved jointly per pencil (clay/violet/rose/
   umber brightened in Graphite; every Paper value deepened) — from grPencils
   in theme.dart, all machine-verified ≥4.5:1 on surface, well and tint. */
:root{
  --p-gold:#D9A441;  --p-gold-t:#D9A441;
  --p-clay:#D08A72;  --p-clay-t:#DC9378;
  --p-moss:#8FBC7E;  --p-moss-t:#8FBC7E;
  --p-jade:#6FBCA8;  --p-jade-t:#6FBCA8;
  --p-slate:#8FAECC; --p-slate-t:#8FAECC;
  --p-violet:#AC97D2;--p-violet-t:#B39DDA;
  --p-rose:#D28CA4;  --p-rose-t:#DA92AA;
  --p-umber:#C29B72; --p-umber-t:#C69E74;
}
:root[data-theme=paper]{
  --p-gold-t:#805F13; --p-clay-t:#865B4A; --p-moss-t:#556A4A; --p-jade-t:#416C61;
  --p-slate-t:#59667B; --p-violet-t:#6A5F85; --p-rose-t:#815962; --p-umber-t:#786048;
}

*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);color:var(--ink);line-height:1.65;
  font-size:16.5px;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{max-width:100%;height:auto}
a{color:var(--accent-text);text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible,label:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Type — the brand books set headings LIGHT (300) with negative tracking.
   That restraint is the voice: quiet, precise, a little dry. */
h1,h2,h3{margin:0;text-wrap:balance;font-weight:300;letter-spacing:-.03em}
h1{font-size:clamp(38px,7vw,68px);line-height:1.02}
h2{font-size:clamp(26px,4.2vw,38px);line-height:1.1;letter-spacing:-.02em}
h3{font-size:18px;font-weight:600;letter-spacing:-.01em}
p{margin:0;max-width:66ch}
.dim{color:var(--taupe)}
.eyebrow,.mono{font-family:var(--mono);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;margin:0}
.eyebrow{color:var(--accent-text)}
.mono{color:var(--taupe-light)}
.hand{font-family:var(--hand);color:var(--accent-text);font-size:16px;
  display:inline-block;transform:rotate(-1.6deg)}

/* The wordmark — the dot of the i IS the mark (Logo Standard §00).
   Aptos 600 at −3%; the tittle keeps FILL gold in both themes because it is a
   mark, not text. Below 18px the hex blurs → .wm-sm renders a plain i. */
.wm{font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink);
  display:inline-flex;align-items:baseline;text-decoration:none}
.wm .i{position:relative;display:inline-block}
.wm .i svg{position:absolute;top:.143em;left:50%;transform:translateX(-50%);
  width:.27em;height:.27em;overflow:visible}

.btn{display:inline-flex;align-items:center;gap:.45rem;border-radius:8px;
  padding:11px 18px;font-weight:600;font-size:14.5px;text-decoration:none;
  border:1px solid transparent;cursor:pointer;font-family:var(--body);line-height:1.2}
.btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn-primary:hover{filter:brightness(1.07)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--accent)}
.btn-sm{padding:7px 13px;font-size:13px}

/* ── MOTION — the brand's own vocabulary (Brand Book §07) ────────────────
   draw: a stroke drawing itself · settle: a mark landing · smudge: erasing.
   Nothing else. All of it stops for prefers-reduced-motion.               */
@keyframes gr-draw{to{stroke-dashoffset:0}}
@keyframes gr-settle{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@keyframes gr-smudge{from{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(4px)}}
.selfdraw path{stroke-dasharray:var(--len,340);stroke-dashoffset:var(--len,340);
  animation:gr-draw 1.1s ease-out forwards}
.selfdraw path:nth-child(2){animation-delay:.35s}
.selfdraw path:nth-child(3){animation-delay:.6s}

/* Scroll choreography: everything arrives by SETTLING, the way a pencil mark
   lands on the page. .reveal starts hidden and is released by the observer;
   with JS off or reduced motion, the fallback below shows everything. */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{animation:gr-settle .62s cubic-bezier(.2,.9,.3,1) forwards}
.reveal.d1{animation-delay:.08s}.reveal.d2{animation-delay:.16s}.reveal.d3{animation-delay:.24s}
.no-js .reveal,.reveal.shown{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;animation:none!important}
  .selfdraw path{animation:none;stroke-dashoffset:0}
  html{scroll-behavior:auto}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* header */
header.top{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(10px);border-block-end:1px solid var(--line)}
.topbar{display:flex;align-items:center;gap:18px;min-height:58px;flex-wrap:wrap}
nav.main{display:flex;gap:18px;margin-inline-start:auto;align-items:center;flex-wrap:wrap}
nav.main a{color:var(--taupe);text-decoration:none;font-size:14px}
nav.main a:hover,nav.main a[aria-current=page]{color:var(--ink)}
nav.main a.btn-primary{color:var(--on-accent)}
nav.main a.btn-ghost{color:var(--ink)}

/* the Graphite / Paper switch — the brand's own toggle, not "light/dark" */
.themeswitch{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.themeswitch button{appearance:none;background:transparent;border:0;cursor:pointer;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--taupe);padding:6px 10px}
.themeswitch button[aria-pressed=true]{background:var(--accent-tint);color:var(--accent-text)}

section{padding-block:clamp(56px,9vw,104px)}
.sec-label{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--taupe-light);border-block-start:1px solid var(--line);padding-block-start:14px;
  margin-block-end:26px;display:flex;justify-content:space-between;gap:16px}
.sec-label b{color:var(--accent-text);font-weight:400}
.pull{border-inline-start:2px solid var(--accent);padding:6px 0 6px 24px;margin-block:36px;
  font-size:clamp(19px,2.8vw,25px);font-weight:300;max-width:30em;text-wrap:balance}

/* hero */
.hero{padding-block:clamp(56px,10vw,110px) clamp(40px,7vw,80px);position:relative;overflow:clip}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(28px,5vw,56px);align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero h1{margin-block:20px 0}
.hero .lede{font-size:clamp(17px,2vw,20px);font-weight:300;color:var(--taupe);
  max-width:34em;margin-block-start:22px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-block-start:30px;align-items:center}
.hero-note{margin-block-start:16px}

/* the product plate — a lit panel on the desk */
.plate{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);
  box-shadow:var(--shadow);position:relative}
.plate img{display:block;width:100%}
.plate figcaption{position:absolute;inset-block-end:0;inset-inline:0;padding:8px 12px;
  background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(6px);
  border-block-start:1px solid var(--line)}

/* the desk — feature rows that alternate side */
.desk-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,54px);align-items:center;
  padding-block:clamp(26px,5vw,48px);border-block-end:1px solid var(--line)}
.desk-row:last-child{border-block-end:0}
.desk-row.flip .desk-media{order:-1}
@media(max-width:820px){.desk-row{grid-template-columns:1fr}.desk-row.flip .desk-media{order:0}}
.desk-row h3{font-size:clamp(19px,2.4vw,23px);font-weight:600;letter-spacing:-.015em}
.desk-row p{margin-block-start:10px;color:var(--taupe);font-size:15.5px}
.desk-row .kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-text);margin-block-end:8px}

/* the tin — eight pencils, click to change the page's accent */
.tin{display:flex;gap:14px;flex-wrap:wrap;margin-block-start:26px}
.pencil{appearance:none;background:transparent;border:0;cursor:pointer;padding:6px 4px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--taupe);border-radius:8px;transition:transform .18s cubic-bezier(.2,.9,.3,1)}
.pencil:hover{transform:translateY(-4px)}
.pencil[aria-pressed=true]{color:var(--ink)}
.pencil[aria-pressed=true] svg{transform:translateY(-6px)}
.pencil svg{display:block;transition:transform .18s cubic-bezier(.2,.9,.3,1)}

/* grids + cards */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:var(--sheen);border:1px solid var(--line);padding:24px}
.card h3{margin-block-end:8px}
.card p{font-size:14.5px;color:var(--taupe);margin:0}
.card .lede-line{color:var(--ink);margin-block-end:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-block-start:14px;padding:0;list-style:none}
.chips li{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--taupe);border:1px solid var(--line);border-radius:100px;padding:3px 9px}
.mod-link{display:block;text-decoration:none;color:inherit}
.mod-link:hover{border-color:var(--accent)}
.mod-link .name{font-weight:600;color:var(--ink);font-size:15.5px}
.mod-link .tag{color:var(--taupe);font-size:13.5px;margin-block-start:4px}

/* the module index — a list reads as substance */
.mindex{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  column-gap:34px;border-block-start:1px solid var(--line);margin-block-start:26px}
.mindex a{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:12px;
  padding:11px 6px;border-block-end:1px solid var(--line);text-decoration:none;color:var(--ink);
  transition:background-color .16s,padding-inline-start .16s}
.mindex a:hover{background:var(--sand);padding-inline-start:12px}
.mindex .nm{font-weight:600;font-size:14.5px}
.mindex .tag{color:var(--taupe-light);font-size:12.5px;text-align:end;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:11rem}

.ticks{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.ticks li{position:relative;padding-inline-start:22px;color:var(--taupe);max-width:66ch;font-size:15px}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;top:.6em;width:7px;height:7px;
  border-radius:2px;background:var(--accent)}
.prose h2{margin-block:38px 14px}
.prose h3{margin-block:26px 8px}
.prose p+p{margin-block-start:12px}

/* voice pairs — straight from the brand book */
.copy-pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-block-start:14px}
@media(max-width:640px){.copy-pair{grid-template-columns:1fr}}
.cp{background:var(--card);padding:18px 20px}
.cp .tag{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin-block-end:8px}
.cp.no .tag{color:#C96A5B}.cp.yes .tag{color:#4CAF7D}
.cp .txt{font-size:15px}
.cp.no .txt{color:var(--taupe-light);text-decoration:line-through;text-decoration-color:rgba(201,106,91,.5)}

/* pricing / download / faq */
.tier{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--sheen);padding:24px}
.tier.featured{border-color:var(--accent)}
.tier .price{font-size:34px;font-weight:300;margin-block:8px 2px}
.tier .for{color:var(--taupe);font-size:14px;margin-block-end:16px}
.tier .ticks{flex:1}
.tier .btn{margin-block-start:20px;justify-content:center}
.notice{border:1px solid var(--line);border-inline-start:2px solid var(--accent);
  background:var(--card);padding:14px 18px;font-size:14.5px;color:var(--taupe);max-width:66ch}
.dl{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);
  background:var(--card);padding:18px 20px}
.dl .state{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  border-radius:3px;padding:2px 7px;white-space:nowrap}
.state-available{background:var(--accent-tint);color:var(--accent-text)}
.state-soon{background:var(--sand);color:var(--taupe)}
.state-later{background:var(--sand);color:var(--taupe-light)}
details{border-block-end:1px solid var(--line);padding:14px 0}
details:first-of-type{border-block-start:1px solid var(--line)}
details summary{cursor:pointer;font-weight:600;list-style:none;display:flex;
  justify-content:space-between;gap:16px;align-items:baseline}
details summary::-webkit-details-marker{display:none}
details:not(.g-open) summary::after{content:"+";color:var(--accent-text);font-family:var(--mono)}
details:not(.g-open)[open] summary::after{content:"–"}
details p{margin-block-start:10px;color:var(--taupe);font-size:14.5px}

/* device gallery (subpages) */
.shots{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:end}
.frame{border:1px solid var(--line);background:var(--card);padding:10px;margin:0}
.frame img{display:block;width:100%;border:1px solid var(--line)}
.frame .cap{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--taupe-light);margin-block-start:8px;text-align:center}

footer{border-block-start:1px solid var(--line);background:var(--card);padding-block:44px 52px}
.foot-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
footer h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--taupe-light);margin:0 0 10px;font-weight:400}
footer a{display:block;color:var(--taupe);text-decoration:none;font-size:14px;padding:3px 0}
footer a:hover{color:var(--ink)}
.colophon{margin-block-start:34px;padding-block-start:18px;border-block-start:1px solid var(--line);
  color:var(--taupe-light);display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:13px}
.tablewrap{overflow-x:auto}


/* ── THE APP'S OWN LANGUAGE ──────────────────────────────────────────────
   The site should feel like the product, so these components are the app's
   components — radii, spacing steps, type roles and card anatomy lifted from
   apps/app/lib/theme.dart rather than re-invented for the web.
     radii   8 / 12 / 16 / pill      (GrRadius)
     spacing 4 8 12 16 20 24 32 48   (GrSpace — an 18px gap is a bug)
     type    displayHero 300/−2% · title 14/700 · body 12.5/1.5
             caption 11.5 · overline 10.5/700/+1.2 uppercase              */
:root{
  --r-s:8px; --r-m:12px; --r-l:16px; --r-pill:100px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s12:48px;
  /* The tin — Space colours, used on the site exactly as the app uses them:
     as the mark on a sheet's edge, never as a large surface. */
  --tin-ocean:#2E6F8E; --tin-plum:#5A4A8A; --tin-forest:#3D7A5C;
  --tin-berry:#8E2E4F; --tin-orchid:#9B6BA8; --tin-steel:#5B84A8;
}

/* A card, the way the app draws one: surface, one hairline, radius 12, a
   title row with an icon, and the bottom-left corner reserved for attributes
   (RU-015) with controls to the right. */
.g-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);min-width:0;
  transition:border-color .16s ease,transform .16s cubic-bezier(.2,.9,.3,1)}
.g-card:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.g-card-head{display:flex;align-items:center;gap:var(--s2);min-width:0}
.g-card-head .ico{width:26px;height:26px;border-radius:var(--r-s);flex:none;
  display:grid;place-items:center;background:var(--accent-tint);color:var(--accent-text)}
.g-card-head .ico svg{width:15px;height:15px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.g-card-head h3{font-size:14px;font-weight:700;letter-spacing:0;margin:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-card-head .spacer{margin-inline-start:auto}
.g-card .body{font-size:13.5px;line-height:1.55;color:var(--taupe);margin:0;max-width:none}
.g-card .foot{margin-block-start:auto;display:flex;align-items:center;gap:var(--s2);
  padding-block-start:var(--s2);border-block-start:1px solid var(--line)}
.g-card .foot .attrs{display:flex;gap:6px;flex-wrap:wrap}
.g-card .foot .ctrl{margin-inline-start:auto}


/* Expand-in-place — the app never opens a popup where inline works (RU-012),
   so a module capability is a card you open, not a link to somewhere else.
   <details> means it works with no JavaScript and from the keyboard. */
.g-open-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s3);align-items:start}
.g-card.g-open{padding:0;gap:0;overflow:hidden;border-block-end:1px solid var(--line)}
.g-card.g-open>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:var(--s3);padding:var(--s3) var(--s4);font-size:13.5px;font-weight:600;color:var(--ink)}
.g-card.g-open>summary::-webkit-details-marker{display:none}
.g-card.g-open>summary:hover{background:var(--sand)}
.g-card.g-open .lbl{min-width:0}
/* the marker is a pencil stroke: a plus that becomes a minus */
.g-card.g-open .mk{margin-inline-start:auto;flex:none;width:14px;height:14px;position:relative}
.g-card.g-open .mk::before,.g-card.g-open .mk::after{content:"";position:absolute;inset-inline:0;
  inset-block-start:6px;height:2px;border-radius:2px;background:var(--accent);
  transition:transform .18s cubic-bezier(.2,.9,.3,1)}
.g-card.g-open .mk::after{transform:rotate(90deg)}
.g-card.g-open[open] .mk::after{transform:rotate(0)}
.g-card.g-open>p.body{padding:0 var(--s4) var(--s4);margin:0;
  animation:gr-settle .28s cubic-bezier(.2,.9,.3,1)}
@media (prefers-reduced-motion:reduce){.g-card.g-open>p.body{animation:none}}
/* The overline — the app's section label voice. */
.g-over{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--taupe);margin:0}

/* Chips — module attributes, card variants, tags. */
.g-chip{display:inline-flex;align-items:center;gap:5px;border-radius:var(--r-pill);
  border:1px solid var(--line);padding:3px 10px;font-size:11px;color:var(--taupe);
  background:transparent;white-space:nowrap}
.g-chip.on{background:var(--accent-tint);border-color:transparent;color:var(--accent-text)}
.g-chip .dot{width:7px;height:7px;border-radius:2px;background:currentColor}

/* A stat, the app's glance value: light weight, tabular figures. */
.g-stat{display:flex;flex-direction:column;gap:2px}
.g-stat .v{font-size:26px;font-weight:300;line-height:1;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;color:var(--ink)}
.g-stat .k{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--taupe)}
.g-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--s4);
  border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s5);background:var(--card)}

/* The board — the app's card grid, at the app's own size presets. */
.g-board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s3)}
.g-board>*{grid-column:span 4}
.sz-quarter{grid-column:span 3}.sz-half{grid-column:span 6}
.sz-wide{grid-column:span 8}.sz-full{grid-column:span 12}
@media(max-width:1100px){.g-board>*{grid-column:span 6}.sz-quarter{grid-column:span 6}
  .sz-wide,.sz-full{grid-column:span 12}}
@media(max-width:700px){.g-board>*{grid-column:span 12!important}}

/* The rail — the app's sidenav, used on the site as the section index. */
.g-shell{display:grid;grid-template-columns:214px minmax(0,1fr);gap:var(--s8);align-items:start}
@media(max-width:1100px){.g-shell{grid-template-columns:1fr;gap:var(--s5)}}
.g-rail{position:sticky;top:74px;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--card);padding:var(--s2);display:flex;flex-direction:column;gap:2px}
@media(max-width:1100px){.g-rail{position:static;flex-direction:row;flex-wrap:wrap}}
.g-rail a{display:flex;align-items:center;gap:var(--s2);padding:7px 12px;border-radius:7px;
  color:var(--taupe);text-decoration:none;font-size:13.5px}
.g-rail a:hover{color:var(--ink);background:var(--sand)}
.g-rail a.on{background:var(--accent-tint);color:var(--accent-text);font-weight:600}
.g-rail .head{font-family:var(--mono);font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--taupe-light);padding:14px 12px 6px}

/* A framed screenshot that reads as a panel on the desk. */
.g-shot{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;
  background:var(--sand);box-shadow:var(--shadow)}
.g-shot img{display:block;width:100%}
.g-shot figcaption{font-family:var(--mono);font-size:10px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--taupe-light);padding:8px 12px;
  border-block-start:1px solid var(--line);background:var(--card)}

/* Split: copy beside a panel, alternating. */
.g-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:var(--s8);align-items:center}
.g-split.flip>*:first-child{order:2}
@media(max-width:900px){.g-split{grid-template-columns:1fr}.g-split.flip>*:first-child{order:0}}

/* Price/plan row — the merged plans page. */
.g-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s4)}
.g-plan{border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.g-plan.on{border-color:var(--accent)}
.g-plan .amt{font-size:30px;font-weight:300;letter-spacing:-.02em;line-height:1}
.g-plan .btn{margin-block-start:auto}

/* Arabic: RTL chrome around English guide copy. Negative tracking, tight
   leading and letterspaced uppercase all break Naskh joining. */
[lang=ar] h1,[lang=ar] h2,[dir=rtl] h1,[dir=rtl] h2{
  font-family:"Segoe UI","Noto Naskh Arabic","Geeza Pro",Tahoma,sans-serif;
  letter-spacing:0;line-height:1.32;font-weight:400}
[lang=ar] .mono,[lang=ar] .eyebrow{font-family:var(--body);letter-spacing:0;text-transform:none}
[dir=rtl] main.ltr-body{text-align:left}
@media(max-width:640px){nav.main{gap:12px}nav.main .hide-sm{display:none}}