/* ==========================================================================
   InnerBloom Design System — main.css
   Hand-rolled, mobile-first (design at 390px, enhance up).
   Documented class-by-class in docs/CSS-GUIDE.md — keep the two in sync.

   Table of contents
   01  Fonts (@font-face, self-hosted Fraunces variable)
   02  Design tokens (palette, tints, type scale, spacing, radii, shadows)
   03  Reset + base element styles
   04  Page tints & dark theme sections
   05  Layout: containers, sections, stacks, clusters
   06  Typography classes
   07  Buttons
   08  Cards & medallion
   09  Badges & chips
   10  Forms (inputs, selects, checkboxes, range slider)
   11  Quiz building blocks (choices, grids, scale dots)
   12  Progress bar
   13  Sticky bottom CTA bar
   14  Locked / blurred content overlays
   15  Footer
   16  Decorative utilities (grain, bloom, dividers)
   17  Motion (reveal, pop, shimmer) + reduced-motion
   18  Misc utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 FONTS — Fraunces variable (weight 100–900), latin, self-hosted.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/playfair-latin-normal.ef05b30d6e5c.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/playfair-latin-italic.2175449f9d44.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   02 DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Core palette (SPEC) */
  --cream: #faf6f0;
  --blush: #f2d8d5;
  --plum: #4a2b4d;
  --gold: #c9a24b;
  --sage: #b7c4b0;

  /* Derived tints & shades */
  --cream-deep: #f1e9dc;      /* deeper cream for wells/alt rows          */
  --paper: #fffdf9;           /* card surface, slightly lighter than page */
  --blush-soft: #f9ecea;      /* blush page-tint wash                     */
  --blush-deep: #d9a49e;      /* blush borders/accents                    */
  --plum-soft: #efe6f0;       /* plum page-tint wash (light lavender)     */
  --plum-mid: #6e4b72;        /* secondary text on cream                  */
  --plum-deep: #352037;       /* darkest plum — gradients, dark sections  */
  --gold-soft: #f6ecd6;       /* gold page-tint wash                      */
  --gold-bright: #e3c077;     /* gold text on dark plum (AA-safe)         */
  --gold-deep: #a37f2f;       /* gold text on light bgs (AA-safe)         */
  --sage-soft: #ebefe8;       /* sage page-tint wash                      */
  --sage-deep: #6f7f66;       /* sage text/borders (AA-safe on light)     */

  /* Semantic */
  --ink: #3c2440;                       /* primary text (near-plum)   */
  --ink-soft: rgba(60, 36, 64, 0.72);   /* secondary text             */
  --ink-faint: rgba(60, 36, 64, 0.5);   /* captions, placeholders     */
  --line: rgba(74, 43, 77, 0.14);       /* hairline borders           */
  --line-soft: rgba(74, 43, 77, 0.08);  /* card borders               */
  --page-bg: var(--cream);              /* set by .tint-* classes     */
  --accent: var(--gold);                /* set by .tint-* classes     */

  /* Type */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;

  /* Fluid type scale (390px -> 1100px) */
  --fs-300: clamp(0.8125rem, 0.79rem + 0.15vw, 0.875rem);  /* 13 -> 14px */
  --fs-400: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);       /* 16 -> 17px */
  --fs-500: clamp(1.125rem, 1.07rem + 0.35vw, 1.25rem);    /* 18 -> 20px */
  --fs-600: clamp(1.375rem, 1.26rem + 0.7vw, 1.625rem);    /* 22 -> 26px */
  --fs-700: clamp(1.75rem, 1.53rem + 1.2vw, 2.25rem);      /* 28 -> 36px */
  --fs-800: clamp(2.125rem, 1.77rem + 1.9vw, 2.875rem);    /* 34 -> 46px */
  --fs-900: clamp(2.625rem, 2.05rem + 3vw, 3.75rem);       /* 42 -> 60px */

  /* Spacing scale */
  --sp-1: 0.25rem;   /*  4px */
  --sp-2: 0.5rem;    /*  8px */
  --sp-3: 0.75rem;   /* 12px */
  --sp-4: 1rem;      /* 16px */
  --sp-5: 1.5rem;    /* 24px */
  --sp-6: 2rem;      /* 32px */
  --sp-7: 3rem;      /* 48px */
  --sp-8: 4rem;      /* 64px */
  --sp-9: 6rem;      /* 96px */

  /* Radii */
  --radius-sm: 10px;
  --radius-lg: 18px;
  --radius-2xl: 26px;
  --radius-full: 999px;

  /* Shadows (plum-tinted, soft) */
  --shadow-xs: 0 1px 3px rgba(74, 43, 77, 0.07);
  --shadow-soft: 0 2px 6px rgba(74, 43, 77, 0.05), 0 10px 30px rgba(74, 43, 77, 0.09);
  --shadow-lift: 0 4px 10px rgba(74, 43, 77, 0.08), 0 18px 46px rgba(74, 43, 77, 0.16);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.5s;

  /* Component knobs */
  --tap: 44px;               /* minimum tap target                */
  --cta-bar-h: 92px;         /* reserved space above sticky CTA   */
}

