/* ============================================================================
   Fast Apply — design system
   Warm paper, carbon black, one electric royal blue (#2B59D1). Flat and
   hairline-ruled, pervasive pill geometry, 42dot Sans as the only typeface.
   Every product graphic is real DOM so it can animate, loop, and stay crisp.
   ============================================================================ */

@font-face {
  font-family: "42dot Sans";
  src: url("fonts/42dotsans-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* ============================== TOKENS ==================================== */
:root {
  /* Signal */
  --accent: #2b59d1;
  --accent-hover: #2247ab;
  --accent-press: #1c3b8f;
  --accent-soft: #e8edfc;
  --accent-tint: #f1f4fd;
  --accent-ink: #2247ab; /* small text / links on paper: 7.6:1 */
  --accent-on-dark: #7fa0f5; /* accent text on carbon: 7.3:1 */
  --on-accent: #ffffff;

  /* Paper */
  --canvas: #ffffff;
  --canvas-alt: #eff1f4;
  /* The alternating bands, tinted off the primary instead of the warm greige.
     The first attempt matched the old band's lightness exactly, which left it
     so desaturated it still read as grey. This one keeps the blue separation
     wide enough to actually see (21 points of blue over red, against 14) and
     sits a little deeper than the old band, 0.826 relative luminance against
     0.847, so the alternation registers without the page getting heavy. */
  --band-alt: #dbe6f9;
  --surface: #ffffff;
  --surface-2: #f7f8fa;

  /* Ink */
  --ink: #121214;
  --ink-muted: #55555c;
  --ink-soft: #6e6e77;
  --line: #e6e8ec;
  --line-strong: #d4d8df;

  /* Carbon */
  --carbon: #131316;
  --carbon-2: #1c1c21;
  --carbon-3: #26262c;
  --on-carbon: #f2f1ee;
  --on-carbon-soft: #9c9ca6;

  /* Demo semantics: blue = Fast Apply filled it, green = submitted */
  --filled: #edf2fd;
  --filled-line: #c4d3f7;
  --success: #12a05c;

  /* Rationed accents */
  --amber: #f2b233;
  --violet: #7c6bf0;
  --teal: #2bb3a3;
  --coral: #ff7a5c;

  /* Geometry */
  --r-pill: 100px;
  --r-card: 20px;
  --r-frame: 16px;
  --r-input: 10px;
  --r-chip: 8px;

  /* Rhythm */
  --content: 1200px;
  --gutter: 24px;
  --pad-y: clamp(64px, 8vw, 116px);

  /* Elevation. Layered and soft, so cards sit on the page instead of being
     drawn on it. */
  --sh-1: 0 1px 2px rgba(18, 18, 20, 0.05), 0 1px 3px rgba(18, 18, 20, 0.03);
  --sh-2:
    0 1px 2px rgba(18, 18, 20, 0.04), 0 8px 20px -10px rgba(18, 18, 20, 0.14),
    0 24px 48px -24px rgba(18, 18, 20, 0.12);
  --sh-3:
    0 2px 4px rgba(18, 18, 20, 0.05), 0 14px 28px -12px rgba(18, 18, 20, 0.18),
    0 32px 64px -28px rgba(18, 18, 20, 0.18);
  --glow: 0 4px 14px -2px rgba(43, 89, 209, 0.36), 0 10px 30px -10px rgba(43, 89, 209, 0.4);
  --glow-strong: 0 6px 18px -2px rgba(43, 89, 209, 0.44), 0 16px 40px -12px rgba(43, 89, 209, 0.5);
  --lift: 0 1px 0 rgba(18, 18, 20, 0.04);

  /* Supporting hues. The blue still leads; these only tint accents so the
     page has more than one temperature in it. */
  --hue: var(--accent);
  --hue-soft: var(--accent-soft);
  --hue-glow: rgba(43, 89, 209, 0.3);

  /* Fractal noise with the red channel moved into alpha and its contrast
     pushed, so it can be used as a mask anywhere a flat wash needs breaking
     up. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='168'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='2.2' intercept='-0.42'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  /* Light along the top edge, shade along the bottom: the glass part of the
     frosted buttons, with --grain supplying the tooth. */
  /* A gentler, finer grain than --grain, which is tuned for masking a soft
     glow and comes out as sandpaper when blended into a small solid surface. */
  --grain-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.86' intercept='-0.10'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");

  --frost: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.04) 46%,
    rgba(9, 26, 74, 0.16) 100%
  );

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

  /* Every product graphic shares one height so rows line up */
  --demo-h: 302px;
}

/* ============================== BASE ===================================== */
* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The canvas colour is stated here as well as on the body, so no host page
     or viewport overscroll can show a strip of its own colour at an edge. */
  background: var(--canvas);
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family:
    "42dot Sans",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}
