/* ============================================================================
   Personnel Ledger: marketing stylesheet (landing.css)
   Self-contained on purpose: the app stylesheet (/app/css/app.css) belongs to
   the product shell and changes with it, so the marketing pages never load it.
   No frameworks, no build step.

   Built from Volunteer Ledger's marketing stylesheet as it stood after the
   2026-10 family layer (volunteercenter/web/css/landing.css): the same
   components, sizes, breakpoints and motion, consolidated into one pass
   instead of VL's stacked layers. What differs is Personnel Ledger's own:
     - the refined Mulberry palette (Greg's branding review, confirmed
       2026-10-05). The core six do the heavy lifting, not equally:
         Ledger Plum #7A3158   primary buttons, links, key accents
         Deep Mulberry #53203D hovers, icon depth, the one dark CTA band
         Rose Mist #F3E4EB     soft tint grounds and subtle fills
         Warm Blush #FBF7F9    page and card grounds
         Charcoal Plum #2E2028 ALL main text, body and headings
         Slate Taupe #6E646A   supporting text only
       Plum is an accent; the site is never all pink. The old slate blue
       (#3E5A80) is gone from the site palette; it survives only inside the
       current logo files until the new logo arrives.
     - LIGHT ONLY, like VL and CR (Greg 2026-10-05). No prefers-color-scheme
       dark rules, no data-theme dark. The one deep plum band (.trial-band--plum)
       is a single closing section, not a theme.
     - status colours (sage current, amber due soon, muted red overdue, grey not
       required) live in their own tokens, each with a dot, a text and a ground
       shade, and are never used as brand colour;
   NO MOTION ON SCROLL: no reveals, slide-ins, sticky columns, carousels or
   hover lifts (Greg 2026-10-05). Hover changes colour and border only.
   Type (Greg 2026-10-06, replacing the brand sheet's Fraunces and Inter): the
   family's Source Serif 4 (600/700) for headings and Source Sans 3
   (400/600/700) for body and UI, at VL's and CR's 17px root; the wordmark is
   Manrope 800 two-tone and the mark is the PL monogram, the family standard
   in ops/BRAND-STANDARD.md (Greg 2026-10-06). UI system
   from Greg's brand sheet (2026-10-05): 12px
   radius for cards and containers, 8px for inputs, badges and buttons. Cards:
   1px border, white or soft tint fill, shadow 0 4px 16px rgba(46,32,40,.08).
   Buttons: primary solid Ledger Plum, secondary Rose Mist with plum text,
   tertiary white with a 1px border.
   ============================================================================ */

:root {
  --pl-primary: #7A3158;         /* Ledger Plum */
  --pl-primary-dark: #53203D;    /* Deep Mulberry */
  --pl-primary-soft: #F3E4EB;    /* Rose Mist */
  --pl-accent: #B0527D;          /* Fold Rose: the SECOND brand colour, "Ledger" in the
                                    wordmark and the monogram's L (as VL's rust and CR's
                                    gold). 4.8:1 on white. Never a status colour. */
  --pl-primary-line: rgba(122, 49, 88, .22);
  --pl-primary-ring: rgba(122, 49, 88, .45);
  --pl-primary-glow: rgba(122, 49, 88, .08);
  --pl-tint: #FBF7F9;            /* = Warm Blush, as a card or panel ground */
  --pl-bg: #FBF7F9;              /* Warm Blush */
  --pl-bg-top: #FDFBFC;
  --pl-surface: #FFFFFF;
  --pl-surface-muted: #F5EFF2;
  --pl-surface-raised: #FFFFFF;
  --pl-border: #ECE2E7;
  --pl-border-strong: #DDCFD6;
  --pl-text: #2E2028;            /* Charcoal Plum */
  --pl-text-soft: #6E646A;       /* Slate Taupe */
  --pl-ink: #2E2028;
  --pl-on-primary: #FFFFFF;
  --pl-btn-top: #7A3158;          /* Ledger Plum */
  --pl-btn-bottom: #6E2B50;
  --pl-btn-top-hover: #62284A;
  --pl-btn-bottom-hover: #53203D;  /* Deep Mulberry on hover */
  --pl-btn-edge: rgba(83, 32, 61, .35);
  --pl-ghost-bg: #FFFFFF;
  --pl-head-bg: rgba(255, 255, 255, .84);
  --pl-head-line: rgba(83, 32, 61, .12);
  --pl-field-bg: #FFFFFF;
  --pl-dot: rgba(46, 32, 40, .035);
  --pl-glow-b: rgba(122, 49, 88, .05);
  --pl-shadow-rgb: 46, 32, 40;
  --pl-shadow: 0 4px 16px rgba(46, 32, 40, .08);   /* the brand card shadow */
  --pl-shadow-lift: 0 8px 28px rgba(46, 32, 40, .10);
  --pl-shot-shadow: 0 28px 70px rgba(46, 32, 40, .14), 0 2px 8px rgba(46, 32, 40, .07);
  --pl-danger: #9E3D48;
  --pl-danger-soft: #F8E6E8;
  --pl-select-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E646A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

  /* Status colours: the product's four states. Never brand colour. Each has a
     dot/bar shade, a text shade (AA on its own ground) and a ground. */
  --st-ok: #3F6B58;      --st-ok-bg: #E6F0EB;     --st-ok-bar: #4E806B;
  --st-due: #8A5A1E;     --st-due-bg: #F8EBD9;    --st-due-bar: #B77A34;
  --st-over: #9E3D48;    --st-over-bg: #F8E6E8;   --st-over-bar: #B84C57;
  --st-na: #5C565A;      --st-na-bg: #ECE8EA;     --st-na-bar: #A69CA1;

  --pl-radius: 12px;             /* cards and containers */
  --pl-radius-sm: 8px;           /* inputs, badges and buttons */
  /* The family's type (Greg 2026-10-06: "use the same font across the board for
     VL, CR, and PL"): Source Serif 4 display over Source Sans 3 body, the same
     stacks as volunteercenter/ and careroster/web/css/landing.css. */
  --pl-font: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pl-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --pl-wordmark: 'Manrope', 'Source Sans 3', system-ui, sans-serif;
  --pl-ease: ease;
  color-scheme: light;
  font-size: 17px;               /* VL's and CR's root size */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--pl-font);
  background: var(--pl-bg);
  color: var(--pl-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* Source Serif wants 700 and almost no negative tracking, or it goes muddy at
   display size (VL's family layer). */
h1, h2, h3 {
  font-family: var(--pl-display); font-weight: 700;
  letter-spacing: -.012em; line-height: 1.18; text-wrap: balance;
  margin: 0 0 .55rem; color: var(--pl-ink);
}
a { color: var(--pl-primary); }

.balance { text-wrap: balance; }
.nw { white-space: nowrap; }

/* honeypot field: visually hidden, still in the form for bots to find */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ---- shared layout -------------------------------------------------------- */
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
section[id], [id].lp-value, [id].wyg-c-tile { scroll-margin-top: 104px; }
.section { padding: 5rem 0; }
.section--tight { padding: 3.4rem 0; }
.section--alt { background: var(--pl-surface); border-top: 1px solid var(--pl-border); border-bottom: 1px solid var(--pl-border); }

/* Eyebrow: a 34px rule plus a sentence-case serif label (the family's). */
.eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--pl-display); font-size: 1rem; font-weight: 600;
  color: var(--pl-text-soft);
  margin-bottom: .6rem;
}
.eyebrow::before { content: ''; flex: 0 0 auto; width: 34px; height: 2px; background: var(--pl-primary); }
.hero .eyebrow, .lp-hero .eyebrow { color: var(--pl-primary-dark); }

.section-title {
  font-size: clamp(1.75rem, 3.4vw, 2.35rem);
  letter-spacing: -.015em; line-height: 1.16;
  max-width: 32ch;
}
.section-lead {
  color: var(--pl-text-soft);
  font-size: 1.06rem; line-height: 1.65;
  max-width: 60ch;
  margin: 0 0 2.2rem;
}
.center { text-align: center; }
.center .section-title, .center .section-lead { margin-left: auto; margin-right: auto; }

/* ---- two-tone wordmark ------------------------------------------------------
   The family standard (ops/BRAND-STANDARD.md): Manrope 800, the first word in
   the primary, the second in the second brand colour, half a space between.
   Exactly VL's and CR's rule, so the three wordmarks are one system. */
.wordmark { font-family: var(--pl-wordmark); font-weight: 800; letter-spacing: -.04em; word-spacing: -.14em; text-decoration: none; white-space: nowrap; }
.wordmark .wm-a { color: var(--pl-primary); }
.wordmark .wm-b { color: var(--pl-accent); margin-left: .16em; }

/* ---- buttons ---------------------------------------------------------------- */
.btn {
  font: inherit; font-weight: 600;
  border-radius: var(--pl-radius-sm);
  border: 1.5px solid transparent;
  padding: .62rem 1.35rem;
  min-height: 2.75rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  transition: transform .16s var(--pl-ease), box-shadow .16s var(--pl-ease), background-color .16s, color .16s, border-color .16s;
}
/* Primary: solid Ledger Plum, white text; Deep Mulberry on hover. */
.btn-primary {
  background: var(--pl-primary);
  color: var(--pl-on-primary);
  border: 1px solid var(--pl-primary);
  box-shadow: 0 4px 12px rgba(83, 32, 61, .18);
}
.btn-primary:hover { background: var(--pl-primary-dark); border-color: var(--pl-primary-dark); }
/* Secondary: Rose Mist fill, plum text. */
.btn-secondary { background: var(--pl-primary-soft); border-color: var(--pl-primary-soft); color: var(--pl-primary-dark); }
.btn-secondary:hover { background: #ECD5E0; border-color: #ECD5E0; color: var(--pl-primary-dark); }
/* Tertiary (.btn-ghost): white with a 1px border. */
.btn-ghost { background: var(--pl-ghost-bg); border: 1px solid var(--pl-border-strong); color: var(--pl-text); }
.btn-ghost:hover { color: var(--pl-primary-dark); border-color: var(--pl-primary); }
.btn-big { font-size: 1.1rem; padding: .9rem 1.9rem; min-height: 3.35rem; border-radius: var(--pl-radius-sm); }
.btn:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--pl-primary-ring);
  outline-offset: 2px;
}
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* skip link: visually hidden until keyboard-focused */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--pl-primary-dark); color: var(--pl-bg);
  font-weight: 600; text-decoration: none;
  padding: .6rem 1.1rem; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* ---- sticky header ---------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--pl-head-bg);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--pl-head-line);
  box-shadow: 0 1px 0 rgba(var(--pl-shadow-rgb), .04), 0 10px 30px -14px rgba(var(--pl-shadow-rgb), .16);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-head { background: var(--pl-surface); }
}
/* ⛔ HEADER ROOM (as VL/CR, 2026-10-05): 1320 max, the tight band runs to 1320,
   the phone menu takes over at 1180, and the brand never shrinks. Windows
   renders text a few percent wider than headless Linux, so keep the slack. */
