:root {
  /* ---- type ---- */
  --font-display: "Space Grotesk", "Manrope", sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* ---- light surfaces ---- */
  --bg: oklch(0.984 0.005 85);
  --bg-2: oklch(0.965 0.006 85);
  --surface: oklch(1 0 0);
  --ink: oklch(0.21 0.018 265);
  --ink-2: oklch(0.4 0.02 265);
  --ink-3: oklch(0.55 0.018 265);
  --line: oklch(0.9 0.008 265);
  --line-2: oklch(0.94 0.006 265);

  /* ---- dark surfaces ---- */
  --dk-bg: oklch(0.165 0.018 265);
  --dk-bg-2: oklch(0.205 0.02 265);
  --dk-surface: oklch(0.235 0.022 265);
  --dk-ink: oklch(0.975 0.004 90);
  --dk-ink-2: oklch(0.78 0.012 265);
  --dk-ink-3: oklch(0.62 0.015 265);
  --dk-line: oklch(0.32 0.02 265);

  /* ---- brand + accent ---- */
  --brand: oklch(0.55 0.17 262);
  --brand-bright: oklch(0.63 0.18 260);
  --brand-soft: oklch(0.93 0.04 262);
  /* What carries white text (buttons, tags, badges). The same as --brand in light, but kept apart
     because dark mode lightens --brand for text and lines, which white can't sit on. */
  --brand-fill: var(--brand);
  --brand-fill-hover: var(--brand-bright);
  --accent: #e8943a;
  --accent-ink: oklch(0.3 0.06 60);

  /* ---- geometry ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --maxw: 1160px;
  --gutter: clamp(20px, 5vw, 64px);

  --shadow-sm: 0 1px 2px rgba(18, 20, 25, 0.04), 0 2px 8px rgba(18, 20, 25, 0.05);
  --shadow-md: 0 8px 24px rgba(18, 20, 25, 0.08), 0 2px 8px rgba(18, 20, 25, 0.05);
  --shadow-lg: 0 24px 70px rgba(18, 20, 25, 0.16), 0 8px 24px rgba(18, 20, 25, 0.08);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* which of the theme switch's icons shows: the one for the theme it switches to */
  --theme-moon: block;
  --theme-sun: none;
}

/* The landing page and the docs follow the reader's light/dark setting, onto the dark surfaces
   above (which the finale and footer use in both), unless they've picked one with the nav's switch
   (`data-theme` on <html>, see public/theme.js). The two blocks below are the same list — CSS can't
   share one between a media query and a selector — so change them together. Pictures of a
   respondent's form — the framed demo, `.form-mock` — keep the form's own light colours, because
   that's what a form looks like. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--dk-bg);
    --bg-2: var(--dk-bg-2);
    --surface: var(--dk-surface);
    --ink: var(--dk-ink);
    --ink-2: var(--dk-ink-2);
    --ink-3: var(--dk-ink-3);
    --line: var(--dk-line);
    --line-2: oklch(0.27 0.02 265);
    --brand: oklch(0.7 0.14 262);
    --brand-soft: oklch(0.3 0.06 262);
    --brand-fill: oklch(0.56 0.17 262);
    --brand-fill-hover: oklch(0.61 0.18 260);
    --accent-ink: oklch(0.85 0.08 70);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.3);
    --theme-moon: none;
    --theme-sun: block;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--dk-bg);
  --bg-2: var(--dk-bg-2);
  --surface: var(--dk-surface);
  --ink: var(--dk-ink);
  --ink-2: var(--dk-ink-2);
  --ink-3: var(--dk-ink-3);
  --line: var(--dk-line);
  --line-2: oklch(0.27 0.02 265);
  --brand: oklch(0.7 0.14 262);
  --brand-soft: oklch(0.3 0.06 262);
  --brand-fill: oklch(0.56 0.17 262);
  --brand-fill-hover: oklch(0.61 0.18 260);
  --accent-ink: oklch(0.85 0.08 70);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.3);
  --theme-moon: none;
  --theme-sun: block;
  color-scheme: dark;
}

/* ============================================================
   Reset / base
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
}
button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}
p {
  margin: 0;
  text-wrap: pretty;
}

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
  transform: rotate(45deg);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  padding: 13px 22px;
  border-radius: 999px;
  transition:
    background 0.25s var(--ease),
    box-shadow 0.35s var(--ease),
    color 0.25s var(--ease);
  white-space: nowrap;
}

.btn-primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  box-shadow: var(--shadow-md);
}

.btn-brand {
  background: var(--brand-fill);
  color: #fff;
  box-shadow: 0 8px 22px -8px var(--brand-fill);
}
.btn-brand:hover {
  background: var(--brand-fill-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover {
  border-color: var(--ink);
}

.btn-lg {
  padding: 16px 28px;
  font-size: 16px;
}

/* ============================================================
   Nav
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  transition:
    background 0.4s var(--ease),
    border-color 0.4s var(--ease),
    backdrop-filter 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: color-mix(in oklch, var(--bg) 78%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--line-2);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
/* hootform's mark: an owl's two eyes on the brand tile, as the product film draws it. Now and then
   they blink and glance aside; `--intro` also plays the film's opening once — one dot splits into
   two eyes and the tile opens out behind them. The colours don't follow the theme, because a logo
   doesn't. Mirrored by `.hf-mark` in the dashboard's app.css, the form badge's `.stepnav__mark` in
   views/layout.ejs, and favicon.svg / apple-touch-icon.png in both apps — change them together. */
