/* 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; }