h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}
a {
  color: var(--accent-ink);
  text-decoration: none;
}
img,
svg {
  display: block;
  max-width: 100%;
}
button {
  font-family: inherit;
  cursor: pointer;
}
::selection {
  background: var(--accent);
  color: #fff;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.wrap {
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============================== TYPE ==================================== */
.eyebrow {
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.eyebrow.accent {
  color: var(--accent-ink);
}
.display {
  font-weight: 800;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.2;
  letter-spacing: -0.032em;
}
.h1 {
  font-weight: 800;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.2;
  letter-spacing: -0.028em;
}
.h2 {
  font-weight: 700;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.h3 {
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.012em;
}
.lead {
  font-weight: 400;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--ink-muted);
}
.section-head {
  max-width: 620px;
}
.section-head .h2 {
  margin-bottom: 14px;
}
.section-head.center {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}

/* ============================== BUTTONS ================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--r-pill);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 8px 18px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition:
    transform 0.12s var(--ease),
    background 0.16s,
    border-color 0.16s,
    box-shadow 0.16s,
    color 0.16s;
}
.btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}
/* Frosted rather than flat: light off the top edge, shade along the bottom,
   and the same turbulence that grains the card glows blended into the blue. The
   grain is a background layer, not an overlay, so the label stays crisp. */
.btn-primary {
  background-color: var(--accent);
  background-image: var(--grain-soft), var(--frost);
  background-size:
    140px 140px,
    auto;
  background-blend-mode: soft-light, normal;
  color: var(--on-accent);
  box-shadow:
    var(--glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(9, 26, 74, 0.3);
}
.btn-primary:hover {
  background-color: var(--accent-hover);
  box-shadow:
    var(--glow-strong),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(9, 26, 74, 0.34);
}
.btn-primary:active {
  transform: scale(0.97);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  border-color: var(--ink);
}
.btn-carbon {
  background: var(--carbon);
  color: var(--on-carbon);
}
.btn-carbon:hover {
  background: #000;
}
.btn-lg {
  padding: 11px 24px;
  font-size: 15.5px;
}
.btn-block {
  width: 100%;
}
.arrow {
  transition: transform 0.16s var(--ease);
}
.btn:hover .arrow {
  transform: translateX(3px);
}

/* ============================== NAV ==================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 10px var(--gutter);
}
.nav-inner {
  width: 100%;
  max-width: var(--content);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 4px 5px 4px 14px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition:
    background 0.3s var(--ease),
    border-color 0.3s var(--ease),
    box-shadow 0.3s;
}
.nav.scrolled .nav-inner {
  background: rgba(247, 246, 243, 0.86);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-color: var(--line);
  box-shadow: var(--lift);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 16.5px;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.brand-mark {
  width: 23px;
  height: 23px;
  flex: none;
}
.nav-links {
  display: flex;
  gap: 28px;
  margin-left: auto;
}
.nav-links a {
  position: relative;
  color: var(--ink-muted);
  font-size: 14.5px;
  font-weight: 500;
  transition: color 0.15s;
}
.nav-links a:hover {
  color: var(--ink);
}
.nav-links a.active {
  color: var(--ink);
  font-weight: 600;
}
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.nav-cta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 6px;
  color: var(--ink);
}
.nav-toggle svg {
  width: 26px;
  height: 26px;
}
.mobile-menu {
  display: none;
}

/* ============================== PAGE SHELL ============================== */
.band {
  padding-block: var(--pad-y);
  position: relative;
}
.band-alt {
  background: var(--band-alt);
}
.band-tight {
  padding-block: clamp(44px, 6vw, 72px);
}
.carbon {
  background: var(--carbon);
  color: var(--on-carbon);
}
.carbon .lead,
.carbon p {
  color: var(--on-carbon-soft);
}
.carbon .eyebrow {
  color: var(--accent-on-dark);
}
.carbon a {
  color: var(--accent-on-dark);
}
.rule {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* sub-page header */
.page-head {
  padding-top: clamp(140px, 15vw, 200px);
  padding-bottom: clamp(28px, 4vw, 46px);
}
/* The blue wash used to bridge the head and the plans. On a white page there is
   nothing filling that gap, so it closes up instead. */
.page-head + .band-tight {
  padding-top: clamp(16px, 2vw, 26px);
}
.page-head .lead {
  max-width: 56ch;
  margin-top: 14px;
}

/* A hairline instead of a wash, for pages that run several plain sections
   back to back and would otherwise read as one long column. */
.band-rule {
  border-top: 1px solid var(--line);
}

/* ============================== DEMO PRIMITIVES ========================= */
/* Shared by every product graphic on the site. */
.frame {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-frame);
  overflow: hidden;
  box-shadow: var(--lift);
  /* The frame is a real application form, so it reads left to right no matter
     what the section around it is doing. Without this the centred hero pulls
     the long answer and the submit button into the middle, and each typed
     character re-centres the line instead of extending it. */
  text-align: left;
}
.frame-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--canvas-alt);
}
.frame-dots {
  display: flex;
  gap: 6px;
}
.frame-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-strong);
}
.frame-url {
  flex: 1;
  font-size: 11.5px;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frame-ext {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border-radius: var(--r-pill);
  padding: 5px 10px;
  box-shadow: var(--glow);
  flex: none;
}
.frame-ext svg {
  width: 11px;
  height: 11px;
}
.frame-body {
  position: relative;
  padding: 20px clamp(16px, 2.2vw, 26px) 22px;
}
/* a viewport the form scrolls inside, so tall forms fit a short frame */
.frame-view {
  position: relative;
  overflow: hidden;
}
.frame-scroll {
  will-change: transform;
}
.frame-title {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.012em;
  margin-bottom: 2px;
}
.frame-sub {
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.frame-step {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-ink);
  margin-bottom: 14px;
}

/* fields */
.field {
  position: relative;
  margin-bottom: 12px;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.field-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.field-label .req {
  color: var(--accent-ink);
}
.field-input,
.field-select {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-input);
  background: var(--surface);
  padding: 9px 11px;
  min-height: 38px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  transition:
    background 0.35s var(--ease),
    border-color 0.25s;
}
.field-select .chev {
  width: 14px;
  height: 14px;
  margin-left: auto;
  color: var(--ink-soft);
  flex: none;
}
.placeholder {
  color: #a9a49b;
}
.field.is-active .field-input,
.field.is-active .field-select,
.field.is-active .field-area {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43, 89, 209, 0.13);
}
.field.is-filled .field-input,
.field.is-filled .field-select,
.field.is-filled .field-area {
  background: var(--filled);
  border-color: var(--filled-line);
}
.field.is-filled .field-select .chev {
  opacity: 0;
}
/* Centred on the input the check belongs to, not on the field box: the label
   sits above the input, so centring on the box would float it too high. The
   open-ended answer overrides this below, where centring on a tall paragraph
   would leave the check stranded in the middle of the text. */
/* Anchored to the BOTTOM, not to a fixed offset from the top: the input is the
   field's last child, so this centres the check on the 38px input whatever the
   label above it does (one line, two lines, a wrapped question). The tall
   open-ended answer overrides it below, where centring on a paragraph would
   strand the check mid-sentence. */
.field-check {
  position: absolute;
  right: 10px;
  top: auto;
  bottom: 10.5px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-items: center;
  transform: scale(0);
}
/* The open-ended answer: bottom right of the box, where a real form puts its
   character count. */
.field[data-type="area"] .field-check {
  bottom: 9px;
}
.field-check svg {
  width: 10px;
  height: 10px;
  stroke: #fff;
  stroke-width: 3.4;
  fill: none;
}
.caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent);
  margin-left: 1px;
  vertical-align: text-bottom;
  opacity: 0;
}
.field.is-active .caret {
  opacity: 1;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* radios */
.radio-set {
  display: flex;
  gap: 8px;
}
.radio-opt {
  flex: 1;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-input);
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 7px;
  transition: all 0.22s var(--ease);
}
.radio-opt .ring {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  flex: none;
}
.radio-opt.checked {
  border-color: var(--accent);
  background: var(--filled);
  color: var(--ink);
}
.radio-opt.checked .ring {
  border-color: var(--accent);
  background: radial-gradient(circle, var(--accent) 42%, transparent 46%);
}