.site-head-in {
  max-width: 1320px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.4rem;
  /* ⛔ HEADER SPEC (ops/BRAND-STANDARD.md, Greg 2026-10-06: "header sizes are
     a standard between my apps"): an 86px row, so the bar is 87px whatever
     the row holds (signup closed hides the trial button). */
  padding: 1rem 28px; min-height: 86px;
}
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; flex-shrink: 0; }
.brand .wordmark { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.42rem; line-height: 1; }
/* ⛔ ROOM FOR THE DESCENDER: overflow:hidden with line-height:1 cut the "g" of
   Ledger on VL (Greg 2026-09-28). The padding gives the ink room inside the
   clip; the equal negative margin hands the space back. Checked by
   ops/test-text-clipping.mjs. */
.brand .wordmark { padding-block: .25em; margin-block: -.25em; }
.brand img { width: auto; height: 44px; border-radius: 0; }  /* the brand symbol, 44px tall as the family's icons (a portrait document, no tile) */
.site-nav { display: flex; gap: .3rem; margin-left: 1.5rem; }
.site-nav > a {
  text-decoration: none; color: var(--pl-text-soft);
  font-weight: 650; font-size: .98rem; white-space: nowrap;
  padding: .54rem 1rem; border-radius: var(--pl-radius-sm);
  transition: color .14s, background-color .14s, box-shadow .14s;
}
.site-nav > a:hover {
  color: var(--pl-primary-dark); background: var(--pl-primary-soft);
  box-shadow: inset 0 0 0 1px var(--pl-primary-line);
}
.nav-toggle, .site-nav .nav-cta { display: none; }
.head-cta { margin-left: auto; display: flex; align-items: center; gap: .9rem; }
.head-cta .btn { min-height: 2.7rem; padding: .55rem 1.25rem; font-size: .98rem; }
.head-cta .btn-ghost { border: none; background: none; padding: .55rem .85rem; border-radius: var(--pl-radius-sm); font-weight: 650; color: var(--pl-text); }
.head-cta .btn-ghost:hover { color: var(--pl-primary-dark); background: var(--pl-primary-soft); }
.head-cta .btn-primary { min-height: 2.85rem; padding: .62rem 1.4rem; font-weight: 600; border-radius: var(--pl-radius-sm); }

/* Header dropdowns: the family component is the generated block near the end
   of this file. Only Personnel Ledger's own mapping lives here. */
.site-head {
  --dd-surface: var(--pl-surface); --dd-border: var(--pl-border); --dd-muted: var(--pl-surface-muted);
  --dd-ink: var(--pl-text); --dd-ink-soft: var(--pl-text-soft); --dd-display: var(--pl-display);
  --dd-accent-soft: var(--pl-primary-soft); --dd-accent-ink: var(--pl-primary-dark);
  --dd-accent-line: var(--pl-primary-line); --dd-focus: var(--pl-primary-ring);
  --dd-shadow-rgb: var(--pl-shadow-rgb);
  --dd-row-px: 28px; --dd-sub-pl: 44px;
}
@media (min-width: 1181px) { .site-nav { align-items: center; } }
.nav-dd-trigger {
  display: inline-flex; align-items: center; gap: .28rem;
  color: var(--pl-text-soft); font-weight: 650; font-size: .98rem;
  padding: .54rem 1rem; border-radius: var(--pl-radius-sm);
  transition: color .16s ease, background-color .16s ease;
}

/* ---- heroes ----------------------------------------------------------------- */
.hero, .lp-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 16% 12%, var(--pl-primary-glow), transparent 36%),
    radial-gradient(circle at 86% 8%, var(--pl-glow-b), transparent 30%),
    linear-gradient(180deg, var(--pl-bg-top) 0%, var(--pl-bg) 100%);
}
.hero::before, .lp-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(var(--pl-dot) 1px, transparent 1px);
  background-size: 22px 22px;
}
.hero .wrap, .lp-hero .wrap { position: relative; z-index: 1; }
.hero { padding: 5.2rem 0 0; }
.lp-hero { padding: 4.4rem 0 3.4rem; border-bottom: 1px solid var(--pl-border); }
.hero-copy { max-width: 880px; margin: 0 auto; text-align: center; }
.lp-hero-copy { max-width: 760px; margin: 0 auto; text-align: center; }
.hero h1 { font-size: clamp(42px, 5vw, 64px); letter-spacing: -.02em; line-height: 1.06; margin: 0 0 1.15rem; }
.lp-hero h1 { font-size: clamp(34px, 4.4vw, 50px); letter-spacing: -.02em; line-height: 1.06; margin: 0 0 1.1rem; }
.hero-sub, .lp-hero-sub {
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  color: var(--pl-text-soft);
  max-width: 56ch; margin: 0 auto 1.9rem;
}
.hero-cta, .lp-hero-cta { display: flex; gap: .85rem; justify-content: center; flex-wrap: wrap; }
.hero-trust, .lp-hero-trust {
  display: flex; gap: .4rem 1.5rem; justify-content: center; flex-wrap: wrap;
  margin: 1.35rem 0 0; padding: 0; list-style: none;
  font-size: .93rem; font-weight: 600; color: var(--pl-text-soft);
}
.hero-trust li, .lp-hero-trust li { display: inline-flex; align-items: center; gap: .4rem; }
.hero-trust svg, .lp-hero-trust svg { color: var(--pl-primary); flex: 0 0 auto; }
/* ⛔ HERO CHECKS (Greg 2026-10-06, every product): FOUR, a true 2 x 2 grid with
   aligned columns: "45-day free trial" (PL says "at launch" while signup is
   closed; drop that on launch day), "No credit card to start", then two about
   the product. One column on phones. */
.hero-trust--grid { display: grid; grid-template-columns: repeat(2, max-content); gap: .5rem 1.6rem; }
.hero-trust--grid li { justify-content: flex-start; }
@media (max-width: 560px) { .hero-trust--grid { grid-template-columns: max-content; } }
.lp-breadcrumb { font-size: .85rem; font-weight: 600; color: var(--pl-text-soft); margin: 0 0 1.1rem; text-align: center; }
.lp-breadcrumb a { color: var(--pl-text-soft); text-decoration: none; }
.lp-breadcrumb a:hover { color: var(--pl-primary-dark); text-decoration: underline; text-underline-offset: 3px; }
.lp-breadcrumb span[aria-current] { color: var(--pl-text); }

/* ---- framed product shots ---------------------------------------------------
   One frame style for every product screenshot (ops/shoot-marketing.mjs).
   Only a frame holding an <img> invites a click (zoom cursor, hover ring):
   the lightbox in js/nav.js binds images (VL's 2026-09-17 lightbox lesson). */