.brand__mark {
  --mark: 32px;
  position: relative;
  flex: none;
  width: var(--mark);
  height: var(--mark);
  border-radius: 31.25%;
  background: radial-gradient(circle at 30% 25%, #5b8ef0, #366bd3 55%, #2653b0) center / 100% 100%
    no-repeat;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.12),
    0 6px 16px -6px rgb(54 107 211 / 0.75);
}
.brand__mark::before,
.brand__mark::after {
  content: "";
  position: absolute;
  top: 40.5%;
  width: 19%;
  height: 19%;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, #0e1424 36%, #fbfaf6 46%);
  box-shadow: 0 0 calc(var(--mark) * 0.12) rgb(251 250 246 / 0.55);
}
.brand__mark::before {
  --meet: 99%;
  left: 21.75%;
}
.brand__mark::after {
  --meet: -99%;
  right: 21.75%;
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.04em;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav__links a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
  transition: color 0.2s;
}
.nav__links a:hover {
  color: var(--ink);
}
.nav__right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav__burger {
  display: none;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink);
}
.nav__burger svg {
  width: 18px;
  height: 18px;
}

.theme-toggle {
  display: inline-grid;
  flex: none;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  transition:
    color 0.2s,
    border-color 0.2s;
}
.theme-toggle:hover {
  color: var(--ink);
  border-color: var(--ink-3);
}
.theme-toggle svg {
  width: 17px;
  height: 17px;
}
.theme-toggle__moon {
  display: var(--theme-moon);
}
.theme-toggle__sun {
  display: var(--theme-sun);
}

.nav__mobile {
  display: none;
  position: absolute;
  inset: 72px 0 auto 0;
  background: color-mix(in oklch, var(--bg) 96%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--line-2);
  padding: 12px var(--gutter) 22px;
}
.nav__mobile.open {
  display: block;
}
.nav__mobile a {
  display: block;
  padding: 14px 2px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
}
.nav__mobile a:last-child {
  border-bottom: 0;
}
.nav__mobile .btn {
  margin-top: 16px;
  width: 100%;
  justify-content: center;
}

/* ============================================================
   Section scaffolding
   ============================================================ */
section {
  position: relative;
}
.section {
  padding-block: clamp(72px, 10vw, 130px);
}

