/* Generated by tools/gen-trade-pages.mjs. Tokens mirror site/index.html :root. */
:root{--navy:#0a1830;--ink:#16233b;--mut:#5d6b80;--org:#f97316;--org2:#ea580c;
  --mint:#34d399;--bg:#f6f8fc;--card:#fff;--line:#e5eaf2;--shadow:0 10px 40px rgba(10,24,48,.10);
  /* page-local text tones that used to be hard-coded; each has a dark twin below */
  --ink2:#243449;--ink3:#3b4c66;--mut2:#6b7f9c;--org-deep:#c2410c}
/* The ONE light/dark switch (docs/SITE-HEADER-THEME-CONTRACT.md §4): a token swap. --navy, --org,
   --org2 and --mint do not change - the navy band is already dark and the accents must read the same. */
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b1220; --card:#121b30; --line:#243149;
  --ink:#e6ecf7; --mut:#9fb0c8;
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --ink2:#d5deec;--ink3:#c0cbdc;--mut2:#9fb0c8;--org-deep:#fb923c
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font:16px/1.65 Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg);overflow-x:hidden}
h1,h2,h3{font-family:Sora,Inter,sans-serif;line-height:1.15}
a{color:inherit;text-decoration:none}
.wrap{max-width:1000px;margin:0 auto;padding:0 22px}
/* ── header: the homepage's lockup, menu and switch, pixel for pixel (contract §1-§3) ── */
nav{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.93);backdrop-filter:blur(12px);border-bottom:1px solid rgba(15,23,42,.08)}
[data-theme="dark"] nav{background:rgba(11,18,32,.92);border-bottom-color:rgba(255,255,255,.08)}
/* The header container is the homepage's 1100px, 22px in from the edge (the article below keeps its
   1000px reading width): the mark lands at the same x on every page - 22px on phones, 112 at 1280. */