.shot-frame {
  background: var(--pl-surface);
  border: 1px solid var(--pl-border-strong);
  border-radius: var(--pl-radius);
  box-shadow: var(--pl-shot-shadow);
  overflow: hidden;
  margin: 0;
}
.shot-frame .shot-bar {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  background: var(--pl-surface-muted);
  border-bottom: 1px solid var(--pl-border);
  min-height: 32px;
}
.shot-frame .shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--pl-border-strong); display: inline-block; }
.shot-frame .shot-bar .shot-url {
  position: absolute; left: 50%; transform: translateX(-50%);
  background: var(--pl-surface);
  border: 1px solid var(--pl-border);
  border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  color: var(--pl-text-soft);
  line-height: 1.2;
  padding: 3px 14px;
  white-space: nowrap;
}
.shot-frame img { width: 100%; cursor: zoom-in; }
.shot-frame:has(img) { transition: transform .18s ease, box-shadow .18s ease; }
.shot-frame:has(img):hover { box-shadow: var(--pl-shot-shadow), 0 0 0 2.5px var(--pl-primary); }
.cr-lightbox {
  position: fixed; inset: 0; z-index: 2000;
  display: none; align-items: center; justify-content: center;
  background: rgba(16, 10, 14, .86); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: 4vmin; cursor: zoom-out; opacity: 0; transition: opacity .2s ease;
}
.cr-lightbox.open { display: flex; opacity: 1; }
.cr-lightbox img { max-width: 96vw; max-height: 92vh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 30px 90px rgba(0, 0, 0, .5); cursor: default; }
.cr-lightbox-close {
  position: absolute; top: 18px; right: 22px; width: 44px; height: 44px;
  border: none; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #FFFFFF;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cr-lightbox-close:hover { background: rgba(255, 255, 255, .28); }

/* ---- the two-column hero (one hero layout site-wide, as VL) ------------------ */
.hero--split { display: flex; align-items: center; }
.hero.hero--split {
  min-height: calc(100vh - var(--pl-head-h, 74px));
  min-height: calc(100svh - var(--pl-head-h, 74px));
  padding: 3.6rem 0 4rem;
}
.hero--split > .wrap { width: 100%; }
.hero--split .hero-in { display: grid; grid-template-columns: 1fr 1.04fr; gap: 2.8rem; align-items: center; }
.hero--split .hero-copy,
.hero--split .lp-hero-copy { max-width: 33rem; margin: 0; text-align: left; }
.hero--split h1 { font-size: clamp(38px, 3.5vw, 50px); }
.lp-hero.hero--split h1 { font-size: clamp(34px, 3.05vw, 44px); }
.hero--split .hero-sub,
.hero--split .lp-hero-sub { max-width: 100%; margin: 0 0 1.8rem; text-wrap: pretty; }
.hero--split .hero-cta, .hero--split .hero-trust,
.hero--split .lp-hero-cta, .hero--split .lp-hero-trust { justify-content: flex-start; }
.hero--split .hero-trust, .hero--split .lp-hero-trust { gap: .45rem 1.35rem; }
.hero--split .lp-breadcrumb { text-align: left; }

/* ⛔ BOTH SHOTS ARE THE SAME SIZE (Greg 2026-10-05): the back one flush left,
   the front one flush right, so each juts out by the same amount. Change the
   two widths together, never one of them. */
.hero-stage { position: relative; }
.hero-stage .shot-frame { margin: 0; }
.hero-stage .hero-shot-back { width: 86%; position: relative; z-index: 1; }
.hero-stage .hero-shot-front { width: 86%; margin-left: auto; margin-top: -19%; position: relative; z-index: 2; }
.hero-stage.hero-stage--single .shot-frame { width: 100%; margin: 0; }

@media (min-width: 1280px) {
  .hero--split > .wrap { max-width: 1280px; }
  .hero--split .hero-in { gap: 3rem; }
  .hero--split .hero-copy { max-width: 36rem; }
  .hero-stage .hero-shot-back { width: 88%; }
  .hero-stage .hero-shot-front { width: 88%; margin-top: -20%; }
}
@media (min-width: 1500px) {
  .hero--split > .wrap { max-width: 1440px; }
  .hero--split .hero-in { grid-template-columns: 1fr 1.16fr; gap: 3.6rem; }
  .hero--split h1 { font-size: 55px; }
  .hero--split .hero-sub { font-size: 1.26rem; }
  .hero--split .hero-copy { max-width: 37rem; }
  .hero-stage .hero-shot-back { width: 90%; }
  .hero-stage .hero-shot-front { width: 90%; margin-top: -20%; }
}
@media (min-width: 1800px) {
  .hero--split > .wrap { max-width: 1560px; }
  .hero--split h1 { font-size: 60px; }
  .hero-stage .hero-shot-back { width: 92%; }
  .hero-stage .hero-shot-front { width: 92%; margin-top: -21%; }
}
@media (max-width: 940px) {
  .hero.hero--split { padding: 3.2rem 0 3.6rem; }
  .hero--split .hero-in { grid-template-columns: 1fr; gap: 2.2rem; }
  .hero--split .hero-copy,
  .hero--split .lp-hero-copy { max-width: 640px; margin: 0 auto; text-align: center; }
  .hero--split .hero-sub, .hero--split .lp-hero-sub { margin-left: auto; margin-right: auto; }
  .hero--split .hero-cta, .hero--split .hero-trust,
  .hero--split .lp-hero-cta, .hero--split .lp-hero-trust { justify-content: center; }
  .hero--split .lp-breadcrumb { text-align: center; }
  /* Stacked: the deck spans the column, capped so it never towers over the copy. */
  .hero-stage { width: 100%; max-width: 580px; margin: .4rem auto 0; }
}

/* ---- split section: heading left, content right -------------------------- */
.fam-split { display: grid; grid-template-columns: .82fr 1.18fr; gap: 3.2rem; align-items: start; }
/* The heading scrolls with the page. No sticky column: Greg 2026-10-05 does
   not want sections that slide while the page scrolls. */
.fam-split-copy .section-title { max-width: 16ch; }
.fam-split-copy .section-lead { margin-bottom: 0; }

/* ---- value cards and the ruled list ------------------------------------------ */
.lp-values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.15rem; align-items: stretch; margin-top: 2.2rem; }
.lp-values > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.lp-value {
  background: var(--pl-surface);
  border: 1px solid var(--pl-border); border-left: 4px solid var(--pl-primary);
  border-radius: var(--pl-radius);
  padding: 1.7rem 1.8rem;
  box-shadow: var(--pl-shadow);
}
.lp-value h3 { font-size: 1.16rem; letter-spacing: -.01em; margin-bottom: .5rem; text-wrap: wrap; }
.lp-value p { margin: 0 0 .7rem; color: var(--pl-text-soft); font-size: 1rem; line-height: 1.65; }
.lp-value p:last-child { margin-bottom: 0; }
.lp-values--ruled { display: block; margin-top: 0; }
.lp-values--ruled > .lp-value {
  display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr; gap: .4rem 2rem;
  background: none; border: 0; border-top: 1px solid var(--pl-border); border-radius: 0;
  box-shadow: none; padding: 1.25rem 0;
}
.lp-values--ruled > .lp-value:last-child { border-bottom: 1px solid var(--pl-border); }
.lp-values--ruled > .lp-value h3 { margin: 0; font-size: 1.12rem; }
.lp-values--ruled > .lp-value p { margin: 0; }

/* ---- sector chooser / hub cards ---------------------------------------------- */
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; align-items: stretch; margin-top: 2.4rem; }
.hub-grid--two { grid-template-columns: repeat(2, 1fr); max-width: 920px; margin-left: auto; margin-right: auto; }
.hub-card {
  display: block;
  background: var(--pl-surface);
  border: 1px solid var(--pl-border); border-left: 4px solid var(--pl-primary);
  border-radius: var(--pl-radius);
  padding: 1.6rem 1.7rem;
  text-decoration: none;
  box-shadow: var(--pl-shadow);
  transition: transform .18s var(--pl-ease), box-shadow .18s var(--pl-ease), border-color .18s;
}
.hub-card:hover { border-color: var(--pl-primary-line); border-left-color: var(--pl-primary); box-shadow: var(--pl-shadow-lift); }
.hub-card strong { display: block; color: var(--pl-text); font-family: var(--pl-display); font-weight: 700; font-size: 1.16rem; letter-spacing: -.01em; margin-bottom: .35rem; text-wrap: wrap; }
.hub-card span { color: var(--pl-text-soft); font-size: .97rem; line-height: 1.6; }
.hub-card .hub-arrow { color: var(--pl-primary); font-weight: 700; }

/* ---- icon cards ---------------------------------------------------------------- */
.icon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; margin-top: 2.2rem; }
.icon-card {
  background: var(--pl-surface);
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius);
  box-shadow: var(--pl-shadow);
  padding: 1.4rem 1.4rem 1.35rem;
}
.icon-card .ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--pl-primary-soft); color: var(--pl-primary-dark);
  border: 1px solid var(--pl-primary-line);
  margin-bottom: .75rem;
}
.icon-card h3 { font-size: 1.08rem; letter-spacing: -.01em; margin-bottom: .25rem; text-wrap: wrap; }
.icon-card p { margin: 0; font-size: .95rem; color: var(--pl-text-soft); line-height: 1.6; }
.icon-card .cite { display: block; margin-top: .55rem; font-size: .84rem; font-weight: 600; color: var(--pl-primary-dark); }

/* ---- callouts ------------------------------------------------------------------- */
.phi-banner {
  display: flex; gap: .9rem; align-items: flex-start;
  background: var(--pl-primary-soft);
  border: 1px solid var(--pl-primary-line);
  border-radius: var(--pl-radius);
  padding: 1.15rem 1.4rem;
  font-size: 1rem;
}
.phi-banner svg { flex: 0 0 auto; color: var(--pl-primary); margin-top: .15rem; }
.phi-banner strong { color: var(--pl-primary-dark); }
.phi-banner p { margin: 0; }
.trust-note {
  display: flex; gap: .85rem; align-items: flex-start; max-width: 780px; margin: 0 auto;
  background: var(--pl-surface); border: 1px solid var(--pl-border); border-radius: 12px; padding: 1rem 1.4rem;
}
.trust-note svg { flex: none; color: var(--pl-primary); margin-top: .12rem; }
.trust-note p { margin: 0; font-size: .94rem; line-height: 1.6; color: var(--pl-text-soft); }
.trust-note strong { color: var(--pl-text); }
.disclaimer { background: var(--pl-surface); border: 1px solid var(--pl-border); border-radius: var(--pl-radius); padding: 1rem 1.4rem; margin-top: 2.4rem; }
.disclaimer p { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--pl-text-soft); }

/* ---- prose and rule cards on the guides ----------------------------------------- */
.lp-prose { max-width: 66ch; }
.center .lp-prose { margin-left: auto; margin-right: auto; text-align: left; }
.lp-prose p { color: var(--pl-text-soft); font-size: 1.04rem; line-height: 1.7; margin: 0 0 1.05rem; }
.lp-prose p:last-child { margin-bottom: 0; }
.lp-prose strong { color: var(--pl-text); }
.rule-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 2rem 0; }
.rule-card { background: var(--pl-surface); border: 1px solid var(--pl-border); border-top: 3px solid var(--pl-primary); border-radius: var(--pl-radius); padding: 1.35rem 1.5rem; }
.rule-card .rule-big { display: block; font-family: var(--pl-display); font-weight: 700; font-size: 1.32rem; line-height: 1.2; color: var(--pl-primary); margin-bottom: .35rem; }
.rule-card p { margin: 0; font-size: .96rem; line-height: 1.6; color: var(--pl-text-soft); }
.rule-card .cite { display: block; margin-top: .6rem; font-size: .84rem; font-weight: 600; color: var(--pl-primary-dark); }
.rule-card--accent { border-top-color: var(--pl-primary-dark); }
.rule-card--accent .rule-big { color: var(--pl-primary-dark); }

