/* kautuka.css — kautuka.dev landing. Tokens only (tokens-kautuka.css).
   Load: base.css → tokens-kautuka.css → kautuka.css → navigation.css */

/* ---------- Brand lockup ---------- */
.kautuka .brand { font-size:1.375rem; }
.kautuka .brand { --brand-mark-size:30px; }

/* ---------- Hero ---------- */
.k-hero { padding-block:clamp(3rem, 1.6rem + 5.6vw, 6.5rem) var(--space-2xl); }
.k-brandline { font:600 var(--step--1)/1.4 var(--font-sans); letter-spacing:.06em; color:var(--color-muted); }
.k-hero h1 { margin-top:var(--space-m); font-size:clamp(3rem, 1.6rem + 5.7vw, 6.5rem); line-height:.98; letter-spacing:-.035em; max-width:11ch; }
.k-hero h1 del { color:var(--color-muted); font-weight:600; text-decoration-color:var(--color-muted); text-decoration-thickness:.07em; }
/* the single gradient on the page: every stop ≥ 4.3:1 on paper (measured) */
.k-hero h1 em { background:var(--thread-text-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
@media (forced-colors:active) { .k-hero h1 em { background:none; color:CanvasText; } }
.k-hero-kicker { margin-top:var(--space-m); font:700 var(--step-3)/1.2 var(--font-sans); letter-spacing:-.015em; color:var(--color-heading); }
.k-hero-deck { margin-top:var(--space-s); max-width:36rem; font-size:var(--step-1); color:var(--color-muted); }
.k-hero-grid { display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:var(--gap); align-items:end; }
.k-hero-aside { padding-bottom:var(--space-2xs); }
@media (max-width:960px) { .k-hero-grid { grid-template-columns:1fr; } }

/* ---------- OS-aware download block ---------- */
.download { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-s); max-width:34rem; min-width:0; }
.download-option { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-xs); min-width:0; }
.download-option > * { min-width:0; }
.download-note { font-size:var(--step--1); color:var(--color-muted); }
.download-label { font:600 var(--step-0)/1.3 var(--font-sans); color:var(--color-heading); }
.download-switch { justify-self:start; min-height:var(--tap); padding:0; border:0; background:none; color:var(--color-link); font:600 var(--step-0)/1.3 var(--font-sans); text-decoration:underline; text-decoration-color:var(--color-accent-line); text-underline-offset:.3em; cursor:pointer; }
.download-switch:hover { color:var(--color-link-hover); text-decoration-thickness:2px; }
/* No JS: both options visible; Linux reads as the secondary option. */
.download:not([data-os]) .download-linux { padding-top:var(--space-s); border-top:var(--border-hair) solid var(--color-line); }
/* JS: show only the active OS; the switch toggles. */
.download[data-os="windows"] .download-linux, .download[data-os="linux"] .download-windows { display:none; }
.k-proof-chips { display:flex; flex-wrap:wrap; gap:var(--space-2xs); margin-top:var(--space-m); padding:0; list-style:none; }
.k-proof-chips li { padding:.375rem .75rem; border:var(--border-hair) solid var(--color-line); border-radius:var(--radius-pill); background:var(--color-card); font-size:var(--step--1); color:var(--color-text); }
.k-source-line { margin-top:var(--space-s); font-size:var(--step--1); color:var(--color-muted); }

/* hero product image: real screenshot, sits across the hero/next band */
.k-hero-visual { margin-top:var(--space-2xl); }
.k-hero-visual .frame img { border-radius:var(--radius-l); }

