/* =========================================================
   BRIGHT CROWNS — SITE v2
   Additive layer. Loads AFTER styles.css. Nothing here
   replaces the base system; it extends it.
   ========================================================= */

:root{
  --navy:#243756;
  --purple:#93547C;
  --green:#2E4D27;
  --sand:#D8C8B0;
  --fmt-time:#C9A36C;
  --fmt-ready:#F46C5B;
  --fmt-reset:#2E7A7E;
  --fmt-together:#B35E3A;
  --fmt-bed:#93547C;
}

/* ---------- Offer strip ---------- */
.offerstrip{
  background:var(--brown); color:var(--cream);
  font-family:var(--body); font-size:.88rem; text-align:center;
  padding:10px 20px; line-height:1.4;
}
.offerstrip strong{ color:var(--gold); font-weight:600; }

/* ---------- Nav additions ---------- */
.nav__links{ display:flex; gap:26px; align-items:center; }
.nav__links a{
  font-family:var(--body); font-size:.9rem; font-weight:500;
  color:var(--brown); text-decoration:none; opacity:.78;
  transition:opacity .15s ease;
}
.nav__links a:hover{ opacity:1; text-decoration:underline; }
@media (max-width:1000px){ .nav__links{ display:none; } }

/* ---------- Mobile sticky CTA ---------- */
.stickycta{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:none; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:rgba(60,42,36,.96); backdrop-filter:blur(8px);
  transform:translateY(110%); transition:transform .28s ease;
}
.stickycta.is-visible{ transform:translateY(0); }
.stickycta__text{
  font-family:var(--body); font-size:.82rem; color:var(--cream);
  line-height:1.3; margin:0;
}
.stickycta .appbadge img{ height:42px; }
@media (max-width:820px){ .stickycta{ display:flex; } }
@media (prefers-reduced-motion:reduce){ .stickycta{ transition:none; } }

/* ---------- Shared v2 section furniture ---------- */
.sec{ padding:clamp(64px,9vw,116px) 0; }
.sec--cream{ background:var(--cream); }
.sec--dark{ background:var(--brown); color:var(--cream); }
.sec--navy{ background:var(--navy); color:var(--cream); }
.sec--terra{ background:var(--terra); color:#FDF6EC; }
.sec--gold{ background:linear-gradient(165deg,#E7D2A9 0%,#D9B87E 55%,#CBA46F 100%); }
.sec--goldwash{ background:linear-gradient(180deg,#FBF3EF 0%,#F2E6D4 48%,#E7D2A9 100%); }

.sec h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.1rem,4.6vw,3.1rem); line-height:1.1; margin:0 0 22px;
}
.sec p{ margin:0 0 18px; }
.sec p:last-child{ margin-bottom:0; }
.sec--dark .eyebrow,
.sec--navy .eyebrow{ color:var(--gold); }
.sec--terra .eyebrow{ color:#FBE7CE; }

.sec__body{ font-size:1.1rem; line-height:1.65; max-width:58ch; }
.sec--dark .sec__body,
.sec--navy .sec__body{ color:rgba(247,235,221,.86); }
.sec--terra .sec__body{ color:rgba(253,246,236,.92); }

.split{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,64px); align-items:center; }
.split--flip .split__media{ order:-1; }
.split__media .imgph{ width:100%; }
@media (max-width:860px){
  .split{ grid-template-columns:1fr; gap:32px; }
  .split--flip .split__media{ order:0; }
}

.kicker{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.3rem,2.6vw,1.75rem); line-height:1.3;
  color:var(--terra); margin:28px 0 0;
}
.sec--dark .kicker{ color:var(--gold); }

/* ---------- §3 the greeting ---------- */
.greeting{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.8rem,4vw,2.7rem); line-height:1.15;
  color:var(--terra); margin:30px 0 0;
}
.jumplink{
  display:inline-block; margin-top:26px; font-family:var(--body);
  font-size:.95rem; font-weight:600; color:var(--teal);
  text-decoration:underline; text-underline-offset:4px;
}

/* ---------- §4 three legs ---------- */
.legs{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,34px); margin-top:52px; }
.leg{
  background:var(--card-fill); border:1px solid var(--card-border);
  border-radius:var(--r-card); padding:32px 28px;
}
.leg__rule{ width:44px; height:3px; border-radius:2px; margin-bottom:20px; }
.leg h3{
  font-family:var(--display); font-weight:500; font-size:1.5rem;
  margin:0 0 4px; color:var(--brown);
}
.leg__verb{
  font-family:var(--display); font-style:italic; font-size:1.02rem;
  color:var(--gold-deep); margin:0 0 14px;
}
.leg p{ font-size:1rem; color:var(--brown); opacity:.84; }
@media (max-width:860px){ .legs{ grid-template-columns:1fr; } }

