/* kosa8.com landing page — built in the anz33.com house style.
 *
 * That style is light, editorial and quiet: a lot of white space, one warm
 * accent, prose held to a readable measure, and the only dark thing on the page
 * being a terminal block. It reads like a document rather than a brochure,
 * which suits a product whose whole pitch is "here is what it actually does".
 *
 * Deliberately a separate stylesheet from kosa8.css. The other eleven pages are
 * dark and use that file; restyling them all is a bigger change than rebuilding
 * one page, and half-migrating a site is worse than either. Nothing here leaks
 * into them.
 *
 * No @font-face and no external requests: the site's CSP is
 * `default-src 'none'; style-src 'self'` and a page about keeping work on your
 * own machine should not fetch fonts from someone else's.
 */

:root {
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 24px;
  --s6: 32px; --s7: 48px;  --s8: 64px;  --s9: 96px;

  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-full: 999px;

  /* Inter and JetBrains Mono where present, otherwise the system stack. Naming
     them without loading them costs nothing and looks right on machines that
     already have them. */
  --sans: "Inter var", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-h1: clamp(32px, 4.6vw, 46px);
  --fs-h2: clamp(24px, 3vw, 32px);
  --fs-body: 16.5px;
  --fs-sm: 14.5px;
  --fs-xs: 13px;
  --fs-mono: 13px;

  --measure: 68ch;
  --wrap: 1120px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Light is the default, as on anz33. The dark set is a real second theme
   rather than an inversion, because a page that is only ever light looks
   broken to someone whose whole desktop is dark. */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-elev: #fafafa;
  --surface: #ffffff;
  --surface-2: #f6f7f9;
  --line: rgba(10, 12, 20, .10);
  --line-strong: rgba(10, 12, 20, .18);
  --text: #14161c;
  --text-2: #545c6b;
  --text-3: #858c9a;
  --accent: #b45309;
  --accent-ink: #fff8ec;
  --ok: #0f766e;
  --warn: #b3261e;
  --term-bg: #0a0c11;
  --glow: radial-gradient(760px 320px at 12% -12%, rgba(180, 83, 9, .06), transparent 62%);
  --shadow: 0 1px 2px rgba(10, 12, 20, .05), 0 12px 40px rgba(10, 12, 20, .10);
  --shadow-sm: 0 1px 3px rgba(10, 12, 20, .06);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0d11;
  --bg-elev: #10141a;
  --surface: #12161c;
  --surface-2: #171c23;
  --line: rgba(220, 228, 238, .10);
  --line-strong: rgba(220, 228, 238, .18);
  --text: #e6ebf1;
  --text-2: #a3adba;
  --text-3: #7d8794;
  --accent: #eba14a;
  --accent-ink: #1a1206;
  --ok: #4db6a4;
  --warn: #e8825a;
  --term-bg: #06080b;
  --glow: radial-gradient(760px 320px at 12% -12%, rgba(235, 161, 74, .07), transparent 62%);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 48px rgba(0, 0, 0, .45);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg) var(--glow) no-repeat;
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s5); }

h1, h2, h3 { color: var(--text); }
h1 {
  font-size: var(--fs-h1);
  line-height: 1.1;
  letter-spacing: -.035em;
  font-weight: 600;
  margin: 0 0 var(--s4);
  max-width: 20ch;
  text-wrap: balance;
}
h1 em { font-style: normal; color: var(--accent); }
h2 {
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -.028em;
  font-weight: 600;
  margin: 0 0 var(--s3);
  max-width: 22ch;
  text-wrap: balance;
}
h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 var(--s2); }

p { margin: 0 0 var(--s4); color: var(--text-2); max-width: var(--measure); }
.lead { font-size: 18.5px; color: var(--text-2); line-height: 1.62; max-width: var(--measure); }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s3);
}

