/* ============================================================
   justyep.com landing — draft
   All color/space/type values come from tokens.css (design system).
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Satoshi owns the sans role (body, nav, buttons): the wordmark's family,
   working for a living. Overrides the generated token from tokens.css, and
   stays a local override on purpose — Satoshi is web-only by ruling
   (2026-07-22). The apps keep the system face, which covers the Arabic,
   Cyrillic and Devanagari the courses teach and Satoshi does not. Not a
   migration waiting to be finished. */
:root {
  --font-family-sans: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

body {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  background: var(--color-surface-canvas);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: var(--color-accent-default); color: var(--color-text-onAccent); }

:focus-visible {
  outline: 2px solid var(--color-accent-default);
  outline-offset: 3px;
  border-radius: 4px;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

.sr {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.wrap {
  max-width: var(--container-content);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.wrap-narrow { max-width: var(--container-prose); }

/* ---------- type voices ---------- */

.eyebrow {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 20px; height: 2px;
  background: var(--color-accent-default);
  vertical-align: middle;
  margin-right: var(--space-2);
}

h1, h2, h3 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
  text-wrap: balance;
}

h1 { font-size: clamp(2.7rem, 6.5vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
/* italic serif descenders (p, y, g) need a hair of reserve below the line box */
h1, h2 { padding-bottom: 0.08em; }

.turn {
  font-family: var(--font-family-serif);
  font-style: italic;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-normal);
  font-size: 0.95em;
}

.lead, .sec-lead {
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  max-width: 34em;
}

/* Inline hashtag link (e.g. #justspeak in the hero lead): the hashtag idiom
   already reads as tappable, so accent color at normal weight is enough —
   it must not compete with the bolded "free" beside it. */
.hash-link {
  color: var(--color-text-accent);
  text-decoration: none;
}
.hash-link:hover, .hash-link:focus-visible { text-decoration: underline; }

.sec-head { margin-bottom: var(--space-10); }
.sec-head .sec-lead { margin-top: var(--space-4); }

.fine {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
}
.fine.center { text-align: center; margin-top: var(--space-6); }

/* ---------- reveal ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--duration-slower) var(--ease-entrance),
              transform var(--duration-slower) var(--ease-entrance);
}
[data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  /* app.js never starts the cycle here; this just guarantees the name is
     legible if a class is left on the element from a media-query flip */
  #lang-cycle,
  #lang-cycle.swap-out,
  #lang-cycle.swap-in { opacity: 1; transform: none; transition: none; }
}

/* ---------- top bar ---------- */

.top { padding: var(--space-5) 0; }
.top-in { display: flex; align-items: center; justify-content: space-between; }

.wordmark {
  font-family: "Satoshi", var(--font-family-sans);
  font-weight: 700;
  font-size: var(--font-size-xl);
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--color-text-primary);
}

.top-nav { display: flex; align-items: center; gap: var(--space-5); }

.top-link {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  background: none; border: none; cursor: pointer;
}
.top-link:hover { color: var(--color-text-primary); }

.top-cta {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  color: var(--color-accent-onAccent);
  background: var(--color-accent-default);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  transition: background var(--duration-fast) var(--ease-standard);
}
.top-cta:hover { background: var(--color-accent-hover); }

/* ---------- hero ---------- */

.hero { padding: var(--space-10) 0 var(--space-20); }

.hero-grid {
  display: grid;
  /* The copy column has to hold the longest cycling headline, "Learn
     Portuguese" (565px at the 74px h1) — 1.15fr gave it 543px and the headline
     jumped to three lines once per cycle. The phone column pays nothing for
     this: .phone-hero is capped at 330px and 0.7fr still measures 330px. */
  grid-template-columns: 1.3fr 0.7fr;
  gap: var(--space-12);
  align-items: center;
}

/* The wider copy column let the lead reach its 34em cap, which pushed
   "challenge." onto a line of its own. Hold it to the measure it had before. */
.hero-copy .lead { margin-top: var(--space-6); max-width: 30em; }

/* the language sits beside "Learn" until there is no room for the longest one */
.h1-brk { display: none; }

/* the cycling language name — old name leaves upward, new one rises in behind it */
#lang-cycle {
  display: inline-block;
  transition: opacity var(--duration-slow) var(--ease-entrance),
              transform var(--duration-slow) var(--ease-entrance);
}
#lang-cycle.swap-out {
  opacity: 0;
  transform: translateY(-0.24em);
  transition: opacity var(--duration-slow) var(--ease-exit),
              transform var(--duration-slow) var(--ease-exit);
}
/* the incoming name's start frame — jumped to, never transitioned to */
#lang-cycle.swap-in {
  opacity: 0;
  transform: translateY(0.24em);
  transition: none;
}

