/* ============================================================
GoldenI — Site system
Shared across all surfaces. Built once.
============================================================ */
@import url('../_ds/goldeni-design-system-1ae5aa06-2aac-4a75-8fa9-58d9f5d31bb8/colors_and_type.css');
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--gi-bg); overflow-x: hidden; }
a { color: inherit; }
img { display: block; }
:focus-visible { outline: 2px solid var(--gi-gold-500); outline-offset: 2px; }
/* Per-surface accent. Defaults to gold (parent surfaces). JS overrides
--accent / --accent-ink / --accent-tint per product. */
:root {
--accent: var(--gi-gold-500);
--accent-ink: var(--gi-gold-700);
--accent-tint: var(--gi-gold-050);
--accent-dark: var(--gi-gold-400);
--maxw: 1200px;
--gutter: 48px;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
/* ---------- Eyebrow override to honor accent ---------- */
.eyebrow.accent { color: var(--accent-ink); }
/* ============================================================
GLOBAL NAV (identical across all 13 surfaces)
============================================================ */
#gi-nav { min-height: 65px; }
.nav {
position: sticky; top: 0; z-index: 60;
background: rgba(255,255,255,0.82);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--gi-border-subtle);
}
.nav-inner {
max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
height: 64px; display: flex; align-items: center; gap: 4px;
}
.nav-brand { display: flex; align-items: center; gap: 0; margin-right: 22px; text-decoration: none; flex: none; }
.nav-brand img { height: 21px; }
/* nav-mid display lives here (not inline) so the ≤860px media query can hide it */
.nav-mid { display: flex; align-items: center; gap: 2px; }
/* Mobile hamburger toggle — hidden on desktop, shown ≤860px */
.nav-toggle { display: none; flex: none; width: 40px; height: 40px; align-items: center; justify-content: center; margin-left: 4px; border: 0; background: transparent; color: var(--fg-1); border-radius: var(--r-md); cursor: pointer; }
.nav-toggle:hover { background: rgba(26,31,46,0.045); }
.nav-toggle svg { width: 22px; height: 22px; display: block; }
.nav-toggle .x { display: none; }
body.nav-open .nav-toggle .bars { display: none; }
body.nav-open .nav-toggle .x { display: block; }
/* Mobile drawer — full-height panel below the bar */
.nav-mobile { display: none; }
.nm-group { padding: 14px 0; border-bottom: 1px solid var(--gi-border-subtle); }
.nm-group:last-child { border-bottom: 0; }
.nm-head { font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-4); margin-bottom: 4px; }
.nm-link { display: block; padding: 11px 0; font: 500 17px/1.25 var(--font-sans); letter-spacing: -0.01em; color: var(--fg-1); text-decoration: none; }
.nm-link .code { font: 500 11px/1 var(--font-mono); letter-spacing: 0.12em; color: var(--accent-ink); margin-right: 9px; }
.nm-link:active { color: var(--accent-ink); }
.nm-cta { width: 100%; justify-content: center; margin: 4px 0 8px; }
/* Wordmark lockup (v2) — two-strand mark + PT Serif “GoldenI.” */
.gi-lockup { display: inline-flex; align-items: center; gap: 8px; }
.gi-lm { display: flex; align-items: center; }
.gi-lm svg { display: block; }
.gi-wm { font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.012em; line-height: 1; color: var(--fg-1); }
.foot-wm { display: inline-flex; text-decoration: none; }
.foot-brand .gi-wm { color: var(--fg-on-dark-1); }
.nav-item { position: relative; }
.nav-link {
display: inline-flex; align-items: center; gap: 5px;
font: 500 13.5px/1 var(--font-sans); color: var(--fg-2);
letter-spacing: -0.006em; text-decoration: none;
padding: 9px 12px; border-radius: var(--r-md); cursor: pointer;
transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast);
white-space: nowrap; border: 0; background: transparent;
}
.nav-link:hover { color: var(--fg-1); background: rgba(26,31,46,0.045); }
.nav-link .caret { width: 9px; height: 9px; opacity: 0.5; transition: transform var(--dur-fast); }
.nav-item.open .nav-link { color: var(--fg-1); }
.nav-item.open .caret { transform: rotate(180deg); }
.nav-spacer { flex: 1; }
/* Dropdown panels */
.nav-panel {
position: absolute; top: calc(100% + 8px); left: 0;
background: var(--gi-bg-raised); border: 1px solid var(--gi-border);
border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
padding: 8px; min-width: 248px; max-width: calc(100vw - 2 * var(--gutter));
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast), visibility var(--dur-fast);
}
.nav-item.open .nav-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-panel.wide { min-width: 568px; padding: 14px; }
.np-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); text-decoration: none; transition: background var(--dur-fast); }
.np-row:hover { background: var(--gi-bg-sunken); }
.np-dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.np-mark { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex: none; }
.np-mark svg { width: 19px; height: 19px; }
.np-text .t { display: block; font: 500 14px/1.2 var(--font-sans); color: var(--fg-1); letter-spacing: -0.006em; }
.np-text .t .code { font: 500 11px/1 var(--font-mono); letter-spacing: 0.14em; color: var(--accent-ink); margin-right: 7px; }
.np-text .d { display: block; font: 400 11.5px/1.4 var(--font-sans); color: var(--fg-4); margin-top: 3px; }
.np-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, 46px); column-gap: 16px; row-gap: 2px; }
/* Products dropdown — strict equal-height grid, one helix family */
.np-prod-row { height: 46px; padding-top: 0; padding-bottom: 0; }
.np-prod-row .np-text .t { white-space: nowrap; }
.np-tag { margin-left: auto; flex: none; font: 500 9px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-4); border: 1px solid var(--gi-border); border-radius: var(--r-pill); padding: 3px 7px; }
/* CORE — the foundation, leads the grid */
.np-core { background: var(--gi-gold-050); }
.np-core:hover { background: var(--gi-gold-100); }
.np-core .np-text .t { font-weight: 600; }
.np-core .np-tag { color: var(--gi-gold-700); border-color: color-mix(in oklab, var(--gi-gold-500), transparent 55%); }
/* PORTAL — included with every organization, set apart at the close */
.np-portal { background: var(--gi-bg-sunken); border-top: 1px solid var(--gi-border); border-radius: 0 0 var(--r-md) var(--r-md); }
.np-portal:hover { background: var(--gi-border-subtle); }
.np-portal .np-tag { color: var(--gi-teal-600); border-color: color-mix(in oklab, var(--gi-teal-500), transparent 60%); }
/* Platform dropdown — CORE lead + jump-links into the CORE page */
.platform-panel { min-width: 468px; padding: 14px; }
.platform-lead { margin-bottom: 4px; }
.platform-lead .np-mark { width: 24px; height: 24px; }
.platform-lead .np-mark svg { width: 22px; height: 22px; }
.np-sub-head { font: 500 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-4); padding: 13px 12px 9px; margin-top: 6px; border-top: 1px solid var(--gi-border-subtle); }
.np-sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.np-sub-grid a { display: block; padding: 9px 12px; border-radius: var(--r-md); text-decoration: none; transition: background var(--dur-fast); }
.np-sub-grid a:hover { background: var(--gi-bg-sunken); }
.np-sub-grid .st { display: block; font: 500 13.5px/1.2 var(--font-sans); color: var(--fg-1); letter-spacing: -0.006em; }
.np-sub-grid .sd { display: block; font: 400 11.5px/1.3 var(--font-sans); color: var(--fg-3); margin-top: 2px; }
.np-foot { margin-top: 8px; padding: 12px; border-top: 1px solid var(--gi-border-subtle); display: flex; justify-content: space-between; align-items: center; }
.np-foot .lbl { font: 500 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-4); }
.np-foot a { font: 500 13px/1 var(--font-sans); color: var(--accent-ink); text-decoration: none; }
/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 7px; font: 500 13.5px/1 var(--font-sans); letter-spacing: -0.006em; padding: 10px 16px; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: filter var(--dur-fast), background var(--dur-fast), transform var(--dur-fast); }
.btn:active { transform: translateY(1px); }
.btn-ink { background: var(--gi-ink-700); color: #fff; }
.btn-ink:hover { filter: brightness(1.18); }
.btn-gold { background: var(--gi-gold-500); color: var(--gi-ink-900); }
.btn.btn-gold { border-radius: var(--r-pill); padding: 13px 28px; }
.btn-gold:hover { filter: brightness(1.05); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; color: var(--fg-1); border-color: var(--gi-border-strong); }
.btn-ghost:hover { background: rgba(26,31,46,0.04); }
.btn-ghost-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.24); }
.btn-ghost-dark:hover { background: rgba(255,255,255,0.08); }
.btn-lg { padding: 13px 20px; font-size: 14.5px; }
/* Gold accent utility — e.g. terminal period on hero lines */
.gp { color: var(--gi-gold-500); }
/* ============================================================
THE MARK — one canonical asset (design system static SVG).
Rendered as ![]()
by giHelix()/giWordmark(); no JS-drawn helix.
============================================================ */
.gi-mark { display: block; max-width: 100%; height: auto; }
/* ============================================================
SECTIONS & SECTION HEADER component
============================================================ */
section { position: relative; }
.sec { padding: 104px 0; }
.sec-sm { padding: 76px 0; }
.sec.dark { background: var(--gi-bg-dark); color: var(--fg-on-dark-1); }
.sec.ink { background: var(--gi-bg-cream); border-top: 1px solid var(--gi-border-strong); border-bottom: 1px solid var(--gi-border-strong); }
.sec + .sec:not(.dark):not(.ink) { border-top: 1px solid var(--gi-border); }
.eyebrow { display: inline-block; }
.sec-head { max-width: 760px; margin-bottom: 52px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head .eyebrow { margin-bottom: 18px; }
.sec-head h2 { font: 500 clamp(34px,4.2vw,52px)/1.08 var(--font-sans); letter-spacing: -0.026em; color: var(--fg-1); margin: 0; }
.sec.dark .sec-head h2 { color: var(--fg-on-dark-1); }
.sec-head .ser { font-family: var(--font-serif); font-weight: 400; font-style: italic; }
.sec-head p { font: 400 17px/1.6 var(--font-sans); color: var(--fg-2); margin: 20px 0 0; max-width: 620px; }
.sec.dark .sec-head p { color: var(--fg-on-dark-2); }
.sec-head.split { max-width: var(--maxw); display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end; }
.sec-head.split p { margin-top: 0; max-width: 380px; }
/* ---------- STAT BLOCK component ---------- */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--gi-border); border-top: 1px solid var(--gi-border); border-bottom: 1px solid var(--gi-border); }
.stat { background: var(--gi-bg); padding: 40px 36px 40px 0; }
.stat .metric { display: block; color: var(--fg-1); }
.stat .metric .u { font-size: 0.42em; color: var(--fg-3); letter-spacing: -0.01em; margin-left: 4px; }
.stat .cap { font: 400 14px/1.5 var(--font-sans); color: var(--fg-2); margin-top: 14px; max-width: 240px; }
.sec.dark .stat { background: var(--gi-bg-dark); }
.sec.dark .stat .metric { color: var(--fg-on-dark-1); }
.sec.dark .stat .cap { color: var(--fg-on-dark-2); }
.sec.dark .stat-row { background: var(--gi-border-dark-strong); border-color: var(--gi-border-dark-strong); }
/* On cream (.ink) sections the white stat cells read as misaligned cards —
let the section show through so only the hairline dividers remain. */
.sec.ink .stat-row { border-color: var(--gi-border-strong); }
.sec.ink .stat { background: transparent; }
/* ---------- PILL / status chip ---------- */
.pill { display: inline-flex; align-items: center; gap: 7px; font: 500 11.5px/1 var(--font-sans); letter-spacing: 0.01em; padding: 6px 11px 6px 9px; border-radius: var(--r-pill); border: 1px solid var(--gi-border); background: var(--gi-bg-raised); color: var(--fg-2); white-space: nowrap; }
.pill .led { width: 7px; height: 7px; border-radius: var(--r-pill); flex: none; }
.pill.live .led { background: var(--gi-ok-500); box-shadow: 0 0 0 3px rgba(43,168,142,0.18); }
.pill.dev .led { background: var(--gi-gold-500); }
.pill.ref .led { background: var(--gi-ink-300); }
.pill.dark { background: rgba(255,255,255,0.06); border-color: var(--gi-border-dark-strong); color: var(--fg-on-dark-2); }
.tag { display: inline-flex; align-items: center; font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.13em; text-transform: uppercase; padding: 5px 8px; border-radius: var(--r-sm); }
.tag.accent { background: var(--accent-tint); color: var(--accent-ink); }
.tag.phi { background: var(--gi-teal-050); color: var(--gi-teal-700); }
.tag.pii { background: var(--gi-indigo-050); color: var(--gi-indigo-700); }
.tag.cmp { background: var(--gi-purple-050); color: var(--gi-purple-700); }
/* ---------- CAPABILITY CARD ---------- */
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--gi-border); border: 1px solid var(--gi-border); border-radius: var(--r-lg); overflow: hidden; }
.cap-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cap-card { background: var(--gi-bg-raised); padding: 32px 30px 34px; display: flex; flex-direction: column; gap: 12px; }
.cap-card .ic { width: 30px; height: 30px; object-fit: contain; }
.cap-card .n { font: 500 11px/1 var(--font-mono); letter-spacing: 0.14em; color: var(--fg-3); }
.cap-card h4 { font: 500 19px/1.25 var(--font-sans); letter-spacing: -0.014em; color: var(--fg-1); margin: 0; }
.cap-card p { font: 400 14px/1.55 var(--font-sans); color: var(--fg-2); margin: 0; }
.cap-card .neg { font: 400 13px/1.5 var(--font-sans); color: var(--fg-3); margin-top: 2px; }
.cap-card .neg b { color: var(--accent-ink); font-weight: 500; }
/* ---------- CALLOUT (dark pull-quote box) ---------- */
.callout { background: var(--gi-bg-dark); color: var(--fg-on-dark-1); border-radius: var(--r-xl); padding: 64px 56px; }
.callout .q { font: 400 clamp(28px,3.4vw,42px)/1.18 var(--font-serif); letter-spacing: -0.018em; color: var(--fg-on-dark-1); margin: 0; }
.callout .q .gold { color: var(--gi-gold-500); }
.callout .attr { font: 400 13.5px/1.4 var(--font-sans); color: var(--fg-on-dark-3); margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--gi-border-dark-strong); }
/* ============================================================
PRODUCT GRID component (the ten-product grid)
============================================================ */
.prod-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--gi-border); border: 1px solid var(--gi-border); border-radius: var(--r-lg); overflow: hidden; }
.prod-grid.cols-2 { grid-template-columns: repeat(2,1fr); }
.prod-cell { background: var(--gi-bg-raised); padding: 26px 24px 24px; min-height: 192px; display: flex; flex-direction: column; gap: 9px; text-decoration: none; position: relative; transition: background var(--dur-fast); cursor: pointer; }
.prod-cell::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); transform: scaleY(0); transform-origin: top; transition: transform var(--dur-med) var(--ease-standard); }
.prod-cell:hover { background: var(--gi-bg-sunken); }
.prod-cell:hover::before { transform: scaleY(1); }
.prod-cell .pc-top { display: flex; align-items: center; justify-content: space-between; }
.prod-cell .code { font: 500 11px/1 var(--font-mono); letter-spacing: 0.16em; color: var(--c); }
.prod-cell .gl { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.prod-cell h4 { font: 500 16.5px/1.22 var(--font-sans); letter-spacing: -0.012em; color: var(--fg-1); margin: 2px 0 0; }
.prod-cell p { font: 400 12.5px/1.5 var(--font-sans); color: var(--fg-2); margin: 0; }
.prod-cell .stage { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font: 500 10px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); padding-top: 12px; }
.prod-cell .stage .led { width: 6px; height: 6px; border-radius: var(--r-pill); }
/* ---------- VERTICAL CARD ---------- */
.vert-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.vert-card { background: var(--gi-bg-raised); border: 1px solid var(--gi-border); border-radius: var(--r-lg); padding: 28px 26px; text-decoration: none; display: flex; flex-direction: column; gap: 10px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast); }
.vert-card.live:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.vert-card .vh { display: flex; align-items: center; justify-content: space-between; }
.vert-card h4 { font: 500 19px/1.2 var(--font-sans); letter-spacing: -0.014em; margin: 0; color: var(--fg-1); }
.vert-card p { font: 400 13.5px/1.55 var(--font-sans); color: var(--fg-2); margin: 0; }
.vert-card .arrow { font: 500 13px/1 var(--font-sans); color: var(--accent-ink); margin-top: 6px; }
.vert-card.soon { opacity: 0.72; }
.vert-card.soon .arrow { color: var(--fg-3); }
/* ============================================================
RELATED THINKING / BLOG CARD component
============================================================ */
.rt-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.blog-card { display: flex; flex-direction: column; gap: 13px; text-decoration: none; padding-top: 22px; border-top: 1px solid var(--gi-ink-700); transition: opacity var(--dur-fast); }
.blog-card:hover { opacity: 0.7; }
.blog-card .meta { display: flex; gap: 10px; align-items: center; font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.blog-card .meta .tg { color: var(--accent-ink); }
.blog-card h4 { font: 500 21px/1.24 var(--font-sans); letter-spacing: -0.018em; color: var(--fg-1); margin: 0; text-wrap: pretty; }
.blog-card p { font: 400 14px/1.55 var(--font-sans); color: var(--fg-2); margin: 0; }
.blog-card .read { margin-top: auto; font: 400 12px/1 var(--font-sans); color: var(--fg-3); padding-top: 6px; }
/* ============================================================
FOOTER (identical across all 13 surfaces)
============================================================ */
footer.gi-footer { background: var(--gi-bg-dark); color: var(--fg-on-dark-2); padding: 80px 0 36px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 32px; padding-bottom: 44px; border-bottom: 1px solid var(--gi-border-dark-strong); }
.foot-brand img { height: 30px; }
.foot-brand .tag { font: 400 14px/1.55 var(--font-sans); text-transform: none; letter-spacing: normal; color: var(--fg-on-dark-2); max-width: 300px; margin: 18px 0 0; }
.gi-footer h5 { font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-on-dark-3); margin: 0 0 16px; }
.gi-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.gi-footer ul.foot-prod { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 20px; }
.gi-footer li a { color: var(--fg-on-dark-1); text-decoration: none; font: 400 13.5px/1.3 var(--font-sans); transition: color var(--dur-fast); }
.gi-footer li a:hover { color: var(--gi-gold-500); }
/* Subscribe band — standalone light CTA band directly above the dark footer. */
.sub-band { background: var(--gi-bg-cream); border-top: 1px solid var(--gi-border-strong); border-bottom: 1px solid var(--gi-border-strong); padding: 52px 0; }
.sub-band-inner { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.sub-band-copy h3 { font: 500 22px/1.2 var(--font-sans); letter-spacing: -0.016em; color: var(--fg-1); margin: 0; }
.sub-band-copy p { font: 400 15px/1.55 var(--font-sans); color: var(--fg-2); margin: 8px 0 0; max-width: 460px; }
.sub-band-form { display: flex; gap: 10px; }
.sub-band-form input { background: var(--gi-bg); border: 1px solid var(--gi-border-strong); border-radius: var(--r-md); padding: 11px 14px; font: 400 14px/1 var(--font-sans); color: var(--fg-1); min-width: 260px; }
.sub-band-form input::placeholder { color: var(--fg-3); }
.sub-band-form input:focus { outline: 2px solid var(--gi-gold-500); outline-offset: 1px; border-color: transparent; }
.sub-band-form .gi-sub-note { margin: 0; align-self: center; }
@media (max-width:860px){ .sub-band-inner { grid-template-columns: 1fr; gap: 22px; } .sub-band-form { flex-wrap: wrap; } .sub-band-form input[data-members-email] { min-width: 0; flex: 1; } }
.foot-meta { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 26px; }
.foot-meta .badges { display: flex; gap: 8px; }
.foot-meta .badge { font: 500 10px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-on-dark-3); border: 1px solid var(--gi-border-dark-strong); border-radius: var(--r-sm); padding: 6px 9px; }
.foot-meta .legal { font: 500 10.5px/1.5 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-on-dark-3); text-align: right; }
/* ============================================================
HERO (shared shell — parent + product variants)
============================================================ */
.hero { background: var(--gi-bg-dark); color: var(--fg-on-dark-1); padding: 116px 0 0; position: relative; overflow: hidden; }
.hero-inner { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 64px; align-items: center; padding-bottom: 96px; }
.hero .eyebrow { color: var(--gi-gold-500); margin-bottom: 24px; }
.hero h1 { font: 500 clamp(44px,6.4vw,84px)/1.02 var(--font-sans); letter-spacing: -0.03em; margin: 0; color: var(--fg-on-dark-1); }
.hero h1 .ser { font-family: var(--font-serif); font-weight: 400; font-style: italic; color: var(--gi-gold-500); }
.hero .role { font: 500 15px/1 var(--font-mono); letter-spacing: 0.06em; color: var(--accent-dark); margin-bottom: 22px; }
.hero p.sub { font: 400 19px/1.55 var(--font-sans); color: var(--fg-on-dark-2); margin: 26px 0 34px; max-width: 540px; }
.hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-helix { display: flex; justify-content: center; align-items: center; }
.hero-meta { display: flex; justify-content: space-between; padding: 22px 0; border-top: 1px solid var(--gi-border-dark-strong); color: var(--fg-on-dark-3); font: 500 11px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; gap: 16px; }
.hero.product { padding-top: 104px; }
.hero.product .hero-inner { grid-template-columns: 1.3fr 0.7fr; }
.prod-mark { width: 300px; height: 300px; max-width: 100%; display: flex; align-items: center; justify-content: center; position: relative; background: radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--accent-dark) 16%, transparent), transparent 58%); }
.prod-mark::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; border: 1px solid var(--gi-border-dark-strong); opacity: 0.65; }
.prod-mark::after { content: ""; position: absolute; inset: 52px; border-radius: 50%; border: 1px solid var(--gi-border-dark-strong); opacity: 0.3; }
.prod-mark svg { position: relative; }
@media (max-width: 860px) { .prod-mark { width: 220px; height: 220px; } .prod-mark svg { width: 180px; height: 180px; } }
/* prose / paragraph stacks */
.prose-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
.prose-3 p { font: 400 16px/1.62 var(--font-sans); color: var(--fg-2); margin: 0; }
.prose-3 p strong, .prose b { color: var(--fg-1); font-weight: 600; }
.lede { font: 400 clamp(20px,2.3vw,26px)/1.45 var(--font-sans); letter-spacing: -0.012em; color: var(--fg-1); max-width: 760px; }
.lede .dim { color: var(--fg-3); }
/* inline link */
.ilink { color: var(--accent-ink); text-decoration: none; font-weight: 500; border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); padding-bottom: 1px; transition: border-color var(--dur-fast); }
.ilink:hover { border-color: var(--accent); }
/* divider rule */
.rule { height: 1px; background: var(--gi-border); border: 0; margin: 0; }
/* entrance reveal */
[data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease-entrance), transform var(--dur-slow) var(--ease-entrance); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }
/* small util */
.mono-meta { font: 500 11px/1 var(--font-mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg-3); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
/* workflow list (vertical pages) */
.wf-list { border-top: 1px solid var(--gi-ink-700); }
.wf-row { display: grid; grid-template-columns: 80px 1fr; gap: 32px; padding: 30px 0; border-bottom: 1px solid var(--gi-border); align-items: start; }
.wf-n { font: 500 13px/1 var(--font-mono); letter-spacing: 0.1em; color: var(--accent-ink); padding-top: 5px; }
.wf-row h4 { font: 500 21px/1.25 var(--font-sans); letter-spacing: -0.016em; margin: 0 0 8px; color: var(--fg-1); }
.wf-row p { font: 400 15.5px/1.6 var(--font-sans); color: var(--fg-2); margin: 0; max-width: 720px; }
/* ---------- CROSS-PRODUCT FLOW (inline diagram) ---------- */
.flow { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--gi-border); border-radius: var(--r-lg); overflow: hidden; background: var(--gi-bg-raised); }
.flow-node { flex: 1; padding: 26px 22px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.flow-node + .flow-node { border-left: 1px solid var(--gi-border); }
.flow-node.self { background: var(--accent-tint); }
.flow-node .code { font: 500 11px/1 var(--font-mono); letter-spacing: 0.14em; }
.flow-node .what { font: 400 13px/1.45 var(--font-sans); color: var(--fg-2); }
.flow-node .ev { font: 500 11px/1 var(--font-mono); letter-spacing: 0.04em; color: var(--fg-3); margin-top: auto; padding-top: 10px; }
/* ============================================================
SIGNUP MODAL — our chrome around the shared Ghost members form.
One modal, opened by any [data-open-signup] trigger or the
#subscribe / ?subscribe deep-link. The form is wired by Ghost's
Portal script (assets/site.js) — no Portal modal, no redirect.
Rendered hidden on page load; the trigger toggles visibility.
============================================================ */
.gi-signup[hidden] { display: none; }
.gi-signup { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.gi-signup-backdrop { position: absolute; inset: 0; background: rgba(15,17,23,0.66); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.gi-signup-dialog { position: relative; z-index: 1; width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--gi-bg); border: 1px solid var(--gi-border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
.gi-signup-body { padding: 40px; }
.gi-signup-title { font: 500 24px/1.15 var(--font-sans); letter-spacing: -0.02em; color: var(--fg-1); margin: 0; }
.gi-signup-sub { font: 400 15px/1.55 var(--font-sans); color: var(--fg-2); margin: 10px 0 22px; }
.gi-signup-x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--fg-3); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.gi-signup-x:hover { background: rgba(26,31,46,0.06); color: var(--fg-1); }
.gi-signup-x svg { width: 18px; height: 18px; display: block; }
body.gi-signup-open { overflow: hidden; }
/* Shared Ghost members form (footer band, modal, /contact slot). Portal
toggles .loading/.success/.error on the