/* ============================================================
   Word of the Day — landing pages
   Token set from DESIGN.md, tracked to the design teardown.
   ============================================================ */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-sans-regular.ttf') format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('../fonts/dm-sans-bold.ttf') format('truetype');
}

:root {
  /* elevation ramp: three tiers.
     canvas #0f0f0f / recessed #1a1a1a (phone bezel, active nav chip) /
     raised #1f1f1f (tiles, family cards, badge, secondary button). */
  --canvas: #0f0f0f;
  --surface: #1a1a1a;       /* recessed tier                */
  --surface-card: #1f1f1f;  /* raised tier                  */
  --band: #242424;          /* full-bleed section band (2026-08-21 decision) */
  --border: #2a2a2a;

  /* text: warm, never pure white */
  --text: #f5f2ed;
  --text-muted: #9c9488;

  /* accent: one amber, a handful of uses per viewport */
  --accent: #d4894a;
  --accent-glow: #e8a86c;

  /* type */
  --font: 'DM Sans', 'Apple SD Gothic Neo', 'Hiragino Sans', 'PingFang SC',
          ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: clamp(40px, 6.5vw, 60px);   /* 60px/1.04 600 -0.025em */
  --heading: 19px;                       /* 19px/1.4 600 -0.014em  */
  --body: 15px;                          /* 15px/1.6 400 -0.011em  */
  --caption: 12px;                       /* 12px/1.4 400 -0.006em  */
  --track-display: -0.025em;             /* headings only          */
  --track-heading: -0.014em;             /* section headings       */
  --track-body: -0.011em;                /* body, lede, card titles */
  --track-caption: -0.006em;             /* small, meta            */
  --track-label: 0.44em;                 /* eyebrows, uppercase    */

  /* radii: four values, one job each. No pills. */
  --radius-frame: 40px;  /* device captures        */
  --radius-btn: 12px;    /* store buttons          */
  --radius-card: 8px;    /* badge chips, cards     */
  --radius-xs: 4px;      /* small elements         */

  /* layout */
  --container: 1280px;
  --nav-height: 88px;
  /* section rhythm comes from whitespace (craft bar M7):
     DESIGN.md proposes 160px; 84px reads better on first pass. */
  --section-gap: 84px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  font-size: var(--body);
  scroll-padding-top: calc(var(--nav-height) + 24px);
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: var(--body);
  line-height: 1.6;
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: #0f0f0f; }

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

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 640px) {
  .container { padding: 0 24px; }
}

/* small uppercase labels carry the only positive tracking (craft bar M4,
   DESIGN.md: eyebrow/label 11px uppercase +0.44em) */
.eyebrow {
  display: block;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================== nav ============================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--canvas);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  min-height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
}
.brand img {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-card);
}
.brand-name {
  font-size: var(--body);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 4px;
}
.lang-link {
  font-size: var(--caption);
  line-height: 1.4;
  letter-spacing: var(--track-caption);
  color: var(--text-muted);
  padding: 8px 12px;
  border-radius: var(--radius-card);
  transition: color 120ms ease-out, background-color 120ms ease-out;
}
.lang-link:hover { color: var(--accent-glow); }
.lang-link.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border);
}

@media (max-width: 640px) {
  .lang-link { font-size: 12px; padding: 7px 9px; }
}

/* ============================== hero ============================== */

.hero { padding-top: 64px; }
.hero-copy {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.script-mark {
  margin: 0 0 20px;
  font-size: var(--body);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-muted);
}

.badge {
  display: inline-block;
  font-size: var(--caption);
  line-height: 1.4;
  letter-spacing: var(--track-caption);
  color: var(--text-muted);
  background: var(--surface-card);
  padding: 8px 16px;
  border-radius: var(--radius-card);
  box-shadow: 0 2px 0 0 var(--border);
}

/* exactly one word per headline breaks the type (craft bar M2).
   Translated into our own vocabulary — weight, not italic or color:
   DM Sans only ships Regular/Bold, and amber is reserved for
   share/romanization only (DESIGN.md), so a single word steps down to
   regular weight while its neighbors stay at the heading's own weight. */
.accent {
  font-weight: 400;
}

h1.display {
  font-size: var(--display);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: var(--track-display);
  color: var(--text);
  margin: 28px 0 0;
  text-wrap: balance;
}