.stores {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-8);
}
.stores.center { justify-content: center; }
.store-badge img { height: 47px; width: auto; }
.store-badge {
  display: inline-block;
  border-radius: var(--radius-sm);
  transition: transform var(--duration-fast) var(--ease-spring);
}
.store-badge:hover { transform: translateY(-2px); }

/* ---------- phones ---------- */

.phone {
  border-radius: 48px;
  border: 9px solid #0E0D0B;
  background: #0E0D0B;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  width: min(320px, 100%);
}

.hero-visual { display: flex; justify-content: center; }
.phone-hero { width: min(330px, 86vw); }
/* desktop shows only the practice loop; the paired correction video is mobile-only */
.hero-video-phone { display: none; }
@media (min-width: 921px) {
  /* always show the whole phone: derive width from the viewport height
     (framed aspect ~0.46) so it never gets cropped at the fold. The call
     video matches it so the two phones read as the same size. */
  .phone-hero,
  .call-phone { width: min(330px, calc((100vh - 210px) * 0.45)); }
}

/* ---------- feedback / live correction (dark section) ---------- */

.call {
  background: var(--color-carbon-900);
  color: var(--color-paper-raw);
  padding: var(--space-20) 0 var(--space-24);
}

/* video on the left, copy on the right — mirrors the hero. The video takes a
   tight fixed column so the copy gets the room the headline needs. The course
   variant overrides this grid on desktop (min-width: 921px), so it only
   shapes the feedback section. */
.call-in {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: var(--space-12);
  align-items: center;
}