/* ---- nav ---- */
.nav {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; gap: var(--s5); padding: var(--s3) var(--s5); max-width: var(--wrap); margin: 0 auto; }
.brand { display: flex; align-items: center; gap: var(--s2); color: var(--text); font-weight: 650; letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand__mark {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-family: var(--mono); font-size: 14px; font-weight: 700;
}
.nav__links { margin-left: auto; display: flex; gap: var(--s5); font-size: var(--fs-sm); }
.nav__links a { color: var(--text-2); }
.nav__links a:hover { color: var(--text); text-decoration: none; }
.icon-btn {
  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-2);
}
.icon-btn:hover { color: var(--text); border-color: var(--line-strong); }
.icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="dark"] .icon.sun, :root:not([data-theme="dark"]) .icon.moon { display: none; }
@media (max-width: 860px) { .nav__links { display: none; } }

/* ---- sections ---- */
section { padding: var(--s9) 0; }
.section-line { border-top: 1px solid var(--line); }
.sec-head { max-width: 640px; margin-bottom: var(--s8); }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center h2, .sec-head.center .lead { margin-left: auto; margin-right: auto; }
.sec-head .lead { margin: 0; }
@media (max-width: 720px) { section { padding: var(--s8) 0; } .sec-head { margin-bottom: var(--s6); } }

/* ---- hero ---- */
.hero { padding: var(--s9) 0 var(--s8); }
.hero h1 {
  font-size: clamp(40px, 7.4vw, 88px);
  line-height: .98;
  letter-spacing: -.045em;
  max-width: 15ch;
  margin-bottom: var(--s5);
}
.hero .lead { font-size: 20.5px; max-width: 54ch; }
.hero .lead { margin-bottom: var(--s6); }
.hero__cta { display: flex; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s5); }
.hero__chips { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s6); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--sans); font-size: var(--fs-sm); font-weight: 550;
  padding: 11px 20px; border-radius: var(--r-full);
  border: 1px solid transparent; cursor: pointer;
  transition: transform .16s var(--ease), filter .16s var(--ease), border-color .16s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.btn--primary:hover { filter: brightness(1.06); }
.btn--ghost { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--text-3); }
.btn--sm { padding: 7px 13px; font-size: var(--fs-xs); }

.badge {
  font-size: var(--fs-xs); font-weight: 500; color: var(--ok);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
  border-radius: var(--r-full); padding: 3px 11px;
}
.chip {
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: 4px 12px;
}

