/* ── LIT BOARD ───────────────────────────────────────────────────────────
   The product's interior is warm paper. On a paper-coloured page a dense,
   information-rich UI dissolves into the field and stops being the hero — so
   the page alternates FIXED DARK STAGE bands (header, hero, stat rule, the
   cut, footer) with THEMED FIELD bands between them. Screenshots sit on the
   stage, where they are the brightest objects on the page.
   Stage colours never invert with the theme: you don't invert a photograph. */
:root{
  /* stage — theme-independent */
  --stage:#15171A; --stage-2:#1B1D21; --stage-3:#212429;
  --stage-ink:#E8E6E1; --stage-ink-2:#A5A29A; --stage-ink-3:#7D7A72;
  --stage-hair:rgba(232,230,225,.09); --stage-hair-hot:rgba(217,164,65,.42);
  --bloom:rgba(217,164,65,.16); --gold:#D9A441;
  /* field — themed */
  --field:#FAF8F4; --field-2:#EFEAE0; --field-3:#E3DCCC;
  --hair:#DDD6C7; --ink:#26251F; --ink-2:#5C5A50; --ink-3:#84806F;
  --accent-text:#33513F; --gold-mark:#B8923F; --terracotta:#C76B4A;
  --maxw:78rem; --pad:clamp(1rem,4vw,2rem);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Code",Consolas,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root{--field:#1B1D21; --field-2:#24262B; --field-3:#2B2E34; --hair:#383B42;
    --ink:#E8E6E1; --ink-2:#A5A29A; --ink-3:#807D75;
    --accent-text:#8FBCA4; --gold-mark:#D9A441;}
}
:root[data-theme=light]{--field:#FAF8F4; --field-2:#EFEAE0; --field-3:#E3DCCC;
  --hair:#DDD6C7; --ink:#26251F; --ink-2:#5C5A50; --ink-3:#84806F;
  --accent-text:#33513F; --gold-mark:#B8923F;}
:root[data-theme=dark]{--field:#1B1D21; --field-2:#24262B; --field-3:#2B2E34;
  --hair:#383B42; --ink:#E8E6E1; --ink-2:#A5A29A; --ink-3:#807D75;
  --accent-text:#8FBCA4; --gold-mark:#D9A441;}

*{box-sizing:border-box}
html,body{overflow-x:clip}
html{background:var(--field);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);line-height:1.6;
  font-size:1.0625rem;-webkit-font-smoothing:antialiased}
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{outline:2px solid var(--gold-mark);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}

h1,h2,h3{margin:0;text-wrap:balance}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.7rem,6.2vw,4.6rem);
  line-height:.98;letter-spacing:-.026em}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.75rem,3.2vw,2.6rem);
  line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
h3{font-family:var(--sans);font-weight:650;font-size:1.0625rem;line-height:1.35;letter-spacing:-.01em}
p{margin:0;max-width:62ch;text-wrap:pretty}
.mono{font-family:var(--mono);font-weight:600;font-size:.72rem;line-height:1.35;
  letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono);font-weight:600;font-size:.72rem;line-height:1.35;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0}
.stage .eyebrow,.hero .eyebrow{color:var(--gold)}

/* stage / field bands */
.stage{background:var(--stage);color:var(--stage-ink)}
.stage h2,.hero h2{color:var(--stage-ink)}
.stage p,.hero p{color:var(--stage-ink-2)}
.edge{position:relative}
.edge::before{content:"";position:absolute;inset-inline:0;inset-block-start:0;height:10px;
  border-block-start:1px solid var(--hair);
  background:linear-gradient(180deg,rgba(38,37,31,.055),transparent);pointer-events:none}
@media (prefers-color-scheme:dark){.edge::before{background:linear-gradient(180deg,rgba(0,0,0,.35),transparent)}}
:root[data-theme=dark] .edge::before{background:linear-gradient(180deg,rgba(0,0,0,.35),transparent)}

/* header */
header.top{position:sticky;top:0;z-index:50;background:var(--stage);
  border-block-end:1px solid var(--stage-hair)}
.topbar{display:flex;align-items:center;gap:1.1rem;min-height:56px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--stage-ink);
  font-weight:600;font-size:1.12rem;letter-spacing:-.02em;position:relative}
.brand::after{content:"";position:absolute;inset-block-end:-1px;inset-inline-start:0;
  width:96px;height:2px;background:var(--gold)}
.brand .mark{width:19px;height:19px;flex:none}
nav.main{display:flex;gap:1.1rem;margin-inline-start:auto;align-items:center;flex-wrap:wrap}
nav.main a{color:var(--stage-ink-2);text-decoration:none;font-size:.9rem;font-weight:550}
nav.main a:hover,nav.main a[aria-current=page]{color:var(--stage-ink)}
/* nav.main a (0,1,1) outranks .btn-primary (0,1,0), which shipped the header
   CTA as GREY TEXT ON GOLD. Buttons restate their own colour here. */
