/* ==========================================================================
   Evictago marketing site (evictago.com)
   Built by KickLick. Static pages + Cloudflare Pages Functions.

   Art direction: the world here is Wisconsin landlord paperwork. The notice
   is the case, the statute section sign is the icon, and the app's own
   maroon rail is the dark ground so the site and the product feel like one
   thing. Boldness is spent once: the notice-period selector in the hero.

   To re-brand, change ONLY the values in :root. Components read roles.
   Hex values outside :root: none, except the URL-encoded favicon in the
   HTML head (it can't read CSS variables).
   ========================================================================== */

:root {
  /* ---- Brand palette, named for this world ------------------------------ */
  --rail: #3e0f19;        /* the app's sidebar maroon: our dark ground */
  --rail-2: #55182a;      /* raised surface on the dark ground */
  --rail-deep: #2c0a12;   /* footer + menu drawer */
  --wine: #7a1f2e;        /* primary action, the app's --brand */
  --wine-deep: #621826;   /* pressed / hover */
  --wine-tint: #f7ecee;   /* soft panels on paper */
  --brass: #e6bd73;       /* on-dark accent only: numerals, § marks (9.2:1 on --rail) */
  --blush: #f1c9d0;       /* on-dark eyebrows (10.9:1 on --rail) */
  --brass-deep: #b88d45;  /* the pressed edge under a brass tab */
  --cream: #fff8ec;       /* hover face of the light button */

  /* ---- Roles --------------------------------------------------------------- */
  --paper: #f5f6f7;       /* light ground, same as the app */
  --card: #ffffff;
  --ink: #111827;         /* 16.8:1 on paper */
  --ink-2: #4b5563;       /* leads, 7.0:1 on paper */
  --ink-3: #626975;       /* captions, 4.9:1 on paper */
  --line: #e4e7ea;
  --line-2: #cfd4d9;
  --on-dark: #ffffff;
  --on-dark-2: rgba(255, 255, 255, 0.78);
  --line-on-dark: rgba(255, 255, 255, 0.14);
  --cta: var(--wine);     /* re-hue the call to action here only */
  --cta-deep: var(--wine-deep);

  /* ---- Type ----------------------------------------------------------------- */
  --font-display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.35rem, 1.2rem + 0.6vw, 1.6rem);
  --step-3: clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem);
  --step-4: clamp(2.1rem, 1.4rem + 2.9vw, 3.4rem);
  --step-5: clamp(2.6rem, 1.5rem + 4.6vw, 4.9rem);
  --numeral: clamp(7rem, 4rem + 13vw, 13.5rem);

  /* ---- Space, layers, shape ---------------------------------------------------- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 3.5rem;
  --space-5: clamp(5rem, 10vw, 8.5rem);
  --z-raised: 1;
  --z-header: 10;
  --z-menu: 100;
  --z-modal: 1000;
  --radius: 8px;
  --radius-lg: 14px;
  --container: 1200px;
  --header-h: 76px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reset ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--wine); text-underline-offset: 3px; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--wine); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible { outline-color: var(--brass); }
[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-modal);
  background: var(--card); color: var(--ink); padding: 0.75rem 1.25rem; font-weight: 600;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2rem); }

/* Type ------------------------------------------------------------------------ */
/* Eyebrow: the "ghost stack" Tony picked over eight options. Small, quiet,
   sitting directly above the heading. No rule, no dash, no number. */
.eyebrow {
  display: block;
  font-size: 0.9375rem; font-weight: 500; letter-spacing: 0;
  color: var(--ink-3); margin-bottom: 0.6rem;
}
.on-dark .eyebrow { color: var(--blush); }
.h2 {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-4);
  line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; max-width: 20ch;
}
.h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.01em; }
.lead { font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); max-width: 38rem; margin-top: 1.1rem; }
.on-dark .lead { color: var(--on-dark-2); }
.fine { font-size: var(--step--1); color: var(--ink-3); line-height: 1.5; }
.on-dark .fine { color: var(--on-dark-2); }

/* The headline highlight: a signature line. Notices end with a signed line,
   so the one phrase that carries the point sits on one. Used sparingly. */