/* ---- cards ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s4); align-items: start; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); }
.card h3 { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.card p { font-size: var(--fs-sm); margin: 0; max-width: none; }
.card p + p { margin-top: var(--s2); }
.card a.more { display: inline-block; margin-top: var(--s3); font-size: var(--fs-sm); }

/* ---- terminal: the one dark surface on a light page ---- */
.term {
  background: var(--term-bg); border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow);
}
.term__bar { display: flex; align-items: center; gap: 6px; padding: 9px 13px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.term__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.term__bar span { margin-left: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6f7a87; }
.term pre {
  margin: 0; padding: var(--s4) var(--s5) var(--s5);
  font-family: var(--mono); font-size: var(--fs-mono); line-height: 1.8;
  color: #d7dee4; overflow-x: auto;
  /* Wrap rather than clip. A registry reference plus a model name is longer
     than the box at any width worth designing for, and a command whose tail
     is cut off is a command nobody can copy — the horizontal scrollbar is
     there for the rare unbreakable token, not as the primary way to read. */
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.d { color: #6f7a87; }
.a { color: #eba14a; }
.c { color: #67c7d8; } .g { color: #6bd39a; } .r { color: #e8825a; }

/* ---- copyable command ---- */
.cmd {
  display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left;
  background: var(--term-bg); color: #d7dee4;
  border: 1px solid rgba(255, 255, 255, .09); border-radius: var(--r-sm);
  padding: 12px 12px 12px 16px; font-family: var(--mono); font-size: var(--fs-mono);
  cursor: pointer; transition: border-color .15s var(--ease);
}
.cmd:hover { border-color: var(--accent); }
.cmd .t { flex: 1; min-width: 0; overflow-x: auto; white-space: pre; line-height: 1.75; scrollbar-width: none; }
.cmd .t::-webkit-scrollbar { display: none; }
.cmd .ico {
  display: grid; place-items: center; min-width: 30px; height: 26px; flex-shrink: 0;
  border-radius: 6px; background: rgba(255, 255, 255, .07); color: #8d96a3;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .06em;
}
.cmd:hover .ico { color: var(--accent); }
.cmd[data-done] { border-color: var(--ok); }
.cmd[data-done] .ico { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }

/* ---- numbered steps ---- */
.steps { display: grid; gap: var(--s6); max-width: 760px; }
.step { display: grid; grid-template-columns: 34px 1fr; gap: var(--s4); align-items: start; }
.step > * { min-width: 0; }
.step__n {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: grid; place-items: center; font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-3);
}
.step h3 { margin-top: 4px; }
.step p { font-size: var(--fs-sm); margin-bottom: var(--s3); }

/* ---- split: prose beside a terminal ---- */
.split { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 940px) { .split { grid-template-columns: 1fr 1.1fr; gap: var(--s7); } .split.flip > *:first-child { order: 2; } }
.split > * { min-width: 0; }
.split h3 { font-size: 19px; }

/* ---- figure ---- */
figure { margin: 0; }
figure img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
figcaption { margin-top: var(--s3); font-size: var(--fs-xs); color: var(--text-3); font-family: var(--mono); }

/* ---- comparison table ---- */
.tbl { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
th, td { text-align: left; padding: 13px var(--s5); border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-weight: 600; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td.y { color: var(--ok); } td.n { color: var(--text-3); }
tbody tr.hi td:first-child { font-weight: 600; color: var(--text); }

/* ---- pricing ---- */
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); align-items: stretch; }
.price { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); display: flex; flex-direction: column; }
.price--feature { border-color: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 8%, transparent); }
.price .tier { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.price .amount { font-size: 36px; font-weight: 600; letter-spacing: -.035em; margin: var(--s2) 0 2px; }
.price .amount i { font-style: normal; font-size: var(--fs-sm); color: var(--text-3); font-weight: 400; letter-spacing: 0; }
.price .say { color: var(--text-2); font-size: var(--fs-sm); margin-bottom: var(--s4); min-height: 3em; }
.price ul { list-style: none; padding: 0; margin: 0 0 var(--s5); display: grid; gap: 9px; }
.price li { font-size: var(--fs-sm); color: var(--text-2); display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; }
.price li::before { content: "✓"; color: var(--ok); font-size: 12px; line-height: 1.7; }
.price .btn { margin-top: auto; }

/* ---- faq ---- */
.faq { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--line); padding: var(--s4) 0; }
.faq summary {
  cursor: pointer; font-weight: 600; font-size: 16.5px; list-style: none;
  display: flex; align-items: center; gap: var(--s4); letter-spacing: -.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-left: auto; font-family: var(--mono); font-weight: 400;
  color: var(--text-3); font-size: 19px; transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin-top: var(--s3); font-size: var(--fs-sm); }

/* ---- numbers ---- */
.nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s4); }
.num { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); }
.num b { display: block; font-size: 34px; font-weight: 600; letter-spacing: -.035em; line-height: 1; }
.num b i { font-style: normal; font-size: 15px; color: var(--text-3); font-weight: 400; }
.num span { display: block; margin-top: var(--s2); font-size: var(--fs-sm); color: var(--text-2); }

/* ---- download row ---- */
.dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s3); }
.dl a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 13px var(--s4); color: var(--text); font-family: var(--mono); font-size: var(--fs-xs);
}
.dl a:hover { border-color: var(--accent); text-decoration: none; }
.dl a i { font-style: normal; color: var(--text-3); font-size: 11.5px; white-space: nowrap; }
.dl a.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.dl a.primary i { color: color-mix(in srgb, var(--accent-ink) 70%, var(--accent)); }

/* ---- callout ---- */
.note {
  border-left: 3px solid var(--accent); background: var(--surface-2);
  border-radius: 0 var(--r) var(--r) 0; padding: var(--s4) var(--s5);
}
.note b { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s2); }
.note p:last-child { margin-bottom: 0; }
.note ul { margin: 0; padding-left: var(--s5); color: var(--text-2); font-size: var(--fs-sm); }
.note li { margin-bottom: 6px; }

