/* ============================================================
   Drake Khamis — Mortgage Site
   Design tokens from /Website V2/README.md
   ============================================================ */

:root {
  --bg: #000000;
  --bg-soft: #0a0a0a;
  --fg: #ffffff;
  --fg-2: #c8c8c8;
  --fg-3: #a6a6a6;
  --fg-4: rgba(255, 255, 255, 0.55);
  --fg-5: rgba(255, 255, 255, 0.40);
  --accent-green: #4ade80;

  --gold-1: #fff0b8;
  --gold-2: #ffd271;
  --gold-3: #ffb03a;
  --gold-deep: #4a2608;

  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  position: relative; /* anchor for .atmosphere absolute layer */
  /* The descent: deep space → atmosphere → sky → pastel Sonoran desert.
     Acts as color-glue underneath the .atmosphere image layers — visible in
     the mask-fade seams between images. */
  background: linear-gradient(
    180deg,
    #000000  0%,    /* hero (covered by image) */
    #000000  12%,   /* brief black beat past the hero exit, then start lifting */
    #05101f  20%,   /* navy begins early — space deepens instead of going dead-black */
    #0a1730  30%,   /* mesosphere navy — the next starfield resolves over this */
    #0e1a35  40%,   /* upper atmosphere */
    #25457f  50%,   /* atmosphere blue */
    #5e83b9  61%,   /* high sky */
    #8eb6dc  70%,   /* daytime sky */
    #f0b698  80%,   /* pastel coral horizon */
    #ecc9a6  90%,   /* pastel desert sand */
    #c4ce9c 100%    /* pastel sage / saguaro */
  );
  background-attachment: scroll;
  color: var(--fg);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ============================================================
   ATMOSPHERE DESCENT
   5 photographic layers stacked behind the post-hero content.
   Each layer fades top + bottom via mask-image, so layers
   overlap and blend through the seams. The body gradient
   shows through those fades and acts as color-glue.
   ============================================================ */
.atmosphere {
  position: absolute;
  top: 100vh;     /* starts where hero ends */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;    /* behind all content, above body's painted gradient */
  pointer-events: none;
  overflow: hidden;
}
/* Readability dim — intensifies through the brighter lower zones
   (stratosphere gold, troposphere sunset, desert) so white body
   copy keeps contrast without killing the image's character. */
.atmosphere::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.10)  0%,   /* cosmic frames — light touch */
    rgba(0, 0, 0, 0.25) 25%,
    rgba(0, 0, 0, 0.40) 50%,   /* stratosphere brightness */
    rgba(0, 0, 0, 0.55) 75%,   /* troposphere sunset */
    rgba(0, 0, 0, 0.65) 100%   /* desert — deeper so white text reads on the photo */
  );
  pointer-events: none;
  z-index: 1;
}
.atmo-layer {
  position: absolute;
  left: 0;
  right: 0;
  height: 28%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
/* Order = descent narrative, not strict atmospheric altitude.
   Starry-cosmos frame first so the planet *comes into view* on the next
   frame instead of disappearing back to deep space. */
.atmo-1 {
  top: -6%;
  background-image: url('/assets/atmosphere/02-mesosphere.jpg');
  /* Continuous fade-in — the next starfield resolves smoothly out of the hero's
     own stars instead of waiting out a long black void. Pulled up (top: -6%) and
     given a single ramp (no flat-transparent hold) so stars emerge sooner. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 38%, #000 82%, transparent 100%);
}
.atmo-2 { top: 18%; background-image: url('/assets/atmosphere/01-thermosphere.jpg'); }
.atmo-3 { top: 38%; background-image: url('/assets/atmosphere/03-stratosphere.jpg'); }
.atmo-4 { top: 56%; background-image: url('/assets/atmosphere/04-troposphere.jpg'); }
.atmo-5 { top: 74%; background-image: url('/assets/atmosphere/05-desert.jpg'); }

a { color: inherit; text-decoration: none; }

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  background: #000;
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.08);
  user-select: none;
  -webkit-user-drag: none;
}

/* Twinkle layer — small additive glints over the universe image.
   Animates only opacity + transform → stays on the GPU compositor. */
.hero-twinkle {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.twink {
  position: absolute;
  left: var(--x);
  top:  var(--y);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 8px  rgba(255,255,255,1),
    0 0 20px rgba(255,235,200,0.70),
    0 0 38px rgba(255,210,150,0.42);
  opacity: 0.05;
  animation: twinkle 2.6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes twinkle {
  0%, 100% { opacity: 0.05; transform: translate(-50%,-50%) scale(0.45); }
  50%      { opacity: 1;    transform: translate(-50%,-50%) scale(1.5);  }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.hero-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 220px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 50%, #000 100%);
  pointer-events: none;
}
.mark-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: markPulse 3s ease-in-out infinite;
}
.nav-name {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
}
.nav-link {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: color 0.2s ease;
}
.nav-link:hover { color: rgba(255, 255, 255, 0.95); }
.nav-dot { color: rgba(255, 255, 255, 0.25); font-size: 10px; }

/* ---------- Center headline ---------- */
.hero-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 4;
  padding: 0 40px;
}

.headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.6vw, 12px);
  font-family: 'Fraunces', Georgia, serif;
  color: #fff;
}
.headline-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.32em;
}

.head {
  font-size: clamp(44px, 6vw, 96px);
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: rgba(255, 255, 255, 0.96);
}
.head.italic {
  font-style: italic;
  color: rgba(255, 255, 255, 0.88);
}

/* word reveal */
.reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  filter: blur(4px);
  transition:
    opacity 1.4s var(--ease-out-expo),
    transform 1.4s var(--ease-out-expo),
    filter 1.4s ease-out;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.subline {
  margin-top: clamp(28px, 4vw, 52px);
  font-size: clamp(13px, 0.95vw, 15px);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  opacity: 0;
  transition: opacity 1s ease-out;
}
.subline.in { opacity: 1; }

/* ---------- Bottom bar ---------- */
.hero-bottom {
  position: absolute;
  bottom: 36px; left: 56px; right: 56px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  z-index: 5;
  opacity: 0;
  transition: opacity 1.2s ease-out 200ms;
}
.hero-bottom.in { opacity: 1; }

.ident-block { display: flex; flex-direction: column; gap: 4px; }
.ident-line { display: flex; align-items: center; gap: 8px; }
.ident-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.7);
}
.ident-label {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}
.ident-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.05em;
  padding-left: 14px;
}

.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  justify-self: center;
}
.scroll-label {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.scroll-line {
  width: 1px; height: 46px;
  background: rgba(255, 255, 255, 0.18);
  position: relative;
  overflow: hidden;
}
.scroll-dot {
  position: absolute;
  left: -1px; top: 0;
  width: 3px; height: 12px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.85);
  animation: scrollDot 2.4s ease-in-out infinite;
}

.book-cue {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.book-cue:hover { transform: translateX(4px); }
.book-text {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}
.book-arrow {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

/* ============================================================
   SHARED PRIMITIVES — rim, italic accent
   ============================================================ */

.rim {
  position: relative;
  padding: 1.4px;
  border-radius: 22px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.30) 0%,
    rgba(255,255,255,0.06) 30%,
    rgba(255,255,255,0.01) 55%,
    rgba(255,255,255,0.10) 85%,
    rgba(255,255,255,0.28) 100%
  );
}

/* ============================================================
   ABOUT SECTION
   ============================================================ */

.about {
  position: relative;
  width: 100%;
  background: transparent; /* lets the body gradient show through */
  color: #fff;
  overflow: hidden;
}

/* ---------- Section-shade utilities ----------
   Reusable overlays that keep section seams invisible.
   All three target the same opacity (0.30) so wherever sections meet,
   the dark levels match by construction.

   - .section-shade-top    — section's top is dark, fades out by middle
   - .section-shade-bottom — section's top is clear, darkens by bottom
   - .section-shade-band   — clear → dark middle → clear (whole-section readability)

   Convention: pre-darken at the BOTTOM of the section above a seam, and
   pair with a section-shade-top (or band) below. The two halves of the
   handoff meet at matching darkness, hiding the seam.
*/
.section-shade-top,
.section-shade-bottom,
.section-shade-band {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.section-shade-top {
  background: linear-gradient(180deg,
    rgba(0,0,0,0.30) 0%,
    rgba(0,0,0,0.30) 30%,
    rgba(0,0,0,0.0) 100%
  );
}
.section-shade-bottom {
  background: linear-gradient(180deg,
    rgba(0,0,0,0.0) 0%,
    rgba(0,0,0,0.30) 70%,
    rgba(0,0,0,0.30) 100%
  );
}
.section-shade-band {
  background: linear-gradient(180deg,
    rgba(0,0,0,0.0) 0%,
    rgba(0,0,0,0.30) 18%,
    rgba(0,0,0,0.30) 82%,
    rgba(0,0,0,0.0) 100%
  );
}

/* About uses the band shape — kept as its own selector so the existing markup works */
.about-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.0)  0%,
    rgba(0,0,0,0.30) 18%,
    rgba(0,0,0,0.30) 82%,
    rgba(0,0,0,0.0) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* ---------- Stat numbers (shared with /products/ pages) ---------- */
.stat-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 68px;
  line-height: 1;
  color: #fff;
  letter-spacing: -2.5px;
  margin-bottom: 10px;
}
.stat-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

/* ---------- Book row ---------- */
.book-eyebrow {
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 20px;
  text-align: center;
}
.book-heading {
  font-family: 'Inter', sans-serif;
  font-size: 64px;
  font-weight: 500;
  letter-spacing: -2.4px;
  line-height: 1.02;
  color: #fff;
  text-align: center;
  margin-bottom: 56px;
}
.book-heading em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -1.5px;
}
.book-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 16px;
  align-items: stretch;
}

/* Calendar */
.cal-rim { border-radius: 22px; }
.cal-shell {
  background: rgba(255,255,255,0.008);
  border-radius: 21px;
  padding: 28px 32px 24px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.10);
}
.cal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.cal-label {
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 6px;
}
.cal-title {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.3px;
}
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 100px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  font-size: 9.5px;
  letter-spacing: 2px;
  font-weight: 600;
  color: #fff;
}
.live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 6px rgba(74,222,128,0.8);
}
.cal-month {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.cal-month-lbl {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: #fff;
}
.cal-arrow {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.025);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.cal-days, .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-days { margin-bottom: 6px; }
.cal-day-head {
  text-align: center;
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.35);
  padding: 4px 0;
}
.cal-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.3);
  border-radius: 6px;
}
.cal-cell.avail {
  color: #fff;
  font-weight: 500;
  background: rgba(255,255,255,0.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  cursor: pointer;
}
.cal-cell.selected {
  background: #fff;
  color: #000;
  font-weight: 600;
  box-shadow: none;
}
.cal-times {
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.cal-times-lbl {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 10px;
}
.cal-time-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.cal-time {
  padding: 8px 4px;
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  font-size: 11px;
  color: #fff;
  text-align: center;
  cursor: pointer;
}
.cal-time.selected {
  background: #fff;
  color: #000;
  font-weight: 600;
  box-shadow: none;
}
.cal-confirm {
  margin-top: 16px;
  width: 100%;
  padding: 14px 20px;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.cal-confirm:hover { transform: translateY(-1px); }

/* Contact column */
.contact-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: rgba(255,255,255,0.015);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), inset 0 1px 1px rgba(255,255,255,0.06);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.contact-row:hover {
  background: rgba(255,255,255,0.03);
  transform: translateX(2px);
}
.contact-ico {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), inset 0 1px 1px rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
}
.contact-body { flex: 1; }
.contact-lbl {
  font-size: 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 3px;
}
.contact-val {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: #fff;
}
.contact-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  margin-top: 2px;
}
.contact-arrow {
  font-size: 16px;
  color: rgba(255,255,255,0.4);
}

.response-card {
  padding: 24px 22px;
  background: rgba(255,255,255,0.02);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), inset 0 1px 1px rgba(255,255,255,0.08);
  border-radius: 14px;
  margin-top: 4px;
}
.response-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -1.8px;
  color: #fff;
  margin-bottom: 4px;
}
.response-unit {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 18px;
  font-weight: 500;
  margin-left: 4px;
  color: rgba(255,255,255,0.55);
}
.response-lbl {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 10px;
}
.response-sub {
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-2);
}
.response-sub em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
}

.social-footer {
  margin-top: 4px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.015);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), inset 0 1px 1px rgba(255,255,255,0.06);
  border-radius: 14px;
}
.social-footer-lbl {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.social-footer-row { display: flex; gap: 8px; }
.social-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.02);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), inset 0 1px 1px rgba(255,255,255,0.10);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #fff;
  cursor: pointer;
}
.social-btn:hover { background: rgba(255,255,255,0.06); }

/* ---------- Book row + stats responsive ---------- */
@media (max-width: 1100px) {
  .book-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .book-heading { font-size: 44px; }
  .stat-num { font-size: 52px; }
}

/* ============================================================
   PRODUCTS — 8-card glass grid + featured All-in-One sun card
   Sits in the upper-dark zone of the body gradient (black → navy).
   Section is transparent; band overlay improves card legibility.
   ============================================================ */

.products {
  position: relative;
  background: transparent;
  overflow: hidden;
  padding: 140px 0 160px;
}

.products-container {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}

/* ---------- Header ---------- */
.products-head { text-align: center; margin-bottom: 72px; }

.products-eyebrow {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.products-headline {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(44px, 5.6vw, 72px);
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: #fff;
  margin-bottom: 20px;
}
.products-headline em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.022em;
  color: #fff;
}
.products-sub {
  font-size: 16px;
  color: #a6a6a6;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto;
}

/* ---------- 8-card grid ---------- */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 120px;
  position: relative;
  z-index: 1;
}

/* ---------- Loan cards · Robinhood-style: solid, restrained, typography-led ---------- */
.prod-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.prod-card {
  position: relative;
  border-radius: 18px;
  padding: 32px 30px;
  min-height: 260px;
  background: rgba(8, 14, 30, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition:
    transform 0.3s var(--ease-out-expo),
    border-color 0.3s var(--ease-out-expo),
    background 0.3s var(--ease-out-expo),
    box-shadow 0.3s var(--ease-out-expo);
}
.prod-card:hover {
  transform: translateY(-4px);
  background: rgba(10, 20, 40, 0.7);
  border-color: rgba(74, 222, 128, 0.32);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.35),
    0 0 28px rgba(74, 222, 128, 0.08);
}

/* Old decorative overlays — disabled in the new flat treatment. */
.prod-card-glass { display: contents; }
.prod-card-spec,
.prod-card-refraction,
.prod-card-shimmer { display: none; }

/* Top row: index number left, tag right */
.prod-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}
.prod-card-idx {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.35);
}
.prod-card-tag {
  padding: 4px 10px;
  background: rgba(74, 222, 128, 0.10);
  border-radius: 100px;
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.22);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--accent-green);
  font-weight: 600;
}

/* Body: big name + 2-line description */
.prod-card-body { flex: 1; display: flex; flex-direction: column; }
.prod-card-name {
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.022em;
  margin-bottom: 12px;
  line-height: 1.05;
}
.prod-card-desc {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 24px;
}

/* Foot: stat + small arrow. Hairline separator. */
.prod-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.prod-card-statwrap { flex: 1; min-width: 0; }
.prod-card-stat {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #fff;
  letter-spacing: -0.018em;
  line-height: 1.1;
  white-space: nowrap;
}
.prod-card-statlbl {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 3px;
}
.prod-card-arrow {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.25s, transform 0.25s;
  flex-shrink: 0;
  width: auto; height: auto;
  background: none;
  box-shadow: none;
}
.prod-card:hover .prod-card-arrow {
  color: var(--accent-green);
  transform: translateX(4px);
}

/* Foot CTA below the grid: "Don't see your situation?" */
.products-foot {
  margin-top: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}
.products-foot a {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 1px;
  transition: border-color 0.2s, color 0.2s;
}
.products-foot a:hover {
  color: var(--accent-green);
  border-bottom-color: var(--accent-green);
}
.products-foot-arrow { display: inline-block; transition: transform 0.2s; }
.products-foot a:hover .products-foot-arrow { transform: translateX(3px); }

/* ---------- Featured · All-in-One Sun ---------- */
.featured-loan {
  position: relative;
  margin-top: 100px;
  margin-bottom: 40px;
  cursor: pointer;
}

/* Static corona — vivid backdrop glow behind the card.
   Radial gradient gives a soft falloff without needing a blur filter. */
.featured-corona {
  position: absolute;
  left: 12%; top: 50%;
  transform: translate(-50%, -50%);
  width: 640px; height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,225,150,0.55) 0%,
    rgba(255,180,80,0.28)  35%,
    rgba(255,130,40,0.10)  60%,
    transparent 78%
  );
  pointer-events: none;
}

/* Gold gradient rim card */
.featured-card {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.6px;
  border-radius: 24px;
  background: linear-gradient(180deg,
    #fff0b8 0%,
    #ffd271 25%,
    #ffb03a 50%,
    #ffd271 75%,
    #fff0b8 100%
  );
  transition: transform 0.35s ease;
}
.featured-loan:hover .featured-card { transform: translateY(-4px); }

.featured-inner {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  min-height: 280px;
  background: radial-gradient(ellipse 70% 140% at 0% 50%,
    #ffe9a8 0%,
    #ffc867 28%,
    #ff9f3a 58%,
    #e57a1a 90%
  );
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
}

/* Sun on the left */
.featured-sun-wrap {
  position: relative;
  height: 100%;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.featured-sun {
  position: relative;
  width: 240px; height: 240px;
  margin-left: -40px;
  transition: transform 0.5s ease;
}
.featured-loan:hover .featured-sun { transform: scale(1.04) rotate(8deg); }

/* Static sun — vivid color, no motion. Outer halo via box-shadow,
   inner gradient amped for pop. */
.sun-core {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%,
    #ffffff   0%,
    #fff3c0  14%,
    #ffd166  38%,
    #ff8a1f  68%,
    #b8530f 100%
  );
  box-shadow:
    inset 0 0 60px rgba(255,240,180,0.85),
    0 0 60px  rgba(255,180,80,0.60),
    0 0 140px rgba(255,140,40,0.35);
}
.sun-highlight {
  position: absolute;
  top: 24%; left: 26%;
  width: 30%; height: 30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,240,0.85) 0%, transparent 70%);
  filter: blur(3px);
}

/* Featured content (right side) */
.featured-content {
  position: relative;
  z-index: 2;
  padding: 40px 48px 40px 20px;
}
.featured-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.featured-pill {
  padding: 4px 11px;
  background: rgba(120,50,0,0.15);
  box-shadow: inset 0 0 0 1px rgba(120,50,0,0.30);
  border-radius: 100px;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: #4a2608;
  font-weight: 700;
}
.featured-meta-sub {
  font-size: 10.5px;
  color: rgba(80,35,5,0.7);
  letter-spacing: 0.15em;
  font-weight: 600;
}
.featured-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 500;
  letter-spacing: -1.8px;
  line-height: 1.02;
  color: #fffbed;
  margin-bottom: 12px;
  text-shadow: 0 2px 20px rgba(120,50,0,0.35);
}
.featured-title em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -1.4px;
  color: #fff3c8;
}
.featured-desc {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(80,35,5,0.82);
  max-width: 520px;
  margin-bottom: 24px;
}

.featured-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
  padding: 18px 0;
  border-top: 1px solid rgba(120,60,10,0.25);
  border-bottom: 1px solid rgba(120,60,10,0.25);
}
.featured-stat { flex: 1; }
.featured-stat-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 26px;
  color: #fffbed;
  line-height: 1;
  letter-spacing: -0.5px;
  text-shadow: 0 1px 8px rgba(120,50,0,0.30);
}
.featured-stat-lbl {
  font-size: 10px;
  color: rgba(80,35,5,0.7);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: 6px;
}
.featured-stat-div {
  width: 1px;
  height: 28px;
  background: rgba(120,60,10,0.25);
}

.featured-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.featured-cta-primary {
  display: inline-flex;
  align-items: center;
  padding: 14px 26px;
  background: linear-gradient(180deg, #fffbed 0%, #ffe199 100%);
  color: #4a2608;
  border: none;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  cursor: pointer;
  text-decoration: none;
  box-shadow:
    0 0 0 1px rgba(255,220,150,0.6),
    0 4px 20px rgba(255,180,80,0.35);
  transition: box-shadow 0.3s ease;
}
.featured-loan:hover .featured-cta-primary {
  box-shadow:
    0 0 0 1px rgba(255,220,150,0.7),
    0 6px 30px rgba(255,180,80,0.6),
    0 0 80px rgba(255,180,80,0.4);
}
.featured-cta-secondary {
  display: inline-flex;
  align-items: center;
  padding: 14px 22px;
  background: transparent;
  color: #fffbed;
  border: none;
  border-radius: 100px;
  box-shadow: inset 0 0 0 1px rgba(255,245,200,0.5);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  cursor: pointer;
  text-decoration: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .products { padding: 100px 0 120px; }
  .products-container { padding: 0 24px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-inner { grid-template-columns: 1fr; }
  .featured-sun-wrap { min-height: 200px; }
  .featured-sun { margin-left: 0; width: 180px; height: 180px; }
  .featured-content { padding: 8px 28px 36px; }
  .featured-corona { left: 50%; width: 460px; height: 460px; }
  .featured-stats { gap: 14px; }
}
@media (max-width: 480px) {
  .products-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER — the Arizona landing
   ============================================================ */
.footer {
  position: relative;
  padding: 140px 48px 80px;
  text-align: center;
  background: transparent; /* sits in pastel zone of body gradient */
  color: rgba(50, 35, 22, 0.9);
}
.footer-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.footer-mark {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.32em;
  color: rgba(255, 255, 255, 0.92);
}
.footer-tag {
  font-family: 'Inter', sans-serif;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.3;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  max-width: 540px;
}
.footer-tag em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  letter-spacing: -1px;
  color: #ffd271;  /* gold-2 — warm italic accent on dim desert photo */
}
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 12px;
}
.footer-sep { color: rgba(255, 255, 255, 0.45); }
.footer-fineprint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.06em;
  margin-top: 8px;
}
/* brand close — the signature line, giant, as the last thing on the page */
.footer-way {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(42px, 8.6vw, 150px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #b86e3f;
  text-align: center;
  white-space: nowrap;
  margin-top: clamp(48px, 6.5vw, 92px);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes scrollDot {
  0%   { transform: translateY(-12px); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(46px); opacity: 0; }
}

@keyframes markPulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .hero-bottom {
    bottom: 24px; left: 24px; right: 24px;
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: center;
  }
  .scroll-cue, .book-cue { justify-self: center; }
  .ident-meta { padding-left: 0; }
  .nav-links { display: none; }
}

/* ============================================================
   PRODUCT PAGES — single dark backdrop, dense reading layout
   Active when <body class="product">. Overrides homepage descent.
   ============================================================ */

body.product {
  /* The Khamis Team brand palette (from .ad-machine/config.json), scoped to
     product pages so the rest of the dark site is untouched. The Robinhood
     STRUCTURE — color-blocking, flat cards, pills — in Drake's own colors.
     --accent is the copper default; per-loan classes below override it. */
  --cream: #f4efe6;
  --cream-deep: #ece4d6;
  --ink: #0e1e33;            /* deep navy — text + dark bands */
  --ink-soft: #6e6a5f;       /* warm muted — secondary text */
  --ink-line: rgba(14, 30, 51, 0.13);
  --card: #ffffff;
  --accent: #b86e3f;         /* copper */
  --accent-ink: #8a4e2a;     /* copper deepened for small text on cream */
  --forest: #2f4a37;
  --brick: #a33a2d;
  background: var(--cream);
  min-height: 100vh;
  color: var(--ink);
  padding-top: 58px;   /* clear the fixed unified nav (sticky-nav.njk) */
}
/* Per-loan accents (set via eleventyComputed bodyClass in product.njk) */
body.accent-copper { --accent: #b86e3f; --accent-ink: #8a4e2a; }
body.accent-forest { --accent: #2f4a37; --accent-ink: #2a4332; }
body.accent-brick  { --accent: #a33a2d; --accent-ink: #8e3227; }
/* ============================================================
   PRODUCT PAGE (pp-*) — Cream "Robinhood" theme: cream surface,
   near-black ink, one loud green, flat white cards, bold Inter,
   pill CTAs. Tokens scoped on body.product. The honesty block is
   a dark ink band punctuating the cream. One template (product.njk)
   restyles all 8 loan pages.
   ============================================================ */
.pp { width: 100%; }

/* Full-bleed colour bands — each section is a solid panel; a centred
   inner container holds the content. Rhythm: cream → white → cream →
   ink → white → green → ink (funnel + footer carry the last two). */
.pp-band { padding: 76px 0; }
.pp-in { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
.pp-band-cream { background: var(--cream); }
.pp-band-white { background: var(--card); }
.pp-band-ink { background: var(--ink); color: rgba(255, 255, 255, 0.66); }
.pp-band-ink .pp-eb { color: rgba(244, 239, 230, 0.62); }

/* Signature section · per-loan accent band (sits right after the hero) */
.pp-band-accent { background: var(--accent); color: rgba(255, 255, 255, 0.86); }
.pp-band-accent .pp-eb { color: rgba(255, 255, 255, 0.78); }
.pp-signature-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 3.8vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: #fff;
  max-width: 20ch;
  margin-bottom: 16px;
}
.pp-signature-title em { font-style: normal; color: var(--cream); }
.pp-signature-body {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  max-width: 60ch;
  margin-bottom: 30px;
}
.pp-signature-body em { font-style: normal; font-weight: 700; color: #fff; }
.pp-signature-figs { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 52px); }
.pp-sig-fig-v {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
}
.pp-sig-fig-k {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 10px;
}

.pp-eb {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 16px;
}

/* ---------- Hero ---------- */
.pp-hero.pp-band { padding-top: 52px; padding-bottom: 84px; }
.pp-title {
  /* emotional lines are serif (Fraunces) — functional UI stays bold Inter */
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(52px, 8vw, 100px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 22px;
}
.pp-title em { font-style: normal; color: var(--accent-ink); }
.pp-tag {
  font-size: 19px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink-soft);
  max-width: 660px;
  margin-bottom: 34px;
}
.pp-tag em { font-style: normal; font-weight: 700; color: var(--ink); }

/* hero CTA pills */
.pp-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 52px; }
.pp-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 0.15s ease, box-shadow 0.2s, background 0.2s, color 0.2s;
}
.pp-pill-solid { background: var(--ink); color: #fff; }
.pp-pill-solid:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -12px rgba(12, 12, 11, 0.5);
}
.pp-pill-ghost { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pp-pill-ghost:hover { background: var(--ink); color: #fff; }

/* stat cards */
.pp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.pp-stat {
  background: var(--card);
  border: 1px solid var(--ink-line);
  border-radius: 20px;
  box-shadow: 0 20px 48px -34px rgba(12, 12, 11, 0.45);
  padding: 26px 26px 24px;
}
.pp-stat-num {
  /* the number is the artwork — giant figure in the loan's accent */
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(54px, 4.6vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-ink);
}
.pp-stat-num span {
  font-size: 0.42em;
  font-weight: 400;
  color: var(--accent-ink);
  opacity: 0.75;
  margin-left: 3px;
}
.pp-stat-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 12px;
}

/* ---------- Section heads ---------- */
.pp-section-head { margin-bottom: 28px; }
.pp-section-h {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--ink);
}

/* ---------- The structure · flat spec sheet (rows sit on the white band) ---------- */
.pp-mrow {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  padding: 22px 0;
  border-top: 1px solid var(--ink-line);
}
.pp-mrow:first-child { border-top: none; }
.pp-mrow dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-ink);
  padding-top: 2px;
}
.pp-mrow dd {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.pp-mrow dd em { font-style: normal; font-weight: 700; color: var(--ink); }

/* ---------- Qualifying · requirement grid ---------- */
.pp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.pp-qcard {
  background: var(--card);
  border: 1px solid var(--ink-line);
  border-radius: 20px;
  box-shadow: 0 20px 48px -36px rgba(12, 12, 11, 0.4);
  padding: 24px 24px 26px;
  transition: transform 0.15s ease, box-shadow 0.2s;
}
.pp-qcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 56px -34px rgba(12, 12, 11, 0.5);
}
.pp-qcard dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 12px;
}
.pp-qcard dd {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.pp-qcard dd em { font-style: normal; font-weight: 700; color: var(--ink); }

/* ---------- Program spectrum · profile cards (any product with a `programs` key) ----------
   Each card = a borrower's own phrase (serif, quoted) + the number as the artwork.
   Feature card spans the row; the universal panel closes the grid full-width. */
.pp-programs-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: -8px 0 30px;
}
.pp-programs-lede em { font-style: normal; font-weight: 700; color: var(--ink); }
.pp-pgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.pp-pcard {
  background: var(--card);
  border: 1px solid var(--ink-line);
  border-radius: 20px;
  box-shadow: 0 20px 48px -36px rgba(12, 12, 11, 0.4);
  padding: 26px 26px 28px;
  transition: transform 0.15s ease, box-shadow 0.2s;
}
.pp-pcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 56px -34px rgba(12, 12, 11, 0.5);
}
.pp-pcard-feature { grid-column: 1 / -1; }
.pp-pcard-quote {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 18px;
}
.pp-pcard-num {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(44px, 4vw, 60px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-ink);
}
.pp-pcard-numlbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 10px 0 14px;
}
.pp-pcard-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.pp-pcard-body em { font-style: normal; font-weight: 700; color: var(--ink); }
.pp-puniversal {
  grid-column: 1 / -1;
  background: var(--cream-deep);
  border: 1px solid var(--ink-line);
  border-radius: 20px;
  padding: 24px 26px 26px;
}
.pp-puniversal-k {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 12px;
}

/* ---------- Straight talk · content on the ink band ---------- */
.pp-honesty-line {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(24px, 3.1vw, 36px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: #fff;
  max-width: 800px;
}
.pp-honesty-note {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
  max-width: 660px;
}

/* ---------- FAQ — stacked, full visibility ---------- */
.pp-faq { display: flex; flex-direction: column; }
/* Collapsed <details> accordions. The "See more" affordance lives in a CSS
   pseudo-element so summary.textContent stays the clean question — that text
   is what the FAQOpen pixel event reports. */
.pp-faq-item {
  padding: 26px 0;
  border-top: 1px solid var(--ink-line);
}
.pp-faq-item:first-child { border-top: none; padding-top: 0; }
.pp-faq-q {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  list-style: none;
}
.pp-faq-q::-webkit-details-marker { display: none; }
.pp-faq-q::after {
  /* Bare down-arrow: the answer drops in place — nothing navigates away.
     Flips via rotation so open/close reads as one control. */
  content: '▾';
  flex: none;
  font-size: 22px;
  line-height: 1;
  color: var(--accent-ink);
  transition: transform 0.18s ease;
}
.pp-faq-item[open] .pp-faq-q::after { transform: rotate(180deg); }
.pp-faq-q:hover::after { color: var(--ink); }
.pp-faq-a {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 720px;
  padding-top: 10px;
}

/* ---------- Ask me directly · GREEN action band (funnel) ---------- */
body.product .funnel { background: var(--accent); }
body.product .funnel-inner {
  border: none;
  background: transparent;
  box-shadow: none;
}
body.product .funnel-eb { color: rgba(255, 255, 255, 0.74); }
body.product .funnel-h { font-family: 'Fraunces', Georgia, serif; color: #fff; font-weight: 400; letter-spacing: -0.015em; }
body.product .funnel-h em {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--cream);
}
body.product .funnel-body { color: rgba(255, 255, 255, 0.9); }
body.product .funnel-row { border-top-color: rgba(255, 255, 255, 0.32); }
body.product .funnel-lbl { color: rgba(255, 255, 255, 0.78); }
body.product .funnel-val { color: #fff; }
body.product .funnel-row:hover .funnel-val { color: var(--cream); }

/* ---------- Footer · BLACK band ---------- */
body.product .footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.6);
  padding-top: 80px;
}
body.product .footer-mark { color: #fff; }
body.product .footer-tag { color: #fff; }
body.product .footer-tag em {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #cc8e5e; /* light copper — reads on navy for every accent */
}
body.product .footer-meta { color: rgba(255, 255, 255, 0.6); }
body.product .footer-sep { color: rgba(255, 255, 255, 0.28); }
body.product .footer-fineprint { color: rgba(255, 255, 255, 0.45); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .pp-stats { grid-template-columns: 1fr 1fr; }
  .pp-grid { grid-template-columns: 1fr; }
  .pp-pgrid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .pp-in { padding: 0 20px; }
  .pp-band { padding: 56px 0; }
  .pp-hero.pp-band { padding-top: 36px; padding-bottom: 56px; }
  .pp-title { font-size: clamp(40px, 12vw, 60px); }
  .pp-tag { font-size: 17px; }
  .pp-stats { grid-template-columns: 1fr; }
  .pp-mrow { grid-template-columns: 1fr; gap: 8px; }
}

/* ============================================================
   INSIGHTS — index, essay, video. Shares the dark backdrop with
   product pages via body.insights joining the same selector.
   ============================================================ */

body.insights {
  background:
    radial-gradient(ellipse at 50% 0%, #0a1633 0%, #050913 55%, #03060d 100%);
  min-height: 100vh;
  color: #fff;
}

/* ---------- Index ---------- */
.ins {
  max-width: 880px;
  margin: 0 auto;
  padding: 80px 40px 120px;
}

.ins-hero {
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 56px;
}
.ins-eyebrow {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 24px;
}
.ins-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-size: clamp(56px, 8vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 28px;
}
.ins-title em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: var(--accent-green);
}
.ins-tag {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-width: 600px;
}

/* ---------- Single post / video ---------- */
.ins-post {
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 40px 120px;
}

.ins-post-head { margin-bottom: 48px; }
.ins-post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 24px;
}
.ins-post-type { color: var(--accent-green); }
.ins-post-dot { color: rgba(255, 255, 255, 0.3); }
.ins-post-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-size: clamp(38px, 5.5vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: #fff;
  margin-bottom: 20px;
}
.ins-post-title em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--accent-green);
}
.ins-post-summary {
  font-size: 19px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 28px;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  letter-spacing: -0.005em;
}
.ins-post-author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}
.ins-author-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
}