/* ---------- §5 the five-format deck ---------- */
.deck__cards{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  margin:48px 0 0; padding:0; list-style:none;
}
.deck__card{
  position:relative; flex:0 0 auto; width:132px; aspect-ratio:3/4;
  border:0; border-radius:18px; cursor:pointer; overflow:hidden;
  padding:16px 14px; text-align:left; color:#FFF9F0;
  font-family:var(--display); font-weight:500; font-size:1.02rem; line-height:1.2;
  display:flex; align-items:flex-end;
  box-shadow:0 10px 24px rgba(60,42,36,.20);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.deck__card:hover{ transform:translateY(-6px); }
.deck__card:focus-visible{ outline:3px solid var(--brown); outline-offset:3px; }
.deck__card[aria-selected="true"]{
  transform:translateY(-10px);
  box-shadow:0 18px 38px rgba(60,42,36,.30);
}
.deck__card[aria-selected="false"]{ filter:saturate(.72) brightness(.96); }
.deck__card span{ position:relative; z-index:1; }
@media (prefers-reduced-motion:reduce){ .deck__card{ transition:none; } }
@media (max-width:620px){ .deck__card{ width:calc(33.333% - 8px); font-size:.9rem; } }

.panel{ display:none; }
.panel.is-active{ display:block; }
.panel__wrap{
  margin-top:40px; border-radius:28px; overflow:hidden;
  color:#FFF9F0;
}
.panel__grid{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(28px,4vw,56px); align-items:center;
  padding:clamp(32px,5vw,56px);
}
.panel__media .imgph{ aspect-ratio:9/16; max-width:270px; margin:0 auto; border-radius:22px; /*background:rgba(255,255,255,.12);*/ }
.panel__when{
  font-family:var(--body); font-size:.82rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  color:rgba(255,249,240,.82); margin:0 0 12px;
}
.panel h3{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.9rem,3.6vw,2.6rem); line-height:1.1; margin:0 0 18px;
}
.panel__lede{ font-size:1.08rem; line-height:1.6; color:rgba(255,249,240,.92); margin:0 0 22px; max-width:50ch; }
.panel__does{
  font-size:1.05rem; line-height:1.6; color:#FFF9F0;
  border-left:2px solid rgba(255,249,240,.45); padding-left:18px; max-width:50ch;
}
.panel__does b{ font-weight:600; }
@media (max-width:860px){
  .panel__grid{ grid-template-columns:1fr; }
  .panel__media{ max-width:220px; margin:0 auto; }
}

