/*
  bunso.css — one stylesheet for the whole site.

  Ported from the Design Composer document "MyBunso Landing v2.dc.html", which
  carried ~90 inline style attributes and a `style-hover` attribute that only
  the Design Composer host understands. Inline styles cannot express :hover,
  :focus-visible, prefers-color-scheme or a media query, and this site needs
  all four, so every one of them became a class here. The dark values are the
  design's, unchanged.

  The light palette is NOT from the design — the design is dark-only. It is
  derived from the same warm hue family and every pair was contrast-checked,
  not eyeballed. Expect a design pass on it.

  No CSS framework, no build step, no @import.
*/

/* ---------------------------------------------------------------- tokens --- */
/* Light is the bare :root so nothing depends on a media query to have colour. */
:root {
  --bg: #faf4f0;
  --surface: #fffdfc;
  --surface-2: #f2e7e0;
  --ink: #241813;
  --ink-dim: #55433b;
  --ink-faint: #6f5c53;
  --ink-mute: #7d6a61;
  --line: rgba(70, 38, 25, 0.16);
  --line-soft: rgba(70, 38, 25, 0.09);

  --accent: #b03e17;
  --accent-hi: #8c2f0f;
  --accent-wash: rgba(176, 62, 23, 0.07);
  --accent-edge: rgba(176, 62, 23, 0.28);
  --on-accent: #fff7f3;

  --good: #0c6b3d;
  --good-wash: rgba(12, 107, 61, 0.06);
  --good-edge: rgba(12, 107, 61, 0.3);
  --warn: #7a4d00;
  --bad: #a52218;
  --bad-wash: rgba(165, 34, 24, 0.05);

  --visor: #100f18;
  --shell: #4c4356;
  --shell-dim: #5b5268;

  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 28px;
  --r-2xl: 34px;

  --display: "Bricolage Grotesque", ui-sans-serif, -apple-system, system-ui, sans-serif;
  --text: "Instrument Sans", ui-sans-serif, -apple-system, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --shell-w: 1160px;
  --gutter: 32px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17100e;
    --surface: #1e1614;
    --surface-2: #241a17;
    --ink: #f6ece6;
    --ink-dim: #c8b3a9;
    --ink-faint: #9c8a81;
    /* Was #8d7c74, which cleared AA on --bg (4.72) but not on the --surface
       bands (4.46). Footnotes use this colour and several sit inside a band.
       #97857c clears 4.5 on all three dark surfaces with headroom. */
    --ink-mute: #97857c;
    --line: rgba(255, 214, 190, 0.13);
    --line-soft: rgba(255, 214, 190, 0.09);

    --accent: #ff8f6b;
    --accent-hi: #ffa483;
    --accent-wash: rgba(255, 143, 107, 0.08);
    --accent-edge: rgba(255, 143, 107, 0.4);
    --on-accent: #231411;

    --good: #6fdc9f;
    --good-wash: rgba(111, 220, 159, 0.05);
    --good-edge: rgba(111, 220, 159, 0.3);
    --warn: #f5c451;
    --bad: #e08a8a;
    --bad-wash: rgba(224, 106, 106, 0.05);
  }
}

/* ------------------------------------------------------------------ base --- */
* { box-sizing: border-box; }

html { background: var(--bg); }

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

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

:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

img { max-width: 100%; }

h1, h2, h3 {
  font-family: var(--display);
  letter-spacing: -0.03em;
  text-wrap: pretty;
  margin: 0;
}

p { text-wrap: pretty; }

.shell {
  max-width: var(--shell-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--on-accent);
  padding: 10px 16px;
  border-radius: 0 0 var(--r-sm) 0;
  z-index: 10;
  font-weight: 600;
}
.skip:focus { left: 0; text-decoration: none; }

/* Anything still unresolved is marked, visibly, rather than quietly shipped.
   Grep for "flag" before launch and every open question is in front of you. */
