/* ==========================================================================
   AuctionSignal marketing site, visual system v2 (docs/design/system.md)

   Light warm paper, Inter, one accent. Photography carries the emotion and
   the interface stays quiet. No gradients, no glass, no decoration that is
   not doing work. Every spacing value is a step on the 8px scale.
   ========================================================================== */

:root {
  /* ground and ink */
  --paper:       #FAFAF7;
  --paper-2:     #F2F1EC;
  --surface:     #FFFFFF;
  --ink:         #14171C;
  --ink-2:       #4A5160;
  --ink-3:       #5D6575;
  --line:        #E4E3DD;
  --line-2:      #D2D1CA;

  /* action and meaning */
  --accent:      #1F4FE0;
  --accent-ink:  #FFFFFF;
  --accent-deep: #1A43BE;          /* hover, 6% darker */
  --accent-soft: #E9EEFC;
  --confidence:  #0F8A6A;
  --warn:        #94600F;
  --danger:      #C2410C;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;

  --shadow-1: 0 1px 2px rgba(20, 23, 28, .06), 0 1px 1px rgba(20, 23, 28, .04);
  --shadow-2: 0 8px 24px rgba(20, 23, 28, .08), 0 2px 6px rgba(20, 23, 28, .05);

  /* 8px scale */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  --shell: 1200px;
  --gutter: 24px;
  --measure: 62ch;
  --bar: 72px;

  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 900px) {
  :root { --gutter: 48px; }
}

/* ------------------------------ reset ---------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar) + var(--s3));
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid rgba(31, 79, 224, .30);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

::selection { background: var(--accent-soft); color: var(--ink); }

.tnum { font-variant-numeric: tabular-nums; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--surface);
  color: var(--ink);
  padding: 12px var(--s2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-2);
  font-weight: 500;
}
.skip:focus { left: var(--s2); top: var(--s2); }

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

.display {
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.02;
  overflow-wrap: break-word;
}

h1.display { font-size: clamp(40px, 4.9vw, 64px); }

.section-h {
  font-size: clamp(28px, 3.1vw, 40px);
  letter-spacing: -.02em;
  line-height: 1.1;
  max-width: 22ch;
}
.section-h.wide { max-width: 25ch; }

h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
}

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

p { max-width: var(--measure); }

.lede {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 46ch;
}

.section-lede {
  font-size: 18px;
  color: var(--ink-2);
  max-width: 58ch;
  margin-top: var(--s2);
}

.muted { color: var(--ink-2); }

.note {
  font-size: 15px;
  color: var(--ink-2);
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
}

/* ------------------------------ layout --------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: clamp(64px, 8vw, 128px); }
.band-alt { background: var(--paper-2); }
.band-line { border-top: 1px solid var(--line); }

.band-head { max-width: 760px; }
.band-head .section-h { margin-top: var(--s2); }

.stack-s > * + * { margin-top: var(--s2); }
.stack-m > * + * { margin-top: var(--s3); }

/* ------------------------------ topbar --------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.topbar[data-scrolled="true"] {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-1);
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: var(--bar);
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  flex: 0 0 auto;
}
.lockup:hover { text-decoration: none; }
.lockup .mark { width: 26px; height: 29px; flex: 0 0 auto; }
.mark rect { fill: var(--ink); }
.mark path { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.mark .arc-signal { stroke: var(--accent); }

.wordmark {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.topnav {
  display: flex;
  gap: var(--s3);
  margin-left: auto;
}
.topnav a {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  padding-block: 6px;
  text-decoration: none;
}
.topnav a:hover { color: var(--ink); text-decoration: none; }
.topnav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 160ms var(--ease);
}
.topnav a.current { color: var(--ink); }
.topnav a.current::after { opacity: 1; }

/* Sign-in appears twice in the markup on purpose: once in .topcta and once at
   the end of the nav, so the collapsed panel has it. Above 900px the nav is
   inline next to that button, so the panel copy has to stand down. */
