/*
 * Lettover marketing site — design system CSS (site-plan.md §2).
 * Mobile-first. Breakpoints: 640px / 960px / 1200px. Zero !important.
 * No external url() references — fonts/images are all same-origin,
 * per the production CSP (site/public/_headers, owned by T5).
 *
 * Contrast audit (WCAG 2.1 "4.5:1 normal text" — computed from the sRGB
 * hex values below, not eyeballed):
 *   --text        #F2ECE0 on --bg      #0C2126  -> 14.15:1  (body copy)
 *   --text        #F2ECE0 on --surface #1C3D46  ->  9.89:1  (card copy)
 *   --text        #F2ECE0 on --surface-hover #245059 -> 7.54:1 (hovered card)
 *   --text-secondary #9FB8BC on --bg      #0C2126 ->  7.97:1  (nav/footer/meta text)
 *   --text-secondary #9FB8BC on --surface #1C3D46 ->  5.57:1  (card secondary text)
 *   --link        #FFD45E on --bg      #0C2126  -> 11.76:1  (body links)
 *   --link        #FFD45E on --surface #1C3D46  ->  8.22:1  (card links)
 *   --gold-text   #3D2A05 on --gold-end   #F59E1B -> 6.39:1  (CTA button, worst-case end of gradient)
 *   --gold-text   #3D2A05 on --gold-start #FFC53D -> 8.69:1  (CTA button, start of gradient)
 *   --warn-text   #FFB3B3 on --warn-fill  #5E2430 -> 6.97:1  (legal/delete-account warning box)
 *   --tile-letter #3B2F23 on tile face  #FFF6E3   -> 12.09:1 (motif letter, decorative)
 *   --tile-letter #3B2F23 on tile face  #FFE9C4   -> 10.95:1 (motif letter, bottom gradient stop)
 * All real text pairs clear 4.5:1 (most clear the stricter 7:1). The one
 * sub-4.5 colour, --text-muted (#5E7A80, 3.62:1 on --bg) is intentionally
 * decorative-only per site-plan.md §2 and is never used for text content
 * here — only for hairlines/dividers where WCAG contrast does not apply.
 */

/* ---------------------------------------------------------------------
   Fonts — self-hosted Nunito subset (latin + Turkish + ₺ × →), swap.
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Nunito-400.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0100-017F, U+2000-206F, U+2190-2193, U+20BA;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/Nunito-700.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0100-017F, U+2000-206F, U+2190-2193, U+20BA;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/Nunito-800.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0100-017F, U+2000-206F, U+2190-2193, U+20BA;
}

/* ---------------------------------------------------------------------
   Design tokens
   --------------------------------------------------------------------- */
:root {
  /* Page / surfaces */
  --bg: #0C2126;
  --bg-top: #16343C;
  --bg-brand: #1C4049;
  --surface: #1C3D46;
  --surface-hover: #245059;
  --hairline: rgba(255, 255, 255, 0.08);
  --halo: rgba(57, 160, 166, 0.18);

  /* Text */
  --text: #F2ECE0;
  --text-secondary: #9FB8BC;
  --text-muted: #5E7A80; /* decorative only — do not use for text content */

  /* Gold / CTA */
  --gold-start: #FFC53D;
  --gold-end: #F59E1B;
  --gold-text: #3D2A05;
  --link: #FFD45E;
  --focus: #FFC53D;

  /* Warning */
  --warn-border: #FF6B6B;
  --warn-fill: #5E2430;
  --warn-text: #FFB3B3;

  /* Tile material */
  --tile-face-1: #FFFAF0;
  --tile-face-2: #FFF6E3;
  --tile-face-3: #FFE9C4;
  --tile-letter: #3B2F23;
  --tile-layer-1: #E9C88F;
  --tile-layer-2: #D3AC74;
  --tile-layer-3: #B98F57;
  --tile-edge: rgba(255, 246, 227, 0.55);
  --tile-shadow: rgba(4, 20, 24, 0.45);
  --tile-chip: #F6C445;

  /* Radii */
  --radius-container: 22px;
  --radius-card: 16px;
  --radius-pill: 999px;

  /* Layout */
  --container-w: 1120px;
  --legal-w: 720px;

  font-family: 'Nunito', ui-rounded, system-ui, -apple-system, sans-serif;
}

