/* Pricing page, October 13, 2026 (Fable, overnight round). The System and Academy language on the prices:
   navy and court blue surfaces, lime actions, heavy Outfit headings with the curvy lime underline on the key
   words, one icon system (lime line icons on navy tiles), cards with the 16 px radius and the inset hairline,
   generous spacing and the calm reveal on scroll (script.js adds is-reveal-ready and is-visible to every
   [data-reveal] block, styles.css draws the fade). The player plans sit on navy as three cards, the club
   plan sits on that same navy as one dark card with one monthly price (Oct 13, 2026, r35: the warm band went, so
   both plan bands read as one design), and the questions close the
   page. Every section sits on the site's 1280 px shell, so headings and cards share one left edge with the
   header and footer. The fine print lives on legal.html, section 8, and the page links to it.
   Loaded after styles.css and currency-switch.css. */
.pricing-1013 { --warm: #f4f2eb; --warm-ink: #0b1226; --warm-muted: #4b5570; --warm-body: #2a3350; --warm-line: rgba(11, 18, 38, 0.14); --court: #111d36; --court-lit: #172746; --card: #0f192f; --stage: #070b14; --quiet: #a8b5ca; --soft: #d5deee; background: var(--navy); }
html, body { scroll-snap-type: none; }
.pricing-1013 main { overflow: clip; }
.pricing-1013 button { font-family: inherit; }
.pricing-1013 .icon { flex-shrink: 0; }
.pricing-1013 .section-title { font-weight: 800; letter-spacing: -0.03em; }
.pricing-1013 .band { padding-block: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.pricing-1013 .band-title { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; max-width: 18ch; text-wrap: balance; }
.pricing-1013 .band-deck { margin-top: 12px; color: var(--muted); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; max-width: 56ch; text-wrap: pretty; }
.pricing-1013 .band-head { display: flex; justify-content: space-between; align-items: end; gap: 16px 40px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 36px); }
.pricing-1013 .band-head .band-deck { margin-top: 0; }
/* The short qualifiers the law needs next to a price: 13 px, the page's quiet ink, links in ink with a lime line. */
.pricing-1013 .fine { color: var(--quiet); font-size: 13px; line-height: 1.6; max-width: 100ch; text-wrap: pretty; }
.pricing-1013 .fine + .fine { margin-top: 6px; }
.pricing-1013 .fine a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 3px; }
.pricing-1013 .fine a:hover { color: var(--lime); }
/* Anchors other pages land on (#players, #clubs) sit clear of the sticky header. */
.pricing-1013 [id] { scroll-margin-top: 88px; }

/* The curved stroke sits in its own space below the words. Long phrases may wrap on narrow screens. */
.hl-mark { position: relative; display: inline-block; max-width: 100%; padding-bottom: 14px; background: transparent; color: inherit; vertical-align: baseline; }
.title-swoosh { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 14px; overflow: visible; fill: none; stroke: var(--lime); stroke-width: 7; stroke-linecap: round; pointer-events: none; }
/* The Academy card uses lime words and the title swoosh at paragraph size. */
.hl-mark.hl-lime { color: var(--lime); }
.plan-text .hl-mark { padding-bottom: 6px; margin-bottom: -2px; font-weight: 600; }
.plan-text .title-swoosh { height: 6px; stroke-width: 3.5; }
.plan-perks .hl-mark { padding-bottom: 6px; margin-bottom: -2px; font-weight: 600; }
.plan-perks .title-swoosh { height: 6px; stroke-width: 3.5; }

