/* =====================================================
   R1 ReadyFirst – Shared Design Tokens & Components
   Applies to every page. Page-specific layout in [page].css
   ===================================================== */

/* RESET */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
*{-webkit-tap-highlight-color:transparent}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{-webkit-overflow-scrolling:touch;overflow-x:hidden}
img,svg{display:block;max-width:100%;height:auto}
input,select,textarea{font-size:16px}

/* SKIP TO CONTENT */
.skip-to-content{position:absolute;top:-100%;left:var(--md);background:var(--jade);color:var(--white);padding:.75rem 1.5rem;border-radius:0 0 8px 8px;font-family:var(--font-ui);font-size:.875rem;font-weight:600;text-decoration:none;z-index:200;transition:top .2s}
.skip-to-content:focus{top:0}

/* TOKENS */
:root{
  --jade:#2A6B68;--jade-dk:#1A4448;--jade-lt:#88CCCA;--jade-deep:#0D2B30;
  --sand:#F5F0E8;--sand-dk:#E8DFD0;--sand-lt:#F0EBE0;
  --sky:#428393;--sky-lt:#BBD5DC;
  --terra:#BC6C25;--terra-soft:#DDA15E;
  --char:#2B2B2B;--wgray:#6B6B6B;--white:#FFFFFF;
  --build:#A0785A;--grow:#5B9E6F;--flow:#4A7C8F;
  --g-forest:linear-gradient(135deg,var(--jade-dk),var(--jade));
  --g-deep:linear-gradient(135deg,var(--jade-deep),var(--jade-dk));
  --g-warm:linear-gradient(135deg,var(--terra-soft),var(--sand));
  --sh:0 2px 8px rgba(var(--black-rgb),.06);--sh2:0 4px 16px rgba(var(--black-rgb),.1);
  --xs:.5rem;--sm:1rem;--md:2rem;--lg:4rem;--xl:6rem;--xxl:10rem;
  --max:1200px;--read:680px;
  /* RGB channel tokens – use as rgba(var(--jade-rgb),.1) for alpha compositing */
  --jade-rgb:42,107,104;
  --jade-dk-rgb:26,68,72;
  --jade-lt-rgb:136,204,202;
  --jade-deep-rgb:13,43,48;
  --sand-rgb:245,240,232;
  --terra-rgb:188,108,37;
  --terra-soft-rgb:221,161,94;
  --sky-rgb:66,131,147;
  --build-rgb:160,120,90;
  --grow-rgb:91,158,111;
  --flow-rgb:74,124,143;
  --char-rgb:43,43,43;
  --wgray-rgb:107,107,107;
  --white-rgb:255,255,255;
  --black-rgb:0,0,0;
  /* Pillar tint channels – warm sand-gold, soft green, soft teal */
  --pillar-warm-rgb:196,160,112;
  --pillar-green-rgb:125,170,122;
  --pillar-teal-rgb:80,144,128;
  /* Utility */
  --sand-icon:#E0D4C2;
  /* Gradient mid-stops */
  --sand-warm:#F5EDE4;
  --jade-funder:#1A5258;
  --org-tint:#EBF0E8;
  /* Eyebrow colours: --eyebrow-light on sand/white backgrounds,
     --eyebrow-dark on forest/deep gradient backgrounds,
     --eyebrow-warm on terra-soft/g-warm backgrounds. No other values. */
  --eyebrow-light:var(--jade);
  --eyebrow-dark:var(--jade-lt);
  --eyebrow-warm:var(--jade-dk);
  /* Typography tokens – use these, never hardcode font strings */
  --font-display:'Bricolage Grotesque',sans-serif;
  --font-ui:'Sora',sans-serif;
  --font-prose:Verdana,Geneva,sans-serif;
  --font-quote:'Sora',system-ui,sans-serif;
}

/* TYPOGRAPHY */
body{font-family:var(--font-prose);font-size:1.125rem;line-height:1.7;color:var(--char);background:var(--sand);text-wrap:pretty}
h1,h2{font-family:var(--font-display)}
.ui,.btn,.nav-links a:not(.btn),.card__eyebrow,.card__cta,.card__body,.stat-number,.stat-caption,.stat-source,.section-eyebrow,.team-role,.team-cred,.team-name,.pillar-tag,.footer-col a,.footer-col h4,.footer-bottom p,.footer-bottom a{font-family:var(--font-ui)}
blockquote{font-family:var(--font-quote)}
h1,h2{line-height:1.15;letter-spacing:-.01em}
h2{font-size:clamp(1.75rem,3.5vw,2.25rem);font-weight:600}
/* h3 font rule: --font-ui is the default (functional/UI headings – cards, features, list items).
   Override to var(--font-display) for display headings – named people, named entities, hero sub-labels.
   Do this in page CSS with an explicit font-family declaration, not by changing this rule. */
h3{font-size:1.25rem;font-weight:600;line-height:1.4;font-family:var(--font-ui)}
a{color:var(--jade);transition:color .3s;overflow-wrap:break-word;word-break:break-word}a:hover{color:var(--jade-dk)}

/* LAYOUT */
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--md)}
.section{padding:var(--xl) 0}

