/* ==========================================================================
   2ndBrain design system
   Wovely, LLC d/b/a 2ndBrain  ·  2ndbrainconsulting.com
   Single stylesheet. No @import, no CDN, no external requests of any kind.

   THE IDEA
   Bev is a hand-crocheted periwinkle snake. The letterhead is deep navy.
   So: navy is the INK, not the theme. Lavender is a real surface, used at
   scale, not a sprinkle. The CTA is Bev's hue taken serious, a deep grape
   purple that clears 7.7:1 on white. Geometry is generously rounded because
   the mark is soft, and the type is heavy because the work is not.

   Read on a phone in a truck cab in Florida glare, or on a cheap office
   monitor by a window. That is why this commits to a light surface with
   large, high-contrast type. There is no dark theme on purpose.

   CONTRAST, measured (WCAG 2.1):
     ink        #14324A on --bg   12.7:1
     ink-2      #40566B on --bg    7.3:1   (body copy default)
     ink-3      #5C7186 on --bg    4.9:1   (.quiet, still AA at body size)
     white      on --accent        7.7:1   (.btn-primary)
     white      on --navy         13.2:1   (dark band)
     on-dark-2  #B9CBDA on --navy   8.0:1
     navy       on --accent-soft    7.6:1   (.btn-primary inside dark bands)
     accent-deep on --accent-tint   8.1:1   (.badge)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem; /* clears the sticky nav on anchor jumps */
}

img,
svg,
video { display: block; max-width: 100%; height: auto; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

ul, ol { list-style: none; padding: 0; }

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* --- Palette -----------------------------------------------------------
     Hex is the source of truth here on purpose: these values get copied by
     hand into letterhead, invoices, slides and email, where oklch() is not
     understood. OKLCH coordinates are noted for anyone extending the ramp. */

  /* Navy, from the letterhead. The ink of the practice. */
  --navy:        #14324A;   /* oklch(.30 .055 240) */
  --navy-deep:   #0D2231;   /* oklch(.23 .043 240) */
  --navy-mid:    #1E4666;   /* oklch(.38 .066 242) */

  /* Bev. Periwinkle-lavender, hue ~296. */
  --bev:         #B6A2E6;   /* the mark's own tone. Illustration only, never text */
  --accent:      #5B3FA8;   /* CTA fill, links. 7.7:1 with white */
  --accent-deep: #4A3190;   /* pressed / hover */
  --accent-soft: #CDBCF2;   /* CTA fill on dark bands, takes navy text at 7.6:1 */
  --accent-tint: #EDE6FB;   /* washes, badges, focus halos */

  /* Neutrals, tinted toward Bev's hue. Cool, never cream. */
  --bg:          #FBFAFE;
  --surface:     #FFFFFF;
  --surface-2:   #F3F0FA;   /* .section-alt band */
  --line:        #E4DFF0;
  --line-strong: #CDC3E3;

  /* Text */
  --ink:         #14324A;   /* headings, strong copy */
  --ink-2:       #40566B;   /* body default */
  --ink-3:       #5C7186;   /* .quiet, captions, fine print */
  --on-accent:   #FFFFFF;
  --on-dark:     #FFFFFF;
  --on-dark-2:   #B9CBDA;

  /* Signal. Forms only. */
  --ok:          #1E6B4F;
  --alert:       #A8272B;

  /* Focus. Overridden inside dark bands so the ring stays visible there. */
  --focus:       var(--accent);
  --focus-halo:  rgba(91, 63, 168, 0.22);

  /* --- Type --------------------------------------------------------------
     System stacks only. --font-display resolves to SF Rounded on Apple and
     Segoe UI Variable Display on Windows: warm, slightly soft, which is the
     point next to a crocheted mark. One family, hard weight contrast, rather
     than a timid display + body pair. */
  --font-display: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display",
                  "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                  Arial, sans-serif;
  --font-mono:    ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo,
                  Consolas, monospace;

  /* Modular scale, ratio ~1.28, fluid 360px -> 1440px */
  --step--2: 0.78rem;
  --step--1: 0.875rem;
  --step-0:  clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --step-1:  clamp(1.15rem, 1.09rem + 0.28vw, 1.375rem);
  --step-2:  clamp(1.4rem, 1.29rem + 0.5vw, 1.75rem);
  --step-3:  clamp(1.8rem, 1.5rem + 1.35vw, 2.6rem);
  --step-4:  clamp(2.35rem, 1.75rem + 2.7vw, 3.75rem);  /* h1 ceiling 60px */

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.62;
  --measure:  68ch;

  /* --- Space -------------------------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --gutter:   clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --wrap-max: 1140px;

  /* --- Shape -------------------------------------------------------------- */
  --radius-sm:   10px;
  --radius:      16px;
  --radius-lg:   26px;
  --radius-pill: 999px;
  --hairline:    1px;

  /* --- Elevation. Tinted navy, never flat black. -------------------------- */
  --shadow-sm: 0 1px 2px rgba(20, 50, 74, 0.06),
               0 4px 12px -8px rgba(20, 50, 74, 0.18);
  --shadow-md: 0 2px 4px rgba(20, 50, 74, 0.05),
               0 16px 32px -20px rgba(20, 50, 74, 0.28);
  --shadow-lg: 0 4px 8px rgba(20, 50, 74, 0.05),
               0 32px 64px -32px rgba(20, 50, 74, 0.32);
  --shadow-accent: 0 12px 28px -14px rgba(91, 63, 168, 0.55);

  /* --- Motion ------------------------------------------------------------- */
  --ease-out:      cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 340ms;
  --dur-4: 640ms;

  /* --- Depth. Semantic, never 9999. --------------------------------------- */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-nav:     200;
  --z-scrim:   300;
  --z-modal:   400;
  --z-toast:   600;
  --z-tooltip: 800;

  /* Fine paper grain, inline SVG. Local data URI, no network. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");

  color-scheme: light;
  accent-color: var(--accent);
}

/* --------------------------------------------------------------------------
   3. Base elements
   -------------------------------------------------------------------------- */

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 800;
  line-height: var(--lh-snug);
  letter-spacing: -0.022em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); line-height: var(--lh-tight); letter-spacing: -0.032em; }
