/* =====================================================================
   Falah — falah.css
   Self-hosted fonts, brand tokens, and every component the site uses.
   Fonts: Outfit, Scheherazade New, Amiri Quran — SIL Open Font License.
   ===================================================================== */

@font-face{
  font-family:'Outfit'; src:url('../fonts/outfit-var.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Scheherazade New'; src:url('../fonts/scheherazade-new.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Amiri Quran'; src:url('../fonts/amiri-quran.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}


/* ---------- tokens (from claude/falah-brand-and-ui.md §3) ---------- */
:root{
  --bg:#FFFFFF; --surface:#F3F6FD; --ink:#0F1B3D; --muted:#4E5A76;
  --accent:#335ECE; --accentSoft:#E3E9FA; --highlight:#4267D6;
  --line:#DFE6F5; --onAccent:#FFFFFF;
  --tile:linear-gradient(135deg,#4A72E0 0%,#2447B0 100%);
  --shadow:0 18px 50px rgba(15,27,61,.10);
  --r-card:24px; --r-small:20px; --r-btn:16px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Outfit",var(--sans);
  --arabic:"Scheherazade New","Amiri Quran",serif;
  --pad:24px;
}
html[data-theme="dark"]{
  --bg:#0B1430; --surface:#142049; --ink:#F4F6FC; --muted:#9AA6C8;
  --accent:#7D9BEF; --accentSoft:#1E2C5A; --highlight:#B9CBFF;
  --line:#22305F; --onAccent:#0B1430;
  --shadow:0 18px 50px rgba(0,0,0,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:6px}

.wrap{width:100%; max-width:1120px; margin:0 auto; padding:0 var(--pad)}
section{padding:96px 0}
h1,h2,h3{font-family:var(--display); font-weight:700; margin:0}
h1{font-size:clamp(40px,5.6vw,60px); line-height:1.04; letter-spacing:-.03em}
h2{font-size:clamp(27px,3.2vw,38px); line-height:1.12; letter-spacing:-.02em}
h3{font-size:19px; line-height:1.3; letter-spacing:-.01em}
p{margin:0}
.lede{font-size:clamp(18px,1.9vw,21px); color:var(--muted); max-width:56ch; line-height:1.6}
.note{font-size:13.5px; color:var(--muted)}

/* ---------- wordmark (§4) ---------- */
.wordmark{
  font-family:var(--display); font-weight:700; letter-spacing:-.034em;
  line-height:1; color:var(--ink); position:relative; display:inline-block;
  padding-inline-end:.16em;
}
.wordmark i{
  position:absolute; top:.14em; right:-.15em;
  width:.2em; height:.2em; border-radius:50%; background:var(--accent);
}
.tile{
  width:38px; height:38px; border-radius:22%; background:var(--tile);
  flex:0 0 auto; display:grid; place-items:center;
}
.tile svg{width:84%; height:84%}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
}
header.is-stuck{border-bottom-color:var(--line)}
.bar{display:flex; align-items:center; gap:18px; height:72px}
.brand{display:flex; align-items:center; gap:11px}
.brand:hover{text-decoration:none}
.brand .wordmark{font-size:25px}
nav{margin-inline-start:auto; display:flex; align-items:center; gap:26px}
nav a.link{color:var(--muted); font-size:15px; font-weight:500}
nav a.link:hover{color:var(--ink); text-decoration:none}
.theme{
  width:38px; height:38px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); color:var(--muted); display:grid; place-items:center;
  cursor:pointer; padding:0;
}
.theme:hover{color:var(--ink)}
.theme svg{width:18px; height:18px}
html[data-theme="dark"] .theme .sun{display:none}
html:not([data-theme="dark"]) .theme .moon{display:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:52px; padding:0 24px; border-radius:var(--r-btn);
  background:var(--accent); color:var(--onAccent);
  font:700 16px/1 var(--sans); border:0; cursor:pointer; white-space:nowrap;
}
.btn:hover{text-decoration:none; filter:brightness(1.06)}
.btn-quiet{
  background:transparent; color:var(--accent); padding:0 4px; font-weight:600;
}
.stores{display:flex; flex-wrap:wrap; gap:12px}
.store{
  display:flex; align-items:center; gap:12px;
  min-width:220px; padding:12px 20px; border-radius:var(--r-btn);
  background:var(--ink); color:var(--bg); border:1px solid var(--ink);
}
.store:hover{text-decoration:none; filter:brightness(1.12)}
.store svg{width:20px; height:20px; flex:0 0 auto}
.store b{font:700 16.5px/1.15 var(--sans); display:block; letter-spacing:-.01em}
.store small{font-size:12.5px; opacity:.72; display:block}
.store.is-soon{
  background:var(--surface); color:var(--muted); border-color:var(--line);
  cursor:default; pointer-events:none;
}
.store.is-soon b{color:var(--ink)}

/* ---------- hero ---------- */
.hero{padding:70px 0 84px}
.hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:64px; align-items:center}
.hero h1{margin-bottom:20px}
.hero .lede{margin-bottom:26px}
.privacy-line{
  display:inline-flex; align-items:flex-start; gap:9px; margin-top:22px;
  padding:9px 16px 9px 13px; border-radius:999px;
  background:var(--accentSoft); color:var(--highlight);
  font-size:13.5px; font-weight:600;
}
.privacy-line svg{width:15px; height:15px; margin-top:3px; flex:0 0 auto}

/* ---------- phone ---------- */
.phone{
  width:326px; max-width:100%; margin:0 auto;
  background:var(--bg); border:1px solid var(--line); border-radius:42px;
  box-shadow:var(--shadow); padding:14px; position:relative;
}
.phone-in{
  border-radius:30px; background:var(--bg); overflow:hidden;
  display:flex; flex-direction:column; min-height:600px;
}
.phone-top{
  display:flex; align-items:center; justify-content:center; gap:6px;
  height:22px; color:var(--muted); font-size:11px; font-weight:600;
}
.phone-top .pill{width:52px; height:5px; border-radius:999px; background:var(--line)}
.screen{padding:6px 16px 0; flex:1 1 auto}

.place{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:2px}
.place b{font:600 15.5px/1.3 var(--sans)}
.place svg{width:19px; height:19px; color:var(--muted)}
.dates{font-size:12.5px; color:var(--muted); margin-bottom:10px}

.ring-wrap{position:relative; display:grid; place-items:center; margin:2px 0 6px}
.ring{width:220px; height:220px; transform:rotate(-90deg)}
.ring circle{fill:none; stroke-linecap:round}
.ring .track{stroke:var(--accentSoft); stroke-width:11}
.ring .prog{stroke:var(--accent); stroke-width:11; transition:stroke-dashoffset 1.1s ease-out}
.ring-mid{position:absolute; text-align:center; line-height:1.1}
.ring-ar{font-family:var(--arabic); font-size:25px; color:var(--highlight); line-height:1.5}
.ring-en{font-size:11.5px; font-weight:600; color:var(--muted); letter-spacing:.6px; text-transform:uppercase}
.ring-time{font:700 41px/1.1 var(--sans); letter-spacing:-.02em; margin-top:2px}
.count{
  display:inline-block; margin-top:8px; padding:4px 12px; border-radius:999px;
  background:var(--accentSoft); color:var(--highlight); font-size:12.5px; font-weight:700;
}

.rows{margin-top:8px}
.row{
  display:flex; align-items:center; gap:12px; padding:9px 10px;
  border-radius:14px; font-size:15px;
}
.row.is-next{background:var(--accentSoft)}
.row .ico{width:22px; height:22px; color:var(--muted); flex:0 0 auto}
.row.is-next .ico{color:var(--accent)}
.row .nm{flex:1 1 auto; font-weight:500}
.row.is-next .nm{font-weight:700}
.row .tm{font-variant-numeric:tabular-nums; font-weight:600}
.row .bell{width:17px; height:17px; color:var(--accent); opacity:.8; flex:0 0 auto}
.row.off .bell{color:var(--muted); opacity:.45}

.tabbar{display:flex; gap:4px; padding:8px 12px 10px; border-top:1px solid var(--line)}
.tab{flex:1 1 0; display:grid; justify-items:center; gap:5px; color:var(--muted); font-size:11px; font-weight:600}
.tab svg{width:20px; height:20px}
.tab .tpill{
  width:56px; height:30px; border-radius:999px; display:grid; place-items:center;
}
.tab.on{color:var(--accent); font-weight:700}
.tab.on .tpill{background:var(--accent); color:var(--onAccent)}

/* ---------- feature cards ---------- */
.sec-head{max-width:62ch; margin-bottom:44px}
.sec-head h2{margin-bottom:14px}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:26px 24px 28px;
}
.card .ci{
  width:44px; height:44px; border-radius:12px; background:var(--accentSoft);
  color:var(--accent); display:grid; place-items:center; margin-bottom:16px;
}
.card .ci svg{width:23px; height:23px}
.card h3{margin-bottom:8px}
.card p{color:var(--muted); font-size:15.5px; line-height:1.55}
.card.wide{grid-column:span 2; display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start}
.card.full{grid-column:span 3; display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start}
.card.wide .ci,.card.full .ci{margin-bottom:0}
.card.full p{max-width:70ch}
.methods{display:flex; flex-wrap:wrap; gap:7px; margin-top:14px}
.chip{
  padding:6px 13px; border-radius:999px; background:var(--bg);
  border:1px solid var(--line); color:var(--muted); font-size:13px; font-weight:600;
}
.chip.on{background:var(--accent); border-color:var(--accent); color:var(--onAccent)}
.minor{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:18px}
.minor div{border-top:2px solid var(--line); padding-top:16px}
.minor h3{font-size:16px; margin-bottom:6px}
.minor p{color:var(--muted); font-size:14.5px; line-height:1.5}

/* tinted sections: cards step forward on page background */
.sec-alt{background:var(--surface); border-block:1px solid var(--line)}
.sec-alt .next div,.sec-alt .langs .lang{background:var(--bg)}

/* ---------- screens rail ---------- */
.rail{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:start}
.rail .phone{width:100%; max-width:300px}
.rail .phone-in{min-height:604px}
.rail>div{display:flex; flex-direction:column}
.cap{max-width:300px; margin:20px auto 0; text-align:center}
.cap h3{margin-bottom:6px}
.cap p{color:var(--muted); font-size:14.5px; line-height:1.5}

/* reader screen */
.banner{
  margin:8px 0 14px; padding:10px 13px; border-radius:14px;
  background:var(--accentSoft); color:var(--highlight); font-size:12.5px; font-weight:600;
}
.rd-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:2px}
.rd-head b{font:600 15.5px/1 var(--sans)}
.rd-head span{font-size:12.5px; color:var(--muted)}
.bism{font-family:var(--arabic); font-size:26px; text-align:center; color:var(--highlight); margin:6px 0 14px}
.ayah{
  font-family:var(--arabic); font-size:25px; line-height:1.95; direction:rtl;
  text-align:justify; text-align-last:right; margin-bottom:12px;
}
.ayah .num{
  font-family:var(--sans); font-size:11px; font-weight:700; color:var(--accent);
  display:inline-grid; place-items:center; width:21px; height:21px;
  border:1.5px solid var(--accent); border-radius:50%; vertical-align:middle; margin:0 5px;
}

/* tasbih screen */
.ph-chips{
  display:flex; gap:6px; overflow:hidden; margin:10px 0 14px;
  -webkit-mask-image:linear-gradient(90deg,#000 78%,transparent);
  mask-image:linear-gradient(90deg,#000 78%,transparent);
}
.ph-chips .chip{white-space:nowrap; font-size:12.5px}
.ph-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-small);
  padding:16px; text-align:center; margin-bottom:16px;
}
.ph-card .ar{font-family:var(--arabic); font-size:29px; color:var(--highlight); line-height:1.6}
.ph-card .en{font-size:13px; color:var(--muted)}
.dial{width:180px; height:180px; margin:0 auto}
.dial-mid{font:700 38px/1 var(--sans)}
.dial-sub{font-size:12.5px; color:var(--muted); margin-top:6px}
.stats{display:flex; gap:10px; margin-top:16px}
.stat{
  flex:1 1 0; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-small); padding:12px; text-align:center;
}
.stat b{display:block; font:700 20px/1.2 var(--sans)}
.stat span{font-size:12px; color:var(--muted)}