/* audio player */
.sample{
  display:flex; align-items:center; gap:14px; margin-top:26px;
  background:rgba(255,249,240,.14); border:1px solid rgba(255,249,240,.3);
  border-radius:999px; padding:10px 18px 10px 12px; max-width:360px;
}
.sample__btn{
  flex:0 0 auto; width:42px; height:42px; border-radius:999px; border:0;
  background:#FFF9F0; color:var(--brown); font-size:.95rem; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.sample__btn:focus-visible{ outline:3px solid #FFF9F0; outline-offset:3px; }
.sample__label{ font-family:var(--body); font-size:.9rem; color:#FFF9F0; line-height:1.3; }
.sample.is-disabled{ display:none; }

/* crown callout */
.crownnote{
  margin-top:56px; display:grid; grid-template-columns:150px 1fr;
  gap:clamp(22px,4vw,40px); align-items:center;
  background:var(--card-fill); border:1px solid var(--card-border);
  border-radius:var(--r-card); padding:clamp(26px,4vw,40px);
}
.crownnote__media .imgph{ aspect-ratio:1; }
.crownnote h3{ font-family:var(--display); font-weight:500; font-size:clamp(1.5rem,3vw,2rem); margin:0 0 14px; color:var(--brown); }
.crownnote p{ color:var(--brown); opacity:.85; font-size:1.02rem; }
.crownspec{
  margin:20px 0; padding:18px 22px; border-left:3px solid var(--gold);
  background:rgba(201,163,108,.10); border-radius:0 12px 12px 0;
}
.crownspec strong{ font-family:var(--display); font-weight:600; font-size:1.15rem; display:block; margin-bottom:4px; color:var(--brown); }
.crownspec span{ display:block; font-family:var(--body); font-size:.92rem; color:var(--gold-deep); }
@media (max-width:860px){ .crownnote{ grid-template-columns:1fr; text-align:center; } .crownnote__media .imgph{ max-width:150px; margin:0 auto; } }

.sec__cta{ margin-top:52px; display:flex; justify-content:center; }

/* ---------- §5b feelings ---------- */
.feelings{
  display:flex; flex-wrap:wrap; gap:12px; margin:32px 0 28px;
}
.feelings li{
  list-style:none; font-family:var(--display); font-weight:500; font-size:1.08rem;
  color:var(--brown); background:var(--card-fill);
  border:1px solid var(--card-border); border-radius:999px; padding:11px 22px;
}

/* ---------- §6 library ---------- */
.library{ text-align:center; }
.library__figs{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-bottom:42px; }
.library__fig{ width:132px; }
.library__fig .imgph{ aspect-ratio:1; border-radius:18px; /*background:rgba(247,235,221,.10);*/ margin-bottom:12px; }
.library__fig b{ display:block; font-family:var(--display); font-weight:500; font-size:.98rem; color:var(--cream); }
.library__fig span{ display:block; font-family:var(--body); font-size:.8rem; color:var(--gold); margin-top:2px; }
.library h2{ max-width:20ch; margin:0 auto 24px; }
.library .sec__body{ margin:0 auto 16px; }
.library__roles{ font-family:var(--display); font-style:italic; font-size:1.1rem; color:var(--gold); }
.library__close{ font-family:var(--display); font-weight:500; font-size:clamp(1.3rem,2.6vw,1.8rem); color:var(--cream); max-width:26ch; margin:30px auto 0; }
@media (max-width:620px){ .library__fig{ width:104px; } }

/* ---------- §7 evidence ---------- */
.evidence__head{ max-width:780px; }
.evidence__grid{ margin-top:50px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.ecard{ background:var(--card-fill); border:1px solid var(--card-border); border-radius:var(--r-card); padding:30px 26px; display:flex; flex-direction:column; }
.ecard h3{ font-family:var(--display); font-weight:500; font-size:1.25rem; margin:0 0 14px; color:var(--brown); }
.ecard p{ color:var(--brown); opacity:.86; font-size:1rem; flex:1; }
.ecard cite{ display:block; margin-top:18px; font-family:var(--body); font-style:normal; font-size:.82rem; color:var(--gold-deep); }
.evidence__close{ margin-top:44px; font-size:1.12rem; line-height:1.65; max-width:66ch; color:var(--brown); opacity:.88; }
@media (max-width:860px){ .evidence__grid{ grid-template-columns:1fr; } }

/* ---------- §8 parents ---------- */
.parents{ text-align:center; }
.parents h2{ color:#FDF6EC; }
.parents__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:46px; text-align:left; }
.pcard{ background:rgba(255,249,240,.10); border:1px solid rgba(255,249,240,.26); border-radius:var(--r-card); padding:30px 28px; }
.pcard blockquote{ margin:0; font-family:var(--display); font-weight:500; font-size:1.14rem; line-height:1.4; color:#FFF9F0; }
.pcard footer{ margin-top:22px; font-family:var(--body); font-size:.9rem; color:rgba(253,246,236,.78); line-height:1.45; }
.pcard footer b{ font-weight:600; color:#FFF9F0; }
@media (max-width:860px){ .parents__grid{ grid-template-columns:1fr; } }

/* ---------- §9 who it's for ---------- */
.ages{ margin-top:38px; display:grid; gap:18px; }
.age{ display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start; }
.age__mark{ font-family:var(--display); font-weight:600; font-size:1.02rem; color:var(--gold-deep); white-space:nowrap; padding-top:2px; min-width:5.5ch; }
.age p{ font-size:1.05rem; color:var(--brown); opacity:.86; margin:0; }
@media (max-width:620px){ .age{ grid-template-columns:1fr; gap:6px; } }

/* ---------- §10 stat row ---------- */
.stats{ margin:48px 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.stat{ border-top:2px solid rgba(201,163,108,.55); padding-top:20px; }
.stat b{ display:block; font-family:var(--display); font-weight:500; font-size:clamp(1.9rem,3.4vw,2.5rem); color:var(--gold); line-height:1; margin-bottom:12px; }
.stat span{ font-family:var(--body); font-size:.92rem; line-height:1.45; color:rgba(247,235,221,.84); }
@media (max-width:860px){ .stats{ grid-template-columns:repeat(2,1fr); } }

.founders{
  margin-top:52px; padding-top:36px; border-top:1px solid rgba(247,235,221,.22);
  display:grid; grid-template-columns:150px 1fr; gap:clamp(22px,4vw,40px); align-items:center;
}
.founders__media .imgph{ aspect-ratio:1; border-radius:18px; /*background:rgba(247,235,221,.10);*/ }
.founders p{ font-size:1.02rem; line-height:1.6; color:rgba(247,235,221,.86); }
.founders p b{ color:var(--cream); font-weight:600; }
@media (max-width:860px){ .founders{ grid-template-columns:1fr; } .founders__media .imgph{ max-width:150px; } }

/* ---------- §11 pricing ---------- */
.pricing__anchor{
  font-family:var(--display); font-style:italic; font-size:1.05rem;
  color:var(--gold-deep); text-align:center; margin:0 0 28px;
}
.pricing__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,60px); align-items:center; }
.pricing__media .imgph{ aspect-ratio:4/5; }
.pcard--price{
  background:var(--card-fill); border:1px solid var(--card-border);
  border-radius:24px; padding:clamp(30px,4vw,44px);
  box-shadow:0 18px 44px rgba(60,42,36,.14);
}
.pcard--price h2{ margin:0 0 10px; }
.pcard--price .sub{ font-family:var(--body); font-size:1.02rem; color:var(--gold-deep); margin:0 0 26px; }
.plist{ list-style:none; padding:0; margin:0 0 30px; display:grid; gap:13px; }
.plist li{ display:grid; grid-template-columns:22px 1fr; gap:12px; font-size:1rem; color:var(--brown); line-height:1.5; }
.plist svg{ width:20px; height:20px; margin-top:3px; color:var(--teal); }
.pricing__fine{ font-size:.86rem; color:var(--text-muted); line-height:1.55; margin:20px 0 0; }
.pricing__fine a{ color:var(--gold-deep); }
.pricing__deadline{
  margin-top:18px; padding:16px 20px; border-radius:14px;
  background:rgba(244,108,91,.12); border:1px solid rgba(244,108,91,.4);
  font-family:var(--body); font-size:.94rem; font-weight:600; color:var(--brown); line-height:1.5;
}
@media (max-width:860px){ .pricing__grid{ grid-template-columns:1fr; } .pricing__media{ max-width:300px; margin:0 auto; } }

/* ---------- §12 FAQ ---------- */
.faq{ max-width:760px; margin:44px auto 0; }
.faq details{ border-bottom:1px solid var(--border); }
.faq summary{
  cursor:pointer; list-style:none; padding:22px 44px 22px 0; position:relative;
  font-family:var(--display); font-weight:500; font-size:1.16rem; color:var(--brown);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-family:var(--body); font-size:1.5rem; font-weight:400; color:var(--gold-deep);
}
.faq details[open] summary::after{ content:"–"; }
.faq summary:focus-visible{ outline:3px solid var(--teal); outline-offset:2px; border-radius:6px; }
.faq p{ padding:0 44px 24px 0; font-size:1.02rem; color:var(--brown); opacity:.86; line-height:1.6; }

/* ---------- §13 schools ---------- */
.schools__inner{ display:grid; grid-template-columns:1fr auto; gap:36px; align-items:center; }
.schools h2{ font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:14px; }
.schools .btn{ white-space:nowrap; width:auto; }
@media (max-width:860px){ .schools__inner{ grid-template-columns:1fr; } .schools .btn{ width:100%; } }

/* ---------- §14 final ---------- */
.final{ text-align:center; }
.final__media{ max-width:520px; margin:0 auto 44px; }
.final__media .imgph{ aspect-ratio:16/10; border-radius:24px; background:rgba(255,255,255,.22); }
.final h2{ font-size:clamp(2rem,4.4vw,3rem); max-width:16ch; margin:0 auto 20px; color:var(--brown); }
.final__sub{ font-family:var(--display); font-style:italic; font-size:1.2rem; color:var(--brown); opacity:.8; margin:0 0 32px; }
.final__cta{ display:flex; justify-content:center; }
.final__close{
  margin-top:40px; font-family:var(--display); font-weight:500;
  font-size:clamp(1.3rem,2.8vw,1.9rem); color:var(--brown);
}

/* ---------- misc ---------- */
.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;
}
.proof__placeholder{ opacity:1; }

/* =========================================================
   v2.1 REVISIONS
   ========================================================= */

/* Hero — headline scaled down for the copy volume it carries */
.hero h1{ font-size:clamp(2.1rem,4.4vw,3.3rem); line-height:1.08; margin-bottom:20px; }
.hero__sub{ font-size:clamp(1.12rem,2vw,1.35rem); }
@media (max-width:520px){ .hero h1{ font-size:2rem; } }

/* §2 — signature block */
.signoff{ margin-top:34px; }
.signoff__img{ display:block; max-width:230px; height:auto; margin-bottom:10px; }
.signoff__ph{
  display:none; width:230px; height:76px; margin-bottom:10px;
  align-items:center; justify-content:center; text-align:center;
  border:1px dashed rgba(247,235,221,.4); border-radius:10px;
  font-family:var(--body); font-size:.7rem; line-height:1.4;
  color:rgba(247,235,221,.55);
}
.signoff__ph.is-shown{ display:flex; }
.signoff__name{
  font-family:var(--display); font-style:italic;
  color:var(--gold); font-size:1.08rem; margin:0;
}

/* §4 — image above each leg */
.leg{ padding-top:24px; }
.leg__media{ margin-bottom:22px; }
.leg__media .imgph{ aspect-ratio:4/3; border-radius:14px; }

/* §7 — image above each evidence card, and breathing room before the close */
.ecard{ padding-top:24px; }
.ecard__media{ margin-bottom:22px; }
.ecard__media .imgph{ aspect-ratio:4/3; border-radius:14px; }
.evidence__close{
  margin-top:clamp(56px,7vw,88px);
  padding-top:clamp(32px,4vw,44px);
  border-top:1px solid var(--border);
}

/* =========================================================
   v2.2 REVISIONS
   ========================================================= */

/* Offer strip — brighter, warmer */
.offerstrip{
  background:linear-gradient(90deg,#C9A36C 0%,#D9B87E 50%,#C9A36C 100%);
  color:#3C2A24; font-weight:500;
}
.offerstrip strong{ color:#3C2A24; font-weight:700; }

/* Hero — one more step down */
.hero h1{ font-size:clamp(1.9rem,3.7vw,2.85rem); }
@media (max-width:520px){ .hero h1{ font-size:1.85rem; } }

/* Directional links */
.jumplink span{ display:inline-block; transition:transform .18s ease; }
.jumplink:hover span{ transform:translateX(4px); }
@media (prefers-reduced-motion:reduce){ .jumplink span{ transition:none; } }

/* Panel CTA inside each format */
.panel__cta{
  display:inline-block; margin-top:26px;
  font-family:var(--body); font-size:.95rem; font-weight:600;
  color:#FFF9F0; text-decoration:underline; text-underline-offset:5px;
}
.panel__cta span{ display:inline-block; transition:transform .18s ease; }
.panel__cta:hover span{ transform:translateX(4px); }
.panel__cta:focus-visible{ outline:3px solid #FFF9F0; outline-offset:4px; border-radius:4px; }
@media (prefers-reduced-motion:reduce){ .panel__cta span{ transition:none; } }
#get-the-app{ scroll-margin-top:120px; }

/* --- Centering fixes ---------------------------------------------------
   `.sec p` (0,1,1) was out-specifying `.library__close` (0,1,0) and
   `.sec h2` was tying with `.secondform h2` but winning on source order,
   which killed `margin: auto` in both places. Raising specificity here
   rather than editing styles.css.                                      */
.library p.library__close{ margin:36px auto 0; }
.library p.library__roles{ margin-left:auto; margin-right:auto; }
.secondform h2.secondform__title{
  margin-left:auto; margin-right:auto; max-width:22ch;
}
.secondform p.secondform__sub{
  margin-left:auto; margin-right:auto; max-width:46ch;
}

/* =========================================================
   v2.3 — §6b benefits + evidence subheads
   ========================================================= */

/* §7 — numbered tag + benefit-led subhead */
.ecard__tag{
  font-family:var(--body); font-size:.74rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold-deep); margin:0 0 10px;
}
.ecard h3{
  font-size:1.34rem; line-height:1.25; margin-bottom:16px;
}

/* =========================================================
   v2.4 — §6b carousel, §10 rewrite
   ========================================================= */

/* --- §6b head --- */
.whead{ text-align:center; margin-left:auto; margin-right:auto; }
.sec h2.whead__title{ margin-left:auto; margin-right:auto; max-width:24ch; }
.sec p.whead__lede{ margin-left:auto; margin-right:auto; }

/* --- carousel --- */
.wcar{ margin-top:clamp(40px,5vw,56px); }
.wcar__track{
  display:flex; gap:clamp(18px,2.4vw,28px);
  list-style:none; margin:0; padding:4px 4px 20px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
  scroll-behavior:smooth;
}
.wcar__track::-webkit-scrollbar{ display:none; }
.wcar__track:focus-visible{ outline:3px solid var(--teal); outline-offset:6px; border-radius:20px; }

.wslide{
  flex:0 0 clamp(268px,31%,360px); scroll-snap-align:start;
  background:var(--card-fill); border:1px solid var(--card-border);
  border-radius:var(--r-card); padding:26px 26px 30px;
  display:flex; flex-direction:column;
}
.wslide__media{ margin-bottom:20px; }
.wslide__media .imgph{ aspect-ratio:4/3; border-radius:14px; }
.wslide h3{
  font-family:var(--display); font-weight:500;
  font-size:1.26rem; line-height:1.25; color:var(--brown); margin:0 0 12px;
}
.wslide p{ font-size:1rem; line-height:1.6; color:var(--brown); opacity:.84; margin:0; }
@media (max-width:620px){ .wslide{ flex-basis:82%; } }

.wcar__controls{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:8px; }
.wcar__arrow{
  width:44px; height:44px; border-radius:999px; cursor:pointer;
  border:1px solid var(--card-border); background:var(--card-fill);
  color:var(--brown); font-size:1.05rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s ease, transform .15s ease;
}
.wcar__arrow:hover{ background:#fff; transform:translateY(-1px); }
.wcar__arrow:focus-visible{ outline:3px solid var(--teal); outline-offset:3px; }
.wcar__arrow[disabled]{ opacity:.35; cursor:default; transform:none; }
.wcar__dots{ display:flex; gap:9px; }
.wdot{
  width:9px; height:9px; padding:0; border-radius:999px; cursor:pointer;
  border:0; background:rgba(60,42,36,.24); transition:background .15s ease, transform .15s ease;
}
.wdot[aria-current="true"]{ background:var(--gold-deep); transform:scale(1.25); }
.wdot:focus-visible{ outline:3px solid var(--teal); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  .wcar__track{ scroll-behavior:auto; }
  .wcar__arrow,.wdot{ transition:none; }
}

/* --- §6b school + promise --- */
.wschool{
  margin:clamp(52px,6vw,72px) auto 0; max-width:62ch; text-align:center;
}
.wschool h3{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.35rem,2.6vw,1.75rem); color:var(--brown); margin:0 0 14px;
}
.wschool p{ font-size:1.02rem; line-height:1.65; color:var(--brown); opacity:.82; margin:0; }

.wpromise{
  margin:clamp(40px,5vw,56px) auto 0; max-width:60ch; text-align:center;
  padding-top:clamp(34px,4vw,46px); border-top:1px solid var(--border);
}
.wpromise__lead{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.25rem,2.4vw,1.6rem); line-height:1.3;
  color:var(--brown); margin:0 0 14px;
}
.wpromise__body{ font-size:1.05rem; line-height:1.65; color:var(--brown); opacity:.84; margin:0 0 26px; }
.wpromise__sign{
  font-family:var(--display); font-style:italic; font-size:1.12rem;
  color:var(--gold-deep); margin:0 0 20px;
}

/* --- §10 rewrite --- */
.gap__line{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.3rem,2.6vw,1.75rem); color:var(--gold);
  margin:28px 0 !important; opacity:1 !important;
}
.sec--dark .gap__line{ color:var(--gold); }
.gap__turn{ margin-top:clamp(40px,5vw,56px); }
.gap__body{ margin-top:clamp(32px,4vw,44px); }
.premise{
  margin:clamp(32px,4vw,44px) 0; padding:clamp(26px,3.4vw,38px) clamp(26px,4vw,44px);
  border-left:3px solid var(--gold); border-radius:0 16px 16px 0;
  background:rgba(201,163,108,.12);
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.3rem,2.8vw,1.9rem); line-height:1.3;
  color:var(--cream); max-width:34ch;
}

/* =========================================================
   v2.5 — §7 layout fixes, §6b promise trim
   ========================================================= */

/* The base rule `.ecard p { flex:1 }` also matched `.ecard__tag`, so the
   eyebrow was absorbing leftover column space and pushing each subhead
   down by a different amount. Only the body copy should flex. */
.ecard p.ecard__tag{ flex:0 0 auto; }
.ecard h3{ flex:0 0 auto; }
.ecard cite{ flex:0 0 auto; }

/* `.sec p` (0,1,1) was out-specifying `.evidence__close` (0,1,0), so its
   margin-top was dropped and the rule sat flush under the cards. */
#evidence p.evidence__close{
  margin-top:clamp(64px,8vw,96px);
  padding-top:clamp(34px,4vw,46px);
}

/* Promise block now carries only the sign-off line. */
.wpromise{ padding-top:clamp(30px,3.6vw,40px); }
.wpromise__sign{ margin-bottom:18px; }

/* =========================================================
   v2.6 — §2 is copy only
   ========================================================= */
.tension{ text-align:center; }
.tension__copy{ max-width:66ch; margin-left:auto; margin-right:auto; }
.tension p.eyebrow{ text-align:center; }
.tension h2{ max-width:22ch; margin-left:auto; margin-right:auto; }
.tension .sec__body{ max-width:62ch; margin-left:auto; margin-right:auto; font-size:1.1rem; }
.tension .sec__body p{ margin-left:auto; margin-right:auto; }

/* signature block, centered with the column */
.signoff--center{ display:flex; flex-direction:column; align-items:center; }
.signoff--center .signoff__name{ text-align:center; }

/* =========================================================
   v2.7 — phone screenshots sized to their columns
   Containers match a native iPhone capture (9:19.5) so a raw
   screenshot drops in without object-fit cropping the top and
   bottom off the screen.
   ========================================================= */
.phonesh{
  width:100%; max-width:440px; margin:0 auto;
  border-radius:26px;
}
@media (max-width:860px){ .phonesh{ max-width:330px; } }

/* deck panels — larger device, tighter column */
.panel__media .imgph{ aspect-ratio:9/19.5; max-width:340px; }
.panel__grid{ grid-template-columns:.95fr 1.05fr; }
@media (max-width:860px){
  .panel__media{ max-width:280px; }
  .panel__grid{ grid-template-columns:1fr; }
}

/* §3 / §5b — tighten the measure so type and image are in scale */
.split .sec__body{ max-width:52ch; }

/* =========================================================
   v2.8 — type scale, deck icons, scroll reveal
   ========================================================= */

/* §2 (now "Why we built this", after What It Is) — wider measure,
   shorter section */
.tension__copy{ max-width:88ch; }
.tension h2{ max-width:26ch; }
.tension .sec__body{ max-width:80ch; font-size:1.05rem; }

/* §3 greeting — scaled down */
.greeting{ font-size:clamp(1.35rem,2.6vw,1.85rem); margin-top:24px; }

/* §9 kicker — scaled down */
.kicker{ font-size:clamp(1.05rem,1.9vw,1.3rem); }

/* §14 — coral third beat */
.final__coral{ color:var(--coral); }

/* --- Deck card icons --- */
.deck__card{
  flex-direction:column; align-items:flex-start; justify-content:flex-end;
  gap:10px; padding:16px 14px;
}
.deck__icon{
  width:34px; height:34px; display:block; margin-top:auto;
}
.deck__icon img{
  width:100%; height:100%; object-fit:contain; display:block;
  filter:brightness(0) invert(1); opacity:.92;
}
.deck__label{ display:block; }
@media (max-width:620px){
  .deck__icon{ width:26px; height:26px; }
}

/* --- Scroll reveal: subtle grow + fade --- */
.reveal{
  opacity:0;
  transform:scale(.94);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.reveal.is-in{ opacity:1; transform:scale(1); }
/* stagger siblings across a row */
.legs .leg:nth-child(2) .reveal,
.evidence__grid .ecard:nth-child(2) .reveal{ transition-delay:.10s; }
.legs .leg:nth-child(3) .reveal,
.evidence__grid .ecard:nth-child(3) .reveal{ transition-delay:.20s; }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   v2.9 — pricing start line
   ========================================================= */
.pcard--price p.pricing__start{
  margin:12px 0 0; font-family:var(--display); font-style:italic;
  font-size:1rem; color:var(--gold-deep);
}

/* =========================================================
   v3.0 — MOBILE LAYER
   Desktop is untouched. Everything below only applies at
   phone and small-tablet widths.
   ========================================================= */

/* Read-more button is mobile-only; hidden everywhere by default */
.readmore{ display:none; }

/* ---------- ≤860: stacked layouts ---------- */
@media (max-width:860px){

  /* 1 · Phone screenshots show the top of the screen, fading out.
        !important overrides the inline 9:19.5 on the container. */
  .phonesh{
    max-width:300px;
    aspect-ratio:9/11 !important;
    border-bottom-left-radius:0; border-bottom-right-radius:0;
    -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 60%,transparent 100%);
  }
  .phonesh .imgph__img{ object-position:top center; }

  /* 4 · Deck panel: copy first, cropped screenshot after */
  .panel__grid{ gap:22px; padding:28px 22px 10px; }
  .panel__media{ order:2; max-width:220px; margin:0 auto; }
  .panel__media .imgph{
    aspect-ratio:9/12; max-width:220px;
    border-bottom-left-radius:0; border-bottom-right-radius:0;
    -webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 58%,transparent 100%);
  }
  .panel__media .imgph__img{ object-position:top center; }
}