.sec-head {
  max-width: 680px;
}
.sec-head.center {
  margin-inline: auto;
  text-align: center;
}
.sec-head h2 {
  font-size: clamp(30px, 4.4vw, 48px);
  margin-top: 18px;
}
.sec-head p {
  margin-top: 20px;
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--ink-2);
  max-width: 60ch;
}
.sec-head.center p {
  margin-inline: auto;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding-top: 138px;
  padding-bottom: 40px;
  position: relative;
  isolation: isolate;
}
.hero__aurora {
  position: absolute;
  inset: -10% 0 auto 0;
  height: 720px;
  z-index: -1;
  background:
    radial-gradient(
      60% 60% at 20% 10%,
      color-mix(in oklch, var(--brand) 24%, transparent),
      transparent 70%
    ),
    radial-gradient(
      50% 50% at 88% 0%,
      color-mix(in oklch, var(--accent) 30%, transparent),
      transparent 70%
    ),
    radial-gradient(
      70% 50% at 60% 40%,
      color-mix(in oklch, var(--brand-bright) 14%, transparent),
      transparent 72%
    );
  filter: blur(20px);
  opacity: 0.8;
}

.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 60% at 50% 30%, #000 30%, transparent 78%);
  opacity: 0.5;
}

.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 7px 16px 7px 7px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.hero__pill .dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--accent) 22%, var(--surface));
  display: grid;
  place-items: center;
  font-size: 12px;
}
.hero h1 {
  font-size: clamp(40px, 7.4vw, 92px);
  font-weight: 600;
  margin-top: 26px;
  letter-spacing: -0.045em;
}
.hero h1 .accentword {
  color: var(--brand);
  font-style: italic;
  font-weight: 500;
}
.hero__sub {
  margin-top: 26px;
  font-size: clamp(17px, 1.9vw, 21px);
  color: var(--ink-2);
  max-width: 56ch;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.hero__stage {
  margin-top: 64px;
  position: relative;
}
.hero__window {
  position: relative;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hero__chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
  background: var(--bg-2);
}
.hero__chrome .dots {
  display: flex;
  gap: 6px;
}
.hero__chrome .dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--line);
}
.hero__chrome .url {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 5px 14px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The hero frames the real demo form (`/demo`), so it looks however the form page looks. Its
   height is fixed because a frame can't size itself to its content; the tallest demo step fits. */
.hero__shot {
  display: block;
  width: 100%;
  height: 760px;
  border: 0;
  background: #fff;
}
.hero__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero__live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22a06b;
  box-shadow: 0 0 0 3px color-mix(in oklch, #22a06b 22%, transparent);
}
@media (max-width: 560px) {
  .hero__shot {
    height: 720px;
  }
  .hero__chrome .url {
    display: none;
  }
}
/* `.form-mock` draws pieces of a respondent screen (the follow-up panel below) the way the form
   page does — its shapes, type and default colours, transcribed from the API's `layout.ejs` — so
   the picture can't promise a form hootform doesn't serve. Change the two together. */
.form-mock {
  --fm-ink: #141821;
  --fm-ink-2: #424853;
  --fm-muted: #5b6270;
  --fm-line: #dbdee3;
  --fm-line-soft: #e9ebef;
  --fm-accent: #366bd3;
  --fm-tint: #f5f8fe;
  --fm-tint-line: #dce6f8;
  --fm-wash: #f3f4f6;
  color: var(--fm-ink);
  font-family: var(--font-body);
  text-align: left;
}
.form-mock__step {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fm-accent);
}
.form-mock__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.form-mock__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
}
.form-mock__go {
  padding: 13px 22px;
  border-radius: 10px;
  background: var(--fm-ink);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}
.mock-card {
  width: min(100%, 380px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-md);
}

