:root{--forest:#143d2c;--deep:#0c2b20;--lime:#c7dd89;--cream:#f8f8f1;--ink:#163c2c;--muted:#607367}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;color:var(--ink);font-family:'Outfit',system-ui,-apple-system,Arial,sans-serif;background:var(--cream)}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}a{color:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #e6a619;outline-offset:4px}.header{height:90px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #e6e9e3}.brand{width:290px;display:block;flex-shrink:0;line-height:0}.brand img{display:block;width:100%;height:auto}.header nav{display:flex;align-items:center;gap:42px;font-size:14px;font-weight:600}.about-link{text-decoration:none}.signin{padding:10px 27px;min-height:44px;border:1px solid #b3beb7;border-radius:30px;background:transparent;color:var(--ink)}.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,1fr);grid-template-rows:auto 1fr;column-gap:7%;max-width:1440px;margin:0 auto;padding:46px 6% 50px;background:var(--forest);color:white;position:relative}.hero-photo{grid-column:1;grid-row:1/3;margin:0;align-self:center;justify-self:center;width:100%;max-width:540px}.hero-photo img{display:block;width:100%;height:auto;object-fit:contain;border-radius:3px}.intro{grid-column:2;grid-row:1;padding:7px 0 23px}.eyebrow{font-size:12px;line-height:1.5;letter-spacing:2px;font-weight:600;text-transform:uppercase;margin:0 0 16px}.intro .eyebrow{color:var(--lime)}h1,h2,h3{font-family:'Outfit',system-ui,-apple-system,Arial,sans-serif;font-weight:600}h1{font-size:clamp(38px,4.1vw,62px);line-height:1.02;letter-spacing:-1.1px;margin:0}h1 em{color:var(--lime);font-style:normal}.subhead{font-size:16px;line-height:1.6;color:#dbe5dd;max-width:370px;margin:18px 0 0}.signup{grid-column:2;grid-row:2;align-self:start;max-width:450px;width:100%;background:var(--cream);color:var(--ink);padding:28px 32px 20px;border-radius:10px}.signup h2{font-size:29px;line-height:1.15;margin:0 0 8px;letter-spacing:-.3px}.form-intro{font-size:13px;color:var(--muted);margin:0 0 22px}label,legend{display:block;font-size:13px;font-weight:600;margin:0 0 8px}select,input{width:100%;height:47px;border:1px solid #c2cbbf;border-radius:5px;background:transparent;color:var(--ink);padding:0 12px;font-size:16px}select{padding-right:25px}input::placeholder{color:#6e7b71}fieldset{margin:18px 0;padding:0;border:0}.age-row{display:flex;gap:18px;align-items:center}.age-row select{flex:1;min-width:0}.age-row span{font-size:14px;color:var(--muted)}.primary{min-height:49px;display:flex;align-items:center;justify-content:center;gap:18px;width:100%;border:0;border-radius:28px;color:#fff;background:var(--forest);text-decoration:none;font-weight:600;font-size:16px;padding:12px 20px;transition:background .2s,transform .2s}.primary:hover{background:#225840;transform:translateY(-1px)}form .primary{margin-top:20px}.privacy-note{text-align:center;font-size:12px;color:var(--muted);margin:12px 0 0}.mobile-action{display:none}.connection{padding:84px 8% 76px;text-align:center;max-width:1250px;margin:auto}.connection .eyebrow{color:#667b40}.connection h2{font-size:58px;line-height:1.02;margin:0 0 23px;letter-spacing:-1px}.connection>p:not(.eyebrow){max-width:625px;margin:0 auto;line-height:1.8;color:var(--muted);font-size:17px}.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;text-align:left;margin:58px 0 40px}.benefits>div{border-top:1px solid #cbd4c5;padding-top:20px}.number{font-size:12px;color:#6b7f4b;letter-spacing:2px}.benefits h3{font-size:30px;margin:13px 0 12px}.benefits p{font-size:15px;color:var(--muted);line-height:1.7;margin:0}.text-link{display:inline-block;text-underline-offset:7px;font-size:15px;font-weight:600}.text-link span{margin-left:12px}footer{border-top:1px solid #d8dfd2;padding:28px 6%;display:flex;justify-content:space-between;gap:15px;font-size:12px;color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden}.error{color:#a33720;font-size:13px;margin:8px 0}.error:empty{display:none}dialog{border:0;border-radius:12px;padding:38px;max-width:440px;width:calc(100% - 32px);background:var(--cream);color:var(--ink)}dialog::backdrop{background:#071e16b8}dialog h2{font-size:38px;margin:0 0 18px}dialog p:not(.eyebrow){line-height:1.65;color:var(--muted);font-size:16px}.close{position:absolute;right:12px;top:10px;background:none;border:0;font-size:30px;color:var(--ink);width:44px;height:44px}.close-dialog{margin-top:24px}
@media(min-width:99999px){body{background:var(--cream)}.hero{max-width:none;padding-left:max(6%,calc((100vw - 1268px)/2));padding-right:max(6%,calc((100vw - 1268px)/2))}}
@media(min-width:0px){.header{height:64px;padding:0 20px}.brand{width:218px}.header nav{gap:0}.about-link{display:none}.signin{border:0;padding:8px 0 8px 12px;font-size:13px}.hero{display:flex;flex-direction:column;gap:0;padding:0 0 30px;align-items:center}.intro{text-align:center;padding:21px 20px 17px;width:100%}.intro .eyebrow{font-size:10px;letter-spacing:1.5px;margin-bottom:9px}h1{font-size:clamp(32px,8.8vw,45px);line-height:1.03;letter-spacing:-.7px}h1 br{display:none}h1 em{display:block}.subhead{font-size:13px;line-height:1.5;max-width:none;margin:11px 0 0}.hero-photo{width:auto;max-width:calc(100% - 40px);align-self:center}.hero-photo img{width:auto;height:auto;max-width:100%;max-height:calc(100svh - 302px);min-height:0;object-fit:contain;margin:auto;border-radius:3px}.mobile-action{display:block;width:100%;padding:16px 24px 22px;text-align:center}.mobile-action .primary{background:var(--lime);color:var(--deep);max-width:390px;margin:auto}.mobile-action p{font-size:11px;color:#d0dece;margin:10px 0 0}.signup{width:calc(100% - 40px);max-width:440px;margin:15px 0 0;padding:25px 24px 23px;scroll-margin-top:20px}.signup h2{font-size:30px}.form-intro{line-height:1.6}.connection{padding:52px 25px}.connection h2{font-size:44px}.connection>p:not(.eyebrow){font-size:16px}.benefits{grid-template-columns:1fr;gap:28px;margin:35px 0}.benefits h3{font-size:30px;margin:9px 0}.benefits p{font-size:15px}.connection .eyebrow{font-size:11px}footer{flex-direction:column;align-items:center;text-align:center;padding:25px 20px;gap:10px}}
@media(max-width:350px){.header{padding:0 15px}.brand{width:190px}.intro{padding-left:15px;padding-right:15px}h1{font-size:30px}.subhead{font-size:12px}.hero-photo img{max-height:calc(100svh - 300px)}.signup{padding:24px 20px}.signup h2{font-size:28px}}
@media(max-height:500px) and (max-width:760px){.hero-photo img{max-height:65svh}.intro{padding-top:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.primary{transition:none}}

html{background:#e9eee7}body{max-width:430px;margin:0 auto;min-height:100svh;box-shadow:0 0 45px #143d2c12}h1{font-size:36px}@media(max-width:350px){h1{font-size:30px}}

/* Shared CTA typography and balanced mobile form spacing. */
h1{font-size:30px;line-height:1.15;letter-spacing:-.7px}
.signup{align-self:center;margin:16px auto 0;padding:28px 24px;width:calc(100% - 40px)}
.signup h2{text-align:center;font-size:25px;line-height:1.2;margin:0 0 12px;letter-spacing:-.5px}
.form-intro{text-align:center;margin:0 auto 24px;max-width:290px}
.signup form{width:100%;margin:0 auto}
.connection h2{font-size:32px;line-height:1.15;letter-spacing:-.7px}
.benefits h3{font-size:24px;line-height:1.25;letter-spacing:-.4px}
dialog h2{font-size:30px;line-height:1.2}
@media(max-width:350px){h1{font-size:26px}.signup{padding:26px 20px}.signup h2{font-size:23px}.connection h2{font-size:28px}}

.header{background:var(--forest);border-bottom:1px solid #ffffff18}.signin{color:#fff}
/* Clubhouse palette and focused, four-step signup. */
.header{background:linear-gradient(110deg,#342318 0%,#65452e 48%,#402c1e 100%);border-bottom:1px solid #a47c4b66;box-shadow:inset 0 1px #ffffff0a,inset 0 -3px #00000012}
.intro{padding:14px 20px 12px}.intro h1{color:#fff;font-size:30px;line-height:1.14}.intro h1 br{display:block}.subhead{font-size:13px;margin-top:9px}
.hero-photo img{max-height:min(280px,max(120px,calc(100svh - 440px)));border-radius:4px}
.signup{background:var(--forest);color:#fff;margin:12px auto 0;padding:0;width:calc(100% - 40px)}
.step-meta{display:flex;align-items:center;justify-content:space-between;min-height:20px;font-size:12px;color:#c2d2c5}.step-meta span{margin-left:auto}#back-step{padding:0;border:0;background:none;color:#e3ebe5;font-size:13px;min-height:24px}#back-step[hidden]{display:none}
.progress-track{height:3px;background:#ffffff24;border-radius:4px;margin:8px 0 18px;overflow:hidden}#progress-fill{display:block;height:100%;width:25%;background:#9cafa0;transition:width .2s}
.signup h2,.choice-field legend{font-family:'Outfit',system-ui,-apple-system,Arial,sans-serif;text-align:center;width:100%;font-size:22px;font-weight:600;line-height:1.25;margin:0 0 16px;letter-spacing:-.4px;color:white}
.choice-field{margin:0}.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.choice{border:1px solid #8aa293;background:#ffffff08;border-radius:7px;min-height:52px;font-size:15px;font-weight:500;color:#fff;padding:10px 4px}.choice:hover{background:#ffffff14}.choice[aria-pressed=true]{background:#f0f3eb;color:var(--deep);border-color:#f0f3eb;box-shadow:inset 0 0 0 1px #f0f3eb}
.signup .primary{background:var(--lime);color:var(--deep);min-height:56px;margin-top:16px}.signup .primary:hover{background:#d5e89c}.privacy-note{color:#bacbbc;margin:10px 0 0;font-size:12px}.signup input{background:#f8f8f1;color:var(--ink);border-color:#e1e6dd;min-height:50px}.signup label{color:#dbe5dd;font-size:14px}.age-row>div{flex:1;min-width:0}.age-row span{color:#dbe5dd;margin-top:22px}.error{color:#ffd4ba;font-size:14px}
.connection{padding:38px 25px}.connection h2{font-size:27px;line-height:1.2;margin-bottom:15px}.connection>p:not(.eyebrow){font-size:15px;line-height:1.65}.safety-note{margin-top:28px;padding-top:24px;border-top:1px solid #d3dccf}.safety-note h3{font-size:18px;line-height:1.4;margin:0 0 10px}.safety-note p{font-size:14px;color:var(--muted);line-height:1.65;margin:0}.footer-link{color:var(--muted);text-decoration:underline;text-underline-offset:3px;background:none;border:0;font-size:12px;padding:8px}
@media(max-width:350px){.intro{padding:15px 15px 12px}.intro h1{font-size:27px}.subhead{font-size:12px}.signup{width:calc(100% - 32px)}.choice{font-size:14px}.signup h2,.choice-field legend{font-size:20px}}

/* Match the navigation green used on meetlocalgolfers.com. */
.header{background:#588500;border-bottom:1px solid #ffffff20;box-shadow:none}
.choices-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.legal-agreement,.membership-disclaimer{margin:0;line-height:1.7;max-width:380px;font-size:12px}
.legal-agreement a{text-underline-offset:3px}.membership-disclaimer{margin-top:8px;text-align:left}

/* --- mobile pass: full-bleed hero, centered brand, age chips, member row --- */
.header{justify-content:center;padding:0 20px}
.hero-photo{width:100%;max-width:none;margin:0;align-self:stretch}
.hero-photo img{display:block;width:100%;height:min(46svh,380px);min-height:225px;max-height:none;object-fit:cover;object-position:30% 50%;border-radius:0}
.step-meta{justify-content:flex-start;min-height:18px}
.step-meta span{display:none}
.progress-track{margin:6px 0 18px}
.member{text-align:center;font-size:13px;color:#b7c8ba;margin:14px 0 0}
.member-link{background:none;border:0;padding:6px 8px;color:#dbe7cf;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media(max-width:350px){.hero-photo img{height:min(42svh,330px)}}

/* --- hero badge + fold tuning --- */
.progress-track{margin:6px 0 14px}
.signup h2,.choice-field legend{margin:0 0 12px}
.signup .primary{margin-top:14px}
.hero-photo img{height:min(48svh,400px,calc(100svh - 520px));min-height:150px}

/* --- below-fold: three proof points + second CTA --- */
.connection{padding:32px 25px 28px;text-align:left;max-width:none}
.point{padding:15px 0;border-top:1px solid #d3dccf}
.point:first-child{border-top:0;padding-top:0}
.point h3{font-size:18px;line-height:1.35;margin:0 0 6px;letter-spacing:-.2px;color:var(--ink)}
.point p{font-size:14.5px;color:var(--muted);line-height:1.6;margin:0}
.cta2{margin-top:22px;background:var(--forest);color:#fff}
.cta2:hover{background:#225840}
footer{padding-top:22px}
@media(max-width:350px){.connection{padding:28px 20px 24px}.point h3{font-size:17px}}

.hero-photo picture{display:contents}

/* merged first step: two pill groups, second one visually secondary */
.choice-field+.choice-field{margin-top:14px}
.choice-field+.choice-field legend{font-size:17px;margin-bottom:9px;color:#dbe5dd}
.signup h2,.choice-field legend{margin:0 0 10px}
.choice{min-height:48px}
.progress-track{margin:6px 0 12px}

/* lock horizontal panning: no real overflow exists, this kills iOS rubber-banding */
html{overflow-x:clip;overscroll-behavior-x:none}
body{width:100%;overflow-x:clip;overscroll-behavior-x:none;touch-action:pan-y pinch-zoom}

.field-note{margin:8px 0 0;font-size:12.5px;color:#bacbbc;font-style:italic}
.signup label{display:block}

/* one-line hero headline + urgency line */
.intro{padding:22px 20px 20px}
.intro h1{font-size:clamp(20px,7.0vw,29px);line-height:1.12;letter-spacing:-.5px}
.subhead{font-size:13px;font-weight:400;color:#dbe5dd;margin:6px 0 0;letter-spacing:0}
@media(max-width:350px){.intro h1{font-size:20px}}

/* step 1: pre-answered questions shown as a confirmable line, not two questions */
.summary{text-align:center}
.sumline{margin:0;font-size:19px;line-height:1.75;font-weight:500;color:#fff;letter-spacing:-.1px}
.chip{font:inherit;font-weight:600;color:var(--deep);background:#f0f3eb;border:0;border-radius:9px;padding:4px 12px;margin:0 2px;cursor:pointer}
.chip[aria-expanded=true]{background:var(--lime);box-shadow:0 0 0 2px #ffffff30}
.hint{margin:9px 0 0;font-size:12.5px;color:#9fb3a4}
.expand{margin-top:14px}
@media(max-width:350px){.sumline{font-size:17px}}

/* option C: one question per screen, full-width stacked choices */
.stackq{display:grid;gap:8px}
.stackq .choice{width:100%;min-height:50px;font-size:18px;font-weight:500}
.choice-field legend{font-size:20px}
.choices .choice{min-height:50px;font-size:16px}

/* one photo height for every step, sized off the tallest step */
.hero-photo img{height:min(58svh,460px,calc(100svh - 424px));min-height:150px;max-height:calc(min(100vw,430px)/1.16)}
.hero-photo{margin-bottom:0}
.signup{padding-top:14px}

/* headline: weight + size contrast */
.intro{padding:13px 20px 11px}
.intro h1{font-family:'Outfit',system-ui,sans-serif;line-height:1.05;letter-spacing:0}
.intro h1 .a{display:block;font-weight:300;font-size:clamp(15px,4.5vw,19px);letter-spacing:.2px;color:#cfe0d2}
.intro h1 .b{display:block;font-weight:700;font-size:clamp(24px,7.4vw,31px);letter-spacing:-.8px;margin-top:2px;color:#fff}

/* ================= DESKTOP (V2: edge to edge split) ================= */
@media(max-width:899px){.eyebrow-d,.subline-d{display:none}}

@media(min-width:900px){
 html,body{background:var(--deep)}
 body{max-width:none;box-shadow:none}

 /* slimmer bar so it stops competing with the photo */
 .header{height:50px;padding:0 36px;background:#588500;border:0}
 .brand{width:206px}

 .hero{--col:520px;display:grid;grid-template-columns:minmax(0,1fr) var(--col);grid-template-rows:auto auto;
  align-content:center;min-height:calc(100vh - 50px);max-width:none;margin:0;
  padding:20px 0;column-gap:0;background:var(--deep);position:relative}

 .hero-photo{grid-area:auto;position:absolute;left:0;right:var(--col);top:0;bottom:0;
  width:auto;height:auto;margin:0;max-width:none;aspect-ratio:auto;border-radius:0;
  box-shadow:none;overflow:hidden}
 .hero-photo img{width:100%;height:100%;min-height:0;max-height:none;
  object-fit:cover;object-position:56% 50%}
 /* crisp seam so the photo reads as a deliberate panel, not a cut off */
 .hero-photo:after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#0c2b2000 80%,#0c2b2047 100%);
  box-shadow:inset -1px 0 0 #ffffff33,inset 0 -1px 0 #ffffff33}

 /* right column fills the green: content spread, bigger type */
 .intro{grid-column:2;grid-row:1;width:100%;max-width:none;margin:0;justify-self:stretch;
  text-align:left;padding:0 56px 26px}
 .intro h1{margin:0}
 .intro h1 .a{font-size:22px;font-weight:300;color:#cfe0d2}
 .intro h1 .b{font-size:54px;letter-spacing:-2px;margin-top:4px}

 .eyebrow-d{margin:0 0 16px;font-size:12px;font-weight:600;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--lime)}
 .subline-d{margin:18px 0 0;font-size:17px;line-height:1.55;color:#c8d8cb;max-width:none}

 .signup{grid-column:2;grid-row:2;width:100%;max-width:none;justify-self:stretch;
  margin:0;padding:0 56px;background:none;border-radius:0;box-shadow:none}
  .signup .primary{min-height:58px;font-size:17.5px;letter-spacing:.2px}
 .signup input{height:52px;font-size:16.5px;border-radius:10px}
 .stackq{grid-template-columns:1fr 1fr;gap:12px}
 .stackq .choice{min-height:58px;font-size:18px;border-radius:10px}
 .stackq .choice:hover{background:#ffffff18}
 .choices .choice{min-height:54px;font-size:16.5px}
 .choice-field legend{font-size:22px;margin-bottom:14px;text-align:left}
 .privacy-note{display:none}
 .member{font-size:14px;margin-top:16px;text-align:left}


 /* ---- below the fold ---- */
 .connection{max-width:1180px;margin:0 auto;padding:58px 40px 56px;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;
  gap:0 46px;align-items:start;position:relative;text-align:left}
 .connection:before{content:"";position:absolute;left:0;right:0;top:0;
  width:100vw;margin-left:calc(50% - 50vw);height:1px;background:#ffffff1f}
 .point,.point:first-child{border-top:1px solid #ffffff2b;padding:20px 0 0;margin:0;
  display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:10px}
 .point h3{font-family:'Manrope',system-ui,-apple-system,Arial,sans-serif;
  font-size:19px;font-weight:600;line-height:1.35;letter-spacing:-.1px;
  color:#fff;margin:0;white-space:nowrap;align-self:start}
 .point p{font-size:15px;line-height:1.7;color:#a9bdad;margin:0}
 .cta2{display:none}

 footer{background:var(--deep);border-top:1px solid #ffffff14;flex-direction:row;
  justify-content:center;align-items:flex-start;gap:36px;padding:26px 40px;flex-wrap:wrap}
 .legal-agreement,.membership-disclaimer{color:#8fa494;max-width:520px;margin:0;text-align:left}
 .legal-agreement a{color:#c3d4c6}
}


/* Mobile: bigger photo, smaller headline, more air under the image. */
/* One step down for narrow desktop windows. Nothing scales continuously. */
@media(min-width:900px) and (max-width:1099px){
 .hero{--col:434px}
 .intro,.signup{padding-left:46px;padding-right:46px}
 .intro h1 .a{font-size:20px}
 .intro h1 .b{font-size:43px;letter-spacing:-1.6px}
 .subline-d{font-size:16px}
 .connection{padding-left:34px;padding-right:34px;gap:0 34px}
 .point h3{font-size:18px}
}
@media(max-width:899px){
 .signup{margin-top:0}
 .hero-photo img{object-position:50% 42%}
 .hero-photo{margin-bottom:0}
 .signup{padding-top:0}
 .choice-field legend{margin-bottom:12px}
 form .primary{margin-top:16px}
}
/* Short viewports (iPhone SE class): wider crop, trimmed chrome. */
@media(max-width:899px) and (max-height:680px){
 .intro{padding:9px 20px 8px}
 .intro h1 .a{font-size:15px}
 .intro h1 .b{font-size:25px}
 .hero-photo img{height:min(56svh,430px,calc(100svh - 420px));min-height:150px;
  max-height:calc(min(100vw,430px)/2.05);object-position:50% 50%}
 .hero-photo{margin-bottom:0}
}