/* multi-select chips */
.chip-field {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-input);
  background: var(--surface);
  padding: 7px 9px;
  min-height: 38px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  transition:
    background 0.35s var(--ease),
    border-color 0.25s;
}
.field.is-filled .chip-field {
  background: var(--filled);
  border-color: var(--filled-line);
}
.pickchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* Paper, not tint: the field itself turns blue as it fills, and a blue pill
     on a blue field loses its own edge. */
  background: var(--surface);
  border: 1px solid var(--filled-line);
  color: var(--accent-ink);
  border-radius: var(--r-chip);
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(-4px);
}

/* date picker */
.datepop {
  position: absolute;
  z-index: 5;
  top: 58px;
  left: 0;
  width: 176px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(18, 18, 20, 0.12);
  padding: 10px;
  opacity: 0;
  transform: translateY(-6px);
}
.datepop-head {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 7px;
  text-align: center;
}
.datepop-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.datepop-grid i {
  font-style: normal;
  font-size: 10px;
  text-align: center;
  padding: 3px 0;
  border-radius: 5px;
  color: var(--ink-muted);
}
.datepop-grid i.sel {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

/* attach */
.attach {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-input);
  padding: 8px 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 500;
  transition: all 0.28s var(--ease);
}
.attach.has-file {
  border-style: solid;
  border-color: var(--filled-line);
  background: var(--filled);
  color: var(--ink);
}
.attach .prompt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.attach.has-file .prompt {
  display: none;
}
.resume-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  opacity: 0;
}
.resume-chip svg {
  width: 13px;
  height: 13px;
  color: var(--accent);
}

/* textarea (open-ended answers) */
.field-area {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-input);
  background: var(--surface);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  min-height: 176px;
  transition:
    background 0.35s var(--ease),
    border-color 0.25s;
}
.field-area .edited {
  background: rgba(43, 89, 209, 0.14);
  border-radius: 3px;
  padding: 0 2px;
}

/* submit */
.form-submit {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 20px;
  transition:
    background 0.3s var(--ease),
    color 0.3s,
    box-shadow 0.3s,
    transform 0.12s;
}
.form-submit.ready {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--glow);
}
.form-submit.pressed {
  transform: scale(0.96);
}
.form-submit.done {
  background: var(--success);
  color: #fff;
  box-shadow: none;
}

/* scan sweep + cursor + toast */
.scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}
.demo-cursor {
  position: absolute;
  z-index: 6;
  width: 20px;
  height: 20px;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 2px 3px rgba(18, 18, 20, 0.28));
  will-change: transform;
}
.demo-cursor .label {
  position: absolute;
  left: 15px;
  top: 15px;
  background: var(--carbon);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.toast {
  position: absolute;
  right: 14px;
  bottom: 14px;
  /* Wide enough that the line does not wrap, which keeps the toast short enough
     to sit in the strip beside the submit button instead of riding up over the
     last field and hiding its check. Capped to the frame for narrow demos. */
  max-width: min(430px, calc(100% - 28px));
  display: flex;
  gap: 11px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 14px 34px rgba(18, 18, 20, 0.16);
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  pointer-events: none;
  z-index: 8;
}
.toast.show {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.42s var(--ease),
    transform 0.42s var(--ease);
}
.toast-mark {
  width: 30px;
  height: 30px;
  flex: none;
}
.toast-mark svg {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
/* Without this the two lines inherit the page's reading line-height and the
   toast grows tall enough to reach back over the field above it. */
.toast-body {
  line-height: 1.3;
}
.toast-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: block;
}
.toast-sub {
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* ============================== HERO ==================================== */
.hero {
  position: relative;
  padding: clamp(120px, 12vw, 172px) 0 clamp(64px, 7vw, 96px);
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--canvas) 0%,
    #e4ecfb 26%,
    #bed1f8 56%,
    #8fabf0 82%,
    #6d90ea 100%
  );
}
/* The handoff into the ticker: without this the saturated bottom edge of the
   hero would butt straight into paper. */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--canvas));
}
/* One centred column: the promise, then the proof of it directly underneath. */
.hero-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(34px, 4.5vw, 60px);
  text-align: center;
}
.hero-copy {
  width: 100%;
}
.hero h1.display {
  max-width: none;
  margin-inline: auto;
  font-size: clamp(34px, 5.4vw, 66px);
}
.hero-demo {
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
}
.hero h1 {
  margin-bottom: 18px;
}
.hero h1 .swipe {
  position: relative;
  display: inline-block;
  color: var(--accent);
}
.hero .lead {
  max-width: 58ch;
  margin: 0 auto 28px;
}
.hero .hero-cta {
  justify-content: center;
}
.hero-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-wash {
  position: absolute;
  z-index: 0;
  width: 56vw;
  max-width: 760px;
  aspect-ratio: 1.3;
  right: -6%;
  top: 6%;
  background: radial-gradient(
    45% 50% at 60% 40%,
    rgba(43, 89, 209, 0.16),
    rgba(124, 107, 240, 0.1) 46%,
    transparent 72%
  );
  filter: blur(50px);
  pointer-events: none;
}
.hero-demo {
  position: relative;
  z-index: 1;
}

/* Small cards that overlap the hero graphic. The overlap is the point: it
   gives the composition a foreground, which a single flat panel never has. */
.hero-demo {
  position: relative;
}
/* ============================== TICKER ================================== */
.ticker-section {
  padding-block: clamp(30px, 4vw, 46px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.ticker-label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-soft);
  margin-bottom: 56px;
}
.ticker {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker-track {
  display: flex;
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
  width: max-content;
  animation: ticker 64s linear infinite;
}
.ticker:hover .ticker-track {
  animation-play-state: paused;
}
/* Every brand sits in the same box and scales to fit it, so a tall icon and a
   wide wordmark carry the same visual weight instead of the same pixel height.
   --s is a per-logo nudge for artwork that reads light or heavy in that box. */
.ticker-item {
  display: grid;
  place-items: center;
  width: 138px;
  height: 46px;
  flex: none;
  opacity: 0.92;
  transition: opacity 0.2s;
}
.ticker-item:hover {
  opacity: 1;
}
.ticker-item svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  transform: scale(var(--s, 1));
}
.ticker-name {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  line-height: 1.2;
  color: var(--ink);
}
@keyframes ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ============================== PRIVACY ================================= */
/* A single wide diagram of where the data actually goes, with the claims read
   underneath it like a spec sheet. */
