/* =============================================================
   ClubPad marketing site — Pickled marketing palette
   Covers index.html, features.html and pricing.html.

   The three pages keep the handoff's inline styles verbatim so the
   desktop rendering stays pixel-faithful to the design. Everything
   inline styles *cannot* express lives here: hover states, keyframes,
   the demo carousels, the mobile nav, and every responsive breakpoint.
   Layout overrides therefore need !important to beat the inline rules —
   that is deliberate, not a code smell.
   ============================================================= */

/* ── Fonts ──────────────────────────────────────── */
@font-face { font-family: 'Figtree';             src: url('/fonts/figtree.ttf') format('truetype');                  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree';             src: url('/fonts/figtree_bold.ttf') format('truetype');             font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Moda';         src: url('/fonts/bodonimoda.ttf') format('truetype');               font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Moda';         src: url('/fonts/bodonimoda_bold.ttf') format('truetype');          font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('/fonts/bricolagegrotesque.ttf') format('truetype');       font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('/fonts/bricolagegrotesque_bold.ttf') format('truetype');  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans';   src: url('/fonts/plusjakartasans.ttf') format('truetype');          font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans';   src: url('/fonts/plusjakartasans_bold.ttf') format('truetype');     font-weight: 700; font-style: normal; font-display: swap; }

/* ── Design tokens (Pickled marketing skin) ─────── */
:root {
  --cp-bg:        #0F1612;
  --cp-bg-elev:   #141C17;
  --cp-card:      #18221D;
  --cp-fg1:       #EDEFE7;
  --cp-fg2:       #A8B2A8;
  --cp-fg3:       #7F8A82;
  --cp-primary:   #3CA678;
  --cp-primary-l: #5FC898;
  --cp-lime:      #C8E020;
  --cp-gold:      #F5A623;
  --cp-ink:       #08110C;
  --cp-band:      #F2ECDD;
  --cp-hairline:  rgba(232, 220, 192, 0.10);
  --cp-demo-secs: 4.2s;
}

/* ── Base ───────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* The nav is sticky, so anchor targets must stop clear of it. */
:target, [id] { scroll-margin-top: 82px; }
body {
  margin: 0;
  background: var(--cp-bg);
  color: var(--cp-fg1);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  overflow-x: hidden;
}
h1, h2, h3 { color: inherit; }
img { max-width: 100%; }
a { color: #7FC8A8; text-decoration: none; }
a:hover { color: var(--cp-primary-l); }
button { font: inherit; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
/* The native marker is dropped for styling, so put a visible one back: without
   it the FAQ rows read as static cards, and a touch device has no cursor to
   hint otherwise. Flex (not float) keeps the chevron on the first line when a
   question wraps on a phone. */
details > summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
details > summary::after {
  content: ''; flex-shrink: 0;
  width: 9px; height: 9px; margin: 6px 4px 0 0;
  border-right: 2px solid var(--cp-lime); border-bottom: 2px solid var(--cp-lime);
  transform: rotate(45deg); transform-origin: center;
  transition: transform 0.2s ease, margin 0.2s ease;
}
details[open] > summary::after { transform: rotate(-135deg); margin-top: 10px; }

.cp-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--cp-lime); color: var(--cp-ink);
  font-weight: 800; padding: 12px 18px; border-radius: 0 0 10px 0;
}
.cp-skip:focus { left: 0; color: var(--cp-ink); }

/* Heading a screen reader needs but the design does not show. */
.cp-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--cp-lime); outline-offset: 3px; border-radius: 4px; }

/* ── Keyframes used by the design ───────────────── */
@keyframes chatScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes cpRing { from { stroke-dashoffset: 56.5; } to { stroke-dashoffset: 0; } }