@media (min-width: 900px) {
  .topnav .nav-signin { display: none; }
}

.topcta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.topnav + .topcta { margin-left: 0; }

/* Nav toggle: hidden at desktop width, where .topnav renders inline. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-m);
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle svg { width: 18px; height: 18px; }
.nav-toggle:hover { border-color: var(--ink-3); }

@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; order: 2; }
  .topcta { order: 3; }

  /* Collapsed into a disclosure panel under the bar, toggled by #navToggle
     in site.js. `.topbar` is the positioned ancestor (it is `position:
     sticky`, which establishes a containing block same as `relative`), so
     `left/right: 0` here spans the full viewport width, not just the
     padded shell. */
  .topnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    padding: var(--s1) var(--gutter) var(--s3);
  }
  .topnav[data-open="true"] { display: flex; }
  .topnav a {
    padding-block: 14px;
    font-size: 16px;
    border-bottom: 1px solid var(--line);
  }
  .topnav a:last-child { border-bottom: none; }
  .topnav a::after { display: none; }
}
@media (max-width: 479px) {
  :root { --gutter: 20px; }
  .topbar-inner { gap: var(--s2); }
  .topcta .btn-quiet { display: none; }
  .lockup { min-width: 0; }
  .lockup .mark { width: 22px; height: 25px; }
  .wordmark { font-size: 15px; }
  /* The bar has to survive 320px with the primary action intact. 44px is the
     floor for a touch target (docs/design/system.md), so this only trims
     padding and type size, never height. */
  .topcta .btn { height: 44px; padding-inline: 14px; font-size: 14px; }

  /* The feed mock's chrome row is two fixed labels; let them sit together
     rather than push the card wider than the screen. */
  .mock-chrome { flex-wrap: wrap; gap: 4px 10px; padding-inline: var(--s2); }
  .mock-chrome .grow { display: none; }
  .lotcard { padding: var(--s2); }

  /* Panels give their padding back to the content at phone width. */
  .card, .split, .demo-form, .plan-head, .plan-list { padding: var(--s3); }
}

@media (max-width: 359px) {
  :root { --gutter: 16px; }
  .topcta .btn { padding-inline: 12px; }
}

/* ------------------------------ buttons -------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  height: 44px;
  padding-inline: 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.005em;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease),
              color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), var(--shadow-1);
}
.btn-primary:hover { background: var(--accent-deep); }
.btn-primary:disabled { background: var(--line-2); color: var(--surface); box-shadow: none; cursor: default; }

.btn-secondary {
  background: var(--surface);
  border-color: var(--line-2);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
.btn-secondary:hover { border-color: var(--ink-3); }

.btn-quiet {
  background: transparent;
  color: var(--ink-2);
  padding-inline: 10px;
}
.btn-quiet:hover { color: var(--ink); }

.btn-lg { height: 52px; padding-inline: 26px; font-size: 16px; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--accent);
}
.link-arrow span { transition: transform 160ms var(--ease); }
.link-arrow:hover span { transform: translateX(3px); }

/* ---------------------------- photography ------------------------------- */

.frame {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.frame.is-empty img { visibility: hidden; }

.frame-16x9 { aspect-ratio: 16 / 9; }
.frame-4x3  { aspect-ratio: 4 / 3; }

.caption {
  display: flex;
  align-items: flex-start;
  gap: var(--s1);
  margin-top: 12px;
  font-size: 14px;
  color: var(--ink-2);
  max-width: 44ch;
}
.caption .dot {
  width: 7px; height: 7px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}

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

.hero { padding-block: clamp(48px, 6vw, 104px) clamp(64px, 8vw, 120px); }

.hero-grid {
  display: grid;
  gap: var(--s4);
}

.hero-copy > * + * { margin-top: var(--s3); }
.hero-copy .eyebrow + h1 { margin-top: 14px; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: var(--s1);
}

.hero-proof {
  font-size: 15px;
  color: var(--ink-2);
  max-width: 44ch;
  padding-left: 14px;
  border-left: 2px solid var(--accent);
}

.hero-figure .frame { box-shadow: var(--shadow-2); }

@media (max-width: 959px) {
  .hero { padding-block: var(--s4) clamp(64px, 8vw, 120px); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s3); }
  .hero-figure .frame { aspect-ratio: 4 / 3; }
}
@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: var(--s6);
    align-items: center;
  }
  .hero-figure .frame { aspect-ratio: 4 / 3; }
}