.flow {
  margin-top: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: clamp(24px, 3.4vw, 44px);
  position: relative;
  overflow: hidden;
}
.flow-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.5;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000, transparent 72%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000, transparent 72%);
}
/* Two sides, and the point is the count: almost everything sits still on the
   left, and exactly one thing goes right. That contrast is the claim, so it is
   what the layout is built around rather than a diagram to be decoded. */
.flow-split {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(18px, 2.6vw, 34px);
  align-items: start;
}
.side {
  border-radius: 16px;
  padding: 18px 18px 16px;
}
.side-stay {
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.side-go {
  background: var(--filled);
  border: 1px solid var(--filled-line);
}
.side-cap {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--line);
}
.side-go .side-cap {
  border-bottom-color: var(--filled-line);
}
/* the number does the talking */
.side-n {
  font-size: 46px;
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.side-stay .side-n {
  color: var(--success);
}
.side-go .side-n {
  color: var(--accent);
}
.side-t {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  padding-top: 2px;
}
.side-t em {
  display: block;
  margin-top: 5px;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
}
.side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.keep {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.keep-ic {
  width: 19px;
  height: 19px;
  flex: none;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: rgba(18, 160, 92, 0.12);
  color: var(--success);
}
.keep-ic svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* the single thing that goes */
.go-item {
  background: var(--surface);
  border: 1px solid var(--filled-line);
  border-radius: 10px;
  padding: 12px 13px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent-ink);
  box-shadow: var(--sh-1);
}
.go-back {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--ink-muted);
}
.go-back svg {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.go-kept {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--filled-line);
}
.kept-k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.kept-v {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

@media (max-width: 860px) {
  .flow-split {
    grid-template-columns: 1fr;
  }
  .side-list {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 520px) {
  .side-list {
    grid-template-columns: 1fr;
  }
}

.flow-blocked {
  position: relative;
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px dashed var(--line-strong);
  padding-top: 22px;
}
.blocked-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--canvas);
  position: relative;
}
.blocked-pill.struck::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 1.5px;
  background: var(--coral);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
}
.blocked-note {
  font-size: 13px;
  color: var(--ink-muted);
  margin-left: auto;
}
/* the three claims, read like a spec sheet under the diagram */
/* Pulled out by one gutter so the three cells carry identical padding and the
   hover light sits the same distance from the words in every one of them, while
   the first cell's text still lines up with the section head above. The rule is
   drawn inset to match, rather than by the stretched container. */
.claims {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 40px calc(-1 * var(--gutter)) 0;
}
.claims::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  border-top: 1px solid var(--line);
}
.claim {
  padding: 30px var(--gutter) 6px;
  border-left: 1px solid var(--line);
}
.claim:first-child {
  border-left: none;
}
.claim h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.014em;
  margin-bottom: 8px;
}
.claim p {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-muted);
}
.claim .c-ic {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.claim .c-ic svg {
  width: 20px;
  height: 20px;
}

/* Three of these will not sit side by side on a phone: at full size the words
   are wider than the column. Stack them and turn the dividing rules. */
/* A claim is a cell in a ruled row, not a card, so the hover light should not
   draw a box around one. The second mask fades it out before it reaches any
   edge, which also stops the first cell reading differently from the other two
   just because it sits flush against the content edge. */
.claim::after {
  -webkit-mask-image: var(--grain), radial-gradient(closest-side, #000 34%, transparent 100%);
  mask-image: var(--grain), radial-gradient(closest-side, #000 34%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

@media (max-width: 860px) {
  .claims {
    grid-template-columns: 1fr;
    margin-inline: 0;
  }
  .claims::before {
    left: 0;
    right: 0;
  }
  .claim {
    padding-left: 0;
    padding-right: 0;
    border-left: none;
  }
  .claim + .claim {
    border-top: 1px solid var(--line);
    padding-top: 26px;
  }
}

/* ============================== TEDIOUS TRUTH =========================== */
.tedious-grid {
  display: grid;
  grid-template-columns: 44fr 56fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.tedious-statement {
  font-weight: 800;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  max-width: 15ch;
}
.tedious-statement em {
  font-style: normal;
  color: var(--accent);
}
/* The cost written as the sum it actually is: a rate, a count, and what the two
   of them come to. It lands harder than three figures sitting side by side. */
.cost {
  margin-top: 30px;
  max-width: 470px;
}
.cost-row {
  display: grid;
  grid-template-columns: 20px 76px 40px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding: 13px 0;
}
.cost-op {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-soft);
  text-align: center;
}
.cost-n {
  font-size: 31px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.cost-u {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
}
.cost-cap {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-muted);
}
/* the line the sum is drawn under */
.cost-total {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 2px solid var(--ink);
}
.cost-total .cost-op,
.cost-total .cost-n {
  color: var(--accent);
}
.cost-total .cost-n {
  font-size: 42px;
}
.cost-total .cost-u {
  color: var(--accent);
  font-size: 17px;
}
.cost-total .cost-cap {
  color: var(--ink);
  font-weight: 600;
}

/* the running log of a job search */
.ledger {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  overflow: hidden;
}
.ledger-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.ledger-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ledger-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  white-space: nowrap;
}
.ledger-total {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* A window four entries tall. The fifth is waiting just under the sill, so the
   queue slides rather than popping. */
.ledger-rows {
  padding: 7px;
  overflow: hidden;
}
.ledger-track {
  will-change: transform;
}
/* Two lines per entry: the facts, then a bar, so the hours are a shape and not
   only a column of numerals. */
.lrow {
  display: grid;
  /* transparent rather than absent, so the first row is not a pixel shorter
     than the rest and the queue steps cleanly */
  border-top: 1px solid transparent;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto auto;
  grid-template-areas:
    "co now fields time"
    "track track track track";
  align-items: center;
  gap: 9px 12px;
  padding: 11px 12px;
  border-radius: 12px;
  font-size: 13.5px;
}
.lrow + .lrow {
  border-top-color: var(--line);
  border-radius: 0;
}
.lrow-co {
  grid-area: co;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.lrow-co .pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  flex: none;
}
/* the field the clock is currently being spent on */
.lrow-now {
  grid-area: now;
  font-size: 12px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lrow-fields {
  grid-area: fields;
  font-size: 12.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.lrow-time {
  grid-area: time;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink-muted);
}
.lrow-track {
  grid-area: track;
  height: 5px;
  border-radius: 3px;
  background: var(--canvas-alt);
  overflow: hidden;
}
.lrow-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--line-strong);
}
.lrow.active {
  background: var(--canvas);
  border-top-color: transparent;
}
.lrow.active .pip {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(43, 89, 209, 0.14);
}
.lrow.active .lrow-time,
.lrow.active .lrow-now {
  color: var(--accent-ink);
}
.lrow.active .lrow-now {
  font-weight: 600;
}
.lrow.active .lrow-fill {
  background: var(--accent);
}
.ledger-foot {
  padding: 13px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* ============================== STEPS =================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 46px;
}
.step {
  display: flex;
  flex-direction: column;
}
.step-num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 12px;
}
.step h3 {
  margin-bottom: 6px;
}
.step > p {
  color: var(--ink-muted);
  font-size: 14.5px;
  margin-bottom: 18px;
  min-height: 44px;
}
/* every step graphic is exactly the same height */
.step-demo {
  height: var(--demo-h);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  overflow: hidden;
  position: relative;
  margin-top: auto;
}
.step-demo .frame {
  border: none;
  border-radius: 0;
  box-shadow: none;
  height: 100%;
  background: transparent;
}
.step-demo .frame-body {
  padding: 15px 15px 12px;
}

/* profile card demo (step 1) */
.profile-card {
  display: grid;
  gap: 8px;
}
.pf-row {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  background: var(--surface);
  padding: 8px 10px;
  font-size: 12.5px;
  transition:
    background 0.3s,
    border-color 0.3s;
}
.pf-row .pf-k {
  color: var(--ink-soft);
  font-weight: 500;
  min-width: 74px;
  font-size: 11.5px;
}
.pf-row .pf-v {
  font-weight: 600;
  color: var(--ink);
}
.pf-row.on {
  background: var(--filled);
  border-color: var(--filled-line);
}
.doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: var(--canvas-alt);
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
}
.doc-chip svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

/* ============================== FIELD ZOO =============================== */
.zoo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 46px;
}
.zoo-card {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.2s,
    transform 0.2s var(--ease);
}
.zoo-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}
.zoo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.zoo-head h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.zoo-kind {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 3px 9px;
}
/* every field graphic is exactly the same height */
.zoo-stage {
  height: 172px;
  position: relative;
  border-radius: 12px;
  background: var(--canvas);
  border: 1px solid var(--line);
  padding: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.zoo-note {
  font-size: 13px;
  color: var(--ink-muted);
}

/* ============================== ANSWERS ================================= */
.answer-split {
  display: grid;
  grid-template-columns: 40fr 60fr;
  gap: clamp(20px, 2.4vw, 32px);
  align-items: stretch;
  margin-top: 44px;
}
.jd-card,
.answer-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 22px;
  display: flex;
  flex-direction: column;
}
.card-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.reading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--accent-ink);
  text-transform: none;
  font-weight: 600;
}
.reading .rdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.jd-line {
  height: 8px;
  border-radius: 4px;
  background: var(--canvas-alt);
  margin-bottom: 10px;
}
.jd-line.w80 {
  width: 80%;
}
.jd-line.w60 {
  width: 60%;
}
.jd-phrase {
  display: inline-block;
  align-self: flex-start;
  border-radius: 6px;
  padding: 4px 8px;
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--canvas);
  border: 1px solid var(--line);
  transition:
    background 0.3s,
    border-color 0.3s,
    color 0.3s;
}
.jd-phrase.lit {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.answer-q {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.answer-box {
  flex: 1;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--canvas);
  padding: 16px;
  min-height: 188px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink);
  transition:
    background 0.5s var(--ease),
    border-color 0.25s,
    box-shadow 0.25s;
}
/* An empty answer sits on paper; the moment there are words in it, it is a
   live field, and it stays that way until the loop starts over. */