nav.main a.btn-primary{color:#1B1D21}
nav.main a.btn-ghost{color:var(--stage-ink)}
.btn{display:inline-flex;align-items:center;gap:.45rem;border-radius:8px;
  padding:.66rem 1.1rem;font-weight:650;font-size:.92rem;text-decoration:none;
  border:1px solid transparent;cursor:pointer;font-family:var(--sans);line-height:1.2}
.btn-primary{background:var(--gold);color:#1B1D21;border-color:var(--gold)}
.btn-primary:hover{background:#E6BC6A}
.btn-ghost{border-color:var(--hair);color:var(--ink);background:transparent}
.stage .btn-ghost,.hero .btn-ghost{border-color:var(--stage-hair);color:var(--stage-ink)}
.stage .btn-ghost:hover,.hero .btn-ghost:hover{border-color:var(--stage-hair-hot)}
.btn-ghost:hover{border-color:var(--gold-mark)}
.btn-sm{padding:.42rem .8rem;font-size:.85rem}

/* hero — the one place boldness is spent */
.hero{background:var(--stage);color:var(--stage-ink);position:relative;overflow:clip;
  padding-block:clamp(3.4rem,8vw,6rem)}
.hero .wrap{position:relative;z-index:1}
.hero-lattice{position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,var(--stage-hair) 0 1px,transparent 1px 88px),
    repeating-linear-gradient(0deg,var(--stage-hair) 0 1px,transparent 1px 88px);
  -webkit-mask-image:radial-gradient(120% 90% at 60% 30%,#000 20%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 60% 30%,#000 20%,transparent 78%)}
.hero-bloom{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 75% at 64% 38%,var(--bloom),transparent 62%)}
[dir=rtl] .hero-bloom{background:radial-gradient(120% 75% at 36% 38%,var(--bloom),transparent 62%)}
.hero-grid{display:grid;grid-template-columns:minmax(min(100%,20rem),33rem) minmax(0,1fr);
  gap:clamp(2rem,5vw,3.4rem);align-items:center}
.hero h1{color:var(--stage-ink)}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .lede{font-size:clamp(1.08rem,1.5vw,1.28rem);line-height:1.5;color:var(--stage-ink-2);
  margin-block-start:1.15rem;max-width:46ch}
.hero-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-block-start:1.9rem}
.hero-note{margin-block-start:1.1rem;color:var(--stage-ink-3)}
.plate{position:relative;border-radius:14px;border:1px solid rgba(232,230,225,.14);
  overflow:hidden;background:var(--stage-3);
  width:min(70rem,66vw);max-width:none;
  box-shadow:0 2px 6px rgba(0,0,0,.5),0 22px 60px rgba(0,0,0,.55),0 0 90px rgba(217,164,65,.10)}
.plate img{display:block;width:100%}
.plate::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 42%)}
@media (min-width:60rem){.plate{margin-inline-end:calc(-1*(50vw - 50% - var(--pad)))}}

/* stat rule */
.statrule{background:var(--stage);border-block:1px solid var(--stage-hair)}
.statrule .wrap{min-height:76px;display:flex;align-items:center}
.statrule .mono{color:var(--stage-ink-3);margin:0;max-width:none}
.statrule b{color:var(--gold);font-weight:600}

/* sections */
section{padding-block:clamp(4rem,9vw,7rem)}
section.stage{padding-block:clamp(5rem,11vw,8.5rem)}
.sec-head{display:grid;grid-template-columns:auto 1fr;column-gap:.9rem;align-items:baseline;
  border-block-start:1px solid var(--hair);padding-block-start:1.1rem;
  margin-block-end:clamp(1.8rem,4vw,2.6rem)}
.sec-head .idx{font-family:var(--mono);font-weight:600;font-size:.72rem;line-height:1;
  letter-spacing:.14em;color:var(--gold-mark);background:var(--field);
  padding-inline-end:.7rem;margin-block-start:-1.7rem}
.stage .sec-head,.hero .sec-head{border-color:var(--stage-hair)}
.stage .sec-head .idx{background:var(--stage);color:var(--gold)}
.sec-head p{grid-column:2;margin-block-start:.55rem;color:var(--ink-2);max-width:52ch}

/* the board — 12-col grid at product size presets, differentiated by SIZE not chrome */
.board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(.75rem,1.4vw,1.15rem)}
.tile{position:relative;display:flex;flex-direction:column;gap:.5rem;
  padding:1.15rem 1.2rem;border:1px solid var(--hair);border-radius:12px;background:transparent;
  transition:border-color .16s ease,background-color .16s ease;grid-column:span 4}