nav .wrap{max-width:1100px}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:66px;padding:8px 22px}
.nav-in>*{min-width:0}
.logo{display:flex;align-items:center;gap:11px;font-family:Sora;font-weight:800;font-size:17px;color:var(--ink);line-height:1.15}
.logo span{white-space:nowrap}
.logo small{display:block;font-family:Inter;font-size:10px;font-weight:600;color:var(--mut);letter-spacing:1.2px;line-height:1.35;margin-top:2px;margin-right:-1.2px}
.logo .logomark{width:34px;height:34px;flex:0 0 auto;vertical-align:middle}
.nav-links{display:flex;flex-wrap:nowrap;gap:20px;font-weight:600;font-size:14.5px}
.nav-links a{white-space:nowrap}
.nav-links a:hover{color:var(--org)}
.theme-sw{width:40px;height:40px;flex:0 0 auto;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.theme-sw:hover{border-color:var(--org)}
.theme-sw .moon{display:none}
[data-theme="dark"] .theme-sw .sun{display:none}
[data-theme="dark"] .theme-sw .moon{display:block}
/* His 2026-09-09 13:45 "A": the AI Receptionist page's menu on every page - a boxed ☰ that becomes ✕
   (same box as the theme switch) and a surface-coloured panel of icon tiles + the button. Copied from
   site/index.html, which copied it from the live React page; not redesigned. */
.burger{display:none;width:40px;height:40px;flex:0 0 auto;padding:0;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;place-items:center}
.burger:hover{border-color:var(--org)}
.burger svg{width:20px;height:20px;display:block}
.burger .ico-x{display:none}
.burger.open .ico-menu{display:none}
.burger.open .ico-x{display:block}
.m-menu{display:none;position:fixed;inset:var(--navh,66px) 0 auto 0;z-index:89;background:var(--card);border-bottom:1px solid var(--line);padding:8px 12px 16px;flex-direction:column;gap:8px;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);max-height:calc(100dvh - var(--navh,66px));overflow:auto;overscroll-behavior:contain}
[data-theme="dark"] .m-menu{background:#020617;border-color:#1e293b}
.m-menu.show{display:flex}
.m-menu .m-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.m-menu .m-grid a{display:block;padding:8px;border-radius:12px;font-size:12px;font-weight:600;line-height:1.5;background:#f8fafc;color:#334155;border:1px solid #e2e8f0}
.m-menu .m-grid a.hot{background:#fff7ed;color:#9a3412;border-color:rgba(249,115,22,.4)}
[data-theme="dark"] .m-menu .m-grid a{background:#0f172a;color:#e2e8f0;border-color:#1e293b}
[data-theme="dark"] .m-menu .m-grid a.hot{background:rgba(249,115,22,.12);color:#fdba74;border-color:rgba(249,115,22,.45)}
.m-menu .m-ctas{display:flex;flex-direction:column;gap:6px}
.m-menu .m-ctas .btn{width:100%;text-align:center;padding:10px 14px;font-size:12px;font-weight:800;border-radius:12px;margin:0}
.btn{display:inline-block;white-space:nowrap;background:var(--org);color:#fff;font-weight:700;padding:12px 20px;border-radius:11px;box-shadow:0 6px 18px rgba(249,115,22,.28)}
.btn.ghost{background:var(--card);color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn:hover{background:var(--org2)}
.hero{background:linear-gradient(180deg,var(--card),var(--bg));padding:62px 0 44px;border-bottom:1px solid var(--line)}
.crumb{font-size:13px;color:var(--mut);font-weight:600;margin-bottom:16px}
.crumb a:hover{color:var(--org)}
.tmoji{font-size:44px;line-height:1;margin-bottom:14px}
h1{font-size:clamp(30px,5.2vw,50px);font-weight:800;letter-spacing:-.02em}
.moment{margin:22px 0 0;font-size:clamp(17px,2.2vw,20px);line-height:1.62;color:var(--ink2);
  max-width:62ch;border-left:4px solid var(--org);padding-left:18px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;align-items:center}
.fine{font-size:11.5px;color:var(--mut);margin-top:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
section{padding:52px 0}
section.alt{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kicker{display:inline-block;font-size:11px;letter-spacing:.15em;font-weight:800;color:var(--org);text-transform:uppercase;margin-bottom:10px}
h2{font-size:clamp(23px,3.4vw,32px);font-weight:800;margin-bottom:8px}
.sub{color:var(--mut);margin-bottom:24px;max-width:60ch}
.asks{display:grid;gap:12px;max-width:640px}
/* the sample call: a transcript, not a chat toy — two speakers, the business's one highlighted */
.talk{display:grid;gap:10px;max-width:680px}
.turn{display:grid;gap:3px;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card)}
.turn.ava{background:#fff7f2;border-color:#f6d3bd}
[data-theme="dark"] .turn.ava{background:rgba(249,115,22,.10);border-color:rgba(249,115,22,.35)}
.turn .who{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--mut2)}
.turn.ava .who{color:var(--org-deep)}
.turn p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink2)}
.caps{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:4px}
.cap{display:flex;gap:9px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--ink2)}
.cap .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--org-deep);margin-top:8px}
.faq{display:grid;gap:14px;max-width:720px}
.faq details{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:0}
.faq summary{cursor:pointer;padding:14px 16px;font-weight:700;font-size:16px;color:var(--ink);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--org-deep);font-weight:800}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 16px 14px;font-size:15px;line-height:1.6;color:var(--ink3);margin:0}
.hearit{margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.hearit h3{margin:0 0 4px;font-size:17px;color:var(--ink)}
.hearit audio{width:100%;margin-top:10px}
.hearit .fine{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--mut2)}
.ask{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 18px;box-shadow:var(--shadow);font-size:16.5px}
.ask b{color:var(--org);font-weight:800}
.ask b:first-child{margin-right:5px}
.ask b:last-child{margin-left:2px}
.wins{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:4px}
.win{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow)}
.win .tick{color:var(--mint);font-weight:800;font-size:19px;display:block;margin-bottom:6px}
.band{background:var(--navy);color:#dbe6f5}
.band h2{color:#fff}
.band .sub{color:#9db0cc}
.steps{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.step{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:20px}
.step .n{font-size:24px;margin-bottom:8px}
.step h3{color:#fff;font-size:17px;margin-bottom:6px}
.others{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px}
.chip{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-weight:600;font-size:14px}
.chip:hover{border-color:var(--org);color:var(--org)}
.gh{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut);font-weight:800;margin:26px 0 10px}
footer{border-top:1px solid var(--line);padding:30px 0;color:var(--mut);font-size:13.5px;background:var(--card)}
footer a:hover{color:var(--org)}
/* 1100px is the homepage's breakpoint: links and CTA fold into the burger's sheet, the switch stays
   in the bar (a phone user must not have to open the menu to find it) and sits beside the burger. */
@media(max-width:1100px){.nav-links,.nav-cta{display:none}.burger{display:grid}.theme-sw{margin-left:auto}}
@media(max-width:720px){section{padding:38px 0}}
/* The phone-width lockup steps are the homepage's, byte for byte (docs/SITE-HEADER-THEME-CONTRACT.md
   §1): 14px/34px mark ≤520, 12.5px/30px ≤460, 13px + a wrapping name ≤430. (.logo .logomark, not
   .logo img: the 34px rule above is two classes deep and would otherwise win.) */
@media(max-width:520px){.logo{font-size:14px;gap:9px}.logo .logomark{width:34px;height:34px}
  .logo small{font-size:8.5px;letter-spacing:.6px}}
@media(max-width:460px){.logo{font-size:12.5px;gap:8px}.logo .logomark{width:30px;height:30px}
  .logo small{font-size:8px;letter-spacing:.4px}}
@media(max-width:430px){.logo{font-size:13px}.logo span{white-space:normal}}