/* Letter Forge product page — warm cream + dark brown, yellow accent */

:root {
  --ink: #2d1f15;
  --ink-muted: #6e5a48;
  --paper: #faf3e3;
  --paper-warm: #f1e4c4;
  --paper-soft: #ece0c0;
  --rule: #e2d2ad;
  --rule-strong: #cdb888;
  --accent: #d4a017;
  --accent-deep: #a87f0e;
  --accent-soft: #fbe9b7;
  --tile-shadow: rgba(60, 35, 10, 0.18);
  --max: 1600px;
  --gutter: 1.5rem;
}
@media (min-width: 1024px) { :root { --gutter: 2.5rem; } }

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--paper); color: var(--ink);
  font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Inter, system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
}
html { scroll-behavior: smooth; scroll-padding-top: 4rem; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
strong { font-weight: 600; }
.mono { font-family: "Cascadia Code", "Consolas", "SF Mono", ui-monospace, monospace; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* HEADER / NAV */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.site-header .container {
  height: 48px;
  display: flex; align-items: center; gap: 24px;
}
.brand { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.brand-logo { height: 24px; width: auto; }
.brand::after {
  content: "Letter Forge";
  font-size: 15px; color: var(--ink); font-weight: 400;
  letter-spacing: -0.005em;
}
.site-nav {
  display: flex; align-items: center; gap: 4px;
  font-size: 13px;
  margin-left: auto;
}
.site-nav a {
  padding: 8px 12px;
  transition: text-decoration 0.15s;
}
.site-nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.site-nav a.active { font-weight: 600; text-decoration: underline; text-underline-offset: 6px; }

/* HERO */
.hero {
  background: var(--paper-warm);
  padding: 40px 0 56px;
}
@media (min-width: 768px) { .hero { padding: 56px 0 80px; } }
.hero-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 900px) {
  .hero-container { grid-template-columns: 1.1fr 1fr; gap: 48px; }
}
.hero-content { max-width: 38rem; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
  padding: 4px 10px;
  background: var(--paper); border: 1px solid var(--rule);
  margin-bottom: 16px;
}
.dot-live {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 999px; background: var(--accent);
}
.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin-bottom: 16px;
}
.hero h1 .line { display: block; }
.hero h1 .accent { color: var(--accent-deep); }
.hero-lead {
  font-size: 16px; line-height: 1.6;
  margin: 0 0 20px 0;
}
@media (min-width: 768px) { .hero-lead { font-size: 17px; } }
.hero-meta {
  list-style: none; padding: 0; margin: 24px 0 0 0;
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 12px; font-weight: 500;
}
.hero-meta li {
  padding: 4px 10px;
  background: var(--paper); border: 1px solid var(--rule);
  color: var(--ink);
}
.hero-meta strong { font-weight: 600; }

.hero-visual {
  position: relative;
  background: #f4ecd8;
  border: 1px solid var(--rule);
  aspect-ratio: 1024/500;
  overflow: hidden;
}
.hero-visual img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------- CSS-only stylized 5×5 board (replaces hero-graphic.png).
   A miniature of the actual game board with tile colors that match the
   in-app palette. Spells FORGE / RAYS / WORDS / PLAY across the rows so
   the visual carries the brand without needing a screenshot. */
.hero-board {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  background: #b8956a;                /* warm brown like the in-app board frame */
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 28px 60px rgba(60, 35, 10, 0.22),
              inset 0 1px 0 rgba(255, 240, 210, 0.35);
  /* Sized by its content — cells force square below, so the board's
     height auto-fits and we never end up with row 5 squashed or
     overflowing because of subpixel-rounding the way aspect-ratio:1
     on the container did. */
}
.hero-board .grid5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* No grid-template-rows — let row heights come from the cells'
     aspect-ratio:1 below. Equal-width columns + aspect-ratio cells
     give 5 perfectly-square rows of identical size. */
  gap: 8px;
  width: 100%;
}
.hero-board .cell {
  border-radius: 11px;
  background: #d4bd95;                /* warm cream — matches in-app empty cell */
  display: grid;
  place-items: center;
  font-size: clamp(20px, 4vw, 32px);
  font-weight: 900;
  color: #3b2a18;
  letter-spacing: 0.5px;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  box-shadow: inset 0 -3px 0 rgba(60, 35, 10, 0.08);
  /* Force perfect square cells. Combined with `grid-template-columns:
     repeat(5, 1fr)` above (no `grid-template-rows`), every cell is
     guaranteed identical width and height — fixes the row-5 wobble
     that subpixel-rounded fractional rows produced. */
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
}
.hero-board .cell.t {
  box-shadow: 0 3px 0 rgba(60, 35, 10, 0.22),
              inset 0 -2px 0 rgba(60, 35, 10, 0.14),
              inset 0 1px 0 rgba(255, 255, 255, 0.30);
  color: #2a1d10;
}
/* Tile color variants — matched to the in-app palette */
.hero-board .cell.t1 { background: #f2b07a; }   /* warm peach */
.hero-board .cell.t2 { background: #e0a3c8; }   /* dusty pink */
.hero-board .cell.t3 { background: #95c8e9; }   /* soft sky */
.hero-board .cell.t4 { background: #97d18a; }   /* mint */
.hero-board .cell.t5 { background: #c8aef0; }   /* lavender */
/* The wrapper just centers the board and removes the old image-style
   chrome. No aspect-ratio — the board sizes itself via cell aspect-
   ratio so the wrapper just contains. */
.hero-visual.hero-board-wrap {
  aspect-ratio: auto;
  background: transparent;
  border: none;
  overflow: visible;
  display: grid;
  place-items: center;
  padding: 8px;
}

/* SECTIONS */
.section {
  padding: 48px 0;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
@media (min-width: 768px) { .section { padding: 72px 0; } }

.section-features { background: var(--paper-warm); }
.section-faq { background: var(--paper-warm); }

.eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 600;
  color: var(--ink); margin-bottom: 12px;
}
.section h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.1; letter-spacing: -0.015em;
  max-width: 36rem;
  margin: 0 0 32px 0;
}
.section-note {
  font-size: 13px; color: var(--ink-muted); margin: 20px 0 0 0;
}

/* HOW IT WORKS */
.how-steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr; gap: 16px;
}
@media (min-width: 768px) { .how-steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.how-steps li {
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.step-num {
  display: inline-block;
  font-size: 12px; font-weight: 600; color: var(--accent-deep);
  letter-spacing: 0.08em;
}
.how-steps h3 {
  font-size: 1.2rem; letter-spacing: -0.01em;
}
.how-steps p { margin: 0; font-size: 14.5px; color: var(--ink-muted); line-height: 1.55; }

/* FEATURES GRID */
.features-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr; gap: 16px;
}
@media (min-width: 640px) { .features-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .features-grid { grid-template-columns: repeat(3, 1fr); } }
.features-grid li {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 24px;
  transition: box-shadow 0.18s ease;
}
.features-grid li:hover { box-shadow: 0 2px 12px var(--tile-shadow); }
.features-grid h3 {
  font-size: 1.15rem; margin: 0 0 8px 0; letter-spacing: -0.005em;
}
.features-grid p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-muted); }

/* LANGUAGES STRIP */
.langs-strip {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 8px 12px;
  font-size: 14.5px; font-weight: 500;
}
.langs-strip li {
  padding: 8px 16px;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
}

/* SCREENSHOTS */
.shots-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (min-width: 1024px) { .shots-grid { grid-template-columns: repeat(4, 1fr); } }
.shot {
  position: relative;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  aspect-ratio: 9/16;
  overflow: hidden;
  transition: box-shadow 0.18s ease;
}
.shot:hover { box-shadow: 0 4px 14px var(--tile-shadow); }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-caption {
  position: absolute; left: 12px; bottom: 12px;
  font-size: 11px; font-weight: 600;
  padding: 4px 8px;
  background: rgba(45, 31, 21, 0.85); color: #fff;
  letter-spacing: 0.04em;
}
.shot-placeholder {
  background: var(--paper-warm);
  border: 1px dashed var(--rule-strong);
  aspect-ratio: 9/16;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--ink-muted);
}
.shot-placeholder span { letter-spacing: 0.08em; text-transform: uppercase; }

/* FAQ */
.faq-list { padding: 0; margin: 0; }
.faq-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.faq-item:first-child { border-top: 1px solid var(--rule); }
.faq-item dt {
  font-size: 16px; font-weight: 600;
  margin-bottom: 6px;
}
.faq-item dd {
  margin: 0;
  font-size: 14.5px; line-height: 1.6;
  color: var(--ink-muted);
}
.faq-item dd a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }

/* LEGAL & FOOTER */
.section-legal { padding: 40px 0; }
.legal-links {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  font-size: 14px;
}
.legal-links a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }

.site-footer {
  background: var(--paper-warm); color: var(--ink-muted);
  font-size: 12px;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
}
.site-footer .row {
  display: flex; flex-direction: column; gap: 16px;
  align-items: flex-start; justify-content: space-between;
}
@media (min-width: 768px) {
  .site-footer .row { flex-direction: row; align-items: center; }
}
.site-footer .brand-row {
  display: inline-flex; align-items: center; gap: 12px;
}
.site-footer .brand-row img { height: 20px; opacity: 0.75; }
.site-footer .links {
  display: flex; flex-wrap: wrap; gap: 18px;
}
.site-footer .links a:hover { text-decoration: underline; }

/* ====================================================================
   LANGUAGE SWITCHER — custom <details> dropdown
   --------------------------------------------------------------------
   A native disclosure widget styled as a small pill. Clicking the pill
   reveals a panel of all 11 languages, each shown in its own script.
   The current language is highlighted with the accent-soft background.
   No JS — uses the browser's built-in details/summary mechanics.
   ==================================================================== */
.lang-switch {
  position: relative;
  margin-left: 8px;
}
.lang-switch summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  transition: background 140ms ease, border-color 140ms ease, transform 80ms;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary::marker { content: ""; }
.lang-switch summary:hover {
  background: var(--paper-warm);
  border-color: var(--rule-strong);
}
.lang-switch summary:active { transform: translateY(1px); }
.lang-switch summary .globe {
  width: 14px;
  height: 14px;
  color: var(--ink-muted, var(--ink));
  flex-shrink: 0;
}
.lang-switch summary .chev {
  width: 10px;
  height: 10px;
  color: var(--ink-muted, var(--ink));
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.lang-switch[open] summary {
  background: var(--paper-warm);
  border-color: var(--rule-strong);
}
.lang-switch[open] summary .chev { transform: rotate(180deg); }

.lang-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  min-width: 200px;
  max-height: min(70vh, 460px);
  overflow-y: auto;
  /* Solid opaque background — colour-mix with white pushes it slightly
     lighter than the page so it always reads as foreground, no matter
     what content (hero board, cards) sits behind it. */
  background: color-mix(in srgb, var(--paper) 92%, white 8%);
  background-color: #fdf8e8; /* fallback for browsers w/o color-mix */
  border: 1px solid var(--rule-strong);
  border-radius: 14px;
  /* Stronger shadow so the boundary stays visible against busy
     backgrounds. */
  box-shadow:
    0 2px 4px rgba(60, 35, 10, 0.10),
    0 22px 50px rgba(60, 35, 10, 0.25);
  z-index: 60;
  /* Slide-down entry — TRANSFORM ONLY. We dropped the opacity fade
     because screenshot tools (and slower devices) caught it mid-fade
     and made the panel look half-transparent, with the hero board
     bleeding through. Transform-only animation stays fully opaque
     end-to-end. */
  animation: lang-list-in 140ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: top right;
}
@keyframes lang-list-in {
  from { transform: translateY(-6px) scaleY(0.98); }
  to   { transform: translateY(0) scaleY(1); }
}
.lang-list li { margin: 0; padding: 0; }
.lang-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--ink);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 110ms ease, color 110ms ease;
  letter-spacing: 0;
}
.lang-list a:hover {
  background: var(--paper-warm);
  text-decoration: none;
}
.lang-list a.current {
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-weight: 700;
}
.lang-list a .code {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--ink-muted, var(--ink));
  text-transform: uppercase;
  margin-left: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.lang-list a.current .code { color: var(--accent-deep); }