/* --------------------------------------------------------------------------
   03 RESET + BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Decorative blooms intentionally bleed past the viewport edge. Desktop Chrome
     ignores that overflow, but phones let you PAN sideways to it — clip it so the
     page can never scroll left-right. (clip > hidden: creates no scroll container) */
  overflow-x: hidden;
  overflow-x: clip;
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-400);
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--page-bg);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: inherit;
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-800); }
h2 { font-size: var(--fs-700); }
h3 { font-size: var(--fs-600); }
h4 { font-size: var(--fs-500); }
p,
li {
  overflow-wrap: break-word;
}
a {
  color: var(--plum);
  text-decoration-color: rgba(201, 162, 75, 0.6);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-color: var(--gold);
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
::selection {
  background: var(--blush);
  color: var(--plum-deep);
}
:focus-visible {
  outline: 3px solid rgba(201, 162, 75, 0.85);
  outline-offset: 2px;
  border-radius: 4px;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--plum);
  color: var(--cream);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   04 PAGE TINTS & DARK THEME
   .tint-* works on <body> (whole page) or any wrapper (per-question screens).
   Each sets the wash background + a matching --accent.
   -------------------------------------------------------------------------- */
.tint-cream { background-color: var(--cream);      --page-bg: var(--cream);      --accent: var(--gold); }
.tint-blush { background-color: var(--blush-soft); --page-bg: var(--blush-soft); --accent: var(--blush-deep); }
.tint-plum  { background-color: var(--plum-soft);  --page-bg: var(--plum-soft);  --accent: var(--plum-mid); }
.tint-gold  { background-color: var(--gold-soft);  --page-bg: var(--gold-soft);  --accent: var(--gold-deep); }
.tint-sage  { background-color: var(--sage-soft);  --page-bg: var(--sage-soft);  --accent: var(--sage-deep); }

/* Dark, dramatic section (archetype reveal, report cover, hero moments).
   Sets light text + adapts links, buttons, and hairlines inside it. */
.theme-plum {
  background-color: var(--plum);
  background-image: linear-gradient(170deg, #573463 0%, var(--plum) 45%, var(--plum-deep) 100%);
  color: var(--cream);
  --page-bg: var(--plum);
  --accent: var(--gold-bright);
  --ink-soft: rgba(250, 246, 240, 0.78);
  --ink-faint: rgba(250, 246, 240, 0.55);
  --line: rgba(250, 246, 240, 0.22);
  --line-soft: rgba(250, 246, 240, 0.14);
}
.theme-plum a:not(.btn) {
  color: var(--gold-bright);
  text-decoration-color: rgba(227, 192, 119, 0.5);
}
.theme-plum ::selection {
  background: var(--gold-bright);
  color: var(--plum-deep);
}

/* --------------------------------------------------------------------------
   05 LAYOUT
   -------------------------------------------------------------------------- */
/* All three are used standalone in templates, so each must center itself —
   not just override max-width (that left .container-wide/-narrow flush-left). */
.container,
.container-narrow,
.container-wide {
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2rem);
}
.container        { max-width: 42rem; }   /* 672px — reading width   */
.container-narrow { max-width: 26rem; }   /* forms, quiz screens     */
.container-wide   { max-width: 62rem; }   /* gallery grids, report   */

.section {
  padding-block: clamp(2.75rem, 9vw, 5rem);
}
.section-tight {
  padding-block: clamp(1.5rem, 5vw, 2.5rem);
}

/* Vertical rhythm: children get consistent gaps without per-element margins */
.stack > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.stack-lg > * + * { margin-top: var(--sp-6); }

/* Horizontal grouping that wraps (badges, footer links, chip rows) */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
}
.cluster-center { justify-content: center; }

/* Simple responsive grid: 1 col on phones, 2 up from 640px */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   06 TYPOGRAPHY
   -------------------------------------------------------------------------- */
.display-xl { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-900); line-height: 1.05; letter-spacing: -0.015em; }
.display-lg { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-800); line-height: 1.1;  letter-spacing: -0.012em; }
.display-md { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-700); line-height: 1.14; }
.display-sm { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-600); line-height: 1.2; }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-300);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.theme-plum .eyebrow { color: var(--gold-bright); }