/* Reference tables (federal floor, files by role) */
.ref-wrap { overflow-x: auto; border: 1px solid var(--pl-border); border-radius: var(--pl-radius); background: var(--pl-surface); box-shadow: var(--pl-shadow); }
table.ref { width: 100%; border-collapse: collapse; font-size: .96rem; }
table.ref caption { caption-side: bottom; text-align: left; padding: .8rem 1rem; font-size: .86rem; color: var(--pl-text-soft); border-top: 1px solid var(--pl-border); }
table.ref th, table.ref td { text-align: left; vertical-align: top; padding: .8rem 1rem; border-bottom: 1px solid var(--pl-border); line-height: 1.5; }
table.ref thead th { font-family: var(--pl-display); font-size: .95rem; color: var(--pl-text-soft); background: var(--pl-surface-muted); }
table.ref tbody tr:last-child th, table.ref tbody tr:last-child td { border-bottom: 0; }
table.ref tbody th { font-weight: 700; color: var(--pl-text); }
table.ref td { color: var(--pl-text-soft); }
table.ref .cite { white-space: nowrap; font-weight: 600; color: var(--pl-primary-dark); }
@media (max-width: 760px) {
  table.ref--stack thead { display: none; }
  table.ref--stack tr { display: block; padding: .8rem 1rem; border-bottom: 1px solid var(--pl-border); }
  table.ref--stack tbody tr:last-child { border-bottom: 0; }
  table.ref--stack th, table.ref--stack td { display: block; padding: .15rem 0; border: 0; }
  table.ref--stack td[data-label]::before { content: attr(data-label) ': '; font-weight: 700; color: var(--pl-text); }
  table.ref .cite { white-space: normal; }
}

/* State cards */
.st-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 auto 2rem; padding: 0; list-style: none; max-width: 860px; }
.st-jump a {
  display: inline-flex; align-items: center; min-height: 36px; padding: .3rem .95rem;
  border: 1px solid var(--pl-border); border-radius: var(--pl-radius-sm); background: var(--pl-surface);
  color: var(--pl-text); font-weight: 600; font-size: .93rem; text-decoration: none;
}
.st-jump a:hover { border-color: var(--pl-primary); color: var(--pl-primary-dark); }
.st-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; align-items: start; }
.st-card { background: var(--pl-surface); border: 1px solid var(--pl-border); border-top: 3px solid var(--pl-primary); border-radius: var(--pl-radius); padding: 1.35rem 1.5rem 1.2rem; box-shadow: var(--pl-shadow); scroll-margin-top: 104px; }
.st-card h3 { font-size: 1.3rem; margin-bottom: .6rem; }
.st-rows { margin: 0; }
.st-rows > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: .2rem 1rem; padding: .55rem 0; border-top: 1px solid var(--pl-border); }
.st-rows dt { font-weight: 700; color: var(--pl-text); font-size: .92rem; }
.st-rows dd { margin: 0; color: var(--pl-text-soft); font-size: .95rem; line-height: 1.55; }
.st-rows .st-none { font-style: italic; }
.st-src { margin-top: .6rem; border-top: 1px solid var(--pl-border); padding-top: .4rem; }
.st-src summary { cursor: pointer; font-size: .88rem; font-weight: 700; color: var(--pl-text-soft); padding: .3rem 0; }
.st-src ul { margin: .2rem 0 0; padding-left: 1.1rem; }
.st-src li { font-size: .86rem; line-height: 1.5; margin: .25rem 0; color: var(--pl-text-soft); overflow-wrap: anywhere; }

/* Numbered steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2rem; counter-reset: step; }
.step { background: var(--pl-surface); border: 1px solid var(--pl-border); border-radius: var(--pl-radius); padding: 1.4rem 1.5rem; box-shadow: var(--pl-shadow); }
.step::before {
  counter-increment: step; content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%; margin-bottom: .8rem;
  background: var(--pl-primary-soft); color: var(--pl-primary-dark); font-weight: 700;
}
.step h3 { font-size: 1.08rem; margin-bottom: .3rem; text-wrap: wrap; }
.step p { margin: 0; font-size: .96rem; color: var(--pl-text-soft); line-height: 1.6; }

/* A framed screenshot set into the body of a page (not the hero) */
.figure-band { max-width: 760px; margin: 2.4rem auto 0; }
.figure-cap { text-align: center; font-size: .9rem; color: var(--pl-text-soft); margin: 1rem auto 0; max-width: 60ch; }

/* ---- sibling cross-links ------------------------------------------------------- */
.lp-siblings-more { margin: 1.1rem 0 0; font-size: .95rem; font-weight: 600; }
.lp-siblings { margin-top: 1.4rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.lp-siblings-title { font-family: var(--pl-display); font-weight: 700; font-size: 1.2rem; margin: 0; }
.lp-sibling {
  display: block; background: var(--pl-surface);
  border: 1px solid var(--pl-border); border-radius: var(--pl-radius);
  padding: 1.1rem 1.25rem; text-decoration: none;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.lp-sibling:hover { border-color: var(--pl-primary); box-shadow: var(--pl-shadow-lift); }
.lp-sibling strong { display: block; color: var(--pl-text); font-family: var(--pl-display); font-weight: 700; font-size: 1.04rem; margin-bottom: .25rem; }
.lp-sibling span { color: var(--pl-text-soft); font-size: .9rem; line-height: 1.5; }

/* ---- pricing ------------------------------------------------------------------- */
.pricing-grid { display: grid; grid-template-columns: 1fr; gap: 1.15rem; align-items: stretch; max-width: 560px; margin: 2.4rem auto 0; }
.plan-card {
  position: relative; container-type: inline-size;
  display: flex; flex-direction: column;
  background: var(--pl-surface);
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius);
  padding: 24px;
  box-shadow: var(--pl-shadow);
}
.plan-card--featured { border: 1.5px solid var(--pl-primary-line); }
.plan-badge {
  position: absolute; top: -12px; right: 22px;
  background: linear-gradient(180deg, var(--pl-btn-top) 0%, var(--pl-btn-bottom) 100%);
  color: var(--pl-on-primary);
  font-size: .78rem; font-weight: 700; line-height: 1;
  border-radius: var(--pl-radius-sm); padding: .32rem .75rem;
}
/* Card order (Greg 2026-10-05, as VL): price row "$X/mo or $Y/yr", one compact
   save note, then exactly two short lines (launch terms, standard price).
   ⛔ NEVER strike through the standard price. */
.plan-was { margin: 0 0 .1rem; font-size: .95rem; color: var(--pl-text-soft); line-height: 1.45; }
.plan-std { margin: 0 0 .9rem; font-size: .95rem; font-weight: 600; color: var(--pl-text); line-height: 1.45; }
.plan-name { font-family: var(--pl-display); font-size: .98rem; font-weight: 700; color: var(--pl-text-soft); }
.plan-band { font-size: clamp(1.3rem, 8cqi, 1.6rem); letter-spacing: -.012em; line-height: 1.15; margin: .3rem 0 .2rem; }
.plan-band-note { margin: 0 0 .85rem; font-size: .95rem; color: var(--pl-text-soft); }
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .3rem; font-family: var(--pl-display); margin: .55rem 0 .1rem; }
.plan-amount { font-size: clamp(2.1rem, 13.2cqi, 2.9rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; color: var(--pl-primary); }
.plan-per { font-size: 1rem; font-weight: 700; color: var(--pl-text-soft); }
.plan-or { margin-left: .2rem; font-size: clamp(1rem, 5.6cqi, 1.2rem); font-weight: 700; color: var(--pl-text); white-space: nowrap; }
.plan-save {
  align-self: flex-start; margin: .55rem 0 .55rem; padding: .22rem .7rem;
  border-radius: var(--pl-radius-sm); background: var(--pl-primary-soft); color: var(--pl-primary-dark);
  font-size: .9rem; font-weight: 700; line-height: 1.4;
}
.plan-points { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.plan-points li { display: flex; gap: .6rem; align-items: flex-start; padding: .3rem 0; font-size: .97rem; }
.plan-points svg { flex: 0 0 auto; margin-top: .24rem; color: var(--pl-primary); }
.plan-cta { margin-top: auto; width: 100%; }
.plan-cta .btn { width: 100%; }
.pricing-foot { text-align: center; font-size: .92rem; color: var(--pl-text-soft); max-width: 64ch; margin: 1.7rem auto 0; }
.pricing-foot--nosignup { display: none; }
.no-signup .pricing-foot--nosignup { display: block; }

/* ---- trial bands ------------------------------------------------------------------ */
.trial-band {
  position: relative; overflow: hidden;
  background: var(--pl-surface);
  border: 1px solid var(--pl-border); border-top: 4px solid var(--pl-primary);
  border-radius: var(--pl-radius);
  color: var(--pl-text);
  padding: 3.4rem 3.2rem;
  box-shadow: var(--pl-shadow);
  text-align: center;
}
.trial-band h2 { font-size: clamp(1.75rem, 3.4vw, 2.35rem); letter-spacing: -.015em; line-height: 1.16; max-width: 22ch; margin: 0 auto 1rem; }
.trial-band .trial-lead { font-size: 1.12rem; line-height: 1.6; color: var(--pl-text-soft); max-width: 56ch; margin: 0 auto 1.6rem; }
.trial-cta { display: flex; flex-direction: column; align-items: center; gap: .85rem; }
.trial-cta .quiet { font-size: .92rem; color: var(--pl-text-soft); }
.trial-cta .quiet a { color: var(--pl-primary-dark); }
.trial-band--split { display: grid; grid-template-columns: 1.25fr 1fr; gap: 2.4rem; align-items: center; text-align: left; padding: 2.6rem 2.8rem; }
.trial-band--split h2, .trial-band--split .trial-lead { margin-left: 0; margin-right: 0; }
.trial-band--split .trial-lead { margin-bottom: 0; }
.trial-band--split .trial-cta { align-items: stretch; }
.trial-band--split .trial-cta .btn { width: 100%; }
.trial-band--split .trial-cta .quiet { text-align: center; }

/* ---- signup and contact cards -------------------------------------------------------- */
.signup-card {
  max-width: 540px; margin: 0 auto;
  background: var(--pl-surface);
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius);
  box-shadow: var(--pl-shadow-lift);
  padding: 2.1rem 2.1rem 1.9rem;
  position: relative; overflow: clip;
}
.signup-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--pl-primary); }
.signup-card label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }
.signup-card label .opt { font-weight: 500; color: var(--pl-text-soft); }
.signup-card .field { margin-bottom: .95rem; }
.signup-card input[type="text"], .signup-card input[type="email"], .signup-card select, .signup-card textarea {
  width: 100%; font: inherit; color: var(--pl-text);
  background: var(--pl-field-bg);
  border: 1.5px solid var(--pl-border);
  border-radius: var(--pl-radius-sm);
  padding: .6rem .75rem; min-height: 2.75rem;
  transition: border-color .12s, box-shadow .12s;
}
.signup-card textarea { min-height: 8.5rem; resize: vertical; }
.signup-card select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 2.4rem; cursor: pointer;
  background-image: var(--pl-select-chev);
  background-repeat: no-repeat;
  background-position: right .85rem center;
}
.signup-card input:focus, .signup-card select:focus, .signup-card textarea:focus {
  outline: 3px solid var(--pl-primary-ring); outline-offset: 1px;
  border-color: var(--pl-primary);
}
.signup-card .input-invalid { border-color: var(--pl-danger); }
.signup-card .hint { font-size: .82rem; color: var(--pl-text-soft); margin-top: .3rem; }
.signup-card .btn { width: 100%; margin-top: .35rem; }
.signup-assure { text-align: center; font-size: .88rem; font-weight: 600; color: var(--pl-text-soft); margin: .85rem 0 0; }
.signup-renew { text-align: center; font-size: .82rem; color: var(--pl-text-soft); margin: .4rem 0 0; }
.consent-field { margin-top: .35rem; }
.consent-row { display: flex; align-items: flex-start; gap: .6rem; font-weight: 500; font-size: .9rem; line-height: 1.45; cursor: pointer; margin-bottom: 0; }
.consent-row input[type="checkbox"] { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .12rem; accent-color: var(--pl-primary); cursor: pointer; }
.consent-row span { color: var(--pl-text); }
.consent-row a { color: var(--pl-primary); font-weight: 600; }
.consent-row.consent-invalid span { color: var(--pl-danger); }
.consent-row.consent-invalid input[type="checkbox"] { outline: 2px solid var(--pl-danger); outline-offset: 2px; }
.signup-foot { text-align: center; font-size: .88rem; color: var(--pl-text-soft); margin: 1rem 0 0; }
.form-error {
  background: var(--pl-danger-soft); color: var(--pl-danger);
  border-radius: var(--pl-radius-sm);
  padding: .55rem .8rem; margin-bottom: .9rem;
  font-weight: 600; display: none;
}
.form-error.show { display: block; }
.form-error a { color: inherit; }
.signup-success { text-align: center; padding: 1.4rem 0 .9rem; }
.signup-success .ok-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: var(--pl-radius);
  background: var(--pl-primary-soft); color: var(--pl-primary);
  margin-bottom: .9rem;
}
.signup-success h3 { font-size: 1.25rem; }
.signup-success p { color: var(--pl-text-soft); max-width: 40ch; margin: .4rem auto 0; }