.tile:hover{border-color:var(--gold-mark);background:color-mix(in srgb,var(--ink) 3%,transparent)}
.tile::before{content:attr(data-size);position:absolute;inset-block-start:.7rem;inset-inline-end:.8rem;
  font-family:var(--mono);font-weight:600;font-size:.62rem;line-height:1;letter-spacing:.1em;
  color:var(--gold-mark);opacity:0;transition:opacity .16s}
.tile:hover::before{opacity:1}
.tile p{font-size:.95rem;color:var(--ink-2)}
.tile .t-lede{color:var(--ink);font-weight:550}
.tile-shot{border:1px solid var(--hair);border-radius:8px;overflow:hidden;margin-block-start:.35rem;
  background:var(--field-2);aspect-ratio:16/10}
.tile-shot img{height:100%;object-fit:cover;object-position:top left}
.tile-shot img{display:block;width:100%}
.s6{grid-column:span 6}.s4{grid-column:span 4}.s3{grid-column:span 3}.s12{grid-column:span 12}
@media (max-width:60rem){.board .tile{grid-column:span 6}}
@media (max-width:34rem){.board .tile{grid-column:span 12}}

/* module index — a list reads as substance; a card grid reads as filler */
.mindex{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));
  column-gap:2.4rem;border-block-start:1px solid var(--hair)}
.mindex a{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:.75rem;
  padding:.72rem .5rem;border-block-end:1px solid var(--hair);text-decoration:none;color:var(--ink);
  transition:background-color .14s ease,padding-inline-start .14s ease}
.mindex a:hover{background:var(--field-2);padding-inline-start:.85rem}
.mindex .nm{font-weight:600}
.mindex .tag{color:var(--ink-3);font-size:.82rem;text-align:end;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:11rem}

/* split — image bleeding the OTHER way, so the eye zig-zags */
.split{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,5vw,3.4rem);align-items:center}
.split-media{border:1px solid var(--hair);border-radius:12px;overflow:hidden;background:var(--field-2);aspect-ratio:16/10}
.split-media img{height:100%;object-fit:cover;object-position:top left}
.split-media img{display:block;width:100%}
.claims{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:1rem}
.claims li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:baseline;max-width:52ch}
.claims .n{font-family:var(--mono);font-weight:600;font-size:.72rem;letter-spacing:.14em;color:var(--gold-mark)}
.claims .hot{color:var(--terracotta)}
@media (max-width:60rem){.split{grid-template-columns:1fr}}

/* the cut — one sentence, a lot of air */
.cut{text-align:start}
.cut .hexmark{width:22px;height:22px;display:block;margin-block-end:2rem}
.cut blockquote{margin:0;font-family:var(--serif);font-weight:600;
  font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.24;letter-spacing:-.015em;
  color:var(--stage-ink);max-width:22ch}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-block-start:clamp(3rem,8vw,6rem)}
.pair figure{margin:0}
.pair img{display:block;width:100%;border:1px solid var(--stage-hair);border-radius:10px}
.pair figcaption{margin-block-start:.7rem;color:var(--stage-ink-3)}
@media (max-width:48rem){.pair{grid-template-columns:1fr}}

/* faq as ledger rows */
details{border-block-end:1px solid var(--hair);padding:1rem 0}
details:first-of-type{border-block-start:1px solid var(--hair)}
details summary{cursor:pointer;font-weight:600;list-style:none;display:flex;
  justify-content:space-between;gap:1rem;align-items:baseline}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--gold-mark);font-weight:700;font-family:var(--mono)}
details[open] summary::after{content:"–"}
details p{margin-block-start:.6rem;color:var(--ink-2);font-size:.98rem}

/* closer */
.closer{display:flex;gap:1.4rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.closer h2{max-width:20ch}

/* generic content (subpages) */
.grid{display:grid;gap:1.1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr))}
.card{background:transparent;border:1px solid var(--hair);border-radius:12px;padding:1.35rem 1.4rem;
  transition:border-color .16s ease,background-color .16s ease}
.card:hover{border-color:var(--gold-mark)}
.card h3{margin-block-end:.45rem}
.card p{font-size:.95rem;color:var(--ink-2)}
.card .lede-line{color:var(--ink);font-weight:550;margin-block-end:.55rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-block-start:.95rem;padding:0;list-style:none}
.chips li{font-family:var(--mono);font-weight:600;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);border:1px solid var(--hair);
  border-radius:100px;padding:.24rem .62rem}