.sig {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 92%;
  padding-bottom: 0.04em; color: var(--wine);
}
.on-dark .sig { color: var(--brass); }

/* Sections ----------------------------------------------------------------- */
.section { padding-block: var(--space-5); position: relative; }
.section.on-dark { background: var(--rail); color: var(--on-dark); }
.section.on-dark a:not(.btn) { color: var(--brass); }
.section__head { margin-bottom: var(--space-4); }
.section__foot { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; }

/* Buttons ----------------------------------------------------------------------
   The stamp. Notices get stamped and served, so the primary action presses
   down like one: a solid face on a darker edge. Hover sinks it 2px into the
   edge, active finishes the press. Corners 8px, never a pill, no arrow disc.
   The two numbers that must change together: the edge height (4px rest,
   2px hover, 0 active) and the translateY (0, 2px, 4px). */
.btn {
  --edge: var(--rail-deep);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 52px; padding: 0 1.4rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.005em;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  border-radius: var(--radius); border: none;
  color: var(--on-dark); background: var(--cta);
  box-shadow: 0 4px 0 var(--edge);
  transform: translateY(0);
  transition: transform 0.14s var(--ease-out), box-shadow 0.14s var(--ease-out), background-color 0.14s;
}
.btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--edge); background: var(--cta-deep); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--edge); }
.btn[disabled], .btn.is-busy { opacity: 0.6; cursor: progress; transform: translateY(2px); box-shadow: 0 2px 0 var(--edge); }
.btn__mark { font-family: var(--font-display); font-weight: 700; opacity: 0.8; }
.btn--light { color: var(--rail); background: var(--card); --edge: var(--brass); }
.btn--light:hover { background: var(--cream); }
.btn--ghost { color: var(--ink); background: var(--card); --edge: var(--line-2); box-shadow: 0 4px 0 var(--edge), inset 0 0 0 1px var(--line-2); }
.btn--ghost:hover { background: var(--card); box-shadow: 0 2px 0 var(--edge), inset 0 0 0 1px var(--ink-3); }
.btn--sm { min-height: 44px; padding: 0 1rem; font-size: 0.9875rem; }
.btn--block { width: 100%; }
/* Text link whose rule draws in from the left. */
.link {
  font-weight: 600; color: var(--ink); text-decoration: none;
  background-image: linear-gradient(var(--wine), var(--wine));
  background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 100%;
  padding-bottom: 2px; transition: background-size 0.3s var(--ease-out), color 0.2s;
}
.link:hover { color: var(--wine); }
.on-dark .link { color: var(--on-dark); background-image: linear-gradient(var(--brass), var(--brass)); }
@media (prefers-reduced-motion: no-preference) {
  .link { background-size: 0% 2px; }
  .link:hover, .link:focus-visible { background-size: 100% 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transform: none; transition: background-color 0.14s; }
}

/* Header ----------------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: calc(var(--z-menu) + 1);
  height: var(--header-h); pointer-events: none;
  transition: background-color 0.3s, box-shadow 0.3s;
}
.site-header.is-settled { background: rgba(245, 246, 247, 0.94); box-shadow: 0 1px 0 var(--line); backdrop-filter: saturate(1.2) blur(10px); }
.site-header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-header a, .site-header button { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); }
.brand__mark {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--rail); color: var(--on-dark); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
}
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; }
.header-right { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.5rem); }
.signin { font-weight: 600; font-size: 0.975rem; color: var(--ink); text-decoration: none; padding: 0.6rem 0.25rem; }
.signin:hover { color: var(--wine); }
/* Menu trigger: the section sign. It is the icon of this whole subject (every
   rule Evictago runs on is a "§ 704.xx"), and when the drawer is open it
   turns into the close mark. Not a hamburger. */