/* Contact form status and the sent / failed card (as VL's contact page) */
.contact-result { margin: .9rem 0 0; min-height: 1.4em; font-weight: 600; color: var(--pl-text-soft); text-align: center; }
.contact-result.form-error { text-align: left; margin-bottom: 0; }
.form-outcome {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .45rem; padding: 1.25rem .5rem; text-align: center;
}
.form-outcome p { margin: 0; }
.form-outcome-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: .4rem; border-radius: var(--pl-radius);
  color: var(--pl-primary); background: var(--pl-primary-soft);
}
.form-outcome-error .form-outcome-icon { color: var(--pl-danger); background: var(--pl-danger-soft); }
.form-outcome-icon svg { width: 28px; height: 28px; }
.form-outcome .form-outcome-title { margin: 0; font-size: 1.4rem; line-height: 1.2; color: var(--pl-text); text-wrap: balance; }
.form-outcome .form-outcome-title:focus { outline: none; }
.form-outcome .form-outcome-text { max-width: 40ch; color: var(--pl-text-soft); font-size: 1.05rem; line-height: 1.55; text-wrap: balance; }
.form-outcome .form-outcome-text strong { color: var(--pl-text); font-weight: 700; overflow-wrap: anywhere; }
.form-outcome .form-outcome-note { max-width: 42ch; color: var(--pl-text-soft); font-size: .95rem; line-height: 1.5; text-wrap: balance; }
.form-outcome .form-outcome-note a { color: var(--pl-primary-dark); font-weight: 600; overflow-wrap: anywhere; }
.form-outcome-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.1rem; margin-top: .9rem; }
.signup-card .form-outcome .btn { width: auto; margin-top: 0; }
.form-outcome-link { padding: .4rem .2rem; background: none; border: 0; font: inherit; font-weight: 600; color: var(--pl-text-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.form-outcome-link:hover { color: var(--pl-primary-dark); }
.btn[aria-busy="true"] { cursor: progress; opacity: .85; transform: none; }
.form-busy-spin { flex: none; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: form-busy-spin .7s linear infinite; }
@keyframes form-busy-spin { to { transform: rotate(360deg); } }
.contact-alt { text-align: center; font-size: .95rem; color: var(--pl-text-soft); max-width: 60ch; margin: 1.4rem auto 0; }
.contact-alt + .contact-alt { margin-top: .5rem; }
.contact-alt a { color: var(--pl-primary-dark); font-weight: 600; }

/* ---- FAQ ------------------------------------------------------------------------------- */
.faq-list { max-width: 780px; margin: 2rem auto 0; }
.faq-list details {
  background: var(--pl-surface);
  border: 1px solid var(--pl-border);
  border-radius: 12px;
  margin-bottom: .7rem;
  overflow: hidden;
  box-shadow: var(--pl-shadow);
  transition: border-color .18s;
}
.faq-list details[open] { border-color: var(--pl-primary-line); }
.faq-list summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--pl-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -.005em;
  padding: 1rem 1.25rem; color: var(--pl-text);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .faq-chev { flex: 0 0 auto; color: var(--pl-text-soft); transition: transform .18s var(--pl-ease); }
.faq-list details[open] summary .faq-chev { transform: rotate(180deg); }
.faq-list details[open] summary { color: var(--pl-primary-dark); }
.faq-a { padding: 0 1.25rem 1.1rem; color: var(--pl-text-soft); font-size: .97rem; }
.faq-a p { margin: 0 0 .6rem; }
.faq-a p:last-child { margin-bottom: 0; }

/* ---- footer ------------------------------------------------------------------------------ */
.site-foot { border-top: 1px solid var(--pl-border); background: var(--pl-surface); padding: 3.6rem 0 2.4rem; }
.foot-grid { display: flex; gap: 2rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.foot-brand .wordmark { font-size: 1.45rem; }
.foot-brand p { margin: .5rem 0 0; color: var(--pl-text-soft); font-size: .95rem; max-width: 52ch; text-wrap: pretty; }
.foot-trust { font-size: .88rem; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(8.5rem, auto)); gap: 1.4rem 3rem; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.foot-head { margin: 0 0 .75rem; font-family: var(--pl-display); font-size: .95rem; font-weight: 700; color: var(--pl-text-soft); }
.foot-col a { color: var(--pl-text); text-decoration: none; font-weight: 600; font-size: .93rem; transition: color .14s var(--pl-ease); }
.foot-col a:hover { color: var(--pl-primary-dark); text-decoration: underline; text-underline-offset: 3px; }
.foot-bottom {
  margin-top: 2.2rem; padding-top: 1.4rem;
  border-top: 1px solid var(--pl-border);
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  font-size: .85rem; color: var(--pl-text-soft);
}
.ma-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 7px 11px; border-radius: 999px;
  background: var(--pl-bg); border: 1px solid var(--pl-border);
  color: var(--pl-text-soft); font-size: 13px; font-weight: 600; text-decoration: none;
  box-shadow: 0 2px 8px rgba(var(--pl-shadow-rgb), .05);
  transition: color .12s, border-color .12s;
}
.ma-badge:hover { color: var(--pl-primary-dark); border-color: var(--pl-border-strong); }
.ma-badge .ma-dot { display: inline-flex; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 4px; }

/* ---- signup-disabled mode (GET /api/auth/signup says enabled:false, or fails) ---- */
.no-signup [data-trial] { display: none !important; }
/* The closed-signup counterpart: hidden until .no-signup, then shown in the
   same place the trial band would be. Toggle only block-level wrappers. */
[data-closed] { display: none !important; }
.no-signup [data-closed] { display: block !important; }

/* ---- prose pages (/security) ------------------------------------------------------- */
.legal-main { padding: 3.4rem 0 5rem; }
.legal-prose { max-width: 740px; margin: 0 auto; }
.legal-title { font-size: clamp(34px, 4vw, 48px); letter-spacing: -.02em; line-height: 1.06; margin-bottom: .55rem; }
.legal-updated { font-size: .9rem; font-weight: 600; color: var(--pl-text-soft); margin: 0 0 1.7rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--pl-border); }
.legal-prose h2 { font-size: 1.4rem; margin: 2.5rem 0 .6rem; scroll-margin-top: 92px; }
.legal-prose p, .legal-prose li { font-size: 1rem; line-height: 1.7; }
.legal-prose p { margin: 0 0 1rem; }
.legal-prose ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.legal-prose li { margin: .35rem 0; }
.legal-prose li::marker { color: var(--pl-primary); }
.legal-prose a { font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal-callout { margin: 1.8rem 0; }
.legal-crosslink { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--pl-border); font-weight: 600; color: var(--pl-text-soft); }

/* ---- 404 ------------------------------------------------------------------------------------ */
.notfound-wrap { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4rem 1.5rem; }
.notfound-code { font-family: var(--pl-wordmark); font-weight: 800; font-size: clamp(4rem, 12vw, 8rem); line-height: 1; letter-spacing: -.04em; color: var(--pl-primary); margin: 0 0 .5rem; opacity: .9; }
.notfound-title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 .8rem; }
.notfound-body { color: var(--pl-text-soft); max-width: 46ch; margin: 0 0 2rem; font-size: 1.05rem; }