/* ---------- Video embed (and placeholder) ---------- */
.ins-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  margin-bottom: 48px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.ins-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.ins-video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background:
    radial-gradient(ellipse at center, #0a1633 0%, #050913 80%);
  color: rgba(255, 255, 255, 0.65);
}
.ins-video-play {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  padding-left: 4px; /* optical center for the triangle */
}
.ins-video-msg { text-align: center; }
.ins-video-msg-1 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 6px;
}
.ins-video-msg-2 {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
}
.ins-video-msg-2 code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- Post body (Markdown-rendered) ---------- */
.ins-post-body {
  font-size: 17px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.85);
}
.ins-post-body p { margin-bottom: 1.4em; }
.ins-post-body em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: #fff;
  letter-spacing: -0.005em;
}
.ins-post-body strong {
  color: #fff;
  font-weight: 600;
}
.ins-post-body h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 56px 0 18px;
  line-height: 1.2;
}
.ins-post-body h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin: 36px 0 12px;
}
.ins-post-body ul, .ins-post-body ol {
  padding-left: 1.4em;
  margin: 0 0 1.4em;
}
.ins-post-body li { margin-bottom: 0.6em; }
.ins-post-body a {
  color: var(--accent-green);
  border-bottom: 1px solid rgba(74, 222, 128, 0.4);
  transition: border-color 0.2s;
}
.ins-post-body a:hover { border-color: var(--accent-green); }
.ins-post-body blockquote {
  border-left: 2px solid rgba(74, 222, 128, 0.5);
  padding-left: 20px;
  margin: 1.4em 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: rgba(255, 255, 255, 0.78);
}
.ins-post-body code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.9em;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ---------- Post footer ---------- */
.ins-post-foot {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ins-back {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s;
}
.ins-back:hover { color: var(--accent-green); }

/* ============================================================
   ESSAY — the cream reading page. insight.njk sets bodyClass
   "product essay": `product` brings the cream tokens, copper
   funnel and navy footer the loan pages already own; this block
   recolors the dark .ins-* reading layer to match, so index →
   essay is one continuous world. series.njk stays on the dark
   `insights` skin (its fate is a separate decision).
   ============================================================ */
body.essay { background: var(--cream); }
body.essay .ins-post-meta { color: rgba(14, 30, 51, 0.55); }
body.essay .ins-post-type { color: var(--accent-ink); }
body.essay .ins-post-dot { color: rgba(14, 30, 51, 0.3); }
body.essay .ins-post-title { font-weight: 400; color: var(--ink); }
body.essay .ins-post-title em {
  font-family: 'Fraunces', Georgia, serif;
  font-style: normal;
  color: var(--accent-ink);
}
body.essay .ins-post-summary { color: rgba(14, 30, 51, 0.68); }
body.essay .ins-post-author { color: rgba(14, 30, 51, 0.58); }
body.essay .ins-author-dot { background: var(--accent); box-shadow: none; }
body.essay .ins-video-wrap { box-shadow: 0 18px 44px rgba(14, 30, 51, 0.22); }
body.essay .ins-post-body { color: rgba(14, 30, 51, 0.88); }
body.essay .ins-post-body em { color: var(--ink); }
body.essay .ins-post-body strong { color: var(--ink); font-weight: 700; }
body.essay .ins-post-body h2 { color: var(--ink); }
body.essay .ins-post-body h3 { color: rgba(14, 30, 51, 0.6); }
body.essay .ins-post-body a { color: var(--accent-ink); border-bottom-color: rgba(184, 110, 63, 0.45); }
body.essay .ins-post-body a:hover { border-color: var(--accent); }
body.essay .ins-post-body blockquote { border-left-color: rgba(184, 110, 63, 0.55); color: rgba(14, 30, 51, 0.7); }
body.essay .ins-post-body code { background: rgba(14, 30, 51, 0.07); color: var(--ink); }
body.essay .ins-post-foot { border-top-color: var(--ink-line); }
body.essay .ins-back { color: rgba(14, 30, 51, 0.55); }
body.essay .ins-back:hover { color: var(--accent-ink); }
/* Series-chapter chrome, for the day a chapter renders on cream */
body.essay .ins-chapter-banner { background: rgba(184, 110, 63, 0.1); }
body.essay .ins-chapter-banner:hover { background: rgba(184, 110, 63, 0.16); }
body.essay .ins-chapter-banner-eb { color: var(--accent-ink); }
body.essay .ins-chapter-banner-title { color: var(--ink); }
body.essay .ins-chapter-banner-pos { color: rgba(14, 30, 51, 0.55); }
body.essay .ins-chapter-nav-eb { color: var(--accent-ink); }
body.essay .ins-chapter-nav-title { color: var(--ink); }
body.essay .ins-chapter-nav-contents { color: rgba(14, 30, 51, 0.6); }

/* ---------- Homepage Insights hook ---------- */
.home-insights {
  position: relative;
  padding: 100px 0 40px;
  background: transparent;
}
.home-insights-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 48px;
}
.home-insights-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(40, 25, 15, 0.18);
}
.home-insights-eb {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(40, 25, 15, 0.55);
}
.home-insights-h {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.018em;
  color: rgba(40, 25, 15, 0.92);
}
.home-insights-h em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: rgba(70, 40, 20, 0.95);
}
.home-insights-all {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(40, 25, 15, 0.65);
}
.home-insights-all:hover { color: rgba(40, 25, 15, 0.95); }

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
  .ins { padding: 56px 20px 80px; }
  .ins-post { padding: 56px 20px 80px; }
  .ins-post-body h2 { font-size: 22px; }
  .home-insights-inner { padding: 0 24px; }
  .home-insights-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ============================================================
   INSIGHTS — tabs (All · Essays · Videos)
   ============================================================ */
.ins-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 32px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 100px;
  width: fit-content;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.ins-tab {
  padding: 8px 18px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  border-radius: 100px;
  transition: background 0.2s, color 0.2s;
}
.ins-tab:hover { color: #fff; }
.ins-tab.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}


/* ============================================================
   INSIGHTS — Series (index, landing, chapter nav, in-post banner)
   ============================================================ */

/* ---------- Series index — list of series cards ---------- */
.ins-series-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ins-series-card {
  display: grid;
  grid-template-columns: 80px 1fr 24px;
  gap: 24px;
  align-items: start;
  padding: 28px 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  color: inherit;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.ins-series-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}
.ins-series-card:hover .ins-series-arrow {
  color: var(--accent-green);
  transform: translateX(4px);
}
.ins-series-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -1px;
  color: rgba(255, 255, 255, 0.32);
  padding-top: 4px;
}
.ins-series-meta {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-green);
  margin-bottom: 10px;
}
.ins-series-title {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 10px;
}
.ins-series-summary {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  max-width: 600px;
}
.ins-series-arrow {
  align-self: center;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.25s, color 0.25s;
}

/* ---------- Series landing — hero + table of contents ---------- */
.ins-series-hero { padding-bottom: 40px; }
.ins-series-product {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding: 12px 20px;
  border-radius: 100px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #03060d;
  background: var(--accent-green);
  font-weight: 600;
  transition: transform 0.2s, box-shadow 0.2s;
}
.ins-series-product:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(74, 222, 128, 0.35);
}
.ins-series-product span { font-size: 14px; }

.ins-toc {
  display: flex;
  flex-direction: column;
}
.ins-toc-head {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 12px;
  padding-left: 4px;
}
.ins-toc-row {
  display: grid;
  grid-template-columns: 48px 1fr 80px;
  gap: 24px;
  align-items: start;
  padding: 22px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: inherit;
  text-decoration: none;
  transition: background 0.2s, padding 0.2s;
}
.ins-toc-row:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.ins-toc-row:hover {
  background: rgba(255, 255, 255, 0.03);
  padding-left: 12px;
  padding-right: 12px;
}
.ins-toc-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.5px;
  color: rgba(255, 255, 255, 0.45);
  padding-top: 2px;
}
.ins-toc-row:hover .ins-toc-num { color: var(--accent-green); }
.ins-toc-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: #fff;
  margin-bottom: 6px;
}
.ins-toc-summary {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
  max-width: 580px;
}
.ins-toc-meta {
  align-self: center;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  text-align: right;
}

/* ---------- Chapter banner (top of every series chapter) ---------- */
.ins-chapter-banner {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  margin-bottom: 32px;
  border-radius: 100px;
  background: rgba(74, 222, 128, 0.08);
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.20);
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.2s;
}
.ins-chapter-banner:hover { background: rgba(74, 222, 128, 0.14); }
.ins-chapter-banner-eb { color: var(--accent-green); font-weight: 600; }
.ins-chapter-banner-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #fff;
}
.ins-chapter-banner-pos { color: rgba(255, 255, 255, 0.55); }

/* ---------- Chapter nav (bottom prev/contents/next) ---------- */
.ins-chapter-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: stretch;
  margin-top: 64px;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ins-chapter-nav-cell { min-height: 56px; }
.ins-chapter-nav-prev a,
.ins-chapter-nav-next a {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s;
}
.ins-chapter-nav-next { text-align: right; }
.ins-chapter-nav-prev a:hover,
.ins-chapter-nav-next a:hover { opacity: 0.7; }
.ins-chapter-nav-eb {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-green);
  margin-bottom: 6px;
}
.ins-chapter-nav-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.25;
  color: #fff;
  letter-spacing: -0.005em;
}
.ins-chapter-nav-contents {
  align-self: center;
  padding: 10px 18px;
  border-radius: 100px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: background 0.2s, color 0.2s;
}
.ins-chapter-nav-contents:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

@media (max-width: 700px) {
  .ins-series-card { grid-template-columns: 56px 1fr; }
  .ins-series-arrow { display: none; }
  .ins-toc-row { grid-template-columns: 32px 1fr; }
  .ins-toc-meta { display: none; }
  .ins-chapter-nav { grid-template-columns: 1fr; gap: 16px; }
  .ins-chapter-nav-next { text-align: left; }
  .ins-chapter-nav-contents { justify-self: start; }
}

/* ============================================================
   SERIES — single long-form page with TOC + next-series CTA
   ============================================================ */

.series {
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 40px 120px;
}

/* ---------- Header ---------- */
.series-head {
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 48px;
}
.series-eb {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 24px;
}
.series-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 24px;
}
.series-title em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: var(--accent-green);
}
.series-summary {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 21px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 28px;
}
.series-product {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #03060d;
  background: var(--accent-green);
  transition: transform 0.2s, box-shadow 0.2s;
}
.series-product:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(74, 222, 128, 0.35);
}
.series-product span { font-size: 14px; }

/* ---------- Table of contents ---------- */
.series-toc {
  margin-bottom: 64px;
  padding: 28px 32px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.series-toc-head {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 16px;
}
.series-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.series-toc-list li {
  margin: 0;
}
.series-toc-list a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.15s, transform 0.15s;
}
.series-toc-list li:first-child a { border-top: none; }
.series-toc-list a:hover {
  color: var(--accent-green);
  transform: translateX(2px);
}
.series-toc-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: -0.5px;
  width: 28px;
  flex-shrink: 0;
}
.series-toc-list a:hover .series-toc-num { color: var(--accent-green); }
.series-toc-name {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  letter-spacing: -0.005em;
  line-height: 1.35;
}

/* ---------- Body (Markdown-rendered) ---------- */
.series-body {
  font-size: 17px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.85);
}
.series-body p { margin-bottom: 1.4em; }
.series-body em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: #fff;
  letter-spacing: -0.005em;
}
.series-body strong { color: #fff; font-weight: 600; }

/* H2 = section header. Generous top margin so each section feels like its own
   landing zone after smooth-scroll. */
.series-body h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: #fff;
  margin: 96px 0 24px;
  padding-top: 24px;
  scroll-margin-top: 80px; /* clear the sticky nav when jumping via #anchor */
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* The first H2 doesn't need its own divider — the TOC above is the divider */
.series-body > h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }

.series-body h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.005em;
  color: #fff;
  margin: 40px 0 14px;
  scroll-margin-top: 80px;
}

.series-body ul, .series-body ol {
  padding-left: 1.4em;
  margin: 0 0 1.4em;
}
.series-body li { margin-bottom: 0.6em; }

.series-body a {
  color: var(--accent-green);
  border-bottom: 1px solid rgba(74, 222, 128, 0.4);
  transition: border-color 0.2s;
}
.series-body a:hover { border-color: var(--accent-green); }

.series-body blockquote {
  border-left: 2px solid rgba(74, 222, 128, 0.5);
  padding-left: 20px;
  margin: 1.4em 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: rgba(255, 255, 255, 0.78);
}
.series-body code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.9em;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ---------- Up next: link to the next series ---------- */
.series-next {
  display: block;
  margin-top: 96px;
  padding: 32px;
  border-radius: 14px;
  background: rgba(74, 222, 128, 0.06);
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.18);
  color: inherit;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.series-next:hover {
  background: rgba(74, 222, 128, 0.10);
  transform: translateY(-2px);
}
.series-next-eb {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-green);
  margin-bottom: 12px;
}
.series-next-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 8px;
}
.series-next-title span { color: var(--accent-green); }
.series-next-summary {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
}

.series-foot {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---------- Insights index — library + loose pieces ---------- */
.ins-library { margin-bottom: 80px; }
.ins-library-head,
.ins-loose-head { margin-bottom: 16px; }
.ins-library-head {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  padding-left: 4px;
}
.ins-loose {
  margin-top: 64px;
  padding-top: 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ins-loose-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.ins-loose-note {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 700px) {
  .series { padding: 56px 20px 80px; }
  .series-toc { padding: 22px 20px; }
  .series-body h2 { margin-top: 64px; font-size: 28px; }
  .series-next { padding: 24px; }
}

/* ============================================================
   APPETIZER SECTIONS — Robinhood-style scroll reveals
   Each section is one offering. Two-column on desktop:
   text on the left, visual or stat block on the right.
   The body gradient flows through; sections are transparent.
   ============================================================ */

.appz {
  position: relative;
  min-height: 85vh;
  padding: 80px 48px;
  background: transparent;
  display: flex;
  align-items: center;
}

.appz-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.appz-text { display: flex; flex-direction: column; }

.appz-eb {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 24px;
}
.appz-h {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 72px);
  letter-spacing: -0.028em;
  line-height: 1.02;
  color: #fff;
  margin-bottom: 28px;
}
.appz-h em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.018em;
  color: var(--accent-green);
}
.appz-tag {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 36px;
  max-width: 540px;
}
.appz-tag em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: #fff;
  letter-spacing: -0.005em;
}

/* ---------- Down Payment: stat grid visual ---------- */
.appz-stat-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.appz-stat-grid .appz-stat {
  padding: 28px 32px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: background 0.2s, transform 0.2s;
}
.appz-stat-grid .appz-stat:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateX(6px);
}
.appz-stat-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -1.2px;
  color: #fff;
  margin-bottom: 10px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.appz-stat-unit {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0;
}
.appz-stat-lbl {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* ---------- Refi Watch: dashboard mock visual ---------- */
.appz-mock {
  padding: 32px;
  border-radius: 18px;
  background: rgba(10, 14, 28, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 24px 60px rgba(0, 0, 0, 0.45);
}
.appz-mock-head {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 22px;
}
.appz-mock-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 0;
}
.appz-mock-lbl {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}
.appz-mock-val {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 28px;
  letter-spacing: -0.5px;
  color: #fff;
  line-height: 1;
}
.appz-mock-target { color: var(--accent-green); }
.appz-mock-savings {
  color: var(--accent-green);
  font-size: 32px;
}
.appz-mock-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 8px 0;
}
.appz-mock-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
}
.appz-mock-dot {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
  animation: appzPulse 2.4s ease-in-out infinite;
}
.appz-mock-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.appz-mock-dot.checking::after {
  animation: appzPing 1.2s ease-out forwards;
}
@keyframes appzPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
@keyframes appzPing {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
  100% { box-shadow: 0 0 0 22px rgba(74, 222, 128, 0); }
}

/* ---------- All-In-One section: just hosts the existing featured-loan ---------- */
.appz-aio-section {
  min-height: 85vh;
  padding: 80px 48px;
  display: flex;
  align-items: center;
}
.appz-aio-section .featured-loan {
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .appz { padding: 100px 28px; }
  .appz-inner { grid-template-columns: 1fr; gap: 48px; }
  .appz-stat-num { font-size: 44px; }
  .appz-mock-val { font-size: 22px; }
  .appz-mock-savings { font-size: 26px; }
}

/* ============================================================
   "More about Drake" — link in slimmed homepage About
   ============================================================ */
.about-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding-bottom: 2px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  transition: color 0.2s, border-color 0.2s;
  align-self: flex-start;
}
.about-more:hover {
  color: var(--accent-green);
  border-bottom-color: var(--accent-green);
}
.about-more span { transition: transform 0.2s; }
.about-more:hover span { transform: translateX(3px); }

/* ============================================================
   CONTACT — own homepage section, the natural last stop
   Reuses .book-wrap markup and .about-container for layout.
   ============================================================ */
.contact-section {
  position: relative;
  padding: 80px 0;
  min-height: 85vh;
  display: flex;
  align-items: center;
}
.contact-section .about-container {
  width: 100%;
}
.contact-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.0)  0%,
    rgba(0,0,0,0.20) 18%,
    rgba(0,0,0,0.20) 82%,
    rgba(0,0,0,0.0) 100%
  );
  z-index: 0;
  pointer-events: none;
}
.contact-section .book-wrap { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .appz, .appz-aio-section, .contact-section { min-height: 0; }
}

/* ============================================================
   JUST BROWSING — inline payment calculator
   ============================================================ */
.calc {
  padding: 32px;
  border-radius: 18px;
  background: rgba(10, 14, 28, 0.78);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 24px 60px rgba(0, 0, 0, 0.45);
  font-family: 'Inter', sans-serif;
}
.calc-head { margin-bottom: 24px; }
.calc-eb {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 8px;
}
.calc-title {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.012em;
  color: #fff;
}
.calc-title em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: var(--accent-green);
}

.calc-fields { margin-bottom: 24px; }
.calc-field { margin-bottom: 18px; }
.calc-field-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.calc-lbl {
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.calc-val {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 20px;
  letter-spacing: -0.012em;
  color: #fff;
}
/* editable readout — drag the slider OR click the number and type */
.calc-val-input {
  width: 156px;
  padding: 6px 14px 7px;
  background: rgba(255, 255, 255, 0.03);
  border: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  text-align: right;
  outline: none;
  cursor: text;
  transition: box-shadow 0.15s, background 0.15s;
}
.calc-val-input--sm { width: 104px; }
.calc-val-input:hover {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}
.calc-val-input:focus { box-shadow: inset 0 0 0 1px var(--accent-green); }
.calc-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 2px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent-green);
  border: 2px solid #03060d;
  cursor: pointer;
  transition: transform 0.15s;
}
.calc-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.calc-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent-green);
  border: 2px solid #03060d;
  cursor: pointer;
}

.calc-terms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.calc-term {
  padding: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.03);
  border: none;
  border-radius: 100px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.calc-term:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }

/* monthly cost inputs — taxes / insurance / HOA */
.calc-costs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.calc-cost {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  transition: box-shadow 0.15s;
}
.calc-cost:focus-within { box-shadow: inset 0 0 0 1px var(--accent-green); }
.calc-cost-lbl {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  cursor: text;
}
.calc-cost-input {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  color: #fff;
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
}
@media (max-width: 700px) {
  .calc-costs { grid-template-columns: 1fr; }
  .calc-cost { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .calc-cost-input { width: auto; text-align: right; }
}
.calc-term.is-active {
  color: #03060d;
  background: var(--accent-green);
  box-shadow: none;
  font-weight: 600;
}

.calc-result {
  padding: 24px 0 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.calc-result-eb {
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
  margin-bottom: 8px;
}
.calc-result-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -1.5px;
  color: #fff;
  margin-bottom: 12px;
}
.calc-result-num span {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0;
  margin-left: 6px;
}
.calc-result-breakdown {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  flex-wrap: wrap;
}
.calc-result-sep { color: rgba(255, 255, 255, 0.3); }
.calc-foot {
  margin-top: 16px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}

/* ============================================================
   Big 3 — wider card row (overrides products-grid 4-col)
   ============================================================ */
.products-grid-3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px) {
  .products-grid-3 { grid-template-columns: 1fr; }
}

/* ============================================================
   Hero adjustment — push content down so the fixed nav
   doesn't cover the headline at top.
   ============================================================ */
.hero { padding-top: 56px; }

/* ============================================================
   BIG 3 — open divided columns, no card boxes
   FHA · VA · Conventional. Vertical hairlines between columns.
   ============================================================ */
.big3-section {
  position: relative;
  padding: 100px 0;
  background: transparent;
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.big3-head {
  text-align: center;
  margin-bottom: 56px;
  padding: 0 48px;
}
.big3-eb {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 18px;
}
.big3-h {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 68px);
  letter-spacing: -0.026em;
  line-height: 1.04;
  color: #fff;
}
.big3-h em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.018em;
  color: var(--accent-green);
}

.big3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
}
.big3-col {
  position: relative;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: background 0.25s var(--ease-out-expo);
}
.big3-col:hover { background: rgba(255, 255, 255, 0.03); }

/* Vertical hairline between columns. Fades top/bottom for editorial feel. */
.big3-col:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 12%;
  bottom: 12%;
  right: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 25%,
    rgba(255, 255, 255, 0.18) 75%,
    transparent 100%
  );
}

.big3-tag {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-green);
  margin-bottom: 20px;
}
.big3-name {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(48px, 4.5vw, 64px);
  line-height: 1;
  letter-spacing: -0.028em;
  color: #fff;
  margin-bottom: 24px;
}
.big3-stat {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.big3-stat-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 28px;
  letter-spacing: -0.5px;
  color: #fff;
  line-height: 1;
}
.big3-stat-lbl {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.big3-desc {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
  margin-bottom: 24px;
  flex: 1;
}
.big3-link {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  transition: color 0.2s, transform 0.2s;
}
.big3-link span { transition: transform 0.2s; }
.big3-col:hover .big3-link { color: var(--accent-green); }
.big3-col:hover .big3-link span { transform: translateX(4px); }

.big3-foot {
  margin-top: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  padding: 0 48px;
}
.big3-foot a {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 1px;
  transition: border-color 0.2s, color 0.2s;
}
.big3-foot a:hover {
  color: var(--accent-green);
  border-bottom-color: var(--accent-green);
}
.big3-foot-arrow { display: inline-block; transition: transform 0.2s; }
.big3-foot a:hover .big3-foot-arrow { transform: translateX(3px); }

@media (max-width: 900px) {
  .big3 { grid-template-columns: 1fr; padding: 0 24px; }
  .big3-col { padding: 32px 0; }
  .big3-col:not(:last-child)::after {
    top: auto;
    bottom: 0;
    left: 12%;
    right: 12%;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.18) 25%,
      rgba(255, 255, 255, 0.18) 75%,
      transparent 100%
    );
  }
  .big3-section { padding: 60px 0; }
  .big3-head { padding: 0 24px; margin-bottom: 32px; }
  .big3-name { font-size: 44px; }
}

/* ============================================================
   SPLIT SECTION — 2-column divided layout (text + tap target)
   Same hairline-divider aesthetic as Big 3.
   ============================================================ */
.split-section {
  position: relative;
  padding: 100px 0;
  background: transparent;
  min-height: 85vh;
  display: flex;
  align-items: center;
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
}
.split-col {
  position: relative;
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: background 0.25s var(--ease-out-expo);
}
/* Vertical hairline between the 2 columns. */
.split-col:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 12%; bottom: 12%;
  right: 0; width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 25%,
    rgba(255, 255, 255, 0.18) 75%,
    transparent 100%
  );
}

.split-eb {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 24px;
}
/* Both sides use the same heading + italic-sub treatment for parity.
   Fraunces gives these major section headlines a more editorial feel
   that matches the hero's Fraunces headline. Sized to fit on one line
   in each column at desktop. */
.split-h,
.split-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-size: clamp(44px, 4.6vw, 64px);
  letter-spacing: -0.022em;
  line-height: 1;
  color: #fff;
  margin-bottom: 18px;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .split-h, .split-name { white-space: normal; }
}
.split-h em,
.split-name em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.018em;
  color: var(--accent-green);
}
.split-tag,
.split-sub {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.4;
  letter-spacing: -0.008em;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  max-width: 480px;
}
.split-sub em { color: #fff; font-style: italic; }
.split-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.split-list li {
  position: relative;
  padding: 12px 0 12px 24px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.78);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.split-list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.split-list li::before {
  content: '·';
  position: absolute;
  left: 6px; top: 12px;
  color: var(--accent-green);
  font-size: 16px;
  font-weight: 700;
}

/* Right column = tap target. Hover highlights to signal "tap me". */
.split-tap {
  align-items: flex-start;
  cursor: pointer;
  border-radius: 0;
}
.split-tap:hover {
  background: rgba(255, 255, 255, 0.03);
}
.split-tap:hover .split-tap-arrow { transform: translateX(6px); }
.split-tap:hover .split-tap-cta { color: var(--accent-green); }

/* (split-tap-name and split-tap-sub were merged into .split-name / .split-sub above.) */
.split-tap-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.25s;
}
.split-tap-arrow {
  display: inline-block;
  font-size: 16px;
  transition: transform 0.25s;
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; padding: 0 24px; }
  .split-col { padding: 32px 0; }
  .split-col:not(:last-child)::after {
    top: auto; bottom: 0;
    left: 12%; right: 12%;
    width: auto; height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.18) 25%,
      rgba(255, 255, 255, 0.18) 75%,
      transparent 100%
    );
  }
  .split-section { padding: 60px 0; min-height: 0; }
}

/* ============================================================
   /calculators/ page — full calculator layout
   ============================================================ */
.calc-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 80px 40px 120px;
}
.calc-page-head { margin-bottom: 64px; }
.calc-page-eb {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 24px;
}
.calc-page-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-size: clamp(56px, 8vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 24px;
}
.calc-page-title em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: var(--accent-green);
}
.calc-page-tag {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 21px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  max-width: 600px;
}

.calc-block { margin-bottom: 80px; }
.calc-block-head { margin-bottom: 32px; }
.calc-block-eb {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-green);
  margin-bottom: 12px;
}
.calc-block-h {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.022em;
  color: #fff;
  margin-bottom: 12px;
}
.calc-block-h em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--accent-green);
}
.calc-block-sub {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  max-width: 560px;
}

.calc-page-cta {
  text-align: center;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 700px) {
  .calc-page { padding: 56px 20px 80px; }
}

/* ============================================================
   Split preview — mini animated calculator (right column of #just-browsing)
   ============================================================ */
.split-preview {
  width: 100%;
  margin-bottom: 32px;
  font-family: 'Inter', sans-serif;
}
.split-preview-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  margin-top: 14px;
}
.split-preview-row:first-child { margin-top: 0; }
.split-preview-lbl {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.split-preview-val {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  letter-spacing: -0.012em;
  color: #fff;
  transition: opacity 0.5s ease;
}
.split-preview-bar {
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 2px;
  position: relative;
  overflow: visible;
}
.split-preview-fill {
  position: absolute;
  left: 0; top: -3px;
  width: 0;
  height: 8px;
  border-radius: 4px;
  background: var(--accent-green);
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.5);
  transition: width 0.9s var(--ease-out-expo);
}
.split-preview-result {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.split-preview-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(40px, 4.6vw, 56px);
  line-height: 1;
  letter-spacing: -1.2px;
  color: #fff;
  display: block;
  margin-bottom: 6px;
  transition: opacity 0.5s ease;
}
.split-preview-num span {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0;
  margin-left: 4px;
}
.split-preview-meta {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  display: block;
  transition: opacity 0.5s ease;
}

/* Soft fade-out class set by JS during transitions */
.split-preview.is-transitioning .split-preview-val,
.split-preview.is-transitioning .split-preview-num,
.split-preview.is-transitioning .split-preview-meta {
  opacity: 0.3;
}

/* ============================================================
   "Contact me to develop a plan" CTA — bottom of scenario list
   ============================================================ */
.split-list-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding-bottom: 2px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  align-self: flex-start;
  transition: color 0.2s, border-color 0.2s;
}
.split-list-cta:hover {
  color: var(--accent-green);
  border-bottom-color: var(--accent-green);
}
.split-list-cta span { font-size: 16px; transition: transform 0.2s; }
.split-list-cta:hover span { transform: translateX(4px); }

/* ============================================================
   PHILOSOPHY — editorial cold open between hero and just-browsing
   Portrait left, voice paragraph right.
   ============================================================ */
.philo {
  position: relative;
  padding: 72px 0 100px;
  background: transparent;
}
.philo-inner {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 80px;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}
.philo-portrait {
  position: relative;
  margin: 0;
  /* Thin green accent rule on the left edge — editorial flourish */
  padding-left: 20px;
  border-left: 2px solid var(--accent-green);
}
.philo-portrait > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.05);
  /* Subtle outer hairline instead of a heavy frame */
  outline: 1px solid rgba(255, 255, 255, 0.14);
  outline-offset: 0;
}
.philo-portrait-caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.philo-portrait-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}
.philo-portrait-meta {
  font-size: 11px;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.50);
}
.philo-text { max-width: 720px; }
.philo-h {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-size: clamp(56px, 6.4vw, 96px);
  letter-spacing: -0.026em;
  line-height: 0.98;
  color: #fff;
  margin-bottom: 32px;
}
.philo-h em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.018em;
  color: var(--accent-green);
}
.philo-body {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 32px;
}
.philo-body em {
  font-style: italic;
  color: var(--accent-green);
  letter-spacing: -0.005em;
}
.philo-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 2px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  transition: color 0.2s, border-color 0.2s;
}
.philo-more:hover {
  color: var(--accent-green);
  border-bottom-color: var(--accent-green);
}
.philo-more span { font-size: 16px; transition: transform 0.2s; }
.philo-more:hover span { transform: translateX(4px); }

@media (max-width: 900px) {
  .philo { padding: 60px 0; min-height: 0; }
  .philo-inner { grid-template-columns: 1fr; gap: 32px; padding: 0 24px; }
  .philo-portrait { max-width: 280px; }
  .philo-body { font-size: 21px; }
}

/* ============================================================
   Section break — thin horizontal hairline at the top of major
   homepage sections. Faded at edges, low contrast, doesn't break
   the body gradient. Just a visual cue that "you're in a new
   section now."
   ============================================================ */
.philo,
.split-section,
.big3-section,
#strike-rate.appz,
#about.about,
#contact.contact-section {
  position: relative;
}
/* ============================================================
   Auto-rotating scenario card (left of Mortgage Planning)
   ============================================================ */
.scenario-card {
  position: relative;
  display: block;
  margin-bottom: 24px;
  padding: 28px 56px 28px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  min-height: 168px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.2s;
}
.scenario-card:hover { background: rgba(255, 255, 255, 0.025); }
.scenario-card:hover .scenario-card-arrow {
  color: var(--accent-green);
  transform: translateY(-50%) translateX(6px);
}

/* Inner wrapper holds content that slides in from the left and out to the right. */
.scenario-card-inner {
  transition:
    transform 0.5s var(--ease-out-expo),
    opacity 0.4s ease;
}
.scenario-card.is-leaving .scenario-card-inner {
  transform: translateX(60px);
  opacity: 0;
}
.scenario-card.is-entering .scenario-card-inner {
  transform: translateX(-60px);
  opacity: 0;
  transition: none;  /* snap to entry pose without animation */
}