/* ---- closer ---- */
.closer { text-align: center; }
.closer h2 { margin: 0 auto var(--s3); }
.closer .lead { margin: 0 auto var(--s6); }
.closer .hero__cta { justify-content: center; }

/* ---- footer ---- */
footer { border-top: 1px solid var(--line); padding: var(--s8) 0 var(--s7); background: var(--bg-elev); }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s6); margin-bottom: var(--s7); }
.fgrid h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 0 0 var(--s3); font-weight: 600; }
.fgrid a { display: block; padding: 3px 0; color: var(--text-2); font-size: var(--fs-sm); }
.fgrid a:hover { color: var(--text); text-decoration: none; }
.fine { font-size: var(--fs-xs); color: var(--text-3); max-width: 70ch; margin: 0; }

/* Anything in a grid or flex row may shrink; without this a long unwrapped
   command stretches its parent and the whole page scrolls sideways. */
.cards > *, .split > *, .prices > *, .nums > *, .dl > *, .steps > * { min-width: 0; }
.cmd, .term { max-width: 100%; }

/* Small layout helpers, so the markup carries no inline styles — the CSP
   forbids them and an inline style is invisible to a reviewer scanning CSS. */
.pad-top { margin-top: var(--s6); }
.after-tbl { margin-top: var(--s4); }
.closer .dl { text-align: left; }


/* ===========================================================================
   Terminal demos and motion.
   ---------------------------------------------------------------------------
   The demos carry the argument: "it puts the machine back, still running" is a
   claim, whereas watching rewind return in a second is evidence. Everything
   below exists to make that legible, not to decorate.
   =========================================================================== */

