/* Kesher's platform pages: home, pricing, contact, terms, privacy.
   Club pages deliberately do NOT use this -- they wear each club's own
   colours, and the platform must never compete with them. */
/* A warm off-white ground rather than the platform dark it used to wear, so a
   club's own page -- which IS dark, and carries the club's colours -- never has
   to compete with ours. Light is the base; dark redefines tokens only, so the
   page holds in all three viewer states (explicit light, explicit dark, and the
   un-stamped default where only prefers-color-scheme decides).

   Fonts are system stacks on purpose. The page used to pull three families from
   Google Fonts, which is a render-blocking third-party request on the front
   door and a tracking surface we do not need. */
:root{
  --ground:#FBFAF8;
  --panel:#FFFFFF;
  --sunk:#F3F1EC;
  --line:#E2DED5;
  --line-soft:#EDEAE3;
  --ink:#16161C;
  --dim:#5A5A66;
  --faint:#8B8B96;
  --accent:#3355E0;
  --accent-soft:#E8ECFC;
  --warm:#A97B32;
  --warm-soft:#F7EFE0;
  --shadow:0 1px 2px rgba(20,20,30,.05), 0 8px 24px -16px rgba(20,20,30,.18);

  --display:ui-sans-serif,-apple-system,"Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --body:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --measure:66ch;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0C0C10; --panel:#15151C; --sunk:#101017;
    --line:#282833; --line-soft:#1E1E28;
    --ink:#ECEAF2; --dim:#A3A3B2; --faint:#6E6E7C;
    --accent:#7B96FF; --accent-soft:#1A1F38;
    --warm:#C9A063; --warm-soft:#241D12;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ground:#0C0C10; --panel:#15151C; --sunk:#101017;
  --line:#282833; --line-soft:#1E1E28;
  --ink:#ECEAF2; --dim:#A3A3B2; --faint:#6E6E7C;
  --accent:#7B96FF; --accent-soft:#1A1F38;
  --warm:#C9A063; --warm-soft:#241D12;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);
     font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.wrap{max-width:960px;margin:0 auto;padding-inline:clamp(18px,4vw,40px)}

/* ---- bar --------------------------------------------------------------- */
.bar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--ground) 88%,transparent);
     backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.mark img{width:28px;height:28px}
.mark b{font-family:var(--display);font-size:15px;letter-spacing:-.012em;font-weight:800}
.bar-links{display:flex;align-items:center;gap:8px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
     border-radius:9px;padding:11px 18px;font-size:14.5px;font-weight:650;
     text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}
.btn-quiet{background:var(--panel);color:var(--ink);border-color:var(--line)}
.btn-sm{padding:7px 13px;font-size:13.5px}

/* ---- masthead ---------------------------------------------------------- */
.mast{display:flex;flex-direction:column;gap:20px;
      padding-block:clamp(44px,8vw,88px) clamp(30px,5vw,52px);
      border-bottom:1px solid var(--line)}
.badge{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
       background:var(--warm-soft);color:var(--warm);
       border:1px solid color-mix(in srgb,var(--warm) 30%,transparent);
       border-radius:999px;padding:5px 12px;font-size:11.5px;font-weight:700;
       letter-spacing:.09em;text-transform:uppercase}
h1{font-family:var(--display);font-size:clamp(34px,6.4vw,58px);line-height:1.04;
   letter-spacing:-.03em;font-weight:800;margin:0;text-wrap:balance;max-width:16ch}
h1 em{font-style:normal;color:var(--faint)}
.sub{margin:0;color:var(--dim);font-size:clamp(17px,2.1vw,19px);max-width:var(--measure);
     text-wrap:pretty}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}

/* ---- sections ---------------------------------------------------------- */
section{padding-block:clamp(40px,6vw,64px);border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:none}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
         color:var(--faint);margin:0 0 10px}
h2{font-family:var(--display);font-size:clamp(21px,3vw,26px);line-height:1.22;
   letter-spacing:-.018em;font-weight:750;margin:0 0 6px;text-wrap:balance}
h3{font-size:15px;font-weight:700;margin:0 0 4px;letter-spacing:-.006em}
p{margin:0 0 14px;max-width:var(--measure);text-wrap:pretty}
p:last-child{margin-bottom:0}
.lede{color:var(--dim);margin-bottom:24px;max-width:var(--measure)}
strong{font-weight:660}

/* ---- comparison -------------------------------------------------------- */
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px;
        background:var(--panel);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line-soft)}
thead th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
         color:var(--faint);font-weight:700;background:var(--sunk);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td.what{font-weight:600;color:var(--ink)}
td.no{color:var(--faint)}
td.yes{color:var(--ink);font-weight:620}
td.yes::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
               background:var(--accent);margin-right:9px;vertical-align:middle}

/* ---- cards ------------------------------------------------------------- */
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));margin-top:24px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:13px;
      padding:19px;box-shadow:var(--shadow)}
.card h3{margin-bottom:5px}
.card p{font-size:14px;color:var(--dim);margin:0}

/* ---- callout ----------------------------------------------------------- */
.call{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--warm);
      border-radius:0 12px 12px 0;padding:18px 20px;margin-top:24px}
.call.accent{border-left-color:var(--accent)}
.call p{font-size:14.5px;color:var(--dim)}

/* ---- footer ------------------------------------------------------------ */
footer{padding-block:34px 48px;color:var(--faint);font-size:13px}
.foot-in{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.foot-links{display:flex;flex-wrap:wrap;gap:10px 18px}
footer a{color:var(--faint);text-decoration:none;border-bottom:1px solid var(--line)}
footer a:hover{color:var(--ink)}
.foot-note{width:100%;padding-top:14px;border-top:1px solid var(--line);
           line-height:1.55;font-size:12px;opacity:.9;max-width:var(--measure)}

/* The bar has to survive a 360px phone; Pricing is the one that folds. */
@media (max-width:520px){ .nav-wide{display:none} }