/* ---- /landing-pages internal tracker --------------------------------------------- */
.tracker-main { padding: 3.4rem 0 5rem; }
.tracker-head h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: .5rem; }
.tracker-head p { color: var(--pl-text-soft); max-width: 72ch; line-height: 1.6; margin: 0; }
.tracker-meta { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 1.4rem 0 2rem; font-size: .92rem; color: var(--pl-text-soft); }
.tracker-meta b { color: var(--pl-text); font-weight: 600; }
table.tracker { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--pl-surface); border: 1px solid var(--pl-border); }
table.tracker th, table.tracker td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--pl-border); vertical-align: top; }
table.tracker th { font-family: var(--pl-display); color: var(--pl-text-soft); background: var(--pl-surface-muted); }
.tk-name { font-weight: 700; color: var(--pl-text); }
.tk-target { color: var(--pl-text-soft); }
.tk-url a { color: var(--pl-primary-dark); font-weight: 600; text-decoration: none; }
@media (max-width: 640px) { table.tracker { display: block; overflow-x: auto; white-space: nowrap; } }

/* ---- responsive -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .fam-split { grid-template-columns: 1fr; gap: 1.6rem; }
  .fam-split-copy { position: static; }
  .fam-split-copy .section-title { max-width: 26ch; }
  .trial-band--split { grid-template-columns: 1fr; text-align: left; }
}
@media (max-width: 980px) {
  .icon-grid, .rule-cards, .steps { grid-template-columns: repeat(2, 1fr); }
  .trial-band { padding: 2.6rem 2rem; }
}
@media (min-width: 881px) and (max-width: 980px) {
  .hub-grid:not(.hub-grid--two) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .lp-values, .hub-grid, .hub-grid--two, .lp-siblings, .st-grid { grid-template-columns: 1fr; }
}
/* ⭐ ONE HEADER BREAKPOINT (as VL and CR): from 1181 to 1320 only the padding
   tightens, never the text; at 1180 and below the mobile menu takes over.
   Keep 1180 in step with js/nav.js. */
@media (min-width: 1181px) and (max-width: 1320px) {
  .site-head-in { gap: 1rem; padding-left: 24px; padding-right: 24px; }
  .site-nav { gap: .1rem; margin-left: .3rem; }
  .site-nav > a, .nav-dd-trigger { padding: .48rem .62rem; }
  .head-cta { gap: .6rem; }
  .head-cta .btn { padding: .5rem .95rem; }
}
@media (max-width: 1180px) {
  .head-cta { gap: .6rem; }
  .head-cta .btn { padding: .5rem .95rem; font-size: .92rem; }
  .nav-toggle {
    order: 3;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    width: 44px; height: 44px; margin-right: -6px;
    padding: 0; border: 0; border-radius: 12px;
    background: none; color: var(--pl-text);
    cursor: pointer;
    transition: color .14s, background-color .14s;
  }
  .nav-toggle:hover, .site-head.nav-open .nav-toggle { color: var(--pl-primary-dark); background: var(--pl-primary-soft); }
  .nav-toggle:focus-visible { outline: 3px solid var(--pl-primary-ring); outline-offset: 2px; }
  .nav-toggle-bars { position: relative; display: block; width: 20px; height: 14px; }
  .nav-toggle-bars span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .22s ease, opacity .16s ease; }
  .nav-toggle-bars span:nth-child(1) { top: 0; }
  .nav-toggle-bars span:nth-child(2) { top: 6px; }
  .nav-toggle-bars span:nth-child(3) { top: 12px; }
  .site-head.nav-open .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .site-head.nav-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
  .site-head.nav-open .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    margin: 0; padding: .3rem 0 1rem;
    background: var(--pl-surface);
    border-top: 1px solid var(--pl-border);
    border-bottom: 1px solid var(--pl-border);
    box-shadow: var(--pl-shadow-lift);
    max-height: calc(100vh - var(--pl-head-h, 74px));
    max-height: calc(100dvh - var(--pl-head-h, 74px));
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .site-head.nav-open .site-nav { visibility: visible; opacity: 1; transform: none; transition: opacity .2s ease, transform .2s ease, visibility 0s; }
  .site-nav > a {
    display: flex; align-items: center;
    min-height: 48px; padding: 0 28px;
    border-radius: 0; border-bottom: 1px solid var(--pl-border);
    font-size: 1.02rem; color: var(--pl-text);
  }
  .site-nav > a:hover { box-shadow: none; }
}
@media (max-width: 1180px) and (prefers-reduced-motion: reduce) {
  .site-nav, .site-head.nav-open .site-nav, .nav-toggle-bars span { transition: none; }
  .site-nav { transform: none; }
}
@media (max-width: 720px) {
  .site-head { --dd-row-px: 18px; --dd-sub-pl: 34px; }
  .site-head-in { padding: .6rem 18px; gap: .6rem; min-height: 0; }
  .brand img { width: auto; height: 36px; border-radius: 0; }
  .brand { gap: .5rem; }
  .brand .wordmark { font-size: 1.16rem; }
  .head-cta .btn { min-height: 2.5rem; padding: .5rem 1rem; font-size: .92rem; }
  .head-cta .btn-ghost { display: inline-flex; }
  .head-cta .btn-primary { display: none; }
  .site-nav > a { padding: 0 18px; }
  .site-nav .nav-cta { display: block; }
  .site-nav .nav-cta .btn { display: flex; margin: 1rem 18px 0; min-height: 48px; }
  .wrap { padding: 0 18px; }
  .section { padding: 3.4rem 0; }
  .hero { padding-top: 3.2rem; }
  .hero.hero--split { padding-top: 2.8rem; }
  .lp-hero.hero--split { padding: 3rem 0 2.9rem; }
  /* Measured on VL (2026-09-17): 8vw keeps phone H1s free of mid-text one-word lines. */
  .hero--split h1, .lp-hero.hero--split h1 { font-size: clamp(29px, 8vw, 42px); }
  .shot-frame { border-radius: 10px; }
  .shot-frame .shot-bar .shot-url { display: none; }
  .icon-grid, .rule-cards, .steps { grid-template-columns: 1fr; }
  .lp-values--ruled > .lp-value { grid-template-columns: 1fr; gap: .35rem; padding: 1.1rem 0; }
  .trial-band { border-radius: var(--pl-radius); padding: 2.2rem 1.4rem; }
  .trial-band--split { padding: 2rem 1.4rem; }
  .signup-card { padding: 1.6rem 1.3rem 1.4rem; }
  .foot-grid { flex-direction: column; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 1.6rem 2rem; }
  .foot-col ul { gap: 0; }
  .foot-col a { display: inline-flex; align-items: center; min-height: 32px; }
  .st-rows > div { grid-template-columns: 1fr; }
  .section-title { text-wrap: wrap; }
}
@media (max-width: 600px) {
  .hero-stage .hero-shot-back { width: 100%; }
  .hero-stage .hero-shot-front { width: 100%; margin-top: 1rem; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-card, .btn, .faq-list details, .faq-list summary .faq-chev, .shot-frame, .lp-sibling, .cr-lightbox { transition: none !important; }
  .hub-card:hover, .lp-sibling:hover { transform: none; }
  .form-busy-spin { display: none; }
}

/* ============================================================================
   SECTOR STRUCTURE AND BRAND LAYER (2026-10-05). Shared section components
   for the general homepage (/), a sector page (/hospice today, /home-health
   next) and the landing pages under each sector folder. Nothing here is named
   for a sector: a second sector page reuses every class as it is.
   ============================================================================ */

.hero h1 .hl, .lp-hero h1 .hl { color: var(--pl-primary); }

/* ⛔ SECTION COMPONENTS RESTORED 2026-10-06. The screenshot pass (c5270741)
   deleted these as "unused vignette CSS" and "Choose your setup", "What you
   get" and the /hospice EMR comparison went out as raw links and stacked
   text (Greg: "looks bad"). They are live markup: grep web/ before deleting
   any rule here, and screenshot every section after any CSS removal. */

/* Sector chooser (#who): one card per sector plus the general path. The grid
   takes two or three cards without a class change: with two it centres at
   960px, with three it fills the row. Adding /home-health = one more card.
   A tinted card on the white band, an icon tile, a kicker, the label, one
   line, and a "go" line pinned to the foot so both cards end level. Hover
   changes colour and border only (no lift, Greg 2026-10-05). */
.sector-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1.25rem; align-items: stretch; margin: 2.4rem auto 0;
}
.sector-grid:not(:has(> :nth-child(3))) { max-width: 960px; }
.sector-card {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--pl-tint);
  border: 1px solid var(--pl-primary-line); border-left: 4px solid var(--pl-primary);
  border-radius: var(--pl-radius);
  padding: 1.7rem 1.8rem 1.6rem; text-decoration: none; color: inherit;
  box-shadow: var(--pl-shadow);
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.sector-card:hover { background: var(--pl-primary-soft); border-color: var(--pl-primary-ring); border-left-color: var(--pl-primary); box-shadow: var(--pl-shadow-lift); }
.sector-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--pl-radius); margin-bottom: .45rem;
  background: var(--pl-surface); color: var(--pl-primary); border: 1px solid var(--pl-primary-line);
}
.sector-kicker { font-size: .86rem; font-weight: 700; color: var(--pl-primary-dark); }
.sector-label { font-family: var(--pl-display); font-weight: 700; font-size: 1.32rem; line-height: 1.22; letter-spacing: -.01em; color: var(--pl-ink); text-wrap: balance; }
.sector-card p { margin: .15rem 0 0; color: var(--pl-text-soft); font-size: .98rem; line-height: 1.6; }
.sector-go {
  margin-top: auto; padding-top: .9rem;
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; color: var(--pl-primary);
}
.sector-card:hover .sector-go { color: var(--pl-primary-dark); }

/* ---- "What you get": working pieces (homepage #features, Greg 2026-10-06,
   concept C, the family pattern from volunteercenter/web/css/landing.css) ----
   An uneven mosaic of six tiles, each with a small true-to-life piece of the
   product drawn in HTML. The sample rows use FIXED grid columns so they line
   up whatever the text length. No motion beyond the hover border. The six
   ids are the header's Features menu targets. Status pills use the semantic
   --st-* colors only. */