/* ── Hover states lifted out of the handoff's style-hover ── */
.hv-text:hover        { color: var(--cp-fg1); }
.hv-ghost:hover       { border-color: rgba(232, 220, 192, 0.4); color: var(--cp-fg1); }
.hv-store:hover       { border-color: rgba(232, 220, 192, 0.35); color: var(--cp-fg1); }
.hv-arrow:hover       { border-color: rgba(200, 224, 32, 0.55); color: var(--cp-fg1); }
.hv-outline:hover     { border-color: rgba(200, 224, 32, 0.7); color: var(--cp-fg1); }
.hv-gold:hover        { border-color: var(--cp-gold); color: var(--cp-fg1); }
.hv-lime:hover        { border-color: var(--cp-lime); color: var(--cp-fg1); }
.hv-cta-green:hover   { background: var(--cp-primary-l); color: var(--cp-ink); }
.hv-cta-lime:hover    { background: linear-gradient(135deg, #D8EE45 0%, #5FC898 100%); color: var(--cp-ink); }
.hv-jump:hover        { border-color: rgba(200, 224, 32, 0.5); background: rgba(200, 224, 32, 0.06); color: var(--cp-fg1); }

/* ── Home hero field ─────────────────────────────
   The brand's own ground, as on the app splash: a deep green with a court in
   plan behind the product, no photography. */
.cp-hero-field {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(120% 90% at 22% 38%, #16503B 0%, #0E3529 38%, #0A1F18 72%, #0A1610 100%);
}
.cp-hero-field::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,22,16,0.35) 0%, rgba(10,22,16,0) 28%, rgba(10,22,16,0) 62%, #0F1612 100%);
}
.cp-hero-field::after {
  content: ''; position: absolute; width: 640px; height: 640px; border-radius: 50%;
  right: -180px; top: -240px;
  background: radial-gradient(circle, rgba(200,224,32,0.16) 0%, rgba(200,224,32,0) 68%);
}
.cp-court {
  position: absolute; width: 1320px; height: auto;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}

/* ── Nav ────────────────────────────────────────── */
.cp-nav-start, .cp-nav-login { display: none; }

.cp-nav-toggle {
  display: none;
  width: 42px; height: 42px; flex-shrink: 0;
  align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(232, 220, 192, 0.18);
  background: transparent;
  color: var(--cp-fg1);
  cursor: pointer;
}
.cp-nav-toggle svg { display: block; }
.cp-nav-toggle .cp-icon-close,
.cp-nav-toggle[aria-expanded='true'] .cp-icon-open { display: none; }
.cp-nav-toggle[aria-expanded='true'] .cp-icon-close { display: block; }

/* ── Demo carousels (Home) ──────────────────────── */
.cp-slide {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transition: opacity 0.55s ease;
}
.cp-slide.is-active { opacity: 1; pointer-events: auto; }

.cp-arrow {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(200, 224, 32, 0.45);
  background: rgba(200, 224, 32, 0.10);
  color: var(--cp-lime);
  font-size: 17px; line-height: 1;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cp-track { position: relative; width: 214px; height: 46px; }
.cp-label {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) translateX(34px) scale(0.92);
  opacity: 0; pointer-events: none; white-space: nowrap;
  display: flex; align-items: center; gap: 11px;
  background: var(--cp-primary); color: var(--cp-ink);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 14px; font-weight: 800; letter-spacing: -0.1px;
  border-radius: 999px; padding: 11px 15px 11px 22px;
  box-shadow: 0 10px 26px -8px rgba(60, 166, 120, 0.55);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.cp-label.is-before { transform: translate(-50%, -50%) translateX(-34px) scale(0.92); }
.cp-label.is-active { opacity: 1; transform: translate(-50%, -50%) translateX(0) scale(1); }

.cp-ring { display: block; overflow: visible; transform: rotate(-90deg); flex-shrink: 0; }
.cp-ring-fg { animation: cpRing var(--cp-demo-secs) linear infinite; }
.cp-demo.is-held .cp-ring { opacity: 0.4; }
.cp-demo.is-paused .cp-ring { opacity: 0.25; }

/* ── Fluid in-app screen embed ──────────────────────
   A recreated app screen is authored at 390x844. This scales it to whatever
   width the column gives it; clubpad.js sets --cp-embed-scale from the measured
   container, and the 0.6 default is the desktop value so it is right even
   before (or without) JS. */
.cp-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 390 / 844;
  overflow: hidden;
  border-radius: 24px;
}
/* Its frame needs a definite width — .cp-embed has no intrinsic one. */
.cp-phone-frame { width: 100%; max-width: 262px; }
.cp-embed > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: 844px;
  transform: scale(var(--cp-embed-scale, 0.6));
  transform-origin: top left;
}