.lede {
  font-size: var(--fs-500);
  line-height: 1.55;
  color: var(--ink-soft);
}
.serif-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 480;
}
.pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-600);
  line-height: 1.35;
  color: var(--plum);
  padding-left: var(--sp-4);
  border-left: 3px solid var(--gold);
}
.theme-plum .pull-quote {
  color: var(--cream);
  border-left-color: var(--gold-bright);
}
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.small { font-size: var(--fs-300); }
.text-center { text-align: center; }
.text-gold { color: var(--gold-deep); }
.theme-plum .text-gold { color: var(--gold-bright); }

/* Checklist with gold check marks (locked-contents list, benefits) */
.check-list {
  list-style: none;
  padding: 0;
}
.check-list li {
  position: relative;
  padding-left: 2rem;
  margin-top: var(--sp-3);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.25rem;
  height: 1.25rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 10.5l4.2 4.2L16.5 5.5' fill='none' stroke='%23C9A24B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   07 BUTTONS — every button ≥ 44px tall; primary = gold-on-plum.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 52px;
  padding: 0.8125rem 1.75rem;
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s var(--ease-out), box-shadow 0.25s var(--ease-out),
    background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out),
    opacity 0.25s;
}
.btn:active {
  transform: translateY(1px) scale(0.99);
}
.btn[disabled],
.btn.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

/* Primary: gold lettering on deep plum. The signature InnerBloom button. */
.btn-primary {
  background: linear-gradient(165deg, #5a3660 0%, var(--plum) 55%, var(--plum-deep) 100%);
  color: var(--gold-bright);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 3px 10px rgba(74, 43, 77, 0.28),
    0 10px 26px rgba(74, 43, 77, 0.18);
}
@media (hover: hover) {
  .btn-primary:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 5px 14px rgba(74, 43, 77, 0.32),
      0 14px 34px rgba(74, 43, 77, 0.24);
    transform: translateY(-1px);
  }
}

/* Gold: for the money moment (buy button) — warm gold, plum lettering. */
.btn-gold {
  background: linear-gradient(165deg, #dcb765 0%, var(--gold) 60%, #b8913c 100%);
  color: var(--plum-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 10px rgba(163, 127, 47, 0.3),
    0 10px 26px rgba(74, 43, 77, 0.14);
}
@media (hover: hover) {
  .btn-gold:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 5px 14px rgba(163, 127, 47, 0.36),
      0 14px 34px rgba(74, 43, 77, 0.2);
  }
}

/* Ghost: quiet outlined action (secondary choices, "maybe later") */
.btn-ghost {
  background: transparent;
  border: 1.5px solid rgba(74, 43, 77, 0.35);
  color: var(--plum);
}
@media (hover: hover) {
  .btn-ghost:hover {
    border-color: var(--plum);
    background: rgba(74, 43, 77, 0.04);
  }
}
.theme-plum .btn-ghost {
  border-color: rgba(250, 246, 240, 0.5);
  color: var(--cream);
}

/* Quiet: looks like a link, sized like a button (back buttons, skip) */
.btn-quiet {
  background: transparent;
  color: var(--ink-soft);
  min-height: var(--tap);
  padding: 0.5rem 1rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(74, 43, 77, 0.25);
  text-underline-offset: 3px;
}

.btn-lg { min-height: 60px; padding: 1rem 2.25rem; font-size: 1.125rem; }
.btn-sm { min-height: var(--tap); padding: 0.5rem 1.25rem; font-size: 0.9375rem; }
.btn-block { display: flex; width: 100%; }

/* Loading state: dims the label, spins a ring on the right */
.btn.is-loading {
  pointer-events: none;
  opacity: 0.8;
}
.btn.is-loading::after {
  content: "";
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  border: 2.5px solid currentColor;
  border-top-color: transparent;
  animation: ib-spin 0.7s linear infinite;
}
@keyframes ib-spin {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   08 CARDS
   -------------------------------------------------------------------------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-soft);
}
.card-pad {
  padding: clamp(1.375rem, 5vw, 2rem);
}
.card-lift { box-shadow: var(--shadow-lift); }
.card-flat { box-shadow: none; }

