/* ChessPilot theme. Every page links this file.
   One token set drives colour, type, spacing and radius; components below only
   consume tokens, so changing a value here changes it everywhere.
   Palette: tournament-board green on cool paper. All pairs meet WCAG AA. */

:root {
  /* Colour */
  --bg: #F1F3EE;
  --surface: #FFFFFF;
  --ink: #1A211C;
  --ink-2: #44514A;
  --muted: #5E6D64;
  --hairline: #DCE2D8;
  --accent: #35604A;
  --accent-hover: #2A4D3B;
  --accent-soft: #E7EFE8;
  --on-accent: #F4F7F2;

  /* Type scale. Display sizes are fluid, so they need no breakpoints. */
  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-base: 0.9375rem;
  --t-md: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.375rem;
  --t-2xl: 1.5rem;
  --t-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.25rem);
  --t-h1: clamp(1.875rem, 1.4rem + 1.9vw, 2.5rem);
  --t-hero: clamp(2.125rem, 1.35rem + 3.1vw, 3.375rem);
  --t-price: clamp(2.75rem, 2.2rem + 2.2vw, 3.5rem);

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-section: clamp(56px, 7vw, 88px);
  --s-gutter: clamp(20px, 4vw, 32px);

  /* Shape */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  --max: 1080px;
  --ring: 0 0 0 3px rgba(53, 96, 74, 0.28);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--s-gutter); }

/* Anything focused by keyboard gets the same visible ring. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

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

/* ---------------------------------------------------------------- Nav ---- */
nav {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  z-index: 10;
}
nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.logo {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.25rem; font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none;
  white-space: nowrap; flex-shrink: 0;
}
.nav-links { display: flex; align-items: center; gap: var(--s-5); min-width: 0; }

/* The in-page anchors scroll sideways instead of disappearing on narrow screens,
   so every section stays reachable from the bar. */
.nav-menu {
  display: flex; align-items: center; gap: var(--s-5);
  min-width: 0; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.nav-menu::-webkit-scrollbar { display: none; }
.nav-menu a { white-space: nowrap; }

/* :not(.btn) matters: without it this rule outranks .btn-primary and paints the
   button's label dark on its dark background. */
.nav-links a:not(.btn) {
  color: var(--ink-2); text-decoration: none; font-size: 0.875rem;
}
.nav-links a:not(.btn):hover { color: var(--ink); }

/* ------------------------------------------------------------- Buttons ---- */
.btn {
  display: inline-block;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  font-size: 0.875rem; font-weight: 500;
  text-decoration: none; border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
  font-family: inherit;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline);
}
.btn-ghost:hover { border-color: var(--ink-2); }
.btn[disabled] { opacity: 0.55; cursor: default; }

/* ---------------------------------------------------------------- Hero ---- */
.hero { padding: clamp(40px, 6vw, 72px) 0 var(--s-section); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}
.hero-content { max-width: 560px; }
.hero h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--t-hero);
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin-bottom: var(--s-5);
  text-wrap: balance;
}
.hero p.lead {
  font-size: var(--t-lg); line-height: 1.55;
  color: var(--ink-2);
  max-width: 58ch; margin-bottom: var(--s-6);
}
.hero-ctas { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.hero-ctas .btn { padding: var(--s-3) var(--s-5); }
.hero-note { margin-top: var(--s-5); font-size: var(--t-sm); color: var(--muted); }

/* Supported platforms, between the hero and the first section. */
.platforms { padding: var(--s-7) 0; text-align: center; }
.platforms-row {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--s-gutter);
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: var(--s-3) clamp(20px, 3vw, 40px);
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--t-md); color: var(--ink-2);
}

/* ------------------------------------------------------------- Section ---- */
section { padding: var(--s-section) 0; border-top: 1px solid var(--hairline); }
.hero { border-top: none; }
section h2 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 400;
  font-size: var(--t-h2); line-height: 1.15; letter-spacing: -0.02em;
  margin-bottom: var(--s-3);
  text-wrap: balance;
}
section .section-lead {
  font-size: var(--t-base); color: var(--muted);
  max-width: 62ch; margin-bottom: var(--s-7);
}

/* Image placeholders */
.img-slot {
  background: var(--surface);
  border: 1px dashed var(--hairline);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: var(--t-xs);
  text-align: center; padding: var(--s-5);
  min-height: 160px;
}
.img-slot.hero-shot { min-height: clamp(220px, 28vw, 360px); width: 100%; }
.img-slot img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
.img-slot:has(img) { padding: 0; border-style: solid; }

/* ------------------------------------------------------------ Features ---- */
/* auto-fit reflows 3 -> 2 -> 1 on its own, with no breakpoints to keep in sync. */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--s-6);
}
/* The rule per cell is what makes nine loose blocks read as one table of
   capabilities; it lines up across each row whatever the column count. */