.hero__chip {
  position: absolute;
  z-index: 3;
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px 15px;
  box-shadow: var(--shadow-md);
  font-size: 14px;
  font-weight: 600;
}
.hero__chip .ic {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.hero__chip small {
  display: block;
  font-weight: 500;
  color: var(--ink-3);
  font-size: 11.5px;
}
/* Never over the form itself, where they'd cover the question someone is reading: astride the
   window's top edge, in the browser bar's empty middle, or beside the window where the page has
   the room. They don't move: a chip that moves pulls the eye off the question. */
.chip-a {
  top: -26px;
  left: 26%;
}
.chip-b {
  top: -26px;
  right: 18%;
}
@media (min-width: 1480px) {
  .chip-a {
    top: 44%;
    left: auto;
    right: calc(100% + 20px);
  }
  .chip-b {
    top: 18%;
    right: auto;
    left: calc(100% + 20px);
  }
}
@media (max-width: 1000px) {
  .hero__chip {
    display: none;
  }
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 70px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stat {
  background: var(--bg);
  padding: 30px 32px;
}
.stat__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 4.2vw, 46px);
  letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 1;
}
.stat__num .u {
  color: var(--brand);
}
.stat__k {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.stat__d {
  font-size: 13.5px;
  color: var(--ink-3);
  margin-top: 3px;
}

/* ============================================================
   Marquee
   ============================================================ */
.marquee {
  border-block: 1px solid var(--line-2);
  padding-block: 26px;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--bg-2);
}
.marquee__label {
  flex: none;
  padding-left: var(--gutter);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* Every question type, still and wrapped: nothing on the page moves on its own. */
.marquee__track {
  flex: 1;
  padding-right: var(--gutter);
}
.marquee__row {
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
}
.marquee__row span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-inline: 0 22px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(16px, 1.5vw, 19px);
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: nowrap;
}
.marquee__row span::after {
  content: "✳";
  color: var(--accent);
  font-size: 0.6em;
}

/* ============================================================
   Feature cards
   ============================================================ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 56px;
}
.fcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  transition:
    box-shadow 0.5s var(--ease),
    border-color 0.5s;
  display: flex;
  flex-direction: column;
  min-height: 220px;
}
.fcard:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--brand-soft);
}
.fcard__badge {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 17px;
  background: var(--brand-soft);
  color: var(--brand);
}
.fcard h3 {
  font-size: 19px;
  margin-top: 20px;
}
.fcard p {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--ink-2);
}

/* ============================================================
   Premium
   ============================================================ */
/* Grouped by what the extras are for, so $19 reads as four reasons rather than eleven line items.
   A group is marked by its accent, not by being dimmed: every one of these can be set up on the
   free plan, so nothing here should read as locked. */
.pgroups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 56px;
}
.pgroup {
  border: 1px solid color-mix(in oklch, var(--brand) 22%, var(--line));
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px);
  background: linear-gradient(
    170deg,
    color-mix(in oklch, var(--brand-soft) 45%, var(--surface)),
    var(--surface) 45%
  );
}
.pgroup__head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.pgroup__head .fcard__badge {
  flex: none;
  background: var(--brand-fill);
  color: #fff;
}
.pgroup__head h3 {
  font-size: clamp(20px, 2vw, 23px);
  letter-spacing: -0.02em;
}
.pgroup__head p {
  margin-top: 4px;
  font-size: 14.5px;
  color: var(--ink-2);
}
.pgroup__list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
}
.pgroup__list li {
  display: grid;
  gap: 3px;
  padding: 14px 0;
  border-top: 1px solid var(--line-2);
}
.pgroup__list li:last-child {
  padding-bottom: 0;
}
.pgroup__list strong {
  font-size: 15.5px;
  font-weight: 700;
}
.pgroup__list span {
  font-size: 14.5px;
  color: var(--ink-2);
}
.premium__note {
  max-width: 760px;
  margin: 40px auto 0;
  text-align: center;
  font-size: 15px;
  color: var(--ink-3);
}

/* ============================================================
   Steps ("how it works")
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 56px;
  counter-reset: step;
}
.step-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 34px;
  counter-increment: step;
  display: flex;
  flex-direction: column;
}
.step-card::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.1em;
}
.step-card h3 {
  font-size: clamp(20px, 2.2vw, 24px);
  margin-top: 16px;
}
.step-card p {
  margin: 12px 0 22px;
  color: var(--ink-2);
  font-size: 15px;
  max-width: 40ch;
}
/* What the step uses, pinned to the card's foot so the three rows line up. */
.step-card__uses {
  list-style: none;
  padding: 18px 0 0;
  margin: auto 0 0;
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.step-card__uses li {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-2);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 4px 10px;
}

/* ============================================================
   Final CTA (dark)
   ============================================================ */