/* Soft tinted cards (teaser insight cards, callouts) */
.card-blush { background: linear-gradient(175deg, #fbf0ee, var(--blush-soft)); border-color: rgba(217, 164, 158, 0.35); }
.card-gold  { background: linear-gradient(175deg, #faf2df, var(--gold-soft));  border-color: rgba(201, 162, 75, 0.35); }
.card-sage  { background: linear-gradient(175deg, #f1f4ee, var(--sage-soft));  border-color: rgba(111, 127, 102, 0.3); }

/* Dark card — pair with .theme-plum content colors automatically */
.card-plum {
  background: linear-gradient(170deg, #573463, var(--plum) 55%, var(--plum-deep));
  border-color: rgba(250, 246, 240, 0.12);
  color: var(--cream);
  --ink-soft: rgba(250, 246, 240, 0.78);
  --ink-faint: rgba(250, 246, 240, 0.55);
  --accent: var(--gold-bright);
}

/* Circular illustrated frame for archetype/question art */
.medallion {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  /* NO percentage padding here: % padding resolves against the PARENT's width,
     which collapsed small medallions to a ~10px content box. The inset lives on
     the image instead, relative to the medallion itself. */
  background: radial-gradient(circle at 35% 28%, #fffdf9 0%, var(--blush-soft) 55%, var(--blush) 100%);
  box-shadow: inset 0 0 0 2px rgba(201, 162, 75, 0.5), var(--shadow-soft);
}
.medallion > img,
.medallion > svg {
  width: 78%;
  height: 78%;
  object-fit: contain;
}
.medallion-sm { width: 96px; }
.medallion-md { width: clamp(140px, 40vw, 180px); margin-inline: auto; }
.medallion-lg { width: clamp(180px, 56vw, 260px); margin-inline: auto; }

/* --------------------------------------------------------------------------
   09 BADGES & CHIPS
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  font-size: var(--fs-300);
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1.2;
  background: var(--cream-deep);
  color: var(--plum);
  border: 1px solid var(--line-soft);
}
.badge-gold  { background: var(--gold-soft);  color: var(--gold-deep);  border-color: rgba(201, 162, 75, 0.4); }
.badge-blush { background: var(--blush-soft); color: #a05a52;           border-color: rgba(217, 164, 158, 0.45); }
.badge-sage  { background: var(--sage-soft);  color: var(--sage-deep);  border-color: rgba(111, 127, 102, 0.35); }
.badge-plum  { background: var(--plum);       color: var(--gold-bright); border-color: transparent; }

/* Lock glyph inside a badge (blurred radar, locked sections) — tinted by
   currentColor via mask, so it works on any badge variant. */
.badge-lock::before {
  content: "";
  width: 0.95em;
  height: 0.95em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3.5' y='8.5' width='13' height='9' rx='2.5'/%3E%3Cpath d='M6.5 8.5V6a3.5 3.5 0 0 1 7 0v2.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3.5' y='8.5' width='13' height='9' rx='2.5'/%3E%3Cpath d='M6.5 8.5V6a3.5 3.5 0 0 1 7 0v2.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Decorative pill (trait words on report/teaser) */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: var(--fs-400);
  font-weight: 550;
  background: var(--paper);
  border: 1.5px solid rgba(201, 162, 75, 0.5);
  color: var(--plum);
}

/* --------------------------------------------------------------------------
   10 FORMS — 16px+ font (prevents iOS zoom), ≥52px tap height.
   -------------------------------------------------------------------------- */
.field { display: block; }
.field + .field { margin-top: var(--sp-4); }
.label {
  display: block;
  font-size: var(--fs-300);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--sp-2);
}
.input,
.select,
.textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 1.05rem;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
}
.input::placeholder,
.textarea::placeholder {
  color: var(--ink-faint);
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3.5px rgba(201, 162, 75, 0.22);
}
.textarea {
  min-height: 120px;
  line-height: 1.55;
  resize: vertical;
}
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5l4 4 4-4' fill='none' stroke='%234A2B4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  padding-right: 2.75rem;
}
.field-hint {
  font-size: var(--fs-300);
  color: var(--ink-faint);
  margin-top: var(--sp-2);
}
.field-error {
  font-size: var(--fs-300);
  font-weight: 600;
  color: #a63d3d;
  margin-top: var(--sp-2);
}
.input.is-invalid,
.select.is-invalid {
  border-color: #c96b6b;
  box-shadow: 0 0 0 3.5px rgba(201, 107, 107, 0.18);
}

/* Checkbox row (email opt-in). ≥44px row height. */
.check-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding-block: var(--sp-2);
  cursor: pointer;
  font-size: var(--fs-300);
  color: var(--ink-soft);
}
.check-row input[type="checkbox"] {
  appearance: none;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.05rem;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.check-row input[type="checkbox"]:checked {
  background-color: var(--plum);
  border-color: var(--plum);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.6 3.6 7.4-8' fill='none' stroke='%23E3C077' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Styled range slider (quiz "slider" question type) */
.ib-slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: var(--tap);
  background: transparent;
  cursor: pointer;
}
.ib-slider::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--blush), var(--gold-soft));
  border: 1px solid var(--line-soft);
}
.ib-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 32px;
  height: 32px;
  margin-top: -12px;
  border-radius: 50%;
  background: linear-gradient(165deg, #dcb765, var(--gold));
  border: 3px solid var(--paper);
  box-shadow: 0 2px 8px rgba(74, 43, 77, 0.3);
}
.ib-slider::-moz-range-track {
  height: 10px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--blush), var(--gold-soft));
  border: 1px solid var(--line-soft);
}
.ib-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(165deg, #dcb765, var(--gold));
  border: 3px solid var(--paper);
  box-shadow: 0 2px 8px rgba(74, 43, 77, 0.3);
}
.slider-labels {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: var(--sp-2);
}
/* Each endpoint gets half the width; the right one hugs the right edge so the
   two labels mirror each other instead of the right one floating from center. */