.flag {
  border-bottom: 1px dashed var(--warn);
  color: var(--warn);
}
.note-flag {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--warn);
  border-left: 2px dashed var(--warn);
  padding-left: 14px;
  margin: 12px 0 0;
}

/* ---------------------------------------------------------------- header --- */
.site-head {
  max-width: var(--shell-w);
  margin: 0 auto;
  padding: 26px var(--gutter) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
}
.wordmark:hover { text-decoration: none; color: var(--ink); }
.wordmark span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18.5px;
  letter-spacing: -0.02em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 15px;
  flex-wrap: wrap;
}
.site-nav a { color: var(--ink-dim); }
.site-nav a:hover { color: var(--ink); }

/* The download pill is an <a> inside .site-nav, so the two rules above —
   (0,1,1) — outrank `.btn-pill` at (0,1,0) and repaint its label in body text
   colour. On the accent fill that is dark-on-orange and unreadable in light
   mode. These three restate the pill's own colours at a specificity that wins,
   including the disabled state, which must NOT get on-accent text because its
   fill is transparent. */
.site-nav .btn-pill,
.site-nav .btn-pill:hover { color: var(--on-accent); }
.site-nav .btn-pill[aria-disabled="true"] { color: var(--ink-mute); }

/* ---------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  padding: 15px 25px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
}
.btn-solid {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 14px 34px var(--accent-wash);
}
.btn-solid:hover { background: var(--accent-hi); color: var(--on-accent); text-decoration: none; }
.btn-solid svg { fill: currentColor; }
.btn-ghost {
  border-color: var(--line);
  color: var(--ink);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--accent-edge); color: var(--ink); text-decoration: none; }
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--text);
  font-weight: 600;
  font-size: 15px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
}

/* The Apple mark, on every download button and only on download buttons.
   currentColor so it tracks the button's text in both themes and in the
   disabled state. */
.apple {
  width: 15px;
  height: 18px;
  fill: currentColor;
  flex: none;
}
.btn-pill .apple { width: 13px; height: 15px; }
.btn-pill:hover { background: var(--accent-hi); color: var(--on-accent); text-decoration: none; }
.btn-block { display: flex; width: 100%; }

/* A control whose destination does not exist yet. It must never look live:
   no pointer, no hover lift, and a sibling line saying why. */
.btn[aria-disabled="true"],
.btn-pill[aria-disabled="true"] {
  background: transparent;
  color: var(--ink-mute);
  border: 1px dashed var(--line);
  box-shadow: none;
  cursor: not-allowed;
}
.btn[aria-disabled="true"]:hover,
.btn-pill[aria-disabled="true"]:hover {
  background: transparent;
  color: var(--ink-mute);
  text-decoration: none;
}
.why {
  display: block;
  font-family: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--warn);
  margin: 8px 0 0;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  margin: 32px 0 0;
}
.cta-row > div { display: flex; flex-direction: column; }

/* ------------------------------------------------------------------- hero -- */
.hero { padding-top: 64px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--accent-edge);
  background: var(--accent-wash);
  color: var(--accent);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 13.5px;
  font-weight: 500;
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--good);
  box-shadow: 0 0 10px var(--good);
  flex: none;
}

.hero h1 {
  font-weight: 800;
  font-size: clamp(34px, 5.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 24px 0 0;
}
.lede {
  font-size: clamp(17px, 1.6vw, 19.5px);
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 20px 0 0;
  max-width: 30em;
}
.meta {
  font-size: 14.5px;
  color: var(--ink-mute);
  margin: 14px 0 0;
}

.screen-frame {
  position: relative;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 12px;
}
.screen {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  background: radial-gradient(120% 90% at 50% 15%, var(--surface-2), var(--bg) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.screen .bot { width: 56%; height: auto; }
/* The hero film fills the same frame the mascot placeholder used to. */
video.screen {
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--visor);
}
.chip {
  position: absolute;
  bottom: 26px;
  left: 26px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 13px;
  font-size: 13.5px;
  color: var(--ink-dim);
  backdrop-filter: blur(6px);
}
kbd {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 7px;
  color: var(--ink);
}
figure { margin: 0; }
figcaption {
  font-size: 14.5px;
  color: var(--ink-mute);
  margin: 12px 4px 0;
  line-height: 1.5;
}

/* ---------------------------------------------------------------- layout --- */
.band {
  margin: 96px 0 0;
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 80px 0;
}
.band > .shell { padding-top: 0; padding-bottom: 0; }
.slab { padding-top: 80px; }

.eyebrow {
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warn);
  font-weight: 600;
}
.h2 { font-weight: 700; font-size: clamp(28px, 3.4vw, 42px); }
.h2-sm { font-weight: 700; font-size: clamp(26px, 3vw, 38px); }
.sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-dim);
  margin: 14px 0 0;
  max-width: 44em;
}