.demo pre { min-height: var(--demo-h, auto); }
.demo .ln {
  display: block;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.demo .ln.shown { opacity: 1; transform: none; }
/* A blank line is structure, not content: it must hold its height from the
   start or the block jumps as lines land. */
.demo .ln.gap { min-height: 1.8em; }

/* The caret only exists while a line is being typed, so the block does not
   look like it is waiting for input once the demo has finished. */
.demo .ln.typing::after {
  content: "▌";
  margin-left: 1px;
  color: var(--accent);
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.term__bar .replay {
  margin-left: auto;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  background: transparent;
  color: #6f7a87;
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.term:hover .replay, .replay:focus-visible { opacity: 1; }
.term__bar .replay:hover { color: var(--accent); border-color: var(--accent); }

/* Scroll reveal. Deliberately small: 10px and 320ms reads as the page settling,
   where 40px and a second reads as an effect someone was pleased with. */
.reveal { transition: opacity .32s var(--ease), transform .32s var(--ease); }
.reveal.pre { opacity: 0; transform: translateY(10px); }

/* Everything above is motion for its own sake to somebody who has asked not to
   have any. The demos are shown complete by the script; this makes sure no
   transition or caret survives. */
@media (prefers-reduced-motion: reduce) {
  .demo .ln, .reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
  .demo .ln.typing::after { display: none; }
  .replay { opacity: 1; }
  html { scroll-behavior: auto; }
}

/* ---- product blocks ---- */
/* Prose one side, a demo the other, alternating down the page so the eye has a
   rhythm to follow rather than a wall of identical rows. */
.product { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 980px) {
  .product { grid-template-columns: 0.85fr 1.15fr; gap: var(--s7); }
  .product.flip > *:first-child { order: 2; }
}
.product > * { min-width: 0; }
.product + .product { margin-top: var(--s9); }
@media (max-width: 979px) { .product + .product { margin-top: var(--s8); } }

.product .kicker {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--s3);
}
.product .kicker b {
  width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent); font-size: 10px;
}
.product h3 { font-size: 24px; letter-spacing: -.026em; margin-bottom: var(--s3); line-height: 1.25; }
.product p { font-size: var(--fs-sm); }
.product .more { display: inline-block; margin-top: var(--s2); font-size: var(--fs-sm); }

/* The one number a section is really about, stated once beside its demo. */
.stat { display: flex; gap: var(--s5); flex-wrap: wrap; margin: var(--s4) 0 0; }
.stat div { min-width: 0; }
.stat b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.stat b i { font-style: normal; font-size: 12.5px; color: var(--text-3); font-weight: 400; }
.stat span { font-size: var(--fs-xs); color: var(--text-3); }

/* ===========================================================================
   Product tiles.
   ---------------------------------------------------------------------------
   Replaces a section of prose. Seven things ship and a visitor should be able
   to see all of them at once and click straight into the one they came for,
   rather than read three paragraphs about a problem they already have.

   Each icon animates on hover: the stroke draws itself. Drawing is the right
   motion for these because every one of them depicts a process — a copy being
   made, a state being restored, a request being refused — and a line that
   arrives has direction where a static glyph does not.
   =========================================================================== */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s4);
}
.tile {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
  color: var(--text);
  overflow: hidden;
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.tile:hover {
  text-decoration: none;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
/* A wash that arrives from the corner the eye is already on. */
.tile::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(420px 160px at 12% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity .22s var(--ease);
  pointer-events: none;
}
.tile:hover::after { opacity: 1; }

.tile__ico {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  flex-shrink: 0;
}
.tile__ico svg { width: 21px; height: 21px; display: block; }
.tile__ico svg * {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The draw-on. Each shape carries its own length so the dash maths is right
   per icon rather than one number that is wrong for most of them. */
/* Path lengths as classes, not style attributes: the site's CSP is
   `style-src 'self'` with no 'unsafe-inline', which blocks a style attribute
   as surely as it blocks a <style> block. As inline values these silently fell
   back to the shared default and every icon drew at the wrong rate. */
.l12{--len:12} .l16{--len:16} .l18{--len:18} .l22{--len:22} .l26{--len:26} .l30{--len:30} .l44{--len:44} .l46{--len:46} .l52{--len:52} .l56{--len:56} .l60{--len:60}

.tile__ico svg [data-draw] {
  stroke-dasharray: var(--len, 90);
  stroke-dashoffset: 0;
}
.tile:hover .tile__ico svg [data-draw] {
  animation: draw .62s var(--ease) both;
}
@keyframes draw {
  from { stroke-dashoffset: var(--len, 90); }
  to   { stroke-dashoffset: 0; }
}
/* The one moving part that is not a stroke: the dot that travels a fork. */
.tile:hover .tile__ico svg [data-pulse] { animation: pulse 1.1s var(--ease) infinite; }
@keyframes pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

.tile h3 { font-size: 16.5px; margin: 0; letter-spacing: -.015em; }
.tile p { font-size: var(--fs-sm); margin: 0; color: var(--text-2); }
.tile .go {
  margin-top: auto; padding-top: var(--s2);
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--accent);
  opacity: .75; transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.tile:hover .go { opacity: 1; transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .tile, .tile::after, .tile .go { transition: none; }
  .tile:hover { transform: none; }
  .tile:hover .tile__ico svg [data-draw],
  .tile:hover .tile__ico svg [data-pulse] { animation: none; }
}

/* Inline code in body copy. Rare enough to scope here rather than as a global
   element rule, which would also catch every terminal on the page. */
.product p code, .sec-head code {
  font-family: var(--mono);
  font-size: .92em;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ===========================================================================
   Page heroes and the components the inner pages needed.
   ---------------------------------------------------------------------------
   The landing page had a design system and every other page had a stylesheet
   from before it. These are the pieces the rest of the site needs to stop
   looking like an appendix.
   =========================================================================== */
.phero { padding: var(--s8) 0 var(--s7); }
@media (min-width: 980px) { .phero { padding: var(--s9) 0 var(--s8); } }
.phero h1 {
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.04; letter-spacing: -.04em;
  margin: var(--s3) 0 var(--s4);
  max-width: 17ch;
}
.phero h1 em { font-style: normal; color: var(--accent); }
.phero .lead { max-width: 62ch; }
.phero .hero__cta { margin-top: var(--s5); }
.phero .term { margin-top: var(--s7); }

/* The nav marks where you are. Without it a seven-item bar is just a list. */
.nav__links a.on { color: var(--text); }
.nav__links a.on::after {
  content: ""; display: block; height: 2px; margin-top: 3px;
  border-radius: 2px; background: var(--accent);
}

/* Proof rows: a claim with the evidence under it, in the machine's words. */
.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
}
.pf {
  padding: var(--s4) var(--s5);
  display: flex; flex-direction: column; gap: 7px;
  /* Separators drawn by the cell and clipped at the container, so a short
     last row does not leave a painted empty box. */
  box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
  transition: background .18s var(--ease);
}
.pf:hover { background: var(--surface-2); }
.pf h3 {
  font-size: 15.5px; margin: 0; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 8px;
}
.pf h3 em { font-style: italic; color: var(--text-2); }
.pf h3::before {
  content: "✓"; font-family: var(--mono); font-size: 12px; color: var(--accent);
  width: 18px; height: 18px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.pf p { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.pf code {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-3);
  background: none; padding: 0; word-break: break-word;
}

/* A screenshot that is the point of the page, rather than an illustration. */
.shot img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.shot figcaption {
  margin-top: var(--s3); font-size: var(--fs-xs); color: var(--text-3); text-align: center;
}

/* ---- download: platform tabs ---------------------------------------------
   A tab strip rather than four stacked sections: nobody installing on a Mac
   needs to scroll past the Fedora instructions, and the panel that opens is
   chosen from the visitor's own platform. Without JS every panel is visible,
   which is the correct fallback for a page whose job is to hand over a file. */
.tabs__bar {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s5);
}
.tabs__bar button {
  font: inherit; font-size: var(--fs-sm); font-weight: 500;
  color: var(--text-3); background: none; border: 0;
  padding: 10px 16px; cursor: pointer; border-radius: var(--r-sm) var(--r-sm) 0 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.tabs__bar button:hover { color: var(--text); }
.tabs__bar button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.tabs__panel { display: grid; gap: var(--s5); }
/* Must come after any rule that sets display on a hideable element, or the
   hidden attribute silently does nothing. */
[hidden] { display: none !important; }
@media (min-width: 860px) { .tabs__panel { grid-template-columns: 1fr 1fr; } }

.way {
  /* Grid items default to min-width:auto, so one unbreakable token — the scoop
     URL is 92 characters — widens the whole track and the page scrolls
     sideways on a phone. The command scrolls inside its own box instead. */
  min-width: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
}
.way h3 { font-size: 15.5px; margin: 0; display: flex; align-items: center; gap: var(--s3); }
.way h3 .tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 999px; padding: 2px 8px; font-weight: 500;
}
.way p { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.way .cmd { margin: 0; }
.tabs__panel .note { grid-column: 1 / -1; margin: 0; min-width: 0; }
.way .cmd, .way .cmd .t { min-width: 0; }

.files { display: grid; gap: var(--s2); }
.file {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 14px; font-family: var(--mono); font-size: 12px;
  color: var(--text); transition: border-color .15s var(--ease);
}
.file:hover { border-color: var(--accent); text-decoration: none; }
.file b { font-weight: 500; word-break: break-all; }
.file span { color: var(--text-3); font-size: 11px; flex-shrink: 0; }

/* ---- commands reference -------------------------------------------------- */
.cgroup + .cgroup { margin-top: var(--s7); }
.cgroup h3 {
  font-size: 13px; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 var(--s4);
  padding-bottom: var(--s3); border-bottom: 1px solid var(--line);
}
.ctable { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1px 0; }
.crow { padding: var(--s3) 0; border-bottom: 1px solid var(--line); padding-right: var(--s5); }
.crow code {
  font-family: var(--mono); font-size: 13px; color: var(--accent);
  background: none; padding: 0;
}
.crow p { margin: 3px 0 0; font-size: var(--fs-sm); color: var(--text-2); }
.crow .subs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.crow .subs span {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-3);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 6px;
}

/* ---- pricing ------------------------------------------------------------- */
.price--best { border-color: var(--accent); }
.price .best {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 999px; padding: 2px 8px; margin-left: var(--s2); font-weight: 500;
}
.price .amount { display: flex; align-items: baseline; gap: 5px; margin: var(--s3) 0 var(--s2); }
.price .amount b { font-size: 30px; font-weight: 600; letter-spacing: -.03em; }
.price .amount span { font-size: var(--fs-xs); color: var(--text-3); }
.price .blurb { font-size: var(--fs-sm); color: var(--text-2); min-height: 3em; }

/* The one command the download page exists to hand over. Larger than the rest
   because on this page it is the headline, not a code sample. */
.install { margin-top: var(--s6); max-width: 640px; }
.cmd--big { padding: 16px 16px 16px 20px; font-size: 15px; }
.cmd--big .t { line-height: 1.6; }
.note-line { margin: var(--s3) 0 0; font-size: var(--fs-xs); color: var(--text-3); }

/* The one full-session demo. Tighter leading than the short demos: at 1.8 a
   fifty-line session is 2200px of mostly whitespace, and a real terminal does
   not double-space itself. */
/* A window, not a transcript. The full session is fifty lines; printed in
   full it was 2200px on a desktop and 2900px on a phone, so the page became
   mostly one terminal. It now holds a fixed height and scrolls itself as the
   session plays, which is also what the real thing does. */
.term--main pre {
  line-height: 1.5;
  padding: var(--s4) var(--s5) var(--s5);
  height: 440px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
@media (max-width: 720px) { .term--main pre { height: 340px; } }
.term--main pre::-webkit-scrollbar { width: 8px; }
.term--main pre::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.16); border-radius: 4px;
}
.term--main { margin-top: var(--s6); }

/* A section whose first child is the thing itself, with no heading above it,
   does not need a heading's worth of space over it. */
.section--tight { padding-top: var(--s6); }
.section--tight .term--main { margin-top: 0; }

/* ---- download page ------------------------------------------------------- *
 *
 * The page had one weight for everything: four equally-sized cards per
 * platform, the recommended one marked only by a small tag, and the actual
 * files as the quietest element on a page whose entire job is handing over a
 * file. What follows gives it a spine — one obvious action, the alternatives
 * subordinate to it, and the downloads legible as downloads.
 */

/* Release identity, directly under the eyebrow. A download page that does not
   say what it is offering asks the visitor to trust an unlabelled binary. */
.relbar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px var(--s4); margin: calc(var(--s2) * -1) 0 var(--s5);
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-3);
  line-height: 1.5;
}
.relbar span { display: inline-flex; align-items: center; gap: var(--s2); }
.relbar b { color: var(--text); font-weight: 500; }
.relbar i {
  font-style: normal; width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 16%, transparent);
}

