/* ============================================================
   License Ladder — marketing site stylesheet
   Built on the License Ladder design system (assets/tokens.css).
   Sections:
     0. Base / reset
     1. Layout primitives (container, section, grid)
     2. Type helpers (eyebrow, lede, display)
     3. Buttons
     4. Cards & surfaces
     5. Blueprint panel + grid
     6. Trade / deck accents
     7. Navigation (top bar + mobile drawer)
     8. Footer
     9. Components (stat, step, faq, pricing, form, sticky CTA)
   ============================================================ */

@import url('tokens.css');
@import url('fonts.css');

/* ---------- 0. Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
:root {
  /* trust-tuned text: deepen body copy a touch for legibility */
  --color-text-secondary: #41506A;
  /* light cream-grey canvas — warm but desaturated, close to white */
  --ll-tan-50:  #FFFFFE;
  --ll-tan-100: #FaFAF7;
  --ll-tan-200: #F5F4EF;
  --ll-tan-300: #E5E3DA;
  --color-surface-canvas: #F5F4EF;
  --color-surface-card: #FFFFFF;
  --color-surface-card-subtle: #FBFBF8;
  --color-border-subtle: #E6E4DB;
  --color-divider: rgba(40,36,24,0.07);
}
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background: var(--color-surface-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  line-height: 1.55;
  letter-spacing: -0.002em;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, p { margin: 0; }
/* figures are media frames here — kill the browser default 1em/40px figure
   margins (the prototype's <media-slot> had none, so all layouts assume zero) */
figure { margin: 0; }
::selection { background: rgba(232,71,44,0.18); }

/* light cream-grey page canvas (literal so it stays consistent regardless of tweaks) */
.paper-bg {
  background:
    radial-gradient(ellipse at 50% -8%, rgba(232,71,44,0.018), transparent 60%),
    radial-gradient(ellipse at 92% 96%, rgba(80,72,50,0.025), transparent 55%),
    #F5F4EF;
}

/* ---------- 1. Layout primitives ---------- */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .container { padding: 0 32px; } }
@media (min-width: 1240px) { .container { padding: 0 40px; } }
.container-narrow { max-width: 820px; }
.section { padding: 34px 0; }
.section-sm { padding: 34px 0; }
@media (min-width: 768px) {
  .section { padding: 52px 0; }
  .section-sm { padding: 52px 0; }
}
.grid { display: grid; gap: 16px; }
@media (min-width: 768px) {
  .cols-2 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: repeat(3, 1fr); }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .gap-lg { gap: 32px; }
  .grid { gap: 20px; }
}
@media (min-width: 1024px) {
  .cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.center { text-align: center; }
.measure { max-width: 62ch; }
.center.measure { margin-left: auto; margin-right: auto; }
/* Uniform section-intro rhythm: one even gap between an intro block and the
   content that follows it, everywhere on the site. */
.section-intro { margin-bottom: 24px; }
@media (min-width: 768px) { .section-intro { margin-bottom: 44px; } }

/* ---------- 2. Type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ll-orange-800);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-primary-orange); flex: none;
}
.eyebrow.on-dark { color: var(--ll-tan-cream); opacity: 0.92; }

.display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ll-navy-900);
  font-size: clamp(34px, 7vw, 64px);
  text-wrap: balance;
}
.display-sm {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.024em;
  color: var(--ll-navy-900);
  font-size: clamp(27px, 4.2vw, 42px);
  text-wrap: balance;
}
.h3-mkt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 25px);
  line-height: 1.22; letter-spacing: -0.014em;
  color: var(--ll-navy-900);
  text-wrap: balance;
}
.accent { color: var(--color-primary-orange); }
.on-dark, .on-dark .display, .on-dark .display-sm, .on-dark .h3-mkt { color: #fff; }
.lede {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.62;
  color: var(--color-text-secondary);
  text-wrap: pretty;
}
.lede.on-dark { color: var(--ll-tan-cream); opacity: 0.92; }
.body { font-size: 16px; line-height: 1.65; color: var(--color-text-secondary); text-wrap: pretty; }
.body.on-dark { color: var(--ll-tan-cream); opacity: 0.82; }
.mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums; }
.legal-ref {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

/* ---------- 3. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 600; font-size: 15px; letter-spacing: 0.002em;
  border: 1.5px solid transparent; border-radius: var(--radius-pill);
  padding: 0 26px; height: 52px; min-height: 48px;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-base) var(--ease-in-out),
              transform var(--dur-fast) var(--ease-in-out),
              box-shadow var(--dur-base) var(--ease-in-out),
              border-color var(--dur-base) var(--ease-in-out);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--color-primary-orange); color: #fff; box-shadow: 0 1px 2px rgba(11,39,66,0.12), 0 10px 24px -8px rgba(232,71,44,0.5); }
.btn-primary:hover { background: var(--color-primary-orange-hover); transform: translateY(-1px); box-shadow: 0 2px 5px rgba(11,39,66,0.14), 0 16px 32px -8px rgba(232,71,44,0.55); }
.btn-primary:active { background: var(--color-primary-orange-pressed); transform: scale(0.97); }
.btn-secondary { background: transparent; color: var(--ll-navy-900); border-color: rgba(11,39,66,0.26); }
.btn-secondary:hover { background: rgba(11,39,66,0.05); border-color: rgba(11,39,66,0.5); }
.btn-secondary.on-dark { color: #fff; border-color: rgba(244,234,208,0.5); }
.btn-secondary.on-dark:hover { background: rgba(244,234,208,0.1); }
.btn-sm { height: 42px; min-height: 42px; font-size: 13px; padding: 0 18px; }
.btn-block { width: 100%; }
.btn-lg { height: 58px; font-size: 16px; padding: 0 32px; }
.btn:focus-visible { outline: 2px solid var(--color-primary-orange); outline-offset: 2px; }

/* ---------- 4. Cards ---------- */
.card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 22px;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-raised); border-color: var(--ll-tan-300); }
.card-pad-lg { padding: 30px; }
@media (min-width: 768px) { .card-pad-lg { padding: 36px; } }
.card-fine-grid { position: relative; }
.card-fine-grid::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(11,39,66,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,39,66,0.035) 1px, transparent 1px);
  background-size: 12px 12px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 90%);
          mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 90%);
}
.card-icon {
  width: 48px; height: 48px; border-radius: var(--radius-lg);
  display: grid; place-items: center; flex: none;
  background: rgba(232,71,44,0.1); color: var(--color-primary-orange);
  margin-bottom: 16px;
}
.card-icon.navy { background: var(--ll-navy-900); color: var(--ll-tan-cream); }