.slider-labels > span { flex: 1 1 0; }
.slider-labels > span:last-child { text-align: right; }

/* --------------------------------------------------------------------------
   11 QUIZ BUILDING BLOCKS — tappable option cards, never form-looking.
   Toggle selection with .is-selected or aria-pressed="true".
   -------------------------------------------------------------------------- */
.choice {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 56px;
  padding: 1rem 1.125rem;
  text-align: left;
  font-size: var(--fs-400);
  font-weight: 550;
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid rgba(74, 43, 77, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s,
    transform 0.15s var(--ease-out);
}
.choice:active {
  transform: scale(0.985);
}
.choice.is-selected,
.choice[aria-pressed="true"] {
  border-color: var(--gold);
  background: var(--gold-soft);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.22), var(--shadow-xs);
}
.choice + .choice { margin-top: var(--sp-3); }

/* emoji_scale rendered as stacked choice boxes: emoji + always-visible label */
.choice-emoji { align-items: flex-start; }
.choice-emoji .choice-emoji-mark { font-size: 1.4rem; line-height: 1.35; flex: 0 0 auto; }
.choice-emoji .choice-emoji-text { flex: 1 1 auto; }

/* 2-up grid of image choices (image_pick) — .choice-art stacks art over label */
.choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.choice-grid .choice { margin-top: 0; }
.choice-art {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
}
.choice-art img,
.choice-art svg {
  width: 100%;
  max-width: 128px;
  height: auto;
}

/* Row of big round tap targets (emoji_scale) */
.scale-row {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
}
.scale-dot {
  display: grid;
  place-items: center;
  width: clamp(52px, 15vw, 64px);
  aspect-ratio: 1;
  font-size: 1.6rem;
  background: var(--paper);
  border: 2px solid rgba(74, 43, 77, 0.12);
  border-radius: 50%;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s,
    transform 0.15s var(--ease-out);
}
.scale-dot:active { transform: scale(0.94); }
.scale-dot.is-selected,
.scale-dot[aria-pressed="true"] {
  border-color: var(--gold);
  background: var(--gold-soft);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.22);
  transform: scale(1.06);
}

/* Word grid (pick 3 of 9): selectable chips */
.chip-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-2);
}
.chip-select {
  min-height: var(--tap);
  padding: 0.55rem 1.15rem;
  font-family: var(--font-display);
  font-size: var(--fs-500);
  font-weight: 520;
  color: var(--plum);
  background: var(--paper);
  border: 2px solid rgba(74, 43, 77, 0.14);
  border-radius: var(--radius-full);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, background-color 0.15s, transform 0.15s var(--ease-out),
    box-shadow 0.15s;
}
.chip-select:active { transform: scale(0.96); }
.chip-select.is-selected,
.chip-select[aria-pressed="true"] {
  border-color: var(--gold);
  background: var(--gold-soft);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.2);
}

/* --------------------------------------------------------------------------
   12 PROGRESS BAR
   Set width on .progress-fill inline (style="width:42%") or via JS.
   -------------------------------------------------------------------------- */
