/* ========================================================================== Kinetika 2.0 landing page — the page's whole stylesheet. Cascade order, and where each block came from: 1 Webfaces self-hosted, replacing the GDS `tokens/fonts.css` Google-CDN @import and the prototype head's Google Fonts . Archivo and Source Sans 3 ship as ONE variable file per subset (Google serves the same bytes for every requested weight — verified by sha256), so the weight ranges below are the whole ladder. IBM Plex Mono is gone with the @import it rode in on: nothing on this page reaches `--font-mono` (the roles that use it — .gds-badge--count, .gds-table__num, .gds-table__mono, .gds-dl__mono, .gds-input--mono, .gds-sidenav__count, code/kbd/samp — are all unrendered here). Handoff implementation requirement 3. 2 GDS tokens colors / typography / spacing / elevation / motion / base, verbatim from _ds/general-design-system-4c89a52d…/tokens/. 3 GDS components controls.css and forms.css verbatim; from display.css only the data-table block. feedback.css and navigation.css render nothing here and are not shipped. 4 Brand layer kinetika/kinetika-brand-layer.css, plus the prototype head's `--kx-bleed` min() cap. 5 Page the prototype's inline React styles, lifted to classes. 6 Responsive the prototype head's media blocks. `!important` is gone with the inline styles it existed to outrank; the behaviour at every measured width is unchanged. ========================================================================== */ /* == 1. Webfaces ========================================================== */ @font-face{font-family:'Archivo';font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Archivo';font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/source-sans-3-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/source-sans-3-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/spline-sans-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/spline-sans-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* == 2. GDS tokens ======================================================== */ /* tokens/colors.css */ :root{ --gray-0:#ffffff;--gray-25:#fafafb;--gray-50:#f5f6f8;--gray-100:#eceef2;--gray-200:#dfe2e8;--gray-300:#c8ccd6;--gray-400:#a3a9b7;--gray-500:#7c8393;--gray-600:#5c6373;--gray-700:#434956;--gray-800:#2b303a;--gray-900:#1a1d24;--gray-950:#0f1116; --blue-50:#eff3fe;--blue-100:#dbe4fd;--blue-200:#b8c8fb;--blue-300:#8ba5f6;--blue-400:#5a7cef;--blue-500:#1f4fd8;--blue-600:#1a41b4;--blue-700:#163592;--blue-800:#122a72; --green-50:#eaf6ef;--green-100:#cfeadb;--green-500:#197a4b;--green-600:#14633c; --amber-50:#fdf4e3;--amber-100:#f9e6bf;--amber-500:#9a6400;--amber-600:#7d5100; --red-50:#fdf0ef;--red-100:#fadad7;--red-500:#b3261e;--red-600:#921c16; --text-primary:var(--gray-900);--text-secondary:var(--gray-600);--text-tertiary:var(--gray-500);--text-disabled:var(--gray-400);--text-inverse:var(--gray-0);--text-link:var(--blue-600);--text-accent:var(--blue-500);--text-danger:var(--red-500);--text-success:var(--green-600);--text-warning:var(--amber-600); --surface-page:var(--gray-50);--surface-panel:var(--gray-0);--surface-sunken:var(--gray-100);--surface-raised:var(--gray-0); --surface-hover:var(--gray-50);--surface-active:var(--gray-100);--surface-selected:var(--blue-50);--surface-selected-strong:var(--blue-100); --surface-inverse:var(--gray-900);--surface-disabled:var(--gray-100); --surface-accent:var(--blue-500);--surface-accent-hover:var(--blue-600);--surface-accent-active:var(--blue-700);--surface-accent-subtle:var(--blue-50); --surface-danger:var(--red-500);--surface-danger-hover:var(--red-600);--surface-danger-subtle:var(--red-50); --border-subtle:var(--gray-200);--border-default:var(--gray-300);--border-strong:var(--gray-400);--border-inverse:var(--gray-700); --border-accent:var(--blue-500);--border-danger:var(--red-500);--border-focus:var(--blue-500); } /* tokens/typography.css — minus --font-mono, whose only load was IBM Plex Mono */ :root{ --font-core:"Source Sans 3","Helvetica Neue",Arial,sans-serif; --fs-11:11px;--fs-12:12px;--fs-13:13px;--fs-14:14px;--fs-15:15px;--fs-17:17px;--fs-20:20px;--fs-24:24px;--fs-30:30px;--fs-38:38px;--fs-48:48px; --lh-tight:1.15;--lh-snug:1.3;--lh-normal:1.45;--lh-relaxed:1.6; --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700; --ls-tight:-0.015em;--ls-normal:0;--ls-wide:0.02em;--ls-caps:0.06em; --type-display:var(--fw-semibold) var(--fs-38)/var(--lh-tight) var(--font-core); --type-title-1:var(--fw-semibold) var(--fs-24)/var(--lh-snug) var(--font-core); --type-title-2:var(--fw-semibold) var(--fs-20)/var(--lh-snug) var(--font-core); --type-title-3:var(--fw-semibold) var(--fs-15)/var(--lh-snug) var(--font-core); --type-body:var(--fw-regular) var(--fs-13)/var(--lh-normal) var(--font-core); --type-body-prose:var(--fw-regular) var(--fs-15)/var(--lh-relaxed) var(--font-core); --type-label:var(--fw-medium) var(--fs-13)/var(--lh-snug) var(--font-core); --type-caption:var(--fw-regular) var(--fs-12)/var(--lh-snug) var(--font-core); --type-overline:var(--fw-semibold) var(--fs-11)/var(--lh-snug) var(--font-core); } /* tokens/spacing.css */ :root{ --sp-0:0;--sp-1:2px;--sp-2:4px;--sp-3:6px;--sp-4:8px;--sp-5:12px;--sp-6:16px;--sp-7:20px;--sp-8:24px;--sp-9:32px;--sp-10:40px;--sp-11:56px;--sp-12:80px; --radius-xs:2px;--radius-sm:3px;--radius-md:5px;--radius-lg:8px;--radius-pill:999px; --border-width:1px;--border-width-strong:2px; --control-h-sm:24px;--control-h-md:30px;--control-h-lg:36px; --control-px-sm:var(--sp-3);--control-px-md:var(--sp-5);--control-px-lg:var(--sp-6); --control-gap:var(--sp-2); --touch-min:44px; --layout-max-prose:68ch;--layout-max-page:1240px; --focus-ring-width:2px;--focus-ring-offset:1px; } /* tokens/elevation.css */ :root{ --shadow-none:none; --shadow-xs:0 1px 1px rgba(15,17,22,.04); --shadow-sm:0 1px 2px rgba(15,17,22,.06),0 1px 3px -1px rgba(15,17,22,.08); --shadow-inset-control:inset 0 1px 0 rgba(15,17,22,.03); --focus-ring:0 0 0 var(--focus-ring-width) var(--border-focus); --z-sticky:10;--z-nav:20; } /* tokens/motion.css */ :root{ --dur-instant:80ms;--dur-fast:120ms;--dur-medium:180ms;--dur-slow:260ms; --ease-out:cubic-bezier(.2,.6,.35,1);--ease-in-out:cubic-bezier(.4,.1,.3,1);--ease-exit:cubic-bezier(.4,.05,.7,.2); --transition-control:background-color var(--dur-instant) var(--ease-out),border-color var(--dur-instant) var(--ease-out),color var(--dur-instant) var(--ease-out),box-shadow var(--dur-instant) var(--ease-out); } @media (prefers-reduced-motion:reduce){:root{ --dur-instant:0ms;--dur-fast:0ms;--dur-medium:0ms;--dur-slow:0ms; }} /* tokens/base.css */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font:var(--type-body);color:var(--text-primary);background:var(--surface-page);-webkit-font-smoothing:antialiased} h1,h2,h3,h4,p,figure{margin:0} h1{font:var(--type-title-1)}h2{font:var(--type-title-2)}h3{font:var(--type-title-3)} a{color:var(--text-link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px} a:hover{color:var(--blue-700);text-decoration-thickness:2px} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:var(--focus-ring-width) solid var(--border-focus);outline-offset:var(--focus-ring-offset)} table{border-collapse:collapse} :where(button,input,select,textarea){font-family:inherit} ::selection{background:var(--blue-100)} /* == 3. GDS components ==================================================== */ /* css/controls.css — buttons */ .gds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:var(--control-h-md);padding:0 var(--control-px-md);border:var(--border-width) solid transparent;border-radius:var(--radius-sm);font:var(--type-label);letter-spacing:var(--ls-normal);cursor:pointer;white-space:nowrap;text-decoration:none;transition:var(--transition-control);user-select:none} .gds-btn--sm{height:var(--control-h-sm);padding:0 var(--control-px-sm);font-size:var(--fs-12)} .gds-btn--lg{height:var(--control-h-lg);padding:0 var(--control-px-lg);font-size:var(--fs-14)} .gds-btn--block{width:100%} .gds-btn--primary{background:var(--surface-accent);color:var(--text-inverse);border-color:var(--surface-accent)} .gds-btn--primary:hover{background:var(--surface-accent-hover);border-color:var(--surface-accent-hover)} .gds-btn--primary:active{background:var(--surface-accent-active);border-color:var(--surface-accent-active)} .gds-btn--secondary{background:var(--surface-panel);color:var(--text-primary);border-color:var(--border-default);box-shadow:var(--shadow-xs)} .gds-btn--secondary:hover{background:var(--surface-hover);border-color:var(--border-strong)} .gds-btn--secondary:active{background:var(--surface-active)} .gds-btn[disabled],.gds-btn[aria-disabled=true]{background:var(--surface-disabled);color:var(--text-disabled);border-color:transparent;box-shadow:none;cursor:not-allowed} .gds-btn__spinner{width:12px;height:12px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:var(--radius-pill);animation:gds-spin 620ms linear infinite;opacity:.85} @keyframes gds-spin{to{transform:rotate(360deg)}} /* css/forms.css — field + text input */ .gds-field{display:flex;flex-direction:column;gap:var(--sp-2)} .gds-field__label{font:var(--type-label);color:var(--text-primary);display:flex;align-items:center;gap:var(--sp-2)} .gds-field__hint{font:var(--type-caption);color:var(--text-tertiary)} .gds-field__error{font:var(--type-caption);color:var(--text-danger);display:flex;align-items:center;gap:var(--sp-2)} .gds-field__body{display:flex;flex-direction:column;gap:var(--sp-2);flex:1 1 auto;min-width:0} .gds-input{width:100%;height:var(--control-h-md);padding:0 var(--control-px-sm);background:var(--surface-panel);color:var(--text-primary);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-sm);font:var(--type-body);box-shadow:var(--shadow-inset-control);transition:var(--transition-control)} .gds-input--lg{height:var(--control-h-lg)} .gds-input::placeholder{color:var(--text-tertiary)} .gds-input:hover{border-color:var(--border-strong)} .gds-input:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--focus-ring)} .gds-input[aria-invalid=true]{border-color:var(--border-danger)} .gds-input[aria-invalid=true]:focus{box-shadow:0 0 0 var(--focus-ring-width) var(--red-500)} .gds-input[disabled]{background:var(--surface-disabled);color:var(--text-disabled);cursor:not-allowed;box-shadow:none} .gds-field__body>.gds-input{width:100%} /* css/display.css — the data table only */ .gds-table{width:100%;font:var(--type-body);background:var(--surface-panel)} .gds-table th{text-align:left;font:var(--type-overline);color:var(--text-secondary);letter-spacing:var(--ls-caps);text-transform:uppercase;padding:var(--sp-3) var(--sp-5);border-bottom:var(--border-width) solid var(--border-default);background:var(--surface-panel);position:sticky;top:0;z-index:var(--z-sticky);white-space:nowrap} .gds-table td{padding:var(--sp-3) var(--sp-5);border-bottom:var(--border-width) solid var(--border-subtle);vertical-align:middle;color:var(--text-primary)} .gds-table--compact td,.gds-table--compact th{padding:var(--sp-2) var(--sp-4)} .gds-table tbody tr:hover td{background:var(--surface-hover)} .gds-tablewrap{overflow:auto;border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-panel);scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--gray-400) var(--gray-100)} .gds-tablewrap::-webkit-scrollbar{width:11px;height:11px} .gds-tablewrap::-webkit-scrollbar-track{background:var(--gray-100)} .gds-tablewrap::-webkit-scrollbar-thumb{background:var(--gray-400);border-radius:var(--radius-pill);border:2px solid var(--gray-100)} .gds-tablewrap::-webkit-scrollbar-thumb:hover{background:var(--gray-500)} .gds-table td,.gds-table th{background-clip:padding-box} /* Below 720px the first column stays put so rows remain identifiable while scrolling. */ @media (max-width:720px){.gds-table th:first-child,.gds-table td:first-child{position:sticky;left:0;background:var(--surface-panel);z-index:2}.gds-table thead th:first-child{z-index:calc(var(--z-sticky) + 1)}.gds-table tbody tr:hover td:first-child{background:var(--surface-hover)}} /* == 4. Kinetika brand layer ============================================== */ :root{ --kx-display:'Archivo','Source Sans 3',system-ui,sans-serif; --kx-mono:'Spline Sans Mono',ui-monospace,monospace; /* Axis colours. Each owns one methodology axis and nothing else. */ --kx-gold:#b8862c;--kx-gold-lo:#d4a84e;--kx-gold-deep:#8a6420; /* Output + brand action */ --kx-teal:#0f8f8a;--kx-teal-lo:#3db8b0; /* Access */ --kx-green:#197a4b;--kx-green-lo:#3db87a; /* Cost */ --kx-ink:#0b1017;--kx-ink-line:#233044; /* Ink-surface text: heading, body, dim. */ --kx-ink-hi:#f4f7fb;--kx-ink-body:#a9b6cc;--kx-ink-dim:rgba(169,182,204,.72); /* A shot may break ONE edge of the page column, but the break is capped: past 1440 the frame stops growing with the window instead of scaling to the viewport. The min() is load-bearing — without it the bleeding frame keeps growing and the screenshot scales with the window. */ --kx-bleed:min(96px,max(0px,calc((100vw - var(--layout-max-page))/2 + var(--sp-8)))); /* Kinetika blue replaces the GDS ink blue wherever the system still uses it (focus rings and selection only). */ --blue-50:#eef6fb;--blue-100:#d7ebf7;--blue-200:#b3d8ee;--blue-300:#83bfe1;--blue-400:#4a9fd4; --blue-500:#1c6a9e;--blue-600:#155a86;--blue-700:#0f4867;--blue-800:#0b374f; /* Links are deep gold, not blue: blue no longer carries meaning outside focus. */ --text-link:var(--kx-gold-deep); /* Tertiary text one step darker than the GDS default. --gray-500 (#7c8393) measures 3.80:1 on white and 3.52:1 on --gray-50, under the 4.5:1 that WCAG AA asks of text below 18pt; --gray-600 (#5c6373) reaches 6.02:1 and 5.57:1. On this page the token carries the header tagline, every screenshot caption's data meta, the quote attributions and the footer -- fourteen text nodes, all of them public copy. This is a DELIBERATE, reviewed departure from the prototype, which shares the failure: it is the one place the built page does not match the design pixel-for-pixel. Nothing on the ink surface moves (.kx-darkform re-points its own hint and placeholder, and the caption meta on a slab is unaffected by a light-surface token). Brand layer section 8: do not follow a rule when doing so visibly worsens comprehension. */ --text-tertiary:var(--gray-600); } /* Primary action is the same gold the product uses to start a session. */ .gds-btn--primary{background:var(--kx-gold-lo);border-color:var(--kx-gold-lo);color:#1a1200} .gds-btn--primary:hover{background:#c69a3d;border-color:#c69a3d;color:#1a1200} .gds-btn--primary:active{background:#b8862c;border-color:#b8862c} .gds-btn--primary[disabled],.gds-btn--primary[aria-disabled=true]{background:var(--surface-disabled);border-color:transparent;color:var(--text-disabled)} /* Dark slab: full-bleed band carrying methodology or conversion content. */ .kx-slab{background:var(--kx-ink);color:#e7edf6;position:relative;overflow:clip} .kx-slab::before{content:"";position:absolute;left:0;right:0;top:0;height:220px;background-image:linear-gradient(90deg,rgba(150,175,210,.09) 1px,transparent 1px);background-size:64px 100%;mask-image:linear-gradient(180deg,#000,transparent);pointer-events:none} /* GDS form controls on a slab: no card, tokens re-pointed for the dark surface. */ .kx-darkform .gds-field__label{color:#e7edf6} .kx-darkform .gds-field__hint{color:var(--kx-ink-dim)} .kx-darkform .gds-input{background:#141c26;border-color:#2c3b50;color:var(--kx-ink-hi)} .kx-darkform .gds-input::placeholder{color:#6d7c93} /* == 5. Page ============================================================== */ body{background:var(--surface-page);color:var(--text-primary);font:var(--type-body)} section{overflow-x:clip} a:hover{color:var(--kx-gold)} img{max-width:100%} /* Skip link — visible only when focused, and only on the ink slab's terms. */ .kx-skip{position:absolute;left:var(--sp-8);top:-100px;z-index:calc(var(--z-nav) + 1);background:var(--surface-panel);color:var(--text-primary);border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:var(--sp-4) var(--sp-6);font:var(--type-label);text-decoration:none;transition:top var(--dur-fast) var(--ease-out)} /* :focus, not :focus-visible -- a skip link is only ever reached by keyboard, and a programmatic focus() must reveal it too. The 2px blue ring itself stays on :focus-visible, from the GDS base sheet. */ .kx-skip:focus{top:var(--sp-4);color:var(--text-primary)} /* --- Type ladder. Four display steps, two body steps, one label, one data face. Nothing sits between them. --------------------------------- */ .kx-d1{font:800 52px/1.02 var(--kx-display);letter-spacing:-.035em} .kx-d2{font:700 30px/1.08 var(--kx-display);letter-spacing:-.03em} .kx-d3{font:700 19px/1.25 var(--kx-display);letter-spacing:-.02em} .kx-d4{font:700 15px/1.3 var(--kx-display);letter-spacing:-.01em} .kx-quote{font:500 19px/1.35 var(--kx-display);letter-spacing:-.02em} .kx-prose{font:var(--type-body-prose);color:var(--text-secondary);text-wrap:pretty} .kx-dense{font:var(--type-body);color:var(--text-secondary);text-wrap:pretty} .kx-label{font:var(--fw-semibold) var(--fs-13)/1.3 var(--font-core);color:var(--text-tertiary)} /* Mono is reserved for system state and training data: dates, sets, loads, signals. */ .kx-data{font:500 11px/1.4 var(--kx-mono);letter-spacing:.08em;text-transform:uppercase} .kx-wrap{max-width:var(--layout-max-page);margin:0 auto;padding:0 var(--sp-8)} /* Axis marks. Colour appears as a mark, never as a fill behind text. */ .kx-ticks{display:inline-flex;gap:3px;flex:none} .kx-ticks>i{display:block;width:10px;height:3px} .kx-tone-gold{background:var(--kx-gold)} .kx-tone-teal{background:var(--kx-teal)} .kx-tone-green{background:var(--kx-green)} /* --- Screenshot grammar (KxShot) ---------------------------------------- */ .kx-shot{margin:0} .kx-cap{display:flex;align-items:center;gap:var(--sp-5);margin-bottom:var(--sp-4)} .kx-cap__label{font:500 11px/1.4 var(--kx-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-primary);white-space:nowrap} .kx-cap__meta{font:500 11px/1.4 var(--kx-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);white-space:nowrap} .kx-caprule{flex:1;height:1px;background:var(--border-subtle)} .kx-frame{border:1px solid var(--kx-ink-line);background:var(--kx-ink);border-radius:var(--radius-sm);overflow:hidden} .kx-frame img{display:block;width:100%;height:auto} /* A shot bleeds to ONE edge, never both. */ .kx-shot--bleedright{margin-right:calc(-1 * var(--kx-bleed))} .kx-shot--bleedright .kx-frame{border-radius:3px 0 0 3px} .kx-shot--bleedleft{margin-left:calc(-1 * var(--kx-bleed))} .kx-shot--bleedleft .kx-frame{border-radius:0 3px 3px 0} .kx-shot--bleedleft .kx-cap{padding-left:var(--kx-bleed)} /* Phone-aspect shots keep a phone's width at every breakpoint, and a pair stays a tight pair. */ .kx-phones figure{max-width:300px} .kx-phones{max-width:632px;margin-left:auto;margin-right:auto} /* --- Header ------------------------------------------------------------- */ .kx-header{position:sticky;top:0;z-index:var(--z-nav);background:var(--surface-panel);border-bottom:1px solid var(--border-subtle)} /* 3px, three segments in a 3 / 2 / 1 flex ratio: the gold Output segment reads as the dominant axis. */ .kx-axisbar{display:flex;height:3px} .kx-axisbar>i{display:block} .kx-axisbar>i:nth-child(1){flex:3;background:var(--kx-gold)} .kx-axisbar>i:nth-child(2){flex:2;background:var(--kx-teal)} .kx-axisbar>i:nth-child(3){flex:1;background:var(--kx-green)} .kx-hdrow{height:56px;display:flex;align-items:center;gap:var(--sp-8)} .kx-wordmark{text-decoration:none;display:flex;align-items:baseline;gap:var(--sp-4)} .kx-wordmark:hover{color:inherit} .kx-wordmark__name{font:800 19px/1 var(--kx-display);letter-spacing:-.02em;color:var(--text-primary)} .kx-wordmark__dot{color:var(--kx-gold)} .kx-tagline{color:var(--text-tertiary)} .kx-navlinks{display:flex;gap:var(--sp-7);align-items:center} .kx-navlinks a{font:var(--type-label);color:var(--text-secondary);text-decoration:none} .kx-navlinks a:hover{color:var(--text-primary)} .kx-hdspacer{flex:1} /* --- Hero --------------------------------------------------------------- */ .kx-hero{position:relative;overflow:clip;background:var(--surface-panel)} .kx-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(720px 340px at 78% -14%,rgba(212,168,78,.13),transparent 70%);pointer-events:none} .kx-herogrid{position:relative;padding-top:var(--sp-10);padding-bottom:var(--sp-9);display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:var(--sp-9);align-items:center} /* Headline breaks are authored, not left to the column width: the H1 is two block spans, not one balanced string. */ .kx-h1>span{display:block} .kx-hero__sub{max-width:46ch;margin:var(--sp-6) 0 0} .kx-hero__cta{display:flex;gap:var(--sp-4);margin-top:var(--sp-7);flex-wrap:wrap} .kx-proofwrap{padding-bottom:var(--sp-9)} .kx-proof{display:grid;grid-template-columns:minmax(0,230px) repeat(3,minmax(0,1fr));gap:var(--sp-8);border-top:1px solid var(--border-subtle);padding-top:var(--sp-6)} .kx-proof__lede{color:var(--text-secondary);margin:0;max-width:24ch} .kx-proof__row{display:grid;gap:var(--sp-3);align-content:start} .kx-proof__name{display:flex;align-items:center;gap:var(--sp-4)} .kx-proof__value{color:var(--text-secondary);letter-spacing:.05em;line-height:1.5} /* --- Section head: title left, lede right ------------------------------- */ .kx-sechead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-9);align-items:baseline} .kx-sechead__title{margin:0;max-width:20ch} /* `text-wrap: pretty` is applied where the prototype applies it and nowhere else: it changes where a head breaks, so it is part of the composition, not a global typographic preference. The methodology, five-pillars and waitlist heads are deliberately without it. */ .kx-pretty{text-wrap:pretty} .kx-sechead__lede{margin:0;max-width:52ch} /* --- Capability claim + comparison -------------------------------------- */ .kx-gapsec{padding-top:var(--sp-10);padding-bottom:var(--sp-9)} .kx-gapsec .kx-sechead__title{max-width:22ch} .kx-em{color:var(--kx-gold-deep)} .kx-table{margin-top:var(--sp-9)} .kx-table__label{color:var(--text-secondary);display:block;margin-bottom:var(--sp-4)} /* --- Methodology slab --------------------------------------------------- */ .kx-slabwrap{position:relative;padding-top:var(--sp-10);padding-bottom:var(--sp-10)} .kx-method__label{color:var(--kx-gold-lo)} .kx-method__head{margin:var(--sp-4) 0 0;color:var(--kx-ink-hi);max-width:20ch} .kx-slab .kx-sechead__lede{color:var(--kx-ink-body)} .kx-axes3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-9);margin-top:var(--sp-9)} .kx-axis{display:grid;gap:var(--sp-4);align-content:start;padding-top:var(--sp-6)} .kx-axis--output{border-top:2px solid var(--kx-gold-lo)} .kx-axis--access{border-top:2px solid var(--kx-teal-lo)} .kx-axis--cost{border-top:2px solid var(--kx-green-lo)} .kx-axis--output .kx-axis__name{color:var(--kx-gold-lo)} .kx-axis--access .kx-axis__name{color:var(--kx-teal-lo)} .kx-axis--cost .kx-axis__name{color:var(--kx-green-lo)} .kx-axis__line{color:var(--kx-ink-hi)} .kx-axis p{color:var(--kx-ink-body);margin:0} .kx-axis__signals{color:var(--kx-ink-dim);text-transform:none;letter-spacing:.02em;line-height:1.6} .kx-method__close{margin:var(--sp-9) 0 0;padding-left:var(--sp-6);border-left:2px solid var(--kx-gold-lo);color:var(--kx-ink-hi);max-width:46ch} /* --- Five pillars ------------------------------------------------------- */ .kx-mechsec{background:var(--surface-panel)} .kx-mechwrap{padding-top:var(--sp-10);padding-bottom:var(--sp-10)} .kx-pillars{display:grid;gap:var(--sp-10);margin-top:var(--sp-9)} .kx-mech{display:grid;gap:var(--sp-9);align-items:center} /* Layout is chosen by the claim, not for variety. */ .kx-mech--textleft{grid-template-columns:minmax(0,330px) minmax(0,1fr)} .kx-mech--shotleft{grid-template-columns:minmax(0,1fr) minmax(0,330px)} .kx-mech--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start} .kx-mech--wide{display:grid;gap:var(--sp-7)} .kx-mech__text{max-width:62ch} /* Text beside media is capped at 38ch; standalone prose at 62ch. */ .kx-mech__text--narrow{max-width:38ch} .kx-mech__text h3{margin:0;text-wrap:pretty} .kx-mech__text p{margin:var(--sp-5) 0 0} .kx-phones{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-7)} /* The trigger list is a table, not prose. */ .kx-amend{border-top:2px solid var(--kx-teal);padding-top:var(--sp-6)} .kx-amend__label{color:var(--text-secondary)} .kx-amendrow{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);gap:var(--sp-6);align-items:baseline;padding:var(--sp-5) 0;border-top:1px solid var(--border-subtle)} .kx-amendrow:first-of-type{border-top:none;margin-top:var(--sp-4)} /* --- Field notes -------------------------------------------------------- */ .kx-fieldsec{padding-top:var(--sp-9);padding-bottom:var(--sp-9)} .kx-cards2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--sp-10)} .kx-note{margin:0;padding-left:var(--sp-7)} .kx-note--teal{border-left:2px solid var(--kx-teal)} .kx-note--green{border-left:2px solid var(--kx-green)} .kx-note blockquote{margin:0;text-wrap:pretty} .kx-note figcaption{margin-top:var(--sp-6)} /* --- Who it's built for ------------------------------------------------- */ .kx-whosec{background:var(--surface-panel);border-top:1px solid var(--border-subtle)} .kx-who{padding-top:var(--sp-10);padding-bottom:var(--sp-10);display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:var(--sp-10);align-items:start} .kx-who__lede{margin:var(--sp-6) 0 0} .kx-whorow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-8);align-items:baseline;padding:var(--sp-6) 0;border-top:1px solid var(--border-subtle)} .kx-whorow:first-of-type{border-top:none} .kx-whorow h3{margin:0;text-wrap:pretty} .kx-whorow__tag{display:block;margin-top:var(--sp-3)} .kx-whorow p{margin:0} /* Cards are for controls, the coach note and forms only. */ .kx-coachnote{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:var(--sp-6) var(--sp-7);margin-top:var(--sp-7)} .kx-coachnote h3{margin:0} .kx-coachnote p{margin:var(--sp-3) 0 0} /* --- Waitlist ----------------------------------------------------------- */ .kx-cta{position:relative;padding-top:var(--sp-10);padding-bottom:var(--sp-10);display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:var(--sp-10);align-items:start} .kx-cta__head{margin:0;max-width:18ch;color:var(--kx-ink-hi)} .kx-cta__lede{color:var(--kx-ink-body);margin:var(--sp-6) 0 0;max-width:44ch} .kx-sent{color:var(--kx-ink-body);margin:0;max-width:36ch} .kx-sent strong{color:var(--kx-ink-hi)} .kx-submit{margin-top:var(--sp-6)} /* Minimal bot friction: an off-screen, never-focusable, never-announced field. display:none would be skipped by some autofill-driven bots. */ .kx-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* --- Footer ------------------------------------------------------------- */ .kx-footer{background:var(--surface-panel)} .kx-footrow{padding:var(--sp-7) var(--sp-8);display:flex;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap;align-items:baseline} .kx-footrow>span{color:var(--text-tertiary)} /* The footer wordmark sits at default tracking; the header's rides the D3 step's -0.02em. */ .kx-footmark{font:800 19px/1 var(--kx-display);color:var(--text-primary)} .kx-footrow a{color:var(--text-secondary);text-decoration:none} .kx-footrow a:hover{color:var(--kx-gold)} /* == 6. Responsive ======================================================== */ /* Measured at 2400 / 1800 / 1600 / 1440 / 1240 / 1100 / 1040 / 900 / 820 / 760 / 640 / 430 / 414 / 390 / 360 / 320 with no horizontal overflow. */ @media (max-width:1040px){ /* Every two-column grid collapses to one, bleeds are cancelled, media radius returns to 3px, and prose columns relax to 62ch. */ .kx-sechead{grid-template-columns:1fr;gap:var(--sp-5)} .kx-herogrid,.kx-mech,.kx-axes3,.kx-who,.kx-proof,.kx-cta{grid-template-columns:1fr;gap:var(--sp-8)} .kx-shot--bleedright{margin-right:0} .kx-shot--bleedleft{margin-left:0} .kx-shot--bleedleft .kx-cap{padding-left:0} .kx-shot--bleedright .kx-frame,.kx-shot--bleedleft .kx-frame{border-radius:var(--radius-sm)} /* The 62ch clamp is for prose only — the trigger list is excluded, or it gets squeezed to ~409px at every width below 1040. */ .kx-mech__text,.kx-mech__text--narrow{max-width:62ch} } @media (max-width:760px){ /* Nav links hide. (In the prototype this needed `display:none!important`, because the inline `display:flex` on the