/* landing.css — the marketing page, and only the marketing page.
 *
 * Loaded after app.css, which already supplies .wrap, .card, .btn, .eyebrow
 * and the language switcher. Everything here is either a token this page
 * re-tunes for itself or a component that exists nowhere else.
 *
 * WHY A SEPARATE FILE
 * -------------------
 * The app and the landing page now want different grounds: the app is white
 * so a bingo card reads as ink on paper, the landing page sits on a light
 * grey so white cards lift off it. CSS custom properties are per-document, so
 * re-declaring :root here changes this page and nothing else — the app keeps
 * app.css exactly as it was.
 */

:root {
  /* The one real departure from the app: a grey ground with white surfaces. */
  --color-bg: #f4f5f6;
  --color-surface: #ffffff;
  --bg: #f4f5f6;
  --surface: #ffffff;
}

body { background: var(--color-bg); }

/* --- Shell ----------------------------------------------------------- */

.land-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
}
.land-head-in {
  display: flex; align-items: center; gap: var(--space-6);
  padding-top: var(--space-4); padding-bottom: var(--space-4);
}
.land-brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; }
.land-brand img { width: 30px; height: 30px; flex: none; object-fit: contain; }
.land-brand b {
  font-family: var(--font-heading); font-weight: 600; font-size: 18px;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}

/* Every band is full-bleed, divided from its neighbour by one hairline. */
.band-white { background: var(--color-surface); border-top: 1px solid var(--color-divider);
              border-bottom: 1px solid var(--color-divider); }
.band-grey  { background: var(--color-bg); }
.band > .wrap, .band-white > .wrap, .band-grey > .wrap {
  padding-top: 56px; padding-bottom: 56px;
}

.land-eyebrow {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-accent);
}
.land-h2 { font-family: var(--font-heading); font-size: 42px; line-height: 1; margin: 14px 0 12px; }
.land-lede { color: var(--color-neutral-700); margin: 0; }
.section-mid { text-align: center; max-width: 64ch; margin: 0 auto 38px; }

/* --- Hero ------------------------------------------------------------ */

.hero-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center;
  padding-top: 52px; padding-bottom: 52px;
}
.hero-grid h1 {
  font-family: var(--font-heading); font-size: 66px; line-height: .96;
  margin: 22px 0 0; max-width: 15ch;
}
/* The dictionary's headline carries its own <span class="grad"> around the
   words to emphasise — in every language, since where the emphasis falls in
   a sentence is not the same in German as in English. The old page styled
   this in its inline <style>; it has to keep existing here or the headline
   silently loses its highlight. */
.grad { color: var(--color-accent); }
.hero-p { max-width: 56ch; font-size: 17px; color: var(--color-neutral-700); margin-top: 20px; }
.hero-cta2 { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero-cta2 .btn { padding: 14px 28px; font-size: 16px; white-space: nowrap; flex: none; }

.tag-accent {
  display: inline-flex; align-items: center; padding: 3px 10px; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  background: var(--color-accent-100); color: var(--color-accent-800);
}

/* The live card. The product is the hero image, so it is built from the same
   parts the app uses rather than a screenshot that would go stale. */
.livecard { background: var(--color-surface); border: 1px solid var(--color-divider); }
.livecard-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 18px; border-bottom: 1px solid var(--color-divider);
}
.livecard-who {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-neutral-600);
}
.livecard-score {
  font-family: var(--font-heading); font-size: 17px;
  background: var(--color-accent); color: #fff; padding: 3px 12px;
  white-space: nowrap;
  /* No forced direction: this reads "9 pts" in a translated word order, so
     the bidi algorithm gets it right and an LTR override would not. The
     figures that ARE bare numbers — ranks, money — are isolated instead. */
}
.livecard-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--color-divider); padding: 1px;
}
.livecard-ft {
  display: flex; gap: 20px; padding: 12px 18px; flex-wrap: wrap;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-neutral-600); border-top: 1px solid var(--color-divider);
}
.livecard-ft span { display: flex; align-items: center; gap: 7px; }
.livecard-ft i { width: 10px; height: 10px; display: inline-block; flex: none; }

.sq2 {
  aspect-ratio: 1; display: flex; flex-direction: column; padding: 8px;
  background: var(--color-surface); transition: background .3s;
  overflow: hidden; text-align: start;
}
.sq2-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; }
.sq2-kicker {
  font-size: 9px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--color-neutral-700); line-height: 1.1;
  /* A single long word — DISPLACEMENT, EXPANSION — has nowhere to wrap in a
     70px square and would otherwise run out over the tick beside it. */
  min-width: 0; overflow-wrap: anywhere;
}
.sq2-mark { font-size: 10px; line-height: 1; color: var(--color-neutral-400); flex: none; }
.sq2-label {
  margin-top: auto; font-size: 10px; line-height: 1.2;
  color: var(--color-neutral-700);
}
.sq2.on { background: var(--color-accent); }
.sq2.on .sq2-kicker { color: var(--color-accent-300); }
.sq2.on .sq2-label  { color: var(--color-accent-200); }
.sq2.on .sq2-mark   { color: var(--color-accent-200); }
.sq2.pend { background: var(--color-accent-100); }
.sq2.pend .sq2-mark, .sq2.pend .sq2-label { color: var(--color-accent-700); }

