:root{
  --kw-paper:#F1F0EC; --kw-warm:#FDF1E7; --kw-orange:#C8560A; --kw-orange-dark-ground:#E8752F; --kw-orange-text:#A34608;
  --kw-muted:#6B7076; --kw-ink:#22262A; --kw-line:#D8D6D0; --kw-white:#FFFFFF; --kw-success:#1E7F4F; --kw-alert:#B02E2E;
  --kw-font:'Archivo',system-ui,sans-serif; --kw-font-logo-serif:'Newsreader',Georgia,serif;
  --kw-radius:0;
}
/* v1.4 canonical — K ink / AI orange / Works ink. Tag .146em = 0.20× Archivo cap height (0.73em); gap .131em = 0.18× cap.
   Wordmark as live text (preferred in-app; fonts must be loaded) */
.kw-wordmark{display:inline-flex;align-items:baseline;gap:.131em;white-space:nowrap;font:800 1em/1 var(--kw-font);letter-spacing:-.035em;color:var(--kw-ink)}
.kw-wordmark .ai{color:var(--kw-orange)}
.kw-wordmark .works{font:italic 500 .8em/1 var(--kw-font-logo-serif);margin-left:.015em;letter-spacing:-.01em;color:currentColor}
.kw-wordmark .tag{width:.146em;height:.146em;background:var(--kw-orange);clip-path:polygon(0 0,100% 0,100% 62%,62% 100%,0 100%);flex:none}
.kw-wordmark.reverse{color:var(--kw-paper)} .kw-wordmark.reverse .ai{color:var(--kw-orange-dark-ground)} .kw-wordmark.reverse .tag{background:var(--kw-orange-dark-ground)}
.kw-wordmark.mono .ai{color:currentColor} .kw-wordmark.mono .tag{background:currentColor}
/* ── v1.5: dark-ground primitives + semantic layer (BRAND.md §4). Paper values on :root; add .kw-ink to a section for Ink values. ── */
:root{
  --kw-muted-dark-ground:#B9BCC0; --kw-line-dark-ground:#4A4F55;
  --kw-bg-page:var(--kw-paper); --kw-bg-surface:var(--kw-white); --kw-bg-callout:var(--kw-warm);
  --kw-text-primary:var(--kw-ink); --kw-text-secondary:var(--kw-muted); --kw-text-accent:var(--kw-orange-text); --kw-text-accent-large:var(--kw-orange); --kw-text-on-accent:var(--kw-paper); --kw-text-inverse:var(--kw-paper);
  --kw-accent-fill:var(--kw-orange); --kw-accent-fill-hover:var(--kw-orange-text);
  --kw-border-rule:var(--kw-ink); --kw-border-hairline:var(--kw-line); --kw-border-hot:var(--kw-orange);
  --kw-status-success:var(--kw-success); --kw-status-alert:var(--kw-alert);
  --kw-wordmark-letters:var(--kw-ink); --kw-wordmark-accent:var(--kw-orange);
}
.kw-ink{
  --kw-bg-page:var(--kw-ink); --kw-bg-surface:var(--kw-ink); --kw-bg-callout:var(--kw-warm);
  --kw-text-primary:var(--kw-paper); --kw-text-secondary:var(--kw-muted-dark-ground); --kw-text-accent:var(--kw-orange-dark-ground); --kw-text-accent-large:var(--kw-orange-dark-ground); --kw-text-on-accent:var(--kw-paper); --kw-text-inverse:var(--kw-ink);
  --kw-accent-fill:var(--kw-orange-dark-ground); --kw-accent-fill-hover:var(--kw-orange); /* hover on Ink is undesigned (BRAND.md §13 item 7) */
  --kw-border-rule:var(--kw-paper); --kw-border-hairline:var(--kw-line-dark-ground); --kw-border-hot:var(--kw-orange-dark-ground);
  --kw-wordmark-letters:var(--kw-paper); --kw-wordmark-accent:var(--kw-orange-dark-ground);
  background:var(--kw-bg-page); color:var(--kw-text-primary);
}
/* Markup: <span class="kw-wordmark">K<span class="ai">AI</span><span class="works">Works</span><i class="tag"></i></span> */
/* Status tag (empty) */
.kw-tag{display:inline-block;width:11px;height:11px;clip-path:polygon(0 0,100% 0,100% 62%,62% 100%,0 100%);background:var(--kw-orange)}
.kw-tag.idle{background:var(--kw-ink)} .kw-tag.paused{background:var(--kw-muted)}
/* Working indicator: ink dot steps left→right, 400ms hard cuts */
@keyframes kw-step{0%,33%{background:var(--kw-ink)}34%,100%{background:var(--kw-paper)}}
.kw-working{position:relative;display:inline-grid;place-items:center;width:32px;height:32px;background:var(--kw-orange);clip-path:polygon(0 0,100% 0,100% 62%,62% 100%,0 100%)}
.kw-working i{position:absolute;width:4px;height:4px;top:12px;background:var(--kw-paper);animation:kw-step 1.2s steps(1) infinite}
.kw-working i:nth-child(1){left:6px;animation-delay:0s}.kw-working i:nth-child(2){left:13px;animation-delay:.4s}.kw-working i:nth-child(3){left:20px;animation-delay:.8s}

