/* =====================================================
   R1 ReadyFirst – Homepage Layout (reboot design)
   Requires: shared.css. Loaded only by index.html, so the
   :root token overrides below scope the reboot palette to
   this page. Typography uses the site-wide brand families
   from shared.css (Bricolage Grotesque / Sora / Verdana).
   Reboot palette: #1A4A44 dark (header, footer, buttons),
   #2D7D6F accent, #D4F0EA / #E0F2EE / #F4FAF8 tints,
   #1A1A1A text, #FFFFFF white.
   ===================================================== */

/* REBOOT TOKEN OVERRIDES */
:root{
  --jade:#2D7D6F;
  --jade-dk:#1A4A44;
  --jade-lt:#D4F0EA;
  --jade-deep:#1A4A44;
  --sand:#FFFFFF;
  --sand-lt:#F4FAF8;
  --sand-dk:#D4F0EA;
  --sand-warm:#F4FAF8;
  --sand-icon:#E0F2EE;
  --char:#1A1A1A;
  --wgray:rgba(26,26,26,.64);
  --sky:#2D7D6F;--sky-lt:#D4F0EA;
  --terra:#2D7D6F;--terra-soft:#2D7D6F;
  --jade-rgb:45,125,111;
  --jade-dk-rgb:26,74,68;
  --jade-lt-rgb:212,240,234;
  --jade-deep-rgb:26,74,68;
  --sand-rgb:255,255,255;
  --char-rgb:26,26,26;
  --wgray-rgb:26,26,26;
  --sky-rgb:45,125,111;
  --terra-rgb:45,125,111;
  --terra-soft-rgb:45,125,111;
  --g-forest:linear-gradient(135deg,#1A4A44,#1A4A44);
  --g-deep:linear-gradient(135deg,#1A4A44,#1A4A44);
  --g-warm:linear-gradient(135deg,#F4FAF8,#FFFFFF);
}
body{background:#FFFFFF;color:#1A1A1A}
h1,h2{letter-spacing:-.02em}
h2{font-weight:700}

/* BUTTONS – primary filled #1A4A44, secondary outlined */
.btn--primary{background:#1A4A44;color:#FFFFFF}
.btn--primary:hover{background:#2D7D6F;color:#FFFFFF}
/* Hero sits on the photo scrim: a white edge lifts the primary CTA off it. 1.5px matches
   .btn--hero-ghost beside it, so both buttons keep identical box sizing. */
.hero__actions .btn--primary{border:1.5px solid #FFFFFF}
.btn--secondary{color:#1A4A44;border-color:#1A4A44}
.btn--secondary:hover{background:#1A4A44;color:#FFFFFF}
.btn--hero{background:#FFFFFF;color:#1A4A44}
.btn--hero:hover{background:#D4F0EA;color:#1A4A44}
.btn--hero-ghost{color:#FFFFFF;border-color:rgba(255,255,255,.55)}
.btn--hero-ghost:hover{background:rgba(255,255,255,.12);color:#FFFFFF}

/* NAV – dark header per reboot palette */
.launch-banner{border-bottom:1px solid rgba(255,255,255,.14)}
.site-nav{background:#1A4A44;box-shadow:none}
.nav-logo{color:#FFFFFF}
.logo-mark{background:rgba(255,255,255,.12);box-shadow:none}
.nav-links a:not(.btn){color:#FFFFFF}
.nav-links a:not(.btn):hover{color:#D4F0EA}
.nav-links a:not(.btn)::after{background:#D4F0EA}
.nav-dropdown__trigger{color:#FFFFFF}
.nav-dropdown__trigger:hover{color:#D4F0EA}
.nav-dropdown__trigger::after{background:#D4F0EA}
.nav-dropdown__menu{background:#FFFFFF}
.nav-dropdown__menu::before{background:#FFFFFF}
/* Must out-rank .nav-links a:not(.btn){color:#FFF} above, or the menu reads white-on-white */
.nav-links .nav-dropdown__menu li a:not(.btn){color:#1A1A1A}
.nav-links .nav-dropdown__menu li a:not(.btn):hover{color:#1A4A44}
.nav-toggle{color:#FFFFFF}
/* Dark bar inverts the primary: white fill, dark jade text – dark jade fill would vanish against #1A4A44 */
.site-nav .btn--primary{background:#FFFFFF;color:#1A4A44}
.site-nav .btn--primary:hover{background:#D4F0EA;color:#1A4A44}
.site-nav .btn--secondary{background:transparent;color:#FFFFFF;border-color:#FFFFFF}
.site-nav .btn--secondary:hover{background:#FFFFFF;color:#1A4A44}

/* SECTION 1 – HERO
   Two overlay layers, matching the NZ site's hero treatment:
   ::before – left-anchored jade wash, rgba(26,74,68,.90) at the left edge
   fading to transparent by 65% width, so the kicker, headline and subhead
   stay legible over the grass. ::after – bottom-anchored gradient,
   rgba(26,74,68,.65) at the bottom, transparent by 50% height.
   Neither is a full wash; both are disabled at ≤767px, where the text
   moves below the photo onto a light background. */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;padding:var(--xl) var(--md) var(--lg);overflow:hidden}
.hero__bg{position:absolute;inset:0;background:url('../img/hero-raiders.webp') 68% center/cover no-repeat;background-color:#1A4A44}
.hero__bg::before{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(26,74,68,.90) 0%,rgba(26,74,68,.70) 30%,rgba(26,74,68,0) 65%)}
/* Bottom overlay lands on solid jade, not a 65% wash, so the hero's last
   pixels are the same colour the newsletter strip starts on. Without the
   opaque stop the photo showed through at the join and read as a hard line. */
.hero__bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,#1A4A44 0%,rgba(26,74,68,.92) 7%,rgba(26,74,68,.55) 22%,rgba(26,74,68,0) 55%)}
.hero__inner{position:relative;z-index:1;max-width:var(--max);width:100%;margin:0 auto}
.hero__content{max-width:680px}
.hero h1{font-size:clamp(2.25rem,5vw,3.5rem);font-weight:800;line-height:1.08;color:#FFFFFF;margin-bottom:1rem;text-shadow:0 2px 16px rgba(26,74,68,.55)}
.hero__sub{font-family:var(--font-ui);font-size:1rem;line-height:1.6;color:#FFFFFF;opacity:.92;max-width:600px;margin:0 0 2rem;text-shadow:0 1px 12px rgba(26,74,68,.55)}
.hero__actions{display:flex;gap:var(--sm);justify-content:flex-start;flex-wrap:wrap}
.hero__proof{font-family:var(--font-ui);font-size:.9375rem;line-height:1.6;color:#FFFFFF;opacity:.92;max-width:640px;margin-top:1rem;text-shadow:0 1px 12px rgba(26,74,68,.55)}
/* NEWSLETTER STRIP – transition band between hero and the invitation section.
   Starts on the same solid jade the hero's bottom overlay now ends on, so the
   join is invisible and the hero flows straight into the strip.
   The exit to white is a fixed-height overlay rather than percentage stops on
   the band itself: percentages move the fade with the section's height, and a
   short two-stop ramp put a visible edge where it started and another where it
   landed. The stops below are eased at both ends (flat, then steep, then flat
   again), so there is no line where the fade begins or where it finishes. */
.newsletter-strip{position:relative;background:#1A4A44;padding:56px 0 120px}
.newsletter-strip::after{content:'';position:absolute;left:0;right:0;bottom:0;height:200px;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.02) 12%,rgba(255,255,255,.07) 24%,rgba(255,255,255,.16) 36%,rgba(255,255,255,.3) 48%,rgba(255,255,255,.47) 60%,rgba(255,255,255,.63) 70%,rgba(255,255,255,.78) 80%,rgba(255,255,255,.89) 88%,rgba(255,255,255,.96) 94%,#FFFFFF 100%)}
/* Top fade, mobile only – see the 767px block. */
.newsletter-strip::before{content:'';display:none;position:absolute;left:0;right:0;top:0;height:96px;pointer-events:none;background:linear-gradient(to top,rgba(255,255,255,0) 0%,rgba(255,255,255,.04) 18%,rgba(255,255,255,.15) 36%,rgba(255,255,255,.34) 54%,rgba(255,255,255,.6) 72%,rgba(255,255,255,.85) 88%,#FFFFFF 100%)}
.newsletter-strip__inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.3fr;gap:var(--lg);align-items:center}
.newsletter-strip__headline{font-family:var(--font-display);font-weight:800;font-size:clamp(1.625rem,3vw,2.25rem);line-height:1.15;color:#FFFFFF;margin-bottom:.625rem;text-shadow:0 2px 16px rgba(26,74,68,.55)}
/* Two fixed lines: "THE PRIMER" above "Parent Newsletter", so the name never
   wraps mid-phrase at any width. */
.newsletter-strip__headline-line{display:block;letter-spacing:.02em}
.newsletter-strip__body{font-size:clamp(1rem,1.5vw,1.0625rem);line-height:1.65;color:#FFFFFF;text-shadow:0 1px 12px rgba(26,74,68,.55);max-width:520px}
.newsletter-strip__signup{display:flex;align-items:center;justify-content:flex-end;gap:1.5rem}
.newsletter-strip__form{flex:1 1 auto;min-width:0}
/* Email + Subscribe on one row. flex-wrap lets the button drop below the input
   in the narrow 768-1024px column instead of squeezing the field. */
.newsletter-strip__fields{display:flex;flex-wrap:wrap;align-items:stretch;gap:.75rem}
.newsletter-strip__label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.newsletter-strip__input{flex:1 1 260px;min-width:0;font-family:var(--font-ui);font-size:1rem;line-height:1.4;color:var(--char);background:var(--white);border:1.5px solid var(--white);border-radius:8px;padding:.95rem 1.1rem;box-shadow:var(--sh)}
.newsletter-strip__input::placeholder{color:var(--wgray)}
.newsletter-strip__input:focus-visible{outline:3px solid var(--jade-lt);outline-offset:2px}
/* White-on-jade button, the same inversion .site-footer and .scale-stats--elevated use. */
.newsletter-strip .btn--primary{background:var(--white);color:var(--jade-dk)}
.newsletter-strip .btn--primary:hover{background:var(--sand);color:var(--jade-dk)}
.newsletter-strip__submit{flex:0 0 auto;min-height:52px}
.newsletter-strip__status{font-family:var(--font-ui);font-size:.9375rem;line-height:1.5;color:var(--white);text-shadow:0 1px 12px rgba(26,74,68,.55);margin-top:.75rem;display:none}
.newsletter-strip__status.is-visible{display:block}
.newsletter-strip__status.is-error{color:var(--sand-dk)}
.newsletter-strip__mascot{height:clamp(140px,15vw,180px);width:auto;flex-shrink:0;display:block}

@media(max-width:1024px){
  /* Still the 768+ side-by-side layout (text left, form + mascot right) –
     just give the signup column a smaller mascot so the input keeps room
     to breathe in a narrower column. */
  .newsletter-strip__mascot{height:clamp(110px,13vw,140px)}
  /* Narrower basis so Subscribe stays on the input's row in this band
     instead of wrapping underneath it. */
  .newsletter-strip__input{flex:1 1 180px}
}
@media(max-width:767px){
  /* At this width the hero's own gradient overlays are switched off and the
     hero collapses to an image block with the CTAs on white, so the strip has
     white directly above it, not the hero's jade fade. Switch on the top fade
     here or the top edge reads as a hard line. Both fades are shorter than on
     desktop – the band itself is shorter, so a 200px exit would eat the copy. */
  .newsletter-strip{padding:64px 0 80px}
  .newsletter-strip::before{display:block;height:56px}
  .newsletter-strip::after{height:130px}
  .newsletter-strip__inner{grid-template-columns:1fr;text-align:left}
  /* Stack order must follow DOM order (form, then mascot) so the mascot
     lands last as a small closing visual, not first as if pointing at
     something beside it – there's nothing beside it once everything stacks. */
  .newsletter-strip__signup{flex-direction:column;align-items:stretch;gap:1rem}
  .newsletter-strip__form{width:100%}
  /* Full-width field on its own row above a full-width button. 1 1 100% (not
     auto) keeps the input from shrinking below the container, so the
     placeholder renders in full at 320px. */
  .newsletter-strip__fields{flex-direction:column;align-items:stretch;gap:.75rem}
  .newsletter-strip__input{flex:1 1 100%;width:100%;padding:.95rem 1.25rem}
  /* Hidden below 767px. Once everything stacks, the mascot lands centred
     under a full-width Subscribe button with nothing to sit beside, and at
     the size that leaves room for it reads as a stray sticker rather than a
     closing visual. It stays in the markup (decorative, alt="") and returns
     at 768px, where it has the form to stand next to. */
  .newsletter-strip__mascot{display:none}
}


/* SECTION EYEBROWS – accent jade on light backgrounds */
.section-eyebrow{color:#2D7D6F}
.section-eyebrow--jade{color:#2D7D6F}

/* SECTION 2 – THE PROBLEM, ANSWERED (tint #F4FAF8) */
.problem{background:#F4FAF8}
.problem__inner{max-width:760px;margin:0 auto;text-align:center}
.problem__stat{font-size:clamp(1.5rem,3.2vw,2.125rem);font-weight:700;line-height:1.3;color:#1A1A1A;margin-bottom:var(--sm)}
.problem__copy{font-size:1.125rem;line-height:1.7;color:#1A1A1A}
.problem__answer{display:grid;grid-template-columns:1fr 1fr;gap:var(--lg);align-items:center;max-width:1060px;margin:var(--lg) auto 0;background:#FFFFFF;border-top:3px solid #2D7D6F;border-radius:12px;box-shadow:var(--sh);padding:var(--md)}
.problem__answer-img{border-radius:10px;overflow:hidden;margin:0}
.problem__answer-img img{width:100%;height:320px;object-fit:cover;display:block}
.problem__answer-copy p{font-size:clamp(1.0625rem,2vw,1.25rem);line-height:1.7;color:#1A1A1A;font-weight:500}
.problem__cta{margin-top:var(--md);display:flex;flex-wrap:wrap}

/* WHAT READINESS IS – states + film (tint #E0F2EE) */
.states-simple{background:#E0F2EE;padding:var(--xl) var(--md)}
.states-simple__inner{max-width:960px;margin:0 auto}
.states-simple__split{display:grid;grid-template-columns:1.4fr 340px;gap:var(--lg);align-items:center}
.states-simple__content h2{margin-bottom:var(--sm)}
.states-simple__lead{font-size:clamp(1.125rem,2.2vw,1.375rem);font-weight:600;color:#1A4A44;line-height:1.5;margin-bottom:var(--sm)}
.states-simple__intro{font-size:1.0625rem;line-height:1.7;color:#1A1A1A}
.states-simple__phone{margin:0;display:flex;flex-direction:column;align-items:center;gap:.75rem}
.states-simple__phone figcaption{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#2D7D6F;text-align:center}
.states-simple__filmnote{font-size:.9375rem;line-height:1.6;color:#1A1A1A;text-align:center;max-width:300px;margin:0 auto}
.states-simple__quote{font-family:var(--font-quote);font-style:italic;font-weight:500;font-size:1.0625rem;line-height:1.6;color:#1A4A44;margin-top:var(--sm)}
/* The phone screenshot is the player: the film plays in the handset screen,
   never in a new tab. Screen inset measured from MetastateReady.png
   (screen area x 49-450, y 142-872 of a 500x1024 image). */
.states-simple__device{position:relative;width:100%;max-width:320px;margin:0 auto}
.states-simple__device img{width:100%;max-width:none}
.states-simple__screen{position:absolute;left:9.6%;top:13.7%;width:80.8%;height:71.7%;border-radius:4px;overflow:hidden;background:var(--jade-deep);opacity:0;pointer-events:none;transition:opacity .3s}
.states-simple__device.is-playing .states-simple__screen{opacity:1;pointer-events:auto}
/* The film is a vertical clip pillarboxed inside a 16:9 player, so the
   frame is scaled to the screen height and centred: the black side bars
   overflow past the bezel and the vertical picture fills the handset. */
.states-simple__screen iframe{position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;width:auto;aspect-ratio:16/9;display:block;border:0}
.states-simple__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:18px;transition:transform .3s}
.states-simple__play:hover,.states-simple__play:focus-visible{transform:translateY(-3px)}
.states-simple__device.is-playing .states-simple__play{display:none}
.states-simple__play-badge{width:60px;height:60px;border-radius:50%;background:#FFFFFF;box-shadow:var(--sh2);display:flex;align-items:center;justify-content:center;transition:background .3s}
.states-simple__play-badge::before{content:"";display:block;margin-left:4px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #1A4A44;transition:border-color .3s}
.states-simple__play:hover .states-simple__play-badge{background:#1A4A44}
.states-simple__play:hover .states-simple__play-badge::before{border-left-color:#FFFFFF}
.states-simple__phone figcaption a{color:inherit;text-decoration:none}
.states-simple__phone figcaption a:hover{color:#1A4A44}
.states-simple__phone figcaption .arrow{display:inline-block;transition:transform .3s}
.states-simple__phone figcaption a:hover .arrow{transform:translateX(3px)}

/* SECTION 5 – SUPPORT WHILE THEY DEVELOP (white) */
.develop{background:#FFFFFF}
.develop__header{text-align:center;max-width:760px;margin:0 auto var(--lg)}
.develop__header h2{margin-bottom:var(--sm)}
.develop__lead{font-size:1.0625rem;line-height:1.7;color:#1A1A1A}
.develop__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--md);max-width:1060px;margin:0 auto}
.develop__card{background:#F4FAF8;border-radius:12px;padding:var(--md);text-align:center;box-shadow:var(--sh)}
.develop__card-icon{width:64px;height:64px;border-radius:50%;background:#E0F2EE;display:flex;align-items:center;justify-content:center;margin:0 auto var(--sm)}
.develop__card h3{font-size:1.0625rem;font-weight:700;color:#1A4A44;margin-bottom:.375rem}
.develop__card p{font-size:.9375rem;color:#1A1A1A;line-height:1.6}
.develop__photo{max-width:1060px;margin:var(--md) auto 0;border-radius:12px;overflow:hidden;box-shadow:var(--sh)}
.develop__photo img{width:100%;height:440px;object-fit:cover;object-position:center 30%;display:block}
.develop__photo figcaption{font-size:.875rem;font-weight:600;color:#1A4A44;text-align:center;padding:.75rem 1rem;background:#F4FAF8}
.develop__note{text-align:center;margin-top:var(--lg);font-size:1rem;color:#1A1A1A}
.develop__note a{font-weight:600;color:#1A4A44}
.develop__note a:hover{color:#2D7D6F}

/* SECTION 4B – THE LONG ARC (tint #E0F2EE) */
.outcomes{background:#E0F2EE}
.outcomes__inner{max-width:1060px;margin:0 auto;padding:0 var(--md)}
.outcomes__header{text-align:center;max-width:760px;margin:0 auto var(--lg)}
.outcomes__header h2{margin-bottom:var(--sm)}
.outcomes__lead{font-size:1.0625rem;line-height:1.7;color:#1A1A1A}
.outcomes__chart-wrap{max-width:880px;margin:0 auto;background:#FFFFFF;border-radius:12px;box-shadow:var(--sh);padding:var(--md)}
.outcomes__chart{display:block;width:100%;height:auto}
.outcomes__close{text-align:center;max-width:640px;margin:var(--md) auto 0;font-size:1rem;font-weight:600;color:#1A4A44}

/* SECTION 7 – GIVE A CHILD R1 (tint #E0F2EE) */
.gift-band{background:#E0F2EE}
.gift-band__grid{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--lg);align-items:center;max-width:1060px;margin:0 auto}
.gift-band__photo{margin:0;border-radius:12px;overflow:hidden;box-shadow:var(--sh)}
.gift-band__photo img{width:100%;height:340px;object-fit:cover;display:block}
.gift-band__content h2{margin:var(--sm) 0}
.gift-band__content p{font-size:1.0625rem;line-height:1.7;color:#1A1A1A}
.gift-band__cta{margin-top:var(--md);display:flex;flex-wrap:wrap}

/* (legacy) FOUNDER (white) */
.founder{background:#FFFFFF}
.founder__grid{display:grid;grid-template-columns:380px 1fr;gap:var(--xl);align-items:center;max-width:1080px;margin:0 auto}
.founder__photo{width:100%;max-width:380px;aspect-ratio:3/4;border-radius:12px;overflow:hidden;box-shadow:var(--sh2);margin:0 auto}
.founder__photo img{transform:scale(1.08);transform-origin:center top}
.founder__quote{font-size:clamp(1.0625rem,2vw,1.3125rem);line-height:1.7;color:#1A1A1A;border-left:3px solid #2D7D6F;padding-left:1.5rem;margin-bottom:var(--md)}
.founder__name{font-size:1.125rem;font-weight:700;color:#1A1A1A}
.founder__role{font-size:.9375rem;color:rgba(26,26,26,.64);margin-bottom:var(--md)}
.founder__links{display:flex;flex-wrap:wrap;gap:.75rem var(--md);align-items:center}
.founder__link{display:inline-flex;align-items:center;gap:.5rem;font-size:.9375rem;font-weight:600;color:#1A4A44;text-decoration:none}
.founder__link:hover{color:#2D7D6F}
.founder__link .arrow{transition:transform .3s}
.founder__link:hover .arrow{transform:translateX(3px)}
.founder__link--book{border:1.5px solid #2D7D6F;border-radius:6px;padding:10px 20px;color:#2D7D6F}
.founder__link--book:hover{color:#1A4A44;border-color:#1A4A44}
.founder__link--book svg{flex-shrink:0}

/* SECTION 6 – AUDIENCES (tint #F4FAF8) */
.audiences{background:#F4FAF8}
.audiences__header{text-align:center;max-width:720px;margin:0 auto var(--lg)}
.audiences__header h2{margin-bottom:0}
.audiences__lead{font-size:1.0625rem;line-height:1.7;color:#1A1A1A;margin-top:var(--sm)}
/* Keeps sentence one unbroken on desktop; must release below 768px or it clips at phone widths */
.audiences__h2-line{white-space:nowrap}
.audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--md);max-width:1060px;margin:0 auto}
.aud-card{background:#FFFFFF;border-radius:12px;border-top:3px solid #2D7D6F;box-shadow:var(--sh);padding:var(--md);text-decoration:none;display:flex;flex-direction:column;transition:box-shadow .3s,transform .3s}
.aud-card:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.aud-card__eyebrow{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#2D7D6F;margin-bottom:var(--sm);display:flex;align-items:center;gap:.5rem}
.aud-card__eyebrow svg{width:16px;height:16px;flex-shrink:0}
.aud-card__body{font-size:1rem;line-height:1.65;color:#1A1A1A;margin-bottom:var(--sm);flex:1}
.aud-card__cta{font-size:.9375rem;font-weight:600;color:#1A4A44;display:inline-flex;align-items:center;gap:.5rem}
.aud-card__cta .arrow{transition:transform .3s}
.aud-card:hover .aud-card__cta .arrow{transform:translateX(3px)}
.aud-card:hover .aud-card__cta{color:#2D7D6F}

/* SECTION 7 – PRICING (white) */
.pricing{background:#FFFFFF}
.pricing__header{text-align:center;max-width:600px;margin:0 auto var(--lg)}
.pricing__header h2{margin-bottom:var(--sm)}
.pricing__header p{font-size:1rem;color:#1A1A1A}
.pricing__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--md);max-width:1060px;margin:0 auto;align-items:stretch}
.pricing-card{background:#FFFFFF;border-radius:12px;box-shadow:var(--sh);padding:calc(var(--md) + .25rem) var(--md);display:flex;flex-direction:column;position:relative;border:2px solid #E0F2EE;transition:transform .2s ease,box-shadow .2s ease}
.pricing-card:hover{transform:translateY(-6px);box-shadow:var(--sh2)}
.pricing-card--featured{border-color:#2D7D6F;box-shadow:var(--sh2)}
.pricing-card__badge{position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);background:#2D7D6F;color:#FFFFFF;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:.25rem .75rem;border-radius:999px;white-space:nowrap}
.pricing-card--featured .pricing-card__badge{background:#1A4A44}
.pricing-card__label{font-size:.875rem;font-weight:600;color:rgba(26,26,26,.64);margin-bottom:.5rem}
.pricing-card__price{font-size:2.25rem;font-weight:800;color:#1A4A44;line-height:1.05}
.pricing-card__price span{font-size:1rem;font-weight:600;color:rgba(26,26,26,.64);display:inline;margin-left:.125rem}
.pricing-card__daily{font-size:.9375rem;font-weight:600;color:#2D7D6F;margin-top:.375rem}
.pricing-card__regular{font-size:.8125rem;color:rgba(26,26,26,.64);margin:.25rem 0 var(--sm)}
.pricing-card__body{font-size:.9375rem;line-height:1.6;color:#1A1A1A;margin:0}
.pricing-card__cta{display:flex;flex-wrap:wrap;margin-top:auto;padding-top:var(--md)}
.pricing-card__cta .btn{width:100%}
.pricing__note{text-align:center;margin-top:var(--lg)}
.pricing__note a{font-size:.9375rem;font-weight:600;color:#1A4A44;text-decoration:none;display:inline-flex;align-items:center;gap:.375rem}
.pricing__note a:hover{color:#2D7D6F}
.pricing__note .arrow{transition:transform .3s}
.pricing__note a:hover .arrow{transform:translateX(3px)}

/* SECTION 8 – TEAM (tint #F4FAF8) */
.team-stripe{padding:var(--xl) 0;background:#F4FAF8}
.team-stripe__header{text-align:center;max-width:580px;margin:0 auto var(--lg)}
.team-stripe__header h2{margin-bottom:var(--lg)}
.team-headline-stack{line-height:1.3}
.team-headline-stack span{display:block}
.team-stripe__cta{text-align:center;margin-top:var(--md)}
.team-stripe__bridge{text-align:center;max-width:580px;margin:var(--lg) auto 0;font-family:var(--font-quote);font-style:italic;font-size:1.0625rem;line-height:1.6;color:#1A4A44}
.team-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--md)}
.team-row--four{grid-template-columns:repeat(4,1fr)}
.team-card{background:#FFFFFF;border-radius:10px;padding:1.25rem;box-shadow:var(--sh);text-align:center;position:relative;overflow:hidden}
.team-card::before{content:'';position:absolute;top:0;left:0;right:0;height:50%;border-radius:10px 10px 0 0;pointer-events:none;background:linear-gradient(to bottom,rgba(45,125,111,.08) 0%,transparent 100%)}
.team-card__avatar{width:56px;height:56px;border-radius:12px;background:#E0F2EE;margin:0 auto var(--sm);display:flex;align-items:center;justify-content:center;overflow:hidden}
.team-name{font-size:.9rem;font-weight:700;color:#1A1A1A}
.team-role{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-top:.125rem;margin-bottom:.5rem;color:#2D7D6F}
.team-cred{font-size:.875rem;color:rgba(26,26,26,.64);line-height:1.45}

/* SECTION 9 – INSIGHTS (white) */
.insights-stripe{background:#FFFFFF}
.insights-stripe__header{text-align:center;max-width:580px;margin:0 auto var(--lg)}
.insights-stripe__header h2{margin-bottom:0}
.insights-stripe__pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--md);max-width:700px;margin:0 auto var(--md)}
.insights-card{background:#F4FAF8;border-radius:10px;padding:1.5rem;text-decoration:none;color:#1A1A1A;transition:box-shadow .3s,transform .3s;display:flex;flex-direction:column}
.insights-card:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.insights-card__date{font-size:.75rem;color:rgba(26,26,26,.64);margin-bottom:.5rem}
.insights-card__title{font-size:1.0625rem;font-weight:600;line-height:1.35;color:#1A1A1A;flex:1}
.insights-card__read{font-size:.875rem;font-weight:600;color:#1A4A44;margin-top:var(--sm);display:inline-flex;align-items:center;gap:.375rem}
.insights-card__read .arrow{transition:transform .3s}
.insights-card:hover .insights-card__read .arrow{transform:translateX(3px)}
.insights-stripe__more{text-align:center}

/* SECTION 10 – CLOSE (dark #1A4A44) */
.closing-cta{background:#1A4A44;color:#FFFFFF}
.closing-cta__stack{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:760px;margin:0 auto}
.closing-cta__photo{width:100%;max-width:680px;border-radius:12px;overflow:hidden;margin:0 0 var(--lg)}
.closing-cta__photo img{width:100%;height:360px;object-fit:cover;object-position:center 40%;display:block}
.closing-cta__blockquote{font-size:clamp(1.125rem,2.2vw,1.5rem);font-weight:600;line-height:1.6;color:#FFFFFF;margin-bottom:var(--md)}
.closing-cta__actions{display:flex;gap:var(--sm);justify-content:center;flex-wrap:wrap}

/* RESPONSIVE – HOMEPAGE */
@media(max-width:1024px){
  .founder__grid{grid-template-columns:1fr;gap:var(--md);text-align:center}
  .founder__quote{text-align:left}
  .founder__links{justify-content:center}
  .develop__grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .pricing__grid{grid-template-columns:1fr;max-width:440px}
  .team-headline-stack span{display:inline}
  .team-row{grid-template-columns:repeat(2,1fr)}
  .team-row--four{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .team-row{grid-template-columns:1fr}
  .team-row--four{grid-template-columns:1fr}
  .team-card{display:grid;grid-template-columns:72px 1fr;grid-template-rows:auto auto 1fr;column-gap:1rem;text-align:left;padding:1rem 1.25rem}
  .team-card__avatar{grid-column:1;grid-row:1/4;width:72px;height:72px;margin:0;align-self:start}
  .team-name{grid-column:2;grid-row:1;font-size:1.0625rem}
  .team-role{grid-column:2;grid-row:2}
  .team-cred{grid-column:2;grid-row:3;font-size:.875rem}
}
@media(max-width:767px){
  /* Nav overlay – reboot dark */
  .nav-links{background:#1A4A44}
  .nav-links a:not(.btn):active{background:#2D7D6F}
  .site-nav:has(.nav-links.open){background:#1A4A44}
  .nav-links a:not(.btn).nav-active{color:#D4F0EA}
  .nav-dropdown__trigger.nav-active{color:#D4F0EA}

  /* Hero – stacked on mobile: photo on top, copy below on white.
     Keeps the headline off the bright photo without a dark wash. */
  .hero{min-height:0;display:block;padding:0}
  .hero__bg{position:relative;inset:auto;height:52vh;min-height:300px;background-position:72% center}
  .hero__bg::before,.hero__bg::after{display:none}
  .hero__inner{padding:28px 20px 44px;text-align:center}
  .hero__content{max-width:100%}
  .hero h1{color:#1A1A1A;text-shadow:none;font-size:min(2.125rem,8.5vw);margin-bottom:.875rem}
  .hero__sub{color:#1A1A1A;text-shadow:none;opacity:1;font-size:.9375rem;max-width:100%;margin:0 auto 1.5rem}
  .hero__actions{justify-content:center}
  .hero__proof{color:#1A1A1A;text-shadow:none;opacity:1;margin:1rem auto 0;font-size:.875rem}
  .hero .btn--hero-ghost{color:#1A4A44;border-color:#1A4A44}
  .hero .btn--hero-ghost:hover{background:#1A4A44;color:#FFFFFF}

  /* Problem, answered */
  .problem__answer{grid-template-columns:1fr;gap:var(--md);padding:20px}
  .problem__answer-img img{height:240px}

  /* States */
  .states-simple{padding:52px 20px}
  .states-simple__split{grid-template-columns:1fr;gap:var(--md);text-align:center}
  .states-simple__device{max-width:280px}

  /* Support while they develop */
  .develop__photo img{height:240px}
  /* Let the sentences reflow naturally when the line is centred and narrow. */
  .develop__note .sline{display:inline}

  /* Give a child R1 */
  .gift-band__grid{grid-template-columns:1fr;gap:var(--md)}
  .gift-band__photo img{height:240px}
  .gift-band__content{text-align:center}

  /* Founder */
  .founder__photo{max-width:min(380px,100%)}

  /* Audiences */
  .audiences__h2-line{white-space:normal}
  .audience-grid{grid-template-columns:1fr}
  .aud-card{padding:20px}
  .aud-card__body{font-size:15px}
  .aud-card__cta{min-height:44px;display:inline-flex;align-items:center}

  /* Pricing */
  .pricing__grid{grid-template-columns:1fr;max-width:100%}
  .pricing-card__price{font-size:36px}
  .pricing-card__daily{font-size:15px}
  .pricing-card__label{font-size:14px}
  .pricing-card__body{font-size:15px}
  .pricing-card__badge{font-size:.6875rem}

  /* Team – single column, horizontal card layout */
  .team-headline-stack span{display:inline}
  .team-row{grid-template-columns:1fr}
  .team-row--four{grid-template-columns:1fr}
  .team-card{display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto 1fr;column-gap:.875rem;text-align:left;padding:.875rem 1rem}
  .team-card__avatar{grid-column:1;grid-row:1/4;width:64px;height:64px;margin:0;align-self:start}
  .team-name{grid-column:2;grid-row:1;font-size:1rem}
  .team-role{grid-column:2;grid-row:2}
  .team-cred{grid-column:2;grid-row:3;font-size:.8125rem}

  /* Insights */
  .insights-stripe__pair{grid-template-columns:1fr}

  /* Closing CTA */
  .closing-cta__photo img{height:220px}
  .closing-cta__actions{flex-direction:column;gap:12px;width:100%;max-width:340px;margin:0 auto}
  .closing-cta__actions .btn{width:100%;min-height:52px}
}

/* HERO KICKER – pain-first lead-in above the H1 */
.hero__kicker{font-family:var(--font-quote);font-style:italic;font-size:clamp(1.125rem,2.1vw,1.4375rem);line-height:1.5;color:var(--white);opacity:1;max-width:620px;margin-bottom:1rem;text-shadow:0 1px 12px rgba(26,74,68,.55)}

/* DRIVE HOME STORY – ported from the parents page vignette */
.home-story{background:var(--sand)}
.home-story__lead{max-width:900px;margin:0 auto;padding:var(--xl) var(--sm) var(--lg);text-align:center}
.home-story__lead .section-eyebrow{margin-bottom:var(--sm)}
.home-story__lead h2{font-family:var(--font-display);font-size:clamp(1.75rem,4vw,2.5rem);font-weight:800;line-height:1.15;color:var(--jade-dk)}
.home-story__lead .sline{display:block}
.home-story__inner{position:relative;overflow:hidden}
.home-story__photo{width:100%;height:920px;object-fit:cover;object-position:center 40%;display:block}
.home-story__overlay{position:absolute;bottom:0;left:0;right:0;padding:var(--xxl) var(--lg) var(--xl);background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.55) 55%,transparent 100%);display:flex;flex-direction:column;align-items:center}
.home-story__quote{font-family:var(--font-quote);font-size:clamp(1.1875rem,2.2vw,1.375rem);font-style:italic;line-height:1.75;color:rgba(255,255,255,.9);max-width:520px;margin-bottom:var(--lg);text-align:left}
.home-story__turn{font-family:var(--font-display);font-size:clamp(1.5rem,3.5vw,2rem);font-weight:700;line-height:1.35;color:var(--white);max-width:900px;text-align:center}
.home-story--mobile-fallback{display:none}

/* PRIVACY PLEDGE – dark band, pledge line as the header, icon proof points */
.home-privacy{background:#1A4A44;text-align:center}
.home-privacy__pledge{font-family:var(--font-display);font-weight:700;font-size:clamp(1.375rem,2.8vw,1.875rem);color:#FFFFFF;margin-bottom:var(--sm)}
.home-privacy__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--md);max-width:1060px;margin:var(--md) auto}
.home-privacy__item{background:rgba(255,255,255,.06);border-radius:12px;padding:var(--md) var(--sm)}
.home-privacy__icon{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.1);color:#D4F0EA;display:flex;align-items:center;justify-content:center;margin:0 auto var(--sm)}
.home-privacy__icon svg{width:26px;height:26px}
.home-privacy__item p{font-size:.9375rem;line-height:1.6;color:rgba(255,255,255,.88)}
.home-privacy__copy{max-width:640px;margin:var(--md) auto 0;font-size:1rem;line-height:1.7;color:rgba(255,255,255,.72)}
@media(max-width:1024px){.home-privacy__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.home-privacy__grid{grid-template-columns:1fr}}

/* PRICING PROOF LINE */
.pricing__proof{font-family:var(--font-ui);font-size:.875rem;font-weight:600;color:var(--jade);margin-top:var(--sm)}

/* AUDIENCE ROUTES – quiet pre-footer strip */
.home-routes{background:var(--sand);padding:var(--md) var(--md) var(--lg);text-align:center}
.home-routes p{font-family:var(--font-ui);font-size:.9375rem;color:var(--wgray)}
.home-routes a{font-weight:600;color:var(--jade);text-decoration:none}
.home-routes a:hover{color:var(--jade-dk)}
.home-routes__sep{margin:0 .6em;color:var(--wgray)}

@media(max-width:1024px){
  .home-story__inner{display:none}
  .home-story--mobile-fallback{display:block}
  .home-story__img-wrap{max-width:1060px;margin:0 auto;overflow:hidden;border-radius:12px;padding:0 var(--sm)}
  .home-story__img-wrap img{width:100%;height:380px;object-fit:cover;object-position:center 40%;display:block;border-radius:12px}
  .home-story__text-fallback{max-width:640px;margin:0 auto;text-align:center;padding:var(--lg) var(--sm)}
  .home-story__text-fallback .home-story__quote{color:var(--char);max-width:100%;margin-bottom:var(--lg)}
  .home-story__text-fallback .home-story__turn{color:var(--jade-dk);max-width:100%;font-size:clamp(1.375rem,3.5vw,1.875rem)}
}
@media(max-width:767px){
  .hero__kicker{color:var(--jade-dk);text-shadow:none;opacity:1;max-width:100%;margin:0 auto .875rem;font-size:1.0625rem}
  /* Let the sentences reflow naturally when the line is centred and narrow. */
  .hero__kicker .sline{display:inline}
}

/* =====================================================
   REVAMP (Sept 2026) – motion layer. Tokens and existing
   page hex only; no new colours, shadows, or buttons.
   ===================================================== */

/* What readiness is – scroll-stepped phone */
.states-simple__inner{max-width:1040px}
.states-simple__head{max-width:640px;margin:0 0 var(--md)}
.states-simple__head h2{margin-bottom:var(--sm)}
.states-scrolly .scrolly__media{display:flex}
.states-beats{display:flex;flex-direction:column;gap:.75rem}
.states-beat .scrolly__step-btn{padding:var(--sm) var(--md);border-left:3px solid currentColor;border-radius:0 12px 12px 0;background:rgba(var(--white-rgb),.55);transition:background-color .3s ease,box-shadow .3s ease}
.states-beat--build{color:var(--build)}
.states-beat--grow{color:var(--grow)}
.states-beat--flow{color:var(--flow)}
.states-beat .scrolly__step-btn:hover{background:rgba(var(--white-rgb),.85)}
.states-beat.is-active .scrolly__step-btn{background:var(--white);box-shadow:var(--sh)}
.states-beat__name{display:block;font-family:var(--font-display);font-size:clamp(1.5rem,3.2vw,2.25rem);font-weight:700;line-height:1.1;color:inherit}
.states-beat__line{display:block;font-family:var(--font-prose);font-size:1rem;line-height:1.6;color:#1A1A1A;margin-top:.375rem;max-width:420px}
.states-simple__close{max-width:640px;margin-top:var(--md)}
.states-simple__close .states-simple__quote{margin-top:0}
@media(min-width:768px){
  .states-scrolly.is-enhanced{grid-template-columns:minmax(0,1fr) minmax(0,320px)}
  .states-scrolly.is-enhanced .states-beats{gap:0}
  .states-scrolly.is-enhanced .scrolly__step{min-height:46vh}
  .states-scrolly.is-enhanced .states-beat .scrolly__step-btn{padding:var(--md)}
  .states-scrolly.is-enhanced .scrolly__media{position:sticky;top:max(24px,calc(50vh - 330px))}
}
@media(max-width:767px){
  .states-simple__head,.states-simple__close{text-align:center;margin-left:auto;margin-right:auto}
  .states-scrolly{display:flex;flex-direction:column;gap:var(--md)}
  .states-scrolly .scrolly__media{order:2}
  .states-beats{order:1;text-align:left}
  .states-beat .scrolly__step-btn{padding:.75rem 1rem}
  .states-beat__name{font-size:1.375rem}
  .states-beat__line{font-size:.9375rem}
}

/* Support while they develop – characters head the pillar cards */
.develop__card{transition:transform .25s ease,box-shadow .25s ease}
.develop__card:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
.develop__card-char{width:136px;max-width:60%;margin:-.75rem auto var(--xs)}
.develop__card--body .char-float{transition-delay:.08s}
.develop__card--energy .char-float{transition-delay:.16s}

/* Outcomes + privacy – lead line, detail on request */
.outcomes__more{text-align:center;max-width:640px;margin-left:auto;margin-right:auto}
.outcomes__more .r1-more__body p{font-size:1rem;line-height:1.7;color:#1A1A1A;text-align:center}
.home-privacy__copy--lead{color:var(--white);font-weight:600}
.home-privacy__more .r1-more__body .home-privacy__copy{margin-top:0}

/* Pricing – cards answer hover, focus, and tap */
.pricing-card{-webkit-tap-highlight-color:transparent}
.pricing-card:not(.pricing-card--clubs):hover{border-color:#2D7D6F}
.pricing-card:not(.pricing-card--clubs):hover .pricing-card__price{color:#2D7D6F}
.pricing-card__price{transition:color .2s ease}
.pricing-card:focus-visible{outline:2px solid #2D7D6F;outline-offset:4px;transform:translateY(-6px);box-shadow:var(--sh2)}
.pricing-card:not(.pricing-card--clubs):active{transform:translateY(-2px) scale(.985);box-shadow:var(--sh)}
@media(hover:none){.pricing-card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){
  .develop__card,.pricing-card{transition:none}
  .develop__card:hover,.pricing-card:hover,.pricing-card:focus-visible,.pricing-card:active{transform:none}
}

/* Phone: pinned "What readiness is" sequence (shared.css .is-pinned).
   The device is sized from the screen height so the phone and one beat
   fit together; the film line and link stay with the phone. */
@media(max-width:767px){
  .states-scrolly.is-pinned .scrolly__media{gap:.25rem}
  .states-scrolly.is-pinned .states-simple__device{width:calc(var(--pin-h) * .488);max-width:none}
  .states-scrolly.is-pinned .states-simple__play-badge{width:48px;height:48px}
  .states-scrolly.is-pinned .states-simple__filmnote{font-size:.8125rem;line-height:1.45;max-width:280px}
  .states-scrolly.is-pinned .states-simple__phone figcaption{font-size:.6875rem}
  .states-scrolly.is-pinned .states-beat .scrolly__step-btn{background:var(--white);box-shadow:var(--sh)}
}

/* Touch screens: the pillar cards answer a press the way they answer hover on desktop */
@media(hover:none){
  .develop__card:active{transform:translateY(-4px);box-shadow:var(--sh2)}
}
@media(hover:none) and (prefers-reduced-motion:reduce){
  .develop__card:active{transform:none}
}

/* PARTNERS BAND – scrolling logo marquee (CSS only; static under reduced motion) */
.partners-band{background:var(--sand-lt);padding:var(--lg) 0;overflow:hidden}
.partners-band__head{text-align:center;max-width:960px;margin:0 auto var(--md);padding:0 var(--md)}
.partners-band__head h2{font-family:var(--font-display);font-size:clamp(1.375rem,2.6vw,2rem);font-weight:700;line-height:1.2;color:var(--char);margin:.5rem 0}
.partners-band__head p{font-family:var(--font-prose);font-size:1rem;line-height:1.65;color:var(--wgray)}
.partners-band__head p{max-width:640px;margin-left:auto;margin-right:auto}
.partners-band__cta{display:inline-block;margin-left:.25rem;font-family:var(--font-ui);font-weight:600;color:var(--jade);text-decoration:none;white-space:nowrap}
.partners-band__cta:hover{text-decoration:underline}
.partners-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.partners-marquee__track{display:flex;width:max-content;animation:partners-scroll 40s linear infinite}
.partners-marquee:hover .partners-marquee__track{animation-play-state:paused}
.partners-marquee__group{display:flex;flex-shrink:0;gap:var(--md);padding:0 calc(var(--md) / 2);margin:0;list-style:none}
.partners-marquee__item{flex:0 0 auto;width:180px;height:180px;display:flex;align-items:center;justify-content:center;background:var(--white);border:1px solid var(--sand-dk);border-radius:12px;box-shadow:var(--sh);padding:12px}
.partners-marquee__item img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
@keyframes partners-scroll{to{transform:translateX(-50%)}}
@media(max-width:767px){
  .partners-band{padding:var(--md) 0}
  .partners-marquee__item{width:140px;height:140px}
  .partners-marquee__group{gap:var(--sm)}
}
@media(prefers-reduced-motion:reduce){
  .partners-marquee{-webkit-mask-image:none;mask-image:none}
  .partners-marquee__track{animation:none;width:auto;justify-content:center;flex-wrap:wrap}
  .partners-marquee__group{flex-wrap:wrap;justify-content:center}
  .partners-marquee__group[aria-hidden="true"],.partners-marquee__item[aria-hidden="true"]{display:none}
}

/* Parent quotes (rotating). Dark band between the sand partners band and the white pricing section. */
.quotes{background:var(--g-deep);padding:var(--xl) 0;text-align:center}
.quotes__title{color:var(--white);margin-bottom:var(--md)}
.quotes__stage{max-width:760px;margin:0 auto}
.quotes__list{display:grid}
.quotes__item{grid-area:1/1;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--sm);opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s}
.quotes__item.is-active{opacity:1;visibility:visible}
.quotes__item blockquote{font-style:italic;font-size:clamp(1.125rem,2.4vw,1.5rem);line-height:1.65;color:var(--white);margin:0}
.quotes__item figcaption{font-family:var(--font-ui);font-size:.875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--jade-lt)}
.quotes__dots{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem;margin-top:var(--md)}
.quotes__dot{width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.quotes__dot::before{content:'';width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.3);transition:background .3s ease,transform .3s ease}
.quotes__dot[aria-current="true"]::before{background:var(--jade-lt);transform:scale(1.3)}
.quotes__dot:focus-visible{outline:2px solid var(--jade-lt);outline-offset:-4px;border-radius:50%}
/* No JS: show every quote stacked */
.quotes:not(.is-ready) .quotes__list{display:flex;flex-direction:column;gap:var(--md)}
.quotes:not(.is-ready) .quotes__item{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){.quotes__item,.quotes__dot::before{transition:none}}
.quotes .section-eyebrow{color:var(--jade-lt)}