.finale {
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--dk-bg);
  color: var(--dk-ink);
}
.finale__aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      50% 60% at 30% 20%,
      color-mix(in oklch, var(--brand) 40%, transparent),
      transparent 70%
    ),
    radial-gradient(
      40% 50% at 75% 80%,
      color-mix(in oklch, var(--accent) 34%, transparent),
      transparent 70%
    );
  filter: blur(30px);
  opacity: 0.5;
}
.finale .wrap {
  position: relative;
  z-index: 1;
}
.finale h2 {
  font-size: clamp(32px, 5.4vw, 64px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.02;
  color: var(--dk-ink);
}
.finale h2 span {
  color: var(--dk-ink-3);
}
.finale p {
  color: var(--dk-ink-2);
  font-size: 18px;
  max-width: 52ch;
  margin: 26px auto 0;
}
.finale__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 38px;
}
.finale .btn-primary {
  background: var(--dk-ink);
  color: var(--dk-bg);
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--dk-bg);
  color: var(--dk-ink-2);
  border-top: 1px solid var(--dk-line);
  padding-block: 60px 34px;
}
.footer__top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.footer__brand .brand__name {
  color: var(--dk-ink);
}
.footer__brand p {
  margin-top: 18px;
  font-size: 14.5px;
  color: var(--dk-ink-2);
  max-width: 40ch;
}
.footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.footer__badges span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--dk-ink-2);
  border: 1px solid var(--dk-line);
  border-radius: 999px;
  padding: 6px 12px;
}
.footer__col h4 {
  font-family: var(--font-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dk-ink-3);
  font-weight: 600;
}
.footer__col ul {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer__col a {
  font-size: 14.5px;
  color: var(--dk-ink-2);
  transition: color 0.2s;
}
.footer__col a:hover {
  color: var(--dk-ink);
}
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid var(--dk-line);
  font-size: 13px;
  flex-wrap: wrap;
}

/* ============================================================
   Hero extras
   ============================================================ */
.nav__signin {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.nav__signin:hover {
  color: var(--ink);
}
.hero__note {
  margin-top: 16px;
  font-size: 14px;
  color: var(--ink-3);
}
code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 1px 5px;
  white-space: nowrap;
}

/* ============================================================
   Spotlights (headline features)
   The few things that set hootform apart get a row each — copy beside a small picture of the
   thing itself — so they aren't one card among fifteen. Everything else is the grid below them.
   ============================================================ */
.spots {
  display: grid;
  gap: clamp(56px, 8vw, 110px);
  margin-top: clamp(56px, 7vw, 88px);
}
.spot {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
/* Without this a track grows to its widest unbreakable line and pushes past a phone's edge. */
.spot > * {
  min-width: 0;
}
.spot--flip .spot__copy {
  order: 2;
}
.spot__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}
.spot h3 {
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-top: 14px;
}
.spot__copy > p {
  margin-top: 16px;
  font-size: 17px;
  color: var(--ink-2);
  max-width: 52ch;
}
.spot__list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 12px;
}
.spot__list li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  color: var(--ink-2);
}
.spot__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--brand-soft);
  color: var(--brand);
}
.spot__kicker .tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--brand-fill);
  border-radius: 999px;
  padding: 2px 8px;
}
/* The picture sits on the same hatched ground as the hero's screenshot. */
.spot__panel {
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  padding: clamp(28px, 4vw, 48px);
  display: grid;
  gap: 22px;
  align-content: center;
  min-height: 340px;
  background:
    repeating-linear-gradient(
      135deg,
      color-mix(in oklch, var(--brand) 7%, transparent) 0 1.5px,
      transparent 1.5px 13px
    ),
    var(--bg-2);
}
.spot__panel .mock-card {
  width: min(100%, 400px);
  justify-self: center;
}

.recall-mock {
  display: grid;
  gap: 10px;
  justify-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}
.recall-mock code {
  font-size: 13px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.recall-mock__arrow {
  color: var(--ink-3);
  padding-left: 10px;
}
.recall-mock strong {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.meter-mock {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-md);
}
.meter-mock__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  color: var(--ink-2);
}
.meter-mock__row + .meter-mock__bar {
  margin-top: 10px;
}
.meter-mock__bar + .meter-mock__row {
  margin-top: 24px;
}
.meter-mock__row b {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}
/* A usage bar with no end to it: the fill fades out instead of meeting a limit. */
.meter-mock__bar {
  height: 10px;
  border-radius: 999px;
  background: var(--line-2);
  overflow: hidden;
}
.meter-mock__bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--brand) 55%, transparent);
}
.meter-mock__note {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}

