/* PointCall · Direction D (Golden Point): the landing page, legal pages and
   404. Ecru and espresso grounds, Fraunces for headings and score digits,
   Instrument Sans for everything else, one gold point. The colour values are
   the corrected tokens of the rebrand plan's Appendix B (the same values as
   lib/theme/app_colors.dart and the live board pages), checked for WCAG AA:
   every text role reaches 4.5:1 on bg, surface and surface2.

   /join and /e (americano.html) load this sheet too and re-declare the same
   --pc-* tokens in their own <style>; /tv does not load it. */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-normal-400-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-normal-400-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/fraunces-normal-100-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/fraunces-normal-100-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;
  --pc-bg: #EFE9DD;
  --pc-surface: #E6DFD0;
  --pc-surface2: #DCD3C1;
  --pc-line: #D3C9B6;
  --pc-line-strong: #B8AC98;
  --pc-ink: #2A211C;
  --pc-muted: #655A50;
  /* The logo's gold (#C9A227) lives in the lockup artwork only. --pc-gold
     is the app's "mark" role: the serve point and other small gold marks
     (3:1 on every ground). --pc-gold-text is the functional gold for text. */
  --pc-gold: #8C6E12;
  --pc-gold-text: #70590E;
  /* Score digits: team 2's pistachio is for large digits only. */
  --pc-team1: #2A211C;
  --pc-team2: #5C7A55;
  --pc-highlight: #F2DC9B;
  --pc-primary: var(--pc-ink);
  --pc-on-primary: var(--pc-bg);
  /* The phone frame around the hero's score screen. */
  --pc-bezel: #1E1814;
  --pc-shadow: rgba(42, 33, 28, 0.32);
  --pc-radius: 4px;
  --pc-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --pc-serif: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* The names the rules below (and the pages that share this sheet) use. */
  --bg: var(--pc-bg);
  --bg-elev: var(--pc-surface);
  --bg-elev-2: var(--pc-surface2);
  --surface: var(--pc-surface);
  --surface-strong: var(--pc-surface2);
  --border: var(--pc-line);
  --border-strong: var(--pc-line-strong);
  --text: var(--pc-ink);
  --text-muted: var(--pc-muted);
  --text-soft: var(--pc-muted);
  --accent: var(--pc-primary);
  --accent-strong: var(--pc-ink);
  --accent-ink: var(--pc-on-primary);
  --radius: var(--pc-radius);
  --radius-sm: var(--pc-radius);
  --maxw: 1120px;
  --font: var(--pc-sans);
}

@media (prefers-color-scheme: dark) {
  :root {
    --pc-bg: #2A211C;
    --pc-surface: #3A2F29;
    --pc-surface2: #463A33;
    --pc-line: #4C3F37;
    --pc-line-strong: #6A5A4F;
    --pc-ink: #EFE9DD;
    --pc-muted: #B5A899;
    --pc-gold: #E0B93A;
    --pc-gold-text: #E0B93A;
    --pc-team1: #EFE9DD;
    --pc-team2: #B9C9A6;
    --pc-highlight: #483B23;
    --pc-bezel: #14100D;
    --pc-shadow: rgba(0, 0, 0, 0.55);
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--accent-strong);
}

/* Pages built on this sheet (landing, legal, 404) carry body.pc-page. The
   live board pages that share the sheet do not, so the rules scoped to it
   never reach /join or /e. */
.pc-page a:hover {
  text-decoration: underline;
  text-decoration-color: var(--pc-gold);
  text-underline-offset: 3px;
}

/* In-page links land below the sticky nav, not under it. "Get the app"
   (#download, the store buttons) lands a third of the way down, so the
   line above the buttons stays in view. */
.pc-page [id] {
  scroll-margin-top: 80px;
}

.pc-page #download {
  scroll-margin-top: 32vh;
}

.pc-page a:focus-visible,
.pc-page summary:focus-visible {
  outline: 2px solid var(--pc-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Nav ─────────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  background: color-mix(in srgb, var(--pc-bg) 88%, transparent);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--text);
}

.pc-page .brand:hover {
  text-decoration: none;
}

/* The lockup (symbol + wordmark) is vector artwork, never set live: the
   wordmark's Fraunces settings are drawn into the paths. */
.brand-lockup {
  display: block;
  height: 28px;
  width: auto;
}

