/* decaframe.com — the Deca theme's own values (packages/decaframe/src/theme/decaframe.json,
   compiled by `pnpm theme`). One ink, no brand hue; Geist and Geist Mono. Dark follows the OS. */
:root {
  --bg: #f7f5f1; --bg-subtle: #ebe7e3; --bg-muted: #dfdbd5;
  --fg: #1d1a16; --fg-muted: #5b5753; --fg-faint: #82807d;
  --rule: #d7d4cf; --rule-strong: #b1ada9;
  --accent: #13110f; --on-accent: #f7f4f2;
  --shadow: 0 1px 2px rgba(19,17,15,.05), 0 12px 32px -12px rgba(19,17,15,.18);
  --shadow-lift: 0 2px 4px rgba(19,17,15,.06), 0 28px 60px -20px rgba(19,17,15,.28);
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --frame: 1280px; --pad: 84px;
  --corner-sm: 6px; --corner-md: 12px; --corner-lg: 20px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e1d1a; --bg-subtle: #2c2a26; --bg-muted: #393632;
    --fg: #eae7e4; --fg-muted: #adaaa7; --fg-faint: #767471;
    --rule: #33302c; --rule-strong: #524f4b;
    --accent: #eae7e4; --on-accent: #13110f;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6);
    --shadow-lift: 0 2px 4px rgba(0,0,0,.4), 0 28px 60px -20px rgba(0,0,0,.7);
  }
}

* { box-sizing: border-box; }
html { scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 2px; }
.frame { max-width: var(--frame); margin-inline: auto; padding-inline: var(--pad); }

/* bar */
.bar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--rule);
}
.bar-in { display: flex; align-items: center; gap: 28px; height: 66px; }
.lockup { display: flex; align-items: center; gap: 9px; text-decoration: none; margin-right: auto; }
.lockup svg { display: block; width: 26px; height: auto; fill: var(--fg); }
.lockup b { font-weight: 600; font-size: 18px; letter-spacing: -0.045em; }
.bar nav { display: flex; align-items: center; gap: 26px; }
.bar nav a { text-decoration: none; color: var(--fg-muted); font-size: 15px; }
.bar nav a:hover { color: var(--fg); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 15px; font-weight: 500;
  padding: 9px 17px; border-radius: var(--corner-sm);
  text-decoration: none; border: 1px solid transparent; white-space: nowrap; cursor: pointer;
}
.btn-solid { background: var(--accent); color: var(--on-accent); }
.btn-solid:hover { background: color-mix(in oklab, var(--accent) 84%, var(--bg)); }
.btn-line { border-color: var(--rule-strong); color: var(--fg); background: transparent; }
.btn-line:hover { border-color: var(--fg); }
.btn-lg { font-size: 16px; padding: 13px 24px; }

/* hero: short text, then the deck at full width, cut by the fold */
.hero { padding-top: 60px; }
h1 {
  font-size: clamp(36px, 4.8vw, 62px);
  font-weight: 600; line-height: 1.04; letter-spacing: -0.035em;
  margin: 0; max-width: 17ch; text-wrap: balance;
}
.lede { margin: 20px 0 0; font-size: 19px; line-height: 1.5; color: var(--fg-muted); max-width: 54ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; align-items: center; }
.cta-note { font-size: 14px; color: var(--fg-faint); margin: 0 0 0 6px; }
.hero-sheet { margin-top: 48px; }

.sheet {
  display: block; width: 100%; aspect-ratio: 16/9;
  border-radius: var(--corner-lg); overflow: hidden;
  box-shadow: var(--shadow-lift); background: var(--bg-subtle);
}
.sheet img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* a screenshot of the app, not a 16:9 page: its own ratio, so nothing is cropped off */
.sheet-app { aspect-ratio: auto; border: 1px solid var(--rule); box-shadow: var(--shadow); }
.sheet-app img { height: auto; object-fit: fill; }
.caption { margin: 16px 0 0; font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; color: var(--fg-faint); }