.scenario-card-tag {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-green);
  margin-bottom: 14px;
}
.scenario-card-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-size: clamp(28px, 2.8vw, 36px);
  letter-spacing: -0.018em;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 12px;
}
.scenario-card-desc {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  max-width: 520px;
}
.scenario-card-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.25s, transform 0.25s var(--ease-out-expo);
  pointer-events: none;
}

/* ============================================================
   /plan/{slug}/ — scenario page subtabs + body
   ============================================================ */
.plan-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 48px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 100px;
  width: fit-content;
  max-width: 100%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.plan-tab {
  padding: 10px 18px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  border-radius: 100px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.plan-tab:hover { color: #fff; }
.plan-tab.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

.plan-body {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  max-width: 720px;
}
.plan-body p { margin-bottom: 1.4em; }
.plan-body p:last-child { margin-bottom: 0; }

.plan-cta {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================================
   /plan/ — hub landing (Why develop a plan?)
   ============================================================ */
.plan-hub {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 48px 120px;
}

/* Hero */
.plan-hub-hero {
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 56px;
  text-align: center;
}
.plan-hub-eb {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 24px;
}
.plan-hub-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-size: clamp(56px, 7.4vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 28px;
}
.plan-hub-title em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: var(--accent-green);
}
.plan-hub-tag {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.78);
  max-width: 640px;
  margin: 0 auto;
}

/* Voice paragraph */
.plan-hub-voice {
  max-width: 720px;
  margin: 0 auto 80px;
  padding: 32px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.plan-hub-voice p {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
}
.plan-hub-voice em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: var(--accent-green);
  letter-spacing: -0.005em;
}

/* Three action cards */
.plan-hub-actions { margin-bottom: 80px; }
.plan-hub-actions-head {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 20px;
  text-align: center;
}
.plan-hub-action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.plan-hub-action {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  text-decoration: none;
  color: inherit;
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.plan-hub-action:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.30);
}
.plan-hub-action:hover .plan-hub-action-cta {
  color: var(--accent-green);
}
.plan-hub-action:hover .plan-hub-action-cta span {
  transform: translateX(4px);
}
.plan-hub-action-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 28px;
  letter-spacing: -1px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 16px;
  line-height: 1;
}
.plan-hub-action:hover .plan-hub-action-num { color: var(--accent-green); }
.plan-hub-action-name {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.018em;
  color: #fff;
  margin-bottom: 12px;
}
.plan-hub-action-desc {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 20px;
  flex: 1;
}
.plan-hub-action-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.plan-hub-action-cta span { transition: transform 0.25s; }

/* Section heads (scenarios + insights) */
.plan-hub-section-head { margin-bottom: 32px; padding-top: 24px; }
.plan-hub-section-eb {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 12px;
}
.plan-hub-section-h {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 36px;
  letter-spacing: -0.022em;
  line-height: 1.05;
  color: #fff;
}
.plan-hub-section-h em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--accent-green);
}

.plan-hub-scenarios { margin-bottom: 80px; }
.plan-hub-insights { margin-bottom: 24px; }
.plan-hub-insights-foot {
  margin-top: 32px;
  text-align: right;
}
.plan-hub-insights-foot a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.20);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.plan-hub-insights-foot a:hover {
  color: var(--accent-green);
  border-bottom-color: var(--accent-green);
}

@media (max-width: 900px) {
  .plan-hub { padding: 56px 24px 80px; }
  .plan-hub-action-grid { grid-template-columns: 1fr; }
  .plan-hub-voice { margin: 0 0 48px; padding: 24px 0; }
}

/* ============================================================
   /plan/ — divided action columns (replaces boxed cards)
   Same _|_|_ aesthetic as the Big 3 section.
   ============================================================ */
.plan-actions {
  margin-bottom: 96px;
  padding-top: 32px;
}
.plan-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
  margin: 0 auto;
}
.plan-action-col {
  position: relative;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: background 0.25s var(--ease-out-expo);
}
.plan-action-col:hover {
  background: rgba(255, 255, 255, 0.03);
}
.plan-action-col:hover .plan-action-cta {
  color: var(--accent-green);
}
.plan-action-col:hover .plan-action-cta span {
  transform: translateX(4px);
}
/* Vertical hairline between columns. Fades top/bottom for editorial feel. */
.plan-action-col:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 12%;
  bottom: 12%;
  right: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 25%,
    rgba(255, 255, 255, 0.18) 75%,
    transparent 100%
  );
}
.plan-action-tag {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-green);
  margin-bottom: 18px;
}
.plan-action-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-size: clamp(28px, 2.8vw, 36px);
  letter-spacing: -0.018em;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 16px;
}
.plan-action-desc {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 24px;
  flex: 1;
}
.plan-action-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.25s;
  align-self: flex-start;
}
.plan-action-cta span { transition: transform 0.25s; }

/* ============================================================
   /plan/ — callback form (footer of plan + every scenario)
   ============================================================ */
.plan-callback {
  margin-top: 80px;
  padding-top: 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.plan-callback-head { margin-bottom: 32px; }
.plan-callback-eb {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-green);
  margin-bottom: 14px;
}
.plan-callback-h {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: #fff;
  margin-bottom: 20px;
}
.plan-callback-h em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: var(--accent-green);
}
.plan-callback-tag {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 680px;
}
.plan-callback-tag a {
  color: var(--accent-green);
  border-bottom: 1px solid rgba(74, 222, 128, 0.4);
  transition: border-color 0.2s;
}
.plan-callback-tag a:hover { border-bottom-color: var(--accent-green); }

/* The form itself: input + button on one line */
.plan-callback-form {
  display: flex;
  align-items: stretch;
  gap: 12px;
  max-width: 540px;
  margin-top: 16px;
}
.plan-callback-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan-callback-lbl {
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.plan-callback-form input[type="tel"] {
  width: 100%;
  padding: 14px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.plan-callback-form input[type="tel"]::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.plan-callback-form input[type="tel"]:focus {
  border-color: var(--accent-green);
  background: rgba(74, 222, 128, 0.04);
}
.plan-callback-btn {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #03060d;
  background: var(--accent-green);
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.plan-callback-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(74, 222, 128, 0.35);
}
.plan-callback-btn:hover .plan-callback-arrow {
  transform: translateX(4px);
}
.plan-callback-arrow {
  transition: transform 0.25s;
  font-size: 14px;
}
.plan-callback-success {
  margin-top: 16px;
  padding: 16px 20px;
  font-size: 14px;
  background: rgba(74, 222, 128, 0.08);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(74, 222, 128, 0.30);
}

@media (max-width: 700px) {
  .plan-actions-grid { grid-template-columns: 1fr; }
  .plan-action-col { padding: 24px 0; }
  .plan-action-col:not(:last-child)::after {
    top: auto;
    bottom: 0;
    left: 12%;
    right: 12%;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.18) 25%,
      rgba(255, 255, 255, 0.18) 75%,
      transparent 100%
    );
  }
  .plan-callback-form { flex-direction: column; align-items: stretch; }
  .plan-callback-btn { align-self: stretch; justify-content: center; }
}

/* ============================================================
   /plan/ — tabbed FAQ section
   Pill tabs at top, scenario Q&A below. Tab switching toggles panels.
   ============================================================ */
.plan-faq { margin-bottom: 56px; }

.plan-faq-tag {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
  max-width: 600px;
  margin-bottom: 28px;
}

.plan-faq-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 32px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 100px;
  width: fit-content;
  max-width: 100%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.plan-faq-tab {
  font-family: 'Inter', sans-serif;
  padding: 10px 18px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  background: transparent;
  border: none;
  border-radius: 100px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.plan-faq-tab:hover { color: #fff; }
.plan-faq-tab.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

/* Panels — only the active one shows. */
.plan-faq-panel { display: none; }
.plan-faq-panel.is-active { display: block; }

.plan-faq-summary {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  max-width: 720px;
}

/* Q&A — stacked, fully visible (no accordion). */
.plan-faq-item {
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  max-width: 760px;
}
.plan-faq-item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.plan-faq-q {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: #fff;
  margin-bottom: 12px;
}
.plan-faq-a {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}

/* Single-scenario page: no tabs, just the Q&A list directly */
.plan-faq-single .plan-faq-panel {
  display: block;  /* always visible since there's only one */
}

@media (max-width: 700px) {
  .plan-faq-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .plan-faq-tab { flex-shrink: 0; }
}

/* ============================================================
   LOAN CAROUSEL — three cards visible, shifts left every cycle.
   Leftmost slides off, middle moves left, right moves middle,
   new card slides in from right.
   ============================================================ */
.loan-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
}
.loan-carousel-track {
  display: flex;
  transition: transform 0.7s var(--ease-out-expo);
  will-change: transform;
}
.loan-carousel-card {
  flex: 0 0 calc(100% / 3);
  position: relative;
  padding: 36px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: background 0.25s;
}
.loan-carousel-card:hover { background: rgba(255, 255, 255, 0.025); }
.loan-carousel-card:hover .loan-carousel-arrow {
  color: var(--accent-green);
  transform: translateX(6px);
}
.loan-carousel-card::after {
  content: '';
  position: absolute;
  top: 12%;
  bottom: 12%;
  right: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 25%,
    rgba(255, 255, 255, 0.18) 75%,
    transparent 100%
  );
}
.loan-carousel-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 14px;
}
.loan-carousel-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -0.022em;
  line-height: 1.02;
  color: #fff;
  margin-bottom: 20px;
}
.loan-carousel-stat {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.loan-carousel-stat-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.5px;
  color: #fff;
  line-height: 1;
}
.loan-carousel-stat-lbl {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.loan-carousel-desc {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.66);
  flex: 1;
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.loan-carousel-arrow {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.25s, transform 0.25s var(--ease-out-expo);
  align-self: flex-start;
}

@media (max-width: 900px) {
  .loan-carousel { padding: 0 24px; }
  .loan-carousel-card { flex: 0 0 calc(100% / 2); padding: 28px 24px; }
}
@media (max-width: 600px) {
  .loan-carousel-card { flex: 0 0 100%; padding: 24px 20px; }
  .loan-carousel-card::after { display: none; }
}

/* ============================================================
   LOAN ROTATOR — legacy single rotating card (replaced by carousel above)
   Kept for compatibility if any other place still uses it.
   ============================================================ */
.loan-rotator {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px;
}
.loan-rotator-card {
  position: relative;
  display: block;
  padding: 56px 80px 56px 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: background 0.25s var(--ease-out-expo);
}
.loan-rotator-card:hover {
  background: rgba(255, 255, 255, 0.025);
}
.loan-rotator-card:hover .loan-rotator-arrow {
  color: var(--accent-green);
  transform: translateY(-50%) translateX(8px);
}

.loan-rotator-inner {
  transition:
    transform 0.5s var(--ease-out-expo),
    opacity 0.4s ease;
}
.loan-rotator-card.is-leaving .loan-rotator-inner {
  transform: translateX(60px);
  opacity: 0;
}
.loan-rotator-card.is-entering .loan-rotator-inner {
  transform: translateX(-60px);
  opacity: 0;
  transition: none;
}

.loan-rotator-tag {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-green);
  margin-bottom: 18px;
}
.loan-rotator-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.024em;
  color: #fff;
  margin-bottom: 24px;
}
.loan-rotator-stat {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.loan-rotator-stat-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 36px;
  letter-spacing: -0.5px;
  color: #fff;
  line-height: 1;
}
.loan-rotator-stat-lbl {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.loan-rotator-desc {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-width: 720px;
}
.loan-rotator-arrow {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.25s, transform 0.25s var(--ease-out-expo);
  pointer-events: none;
}

@media (max-width: 700px) {
  .loan-rotator { padding: 0 24px; }
  .loan-rotator-card { padding: 32px 56px 32px 28px; min-height: 240px; }
  .loan-rotator-arrow { right: 16px; }
}

/* ============================================================
   /faq/ foot — "Still not finding it? Contact me"
   ============================================================ */
.faq-foot {
  margin-top: 80px;
  padding: 56px 0 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.faq-foot-line {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.012em;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 24px;
}
.faq-foot-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #03060d;
  background: var(--accent-green);
  border-radius: 100px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.faq-foot-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(74, 222, 128, 0.35);
}
.faq-foot-cta span { font-size: 16px; transition: transform 0.2s; }
.faq-foot-cta:hover span { transform: translateX(4px); }

/* ============================================================
   /contact/ page — full redesign
   Editorial hero · contact form · 3 direct columns · personal promise
   ============================================================ */
.contact-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 80px 48px 120px;
}

/* Hero */
.contact-page-hero {
  text-align: center;
  margin-bottom: 64px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.contact-page-eb {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 24px;
}
.contact-page-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-size: clamp(56px, 7.4vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 24px;
}
.contact-page-title em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: var(--accent-green);
}
.contact-page-tag {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.78);
  max-width: 600px;
  margin: 0 auto;
}
.contact-page-tag em { color: #fff; font-style: italic; }

/* Contact form */
.contact-form-wrap {
  max-width: 640px;
  margin: 0 auto 80px;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.contact-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-lbl {
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.contact-lbl-soft {
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
  margin-left: 4px;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  resize: vertical;
}
.contact-form textarea {
  font-family: 'Inter', sans-serif;
  line-height: 1.55;
  min-height: 120px;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.30);
  font-style: italic;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent-green);
  background: rgba(74, 222, 128, 0.04);
}
.contact-submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  margin-top: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #03060d;
  background: var(--accent-green);
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.contact-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(74, 222, 128, 0.35);
}
.contact-submit-arrow { font-size: 14px; transition: transform 0.2s; }
.contact-submit:hover .contact-submit-arrow { transform: translateX(4px); }

.contact-form-success {
  margin-top: 24px;
  padding: 18px 22px;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.30);
  border-radius: 12px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.92);
}

/* Three direct contact columns — divided _|_|_ pattern */
.contact-direct {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 80px;
  padding: 32px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.contact-direct-col {
  position: relative;
  padding: 16px 24px;
  text-decoration: none;
  color: inherit;
  transition: background 0.25s;
}
.contact-direct-col:not(.contact-direct-col-static):hover {
  background: rgba(255, 255, 255, 0.03);
}
.contact-direct-col:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 18%;
  bottom: 18%;
  right: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 25%,
    rgba(255, 255, 255, 0.18) 75%,
    transparent 100%
  );
}
.contact-direct-eb {
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--accent-green);
  margin-bottom: 10px;
}
.contact-direct-val {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.012em;
  color: #fff;
  margin-bottom: 6px;
  word-break: break-all;
}
.contact-direct-meta {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
}

/* Personal promise — portrait + voice */
.contact-promise {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 64px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.contact-promise-portrait {
  margin: 0;
  position: relative;
  padding-left: 16px;
  border-left: 2px solid var(--accent-green);
}
.contact-promise-portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  outline: 1px solid rgba(255, 255, 255, 0.14);
  filter: contrast(1.05) saturate(1.05);
}
.contact-promise-eb {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 18px;
}
.contact-promise-body {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 32px;
  max-width: 580px;
}
.contact-promise-body em { color: #fff; font-style: italic; }
.contact-promise-meta {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.contact-promise-stat {
  display: flex;
  flex-direction: column;
}
.contact-promise-stat-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 32px;
  letter-spacing: -0.5px;
  color: #fff;
  line-height: 1;
}
.contact-promise-stat-num span {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0;
  margin-left: 4px;
}
.contact-promise-stat-lbl {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 6px;
}
.contact-promise-divider {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, 0.12);
}

/* Social row */
.contact-social {
  text-align: center;
}
.contact-social-lbl {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 16px;
}
.contact-social-row {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.contact-social-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.contact-social-btn:hover {
  background: rgba(74, 222, 128, 0.10);
  color: var(--accent-green);
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.30);
}

@media (max-width: 800px) {
  .contact-page { padding: 56px 24px 80px; }
  .contact-form-row-2 { grid-template-columns: 1fr; }
  .contact-direct { grid-template-columns: 1fr; }
  .contact-direct-col { padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.06); }
  .contact-direct-col:first-child { border-top: none; }
  .contact-direct-col:not(:last-child)::after { display: none; }
  .contact-promise { grid-template-columns: 1fr; gap: 32px; }
  .contact-promise-portrait { max-width: 200px; }
}

/* ============================================================
   /contact/ page — calendar + 4-column row variant
   ============================================================ */
.contact-calendar {
  display: flex;
  justify-content: center;
  margin-bottom: 64px;
}
.contact-calendar .cal-rim {
  width: 100%;
  max-width: 540px;
}

/* 4-column variant of the divided contact row */
.contact-direct-4 {
  grid-template-columns: repeat(4, 1fr);
}
.contact-direct-col-social {
  padding: 16px 24px;
}
.contact-direct-social-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.contact-direct-col-social .contact-social-btn {
  width: 36px; height: 36px;
  font-size: 11px;
}

@media (max-width: 900px) {
  .contact-direct-4 { grid-template-columns: 1fr 1fr; }
  .contact-direct-4 .contact-direct-col:nth-child(2)::after { display: none; }
}
@media (max-width: 600px) {
  .contact-direct-4 { grid-template-columns: 1fr; }
  .contact-direct-4 .contact-direct-col::after { display: none; }
}

/* ============================================================
   /contact/ — quadrants on left + calendar on right
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 32px;
  align-items: start;
}

.contact-quads {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.contact-quad {
  position: relative;
  padding: 28px 28px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.2s;
}
.contact-quad:first-child { border-top: none; }
.contact-quad:not(.contact-quad-static):hover {
  background: rgba(255, 255, 255, 0.03);
}
.contact-quad-eb {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-green);
  margin-bottom: 12px;
}
.contact-quad-val {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.014em;
  color: #fff;
  margin-bottom: 6px;
  word-break: break-word;
}
.contact-quad-meta {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
}
.contact-quad-social {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.contact-quad-social .contact-social-btn {
  width: 38px; height: 38px;
  font-size: 11px;
}

@media (max-width: 800px) {
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   CLOSING — quiet contact moment before footer (sage zone)
   Vocabulary mirrors footer: warm charcoal text, gold-deep italic.
   ============================================================ */
.closing {
  position: relative;
  padding: 140px 48px 80px;
  background: transparent;
}
.closing-inner {
  max-width: 680px;
  margin: 0 auto;
}
.closing-eb {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 20px;
}
.closing-h {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.022em;
  line-height: 1.08;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 56px;
  max-width: 580px;
}
.closing-h em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.014em;
  color: #ffd271;  /* gold-2 — warm italic accent on dim desert photo */
}
.closing-rows {
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.closing-rows li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.closing-rows a {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  padding: 20px 4px;
  align-items: baseline;
  text-decoration: none;
  transition: padding 0.25s var(--ease-out-expo);
}
.closing-rows a:hover { padding-left: 12px; }
.closing-row-lbl {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}
.closing-row-val {
  font-size: 18px;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.95);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.closing-row-arrow {
  font-size: 14px;
  color: #ffd271;
  transition: transform 0.25s var(--ease-out-expo);
  display: inline-block;
}
.closing-rows a:hover .closing-row-arrow { transform: translateX(4px); }

@media (max-width: 720px) {
  .closing { padding: 100px 24px 60px; }
  .closing-h { margin-bottom: 40px; }
  .closing-rows a { grid-template-columns: 80px 1fr; gap: 16px; padding: 18px 4px; }
  .closing-row-val { font-size: 16px; }
}

/* ============================================================
   STRIKE RATE PAGE — /services/strike-rate/
   Dark-on-deep-charcoal page. Green accent earns the loudest
   typographic moments (the rate "hit", the strike number).
   ============================================================ */
body.strike {
  background:
    radial-gradient(ellipse at 50% -10%, #07140d 0%, #050913 55%, #03060d 100%);
  min-height: 100vh;
  color: #fff;
}
body.strike .footer {
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  padding-top: 100px;
}
body.strike .footer-mark { color: rgba(255, 255, 255, 0.85); }
body.strike .footer-tag { color: rgba(255, 255, 255, 0.78); }
body.strike .footer-tag em { color: #fff; }
body.strike .footer-meta,
body.strike .footer-fineprint { color: rgba(255, 255, 255, 0.45); }
body.strike .footer-sep { color: rgba(255, 255, 255, 0.25); }

.sr {
  position: relative;
  padding-top: 120px; /* clear sticky nav */
}
.sr-section-inner,
.sr-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px;
}
.sr-eb {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 18px;
}
.sr-h1 {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(44px, 5.8vw, 78px);
  letter-spacing: -0.028em;
  line-height: 1.02;
  color: #fff;
  margin-bottom: 28px;
}
.sr-h1 em,
.sr-h2 em,
.sr-cost-h em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.018em;
  color: var(--accent-green);
}
.sr-h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(36px, 4.6vw, 60px);
  letter-spacing: -0.024em;
  line-height: 1.06;
  color: #fff;
  margin-bottom: 36px;
}
.sr-tag {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 32px;
  max-width: 520px;
}
.sr-tag em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: #fff;
}
.sr-body {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  max-width: 640px;
  margin-top: 32px;
}
.sr-body em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: #fff;
  font-size: 1.1em;
}
.sr-body-close {
  font-size: 32px;
  line-height: 1;
  margin-top: 20px;
}
.sr-body-close em {
  color: var(--accent-green);
  font-size: 1em;
}

/* ----- HERO ----- */
.sr-hero { padding: 60px 0 80px; }
.sr-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.sr-cta-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #03060d;
  background: var(--accent-green);
  transition: transform 0.2s, box-shadow 0.2s;
}
.sr-cta-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(74, 222, 128, 0.30);
}
.sr-cta-pill span { font-size: 14px; }
.sr-hero-mock { display: flex; justify-content: center; }

/* ----- WATCH — narrated films on the strike page ----- */
.sr-watch { padding: 80px 0 20px; }
.sr-watch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 40px;
}
.sr-watch-card { margin: 0; }
.sr-watch-card video {
  display: block; width: 100%; height: auto;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 36px 72px -36px rgba(0, 0, 0, 0.6);
  background: #0a1424;
}
.sr-watch-card figcaption {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 14px; font-size: 16px;
}
.sr-watch-card figcaption b { color: #fff; font-weight: 700; }
.sr-watch-card figcaption span { color: rgba(255, 255, 255, 0.5); font-weight: 600; font-size: 13px; }
@media (max-width: 820px) { .sr-watch-grid { grid-template-columns: 1fr; } }

/* ----- SET YOUR STRIKE — the mechanism ----- */
.sr-set { padding: 90px 0 30px; }
.sr-set-card {
  margin-top: 40px;
  padding: 34px 36px 28px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.sr-set-fields { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px 26px; }
.sr-set-field { display: flex; flex-direction: column; gap: 10px; }
.sr-set-field .calc-val-input { width: 100%; text-align: left; }
.sr-set-out {
  margin-top: 26px;
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.85);
}
.sr-set-out [data-set-out="save"] { color: #46d27e; font-weight: 800; }
.sr-set-sep { color: rgba(255, 255, 255, 0.3); }
.sr-set-send { margin-top: 28px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sr-set-name {
  flex: 1; min-width: 220px; padding: 15px 18px; border-radius: 12px;
  background: transparent; border: none; outline: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: #fff; font: inherit; font-size: 15px;
  transition: box-shadow 0.15s;
}
.sr-set-name:focus { box-shadow: inset 0 0 0 1px rgba(240, 180, 106, 0.7); }
.sr-set-alt {
  font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, 0.75);
  text-decoration: underline; text-underline-offset: 4px;
}
.sr-set-alt:hover { color: #fff; }
.sr-set-fine { margin-top: 18px; font-size: 12.5px; font-style: italic; color: rgba(255, 255, 255, 0.5); }

/* ----- Hero card, live variant — the mock IS the mechanism ----- */
.appz-mock-live { width: 100%; max-width: 420px; }
.appz-mock-input {
  width: 45%; min-width: 0; padding: 2px 8px; margin: -2px -8px;
  background: transparent; border: none; outline: none; border-radius: 8px;
  text-align: right; font: inherit; font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-size: 28px; letter-spacing: -0.5px; line-height: 1; color: #fff;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.16);
  transition: box-shadow 0.15s, background 0.15s;
}
.appz-mock-input:hover { background: rgba(255, 255, 255, 0.04); }
.appz-mock-input:focus {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 -1px 0 rgba(240, 180, 106, 0.9);
}
.appz-mock-input.appz-mock-target { color: var(--accent-green); }

.appz-mock-capture { margin-top: 22px; display: grid; gap: 10px; }
.appz-mock-capture[hidden] { display: none; }
.appz-mock-field {
  width: 100%; padding: 13px 16px; border-radius: 11px;
  background: transparent; border: none; outline: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: #fff; font: inherit; font-size: 15px;
  transition: box-shadow 0.15s;
}
.appz-mock-field::placeholder { color: rgba(255, 255, 255, 0.35); }
.appz-mock-field:focus { box-shadow: inset 0 0 0 1px rgba(240, 180, 106, 0.7); }
.appz-mock-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 2px; padding: 14px 24px; border-radius: 100px; border: none; cursor: pointer;
  background: var(--accent-green); color: #03060d;
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  transition: transform 0.2s, box-shadow 0.2s;
}
.appz-mock-submit:hover { transform: translateY(-1px); }
.appz-mock-submit[disabled] { opacity: 0.6; cursor: default; transform: none; }
.appz-mock-submit span + span { font-size: 14px; }
.appz-mock-err { margin-top: 2px; font-size: 13px; font-weight: 600; color: #f2a09a; }
.appz-mock-done {
  margin-top: 20px; padding: 16px 18px; border-radius: 12px;
  background: rgba(70, 210, 126, 0.08);
  box-shadow: inset 0 0 0 1px rgba(70, 210, 126, 0.35);
  font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.85);
}
.appz-mock-done b { display: block; color: var(--accent-green); font-weight: 800; margin-bottom: 3px; }

/* Phone: the card fills the column, and the numbers shrink so a seven-figure
   balance still fits the value slot instead of clipping. */
@media (max-width: 880px) { .appz-mock-live { max-width: 100%; } }
@media (max-width: 520px) {
  .appz-mock-live { padding: 24px; }
  .appz-mock-live .appz-mock-val { font-size: 24px; }
  .appz-mock-live .appz-mock-savings { font-size: 27px; }
  .appz-mock-input { font-size: 24px; width: 56%; }
  .appz-mock-live .appz-mock-lbl { font-size: 12.5px; }
}

/* Capture form — present only when site.formEndpoint is set. */
.sr-set-form { margin-top: 30px; padding-top: 26px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.sr-set-form[hidden] { display: none; }
.sr-set-form-grid { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 18px 26px; }
.sr-set-input-wrap { display: flex; flex-direction: column; gap: 10px; }
.sr-set-input-lbl {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55); padding: 0;
}
.sr-set-input-lbl i { font-style: normal; text-transform: none; letter-spacing: 0; opacity: 0.6; font-weight: 600; }
.sr-set-input {
  width: 100%; padding: 15px 18px; border-radius: 12px;
  background: transparent; border: none; outline: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: #fff; font: inherit; font-size: 15px;
  transition: box-shadow 0.15s;
}
.sr-set-input::placeholder { color: rgba(255, 255, 255, 0.32); }
.sr-set-input:focus { box-shadow: inset 0 0 0 1px rgba(240, 180, 106, 0.7); }

.sr-set-pref { margin: 24px 0 0; padding: 0; border: none; }
.sr-set-pref-opts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.sr-set-pref-opt { position: relative; }
.sr-set-pref-opt input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.sr-set-pref-opt span {
  display: inline-block; padding: 11px 22px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.75); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: box-shadow 0.15s, color 0.15s, background 0.15s;
}
.sr-set-pref-opt input:checked + span {
  color: #12100e; background: #f0b46a; box-shadow: inset 0 0 0 1px #f0b46a;
}
.sr-set-pref-opt input:focus-visible + span { box-shadow: inset 0 0 0 2px rgba(240, 180, 106, 0.9); }

.sr-set-submit-row { margin-top: 28px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sr-set-submit {
  border: none; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
}
.sr-set-submit span { font-size: 12px; }
.sr-set-submit span + span { font-size: 14px; }
.sr-set-submit[disabled] { opacity: 0.6; cursor: default; }
.sr-set-err { margin-top: 16px; font-size: 14px; font-weight: 600; color: #f2a09a; }

.sr-set-done {
  margin-top: 30px; padding: 22px 24px; border-radius: 14px;
  background: rgba(70, 210, 126, 0.08);
  box-shadow: inset 0 0 0 1px rgba(70, 210, 126, 0.35);
  font-size: 15.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.85);
}
.sr-set-done b { display: block; color: #46d27e; font-weight: 800; margin-bottom: 4px; }

@media (max-width: 700px) {
  .sr-set-fields { grid-template-columns: 1fr; }
  .sr-set-send { align-items: stretch; flex-direction: column; }
  .sr-set-form-grid { grid-template-columns: 1fr; }
  .sr-set-submit-row { align-items: stretch; flex-direction: column; }
  .sr-set-submit { justify-content: center; }
}

/* ----- WHY SAME-DAY MATTERS ----- */
.sr-why { padding: 80px 0 100px; }
/* the rate-window film — one morning, animated */
.sr-film {
  margin: 44px 0 26px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 36px 72px -36px rgba(0, 0, 0, 0.6);
}
.sr-film video { display: block; width: 100%; height: auto; }
.sr-timeline {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  margin: 48px 0 16px;
  padding: 36px 28px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.sr-tl-cell { text-align: center; }
.sr-tl-time {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 12px;
}
.sr-tl-rate {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 10px;
}
.sr-tl-rate-hit {
  color: var(--accent-green);
  text-shadow: 0 0 24px rgba(74, 222, 128, 0.35);
}
.sr-tl-cap {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.sr-tl-cell-hit .sr-tl-cap { color: rgba(255, 255, 255, 0.85); }
.sr-tl-arrow {
  font-size: 22px;
  color: rgba(255, 255, 255, 0.35);
}
.sr-tl-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
  animation: appzPulse 2.4s ease-in-out infinite;
  display: inline-block;
}

/* ----- HOW IT WORKS ----- */
.sr-how { padding: 80px 0 100px; }
.sr-steps {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}
.sr-step {
  padding: 32px 28px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: background 0.25s, box-shadow 0.25s;
}
.sr-step:hover {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.30);
}
.sr-step-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 36px;
  color: var(--accent-green);
  margin-bottom: 14px;
}
.sr-step-name {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: #fff;
  margin-bottom: 10px;
}
.sr-step-body {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
}

/* ----- SAVINGS MATH ----- */
.sr-math { padding: 80px 0 100px; }
.sr-math-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  margin-top: 36px;
}
.sr-math-cell {
  padding: 36px 32px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.sr-math-cell-big {
  background: rgba(74, 222, 128, 0.05);
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.22);
}
.sr-math-num {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: -0.028em;
  line-height: 1;
  color: #fff;
  margin-bottom: 14px;
}
.sr-math-num span {
  font-size: 0.42em;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  margin-left: 4px;
}
.sr-math-num-big {
  font-size: clamp(64px, 8vw, 112px);
  color: var(--accent-green);
  text-shadow: 0 0 32px rgba(74, 222, 128, 0.30);
}
.sr-math-lbl {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* ----- WHAT IT COSTS ----- */
.sr-cost { padding: 80px 0 100px; }
.sr-cost-h {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(80px, 12vw, 180px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.18);
  margin: 24px 0 36px;
}
.sr-cost-h em {
  color: var(--accent-green);
  letter-spacing: -0.03em;
  font-size: 1em;
}

/* ----- FINAL CTA ----- */
.sr-final { padding: 60px 0 140px; }
.sr-final .sr-h2 { margin-bottom: 48px; }
body.strike .closing-rows {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  max-width: 640px;
}
body.strike .closing-rows li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
body.strike .closing-row-lbl { color: rgba(255, 255, 255, 0.5); }
body.strike .closing-row-val { color: rgba(255, 255, 255, 0.95); }
body.strike .closing-row-arrow { color: var(--accent-green); }

/* ----- Responsive ----- */
@media (max-width: 880px) {
  .sr-hero-inner,
  .sr-math-grid { grid-template-columns: 1fr; gap: 48px; }
  .sr-steps { grid-template-columns: 1fr; }
  .sr-timeline {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px 20px;
  }
  .sr-tl-arrow { transform: rotate(90deg); }
  .sr-section-inner,
  .sr-hero-inner { padding: 0 24px; }
}

/* Homepage: secondary "How it works" link next to the green Strike Rate CTA */
.appz-more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 6px 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  transition: color 0.2s, border-color 0.2s;
}
.appz-more:hover {
  color: var(--accent-green);
  border-color: var(--accent-green);
}
.appz-more span { font-size: 14px; }

/* ============================================================
   ALL-IN-ONE LANDING — /all-in-one/
   Dedicated marketing page. Forest-green ground, gold lettering.
   Hero → four colour-shifting benefit panels (each a data visual
   + Learn more into the mechanics series) → day-by-day calendar
   proof → terms → quiet CTA.
   ============================================================ */

body.aio {
  background: #081410;     /* forest ground, overrides body descent */
  color: var(--fg);
}

.aio {
  position: relative;
  z-index: 1;
}

.aio-section-eb {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: 18px;
}

/* ----- HERO ----- */
.aio-hero {
  padding: 290px 40px 120px;
  min-height: 92vh;
  display: flex;
  align-items: flex-start;
  position: relative;
  background-color: #03100a;
  background-image:
    radial-gradient(ellipse 88% 82% at 50% 48%, rgba(3, 16, 10, 0) 0%, rgba(3, 16, 10, 0.10) 55%, rgba(3, 16, 10, 0.58) 100%),
    url('/assets/forest-paint.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.aio-hero::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, transparent, rgba(255, 210, 113, 0.4));
}
.aio-hero-inner {
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
.aio-eb {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 32px;
}
.aio-h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-weight: 380;
  font-size: clamp(60px, 10.5vw, 152px);
  line-height: 0.98;
  letter-spacing: 0.035em;
  margin: 0 auto 26px;
  max-width: 920px;
  background: linear-gradient(176deg, #fff3c4 0%, #ffd271 40%, #f0a52e 78%, #d98b1e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter:
    drop-shadow(0 3px 14px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 44px rgba(255, 184, 64, 0.28));
}
.aio-h1 em {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 400;
  color: var(--gold-2);
}
.aio-lede {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 340;
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 720px;
  margin: 0 auto;
  letter-spacing: -0.004em;
}
.aio-lede em {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--gold-2);
  letter-spacing: 0;
}
/* ----- SHARED H2 ACROSS SECTIONS ----- */
.aio-h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-weight: 350;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--fg);
  margin-bottom: 40px;
  max-width: 880px;
}
.aio-h2 em {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 400;
  color: var(--gold-2);
}

