/* ==========================================================================
   Columbus Padel Club · system.css (v7, July 27 2026)
   The one shared design system for all five pages, consolidated from the
   home v1 build spec (doc 12). Full-bleed sections on Royal Green. No cards,
   no rounded containers, no shadows. Hairline ivory rules are the only
   section boundaries. Sprint Green #90FFB6 appears exclusively on
   reserve/pick actions. Lylac #F1BBD7 is decorative-only (the word "padel").
   Montserrat 400/500 only. Copy rules per doc 08: no court counts,
   "First Serve", racquet, no em dashes.
   The Founding Hundred picker on the memberships page keeps its own scoped
   styles and is NOT covered here.
   ========================================================================== */
:root{
  --green:#003C28; --sprint:#90FFB6; --ink:#102222; --white:#FFFFFF; --sage:#C4CFBB;
  --lylac:#F1BBD7;
  --gutter:clamp(20px,2.93vw,44px);
  --navh:89px;
  --secpad:clamp(48px,4.4vw,66px);
  --grpgap:clamp(20px,1.73vw,26px);
  --rowpad:clamp(13px,1.06vw,16px);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--green); color:var(--sage);
  font-family:'Montserrat',Arial,sans-serif; font-weight:400;
  font-size:clamp(14px,1.06vw,16px); line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{display:block;}
a{color:inherit;}
h1,h2,h3{color:var(--white);font-weight:500;text-wrap:pretty;}
section,footer{padding-left:var(--gutter);padding-right:var(--gutter);}
.rule-top{border-top:1px solid rgba(240,240,240,.18);}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--sage);}
.tnum{font-variant-numeric:tabular-nums;}
.mt-24{margin-top:24px;}.mt-32{margin-top:32px;}.mt-48{margin-top:48px;}
.padel-pink{color:var(--lylac);}

/* Buttons: the only Sprint Green on the page */
.btn{
  display:inline-block;background:var(--sprint);color:var(--ink);
  font-family:inherit;font-weight:500;font-size:15px;letter-spacing:.02em;
  padding:15px 32px;border:0;border-radius:999px;text-decoration:none;cursor:pointer;
  text-align:center;
}
.btn:hover{background:var(--white);color:var(--green);}
@media (max-width:600px){.btn{width:100%;box-sizing:border-box;min-height:48px;}}

/* Quiet button: white text, hairline border, hover invert. NEVER Sprint. */
.btn-quiet{
  display:inline-block;background:transparent;color:var(--white);
  font-family:inherit;font-weight:500;font-size:13px;letter-spacing:.08em;
  padding:13px 26px;border:1px solid rgba(240,240,240,.5);border-radius:999px;
  text-decoration:none;cursor:pointer;text-align:center;
}
.btn-quiet:hover{background:var(--white);color:var(--green);border-color:var(--white);}

/* 1 · Nav bar */
.nav{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  padding:18px var(--gutter);border-bottom:1px solid rgba(240,240,240,.18);
}
.nav .crest{height:52px;width:52px;}
.nav-links{display:flex;align-items:center;gap:26px;}
.nav-links a{
  font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sage);text-decoration:none;
}
.nav-links a:hover,.nav-links a.on{color:var(--white);}
.nav .pill{
  background:var(--sprint);color:var(--ink);font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;padding:11px 20px;border-radius:999px;text-decoration:none;white-space:nowrap;
}
.nav .pill:hover{background:var(--white);color:var(--green);}
@media (max-width:600px){
  :root{--navh:81px;}
  .nav-links{display:none;}
  .nav .crest{height:44px;width:44px;}
}

/* 2 · Fold (home). Full-bleed Royal Green: the fold owns the whole first
   screen below the nav, so the first render is only revealed on scroll.
   Lockup, fact strip, CTA and fine print read as one centred composed
   unit; the lockup stays the largest element by a wide margin. */