.mod-link{display:block;text-decoration:none;color:inherit}
.mod-link .name{font-weight:650;color:var(--ink);font-size:1rem}
.mod-link .tag{color:var(--ink-2);font-size:.88rem;margin-block-start:.25rem}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.ticks li{position:relative;padding-inline-start:1.5rem;font-size:.98rem;
  color:var(--ink-2);max-width:62ch}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;
  width:.42rem;height:.42rem;border-radius:2px;background:var(--gold-mark)}
.stage .ticks li,.hero .ticks li{color:var(--stage-ink-2)}
.prose h2{margin-block:2.4rem .8rem}
.prose h3{margin-block:1.7rem .5rem}
.prose p+p{margin-block-start:.8rem}

/* pricing */
.tier{display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:12px;padding:1.6rem}
.tier.featured{border-color:var(--gold-mark)}
.tier .price{font-family:var(--serif);font-size:2.2rem;line-height:1;margin-block:.5rem .2rem}
.tier .for{color:var(--ink-2);font-size:.93rem;margin-block-end:1.1rem}
.tier .ticks{margin-block-start:.4rem;flex:1}
.tier .btn{margin-block-start:1.4rem;justify-content:center}
.notice{border:1px solid var(--hair);border-inline-start:3px solid var(--gold-mark);
  background:var(--field-2);border-radius:0 12px 12px 0;
  padding:.95rem 1.15rem;font-size:.95rem;color:var(--ink-2);max-width:62ch}
[dir=rtl] .notice{border-radius:12px 0 0 12px}

/* download rows */
.dl{display:flex;gap:1rem;align-items:flex-start;border:1px solid var(--hair);
  border-radius:12px;padding:1.25rem 1.35rem}
.dl .state{font-family:var(--mono);font-weight:600;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;border-radius:3px;padding:.16rem .45rem;white-space:nowrap}
.state-available{background:color-mix(in srgb,var(--accent-text) 14%,transparent);color:var(--accent-text)}
.state-soon{background:color-mix(in srgb,var(--gold-mark) 20%,transparent);color:var(--gold-mark)}
.state-later{background:var(--field-3);color:var(--ink-3)}

/* device frames (mockup galleries on subpages) */
.shots{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));align-items:end}
.frame{border:1px solid var(--hair);border-radius:12px;padding:.8rem;text-align:center;margin:0;
  background:var(--field-2)}
.frame .cap{font-size:.8rem;color:var(--ink-3);margin-block-start:.55rem}
.frame img{border-radius:6px;border:1px solid var(--hair);display:block;width:100%}
.shots-trio{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1.4rem}
.shots-trio .frame{flex:0 1 auto;margin:0;background:transparent;border:0;padding:0}
.shots-trio .cap{display:none}
.shots-trio .frame.d-laptop{width:min(100%,34rem)}
.shots-trio .frame.d-tablet{width:min(46%,14.5rem)}
.shots-trio .frame.d-phone{width:min(30%,8.5rem)}
@media (max-width:640px){
  .shots-trio .frame.d-laptop{width:100%}
  .shots-trio .frame.d-tablet{width:46%}
  .shots-trio .frame.d-phone{width:30%}
}

/* footer */
footer{border-block-start:1px solid var(--stage-hair);background:var(--stage);
  color:var(--stage-ink-2);padding-block:3rem 3.4rem}
.foot-grid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
footer h4{font-family:var(--mono);font-weight:600;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stage-ink-3);margin:0 0 .6rem}
footer a{display:block;color:var(--stage-ink-2);text-decoration:none;font-size:.9rem;padding:.18rem 0}
footer a:hover{color:var(--stage-ink)}
.colophon{margin-block-start:2.2rem;padding-block-start:1.3rem;border-block-start:1px solid var(--stage-hair);
  color:var(--stage-ink-3);display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.tablewrap{overflow-x:auto}

/* Arabic: the chrome is RTL but the guide copy is still English. 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;text-wrap:normal}
[lang=ar] .mono,[lang=ar] .eyebrow,[lang=ar] .sec-head .idx{
  font-family:var(--sans);letter-spacing:0;text-transform:none}
[dir=rtl] main.ltr-body{text-align:left}

@media (max-width:60rem){
  .hero-grid{grid-template-columns:1fr}
  .plate{width:auto}
  nav.main{gap:.75rem}
  nav.main .hide-sm{display:none}
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .hero h1,.hero .lede,.hero-cta,.hero-note{animation:rise .6s cubic-bezier(.2,.6,.2,1) backwards}
  .hero .lede{animation-delay:.06s}.hero-cta{animation-delay:.12s}.hero-note{animation-delay:.18s}
  .plate{animation:plate .8s cubic-bezier(.2,.6,.2,1) backwards;animation-delay:.1s}
}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes plate{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}