/* ============================================================
   BENEFIT PANELS — colour-shifting, visual + text, alternating
   ============================================================ */
.aio-panel {
  padding: 124px 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
/* Colour-blocked journey: each band is its own saturated hue with a real value
   gap from its neighbour, so the page reads as distinct sections (cool→warm)
   rather than five shades of black. Still dark enough for white+gold text and
   the dark visual cards to sit on. */
.aio-panel[data-panel="1"] { background: #102b4e; }  /* navy blue — proven abroad / trust */
.aio-panel[data-panel="2"] { background: #0a363e; }  /* teal — one account */
.aio-panel[data-panel="3"] { background: #103c25; }  /* forest green — principal / equity */
.aio-panel[data-panel="4"] { background: #051d36; }  /* deep ocean blue (under the ocean field) */
.aio-panel[data-panel="5"] { background: #3c2410; }  /* copper-bronze — the warm payoff */

.aio-panel-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 84px;
  align-items: center;
}
/* visual on the right (panels alternate down the page) */
.aio-panel[data-panel="1"] .aio-panel-visual,
.aio-panel[data-panel="3"] .aio-panel-visual,
.aio-panel[data-panel="5"] .aio-panel-visual { order: 2; }

.aio-panel-eb {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 22px;
}
.aio-panel-bigtitle {
  display: flex;
  flex-direction: column;
  font-family: 'Yellowtail', cursive;
  font-weight: 400;
  font-size: clamp(56px, 7vw, 104px);
  line-height: 1.04;
  letter-spacing: 0;
  color: var(--gold-2);
  margin-bottom: 26px;
}
.aio-panel-h {
  font-family: 'Space Grotesk', sans-serif;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-weight: 350;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.16;
  letter-spacing: -0.014em;
  color: var(--fg);
  margin-bottom: 26px;
  max-width: 480px;
}
.aio-panel-h em {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 400;
  color: var(--gold-2);
}
.aio-panel-body {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.66;
  color: var(--fg-2);
  max-width: 460px;
  margin-bottom: 38px;
}
.aio-panel-body em {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-size: 19px;
  color: var(--fg);
}
.aio-panel-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--fg);
  text-decoration: none;
  padding: 14px 26px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 100px;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.aio-panel-more:hover {
  border-color: var(--gold-2);
  color: var(--gold-2);
  background: rgba(255, 210, 113, 0.05);
}
.aio-panel-arrow {
  display: inline-block;
  transition: transform 0.2s;
}
.aio-panel-more:hover .aio-panel-arrow { transform: translateX(3px); }

/* ----- panel data visuals ----- */
.aio-viz {
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  padding: 38px;
  background: rgba(255, 255, 255, 0.018);
}
.aio-viz-tag {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.aio-viz-num {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 350;
  font-size: 22px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.aio-viz-num.gold {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  color: var(--gold-2);
}

/* generic bar */
.aio-bar {
  height: 14px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.aio-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-3), var(--gold-2));
  border-radius: 4px;
}
.aio-viz-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.aio-viz-foot {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-3);
}
.aio-viz-foot-num {
  color: var(--gold-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.aio-viz-foot-num s { color: var(--fg-5); }

/* viz 1 — merge */
.aio-viz-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 22px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.aio-viz-card.ghost { opacity: 0.5; }
.aio-viz-card.ghost + .aio-viz-card.ghost { margin-top: 12px; }
.aio-viz-card.solid {
  border-color: var(--gold-2);
  background: rgba(255, 210, 113, 0.06);
}
.aio-viz-card.solid .aio-viz-num { color: var(--gold-2); }
.aio-viz-join {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0;
}
.aio-viz-join-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}
.aio-viz-join-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-2);
}

/* viz 2 — principal */
.aio-viz-principal .aio-bar { margin-bottom: 6px; }
.aio-viz-event {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-size: 17px;
  color: var(--gold-2);
  margin: 20px 0 16px;
}

/* Panel 2 visual — illustrated log-cabin scene.
   "Every dollar that lands stays at the cabin." A pine tree leans
   over a two-story cabin; a wooden arrow sign reads PRINCIPAL FIRST.
   Static SVG with a one-shot fade-up entry, triggered by JS when
   the panel scrolls into view. */
.aio-viz-cabin {
  /* Sized to feel proportional to the text column on the right —
     ~400px tall in the SVG's 360:400 aspect, close to the block of
     bigtitle + headline + body + CTA next to it. */
  max-width: 360px;
  margin-left: auto;
  margin-right: 0;
  text-align: center;
  padding: 0;
  background: transparent;
  border: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.aio-viz-cabin.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.aiov-scene {
  position: relative;
  margin: 0;
}
.aiov-scene svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Snowfall — each flake drifts from above the globe through to below,
   swaying gently sideways on the way (two keyframe variants, --a and
   --b, mirror each other so flakes don't move in lockstep). Duration
   + delay set inline via CSS vars per flake.
   Pure transform/opacity — GPU-cheap; no blur, no blend modes. */
.aio-viz-cabin .aiov-flake {
  opacity: 0;
  animation: aiov-snowfall-a var(--dur, 14s) linear infinite;
  animation-delay: var(--delay, 0s);
  animation-play-state: paused;
}
.aio-viz-cabin .aiov-flake--b {
  animation-name: aiov-snowfall-b;
}
.aio-viz-cabin.is-visible .aiov-flake {
  animation-play-state: running;
}
@keyframes aiov-snowfall-a {
  0%   { transform: translate(0px,  -180px); opacity: 0; }
  12%  { transform: translate(-2px, -130px); opacity: 0.85; }
  35%  { transform: translate(3px,  -40px);  opacity: 0.85; }
  60%  { transform: translate(-4px, 50px);   opacity: 0.85; }
  85%  { transform: translate(2px,  140px);  opacity: 0.85; }
  100% { transform: translate(0px,  180px);  opacity: 0; }
}
@keyframes aiov-snowfall-b {
  0%   { transform: translate(0px,  -180px); opacity: 0; }
  12%  { transform: translate(3px,  -130px); opacity: 0.85; }
  35%  { transform: translate(-2px, -40px);  opacity: 0.85; }
  60%  { transform: translate(4px,  50px);   opacity: 0.85; }
  85%  { transform: translate(-3px, 140px);  opacity: 0.85; }
  100% { transform: translate(0px,  180px);  opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .aio-viz-cabin .aiov-flake {
    animation: none;
    opacity: 0.8;
  }
  .aio-viz-cabin {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
@media (max-width: 980px) {
  .aio-viz-cabin {
    margin-left: auto;
    margin-right: auto;
  }
}

/* viz 3 — liquidity. Ornate gilded frame around the painterly landscape,
   ported from the Claude Design "Liquidity — 24/7 Access" mockup.
   Concentric rings: carved-wood outer → gilt ogee → cove → gilt mat →
   canvas. Four corner ornaments (SVG <symbol>, defined inline in the
   template). All mix-blend-mode layers from the source were stripped —
   gradients alone carry the look without the GPU cost. */
.aio-viz-liquid {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Override the .aio-viz base card (border + radius + padding +
     subtle bg). The framed painting IS the visual — no chrome behind. */
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  /* Constrain the framed assembly so it doesn't dominate the panel.
     Sits comfortably alongside the text column instead of bleeding. */
  max-width: 420px;
  margin: 0 auto;
  /* Lifted off the panel's vertical centerline so the framed piece
     reads as the "hero" of this row instead of sitting mid-line. */
  transform: translateY(-40px);
}

/* Outer walnut wood frame REMOVED per Drake's request — the wrapping
   div stays as a layout anchor but renders no border, no background,
   no shadow. The gilt ogee below now reads as the outermost layer. */
.aio-liq-frame {
  position: relative;
  width: 100%;
  padding: 0;
  background: none;
  box-shadow: none;
}
.aio-liq-frame::before { content: none; }

/* Gilt ogee — now the outermost layer since the walnut ring was
   pulled. The heavy drop shadow (previously on .aio-liq-frame) moves
   here so the assembly still sits with weight against the panel. */
.aio-liq-ogee {
  position: relative;
  padding: 9px;
  border-radius: 3px;
  background: linear-gradient(180deg,
    #fff1c2 0%, #e8c66a 18%, #b08c3a 48%, #d4b15a 78%, #f1d57a 100%);
  box-shadow:
    0 28px 48px -16px rgba(0, 0, 0, 0.75),
    0 14px 22px -8px rgba(0, 0, 0, 0.5),
    inset 0 2px 0 rgba(255, 245, 210, 0.85),
    inset 0 -2px 0 rgba(90, 69, 23, 0.85),
    inset 2px 0 0 rgba(255, 230, 170, 0.4),
    inset -2px 0 0 rgba(90, 69, 23, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 0 14px rgba(245, 200, 110, 0.18);
}
.aio-liq-ogee::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 3px;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.10) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,
      rgba(90, 69, 23, 0.12) 0 1px, transparent 1px 4px);
  opacity: 0.25;
}

/* Cove — was a sunken dark walnut channel; now transparent so the
   panel background reads straight through. The dark "frame around the
   frame" effect is gone; just gilt ogee → gap → gilt mat now. */
.aio-liq-cove {
  position: relative;
  padding: 16px;
  background: transparent;
  box-shadow: none;
}

/* Inner gilt mat — bright gold ring against the painting. */
.aio-liq-mat {
  position: relative;
  padding: 7px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    #f8e29a 0%, #d4b15a 28%, #a8862e 55%, #d4b15a 80%, #f8e29a 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 248, 215, 0.95),
    inset 0 -2px 0 rgba(74, 55, 17, 0.9),
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 4px 14px rgba(0, 0, 0, 0.5);
}

/* Corner ornaments — extend just past the mat into the cove. */
.aio-liq-orn {
  position: absolute;
  width: 52px; height: 52px;
  pointer-events: none;
  z-index: 2;
  filter:
    drop-shadow(0 1px 0 rgba(255, 245, 200, 0.7))
    drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6));
}
.aio-liq-orn.tl { top: -12px; left:  -12px; }
.aio-liq-orn.tr { top: -12px; right: -12px; transform: scaleX(-1); }
.aio-liq-orn.bl { bottom: -12px; left:  -12px; transform: scaleY(-1); }
.aio-liq-orn.br { bottom: -12px; right: -12px; transform: scale(-1, -1); }

/* The painting itself — image fills, inner bevel suggests depth. */
.aio-liq-canvas {
  position: relative;
  aspect-ratio: 1200 / 768;
  border-radius: 1px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.4),
    inset 0 10px 25px rgba(0, 0, 0, 0.35);
}
.aio-liq-canvas img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Brass "24/7 Access" plaque, tucked into the frame's bottom edge. */
.aio-liq-plaque-wrap {
  margin-top: -18px;
  position: relative;
  z-index: 2;
}
.aio-liq-plaque {
  position: relative;
  padding: 12px 42px 13px;
  border-radius: 3px;
  background: linear-gradient(180deg,
    #fff1c2 0%, #f1d57a 14%, #d4b15a 50%, #b08c3a 86%, #8a6d2c 100%);
  box-shadow:
    0 14px 24px -8px rgba(0, 0, 0, 0.7),
    0 5px 10px -3px rgba(0, 0, 0, 0.55),
    0 0 0 1px #5a4517,
    inset 0 1px 0 rgba(255, 245, 200, 0.85),
    inset 0 -2px 4px rgba(90, 69, 23, 0.6);
}
.aio-liq-plaque::before {
  content: '';
  position: absolute; inset: 4px;
  border-radius: 2px;
  pointer-events: none;
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,0.07) 0 1px, transparent 1px 2px,
    rgba(90, 69, 23, 0.07) 2px 3px, transparent 3px 5px);
  opacity: 0.4;
}
.aio-liq-screw {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    #fff5cf 0%, #c8a040 35%, #6e5018 75%, #3a2a0a 100%);
  box-shadow:
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 1px 1px rgba(0, 0, 0, 0.4);
}
.aio-liq-screw::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 1px;
  background: rgba(0, 0, 0, 0.55);
  transform: translate(-50%, -50%) rotate(35deg);
  border-radius: 1px;
}
.aio-liq-screw.tl { top: 8px; left:  8px; }
.aio-liq-screw.tr { top: 8px; right: 8px; }
.aio-liq-screw.bl { bottom: 8px; left:  8px; }
.aio-liq-screw.br { bottom: 8px; right: 8px; }

.aio-liq-plaque-text {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: #2c1f06;
  white-space: nowrap;
  text-shadow:
    0 1px 0 rgba(255, 245, 200, 0.55),
    0 -1px 0 rgba(0, 0, 0, 0.18);
  padding-right: 0.36em;
}
.aio-liq-slash {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-style: italic;
  margin: 0 -0.05em;
}

@media (max-width: 760px) {
  .aio-liq-frame  { padding: 10px; }
  .aio-liq-ogee   { padding: 7px; }
  .aio-liq-cove   { padding: 12px; }
  .aio-liq-mat    { padding: 5px; }
  .aio-liq-orn    { width: 36px; height: 36px; top: -8px; left: -8px; }
  .aio-liq-orn.tr { top: -8px; right: -8px; left: auto; }
  .aio-liq-orn.bl { bottom: -8px; left:  -8px; top: auto; }
  .aio-liq-orn.br { bottom: -8px; right: -8px; top: auto; left: auto; }
  .aio-liq-plaque { padding: 10px 30px 11px; }
  .aio-liq-plaque-text { font-size: 13px; letter-spacing: 0.3em; }
}

/* viz 4 — payoff: HyperFrames depiction (payoff-years.mp4) embedded via the
   shared .aio-viz-depict / .aio-depict-vid pattern — no bespoke CSS needed. */

/* ============================================================
   ONE ACCOUNT — interactive debit-card artifact (panel 1)
   3D tilt + idle float + flip-to-Pro-Tip. Card keeps its own
   metallic palette; mix-blend sheen dropped for performance.
   ============================================================ */
.aioc-stage {
  perspective: 1600px;
  perspective-origin: 50% 40%;
  display: flex;
  justify-content: center;
}
.aioc-wrap {
  position: relative;
  width: 400px;
  height: 252px;
  transform-style: preserve-3d;
  cursor: grab;
}
.aioc-wrap:active { cursor: grabbing; }
.aioc-float {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.aioc-flipper {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(.7, 0, .3, 1);
}
.aioc-flipper.flipped {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}
.aioc-face {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  box-shadow:
    0 50px 80px -30px rgba(0, 0, 0, 0.7),
    0 20px 40px -20px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(245, 213, 122, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(245, 213, 122, 0.22);
}

/* ----- card front ----- */
.aioc-front {
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  background:
    radial-gradient(120% 80% at 0% 0%, #1d4a3d 0%, transparent 50%),
    radial-gradient(120% 100% at 100% 100%, #0a1f17 0%, transparent 55%),
    linear-gradient(135deg, #163a30 0%, #0e2620 100%);
}
/* inner wrapper does the clipping — keeps clip-path / overflow off the
   3D-flipping face so backface-visibility stays reliable across browsers */
.aioc-clip {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
}
.aioc-front .aioc-clip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 6px;
  padding: 24px 28px;
}
.aioc-back .aioc-clip {
  display: flex;
  flex-direction: column;
}
.aioc-front .aioc-clip::before {
  content: '';
  position: absolute;
  right: -120px;
  top: -120px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  border: 1px solid rgba(245, 213, 122, 0.06);
  box-shadow:
    0 0 0 26px rgba(245, 213, 122, 0.02),
    0 0 0 52px rgba(245, 213, 122, 0.015);
  pointer-events: none;
}
.aioc-front .aioc-clip::after {
  content: '';
  position: absolute;
  left: -100px;
  bottom: -180px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1px solid rgba(245, 213, 122, 0.05);
  pointer-events: none;
}
.aioc-sheen {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(
    280px 180px at var(--mx, 50%) var(--my, 50%),
    rgba(245, 213, 122, 0.14) 0%,
    rgba(245, 213, 122, 0.04) 32%,
    transparent 62%
  );
  pointer-events: none;
}
.aioc-chip {
  grid-column: 1;
  grid-row: 1;
  width: 46px;
  height: 36px;
  border-radius: 6px;
  background: linear-gradient(135deg, #f5d57a 0%, #d4ae53 50%, #e7c46a 100%);
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.18),
    inset 0 -1px 2px rgba(255, 255, 255, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.25);
  z-index: 1;
}
.aioc-chip::before,
.aioc-chip::after {
  content: '';
  position: absolute;
  background: rgba(0, 0, 0, 0.22);
}
.aioc-chip::before {
  left: 7px;
  right: 7px;
  top: 9px;
  height: 1px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.22), 0 10px 0 rgba(0, 0, 0, 0.22), 0 15px 0 rgba(0, 0, 0, 0.22);
}
.aioc-chip::after {
  top: 7px;
  bottom: 7px;
  left: 18px;
  width: 1px;
}
.aioc-arrow {
  display: inline-block;
  transition: transform 220ms cubic-bezier(.34, 1.56, .64, 1);
  font-weight: 400;
  font-size: 13px;
}
/* card + trigger stack — trigger sits below the card, clear of the
   3D-transformed surface so the click always lands */
.aioc-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 38px;
}
.aioc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  background: transparent;
  border: 1px solid rgba(245, 213, 122, 0.42);
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f5d57a;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
  -webkit-tap-highlight-color: transparent;
}
.aioc-toggle:hover {
  background: #f5d57a;
  color: #0e2620;
  border-color: #f5d57a;
}
.aioc-toggle:hover .aioc-arrow { transform: translateX(3px); }
.aioc-toggle:focus-visible {
  outline: 1px dashed #f5d57a;
  outline-offset: 4px;
}
.aioc-wordmark {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: center;
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 58px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #f5d57a;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  margin-top: 6px;
  z-index: 1;
}
.aioc-tag {
  display: block;
  margin-top: 2px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.36em;
  color: #ead38a;
  text-transform: uppercase;
  opacity: 0.85;
}
.aioc-num {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
  font-family: ui-monospace, SFMono-Regular, Menlo, 'Courier New', monospace;
  font-size: 14px;
  letter-spacing: 0.14em;
  color: #f6efe2;
  z-index: 1;
}
.aioc-dots {
  color: rgba(255, 255, 255, 0.45);
  margin-right: 8px;
}
.aioc-meta {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  justify-self: end;
  text-align: right;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #cdc7bc;
  z-index: 1;
  line-height: 1.6;
}
.aioc-name {
  color: #f6efe2;
  font-weight: 500;
}

/* ----- card back ----- */
.aioc-back {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  background: linear-gradient(135deg, #163a30 0%, #0e2620 100%);
}
.aioc-stripe {
  flex: 0 0 42px;
  margin: 18px 0 16px;
  background: linear-gradient(180deg, #050805 0%, #0a0f0a 60%, #050805 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.aioc-back-body {
  flex: 1;
  padding: 0 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aioc-tip-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #f5d57a;
}
.aioc-tip-eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: #f5d57a;
}
.aioc-tip {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px;
  line-height: 1.42;
  color: #f6efe2;
  margin: 2px 0 0;
  max-width: 320px;
}
.aioc-tip em {
  color: #f5d57a;
  font-style: italic;
}
.aioc-footnote {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246, 239, 226, 0.55);
}
.aioc-cvv {
  font-family: ui-monospace, SFMono-Regular, Menlo, 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: none;
  color: #f6efe2;
  padding: 4px 8px;
  background: rgba(246, 239, 226, 0.04);
  border: 1px solid rgba(245, 213, 122, 0.1);
  border-radius: 4px;
}

/* ----- panel disclosure ----- */
.aio-panel-disclosure {
  max-width: 760px;
  margin: 72px auto 0;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.4);
}
.aio-panel-disclosure-label {
  display: block;
  margin-bottom: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 210, 113, 0.6);
}

@media (max-width: 600px) {
  .aioc-wrap { width: 322px; height: 203px; }
  .aioc-front { padding: 20px 22px; }
  .aioc-wordmark { font-size: 48px; }
}

/* ----- CALENDAR SECTION (DARK RESTYLE OF THE PROTOTYPE) ----- */
.aio-cal-section {
  padding: 110px 40px 120px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: #060d0a;
}
.aio-cal-inner {
  max-width: 980px;
  margin: 0 auto;
}
.aio-cal-scenario {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.aio-cal-scenario > div {
  padding: 22px 24px 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.10);
}
.aio-cal-scenario > div:last-child { border-right: none; }
.aio-cal-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: 10px;
}
.aio-cal-value {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 350;
  font-size: 26px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.aio-cal-note {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--fg-3);
  margin-bottom: 84px;
  max-width: 660px;
}

/* ----- INDIVIDUAL CYCLE ----- */
.aio-cycle {
  margin-bottom: 56px;
  padding-top: 12px;
}
.aio-cycle-eb {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: 14px;
}
.aio-cycle-eb em {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 14px;
  color: var(--fg-3);
  margin-left: 10px;
}
.aio-cycle-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 350;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.22;
  letter-spacing: -0.008em;
  color: var(--fg);
  margin-bottom: 28px;
  max-width: 800px;
}
.aio-cycle-title em {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  color: var(--gold-2);
}
.aio-cycle-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.aio-cycle-summary > div {
  padding: 18px 22px 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.aio-cycle-summary > div:last-child { border-right: none; }
.aio-cycle-summary-val {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 350;
  font-size: 20px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* ----- CAL HEAD ----- */
.aio-cal-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
}
.aio-cal-month {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 350;
  font-size: 22px;
  color: var(--fg);
}
.aio-cal-month em {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  color: var(--fg-3);
  font-size: 16px;
  margin-left: 10px;
}
.aio-cal-legend {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--fg-4);
  letter-spacing: 0.10em;
}
.aio-cal-legend span { margin-left: 18px; }
.aio-swatch {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: 1px;
}
.aio-swatch.deposit { background: var(--gold-1); }
.aio-swatch.outflow { background: var(--gold-3); }

/* ----- CAL GRID ----- */
.aio-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.aio-cal-weekdays > div {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--fg-4);
  padding: 8px 12px;
}
.aio-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.aio-cal-cell {
  min-height: 60px;
  padding: 7px 10px 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}
.aio-cal-cell:nth-child(7n) { border-right: none; }
.aio-cal-cell.empty { background: rgba(255, 255, 255, 0.015); }
.aio-cal-day {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 350;
  font-size: 13px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}
.aio-cal-interest {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.aio-cal-event {
  margin-top: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.aio-cal-event-line { display: block; }
.aio-cal-event.deposit { color: var(--gold-1); }
.aio-cal-event.outflow { color: var(--gold-3); }
.aio-cal-event.both .e-dep { color: var(--gold-1); display: block; }
.aio-cal-event.both .e-out { color: var(--gold-3); display: block; }
.aio-dot {
  position: absolute;
  top: 10px; right: 10px;
  width: 5px; height: 5px;
  border-radius: 50%;
}
.aio-dot.deposit { background: var(--gold-1); }
.aio-dot.outflow { background: var(--gold-3); }
.aio-dot.both {
  background: var(--gold-1);
  box-shadow: -10px 0 0 0 var(--gold-3);
}

/* ----- CYCLE TOTALS ----- */
.aio-cycle-totals {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.aio-cycle-totals > div {
  padding: 24px 26px;
  border-right: 1px solid rgba(255, 255, 255, 0.10);
}
.aio-cycle-totals > div:last-child { border-right: none; }
.aio-totals-val {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 350;
  font-size: 26px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.aio-neg { color: var(--gold-2); }
.aio-cycle-caption {
  margin-top: 32px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 680px;
}
.aio-cycle-caption em {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  color: var(--gold-2);
}

/* ----- CUMULATIVE ----- */
.aio-cum {
  margin-top: 96px;
  padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.aio-cum-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 350;
  font-size: clamp(28px, 3.6vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--fg);
  margin-bottom: 36px;
  max-width: 760px;
}
.aio-cum-title em {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  color: var(--gold-2);
}
.aio-cum-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.aio-cum-grid > div {
  padding: 32px 28px;
  border-right: 1px solid rgba(255, 255, 255, 0.10);
}
.aio-cum-grid > div:last-child { border-right: none; }
.aio-cum-val {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 350;
  font-size: clamp(26px, 3vw, 34px);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.008em;
}
.aio-cum-delta {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-size: 15px;
  color: var(--fg-4);
  margin-top: 8px;
}
.aio-cum-closing {
  margin-top: 44px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 720px;
}
.aio-cum-closing em {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  color: var(--gold-2);
}

/* ----- THE TERMS ----- */
.aio-structure {
  padding: 110px 40px 110px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: #0a1410;
}
.aio-structure-inner {
  max-width: 980px;
  margin: 0 auto;
}
.aio-structure-rows {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.aio-structure-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.aio-structure-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-4);
  padding-top: 4px;
}
.aio-structure-body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-2);
  max-width: 640px;
}
.aio-structure-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 44px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--fg-3);
  text-decoration: none;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  transition: color 0.2s, border-color 0.2s;
}
.aio-structure-more:hover {
  color: var(--gold-2);
  border-color: var(--gold-2);
}
.aio-structure-more:hover .aio-panel-arrow { transform: translateX(3px); }

/* ----- CTA ----- */
/* ============================================================
   AIO LEARN LIBRARY — question-cards + topic filter + search + lightbox
   Warm near-black band: contrasts the green calculator above and frames the
   warm-dark video thumbnails. No backdrop-filter/blur (perf rule).
   ============================================================ */
.aio-learn {
  position: relative;
  background: #0c0a06;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 104px 40px 120px;
}
.aio-learn::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255, 210, 113, 0.05), transparent 56%);
}
.aio-learn-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }
.aio-learn-head { max-width: 720px; margin-bottom: 38px; }
.aio-learn-lead {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 600px;
  margin-top: 6px;
}

/* controls: topic chips (left) + search (right) */
.aio-learn-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 34px;
}
.aio-learn-topics { display: flex; gap: 8px; flex-wrap: wrap; }
.aio-learn-topic {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--fg-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  padding: 9px 18px;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.aio-learn-topic:hover { color: var(--fg); border-color: rgba(255, 255, 255, 0.28); }
.aio-learn-topic.is-active {
  color: #0c0a06;
  background: var(--gold-2);
  border-color: var(--gold-2);
  font-weight: 600;
}
.aio-learn-search {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 1 1 320px;
  min-width: 280px;
  max-width: 460px;
  background: rgba(20, 14, 8, 0.55);
  border: 1px solid rgba(255, 220, 170, 0.22);
  border-radius: 100px;
  padding: 13px 22px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.aio-learn-search:focus-within {
  border-color: var(--gold-2);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(255, 210, 113, 0.12);
}
.aio-learn-search svg { width: 16px; height: 16px; color: var(--fg-4); flex: none; }
.aio-learn-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--fg);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
}
.aio-learn-search input::placeholder { color: var(--fg-4); }

/* grid of cards */
.aio-learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 22px;
}
.aio-learn-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  background: linear-gradient(180deg, rgba(255, 240, 214, 0.045), rgba(255, 240, 214, 0.015));
  border: 1px solid rgba(255, 225, 180, 0.11);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  color: var(--fg);
  transition: transform 0.25s, border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.aio-learn-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 210, 113, 0.45);
  background: linear-gradient(180deg, rgba(255, 240, 214, 0.07), rgba(255, 240, 214, 0.03));
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(255, 180, 90, 0.07);
}
.aio-learn-card.is-hidden { display: none; }
.aio-learn-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background-color: #0a0805;
  background-size: cover;
  background-position: center;
  transition: transform 0.35s ease;
}
.aio-learn-card:hover .aio-learn-thumb { transform: scale(1.035); }
/* play sits bottom-right, duration bottom-left — clear of the top-left text */
.aio-learn-play {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 10, 6, 0.6);
  border: 1px solid rgba(255, 210, 113, 0.55);
  color: var(--gold-2);
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.aio-learn-play svg { width: 18px; height: 18px; margin-left: 2px; }
.aio-learn-card:hover .aio-learn-play {
  background: var(--gold-2);
  color: #0c0a06;
  transform: scale(1.08);
}
.aio-learn-dur {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 6px;
}
.aio-learn-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 20px;
}
.aio-learn-badge {
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-2);
  border: 1px solid rgba(255, 210, 113, 0.4);
  border-radius: 100px;
  padding: 4px 12px;
  margin-bottom: 2px;
}
.aio-learn-q { font-size: 16.5px; font-weight: 600; line-height: 1.3; color: var(--fg); }
.aio-learn-blurb { font-size: 13.5px; line-height: 1.5; color: var(--fg-3); }

/* featured "start here" card spans the row, laid out horizontally */
.aio-learn-card.is-featured {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: stretch;
  border-color: rgba(255, 210, 113, 0.3);
  background: linear-gradient(100deg, rgba(255, 210, 113, 0.07), rgba(255, 255, 255, 0.02));
}
.aio-learn-card.is-featured .aio-learn-thumb { flex: none; width: 46%; aspect-ratio: auto; min-height: 230px; }
.aio-learn-card.is-featured .aio-learn-body { justify-content: center; padding: 30px 34px; }
.aio-learn-card.is-featured .aio-learn-q { font-size: clamp(21px, 2.3vw, 28px); }
.aio-learn-card.is-featured .aio-learn-blurb { font-size: 15px; max-width: 460px; }

.aio-learn-empty {
  margin-top: 28px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--fg-3);
}
.aio-learn-empty a { color: var(--gold-2); }

/* "See all explainers →" link on the contextual slice (AIO page) */
.aio-learn-all {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 34px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--gold-2);
  text-decoration: none;
  padding: 15px 30px;
  border: 1px solid var(--gold-2);
  background: rgba(255, 210, 113, 0.08);
  border-radius: 100px;
  transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.aio-learn-all:hover {
  background: var(--gold-2);
  color: #0c0a06;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 210, 113, 0.22);
}
.aio-learn-all span { transition: transform 0.2s; }
.aio-learn-all:hover span { transform: translateX(3px); }

/* ═══ /learn/ hub — THE THEATER ═══
   Centered marquee hero under a projector beam, the walkthrough as a real
   cinema screen (an actual frame of the video, tilted, spilling light), then
   an editorial catalog where every chapter leads with a wide card and carries
   a wash of its own colour. */
.aio-learn-hub { padding-top: 170px; position: relative; overflow: hidden; }