/* NAV */
.site-nav{position:sticky;top:0;z-index:100;height:72px;display:flex;align-items:center;background:var(--sand);box-shadow:0 1px 4px rgba(var(--black-rgb),.05)}
.site-nav .container{display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:.9375rem;color:var(--jade-dk);letter-spacing:-.01em}
.logo-mark{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:9px;overflow:hidden;background:var(--jade);padding:5px;box-shadow:var(--sh)}
.logo-mark img{width:100%;height:100%;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:var(--md);list-style:none}
.site-nav a{overflow-wrap:normal;word-break:normal}
.nav-links li{display:flex;align-items:center}
.nav-links a:not(.btn){font-size:.875rem;font-weight:500;color:var(--char);text-decoration:none;padding:.25rem 0;position:relative;transition:color .3s}
.nav-links a:not(.btn)::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--jade-dk);transition:width .3s}
.nav-links a:not(.btn):hover{color:var(--jade-dk)}
.nav-links a:not(.btn):hover::after{width:100%}
.nav-links .btn{margin-left:.5rem}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:.5rem;color:var(--char);position:relative;z-index:1010}
.nav-toggle svg{width:24px;height:24px;display:block}
.nav-toggle .icon-close{display:none}
.nav-links a:not(.btn).nav-active{color:var(--jade-dk)}.nav-links a:not(.btn).nav-active::after{width:100%}

