/* ══════════════════════════════════════════════════════════════════════
   James — fremontpartner.com
   Dark hero → paper body. Hand-written, no build step.
   Everything tunable lives in :root. Change a token, change the page.
   ══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url('../fonts/newsreader-normal.woff2') format('woff2-variations');}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/inter-normal.woff2') format('woff2-variations');}

:root{
  /* ── ink (dark zone) ── */
  --ink-900:#0B0E13;
  --ink-850:#0E1219;
  --ink-800:#12171F;
  --ink-700:#1A202A;
  --ink-600:#252D3A;

  /* ── paper (light zone) ── */
  --paper:#FAF8F4;
  --paper-2:#F2EFE8;
  --ink:#12161C;
  --ink-mid:#4B5462;
  --ink-dim:#79818F;

  /* ── text on dark ── */
  --cream:#F4F1EA;
  --cream-mid:rgba(244,241,234,.68);
  --cream-dim:rgba(244,241,234,.42);

  /* ── accents ── */
  --brass:#C8A465;          /* on dark  */
  --brass-ink:#87682E;      /* on paper */
  --signal:#7FB3D3;         /* cool, for system/technical affordances */
  --signal-ink:#2E6D91;

  --rule-dark:rgba(244,241,234,.13);
  --rule-light:rgba(18,22,28,.12);

  /* ── type ──
     The CJK families are fallbacks, not overrides: Inter and Newsreader have no
     Chinese glyphs, so the browser only reaches them for CJK codepoints. The
     English page is byte-for-byte unaffected. */
  --cjk-sans:'PingFang SC','Hiragino Sans GB','Source Han Sans SC','Noto Sans CJK SC','Microsoft YaHei';
  --cjk-serif:'Songti SC','Source Han Serif SC','Noto Serif CJK SC','STSong','SimSun';
  --f-display:'Newsreader','Iowan Old Style','Palatino Linotype',Georgia,var(--cjk-serif),serif;
  --f-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,var(--cjk-sans),sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  --f-cjk:var(--cjk-sans),sans-serif;

  /* ── metrics ── */
  --maxw:1300px;
  --gutter:clamp(20px,5vw,52px);
  --nav-h:66px;
  --phw:225px;              /* phone width  */
  --phh:470px;              /* phone height */
  --mailw:520px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ══ reset ══ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-ui);font-size:17px;line-height:1.62;
  font-feature-settings:"cv05" 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
summary::-webkit-details-marker{display:none}

.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}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--cream);padding:12px 18px;border-radius:0 0 6px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:800px}
.center{text-align:center}
.mono{font-family:var(--f-mono);font-size:.9em;letter-spacing:-.01em}

/* ══════════════════════════════ nav ══════════════════════════════ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.nav__in{
  max-width:var(--maxw);width:100%;margin:0 auto;padding-inline:var(--gutter);
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);
}
.wordmark{
  font-family:var(--f-display);font-size:23px;font-weight:500;letter-spacing:-.015em;
  text-decoration:none;color:var(--cream);transition:color .35s var(--ease);margin-right:auto;
}
.nav__links{display:flex;gap:clamp(14px,2.2vw,30px)}
.nav__links a{
  font-size:14px;font-weight:450;letter-spacing:.005em;text-decoration:none;
  color:var(--cream-mid);transition:color .2s;position:relative;padding-block:6px;
}
.nav__links a:hover{color:var(--cream)}
.nav__links a[aria-current="true"]{color:var(--cream)}
.nav__links a[aria-current="true"]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brass);
}

/* ── language toggle ── */
.lang{
  display:flex;align-items:center;gap:9px;flex:0 0 auto;
  font-size:12.5px;font-weight:500;letter-spacing:.03em;
  padding-right:15px;margin-right:-2px;border-right:1px solid var(--rule-dark);
}
.lang__on{color:var(--brass)}
.lang__off{color:var(--cream-dim);text-decoration:none;transition:color .2s}
.lang__off:hover{color:var(--cream)}
.nav[data-over="paper"] .lang{border-right-color:var(--rule-light)}
.nav[data-over="paper"] .lang__on{color:var(--brass-ink)}
.nav[data-over="paper"] .lang__off{color:var(--ink-dim)}
.nav[data-over="paper"] .lang__off:hover{color:var(--ink)}