.lede {
  font-size: var(--body);
  line-height: 1.6;
  letter-spacing: var(--track-body);
  color: var(--text-muted);
  margin: 24px auto 0;
  max-width: 620px;
  text-wrap: balance;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}

.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 12px 22px 13px;
  border-radius: var(--radius-btn);
  font-family: var(--font);
  transition: background-color 150ms ease-out, color 150ms ease-out,
              box-shadow 150ms ease-out;
}
/* single-line variant: no eyebrow, used where there's no one app to
   name yet (e.g. the multi-app hub's "choose your language" CTA) */
.btn-single {
  flex-direction: row;
  align-items: center;
  padding: 15px 28px;
}
.btn-eyebrow {
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.btn-label {
  font-size: var(--body);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: var(--track-body);
}
.btn-primary {
  background: var(--accent);
  color: #0f0f0f;
}
.btn-primary .btn-eyebrow { color: var(--canvas); }
.btn-primary:hover { background: var(--accent-glow); }
.btn-secondary {
  background: var(--surface-card);
  color: var(--text);
  box-shadow: 0 2px 0 0 var(--border);
}
.btn-secondary .btn-eyebrow { color: var(--text-muted); }
.btn-secondary:hover { box-shadow: 0 2px 0 0 var(--accent-glow); }

.tertiary {
  margin-top: 28px;
  font-size: var(--caption);
  letter-spacing: var(--track-caption);
  color: var(--text-muted);
}
.tertiary a:hover { color: var(--accent-glow); }

/* phone captures: grounded by an inset hairline + a hard flat edge,
   never a drop shadow (locked teardown decision; craft bar M2) */
.phones {
  position: relative;
  margin-top: 96px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(8px, 2vw, 28px);
  padding-bottom: 8px;
}
.phones::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  width: 900px;
  max-width: 100%;
  height: 400px;
  background: radial-gradient(
    ellipse 55% 100% at 50% 100%,
    rgba(26, 26, 26, 0.7),
    rgba(15, 15, 15, 0) 70%
  );
  pointer-events: none;
}
.phone { position: relative; z-index: 1; }
.phone--primary { width: clamp(120px, 32vw, 280px); }
.phone--secondary { width: clamp(95px, 24vw, 200px); }
.phone--tertiary { width: clamp(85px, 20vw, 180px); }

.phone-frame {
  background: var(--surface);
  border-radius: var(--radius-frame);
  padding: 10px;
  /* flat hairline + hard offset edge, not a blur (locked; craft bar M2
     from the prior Duolingo loop). Craft bar M3 (this loop, shadow-only,
     no bezel) tried and reverted — see DESIGN.md Decisions Log 2026-08-21:
     a drop shadow doesn't read against a #0f0f0f canvas. */
  box-shadow: inset 0 0 0 1px var(--border), 0 2px 0 0 var(--border);
}
.phone-frame img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-frame);
}
.phone-figcaption {
  margin-top: 20px;
  text-align: center;
  font-size: var(--caption);
  line-height: 1.4;
  letter-spacing: var(--track-caption);
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .phones { margin-top: 72px; gap: 12px; }
}

/* ============================== sections ============================== */

.section { padding-top: var(--section-gap); }

/* full-bleed band: the section-break device is a color change, not a rule
   (craft bar M5). A hard edge (border-top/bottom), never a fade — and a
   real tonal jump (--band), not a 5% nudge. Deliberate deviation from
   "no ornament" (see DESIGN.md Decisions Log, 2026-08-21). */
.section--band {
  background: var(--band);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--section-gap);
  /* breathing room before the hard edge so the prior section's cards
     never sit flush against the band boundary (craft bar M5 fix) */
  margin-top: 24px;
}

/* one numeral opens a section, nothing else does (craft bar M1).
   Sized as a peer of our own section heading (19px), not borrowed from
   the much larger hero --display scale — a literal size ratio copied
   from the reference would dwarf our own compact heading. */
.section-number {
  display: block;
  font-size: 36px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(245, 242, 237, 0.28);
  margin-bottom: 12px;
}

.section-head { max-width: 560px; margin: 0 auto 44px; text-align: center; }
.section-head h2 {
  font-size: var(--heading);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: var(--track-heading);
  color: var(--text);
  margin: 14px 0 0;
  text-wrap: balance;
}
.section-head p { margin: 14px 0 0; color: var(--text-muted); }