.split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* -------------------------------------------------------------- the demo --- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab {
  font-family: var(--text);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-faint);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] {
  border-color: var(--accent-edge);
  background: var(--accent-wash);
  color: var(--accent);
}

.panel {
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--r-lg);
  padding: 32px;
}
.panel-good { border-color: var(--good-edge); background: var(--good-wash); }
.panel-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}
.panel-good .panel-label { color: var(--good); }
.panel-label .pip {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: currentColor;
  flex: none;
}
.said {
  font-family: var(--mono);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.7;
  color: var(--ink);
  margin: 22px 0 0;
}
.landed {
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.65;
  color: var(--ink);
  margin: 22px 0 0;
}

.aside {
  margin: 36px 0 0;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--r-lg);
  padding: 28px 30px;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Set explicitly because this badge sits inside a display-face heading and
     would otherwise inherit Bricolage's weight and tracking. */
  font-family: var(--text);
  vertical-align: middle;
  position: relative;
  top: -1px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 999px;
  padding: 4px 10px;
}
.tag-warn { background: var(--warn); color: var(--bg); }
@media (prefers-color-scheme: dark) { .tag-warn { color: #231411; } }

/* ---------------------------------------------------------- window cards -- */
.win {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.win-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.win-bar i {
  width: 11px;
  height: 11px;
  border-radius: 99px;
  flex: none;
}
.win-bar .r { background: var(--bad); }
.win-bar .y { background: var(--warn); }
.win-bar .g { background: var(--good); }
.win-bar b {
  font-size: 13.5px;
  color: var(--ink-faint);
  font-weight: 400;
  margin-left: 8px;
}
.win-body { padding: 26px; font-size: 18px; line-height: 1.65; color: var(--ink); }
.win-body.code { font-family: var(--mono); font-size: 16.5px; line-height: 1.7; color: var(--good); }

/* ----------------------------------------------------------------- tables -- */
.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg);
}
/* Wide content scrolls inside its own box; the page body never scrolls sideways. */
.table-scroll { overflow-x: auto; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 16.5px;
  min-width: 640px;
}
table.data caption {
  text-align: left;
  padding: 16px 24px 0;
  font-size: 14.5px;
  color: var(--ink-mute);
  line-height: 1.5;
}
table.data thead tr { background: var(--surface); }
.band table.data thead tr { background: var(--surface-2); }
table.data th {
  text-align: left;
  padding: 16px 24px;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
table.data td {
  padding: 18px 24px;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-dim);
  vertical-align: top;
}
table.data th[scope="row"] {
  padding: 18px 24px;
  border-top: 1px solid var(--line-soft);
  color: var(--ink);
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}
/* These MUST stay qualified with `table.data`. A bare `td.num` scores (0,1,1)
   and loses to the `table.data td` rule above at (0,1,2), which silently
   repaints every result cell the same body colour and throws away the
   green/amber/red meaning the table is built on. */
table.data td.num { font-family: var(--mono); color: var(--good); white-space: nowrap; }
table.data td.num-bad { font-family: var(--mono); color: var(--bad); white-space: nowrap; }
table.data tr.lost { background: var(--bad-wash); }
/* Verbatim transcript tables. These hold whole sentences per cell, so they get
   a floor width and scroll inside `.table-scroll` rather than compressing into
   a column of one word per line. Overrides `.doc table.data`'s 440px. */
.doc table.data.transcripts { min-width: 680px; }
.doc table.data.transcripts th[scope="row"] { font-weight: 400; }
/* Section headers inside the thirty-row table on /vs/apple-dictation. Qualified
   with `table.data` for the same reason as the rules above — a bare `tr.group
   th` would lose to `table.data th`. */
table.data tr.group th {
  padding: 26px 24px 8px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: left;
}
table.data td.yes { color: var(--good); font-weight: 600; }
table.data td.part { color: var(--warn); font-weight: 600; }
.footnote {
  font-size: 14.5px;
  margin: 14px 0 0;
  color: var(--ink-mute);
  line-height: 1.55;
}

/* ----------------------------------------------------------------- plans --- */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.plan {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 34px;
}
.plan-go {
  border-color: var(--accent-edge);
  background: linear-gradient(165deg, var(--accent-wash), var(--surface));
}
.plan h3 { font-weight: 700; font-size: 24px; letter-spacing: -0.02em; }
.plan-go h3 { color: var(--accent); }
.plan p { font-size: 16px; line-height: 1.55; color: var(--ink-faint); margin: 10px 0 0; }
.plan-go p { color: var(--ink-dim); }
/* Two classes, so this outranks `.plan p` above — the price is a <p>, and the
   generic rule would otherwise flatten it to body size. */
.plan .price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 14px 0 0;
}
.ticks {
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink-dim);
}
.ticks li { display: flex; gap: 11px; align-items: flex-start; }
.ticks li::before { content: "✓"; color: var(--good); flex: none; }
.ticks-go li::before { color: var(--accent); }
.soon {
  margin: 26px 0 0;
  padding: 20px 22px;
  border: 1px dashed var(--line);
  border-radius: 18px;
}
.soon ul {
  display: grid;
  gap: 11px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-dim);
}
.soon li { display: flex; gap: 11px; align-items: flex-start; }
.soon li::before { content: "→"; color: var(--warn); flex: none; }
.soon strong { color: var(--ink); font-weight: 600; }
.push { margin-top: auto; }

