/* MCE pages — SHARED design system, loaded once per Variant-B page by components/mce-page.
   Each page's styles.css holds only its bespoke styles; site chrome (nav/footer) comes from the global shell. */

/* ── Fonts ── prototype typefaces mapped to the site's existing /fonts files at the correct weights;
   scoped to MCE pages only (the global /static/fonts.css is untouched). */
@font-face{font-family:'Athletics';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/Athletics-Light.woff2) format('woff2'),url(/fonts/Athletics-Light.woff) format('woff')}
@font-face{font-family:'Athletics';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/Athletics-Regular.woff) format('woff')}
@font-face{font-family:'Athletics';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/Athletics-Medium.woff) format('woff')}
@font-face{font-family:'Athletics';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/Athletics-Bold.woff) format('woff')}
@font-face{font-family:'Untitled Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/untitled-sans-regular.woff2) format('woff2'),url(/fonts/untitled-sans-regular.woff) format('woff')}
@font-face{font-family:'Untitled Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/untitled-sans-medium.woff2) format('woff2'),url(/fonts/untitled-sans-medium.woff) format('woff')}

/* ── Primitive colour ramps ── */
:root {
  --neutral-100:  #FAF8F5; --neutral-200:  #F3F0EB; --neutral-300:  #E8E4DD;
  --neutral-400:  #C6C0B8; --neutral-500:  #97938C; --neutral-600:  #84807B;
  --neutral-700:  #5B5854; --neutral-800:  #43413E; --neutral-900:  #33312F;
  --neutral-1000: #292827;

  --gold-100:  #FAF1E6; --gold-200:  #FAE6D0; --gold-300:  #FAD6AC;
  --gold-400:  #F6BE7C; --gold-500:  #F4AB52; --gold-600:  #EC9A32;
  --gold-700:  #CE7E12; --gold-800:  #A45F00; --gold-900:  #7E4800;

  --error-100: #FFEEEE; --error-300: #FFC6C5; --error-500: #FA858A;
  --error-700: #D0505C; --error-800: #AE424C;

  --success-100: #ECF9EF; --success-300: #BCEAC8; --success-500: #6AC88A;
  --success-700: #28995A; --success-800: #1C7C48;

  --info-100: #EEF6FF; --info-300: #C1DCFF; --info-500: #74ACFC;
  --info-600: #5492F1; --info-700: #407BD6; --info-800: #3464B1;

  --warning-100: #FFF1E8; --warning-300: #FFD0B4; --warning-500: #FFA278;
  --warning-700: #EF7C59;

  --purple-100: #FAEFFF; --purple-300: #F0CAFF; --purple-500: #D994F8;
  --purple-700: #A65EC4;
}

/* ── Page-level aliases used by MCE markup ── */
:root {
  --ink:          var(--neutral-1000);
  --ink2:         var(--neutral-800);
  --muted:        var(--neutral-500);
  --border:       var(--neutral-300);
  --bg:           var(--neutral-100);
  --surface:      var(--neutral-200);
  --yellow:       var(--gold-500);
  --yellow-light: var(--gold-100);
  --green:        var(--success-700);
  --green-light:  var(--success-100);
  --red:          var(--error-700);
  --red-light:    var(--error-100);
  --blue:         var(--info-600);
  --blue-light:   var(--info-100);
  --purple:       var(--purple-700);
  --purple-light: var(--purple-100);
  --orange:       var(--warning-700);
  --orange-light: var(--warning-100);
}

/* ── Base ── */
.mce-page *{box-sizing:border-box;margin:0;padding:0}
/* padding-top clears the global site header (NavMain is position:fixed, ~56px);
   the prototype's own nav used to occupy this space before it was removed. */
.mce-page{font-family:'Untitled Sans',system-ui,sans-serif;font-size:17px;font-weight:300;line-height:1.7;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;padding-top:60px}
/* anchored TOC jumps land below the fixed header instead of under it */
.mce-page [id]{scroll-margin-top:76px}
.mce-page h1{font-family:'Athletics',Georgia,serif;font-size:clamp(30px,4vw,44px);font-weight:700;letter-spacing:-0.5px;line-height:1.15;margin-bottom:10px}
.mce-page h2{font-family:'Athletics',Georgia,serif;font-size:clamp(20px,3vw,28px);font-weight:700;letter-spacing:-0.3px;line-height:1.25;margin-bottom:16px;padding-top:8px}
.mce-page h3{font-family:'Athletics',Georgia,serif;font-size:19px;font-weight:700;line-height:1.35;margin-bottom:10px}
.mce-page p{margin-bottom:16px;line-height:1.75} .mce-page p:last-child{margin-bottom:0}
.mce-page em{font-style:italic} .mce-page strong{font-weight:600}
.mce-page a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);text-underline-offset:3px}
/* Card/button-style links must not inherit the global yellow underline
   (bug: related videos, related concepts, download buttons) — across all pages. */
