/* HARBOR Port brand system, revision 3. Tokens drive everything. Dark mode and the accessible colour twins live here. Fonts are served from /static/fonts so the stylesheet is no longer render blocking. Theme selection: the OS preference applies through prefers-color-scheme, and an explicit [data-theme] choice on overrides it. The override uses the same tokens, so the contrast audit must keep covering both themes. */ @font-face{font-family:'Geist';src:url('/static/fonts/geist.woff2') format('woff2'); font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'Geist Mono';src:url('/static/fonts/geist-mono.woff2') format('woff2'); font-weight:100 900;font-style:normal;font-display:swap} :root{ /* Six framework colours, one per letter of the wordmark. These are the graphic values: borders, bars, gradients, bullets. */ --h:#3B82F6; --a:#8B5CF6; --r:#EC4899; --b:#F97316; --o:#10B981; --r2:#06B6D4; /* Accessible text twins. Every piece of small coloured text uses these. Measured against white: 6.70, 7.10, 6.04, 5.18, 5.48, 5.36. */ --h-ink:#1D4ED8; --a-ink:#6D28D9; --r-ink:#BE185D; --b-ink:#C2410C; --o-ink:#047857; --r2-ink:#0E7490; /* The slate ramp, the type scale and the six ink twins are defined whole even where the current markup does not reach for every step. They are a scale, not a set of used values, and scripts/audit_contrast.py validates against the tokens rather than the markup. */ --s50:#f8fafc; --s100:#f1f5f9; --s200:#e2e8f0; --s300:#cbd5e1; --s400:#94a3b8; --s500:#64748b; --s600:#475569; --s700:#334155; --s800:#1e293b; --s950:#020617; --bg:var(--s50); --surface:#fff; --surface-2:var(--s100); --line:var(--s200); --line-strong:var(--s300); /* 3.12:1 on --surface. Use wherever a border is the only cue that something is a control: inputs, ghost buttons, the menu trigger. */ --field-border:#7f8da1; --ink:#0f172a; --ink-2:var(--s700); --muted:var(--s500); /* Muted text measured 4.34:1 on --surface-2 and about 4.07:1 on the tinted hero, both below AA. This is the value to use on any surface that is not plain --bg or --surface. */ --muted-strong:var(--s600); --eyebrow-ink:var(--s600); /* Solid surfaces and the text that sits on them. These are deliberately NOT --ink. --ink is a text colour that flips to near white in dark mode, and using it as a button background while hardcoding a white label produced white on white: a 1.09:1 primary button that was effectively invisible. Surfaces and their labels are now paired tokens so a theme flip cannot separate them. */ --solid:#0f172a; --on-solid:#fff; --solid-hover:#1D4ED8; --on-solid-hover:#fff; /* Text placed on a brand coloured chip or badge. */ --on-accent:#fff; /* The closing band is dark in both themes, so it gets its own fixed pair rather than borrowing a token that flips. */ --band:#0f172a; --band-head:#fff; --band-ink:#94a3b8; --band-btn:#fff; --band-btn-ink:#0f172a; --band-btn-hover:#1D4ED8; --band-btn-hover-ink:#fff; --sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* Type scale. Nothing renders below 13px. */ --t-xs:.8125rem; --t-sm:.875rem; --t-base:1rem; --t-lg:1.0625rem; --t-xl:1.25rem; --t-2xl:1.5rem; --t-3xl:1.9rem; --t-4xl:clamp(2.1rem,4.2vw,3rem); /* Spacing scale. */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --radius:12px; --radius-sm:8px; --radius-lg:16px; --maxw:1200px; --shadow-2:0 4px 12px rgba(15,23,42,.06),0 12px 32px rgba(15,23,42,.09); --shadow-1:0 1px 2px rgba(15,23,42,.05),0 6px 20px rgba(15,23,42,.07); --lift:-3px; } /* Explicit choice wins over the OS preference. */ :root[data-theme="light"]{color-scheme:light} :root[data-theme="dark"]{color-scheme:dark} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#0b1220; --surface:#101a2c; --surface-2:#16233a; --line:#1e2e47; --line-strong:#2b3f5e; --field-border:#506b90; --ink:#f1f5f9; --ink-2:#cbd5e1; --muted:#94a3b8; --muted-strong:#a3b2c6; --eyebrow-ink:#a3b2c6; /* Inverted pair: a light surface with dark text, because a dark button on a dark page is invisible and a white label on it doubly so. */ --solid:#f1f5f9; --on-solid:#0b1220; --solid-hover:#7DA9F7; --on-solid-hover:#0b1220; --on-accent:#0b1220; --band:#060b14; --band-head:#f1f5f9; --band-ink:#94a3b8; --band-btn:#fff; --band-btn-ink:#0f172a; --band-btn-hover:#7DA9F7; --band-btn-hover-ink:#0b1220; /* Lightened twins, measured against #101a2c: 7.37, 7.52, 7.94, 9.10, 9.97, 10.0 */ --h-ink:#7DA9F7; --a-ink:#B79BF9; --r-ink:#F58FC0; --b-ink:#FBA968; --o-ink:#5FD9AE; --r2-ink:#67D3E8; --shadow-2:0 8px 28px rgba(0,0,0,.55); --shadow-1:0 2px 8px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.45); } } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink-2);font-family:var(--sans); font-size:var(--t-base);line-height:1.62;-webkit-font-smoothing:antialiased} img,svg{max-width:100%;height:auto} hr{border:0;border-top:1px solid var(--line);margin:var(--sp-8) 0} h1,h2,h3,h4{margin:0 0 .5em;color:var(--ink);font-weight:700;line-height:1.18;letter-spacing:-.022em} h1{font-size:var(--t-4xl)} h2{font-size:var(--t-3xl)} h3{font-size:var(--t-xl);letter-spacing:-.015em} h4{font-size:var(--t-base)} p{margin:0 0 1em} p:last-child{margin-bottom:0} ul,ol{margin:0 0 1em;padding-left:1.35em} li{margin:.3em 0} strong{color:var(--ink)} a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--h); text-decoration-thickness:1.5px;text-underline-offset:2px} a:hover{color:var(--h-ink)} :focus-visible{outline:2px solid var(--h);outline-offset:2px;border-radius:4px} code,pre,.mono{font-family:var(--mono);font-size:.875em;font-variant-numeric:tabular-nums} code{background:var(--surface-2);border:1px solid var(--line);border-radius:6px; padding:.1em .38em;color:var(--ink-2)} pre code{background:none;border:0;padding:0;color:inherit} pre{background:#0b1220;color:#e2e8f0;padding:var(--sp-4) var(--sp-4);border-radius:var(--radius); overflow-x:auto;line-height:1.6;margin:0 0 var(--sp-4);font-size:var(--t-sm)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) pre, :root[data-theme="dark"] pre{background:#060b14;border:1px solid var(--line)}} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-6)} .muted{color:var(--muted)} .small{font-size:var(--t-sm)} .tiny{font-size:var(--t-xs)} .center{text-align:center} .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:100;background:var(--solid);color:var(--on-solid); padding:10px 16px;border-radius:0 0 var(--radius-sm) 0} .skip:focus{left:0} /* ---- wordmark ---- */ .mark{display:inline-flex;align-items:baseline;font-family:var(--sans);font-weight:900;line-height:1} .mark span{display:inline-block;width:.84em;text-align:center} .mark-xs{font-size:1rem} .mark-sm{font-size:1.1rem} .mark .c1{color:var(--h)}.mark .c2{color:var(--a)}.mark .c3{color:var(--r)} .mark .c4{color:var(--b)}.mark .c5{color:var(--o)}.mark .c6{color:var(--r2)} /* ---- header ---- */ header.nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} header.nav::before{content:'';position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,var(--h),var(--a),var(--r),var(--b),var(--o),var(--r2))} header.nav .wrap{display:flex;align-items:center;gap:var(--sp-5);min-height:64px} .brand{display:inline-flex;align-items:baseline;gap:.5rem;text-decoration:none;color:var(--ink);flex:none} .brand:hover{color:var(--ink);text-decoration:none} .brand .brand-sub{font-size:var(--t-xs);font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--muted)} .nav-inline{margin-left:auto;display:flex;align-items:center;gap:var(--sp-5)} .nav-inline a{color:var(--ink-2);font-size:var(--t-sm);text-decoration:none;font-weight:500} .nav-inline a:hover{color:var(--h-ink)} .nav-inline a.btn{color:var(--on-solid)} /* The primary action stays in the bar at every width. NN/g measured hidden-only mobile navigation being used in 57 percent of cases against 86 percent for a combination of visible and hidden, so the drawer carries secondary links and is never the only route to signup. */ .nav-cta{margin-left:var(--sp-2);flex:none} /* ---- theme toggle ---- */ .theme-toggle{display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;flex:none;border:1px solid var(--field-border); border-radius:var(--radius-sm);background:var(--surface);color:var(--ink-2); cursor:pointer;margin-left:var(--sp-2); transition:background .16s ease,border-color .16s ease,color .16s ease} .theme-toggle:hover{background:var(--surface-2);color:var(--ink);border-color:var(--ink)} .theme-toggle .icon-moon{display:none} :root[data-theme="dark"] .theme-toggle .icon-moon{display:block} :root[data-theme="dark"] .theme-toggle .icon-sun{display:none} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:block} :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:none} } .drawer nav button[data-theme-toggle]{padding:11px 14px;border-radius:var(--radius-sm); text-decoration:none;color:var(--ink-2);font-size:var(--t-sm);font-weight:500; min-height:44px;display:flex;align-items:center;background:none;border:0;width:100%; text-align:left;cursor:pointer;font-family:var(--sans)} .drawer nav button[data-theme-toggle]:hover{background:var(--surface-2);color:var(--ink)} .drawer{display:none;margin-left:var(--sp-1);position:relative} .drawer summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center; width:44px;height:44px;border:1px solid var(--field-border);border-radius:var(--radius-sm); background:var(--surface)} .drawer summary::-webkit-details-marker{display:none} .drawer summary::marker{content:''} .burger{display:block;width:18px;height:2px;background:var(--ink);position:relative;border-radius:2px} .burger::before,.burger::after{content:'';position:absolute;left:0;width:18px;height:2px; background:var(--ink);border-radius:2px} .burger::before{top:-6px}.burger::after{top:6px} .drawer nav{position:absolute;right:0;top:calc(100% + 10px);min-width:230px;display:flex; flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);box-shadow:var(--shadow-2);padding:var(--sp-2)} .drawer nav a{padding:11px 14px;border-radius:var(--radius-sm);text-decoration:none; color:var(--ink-2);font-size:var(--t-sm);font-weight:500;min-height:44px;display:flex;align-items:center} .drawer nav a:hover{background:var(--surface-2);color:var(--ink)} .drawer nav a.btn{color:var(--on-solid);justify-content:center;margin-top:6px} /* ---- buttons ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; border:1px solid var(--solid);background:var(--solid);color:var(--on-solid);padding:11px 20px; border-radius:var(--radius-sm);font-size:var(--t-sm);font-weight:600;cursor:pointer; font-family:var(--sans);text-decoration:none;line-height:1.3;min-height:44px; transition:background .16s ease,border-color .16s ease,transform .16s ease} .btn:hover{background:var(--solid-hover);border-color:var(--solid-hover);color:var(--on-solid-hover);text-decoration:none} .btn:active{transform:translateY(1px)} .btn.primary{background:var(--solid);border-color:var(--solid)} .btn.ghost{background:transparent;color:var(--ink);border-color:var(--field-border)} .btn.ghost:hover{background:var(--surface-2);border-color:var(--ink);color:var(--ink)} .btn.accent{background:var(--h-ink);border-color:var(--h-ink);color:var(--on-accent)} .btn.accent:hover{background:var(--a-ink);border-color:var(--a-ink);color:var(--on-accent)} .btn.danger{background:transparent;border-color:var(--line);color:var(--r-ink)} .btn.danger:hover{background:color-mix(in srgb,var(--r) 10%,transparent);border-color:var(--r-ink);color:var(--r-ink)} .btn.sm{padding:7px 13px;font-size:var(--t-xs);min-height:34px} .btn.block{width:100%} .btn[disabled]{opacity:.45;cursor:not-allowed} .cta{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6);align-items:center} /* ---- sections ---- */ main{min-height:60vh} section{padding:var(--sp-16) 0} section+section{border-top:1px solid var(--line)} section.alt{background:var(--surface)} section.alt + section{border-top:1px solid var(--line)} section.tight{padding:var(--sp-12) 0} .eyebrow{display:inline-flex;align-items:center;gap:8px} .eyebrow::before{content:'';width:22px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--h),var(--a),var(--r));flex:none} .section-head{max-width:66ch;margin-bottom:var(--sp-8)} .section-head h2{margin-bottom:var(--sp-3)} .lede{font-size:var(--t-lg);color:var(--ink-2);max-width:68ch} .spread{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);flex-wrap:wrap} .section-link{font-size:var(--t-sm);font-weight:600;white-space:nowrap} .eyebrow{font-family:var(--mono);font-size:var(--t-xs);text-transform:uppercase; letter-spacing:.14em;color:var(--eyebrow-ink);font-weight:600} @media (max-width:640px){.eyebrow{letter-spacing:.06em}} /* ---- hero ---- */ .hero{padding:var(--sp-16) 0 var(--sp-12);border-bottom:1px solid var(--line); position:relative;overflow:hidden; background:radial-gradient(1100px 420px at 82% -12%,rgba(59,130,246,.10),transparent 60%), radial-gradient(760px 380px at 12% 4%,rgba(139,92,246,.09),transparent 62%)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .hero{background: radial-gradient(1000px 420px at 84% -12%,rgba(59,130,246,.16),transparent 60%), radial-gradient(720px 380px at 10% 6%,rgba(139,92,246,.14),transparent 62%)} } :root[data-theme="dark"] .hero{background: radial-gradient(1000px 420px at 84% -12%,rgba(59,130,246,.16),transparent 60%), radial-gradient(720px 380px at 10% 6%,rgba(139,92,246,.14),transparent 62%)} .hero-art{position:absolute;inset:0;pointer-events:none;overflow:hidden} .hero-art svg{position:absolute;right:-140px;top:-60px;width:640px;height:auto;opacity:.5} .hero .wrap{position:relative;z-index:1} .hero .term{position:relative;z-index:1} @media (max-width:1040px){.hero-art svg{opacity:.22;right:-260px;width:520px}} @media (max-width:860px){.hero-art svg{opacity:.16;right:-300px}} @media (max-width:640px){.hero-art{display:none}} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero-art svg{opacity:.6}} :root[data-theme="dark"] .hero-art svg{opacity:.6} .hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:var(--sp-12);align-items:center} .hero h1{max-width:17ch;margin:var(--sp-4) 0 var(--sp-5)} .hero .lede{font-size:1.125rem} .friction{margin-top:var(--sp-4);font-size:var(--t-sm);color:var(--eyebrow-ink); display:flex;align-items:center;gap:8px} .friction::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--o); flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--o) 20%,transparent)} /* ---- terminal card ---- */ .term{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface); box-shadow:var(--shadow-2);overflow:hidden} .term-bar{display:flex;align-items:center;gap:7px;padding:11px var(--sp-4); border-bottom:1px solid var(--line);background:var(--surface-2)} .term-bar .dot{width:9px;height:9px;border-radius:50%;background:var(--line-strong);flex:none} .term-bar .dot:nth-child(1){background:var(--b)} .term-bar .dot:nth-child(2){background:var(--a)} .term-bar .dot:nth-child(3){background:var(--o)} .term-title{margin-left:6px;font-family:var(--mono);font-size:var(--t-xs);color:var(--muted-strong)} .term pre{margin:0;border-radius:0;background:#0b1220;padding:var(--sp-4) var(--sp-4); font-size:var(--t-xs);line-height:1.7} .term-foot{display:flex;gap:var(--sp-2);flex-wrap:wrap;padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--line);background:var(--surface)} .badge{font-family:var(--mono);font-size:var(--t-xs);padding:3px 9px;border-radius:999px; border:1px solid var(--line);color:var(--muted)} .badge.ok{color:var(--o-ink);border-color:color-mix(in srgb,var(--o) 40%,transparent); background:color-mix(in srgb,var(--o) 10%,transparent)} .badge.acc{color:var(--h-ink);border-color:color-mix(in srgb,var(--h) 40%,transparent); background:color-mix(in srgb,var(--h) 10%,transparent)} /* ---- stats ---- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5); padding:var(--sp-8) 0;border-bottom:1px solid var(--line)} .stat .n{font-family:var(--mono);font-size:1.7rem;font-weight:600;line-height:1.1; color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums} .stat .l{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.1em; color:var(--muted-strong);margin-top:5px;font-weight:600} .proof-note{margin-top:var(--sp-4);font-size:var(--t-sm);color:var(--muted);max-width:80ch} /* ---- cards and tiles ---- */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--sp-4)} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)} .card{--accent:var(--line-strong);border:1px solid var(--line);border-top:3px solid var(--accent); border-radius:var(--radius);padding:var(--sp-5);background:var(--surface); box-shadow:var(--shadow-1); transition:box-shadow .18s ease,transform .18s ease} .card:hover{box-shadow:var(--shadow-2);transform:translateY(var(--lift))} @media (prefers-reduced-motion:reduce){.card:hover{transform:none}} .card .more{font-size:var(--t-sm);font-weight:600;margin-top:var(--sp-2);display:inline-block} .card .cat{font-family:var(--mono);font-size:var(--t-xs);text-transform:uppercase; letter-spacing:.1em;color:var(--muted);font-weight:700} .card h3{margin:var(--sp-2) 0 var(--sp-2);font-size:var(--t-lg)} .card p{font-size:var(--t-sm);color:var(--ink-2);margin:0 0 var(--sp-3)} .card p:last-child{margin-bottom:0} .card .count{font-family:var(--mono);font-size:var(--t-xs);color:var(--muted)} .a1{--accent:var(--h)}.a2{--accent:var(--a)}.a3{--accent:var(--r)} .a4{--accent:var(--b)}.a5{--accent:var(--o)}.a6{--accent:var(--r2)} /* source rows inside a domain tile */ .src{display:flex;justify-content:space-between;gap:var(--sp-3);align-items:baseline; padding:9px 0;border-top:1px solid var(--line);font-size:var(--t-sm)} .src:first-of-type{border-top:0} .src .name{color:var(--ink);font-weight:500} .src .n{font-family:var(--mono);font-size:var(--t-xs);color:var(--muted);white-space:nowrap;flex:none} /* ---- tool chips, used on the documentation page ---- */ .tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-3)} .chip{font-family:var(--mono);font-size:var(--t-xs);background:var(--surface-2); border:1px solid var(--line);border-radius:6px;padding:3px 8px;color:var(--ink-2)} .count{font-family:var(--mono);font-size:var(--t-xs);color:var(--muted)} .row{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap} /* ---- compare ---- */ .compare{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line); border-radius:var(--radius);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-1)} .compare>div{padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--line)} .compare>div:nth-child(-n+2){border-top:0} .compare>div:nth-child(odd){border-right:1px solid var(--line)} .compare .head{font-family:var(--mono);font-size:var(--t-xs);text-transform:uppercase; letter-spacing:.1em;font-weight:700;background:var(--surface-2)} .compare .head.bad{color:var(--muted-strong)} .compare .head.good{color:var(--o-ink)} .compare .bad{color:var(--muted);font-size:var(--t-sm)} .compare .good{color:var(--ink-2);font-size:var(--t-sm)} .compare .good strong{color:var(--ink)} .compare .tick,.compare .cross{display:inline-block;width:1.1em;margin-right:6px;font-weight:700} .compare .tick{color:var(--o-ink)} .compare .cross{color:var(--muted)} /* ---- steps ---- */ .steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)} .steps.cluster{grid-template-columns:repeat(4,1fr)} .steps.connector .step::after{content:'';position:absolute;top:44px;left:calc(100% + 2px); width:calc(var(--sp-5) - 4px);height:2px; background:linear-gradient(90deg,var(--h),var(--a))} .steps.connector .step:last-child::after{display:none} @media (max-width:1040px){.steps.connector .step::after{display:none}} .step{counter-increment:s;border:1px solid var(--line);border-radius:var(--radius); padding:var(--sp-5);background:var(--surface);position:relative;box-shadow:var(--shadow-1)} .step::before{content:counter(s);display:flex;align-items:center;justify-content:center; width:30px;height:30px;border-radius:50%;background:var(--solid);color:var(--on-solid); font-family:var(--mono);font-size:var(--t-sm);font-weight:600;margin-bottom:var(--sp-3)} .step h3{font-size:var(--t-base);margin-bottom:var(--sp-2)} .step p{font-size:var(--t-sm);margin:0} .step pre{margin-top:var(--sp-3);font-size:var(--t-xs)} /* ---- SAM band ---- */ .band{background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%); border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .band .wrap{padding-top:var(--sp-16);padding-bottom:var(--sp-16)} .band .section-head h2 .grad{background:linear-gradient(90deg,var(--h-ink),var(--a-ink),var(--r-ink)); -webkit-background-clip:text;background-clip:text;color:transparent} .sam-table{box-shadow:var(--shadow-1)} .band-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)} .pill-brand{font-family:var(--mono);font-size:var(--t-xs);font-weight:700;letter-spacing:.1em; text-transform:uppercase;padding:5px 11px;border-radius:999px;color:var(--on-accent); background:linear-gradient(90deg,var(--h-ink),var(--a-ink),var(--r-ink))} .sam-table{margin-top:var(--sp-6)} /* ---- logos ---- */ .logos{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-6);align-items:center} .logos .logo{font-family:var(--mono);font-size:var(--t-xs);font-weight:600;color:var(--muted-strong); border:1px solid var(--line);border-radius:999px;padding:6px 14px;background:var(--surface)} .logos .lbl{font-family:var(--mono);font-size:var(--t-xs);text-transform:uppercase; letter-spacing:.1em;color:var(--muted);margin-right:4px} /* ---- workflow strip ---- */ .flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:var(--sp-3);align-items:stretch; margin-top:var(--sp-8)} .flow .node{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface); padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow-1)} .flow .node .k{font-family:var(--mono);font-size:var(--t-xs);text-transform:uppercase; letter-spacing:.1em;color:var(--muted-strong);font-weight:700} .flow .node p{font-size:var(--t-sm);margin:6px 0 0} .flow .arrow{align-self:center;color:var(--h);font-weight:700;font-size:1.2rem} @media (max-width:860px){.flow{grid-template-columns:1fr}.flow .arrow{display:none}} /* ---- install tabs ---- */ .tabs{margin-top:var(--sp-5)} .tabs details{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface); margin-bottom:var(--sp-3);overflow:hidden} .tabs summary{cursor:pointer;padding:var(--sp-4) var(--sp-5);font-weight:600;color:var(--ink); display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:44px} .tabs summary::after{content:'+';font-family:var(--mono);color:var(--muted);font-size:1.2rem;line-height:1} .tabs details[open] summary::after{content:'\2212'} .tabs summary::-webkit-details-marker{display:none} .tabs .tab-body{padding:0 var(--sp-5) var(--sp-5)} .tabs .tab-body pre{margin-bottom:0} .file{font-family:var(--mono);font-size:var(--t-xs);color:var(--muted);font-weight:400} /* ---- pricing ---- */ .plans{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);margin-top:var(--sp-8); align-items:stretch} .plan{--accent:var(--line-strong);display:flex;flex-direction:column; border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--radius); padding:var(--sp-6) var(--sp-5);background:var(--surface);position:relative; box-shadow:var(--shadow-1);transition:box-shadow .18s ease,transform .18s ease} .plan:hover{transform:translateY(var(--lift));box-shadow:var(--shadow-2)} @media (prefers-reduced-motion:reduce){.plan:hover{transform:none}} .bill-toggle{display:inline-flex;border:1px solid var(--field-border);border-radius:999px; padding:3px;background:var(--surface);gap:2px;margin-top:var(--sp-5)} .bill-toggle button{border:0;background:transparent;color:var(--muted-strong);font-family:var(--sans); font-size:var(--t-sm);font-weight:600;padding:8px 18px;border-radius:999px;cursor:pointer;min-height:40px} .bill-toggle button[aria-pressed="true"]{background:var(--solid);color:var(--on-solid)} .bill-toggle button:focus-visible{outline:2px solid var(--h);outline-offset:2px} .plan h3{font-size:var(--t-lg);margin:0} .plan .for{font-size:var(--t-xs);color:var(--muted-strong);margin:4px 0 0} .plan .amount{font-family:var(--mono);font-size:1.85rem;font-weight:600;color:var(--ink); margin:var(--sp-4) 0 2px;letter-spacing:-.02em;line-height:1.1} .plan .amount small{font-family:var(--sans);font-size:var(--t-sm);font-weight:500; color:var(--muted-strong);letter-spacing:0} .plan ul{list-style:none;padding:0;margin:var(--sp-5) 0 var(--sp-6);font-size:var(--t-sm);flex:1} .plan li{padding:6px 0 6px 24px;position:relative;color:var(--ink-2)} .plan li::before{content:'';position:absolute;left:0;top:.66em;width:9px;height:9px; border-radius:3px;background:var(--accent)} .plan .btn{margin-top:auto} .plan.featured{--accent:var(--h);box-shadow:var(--shadow-2); border-color:color-mix(in srgb,var(--h) 45%,var(--line))} .plan .flag{position:absolute;top:-11px;left:var(--sp-5);font-family:var(--mono); font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase; background:var(--h-ink);color:var(--on-accent);padding:4px 10px;border-radius:999px} .p-free{--accent:var(--o)} .p-builder{--accent:var(--h)} .p-team{--accent:var(--a)} .p-ent{--accent:var(--r2)} /* ---- tables ---- */ table{width:100%;border-collapse:collapse;font-size:var(--t-sm)} th{text-align:left;font-family:var(--mono);font-size:var(--t-xs);text-transform:uppercase; letter-spacing:.09em;color:var(--muted-strong);background:var(--surface-2); border-bottom:1px solid var(--line);padding:11px var(--sp-3);font-weight:700} td{padding:12px var(--sp-3);border-bottom:1px solid var(--line);vertical-align:top} tbody tr:last-child td{border-bottom:none} td .mono,td.mono{font-family:var(--mono)} .panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden} .panel.pad{padding:var(--sp-5) var(--sp-6)} .pill{display:inline-block;font-family:var(--mono);font-size:var(--t-xs);padding:3px 9px; border-radius:999px;border:1px solid var(--line);background:var(--surface-2); color:var(--muted-strong);text-transform:uppercase;letter-spacing:.05em} .pill.ok{color:var(--o-ink);border-color:color-mix(in srgb,var(--o) 40%,transparent); background:color-mix(in srgb,var(--o) 10%,transparent)} .pill.off{color:var(--muted-strong)} /* ---- alerts ---- */ .alert{border-radius:var(--radius);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-4); font-size:var(--t-sm);border:1px solid var(--line);background:var(--surface);border-left-width:3px} .alert.err{border-left-color:var(--r-ink)} .alert.ok{border-left-color:var(--o-ink)} .alert.warn{border-left-color:var(--b-ink)} .alert.info{border-left-color:var(--h-ink)} .alert strong{color:var(--ink)} .alert code{word-break:break-word} /* ---- FAQ ---- */ .faq{margin-top:var(--sp-6);border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{cursor:pointer;padding:var(--sp-5) 0;font-weight:600;color:var(--ink); font-size:var(--t-base);display:flex;justify-content:space-between;align-items:center; gap:var(--sp-4);min-height:44px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'+';font-family:var(--mono);color:var(--muted); font-size:1.25rem;line-height:1;flex:none} .faq details[open] summary::after{content:'\2212'} .faq summary h3{margin:0;font-size:var(--t-base);font-weight:600;color:var(--ink); letter-spacing:-.01em;display:inline} .faq .ans{padding:0 0 var(--sp-5);font-size:var(--t-sm);color:var(--ink-2);max-width:78ch} .faq .ans p:last-child{margin-bottom:0} /* ---- closing band ---- */ .close-band{background:var(--band);color:var(--band-ink);position:relative;overflow:hidden; border-top:0;padding:var(--sp-16) 0} .close-band::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px; background:linear-gradient(90deg,var(--h),var(--a),var(--r),var(--b),var(--o),var(--r2))} .close-band h2{color:var(--band-head);max-width:24ch} .close-band p{color:var(--band-ink);max-width:60ch} .close-band .cta{margin-top:var(--sp-6)} .close-band .btn.primary{background:var(--band-btn);border-color:var(--band-btn);color:var(--band-btn-ink)} .close-band .btn.primary:hover{background:var(--band-btn-hover);border-color:var(--band-btn-hover);color:var(--band-btn-hover-ink)} /* ---- footer ---- */ footer.site-foot{border-top:1px solid var(--line);padding:var(--sp-12) 0 var(--sp-10); font-size:var(--t-sm);color:var(--muted);background:var(--surface)} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--sp-8)} .foot-col h4{font-family:var(--mono);font-size:var(--t-xs);text-transform:uppercase; letter-spacing:.1em;color:var(--muted-strong);margin:0 0 var(--sp-3);font-weight:700} .foot-col ul{list-style:none;padding:0;margin:0} .foot-col li{margin:0 0 7px} .foot-col a{color:var(--ink-2);text-decoration:none;font-size:var(--t-sm)} .foot-col a:hover{color:var(--h-ink);text-decoration:underline} .foot-note{max-width:44ch;margin-top:var(--sp-3);font-size:var(--t-xs);line-height:1.6} .foot-base{margin-top:var(--sp-8);padding-top:var(--sp-6);border-top:1px solid var(--line); font-size:var(--t-xs);display:flex;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap} /* ---- forms and dashboard ---- */ .form{max-width:460px;margin-top:var(--sp-5)} label{display:block;font-size:var(--t-sm);font-weight:600;margin:var(--sp-4) 0 6px;color:var(--ink)} input[type=text],input[type=email],input[type=password],textarea,select{width:100%; padding:11px 13px;border:1px solid var(--field-border);border-radius:var(--radius-sm); font-size:var(--t-base);font-family:var(--sans);background:var(--surface);color:var(--ink); min-height:44px} input:focus,textarea:focus,select:focus{outline:2px solid var(--h);outline-offset:-1px; border-color:var(--h)} textarea{min-height:120px;resize:vertical} .hint{font-size:var(--t-xs);color:var(--muted);margin-top:6px} .page-head{padding:var(--sp-12) 0 var(--sp-10)} .page-head h1{font-size:var(--t-3xl)} .kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:var(--sp-3); margin-bottom:var(--sp-6)} .kpi .box{border:1px solid var(--line);border-top:3px solid var(--line-strong); border-radius:var(--radius);padding:var(--sp-4);background:var(--surface)} .kpi .box:nth-child(4n+1){border-top-color:var(--h)} .kpi .box:nth-child(4n+2){border-top-color:var(--a)} .kpi .box:nth-child(4n+3){border-top-color:var(--r)} .kpi .box:nth-child(4n+4){border-top-color:var(--b)} .kpi .n{font-family:var(--mono);font-size:1.45rem;font-weight:600;color:var(--ink);letter-spacing:-.02em} .kpi .l{font-family:var(--mono);font-size:var(--t-xs);text-transform:uppercase; letter-spacing:.1em;color:var(--muted-strong);font-weight:600} .bar{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden;margin-top:var(--sp-3)} .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--h),var(--a),var(--r))} .stack{margin-top:var(--sp-4)} /* ---- use cases ---- */ .persona{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);align-items:start} .persona:nth-child(even) .persona-copy{order:2} @media (max-width:860px){.persona{grid-template-columns:1fr}.persona:nth-child(even) .persona-copy{order:0}} .persona-copy h3{font-size:var(--t-2xl);letter-spacing:-.02em;margin:var(--sp-2) 0 var(--sp-2)} .persona-copy .who{font-family:var(--mono);font-size:var(--t-xs);text-transform:uppercase; letter-spacing:.1em;color:var(--eyebrow-ink);font-weight:700} .persona-copy p{color:var(--ink-2)} .persona-copy ul{list-style:none;padding:0;margin:var(--sp-4) 0} .persona-copy li{padding:6px 0 6px 24px;position:relative;font-size:var(--t-sm);color:var(--ink-2)} .persona-copy li::before{content:'';position:absolute;left:0;top:.72em;width:9px;height:9px; border-radius:3px;background:var(--h)} .toolcall{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface); box-shadow:var(--shadow-1);overflow:hidden} .toolcall .tc-head{display:flex;align-items:center;gap:8px;padding:10px var(--sp-4); border-bottom:1px solid var(--line);background:var(--surface-2); font-family:var(--mono);font-size:var(--t-xs);color:var(--muted-strong)} .toolcall .tc-head .nm{color:var(--h-ink);font-weight:700} .toolcall .tc-body{padding:var(--sp-4) var(--sp-4);font-size:var(--t-sm)} .toolcall .tc-body p{margin:0 0 6px} .toolcall .tc-body p:last-child{margin-bottom:0} .icp{border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4) var(--sp-5); background:var(--surface);box-shadow:var(--shadow-1)} .icp .fit{font-family:var(--mono);font-size:var(--t-xs);font-weight:700;letter-spacing:.08em; text-transform:uppercase} .icp .fit.yes{color:var(--o-ink)} .icp .fit.no{color:var(--r-ink)} .icp p{font-size:var(--t-sm);margin:6px 0 0} /* ---- docs page ---- */ .hero.tight{padding:var(--sp-12) 0 var(--sp-10)} .hero.tight h1{font-size:var(--t-3xl);margin:var(--sp-3) 0 var(--sp-4)} .docnav{position:sticky;top:64px;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .docnav .wrap{display:flex;gap:4px;overflow-x:auto;padding-top:10px;padding-bottom:10px} .docnav a{flex:none;font-size:var(--t-sm);font-weight:600;color:var(--ink-2);text-decoration:none; padding:8px 14px;border-radius:999px;border:1px solid transparent;min-height:36px; display:inline-flex;align-items:center} .docnav a:hover{color:var(--ink);border-color:var(--line);background:var(--surface)} .doc{padding:var(--sp-10) var(--sp-6) var(--sp-16);max-width:960px} .doc h2{margin-top:var(--sp-12);padding-top:var(--sp-4)} .doc h2:first-of-type{margin-top:var(--sp-6)} .doc h2,.docnav a,.toolcall .tc-head,.flow .node .k{scroll-margin-top:140px} /* ---- anchors, motion, print ---- */ #sources,#install,#pricing,#sam,#faq,#how,#use-cases,#icp,#personas,#auth,#quickstart,#endpoints,#catalog,#errors,#machine,#fairuse{scroll-margin-top:88px} /* Gated behind html.js, which the head script sets. If scripting is unavailable the class is never added, so nothing is ever hidden: the reveal is an enhancement rather than a requirement. Hiding content in CSS and un-hiding it in JS would blank every section below the hero without JS. */ .js .reveal{opacity:0;transform:translateY(14px); transition:opacity .5s ease,transform .5s ease} .js .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important} .js .reveal{opacity:1;transform:none} } @media print{ header.nav,.close-band .btn{display:none} body{background:#fff} .card,.plan,.panel{break-inside:avoid} } /* ---- responsive ---- */ @media (max-width:1040px){ .hero-grid{grid-template-columns:1fr;gap:var(--sp-8)} .hero h1{max-width:22ch} .plans{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:1fr} .steps.cluster{grid-template-columns:repeat(2,1fr)} .grid-4{grid-template-columns:repeat(2,1fr)} .foot-grid{grid-template-columns:1fr 1fr;gap:var(--sp-6)} } @media (max-width:860px){ .nav-inline{display:none} .nav-cta{margin-left:auto} .theme-toggle{margin-left:var(--sp-1)} .drawer{display:block} .grid-3{grid-template-columns:1fr} .compare{grid-template-columns:1fr} .compare>div:nth-child(-n+2){border-top:1px solid var(--line)} .compare>div:first-child{border-top:0} } @media (max-width:640px){ :root{--sp-16:48px;--sp-12:36px} header.nav .wrap{gap:var(--sp-3)} .wrap{padding:0 var(--sp-5)} .stats{grid-template-columns:1fr 1fr;gap:var(--sp-4)} .plans{grid-template-columns:1fr} .steps.cluster{grid-template-columns:1fr} .grid-4{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr} .hero{padding:var(--sp-12) 0 var(--sp-10)} .term-foot{gap:6px} }