.menu-trigger { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; font-weight: 600; font-size: 0.975rem; color: var(--ink); }
.menu-trigger__glyph {
  width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center;
  background: var(--card); box-shadow: 0 3px 0 var(--line-2), inset 0 0 0 1px var(--line-2);
  font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; line-height: 1; color: var(--wine);
  transition: transform 0.35s var(--ease-out), background-color 0.2s, color 0.2s, box-shadow 0.14s;
}
.menu-trigger:hover .menu-trigger__glyph { transform: translateY(1px); box-shadow: 0 2px 0 var(--line-2), inset 0 0 0 1px var(--ink-3); }
.menu-trigger[aria-expanded="true"] .menu-trigger__glyph { background: var(--wine); color: var(--on-dark); box-shadow: 0 3px 0 var(--rail-deep); transform: rotate(180deg); }
.menu-trigger__glyph .x { display: none; }
.menu-trigger[aria-expanded="true"] .menu-trigger__glyph .s { display: none; }
.menu-trigger[aria-expanded="true"] .menu-trigger__glyph .x { display: inline; }
.menu-open .site-header { background: transparent; box-shadow: none; backdrop-filter: none; }
.menu-open .site-header .signin, .menu-open .menu-trigger__label { color: var(--on-dark); }
.menu-open .consent { display: none; }
@media (max-width: 700px) { .menu-open .site-header .brand { color: var(--on-dark); } }
@media (prefers-reduced-motion: reduce) { .menu-trigger[aria-expanded="true"] .menu-trigger__glyph { transform: none; } }

/* Drawer menu: roughly 40% width, dark rail at ~94%, sliding from the right. */
.menu { position: fixed; inset: 0; z-index: var(--z-menu); }
.menu[hidden] { display: none; }
.menu__scrim { position: absolute; inset: 0; background: rgba(17, 24, 39, 0.35); opacity: 0; transition: opacity 0.3s; }
.menu__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(31rem, 100vw);
  background: rgba(44, 10, 18, 0.96); color: var(--on-dark); backdrop-filter: blur(20px);
  padding: calc(var(--header-h) + 1.5rem) clamp(1.5rem, 4vw, 2.5rem) 2rem;
  display: flex; flex-direction: column; gap: 2rem; overflow-y: auto;
  transform: translateX(100%); transition: transform 0.38s var(--ease-out);
  box-shadow: -1px 0 0 rgba(230, 189, 115, 0.35);
}
.menu.is-open .menu__scrim { opacity: 1; }
.menu.is-open .menu__panel { transform: translateX(0); }
.menu__list { display: grid; }
.menu__list a {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--line-on-dark); text-decoration: none; color: var(--on-dark);
}
.menu__list a span:first-child { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.02em; }
.menu__list a span:last-child { font-size: 0.875rem; color: var(--on-dark-2); }
.menu__list a:hover span:first-child, .menu__list a[aria-current="page"] span:first-child { color: var(--brass); }
.menu__foot { margin-top: auto; display: grid; gap: 1rem; }
.menu__foot .fine { color: var(--on-dark-2); }
@media (prefers-reduced-motion: reduce) { .menu__panel, .menu__scrim { transition: none; } }

/* Hero ---------------------------------------------------------------------------- */
.hero { padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)); padding-bottom: var(--space-5); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero__eyebrow { color: var(--wine); font-weight: 600; }
.hero__title {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-5);
  line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance; max-width: 14ch;
}
.hero__lead { font-size: var(--step-1); color: var(--ink-2); max-width: 34rem; margin-top: 1.5rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.25rem; }
.hero__note { margin-top: 1.5rem; }

/* The signature: the four notices in ch. 704. One entrance sweep counts
   5 → 14 → 28 → 30 and settles back on 5; after that it only moves when
   the reader picks a tab. No resting motion. */