h2 { font-size: var(--step-3); letter-spacing: -0.028em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.015em; }
h5, h6 { font-size: var(--step-0); font-weight: 700; letter-spacing: 0; }

p {
  max-width: var(--measure);
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/* Containers that already constrain their own measure. */
.card p,
.step p,
.field p,
.faq-item p,
.footer p { max-width: none; }

/* Vertical rhythm between stacked blocks, no top margins to fight. */
p + p,
p + ul,
p + ol,
ul + p,
ol + p,
h2 + p,
h3 + p,
h4 + p { margin-top: var(--space-4); }

h2 + h3,
p + h3 { margin-top: var(--space-6); }

a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--accent-deep); }

strong, b { color: var(--ink); font-weight: 700; }

hr {
  border: 0;
  border-top: var(--hairline) solid var(--line);
  margin: var(--space-7) 0;
}

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

/* --------------------------------------------------------------------------
   4. Focus. Visible everywhere, on light and on navy.
   -------------------------------------------------------------------------- */

:focus { outline: none; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.btn:focus-visible,
.faq-item > summary:focus-visible { outline-offset: 4px; }

/* Skip link. Drop `<a class="skip" href="#main">Skip to content</a>` first in body. */
.skip {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: var(--z-tooltip);
  padding: 0.75rem 1.25rem;
  background: var(--navy);
  color: var(--on-dark);
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip:focus-visible { transform: translateY(0); color: var(--on-dark); }

/* --------------------------------------------------------------------------
   5. Layout: .wrap .section .section-alt
   -------------------------------------------------------------------------- */

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

/* Narrow measure, SAME left edge as .wrap. Centring the narrow container
   instead slides the page's left margin in and out by ~180px on a desktop
   screen as you scroll between prose sections and full-width ones, which is
   the single loudest "assembled from a template" tell on a long page. The
   container stays full width; only the content inside it is capped. */
.wrap--narrow > * { max-width: 780px; }
/* A section that is deliberately centred keeps its old behaviour. */
.wrap--narrow.center { max-width: 820px; }
.wrap--narrow.center > * { max-width: none; }

.section {
  padding-block: var(--section-y);
  position: relative;
}

/* Lavender band. Alternate with plain .section for rhythm; do not stack two. */
.section-alt {
  background: var(--surface-2);
  border-block: var(--hairline) solid var(--line);
}

/* Navy band. Extra modifier, use once or twice per page for weight. */
.section-dark {
  background:
    radial-gradient(70rem 34rem at 84% -20%, rgba(182, 162, 230, 0.20), transparent 62%),
    var(--navy);
  color: var(--on-dark-2);
  border-block: 0;
  /* Rebind the tokens so nested components adapt without new classes. */
  --ink: var(--on-dark);
  --ink-2: var(--on-dark-2);
  --ink-3: var(--on-dark-2);
  --line: rgba(205, 188, 242, 0.22);
  --line-strong: rgba(205, 188, 242, 0.4);
  --surface: rgba(255, 255, 255, 0.05);
  --focus: var(--accent-soft);
  --focus-halo: rgba(205, 188, 242, 0.3);
}
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 { color: var(--on-dark); }
.section-dark a:not(.btn) { color: var(--accent-soft); }
.section-dark a:not(.btn):hover { color: #E4DBFB; }
.section-dark strong { color: var(--on-dark); }

/* Tighter spacing when two sections belong to the same thought. */
.section + .section.section--tight { padding-top: 0; }

/* --------------------------------------------------------------------------
   6. Type helpers: .eyebrow .lede .quiet .center .badge
   -------------------------------------------------------------------------- */

/* NOT the tiny tracked all-caps kicker. Deliberately sentence case with a Bev
   dot. Use it at most once or twice on a page. An eyebrow above every heading
   is scaffolding, and it reads that way. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--accent);
  margin-bottom: var(--space-3);
  align-self: flex-start; /* never stretch inside a flex or grid column */
}
.eyebrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--bev);
  box-shadow: 0 0 0 4px var(--accent-tint);
  flex: none;
}
.section-dark .eyebrow { color: var(--accent-soft); }
.section-dark .eyebrow::before { box-shadow: 0 0 0 4px rgba(205, 188, 242, 0.18); }