/* ------------------------------- cards --------------------------------- */

.grid { display: grid; gap: var(--s3); margin-top: var(--s5); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }

@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: var(--s4);
  box-shadow: var(--shadow-1);
}
.card h3 { margin-bottom: 12px; }
.card p { color: var(--ink-2); font-size: 16px; max-width: none; }

.card-index {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  padding-bottom: 12px;
  margin-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------- how it works ------------------------------ */

.steps { margin-top: var(--s5); display: grid; gap: var(--s5); }

.step {
  display: grid;
  gap: var(--s3);
  align-items: center;
}

.step-body > * + * { margin-top: var(--s2); }
.step-body p { color: var(--ink-2); font-size: 17px; }

.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.step h3 { font-size: clamp(21px, 2vw, 26px); letter-spacing: -.02em; }

@media (min-width: 960px) {
  .steps { gap: var(--s6); }
  .step {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: var(--s6);
  }
  .step-figure { grid-column: 2; grid-row: 1; }
  .step-body { grid-column: 1; grid-row: 1; }
  .step.flip .step-figure { grid-column: 1; }
  .step.flip .step-body { grid-column: 2; }
}

/* ----------------------------- two scores ------------------------------- */

.scores-grid { display: grid; gap: var(--s5); align-items: center; }

@media (min-width: 960px) {
  .scores-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--s6);
  }
}

.scores-copy > * + * { margin-top: var(--s2); }
.scores-copy .section-h { margin-block: 14px var(--s3); }
.scores-copy p { color: var(--ink-2); font-size: 17px; }

.mock {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.mock-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px var(--s3);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.mock-chrome .live {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--confidence);
  flex: 0 0 auto;
}
.mock-chrome .grow { flex: 1 1 auto; }
.mock-chrome .eyebrow { font-size: 11px; white-space: nowrap; }

.lotcard { padding: var(--s3); }

.lot-top { display: grid; gap: var(--s3); }
@media (min-width: 520px) {
  .lot-top { grid-template-columns: 168px minmax(0, 1fr); }
}

.lot-thumb { border-radius: var(--radius-m); }

.lot-meta { font-size: 12px; }
.lot-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin-top: 8px;
}