.answer-box.writing {
  background: var(--surface);
}
.answer-box.editing {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43, 89, 209, 0.13);
  background: var(--surface);
}
.answer-box .sent {
  transition: background 0.4s var(--ease);
  border-radius: 4px;
}
.answer-box .sent.hot {
  background: var(--accent-soft);
}
.answer-box .sel {
  background: rgba(43, 89, 209, 0.2);
  border-radius: 3px;
}
.answer-box .edited {
  background: rgba(43, 89, 209, 0.12);
  border-radius: 3px;
  padding: 0 2px;
}
.cursor-blink {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--accent);
  vertical-align: text-bottom;
  animation: blink 1s steps(2) infinite;
}
.wordcount {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
/* only up while the person is changing something, so the change is credited */
.edit-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: var(--r-pill);
  padding: 3px 9px;
}

/* ============================== STATS =================================== */
/* One seamless band, hairline-divided, no boxes. */
.proof {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.stat {
  padding: clamp(30px, 4vw, 46px) clamp(18px, 3vw, 40px);
  border-left: 1px solid var(--line);
}
.stat:first-child {
  border-left: none;
  padding-left: 0;
}
.stat .num {
  font-weight: 800;
  font-size: clamp(40px, 4.6vw, 62px);
  line-height: 1;
  letter-spacing: -0.035em;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  color: var(--hue);
}
.stat .unit {
  font-size: 0.44em;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.stat .cap {
  margin-top: 12px;
  font-size: 14.5px;
  color: var(--ink-muted);
  max-width: 24ch;
}
/* A count you can see the size of. Every tile is the same 26 slots, so the
   three of them are directly comparable, and the last one being empty is the
   whole point of the last one. */
.meter {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(26, 1fr);
  gap: 3px;
  max-width: 260px;
}
.meter i {
  display: block;
  height: 16px;
  border-radius: 2px;
  background: var(--line);
  transform: scaleY(0.34);
  transform-origin: bottom;
}
.meter i.on {
  background: var(--hue);
}
.stat-note {
  margin-top: 11px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ============================== PRICING ================================= */
.price-toggle-wrap {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.price-toggle {
  display: inline-flex;
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px;
  background: var(--surface);
  font-size: 15px;
  font-weight: 650;
}
.price-toggle button {
  position: relative;
  z-index: 1;
  border: none;
  background: none;
  /* buttons do not inherit type, so the size has to be set here rather than on
     the container, or the label silently stays at the browser default */
  font-family: inherit;
  font-size: 15px;
  font-weight: 650;
  padding: 12px 28px;
  line-height: 1.15;
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  transition: color 0.25s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.price-toggle button.active {
  color: #fff;
}
/* the slider is measured from the active button, since the two labels differ
   in width and a fixed 50% would sit under the wrong one */
.price-toggle .slider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: 0;
  background-color: var(--accent);
  background-image: var(--grain-soft), var(--frost);
  background-size:
    140px 140px,
    auto;
  background-blend-mode: soft-light, normal;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(9, 26, 74, 0.3);
  border-radius: var(--r-pill);
  transition:
    transform 0.3s var(--ease),
    width 0.3s var(--ease);
}
.price-save {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--success);
  background: rgba(18, 160, 92, 0.13);
  border-radius: var(--r-pill);
  padding: 4px 9px;
  line-height: 1;
  margin-left: 6px;
}
.price-toggle button.active .price-save {
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
}

/* A single wide blue light behind the plans, kept off the edges so it reads as
   a glow under the cards rather than a panel behind them. Multiply, so it
   deepens the paper instead of washing over it. */
.pricing-glow {
  position: absolute;
  inset: 0 10%;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.72;
  background: radial-gradient(circle at 50% 32%, rgba(32, 108, 232, 0.62) 0%, transparent 66%);
}

/* the saving, stated next to the price rather than buried in the small print */
.price-off {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--success);
  background: rgba(18, 160, 92, 0.12);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  white-space: nowrap;
}
/* what the tier carries over from the one below it */
.price-inc {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.price-inc h4 {
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 11px;
}
.price-inc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.price-inc li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-muted);
}
.inc-tick {
  width: 21px;
  height: 21px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--filled-line);
}
.inc-tick svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feat-ic {
  width: 21px;
  height: 21px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--ink);
}
.feat-ic svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 42px;
  align-items: stretch;
}
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: 30px 26px 26px;
  overflow: hidden; /* keeps the featured top bar inside the rounded corners */
}
.price-card.featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-tint), var(--surface) 42%);
  box-shadow:
    0 2px 6px rgba(43, 89, 209, 0.1),
    0 18px 40px -18px rgba(43, 89, 209, 0.35),
    0 40px 70px -40px rgba(18, 18, 20, 0.2);
}
.price-card.featured:hover {
  box-shadow:
    0 3px 8px rgba(43, 89, 209, 0.12),
    0 24px 52px -20px rgba(43, 89, 209, 0.42),
    0 50px 80px -44px rgba(18, 18, 20, 0.24);
}
.price-card.featured::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--accent);
}
.price-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
  min-height: 26px;
}
.price-tier {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.price-badge {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.price-amt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.price-amt .now {
  font-weight: 800;
  font-size: 44px;
  letter-spacing: -0.035em;
  line-height: 1;
}
.price-amt .was {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: line-through;
}
.price-amt .per {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
}
.price-billed {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 10px;
  min-height: 22px;
}
.price-credits {
  margin: 18px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--canvas);
  border: 1px solid var(--line);
}
.price-credits b {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.price-credits span {
  font-size: 12.5px;
  color: var(--ink-soft);
}
.price-desc {
  font-size: 14px;
  color: var(--ink-muted);
  min-height: 40px;
  margin-bottom: 18px;
}
.price-card .btn {
  margin-top: 22px;
  margin-bottom: 22px;
}
.feat-list {
  list-style: none;
  padding: 0;
  margin: 0 0 auto;
  display: grid;
  gap: 10px;
}
.feat-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  color: var(--ink-muted);
}
.feat-list .fi {
  color: var(--accent);
  flex: none;
  margin-top: 3px;
}
.feat-list .fi svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 3.2;
  fill: none;
}
.price-note {
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-top: 26px;
}