.learn-beam {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 780px;
  pointer-events: none;
  background:
    conic-gradient(from 180deg at 50% -140px,
      transparent 41%, rgba(255, 216, 152, 0.055) 45.5%,
      rgba(255, 233, 196, 0.17) 50%, rgba(255, 216, 152, 0.055) 54.5%,
      transparent 59%),
    radial-gradient(52% 22% at 50% 78%, rgba(255, 186, 105, 0.14), transparent 72%),
    radial-gradient(110% 70% at 50% -8%, rgba(48, 36, 24, 0.55), rgba(12, 10, 6, 0) 66%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}
/* dust drifting in the light */
.learn-mote {
  position: absolute;
  width: 3px; height: 3px; border-radius: 50%;
  background: #ffe2b0;
  box-shadow: 0 0 6px rgba(255, 210, 140, 0.8);
  opacity: 0;
  animation-name: learnMote;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes learnMote {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: 0.5; }
  88%  { opacity: 0.35; }
  100% { transform: translate3d(16px, -95px, 0); opacity: 0; }
}

/* entrance choreography — hero pieces and chapters fade up on first view
   (the hub script adds .is-visible; cards cascade with a JS stagger) */
.aio-learn-hub .aio-learn-head,
.aio-learn-hub .aio-learn-controls,
.aio-learn-hub .aio-learn-section {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.aio-learn-hub .aio-learn-featured { opacity: 0; transition: opacity 0.8s ease; }
.aio-learn-hub .aio-learn-head.is-visible,
.aio-learn-hub .aio-learn-controls.is-visible,
.aio-learn-hub .aio-learn-section.is-visible { opacity: 1; transform: none; }
.aio-learn-hub .aio-learn-featured.is-visible { opacity: 1; }
.aio-learn-hub .aio-learn-section .aio-learn-card { opacity: 0; transform: translateY(18px); }
.aio-learn-hub .aio-learn-section .aio-learn-card.is-visible { opacity: 1; transform: none; }
.aio-learn-hub .aio-learn-section .aio-learn-card.is-visible:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  .learn-mote,
  .aio-learn-hub .aio-learn-featured .aio-learn-card,
  .aio-learn-hub .aio-learn-featured .aio-learn-play::after { animation: none; }
  .aio-learn-hub .aio-learn-head,
  .aio-learn-hub .aio-learn-controls,
  .aio-learn-hub .aio-learn-featured,
  .aio-learn-hub .aio-learn-section,
  .aio-learn-hub .aio-learn-section .aio-learn-card { opacity: 1; transform: none; transition: none; }
}

/* centered marquee hero */
.aio-learn-hub .aio-learn-head { max-width: 780px; margin: 0 auto 26px; text-align: center; }
.aio-learn-hub .aio-h2 { font-size: clamp(40px, 4.8vw, 64px); line-height: 1.04; letter-spacing: -0.02em; }
.aio-learn-hub .aio-learn-lead { margin: 18px auto 0; max-width: 560px; }
.aio-learn-hub .aio-learn-controls { justify-content: center; margin-bottom: 42px; }
.aio-learn-hub .aio-learn-search { max-width: 560px; }

/* the walkthrough = a real cinema screen, front and center under the beam */
.aio-learn-hub .aio-learn-featured { max-width: 930px; margin: 0 auto 30px; position: relative; }
.aio-learn-hub .aio-learn-featured .aio-learn-card {
  flex-direction: column;
  border: 1px solid rgba(255, 220, 170, 0.28);
  border-radius: 20px;
  background: #0d0a06;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 90px rgba(255, 190, 110, 0.10);
  transform-origin: 50% 100%;
  /* idle float, like the debit-card artifact — the screen gently levitates */
  animation: learnScreenFloat 7.5s ease-in-out infinite alternate;
}
@keyframes learnScreenFloat {
  from { transform: perspective(1400px) rotateX(1.7deg) translateY(0); }
  to   { transform: perspective(1400px) rotateX(1.1deg) translateY(-9px); }
}
.aio-learn-hub .aio-learn-featured .aio-learn-card:hover {
  border-color: rgba(255, 220, 170, 0.5);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 36px 90px rgba(0, 0, 0, 0.6),
    0 0 130px rgba(255, 190, 110, 0.18);
}
/* soft pulse ring on the screen's play button */
.aio-learn-hub .aio-learn-featured .aio-learn-play::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(255, 210, 113, 0.55);
  animation: learnPlayPulse 2.8s ease-out infinite;
}
@keyframes learnPlayPulse {
  0%   { transform: scale(1); opacity: 0.8; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
.aio-learn-hub .aio-learn-featured .aio-learn-card.is-featured .aio-learn-thumb {
  width: 100%; min-height: 0; aspect-ratio: 21 / 9;
  /* a real frame of the walkthrough — a pasted youtubeId's inline style overrides this */
  background-image: url('/assets/learn/walkthrough-still.jpg');
  background-size: cover; background-position: center 42%;
}
.aio-learn-hub .aio-learn-featured .aio-learn-card:hover .aio-learn-thumb { transform: none; }
.aio-learn-hub .aio-learn-featured .aio-learn-thumb-text { display: none; }
.aio-learn-hub .aio-learn-featured .aio-learn-play {
  left: 50%; top: 50%; right: auto; bottom: auto;
  width: 72px; height: 72px;
  transform: translate(-50%, -50%);
  background: rgba(14, 10, 6, 0.62);
  box-shadow: 0 0 44px rgba(255, 190, 110, 0.35);
}
.aio-learn-hub .aio-learn-featured .aio-learn-play svg { width: 24px; height: 24px; }
.aio-learn-hub .aio-learn-featured .aio-learn-card:hover .aio-learn-play {
  transform: translate(-50%, -50%) scale(1.1);
}
.aio-learn-hub .aio-learn-featured .aio-learn-body {
  align-items: center; text-align: center; padding: 22px 30px 26px; gap: 7px;
}
.aio-learn-hub .aio-learn-featured .aio-learn-q { font-size: clamp(20px, 2.2vw, 26px); }
.aio-learn-hub .aio-learn-featured .aio-learn-blurb { max-width: 520px; }
/* light spilling from the screen onto the floor */
.aio-learn-hub .aio-learn-featured::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -36px; height: 62px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(255, 186, 105, 0.15), transparent 75%);
  pointer-events: none;
}

/* editorial catalog: every chapter leads with a wide card, and the nth-child
   arithmetic below also widens whichever trailing cards would otherwise strand
   an unfinished final row — every chapter now ends on a full, designed row.
   (Cells per grid = 2 for the lead + 1 per single; the three selectors cover
   the three possible remainders.) */
.aio-learn-hub .aio-learn-grid { grid-template-columns: repeat(4, 1fr); }
.aio-learn-hub .is-expanded .aio-learn-grid .aio-learn-card:is(
  :first-child,
  :last-child:nth-child(4n),
  :nth-last-child(2):nth-child(4n),
  :nth-last-child(2):nth-child(4n) + .aio-learn-card,
  :last-child:nth-child(4n + 2)
) {
  grid-column: span 2; flex-direction: row; align-items: stretch;
}
.aio-learn-hub .is-expanded .aio-learn-grid .aio-learn-card:is(
  :first-child,
  :last-child:nth-child(4n),
  :nth-last-child(2):nth-child(4n),
  :nth-last-child(2):nth-child(4n) + .aio-learn-card,
  :last-child:nth-child(4n + 2)
) .aio-learn-thumb {
  width: 52%; flex: none; aspect-ratio: auto; min-height: 100%;
}
.aio-learn-hub .is-expanded .aio-learn-grid .aio-learn-card:is(
  :first-child,
  :last-child:nth-child(4n),
  :nth-last-child(2):nth-child(4n),
  :nth-last-child(2):nth-child(4n) + .aio-learn-card,
  :last-child:nth-child(4n + 2)
) .aio-learn-body { justify-content: center; }
.aio-learn-hub .is-expanded .aio-learn-grid .aio-learn-card:is(
  :first-child,
  :last-child:nth-child(4n),
  :nth-last-child(2):nth-child(4n),
  :nth-last-child(2):nth-child(4n) + .aio-learn-card,
  :last-child:nth-child(4n + 2)
) .aio-learn-q { font-size: 19px; }
/* Horizontal cards crop the 16:9 cover art (their thumbs run taller or wider
   than 16:9) — anchor the crop at the cover's text corner (top-left quadrant)
   so the baked kicker/title survive and the ghost monogram side gives way. */
.aio-learn-hub .is-expanded .aio-learn-grid .aio-learn-card:is(
  :first-child,
  :last-child:nth-child(4n),
  :nth-last-child(2):nth-child(4n),
  :nth-last-child(2):nth-child(4n) + .aio-learn-card,
  :last-child:nth-child(4n + 2)
) .aio-learn-thumb[style] { background-position: 0% 25%; }
/* a horizontal card earns an explicit invitation in the chapter's colour */
.aio-learn-hub .is-expanded .aio-learn-grid .aio-learn-card:is(
  :first-child,
  :last-child:nth-child(4n),
  :nth-last-child(2):nth-child(4n),
  :nth-last-child(2):nth-child(4n) + .aio-learn-card,
  :last-child:nth-child(4n + 2)
) .aio-learn-body::after {
  content: "Watch →";
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sec-accent, var(--gold-2));
}
/* a lone straggler becomes a full-width chapter closer, thumb on the right
   to bookend the chapter's left-side lead. (:not(:first-child) also lifts the
   specificity above the :is() span-2 rule, which would otherwise win.) */
.aio-learn-hub .is-expanded .aio-learn-grid .aio-learn-card:last-child:nth-child(4n):not(:first-child) {
  grid-column: 1 / -1; flex-direction: row-reverse;
}
/* alternate the lead card's side per chapter for editorial rhythm */
.aio-learn-hub .aio-learn-section.is-expanded:nth-of-type(even) .aio-learn-grid .aio-learn-card:first-child {
  flex-direction: row-reverse;
}
/* a one-video section: its only card owns the full row (nth-child(1) is
   redundant with :first-child but lifts specificity over the :is() span-2) */
.aio-learn-hub .is-expanded .aio-learn-grid .aio-learn-card:first-child:last-child:nth-child(1) {
  grid-column: 1 / -1;
}
/* full-row banners run ~3.6:1 — too shallow for the 16:9 cover art; a taller
   frame keeps the baked title inside the crop */
.aio-learn-hub .is-expanded .aio-learn-grid .aio-learn-card:first-child:last-child:nth-child(1) .aio-learn-thumb,
.aio-learn-hub .is-expanded .aio-learn-grid .aio-learn-card:last-child:nth-child(4n):not(:first-child) .aio-learn-thumb {
  min-height: 300px;
}

/* each chapter carries a wash of its own colour */
.aio-learn-hub .aio-learn-section { position: relative; }
.aio-learn-hub .aio-learn-section::before {
  content: ""; position: absolute; inset: -26px -44px; z-index: -1; pointer-events: none;
  border-radius: 34px;
  background: radial-gradient(52% 70% at 0% 0%, var(--sec-wash, transparent), transparent 72%);
}
/* ── program page: hero play-all, lobby filmstrip, contents bar ── */
.aio-learn-playall {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 11px 22px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #0c0a06;
  background: var(--gold-2);
  border: 1px solid var(--gold-2);
  border-radius: 100px;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
}
.aio-learn-playall:hover {
  transform: translateY(-2px);
  background: var(--gold-1);
  box-shadow: 0 10px 26px rgba(255, 190, 90, 0.22);
}
.aio-learn-playall-tri {
  width: 0;
  height: 0;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* the program's covers drifting by — a dimmed lobby strip; the wrap is
   seamless because the track holds the set twice and slides -50% */
.learn-strip {
  overflow: hidden;
  margin: 34px 0 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.learn-strip-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: learnStripDrift 70s linear infinite;
}
@keyframes learnStripDrift {
  to { transform: translateX(-50%); }
}
.learn-strip-cell {
  flex: none;
  width: 188px;
  aspect-ratio: 16 / 9;
  border-radius: 9px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 225, 180, 0.14);
  opacity: 0.55;
}

.learn-toc {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin: 18px auto 34px;
  max-width: 900px;
}
.learn-toc-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 15px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-2);
  text-decoration: none;
  background: rgba(255, 240, 214, 0.045);
  border: 1px solid rgba(255, 225, 180, 0.14);
  border-radius: 100px;
  transition: color 0.16s, border-color 0.16s, background 0.16s;
}
.learn-toc-num {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--gold-2);
}
.learn-toc-chip:hover { color: var(--fg); border-color: rgba(255, 210, 113, 0.4); }
.learn-toc-chip.is-active {
  color: #0c0a06;
  background: var(--gold-2);
  border-color: var(--gold-2);
}
.learn-toc-chip.is-active .learn-toc-num { color: #0c0a06; }

.aio-learn-section { scroll-margin-top: 84px; }
.aio-learn-section-blurb {
  margin: -16px 0 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-3);
  max-width: 62ch;
}

@media (prefers-reduced-motion: reduce) {
  .learn-strip-track { animation: none; }
}
@media (max-width: 720px) {
  .learn-strip-cell { width: 132px; }
  .learn-toc { justify-content: flex-start; }
}

/* ── /learn/ home screen: the program menu ── */
.aio-learn-crumb {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  text-decoration: none;
  margin-bottom: 18px;
  transition: color 0.15s;
}
.aio-learn-crumb:hover { color: var(--gold-2); }

.learn-tiles {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1040px;
  margin: 0 auto;
}
.learn-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 34px 40px;
  background: linear-gradient(180deg, rgba(255, 240, 214, 0.05), rgba(255, 240, 214, 0.015));
  border: 1px solid rgba(255, 225, 180, 0.13);
  border-radius: 22px;
  text-decoration: none;
  color: var(--fg);
  opacity: 0;
  transform: translateY(18px);
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s, opacity 0.4s;
}
.learn-tile.is-visible { opacity: 1; transform: none; }
.learn-tile.is-visible:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 210, 113, 0.45);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(255, 180, 90, 0.08);
}
.learn-tile-body { display: flex; flex-direction: column; gap: 9px; min-width: 0; text-align: left; }
.learn-tile-eb {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.learn-tile-name {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.05;
  color: var(--fg);
}
.learn-tile-blurb { font-size: 14.5px; line-height: 1.5; color: var(--fg-3); max-width: 46ch; }
.learn-tile-go { margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--gold-2); }
/* three covers fanned like a hand of cards, straightening a touch on hover */
.learn-tile-fan { position: relative; flex: none; width: 330px; height: 162px; }
.learn-tile-cover {
  position: absolute;
  width: 236px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 225, 180, 0.2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease;
}
.learn-tile-cover:nth-child(1) { right: 0; top: 0; z-index: 3; }
.learn-tile-cover:nth-child(2) { right: 46px; top: 12px; z-index: 2; transform: rotate(-3deg); opacity: 0.85; }
.learn-tile-cover:nth-child(3) { right: 88px; top: 26px; z-index: 1; transform: rotate(-6deg); opacity: 0.65; }
.learn-tile:hover .learn-tile-cover:nth-child(2) { transform: rotate(-4.5deg) translateX(-7px); }
.learn-tile:hover .learn-tile-cover:nth-child(3) { transform: rotate(-8deg) translateX(-12px); }
@media (prefers-reduced-motion: reduce) {
  .learn-tile { opacity: 1; transform: none; transition: none; }
  .learn-tile-cover { transition: none; }
}
@media (max-width: 760px) {
  .learn-tile { flex-direction: column; align-items: stretch; padding: 26px 22px; }
  .learn-tile-body { text-align: left; }
  .learn-tile-fan { width: 100%; max-width: 330px; height: 162px; margin: 10px auto 0; }
}

.aio-learn-hub .aio-learn-section[data-group="what-it-is"]  { --sec-wash: rgba(202, 162, 74, 0.09); }
.aio-learn-hub .aio-learn-section[data-group="utility"]     { --sec-wash: rgba(92, 191, 148, 0.08); }
.aio-learn-hub .aio-learn-section[data-group="qualifying"]  { --sec-wash: rgba(90, 166, 201, 0.08); }
.aio-learn-hub .aio-learn-section[data-group="chokepoints"] { --sec-wash: rgba(207, 139, 111, 0.09); }
.aio-learn-hub .aio-learn-section[data-group="quirks"]      { --sec-wash: rgba(154, 116, 205, 0.08); }
.aio-learn-hub .aio-learn-section[data-group="mi"]          { --sec-wash: rgba(84, 190, 178, 0.08); }
.aio-learn-hub .aio-learn-section[data-group="real-estate"] { --sec-wash: rgba(140, 172, 188, 0.08); }

@media (max-width: 900px) {
  .aio-learn-hub .aio-learn-grid { grid-template-columns: repeat(2, 1fr); }
  .aio-learn-hub .aio-learn-grid .aio-learn-card:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .aio-learn-hub .aio-learn-grid { grid-template-columns: 1fr; }
  /* single column: every widened card (lead + row-closers) reverts to a
     plain vertical card — a span means nothing in a 1-col grid */
  .aio-learn-hub .aio-learn-grid .aio-learn-card {
    grid-column: auto;
    flex-direction: column;
  }
  .aio-learn-hub .aio-learn-grid .aio-learn-card .aio-learn-thumb { width: 100%; aspect-ratio: 16 / 9; }
  .aio-learn-hub .aio-learn-grid .aio-learn-card .aio-learn-body::after { content: none; }
  .aio-learn-hub .aio-learn-featured .aio-learn-thumb { aspect-ratio: 16 / 9; }
}

/* ── Hub grouping: featured row + labeled sections, so 19 videos read as a
   short curriculum instead of one undifferentiated wall ── */
.aio-learn-featured { margin-bottom: 8px; }
.aio-learn-featured .aio-learn-card { width: 100%; }
.aio-learn-featured .aio-learn-thumb { min-height: 250px; }
.aio-learn-featured.is-hidden,
.aio-learn-section.is-hidden { display: none; }
.aio-learn-section { margin-top: 64px; }
.aio-learn-section:first-of-type { margin-top: 48px; }
/* chapter-style section head: accent number · serif title · accent rule */
.aio-learn-section-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 24px;
}
.aio-learn-section-num {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--sec-accent, var(--gold-2));
}
.aio-learn-section-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0.005em;
  color: var(--fg);
}
.aio-learn-section-rule {
  flex: 1;
  height: 1px;
  align-self: center;
  background: linear-gradient(90deg,
    var(--sec-accent, var(--gold-2)) 0%,
    rgba(255, 255, 255, 0.07) 34%, rgba(255, 255, 255, 0.07) 100%);
  opacity: 0.55;
}
.aio-learn-section[data-group="what-it-is"]  { --sec-accent: #caa24a; }
.aio-learn-section[data-group="utility"]     { --sec-accent: #5cbf94; }
.aio-learn-section[data-group="qualifying"]  { --sec-accent: #5aa6c9; }
.aio-learn-section[data-group="chokepoints"] { --sec-accent: #cf8b6f; }
.aio-learn-section[data-group="quirks"]      { --sec-accent: #a98ad4; }
.aio-learn-section[data-group="mi"]          { --sec-accent: #5cc4b8; }
.aio-learn-section[data-group="real-estate"] { --sec-accent: #8fb0bf; }

/* ── Rails: inside a subject section the grid is a horizontal shelf — the
   canonical viewing order reads left→right. "Show all N" flips the section to
   the full grid. The flat grid (no sections: the AIO slice) is untouched. ── */
.aio-learn-section-head { flex-wrap: wrap; }
.aio-learn-expand {
  flex: none;
  align-self: center;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  background: none;
  border: 1px solid rgba(255, 225, 180, 0.16);
  border-radius: 100px;
  padding: 6px 14px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.aio-learn-expand:hover { color: var(--sec-accent, var(--gold-2)); border-color: var(--sec-accent, var(--gold-2)); }
.aio-learn-expand .aio-learn-expand-close { display: none; }
.aio-learn-section.is-expanded .aio-learn-expand-open { display: none; }
.aio-learn-section.is-expanded .aio-learn-expand-close { display: inline; }
.aio-learn-section.is-static .aio-learn-expand { display: none; }

.aio-learn-railwrap { position: relative; }
.aio-learn-section .aio-learn-grid {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  gap: 22px;
  padding: 4px 4px 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 210, 113, 0.28) rgba(255, 255, 255, 0.04);
}
.aio-learn-section .aio-learn-grid::-webkit-scrollbar { height: 6px; }
.aio-learn-section .aio-learn-grid::-webkit-scrollbar-thumb { background: rgba(255, 210, 113, 0.28); border-radius: 3px; }
.aio-learn-section .aio-learn-grid::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }
.aio-learn-section .aio-learn-grid > .aio-learn-card {
  flex: 0 0 292px;
  scroll-snap-align: start;
}
.aio-learn-section.is-expanded .aio-learn-grid {
  display: grid;
  overflow: visible;
  padding: 0;
}
.aio-learn-section.is-expanded .aio-learn-grid > .aio-learn-card { flex: initial; }

/* edge fades — hidden at the rail's resting edge so the shelf never looks
   dimmed when there's nothing more to scroll to on that side */
.aio-learn-railwrap::before,
.aio-learn-railwrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 14px;
  width: 56px;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.25s;
}
.aio-learn-railwrap::before { left: 0; background: linear-gradient(90deg, rgba(12, 10, 6, 0.92), rgba(12, 10, 6, 0)); }
.aio-learn-railwrap::after { right: 0; background: linear-gradient(270deg, rgba(12, 10, 6, 0.92), rgba(12, 10, 6, 0)); }
.aio-learn-railwrap.is-start::before,
.aio-learn-railwrap.is-end::after { opacity: 0; }
.aio-learn-section.is-expanded .aio-learn-railwrap::before,
.aio-learn-section.is-expanded .aio-learn-railwrap::after { display: none; }

.aio-learn-arrow {
  position: absolute;
  z-index: 3;
  top: 82px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: var(--gold-2);
  background: rgba(12, 10, 6, 0.78);
  border: 1px solid rgba(255, 210, 113, 0.5);
  cursor: pointer;
  transition: opacity 0.2s, background 0.2s, color 0.2s, transform 0.2s;
}
.aio-learn-arrow:hover { background: var(--gold-2); color: #0c0a06; transform: scale(1.06); }
.aio-learn-arrow--prev { left: -14px; }
.aio-learn-arrow--next { right: -14px; }
.aio-learn-railwrap.is-start .aio-learn-arrow--prev,
.aio-learn-railwrap.is-end .aio-learn-arrow--next { opacity: 0; pointer-events: none; }
.aio-learn-section.is-expanded .aio-learn-arrow,
.aio-learn-section.is-static .aio-learn-arrow { display: none; }
@media (hover: none) { .aio-learn-arrow { display: none; } }
@media (max-width: 640px) {
  .aio-learn-section .aio-learn-grid > .aio-learn-card { flex-basis: 246px; }
}

/* canonical ordinal — one running number across the whole program, tinted by
   the section it lives in, so the library reads as a sequence, not an archive */
.aio-learn-ord {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--sec-accent, var(--gold-2));
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

/* ── Clean group-tinted gradient thumbnails (replace the muddy placeholder
   posters). A real YouTube thumb, when youtubeId is set, overrides these via an
   inline background-image. The bottom scrim keeps the duration badge legible on
   bright real thumbs; play + duration sit above it. ── */
.aio-learn-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent 52%);
}
.aio-learn-play,
.aio-learn-dur { z-index: 2; }
/* Dark at the top-left (where the label text sits, so it stays legible),
   the section colour sweeping in toward the bottom-right, with a hot bloom
   low-right so the cover reads lit rather than flat. */
.aio-learn-thumb--what-it-is {
  background-image:
    radial-gradient(115% 105% at 86% 96%, rgba(255, 222, 140, 0.5), rgba(255, 222, 140, 0) 56%),
    linear-gradient(135deg, #1c1206 0%, #7a5312 55%, #d9a63c 115%);
}
.aio-learn-thumb--utility {
  background-image:
    radial-gradient(115% 105% at 86% 96%, rgba(120, 235, 180, 0.42), rgba(120, 235, 180, 0) 56%),
    linear-gradient(135deg, #06170e 0%, #14724a 55%, #37c184 115%);
}
.aio-learn-thumb--qualifying {
  background-image:
    radial-gradient(115% 105% at 86% 96%, rgba(140, 210, 245, 0.42), rgba(140, 210, 245, 0) 56%),
    linear-gradient(135deg, #061826 0%, #175a8c 55%, #3aa2dd 115%);
}
.aio-learn-thumb--chokepoints {
  background-image:
    radial-gradient(115% 105% at 86% 96%, rgba(250, 170, 115, 0.46), rgba(250, 170, 115, 0) 56%),
    linear-gradient(135deg, #1e0d05 0%, #8a3c1c 55%, #e07a42 115%);
}
.aio-learn-thumb--quirks {
  background-image:
    radial-gradient(115% 105% at 86% 96%, rgba(196, 160, 245, 0.4), rgba(196, 160, 245, 0) 56%),
    linear-gradient(135deg, #120a1e 0%, #4c2e7a 55%, #9a74cd 115%);
}
.aio-learn-thumb--mi {
  background-image:
    radial-gradient(115% 105% at 86% 96%, rgba(120, 235, 220, 0.4), rgba(120, 235, 220, 0) 56%),
    linear-gradient(135deg, #06201d 0%, #14655c 55%, #3fbfae 115%);
}
.aio-learn-thumb--real-estate {
  background-image:
    radial-gradient(115% 105% at 86% 96%, rgba(190, 220, 235, 0.36), rgba(190, 220, 235, 0) 56%),
    linear-gradient(135deg, #0d1216 0%, #3e5460 55%, #86a4b4 115%);
}
/* Per-card variance so a chapter's covers don't read as one repeated tile.
   Scoped to :not([style]) — a pasted youtubeId sets an inline background-image
   and these size/position shifts must never distort a real thumbnail. */
.aio-learn-hub .aio-learn-grid .aio-learn-card:nth-child(3n+2) .aio-learn-thumb:not([style]) {
  background-size: 150% 150%;
  background-position: 100% 0%;
}
.aio-learn-hub .aio-learn-grid .aio-learn-card:nth-child(3n) .aio-learn-thumb:not([style]) {
  background-size: 135% 135%;
  background-position: 0% 100%;
}
/* The chapter ordinal as cover artwork — a giant ghosted serif numeral rising
   behind the play button, Robinhood-style "the number IS the art". Rendered
   only on placeholder covers (the template omits it once a youtubeId lands). */
.aio-learn-thumb-num {
  position: absolute;
  right: 12px;
  bottom: -0.16em;
  z-index: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 104px;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(10, 8, 4, 0.32);
  pointer-events: none;
}
/* featured thumb = a lit cinema screen in a dark room: warm glow blooming
   from the center of a charcoal surface, poster text in the light. */
.aio-learn-card.is-featured .aio-learn-thumb {
  background-image:
    radial-gradient(72% 88% at 50% 52%, rgba(255, 205, 130, 0.22), rgba(140, 92, 42, 0.10) 52%, transparent 76%),
    radial-gradient(140% 60% at 50% 108%, rgba(255, 170, 90, 0.10), transparent 60%),
    linear-gradient(180deg, #16110a 0%, #261b0e 50%, #110c07 100%);
}

/* The original poster text — category kicker + serif title + description —
   set on the thumbnail itself (placeholder only; a real YouTube thumb replaces
   it once a youtubeId is set). The kicker line + tick pick up the section accent. */
.aio-learn-thumb-text {
  position: absolute;
  left: 16px;
  top: 14px;
  right: 16px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.aio-learn-thumb-kicker {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sec-accent, var(--gold-2));
}
.aio-learn-thumb-kicker::before {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  margin-bottom: 8px;
  background: var(--sec-accent, var(--gold-2));
}
.aio-learn-thumb-label {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 21px;
  line-height: 1.08;
  color: rgba(255, 255, 255, 0.98);
  letter-spacing: 0.01em;
}
.aio-learn-thumb-sub {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.72);
}
.aio-learn-card.is-featured .aio-learn-thumb-text {
  left: 30px;
  top: 28px;
  right: 30px;
  gap: 7px;
}
.aio-learn-card.is-featured .aio-learn-thumb-kicker { font-size: 11px; }
.aio-learn-card.is-featured .aio-learn-thumb-label { font-size: 34px; }
.aio-learn-card.is-featured .aio-learn-thumb-sub { font-size: 14px; }

/* ---- lightbox player ---- */
/* ── Theater player — one video + the whole catalog as a rail to hop around ── */
.aio-th {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5vmin;
}
.aio-th[hidden] { display: none; }
.aio-th-scrim { position: absolute; inset: 0; background: rgba(4, 3, 2, 0.92); }
.aio-th-dialog {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 18px;
  width: min(1240px, 96vw);
  max-height: 92vh;
  /* screening-room surface: warm charcoal falling to near-black, gold rim,
     and a faint warm halo so the dialog reads as a lit object in the dark */
  background: linear-gradient(165deg, #1c1609 0%, #14110b 46%, #0d0b07 100%);
  border: 1px solid rgba(255, 210, 113, 0.22);
  border-radius: 20px;
  padding: 18px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 30px 90px rgba(0, 0, 0, 0.75),
    0 8px 80px rgba(255, 180, 80, 0.07);
  animation: aioThIn 0.34s cubic-bezier(0.22, 0.8, 0.3, 1);
}
@keyframes aioThIn {
  from { opacity: 0; transform: translateY(16px) scale(0.982); }
  to   { opacity: 1; transform: none; }
}
.aio-th-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 16, 8, 0.82);
  border: 1px solid rgba(255, 210, 113, 0.4);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.aio-th-close:hover { background: var(--gold-2); color: #0c0a06; border-color: var(--gold-2); }

/* main column — player + meta */
.aio-th-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.aio-th-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(92vh - 150px);
  /* warm void rather than flat black, so an empty/buffering frame still looks
     intentional; the poster attribute covers it the rest of the time */
  background: radial-gradient(ellipse at 50% 42%, #171208 0%, #000 78%);
  border-radius: 14px;
  border: 1px solid rgba(255, 210, 113, 0.14);
  overflow: hidden;
  /* floor light-spill: the screen glows onto the dialog beneath it */
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.55),
    0 26px 70px rgba(255, 180, 80, 0.06);
}
.aio-th-frame iframe,
.aio-th-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.aio-th-soon {
  color: #fff;
  text-align: center;
  padding: 14% 12%;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
.aio-th-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.aio-th-info { min-width: 0; }
.aio-th-kicker {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-2);
  margin-bottom: 6px;
}
.aio-th-kicker::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--gold-2);
  vertical-align: middle;
  margin-right: 8px;
}
.aio-th-title {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(23px, 2.8vw, 33px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 6px;
}
.aio-th-blurb {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-3);
  margin: 0;
  max-width: 56ch;
}
.aio-th-actions { display: flex; gap: 8px; flex-shrink: 0; }
.aio-th-btn {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 210, 113, 0.22);
  border-radius: 100px;
  padding: 8px 15px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s, color 0.16s, border-color 0.16s, opacity 0.16s;
}
.aio-th-btn:hover:not(:disabled) { background: var(--gold-2); color: #0c0a06; border-color: var(--gold-2); }
.aio-th-btn:disabled { opacity: 0.34; cursor: default; }
.aio-th-copy { border-color: rgba(255, 210, 113, 0.4); }

/* rail — the full catalog, scrollable; the list is absolutely placed so its
   length never dictates the dialog height (the player column does). */
.aio-th-rail {
  position: relative;
  flex: 0 0 308px;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
  padding-left: 16px;
}
.aio-th-rail-head {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-2);
  padding: 2px 2px 10px;
}
.aio-th-rail-list {
  position: absolute;
  inset: 36px 0 0 16px;
  list-style: none;
  margin: 0;
  padding: 0 4px 2px 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aio-th-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px;
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--fg);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.aio-th-item:hover { background: rgba(255, 255, 255, 0.05); }
.aio-th-item.is-active {
  background: rgba(255, 210, 113, 0.12);
  border-color: rgba(255, 210, 113, 0.4);
  box-shadow: inset 3px 0 0 var(--gold-2);
}
@media (prefers-reduced-motion: reduce) {
  .aio-th-dialog { animation: none; }
}
.aio-th-item-thumb {
  position: relative;
  flex: none;
  width: 92px;
  aspect-ratio: 16 / 9;
  border-radius: 7px;
  background-color: #0a0805;
  background-size: cover;
  background-position: center;
}
.aio-th-item-dur {
  position: absolute;
  right: 4px;
  bottom: 4px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
}
.aio-th-item-q {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--fg);
}
.aio-th-item.is-active .aio-th-item-q { color: var(--gold-1); }

/* ── up-next overlay: covers the frame when a video ends — next film's art
   dimmed behind, gold countdown ring, auto-advance with a Cancel ── */
.aio-th-next {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 4, 2, 0.62);
}
.aio-th-next-art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.26;
}
.aio-th-next-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 20px 24px;
  animation: aioThNextIn 0.3s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
@keyframes aioThNextIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.aio-th-next-kicker {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-2);
}
.aio-th-next-title {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.15;
  color: var(--fg);
  max-width: 24ch;
}
.aio-th-next-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.aio-th-next-ring { position: relative; flex: none; width: 44px; height: 44px; }
.aio-th-next-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.aio-th-next-ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 3; }
.aio-th-next-ring-fg {
  fill: none;
  stroke: var(--gold-2);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 119.4; /* 2π·r19 — drains over the 5s auto-advance */
  stroke-dashoffset: 0;
  animation: aioThRing 5s linear forwards;
}
@keyframes aioThRing { to { stroke-dashoffset: 119.4; } }
.aio-th-next-n {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
}
@media (prefers-reduced-motion: reduce) {
  .aio-th-next-box { animation: none; }
  .aio-th-next-ring-fg { animation: none; }
}

/* match count beside the hub search — only visible while filtering */
.aio-learn-count {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold-2);
  white-space: nowrap;
}

/* ── transcript on /learn/<slug>/ — the narrated film as readable prose ── */
.aio-transcript {
  padding: 76px 28px 96px;
  background: #0c0a06;
  border-top: 1px solid rgba(255, 210, 113, 0.1);
}
.aio-transcript-inner { max-width: 680px; margin: 0 auto; }
.aio-transcript-kicker {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-2);
}
.aio-transcript-kicker::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--gold-2);
  vertical-align: middle;
  margin-right: 8px;
}
.aio-transcript-title {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.1;
  color: var(--fg);
  margin: 10px 0 8px;
}
.aio-transcript-lead {
  font-size: 14px;
  color: var(--fg-3);
  margin: 0 0 30px;
}
.aio-transcript-body p {
  font-size: 16px;
  line-height: 1.78;
  color: var(--fg-2);
  margin: 0 0 20px;
}
.aio-transcript-body p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .aio-th-dialog { flex-direction: column; max-height: 94vh; gap: 12px; }
  .aio-th-frame { max-height: 48vh; }
  .aio-th-rail {
    flex: 1 1 auto;
    min-height: 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: 0;
    padding-top: 12px;
  }
  .aio-th-rail-list {
    position: static;
    inset: auto;
    padding-left: 0;
    max-height: 30vh;
  }
}