.progress {
  height: 9px;
  border-radius: var(--radius-full);
  background: rgba(74, 43, 77, 0.1);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), #dcb765 60%, var(--gold));
  transition: width 0.45s var(--ease-out);
}
/* Animated sheen while "analyzing" */
.progress-shimmer .progress-fill {
  background: linear-gradient(90deg, var(--gold) 0%, #ecd9a8 45%, var(--gold) 90%);
  background-size: 200% 100%;
  animation: ib-shimmer 1.6s linear infinite;
}
@keyframes ib-shimmer {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}
.progress-note {
  font-size: var(--fs-300);
  color: var(--ink-soft);
  text-align: center;
  margin-top: var(--sp-2);
  min-height: 1.4em;
}

/* --------------------------------------------------------------------------
   13 STICKY BOTTOM CTA BAR (mobile thumb-reach)
   Add .has-cta-bar to <body> so content never hides behind the bar.
   -------------------------------------------------------------------------- */
.cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 0.75rem clamp(1rem, 4vw, 1.5rem) calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: rgba(250, 246, 240, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-soft);
  box-shadow: 0 -8px 30px rgba(74, 43, 77, 0.1);
}
.cta-bar-inner {
  max-width: 26rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.cta-bar-inner > .btn { flex: 1; }
.cta-bar-note {
  font-size: var(--fs-300);
  color: var(--ink-soft);
  text-align: center;
  margin-top: var(--sp-1);
}
.has-cta-bar {
  padding-bottom: calc(var(--cta-bar-h) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 720px) {
  .cta-bar-desktop-hide { display: none; }
  .has-cta-bar { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   14 LOCKED / BLURRED CONTENT (teaser radar)
   Wrap the blurred SVG in .locked-panel; center a .lock-badge over it.
   -------------------------------------------------------------------------- */
.locked-panel {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
}
.locked-panel .lock-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-full);
  background: rgba(53, 32, 55, 0.88);
  color: var(--gold-bright);
  font-size: var(--fs-300);
  font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow: var(--shadow-lift);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* --------------------------------------------------------------------------
   15 FOOTER — default + slim variant
   -------------------------------------------------------------------------- */
.footer {
  margin-top: auto;
  padding: var(--sp-7) 0 calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-soft);
  background: var(--cream-deep);
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--fs-300);
}
.footer-logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-500);
  color: var(--plum);
  margin-bottom: var(--sp-3);
}
.footer-logo a {
  color: inherit;
  text-decoration: none;   /* wordmark link, not an underlined text link */
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.footer-links a {
  color: var(--ink-soft);
  text-decoration-color: rgba(74, 43, 77, 0.25);
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
}
.footer-disclaimer {
  max-width: 34rem;
  margin-inline: auto;
  color: var(--ink-faint);
  line-height: 1.55;
}
.footer-copy {
  margin-top: var(--sp-3);
  color: var(--ink-faint);
}
/* Slim: quiz/analyzing screens — compact, no logo block */
.footer-slim {
  padding: var(--sp-5) 0 calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  background: transparent;
  border-top: none;
}
.footer-slim .footer-links { margin-bottom: var(--sp-2); }

/* Brand wordmark (page headers) */
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-500);
  letter-spacing: -0.01em;
  color: var(--plum);
  text-decoration: none;
}
.theme-plum .wordmark { color: var(--cream); }
.site-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--sp-4) var(--sp-4) 0;
}

/* --------------------------------------------------------------------------
   16 DECORATIVE UTILITIES
   -------------------------------------------------------------------------- */
/* Subtle film grain overlay. Parent gets position via the class itself. */
.grain {
  position: relative;
  isolation: isolate;
}
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.grain > * {
  position: relative;
  z-index: 2;
}

/* Soft radial "bloom" glow behind hero content. Layers on the page tint. */
.bloom-bg {
  background-image:
    radial-gradient(56vw 40vh at 18% 8%, rgba(242, 216, 213, 0.65), transparent 68%),
    radial-gradient(48vw 34vh at 88% 22%, rgba(201, 162, 75, 0.16), transparent 70%),
    radial-gradient(60vw 42vh at 55% 96%, rgba(183, 196, 176, 0.32), transparent 72%);
}
/* Same element as theme-plum: layer the glows ON TOP of the plum gradient
   (background-image would otherwise replace it). */
