/* Paddle and Rally: clubhouse scoreboard meets court lines.
   Design system, Oct 17, 2026. Fresh system in the house tradition:
   the sport's own data is the visual system (ratings, scores, counts),
   disciplined type, one strong artifact (the rating card).
   Palette: court green, hardcourt blue, optic yellow used sparingly
   (ball color), warm off-white paper.
   Type: Barlow Condensed (poster display), Inter (body),
   IBM Plex Mono (every rating, score, and price). */

:root {
  --paper: #FAF6EC;
  --paper-2: #F2ECDA;
  --ink: #132019;
  --court: #17603E;
  --court-deep: #0C3524;
  --court-ink: #0A2A1C;
  --hard: #1F5FA6;
  --hard-deep: #173F6E;
  --optic: #DCE94A;
  --optic-dim: #B9C93A;
  --line: #D9D0B6;
  --line-pale: #E6DFC8;
  --muted: #55645A;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.62;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

h1, h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: 0.015em;
  margin: 0 0 0.45em 0;
  font-weight: 600;
}
h1 { font-size: clamp(2.7rem, 6.4vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-top: 0; }
h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.15;
  margin: 0 0 0.35em 0;
}
p { margin: 0 0 1em 0; }
a { color: var(--ink); text-decoration-color: var(--court); text-underline-offset: 3px; }
a:hover { color: var(--court); }

.kicker {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--court);
  margin: 0 0 0.9em 0;
}
.lede { font-size: 1.14rem; line-height: 1.6; max-width: 46em; }

/* Header */
header.site {
  background: var(--court-deep);
  color: var(--paper);
  border-bottom: 4px solid var(--optic);
}
header.site .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px;
}
header.site .brand {
  font-family: var(--font-display);
  font-size: 1.85rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--paper); text-decoration: none;
  line-height: 1;
}
header.site .brand small {
  display: block; font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.22em; font-weight: 400; color: var(--optic);
  text-transform: uppercase; margin-top: 5px;
}
nav.main { display: flex; gap: 4px; flex-wrap: wrap; }
nav.main a {
  color: var(--paper); text-decoration: none; font-family: var(--font-mono);
  font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 11px; border: 1px solid transparent;
}
nav.main a:hover { border-color: var(--optic); color: var(--optic); }