/* ── Pricing toggles ────────────────────────────── */
.cp-chip {
  cursor: pointer; border: none; background: transparent;
  color: var(--cp-fg2);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 700;
  border-radius: 999px; padding: 8px 16px;
  white-space: nowrap; transition: all 0.2s ease;
}
.cp-chip[aria-pressed='true'] { background: var(--cp-primary); color: var(--cp-ink); }

/* =============================================================
   Responsive — the mobile version
   ============================================================= */

/* Tablet: 4-up strips become 2-up. */
@media (max-width: 1040px) {
  .cp-g[data-cp-cols='4'] { grid-template-columns: 1fr 1fr !important; }
}

/* Below this the two-column editorial layouts stack. */
@media (max-width: 980px) {
  .cp-g[data-cp-cols='2'] { grid-template-columns: minmax(0, 1fr) !important; gap: 44px !important; }
  /* Collapsing the template is not enough: a child carrying an explicit
     `grid-column: 2` from the handoff's desktop layout makes Grid conjure an
     implicit second column, which squeezed one features.html panel to 0px wide.
     Every child stacks here, so explicit placement has nothing left to mean. */
  .cp-g[data-cp-cols='2'] > * { grid-column: auto !important; }
  .cp-wrap { padding-left: 22px !important; padding-right: 22px !important; }

  /* The 44px is for the editorial two-column sections. Inner grids (bullet
     lists, card pairs, feature bullets) stack too, and 44px between bullets
     reads as a broken layout. */
  .cp-g.cp-list[data-cp-cols='2'] { gap: 0 !important; }
  .cp-g.cp-tight[data-cp-cols='2'] { gap: 12px !important; }

  /* My Game Plus leads with the words once stacked. The home hero keeps the
     phone first: the brand is already in the sticky nav and the demo carries
     its own label, so the product is the first thing a phone visitor sees. */
  #mygame > .cp-g > :first-child { order: 2; }
  #mygame > .cp-g > :last-child { order: 1; }
  #top > .cp-g { gap: 28px !important; }
}

