/* Home page only. Tokens live in styles.css. */

.wrap{max-width:72rem; margin:0 auto; padding-inline:var(--gutter)}

/* ---- First viewport: the navy field ---------------------------------- */
.hero{background:var(--navy); color:var(--on-navy); padding-block:1.25rem 0; overflow:hidden}
.hero-grid{display:grid; gap:2.5rem; align-items:center}
@media (min-width:56rem){
  .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:3rem; padding-block:3.25rem 1.5rem}
}
.hero h1{font:800 clamp(2.25rem,7.2vw,4.25rem)/1.02 var(--display); letter-spacing:-0.035em; margin:0; text-wrap:balance; max-width:13ch}
.hero h1 em{display:block; font-style:normal; color:var(--green-bright)}
/* Language switch under the headline: the bilingual offer is a feature, so
   it sits at the top, and it is also the control. */
.lang-switch{display:inline-flex; margin:0 0 1rem; padding:.25rem; gap:.25rem; border:1px solid rgba(247,248,245,.28); border-radius:999px}
.lang-switch button{min-height:44px; min-width:44px; padding:0 1.125rem; border:0; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--on-navy); font:700 1rem/1 var(--body)}
.lang-switch button:hover{background:rgba(247,248,245,.08)}
.lang-switch button[aria-pressed="true"]{background:var(--green-bright); color:var(--navy)}
.hero .lede{color:var(--on-navy-muted); font-size:clamp(1.0625rem,2.4vw,1.25rem); line-height:1.55; max-width:36rem; margin:1.25rem 0 1.75rem}

/* Waitlist: the one action before launch. Paper field on navy so the input
   reads as a field, green button because green means act. */
.waitlist{max-width:34rem; margin:0 0 1.5rem}
.waitlist label{display:block; font:700 .9375rem/1.3 var(--body); color:var(--on-navy); margin:0 0 .5rem}
.wl-row{display:grid; gap:.625rem}
@media (min-width:30rem){ .wl-row{grid-template-columns:minmax(0,1fr) auto} }
.waitlist input[type=email]{width:100%; min-height:3.25rem; padding:.75rem 1rem; border:1px solid transparent; border-radius:.75rem;
  background:var(--on-navy); color:var(--navy); font:400 1.0625rem/1.2 var(--body); caret-color:var(--navy)}