/* Intro paragraph under an h1 or h2. */
.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 46ch;
  margin-top: var(--space-5);
  text-wrap: pretty;
}
.section-dark .lede { color: var(--on-dark-2); line-height: 1.58; }

/* Fine print, captions, timestamps. Still clears 4.9:1. */
.quiet {
  color: var(--ink-3);
  font-size: var(--step--1);
  line-height: 1.5;
}
.section-dark .quiet { color: var(--on-dark-2); opacity: 0.9; }

/* Centres a block and its measure. */
.center { text-align: center; }
.center > * { margin-inline: auto; }
.center .lede,
.center p { max-width: 56ch; }
.center .eyebrow { display: inline-flex; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--accent-tint);
  color: var(--accent-deep);
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.4;
  white-space: nowrap;
  align-self: flex-start; /* never stretch inside a flex or grid column */
  width: fit-content;
}
.section-dark .badge {
  background: rgba(205, 188, 242, 0.16);
  color: var(--accent-soft);
}

/* --------------------------------------------------------------------------
   7. .nav
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--bg);
  border-bottom: var(--hairline) solid var(--line);
}
.nav > .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 4.5rem;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  min-height: 44px;
}
.nav__brand img { width: 2.25rem; height: 2.25rem; object-fit: contain; }
.nav__brand:hover { color: var(--accent-deep); }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.75rem);
}
/* :not(.btn) matters. A bare `.nav__links a` colour rule outranks
   .btn-primary and repaints the CTA label into its own background. */