/* ---------- ≤720: phones ---------- */
@media (max-width:720px){

  /* 6 · Tighter vertical rhythm */
  .sec{ padding:44px 0; }
  .sec h2{ font-size:clamp(1.6rem,6.6vw,2rem); margin-bottom:16px; }
  .sec__body{ font-size:1rem; }
  .legs, .evidence__grid, .wcar{ margin-top:30px; }
  .deck__cards{ margin-top:26px; }
  .crownnote{ margin-top:34px; }
  .sec__cta{ margin-top:32px; }
  .stats{ margin-top:30px; }
  .pricing__media{ max-width:230px; }

  /* 2 · Card rows become edge-to-edge swipe rows */
  .legs, .evidence__grid{
    display:flex; gap:14px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    margin-left:calc(var(--gutter) * -1); margin-right:calc(var(--gutter) * -1);
    padding:4px var(--gutter) 14px; scroll-padding-left:var(--gutter);
    scrollbar-width:none;
  }
  .legs::-webkit-scrollbar, .evidence__grid::-webkit-scrollbar{ display:none; }
  .leg, .ecard{ flex:0 0 84%; scroll-snap-align:start; }

  /* 3A · Illustrations become a thumbnail beside the heading */
  .leg__media .imgph__label, .ecard__media .imgph__label{ display:none; }

  .leg{
    display:grid; grid-template-columns:64px 1fr; column-gap:14px;
    align-content:start; padding:20px 20px 22px;
  }
  .leg__media{ grid-column:1; grid-row:1 / span 3; margin:0; align-self:center; }
  .leg__media .imgph{ aspect-ratio:1; border-radius:12px; }
  .leg__rule{ grid-column:2; margin-bottom:10px; }
  .leg h3{ grid-column:2; font-size:1.25rem; }
  .leg p.leg__verb{ grid-column:2; margin-bottom:0; }
  .leg > p:not(.leg__verb){ grid-column:1 / -1; margin-top:16px; margin-bottom:0; }

  .ecard{
    display:grid; grid-template-columns:64px 1fr; column-gap:14px;
    align-content:start; padding:20px 20px 22px;
  }
  .ecard__media{ grid-column:1; grid-row:1 / span 2; margin:0; align-self:center; }
  .ecard__media .imgph{ aspect-ratio:1; border-radius:12px; }
  .ecard p.ecard__tag{ grid-column:2; margin-bottom:6px; }
  .ecard h3{ grid-column:2; font-size:1.12rem; margin-bottom:0; }
  .ecard > p:not(.ecard__tag){ grid-column:1 / -1; margin-top:16px; margin-bottom:0; }
  .ecard cite{ grid-column:1 / -1; }

  /* 5 · Read-more on the differentiator section */
  .rm-collapsed .rm-hide{ display:none !important; }
  .rm-collapsed .readmore{
    display:inline-flex; align-items:center; gap:8px; margin-top:22px;
    font-family:var(--body); font-weight:600; font-size:.95rem;
    color:var(--gold); background:transparent; cursor:pointer;
    border:1.5px solid rgba(201,163,108,.6); border-radius:999px;
    padding:12px 22px;
  }
  .readmore:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
}

