/* ─────────────────────────────────────────────────────────────────
   E-Sign 1 — "Digital Concierge" hospitality editorial system
   ───────────────────────────────────────────────────────────────── */

:root {
  /* surface hierarchy — treat the UI like a physical desk */
  --bg:                #FFFFFF;
  --surface-lo:        #F3F4F3;
  --surface:           #FFFFFF;
  --surface-container: #EDEEED;
  --surface-hi:        #FFFFFF;
  --bg-2:              #F3F4F3;
  --panel:             #FFFFFF;
  --panel-2:           #F3F4F3;

  /* ghost borders only — never solid hairlines */
  --hairline:          rgba(176, 178, 177, 0.20);
  --hairline-strong:   rgba(176, 178, 177, 0.35);

  /* ink */
  --ink:               #303333;
  --ink-dim:           #5C5F65;
  --muted:             #7B7E83;
  --faint:             #B0B2B1;

  /* forest green — Forest brand primary */
  --accent:            #15803D;
  --accent-2:          #14532D;
  --accent-soft:       #DCFCE7;
  --accent-ink:        #FFFFFF;

  /* tertiary tones */
  --mint:              #5C7259;
  --lavender:          #6F6B82;
  --error:             #A73B21;
  --on-error:          #FFF8F5;

  /* ambient shadows — tinted, extra-diffused */
  --shadow-1: 0 1px 2px rgba(48, 51, 51, 0.04);
  --shadow-2: 0 6px 18px rgba(48, 51, 51, 0.05);
  --shadow-3: 0 12px 32px rgba(48, 51, 51, 0.06);
  --shadow-4: 0 30px 70px -20px rgba(48, 51, 51, 0.18), 0 12px 32px rgba(48, 51, 51, 0.06);

  /* radii */
  --r-xs: 0.25rem;
  --r-md: 0.375rem;
  --r-lg: 0.5rem;
  --r-xl: 0.75rem;
  --r-2xl: 1rem;

  /* body backdrop tints — vanishingly subtle (forest-tinted) */
  --tint-1: rgba(21, 128, 61, 0.04);
  --tint-2: rgba(92, 95, 101, 0.025);

  /* type — Forest brand: Schibsted Grotesk for display, Manrope for body. */
  --sans:    "Manrope", "Söhne", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --serif:   "Schibsted Grotesk", "Manrope", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono:    "Geist Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* layout */
  --gutter: clamp(20px, 4vw, 56px);
  --max:    1280px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

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

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 600px at 80% -10%, var(--tint-1), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, var(--tint-2), transparent 60%);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color .3s ease, color .3s ease;
}

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

a { color: inherit; text-decoration: none; }

/* ── nav ─────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  background: color-mix(in oklab, var(--bg) 75%, transparent);
  /* Solid forest underline — strong brand bar at the bottom of the nav. */
  box-shadow: inset 0 -2px 0 var(--accent);
  transition: padding .35s ease, background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.nav__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px var(--gutter);
  display: flex; align-items: center; gap: 28px;
  transition: max-width .4s cubic-bezier(.4,0,.2,1),
              padding   .4s cubic-bezier(.4,0,.2,1),
              background .35s ease,
              border-radius .4s cubic-bezier(.4,0,.2,1),
              box-shadow .35s ease;
}

/* floating pill state — engages when scrolled past hero */
.nav.is-floating {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding-top: 16px;
}
.nav.is-floating .nav__inner {
  max-width: 1100px;
  padding: 14px 16px 14px 26px;
  border-radius: 999px;
  background: var(--surface);
  /* Forest-glowing pill: 1.5px accent ring + soft outer halo at multiple
     radii so the glow feels diffuse and ambient rather than flat. Base
     drop shadows stay for vertical lift off the page. */
  box-shadow:
    0 30px 60px -22px rgba(48, 51, 51, 0.30),
    0 12px 28px -10px rgba(48, 51, 51, 0.18),
    0 2px 6px rgba(48, 51, 51, 0.06),
    0 0 0 1.5px var(--accent),
    0 0 14px 2px color-mix(in oklab, var(--accent) 28%, transparent),
    0 0 36px 4px color-mix(in oklab, var(--accent) 22%, transparent),
    inset 0 0 0 1px color-mix(in oklab, var(--accent) 22%, transparent);
  animation: nav-glow-pulse 3.2s ease-in-out infinite;
}
@keyframes nav-glow-pulse {
  0%, 100% {
    box-shadow:
      0 30px 60px -22px rgba(48, 51, 51, 0.30),
      0 12px 28px -10px rgba(48, 51, 51, 0.18),
      0 2px 6px rgba(48, 51, 51, 0.06),
      0 0 0 1.5px var(--accent),
      0 0 14px 2px color-mix(in oklab, var(--accent) 28%, transparent),
      0 0 36px 4px color-mix(in oklab, var(--accent) 22%, transparent),
      inset 0 0 0 1px color-mix(in oklab, var(--accent) 22%, transparent);
  }
  50% {
    box-shadow:
      0 30px 60px -22px rgba(48, 51, 51, 0.30),
      0 12px 28px -10px rgba(48, 51, 51, 0.18),
      0 2px 6px rgba(48, 51, 51, 0.06),
      0 0 0 1.5px var(--accent),
      0 0 22px 4px color-mix(in oklab, var(--accent) 42%, transparent),
      0 0 50px 8px color-mix(in oklab, var(--accent) 32%, transparent),
      inset 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav.is-floating .nav__inner { animation: none; }
}
.nav.is-floating .brand__tag { opacity: 0; max-width: 0; padding-left: 0; padding-right: 0; margin-left: -8px; overflow: hidden; transition: all .3s ease; }
.brand__tag { transition: opacity .3s ease, max-width .3s ease; max-width: 60px; }
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-weight: 600; letter-spacing: -0.01em;
  font-size: 18px;
}
.brand__tag { font-family: var(--mono); font-size: 11px; color: var(--muted); padding: 3px 8px; border-radius: var(--r-xs); margin-left: 4px; background: var(--surface-lo); }

.nav__links { display: flex; gap: 6px; margin-left: 18px; }
.nav__link {
  padding: 11px 18px; border-radius: var(--r-md);
  color: var(--ink-dim); font-size: 17px; font-weight: 500;
  transition: color .2s;
  letter-spacing: -0.005em;
  position: relative;
  text-decoration: none;
}
.nav__link:hover { text-decoration: none; }
/* Underline indicator — reveals left-to-right on hover and stays for the
   active link. Subtle, 1.5px forest line, no shouting. */
.nav__link::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 6px;
  height: 1.5px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--accent); }

.nav__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.dropdown { position: relative; }
.dropdown__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 14px; border-radius: var(--r-md);
  background: #F1F5F9; color: var(--ink);
  font: inherit; font-size: 14px; cursor: pointer;
  font-family: var(--mono); letter-spacing: -0.01em;
  font-weight: 500;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  transition: color .2s, box-shadow .2s, background .2s;
}
.dropdown__btn:hover {
  color: var(--ink);
  background: #E2E8F0;
  box-shadow: inset 0 0 0 1px var(--hairline-strong), var(--shadow-1);
}
.dropdown__btn .chev { width: 10px; height: 10px; opacity: .85; }
.dropdown__menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--surface);
  border-radius: var(--r-xl); padding: 8px; min-width: 240px;
  box-shadow: var(--shadow-4);
  display: none; z-index: 80;
  /* Long lists of currencies/languages overflow — scroll inside the menu
     instead of forcing the viewport to grow. */
  max-height: 60vh; overflow-y: auto;
  /* tonal lift — no border */
}
.dropdown.is-open .dropdown__menu { display: block; }
.dropdown__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-md); cursor: pointer;
  font-size: 13px; color: var(--ink-dim);
  transition: background .15s, color .15s;
}
.dropdown__item:hover { background: var(--surface-lo); color: var(--ink); }
.dropdown__item.is-selected { color: var(--accent); }
.dropdown__item .meta { font-family: var(--mono); font-size: 11px; color: var(--muted); }


.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--r-md);
  font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  border: 1px solid transparent;
  transition: transform .15s, background .25s, box-shadow .25s, color .2s;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.btn--ghost {
  background: transparent; color: var(--ink-dim);
  /* ghost-border: 20% outline-variant via --hairline */
  box-shadow: inset 0 0 0 1px var(--hairline);
  border: 0;
}
.btn--ghost:hover {
  color: var(--ink);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hairline-strong), var(--shadow-1);
}
.nav .btn--ghost {
  color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.nav .btn--ghost:hover {
  color: var(--accent-2);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1.5px var(--accent-2), var(--shadow-1);
}
/* Hero secondary CTA gets the burgundy signature-ink treatment — pairs
   with the forest-filled primary CTA as a clear color-coded hierarchy:
   forest = primary action, burgundy = secondary / accent route. */
.hero .btn--ghost {
  color: #9F1239;
  box-shadow: inset 0 0 0 1.5px #9F1239;
}
.hero .btn--ghost:hover {
  color: #881337;
  background: #FFF1F2;
  box-shadow: inset 0 0 0 1.5px #881337, var(--shadow-1);
}
.btn--primary {
  /* forest gradient at 135deg */
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: var(--accent-ink);
  border: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.20) inset,
              0 8px 24px -8px var(--accent-2),
              var(--shadow-1);
}
.btn--primary:hover {
  background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 100%);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.20) inset,
              0 12px 32px -10px var(--accent-2),
              var(--shadow-2);
}
.btn--lg { padding: 14px 24px; font-size: 15px; border-radius: var(--r-md); }

/* ── shared layout ───────────────────────────────────────────────── */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(60px, 9vw, 120px) 0; }

/* How-it-works section: rich deep-forest gradient band that pops out
   from the white page. Layered radial + linear gradients evoke depth
   and atmosphere; an angular polygon overlay adds geometric energy
   (a translucent diamond off to the right, IXOPAY-style).
   Full-bleed — outer .section--how spans the viewport, inner .wrap
   constrains content to 1280px. */
