/* ============================================================
   RALLY V3 HOME
   Screen-local styles for the frozen public home. Everything
   reads cobalt tokens. The skeleton here is IDENTICAL for every
   identity: role-aware pieces only repaint leaf nodes (labels,
   prices, button states) inside geometry defined once, below.
   ============================================================ */

/* ---------- hero band (full-bleed, always dark, frozen) ---------- */
.land-hero{position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(1150px 620px at 6% -22%, color-mix(in srgb, var(--pr-600) 52%, transparent), transparent 66%),
    radial-gradient(880px 520px at 98% 116%, color-mix(in srgb, var(--ac-500) 24%, transparent), transparent 62%),
    linear-gradient(158deg, var(--pr-950) 4%, var(--nt-950) 58%, var(--nt-925));
  border-bottom:1px solid var(--nt-800)}
.land-hero .frame{position:relative; z-index:1; display:grid; align-items:center;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(18px,4vw,46px);
  padding-top:clamp(34px,6vw,68px); padding-bottom:clamp(34px,5.5vw,62px)}
.land-hero .eyebrow{color:var(--ac-300)}
.land-hero h1{margin:14px 0 16px; font-weight:850; letter-spacing:-.04em; line-height:1.02;
  font-size:clamp(34px,6.2vw,58px)}
.land-hero h1 .gword{background:linear-gradient(94deg, var(--ac-300), var(--pr-300));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.land-hero .lede{margin:0; max-width:54ch; color:var(--nt-chrome-ink2);
  font-size:clamp(15px,2.4vw,17.5px); line-height:1.62}
.land-hero .cta{display:flex; flex-wrap:wrap; gap:11px; margin-top:26px}
.btn-glass{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.22)}
.btn-glass:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.38); color:#fff}
.land-hero .facts{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px}
.land-hero .facts span{display:inline-flex; align-items:center; gap:7px; padding:7px 13px;
  border-radius:var(--r-full); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13);
  color:var(--nt-chrome-ink); font-size:12.5px; font-weight:650; white-space:nowrap}
.land-hero .facts .ic{width:15px; height:15px; color:var(--ac-300)}
.courtwrap{position:relative; min-height:380px; display:grid; place-items:center}
.courtwrap::before{content:""; position:absolute; inset:auto; width:78%; height:34%; bottom:4%;
  border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--pr-500) 34%, transparent), transparent 72%);
  filter:blur(6px)}
.courtsvg{position:relative; width:min(410px,100%); height:auto;
  transform:perspective(1150px) rotateX(51deg) rotateZ(-33deg) scale(1.2);
  filter:drop-shadow(0 38px 54px rgba(0,0,0,.5))}
@keyframes ballfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.courtsvg .ballgrp{animation:ballfloat 4.5s ease-in-out infinite; transform-box:fill-box; transform-origin:center}
@media (prefers-reduced-motion:reduce){.courtsvg .ballgrp{animation:none}}
@media (max-width:900px){
  .land-hero .frame{grid-template-columns:1fr}
  .courtwrap{position:absolute; right:-26%; top:-4%; width:min(420px,88vw); min-height:0; opacity:.17; pointer-events:none}
  .courtwrap::before{display:none}
}
@media (max-width:640px){
  .land-hero .facts span{padding:6px 11px; font-size:11.5px}
}

/* ---------- shared section chrome ---------- */
.land-sec{margin-top:clamp(40px,7vw,68px); scroll-margin-top:130px}
.land-sec>header{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; margin-bottom:18px; max-width:76ch}
.land-sec>header h2{margin:0; flex-basis:100%; font-size:clamp(22px,3.6vw,28px); font-weight:800; letter-spacing:-.03em}
.land-sec>header .note{font-size:var(--fs-sm); color:var(--ink-2); font-weight:600}

/* ---------- availability grid extras ---------- */
.avail-foot{display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; margin-top:12px;
  min-height:22px; font-size:var(--fs-xs); color:var(--ink-3); font-weight:600}
.dg .cell.sel{background:var(--brand); border-color:transparent; cursor:pointer}
/* the legend is a role-repainted region. Every chip stays fully readable at
   every width (a legend you must swipe is no legend), so it WRAPS - and the
   freeze is held by RESERVATION, not clipping: a hidden sizing ghost stacked
   in the same grid cell carries the worst-case chip set (the longest role's
   text plus all four chips), so the box is the same height for every role at
   every width. Roles with fewer or shorter chips stand in the same frame
   with a little slack. */
.legendbox{display:grid}
.legendbox>.dg-legend{grid-area:1/1; min-width:0}
.dg-legend.ghost{visibility:hidden}
.dg-legend s{color:var(--ink-3); font-weight:550; margin-right:4px}

/* ---------- the counter: "your visit, one tab" ledger ----------
   A fixed skeleton of line-item TYPES (court, coaching, kitchen,
   discount) so the one-tab idea is always legible. Identity only
   repaints amounts, sublabels and the action's face. */