/* ---------- 5. Blueprint panel ---------- */
.blueprint {
  position: relative;
  background: linear-gradient(160deg, var(--ll-navy-700), var(--ll-navy-800));
  color: #fff; overflow: hidden;
}
.blueprint::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(173,207,238,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(173,207,238,0.14) 1px, transparent 1px);
  background-size: 24px 24px;
}
.blueprint::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, rgba(130,190,255,0.16), transparent 60%);
  mix-blend-mode: screen;
}
.blueprint > * { position: relative; z-index: 1; }
.blueprint-card {
  border-radius: var(--radius-card);
  box-shadow: 0 40px 80px rgba(11,39,66,0.25), 0 0 0 1px rgba(173,207,238,0.08);
}
/* corner registration marks */
.reg-marks span {
  position: absolute; width: 16px; height: 16px; z-index: 1;
  border-color: rgba(173,207,238,0.5); border-style: solid; border-width: 0;
}
.reg-marks span:nth-child(1) { top: 14px; left: 14px; border-top-width: 1.5px; border-left-width: 1.5px; }
.reg-marks span:nth-child(2) { top: 14px; right: 14px; border-top-width: 1.5px; border-right-width: 1.5px; }
.reg-marks span:nth-child(3) { bottom: 14px; left: 14px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.reg-marks span:nth-child(4) { bottom: 14px; right: 14px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

.divider-dark { height: 1px; background: rgba(173,207,238,0.16); border: 0; }
.divider { height: 1px; background: var(--color-border-subtle); border: 0; }

/* ---- unified background: one canvas everywhere ----
   Blueprint sections become contained dark PANELS floating on the single
   canvas, so sections read as obviously distinct without the page background
   ever changing color. */
.section.blueprint { background: transparent; color: var(--color-text-primary);
  padding-left: 24px; padding-right: 24px; }
@media (min-width: 768px) { .section.blueprint { padding-left: 32px; padding-right: 32px; } }
.section.blueprint::before, .section.blueprint::after { content: none; display: none; }
.section.blueprint > .container {
  position: relative; isolation: isolate;
  background: linear-gradient(160deg, var(--ll-navy-700), var(--ll-navy-800));
  color: #fff; border-radius: var(--radius-card); overflow: hidden;
  padding: clamp(36px, 4vw, 56px) clamp(24px, 4vw, 56px);
  box-shadow: 0 26px 64px -24px rgba(11,39,66,0.5), 0 0 0 1px rgba(173,207,238,0.08);
}
.section.blueprint > .container::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 0;
  background-image:
    linear-gradient(rgba(173,207,238,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(173,207,238,0.12) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 38%, #000, transparent 92%);
          mask-image: radial-gradient(ellipse at 50% 38%, #000, transparent 92%);
}
.section.blueprint > .container::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(130,190,255,0.16), transparent 60%);
  mix-blend-mode: screen;
}
.section.blueprint > .container > * { position: relative; z-index: 1; }
.section.blueprint .reg-marks { display: none; }

/* subtle hairline between consecutive light sections (no color blocking) */
.section:not(.blueprint) + .section:not(.blueprint) { border-top: 1px solid rgba(11,39,66,0.08); }

/* ---------- 6. Trade / deck accents ---------- */
.deck-chip {
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(173,207,238,0.18);
  border-left: 3px solid var(--deck, #E67E22);
  border-radius: var(--radius-lg); padding: 12px 14px;
}
.trade-framing { --deck: var(--ll-deck-framing); }
.trade-plumbing { --deck: var(--ll-deck-plumbing); }
.trade-electrical { --deck: var(--ll-deck-electrical); }
.trade-law { --deck: var(--ll-deck-law); }
.trade-bgen { --deck: var(--ll-deck-bgen); }
.deck-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--deck); flex: none; }
.deck-bar { height: 4px; border-radius: 2px; background: var(--deck); }

/* readiness pills */
.pill-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--radius-pill);
}
.pill-red { background: rgba(231,76,60,0.12); color: var(--ll-readiness-red); }
.pill-yellow { background: rgba(243,156,18,0.14); color: #B9770A; }
.pill-green { background: rgba(39,174,96,0.12); color: var(--ll-readiness-green); }
.dot { width: 8px; height: 8px; border-radius: 50%; }

/* ---------- 7. Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11,39,66,0.90);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
          backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(173,207,238,0.14);
  box-shadow: 0 1px 0 rgba(11,39,66,0.04), 0 10px 30px -22px rgba(11,39,66,0.5);
}
.nav-inner { display: flex; align-items: center; gap: 24px; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; overflow: hidden; flex: none; background: rgba(232,71,44,0.18); }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: 0.04em; color: #fff; line-height: 1; text-transform: uppercase; }
.lang-toggle { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 14px;
  border-radius: var(--radius-pill); border: 1px solid rgba(173,207,238,0.4); background: transparent;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: #fff;
  cursor: pointer; white-space: nowrap; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.lang-toggle:hover { background: rgba(255,255,255,0.08); border-color: rgba(173,207,238,0.7); }
.nav-links { display: none; gap: 30px; flex: 1; justify-content: center; }
.nav-link { font-size: 14px; font-weight: 500; letter-spacing: 0.005em; color: rgba(255,255,255,0.82); position: relative; padding: 6px 0; }
.nav-link:hover { color: var(--color-primary-orange); }
.nav-link.active { color: var(--color-primary-orange); }
.nav-link.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--color-primary-orange); border-radius: 2px;
}
.nav-actions { display: none; align-items: center; gap: 12px; flex: none; }
.nav-signin { font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; }
.nav-signin:hover { color: var(--color-primary-orange); }
.hamburger {
  margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent;
  display: grid; place-items: center; cursor: pointer; border-radius: 8px;
}
.hamburger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; position: relative; }
.hamburger span::before, .hamburger span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: #fff; border-radius: 2px; }
.hamburger span::before { top: -7px; } .hamburger span::after { top: 7px; }
@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-actions { display: flex; }
  .hamburger { display: none; }
}

/* ---- transparent-over-hero nav (home) → opaque on scroll ---- */
.nav { transition: background var(--dur-medium) var(--ease-out), border-color var(--dur-medium) var(--ease-out), backdrop-filter var(--dur-medium) var(--ease-out); }
.nav .brand-name, .nav .nav-link, .nav .nav-signin { transition: color var(--dur-base) var(--ease-out); }
.nav .hamburger span, .nav .hamburger span::before, .nav .hamburger span::after { transition: background var(--dur-base) var(--ease-out); }

body[data-nav-overlay] .nav {
  position: fixed; top: 0; left: 0; right: 0;
  background: transparent; border-bottom-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
}
body[data-nav-overlay] .nav .brand-name,
body[data-nav-overlay] .nav .nav-signin { color: #fff; }
body[data-nav-overlay] .nav .nav-link { color: rgba(255,255,255,0.85); }
body[data-nav-overlay] .nav .nav-link:hover,
body[data-nav-overlay] .nav .nav-link.active { color: #fff; }
body[data-nav-overlay] .nav .nav-link.active::after { background: #fff; }
body[data-nav-overlay] .nav .hamburger span,
body[data-nav-overlay] .nav .hamburger span::before,
body[data-nav-overlay] .nav .hamburger span::after { background: #fff; }

/* scrolled state re-applies a solid navy nav */
body[data-nav-overlay] .nav.scrolled {
  background: rgba(11,39,66,0.90); border-bottom-color: rgba(173,207,238,0.14);
  -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px);
}
body[data-nav-overlay] .nav.scrolled .brand-name,
body[data-nav-overlay] .nav.scrolled .nav-signin { color: #fff; }
body[data-nav-overlay] .nav.scrolled .nav-link { color: rgba(255,255,255,0.82); }
body[data-nav-overlay] .nav.scrolled .nav-link:hover,
body[data-nav-overlay] .nav.scrolled .nav-link.active { color: var(--color-primary-orange); }
body[data-nav-overlay] .nav.scrolled .nav-link.active::after { background: var(--color-primary-orange); }
body[data-nav-overlay] .nav.scrolled .hamburger span,
body[data-nav-overlay] .nav.scrolled .hamburger span::before,
body[data-nav-overlay] .nav.scrolled .hamburger span::after { background: #fff; }

/* interior pages with the overlay nav: the blueprint hero extends to the very
   top of the page, behind the transparent fixed nav */
body[data-nav-overlay] .page-hero { padding-top: 150px; }
@media (max-width: 760px) { body[data-nav-overlay] .page-hero { padding-top: 122px; } }

/* (removed: legacy squared-corner override — nav and hero buttons now match the homepage pills) */
/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(11,39,66,0.4);
}
.drawer.open { display: block; }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(86%, 360px);
  background: var(--ll-tan-200); padding: 20px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--shadow-modal);
}
.drawer-close { align-self: flex-end; width: 44px; height: 44px; border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: var(--ll-navy-900); }
.drawer-link { font-size: 18px; font-weight: 600; color: var(--ll-navy-900); padding: 14px 8px; border-bottom: 1px solid rgba(217,207,184,0.7); }
.drawer-link:last-of-type { border-bottom: 0; }
.drawer .btn { margin-top: 16px; }

/* ---------- 8. Footer ---------- */
.footer { background: var(--ll-navy-950); color: var(--ll-tan-cream); padding: 56px 0 32px; }
/* clearance so the fixed mobile CTA bar never covers footer fine print */
@media (max-width: 1023px) { .footer { padding-bottom: 96px; } }
.footer-grid { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer h5 { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(239,227,200,0.6); margin-bottom: 14px; }
.footer-link { display: block; font-size: 14px; color: var(--ll-tan-cream); opacity: 0.78; padding: 7px 0; transition: opacity var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.footer-link:hover { opacity: 1; color: #fff; }
.footer-fine { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(173,207,238,0.14); font-size: 12px; color: rgba(239,227,200,0.55); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }

/* ---------- 9. Components ---------- */
/* stat tile */
.stat-row { display: flex; flex-wrap: wrap; gap: 22px 30px; align-items: flex-start; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-num { font-family: var(--font-mono); font-weight: 700; font-size: 26px; color: var(--ll-navy-900); letter-spacing: -0.01em; }
.stat-num.on-dark { color: #fff; }
.stat-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.stat-label.on-dark { color: var(--ll-tan-cream); opacity: 0.7; }
.stat-sep { width: 1px; align-self: stretch; background: var(--ll-tan-300); }

/* numbered step */
.step-num {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 800; font-size: 16px;
  background: var(--ll-navy-900); color: var(--ll-tan-cream);
}
.step-num.orange { background: var(--color-primary-orange); color: #fff; }

/* sample flashcard */
.flashcard {
  background: var(--ll-tan-50); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-paper);
  padding: 24px; position: relative; overflow: hidden;
}
.flashcard .fc-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); }
.flashcard .fc-q { font-size: 19px; font-weight: 600; color: var(--ll-navy-900); line-height: 1.35; margin: 10px 0 16px; }
.flashcard .fc-a { font-size: 15px; line-height: 1.55; color: var(--color-text-secondary); }
.fc-foot { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--color-divider); }
.hl { background: var(--ll-hl-yellow); padding: 0 3px; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* check list */
.checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--color-text-secondary); }
.checklist .ck { width: 24px; height: 24px; border-radius: 50%; flex: none; background: rgba(39,174,96,0.14); color: var(--ll-readiness-green); display: grid; place-items: center; margin-top: 1px; }
.checklist.on-dark li { color: var(--ll-tan-cream); }

/* FAQ accordion */
.faq-item { border-bottom: 1px solid var(--color-border-subtle); }
.faq-q { width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 0; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ll-navy-900); }
.faq-q .chev { flex: none; transition: transform var(--dur-base) var(--ease-in-out); color: var(--color-primary-orange); }
.faq-item.open .chev { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--dur-medium) var(--ease-in-out); }
.faq-a-inner { padding: 0 0 22px; font-size: 16px; line-height: 1.6; color: var(--color-text-secondary); max-width: 64ch; }
.faq-group { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-primary-orange); margin: 36px 0 4px; padding-top: 8px; }
.faq-group:first-child { margin-top: 8px; }

/* pricing */
.price-card { background: var(--ll-tan-50); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-card-raised); overflow: hidden; }
.price-head { background: var(--ll-navy-900); color: #fff; padding: 28px 28px 24px; position: relative; overflow: hidden; }
.price-old { font-family: var(--font-mono); font-size: 20px; color: var(--ll-tan-cream); opacity: 0.6; text-decoration: line-through; }
.price-now { font-family: var(--font-mono); font-weight: 800; font-size: 64px; line-height: 1; color: #fff; letter-spacing: -0.02em; }
.line-item { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px dashed var(--color-divider); font-size: 15px; }
.line-item:last-child { border-bottom: 0; }
.line-item .li-val { font-family: var(--font-mono); color: var(--color-text-muted); white-space: nowrap; }
.save-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--color-primary-orange); color: #fff; font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--radius-pill); }
.price-save { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-readiness-green); }