.fold{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  min-height:calc(100vh - var(--navh));
  min-height:calc(100svh - var(--navh));
  padding-top:clamp(44px,4vw,56px);padding-bottom:clamp(44px,4.4vw,64px);
  gap:clamp(26px,2.5vw,36px);
}
.fold .lockup{width:clamp(320px,27vw,410px);max-width:100%;}
.factstrip{
  display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:0 24px;
  width:100%;max-width:600px;
  border-top:1px solid rgba(240,240,240,.30);border-bottom:1px solid rgba(240,240,240,.30);
}
.factstrip span{
  font-size:11px;font-weight:500;letter-spacing:.20em;text-transform:uppercase;color:var(--white);
  padding:14px 0;font-variant-numeric:tabular-nums;white-space:nowrap;
}
@media (max-width:600px){
  .factstrip{grid-template-columns:1fr;}
  .factstrip span{padding:13px 0;}
  .factstrip span + span{border-top:1px solid rgba(240,240,240,.30);}
}
.fold-cta{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;}
.fineprint{font-size:11.5px;line-height:1.6;color:var(--sage);max-width:46ch;}

/* Type-led page hero (The Plan, About Padel, Build Journal, memberships intro) */
.page-hero{
  padding-top:clamp(48px,4.4vw,66px);padding-bottom:clamp(44px,4vw,60px);
  display:flex;flex-direction:column;gap:16px;
}
.page-hero h1{font-size:clamp(34px,3.73vw,56px);line-height:1.06;letter-spacing:-0.01em;max-width:20ch;}
.page-hero .sub{max-width:56ch;}

/* Render band - the reusable pattern. Every render sits in one of these,
   badged PHASE TWO VISION, never in a hero position. */
.band{position:relative;aspect-ratio:24/7;overflow:hidden;padding:0;display:block;text-decoration:none;}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.band .scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,60,40,.5) 0%,rgba(0,60,40,.22) 45%,rgba(0,60,40,.8) 100%);
}
.band .badge{
  position:absolute;top:0;left:0;background:var(--green);color:var(--white);
  font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding:8px 14px;
}
.band .caption{
  position:absolute;left:44px;bottom:22px;color:var(--white);
  font-size:13px;letter-spacing:.06em;line-height:1.5;
}
.band .play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--white);font-weight:500;font-size:16px;letter-spacing:.06em;
}
@media (max-width:700px){
  .band{aspect-ratio:16/9;}
  .band .scrim{background:linear-gradient(180deg,rgba(0,60,40,.5) 0%,rgba(0,60,40,.22) 45%,rgba(0,60,40,.85) 100%);}
  .band .caption{left:20px;right:20px;bottom:14px;}
}

/* Generic ruled content section: eyebrow + heading + body copy */
.sec{padding-top:var(--secpad);padding-bottom:var(--secpad);display:flex;flex-direction:column;gap:var(--grpgap);}
.sec h2{font-size:clamp(32px,2.93vw,44px);line-height:1.08;max-width:22ch;}
.sec .body,.sec p{max-width:62ch;}
.sec .body a:not(.btn),.sec p a:not(.btn){color:var(--white);text-decoration:underline;text-underline-offset:3px;}
.sec .body a:not(.btn):hover,.sec p a:not(.btn):hover{color:var(--sprint);}

/* 4 · The sport (home) */
.sport{padding-top:var(--secpad);padding-bottom:var(--secpad);display:flex;flex-direction:column;gap:clamp(24px,2.66vw,40px);}
.sport h1{
  font-size:clamp(40px,4.66vw,70px);line-height:1.02;letter-spacing:-0.02em;max-width:12ch;
}
.sport .lede{max-width:52ch;}
.sport-rows{display:flex;flex-direction:column;}
.sport-row{
  display:flex;flex-wrap:wrap;gap:10px 26px;padding:var(--rowpad) 0;
  border-top:1px solid rgba(240,240,240,.22);
}
.sport-row:last-child{border-bottom:1px solid rgba(240,240,240,.22);}
.sport-row .lbl{
  min-width:86px;font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--white);
  padding-top:3px;
}
.sport-row p{flex:1 1 240px;font-size:clamp(13px,.93vw,14px);line-height:1.65;}
.rows-wide .sport-row .lbl{flex:0 0 200px;min-width:0;max-width:200px;}