@media (max-width: 880px) {
  /* Nav collapses to logo + hamburger, links drop into a sheet. */
  .cp-nav-toggle { display: flex; }
  .cp-nav-links {
    display: none !important;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch !important;
    gap: 0 !important;
    background: #0F1612;
    border-bottom: 1px solid var(--cp-hairline);
    padding: 6px 20px 14px 20px;
    font-size: 15px !important;
    overflow: visible !important;
  }
  .cp-nav-links a { padding: 13px 0; border-bottom: 1px solid var(--cp-hairline); }
  .cp-nav-links a:last-child { border-bottom: none; }
  nav.is-open .cp-nav-links { display: flex !important; }
  .cp-nav-actions .cp-login { display: none; }
  /* The sheet carries the start CTA and Log in; the bar keeps the green CTA. */
  .cp-nav-start { display: block !important; color: var(--cp-lime); font-weight: 700; }
  .cp-nav-login { display: block !important; color: var(--cp-fg1); }

  .cp-g[data-cp-cols='3'] { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
  /* Once the feature rows stack, the phones get the full column rather than
     staying at their 262px desktop width. */
  .cp-phone-frame { max-width: 340px; }
  /* Footer's 1.4fr 1fr 1fr 1fr becomes a two-up link block. */
  .cp-g[data-cp-cols='4'] { gap: 28px !important; }
}

/* Phone */
@media (max-width: 700px) {
  .cp-g[data-cp-cols='4'] { grid-template-columns: minmax(0, 1fr) !important; }

  .cp-wrap { padding-left: 20px !important; padding-right: 20px !important; }

  /* Only sides carrying 48px+ of desktop air get trimmed, judged independently.
     Trimming every wrapper would *add* space to the tight ones — the pricing
     toggles sit 8px above the plan cards by design. */
  .cp-pt { padding-top: 48px !important; }
  .cp-pb { padding-bottom: 48px !important; }
  footer .cp-pt { padding-top: 36px !important; }
  footer .cp-pb { padding-bottom: 36px !important; }


  /* Phone bezels: the widest is 320px + 11px padding. Scale to fit 320px of gutter. */
  .cp-phone-lg { transform: scale(0.86); transform-origin: top center; margin-bottom: -92px; }

  /* Home hero on a phone: demo first, the big wordmark is redundant under the
     nav's, and the pitch centres under the strip. */
  #top > .cp-g { padding-top: 18px !important; gap: 26px !important; }
  .cp-hero-wordmark { display: none; }
  .cp-hero-pitch { text-align: center; }
  .cp-hero-pitch h1 { margin: 12px auto 0 !important; }
  .cp-hero-pitch > div { justify-content: center; }
  .cp-hero-pitch .hv-cta-lime, .cp-hero-pitch .hv-outline { flex: 1 1 100%; text-align: center; }
  .cp-court { width: 150vw; transform: translate(-50%, -50%) rotate(90deg); }

  /* ── The phone strip ──────────────────────────────
     Below 700px each demo stops being a single bezel that swaps its screen and
     becomes a row of framed screens you swipe, one screen per card with its
     caption underneath. clubpad.js does not run the carousel at this width, so
     nothing auto-advances and no screen is hidden from assistive tech. */
  .cp-demo { display: block !important; width: 100vw; margin-left: calc(50% - 50vw); }
  .cp-demo .cp-phone {
    display: flex; gap: 14px; align-items: flex-start;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    padding: 4px 20px 6px !important; scroll-padding-left: 20px;
    background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    transform: none !important; margin: 0 !important;
    scrollbar-width: none;
  }
  .cp-demo .cp-phone::-webkit-scrollbar { display: none; }
  .cp-demo .cp-phone > div { display: contents; }
  .cp-demo .cp-slide {
    position: static !important; inset: auto;
    flex: 0 0 auto; width: 280px; scroll-snap-align: start;
    opacity: 1 !important; pointer-events: auto !important; transition: none !important;
  }
  .cp-demo .cp-slide > :first-child {
    display: block; box-sizing: content-box; width: 280px; height: 606px;
    background: #0B100D; border: 1px solid rgba(232,220,192,0.12); border-radius: 40px; padding: 8px;
    box-shadow: 0 24px 48px -20px rgba(0,0,0,0.6);
  }
  .cp-demo .cp-slide > img:first-child { object-fit: cover; border-radius: 40px; }
  .cp-demo .cp-slide > div:first-child { border-radius: 40px; overflow: hidden; }
  .cp-demo .cp-slide > div:first-child > div { border-radius: 33px; overflow: hidden; }
  .cp-demo .cp-slide::after {
    content: attr(data-caption); display: block; margin: 12px auto 0; width: fit-content;
    background: var(--cp-primary); color: var(--cp-ink);
    font-size: 13px; font-weight: 800; letter-spacing: -0.1px; border-radius: 999px; padding: 8px 16px;
  }
  .cp-demo > div:last-child:not(.cp-phone) { display: none !important; }

  /* Type: the design's clamps bottom out too large for a 360px screen. */
  .cp-hero-eyebrow { font-size: 13px !important; letter-spacing: 2.4px !important; }
}

/* The My Game Plus price column loses its divider rule when it stacks. */
@media (max-width: 980px) {
  .cp-mgp-price {
    border-left: none !important;
    border-top: 1px solid rgba(232, 220, 192, 0.10);
    padding-left: 0 !important;
    padding-top: 24px;
  }
}

@media (max-width: 400px) {
  .cp-phone { transform: scale(0.92); transform-origin: top center; margin-bottom: -50px; }
  .cp-phone-lg { transform: scale(0.76); margin-bottom: -160px; }
  .cp-track { width: 178px; }
  .cp-label { font-size: 13px; padding: 10px 13px 10px 18px; }
}

/* ── Motion preferences ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .cp-ring { display: none; }
}

/* ── Print ──────────────────────────────────────── */
@media print {
  nav, .cp-arrow, .cp-track { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Below ~460px the full "Start your club free" pushed the nav row past the
   viewport (measured 376px of content inside 320px). The CTA stays — it is the
   one action that must always be on screen once the hero leads with the phone —
   and drops to "Start free"; Log in lives in the sheet. */
@media (max-width: 460px) {
  .cp-nav-actions .cp-long { display: none; }
  .cp-nav-actions .cp-login { display: none; }
}

/* =============================================================
   Components added in the September 2026 quality pass
   ============================================================= */

/* ── Section numbers (features.html) ─────────────
   Replaces the tinted icon squares. A numbered index reads as one system
   across the jump cards and the section headers. */
.cp-num {
  display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: 15px; letter-spacing: 0.06em; line-height: 1;
  color: var(--cp-lime);
}
.cp-num::after { content: ''; width: 22px; height: 1px; background: currentColor; opacity: 0.6; }
.cp-num.is-gold { color: var(--cp-gold); }
.cp-jump-n {
  flex-shrink: 0; min-width: 22px;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: 13px; letter-spacing: 0.06em; color: var(--cp-lime);
}
.cp-jump-n.is-gold { color: var(--cp-gold); }

/* ── "What it does" rule-and-label list (index.html) ── */
.cp-what { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.cp-what-item {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding-top: 18px; border-top: 2px solid rgba(200, 224, 32, 0.55);
}
.cp-what-k { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--cp-lime); }
.cp-what-item strong {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 17px;
  line-height: 1.25; letter-spacing: -0.01em; color: var(--cp-fg1);
}
.cp-what-d { font-size: 13.5px; line-height: 1.6; color: var(--cp-fg2); }

/* ── Fact grid (index.html "Live today") ───────── */
.cp-facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.cp-fact { margin: 0; padding: 20px 0 22px; border-top: 1px solid rgba(232, 220, 192, 0.16); min-width: 0; }
.cp-fact dt {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.02em; line-height: 1.1; color: var(--cp-fg1);
}
.cp-fact dd { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--cp-fg3); }

/* ── Responsive for the new components + a few density fixes ── */
@media (max-width: 1040px) {
  .cp-what { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 700px) {
  .cp-what { grid-template-columns: 1fr; gap: 0; padding-top: 28px !important; padding-bottom: 28px !important; }
  .cp-what-item { gap: 5px; padding: 16px 0 18px; border-top: 1px solid var(--cp-hairline); }
  .cp-what-item:first-child { border-top: 2px solid rgba(200, 224, 32, 0.55); }
  .cp-what-item strong { font-size: 16px; }

  .cp-facts { gap: 0 18px; }
  .cp-fact { padding: 16px 0 18px; }
  .cp-fact dt { font-size: 19px; }

  /* The My Game Plus price pill: a nowrap pill with a divider does not wrap
     gracefully, so it becomes a small stacked card. */
  .cp-mgp-pill { display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 6px !important; border-radius: 16px !important; padding: 14px 18px !important; }
  .cp-mgp-pill > span:nth-child(2) { display: none; }

  .cp-players .cp-g > div { padding: 20px !important; }

  /* Features: the nine jump cards become a compact two-up index instead of a
     screen and a half of full-width rows. */
  .cp-jump[data-cp-cols] { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .cp-jump > a { padding: 11px 12px !important; gap: 9px !important; border-radius: 12px !important; }
  .cp-jump > a > span:last-child { font-size: 13.5px !important; line-height: 1.25; }
  .cp-jump-n { min-width: 18px; font-size: 12px; }

  /* Features: the bullet lists stacked to one column read long — tighten. */
  .cp-list { padding: 4px 16px !important; }
  .cp-list > div { padding: 10px 2px !important; }

  /* Home footer: brand full width, then the link columns side by side. */
  .cp-footer .cp-g[data-cp-cols='4'] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 28px 14px !important; }
  .cp-footer .cp-g[data-cp-cols='4'] > :first-child { grid-column: 1 / -1; }
  .cp-footer a { overflow-wrap: anywhere; }
}
@media (max-width: 420px) {
  .cp-footer .cp-g[data-cp-cols='4'] { grid-template-columns: 1fr 1fr !important; }
}