/* ---------- ≤620: deck buttons become one swipeable strip ---------- */
@media (max-width:620px){
  .deck__cards{
    flex-wrap:nowrap; justify-content:flex-start;
    overflow-x:auto; scroll-snap-type:x proximity;
    margin-left:calc(var(--gutter) * -1); margin-right:calc(var(--gutter) * -1);
    padding:14px var(--gutter) 10px; scroll-padding-left:var(--gutter);
    scrollbar-width:none;
  }
  .deck__cards::-webkit-scrollbar{ display:none; }
  .deck__card{ flex:0 0 100px; width:100px; aspect-ratio:4/5; scroll-snap-align:start; font-size:.88rem; }
}

/* Keep the footer clear of the sticky download bar */
@media (max-width:820px){
  .footer{ padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
}
.rm-hide:focus{ outline:none; }

/* Crown note reads left-aligned on mobile, matching desktop; art stays centered */
@media (max-width:860px){
  .crownnote{ text-align:left; }
  .crownnote__media .imgph{ margin:0 auto; }
  .crownnote h3{ text-align:center; }
}

/* =========================================================
   v3.1 — footer App Store badge
   ========================================================= */
.footer__badge{ display:inline-block; line-height:0; margin:6px 0 4px;
                transition:transform .18s ease; }
.footer__badge:hover{ transform:translateY(-2px); }
.footer__badge img{ height:46px; width:auto; display:block; }
.footer__badge-fallback{ display:inline-block; background:#1A1A1A; color:#fff;
                font-family:var(--body); font-weight:600; font-size:.92rem; line-height:1.1;
                padding:13px 22px; border-radius:9px; }
@media (prefers-reduced-motion:reduce){ .footer__badge{ transition:none; } }