@media (max-width: 720px) {
  .aio-learn { padding: 72px 22px 84px; }
  .aio-learn-controls { flex-direction: column; align-items: stretch; }
  /* flex-basis 320px means WIDTH in the row layout, but once the controls go
     column it becomes HEIGHT — the search rendered as a 320px-tall pill */
  .aio-learn-search { max-width: none; flex: 0 0 auto; }
  .aio-learn-count { text-align: center; }
  .aio-learn-card.is-featured { flex-direction: column; }
  .aio-learn-card.is-featured .aio-learn-thumb { width: 100%; aspect-ratio: 16 / 9; min-height: 0; }
  .aio-learn-card.is-featured .aio-learn-body { padding: 20px 18px 22px; }

  /* Theater becomes a full-screen sheet: player pinned on top, the catalog
     scrolling beneath it, everything thumb-reachable. Most traffic is phones —
     the floating desktop dialog wastes half a small screen. */
  .aio-th { padding: 0; }
  .aio-th-dialog {
    width: 100%;
    height: 100%;
    max-height: none;
    flex-direction: column;
    gap: 12px;
    border: 0;
    border-radius: 0;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    animation-name: aioThSheetIn;
  }
  .aio-th-close {
    top: calc(10px + env(safe-area-inset-top));
    width: 42px;
    height: 42px;
    font-size: 17px;
  }
  .aio-th-frame {
    flex: none;
    max-height: 44vh;
    margin-top: calc(env(safe-area-inset-top));
  }
  .aio-th-title { font-size: 20px; }
  .aio-th-blurb {
    font-size: 13px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .aio-th-meta { gap: 10px; }
  .aio-th-actions { width: 100%; }
  .aio-th-actions .aio-th-btn { flex: 1 1 auto; }
  .aio-th-rail {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: 0;
    padding-top: 10px;
  }
  .aio-th-rail-list {
    position: static;
    inset: auto;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding-left: 0;
  }
}
@keyframes aioThSheetIn {
  from { opacity: 0; transform: translateY(5%); }
  to   { opacity: 1; transform: none; }
}

/* ---- "Get started" CTAs sprinkled down the AIO page ---- */
.aio-gs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.aio-hero .aio-gs-row { justify-content: center; margin-top: 40px; }
.aio-gs-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--gold-2);
  color: #0c0a06;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 15px 32px;
  border-radius: 100px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.aio-gs-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255, 210, 113, 0.28); }
.aio-gs-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--fg);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 15px;
  padding: 15px 26px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 100px;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.aio-gs-ghost:hover { border-color: var(--gold-2); color: var(--gold-2); }
.aio-gs-primary span, .aio-gs-ghost span { display: inline-block; transition: transform 0.2s; }
.aio-gs-primary:hover span, .aio-gs-ghost:hover span { transform: translateX(3px); }

/* mid-page CTA strip between panels */
.aio-gs-strip {
  background: #0c0a06;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 72px 40px;
  text-align: center;
}
.aio-gs-strip .aio-gs-line {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 350;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -0.012em;
  color: var(--fg);
  margin: 0 0 24px;
}
.aio-gs-strip .aio-gs-line em { font-style: italic; color: var(--gold-2); }
.aio-gs-strip .aio-gs-row { justify-content: center; }

/* post-calculator CTA sits on the dark statement ground */
.aio-stmt-cta { margin-top: 40px; display: flex; justify-content: center; }

.aio-cta {
  padding: 120px 40px 140px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  background: #07120e;
}
.aio-cta-inner {
  max-width: 880px;
  margin: 0 auto;
}
.aio-cta-body {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 640px;
  margin-bottom: 56px;
}
.aio-cta-actions {
  display: flex;
  align-items: flex-end;
  gap: 56px;
  flex-wrap: wrap;
}
.aio-cta-phone {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  transition: border-color 0.2s, color 0.2s;
}
.aio-cta-phone:hover {
  border-color: var(--gold-2);
}
.aio-cta-phone-num {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 350;
  font-size: clamp(28px, 3.4vw, 38px);
  color: var(--fg);
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.aio-cta-phone:hover .aio-cta-phone-num { color: var(--gold-2); }
.aio-cta-phone-sub {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.aio-cta-link {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  letter-spacing: 0.10em;
  color: var(--fg-3);
  text-decoration: none;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  transition: color 0.2s, border-color 0.2s;
}
.aio-cta-link:hover {
  color: var(--gold-2);
  border-color: var(--gold-2);
}
.aio-cta-arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.2s;
}
.aio-cta-link:hover .aio-cta-arrow { transform: translateX(3px); }

/* ----- RESPONSIVE ----- */
@media (max-width: 980px) {
  .aio-panel-inner { grid-template-columns: 1fr; gap: 48px; }
  .aio-panel[data-panel="2"] .aio-panel-visual,
  .aio-panel[data-panel="4"] .aio-panel-visual { order: 0; }
  .aio-panel-h,
  .aio-panel-body { max-width: none; }
}
@media (max-width: 860px) {
  .aio-hero { padding: 160px 24px 80px; min-height: 80vh; }
  .aio-panel { padding: 76px 24px; }
  .aio-cal-section,
  .aio-structure,
  .aio-cta { padding-left: 24px; padding-right: 24px; }
  .aio-viz { padding: 26px; }

  .aio-cal-scenario { grid-template-columns: 1fr 1fr; }
  .aio-cal-scenario > div:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, 0.10); }
  .aio-cal-scenario > div:nth-child(even) { border-right: none; }
  .aio-cal-scenario > div:nth-child(1),
  .aio-cal-scenario > div:nth-child(2) { border-bottom: 1px solid rgba(255, 255, 255, 0.10); }

  .aio-cycle-summary { grid-template-columns: 1fr 1fr; }
  .aio-cycle-summary > div:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, 0.06); }
  .aio-cycle-summary > div:nth-child(even) { border-right: none; }
  .aio-cycle-summary > div:nth-child(1),
  .aio-cycle-summary > div:nth-child(2) { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }

  .aio-cycle-totals { grid-template-columns: 1fr; }
  .aio-cycle-totals > div { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.10); }
  .aio-cycle-totals > div:last-child { border-bottom: none; }

  .aio-cum-grid { grid-template-columns: 1fr; }
  .aio-cum-grid > div { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.10); }
  .aio-cum-grid > div:last-child { border-bottom: none; }

  .aio-structure-row { grid-template-columns: 1fr; gap: 8px; }

  .aio-cal-cell { min-height: 76px; padding: 8px 8px 10px; }
  .aio-cal-day { font-size: 12px; }
  .aio-cal-interest { font-size: 10px; }
  .aio-cal-event { font-size: 9.5px; margin-top: 4px; }
  .aio-cal-weekdays > div { padding: 10px 6px; font-size: 9.5px; }

  .aio-cta-actions { flex-direction: column; align-items: flex-start; gap: 28px; }
}

/* ============================================================
   ALL-IN-ONE — ARTICLE SYSTEM
   Shared editorial layout for every AIO deep-dive page
   (Learn More, Principal First, future articles, articles index).
   Body class: aio-article. All selectors scoped under it.
   ============================================================ */

body.aio-article {
  background:
    radial-gradient(1100px 600px at 80% 5%, rgba(255, 210, 113, 0.06) 0%, transparent 60%),
    radial-gradient(900px 500px at 5% 50%, rgba(255, 210, 113, 0.035) 0%, transparent 60%),
    radial-gradient(900px 500px at 95% 95%, rgba(217, 119, 87, 0.04) 0%, transparent 60%),
    #0c1e16;
  color: var(--fg);
  font-family: 'Space Grotesk', sans-serif;
}

/* ── topbar ────────────────────────────────────────────────── */
body.aio-article .art-topbar {
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 48px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.aio-article .art-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-2);
  text-decoration: none;
  padding: 8px 0;
  transition: color 180ms ease;
}
body.aio-article .art-back .art-arrow {
  display: inline-block;
  font-size: 13px;
  transition: transform 220ms cubic-bezier(.34, 1.56, .64, 1);
}
body.aio-article .art-back:hover { color: var(--fg); }
body.aio-article .art-back:hover .art-arrow { transform: translateX(-4px); }
body.aio-article .art-mark {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-size: 22px;
  color: var(--gold-2);
}
body.aio-article .art-mark .art-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 10px rgba(255, 210, 113, 0.4);
  margin-right: 10px;
  vertical-align: 2px;
}

/* ── container + entry animation ──────────────────────────── */
body.aio-article .art-container {
  max-width: 880px;
  margin: 0 auto;
  padding: 64px 48px 0;
}
@keyframes art-fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.aio-article .art-container > * {
  animation: art-fadeUp 0.7s ease-out backwards;
}
body.aio-article .art-container > *:nth-child(1) { animation-delay: 0.05s; }
body.aio-article .art-container > *:nth-child(2) { animation-delay: 0.15s; }
body.aio-article .art-container > *:nth-child(3) { animation-delay: 0.25s; }
body.aio-article .art-container > *:nth-child(4) { animation-delay: 0.35s; }

/* ── eyebrow ──────────────────────────────────────────────── */
body.aio-article .art-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 32px;
}
body.aio-article .art-eyebrow .art-eb-rule {
  width: 32px;
  height: 1px;
  background: var(--gold-2);
  opacity: 0.6;
}
body.aio-article .art-eyebrow .art-mech {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.18em;
  color: var(--gold-1);
  opacity: 0.75;
}

/* ── h1 + deck ────────────────────────────────────────────── */
body.aio-article h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 420;
  font-size: clamp(40px, 5.6vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--fg);
  margin: 0 0 28px;
  text-wrap: balance;
}
body.aio-article h1 em {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 400;
  color: var(--gold-2);
}
body.aio-article h1 .art-script {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 400;
  color: var(--gold-2);
}
body.aio-article h1 .art-brk { display: block; height: 0; }

body.aio-article .art-deck {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.45;
  color: var(--fg-2);
  max-width: 700px;
  text-wrap: pretty;
  margin: 0;
}
body.aio-article .art-deck em {
  color: var(--gold-2);
  font-style: italic;
}

/* ── § divider between sections ───────────────────────────── */
body.aio-article .art-container > .art-section-rule {
  height: 1px;
  background: rgba(255, 210, 113, 0.18);
  margin: 72px 0 56px;
  position: relative;
}
body.aio-article .art-container > .art-section-rule::after {
  content: "§";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #0c1e16;
  padding: 0 18px;
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  color: var(--gold-2);
  opacity: 0.7;
  font-size: 22px;
}

/* ── section numbers + h2 ─────────────────────────────────── */
body.aio-article .art-section-num {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-size: 32px;
  color: var(--gold-2);
  opacity: 0.9;
  margin-bottom: 8px;
  line-height: 1;
}
body.aio-article h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.008em;
  color: var(--fg);
  margin: 0 0 28px;
  max-width: 720px;
  text-wrap: balance;
}
body.aio-article h2 em {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  color: var(--gold-2);
}

/* ── body paragraphs ──────────────────────────────────────── */
body.aio-article .art-container p {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 380;
  font-size: 21px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0 0 20px;
  max-width: 720px;
  text-wrap: pretty;
}
body.aio-article .art-container p em {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  color: var(--gold-2);
}
body.aio-article .art-container p strong {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-style: italic;
  color: var(--fg);
}
body.aio-article .art-container p.art-lead {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.45;
  color: var(--fg);
  margin-bottom: 28px;
  max-width: 720px;
}
body.aio-article .art-container p.art-lead em {
  color: var(--gold-2);
  font-style: italic;
}

/* ── Learn More: definition callout ───────────────────────── */
body.aio-article .art-definition {
  margin: 40px 0 16px;
  padding: 32px 36px;
  background: rgba(255, 210, 113, 0.04);
  border: 1px solid rgba(255, 210, 113, 0.18);
  border-left: 2px solid var(--gold-2);
  border-radius: 0 12px 12px 0;
  box-shadow: -12px 0 24px -20px rgba(255, 210, 113, 0.35);
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.3;
  color: var(--fg);
}
body.aio-article .art-definition .art-script {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 400;
  color: var(--gold-2);
}
body.aio-article .art-definition .art-def-meta {
  display: block;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-1);
  opacity: 0.8;
  margin-top: 18px;
}
body.aio-article .art-definition .art-def-meta .art-sep {
  color: var(--fg-5);
  margin: 0 8px;
}

/* ── Learn More: flow viz ─────────────────────────────────── */
body.aio-article .art-flow {
  margin: 48px 0 32px;
  padding: 44px 36px 36px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 210, 113, 0.18);
  border-radius: 14px;
}
body.aio-article .art-flow-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gold-1);
  text-align: center;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 28px;
}
body.aio-article .art-flow-stream {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto 32px;
}
body.aio-article .art-flow-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 18px;
  padding: 16px 22px;
  background: rgba(11, 32, 25, 0.5);
  border: 1px solid rgba(255, 210, 113, 0.08);
  border-left: 2px solid var(--gold-2);
  border-radius: 0 8px 8px 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  color: var(--fg);
  opacity: 0;
  animation: art-flowSlideIn 0.55s ease-out forwards;
}
body.aio-article .art-flow-item:nth-child(1) { animation-delay: 0.30s; }
body.aio-article .art-flow-item:nth-child(2) { animation-delay: 0.50s; }
body.aio-article .art-flow-item:nth-child(3) { animation-delay: 0.70s; }
body.aio-article .art-flow-item:nth-child(4) { animation-delay: 0.90s; }
body.aio-article .art-flow-item:nth-child(5) { animation-delay: 1.10s; }
@keyframes art-flowSlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
body.aio-article .art-flow-item .art-flow-src { font-style: italic; }
body.aio-article .art-flow-item .art-flow-arrow {
  color: var(--gold-1);
  opacity: 0.6;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
}
body.aio-article .art-flow-item .art-flow-effect {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-2);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
body.aio-article .art-flow-result {
  text-align: center;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 210, 113, 0.18);
  margin-top: 8px;
}
body.aio-article .art-flow-result-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-5);
  margin-bottom: 14px;
}
body.aio-article .art-flow-down {
  color: var(--gold-2);
  font-size: 22px;
  line-height: 1;
  margin: 4px 0 10px;
  opacity: 0.7;
}
body.aio-article .art-flow-balance {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-size: clamp(30px, 4.4vw, 42px);
  font-weight: 400;
  color: var(--gold-2);
  letter-spacing: -0.018em;
  font-variant-numeric: tabular-nums;
}
body.aio-article .art-flow-balance .art-flow-qty {
  color: var(--fg);
  font-style: italic;
  margin-right: 8px;
}

/* ── compare grid (used in Learn More + Principal First) ──── */
body.aio-article .art-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 32px 0 16px;
}
body.aio-article .art-compare-card {
  padding: 32px 28px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 210, 113, 0.18);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
body.aio-article .art-compare-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--fg-3);
  opacity: 0.5;
}
body.aio-article .art-compare-card.is-aio {
  border-color: rgba(255, 210, 113, 0.42);
}
body.aio-article .art-compare-card.is-aio::before {
  background: var(--gold-2);
  opacity: 1;
  box-shadow: 0 0 12px rgba(255, 210, 113, 0.4);
}
body.aio-article .art-compare-tag {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-5);
  margin-bottom: 16px;
}
body.aio-article .art-compare-card.is-aio .art-compare-tag { color: var(--gold-2); }
body.aio-article .art-compare-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 22px;
  line-height: 1.28;
  margin: 0 0 14px;
  color: var(--fg);
}
body.aio-article .art-compare-card.is-aio h3 em {
  color: var(--gold-2);
  font-style: italic;
}
body.aio-article .art-compare-card p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-3);
  margin: 0;
  max-width: none;
}

/* ── pull-quote ───────────────────────────────────────────── */
body.aio-article .art-pull {
  margin: 64px auto;
  padding: 56px 0;
  text-align: center;
  position: relative;
  max-width: 820px;
}
body.aio-article .art-pull::before,
body.aio-article .art-pull::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 80px;
  height: 1px;
  background: var(--gold-2);
  opacity: 0.4;
  transform: translateX(-50%);
}
body.aio-article .art-pull::before { top: 0; }
body.aio-article .art-pull::after  { bottom: 0; }
body.aio-article .art-pull q {
  quotes: none;
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.3;
  color: var(--gold-2);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
body.aio-article .art-pull q::before,
body.aio-article .art-pull q::after { content: ''; }
body.aio-article .art-pull q em {
  color: var(--fg);
  font-weight: 400;
  font-style: italic;
}

/* ── Learn More: handoff card (scroll-to-calculator) ──────── */
body.aio-article .art-handoff {
  margin: 64px 0 0;
  padding: 56px 40px 52px;
  background:
    radial-gradient(120% 100% at 100% 100%, rgba(255, 210, 113, 0.04) 0%, transparent 60%),
    rgba(11, 32, 25, 0.6);
  border: 1px solid rgba(255, 210, 113, 0.18);
  border-radius: 16px;
  text-align: center;
}
body.aio-article .art-handoff h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.3;
  margin: 0 auto 16px;
  color: var(--fg);
  max-width: 580px;
  text-wrap: balance;
}
body.aio-article .art-handoff h3 em { color: var(--gold-2); }
body.aio-article .art-handoff p {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px;
  color: var(--fg-3);
  max-width: 520px;
  margin: 0 auto 28px;
  line-height: 1.5;
}
body.aio-article .art-scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--gold-2);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color 200ms ease;
}
body.aio-article .art-scroll-cue:hover { color: var(--fg); }
body.aio-article .art-scroll-cue .art-scroll-arrow {
  width: 20px;
  height: 28px;
  animation: art-bob 2.2s ease-in-out infinite;
}
@keyframes art-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ── Principal First: pies visualization ──────────────────── */
body.aio-article .art-viz {
  margin: 56px 0 40px;
  padding: 48px 40px 40px;
  background: rgba(255, 210, 113, 0.04);
  border: 1px solid rgba(255, 210, 113, 0.18);
  border-radius: 14px;
}
body.aio-article .art-viz-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gold-1);
  text-align: center;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 10px;
}
body.aio-article .art-viz-title {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-size: 26px;
  text-align: center;
  margin-bottom: 44px;
  color: var(--fg);
}
body.aio-article .art-pies {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
body.aio-article .art-pie { text-align: center; }
body.aio-article .art-pie-svg {
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0 auto 28px;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
}
body.aio-article .art-pie-svg .art-pie-track {
  stroke: rgba(246, 239, 226, 0.06);
}
body.aio-article .art-pie-svg .art-pie-pct {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  fill: var(--fg);
}
body.aio-article .art-pie-svg .art-pie-lbl {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.22em;
  fill: var(--gold-1);
  text-transform: uppercase;
}
body.aio-article .art-pie-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-size: 22px;
  margin-bottom: 4px;
  color: var(--fg);
}
body.aio-article .art-pie-sub {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: var(--fg-5);
  margin-bottom: 22px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
body.aio-article .art-pie-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 220px;
  margin: 0 auto;
  text-align: left;
}
body.aio-article .art-pie-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dotted rgba(255, 210, 113, 0.18);
  letter-spacing: 0.02em;
}
body.aio-article .art-pie-row:last-child { border-bottom: none; }
body.aio-article .art-pie-row .art-swatch {
  width: 9px;
  height: 9px;
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
  border-radius: 2px;
}
body.aio-article .art-pie-row .art-swatch.interest { background: #d97757; }
body.aio-article .art-pie-row .art-swatch.principal { background: var(--gold-2); }
body.aio-article .art-pie-row .art-pie-label { color: var(--fg-3); }
body.aio-article .art-pie-row .art-pie-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
body.aio-article .art-pie-row .art-pie-value.faint {
  color: var(--fg-5);
  font-weight: 400;
}
body.aio-article .art-viz-caption {
  margin: 40px auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 210, 113, 0.18);
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--fg-3);
  text-align: center;
  max-width: 580px;
}
@keyframes art-drawSlice {
  from { stroke-dashoffset: var(--circumference); }
  to   { stroke-dashoffset: var(--target); }
}
body.aio-article .art-pie-slice {
  animation: art-drawSlice 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.6s backwards;
}

/* ── Principal First: implications list ───────────────────── */
body.aio-article .art-implications {
  list-style: none;
  counter-reset: art-imp;
  margin: 28px 0 16px;
  padding: 0;
}
body.aio-article .art-implications li {
  counter-increment: art-imp;
  padding: 26px 0 26px 72px;
  position: relative;
  border-bottom: 1px solid rgba(255, 210, 113, 0.18);
}
body.aio-article .art-implications li:last-child { border-bottom: none; }
body.aio-article .art-implications li::before {
  content: counter(art-imp, decimal-leading-zero);
  position: absolute;
  left: 0; top: 28px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--gold-2);
  letter-spacing: 0.14em;
}
body.aio-article .art-implications h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--fg);
}
body.aio-article .art-implications p {
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-3);
  margin: 0;
  max-width: 700px;
}
body.aio-article .art-implications p em { color: var(--gold-2); }

/* ── Principal First: CTA block ───────────────────────────── */
body.aio-article .art-cta {
  margin: 80px 0 0;
  padding: 56px 40px;
  background:
    radial-gradient(120% 100% at 100% 100%, rgba(255, 210, 113, 0.04) 0%, transparent 60%),
    rgba(11, 32, 25, 0.65);
  border: 1px solid rgba(255, 210, 113, 0.18);
  border-radius: 16px;
  text-align: center;
}
body.aio-article .art-cta h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.22;
  margin: 0 auto 16px;
  color: var(--fg);
  max-width: 600px;
  text-wrap: balance;
}
body.aio-article .art-cta h3 em { color: var(--gold-2); }
body.aio-article .art-cta p {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  color: var(--fg-3);
  max-width: 540px;
  margin: 0 auto 32px;
  line-height: 1.5;
}
body.aio-article .art-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: var(--gold-2);
  color: #0c1e16;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.18em;
  font-size: 13px;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
body.aio-article .art-cta-btn:hover {
  background: transparent;
  color: var(--gold-2);
  box-shadow: inset 0 0 0 1px var(--gold-2);
}
body.aio-article .art-cta-btn svg {
  transition: transform 220ms cubic-bezier(.34, 1.56, .64, 1);
}
body.aio-article .art-cta-btn:hover svg { transform: translateX(4px); }

/* secondary "or open the calculator" link beneath the primary CTA */
body.aio-article .art-cta-alt {
  display: block;
  margin: 22px auto 0;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-1);
  text-decoration: none;
  opacity: 0.85;
  transition: color 180ms ease, opacity 180ms ease;
}
body.aio-article .art-cta-alt:hover {
  color: var(--gold-2);
  opacity: 1;
}
body.aio-article .art-cta-alt .art-arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 220ms cubic-bezier(.34, 1.56, .64, 1);
}
body.aio-article .art-cta-alt:hover .art-arrow { transform: translateX(3px); }

/* ── "More on the All-In-One" button (replaces cross-link) ── */
body.aio-article .art-more {
  margin: 56px 0 0;
  text-align: center;
}
body.aio-article .art-more a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-2);
  text-decoration: none;
  padding: 14px 26px;
  border: 1px solid rgba(255, 210, 113, 0.42);
  border-radius: 999px;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
body.aio-article .art-more a:hover {
  background: var(--gold-2);
  color: #0c1e16;
  border-color: var(--gold-2);
}
body.aio-article .art-more a .art-arrow {
  display: inline-block;
  transition: transform 220ms cubic-bezier(.34, 1.56, .64, 1);
}
body.aio-article .art-more a:hover .art-arrow { transform: translateX(4px); }

/* ── compliance ───────────────────────────────────────────── */
body.aio-article .art-compliance {
  margin: 64px 0 0;
  padding: 32px 0 64px;
  border-top: 1px solid rgba(255, 210, 113, 0.18);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  line-height: 1.7;
  color: var(--fg-5);
  letter-spacing: 0.02em;
}
body.aio-article .art-ehl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-weight: 600;
  color: var(--gold-1);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 10px;
}
body.aio-article .art-ehl-icon {
  width: 22px; height: 22px;
  border: 1px solid var(--gold-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-1);
  border-radius: 2px;
}
body.aio-article .art-compliance p {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--fg-5);
  margin: 0 0 8px;
  max-width: none;
  line-height: 1.7;
}
body.aio-article .art-compliance strong {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  color: var(--fg-3);
  font-weight: 600;
}

/* ── articles index page ──────────────────────────────────── */
body.aio-article .art-index {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 48px 96px;
}
body.aio-article .art-index-head {
  text-align: center;
  margin: 40px auto 64px;
  max-width: 720px;
}
body.aio-article .art-index-head h1 {
  margin: 0 0 20px;
  text-align: center;
}
body.aio-article .art-index-head .art-deck {
  margin: 0 auto;
  max-width: 620px;
}
body.aio-article .art-index-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
body.aio-article .art-index-card {
  display: block;
  padding: 36px 32px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 210, 113, 0.18);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}
body.aio-article .art-index-card:hover {
  border-color: rgba(255, 210, 113, 0.42);
  background: rgba(255, 210, 113, 0.04);
  transform: translateY(-2px);
}
body.aio-article .art-index-card .art-index-mech {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold-1);
  text-transform: uppercase;
  margin-bottom: 14px;
  opacity: 0.8;
}
body.aio-article .art-index-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.15;
  color: var(--fg);
  margin: 0 0 12px;
}
body.aio-article .art-index-card h3 em { color: var(--gold-2); font-style: italic; }
body.aio-article .art-index-card p {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 380;
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-3);
  margin: 0 0 18px;
}
body.aio-article .art-index-card .art-index-more {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-2);
}

/* ── mobile ───────────────────────────────────────────────── */
@media (max-width: 720px) {
  body.aio-article .art-topbar { padding: 24px 24px 0; }
  body.aio-article .art-container { padding: 48px 24px 0; }
  body.aio-article .art-definition { padding: 24px 22px; }
  body.aio-article .art-flow { padding: 32px 20px 28px; }
  body.aio-article .art-flow-item { grid-template-columns: 1fr auto; padding: 14px 18px; }
  body.aio-article .art-flow-item .art-flow-arrow { display: none; }
  body.aio-article .art-compare { grid-template-columns: 1fr; gap: 18px; }
  body.aio-article .art-pull { margin: 48px auto; padding: 40px 0; }
  body.aio-article .art-handoff { padding: 40px 22px 44px; }
  body.aio-article .art-viz { padding: 32px 20px; }
  body.aio-article .art-pies { grid-template-columns: 1fr; gap: 40px; }
  body.aio-article .art-cta { padding: 40px 24px; }
  body.aio-article .art-implications li { padding-left: 56px; }
  body.aio-article .art-index { padding: 40px 24px 80px; }
  body.aio-article .art-index-grid { grid-template-columns: 1fr; }
}

/* ===== Contact — booking embed + pre-booking fallback (gated by _data/site.js) ===== */
.cal-embed {
  width: 100%;
  height: 620px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  margin-top: 14px;
}
.cal-fallback-body {
  margin: 18px 0 22px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}
.cal-fallback-body em {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  color: #fff;
}
a.cal-confirm {
  display: block;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}
.cal-confirm + .cal-confirm { margin-top: 10px; }
.cal-confirm-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* ============================================================
   UI DISCIPLINE PASS (2026-06-09) — fintech-crisp components,
   same theme. Principle: serif is the VOICE (headlines, editorial
   accents), sans is the DATA (numbers, values, controls). Cards get
   real borders + radius, bars go flat, links drop the uppercase
   letterspacing, green is used confidently. Overrides the blocks
   above by cascade order — delete this section to restore.
   ============================================================ */

/* --- Numbers read as data: Inter, heavy, tabular --- */
.split-preview-val {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.split-preview-num {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.appz-mock-val {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.appz-mock-savings { font-size: 24px; }
.loan-carousel-stat-num {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* --- App-card treatment: hairline rows, crisper shell --- */
.appz-mock {
  border-radius: 20px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    0 24px 60px -30px rgba(0, 0, 0, 0.55);
}
.appz-mock-row {
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.appz-mock-divider { display: none; }
.appz-mock-dot { box-shadow: none; }

/* --- Scenario card becomes a real card --- */
.scenario-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 28px 56px 28px 28px;
  background: rgba(255, 255, 255, 0.02);
}
.scenario-card:hover { background: rgba(255, 255, 255, 0.05); }
.scenario-card-arrow { right: 22px; }

/* --- Flat slider bars: no glow --- */
.split-preview-fill {
  box-shadow: none;
  height: 6px;
  top: -2px;
  border-radius: 3px;
}

/* --- Text links: sentence case, green, no underline rule --- */
.philo-more,
.split-list-cta,
.appz-more {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent-green);
  border-bottom: none;
}
.philo-more:hover,
.split-list-cta:hover,
.appz-more:hover { color: #fff; }
.big3-foot a { font-weight: 700; }

/* --- Eyebrows become kickers: green, bold --- */
.split-eb,
.big3-eb,
.appz-eb,
.closing-eb {
  color: var(--accent-green);
  font-weight: 700;
  letter-spacing: 0.18em;
}

/* --- Hero book cue: green, weightier --- */
.book-text { color: var(--accent-green); font-weight: 700; }

/* --- Contact funnel: the quiet exit ramp on every content page --- */
.funnel { padding: 64px 24px 84px; }
.funnel-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px clamp(24px, 4vw, 48px) 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.02);
}
.funnel-eb {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-green);
  font-weight: 700;
  margin-bottom: 16px;
}
.funnel-h {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: -0.028em;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 14px;
}
.funnel-h em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--accent-green);
}
.funnel-body {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 28px;
  max-width: 52ch;
}
/* Primary "Get started →" CTA → the tracked /contact/ sheet. White pill so it
   reads on both the dark funnel and the colored product-page funnel band. */
.funnel-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 36px;
  padding: 15px 30px;
  background: #fff;
  color: #0e1e33;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border-radius: 100px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.funnel-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); }
.funnel-cta .funnel-arrow { transition: transform 0.2s; }
.funnel-cta:hover .funnel-arrow { transform: translateX(3px); }
.funnel-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(24px, 4vw, 48px);
}
.funnel-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  text-decoration: none;
  transition: padding-left 0.2s ease;
}
.funnel-row:hover { padding-left: 10px; }
.funnel-lbl {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 700;
}
.funnel-val {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  transition: color 0.2s;
}
.funnel-row:hover .funnel-val { color: var(--accent-green); }
.funnel-arrow { display: inline-block; transition: transform 0.2s; }
.funnel-row:hover .funnel-arrow { transform: translateX(4px); }
@media (max-width: 640px) {
  .funnel-rows { grid-template-columns: 1fr; }
}

/* --- AIO panels: product-UI artifact cards (replaced snowglobe + painting) ---
   Robinhood vocabulary: an account card, hairline transaction rows, one big
   tabular number, the green doing the storytelling. Animations are opacity-only. */
