/* amahub brand stylesheet — tokens, type scale and the component classes the
   landing page is built from. Extracted from index.html's inline <style> so the
   landing and the design system share one source of truth; index.html links it.
   Loaded render-blocking from <head>, so there is no unstyled flash. */
:root{
  --navy-900:#06101D; --navy-800:#0A1A2F; --navy-700:#142A45; --navy-600:#1F3A5C;
  --lime-500:#D7FF1C; --lime-600:#C7EE0E;
  --cream-50:#FBFAF6; --cream-100:#F5F2EC; --cream-200:#ECE7DC; --cream-300:#E4E0D8; --cream-400:#D6D2C9;
  --grey-400:#94A3B8; --grey-500:#6B7280; --grey-600:#475569; --grey-700:#334155;
  --white:#FFFFFF; --danger:#EF4444;
  --fg-on-dark-2:#B8C5D6; --border-on-dark:#1F3A5C;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-display:'Space Grotesk','Inter',-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}
html,body{margin:0;padding:0;background:var(--cream-100);overflow-x:hidden}
body{color:var(--navy-800);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:var(--navy-800)} a:hover{color:var(--navy-600)}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--lime-500);color:var(--navy-800)}
@keyframes viewIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes lineIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes blobFloat{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(-3deg) scale(1.04)}}
@keyframes nodeOn{from{opacity:.18}to{opacity:1}}
@keyframes linkOn{from{stroke-dashoffset:60;opacity:0}to{stroke-dashoffset:0;opacity:1}}
@keyframes champPulse{0%,100%{r:9}50%{r:12}}
@media (prefers-reduced-motion:reduce){[data-anim],[data-anim] *{animation:none !important;transition:none !important}}
@media (max-width:980px){.hero-stats{display:none !important}}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr !important}.trace-wrap{margin-right:0 !important;transform:none !important}.usage-card{margin-left:0 !important}}