.tabcard{margin-top:14px}
.tabgrid{display:grid; gap:18px}
@media (min-width:920px){ .tabgrid{grid-template-columns:1.55fr 1fr} }
.tabgrid>*{min-width:0}
/* the tab card's title row: role repaints the badge's words, never the row.
   The badge is a shrinkable single-line block so a longer role label
   ("Half member · your rates") ellipsises instead of squeezing the h3 into
   a second line at mobile widths. */
.tabcard>.card-title{flex-wrap:nowrap; min-height:28px}
.tabcard>.card-title h3{white-space:nowrap}
/* ONLY the title row's tool cluster may shrink: its badge is chrome and
   ellipsises. Line-item tool clusters hold PRICES - data never yields. */
.tabcard>.card-title .ttools{flex:0 1 auto; min-width:0}
.tabcard .ttools .badge{display:block; min-width:0; overflow:hidden; text-overflow:ellipsis}
.tabcard .lineitem{align-items:center}
.tabcard .lineitem .l{min-width:0}
/* every role-repainted line is a fixed single-line box at ALL widths:
   words may change, geometry may not (the freeze) */
.tabcard .lineitem .l b{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tabcard .lineitem .l span{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tabcard .lineitem .amt{margin-left:auto}
.tabcard .lineitem .amt s{margin-right:6px}
.tabcard .ttools{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.tabcard .ladder{background:var(--surface-2); border-radius:var(--r-md); padding:14px 16px;
  display:flex; flex-direction:column; align-self:start}
.tabcard .ladder .sheet-total{border-top-color:var(--line-strong)}
.tabcard .splitnote{display:flex; align-items:center; gap:7px; height:20px; margin-top:8px;
  font-size:var(--fs-xs); color:var(--ink-2); font-weight:600}
.tabcard .splitnote .ic{width:14px; height:14px; color:var(--ok-ink); flex:0 0 auto}
.tabcard .splitnote span{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tabcard .actrow{display:flex; flex-direction:column; gap:9px; margin-top:14px}
.tabcard .actrow .btn{width:100%; min-width:0; overflow:hidden; text-overflow:ellipsis}
.tabcard .actrow .securenote{display:block; height:16px; margin-top:0; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tabcard .stamprow{display:flex; justify-content:center; height:22px}

/* ---------- pricing math (frozen marketing: both rates shown to everyone) ---------- */
.mathrow{display:flex; align-items:stretch; flex-wrap:wrap; gap:10px; margin-bottom:18px;
  padding:clamp(16px,2.5vw,22px)}
.mathrow .mstep{flex:1 1 160px; min-width:0; display:flex; flex-direction:column; gap:2px;
  border-radius:var(--r-md); padding:12px 14px; background:var(--surface-2)}
.mathrow .mstep .mlab{font-size:var(--fs-micro); font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3)}
.mathrow .mstep b{font-size:24px; font-weight:800; letter-spacing:-.03em; margin:3px 0 1px}
.mathrow .mstep b small{font-size:12px; font-weight:650; color:var(--ink-2); letter-spacing:0}
.mathrow .mstep span{font-size:var(--fs-xs); color:var(--ink-2); font-weight:600}
.mathrow .mstep.tint{background:var(--membership-tint)}
.mathrow .mstep.tint b{color:var(--membership-ink)}
.mathrow .marrow{align-self:center; color:var(--ink-3); flex:0 0 auto}
@media (max-width:680px){.mathrow .marrow{display:none}}

/* ---------- membership tiers ---------- */
.tiergrid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(255px,100%),1fr))}
.tier{display:flex; flex-direction:column; position:relative}
.tier .thead{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:26px}
.tier .price{font-size:30px; font-weight:800; letter-spacing:-.03em; margin:12px 0 2px}
.tier .price small{font-size:13px; font-weight:650; color:var(--ink-2); letter-spacing:0}
.tier .psub{font-size:var(--fs-xs); color:var(--ink-3); font-weight:600; margin-bottom:8px}
.tier .btn{margin-top:16px}
.tier.hot{border-color:var(--membership-ln); box-shadow:var(--shadow-2)}
.yourplan{display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase; padding:3px 10px; border-radius:var(--r-full);
  background:var(--membership); color:#fff; white-space:nowrap}
.yourplan .ic{width:11px; height:11px}
.feat{display:flex; gap:9px; align-items:flex-start; font-size:var(--fs-sm); color:var(--ink-2);
  padding:4.5px 0; font-weight:550; line-height:1.45}
.feat .ic{width:16px; height:16px; color:var(--ok-ink); margin-top:2px}

/* ---------- coaching ---------- */
.coachgrid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(255px,100%),1fr))}
.coachcard .chead{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.coachcard .chead b{display:block; font-size:15.5px; letter-spacing:-.01em}
.coachcard .chead span{display:block; font-size:var(--fs-xs); color:var(--ink-2)}
.coachcard p{margin:9px 0 0; font-size:var(--fs-xs); color:var(--ink-2); line-height:1.5}
.coachcard .crate{display:flex; align-items:center; gap:8px; margin-top:12px; padding-top:11px;
  border-top:1px solid var(--line); font-size:var(--fs-sm); font-weight:750}
.coachcard .crate .stars{display:inline-flex; align-items:center; gap:4px; color:var(--warn-ink);
  font-size:var(--fs-xs); font-weight:700; margin-left:auto}
.coachcard .crate .stars .ic{width:14px; height:14px; fill:currentColor; stroke:none}

/* ---------- kitchen ---------- */
.foodgrid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); align-items:stretch}
.menu-line{display:flex; align-items:baseline; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); font-size:var(--fs-sm)}
.menu-line:last-of-type{border-bottom:0}
.menu-line b{font-weight:700}
.menu-line .dots{flex:1; border-bottom:1.5px dotted var(--line-strong); transform:translateY(-3px)}
.menu-line .amt{font-weight:700; font-variant-numeric:tabular-nums}
.linetab{flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; min-height:28px; padding:0 10px;
  border:1px solid var(--line-strong); border-radius:var(--r-full); background:var(--surface);
  color:var(--brand-ink); font:inherit; font-size:11px; font-weight:750; cursor:pointer;
  white-space:nowrap; transition:.13s; align-self:center}