.wyg-c-head { margin-bottom: 2.2rem; }
.wyg-c-head .section-title { margin-bottom: 0; }
.wyg-c-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.1rem;
  grid-template-areas:
    "files files files files files files reqs reqs reqs reqs reqs reqs"
    "training training training training training training training screen screen screen screen screen"
    "remind remind remind remind remind remind remind binder binder binder binder binder";
}
.wyg-c-files { grid-area: files; } .wyg-c-reqs { grid-area: reqs; }
.wyg-c-training { grid-area: training; } .wyg-c-screen { grid-area: screen; }
.wyg-c-remind { grid-area: remind; } .wyg-c-binder { grid-area: binder; }
.wyg-c-tile {
  display: flex; flex-direction: column;
  background: var(--pl-surface); border: 1px solid var(--pl-border); border-radius: 18px;
  padding: 1.45rem 1.5rem 1.5rem; box-shadow: var(--pl-shadow);
  scroll-margin-top: 104px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.wyg-c-tile:hover { border-color: var(--pl-primary-ring); box-shadow: 0 2px 4px rgba(46, 32, 40, .05), 0 16px 34px -18px rgba(83, 32, 61, .28); }
.wyg-c-tile h3 { margin: 0 0 .4rem; font-size: 1.16rem; }
.wyg-c-tile > p { margin: 0 0 1.15rem; color: var(--pl-text-soft); font-size: .97rem; line-height: 1.6; }
.wyg-c-piece {
  margin-top: auto;
  background: var(--pl-bg); border: 1px solid var(--pl-border); border-radius: 12px;
  padding: .7rem .85rem; font-size: .86rem; line-height: 1.35;
}
.wyg-c-piece i { font-style: normal; }
/* staff files and requirements: FIXED columns (name | detail | value), so
   every row lines up whatever the text length (Greg 2026-10-06). */
.wc-entry, .wc-req { display: grid; gap: .6rem; align-items: center; padding: .42rem 0; border-bottom: 1px solid var(--pl-border); }
.wc-entry { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 6.6rem; }
.wc-req { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 8.6rem; }
.wc-entry > *, .wc-req > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-entry:last-child, .wc-req:last-child { border-bottom: 0; }
.wc-entry b, .wc-req b { font-weight: 700; color: var(--pl-text); }
.wc-entry span, .wc-req span { color: var(--pl-text-soft); }
.wc-entry em { font-style: normal; font-weight: 700; color: var(--pl-primary-dark); white-space: nowrap; text-align: right; }
/* requirements: status pills */
.wc-pill { justify-self: end; white-space: nowrap; font-size: .78rem; font-weight: 700; padding: .16rem .55rem; border-radius: 999px; }
.wc-pill--bad { background: var(--st-over-bg); color: var(--st-over); }
.wc-pill--soon { background: var(--st-due-bg); color: var(--st-due); }
.wc-pill--ok { background: var(--st-ok-bg); color: var(--st-ok); }
/* training hours: bars toward a target */
.wc-bars-head { display: flex; justify-content: space-between; gap: .8rem; margin-bottom: .45rem; }
.wc-bars-head b { font-family: var(--pl-display); font-size: .95rem; }
.wc-bars-head span { color: var(--pl-text-soft); }
.wc-bar { display: grid; grid-template-columns: 10.5rem 1fr 4.2rem; gap: .7rem; align-items: center; padding: .26rem 0; }
.wc-bar span { color: var(--pl-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-bar i { display: block; height: 9px; border-radius: 99px; background: linear-gradient(90deg, var(--pl-accent), var(--pl-primary)); width: var(--w); }
.wc-bar em { font-style: normal; text-align: right; color: var(--pl-text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* reminders and digest: section counts (label | fixed count column) */
.wc-count { display: grid; grid-template-columns: minmax(0, 1fr) 3rem; gap: .6rem; align-items: center; padding: .3rem 0; border-bottom: 1px solid var(--pl-border); }
.wc-count:last-child { border-bottom: 0; }
.wc-count span { color: var(--pl-text); }
.wc-count em { justify-self: end; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 1.9rem; text-align: center; padding: .08rem .45rem; border-radius: 999px; }
.wc-count--bad { background: var(--st-over-bg); color: var(--st-over); }
.wc-count--soon { background: var(--st-due-bg); color: var(--st-due); }
/* screening and binder: a summary card */
.wc-import { display: grid; gap: .15rem; }
.wc-import b { font-family: var(--pl-display); font-size: .98rem; }
.wc-import span { color: var(--pl-text-soft); }
.wc-import .wc-import-zero { color: var(--pl-primary-dark); font-weight: 700; }
@media (max-width: 1000px) {
  /* One column below the desktop mosaic: two narrow tiles side by side cut the
     sample names short. */
  .wyg-c-grid { grid-template-columns: 1fr; grid-template-areas: "files" "reqs" "training" "screen" "remind" "binder"; }
}
@media (max-width: 720px) {
  .wyg-c-grid { gap: .9rem; }
  .wyg-c-tile { padding: 1.2rem 1.15rem 1.2rem; }
  .wc-entry { grid-template-columns: minmax(0, 1fr) 6.6rem; }
  .wc-req { grid-template-columns: minmax(0, 1fr) 8.2rem; }
  /* On a phone the name and detail stack in the first column and wrap rather
     than cut off; the value column stays fixed so the rows still line up. */
  .wc-entry > *, .wc-req > * { white-space: normal; overflow: visible; }
  .wc-pill, .wc-entry em { white-space: nowrap; }
  .wc-entry span, .wc-req span { grid-column: 1; grid-row: 2; font-size: .8rem; margin-top: -.3rem; }
  .wc-bar { grid-template-columns: minmax(0, 1fr) 30% 3.8rem; gap: .5rem; }
  .wc-bar span { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .wyg-c-tile { transition: none; } }

/* Your system vs ours (the EMR comparison on sector pages) */
.emr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: stretch; margin: 2rem 0 1.4rem; }
.emr-card { background: var(--pl-surface); border: 1px solid var(--pl-border); border-radius: var(--pl-radius); box-shadow: var(--pl-shadow); padding: 1.9rem 2rem 1.8rem; }
.emr-card h3 { font-size: 1.3rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .9rem; }
.emr-tag { font-family: var(--pl-font); font-size: .8rem; font-weight: 700; letter-spacing: 0; border-radius: 99px; padding: .14rem .65rem; }
.emr-card--them .emr-tag { background: var(--pl-surface-muted); color: var(--pl-text-soft); }
.emr-card--us { border-color: var(--pl-primary-line); position: relative; overflow: clip; }
.emr-card--us::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--pl-primary); }
.emr-card--us .emr-tag { background: var(--pl-primary-soft); color: var(--pl-primary-dark); }

.tick-list { list-style: none; margin: 0; padding: 0; }
.tick-list li { display: flex; gap: .7rem; align-items: flex-start; padding: .45rem 0; font-size: 1.05rem; font-weight: 600; }
.tick-list svg { flex: none; margin-top: .2rem; color: var(--pl-primary); }
.emr-card--them .tick-list svg { color: #A99BA2; }
.emr-card--them .tick-list li { font-weight: 400; color: var(--pl-text-soft); }

/* Feature tour rows: copy beside a framed screenshot */
.feat-row { display: grid; grid-template-columns: 5fr 7fr; gap: 3rem; align-items: center; padding: 2.6rem 0; }
.feat-row + .feat-row { border-top: 1px solid var(--pl-border); }
.feat-row.rev .feat-copy { order: 2; }
.feat-row.rev .feat-shot { order: 1; }
.feat-copy h3 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); }
.feat-lead { color: var(--pl-text-soft); font-size: 1.04rem; line-height: 1.65; margin: 0 0 .9rem; }
.feat-points { list-style: none; margin: 0; padding: 0; }
.feat-points li { display: flex; gap: .6rem; align-items: flex-start; padding: .36rem 0; font-size: 1rem; }
.feat-points svg { flex: none; margin-top: .24rem; color: var(--pl-primary); }
.feat-points b { font-weight: 700; }
.feat-shot .shot-frame { margin: 0; }

/* A mid-page call to action at the highest-intent moment */
.mid-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.4rem;
  background: var(--pl-primary-soft); border: 1px solid var(--pl-primary-line); border-radius: var(--pl-radius); padding: 1.4rem 1.7rem;
}
.mid-cta p { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--pl-ink); max-width: 46ch; line-height: 1.4; }
.mid-cta .btn { flex: none; }

/* A blush section ground, for the one section on a page that carries weight */
.section--blush {
  background: linear-gradient(180deg, var(--pl-primary-soft) 0%, var(--pl-bg) 62%);
  border-top: 1px solid var(--pl-border); border-bottom: 1px solid var(--pl-border);
}
.icon-grid--uniform { grid-auto-rows: 1fr; }
.icon-grid--uniform .icon-card { display: flex; flex-direction: column; border-top: 3px solid var(--pl-primary); }
.icon-grid--uniform .icon-card .cite { margin-top: auto; padding-top: .75rem; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 940px; margin: 2rem auto 0; }
.stat { background: var(--pl-surface); border: 1px solid var(--pl-primary-line); border-radius: var(--pl-radius); padding: 1.15rem 1.3rem; text-align: center; }
.stat b { display: block; font-family: var(--pl-display); font-size: 2.3rem; line-height: 1.05; color: var(--pl-primary); }
.stat span { display: block; margin-top: .35rem; font-size: .95rem; line-height: 1.45; color: var(--pl-text-soft); }
.stat-src { text-align: center; font-size: .86rem; color: var(--pl-text-soft); margin: .9rem auto 0; max-width: 72ch; }