/* ============================== feature tiles ============================== */

.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } }

.tile {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  padding: 36px 32px;
  /* flat 2px offset edge, no blur (locked; craft bar M2 from the prior
     Duolingo loop). Craft bar M3 (this loop, shadow-only) tried and
     reverted — see DESIGN.md Decisions Log 2026-08-21. */
  box-shadow: 0 2px 0 0 var(--border);
}
.tile h3 {
  font-size: var(--body);
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: var(--track-body);
  color: var(--text);
  margin: 16px 0 0;
}
.tile p { margin: 12px 0 0; color: var(--text-muted); }
.tile--quiz {
  display: flex;
  align-items: center;
  gap: 28px;
}
.tile--quiz > * { min-width: 0; }
.tile-copy { flex: 1 1 auto; }
.tile-copy h3 { margin-top: 16px; }
.tile-media {
  width: 96px;
  aspect-ratio: 211 / 460;
  flex: 0 0 auto;
  background: var(--surface);
  border-radius: var(--radius-frame);
  padding: 8px;
  box-shadow: inset 0 0 0 1px var(--border), 0 2px 0 0 var(--border);
}
.tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: calc(var(--radius-frame) - 8px);
}
@media (max-width: 560px) {
  .tile--quiz { flex-direction: column; align-items: flex-start; }
  .tile-media { width: 132px; }
}

/* ============================== index cards ============================== */

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }

.lang-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border-radius: var(--radius-card);
  padding: 32px 28px;
  box-shadow: 0 2px 0 0 var(--border);
  transition: box-shadow 150ms ease-out;
}
.lang-card:hover { box-shadow: 0 2px 0 0 var(--accent-glow); }
.lang-card h3 {
  font-size: var(--body);
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: var(--track-body);
  color: var(--text);
  margin: 0;
}
.lang-card p { margin: 10px 0 0; font-size: var(--body); }
.lang-card .more {
  margin-top: auto;
  padding-top: 24px;
  font-size: var(--caption);
  letter-spacing: var(--track-caption);
  color: var(--text);
}
.lang-card:hover .more { color: var(--accent-glow); }

/* ============================== legal pages ============================== */

.legal {
  padding-top: 64px;
  padding-bottom: var(--section-gap);
}
.legal-inner {
  max-width: 720px;
  margin: 0 auto;
}
.legal-back {
  display: inline-block;
  font-size: var(--caption);
  line-height: 1.4;
  letter-spacing: var(--track-caption);
  color: var(--text-muted);
  margin-bottom: 32px;
}
.legal-back:hover { color: var(--accent-glow); }
.legal h1 {
  font-size: clamp(28px, 4.5vw, 44px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: var(--track-display);
  color: var(--text);
  margin: 0 0 12px;
  text-wrap: balance;
}
.legal .legal-updated {
  font-size: var(--caption);
  line-height: 1.4;
  letter-spacing: var(--track-caption);
  color: var(--text-muted);
  margin: 0 0 44px;
}
.legal h2 {
  font-size: var(--heading);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: var(--track-heading);
  color: var(--text);
  margin: 36px 0 10px;
}
.legal p {
  font-size: var(--body);
  line-height: 1.6;
  letter-spacing: var(--track-body);
  color: var(--text-muted);
  margin: 0 0 14px;
}
.legal a {
  color: var(--accent);
}
.legal a:hover { color: var(--accent-glow); }
.legal ul {
  margin: 0 0 14px;
  padding-left: 20px;
}
.legal li {
  font-size: var(--body);
  line-height: 1.6;
  letter-spacing: var(--track-body);
  color: var(--text-muted);
  margin: 0 0 8px;
}

/* ============================== footer ============================== */

.footer {
  padding-top: var(--section-gap);
  padding-bottom: 56px;
}
.footer-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.offer {
  font-size: var(--body);
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: var(--track-body);
  color: var(--text);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 32px;
  margin-top: 24px;
  font-size: var(--caption);
  letter-spacing: var(--track-caption);
  color: var(--text-muted);
}
.footer-links a:hover { color: var(--accent-glow); }
.footer-copy {
  margin-top: 36px;
  font-size: var(--caption);
  letter-spacing: var(--track-caption);
  color: var(--text-muted);
  opacity: 0.75;
}