/* KineticMarketing landing - marketing.kineticbrain.ai
   Same Kinetic Design System as the KineticLaunch landing (km-pages / fc-design-system),
   with Kinetic Orange (#FF7A1A, --marketing-300) as the product accent instead of Signal Lime.
   Static, mobile-first, no third-party requests. */

@font-face { font-family: 'Geist'; src: url('fonts/geist-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jetbrainsmono-var.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  /* KDS raw palette (colors_and_type.css, Design System 2) */
  --bone-50: #FBFAF7; --bone-100: #F5F3EC; --bone-200: #ECE9DF; --bone-300: #DAD5C4;
  --ink-50: #6B6960; --ink-100: #4A4842; --ink-200: #2A2925; --ink-300: #161512; --ink-400: #0B0A08;
  --kinetic-50: #FFF3EC; --kinetic-100: #FFD9C2; --kinetic-200: #FFA577;
  --kinetic-300: #FF7A1A; /* Kinetic Orange = KineticMarketing primary */
  --kinetic-400: #E8501A; --kinetic-500: #A64B00;
  --launch-200: #A8D81A; --copy-300: #D6263A; --brain-200: #F5DC4A;

  /* Marketing accent mapping (fc-* names kept so components read like the Launch source) */
  --fc-orange: var(--kinetic-300);          /* fills, rails, marks, dots */
  --fc-orange-rgb: 255, 122, 26;
  --fc-orange-hover: var(--kinetic-200);
  --fc-orange-press: var(--kinetic-400);
  --fc-orange-tint: var(--kinetic-50);
  --accent-text-lg: var(--kinetic-400);     /* orange text >= 24px on light: 3.6:1 */
  --accent-text: #C73F0A;                   /* orange text at body size on light: 4.6 to 5.1:1 (AA) */

  --fc-bg: var(--bone-50);
  --fc-bg-elev: #FFFFFF;
  --fc-bg-deep: var(--bone-100);
  --fc-bg-alt: var(--bone-100);
  --fc-ink-1: var(--ink-300);
  --fc-ink-2: var(--ink-100);
  --fc-ink-3: var(--ink-50);
  --fc-ink-4: #A9A597;
  --fc-line: var(--bone-200);
  --fc-line-strong: var(--bone-300);

  --font-ui: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --shadow-1: 0 1px 0 rgba(11,10,8,.04), 0 1px 2px rgba(11,10,8,.04);
  --shadow-2: 0 2px 4px rgba(11,10,8,.05), 0 1px 2px rgba(11,10,8,.06);
  --shadow-3: 0 8px 24px rgba(11,10,8,.08), 0 2px 6px rgba(11,10,8,.06);
  --shadow-4: 0 24px 64px rgba(11,10,8,.14), 0 4px 12px rgba(11,10,8,.08);
  --r-card: 10px;
  --ease: cubic-bezier(.2,0,0,1);
  --container: 1280px;
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0; background: var(--fc-bg); color: var(--fc-ink-1);
  font: 400 16px/1.55 var(--font-ui);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
::selection { background: var(--kinetic-100); color: var(--ink-300); }
img, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }

/* Focus: visible on light and dark. Ink outline + orange halo. */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink-300); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(var(--fc-orange-rgb), .45); border-radius: 6px; }
.on-dark :focus-visible { outline-color: var(--bone-50); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink-300); color: #fff; padding: 10px 14px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
.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; }

.c-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; }
.c-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; }

/* ---------- Nav (same pattern as the Launch landing) ---------- */
.c-nav { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.86); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border-bottom: 1px solid var(--fc-line); }
.c-nav__inner { max-width: var(--container); margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px var(--gutter); }
.c-nav__brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--fc-ink-1); flex-shrink: 0; }
.c-nav__brand svg { height: 26px; width: auto; display: block; }
.c-nav__links { display: none; align-items: center; gap: 24px; margin: 0 auto; }
.c-nav__links a { font: 500 14px var(--font-ui); color: var(--fc-ink-2); text-decoration: none; padding: 6px 0; }
.c-nav__links a:hover { color: var(--fc-ink-1); }
.c-nav__right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.c-nav__xlink { display: none; font: 500 14px var(--font-ui); color: var(--fc-ink-1); text-decoration: none; }
.c-nav__xlink:hover { color: var(--accent-text); }
@media (min-width: 900px) {
  .c-nav__inner { padding: 14px 32px; gap: 28px; }
  .c-nav__brand svg { height: 28px; }
  .c-nav__links { display: flex; }
  .c-nav__right { margin-left: 0; }
  .c-nav__xlink { display: inline; }
}

/* ---------- Buttons ---------- */
.c-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 10px; font: 600 15px var(--font-ui); border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background 160ms var(--ease), box-shadow 160ms var(--ease), color 160ms var(--ease); }
.c-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Orange fill carries ink text: white on #FF7A1A is 2.9:1, ink is 6.4:1 */
.c-btn--primary { background: var(--fc-orange); color: var(--ink-300); box-shadow: var(--shadow-2); }
.c-btn--primary:hover { background: var(--kinetic-200); }
.c-btn--primary:active { background: var(--kinetic-400); }
.c-btn--ghost { background: var(--fc-bg-elev); color: var(--fc-ink-1); border: 1px solid var(--fc-line-strong); box-shadow: var(--shadow-1); }
.c-btn--ghost:hover { box-shadow: var(--shadow-2); }
.c-btn--sm { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.c-btn--lg { min-height: 52px; padding: 14px 24px; font-size: 16px; border-radius: 12px; }
.c-textlink { font: 600 15px var(--font-ui); color: var(--fc-ink-1); text-decoration: underline; text-decoration-color: var(--fc-orange); text-decoration-thickness: 2px; text-underline-offset: 4px; display: inline-flex; align-items: center; gap: 6px; }
.c-textlink:hover { color: var(--accent-text); }

/* ---------- Section shell ---------- */
.c-section { position: relative; padding: 0 0 72px; overflow: hidden; isolation: isolate; background: var(--fc-bg); border-bottom: 1px solid var(--fc-line); }
.c-section--white { background: #FFFFFF; }
.c-section--alt { background: var(--fc-bg-alt); }
.c-section > globe-field { opacity: .9; }
.kl-gridlines { background: repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(20,18,16,.05) 39px, rgba(20,18,16,.05) 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(20,18,16,.05) 39px, rgba(20,18,16,.05) 40px), #FFFFFF; }
.c-corner { display: none; position: absolute; font: 500 12px/1 var(--font-mono); color: var(--fc-ink-3); letter-spacing: .04em; z-index: 1; pointer-events: none; }
.c-corner--orange { color: var(--accent-text); }
.c-corner-tl { top: 18px; left: 24px; } .c-corner-tr { top: 18px; right: 24px; }
.c-corner-bl { bottom: 18px; left: 24px; } .c-corner-br { bottom: 18px; right: 24px; }
@media (min-width: 900px) { .c-corner { display: block; } }

.c-counter-rail { position: relative; padding: 16px 0; border-bottom: 1px solid var(--fc-line); margin-bottom: 56px; background: rgba(255,255,255,.4); z-index: 2; }
.c-counter-rail::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: 0; width: 2px; background: var(--fc-orange); }
.c-counter-rail__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); font: 500 13px var(--font-mono); color: var(--fc-ink-3); letter-spacing: .04em; }
.c-counter-rail__inner .num { color: var(--accent-text); }
.c-counter-rail__inner .lbl { margin-left: 12px; font: 600 11px var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--fc-ink-2); }
@media (min-width: 900px) {
  .c-section { padding-bottom: 96px; }
  .c-counter-rail { margin-bottom: 88px; }
  .c-counter-rail__inner { padding: 0 48px; }
  .c-container, .c-narrow { padding: 0 32px; }
}