.aio-viz-app {
  max-width: 420px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.aio-viz-app.is-visible { opacity: 1; transform: none; }

/* Panel 3 — HyperFrames depiction (home vs bank). Silent autoplay loop in a
   clean dark frame; floats like the app visuals (no double-card). */
.aio-viz-depict {
  max-width: 560px;
  margin: 0 auto;
  border: 0;
  background: none;
  padding: 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.aio-viz-depict.is-visible { opacity: 1; transform: none; }
.aio-depict-vid {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  /* no frame — a soft black halo melts the steel-black video into the panel so it reads as one black field */
  box-shadow: 0 0 120px 52px rgba(0, 0, 0, 0.88);
  background: transparent;
}
/* Principal First — a PHONE showing the bank account; the balance drops live.
   The old .aio-app-card is replaced by .aio-phone; .aio-app-* content styles
   below are reused inside the phone screen. The outer .aio-viz card is dropped
   for app panels so the phone (and the Liquidity fork) float, not double-card. */
.aio-viz-app { border: 0; background: none; padding: 0; }
.aio-phone {
  width: 322px;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  background: linear-gradient(155deg, #232732, #0b0e14);
  border-radius: 46px;
  padding: 13px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.06),
    inset 0 0 0 5px rgba(0, 0, 0, 0.45),
    0 36px 80px -34px rgba(0, 0, 0, 0.78);
}
.aio-phone-cam {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 22px;
  background: #000;
  border-radius: 12px;
  z-index: 4;
}
.aio-phone-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 560px;
  background: radial-gradient(130% 90% at 50% -10%, #14243c, #0a0e1a 62%);
  border-radius: 34px;
  padding: 16px 18px 22px;
  overflow: hidden;
}
.aio-phone-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  font-variant-numeric: tabular-nums;
  margin-bottom: 24px;
  padding: 0 6px;
}
.aio-phone-sigs { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.9); }
.aio-phone-sigs svg { display: block; }
.aio-phone .aio-app-head { margin-bottom: 18px; }
.aio-phone .aio-app-balance-num { font-size: 39px; height: 48px; }
.aio-phone .aio-app-row { font-size: 13px; padding: 12px 0; }
.aio-phone .aio-app-foot { font-size: 11.5px; }
.aio-app-head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 22px;
}
.aio-app-balance-lbl {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 6px;
}
.aio-app-balance-num {
  position: relative;
  height: 46px;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 38px;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  margin-bottom: 16px;
}
.aio-app-num-a, .aio-app-num-b { position: absolute; left: 0; top: 0; }
.aio-app-num-a { animation: aioNumA 7s ease-in-out infinite; }
.aio-app-num-b { opacity: 0; animation: aioNumB 7s ease-in-out infinite; }
@keyframes aioNumA { 0%, 38% { opacity: 1; } 46%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes aioNumB { 0%, 38% { opacity: 0; } 46%, 92% { opacity: 1; } 100% { opacity: 0; } }
.aio-app-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14px;
}
.aio-app-row-lbl { color: rgba(255, 255, 255, 0.65); }
.aio-app-row-amt {
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.aio-app-green { color: var(--accent-green); }
.aio-app-row-deposit { animation: aioRowA 7s ease-in-out infinite; }
.aio-app-row-applied { animation: aioRowB 7s ease-in-out infinite; }
@keyframes aioRowA { 0%, 8% { opacity: 0.18; } 18%, 94% { opacity: 1; } 100% { opacity: 0.18; } }
@keyframes aioRowB { 0%, 30% { opacity: 0.18; } 42%, 94% { opacity: 1; } 100% { opacity: 0.18; } }
.aio-app-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
.aio-app-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-green);
  animation: appzPulse 2.4s ease-in-out infinite;
}

/* Principal First — same-day ledger (replaces the phone, which now leads the
   credibility panel). A flat statement, not a device: a morning deposit drops
   the balance, and that same night interest is charged on the smaller number.
   Green = money arriving; gold = the resulting lower balance interest hits.
   Uses the .aio-viz bordered card; sizes echo the phone's app rows. */
.aio-viz-sameday {
  max-width: 420px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.aio-viz-sameday.is-visible { opacity: 1; transform: none; }
.aio-sd-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}
.aio-sd-time {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
  width: 64px;
  flex: none;
}
.aio-sd-lbl { color: rgba(255, 255, 255, 0.7); flex: 1; }
.aio-sd-amt {
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.aio-sd-green { color: var(--accent-green); }
.aio-sd-bal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin: 18px 0 0;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.aio-sd-bal-lbl {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}
.aio-sd-bal-nums {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  font-variant-numeric: tabular-nums;
}
.aio-sd-bal-nums s { color: rgba(255, 255, 255, 0.32); text-decoration-thickness: 1px; }
.aio-sd-arr { color: rgba(255, 255, 255, 0.32); }
.aio-sd-bal-nums b {
  font-weight: 800;
  font-size: 19px;
  color: var(--gold-2);
  letter-spacing: -0.02em;
}
.aio-sd-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-green);
}
.aio-sd-rule::before,
.aio-sd-rule::after {
  content: '';
  height: 1px;
  flex: 1;
  background: rgba(120, 220, 160, 0.22);
}
.aio-sd-pm .aio-sd-amt { color: var(--gold-2); }
.aio-sd-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-size: 18px;
  color: var(--fg-2);
}

/* Proven Abroad — country proof band (Panel 1). Three sourced stat cards under
   the headline: UK and Australia carry the adoption + savings numbers; the USA
   card is gold-marked as the newcomer. Editorial Fraunces numerals, not the
   app's Inter-800, so it reads as data, not a transaction. */
.aio-proof-band {
  max-width: 1180px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
/* Each card carries an accent (--ac): a cool slate for the UK, sage for
   Australia, gold for the US — a cool→warm progression that lands on the
   gold "it's here now" payoff. Accent shows on the eyebrow dot + number rule. */
.aio-proof-card {
  --ac: #8a93a6;
  --map: url(/assets/map-gb.svg);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 22px 22px 21px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 44px -30px rgba(0, 0, 0, 0.75);
  transition: opacity 0.6s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.aio-proof-card:nth-child(2) { --ac: #7e9b86; --map: url(/assets/map-au.svg); }
.aio-proof-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.18); }
/* armed state JS sets before revealing — staggered fade + rise into view */
.aio-proof-card.pre { opacity: 0; transform: translateY(26px); }
/* Faint country silhouette behind each card, tinted in the card's accent so the
   shape (UK / Australia / USA) doubles as the country marker. Clipped by the
   card, sits beneath the text. Static mask — no blur/filter, perf-safe. */
.aio-proof-card > * { position: relative; z-index: 1; }
.aio-proof-card::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -26px;
  width: 238px;
  height: 238px;
  background: var(--ac);
  -webkit-mask: var(--map) no-repeat center / contain;
  mask: var(--map) no-repeat center / contain;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}