/* Once you leave the hero the bar gets a backdrop — but which one depends on the
   band currently passing under it, so the page can alternate ink/paper freely
   without the nav ever sitting on the wrong ground. [data-over] is set in site.js. */
.nav.is-stuck{backdrop-filter:saturate(1.6) blur(14px)}
.nav.is-stuck[data-over="ink"]{background:rgba(11,14,19,.78);border-bottom-color:var(--rule-dark)}
.nav.is-stuck[data-over="paper"]{background:rgba(250,248,244,.84);border-bottom-color:var(--rule-light)}

.nav[data-over="paper"] .wordmark{color:var(--ink)}
.nav[data-over="paper"] .nav__links a{color:var(--ink-mid)}
.nav[data-over="paper"] .nav__links a:hover,
.nav[data-over="paper"] .nav__links a[aria-current="true"]{color:var(--ink)}
.nav[data-over="paper"] .nav__links a[aria-current="true"]::after{background:var(--brass-ink)}
.nav[data-over="paper"] .btn--ghost{border-color:var(--rule-light);color:var(--ink)}
.nav[data-over="paper"] .btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ══════════════════════════════ buttons ══════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;
  font-size:15px;font-weight:500;letter-spacing:-.005em;text-decoration:none;
  padding:12px 22px;border-radius:2px;border:1px solid transparent;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
}
.btn--sm{padding:8px 16px;font-size:14px}
.btn--lg{padding:15px 32px;font-size:16px}
.btn--solid{background:var(--cream);color:var(--ink-900);border-color:var(--cream)}
.btn--solid:hover{background:#fff;transform:translateY(-1px)}
.btn--ghost{border-color:var(--rule-dark);color:var(--cream)}
.btn--ghost:hover{background:var(--cream);color:var(--ink-900);border-color:var(--cream)}
.btn--quiet{color:var(--cream-mid);padding-inline:4px}
.btn--quiet:hover{color:var(--cream)}

/* ══════════════════════════════ hero ══════════════════════════════ */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--ink-900);color:var(--cream);
  padding-top:calc(var(--nav-h) + clamp(22px,3.4vh,44px));
}
.hero__wash{
  position:absolute;inset:-20% -10% auto -10%;height:120%;z-index:-2;
  background:
    radial-gradient(58% 42% at 50% 4%,rgba(200,164,101,.12),transparent 70%),
    radial-gradient(70% 55% at 50% 78%,rgba(127,179,211,.13),transparent 72%);
}
.hero__grain{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.hero__in{max-width:920px;text-align:center;padding-inline:var(--gutter);margin-inline:auto}

.eyebrow{
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass-ink);margin-bottom:14px;
}
.eyebrow--dark{color:var(--brass)}

.hero__h1{
  font-family:var(--f-display);font-weight:400;letter-spacing:-.021em;
  font-size:clamp(2.05rem,3.7vw,3.2rem);line-height:1.07;
  text-wrap:balance;margin-bottom:16px;
}
.hero__h1-tail{color:var(--cream-mid)}
/* a three-word headline can carry far more size and weight than a sentence one */
.hero__h1--bold{font-weight:640;font-size:clamp(2.35rem,5.2vw,4.35rem);letter-spacing:-.028em}
.hero__sub{
  max-width:730px;margin:0 auto;font-size:clamp(15.5px,1.2vw,17px);line-height:1.62;
  color:var(--cream-mid);text-wrap:pretty;
}
.hero__cta{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:26px}
.hero__note{
  margin-top:14px;font-size:12.5px;letter-spacing:.02em;color:var(--cream-dim);
}

/* ── device stage ── */
/* The stage runs wider than the text column — it is the picture, not the prose.
   Tracks are content-sized and centred so the four devices read as one cluster
   instead of drifting to opposite edges. Captions sit ABOVE the devices so they
   survive the fold on a laptop, where the phones are deliberately cut off. */
.stage{position:relative;margin-top:clamp(26px,3.6vh,42px);padding-bottom:clamp(40px,6vh,72px)}
.stage__rail{
  max-width:1460px;margin:0 auto;padding-inline:clamp(16px,3vw,44px);
  display:grid;grid-template-columns:minmax(0,var(--mailw)) auto;
  justify-content:center;gap:clamp(20px,2.4vw,34px);align-items:start;
  padding-top:26px;
}
.stage__phones{display:flex;gap:14px}
.stage__hint{display:none}