.theme-plum.bloom-bg {
  background-image:
    radial-gradient(56vw 40vh at 20% 8%, rgba(227, 192, 119, 0.14), transparent 66%),
    radial-gradient(52vw 38vh at 85% 26%, rgba(242, 216, 213, 0.1), transparent 70%),
    radial-gradient(64vw 44vh at 50% 100%, rgba(183, 196, 176, 0.1), transparent 74%),
    linear-gradient(165deg, #573463 0%, var(--plum) 48%, var(--plum-deep) 100%);
}
/* Element nested inside theme-plum: glows only (plum paints behind it). */
.theme-plum .bloom-bg {
  background-image:
    radial-gradient(56vw 40vh at 20% 6%, rgba(227, 192, 119, 0.14), transparent 66%),
    radial-gradient(52vw 38vh at 85% 30%, rgba(242, 216, 213, 0.1), transparent 70%),
    radial-gradient(64vw 44vh at 50% 100%, rgba(183, 196, 176, 0.1), transparent 74%);
}

/* --------------------------------------------------------------------------
   CURVES — full-width organic section transitions with botanical linework.
   Add .decorated-flow to the section wrapper, .curve-band to each section that
   receives a transition, and render funnel/includes/botanical_divider.html as
   its first child. The extra lower padding keeps the ornament clear of content.
   -------------------------------------------------------------------------- */
.decorated-flow {
  overflow-x: clip;
}
.decorated-flow > section:not(:last-child) {
  padding-bottom: clamp(0.25rem, 1vw, 0.75rem);
}
/* The photo hero keeps its ORIGINAL bottom padding — the tight-gap rule above
   was shaving ~4.5rem off the hero, which dragged the straddling sage bloom up
   over the hero text/button. Restoring it puts the bloom back where approved. */
.decorated-flow > .photo-hero {
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}
.curve-band {
  --divider-height: clamp(3.5rem, 6.5vw, 5rem);
  position: relative;
  z-index: 1;
  isolation: isolate;
  padding-top: clamp(3.25rem, 7vw, 5rem);
}
/* Discover page fine-tuning of the sage → cream transition */
.landing-flow .tint-sage.curve-band {           /* trim the sage at the BOTTOM only */
  padding-bottom: 0;
}
.landing-flow .tint-cream.curve-band {          /* drop "What you get" below the wave */
  padding-top: clamp(5rem, 9vw, 7rem);
}
.curve-band > :not(.botanical-divider) {
  position: relative;
  z-index: 1;
}
.botanical-divider {
  --divider-fill: var(--cream);
  --flora-stroke: var(--plum-mid);
  --flora-leaf: rgba(183, 196, 176, 0.72);
  --flora-petal: var(--blush);
  --flora-center: var(--gold-deep);
  --flora-x: 50%;
  position: absolute;
  z-index: 0;
  inset-inline: 0;
  top: calc(-1 * var(--divider-height) + 1px);
  height: var(--divider-height);
  overflow: visible;
  pointer-events: none;
}
.botanical-divider__wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--divider-fill);
}
/* Cutout variant: the wave is the PREVIOUS section's colour, carved out of the TOP
   of THIS section (which sits behind it with its own gradient/glows) — no second
   coloured layer, so gradient sections have no purple-to-purple seam. */