.waitlist input[type=email]::placeholder{color:#4E6177; opacity:1} /* Slate, fixed: the field stays light in both themes */
.waitlist input[type=email][aria-invalid=true]{border-color:var(--red); box-shadow:0 0 0 1px var(--red)}
.waitlist button{min-height:3.25rem; padding:.75rem 1.25rem; border:0; border-radius:.75rem; cursor:pointer;
  background:var(--green-bright); color:var(--navy); font:800 1.0625rem/1.2 var(--display); letter-spacing:-0.01em}
.waitlist button:hover{background:var(--green)}
.waitlist button:active{transform:translateY(1px)}
.waitlist button[disabled]{cursor:progress; opacity:.75}
.wl-promise{margin:.625rem 0 0; font-size:.875rem; line-height:1.45; color:var(--on-navy-muted)}
.hero .wl-promise a, .wl-status a{color:var(--green-bright)}
.wl-status{margin:.5rem 0 0; font-size:.9375rem; line-height:1.45; color:var(--on-navy)}
.wl-status:empty{margin:0} /* stays in the accessibility tree so the live region announces */
.wl-status.err{color:var(--red)}
.wl-trap{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
.wl-done{max-width:34rem; margin:0 0 1.5rem; padding:1rem 1.125rem; border:1px solid rgba(46,204,143,.45); border-radius:.75rem;
  font:700 1.0625rem/1.4 var(--body); color:var(--on-navy)}
.wl-done span{display:block; font-weight:400; font-size:.9375rem; color:var(--on-navy-muted); margin-top:.25rem}
.wl-done:focus{outline:none}
.wl-done:focus-visible{outline:3px solid var(--amber); outline-offset:3px}

.stores{display:flex; flex-wrap:wrap; gap:.75rem}
.store{display:flex; align-items:center; gap:.75rem; min-height:3.5rem; padding:.5rem 1.125rem .5rem .875rem;
  border:1px solid rgba(247,248,245,.28); border-radius:.75rem; color:var(--on-navy); line-height:1.2}
.store svg{width:1.5rem; height:1.5rem; flex:none}
.store small{display:block; font-size:.75rem; color:var(--on-navy-muted); letter-spacing:.02em}
.store b{font:800 1.0625rem/1.2 var(--display); letter-spacing:-0.01em}

/* The phone playing the offline recording, with the readout hanging over
   its top edge like a notification: it covers the app's title bar only,
   never Charlie, the figure or the captions. */
.stores-note{margin:.75rem 0 0; font-size:.875rem; color:var(--on-navy-muted); max-width:36rem}
.demo{position:relative; justify-self:center; width:min(17.5rem,78vw); margin-top:5.5rem}
@media (min-width:56rem){ .demo{width:min(15.25rem,100%); margin-bottom:0} }
.phone{position:relative; aspect-ratio:540/1112; border-radius:2.25rem; background:#05090F; padding:.55rem;
  box-shadow:0 1.5rem 3rem -1rem rgba(0,0,0,.55), inset 0 0 0 1px rgba(247,248,245,.14)}
.phone video{display:block; width:100%; height:100%; object-fit:cover; border-radius:1.75rem; background:#0B1724}
@media (max-width:55.99rem){
  /* The whole screen shows on phones too: the lesson's captions run along
     its bottom edge, and they are the point. */
  .hero{padding-bottom:2.5rem}
}

.readout{position:absolute; z-index:1; top:-5rem; right:-.75rem; width:12rem; padding:.75rem .875rem .625rem;
  background:rgba(12,24,38,.94); border:1px solid rgba(247,248,245,.16); border-radius:1rem;
  box-shadow:0 1rem 2rem -.75rem rgba(0,0,0,.6); font-size:.875rem; line-height:1.3}
.readout .val{white-space:nowrap}
@media (min-width:56rem){ .demo{margin-top:0} .readout{top:-4.4rem; right:-7rem; width:13rem} }
.readout .row{display:flex; align-items:center; gap:.625rem; min-height:1.75rem}
.readout .row + .row{margin-top:.375rem; padding-top:.5rem; border-top:1px solid rgba(247,248,245,.12)}
.readout .lbl{color:var(--on-navy-muted)}
.readout .val{margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums}

.bars{display:inline-flex; align-items:flex-end; gap:3px; height:1rem}
.bars i{width:5px; border-radius:1.5px; background:var(--amber); transition:background-color .25s ease-out, opacity .25s ease-out}
.bars i:nth-child(1){height:25%} .bars i:nth-child(2){height:50%} .bars i:nth-child(3){height:75%} .bars i:nth-child(4){height:100%}
.sig .val{color:var(--amber)}
.sig .val .off{display:none; color:var(--red)}

.offline .bars i{background:rgba(245,166,35,.28)}
.offline .bars i:nth-child(4){transition-delay:0s}
.offline .bars i:nth-child(3){transition-delay:.3s}
.offline .bars i:nth-child(2){transition-delay:.6s}
.offline .bars i:nth-child(1){transition-delay:.9s}
.offline .sig .val .on{display:none}
.offline .sig .val .off{display:inline}

.play .val{color:var(--green-bright)}
.eq{display:inline-flex; align-items:flex-end; gap:2px; width:1.375rem; height:1rem; flex:none}
.eq i{flex:1; height:60%; border-radius:1px; background:var(--green-bright)}
.eq i:nth-child(2){height:100%} .eq i:nth-child(3){height:40%}
@media (prefers-reduced-motion:no-preference){
  .eq i{animation:eq .9s ease-in-out infinite alternate}
  .eq i:nth-child(2){animation-delay:-.3s} .eq i:nth-child(3){animation-delay:-.6s}
  @keyframes eq{from{transform:scaleY(.35)} to{transform:scaleY(1)}}
  .eq i{transform-origin:bottom}
}
.replay{display:inline-flex; align-items:center; gap:.375rem; min-height:44px; margin:.375rem 0 -.375rem -.5rem; padding:0 .5rem;
  background:none; border:0; border-radius:.375rem; color:var(--on-navy-muted); font:inherit; font-size:.8125rem; cursor:pointer}
.replay:hover{color:var(--on-navy)}
.replay svg{width:.875rem; height:.875rem}

/* Prices: the bottom edge of the navy field. */
.prices{background:var(--navy-deep); color:var(--on-navy); padding-block:1.5rem}
.price-grid{display:grid; gap:1.25rem 2.5rem; align-items:start}
@media (min-width:48rem){ .price-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .promo{grid-column:1 / -1} }
.price{display:grid; grid-template-columns:auto 1fr; column-gap:1rem; align-items:baseline}
.price .amt{font:800 2rem/1 var(--display); letter-spacing:-0.03em; font-variant-numeric:tabular-nums}
.price .name{font-weight:700}
.price .what{grid-column:2; color:var(--on-navy-muted); font-size:.9375rem; line-height:1.45}
.price-terms{margin:0; color:var(--on-navy-muted); font-size:.9375rem; line-height:1.5; max-width:26rem}
@media (min-width:48rem){ .price-terms{grid-column:1 / -1; max-width:none; padding-top:1rem; border-top:1px solid rgba(247,248,245,.12)} }
.price-terms strong{color:var(--on-navy)}

/* ---- Below the field ------------------------------------------------- */
.section{padding-block:clamp(3rem,8vw,5rem) 0}
.section h2{font:800 clamp(1.625rem,4.4vw,2.5rem)/1.1 var(--display); letter-spacing:-0.03em; margin:0 0 .75rem; text-wrap:balance; max-width:22ch}
.section .intro{color:var(--muted); max-width:38rem; margin:0 0 2rem}

/* Guides */
.guides{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.guide{display:grid; grid-template-columns:2.75rem minmax(0,1fr); column-gap:1rem; align-items:center;
  padding-block:1rem; border-bottom:1px solid var(--line)}
@media (min-width:48rem){ .guide{grid-template-columns:2.75rem minmax(0,1fr) auto} }
.chip{width:2.75rem; height:2.75rem; border-radius:.75rem; background:var(--g); display:grid; place-items:center}
.chip svg{width:1.375rem; height:1.375rem; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.guide h3{font:800 1.125rem/1.25 var(--display); letter-spacing:-0.01em; margin:0}
.guide p{margin:.125rem 0 0; color:var(--muted); font-size:.9375rem}
.guide .in{grid-column:2; margin-top:.375rem; font-size:.8125rem; font-weight:700; color:var(--muted)}
@media (min-width:48rem){ .guide .in{grid-column:3; margin:0; text-align:right} }

/* Screens: lesson, quiz, exam, Spanish */
.screens{list-style:none; margin:0 calc(var(--gutter) * -1); padding:0 var(--gutter) .5rem; display:grid;
  grid-auto-flow:column; grid-auto-columns:min(15rem,70vw); gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent}
@media (min-width:64rem){ .screens{grid-auto-flow:row; grid-template-columns:repeat(5,1fr); overflow:visible; margin:0; padding:0} }
.screens li{scroll-snap-align:start; margin:0}
.shot{border-radius:1.25rem; background:#05090F; padding:.375rem; box-shadow:0 .75rem 1.5rem -.75rem rgba(0,0,0,.35)}
.shot img{display:block; width:100%; aspect-ratio:1080/2310; object-fit:cover; border-radius:.95rem}
.screens h3{font:800 1.0625rem/1.25 var(--display); margin:1rem 0 .25rem}
.screens p{margin:0; color:var(--muted); font-size:.9375rem; line-height:1.5}

/* Fine print */
.fine{display:grid; gap:2rem; padding-block:clamp(3rem,8vw,5rem)}
@media (min-width:56rem){ .fine{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:4rem} }
.fine h2{font:800 1.375rem/1.2 var(--display); letter-spacing:-0.02em; margin:0 0 .75rem}
.fine p{margin:.75rem 0; max-width:40rem}
.notice{padding:1.125rem 1.25rem; background:var(--quote-bg); border-radius:.75rem}
.notice p:first-child{margin-top:0} .notice p:last-child{margin-bottom:0}
.more{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.more a{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:3.5rem; padding:.75rem 0;
  border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none}
.more a span{color:var(--muted); font-size:.875rem}
.more a b{font-weight:700; color:var(--link)}
.more a:hover b{text-decoration:underline}

.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}
.promo{margin:0; font-size:1.0625rem; color:var(--on-navy-muted)}
.promo strong{color:var(--green-bright); font:800 clamp(1.125rem,3vw,1.375rem)/1.3 var(--display); letter-spacing:-0.01em; display:block; margin-bottom:.125rem}
.more a span{line-height:1.45}

.swipe{white-space:nowrap}
@media (min-width:64rem){ .swipe{display:none} }
.hero .lede strong{color:var(--on-navy); font-weight:700}
/* Spanish runs about a third longer; give the headline room so the form
   stays near the top on a phone. */
html[lang|="es"] .hero h1{max-width:19ch}