.lotspecs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px var(--s2);
  margin-top: var(--s2);
}
.lotspecs dt {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.lotspecs dd {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.lotspecs .est {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.scorecells {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.cell .eyebrow { font-size: 11px; }
.cell b {
  display: block;
  font-size: 40px;
  line-height: 1;
  margin-block: 6px 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.cell-match b { color: var(--accent); }
.cell-confidence b { color: var(--confidence); }

.bar {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.bar i { display: block; height: 100%; border-radius: 2px; }
.cell-match .bar i { background: var(--accent); }
.cell-confidence .bar i { background: var(--confidence); }

.evidence {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
}
.evidence li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.45;
}
.evidence li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px; height: 8px;
  border-radius: 50%;
}
.ev-match::before { background: var(--accent); }
.ev-concern::before { background: var(--warn); }
.ev-missing::before { background: var(--ink-3); }
.ev-k {
  font-weight: 600;
  color: var(--ink);
  margin-right: 6px;
}

/* ------------------------------ coverage -------------------------------- */

/* Stands without JavaScript. The stat band above it can stay em dashes all day
   and this still tells the reader what is covered and what is not. */
.coverage-static {
  margin-top: var(--s3);
  max-width: 62ch;
}
.coverage-static p {
  margin-top: var(--s2);
  font-size: 16px;
  color: var(--ink-2);
}

.stats {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.stat {
  padding: var(--s4);
  border-top: 1px solid var(--line);
}
.stat:first-child { border-top: 0; }
.stat b {
  display: block;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
@media (min-width: 720px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat { border-top: 0; border-left: 1px solid var(--line); }
  .stat:first-child { border-left: 0; }
}

.stats-status {
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink-2);
}
/* Not danger red: the ledger not answering in five seconds is a wait, not a
   fault, and the link under the band still gets the reader to the numbers.
   It keeps the element's own --ink-2 rather than taking --ink-3 or --warn.
   --ink-3 and --warn were #7B8394 and #B7791F (3.6:1 and 3.5:1 on paper) and
   this line is 14px, so either would have been a WCAG fail; both tokens now
   carry the darker, AA-passing values from docs/design/system.md, but --ink-2
   was already correct here so this rule stays as-is. */
.stats-status[data-state="error"] { color: var(--ink-2); }

.section-foot {
  display: grid;
  gap: var(--s1);
  justify-items: start;
  margin-top: var(--s4);
  font-size: 15px;
  color: var(--ink-2);
  max-width: 62ch;
}

/* -------------------------------- who ----------------------------------- */

.icp {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.icp .frame {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
}
.icp-body { padding: var(--s3); }
.icp-body h3 { font-size: 18px; }
.icp-body p { margin-top: 8px; font-size: 15px; color: var(--ink-2); max-width: none; }

.split {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: var(--s4);
}
@media (min-width: 860px) {
  .split { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--s5); align-items: start; }
}
.split h3 { margin-bottom: 12px; }
.split p { color: var(--ink-2); font-size: 16px; max-width: 60ch; }

.ticks { display: grid; gap: 10px; margin-top: var(--s2); }
.ticks-flush { margin-top: 0; }
.ticks li {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  color: var(--ink-2);
}
.tick-foot { margin-top: var(--s2); }

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 2px;
  background: var(--ink-3);
}

/* ------------------------------- nevers --------------------------------- */

.nevers {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s5);
}
@media (min-width: 760px) {
  .nevers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); }
}
.nevers li { padding-top: var(--s3); border-top: 2px solid var(--ink); }
.nevers h3 { margin-bottom: 10px; }
.nevers p { color: var(--ink-2); font-size: 16px; }

/* ------------------------------- pricing -------------------------------- */

.plan {
  max-width: 760px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  display: grid;
}
@media (min-width: 720px) {
  .plan { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
}

.plan-head { padding: var(--s4); }
.plan-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--s2);
}
.plan-price .amount {
  font-size: clamp(44px, 5vw, 60px);
  line-height: 1;
  letter-spacing: -.03em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.plan-per { font-size: 14px; color: var(--ink-2); }
.plan-was { margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.plan-cta { margin-top: var(--s3); }

.plan-list {
  padding: var(--s4);
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  align-content: start;
}
@media (min-width: 720px) {
  .plan-list { border-top: 0; border-left: 1px solid var(--line); }
}
.plan-list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  color: var(--ink-2);
}
.plan-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* --------------------------------- faq ---------------------------------- */

.aside-grid { display: grid; gap: var(--s4); }
@media (min-width: 960px) {
  .aside-grid { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--s7); }
  .aside-grid.sticky-head .aside-head { position: sticky; top: calc(var(--bar) + var(--s4)); align-self: start; }
}
.aside-head .section-h { margin-top: var(--s2); max-width: 14ch; }
.aside-head .section-lede { font-size: 16px; }