.periods {
  background: var(--rail); color: var(--on-dark); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: 0 30px 60px -30px rgba(62, 15, 25, 0.55);
}
.periods__label { font-size: 0.9375rem; color: var(--blush); }
.periods__tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-top: 1rem; }
.periods__tab {
  min-height: 48px; border-radius: var(--radius); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--on-dark-2); background: var(--rail-2); box-shadow: 0 3px 0 var(--rail-deep);
  transition: transform 0.14s var(--ease-out), box-shadow 0.14s, background-color 0.2s, color 0.2s;
}
.periods__tab:hover { color: var(--on-dark); transform: translateY(1px); box-shadow: 0 2px 0 var(--rail-deep); }
.periods__tab[aria-selected="true"] { background: var(--brass); color: var(--rail); box-shadow: 0 3px 0 var(--brass-deep); }
.periods__stage { position: relative; margin-top: 1.5rem; min-height: 20rem; }
.periods__panel { display: grid; gap: 0.75rem; }
.periods__panel[hidden] { display: none; }
.periods__num {
  font-family: var(--font-display); font-weight: 700; font-size: var(--numeral); line-height: 0.82;
  letter-spacing: -0.06em; color: var(--brass); font-variant-numeric: tabular-nums;
}
.periods__kind { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); letter-spacing: -0.01em; }
.periods__text { color: var(--on-dark-2); max-width: 30rem; }
.periods__cite { font-size: 0.9375rem; color: var(--blush); }
.periods__cite a { color: var(--blush); }
.periods__foot { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line-on-dark); font-size: 0.9375rem; color: var(--on-dark-2); }
.motion-ok .periods__panel.is-entering { animation: period-in 0.42s var(--ease-out) both; }
@keyframes period-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* How it works: a ledger line running through three real steps. ------------ */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 1.4rem; height: 1px; background: var(--line-on-dark); }
.step { position: relative; }
.step__n {
  width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: var(--rail); border: 1px solid var(--brass); color: var(--brass);
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
}
.step h3 { margin-top: 1.5rem; }
.step p { margin-top: 0.6rem; color: var(--on-dark-2); max-width: 22rem; }

/* The do-over: sidebar ledger beside the argument (a companion, not a stat row). */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.prose p + p { margin-top: 1rem; }
.prose p { color: var(--ink-2); max-width: 36rem; }
.ledger { background: var(--card); border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--line); padding: clamp(1.25rem, 3vw, 2rem); }
.ledger__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); }
.ledger__rows { margin-top: 1rem; }
.ledger__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--line); align-items: baseline; }
.ledger__row dt { color: var(--ink-2); }
.ledger__row dd { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.ledger__row small { display: block; font-size: 0.8125rem; color: var(--ink-3); font-family: var(--font-body); font-weight: 400; }
.ledger__note { margin-top: 1rem; }

/* Print & mail band ------------------------------------------------------------- */
.mail { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.mail__price { font-family: var(--font-display); font-weight: 700; font-size: var(--numeral); line-height: 0.85; letter-spacing: -0.05em; color: var(--brass); }
.mail__price-note { margin-top: 1rem; font-size: var(--step-1); color: var(--on-dark-2); max-width: 22rem; }
.compare { display: grid; }
.compare__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line-on-dark); align-items: baseline; }
.compare__row:first-child { border-top: 1px solid var(--line-on-dark); }
.compare__row span:last-child { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); font-variant-numeric: tabular-nums; }
.compare__row.is-ours span { color: var(--brass); }

/* Who it's for: full-width rows, not a card grid. ------------------------------- */
.rows { border-top: 1px solid var(--line-2); }
.row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr) auto; gap: 1rem 2rem; padding: 1.75rem 0; border-bottom: 1px solid var(--line-2); align-items: baseline; }
.row p { color: var(--ink-2); max-width: 40rem; }

/* Founder note ------------------------------------------------------------------- */
.note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.note__mark { font-family: var(--font-display); font-weight: 700; font-size: clamp(5rem, 3rem + 7vw, 9rem); line-height: 0.8; color: var(--brass); }
.note__body p { font-size: var(--step-1); line-height: 1.6; color: var(--on-dark); max-width: 40rem; }
.note__body p + p { margin-top: 1.1rem; }
.note__sign { margin-top: 1.75rem; font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); }
.note__sign span { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.9375rem; color: var(--on-dark-2); }