.c-secthead { text-align: center; margin-bottom: 40px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.c-cat { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--fc-line); background: rgba(252,252,251,.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 1px 6px rgba(20,18,16,.07); font: 500 13px var(--font-ui); color: var(--fc-ink-2); }
.c-cat::before, .c-cat::after { content: "//"; font-family: var(--font-mono); color: var(--fc-ink-4); font-weight: 500; }
.c-cat__icon { display: inline-flex; color: var(--fc-orange); }
.c-cat__icon svg { width: 13px; height: 13px; }

.c-headline { font: 700 clamp(32px, 7.4vw, 56px)/1.06 var(--font-ui); letter-spacing: -.025em; color: var(--fc-ink-1); text-align: center; margin: 0 auto 14px; max-width: 900px; text-wrap: balance; }
.c-accent { color: var(--accent-text-lg); }
.on-dark .c-accent { color: var(--fc-orange); }
.c-subhead { font: 400 17px/1.6 var(--font-ui); color: var(--fc-ink-2); max-width: 600px; margin: 0 auto; text-align: center; text-wrap: pretty; }
@media (min-width: 900px) { .c-subhead { font-size: 18px; } }

/* ---------- Hero (evidence-led split, as on Launch) ---------- */
.c-hero { position: relative; padding: 48px 0 56px; background: #FCFCFB; border-bottom: 1px solid var(--fc-line); isolation: isolate; overflow: hidden; }
.kl-hero-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: start; }
.kl-eyebrow { font: 500 12px/1.5 var(--font-mono); letter-spacing: .03em; color: var(--fc-ink-3); margin-bottom: 14px; }
.kl-hero-copy h1 { font: 700 clamp(32px, 8.6vw, 46px)/1.07 var(--font-ui); letter-spacing: -.025em; color: var(--fc-ink-1); margin: 0 0 16px; text-wrap: balance; }
.kl-hero-copy .c-lede { font: 400 17px/1.6 var(--font-ui); color: var(--fc-ink-2); max-width: 32em; margin: 0 0 22px; }
.c-inline-pill { display: inline-block; padding: 1px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--fc-orange); box-shadow: var(--shadow-1); white-space: nowrap; color: var(--fc-ink-1); }
.kl-trust { margin-top: 14px; font: 500 12px/1.6 var(--font-mono); color: var(--fc-ink-3); letter-spacing: .03em; }
.kl-hero-alt { margin-top: 18px; }
@media (min-width: 960px) {
  .c-hero { padding: 76px 0 88px; }
  .kl-hero-grid { grid-template-columns: 1.02fr .98fr; gap: 48px; }
}