/* type + shared utility classes (port of the design's repeated inline styles) */
.m11{font-family:var(--font-mono);font-size:11px}
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-500)}
.lbl{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.tab-lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.disp{font-family:var(--font-display);font-weight:600;letter-spacing:-0.02em}
.tnum{font-variant-numeric:tabular-nums}
.hair-b{border-bottom:1px solid var(--cream-400)}

.btn-lime{background:var(--lime-500);color:var(--navy-800);border:none;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;white-space:nowrap}
.btn-lime:hover{background:var(--lime-600)}
.btn-out{background:none;border:1px solid var(--navy-800);color:var(--navy-800);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.btn-out:hover{background:var(--cream-200)}
.btn-dark-out{background:none;border:1px solid var(--border-on-dark);color:var(--white);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.btn-dark-out:hover{background:var(--navy-700)}
.link-u{background:none;border:none;padding:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--navy-800);text-decoration:underline;text-underline-offset:4px}

.wrap{max-width:1360px;margin:0 auto;padding-left:40px;padding-right:40px}
@media (max-width:720px){.wrap{padding-left:20px;padding-right:20px}}

header.site{position:sticky;top:0;z-index:50;background:rgba(245,242,236,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--navy-800)}
header.site a.m11{white-space:nowrap}
/* below 900px the chapter nav can't fit between the logo and the buttons —
   wrap it onto its own scrollable row instead of squeezing it to nothing */
@media (max-width:900px){
  header.site .wrap{flex-wrap:wrap}
  nav#chnav{order:3;flex:0 0 100% !important;justify-content:flex-start !important;gap:16px !important;border-top:1px solid var(--cream-300);scrollbar-width:none}
  nav#chnav::-webkit-scrollbar{display:none}
  .navtab{padding:12px 0 10px}
}
@media (max-width:720px){.bn-coming{display:none}}
.navtab{display:flex;align-items:center;gap:6px;white-space:nowrap;flex:none;padding:22px 0 19px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;font-weight:500;background:transparent;border:none;border-bottom:3px solid transparent;color:var(--grey-500);transition:color 150ms,border-color 150ms}
.navtab:hover{color:var(--navy-800)}
.navtab.on{color:var(--navy-800);border-bottom-color:var(--navy-800)}
.navtab .n{opacity:.45}

/* overflow:clip keeps decorative bleeds (hero blob, rotated cards) inside the
   section — they must never paint over the sticky header or the banner above */
section[data-view]{display:none;position:relative;overflow:clip}
section[data-view].on{display:block;animation:viewIn 320ms cubic-bezier(0,0,.2,1)}

.scn-tab{padding:8px 14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;border:none;background:transparent;color:var(--grey-500);transition:background 150ms,color 150ms}
.scn-tab:hover{color:var(--navy-800)}
.scn-tab.on{background:var(--navy-800);color:var(--white)}
.desk-tab{padding:12px 20px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;border:1px solid var(--navy-800);background:transparent;color:var(--navy-800);transition:background 150ms,color 150ms}
.desk-tab:hover{background:var(--cream-200)}
.desk-tab.on{background:var(--navy-800);color:var(--white)}
.desk-tab.on:hover{background:var(--navy-800)}

.trace-ln{display:grid;grid-template-columns:62px 1fr;gap:14px;font-family:var(--font-mono);font-size:11px;line-height:1.6;color:var(--grey-700);font-variant-numeric:tabular-nums;animation:lineIn 240ms cubic-bezier(0,0,.2,1) both}
.trace-ln.last{color:var(--navy-800);font-weight:700}
.trace-ln .t{color:var(--grey-400)}
.tool-chip{display:flex;align-items:center;gap:7px;padding:7px 12px;font-family:var(--font-mono);font-size:11px;white-space:nowrap;border:1px solid var(--cream-400);background:var(--white);color:var(--grey-500);transition:background 150ms,color 150ms,border-color 150ms}
.tool-chip .dot{width:7px;height:7px;flex:none;display:inline-block;background:var(--cream-400)}
.tool-chip.used{border-color:var(--navy-800);color:var(--navy-800)}
.tool-chip.used .dot{background:var(--navy-800)}
.tool-chip.active{border-color:var(--navy-800);background:var(--navy-800);color:var(--white)}
.tool-chip.active .dot{background:var(--lime-500);animation:pulseDot 900ms ease-in-out infinite}
.tool-conn{display:block;width:18px;height:1px;background:var(--cream-400);flex:none}
.tool-conn.used{background:var(--navy-800)}

.pill{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;white-space:nowrap;background:transparent;color:var(--grey-500);border:1px solid var(--cream-400)}
.pill.done{background:var(--navy-800);color:var(--white);border-color:var(--navy-800)}

.cta-row{margin-top:88px;border-top:1px solid var(--cream-400);padding-top:26px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.spec-hl{background:var(--lime-500);color:var(--navy-800);font-weight:700;padding:1px 5px}
.spec-b{color:var(--navy-800);font-weight:700}
.spec-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px;font-family:var(--font-mono);font-size:11px;line-height:1.75;color:var(--grey-600)}
.spec-h{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;border-bottom:1px solid var(--navy-800);padding-bottom:10px}

/* lead-form selectable chips — checkboxes for needs, radios for urgency */
.chip-opt{position:relative;display:inline-flex;align-items:center;gap:9px;padding:10px 15px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;border:1px solid var(--navy-800);background:var(--white);color:var(--navy-800);cursor:pointer;user-select:none;transition:background 150ms,color 150ms}
.chip-opt input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.chip-opt .bx{width:9px;height:9px;flex:none;border:1px solid var(--navy-800);background:transparent;transition:background 150ms,border-color 150ms}
.chip-opt:hover{background:var(--cream-200)}
.chip-opt:has(input:checked){background:var(--navy-800);color:var(--white);border-color:var(--navy-800)}
.chip-opt:has(input:checked) .bx{background:var(--lime-500);border-color:var(--lime-500)}
.chip-opt:has(input:focus-visible){outline:2px solid var(--lime-500);outline-offset:2px}
.chip-opt.urgent:has(input:checked){background:var(--lime-500);color:var(--navy-800);border-color:var(--navy-800)}
.chip-opt.urgent:has(input:checked) .bx{background:var(--navy-800);border-color:var(--navy-800)}
.form-h{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-800);margin-bottom:12px}

/* ── phones ────────────────────────────────────────────────────────────
   The page is laid out with inline grids; below 720px every multi-column
   grid folds to one column (gap preserved), except the tiny icon rows
   that ARE their two columns. Not a full mobile site — just readable. */
@media (max-width:720px){
  [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important}
  [style*="grid-template-columns:14px"]{grid-template-columns:14px 1fr !important}
  [style*="grid-template-columns:20px"]{grid-template-columns:20px 1fr auto !important}
  [style*="grid-template-columns:24px"]{grid-template-columns:24px 1fr !important}
  /* desktop-sized gulfs between the folded columns read as dead ends */
  [style*="gap:80px"],[style*="gap:72px"],[style*="gap:64px"],[style*="gap:56px"]{gap:32px !important}
  /* terminal cards: hand-broken lines flow, long URLs wrap, spacers vanish */
  .mcp-strip br{display:none}
  .mcp-strip span[style*="color:transparent"]{display:none}
  .mcp-strip > div{overflow-wrap:anywhere;min-width:0}
  .mcp-strip{margin-top:56px !important}
}