.brand-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pc-gold);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links a {
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 500;
}

.nav-links a:hover {
  color: var(--text);
}

@media (max-width: 640px) {
  .nav-links {
    gap: 18px;
  }
  .nav-links a:not(.nav-cta) {
    display: none;
  }
}

.nav-cta {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--pc-primary);
  color: var(--pc-on-primary) !important;
  font-weight: 600;
}

.nav-cta:hover {
  background: var(--pc-primary);
  color: var(--pc-on-primary) !important;
}

.pc-page .nav-cta:hover {
  text-decoration: none;
}

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero {
  padding: 88px 0 72px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero {
    padding: 48px 0 40px;
  }
}

/* A small-caps label behind a short gold rule, not a pill. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pc-gold-text);
}

.eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 1px;
  background: var(--pc-gold-text);
}

/* At 320-375 px the Spanish/Italian eyebrow ("Puntuación de pádel · Apple y
   Android") wraps; shrink it with the viewport so a 390 px phone keeps one
   line and only the narrowest reach ~10 px. */
@media (max-width: 400px) {
  .eyebrow {
    font-size: clamp(10px, 3.1vw, 12.5px);
    letter-spacing: 0.1em;
    gap: 10px;
  }
  .eyebrow::before {
    width: 18px;
  }
}

h1 {
  margin: 20px 0 18px;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
}

.pc-page h1,
.pc-page h2 {
  font-family: var(--pc-serif);
  font-weight: 500;
  font-optical-sizing: auto;
}

.pc-page h1 {
  margin: 20px 0 20px;
  font-size: clamp(42px, 6vw, 70px);
  line-height: 1.02;
}

/* What it scores, as small caps between thin rules. Every item carries a
   rule on its left; the list is pulled left by one rule-plus-gap and that
   strip is clipped, so a line never starts with a rule when the list wraps
   (Spanish and Italian on a narrow phone). */
.hero-modes {
  --mode-gap: 14px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
  margin: 0 0 22px calc(-1 * (var(--mode-gap) + 1px));
  clip-path: inset(0 0 0 calc(var(--mode-gap) + 1px));
  font-size: 13px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pc-ink);
}

.hero-modes span {
  padding-left: var(--mode-gap);
  margin-right: var(--mode-gap);
  border-left: 1px solid var(--pc-line-strong);
}

@media (max-width: 400px) {
  .hero-modes {
    --mode-gap: 8px;
    font-size: 11px;
    letter-spacing: 0.08em;
  }
}

.hero-sub {
  font-size: clamp(17px, 1.6vw, 19px);
  color: var(--text-muted);
  max-width: 540px;
  margin: 0 0 32px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* The base geometry is the one /join and /e were built on; the landing's
   pill buttons are .pc-page .btn below. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease,
    border-color 0.15s ease;
}

.btn:hover {
  background: var(--bg-elev-2);
  color: var(--text);
}

/* One filled primary; the second store is an ink outline of equal size. */
.pc-page .btn {
  padding: 12px 24px;
  min-height: 54px;
  border-radius: 999px;
  border: 1.5px solid var(--pc-ink);
  background: transparent;
  color: var(--pc-ink);
}

.pc-page .btn:hover {
  background: var(--pc-surface);
  color: var(--pc-ink);
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--pc-primary);
  border-color: var(--pc-primary);
  color: var(--pc-on-primary);
}

.btn-primary:hover,
.pc-page .btn-primary,
.pc-page .btn-primary:hover {
  background: var(--pc-primary);
  border-color: var(--pc-primary);
  color: var(--pc-on-primary);
}

.btn-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

.btn-meta-small {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.8;
  letter-spacing: 0.02em;
}

.btn-meta-large {
  font-size: 16px;
  font-weight: 600;
}

/* ── Hero scoreboard mockup ──────────────────────────────────────────── */

/* A pure-CSS illustration of the app's landscape score screen in Direction
   D, inside a straight phone frame (no tilt): outlined round buttons, the
   format pill, uppercase names with the gold serve point, SETS/GAMES in
   small caps over thin rules, Fraunces Black points (team 2 pistachio, team 1
   espresso), Swap sides, and the floating remote chip. Structure and strings
   verified against lib/features/score/score_screen.dart. */