.call-copy { max-width: 30em; }
.call-copy .eyebrow { color: #8A8A8E; }
.call h2 { color: #FFFFFF; }

/* feedback section only (not the course variant): let the headline use the full
   column and size it to land on one line — fill greedily, not balance, and
   avoid an orphan if it ever wraps on a narrow desktop */
.call:not(.call--course) .call-copy { max-width: none; }
.call:not(.call--course) h2 {
  text-wrap: pretty;
  font-size: clamp(1.9rem, 4.2vw, 2.6rem);
}
.call-copy .sec-lead { margin-top: var(--space-4); color: #B2B2B2; }

.call-visual { display: flex; justify-content: center; }
/* same width as the hero phone (see the min-width: 921px block) */
.call-phone {
  width: min(330px, 86vw);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.call-video { display: block; width: 100%; max-width: 100%; height: auto; }

/* course variant — a light section like the hero (not the dark call section):
   gray background, video on the right, copy on the left. Eyebrow + accent use
   the same treatment as the rest of the site (grey eyebrow, orange dash, and a
   plain — not colored — italic turn). */
.call--course {
  background: var(--color-surface-sunken);
  color: var(--color-text-primary);
}
.call--course .call-visual { order: 2; }   /* video -> right; copy leads */
.call--course .call-copy { order: 1; }
.call--course .call-copy .eyebrow { color: var(--color-text-secondary); }
.call--course h2 { color: var(--color-text-primary); }
.call--course .call-copy .sec-lead { color: var(--color-text-secondary); }
.call--course .call-phone { box-shadow: var(--shadow-xl); }
@media (min-width: 921px) {
  .call--course .call-in { grid-template-columns: 1.15fr 0.85fr; }
}

/* ---------- how it works ---------- */

/* pt 0: the gap above the heading comes from the previous section's bottom
   padding (Languages), so it isn't doubled */
.how { padding: 0 0 var(--space-24); }

.flow-row {
  display: grid;
  grid-template-columns: 64px 220px 1fr;
  gap: var(--space-6);
  align-items: baseline;
  padding: var(--space-8) 0;
}
.flow-row + .flow-row { border-top: 1px solid var(--color-separator); }
.flow-row .num {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-text-accent);
}
.flow-row h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.flow-row p {
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  max-width: 44em;
}

/* ---------- languages ---------- */

/* follows the dark feedback band — needs real top space above the heading */
.langs-sec { padding: var(--space-20) 0 var(--space-24); }

.langs {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}

.lang {
  background: var(--color-surface-default);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-3);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.lang .flag { font-size: 30px; line-height: 1; margin-bottom: var(--space-2); }
.lang .name { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); }
.lang .lvls {
  font-family: var(--font-family-mono);
  font-size: 11px;
  color: var(--color-text-secondary);
}

.lang-wide {
  margin-top: var(--space-3);
  display: flex; align-items: center; gap: var(--space-5);
  background: var(--color-surface-default);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-sm);
}
.lang-wide .flag { font-size: 34px; line-height: 1; }
.lang-wide .name { display: block; font-weight: var(--font-weight-semibold); }
.lang-wide .desc {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: 2px;
}

/* ---------- knowledge ---------- */

/* follows the gray course band — needs real top space above the heading */
.knowledge { padding: var(--space-20) 0 var(--space-24); }

.phone-rail {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: var(--space-8);
}
.phone-rail .phone { width: min(270px, 78vw); }
.phone-rail figcaption {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: var(--space-4);
}
.phone-rail .phone { border-radius: 44px; }
.phone-rail figure { display: flex; flex-direction: column; align-items: center; }

/* ---------- challenge ---------- */

.challenge { padding: 0 0 var(--space-24); }

.challenge-panel {
  background: var(--color-surface-default);
  border: var(--border-thick) solid var(--color-border-strong);
  border-radius: var(--radius-2xl);
  padding: clamp(var(--space-8), 5vw, var(--space-16));
  box-shadow: var(--shadow-md);
}
.challenge-panel .eyebrow { color: var(--color-text-accent); }
.challenge-panel .sec-lead { margin-top: var(--space-4); }

.chal-steps {
  list-style: none;
  margin-top: var(--space-10);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
.chal-step { display: flex; gap: var(--space-4); align-items: flex-start; }
.chal-step .n {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-3xl);
  line-height: 1;
  color: var(--color-text-accent);
}
.chal-step h3 { font-size: var(--font-size-lg); margin-bottom: var(--space-2); }
.chal-step p {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}
.chal-step a { color: var(--color-text-accent); }
.challenge-panel .fine { margin-top: var(--space-8); }

/* ---------- pricing ---------- */

.pricing { padding: 0 0 var(--space-24); }

.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  align-items: stretch;
}

.plan {
  background: var(--color-surface-default);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
}
.plan-free {
  border: var(--border-thick) solid var(--color-border-accent);
  box-shadow: var(--shadow-md);
}

.plan h3 { font-size: var(--font-size-lg); }
.plan .price {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-2xl);
  margin-top: var(--space-4);
}
.plan .per {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.plan ul {
  list-style: none;
  margin-top: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.plan li {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ---------- faq ---------- */

.faq { padding: 0 0 var(--space-24); }

.faq-list details {
  border-bottom: 1px solid var(--color-separator);
}
.faq-list details:first-child { border-top: 1px solid var(--color-separator); }

.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-5) var(--space-8) var(--space-5) 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  position: relative;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute; right: var(--space-2); top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-lg);
  color: var(--color-text-accent);
  transition: transform var(--duration-base) var(--ease-standard);
}
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }

.faq-list details p {
  padding: 0 0 var(--space-6);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  max-width: 36em;
}

/* ---------- final cta ---------- */

.cta {
  padding: var(--space-24) 0;
  background: var(--color-surface-sunken);
  text-align: center;
}
.cta-title {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  max-width: 18em;
  margin: 0 auto;
}
.cta .stores { margin-top: var(--space-10); }

/* ---------- footer ---------- */