.section--how {
  position: relative;
  isolation: isolate;
  color: #FFFFFF;
  /* Layered gradients: angled linear base + two radial highlights for depth */
  background:
    radial-gradient(ellipse 1100px 600px at 88% 22%,
      color-mix(in oklab, #10B981 38%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 900px 700px at 8% 80%,
      color-mix(in oklab, #047857 45%, transparent) 0%, transparent 60%),
    linear-gradient(135deg,
      #022C22 0%,
      #064E3B 38%,
      #065F46 62%,
      #064E3B 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, #10B981 45%, transparent),
    inset 0 -1px 0 color-mix(in oklab, #10B981 30%, transparent),
    inset 0 24px 60px -24px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
/* Angular polygon overlay — diagonal shape on the right, semi-transparent
   forest tint, anchored via clip-path. Sits below the content (z-index < 1)
   but above the gradient base, adding the layered "geometric mountains" feel. */
.section--how::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg,
    color-mix(in oklab, #34D399 18%, transparent) 0%,
    color-mix(in oklab, #047857 28%, transparent) 100%);
  clip-path: polygon(58% 0, 100% 0, 100% 100%, 78% 100%, 42% 38%);
  pointer-events: none;
}
.section--how::after {
  content: '';
  position: absolute;
  left: -8%; bottom: -10%;
  width: 50%; height: 70%;
  z-index: 0;
  background: radial-gradient(ellipse at center,
    color-mix(in oklab, #10B981 28%, transparent) 0%,
    transparent 65%);
  pointer-events: none;
}
.section--how > * { position: relative; z-index: 1; }

/* Text inside the dark section flips to light. */
.section--how .h-section { color: #FFFFFF; }
.section--how .h-section em {
  /* Lift the italic accent to a brighter mint so it pops on the dark forest */
  color: #6EE7B7;
}
.section--how .lead {
  color: rgba(255, 255, 255, 0.82);
}
/* The .eyebrow pill on dark — keep the pill shape but invert the wash */
.section--how .eyebrow {
  background: linear-gradient(135deg,
    color-mix(in oklab, #10B981 24%, transparent) 0%,
    color-mix(in oklab, #10B981 10%, transparent) 100%);
  color: #A7F3D0;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, #6EE7B7 40%, transparent);
}
.section--how .eyebrow::before {
  background: #6EE7B7;
  box-shadow: 0 0 0 0 color-mix(in oklab, #6EE7B7 60%, transparent);
}
.section--tight { padding: clamp(40px, 6vw, 80px) 0; }

.eyebrow {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em;
  color: var(--accent); text-transform: uppercase; font-weight: 600;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px 9px 16px;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--accent) 14%, var(--surface)) 0%,
    color-mix(in oklab, var(--accent) 6%, var(--surface)) 100%
  );
  position: relative;
  isolation: isolate;
  /* Breathing glow — the entire pill pulses every 2.4s */
  animation: eyebrow-glow 2.4s ease-in-out infinite;
}
.eyebrow::before {
  content: ""; width: 16px; height: 16px; border-radius: 3px;
  /* Mini GSD chip (green square + white pen) — same SVG as the favicon.
     Replaces the plain green dot for stronger brand recognition. */
  background: url('/favicon.svg') center/cover no-repeat;
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 50%, transparent);
  animation: eyebrow-dot 2s ease-out infinite;
  flex-shrink: 0;
}
/* Diagonal shine sweep, brighter + wider so it actually reads */
/* (Removed the .eyebrow::after diagonal-shine sweep — the sweep was
   escaping past the pill edges. The pulsing dot + breathing glow stay.) */

@keyframes eyebrow-glow {
  0%, 100% {
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent) inset,
      0 0 0 0 color-mix(in oklab, var(--accent) 40%, transparent),
      0 4px 12px -4px color-mix(in oklab, var(--accent) 30%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--accent) 55%, transparent) inset,
      0 0 0 6px color-mix(in oklab, var(--accent) 0%, transparent),
      0 8px 28px -6px color-mix(in oklab, var(--accent) 55%, transparent),
      0 0 22px color-mix(in oklab, var(--accent) 45%, transparent);
  }
}
@keyframes eyebrow-dot {
  0%   { box-shadow: 0 0 0 0   color-mix(in oklab, var(--accent) 60%, transparent); }
  70%  { box-shadow: 0 0 0 10px color-mix(in oklab, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0   color-mix(in oklab, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .eyebrow, .eyebrow::before { animation: none; }
}

.h-display {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.05; letter-spacing: -0.018em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
.h-display em { font-style: italic; color: var(--accent); font-weight: 400; }
.h-display .alt { color: var(--ink-dim); font-style: italic; }

/* per-line slide-in for the hero headline — alternating sides */
.hero-line {
  display: block;
  opacity: 0;
  transform: translateX(var(--from, -80px));
  transition:
    opacity .9s cubic-bezier(.2, .65, .2, 1),
    transform .9s cubic-bezier(.2, .65, .2, 1);
  transition-delay: calc(var(--li, 0) * 200ms + 120ms);
}
.hero-line--l { --from: -80px; }
.hero-line--r { --from:  80px; }
.r-up.is-on .hero-line,
.is-on .hero-line { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-line { transition: none; opacity: 1; transform: none; }
}

.h-section {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.06; letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.h-section em { font-style: italic; color: var(--accent); font-weight: 400; }

.lead {
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--ink-dim); line-height: 1.6; max-width: 56ch;
  text-wrap: pretty; font-weight: 400;
}

/* ── hero ────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(40px, 6vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.hero__left { min-width: 0; }

/* ── Hero right-side feature slider ───────────────────────────────────
   Burgundy-framed card with four rotating slides on a 14s loop. Pure
   CSS — each slide is absolutely positioned and gets the same keyframe
   animation with a different negative delay, so they take turns being
   visible. Dot indicators below cycle in lockstep. */
.hero__right {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;       /* card fills full column width */
  gap: 16px;
}
.hero__right-eyebrow {
  /* Eyebrow alone is right-aligned within the column. The card below
     spans full width. Keeps .eyebrow's inline-flex layout intact (no
     display override — that would kill the pulse-dot pseudo). */
  align-self: flex-end;
}
.hero-feat {
  position: relative;
  background: var(--surface);
  border: 2px solid #9F1239;
  border-radius: 18px;
  padding: 36px 32px 64px;
  min-height: 400px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 0 28px rgba(159, 18, 57, 0.10),
    0 18px 40px -12px rgba(15, 23, 42, 0.18),
    0 0 28px rgba(159, 18, 57, 0.18),
    0 0 70px rgba(159, 18, 57, 0.10);
}
/* Six slides on a 20s total cycle:
   - Slides 1-2 (.--prom): pain-point/solution moments. Burgundy-filled,
     visible 5s each (25% of cycle), bigger entrance animation.
   - Slides 3-6 (.--feat): feature accents. White bg, visible 2.5s each
     (12.5% of cycle), subtler entrance. */
.hero-feat__slide {
  position: absolute;
  inset: 36px 32px 64px;
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: backwards;
}
.hero-feat__slide--prom { animation-name: hero-feat-prom; animation-duration: 20s; }
.hero-feat__slide--feat { animation-name: hero-feat-feat; animation-duration: 20s; }

.hero-feat__slide--1 { animation-delay:   0s; }
.hero-feat__slide--2 { animation-delay:   5s; }
.hero-feat__slide--3 { animation-delay:  10s; }
.hero-feat__slide--4 { animation-delay: 12.5s; }
.hero-feat__slide--5 { animation-delay:  15s; }
.hero-feat__slide--6 { animation-delay: 17.5s; }

/* Prominent (25% visible window, with scale-up entrance for emphasis) */
@keyframes hero-feat-prom {
  0%   { opacity: 0; transform: translateX(28px) scale(0.97); }
  3%   { opacity: 1; transform: translateX(0) scale(1); }
  22%  { opacity: 1; transform: translateX(0) scale(1); }
  25%  { opacity: 0; transform: translateX(-28px) scale(0.98); }
  100% { opacity: 0; transform: translateX(-28px) scale(0.98); }
}

/* Compact feature (12.5% visible window, gentler slide) */
@keyframes hero-feat-feat {
  0%    { opacity: 0; transform: translateX(16px); }
  1.5%  { opacity: 1; transform: translateX(0); }
  11%   { opacity: 1; transform: translateX(0); }
  12.5% { opacity: 0; transform: translateX(-16px); }
  100%  { opacity: 0; transform: translateX(-16px); }
}

/* Prominent slide visual: burgundy fill + white text */
.hero-feat__slide--prom .hero-feat__num { color: #FECDD3; }
.hero-feat__slide--prom .hero-feat__title { color: #FFFFFF; }
.hero-feat__slide--prom .hero-feat__title em { color: #FFE4E6; font-weight: 500; }
.hero-feat__slide--prom .hero-feat__copy { color: rgba(255, 255, 255, 0.88); }
.hero-feat__slide--prom .hero-feat__icon { color: #FFFFFF; }
.hero-feat__slide--prom .hero-feat__hint {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.16);
}
/* Burgundy fill applied to the WHOLE card while a prominent slide is active,
   via a sibling overlay that fades in/out in sync with the prom slides. */
.hero-feat::before,
.hero-feat::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, #9F1239 0%, #881337 60%, #6F1239 100%);
  opacity: 0;
  pointer-events: none;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-duration: 20s;
  animation-name: hero-feat-prom-bg;
  z-index: 0;
}
.hero-feat::before { animation-delay:   0s; }
.hero-feat::after  { animation-delay:   5s; }
/* Slides keep position: absolute (set earlier); just add z-index so they
   sit above the burgundy-fill pseudo overlays. Dots get position:relative
   because they're not in the .hero-feat__slide ruleset. */
.hero-feat__slide { z-index: 1; }
.hero-feat__slide--prom { z-index: 2; }
.hero-feat__dots { position: relative; z-index: 2; }

@keyframes hero-feat-prom-bg {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  22%  { opacity: 1; }
  25%  { opacity: 0; }
  100% { opacity: 0; }
}

.hero-feat__num {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #9F1239;
  font-weight: 700;
  margin-bottom: 20px;
}
.hero-feat__icon {
  width: 38px; height: 38px;
  color: var(--ink);
  margin-bottom: 18px;
}
.hero-feat__title {
  font-family: var(--serif);
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  color: var(--ink);
  font-weight: 400;
}
.hero-feat__title em {
  font-style: italic;
  color: #9F1239;
}
.hero-feat__copy {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0 0 20px;
  max-width: 38ch;
}
.hero-feat__hint {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  padding: 5px 10px;
  background: color-mix(in oklab, #9F1239 8%, transparent);
  border-radius: 999px;
}

/* Dot indicators at bottom of the slider */
.hero-feat__dots {
  position: absolute;
  bottom: 24px;
  left: 32px;
  display: flex;
  gap: 8px;
}
.hero-feat__dot {
  border-radius: 50%;
  /* Inactive default: hollow slate-gray ring — readable on BOTH the white
     feature-card bg AND the burgundy prominent-slide bg. */
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(148, 163, 184, 0.8);
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-duration: 20s;
}
.hero-feat__dot--prom { width: 10px; height: 10px; animation-name: hero-feat-dot-prom; }
.hero-feat__dot--feat { width: 7px; height: 7px; animation-name: hero-feat-dot-feat; }

.hero-feat__dot--1 { animation-delay:   0s; }
.hero-feat__dot--2 { animation-delay:   5s; }
.hero-feat__dot--3 { animation-delay:  10s; }
.hero-feat__dot--4 { animation-delay: 12.5s; }
.hero-feat__dot--5 { animation-delay:  15s; }
.hero-feat__dot--6 { animation-delay: 17.5s; }

/* Active state for prom dots: solid white circle with soft white halo */
@keyframes hero-feat-dot-prom {
  0%, 25%, 100% {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px rgba(148, 163, 184, 0.8);
    transform: scale(1);
  }
  3%, 22% {
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1.5px #FFFFFF, 0 0 0 4px rgba(255, 255, 255, 0.30);
    transform: scale(1.35);
  }
}
/* Active state for feat dots: solid burgundy circle */
@keyframes hero-feat-dot-feat {
  0%, 12.5%, 100% {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px rgba(148, 163, 184, 0.8);
    transform: scale(1);
  }
  1.5%, 11% {
    background: #9F1239;
    box-shadow: inset 0 0 0 1.5px #9F1239;
    transform: scale(1.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-feat__slide,
  .hero-feat__dot,
  .hero-feat::before,
  .hero-feat::after { animation: none; }
  .hero-feat__slide { opacity: 1; transform: none; position: relative; inset: auto; }
  /* Show only the first prominent slide as a static state */
  .hero-feat__slide:not(.hero-feat__slide--1) { display: none; }
  .hero-feat::before { opacity: 1; }
}

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .hero-feat { min-height: 320px; padding: 28px 24px 56px; }
  .hero-feat__slide { inset: 28px 24px 56px; }
}
.hero__grid {
  display: grid; gap: 56px;
  grid-template-columns: minmax(0, 1fr);
}
.hero__title { margin-top: 24px; }
.hero__copy { margin-top: 28px; max-width: 52ch; font-size: clamp(17px, 1.4vw, 20px); color: var(--ink-dim); }
.hero__ctas { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero__meta { margin-top: 28px; display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero__meta i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); display: inline-block; }

/* showpiece — a fake product window */
.showpiece {
  margin-top: 64px;
  border-radius: var(--r-2xl);
  background: var(--surface);
  /* tonal lift, no border — ambient shadow + ghost ring */
  box-shadow: var(--shadow-4), inset 0 0 0 1px var(--hairline);
  overflow: hidden;
  position: relative;
  --rx: 0deg; --ry: 0deg; --py: 0px;
  transform: translate3d(0, var(--py), 0) perspective(1800px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .4s cubic-bezier(.2,.6,.2,1);
  transform-style: preserve-3d;
}
.showpiece::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px 240px at 50% -10%, var(--tint-1), transparent 60%);
  pointer-events: none;
}
.showpiece__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: var(--surface-lo);
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}
.showpiece__dots { display: inline-flex; gap: 6px; }
.showpiece__dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--surface-container); }
.showpiece__path { flex: 1; text-align: center; }
.showpiece__path span { color: var(--ink); }

.showpiece__stage {
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  min-height: 480px;
}
.spaside {
  background: var(--surface-lo);
  padding: 16px;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px;
}
.spaside__sect { font-family: var(--sans); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 14px 8px 6px; font-weight: 600; }
.spaside__item { padding: 8px 10px; border-radius: var(--r-md); color: var(--ink-dim); display: flex; align-items: center; gap: 10px; transition: background .15s; }
.spaside__item:hover { background: color-mix(in oklab, var(--surface) 70%, transparent); }
.spaside__item.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.spaside__item::before { content: ""; width: 14px; height: 14px; border-radius: var(--r-xs); background: var(--surface-container); }
.spaside__count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }

.spdoc {
  padding: 32px; position: relative;
  background: var(--surface);
}
.spdoc__paper {
  background: var(--surface); color: var(--ink);
  border-radius: var(--r-lg); padding: 32px; height: 100%;
  box-shadow: var(--shadow-3);
  position: relative;
  font-family: var(--sans);
}
.spdoc__paper h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.spdoc__paper h2 { margin: 0 0 14px; font-family: var(--serif); font-size: 26px; line-height: 1.1; font-weight: 400; letter-spacing: -0.01em; }
.spdoc__paper p { font-size: 11px; line-height: 1.7; color: var(--ink-dim); margin: 0 0 8px; }
.spdoc__line { height: 8px; background: var(--surface-container); border-radius: var(--r-xs); margin-bottom: 7px; }
.spdoc__line.s { width: 40%; }
.spdoc__line.m { width: 70%; }
.spdoc__line.l { width: 92%; }
.spdoc__field {
  position: absolute;
  border-radius: var(--r-md);
  font-family: var(--mono); font-size: 9px;
  padding: 4px 8px; letter-spacing: 0.05em; text-transform: uppercase;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  background: color-mix(in oklab, var(--signer, var(--accent)) 12%, transparent);
  /* dotted border + soft halo so each signer's fields obviously belong together */
  outline: 2px dotted var(--signer, var(--accent));
  outline-offset: -2px;
  color: var(--signer, var(--accent));
  box-shadow: 0 4px 14px -6px color-mix(in oklab, var(--signer, var(--accent)) 35%, transparent);
}
/* signer 1 — blue */
.spdoc__field.--s1 { --signer: #2E5C99; }
/* signer 2 — red */
.spdoc__field.--s2 { --signer: #B33A2A; }

/* signed-in cursive — what the signer wrote */
.spdoc__sig {
  font-family: "Homemade Apple", "Caveat", "Brush Script MT", cursive;
  text-transform: none;
  letter-spacing: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}
.spdoc__init {
  font-family: "Caveat", "Homemade Apple", "Brush Script MT", cursive;
  text-transform: none;
  letter-spacing: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.spdoc__date {
  font-family: "Caveat", "Homemade Apple", cursive;
  text-transform: none;
  letter-spacing: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

/* tag chip above each field showing who it belongs to */
.spdoc__field-tag {
  position: absolute; top: -10px; left: 6px;
  background: var(--signer, var(--accent));
  color: #FFFFFF;
  font-family: var(--mono); font-size: 8px;
  padding: 2px 6px; border-radius: 999px;
  letter-spacing: 0.05em;
  line-height: 1;
}

/* layout — three signer-1 fields top, two signer-2 fields bottom-right */
.spdoc__field.--sig   { left: 28px;  bottom: 116px; width: 200px; height: 52px; }
.spdoc__field.--date  { right: 28px; bottom: 116px; width: 130px; height: 42px; }
.spdoc__field.--init  { left: 28px;  bottom: 56px;  width: 78px;  height: 38px; }
.spdoc__field.--sig2  { right: 28px; bottom: 56px;  width: 200px; height: 52px; }
.spdoc__field.--init2 { right: 240px; bottom: 56px; width: 78px;  height: 38px; }

.spright { background: var(--surface-lo); padding: 18px; }
.spright__h { font-family: var(--sans); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 14px; font-weight: 600; }
.spsigner { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--r-md); background: var(--surface); margin-bottom: 8px; box-shadow: var(--shadow-1); }
.spsigner__av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--accent-ink); }
.spsigner__av.b { background: linear-gradient(135deg, var(--mint), color-mix(in oklab, var(--mint) 70%, black)); }
.spsigner__av.c { background: linear-gradient(135deg, var(--lavender), color-mix(in oklab, var(--lavender) 70%, black)); }
.spsigner__meta { flex: 1; font-size: 12px; }
.spsigner__meta b { display: block; font-weight: 500; color: var(--ink); }
.spsigner__meta span { font-size: 11px; color: var(--muted); }
.spsigner__status { font-family: var(--mono); font-size: 10px; padding: 4px 8px; border-radius: var(--r-xs); letter-spacing: 0.05em; }
.spsigner__status.done { background: color-mix(in oklab, var(--mint) 15%, transparent); color: var(--mint); }
.spsigner__status.pending { background: var(--surface-lo); color: var(--ink-dim); }

.spright__chart { margin-top: 22px; padding: 14px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-1); }
.spright__chart h5 { margin: 0 0 12px; font-family: var(--sans); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 50px; }
.bars i { flex: 1; background: linear-gradient(180deg, var(--accent), var(--accent-2)); border-radius: 2px 2px 0 0; opacity: 0.35; }
.bars i.hi { opacity: 1; }

/* ── logo strip ──────────────────────────────────────────────────── */
.logos {
  /* Deep forest band with depth and variation:
     - linear base from green-950 → green-800 (top-to-bottom) for a subtle
       light-from-above gravity
     - radial highlight from upper-center for a dimensional "spotlight"
     - second radial in the lower-right with a deeper forest, to break the
       symmetry and add organic variation
     - top + bottom inset shadows in pure black 28% for sealed-band depth */
  position: relative;
  padding: 64px 0;
  background:
    radial-gradient(60% 90% at 50% 0%, color-mix(in oklab, #15803D 35%, transparent) 0%, transparent 70%),
    radial-gradient(40% 70% at 85% 100%, color-mix(in oklab, #052E16 70%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, #052E16 0%, #14532D 50%, #166534 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(0, 0, 0, 0.40),
    inset 0 12px 24px -12px rgba(0, 0, 0, 0.45),
    inset 0 -12px 24px -12px rgba(0, 0, 0, 0.45);
}
/* Subtle horizontal vignette in deep forest so the marquee dissolves into
   the band edges rather than terminating at a hard cut. Plus a fine noise
   layer for organic texture — a 1px SVG noise tile blown up provides grain
   without an external asset. */
.logos::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(
      90deg,
      #052E16 0%,
      rgba(5, 46, 22, 0) 10%,
      rgba(5, 46, 22, 0) 90%,
      #052E16 100%
    );
}
.logos::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}
.logos > * { position: relative; z-index: 1; }

/* Brighten marquee text inside the dark band so spotlight + edge states both
   read. Edge color (--faint replacement) becomes a soft mint; per-industry
   center colors shift from Tailwind-700s to brighter 400/300 variants so
   the deep-color names (legal, finance, education, nonprofit, government,
   enterprise, smallbiz) actually pop instead of vanishing into the bg. */
.logos .logos__list--marquee {
  --faint: #A7F3D0;
  color: #A7F3D0;
}
.logos .logos__list--marquee span[data-industry="individuals"]  { --ind-color: #F472B6; } /* pink-400 */
.logos .logos__list--marquee span[data-industry="legal"]        { --ind-color: #60A5FA; } /* blue-400 */
.logos .logos__list--marquee span[data-industry="smallbiz"]     { --ind-color: #34D399; } /* emerald-400 */
.logos .logos__list--marquee span[data-industry="realestate"]   { --ind-color: #FBBF24; } /* amber-400 */
.logos .logos__list--marquee span[data-industry="healthcare"]   { --ind-color: #22D3EE; } /* cyan-400 */
.logos .logos__list--marquee span[data-industry="enterprise"]   { --ind-color: #CBD5E1; } /* slate-300 */
.logos .logos__list--marquee span[data-industry="construction"] { --ind-color: #FB923C; } /* orange-400 */
.logos .logos__list--marquee span[data-industry="education"]    { --ind-color: #818CF8; } /* indigo-400 */
.logos .logos__list--marquee span[data-industry="freelancers"]  { --ind-color: #C084FC; } /* purple-400 */
.logos .logos__list--marquee span[data-industry="nonprofit"]    { --ind-color: #4ADE80; } /* green-400 */
.logos .logos__list--marquee span[data-industry="finance"]      { --ind-color: #93C5FD; } /* blue-300 */
.logos .logos__list--marquee span[data-industry="hr"]           { --ind-color: #F472B6; } /* pink-400 */
.logos .logos__list--marquee span[data-industry="sales"]        { --ind-color: #FB923C; } /* orange-400 */
.logos .logos__list--marquee span[data-industry="government"]   { --ind-color: #94A3B8; } /* slate-400 */
.logos .logos__list--marquee span[data-industry="startups"]     { --ind-color: #F0ABFC; } /* fuchsia-300 */
.logos__inner { display: flex; align-items: center; gap: 48px; justify-content: space-between; flex-wrap: wrap; }
.logos__lbl { font-family: var(--sans); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0; font-weight: 600; }
.logos__list { display: flex; gap: 40px; flex-wrap: wrap; align-items: center; color: var(--faint); }
/* Base typography for the static (non-marquee) list. The marquee variant
   below overrides everything with its own bigger spotlight type. */
.logos__list span { font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; opacity: 0.65; }
.logos__list span.alt { font-family: var(--mono); font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; }
.logos__list span.bold { font-family: var(--sans); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }

/* ── feature grid ────────────────────────────────────────────────── */
.features {
  display: grid; gap: 24px; grid-template-columns: repeat(4, 1fr);
  margin-top: 64px;
}
.feature {
  background: var(--surface);
  padding: 36px 32px; min-height: 280px;
  display: flex; flex-direction: column;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  transition: transform .3s cubic-bezier(.2,.6,.2,1), box-shadow .3s ease;
}
.feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
}
.feature__num { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.05em; }
.feature__icon {
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--surface-lo);
  margin: 18px 0 24px;
  display: grid; place-items: center; color: var(--accent);
}
.feature__icon svg { width: 22px; height: 22px; }
.feature__title { font-family: var(--serif); font-size: 26px; line-height: 1.15; margin: 0 0 12px; letter-spacing: -0.01em; font-weight: 400; }
.feature__copy { font-size: 14px; color: var(--ink-dim); margin: 0; line-height: 1.55; }
.feature__hint { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: auto; padding-top: 20px; }

/* ── how it works (legacy 2-col list — fallback) ──────────────── */
.how { display: grid; gap: 56px; grid-template-columns: 340px 1fr; align-items: start; margin-top: 64px; }
.how__steps {
  display: flex; flex-direction: column; gap: 8px;
  background: transparent;
  border-radius: var(--r-xl);
}
.step {
  background: var(--surface);
  padding: 24px 28px;
  display: grid; grid-template-columns: 60px 1fr auto; gap: 16px; align-items: center;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.step__num { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: 0.05em; }
.step__title { font-family: var(--serif); font-size: 22px; margin: 0 0 4px; letter-spacing: -0.01em; font-weight: 400; }
.step__copy { font-size: 13px; color: var(--ink-dim); margin: 0; }
.step__time { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* ── how-it-works: 3 illustrated flip cards ──────────────────────── */
.how3 { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); margin-top: 56px; position: relative; }

/* Animated connector lines between the cards (decorative SVG overlay).
   viewBox=100x100 with preserveAspectRatio="none" lets us position paths
   as percentages of the .how3 container width and height. Cards sit on
   z-index 1 so the SVG layer (z-index 0) reads as "behind" them. */
.how3-connectors {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.how3-connectors path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-dasharray: 5 7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px currentColor);
  animation: how3-flow 1.6s linear infinite;
}
/* Three signer journeys — each path uses its own color for stroke + glow */
.how3-connectors .conn--pink  { color: #F472B6; }
.how3-connectors .conn--amber { color: #FBBF24; }
.how3-connectors .conn--cyan  { color: #22D3EE; }

/* Sequential connector layer (between users ON card 2). Elevated above
   cards so the lines are visible across the card body, between the user
   icons. Thinner stroke than the inter-card connectors since these are
   shorter "hops" between adjacent signers. */
.how3-connectors--seq {
  z-index: 2;
}
.how3-connectors--seq .conn {
  stroke-width: 1.8;
  stroke-dasharray: 3 5;
}

/* User icons (HTML so they don't get distorted by SVG's non-uniform
   viewBox scaling). Positioned absolutely over the .how3 grid with
   left/top % matching the SVG path endpoints. z-index 2 so they sit on
   top of cards (z-index 1) instead of being hidden behind them. */
.how3-users {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.how3-user {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #FFFFFF;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.9),
    0 0 12px currentColor,
    0 2px 5px rgba(0, 0, 0, 0.18);
}
.how3-user .bi { display: inline-block; line-height: 1; }
.how3-user--pink  { background: #F472B6; color: #F472B6; }
.how3-user--amber { background: #FBBF24; color: #FBBF24; }
.how3-user--cyan  { background: #22D3EE; color: #22D3EE; }
/* The icon glyph stays white; the colored box-shadow uses currentColor */
.how3-user .bi { color: #FFFFFF; }

.how3-card { position: relative; z-index: 1; }

@keyframes how3-flow {
  to { stroke-dashoffset: -24; }
}

/* Hide connectors on narrow viewports where cards stack vertically */
@media (max-width: 960px) {
  .how3-connectors { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .how3-connectors path { animation: none; }
}
.how3-card {
  position: relative; perspective: 1400px;
  width: 100%; max-width: 260px;
  justify-self: center;
  min-height: 400px;
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s ease, transform .8s ease;
  transition-delay: calc(var(--i, 0) * 120ms);
}
.how3-card.is-on { opacity: 1; transform: translateY(0); }
.how3-card__inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.5, 0, .2, 1);
}
/* Allow the big script word on the front face to overflow above the card. */
.how3, .how3-card, .how3-card__inner { overflow: visible; }
.how3-card:hover .how3-card__inner,
.how3-card:focus-within .how3-card__inner { transform: rotateY(180deg); }

.how3-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--r-xl);
  padding: 24px 24px 24px;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-2);
  transition: opacity .25s ease;
}
/* Back face still clips its rotated content (otherwise the title escapes). */
.how3-face--back { overflow: hidden; }
.how3-face--front {
  background: var(--surface);
  opacity: 1;
}
.how3-face--back {
  background: var(--surface);
  padding: 28px 24px 24px;
  opacity: 0; transform: rotateY(180deg);
}
.how3-card:hover .how3-face--front,
.how3-card:focus-within .how3-face--front { opacity: 0; transition-delay: .35s; }
.how3-card:hover .how3-face--back,
.how3-card:focus-within .how3-face--back { opacity: 1; transition-delay: .55s; }

/* All three cards now share one neutral surface tint so the image-area
   side-margins read uniformly across the row. The --pip stays per-card
   so the small status dot on the back face keeps its color story. */
.how3-card--red,
.how3-card--blue,
.how3-card--green {
  --tile-tint: #F5F5F5;  /* uniform near-white surface across all three */
}
.how3-card--red    { --pip: #9A6B45; }
.how3-card--blue   { --pip: #5C6C7E; }
.how3-card--green  { --pip: #5C7259; }

.how3__badge {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: #FFC107; color: #0b1220;
  font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  box-shadow: 0 0 0 5px color-mix(in oklab, #FFC107 22%, transparent), var(--shadow-1);
  position: relative; z-index: 2;
}

/* Footer row pins badge + pill to the bottom-left of the card. */
.how3__footer {
  display: flex; align-items: center; gap: 14px;
  margin-top: 18px;
}

/* Bold script word, now contained inside the card top-right alongside the
   badge. Burgundy reads as classic signature ink — warm-against-cool
   contrast to the forest brand, distinct from both forest accents and the
   yellow step badges. Three named roles: forest = voice, yellow = process,
   burgundy = signature. */
.how3__signword {
  position: absolute;
  top: 14px; right: 18px;
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
  font-size: 84px; line-height: 1;
  color: #9F1239;
  pointer-events: none;
  white-space: nowrap;
  transform: rotate(-3deg);
  transform-origin: right top;
  z-index: 1;
  text-shadow: 0 1px 0 rgba(136, 19, 55, 0.28);
}
/* "Signing" has both a tall ascender (S) and a descender (g) — sits visually
   lower than "Get" / "Done!" at the same top value. Nudge it up to align. */
.how3-card--blue .how3__signword { top: 4px; }

/* GSD letter highlight — burgundy signature-ink color (same as the flip-card
   script word) applied to the G/S/D letters anywhere they appear inline.
   Used in the hero headline ("Get it Signed. Done in minutes.") to call out
   the GSD acronym hiding in the copy. */
.gsd-letter { color: #9F1239; font-weight: inherit; }

/* "Done!" anchors to the LEFT of card 3 for a mirrored composition that
   bookends the row (Get pulls right → Done! pulls left). Tilt also flips
   so the lean mirrors the other two. */
.how3-card--green .how3__signword {
  right: auto; left: 18px;
  transform-origin: left top;
  transform: rotate(3deg);
}

.how3__pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: var(--accent-ink);
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 500;
  box-shadow: var(--shadow-1);
}
.how3__pill svg { width: 12px; height: 12px; }

.how3__slot {
  flex: 1;
  margin: 56px -24px 0;
  min-height: 220px; position: relative;
  background: #FFFFFF;
  overflow: hidden;
  box-shadow: inset 0 -1px 0 var(--hairline);
}
.how3__slot image-slot {
  width: 100%; height: 100%; display: block;
}

/* back face */
.how3-back__title {
  font-family: var(--serif); font-size: 24px; line-height: 1.15;
  letter-spacing: -0.01em; font-weight: 400; color: var(--ink);
  margin: 0 0 18px;
}
.how3-back__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.how3-back__list li {
  font-size: 13px; color: var(--ink-dim);
  padding-left: 22px; position: relative; line-height: 1.5;
}
.how3-back__list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 12px; height: 1px; background: var(--pip);
}
.how3-back__foot {
  margin-top: 18px; padding-top: 14px;
  box-shadow: inset 0 1px 0 var(--hairline);
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  display: flex; justify-content: space-between;
}
.how3-back__foot span:last-child { color: var(--accent); }

/* the placeholder image dropped into the slot */
.how3__slot-ph {
  position: absolute; inset: 14px;
  display: grid; place-items: center;
  border-radius: 8px;
  background:
    repeating-linear-gradient(45deg, transparent 0 8px, color-mix(in oklab, var(--pip) 18%, transparent) 8px 9px),
    color-mix(in oklab, var(--pip) 5%, var(--bg));
  color: var(--ink-dim);
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  pointer-events: none;
}
/* ── comparison ───────────────────────────────────────────────────── */
.compare {
  margin-top: 56px;
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-3);
}
.compare table { width: 100%; border-collapse: collapse; }
.compare th, .compare td {
  padding: 20px 24px; text-align: left;
  font-size: 14px;
}
.compare thead th {
  font-family: var(--sans); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
  font-weight: 600;
  background: var(--surface-lo);
  padding-top: 18px; padding-bottom: 18px;
}
.compare thead .us { color: var(--accent); position: relative; }
.compare thead .us::after { content: "★"; margin-left: 6px; }
.compare tbody tr {
  /* tonal striping in place of dividers */
  background: var(--surface);
}
.compare tbody tr:nth-child(even) { background: color-mix(in oklab, var(--surface-lo) 50%, var(--surface)); }
.compare tbody td { color: var(--ink-dim); }
.compare tbody td.us { color: var(--ink); background: color-mix(in oklab, var(--accent) 6%, transparent); }
.compare tbody td.feat { color: var(--ink); font-weight: 500; }
.compare .yes { color: var(--mint); }
.compare .no  { color: var(--muted); }
.compare .check { width: 14px; height: 14px; display: inline-block; }

/* ── compare table: row-by-row stagger + E-Sign column sweep ─────── */
.compare tbody tr {
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.2,.6,.2,1), transform .55s cubic-bezier(.2,.6,.2,1);
}
.compare.is-on tbody tr {
  opacity: 1; transform: none;
  transition-delay: calc(var(--ri, 0) * 80ms + 250ms);
}

.compare tbody td.us { position: relative; overflow: hidden; }
.compare tbody td.us::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%,
              color-mix(in oklab, var(--accent) 35%, transparent) 40%,
              color-mix(in oklab, var(--accent) 35%, transparent) 60%,
              transparent 100%);
  transform: translateX(-100%);
  pointer-events: none; opacity: 0;
}
.compare.is-on tbody td.us::before {
  animation: cmp-sweep 1.4s cubic-bezier(.2,.6,.2,1) forwards;
  animation-delay: calc(var(--ri, 0) * 80ms + 750ms);
}
@keyframes cmp-sweep {
  0%   { transform: translateX(-100%); opacity: 0; }
  20%  { opacity: 0.9; }
  80%  { opacity: 0.6; }
  100% { transform: translateX(100%); opacity: 0; }
}

/* Tiny "data point" ping on each E-Sign cell as it animates in */
.compare tbody td.us::after {
  content: ""; position: absolute; left: 22px; top: 50%;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); transform: translateY(-50%) scale(0);
  pointer-events: none; opacity: 0;
}
.compare.is-on tbody td.us::after {
  animation: cmp-ping .8s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--ri, 0) * 80ms + 500ms);
}
@keyframes cmp-ping {
  0%   { transform: translateY(-50%) scale(0); opacity: 0; }
  40%  { transform: translateY(-50%) scale(2.6); opacity: 1; }
  100% { transform: translateY(-50%) scale(1); opacity: 0; }
}

/* respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .compare tbody tr { transition: none; opacity: 1; transform: none; }
  .compare tbody td.us::before,
  .compare tbody td.us::after { animation: none !important; }
}

/* ── quote band ───────────────────────────────────────────────────── */
.quote { padding: clamp(60px, 9vw, 110px) 0; }
.quote__big {
  font-family: var(--serif); font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.2; letter-spacing: -0.01em;
  text-wrap: balance; max-width: 24ch;
}
.quote__big em { color: var(--accent); font-style: italic; }
.quote__meta { margin-top: 32px; display: flex; align-items: center; gap: 14px; }
.quote__av {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  display: grid; place-items: center; font-weight: 600;
  box-shadow: var(--shadow-1);
}
.quote__who b { display: block; font-size: 14px; }
.quote__who span { font-size: 12px; color: var(--muted); font-family: var(--sans); letter-spacing: 0.02em; }

/* ── CTA band — full forest fill + ambient glow ───────────────────── */
.ctaband {
  position: relative;
  margin-top: 80px;
  border-radius: var(--r-2xl);
  /* Layered forest gradient: deeper at edges, brighter through the middle */
  background:
    radial-gradient(900px 380px at 50% -10%, color-mix(in oklab, #FFFFFF 22%, var(--accent)), transparent 60%),
    linear-gradient(165deg, var(--accent-2) 0%, var(--accent) 100%);
  color: #FFFFFF;
  padding: clamp(48px, 7vw, 96px) clamp(32px, 6vw, 80px);
  text-align: center;
  /* Ambient glow halo around the band — soft, large, forest-tinted */
  box-shadow:
    0 30px 80px -20px color-mix(in oklab, var(--accent) 60%, transparent),
    0 12px 36px -8px color-mix(in oklab, var(--accent) 40%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
/* Subtle texture moment: a faint diagonal sheen across the top quarter */
.ctaband::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(700px 240px at 80% -40%, rgba(255, 255, 255, 0.10), transparent 60%),
    radial-gradient(500px 200px at 10% 120%, rgba(255, 255, 255, 0.05), transparent 60%);
}
.ctaband > * { position: relative; z-index: 1; }
.ctaband__t {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  font-weight: 400;
  color: #FFFFFF;
}
.ctaband__t em {
  color: rgba(255, 255, 255, 0.78);
  font-style: italic;
  font-weight: 400;
}
.ctaband__c {
  color: rgba(255, 255, 255, 0.82);
  margin: 20px auto 32px;
  max-width: 50ch;
  line-height: 1.55;
}
/* Button on the band flips to a white surface with forest text — inverse pattern */
.ctaband .btn--primary {
  background: #FFFFFF;
  color: var(--accent);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.50) inset,
    0 14px 36px -10px rgba(0, 0, 0, 0.30),
    0 4px 12px -2px rgba(0, 0, 0, 0.18);
}
.ctaband .btn--primary:hover {
  background: var(--accent-soft);
  color: var(--accent-2);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.50) inset,
    0 18px 44px -10px rgba(0, 0, 0, 0.35),
    0 4px 12px -2px rgba(0, 0, 0, 0.20);
}

/* ── ctaband INVERTED — when the CTA lives inside .section--how (deep
   forest backdrop), flip its color story so it reads as a clean light
   card on the forest stage, matching the white flip cards above it. */
.ctaband--inverted {
  margin-top: 64px;
  background: #FFFFFF;
  color: var(--ink);
  box-shadow:
    0 32px 80px -22px rgba(0, 0, 0, 0.35),
    0 12px 36px -8px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}
.ctaband--inverted::before {
  /* Subtle forest-tinted wash from upper-right corner — keeps the card
     anchored to the green stage instead of feeling stuck on top of it. */
  background:
    radial-gradient(700px 240px at 90% -30%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(500px 200px at 10% 120%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 60%);
}
.ctaband--inverted .ctaband__t { color: var(--ink); }
.ctaband--inverted .ctaband__t em { color: var(--accent); }
.ctaband--inverted .ctaband__c { color: var(--ink-dim); }
.ctaband--inverted .btn--primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: var(--accent-ink);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.20) inset,
    0 14px 36px -10px color-mix(in oklab, var(--accent) 60%, transparent),
    0 4px 12px -2px rgba(0, 0, 0, 0.12);
}
.ctaband--inverted .btn--primary:hover {
  background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent-2) 100%);
  color: var(--accent-ink);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.20) inset,
    0 18px 44px -10px color-mix(in oklab, var(--accent-2) 60%, transparent),
    0 4px 12px -2px rgba(0, 0, 0, 0.16);
}

/* ── footer ───────────────────────────────────────────────────────── */
.foot {
  padding: 72px 0 40px; margin-top: 80px;
  box-shadow: inset 0 1px 0 var(--hairline);
}
.foot__grid { display: grid; gap: 56px; grid-template-columns: 1.6fr repeat(4, 1fr); }
.foot__grid--lean { grid-template-columns: 2fr 1fr 1fr; }
.foot__brand { max-width: 30ch; }
.foot__brand p { font-size: 13px; color: var(--ink-dim); margin: 16px 0 0; line-height: 1.55; }
.foot__col h5 { font-family: var(--sans); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; font-weight: 600; }
.foot__col a { display: block; padding: 6px 0; color: var(--ink-dim); font-size: 13px; transition: color .2s; }
.foot__col a:hover { color: var(--accent); }
.foot__bottom {
  margin-top: 64px; padding-top: 24px;
  box-shadow: inset 0 1px 0 var(--hairline);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;
}

.foot__build { opacity: 0; transition: opacity 0.2s; }
.foot__bottom:hover .foot__build { opacity: 1; }

/* ── pricing page ─────────────────────────────────────────────────── */
.pp-hero { padding: clamp(60px, 9vw, 110px) 0 clamp(20px, 4vw, 40px); }
.pp-hero__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.pp-hero__t { margin: 0; font-family: var(--serif); font-size: clamp(48px, 7vw, 88px); line-height: 1.02; letter-spacing: -0.02em; font-weight: 400; }
.pp-hero__t em { font-style: italic; color: var(--accent); font-weight: 400; }
.pp-hero__c { color: var(--ink-dim); margin: 24px 0 0; max-width: 56ch; font-size: 17px; line-height: 1.6; }

.pp-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.toggle {
  display: inline-flex; padding: 4px; gap: 2px;
  background: var(--surface-lo);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.toggle button {
  appearance: none; background: transparent; border: 0; color: var(--ink-dim);
  font: inherit; font-size: 13px; padding: 8px 16px; border-radius: var(--r-xs); cursor: pointer;
  font-family: var(--sans); font-weight: 500;
  transition: background .2s, color .2s, box-shadow .2s;
}
.toggle button.is-on {
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-1);
}
.toggle .save { font-family: var(--mono); font-size: 10px; color: var(--accent); margin-left: 6px; }

.plans {
  display: grid; gap: 24px;
  /* Three cards now: PayGo · Starter · Rate card. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
  max-width: 1180px;
  margin: 48px auto 0;
}
@media (max-width: 1040px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 420px)); max-width: 880px; }
}
@media (max-width: 720px) {
  .plans { grid-template-columns: 1fr; max-width: 460px; }
}
.plan {
  background: var(--surface);
  padding: 40px 32px;
  display: flex; flex-direction: column; position: relative;
  min-height: 540px;
  border-radius: var(--r-xl);
  /* Inset hairline ring + ambient drop shadow — matches the inset-ring
     pattern on .plan--featured so both cards share the same edge language. */
  box-shadow: var(--shadow-2), inset 0 0 0 1px var(--hairline-strong);
  transition: transform .3s cubic-bezier(.2,.6,.2,1), box-shadow .3s ease;
}
.plan:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3), inset 0 0 0 1px var(--hairline-strong);
}
.plan--featured {
  /* Saturated forest fill — matches the CTA band and Envelope estimate
     row. Subtle 180° gradient gives depth (slightly deeper at the bottom). */
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
  color: var(--accent-ink);
  box-shadow:
    var(--shadow-3),
    0 24px 60px -20px color-mix(in oklab, var(--accent) 55%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
/* All text + icon overrides inside the featured (dark forest) card */
.plan--featured .plan__tag  { color: #FFFFFF; }
.plan--featured .plan__name { color: var(--accent-ink); }
.plan--featured .plan__desc { color: rgba(255, 255, 255, 0.78); }
.plan--featured .plan__amt  { color: var(--accent-ink); }
.plan--featured .plan__per  { color: rgba(255, 255, 255, 0.72); }
.plan--featured .plan__list li { color: rgba(255, 255, 255, 0.92); }
.plan--featured .plan__list li::before {
  background: rgba(255, 255, 255, 0.22);
}
.plan--featured .plan__list li::after {
  border-left-color:  var(--accent-ink);
  border-bottom-color: var(--accent-ink);
}
.plan--featured .inline-amt { color: var(--accent-ink); font-weight: 600; }
/* Primary CTA on the featured card flips to a white surface with forest
   text (inverse pattern — same as the bottom CTA band button). */
.plan--featured .plan__cta.btn--primary {
  background: #FFFFFF;
  color: var(--accent);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.50) inset,
    0 14px 36px -10px rgba(0, 0, 0, 0.30),
    0 4px 12px -2px rgba(0, 0, 0, 0.16);
}
.plan--featured .plan__cta.btn--primary:hover {
  background: var(--accent-soft);
  color: var(--accent-2);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.50) inset,
    0 18px 44px -10px rgba(0, 0, 0, 0.35),
    0 4px 12px -2px rgba(0, 0, 0, 0.20);
}
.plan__tag { font-family: var(--sans); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
/* (forest-fill featured card has its tag color set above to #FFFFFF —
   the earlier rule that pointed at var(--accent) made it invisible on the
   dark forest background and is intentionally removed.) */
.plan__name { font-family: var(--serif); font-size: 38px; line-height: 1; margin: 12px 0 8px; letter-spacing: -0.015em; font-weight: 400; }
.plan__desc { font-size: 13px; color: var(--ink-dim); margin: 0; min-height: 38px; line-height: 1.5; }
.plan__price { margin: 32px 0 12px; display: flex; align-items: baseline; gap: 8px; }
.plan__amt { font-family: var(--serif); font-size: 64px; line-height: 1; letter-spacing: -0.03em; font-weight: 400; color: var(--ink); }
.plan__per { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.plan__list { list-style: none; padding: 0; margin: 24px 0; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.plan__list li { font-size: 13px; color: var(--ink-dim); padding-left: 26px; position: relative; line-height: 1.5; }
.plan__list li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: color-mix(in oklab, var(--accent) 14%, transparent);
}
.plan__list li::after {
  content: ""; position: absolute; left: 5px; top: 8px;
  width: 6px; height: 4px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
.plan__cta { width: 100%; justify-content: center; margin-top: auto; }

/* ── Rate card variant — third column in the plans grid ────────────
   Shares the same outer chrome (border ring, shadow, padding) as the
   other plan cards so the row reads as one coherent set. The animated
   .eyebrow pill ("Sheet 03 — Rate card") sits at the top in place of
   the usual mono .plan__tag. */
.plan--ratecard { padding: 32px 28px 28px; }
.plan--ratecard .plan__eyebrow {
  align-self: flex-start;
  margin: 0 0 18px;
}
.plan__name--rates {
  font-size: 30px;
  margin: 0 0 6px;
}
.plan--ratecard .plan__desc {
  min-height: 0;
  margin: 0 0 18px;
}
.plan__rate-group { margin: 0 0 18px; }
.plan__rate-group:last-of-type { margin-bottom: 14px; }
.plan__rate-h {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
}
.plan__rate-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  font-size: 12.5px;
  line-height: 1.4;
}
.plan__rate-row span:first-child { color: var(--ink-dim); }
.plan__rate-row span:last-child {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.plan__rate-foot {
  margin: auto 0 0;
  padding: 14px 0 0;
  border-top: 1px dashed var(--hairline);
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
  font-style: italic;
}
/* Plan CTA gets a forest-green border ring — even on the ghost variant —
   so the PayGo "Start free" button picks up the brand color at its edge
   without filling the whole button (the featured Starter card keeps its
   gradient-filled primary button untouched). */
.plan__cta.btn--ghost {
  box-shadow: inset 0 0 0 1.5px var(--accent);
  color: var(--accent);
}
.plan__cta.btn--ghost:hover {
  box-shadow: inset 0 0 0 1.5px var(--accent-2), var(--shadow-1);
  color: var(--accent-2);
  background: var(--accent-soft);
}

/* ── minicalc: inline envelope estimator inside the PayGo plan card ─── */
.minicalc {
  margin: 18px 0 20px;
  padding: 16px;
  background: var(--surface-lo);
  border-radius: var(--r-md);
}
.minicalc__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}
.minicalc__row + .minicalc__row { box-shadow: inset 0 1px 0 var(--hairline); }
.minicalc__row label {
  font-size: 13px; color: var(--ink-dim); font-weight: 500;
  font-family: var(--sans);
}
.minicalc__row input[type="number"] {
  width: 78px; padding: 8px 10px;
  background: var(--surface); color: var(--ink);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--hairline);
  border-radius: var(--r-xs); font: inherit; font-family: var(--mono); font-size: 13px; text-align: right;
  transition: box-shadow .2s;
}
.minicalc__row input[type="number"]:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--hairline), inset 0 -2px 0 var(--accent);
}

.minicalc__check {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding-top: 10px;
  box-shadow: inset 0 1px 0 var(--hairline);
  font-size: 13px; color: var(--ink-dim); cursor: pointer;
}
.minicalc__check input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--accent);
  margin: 0;
}
.minicalc__check-meta {
  margin-left: auto;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
/* Result row at the bottom of the PayGo mini-calc — shows the live envelope
   estimate. Distinct from the headline price (which stays "$0 / month")
   so the price headline communicates the subscription story (free) and the
   result row communicates the usage story (per-envelope cost). */
.minicalc__result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 16px;
  margin: 8px 0 0;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: var(--accent-ink);
  border-radius: var(--r-md);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 8px 22px -8px color-mix(in srgb, var(--accent) 55%, transparent);
}
.minicalc__result-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.80);
  font-weight: 600;
}
.minicalc__result-amt {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}

/* Centered term-picker band — sits between the hero copy and the plan grid. */
.pp-term-wrap {
  margin-top: 24px;
  margin-bottom: 28px;
}
.pp-controls--centered {
  justify-content: center;
}
/* Forest-green theme border on the billing toggle + the currency dropdown
   when they live inside the pricing term band. Scoped here so the
   language dropdown in the top nav keeps its neutral hairline. */
.pp-controls .toggle {
  box-shadow:
    var(--shadow-1),
    inset 0 0 0 1.5px var(--accent);
}
/* Active billing-term button: fully forest-filled with white text + a
   forest glow underneath so the selection is unambiguous against the
   adjacent unselected button (which stays neutral inside the toggle). */
.pp-controls .toggle button.is-on {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: var(--accent-ink);
  font-weight: 600;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 8px 20px -8px color-mix(in oklab, var(--accent) 55%, transparent),
    0 2px 6px rgba(0, 0, 0, 0.10);
}
.pp-controls .toggle button.is-on .save { color: rgba(255, 255, 255, 0.85); }
.pp-controls .dropdown__btn {
  box-shadow: inset 0 0 0 1.5px var(--accent);
  color: var(--accent);
}
.pp-controls .dropdown__btn:hover {
  background: var(--accent-soft);
  color: var(--accent-2);
  box-shadow: inset 0 0 0 1.5px var(--accent-2), var(--shadow-1);
}
.pp-controls .dropdown__btn .chev { opacity: 0.7; }

/* Currency dropdown button shows the code AND the full name. The mono
   "USD" code stays prominent; the sans full name reads as the supporting
   half. Separator dot between them. */
.dropdown__btn--ccy { gap: 8px; }
.dropdown__btn-sep {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 12px;
  margin: 0 1px;
}
.dropdown__btn-name {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
/* Inside the forest-themed term band, both the code and the name pick up
   the forest accent color so the whole row reads as one branded chip. */
.pp-controls .dropdown__btn--ccy .dropdown__btn-name { color: var(--accent); }
.pp-controls .dropdown__btn--ccy:hover .dropdown__btn-name { color: var(--accent-2); }
.pp-controls .dropdown__btn--ccy .dropdown__btn-sep { color: color-mix(in oklab, var(--accent) 40%, transparent); }

/* ── Language suggestion banner (bottom-right toast) ────────────────────
   Injected by marketing.js geo-detect when the visitor's IP-derived
   country suggests a non-English language. One-click accept switches the
   site; dismiss persists so we don't re-offer. */
.lang-banner {
  position: fixed;
  z-index: 100;
  right: clamp(16px, 4vw, 32px);
  bottom: clamp(16px, 4vw, 32px);
  max-width: 460px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow:
    0 30px 70px -20px rgba(48, 51, 51, 0.32),
    0 12px 30px -8px rgba(48, 51, 51, 0.16),
    inset 0 0 0 1px var(--hairline-strong);
  /* slide-in/out states drive opacity + Y transform */
  transform: translateY(140%);
  opacity: 0;
  transition: transform 360ms cubic-bezier(.22,1,.36,1), opacity 320ms ease;
}
.lang-banner.is-on { transform: translateY(0); opacity: 1; }
.lang-banner.is-leaving {
  transform: translateY(60%);
  opacity: 0;
  transition-duration: 280ms;
}
.lang-banner__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}
.lang-banner__msg {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
  flex: 1 1 200px;
}
.lang-banner__msg strong {
  color: var(--accent);
  font-weight: 600;
}
.lang-banner__accept {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  padding: 9px 14px;
  border-radius: var(--r-md);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
  white-space: nowrap;
}
.lang-banner__accept:hover {
  background: var(--accent-2);
  transform: translateY(-1px);
}
.lang-banner__dismiss {
  background: transparent;
  color: var(--ink-dim);
  border: 0;
  padding: 8px 6px;
  font-family: var(--sans);
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 3px;
}
.lang-banner__dismiss:hover { color: var(--ink); text-decoration-color: var(--ink-dim); }

@media (max-width: 540px) {
  .lang-banner {
    left: 12px; right: 12px; bottom: 12px;
    max-width: none;
    padding: 12px 14px;
  }
  .lang-banner__accept { width: 100%; padding: 11px 14px; }
  .lang-banner__dismiss { width: 100%; padding: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .lang-banner { transition: opacity 200ms ease; transform: none; }
  .lang-banner.is-leaving { transform: none; }
}

.plan__list--compact { margin: 0 0 18px; gap: 10px; }
.plan__list--compact li { font-size: 12.5px; }

/* When PayGo total ticks up, give it a brief pulse so the change is felt. */
@keyframes paygo-tick {
  0%   { color: var(--ink); }
  30%  { color: var(--accent); transform: scale(1.02); }
  100% { color: var(--ink); transform: scale(1); }
}
#paygoTotal.is-ticking { animation: paygo-tick .4s ease; transform-origin: left center; display: inline-block; }

/* — pricing calculator (kept from existing content, restyled) — */
.bom {
  margin-top: 48px;
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.bom__head, .bom__row, .bom__total {
  display: grid; grid-template-columns: 60px 1.6fr 90px 110px 110px;
  align-items: center; gap: 16px;
  padding: 16px 26px;
}
.bom__head {
  background: var(--surface-lo);
  font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600;
}
/* tonal striping — no row dividers */
.bom__row { transition: opacity .2s; }
.bom__row:nth-child(odd) { background: color-mix(in oklab, var(--surface-lo) 30%, var(--surface)); }
.bom__row--zero { opacity: 0.45; }
.bom__row .desc { font-size: 14px; color: var(--ink); }
.bom__row .desc small { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; font-family: var(--mono); }
.bom__row .item { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.bom__row .unit { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.bom__row .amt  { font-family: var(--mono); font-size: 14px; color: var(--ink); text-align: right; }
.bom__row input[type="number"] {
  width: 100%; max-width: 80px; padding: 10px 12px;
  background: var(--surface); color: var(--ink);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--hairline);
  border-radius: var(--r-md); font: inherit; font-family: var(--mono); font-size: 13px; text-align: right;
  transition: box-shadow .2s;
}
.bom__row input[type="number"]:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--hairline), inset 0 -2px 0 var(--accent);
}
.bom__row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }
.bom__total {
  background: var(--surface);
  box-shadow: inset 0 1px 0 var(--hairline);
}
.bom__total .lab { grid-column: 1 / span 4; font-family: var(--serif); font-size: 26px; font-weight: 400; letter-spacing: -0.01em; }
.bom__total .amt { font-family: var(--serif); font-size: 36px; color: var(--accent); letter-spacing: -0.02em; font-weight: 400; }

/* rate card */
.rates { display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); margin-top: 64px; }
.rate {
  padding: 28px;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.rate h3 { font-family: var(--serif); font-size: 26px; margin: 0 0 18px; letter-spacing: -0.01em; font-weight: 400; }
.rate__row {
  display: flex; justify-content: space-between;
  padding: 11px 0;
  font-size: 13px; color: var(--ink-dim);
}
.rate__row + .rate__row { box-shadow: inset 0 1px 0 var(--hairline); }
.rate__row span:last-child { font-family: var(--mono); color: var(--ink); }

/* faq */
.faq {
  margin-top: 48px;
  box-shadow: inset 0 1px 0 var(--hairline);
}
.faq details {
  padding: 28px 0;
  box-shadow: inset 0 -1px 0 var(--hairline);
}
.faq summary {
  cursor: pointer; font-family: var(--serif); font-size: 22px;
  letter-spacing: -0.01em; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-weight: 400;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--muted); font-size: 24px; transition: transform .2s; font-weight: 200; }
.faq details[open] summary::after { content: "−"; color: var(--accent); }
.faq p { color: var(--ink-dim); margin: 18px 0 0; font-size: 14px; max-width: 70ch; line-height: 1.6; }

/* ── reveal animation ────────────────────────────────────────────── */
[data-reveal] > * { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; transition-delay: calc(var(--i, 0) * 80ms); }
[data-reveal].is-on > * { opacity: 1; transform: none; }

/* item-level reveal (sprinkle .r-up on anything) */
.r-up { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1); }
.r-up.is-on { opacity: 1; transform: none; }
.r-up.d1 { transition-delay: 80ms; }
.r-up.d2 { transition-delay: 160ms; }
.r-up.d3 { transition-delay: 240ms; }
.r-up.d4 { transition-delay: 320ms; }
.r-up.d5 { transition-delay: 400ms; }

/* horizontal slide-in for big section headers */
.r-left { opacity: 0; transform: translateX(-32px); transition: opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1); }
.r-left.is-on { opacity: 1; transform: none; }

/* scaling reveal */
.r-zoom { opacity: 0; transform: scale(0.96); transition: opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1); }
.r-zoom.is-on { opacity: 1; transform: none; }

/* parallax target — base transform set inline by JS */
[data-parallax] { will-change: transform; }

/* sticky live-dot pulse */
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--mint) 50%, transparent); }
  60%      { box-shadow: 0 0 0 8px transparent; }
}
.pulse-dot { animation: pulse-dot 1.8s ease-in-out infinite; border-radius: 50%; }

/* logos scroller — gentle horizontal drift */
@keyframes drift-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* ── Audience marquee — bigger, with per-industry color + center spotlight ──
   Each <span> has a data-industry attribute that binds a brand color via
   --ind-color below. A JS loop writes a 0–1 --spotlight var per span based
   on its distance from the viewport center; CSS uses it to scale, brighten,
   and tint the span. Items at the edges read as faint outlines; items in
   the middle pop full-color and large. */
.logos__list--marquee {
  display: flex;
  gap: 96px;
  align-items: center;
  flex-wrap: nowrap;
  width: max-content;
  min-width: 200%;
  animation: drift-x 48s linear infinite;
  color: var(--faint);
  padding: 18px 0;
}
.logos__list--marquee:hover { animation-play-state: paused; }
.logos__list--marquee span {
  white-space: nowrap;
  flex-shrink: 0;
  /* JS sets --spotlight 0–1 (0 = edge, 1 = dead-center). The CSS below
     interpolates color + scale across that range with no JS-side styling. */
  --spotlight: 0;
  --ind-color: var(--accent);
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing: -0.015em;
  font-weight: 400;
  line-height: 1;
  /* Mix from faint (edge) to the industry's brand color (center) */
  color: color-mix(in oklab, var(--faint) calc((1 - var(--spotlight)) * 100%), var(--ind-color));
  /* Wider scale range (0.72 edge → 1.32 center) for more dramatic spotlight */
  transform: scale(calc(0.72 + var(--spotlight) * 0.60));
  /* Always-on soft glow + spotlight-boosted halo for extra pop on dark bg */
  text-shadow:
    0 0 calc(8px + var(--spotlight) * 18px)
      color-mix(in oklab, var(--ind-color) calc(20% + var(--spotlight) * 50%), transparent),
    0 calc(var(--spotlight) * 12px) calc(var(--spotlight) * 36px)
      color-mix(in oklab, var(--ind-color) calc(var(--spotlight) * 40%), transparent);
  transition: text-shadow 80ms ease;
}

/* ── second row: document types ────────────────────────────────────
   Smaller, mono, near-white. Drifts in the OPPOSITE direction at a
   slower pace so the two rows feel like a layered weather system, not
   one synced animation. Items get a tiny per-position Y stagger so the
   line isn't perfectly flat. */
.logos__list--docs {
  margin-top: 14px;
  animation: drift-x-rev 86s linear infinite;
  gap: 56px;
  padding: 8px 0;
}
.logos__list--docs span {
  font-family: var(--mono);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  /* Reset the industry-row transform/spotlight/scale chain so these
     stay readable at a fixed size — they're not part of the spotlight. */
  --spotlight: 0;
  transform: none;
}
/* Subtle vertical stagger so the doc strip reads as scattered tags
   rather than a flat ribbon. Three positions cycled across nth-child. */
.logos__list--docs span:nth-child(3n+1) { transform: translateY(-6px); }
.logos__list--docs span:nth-child(3n+2) { transform: translateY( 4px); }
.logos__list--docs span:nth-child(3n+3) { transform: translateY( 8px); }
/* Every third doc gets bumped to pure white for sparse highlights. */
.logos__list--docs span:nth-child(4n) { color: #FFFFFF; font-weight: 600; }

@keyframes drift-x-rev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Per-industry brand colors. Mostly Tailwind-700 values so they all pop
   confidently on the warm-cream-toned page bg without being neon. */
.logos__list--marquee span[data-industry="individuals"]  { --ind-color: #EC4899; } /* pink */
.logos__list--marquee span[data-industry="legal"]        { --ind-color: #1D4ED8; } /* royal blue */
.logos__list--marquee span[data-industry="smallbiz"]     { --ind-color: #059669; } /* emerald */
.logos__list--marquee span[data-industry="realestate"]   { --ind-color: #B45309; } /* amber */
.logos__list--marquee span[data-industry="healthcare"]   { --ind-color: #0891B2; } /* teal */
.logos__list--marquee span[data-industry="enterprise"]   { --ind-color: #334155; } /* slate */
.logos__list--marquee span[data-industry="construction"] { --ind-color: #C2410C; } /* burnt orange */
.logos__list--marquee span[data-industry="education"]    { --ind-color: #4F46E5; } /* indigo */
.logos__list--marquee span[data-industry="freelancers"]  { --ind-color: #9333EA; } /* purple */
.logos__list--marquee span[data-industry="nonprofit"]    { --ind-color: #15803D; } /* forest */
.logos__list--marquee span[data-industry="finance"]      { --ind-color: #1E40AF; } /* navy */
.logos__list--marquee span[data-industry="hr"]           { --ind-color: #BE185D; } /* rose */
.logos__list--marquee span[data-industry="sales"]        { --ind-color: #EA580C; } /* sunset orange */
.logos__list--marquee span[data-industry="government"]   { --ind-color: #475569; } /* steel */
.logos__list--marquee span[data-industry="startups"]     { --ind-color: #DB2777; } /* magenta */

@media (prefers-reduced-motion: reduce) {
  .logos__list--marquee { animation: none; }
  .logos__list--marquee span {
    transform: none;
    --spotlight: 0;
    color: var(--ink-dim);
  }
}

.logos__viewport {
  flex: 1;
  overflow: hidden;
  /* Wider feathered edges for a more cinematic mask, sized for the bigger type */
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  /* Extra vertical breathing room so the scaled-up center span doesn't clip */
  padding: 20px 0;
}

/* fine micro-bounce on feature icons when revealed */
@keyframes pop { 0% { transform: scale(0.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
[data-reveal].is-on .feature__icon { animation: pop .55s ease both; animation-delay: calc(var(--i, 0) * 80ms + 200ms); }

/* respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .r-up, .r-left, .r-zoom { transition: none; opacity: 1; transform: none; }
  [data-reveal] > * { transition: none; opacity: 1; transform: none; }
  .pulse-dot, .logos__list--marquee { animation: none; }
  .how3-card:hover .how3-card__inner { transform: none; }
}

/* ── responsive ──────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .showpiece { display: none; }
  .showpiece__stage { grid-template-columns: 1fr; }
  .spaside, .spright { display: none; }
  .features { grid-template-columns: 1fr; }
  .how { grid-template-columns: 1fr; }
  .how3 { grid-template-columns: 1fr; }
  .how3-card { min-height: 520px; }
  .compare { overflow-x: auto; }
  .plans { grid-template-columns: 1fr; }
  .rates { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .bom__head, .bom__row, .bom__total { grid-template-columns: 40px 1fr 70px 90px 90px; padding: 12px 16px; gap: 10px; }
}
/* ── Mobile hamburger menu (defaults — overridden at ≤640px below) ── */
.nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  border-radius: 8px;
  transition: background 0.15s;
}
.nav__burger:hover { background: var(--surface-lo); }
.nav__burger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s;
}
.nav__burger[aria-expanded="true"] .nav__burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] .nav__burger-line:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] .nav__burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 18px 36px -16px rgba(15, 23, 42, 0.18);
  z-index: 100;
}
.nav__mobile-menu[aria-hidden="false"] { display: flex; }
.nav__mobile-menu .nav__link {
  padding: 14px 16px;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink-dim);
  border-radius: 10px;
  text-decoration: none;
}
.nav__mobile-menu .nav__link::after { display: none; }
.nav__mobile-menu .nav__link:hover { background: var(--surface-lo); color: var(--ink); }
.nav__mobile-menu .nav__link.is-active { color: var(--accent); background: var(--accent-soft); }

@media (max-width: 640px) {
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; }
  /* Mobile-only nav slim-down: hide the language dropdown and Log in
     button from the nav (they live in the hamburger menu instead). Keep
     "Start free" visible as the always-on primary CTA. */
  .nav__right .dropdown,
  .nav__right .btn--ghost { display: none; }
  /* Tighten the Start free button on mobile so it doesn't dominate */
  .nav__right .btn--primary { padding: 9px 14px; font-size: 14px; }
  /* The nav itself gets less horizontal breathing room */
  .nav__inner { gap: 8px; padding: 14px 16px; }
  /* Visually distinct Log in row inside the mobile menu */
  .nav__mobile-menu__login {
    margin-top: 8px;
    padding-top: 18px !important;
    box-shadow: inset 0 1px 0 var(--hairline);
  }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .step { grid-template-columns: 40px 1fr; }
  .step__time { grid-column: 1 / -1; padding-left: 56px; }
  .pp-hero__top { flex-direction: column; align-items: flex-start; }
  /* Stack hero CTAs full-width on mobile so the primary + secondary
     buttons read as a balanced pair (same width, same visual weight). */
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { justify-content: center; }
}

/* ── Legal pages (Privacy Policy, Terms) ─────────────────────────────────── */
.legal-page {
  max-width: 760px;
  margin: 64px auto 96px;
  padding: 0 24px;
  color: #1a202c;
  font-size: 0.95rem;
  line-height: 1.75;
}
.legal-page h1 {
  font-size: 2rem;
  font-weight: 800;
  margin: 0 0 6px;
}
.legal-meta {
  color: #6b7280;
  font-size: 0.85rem;
  margin: 0 0 40px;
}
.legal-page h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 36px 0 10px;
  color: #0b1220;
}
.legal-page h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 20px 0 6px;
  color: #374151;
}
.legal-page p, .legal-page ul { margin: 0 0 14px; }
.legal-page ul { padding-left: 22px; }
.legal-page li { margin-bottom: 6px; }
.legal-page a { color: var(--esign-accent, #15803d); }