/* tuto marketing site — riso-print static styles.
   Reproduces the design comp (Tuto Marketing Site.dc.html) without the design-tool
   component bundle: every x-import component is rebuilt as a plain CSS class here.
   Tokens mirror mobile/constants/theme.ts. No build step. */

:root {
  color-scheme: light;

  /* Fonts. Noto Sans SC covers the Chinese example glyphs Acme/Plex lack. */
  --font-display: 'Acme', 'Noto Sans SC', system-ui, sans-serif;
  --font-sans: 'IBM Plex Sans', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Motion (not defined in theme.ts; chosen). */
  --dur-fast: 140ms;

  /* Substrate & ink */
  --paper: #F7F1E3;
  --paper-deep: #EFE6D2;
  --card: #FFFDF7;
  --ink: #241E1A;

  /* Ink alphas */
  --ink-soft: rgba(36, 30, 26, .62);
  --ink-mute: rgba(36, 30, 26, .55);
  --ink-faint: rgba(36, 30, 26, .42);
  --ink-ghost: rgba(36, 30, 26, .28);
  --ink-rule: rgba(36, 30, 26, .16);

  /* Spot inks */
  --orange: #F26522;
  --orange-hover: #DB5714;
  --yellow: #FFB511;
  --red: #F15060;
  --blue: #0F7DC2;
  --green: #00A95C;
  --purple: #7B5EA7;
  --plum: #8A2D5A;
  --wrong-strike: #D8323F;
  --correct-text: #00854A;

  /* SRS status dots */
  --srs-learning: #FFB511;
  --srs-reviewing: #0F7DC2;
  --srs-mastered: #00A95C;

  /* Chrome */
  --border: 1.5px solid var(--ink);
  --radius-card: 12px;
  --radius-btn: 10px;
  --radius-input: 8px;
  --shadow-card: 3px 3px 0 rgba(36, 30, 26, .13);
  --shadow-hard: 3px 3px 0 var(--ink);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--orange-hover); text-decoration: underline; }
::selection { background: var(--yellow); }
input::placeholder, textarea::placeholder { color: rgba(36, 30, 26, .42); }

/* ─── Grain overlay ─── */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* Everything above the grain */
.page { position: relative; z-index: 2; min-height: 100vh; }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding-left: 30px;
  padding-right: 30px;
}

/* ─── Shared type helpers ─── */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.label-mono {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ─── Wordmark ─── */
.wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  margin: 0;
}
/* riso misregistration: offset colour ghosts behind the ink */
.wordmark--mis {
  position: relative;
  display: inline-block;
}
.wordmark--mis::before,
.wordmark--mis::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.wordmark--mis::before { color: var(--orange); transform: translate(2px, 2px); }
.wordmark--mis::after { color: var(--blue); transform: translate(-2px, -1px); }

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 600;
  border: var(--border);
  border-radius: var(--radius-btn);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translate(3px, 3px); box-shadow: none !important; }
.btn--primary {
  background: var(--orange);
  color: var(--card);
  box-shadow: var(--shadow-hard);
}
.btn--primary:hover { color: var(--card); background: var(--orange-hover); }
.btn--outline {
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}
.btn--outline:hover { color: var(--ink); background: var(--paper-deep); }
.btn--sm { font-size: 13px; padding: 8px 14px; border-radius: 8px; }
.btn--lg { font-size: 16px; padding: 14px 26px; }
.btn--block { width: 100%; }

/* ─── Header ─── */
.site-header {
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
  position: relative;
  z-index: 5;
}
.site-header .wrap {
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.site-header .wordmark { font-size: 30px; }
.header-right { display: flex; align-items: center; gap: 16px; }
.header-right .eyebrow { font-size: 10.5px; letter-spacing: .18em; }

/* ─── Hero ─── */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 52px;
  align-items: start;
  padding-top: 64px;
  padding-bottom: 74px;
}
.hero-cta { margin-top: 30px; }
.hero h1 {
  font-family: var(--font-display);
  font-size: 60px;
  line-height: 1.05;
  margin: 20px 0 22px;
  font-weight: 400;
  text-wrap: pretty;
}
.hero .eyebrow { margin-bottom: 0; }
.hero p {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 30em;
  text-wrap: pretty;
}