.scoreboard {
  background: var(--pc-bg);
  color: var(--pc-ink);
  border: 10px solid var(--pc-bezel);
  border-radius: 32px;
  padding: 16px 20px 20px;
  box-shadow:
    0 0 0 1px var(--pc-line-strong),
    0 34px 70px -28px var(--pc-shadow),
    0 4px 14px -6px var(--pc-shadow);
  position: relative;
  overflow: hidden;
}

/* Top action bar: undo / new match · format pill · share, history, sound,
   settings. */
.score-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.score-cluster {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.score-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: clamp(24px, 6.4vw, 30px);
  height: clamp(24px, 6.4vw, 30px);
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid var(--pc-ink);
  color: var(--pc-ink);
}

/* Match format pill — centred between the two icon clusters */
.score-format-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 1 auto;
  min-width: 0;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--pc-ink);
  font-size: clamp(10.5px, 1.05vw, 12px);
  font-weight: 500;
  color: var(--pc-muted);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.score-format-chip svg {
  flex: 0 0 auto;
  color: var(--pc-ink);
}

/* Header row — stacked names + mini stats, split by a hairline rule.
   Reading order: names · SETS · GAMES │ GAMES · SETS · names */
.score-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2.2vw, 14px);
  margin-top: 16px;
}

.score-team {
  display: flex;
  align-items: center;
  gap: clamp(6px, 2.2vw, 14px);
  flex: 1 1 0;
  min-width: 0;
}

.score-team-left {
  justify-content: flex-start;
}

.score-team-right {
  justify-content: flex-end;
}

.score-names {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.score-team-left .score-names {
  align-items: flex-start;
  text-align: left;
}

.score-team-right .score-names {
  align-items: flex-end;
  text-align: right;
}

.score-name {
  font-size: clamp(12px, 1.35vw, 15px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pc-ink);
  white-space: nowrap;
  /* A flex item's default min-width is its content width, not 0 — without
     this, a name that doesn't fit the remaining space (the ES/IT stat
     labels, e.g. "JUEGOS", are wider than "GAMES" and leave less room)
     doesn't shrink, it overflows the flex item and visually overlaps the
     SETS/GAMES column next to it. Truncate instead. */
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Narrow phones (up to 380 px): the two stat columns left the name column
   too narrow, so "Casey" / "Jamie" ellipsised (bug hunt, WEB-MOCKUP-TRUNC;
   the uppercase, letter-spaced names of Direction D need more room still).
   Give the names their own line and let the stats sit under them instead of
   squeezing them. */
@media (max-width: 380px) {
  .score-team {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .score-team .score-names {
    flex: 1 0 100%;
  }
  /* The right team's names come after its stats in the markup; lift them
     above, as on the left. */
  .score-team-right .score-names {
    order: -1;
  }
}

/* Exactly one player serves at a time: the app marks that name with the
   golden point. */
.score-name-serving::before {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin: 0 0.45em 0.12em 0;
  border-radius: 50%;
  background: var(--pc-gold);
  vertical-align: middle;
}

.score-rule {
  flex: 0 0 auto;
  width: 1px;
  height: 44px;
  background: var(--pc-line-strong);
}

.score-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--pc-line-strong);
}

.score-stat-label {
  font-size: clamp(8.5px, 0.85vw, 10px);
  font-weight: 600;
  color: var(--pc-muted);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.score-stat-num {
  font-family: var(--pc-serif);
  font-size: clamp(17px, 1.9vw, 24px);
  font-weight: 500;
  line-height: 1.05;
  color: var(--pc-ink);
}

.score-stat-num-primary {
  color: var(--pc-ink);
}

/* Points — the dominant element of the card, Fraunces Black at the score
   setting. space-around lands each numeral at the centre of its half,
   matching the app's Expanded halves. */
.score-points {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 8px;
}

.score-point {
  font-family: var(--pc-serif);
  font-size: clamp(66px, 14vw, 116px);
  font-weight: 900;
  font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--pc-team1);
}

.score-point:first-child {
  color: var(--pc-team2);
}

.score-swap-row {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.score-swap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--pc-ink);
  font-size: 12px;
  font-weight: 600;
  color: var(--pc-ink);
  letter-spacing: 0.01em;
}

/* Floating remote chip — the app parks it in a corner over the score,
   draggable, rather than in a row with Swap sides. */