/* form */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.field input, .field select, .field textarea {
  font-family: var(--font-sans); font-size: 16px; color: var(--ll-navy-900);
  background: var(--ll-tan-50); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md);
  padding: 12px 14px; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--color-primary-orange); outline-offset: 1px; border-color: transparent; }

/* placeholder testimonial slot */
.slot {
  border: 1.5px dashed var(--ll-tan-300); border-radius: var(--radius-xl);
  background: rgba(254,251,243,0.5); padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.slot-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.slot-quote { font-size: 16px; color: var(--color-text-muted); font-style: italic; line-height: 1.5; }
.slot-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--ll-tan-100); border: 1px dashed var(--ll-tan-300); }

/* badge */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(232,71,44,0.08); border: 1px solid rgba(232,71,44,0.24);
  color: var(--ll-orange-800); padding: 6px 12px; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.verify {
  display: inline-block; font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: #B9770A;
  background: rgba(243,156,18,0.14); padding: 2px 6px; border-radius: 4px; vertical-align: middle;
}

/* safety callout — bold per voice rules */
.safety {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(232,71,44,0.07); border: 1px solid rgba(232,71,44,0.22);
  border-left: 4px solid var(--color-primary-orange);
  border-radius: var(--radius-md); padding: 14px 16px;
}
.safety .safety-ico { color: var(--color-primary-orange); flex: none; margin-top: 1px; }
.safety strong { color: var(--ll-navy-900); }