/* Pricing ---------------------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.plan { background: var(--card); border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; display: flex; flex-direction: column; }
.plan__head { padding: 1rem clamp(1.25rem, 3vw, 1.75rem); font-weight: 600; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; }
/* Color as structure: the plan we'd pick for most people gets the rail header. */
.plan--main .plan__head { background: var(--rail); color: var(--on-dark); border-bottom-color: var(--rail); }
.plan--main .plan__head span:last-child { color: var(--brass); }
.plan__body { padding: clamp(1.25rem, 3vw, 1.75rem); display: grid; gap: 0.75rem; flex: 1; align-content: start; }
.plan__price { font-family: var(--font-display); font-weight: 700; font-size: var(--step-5); line-height: 1; letter-spacing: -0.04em; }
.plan__price small { font-size: 1.1rem; letter-spacing: 0; color: var(--ink-3); font-weight: 600; }
.plan__body p { color: var(--ink-2); }
.addon { margin-top: 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; background: var(--wine-tint); border-radius: var(--radius-lg); padding: 1.1rem clamp(1.25rem, 3vw, 1.75rem); }
.addon strong { font-family: var(--font-display); font-size: var(--step-2); }
.honest { margin-top: 1.5rem; max-width: 42rem; color: var(--ink-2); }

/* FAQ accordion -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line-2); max-width: 52rem; }
.on-dark .faq { border-top-color: var(--line-on-dark); }
.faq details { border-bottom: 1px solid var(--line-2); }
.on-dark .faq details { border-bottom-color: var(--line-on-dark); }
.faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center;
  padding: 1.25rem 0; font-family: var(--font-display); font-weight: 700; font-size: var(--step-1);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "§"; font-size: 1.3rem; color: var(--wine); transition: transform 0.3s var(--ease-out); }
.on-dark .faq summary::after { color: var(--brass); }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details > div { padding-bottom: 1.25rem; color: var(--ink-2); max-width: 44rem; }
.on-dark .faq details > div { color: var(--on-dark-2); }
.faq details > div p + p { margin-top: 0.75rem; }

/* Forms: underline fields on a ruled sheet, not boxed inputs in a white card. */
.formwrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.form { display: grid; gap: 1.4rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.field { display: grid; gap: 0.35rem; }
.field label, .field legend { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.on-dark .field label, .on-dark .field legend { color: var(--on-dark); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 0.55rem 0.1rem; border: none; border-bottom: 2px solid var(--line-2);
  border-radius: 0; background: transparent; font-size: 1.0625rem; color: var(--ink); appearance: none;
  transition: border-color 0.2s;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 1.75rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--wine); }
.field input:focus-visible, .field select:focus-visible { box-shadow: 0 2px 0 var(--wine); }
.on-dark .field input, .on-dark .field select { color: var(--on-dark); border-bottom-color: rgba(255, 255, 255, 0.35); }
.on-dark .field select option { color: var(--ink); }
.on-dark .field input:focus, .on-dark .field select:focus { border-bottom-color: var(--brass); }
.check { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; font-size: 0.9375rem; color: var(--ink-2); }
.on-dark .check { color: var(--on-dark-2); }
.check input { width: 22px; height: 22px; margin: 0.1rem 0 0; accent-color: var(--wine); }
.hp { position: absolute; left: -9999px; }
.form-status { min-height: 1.5rem; font-weight: 600; }
.form-status.is-error { color: #b42318; }
.on-dark .form-status.is-error { color: #ffb4a8; }
.form-status.is-success { color: #1f6b3a; }
.on-dark .form-status.is-success { color: #9be0b0; }
/* status colors above are semantic (error / success), not brand, so they live here. */
.form-note { font-size: var(--step--1); color: var(--ink-3); }
.on-dark .form-note { color: var(--on-dark-2); }

/* Interior page heads ----------------------------------------------------------------- */
.page-head { padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem)); padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.page-head .h2 { font-size: var(--step-5); max-width: 16ch; }
.checklist { display: grid; gap: 0.9rem; margin-top: 1.5rem; }
.checklist li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.5rem; color: var(--ink-2); }
.checklist li::before { content: "§"; font-family: var(--font-display); font-weight: 700; color: var(--wine); }
.on-dark .checklist li { color: var(--on-dark-2); }
.on-dark .checklist li::before { color: var(--brass); }
.embed-slot {
  border-radius: var(--radius-lg); background: var(--card); box-shadow: inset 0 0 0 1px var(--line);
  min-height: 28rem; display: grid; place-items: center; padding: 2rem; text-align: center; color: var(--ink-3);
}
.embed-slot iframe { width: 100%; border: 0; }
.legal h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); margin-top: 2.5rem; }
.legal p, .legal li { color: var(--ink-2); max-width: 46rem; }
.legal p { margin-top: 0.9rem; }
.legal ul { margin-top: 0.75rem; display: grid; gap: 0.4rem; list-style: disc; padding-left: 1.25rem; }

/* Footer: a designed close. The statute is the watermark, the disclaimer is the line
   everyone should read, then the ruled columns. */
.site-footer { background: var(--rail-deep); color: var(--on-dark); padding-top: var(--space-5); overflow: hidden; position: relative; }
.footer__mark {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(6rem, 2rem + 16vw, 16rem); line-height: 0.8;
  letter-spacing: -0.06em; color: rgba(230, 189, 115, 0.1); white-space: nowrap; user-select: none;
}
.footer__disclaimer { margin-top: 2rem; max-width: 44rem; font-size: var(--step-1); line-height: 1.5; color: var(--on-dark); }
.footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: var(--space-4); padding-top: 2rem; border-top: 1px solid var(--line-on-dark); }
.footer__cols h2 { font-size: 0.9375rem; font-weight: 500; color: var(--blush); margin-bottom: 0.75rem; }
.footer__cols ul { display: grid; gap: 0.5rem; }
.footer__cols a { color: var(--on-dark); text-decoration: none; }
.footer__cols a:hover { color: var(--brass); }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 2rem; margin-top: 2rem; border-top: 1px solid var(--line-on-dark); font-size: 0.875rem; color: var(--on-dark-2); }
.footer__base a { color: var(--on-dark-2); }