.dev{position:relative;margin:0}
.dev__cap{
  position:absolute;left:0;right:0;top:-24px;text-align:center;
  font-size:10px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--cream-dim);
}

/* ══════════════════════════════ phone shell ══════════════════════════════ */
.phone{
  width:var(--phw);height:var(--phh);flex:0 0 auto;
  border-radius:34px;padding:7px;
  background:linear-gradient(155deg,#3A424E 0%,#161B23 38%,#0D1117 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07),
    0 26px 50px -18px rgba(0,0,0,.85),
    0 4px 14px rgba(0,0,0,.5);
}
.phone__scr{
  position:relative;width:100%;height:100%;border-radius:27px;overflow:hidden;
  background:#fff;display:flex;flex-direction:column;
  font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',var(--cjk-sans),sans-serif;
  color:#000;
}
.ios-bar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:9px 17px 3px;font-size:10.5px;font-weight:640;letter-spacing:.01em;color:#000;
}
.ios-bar--dk{color:#000}
.ios-bar__r{display:flex;align-items:center;gap:3.5px}
.ios-bar__r svg{height:8px;width:auto}
.home-ind{
  position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  width:88px;height:4px;border-radius:2px;background:rgba(0,0,0,.85);
}
.home-ind--dk{background:rgba(0,0,0,.8)}

.ava{
  display:grid;place-items:center;flex:0 0 auto;
  font-weight:600;color:#fff;letter-spacing:0;
}
.chat{flex:1 1 auto;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.b{max-width:80%;padding:6px 10px;font-size:11px;line-height:1.36;letter-spacing:-.005em;word-wrap:break-word}

/* ── iMessage ── */
.dev--ios .phone__scr{background:#fff}
.ios-hdr{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;
  padding:5px 12px 7px;background:rgba(249,249,249,.94);
  border-bottom:.5px solid #D8D8DC;
}
.ios-hdr__back{color:#0A84FF;font-size:19px;line-height:1;font-weight:400;margin-top:-2px}
.ava--ios{width:21px;height:21px;border-radius:50%;background:linear-gradient(160deg,#8E96A3,#5B6472);font-size:9.5px}
.ios-hdr__name{font-size:12px;font-weight:600;letter-spacing:-.01em}
.chat--ios{padding:8px 9px 6px;gap:3px;background:#fff}
.b--ios,.b--in,.b--out{border-radius:15px;position:relative}
.b--in{align-self:flex-start;background:#E9E9EB;color:#000;border-bottom-left-radius:5px}
.b--out{align-self:flex-end;background:linear-gradient(180deg,#2A9BFF,#0A7CFF);color:#fff;border-bottom-right-radius:5px}
.rcpt{align-self:flex-end;font-size:8.5px;color:#8A8A8E;letter-spacing:.01em;margin:1px 4px 0}
.ios-input{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  margin:4px 9px 14px;padding:5px 6px 5px 12px;
  border:.5px solid #D5D5DA;border-radius:15px;font-size:10.5px;color:#A9A9AE;
}
.ios-input em{
  font-style:normal;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:#D6D6DB;color:#fff;font-size:11px;line-height:1;
}

/* ── WeChat ── */
.dev--wc .phone__scr{background:#EDEDED}
.wc-hdr{
  flex:0 0 auto;display:grid;grid-template-columns:20px 1fr 20px;align-items:center;
  padding:4px 12px 8px;background:#EDEDED;border-bottom:.5px solid #D3D3D3;
}
.wc-hdr__back{font-size:19px;line-height:1;margin-top:-2px}
.wc-hdr__name{text-align:center;font-size:12px;font-weight:600;letter-spacing:-.01em}
.wc-hdr__more{text-align:right;font-size:11px;letter-spacing:-.5px;color:#111}
.chat--wc{padding:9px 8px 6px;gap:9px;background:#EDEDED;font-family:var(--f-cjk)}
.wcrow{display:flex;gap:9px;align-items:flex-start}  /* room for the bubble tail */
.wcrow--out{justify-content:flex-end}
.ava--wc{width:22px;height:22px;border-radius:4px;background:linear-gradient(160deg,#5B6472,#39404C);font-size:10px}
.ava--wcme{width:22px;height:22px;border-radius:4px;background:linear-gradient(160deg,#C8CDD4,#9AA2AD)}
.b--wcin,.b--wcout{position:relative;border-radius:5px;font-size:11px;line-height:1.45;max-width:150px;padding:6px 9px}
.b--wcin{background:#fff;color:#191919}
.b--wcout{background:#95EC69;color:#191919}
.b--wcin::before,.b--wcout::before{content:"";position:absolute;top:9px;width:0;height:0;border:4px solid transparent}
.b--wcin::before{left:-7px;border-right-color:#fff}
.b--wcout::before{right:-7px;border-left-color:#95EC69}
.wc-input{
  flex:0 0 auto;display:flex;align-items:center;gap:7px;
  padding:6px 9px 16px;background:#F7F7F7;border-top:.5px solid #DCDCDC;font-size:12px;color:#333;
}
.wc-input i{flex:1 1 auto;height:22px;border-radius:4px;background:#fff}

/* ── Telegram ── */
.dev--tg .phone__scr{background:#C6D8E6}
.tg-hdr{
  flex:0 0 auto;display:flex;align-items:center;gap:7px;
  padding:4px 12px 7px;background:rgba(255,255,255,.94);border-bottom:.5px solid #D6DCE0;
}
.tg-hdr__back{color:#3390EC;font-size:19px;line-height:1;margin-top:-2px}
.ava--tg{width:22px;height:22px;border-radius:50%;background:linear-gradient(160deg,#5CA8E8,#2B7CD3);font-size:9.5px}
.tg-hdr__meta{display:flex;flex-direction:column;line-height:1.2}
.tg-hdr__meta b{font-size:11.5px;font-weight:600;letter-spacing:-.01em}
.tg-hdr__meta i{font-size:9px;font-style:normal;color:#3390EC}
.chat--tg{
  padding:8px 8px 6px;gap:5px;
  background:
    radial-gradient(circle at 20% 18%,rgba(255,255,255,.5),transparent 26%),
    radial-gradient(circle at 76% 62%,rgba(255,255,255,.42),transparent 24%),
    linear-gradient(150deg,#DDE8F1,#BCD2E4);
}
.daymark{
  align-self:center;background:rgba(0,0,0,.22);color:#fff;border-radius:9px;
  padding:1.5px 9px;font-size:8.5px;font-weight:500;margin-bottom:2px;
}
.b--tgin,.b--tgout{
  border-radius:11px;font-size:10.5px;line-height:1.42;max-width:88%;
  box-shadow:0 1px 1px rgba(0,0,0,.09);padding:5px 8px 4px;
}
.b--tgin{align-self:flex-start;background:#fff;color:#000;border-bottom-left-radius:4px}
.b--tgout{align-self:flex-end;background:#EFFDDE;color:#000;border-bottom-right-radius:4px}
.b--tgin b{display:block;font-weight:600;margin-bottom:3px}
.tg-li{display:grid;grid-template-columns:12px 1fr;gap:2px;margin-top:2.5px;color:#22303C}
.tg-li i{font-style:normal;font-weight:600;color:#3390EC;font-size:9.5px}
.tg-time{display:block;text-align:right;font-style:normal;font-size:8px;color:#7C9AAF;margin-top:1px}
.b--tgout .tg-time{color:#5DA95C}
.ticks{letter-spacing:-2.5px;margin-left:2px}
.tg-input{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:7px 12px 16px;background:#fff;font-size:10.5px;color:#A2ACB4;
}
.tg-input em{font-style:normal;color:#8A949C}

/* ══════════════════════════════ mail window ══════════════════════════════ */
.mail{
  border-radius:11px;overflow:hidden;background:#fff;color:#1A1D21;
  font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',var(--cjk-sans),sans-serif;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 30px 60px -20px rgba(0,0,0,.85),
    0 6px 18px rgba(0,0,0,.42);
}
.mail__chrome{
  display:flex;align-items:center;gap:7px;padding:9px 13px;
  background:linear-gradient(180deg,#EFEDEA,#E3E0DC);border-bottom:1px solid #D0CCC6;
}
.dot{width:10px;height:10px;border-radius:50%}
.dot--r{background:#FF5F57}.dot--y{background:#FEBC2E}.dot--g{background:#28C840}
.mail__title{
  flex:1 1 auto;text-align:center;font-size:11.5px;font-weight:600;color:#6C6863;
  letter-spacing:.005em;margin-right:38px;
}
.mail__hdr{display:flex;align-items:flex-start;gap:10px;padding:14px 18px 10px}
.mail__ava{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(160deg,#4A5566,#232B36);
  color:#fff;font-size:13px;font-weight:600;
}
.mail__meta{flex:1 1 auto;min-width:0}
.mail__from{font-size:12.5px;line-height:1.4}
.mail__from b{font-weight:600}
.mail__from span{color:#8A8F97}
.mail__to{font-size:11.5px;color:#8A8F97}
.mail__time{font-size:11px;color:#9AA0A8;flex:0 0 auto}
.mail__subj{
  padding:0 18px 12px;font-size:14.5px;font-weight:600;letter-spacing:-.012em;line-height:1.3;
}
.mail__body{padding:14px 18px 18px;border-top:1px solid #EDEBE7;font-size:12.5px;line-height:1.62;color:#2A2E34}
.mail__body p+p{margin-top:9px}
.mail__body ul{margin:8px 0;display:grid;gap:5px}
.mail__body li{padding-left:14px;position:relative}
.mail__body li::before{content:"";position:absolute;left:2px;top:8.5px;width:4px;height:4px;border-radius:50%;background:#B9BEC6}
.mail__body b{font-weight:600}
.mail__attach{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px !important;
  border:1px solid #DEDCD8;border-radius:6px;padding:7px 11px;background:#FAF9F7;
  font-size:11.5px;font-weight:500;
}
.clip{color:var(--signal-ink);font-size:13px}
.mail__file{white-space:nowrap}
.mail__size{color:#8A8F97;font-weight:400}
.mail__gate{
  display:flex;gap:8px;align-items:flex-start;margin-top:14px !important;
  padding:9px 12px;border-radius:6px;background:#F4F7F9;border-left:2px solid var(--signal-ink);
  font-size:11.5px;line-height:1.55;color:#3A424C;
}
.gate-dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--signal-ink);margin-top:6px}

/* ══════════════════════════════ bands ══════════════════════════════ */
.band{padding-block:clamp(72px,9vw,124px);position:relative}
.band--paper{background:var(--paper)}
.band--paper2{background:var(--paper-2)}
.band--ink{background:var(--ink-900);color:var(--cream);overflow:hidden;isolation:isolate}
.band--cta{background:var(--ink-850);color:var(--cream);text-align:center}

.h2{
  font-family:var(--f-display);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(1.85rem,3.4vw,2.95rem);line-height:1.1;text-wrap:balance;
  max-width:20ch;margin-bottom:clamp(38px,4.5vw,62px);
}
.h2--dark{color:var(--cream);max-width:24ch}
.band--cta .h2{margin-inline:auto;max-width:16ch}
.lede{font-size:18px;color:var(--ink-mid);max-width:56ch}
.lede--dark{color:var(--cream-mid);margin-inline:auto;margin-bottom:34px}
.cta__mail{margin-top:20px;font-size:14px;letter-spacing:.01em}
.cta__mail a{color:var(--brass);text-decoration:none;border-bottom:1px solid rgba(200,164,101,.3);padding-bottom:2px}
.cta__mail a:hover{border-bottom-color:var(--brass)}

/* ── steps ── */
.steps{display:grid;gap:clamp(30px,4vw,54px);grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.step{border-top:1px solid var(--rule-light);padding-top:20px}
.step__n{
  display:block;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;
  color:var(--brass-ink);margin-bottom:14px;
}
.step__h{font-family:var(--f-display);font-size:22px;font-weight:500;letter-spacing:-.015em;line-height:1.22;margin-bottom:9px}
.step p{color:var(--ink-mid);font-size:16px}

/* ── capability grid ──
   Explicit column counts, not auto-fit: there are six cards, and the 1px-gap
   trick paints the container's rule colour through any empty cell, so a track
   count that doesn't divide six leaves a solid grey block in the corner. */
.grid{display:grid;gap:1px;background:var(--rule-light);grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--rule-light)}
.card{background:var(--paper-2);padding:clamp(24px,2.6vw,34px);transition:background .3s var(--ease)}
.card:hover{background:var(--paper)}
.card h3{
  font-family:var(--f-display);font-size:20px;font-weight:500;letter-spacing:-.014em;
  line-height:1.24;margin-bottom:10px;
}
.card p{color:var(--ink-mid);font-size:15.5px;line-height:1.6}

/* ── control list ── */
.ctrl{display:grid;gap:1px;background:var(--rule-dark);grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--rule-dark)}
.ctrl__i{background:var(--ink-900);padding:clamp(24px,2.6vw,34px)}
.ctrl dt{
  font-family:var(--f-display);font-size:20px;font-weight:500;letter-spacing:-.014em;
  line-height:1.24;color:var(--cream);margin-bottom:10px;
}
.ctrl dd{margin:0;color:var(--cream-mid);font-size:15.5px;line-height:1.6}

/* ── timeline ── */
.tl{max-width:760px;display:grid;gap:0}
.tl li{
  display:grid;grid-template-columns:78px 1fr;gap:clamp(16px,3vw,34px);
  padding:18px 0;border-top:1px solid var(--rule-light);align-items:baseline;
}
.tl li:last-child{border-bottom:1px solid var(--rule-light)}
.tl__t{font-family:var(--f-mono);font-size:13px;color:var(--brass-ink);letter-spacing:-.01em}
.tl p{font-size:16.5px;color:var(--ink-mid)}
/* the display face is roman-only, so quoted speech is set upright in the serif
   rather than as a synthesized oblique */
.tl i{font-style:normal;color:var(--ink);font-family:var(--f-display);font-size:1.08em}
.tl__last p{color:var(--ink)}

/* ── faq ── */
.faq{border-top:1px solid var(--rule-light);max-width:840px}
.q{border-bottom:1px solid var(--rule-light)}
.q summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  transition:color .2s;
}
.q summary h3{
  display:inline;font-family:var(--f-display);font-size:clamp(18px,2vw,21px);
  font-weight:500;letter-spacing:-.014em;
}
.q summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--ink-dim);border-bottom:1.5px solid var(--ink-dim);
  transform:translateY(-70%) rotate(45deg);transition:transform .28s var(--ease);
}
.q[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.q summary:hover{color:var(--brass-ink)}
.q p{padding:0 clamp(0px,4vw,56px) 22px 0;color:var(--ink-mid);font-size:16.5px;max-width:70ch}
.q a{color:var(--brass-ink);text-underline-offset:3px}

/* ══════════════════════════════ footer ══════════════════════════════ */
.foot{background:var(--ink-900);color:var(--cream-dim);padding-block:clamp(46px,6vw,72px);border-top:1px solid var(--rule-dark)}
.foot__in{display:grid;gap:9px}
.foot__brand{
  font-family:var(--f-display);font-size:17px;font-weight:500;letter-spacing:.005em;color:var(--cream-mid);
}
.foot__line{font-size:13.5px;color:var(--cream-mid)}
.foot__fine{font-size:11.5px;line-height:1.6;max-width:66ch;color:rgba(244,241,234,.4)}

/* ══════════════════════════════ dev switcher (delete at launch) ══════════ */
.devsw{
  position:fixed;right:14px;bottom:14px;z-index:150;display:flex;gap:6px;align-items:center;
  background:rgba(12,15,20,.9);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);
  border-radius:999px;padding:6px 8px 6px 14px;color:var(--cream-dim);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
}
.devsw button{
  width:26px;height:26px;border-radius:50%;font-size:11px;font-weight:600;
  background:rgba(255,255,255,.08);color:var(--cream-mid);
}
.devsw button[aria-pressed="true"]{background:var(--brass);color:var(--ink-900)}
/* a class with display:flex outranks the UA's [hidden]{display:none} — say it here
   or the switcher stays visible however hidden the attribute says it is */
.devsw[hidden]{display:none}

/* ══════════════════════════════ motion ══════════════════════════════ */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal.is-in{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ══════════════════════════════ Chinese ══════════════════════════════
   Latin display type is tracked tight; Chinese is not. Han glyphs are already
   full-width squares, so negative tracking jams them together, and they need
   more leading than Latin at the same size. */
html[lang^="zh"]{
  --f-mono:var(--cjk-sans),ui-monospace,monospace;   /* CJK has no mono to fall to */
}
html[lang^="zh"] .hero__h1,
html[lang^="zh"] .h2,
html[lang^="zh"] .step__h,
html[lang^="zh"] .card h3,
html[lang^="zh"] .ctrl dt,
html[lang^="zh"] .q summary h3,
html[lang^="zh"] .wordmark{letter-spacing:.005em}
html[lang^="zh"] .hero__h1{line-height:1.18}
html[lang^="zh"] .hero__h1--bold{font-weight:700;letter-spacing:.02em}
/* ch is the width of "0" (~0.5em in Inter), so a ch-based measure only fits
   half as many Han glyphs as intended — measure Chinese in em */
html[lang^="zh"] .h2{line-height:1.32;max-width:19em}
html[lang^="zh"] .h2--dark{max-width:21em}
html[lang^="zh"] .hero__sub{max-width:40em}
html[lang^="zh"] .lede{max-width:32em}
html[lang^="zh"] .eyebrow{letter-spacing:.22em}
html[lang^="zh"] body{line-height:1.78}          /* Han needs more air than Latin */
html[lang^="zh"] .lede,
html[lang^="zh"] .step p,
html[lang^="zh"] .card p,
html[lang^="zh"] .ctrl dd,
html[lang^="zh"] .tl p,
html[lang^="zh"] .q p{line-height:1.85}
html[lang^="zh"] .hero__sub{line-height:1.8}
html[lang^="zh"] .b{line-height:1.55;letter-spacing:0}
html[lang^="zh"] .mail__body{line-height:1.75}
html[lang^="zh"] .tl__t{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
html[lang^="zh"] .step__n{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
html[lang^="zh"] .foot__fine{line-height:1.75}

/* ══════════════════════════════ responsive ══════════════════════════════ */
@media (max-width:1240px){
  :root{--phw:206px;--phh:432px;--mailw:462px}
  .b{font-size:10.5px}
}

/* ── tablet: mail on top, phones in a row underneath ── */
@media (max-width:1040px){
  :root{--phw:222px;--phh:462px}
  .hero__in{max-width:660px}          /* keep the h1 off a single stretched line */
  .grid,.ctrl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage__rail{grid-template-columns:1fr;justify-items:center;gap:40px}
  .dev--mail{width:min(600px,100%)}
  .stage__phones{justify-content:center}
  .dev__cap{bottom:-26px}
}

/* ── phone: scroll-snap carousel ── */
@media (max-width:820px){
  :root{--phw:250px;--phh:520px;--nav-h:58px}
  .nav__links{display:none}
  .stage__rail{
    display:flex;grid-template-columns:none;gap:20px;align-items:flex-start;
    /* MUST reset the desktop centring: a centred, overflowing flex row puts its
       first item at a negative offset that no amount of scrolling can reach */
    justify-content:flex-start;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    /* matches padding-inline, so the rail rests at scrollLeft 0 with the email
       card — the front door — first, instead of snapping past it on load */
    scroll-padding-inline:clamp(16px,3vw,44px);
    padding-block:30px 40px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .stage__rail::-webkit-scrollbar{display:none}
  .stage__phones{display:contents}
  .dev{scroll-snap-align:start;flex:0 0 auto}
  .dev--mail{width:300px}
  .stage__hint{
    display:block;text-align:center;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--cream-dim);margin-top:2px;
  }
  .hero__h1{font-size:clamp(2rem,8vw,2.6rem)}
  .h2{max-width:none}
  .tl li{grid-template-columns:62px 1fr}
}

@media (max-width:620px){
  .grid,.ctrl{grid-template-columns:1fr}
}

@media (max-width:520px){
  body{font-size:16px}
  .nav__cta{padding:7px 13px;font-size:13px}
  .hero__sub{font-size:15.5px}
  .hero__cta{flex-direction:column;align-items:stretch;gap:6px}
  .hero__cta .btn{justify-content:center}
}