/* Pricing, premium: a little wider, the plan line leads, the price follows */
.pricing-grid { max-width: 640px; }
.plan-card--featured {
  border: 1px solid var(--pl-primary-line); border-top: 4px solid var(--pl-primary);
  background: linear-gradient(180deg, var(--pl-tint) 0%, #FFFFFF 42%);
  padding: 32px 34px 30px; box-shadow: var(--pl-shadow-lift);
}
.plan-card--featured .plan-band { font-size: clamp(1.75rem, 7.6cqi, 2.25rem); line-height: 1.12; margin: .4rem 0 .3rem; color: var(--pl-ink); }
.plan-card--featured .plan-band-note { font-size: 1rem; }
.plan-card--featured .plan-amount { font-size: clamp(1.8rem, 8.4cqi, 2.3rem); }
.plan-card--featured .plan-points { display: grid; grid-template-columns: 1fr; column-gap: 1.4rem; }
@container (min-width: 520px) { .plan-card--featured .plan-points { grid-template-columns: 1fr 1fr; } }
.plan-trial { margin: 0 0 .6rem; font-size: .88rem; font-weight: 600; color: var(--pl-text-soft); text-align: center; }

/* Hub groups (the quiet Solutions hub lists guides grouped by topic and by
   sector; a new sector adds one group) */
.hub-group + .hub-group { margin-top: 3.2rem; }
.hub-group-title { font-size: clamp(1.35rem, 2.4vw, 1.6rem); margin: 0 0 .35rem; }
.hub-group-lead { margin: 0; color: var(--pl-text-soft); max-width: 70ch; }
.hub-group .hub-grid { margin-top: 1.3rem; }

.signup-trustnote { text-align: center; font-size: .92rem; color: var(--pl-text-soft); max-width: 72ch; margin: 1.4rem auto 0; }

/* The one deep plum section: the closing call to action on / and the sector
   pages (Greg 2026-10-05: try it as ONE compact band; light everywhere else). */
.trial-band--plum {
  background: linear-gradient(120deg, #53203D 0%, #66294B 55%, #7A3158 100%);
  border: 0; color: #FFFFFF;
  box-shadow: 0 22px 44px -26px rgba(83, 32, 61, .6);
  padding: 2.3rem 2.6rem;
}
.trial-band--plum h2 { color: #FFFFFF; }
.trial-band--plum .trial-lead { color: rgba(255, 255, 255, .88); }
.trial-band--plum .btn-light { background: #FFFFFF; color: var(--pl-primary-dark); border: 1px solid #FFFFFF; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .45); }
.trial-band--plum .btn-light:hover { background: var(--pl-primary-soft); border-color: var(--pl-primary-soft); }
.trial-band--plum .quiet { color: rgba(255, 255, 255, .82); }
.trial-band--plum .quiet a { color: #FFFFFF; }
.trial-band--plum a:focus-visible, .trial-band--plum .btn:focus-visible { outline-color: rgba(255, 255, 255, .8); }

/* Internal tracker: rows grouped by sector */
table.tracker tbody.tk-group th[colspan] { background: var(--pl-tint); color: var(--pl-primary-dark); font-size: .95rem; }

@media (max-width: 980px) {
  .emr-grid { grid-template-columns: 1fr; }
  .feat-row { grid-template-columns: 1fr; gap: 1.6rem; }
  .feat-row.rev .feat-copy { order: 1; }
  .feat-row.rev .feat-shot { order: 2; }
}
@media (max-width: 760px) {
  .stat-row { grid-template-columns: 1fr; }
  .icon-grid--uniform { grid-auto-rows: auto; }
}
@media (max-width: 640px) {
  .mid-cta { flex-direction: column; align-items: flex-start; }
  .mid-cta .btn { width: 100%; }
  .plan-card--featured { padding: 26px 22px 24px; }
  .trial-band--plum { padding: 2rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sector-card { transition: none !important; }
}

/* >>> family nav-dd: GENERATED by ops/site-headers.mjs from the one copy shared
   by hospiceapps.com, volunteerledger.com and careroster.org. Edit it THERE and
   run --write; --check fails on any drift. The hub's Products dropdown (Greg
   2026-10-01: "it just looks really nice and smooth and I want more of that"):
   a rounded panel under the pill-highlighted trigger, the caret turns over,
   items are a serif title and one grey line, opacity and a 6px rise at .16s
   ease. Each site maps the --dd-* variables to its own tokens just above this
   block, and sizes .nav-dd-trigger like its other nav links. */
.site-nav .nav-dd { position: relative; display: inline-flex; }
.nav-dd-trigger { font-family: inherit; line-height: inherit; border: 0; background: none; cursor: pointer; white-space: nowrap; }
.nav-dd-trigger:focus-visible { outline: 3px solid var(--dd-focus); outline-offset: 2px; }
.nav-dd.is-open .nav-dd-trigger, .nav-dd-trigger:hover { color: var(--dd-accent-ink); background: var(--dd-accent-soft); }
.nav-dd-caret { flex: 0 0 auto; transition: transform .16s ease; }
.nav-dd.is-open .nav-dd-caret { transform: rotate(180deg); }
.nav-dd-panel {
  position: absolute; top: 100%; left: 0; margin-top: .5rem;
  display: flex; flex-direction: column; gap: .25rem;
  min-width: 330px; padding: .5rem;
  background: var(--dd-surface); border: 1px solid var(--dd-border); border-radius: 16px;
  box-shadow: 0 18px 44px -14px rgba(var(--dd-shadow-rgb), .30), 0 2px 8px rgba(var(--dd-shadow-rgb), .06);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  z-index: 60;
}
.nav-dd--end .nav-dd-panel { left: auto; right: 0; }
/* an invisible bridge over the gap, so the pointer can travel into the panel */
.nav-dd-panel::before { content: ''; position: absolute; top: -.6rem; left: 0; right: 0; height: .6rem; }
.nav-dd.is-open .nav-dd-panel,
:root:not(.nav-js) .nav-dd:hover .nav-dd-panel,
:root:not(.nav-js) .nav-dd:focus-within .nav-dd-panel {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .16s ease, transform .16s ease, visibility 0s;
}
.nav-dd-card {
  display: block; text-decoration: none;
  padding: .6rem .75rem; border-radius: 11px; border: 1px solid transparent;
  transition: background-color .14s ease, border-color .14s ease;
}
.nav-dd-card strong { display: block; font-family: var(--dd-display); font-weight: 700; font-size: .98rem; color: var(--dd-ink); }
.nav-dd-card span { display: block; font-size: .82rem; color: var(--dd-ink-soft); margin-top: .08rem; }
.nav-dd-card:hover, .nav-dd-card:focus-visible { background: var(--dd-accent-soft); border-color: var(--dd-accent-line); }
.nav-dd-card:hover strong, .nav-dd-card:focus-visible strong { color: var(--dd-accent-ink); }
.nav-dd-card:focus-visible { outline: 3px solid var(--dd-focus); outline-offset: 1px; }
/* The family's apps tint in their OWN colour on every site. */
.nav-dd-card--cr:hover, .nav-dd-card--cr:focus-visible { background: #ECE9F8; border-color: rgba(87, 74, 181, .22); }
.nav-dd-card--cr:hover strong, .nav-dd-card--cr:focus-visible strong { color: #463A8C; }
.nav-dd-card--vl:hover, .nav-dd-card--vl:focus-visible { background: #E2F0ED; border-color: rgba(15, 118, 110, .22); }
.nav-dd-card--vl:hover strong, .nav-dd-card--vl:focus-visible strong { color: #0B5F58; }
.nav-dd-card--ha:hover, .nav-dd-card--ha:focus-visible { background: #DCE8F2; border-color: rgba(23, 73, 109, .22); }
.nav-dd-card--ha:hover strong, .nav-dd-card--ha:focus-visible strong { color: #0E3450; }
.nav-dd-card--pl:hover, .nav-dd-card--pl:focus-visible { background: #F3E4EB; border-color: rgba(122, 49, 88, .22); }
.nav-dd-card--pl:hover strong, .nav-dd-card--pl:focus-visible strong { color: #53203D; }
/* Collapsed (js/nav.js sets .is-collapsed on .site-head whenever the mobile
   menu's toggle is showing, so this block carries no breakpoint of its own):
   each trigger is a plain row heading its list, and the items ship already
   open beneath it, indented on a muted ground. No hover, no extra tap.
   visibility INHERIT, never visible: an explicit visible would leave these
   links clickable and tabbable while the closed menu panel is invisible. */
.site-head.is-collapsed .site-nav .nav-dd { display: block; padding: 0; }
.site-head.is-collapsed .nav-dd-trigger,
.site-head.is-collapsed .nav-dd-trigger:hover,
.site-head.is-collapsed .nav-dd.is-open .nav-dd-trigger {
  display: flex; width: 100%; justify-content: space-between; align-items: center;
  min-height: 48px; padding: 0 var(--dd-row-px); border-radius: 0;
  border-bottom: 1px solid var(--dd-border);
  font-size: 1.02rem; color: var(--dd-ink); background: none; cursor: default;
}
.site-head.is-collapsed .nav-dd-caret { display: none; }
.site-head.is-collapsed .nav-dd-panel {
  position: static; min-width: 0; margin: 0; padding: 0; gap: 0;
  background: var(--dd-muted); border: 0; border-radius: 0; box-shadow: none;
  opacity: 1; visibility: inherit; transform: none; transition: none;
}
.site-head.is-collapsed .nav-dd-panel::before { display: none; }
.site-head.is-collapsed .nav-dd-card {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 52px; padding: .6rem var(--dd-row-px) .6rem var(--dd-sub-pl); border-radius: 0;
  border: 0; border-bottom: 1px solid var(--dd-border);
}
@media (prefers-reduced-motion: reduce) {
  .nav-dd-panel, .nav-dd-caret, .nav-dd-trigger, .nav-dd-card { transition: none !important; }
}
/* <<< family nav-dd */

/* ===========================================================================
   NARROW PHONES: the brand, and nothing else, decides whether the header fits
   (VL's rules, measured there). ⛔ KEEP THESE LAST in the file: on VL an
   earlier copy lost to a later block and the header overflowed. Below ~345px
   no font size saves "Personnel Ledger" beside Sign in and the menu button, so
   the mark carries the brand alone.
   =========================================================================== */
@media (max-width: 380px) {
  .site-head-in { padding-left: 14px; padding-right: 14px; gap: .45rem; }
  .brand img { width: auto; height: 30px; border-radius: 0; }
  .brand .wordmark { font-size: 1.04rem; }
}
@media (max-width: 344px) {
  .brand .wordmark { display: none; }
  /* At 320px a long first word ("credentialing") would sit alone on a
     heading's first line, so the display sizes step down here. */
  .hero--split h1, .lp-hero.hero--split h1 { font-size: 25px; }
  .section-title, .trial-band h2 { font-size: 1.45rem; }
  .hub-card strong, .lp-value h3 { font-size: 1.04rem; }
  .rule-card .rule-big { font-size: 1.16rem; }
}