/* The primary action. Raised off the page rather than sitting in the flow,
   because on the old page it was visually identical to the three copyable
   commands further down. */
.installcard {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); padding: var(--s5); display: grid; gap: var(--s3);
  box-shadow: 0 1px 2px rgba(10, 12, 20, .05), 0 18px 40px -24px rgba(10, 12, 20, .3);
}
/* Grid items default to min-width:auto, so an unbreakable command sets the
   floor for the whole card and the page scrolls sideways on a phone — the same
   trap .way documents above. The command scrolls inside its own box instead. */
.installcard > * { min-width: 0; }
.installcard .cmd, .installcard .cmd .t { min-width: 0; }
.installcard .cmd { margin: 0; font-size: 14px; padding: 15px 16px; }
.installcard__foot {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  font-size: var(--fs-xs); color: var(--text-3); margin: 0;
}

/* Filled in by land.js once the platform is known. Hidden until then: an empty
   "we think you are on …" is worse than no line at all. */
.detect {
  display: none; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin-top: var(--s4); padding: var(--s3) var(--s4);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: var(--r); font-size: var(--fs-sm); color: var(--text-2);
}
.detect[data-on] { display: flex; }
.detect b { color: var(--text); font-weight: 550; }
.detect a { font-weight: 550; }
/* The escape hatch is not a second primary action. Quieter, and pushed to the
   end on a wide enough row so the two links never read as a pair. */
