/* ---------------------------------------------------------------------------
   Posta — arcilla (soft clay), same as the app's src/lib/theme.ts.
   Oat page, molded surfaces with no outlines, five pastels for decoration,
   rosa for the one thing to act on.
   --------------------------------------------------------------------------- */

:root {
  --oat: #F7EFE6;
  --canvas: #EFE4D8;
  --surface: #FFF9F3;
  --ink: #3A2A20;
  --ink-2: #7A6556;
  --rosa: #B44A60;
  --rosa-top: #B24A62;
  --rosa-bottom: #A8425A;
  --rosa-dark: #8A3347;

  --peach: linear-gradient(#FFC4A3, #FFAB7F);
  --sage: linear-gradient(#BDE1CB, #A0D0B3);
  --butter: linear-gradient(#FFE9A6, #FFD970);
  --lav: linear-gradient(#D6C8F5, #C2AFEE);
  --sky: linear-gradient(#BDE0F8, #A1D1F3);

  --clay: inset 2px 3px 0 rgba(255,255,255,.65), inset -3px -5px 10px rgba(120,70,40,.10), 0 10px 22px -10px rgba(120,70,40,.35);
  --clay-btn: inset 0 3px 0 rgba(255,255,255,.28), inset 0 -5px 10px rgba(80,10,30,.25), 0 12px 22px -8px rgba(160,50,75,.55);
  --clay-float: inset 2px 3px 0 rgba(255,255,255,.7), 0 18px 36px -12px rgba(120,70,40,.4);
  --clay-tile: inset 2px 3px 0 rgba(255,255,255,.45), inset -4px -8px 18px rgba(120,70,40,.10), 0 24px 44px -22px rgba(120,70,40,.45);

  --display: "Gabarito", "Figtree", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--oat);
  color: var(--ink);
  font: 600 17px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.04; text-wrap: balance; }
h1 { font-size: clamp(40px, 5.2vw, 66px); letter-spacing: -0.03em; }
h1 em { font-style: normal; color: var(--rosa); }
h2 { font-size: clamp(30px, 4.2vw, 50px); }
h3 { font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; }

.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head .lede { margin-top: 18px; }

.eyebrow { font: 800 13px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--rosa); margin-bottom: 16px; }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 54ch; text-wrap: pretty; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 12px; text-decoration: none; }
.skip:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; border-radius: 10px; }

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 26px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(var(--rosa-top), var(--rosa-bottom));
  box-shadow: var(--clay-btn);
  color: #fff; font: 800 17px/1 var(--body); text-decoration: none; white-space: nowrap;
  transition: transform 160ms var(--ease-out), filter 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
.btn-light { background: #fff; color: var(--rosa-dark); box-shadow: inset 0 -4px 8px rgba(120,70,40,.14), 0 12px 22px -10px rgba(60,10,25,.6); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { filter: brightness(1.07); }
  .btn-light:hover { filter: brightness(0.97); }
}

/* ── Nav ───────────────────────────────────────────────────────────────── */

.nav { position: sticky; top: 0; z-index: 50; background: rgba(247,239,230,.86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
.nav-in { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 800 24px/1 var(--display); letter-spacing: -0.02em; }
.brand img { border-radius: 10px; box-shadow: 0 4px 10px -4px rgba(120,70,40,.5); }
.nav-links { display: none; gap: 28px; margin-left: auto; }
.nav-links a { text-decoration: none; font-weight: 700; font-size: 15px; color: var(--ink-2); transition: color 160ms ease; }
.nav .btn { margin-left: auto; }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--ink); } }
@media (min-width: 820px) {
  .nav-links { display: flex; }
  .nav .btn { margin-left: 0; }
}

/* ── Tiles and phones ──────────────────────────────────────────────────── */

.tile { position: relative; border-radius: 44px; box-shadow: var(--clay-tile); }
.tile-peach { background: var(--peach); }
.tile-sage { background: var(--sage); }
.tile-butter { background: var(--butter); }
.tile-lav { background: var(--lav); }
.tile-sky { background: var(--sky); }

/* The white disc behind the art, as on the app's hero tiles. */
.pod { position: absolute; border-radius: 50%; background: rgba(255,255,255,.45); pointer-events: none; }