/* ---------- Waitlist form ---------- */
.c-form { max-width: 480px; }
.c-form__label { display: block; font: 600 14px var(--font-ui); color: var(--fc-ink-1); margin-bottom: 8px; }
.c-form__row { display: flex; flex-direction: column; gap: 10px; }
.c-input { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--bone-300); background: #fff; color: var(--fc-ink-1); font: 400 16px var(--font-ui); box-shadow: inset 0 1px 0 rgba(11,10,8,.04); }
.c-input::placeholder { color: #77746B; }
.c-input:focus-visible { border-color: var(--ink-300); border-radius: 10px; }
.c-input[aria-invalid="true"] { border-color: #B42318; }
.c-form .c-btn { width: 100%; }
.c-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.c-form__msg { min-height: 1.5em; margin-top: 10px; font: 500 14px/1.5 var(--font-ui); }
.c-form__msg.is-error { color: #B42318; }
.c-form__msg.is-ok { color: var(--fc-ink-1); }
.c-form__msg.is-ok::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 99px; background: var(--fc-orange); margin-right: 8px; vertical-align: 1px; }
.c-form__privacy { margin-top: 8px; font: 400 13px/1.55 var(--font-ui); color: var(--fc-ink-3); }
.c-form__privacy a { color: var(--fc-ink-1); text-underline-offset: 3px; }
.c-form.is-done .c-form__row { display: none; }
@media (min-width: 560px) {
  .c-form__row { flex-direction: row; }
  .c-form .c-btn { width: auto; }
  .c-input { flex: 1; }
}
.on-dark .c-form__label { color: var(--bone-50); }
.on-dark .c-input { background: #201E1A; border-color: #3A3731; color: var(--bone-50); }
.on-dark .c-input::placeholder { color: #9C998E; }
.on-dark .c-input:focus-visible { border-color: var(--bone-50); }
.on-dark .c-form__privacy { color: #B8B5A8; }
.on-dark .c-form__privacy a { color: var(--bone-50); }
.on-dark .c-form__msg.is-ok { color: var(--bone-50); }
.on-dark .c-form__msg.is-error { color: #FFB4A8; }

/* ---------- Today queue mock panel (example data) ---------- */
.kl-rpanel { background: #fff; border: 1px solid var(--fc-line); border-radius: 14px; overflow: hidden; box-shadow: 0 18px 50px -28px rgba(20,18,16,.35); text-align: left; }
.kl-rpanel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--fc-line); background: var(--bone-100); font: 500 12px var(--font-mono); color: var(--fc-ink-2); }
.kl-sample-tag { font: 500 12px var(--font-mono); color: var(--fc-ink-3); border: 1px solid var(--fc-line-strong); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.kl-rpanel__body { padding: 12px; display: grid; gap: 12px; }
.q-acct { border: 1px solid var(--fc-line); border-radius: 10px; overflow: hidden; }
.q-acct__head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-left: 4px solid var(--fc-orange); background: var(--bone-50); border-bottom: 1px solid var(--fc-line); }
.q-acct--b .q-acct__head { border-left-color: var(--ink-300); }
.q-acct__name { flex: 1; min-width: 0; font: 700 11.5px/1.35 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--fc-ink-1); }
.q-acct__open { font: 600 11.5px var(--font-ui); color: var(--fc-ink-1); border: 1px solid var(--fc-line-strong); border-radius: 6px; padding: 3px 8px; background: #fff; white-space: nowrap; }
.q-item { padding: 10px 12px; }
.q-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; font: 500 11px var(--font-mono); color: var(--fc-ink-3); }
.q-pill { display: inline-flex; align-items: center; gap: 5px; font: 600 10.5px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; border-radius: 99px; padding: 2px 8px; border: 1px solid var(--fc-line-strong); color: var(--fc-ink-2); background: #fff; }
.q-pill--ok::before { content: ""; width: 6px; height: 6px; border-radius: 9px; background: var(--fc-orange); }
.q-pill--gap { border-color: #E4B4A6; background: #FFF6F2; color: #8F2E0C; text-transform: none; letter-spacing: 0; font-family: var(--font-mono); font-weight: 500; }
.q-item__text { font: 400 13.5px/1.5 var(--font-ui); color: var(--fc-ink-1); margin: 0 0 8px; }
.q-item__text mark { background: #FFE8DC; color: #8F2E0C; padding: 0 3px; border-radius: 3px; font-family: var(--font-mono); font-size: 12.5px; }
.q-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.q-actions span { font: 600 11.5px var(--font-ui); border-radius: 6px; padding: 4px 9px; border: 1px solid var(--fc-line-strong); color: var(--fc-ink-1); background: #fff; }
.q-actions .is-main { background: var(--fc-orange); border-color: var(--fc-orange); color: var(--ink-300); }
.q-actions .is-off { color: #5E5C55; background: var(--bone-100); }
.q-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 2px 2px 0; font: 500 11.5px var(--font-mono); color: var(--fc-ink-2); }
.q-foot b { color: var(--accent-text); font-weight: 600; }

/* ---------- Problem cards ---------- */
.c-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .c-grid--2, .c-grid--3, .c-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .c-grid--3 { grid-template-columns: repeat(3, 1fr); } .c-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.c-problem { background: #fff; border: 1px solid var(--fc-line); border-radius: 14px; padding: 22px; box-shadow: var(--shadow-1); text-align: left; }
.c-problem__title { font: 600 17px/1.35 var(--font-ui); color: var(--fc-ink-1); margin: 0 0 8px; letter-spacing: -.01em; }
.c-problem__title::before { content: "//"; font: 500 13px var(--font-mono); color: var(--fc-orange); margin-right: 8px; }
.c-problem p { font: 400 15px/1.6 var(--font-ui); color: var(--fc-ink-2); }

/* ---------- Feature cards ---------- */
.c-feat { position: relative; background: #fff; border-radius: var(--r-card); padding: 22px 22px 24px; box-shadow: var(--shadow-3); border: 1px solid var(--fc-line); text-align: left; transition: box-shadow 200ms var(--ease), transform 200ms var(--ease); }
.c-feat:hover { box-shadow: var(--shadow-4); transform: translateY(-2px); }
.c-feat__icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--fc-orange); margin-bottom: 14px; border-radius: 10px; transition: background 250ms ease, color 250ms ease; }
.c-feat__icon svg { width: 26px; height: 26px; }
.c-feat:hover .c-feat__icon { background: var(--fc-orange); color: var(--ink-300); }
.c-feat__title { font: 600 17px/1.3 var(--font-ui); color: var(--fc-ink-1); margin: 0 0 8px; letter-spacing: -.01em; }
.c-feat__title .n { color: var(--accent-text); font-weight: 600; margin-right: 4px; }
.c-feat__body { font: 400 15px/1.6 var(--font-ui); color: var(--fc-ink-2); }
.c-feat__body code, .c-code-inline { font: 500 13px var(--font-mono); background: var(--bone-100); border: 1px solid var(--fc-line); border-radius: 4px; padding: 0 4px; color: var(--fc-ink-1); }

/* ---------- Posting limits table ---------- */
.c-limits { background: #fff; border: 1px solid var(--fc-line); border-radius: 14px; box-shadow: var(--shadow-3); overflow: hidden; text-align: left; }
.c-limits__row { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 18px 20px; border-top: 1px solid var(--fc-line); }
.c-limits__row:first-child { border-top: 0; }
.c-limits__head { display: none; }
.c-limits__platform { font: 600 16px/1.35 var(--font-ui); color: var(--fc-ink-1); }
.c-limits__now, .c-limits__why { font: 400 15px/1.55 var(--font-ui); color: var(--fc-ink-2); }
.c-limits__k { display: inline-block; min-width: 84px; font: 500 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fc-ink-3); }
.c-tag { display: inline-flex; align-items: center; gap: 6px; font: 600 11px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; border-radius: 99px; padding: 3px 10px; white-space: nowrap; justify-self: start; }
.c-tag--hand { background: var(--ink-300); color: var(--bone-50); }
.c-tag--coming { background: #fff; border: 1px solid var(--fc-orange); color: var(--accent-text); }
.c-tag--first { background: var(--kinetic-50); border: 1px solid var(--kinetic-100); color: var(--accent-text); }
@media (min-width: 900px) {
  .c-limits__row { grid-template-columns: 1.1fr 1.4fr 1.6fr .9fr; gap: 20px; align-items: center; padding: 18px 24px; }
  .c-limits__head { display: grid; background: var(--bone-100); font: 500 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fc-ink-3); padding-top: 12px; padding-bottom: 12px; }
  .c-limits__k { display: none; }
  .c-tag { justify-self: end; }
}

/* ---------- Code panel + split ---------- */
.c-split { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; text-align: left; }
@media (min-width: 960px) { .c-split { grid-template-columns: 1.05fr 1fr; gap: 48px; } }
.c-codepanel { position: relative; background: var(--ink-300); color: var(--bone-50); border-radius: 16px; padding: 18px 18px 20px; box-shadow: var(--shadow-4); overflow: hidden; }
.c-codepanel__traffic { display: flex; gap: 6px; margin-bottom: 14px; }
.c-codepanel__traffic i { width: 10px; height: 10px; border-radius: 99px; background: #3A3731; }
.c-codepanel__corner { position: absolute; top: 16px; right: 18px; font: 500 12px var(--font-mono); color: #B8B5A8; letter-spacing: .04em; }
.c-codepanel pre { margin: 0; font: 400 13px/1.85 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.c-codepanel .ln { display: inline-block; width: 22px; color: #807D72; user-select: none; }
.c-codepanel .fn { color: var(--fc-orange); }
.c-codepanel .lime { color: var(--launch-200); }
.c-codepanel .com { color: #A6A296; }
@media (min-width: 560px) { .c-codepanel { padding: 20px 24px 24px; } .c-codepanel pre { font-size: 13.5px; white-space: pre; } }
.c-split__copy h3 { font: 700 clamp(24px, 5vw, 32px)/1.15 var(--font-ui); letter-spacing: -.02em; margin: 0 0 14px; }
.c-split__copy p { font: 400 17px/1.6 var(--font-ui); color: var(--fc-ink-2); margin: 0 0 14px; }
.c-split__actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 22px; }

/* ---------- Suite cards ---------- */
.c-suite { margin-top: 48px; }
.c-suite .c-feat { padding: 20px; }
.c-suite__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.c-suite__top svg { height: 22px; width: auto; display: block; }
.c-suite .c-feat__body { font-size: 14.5px; }
.c-suite a.c-feat { text-decoration: none; color: inherit; display: block; }
.c-suite a.c-feat:hover .c-suite__go { text-decoration: underline; text-decoration-color: var(--fc-orange); text-underline-offset: 3px; }
.c-suite__go { display: inline-block; padding: 3px 0; margin-top: 8px; font: 600 14px var(--font-ui); color: var(--fc-ink-1); }
.c-state { font: 600 10px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; border-radius: 99px; padding: 3px 8px; border: 1px solid var(--fc-line-strong); color: var(--fc-ink-2); white-space: nowrap; }
.c-state--here { border-color: var(--fc-orange); color: var(--accent-text); }

/* ---------- Coming list ---------- */
.c-coming { display: grid; grid-template-columns: 1fr; gap: 12px; text-align: left; }
@media (min-width: 760px) { .c-coming { grid-template-columns: repeat(2, 1fr); } }
.c-coming li { list-style: none; display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; background: #fff; border: 1px dashed var(--fc-line-strong); border-radius: 12px; padding: 16px 18px; }
.c-coming ul, ul.c-coming { padding: 0; margin: 0; }
.c-coming__t { font: 500 15.5px/1.5 var(--font-ui); color: var(--fc-ink-1); }
.c-note { text-align: center; margin-top: 22px; font: 500 12.5px/1.6 var(--font-mono); color: var(--fc-ink-3); }

/* ---------- FAQ (native details/summary) ---------- */
.c-faq { text-align: left; }
.c-faq details { border-bottom: 1px solid var(--fc-line); }
.c-faq details:first-child { border-top: 1px solid var(--fc-line); }
.c-faq summary { list-style: none; cursor: pointer; padding: 20px 0; font: 500 17px/1.4 var(--font-ui); color: var(--fc-ink-1); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.c-faq summary::-webkit-details-marker { display: none; }
.c-faq summary svg { flex-shrink: 0; color: var(--fc-ink-3); transition: transform 250ms var(--ease); }
.c-faq details[open] summary svg { transform: rotate(180deg); color: var(--fc-orange); }
.c-faq .c-faq__a { padding: 0 0 22px; font: 400 15.5px/1.7 var(--font-ui); color: var(--fc-ink-2); max-width: 660px; }
.c-faq .c-faq__a a { color: var(--fc-ink-1); text-underline-offset: 3px; }

/* ---------- Final CTA (ink band) ---------- */
.c-section--ink { background: var(--ink-300); color: var(--bone-50); border-bottom: 0; }
.c-section--ink .c-counter-rail { background: rgba(255,255,255,.03); border-bottom-color: #26241F; border-top: 1px solid #26241F; }
.c-section--ink .c-counter-rail__inner { color: #B8B5A8; }
.c-section--ink .c-counter-rail__inner .num { color: var(--fc-orange); }
.c-section--ink .c-counter-rail__inner .lbl { color: #D9D6CB; }
.c-section--ink .c-headline { color: var(--bone-50); }
.c-section--ink .c-subhead { color: #CFCBBF; }
.c-section--ink .c-cat { background: rgba(255,255,255,.06); border-color: #34322C; color: #E7E4DA; box-shadow: none; }
.c-section--ink .c-cat::before, .c-section--ink .c-cat::after { color: #807D72; }
.c-section--ink .c-corner { color: #9C998E; }
.c-section--ink .c-corner--orange { color: var(--fc-orange); }
.c-cta-form { max-width: 520px; margin: 28px auto 0; text-align: left; }
.c-cta-alt { text-align: center; margin-top: 26px; font: 400 15px var(--font-ui); color: #CFCBBF; }
.c-cta-alt a { color: var(--bone-50); font-weight: 600; text-decoration-color: var(--fc-orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- Footer (Launch pattern) ---------- */
.c-footer { background: var(--fc-bg); padding: 56px 0 28px; border-top: 1px solid var(--fc-line); }
.c-footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; margin-bottom: 40px; }
.c-footer-col--brand { grid-column: 1 / -1; }
.c-footer-col--brand svg { height: 26px; width: auto; display: block; }
.c-footer-col h2 { font: 500 12px var(--font-ui); color: var(--fc-ink-3); letter-spacing: .18em; text-transform: uppercase; margin: 0 0 12px; }
.c-footer-col a { display: block; padding: 7px 0; font: 400 15px var(--font-ui); color: var(--fc-ink-2); text-decoration: none; }
.c-footer-col a:hover { color: var(--fc-ink-1); text-decoration: underline; text-decoration-color: var(--fc-orange); text-underline-offset: 3px; }
.c-footer-tag { font: 400 14px var(--font-ui); color: var(--fc-ink-2); margin: 10px 0 0; }
.c-footer-bottom { border-top: 1px solid var(--fc-line); padding-top: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.c-footer-bottom__left { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.c-mono-mute { font: 500 12px var(--font-mono); color: var(--fc-ink-3); text-decoration: none; padding: 6px 0; }
a.c-mono-mute:hover { color: var(--fc-ink-1); }
.c-footer-bottom svg { height: 18px; width: auto; display: block; }
@media (min-width: 900px) {
  .c-footer { padding: 96px 0 32px; }
  .c-footer-cols { grid-template-columns: 1.5fr repeat(3, 1fr); gap: 32px; margin-bottom: 64px; }
  .c-footer-col--brand { grid-column: auto; }
  .c-footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* spacing helpers (no inline styles, so the CSP can stay strict) */
[data-mt] { margin-top: 44px; }
[data-mt-sm] { margin-top: 36px; }
figure.kl-rpanel { margin: 0; }

/* narrow phones: keep header on one line, no horizontal scroll */
.show-xs { display: none; }
.c-nav__brand svg { height: 22px; }
@media (max-width: 420px) { .hide-xs { display: none; } .show-xs { display: inline; } .c-nav__brand svg { height: 20px; } }
@media (min-width: 900px) { .c-nav__brand svg { height: 28px; } }
.c-suite__top { flex-wrap: wrap; }
.c-suite__top svg { max-width: 100%; }
[data-mt] { margin-top: 44px !important; }
.c-form__msg:focus { outline: none; }
.c-form__msg:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; box-shadow: none; }

/* ---------- v3: KineticLaunch globe stage (orange), seats line, reasons to join ---------- */
.c-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.c-hero > .c-container { position: relative; z-index: 1; }
.c-globe-stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(640px, 92vw); aspect-ratio: 1 / 1; display: grid; place-items: center; }
.c-globe-stage ascii-globe { position: relative; z-index: 1; display: block; }
.c-globe-rings { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.c-globe-rings circle { fill: none; stroke: rgba(var(--fc-orange-rgb), .22); stroke-width: 1; }
.c-hero__bg .c-globe-stage { opacity: .85; }
@media (min-width: 960px) { .c-hero__bg .c-globe-stage { left: 74%; } }
.c-cta-globe { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.c-cta-globe .c-globe-stage { opacity: .55; }
.c-section--ink > .c-container, .c-section--ink > .c-counter-rail { position: relative; z-index: 2; }
.kl-seats { margin-top: 10px; font: 400 14px/1.55 var(--font-ui); color: var(--fc-ink-2); max-width: 34em; }
.kl-seats strong { color: var(--fc-ink-1); font-weight: 600; }
.kl-seats a { color: var(--fc-ink-1); text-decoration-color: var(--fc-orange); text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap; }
.c-perks { list-style: none; padding: 0; margin: 28px auto 0; max-width: 620px; display: grid; gap: 10px; text-align: left; }
.c-perks li { position: relative; padding: 14px 16px 14px 44px; border: 1px solid #34322C; border-radius: 12px; background: rgba(255,255,255,.04); font: 400 15px/1.55 var(--font-ui); color: #DDD9CE; }
.c-perks li::before { content: ""; position: absolute; left: 16px; top: 18px; width: 14px; height: 14px; border-radius: 4px; background: var(--fc-orange); }
.c-perks strong { color: var(--bone-50); font-weight: 600; }

/* ==========================================================================
   v4 (2026-10-28): truth labels, day loop, fit lists, roadmap lanes, Launch cards.
   One label system everywhere: Built (ink), Coming (orange fill, ink text), Planned (dashed).
   ========================================================================== */
.t-tag { display: inline-flex; align-items: center; justify-content: center; font: 600 10.5px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; border-radius: 99px; padding: 5px 9px; white-space: nowrap; flex-shrink: 0; border: 1px solid transparent; }
.t-tag--built { background: var(--ink-300); color: var(--bone-50); }
.t-tag--coming { background: var(--fc-orange); color: var(--ink-300); }
.t-tag--planned { background: transparent; color: var(--ink-100); border: 1px dashed #8A877D; }
.t-tag--rule { background: var(--bone-50); color: var(--ink-300); }

/* hero status chips */
.t-chips { list-style: none; padding: 0; margin: -6px 0 24px; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.t-chips li { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1.4 var(--font-ui); color: var(--fc-ink-1); }

/* legend */
.t-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 26px auto 0; padding: 0; }
.t-legend > div { display: flex; align-items: center; gap: 8px; }
.t-legend dt { margin: 0; }
.t-legend dd { margin: 0; font: 400 14px/1.4 var(--font-ui); color: var(--fc-ink-2); }

/* example panel: the coming line */
.q-next { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px dashed var(--kinetic-200); border-radius: 10px; background: rgba(var(--fc-orange-rgb), .05); font: 500 11.5px/1.45 var(--font-mono); color: var(--fc-ink-2); }

/* ---------- Day loop (timeline, Now vs Next) ---------- */
.c-loop { position: relative; list-style: none; padding: 0; margin: 44px auto 0; max-width: 1040px; text-align: left; }
.c-loop::before { content: ""; position: absolute; left: 21px; top: 10px; bottom: 30px; width: 2px; background: linear-gradient(180deg, var(--fc-orange), var(--fc-line-strong) 85%); border-radius: 2px; }
.c-loop__step { position: relative; padding: 0 0 30px 62px; }
.c-loop__step:last-child { padding-bottom: 0; }
.c-loop__when { display: flex; align-items: center; min-height: 44px; margin-bottom: 4px; }
.c-loop__n { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--fc-line-strong); box-shadow: var(--shadow-2); display: grid; place-items: center; font: 600 14px var(--font-mono); color: var(--ink-300); }
.c-loop__step:first-child .c-loop__n { background: var(--fc-orange); border-color: var(--fc-orange); }
.c-loop__t { font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fc-ink-3); }
.c-loop__title { font: 600 21px/1.25 var(--font-ui); letter-spacing: -.015em; color: var(--fc-ink-1); margin: 0 0 12px; }
.c-loop__panes { display: grid; grid-template-columns: 1fr; gap: 10px; }
.c-pane { border-radius: 12px; padding: 14px 16px 16px; }
.c-pane p { margin: 8px 0 0; font: 400 15px/1.55 var(--font-ui); color: var(--fc-ink-2); }
.c-pane p + .t-tag { margin-top: 14px; }
.c-pane code { font: 500 13px var(--font-mono); background: var(--bone-100); border: 1px solid var(--fc-line); border-radius: 4px; padding: 0 4px; color: var(--fc-ink-1); }
.c-pane--now { background: #fff; border: 1px solid var(--fc-line); box-shadow: var(--shadow-2); }
.c-pane--now p { color: var(--fc-ink-1); }
.c-pane--next { background: rgba(255,255,255,.55); border: 1px dashed var(--fc-line-strong); }
.c-pane--soon { border-color: var(--kinetic-200); background: rgba(var(--fc-orange-rgb), .05); }
@media (min-width: 760px) {
  .c-loop__panes { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .c-loop::before { left: 27px; }
  .c-loop__step { padding-left: 0; display: grid; grid-template-columns: 190px 1fr; gap: 0 24px; }
  .c-loop__n { position: relative; width: 56px; height: 56px; font-size: 15px; }
  .c-loop__when { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0; margin: 0; }
  .c-loop__title { margin-top: 4px; }
}

/* ---------- Who it's for ---------- */
.c-fit { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 1040px; margin-left: auto; margin-right: auto; text-align: left; }
@media (min-width: 760px) { .c-fit { grid-template-columns: 1.15fr 1fr; } }
.c-fit__col { border: 1px solid var(--fc-line); border-radius: 14px; padding: 22px 22px 14px; background: var(--fc-bg); }
.c-fit__col--yes { border-top: 3px solid var(--fc-orange); background: #fff; box-shadow: var(--shadow-3); }
.c-fit__col--no { border-top: 3px solid var(--ink-300); }
.c-fit__h { font: 600 12px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fc-ink-1); margin: 0 0 6px; }
.c-fit ul { list-style: none; padding: 0; margin: 0; }
.c-fit li { position: relative; padding: 11px 0 11px 30px; border-top: 1px solid var(--fc-line); font: 400 15.5px/1.55 var(--font-ui); color: var(--fc-ink-2); }
.c-fit li:first-child { border-top: 0; }
.c-fit li::before { position: absolute; left: 2px; top: 11px; font: 600 15px/1.55 var(--font-mono); }
.c-fit__col--yes li::before { content: "+"; color: var(--accent-text); }
.c-fit__col--no li::before { content: "x"; color: var(--fc-ink-3); }
.c-note { margin-top: 28px; }

/* ---------- Roadmap lanes ---------- */
.c-lanes { display: grid; grid-template-columns: 1fr; gap: 14px; text-align: left; }
@media (min-width: 760px) { .c-lanes { grid-template-columns: 1fr 1fr; } .c-lane--rules { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .c-lanes { grid-template-columns: 1fr 1.2fr 1fr; } .c-lane--rules { grid-column: auto; } }
.c-lane { border-radius: 14px; padding: 22px 22px 12px; }
.c-lane__head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.c-lane__head h3 { font: 600 19px/1.3 var(--font-ui); letter-spacing: -.01em; color: var(--fc-ink-1); margin: 0; }
.c-lane ul { list-style: none; padding: 0; margin: 0; }
.c-lane li { padding: 12px 0; border-top: 1px solid var(--fc-line); font: 400 15px/1.55 var(--font-ui); color: var(--fc-ink-2); }
.c-lane li strong { color: var(--fc-ink-1); font-weight: 600; }
.c-lane--coming { background: #fff; border: 1px solid var(--fc-orange); box-shadow: 0 18px 44px -24px rgba(var(--fc-orange-rgb), .55), var(--shadow-2); }
.c-lane--planned { background: rgba(255,255,255,.7); border: 1px dashed #B9B4A4; }
.c-lane--rules { background: var(--ink-300); color: var(--bone-50); box-shadow: var(--shadow-4); }
.c-lane--rules .c-lane__head h3 { color: var(--bone-50); }
.c-lane--rules li { border-top-color: #2E2C27; color: #CFCBBF; }
.c-lane--rules li strong { color: var(--bone-50); }

/* ---------- With KineticLaunch / on its own ---------- */
.c-with { display: grid; gap: 14px; }
.c-with__card { background: #fff; border: 1px solid var(--fc-line); border-radius: 14px; padding: 20px 22px 22px; box-shadow: var(--shadow-3); text-align: left; }
.c-with__card--launch { border-top: 3px solid var(--launch-200); }
.c-with__card h3 { font: 600 19px/1.3 var(--font-ui); letter-spacing: -.01em; margin: 0 0 8px; }
.c-with__card ul { list-style: none; padding: 0; margin: 0 0 4px; }
.c-with__card li { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; border-top: 1px solid var(--fc-line); font: 400 15px/1.5 var(--font-ui); color: var(--fc-ink-2); }
.c-with__card li:first-child { border-top: 0; }
.c-with__card li .t-tag { min-width: 76px; margin-top: 1px; }
.c-with__card .c-btn { margin-top: 14px; }

/* FAQ questions are h3 for outline + AI search; keep the summary look */
.c-faq summary h3 { font: inherit; color: inherit; margin: 0; letter-spacing: 0; }

/* CTA rail label without a counter */
.c-section--ink .c-counter-rail__inner .num { letter-spacing: .04em; }

/* grid children may shrink below their content (the code panel at 320 px) */
.c-split > * { min-width: 0; }
/* lanes and the suite split size to their content instead of stretching */
.c-lanes { align-items: start; }
#suite .c-split { align-items: start; }
.c-with { grid-template-columns: minmax(0, 1fr); }
.c-with__card .c-btn { white-space: normal; text-align: center; }

/* ==========================================================================
   v4.1 (Council Advocate fixes, 2026-10-29)
   ========================================================================== */
/* hero: intro line above the form; the field's label is now "Your email" */
.c-form__intro { font: 600 15px/1.4 var(--font-ui); color: var(--fc-ink-1); margin: 0 0 10px; }
.c-form__label { font-weight: 500; color: var(--fc-ink-2); }

/* example panel: the coming auto-publish card (design upgrade 1) */
.q-acct--auto { border: 1px dashed var(--kinetic-200); background: rgba(var(--fc-orange-rgb), .04); }
.q-acct--auto .q-acct__head { border-left-color: var(--kinetic-200); background: transparent; border-bottom-style: dashed; border-bottom-color: var(--kinetic-100); }
.q-clock { display: inline-flex; align-items: center; gap: 5px; }
.q-auto-note { margin: 0; font: 500 11.5px/1.45 var(--font-mono); color: var(--fc-ink-2); }
@media (max-width: 599px) { .q-acct--b { display: none; } }  /* calmer mobile hero (design upgrade 5) */

/* feature numbers: a real space now follows the number */
.c-feat__title .n { margin-right: 0; }

/* timeline: labels sit on a chip so the line never strikes through them */
.c-loop__n { z-index: 1; }
.c-loop__t { position: relative; z-index: 1; background: var(--fc-bg); padding: 3px 6px; border-radius: 4px; }
@media (min-width: 1024px) { .c-loop__t { margin-left: -6px; } }

/* FLOW.md on small screens: each comment on its own line instead of wrapping mid-phrase */
@media (max-width: 599px) {
  .c-codepanel .com { display: block; padding-left: 22px; margin-top: -2px; }
  .c-codepanel pre { font-size: 12.5px; line-height: 1.7; }
}

/* roadmap (design upgrade 3): Coming is the loud card, Planned a two-column list, House rules a slim strip */
.c-lanes, .c-lanes { grid-template-columns: 1fr; }
@media (min-width: 760px) { .c-lanes { grid-template-columns: 1fr; } }
@media (min-width: 1100px) { .c-lanes { grid-template-columns: 1fr; } }
.c-lane--coming { background: linear-gradient(180deg, rgba(var(--fc-orange-rgb), .10), rgba(var(--fc-orange-rgb), .04)); border: 1.5px solid var(--fc-orange); padding: 26px 26px 18px; }
.c-lane--coming .c-lane__head h3 { font-size: 24px; }
.c-lane--coming li { border-top-color: rgba(var(--fc-orange-rgb), .25); color: var(--fc-ink-1); }
.c-lane__cols { display: grid; grid-template-columns: 1fr; gap: 0 28px; }
@media (min-width: 900px) {
  .c-lane--coming .c-lane__cols { grid-template-columns: 1.4fr 1fr 1fr; }
  .c-lane--coming .c-lane__head { flex-direction: row; align-items: center; gap: 14px; }
}
@media (min-width: 760px) { .c-lane__cols--2 { grid-template-columns: 1fr 1fr; } }
.c-rules { background: var(--ink-300); color: var(--bone-50); border-radius: 14px; padding: 18px 22px; box-shadow: var(--shadow-3); text-align: left; }
.c-rules__h { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font: 600 15px var(--font-ui); color: var(--bone-50); }
.c-rules ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 0 24px; }
.c-rules li { padding: 10px 0; border-top: 1px solid #2E2C27; font: 400 14px/1.5 var(--font-ui); color: #CFCBBF; }
.c-rules li strong { color: var(--bone-50); font-weight: 600; }
@media (min-width: 760px) { .c-rules ul { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .c-rules ul { grid-template-columns: repeat(4, 1fr); } .c-rules li { border-top: 0; border-left: 1px solid #2E2C27; padding: 6px 0 6px 16px; } }

/* posting limits: 3 columns now that "First release" moved to the intro line */
.c-limits__intro { text-align: center; font: 500 15px/1.5 var(--font-ui); color: var(--fc-ink-1); margin-bottom: 16px; }
.c-limits--3 { margin-top: 0; }
@media (min-width: 900px) { .c-limits--3 .c-limits__row { grid-template-columns: 1.1fr 2.2fr .9fr; } }

/* footer column titles are no longer headings */
.c-footer-col__h { font: 500 12px var(--font-ui); color: var(--fc-ink-3); letter-spacing: .18em; text-transform: uppercase; margin: 0 0 12px; }

/* ==========================================================================
   v5 (2026-10-31): pricing, waitlist consent + success state, confirmed banner, dark mode.
   Refined: 1px hairlines, small radii, no shadows doing the work.
   ========================================================================== */

/* ---------- waitlist form: long label wraps, button sits under the field ---------- */
.c-form { max-width: 520px; }
.c-form__row { flex-direction: column; }
.c-form .c-btn { width: 100%; white-space: normal; text-align: center; line-height: 1.3; }
.c-form .c-btn svg { margin-left: 2px; }
.c-form__privacy { font-size: 12.5px; line-height: 1.6; max-width: 52ch; }
.c-form.is-done .c-form__msg {
  margin-top: 14px; padding: 16px 18px; border: 1px solid var(--fc-line-strong); border-left: 3px solid var(--fc-orange);
  border-radius: 4px; background: var(--fc-bg-elev); font: 500 16px/1.55 var(--font-ui); color: var(--fc-ink-1);
}
.c-form.is-done .c-form__msg::before { display: none; }
.c-form.is-done .c-form__msg strong { display: block; font: 500 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 8px; }
.c-section--ink .c-form.is-done .c-form__msg { background: #201E1A; border-color: #3A3731; color: var(--bone-50); }
.c-section--ink .c-form.is-done .c-form__msg strong { color: var(--fc-orange); }

/* ---------- confirmed banner (double opt-in landing: /?confirmed=1) ---------- */
.c-banner { position: relative; z-index: 70; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 12px var(--gutter); background: var(--ink-300); color: var(--bone-50); border-bottom: 2px solid var(--fc-orange); font: 400 15px/1.5 var(--font-ui); text-align: center; }
.c-banner[hidden] { display: none; }
.c-banner p { margin: 0; }
.c-banner strong { color: var(--fc-orange); font-weight: 600; }
.c-banner__x { font: 500 12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--bone-50); background: transparent; border: 1px solid #5A564D; border-radius: 4px; padding: 6px 10px; min-height: 32px; cursor: pointer; }
.c-banner__x:hover { border-color: var(--bone-50); }
.c-banner :focus-visible { outline-color: var(--bone-50); }

/* ---------- pricing ---------- */
.p-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 1120px; margin: 0 auto; text-align: left; }
.p-grid--2 { margin-top: 16px; }
@media (min-width: 900px) {
  .p-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.p-card { position: relative; display: flex; flex-direction: column; background: var(--fc-bg-elev); border: 1px solid var(--fc-line-strong); border-radius: 6px; padding: 24px 22px 22px; }
.p-card--accent { border-color: var(--fc-orange); }
.p-card--accent::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--fc-orange); border-radius: 6px 6px 0 0; }
.p-card__tier { font: 500 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 18px; }
.p-card__price { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.p-card__amt { font: 600 44px/1 var(--font-ui); letter-spacing: -.03em; color: var(--fc-ink-1); }
.p-card__per { font: 500 14px var(--font-mono); color: var(--fc-ink-3); }
.p-card__alt { margin: 8px 0 0; font: 400 14px/1.5 var(--font-ui); color: var(--fc-ink-2); }
.p-card__list { list-style: none; padding: 0; margin: 20px 0 0; }
.p-card__list li { position: relative; padding: 10px 0 10px 22px; border-top: 1px solid var(--fc-line); font: 400 15px/1.5 var(--font-ui); color: var(--fc-ink-1); }
.p-card__list li::before { content: "+"; position: absolute; left: 2px; top: 10px; font: 600 14px/1.5 var(--font-mono); color: var(--accent-text); }
.p-found { margin: 18px 0 0; padding: 16px 16px 6px; border: 1px dashed var(--kinetic-200); border-radius: 4px; background: rgba(var(--fc-orange-rgb), .06); }
.p-found__tag { margin: 0 0 6px; font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.p-found__price { margin: 0 0 6px; font: 400 15px/1.4 var(--font-ui); color: var(--fc-ink-2); }
.p-found__price strong { font: 600 28px/1.1 var(--font-ui); letter-spacing: -.02em; color: var(--fc-ink-1); margin-right: 4px; }
.p-found ul { list-style: none; padding: 0; margin: 8px 0 0; }
.p-found li { padding: 7px 0; border-top: 1px solid rgba(var(--fc-orange-rgb), .25); font: 400 14px/1.5 var(--font-ui); color: var(--fc-ink-1); }
.p-card__cta { margin-top: auto; width: 100%; white-space: normal; text-align: center; line-height: 1.3; min-height: 48px; border-radius: 4px; }
.p-card__list, .p-found { margin-bottom: 22px; }
.p-card__list + .p-found { margin-top: 0; }
.p-card--small .p-card__note { margin-bottom: 22px; }
.p-card--small { padding-bottom: 20px; }
.p-card__big { margin: 0 0 8px; font: 600 26px/1.15 var(--font-ui); letter-spacing: -.02em; color: var(--fc-ink-1); }
.p-card__note { margin: 0 0 20px; font: 400 15px/1.55 var(--font-ui); color: var(--fc-ink-2); }
.p-card--small .p-card__cta { margin-top: auto; }

/* fine-detail refinements shared by v5 buttons */
.c-btn--lg { border-radius: 6px; }
.c-input { border-radius: 6px; }

/* ==========================================================================
   Dark mode (follows the visitor's system setting). Surfaces are dark grey, lines are 1px hairlines.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --fc-bg: #0F0E0C; --fc-bg-elev: #191816; --fc-bg-deep: #141311; --fc-bg-alt: #121110;
    --fc-ink-1: #F4F2EA; --fc-ink-2: #CBC7BA; --fc-ink-3: #A5A194; --fc-ink-4: #6E6B61;
    --fc-line: #27251F; --fc-line-strong: #3A3730;
    --accent-text: #FF8A57; --accent-text-lg: #FF7A1A;
    --fc-orange-tint: #2A1B13;
    --shadow-1: 0 0 0 rgba(0,0,0,0); --shadow-2: 0 0 0 rgba(0,0,0,0); --shadow-3: 0 0 0 rgba(0,0,0,0); --shadow-4: 0 0 0 rgba(0,0,0,0);
    color-scheme: dark;
  }
  ::selection { background: #5A2A12; color: #FFF3EC; }
  :focus-visible { outline-color: var(--bone-50); }

  /* wordmarks: the ink parts of the SVG logos turn light */
  svg [fill="#161512"] { fill: var(--fc-ink-1); }
  svg [stroke="#161512"] { stroke: var(--fc-ink-1); }

  .c-nav { background: rgba(15,14,12,.86); }
  .c-hero { background: #0F0E0C; }
  .c-section--white { background: #141311; }
  .kl-gridlines { background: repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,.04) 39px, rgba(255,255,255,.04) 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,.04) 39px, rgba(255,255,255,.04) 40px), #141311; }
  .c-counter-rail { background: rgba(255,255,255,.02); }
  .c-cat { background: rgba(255,255,255,.04); box-shadow: none; }
  .c-hero__bg .c-globe-stage { opacity: .6; }

  /* cards and panels */
  .c-problem, .c-feat, .c-limits, .c-with__card, .c-fit__col--yes, .c-pane--now, .c-loop__n, .kl-rpanel,
  .q-acct__open, .q-pill, .q-actions span, .c-input, .c-btn--ghost { background: var(--fc-bg-elev); }
  .c-fit__col { background: var(--fc-bg); }
  .kl-rpanel { box-shadow: none; }
  .kl-rpanel__head, .q-acct__head, .c-limits__head { background: var(--fc-bg-deep); }
  .q-actions .is-off { background: var(--fc-bg-deep); color: var(--fc-ink-3); }
  .q-actions .is-main { background: var(--fc-orange); color: var(--ink-300); }
  .q-pill--gap { background: rgba(var(--fc-orange-rgb), .12); border-color: rgba(var(--fc-orange-rgb), .4); color: #FFB08A; }
  .q-item__text mark { background: rgba(var(--fc-orange-rgb), .2); color: #FFB08A; }
  .c-feat__body code, .c-code-inline, .c-pane code { background: var(--fc-bg-deep); }
  .c-feat:hover { transform: none; }
  .c-feat:hover .c-feat__icon { color: var(--ink-300); }
  .c-loop__n { color: var(--fc-ink-1); }
  .c-loop__step:first-child .c-loop__n { background: var(--fc-orange); color: var(--ink-300); }
  .c-pane--next { background: rgba(255,255,255,.03); }
  .c-pane--soon { background: rgba(var(--fc-orange-rgb), .08); }
  .c-lane--planned { background: rgba(255,255,255,.03); border-color: #4A473F; }
  .c-lane--coming { box-shadow: none; }
  .c-fit__col--no { border-top-color: #6E6B61; }

  /* labels */
  .t-tag--built { background: var(--bone-50); color: var(--ink-300); }
  .t-tag--planned { color: var(--fc-ink-2); border-color: #6E6B61; }
  .c-tag--hand { background: var(--bone-100); color: var(--ink-300); }
  .c-tag--coming { background: transparent; }
  .c-tag--first { background: rgba(var(--fc-orange-rgb), .12); border-color: rgba(var(--fc-orange-rgb), .35); }

  /* dark blocks sitting on a dark page need a hairline to read as surfaces */
  .c-codepanel, .c-rules, .c-lane--rules { border: 1px solid #2E2C27; box-shadow: none; }
  .c-section--ink { border-top: 1px solid var(--fc-line); }

  /* form */
  .c-input { border-color: var(--fc-line-strong); color: var(--fc-ink-1); box-shadow: none; }
  .c-input::placeholder { color: #8F8B7E; }
  .c-input:focus-visible { border-color: var(--bone-50); }
  .c-input[aria-invalid="true"] { border-color: #FF9A8A; }
  .c-form__msg.is-error { color: #FF9A8A; }
  .c-form__label { color: var(--fc-ink-2); }

  /* pricing */
  .p-card { background: var(--fc-bg-elev); }
  .p-found { border-color: rgba(var(--fc-orange-rgb), .45); background: rgba(var(--fc-orange-rgb), .08); }
}