/* ---------------------------------------------------------------------
   Reset / base
   --------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  line-height: 1.1;
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}

p {
  margin: 0 0 1em;
}

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

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

ul, ol {
  padding-left: 1.3em;
}

li + li {
  margin-top: 0.4em;
}

code {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.92em;
}

/* Visible focus ring on every interactive element */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .motif .tile {
    animation: lettover-bob 2400ms ease-in-out infinite;
  }
  .motif-row .tile:nth-child(1) { animation-delay: 0ms; }
  .motif-row .tile:nth-child(2) { animation-delay: 140ms; }
  .motif-row .tile:nth-child(3) { animation-delay: 280ms; }
  .motif-row .tile:nth-child(4) { animation-delay: 420ms; }
  .motif-row .tile:nth-child(5) { animation-delay: 560ms; }
  .motif-row .tile:nth-child(6) { animation-delay: 700ms; }
  .motif-row .tile:nth-child(7) { animation-delay: 840ms; }
  .motif-row .tile:nth-child(8) { animation-delay: 980ms; }
}

@keyframes lettover-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* ---------------------------------------------------------------------
   Header / footer chrome (shared by every page — site/src/layout.mjs)
   --------------------------------------------------------------------- */
.site-header,
.site-footer {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 20px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.site-header {
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}

.brand-mark {
  border-radius: 22%;
}

.wordmark {
  font-family: 'Nunito', ui-rounded, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.wordmark-lett {
  color: var(--text);
}

.wordmark-over {
  color: #F5A11B;
}

.site-nav {
  /* The page is short and the footer repeats every one of these links, so
     below 640px (where the nav would otherwise wrap onto its own row
     under the logo, cramped between it and the language switcher) the
     nav is hidden entirely and the header stays a clean single row:
     logo/wordmark left, language switcher right. */
  display: none;
  gap: 20px;
  flex-wrap: wrap;
}

@media (min-width: 640px) {
  .site-nav {
    display: flex;
  }
}

.site-nav a,
.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
}

.site-nav a:hover,
.footer-links a:hover {
  color: var(--text);
  text-decoration: underline;
}

.lang-switcher {
  display: inline-flex;
  gap: 4px;
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: 4px;
}

.lang-switcher a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}

.lang-switcher a[aria-current='page'] {
  background: linear-gradient(180deg, var(--gold-start), var(--gold-end));
  color: var(--gold-text);
}

.site-footer {
  flex-direction: column;
  align-items: flex-start;
  border-top: 1px solid var(--hairline);
  margin-top: 40px;
  padding-top: 32px;
  padding-bottom: 48px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
}

.footer-contact a {
  color: var(--link);
}

.footer-copyright {
  margin: 0;
}

.footer-no-tracking {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
}