/* --------------------------------------------------------------- hairline -- */
.grid-hair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--line);
}
.grid-hair > div { background: var(--surface); padding: 28px 30px; }
.grid-hair h3 { font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.grid-hair p { font-size: 16.5px; line-height: 1.6; color: var(--ink-dim); margin: 10px 0 0; }

/* ------------------------------------------------------------- closing cta - */
.cta-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--accent-wash), var(--surface));
  border-radius: var(--r-2xl);
  padding: 64px 48px;
  text-align: center;
}
.cta-card h2 {
  font-weight: 800;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 18px 0 0;
}
.cta-card p {
  font-size: 18.5px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 14px auto 0;
  max-width: 26em;
}
.cta-card .cta-row { justify-content: center; }
.cta-card .bot { width: 104px; height: auto; }

/* ---------------------------------------------------------------- footer --- */
.site-foot {
  max-width: var(--shell-w);
  margin: 0 auto;
  padding: 56px var(--gutter) 64px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  font-size: 15px;
  color: var(--ink-mute);
}
.site-foot .wordmark span { color: var(--ink-dim); }
.site-foot nav { display: flex; gap: 26px; flex-wrap: wrap; }
.site-foot a { color: var(--ink-mute); }
.site-foot a:hover { color: var(--ink); }

/* ------------------------------------------------------ short pages / form - */
.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px var(--gutter) 40px;
}
.page h1 {
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.035em;
}
.page .lede { max-width: none; }
.card {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 30px;
  margin: 28px 0 0;
}
.rails { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 28px 0 0; }
.rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 28px;
  color: var(--ink);
}
.rail:hover { border-color: var(--accent-edge); text-decoration: none; color: var(--ink); }
.rail .cur { font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.rail .amt { font-family: var(--display); font-weight: 800; font-size: 36px; letter-spacing: -0.03em; }
.rail .who { font-size: 15px; color: var(--ink-dim); line-height: 1.5; }
/*
  A dashed border alone read as a style choice while BOTH rails were dead. One
  live and one dead is the case that has to be legible at a glance, so the dead
  one is also dimmed — a buyer must never have to click to find out.
*/
.rail[aria-disabled="true"] { border-style: dashed; cursor: not-allowed; opacity: 0.55; }
.rail[aria-disabled="true"]:hover { border-color: var(--line); }

label { display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
input[type="email"] {
  width: 100%;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 13px 14px;
}
input[type="email"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type="email"]:disabled { color: var(--ink-mute); cursor: not-allowed; }
.hint { font-size: 14.5px; color: var(--ink-dim); line-height: 1.55; margin: 10px 0 0; }
.warnbox {
  border-left: 2px solid var(--warn);
  padding: 2px 0 2px 14px;
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-dim);
}
.result { margin: 20px 0 0; font-size: 16px; line-height: 1.55; min-height: 1.55em; }
.result.ok { color: var(--good); }
.result.err { color: var(--bad); }
.steps { padding-left: 22px; margin: 18px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-dim); }
.steps li + li { margin-top: 10px; }
.steps strong { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------- long-form documents --- */
/* Privacy and Terms. Wider than .page's 720px would allow for tables, but the
   measure is still capped so paragraphs stay readable. */
.doc { max-width: 820px; margin: 0 auto; padding: 48px var(--gutter) 40px; }
.doc h1 {
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.035em;
}
.doc .stamp {
  font-size: 14.5px;
  color: var(--ink-mute);
  margin: 12px 0 0;
}
.doc h2 {
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 28px);
  margin: 48px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
}
.doc h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  margin: 30px 0 0;
}
.doc p,
.doc li { font-size: 17px; line-height: 1.65; color: var(--ink-dim); }
.doc p { margin: 14px 0 0; }
.doc ul, .doc ol { margin: 14px 0 0; padding-left: 22px; }
.doc li + li { margin-top: 9px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  padding: 2px 6px;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.doc table { min-width: 0; }
.doc .table-wrap { margin: 20px 0 0; }
.doc table.data { font-size: 15.5px; min-width: 440px; }
.doc table.data td,
.doc table.data th[scope="row"] { padding: 13px 18px; font-size: 15.5px; }
.doc table.data th { padding: 13px 18px; }

/* A table of contents that is a list of links, not decoration. */
.toc {
  margin: 28px 0 0;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.toc h2 {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
  padding: 0;
  border: 0;
}
.toc ol { margin: 12px 0 0; padding-left: 20px; }
.toc li { font-size: 16px; }

/* The one box on these pages that must not be skimmed past. */
.callout {
  margin: 24px 0 0;
  padding: 20px 22px;
  border: 1px solid var(--accent-edge);
  background: var(--accent-wash);
  border-radius: var(--r-md);
}
.callout p:first-child { margin-top: 0; }
.callout-warn { border-color: var(--warn); background: transparent; }

/* ------------------------------------------------------------ responsive --- */
@media (max-width: 880px) {
  :root { --gutter: 20px; }
  .hero-grid,
  .two,
  .plans,
  .grid-hair,
  .rails { grid-template-columns: 1fr; }
  .hero { padding-top: 40px; }
  .band { margin-top: 64px; padding: 56px 0; }
  .slab { padding-top: 56px; }
  .panel { padding: 24px; }
  .plan { padding: 26px; }
  .cta-card { padding: 44px 24px; }
  .split { align-items: flex-start; gap: 20px; }
  .site-head { padding-top: 18px; gap: 14px; }
  .site-nav { gap: 16px; font-size: 14.5px; }
  .chip { bottom: 18px; left: 18px; }
}

@media (max-width: 560px) {
  .btn { width: 100%; }
  .cta-row > div { width: 100%; }
}

/* Motion is decoration here; nothing depends on it. */
@keyframes botFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
.bot-float { animation: botFloat 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}