/* ---------- Story: the full-bleed ink band + Monday→Tuesday timeline ---------- */
.k-story { padding-block:var(--section); }
.k-story-grid { display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:var(--gap); }
.k-story-head { position:sticky; top:6rem; align-self:start; }
.k-story-head h2 { font-size:var(--step-5); }
.k-story-head p { margin-top:var(--space-s); color:var(--color-muted); font-size:var(--step-1); }
.k-story-list { position:relative; display:grid; gap:var(--space-xl); margin:0; padding:0 0 0 var(--space-xl); list-style:none; }
/* the thread: runs the whole timeline, unbroken across the restart */
.k-story-list::before { content:""; position:absolute; left:.6875rem; top:.5rem; bottom:.5rem; width:3px; border-radius:3px; background:var(--thread-vermilion); }
.k-story-list > li { position:relative; font-size:var(--step-1); line-height:1.55; color:var(--color-text); }
.k-story-list > li::before { content:""; position:absolute; left:calc(-1 * var(--space-xl) + .3125rem); top:.45em; width:15px; height:15px; border-radius:50%; background:var(--color-ink-bg); border:3px solid var(--thread-saffron); }
.k-story-list > li strong { display:block; margin-bottom:var(--space-3xs); font:600 var(--step--1)/1.3 var(--font-sans); letter-spacing:.04em; color:var(--color-ink-link); }
.k-story-list > li.k-story-night { padding-block:var(--space-s); color:var(--color-muted); }
.k-story-list > li.k-story-night::before { background:var(--color-ink-muted); border-color:var(--color-ink-muted); }
.k-story-list .illustration { margin-top:var(--space-m); max-width:34rem; }
.k-story-list .illustration.k-ill-narrow { max-width:22rem; }
.k-story-list .illustration img { box-shadow:var(--shadow-on-ink); }
.k-story-close { margin-top:var(--space-2xl); padding-top:var(--space-m); border-top:var(--border-hair) solid var(--color-line); font:600 var(--step-2)/1.35 var(--font-sans); color:var(--color-heading); max-width:40rem; }
@media (max-width:960px) { .k-story-grid { grid-template-columns:1fr; } .k-story-head { position:static; } }
@media (max-width:520px) { .k-story-list { padding-left:var(--space-l); } .k-story-list::before { left:.4375rem; } .k-story-list > li::before { left:calc(-1 * var(--space-l) + .0625rem); } }

/* ---------- Promises (merged with #proof) ---------- */
.k-promises .section-head h2 { font-size:var(--step-5); }