.nav__links a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.25rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}
.nav__links a:not(.btn):hover { color: var(--accent-deep); }
.nav__links .btn { padding: 0.7rem 1.25rem; font-size: var(--step--1); }

/* Current page, marked ONE way for the whole site. Colour plus a rule, never
   colour alone, and drawn with an inset shadow rather than a border or an
   underline so the bar keeps exactly the same height on every page and the
   header does not jump as you move between them. Each page used to define its
   own version of this in a page-local <style>, which is how four pages ended
   up with four different headers. */
.nav__links a:not(.btn)[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 0 var(--accent);
}

/* Below 760px the text links stand down and the CTA carries the bar. */
@media (max-width: 760px) {
  .nav__links a:not(.btn) { display: none; }
  .nav > .wrap { min-height: 4rem; }
}

/* --------------------------------------------------------------------------
   8. .hero and .hero-art
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3.5rem, 7vw, 6rem);
  background:
    radial-gradient(60rem 40rem at 88% -10%, var(--accent-tint), transparent 58%),
    radial-gradient(46rem 30rem at -10% 110%, rgba(182, 162, 230, 0.16), transparent 60%),
    var(--bg);
  border-bottom: var(--hairline) solid var(--line);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: 0.035;
  pointer-events: none;
}
.hero > .wrap {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero > .wrap {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}
.hero h1 { margin-top: var(--space-4); }
/* Trailing margin, not a leading one on the sibling: when the pair wraps at
   360px the second button still sits flush to the left edge. */
.hero .btn { margin-top: var(--space-6); margin-right: var(--space-3); }

/* Bev's stage. Give it the mark, or the signup card, or both stacked. */
.hero-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 14rem;
}
.hero-art::before {
  content: "";
  position: absolute;
  inset: 8% 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--accent-tint), rgba(237, 230, 251, 0) 70%);
  z-index: 0;
}
.hero-art > * { position: relative; z-index: 1; }
.hero-art img {
  width: min(100%, 22rem);
  filter: drop-shadow(0 26px 40px rgba(20, 50, 74, 0.18));
  /* The drop-shadow is a filter; without its own layer the browser
     re-rasterises it every frame of the drift. Layerise, then composite. */
  will-change: transform;
  animation: bev-drift 9s var(--ease-out) infinite alternate;
}
.hero-art .card { width: min(100%, 27rem); }

/* Stacked hero: Bev stays a presence, not the whole first screen. */
@media (max-width: 899px) {
  .hero-art { min-height: 0; }
  .hero-art img { width: min(60%, 15rem); }
}

@keyframes bev-drift {
  from { transform: translateY(-0.4rem) rotate(-1.1deg); }
  to   { transform: translateY(0.5rem) rotate(1.1deg); }
}

/* Hero entrance.
   `both` includes `backwards`, which paints the FROM keyframe for the whole
   delay. So any element given a delay here is genuinely invisible until its
   animation starts, and stays invisible forever if the animation never runs.
   That is why the eyebrow, headline, lede and CTA are all on a zero delay:
   with no delay there is no backwards window to be stuck in. The stagger is
   carried by the two decorative elements only, and the whole sequence is done
   inside 500ms so the first screen never reads as half-loaded.
   The primary CTA is deliberately excluded: the one action on the page is
   painted at full opacity on the first frame, always. */
@keyframes rise {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: none; }
}
.hero > .wrap > * > .eyebrow,
.hero h1,
.hero .lede,
.hero .proof,
.hero-art { animation: rise var(--dur-3) var(--ease-out-expo) both; }
.hero .lede    { animation-delay: 80ms; }
.hero .proof   { animation-delay: 140ms; }
.hero-art      { animation-delay: 120ms; }

/* --------------------------------------------------------------------------
   9. .btn .btn-primary .btn-ghost
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.85rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--dur-2) var(--ease-out),
    background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

/* The one CTA. White on grape, 7.7:1. */
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--on-accent);
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -14px rgba(74, 49, 144, 0.6);
}