/* RTL placement — dropdown anchors to the LEFT in Arabic */
html[dir="rtl"] .lang-switch { margin-left: 0; margin-right: 8px; }
html[dir="rtl"] .lang-list { right: auto; left: 0; }
html[dir="rtl"] .lang-list a .code { margin-left: 0; margin-right: auto; }

/* ====================================================================
   General polish — minor microinteractions across the page
   ==================================================================== */
/* Feature cards lift gently on hover */
.features-grid li {
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 200ms ease;
}
.features-grid li:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(60, 35, 10, 0.08);
}

/* Smooth in-page scrolling for anchor links */
html { scroll-behavior: smooth; }

/* Nav link active underline animates in on hover */
.site-nav a {
  position: relative;
  transition: color 140ms ease;
}
.site-nav a:not(.active)::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px;
  bottom: 4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}
.site-nav a:not(.active):hover::after {
  transform: scaleX(1);
}
.site-nav a:hover { text-decoration: none; }

/* Hero CTA store badges — pull inline styles up to a class */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 14px;
  transition: transform 140ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 140ms ease, background 140ms ease;
  border: 1.5px solid transparent;
}
.store-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(60, 35, 10, 0.15);
  text-decoration: none;
}
.store-badge--primary {
  background: var(--ink);
  color: var(--paper);
}
.store-badge--primary:hover { background: #1a1208; }
.store-badge--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.store-badge--outline:hover { background: var(--ink); color: var(--paper); }

/* ====================================================================
   Mobile + RTL fixes (bug pass)
   ==================================================================== */

/* Force LTR on the hero board even when the page is RTL — the tile
   letters are Latin and should keep FORGE/WORDS/PLAY reading order.
   Without this, dir="rtl" flips the grid and the letters read
   backwards as EGROF/SDROW/YALP. */
.hero-board,
.hero-board .grid5 {
  direction: ltr;
}

/* Hero-board needs a hard max-width so it never overflows on mobile.
   Currently `width: 100%` with no max-width and `max-width: 460px`
   only on .hero-board itself — but the .hero-visual wrapper had
   `aspect-ratio: 1024/500` which broke on the new square board. */
.hero-visual.hero-board-wrap {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}
.hero-board {
  max-width: 100%;
}

/* Hero content itself should never overflow its grid cell either. */
.hero-content { min-width: 0; }
.hero-lead, .hero h1 { overflow-wrap: anywhere; }

/* ============ Header at narrow widths ============
   At < 640px we tighten the spacing and let the nav links shrink so
   the language pill stays visible. Below 480px the second nav link
   (the active "Letter Forge" one) hides — the brand already labels
   the page. */
.site-header .container {
  padding-left: max(var(--gutter), 14px);
  padding-right: max(var(--gutter), 14px);
}
@media (max-width: 720px) {
  .site-header .container { gap: 12px; }
  .site-nav { gap: 2px; font-size: 12.5px; }
  .site-nav a { padding: 6px 8px; }
  .lang-switch { margin-left: 4px; }
  .lang-switch summary { padding: 5px 7px 5px 9px; font-size: 12px; }
  .lang-switch summary .lang-name { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 460px) {
  /* Brand's "Letter Forge" label takes ~110px — drop the redundant
     active nav link so the language pill never gets pushed off. */
  .site-nav a.active { display: none; }
  /* Hide the brand text label too, keep just the EW logo */
  .brand::after { display: none; }
}

/* ============ Hero on mobile ============
   The hero meta pills were overflowing because the long ones
   (`11 languages · 180k words`) don't break. Allow them to shrink
   gracefully. Also tighten section padding. */
@media (max-width: 640px) {
  .hero { padding: 28px 0 36px; }
  .hero h1 { font-size: clamp(2rem, 9vw, 3.25rem); }
  .hero-lead { font-size: 15.5px; }
  .hero-meta li {
    padding: 4px 9px;
    font-size: 11.5px;
    white-space: nowrap;
  }
  /* CTA buttons stack edge-aligned, taking equal width */
  .hero-cta { gap: 10px; }
  .store-badge { padding: 11px 16px; font-size: 13.5px; }
}

/* Ensure no section ever causes horizontal scroll */
body { overflow-x: hidden; }

/* ============ Lang dropdown polish ============
   Make sure the dropdown panel never overflows the viewport on mobile.
   Cap its width and anchor it to the right edge with a small inset. */
@media (max-width: 460px) {
  .lang-list {
    right: -8px;
    min-width: 184px;
    max-width: calc(100vw - 24px);
  }
  html[dir="rtl"] .lang-list { left: -8px; right: auto; }
}