/* NAV DROPDOWN */
.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-dropdown__trigger{font-family:var(--font-ui);font-size:.875rem;font-weight:500;color:var(--char);background:none;border:none;cursor:pointer;padding:.25rem 0;display:inline-flex;align-items:center;gap:.35rem;position:relative;transition:color .3s;line-height:1}
.nav-dropdown__trigger::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--jade-dk);transition:width .3s}
.nav-dropdown__trigger:hover{color:var(--jade-dk)}.nav-dropdown__trigger:hover::after{width:100%}
.nav-dropdown__trigger.nav-active{color:var(--jade-dk)}.nav-dropdown__trigger.nav-active::after{width:100%}
.nav-dropdown__trigger svg{transition:transform .3s}
.nav-dropdown__menu{display:none;position:absolute;top:100%;left:-.75rem;background:var(--sand);border-radius:10px;box-shadow:var(--sh2);padding:1rem 1.75rem;list-style:none;z-index:110;white-space:nowrap}
.nav-dropdown__menu::before{content:'';position:absolute;top:2px;left:24px;width:12px;height:12px;background:var(--sand);border-radius:2px;rotate:45deg;box-shadow:-1px -1px 2px rgba(var(--black-rgb),.04)}
.nav-dropdown__menu li a{display:block;padding:.5rem .875rem;font-family:var(--font-ui);font-size:.875rem;font-weight:500;color:var(--char);text-decoration:none;transition:color .2s;border-radius:6px}
.nav-dropdown__menu li a:hover{color:var(--jade-dk)}
.nav-dropdown__menu li a.nav-active{color:var(--jade-dk);font-weight:600;text-decoration:underline;text-decoration-color:var(--jade);text-underline-offset:3px;text-decoration-thickness:2px}
.nav-dropdown__menu li a::after{display:none}
.nav-dropdown:hover .nav-dropdown__menu{display:block}
.nav-dropdown:hover .nav-dropdown__trigger svg{transform:rotate(180deg)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-size:.875rem;font-weight:600;text-decoration:none;padding:.75rem 2rem;border-radius:8px;border:none;cursor:pointer;transition:background-color 150ms ease,border-color 150ms ease,color 150ms ease,transform 100ms ease,box-shadow 150ms ease;white-space:nowrap}
.btn:active{transform:scale(0.98)}
.btn--primary{background:var(--jade);color:var(--white)}.btn--primary:hover{background:var(--jade-dk);color:var(--white)}
.btn--secondary{background:transparent;color:var(--jade);border:1.5px solid var(--jade)}.btn--secondary:hover{background:var(--jade);color:var(--white)}
.site-nav .btn--primary{background:var(--jade-dk);color:var(--white)}.site-nav .btn--primary:hover{background:var(--jade-deep);color:var(--white)}
.btn--lg{font-size:1rem;padding:1rem 2.5rem}
.btn--hero{background:var(--white);color:var(--jade-dk);font-size:1rem;padding:1rem 2.5rem}.btn--hero:hover{background:var(--sand);color:var(--jade-dk)}
.btn--hero-ghost{background:transparent;color:rgba(var(--sand-rgb),.85);font-size:1rem;padding:1rem 2.5rem;border:1.5px solid rgba(var(--sand-rgb),.3)}.btn--hero-ghost:hover{background:rgba(var(--white-rgb),.1);color:var(--white)}
.btn .arrow{display:none}/* arrows removed from HTML; rule kept as safety net */
.btn--fund-nav{background:#2D7D6F;color:var(--white);padding:.625rem 1.25rem;border-radius:6px;transition:background .2s ease}.btn--fund-nav:hover{background:#1A4A44;color:var(--white)}
.btn--fund{background:#1A4A44;color:var(--white);font-size:1.125rem;font-weight:700;padding:1rem 2.5rem;border-radius:6px;display:block;width:fit-content;margin:0 auto;transition:background .2s ease}.btn--fund:hover{background:#2D7D6F;color:var(--white)}
.fund-r1-section{padding:var(--md) 0;background:var(--sand)}

/* Dark-section button overrides – prevents hover disappearing into background */
.scale-stats--elevated .btn--primary{background:var(--white);color:var(--jade-dk)}
.scale-stats--elevated .btn--primary:hover{background:var(--sand);color:var(--jade-dk)}

/* SECTION EYEBROW */
.section-eyebrow{font-family:var(--font-ui);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:var(--xs)}

/* GTM SIGNAL – urgency / founding funder / timing language */
.gtm-signal{font-family:var(--font-ui);font-size:1rem;font-weight:400;color:var(--jade);line-height:1.55;display:block}
.gtm-signal--dark{color:var(--jade-lt)}

/* PHOTO INITIALS – placeholder for missing portraits */

/* PILLAR TAGS */
.pillar-tag{display:inline-flex;flex-direction:column;align-items:center;gap:.5rem;font-size:.875rem;font-weight:600;letter-spacing:.02em}
.pillar-tag__circle{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.pillar-tag__circle svg{width:36px;height:36px;flex-shrink:0}
.pillar-tag__circle img{width:52px;height:52px;flex-shrink:0}
.pillar-tag--mind .pillar-tag__circle{background:rgba(var(--pillar-warm-rgb),.18)}.pillar-tag--mind .pillar-tag__circle svg{stroke:var(--char)}.pillar-tag--mind{color:var(--char)}
.pillar-tag--body .pillar-tag__circle{background:rgba(var(--pillar-green-rgb),.16)}.pillar-tag--body .pillar-tag__circle svg{stroke:var(--char)}.pillar-tag--body{color:var(--char)}
.pillar-tag--energy .pillar-tag__circle{background:rgba(var(--pillar-warm-rgb),.18)}.pillar-tag--energy .pillar-tag__circle svg{stroke:var(--char)}.pillar-tag--energy{color:var(--char)}

/* STAT CARDS (shared across homepage + study) */
.stat-source{font-size:.6875rem;color:var(--wgray);margin-top:.375rem}

/* READINESS DIAGRAM (shared – used on How It Works + Parents) */
.dfade{opacity:0;animation:fadeOnly var(--fdur,.5s) ease var(--fdelay,0s) both}

/* FOOTER */
.site-footer{background:var(--jade-dk);color:var(--sand);padding:var(--xl) 0 var(--lg)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--lg);margin-bottom:var(--lg)}
.footer-brand{max-width:320px}
.footer-brand .nav-logo{color:var(--white);margin-bottom:var(--sm)}
.footer-brand p{font-family:var(--font-ui);font-size:.9375rem;line-height:1.6;color:var(--sand-dk)}
.footer-col h4{font-family:var(--font-ui);font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--jade-lt);margin-bottom:var(--sm)}
.footer-col ul{list-style:none}.footer-col li{margin-bottom:.625rem}
.footer-col a:not(.btn){font-family:var(--font-ui);font-size:.875rem;color:var(--sand-dk);text-decoration:none;transition:color .3s}.footer-col a:not(.btn):hover{color:var(--white)}
/* On the dark footer a jade fill vanishes – invert like buttons on other dark surfaces */
.site-footer .btn--primary{background:var(--white);color:var(--jade-dk)}.site-footer .btn--primary:hover{background:var(--sand);color:var(--jade-dk)}
.footer-bottom{border-top:1px solid rgba(var(--jade-lt-rgb),.15);padding-top:var(--md);display:flex;flex-direction:column;align-items:stretch;gap:var(--sm)}
.footer-bottom__meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--sm);width:100%}
.footer-bottom__meta p,.footer-bottom__meta a{font-family:var(--font-ui);font-size:.875rem;color:var(--sand-dk)}
.footer-bottom__meta a{text-decoration:none}.footer-bottom__meta a:hover{color:var(--white)}
.footer-disclaimer{font-family:var(--font-ui);font-size:.8125rem;line-height:1.65;color:var(--sand-dk);opacity:.85;max-width:820px;margin:0}
.footer-disclaimer a{color:var(--sand-dk);text-decoration:underline}.footer-disclaimer a:hover{color:var(--white)}
/* Footer – tablet: brand line spans the top, link columns pair up beneath */
@media(min-width:768px) and (max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--lg) var(--md)}
  .footer-brand{grid-column:1/-1;max-width:520px}
}
.four04__mascot{margin-bottom:var(--sm)}

/* ANIMATIONS */
.fade-in{opacity:0;transform:translateY(16px);transition:opacity .6s ease-out,transform .6s ease-out}
.fade-in.visible{opacity:1;transform:translateY(0)}
@keyframes draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
@keyframes fadeOnly{from{opacity:0}to{opacity:1}}

/* UTILITIES */
.mobile-br{display:block}

/* RESPONSIVE – SHARED */
/* READINESS DEFINITION STRIP – single-line band directly under the hero on primary pages
   (index, readiness, how-it-works, parents, coaches, organizations). Light jade tint,
   accent rules top and bottom. Colours match the fund/launch accent family already in use. */
