/* FIN-TECHAI — shared page furniture for every non-React marketing page.
   Tokens come from styles.css; this file only adds layout primitives. */
html{-webkit-text-size-adjust:100%}
body{background:var(--page-bg);margin:0;overflow-wrap:break-word}
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:920px;margin:0 auto;padding:0 var(--gutter)}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover)}
h1,h2,h3,h4{color:var(--text-strong);text-wrap:pretty}
.kick{font-family:var(--font-mono);font-weight:var(--fw-mono);font-size:var(--fs-micro);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.h1{font-size:clamp(var(--fs-h1-m),5vw,var(--fs-h1));line-height:var(--lh-h1);letter-spacing:var(--ls-h1);text-transform:uppercase;margin:14px 0 20px}
/* Section headings match SectionHeading.jsx: 40x3 accent rule, accent uppercase H2. */
.h2{font-size:clamp(var(--fs-h2-m),3.4vw,var(--fs-h2));line-height:var(--lh-h2);text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.h2::before{content:"";display:block;width:var(--rule-w);height:var(--rule-h);background:var(--accent);margin-bottom:16px}
.h2-plain::before{display:none}
[style*="text-align:center"] .h2::before{margin-left:auto;margin-right:auto}
.h2-strong{color:var(--text-strong)}
.h3{font-size:var(--fs-h3);line-height:var(--lh-h3);margin:0 0 12px}
.h4{font-size:var(--fs-h4);line-height:var(--lh-h4);margin:0 0 8px}
.lead{font-size:clamp(var(--fs-lead-m),2vw,var(--fs-lead));font-weight:var(--fw-lead);line-height:var(--lh-lead);color:var(--text-body);margin:0;max-width:64ch}
.body{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body);margin:0 0 16px;max-width:70ch}
.small{font-size:var(--fs-small);line-height:1.65;color:var(--text-muted)}
.mono{font-family:var(--font-mono);font-weight:var(--fw-mono)}
.sec{padding:var(--section-pt) 0 var(--section-pb)}
.sec-sm{padding:64px 0}
.sec-alt{background:var(--section-bg-alt)}
.sec-deep{background:var(--section-bg-deep)}
.hero{padding:72px 0 56px;border-bottom:1px solid var(--border-hairline)}
.card{background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);padding:var(--card-pad)}
.card-accent{border-color:var(--border-accent)}
.card-inset{background:var(--surface-inset);border:1px solid var(--border-hairline);border-radius:var(--radius);padding:20px}
.grid{display:grid;gap:var(--grid-gap)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stack{display:flex;flex-direction:column}
.row{display:flex;flex-wrap:wrap;align-items:center}
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-weight:var(--fw-mono);font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);background:var(--accent-wash);border:1px solid var(--border-accent);border-radius:var(--radius-pill);padding:4px 11px}
.tag-ok{color:#7CD9A2;background:var(--success-wash);border-color:rgba(39,174,96,.35)}
.tag-warn{color:#FFD966;background:var(--warning-wash);border-color:rgba(255,197,20,.35)}
.tag-muted{color:var(--text-muted);background:transparent;border-color:var(--border-strong)}
.kick-accent{color:var(--accent-text)}
/* Buttons match Button.jsx exactly: body font 600, 6px radius, no pill and no uppercase. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:var(--radius-sm);border:1px solid transparent;background:var(--accent);color:#04141F;font-family:var(--font-body);font-weight:600;font-size:var(--fs-body);cursor:pointer;white-space:nowrap;transition:background var(--dur-fast,.14s) var(--ease-out,ease),color var(--dur-fast,.14s) var(--ease-out,ease),border-color var(--dur-fast,.14s) var(--ease-out,ease)}
.btn:hover{background:#6FB8FF;color:#04141F}
.btn-ghost{background:transparent;color:var(--accent-text);border-color:var(--border-accent)}
.btn-ghost:hover{background:var(--accent-wash);color:var(--accent-text);border-color:var(--accent)}
.btn-sm{font-size:var(--fs-small);padding:8px 14px}
.rule{width:var(--rule-w);height:var(--rule-h);background:var(--accent);border:0;margin:0 0 22px}
.table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.table th,.table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--border-hairline);vertical-align:top;color:var(--text-body);overflow-wrap:anywhere}
.table th{font-family:var(--font-mono);font-weight:var(--fw-mono);font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.table td.num,.table th.num{font-family:var(--font-mono);color:var(--text-strong)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border-hairline);border-radius:var(--radius-lg);background:var(--surface-card)}
pre.code{margin:0;overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--section-bg-deep);border:1px solid var(--border-hairline);border-radius:var(--radius);padding:18px 20px;font-family:var(--font-mono);font-size:var(--fs-micro);line-height:1.7;color:#D6E4F0}
pre.code b{color:var(--accent-text);font-weight:var(--fw-mono)}
pre.code i{color:#8FA6B8;font-style:normal}
code.inl{font-family:var(--font-mono);font-size:.92em;background:var(--surface-inset);border:1px solid var(--border-hairline);border-radius:var(--radius-sm);padding:2px 6px;color:var(--text-strong);overflow-wrap:anywhere}
.dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 22px;font-size:var(--fs-small);margin:0}
.dl dt{font-family:var(--font-mono);font-weight:var(--fw-mono);color:var(--text-muted);white-space:nowrap}
.dl dd{margin:0;color:var(--text-body)}
/* Bullet via an absolutely-positioned ::before, NOT a grid column. As a grid, every
   inline child of an <li> — a <code>, a <strong>, an <a> — became its own grid item
   and stacked onto its own row, which broke every list containing inline markup. */
.check{list-style:none;padding:0;margin:0;display:grid;gap:11px;font-size:var(--fs-small);line-height:1.6;color:var(--text-body)}
.check li{position:relative;padding-left:29px}
.check li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:2px;background:var(--accent)}
.check-muted li::before{background:var(--text-muted)}
.stat-n{font-family:var(--font-mono);font-weight:var(--fw-mono);font-size:34px;line-height:1;color:var(--numeral-color);letter-spacing:-.01em}
.anchor{scroll-margin-top:calc(var(--nav-h) + 16px)}
.note{border-left:2px solid var(--accent);padding:2px 0 2px 16px;font-size:var(--fs-small);line-height:1.65;color:var(--text-body)}
.note-warn{border-color:var(--warning)}
/* documentation shell */
.docs{display:grid;grid-template-columns:238px minmax(0,1fr);gap:56px;align-items:start;padding-top:44px;padding-bottom:90px}
.docs-nav{position:sticky;top:calc(var(--nav-h) + 20px);font-size:var(--fs-small)}
.docs-nav .kick{display:block;margin:0 0 10px}
.docs-nav ul{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:2px}
.docs-nav a{display:block;padding:6px 10px;border-radius:var(--radius-sm);color:var(--text-body)}
.docs-nav a:hover{background:var(--surface-inset);color:var(--text-strong)}
.docs-nav a[aria-current]{background:var(--accent-wash);color:var(--text-strong);box-shadow:inset 2px 0 0 var(--accent)}
.docs-body>h2{margin-top:52px}
.docs-body>h2::before{display:none}
.docs-body>h2:first-child{margin-top:0}
.docs-toc{border:1px solid var(--border-hairline);border-radius:var(--radius);padding:16px 20px;font-size:var(--fs-small);margin:0 0 34px}
.method{display:inline-flex;align-items:center;font-family:var(--font-mono);font-weight:var(--fw-mono);font-size:12px;letter-spacing:.08em;padding:3px 9px;border-radius:var(--radius-sm);background:var(--accent-wash);color:var(--accent-text);border:1px solid var(--border-accent)}
.method-post{background:var(--success-wash);color:#7CD9A2;border-color:rgba(39,174,96,.35)}
.ep{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-family:var(--font-mono);font-size:var(--fs-small);color:var(--text-strong);margin:0 0 14px}
@media (max-width:1024px){.sec{padding:var(--section-pt-m) 0 var(--section-pb-m)}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.docs{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:28px}.docs-nav{position:static}}
@media (max-width:860px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* The gutter is a token, so the static pages' .wrap should follow it rather than
   restate a number — 18px at ≤560, 20px below 760, matching .ftai-container. */
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}.wrap,.wrap-narrow{padding:0 var(--gutter)}.hero{padding:44px 0 36px}.card{padding:22px}
/* iOS zooms the whole page when a focused field is under 16px, which then leaves the
   layout scrolled sideways. 16px is the floor on touch widths, not a style choice. */
input,select,textarea{font-size:16px!important}
/* a nowrap term plus a long value overflows a 320px column */
.dl{grid-template-columns:minmax(0,1fr);gap:4px 0}.dl dt{white-space:normal;margin-top:10px}
.docs-body>h2{margin-top:40px}.sec-sm{padding:44px 0}}
@media (max-width:400px){.h1{font-size:34px}.stat-n{font-size:29px}.card{padding:18px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}