/* Cookie notice ---------------------------------------------------------------------------- */
.consent {
  position: fixed; left: 1rem; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: var(--z-modal);
  max-width: 34rem; background: var(--card); color: var(--ink); border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px -20px rgba(17, 24, 39, 0.45), inset 0 0 0 1px var(--line); padding: 1rem 1.25rem;
  display: grid; gap: 0.75rem; font-size: 0.9375rem;
}
.consent[hidden] { display: none; }
.consent__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* Reveal: plays once, settles in half a second. Hidden state only with JS + motion. */
.motion-ok .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.motion-ok .reveal.in { opacity: 1; transform: none; }
.motion-ok .reveal[data-delay="1"] { transition-delay: 0.09s; }
.motion-ok .reveal[data-delay="2"] { transition-delay: 0.18s; }

/* Breakpoints ----------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .hero__grid, .split, .mail, .formwrap { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; gap: 0.5rem; }
  .steps { grid-template-columns: 1fr; gap: 2.25rem; }
  .steps::before { left: 1.4rem; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .step { display: grid; grid-template-columns: auto 1fr; column-gap: 1.25rem; }
  .step h3 { margin-top: 0.45rem; }
  .step p { grid-column: 2; }
  .plans { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  :root { --header-h: 68px; }
  .signin { display: none; }
  .menu-trigger__label { display: none; }
  .form__row { grid-template-columns: 1fr; }
  .note { grid-template-columns: 1fr; }
  .addon { grid-template-columns: 1fr; }
  .periods__stage { min-height: 22rem; }
  .footer__cols { grid-template-columns: 1fr; }
}
.prose--gap { margin-top: 1.5rem; }
.lead--sm { font-size: var(--step-0); }
.menu__foot a { color: inherit; }
.section--tight { padding-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1.5rem; }
.faq--spaced { margin-top: 1rem; }
.faq__group { margin-top: var(--space-4); }
/* Visible marker for text Tony still has to supply. Remove the class once filled. */
.slot-text { background: var(--wine-tint); color: var(--wine-deep); padding: 0 0.3em; border-radius: 3px; }
/* Review pass 1: the $45 is the second-loudest thing on the page, not a rival to the hero. */
.mail__price { font-size: clamp(5rem, 3rem + 7vw, 9rem); margin-top: 2rem; }
@media (min-width: 701px) { .consent { left: auto; right: 1.5rem; } }
.row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr) 11rem; }
.row > a { justify-self: end; }
.plan__body .plan__price { color: var(--ink); }
@media (max-width: 980px) { .row { grid-template-columns: 1fr; } .row > a { justify-self: start; } }