/* The follow-up as the form page shows it: what they said, read only, then the tinted panel. */
.probe-mock {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.probe-mock .form-mock__title {
  font-size: 24px;
}
.probe-mock__you {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 6px;
  font-size: 16px;
  color: var(--fm-ink-2);
}
.probe-mock__tag {
  flex: none;
  margin-top: 2px;
  padding: 4px 7px;
  border-radius: 6px;
  background: var(--fm-wash);
  color: var(--fm-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.probe-mock__panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--fm-tint-line);
  border-radius: 14px;
  background: var(--fm-tint);
}
.probe-mock__status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fm-accent);
}
.probe-mock__ask {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.probe-mock__box {
  padding: 12px 14px;
  border: 1.5px solid var(--fm-tint-line);
  border-radius: 10px;
  background: #fff;
  color: #a3a9b3;
  font-size: 15px;
}
.probe-mock .form-mock__actions {
  margin-top: 6px;
}
.probe-mock__skip {
  font-size: 15px;
  font-weight: 600;
  color: var(--fm-ink-2);
}

/* A response's AI summary as the dashboard's drawer shows it, then the headlines it leaves in the
   responses table. Sentiment colours stand in for the dashboard's own tokens. */
.summary-mock,
.rows-mock {
  --mood-positive: oklch(0.6 0.14 150);
  --mood-negative: oklch(0.58 0.19 25);
  --mood-mixed: oklch(0.72 0.14 70);
  --mood-neutral: var(--ink-3);
}
.summary-mock {
  display: grid;
  gap: 10px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--brand) 6%, var(--surface)),
    var(--surface) 110px
  );
  box-shadow: var(--shadow-md);
}
.summary-mock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.summary-mock__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
}
.summary-mock__mood {
  --mood: var(--mood-neutral);
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: color-mix(in oklab, var(--mood) 60%, var(--ink));
  background: color-mix(in oklab, var(--mood) 20%, var(--surface));
}
.summary-mock__mood.is-mixed {
  --mood: var(--mood-mixed);
}
.summary-mock__headline {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.summary-mock__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.summary-mock__points {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.45;
}
.summary-mock__points span {
  margin-left: 6px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  white-space: nowrap;
}
.rows-mock {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: 13px;
}
.rows-mock__head,
.rows-mock__row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  padding: 10px 16px;
}
.rows-mock__head {
  background: var(--bg-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
.rows-mock__row {
  border-top: 1px solid var(--line-2);
}
.rows-mock__row > span:first-child {
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.rows-mock__row > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rows-mock__row i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 999px;
  vertical-align: 1px;
  background: var(--mood-neutral);
}
.rows-mock__row i.is-positive {
  background: var(--mood-positive);
}
.rows-mock__row i.is-negative {
  background: var(--mood-negative);
}

.seal-mock {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.seal-mock__head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-2);
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}
.seal-mock__row {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  font-size: 14px;
}
.seal-mock__row + .seal-mock__row {
  border-top: 1px solid var(--line-2);
}
.seal-mock__row span {
  color: var(--ink-3);
}
.seal-mock__row code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seal-mock__row em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--ink-3);
  border: 1px solid var(--line);
}
.seal-mock__row em.sealed {
  color: var(--brand);
  background: var(--brand-soft);
  border-color: transparent;
}

/* Scores and calculations: one quiz question's answers and what each is worth. */
.score-mock {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.score-mock__head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-2);
  background: var(--bg-2);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.score-mock__row,
.score-mock__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  font-size: 14px;
}
.score-mock__row + .score-mock__row {
  border-top: 1px solid var(--line-2);
}
.score-mock__row span {
  color: var(--ink-2);
}
.score-mock__row em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--ink-3);
  border: 1px solid var(--line);
}
.score-mock__row.is-right span {
  color: var(--ink);
  font-weight: 600;
}
.score-mock__row.is-right em {
  color: var(--brand);
  background: var(--brand-soft);
  border-color: transparent;
}
.score-mock__total {
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-3);
}
.score-mock__total b {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink);
}