/* ─── Waitlist card ─── */
.waitlist-card {
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.waitlist-card .inner { padding: 24px 26px 26px; }
.waitlist-card h2 {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.1;
  margin: 0 0 6px;
  font-weight: 400;
}
.waitlist-card .lede {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 22px;
}
.field { margin-bottom: 22px; }
.field .label-mono { margin-bottom: 8px; }
.hint {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-faint);
  margin: 18px 0 2px;
  text-align: center;
}
/* No reassurance copy by default — this element only shows form status/errors,
   so collapse it entirely until JS writes a message into it. */
.hint:empty { display: none; }

/* Inputs */
.input, .select, .textarea {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius-input);
  width: 100%;
  box-sizing: border-box;
}
.input { font-size: 15px; padding: 12px 14px; }
.textarea { font-size: 15px; padding: 12px 14px; line-height: 1.5; resize: vertical; min-height: 86px; }
.select { appearance: none; cursor: pointer; }
.select--lang { font-size: 17px; font-weight: 500; padding: 16px 46px 16px 16px; }
.select--sm { font-size: 15px; padding: 12px 14px; }
.select-wrap { position: relative; }
.select-wrap .chevron {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  font-size: 19px;
  line-height: 1;
  color: var(--ink-soft);
  pointer-events: none;
}
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; }

/* Sent confirmation */
.sent { padding: 34px 26px 36px; text-align: center; }
.sent .big {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.15;
  margin-bottom: 8px;
}
.sent p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 26em;
}
[hidden] { display: none !important; }

/* ─── Languages section ─── */
.languages {
  border-top: 1.5px solid var(--ink-rule);
  border-bottom: 1.5px solid var(--ink-rule);
  background: var(--paper-deep);
}
.languages .wrap { padding-top: 44px; padding-bottom: 48px; }
.languages-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.languages-head .eyebrow.dim { color: var(--ink-faint); letter-spacing: .16em; }
.lang-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.lang-card {
  border: 1.5px solid var(--ink-ghost);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: var(--paper);
  box-shadow: none;
  transition: box-shadow var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
.lang-card:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.lang-card[aria-pressed="true"] {
  background: var(--card);
  border: var(--border);
  box-shadow: var(--shadow-card);
}
.lang-card .native {
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* MotifBand */
.motif {
  position: relative;
  overflow: hidden;
  padding: 18px 16px;
  border-bottom: var(--border);
}
.motif::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .12) 0 8px, transparent 8px 16px);
  pointer-events: none;
}
.motif .name {
  position: relative;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--card);
}
.motif--vi { background: var(--red); }
.motif--fr { background: var(--blue); }
.motif--es { background: var(--green); }
.motif--zh { background: var(--plum); }

/* ─── Feature sections ─── */
.feature { padding-top: 78px; padding-bottom: 24px; }
.feature-split {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: start;
}
.feature h2 {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.1;
  margin: 16px 0 18px;
  font-weight: 400;
  text-wrap: pretty;
}
.feature p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 14px;
  max-width: 34em;
  text-wrap: pretty;
}
.feature p:last-child { margin-bottom: 0; }
.feature-aside { display: flex; flex-direction: column; gap: 12px; }
.feature-aside .cap { color: var(--ink-mute); }

/* Journal steps */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 52px;
}
.step { min-width: 0; }
.step-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 12px;
  /* Reserve two lines so a wrapping label doesn't push its image box down —
     keeps the tops of all three step images aligned. */
  min-height: calc(2 * 10.5px * 1.5);
}
.step-label .num { color: var(--ink); }