/* plan comparison */
#compareBody th {
  text-align: left;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink-muted);
  padding: 13px 12px;
  border-bottom: 1px solid var(--line);
}
#compareBody td {
  text-align: center;
  padding: 13px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.cmp-yes {
  width: 16px;
  height: 16px;
  stroke: var(--accent);
  stroke-width: 3.2;
  stroke-linecap: round;
  fill: none;
  display: inline-block;
  vertical-align: middle;
}
.cmp-no {
  width: 16px;
  height: 16px;
  stroke: var(--ink-soft);
  stroke-width: 3.2;
  stroke-linecap: round;
  fill: none;
  display: inline-block;
  vertical-align: middle;
}

/* credit packs */
.packs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.pack {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.pack.best {
  border-color: var(--accent);
  box-shadow: var(--glow);
}
.pack .pk-credits {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.pack .pk-price .was {
  font-size: 0.5em;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: line-through;
  margin-right: 8px;
}
.pk-price .now {
  letter-spacing: -0.03em;
}
.pk-price {
  font-size: 20px;
  font-weight: 700;
}
.pack .pk-rate {
  font-size: 12.5px;
  color: var(--ink-soft);
}
.pack .btn {
  margin-top: 14px;
}

/* ============================== FAQ ===================================== */
.faq {
  margin-top: 40px;
}
.faq-item {
  border-top: 1px solid var(--line);
}
.faq-item:last-child {
  border-bottom: 1px solid var(--line);
}
.faq-q {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 4px;
  text-align: left;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.faq-icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--accent);
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition:
    transform 0.3s var(--ease),
    opacity 0.3s;
}
.faq-icon::before {
  top: 8px;
  left: 0;
  width: 18px;
  height: 2px;
}
.faq-icon::after {
  left: 8px;
  top: 0;
  width: 2px;
  height: 18px;
}
.faq-item.open .faq-icon::after {
  transform: rotate(90deg);
  opacity: 0;
}
.faq-a {
  overflow: hidden;
  height: 0;
}
.faq-a-inner {
  padding: 0 4px 24px;
  font-size: 15.5px;
  color: var(--ink-muted);
  max-width: 78ch;
}

/* ============================== CLOSER ================================== */
/* Light, tinted, and the CTA keeps white-on-blue so it stays high contrast. */
.closer {
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--accent-tint);
  border-top: 1px solid var(--line);
  padding-block: calc(var(--pad-y) - clamp(14px, 2vw, 25px));
}
.closer h2 {
  font-weight: 800;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  max-width: 20ch;
  margin: 0 auto 18px;
}
.closer .lead {
  max-width: 46ch;
  margin: 0 auto 28px;
}
.closer-cta {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.closer .btn-ghost {
  background: var(--surface);
  border-color: var(--line-strong);
}

/* ============================== PROSE (legal) =========================== */
.prose {
  max-width: 76ch;
}
.prose h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.018em;
  margin: 40px 0 12px;
}
.prose h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 26px 0 8px;
}
.prose p,
.prose li {
  font-size: 15.5px;
  color: var(--ink-muted);
  line-height: 1.68;
}
.prose p + p {
  margin-top: 12px;
}
.prose ul,
.prose ol {
  margin: 12px 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}