.score-remote {
  position: absolute;
  left: 20px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 40px);
  height: 30px;
  padding: 0 11px;
  border-radius: 15px;
  background: var(--pc-bg);
  border: 1.5px solid var(--pc-ink);
  font-size: 12px;
  font-weight: 600;
  color: var(--pc-ink);
  white-space: nowrap;
}

.score-remote-glyph {
  flex: 0 0 auto;
  color: var(--pc-gold-text);
}

.score-remote-grip {
  flex: 0 0 auto;
  color: var(--pc-muted);
}

/* The card is at its narrowest between the hero's two-column lower bound
   and the site's max container width. There all six top-bar icons overflow,
   and the floating chip would run into the centred Swap sides pill — so
   drop the two secondary icons and give the pill a band of its own. */
@media (max-width: 1040px) {
  .scoreboard {
    padding-bottom: 56px;
  }
  .score-icon-optional {
    display: none;
  }
}

/* Below the hero's single-column breakpoint the card is full width again,
   so the whole icon row fits. */
@media (max-width: 900px) {
  .score-icon-optional {
    display: inline-flex;
  }
}

@media (max-width: 640px) {
  .scoreboard {
    border-width: 8px;
    border-radius: 26px;
    padding: 14px 12px 56px;
  }
  .score-remote {
    left: 12px;
  }
  .score-icon-optional {
    display: none;
  }
  /* The format chip is the one element that can outgrow a ~320px card:
     drop its chevron and tighten padding rather than let it clip. */
  .score-format-chip svg {
    display: none;
  }
  .score-format-chip {
    padding: 4px 8px;
  }
}

/* ── Sections ────────────────────────────────────────────────────────── */

section {
  padding: 80px 0;
}

.pc-page main > section + section {
  border-top: 1px solid var(--pc-line);
}

@media (max-width: 700px) {
  section { padding: 56px 0; }
}

h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 14px;
  font-weight: 700;
}

.pc-page h2 {
  font-size: clamp(30px, 3.8vw, 44px);
  line-height: 1.08;
}

.section-intro {
  color: var(--text-muted);
  font-size: 18px;
  max-width: 600px;
  margin: 0 0 48px;
}

/* ── Feature grid ────────────────────────────────────────────────────── */

.features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 32px;
}

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

@media (max-width: 560px) {
  .features {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Thin rules, not cards. */
.feature {
  padding: 22px 0 0;
  border-top: 1px solid var(--pc-ink);
}

.feature-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--pc-line-strong);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  color: var(--pc-gold-text);
}