/* A phone is sized by its width alone; everything inside follows in cqw. */
.phone { container-type: inline-size; position: relative; width: 100%; }
.phone-body {
  padding: 3.4cqw; border-radius: 15cqw;
  background: #2B1E16;
  box-shadow: inset 0 0 0 0.6cqw rgba(255,255,255,.12), 0 10cqw 16cqw -9cqw rgba(70,35,15,.6), 0 3cqw 5cqw -2cqw rgba(70,35,15,.3);
}
.phone-body { position: relative; }
.screen { container-type: inline-size; position: relative; aspect-ratio: 390 / 844; overflow: hidden; border-radius: 11.8cqw; background: var(--oat); }
.island { position: absolute; top: 6cqw; left: 50%; width: 30cqw; height: 8.4cqw; margin-left: -15cqw; border-radius: 999px; background: #0E0A08; }

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero { padding: clamp(28px, 5vw, 72px) 0 clamp(48px, 7vw, 96px); }
.hero-in { display: grid; gap: 44px; align-items: center; }
.hero-copy .lede { margin-top: 22px; }
.cta { margin-top: 30px; display: grid; gap: 14px; justify-items: start; }
.fineprint { font-size: 14px; font-weight: 700; color: var(--ink-2); }

.hero-tile { aspect-ratio: 1 / 1.06; max-width: 540px; width: 100%; margin: 0 auto; }
.hero-tile .pod { width: 78%; aspect-ratio: 1; left: 11%; top: 14%; }
.hero-phone { position: absolute; width: 50%; left: 30%; top: -5%; transform: rotate(-3deg); }
.hero-pancho { position: absolute; width: 37%; left: -6%; bottom: -3%; z-index: 2; filter: drop-shadow(0 14px 14px rgba(90,45,20,.28)); transform-origin: 50% 100%; }
.bubble {
  position: absolute; left: -4%; bottom: 51%; z-index: 2;
  padding: 11px 16px; border-radius: 20px;
  background: var(--surface); box-shadow: var(--clay-float);
  font-size: 14px; line-height: 1.25; color: var(--ink-2);
  display: grid;
}
.bubble strong { font: 800 19px/1.15 var(--display); color: var(--rosa-dark); letter-spacing: -0.01em; }
.bubble::after { content: ""; position: absolute; left: 34px; bottom: -7px; width: 16px; height: 16px; background: var(--surface); border-radius: 4px; transform: rotate(45deg); }
.hero-tile .streak { right: -6%; bottom: 2%; width: 52%; }
.callout {
  position: absolute; left: -5%; bottom: 7%; width: 74%; z-index: 3;
  padding: 4.2% 5%; border-radius: 26px;
  background: #FBE3DC; box-shadow: inset 2px 3px 0 rgba(255,255,255,.7), 0 22px 40px -14px rgba(120,70,40,.5);
  transform: rotate(-2deg);
}
.callout-tag { display: block; font: 800 12px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: #94371F; }
.callout p { margin-top: 8px; font: 700 clamp(18px, 2.1vw, 25px)/1.3 var(--body); }
.callout small { display: block; margin-top: 7px; font-size: clamp(13px, 1.25vw, 15px); line-height: 1.4; color: var(--ink-2); }
s { text-decoration: line-through; color: #94371F; opacity: .7; }
mark { color: #3F7A57; font-weight: 800; background: rgba(168,213,186,.5); border-radius: 6px; padding: 0 3px; }

@media (min-width: 900px) {
  .hero-in { grid-template-columns: 1.2fr 0.8fr; gap: 48px; }
  .hero-tile { margin: 4% 0 0 auto; }
}

/* ── Store badges ──────────────────────────────────────────────────────── */

.stores { display: grid; gap: 10px; }
.soon { font: 800 13px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.stores.is-live .soon { display: none; }
.badges { display: flex; flex-wrap: wrap; gap: 12px; }
.badge { display: block; border-radius: 9px; transition: transform 160ms var(--ease-out); }
.badge img { height: 52px; width: auto; }
.badge[href]:active { transform: scale(0.97); }
.badge:not([href]) { cursor: default; }
.badge[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .badge[href]:hover { transform: translateY(-2px); } }

.waitlist { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; max-width: 480px; }
.waitlist[hidden] { display: none; }
.waitlist input {
  flex: 1 1 200px; min-height: 54px; padding: 0 20px;
  border: 0; border-radius: 999px;
  background: var(--surface); box-shadow: inset 0 2px 5px rgba(58,42,32,.14), 0 0 0 1px rgba(58,42,32,.06);
  font: 600 16px/1 var(--body); color: var(--ink);
}
.waitlist input::placeholder { color: rgba(58,42,32,.4); }
.waitlist-note { flex-basis: 100%; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.waitlist-note:empty { display: none; }

/* ── Slang ticker ──────────────────────────────────────────────────────── */

.ticker { overflow: hidden; background: var(--canvas); padding: 18px 0; box-shadow: inset 0 2px 5px rgba(58,42,32,.08); }
.ticker-track { display: flex; width: max-content; animation: ticker 48s linear infinite; }
.ticker-list { display: flex; gap: 12px; padding-right: 12px; }
.ticker-list li { white-space: nowrap; padding: 9px 16px; border-radius: 999px; background: var(--surface); box-shadow: var(--clay); font-size: 15px; color: var(--ink-2); }
.ticker-list b { font: 800 17px/1 var(--display); color: var(--ink); margin-right: 6px; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (hover: hover) and (pointer: fine) { .ticker:hover .ticker-track { animation-play-state: paused; } }

/* ── Textbook vs Buenos Aires ──────────────────────────────────────────── */

.phrases { display: grid; gap: 14px; max-width: 900px; }
.phrase {
  display: grid; grid-template-columns: 1fr auto; gap: 14px 16px; align-items: center;
  padding: 20px; border-radius: 28px;
  background: var(--surface); box-shadow: var(--clay);
}
.phrase-book { grid-column: 1 / -1; }
.tag { display: block; font: 800 11px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 7px; }
.tag-ba { color: var(--rosa); }
.phrase p { font: 700 20px/1.2 var(--display); letter-spacing: -0.01em; }
.phrase-book p { color: rgba(58,42,32,.58); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(201,85,62,.55); }
.phrase-ba p { font-weight: 800; font-size: 23px; }
.phrase-en { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.play {
  width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: linear-gradient(var(--rosa-top), var(--rosa-bottom)); color: #fff; box-shadow: var(--clay-btn);
  transition: transform 160ms var(--ease-out);
}
.play:active { transform: scale(0.94); }
.play.is-playing { animation: pulse 900ms var(--ease-out) infinite; }
@keyframes pulse { 0% { box-shadow: var(--clay-btn), 0 0 0 0 rgba(180,74,96,.45); } 100% { box-shadow: var(--clay-btn), 0 0 0 14px rgba(180,74,96,0); } }

@media (min-width: 760px) {
  .phrase { grid-template-columns: 1fr 1.15fr auto; padding: 22px 22px 22px 28px; }
  .phrase-book { grid-column: auto; }
}

/* ── Features ──────────────────────────────────────────────────────────── */

.feature { padding-block: clamp(36px, 5vw, 64px); }
.feature-in { display: grid; gap: 36px; align-items: center; }
.feature-tile { aspect-ratio: 1 / 1.02; max-width: 520px; width: 100%; margin: 0 auto; }
.feature-tile .pod { width: 82%; aspect-ratio: 1; left: 9%; top: 12%; }
.feature-tile > .phone { position: absolute; width: 47%; left: 26.5%; top: 7%; }
.prop { position: absolute; filter: drop-shadow(0 12px 12px rgba(90,45,20,.26)); }
.prop-a { width: 34%; right: -3%; bottom: -3%; }
.prop-b { width: 38%; left: -5%; bottom: -2%; }
.prop-c { width: 22%; right: -5%; top: -13%; transform: rotate(8deg); }
.stage-tile .prop-a { width: 27%; right: -7%; bottom: -8%; }
.feature-tile > .course-phone { left: 14%; top: 6%; width: 48%; transform: rotate(-3deg); }

/* A stage is a tile that holds enlarged pieces of the app instead of a phone. */
.stage-tile { aspect-ratio: auto; padding: 8% 7% 9%; container-type: inline-size; }
.stage { --u: calc(100cqw / 430); display: grid; gap: calc(14 * var(--u)); }

.feature-copy .lede { margin-top: 18px; }
.ticks { margin-top: 24px; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 34px; font-size: 16px; line-height: 1.45; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
  background: #A8D5BA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='m6.5 11.4 3 3 6-6.6' fill='none' stroke='%232F6245' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat;
}

@media (min-width: 900px) {
  .feature-in { grid-template-columns: 1fr 1fr; gap: 72px; }
  .feature-tile { margin: 0; }
  .feature-flip .feature-tile { order: 2; margin-left: auto; }
}

/* ── Course cards ──────────────────────────────────────────────────────── */

.cards { display: grid; gap: 18px; }
.card { padding: 22px 22px 26px; border-radius: 32px; background: var(--surface); box-shadow: var(--clay); }
.card-art { display: grid; place-items: center; height: 150px; border-radius: 22px; margin-bottom: 20px; box-shadow: inset 2px 3px 0 rgba(255,255,255,.4), inset -3px -5px 10px rgba(120,70,40,.08); }
.card-art img { height: 118px; width: auto; filter: drop-shadow(0 8px 8px rgba(90,45,20,.22)); }
.card p { margin-top: 10px; font-size: 16px; color: var(--ink-2); }
@media (min-width: 820px) { .cards { grid-template-columns: repeat(3, 1fr); } }

/* ── Who it's for ──────────────────────────────────────────────────────── */

.who { background: var(--canvas); }
.who-list { display: grid; gap: 36px; }
.who-item img { height: 150px; width: auto; margin-bottom: 18px; filter: drop-shadow(0 10px 10px rgba(90,45,20,.22)); }
.who-item p { margin-top: 8px; color: var(--ink-2); max-width: 34ch; }
@media (min-width: 820px) { .who-list { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.faq-in { display: grid; gap: 8px; }
.faq-list { display: grid; gap: 12px; }
details { border-radius: 24px; background: var(--surface); box-shadow: var(--clay); }
summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; cursor: pointer; list-style: none;
  font: 700 19px/1.25 var(--display); letter-spacing: -0.01em;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin: -4px 4px 0 0;
  border-right: 2.5px solid var(--rosa); border-bottom: 2.5px solid var(--rosa); border-radius: 1px;
  transform: rotate(45deg); transition: transform 200ms var(--ease-out);
}
details[open] summary::after { transform: translateY(5px) rotate(-135deg); }
details p { padding: 0 22px 22px; color: var(--ink-2); max-width: 66ch; }
@media (min-width: 900px) {
  .faq-in { grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; }
  .faq .section-head { position: sticky; top: 100px; }
}

/* ── Final call ────────────────────────────────────────────────────────── */

.final { padding-top: 0; }
.final-card {
  position: relative; overflow: hidden;
  display: grid; gap: 28px; align-items: center;
  padding: clamp(32px, 6vw, 72px); padding-bottom: 0;
  border-radius: 44px;
  background: linear-gradient(160deg, #BF5169, #9C3B52);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.22), inset 0 -10px 24px rgba(80,10,30,.28), 0 30px 50px -24px rgba(160,50,75,.6);
  color: #fff;
}
.final-copy { display: grid; gap: 18px; justify-items: start; }
.final-copy > p { font-size: 19px; color: rgba(255,255,255,.82); }
.stores-light .soon { color: rgba(255,255,255,.75); }
.final .badge img { box-shadow: 0 0 0 1px rgba(255,255,255,.28); border-radius: 9px; }
.waitlist-light input { box-shadow: inset 0 2px 5px rgba(58,42,32,.2); }
.waitlist-light .waitlist-note { color: rgba(255,255,255,.85); }
.final-pancho { width: min(46%, 220px); justify-self: end; margin-bottom: -6px; filter: drop-shadow(0 10px 14px rgba(40,5,15,.35)); }
.qr { display: none; }

@media (min-width: 820px) {
  .final-card { grid-template-columns: 1fr auto auto; padding-bottom: clamp(32px, 6vw, 72px); gap: 40px; }
  .final-pancho { width: 230px; align-self: end; margin-bottom: calc(clamp(32px, 6vw, 72px) * -1 - 6px); }
  .qr:not([hidden]) {
    display: grid; gap: 10px; justify-items: center; padding: 14px 14px 12px;
    border-radius: 24px; background: #fff; color: var(--ink);
    font: 800 13px/1 var(--body); box-shadow: 0 16px 28px -14px rgba(40,5,15,.6);
  }
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.footer { padding: 40px 0 calc(40px + env(safe-area-inset-bottom)); }
.footer-in { display: grid; gap: 22px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.footer-links a { font-weight: 700; color: var(--ink-2); text-decoration: none; padding: 6px 0; }
.legal { font-size: 13px; line-height: 1.5; color: var(--ink-2); max-width: 78ch; }
@media (hover: hover) and (pointer: fine) { .footer-links a:hover { color: var(--ink); } }
@media (min-width: 820px) {
  .footer-in { grid-template-columns: auto 1fr; align-items: center; }
  .footer-links { justify-self: end; }
  .legal { grid-column: 1 / -1; }
}

/* ── Sticky download bar (phones, store link live) ─────────────────────── */

.sticky {
  position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 22px; background: rgba(255,249,243,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--clay-float);
  transform: translateY(140%); transition: transform 320ms var(--ease-out);
}
.sticky[hidden] { display: none; }
.sticky.is-up { transform: none; }
.sticky img { border-radius: 11px; }
.sticky div { display: grid; line-height: 1.2; margin-right: auto; }
.sticky strong { font: 800 17px/1.2 var(--display); }
.sticky span { font-size: 13px; color: var(--ink-2); }
@media (min-width: 820px) { .sticky { display: none; } }

/* ── Motion ────────────────────────────────────────────────────────────── */

/* The first screen arrives in order, once. */
.enter { animation: rise 700ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

.hero-pancho { animation: pop 600ms var(--ease-out) 420ms both; }
.bubble { animation: pop 420ms var(--ease-out) 760ms both; transform-origin: 20% 100%; }
.hero-tile .streak { animation: pop-tilt 520ms var(--ease-out) 1000ms both; }
@keyframes pop-tilt { from { opacity: 0; transform: rotate(3deg) scale(0.9) translateY(10px); } }

/* The hero chat plays through once: each line lands, then the correction. */
.say { animation: rise 460ms var(--ease-out) both; animation-delay: calc(500ms + var(--n) * 400ms); }
@keyframes pop { from { opacity: 0; transform: scale(0.9) translateY(8px); } }

/* Sections below the fold settle in as they are reached. Only with JS, so a
   reader without it still gets the page. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--d, 0) * 70ms); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .enter, .hero-pancho, .bubble, .hero-tile .streak, .say { animation: fade 300ms ease both; animation-delay: 0ms; }
  @keyframes fade { from { opacity: 0; } }
  .js .reveal { transform: none; transition: opacity 300ms ease; }
  .ticker-track { animation: none; }
  .ticker { overflow-x: auto; }
  .play.is-playing { animation: none; }
  .sticky { transition: none; }
}


/* ── Pieces of the app ─────────────────────────────────────────────────────
   Everything here is drawn in the app's own units: 1 `--u` is one point on a
   390-wide phone. Inside a phone that scales with the screen; on a stage it
   scales with the tile, a little larger than life. */

.screen > .ui { --u: calc(100cqw / 390); position: absolute; inset: 0; }
.ui { font: 600 calc(17 * var(--u)) / calc(23 * var(--u)) var(--body); color: var(--ink); }
.ui svg { width: 1em; height: 1em; display: block; }
.ui p { margin: 0; }

.round { display: grid; place-items: center; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; background: var(--surface); box-shadow: var(--clay); font-size: calc(18 * var(--u)); }
.round.ghost { visibility: hidden; }

/* chat */
.chat-head { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(62 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u)); }
.chat-head p { flex: 1; text-align: center; font: 700 calc(12 * var(--u)) / 1.3 var(--body); color: var(--ink-2); }
.chat-head b { display: block; font: 800 calc(18 * var(--u)) / 1.2 var(--display); color: var(--ink); }
.thread { display: grid; gap: calc(12 * var(--u)); padding: calc(6 * var(--u)) calc(20 * var(--u)) 0; }
.row-p { display: flex; align-items: flex-end; gap: calc(8 * var(--u)); }
.av { flex: none; width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; background: #FFE08A; object-fit: cover; }
.bub {
  max-width: calc(270 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(11 * var(--u));
  border-radius: calc(26 * var(--u)); border-bottom-left-radius: calc(8 * var(--u));
  background: var(--surface); box-shadow: var(--clay);
}
.bub.me {
  justify-self: end; max-width: calc(262 * var(--u));
  border-radius: calc(26 * var(--u)); border-bottom-right-radius: calc(8 * var(--u));
  background: linear-gradient(var(--rosa-top), var(--rosa-bottom)); box-shadow: var(--clay-btn); color: #fff; font-weight: 700;
}
.tr { display: block; margin-top: calc(6 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(19 * var(--u)); color: var(--ink-2); }
.chips { display: flex; gap: calc(6 * var(--u)); margin-top: calc(10 * var(--u)); }
.chips i { display: grid; place-items: center; height: calc(28 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: 999px; background: var(--canvas); font: 800 calc(12 * var(--u)) / 1 var(--body); color: var(--ink-2); }
.chips svg { font-size: calc(14 * var(--u)); }
.chips i.on { background: var(--rosa); color: #fff; }
.ok { justify-self: end; display: flex; align-items: center; gap: calc(5 * var(--u)); margin-top: calc(-6 * var(--u)); font: 800 calc(13 * var(--u)) / 1 var(--body); color: #3F7A57; }
.fix { justify-self: end; max-width: calc(284 * var(--u)); padding: calc(11 * var(--u)) calc(14 * var(--u)); border-radius: calc(18 * var(--u)); border-top-right-radius: calc(6 * var(--u)); background: rgba(201,85,62,.14); }
.fix p { font-weight: 700; font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); }
.fix small { display: block; margin-top: calc(5 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); color: var(--ink-2); }
.way { justify-self: end; display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(38 * var(--u)); padding: 0 calc(13 * var(--u)); border-radius: 999px; background: var(--surface); box-shadow: var(--clay); font: 800 calc(14 * var(--u)) / 1 var(--body); color: #C4663F; }
.chat-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: calc(34 * var(--u)); padding: calc(12 * var(--u)) 0 calc(30 * var(--u)); background: var(--oat); }
.chat-bar span { display: grid; justify-items: center; gap: calc(4 * var(--u)); font: 700 calc(11 * var(--u)) / 1 var(--body); color: var(--ink-2); }
.chat-bar .round { width: calc(50 * var(--u)); height: calc(50 * var(--u)); font-size: calc(20 * var(--u)); }
.mic { display: grid; place-items: center; width: calc(84 * var(--u)); height: calc(84 * var(--u)); border-radius: 50%; background: linear-gradient(var(--rosa-top), var(--rosa-bottom)); box-shadow: var(--clay-btn); color: #fff; font-size: calc(34 * var(--u)); }

/* the correction, larger than life, on the speaking stage */
.stage .bub { max-width: 80%; }
.fix-lg { justify-self: stretch; max-width: none; padding: calc(20 * var(--u)) calc(22 * var(--u)); border-radius: calc(26 * var(--u)); background: #FBE3DC; box-shadow: inset 2px 3px 0 rgba(255,255,255,.7), 0 18px 34px -14px rgba(90,50,110,.45); transform: rotate(-1.5deg); }
.fix-lg .callout-tag { font-size: calc(12 * var(--u)); }
.fix-lg p { margin-top: calc(8 * var(--u)); font-size: calc(27 * var(--u)); line-height: calc(35 * var(--u)); }
.fix-lg small { font-size: calc(16 * var(--u)); line-height: calc(23 * var(--u)); margin-top: calc(8 * var(--u)); }

/* slang cards */
.words { gap: 0; padding: 0 2%; }
.wcard { position: relative; padding: calc(22 * var(--u)) calc(22 * var(--u)) calc(20 * var(--u)); border-radius: calc(30 * var(--u)); box-shadow: var(--clay), 0 16px 30px -18px rgba(120,70,40,.5); background: var(--surface); }
.wcard + .wcard { margin-top: calc(8 * var(--u)); }
.w1 { transform: rotate(-2deg); background: var(--sky); }
.w2 { transform: rotate(1.5deg) translateX(2%); background: var(--peach); }
.w3 { transform: rotate(-1deg); background: var(--lav); }
.wcard img { position: absolute; right: calc(16 * var(--u)); top: calc(14 * var(--u)); width: calc(104 * var(--u)); height: calc(70 * var(--u)); object-fit: contain; }
.wcard b { display: block; font: 800 calc(40 * var(--u)) / 1.05 var(--display); letter-spacing: -0.02em; }
.wcard > span { display: block; margin-top: calc(4 * var(--u)); font-weight: 700; font-size: calc(16 * var(--u)); }
.wcard p { margin-top: calc(14 * var(--u)); padding: calc(12 * var(--u)) calc(15 * var(--u)); border-radius: calc(18 * var(--u)); background: rgba(255,255,255,.72); font-weight: 800; font-size: calc(17 * var(--u)); }
.wcard small { display: block; font-weight: 600; font-size: calc(14 * var(--u)); color: #5A4636; }

/* the mate quiz: this one is real, tap an answer */
.quiz { gap: calc(14 * var(--u)); padding: calc(26 * var(--u)) calc(24 * var(--u)); border-radius: calc(32 * var(--u)); background: var(--surface); box-shadow: var(--clay-float); }
.quiz-tag { font: 800 calc(12 * var(--u)) / 1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--rosa); }
.quiz-q { font: 800 calc(24 * var(--u)) / 1.2 var(--display); letter-spacing: -0.01em; }
.quiz-opts { display: grid; gap: calc(10 * var(--u)); }
.quiz-opts button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 52px; padding: calc(12 * var(--u)) calc(18 * var(--u));
  border: 0; border-radius: calc(20 * var(--u)); cursor: pointer; text-align: left;
  background: var(--oat); box-shadow: var(--clay);
  font: 700 max(15px, calc(16 * var(--u))) / 1.3 var(--body); color: var(--ink);
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, opacity 200ms ease;
}
.quiz-opts button:active { transform: scale(0.97); }
.quiz-opts button::after { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: center / 22px no-repeat; }
.quiz.is-done button { cursor: default; box-shadow: none; }
.quiz.is-done button:not(.is-right):not(.is-wrong) { opacity: .5; }
.quiz-opts .is-right { background: #CDE9D7; color: #24543A; }
.quiz-opts .is-right::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='11' fill='%233F7A57'/%3E%3Cpath d='m6.5 11.4 3 3 6-6.6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.quiz-opts .is-wrong { background: rgba(201,85,62,.16); color: #94371F; }
.quiz-opts .is-wrong::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='11' fill='%23B24A34'/%3E%3Cpath d='m7.5 7.5 7 7m0-7-7 7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.quiz-hint { font-size: calc(14 * var(--u)); font-weight: 700; color: var(--ink-2); }
.quiz-win { padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(20 * var(--u)); background: rgba(168,213,186,.5); font-size: max(14px, calc(15 * var(--u))); line-height: 1.45; color: #4A3A2E; }
.quiz-win[hidden] { display: none; }
.quiz-win b { display: block; font: 800 calc(20 * var(--u)) / 1.2 var(--display); color: #2F6245; margin-bottom: 3px; }
.quiz-win { animation: rise 420ms var(--ease-out) both; }
@media (hover: hover) and (pointer: fine) { .quiz:not(.is-done) .quiz-opts button:hover { background: #FFFDF9; } }

/* course path */
.course-head { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(64 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u)); }
.pill { display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(44 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: 999px; background: var(--surface); box-shadow: var(--clay); font: 800 calc(14 * var(--u)) / 1 var(--body); margin-right: auto; }
.pill-streak { margin-right: 0; padding: 0 calc(14 * var(--u)); background: #FFB38A; font-size: calc(15 * var(--u)); }
.pill-streak svg { font-size: calc(20 * var(--u)); }
.me-av { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; background: #FFE08A; box-shadow: var(--clay); }
.unit { position: relative; overflow: hidden; margin: calc(6 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u)); height: calc(170 * var(--u)); padding: calc(22 * var(--u)); border-radius: calc(34 * var(--u)); background: var(--peach); box-shadow: var(--clay); }
.unit-pod { position: absolute; right: calc(-30 * var(--u)); top: calc(10 * var(--u)); width: calc(170 * var(--u)); height: calc(170 * var(--u)); border-radius: 50%; background: rgba(255,255,255,.45); }
.unit img { position: absolute; right: calc(8 * var(--u)); bottom: calc(-8 * var(--u)); width: auto; height: calc(150 * var(--u)); }
.unit small { display: block; font: 800 calc(12 * var(--u)) / 1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; }
.unit b { display: block; margin-top: calc(6 * var(--u)); font: 800 calc(23 * var(--u)) / 1.1 var(--display); }
.unit > span { display: block; margin-top: calc(6 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.3; color: #5A4636; }
.bar { position: absolute; left: calc(22 * var(--u)); bottom: calc(20 * var(--u)); width: calc(190 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); }
.bar i { flex: 1; height: calc(10 * var(--u)); border-radius: 99px; background: linear-gradient(90deg, var(--rosa) 56%, rgba(58,42,32,.12) 56%); }
.bar em { font: 800 calc(12 * var(--u)) / 1 var(--body); font-style: normal; }
.road { display: grid; justify-items: center; }
.coin, .here { transform: translateX(calc(var(--x) * var(--u))); margin: calc(8 * var(--u)) 0; }
.coin { display: grid; place-items: center; width: calc(74 * var(--u)); height: calc(62 * var(--u)); border-radius: 999px; background: #EADFD2; box-shadow: inset 0 2px 4px rgba(58,42,32,.08); color: #9C8878; font-size: calc(26 * var(--u)); }
.coin.done { background: var(--peach); box-shadow: var(--clay); color: var(--ink); }
.here { padding: calc(5 * var(--u)); border-radius: 999px; border: calc(3 * var(--u)) solid rgba(180,74,96,.9); }
.here > span { display: flex; align-items: center; gap: calc(10 * var(--u)); width: calc(160 * var(--u)); height: calc(72 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: 999px; background: linear-gradient(var(--rosa-top), var(--rosa-bottom)); box-shadow: var(--clay-btn); color: #fff; }
.here i { display: grid; place-items: center; width: calc(56 * var(--u)); height: calc(56 * var(--u)); border-radius: 50%; background: rgba(255,255,255,.18); font-size: calc(26 * var(--u)); }
.here b { font: 800 calc(20 * var(--u)) / 1.1 var(--display); }
.here small { display: block; font: 700 calc(13 * var(--u)) / 1.2 var(--body); }
.tabs { position: absolute; left: calc(14 * var(--u)); right: calc(14 * var(--u)); bottom: calc(24 * var(--u)); display: flex; gap: calc(4 * var(--u)); padding: calc(6 * var(--u)); border-radius: 999px; background: var(--surface); box-shadow: var(--clay-float); }
.tabs span { flex: 1; display: grid; justify-items: center; align-content: center; gap: calc(2 * var(--u)); height: calc(56 * var(--u)); border-radius: 999px; font: 700 calc(12 * var(--u)) / 1 var(--body); color: var(--ink-2); }
.tabs svg { font-size: calc(22 * var(--u)); }
.tabs .on { font-weight: 800; color: var(--ink); background: #F1EAE3; box-shadow: inset 0 0 0 calc(1.5 * var(--u)) var(--ink-2); }

/* the streak card that sits over the course phone */
.streak { position: absolute; right: -4%; bottom: 9%; width: 56%; z-index: 3; padding: 16px 18px 18px; border-radius: 26px; background: var(--surface); box-shadow: var(--clay-float); transform: rotate(3deg); }
.streak-top { display: flex; align-items: center; gap: 12px; }
.streak-top svg { flex: none; width: 40px; height: 40px; }
.streak-top p { font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.streak-top b { display: block; font: 800 26px/1 var(--display); color: var(--ink); margin-bottom: 2px; }
.streak ol { display: flex; justify-content: space-between; margin-top: 14px; }
.streak li { display: grid; place-items: center; width: 11.5%; aspect-ratio: 1; border-radius: 50%; background: #EADFD2; font: 800 11px/1 var(--body); color: #9C8878; }
.streak li.on { background: var(--peach); color: var(--ink); box-shadow: var(--clay); }

@media (max-width: 480px) {
  .callout { width: 80%; border-radius: 20px; }
  .streak { padding: 12px 14px 14px; border-radius: 20px; }
  .streak-top svg { width: 30px; height: 30px; }
  .streak-top b { font-size: 21px; }
  .streak-top p { font-size: 12px; }
}

/* Below the two-column hero the tile runs edge to edge, so nothing may hang off its left. */
@media (max-width: 899px) {
  .bubble { left: 0; }
  .hero-pancho { left: -4%; }
  .hero-tile .streak { right: 0; }
}

/* The chat section: the phone, with its correction pulled out larger beside it. */
.feature-first { padding-top: clamp(56px, 8vw, 104px); }
.chat-tile > .chat-phone { left: 40%; top: -5%; width: 50%; transform: rotate(3deg); }
.chat-tile .prop-a { width: 30%; left: 2%; right: auto; top: 5%; bottom: auto; }
.chat-tile .callout { left: -5%; bottom: 8%; }
/* Its lines land one by one, but only once the section is on screen. */
.js .reveal .say { animation-play-state: paused; }
.js .reveal.in .say { animation-play-state: running; }

/* On one column a feature reads: what it is, the picture, then the details. */
@media (max-width: 899px) {
  .feature-in { gap: 0; }
  .feature-copy { display: contents; }
  .feature-copy > .eyebrow, .feature-copy > h2, .feature-copy > .lede { order: 1; }
  .feature-tile { order: 2; margin-top: 56px; margin-bottom: 12px; }
  .feature-copy > .ticks { order: 3; margin-top: 32px; }
}