.prose strong {
  color: var(--ink);
  font-weight: 600;
}
.prose .updated {
  font-size: 13px;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  display: inline-block;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14.5px;
}
.prose th,
.prose td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-muted);
}
.prose th {
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.table-scroll {
  overflow-x: auto;
}

/* ============================== CONTACT ================================= */
.contact-grid {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.form-card {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: clamp(22px, 3vw, 32px);
}
.form-field {
  margin-bottom: 16px;
}
.form-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 12px 14px;
}
.form-field textarea {
  min-height: 132px;
  resize: vertical;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43, 89, 209, 0.14);
}
.contact-side .c-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  background: var(--surface);
}
.contact-side .c-item + .c-item {
  margin-top: 14px;
}
.contact-side h3 {
  font-size: 15px;
  margin-bottom: 5px;
}
.contact-side p {
  font-size: 14px;
  color: var(--ink-muted);
}
.form-note {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 12px;
}

/* ============================== FOOTER ================================== */
.footer {
  /* One number for the glow: how tall it stands, and the room kept clear
     underneath the copy for it to stand in. Reserving the full height is what
     keeps text out of it entirely. */
  --glow-h: clamp(210px, 28vh, 340px);
  border-top: 1px solid var(--line);
  /* plus a little, so a descender never grazes the top of the glow */
  padding-block: 56px calc(var(--glow-h) + 20px);
  position: relative;
  overflow: hidden;
}
/* The glow, ported from the Ruixen gradient footer: nine blurred columns under
   one vertical ramp, cut to a flat pyramid so the middle stands tallest. It is
   pinned to the floor of the viewport and grows out of it over the last screen
   of scroll, reaching full height exactly as you hit the end of the page.
   Rainbow swapped for our own blue, with the violet and teal we ration
   elsewhere and the bright band where the original put white. */
.footer-glow {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--glow-h);
  z-index: 1;
  pointer-events: none;
  transform-origin: bottom;
  transform: scaleY(0);
  will-change: transform;
  /* Held well back: half strength, and faded out through its own top half so
     it never reaches the links, only pools along the floor. */
  opacity: 0.72;
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 30%, transparent 84%);
  mask-image: linear-gradient(0deg, #000 0%, #000 30%, transparent 84%);
}
.footer-glow svg {
  display: block;
  width: 100%;
  height: 100%;
}

.footer .wrap {
  position: relative;
  z-index: 2;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 36px;
}
.footer .brand {
  margin-bottom: 12px;
}
.footer-tag {
  font-size: 14px;
  color: var(--ink-muted);
  max-width: 28ch;
}
.footer-col h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.footer-col a {
  display: block;
  color: var(--ink-muted);
  font-size: 14px;
  padding: 4px 0;
  transition: color 0.15s;
}
.footer-col a:hover {
  color: var(--ink);
}
.footer-bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-soft);
}
.footer-legal {
  margin-top: 14px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 74ch;
}

/* ============================== DEMO SUPPORT ============================ */
/* a dropdown that actually opens, so the demo can show the whole interaction */
.selectpop {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  top: 56px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(18, 18, 20, 0.13);
  padding: 5px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
.selectpop i {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-muted);
  padding: 7px 9px;
  border-radius: 7px;
  transition:
    background 0.18s,
    color 0.18s;
}
.selectpop i.hot {
  background: var(--canvas);
  color: var(--ink);
}
.selectpop i.chosen {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* zoo stages: taller, and top aligned where the content should fill them */
.zoo-stage {
  height: 278px;
}
/* Three file rows plus their labels did not fit the stage, so the last one was
   cut off at the bottom edge. The rows lose a little padding and the stage
   gains a little height, which lands the uploads card on the same bottom
   breathing room as the rest of the row. */
.zoo-stage .attach {
  padding: 6px 10px;
}
.zoo-stage .resume-chip {
  padding: 4px 9px;
}
.zoo-stage-top {
  justify-content: flex-start;
}
.zoo-stage .field:last-child {
  margin-bottom: 0;
}
.zoo-stage .field-label {
  margin-bottom: 4px;
}
.zoo-stage .chip-field {
  align-content: flex-start;
  flex: 1;
}
.zoo-stage .field[data-type="multi"] {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.zoo-note {
  min-height: 40px;
}

/* the hero graphic is presented whole, so nothing inside it scrolls */
.hero-demo .frame-body {
  padding-bottom: 20px;
}

/* ============================================================================
   ATMOSPHERE AND LIFE
   Restraint is what makes the accent land, but restraint alone reads as dead.
   These four layers put the air back in: a grain, drifting aurora light, real
   elevation, and surfaces that respond to the pointer.
   ============================================================================ */

/* 1. Grain. Barely there, but it stops large flat areas looking like paint
   buckets. One inline SVG turbulence, no request. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 2. Aurora. Large, slow, low-alpha light behind the key sections. */
/* ====================== LIQUID GRADIENT (WebGL) ========================= *
   A domain-warped noise field, painted by liquid() in app.js. The CSS gradient
   on the parent is the fallback: it is what you see if WebGL is unavailable, so
   it has to be a finished design on its own, not a placeholder. The canvas
   fades itself in only once the shader has actually linked and drawn.         */
.liquid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.liquid.is-on {
  opacity: 1;
}
/* The alternating bands get the same shader, but pale and quiet: the specular
   terms are dialled right down so the wash never clips to white, the grain is
   up so it reads as tooth rather than as a picture, and it is masked at both
   edges to meet the band's own fade into the paper. */
.band-liquid {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.liquid.band-liquid.is-on {
  opacity: 0.85;
}

/* content always sits above the light */
.hero .wrap,
.closer .wrap,
.band > .wrap,
.proof > .wrap,
.pricing-glow ~ .wrap {
  position: relative;
  z-index: 1;
}

/* 3. Elevation. Cards lift off the page and lift further on hover. */
.zoo-card,
.price-card,
.pack,
.form-card,
.contact-side .c-item,
.step-demo,
.ledger,
.flow,
.jd-card,
.answer-card,
.settings-mock {
  box-shadow: var(--sh-2);
  transition:
    transform 0.32s var(--ease),
    box-shadow 0.32s var(--ease),
    border-color 0.32s var(--ease);
}
.zoo-card:hover,
.price-card:hover,
.pack:hover,
.contact-side .c-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-3);
  border-color: var(--line-strong);
}
.frame {
  box-shadow: var(--sh-2);
}
.hero-demo .frame {
  box-shadow: var(--sh-3);
}

/* 4. Pointer spotlight. A soft light follows the cursor across a card, tinted
   with that card's own hue. */
.spot {
  position: relative;
  isolation: isolate;
}
.spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    360px circle at var(--mx, 50%) var(--my, 0%),
    var(--hue-glow),
    transparent 64%
  );
  /* Dithered rather than airbrushed. The turbulence is pushed into the alpha
     channel and used as a mask, so it eats into the glow instead of painting a
     grey rectangle over the card, and the radial falloff survives intact. */
  -webkit-mask-image: var(--grain);
  mask-image: var(--grain);
  -webkit-mask-size: 168px 168px;
  mask-size: 168px 168px;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
  z-index: -1;
}
.spot:hover::after {
  /* Full strength because the mask is already taking roughly half of it. */
  opacity: 1;
}