/* Scoreboard hero: dark panel, court lines, mono readouts */
.hero-board {
  background:
    linear-gradient(transparent 0, transparent 100%),
    var(--court-deep);
  color: var(--paper);
  padding: 54px 0 0 0;
  position: relative;
}
.hero-board::before {
  content: ""; position: absolute; inset: 14px;
  border: 2px solid rgba(250,246,236,0.28); pointer-events: none;
}
.hero-board::after {
  content: ""; position: absolute; top: 14px; bottom: 14px; left: 50%;
  width: 2px; background: rgba(250,246,236,0.16); pointer-events: none;
}
.hero-board .wrap { position: relative; z-index: 1; padding-bottom: 40px; }
.hero-board h1 { color: var(--paper); }
.hero-board h1 .ball { color: var(--optic); }
.hero-board .kicker { color: var(--optic); }
.hero-board .lede { color: #E9E4D2; }
.hero-board a { color: var(--paper); }

.ticker {
  border-top: 2px solid rgba(250,246,236,0.28);
  margin-top: 34px;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.ticker .cell {
  padding: 14px 18px 16px;
  border-right: 2px solid rgba(250,246,236,0.16);
}
.ticker .cell:last-child { border-right: 0; }
.ticker .num {
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem); color: var(--optic);
  display: block; line-height: 1.1;
}
.ticker .lab {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: #CFC9AF; display: block; margin-top: 4px;
}

/* Buttons */
.btn {
  display: inline-block; font-family: var(--font-mono); font-size: 0.86rem;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  background: var(--court); color: #fff; padding: 12px 20px;
  border: 2px solid var(--court); margin: 4px 8px 4px 0;
}
.btn:hover { background: var(--court-deep); color: var(--optic); border-color: var(--court-deep); }
.btn.alt { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.alt:hover { color: var(--court); border-color: var(--court); }
.hero-board .btn { background: var(--optic); border-color: var(--optic); color: var(--court-ink); }
.hero-board .btn:hover { background: var(--paper); border-color: var(--paper); color: var(--court-ink); }
.hero-board .btn.alt { background: transparent; color: var(--paper); border-color: var(--paper); }
.hero-board .btn.alt:hover { color: var(--optic); border-color: var(--optic); }

/* Sections */
section.block { padding: 52px 0; }
section.block.tint { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
section.block.blue { background: var(--hard-deep); color: var(--paper); }
section.block.blue h2, section.block.blue h3 { color: var(--paper); }
section.block.blue .kicker { color: var(--optic); }
section.block.blue a { color: var(--paper); }

/* Doors */
.doors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 26px; }
.door {
  background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--court);
  padding: 24px 24px 20px; position: relative;
}
.door.blue { border-top-color: var(--hard); }
.door h3 { font-size: 1.7rem; }
.door p { font-size: 0.98rem; }
.door .go { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.chip {
  display: inline-block; font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 8px;
  border: 1px solid var(--court); color: var(--court); margin-bottom: 12px;
}
.chip.live { background: var(--court); color: #fff; }
.chip.work { border-color: #9A7B1E; color: #9A7B1E; }
.chip.early { border-color: var(--hard); color: var(--hard); }

/* Cluster cards on section hubs */
.clusters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 26px; }
.cluster { background: #fff; border: 1px solid var(--line); padding: 24px; }
.cluster.wide { grid-column: 1 / -1; }
.cluster h3 { font-size: 1.55rem; }
.cluster .promise { color: var(--muted); font-size: 0.97rem; }
ul.slots { list-style: none; margin: 14px 0 0 0; padding: 0; }
ul.slots li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--line-pale); font-size: 0.97rem;
}
ul.slots li:first-child { border-top: 0; }
ul.slots .st {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
ul.slots .st.prod { color: #9A7B1E; }
ul.slots a { font-weight: 600; }

/* Kit slot */
.kitband { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; }
.kit-form { display: flex; gap: 0; }
.kit-form input[type="email"] {
  flex: 1; font-family: var(--font-mono); font-size: 0.92rem;
  padding: 12px 14px; border: 2px solid var(--ink); background: #fff; min-width: 0;
}
.kit-form button {
  font-family: var(--font-mono); font-size: 0.84rem; letter-spacing: 0.06em;
  text-transform: uppercase; background: var(--ink); color: var(--paper);
  border: 2px solid var(--ink); padding: 12px 18px; cursor: not-allowed; opacity: 0.55;
}
.slot-note { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--muted); margin-top: 10px; }

/* Estimator */
.qprogress { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--court); }
fieldset.domain {
  border: 1px solid var(--line); background: #fff; margin: 0 0 20px 0; padding: 20px 22px;
}
fieldset.domain legend {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 1.3rem; font-weight: 600; padding: 0 8px; color: var(--court-deep);
}
.q { margin: 0 0 16px 0; }
.q:last-child { margin-bottom: 2px; }
.q .qtext { font-weight: 600; margin: 0 0 8px 0; }
.opt { display: block; border: 1px solid var(--line-pale); padding: 9px 13px; margin: 0 0 7px 0; cursor: pointer; font-size: 0.97rem; }
.opt:hover { border-color: var(--court); }
.opt input { margin-right: 9px; accent-color: var(--court); }
.opt:has(input:checked) { border-color: var(--court); background: #EFF5E9; box-shadow: inset 3px 0 0 var(--court); }
.formmsg { font-family: var(--font-mono); font-size: 0.85rem; color: #9A3412; min-height: 1.3em; }

/* The rating card: the signature artifact. A club scoreboard readout. */
.rating-card {
  background: var(--court-deep); color: var(--paper);
  border: 3px solid var(--court-ink); padding: 0; margin: 26px 0;
  box-shadow: 10px 10px 0 rgba(12,53,36,0.18);
}
.rating-card .rc-head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 2px solid rgba(250,246,236,0.25); padding: 12px 20px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
}
.rating-card .rc-head .dot { color: var(--optic); }
.rating-card .rc-main { display: grid; grid-template-columns: 220px 1fr; gap: 0; }
.rating-card .rc-level {
  border-right: 2px solid rgba(250,246,236,0.25); padding: 22px 20px; text-align: center;
}
.rating-card .rc-level .big {
  font-family: var(--font-mono); font-weight: 600; font-size: 4.6rem; line-height: 1; color: var(--optic);
}
.rating-card .rc-level .lab { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: #CFC9AF; display: block; margin-top: 8px; }
.rating-card .rc-body { padding: 20px 22px; }
.rating-card .rc-band { font-family: var(--font-mono); font-size: 1.02rem; color: var(--paper); margin: 0 0 4px 0; }
.rating-card .rc-conf { font-family: var(--font-mono); font-size: 0.8rem; color: #CFC9AF; margin: 0 0 14px 0; }
.rc-domains { font-family: var(--font-mono); font-size: 0.82rem; margin: 0 0 16px 0; }
.rc-domains .row { display: grid; grid-template-columns: 118px 1fr 30px; gap: 10px; align-items: center; padding: 3px 0; }
.rc-domains .bar { height: 8px; background: rgba(250,246,236,0.18); position: relative; }
.rc-domains .bar i { position: absolute; inset: 0 auto 0 0; background: var(--optic); display: block; }
.rc-domains .row.low .bar i { background: #E8734A; }
.rc-domains .row.low .nm { color: #F0B79E; }
.rating-card h4 {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--optic); margin: 16px 0 6px 0; font-weight: 500;
}
.rating-card h4:first-child { margin-top: 0; }
.rating-card p, .rating-card li { font-size: 0.98rem; color: #EDE8D6; }
.rating-card ul { margin: 0 0 6px 0; padding-left: 20px; }
.mathbox {
  background: var(--paper-2); border: 1px solid var(--line); padding: 18px 20px;
  font-family: var(--font-mono); font-size: 0.88rem; line-height: 1.7; overflow-x: auto;
}
.disclaimer { font-size: 0.9rem; color: var(--muted); border-left: 4px solid var(--optic-dim); padding: 4px 0 4px 16px; }

/* Comparison table (padel) */
table.diff { border-collapse: collapse; width: 100%; margin: 18px 0; background: #fff; }
table.diff th, table.diff td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; font-size: 0.97rem; vertical-align: top; }
table.diff th { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.05rem; background: var(--paper-2); }
table.diff td:first-child { font-family: var(--font-mono); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--court-deep); width: 130px; }

/* Footer */
footer.site { background: var(--court-ink); color: #CFC9AF; padding: 34px 0 40px; margin-top: 0; }
footer.site .brandline { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.3rem; color: var(--paper); }
footer.site p { font-size: 0.9rem; margin: 6px 0; }
footer.site a { color: var(--optic); }

@media (max-width: 760px) {
  .ticker { grid-template-columns: repeat(2, 1fr); }
  .ticker .cell { border-bottom: 2px solid rgba(250,246,236,0.16); }
  .doors, .clusters, .kitband { grid-template-columns: 1fr; }
  .rating-card .rc-main { grid-template-columns: 1fr; }
  .rating-card .rc-level { border-right: 0; border-bottom: 2px solid rgba(250,246,236,0.25); }
  .rc-domains .row { grid-template-columns: 96px 1fr 26px; }
}