.minis__title {
  margin-top: clamp(72px, 9vw, 120px);
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.02em;
}
.feature-grid--minis {
  margin-top: 28px;
}
.fcard--mini {
  min-height: 0;
  padding: 24px;
}
.fcard--mini h3 {
  font-size: 17px;
  margin-top: 16px;
}
.fcard--mini .fcard__badge {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  font-size: 15px;
}

.logic-mock {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding-top: 40px;
}
.logic-mock span {
  position: relative;
  z-index: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 10px 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.logic-mock span.end {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.logic-mock svg {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: 60px;
  overflow: visible;
}
.logic-mock path {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  stroke-dasharray: 5 5;
  vector-effect: non-scaling-stroke;
}
.logic-mock path.alt {
  stroke: var(--accent);
}

/* ============================================================
   Pricing
   ============================================================ */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 56px;
  align-items: start;
}
/* Two plans sit narrower than three would, so they don't stretch into billboards. */
.plans--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 880px;
  margin-inline: auto;
}
.plan {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
}
.plan--featured {
  border: 2px solid var(--brand);
  box-shadow: var(--shadow-lg);
}
.plan__tag {
  position: absolute;
  top: -13px;
  left: 30px;
  white-space: nowrap;
  background: var(--brand-fill);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
}
.plan h3 {
  font-size: 22px;
}
.plan__for {
  margin-top: 6px;
  font-size: 14.5px;
  color: var(--ink-3);
}
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 24px;
}
.plan__amt {
  font-family: var(--font-display);
  font-size: 50px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
}
.plan__per {
  font-size: 15px;
  color: var(--ink-3);
}
.plan__billed {
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-3);
  min-height: 1.5em;
}
.plan__cta {
  justify-content: center;
  margin-top: 22px;
}
.plan__list {
  list-style: none;
  margin: 26px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 14.5px;
}
.plan__list li {
  position: relative;
  padding-left: 26px;
}
.plan__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--brand);
}
.plan__list li.plan__lead {
  padding-left: 0;
  font-weight: 700;
}
.plan__list li.plan__lead::before {
  content: none;
}
.plan__list li.plan__soon {
  color: var(--ink-3);
}
.plan__list li.plan__soon::before {
  content: "○";
  color: var(--ink-3);
}
.plan__list em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 6px;
}
.plan__more {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}
.plan__more:hover {
  text-decoration: underline;
}

/* What a team pays elsewhere, above the two plans: dearest first, ours last and marked. */
.compare {
  max-width: 880px;
  margin: 48px auto 0;
}
.compare__title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
}
.compare__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.compare__row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  background: var(--surface);
}
.compare__name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 700;
}
.compare__name a {
  color: inherit;
}
.compare__name small {
  font-weight: 500;
  font-size: 12.5px;
  color: var(--ink-3);
}
.compare__price {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink-2);
}
.compare__price small {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}
.compare__row--ours {
  background: var(--brand-soft);
}
.compare__row--ours .compare__price {
  color: var(--brand);
}
@media (max-width: 720px) {
  .compare__list {
    grid-template-columns: 1fr 1fr;
  }
}

.faq {
  max-width: 760px;
  margin: 72px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 22px;
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--ink-3);
}
.faq details[open] summary::after {
  content: "−";
}
.faq details p {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: 15px;
}