/* image-slot — holds a phone screenshot, or a captioned placeholder when a
   language has no screenshot for that step. The 960:2079 aspect keeps every
   slot the same size (image or placeholder) so the 3-up step row stays aligned. */
.image-slot {
  width: 100%;
  aspect-ratio: 960 / 2079;
  border: 1.5px dashed var(--ink-ghost);
  border-radius: 26px;
  background: var(--paper-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-faint);
}
.image-slot.has-img {
  padding: 0;
  border-style: solid;
  border-color: var(--ink-rule);
  background: transparent;
}
.image-slot.has-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}

/* ─── Word bank feature ─── */
.wordbank {
  padding-top: 60px;
  padding-bottom: 78px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 56px;
  align-items: center;
}
.wordbank h2 { margin-top: 16px; }
.entry-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 520px;
  margin-top: 8px;
}
.stat-row {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  max-width: 520px;
}
.wordbank-aside {
  position: relative;
  width: 100%;
  max-width: 340px;
  justify-self: center;
}

/* CorrectionCard — mirrors the in-app Corrections card (journal.tsx):
   original + arrow + fixed on one wrapping row (red struck → green), and the
   explanation in a paperDeep sub-panel below a divider. */
.correction {
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.correction-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 14px;
  font-size: 15px;
  line-height: 1.5;
}
.correction .c-orig {
  color: var(--wrong-strike);
  text-decoration: line-through;
}
.correction .c-arrow { color: var(--ink-faint); }
.correction .c-fixed {
  font-weight: 600;
  color: var(--correct-text);
}
.correction-bottom {
  background: var(--paper-deep);
  border-top: 1.5px solid var(--ink-rule);
  padding: 14px;
}
.correction .c-why {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* EntryCard (dense) */
.entry {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  padding: 12px 14px;
}
.entry .dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid var(--ink);
}
.entry .dot--learning { background: var(--srs-learning); }
.entry .dot--reviewing { background: var(--srs-reviewing); }
.entry .dot--mastered { background: var(--srs-mastered); }
.entry .body { min-width: 0; flex: 1; }
.entry .term { font-size: 15px; font-weight: 600; }
.entry .def { font-size: 13px; color: var(--ink-soft); }
.entry .meta {
  flex: 0 0 auto;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.5;
}

/* StatCard */
.stat {
  flex: 1;
  background: var(--card);
  border: var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  padding: 12px 14px;
}
.stat .value { font-family: var(--font-display); font-size: 28px; line-height: 1; }
.stat .value .unit { font-size: 16px; }
.stat .caption {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 6px;
  line-height: 1.4;
}

/* ─── Closing CTA ─── */
.closing { border-top: 2px solid var(--ink); }
.closing .wrap { padding-top: 64px; padding-bottom: 70px; text-align: center; }
.closing .wordmark { font-size: 64px; }
.closing .cta-gap { height: 26px; }

/* ─── Footer ─── */
.site-footer { border-top: 1.5px solid var(--ink-rule); }
.site-footer .wrap {
  padding-top: 22px;
  padding-bottom: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-faint);
}
.site-footer a { color: var(--ink-faint); }
.site-footer .links { display: flex; gap: 18px; }

/* ─── Responsive ─── */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 36px; padding-top: 40px; padding-bottom: 48px; }
  .hero h1 { font-size: 42px; }
  .lang-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-split { grid-template-columns: 1fr; gap: 32px; }
  .steps { grid-template-columns: 1fr; }
  .wordbank { grid-template-columns: 1fr; gap: 36px; }
  .wordbank-aside { max-width: 100%; }
  .feature h2 { font-size: 32px; }
  /* Single-column: keep phone shots phone-sized and centered instead of full-bleed. */
  .image-slot { max-width: 300px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 520px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .lang-grid { grid-template-columns: 1fr; }
  .languages-head { flex-direction: column; gap: 6px; }
  .stat-row { flex-wrap: wrap; }
  .hero h1 { font-size: 36px; }
}