/* The icon system: a 24 grid, 1.75 lime strokes, round caps, on a 48 px navy tile with a soft lime halo. */
.pillar-icon { flex: 0 0 auto; box-sizing: border-box; width: 48px; height: 48px; padding: 10px; border-radius: 13px; background: var(--warm-ink); box-shadow: 0 0 0 1px #c8e84a4d, 0 0 0 5px #c8e84a1a; fill: none; stroke: var(--lime); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pillar-icon .pillar-dot { fill: var(--lime); stroke: none; }
.pillar-text { min-width: 0; }

/* Controls: a small label beside a pill switch. The currency switch comes from currency-switch.css, and the
   billing and contract switches take the same pill shape, so the four switches on the page read as one family. */
.control { display: flex; align-items: center; gap: 12px; }
.control-label { color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; }
.pill-switch { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; min-height: 36px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.pill-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; touch-action: manipulation; }
.pill-switch button:hover:not(:disabled):not([aria-pressed="true"]) { background: rgba(187, 206, 245, 0.12); }
.pill-switch button[aria-pressed="true"] { background: var(--lime); color: var(--navy); }
.pill-switch button:disabled { opacity: 0.48; cursor: not-allowed; }
.pill-switch button:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--lime); outline-offset: 3px; }
.save-badge { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 8px; border-radius: 999px; background: #c8e84a29; color: var(--lime); font-size: 11.5px; font-weight: 750; letter-spacing: 0.01em; line-height: 1.2; }
.pill-switch button[aria-pressed="true"] .save-badge { background: var(--navy); color: var(--lime); }

/* 1. Hero: the pill, the headline with the curvy underline, one line, two doors down the page and the tax line. */
.pricing-1013 .hero { position: relative; padding-block: clamp(24px, 3vw, 36px) clamp(44px, 5.5vw, 72px); background: linear-gradient(180deg, #121d38 0%, #0c1220 42%, var(--navy) 100%); }
.hero-intro { max-width: 1250px; margin-top: 72px; margin-inline: auto; text-align: center; }
.hero-pill { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 7px 14px 7px 12px; border: 1px solid #c8e84a4d; border-radius: 999px; background: #c8e84a12; color: var(--lime); font-size: 13px; font-weight: 650; line-height: 1.3; letter-spacing: 0.02em; }
.hero-pill-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px #c8e84a26; }
.hero h1 { max-width: 18ch; margin-inline: auto; font-size: clamp(44.8px, 5.76vw, 83.2px); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
/* The curvy underline scales with the headline: a heavier stroke and more room than under a band title. */
.hero h1 .hl-mark { padding-bottom: clamp(14px, 1.4vw, 20px); }
.hero h1 .title-swoosh { height: clamp(14px, 1.4vw, 20px); stroke-width: 9; }
.hero-line { margin: 14px auto 0; max-width: 58ch; color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; text-wrap: balance; }
.hero .actions { justify-content: center; gap: 10px 14px; margin-top: 24px; }
.hero-support { margin-top: 12px; color: var(--muted); font-size: 14px; }

/* 2. For players: the band head, the two switches, three plan cards, the two extras and the short notes. */
.plan-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-bottom: clamp(20px, 2.4vw, 28px); }
.plan-controls .control-note { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: clamp(22px, 2.2vw, 30px); border-radius: 16px; background: var(--court); box-shadow: inset 0 0 0 1px #ffffff14, 0 24px 60px #0004; }
/* The two in one plan carries a lime edge and a lime flag, nothing else changes. */
.plan-card-featured { background: var(--court-lit); box-shadow: inset 0 0 0 1.5px var(--lime), 0 24px 60px #0006; }
.plan-flag { position: absolute; top: -13px; left: clamp(22px, 2.2vw, 30px); margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--lime); color: var(--navy); font-size: 12px; font-weight: 800; letter-spacing: 0.02em; line-height: 1.4; }
.plan-card h3 { font-size: clamp(22px, 1.8vw, 26px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.plan-card .plan-text { margin: 0; color: var(--soft); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
@media (min-width: 1000px) {
  .player-plans .plan-text { min-height: 4.65em; }
}
@media (min-width: 1000px) and (max-width: 1279px) {
  .player-plans h3 { min-height: 2.3em; }
}
/* The price block: the amount and its unit on one line, then whatever yearly billing adds (the struck monthly
   price above, the yearly total and the saving pill below). player-pricing.js fills the hidden parts. */
.plan-price { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; column-gap: 8px; row-gap: 4px; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.plan-price > * { grid-column: 1 / -1; margin: 0; }
.plan-price > strong { grid-column: 1; font-size: clamp(30px, 2.6vw, 40px); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; white-space: nowrap; }
.plan-price > .price-unit { grid-column: 2; color: var(--muted); font-size: 15px; font-weight: 600; }
.plan-price .price-was { color: var(--quiet); font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.plan-price .price-period { color: var(--quiet); font-size: 13px; }
.plan-price .price-total { color: var(--soft); font-size: 14px; line-height: 1.5; }
.plan-price .saving-pill { justify-self: start; display: inline-flex; align-items: center; min-height: 26px; margin-top: 4px; padding: 3px 11px; border-radius: 999px; background: #c8e84a24; color: var(--lime); font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.plan-saving { margin: 0; color: var(--lime); font-size: 14px; font-weight: 600; line-height: 1.5; text-wrap: pretty; }
/* Oct 14, 2026 (Fable, r44 polish): the strengths sit as their own band under the price, with the same hairline and
   18 px the price block uses, so each card reads name, price, strengths, action. */
.plan-perks { list-style: none; margin: 6px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.plan-perks li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.45; }
.plan-perks .icon { width: 18px; height: 18px; flex-basis: 18px; margin-top: 2px; color: var(--lime); }
.plan-perks small { display: inline; color: var(--muted); font-size: inherit; font-weight: 400; }
.plan-cta { justify-content: center; gap: 12px; margin-top: auto; min-height: 50px; font-size: 14px; }
.plan-cta .icon { width: 18px; height: 18px; flex-basis: 18px; }
/* The one match and the coach review: two quieter cards, each opened by its tile. */
.plan-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: clamp(16px, 2vw, 24px); }
.extra-card { display: flex; align-items: flex-start; gap: 18px; min-width: 0; padding: clamp(20px, 2vw, 26px); border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px #ffffff14; }
.extra-card h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.extra-card p { margin: 8px 0 0; color: var(--soft); font-size: 15px; line-height: 1.55; max-width: 44ch; text-wrap: pretty; }
.extra-card p strong { color: var(--ink); font-size: 18px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.extra-card .text-link { gap: 10px; margin-top: 4px; color: var(--lime); font-size: 13px; }
.extra-card .text-link:hover { color: var(--ink); }
.plan-notes { margin-top: clamp(22px, 2.6vw, 32px); padding-top: 22px; border-top: 1px solid var(--line); }

/* The price settle: a short motion on the numbers that changed (player-pricing.js marks the grid is-switching,
   and the saving pill), so the visitor sees the update. */
@keyframes price-settle { from { opacity: 0.35; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .player-plans.is-switching .plan-price > strong, .player-plans.is-switching .price-was, .player-plans.is-switching .saving-pill { animation: price-settle 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
}

/* 4. Questions. */
.questions .faq-layout { display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); gap: 32px 56px; align-items: start; }
.questions .faq-answer p + p { margin-top: 0; }
.faq-all-link { margin-top: 20px; }

/* Calm under reduced motion: nothing slides and nothing settles. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pricing-1013 *, .pricing-1013 *::before, .pricing-1013 *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

/* Band heads: the deck's baseline meets the title's last line. The 14 px matches the room the curvy
   underline takes below the title. */
@media (min-width: 761px) {
  .band-head .band-deck { margin-bottom: 14px; }
}
@media (min-width: 1000px) {
  .band-head .band-deck { flex: 1 1 0; min-width: 0; text-align: right; text-wrap: balance; }
}
@media (min-width: 861px) and (max-height: 900px) {
  .pricing-1013 .hero { padding-top: 22px; }
  .hero .actions { margin-top: 20px; }
}
@media (min-width: 861px) and (max-width: 999px) {
  .pricing-1013 .nav-shell { padding-inline: 24px; }
  .pricing-1013 .nav-cta { gap: 8px; }
}
@media (max-width: 1120px) {
  .plan-grid { gap: 14px; }
  .plan-card { padding: 20px; }
}
@media (max-width: 999px) {
  /* Three columns would be too narrow to read, so the plans stack on one centred column. */
  .plan-grid, .plan-extras { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .plan-notes { max-width: 560px; margin-inline: auto; }
  .questions .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 860px) {
  .hero-intro { margin-top: 32px; }
}
@media (max-width: 700px) {
  .pricing-1013 .band { padding-block: 48px; }
  .pricing-1013 .hero { padding-top: 28px; padding-bottom: 44px; }
  .hero h1 { max-width: none; font-size: clamp(33.6px, 9.44vw, 57.6px); }
  .hero h1 .hl-mark { padding-bottom: 12px; }
  .hero h1 .title-swoosh { height: 12px; stroke-width: 7; }
  .hero .actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero .actions a { justify-content: center; width: 100%; }
  /* Phones place each pricing control label above its switch. */
  .plan-controls { gap: 14px; }
  /* R47: reserve the loaded yearly saving badge height so delayed pricing cannot move the cards. */
  .plan-controls .billing-switch { min-height: 64px; }
  .plan-controls .control { flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 8px; }
  /* The live notes grow when the price file arrives (the billing note from one line to two, the currency note the
     same), so on phones they reserve those lines up front and the plan cards never move after first paint. */
  .plan-controls .control-note { min-height: 3em; }
  .plan-notes [data-player-currency-note] { min-height: 3.2em; }
  .club-plan-controls .control { flex-direction: column; align-items: stretch; gap: 8px; }
  .control .currency-switch, .pill-switch { width: 100%; }
  .pill-switch { align-items: stretch; }
  .pill-switch button { flex: 1 1 0; flex-direction: column; gap: 3px; min-width: 0; min-height: 54px; padding: 6px 10px; white-space: normal; text-align: center; text-wrap: balance; }
  .plan-card, .extra-card { border-radius: 12px; }
  .pillar-icon { width: 40px; height: 40px; padding: 8px; }
  .extra-card { gap: 14px; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 33.6px; }
  /* The narrowest phones: the switch buttons give up some side padding so Month to month stays on one line, and the
     billing note, which runs to three lines here, reserves the third. */
  .pill-switch button { padding-inline: 6px; }
  .currency-switch button[data-currency] { min-width: 0; padding-inline: 6px; }
  .plan-controls .control-note { min-height: 4.5em; }
}

/* Oct 14, 2026: plan notes under the camera lists. */
.plan-note { margin: -4px 0 0; color: var(--quiet); font-size: 12px; line-height: 1.5; }

/* 3. For clubs, on the same navy as the player plans. Oct 15, 2026, r70 (Fable): one card used to mix the cost with
   the earnings, so a club owner could read the net figure as the price. The calculator is now two separate cards,
   side by side from 1000 px and stacked on phones. Part 1, Price your club, is the neutral navy cost card: the
   currency and contract switches, the courts stepper, the monthly fee in the page ink, the one time camera cost
   month to month, the free camera row and the six ticks. Part 2, Calculate your potential earnings, carries the
   lime accent (a lime top edge, a soft lime wash, the lime step numeral and the lime underline in its heading): the
   hourly price and regular players, the monthly ledger with the Part 1 fee carried over in red, the net in lime,
   the offer action, the assumptions, the disclaimer and the footnote. clubs.js still writes every amount inside
   the one [data-calculator] group that wraps both cards, and the three input rows keep one shared control column. */
.clubs-band { background: var(--navy); }
.club-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.club-calculator { --calc-line: rgba(187, 206, 245, 0.17); --calc-line-strong: rgba(187, 206, 245, 0.58); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); align-items: stretch; min-width: 0; color: var(--ink); color-scheme: dark; }
.club-calculator :focus-visible { outline-color: var(--lime); }
/* Each part is a dark card with the plan cards' hairline and shadow. Earnings also carry a lime top edge. */
.calc-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 16px; background: var(--card); box-shadow: 0 24px 60px #0004, inset 0 0 0 1px #ffffff14; }
.calc-potential { background: linear-gradient(180deg, #c8e84a14 0%, #c8e84a00 260px), var(--card); }
.calc-potential::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--lime); }
/* The card head: a step numeral, the heading and one line under it (the sub line in the cost card, the live court
   count in the earnings card). */
.calc-head { display: flex; align-items: flex-start; gap: 14px; padding: clamp(22px, 2.4vw, 30px) clamp(20px, 2.4vw, 30px) 18px; }
.calc-potential .calc-head { padding-top: calc(clamp(22px, 2.4vw, 30px) + 6px); }
.calc-step { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-top: -3px; border-radius: 50%; background: var(--lime); color: var(--navy); box-shadow: none; font-size: 15px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.calc-head-copy { min-width: 0; }
.calc-head h3 { font-size: clamp(22px, 1.8vw, 26px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
.calc-head h3 .hl-mark { padding-bottom: 8px; margin-bottom: -3px; }
.calc-head h3 .title-swoosh { height: 8px; stroke-width: 4.5; }
.calc-head p { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.calc-head .calc-cost-label { color: var(--soft); font-weight: 600; }
.calc-cost-label .hl-mark { padding-bottom: 6px; margin-bottom: -2px; }
.calc-cost-label .title-swoosh { height: 6px; stroke-width: 3.5; }
.calc-courts-live { color: var(--soft); font-weight: 600; font-variant-numeric: tabular-nums; }
/* The two settings: a small label above each switch, side by side while they fit, full width on phones. */
.calc-settings { display: flex; flex-wrap: wrap; gap: 14px 24px; margin: 0 clamp(20px, 2.4vw, 30px) 20px; }
.calc-settings .control { display: grid; gap: 8px; justify-items: start; min-width: 0; max-width: 100%; }
@media (min-width: 761px) {
  .calc-settings .currency-switch button, .calc-settings .period-toggle button { min-width: 44px; min-height: 44px; }
}
/* The input rows: courts in the cost card, hourly price and players in the earnings card. All three share the
   ledger inset, one 178 px control column and the same dividers, so the questions line up across both cards. */
.calc-inputs { --calc-control-width: 178px; display: grid; grid-auto-rows: 1fr; margin: 0 clamp(20px, 2.4vw, 30px) 20px; border-top: 1px solid var(--calc-line); }
.calc-input-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--calc-control-width); grid-template-rows: minmax(50px, 1fr) auto; align-items: center; gap: 8px 16px; min-width: 0; min-height: 110px; padding: 18px 0 12px; border-bottom: 1px solid var(--calc-line); }
.calc-input-copy { display: grid; gap: 4px; min-width: 0; }
.calc-input-control { grid-column: 2; justify-self: end; width: 100%; min-width: 0; height: 50px; }
.calc-input-row .courts-label { line-height: 1.4; }
.courts-label { font-size: 15px; font-weight: 700; }
.courts-stepper { display: inline-grid; grid-template-columns: 46px minmax(0, 1fr) 46px; align-items: stretch; overflow: hidden; border: 1px solid var(--calc-line-strong); border-radius: 10px; background: var(--stage); }
.courts-step { display: grid; place-items: center; min-height: 48px; border: 0; background: transparent; color: var(--ink); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.courts-step:hover:not(:disabled) { background: var(--court-lit); }
.courts-step:focus-visible { outline: 3px solid var(--lime); outline-offset: -3px; }
.courts-step:disabled { color: #acb9d166; cursor: not-allowed; }
.courts-step .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.courts-stepper input { width: 100%; min-width: 0; border: 0; border-inline: 1px solid var(--calc-line); background: transparent; color: var(--ink); font: inherit; font-size: 22px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; caret-color: var(--lime); }
.courts-stepper input::-webkit-outer-spin-button, .courts-stepper input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.courts-stepper input:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.courts-stepper input[aria-invalid="true"] { color: #ffc9bf; }
.calc-number-field { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 50px; padding: 0 12px; border: 1px solid var(--calc-line-strong); border-radius: 10px; background: var(--stage); }
.calc-number-field > span { flex: 0 0 auto; color: var(--muted); font-size: 14px; font-weight: 700; }
.calc-number-field input { width: 100%; min-width: 0; min-height: 48px; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 22px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; caret-color: var(--lime); }
.calc-number-field input::-webkit-outer-spin-button, .calc-number-field input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.calc-number-field:focus-within { outline: 2px solid var(--lime); outline-offset: 2px; }
.calc-number-field input:focus-visible { outline: none; }
.calc-number-field input[aria-invalid="true"] { color: #ffc9bf; }
.courts-help { margin: 0; color: var(--muted); font-size: 13px; }
.calc-input-note { grid-column: 1 / -1; min-height: 3em; margin: 0; color: #ffd2ca; font-size: 13px; line-height: 1.5; }
/* Oct 14, 2026 (Fable, r44 polish): from 761 px every validation message fits one line, so that is the space reserved. */
@media (min-width: 761px) {
  .calc-input-row .calc-input-note { min-height: 1.5em; }
}
/* The fee: what the club pays, in the page ink and never lime, so it cannot be read as the earnings figure. The
   courts row's divider above it is the only line, then the one time camera cost (month to month) and the camera row. */
.calc-result { margin: 0 clamp(20px, 2.4vw, 30px); padding: 6px 0 24px; }
.calc-result-copy { display: grid; gap: 4px; min-width: 0; }
.calc-fee-label { margin: 0 0 4px; font-size: 17px; font-weight: 750; letter-spacing: -0.01em; line-height: 1.25; }
.calc-label { margin: 0; color: var(--muted); font-size: 13px; font-weight: 650; letter-spacing: 0.02em; }
.calc-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.calc-total strong { color: var(--ink); font-size: clamp(32px, 3vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.calc-total span { font-size: 15px; font-weight: 600; }
.calc-rate { margin: 0; color: var(--muted); font-size: 14px; }
.calc-plan { margin: 6px 0 0; max-width: 46ch; color: var(--soft); font-size: 14px; line-height: 1.45; }
/* Month to month only: the one time camera purchase sits under the monthly fee as a cost, never in any monthly net. */
.ledger-onetime { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-width: 0; margin: 0 clamp(20px, 2.4vw, 30px) 20px; padding: 14px 0; border-block: 1px solid var(--calc-line); }
.ledger-onetime .ledger-label { max-width: 26ch; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.45; }
/* The camera row: lime on the contract, a quiet nudge month to month. */
.camera-offer { min-height: 74px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 clamp(20px, 2.4vw, 30px) 20px; padding: 14px 18px; border: 1px solid var(--calc-line-strong); border-radius: 12px; background: var(--stage); transition: border-color 0.2s ease, background-color 0.2s ease; }
.camera-offer.is-free { border-color: var(--lime); background: #c8e84a14; }
.camera-offer-icon { width: 24px; height: 24px; flex-basis: 24px; color: var(--muted); }
.camera-offer.is-free .camera-offer-icon { color: var(--lime); }
.camera-pill { padding: 3px 10px; border-radius: 999px; background: var(--lime); color: var(--navy); font-size: 12px; font-weight: 800; white-space: nowrap; }
.camera-offer-text { flex: 1 1 240px; margin: 0; font-size: 15px; font-weight: 650; line-height: 1.4; font-variant-numeric: tabular-nums; }
.camera-offer.is-free .camera-offer-text { font-size: 16px; font-weight: 750; }
.camera-switch { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--lime); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.camera-switch:hover { text-decoration-thickness: 2px; }
.camera-switch:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }
.camera-switch .icon { width: 16px; height: 16px; flex-basis: 16px; }
/* The six ticks close the cost card in one column, in the same style as the player cards. */
.club-calculator .club-perks { margin: 0 clamp(20px, 2.4vw, 30px); padding: 18px 0 26px; border-top: 1px solid var(--calc-line); grid-template-columns: minmax(0, 1fr); column-gap: 24px; }
@media (max-width: 760px) { .club-calculator .club-perks { grid-template-columns: minmax(0, 1fr); } }
/* The monthly ledger: the two estimated gains, the Part 1 fee carried over in red, then the net in lime. The camera
   purchase has no place here: it sits under the fee in the cost card. */
.calc-value { margin: 0 clamp(20px, 2.4vw, 30px); padding: 0 0 28px; }
.value-ledger { list-style: none; margin: 0; padding: 0; }
.ledger-line, .ledger-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-width: 0; padding: 14px 0; border-bottom: 1px solid var(--calc-line); }
/* The fee row carries a second line naming where the figure comes from, with the amount still on the first line. */
.ledger-line-noted { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 3px; }
.ledger-line-noted .ledger-label { grid-area: 1 / 1; }
.ledger-line-noted .ledger-note { grid-area: 2 / 1; margin: 0; color: var(--muted); font-size: 13px; font-weight: 500; line-height: 1.4; }
.ledger-line-noted .ledger-amount { grid-area: 1 / 2; }
/* Only month to month has a separate camera purchase. Hidden offer controls and rows take no space. */
.club-calculator [hidden] { display: none !important; }
.ledger-label { display: grid; gap: 3px; min-width: 0; color: var(--ink); font-size: 16px; font-weight: 650; line-height: 1.35; }
.ledger-label small { color: var(--muted); font-size: 13px; font-weight: 500; line-height: 1.4; }
.ledger-amount { flex: 0 0 auto; color: var(--ink); font-size: clamp(18px, 2.2vw, 22px); font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.ledger-amount.is-cost { color: #ff8a80; }
.ledger-total { padding: 20px 0 6px; border-bottom: 0; }
.ledger-total .ledger-label { font-size: 18px; font-weight: 800; }
.ledger-total .ledger-amount { font-size: clamp(28px, 2.6vw, 36px); }
.ledger-total.is-positive .ledger-amount { color: var(--lime); }
.ledger-total.is-negative .ledger-amount { color: #ff8a80; }
.calc-value-action { margin-top: 22px; }
.calc-value-action .button-dark { min-height: 50px; gap: 12px; padding-inline: 20px; font-size: 14px; }
.calc-value-action .icon { width: 18px; height: 18px; }
.value-fine { margin: 18px 0 0; max-width: 90ch; color: var(--quiet); font-size: 11px; line-height: 1.6; }
.calc-value .value-disclaimer { margin-top: 6px; }
.club-booking-note { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--calc-line); }
.club-booking-note .fine { margin: 0; font-size: 11px; line-height: 1.6; }
.club-booking-note .club-footnote-link { margin-top: 4px; }
.club-terms-note { margin: 20px 0 0; text-align: center; font-size: 14px; }
.club-terms-note a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.club-terms-note a:hover { color: var(--lime); }
/* Below 1000 px the two parts stack on the plans' centred 560 px column: the cost first, then the earnings. */
@media (max-width: 999px) {
  .club-calculator { grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .calc-input-note { min-height: 4.5em; }
  .calc-value-action .button-dark { width: 100%; justify-content: center; }
  /* Keep the fee caption on its own line at every court count, with no result jump. */
  .calc-total { flex-direction: column; align-items: flex-start; }
  .camera-offer-text, .camera-offer.is-free .camera-offer-text { min-height: 4.2em; font-size: 16px; }
  .calc-plan { min-height: 4.35em; }
  /* Both contract choices reserve the camera nudge and two lines of rate copy. */
  .camera-offer { min-height: 191px; align-content: center; }
  .calc-rate { min-height: 3.1em; }
  .ledger-line, .ledger-onetime { align-items: flex-start; }
  .ledger-amount { font-size: 18px; }
  .ledger-total .ledger-amount { font-size: 30px; }
}
/* Oct 14, 2026 (Fable, r44 polish): phones from 361 px fit every validation message in two lines (measured at 360 and
   390), so they reserve two. The narrowest phones keep three. */
@media (min-width: 361px) and (max-width: 760px) {
  .calc-input-note { min-height: 3em; }
}
@media (max-width: 700px) {
  .calc-settings { flex-direction: column; gap: 14px; }
  .calc-settings .control { justify-items: stretch; }
  .calc-card { border-radius: 12px; }
}
@media (max-width: 430px) {
  /* Full width labels and right aligned figures keep every row readable at 320 px, including 50 courts.
     The one time purchase uses the same columns but remains outside the monthly ledger and its total. */
  .ledger-line, .ledger-total, .ledger-onetime { flex-direction: column; align-items: stretch; gap: 8px; }
  .ledger-line-noted { display: flex; }
  .ledger-line .ledger-amount, .ledger-total .ledger-amount, .ledger-onetime .ledger-amount { align-self: flex-end; max-width: 100%; }
  .ledger-total .ledger-amount { font-size: clamp(26px, 7.5vw, 30px); }
  .ledger-onetime .ledger-label { max-width: none; }
}
/* Narrow phones stack the complete set when labels and controls need more room. */
@media (max-width: 380px) {
  .calc-input-row { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 50px auto; }
  .calc-input-control { grid-column: 1; width: var(--calc-control-width); max-width: 100%; justify-self: end; }
}