/* ── Landing page extensions (v1.1) — redlines for kaiworks.ai. Extends v1.0; nothing above changes. ── */
:root{
  /* spacing scale (4px base) */
  --kw-s-1:4px; --kw-s-2:8px; --kw-s-3:12px; --kw-s-4:16px; --kw-s-5:20px; --kw-s-6:24px; --kw-s-7:28px; --kw-s-8:32px; --kw-s-9:36px; --kw-s-10:40px; --kw-s-12:48px; --kw-s-14:56px; --kw-s-16:64px; --kw-s-18:72px; --kw-s-20:80px; --kw-s-24:96px; --kw-s-28:112px;
  /* page frame */
  --kw-page-max:1200px; --kw-gutter:20px; --kw-rule:2px solid var(--kw-ink); --kw-hairline:1px solid var(--kw-line); --kw-hot-border:1.5px solid var(--kw-orange); --kw-quote-rule:4px solid var(--kw-orange);
  /* section paddings — mobile (390) */
  --kw-sec-y:48px; --kw-sec-y-tight:40px; --kw-hero-y:40px 48px; --kw-cta-y:48px 32px;
  /* type — mobile */
  --kw-display:40px; --kw-h1:34px; --kw-h2:30px; --kw-h3:24px; --kw-h3-sm:22px; --kw-lead:19px; --kw-body:16px; --kw-body-sm:15px; --kw-small:14px; --kw-label:12px; --kw-num:44px; --kw-num-sm:40px; --kw-tagline:18px; --kw-cta:16px; --kw-body-lg:17px; --kw-pull:26px; --kw-mast-wordmark:34px; --kw-mast-mail:14px;
  --kw-lh-display:1.02; --kw-lh-head:1.1; --kw-lh-body:1.6; --kw-lh-lead:1.5; --kw-ls-display:-.035em; --kw-ls-head:-.03em; --kw-ls-label:.14em;
  /* chips, buttons */
  --kw-chip-pad:7px 12px; --kw-chip-size:13px; --kw-btn-pad:16px 20px; --kw-btn-minh:52px;
}
/* Type steps at 768 (the site's phone breakpoint): tablet takes the desktop type sizes (BRAND.md §5). Gutters and section padding step again at 1200. */
@media (min-width:768px){:root{
  --kw-gutter:40px; --kw-sec-y:64px;
  --kw-display:60px; --kw-h1:44px; --kw-h2:36px; --kw-h3:28px; --kw-h3-sm:24px; --kw-lead:24px; --kw-body:16px; --kw-body-sm:16px; --kw-small:14px; --kw-num:48px; --kw-num-sm:48px; --kw-tagline:22px; --kw-cta:16px; --kw-body-lg:18px; --kw-pull:32px; --kw-mast-wordmark:52px; --kw-mast-mail:16px;
  --kw-lh-lead:1.45; --kw-btn-pad:16px 22px;
}}
@media (min-width:1200px){:root{
  --kw-gutter:64px;
  --kw-sec-y:72px; --kw-sec-y-tight:56px; --kw-hero-y:72px 80px; --kw-cta-y:80px 64px;
  --kw-chip-pad:7px 14px; --kw-chip-size:14px;
}}
/* Section grammar: 2px ink rule between major sections; hairline within. S2 is the one ink section (bg ink, text paper, label/pull orange-dark-ground).
   Grid: S2/S5/S8 label column 200px + 48px gap at ≥1200; single column below. S3 cards: hairline frame, 2px ink rule under the numeral. S4 offense + S6 quote: warm tint; S4 hot border 1.5px orange, S6 4px orange left rule.
   Numbers: tabular-nums on every price. Orange budget per viewport: AI letters + tagline + one primary button. */
.kw-step-card{padding:var(--kw-s-7) var(--kw-s-7) var(--kw-s-8);display:flex;flex-direction:column;gap:14px;border-right:var(--kw-hairline)}
.kw-step-card .num{font:800 28px/1 var(--kw-font);letter-spacing:-.03em;font-variant-numeric:tabular-nums;padding-bottom:14px;border-bottom:var(--kw-rule)}
.kw-spec-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--kw-s-6);padding:22px 0;border-bottom:var(--kw-hairline);align-items:baseline}
.kw-spec-row .label{font:800 var(--kw-label)/1.2 var(--kw-font);letter-spacing:var(--kw-ls-label);text-transform:uppercase;color:var(--kw-muted)}
.kw-spec-row p{margin:0;font:600 19px/1.5 var(--kw-font)}