.feature h3 {
  font-family: var(--pc-serif);
  font-size: 21px;
  font-weight: 500;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.feature p {
  margin: 0;
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ── Pricing ─────────────────────────────────────────────────────────── */

.pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 720px) {
  .pricing { grid-template-columns: 1fr; }
}

.plan {
  padding: 32px;
  background: var(--pc-surface);
  border: 1px solid var(--pc-line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
}

/* Butter is the Pro highlight, with espresso text on it. */
.plan.featured {
  background: var(--pc-highlight);
  border-color: var(--pc-highlight);
  position: relative;
}

.plan-badge {
  position: absolute;
  top: -12px;
  right: 24px;
  background: var(--pc-primary);
  color: var(--pc-on-primary);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
}

.plan-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.plan-price {
  margin: 0 0 6px;
  font-family: var(--pc-serif);
  font-size: 46px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.plan-price small {
  font-family: var(--pc-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
}

.plan-tagline {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 24px;
}

.plan ul {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.plan li {
  font-size: 15px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--text);
}

/* The tick is a mask so it takes the theme's functional gold. */
.plan li::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-top: 4px;
  flex-shrink: 0;
  background: var(--pc-gold-text);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8.5 6.5 12 13 4.5'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8.5 6.5 12 13 4.5'/></svg>") center / contain no-repeat;
}

.plan-foot {
  margin-top: auto;
  font-size: 13px;
  color: var(--text-soft);
}

/* ── FAQ ─────────────────────────────────────────────────────────────── */

.faq {
  display: grid;
  max-width: 760px;
  border-top: 1px solid var(--pc-line-strong);
}

.faq details {
  border-bottom: 1px solid var(--pc-line-strong);
  padding: 4px 0;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 0;
  font-weight: 600;
  font-size: 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--pc-gold-text);
  font-family: var(--pc-serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
}

.faq details[open] summary::after {
  content: "−";
}

.faq p {
  margin: 0 0 18px;
  color: var(--text-muted);
  font-size: 15.5px;
  line-height: 1.6;
}

.faq p a {
  text-decoration: underline;
  text-decoration-color: var(--pc-gold);
  text-underline-offset: 3px;
}

/* ── Footer ──────────────────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--border);
  padding: 40px 0 56px;
}

.foot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: center;
}

.foot-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.foot-links a {
  font-size: 14px;
  color: var(--text-muted);
}

.copyright {
  font-size: 13px;
  color: var(--text-soft);
}

/* ── Language switcher ──────────────────────────────────────────────── */
/* Scoped to .foot-grid .lang-switch, not bare .lang-switch: website/join.html
   has its own, unrelated .lang-switch element on the same stylesheet.
   Matches .foot-links; the current page's link is visually distinct.
   Three short endonyms plus one gap-22px row comfortably fits a 360px
   phone alongside the copyright and legal links, which wrap onto their
   own line first via .foot-grid's flex-wrap. */

.foot-grid .lang-switch {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.foot-grid .lang-switch a {
  font-size: 14px;
  color: var(--text-muted);
}

.foot-grid .lang-switch a[aria-current="page"] {
  color: var(--pc-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--pc-gold);
  text-underline-offset: 4px;
}

/* ── Legal pages ─────────────────────────────────────────────────────── */

.legal {
  /* Side padding restated: the shorthand would otherwise zero the 24px
     gutter .container gives, leaving text against the edge on a phone. */
  padding: 64px 24px 80px;
  max-width: 760px;
}

.legal h1 {
  font-size: clamp(34px, 4.4vw, 48px);
  margin-bottom: 8px;
}

.legal .updated {
  color: var(--text-soft);
  font-size: 14px;
  margin: 0 0 40px;
  letter-spacing: 0.02em;
}

.legal h2 {
  font-size: 24px;
  margin: 44px 0 12px;
  letter-spacing: -0.01em;
}

.legal h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 24px 0 8px;
  letter-spacing: -0.005em;
}

.legal p,
.legal li {
  color: var(--text);
  font-size: 16px;
  line-height: 1.65;
}

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

.legal ul {
  padding-left: 22px;
  margin: 0 0 16px;
}

.legal li {
  margin-bottom: 6px;
}

.legal a {
  color: var(--pc-ink);
  text-decoration: underline;
  text-decoration-color: var(--pc-gold);
  text-underline-offset: 3px;
}

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

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

.legal th {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--surface);
}

.legal tr:last-child td {
  border-bottom: none;
}

.legal .callout {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--pc-gold);
  border-radius: var(--radius);
  margin: 16px 0 24px;
  font-size: 15px;
  color: var(--text-muted);
}

/* Four cards sit as two pairs on wide screens rather than three plus an
   orphan. Narrow screens keep the shared two-column and one-column rules. */
@media (min-width: 880px) {
  .features-2x2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.section-more {
  margin: 40px 0 0;
  font-size: 16px;
}

.section-more a {
  color: var(--pc-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--pc-gold);
  text-underline-offset: 4px;
}

/* ── Guides ──────────────────────────────────────────────────────────── */
/* Guide pages reuse the .legal reading column; these add the breadcrumb,
   the closing app box and a scroll wrapper so wide tables never push the
   page sideways on a phone. */

.guide-crumbs {
  font-size: 14px;
  color: var(--text-soft);
  margin: 0 0 20px;
}

.guide-crumbs a {
  color: var(--text-soft);
}

.guide .lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 32px;
}

.guide .table-wrap {
  overflow-x: auto;
  margin: 16px 0 24px;
}

.guide .table-wrap table {
  margin: 0;
  min-width: 520px;
}

.guide-cta {
  margin: 48px 0 0;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.guide-cta h2 {
  margin-top: 0;
}

.guide-cta .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.guide .guide-cta a.btn {
  text-decoration: none;
}

.guide .guide-cta a.btn-primary {
  color: var(--pc-on-primary);
}

.guide-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.guide .guide-list li {
  margin: 0 0 16px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.guide-list h2 {
  font-size: 20px;
  margin: 0 0 6px;
}

.guide-list p {
  margin: 0;
}