section { padding-block: 118px; }
.band { background: var(--bg-subtle); }
.band-dark {
  background: #13110f; color: #f7f4f2;
  --fg: #f7f4f2; --fg-muted: #a9a5a0; --fg-faint: #86827d;
  --rule: #2c2a27; --rule-strong: #45423e;
  --accent: #f7f4f2; --on-accent: #13110f; --bg-muted: #201e1b; --bg-subtle: #201e1b;
}
h2 {
  font-size: clamp(29px, 4vw, 45px);
  font-weight: 600; line-height: 1.09; letter-spacing: -0.03em;
  margin: 0; max-width: 21ch; text-wrap: balance;
}
.stub { display: block; width: 62px; height: 3px; background: var(--fg); margin: 26px 0 0; }
.say { font-size: clamp(17px, 1.8vw, 19px); color: var(--fg-muted); max-width: 60ch; margin: 30px 0 0; }
.say + .say { margin-top: 18px; }
.say-note { font-size: 15px; color: var(--fg-faint); max-width: 60ch; margin: 22px 0 0; }

.show { margin-top: 92px; display: grid; gap: 84px; }
.show-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; align-items: center; }
.show-row:nth-child(even) { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.show-row:nth-child(even) > figure { order: 2; }
.show-row figure { margin: 0; }
.show-row .sheet { border-radius: var(--corner-md); box-shadow: var(--shadow); }
.show-row h3 { margin: 0; font-size: 25px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.15; text-wrap: balance; }
.show-row p { margin: 14px 0 0; font-size: 16px; color: var(--fg-muted); }

.steps { display: grid; gap: 0; margin-top: 58px; }
.step {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: 56px; padding-block: 44px; border-top: 1px solid var(--rule); align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--rule); }
.step-n { font-family: var(--mono); font-size: 13px; color: var(--fg-faint); margin: 0 0 10px; }
.step h3 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.15; }
.step p { margin: 0; color: var(--fg-muted); font-size: 16px; }
.step p + p { margin-top: 14px; }
.code {
  font-family: var(--mono); font-size: 13.5px;
  background: var(--bg-muted); border: 1px solid var(--rule);
  border-radius: var(--corner-sm); padding: 11px 14px;
  display: block; overflow-x: auto; white-space: pre; color: var(--fg);
}
.code-label { font-family: var(--mono); font-size: 12px; color: var(--fg-faint); margin: 24px 0 8px; }
.code + p { margin-top: 20px; }

.rows { margin-top: 60px; border-top: 1px solid var(--rule); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 40px; padding-block: 30px; border-bottom: 1px solid var(--rule); }
.row dt { font-size: 19px; font-weight: 500; letter-spacing: -0.015em; margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.row dd { margin: 0; color: var(--fg-muted); font-size: 16px; }
.soon {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-faint); border: 1px solid var(--rule-strong); border-radius: 999px;
  padding: 2px 8px; white-space: nowrap; font-weight: 400;
}

/* pricing: two plans, the same tokens, no colour of their own */
.plans-top { padding-top: 76px; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 54px; }
.plan {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule); border-radius: var(--corner-lg);
  background: var(--bg-subtle); padding: 34px 32px 36px;
}
.plan-now { border-color: var(--rule-strong); box-shadow: var(--shadow); }
.plan-name { margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted); display: flex; align-items: center; gap: 10px; }
/* one line box in both cards, so the line under the price sits at the same height in each */
.plan-price { margin: 16px 0 0; font-size: 46px; font-weight: 600; letter-spacing: -0.035em; line-height: 48px; }
.plan-price-tbd { font-size: 28px; color: var(--fg-muted); letter-spacing: -0.02em; }
.plan-sub { margin: 12px 0 0; font-size: 16px; color: var(--fg-muted); }
.plan-list { list-style: none; margin: 26px 0 34px; padding: 26px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 12px; font-size: 16px; color: var(--fg-muted); }
.plan-list li { position: relative; padding-left: 28px; }
.plan-list li::before {
  content: ''; position: absolute; left: 3px; top: .34em;
  width: 11px; height: 6px; border-left: 1.5px solid var(--fg); border-bottom: 1.5px solid var(--fg);
  transform: rotate(-45deg);
}
.plan-list-next li::before {
  width: 9px; height: 9px; top: .42em; left: 4px; transform: none;
  border: 1.5px solid var(--fg-faint); border-radius: 999px;
}
.plan .btn { margin-top: auto; align-self: start; }
.plan-note { margin: 14px 0 0; font-size: 14.5px; color: var(--fg-faint); }
.plans + .say-note { margin-top: 30px; }

