/* =========================================================================
   LegalAdviceNow — marketing site
   Design: "counsel blue" — a precision instrument for reading contracts.
   Deep blue on warm paper, one brass accent (the scales in the mark), and a
   five-step severity ramp that is the ONE place the palette goes beyond a
   single accent — because this product's whole output is graded risk.
   Signature = the clause under review: a contract paragraph with three
   reviewers threading onto one finding.

   Sibling to mylifeguardian.app by design: same bones (1160 wrap, warm paper,
   mono eyebrows, pill buttons, dark punctuation bands, scroll reveals, the
   same two Google faces), rotated from pine to blue. They should read as one
   company's two products.

   Change the look by editing the tokens below, not by hunting values.
   ========================================================================= */

:root {
  /* ---- palette ---------------------------------------------------------
     `paper` is warm, not white: a page of legal text on a cold ground reads
     as a scan. `mist` is the blue tint used for section grounds, and is the
     only place blue appears at low saturation.                            */
  --paper:    #FBFAF7;
  --paper-2:  #F3F2ED;
  --mist:     #EAF0F6;
  --blue:     #10508C;
  --blue-600: #0E4881;
  --blue-800: #0A3660;
  --blue-900: #072744;
  --ink:      #141C24;
  --ink-soft: #55636F;
  --line:     #E4E5E0;
  --brass:    #C08A2E;   /* the accent — from the scales in the mark */
  --sky:      #4E86BD;
  --slate:    #8492A0;
  --white:    #ffffff;

  /* ---- severity ramp ---------------------------------------------------
     Five steps, deliberately desaturated so "critical" never fights the blue
     it sits next to. The legacy report carries three incompatible scales
     (risk 0-3, importance 0-3, deviationScore 0-10) and renders 0 as the word
     "Low" in a grey chip labelled "Info". One ramp, one vocabulary, here.   */
  --sev-critical: #A33A2C;
  --sev-high:     #C46A22;
  --sev-medium:   #C08A2E;
  --sev-low:      #4E86BD;
  --sev-ok:       #2F7D62;
  --sev-critical-bg: #FBEFEC;
  --sev-high-bg:     #FCF2E8;
  --sev-medium-bg:   #FBF5E7;
  --sev-low-bg:      #EDF3F9;
  --sev-ok-bg:       #EAF4EF;

  /* ---- type ------------------------------------------------------------
     Same pair as MyLifeGuardian. Mono is promoted to a real role here:
     contracts have clause numbers, and `§ 8.2` set in mono is the cheapest
     credibility on the page.                                              */
  --f-display: "Bricolage Grotesque", "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --f-sans:    "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---- metrics ---------------------------------------------------------- */
  --wrap: 1160px;
  --pad: clamp(20px, 5vw, 56px);
  --measure: 820px;          /* prose inside a container */
  --radius: 18px;
  --radius-sm: 12px;
  --shadow:    0 1px 2px rgba(20,28,36,.04), 0 18px 40px -24px rgba(20,28,36,.22);
  --shadow-sm: 0 1px 2px rgba(20,28,36,.05), 0 8px 24px -18px rgba(20,28,36,.20);
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--f-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.06; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
em { font-style: normal; color: var(--blue-600); }
strong { font-weight: 600; }

.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.sr-only, .skip-link { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; top: 12px; left: 12px; width: auto; height: auto; clip: auto; z-index: 100; background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 10px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px; }

.eyebrow {
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  color: var(--blue-600);
  margin: 0 0 18px;
}
.eyebrow--light { color: #9fc4e4; }

/* A clause reference. The one typographic tic that says "this is about contracts". */
.clause { font-family: var(--f-mono); font-size: .86em; color: var(--blue-600); white-space: nowrap; }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-sans); font-weight: 600; font-size: 15.5px;
  padding: 11px 18px; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--solid { --btn-bg: var(--blue); --btn-fg: #fff; box-shadow: 0 10px 22px -12px rgba(16,80,140,.65); }
.btn--solid:hover { --btn-bg: var(--blue-600); box-shadow: 0 14px 26px -12px rgba(16,80,140,.75); }
.btn--ghost { --btn-fg: var(--ink); --btn-bd: var(--line); }
.btn--ghost:hover { --btn-bd: var(--blue); --btn-fg: var(--blue-600); }
.btn--quiet { --btn-fg: var(--blue-600); padding-inline: 6px; }
.btn--quiet:hover { color: var(--blue-800); }
.btn--onDark { --btn-bg: var(--paper); --btn-fg: var(--blue-900); }
.btn--onDark:hover { --btn-bg: #fff; }
.btn--lg { padding: 14px 26px; font-size: 16.5px; }

/* =========================================================================
   NAV
   ========================================================================= */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__inner { display: flex; align-items: center; gap: 20px; height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; color: var(--ink); }
.brand__mark { display: grid; place-items: center; width: 32px; height: 32px; flex: none; }
.brand__mark svg { width: 100%; height: 100%; }
.brand__accent { color: var(--blue); }
.nav__links { display: flex; gap: 26px; margin-left: auto; font-weight: 500; font-size: 15.5px; color: var(--ink-soft); }
.nav__links a { position: relative; padding: 4px 0; white-space: nowrap; }
.nav__links a:hover { color: var(--ink); }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--blue); transition: right .25s ease; }
.nav__links a:hover::after { right: 0; }
.nav__cta { display: flex; align-items: center; gap: 10px; }
.nav__toggle { display: none; }
.nav__mobile { display: none; }
/* :not(.btn) matters — this rule is more specific than .btn, so without it the
   grey divider border paints across the top edge of the solid CTA button. */
.nav__mobile a:not(.btn) { padding: 14px 4px; border-top: 1px solid var(--line); font-weight: 600; font-size: 17px; }
.nav__mobile .btn { margin: 18px 0 4px; justify-content: center; }

.langsel {
  appearance: none; -webkit-appearance: none;
  font-family: var(--f-sans); font-size: 13px; font-weight: 600; color: var(--ink-soft);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2355636F' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1.5px solid var(--line); border-radius: 999px;
  padding: 7px 26px 7px 12px; cursor: pointer;
}
.langsel:hover { border-color: var(--blue); color: var(--ink); }
.langsw { display: flex; gap: 6px; padding-top: 14px; }
.langsw a { flex: 1; text-align: center; padding: 8px 0; border: 1.5px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.langsw a[data-lang="en"] { border-radius: 999px; }
.langsw[data-active="en"] a[data-lang="en"],
.langsw[data-active="es"] a[data-lang="es"],
.langsw[data-active="it"] a[data-lang="it"] { background: var(--blue); border-color: var(--blue); color: #fff; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { position: relative; padding-top: clamp(48px, 8vw, 92px); padding-bottom: clamp(20px, 3vw, 40px); overflow: hidden; }
.hero__glow {
  position: absolute; inset: -20% 0 auto 0; height: 640px; pointer-events: none; z-index: 0;
  background:
    radial-gradient(58% 70% at 80% 6%, rgba(192,138,46,.14), transparent 60%),
    radial-gradient(56% 80% at 16% 0%, rgba(16,80,140,.16), transparent 62%),
    radial-gradient(90% 60% at 50% -10%, var(--mist), transparent 70%);
}
.hero__inner { position: relative; z-index: 1; text-align: center; max-width: 980px; margin-inline: auto; }
.hero__title { font-size: clamp(2.5rem, 6.2vw, 4.4rem); font-weight: 600; margin-bottom: 22px; }
.hero__lede { font-size: clamp(1.06rem, 1.6vw, 1.26rem); color: var(--ink-soft); max-width: var(--measure); margin: 0 auto 30px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 16px; }
.hero__trust { font-size: .92rem; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; }
.hero__trust svg { width: 15px; height: 15px; color: var(--sev-ok); flex: none; }

/* ---- the signature: one clause, under review ---- */
.panelcard {
  position: relative; z-index: 1;
  margin: clamp(30px, 5vw, 56px) 0 0;
  padding: clamp(16px, 2.4vw, 26px) clamp(10px, 2vw, 22px);
  background: linear-gradient(180deg, #fff, var(--paper));
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.panelcard__svg { width: 100%; height: auto; }

/* the document fragment */
.rv-page   { fill: #fff; stroke: var(--line); stroke-width: 1; }
.rv-ln     { stroke: #DCDDD7; stroke-width: 5; stroke-linecap: round; }
.rv-ln--dim{ stroke: #E9EAE4; }
.rv-mark   { fill: var(--blue); font-family: var(--f-mono); font-size: 11px; }
.rv-hi     { fill: rgba(192,138,46,.16); stroke: var(--brass); stroke-width: 1; }
.rv-hiln   { stroke: #C7B287; stroke-width: 5; stroke-linecap: round; }
.rv-conn   { stroke: var(--line); stroke-width: 1.5; fill: none; }

/* the finding, and the two critiques threading onto it */
.rv-card   { fill: #fff; stroke: var(--line); stroke-width: 1; filter: drop-shadow(0 8px 18px rgba(20,28,36,.08)); }
.rv-sev    { fill: var(--sev-critical); }
.rv-sevbg  { fill: var(--sev-critical-bg); }
.rv-t      { font-family: var(--f-sans); font-size: 13px; font-weight: 600; fill: var(--ink); }
.rv-t--sm  { font-size: 11.5px; font-weight: 400; fill: var(--ink-soft); }
.rv-t--sev { font-family: var(--f-mono); font-size: 10px; fill: var(--sev-critical); letter-spacing: .08em; }
.rv-mono   { font-family: var(--f-mono); font-size: 10.5px; fill: var(--ink-soft); }
.rv-who    { fill: var(--blue); }
.rv-who--2 { fill: var(--sky); }
.rv-who--3 { fill: var(--brass); }
.rv-init   { font-family: var(--f-display); font-size: 12px; font-weight: 600; fill: #fff; }
.rv-chip   { fill: var(--paper-2); stroke: var(--line); stroke-width: 1; }

/* the triage toolbar at the end of the thread */
.rv-tri    { fill: none; stroke: var(--line); stroke-width: 1.2; }
.rv-tri--on{ fill: var(--sev-ok-bg); stroke: var(--sev-ok); }
.rv-trit   { font-family: var(--f-sans); font-size: 10.5px; font-weight: 600; fill: var(--ink-soft); }
.rv-trit--on { fill: var(--sev-ok); }

/* entrance — each stage waits for the one before, so it reads as a sequence */
.rv-stage { opacity: 0; transform: translateY(8px); }
.panelcard.is-in .rv-stage { animation: pop .55s ease forwards; animation-delay: var(--d); }
.rv-sweep { stroke-dasharray: 300; stroke-dashoffset: 300; }
.panelcard.is-in .rv-sweep { animation: draw 1.1s .15s ease forwards; }
.panelcard.is-in .rv-hi { transform-box: fill-box; transform-origin: left center; animation: wipe .7s .35s ease forwards; transform: scaleX(0); }
@keyframes pop  { to { opacity: 1; transform: translateY(0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes wipe { to { transform: scaleX(1); } }

/* =========================================================================
   SUBPAGE HERO — same glow and rhythm as the front page, left-aligned.
   Centred display type needs a short measure to work; a subpage hero carries
   a breadcrumb and a longer, more specific lede, and both read better ranged
   left against the container's edge.
   ========================================================================= */
.hero--sub { padding-bottom: clamp(28px, 4vw, 56px); }
.hero__inner--left { text-align: left; max-width: none; }
.hero__title--sub { font-size: clamp(2.1rem, 4.6vw, 3.4rem); max-width: 20ch; }
.hero__lede--left { margin-inline: 0; max-width: 60ch; }
.hero__actions--left { justify-content: flex-start; }

/* The left-aligned text column above is capped at 20ch/60ch on purpose (a long
   title/lede reads badly at full container width), which used to leave the
   right two-thirds of every hero--sub page blank. .heroart fills it — see
   build.mjs's heroArt() for what's inside. */
.hero__row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 56px); align-items: center; }
.heroart { max-width: 440px; }
.heroart.panelcard { margin: 0; } /* .panelcard's own top margin assumes it sits BELOW a centered hero; here it sits beside one */
.heroart__svg { width: 100%; height: auto; display: block; }

.crumb {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--slate);
  margin-bottom: clamp(20px, 3vw, 34px);
}
.crumb a { color: var(--blue-600); }
.crumb a:hover { text-decoration: underline; }
.crumb [aria-current] { color: var(--ink-soft); }

/* =========================================================================
   THE EMBEDDED APP (/analyze/)
   The analyzer is the app, in an iframe. This is the rectangle it gets.
   ========================================================================= */
/* A jump target: links elsewhere point at /analyze/#analyze, which should land
   on the app rather than under the sticky nav. */
.widget { padding-block: clamp(20px, 3vw, 38px); scroll-margin-top: 90px; }
.widget__card {
  max-width: 820px; margin-inline: auto; padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow-sm);
}
/* Holding the live app and nothing else. No panel of its own — the frame inside
   already is one, and two nested borders read as a mistake. And no 820px measure
   either: that width is for prose, and this is a form, a table and a report.
   Full container width lines the frame up with the nav above it. */
.widget__card--bare { border: 0; box-shadow: none; background: transparent; padding: 0; max-width: none; }

/* Sized by site.js from the app's own measurement. This height is what somebody
   sees before that arrives — and what they keep if it never does, because a
   frame that collapses to nothing is worse than one that is too tall. */
.widget__frame {
  display: block; width: 100%; min-height: 680px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--paper-2);
  color-scheme: light;
}

/* The "not open yet" state. Deliberately inert: no drop handler, no <input>. */
.widget__slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: clamp(26px, 5vw, 42px) 18px; margin-bottom: 16px;
  border: 2px dashed var(--line); border-radius: 14px;
  background: var(--paper-2); color: var(--slate);
  font-size: .95rem; text-align: center;
}
.widget__badge {
  display: inline-block; margin-bottom: 12px; padding: 4px 11px; border-radius: 999px;
  background: var(--mist); color: var(--blue-800);
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
}
.widget__title { font-family: var(--f-display); font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 10px; }
.widget__lede { color: var(--ink-soft); margin-bottom: 18px; }
.widget__note { color: var(--ink-soft); font-size: .95rem; }

/* =========================================================================
   PRICE STRIP — the compact pricing reminder on subpages. The real pricing
   table lives once, on the front page; repeating it on twelve pages would be
   twelve places to update the day a price changes.
   ========================================================================= */
.pricestrip { padding-block: clamp(48px, 6vw, 76px); }
.pricestrip__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px;
  background: linear-gradient(180deg, #fff, var(--paper));
  border: 1px solid var(--line); border-radius: 22px;
  padding: clamp(26px, 3.4vw, 40px);
  box-shadow: var(--shadow-sm);
}
.pricestrip__price { font-family: var(--f-display); font-size: clamp(2.2rem, 4vw, 2.9rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.pricestrip__note { color: var(--ink-soft); font-size: .95rem; margin-top: 10px; }

/* =========================================================================
   SECTION SHELL
   ========================================================================= */
.section { padding-block: clamp(72px, 11vw, 124px); }
.section--tint { background: linear-gradient(180deg, var(--paper), var(--mist)); border-top: 1px solid var(--line); }
.section--paper2 { background: var(--paper-2); border-block: 1px solid var(--line); }
.section__head { max-width: var(--measure); margin: 0 auto clamp(40px, 6vw, 64px); text-align: center; }
.section__head--left { text-align: left; margin-inline: 0; }
.section__title { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.section__lede { color: var(--ink-soft); font-size: 1.06rem; max-width: 62ch; margin: 16px auto 0; }
.section__head--left .section__lede { margin-inline: 0; }

/* reveal-on-scroll (script.js adds .is-in; a no-IntersectionObserver fallback shows all) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .panelcard.is-in .rv-stage,
  .panelcard.is-in .rv-sweep,
  .panelcard.is-in .rv-hi,
  .wf-stage, .loop-stage { animation: none !important; opacity: 1; transform: none; stroke-dashoffset: 0; }
  html { scroll-behavior: auto; }
}

/* =========================================================================
   HOW IT WORKS — four panels, one animated figure
   ========================================================================= */
.workflow { margin: 0; }
.workflow__svg { width: 100%; height: auto; }
.wf-card  { fill: #fff; stroke: var(--line); stroke-width: 1; }
.wf-step  { font-family: var(--f-mono); font-size: 11px; fill: var(--blue); letter-spacing: .06em; }
.wf-title { font-family: var(--f-sans); font-size: 13.5px; font-weight: 600; fill: var(--ink); }
.wf-zone  { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 5 4; }
.wf-doc__card { fill: var(--paper); stroke: var(--line); stroke-width: 1; }
.wf-doc__page { fill: #fff; stroke: var(--sky); stroke-width: 1; }
.wf-doc__ln   { stroke: var(--sky); stroke-width: 1.2; stroke-linecap: round; }
.wf-doc__name { font-family: var(--f-mono); font-size: 10.5px; fill: var(--ink-soft); }
.wf-row rect  { fill: var(--paper); stroke: var(--line); stroke-width: 1; }
.wf-row text  { font-family: var(--f-sans); font-size: 11.5px; fill: var(--ink); }
.wf-row .wf-k { font-family: var(--f-mono); font-size: 10px; fill: var(--ink-soft); }
.wf-arrow { stroke: var(--slate); stroke-width: 1.4; fill: none; opacity: .6; }
.wf-who   { r: 9; }
.wf-who--1{ fill: var(--blue); }
.wf-who--2{ fill: var(--sky); }
.wf-who--3{ fill: var(--brass); }
.wf-init  { font-family: var(--f-display); font-size: 10px; font-weight: 600; fill: #fff; text-anchor: middle; }
.wf-pill  { fill: var(--sev-ok-bg); stroke: var(--sev-ok); stroke-width: 1; }
.wf-pillt { font-family: var(--f-sans); font-size: 10.5px; font-weight: 600; fill: var(--sev-ok); }
.wf-stage { opacity: 0; }
.workflow.is-in .wf-stage { animation: fade .5s ease forwards; animation-delay: var(--d); }
@keyframes fade { to { opacity: 1; } }

/* =========================================================================
   THE PANEL — Aden / Sara / Liam, as monograms
   ========================================================================= */
.panel__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 26px); }
.lawyer {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 2.6vw, 30px); box-shadow: var(--shadow-sm);
}
.lawyer__mark {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  font-family: var(--f-display); font-size: 24px; font-weight: 600; color: #fff;
  margin-bottom: 18px; letter-spacing: -0.02em;
}
.lawyer--1 .lawyer__mark { background: var(--blue); }
.lawyer--2 .lawyer__mark { background: var(--sky); }
.lawyer--3 .lawyer__mark { background: var(--brass); }
.lawyer__name { font-family: var(--f-display); font-size: 1.24rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 4px; }
/* The segment pages reuse this card without a role line, so the 14px the role
   contributed has to come from somewhere or the body sits on the title. */
.lawyer__name + .lawyer__body { margin-top: 14px; }
.lawyer__role { font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); margin-bottom: 14px; }
.lawyer--1 .lawyer__role { color: var(--blue-600); }
.lawyer--2 .lawyer__role { color: var(--sky); }
.lawyer--3 .lawyer__role { color: var(--brass); }
.lawyer__body { color: var(--ink-soft); font-size: .98rem; }
.panel__note {
  margin: clamp(28px, 4vw, 44px) auto 0; max-width: 60ch; text-align: center;
  font-family: var(--f-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.35;
  font-size: clamp(1.1rem, 2vw, 1.32rem); color: var(--blue-800);
}

/* =========================================================================
   THE REVIEW LOOP — the gated triage mechanic
   ========================================================================= */
.loop__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(36px, 6vw, 80px); }
.loop__copy .section__title { margin-bottom: 16px; }
.loop__lede { color: var(--ink-soft); font-size: 1.06rem; max-width: 54ch; margin: 0 0 24px; }
.loop__list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; }
.loop__list li { position: relative; padding-left: 34px; color: var(--ink-soft); }
.loop__list li strong { color: var(--ink); font-weight: 600; }
.loop__n {
  position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 7px;
  background: var(--mist); color: var(--blue-600);
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  display: grid; place-items: center;
}
.loop__gate {
  margin: 0 0 26px; padding: 12px 16px; border-left: 3px solid var(--brass);
  background: color-mix(in srgb, var(--brass) 8%, transparent);
  border-radius: 0 10px 10px 0; font-size: .93rem; color: var(--ink-soft); max-width: 54ch;
}
.loop__art { width: 100%; height: auto; }
.lp-card  { fill: #fff; stroke: var(--line); stroke-width: 1; filter: drop-shadow(0 10px 22px rgba(20,28,36,.07)); }
.lp-rail  { fill: var(--paper-2); }
.lp-fill  { fill: var(--blue); }
.lp-t     { font-family: var(--f-sans); font-size: 12.5px; font-weight: 600; fill: var(--ink); }
.lp-t--sm { font-size: 11px; font-weight: 400; fill: var(--ink-soft); }
.lp-mono  { font-family: var(--f-mono); font-size: 11px; fill: var(--ink-soft); }
.lp-btn      { fill: #fff; stroke: var(--line); stroke-width: 1.2; }
.lp-btn--amb { fill: var(--sev-medium-bg); stroke: var(--sev-medium); }
.lp-btn--blu { fill: var(--sev-low-bg);    stroke: var(--sev-low); }
.lp-btn--ok  { fill: var(--sev-ok-bg);     stroke: var(--sev-ok); }
.lp-btnt      { font-family: var(--f-sans); font-size: 10.5px; font-weight: 600; fill: var(--ink-soft); text-anchor: middle; }
.lp-btnt--amb { fill: var(--sev-medium); }
.lp-btnt--blu { fill: var(--sev-low); }
.lp-btnt--ok  { fill: var(--sev-ok); }
.loop-stage { opacity: 0; }
.loop__art.is-in .loop-stage { animation: fade .5s ease forwards; animation-delay: var(--d); }
.loop__art.is-in .lp-fill { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); animation: wipe 1.4s .5s cubic-bezier(.4,0,.2,1) forwards; }

/* =========================================================================
   WHAT YOU GET — the seven finding types
   ========================================================================= */
/* 236px, not 250: there are exactly SEVEN finding types, and at 250 the container's
   1048px of content resolves to three columns — which leaves Readability alone on a
   row of its own. Four columns give 4 + 3, which reads as a deliberate shape. */
.finds { display: grid; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: clamp(14px, 2vw, 20px); }
.find {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 24px 22px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 10px;
}
/* flex-start, not center: when a finding name wraps to two lines, centring
   floats the dot into the gap between them. The nudge puts it on the optical
   centre of the FIRST line, which is where a bullet belongs. */
.find__top { display: flex; align-items: flex-start; gap: 10px; }
.find__dot { margin-top: 8px; }
.find__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.find__name { font-family: var(--f-display); font-size: 1.08rem; font-weight: 600; letter-spacing: -0.015em; }
.find__body { color: var(--ink-soft); font-size: .96rem; }
.find__scale { font-family: var(--f-mono); font-size: 10.5px; color: var(--slate); letter-spacing: .06em; text-transform: uppercase; margin-top: auto; padding-top: 8px; }
.find--critical .find__dot { background: var(--sev-critical); }
.find--high     .find__dot { background: var(--sev-high); }
.find--medium   .find__dot { background: var(--sev-medium); }
.find--low      .find__dot { background: var(--sev-low); }
.find--ok       .find__dot { background: var(--sev-ok); }
.find--blue     .find__dot { background: var(--blue); }
.find--sky      .find__dot { background: var(--sky); }

/* the ramp legend */
.ramp { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: clamp(26px, 4vw, 40px); }
.ramp__step {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
}
.ramp__swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* =========================================================================
   COMPARISON TABLE (/why.html)
   A real <table> — this is tabular data, and a screen reader should be able to
   say "Turnaround, Lawyer, days to weeks". The wrapper scrolls rather than the
   page: three columns of prose do not fit a phone, and shrinking the type until
   they do is how comparison tables become unreadable.
   ========================================================================= */
.compare__wrap { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.compare {
  width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.compare th, .compare td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare thead th {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 400; background: var(--paper-2); white-space: nowrap;
}
.compare tbody th { font-weight: 600; font-size: .96rem; width: 26%; }
.compare td { color: var(--ink-soft); font-size: .95rem; }
/* The "ours" column is highlighted, but the claim it makes still has to be true —
   the honest row (accountable advice) is a loss, and it stays a loss. */
.compare .is-ours { background: color-mix(in srgb, var(--mist) 55%, transparent); color: var(--ink); }
.compare thead .is-ours { background: var(--mist); color: var(--blue-800); font-weight: 600; }
.compare__note { color: var(--slate); font-size: .87rem; margin-top: 20px; text-align: center; }

/* =========================================================================
   FEATURE ROWS (/features.html) — alternating full-width blocks
   ========================================================================= */
.frow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.frow + .frow { margin-top: clamp(56px, 8vw, 96px); }
.frow:nth-child(even) .frow__copy { order: 2; }
.frow__n {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-600); margin-bottom: 14px;
}
.frow__title { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 16px; }
.frow__body { color: var(--ink-soft); margin-bottom: 20px; max-width: 52ch; }
.frow__scale {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
}
.frow__swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* the sample-finding card that illustrates each one */
.sample { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 2.4vw, 26px); box-shadow: var(--shadow-sm); }
.sample__top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.sample__sev {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px;
}
.sample--critical .sample__sev { background: var(--sev-critical-bg); color: var(--sev-critical); }
.sample--high     .sample__sev { background: var(--sev-high-bg);     color: var(--sev-high); }
.sample--medium   .sample__sev { background: var(--sev-medium-bg);   color: var(--sev-medium); }
.sample--low      .sample__sev { background: var(--sev-low-bg);      color: var(--sev-low); }
.sample--ok       .sample__sev { background: var(--sev-ok-bg);       color: var(--sev-ok); }
.sample__clause { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-soft); }
.sample__h { font-family: var(--f-display); font-size: 1.06rem; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 8px; }
.sample__p { color: var(--ink-soft); font-size: .94rem; }
.sample__by { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.sample__mark { width: 24px; height: 24px; border-radius: 8px; flex: none; display: grid; place-items: center; font-family: var(--f-display); font-size: 11px; font-weight: 600; color: #fff; background: var(--blue); }
.sample__who { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }

/* =========================================================================
   DOCUMENT TYPE CARDS (/document-types.html)
   ========================================================================= */
.dtypes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(14px, 2vw, 20px); }
.dtype { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.dtype__name { font-family: var(--f-display); font-size: 1.08rem; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 10px; }
.dtype__body { color: var(--ink-soft); font-size: .95rem; margin-bottom: 12px; }
.dtype__watch { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.dtype__watch b { color: var(--blue-600); font-weight: 400; }

/* =========================================================================
   NUMBERED STEPS (/guide.html)
   ========================================================================= */
.steps { max-width: var(--measure); margin-inline: auto; display: grid; gap: clamp(28px, 4vw, 44px); }
.step { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 20px; align-items: start; }
.step__n {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--mist); color: var(--blue-800);
  font-family: var(--f-display); font-size: 17px; font-weight: 600;
}
.step__title { font-size: 1.24rem; margin-bottom: 10px; }
.step__body { color: var(--ink-soft); }
.step__body + .step__body { margin-top: 10px; }

/* =========================================================================
   LEGAL PROSE (/privacy.html, /terms.html)
   ========================================================================= */
.legal { max-width: var(--measure); margin-inline: auto; }
.legal h2 { font-size: 1.4rem; margin: clamp(34px, 4vw, 48px) 0 14px; }
.legal h3 { font-size: 1.06rem; margin: 26px 0 8px; }
.legal p { color: var(--ink-soft); margin-bottom: 14px; }
.legal ul, .legal ol { color: var(--ink-soft); margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--blue-600); text-decoration: underline; }
.legal strong { color: var(--ink); }
.legal__updated { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.legal table { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: .94rem; }
.legal th, .legal td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; color: var(--ink-soft); }
.legal th { background: var(--paper-2); color: var(--ink); font-weight: 600; }

/* =========================================================================
   CONTACT FORM
   ========================================================================= */
.form { max-width: 560px; margin-inline: auto; display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-weight: 600; font-size: .94rem; }
.field input, .field select, .field textarea {
  font-family: var(--f-sans); font-size: 16px; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  padding: 12px 14px; width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent); }
.form .btn { justify-self: start; }
.form__status { font-size: .95rem; min-height: 1.4em; }
.form__status--ok { color: var(--sev-ok); }
.form__status--err { color: var(--sev-critical); }
.form__note { color: var(--slate); font-size: .87rem; }

/* =========================================================================
   DARK BANDS — the privacy promise, and the standing disclaimer
   ========================================================================= */
.dark {
  background: linear-gradient(155deg, var(--blue-900), var(--blue-800) 55%, #0B3E6E);
  color: #fff;
}
.dark .section__title, .dark .lawyer__name { color: #fff; }
.privacy__inner { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 86px); align-items: start; }
.privacy__copy .section__title { margin-bottom: 16px; }
.privacy__lede { color: #C3D6E8; margin: 0 0 26px; max-width: 42ch; }
.privacy__list { display: grid; gap: 26px; margin: 0; padding: 0; list-style: none; }
.privacy__item { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; align-items: start; }
.privacy__icon { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.09); display: grid; place-items: center; }
.privacy__icon svg { width: 20px; height: 20px; color: #9fc4e4; }
.privacy__h { font-weight: 600; color: #fff; margin-bottom: 3px; }
.privacy__p { color: #B9CDE1; font-size: .97rem; }
.privacy__stance { grid-column: 1 / -1; margin-top: clamp(28px, 4vw, 48px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid rgba(255,255,255,.14); text-align: center; }
.privacy__stance-mark { display: block; width: 32px; height: 32px; color: var(--brass); margin: 0 auto 12px; }
.privacy__stance p { margin: 0 auto; max-width: 48ch; font-family: var(--f-display); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; font-size: clamp(1.28rem, 2.4vw, 1.72rem); color: #fff; }

.stance { padding-block: clamp(56px, 8vw, 92px); text-align: center; }
.stance__mark { display: block; width: 34px; height: 34px; color: var(--brass); margin: 0 auto 16px; }
.stance p { margin: 0 auto; max-width: 46ch; font-family: var(--f-display); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; font-size: clamp(1.3rem, 2.6vw, 1.85rem); color: #fff; }

/* =========================================================================
   CONTRACT TYPES — pills
   ========================================================================= */
.types { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.types a, .types span {
  display: inline-block; padding: 10px 18px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); font-size: .94rem; color: var(--ink-soft);
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.types a:hover { border-color: var(--blue); color: var(--blue-600); transform: translateY(-1px); }
.types__more { text-align: center; margin-top: 26px; }

/* =========================================================================
   PRICING
   ========================================================================= */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px, 2.4vw, 24px); align-items: start; }
.plan {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(26px, 3vw, 34px); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.plan--featured { border-color: var(--blue); box-shadow: var(--shadow); position: relative; }
.plan__flag {
  position: absolute; top: -11px; left: clamp(26px, 3vw, 34px);
  background: var(--blue); color: #fff; font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px;
}
.plan__name { font-family: var(--f-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; }
.plan__for { color: var(--ink-soft); font-size: .95rem; margin: 6px 0 20px; }
.plan__price { font-family: var(--f-display); font-size: clamp(2.4rem, 4vw, 3rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.plan__unit { font-family: var(--f-sans); font-size: .95rem; font-weight: 400; color: var(--ink-soft); margin-left: 6px; letter-spacing: 0; }
.plan__cta { margin: 24px 0 22px; }
.plan__cta .btn { width: 100%; }
.plan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: .96rem; color: var(--ink-soft); }
.plan__list li { position: relative; padding-left: 26px; }
.plan__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--sev-ok); font-weight: 700; }
.plans__note { text-align: center; color: var(--ink-soft); font-size: .92rem; margin-top: 26px; }

/* Four cards do not fit the 280px auto-fit track at 1160px, so the pricing grid
   gets its own explicit breakpoints: 4 across on desktop, 2 on tablet, 1 on a
   phone. auto-fit would give 3 + 1 orphan at exactly the widths people use. */
/* Explicit three, never auto-fit: a three-card row that reflows to two leaves a
   single orphan card on its own line, which reads as a layout bug rather than a
   plan. Three across, then straight to one. */
.plans--three { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.plan__price > span { white-space: nowrap; }
/* The descriptions run two to three lines, which pushed each card's price and
   button to a different height across the row. Reserving three lines puts the
   prices on one baseline and the buttons on another. */
.plan__for { min-height: 4.7em; }

/* The two audiences, labelled. Without the headings the six cards read as one
   ladder and $199 looks like the price of the thing $4.99 also buys. */
.plans__group + .plans__group { margin-top: clamp(38px, 4.5vw, 56px); }
.plans__grouphead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.plans__grouptitle { font-family: var(--f-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; }
.plans__grouplede { color: var(--ink-soft); font-size: .93rem; }
.plan--free { border-color: var(--sev-ok); position: relative; }
.plan__flag--free { background: var(--sev-ok); }
.plan__credits { font-size: .92rem; color: var(--ink-soft); margin-top: 10px; min-height: 1.4em; }
/* The library allowance, under the credit allowance. Mono because it is a pair of
   counts and reads as data rather than prose — and because it keeps "3 active
   cases · 30 documents" from being mistaken for another feature bullet. */
.plan__library { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .01em;
  color: var(--ink-soft); margin-top: 6px; min-height: 1.3em; }

/* The monthly/yearly switch. Two real <button>s in a role="group" rather than a
   checkbox pretending to be a switch: aria-pressed says which is on, and with JS
   off the monthly price — the honest default — is what stays rendered. */
.billing { display: flex; justify-content: center; gap: 4px; margin: 0 auto clamp(26px, 3vw, 34px); padding: 4px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; width: max-content; max-width: 100%; }
.billing__opt {
  display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; background: transparent;
  color: var(--ink-soft); font: inherit; font-size: .93rem; padding: 9px 20px; border-radius: 999px;
  transition: background .18s ease, color .18s ease;
}
.billing__opt:hover { color: var(--ink); }
.billing__opt.is-on { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.billing__save { font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sev-ok); background: var(--sev-ok-bg); padding: 3px 8px; border-radius: 999px; }

/* What a credit buys. Two tiers and a top-up line — the multiplier made legible,
   because "300 credits" on a card means nothing without it. */
.credits { margin-top: clamp(28px, 3.5vw, 40px); background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(24px, 3vw, 34px); }
.credits__title { font-family: var(--f-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; }
.credits__lede { color: var(--ink-soft); font-size: .95rem; margin-top: 6px; max-width: 62ch; }
.credits__tiers { list-style: none; margin: 22px 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.credits__tiers li { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px;
  display: grid; gap: 5px; align-content: start; }
.credits__name { font-weight: 600; font-size: .98rem; }
.credits__name::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 999px;
  background: var(--blue-600); margin-right: 9px; vertical-align: middle; }
.credits__body { color: var(--ink-soft); font-size: .9rem; }
/* The two rules that hold whatever a document costs: what a top-up is, and which
   credits expire. They are the questions a credit balance always raises. */
.credits__rules { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px;
  color: var(--ink-soft); font-size: .95rem; }
.credits__rules strong { color: var(--ink); }

/* The footer's social row. Icons only — the labels are aria-label, because five
   network names under a tagline is a second nav nobody reads. */
.footer__social { display: flex; gap: 6px; margin-top: 18px; }
.footer__social a {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 999px; color: var(--ink-soft); transition: background .18s ease, color .18s ease;
}
.footer__social a:hover { background: var(--blue-600); color: #fff; }

/* =========================================================================
   VOICES — testimonials
   ========================================================================= */
.voices { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px, 2.4vw, 22px); }
.voice {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(24px, 2.8vw, 30px); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 18px;
}

/* ---- star rating ----
   One star cell tiled five times, with a filled copy on top clipped to the
   score — so a 4.5 lands exactly half-way through the fifth star with no
   half-star asset and no per-rating markup. Set the score with `--rating`.
   The two colours are baked into the data URIs because a data: URI cannot
   read a custom property; they are --brass and --line. If you retheme those
   tokens, retheme these too. */
.stars {
  --rating: 5;
  position: relative; display: block; flex: none;
  width: 90px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.2 6.8.9-5 4.8 1.3 6.7L12 17.4 5.9 20.6l1.3-6.7-5-4.8 6.8-.9z' fill='%23E4E5E0'/%3E%3C/svg%3E") repeat-x left center;
  background-size: 18px 18px;
}
.stars::before {
  content: ""; position: absolute; inset: 0;
  width: calc(var(--rating) / 5 * 100%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.2 6.8.9-5 4.8 1.3 6.7L12 17.4 5.9 20.6l1.3-6.7-5-4.8 6.8-.9z' fill='%23C08A2E'/%3E%3C/svg%3E") repeat-x left center;
  background-size: 18px 18px;
}
.voice__stars { display: flex; align-items: center; gap: 10px; }
.voice__rating { font-family: var(--f-mono); font-size: 12px; color: var(--ink-soft); }

.voice__quote { color: var(--ink); font-size: 1rem; }

/* No portraits. The mark is initials, not a stand-in photograph — the legacy
   site used stock faces from randomuser.me, which is the one thing about this
   section that was never true. */
.voice__by { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 4px; }
.voice__mark {
  width: 38px; height: 38px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: var(--mist); color: var(--blue-800);
  font-family: var(--f-display); font-size: 13px; font-weight: 600;
}
.voice__name { display: block; font-weight: 600; font-size: .97rem; }
.voice__role { display: block; font-size: .85rem; color: var(--slate); }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq__list { max-width: var(--measure); margin-inline: auto; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--f-display); font-size: 1.1rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ink);
  padding: 22px 44px 22px 0; position: relative;
}
.faq__q::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s ease;
}
.faq__item[open] .faq__q::after { transform: translateY(-30%) rotate(-135deg); }
.faq__a { padding: 0 44px 24px 0; color: var(--ink-soft); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary { list-style: none; }

/* =========================================================================
   CLOSING CTA
   ========================================================================= */
.cta { text-align: center; }
.cta__title { font-size: clamp(1.9rem, 3.8vw, 2.9rem); color: #fff; margin-bottom: 18px; }
.cta__lede { color: #C3D6E8; max-width: 54ch; margin: 0 auto 30px; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta__fine { color: #8FB0CC; font-size: .87rem; margin-top: 20px; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer { background: var(--paper-2); border-top: 1px solid var(--line); padding-top: clamp(48px, 6vw, 68px); padding-bottom: 34px; }
.footer__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(30px, 5vw, 70px); align-items: start; }
.footer__tag { color: var(--ink-soft); font-size: .95rem; margin-top: 14px; max-width: 34ch; }
.footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 24px; font-size: .95rem; color: var(--ink-soft); }
.footer__nav a:hover { color: var(--blue-600); }
.footer__base {
  margin-top: clamp(36px, 5vw, 54px); padding-top: 26px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 10px clamp(30px, 5vw, 70px);
  color: var(--slate); font-size: .86rem;
}
.footer__legal { max-width: 90ch; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (min-width: 901px) {
  /* The binding constraint is the 1160px container, not the viewport: at any
     width >= 1160 the nav has the same ~1048px. Spanish labels are the long
     ones, so they get one extra step rather than cramping en/it. */
  .nav__links { gap: 22px; font-size: 15px; }
  html[lang="es"] .nav__links { gap: 17px; font-size: 14.5px; }
  html[lang="es"] .nav__cta .btn { padding-inline: 15px; font-size: 15px; }
}

@media (max-width: 940px) {
  .plans--three { grid-template-columns: 1fr; }
  .plan__for { min-height: 0; }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__toggle {
    display: grid; place-content: center; gap: 5px; margin-left: auto;
    width: 42px; height: 42px; background: none; border: 0; cursor: pointer;
  }
  .nav__toggle span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
  .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* Flex column, not block: the drawer's children are <a> elements, which are
     inline by default — under `display: block` they flow onto shared lines and
     the CTA lands on top of the last link. Scoped to :not([hidden]) so the
     hidden attribute keeps working without a separate `display: none` rule. */
  .nav__mobile:not([hidden]) {
    display: flex; flex-direction: column;
    padding: 4px var(--pad) 20px;
    background: var(--paper); border-bottom: 1px solid var(--line);
  }

  .panel__grid { grid-template-columns: 1fr; }
  .loop__inner { grid-template-columns: 1fr; }
  .privacy__inner { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__base { grid-template-columns: 1fr; }
  .hero__row { grid-template-columns: 1fr; }
  .heroart { max-width: 340px; margin-inline: auto; }

  /* Stacked, and the alternating order is dropped: on one column the copy must
     always come before the illustration it describes, whatever the row index. */
  .frow { grid-template-columns: 1fr; gap: 26px; }
  .frow:nth-child(even) .frow__copy { order: 0; }
  .step { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; }
  .step__n { width: 38px; height: 38px; border-radius: 12px; font-size: 15px; }
  .pricestrip__inner { flex-direction: column; align-items: flex-start; }

  /* ---- the inline SVGs, on a phone ------------------------------------
     These figures are 1120 and 1160 units wide with 10–13px text in them.
     Scaled to fit a 400px screen that text lands at about 4px: present,
     technically responsive, and completely unreadable — which is worse
     than not showing it, because the visitor can see there is something
     there and can't read it.

     So below 900px each figure scrolls inside itself at a width where its
     type is still legible, rather than shrinking to fit. The page body
     never scrolls sideways (the container clips it); only the figure does.
     A step-by-step diagram is the one thing a horizontal swipe genuinely
     suits — it is already a sequence. */
  .panelcard, .workflow, .loop__art {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .panelcard__svg { min-width: 720px; }
  .workflow__svg { min-width: 880px; }
  .loop__art > svg { min-width: 480px; }

  /* The figures keep their own padding, so the scrolled content shouldn't
     end flush against the card's right edge. */
  .panelcard { padding-inline: 14px; }
}

@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .billing { width: 100%; }
  .billing__opt { flex: 1; justify-content: center; padding-inline: 10px; }
}