/* 6 · First Serve (home) */
.firstserve{padding-top:var(--secpad);padding-bottom:var(--secpad);display:flex;flex-direction:column;gap:var(--grpgap);}
.firstserve h2{font-size:clamp(32px,2.93vw,44px);line-height:1.08;max-width:22ch;}
.firstserve .body{max-width:62ch;}
.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chips span{
  border:1px solid rgba(240,240,240,.35);border-radius:999px;padding:10px 18px;
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--white);
}

/* Proof strip (home): the platform and a named local voice. Slim, ruled. */
.proof{
  padding-top:clamp(40px,3.73vw,56px);padding-bottom:clamp(40px,3.73vw,56px);
  display:flex;flex-direction:column;gap:clamp(18px,1.6vw,24px);
}
.proof .lede{max-width:58ch;color:var(--white);font-size:clamp(15px,1.2vw,18px);line-height:1.6;}
.proof blockquote{
  border-top:1px solid rgba(240,240,240,.22);
  padding-top:clamp(16px,1.46vw,22px);max-width:68ch;
  font-size:clamp(14px,1.06vw,16px);line-height:1.75;color:var(--sage);
}
.proof cite{display:block;margin-top:10px;font-style:normal;font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--white);}

/* Close band (home + shared): the closing beat */
.close{
  padding-top:clamp(56px,5vw,76px);padding-bottom:clamp(56px,5vw,76px);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;
}
.close h2{font-size:clamp(32px,2.93vw,44px);line-height:1.1;max-width:22ch;}
.close .sub{max-width:48ch;}
.close .btn{margin-top:8px;}

/* KEEP SCORE capture: one compact row above the footer hairline */
.keepscore{
  border-top:1px solid rgba(240,240,240,.18);
  padding-top:clamp(28px,2.66vw,40px);padding-bottom:clamp(28px,2.66vw,40px);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 40px;
}
.keepscore .ks-copy{display:flex;flex-direction:column;gap:6px;max-width:52ch;}
.keepscore .ks-label{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--white);}
.keepscore .ks-line{font-size:13px;line-height:1.6;color:var(--sage);}
.keepscore form{display:flex;gap:10px;flex-wrap:wrap;flex:1 1 320px;max-width:480px;}
.keepscore input[type=email]{
  flex:1 1 200px;background:transparent;border:1px solid rgba(240,240,240,.4);border-radius:999px;
  padding:12px 20px;font-family:inherit;font-size:14px;color:var(--white);outline:none;min-height:48px;
}
.keepscore input[type=email]::placeholder{color:rgba(196,207,187,.7);}
.keepscore input[type=email]:focus{border-color:var(--white);}
.keepscore .ks-confirm{font-size:13px;color:var(--white);}
@media (max-width:600px){
  .keepscore form{max-width:none;}
  .keepscore .btn-quiet{width:100%;min-height:48px;}
}

/* 8 · Founding hundred teaser (home, display only) */
.teaser{
  padding-top:clamp(48px,4.26vw,64px);padding-bottom:clamp(56px,4.8vw,72px);
  display:flex;flex-direction:column;gap:clamp(30px,2.93vw,44px);
}
.teaser-left{display:flex;flex-direction:column;gap:var(--grpgap);}
.teaser-left h2{font-size:clamp(32px,2.53vw,38px);line-height:1.08;max-width:20ch;}
.teaser-left .line{max-width:44ch;}
.tb{display:grid;grid-template-columns:repeat(20,1fr);gap:clamp(5px,.46vw,7px);}
.tb-cell{
  display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:50%;
  font-size:10px;font-variant-numeric:tabular-nums;min-width:10px;text-decoration:none;
}
.tb-open{border:1px solid rgba(255,255,255,.5);color:var(--white);}
.tb-open:hover{border-color:var(--white);background:rgba(255,255,255,.14);transform:scale(1.07);transition:transform 120ms ease;}
.tb-taken{background:rgba(240,240,240,.13);color:rgba(240,240,240,.34);}
.tb-count{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px solid rgba(240,240,240,.25);margin-top:14px;padding-top:12px;
  font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--white);
  font-variant-numeric:tabular-nums;
}
.ribbon{display:none;grid-template-columns:repeat(10,1fr);gap:11px;justify-items:center;}
.ribbon span{width:100%;max-width:22px;aspect-ratio:1;border-radius:50%;}
.rb-taken{background:rgba(240,240,240,.42);}
.rb-open{border:1.5px solid var(--white);}
.ribbon-copy{font-size:clamp(13px,.93vw,14px);line-height:1.65;}
.teaser-cta-m{display:none;}
@media (max-width:600px){
  .tb{display:none;}
  .ribbon{display:grid;}
  .teaser-cta-m{display:block;}
  .teaser-cta-d{display:none;}
}
@media (min-width:601px){.ribbon-copy{display:none;}}