footer { border-top: 1px solid var(--rule); padding-block: 60px 70px; font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.foot-grid h4 { margin: 0 0 14px; font-size: 13px; font-weight: 500; color: var(--fg-faint); font-family: var(--mono); letter-spacing: .02em; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot-grid a { color: var(--fg-muted); text-decoration: none; }
.foot-grid a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.foot-line { color: var(--fg-muted); max-width: 34ch; margin: 0; }
.fine { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 13px; color: var(--fg-faint); }

/* legal + contact */
.doc { padding-block: 92px 116px; }
.doc > * { max-width: 860px; }
.kicker { font-family: var(--mono); font-size: 12px; color: var(--fg-faint); margin: 0 0 20px; }
.doc-h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 600; letter-spacing: -0.032em; line-height: 1.05; margin: 0; }
.doc-date { font-family: var(--mono); font-size: 12.5px; color: var(--fg-faint); margin: 16px 0 0; }
.doc-lede { font-size: 20px; line-height: 1.5; color: var(--fg); margin: 40px 0 0; max-width: 58ch; padding-left: 22px; border-left: 3px solid var(--fg); }
.doc-h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin: 56px 0 0; }
.doc p { font-size: 16.5px; color: var(--fg-muted); margin: 18px 0 0; max-width: 68ch; }
.doc .doc-lede { color: var(--fg); }
.doc strong { color: var(--fg); font-weight: 500; }
.doc code { font-family: var(--mono); font-size: .88em; background: var(--bg-subtle); border: 1px solid var(--rule); border-radius: 4px; padding: 1px 5px; color: var(--fg); }
.doc a { color: var(--fg); text-underline-offset: 3px; }
.doc-list { margin: 18px 0 0; padding-left: 22px; max-width: 68ch; color: var(--fg-muted); font-size: 16.5px; }
.doc-list li { margin-top: 9px; }
.doc .rows { margin-top: 26px; max-width: 860px; }
.rows.tight .row { padding-block: 20px; }
.rows.tight dt { font-size: 16.5px; }
.rows.tight dd { font-size: 16px; }
.doc-legal { font-size: 15px !important; }
.doc-foot { margin-top: 60px !important; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 14.5px !important; }

.form { margin-top: 44px; max-width: 560px; display: grid; gap: 22px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 14.5px; font-weight: 500; }
.field input, .field textarea, .field select {
  font: inherit; font-size: 16px; color: var(--fg);
  background: var(--bg); border: 1px solid var(--rule-strong);
  border-radius: var(--corner-sm); padding: 11px 13px; width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--fg); outline-offset: 1px; border-color: var(--fg); }