/* ---------- How it works: architecture diagram ---------- */
.k-how { border-top:var(--border-hair) solid var(--color-line); }
.k-diagram { margin:0; padding:var(--space-m); border:var(--border-hair) solid var(--color-line); border-radius:var(--radius-l); background:var(--color-card); box-shadow:var(--shadow-card); }
.k-arch { color:var(--color-text); font-size:var(--step--1); line-height:1.45; }
.k-arch-layout { display:grid; grid-template-columns:minmax(0, 3.4fr) minmax(11rem, 1fr); gap:var(--space-m); align-items:center; }
.k-arch-computer { min-width:0; padding:var(--space-s); border:var(--border-hair) solid var(--color-line-ui); border-radius:var(--radius-m); }
.k-arch-frame-title { font-weight:700; color:var(--color-heading); }
.k-arch-computer > .k-arch-frame-title { margin-bottom:var(--space-2xs); }
.k-arch-computer-grid { display:grid; grid-template-columns:minmax(10rem, .8fr) minmax(0, 2.2fr); gap:var(--space-s); align-items:center; }
.k-arch-box { position:relative; min-width:0; padding:var(--space-s); border:var(--border-hair) solid var(--color-line-ui); border-radius:var(--radius-m); background:var(--color-card); }
.k-arch h3, .k-arch h4 { font-size:var(--step-0); line-height:1.25; }
.k-arch code { font-size:var(--step--1); }
.k-arch-box h3, .k-arch-box h4 { margin-bottom:var(--space-3xs); }
.k-arch-box p + p { margin-top:var(--space-3xs); }
.k-arch-box p, .k-arch-box li, .k-arch-linux-note, .k-arch-subtitle, .k-arch-service-note { color:var(--color-muted); }
.k-arch-box ul, .k-arch-windows ul { margin:var(--space-3xs) 0 0; padding-left:.85em; }
.k-arch-windows { position:relative; min-width:0; padding:var(--space-m); border:1px dashed var(--color-line-ui); border-radius:var(--radius-m); background:var(--color-surface); }
.k-arch-tag { display:inline-block; margin-bottom:var(--space-2xs); padding:.1em .55em; border:1px dashed var(--color-line-ui); border-radius:var(--radius-s); color:var(--color-heading); font-size:var(--step--1); font-weight:600; }
.k-arch-windows > .k-arch-frame-title { margin-bottom:var(--space-2xs); }
.k-arch-appliance { margin-top:var(--space-s); padding:var(--space-s); border:var(--border-hair) solid var(--color-line-ui); border-radius:var(--radius-l); background:var(--color-card); }
.k-arch-appliance > .k-arch-frame-title { font-size:var(--step-1); }
.k-arch-subtitle, .k-arch-service-note { margin-top:var(--space-3xs); }
.k-arch-system { display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, .9fr); grid-template-areas:"gateway credentials" "approval history" "podman podman"; gap:var(--space-s); margin-top:var(--space-s); align-items:start; }
.k-arch-gateway { grid-area:gateway; border-color:var(--color-heading); }
.k-arch-agent { margin-top:var(--space-s); background:var(--color-surface); }
.k-arch-approval { grid-area:approval; border-color:var(--color-action); }
.k-arch-approval-arrow { position:absolute; right:var(--space-s); bottom:calc(-1 * var(--space-s) - .45em); z-index:1; color:var(--color-action); font-size:var(--step-1); font-weight:700; }
.k-arch-approval-arrow::before { content:"↓"; }
.k-arch-podman { grid-area:podman; min-width:0; padding:var(--space-s); border:var(--border-hair) solid var(--color-line-ui); border-radius:var(--radius-m); background:var(--color-surface); }
.k-arch-podman > h3 { margin-bottom:var(--space-s); }
.k-arch-podman-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-s); }
.k-arch-sandbox .k-arch-tag { margin-bottom:var(--space-2xs); }
.k-arch-connector { padding-right:0; }
.k-arch-connector h4 { padding-right:2rem; }
.k-arch-count { position:absolute; right:var(--space-s); top:var(--space-s); font:400 var(--step--1)/1 var(--font-mono); }
.k-arch-credentials { grid-area:credentials; }
.k-arch-history { grid-area:history; }
.k-arch-browser-arrow { position:absolute; top:calc(50% - .7em); right:calc(-1 * var(--space-s)); color:var(--color-muted); font-size:var(--step-1); }
.k-arch-browser-arrow::before { content:"→"; }
.k-arch-remote { border-style:dashed; }
.k-arch-remote-arrow { position:absolute; right:calc(100% + var(--space-2xs)); top:calc(50% - .7em); white-space:nowrap; color:var(--color-muted); }
.k-arch-remote-arrow::before { content:"→"; }
.k-arch-linux-note { margin-top:var(--space-s); }
.k-arch-text { margin-top:var(--space-m); }
.k-arch-text summary { width:fit-content; min-height:var(--tap); display:flex; align-items:center; cursor:pointer; font-weight:600; color:var(--color-link); text-decoration:underline; text-underline-offset:.2em; }
.k-arch-text ol { margin:var(--space-2xs) 0 0; padding-left:1.5em; }
.k-arch-text li + li { margin-top:var(--space-2xs); }
.k-diagram figcaption { margin-top:var(--space-s); color:var(--color-muted); font-size:var(--step--1); }
@media (max-width:1040px) {
  .k-arch-layout { grid-template-columns:minmax(0, 1fr); }
  .k-arch-computer-grid { grid-template-columns:minmax(0, 1fr); }
  .k-arch-browser { margin-bottom:var(--space-s); }
  .k-arch-browser-arrow { top:auto; right:calc(50% - .4em); bottom:calc(-1 * var(--space-s) - .7em); }
  .k-arch-browser-arrow::before { content:"↓"; }
  .k-arch-remote-arrow { position:static; display:block; margin-bottom:var(--space-2xs); }
  .k-arch-remote-arrow::before { content:"HTTPS ↓"; }
}
@media (max-width:760px) {
  .k-arch-system { grid-template-columns:minmax(0, 1fr); grid-template-areas:"gateway" "approval" "podman" "credentials" "history"; }
  .k-arch-podman-grid { grid-template-columns:minmax(0, 1fr); }
  .k-arch-approval-arrow { right:var(--space-s); bottom:calc(-1 * var(--space-s) - .45em); }
  .k-diagram { padding:var(--space-s); }
  .k-arch-computer, .k-arch-windows, .k-arch-appliance, .k-arch-podman { padding:var(--space-2xs); }
  .k-arch-box { padding:var(--space-xs); }
  .k-arch-count { right:var(--space-xs); top:var(--space-xs); }
}
.k-boundary-grid article h3 { font-size:var(--step-2); }
.k-inline-link { display:inline-flex; align-items:center; min-height:var(--tap); margin-top:var(--space-2xs); color:var(--color-link); font-weight:600; text-decoration:underline; text-decoration-color:var(--color-accent-line); text-underline-offset:.3em; }
.kautuka .k-appliance-points p > .k-inline-link { display:inline; margin-top:0; }