.linetab:hover{border-color:var(--brand); background:var(--brand-tint)}
.linetab:disabled{opacity:.45; cursor:default; pointer-events:none}
.linetab .ic{width:12px; height:12px}
.menuhint{display:flex; align-items:center; gap:8px; height:38px; margin-top:12px;
  border-radius:var(--r-md); background:var(--surface-2); padding:8px 12px;
  font-size:var(--fs-xs); color:var(--ink-2); font-weight:600}
.menuhint .ic{width:14px; height:14px; color:var(--brand-ink); flex:0 0 auto}
/* role-repainted one-liners keep a fixed box: words may change, geometry may not */
.menuhint span{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.foodgrid .kkcard{display:flex; flex-direction:column}
.foodgrid .kkcard p{margin:0 0 14px; font-size:var(--fs-sm); color:var(--ink-2); line-height:1.55}

/* ---------- visit ---------- */
.visitgrid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(255px,100%),1fr))}
.visit .vic{width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background:var(--brand-tint); color:var(--brand-ink); margin-bottom:12px}
.visit b{display:block; font-size:15px; letter-spacing:-.01em; margin-bottom:4px}
.visit .vline{display:flex; justify-content:space-between; gap:12px; padding:5px 0;
  font-size:var(--fs-sm); color:var(--ink-2); font-weight:550}
.visit .vline .r{font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.visit p{margin:0; font-size:var(--fs-sm); color:var(--ink-2); line-height:1.55}

/* ---------- CTA band ---------- */
.ctaband{position:relative; overflow:hidden; border:0; border-radius:var(--r-xl); color:#fff;
  background:linear-gradient(150deg, var(--pr-600), var(--pr-800) 72%, var(--pr-950));
  box-shadow:var(--shadow-brand); padding:clamp(26px,5vw,44px); text-align:center;
  margin-top:clamp(40px,7vw,68px)}
.ctaband::after{content:""; position:absolute; right:-70px; top:-70px; width:240px; height:240px;
  border-radius:50%; background:radial-gradient(circle at 35% 35%, var(--hero-glow), transparent 65%)}
.ctaband h2{margin:0 0 8px; font-size:clamp(23px,4vw,32px); font-weight:850; letter-spacing:-.035em}
.ctaband p{margin:0 auto 20px; max-width:46ch; color:var(--hero-lbl); font-size:15px; font-weight:600}
.ctaband .cta{display:flex; justify-content:center; flex-wrap:wrap; gap:11px; position:relative; z-index:1}
.ctaband .btn-invert{background:#fff; color:var(--pr-700); border-color:transparent}
.ctaband .btn-invert:hover{background:var(--pr-300); color:var(--pr-950)}

/* ---------- footer ---------- */
.footgrid{display:grid; gap:26px 20px; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  padding-bottom:24px}
.footgrid .fbrand{max-width:30ch}
.footgrid .fbrand p{margin:10px 0 0; font-size:var(--fs-xs); color:var(--ink-3); line-height:1.55; font-weight:550}
.footgrid h4{margin:0 0 10px; font-size:var(--fs-micro); font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3)}
.footgrid a, .footgrid .fln{display:block; padding:4px 0; font-size:var(--fs-sm); color:var(--ink-2); font-weight:600}
.footgrid a:hover{color:var(--brand-ink)}
.footbase{display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px; padding-top:16px;
  border-top:1px solid var(--line); color:var(--ink-3); font-size:var(--fs-xs); font-weight:600}
.footbase .grow{flex:1}