.footer {
  background: var(--color-surface-inverse);
  color: var(--color-text-onInverse);
  padding: var(--space-12) 0;
}
.footer-in {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6);
  justify-content: space-between;
}
.footer .wordmark { color: var(--color-text-onInverse); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.footer-links a {
  font-size: var(--font-size-sm);
  color: rgba(247, 244, 239, 0.72);
  text-decoration: none;
}
.footer-links a:hover { color: var(--color-text-onInverse); }
.footer-note {
  width: 100%;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: rgba(247, 244, 239, 0.5);
}

/* ---------- newsletter modal ---------- */

.newsletter-modal {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: var(--color-overlay);
  z-index: 50;
  padding: var(--space-6);
}
.newsletter-modal.active { display: flex; }

.newsletter-content {
  position: relative;
  background: var(--color-surface-default);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  width: min(420px, 100%);
  box-shadow: var(--shadow-xl);
}
.newsletter-content h2 { font-size: var(--font-size-xl); }
.newsletter-content > p {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.newsletter-close {
  position: absolute; top: var(--space-4); right: var(--space-5);
  background: none; border: none; cursor: pointer;
  font-size: 26px; line-height: 1;
  color: var(--color-text-tertiary);
}
.newsletter-close:hover { color: var(--color-text-primary); }

.newsletter-form { display: flex; gap: var(--space-2); margin-top: var(--space-6); }
.newsletter-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: var(--font-size-sm);
  padding: 10px 14px;
  border: var(--border-regular) solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface-canvas);
  color: var(--color-text-primary);
}
.newsletter-input:focus { border-color: var(--color-border-accent); outline: none; }
.newsletter-submit {
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-onAccent);
  background: var(--color-accent-default);
  border: none; cursor: pointer;
  padding: 10px 18px;
  border-radius: var(--radius-md);
}
.newsletter-submit:hover { background: var(--color-accent-hover); }
.newsletter-submit:disabled { opacity: 0.6; cursor: default; }

.newsletter-status { margin-top: var(--space-3); font-size: var(--font-size-sm); min-height: 1.4em; }
.newsletter-status.success { color: var(--color-status-success); }
.newsletter-status.error { color: var(--color-status-danger); }

/* ---------- responsive ---------- */

@media (max-width: 920px) {
  .hero { padding-top: var(--space-8); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  /* pair the practice screenshot with the correction video, side by side —
     smaller than a single full-width phone so both read as a set. A 2-col
     grid guarantees they fit the viewport exactly (no horizontal overflow) */
  /* the exact knowledge-section phone rail: the screenshot leads, the
     correction video peeks in from the right and invites a swipe */
  .hero-visual {
    order: 2;
    display: flex;
    justify-content: flex-start;
    gap: var(--space-8);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-4);
    margin: 0 calc(-1 * var(--space-6));
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
  .hero-visual .phone-hero,
  .hero-visual .hero-video-phone {
    scroll-snap-align: center;
    flex: 0 0 auto;
    width: min(270px, 78vw);
    border-radius: 44px;
  }
  .hero-video-phone { display: block; }

  /* the correction video moved up into the hero, so the feedback section
     becomes a compact centered text band on the dark ground — a deliberate
     visual break. Only that section drops its visual: the course section
     keeps its phones (see below). */
  .call { padding: var(--space-16) 0; }
  .call-in { grid-template-columns: 1fr; }
  .call:not(.call--course) .call-visual { display: none; }
  .call-copy { max-width: 34em; text-align: center; margin: 0 auto; }

  /* course section: the demo video leads, centered above the copy, on the
     same gray band — sized like the hero rail's phones. */
  .call--course .call-visual { order: 1; }
  .call--course .call-copy { order: 2; }
  .call--course .call-phone {
    width: min(270px, 78vw);
    border-radius: 44px;
  }

  .flow-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-6) 0;
  }
  .chal-steps { grid-template-columns: 1fr; gap: var(--space-6); }
  /* 10 cards: 2 columns keep the rows even (3 would orphan the 10th) */
  .langs { grid-template-columns: repeat(2, 1fr); }

  .phone-rail {
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-4);
    margin: 0 calc(-1 * var(--space-6));
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
  .phone-rail figure { scroll-snap-align: center; flex: 0 0 auto; }

  .plans { grid-template-columns: 1fr; }
}

/* Measured, not guessed: "Learn Portuguese" needs 346px at the 43px h1, and the
   copy column stops covering that just under 430px. Below here the language
   takes its own line, so the headline is three lines for every name rather than
   two for some and three for others. */
@media (max-width: 420px) {
  .h1-brk { display: inline; }
}

@media (max-width: 560px) {
  .top-nav { gap: var(--space-4); }
  button.top-link { display: none; }
  .lang-wide { flex-direction: column; text-align: center; gap: var(--space-3); }
  .newsletter-form { flex-direction: column; }
}