/* hero proof strip on dark surfaces uses .stat */
.hero-art { width: 100%; }

/* sticky mobile CTA */
.sticky-cta {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90;
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  background: var(--ll-navy-900); color: #fff; border-radius: var(--radius-pill);
  padding: 8px 8px 8px 20px; box-shadow: var(--shadow-fab);
}
.sticky-cta .sc-price { font-family: var(--font-mono); font-weight: 700; font-size: 14px; }
.sticky-cta .sc-old { opacity: 0.55; text-decoration: line-through; font-size: 12px; margin-right: 6px; }
@media (min-width: 1024px) { .sticky-cta { display: none; } }

/* utility spacing */
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mt-10 { margin-top: 40px; }
.mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; }
.flex { display: flex; } .items-center { align-items: center; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.wrap { flex-wrap: wrap; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--ll-navy-900); background: var(--ll-tan-100); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-pill); padding: 5px 12px; }

/* ---------- media slots (owner-uploadable photos/videos) ---------- */
.media-frame { border-radius: var(--radius-xl); box-shadow: var(--shadow-card); overflow: hidden; background: var(--ll-tan-100); border: 1px solid var(--color-border-subtle); display: block; width: 100%; }
.media-frame.bare { box-shadow: none; border: 0; background: transparent; }
.media-frame.round { border-radius: 50%; }
.media-frame.pill { border-radius: var(--radius-pill); }
.ar-16-9 { aspect-ratio: 16 / 9; }
.ar-3-2  { aspect-ratio: 3 / 2; }
.ar-4-3  { aspect-ratio: 4 / 3; }
.ar-1-1  { aspect-ratio: 1 / 1; }
.ar-3-4  { aspect-ratio: 3 / 4; }
.ar-2-3  { aspect-ratio: 2 / 3; }
.ar-21-9 { aspect-ratio: 21 / 9; }
.media-cap { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 8px; }

