/* ─── Reset & Base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green:     #7CFF5B;
  --navy:      #0a0e27;
  --navy-mid:  #171048;
  --blue:      #185BDB;
  --white:     #ffffff;
  --muted:     rgba(255,255,255,.6);
  --radius:    10px;
  --font-sans:    'Outfit', sans-serif;
  --font-display: "obviously-variable", sans-serif;
}

html, body { overflow-x: hidden; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--navy) url('https://static.tickpick.com/media-vault/Emails/pong-smash/Pong_BG.png?v=1784816473000') center / cover no-repeat fixed;
  color: var(--white);
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 720px; }

/* ─── Hero ─────────────────────────────────────────────── */
.hero {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  width: 100%;
}

.hero-bg {
  position: absolute;
  inset: 0;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1920px;
  height: 100%;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 64px) clamp(16px, 3vw, 48px) clamp(24px, 4vw, 56px);
}

.hero-top-group,
.hero-bottom-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
}

.hero-logo {
  width: 200px;
  height: auto;
  display: block;
}

.hero-topbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "logo logo" "tag dates";
  align-items: center;
  gap: 12px;
  width: 100%;
}

.hero-logo {
  grid-area: logo;
  justify-self: center;
}

.event-tag {
  grid-area: tag;
  justify-self: start;
}

.event-dates {
  grid-area: dates;
  justify-self: end;
}

@media (min-width: 700px) {
  .hero-topbar {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "tag logo dates";
  }
}

.event-tag,
.event-dates {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(11px, 1.35vw, 24px);
  letter-spacing: .2em;
  white-space: nowrap;
}

.event-tag {
  color: var(--green);
}

.event-dates {
  color: var(--green);
}

.hero-lockup {
  /* The wordmark inside PointSmash_Lockup.png spans 1794px of its 1920px
     canvas, symmetrically padded, so scaling by 1920/1794 lands the
     letterforms — not the canvas edge — flush with the tag/dates and the
     paddles. The parent's align-items:center supplies the offset.
     Re-measure both numbers if the art is re-exported. */
  width: calc(100% * 1920 / 1794);
  /* Required, not decorative: the img carries width/height attributes to
     reserve layout space, and without height:auto that 261 becomes the
     used height and stretches the wordmark vertically. */
  height: auto;
  display: block;
}

.hero-tagline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(16px, 2.3vw, 34px);
  letter-spacing: .2em;
  color: var(--white);
  line-height: 1.4;
}

.hero-tagline .semibold {
  font-weight: 600;
}

.hero-tagline .accent {
  color: var(--green);
  /* Obviously's "Wide Bold" named instance is wdth 150 / wght 700. Set as
     axes rather than font-stretch:150%, because the Typekit @font-face
     pins font-stretch:normal and can clamp the high-level property.
     font-weight rides along for the non-variable fallback. */
  font-weight: 700;
  font-variation-settings: "wdth" 150, "wght" 700;
}

.cta-primary {
  display: inline-block;
  background: var(--white);
  color: var(--blue);
  /* Outfit Bold. Every button on this page wants Bold, so it lives on the
     base rather than being overridden per instance. */
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 16px 48px;
  border-radius: 99px;
  border: none;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
  box-shadow: 0 4px 28px rgba(0,0,0,.25);
  text-align: center;
}

.cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 36px rgba(0,0,0,.35);
}

.hero-bottom-group .cta-primary:hover {
  box-shadow: 0 0 20px 6px rgba(255,255,255,.85), 0 8px 36px rgba(0,0,0,.35);
}

.hero-tags-img {
  display: block;
  width: 260px;
  max-width: 70%;
}

/* Combined mobile hero graphic (Mobile_LP.png) — bakes in the topbar,
   PONGSMASH lockup, tagline, court diagram and PLAY NOW button as one
   pre-composed image so mobile doesn't inherit the desktop's absolute-
   positioned/percentage-based layout (which was designed against a
   fixed 16:9 photo and didn't hold up against a content-driven height
   on phone screens). Hidden by default; shown only below 900px. */
.hero-mobile-visual {
  display: none;
  position: relative;
  width: 92%;
  margin: 28px auto 0;
}

.hero-mobile-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Invisible tap target over the PLAY NOW pill baked into mobile_LP.png
   (image is 1019x1020; pill spans x=301-717, y=883-997 of that canvas —
   converted to percentages of hero-mobile-visual, which matches the
   image's own rendered box exactly since it has no padding/border). */
.hero-mobile-cta {
  position: absolute;
  left: 29.539%;
  width: 40.824%;
  top: 86.569%;
  height: 11.176%;
  display: block;
  border-radius: 999px;
  box-shadow: 0 0 12px 2px rgba(255,255,255,.85), 0 8px 36px rgba(0,0,0,.35);
}

/* ─── How It Works ─────────────────────────────────────── */
.steps-section {
  background: var(--navy-mid);
  padding: 56px 0;
}

.steps-img {
  display: block;
  width: 100%;
  height: auto;
}

.steps-img-mobile {
  display: none;
  width: 100%;
  height: auto;
}

/* ─── Track Prices ──────────────────────────────────────── */
.promote-section {
  position: relative;
  padding: 72px 24px;
  text-align: center;
  overflow: hidden;
}

.promote-bg {
  position: absolute;
  inset: 0;
}

.promote-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.promote-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.2);
}