@media (min-width: 640px) {
  .site-footer {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .footer-no-tracking {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------
   Motif — LETTOVER stacking tiles (site/src/partials/motif.mjs)
   --------------------------------------------------------------------- */
.motif {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

.motif-row {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.motif--hero {
  --tile-size: clamp(28px, 7vw, 56px);
  --tile-layer-step: clamp(5px, 1.3vw, 10px);
  padding: 12px 0 28px;
}

.motif--small {
  --tile-size: 22px;
  --tile-layer-step: 4px;
}

.tile {
  position: relative;
  width: var(--tile-size);
  height: var(--tile-size);
  display: inline-block;
}

/* Extra footprint below the face per stack layer, so taller tiles occupy
   more vertical space and the row stays bottom-aligned. */
.tile--h2 { height: calc(var(--tile-size) + var(--tile-layer-step)); }
.tile--h3 { height: calc(var(--tile-size) + var(--tile-layer-step) * 2); }
.tile--h4 { height: calc(var(--tile-size) + var(--tile-layer-step) * 3); }
.tile--h5 { height: calc(var(--tile-size) + var(--tile-layer-step) * 4); }

.tile-layer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--tile-size);
  border-radius: 22%;
  box-shadow: inset 0 1px 0 var(--tile-edge);
}

.tile-layer:nth-of-type(1) { bottom: 0; background: var(--tile-layer-1); }
.tile-layer:nth-of-type(2) { bottom: var(--tile-layer-step); background: var(--tile-layer-2); }
.tile-layer:nth-of-type(3) { bottom: calc(var(--tile-layer-step) * 2); background: var(--tile-layer-3); }
.tile-layer:nth-of-type(4) { bottom: calc(var(--tile-layer-step) * 3); background: var(--tile-layer-3); }

.tile-face {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--tile-size);
  border-radius: 22%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(165deg, var(--tile-face-1) 0%, var(--tile-face-2) 45%, var(--tile-face-3) 100%);
  box-shadow: 0 2px 6px var(--tile-shadow);
}

.tile--h2 .tile-face, .tile--h3 .tile-face, .tile--h4 .tile-face, .tile--h5 .tile-face {
  box-shadow: 0 4px 10px var(--tile-shadow);
}

.tile-letter {
  font-weight: 800;
  font-size: calc(var(--tile-size) * 0.52);
  color: var(--tile-letter);
  line-height: 1;
}

.tile-chip {
  position: absolute;
  top: calc(var(--tile-size) * -0.3);
  right: calc(var(--tile-size) * -0.22);
  width: calc(var(--tile-size) * 0.52);
  height: calc(var(--tile-size) * 0.52);
  border-radius: 50%;
  background: var(--tile-chip);
  border: 2px solid var(--tile-face-1);
  color: var(--tile-letter);
  font-weight: 800;
  font-size: calc(var(--tile-size) * 0.26);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 24px 20px 56px;
  text-align: center;
  background:
    radial-gradient(60% 50% at 50% 18%, var(--halo), transparent 70%),
    linear-gradient(180deg, var(--bg-brand) 0%, var(--bg-top) 42%, var(--bg) 100%);
  border-radius: 0 0 var(--radius-container) var(--radius-container);
  overflow: hidden;
}

.hero-subtitle {
  max-width: 640px;
  margin: 0 auto 24px;
  color: var(--text-secondary);
  font-size: 1.05rem;
}

.cta-caption {
  margin: 14px 0 0;
  color: var(--text-secondary);
  font-size: 0.88rem;
}

.hero-shot {
  margin: 36px auto 0;
  max-width: 280px;
}

.hero-shot img {
  border-radius: var(--radius-card);
  margin: 0 auto;
}

/* No hero phone shot yet (site.config.mjs screenshots.real === false) —
   give the CTA a little extra breathing room below so the hero still
   reads as a complete, intentional composition rather than one that's
   missing its bottom half. */
.hero--no-shot {
  padding-bottom: 40px;
}

.hero--no-shot .cta-caption {
  margin-bottom: 4px;
}

@media (min-width: 960px) {
  .hero {
    padding: 48px 32px 72px;
  }

  .hero--no-shot {
    padding-bottom: 56px;
  }
}

/* ---------------------------------------------------------------------
   Store buttons (site/src/partials/storeButtons.mjs)
   --------------------------------------------------------------------- */
.store-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 24px 0 0;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--text);
}

.store-btn.is-soon {
  color: var(--text-secondary);
  cursor: default;
}

.store-btn-glyph {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--text-muted);
  opacity: 0.6;
  flex: none;
}

.store-btn.is-live img {
  height: 40px;
  width: auto;
}

.store-btn.is-primary {
  border-color: var(--gold-end);
  background: linear-gradient(180deg, var(--gold-start), var(--gold-end));
  color: var(--gold-text);
}

.store-btn.is-primary .store-btn-glyph {
  background: var(--gold-text);
  opacity: 0.4;
}

/* ---------------------------------------------------------------------
   Generic section rhythm + "card" surface used across home/legal
   --------------------------------------------------------------------- */
.home > section,
.not-found,
.support {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 48px 20px;
}

.home > section > h2 {
  text-align: center;
  margin-bottom: 8px;
}

.section-lede {
  text-align: center;
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto 32px;
}

.card {
  background: var(--surface);
  border-radius: var(--radius-card);
  border-top: 1px solid var(--hairline);
  padding: 20px 24px;
}

/* How to play */
.steps {
  display: grid;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 20px 20px 20px 56px;
  position: relative;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 18px;
  top: 20px;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-start), var(--gold-end));
  color: var(--gold-text);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.steps h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.steps p {
  margin: 0;
  color: var(--text-secondary);
}