/* Inside a navy band the CTA flips to Bev lavender with navy type, 7.6:1. */
.section-dark .btn-primary,
.footer .btn-primary {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  color: var(--navy);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.6);
}
.section-dark .btn-primary:hover,
.footer .btn-primary:hover {
  background: #E0D5F8;
  border-color: #E0D5F8;
  color: var(--navy-deep);
}

/* Secondary path. Never two primaries side by side. */
.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn-ghost:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent-deep);
  transform: translateY(-2px);
}
.section-dark .btn-ghost { border-color: rgba(205, 188, 242, 0.45); color: var(--on-dark); }
.section-dark .btn-ghost:hover { background: rgba(205, 188, 242, 0.14); color: var(--on-dark); border-color: var(--accent-soft); }

.btn-block { width: 100%; }
.btn[disabled],
.btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* --------------------------------------------------------------------------
   10. .card and .cards
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem);
  margin-top: var(--space-7);
}
.cards--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }

/* Five items in a three-up grid leaves a hole in the second row, and an empty
   cell reads as unfinished. Six tracks: three cards of two, then two of three,
   so both rows fill edge to edge and the second row reads as a deliberate
   change of pace rather than a leftover. */
@media (min-width: 62rem) {
  .cards--five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cards--five > * { grid-column: span 2; }
  .cards--five > :nth-child(4),
  .cards--five > :nth-child(5) { grid-column: span 3; }
}
/* Two-up band: the fifth card takes the whole last row instead of sitting
   next to a hole. */
@media (min-width: 40rem) and (max-width: 61.999rem) {
  .cards--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--five > :nth-child(5) { grid-column: 1 / -1; }
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.card > h3 { margin-bottom: 0; }
/* The action sits at the foot of the card, so cards in a row line up. */
.card > .btn { align-self: flex-start; margin-top: auto; }
.card > .btn-block { align-self: stretch; }
.card > .btn:first-child { margin-top: 0; }
.card ul { display: grid; gap: var(--space-2); }
.card li { padding-left: 1.6rem; position: relative; }
.card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* Only for a card that is genuinely the recommended path. */
.card--lead {
  border-color: var(--accent-soft);
  box-shadow: var(--shadow-md);
  background:
    linear-gradient(180deg, var(--accent-tint), rgba(237, 230, 251, 0) 40%),
    var(--surface);
}

a.card:hover,
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.section-dark .card {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(205, 188, 242, 0.22);
  box-shadow: none;
  backdrop-filter: none;
}

/* --------------------------------------------------------------------------
   11. .proof
   -------------------------------------------------------------------------- */

/* A row of plain, checkable facts. No stat tiles, no invented numbers.
   Grid, not flex-wrap: items must stay aligned when one runs to two lines. */
.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-3) clamp(1rem, 3vw, 2rem);
  margin-top: var(--space-6);
  padding: 0;
}
.proof--stack { grid-template-columns: 1fr; gap: var(--space-3); }
/* Block, not flex. A flex item would promote a bare text node and an inline
   <strong> into two separate columns; the marker is absolutely placed
   instead so the copy keeps flowing as one sentence. */
.proof > li,
.proof > p,
.proof > span {
  display: block;
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-2);
}
.proof > li::before,
.proof > p::before,
.proof > span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.16em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--accent-tint);
  box-shadow: inset 0 0 0 2px var(--accent-soft);
}
.proof strong { color: var(--ink); }