/* qibla screen */
.compass{width:230px; height:230px; margin:14px auto 0}
.qb-read{text-align:center; margin-top:16px}
.qb-read b{font:700 30px/1.1 var(--sans)}
.qb-read p{color:var(--muted); font-size:13.5px; margin-top:4px}

/* ---------- privacy band ---------- */
.band{
  background:#0B1430; color:#F4F6FC; border-radius:32px;
  padding:64px 56px; position:relative; overflow:hidden;
}
.band h2{color:#fff; max-width:22ch}
.band .lede{color:#B9CBFF; margin-top:16px}
.band-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.perm{background:#142049; border:1px solid #22305F; border-radius:var(--r-card); padding:22px 24px}
.perm p{font-size:13px; color:#9AA6C8; margin-bottom:14px}
.perm ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.perm li{display:flex; align-items:center; gap:11px; font-size:14.5px; color:#F4F6FC}
.perm li svg{width:17px; height:17px; color:#7D9BEF; flex:0 0 auto}
.perm code{
  font:600 13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#B9CBFF; background:#0B1430; padding:2px 7px; border-radius:6px;
}
.perm .yes{color:#9AA6C8; font-size:13px; margin-top:16px; display:block}

/* ---------- quran accuracy ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.figures{display:flex; gap:36px; margin-top:26px; flex-wrap:wrap}
.figures div b{display:block; font:700 32px/1.1 var(--display); letter-spacing:-.02em}
.figures div span{font-size:14px; color:var(--muted)}
.sample{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:30px 28px;
}
.sample .lbl{font-size:13px; color:var(--muted); margin-bottom:12px}
.sample .clear{font-family:"Scheherazade New",serif; font-size:30px; line-height:1.9; direction:rtl; text-align:right}
.sample .trad{font-family:"Amiri Quran","Scheherazade New",serif; font-size:28px; line-height:1.9; direction:rtl; text-align:right}
.sample hr{border:0; border-top:1px solid var(--line); margin:22px 0}

/* ---------- languages ---------- */
.langs{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
.lang{
  display:flex; align-items:baseline; gap:10px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:10px 20px;
}
.lang b{font:600 16px/1 var(--sans)}
.lang span{font-size:13.5px; color:var(--muted)}
.lang .rtl{direction:rtl}

/* ---------- next / cta / footer ---------- */
.next{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:34px}
.next div{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-small); padding:20px}
.next h3{font-size:16px; margin-bottom:6px}
.next p{font-size:14.5px; color:var(--muted); line-height:1.5}

.cta{text-align:center; padding:88px 0}
.cta .tile{width:76px; height:76px; margin:0 auto 26px}
.cta .wordmark{font-size:46px}
.cta h2{margin:18px auto 14px; max-width:24ch}
.cta .lede{margin:0 auto 30px}
.cta .stores{justify-content:center}

footer{border-top:1px solid var(--line); padding:52px 0 64px; color:var(--muted); font-size:14px}
.f-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px}
.f-grid h3{font-size:14px; color:var(--ink); margin-bottom:14px}
.f-grid ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.f-grid a{color:var(--muted)}
.f-grid a:hover{color:var(--ink)}
.badge-link{display:inline-block; margin-top:20px; line-height:0}
.badge-link:hover{text-decoration:none; opacity:.85}
.badge-link img{width:234px; height:54px; max-width:100%}
.badge-link.is-fallback span{
  display:inline-flex; align-items:center; min-height:44px;
  padding:0 18px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); color:var(--muted);
  font:600 13px/1.2 var(--sans); letter-spacing:.01em;
}

.credits{margin-top:44px; padding-top:26px; border-top:1px solid var(--line); font-size:13px; line-height:1.7}

/* ---------- motion: one load moment only ---------- */
.reveal{opacity:0; transform:translateY(10px)}
.ready .reveal{opacity:1; transform:none; transition:opacity .9s ease, transform .9s ease}
.ready .reveal.d1{transition-delay:.10s}
.ready .reveal.d2{transition-delay:.20s}
.ready .reveal.d3{transition-delay:.30s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.ready .reveal{opacity:1; transform:none; transition:none}
  .ring .prog{transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  section{padding:76px 0}
  .hero-grid,.split,.band-grid{grid-template-columns:1fr; gap:44px}
  .band{padding:48px 32px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .card.wide{grid-column:span 2}
  .card.full{grid-column:span 2}
  .f-grid{grid-template-columns:1.3fr 1fr 1fr; gap:32px}
  .minor,.next{grid-template-columns:repeat(2,1fr)}
  .rail{grid-template-columns:1fr; gap:52px; justify-items:center}
  .rail .phone{width:326px}
  .hero .phone{margin-top:8px}
}
@media (max-width:640px){
  :root{--pad:20px}
  section{padding:62px 0}
  .bar{height:64px; gap:12px}
  nav{gap:14px}
  nav a.link{display:none}
  .grid{grid-template-columns:1fr}
  .card.wide,.card.full{grid-column:span 1; grid-template-columns:1fr}
  .card.wide .ci,.card.full .ci{margin-bottom:16px}
  .f-grid{grid-template-columns:1fr 1fr; gap:30px}
  .prose table{table-layout:fixed}
  .prose td:first-child{white-space:normal; overflow-wrap:break-word}
  .prose th,.prose td{padding:11px 10px}
  .f-grid>div:first-child{grid-column:span 2}
  .minor,.next{grid-template-columns:1fr}
  .store{min-width:0; flex:1 1 240px}
  .band{padding:38px 22px; border-radius:26px}
  .figures{gap:24px}
  .phone{width:100%; max-width:326px}
}

/* =====================================================================
   Navigation: skip link + mobile menu
   ===================================================================== */
.skip{
  position:absolute; left:-9999px; top:8px; z-index:100;
  background:var(--accent); color:var(--onAccent);
  padding:10px 16px; border-radius:10px; font-weight:600;
}
.skip:focus{left:16px; text-decoration:none}

.menu-btn{
  display:none; width:38px; height:38px; padding:0;
  border-radius:999px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink); cursor:pointer; place-items:center;
}
.menu-btn svg{width:19px; height:19px}
.menu-btn .x{display:none}
.menu-btn[aria-expanded="true"] .x{display:block}
.menu-btn[aria-expanded="true"] .b{display:none}
.mobile-nav{display:none}
.mobile-nav.open{display:block}
.mobile-nav ul{
  list-style:none; margin:0; padding:10px 0 22px;
  border-top:1px solid var(--line); display:grid; gap:2px;
}
.mobile-nav a{
  display:block; padding:13px 4px; color:var(--ink);
  font-size:17px; font-weight:600; border-radius:12px;
}
.mobile-nav a:hover{text-decoration:none; background:var(--surface)}

/* =====================================================================
   Interior pages
   ===================================================================== */
.page-head{padding:60px 0 8px}
.page-head .kicker{
  display:inline-block; margin-bottom:18px; padding:6px 14px; border-radius:999px;
  background:var(--accentSoft); color:var(--highlight); font-size:13px; font-weight:600;
}
.page-head h1{font-size:clamp(34px,4.6vw,52px); max-width:20ch}
.page-head .lede{margin-top:18px}
.page-head .meta{margin-top:22px; font-size:13.5px; color:var(--muted)}

.prose-layout{
  display:grid; grid-template-columns:230px minmax(0,1fr); gap:56px;
  align-items:start; padding-top:16px;
}
.toc{position:sticky; top:96px}
.toc p{font-size:13px; color:var(--muted); margin-bottom:12px}
.toc ol{list-style:none; margin:0; padding:0; display:grid; gap:2px; counter-reset:t}
.toc a{
  display:block; padding:7px 12px; border-radius:10px;
  color:var(--muted); font-size:14.5px; line-height:1.35;
}
.toc a:hover{background:var(--surface); color:var(--ink); text-decoration:none}

.prose{max-width:70ch; font-size:16.5px; line-height:1.7}
.prose h2{
  font-size:22px; letter-spacing:-.01em; margin:44px 0 12px;
  scroll-margin-top:100px;
}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:17px; margin:28px 0 8px}
.prose p{margin:0 0 14px; color:var(--muted)}
.prose p strong{color:var(--ink); font-weight:600}
.prose ul,.prose ol{margin:0 0 18px; padding-inline-start:22px; color:var(--muted)}
.prose li{margin-bottom:9px}
.prose li strong{color:var(--ink); font-weight:600}
.prose a{font-weight:600}
.prose hr{border:0; border-top:1px solid var(--line); margin:40px 0}
.prose code{
  font:600 14px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--accentSoft); color:var(--highlight);
  padding:2px 7px; border-radius:6px; white-space:nowrap;
}
.prose .ar{font-family:var(--arabic); font-size:1.16em; line-height:1}
.prose .callout{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-small);
  padding:20px 22px; margin:0 0 24px;
}
.prose .callout p:last-child{margin-bottom:0}
.prose .callout p{color:var(--ink)}
.prose .lead{font-size:18.5px; color:var(--ink); line-height:1.6}
.prose table{
  width:100%; border-collapse:collapse; margin:0 0 22px; font-size:15.5px;
}
.prose th,.prose td{
  text-align:start; padding:12px 14px; border-bottom:1px solid var(--line);
  vertical-align:top;
}
.prose th{font-weight:600; color:var(--ink); font-size:13.5px}
.prose td{color:var(--muted)}
.prose td:first-child{color:var(--ink); font-weight:500; white-space:nowrap}

/* FAQ */
.faq{max-width:76ch}
.faq h2{font-size:21px; margin:48px 0 14px}
.faq h2:first-child{margin-top:0}
.faq details{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-small); margin-bottom:10px; overflow:hidden;
}
.faq summary{
  cursor:pointer; padding:17px 22px; font-weight:600; font-size:16.5px;
  list-style:none; display:flex; align-items:center; gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{
  font:inherit; font-family:var(--sans); margin:0;
  letter-spacing:normal; line-height:1.35;
}
.faq summary::after{
  content:''; margin-inline-start:auto; width:9px; height:9px; flex:0 0 auto;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translateY(-2px); transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.faq .body{padding:0 22px 20px; color:var(--muted); font-size:16px; line-height:1.65}
.faq .body p{margin:0 0 12px}
.faq .body p:last-child{margin-bottom:0}
.faq .body ul{margin:0 0 12px; padding-inline-start:20px}
.faq .body li{margin-bottom:7px}

/* contact + about blocks */
.contact-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:30px 30px 32px; display:grid; gap:8px; max-width:520px;
}
.contact-card h2{font-size:20px}
.contact-card p{color:var(--muted); font-size:16px}
.contact-card .btn{margin-top:14px; justify-self:start}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}

/* 404 */
.gone{text-align:center; padding:120px 0 130px}
.gone .tile{width:64px; height:64px; margin:0 auto 26px}
.gone h1{font-size:clamp(32px,4vw,44px); margin-bottom:16px}
.gone .lede{margin:0 auto 30px}
.gone .links{display:flex; gap:22px; justify-content:center; flex-wrap:wrap; font-weight:600}

@media (max-width:1000px){
  .prose-layout{grid-template-columns:minmax(0,1fr); gap:34px}
  .toc{position:static; background:var(--surface); border:1px solid var(--line);
       border-radius:var(--r-small); padding:18px 16px}
  .two-col{grid-template-columns:1fr; gap:36px}
}
@media (max-width:640px){
  nav{gap:9px}
  nav .btn{height:44px; padding:0 15px; font-size:15px}
  .menu-btn{display:grid}
  .page-head{padding:40px 0 4px}
  .brand .wordmark{font-size:23px}
  .contact-card{padding:24px}
}

@media (max-width:360px){
  .theme{display:none}
  .brand .tile{width:34px; height:34px}
}