/* --- Leaderboard strip ----------------------------------------------- */

.lbstrip { display: grid; grid-template-columns: 250px 1fr; gap: 38px; align-items: center; }
.lbstrip h2 { font-family: var(--font-heading); font-size: 30px; line-height: 1.02; margin: 8px 0 0; }
.lb2 {
  display: flex; align-items: center; gap: 16px; padding: 11px 14px;
  border-bottom: 1px solid var(--color-neutral-200);
}
.lb2:last-child { border-bottom: none; }
.lb2.me { background: var(--color-accent-100); }
.lb2-rank { font-family: var(--font-heading); font-size: 17px; width: 26px; color: var(--color-neutral-600); }
.lb2-cc { font-size: 10px; letter-spacing: .1em; color: var(--color-neutral-600); width: 28px; }
.lb2-name { font-weight: 500; flex: 1; min-width: 0; }
.lb2-pips { display: flex; gap: 2px; flex: none; }
.lb2-pts {
  font-family: var(--font-heading); font-size: 22px; width: 52px; text-align: end;
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate;
}
.pip { width: 16px; height: 7px; background: var(--color-neutral-300); display: block; }
.pip.on { background: var(--color-accent); }

/* --- Problem: two lists, side by side -------------------------------- */

.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.list-card { padding: 26px; border: 1px solid var(--color-divider); background: transparent; }
.list-card h3 {
  font-family: var(--font-heading); font-size: 20px; letter-spacing: .03em;
  text-transform: uppercase; color: var(--color-neutral-600); margin: 0 0 var(--space-2);
}
.list-card div { padding: 10px 0; border-top: 1px solid var(--color-neutral-200); color: var(--color-neutral-700); }
.list-card.dark {
  background: var(--color-accent); border-color: var(--color-accent); color: #fff;
}
.list-card.dark h3 { color: var(--color-accent-300); }
.list-card.dark div { border-top-color: var(--color-accent-700); color: var(--color-accent-200); }

/* --- Mechanic: the three numbers ------------------------------------- */

.mech { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.mech h2 { max-width: 16ch; }
.mech p { color: var(--color-neutral-700); max-width: 56ch; }
.nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.num {
  padding: 26px 14px; text-align: center;
  border: 1px solid var(--color-divider); background: var(--color-surface);
}
.num b { display: block; font-family: var(--font-heading); font-size: 64px; line-height: 1; }
.num span {
  display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  margin-top: 10px; color: var(--color-neutral-600);
}
.num.hi { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.num.hi span { color: var(--color-accent-200); }

/* --- Calculator ------------------------------------------------------ */

.calc2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 34px; align-items: center; }
.sliders {
  padding: 28px; display: flex; flex-direction: column; gap: 22px;
  border: 1px solid var(--color-divider); background: var(--color-surface);
}
.sliders label { display: block; }
.sliders .lbl {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-neutral-700); margin-bottom: 9px;
}
.sliders .lbl b {
  font-family: var(--font-heading); font-size: 19px; letter-spacing: 0;
  color: var(--color-text); direction: ltr; unicode-bidi: isolate;
}
/* A slider is dragged with a thumb, so it gets a fingertip of height rather
   than the 24px the browser gives it by default. */
.range { width: 100%; accent-color: var(--color-accent); min-height: 44px; }

.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.metric { padding: 26px; border: 1px solid var(--color-divider); background: var(--color-surface); }
.metric .k { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-neutral-600); }
.metric .v {
  font-family: var(--font-heading); font-size: 48px; line-height: 1; margin-top: 12px;
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate;
}
.metric .n { font-size: 12px; margin-top: 8px; color: var(--color-neutral-600); }
.metric.accent { color: var(--color-accent); }
.metric.dark {
  background: var(--field); border-color: var(--field); color: #fff;
}
.metric.dark .k, .metric.dark .n { color: var(--color-accent-300); }

.verdict-bar {
  display: flex; align-items: center; gap: 18px; margin-top: 22px;
  padding: 18px 22px; background: var(--color-accent); color: #fff; flex-wrap: wrap;
}
.verdict-bar b { font-family: var(--font-heading); font-size: 24px; font-weight: 600; max-width: 44ch; }
.verdict-bar .btn {
  background: var(--color-accent-300); color: var(--color-accent-900);
  border-color: var(--color-accent-300); white-space: nowrap; flex: none;
}

/* --- Pricing --------------------------------------------------------- */