/* SENTENCE LINES – in multi-sentence display headings, each sentence starts its own line.
   Never let sentence two begin mid-line. */
.sline{display:block}

/* GIFT + LAUNCH SHORTCUT – site-wide strip under the hero (all pages except launch + support) */
.gift-shortcut{background:var(--sand-dk);padding:.875rem 20px;text-align:center}
.gift-shortcut p{font-family:var(--font-ui);font-size:.875rem;color:var(--wgray);margin:0}
.gift-shortcut a{font-weight:600;color:var(--jade)}
.gift-shortcut a:hover{color:var(--jade-dk)}
.gift-shortcut__sep{margin:0 .625rem}
@media(max-width:767px){
  .gift-shortcut{padding:.75rem 16px}
  .gift-shortcut p{font-size:13px;line-height:1.5}
  .gift-shortcut__item{display:block;padding:.15rem 0}
  .gift-shortcut__sep{display:none}
}

.readiness-strip{background:#E0F2EE;border-top:2px solid #2D7D6F;border-bottom:2px solid #2D7D6F;padding:.875rem var(--md)}
.readiness-strip p{font-family:var(--font-ui);font-size:.9375rem;font-weight:500;line-height:1.55;color:#1A1A1A;text-align:center;max-width:1100px;margin:0 auto}
.readiness-strip strong{font-weight:700;color:#1A4A44}
@media(max-width:767px){.readiness-strip{padding:.75rem 20px}.readiness-strip p{font-size:14px;line-height:1.5}}

/* PAGE PHOTO BREAK – contained image with rounded corners, matches pause pattern */
.page-photo-break{padding:var(--lg) var(--md)}
.page-photo-break__inner{max-width:1060px;margin:0 auto;overflow:hidden;border-radius:12px}
.page-photo-break__img{width:100%;height:400px;object-fit:cover;object-position:center 40%;display:block}
.page-photo-break__caption{max-width:1060px;margin:.75rem auto 0;font-family:var(--font-ui);font-size:.875rem;font-weight:600;color:var(--jade-dk);text-align:center}

@media(max-width:1100px){
  /* NAV – full-screen dark overlay from right */
  .site-nav{z-index:1010}
  .nav-toggle{display:flex;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;align-items:center;justify-content:center;position:relative;z-index:1020}
  .nav-links.open~.nav-toggle .icon-menu{display:none}
  .nav-links.open~.nav-toggle .icon-close{display:block}
  .nav-links.open~.nav-toggle{color:var(--white)}
  .nav-links{display:flex;position:fixed;top:0;left:0;right:0;bottom:0;background:#1A4448;flex-direction:column;justify-content:center;align-items:center;gap:0;padding:72px 0 max(20px,env(safe-area-inset-bottom));overflow-y:auto;opacity:0;transform:translateX(100%);transition:opacity 250ms ease,transform 250ms ease;z-index:1000;pointer-events:none}
  .nav-links.open{opacity:1;transform:translateX(0);pointer-events:auto}
  .nav-links li{width:100%;display:flex;justify-content:center;align-items:center;flex-shrink:0}
  .nav-links a:not(.btn){display:flex;align-items:center;justify-content:center;min-height:52px;width:100%;font-size:20px;padding:.4rem 1rem;color:var(--white);font-weight:500}
  .nav-links a:not(.btn):active{background:#2D7D6F}
  .nav-links a:not(.btn)::after{display:none}
  .nav-links a:not(.btn).nav-active{color:var(--jade-lt)}
  .nav-dropdown__trigger.nav-active{color:var(--jade-lt)}
  .nav-links .btn{display:inline-flex;margin-top:.75rem;width:80%;max-width:280px;min-height:48px;border:1.5px solid rgba(255,255,255,.5);background:rgba(255,255,255,.08);color:var(--white);font-size:17px}
  .nav-links .btn:hover,.nav-links .btn:active{background:rgba(255,255,255,.18);color:var(--white)}
  /* Blend the sticky nav bar into the overlay when menu is open */
  .site-nav:has(.nav-links.open){background:#1A4448;box-shadow:none}

  /* Dropdown inline expand in mobile nav */
  .nav-dropdown{flex-direction:column;align-items:center;width:100%}
  .nav-dropdown__trigger{width:100%;justify-content:center;min-height:52px;font-size:20px;color:var(--white);gap:.5rem}
  .nav-dropdown__trigger svg{transition:transform 200ms ease}
  .nav-dropdown.open .nav-dropdown__trigger svg{transform:rotate(180deg)}
  .nav-dropdown__menu{position:static;transform:none;box-shadow:none;background:rgba(0,0,0,.15);border-radius:8px;padding:.25rem 0;min-width:100%;margin-top:.25rem;border:none;display:none}
  .nav-dropdown__menu li a{padding:.75rem 1rem;font-size:18px;color:rgba(255,255,255,.85);text-align:center;border-radius:0}
  .nav-dropdown__menu li a:hover{color:var(--white)}
  .nav-dropdown__menu::before{display:none}
  .nav-dropdown.open .nav-dropdown__menu{display:block}
  .nav-dropdown:hover .nav-dropdown__menu{display:none}
  .nav-dropdown.open:hover .nav-dropdown__menu{display:block}
}

@media(max-width:767px){
  .mobile-br{display:none}
  :root{--xxl:3.25rem;--xl:3.25rem;--lg:2.25rem;--md:1.25rem}
  .container{padding:0 20px}
  .section{padding:52px 0}
  h1{font-size:30px;line-height:1.2;letter-spacing:-.5px}
  h2{font-size:24px;line-height:1.25}
  h3{font-size:20px;line-height:1.3}
  h4{font-size:17px;line-height:1.4}
  p{font-size:16px;line-height:1.65}
  small,caption,label{font-size:13px;line-height:1.5}


  /* Footer – single centred column: brand block, then each link group stacked */
  .footer-grid{grid-template-columns:1fr;gap:32px}
  /* Footer logo lockup – stack mark above wordmark; keep "ReadyFirst" on one line (scoped to footer, header untouched) */
  .footer-brand .nav-logo{flex-direction:column;align-items:center;text-align:center;gap:.5rem;overflow-wrap:normal;word-break:normal}
  .footer-brand{max-width:none;text-align:center}
  .footer-brand p{font-size:14px;max-width:36ch;margin:0 auto}
  .footer-col{text-align:center}
  .footer-col h4{font-size:11px;letter-spacing:1px;margin-bottom:12px}
  .footer-col li{margin-bottom:0}
  .footer-col a:not(.btn){font-size:15px;min-height:44px;display:flex;align-items:center;justify-content:center;padding:10px 0;line-height:1}
  .footer-col .btn{min-height:48px}
  .footer-bottom{margin-top:32px;padding-top:24px}
  .footer-disclaimer{font-size:12px;line-height:1.6}
  .footer-bottom__meta{justify-content:center;text-align:center}
  /* Legal links – 44px tap targets without changing the visual rhythm */
  .footer-bottom__meta div a{display:inline-flex;align-items:center;min-height:44px;padding:0 .35rem;margin:-.7rem 0}

  /* Photo breaks */
  .page-photo-break__inner{margin:0 20px;border-radius:10px}
  .page-photo-break__img{height:240px}

  /* Buttons */
  .btn{min-height:44px}

  /* CTA clusters – full width stacked */
  .hero__actions,.contact-person__cta,.closing-cta__actions,.product-glimpse__actions,.confirm__actions,.hiw-cta__buttons,.hiw-hero__actions,.beat-1__cta,.beat-6__cta,.beat-8__cta,.support-hero__actions,.support-contact__buttons,.blog-cta__actions,.coaches-cta__buttons,.parents-cta__buttons,.faq-cta__buttons,.about-cta__buttons,.org-cta__contact,.org-jump,.post-inline-cta__buttons,.rd-ripple__cta,.hiw-view-card__cta,.rd-hero__actions,.parents-hero__actions,.coaches-hero__actions,.org-hero__actions,.problem__cta,.gift-band__cta,.pricing-card__cta,.support-chain__cta,.rp__cta,.cred__cta,.ev-close__cta,.launch-hero__badges,.help-hero__actions,.help-channels__cta,.del-request__actions,.newsletter-strip__fields{flex-direction:column;align-items:stretch}
  .hero__actions>.btn,.contact-person__cta>.btn,.closing-cta__actions>.btn,.product-glimpse__actions>.btn,.confirm__actions>.btn,.hiw-cta__buttons>.btn,.hiw-hero__actions>.btn,.beat-1__cta>.btn,.beat-6__cta>.btn,.beat-8__cta>.btn,.support-hero__actions>.btn,.support-contact__buttons>.btn,.blog-cta__actions>.btn,.coaches-cta__buttons>.btn,.parents-cta__buttons>.btn,.faq-cta__buttons>.btn,.about-cta__buttons>.btn,.org-cta__contact>.btn,.org-jump>.btn,.post-inline-cta__buttons>.btn,.rd-ripple__cta>.btn,.hiw-view-card__cta>.btn,.rd-hero__actions>.btn,.parents-hero__actions>.btn,.coaches-hero__actions>.btn,.org-hero__actions>.btn,.problem__cta>.btn,.gift-band__cta>.btn,.pricing-card__cta>.btn,.support-chain__cta>.btn,.rp__cta>.btn,.cred__cta>.btn,.ev-close__cta>.btn,.launch-hero__badges>.btn,.help-hero__actions>.btn,.help-channels__cta>.btn,.del-request__actions>.btn,.newsletter-strip__fields>.btn{width:100%;min-height:52px;font-size:1rem;white-space:normal;text-align:center}

  /* Scrollable image containers */
  .scroll-snap-x{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
  .scroll-snap-x::-webkit-scrollbar{display:none}
}

/* GIRLS IN SPORT – shared component (used on Study; formerly on homepage) */
.girls-sport{background:var(--g-warm);padding:var(--xl) 0}
.girls-sport__header{max-width:var(--max);margin:0 auto var(--md)}
.girls-sport__header h2{margin-bottom:0}
.girls-sport__inner{display:grid;grid-template-columns:6fr 6fr;gap:var(--lg);align-items:start;max-width:var(--max);margin:0 auto}
.girls-sport__content h2{margin-bottom:var(--sm)}
.girls-sport__content p{margin-bottom:var(--md)}
.girls-sport__bridge{font-family:var(--font-ui);font-size:.75rem;font-weight:600;color:var(--jade-dk);line-height:1.5;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.75rem}
.girls-sport__right{display:flex;flex-direction:column}
.girls-sport__img-wrap{border-radius:12px 12px 0 0;overflow:hidden}
.girls-sport__img-wrap img{width:100%;height:320px;object-fit:cover;display:block}
.gs-stats-row{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;background:rgba(var(--white-rgb),.65);border-radius:0 0 12px 12px;padding:.875rem var(--sm)}
.gs-stats-row__item{text-align:center;padding:0 .5rem}
.gs-stats-row__number{font-family:var(--font-display);font-size:1.125rem;font-weight:800;color:var(--terra);line-height:1.1;margin-bottom:.25rem}
.gs-stats-row__caption{font-family:var(--font-ui);font-size:.75rem;color:var(--char);line-height:1.4}
.gs-stats-row__divider{width:1px;background:var(--sand-icon);margin:.25rem 0}
@media(max-width:1024px){
  .girls-sport__inner{grid-template-columns:1fr;gap:var(--md);width:100%}
  .girls-sport__content,.girls-sport__right{min-width:0}
  .girls-sport__img-wrap img{height:200px}
}
@media(max-width:767px){
  .girls-sport__bridge{overflow-wrap:break-word;word-break:break-word}
  .girls-sport__content p{overflow-wrap:break-word;word-break:break-word}
  .gs-stats-row{grid-template-columns:1fr;padding:.5rem var(--sm);gap:0}
  .gs-stats-row__item{display:flex;align-items:flex-start;gap:.75rem;text-align:left;padding:.5rem .25rem;border-bottom:1px solid var(--sand-icon)}
  .gs-stats-row__item:last-child{border-bottom:none;padding-bottom:.25rem}
  .gs-stats-row__divider{display:none}
  .gs-stats-row__number{font-size:1rem;flex-shrink:0;min-width:3rem}
  .gs-stats-row__caption{font-size:.75rem;line-height:1.4}
  .girls-sport__img-wrap img{height:200px}
}

/* LAUNCH BANNER – thin full-width bar above the nav, on every page */
.launch-banner{display:flex;align-items:center;justify-content:center;gap:.25rem;min-height:40px;padding:.4rem 1rem;background:#1A4A44;color:var(--white);font-family:var(--font-ui);font-size:14px;font-weight:500;line-height:1.35;text-align:center;text-decoration:none}
.launch-banner:hover,.launch-banner:focus{color:var(--white)}
.launch-banner .arrow{display:inline-block;transition:transform .3s}
.launch-banner:hover .arrow{transform:translateX(3px)}
.launch-banner__count{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:767px){
  /* Wrap freely so the full message stays visible at any width
     (nowrap + overflow:hidden clipped the centred text off both screen edges) */
  .launch-banner{min-height:44px;padding:.5rem 20px;font-size:13px}
}

/* PRICE CALLOUT – light jade tint box (jade token tint keeps it on-system) */
.price-callout{background:rgba(var(--jade-rgb),.09);border-left:3px solid #2D7D6F;border-radius:0 8px 8px 0;padding:var(--sm) 1.25rem;font-family:var(--font-prose);font-size:1.0625rem;line-height:1.6;color:var(--char)}

/* LAUNCH CALLOUT – dark jade box, white text (founding-recognition note) */
.launch-callout{background:#1A4A44;color:var(--white);border-radius:8px;padding:var(--sm);font-family:var(--font-ui);font-size:1rem;line-height:1.55}

/* Utility classes – replacing inline styles */
.img-cover{width:100%;height:100%;object-fit:cover;display:block}
.img-cover--rounded{border-radius:12px}
.img-cover--circle{border-radius:50%}
.text-center{text-align:center}
.mt-sm{margin-top:var(--sm)}
.mt-md{margin-top:var(--md)}
.mt-lg{margin-top:var(--lg)}
.mb-sm{margin-bottom:var(--sm)}
.mb-lg{margin-bottom:var(--lg)}
.inline-read-link{font-family:var(--font-ui);font-size:.875rem;font-weight:600;color:var(--jade);text-decoration:none;transition:color .2s}
.inline-read-link:hover{color:var(--jade-dk)}
.inline-read-link--light{color:var(--jade-lt)}
.inline-read-link--light:hover{color:var(--white)}
.section-eyebrow--sky{color:var(--eyebrow-light)}
.section-eyebrow--jade{color:var(--jade)}
.section-eyebrow--jade-lt{color:var(--jade-lt)}
.card-cta-label{pointer-events:none}
.flex-center-wrap{display:flex;gap:var(--sm);justify-content:center;flex-wrap:wrap}
.img-cover--top{object-position:center top}
.btn--sm{font-size:.8125rem;padding:.5rem 1.625rem}
.footer-col .btn{margin-top:.5rem}

/* App screen gallery – tap a thumbnail to show it in the large view.
   Used on Parents and Coaches pages; wire up with the shared inline handler. */
.app-gallery{margin:0 auto}
.app-gallery__main{margin:0 auto;max-width:280px}
.app-gallery__main img{width:100%;height:auto;display:block}
.app-gallery__main figcaption{font-family:var(--font-ui);font-size:.8125rem;font-weight:600;color:var(--wgray);text-align:center;margin-top:.5rem;min-height:2em}
.app-gallery__thumbs{display:flex;justify-content:center;gap:.5rem;margin-top:var(--sm);flex-wrap:wrap}
.app-gallery__thumb{background:none;border:2px solid transparent;border-radius:10px;padding:2px;width:64px;cursor:pointer;opacity:.55;transition:opacity .15s,border-color .15s}
.app-gallery__thumb img{width:100%;height:auto;display:block}
.app-gallery__thumb:hover{opacity:1}
.app-gallery__thumb.is-active{opacity:1;border-color:var(--jade)}
/* Scrollable thumbnail strip – one row, scrolls sideways when there are many screens */
.app-gallery__thumbs--strip{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;max-width:600px;margin:var(--md) auto 0;padding:2px 2px .5rem;scrollbar-width:thin}
.app-gallery__thumbs--strip .app-gallery__thumb{flex:0 0 64px;scroll-snap-align:start}
.app-gallery__strip-hint{font-family:var(--font-ui);font-size:.75rem;color:var(--wgray);text-align:center;margin-top:.375rem}
.app-gallery__strip-arrow{display:inline-block}

/* UTOPIA BEAT – the shared future chorus (Homepage, For Clubs & Coaches, The Study) */
.utopia-beat{background:var(--sand-lt);padding:var(--lg) var(--md);text-align:center}
.utopia-beat__inner{max-width:680px;margin:0 auto}
.utopia-beat__title{font-family:var(--font-display);font-size:clamp(1.5rem,3.2vw,2.125rem);color:var(--jade-dk);margin-bottom:var(--sm)}
.utopia-beat__line{font-family:var(--font-quote);font-style:italic;font-size:clamp(1.1875rem,2.4vw,1.5rem);line-height:1.65;color:var(--char);margin:0 auto}
.utopia-beat__photo{max-width:520px;margin:0 auto var(--sm);border-radius:12px;overflow:hidden;box-shadow:var(--sh2)}
.utopia-beat__photo img{width:100%;height:auto;display:block}

/* =====================================================
   MOTION COMPONENTS (js/r1-motion.js)
   Default rules are the no-JS layout: everything stacked
   and visible. Enhanced rules apply only once the script
   adds .is-enhanced to a component.
   ===================================================== */

/* JS off: fade-in content must still show */
@media(scripting:none){.fade-in{opacity:1;transform:none}}

/* Characters – transparent PNGs, decorative only (CLAUDE.md §5.7) */
.char{display:block;width:100%;height:auto;background:transparent;pointer-events:none;user-select:none}
.char-float{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.char-float.is-waiting{opacity:0;transform:translateY(28px) scale(.94)}
.char-float.is-waiting.is-in{opacity:1;transform:none}
.char-bob{animation:r1-bob 6s ease-in-out infinite}
@keyframes r1-bob{0%,100%{translate:0 0}50%{translate:0 -6px}}

/* Click-to-expand – native <details>, keyboard and JS-free */
.r1-more{margin-top:var(--sm)}
.r1-more>summary{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-ui);font-size:.875rem;font-weight:600;color:var(--jade);cursor:pointer;list-style:none;padding:.375rem 0;min-height:44px}
.r1-more>summary::-webkit-details-marker{display:none}
.r1-more>summary::before{content:'';width:18px;height:18px;flex:0 0 18px;border-radius:50%;border:1.5px solid currentColor;background:linear-gradient(currentColor,currentColor) center/8px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 8px no-repeat;transition:transform .25s ease}
.r1-more[open]>summary::before{transform:rotate(45deg)}
.r1-more>summary:hover{color:var(--jade-dk)}
.r1-more>summary:focus-visible{outline:2px solid var(--jade);outline-offset:3px;border-radius:4px}
.r1-more__body{padding-top:var(--xs)}
.r1-more__body p{margin-bottom:var(--sm)}
.r1-more__body p:last-child{margin-bottom:0}
.r1-more--light>summary{color:var(--jade-lt)}
.r1-more--light>summary:hover{color:var(--white)}
.r1-more--light>summary:focus-visible{outline-color:var(--jade-lt)}

/* Stat callout */
.stat-callout{display:flex;flex-direction:column;gap:.25rem}
.stat-callout__num{font-family:var(--font-display);font-size:clamp(2rem,4.5vw,2.75rem);font-weight:700;line-height:1;color:var(--jade-dk)}
.stat-callout__label{font-family:var(--font-ui);font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:var(--wgray);line-height:1.45}

/* Tabs / click-through panel */
.r1-tabs__list{display:none}
.r1-tabs__panel[hidden]{display:none!important}
.r1-tabs__panel-title{display:block}
.r1-tabs.is-enhanced .r1-tabs__list{display:flex;flex-wrap:wrap;gap:.5rem}
.r1-tabs.is-enhanced .r1-tabs__panel-title{display:none}
.r1-tabs.is-enhanced .r1-tabs__panel.is-active{animation:r1-panel-in .45s cubic-bezier(.2,.7,.2,1)}
.r1-tab{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-ui);font-size:.875rem;font-weight:600;line-height:1.2;color:var(--jade-dk);background:transparent;border:1.5px solid rgba(var(--jade-rgb),.35);border-radius:999px;padding:.5rem 1rem;min-height:44px;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.r1-tab:hover{border-color:var(--jade)}
.r1-tab[aria-selected="true"]{background:var(--jade);border-color:var(--jade);color:var(--white)}
.r1-tab:focus-visible{outline:2px solid var(--jade);outline-offset:3px}
.r1-tab__char{width:32px;height:32px;margin:-.25rem 0 -.25rem -.5rem}
.r1-tabs--dark .r1-tab{color:var(--white);border-color:rgba(var(--sand-rgb),.35)}
.r1-tabs--dark .r1-tab:hover{border-color:var(--jade-lt)}
.r1-tabs--dark .r1-tab[aria-selected="true"]{background:var(--white);border-color:var(--white);color:var(--jade-dk)}
.r1-tabs--dark .r1-tab:focus-visible{outline-color:var(--jade-lt)}
@keyframes r1-panel-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Scroll-stepped media
   html and body both carry overflow-x:hidden, which makes body a scroll
   container and silently disables position:sticky. On pages with a
   scrolly, clip instead (no scroll container), and keep the nav static so
   it behaves as it does on every other page. */
@supports(overflow:clip){
  html:has([data-scrolly],[data-sticky]),html:has([data-scrolly],[data-sticky]) body{overflow-x:clip}
  html:has([data-scrolly],[data-sticky]) .site-nav{position:relative}
}
.scrolly{position:relative}
.scrolly__steps{list-style:none;margin:0;padding:0}
.scrolly__media{display:none}
.scrolly__frames{position:relative}
.scrolly__frame{display:block;width:100%;height:auto}
.scrolly__frames>.scrolly__frame+.scrolly__frame{position:absolute;inset:0}
.scrolly__frame{opacity:0;transform:translateY(14px) scale(.98);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.scrolly__frame.is-active,.scrolly:not(.is-enhanced) .scrolly__frame[data-default]{opacity:1;transform:none}
.scrolly__step-btn{all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer;border-radius:12px}
.scrolly__step-btn:focus-visible{outline:2px solid var(--jade);outline-offset:4px}
@media(min-width:768px){
  .scrolly.is-enhanced{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:var(--lg);align-items:start}
  .scrolly.is-enhanced .scrolly__media{display:block;position:sticky;top:6vh;grid-column:2;grid-row:1}
  .scrolly.is-enhanced .scrolly__steps{grid-column:1;grid-row:1}
  .scrolly.is-enhanced .scrolly__step{min-height:58vh;display:flex;flex-direction:column;justify-content:center;opacity:.32;transition:opacity .45s ease}
  .scrolly.is-enhanced .scrolly__step.is-active{opacity:1}
  .scrolly.is-enhanced .scrolly__inline{display:none}
}

/* Phone: pinned scroll steps (js/r1-motion.js adds .is-pinned only when
   the tallest card fits under the media). The media pins near the top;
   each step is a tall scroll track whose card sticks just below it, so
   one card shows at a time while the phone steps forward. The card on
   deck previews faintly; cards already passed fade out. Pages size the
   media with --pin-h. */
@media(max-width:767px){
  .scrolly.is-pinned{--pin-h:clamp(220px,44vh,400px);display:flex;flex-direction:column;gap:0}
  @supports(height:1svh){.scrolly.is-pinned{--pin-h:clamp(220px,44svh,400px)}}
  .scrolly.is-pinned .scrolly__media{display:flex;flex-direction:column;align-items:center;order:-1;position:sticky;top:8px;z-index:2}
  .scrolly.is-pinned .scrolly__steps{order:0;position:relative;z-index:1;display:block;width:100%;max-width:560px;margin:12px auto 0}
  .scrolly.is-pinned .scrolly__step{min-height:62vh;opacity:.28;transition:opacity .4s ease}
  @supports(height:1svh){.scrolly.is-pinned .scrolly__step{min-height:62svh}}
  .scrolly.is-pinned .scrolly__step:last-child{min-height:48vh}
  .scrolly.is-pinned .scrolly__step.is-active{opacity:1}
  .scrolly.is-pinned .scrolly__step.is-past{opacity:0}
  .scrolly.is-pinned.is-done .scrolly__step{opacity:0}
  .scrolly.is-pinned .scrolly__step-btn{position:sticky;top:var(--scrolly-card-top,60vh)}
  .scrolly.is-pinned .scrolly__inline{display:none}
}

@media(prefers-reduced-motion:reduce){
  .char-float,.scrolly__frame,.scrolly.is-enhanced .scrolly__step,.scrolly.is-pinned .scrolly__step{transition:none}
  .char-float.is-waiting{opacity:1;transform:none}
  .char-bob{animation:none}
  .scrolly__frame{transform:none}
  .r1-tabs.is-enhanced .r1-tabs__panel.is-active{animation:none}
  .r1-more>summary::before{transition:none}
}