.field small { font-size: 13px; color: var(--fg-faint); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice { margin: 0; padding: 14px 16px; border-radius: var(--corner-sm); border: 1px solid var(--rule-strong); background: var(--bg-subtle); font-size: 15.5px; color: var(--fg); max-width: 560px; }
.notice[hidden] { display: none; }

@media (max-width: 900px) {
  :root { --pad: 26px; }
  section { padding-block: 80px; }
  .hero { padding-top: 44px; }
  .hero-sheet { margin-top: 36px; }
  .show { margin-top: 60px; gap: 56px; }
  .show-row, .show-row:nth-child(even) { grid-template-columns: 1fr; gap: 22px; }
  .show-row:nth-child(even) > figure { order: 0; }
  .step { grid-template-columns: 1fr; gap: 20px; padding-block: 32px; }
  .row { grid-template-columns: 1fr; gap: 8px; }
  .plans { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
  .plans-top { padding-top: 52px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .doc { padding-block: 56px 80px; }
  .bar nav { display: none; }
}
@media (max-width: 620px) {
  .bar-in { gap: 10px; height: 60px; }
  .lockup svg { width: 22px; }
  .lockup b { font-size: 16px; }
  .btn { font-size: 13.5px; padding: 8px 12px; }
  .caption { font-size: 11.5px; }
  .cta-row .btn-lg { flex: 1 1 auto; }
  .cta-note { margin: 4px 0 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ─────────────────────────────────────────────────────────────── the install page
   A rail of agents, one panel beside it. Every panel is in the DOM; `.ag-live` is added by the
   script, so with JavaScript off the rail is a table of contents and the panels are all shown. */
.ag-runs {
  border: 1px solid var(--rule); border-radius: var(--corner-md);
  background: var(--bg-subtle); padding: 20px 24px; margin: 26px 0 18px; max-width: 760px;
}
.ag-runs p { margin: 0 0 10px; }
.ag-runs ul { margin: 0; padding-left: 20px; color: var(--fg-muted); font-size: 15.5px; }
.ag-runs li { margin: 4px 0; }
.ag-need { color: var(--fg-muted); font-size: 15.5px; max-width: 760px; }

.ag-wrap { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 44px; align-items: start; padding-bottom: 40px; }
/* ★ THE RAIL SCROLLS ITSELF. Twenty-three rows are taller than a three-step panel, and a rail that
   drives the page height leaves half a screen of nothing beside the shortest panels. Capping it to
   the window makes the PANEL the height of the page, which is what the reader came for. */
.ag-rail {
  position: sticky; top: 90px; display: flex; flex-direction: column; gap: 1px;
  max-height: calc(100vh - 118px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; padding-right: 4px;
}
.ag-group {
  margin: 20px 0 7px; font-size: 12px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--fg-faint);
}
.ag-group:first-child { margin-top: 0; }
.ag-row {
  display: flex; align-items: center; gap: 11px; padding: 8px 11px;
  border-radius: var(--corner-sm); text-decoration: none; color: var(--fg-muted); font-size: 15px;
}
.ag-row:hover { background: var(--bg-subtle); color: var(--fg); }
.ag-row[aria-current='true'] { background: var(--bg-muted); color: var(--fg); font-weight: 500; }
.ag-row-name { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ag-row-name em { font-style: normal; font-size: 12px; color: var(--fg-faint); }
.ag-mark { flex: none; width: 19px; height: 19px; fill: currentColor; opacity: .82; }
.ag-letter {
  display: grid; place-items: center; border: 1px solid var(--rule-strong);
  border-radius: 5px; font-size: 11px; font-weight: 600; opacity: .75;
}

.ag-panel { max-width: 720px; }
.ag-panel + .ag-panel { margin-top: 56px; }
.ag-live .ag-panel + .ag-panel { margin-top: 0; }
.ag-panel h2 { font-size: 27px; letter-spacing: -0.03em; margin: 0 0 18px; }
.ag-note { font-size: 15px; font-weight: 400; color: var(--fg-faint); letter-spacing: 0; }
.ag-say { margin: 0 0 16px; color: var(--fg-muted); }
.ag-say b { color: var(--fg); font-weight: 500; }
.ag-block { margin: 0 0 18px; }
.ag-label { margin: 0 0 7px; font-size: 13.5px; color: var(--fg-faint); }
.ag-label code, .ag-say code { font-family: var(--mono); font-size: .92em; color: var(--fg-muted); }
.ag-code { position: relative; }
.ag-code pre {
  margin: 0; padding: 14px 74px 14px 16px; overflow-x: auto;
  background: var(--bg-subtle); border: 1px solid var(--rule); border-radius: var(--corner-sm);
  font-family: var(--mono); font-size: 13.5px; line-height: 1.65; white-space: pre;
}
.ag-copy {
  position: absolute; top: 9px; right: 9px; font: inherit; font-size: 12.5px;
  padding: 4px 11px; border-radius: 5px; cursor: pointer;
  background: var(--bg); color: var(--fg-muted); border: 1px solid var(--rule-strong);
}
.ag-copy:hover { color: var(--fg); }
.ag-lands { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 15px; color: var(--fg-muted); }
.ag-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 24px; }
.ag-fine { margin-top: 28px; font-size: 14px; color: var(--fg-faint); }

/* the front page's row of agents */
.picks { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0 6px; }
.pick {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--bg);
  text-decoration: none; color: var(--fg-muted); font-size: 14.5px; white-space: nowrap;
}
.pick:hover { border-color: var(--rule-strong); color: var(--fg); }
.pick .ag-mark { width: 16px; height: 16px; }
.pick .ag-letter { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .ag-wrap { grid-template-columns: 1fr; gap: 24px; }
  .ag-rail { position: static; flex-direction: row; flex-wrap: wrap; gap: 7px; max-height: none; overflow: visible; padding-right: 0; }
  .ag-group { width: 100%; margin: 12px 0 2px; }
  .ag-row { border: 1px solid var(--rule); border-radius: 999px; padding: 7px 13px; }
  .ag-row-name em { display: none; }
}

/* `section` carries 118px top and bottom; the install page is a list to work through, so its three
   sections sit closer together than a marketing band does. */
.ag-top { padding-block: 76px 30px; }
.ag-wrap { padding-block: 0 96px; }
/* and the panel column keeps a floor so the band below never rides up under a one-step panel */
.ag-live .ag-panels { min-height: 460px; }