.price3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan {
  padding: 30px; display: flex; flex-direction: column; position: relative;
  border: 1px solid var(--color-divider); background: var(--color-surface);
}
.plan-name { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-neutral-600); }
.plan-tag  { font-size: 13px; color: var(--color-neutral-600); margin-top: 6px; }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.plan-price b { font-family: var(--font-heading); font-size: 52px; line-height: 1; font-weight: 600; }
.plan-price span { font-size: 12px; color: var(--color-neutral-600); }
.plan-feats { flex: 1; margin: 22px 0; }
.plan-feats div { padding: 8px 0; border-top: 1px solid var(--color-neutral-200); font-size: 14px; }
.plan.hi {
  background: var(--color-accent); border-color: var(--color-accent); color: #fff;
}
.plan.hi .plan-name, .plan.hi .plan-tag, .plan.hi .plan-price span { color: var(--color-accent-200); }
.plan.hi .plan-feats div { border-top-color: var(--color-accent-700); }
.plan.hi .btn {
  background: var(--color-accent-300); color: var(--color-accent-900); border-color: var(--color-accent-300);
}
.plan-flag {
  position: absolute; top: 0; inset-inline-end: 0;
  padding: 3px 10px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  background: var(--color-accent-300); color: var(--color-accent-900);
}

/* --- FAQ -------------------------------------------------------------
   Kept from the old page on purpose: the FAQPage structured data in the head
   is built from these same questions, and a rich result that answers
   questions the page does not visibly ask is a Google violation. */
.faq2 { max-width: 80ch; }
.faq2 details { border-bottom: 1px solid var(--color-divider); }
.faq2 summary {
  list-style: none; cursor: pointer; position: relative;
  padding: var(--space-4) 32px var(--space-4) 0;
  font-family: var(--font-heading); font-size: 19px; font-weight: 600;
}
[dir="rtl"] .faq2 summary { padding: var(--space-4) 0 var(--space-4) 32px; }
.faq2 summary::-webkit-details-marker { display: none; }
.faq2 summary::after {
  content: "+"; position: absolute; inset-inline-end: 4px; top: var(--space-4);
  font-weight: 400; color: var(--color-accent);
}
.faq2 details[open] summary::after { content: "−"; }
.faq2 p {
  padding: 0 0 var(--space-4); margin: 0; font-size: 14px; max-width: 70ch;
  color: var(--color-neutral-700);
}

/* --- Close and footer ------------------------------------------------ */

.close2 { text-align: center; padding-top: 64px; padding-bottom: 64px; }
.close2 h2 {
  font-family: var(--font-heading); font-size: 52px; line-height: .98;
  margin: 0 auto 18px; max-width: 20ch;
}
.close2 p { max-width: 54ch; margin: 0 auto 30px; font-size: 16px; color: var(--color-neutral-700); }
.close2 .hero-cta2 { justify-content: center; }
.close2 .btn { padding: 16px 32px; font-size: 17px; }

.land-foot { border-top: 1px solid var(--color-divider); background: var(--color-surface); }
.land-foot-in {
  padding-top: 20px; padding-bottom: 20px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  font-size: 12px; color: var(--color-neutral-600);
}
.land-foot-in a { color: var(--color-neutral-700); }
.land-foot-links { display: flex; flex-wrap: wrap; gap: 18px; }

/* =====================================================================
   Responsive. The hero stacks first because a 66px headline beside a
   25-square card needs a screen; everything else follows at 860.
   ===================================================================== */

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-grid h1 { font-size: 52px; max-width: 20ch; }
  .lbstrip { grid-template-columns: 1fr; gap: 20px; }
  .mech, .calc2 { grid-template-columns: 1fr; gap: 28px; }
  .mech h2 { max-width: none; }
  .price3 { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .band > .wrap, .band-white > .wrap, .band-grey > .wrap {
    padding-top: 40px; padding-bottom: 40px;
  }
  .land-h2 { font-size: 32px; }
  .close2 h2 { font-size: 38px; }
  .two-up { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric .v { font-size: 38px; }
  .num b { font-size: 48px; }
  /* The pip row is decoration; on a phone it costs the name its width. */
  .lb2-pips { display: none; }
}

@media (max-width: 620px) {
  .hero-grid { padding-top: 32px; padding-bottom: 32px; }
  .hero-grid h1 { font-size: 40px; }
  .hero-p { font-size: 16px; }
  .hero-cta2 .btn, .close2 .btn { width: 100%; }
  .land-head-in { gap: var(--space-3); }
  /* The nav keeps the logo, the language and Start free. Sign in lives on the
     page the button leads to anyway. */
  .land-brand b { display: none; }
  .land-head .btn-signin { display: none; }
  /* In the app this sits inside a 44px topbar row; here it stands alone. */
  .land-head .lang > summary { min-height: 44px; }
  .sq2-kicker { font-size: 8px; letter-spacing: .06em; }
  .nums { grid-template-columns: 1fr; }
  .num { padding: 18px 14px; display: flex; align-items: baseline; gap: 14px; justify-content: center; }
  .num b { font-size: 36px; }
  .num span { margin-top: 0; }
  /* 25 labelled squares at 10px is unreadable under ~380px of card; the
     kicker alone still shows the shape of the game. */
  .sq2-label { display: none; }
  .sq2 { padding: 5px; }
  .livecard-ft { gap: 12px; font-size: 9px; }
}