.promote-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.promote-inner h2 {
  font-family: var(--font-sans);
  font-size: clamp(17px, 3vw, 30px);
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
}

.promote-inner p {
  font-family: var(--font-sans);
  font-size: clamp(17px, 2.2vw, 22px);
  white-space: nowrap;
  font-weight: 400;
  color: #ffffff;
  /* the flex `gap` used to add a uniform 16px between boxes, but h2's
     line-height leading + p's top leading (~8px) made the visible
     ink-to-ink gap above this line ~24px, while p's bottom leading +
     the button's own padding (~24px) made the gap below ~40px — same
     box-gap, very different-looking gap. These explicit margins target
     an equal ~30px visual gap on both sides instead. Fixed px, not vw:
     h2/p font-size are both already clamped to their max (30px/22px) by
     1000px viewport, so the leading amounts stop growing there too —
     a vw-based margin kept growing past that point and threw the two
     gaps back out of balance at wider viewports (e.g. 1920px). */
  margin-top: 22px;
}

.promote-inner .cta-primary {
  /* measured to the button's own visible edge (not its inner text,
     which sits well below the padding-box top) — that's what actually
     reads as "the gap" to a viewer, and it needs much more margin than
     the text-to-text measurement suggested to match the 30px gap above. */
  margin-top: 25.8px;
  text-transform: none;
}

/* ─── Terms ─────────────────────────────────────────────── */
.terms-section {
  padding: 32px 0 48px;
}

.terms-accordion {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 20px 24px;
  color: var(--white);
}

.terms-accordion summary {
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.terms-accordion summary::-webkit-details-marker { display: none; }

.terms-accordion summary::after {
  content: '\25BE';
  float: right;
  transition: transform .2s;
}

.terms-accordion[open] summary::after {
  transform: rotate(180deg);
}

.terms-body {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255,255,255,.72);
}

.terms-body a {
  color: var(--green, #83F072);
  text-decoration: underline;
}

/* ─── Footer ───────────────────────────────────────────── */
.site-footer {
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  text-align: center;
}

.site-footer p {
  font-size: 12px;
  color: rgba(255,255,255,.25);
}

/* Legal link, so it reads brighter than the copyright line it sits above. */
.footer-links {
  margin-bottom: 6px;
}
.footer-links a {
  color: rgba(255,255,255,.55);
  text-decoration: underline;
}
.footer-links a:hover { color: var(--green); }

/* ─── Responsive ───────────────────────────────────────── */
@media (max-width: 899px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    background: url('https://static.tickpick.com/media-vault/lp-images/pong_Mobile_LP.png?v=1784821157000') center / cover no-repeat;
  }

  /* replaced by .hero-mobile-visual below */
  .hero-bg,
  .hero-top-group {
    display: none;
  }

  .hero-mobile-visual {
    display: block;
  }

  .hero-inner {
    height: auto;
    padding-top: 20px;
  }

  .steps-img {
    display: none;
  }

  .steps-img-mobile {
    display: block;
  }

  /* PLAY NOW is already baked into mobile_LP.png — the real link now
     lives at .hero-mobile-cta, positioned over the image's own pill.
     GAME/SAVE/MATCH is NOT baked in, so hero-tags-img still renders. */
  .hero-bottom-group .cta-primary {
    display: none;
  }

  /* PongLP-bottom-CTA.png is a very wide/thin banner (1223x57) — sized
     as a vw value (not a % of hero-inner's padded width) so the parent's
     center alignment lets it bleed symmetrically past hero-inner's
     padding. 80.5vw specifically lines its edges up with the inner
     edge of each paddle in mobile_LP.png (paddles sit at x=22-63 and
     x=955-996 of that 1019px-wide image, which itself renders at 92vw
     centered — converting those paddle-gap pixels to page-relative vw
     gives left=9.69vw, right=90.23vw, i.e. ~80.5vw wide, centered). */
  .hero-tags-img {
    width: 80.5vw;
    max-width: none;
  }
}

@media (max-width: 600px) {
  .cta-primary { font-size: 13px; padding: 14px 36px; }

  .steps-section { padding: 40px 0; }

  /* narrowed from 20px so the larger h2/p sizes above still fit on one
     line without overflowing at common phone widths (375-430px) —
     "Track Prices. Strike When They're Lowest." is long relative to a
     phone-width single line, so this reclaims just enough room. */
  .promote-section { padding: 56px 12px; }

  /* re-balances the visual gaps around the promote CTA at mobile width —
     the button margin is measured to its own visible edge (not the text
     inside it), same as the desktop rule. */
  .promote-inner p { margin-top: 4px; }
  .promote-inner .cta-primary { margin-top: 16.4px; }
}