/* The Plan: full-bleed ruled phase sections */
.phase-sec{padding-top:var(--secpad);padding-bottom:var(--secpad);display:flex;flex-direction:column;gap:var(--grpgap);}
.phase-sec h2{font-size:clamp(30px,2.66vw,40px);line-height:1.08;max-width:22ch;}
.phase-sec p{max-width:62ch;}
.phase-sec p a:not(.btn){color:var(--white);text-decoration:underline;text-underline-offset:3px;}
.phase-sec p a:not(.btn):hover{color:var(--sprint);}

/* Badged render tiles (The Plan gallery). Every tile carries the badge. */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
@media (max-width:860px){.tiles{grid-template-columns:repeat(2,1fr);}}
.tile{position:relative;aspect-ratio:1;overflow:hidden;}
.tile img{width:100%;height:100%;object-fit:cover;}
.tile .badge{
  position:absolute;top:0;left:0;background:var(--green);color:var(--white);
  font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;padding:6px 10px;
}
.tiles-caption{font-size:13px;color:var(--sage);margin-top:14px;}

/* Journal post typography: white headings, sage body, hairline rules */
.post-wrap{max-width:720px;margin:0 auto;padding-bottom:clamp(56px,5vw,76px);}
.post-meta{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--sage);margin-bottom:16px;}
.post-wrap h1{font-size:clamp(30px,2.93vw,44px);line-height:1.12;margin-bottom:8px;}
.post-wrap p{margin:18px 0 0;color:var(--sage);}
.post-wrap strong{color:var(--white);font-weight:500;}
.post-wrap a{color:var(--white);text-decoration:underline;text-underline-offset:3px;}
.post-wrap a:hover{color:var(--sprint);}
.post-wrap a.btn{color:var(--ink);text-decoration:none;}
.post-wrap a.btn:hover{color:var(--green);}
.post-wrap .signoff{border-top:1px solid rgba(240,240,240,.22);padding-top:18px;color:var(--white);font-weight:500;}

/* FAQ (dark, shared base) */
.faq{margin-top:8px;}
.faq details{border-bottom:1px solid rgba(240,240,240,.22);padding:4px 0;}
.faq details:first-of-type{border-top:1px solid rgba(240,240,240,.22);}
.faq summary{
  cursor:pointer;font-weight:500;font-size:16px;line-height:24px;color:var(--white);
  padding:16px 32px 16px 0;list-style:none;position:relative;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:20px;color:var(--sage);}
.faq details[open] summary::after{content:"\2013";}
.faq .a{padding:0 0 20px;font-size:14px;line-height:1.7;color:var(--sage);max-width:62ch;}
.faq .a a{color:var(--white);}

/* 9 · Footer: one hairline row of links, one of facts */
.site-foot{border-top:1px solid rgba(240,240,240,.25);padding-top:0;padding-bottom:26px;}
.foot-row1{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 28px;
  padding:22px 0;border-bottom:1px solid rgba(240,240,240,.18);
}
.foot-row1 img{height:20px;width:auto;opacity:.85;}
.foot-links{display:flex;align-items:center;flex-wrap:wrap;gap:10px 22px;}
.foot-links a{
  font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sage);text-decoration:none;
}
.foot-links a:hover{color:var(--white);}
.foot-row2{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 28px;
  padding-top:20px;
}
.foot-row2 .addr,.foot-row2 .fact{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);}
.foot-row2 .addr a{color:var(--sage);text-decoration:none;}
.foot-row2 .addr a:hover{color:var(--white);}

/* Reduced motion: no animation in the system, but disable the one transform */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .tb-open:hover{transform:none;transition:none;}
}