.faq { display: grid; }
.faq article {
  padding-block: var(--s3);
  border-top: 1px solid var(--line);
}
.faq article:first-child { border-top: 0; padding-top: 0; }
.faq h3 { margin-bottom: 10px; }
.faq p { color: var(--ink-2); font-size: 16px; }

/* -------------------------------- demo ---------------------------------- */

.demo-grid { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 960px) {
  .demo-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: var(--s7); }
  .demo-copy { position: sticky; top: calc(var(--bar) + var(--s4)); }
}
.demo-copy > * + * { margin-top: var(--s3); }
.demo-copy .section-h { margin-top: 14px; }
.demo-copy p { color: var(--ink-2); }

.demo-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-2);
  padding: var(--s4);
  display: grid;
  gap: var(--s3);
}
@media (min-width: 560px) {
  .demo-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-wide, .demo-form .btn, .form-note, .form-msg { grid-column: 1 / -1; }
}

.field { display: grid; gap: 6px; min-width: 0; }
.field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.field .opt { color: var(--ink-2); font-weight: 400; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-m);
  font-size: 15px;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.field textarea { resize: vertical; line-height: 1.5; }
.field select { appearance: none; padding-right: 36px; background-image: none; }
.field .select-wrap { position: relative; display: grid; }
.field .select-wrap::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px; height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--ink-2);
  border-bottom: 2px solid var(--ink-2);
  transform: rotate(45deg);
  pointer-events: none;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 79, 224, .30);
}
.field [aria-invalid="true"] { border-color: var(--danger); }

.hint { font-size: 13px; color: var(--ink-2); max-width: none; }
.err { font-size: 13px; color: var(--danger); max-width: none; }

.hp {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-note { font-size: 13px; color: var(--ink-2); max-width: none; }
.form-msg {
  font-size: 15px;
  padding: 12px var(--s2);
  border-radius: var(--radius-m);
  max-width: none;
}
.form-msg[data-state="ok"] {
  background: var(--accent-soft);
  color: var(--ink);
  border: 1px solid rgba(31, 79, 224, .22);
}
.form-msg[data-state="error"] {
  background: #FDF1EC;
  color: var(--danger);
  border: 1px solid rgba(194, 65, 12, .24);
}
.demo-form.sent .field,
.demo-form.sent .btn,
.demo-form.sent .form-note { display: none; }

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

.footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s6) var(--s5);
}
.footer-inner {
  display: grid;
  gap: var(--s4);
}
@media (min-width: 860px) {
  .footer-inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
  }
}
.footer-line {
  margin-top: var(--s2);
  font-size: 15px;
  color: var(--ink-2);
  max-width: 42ch;
}
.footer-nav {
  display: grid;
  gap: 12px;
  align-content: start;
}
@media (min-width: 560px) {
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.footer-nav a { font-size: 15px; color: var(--ink-2); }
.footer-nav a:hover { color: var(--ink); }
.copyright {
  grid-column: 1 / -1;
  max-width: none;
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
}

/* -------------------------------- legal ---------------------------------- */

/* /privacy and /terms: same header/footer/site.css as the rest of the site,
   just a plain document instead of the marketing bands. */

.legal-head { padding-block: clamp(48px, 6vw, 88px) var(--s4); }
.legal-head .eyebrow { margin-bottom: var(--s2); }
.legal-updated { margin-top: var(--s2); font-size: 15px; color: var(--ink-2); }

.legal-body { padding-block: 0 clamp(64px, 8vw, 112px); }
.legal-body .shell { max-width: 760px; }
.legal-body h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-top: var(--s5);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li { color: var(--ink-2); font-size: 16px; max-width: none; }
.legal-body p + p { margin-top: var(--s2); }
.legal-body ul { display: grid; gap: 8px; margin-top: var(--s2); }
.legal-body li { position: relative; padding-left: 18px; }
.legal-body li::before {
  content: "";
  position: absolute;
  left: 0; top: .65em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink-3);
}
.legal-body a { font-weight: 500; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}