/* ==========================================================================
   Just Chess — marketing landing page
   Hand-written. No framework, no CDN, no runtime. Every value below was
   measured off the approved design at justchess.webflow.io rather than
   eyeballed (see the token table in the plan).
   ========================================================================== */

/* --- Self-hosted variable fonts -------------------------------------------
   One file per family per subset; the whole weight axis lives in each file,
   so `font-weight: 400 600` lets the browser interpolate. latin-ext is
   REQUIRED, not optional: Turkish needs ş ğ ı İ (U+011E-0131) and French
   needs œ (U+0153), none of which are in the latin subset.

   cyrillic is required for the SAME reason, for Ukrainian: neither latin nor
   latin-ext contains a single Cyrillic codepoint, so without these four files
   every word of /uk/ fell back to the visitor's system font. The subset also
   carries Ukrainian's own letters — ґ Ґ (U+0490-0491) sit outside the main
   U+0400-045F block and are listed separately in the range.

   A subset is fetched only when the page actually uses a codepoint in its
   unicode-range. MEASURED, not assumed: every page fetches inter-cyrillic
   (~19 KB) regardless of language, because the footer language switcher
   renders "Українська" natively in Inter — that is the point of the switcher,
   so the cost is deliberate. The three display faces (playfair x2,
   montserrat) are fetched on /uk/ only; montserrat-cyrillic stays unloaded
   even there until Cyrillic text lands in a Montserrat element.
   Ranges are Google Fonts' own, verbatim, matching the files they came with.
   Fonts: Playfair Display, Montserrat, Inter — all SIL Open Font License 1.1.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url('/assets/fonts/playfair-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url('/assets/fonts/playfair-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display'; font-style: italic; font-weight: 400 600;
  font-display: swap; src: url('/assets/fonts/playfair-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display'; font-style: italic; font-weight: 400 600;
  font-display: swap; src: url('/assets/fonts/playfair-italic-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url('/assets/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url('/assets/fonts/montserrat-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url('/assets/fonts/inter-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* cyrillic — Ukrainian (/uk/). Same four faces as above. */
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url('/assets/fonts/playfair-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Playfair Display'; font-style: italic; font-weight: 400 600;
  font-display: swap; src: url('/assets/fonts/playfair-italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url('/assets/fonts/montserrat-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url('/assets/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  --bg: #FAFAFA;
  --ink: #060606;
  --muted: #555555;
  --accent: #FF9500;
  --accent-ink: #FFFFFF;
  --dark: #111111;
  --rule: rgba(0, 0, 0, .08);
  --card: #FFFFFF;
  /* The design draws card/badge outlines in a much stronger grey than the
     section rules — .5px #cacaca. Sub-pixel borders round to 0 on some
     engines, so these are 1px at the design's colour instead. */
  --hairline: #CACACA;
  --card-hover: #F1F1F1;

  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 940px;
  --gutter: 24px;
  --section-y: 96px;
  --radius: 20px;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul { margin: 0; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Visible keyboard focus everywhere (the design has none — accessibility floor). */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--dark); color: #fff; padding: 12px 20px;
  font-family: var(--ui); font-size: 14px; text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }
.section + .section { border-top: 1px solid var(--rule); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ui); font-size: 14px; font-weight: 500; line-height: 20px;
  padding: 12px 24px; border-radius: var(--radius);
  text-decoration: none; border: 0; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, opacity .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
/* Section call-to-action ("wide" in the design): taller and rounder than the
   plain nav button. Size and colour are separate modifiers because the design
   uses the wide size in both orange (hero) and black (clubs, apps).
   Widths stay intrinsic — the design's fixed 145/160px is an English-only
   measurement that clips the German and Turkish labels. */
.btn--lg { border-radius: 20px; padding: 15px 24px; }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: #F08A00; }
.btn--dark { background: var(--dark); color: #fff; }
.btn--dark:hover { background: #000; }
.btn__arrow { width: 12px; height: 14px; flex: none; }

/* --- Eyebrow labels ------------------------------------------------------- */
.eyebrow {
  font-family: var(--ui); font-size: 12px; font-weight: 400; line-height: 16px;
  letter-spacing: 3px; text-transform: uppercase; color: var(--muted);
  margin-bottom: 16px;
}

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 250, 250, .92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 72px;
}
.site-header__logo img { height: 24px; width: auto; }

/* --- Hero ----------------------------------------------------------------- */
.hero { padding: 72px 0 88px; }
/* The art column is fixed at its design width (391px) rather than 1fr: an even
   split leaves the copy column too narrow and breaks the headline onto a third
   line. */
.hero__grid {
  display: grid; grid-template-columns: 1fr 391px;
  gap: 64px; align-items: center;
}
.hero__badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; border: 1px solid var(--hairline); border-radius: 20px;
  padding: 6px 16px; margin-bottom: 24px;
  font-family: var(--ui); font-size: 12px; font-weight: 500; line-height: 16px;
  color: var(--muted);
}
.hero__badge img { width: 6px; height: 6px; opacity: .69; flex: none; }
.hero__title {
  font-family: var(--display); font-size: 58px; line-height: 72px;
  margin-bottom: 20px;
}
.hero__title em { font-style: italic; }
.hero__subtitle {
  max-width: 448px; font-family: var(--ui); font-size: 18px; line-height: 29px;
  letter-spacing: 1px; color: var(--muted); margin: 24px 0 40px;
}
.hero__subtitle strong { color: var(--ink); font-weight: 600; }
.hero__art img { border-radius: 40px; width: 100%; }

/* --- Why Just Chess -------------------------------------------------------
   Centred in the design, with the heading held to a narrower measure than the
   body so it breaks onto two lines. Both widths are max-, not fixed, so the
   longer German and Turkish headings can use the full column. */
.why__intro { text-align: center; margin: 0 auto 48px; }
.why__title {
  font-family: var(--display); font-size: 48px; line-height: 1.35;
  max-width: 415px; margin: 0 auto 24px;
}
.why__title em { font-style: italic; }
.why__body {
  font-family: var(--ui); font-size: 18px; line-height: 29px; letter-spacing: 2px;
  color: var(--muted); max-width: 576px; margin: 0 auto 24px;
}
.why__body:last-child { margin-bottom: 0; }

/* The six cards form ONE panel: shared hairlines, rounded only at the four
   outer corners. Borders live on the cells (not a wrapper) so the grid can
   reflow to 2- and 1-column without leaving stray rounded corners — see the
   media queries for the per-breakpoint corner rounding. */
.features {
  display: grid; grid-template-columns: repeat(3, 1fr);
  list-style: none; margin: 0 auto;
}
.feature {
  background: var(--card);
  border: 1px solid var(--hairline);
  padding: 32px;
  margin: 0 -1px -1px 0;          /* collapse the shared hairlines */
  transition: background-color .15s ease;
}
.feature:hover { background: var(--card-hover); }
.feature:nth-child(1) { border-top-left-radius: 20px; }
.feature:nth-child(3) { border-top-right-radius: 20px; }
.feature:nth-child(4) { border-bottom-left-radius: 20px; }
.feature:nth-child(6) { border-bottom-right-radius: 20px; }
.feature__icon { width: 48px; height: 48px; margin-bottom: 10px; }
.feature__title {
  font-family: var(--ui); font-size: 24px; font-weight: 300; line-height: 32px;
  color: var(--muted); margin-bottom: 14px;
}
.feature__body { font-family: var(--ui); font-size: 14px; line-height: 23px; color: var(--muted); }

/* --- Clash of Clubs -------------------------------------------------------
   Lead and body are two lines of one centred block in the design, so they
   share a style; they stay separate elements only so each language can break
   them where it wants. */
.clubs { text-align: center; }
.clubs__title { font-family: var(--display); font-size: 48px; line-height: 1.35; margin-bottom: 24px; }
.clubs__lead,
.clubs__body {
  font-family: var(--ui); font-size: 18px; line-height: 29px; letter-spacing: 2px;
  color: var(--muted); max-width: 576px; margin: 0 auto;
}
.clubs__body { margin-bottom: 48px; }
.clubs__logos {
  display: flex; justify-content: center; align-items: center;
  gap: 48px; flex-wrap: wrap; margin-bottom: 40px; list-style: none;
}
.clubs__logos img { width: 100px; height: 100px; object-fit: contain; }

/* --- Mobile apps ---------------------------------------------------------- */
.apps { text-align: center; }
.apps__title {
  font-family: var(--display); font-size: 48px; line-height: 1.35;
  max-width: 415px; margin: 0 auto 24px;
}
.apps__title em { font-style: italic; }
.apps__icon { width: 130px; height: 130px; margin: 0 auto 24px; border-radius: 28px; }
.apps__body {
  font-family: var(--ui); font-size: 18px; line-height: 29px; letter-spacing: 2px;
  color: var(--muted); max-width: 576px; margin: 0 auto 40px;
}
.apps__badges {
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 40px;
}
.store-badge {
  display: flex; align-items: center; gap: 20px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: 20px;
  padding: 16px 24px; text-align: left;
}
/* Light badge, dark glyphs — the source PNGs are already dark, so unlike the
   old dark badge these must NOT be inverted. */
.store-badge img { width: 32px; height: 32px; flex: none; }
.store-badge__small {
  display: block; font-family: var(--ui); font-size: 10px; font-weight: 400;
  letter-spacing: 1px; color: var(--muted); margin-bottom: 6px; line-height: 1.4;
}
.store-badge__name { display: block; font-family: var(--ui); font-size: 16px; font-weight: 500; line-height: 1.3; }

/* --- The open beta, under the waitlist button ----------------------------
   Same badge shape as the two "coming soon" ones above, because it is the
   same kind of object: a place to get the app. What differs is that these
   two WORK, so they take the affordances a <span> never needed — the reset's
   `a { color: inherit }` already keeps the ink colour, and the rest is the
   `.feature` card's own hover language (a hairline that darkens, the .btn's
   1px lift), not a new one. */
.apps__beta {
  font-family: var(--ui); font-size: 16px; line-height: 26px; letter-spacing: 1px;
  color: var(--muted); max-width: 576px; margin: 40px auto 24px;
}
.apps__badges--beta { margin-bottom: 0; }
.store-badge--link {
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}
.store-badge--link:hover {
  transform: translateY(-1px); border-color: var(--ink); background: var(--card-hover);
}

/* --- Footer --------------------------------------------------------------
   A dark chess-pattern slab. The rounded top corners are drawn the way the
   design does it: a page-coloured block sitting inside the slab, rounded at
   the BOTTOM, so the dark area appears to be cut away. Doing it this way
   (rather than border-radius on the footer) keeps the pattern flush with the
   viewport edges on either side. */
.site-footer {
  position: relative; overflow: hidden;
  background-color: #000;
  background-image: url('/assets/img/footer-pattern.png');
  background-position: 50% 0; background-size: cover;
  color: #fff;
}
.site-footer__notch {
  background: var(--bg);
  border-radius: 0 0 44px 44px;
  width: 100%; height: 100px;
}
.site-footer__cols {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  margin: 60px 0 40px; padding: 40px 0;
}
.site-footer__mark img { width: 45px; height: 45px; border-radius: 12px; }
.site-footer__heading {
  font-family: var(--ui); font-size: 14px; font-weight: 600; color: #fff;
  margin: 0 0 12px;
}
.site-footer__col ul { list-style: none; }
.site-footer__col li { margin-bottom: 10px; }
.site-footer__col a {
  font-family: var(--ui); font-size: 14px; font-weight: 300;
  color: var(--hairline); text-decoration: none;
}
.site-footer__col a:hover { color: #fff; }
.site-footer__copyright {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 20px;
  font-family: var(--ui); font-size: 13px; color: var(--hairline);
}
/* Bleed image: sized off the container so the wordmark keeps its proportion
   to the columns above it, and clipped by the footer's own overflow. */
.site-footer__wordmark {
  width: 100%; max-width: 835px; height: auto;
  margin: 40px auto -18px; display: block;
}
.lang-switcher a[aria-current="true"] { color: #fff; font-weight: 500; }

/* --- Legal pages ---------------------------------------------------------- */
.legal { padding: 64px 0 96px; }
.legal__inner { max-width: 760px; margin: 0 auto; }
.legal h1 { font-family: var(--display); font-size: 44px; line-height: 1.2; margin-bottom: 12px; }
.legal .legal-updated { font-family: var(--ui); font-size: 14px; color: var(--muted); margin-bottom: 40px; }
/* Shown only when a legal page is published in English under a translated URL
   (build.js --allow-untranslated-legal). */
.legal .legal-notice {
  background: #FFF6E8; border: 1px solid rgba(255, 149, 0, .35);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 28px;
  font-family: var(--ui); font-size: 14px; color: #7A4A00;
}
.legal h2 {
  font-family: var(--display); font-size: 26px; line-height: 1.3;
  margin: 48px 0 16px; padding-top: 24px; border-top: 1px solid var(--rule);
}
.legal h3 {
  font-family: var(--ui); font-size: 16px; font-weight: 600;
  margin: 28px 0 10px;
}
.legal p { margin-bottom: 14px; color: #333; }
.legal ul { margin: 0 0 18px 0; padding-left: 22px; }
.legal li { margin-bottom: 8px; color: #333; }
.legal a { color: var(--ink); }
.legal__back {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 32px;
  font-family: var(--ui); font-size: 14px; color: var(--muted); text-decoration: none;
}
.legal__back:hover { color: var(--ink); }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --section-y: 72px; }
  .hero { padding: 48px 0 64px; }
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__art { order: -1; max-width: 420px; margin: 0 auto; }
  .hero__title { font-size: 46px; line-height: 60px; text-align: center; }
  .hero__copy { text-align: center; }
  .hero__badge { margin-inline: auto; }
  .hero__subtitle { margin-inline: auto; }
  .hero__copy .btn { justify-content: center; }

  /* Two columns: the rounded corners move to cells 1/2 (top) and 5/6 (bottom). */
  .features { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
  .feature { padding: 20px; }
  .feature:nth-child(n) { border-radius: 0; }
  .feature:nth-child(1) { border-top-left-radius: 20px; }
  .feature:nth-child(2) { border-top-right-radius: 20px; }
  .feature:nth-child(5) { border-bottom-left-radius: 20px; }
  .feature:nth-child(6) { border-bottom-right-radius: 20px; }

  .why__title, .clubs__title, .apps__title { font-size: 32px; }
  .legal h1 { font-size: 34px; }
}

@media (max-width: 600px) {
  :root { --section-y: 56px; --gutter: 20px; }
  .site-header__inner { min-height: 64px; }
  .hero__title { font-size: 36px; line-height: 46px; }
  .hero__subtitle { font-size: 16px; }

  /* Single column: only the very first and very last cells stay rounded. */
  .features { grid-template-columns: 1fr; }
  .feature__icon { width: 40px; height: 40px; }
  .feature:nth-child(n) { border-radius: 0; }
  .feature:first-child { border-radius: 20px 20px 0 0; }
  .feature:last-child { border-radius: 0 0 20px 20px; }

  .why__title, .clubs__title, .apps__title { font-size: 28px; }
  .why__body, .clubs__lead, .clubs__body, .apps__body { font-size: 16px; letter-spacing: 1px; }
  .clubs__logos { gap: 24px; }
  .clubs__logos img { width: 72px; height: 72px; }
  .apps__badges { flex-direction: column; align-items: stretch; }
  .store-badge { justify-content: center; }

  .site-footer__cols { flex-direction: column; align-items: center; text-align: center; gap: 28px; }
  .site-footer__copyright { text-align: center; }
  .site-footer__wordmark { margin-bottom: -6px; }

  .legal h1 { font-size: 28px; }
  .legal h2 { font-size: 22px; }
}