.mce-page .rc-card,.mce-page .video-card,.mce-page .rv-card,
.mce-page .concept-chip,.mce-page .related-concepts a,.mce-page .related-col a,
.mce-page .ws-btn,.mce-page .cta-secondary,.mce-page a[download]{text-decoration:none}
.mce-page sup{font-size:.65em;vertical-align:super;line-height:0}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--yellow);margin-bottom:8px;display:block}
.content-section{padding:40px 0;border-top:1px solid var(--border)}
.content-section:first-of-type{border-top:none;padding-top:24px}

.term{border-bottom:1.5px dashed var(--yellow);cursor:help;position:relative}
.term::after{content:attr(data-tip);position:absolute;bottom:calc(100%+6px);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:12px;line-height:1.4;padding:8px 12px;border-radius:6px;white-space:normal;width:max-content;max-width:240px;pointer-events:none;opacity:0;transition:opacity .15s;font-family:'Untitled Sans',-apple-system,system-ui,sans-serif;font-style:normal;font-weight:400;z-index:10;text-align:center}
.term:hover::after,.term.active::after{opacity:1}
/* Keep tooltips inside the viewport — core.js measures the term and sets these on
   interaction so a tooltip near a screen edge no longer overflows (esp. mobile). */
.term.tip-clamped::after{left:var(--tip-left);right:auto;transform:none;max-width:var(--tip-w,240px)}

/* ── Layout ── */
.page-grid{max-width:1120px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:220px 1fr;gap:52px;align-items:start;padding-top:40px;padding-bottom:80px}

