/* ============================================================
   PLAYERS GOLF - "Members' Club" theme
   Light cream base · deep green · gold · Cormorant Garamond.
   (Implements the Players Golf Website design.)
   ============================================================ */

/* Self-hosted fonts (assets/fonts/) - no third-party font CDN, so visitors'
   IPs never leave our own hosting (keeps the Privacy Policy's processor list
   accurate). Cormorant is Google's variable file covering weights 500-700;
   Archivo is subset to the two "PG" monogram glyphs (~1KB). */
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:500 700;font-display:swap;
  src:url('../assets/fonts/cormorant-garamond-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;
  src:url('../assets/fonts/archivo-800-pg.woff2') format('woff2');
}

:root{
  --cream:#F6F3EC;        /* page background          */
  --cream-2:#F4F1EA;      /* phone screen / panels    */
  --card:#ffffff;         /* feature cards            */

  --green:#0B3D2E;        /* primary deep green       */
  --green-light:#155640;  /* gradient top             */
  --green-deep:#07271D;   /* footer / darkest         */

  --gold:#C8A96A;         /* primary gold             */
  --gold-bright:#D8BC82;  /* gold on dark / accents   */
  --gold-deep:#85652C;    /* gold eyebrow on light - darkened from the design's
                             #A07C3C, which is only 3.48:1 on cream and fails
                             WCAG AA at 13px bold. #85652C is ~4.75:1.        */

  --ink:#16201B;          /* headings / primary text  */
  --ink-2:#3C463F;        /* body on light            */
  --muted:#5C665F;        /* secondary on light       */
  --faint:#9AA39D;        /* meta / tertiary          */
  --on-green:#F6F2E9;     /* text on green            */

  --maxw:1180px;
  --pad:clamp(20px,5vw,32px);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,Helvetica,Arial,sans-serif;
  --logo-mono:'Archivo','Segoe UI',system-ui,Helvetica,Arial,sans-serif; /* "PG" monogram only */
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{
  background:var(--cream);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
::selection{background:var(--gold);color:var(--green)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.serif{font-family:var(--serif)}

@keyframes pgFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pgRing{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}
.fade{animation:pgFade .7s var(--ease) both}
.fade.d1{animation-delay:.08s}.fade.d2{animation-delay:.18s}.fade.d3{animation-delay:.28s}

/* ============================================================ HEADER */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(246,243,236,0.82);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid rgba(11,61,46,0.08);
}
.site-header__in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);height:74px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:inline-flex;align-items:center;gap:12px}
/* The monogram is a gold-edged rounded square (not a circle) with the "PG"
   set in Archivo 800 and tightly tracked - see the design. The negative
   margin cancels the trailing letter-space so "PG" sits optically centred. */
.logo__badge{width:42px;height:42px;border-radius:11px;border:1px solid rgba(200,169,106,0.42);background:var(--green);display:flex;align-items:center;justify-content:center;flex:none}
.logo__badge span{font-family:var(--logo-mono);font-weight:800;font-size:19px;color:var(--gold-bright);letter-spacing:-1.5px;margin-right:-1.5px}
.logo__name{font-family:var(--serif);font-weight:600;font-size:23px;color:var(--green);letter-spacing:.3px}
/* margin-left:auto pulls the links into one right-aligned cluster with the
   App Store badge, as the design has them (space-between would otherwise park
   the nav mid-bar). margin-right tops the 1rem container gap up to the
   design's 34px. Reset inside the mobile dropdown below. */
.nav{display:flex;align-items:center;gap:34px;margin-left:auto;margin-right:18px}
.nav a:not(.btn-join){font-size:15px;font-weight:500;color:var(--ink-2);transition:color .2s}
.nav a:not(.btn-join):hover{color:var(--green)}
.btn-join{height:42px;padding:0 22px;border-radius:9999px;background:var(--green);color:#fff;display:inline-flex;align-items:center;font-size:15px;font-weight:600;box-shadow:0 6px 18px rgba(11,61,46,0.2);transition:transform .2s var(--ease),box-shadow .2s}
.btn-join:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(11,61,46,0.28)}
/* Header actions sit OUTSIDE .nav so the App Store badge stays visible on
   mobile instead of being hidden behind the hamburger. */
.header__actions{display:flex;align-items:center;gap:12px}
.menu-btn{display:none;width:42px;height:42px;border:1px solid rgba(11,61,46,.18);border-radius:11px;color:var(--green);align-items:center;justify-content:center;flex:none}
.menu-btn svg{width:20px;height:20px}

/* ============================================================ APP STORE BADGE */
.appstore{display:inline-flex;align-items:center;flex:none;transition:transform .2s var(--ease),opacity .2s}
.appstore:hover{transform:translateY(-1px);opacity:.88}
.appstore img{height:55px;width:auto}
.appstore--sm img{height:40px}

/* ============================================================ HERO */
.hero{background:radial-gradient(120% 120% at 85% 0%, var(--green-light) 0%, var(--green) 52%, var(--green-deep) 100%);position:relative;overflow:hidden}
.hero__ring{position:absolute;border-radius:9999px;border:1px solid rgba(200,169,106,0.18);pointer-events:none}
.hero__ring.r1{top:-120px;right:-80px;width:420px;height:420px}
.hero__ring.r2{top:-60px;right:-20px;width:300px;height:300px;border-color:rgba(200,169,106,0.14);animation:pgRing 6s ease-in-out infinite}
.hero__grid{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(64px,9vw,96px) var(--pad) clamp(72px,10vw,104px);display:grid;grid-template-columns:1.1fr 0.9fr;gap:clamp(32px,5vw,56px);align-items:center}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.hero__eyebrow{color:var(--gold-bright);margin-bottom:22px}
.hero__title{font-family:var(--serif);font-weight:600;font-size:clamp(40px,6.4vw,66px);line-height:1.02;color:var(--on-green);letter-spacing:-0.5px;text-wrap:balance}
.hero__sub{font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:rgba(246,242,233,0.72);margin-top:24px;max-width:480px}

/* hero call-to-action: App Store badge + "golfers joining" avatar stack */
.hero__actions{margin-top:36px;max-width:470px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.joiners{display:flex;align-items:center;gap:9px}
.joiners__avatars{display:flex}
.av{width:32px;height:32px;border-radius:9999px;border:2px solid var(--green);display:flex;align-items:center;justify-content:center;flex:none;font-family:var(--serif);font-weight:600;font-size:15px}
.av+.av{margin-left:-11px}
.av--1{background:#1C6A4F;color:var(--gold-bright)}
.av--2{background:#7A5B2E;color:var(--on-green)}
.av--3{background:#234D3C;color:var(--gold-bright)}
/* 0.64 rather than the design's 0.6: at 0.6 the worst corner measures 4.51:1
   against the hero gradient, which clears AA by 0.01 - too thin to rely on. */
.joiners__label{font-size:13.5px;line-height:1.4;color:rgba(246,242,233,0.64);max-width:130px}
/* alpha 0.62 (not the design's 0.5) - 0.5 measures ~3.8-4.4:1 on the hero
   gradient and fails AA at every position the note can render. */
.hero__note{font-size:13.5px;color:rgba(246,242,233,0.62);margin-top:16px}

/* signup - RETAINED but currently unused. The waitlist forms were replaced by
   App Store download buttons; these rules (and functions/api/waitlist.js) are
   kept so the Brevo waitlist can be restored without rebuilding it. */
.signup{margin-top:36px;max-width:470px}
.signup__row{display:flex;gap:10px;border-radius:16px;padding:7px}
.signup--hero .signup__row{background:rgba(255,255,255,0.08);border:1px solid rgba(246,242,233,0.18)}
.signup--light .signup__row{background:#fff;border:1px solid rgba(11,61,46,0.12);box-shadow:0 8px 28px rgba(11,61,46,0.08)}
.signup input{flex:1;min-width:0;padding:14px 16px;border:none;background:transparent;font-size:16px;font-family:var(--sans);outline:none}
.signup--hero input{color:var(--on-green)}
.signup--hero input::placeholder{color:rgba(246,242,233,0.5)}
.signup--light input{color:var(--ink)}
.signup--light input::placeholder{color:var(--faint)}
.signup__btn{padding:0 22px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;white-space:nowrap;transition:opacity .2s,transform .2s}
.signup--hero .signup__btn{background:var(--gold);color:var(--green)}
.signup--light .signup__btn{background:var(--green);color:#fff}
.signup__btn:hover{transform:translateY(-1px)}
.signup__btn[aria-busy="true"]{opacity:.65;pointer-events:none}
.signup__note{font-size:13.5px;margin-top:13px}
.signup--hero .signup__note{color:rgba(246,242,233,0.5)}
.signup--light .signup__note{color:var(--muted)}
.signup__msg{font-size:14px;margin-top:10px;min-height:1.2em}
.signup--hero .signup__msg{color:#F2C9B5}
.signup--light .signup__msg{color:#9C4221}
.signup__msg.ok{color:var(--gold-bright)}
.signup--light .signup__msg.ok{color:var(--green)}
.cf-turnstile-box{margin-top:12px;min-height:65px}
/* honeypot */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* success card (revealed after signup) */
.signup__done{display:none;align-items:center;gap:13px;border-radius:16px;padding:18px 20px;animation:pgFade .4s ease}
.signup--hero .signup__done{background:rgba(200,169,106,0.14);border:1px solid rgba(200,169,106,0.4)}
.signup--light .signup__done{display:none;background:rgba(11,61,46,0.06)}
.signup__done .tick{width:38px;height:38px;border-radius:9999px;background:var(--gold);display:flex;align-items:center;justify-content:center;flex:none}
.signup--light .signup__done .tick{background:var(--green)}
.signup__done .tick svg{width:18px;height:18px}
.signup__done b{font-size:16px;font-weight:700}
.signup--hero .signup__done b{color:var(--on-green)}
.signup--light .signup__done b{color:var(--green)}
.signup__done small{display:block;font-size:14px;margin-top:1px}
.signup--hero .signup__done small{color:rgba(246,242,233,0.6)}
.signup--light .signup__done small{color:var(--muted)}
.is-done .signup__row,.is-done .signup__note,.is-done .cf-turnstile-box,.is-done .signup__msg{display:none}
.is-done .signup__done{display:inline-flex}

/* phone mockup */
.phone-wrap{display:flex;justify-content:center}
.phone{width:min(300px,80vw);aspect-ratio:300/626;border-radius:46px;background:var(--green);border:1px solid rgba(200,169,106,0.3);padding:11px;box-shadow:0 40px 80px rgba(0,0,0,0.4)}
.phone__screen{width:100%;height:100%;border-radius:36px;overflow:hidden;background:var(--cream-2)}
.phone__screen img{width:100%;height:100%;object-fit:contain;object-position:top center}

/* ============================================================ TRUST STRIP */
.trust{background:var(--green);border-top:1px solid rgba(200,169,106,0.18)}
.trust__in{max-width:var(--maxw);margin:0 auto;padding:26px var(--pad);display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:center}
.trust__item{display:flex;align-items:center;gap:11px}
.trust__item svg{width:18px;height:18px;flex:none}
.trust__item span{font-size:15px;color:rgba(246,242,233,0.85)}

/* ============================================================ SECTIONS */
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(64px,9vw,104px) var(--pad) 30px}
.section__head{text-align:center;max-width:620px;margin:0 auto 56px}
.section__eyebrow{color:var(--gold-deep);margin-bottom:16px}
.section__title{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4.6vw,46px);line-height:1.05;color:var(--ink);letter-spacing:-0.3px}

/* features */
.features__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.feature-card{background:var(--card);border:1px solid rgba(11,61,46,0.07);border-radius:22px;padding:30px 26px;box-shadow:0 4px 20px rgba(11,61,46,0.04)}
.feature-card__ic{width:52px;height:52px;border-radius:14px;background:rgba(11,61,46,0.06);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.feature-card__ic svg{width:24px;height:24px}
.feature-card h3{font-size:20px;font-weight:700;color:var(--ink);margin-bottom:9px}
.feature-card p{font-size:15.5px;line-height:1.55;color:var(--muted)}

/* how it works */
.steps__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:36px}
.step{text-align:center}
.step__n{width:64px;height:64px;border-radius:9999px;border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.step__n span{font-family:var(--serif);font-weight:600;font-size:28px;color:var(--gold-deep)}
.step h3{font-size:20px;font-weight:700;color:var(--ink);margin-bottom:9px}
.step p{font-size:15.5px;line-height:1.55;color:var(--muted);max-width:300px;margin:0 auto}

/* quote */
.quote-sec{max-width:var(--maxw);margin:0 auto;padding:clamp(56px,8vw,84px) var(--pad)}
.quote{background:radial-gradient(120% 130% at 0% 0%, var(--green-light) 0%, var(--green) 60%);border-radius:30px;padding:clamp(40px,6vw,64px) clamp(28px,5vw,56px);text-align:center;overflow:hidden}
.quote__text{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.6vw,38px);line-height:1.3;color:var(--on-green);max-width:760px;margin:0 auto;letter-spacing:-0.2px;text-wrap:balance}
.quote__by{margin-top:28px;font-size:15px;font-weight:600;color:var(--gold-bright)}

/* final CTA */
.cta{max-width:var(--maxw);margin:0 auto;padding:30px var(--pad) clamp(80px,11vw,110px)}
.cta__in{text-align:center;max-width:600px;margin:0 auto}
.cta__title{font-family:var(--serif);font-weight:600;font-size:clamp(34px,5vw,50px);line-height:1.03;color:var(--ink);letter-spacing:-0.4px}
.cta__sub{font-size:18px;line-height:1.6;color:var(--muted);margin-top:18px}
.cta__actions{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:14px}
.cta__note{font-size:14px;color:var(--muted)}
.cta .signup{margin:34px auto 0}

/* ============================================================ FOOTER */
.site-footer{background:var(--green-deep)}
.site-footer__in{max-width:var(--maxw);margin:0 auto;padding:60px var(--pad) 40px}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
/* the footer lockup is a deliberately smaller variant of the header's */
.footer__brand .logo{gap:11px}
.footer__brand .logo__badge{width:38px;height:38px;border-radius:10px;border-color:rgba(200,169,106,0.5);background:var(--green)}
.footer__brand .logo__badge span{font-size:17px}
.footer__brand .logo__name{font-size:21px;color:var(--on-green)}
.footer__brand p{font-size:14.5px;line-height:1.6;color:rgba(246,242,233,0.5);max-width:280px;margin-top:16px}
.footer__col h4{font-size:12px;font-weight:700;letter-spacing:1.4px;color:var(--gold-bright);margin-bottom:16px;text-transform:uppercase}
.footer__col a{display:block;font-size:14.5px;color:rgba(246,242,233,0.72);margin-bottom:12px;transition:color .2s}
.footer__col a:hover{color:var(--on-green)}
.footer__bottom{border-top:1px solid rgba(246,242,233,0.1);margin-top:44px;padding-top:24px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}
/* alpha 0.62 rather than the design's 0.4 - at 0.4 this measures 3.42:1 on the
   footer green and fails WCAG AA. Same reason as .hero__note. */
.footer__bottom span{font-size:13.5px;color:rgba(246,242,233,0.62)}
/* Trader identity - E-Commerce Regs 2002 reg.6 requires the company name,
   number and geographic address to be easily and permanently accessible, so it
   sits in the footer of every page rather than only in the Privacy Policy. */
.footer__legal{margin-top:16px;font-size:12.5px;line-height:1.6;color:rgba(246,242,233,0.62);max-width:70ch}

/* ============================================================ DOC PAGES (legal / support / 404) */
.doc{max-width:820px;margin:0 auto;padding:clamp(48px,7vw,72px) var(--pad) 96px}
.doc__back{display:inline-flex;align-items:center;gap:7px;margin-bottom:28px;font-size:14px;font-weight:600;color:var(--green)}
.doc__back svg{width:8px;height:14px}
.doc__title{font-family:var(--serif);font-weight:600;font-size:clamp(34px,5vw,48px);line-height:1.05;color:var(--ink);letter-spacing:-0.4px}
.doc__meta{font-size:14px;color:var(--muted);margin-top:10px}
.doc__body{margin-top:40px}
.doc__lead{font-size:18px;line-height:1.7;color:var(--muted);margin-bottom:18px}
.doc__section{margin-bottom:30px}
.doc__section h2{font-size:20px;font-weight:700;color:var(--ink);margin-bottom:10px;font-family:var(--sans)}
.doc__section h3{font-size:17px;font-weight:700;color:var(--ink);margin:20px 0 8px;font-family:var(--sans)}
.doc__section p{font-size:16px;line-height:1.7;color:var(--ink-2);margin-bottom:10px}
.doc__section ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin:6px 0 10px}
.doc__section li{position:relative;padding-left:20px;font-size:16px;line-height:1.65;color:var(--ink-2)}
.doc__section li::before{content:"";position:absolute;left:2px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.doc__section a{color:var(--green);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(11,61,46,.35)}
.doc__section a:hover{text-decoration-color:var(--green)}
.doc__section strong{color:var(--ink);font-weight:700}
.doc__foot{border-top:1px solid rgba(11,61,46,0.1);padding-top:22px;font-size:14.5px;line-height:1.6;color:var(--muted)}

/* data table (privacy policy processor list) - scrolls sideways on mobile */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0 10px;border:1px solid rgba(11,61,46,0.12);border-radius:14px;background:var(--card)}
.table-wrap:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.doc-table{width:100%;border-collapse:collapse;min-width:640px;font-size:15px;line-height:1.55}
.doc-table th{text-align:left;font-size:12.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--green);background:rgba(11,61,46,0.05);padding:12px 16px;border-bottom:1px solid rgba(11,61,46,0.12)}
.doc-table td{padding:12px 16px;border-bottom:1px solid rgba(11,61,46,0.07);color:var(--ink-2);vertical-align:top}
.doc-table tr:last-child td{border-bottom:none}
.doc-table td:first-child{font-weight:700;color:var(--ink);white-space:nowrap}

/* FAQ accordion */
.faq{background:var(--card);border:1px solid rgba(11,61,46,0.08);border-radius:16px;padding:4px 22px;margin-bottom:12px}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;list-style:none;padding:18px 0;font-size:17px;font-weight:600;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{width:14px;height:9px;flex:none;color:var(--faint);transition:transform .2s ease}
.faq[open] summary .chev{transform:rotate(180deg)}
.faq__a{font-size:15.5px;line-height:1.6;color:var(--muted);padding:0 0 18px}
.faq__a a{color:var(--green);text-decoration:underline}
.support-cta{margin-top:36px;background:radial-gradient(120% 130% at 100% 0%, var(--green-light), var(--green) 65%);border-radius:22px;padding:clamp(28px,4vw,36px);display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.support-cta__t{font-family:var(--serif);font-weight:600;font-size:28px;color:var(--on-green)}
.support-cta__s{font-size:15.5px;color:rgba(246,242,233,0.7);margin-top:6px}
.support-cta a.btn-mail{height:50px;padding:0 26px;border-radius:14px;background:var(--gold);display:inline-flex;align-items:center;font-size:16px;font-weight:700;color:var(--green);box-shadow:0 8px 22px rgba(200,169,106,0.3)}

/* ============================================================ RESPONSIVE */
@media (max-width:900px){
  .nav{display:none;position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;background:rgba(246,243,236,0.98);backdrop-filter:blur(18px);border-bottom:1px solid rgba(11,61,46,0.08);padding:.4rem 0}
  .nav.show{display:flex}
  .nav a,.nav .btn-join{margin:0;border-radius:0;height:auto;padding:14px var(--pad);box-shadow:none;justify-content:flex-start;background:none;color:var(--ink-2)}
  .nav .btn-join{color:var(--green);font-weight:700}
  .menu-btn{display:flex}
  .hero__grid{grid-template-columns:1fr;text-align:center}
  .hero__sub{margin-left:auto;margin-right:auto}
  .hero__eyebrow{margin-top:0}
  .hero__actions{margin-left:auto;margin-right:auto;justify-content:center}
  .joiners__label{text-align:left}
  .signup{margin-left:auto;margin-right:auto}
  .signup__done{text-align:left}
  .phone-wrap{margin-top:8px}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1 / -1}
}
@media (max-width:560px){
  .signup__row{flex-direction:column}
  .signup__btn{padding:13px 22px}
  .trust__in{flex-direction:column;align-items:flex-start;gap:16px}
  .footer__grid{grid-template-columns:1fr}
  .quote__text{font-size:24px}
}
@media (max-width:420px){
  /* keep logo + badge + hamburger on one line on small phones.
     Scoped to the header - the footer lockup has room for its wordmark. */
  .site-header .logo__name{display:none}
  .appstore--sm img{height:34px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .fade,.hero__ring.r2{animation:none}
}