.botanical-divider--cutout {
  top: -1px;
  height: calc(var(--divider-height) + 1px);
}
.botanical-divider--cutout .botanical-divider__wave {
  fill: var(--wave-cut, var(--cream));
}
.botanical-divider__bloom {
  position: absolute;
  z-index: 0;              /* stays BEHIND the section's own content (which is z-index:1) */
  /* Anchored to the CONTENT COLUMN edge (62rem wide, centered), not the viewport,
     so a bloom keeps the same relationship to the layout at every width/zoom.
     --flora-left is set per-tone (left edge = 50% - 31rem, right edge = 50% + 31rem). */
  left: var(--flora-left, 50%);
  top: var(--flora-top, calc(100% - 3.5rem)); /* straddle the wave but extend DOWN into this section (never up over the previous one's text) */
  width: var(--flora-size, clamp(12rem, 20vw, 16rem));
  height: auto;
  transform: translateX(-50%) rotate(var(--flora-rotate, 0deg)) scaleX(var(--flora-flip, 1));
  opacity: 0.8;
  /* Radial edge-fade — stray marks / messy crop near the PNG edges dissolve to
     transparent so the bloom blends softly into the page (no hard bounding box). */
  -webkit-mask-image: radial-gradient(closest-side, #000 64%, transparent 97%);
  mask-image: radial-gradient(closest-side, #000 64%, transparent 97%);
}
.botanical-divider--sage {
  --divider-fill: var(--sage-soft);
  --flora-left: max(2rem, calc(50% - 31rem + 1rem)); /* straddle the content column's LEFT edge */
  --flora-size: clamp(15rem, 27vw, 22rem);           /* bigger — the lead bloom */
  --flora-rotate: -6deg;
  --flora-flip: 1;
}
/* Discover/landing page wants its lead bloom bigger, higher, and nudged inward */
.landing-flow .botanical-divider--sage {
  --flora-size: clamp(17rem, 31vw, 25rem);
  --flora-left: max(2rem, calc(50% - 31rem + 8rem));
  --flora-top: calc(100% - 14rem);
}
@media (max-width: 450px) {
  .landing-flow .botanical-divider--sage {
    --flora-size: 13.5rem;   /* ~20% smaller on small phones */
  }
}
.botanical-divider--cream {
  --divider-fill: var(--cream);
  --flora-left: min(calc(100% - 2rem), calc(50% + 31rem - 3rem)); /* right edge of content, underlaps a bit */
  --flora-size: clamp(12rem, 20vw, 16rem);
  --flora-rotate: 6deg;
  --flora-flip: -1;
}
.botanical-divider--plum {
  --divider-fill: #573463;
  --flora-left: calc(50% - 16rem);   /* left of centre, tucked behind "Three" */
  --flora-size: clamp(14.5rem, 24vw, 19.5rem);
  --flora-top: calc(100% - 1rem);    /* a touch higher */
  --flora-rotate: 4deg;
  --flora-flip: -1;                  /* mirrored to face right, toward the text */
}
/* Plum band: a bit taller so the heading clears the cutout and has breathing room */
.theme-plum.curve-band {
  padding-top: clamp(5rem, 10vw, 7.5rem);
}
/* Discover plum CTA: the block is page-centred (so the button reads as centred on
   the page), but the heading + subhead are left-aligned and pushed right of the
   tucked flower so "Three minutes…" no longer runs across it. */
.landing-flow .theme-plum.curve-band .container {
  width: min(92%, 46rem);
  margin-inline: auto;
}
.landing-flow .theme-plum.curve-band .container > h2,
.landing-flow .theme-plum.curve-band .container > p {
  text-align: left;
  margin-left: clamp(1rem, 15vw, 13rem);
}
.landing-flow .theme-plum.curve-band .container > h2 { max-width: 22rem; }
.landing-flow .theme-plum.curve-band .container > p {
  max-width: 20rem;
  font-size: var(--fs-400);   /* smaller subhead so it isn't so wide */
}
/* The flower-offset layout above only holds at wide widths. Below tablet the vw
   margin would shove the text across the bloom, so centre it and tuck the bloom
   smaller into the corner — no overlap at any width. */
@media (max-width: 900px) {
  .landing-flow .theme-plum.curve-band .container > h2,
  .landing-flow .theme-plum.curve-band .container > p {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-width: 30rem;
  }
  /* Tablet: mid-size bloom (between phone and desktop), pushed down so its top
     stays clear of the heading as it grows */
  .landing-flow .botanical-divider--plum {
    --flora-size: clamp(11rem, 19vw, 13.5rem);
    --flora-left: max(-1.5rem, calc(50% - 20rem));
    --flora-top: calc(100% + 3rem);
  }
}
@media (max-width: 640px) {
  /* Phone: small corner bloom — fixed left so it can't slide off-screen the way
     the 50%-based formula does at narrow widths */
  .landing-flow .botanical-divider--plum {
    --flora-size: clamp(7rem, 16vw, 9.5rem);
    --flora-left: 3rem;
    --flora-top: calc(100% + 6rem);   /* low — clears the subhead, sits in the band's lower half */
  }
}
.botanical-divider--blush {
  --divider-fill: var(--blush-soft);
  --flora-left: min(calc(100% - 2rem), calc(50% + 31rem - 3rem));
  --flora-size: clamp(12rem, 20vw, 16rem);
  --flora-rotate: 5deg;
  --flora-flip: -1;
}
@media (max-width: 520px) {
  .botanical-divider {
    --flora-x: 50%;
  }
}
@supports not (overflow: clip) {
  .decorated-flow { overflow-x: hidden; }
}

hr.divider {
  border: none;
  height: 1px;
  background: var(--line);
  margin-block: var(--sp-5);
}
hr.divider-gold {
  border: none;
  width: 64px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--gold);
  margin: var(--sp-5) auto;
}

/* --------------------------------------------------------------------------
   17 MOTION
   .reveal elements start hidden; base.html's observer adds .is-visible on
   scroll-into-view. .d1–.d6 stagger the entrance. All motion collapses under
   prefers-reduced-motion.
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.d1 { --reveal-delay: 0.08s; animation-delay: 0.08s; }
.d2 { --reveal-delay: 0.16s; animation-delay: 0.16s; }
.d3 { --reveal-delay: 0.24s; animation-delay: 0.24s; }
.d4 { --reveal-delay: 0.32s; animation-delay: 0.32s; }
.d5 { --reveal-delay: 0.4s;  animation-delay: 0.4s; }
.d6 { --reveal-delay: 0.5s;  animation-delay: 0.5s; }

/* Immediate entrance animations (no observer needed — fire on load) */
.anim-fade-up {
  animation: ib-fade-up 0.6s var(--ease-out) both;
}
.anim-pop {
  animation: ib-pop 0.65s var(--ease-out) both;
}
@keyframes ib-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ib-pop {
  0%   { opacity: 0; transform: scale(0.92) translateY(10px); }
  60%  { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: none; }
}
/* Gentle float for hero illustration accents */
.anim-float {
  animation: ib-float 5s ease-in-out infinite;
}
@keyframes ib-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .anim-fade-up,
  .anim-pop,
  .anim-float,
  .progress-shimmer .progress-fill {
    animation: none;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   18 MISC UTILITIES
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.hidden { display: none !important; }
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }

/* Full-height column page: keeps footer at the bottom on short pages */
.page-col {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
.page-col > main { flex: 1 0 auto; }