/* Boxed variant when the proof row needs to stand apart from a paragraph. */
.proof--boxed {
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.section-dark .proof > * { color: var(--on-dark-2); }
.section-dark .proof > *::before {
  background: rgba(205, 188, 242, 0.2);
  box-shadow: inset 0 0 0 2px var(--accent-soft);
}

/* --------------------------------------------------------------------------
   12. .steps and .step
   -------------------------------------------------------------------------- */

/* A real, ordered sequence, which is the only case where numbers earn their
   place. Not a card grid: a top rule and a number, nothing else. */
/* Every sequence on this site is four steps long, so the track count is set
   rather than left to auto-fit. auto-fit lands on three columns around tablet
   width and strands the fourth step alone in a row of empty cells, which
   reads as a section that failed to load. One, then two, then four. A grid
   with a different number of steps overrides this (see .steps--timeline). */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: var(--space-7);
  counter-reset: step;
}
@media (min-width: 40rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step {
  position: relative;
  padding-top: var(--space-5);
  border-top: 2px solid var(--line-strong);
  transition: border-color var(--dur-3) var(--ease-out);
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1;
  margin-bottom: var(--space-3);
}
.step h3,
.step h4 { font-size: var(--step-1); margin-bottom: var(--space-2); }
.step p { font-size: var(--step--1); color: var(--ink-2); }
/* One step heading running to two lines pushes its body copy out of line with
   the rest of the row, which reads as a bug rather than as rhythm. Subgrid
   locks the number row, the heading row and the copy row across the whole
   sequence. Steps carry their own spacing in margins, so the inherited row
   gap is zeroed out. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 40rem) {
    .steps { grid-template-rows: auto auto 1fr; }
    .step {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      gap: 0;
    }
    /* The plain variant has no heading: number, then copy. */
    .steps--plain { grid-template-rows: auto 1fr; }
    .steps--plain .step { grid-row: span 2; }
  }
}

.steps:hover .step { border-top-color: var(--line); }
.steps .step:hover { border-top-color: var(--accent); }
.section-dark .step { border-top-color: rgba(205, 188, 242, 0.3); }
.section-dark .step::before { color: var(--accent-soft); }

/* --------------------------------------------------------------------------
   13. .faq and .faq-item
   -------------------------------------------------------------------------- */

/* .faq wraps a stack of <details class="faq-item"> elements. */
.faq {
  max-width: 46rem;
  margin-top: var(--space-7);
  border-top: var(--hairline) solid var(--line);
}
.faq-item { border-bottom: var(--hairline) solid var(--line); }
.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
  padding: var(--space-4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  transition: color var(--dur-2) var(--ease-out);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--accent-deep); }
.faq-item > summary::after {
  content: "";
  flex: none;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background:
    linear-gradient(var(--accent), var(--accent)) 50% 50% / 0.7rem 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 50% 50% / 2px 0.7rem no-repeat,
    var(--accent-tint);
  transition: transform var(--dur-3) var(--ease-out);
}
.faq-item[open] > summary::after { transform: rotate(135deg); }
.faq-item[open] > summary { color: var(--accent-deep); }
.faq-item > summary + * { padding-bottom: var(--space-5); }
.faq-item p { color: var(--ink-2); max-width: 62ch; }
.section-dark .faq-item > summary::after {
  background:
    linear-gradient(var(--navy), var(--navy)) 50% 50% / 0.7rem 2px no-repeat,
    linear-gradient(var(--navy), var(--navy)) 50% 50% / 2px 0.7rem no-repeat,
    var(--accent-soft);
}

/* --------------------------------------------------------------------------
   14. .form and .field
   -------------------------------------------------------------------------- */

.form { display: grid; gap: var(--space-4); }
.form .btn { margin-top: var(--space-2); }

.field { display: grid; gap: 0.4rem; }
.field > label {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.95rem;
  background: var(--bg);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--step-0);
  color: var(--ink);
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.field textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-3); opacity: 1; } /* 4.9:1, not a whisper */
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--accent-soft); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--focus-halo);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--alert); }
.field .quiet { margin-top: 0.1rem; }
.field__error { color: var(--alert); font-size: var(--step--1); font-weight: 600; }
.field__ok { color: var(--ok); font-size: var(--step--1); font-weight: 600; }