/* media mosaic — gallery slots merged into one seamless white box (no cream gutters) */
.media-mosaic {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--color-border-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-card);
}
@media (min-width: 640px) { .media-mosaic { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .media-mosaic { grid-template-columns: repeat(3, 1fr); } }
.media-mosaic > .media-frame { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #fff; }
.media-mosaic .ms-empty { border: 0 !important; border-radius: 0 !important; background: #fff; }
.media-mosaic .ms-empty:hover { background: rgba(232,71,44,0.05); }

/* hero with video background */
.hero-video {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--ll-navy-700), var(--ll-navy-800));
}
.hero-video > .hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-video > .hero-bg media-slot { width: 100%; height: 100%; }
.hero-video > .hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,22,40,0.34) 0%, rgba(6,22,40,0.16) 46%, rgba(6,22,40,0.02) 100%),
    linear-gradient(180deg, rgba(6,22,40,0.10) 0%, rgba(6,22,40,0) 32%, rgba(6,22,40,0.16) 100%);
}
.hero-video > .hero-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(rgba(173,207,238,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(173,207,238,0.10) 1px, transparent 1px);
  background-size: 28px 28px;
}
.hero-video > .container { position: relative; z-index: 2; }
.hero-glass {
  background: rgba(10,31,56,0.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(173,207,238,0.22);
  border-radius: var(--radius-card);
}

/* ---- refined hero (hero-xl) ---- */
.hero-xl { display: flex; flex-direction: column; min-height: 768px; }
@media (max-width: 600px) { .hero-xl { min-height: 660px; } }
.hero-main { flex: 1; display: flex; align-items: center; padding: 124px 0 52px; }
@media (max-width: 600px) { .hero-main { padding: 108px 0 36px; } }

/* corner registration marks framing the whole hero */
.hero-reg span { position: absolute; width: 26px; height: 26px; z-index: 2; pointer-events: none; border-color: rgba(173,207,238,0.5); border-style: solid; border-width: 0; }
.hero-reg span:nth-child(1) { top: 86px; left: 26px; border-top-width: 1.5px; border-left-width: 1.5px; }
.hero-reg span:nth-child(2) { top: 86px; right: 26px; border-top-width: 1.5px; border-right-width: 1.5px; }
.hero-reg span:nth-child(3) { bottom: 26px; left: 26px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.hero-reg span:nth-child(4) { bottom: 26px; right: 26px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
@media (max-width: 700px) { .hero-reg span { display: none; } }

.hero-inner { position: relative; z-index: 2; max-width: 1040px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ll-tan-cream);
  padding: 7px 15px; border-radius: var(--radius-pill);
  background: rgba(8,24,42,0.42); border: 1px solid rgba(173,207,238,0.26);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  text-shadow: 0 1px 12px rgba(6,22,40,0.5); }
.hero-kicker .k-line { width: 34px; height: 1.5px; background: linear-gradient(90deg, var(--color-primary-orange), rgba(232,71,44,0)); }
.hero-kicker .k-dot { color: rgba(173,207,238,0.7); }
.hero-kicker .k-dot-lead { width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary-orange);
  box-shadow: 0 0 0 3px rgba(232,71,44,0.22); flex: none; }
.hero-title { font-family: var(--font-display); font-weight: var(--tw-display-weight, 800);
  color: #fff; line-height: 1.0; letter-spacing: -0.032em; font-size: clamp(40px, 6.2vw, 76px);
  margin-top: 22px; text-wrap: balance; text-shadow: 0 2px 30px rgba(6,22,40,0.45); }
.hero-title .accent { color: var(--color-primary-orange); display: block; }
.hero-sub { margin-top: 22px; max-width: 52ch; font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55; font-weight: 400; letter-spacing: -0.011em;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  color: var(--ll-tan-cream); opacity: 0.96; text-shadow: 0 1px 16px rgba(6,22,40,0.4); }
.hero-cta { margin-top: 34px; }
.hero-trust { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
  color: rgba(239,227,200,0.82); }
.hero-trust .t-dot { color: var(--color-primary-orange); font-weight: 700; }

/* hero trust badges — social proof row under the CTAs */
.hero-badges { margin-top: 22px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
.hero-badges .hb { display: inline-flex; align-items: center; gap: 8px; }
.hero-badges .hb-stars { display: inline-flex; gap: 2px; color: #F5B945; }
.hero-badges .hb-stars svg { width: 16px; height: 16px; display: block; filter: drop-shadow(0 1px 2px rgba(6,22,40,0.35)); }
.hero-badges .hb-text { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(239,227,200,0.82); }
.hero-badges .hb-text strong { color: #fff; font-weight: 800; }
.hero-badges .hb-ico { width: 16px; height: 16px; display: block; color: rgba(239,227,200,0.78); flex: none; }
.hero-badges .hb-num { font-family: var(--font-mono); font-size: 17px; font-weight: 800; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.hero-badges .hb-sep { width: 1px; height: 22px; background: rgba(173,207,238,0.22); }
.hero-badges .hb-ca { color: var(--color-primary-orange); }
.hero-badges .hb-ca svg { width: 17px; height: 17px; display: block; }
.hero-badges .hb-ca .hb-text { color: rgba(239,227,200,0.9); }
.hero-badges .verify { color: #F5B945; background: none; padding: 0; vertical-align: super; font-size: 10px; }
@media (max-width: 560px) { .hero-badges .hb-sep { display: none; } .hero-badges { gap: 10px 16px; } }

.hero-spec { position: relative; z-index: 2; border-top: 1px solid rgba(173,207,238,0.18); }
.hero-spec-inner { display: flex; align-items: center; gap: 26px; padding-top: 20px; padding-bottom: 20px; flex-wrap: wrap; }
.hero-spec .spec { display: flex; flex-direction: column; gap: 3px; }
.hero-spec .spec-n { font-family: var(--font-mono); font-weight: 700; font-size: 24px; line-height: 1;
  color: #fff; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.hero-spec .spec-l { font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(173,207,238,0.72); }
.hero-spec .spec-sep { width: 1px; height: 34px; background: rgba(173,207,238,0.2); }
.hero-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 15px; border-radius: var(--radius-pill);
  background: rgba(10,31,56,0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(173,207,238,0.25); }
.hero-chip .hc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ll-readiness-yellow); box-shadow: 0 0 0 3px rgba(243,156,18,0.2); }
.hero-chip .hc-l { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.hero-chip .hc-n { font-family: var(--font-mono); font-weight: 800; font-size: 14px; color: var(--ll-readiness-yellow); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .hero-chip { display: none; } .hero-spec-inner { gap: 18px; } }
@media (max-width: 600px) { .hero-spec .spec-sep { display: none; } .hero-spec-inner { gap: 14px 20px; } }

/* reveal-on-scroll — default VISIBLE; entrance only when JS opts in via html.reveal-ready.
   This guarantees content shows even if JS/IntersectionObserver is unavailable
   (print, PDF export, screenshot pipelines, no-JS). */
html.reveal-ready .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
html.reveal-ready .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.reveal-ready .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   INTERIOR PAGE SYSTEM (How It Works · Exam Guide · Reviews · FAQ)
   A bold blueprint page-hero band unifies every interior page,
   then page-specific components sit on the cream canvas below.
   ============================================================ */
.page-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(168deg, var(--color-blueprint-top, #0A1F38) 0%, var(--color-blueprint-deep, #061626) 100%);
  color: #fff; padding: 64px 0 56px; border-bottom: 3px solid var(--color-primary-orange);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(173,207,238,0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(173,207,238,0.14) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 30% 30%, #000 35%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 75% at 30% 30%, #000 35%, transparent 78%);
}
.page-hero::after {
  content: ""; position: absolute; top: -30%; right: -10%; width: 60%; height: 120%;
  background: radial-gradient(circle, rgba(120,170,230,0.16), transparent 62%); mix-blend-mode: screen; pointer-events: none;
}
.page-hero > .container { position: relative; z-index: 2; }
.page-hero .ph-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-primary-orange); margin: 0 0 16px;
}
.page-hero .ph-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--color-primary-orange); border-radius: 2px; }
.page-hero h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.02;
  font-size: clamp(34px, 5.4vw, 60px); color: #fff; margin: 0; text-wrap: balance; }
.page-hero h1 .accent { color: var(--color-primary-orange); }
.page-hero .ph-lede { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: rgba(239,227,200,0.86);
  max-width: 56ch; margin: 18px 0 0; }
.page-hero .ph-cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.page-hero .reg-marks span { border-color: rgba(173,207,238,0.3); }
/* hero stat strip */
.ph-stats { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: 34px;
  padding-top: 26px; border-top: 1px solid rgba(173,207,238,0.18); }
.ph-stat { display: flex; flex-direction: column; gap: 4px; }
.ph-stat .n { font-family: var(--font-mono); font-weight: 800; font-size: 26px; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.ph-stat .n.accent { color: var(--color-primary-orange); }
.ph-stat .l { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(173,207,238,0.72); }

/* section header — left-aligned, with an accent rule (bolder than centered) */
.sec-head { max-width: 62ch; }
.sec-head .eyebrow { display: inline-block; }
.sec-head h2 { margin-top: 10px; }
.sec-head .rule { width: 40px; height: 3px; background: var(--color-primary-orange); border-radius: 2px; margin-top: 16px; }

/* anchor jump chips (Exam Guide table of contents) */
.toc-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.toc-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: var(--radius-pill);
  background: var(--color-surface-card); border: 1px solid var(--color-border-subtle); box-shadow: var(--shadow-card);
  font-size: 13.5px; font-weight: 600; color: var(--ll-navy-900); transition: transform .15s var(--ease-out), border-color .15s; }
.toc-chip:hover { transform: translateY(-2px); border-color: var(--color-primary-orange); }
.toc-chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--deck, var(--color-primary-orange)); flex: none; }

/* stat tile grid (big number cards) */
.stat-tile { background: var(--color-surface-card); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card); padding: 22px; }
.stat-tile .n { font-family: var(--font-mono); font-weight: 800; font-size: 34px; line-height: 1; color: var(--ll-navy-900);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.stat-tile .n .u { font-size: 17px; color: var(--color-text-muted); font-weight: 700; }
.stat-tile .l { margin-top: 8px; font-size: 14px; color: var(--color-text-secondary); line-height: 1.45; }
.stat-tile.accent-top { border-top: 3px solid var(--color-primary-orange); }

/* process timeline (vertical, numbered) */
.flow { display: grid; gap: 0; }
.flow-step { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding-bottom: 28px; position: relative; }
.flow-step:not(:last-child)::before { content: ""; position: absolute; left: 25px; top: 52px; bottom: 0; width: 2px; background: var(--color-border-subtle); }
.flow-num { width: 52px; height: 52px; border-radius: 50%; background: var(--ll-navy-900); color: #fff; display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 800; font-size: 20px; flex: none; z-index: 1; }
.flow-num.accent { background: var(--color-primary-orange); }
.flow-step .body { margin-top: 6px; }

/* eyebrow-on-dark refinements within page-hero already inherited */

/* trade anchor block */
.trade-block { scroll-margin-top: 84px; }
.trade-head { display: flex; align-items: center; gap: 14px; }
.trade-badge { width: 46px; height: 46px; border-radius: var(--radius-lg); display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--deck) 14%, #fff); border: 1px solid color-mix(in srgb, var(--deck) 36%, #fff); color: var(--deck); }
.trade-badge svg { width: 24px; height: 24px; }

/* review (placeholder) card */
.review-card { background: var(--color-surface-card); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.stars { display: inline-flex; gap: 3px; color: #F5B945; }
.stars svg { width: 17px; height: 17px; display: block; }
.review-card .rc-quote { font-size: 16px; line-height: 1.55; color: var(--color-text-muted); font-style: italic; flex: 1; }
.review-card .rc-foot { display: flex; align-items: center; gap: 12px; }
.review-card .rc-meta { display: flex; flex-direction: column; gap: 2px; }
.review-card .rc-name { font-size: 14px; font-weight: 700; color: var(--ll-navy-900); }
.review-card .rc-trade { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--color-text-muted); text-transform: uppercase; }
.placeholder-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #B9770A; background: rgba(243,156,18,0.12); border: 1px dashed rgba(243,156,18,0.5); border-radius: 4px; padding: 4px 8px; align-self: flex-start; }

/* ============================================================
   FABLE POLISH (site-wide) — craft layer for every page.
   Typography niceties, weighted-paper hovers, luminous chrome.
   Pure CSS: copy and markup untouched.
   ============================================================ */

/* ---- Typography craft ---- */
.display, .display-sm, .h3-mkt, .page-hero h1, .hero-title { text-wrap: balance; }
p, .lede, .body, .faq-a-inner, .sl-desc { text-wrap: pretty; }
/* orange section dividers: always centered */
.sec-head .rule { margin-left: auto; margin-right: auto; }
::selection { background: rgba(232,71,44,0.22); }
:focus-visible { outline: 2px solid var(--color-primary-orange); outline-offset: 2px; }

/* corner registration marks: retired site-wide per owner direction */
.reg-marks, .hero-reg { display: none !important; }

/* keep the whole header sticky on every page (the .nav is sticky inside a
   same-height wrapper, which defeats stickiness — pin the wrapper instead) */
#site-nav { position: sticky; top: 0; z-index: 100; }

/* ---- Interior page hero: deeper, more cinematic ---- */
.page-hero h1 { text-shadow: 0 2px 24px rgba(4,16,30,0.45); }
.page-hero .btn-secondary.on-dark { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.page-hero .ph-stat { transition: transform .2s var(--ease-out); }
.page-hero .ph-stat:hover { transform: translateY(-2px); }
.page-hero .ph-stats { position: relative; }

/* ---- Cards & tiles: weighted-paper hover ---- */
.card, .stat-tile, .review-card, .toc-chip, .flashcard, .slot {
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s var(--ease-out);
}
.grid .card:hover, .grid .stat-tile:hover, .grid .review-card:hover, .flashcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px -10px rgba(11,39,66,0.22), 0 2px 6px rgba(11,39,66,0.07);
}
a.card:hover { border-color: rgba(232,71,44,0.5); }

/* photos breathe inside hovering cards */
.card .media-frame { overflow: hidden; }
.card .media-frame img, .card .media-frame video { transition: transform .45s var(--ease-out); }
.card:hover .media-frame img, .card:hover .media-frame video { transform: scale(1.035); }

/* ---- Process / timeline flow ---- */
.flow-num { transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); box-shadow: 0 4px 14px rgba(11,39,66,0.18); }
.flow-step:hover .flow-num { transform: scale(1.06); }

/* ---- TOC chips & trade badges: deck-color glow ---- */
.toc-chip .dot { transition: box-shadow .2s var(--ease-out); }
.toc-chip:hover .dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--deck, var(--color-primary-orange)) 18%, transparent); }
.trade-badge { transition: box-shadow .25s var(--ease-out); }
.trade-block:hover .trade-badge { box-shadow: 0 0 0 5px color-mix(in srgb, var(--deck, var(--color-primary-orange)) 14%, transparent); }