@media (min-width: 900px) {
  .hero {
    aspect-ratio: 16 / 9;
    /* On a wide-but-short window (common on maximized desktop browsers),
       a full-bleed 16:9 hero sized from 100vw alone can be TALLER than
       the visible viewport, so it fills the entire screen with nothing
       hinting there's more below. Capping height to 92vh and letting
       width be computed from that (auto) instead of a hard 100% means
       the hero shrinks — centered, still exactly 16:9 so none of the
       paddle/lockup/tagline pixel alignments above are affected — and
       always leaves at least an 8vh peek of the next section. On more
       normal window shapes this simply resolves back to full-bleed
       100vw, since 56.25vw (100vw's own 16:9 height) is already <92vh. */
    height: min(56.25vw, 92vh);
    width: auto;
    max-width: 100vw;
    margin: 0 auto;
    /* Establishes a query container so every "vw"-equivalent measurement
       below can use "cqw" instead — cqw is 1% of THIS element's own
       rendered width, not the viewport's. That distinction only matters
       once the height cap above can make hero narrower than 100vw (the
       pillarboxed case): a real vw unit would still track the full
       viewport, silently breaking every pixel-perfect alignment in this
       block (padding, font-size, the lockup/tagline/PLAY NOW math), while
       cqw keeps tracking hero's actual width, pillarboxed or not. */
    container-type: inline-size;
  }
  .hero-inner {
    padding-left: 3.3cqw;
    padding-right: 3.3cqw;
    /* balances the gap above the logo against the gap below the tagline
       (before the court line at ~43.5% of hero height) so both are equal.
       Pure cqw (no clamp ceiling) so this ratio holds at every width in
       this range instead of drifting once a ceiling kicks in. */
    padding-top: 1.2717cqw;
    padding-bottom: 2.9167cqw;
  }

  .hero-top-group,
  .hero-bottom-group {
    gap: 1.4583cqw;
  }

  /* Pure cqw everywhere below (no clamp mins/maxes) so the whole
     composition scales as ONE fixed unit — every element grows/shrinks
     by the exact same factor as hero's own width, instead of some pieces
     (percentage-based, like the lockup) scaling smoothly while others
     (clamped px, like font-size ceilings) stop scaling and throw the
     relative proportions off at different widths. */
  .event-tag,
  .event-dates {
    font-size: 1.25cqw;
  }

  .hero-logo {
    width: 12.5cqw;
  }

  /* letter-spacing in em (relative to this element's own font-size,
     which is also pure cqw below) instead of cqw directly — that keeps
     the tagline-to-wordmark ratio constant at every width without a
     separate formula past some breakpoint. The specific values were
     tuned against the old stacked PONGSMASH lockup; the single-line
     PointSmash wordmark has different glyphs, so recalibrate these
     against the final rebrand art, not the old alignment notes. */
  .hero-tagline {
    font-size: 1.7708cqw;
    letter-spacing: 0.3826em;
    margin-left: 1.9%;
  }

  /* PongLP-bottom-CTA.png already has its own two ball icons baked in
     (at x=326-364 and x=817-855 of a 1223px canvas). Sized/positioned so
     those icons land exactly on the two balls already in the background
     art (page-x fractions 0.36138 and 0.61771 of the viewport): width
     =63.866% of the viewport makes the icon-to-icon distance match, then
     left=18.119% lines up the first icon. The icons sit at y=8-47/8-46 of
     the image's own 57px canvas (center ~27.25, i.e. 47.807% down — not
     exactly the image's own vertical midpoint), so the Y-translate uses
     that true content center instead of -50%. top is calibrated to sit
     close to the bottom edge of the hero, per reference. */
  .hero-tags-img {
    position: absolute;
    left: 18.119%;
    top: 95.3861%;
    width: 63.866%;
    max-width: none;
    transform: translateY(-47.807%);
  }

  /* PLAY NOW: per the latest reference screenshot, this is a large pill
     roughly as wide as the W-to-P span in the tagline, sitting low in
     the court, close above GAME/SAVE/MATCH. */
  .hero-bottom-group .cta-primary {
    position: absolute;
    left: 35.2115%;
    width: 31.9901%;
    bottom: 12.5%;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    font-size: 1.63cqw;
    padding: 1.3cqw 2.5cqw;
  }
}

@media (min-width: 768px) {
  .cta-primary { padding: 18px 56px; }

  .steps-section { padding: 80px 0; }

  .promote-section { padding: 96px 24px; }

  .terms-section { padding: 40px 0 64px; }
}