/* Checkbox / radio rows keep a 44px target. */
.field--check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.7rem;
  min-height: 44px;
  padding-block: 0.4rem;
}
.field--check input { width: 1.35rem; height: 1.35rem; min-height: 0; margin-top: 0.18em; }
.field--check label { font-weight: 600; color: var(--ink-2); font-size: var(--step--1); }

/* Two fields on one row from 560px up. */
@media (min-width: 560px) {
  .form--split { grid-template-columns: 1fr 1fr; }
  .form--split > .btn,
  .form--split > .quiet,
  .form--split > .field--wide { grid-column: 1 / -1; }
}

/* Dark band forms */
.section-dark .field input,
.section-dark .field select,
.section-dark .field textarea {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(205, 188, 242, 0.35);
  color: var(--on-dark);
}
.section-dark .field input::placeholder { color: rgba(185, 203, 218, 0.85); }
.section-dark .field input:focus-visible { background: rgba(255, 255, 255, 0.12); border-color: var(--accent-soft); }

/* --------------------------------------------------------------------------
   15. .footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--navy);
  color: var(--on-dark-2);
  padding-block: clamp(2.5rem, 5vw, 4rem) var(--space-6);
  --focus: var(--accent-soft);
}
/* Grid, not space-between: three unequal blocks would otherwise drift to the
   far edges and leave a hole in the middle. */
.footer > .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-6) var(--space-7);
  align-items: start;
}
.footer h2,
.footer h3,
.footer h4,
.footer strong { color: var(--on-dark); }
.footer h3 { font-size: var(--step-1); margin-bottom: var(--space-3); }
.footer__brand + p { margin-top: var(--space-5); }
.footer a:not(.btn) { color: var(--accent-soft); text-decoration: none; }
.footer a:not(.btn):hover { color: #E4DBFB; text-decoration: underline; }
.footer nav,
.footer ul { display: grid; gap: var(--space-2); }
.footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--step--1);
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
  color: var(--on-dark);
}
.footer__brand img { width: 2.25rem; height: 2.25rem; }
.footer .quiet { color: rgba(185, 203, 218, 0.85); }
.footer__legal {
  grid-column: 1 / -1;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(205, 188, 242, 0.2);
  font-size: var(--step--2);
  color: rgba(185, 203, 218, 0.85);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   16. Small utilities the pages will reach for
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.stack   { display: grid; gap: var(--space-4); }
.stack-6 { display: grid; gap: var(--space-6); }
.row     { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.mt-6    { margin-top: var(--space-6); }
.mt-7    { margin-top: var(--space-7); }
.no-wrap { white-space: nowrap; }

/* Two-column narrative block: copy on one side, art or a form on the other. */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-top: var(--space-7);
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
  .split--reverse > :first-child { order: 2; }
}
/* Centring is right when both columns are short. When one side is a tall form
   the short side floats in the middle of a void; both columns start together
   instead. */
.split--top { align-items: start; }

/* --------------------------------------------------------------------------
   17. Motion preferences. Not optional.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Nothing moves; state changes still read through colour and outline. */
  .btn:hover,
  .card:hover,
  a.card:hover,
  .btn-primary:hover,
  .btn-ghost:hover { transform: none; }
  .hero-art img { animation: none; }
  .hero > .wrap > * > .eyebrow,
  .hero h1,
  .hero .lede,
  .hero .proof,
  .hero-art { animation: none; opacity: 1; transform: none; }
}

/* Coarse pointers get roomier targets. */
@media (pointer: coarse) {
  .nav__links a,
  .footer li a { min-height: 48px; }
  .btn { min-height: 52px; }
}

/* --------------------------------------------------------------------------
   18. Print
   -------------------------------------------------------------------------- */

@media print {
  .nav, .hero-art, .btn { display: none; }
  body { background: #fff; color: #000; }
  .section, .section-alt, .section-dark, .footer {
    background: #fff;
    color: #000;
    padding-block: 1.5rem;
  }
  .section-dark h2, .footer h3 { color: #000; }
  .faq-item > summary + * { display: block; }
}