/* ---- Media mosaic: lifts as one sheet ---- */
.media-mosaic { transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out); }
.media-mosaic:hover { box-shadow: 0 16px 40px -16px rgba(11,39,66,0.28); }

/* ---- FAQ: warmer interaction ---- */
.faq-q { transition: color .15s var(--ease-out); }
.faq-q:hover { color: var(--color-primary-orange); }
.faq-q:hover .chev { color: var(--color-primary-orange); }
.faq-item { transition: border-color .2s var(--ease-out); }
.faq-item.open { border-color: rgba(232,71,44,0.38); }

/* ---- Pricing line items: confirmation green ---- */
.line-item .li-val { color: var(--ll-readiness-green); font-weight: 700; }

/* ---- Sticky mobile CTA ---- */
.sticky-cta { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 -8px 28px rgba(11,39,66,0.16); }

/* ---- Reveal motion: weighted paper, never bouncy ---- */
html.reveal-ready .reveal { transition-duration: .55s; transition-timing-function: cubic-bezier(.2,.9,.2,1); }

/* ============================================================
   NAV / BUTTON PARITY — interior pages must match the homepage
   exactly. site.css never declared the radius tokens (they were
   only set at runtime by the homepage's Design Studio), so every
   var(--radius-*) fell back to square on interior pages. Declare
   the design-system tokens, then make the homepage's glossy pill
   button the default everywhere. Home's own page-scoped rules
   still win there, so the Design Studio keeps full control.
   ============================================================ */