/* per-card hue, so the grid is not one temperature all the way down */
.hue-blue {
  --hue: #2b59d1;
  --hue-soft: rgba(43, 89, 209, 0.1);
  --hue-glow: rgba(43, 89, 209, 0.3);
}
.hue-violet {
  --hue: #6c5ce7;
  --hue-soft: rgba(108, 92, 231, 0.11);
  --hue-glow: rgba(108, 92, 231, 0.3);
}
.hue-teal {
  --hue: #12a08f;
  --hue-soft: rgba(18, 160, 143, 0.11);
  --hue-glow: rgba(18, 160, 143, 0.3);
}
.hue-amber {
  --hue: #c98411;
  --hue-soft: rgba(242, 178, 51, 0.16);
  --hue-glow: rgba(242, 178, 51, 0.42);
}
.hue-coral {
  --hue: #e0563a;
  --hue-soft: rgba(224, 86, 58, 0.11);
  --hue-glow: rgba(224, 86, 58, 0.3);
}
.zoo-kind {
  color: var(--hue);
  border-color: color-mix(in srgb, var(--hue) 26%, var(--line));
  background: var(--hue-soft);
}

/* 5. A shine that crosses the primary button on hover. */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: skewX(-18deg);
  opacity: 0;
}
.btn-primary:hover::after {
  animation: shine 0.75s var(--ease);
}
@keyframes shine {
  0% {
    left: -45%;
    opacity: 1;
  }
  100% {
    left: 125%;
    opacity: 1;
  }
}

/* 7. Soft section boundaries instead of hard cuts. */
.band-alt {
  background: linear-gradient(
    180deg,
    var(--canvas) 0%,
    var(--band-alt) 14%,
    var(--band-alt) 86%,
    var(--canvas) 100%
  );
}
.proof {
  background: var(--surface);
}
/* The closing band is the one saturated surface on the site. Every colour in
   here is stated against that blue, never inherited from the paper tokens. */
.closer {
  background: linear-gradient(180deg, #3f68df 0%, #2b59d1 45%, #1c3d96 100%);
  border-top: none;
  color: #fff;
}
.closer h2,
.closer .lead {
  color: #fff;
}
/* A light touch of shade under the copy. The panel is a mid blue now rather
   than glaring at the top, so this only has to steady the contrast where the
   marbling runs pale, not rescue it. */
.closer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    76% 60% at 50% 42%,
    rgba(6, 18, 54, 0.26) 0%,
    rgba(6, 18, 54, 0.15) 46%,
    rgba(6, 18, 54, 0) 78%
  );
}
.closer .lead {
  opacity: 0.86;
}
.closer .btn-primary {
  background-image: none;
  background-color: #fff;
  border-color: #fff;
  color: var(--accent-ink);
  box-shadow: 0 6px 20px -6px rgba(10, 24, 66, 0.5);
}
.closer .btn-primary:hover {
  background-color: #f2f5ff;
  border-color: #f2f5ff;
  color: var(--accent-press);
}
.closer .btn-ghost {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.closer .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}
.closer .aura {
  display: none;
}
/* the page hands off into the band rather than butting against it */

/* 8. A drawn rail behind the three steps, so they read as one sequence. */
.steps {
  position: relative;
}
/* 9. Blueprint marks. A dashed grid and corner ticks give the field section a
   drawn-on-paper feel rather than a blank plane. */
.blueprint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(80% 60% at 50% 40%, #000, transparent 78%);
  mask-image: radial-gradient(80% 60% at 50% 40%, #000, transparent 78%);
}

/* ============================== REVEAL ================================== */
.reveal {
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  filter: blur(8px);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}
/* words in a heading rise out of their own line box */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.w > span {
  display: inline-block;
  will-change: transform;
}

/* ============================== RESPONSIVE ============================== */
@media (max-width: 980px) {
  .hero-grid,
  .privacy-layout,
  .tedious-grid,
  .answer-split,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .steps,
  .zoo,
  .stats,
  .pricing-grid,
  .packs {
    grid-template-columns: 1fr 1fr;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
  .nav-links {
    display: none;
  }
  .nav-cta .btn {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }
  .mobile-menu {
    display: none;
    position: fixed;
    top: 72px;
    left: var(--gutter);
    right: var(--gutter);
    z-index: 99;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 10px;
    box-shadow: 0 14px 40px rgba(18, 18, 20, 0.14);
  }
  .mobile-menu.open {
    display: grid;
    gap: 2px;
  }
  .mobile-menu a {
    padding: 12px 14px;
    border-radius: 12px;
    color: var(--ink);
    font-weight: 500;
  }
  .mobile-menu a:hover {
    background: var(--canvas-alt);
  }
  .mobile-menu .btn {
    margin-top: 6px;
  }
  .step > p {
    min-height: 0;
  }
  .treadmill {
    height: 280px;
  }
}

@media (max-width: 680px) {
  .steps,
  .zoo,
  .stats,
  .pricing-grid,
  .packs {
    grid-template-columns: 1fr;
  }
  .footer-top {
    grid-template-columns: 1fr;
  }
  .field-row {
    grid-template-columns: 1fr;
  }
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-cta .btn {
    width: 100%;
  }
  .price-card,
  .stat {
    padding: 24px 20px;
  }
}

/* ============================== REDUCED MOTION ========================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .ticker-track {
    animation: none !important;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 20px;
    /* max-content would keep it on one clipped line, defeating the wrap */
    width: auto;
  }
}