/* ============================================================================
   Pickleball Labs - site chrome + content pages (loads after labs.css)
   ============================================================================ */

/* ---------- Header nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(11,12,15,.92);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(245,243,236,.1)}
.nav-in{display:flex;align-items:center;gap:20px;height:62px}
.nav-logo{display:flex;align-items:center;flex:none}
.nav-logo img{height:26px;width:auto;display:block}
.nav-links{display:flex;gap:26px;margin-left:10px}
.nav-links a{font-family:var(--body);font-weight:500;font-size:14.5px;color:rgba(245,243,236,.72);
  text-decoration:none;transition:color .15s var(--ease)}
.nav-links a:hover{color:#F5F3EC}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.btn-sm{padding:10px 16px;min-height:0;font-size:13.5px}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:40px;height:40px;color:#F5F3EC;align-items:center;justify-content:center}
.nav-toggle svg{width:22px;height:22px}
.nav-mobile{display:none}
@media (max-width:820px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .nav-mobile{display:block;overflow:hidden;max-height:0;transition:max-height .3s var(--ease);
    background:#0B0C0F;border-bottom:1px solid rgba(245,243,236,.1)}
  .nav-mobile.open{max-height:360px}
  .nav-mobile a{display:block;padding:15px 0;color:rgba(245,243,236,.82);text-decoration:none;
    font-size:16px;border-top:1px solid rgba(245,243,236,.08)}
  .nav-mobile a:first-child{border-top:0}
}

/* ---------- Hero: two-column + carousel ---------- */
.hero-2{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);align-items:center;
  padding-block:clamp(34px,5vw,60px) clamp(28px,4vw,44px)}
.hero-rating{display:flex;align-items:center;gap:12px;margin-top:28px;font-family:var(--mono);
  font-size:12px;letter-spacing:.03em;color:var(--hero-ink-2)}
.stars{display:inline-flex;gap:2px;color:var(--accent);flex:none}
.stars svg{width:15px;height:15px;display:block}
.carousel{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--hero-line);background:#000}
.carousel .slide{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease)}
.carousel .slide.on{opacity:1}
.carousel .slide img{width:100%;height:100%;object-fit:cover}
.carousel .veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(transparent 52%,rgba(8,9,12,.74))}
.carousel .cap{position:absolute;left:16px;bottom:16px;z-index:2;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:#F5F3EC;display:flex;align-items:center;gap:9px}
.carousel .cap::before{content:"";width:18px;height:1px;background:var(--accent)}
.carousel .dots{position:absolute;right:14px;bottom:15px;z-index:3;display:flex;gap:7px}
.carousel .dots button{width:7px;height:7px;border-radius:50%;border:0;background:rgba(245,243,236,.4);
  cursor:pointer;padding:0;transition:width .2s var(--ease),background .2s var(--ease)}
.carousel .dots button.on{background:var(--accent);width:20px;border-radius:4px}
@media (max-width:900px){.hero-2{grid-template-columns:1fr}.carousel{max-height:460px}}

/* ---------- Trust band ---------- */
.trust{background:var(--graphite);color:var(--hero-ink);border-block:1px solid rgba(245,243,236,.08)}
:root[data-theme="dark"] .trust{background:#0C0D10}
@media (prefers-color-scheme:dark){.trust{background:#0C0D10}}
.trust-in{display:flex;align-items:center;justify-content:center;gap:clamp(18px,3.5vw,48px);
  flex-wrap:wrap;padding-block:24px}
.trust-rate{display:flex;align-items:center;gap:10px}
.trust-rate .stars svg{width:18px;height:18px}
.trust-rate b{font-family:var(--disp);font-weight:800;font-size:18px;color:var(--hero-ink);letter-spacing:-.01em}
.trust-rate span{font-family:var(--mono);font-size:12px;color:var(--hero-ink-2);letter-spacing:.03em}
.trust-item{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--hero-ink-2)}
.trust-item svg{width:17px;height:17px;color:var(--accent);flex:none}
.trust-sep{width:1px;height:22px;background:rgba(245,243,236,.16)}
@media (max-width:720px){.trust-sep{display:none}}

/* ---------- Content / legal pages ---------- */
.page-hero{background:var(--hero-bg);color:var(--hero-ink);padding-block:clamp(44px,7vw,84px)}
.page-hero h1{font-size:clamp(30px,5.2vw,54px);font-weight:900;color:var(--hero-ink);
  margin-top:16px;letter-spacing:-.03em}
.page-hero p{color:var(--hero-ink-2);font-size:clamp(16px,1.6vw,19px);margin-top:16px;max-width:58ch;line-height:1.55}
.prose{max-width:760px;margin:0 auto;padding-block:clamp(44px,6vw,80px)}
.prose h2{font-family:var(--disp);font-weight:800;font-size:clamp(21px,2.5vw,27px);letter-spacing:-.02em;
  margin:42px 0 14px;color:var(--ink)}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--disp);font-weight:700;font-size:17px;margin:26px 0 8px;color:var(--ink)}
.prose p{color:var(--ink-2);line-height:1.72;margin:0 0 18px;font-size:16.5px}
.prose ul{margin:0 0 20px;padding-left:20px;color:var(--ink-2);line-height:1.7}
.prose li{margin-bottom:8px}
.prose a{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.prose a:hover{border-bottom-color:var(--accent)}
.prose strong{color:var(--ink);font-weight:600}
.prose .lead{font-size:19px;color:var(--ink);font-weight:500;line-height:1.55;margin-bottom:24px}
.prose .updated{font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.03em;margin-bottom:30px}
.prose blockquote{border-left:3px solid var(--accent);padding:2px 0 2px 20px;margin:24px 0;
  font-family:var(--disp);font-weight:700;font-size:20px;color:var(--ink);letter-spacing:-.01em;line-height:1.35}
.prose hr{border:0;border-top:1px solid var(--line);margin:34px 0}
.faq-q{border-top:1px solid var(--line);padding-top:24px;margin-top:24px}
.faq-q:first-of-type{border-top:0;padding-top:0;margin-top:0}
.faq-q h3{margin-top:0}

/* ---------- Expanded footer ---------- */
.foot-cols{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:clamp(24px,3vw,40px);margin-bottom:36px}
@media (max-width:760px){.foot-cols{grid-template-columns:1fr 1fr;gap:28px}}
.foot-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--hero-ink-2);margin:0 0 14px}
.foot-col a{display:block;color:rgba(245,243,236,.62);text-decoration:none;font-size:14px;
  margin-bottom:11px;font-family:var(--body)}
.foot-col a:hover{color:#F5F3EC}
.foot-brand img{width:168px;height:auto;margin-bottom:16px}
.foot-brand .made{font-family:var(--mono);font-size:12px;letter-spacing:.04em;line-height:1.7;
  color:var(--hero-ink-2);max-width:38ch}
.foot-brand .made a{color:var(--accent);text-decoration:none}
.foot-legal{font-family:var(--mono);font-size:11px;color:var(--ink-3);line-height:1.7;max-width:60ch}