:root {
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px;
  --radius-xl: 12px; --radius-card: 16px; --radius-pill: 9999px;
}
.btn { border-radius: var(--radius-pill); box-shadow: none; }
.btn-primary {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--color-primary-orange) 88%, #fff) 0%, var(--color-primary-orange) 52%, color-mix(in srgb, var(--color-primary-orange) 80%, #000) 100%);
  border-color: color-mix(in srgb, var(--color-primary-orange) 65%, #000);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.36), inset 0 -2px 4px rgba(0,0,0,0.22);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.42), inset 0 -2px 5px rgba(0,0,0,0.26); }
.btn-primary:active { transform: scale(0.97); }
.btn-secondary {
  background: transparent;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(11,39,66,0.04));
  border-color: rgba(11,39,66,0.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.btn-secondary:hover { border-color: rgba(11,39,66,0.5); }
.btn-secondary.on-dark {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02));
  border-color: rgba(244,234,208,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
}
.btn-secondary.on-dark:hover { background-image: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.05)); }

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .card, .stat-tile, .review-card, .flashcard, .toc-chip, .flow-num,
  .page-hero .ph-stat, .media-mosaic, .card .media-frame img, .card .media-frame video { transition: none; }
  .grid .card:hover, .grid .stat-tile:hover, .grid .review-card:hover, .flashcard:hover,
  .flow-step:hover .flow-num, .page-hero .ph-stat:hover { transform: none; }
}