.btn-ghost-dark {
  color: var(--dk-ink);
  border: 1px solid var(--dk-line);
}
.btn-ghost-dark:hover {
  border-color: var(--dk-ink);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1000px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .steps {
    grid-template-columns: 1fr;
  }
  /* Copy first, then its picture, whichever side the picture sat on. */
  .spot {
    grid-template-columns: 1fr;
  }
  .spot--flip .spot__copy {
    order: 0;
  }
  .spot__panel {
    min-height: 0;
  }
  .plans {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }
  /* Two cards still sit side by side where three no longer can. */
  .plans--two {
    grid-template-columns: repeat(2, 1fr);
    max-width: 760px;
  }
}
@media (max-width: 720px) {
  .plans--two {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
  .pgroups {
    grid-template-columns: 1fr;
  }
  .nav__signin {
    display: none;
  }
  .hero__pill {
    white-space: normal;
    border-radius: 18px;
  }
}
@media (max-width: 720px) {
  body {
    font-size: 16px;
  }
  .nav__links {
    display: none;
  }
  .nav__burger {
    display: inline-grid;
  }
  /* The switch and the burger stay; "Start free" comes back once the page scrolls. */
  .nav__right {
    gap: 10px;
  }
  .nav__right > .btn {
    display: none;
  }
  .nav.scrolled .nav__right > .btn {
    display: inline-flex;
    padding: 9px 16px;
    font-size: 13.5px;
  }
  .stats {
    grid-template-columns: 1fr;
  }
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .hero__chip {
    display: none;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* A feature section's way to its own page (`seo/features.ts`). */
.spot__more {
  display: inline-block;
  margin-top: 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}
.spot__more:hover {
  text-decoration: underline;
}

/* ---- Hero doodles ----
   Faint line drawings of what hootform does best (AI follow-ups and summaries, encrypted answers,
   logic, recall, drop-off, scores, bot protection, sharing), placed only where the hero is empty:
   beside the headline and the intro, and in the page margins beside the demo. They never move and
   never sit over the form, so nothing competes with the question someone is reading. Colours are
   the page's own tokens, so they follow the theme. */
.hero__wrap {
  position: relative;
}
.doodles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  --doodle-ink: color-mix(in oklch, var(--ink-3) 70%, transparent);
  --doodle-wash: color-mix(in oklch, var(--accent) 24%, transparent);
  --doodle-wash-brand: color-mix(in oklch, var(--brand) 16%, transparent);
  --doodle-size: 64px;
  /* What centres a doodle in the page margin beside the content: the margin is whatever the
     viewport leaves outside the content's max width, plus the gutter. */
  --doodle-gap: max(
    12px,
    calc((max(0px, (100vw - var(--maxw)) / 2) + var(--gutter) - var(--doodle-size)) / 2)
  );
}
@media (min-width: 1440px) {
  .doodles {
    --doodle-size: 80px;
  }
}
.doodle {
  position: absolute;
  width: var(--doodle-size);
  height: var(--doodle-size);
  fill: none;
  stroke: var(--doodle-ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.doodle .wash {
  fill: var(--doodle-wash);
  stroke: none;
}
.doodle .wash--brand {
  fill: var(--doodle-wash-brand);
}
.doodle .dot {
  stroke-width: 4.5;
}
/* Beside the headline and the intro: two in the page's left margin, three right of the text,
   which stops short of the right edge (the headline's second line and the intro's 56ch measure).
   The wrap's own padding is the gutter, so the margin starts that far inside it. */
.doodle--pii {
  top: 70px;
  right: calc(100% - var(--gutter) + var(--doodle-gap));
}
.doodle--recall {
  top: 300px;
  right: calc(100% - var(--gutter) + var(--doodle-gap));
}
.doodle--probe {
  top: 150px;
  right: 5%;
  width: calc(var(--doodle-size) * 1.15);
  height: calc(var(--doodle-size) * 1.15);
}
.doodle--branch {
  top: 305px;
  right: 1%;
}
.doodle--funnel {
  top: 440px;
  right: 20%;
}
/* The demo's margins, away from the two chips (left at 44%, right at 18%). */
.doodles--stage .doodle--summary {
  top: 12%;
  right: calc(100% + var(--doodle-gap));
}
.doodles--stage .doodle--score {
  top: 74%;
  right: calc(100% + var(--doodle-gap));
}
.doodles--stage .doodle--bot {
  top: 46%;
  left: calc(100% + var(--doodle-gap));
}
.doodles--stage .doodle--qr {
  top: 76%;
  left: calc(100% + var(--doodle-gap));
}
/* In the side margins only where they're wide enough to hold one: a typical laptop and up. */
@media (max-width: 1239px) {
  .doodles--stage,
  .doodle--pii,
  .doodle--recall {
    display: none;
  }
}
@media (max-width: 1000px) {
  .doodles {
    display: none;
  }
}