.detect__alt { font-weight: 400; font-size: var(--fs-xs); color: var(--text-3); }
.detect__alt:hover { color: var(--accent); }
@media (min-width: 620px) { .detect__alt { margin-left: auto; } }

/* One method per platform earns the emphasis; the rest are alternatives. */
.way--primary {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface));
}
@media (min-width: 860px) { .way--primary, .way--wide { grid-column: 1 / -1; } }
.way--primary .cmd { font-size: 14px; }

/* Downloads, legible as downloads: name, what it is, how big. The size is
   stamped from the release at deploy, so it cannot claim 4 MB for a 40 MB
   file the way a hand-edited number eventually does. */
.filerow {
  /* minmax(0,1fr), not 1fr: a grid track's automatic minimum is min-content,
     so a 30-character filename that cannot wrap widens the track and the whole
     page scrolls sideways on a phone. Caught by the viewport test at 375px. */
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: var(--s2) var(--s4); padding: 13px 15px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); transition: border-color .15s var(--ease), background .15s var(--ease);
}
.filerow:hover { border-color: var(--accent); background: var(--surface); text-decoration: none; }
.filerow__name { min-width: 0; font-family: var(--mono); font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; }
.filerow__what { display: block; font-family: var(--sans); font-size: var(--fs-xs); color: var(--text-3); margin-top: 3px; }
.filerow__sz {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-3);
  white-space: nowrap; text-align: right;
}
.filerow__sz::after {
  content: "↓"; display: block; font-size: 13px; color: var(--accent); opacity: 0; transition: opacity .15s var(--ease);
}
.filerow:hover .filerow__sz::after { opacity: 1; }