/* ============================================================
   MEDIA PLACEHOLDERS — static "Coming Soon" treatment for every
   photo/video spot that hasn't been filled yet.
   To fill one: replace the <figure class="… media-placeholder">
   block with  <img src="assets/media/your-file.jpg" alt="…">
   or          <video src="assets/media/your-file.mp4" muted loop
                      playsinline autoplay controls></video>
   keeping the same class list minus "media-placeholder".
   ============================================================ */
.media-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 16px; margin: 0;
  background: rgba(254,251,243,0.55);
  border: 1.5px dashed #C9BFA3;
  color: #7C8496;
}
.media-placeholder .mp-ico { width: 34px; height: 34px; opacity: .85; }
.media-placeholder .mp-soon {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px;
  border: 1px solid rgba(232,71,44,.4); background: rgba(232,71,44,.08); color: #B3331F;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.media-placeholder .mp-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.3;
}
/* tiny slots (testimonial avatars): icon only */
.media-placeholder.compact { padding: 0; gap: 0; }
.media-placeholder.compact .mp-ico { width: 16px; height: 16px; }
/* inside the seamless gallery mosaic, placeholders sit flush on white */
.media-mosaic > .media-placeholder { border: 0; background: #fff; }
/* media dropped in place of a placeholder fills its frame */
.media-frame > img, .media-frame > video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* hero background video (homepage) */
.hero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }