/* Golf 360 marketing landing page. Ported 1:1 from the approved design (Concept L / FinalPage.dc.html,
   design canvas https://claude.ai/artifact/4Zid1vGbXH32ZKDq7F2KDn) at its native 1440px desktop width - every
   color, gradient, radius, shadow and spacing value below is copied from that file, not re-derived.
   The design canvas has no mobile breakpoint of its own; the media queries at the bottom are this file's own
   reasonable responsive adaptation of that fixed-width mock, not a second pixel-checked source. */

:root {
  --red: #B01D23;
  --red-gradient: linear-gradient(150deg, #C4232A 0%, #8E181D 100%);
  --near-black: #050606;
  --slate: #6B7A8F;
  --bg: #F4F6F8;
  --loyalty-tint: #FBEFEF;
}

* { box-sizing: border-box; }

body.landing {
  margin: 0;
  font-family: Calibri, Carlito, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--near-black);
}
/* text-decoration only here, not color: a plain global "a{color:inherit}" beats a single-class button rule
   (.lp-cta etc.) on specificity, which silently made every button's own text color invisible against its
   background. Inheritance is opted into per link below, only where it's actually wanted (nav/footer links). */
.landing a { text-decoration: none; }
.lp-nav a, .lp-footer-nav a, .lp-footer-links a { color: inherit; }

.lp-heading { font-family: Poppins, Arial, sans-serif; font-weight: 800; }

/* ---- Header ---- */
.lp-header {
  min-height: 88px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 64px;
  background: var(--near-black);
  flex-wrap: wrap;
}
.lp-header-logo { height: 28px; display: block; }
.lp-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.8); flex-wrap: wrap; }
.lp-nav a:hover { color: #fff; }
.lp-header-cta {
  background: #FFFFFF; color: var(--near-black); font-family: Poppins, Arial, sans-serif; font-weight: 700;
  font-size: 14px; padding: 12px 22px; border-radius: 10px; border: none; cursor: pointer; white-space: nowrap;
}

/* ---- Hero ---- */
.lp-hero {
  box-sizing: border-box;
  background: radial-gradient(circle at 50% 28%, #7A151A 0%, #050606 68%);
  display: flex; flex-direction: column; align-items: center;
  padding: 72px 24px 64px;
  position: relative; overflow: hidden;
}
.lp-hero-copy { text-align: center; max-width: 720px; z-index: 1; }
.lp-hero-eyebrow {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: rgba(255,255,255,0.65); border: 1px solid rgba(255,255,255,0.25); border-radius: 20px; padding: 6px 16px;
  margin-bottom: 22px;
}
.lp-hero-heading { font-size: clamp(32px, 6vw, 52px); line-height: 1.08; color: #FFFFFF; margin: 0; }
.lp-hero-sub { font-size: 16px; color: rgba(255,255,255,0.7); margin-top: 16px; line-height: 1.5; }

/* Card count drives both the stack's own height and every card's top offset from ONE pair of numbers (--peek,
   the reveal step; --card-h, one card's own height) - so a 4th (or 5th) card is only ever a new cfg.hero.cards
   entry plus a SOON_TINTS slot (landing.ejs), never a new hand-placed top:/height: pair here. --n (card count)
   and --i (this card's own index, 0 = front) are set inline per element from that same loop. 2026-10-06: card-h
   is back at its original 240px (Paul wanted the cards' own dims kept as they were, not shrunk) - the reduced
   overlap instead comes from a wider --peek than the original 140px, so less of each card sits hidden under the
   next. --peek also IS a peeking card's own visible height (see .lp-wallet-card--soon's own comment on why), so
   once centering the text within that strip (justify-content:center) left too much empty space below the last
   line, the fix for THAT was to bring --peek back down a step (110px) - card-h stays untouched either way. */
.lp-wallet-stack {
  width: 100%; max-width: 420px; position: relative; margin-top: 44px; z-index: 1;
  --peek: 110px; --card-h: 240px;
  height: calc(var(--peek) * (var(--n) - 1) + var(--card-h));
}
.lp-wallet-card {
  position: absolute; left: 8px; right: 8px; width: auto; height: var(--card-h); border-radius: 24px;
  box-sizing: border-box; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end;
  top: calc(var(--peek) * var(--i, 0));
}
/* Explicit z-index (set inline per card, descending from the front), not DOM order: the live card must paint on
   top of every "coming soon" card regardless of how many there are. Three tints cycle for the peeking cards -
   soon-a/b are the original near-white pair, soon-c is the pale-red brand tint (--loyalty-tint) reused here as
   the third, visually distinct step the 2026-10-06 Golf Trips amendment needed, rather than an off-brand colour. */
/* A peeking card's own box is mostly HIDDEN behind the one in front (height - peek, see .lp-wallet-stack's own
   comment) - the base rule's justify-content:flex-end only pins content to the bottom padding, leaving whatever
   is left of that hidden region as extra, uneven whitespace above the text within the visible strip. padding-top
   reserves exactly the hidden height (so the flex area below starts right where the card actually becomes
   visible), padding-bottom is 0 so nothing else eats into that same area, and justify-content:center then splits
   whatever's left of the peek height evenly above and below the content - the gap above the title now matches
   the gap below the tagline, both following from the one calc rather than a guessed constant. Paul's "same gap
   top and bottom" call, 2026-10-06 (first attempt used flex-start, which pinned the text to the top of the
   visible strip instead and pushed all the leftover space to the bottom - wrong direction). */
.lp-wallet-card--soon {
  justify-content: center;
  padding-top: calc(var(--card-h) - var(--peek));
  padding-bottom: 0;
}
.lp-wallet-card--soon-a { background: #FFFFFF; box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
.lp-wallet-card--soon-b { background: #FCFCFD; box-shadow: 0 20px 50px rgba(0,0,0,0.35); }
.lp-wallet-card--soon-c { background: var(--loyalty-tint); box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
.lp-wallet-card--live {
  z-index: 10; background: linear-gradient(135deg, #C4232A 0%, #8E181D 100%); color: #FFFFFF;
  box-shadow: 0 24px 60px rgba(176,29,35,0.5); padding: 28px; justify-content: flex-start;
}
/* Title and badge side by side (2026-10-06: badge moved from its own line above the title to the title's own
   right, so a shorter card still reads cleanly in less vertical space) - title takes whatever room the badge
   doesn't need, badge never shrinks or wraps. */
.lp-wallet-top-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lp-wallet-top-row .lp-wallet-title { min-width: 0; }
.lp-wallet-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--slate);
  background: #ECEEF1; border-radius: 20px; padding: 4px 10px; display: inline-block; width: fit-content; flex-shrink: 0;
}
.lp-wallet-card--live .lp-wallet-badge { color: #fff; background: rgba(255,255,255,0.22); }
.lp-wallet-title { font-weight: 700; font-size: 19px; color: #050606; }
.lp-wallet-card--live .lp-wallet-title { font-family: Poppins, Arial, sans-serif; font-weight: 800; font-size: 26px; color: #fff; }
.lp-wallet-detail { font-size: 14px; color: rgba(255,255,255,0.85); margin-top: 6px; }

.lp-hero-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,0.06); pointer-events: none; }
.lp-hero-ring--outer { width: 1200px; height: 1200px; top: -410px; border-color: rgba(255,255,255,0.04); }
.lp-hero-ring--inner { width: 900px; height: 900px; top: -260px; }

/* ---- Card-stack sections (shared mechanic) ---- */
.lp-section {
  position: relative;
  box-sizing: border-box;
  padding: 60px 24px 0;
}
.lp-section-inner { max-width: 1312px; margin: 0 auto; } /* 1440 - 2*64, the design's own content width */
.lp-section--stack { border-radius: 32px 32px 0 0; margin-top: -32px; }
.lp-section--eyebrow { text-align: center; max-width: 680px; margin: 0 auto; }
.lp-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.lp-section-heading { font-size: 30px; margin-top: 12px; }
/* For Golf Clubs / For Players: the same pill-badge treatment Marketplace/Loyalty/Golf Trips already give their
   own eyebrow (background + rounded pill), not just coloured text - makes "FOR GOLF CLUBS"/"FOR PLAYERS" read as
   its own labelled chip instead of a thin caption easy to skim past. 2026-10-06, Paul's own "more prominent" call. */
#for-clubs .lp-eyebrow {
  display: inline-block; background: rgba(176,29,35,0.1); border-radius: 20px; padding: 6px 16px;
}
#for-players .lp-eyebrow {
  display: inline-block; background: rgba(255,255,255,0.12); border-radius: 20px; padding: 6px 16px;
}

/* z-index descends section by section, each sitting visually on top of the one below - see the design's own comment */
#for-clubs { z-index: 8; background: #FFFFFF; box-shadow: 0 -20px 40px rgba(5,6,6,0.18); }
#for-players { z-index: 7; background: var(--near-black); color: #fff; box-shadow: 0 -20px 40px rgba(5,6,6,0.25); }
#play-golf { z-index: 6; background: var(--red-gradient); color: #fff; box-shadow: 0 -20px 40px rgba(5,6,6,0.2); }
#marketplace { z-index: 5; background: var(--near-black); color: #fff; box-shadow: 0 -20px 40px rgba(5,6,6,0.25); }
#loyalty { z-index: 4; background: var(--loyalty-tint); box-shadow: 0 -20px 40px rgba(5,6,6,0.14); }
/* Golf Trips (2026-10-06, revised on Paul's own call): near-black, the same dark treatment Marketplace already
   uses - Loyalty (pale-red) sits between two dark sections either side of it, so the run from Marketplace reads
   dark/light/dark/dark(red) - properly alternating at the Loyalty/Golf-Trips join, which the earlier light-grey
   choice did not (two light sections in a row). Contact's own red-gradient right after is still a visibly
   different dark, the same way Play Golf's red-gradient into Marketplace's near-black already reads as two
   distinct darks, not a clash. */
#golf-trips { z-index: 3; background: var(--near-black); color: #fff; box-shadow: 0 -20px 40px rgba(5,6,6,0.25); }
#contact { z-index: 2; background: var(--red-gradient); color: #fff; box-shadow: 0 -20px 40px rgba(5,6,6,0.2); }

.lp-features {
  display: flex; flex-wrap: wrap; gap: 20px; margin-top: 32px;
}
.lp-feature { flex: 1 1 240px; border-radius: 16px; padding: 22px; }
#for-clubs .lp-feature { background: var(--bg); border-top: 3px solid var(--red); }
#for-players .lp-feature { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); }
.lp-feature-title { font-weight: 700; font-size: 15px; }
.lp-feature-body { font-size: 13px; margin-top: 8px; line-height: 1.45; }
#for-clubs .lp-feature-body { color: var(--slate); }
#for-players .lp-feature-body { color: rgba(255,255,255,0.6); }

.lp-cta-row { display: flex; justify-content: center; margin-top: 28px; }
/* #for-clubs/#for-players' own section padding-bottom is 0 (matching the design), so clearance below the CTA
   button - the actual last element in each - has to come from padding, not margin: a margin-bottom on
   .lp-cta-row collapses straight through .lp-section-inner and out past .lp-section's own zero bottom padding
   (padding of exactly 0 still stops collapse in principle, but nothing here needs relying on that edge case),
   landing as extra space BETWEEN sections instead of inside this one. Padding never collapses, so this does. */
#for-clubs .lp-section-inner, #for-players .lp-section-inner { padding-bottom: 60px; }
.lp-cta {
  background: var(--red); color: #FFFFFF; font-family: Poppins, Arial, sans-serif; font-weight: 700; font-size: 14px;
  padding: 13px 26px; border-radius: 10px; border: none; cursor: pointer; display: inline-block;
}

/* ---- Play Golf spotlight ---- */
.lp-playgolf-body {
  display: flex; align-items: center; gap: 56px; padding-bottom: 60px; flex-wrap: wrap;
}
.lp-playgolf-copy { flex: 1 1 380px; }
.lp-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; background: rgba(255,255,255,0.2);
  border-radius: 20px; padding: 4px 10px; display: inline-block; margin-bottom: 14px;
}
.lp-playgolf-heading { font-size: 32px; margin: 0; }
.lp-playgolf-body-text { font-size: 15px; color: rgba(255,255,255,0.85); margin-top: 10px; line-height: 1.5; max-width: 460px; }
.lp-checklist { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; list-style: none; padding: 0; }
.lp-checklist li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.lp-checklist svg { flex-shrink: 0; }
.lp-playgolf-cta {
  display: block; width: fit-content; background: #FFFFFF; color: var(--red); font-family: Poppins, Arial, sans-serif; font-weight: 700;
  font-size: 14px; padding: 13px 26px; border-radius: 10px; margin: 22px auto 0;
}

.lp-preview-card {
  width: 100%; max-width: 340px; flex-shrink: 0; background: #FFFFFF; border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 48px rgba(0,0,0,0.3);
}
.lp-preview-head { background: var(--red); padding: 18px 18px 14px; }
.lp-preview-badge {
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; background: rgba(255,255,255,0.18);
  border-radius: 20px; padding: 3px 9px; display: inline-block; margin-bottom: 8px; color: #fff;
}
.lp-preview-club { font-family: Poppins, Arial, sans-serif; font-weight: 800; font-size: 15px; color: #FFFFFF; }
.lp-preview-rows { padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.lp-preview-row {
  background: #FFFFFF; border: 1px solid #E4E8EC; border-radius: 10px; padding: 10px 12px; display: flex;
  justify-content: space-between; font-size: 12px; color: #050606;
}
.lp-preview-row .name { font-weight: 600; }
.lp-preview-row .points { font-weight: 700; }

/* ---- Marketplace / Loyalty (matching centred layout) ---- */
.lp-simple-section { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 60px; }
.lp-simple-heading { font-size: 30px; margin-top: 14px; }
.lp-simple-body { font-size: 15px; margin-top: 10px; max-width: 520px; line-height: 1.5; }
#marketplace .lp-simple-body, #golf-trips .lp-simple-body { color: rgba(255,255,255,0.6); }
#loyalty .lp-simple-body { color: var(--slate); }
.lp-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; margin-top: 26px; font-size: 13px; font-weight: 600; }
#marketplace .lp-tags, #golf-trips .lp-tags { color: rgba(255,255,255,0.7); }
#loyalty .lp-tags { color: #050606; }
.lp-tags .sep { opacity: 0.6; }
.lp-dashed-pill {
  margin-top: 26px; border: 1.5px dashed; font-family: Poppins, Arial, sans-serif; font-weight: 700; font-size: 13px;
  padding: 11px 22px; border-radius: 10px;
}
#marketplace .lp-dashed-pill, #golf-trips .lp-dashed-pill { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.6); }
#loyalty .lp-dashed-pill { border-color: #C7CFD7; color: var(--slate); }
#marketplace .lp-eyebrow, #marketplace .lp-badge-inline, #golf-trips .lp-eyebrow, #golf-trips .lp-badge-inline {
  font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; background: rgba(255,255,255,0.12);
  border-radius: 20px; padding: 4px 10px; color: #fff;
}
#loyalty .lp-badge-inline {
  font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--red);
  background: rgba(176,29,35,0.1); border-radius: 20px; padding: 4px 10px;
}

/* ---- Contact ---- */
.lp-contact-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding-bottom: 60px; text-align: center; }
.lp-contact-heading { font-size: 28px; margin: 0; }
.lp-contact-sub { font-size: 14px; color: rgba(255,255,255,0.8); margin-top: 8px; }
.lp-contact-form { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 440px; text-align: left; }
.lp-form-row { display: flex; gap: 10px; flex-wrap: wrap; }
.lp-form-row .lp-contact-input { flex: 1 1 200px; }
.lp-contact-input {
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); border-radius: 10px; padding: 13px 18px;
  font-size: 14px; color: #fff; width: 100%; box-sizing: border-box; font-family: Calibri, Carlito, sans-serif;
}
.lp-contact-input::placeholder { color: rgba(255,255,255,0.7); }
.lp-contact-textarea { resize: vertical; min-height: 90px; }
.lp-interest-group { border: none; margin: 0; padding: 0; }
.lp-interest-label { padding: 0; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); margin-bottom: 10px; }
.lp-interest-options { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.lp-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.lp-checkbox input[type="checkbox"] { width: 16px; height: 16px; accent-color: #FFFFFF; cursor: pointer; }
/* Pure CSS reveal (no JS on this page at all - see the build brief): the "Other" free-text field only shows
   once its own checkbox is ticked. :has() reaches from the checkbox, nested inside .lp-interest-options, out to
   its sibling at the fieldset level - broadly supported by 2026, and the field stays functionally optional
   server-side either way, so an ancient browser simply keeps it hidden rather than breaking the form. */
.lp-other-detail { display: none; margin-top: 4px; }
.lp-interest-group:has(#lp-other-check:checked) .lp-other-detail { display: block; }
.lp-consent { font-size: 12px; color: rgba(255,255,255,0.65); }
/* The widget's own container div (rendered by Cloudflare's script, not this file) is a plain block that stretches
   full-width as a column-flex child by default, left-aligning the fixed-width challenge inside it - centering the
   wrapper itself, not the widget, matches every other element in this form. */
.cf-turnstile { display: flex; justify-content: center; }
.lp-contact-submit {
  background: #FFFFFF; color: var(--red); font-family: Poppins, Arial, sans-serif; font-weight: 700; font-size: 14px;
  padding: 13px 22px; border-radius: 10px; border: none; cursor: pointer; align-self: center;
}
.lp-contact-message { font-size: 13px; font-weight: 600; }
.lp-contact-message--ok { color: #B6F0D4; }
.lp-contact-message--error { color: #FFD3D3; }

/* ---- Footer ---- */
.lp-footer {
  position: relative; z-index: 1; margin-top: -32px; margin-bottom: 40px; background: var(--near-black);
  border-radius: 32px; box-shadow: 0 -20px 40px rgba(5,6,6,0.18), 0 16px 30px rgba(5,6,6,0.1);
  padding: 44px 24px; box-sizing: border-box; color: #FFFFFF;
}
.lp-footer-inner { max-width: 1312px; margin: 0 auto; }
.lp-footer-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.lp-footer-logo { height: 24px; }
.lp-footer-nav { display: flex; gap: 22px; font-size: 13px; color: rgba(255,255,255,0.7); flex-wrap: wrap; }
.lp-footer-nav a:hover { color: #fff; }
.lp-footer-divider { height: 1px; background: rgba(255,255,255,0.12); margin: 26px 0 20px; }
.lp-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: rgba(255,255,255,0.5); flex-wrap: wrap; }
.lp-footer-links { display: flex; gap: 18px; }
.lp-footer-links a:hover { color: rgba(255,255,255,0.8); }

/* ---- Responsive: the design canvas only specifies 1440px desktop; everything below is this build's own
   reasonable adaptation, not a second pixel-checked source (see this file's own header comment). ---- */
@media (max-width: 900px) {
  .lp-header, .lp-section, .lp-footer { padding-left: 24px; padding-right: 24px; }
  .lp-hero { padding-left: 20px; padding-right: 20px; }
  .lp-playgolf-body { flex-direction: column; align-items: stretch; text-align: center; }
  .lp-playgolf-copy { text-align: left; }
  .lp-preview-card { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .lp-nav { display: none; } /* seven links plus logo and CTA don't fit a phone header - no hamburger in the design to fall back to */
  .lp-header { justify-content: space-between; padding: 12px 20px; }
  .lp-hero-heading { font-size: 32px; }
  /* Height and every card's own top both recompute from these two custom properties alone (see the desktop rule's
     own comment) - no per-card override needed here even as the card count changes. */
  .lp-wallet-stack { --peek: 96px; --card-h: 210px; }
  .lp-contact-form { max-width: 320px; }
  .lp-footer-bottom { flex-direction: column; align-items: flex-start; }
}