/* ============ SELF-HOSTED FONTS (zero external requests) ============ */
@font-face{font-family:'Nunito';src:url('/fonts/nunito-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito';src:url('/fonts/nunito-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'NunitoSans';src:url('/fonts/nunitosans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'NunitoSans';src:url('/fonts/nunitosans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'NunitoSans';src:url('/fonts/nunitosans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ============ HARD GUARDS (pasted first, Step 5) ============ */
/* Failure 1: SBS logo is never filtered, faded or blended */
.sbs-mark img, .sbs-lockup img, .sbs-footer-mark img, .built-by-sbs img, [class*="sbs"] img{
  filter:none !important; opacity:1 !important; mix-blend-mode:normal !important;
}
/* Failure 2: every logo sized by rendered HEIGHT, never max-width */
.sbs-footer-mark img { height:48px; width:auto; }
.site-header .logo img, .prospect-logo img { height:60px; width:auto; }
.site-footer .logo img, .footer-prospect-logo img { height:52px; width:auto; }
@media (max-width:768px){
  .sbs-footer-mark img{height:38px}
  .site-header .logo img, .prospect-logo img{height:44px}
  .site-footer .logo img, .footer-prospect-logo img{height:44px}
}
/* Failure 12: the header never sits below dead space */
.site-header{ top:0 !important; }
.site-header[style*="top"]{ top:0 !important; }

/* ============ TOKENS ============ */
:root{
  --ink:#17353F;          /* primary dark surface + headings  (measured 828k px2) */
  --ink-deep:#133642;     /* deeper dark surface              (measured 1047k px2) */
  --ink-black:#0E2A1F;    /* label on green, 7.3:1            */
  --green:#6ABF59;        /* brand surface + every CTA fill   (measured 3228k px2) */
  --green-hot:#5CAE4C;
  --green-deep:#427637;   /* supporting shade: accent as TEXT on light surfaces */
  --ink-lift:#1E4351;     /* supporting shade: raised control surface on a dark band */
  --ink-lift-2:#295565;   /* supporting shade: its hover */
  --ink-recess:#0D2831;   /* supporting shade: recessed tool stage */
  --sun:#FFDE52;          /* accent + CTA on dark only        (their testimonials button) */
  --paper:#FFFFFF;        /* body background                  (measured 4671k px2) */
  --mist:#F6F9F7;         /* alternating light band           (measured 3399k px2) */
  --offwhite:#F4F4F4;
  --body:#52707A;         /* body text, 84 rendered elements  */
  --rule:rgba(23,53,63,.13);
  --rule-dark:rgba(255,255,255,.16);

  --page-max:1240px;
  --page-wide:1560px;
  --page-pad:24px;
  --page-pad-mobile:16px;
  --section-y:clamp(60px,5.4vw,86px);
  --section-y-mobile:clamp(44px,7vw,58px);
  --radius:0px;
  --sbs-bar-h:0px;
  --header-h:88px;
}
@media (max-width:768px){ :root{ --header-h:68px; } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:'NunitoSans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:18px; line-height:1.62; overflow-x:hidden;
}
img,video{max-width:100%; display:block}
/* Images carry width/height attributes for layout stability; height:auto keeps their shape when max-width narrows them.
   Containers that crop on purpose set height:100% with object-fit:cover, which overrides this. */
img{height:auto}
h1,h2,h3,h4,.headline,.card-title{
  font-family:'Nunito',system-ui,sans-serif; font-weight:800; color:var(--ink);
  margin:0; line-height:1.06; letter-spacing:-.018em; text-wrap:balance;
}
p,.lede,.subhead{text-wrap:pretty}
p{margin:0 0 1.05em}
a{color:inherit}
[id]{scroll-margin-top:calc(var(--header-h) + 24px)}

.section{width:100%; padding-block:var(--section-y); position:relative}
.inner,.container,.section-inner,.hero-inner,.check-inner,.films-inner,
.works-inner,.programs-inner,.results-inner,.faq-inner,.footer-inner,.research-inner,.split-inner{
  width:min(100% - (var(--page-pad) * 2), var(--page-max)); margin-inline:auto;
}
.inner-wide{width:min(100% - (var(--page-pad) * 2), var(--page-wide)); margin-inline:auto}
@media (max-width:768px){
  .section{padding-block:var(--section-y-mobile)}
  .inner,.container,.section-inner,.hero-inner,.check-inner,.films-inner,
  .works-inner,.programs-inner,.results-inner,.faq-inner,.footer-inner,.research-inner,.split-inner,.inner-wide{
    width:min(100% - (var(--page-pad-mobile) * 2), var(--page-max));
  }
}
.s-dark{background:var(--ink); color:rgba(255,255,255,.86)}
.s-deep{background:var(--ink-deep); color:rgba(255,255,255,.86)}
.s-mist{background:var(--mist)}
.s-green{background:var(--green); color:var(--ink-black)}
.s-dark h1,.s-dark h2,.s-dark h3,.s-deep h1,.s-deep h2,.s-deep h3{color:#fff}
.s-green h2,.s-green h3{color:var(--ink-black)}

.eyebrow{
  font-family:'NunitoSans',sans-serif; font-weight:700; font-size:13px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--green-deep); margin:0 0 18px;
}
.s-dark .eyebrow,.s-deep .eyebrow,.film .eyebrow,.final .eyebrow{color:var(--sun)}
.s-green .eyebrow{color:var(--ink-black); opacity:.72}
h2{font-size:clamp(32px,4.4vw,58px)}
h3{font-size:clamp(21px,2vw,27px); line-height:1.2}
.lede{font-size:clamp(18px,1.5vw,21px); line-height:1.62; max-width:62ch}
.s-dark .lede,.s-deep .lede{color:rgba(255,255,255,.8)}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'NunitoSans',sans-serif; font-weight:700; font-size:16.5px; line-height:1.2;
  padding:17px 30px; border:0; border-radius:var(--radius); cursor:pointer;
  text-decoration:none; transition:background .2s ease, transform .12s ease; text-align:center;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--green); color:var(--ink-black)}       /* label 7.3:1 on fill */
.btn--primary:hover{background:var(--green-hot); color:var(--ink-black)}
.btn--dark{background:var(--ink); color:#fff}
.btn--dark:hover{background:var(--ink-deep); color:#fff}
.btn--sun{background:var(--sun); color:var(--ink)}                    /* accent CTA, dark surfaces only */
.btn--sun:hover{background:#F5D23F; color:var(--ink)}
.btn--ghost{background:transparent; color:#fff; border:2px solid rgba(255,255,255,.55)}
.btn--ghost:hover{background:rgba(255,255,255,.1); color:#fff}
.btn--sm{padding:12px 20px; font-size:15px}
.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none}

/* ============ HEADER (sticky in flow, locks at true zero) ============ */
.site-header{
  position:sticky; top:0; z-index:900; height:var(--header-h);
  background:transparent; margin-bottom:calc(-1 * var(--header-h));
  transition:background .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled{background:#0F2026}
.site-header, .site-header.is-scrolled{-webkit-backdrop-filter:none !important; backdrop-filter:none !important; filter:none !important; transform:none !important}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; height:100%}
.site-header .logo{display:flex; align-items:center; text-decoration:none; flex:0 0 auto; min-width:0}
.site-header .logo img{flex:none; max-width:none}
.site-header .logo img{filter:drop-shadow(0 2px 12px rgba(6,20,25,.9)) drop-shadow(0 0 3px rgba(6,20,25,.75))}
.nav{display:flex; align-items:center; gap:20px; flex:0 1 auto; min-width:0}
.nav > a{
  font-family:'NunitoSans',sans-serif; font-weight:600; font-size:15px; color:#fff;
  text-decoration:none; opacity:.9; white-space:nowrap;
  text-shadow:0 1px 10px rgba(6,20,25,.85), 0 0 3px rgba(6,20,25,.7);
}
.site-header.is-scrolled .nav > a{text-shadow:none}
.nav > a:hover,.nav > a[aria-current="page"]{opacity:1; color:var(--sun)}
.header-cta{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.header-cta .btn{box-shadow:0 6px 22px rgba(6,20,25,.4); white-space:nowrap}
.header-cta .btn--primary{padding-inline:22px}
.header-cta .btn--sun{padding-inline:20px}
.header-div{width:1px; height:22px; background:rgba(255,255,255,.3); flex:none}
.acct-login{
  font-family:'NunitoSans',sans-serif; font-weight:700; font-size:15px; color:#fff;
  text-decoration:none; white-space:nowrap;
  text-shadow:0 1px 10px rgba(6,20,25,.85), 0 0 3px rgba(6,20,25,.7);
}
.acct-login:hover{color:var(--sun)}
.site-header.is-scrolled .acct-login{text-shadow:none}
.nav__acct{display:none}
.burger{display:none; background:var(--ink-lift); border:0; width:46px; height:46px; cursor:pointer; align-items:center; justify-content:center; box-shadow:0 4px 18px rgba(0,0,0,.45)}
.burger span{display:block; width:20px; height:2px; background:#fff; position:relative}
.burger span::before,.burger span::after{content:''; position:absolute; left:0; width:20px; height:2px; background:#fff}
.burger span::before{top:-6px} .burger span::after{top:6px}

/* ============ HERO ============ */
.hero{
  position:relative; height:calc(100svh - var(--sbs-bar-h)); min-height:560px;
  overflow:hidden; background:var(--ink);
}
.hero__media{position:absolute; inset:0}
.hero__media video{width:100%; height:100%; object-fit:cover}
.hero__scrim{
  position:absolute; inset:0; transition:opacity .38s ease;
  background:
    linear-gradient(94deg, rgba(9,26,32,.9) 0%, rgba(9,26,32,.74) 34%, rgba(9,26,32,.2) 62%, rgba(9,26,32,.42) 100%),
    linear-gradient(0deg, rgba(9,26,32,.6) 0%, rgba(9,26,32,0) 34%);
}
.hero__inner{
  position:relative; z-index:3; height:100%;
  display:flex; flex-direction:column; justify-content:center; justify-content:safe center;
  padding-top:calc(var(--header-h) + 12px); padding-bottom:86px;   /* clears the Show/Hide controls */
}
.hero__copy{max-width:660px; transition:opacity .38s ease, transform .38s ease}
.hero.cinema .hero__copy{opacity:0; transform:translateY(14px); pointer-events:none}
.hero.cinema .hero__scrim{opacity:0}
.hero h1{
  color:#fff; font-size:clamp(36px,min(6.1vw,9.4svh),84px); line-height:.99; margin:0 0 22px;
  text-shadow:0 3px 30px rgba(0,0,0,.6);
}
.hero h1 em{font-style:normal; color:var(--sun)}
.hero__sub{
  font-size:clamp(17px,1.55vw,21px); color:rgba(255,255,255,.9); max-width:52ch; margin:0 0 30px;
  text-shadow:0 2px 16px rgba(0,0,0,.7);
}
.hero__ctas{display:flex; flex-wrap:wrap; gap:12px}
.hero__ctas .btn{box-shadow:0 10px 34px rgba(0,0,0,.35)}
.hero__controls{
  position:absolute; z-index:4; left:0; right:0; bottom:26px;
  display:flex; justify-content:flex-end; gap:10px; pointer-events:none;
}
.hero__controls .inner{display:flex; justify-content:flex-end; gap:10px; pointer-events:none}
.vctl{
  pointer-events:auto; display:inline-flex; align-items:center; gap:9px;
  background:var(--ink-lift); color:#fff; border:0; border-radius:var(--radius);
  font-family:'NunitoSans',sans-serif; font-weight:700; font-size:14px;
  padding:12px 18px; cursor:pointer; box-shadow:0 8px 26px rgba(0,0,0,.42);
  transition:background .18s ease;
}
.vctl:hover{background:var(--ink-lift-2)}
.vctl .dot{width:8px; height:8px; background:var(--green); border-radius:50%; flex:none}
.vctl.is-off .dot{background:rgba(255,255,255,.35)}
/* Failure 18: shed secondary lines on short desktop windows; H1 and primary CTA never drop */
@media (min-width:769px) and (max-height:800px){ .hero__sub{font-size:17px; margin-bottom:22px} .hero h1{margin-bottom:16px} }
@media (min-width:769px) and (max-height:700px){ .hero__sub{display:none} }
@media (max-width:768px) and (max-height:620px){ .hero__sub{display:none} }
@media (max-width:768px){
  .hero{min-height:520px}
  .hero__ctas{flex-direction:column; align-items:stretch}
  .hero__ctas .btn{width:100%}
  .hero__controls{bottom:16px}
  .hero__controls .inner{justify-content:center; flex-wrap:wrap}
  .vctl{padding:10px 14px; font-size:13px}
}

/* ============ PROOF STRIP ============ */
.proof{background:var(--ink-deep); padding-block:0}
.proof__grid{display:grid; grid-template-columns:repeat(4,1fr); border-left:0}
.proof__cell{padding:26px 22px; border-left:1px solid var(--rule-dark)}
.proof__cell:first-child{border-left:0; padding-left:0}
.proof__n{
  font-family:'Nunito',sans-serif; font-weight:800; color:#fff;
  font-size:clamp(30px,3.4vw,46px); line-height:1; letter-spacing:-.03em;
}
.proof__l{font-size:14.5px; color:rgba(255,255,255,.72); margin-top:8px; line-height:1.45}
@media (max-width:820px){
  .proof__grid{grid-template-columns:1fr 1fr}
  .proof__cell:nth-child(3){border-left:0}
  .proof__cell:nth-child(n+3){border-top:1px solid var(--rule-dark)}
  .proof__cell{padding:22px 18px}
}

/* ============ RECOGNIZE (dark, two clips bleeding) ============ */
.recog__head{margin-bottom:clamp(22px,2.6vw,34px)}
.recog__head > *{max-width:760px}
.recog__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:0; width:100%;
}
.recog__panel{position:relative; min-height:clamp(240px,25vw,330px); overflow:hidden}
.recog__panel video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.recog__panel .lbl{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px 24px;
  background:linear-gradient(0deg, rgba(9,26,32,.92) 8%, rgba(9,26,32,0) 100%);
}
.recog__panel .lbl b{
  display:block; font-family:'Nunito',sans-serif; font-weight:800; color:#fff;
  font-size:clamp(19px,1.8vw,25px); line-height:1.14; margin-bottom:6px;
}
.recog__panel .lbl span{color:rgba(255,255,255,.82); font-size:15.5px}
.ask-band{padding-top:clamp(40px,3.8vw,60px)}
.ask{display:grid; grid-template-columns:minmax(0,.46fr) minmax(0,.54fr); gap:clamp(26px,3.4vw,58px); align-items:start}
.ask__lead h3{color:#fff; font-size:clamp(21px,2.1vw,30px); line-height:1.2; max-width:26ch}
.ask__list{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-dark)}
.ask__list li{
  position:relative; padding:clamp(15px,1.7vw,21px) 0 clamp(15px,1.7vw,21px) 42px;
  border-bottom:1px solid var(--rule-dark); color:rgba(255,255,255,.9);
  font-size:clamp(17px,1.45vw,20px); font-style:italic; font-weight:600; line-height:1.34; max-width:34ch;
}
.ask__list li::before{
  content:''; position:absolute; left:0; top:calc(clamp(15px,1.7vw,21px) + 0.62em);
  width:24px; height:2px; background:var(--sun);
}
@media (max-width:860px){
  .recog__grid{grid-template-columns:1fr}
  .recog__panel{min-height:210px}
  .recog__panel .lbl{padding:18px 20px}
  .ask{grid-template-columns:1fr; gap:18px}
  .ask__list li{padding:13px 0 13px 32px; font-size:17px}
  .ask__list li::before{top:calc(13px + 0.62em); width:20px}
  .ask-band{padding-top:clamp(34px,6vw,46px)}
  .split-num{font-size:clamp(46px,12vw,64px); margin-bottom:10px}
}

/* ============ THE SPLIT (rhythm break 1) ============ */
.split{padding-block:0; background:var(--paper)}
.split-grid{display:grid; grid-template-columns:1fr 1fr}
.split-cell{padding:clamp(38px,3.6vw,58px) clamp(28px,4vw,56px); position:relative}
.split-cell--a{padding-left:max(var(--page-pad), calc((100vw - var(--page-max)) / 2))}
.split-cell--b{padding-right:max(var(--page-pad), calc((100vw - var(--page-max)) / 2))}
.split-cell--a{background:var(--mist)}
.split-cell--b{background:var(--ink); color:rgba(255,255,255,.84)}
.split-cell--b h3{color:#fff}
.split-num{
  font-family:'Nunito',sans-serif; font-weight:800; font-size:clamp(52px,6.2vw,94px);
  line-height:.82; letter-spacing:-.05em; margin-bottom:14px; display:block;
}
.split-cell--a .split-num{color:rgba(23,53,63,.13)}
.split-cell--b .split-num{color:rgba(255,255,255,.13)}
.split-cell h3{font-size:clamp(23px,2.3vw,33px); margin-bottom:12px}
.split-cell p{font-size:17px; line-height:1.55; margin-bottom:0; max-width:44ch}
.split-cell p + p{margin-top:12px}
.split-verdict{
  background:var(--green); color:var(--ink-black); text-align:center;
  padding:clamp(26px,2.8vw,38px) var(--page-pad);
}
.split-verdict p{
  margin:0 auto; max-width:30ch; font-family:'Nunito',sans-serif; font-weight:800;
  font-size:clamp(21px,2.5vw,34px); line-height:1.12; letter-spacing:-.02em;
}
@media (max-width:860px){ .split-grid{grid-template-columns:1fr} .split-cell{padding:clamp(32px,7vw,44px) var(--page-pad-mobile)} }

/* ============ THE 90-SECOND CHECK (signature tool) ============ */
.check{position:relative; overflow:hidden; background:var(--ink-deep)}
.check__ghost{
  position:absolute; right:-2%; top:2%; font-family:'Nunito',sans-serif; font-weight:800;
  font-size:min(30vw,340px); line-height:.8; color:rgba(255,255,255,.035);
  pointer-events:none; user-select:none; z-index:0; letter-spacing:-.06em;
}
.check-inner{position:relative; z-index:1}
.check__head{max-width:720px; margin-bottom:clamp(22px,2.6vw,34px)}
.check__rail{display:flex; gap:8px; margin:0 0 26px; padding:0; list-style:none; flex-wrap:wrap}
.rail__step{
  display:flex; align-items:center; gap:9px; padding:9px 15px; background:var(--ink-lift);
  font-size:13.5px; font-weight:700; color:rgba(255,255,255,.6);
}
.rail__step b{
  width:21px; height:21px; display:flex; align-items:center; justify-content:center;
  background:var(--ink-lift-2); font-size:12px; color:#fff; flex:none;
}
.rail__step.is-on{background:var(--sun); color:var(--ink)}
.rail__step.is-on b{background:rgba(23,53,63,.2); color:var(--ink)}
.rail__step.is-done{background:var(--ink-lift-2); color:#CFEFC6}
.rail__step.is-done b{background:var(--green); color:var(--ink-black)}

.check__stage{
  background:var(--ink-recess); padding:clamp(26px,3.4vw,44px);
  min-height:400px; display:flex; flex-direction:column;
}
.step{display:none; flex-direction:column; flex:1}
.step.is-on{display:flex}
.step__q{
  font-family:'Nunito',sans-serif; font-weight:800; color:#fff;
  font-size:clamp(21px,2.3vw,31px); line-height:1.12; margin:0 0 8px;
}
.step__hint{color:rgba(255,255,255,.62); font-size:15.5px; margin:0 0 22px}

.opts{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:24px}
.opt{
  display:flex; align-items:center; gap:12px; padding:15px 17px; cursor:pointer;
  background:var(--ink-lift); color:#EAF2F4; font-size:16px;
  font-family:'NunitoSans',sans-serif; font-weight:600; text-align:left; border:0;
  transition:background .16s ease; width:100%;
}
.opt:hover{background:var(--ink-lift-2); color:#fff}
.opt.is-picked{background:var(--green); color:var(--ink-black)}
.opt .tick{
  width:20px; height:20px; flex:none; background:var(--ink-recess); position:relative; display:block;
}
.opt.is-picked .tick{background:var(--ink-black)}
.opt.is-picked .tick::after{
  content:''; position:absolute; left:6px; top:2px; width:6px; height:11px;
  border:solid var(--green); border-width:0 2.5px 2.5px 0; transform:rotate(42deg);
}
.grades{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px}
.grade{
  padding:13px 20px; background:var(--ink-lift); color:#EAF2F4;
  font-weight:700; font-size:15.5px; cursor:pointer; border:0; font-family:'NunitoSans',sans-serif;
  transition:background .16s ease;
}
.grade:hover{background:var(--ink-lift-2); color:#fff}
.grade.is-picked{background:var(--sun); color:var(--ink)}
.step__foot{margin-top:auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-top:20px}
.step__note{font-size:14px; color:rgba(255,255,255,.55)}

/* the visualization stage */
.viz{
  background:var(--ink-recess); padding:clamp(28px,4vw,54px) clamp(20px,3vw,38px);
  min-height:210px; display:flex; align-items:center; justify-content:center; margin-bottom:24px;
  box-sizing:border-box;
}
.viz__line{
  font-family:'Nunito',sans-serif; font-weight:700; color:#fff; text-align:center;
  font-size:clamp(22px,3.1vw,42px); line-height:1.28; letter-spacing:-.01em; max-width:22ch;
}
.viz__line .ph{opacity:0; transition:opacity .5s ease; display:inline}
.viz__line .ph.on{opacity:1}
.viz__gone{color:rgba(255,255,255,.4); font-size:clamp(17px,1.7vw,22px); font-weight:600; text-align:center; font-family:'NunitoSans',sans-serif}

.res__score{display:flex; align-items:baseline; gap:14px; margin-bottom:16px}
.res__big{
  font-family:'Nunito',sans-serif; font-weight:800; color:var(--sun);
  font-size:clamp(52px,7vw,96px); line-height:.82; letter-spacing:-.04em;
}
.res__of{color:rgba(255,255,255,.6); font-size:16px; font-weight:700}
.res__verdict{color:#fff; font-size:clamp(18px,1.8vw,24px); font-weight:700; font-family:'Nunito',sans-serif; line-height:1.24; margin:0 0 14px; max-width:40ch}
.res__body{color:rgba(255,255,255,.78); font-size:16.5px; max-width:56ch}
.match{
  background:var(--ink-lift); border-left:4px solid var(--green);
  padding:clamp(20px,2.6vw,30px); margin-bottom:22px;
}
.match__k{font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin-bottom:9px}
.match__t{font-family:'Nunito',sans-serif; font-weight:800; color:#fff; font-size:clamp(21px,2.2vw,29px); line-height:1.14; margin-bottom:8px}
.match__p{color:rgba(255,255,255,.82); font-size:16.5px; margin:0}
.match__fam{color:#fff; font-size:16px; margin:16px 0 0; padding-top:14px; border-top:1px solid rgba(255,255,255,.14); max-width:60ch}
.match__fam b{color:var(--sun)}
.step__hint--fam{color:#CFEFC6}
@media (min-width:900px){
  #step4.is-on{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); grid-template-rows:auto auto 1fr auto; column-gap:clamp(28px,3.4vw,52px); align-items:start}
  #step4 > *{grid-column:1}
  #step4 .match{grid-column:2; grid-row:1 / span 4; margin:0; align-self:stretch}
  #step4 .step__foot{grid-row:4; align-self:end}
}
#step1 .grades{margin-bottom:20px}
#step1 .step__q{margin-bottom:12px}
#step1 .step__hint{margin:-6px 0 14px; max-width:74ch}
#step1 .step__hint--fam{margin:-8px 0 22px}
.match__price{font-family:'Nunito',sans-serif; font-weight:800; color:var(--sun); font-size:clamp(24px,2.4vw,32px); margin-top:12px; display:block}
@media (max-width:700px){
  .opts{grid-template-columns:1fr}
  .check__stage{min-height:520px; padding:22px 18px}
  .step__foot .btn{width:100%}
}

/* ============ FILM BANDS ============ */
.film{position:relative; padding-block:0; background:var(--ink); overflow:hidden}
.film__media{position:relative; width:100%; aspect-ratio:16/9; max-height:74svh; background:var(--ink-recess)}
.film__media video{width:100%; height:100%; object-fit:cover}
.film__scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(92deg, rgba(9,26,32,.92) 0%, rgba(9,26,32,.66) 40%, rgba(9,26,32,.06) 72%);
  transition:opacity .38s ease;
}
.film.cinema .film__scrim{opacity:0}
.film__copy{
  position:absolute; z-index:3; left:0; right:0; top:50%; transform:translateY(-50%);
  transition:opacity .38s ease, transform .38s ease;
}
.film.cinema .film__copy{opacity:0; transform:translateY(-46%); pointer-events:none}
.film__copy .inner{max-width:none}
.film__box{max-width:540px}
.film__box h2{color:#fff; font-size:clamp(28px,3.6vw,50px); margin-bottom:14px; text-shadow:0 3px 24px rgba(0,0,0,.5)}
.film__box p{color:rgba(255,255,255,.88); font-size:17px; max-width:46ch; text-shadow:0 2px 14px rgba(0,0,0,.6)}
.film__ctrls{
  position:absolute; z-index:4; right:0; left:0; bottom:22px; display:flex; justify-content:flex-end;
  pointer-events:none;
}
.film__ctrls .inner{display:flex; justify-content:flex-end; gap:10px; pointer-events:none}
@media (max-width:860px){
  .film__media{aspect-ratio:4/5; max-height:none}
  .film__scrim{background:linear-gradient(0deg, rgba(9,26,32,.95) 22%, rgba(9,26,32,.5) 62%, rgba(9,26,32,.3) 100%)}
  .film__copy{top:auto; bottom:96px; transform:none}
  .film.cinema .film__copy{transform:translateY(10px)}
  .film__ctrls{bottom:16px}
  .film__ctrls .inner{justify-content:center}
}

/* ============ HOW IT WORKS ============ */
.works__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,2.6vw,36px); margin-top:clamp(26px,3vw,40px)}
.work{display:flex; flex-direction:column}
.work__n{
  font-family:'Nunito',sans-serif; font-weight:800; font-size:clamp(40px,4.6vw,68px);
  line-height:.86; color:var(--green); letter-spacing:-.045em; margin-bottom:16px;
}
.work h3{margin-bottom:10px}
.work p{font-size:16.5px; margin:0}
.work__media{width:100%; aspect-ratio:16/9; overflow:hidden; margin-bottom:16px; background:var(--mist)}
.work__media video{width:100%; height:100%; object-fit:cover}
@media (max-width:860px){ .works__grid{grid-template-columns:1fr; gap:32px} }

/* ============ WHAT CHANGES (full-bleed grid, rhythm break 2) ============ */
.changes{padding-bottom:0; background:var(--mist)}
.changes__head{margin-bottom:clamp(24px,2.8vw,38px)}
.changes__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; width:100%}
.recog__grid > :first-child .lbl,
.changes__grid > :first-child .change__lbl{padding-left:max(24px, calc((100vw - var(--page-max)) / 2))}
.recog__grid > :last-child .lbl,
.changes__grid > :last-child .change__lbl{padding-right:max(24px, calc((100vw - var(--page-max)) / 2))}
@media (max-width:860px){
  .recog__grid > :first-child .lbl, .changes__grid > :first-child .change__lbl,
  .recog__grid > :last-child .lbl, .changes__grid > :last-child .change__lbl{padding-left:24px; padding-right:24px}
}
.change{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--ink)}
.change video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.change__lbl{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:26px 24px;
  background:linear-gradient(0deg, rgba(9,26,32,.94) 6%, rgba(9,26,32,0) 100%);
}
.change__lbl b{
  display:block; font-family:'Nunito',sans-serif; font-weight:800; color:#fff;
  font-size:clamp(19px,1.75vw,25px); line-height:1.14; margin-bottom:6px;
}
.change__lbl span{color:rgba(255,255,255,.8); font-size:15px}
@media (max-width:860px){
  .changes__grid{grid-template-columns:1fr}
  .change{aspect-ratio:16/10}
}

/* ============ RESULTS ============ */
.results__lead{display:grid; grid-template-columns:minmax(0,.55fr) minmax(0,.45fr); gap:clamp(26px,3.2vw,48px); align-items:end; margin-bottom:clamp(26px,3vw,40px)}
.results__stat{border-top:2px solid var(--green); padding-top:18px}
.results__stat b{display:block; font-family:'Nunito',sans-serif; font-weight:800; color:var(--ink); font-size:clamp(30px,3.4vw,46px); line-height:1; letter-spacing:-.03em}
.results__stat span{display:block; margin-top:10px; font-size:15.5px}
.results__stat .results__src{color:var(--green-deep); font-weight:700; text-decoration:underline; text-underline-offset:3px; white-space:nowrap}
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,24px)}
.quote{background:var(--paper); padding:clamp(20px,2.1vw,26px); display:flex; flex-direction:column}
.s-mist .quote{background:var(--paper)}
.quote__stars{color:var(--green-deep); font-size:15px; letter-spacing:3px; margin-bottom:14px}
.quote p{font-size:16px; line-height:1.55; color:var(--ink); margin:0 0 14px; flex:1}
.quote cite{font-style:normal; font-weight:700; font-size:14.5px; color:var(--body)}
.quote cite small{display:block; font-weight:400; font-size:13.5px; opacity:.8; margin-top:2px}
@media (max-width:960px){ .quotes{grid-template-columns:1fr} .results__lead{grid-template-columns:1fr; align-items:start} }

/* ============ RESEARCH ============ */
.research__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,32px); margin-top:clamp(24px,2.8vw,36px)}
.paper{padding-top:20px; border-top:1px solid var(--rule-dark)}
.paper b{display:block; font-family:'Nunito',sans-serif; font-weight:800; color:#fff; font-size:19px; margin-bottom:9px; line-height:1.2}
.paper p{color:rgba(255,255,255,.76); font-size:16px; margin:0}
@media (max-width:860px){ .research__grid{grid-template-columns:1fr; gap:26px} }

/* ============ PROGRAMS ============ */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,22px); margin-top:clamp(26px,3vw,38px)}
.tier{background:var(--mist); padding:clamp(22px,2.2vw,28px); display:flex; flex-direction:column; transition:background .2s ease}
.tier.is-match{background:var(--ink); color:rgba(255,255,255,.84)}
.tier.is-match h3,.tier.is-match .tier__price{color:#fff}
.tier.is-match .tier__k{color:var(--sun)}
.tier.is-match .tier__list li{color:rgba(255,255,255,.8)}
.tier.is-match .tier__list li::before{background:var(--sun)}
.tier__k{font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green-deep); margin-bottom:12px}
.tier h3{margin-bottom:6px}
.tier__price{font-family:'Nunito',sans-serif; font-weight:800; color:var(--ink); font-size:clamp(28px,2.9vw,38px); line-height:1; letter-spacing:-.03em; margin:12px 0 4px}
.tier__meta{font-size:14.5px; margin-bottom:16px}
.tier__list{list-style:none; padding:0; margin:0 0 20px; flex:1}
.tier__list li{position:relative; padding-left:20px; font-size:15.5px; margin-bottom:7px; line-height:1.48}
.tier__list li::before{content:''; position:absolute; left:0; top:9px; width:9px; height:9px; background:var(--green)}
.tier .btn{width:100%}
.addons{margin-top:clamp(24px,2.6vw,34px); padding-top:22px; border-top:1px solid var(--rule)}
.addons__k{font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--body); margin-bottom:14px}
.addons__list{display:flex; flex-wrap:wrap; gap:9px}
.addon{background:var(--ink); padding:12px 17px; font-size:15px; font-weight:600; color:#fff; text-decoration:none}
.addon b{color:var(--sun)}
.addon:hover{background:var(--green); color:var(--ink-black)}
.addon:hover b{color:var(--ink-black)}
.terms{margin-top:22px; font-size:15px; color:var(--body)}
.terms a, .tier__list a{color:var(--green-deep); text-decoration:underline; text-underline-offset:3px}
.tier.is-match .tier__list a{color:var(--sun)}
@media (max-width:960px){ .tiers{grid-template-columns:1fr} }

/* ============ JANEL ============ */
.janel{display:grid; grid-template-columns:minmax(0,.4fr) minmax(0,.6fr); gap:clamp(28px,3.4vw,56px); align-items:center}
.janel__media{aspect-ratio:1/1; overflow:hidden; background:var(--ink-deep)}
.janel__media video{width:100%; height:100%; object-fit:cover}
.janel__creds{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.cred{background:var(--ink-lift); color:#EAF2F4; padding:9px 15px; font-size:14.5px; font-weight:600}
@media (max-width:860px){ .janel{grid-template-columns:1fr} .janel__media{aspect-ratio:16/10} }

/* ============ FAQ ============ */
.faq__list{margin-top:clamp(22px,2.6vw,34px); border-top:1px solid var(--rule)}
.faq__item{border-bottom:1px solid var(--rule)}
.faq__q{
  width:100%; background:transparent; border:0; cursor:pointer; text-align:left;
  padding:19px 44px 19px 0; position:relative;
  font-family:'Nunito',sans-serif; font-weight:800; color:var(--ink);
  font-size:clamp(17.5px,1.65vw,22px); line-height:1.28;
}
.faq__q::after{
  content:''; position:absolute; right:6px; top:50%; width:13px; height:13px;
  border-right:2.5px solid var(--green); border-bottom:2.5px solid var(--green);
  transform:translateY(-70%) rotate(45deg); transition:transform .22s ease;
}
.faq__item.is-open .faq__q::after{transform:translateY(-30%) rotate(-135deg)}
.faq__a{max-height:0; overflow:hidden; transition:max-height .3s ease}
.faq__a p{padding-bottom:22px; margin:0; font-size:16.5px}

/* ============ FINAL CTA ============ */
.final{position:relative; padding-block:0; overflow:hidden; background:var(--ink)}
.final__media{position:absolute; inset:0}
.final__media video{width:100%; height:100%; object-fit:cover}
.final__scrim{position:absolute; inset:0; background:linear-gradient(96deg, rgba(9,26,32,.94) 0%, rgba(9,26,32,.8) 48%, rgba(9,26,32,.4) 100%)}
.final__inner{position:relative; z-index:3; padding-block:clamp(62px,6.4vw,100px)}
.final h2{color:#fff; font-size:clamp(32px,4.8vw,64px); margin-bottom:16px; max-width:16ch}
.final p{color:rgba(255,255,255,.86); font-size:18px; max-width:48ch; margin-bottom:28px}
.final__ctas{display:flex; flex-wrap:wrap; gap:12px}
@media (max-width:600px){ .final__ctas{flex-direction:column} .final__ctas .btn{width:100%} }

/* ============ FOOTER ============ */
.site-footer{background:var(--ink-deep); color:rgba(255,255,255,.72); padding-top:clamp(48px,5vw,72px)}
.foot__top{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) minmax(0,1.1fr); gap:clamp(26px,3.2vw,50px); padding-bottom:clamp(32px,3.6vw,46px)}
.site-footer .logo img{filter:none}
.foot__blurb{font-size:16px; margin:20px 0 0; max-width:36ch; color:rgba(255,255,255,.7)}
.foot__h{font-family:'Nunito',sans-serif; font-weight:800; color:#fff; font-size:16px; margin-bottom:16px; letter-spacing:.01em}
.foot__nav{list-style:none; padding:0; margin:0}
.foot__nav li{margin-bottom:10px}
.foot__nav a{font-size:16px; text-decoration:none; color:rgba(255,255,255,.72)}
.foot__nav a:hover{color:var(--sun)}
.foot__contact{font-size:16px; line-height:1.7}
.foot__contact a{color:var(--sun); text-decoration:none}
.foot__addr{font-style:normal; color:inherit}
/* a small label inside a button, e.g. a pre-release program: same button, same color, just marked */
.btn__tag{display:inline-block; padding:3px 8px; border-radius:999px; border:1px solid currentColor; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; line-height:1.2; opacity:.85; white-space:nowrap}
/* on a phone the label goes on its own line under the button text, so the button keeps its neighbours' size */
@media (max-width:600px){ .btn:has(> .btn__tag){flex-direction:column; gap:6px; padding-block:12px} }
.post{display:block; background:rgba(255,255,255,.06); padding:22px; text-decoration:none; transition:background .2s ease}
.post:hover{background:rgba(255,255,255,.11)}
.post__k{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin-bottom:10px}
.post__t{font-family:'Nunito',sans-serif; font-weight:800; color:#fff; font-size:19px; line-height:1.2; margin-bottom:8px}
.post__x{font-size:15px; color:rgba(255,255,255,.7); margin:0}
.sbs-lockup{
  border-top:1px solid var(--rule-dark); padding-block:24px;
  display:flex; align-items:center; justify-content:center;
}
.sbs-lockup .sbs-footer-mark{display:flex; align-items:center}
.foot__legal{
  border-top:1px solid var(--rule-dark); padding-block:22px 30px;
  display:flex; justify-content:center; gap:14px; flex-wrap:wrap; font-size:14.5px;
  color:rgba(255,255,255,.55); text-align:center;
}
@media (max-width:900px){ .foot__top{grid-template-columns:1fr; gap:34px} }

/* ============ FLOATING CTA ============ */
.floating-cta{
  position:fixed; right:22px; bottom:22px; z-index:800; opacity:0; transform:translateY(14px);
  pointer-events:none; transition:opacity .28s ease, transform .28s ease;
  box-shadow:0 14px 40px rgba(9,26,32,.4);
}
.floating-cta.is-live{opacity:1; transform:translateY(0); pointer-events:auto}
.floating-cta.is-hidden{opacity:0 !important; transform:translateY(14px) !important; pointer-events:none !important}
@media (max-width:600px){ .floating-cta{right:12px; left:auto; bottom:14px; padding:14px 20px; font-size:15px} }

/* ============ REVEAL ============ */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none}
  .btn:hover{transform:none}
  *{scroll-behavior:auto !important}
}
html{scroll-behavior:smooth}

/* ============ UTILITIES (declared LAST) ============ */
.measure{max-width:60ch}
.section p, .split-cell p, .work p, .paper p, .quote p, .faq__a p,
.res__body, .match__p, .step__hint, .foot__blurb, .post__x, .terms,
.recog__q p, .results__stat span, .change__lbl span, .lbl span, .tier__meta{max-width:52ch}
.tier__list li{max-width:48ch}
.lede{max-width:50ch}
.hero__sub{max-width:44ch}
.film__box p{max-width:40ch}
.final p{max-width:40ch}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.mt-lg{margin-top:clamp(24px,3vw,40px)}
.center{text-align:center}
.nb{white-space:nowrap}
.measure-hd{max-width:660px}
.measure-hd--sm{max-width:640px}
.pt-0{padding-top:0}
.pb-0{padding-bottom:0}
.mt-md{margin-top:22px}
.q-sm{font-size:clamp(18px,1.9vw,24px)}
.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}

/* ============ MULTI-PAGE ADDITIONS ============ */

a{color:inherit}
.btn--outline{background:transparent; color:var(--ink); border:2px solid var(--ink)}
.btn--outline:hover{background:var(--ink); color:#fff}
.s-dark .btn--outline,.s-deep .btn--outline{color:#fff; border-color:rgba(255,255,255,.6)}

/* header: r12 transparent-over-hero on the homepage, solid on interior pages */
.site-header{background:#0F2026}
.has-hero .site-header{background:transparent}
.has-hero .site-header.is-scrolled{background:#0F2026}
.site-header{margin-bottom:0}
.has-hero .site-header{margin-bottom:calc(-1 * var(--header-h))}
/* header nav: four grouped dropdowns, account links right; drawer on mobile only (r12 type and color) */
.header-inner{gap:20px}
.mainnav{display:flex; align-items:center; flex:1 1 auto; min-width:0; gap:20px}
.mainnav__groups{display:flex; align-items:center; gap:6px; list-style:none; margin:0 auto 0 8px; padding:0}
.navgrp{position:relative}
.navgrp__btn{display:flex; align-items:center; gap:7px; background:none; border:0; cursor:pointer; padding:10px 10px;
  font-family:'NunitoSans',sans-serif; font-weight:600; font-size:15px; color:#fff; white-space:nowrap; opacity:.9;
  text-shadow:0 1px 10px rgba(6,20,25,.85), 0 0 3px rgba(6,20,25,.7)}
.site-header.is-scrolled .navgrp__btn,.site-header.is-scrolled .acct a.acct-link{text-shadow:none}
.navgrp__chev{width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .18s ease}
.navgrp:hover .navgrp__btn,.navgrp:focus-within .navgrp__btn,.navgrp__btn[aria-expanded="true"]{opacity:1; color:var(--sun)}
.navgrp__panel{position:absolute; left:0; top:100%; min-width:390px; list-style:none; margin:0; padding:10px 0;
  background:var(--ink); box-shadow:0 22px 50px rgba(0,0,0,.45); z-index:950;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .16s ease, transform .16s ease, visibility .16s}
.navgrp:hover .navgrp__panel,.navgrp:focus-within .navgrp__panel,.navgrp__btn[aria-expanded="true"] + .navgrp__panel{opacity:1; visibility:visible; transform:none}
.navgrp:hover .navgrp__chev,.navgrp__btn[aria-expanded="true"] .navgrp__chev{transform:translateY(1px) rotate(-135deg)}
.navgrp__panel a{display:block; padding:10px 20px; color:#fff; text-decoration:none; font-weight:600; font-size:15px; line-height:1.35}
.navgrp__panel a:hover,.navgrp__panel a:focus,.navgrp__panel a[aria-current="page"]{color:var(--sun); background:var(--ink-lift)}
.navgrp__note{display:block; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--sun); margin-top:3px}
.acct{display:flex; align-items:center; gap:16px; flex:0 0 auto}
.acct a.acct-link{font-weight:700; font-size:15px; color:#fff; text-decoration:none; white-space:nowrap; text-shadow:0 1px 10px rgba(6,20,25,.85), 0 0 3px rgba(6,20,25,.7)}
.acct a.acct-link:hover{color:var(--sun)}
.acct .btn{box-shadow:0 6px 22px rgba(6,20,25,.4); padding-inline:20px}
@media (max-width:1080px){
  .burger{display:flex; margin-left:auto}
  .mainnav{position:fixed; left:0; right:0; top:var(--header-h); bottom:0; z-index:940; display:block; overflow:auto;
    background:var(--ink); padding:18px 24px 32px; box-shadow:0 20px 60px rgba(0,0,0,.45);
    transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease, transform .2s ease, visibility .2s}
  .site-header.nav-open .mainnav{opacity:1; visibility:visible; pointer-events:auto; transform:none}
  .site-header.nav-open{background:#0F2026}
  .mainnav__groups{display:block; margin:0}
  .navgrp{border-bottom:1px solid var(--rule-dark); padding:12px 0}
  .navgrp__btn{padding:6px 0; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sun); opacity:1; text-shadow:none; cursor:default}
  .navgrp__chev{display:none}
  /* The panels inherit the drawer's visibility. Setting visibility:visible here (as before 2026-10-12) made them
     visible inside the closed, hidden drawer: invisible at opacity 0 but still tappable, over every page. */
  .navgrp__panel{position:static; opacity:1; visibility:inherit; transform:none; box-shadow:none; background:none; padding:0; min-width:0}
  /* touch screens keep :hover and focus after a tap; the desktop dropdown rule must not re-show a panel here */
  .navgrp:hover .navgrp__panel,.navgrp:focus-within .navgrp__panel,.navgrp__btn[aria-expanded="true"] + .navgrp__panel{visibility:inherit}
  .navgrp__panel a{padding:9px 0; font-size:17px}
  .navgrp__panel a:hover,.navgrp__panel a:focus{background:none}
  .acct{padding-top:22px; gap:18px}
  .acct a.acct-link{font-size:17px; text-shadow:none}
  .acct .btn{flex:1 1 auto; justify-content:center}
}

/* hero copy blocks */
.hero__quote{color:#fff; font-family:'Nunito',sans-serif; font-weight:800; font-size:clamp(19px,1.9vw,26px); line-height:1.2; margin:0 0 8px; max-width:30ch; text-shadow:0 2px 16px rgba(0,0,0,.7)}
.hero__cite{color:rgba(255,255,255,.82); font-size:15.5px; margin:0 0 26px; text-shadow:0 2px 12px rgba(0,0,0,.7)}
.hero__ctas .btn{max-width:100%; white-space:normal}

/* page hero for interior pages */
.page-hero{background:var(--ink); color:rgba(255,255,255,.86); padding-block:clamp(56px,6vw,96px) clamp(40px,4.4vw,64px)}
.page-hero h1{color:#fff; font-size:clamp(34px,4.6vw,60px); max-width:22ch}
.page-hero .lede{margin-top:18px}
.page-hero__ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}

/* generic content sections */
.split2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:center}
.split2--top{align-items:start}
.split2.rev > .split2__media{order:2}
/* no placeholder fill: a photo that has not loaded yet leaves its section's own background, not a pale empty box */
.split2__media{position:relative; overflow:hidden; background:transparent}
.split2__media img,.split2__media video{width:100%; height:auto; display:block}
.split2__media--cover{aspect-ratio:4/3}
.split2__media--cover img,.split2__media--cover video{height:100%; object-fit:cover}
@media (max-width:860px){ .split2{grid-template-columns:1fr} .split2.rev > .split2__media{order:0} }

.prose{font-size:17.5px; line-height:1.68}
.prose > *:first-child{margin-top:0}
.prose h2{font-size:clamp(28px,3.4vw,44px); margin:0 0 18px}
.prose h3{margin:26px 0 10px}
.prose h4{font-size:19px; margin:22px 0 8px}
.prose p{margin:0 0 1em; max-width:66ch}
.prose ul,.prose ol{margin:0 0 1.2em; padding-left:1.25em; max-width:62ch}
.prose li{margin:0 0 .45em}
.prose li p{margin:0}
.prose blockquote{margin:0 0 1.2em; padding-left:20px; border-left:4px solid var(--green)}
.prose blockquote p{font-family:'Nunito',sans-serif; font-weight:800; color:var(--ink); font-size:20px; margin:0 0 .35em}
.prose a{color:var(--green-deep); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere}
.s-dark .prose,.s-deep .prose{color:rgba(255,255,255,.86)}
.s-dark .prose h2,.s-deep .prose h2,.s-dark .prose h3,.s-deep .prose h3,.s-dark .prose blockquote p,.s-deep .prose blockquote p{color:#fff}
.s-dark .prose a,.s-deep .prose a{color:var(--sun)}
.prose .center-block{text-align:center}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}
.section-head{max-width:760px; margin-bottom:clamp(22px,2.6vw,34px)}
.section-head .lede{margin-top:14px}
.centered{text-align:center; margin-inline:auto}
.centered .btn-row{justify-content:center}
.centered .prose p,.centered.prose p{margin-inline:auto}

/* quote band */
.quote-band{text-align:center}
.quote-band h2{font-size:clamp(24px,2.9vw,40px); line-height:1.18; max-width:32ch; margin:0 auto}
.quote-band .cite{display:block; margin-top:16px; font-weight:700; font-size:16px}
.s-dark .quote-band .cite,.s-deep .quote-band .cite{color:var(--sun)}

/* check list grid */
.checks{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 28px; list-style:none; padding:0; margin:0 0 24px; max-width:880px}
.checks li{position:relative; padding:14px 16px 14px 52px; background:var(--paper); font-weight:700; color:var(--ink); max-width:none}
.checks li::before{content:''; position:absolute; left:16px; top:50%; width:22px; height:22px; margin-top:-11px; background:var(--green); border-radius:50%}
.checks li::after{content:''; position:absolute; left:24px; top:50%; width:5px; height:10px; margin-top:-7px; border:solid var(--ink-black); border-width:0 2.5px 2.5px 0; transform:rotate(42deg)}
@media (max-width:700px){ .checks{grid-template-columns:1fr} }

/* case studies */
.cases{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:clamp(14px,1.6vw,22px)}
.case{background:var(--paper); padding:clamp(20px,2.1vw,26px); border-top:4px solid var(--green)}
.case h3{font-size:clamp(20px,1.9vw,25px); margin-bottom:10px}
.case p{font-size:16px; margin:0}

/* film with native controls */
.film2__grid{display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,.58fr); gap:clamp(26px,3.4vw,56px); align-items:center}
.film2__video{background:var(--ink-recess); aspect-ratio:16/9}
.film2__video video{width:100%; height:100%; object-fit:contain; background:#000}
.film2__video img{width:100%; height:100%; object-fit:cover}
.film2 h2{color:#fff; font-size:clamp(24px,2.6vw,36px); line-height:1.2}
@media (max-width:900px){ .film2__grid{grid-template-columns:1fr} }
/* a pending video with no still yet: its text stands alone, centered, instead of beside an empty frame */
.film2__solo{max-width:820px; text-align:center}
.film2__solo .prose p{margin-inline:auto}
/* a photo beside text that runs past a screen stays in view as the text scrolls (desktop two-column only) */
@media (min-width:861px){ .split2--sticky > .split2__media{position:sticky; top:calc(var(--header-h) + 24px)} }

/* FAQ via details */
.faq__list details{border-bottom:1px solid var(--rule)}
.faq__list summary{list-style:none; cursor:pointer; padding:19px 44px 19px 0; position:relative; font-family:'Nunito',sans-serif; font-weight:800; color:var(--ink); font-size:clamp(17.5px,1.65vw,22px); line-height:1.28}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary::after{content:''; position:absolute; right:6px; top:50%; width:13px; height:13px; border-right:2.5px solid var(--green); border-bottom:2.5px solid var(--green); transform:translateY(-70%) rotate(45deg)}
.faq__list details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq__list details > div{padding-bottom:20px}

/* footer additions */
.foot__social{display:flex; gap:16px; margin-top:14px}
.foot__social a{color:var(--sun); text-decoration:none; font-weight:700}
.foot__legal a{color:rgba(255,255,255,.7); text-decoration:none}
.foot__legal a:hover{color:var(--sun)}

/* product hero on sales pages */
.crumb{font-size:14.5px; color:rgba(255,255,255,.7); margin:0 0 14px}
.crumb a{color:rgba(255,255,255,.85)}
.buybar{display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:24px}
.buybar .price{font-family:'Nunito',sans-serif; font-weight:800; color:var(--sun); font-size:clamp(26px,2.6vw,34px)}
.img-card{background:var(--paper); padding:0}
.img-plain{display:block; max-width:100%; height:auto}
.media-round img{border-radius:50%}
.work__media img{width:100%; height:100%; object-fit:cover; object-position:center}
.work__media img.contain{object-fit:contain; background:var(--ink)}

/* hero heading split variant: keyword H1 small, r12 statement H2 large */
.hero .hero__kicker{font-family:'NunitoSans',sans-serif; font-weight:700; font-size:clamp(14px,1.15vw,17px); line-height:1.3; letter-spacing:.12em; text-transform:uppercase; color:var(--sun); margin:0 0 18px; text-shadow:0 2px 14px rgba(0,0,0,.7)}
.hero .hero__statement{color:#fff; font-size:clamp(36px,min(6.1vw,9.4svh),84px); line-height:.99; margin:0 0 22px; text-shadow:0 3px 30px rgba(0,0,0,.6)}
.hero .hero__statement em{font-style:normal; color:var(--sun)}
@media (min-width:769px) and (max-height:800px){ .hero .hero__statement{margin-bottom:16px} .hero .hero__kicker{margin-bottom:12px} }

/* imported interior pages */
.measure-wide{max-width:820px}
.pgrid{display:grid; gap:clamp(16px,1.8vw,24px); grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
.pgrid--1{--cols:1} .pgrid--2{--cols:2} .pgrid--3{--cols:3} .pgrid--4{--cols:4}
.pgrid__card{background:var(--paper); padding:clamp(18px,2vw,24px); display:flex; flex-direction:column; gap:10px; color:var(--body); text-decoration:none}
.s-mist .pgrid__card{background:var(--paper)}
.section:not(.s-mist) .pgrid__card{background:var(--mist)}
.pgrid__card img{width:100%; height:auto; display:block}
.pgrid__card h3{font-size:clamp(19px,1.7vw,23px)}
.pgrid__card p{margin:0 0 .6em; font-size:16px}
.pgrid__card ul{padding-left:1.1em; margin:0 0 .6em; font-size:16px}
.pgrid__sub{color:var(--green-deep); font-weight:700}
.pgrid__card .btn-row{margin-top:auto; padding-top:8px}
.post-card:hover h2{color:var(--green-deep)}
.post-card h2{font-size:clamp(19px,1.6vw,22px); line-height:1.25}
@media (max-width:960px){ .pgrid--3,.pgrid--4{--cols:2} }
@media (max-width:640px){ .pgrid{--cols:1 !important} }
.article{max-width:760px; margin-inline:auto}
.article img{max-width:100%; height:auto; margin:18px 0}
.article h2{font-size:clamp(26px,2.8vw,36px); margin-top:34px}
.article h3{margin-top:26px}
/* blog additions (components/PodiaPage.jsx enhancePost): an in-article figure and the 90-Second Check box */
.article .post-fig{margin:30px 0}
.article .post-fig img{display:block; width:100%; margin:0}
.article .post-cta{margin:38px 0; padding:24px clamp(18px,2.4vw,30px); background:var(--mist); border-left:5px solid var(--green)}
.article .post-cta p{margin:0 0 12px}
.article .post-cta p:last-child{margin-bottom:0}
.article .post-cta .post-cta__h{font-family:'Nunito',sans-serif; font-weight:800; font-size:clamp(20px,1.8vw,24px); line-height:1.25; color:var(--ink)}
.article .post-cta a.btn{color:var(--ink-black); text-decoration:none}
.page-hero .split2__media{background:none}
.page-hero .split2__media img{width:100%; height:auto}
.page-hero .prose,.page-hero .prose p{color:rgba(255,255,255,.86)}
.page-hero .prose a{color:var(--sun)}
.split2__media img{width:100%; height:auto; display:block}
.prose table{border-collapse:collapse; width:100%; margin:0 0 1.2em; font-size:16px}
.prose th,.prose td{border:1px solid var(--rule); padding:8px 10px; text-align:left}
.page-hero .eyebrow{color:var(--sun)}
.page-hero .crumb{color:rgba(255,255,255,.7)}
/* program pages: each grade band reads differently at a glance (data/overrides.js PROGRAM_IMAGERY) */
.band-34{--band:var(--sun)}
.band-56{--band:var(--green)}
.page-hero--band{position:relative; overflow:hidden; border-top:6px solid var(--band)}
.page-hero--band .inner{position:relative; z-index:1}
.band__ghost{position:absolute; right:-1%; bottom:-4%; font-family:'Nunito',sans-serif; font-weight:800; font-size:min(34vw,380px); line-height:.8; letter-spacing:-.06em; color:var(--band); opacity:.1; pointer-events:none; user-select:none; z-index:0}
.band__tag{display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin:0 0 18px; padding:8px 14px; background:var(--band); color:var(--ink); font-family:'Nunito',sans-serif; font-weight:700; font-size:clamp(15px,1.3vw,18px)}
.band__tag b{font-weight:800}
.page-hero--band .split2__media{aspect-ratio:1/1}
.page-hero--band .split2__media img{height:100%; object-fit:cover}

/* Google reviews */
.reviews{columns:3 320px; column-gap:clamp(16px,1.8vw,24px)}
.review{--card-bg:var(--paper); break-inside:avoid; margin:0 0 clamp(16px,1.8vw,24px); background:var(--card-bg); padding:clamp(20px,2.1vw,26px); border-top:4px solid var(--green)}
.section:not(.s-mist) .review{--card-bg:var(--mist)}
.review blockquote{margin:0}
/* a long review or testimonial folded by site.js: the text is all there, clipped with a fade, until Read more */
.is-folded > .fold-text{overflow:hidden; position:relative}
.is-folded > .fold-text::after{content:''; position:absolute; left:0; right:0; bottom:0; height:3.2em; background:linear-gradient(to bottom, transparent, var(--card-bg)); pointer-events:none}
.fold-more{display:inline-flex; align-items:center; min-height:44px; padding:0; margin:0 0 4px; background:none; border:0; color:var(--green-deep); font:inherit; font-size:15px; font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.fold-more[hidden]{display:none}
.review blockquote p{font-size:16px; line-height:1.6; color:var(--ink); margin:0 0 .8em}
.review figcaption{display:flex; flex-direction:column; gap:2px; margin-top:6px}
.review__name{font-weight:700; color:var(--ink)}
.review__meta{font-size:14px; color:var(--body)}
.review__note{font-size:14px; color:var(--body); margin-top:8px}
.reviews__more > summary{list-style:none; cursor:pointer; margin:4px 0 22px}
.reviews__more > summary::-webkit-details-marker{display:none}
.reviews__more[open] > summary{display:none}
.review--featured{max-width:820px; margin-top:14px}
.review--featured blockquote p{font-size:clamp(18px,1.6vw,21px); line-height:1.55}
.paper__src{color:inherit; text-decoration:underline; text-decoration-color:var(--sun); text-underline-offset:4px}
.paper__src:hover{color:var(--sun)}

/* icon-led text cards (testimonials page speech bubbles) */
.iconcards{columns:2 420px; column-gap:clamp(16px,1.8vw,24px)}
.iconcard{--card-bg:var(--paper); break-inside:avoid; margin:0 0 clamp(16px,1.8vw,24px); background:var(--card-bg); padding:clamp(20px,2.1vw,28px); border-top:4px solid var(--green)}
.section:not(.s-mist) .iconcard{--card-bg:var(--mist)}
.iconcard__icon{width:44px; height:44px; margin:0 0 12px}
.iconcard .prose{font-size:16.5px}
.iconcard .prose p{max-width:none}

/* ============ VISUALIZATION POST (blog, Pete's brief 2026-10-13) ============
   Scoped to its own classes: the takeaway cards, the buttons after its introduction, its FAQ and its two
   illustrations (components/PostModules.jsx, stepped by site.js). The finished picture is the default state. */
.article [id]{scroll-margin-top:calc(var(--header-h) + 18px)}
.article a.btn{text-decoration:none}
.article a.btn--primary{color:var(--ink-black)}
.article a.btn--outline{color:var(--ink)}
.article a.btn--outline:hover{color:#fff}
.rar-viz-ctas{margin:6px 0 10px}
.page-hero .split2__media .autoplay-video{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover}

.prose .rar-viz-takeaways{list-style:none; padding:0; margin:18px 0 8px; max-width:none; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,18px)}
.prose .rar-viz-takeaways li{margin:0; padding:20px 18px; background:var(--mist); border-top:4px solid var(--green); font-size:16.5px; line-height:1.55; color:var(--ink)}
.rar-viz-takeaways__icon{display:block; width:40px; height:40px; margin:0 0 12px; color:var(--green-deep)}
@media (max-width:700px){ .prose .rar-viz-takeaways{grid-template-columns:1fr} }

.faq--static .faq__a{max-height:none}
.faq__h{margin:0; font-size:inherit; line-height:inherit}
.faq__q:focus-visible{outline:3px solid var(--green-deep); outline-offset:2px}

.rar-viz-module{margin:34px 0 38px; padding:clamp(18px,2.6vw,30px); background:var(--mist); border:1px solid var(--rule); border-top:5px solid var(--green)}
.rar-viz-module__eyebrow{margin:0 0 4px; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green-deep)}
.rar-viz-module__title{margin:0 0 18px; font-family:'Nunito',sans-serif; font-weight:800; font-size:clamp(21px,2vw,26px); line-height:1.2; color:var(--ink)}
.rar-viz-stage{margin:18px 0 0; font-weight:700; color:var(--ink); font-size:16px}
.rar-viz-stage__n{display:inline-block; margin-right:8px; padding:2px 9px; background:var(--ink); color:#fff; font-size:13px; font-weight:700; letter-spacing:.04em}
.rar-viz-results{margin-top:14px}
.rar-viz-result{margin:0 0 .6em; font-size:16.5px; line-height:1.6; color:var(--ink)}
.rar-viz-note{margin:12px 0 0; padding-top:12px; border-top:1px solid var(--rule); font-size:14.5px; line-height:1.55; color:var(--body)}
.rar-viz-replay{margin-top:16px; min-height:44px}
.rar-viz-replay[hidden]{display:none}
.rar-viz-replay:focus-visible{outline:3px solid var(--green-deep); outline-offset:3px}
/* anything waiting for a later stage, while site.js is stepping the illustration */
.rar-viz-module [data-step]{transition:opacity .5s ease, transform .6s ease}
.rar-viz-module.is-staged .is-waiting{opacity:0}
.rar-viz-module.is-staged .rar-viz-results.is-waiting{visibility:hidden}

/* Sentence-to-Picture Formation */
.rar-viz-sp{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(16px,2.4vw,28px); align-items:start}
.rar-viz-sp__label{margin:0 0 8px; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--body)}
.rar-viz-sp__sentence{margin:0 0 16px; font-family:'Nunito',sans-serif; font-weight:800; font-size:clamp(22px,2.4vw,28px); line-height:1.45; color:var(--ink)}
.rar-viz-sp mark{background:none; color:inherit; padding:0 3px; border-radius:2px; box-shadow:inset 0 0 0 2px transparent; transition:background .3s ease, box-shadow .3s ease}
.rar-viz-sp mark.is-on{background:#FFF3B8; box-shadow:inset 0 0 0 2px var(--ink); text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:5px}
.rar-viz-sp__keys{list-style:none; margin:0; padding:0; font-size:15.5px; color:var(--ink)}
.rar-viz-sp__keys li{margin:0 0 6px; padding:6px 10px; border-left:4px solid var(--rule); background:var(--paper)}
.rar-viz-sp__keys li.is-on{border-left-color:var(--ink); font-weight:700}
.rar-viz-sp__keys li.is-on::after{content:' (in focus)'; font-weight:600; color:var(--green-deep)}
.rar-viz-sp__svg{display:block; width:100%; height:auto; border:1px solid var(--rule)}
.sp-sky{fill:#EAF4F7}
.sp-sun{fill:#FFF3B8}
.sp-branch__wood{fill:none; stroke:#7A5534; stroke-width:12; stroke-linecap:round}
.sp-branch__twig{stroke-width:6}
.sp-leaf{fill:var(--green); stroke:var(--ink); stroke-width:1.5}
.sp-bird{transition:opacity .5s ease, transform .7s ease}
.sp-bird__fill{fill:var(--sun); stroke:var(--ink); stroke-width:2.5; transition:fill .5s ease}
.sp-bird__wing{fill:#F5C93A; stroke:var(--ink); stroke-width:2; transition:fill .5s ease}
.sp-bird__beak{fill:#E89A2C; stroke:var(--ink); stroke-width:1.5}
.sp-bird__eye{fill:var(--ink)}
.sp-bird__leg{fill:none; stroke:var(--ink); stroke-width:2.5; stroke-linecap:round}
/* while stepping: no color until "yellow", no branch until "branch", and the bird hovers until it "sits" */
.rar-viz-sentence.is-staged[data-stage="1"] .sp-bird__fill,.rar-viz-sentence.is-staged[data-stage="2"] .sp-bird__fill,
.rar-viz-sentence.is-staged[data-stage="1"] .sp-bird__wing,.rar-viz-sentence.is-staged[data-stage="2"] .sp-bird__wing{fill:#fff}
.rar-viz-sentence.is-staged[data-stage="1"] .sp-bird,.rar-viz-sentence.is-staged[data-stage="2"] .sp-bird,
.rar-viz-sentence.is-staged[data-stage="3"] .sp-bird,.rar-viz-sentence.is-staged[data-stage="4"] .sp-bird{transform:translateY(-34px)}
.rar-viz-sentence.is-staged[data-stage="1"] .sp-bird__leg,.rar-viz-sentence.is-staged[data-stage="2"] .sp-bird__leg,
.rar-viz-sentence.is-staged[data-stage="3"] .sp-bird__leg,.rar-viz-sentence.is-staged[data-stage="4"] .sp-bird__leg{opacity:0}
@media (max-width:640px){ .rar-viz-sp{grid-template-columns:1fr} }

/* Daily Practice Momentum: two tracks on the same 14-day grid */
.rar-viz-dp__row{margin:0 0 18px}
.rar-viz-dp__name{margin:0 0 18px; font-weight:700; color:var(--ink); font-size:16px}
.rar-viz-dp__track{position:relative; display:grid; grid-template-columns:repeat(14,1fr); gap:4px; align-items:center; min-height:44px; padding:6px 0}
.rar-viz-dp__base{position:absolute; left:0; right:0; top:50%; border-top:2px dashed rgba(23,53,63,.35)}
.rar-viz-dp__track--regular .rar-viz-dp__base{border-top-style:dotted}
.rar-viz-dp__run{grid-row:1; align-self:center; height:6px; background:var(--ink); margin-inline:12%}
.rar-viz-dp__lesson{grid-row:1; position:relative; z-index:1; display:flex; align-items:center; justify-content:center; height:30px; background:var(--green); border:2px solid var(--ink); color:var(--ink-black); font-size:12px; font-weight:700}
.rar-viz-dp__gap{grid-row:1; position:relative; z-index:1; align-self:start; margin-top:-2px; padding:0 4px; border:2px solid var(--body); border-bottom:0; height:12px; font-size:11.5px; font-weight:700; line-height:1; color:var(--body); text-align:center; transform:translateY(-14px)}
.rar-viz-dp__cap{margin:6px 0 0; font-size:15px; font-weight:600; color:var(--green-deep)}
.rar-viz-dp__axis{display:grid; grid-template-columns:1fr 1fr; border-top:2px solid var(--ink); padding-top:6px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--body)}
.rar-viz-dp__axis span + span{border-left:2px solid var(--ink); padding-left:8px}
.rar-viz-dp__legend{display:flex; align-items:center; gap:10px; margin:14px 0 0; font-size:15px; color:var(--ink)}
.rar-viz-dp__key{display:inline-flex; align-items:center; justify-content:center; flex:none; width:26px; height:26px; background:var(--green); border:2px solid var(--ink); font-size:12px; font-weight:700; color:var(--ink-black)}
.rar-viz-practice.is-staged .rar-viz-dp__lesson.is-waiting{transform:scale(.6)}
@media (max-width:480px){ .rar-viz-dp__track{gap:2px} .rar-viz-dp__lesson span{display:none} .rar-viz-dp__gap{font-size:0} }

.rar-viz-controls{display:flex; flex-wrap:wrap; gap:10px}
.rar-viz-pause{margin-top:16px; min-height:44px}
.rar-viz-pause[hidden]{display:none}
.rar-viz-pause:focus-visible{outline:3px solid var(--green-deep); outline-offset:3px}

/* Short-to-Long Word Climb (third grade post): four cards rising like steps */
.rar-viz-wc{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; align-items:end}
.rar-viz-wc__step{margin:0; margin-bottom:calc(var(--i) * 26px); padding:14px 10px 12px; background:var(--paper); border:2px solid var(--ink); border-bottom-width:6px; text-align:center; transition:opacity .5s ease, transform .6s ease}
.rar-viz-wc__word{display:block; font-family:'Nunito',sans-serif; font-weight:800; font-size:clamp(19px,2.1vw,26px); line-height:1.2; color:var(--ink); overflow-wrap:anywhere}
.rar-viz-wc__label{display:block; margin-top:6px; font-size:13px; font-weight:700; color:var(--green-deep)}
.rar-viz-wc__len{display:block; font-size:12.5px; color:var(--body)}
.rar-viz-wc__step.is-on{border-color:var(--green-deep); box-shadow:0 0 0 3px #FFF3B8}
/* while a new word arrives, the earlier ones step back but stay readable */
.rar-viz-climb.is-staged[data-stage="2"] .rar-viz-wc__step:not(.is-on):not(.is-waiting),
.rar-viz-climb.is-staged[data-stage="3"] .rar-viz-wc__step:not(.is-on):not(.is-waiting),
.rar-viz-climb.is-staged[data-stage="4"] .rar-viz-wc__step:not(.is-on):not(.is-waiting){opacity:.55}
.rar-viz-climb.is-staged .rar-viz-wc__step.is-waiting{transform:translateY(12px)}
.rar-viz-wc__line{margin:16px 0 0; font-family:'Nunito',sans-serif; font-weight:800; font-size:17px; color:var(--ink)}
@media (max-width:620px){
  .rar-viz-wc{grid-template-columns:1fr; gap:8px}
  .rar-viz-wc__step{margin-bottom:0; margin-left:calc(var(--i) * 8%); text-align:left; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px}
  .rar-viz-wc__label,.rar-viz-wc__len{margin-top:0}
  .rar-viz-climb.is-staged .rar-viz-wc__step.is-waiting{transform:translateX(-10px)}
}

/* Event Chain Reconstruction (third grade post): Maya's Garden in four panels */
.rar-viz-ec__title{margin:0; font-family:'Nunito',sans-serif; font-weight:800; font-size:19px; color:var(--ink)}
.rar-viz-ec__intro{margin:2px 0 14px; font-size:15.5px; color:var(--body)}
.rar-viz-ec{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; counter-reset:none}
.rar-viz-ec__card{position:relative; margin:0; padding:10px; background:var(--paper); border:2px solid var(--rule); transition:opacity .5s ease, transform .6s ease}
.rar-viz-ec__card.is-on{border-color:var(--green-deep)}
/* the connector to the next panel: an arrow in the gap, part of the order and never a score */
.rar-viz-ec__card:not(:last-child)::after{content:'\2192'; position:absolute; right:-14px; top:42%; width:14px; text-align:center; font-weight:800; color:var(--ink)}
.rar-viz-ec__label{margin:0 0 6px; font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.3}
.rar-viz-ec__n{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin-right:4px; background:var(--ink); color:#fff; font-size:12.5px}
.rar-viz-ec__svg{display:block; width:100%; height:auto; border:1px solid var(--rule)}
.rar-viz-ec__text{margin:8px 0 0; font-size:14.5px; line-height:1.45; color:var(--ink)}
.rar-viz-ec__chain{margin:16px 0 0; font-family:'Nunito',sans-serif; font-weight:800; font-size:17px; color:var(--ink)}
.rar-viz-ec__retell{margin:12px 0 0; padding:12px 16px; background:var(--paper); border-left:5px solid var(--green)}
.rar-viz-ec__retell p{margin:0; font-size:16px; line-height:1.55; color:var(--ink)}
.rar-viz-ec__retell .rar-viz-ec__retell-k{margin-bottom:4px; font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green-deep)}
.rar-viz-chain.is-staged .rar-viz-ec__card.is-waiting{transform:translateY(10px)}
.rar-viz-chain.is-staged .rar-viz-ec__retell.is-waiting{visibility:hidden}
.mg-sky{fill:#EAF4F7} .mg-grass{fill:#8BC77E} .mg-soil{fill:#7A5534}
.mg-hair{fill:#3A2A20} .mg-skin{fill:#E8B98F} .mg-shirt{fill:var(--sun); stroke:var(--ink); stroke-width:1.5}
.mg-pants{fill:#3D6E9E} .mg-arm{fill:none; stroke:#E8B98F; stroke-width:5; stroke-linecap:round}
.mg-packet{fill:#fff; stroke:var(--ink); stroke-width:1.5} .mg-flower{fill:#E86F8A}
.mg-seed{fill:#3A2A20} .mg-can{fill:#9FB7C2; stroke:var(--ink); stroke-width:1.5}
.mg-drop{fill:none; stroke:#3D8FD1; stroke-width:2; stroke-linecap:round}
.mg-sprout{fill:none; stroke:#3C8D2F; stroke-width:3; stroke-linecap:round}
/* two by two: arrows only within a row; the numbers carry the order across rows */
@media (max-width:700px){ .rar-viz-ec{grid-template-columns:1fr 1fr; gap:18px} .rar-viz-ec__card:nth-child(2)::after{display:none} }
@media (max-width:300px){ .rar-viz-ec{grid-template-columns:1fr} .rar-viz-ec__card:not(:last-child)::after{display:block; content:'\2193'; right:auto; left:50%; top:auto; bottom:-17px} }

@media (prefers-reduced-motion:reduce){
  .rar-viz-module *, .rar-viz-module [data-step], .faq--static .faq__a{transition:none !important}
}