/* ---------- Appliance (copy + real screenshot) ---------- */
.k-row { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:var(--gap); align-items:start; }
.k-row h2 { font-size:var(--step-5); }
.k-row .lede { margin-top:var(--space-s); }
.k-appliance-points { display:grid; gap:var(--space-m); margin-top:var(--space-xl); padding:0; list-style:none; }
.k-appliance-points li { padding-top:var(--space-s); border-top:var(--border-hair) solid var(--color-line); }
.k-appliance-points h3 { font-size:var(--step-1); }
.k-appliance-points p { margin-top:var(--space-3xs); color:var(--color-muted); }
@media (max-width:960px) { .k-row { grid-template-columns:1fr; } }

/* ---------- Work ---------- */
.k-work-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap); }
.k-work-grid h3 { font-size:var(--step-2); }
.k-work-grid p { margin-top:var(--space-2xs); color:var(--color-muted); }
.k-more-connectors { margin-top:var(--space-xl); padding-top:var(--space-m); border-top:var(--border-hair) solid var(--color-line); }
.k-more-connectors h3 { font-size:var(--step-1); }
.k-more-connectors p { margin-top:var(--space-3xs); color:var(--color-muted); }
@media (max-width:860px) { .k-work-grid { grid-template-columns:1fr; } }

/* ---------- Workflows (real product screenshots, sample data) ---------- */
/* Workflows reuses the story timeline (.k-story-grid, .k-story-head, .k-story-list): sticky heading, steps down the thread. */
.k-workflows-steps .frame { margin-top:var(--space-m); }
.k-workflows-steps .frame img { display:block; height:auto; box-shadow:var(--shadow-on-ink); }
.k-workflows-canvas { max-width:36rem; }
.k-workflows-check { max-width:46rem; }
.k-workflows-wide { max-width:60rem; }
/* The path and run shots are wide: a narrower heading column keeps their text at 0.6x or more. Below 1100 px the steps stack under the heading, as the story does below 960 px. */
.k-workflows .k-story-grid { grid-template-columns:minmax(0,3fr) minmax(0,9fr); }
@media (max-width:1100px) { .k-workflows .k-story-grid { grid-template-columns:1fr; } .k-workflows .k-story-head { position:static; } }
/* Stacked (1100 px and below): keep screenshots aligned with the step text, clear of the timeline thread. */
.k-workflows-review { max-width:30rem; }
.k-workflows-close { margin-top:var(--space-2xl); padding-top:var(--space-m); border-top:var(--border-hair) solid var(--color-line); color:var(--color-muted); }
.k-workflows-close > .k-inline-link { display:inline; margin-top:0; }

/* ---------- Little things (6, quiet list, no cards) ---------- */
.k-little-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 var(--gap); margin-top:var(--space-l); }
.k-little-grid article { padding-block:var(--space-m); border-top:var(--border-hair) solid var(--color-line); }
.k-little-grid h3 { font-size:var(--step-1); }
.k-little-grid p { margin-top:var(--space-3xs); color:var(--color-muted); }
@media (max-width:860px) { .k-little-grid { grid-template-columns:1fr; } }

/* ---------- Compare ---------- */
.k-compare-card { margin-top:var(--space-l); }
.k-compare-scroll { overflow-x:auto; border:var(--border-hair) solid var(--color-line); border-radius:var(--radius-m); background:var(--color-card); }
.k-compare-scroll:focus-visible { outline:var(--focus-width) solid var(--color-focus); outline-offset:var(--focus-offset); }
.k-compare-table td:last-child, .k-compare-table th:last-child { background:var(--color-surface); color:var(--color-heading); font-weight:600; box-shadow:inset 3px 0 0 var(--thread-vermilion); }
.k-compare-note { margin-top:var(--space-s); font-size:var(--step--1); color:var(--color-muted); }

/* ---------- Answers / open ---------- */
.k-answers .faq { margin-top:var(--space-l); max-width:var(--measure-wide); }
.k-open p { max-width:var(--measure); margin-top:var(--space-s); font-size:var(--step-1); line-height:1.55; }
.k-name-line { font-size:var(--step-1); color:var(--color-heading); }

/* ---------- Release / closing ---------- */
.k-close { text-align:left; }
.k-close h2 { font-size:var(--step-6); line-height:1; letter-spacing:-.035em; max-width:14ch; }
.k-close h2 em { color:var(--color-link); }
.k-close-grid { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--gap); align-items:start; margin-top:var(--space-xl); }
.k-close .k-release-line { color:var(--color-muted); font-size:var(--step-0); }
.k-close .k-release-line + .k-release-line { margin-top:var(--space-2xs); }
@media (max-width:960px) { .k-close-grid { grid-template-columns:1fr; } }