.aio-proof-eb {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.aio-proof-eb::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ac);
  box-shadow: 0 0 10px -1px var(--ac);
}
.aio-proof-num {
  font-family: 'Space Grotesk', sans-serif;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-weight: 360;
  font-size: clamp(33px, 3.4vw, 45px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  position: relative;
  padding-bottom: 12px;
}
.aio-proof-num::after {
  content: "";
  position: absolute;
  left: 1px;
  bottom: 0;
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: var(--ac);
  opacity: 0.8;
}
.aio-proof-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 11px;
}
.aio-proof-note {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-2);
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.aio-proof-note em {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-size: 13.5px;
  color: var(--fg);
}
/* USA — the newcomer: the gold "here / now" card, lifted above the two proven markets */
.aio-proof-card.is-usa {
  --ac: var(--gold-2);
  --map: url(/assets/map-us.svg);
  border-color: rgba(214, 178, 119, 0.32);
  background: linear-gradient(180deg, rgba(214, 178, 119, 0.12), rgba(214, 178, 119, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(214, 178, 119, 0.10), 0 24px 54px -30px rgba(0, 0, 0, 0.7);
}
.aio-proof-card.is-usa:hover { border-color: rgba(214, 178, 119, 0.52); }
.aio-proof-card.is-usa .aio-proof-num {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  color: var(--gold-2);
}
.aio-proof-card.is-usa .aio-proof-note em { color: var(--gold-2); }
@media (max-width: 860px) {
  .aio-proof-band { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
}

/* Panel 1 phone — live balance ticker + incoming-text banners */
.aio-phone .aio-app-balance-num { display: flex; align-items: baseline; gap: 9px; }
.aiop-tick { font-size: 17px; font-weight: 700; line-height: 1; }
.aiop-tick.down { color: var(--accent-green); }
.aiop-tick.up { color: #d8a07a; }
.aio-app-row-amt.aiop-clay { color: #d8a07a; }
.aiop-notes { position: absolute; left: 12px; right: 12px; top: 48px; pointer-events: none; z-index: 5; }
.aiop-note {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(26, 32, 44, 0.94);
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  opacity: 0;
  transform: translateY(-16px) scale(0.98);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.aiop-note.is-on { opacity: 1; transform: none; }
.aiop-note-av {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(150deg, #3a4458, #232a38);
}
.aiop-note.is-me .aiop-note-av { background: linear-gradient(150deg, var(--accent-green), #2f7a52); color: #06140d; }
.aiop-note-bd { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.aiop-note-bd b { font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 700; color: #fff; }
.aiop-note-bd > span { font-family: 'Inter', sans-serif; font-size: 11.5px; line-height: 1.32; color: rgba(255, 255, 255, 0.72); }
/* tall-phone fill: a faint recent-activity ledger, footer pinned to the bottom */
.aio-phone .aio-app-foot { margin-top: auto; }
.aiop-recent-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.34);
  margin: 9px 0 1px;
}
.aiop-dim { opacity: 0.46; }
/* Compress the recent rows so the phone keeps a realistic handset ratio
   without shrinking the payoff chart below them. */
.aio-phone .aiop-recent .aio-app-row { padding: 5px 0; font-size: 12.5px; }

/* Robinhood-style payoff chart in the lower half of the phone. The hero is the
   green balance line diving to zero (with a gradient glow fill); the dashed
   line is a 30-yr loan still mostly owed at the payoff point. No blur filters
   (perf rule) — depth comes from the gradient fill + a bright crisp line. */
.aiop-chart { margin-top: 16px; }
.aiop-chart-top { display: flex; justify-content: space-between; align-items: center; }
.aiop-chart-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  font-weight: 600;
}
.aiop-chart-tag {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent-green);
  background: rgba(61, 220, 151, 0.12);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.aiop-chart-val { display: flex; align-items: baseline; gap: 8px; margin: 5px 0 8px; flex-wrap: wrap; }
.aiop-chart-val b { font-family: 'Inter', sans-serif; font-size: 21px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.aiop-chart-val span { font-family: 'Inter', sans-serif; font-size: 11px; color: rgba(255, 255, 255, 0.55); }
.aiop-chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.aiop-base { stroke: rgba(255, 255, 255, 0.10); stroke-width: 1; vector-effect: non-scaling-stroke; }
.aiop-mark { stroke: rgba(61, 220, 151, 0.30); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.aiop-fill { fill: url(#aiopFill); stroke: none; }
.aiop-trad { fill: none; stroke: rgba(255, 255, 255, 0.30); stroke-width: 1.6; stroke-dasharray: 3 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.aiop-line { fill: none; stroke: var(--accent-green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.aiop-dot { fill: var(--accent-green); stroke: #0a0e1a; stroke-width: 2; }
.aiop-t-aio { fill: var(--accent-green); font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; }
.aiop-t-trad { fill: rgba(255, 255, 255, 0.42); font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; }
.aiop-chart-axis {
  display: flex;
  justify-content: space-between;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 3px;
}
/* draw the line + drop the dot in once the phone scrolls into view */
.aio-phone.is-charted .aiop-line { stroke-dasharray: 100; stroke-dashoffset: 100; animation: aiopDraw 1.5s 0.15s ease forwards; }
.aio-phone.is-charted .aiop-dot { opacity: 0; animation: aiopDot 0.4s 1.5s ease forwards; }
@keyframes aiopDraw { to { stroke-dashoffset: 0; } }
@keyframes aiopDot { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .aio-phone.is-charted .aiop-line { animation: none; stroke-dashoffset: 0; }
  .aio-phone.is-charted .aiop-dot { animation: none; opacity: 1; }
}

/* Liquidity wallet (panel 3) — deliberately NOT the panel-2 ledger card:
   green glass, no header row, thick liquidity bar, one cycling tx pill.
   The script in the page drives the cycle; transitions live here. */
/* Liquidity — a FORK: one balance splitting into two jobs (a diagram, not a card) */
.aio-liqw {
  background: linear-gradient(180deg, rgba(14, 38, 28, 0.9), rgba(7, 20, 14, 0.9));
  border-radius: 26px;
  padding: 32px 28px 26px;
  text-align: center;
  box-shadow:
    inset 0 0 0 1px rgba(120, 220, 160, 0.16),
    0 24px 60px -30px rgba(0, 0, 0, 0.55);
}
.aio-liqw-amt {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.aio-liqw-srclbl {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 7px;
}
.aio-liqw-branch { display: block; width: 86%; height: auto; margin: 4px auto -2px; }
.aio-liqw-ends { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.aio-liqw-end {
  padding: 18px 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.25);
}
.aio-liqw-end.green { border-color: rgba(74, 222, 128, 0.32); background: rgba(74, 222, 128, 0.07); }
.aio-liqw-end-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  margin-bottom: 11px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
}
.aio-liqw-end-ic.green { background: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.4); color: var(--accent-green); }
.aio-liqw-end-ic svg { width: 20px; height: 20px; }
.aio-liqw-end-t { font-size: 14px; font-weight: 600; color: #fff; }
.aio-liqw-end-s { font-size: 12px; color: rgba(255, 255, 255, 0.55); margin-top: 3px; }
.aio-liqw-foot {
  margin-top: 18px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .aio-app-num-a { animation: none; opacity: 0; }
  .aio-app-num-b { animation: none; opacity: 1; }
  .aio-app-row-deposit, .aio-app-row-applied { animation: none; opacity: 1; }
  .aio-app-dot { animation: none; }
  .aio-viz-app { opacity: 1; transform: none; }
}

/* --- Life-of-loan calendar widget: one month at a time, flip + scrub --- */
/* Interactive inputs above the widget */
.aio-calw-inputs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 36px;
  margin: 30px 0 4px;
}
.aio-calw-input-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 9px;
}
.aio-calw-input-val {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.aio-calw-inputs input[type="range"] {
  width: 100%;
  accent-color: var(--accent-green);
  cursor: pointer;
}
.aio-calw-surplus {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 18px;
  border: 1px solid rgba(74, 222, 128, 0.22);
  border-radius: 14px;
  background: rgba(74, 222, 128, 0.05);
}
.aio-calw-surplus .aio-calw-input-row { margin-bottom: 4px; }
.aio-calw-surplus .aio-calw-input-val { color: var(--accent-green); font-size: 17px; }
.aio-calw-surplus .aio-calw-input-val.is-neg { color: #f0a0a0; }
.aio-calw-surplus-note {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 640px) {
  .aio-calw-inputs { grid-template-columns: 1fr; gap: 16px; }
}

/* Dynamic payoff headline */
.aio-calw-hero {
  text-align: center;
  margin: 22px 0 18px;
  padding: 24px 22px;
  border: 1px solid rgba(74, 222, 128, 0.28);
  border-radius: 18px;
  background: rgba(74, 222, 128, 0.07);
  transition: border-color 0.3s, background 0.3s;
}
.aio-calw-hero.is-warn {
  border-color: rgba(240, 160, 160, 0.32);
  background: rgba(240, 160, 160, 0.06);
}
.aio-calw-hero-main {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 4vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
}
.aio-calw-hero-sub {
  margin: 9px auto 0;
  max-width: 54ch;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

/* Idle state: no surplus / covered — dim the calendar, it isn't running */
.aio-calw.is-idle { opacity: 0.4; pointer-events: none; }

/* Teaching intro before each widget */
.aio-teach {
  max-width: 64ch;
  margin: 24px auto 30px;
}
.aio-teach p {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.74);
  margin-bottom: 16px;
}
.aio-teach p:last-child { margin-bottom: 0; }
.aio-teach em {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  color: #fff;
}
.aio-teach-how {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.58);
}
.aio-teach-lead { color: #fff; font-weight: 600; }
.aio-teach-key { font-weight: 700; }
.aio-teach-key.e-dep { color: var(--accent-green); }
.aio-teach-key.e-out { color: var(--gold-3); }

/* Calculator result stats (the closer) */
.aio-calc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
}
.aio-calc-stats.is-hidden { display: none; }
.aio-calc-stat {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 27px);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  margin-top: 4px;
}
.aio-calc-keep { color: var(--accent-green); }
@media (max-width: 640px) {
  .aio-calc-stats { grid-template-columns: 1fr; gap: 12px; }
}

.aio-calw {
  margin-top: 28px;
  padding: 30px clamp(20px, 3.5vw, 40px) 26px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 26px;
  background: rgba(10, 14, 28, 0.55);
  transition: opacity 0.3s;
}
.aio-calw-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.aio-calw-arrow {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, transform 0.15s;
}
.aio-calw-arrow:hover:not(:disabled) {
  border-color: var(--accent-green);
  color: var(--accent-green);
  transform: translateY(-1px);
}
.aio-calw-arrow:disabled { opacity: 0.25; cursor: default; }
.aio-calw-month { text-align: center; }
.aio-calw-month-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.018em;
  color: #fff;
}
.aio-calw-month-sub {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-green);
}
.aio-calw-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.aio-calw-stat {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(17px, 1.9vw, 22px);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.aio-calw-legend { margin-top: 14px; }
.aio-calw-scrub { margin-top: 26px; }
.aio-calw-scrub input[type="range"] {
  width: 100%;
  accent-color: var(--accent-green);
  cursor: pointer;
}
.aio-calw-scrub-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
}
.aio-calw-payoff { color: var(--accent-green); }
.aio-calw-cum {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.aio-cal-paid {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent-green);
}
.aio-cal-cell.paidoff {
  box-shadow: inset 0 0 0 1.5px var(--accent-green);
  border-radius: 8px;
}
@media (max-width: 640px) {
  /* Phone: compact the whole calendar card so a full month fits on one screen.
     Keep the stat blocks in a 3-up row (stacking them was the biggest height cost). */
  .aio-calw { margin-top: 18px; padding: 16px 12px 14px; border-radius: 18px; }
  .aio-calw-top { margin-bottom: 12px; gap: 8px; }
  .aio-calw-arrow { width: 34px; height: 34px; font-size: 18px; }
  .aio-calw-month-name { font-size: 23px; }
  .aio-calw-month-sub { font-size: 10px; margin-top: 2px; }

  .aio-calw-stats, .aio-calw-cum { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .aio-calw-stats { margin-bottom: 12px; }
  .aio-calw-stat { font-size: 14px; }
  .aio-calw-cum { margin-top: 12px; padding-top: 12px; }
  .aio-cum-val { font-size: 15px; }
  .aio-cal-label { font-size: 8px; letter-spacing: 0.12em; margin-bottom: 4px; }

  .aio-cal-cell { min-height: 46px; padding: 5px 5px 6px; }
  .aio-cal-day { font-size: 11px; margin-bottom: 1px; }
  .aio-cal-interest { font-size: 8.5px; }
  .aio-cal-event { font-size: 8px; margin-top: 1px; line-height: 1.2; }
  .aio-cal-weekdays > div { padding: 5px 3px; font-size: 7.5px; letter-spacing: 0.1em; }
  .aio-dot { top: 6px; right: 6px; width: 4px; height: 4px; }

  .aio-calw-legend { margin-top: 10px; }
  .aio-calw-scrub { margin-top: 14px; }
}

/* --- Loan carousel cards: warm golden hue on the cards themselves ---
   Tune the warmth with the alpha values (0.09 / 0.035 rest, 0.13 hover). */
.loan-carousel-card {
  background: linear-gradient(
    180deg,
    rgba(255, 186, 80, 0.09),
    rgba(255, 186, 80, 0.035)
  );
}
.loan-carousel-card:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 186, 80, 0.13),
    rgba(255, 186, 80, 0.06)
  );
}

/* ============================================================
   ALL-IN-ONE · "PRIVATE-BANK STATEMENT" REDESIGN
   A light ivory document set into the dark page: the two
   calculator widgets + the terms, rendered as one financial
   statement. Ink serif numerals, hairline rules, a balance
   chart in place of the old day-grid. Everything is scoped under
   .aio-statement; the old .aio-cal* / .aio-calw* rules above are
   now dormant (no markup references them).
   ============================================================ */
.aio-statement {
  /* Dark re-skin — the calculator belongs to the page now (hero/panels/CTA).
     The "boxes" carry the color: green deposits/surplus, amber outflows, gold
     result, on a dark ground. --paper now = the dark grounds, --ink = light text. */
  --paper: #16241d;        /* section ground — lifted so the cream card isn't a stark contrast */
  --paper-inset: #0d1815;  /* lifted card / box */
  --ink: #f1f0e9;          /* primary light text */
  --ink-2: #a6b1aa;        /* muted */
  --ink-3: #6e7a73;        /* faint */
  --rule: rgba(255, 255, 255, 0.09);
  --rule-2: rgba(255, 255, 255, 0.18);
  --gain: #5fd98e;         /* deposits / surplus */
  --gain-soft: rgba(95, 217, 142, 0.13);
  --cost: #e8a24a;         /* outflows */
  --cost-soft: rgba(232, 162, 74, 0.11);
  --gold: #ffd271;         /* the headline number */
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-family: 'Inter', sans-serif;
}
/* faint green glow at the top so it eases out of the panels, not a hard slab */
.aio-statement::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(130% 80% at 50% 0%, rgba(95, 217, 142, 0.06), transparent 58%),
    radial-gradient(90% 60% at 50% 100%, rgba(0, 0, 0, 0.3), transparent 65%);
}
.aio-statement > * { position: relative; z-index: 1; }

.aio-stmt-sec { padding: 96px 24px; }
.aio-stmt-sec + .aio-stmt-sec,
.aio-statement .aio-structure { border-top: 1px solid var(--rule); }
.aio-stmt-inner { max-width: 1000px; margin: 0 auto; }

.aio-stmt-eb {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 20px;
}
.aio-statement .aio-h2 { color: var(--ink); }
.aio-statement .aio-h2 em { color: var(--ink); font-style: italic; }
.aio-statement .aio-teach { color: var(--ink-2); }
.aio-statement .aio-teach p { color: var(--ink-2); }
.aio-statement .aio-teach-how { color: var(--ink-2); }
.aio-statement .aio-teach em { color: var(--ink); font-style: italic; }
.aio-statement .aio-teach-lead { color: var(--ink); font-weight: 600; }
.aio-statement .aio-teach-key.e-dep { color: var(--gain); font-weight: 600; }
.aio-statement .aio-teach-key.e-out { color: var(--cost); font-weight: 600; }

.aio-stmt-closing {
  max-width: 60ch;
  margin: 38px auto 0;
  text-align: center;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
}
.aio-stmt-closing em { color: var(--ink); font-style: italic; }
.aio-stmt-note {
  max-width: 72ch;
  margin: 28px auto 0;
  text-align: center;
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.55;
}
.aio-stmt-note em { color: var(--ink-2); font-style: italic; }

/* ---- the document card ---- */
.stmt {
  /* white "statement" card on the dark section — black + gold lettering inside.
     Variables are re-scoped here so ONLY the card flips light; the section's
     heading/lead around it stay on the dark palette. */
  --paper: #e9dab8;
  --paper-inset: #e9dab8;
  --ink: #181610;
  --ink-2: #5a544a;
  --ink-3: #948e82;
  --rule: rgba(0, 0, 0, 0.12);
  --rule-2: rgba(0, 0, 0, 0.18);
  --gain: #2f7d4a;
  --gain-soft: rgba(47, 125, 74, 0.10);
  --cost: #b5562f;
  --cost-soft: rgba(181, 86, 47, 0.08);
  --gold: #8f6912;
  margin-top: 44px;
  background: var(--paper-inset);
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0 30px 70px -50px rgba(0, 0, 0, 0.9);
}
.stmt-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 17px 28px;
  border-bottom: 1px solid var(--rule);
  font-size: 12.5px;
  color: var(--ink-2);
}
.stmt-head-meta { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.stmt-head-tag {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

/* ---- the big outcome ---- */
.stmt-hero {
  padding: 42px 28px 30px;
  text-align: center;
  border-bottom: 1px solid var(--rule);
}
.stmt-hero-lbl {
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stmt-hero-num {
  font-family: 'Space Grotesk', sans-serif;
  font-variation-settings: 'opsz' 144, 'SOFT' 20;
  font-weight: 300;
  font-size: clamp(44px, 7.5vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 12px 0 10px;
}
.stmt-hero-sub {
  font-size: 15px;
  color: var(--ink-2);
  max-width: 46ch;
  margin: 0 auto;
  line-height: 1.5;
}
.stmt-hero.is-warn .stmt-hero-num {
  font-size: clamp(26px, 3.6vw, 38px);
  color: var(--cost);
}

/* ---- the balance chart ---- */
.stmt-legend {
  display: flex;
  gap: 24px;
  justify-content: center;
  padding: 22px 28px 0;
  font-size: 12.5px;
  color: var(--ink-2);
}
.stmt-legend b { font-weight: 600; }
.stmt-legend .k {
  display: inline-block;
  width: 20px;
  height: 0;
  border-top: 2px solid;
  margin-right: 8px;
  vertical-align: middle;
}
.stmt-legend .k-aio { border-color: var(--gain); }
.stmt-legend .k-trad { border-color: var(--cost); }
.stmt-chart { padding: 16px 28px 10px; }
.stmt-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.stmt-chart:empty { display: none; }
.stmt-grid-line { stroke: var(--rule); stroke-width: 1; }
.stmt-area { fill: var(--gain-soft); }
.stmt-line-trad { fill: none; stroke: var(--cost); stroke-width: 1.5; stroke-linejoin: round; }
.stmt-line-aio { fill: none; stroke: var(--gain); stroke-width: 2.25; stroke-linejoin: round; }
.stmt-marker { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; }
.stmt-marker-dot { fill: var(--ink); }
.stmt-cursor { stroke: var(--ink-2); stroke-width: 1; }
.stmt-cursor-dot { fill: var(--gain); stroke: var(--paper-inset); stroke-width: 2; }
.stmt-svg-lbl { font-family: 'Inter', sans-serif; font-size: 11px; fill: var(--ink-3); }

/* ---- the scrubber ---- */
.stmt-scrub { padding: 10px 28px 28px; }
.stmt-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: var(--rule-2);
  cursor: pointer;
  outline: none;
}
.stmt-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--paper-inset);
  box-shadow: 0 0 0 1px var(--ink);
}
.stmt-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--paper-inset);
  box-shadow: 0 0 0 1px var(--ink);
}
.stmt-scrub-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 13px;
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.stmt-scrub-payoff { color: var(--gain); font-weight: 600; }

/* ---- the ledger ---- */
.stmt-ledger {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
}
.stmt-ledger > div {
  padding: 22px 28px;
  border-right: 1px solid var(--rule);
}
.stmt-ledger > div:last-child { border-right: none; }
.stmt-ledger-lbl {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 9px;
}
.stmt-ledger-val {
  font-family: 'Space Grotesk', sans-serif;
  font-variation-settings: 'opsz' 72;
  font-weight: 340;
  font-size: clamp(22px, 3vw, 30px);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.stmt-ledger-val.gain { color: var(--gain); }
.stmt-ledger-val.cost { color: var(--cost); }

/* ---- interactive closer: controls + readout ---- */
.stmt-interactive { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); }
.stmt-controls { padding: 30px 28px; border-right: 1px solid var(--rule); }
.stmt-field { margin-bottom: 22px; }
.stmt-field:last-child { margin-bottom: 0; }
.stmt-field-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.stmt-field-lbl { font-size: 12.5px; color: var(--ink-2); }
.stmt-field-val {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* editable value box — drag the slider OR type the number in */
.stmt-field-input {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  width: 116px;
  padding: 4px 9px;
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  background: transparent;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.stmt-field-input:hover { border-color: var(--ink-3); }
.stmt-field-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(143, 105, 18, 0.15);
}
.stmt-compact .stmt-controls .stmt-field-row { gap: 12px; }
.stmt-surplus {
  margin-top: 26px;
  padding: 18px 20px;
  background: var(--gain-soft);
  border: 1px solid rgba(95, 217, 142, 0.3);
}
.stmt-surplus .stmt-field-row { margin-bottom: 0; }
.stmt-surplus .stmt-field-val { color: var(--gain); }
.stmt-surplus .stmt-field-val.is-neg { color: var(--cost); }
.stmt-surplus-note { font-size: 12px; color: var(--ink-2); margin-top: 8px; line-height: 1.45; }
.stmt-readout { padding: 30px 28px; display: flex; flex-direction: column; }
.stmt-readout .stmt-hero { border-bottom: none; padding: 6px 0 16px; text-align: left; }
.stmt-readout .stmt-hero-num { font-size: clamp(32px, 4.4vw, 50px); }
.stmt-readout .stmt-hero-sub { margin: 0; }
.stmt-readout .stmt-legend { justify-content: flex-start; padding: 4px 0 0; }
.stmt-readout .stmt-chart { padding: 8px 0 4px; }
.stmt-readout .stmt-ledger { margin-top: auto; }
.stmt-readout .stmt-ledger > div { padding: 18px 20px 4px 0; border-right: none; }

/* ---- terms section, recolored onto the paper ---- */
.aio-statement .aio-structure { background: transparent; padding: 96px 24px; }
.aio-statement .aio-structure-inner { max-width: 1000px; }
.aio-statement .aio-structure .aio-section-eb { color: var(--ink-3); }
.aio-statement .aio-structure .aio-h2 { color: var(--ink); }
.aio-statement .aio-structure-label { color: var(--ink-3); }
.aio-statement .aio-structure-body { color: var(--ink-2); }
.aio-statement .aio-structure-body em { color: var(--ink); }
.aio-statement .aio-structure-row { border-color: var(--rule) !important; }
.aio-statement .aio-structure-more { color: var(--ink); }
.aio-statement .aio-structure-more:hover { color: var(--gain); }

@media (max-width: 880px) {
  .aio-stmt-sec { padding: 66px 18px; }
  .stmt-interactive { grid-template-columns: 1fr; }
  .stmt-controls { border-right: none; border-bottom: 1px solid var(--rule); }
  .stmt-readout .stmt-hero,
  .stmt-readout .stmt-legend { text-align: center; justify-content: center; }
  .stmt-readout .stmt-ledger > div { padding: 18px 20px; border-right: 1px solid var(--rule); }
  .stmt-readout .stmt-ledger > div:last-child { border-right: none; }
}
@media (max-width: 560px) {
  .stmt-head { flex-direction: column; gap: 4px; }
  .stmt-ledger { grid-template-columns: 1fr; }
  .stmt-ledger > div { border-right: none; border-bottom: 1px solid var(--rule); }
  .stmt-ledger > div:last-child { border-bottom: none; }

  /* calendar: compact so 7 columns fit a phone without horizontal scroll */
  .stmt-cal-bar, .stmt-cal-dow, .stmt-cal-grid, .stmt-cal-scrub { padding-left: 12px; padding-right: 12px; }
  .stmt-cal-stats > div { padding: 12px 14px; }
  .stmt-cal-cell { min-height: 54px; padding: 4px 3px 5px; }
  .stmt-cal-day, .stmt-cal-int { font-size: 9px; }
  .stmt-cal-ev { font-size: 9px; letter-spacing: 0; }
  .stmt-cal-paid { font-size: 8px; letter-spacing: 0.04em; }
  .stmt-cal-mname { font-size: 19px; }
  .stmt-controls-grid { grid-template-columns: 1fr; padding: 22px 16px; gap: 18px; }
  .stmt-controls { padding: 22px 16px; }
}

/* ---- the calendar (day-by-day proof, ivory) ---- */
.stmt-cal { padding-top: 6px; }
.stmt-cal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 28px 18px;
}
.stmt-cal-nav {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--rule-2);
  background: transparent;
  color: var(--ink);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.stmt-cal-nav:hover:not(:disabled) { background: var(--paper); border-color: var(--ink); }
.stmt-cal-nav:disabled { opacity: 0.28; cursor: default; }
.stmt-cal-when { text-align: center; }
.stmt-cal-mname {
  font-family: 'Space Grotesk', sans-serif;
  font-variation-settings: 'opsz' 72;
  font-weight: 340;
  font-size: 24px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.stmt-cal-msub {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 3px;
}
.stmt-cal-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.stmt-cal-stats > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 28px;
  border-right: 1px solid var(--rule);
}
.stmt-cal-stats > div:last-child { border-right: none; }
.stmt-cal-stats .lbl {
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stmt-cal-stats > div > span:last-child {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stmt-cal-dow {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  padding: 14px 28px 0;
}
.stmt-cal-dow span {
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stmt-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  padding: 8px 28px 0;
}
.stmt-cal-cell {
  position: relative;
  min-height: 76px;
  margin: -0.5px 0 0 -0.5px;
  border: 1px solid var(--rule);
  padding: 7px 8px 9px;
  display: flex;
  flex-direction: column;
}
.stmt-cal-cell.empty { background: transparent; }
.stmt-cal-cell.dep { background: transparent; }
.stmt-cal-cell.out { background: transparent; }
.stmt-cal-day { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.stmt-cal-int {
  margin-top: auto;
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.stmt-cal-ev {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.stmt-cal-ev.e-dep { color: var(--gain); }
.stmt-cal-ev.e-out { color: var(--cost); }
.stmt-cal-cell.paid { background: var(--gain); }
.stmt-cal-cell.paid .stmt-cal-day { color: rgba(255, 255, 255, 0.72); }
.stmt-cal-paid {
  margin-top: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
}
.stmt-cal-scrub { padding: 20px 28px 26px; }

/* ---- interactive controls as a compact grid (calculator) ---- */
.stmt-controls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 36px;
  padding: 30px 28px;
  border-bottom: 1px solid var(--rule);
}
.stmt-controls-grid .stmt-field { margin-bottom: 0; }
.stmt-controls-grid .stmt-surplus { grid-column: 1 / -1; margin-top: 4px; }

@media (max-width: 880px) {
  .stmt-controls-grid { grid-template-columns: 1fr; gap: 20px; }
  .stmt-cal-cell { min-height: 58px; padding: 5px 6px 7px; }
  .stmt-cal-day, .stmt-cal-int, .stmt-cal-ev { font-size: 9.5px; }
  .stmt-cal-bar, .stmt-cal-stats > div, .stmt-cal-dow, .stmt-cal-grid, .stmt-cal-scrub { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 560px) {
  .stmt-cal-stats { grid-template-columns: 1fr; }
  .stmt-cal-stats > div { border-right: none; border-bottom: 1px solid var(--rule); flex-direction: row; justify-content: space-between; align-items: baseline; }
  .stmt-cal-stats > div:last-child { border-bottom: none; }
  .stmt-cal-cell { min-height: 48px; }
  .stmt-cal-ev { font-size: 8.5px; }
}

/* ---- consolidated compact closer: one calendar, fits on screen ---- */
.aio-stmt-lead {
  max-width: 62ch;
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}
.aio-stmt-lead em { color: var(--ink); font-style: italic; }
#calculator.aio-stmt-sec { padding-top: 76px; padding-bottom: 84px; }
/* the heading announces the section — gold eyebrow + gold promise, larger type */
#calculator .aio-stmt-eb { color: var(--gold); font-size: 12px; }
#calculator .aio-h2 { font-size: clamp(34px, 5.2vw, 58px); margin-bottom: 18px; }
#calculator .aio-h2 em { color: var(--gold); }

.stmt-compact { margin-top: 30px; }
.stmt-resultbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 28px;
  border-bottom: 1px solid var(--rule);
  background: rgba(196, 150, 38, 0.1);
}
.stmt-result-main { display: flex; flex-direction: column; min-width: 0; }
.stmt-result-lbl { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.stmt-result-num {
  font-family: 'Space Grotesk', sans-serif;
  font-variation-settings: 'opsz' 144, 'SOFT' 20;
  font-weight: 300;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--gold);
  margin: 3px 0 4px;
}
.stmt-result-sub { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.stmt-result-main.is-warn .stmt-result-num { font-size: clamp(18px, 2.4vw, 24px); color: var(--cost); }
.stmt-result-stats { display: flex; gap: 30px; text-align: right; flex: none; }
.stmt-result-stats > div { display: flex; flex-direction: column; gap: 5px; }
.stmt-result-stats .l { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.stmt-result-stats .v { font-family: 'Space Grotesk', sans-serif; font-size: 21px; color: var(--ink); font-variant-numeric: tabular-nums; }
.stmt-result-stats .v.gain { color: var(--gain); }
.stmt-result-stats .v.cost { color: var(--cost); }

.stmt-compact-grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
.stmt-compact .stmt-controls { padding: 24px 26px; border-right: 1px solid var(--rule); }
.stmt-compact .stmt-field { margin-bottom: 15px; }
.stmt-compact .stmt-field:last-child { margin-bottom: 0; }
.stmt-compact .stmt-field-val { font-size: 16px; }
.stmt-compact .stmt-surplus { margin-top: 16px; padding: 13px 16px; }

.stmt-compact .stmt-cal { padding-top: 0; }
.stmt-compact .stmt-cal-bar { padding: 16px 22px 12px; }
.stmt-compact .stmt-cal-mname { font-size: 19px; }
.stmt-compact .stmt-cal-stats > div { padding: 9px 22px; gap: 3px; }
.stmt-compact .stmt-cal-stats .lbl { font-size: 9px; }
.stmt-compact .stmt-cal-stats > div > span:last-child { font-size: 15px; }
.stmt-compact .stmt-cal-dow { padding: 9px 22px 0; }
.stmt-compact .stmt-cal-dow span { font-size: 10px; }
.stmt-compact .stmt-cal-grid { padding: 5px 22px 0; }
.stmt-compact .stmt-cal-cell { min-height: 58px; padding: 6px 8px 8px; }
.stmt-compact .stmt-cal-day { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.stmt-compact .stmt-cal-int { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.stmt-compact .stmt-cal-ev { font-size: 12.5px; font-weight: 700; margin-top: 2px; }
.stmt-compact .stmt-cal-scrub { padding: 14px 22px 18px; }

@media (max-width: 880px) {
  .stmt-compact-grid { grid-template-columns: 1fr; }
  .stmt-compact .stmt-controls { border-right: none; border-bottom: 1px solid var(--rule); }
  .stmt-resultbar { flex-direction: column; align-items: flex-start; gap: 14px; }
  .stmt-result-stats { text-align: left; gap: 26px; }
}
@media (max-width: 560px) {
  .stmt-result-stats { flex-direction: column; gap: 12px; }
}

/* ---- pay-schedule control ---- */
.stmt-pay-sublbl { font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); margin: 6px 0 8px; }
.stmt-pay-amp { color: var(--ink-3); font-size: 13px; padding: 0 2px; }
.stmt-pay-row .stmt-pay-note { width: auto; margin-top: 0; margin-left: auto; font-style: normal; }
.stmt-pay-freq { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 14px; }
.stmt-pay-freq button {
  padding: 7px 4px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.stmt-pay-freq button:hover { border-color: var(--ink); }
.stmt-pay-freq button.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.stmt-pay-rows { display: flex; flex-direction: column; gap: 11px; }
.stmt-pay-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stmt-pay-row-lbl { font-size: 12px; color: var(--ink-2); min-width: 72px; }
.stmt-pay-in {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 2px;
}
.stmt-pay-in i { font-style: normal; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.stmt-pay-in input {
  border: 0;
  background: transparent;
  outline: none;
  padding: 0;
  width: 30px;
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stmt-pay-in:focus-within { border-color: var(--gain); }
.stmt-pay-in input:focus { color: var(--gain); }
.stmt-pay-note { width: 100%; font-size: 10.5px; font-style: italic; color: var(--ink-3); margin-top: -3px; }


/* AIO grotesque type — emphasized words read upright (gold already signals emphasis);
   Space Grotesk has no true italic, so faux-slant is dropped. Scoped to AIO pages. */
body.aio em, body.aio-article em { font-style: normal; }

/* AIO type fix: article reading-body in clean Inter; Space Grotesk display only.
   Space Grotesk has no italic, so all AIO display is upright — emphasis is carried by gold color. */
body.aio-article { font-family: 'Inter', sans-serif; }
body.aio :is(h1,h2,h3,h4,[class*="aio-"]),
body.aio :is(h1,h2,h3,h4,[class*="aio-"]) em,
body.aio-article :is(h1,h2,h3,h4,[class*="art-"]),
body.aio-article :is(h1,h2,h3,h4,[class*="art-"]) em,
body.aio-article h1 .art-script { font-style: normal; }

/* ===== AIO type system (final) — Space Grotesk display, Inter reading body, all upright; gold = emphasis ===== */
/* script bigtitles -> grotesque */
body.aio .aio-panel-bigtitle { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -0.01em; }
/* article: reading text in clean Inter */
body.aio-article { font-family: 'Inter', sans-serif; }
body.aio-article p, body.aio-article li,
body.aio-article .art-lead, body.aio-article .art-deck,
body.aio-article .art-implications, body.aio-article .art-compare-card p { font-family: 'Inter', sans-serif; }
/* article: display in Space Grotesk */
body.aio-article h1, body.aio-article h2, body.aio-article h3, body.aio-article h4,
body.aio-article .art-pull, body.aio-article .art-pull q { font-family: 'Space Grotesk', sans-serif; }
/* no faux-italic anywhere on AIO (Space Grotesk has none); emphasis carried by gold color */
body.aio *, body.aio-article * { font-style: normal !important; }

/* ===== Panel 4 · Liquidity — minimal underwater field =====
   Deep-water gradient (light from the surface above) + slow-rising bubbles.
   Transforms + opacity only; co-prime durations so it never visibly repeats. */
.aio-panel-bleed { position: relative; overflow: hidden; padding: 0; min-height: 88vh;
  display: flex; align-items: center; }
.aio-ocean { position: absolute; inset: 0; z-index: 0;
  background:
    /* sunlight breaking through the surface, biased left of the copy column */
    radial-gradient(90% 55% at 30% -12%, rgba(255, 243, 208, 0.32), rgba(150, 225, 240, 0.12) 44%, transparent 68%),
    /* deepen the right edge so the headline keeps contrast */
    linear-gradient(270deg, rgba(4, 18, 36, 0.45) 0%, transparent 50%),
    /* the ascent: sunlit blue at the surface down to deep ocean */
    linear-gradient(180deg, #2178b5 0%, #14568b 38%, #0a3560 70%, #051d36 100%); }
.aio-bubble { position: absolute; bottom: -48px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%,
    rgba(255,255,255,0.30), rgba(255,255,255,0.05) 58%, rgba(255,255,255,0) 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13);
  animation-name: aioBubbleRise; animation-timing-function: linear;
  animation-iteration-count: infinite; will-change: transform, opacity; }
@keyframes aioBubbleRise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  8%   { opacity: 0.85; }
  25%  { transform: translate3d(9px, -27vh, 0); }
  50%  { transform: translate3d(-7px, -54vh, 0); }
  75%  { transform: translate3d(6px, -81vh, 0); }
  92%  { opacity: 0.55; }
  100% { transform: translate3d(0, -108vh, 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .aio-bubble { animation: none; opacity: 0.28; }
}
.aio-bleed-content { position: relative; z-index: 2; width: 100%; max-width: 1240px; margin: 0 auto;
  padding: 0 56px; display: flex; justify-content: flex-end; }
.aio-bleed-col { max-width: 540px; text-align: left; }
.aio-bleed-col .aio-panel-bigtitle { margin-bottom: 14px; }
@media (max-width: 860px) {
  .aio-panel-bleed { min-height: 74vh; }
  .aio-bleed-content { justify-content: flex-start; padding: 0 26px; }
  .aio-bleed-col { max-width: 100%; }
}

/* ============================================================
   STRIKE RATE PAGE — /services/strike-rate/
   Cream brand skin (matches the homepage): cream ground, navy
   Fraunces headings, copper accent, Inter body. Namespaced .srx-*
   so it stays independent of the dark .sr-* block above, which
   /strategize/ still uses.
   ============================================================ */
body.strikerate {
  /* Brand palette scoped here — styles.css :root is the dark site's, and the
     cream tokens live under body.product. Values match the homepage :root. */
  --cream: #f4efe6;
  --cream-deep: #ece5d8;
  --ink: #0e1e33;
  --ink-soft: rgba(14, 30, 51, 0.62);
  --copper: #b86e3f;
  --copper-deep: #9d5a30;
  --muted: #7a7468;
  --line: rgba(14, 30, 51, 0.12);

  background: var(--cream);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  padding-top: 58px;   /* clear the fixed unified nav (sticky-nav.njk) */
}

/* ---- section scaffolding (mirrors the homepage bands) ---- */
.srx-band { padding: clamp(60px, 8vw, 108px) clamp(20px, 5vw, 64px); }
.srx-band-deep { background: var(--cream-deep); }
.srx-inner { max-width: 1180px; margin: 0 auto; }
.srx-eb {
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--copper-deep); margin-bottom: 18px;
}
.srx-h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(40px, 5.4vw, 70px); font-weight: 400;
  letter-spacing: -0.022em; line-height: 1.04; color: var(--ink); max-width: 15ch;
}
.srx-h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(34px, 4.6vw, 58px); font-weight: 400;
  letter-spacing: -0.02em; line-height: 1.06; color: var(--ink); max-width: 18ch;
}
.srx-h1 em, .srx-h2 em { font-style: italic; color: var(--copper); }
.srx-body {
  font-size: 17px; line-height: 1.65; color: var(--ink-soft); max-width: 56ch; margin-top: 22px;
}
.srx-body em { font-style: normal; font-weight: 700; color: var(--ink); }
.srx-pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--copper); color: #fff; padding: 15px 30px; border-radius: 100px;
  font-weight: 800; font-size: 15px; text-decoration: none;
  box-shadow: 0 16px 34px -16px rgba(184, 110, 63, 0.75);
  transition: transform 0.15s ease, background 0.15s ease;
}
.srx-pill:hover { transform: translateY(-2px); background: var(--copper-deep); }
.srx-underlink {
  display: inline-block; margin-top: 18px; font-weight: 700; font-size: 15px;
  color: var(--copper-deep); text-decoration: underline; text-underline-offset: 4px;
}

/* ---- hero ---- */
.srx-hero { padding: clamp(56px, 7vw, 96px) clamp(20px, 5vw, 64px) clamp(60px, 8vw, 104px); }
.srx-hero-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 5vw, 72px); align-items: center;
}
@media (max-width: 900px) { .srx-hero-inner { grid-template-columns: 1fr; } }

/* ---- the watch card (hero) — a monitor, not a calculator ---- */
.srx-watch-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 24px 26px 20px; box-shadow: 0 30px 60px -34px rgba(14, 30, 51, 0.42);
  max-width: 420px; width: 100%; justify-self: end;
}
@media (max-width: 900px) { .srx-watch-card { justify-self: start; } }
.srx-wc-head {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft); padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.srx-wc-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.srx-wc-lbl { font-size: 14px; color: var(--ink-soft); }
.srx-wc-val { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.srx-wc-val-strike { color: var(--copper); }
.srx-wc-row-save { border-bottom: none; padding-bottom: 6px; }
.srx-wc-save {
  font-family: 'Fraunces', Georgia, serif; font-style: italic;
  font-size: 34px; line-height: 1; letter-spacing: -0.02em; color: var(--copper);
}
.srx-wc-status {
  display: flex; align-items: center; gap: 9px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
}
.srx-wc-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--copper); flex: none;
  box-shadow: 0 0 0 3px rgba(184, 110, 63, 0.18);
}

/* ---- film frames ---- */
.srx-film {
  margin-top: 38px; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); background: var(--ink);
  box-shadow: 0 30px 64px -36px rgba(14, 30, 51, 0.45);
}
.srx-film video { display: block; width: 100%; height: auto; }
.srx-films { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 40px; }
@media (max-width: 820px) { .srx-films { grid-template-columns: 1fr; } }
.srx-film-card { margin: 0; }
.srx-film-cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 14px;
}
.srx-film-cap b { font-size: 16px; font-weight: 700; color: var(--ink); }
.srx-film-cap span {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}

/* ---- watch cards: designed cover over the poster, controls only once open ---- */
.srx-theater {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); background: var(--ink);
  box-shadow: 0 22px 48px -30px rgba(14, 30, 51, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.srx-theater:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 60px -32px rgba(14, 30, 51, 0.55);
}
.srx-theater.is-open, .srx-theater.is-open:hover { transform: none; }
.srx-theater video { display: block; width: 100%; height: auto; }
.srx-theater-open {
  position: absolute; inset: 0; width: 100%; border: 0; cursor: pointer; padding: 16px 18px;
  background: linear-gradient(to top, rgba(5, 10, 18, 0.55), rgba(5, 10, 18, 0) 42%);
  display: flex; align-items: flex-end; justify-content: space-between;
}
.srx-theater.is-open .srx-theater-open { display: none; }
.srx-play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; background: var(--copper);
  box-shadow: 0 12px 28px -10px rgba(184, 110, 63, 0.85);
  transition: transform 0.2s ease, background 0.2s ease;
}
.srx-play svg { width: 22px; height: 22px; fill: #fff; margin-left: 2px; }
.srx-theater-open:hover .srx-play { transform: scale(1.08); background: var(--copper-deep); }
.srx-theater-open:focus-visible { outline: none; box-shadow: inset 0 0 0 3px rgba(184, 110, 63, 0.7); }
.srx-theater-dur {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.92);
  background: rgba(5, 10, 18, 0.55); border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 5px 11px; border-radius: 100px; font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .srx-theater, .srx-theater:hover { transform: none; }
  .srx-theater-open:hover .srx-play { transform: none; }
}

/* ---- three steps ---- */
.srx-steps {
  list-style: none; margin: 44px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
@media (max-width: 860px) { .srx-steps { grid-template-columns: 1fr; } }
.srx-step {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 26px 28px;
}
.srx-step-num {
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 32px;
  line-height: 1; color: var(--copper); margin-bottom: 16px;
}
.srx-step-name { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 9px; }
.srx-step-body { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

/* ---- the setter ---- */
.srx-set-card {
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(24px, 3.4vw, 38px); margin-top: 40px;
  box-shadow: 0 34px 70px -40px rgba(14, 30, 51, 0.4);
}
.srx-set-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 760px) { .srx-set-fields { grid-template-columns: 1fr; } }
.srx-set-lbl {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 9px;
}
.srx-set-input {
  width: 100%; padding: 13px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--cream);
  font-family: inherit; font-size: 20px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.srx-set-input:hover { border-color: rgba(14, 30, 51, 0.26); }
.srx-set-input:focus { border-color: var(--copper); box-shadow: 0 0 0 3px rgba(184, 110, 63, 0.16); }

.srx-set-out {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);
}
@media (max-width: 760px) { .srx-set-out { grid-template-columns: 1fr; gap: 20px; } }
.srx-out-num {
  font-family: 'Fraunces', Georgia, serif; font-style: italic;
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1; letter-spacing: -0.02em; color: var(--copper);
}
.srx-out-lbl { font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); margin-top: 8px; max-width: 30ch; }

.srx-set-send {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);
}
.srx-set-name {
  flex: 1 1 220px; min-width: 0; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--cream);
  font-family: inherit; font-size: 15px; color: var(--ink); outline: none;
  transition: border-color 0.15s ease;
}
.srx-set-name:focus { border-color: var(--copper); }
.srx-set-alt { font-weight: 700; font-size: 14px; color: var(--copper-deep); text-decoration: underline; text-underline-offset: 4px; }
.srx-set-fine { margin-top: 20px; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.srx-set-fine b { color: var(--ink); font-weight: 700; }

/* ---- close ---- */
.srx-close { text-align: left; }
.srx-rows { list-style: none; margin: 38px 0 0; padding: 0; border-top: 1px solid var(--line); max-width: 620px; }
.srx-rows li { border-bottom: 1px solid var(--line); }
.srx-rows a {
  display: grid; grid-template-columns: 104px 1fr; gap: 22px; align-items: baseline;
  padding: 18px 4px; text-decoration: none; transition: padding-left 0.22s ease;
}
.srx-rows a:hover { padding-left: 10px; }
.srx-row-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
.srx-row-val { font-size: 17px; font-weight: 600; color: var(--ink); }
.srx-rows a:hover .srx-row-val { color: var(--copper-deep); }

@media (prefers-reduced-motion: reduce) {
  .srx-pill:hover, .srx-rows a:hover { transform: none; padding-left: 4px; }
}

/* ---- strike rate: intake form ---- */
.srx-wc-save small {
  font-family: 'Inter', sans-serif; font-style: normal; font-size: 14px;
  font-weight: 600; color: var(--ink-soft); margin-left: 2px;
}
.srx-fs-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--copper-deep); margin: 34px 0 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.srx-fs-lbl:first-child { margin-top: 0; }
.srx-set-lbl i { font-style: normal; font-weight: 600; color: rgba(14, 30, 51, 0.38); letter-spacing: 0.06em; }
.srx-set-fields + .srx-set-fields { margin-top: 20px; }
.srx-set-fields-2 { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 760px) { .srx-set-fields-2 { grid-template-columns: 1fr; } }
.srx-set-fields-even { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .srx-set-fields-even { grid-template-columns: 1fr; } }
.srx-set-input-sm { font-size: 16px; font-weight: 600; }

/* ---- the strike ladder: every eighth below their rate, as a payment ---- */
.srx-ladder { margin-top: 30px; }
.srx-ladder-now {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding: 15px 20px; border-radius: 12px;
  background: var(--ink); color: #fff;
  font-variant-numeric: tabular-nums;
}
.srx-ln-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62); margin-right: auto;
}
.srx-ln-rate { font-size: 17px; font-weight: 800; }
.srx-ln-pay { font-size: 17px; font-weight: 800; color: #e7ae7e; }
.srx-ladder-rows { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.srx-lrow {
  display: grid; grid-template-columns: 68px 1fr auto; align-items: baseline; gap: 10px;
  width: 100%; text-align: left; padding: 10px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--cream); cursor: pointer;
  font-family: inherit; font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.srx-lrow:hover { border-color: rgba(184, 110, 63, 0.55); transform: translateY(-1px); }
.srx-lrow.is-on {
  background: #fff; border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(184, 110, 63, 0.16);
}
.srx-lrow-rate { font-size: 15px; font-weight: 800; color: var(--ink); }
.srx-lrow-pay { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.srx-lrow-save { font-size: 14px; font-weight: 800; color: var(--copper-deep); }
.srx-lrow.is-on .srx-lrow-save { color: var(--copper); }
.srx-ladder-more {
  margin-top: 8px; width: 100%; padding: 9px; border-radius: 12px;
  border: 1.5px dashed rgba(14, 30, 51, 0.22); background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink-soft);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.srx-ladder-more:hover { border-color: rgba(184, 110, 63, 0.55); color: var(--copper-deep); }
.srx-ladder-note { margin-top: 10px; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 760px) {
  .srx-ladder-rows { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .srx-lrow { grid-template-columns: 64px 1fr auto; padding: 10px 14px; }
  .srx-ladder-now { gap: 10px; padding: 13px 14px; }
  .srx-ln-rate, .srx-ln-pay { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .srx-lrow:hover { transform: none; } }
.srx-set-select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  font-size: 16px; font-weight: 600; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1e33' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 15px;
}

/* document expectations — swapped by loan type */
.srx-note {
  margin-top: 22px; padding: 18px 20px; border-radius: 14px;
  background: var(--cream); border: 1px solid var(--line); border-left: 3px solid var(--copper);
}
.srx-note-h { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.srx-note-b { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* contact preference */
.srx-pref { margin: 22px 0 0; padding: 0; border: none; }
.srx-pref-opts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.srx-pref-opt { position: relative; }
.srx-pref-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.srx-pref-opt span {
  display: inline-flex; align-items: center; padding: 11px 22px; border-radius: 100px;
  border: 1px solid var(--line); background: var(--cream);
  font-size: 14.5px; font-weight: 700; color: var(--ink-soft); cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.srx-pref-opt span:hover { border-color: rgba(14, 30, 51, 0.3); }
.srx-pref-opt input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.srx-pref-opt input:focus-visible + span { box-shadow: 0 0 0 3px rgba(184, 110, 63, 0.3); }

/* submit + states */
.srx-submit { border: none; cursor: pointer; font-family: inherit; }
.srx-submit:disabled { opacity: 0.6; cursor: default; transform: none; }
.srx-err {
  margin-top: 16px; padding: 12px 16px; border-radius: 10px;
  background: rgba(158, 47, 47, 0.07); border: 1px solid rgba(158, 47, 47, 0.28);
  font-size: 14px; font-weight: 600; color: #9e2f2f;
}
.srx-err[hidden] { display: none; }
.srx-done {
  margin-top: 40px; padding: clamp(26px, 3.4vw, 38px); border-radius: 20px;
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--copper);
  box-shadow: 0 30px 60px -38px rgba(14, 30, 51, 0.4);
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 4vw, 52px); align-items: center;
}
.srx-done[hidden] { display: none; }
@media (max-width: 860px) { .srx-done { grid-template-columns: 1fr; } }
.srx-done-msg b {
  display: block; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 30px; letter-spacing: -0.02em; color: var(--copper); margin-bottom: 10px;
}
.srx-done-msg span { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.srx-done-again {
  display: flex; width: fit-content; align-items: center; gap: 7px; margin-top: 20px;
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--copper-deep);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px;
  transition: color 0.15s ease;
}
.srx-done-again:hover { color: var(--copper); }
/* the person's own watch card — same DNA as the hero monitor */
.srx-done-watch {
  background: var(--cream); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px 22px 16px; max-width: 420px; width: 100%;
}

/* ---- strike rate: the reset comparison ---- */
.srx-reset {
  margin-top: 40px; background: #fff; border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden; box-shadow: 0 30px 60px -38px rgba(14, 30, 51, 0.4);
}
.srx-reset-head {
  padding: 16px 24px; border-bottom: 1px solid var(--line); background: var(--cream);
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-soft);
}
/* the table scrolls inside its own box — the page never scrolls sideways */
.srx-table-wrap { overflow-x: auto; }
.srx-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.srx-table th {
  text-align: left; padding: 14px 24px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.srx-table th:not(:first-child), .srx-table td:not(:first-child) { text-align: right; }
.srx-table td {
  padding: 16px 24px; font-size: 15.5px; color: var(--ink);
  border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.srx-table td:first-child { font-weight: 600; white-space: normal; }
.srx-table tbody tr:last-child td { border-bottom: none; }
.srx-tr-bad td { background: rgba(158, 47, 47, 0.05); }
.srx-tr-bad td:last-child { color: #9e2f2f; font-weight: 700; }
.srx-tr-good td { background: rgba(184, 110, 63, 0.07); }
.srx-tr-good td:first-child { color: var(--copper-deep); font-weight: 700; }
.srx-tr-good td:nth-child(3), .srx-tr-good td:last-child { color: var(--copper-deep); font-weight: 700; }
@media (max-width: 640px) {
  .srx-table th, .srx-table td { padding-left: 16px; padding-right: 16px; }
  .srx-reset-head { padding: 14px 16px; font-size: 12px; }
}

/* ---- strike rate: guided question flow ---- */
.srx-flow { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }
.srx-flow[hidden] { display: none; }
.srx-flow-top { margin-bottom: 26px; }
.srx-flow-bar { height: 3px; border-radius: 3px; background: rgba(14, 30, 51, 0.09); overflow: hidden; }
.srx-flow-bar b {
  display: block; height: 100%; border-radius: 3px; background: var(--copper); width: 0;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.srx-flow-count {
  margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
}

.srx-q[hidden] { display: none; }
/* question hand-off — the incoming question slides in from the direction of
   travel (classes set by app.js show()) */
.srx-q.srx-q-enter { opacity: 0; transform: translateX(26px); }
.srx-q.srx-q-enter-back { opacity: 0; transform: translateX(-26px); }
.srx-q.srx-q-enter-in {
  opacity: 1; transform: none;
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .srx-q.srx-q-enter-in { transition: none; }
}
.srx-q-h {
  font-family: 'Fraunces', Georgia, serif; font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 400; letter-spacing: -0.02em; line-height: 1.14; color: var(--ink);
}
.srx-q-sub { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 54ch; }
.srx-q-input { margin-top: 22px; max-width: 320px; }
.srx-q .srx-set-fields { margin-top: 24px; }
.srx-q .srx-note { margin-top: 24px; }

.srx-choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.srx-choice {
  padding: 13px 24px; border-radius: 100px; cursor: pointer; font-family: inherit;
  border: 1px solid var(--line); background: var(--cream);
  font-size: 15px; font-weight: 700; color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.srx-choice:hover { border-color: var(--copper); transform: translateY(-1px); }
.srx-choice.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.srx-choice:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(184, 110, 63, 0.32); }

.srx-flow-nav { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
.srx-back {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 14.5px; font-weight: 700; color: var(--ink-soft); padding: 8px 2px;
  transition: color 0.15s ease;
}
.srx-back:hover { color: var(--ink); }
.srx-back[hidden], .srx-flow-nav [hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .srx-flow-bar b { transition: none; }
  .srx-choice:hover { transform: none; }
}

/* [hidden] loses to any explicit display — every togglable block needs this */
.srx-set-send[hidden] { display: none; }

/* ---- strike rate: navy bands — the page's two dark moments (the why-film
   band and the close). Text tokens flip to cream; copper lightens a step
   for contrast on ink. The footer continues the navy so the page ends dark,
   matching the product pages (base .footer text is white — unreadable on
   this page's cream body without this). ---- */
body.strikerate .footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.6);
  padding-top: 80px;
}
.srx-band-navy { background: var(--ink); }
.srx-band-navy .srx-eb { color: #d9a06b; }
.srx-band-navy .srx-h2 { color: var(--cream); }
.srx-band-navy .srx-h2 em { color: #d9a06b; }
.srx-band-navy .srx-body { color: rgba(244, 239, 230, 0.72); }
.srx-band-navy .srx-body em { color: #fff; }
.srx-band-navy .srx-film {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 44px 90px -42px rgba(0, 0, 0, 0.85), 0 26px 70px -30px rgba(184, 110, 63, 0.3);
}
.srx-band-navy .srx-rows { border-color: rgba(244, 239, 230, 0.16); }
.srx-band-navy .srx-rows li { border-color: rgba(244, 239, 230, 0.16); }
.srx-band-navy .srx-row-lbl { color: rgba(244, 239, 230, 0.55); }
.srx-band-navy .srx-row-val { color: var(--cream); }
.srx-band-navy .srx-rows a:hover .srx-row-val { color: #d9a06b; }

/* ---- strike rate: hero sparkline — the watch card's artifact. A rate line
   steps down to the dashed strike line; a copper wash marks the window where
   it lands, and the touch point pulses. Illustrative (matches the mock
   numbers below it), not live data. ---- */
.srx-wc-spark { padding: 16px 0 8px; border-bottom: 1px solid var(--line); }
.srx-wc-spark svg { display: block; width: 100%; height: auto; }
.srx-sp-line {
  fill: none; stroke: var(--ink); stroke-width: 2.4;
  stroke-linejoin: round; stroke-linecap: round; opacity: 0.88;
  stroke-dasharray: 100; stroke-dashoffset: 0;
  animation: srx-draw 1.7s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
}
.srx-sp-strike { stroke: var(--copper); stroke-width: 1.5; stroke-dasharray: 5 6; opacity: 0.75; }
.srx-sp-window { fill: rgba(184, 110, 63, 0.1); animation: srx-fade 0.6s ease 1.9s both; }
.srx-sp-dot { fill: var(--copper); animation: srx-fade 0.45s ease 2.1s both; }
.srx-sp-ring {
  fill: none; stroke: var(--copper); stroke-width: 2;
  transform-box: fill-box; transform-origin: center;
  animation: srx-fade 0.45s ease 2.1s both, srx-ring 2.4s ease-out 2.55s infinite;
}
@keyframes srx-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes srx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes srx-ring {
  0% { transform: scale(1); opacity: 0.6; }
  70% { transform: scale(2.7); opacity: 0; }
  100% { transform: scale(2.7); opacity: 0; }
}
.srx-wc-dot { animation: srx-dotpulse 2.4s ease-out infinite; }
@keyframes srx-dotpulse {
  0% { box-shadow: 0 0 0 0 rgba(184, 110, 63, 0.35); }
  70% { box-shadow: 0 0 0 7px rgba(184, 110, 63, 0); }
  100% { box-shadow: 0 0 0 7px rgba(184, 110, 63, 0); }
}

/* ---- strike rate: step-card hover ---- */
.srx-step { position: relative; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.srx-step::before {
  content: ""; position: absolute; top: 0; left: 26px; right: 26px; height: 2px;
  background: var(--copper); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;
}
.srx-step:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -30px rgba(14, 30, 51, 0.35); }
.srx-step:hover::before { transform: scaleX(1); }

/* ---- strike rate: entrance choreography (classes set by the page script;
   without JS nothing is ever hidden) ---- */
.srx-r { opacity: 0; transform: translateY(18px); }
.srx-r-in {
  opacity: 1; transform: none;
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .srx-sp-line, .srx-sp-window, .srx-sp-dot, .srx-sp-ring, .srx-wc-dot { animation: none; }
  .srx-step, .srx-step:hover { transform: none; box-shadow: none; }
  .srx-r { opacity: 1; transform: none; }
}