@media (min-width: 640px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Features grid */
.features-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
  margin: 0;
}

.features-grid li {
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 20px;
  margin: 0;
}

.feature-title {
  margin: 0 0 6px;
  font-weight: 700;
}

.feature-desc {
  margin: 0;
  color: var(--text-secondary);
  font-weight: 400;
  font-size: 0.88rem;
  line-height: 1.5;
}

@media (min-width: 640px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .features-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Screenshots strip */
.shots {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 16px;
  margin: 0;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}

.shots li {
  flex: none;
  scroll-snap-align: start;
  width: 220px;
  text-align: center;
}

.phone {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 8px;
  margin: 0 0 10px;
}

.phone img {
  border-radius: 14px;
  width: 100%;
  height: auto;
}

.shots figcaption {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* Trust block */
.trust {
  text-align: center;
}

.trust .card {
  text-align: left;
  max-width: 760px;
  margin: 0 auto;
}

.trust-links {
  margin: 0;
  font-weight: 700;
}

/* FAQ */
.faq {
  max-width: 760px;
}

.faq details {
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 4px 20px;
  margin-bottom: 12px;
}

.faq summary {
  cursor: pointer;
  font-weight: 700;
  padding: 16px 0;
}

.faq details p {
  color: var(--text-secondary);
  margin: 0 0 16px;
}

/* ---------------------------------------------------------------------
   Legal pages (/privacy, /terms, /delete-account) — site/src/pages/
   legal.mjs + deleteAccount.mjs render these classes (T4), and the
   fragment extracted from docs/store/account-deletion.html also relies
   on .card/.warn/.steps/code/table/footer below.
   --------------------------------------------------------------------- */
.legal {
  max-width: var(--legal-w);
  margin: 0 auto;
  padding: 40px 20px 80px;
}

.legal h1 {
  margin-bottom: 4px;
}

.legal .meta {
  color: var(--text-secondary);
  margin: 0 0 24px;
  font-size: 0.92rem;
}

.notice-tr {
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  margin: 0 0 32px;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.notice-tr a {
  color: var(--link);
}

.toc {
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 16px 24px;
  margin: 0 0 32px;
}

.toc ol, .toc ul {
  margin: 0;
  padding-left: 1.2em;
  columns: 1;
}

@media (min-width: 640px) {
  .toc ol, .toc ul {
    columns: 2;
    column-gap: 24px;
  }
}

.legal h2[id] {
  margin-top: 2.2em;
  padding-top: 0.6em;
  border-top: 1px solid var(--hairline);
  scroll-margin-top: 24px;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 0.92rem;
}

.legal th, .legal td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

.legal th {
  color: var(--text-secondary);
  font-weight: 700;
}

.legal blockquote {
  margin: 16px 0;
  padding: 4px 20px;
  border-left: 3px solid var(--hairline);
  color: var(--text-secondary);
}

.legal .card {
  margin: 16px 0;
}

.legal .warn {
  background: var(--warn-fill);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  margin: 16px 0;
  color: var(--warn-text);
}

.legal .warn strong {
  color: var(--warn-border);
}

.legal .steps {
  display: block;
  counter-reset: step;
}

.legal .steps li {
  counter-increment: step;
  list-style: none;
  position: relative;
  padding-left: 2.2em;
  margin: 0 0 14px;
  background: none;
  border: none;
  border-radius: 0;
}

.legal .steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  font-size: 0.8em;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.legal footer {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* ---------------------------------------------------------------------
   Support page
   --------------------------------------------------------------------- */
.support h2 {
  margin-top: 1.4em;
}

.support h2:first-of-type {
  margin-top: 0;
}

.support .card {
  margin: 16px 0 32px;
}

/* ---------------------------------------------------------------------
   404
   --------------------------------------------------------------------- */
.not-found {
  text-align: center;
}

.not-found .motif {
  margin-bottom: 24px;
}

/* ---------------------------------------------------------------------
   Breakpoint-driven container polish
   --------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .hero,
  .home > section,
  .support,
  .not-found {
    padding-left: 32px;
    padding-right: 32px;
  }
}