/* krate.tech -- the 2026 shell.
   Measured against x.ai/build (see Plan/krate-website-2026-08.md): neutral
   near-black, one muted alpha, hairline borders, pill buttons, a display
   scale with tight tracking. Fonts are Geist (SIL OFL, self-hosted) -- the
   closest freely licensed grotesque to theirs. Everything here is
   hand-written CSS; the budget for the whole page is under 150 KB. */

/* ---------------------------------------------------------------- fonts */

@font-face {
  font-family: "Geist";
  src: url("./fonts/geist-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("./fonts/geist-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens */

:root {
  color-scheme: dark;
  --bg: #0a0a0a;
  --panel: #0f1012;
  --line: #1f2228;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.55);
  --quiet: rgba(255, 255, 255, 0.35);
  --accent: #6291ff;
  --good: #4ade80;
  --warn: #f4dc74;
  --radius-card: 14px;
  --radius-pill: 999px;
  --max: 1100px;
  --sans: "Geist", Inter, ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", "Cascadia Code", Menlo, Consolas,
    "Liberation Mono", monospace;
}

/* ---------------------------------------------------------------- base */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

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

/* ---------------------------------------------------------------- type */

h1, h2, h3 { font-weight: 500; letter-spacing: -0.02em; }

.display {
  font-size: clamp(40px, 7vw, 62px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.02;
}

.section-h {
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.grid-h {
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.cta-h {
  font-size: clamp(34px, 5vw, 48px);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.muted { color: var(--muted); }
.quiet { color: var(--quiet); }

/* ---------------------------------------------------------------- header */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.site-head.scrolled { border-bottom-color: var(--line); }

.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  font-size: 15px;
}
.brand img { width: 22px; height: 22px; }

.head-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-item { position: relative; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  border-radius: var(--radius-pill);
  transition: color 0.15s;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.nav-link:hover, .nav-item:focus-within > .nav-link { color: var(--text); }
.nav-link .chev { font-size: 10px; opacity: 0.6; transition: transform 0.15s; }
.nav-item:hover .chev, .nav-item:focus-within .chev { transform: rotate(180deg); }

/* The hover panel: links on the left, a small live terminal on the right.
   Hover and keyboard focus both open it; a click toggles it on touch. */
.nav-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 430px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr 190px;
  gap: 14px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.nav-item:hover .nav-panel,
.nav-item:focus-within .nav-panel,
.nav-item.open .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.panel-links { display: flex; flex-direction: column; gap: 2px; }
.panel-links a {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
}
.panel-links a:hover { background: rgba(255, 255, 255, 0.05); }
.panel-links a .d {
  display: block;
  font-size: 12px;
  color: var(--quiet);
  line-height: 1.4;
}

.panel-mini {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--muted);
  overflow: hidden;
  align-self: start;
}
.panel-mini .g { color: var(--good); }

.head-cta { display: flex; align-items: center; gap: 8px; }

/* ---------------------------------------------------------------- pills */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--line);
  color: var(--text);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.pill:hover { border-color: rgba(255, 255, 255, 0.28); }

.pill-primary {
  background: #fff;
  color: #0a0a0a;
  border-color: #fff;
}
.pill-primary:hover { background: rgba(255, 255, 255, 0.88); border-color: transparent; }

/* ---------------------------------------------------------------- badge */

.home-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.15s;
}
.home-hero-badge:hover { border-color: rgba(255, 255, 255, 0.25); }
.home-hero-badge .new {
  background: rgba(98, 145, 255, 0.15);
  color: var(--accent);
  border: 1px solid rgba(98, 145, 255, 0.4);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.home-hero-badge b { color: var(--text); font-weight: 500; }

/* ---------------------------------------------------------------- hero */

.home-hero {
  padding: 96px 0 72px;
  text-align: center;
}

.home-hero .display { margin: 26px auto 18px; max-width: 15ch; }

.home-hero-sub {
  color: var(--muted);
  font-size: 17px;
  max-width: 52ch;
  margin: 0 auto 34px;
}

/* The rotating word and its gradient bar. The bar is a real element under
   the word; its colored band sweeps across by animating background
   position -- measured off x.ai's hero and rebuilt by hand. */
.rot {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.rot .word { display: inline-block; }
.rot .word span { display: inline-block; will-change: transform, opacity, filter; }

.rot .bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 3px;
  border-radius: var(--radius-pill);
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%,
    #6366f1 40%, #a855f7 45%, #ec4899 50%, #f97316 55%, #eab308 60%,
    rgba(255, 255, 255, 0.25) 65%, rgba(255, 255, 255, 0.25) 100%);
  background-size: 300% 100%;
  animation: sweep 3.2s linear infinite;
}
@keyframes sweep {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

.home-hero-links {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin-top: 26px;
  font-size: 14px;
  color: var(--muted);
}
.home-hero-links a { transition: color 0.15s; }
.home-hero-links a:hover { color: var(--text); }
.home-hero-links .arr { opacity: 0.5; }

/* ---------------------------------------------------------------- command */

.cmd {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 12px;
  padding: 13px 16px;
  font-family: var(--mono);
  font-size: 13.5px;
  max-width: 100%;
  transition: border-color 0.15s;
}
.cmd:hover { border-color: rgba(255, 255, 255, 0.22); }
.cmd .dollar { color: var(--quiet); user-select: none; }
.cmd code { color: var(--text); overflow-x: auto; white-space: nowrap; }
.cmd .copy {
  background: none;
  border: 0;
  color: var(--quiet);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  transition: color 0.15s;
  flex: none;
}
.cmd .copy:hover { color: var(--text); }
.cmd .copy.done { color: var(--good); }

.os-toggle {
  display: inline-flex;
  gap: 2px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 3px;
  font-size: 12.5px;
}
.os-toggle button {
  border: 0;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: inherit;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.os-toggle button[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.free-note { margin-top: 14px; font-size: 13px; color: var(--quiet); }

/* ---------------------------------------------------------------- terminal */

.term {
  background: #0c0d0f;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-align: left;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.75;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.term-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--quiet);
}
.term-dots { display: flex; gap: 6px; }
.term-dots i {
  width: 11px; height: 11px; border-radius: 50%;
}
.term-dots i:nth-child(1) { background: #ff5f57; }
.term-dots i:nth-child(2) { background: #febc2e; }
.term-dots i:nth-child(3) { background: #28c840; }
.term-title { flex: 1; text-align: center; }
.term-meta { font-variant-numeric: tabular-nums; }

.term-body { padding: 16px 18px; color: rgba(255, 255, 255, 0.82); overflow-x: auto; }
.term-body .p { color: var(--quiet); }        /* prompt/dim */
.term-body .g { color: var(--good); }         /* good/tick */
.term-body .b { color: var(--accent); }       /* accent */
.term-body .y { color: var(--warn); }         /* caution */
.term-body .w { color: #fff; font-weight: 500; }
.term-body .cursor {
  display: inline-block;
  width: 7px; height: 15px;
  background: var(--text);
  vertical-align: -2px;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.term-status {
  display: flex;
  justify-content: space-between;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--quiet);
}

.home-hero-term { max-width: 660px; margin: 56px auto 0; }

/* ---------------------------------------------------------------- scroller */

.scroller { padding: 40px 0 20px; }

.scroller-inner {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 64px;
  /* No align-items: start here. The right column must stretch to the full
     height of the text column, or the sticky element has no track to slide
     along and scrolls straight off with its 460px parent -- which is
     exactly what it did on the first render. */
}

.feat {
  min-height: 82vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 8px;
}
.feat:first-child { min-height: 70vh; }
.feat:last-child { min-height: 70vh; }

.feat .kicker {
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.feat h2 { margin-bottom: 14px; }
.feat p { color: var(--muted); max-width: 46ch; }

.feat ul {
  list-style: none;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feat li {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  color: var(--muted);
}
.feat li::before { content: "✓"; color: var(--quiet); flex: none; }

.stick-col { position: relative; min-width: 0; }
.stick {
  position: sticky;
  top: calc(50vh - 230px);
  height: 460px;
  min-width: 0;
}
.stick .demo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.stick .demo.active { opacity: 1; pointer-events: auto; }
.stick .term { height: 100%; display: flex; flex-direction: column; }
.stick .term-body { flex: 1; }

/* Inline copies for small screens; hidden while the sticky column works. */
.demo-inline { display: none; margin-top: 26px; }

/* ---------------------------------------------------------------- grid */

.gridsec { padding: 110px 0; border-top: 1px solid var(--line); }
.gridsec .grid-h { margin-bottom: 10px; }
.gridsec .lead { color: var(--muted); margin-bottom: 56px; }

.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 48px;
}
.cap {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.cap .ic {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--quiet);
}
.cap b { display: block; font-weight: 500; font-size: 15px; margin-bottom: 3px; }
.cap span { font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/* ---------------------------------------------------------------- band */

.band {
  margin: 20px 0 0;
  padding: 90px 0;
  border-top: 1px solid var(--line);
}
.band-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 44px 48px;
}
.band-card h2 { margin-bottom: 8px; }
.band-card p { color: var(--muted); font-size: 15px; }

/* ---------------------------------------------------------------- CTA */

.final {
  padding: 130px 0 110px;
  text-align: center;
  border-top: 1px solid var(--line);
}
.final .cta-h { margin-bottom: 12px; }
.final p { color: var(--muted); margin-bottom: 34px; }
.final .actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}

/* ---------------------------------------------------------------- footer */

.site-foot {
  border-top: 1px solid var(--line);
  padding: 64px 0 48px;
  font-size: 13.5px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
}
.foot-brand img { width: 26px; height: 26px; margin-bottom: 14px; }
.foot-brand .c { color: var(--quiet); font-size: 12.5px; margin-top: 6px; }
.foot-col b {
  display: block;
  font-weight: 500;
  margin-bottom: 12px;
  font-size: 13px;
}
.foot-col a {
  display: block;
  color: var(--muted);
  padding: 4px 0;
  transition: color 0.15s;
}
.foot-col a:hover { color: var(--text); }
.foot-note {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--quiet);
  font-size: 12.5px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------- reveal */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- mobile */

@media (max-width: 1023px) {
  .head-nav { display: none; }
  .scroller-inner { grid-template-columns: 1fr; gap: 0; }
  .stick-col { display: none; }
  .feat { min-height: 0; padding: 56px 0; }
  .demo-inline { display: block; }
  .cap-grid { grid-template-columns: 1fr 1fr; }
  .band-card { flex-direction: column; text-align: center; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .cap-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 64px; }
  .cmd { font-size: 12px; }
  .home-hero-links { flex-wrap: wrap; gap: 14px; }
}

/* ------------------------------------------------------------- subpages
   Everything below exists so the secondary pages (faq, progress, reports,
   publish, contact, cloud, open, answers) can swap /krate.css for this file
   without rewriting their own inline components. */

/* Legacy variable aliases. The subpages' inline styles were written against
   krate.css's palette; aliasing keeps every one of them working while the
   base tokens (background, text, borders, fonts) move to the new shell. */
:root {
  --panel-raised: #16171b;
  --line-strong: #2e323a;
  --blue: var(--accent);
  --blue-soft: #a9c2ff;
  --cyan: #6cf4d7;
  --yellow: var(--warn);
  --danger: #ff7f95;
}

/* The compact subpage header: brand, a few links, the install pill. No
   hover panels here -- a person on /faq is reading, not shopping. */
.subnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.subnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: 60px;
}
.subnav nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.subnav nav a {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  border-radius: var(--radius-pill);
  transition: color 0.15s;
}
.subnav nav a:hover { color: var(--text); }
.subnav .pill { padding: 6px 16px; font-size: 13.5px; }

/* Page shells: narrow for reading, wide for tables and grids. */
.page-wrap { max-width: 760px; margin: 0 auto; padding: 56px 24px 96px; }
.page-wide { max-width: 1000px; margin: 0 auto; padding: 56px 24px 96px; }

.page-kicker {
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.page-wrap h1, .page-wide h1 {
  font-size: clamp(30px, 4.5vw, 40px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 12px;
}
.page-lede {
  color: var(--muted);
  font-size: 16.5px;
  max-width: 58ch;
  margin-bottom: 40px;
}

/* Prose: the reading defaults every subpage shares. */
.page-wrap h2, .page-wide h2 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 44px 0 12px;
}
.page-wrap p, .page-wide p { color: var(--muted); margin-bottom: 14px; }
.page-wrap ul, .page-wide ul { color: var(--muted); margin: 0 0 14px 20px; }
.page-wrap li, .page-wide li { margin-bottom: 8px; }
.page-wrap a, .page-wide a { color: var(--blue-soft); }
.page-wrap a:hover, .page-wide a:hover { text-decoration: underline; }
.page-wrap strong, .page-wide strong { color: var(--text); font-weight: 500; }
.page-wrap code, .page-wide code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.1em 0.4em;
}

/* Tables, for the generated progress and reports pages. */
.page-wide table, .page-wrap table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0 26px;
  font-size: 14.5px;
}
.page-wide th, .page-wrap th {
  font-weight: 500;
  color: var(--quiet);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.page-wide th, .page-wide td, .page-wrap th, .page-wrap td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.page-wide td { color: var(--muted); }
.page-wide td code, .page-wrap td code { border: 0; background: none; color: var(--text); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* FAQ accordion. */
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel);
  margin-bottom: 10px;
  overflow: hidden;
}
.faq-item summary {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  color: var(--text);
  font-size: 15.5px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  margin-left: auto;
  color: var(--quiet);
  font-size: 18px;
  line-height: 1;
  transition: transform 0.15s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-index {
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--quiet);
  letter-spacing: 0.04em;
}
.faq-answer { padding: 0 18px 16px; }
.faq-answer p { font-size: 14.5px; }

/* The compact subpage footer. */
.subfoot {
  border-top: 1px solid var(--line);
  padding: 28px 0;
  font-size: 13px;
  color: var(--quiet);
}
.subfoot-inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.subfoot a { color: var(--muted); margin-left: 18px; }
.subfoot a:first-child { margin-left: 0; }
.subfoot a:hover { color: var(--text); }

@media (max-width: 700px) {
  .subnav nav { display: none; }
  /* Wide tables scroll inside themselves rather than widening the page. */
  .page-wide table, .page-wrap table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rot .bar { animation: none; background-size: 100% 100%; }
  .rot .word span { transition: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .stick .demo { transition: none; }
}

/* ------------------------------------------------------- reviewer quotes
   Two lines from Denis A. Joly's review, used with his permission and his
   name. Quiet by design: a borrowed sentence, not a testimonial wall. */
.reviewer-line {
  margin: 18px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--line);
  font-size: 15px;
  font-style: italic;
  color: var(--muted);
}
.reviewer-line cite {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  font-style: normal;
  color: var(--quiet);
}

/* ---- direct downloads -------------------------------------------------- */

.dl-card {
  margin-top: 18px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.dl-head { display: flex; align-items: center; gap: 12px; }
.tag-beta {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(244, 220, 116, 0.32);
  background: rgba(244, 220, 116, 0.08);
  color: var(--warn);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dl-sub { margin-top: 8px; color: var(--quiet); }
.dl-grid {
  display: grid;
  gap: 10px;
  margin: 20px 0 16px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.dl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.dl:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.dl b { color: var(--text); font-weight: 560; }
.dl span { color: var(--quiet); font-size: 12.5px; }
.dl-foot { color: var(--quiet); font-size: 12.5px; line-height: 1.6; }

/* ---- studio page ------------------------------------------------------- */

.st-hero { padding: 92px 0 54px; text-align: center; overflow: hidden; }
.st-hero-inner { max-width: 1220px; margin: 0 auto; }
.st-hero-copy { max-width: 780px; margin: 0 auto; }
.st-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  border: 1px solid rgba(244, 220, 116, 0.3);
  background: rgba(244, 220, 116, 0.07);
  color: var(--warn); font-size: 11px; letter-spacing: 0.12em;
}
.st-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--warn);
  animation: st-pulse 2.4s ease-in-out infinite;
}
@keyframes st-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .st-dot { animation: none; } }

.st-h1 {
  margin-top: 24px;
  font-size: clamp(34px, 6vw, 60px);
  font-weight: 500; line-height: 1.06; letter-spacing: -0.025em;
}
.st-lede {
  margin: 20px auto 0; max-width: 620px;
  color: var(--muted); font-size: 16px; line-height: 1.65;
}
.st-cta {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
  margin-top: 32px;
}
.st-under { margin-top: 16px; color: var(--quiet); font-size: 12.5px; }

/* The product demonstration uses the real Studio layout and a real Krate app
   capture. The only invented part is time: a multi-minute build is compressed
   into a short loop so the full journey can be understood without waiting. */
.st-product {
  position: relative;
  width: min(1160px, calc(100vw - 48px));
  height: min(680px, 63vw);
  min-height: 580px;
  margin: 68px auto 0;
  overflow: hidden;
  text-align: left;
  background: #0a0a0a;
  border: 1px solid #292c33;
  border-radius: 18px;
  box-shadow: 0 42px 110px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}
.st-product::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 28%, rgba(255,255,255,0.025) 48%, transparent 68%);
  transform: translateX(-100%);
  animation: st-product-sheen 15s ease-in-out infinite;
}
@keyframes st-product-sheen {
  0%, 34% { transform: translateX(-100%); }
  58%, 100% { transform: translateX(100%); }
}
.st-product-bar {
  position: relative;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: #0c0d0f;
}
.st-traffic { display: flex; gap: 7px; }
.st-traffic i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.st-traffic i:nth-child(2) { background: #febc2e; }
.st-traffic i:nth-child(3) { background: #28c840; }
.st-product-brand {
  display: flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.88); font-size: 10px; font-weight: 500; letter-spacing: 0.14em;
}
.st-product-brand img { width: 16px; height: 16px; }
.st-product-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  color: var(--muted); font-size: 12px;
}
.st-agent {
  display: flex; align-items: center; gap: 7px;
  margin-left: auto; padding: 6px 11px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  color: var(--muted); font-size: 11px;
}
.st-agent i, .st-ready i, .st-build-head span i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--good);
}
.st-product-body {
  height: calc(100% - 102px);
  display: grid;
  grid-template-columns: minmax(250px, 31%) 1fr;
}
.st-product-rail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: #0c0d0f;
}
.st-product-thread { flex: 1; padding: 24px 20px; }
.st-message {
  max-width: 92%;
  margin-bottom: 13px;
  padding: 10px 12px;
  border-radius: 11px;
  font-size: 12px;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.st-message-user { margin-left: auto; background: #191b20; color: rgba(255,255,255,.82); }
.st-message-krate { color: var(--muted); padding-left: 4px; }
.st-done-copy { display: none; }
.st-product[data-step="build"] .st-message-user,
.st-product[data-step="done"] .st-message-user,
.st-product[data-step="share"] .st-message-user,
.st-product[data-step="build"] .st-message-krate,
.st-product[data-step="done"] .st-message-krate,
.st-product[data-step="share"] .st-message-krate { opacity: 1; transform: none; }
.st-product[data-step="done"] .st-build-copy,
.st-product[data-step="share"] .st-build-copy { display: none; }
.st-product[data-step="done"] .st-done-copy,
.st-product[data-step="share"] .st-done-copy { display: inline; }
.st-mini-progress {
  height: 2px; margin: 2px 4px 0; overflow: hidden;
  background: rgba(255,255,255,.08); border-radius: 9px;
  opacity: 0; transition: opacity .3s ease;
}
.st-mini-progress i { display: block; width: 0; height: 100%; background: var(--accent); }
.st-product[data-step="build"] .st-mini-progress { opacity: 1; }
.st-product[data-step="build"] .st-mini-progress i { animation: st-build-rail 4.4s linear forwards; }
@keyframes st-build-rail { to { width: 88%; } }
.st-composer {
  min-height: 76px;
  display: flex; align-items: center; gap: 2px;
  margin: 0 16px 16px;
  padding: 13px 44px 13px 14px;
  position: relative;
  color: rgba(255,255,255,.75); font-size: 12px; line-height: 1.45;
  border: 1px solid #2a2d34; border-radius: 12px;
  background: #111216;
}
.st-product:not([data-step="prompt"]) .st-composer { color: var(--quiet); }
.st-demo-caret {
  display: inline-block; flex: none; width: 1.5px; height: 14px;
  background: var(--accent); animation: st-blink 1s steps(1) infinite;
}
@keyframes st-blink { 50% { opacity: 0; } }
.st-composer button {
  position: absolute; right: 10px; bottom: 10px;
  width: 28px; height: 28px; display: grid; place-items: center;
  color: #090909; background: #fff; border: 0; border-radius: 50%;
}
.st-product-stage { position: relative; min-width: 0; overflow: hidden; background: #0a0a0a; }
.st-stage-view {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 32px;
  opacity: 0; transform: translateY(10px) scale(.992);
  pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
}
.st-product[data-step="prompt"] .st-stage-idle,
.st-product[data-step="build"] .st-stage-building,
.st-product[data-step="done"] .st-stage-done,
.st-product[data-step="share"] .st-stage-done { opacity: 1; transform: none; }
.st-stage-idle { text-align: center; color: var(--quiet); font-size: 12px; }
.st-stage-idle img { width: 30px; margin: 0 auto 12px; opacity: .28; }
.st-build-card { width: min(520px, 88%); }
.st-build-head { display: flex; align-items: center; justify-content: space-between; }
.st-build-head strong { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.st-build-head span, .st-ready {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  color: var(--muted); font-size: 10px;
}
.st-build-head span i { animation: st-pulse 1.2s ease-in-out infinite; }
.st-build-time { margin-top: 7px; color: var(--quiet); font-size: 11px; }
.st-build-progress {
  height: 3px; overflow: hidden; margin: 22px 0 17px;
  border-radius: 8px; background: rgba(255,255,255,.08);
}
.st-build-progress i { display: block; width: 0; height: 100%; background: var(--accent); }
.st-product[data-step="build"] .st-build-progress i { animation: st-main-progress 4.4s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes st-main-progress { 0% { width: 8%; } 45% { width: 51%; } 100% { width: 92%; } }
.st-build-stage { color: rgba(255,255,255,.82); font-size: 12px; }
.st-build-line { margin-top: 5px; color: var(--quiet); font-family: var(--mono); font-size: 10px; }
.st-build-line b {
  display: inline-block; width: 1px; height: 11px; margin-left: 3px;
  vertical-align: -2px; background: var(--accent); animation: st-blink 1s steps(1) infinite;
}
.st-build-card ul { list-style: none; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.st-build-card li { position: relative; padding: 4px 0 4px 17px; color: var(--quiet); font-size: 11px; }
.st-build-card li::before {
  content: ""; position: absolute; left: 1px; top: 10px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong, #2e323a);
}
.st-build-card li.done::before { background: var(--good); }
.st-build-card li.active { color: var(--muted); }
.st-build-card li.active::before { background: var(--warn); animation: st-pulse 1.2s ease infinite; }
.st-app-preview {
  width: min(650px, 94%);
  padding: 16px;
  border: 1px solid #282b32;
  border-radius: 14px;
  background: #0f1012;
  box-shadow: 0 28px 70px rgba(0,0,0,.38);
}
.st-app-shot {
  height: clamp(210px, 31vw, 360px);
  overflow: hidden;
  border: 1px solid var(--line); border-radius: 10px; background: #0c0f16;
}
.st-app-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.st-app-meta { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-top: 14px; }
.st-app-meta strong { font-size: 15px; font-weight: 500; }
.st-app-meta p { margin-top: 2px; color: var(--quiet); font-size: 10px; }
.st-access { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.st-access span { padding: 4px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); font-size: 9px; }
.st-app-actions { display: flex; gap: 8px; margin-top: 14px; }
.st-app-actions button {
  padding: 7px 14px; border: 1px solid #30333b; border-radius: var(--radius-pill);
  color: #fff; background: transparent; font: inherit; font-size: 10px;
}
.st-app-actions .st-open { color: #090909; background: #fff; border-color: #fff; }
.st-product[data-step="share"] .st-share { border-color: var(--accent); color: #a9c2ff; }
.st-share-link {
  display: flex; align-items: center; justify-content: space-between;
  height: 0; margin-top: 0; padding: 0 10px;
  overflow: hidden; opacity: 0; transform: translateY(-5px);
  border: 1px solid transparent; border-radius: 8px;
  color: var(--muted); font-family: var(--mono); font-size: 9px;
  transition: height .35s ease, margin .35s ease, padding .35s ease, opacity .35s ease, transform .35s ease, border-color .35s ease;
}
.st-share-link b { color: var(--good); font-family: var(--sans); font-weight: 400; }
.st-product[data-step="share"] .st-share-link {
  height: 34px; margin-top: 10px; padding: 8px 10px;
  opacity: 1; transform: none; border-color: var(--line);
}
.st-demo-timeline {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  align-items: center; padding: 0 74px 0 24px;
  border-top: 1px solid var(--line); background: #0c0d0f;
}
.st-demo-timeline span { position: relative; z-index: 1; color: var(--quiet); font-size: 10px; transition: color .25s ease; }
.st-demo-timeline span.active { color: rgba(255,255,255,.82); }
.st-demo-timeline i {
  position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
  background: var(--accent); box-shadow: 0 0 16px rgba(98,145,255,.75);
}
.st-product[data-step="prompt"] .st-demo-timeline i { width: 8%; transition: none; }
.st-product[data-step="build"] .st-demo-timeline i { width: 47%; transition: width 4.4s linear; }
.st-product[data-step="done"] .st-demo-timeline i { width: 75%; transition: width 3.4s linear; }
.st-product[data-step="share"] .st-demo-timeline i { width: 100%; transition: width 2.6s linear; }
.st-demo-replay {
  position: absolute; right: 17px; bottom: 12px; z-index: 2;
  padding: 4px 8px; border: 0; color: var(--quiet); background: transparent;
  font: inherit; font-size: 10px; cursor: pointer;
}
.st-demo-replay:hover { color: #fff; }

.st-band { padding: 58px 0 96px; }
.st-proof-head { max-width: 720px; }
.st-proof-head h2 { margin-top: 12px; font-size: clamp(30px, 4vw, 46px); line-height: 1.08; }
.st-num { color: var(--quiet); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; }
.st-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 38px; background: var(--line); border: 1px solid var(--line); border-radius: 15px; overflow: hidden; }
.st-proof { min-height: 245px; padding: 28px; background: var(--panel); }
.st-proof h3 { margin: 62px 0 10px; font-size: 20px; }
.st-proof p:last-child { color: var(--muted); font-size: 13.5px; line-height: 1.65; }

@media (max-width: 860px) {
  .st-product { height: 620px; min-height: 620px; }
  .st-product-body { grid-template-columns: 260px 1fr; }
  .st-stage-view { padding: 22px; }
  .st-app-preview { width: 96%; padding: 12px; }
  .st-app-shot { height: 300px; }
  .st-proof-grid { grid-template-columns: 1fr; }
  .st-proof { min-height: 0; }
  .st-proof h3 { margin-top: 34px; }
}
@media (max-width: 680px) {
  .st-hero { padding-top: 68px; }
  .st-product { width: calc(100vw - 24px); height: 700px; min-height: 700px; margin-top: 48px; border-radius: 14px; }
  .st-product-bar { height: 50px; padding: 0 12px; }
  .st-product-brand { font-size: 9px; }
  .st-product-title, .st-agent { display: none; }
  .st-product-body { height: calc(100% - 94px); grid-template-columns: 1fr; grid-template-rows: 210px 1fr; }
  .st-product-rail { border-right: 0; border-bottom: 1px solid var(--line); }
  .st-product-thread { padding: 14px 14px 6px; overflow: hidden; }
  .st-message { margin-bottom: 6px; padding: 7px 9px; font-size: 10px; }
  .st-composer { min-height: 54px; margin: 0 12px 12px; padding: 9px 40px 9px 10px; font-size: 10px; }
  .st-composer button { right: 8px; bottom: 8px; width: 25px; height: 25px; }
  .st-stage-view { padding: 18px 12px; }
  .st-build-card { width: 92%; }
  .st-app-preview { width: min(420px, 96%); }
  .st-app-shot { height: 230px; }
  .st-access { display: none; }
  .st-app-actions { margin-top: 10px; }
  .st-demo-timeline { height: 44px; padding-left: 14px; padding-right: 58px; }
  .st-demo-timeline span { font-size: 9px; }
  .st-demo-replay { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .st-product::after, .st-demo-caret, .st-build-head span i,
  .st-build-line b, .st-build-card li.active::before { animation: none; }
  .st-product[data-step] .st-stage-view,
  .st-product[data-step] .st-message,
  .st-product[data-step] .st-share-link { transition: none; }
}

.st-get { padding: 0 0 96px; }
.st-get-card {
  max-width: 720px; margin: 0 auto; padding: 30px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--panel);
}
.st-get-head { display: flex; align-items: center; gap: 12px; }
.st-get-head h2 { font-size: 22px; font-weight: 560; letter-spacing: -0.015em; }
.st-get-sub { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.st-dl-grid {
  display: grid; gap: 10px; margin: 22px 0 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.dl-soon { opacity: 0.55; }
.st-get-note { color: var(--quiet); font-size: 12.5px; line-height: 1.7; }
.st-get-note code {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}
.st-honest {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line);
}
.st-honest-h {
  color: var(--quiet); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.st-honest ul { list-style: none; margin: 12px 0 0; padding: 0; }
.st-honest li {
  position: relative; padding: 5px 0 5px 16px;
  color: var(--muted); font-size: 13.5px; line-height: 1.6;
}
.st-honest li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong, #2e323a);
}

/* ---- studio card on the home page -------------------------------------- */

.studio-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-top: 18px; padding: 26px;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--panel); text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.studio-card:hover { border-color: var(--line-strong, #2e323a); transform: translateY(-1px); }
.studio-card-text { max-width: 560px; }
.studio-card-text p:last-child {
  margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.6;
}
.studio-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 10px;
  color: var(--warn); font-size: 10.5px; letter-spacing: 0.12em;
}
.studio-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--warn);
  animation: st-pulse 2.4s ease-in-out infinite;
}
.studio-go { color: var(--accent); font-size: 14px; white-space: nowrap; }
.dl-wide { grid-column: 1 / -1; }

/* ---- studio page: the looping demo ------------------------------------- */

.demo {
  margin: 56px auto 0; max-width: 820px; text-align: left;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--panel); overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}
.demo-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
}
.demo-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong, #2e323a); }
.demo-title { margin-left: 10px; font-size: 11px; letter-spacing: 0.14em; color: var(--quiet); font-weight: 500; }
.demo-body {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 250px;
}
@media (max-width: 700px) { .demo-body { grid-template-columns: 1fr; } }
.demo-left { padding: 20px; border-right: 1px solid var(--line); }
@media (max-width: 700px) { .demo-left { border-right: 0; border-bottom: 1px solid var(--line); } }
.demo-right { padding: 20px; }

.demo-you, .demo-krate {
  font-size: 13px; line-height: 1.5; margin-bottom: 10px;
  padding: 8px 12px; border-radius: 10px; width: fit-content; max-width: 100%;
}
.demo-you { background: var(--panel-raised, #16171b); color: var(--text); }
.demo-krate { color: var(--muted); padding-left: 0; }

/* The request types itself: a width animation over a monospace-ish line with
   a blinking caret, restarted each loop. */
.demo-typed {
  display: inline-block; white-space: nowrap; overflow: hidden;
  vertical-align: bottom; max-width: 0;
  animation: demo-type 18s steps(38) infinite;
}
.demo-caret {
  display: inline-block; width: 2px; height: 13px; margin-left: 2px;
  vertical-align: -2px; background: var(--accent);
  animation: demo-blink 1s steps(1) infinite;
}
@keyframes demo-type {
  0% { max-width: 0; }
  12% { max-width: 100%; }
  96% { max-width: 100%; }
  100% { max-width: 100%; }
}
@keyframes demo-blink { 50% { opacity: 0; } }

/* Everything else fades in at its moment of the shared 18s loop, then the
   whole panel resets. d1..d6 are beats, not element types. */
.demo .d1, .demo .d2, .demo .d3, .demo .d4, .demo .d5, .demo .d6 {
  opacity: 0; transform: translateY(6px);
  animation: demo-beat 18s ease infinite;
}
.demo .d1 { animation-delay: 0s; --in: 14%; }
@keyframes demo-beat {
  0%, 13% { opacity: 0; transform: translateY(6px); }
  16%, 96% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}
/* Later beats reuse the same curve, shifted by delay. Negative margins of
   keyframe percentages are not a thing, so each beat gets its own frames. */
.demo .d2 { animation-name: demo-beat2; }
.demo .d3 { animation-name: demo-beat3; }
.demo .d4 { animation-name: demo-beat4; }
.demo .d5 { animation-name: demo-beat5; }
.demo .d6 { animation-name: demo-beat6; }
@keyframes demo-beat2 { 0%, 24% { opacity: 0; transform: translateY(6px); } 27%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes demo-beat3 { 0%, 36% { opacity: 0; transform: translateY(6px); } 39%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes demo-beat4 { 0%, 48% { opacity: 0; transform: translateY(6px); } 51%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes demo-beat5 { 0%, 58% { opacity: 0; transform: translateY(6px); } 62%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes demo-beat6 { 0%, 76% { opacity: 0; transform: translateY(6px); } 80%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.demo-step {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--muted); padding: 5px 0;
}
.demo-step i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--good); flex: none;
}
.demo-done {
  margin-top: 14px; padding: 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg);
  display: flex; flex-direction: column; gap: 4px;
}
.demo-done b { font-size: 14px; }
.demo-done span { color: var(--quiet); font-size: 12px; }
.demo-done em {
  font-style: normal; margin-top: 8px; width: fit-content;
  padding: 6px 14px; border-radius: 999px;
  background: var(--text); color: #0a0a0a; font-size: 12.5px;
}
@media (prefers-reduced-motion: reduce) {
  .demo-typed, .demo-caret,
  .demo .d1, .demo .d2, .demo .d3, .demo .d4, .demo .d5, .demo .d6 {
    animation: none; opacity: 1; transform: none; max-width: 100%;
  }
}

/* ==== studio page v2 ==================================================== */

.st2-hero { padding: 88px 0 80px; text-align: center; }
.st2-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--line-strong, #2e323a); background: var(--panel);
  color: var(--muted); font-size: 12.5px;
  transition: border-color 0.15s ease;
}
.st2-pill:hover { border-color: var(--quiet); }
.st2-pill b {
  color: var(--warn); font-size: 10.5px; letter-spacing: 0.12em; font-weight: 600;
}
.st2-pill span { color: var(--quiet); }
.st2-h1 {
  margin: 28px auto 0; font-size: clamp(36px, 6.4vw, 64px);
  font-weight: 500; line-height: 1.05; letter-spacing: -0.026em;
}
.st2-lede {
  margin: 22px auto 0; max-width: 640px;
  color: var(--muted); font-size: 16.5px; line-height: 1.65;
}
.st2-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.st2-under { margin-top: 14px; color: var(--quiet); font-size: 12.5px; }

/* -- the working product ------------------------------------------------- */
.st2-app {
  margin: 64px auto 0; max-width: 880px; text-align: left;
  border: 1px solid var(--line-strong, #2e323a); border-radius: 14px;
  background: var(--panel); overflow: hidden;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.55);
}
.st2-titlebar {
  display: flex; align-items: center; gap: 7px;
  padding: 13px 15px; border-bottom: 1px solid var(--line);
}
.st2-titlebar .tl { width: 11px; height: 11px; border-radius: 50%; background: var(--line-strong, #2e323a); }
.st2-titlebar b { margin-left: 12px; font-size: 10.5px; letter-spacing: 0.16em; color: var(--quiet); font-weight: 500; }
.st2-panes { display: grid; grid-template-columns: 220px 1fr; min-height: 320px; }
@media (max-width: 640px) { .st2-panes { grid-template-columns: 1fr; } .st2-side { display: none; } }
.st2-side { border-right: 1px solid var(--line); padding: 16px 12px; }
.st2-side-h {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--quiet); padding: 0 8px 10px;
}
.st2-item {
  position: relative;
  padding: 9px 10px; border-radius: 9px; margin-bottom: 2px;
  display: flex; flex-direction: column; gap: 2px;
}
.st2-item:first-of-type { background: var(--panel-raised, #16171b); }
.st2-item b { font-size: 12.5px; font-weight: 500; color: var(--text); }
.st2-item span { font-size: 11px; color: var(--quiet); }
.st2-item.dim b { color: var(--muted); }
/* The two statuses occupy the same line; the beat swaps them. */
.st2-status { position: relative; }
.st2-status.done { position: absolute; left: 10px; bottom: 9px; }
.st2-status.making { color: var(--warn); }
.st2-status.done { color: var(--good); }

.st2-main { padding: 18px 20px; }
.st2-msg {
  font-size: 13px; line-height: 1.55; margin-bottom: 11px;
  width: fit-content; max-width: 92%;
}
.st2-msg.you {
  background: var(--panel-raised, #16171b); color: var(--text);
  padding: 8px 12px; border-radius: 11px;
}
.st2-msg.krate { color: var(--muted); }
.st2-typed {
  display: inline-block; white-space: nowrap; overflow: hidden;
  vertical-align: bottom; max-width: 0;
  animation: st2-type 20s steps(38) infinite;
}
.st2-caret {
  display: inline-block; width: 2px; height: 13px; margin-left: 2px;
  vertical-align: -2px; background: var(--accent);
  animation: st2-blink 1s steps(1) infinite;
}
@keyframes st2-type { 0% { max-width: 0; } 10% { max-width: 100%; } 97% { max-width: 100%; } 100% { max-width: 100%; } }
@keyframes st2-blink { 50% { opacity: 0; } }

.st2-steps { margin: 4px 0 12px; }
.st2-steps p {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: var(--muted); padding: 4px 0;
}
.st2-steps i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); flex: none; }
.st2-card {
  display: flex; flex-direction: column; gap: 3px; width: fit-content;
  margin-bottom: 14px; padding: 13px 16px;
  border: 1px solid var(--line-strong, #2e323a); border-radius: 12px;
  background: var(--bg);
}
.st2-card b { font-size: 13.5px; }
.st2-card span { color: var(--quiet); font-size: 11.5px; }
.st2-card em {
  font-style: normal; margin-top: 7px; width: fit-content;
  padding: 5px 13px; border-radius: 999px;
  background: var(--text); color: #0a0a0a; font-size: 12px;
}

/* One 20s loop; each beat fades in at its moment and everything resets
   together at 97%. */
.b1, .b2, .b3, .b3x, .b4, .b5, .b6 {
  opacity: 0; transform: translateY(5px);
  animation: 20s ease infinite;
}
.b1 { animation-name: st2-b1; } .b2 { animation-name: st2-b2; }
.b3 { animation-name: st2-b3; } .b3x { animation-name: st2-b3x; }
.b4 { animation-name: st2-b4; } .b5 { animation-name: st2-b5; }
.b6 { animation-name: st2-b6; }
@keyframes st2-b1  { 0%, 12% { opacity: 0; transform: translateY(5px); } 15%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes st2-b2  { 0%, 20% { opacity: 0; transform: translateY(5px); } 23%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes st2-b3  { 0%, 30% { opacity: 0; transform: translateY(5px); } 33%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes st2-b3x { 0%, 40% { opacity: 0; transform: translateY(5px); } 43%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes st2-b4  { 0%, 50% { opacity: 0; transform: translateY(5px); } 54%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes st2-b5  { 0%, 68% { opacity: 0; transform: translateY(5px); } 72%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes st2-b6  { 0%, 78% { opacity: 0; transform: translateY(5px); } 82%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* The sidebar "making…" yields to "done" mid-loop. */
.st2-status.making { animation-name: st2-making; }
@keyframes st2-making { 0%, 20% { opacity: 0; } 23%, 49% { opacity: 1; } 52%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .st2-typed, .st2-caret, .b1, .b2, .b3, .b3x, .b4, .b5, .b6, .st2-status.making {
    animation: none; opacity: 1; transform: none; max-width: 100%;
  }
  .st2-status.making { opacity: 0; }
}

/* -- features ------------------------------------------------------------ */
.st2-band { padding: 88px 0; }
.st2-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.st2-feature {
  padding: 26px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel);
}
.st2-feature h2 { font-size: 17px; font-weight: 560; letter-spacing: -0.01em; }
.st2-feature p { margin-top: 9px; color: var(--muted); font-size: 13.5px; line-height: 1.65; }

/* -- download ------------------------------------------------------------ */
.st2-get { padding: 20px 0 88px; }
.st2-get-grid {
  display: grid; gap: 40px; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}
@media (max-width: 760px) { .st2-get-grid { grid-template-columns: 1fr; } }
.st2-get-copy h2 { font-size: clamp(26px, 4vw, 36px); font-weight: 500; letter-spacing: -0.02em; }
.st2-get-copy p { margin-top: 12px; color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 420px; }
.st2-get-cards { display: flex; flex-direction: column; gap: 10px; }
.st2-dl {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; border-radius: 14px; text-decoration: none;
  border: 1px solid var(--line); background: var(--panel);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.st2-dl:hover { border-color: var(--line-strong, #2e323a); transform: translateY(-1px); }
.st2-dl-icon { font-size: 20px; color: var(--text); width: 28px; text-align: center; }
.st2-dl-text { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.st2-dl-text b { color: var(--text); font-size: 14.5px; font-weight: 560; }
.st2-dl-text span { color: var(--quiet); font-size: 12.5px; }
.st2-dl-go { color: var(--quiet); font-size: 15px; }

/* -- faq ----------------------------------------------------------------- */
.st2-faq { padding: 0 0 96px; }
.st2-faq-grid {
  display: grid; gap: 40px; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
}
@media (max-width: 760px) { .st2-faq-grid { grid-template-columns: 1fr; } }
.st2-faq-grid > h2 { font-size: clamp(26px, 4vw, 36px); font-weight: 500; letter-spacing: -0.02em; }

/* -- footer -------------------------------------------------------------- */
.st2-foot { border-top: 1px solid var(--line); padding: 48px 0 64px; }
.st2-foot-grid {
  display: grid; gap: 32px;
  grid-template-columns: 1.4fr repeat(3, 1fr);
}
@media (max-width: 720px) { .st2-foot-grid { grid-template-columns: 1fr 1fr; } }
.st2-foot-brand { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.st2-foot-brand span { color: var(--quiet); font-size: 12.5px; }
.st2-foot-grid p {
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--quiet); margin-bottom: 12px;
}
.st2-foot-grid a {
  display: block; color: var(--muted); text-decoration: none;
  font-size: 13px; padding: 4px 0;
}
.st2-foot-grid a:hover { color: var(--text); }
.st2-tb-right { margin-left: auto; display: flex; gap: 10px; align-items: center; font-style: normal; }
.st2-tb-right u { text-decoration: none; color: var(--quiet); font-size: 11.5px; }
.st2-tb-right u.chip { border: 1px solid var(--line-strong,#2e323a); border-radius: 999px; padding: 3px 10px; color: var(--muted); }
.st2-side { display: flex; flex-direction: column; }
.st2-panes { grid-template-columns: 300px 1fr; }
@media (max-width: 640px) { .st2-side { display: flex; } .st2-panes { grid-template-columns: 1fr; } }

/* ---- sign-in ----------------------------------------------------------- */

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card {
  width: 100%; max-width: 400px; text-align: center;
  padding: 40px 34px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--panel);
}
.login-card h1 { margin-top: 18px; font-size: 24px; font-weight: 560; letter-spacing: -0.015em; }
.login-sub { margin: 10px 0 26px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.btn-login {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 16px; margin-bottom: 10px;
  border-radius: 12px; border: 1px solid var(--line-strong, #2e323a);
  background: var(--text); color: #0a0a0a; text-decoration: none;
  font-size: 14px; font-weight: 520; cursor: pointer;
  transition: transform 0.15s ease;
}
.btn-login:hover { transform: translateY(-1px); }
.btn-login.soon {
  background: none; color: var(--muted); cursor: default; font: inherit; font-size: 14px;
}
.btn-login span, .login-email span {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--quiet); border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 8px; margin-left: 4px;
}
.login-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--quiet); font-size: 11px; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-email { display: flex; gap: 8px; }
.login-email input {
  flex: 1; padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
  font: inherit; font-size: 13.5px;
}
.login-email button {
  padding: 11px 16px; border-radius: 12px; border: 1px solid var(--line);
  background: none; color: var(--muted); font: inherit; font-size: 13.5px;
}
.login-foot { margin-top: 22px; color: var(--quiet); font-size: 12px; line-height: 1.6; }
.st2-dl-primary { border-color: var(--line-strong, #2e323a); background: var(--panel-raised, #16171b); }
.st2-dl-primary .st2-dl-text b { font-size: 15.5px; }
.btn-google { background: var(--panel-raised, #16171b); color: var(--text); }
.login-note { margin-top: 14px; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.hidden { display: none; }

/* ------------------------------------------------------------- receipts */
.benchsec { padding: 96px 0; border-top: 1px solid var(--line); }
.bench-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-top: 40px;
}
@media (max-width: 900px) { .bench-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .bench-grid { grid-template-columns: 1fr; } }
.bench {
  padding: 26px 22px;
  border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.0));
}
.bench-n {
  font-size: 44px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--accent);
  margin-bottom: 6px;
}
.bench b { display: block; font-size: 15px; margin-bottom: 8px; }
.bench span { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.bench-note { margin-top: 26px; font-size: 13px; color: var(--muted); }
.bench-note a { color: inherit; text-decoration: underline; }

/* Hero: the Studio is the front door, in the site's own pill idiom. */
.hero-cta {
  margin: 26px 0 6px;
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.hero-cta .free-note { width: 100%; margin-top: 10px; }
#install { margin-top: 22px; }

/* ------------------------------------------------- the Studio, played small
   One visual idiom for every Studio depiction on the page: the same window
   chrome, rail, stages and cards the real app draws, at postcard size. */
.sframe {
  border: 1px solid var(--line); border-radius: 14px;
  background: #0b0b0e; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  font-size: 12.5px;
}
.sf-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.sf-brand {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; color: var(--text);
}
.sf-brand img { opacity: 0.9; }
.sf-chip {
  margin-left: auto;
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px; font-size: 11px; color: var(--muted);
}
.sf-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
#heroMock .sf-body { min-height: 300px; }

/* Home: headline + composer. */
.sf-home { padding: 40px 28px 28px; text-align: center; }
.sf-title { font-size: 21px; font-weight: 650; letter-spacing: -0.01em; }
.sf-title em { font-style: normal; color: var(--accent); }
.sf-sub { color: var(--muted); margin: 8px 0 22px; }
.sf-composer {
  display: flex; align-items: center; gap: 10px;
  text-align: left;
  border: 1px solid var(--line-strong, var(--line)); border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 12px 12px 12px 16px; min-height: 44px;
}
.sf-typed { flex: 1; white-space: nowrap; overflow: hidden; }
.sf-send {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #0b0d12; font-weight: 700;
  opacity: 0.55; transition: opacity 0.2s, transform 0.2s;
}
.sf-send.go { opacity: 1; transform: scale(1.08); }

/* Session: rail + stage. */
.sf-session { display: grid; grid-template-columns: 46% 54%; min-height: 300px; }
.sf-rail { border-right: 1px solid var(--line); padding: 14px; }
.sf-msg { margin-bottom: 12px; line-height: 1.45; }
.sf-msg span { display: block; font-size: 9.5px; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 3px; }
.sf-msg.k { color: var(--muted); }
.sf-stage { padding: 16px; display: flex; align-items: center; justify-content: center; }
.sf-make { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: rgba(255,255,255,0.02); }
.sf-make-head { display: flex; align-items: center; justify-content: space-between; font-weight: 600; margin-bottom: 10px; }
.sf-live { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.sf-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--good); }
.sf-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.08); overflow: hidden; margin-bottom: 12px; }
.sf-bar i { display: block; height: 100%; width: 6%; border-radius: 2px; background: var(--accent); transition: width 0.9s ease; }
.sf-steps { list-style: none; margin: 0; padding: 0; }
.sf-steps li { padding: 4px 0 4px 20px; position: relative; color: var(--muted); }
.sf-steps li::before {
  content: ""; position: absolute; left: 2px; top: 9px;
  width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--line);
}
.sf-steps li.now { color: var(--text); }
.sf-steps li.now::before { border-color: var(--accent); background: var(--accent); }
.sf-steps li.done { color: var(--muted); }
.sf-steps li.done::before { border-color: var(--good); background: var(--good); }

/* The done card. */
.sf-done { width: 100%; animation: sfRise 0.5s ease both; }
@keyframes sfRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sf-shot { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 10px; background: #101014; }
.sf-shot-title { font-weight: 650; margin-bottom: 8px; }
.sf-shot-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; color: var(--muted); border-top: 1px solid rgba(255,255,255,0.05); }
.sf-shot-row i { width: 7px; height: 7px; border-radius: 2px; background: var(--accent); opacity: 0.7; }
.sf-shot-row b { margin-left: auto; font-weight: 500; font-size: 11px; }
.sf-file b { display: block; }
.sf-file span { color: var(--muted); font-size: 11.5px; }
.sf-asks { margin: 8px 0 10px; font-size: 11.5px; color: var(--muted); }
.sf-asks em { font-style: normal; border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; margin-right: 6px; font-size: 10px; }
.sf-btns { display: flex; gap: 8px; }
.sf-btns span { border-radius: 999px; padding: 6px 14px; font-size: 12px; }
.sf-b1 { background: #fff; color: #0a0a0a; font-weight: 600; }
.sf-b2 { border: 1px solid var(--line); color: var(--text); }

/* The consent dialog pane. */
.sf-consent { text-align: center; }
.sf-consent-card {
  display: inline-block; text-align: center;
  border: 1px solid var(--line); border-radius: 14px;
  background: #0e0e12; padding: 26px 30px 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.sf-consent-card img { opacity: 0.9; margin-bottom: 10px; }
.sf-consent-card b { display: block; font-size: 15px; margin-bottom: 12px; }
.sf-consent-card p { color: var(--muted); font-size: 12.5px; margin: 0 0 6px; }
.sf-consent-card ul { list-style: none; padding: 0; margin: 0 0 10px; }
.sf-consent-card li { padding: 3px 0; font-size: 13px; }
.sf-consent-note { max-width: 260px; margin: 0 auto 14px !important; }
.sf-consent-btns { display: flex; gap: 8px; justify-content: center; }
.sf-consent-btns span { border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px; font-size: 12.5px; color: var(--muted); }
.sf-consent-btns b { background: #fff; color: #0a0a0a; border-radius: 999px; padding: 6px 16px; font-size: 12.5px; }
.sf-caption { margin-top: 16px; color: var(--muted); font-size: 12.5px; max-width: 380px; margin-left: auto; margin-right: auto; text-align: center; }

/* The file card pane. */
.sf-filecard {
  text-align: center; border: 1px solid var(--line); border-radius: 14px;
  background: #0e0e12; padding: 30px 26px 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.sf-fileicon { margin-bottom: 8px; }
.sf-filecard > b { display: block; font-size: 15px; }
.sf-filecard > span { color: var(--muted); font-size: 12px; }
.sf-oses { display: flex; gap: 8px; justify-content: center; margin: 14px 0 4px; }
.sf-oses em { font-style: normal; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 12px; }
.sf-oses i { color: var(--good); font-style: normal; margin-right: 4px; }

/* The publish pane. */
.sf-publish {
  border: 1px solid var(--line); border-radius: 14px;
  background: #0e0e12; padding: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.sf-pubrow { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.sf-pubrow .ok { color: var(--good); font-style: normal; }
.sf-pubrow span { margin-left: auto; color: var(--muted); font-weight: 400; font-size: 12px; }
.sf-publink {
  display: flex; align-items: center; margin: 12px 0;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.sf-publink span { flex: 1; padding: 9px 12px; font-family: var(--mono, monospace); font-size: 12px; color: var(--accent); }
.sf-publink em { font-style: normal; padding: 9px 14px; border-left: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.sf-pubnote { color: var(--muted); font-size: 12.5px; margin-bottom: 14px; }
.sf-pubgallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sf-pubapp { border: 1px solid var(--line); border-radius: 10px; padding: 10px; font-size: 11px; color: var(--muted); }
.sf-pubapp i { display: block; height: 34px; border-radius: 6px; margin-bottom: 6px;
  background: linear-gradient(135deg, rgba(98,145,255,0.25), rgba(255,255,255,0.05)); }
@media (max-width: 900px) { .sf-session { grid-template-columns: 1fr; } .sf-rail { border-right: none; border-bottom: 1px solid var(--line); } }
/* The hidden attribute must always win over component display values. */
.sframe [hidden] { display: none !important; }

/* Sticky panes: one Studio window, full stage, every feature. */
.stick .sframe { height: 100%; display: flex; flex-direction: column; }
.stick .sf-body { flex: 1; display: flex; min-height: 0; }
.stick .sf-session { flex: 1; min-height: 0; }
.sf-body.sf-center { display: grid; place-items: center; padding: 24px; }
.sf-dim { background: radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.02), transparent); }
.sf-consent-card { max-width: 320px; }
.sf-filecard, .sf-publish { box-shadow: none; border: none; background: transparent; }
.sf-filecard { padding: 0; }
.sf-publish { padding: 0; width: min(420px, 92%); }
.sf-btns-center { justify-content: center; margin-top: 14px; }
@media (prefers-reduced-motion: reduce) {
  .rot .word span { animation: none; }
}

/* ------------------------------------------------------------------ bento */
.bento { padding: 96px 0; border-top: 1px solid var(--line); }
.bento-h { text-align: center; margin-bottom: 42px; font-size: 34px; }
.bento-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "tall a b" "tall wide wide";
}
.bento-card {
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008));
  padding: 26px;
}
.bento-tall { grid-area: tall; display: flex; flex-direction: column; }
.bento-wide { grid-area: wide; display: flex; gap: 22px; align-items: flex-start; }
.bento-card b { display: block; font-size: 16.5px; margin-bottom: 8px; }
.bento-card p { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 0; }
.bento-card p a { color: inherit; text-decoration: underline; }
.bento-n {
  font-size: 52px; font-weight: 700; letter-spacing: -0.03em;
  color: var(--text); margin-bottom: 6px; line-height: 1;
}
.bento-wide .bento-n { flex: none; margin-bottom: 0; }
/* The memory story, as two bars. */
.bento-bars {
  flex: 1; display: flex; gap: 26px; align-items: flex-end;
  justify-content: center; margin-top: 28px; min-height: 220px;
}
.bb { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.bb i {
  display: block; width: 58px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
  min-height: 12px;
}
.bb:last-child i { background: linear-gradient(180deg, var(--accent), rgba(98,145,255,0.4)); }
.bb span { margin-top: 10px; font-weight: 650; font-size: 14px; }
.bb em { font-style: normal; color: var(--muted); font-size: 12px; }
/* Even frame ticks: what no-jitter looks like. */
.bento-wave { display: flex; gap: 7px; align-items: center; margin: 14px 0; }
.bento-wave i { width: 3px; height: 22px; border-radius: 2px; background: var(--accent); opacity: 0.85; }
.bento-wave i:nth-child(odd) { height: 22px; }
@media (max-width: 900px) {
  .bento-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "tall a" "tall b" "wide wide"; }
}
@media (max-width: 600px) {
  .bento-grid { grid-template-columns: 1fr; grid-template-areas: "tall" "a" "b" "wide"; }
  .bento-wide { flex-direction: column; }
}