/* ── TOC sidebar ── */
.toc{position:sticky;top:80px;align-self:start;max-height:calc(100vh - 100px);overflow-y:auto;padding-bottom:20px}
.toc-title{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.toc-list{list-style:none;display:flex;flex-direction:column;gap:2px}
.toc-list a{display:block;padding:8px 12px;border-radius:0;font-size:14px;color:var(--ink2);text-decoration:none;border-left:2px solid transparent;transition:all .15s;line-height:1.4}
.toc-list a:hover{background:var(--border);color:var(--ink)}
.toc-list a.active{background:var(--yellow-light);color:var(--ink);border-left-color:var(--yellow);font-weight:500}
.toc-divider{height:1px;background:var(--border);margin:8px 12px}

/* mobile TOC */
.mobile-toc{display:none;background:var(--surface);border:1px solid var(--border);border-radius:0;margin-bottom:28px;overflow:hidden}
.mobile-toc-btn{width:100%;background:none;border:none;padding:13px 16px;display:flex;justify-content:space-between;align-items:center;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;color:var(--ink)}
.mobile-toc-body{display:none;border-top:1px solid var(--border);padding:6px 0}
.mobile-toc-body.open{display:block}
.mobile-toc-body a{display:block;padding:9px 16px;font-size:14px;color:var(--ink2);text-decoration:none;border-left:3px solid transparent;transition:all .15s}
.mobile-toc-body a:hover,.mobile-toc-body a.active{background:var(--bg);border-left-color:var(--yellow);color:var(--ink)}
/* Mobile-TOC chevron: rotated via the `.open` class (set by core.js) instead of
   a per-page innerHTML swap, so it stays correct after a React rebuild. */
.mobile-toc-btn #mtoc-icon{display:inline-flex;align-items:center;transition:transform .2s ease}
.mobile-toc-btn.open #mtoc-icon{transform:rotate(180deg)}

/* ── Callouts ── */
.hero-lead{font-size:18px;color:var(--ink2);margin:12px 0 28px;max-width:100%}
.think-box{background:var(--surface);border:1.5px solid var(--border);border-left:4px solid var(--ink2);border-radius:0;padding:16px 20px;margin:24px 0}
.think-label{display:block;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink2);margin-bottom:6px}
.think-box p{font-size:15px;color:var(--ink);margin:0}
.insight{background:var(--yellow-light);border:1px solid #F6BE7C;border-radius:0;padding:20px 24px;margin:24px 0;font-size:15px}

/* ── Practice quiz ── */
.practice-card{background:var(--surface);border:1px solid var(--border);border-radius:0;padding:28px;min-height:320px;display:flex;flex-direction:column}
.practice-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.progress-track{flex:1;height:5px;background:var(--border);border-radius:3px;overflow:hidden;margin-right:14px}
.progress-fill{height:100%;background:var(--green);border-radius:3px;width:0;transition:width .4s ease}
.q-counter{font-size:13px;color:var(--muted);font-weight:500;white-space:nowrap}
.practice-q{font-size:17px;font-weight:500;margin:16px 0;line-height:1.45}
.practice-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0}
.option-btn{background:var(--bg);border:1.5px solid var(--border);border-radius:0;padding:14px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:all .15s;color:var(--ink);text-align:center}
.option-btn:hover:not(:disabled){border-color:var(--ink2)}
.option-btn:disabled{cursor:not-allowed}
.option-btn.correct{background:var(--green-light);border-color:var(--green);color:var(--green);transform:scale(1.03)}
.option-btn.wrong{background:var(--red-light);border-color:var(--red);color:var(--red);animation:shake .35s ease}
.phint-btn{background:none;border:none;font-family:inherit;font-size:13px;color:var(--muted);cursor:pointer;text-decoration:underline;text-decoration-color:var(--border);padding:0;margin-top:4px}
.phint-text{font-size:14px;color:var(--ink2);background:var(--bg);border-radius:0;padding:11px 14px;margin-top:7px;display:none}
.phint-text.show{display:block;animation:fadeIn .3s ease}
.practice-fb{background:var(--bg);border-radius:0;padding:12px 16px;margin-top:7px;font-size:14px;color:var(--ink2);line-height:1.55;display:none}
.practice-fb.show{display:block}
.practice-fb.correct{background:var(--green-light);color:var(--green)}
.practice-fb.wrong{background:var(--red-light);color:var(--red)}
.practice-footer{display:flex;justify-content:flex-end;margin-top:auto;padding-top:14px}
.next-btn{background:var(--ink);color:#fff;border:none;padding:11px 20px;border-radius:0;font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;display:none}
.next-btn.show{display:inline-block}
.completion{text-align:center;padding:28px 16px;display:none}
.completion.show{display:block;animation:fadeIn .6s ease}
.completion .score{font-family:'Athletics',Georgia,serif;font-size:44px;font-weight:700;margin-bottom:8px}
.completion .msg{font-size:15px;color:var(--ink2);max-width:340px;margin:0 auto}
.btn-retry{background:var(--yellow);color:var(--ink);border:none;padding:10px 22px;border-radius:0;font-family:inherit;font-weight:600;font-size:14px;cursor:pointer;margin-top:12px;display:inline-flex;align-items:center;gap:6px;transition:background .15s}
.btn-retry:hover{background:var(--yellow-light)}

/* ── Worksheet ── */
.worksheet-card{background:var(--blue-light);border:1px solid #F6BE7C;border-radius:0;padding:28px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.ws-icon{font-size:40px;flex-shrink:0}
/* Top-align the worksheet icon with the heading instead of vertically centring it
   against the multi-line card body (bug: icon looked oddly centered). */
.mce-page .ws-icon{align-self:flex-start}
.ws-text h3{font-family:'Athletics',Georgia,serif;font-size:18px;font-weight:700;margin-bottom:4px}
.ws-text p{font-size:14px;color:var(--ink2);margin:0}
/* Black box + white text. Selector is .mce-page .ws-btn so it outranks `.mce-page a`
   (which was forcing the dark ink colour → "download text not visible" bug). */
.mce-page .ws-btn{margin-left:auto;background:var(--ink);color:#fff;padding:13px 20px;border-radius:0;text-decoration:none;font-weight:700;font-size:14px;white-space:nowrap;flex-shrink:0}
.mce-page .ws-btn:hover{background:var(--neutral-800)}

/* ── FAQ ── */
/* Divider directly under the FAQ heading so the title is separated from the
   questions (bug: FAQ title sat flush against the first question). */
.mce-page #faq h2,.mce-page p.section-label#faq{border-bottom:1px solid var(--border);padding-bottom:14px;margin-bottom:20px}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:last-child{border-bottom:none}
.faq-q{width:100%;background:none;border:none;text-align:left;padding:16px 4px;font-family:'Athletics',Georgia,serif;font-size:16px;font-weight:600;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;line-height:1.4;margin:0}
.faq-q .icon{font-size:18px;color:var(--muted);flex-shrink:0;transition:transform .2s}
.faq-q.open .icon{transform:rotate(45deg)}.faq-q.open .faq-chev{transform:rotate(180deg)}
.faq-a{font-size:15px;color:var(--ink2);padding:0 4px 16px;display:none;line-height:1.7}
.faq-a.show{display:block;animation:fadeIn .3s ease}

/* ── Key takeaways ── */
.kt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin:16px 0}
.kt-card{background:var(--yellow-light);border:1px solid var(--yellow);padding:14px 16px;cursor:default;position:relative;transition:background .15s}
.kt-card:hover{background:var(--yellow)}
.kt-front{font-family:'Athletics',Georgia,serif;font-size:14px;font-weight:700;color:var(--ink)}
.kt-formula{font-size:13px;font-weight:600;color:var(--ink2);margin-top:4px}
.kt-back{font-size:12px;color:var(--ink2);margin-top:6px;line-height:1.5;display:none}
.kt-card:hover .kt-back{display:block}
.tips-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin:16px 0}
.tips-list li{padding:14px 18px;background:var(--yellow-light);border-left:3px solid var(--yellow);border-radius:0;font-size:15px;color:var(--ink2);line-height:1.6}

/* ── Related concepts / videos ── */
.rc-box{border:1px solid var(--border);padding:24px;margin-top:16px}
.rc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-top:14px}
.rc-card{display:block;border:1px solid var(--border);padding:14px 16px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:500;font-family:'Untitled Sans',-apple-system,sans-serif;transition:border-color .15s,background .15s}
.rc-card:hover{border-color:var(--yellow);background:var(--yellow-light);text-decoration:none}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.related-col .col-label{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--yellow);margin-bottom:8px}
.related-col ul{list-style:none}
.related-col li{padding:9px 13px;background:var(--surface);border:1px solid var(--border);border-radius:0;margin-bottom:6px;font-size:14px}
.video-list{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.video-card{background:var(--surface);border:1px solid var(--border);border-radius:0;padding:16px 18px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;text-decoration:none;color:var(--ink);transition:border-color .15s}
.video-card:hover{border-color:var(--ink2)}
.vthumb{width:52px;height:52px;background:var(--ink);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vthumb svg{width:22px;height:22px;fill:#fff}
.vtitle{font-family:'Athletics',Georgia,serif;font-weight:600;font-size:15px;line-height:1.35;margin-bottom:3px}
.vdesc{font-size:12px;color:var(--muted)}

/* ── Featured video ── */
.featured-video{margin:28px 0;border-radius:0;overflow:hidden;border:1px solid var(--border)}
.video-section-label{font-size:clamp(18px,2vw,22px);font-family:'Athletics',Georgia,serif;font-weight:700;color:var(--ink);margin-bottom:12px;display:block}
.eyebrow-title{font-size:clamp(18px,2vw,24px);font-family:'Athletics',Georgia,serif;font-weight:700;color:var(--ink);margin-bottom:16px;display:block}
.fv-embed{position:relative;aspect-ratio:16/9}
.fv-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:none;display:block}
.video-embed{position:relative;width:100%;aspect-ratio:16/9;background:#292827;border-radius:0;overflow:hidden;margin:20px 0}
.video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}
.video-wrap{position:relative;aspect-ratio:16/9}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* YouTube facade — fill the 16/9 box so the play button centres on the video */
.yt-facade{position:absolute;inset:0;cursor:pointer;background:#000}
.yt-facade img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85}
.yt-facade .yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:none;border:none;padding:0;cursor:pointer;transition:transform .1s}
.yt-facade:hover .yt-play{transform:translate(-50%,-50%) scale(1.08)}

/* ── CTA band ── */
.mode-section{padding:48px 0 24px;border-top:1px solid var(--border)}
.cta-band{background:linear-gradient(135deg,#EC9A32 0%,#F6BE7C 100%);border-radius:0;overflow:hidden;display:grid;grid-template-columns:42% 58%;min-height:200px}
.cta-inner{grid-column:2;grid-row:1;padding:32px 36px 32px 52px;display:flex;flex-direction:column;justify-content:center;gap:16px;background:linear-gradient(135deg,#EC9A32 0%,#F6BE7C 100%);border-radius:0;margin-left:-24px;position:relative;z-index:1}
.cta-text h3{font-family:'Athletics',Georgia,serif;font-size:22px;font-weight:700;color:#fff;margin-bottom:6px}
.cta-text p{font-size:15px;color:#292827;margin:0;max-width:380px}
.cta-head{font-family:'Athletics',Georgia,serif;font-size:22px;font-weight:700;color:#292827;margin-bottom:6px}
.cta-img{grid-column:1;grid-row:1;width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.cta-buttons{display:flex;gap:10px;flex-wrap:wrap}
.cta-primary{background:var(--yellow);color:var(--ink);border:none;padding:14px 22px;border-radius:0;font-family:inherit;font-weight:700;font-size:15px;cursor:pointer;transition:background .15s;display:inline-flex;align-items:center;gap:6px}
.cta-primary:hover{background:#F4AB52}
.cta-secondary{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.25);padding:14px 22px;border-radius:0;text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap;transition:background .15s}
.cta-secondary:hover{background:rgba(255,255,255,.18)}
.btn-white{background:#fff;color:var(--neutral-1000);border:none;padding:12px 24px;border-radius:0;font-family:'Untitled Sans',-apple-system,system-ui,sans-serif;font-size:15px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:6px}

/* Original tutor-signup CTAs (cta-band / cta-inline / inline-cta, all above) are the
   default for everyone; hidden only once US is confirmed (core.js section 0). The
   selector's extra specificity beats each page's own .cta-inline rule regardless of
   which stylesheet loads later. */
html.mce-geo-us .cta-band,
html.mce-geo-us .cta-inline,
html.mce-geo-us .inline-cta{display:none}

/* Generic geo toggle for spots (post-quiz CTA) where old/new content shares a wrapper
   whose own visibility is controlled by other JS (quiz retry count), not geo. Hiding via
   :not(.mce-geo-us) rather than a plain class + display:revert leaves each element's own
   display (block for <p>, inline-block for <button>, or an inline style="display:flex")
   completely alone once US is confirmed — revert would reset to the UA default instead,
   clobbering any author display declaration on that element (e.g. .btn-primary's
   align-items:center, which needs inline-flex, not the UA's inline-block). Before core.js
   runs, <html> has no .mce-geo-us, so :not() matches and the US blocks stay hidden exactly
   as before. */
/* !important on both: some restored non-US blocks carry an inline style="display:flex"
   (predates this toggle), which would otherwise beat a plain class rule regardless of
   specificity. */
html:not(.mce-geo-us) .mce-us-only{display:none!important}
html.mce-geo-us .mce-nonus-only{display:none!important}

/* ── App banner (all-new Cuemath app signup) — mirrors components/seo/content-pages/banners/app-banner.js.
   Values are that component's u(n, 1200) fractions, expressed as cqw against the banner's own inline-size.
   US-only (see core.js section 0): hidden by default, shown once <html> carries .mce-geo-us. ── */
.app-banner{display:none;container-type:inline-size;position:relative;width:100%;overflow:hidden;background:#F6BE7C;cursor:pointer;aspect-ratio:1200/630}
html.mce-geo-us .app-banner{display:block}
.app-banner:hover .ab-cta{background:#33312F;border-color:#33312F}
.ab-grid{position:absolute;left:0;top:0;pointer-events:none;width:90.0833cqw;height:52.5833cqw;background-image:repeating-linear-gradient(to right,#FAD6AC 0 1px,transparent 1px 60px),repeating-linear-gradient(to bottom,#FAD6AC 0 1px,transparent 1px 60px)}
.ab-photo{position:absolute;overflow:hidden;left:40cqw;top:0;width:60cqw;height:52.5cqw}
.ab-photo-track{display:flex;width:100%;height:100%;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.ab-photo-track img{width:100%;height:100%;flex-shrink:0;display:block;object-fit:cover}
@media(prefers-reduced-motion:reduce){.ab-photo-track{transition:none}}
.ab-tint{position:absolute;left:0;top:0;background:#F4AB52;mix-blend-mode:multiply;opacity:.21;width:95.8333%;height:100%}
.ab-logo{position:absolute;display:block;height:auto;left:3.3333cqw;top:3.3333cqw;width:13.5cqw}
.ab-rating{position:absolute;left:3.3333cqw;top:13.6667cqw;width:9.5cqw;height:4cqw}
.ab-score{position:absolute;font-family:'Athletics',Georgia,serif;font-weight:700;color:#1C1917;left:.1667cqw;top:-.1667cqw;font-size:1.6667cqw;line-height:2.3333cqw}
.ab-mark{position:absolute;top:0;transform:rotate(180deg);left:2.75cqw;width:6.5cqw;height:1.6667cqw}
.ab-stars{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:.0833cqw}
.ab-stars img{display:block;width:1.8333cqw;height:1.8333cqw}
.ab-copy{position:absolute;color:#000;left:3.3333cqw;top:20.4167cqw;width:33.3333cqw;display:flex;flex-direction:column;align-items:flex-start;gap:2.6667cqw}
.ab-copy p{margin:0}
.ab-headline{width:100%;display:flex;flex-direction:column;gap:.3333cqw}
.ab-headline p:first-child{font-family:'Athletics',Georgia,serif;font-weight:700;font-size:3.3333cqw;line-height:4cqw}
.ab-headline p:last-child{font-family:'Athletics',Georgia,serif;font-weight:400;font-size:2.25cqw;line-height:3cqw}
.ab-cta{margin:0;appearance:none;background:#1C1917;border:1px solid #1C1917;color:#F9F7F5;font-family:'Untitled Sans',-apple-system,system-ui,sans-serif;font-weight:500;white-space:nowrap;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;width:26.6667cqw;height:6cqw;padding:0 3cqw;border-radius:.3333cqw;font-size:2cqw;line-height:2.6667cqw}
.ab-sparkle{position:absolute;display:block;pointer-events:none}
.ab-sparkle-a{left:33.3333cqw;top:4cqw;width:7.6667cqw;height:7.6667cqw}
.ab-sparkle-b{left:19cqw;top:44cqw;width:7.6667cqw;height:7.6667cqw;transform:scaleX(-1)}
@media(prefers-reduced-motion:reduce){.app-banner *{transition:none!important}}

/* ── App-signup bridge CTA (after the intro video) — its own tint so it reads as a
   distinct nudge rather than another neutral content card. US-only, see above. ── */
.app-bridge{display:none;background:var(--yellow-light);border:1px solid var(--gold-300);border-radius:12px;padding:20px 24px;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px}
html.mce-geo-us .app-bridge{display:flex}
.app-bridge-head{font-family:'Athletics',Georgia,serif;font-size:16px;font-weight:700;color:var(--ink);margin-bottom:4px}
.app-bridge-body{font-size:15px;color:var(--ink2);max-width:480px}
.app-bridge-cta{display:flex;flex-shrink:0}

/* ── Sticky side app CTA (desktop only, persistent bottom-left) — US-only, see above. ── */
.app-sticky{display:none;text-decoration:none}
@media(min-width:821px){
  html.mce-geo-us .app-sticky{
    display:flex;align-items:center;gap:12px;
    position:fixed;left:24px;bottom:24px;z-index:40;
    background:var(--yellow-light);border:1px solid var(--gold-300);
    border-radius:16px;padding:14px 20px;max-width:240px;
    box-shadow:0 8px 24px rgba(41,40,39,.12),0 2px 6px rgba(41,40,39,.06);
    cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;
  }
  html.mce-geo-us .app-sticky:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(41,40,39,.16),0 4px 8px rgba(41,40,39,.08)}
}
.app-sticky-icon{font-family:'Athletics',Georgia,serif;font-weight:700;font-size:28px;color:var(--blue);line-height:1;flex-shrink:0}
.app-sticky-label{font-family:'Athletics',Georgia,serif;font-weight:700;font-size:15px;line-height:1.3;color:var(--ink)}

/* ── Sticky app CTA bar (mobile only, full-width bottom) — legible label size and a
   normal button (not an oversized pill), unlike the reference this was modelled on.
   US-only, see above. ── */
.app-sticky-mobile{display:none}
@media(max-width:820px){
  html.mce-geo-us .app-sticky-mobile{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--bg);border-top:1px solid var(--border);
    padding:14px 16px;box-shadow:0 -2px 12px rgba(41,40,39,.08);
    cursor:pointer;
  }
}
.app-sticky-mobile-label{font-family:'Athletics',Georgia,serif;font-weight:700;font-size:15px;line-height:1.3;color:var(--ink)}
.app-sticky-mobile-cta{appearance:none;background:var(--yellow);color:var(--ink);border:none;font-family:'Untitled Sans',-apple-system,system-ui,sans-serif;font-weight:700;font-size:14px;padding:10px 18px;border-radius:8px;white-space:nowrap;cursor:pointer;flex-shrink:0}

/* ── Animations ── */
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}60%{transform:translateX(5px)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ── Responsive ── */
@media(max-width:820px){
  .page-grid{grid-template-columns:1fr;gap:0;padding-top:24px}
  .toc{display:none}
  .mobile-toc{display:block}
  .related-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .cta-band{grid-template-columns:1fr;min-height:auto}
  .cta-img{display:none}
  .cta-inner{grid-column:1;padding:24px;border-radius:0;margin-left:0;flex-direction:column;align-items:flex-start}
  .related-grid{grid-template-columns:1fr;gap:18px}
  .practice-options{grid-template-columns:1fr}
  .mce-page h1{font-size:28px} .mce-page h2{font-size:20px}
}

/* ── Hide the prototype's built-in signup modal (the global ECNA modal is used instead) ── */
#cta-modal,#modal,.modal-overlay{display:none!important}