.feature { padding-top: var(--s-4); border-top: 1px solid var(--hairline); }
.feature h3 { font-size: var(--t-base); font-weight: 500; margin-bottom: var(--s-1); }
.feature p { font-size: 0.875rem; color: var(--muted); line-height: 1.55; }
.feature-icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent); margin-bottom: var(--s-3);
}
.feature-icon svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* --------------------------------------------------------------- Setup ---- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--s-6);
}
/* Numbered because installing really is a sequence, and ruled like the feature
   grid so both sections share one structural language. */
/* Column layout so the screenshots line up along one baseline: without it a step
   whose text runs to three lines pushes its image below the other two. */
.step {
  position: relative; padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column;
}
.step-num {
  display: inline-block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.75rem; font-weight: 400;
  line-height: 1; color: var(--accent);
  margin-bottom: var(--s-2);
}
.step h3 { font-size: var(--t-md); font-weight: 500; margin-bottom: var(--s-1); }
.step p { font-size: 0.875rem; color: var(--muted); line-height: 1.55; margin-bottom: var(--s-4); }
.step .img-slot { min-height: 140px; font-size: var(--t-xs); margin-top: auto; }

/* --------------------------------------------------------------- Video ---- */
.video-frame {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: var(--t-sm);
  text-align: center; padding: var(--s-5);
}
.video-frame iframe { width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------------- Pricing ---- */
/* The one object allowed to be loud: a board square, filled and edged in green. */
.pricing { text-align: center; }
.pricing h2, .pricing .section-lead { margin-left: auto; margin-right: auto; }
.price-card {
  max-width: 400px; margin: var(--s-6) auto 0;
  /* The accent edge is painted as a background bar, not a thick border: a 3px
     border meeting 1px sides leaves mitred nubs in the rounded corners. */
  background:
    linear-gradient(var(--accent), var(--accent)) top center / 100% 3px no-repeat,
    var(--accent-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-6) clamp(20px, 4vw, 32px);
  text-align: left;
}
.price-card .amount {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--t-price); line-height: 1; font-weight: 400;
  letter-spacing: -0.02em;
  display: flex; align-items: baseline; gap: var(--s-1);
  margin-bottom: var(--s-1);
}
.price-card .amount .cents { font-size: var(--t-xl); color: var(--ink-2); }
.price-card .cadence { font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--s-5); }
.price-card ul { list-style: none; margin-bottom: var(--s-6); }
.price-card li {
  font-size: 0.875rem; padding: var(--s-2) 0; color: var(--ink-2);
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: flex-start; gap: var(--s-3);
}
.price-card li:last-child { border-bottom: none; }
.check { color: var(--accent); width: 14px; height: 14px; flex-shrink: 0; margin-top: 5px; }
/* No `display` here on purpose: `.price-card .btn` would outrank the [data-buy]
   rules below and show both the buy button and the unavailable notice at once. */
.price-card .btn { width: 100%; text-align: center; padding: var(--s-3); }

/* Purchase disabled - no Creem key, or Creem rejected it. The server sets
   body[data-purchase="off"]; [data-buy] leads to a payment, [data-buy-off] explains
   why it is gone. Hidden by default so a missing attribute never shows both. */
[data-buy-off] { display: none; }
[data-purchase="off"] [data-buy] { display: none; }
[data-purchase="off"] [data-buy-off] { display: block; }
.btn-off {
  background: var(--surface); color: var(--ink-2);
  border-color: var(--hairline);
  cursor: default; pointer-events: none;
}
[data-purchase="off"] .price-card { background: var(--surface); }
[data-purchase="off"] .price-card .amount { color: var(--muted); }
.sale-off {
  max-width: 400px; margin: var(--s-4) auto 0;
  font-size: var(--t-sm); line-height: 1.55; color: var(--muted); text-align: center;
}
.sale-off a { color: var(--ink-2); }
.price-note { font-size: var(--t-sm); color: var(--ink-2); margin-top: var(--s-5); text-align: center; }
.price-fineprint { font-size: var(--t-xs); color: var(--muted); margin-top: var(--s-2); text-align: center; }

/* ----------------------------------------------------------------- FAQ ---- */
/* 360px floor keeps this at two columns on a wide screen: answers are prose and
   a third column would squeeze them to a few words a line. */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: var(--s-6) var(--s-7);
}
.faq-item { padding: var(--s-5) 0; border-top: 1px solid var(--hairline); }
.faq-item h4 { font-size: var(--t-base); font-weight: 500; margin-bottom: var(--s-1); }
.faq-item p { font-size: 0.875rem; color: var(--muted); line-height: 1.55; }

/* ------------------------------------------------------------- Contact ---- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(24px, 4vw, 56px); align-items: start;
}
.contact-info p {
  font-size: 0.875rem; color: var(--muted); margin-bottom: var(--s-5);
  line-height: 1.6; max-width: 52ch;
}
.contact-email {
  display: inline-block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--t-xl); font-weight: 400;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
  overflow-wrap: anywhere;
}
.contact-email:hover { border-color: var(--ink); }
.contact-meta {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: var(--s-5);
}
.contact-meta dt { font-size: var(--t-xs); color: var(--muted); margin-bottom: var(--s-1); }
.contact-meta dd { font-size: 0.875rem; color: var(--ink); margin-bottom: var(--s-4); }
.contact-meta dd:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- Footer ---- */
footer {
  padding: var(--s-7) 0;
  border-top: 1px solid var(--hairline);
  font-size: var(--t-sm); color: var(--muted);
}
footer .wrap {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--s-3) var(--s-5);
}
footer a { color: var(--muted); text-decoration: none; }
footer > .wrap > div > a + a { margin-left: var(--s-5); }
footer a:hover { color: var(--ink); }