/* Verification. A product whose pitch is that work stays on your machine
   should show you how to check what it just handed you, not only assert it. */
.verify { display: grid; gap: var(--s4); max-width: 760px; }
.verify > *, .verify__row > * { min-width: 0; }
.verify .cmd, .verify .cmd .t { min-width: 0; }
.verify__row { min-width: 0; display: grid; gap: var(--s2); }
.verify__row h3 { font-size: 14.5px; margin: 0; }
.verify__row p { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.verify .cmd { margin: 0; }

/* Which of the seven products a plan carries. The catalogue grew to fourteen
   purchasable things and a visitor could not tell which of them they were
   already paying for — the commonest way to lose a sale is to make someone
   suspect they are about to buy the same thing twice. */
.price .includes {
  font-size: var(--fs-xs); color: var(--text-2); line-height: 1.6;
  margin: var(--s3) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line);
}
.price .includes b {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 4px;
}

/* Per-product purchase rows on /products/. Deliberately a plain list rather
   than seven more pricing cards: the plans are the recommendation, and giving
   the à-la-carte options equal visual weight would argue against them. */
.buylist { display: grid; gap: var(--s2); max-width: 720px; }
.buyrow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--s3) var(--s4);
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); transition: border-color .15s var(--ease);
}
.buyrow:hover { border-color: var(--line-strong); }
.buyrow > * { min-width: 0; }
.buyrow b { font-weight: 550; font-size: 15px; }
.buyrow span { display: block; font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.buyrow__price { font-family: var(--mono); font-size: 13px; color: var(--text-2); white-space: nowrap; }
.buyrow .btn { padding: 7px 16px; font-size: var(--fs-xs); }
@media (max-width: 560px) {
  .buyrow { grid-template-columns: minmax(0, 1fr) auto; }
  .buyrow .btn { grid-column: 2; }
}

/* Product-first plan cards.
 *
 * The cards used to carry a blurb, a list of quotas ("4 copies running at
 * once", "40 hours of copies a month") and then a separate INCLUDES footnote
 * naming the products. That is two vocabularies for one plan, and the quota
 * one is the weaker: "copies" and "hours of copies" are internal units a
 * visitor has to translate before they mean anything, while the product names
 * are the same words used everywhere else on the site. Products are the list
 * now; the quotas are one quiet line under it. */
.prods { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: 7px; }
.prods li {
  position: relative; padding-left: 20px; font-size: var(--fs-sm); color: var(--text);
}
.prods li::before {
  content: ""; position: absolute; left: 2px; top: 7px; width: 9px; height: 5px;
  border-left: 1.6px solid var(--ok); border-bottom: 1.6px solid var(--ok);
  transform: rotate(-45deg);
}
.limits {
  margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11.5px; color: var(--text-3); letter-spacing: .02em;
}