/* --------------------------------------------- Functional pages (shared) ---- */
.page { padding: var(--s-section) 0; }
.page h1 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 400;
  font-size: var(--t-h1); line-height: 1.1; letter-spacing: -0.02em;
  margin-bottom: var(--s-3);
  text-wrap: balance;
}
.page .lead { font-size: var(--t-md); color: var(--ink-2); max-width: 62ch; margin-bottom: var(--s-6); }
.card {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: clamp(20px, 4vw, 28px); max-width: 640px;
}
.card + .card { margin-top: var(--s-5); }
.card h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: var(--t-2xl); margin-bottom: var(--s-2); }
.card p { font-size: 0.875rem; color: var(--muted); line-height: 1.6; }
.card p + p { margin-top: var(--s-3); }

.field { margin-bottom: var(--s-4); }
.field label { display: block; font-size: var(--t-sm); font-weight: 500; margin-bottom: var(--s-2); color: var(--ink-2); }
.field input {
  width: 100%; padding: var(--s-3); font: inherit;
  /* 16px keeps iOS from zooming when the field takes focus. */
  font-size: var(--t-md);
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink);
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
}
.field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field input::placeholder { color: var(--muted); opacity: 1; }
.field .hint { font-size: var(--t-xs); color: var(--muted); margin-top: var(--s-2); }
.actions { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; margin-top: var(--s-2); }

.alert { border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); font-size: 0.875rem; line-height: 1.5; margin: var(--s-4) 0; }
.alert-error { background: #FBEDEC; color: #8A2A22; border: 1px solid #F1C9C5; }
.alert-ok { background: var(--accent-soft); color: #234D36; border: 1px solid #C4DBCB; }
.alert-info { background: #EDF1F5; color: #26424F; border: 1px solid #CFDCE4; }

.key-box {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Shrinks before it overflows: the key is 29 characters wide. */
  font-size: clamp(0.8125rem, 0.55rem + 1.3vw, 1.0625rem);
  letter-spacing: 0.06em;
  background: var(--bg); border: 1px dashed var(--hairline); border-radius: var(--r-sm);
  padding: var(--s-3); display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
  margin: var(--s-3) 0;
}
.key-box code { overflow-wrap: anywhere; min-width: 0; }
.key-box button { flex-shrink: 0; }

.steps { list-style: none; counter-reset: s; margin: var(--s-4) 0 0; }
.steps li {
  counter-increment: s; position: relative; padding-left: 34px;
  font-size: 0.875rem; color: var(--ink-2); line-height: 1.55; margin-bottom: var(--s-3);
}
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent);
  font-size: var(--t-xs); display: inline-flex; align-items: center; justify-content: center;
}
/* Links inside prose: the browser default blue is the one colour on the page that
   belongs to no one, so body copy links take the accent instead. */
/* .contact-email is excluded: it draws its own underline as a border. */
.card a:not(.btn), .steps a, .page .lead a, .contact-info a:not(.contact-email), .faq-item a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.card a:not(.btn):hover, .steps a:hover, .page .lead a:hover,
.contact-info a:not(.contact-email):hover, .faq-item a:hover { color: var(--accent-hover); }

.muted { color: var(--muted); font-size: var(--t-sm); }
.hidden { display: none !important; }
details summary { cursor: pointer; font-size: 0.875rem; color: var(--ink-2); }
details[open] summary { margin-bottom: var(--s-3); }

/* ---------------------------------------------------------- Responsive ---- */
/* The grids and display type are fluid, so only the hero still needs a breakpoint. */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .nav-links { gap: var(--s-4); }
  .nav-menu { gap: var(--s-4); }
}

/* Narrow: the bar becomes two rows - brand and call to action, then the section
   links across the full width. display:contents lifts the children of .nav-links
   into the bar's own flex row so they can be ordered independently. */
@media (max-width: 720px) {
  nav { padding: var(--s-3) 0; }
  nav .wrap { flex-wrap: wrap; row-gap: var(--s-3); }
  /* Only the marketing bar splits: its children join the bar's flex row so the
     brand and the call to action share row one and the menu takes row two.
     The simple bars on the other pages have no .nav-menu and keep their layout. */
  .nav-links:has(.nav-menu) { display: contents; }
  .nav-menu {
    order: 3; width: 100%;
    justify-content: space-between; gap: var(--s-3);
  }
  .nav-links a:not(.btn) { font-size: var(--t-sm); }
}
@media (max-width: 520px) {
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { text-align: center; }
  .actions .btn { flex: 1 1 auto; text-align: center; }
}