/* CourseSide marketing site design system.
 * Source of truth for the look of the public pages; grown from the static
 * homepage's furniture. Served by Propshaft (this is not a Tailwind build).
 */

/* ---------- self-hosted brand faces (public/site-assets/fonts) ---------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-display:swap;src:url("/site-assets/fonts/archivo-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-display:swap;src:url("/site-assets/fonts/archivo-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500 700;font-display:swap;src:url("/site-assets/fonts/oswald-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500 700;font-display:swap;src:url("/site-assets/fonts/oswald-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --fairway:#1B4230; --flap:#255339; --gold:#E19E33; --cream:#F6F0E2;
  --pine:#0F291E; --mist:#DCE6D8; --bogey:#B33A2B; --water:#3E7BA6;
  --ink:#12251C; --muted:#5C6B62;
  --disp:'Oswald',Impact,'Haettenschweiler','Arial Narrow',sans-serif;
  --body:'Archivo','Helvetica Neue',Arial,sans-serif;
  --wrap:1240px; --gut:clamp(20px,4vw,40px); --hdr:74px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.narrow{max-width:820px}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--body);font-weight:800;line-height:1.12;
  letter-spacing:-.015em;margin:0 0 .55em;color:var(--fairway)}
h1{font-size:clamp(2.5rem,5.6vw,4.3rem)}
h2{font-size:clamp(1.85rem,3.6vw,2.85rem)}
h3{font-size:1.28rem;font-weight:700}
h4{font-size:1.05rem;font-weight:700}
p{margin:0 0 1.1rem}
.lede{font-size:clamp(1.08rem,1.7vw,1.32rem);color:var(--muted);max-width:62ch}
.lede--light{color:rgba(246,240,226,.78)}
.on-dark,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--cream)}
.figure{font-family:var(--disp);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;font-variant-numeric:tabular-nums}
.pull{font-family:var(--body);font-weight:800;letter-spacing:-.015em;
  font-size:clamp(1.45rem,2.9vw,2.15rem);line-height:1.22;color:var(--fairway);
  max-width:22ch;margin:0}

/* ---------- kicker: the tagline construction ---------- */
.kick{display:flex;align-items:center;gap:.85rem;margin:0 0 1.15rem;font:inherit}
.kick-t{font-family:var(--disp);font-weight:600;text-transform:uppercase;
  letter-spacing:.24em;font-size:.82rem;white-space:nowrap}
.kick-rule{height:1px;flex:1 1 auto;min-width:26px;max-width:110px}
.kick--gold .kick-t{color:var(--gold)} .kick--gold .kick-rule{background:var(--gold);opacity:.75}
.kick--ink  .kick-t{color:var(--flap)} .kick--ink  .kick-rule{background:var(--flap);opacity:.35}
.kick--left{justify-content:flex-start}
.kick--left .kick-rule:first-child{display:none}
.kick--centre{justify-content:center}
.kick--centre .kick-rule{max-width:78px}

/* ---------- the live ping ---------- */
.ping{position:relative;display:inline-block;width:12px;height:12px;flex:0 0 auto;
  vertical-align:middle}
.ping-dot{position:absolute;inset:3px;border-radius:50%;background:var(--gold)}
.ping-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--gold);
  opacity:.85}
.ping .ping-ring{animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.85}70%{transform:scale(1.9);opacity:0}100%{opacity:0}}
.chip{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--disp);
  font-weight:600;text-transform:uppercase;letter-spacing:.13em;font-size:.76rem;
  padding:.34rem .78rem .34rem .6rem;border-radius:999px;
  border:1px solid rgba(225,158,51,.5);color:var(--gold);background:rgba(225,158,51,.08)}

/* ---------- the greens as a divider ---------- */
.greens{display:flex;align-items:center;justify-content:center;gap:1.15rem;
  padding:clamp(2rem,5vw,3.2rem) 0}
.greens-rule{height:1px;flex:1 1 auto;max-width:260px;background:var(--flap);opacity:.24}
.greens-shape{display:block;width:42px;opacity:.45}
.greens-shape--k{width:54px;opacity:.8}
.greens-shape .mk{display:block;width:100%;height:auto}
.on-dark .greens-rule{background:var(--cream);opacity:.22}

/* ---------- green watermark ---------- */
.wm-green{position:absolute;pointer-events:none;z-index:0;opacity:.055}
.wm-green .mk{display:block;width:100%;height:auto}
.wm-green--tr{top:7%;right:-7%;width:min(40vw,460px)}
.wm-green--bl{bottom:-12%;left:-8%;width:min(40vw,440px)}
.on-dark .wm-green{opacity:.07}

/* ---------- ticker: the broadcast belt from the hub screens ---------- */
.ticker{display:flex;align-items:stretch;background:var(--gold);min-width:0;
  max-width:100%;overflow:hidden}
.ticker-lab{display:flex;align-items:center;gap:.5rem;flex:0 0 auto;
  padding:.9rem 1.1rem;background:var(--pine);border-right:3px solid var(--gold);
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  letter-spacing:.22em;font-size:.78rem;color:var(--gold)}
.ticker-track{overflow:hidden;flex:1 1 auto;min-width:0;display:flex;align-items:center}
.ticker-run{display:flex;align-items:center;white-space:nowrap;
  animation:roll 46s linear infinite}
.tk{display:flex;align-items:center;gap:.65rem;padding:.55rem 1.5rem;flex:0 0 auto}
.tk+.tk{border-left:2px solid rgba(11,31,22,.16)}
.tk-chip{display:flex;align-items:center;gap:.38rem;font-family:var(--disp);
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.66rem;
  border-radius:5px;padding:.3rem .6rem .3rem .48rem;white-space:nowrap;
  box-shadow:0 2px 6px rgba(11,31,22,.22)}
.tk-chip svg{width:13px;height:13px;display:block;flex:0 0 auto}
.tk-txt{font-size:.95rem;font-weight:600;color:#0B1F16;white-space:nowrap}
@media (max-width:700px){.ticker-lab{padding:.7rem .8rem;font-size:.68rem}
  .tk{padding:.5rem 1rem}.tk-txt{font-size:.85rem}}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-run{animation:none}}


/* ---------- reveal + parallax ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.7,.3,1),transform .7s cubic-bezier(.22,.7,.3,1)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.09s}
[data-reveal][data-delay="2"]{transition-delay:.18s}
[data-reveal][data-delay="3"]{transition-delay:.27s}
[data-px]{will-change:transform}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}
  [data-px]{transform:none!important}}

/* ---------- hero audience strip ---------- */
.aud-strip{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;margin:2.4rem 0 0;
  padding-top:1.5rem;border-top:1px solid rgba(246,240,226,.18)}
.aud-strip a{color:rgba(246,240,226,.82);text-decoration:none;font-size:.92rem;
  border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.aud-strip a:hover{color:var(--cream);border-bottom-color:rgba(225,158,51,.7)}
.aud-strip i{width:5px;height:5px;border-radius:50%;background:var(--gold);
  flex:0 0 auto;display:block;opacity:.85}

/* ---------- full-bleed ---------- */
/* Full-bleed. .bleed sits as a direct child of <main>, which is already the full content
   width, so 100% is correct AND scrollbar-safe. Never use 100vw here: 100vw includes the
   scrollbar gutter, so on any browser with a classic scrollbar it overflows by ~15px and
   gives the whole page a horizontal scroll. If .bleed is ever needed inside .wrap, use
   margin-inline:calc(50% - 50cqw) with a container query, not vw. */
.bleed{width:100%;max-width:100%;margin-inline:0}

/* ---------- statement + stat row ---------- */
.statement{text-align:center;max-width:19ch;margin:0 auto;
  font-size:clamp(2.1rem,5.2vw,3.9rem);font-weight:800;line-height:1.08;
  letter-spacing:-.02em;color:var(--fairway)}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin-top:clamp(2.4rem,6vw,3.8rem)}
.stat{position:relative;overflow:hidden;border-radius:14px;padding:1.7rem 1.4rem 1.5rem;
  background:#fff;border:1px solid rgba(27,66,48,.14);text-align:left}
.stat-wm{position:absolute;top:-14px;right:-18px;width:88px;opacity:.07;pointer-events:none}
.stat-wm .mk{display:block;width:100%;height:auto}
.stat-fig{display:block;font-family:var(--disp);font-weight:600;
  font-size:clamp(2.6rem,5.6vw,4.1rem);line-height:.88;letter-spacing:.01em;
  color:var(--fairway);font-variant-numeric:tabular-nums;position:relative}
.stat-unit{display:block;margin-top:.55rem;font-family:var(--disp);font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;font-size:.8rem;color:var(--flap);position:relative}
.stat-desc{display:block;margin-top:.9rem;padding-top:.85rem;font-size:.89rem;line-height:1.45;
  color:var(--muted);border-top:1px solid rgba(27,66,48,.14);position:relative}
.stat--punch{background:var(--fairway);border-color:var(--fairway)}
.stat--punch .stat-fig{color:var(--gold)}
.stat--punch .stat-unit{color:rgba(246,240,226,.7)}
.stat--punch .stat-desc{color:rgba(246,240,226,.8);border-top-color:rgba(246,240,226,.25)}
.stat--punch .stat-wm{opacity:.13}
@media (max-width:860px){.stat-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.stat-row{grid-template-columns:1fr}}

/* two-up mini modules */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);margin-top:clamp(2rem,5vw,3rem)}
@media (max-width:860px){.duo{grid-template-columns:1fr}}
.media-head{display:flex;align-items:center;gap:.55rem;padding:.7rem .95rem;
  background:rgba(246,240,226,.08);border:1px solid rgba(246,240,226,.2);border-bottom:0;
  border-radius:12px 12px 0 0;font-family:var(--disp);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:.76rem;color:rgba(246,240,226,.78)}
.media-head + .ph .ph-in{border-radius:0 0 12px 12px;border-top-style:solid;
  border-top-color:rgba(246,240,226,.2)}
.duo-item h3{margin:1.2rem 0 .4rem}
.duo-item p{margin:0 0 .8rem;font-size:.95rem}
.on-dark .duo-item p{color:rgba(246,240,226,.76)}

/* ---------- sticky media, scrolling steps ---------- */
.sticky-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.sticky-media{position:sticky;top:calc(var(--hdr) + 28px)}
.sticky-steps{display:grid;gap:clamp(2.4rem,7vh,4.6rem);padding-block:clamp(1rem,6vh,4rem)}
/* scoped under .sticky-steps: .sticky-step alone is also used as a JS hook
   by other components (the journey timeline) and must carry no styling */
.sticky-steps .sticky-step{border-left:2px solid rgba(246,240,226,.2);padding-left:1.4rem}
.sticky-steps .sticky-step.is-on{border-left-color:var(--gold)}
.sticky-steps .sticky-step h3{margin-bottom:.4rem}
.sticky-steps .sticky-step p{margin:0;color:rgba(246,240,226,.72)}
.sticky-n{font-family:var(--disp);font-weight:600;font-size:.68rem;letter-spacing:.24em;
  color:var(--gold);display:block;margin-bottom:.5rem}
@media (max-width:900px){.sticky-wrap{grid-template-columns:1fr}.sticky-media{position:static}}

/* ---------- four-up feature row ---------- */
.feat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;
  margin-top:clamp(2rem,4.5vw,3rem)}
.feat{border-top:2px solid rgba(246,240,226,.22);padding-top:1.1rem}
.feat-n{display:block;font-family:var(--disp);font-weight:600;letter-spacing:.14em;
  font-size:.85rem;color:var(--gold);margin-bottom:.5rem}
.feat h3{font-size:1.14rem;margin-bottom:.35rem}
.feat p{margin:0;font-size:.94rem;line-height:1.55;color:rgba(246,240,226,.76)}
@media (max-width:960px){.feat-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem}}
@media (max-width:520px){.feat-row{grid-template-columns:1fr}}

/* the hero product shot gets the full measure */
.media-xl{position:relative}
.media-xl .ph-in{border-radius:14px}
.media-note{margin:1rem 0 0;font-size:.86rem;color:rgba(246,240,226,.6);
  display:flex;align-items:center;gap:.55rem;justify-content:center}

/* ---------- staggered trio ---------- */
.stagger{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:start}
.stagger>*:nth-child(2){margin-top:2.4rem}
.stagger>*:nth-child(3){margin-top:4.8rem}
@media (max-width:820px){.stagger{grid-template-columns:1fr}
  .stagger>*:nth-child(n){margin-top:0}}

/* ---------- three-up feature cards ---------- */
.three-up{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
@media (max-width:880px){.three-up{grid-template-columns:1fr}}
.tile{background:#fff;border:1px solid rgba(27,66,48,.13);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column}
.tile-body{padding:1.4rem 1.5rem 1.6rem}
.tile-body h3{margin-bottom:.35rem}
.tile-body p{margin:0;color:var(--muted);font-size:.92rem}
.tile-rank{font-family:var(--disp);font-weight:600;letter-spacing:.15em;font-size:.8rem;
  text-transform:uppercase;color:var(--flap);display:block;margin-bottom:.55rem}
.tile--lead .tile-rank{color:var(--gold)}
.tile--lead{border-color:rgba(225,158,51,.5)}

/* ---------- phone pair, offset ---------- */
.phones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,2.2vw,1.6rem);
  max-width:520px;margin-inline:auto}
.phones .ph{--phmax:100%}
.phones>*:nth-child(2){margin-top:clamp(1.6rem,4vw,3rem)}
@media (max-width:520px){.phones{grid-template-columns:1fr;max-width:260px}
  .phones>*:nth-child(2){margin-top:0}}

/* ---------- horizontal timeline ---------- */
.tl{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.6rem);
  position:relative;margin-top:2.6rem}
.tl::before{content:"";position:absolute;top:19px;left:6%;right:6%;height:2px;
  background:rgba(27,66,48,.18)}
.tl-item{position:relative;padding-top:3.4rem}
.tl-dot{position:absolute;top:9px;left:0;width:22px;height:22px;border-radius:50%;
  background:var(--cream);border:2px solid var(--gold);display:grid;place-items:center}
.tl-dot i{width:8px;height:8px;border-radius:50%;background:var(--gold);display:block}
.tl-item h3{margin-bottom:.45rem;font-size:clamp(1.25rem,1.9vw,1.5rem)}
.tl-item p{margin:0;color:var(--muted);font-size:.97rem;line-height:1.55}
.tl-when{font-family:var(--disp);font-weight:600;letter-spacing:.14em;font-size:.95rem;
  text-transform:uppercase;color:var(--fairway);display:block;margin-bottom:.55rem}
@media (max-width:820px){.tl{grid-template-columns:1fr;gap:2rem}.tl::before{display:none}
  .tl-item{padding-top:0;padding-left:3rem}.tl-dot{top:2px}}

/* ---------- browser chrome frame ---------- */
.browser{border-radius:12px;overflow:hidden;border:1px solid rgba(246,240,226,.2);
  background:rgba(246,240,226,.05)}
.browser-bar{display:flex;align-items:center;gap:.4rem;padding:.65rem .9rem;
  background:rgba(246,240,226,.08);border-bottom:1px solid rgba(246,240,226,.14)}
.browser-bar i{width:9px;height:9px;border-radius:50%;background:rgba(246,240,226,.28);display:block}
.browser-url{margin-left:.7rem;font-size:.74rem;color:rgba(246,240,226,.6);
  background:rgba(15,41,30,.55);padding:.22rem .7rem;border-radius:999px}
.browser .ph-in{border:0;border-radius:0;background:rgba(246,240,226,.04)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--body);
  font-weight:700;font-size:.95rem;padding:.75rem 1.45rem;border-radius:6px;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .12s ease,background .18s ease,border-color .18s ease,color .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn--gold{background:var(--gold);color:var(--fairway)}
.btn--gold:hover{background:#EDAC45}
.btn--ghost{border-color:currentColor;color:var(--cream);background:transparent}
.btn--ghost:hover{background:rgba(246,240,226,.1)}
.btn--ink{border-color:var(--fairway);color:var(--fairway)}
.btn--ink:hover{background:var(--fairway);color:var(--cream)}
.btns{display:flex;gap:.8rem;flex-wrap:wrap}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-9999px;background:var(--gold);color:var(--fairway);
  padding:.7rem 1.1rem;border-radius:0 0 6px 0;font-weight:700;z-index:200}
.skip:focus{left:0;top:0}

/* ---------- season strip ---------- */
.season{background:var(--pine);color:var(--cream)}
.season .wrap{display:flex;gap:.9rem;align-items:center;justify-content:center;
  min-height:38px;font-size:.82rem;flex-wrap:wrap;text-align:center}
.season b{font-weight:600}
.season a{color:var(--cream);text-underline-offset:3px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:100;background:var(--fairway);
  border-bottom:1px solid rgba(246,240,226,.12);
  transition:background .28s ease,border-color .28s ease}
/* On a page whose hero is dark, the header floats on it with no seam, then lands as a
   distinct Pine bar once you scroll. Pages with a light first section keep the solid
   default, so cream nav type is never stranded on cream. */
body.dark-hero .hdr{background:transparent;border-bottom-color:transparent}
body.dark-hero .hdr.is-stuck{background:var(--pine);
  border-bottom-color:rgba(246,240,226,.14);box-shadow:0 10px 30px rgba(15,41,30,.28)}
.hdr .wrap{display:flex;align-items:center;gap:2rem;min-height:var(--hdr)}
.brand{display:flex;align-items:center;flex:0 0 auto;padding:6px 0}
.wm{height:24px;width:auto;display:block}
.nav{margin-left:auto;display:flex}
.nav ul{display:flex;align-items:center;gap:.3rem;list-style:none;margin:0;padding:0}
.nav-item{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:.35rem;background:none;border:0;
  font-family:var(--body);font-weight:600;font-size:.95rem;color:var(--cream);
  padding:.6rem .8rem;border-radius:5px;text-decoration:none;cursor:pointer;
  opacity:.9;transition:opacity .15s,background .15s}
.nav-link:hover,.nav-item:hover>.nav-link{opacity:1;background:rgba(246,240,226,.08)}
.chev{width:10px;height:6px;transition:transform .18s}
.has-mega:hover .chev{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 6px;
  min-width:380px;background:var(--flap);border:1px solid rgba(246,240,226,.14);
  border-radius:10px;padding:.5rem;opacity:0;visibility:hidden;
  transition:opacity .16s,translate .16s,visibility .16s;
  box-shadow:0 22px 50px rgba(15,41,30,.35)}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;translate:-50% 0}
.mega::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.mega-link{display:block;padding:.6rem .75rem;border-radius:6px;text-decoration:none;
  transition:background .14s}
.mega-link:hover{background:rgba(246,240,226,.09)}
.mega-t{display:block;color:var(--cream);font-weight:600;font-size:.94rem}
.mega-d{display:block;color:rgba(246,240,226,.62);font-size:.82rem;line-height:1.4;margin-top:.1rem}
.hdr-cta{flex:0 0 auto}
.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:var(--cream)}
.burger span{display:block;width:22px;height:2px;background:currentColor;margin:4px 0;
  border-radius:2px;transition:transform .2s,opacity .2s}
.m-nav{display:none}
@media (max-width:1080px){
  .nav,.hdr-cta{display:none}
  .burger{display:block;margin-left:auto}
  .m-nav{display:block;position:fixed;inset:var(--navtop,var(--hdr)) 0 0;background:var(--fairway);
    padding:1.4rem var(--gut) 3rem;overflow-y:auto;transform:translateY(-8px);
    opacity:0;visibility:hidden;transition:.2s;z-index:99}
  body.open .m-nav{opacity:1;visibility:visible;transform:none}
  body.open{overflow:hidden}
  body.open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.open .burger span:nth-child(2){opacity:0}
  body.open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .m-top,.m-head{display:block;font-family:var(--body);font-weight:700;color:var(--cream);
    font-size:1.15rem;padding:.8rem 0;text-decoration:none;
    border-bottom:1px solid rgba(246,240,226,.12)}
  .m-head{font-family:var(--disp);font-weight:600;text-transform:uppercase;
    letter-spacing:.22em;font-size:.78rem;color:var(--gold);border:0;padding-bottom:.3rem}
  .m-sub{display:block;color:rgba(246,240,226,.85);text-decoration:none;
    padding:.55rem 0 .55rem .9rem;font-size:1rem;border-bottom:1px solid rgba(246,240,226,.08)}
  .m-group{padding:.9rem 0}
  .m-cta{margin-top:1.6rem;display:flex;gap:.8rem;flex-wrap:wrap}
}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(3rem,6.4vw,5rem) 0;overflow:hidden}
.sec--tight{padding:clamp(2.4rem,5vw,3.6rem) 0}
.sec--green{background:var(--fairway);color:var(--cream)}
.sec--pine{background:var(--pine);color:var(--cream)}
.sec--mist{background:var(--mist)}
.sec .wrap{position:relative;z-index:1}
.split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;
  grid-template-columns:1fr 1fr}
.split--wide{grid-template-columns:1.15fr 1fr}
.split--flip>*:first-child{order:2}
.split>*{min-width:0}
@media (max-width:900px){.split,.split--wide{grid-template-columns:1fr}
  .split--flip>*:first-child{order:0}}
.cards{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
/* five audiences: 3 over 2, both rows full width */
.cards--five{grid-template-columns:repeat(6,minmax(0,1fr))}
.cards--five>*{grid-column:span 2}
.cards--five>*:nth-child(4),.cards--five>*:nth-child(5){grid-column:span 3}
@media (max-width:1000px){.cards--five{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards--five>*{grid-column:span 1}
  .cards--five>*:nth-child(4),.cards--five>*:nth-child(5){grid-column:span 1}
  .cards--five>*:nth-child(5){grid-column:span 2}}
@media (max-width:620px){.cards--five{grid-template-columns:1fr}
  .cards--five>*:nth-child(n){grid-column:span 1}}
.card{background:#fff;border:1px solid rgba(27,66,48,.13);border-radius:12px;
  padding:1.5rem;text-decoration:none;display:block;transition:transform .16s,box-shadow .16s}
a.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(27,66,48,.13)}
.card h3{margin-bottom:.35rem}
.card p{margin:0;color:var(--muted);font-size:.93rem}
.card-more{display:inline-block;margin-top:.9rem;font-weight:700;font-size:.9rem;color:var(--flap)}
.on-dark .card{background:var(--flap);border-color:rgba(246,240,226,.16)}
.on-dark .card p{color:rgba(246,240,226,.72)}
.on-dark .card-more{color:var(--gold)}

/* audience list: five short items read better as rows than as cards */
.aud-list{display:grid;border-top:1px solid rgba(27,66,48,.15);margin-inline:-.85rem}
/* padding is constant so the row never reflows on hover; the shimmy is a transform on the
   text block only, which cannot change the measure and so cannot rewrap a description. */
.aud-row{display:grid;grid-template-columns:1fr auto;gap:1.2rem;align-items:center;
  padding:1.05rem .85rem;border-bottom:1px solid rgba(27,66,48,.15);
  text-decoration:none;border-radius:6px;transition:background .18s ease}
.aud-row:hover{background:rgba(27,66,48,.045)}
.aud-txt{display:block;transition:transform .2s cubic-bezier(.22,.7,.3,1)}
.aud-row:hover .aud-txt{transform:translateX(7px)}
.aud-row h3{margin:0 0 .15rem;font-size:1.1rem}
.aud-row p{margin:0;font-size:.9rem;line-height:1.45;color:var(--muted)}
.aud-go{font-size:1.15rem;color:var(--gold);line-height:1;transition:transform .18s ease;
  display:block}
.aud-row:hover .aud-go{transform:translateX(4px)}

/* gold ball dots as list bullets */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.ticks li{display:flex;gap:.7rem;align-items:flex-start;line-height:1.5}
.ticks li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);
  flex:0 0 auto;margin-top:.52rem}

/* ---------- placeholder ---------- */
.ph{margin:0;max-width:var(--phmax,100%);margin-inline:auto}
.ph-in{aspect-ratio:var(--ar);background:var(--mist);
  border:2px dashed rgba(37,83,57,.5);border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:1.5rem;gap:.45rem}
.ph-tag{font-family:var(--disp);font-weight:600;text-transform:uppercase;
  letter-spacing:.24em;font-size:.62rem;color:var(--flap);opacity:.75}
.ph-label{font-family:var(--disp);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.95rem;color:var(--fairway)}
.ph-desc{font-size:.83rem;color:#3F5548;max-width:38ch;line-height:1.45}
.on-dark .ph-in{background:rgba(246,240,226,.06);border-color:rgba(246,240,226,.3)}
.on-dark .ph-tag{color:rgba(246,240,226,.6)}
.on-dark .ph-label{color:var(--cream)}
.on-dark .ph-desc{color:rgba(246,240,226,.66)}

/* The image state of the same slot, holding exactly the box the brief reserved, so
   swapping artwork in cannot reflow a section.
   The aspect ratio sits on the figure, not on the img. A replaced element that has not
   loaded yet has no intrinsic size, and aspect-ratio on it collapses to zero height
   until the bytes arrive, which is precisely the layout shift we are trying to avoid on
   a lazy-loaded image. The figure is an ordinary block box, so it resolves its height
   from its own width immediately and the image simply fills it.
   object-fit:cover means a slightly off-spec export crops rather than distorts, which is
   the safer of the two failures. */
.ph--img{aspect-ratio:var(--ar);overflow:hidden;border-radius:12px;background:var(--mist)}
.ph--img img,.ph--img video{display:block;width:100%;height:100%;object-fit:cover}
.media-xl .ph--img{border-radius:14px}
.media-head + .ph--img{border-radius:0 0 12px 12px}
.browser .ph--img{border-radius:0}
.phones .ph--img{border-radius:22px}
/* A screenshot dropped straight onto the green has no edge of its own, so give it one. */
.on-dark .ph--img{background:rgba(246,240,226,.06);box-shadow:0 22px 55px rgba(15,41,30,.42)}
/* A transparent asset brings its own shadows and shape: the slot paints nothing,
   clips nothing, and the page background runs straight through it. */
.ph--clear,.on-dark .ph--clear{background:transparent;box-shadow:none;
  border-radius:0;overflow:visible}
.ph--clear img,.ph--clear video{object-fit:contain;background:transparent}

/* ---------- closing CTA band (shared: reused at the foot of deeper pages) ---------- */
.cta-band{background:var(--gold);color:var(--fairway);text-align:center;
  padding:clamp(2.6rem,5vw,3.8rem) 0}
.cta-band h2{color:var(--fairway);max-width:40ch;margin:0 auto .5rem;
  font-size:clamp(1.9rem,3.8vw,3rem)}
.cta-band p{color:rgba(27,66,48,.84);max-width:66ch;margin-inline:auto}
/* solid green on gold: cream on green is a sanctioned pairing and reads as a real button */
.cta-band .btn--cta{background:var(--fairway);color:var(--cream);border-color:var(--fairway)}
.cta-band .btn--cta:hover{background:var(--pine);border-color:var(--pine);color:var(--cream)}
.cta-foot{font-size:.9rem;color:rgba(27,66,48,.72);margin:1.4rem auto 0;max-width:60ch}
.cta-foot a{color:inherit}

/* ---------- footer ---------- */
.ftr{background:var(--pine);color:var(--cream);position:relative;overflow:hidden}
.ftr-top{display:grid;gap:2.4rem;grid-template-columns:1.35fr 3fr;
  padding:clamp(2.8rem,6vw,4.2rem) 0 2.6rem;position:relative;z-index:1}
.ftr .wm{height:30px}
.ftr-tag{font-family:var(--disp);font-weight:600;text-transform:uppercase;
  letter-spacing:.3em;font-size:.68rem;color:var(--gold);margin:.85rem 0 0;
  display:flex;align-items:center;gap:.7rem}
.ftr-tag::after{content:"";height:1px;flex:1;background:var(--gold);opacity:.45;max-width:70px}
.ftr-blurb{color:rgba(246,240,226,.72);font-size:.9rem;margin:1.1rem 0 0;max-width:34ch}
.fnav{display:grid;gap:1.1rem 1.4rem;grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1120px){.fnav{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.fnav{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fhead{font-family:var(--disp);font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;font-size:.78rem;color:rgba(246,240,226,.58);margin:0 0 .8rem}
.flink{display:block;color:rgba(246,240,226,.8);text-decoration:none;font-size:.87rem;
  padding:.24rem 0;transition:color .15s}
.flink:hover{color:var(--cream)}
.ftr-bar{border-top:1px solid rgba(246,240,226,.14);padding:1.2rem 0 2rem;
  display:flex;gap:1rem 1.6rem;flex-wrap:wrap;align-items:center;position:relative;z-index:1;
  font-size:.79rem;color:rgba(246,240,226,.6)}
.ftr-bar a{color:inherit;text-decoration:none}
.ftr-bar a:hover{color:var(--cream)}
.ftr-bar .sep{margin-left:auto}
@media (max-width:820px){.ftr-top{grid-template-columns:1fr}}

.note{background:var(--mist);border-left:4px solid var(--gold);padding:1rem 1.2rem;
  border-radius:0 8px 8px 0;font-size:.9rem;color:#2B3F34}
.note b{color:var(--fairway)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- talk to us ---------- */
.have-head{font-family:var(--disp);font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-size:.8rem;color:var(--gold);margin:2.1rem 0 .9rem}
.next{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;
  gap:.75rem;max-width:48ch}
.next li{counter-increment:step;display:flex;gap:.85rem;align-items:baseline;
  color:rgba(246,240,226,.82);font-size:.97rem}
.next li::before{content:"0" counter(step);font-family:var(--disp);font-weight:600;
  letter-spacing:.1em;color:var(--gold);font-size:.85rem;flex:0 0 auto}
.next b{color:var(--cream);font-weight:700}
.pack-line{margin:1.7rem 0 0;font-size:.92rem;color:rgba(246,240,226,.6);
  max-width:48ch}
.pack-line b{color:rgba(246,240,226,.85)}
.form-card{background:var(--cream);color:var(--ink);border-radius:14px;
  padding:clamp(1.4rem,3vw,2.1rem);box-shadow:0 24px 60px rgba(8,23,17,.35)}
.f-field{margin-bottom:1.05rem}
.f-label{display:block;font-weight:700;font-size:.92rem;color:var(--fairway);
  margin-bottom:.35rem}
.f-label .opt{font-weight:500;color:var(--muted);font-size:.85em}
.f-input{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;
  border:1px solid rgba(27,66,48,.28);border-radius:8px;padding:.68rem .8rem;
  transition:border-color .15s ease}
.f-input:hover{border-color:rgba(27,66,48,.45)}
.f-input:focus{border-color:var(--gold);outline:none;
  box-shadow:0 0 0 3px rgba(225,158,51,.25)}
textarea.f-input{resize:vertical;min-height:120px}
.f-duo{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media (max-width:560px){.f-duo{grid-template-columns:1fr}}
.btn--block{width:100%;justify-content:center;font-size:1.02rem;
  padding:.85rem 1.45rem;border:0}
.fc-foot{margin:.85rem 0 0;font-size:.85rem;color:var(--muted);text-align:center}
.f-errors{background:rgba(179,58,43,.08);border-left:4px solid var(--bogey);
  color:#7C2A1F;border-radius:0 8px 8px 0;padding:.8rem 1rem;font-size:.92rem;
  margin-bottom:1.1rem}
.f-errors ul{margin:.3rem 0 0;padding-left:1.1rem}
.f-input.is-invalid{border-color:var(--bogey)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-done{text-align:center;padding:clamp(2rem,4vw,3rem) clamp(1.4rem,3vw,2.1rem)}
.done-mark{width:56px;height:56px;border-radius:50%;background:var(--gold);
  color:var(--fairway);display:inline-flex;align-items:center;justify-content:center;
  margin:0 0 1rem}
.form-done h2{margin-bottom:.4rem}
.form-done p{color:var(--muted);max-width:36ch;margin-inline:auto}

/* ---------- the journey spine ---------- */
.jour{position:relative;max-width:980px;margin-inline:auto}
.jour::before,.jour::after{content:"";position:absolute;top:0;bottom:0;left:50%;
  width:2px;transform:translateX(-50%);z-index:0}
.jour::before{background:currentColor;opacity:.14}
.jour::after{background:var(--gold);bottom:auto;height:var(--spine-fill,0%)}
.jn{position:relative;z-index:1;width:calc(50% - 46px);
  margin:0 0 clamp(1.6rem,3.4vw,2.6rem)}
.jn--l{margin-right:auto;text-align:right}
.jn--r{margin-left:auto}
.jn-node{position:absolute;top:0;left:calc(100% + 46px);transform:translateX(-50%);
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--cream);color:var(--fairway);
  border:2px solid rgba(27,66,48,.25);transition:border-color .25s,box-shadow .25s,
  color .25s;z-index:1}
.jn--r .jn-node{left:auto;right:calc(100% + 46px);transform:translateX(50%)}
.jn-ic{width:22px;height:22px}
.jn.is-on .jn-node{background:var(--fairway);border-color:var(--gold);
  box-shadow:0 0 0 5px rgba(225,158,51,.22);color:var(--gold)}
.jn-card{background:#fff;border:1px solid rgba(27,66,48,.13);border-radius:12px;
  padding:1.1rem 1.25rem;transition:transform .25s,box-shadow .25s}
.jn.is-on .jn-card{transform:translateY(-2px);box-shadow:0 14px 34px rgba(27,66,48,.13)}
.jn-time{margin:0 0 .2rem;font-family:var(--disp);font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;color:var(--flap)}
.jour--live .jn-time{color:var(--gold)}
.jn-title{margin:0 0 .5rem;font-size:1.12rem}
.jn-acts{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.jn-acts li{display:flex;gap:.55rem;align-items:baseline;font-size:.9rem;
  line-height:1.5;color:var(--muted)}
.jn--l .jn-acts li{flex-direction:row-reverse;text-align:right}
.jn-acts b{color:var(--ink)}
.jn-media{margin-top:.9rem}
.jn-media .ph{margin-inline:0}
.jn--l .jn-media .ph{margin-left:auto}
.actor{flex:0 0 auto;font-family:var(--disp);font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;font-size:.62rem;padding:.18rem .5rem;border-radius:999px;
  transform:translateY(-1px)}
.a-org{background:var(--gold);color:var(--pine)}
.a-pl{background:var(--water);color:#fff}
.a-sp{background:var(--mist);color:var(--pine);border:1px solid rgba(27,66,48,.28)}
.a-cs{background:var(--pine);color:var(--cream)}
.a-home{background:transparent;color:var(--pine);border:1px solid rgba(15,41,30,.45)}
.jn-phase{position:relative;text-align:center;margin:0 0 clamp(2rem,4vw,3rem);
  padding-top:.4rem}
.jn-phase-n{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:600;letter-spacing:.14em;font-size:.8rem;
  color:var(--cream);background:var(--flap);border-radius:999px;
  padding:.34rem .95rem;margin-bottom:.9rem}
.on-dark .jn-phase-n{color:var(--pine);background:var(--gold)}
.jn-phase h2{margin-bottom:.15rem}
.jn-phase-w{margin:0;font-size:.92rem;color:var(--muted)}
/* the green, live phase */
.jour--live{color:var(--cream)}
.jour--live .jn-node{background:var(--pine);color:var(--cream);
  border-color:rgba(246,240,226,.3)}
.jour--live .jn.is-on .jn-node{border-color:var(--gold);color:var(--gold)}
.jour--live .jn-card{background:var(--flap);border-color:rgba(246,240,226,.16)}
.jour--live .jn-title{color:var(--cream)}
.jour--live .jn-acts li{color:rgba(246,240,226,.72)}
.jour--live .jn-acts b{color:var(--cream)}
.on-dark .jn-phase-w{color:rgba(246,240,226,.65)}
.a-live-adj .a-sp{background:rgba(246,240,226,.9);border-color:transparent}
.a-live-adj .a-home{color:var(--cream);border-color:rgba(246,240,226,.55)}
.jour-cap{position:relative;width:12px;height:12px;border-radius:50%;
  background:var(--gold);margin:0 auto;z-index:1}
.jn-tick{position:relative;z-index:1;width:100%;
  margin:0 0 clamp(1.6rem,3.4vw,2.6rem)}
.jn-tick .ticker{border-radius:8px;overflow:hidden}
@media (max-width:900px){
  .jour::before,.jour::after{left:21px}
  .jn,.jn--l,.jn--r{width:auto;margin-left:64px;text-align:left}
  .jn--l .jn-acts li{flex-direction:row;text-align:left}
  .jn--l .jn-media .ph{margin-left:0}
  .jn-node,.jn--r .jn-node{left:-64px;right:auto;transform:none;top:-2px}
  .jn-tick{margin-left:64px}
  .jn-phase{text-align:left;padding-left:64px}
  .jour-cap{margin:0 0 0 15px}
}
/* inside a journey card the phone pair stays side by side on small screens,
   smaller, unstaggered, so the pod does not tower */
@media (max-width:520px){
  .jn-media .phones{grid-template-columns:1fr 1fr;max-width:none;gap:.8rem}
  .jn-media .phones>*:nth-child(2){margin-top:0}
}

/* ---------- sponsors: the tour ---------- */
.stop{margin-top:clamp(2.6rem,5.5vw,4.2rem)}
.stop-n{display:flex;align-items:center;gap:.7rem;margin:0 0 .55rem;
  font-family:var(--disp);font-weight:600;letter-spacing:.2em;font-size:.82rem;
  color:var(--flap)}
.stop-n::after{content:"";height:1px;width:44px;background:var(--gold)}
.stop h3{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:.5rem}
.stop p{color:var(--muted);max-width:52ch}
.stop .ph{margin-inline:0}
.stop--flip .stop-media .ph{margin-left:auto}
@media (max-width:900px){.stop--flip .stop-media .ph{margin-left:0}}
/* the drawn pre-event email */
.mailcard{max-width:430px;background:#fff;border:1px solid rgba(27,66,48,.14);
  border-radius:14px;box-shadow:0 18px 44px rgba(27,66,48,.14);overflow:hidden}
.mail-top{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;
  border-bottom:1px solid rgba(27,66,48,.1)}
.mail-av{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:#B9502F;
  color:#F6F0E2;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:600;font-size:.85rem;letter-spacing:.06em}
.mail-from{min-width:0}
.mail-from b{display:block;font-size:.9rem;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.mail-from span{font-size:.76rem;color:var(--muted)}
.mail-time{margin-left:auto;font-size:.74rem;color:var(--muted);flex:0 0 auto}
.mail-body{padding:1rem}
.mail-subj{margin:0 0 .45rem;font-weight:800;font-size:1rem;color:var(--ink)}
.mail-line{margin:0 0 .4rem;font-size:.86rem;color:var(--muted)}
.mail-plate{display:inline-flex;align-items:center;gap:.5rem;margin:.55rem 0 .2rem;
  background:#23395B;color:#fff;border-radius:6px;padding:.42rem .7rem;
  font-family:var(--disp);font-weight:600;letter-spacing:.12em;font-size:.72rem}
.mail-plate span{opacity:.7;letter-spacing:.16em;font-size:.62rem}
.mail-foot{display:flex;justify-content:space-between;align-items:center;
  padding:.6rem 1rem;background:var(--cream);font-size:.7rem;color:var(--muted);
  font-family:var(--disp);letter-spacing:.14em;text-transform:uppercase}
/* presentation pull-quote */
.pres-card{background:var(--mist);border-left:4px solid var(--gold);
  border-radius:0 12px 12px 0;padding:clamp(1.3rem,3vw,2rem);max-width:460px}
.pres-card .pull{font-size:clamp(1.2rem,2vw,1.55rem);max-width:none}
.pres-card cite{display:block;margin-top:.8rem;font-style:normal;font-size:.85rem;
  color:var(--muted)}
.tour-tick{margin-top:clamp(2.2rem,4.5vw,3.4rem)}
.tour-tick .ticker{border-radius:8px;overflow:hidden}
/* board excerpt: the everyday sponsored hole */
.holecard{max-width:440px;background:var(--pine);border-radius:14px;overflow:hidden;
  box-shadow:0 18px 44px rgba(15,41,30,.28)}
.hole-head{display:flex;justify-content:space-between;align-items:center;
  padding:.7rem 1rem;background:rgba(246,240,226,.06);
  font-family:var(--disp);font-weight:600;letter-spacing:.16em;font-size:.72rem;
  color:rgba(246,240,226,.7);text-transform:uppercase}
.hole-row{display:flex;align-items:center;gap:.8rem;padding:.75rem 1rem;
  border-top:1px solid rgba(246,240,226,.08)}
.hole-no{flex:0 0 auto;width:40px;font-family:var(--disp);font-weight:700;
  font-size:1.05rem;color:var(--cream)}
.hole-meta{min-width:0}
.hole-meta b{display:block;font-size:.82rem;color:var(--cream);
  font-family:var(--disp);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.hole-meta span{font-size:.72rem;color:rgba(246,240,226,.55)}
.hole-plate{margin-left:auto;flex:0 0 auto;font-family:var(--disp);font-weight:600;
  letter-spacing:.1em;font-size:.66rem;color:#fff;border-radius:5px;
  padding:.32rem .55rem;text-transform:uppercase}
.hole-row--hot{background:rgba(225,158,51,.08)}
.hole-chip{flex:0 0 auto;font-family:var(--disp);font-weight:600;font-size:.6rem;
  letter-spacing:.12em;color:var(--pine);background:var(--gold);border-radius:999px;
  padding:.2rem .5rem;text-transform:uppercase}
/* the flagship phone pair inside a stop */
.stop-media .phones{max-width:440px}
.stop-media .phones>*:nth-child(2){margin-top:1.2rem}
@media (max-width:520px){
  .stop-media .phones{grid-template-columns:1fr 1fr;max-width:none;gap:.8rem}
  .stop-media .phones>*:nth-child(2){margin-top:0}
}

/* the closing band: one section, two doors */
.doors{display:grid;grid-template-columns:1fr 1fr;margin-top:2.1rem;text-align:left}
.door{padding:0 clamp(1.4rem,3.4vw,2.8rem);display:flex;flex-direction:column;
  align-items:flex-start}
.door:first-child{padding-left:.4rem}
.door+.door{border-left:1px solid rgba(27,66,48,.28)}
.door-k{font-family:var(--disp);font-weight:600;letter-spacing:.24em;font-size:.72rem;
  text-transform:uppercase;color:rgba(27,66,48,.65);margin:0 0 .45rem}
.door h3{color:var(--fairway);font-size:clamp(1.25rem,2vw,1.6rem);margin:0 0 .6rem}
.door p{color:rgba(27,66,48,.84);max-width:46ch;margin:0}
.door .btns{margin-top:auto;padding-top:1.25rem}
.cta-band .btn--line{background:transparent;color:var(--fairway);
  border:1.6px solid rgba(27,66,48,.55)}
.cta-band .btn--line:hover{background:rgba(27,66,48,.1);border-color:var(--fairway)}
.doors-k{font-family:var(--disp);font-weight:600;letter-spacing:.26em;font-size:.78rem;
  text-transform:uppercase;color:rgba(27,66,48,.6);margin:0 0 .2rem}
@media (max-width:880px){
  .doors{grid-template-columns:1fr}
  .door,.door:first-child{padding:1.5rem .2rem}
  .door:first-child{padding-top:.4rem}
  .door+.door{border-left:0;border-top:1px solid rgba(27,66,48,.28)}
}

/* ---------- the day: shared template ---------- */
.day-hero-media{margin-top:clamp(2rem,4.5vw,3.2rem)}
.day-hero-media .ph{margin-inline:auto}
.day-hero-media .phones{max-width:640px}
/* split hero: text beside the device, for the pages that need it */
.day-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.8rem,4.5vw,3.6rem);align-items:center}
.day-hero-grid .day-hero-media{margin-top:0}
.day-hero-grid .phones{max-width:520px}
@media (max-width:900px){.day-hero-grid{grid-template-columns:1fr}
  .day-hero-grid .day-hero-media{margin-top:2rem}}
/* platform strip: iOS and Android, stated with their marks */
.plat{display:flex;align-items:center;gap:16px;margin-top:1.4rem}
.plat-i{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);
  font-weight:600;letter-spacing:.14em;font-size:.8rem;text-transform:uppercase}
.plat-i svg{height:19px;width:auto;display:block}
.plat-sep{width:1px;height:20px;background:currentColor;opacity:.35}
.on-dark .plat{color:rgba(246,240,226,.88)}
.platband{margin-top:clamp(2.8rem,5.5vw,4rem);display:flex;flex-direction:column;
  align-items:center;text-align:center;color:var(--pine)}
.platband .plat{margin-top:0;gap:22px}
.platband .plat-i{font-size:1rem;gap:11px}
.platband .plat-i svg{height:28px}
.platband p{color:var(--muted);max-width:46ch;margin-top:.8rem}
.beat{margin-top:clamp(3rem,6vw,4.6rem)}
.beat p{color:var(--muted);max-width:54ch}
.on-dark .beat p{color:rgba(246,240,226,.75)}
.beat .ph{margin-inline:0}
.beat--flip .beat-media .ph{margin-left:auto}
@media (max-width:900px){.beat--flip .beat-media .ph{margin-left:0}}
.day-tick{margin-top:clamp(2.6rem,5vw,3.8rem)}
.day-tick .ticker{border-radius:8px;overflow:hidden}
/* fact chips */
.facts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.fact{font-family:var(--disp);font-weight:600;letter-spacing:.1em;font-size:.72rem;
  text-transform:uppercase;color:var(--pine);background:var(--mist);
  border-radius:999px;padding:.45rem .85rem}
.on-dark .fact{background:rgba(246,240,226,.12);color:var(--cream)}
/* pager between the five pages */
.day-pager{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:.4rem}
@media (max-width:700px){.day-pager{grid-template-columns:1fr}}
.day-pager .card{position:relative}
.pager-k{display:block;font-family:var(--disp);font-weight:600;letter-spacing:.18em;
  font-size:.7rem;text-transform:uppercase;color:var(--flap);margin-bottom:.35rem}
.day-pager .card-more{color:var(--flap)}
/* who it's for: the section's close, on the last page of The Day */
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;
  margin-top:clamp(1.6rem,3vw,2.2rem)}
@media (max-width:1000px){.who-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.who-grid{grid-template-columns:1fr}}
/* partner package label on the three ways in */
.pk{font-family:var(--disp);font-weight:600;letter-spacing:.2em;font-size:.68rem;
  text-transform:uppercase;color:var(--flap);margin:0 0 .5rem}
/* what's next: the roadmap cards after the journey */
.next-cards{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;
  margin-top:clamp(1.4rem,2.5vw,2rem)}
@media (max-width:700px){.next-cards{grid-template-columns:1fr}}
.soon{display:inline-block;font-family:var(--disp);font-weight:600;letter-spacing:.14em;
  font-size:.68rem;text-transform:uppercase;color:var(--pine);background:var(--mist);
  border-radius:999px;padding:.32rem .7rem;margin:0 0 .7rem}

/* ---------- home: hero and callouts ---------- */
.hero{background:var(--fairway);color:var(--cream);position:relative;overflow:hidden;
  padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(3rem,7vw,5rem)}
/* A sticky header sits in flow, so going transparent would reveal the page background, not
   the hero. Pull the hero up under it and put the padding back, so the header genuinely
   floats on the green and there is no seam at the top. */
body.dark-hero .hero{margin-top:calc(var(--hdr) * -1);
  padding-top:calc(var(--hdr) + clamp(3rem,6vw,5rem))}
.hero h1{color:var(--cream);max-width:16ch}
.hero-grid{display:grid;gap:clamp(2rem,5vw,3.5rem);grid-template-columns:1.05fr 1fr;align-items:center}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}}
.hero .btns{margin-top:1.9rem}
.callouts{list-style:none;margin:0;padding:0}
.callout{background:var(--flap);border-radius:10px;padding:.95rem 1.15rem;
  border-left:3px solid var(--gold)}
.callout-a{display:block;font-weight:700;color:var(--cream);font-size:1.02rem}
.callout-b{display:block;color:rgba(246,240,226,.66);font-size:.9rem;margin-top:.15rem}

/* ---------- about: the founders and the season ---------- */
.founders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.4rem);
  margin-top:clamp(2rem,4.5vw,3rem)}
.founder .ph{margin:0 0 1.1rem;max-width:320px;margin-inline:0}
.founder-role{font-family:var(--disp);font-weight:600;letter-spacing:.2em;font-size:.72rem;
  text-transform:uppercase;color:var(--gold);margin:0 0 .35rem}
.founder h3{margin-bottom:.45rem;font-size:1.32rem}
.founder p{margin:0;font-size:.95rem;line-height:1.55;color:rgba(246,240,226,.76)}
@media (max-width:900px){.founders{grid-template-columns:1fr;max-width:520px}}

/* ---------- faqs: native disclosure, no script ---------- */
.faq-nav{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.faq-nav .fact{text-decoration:none;background:rgba(246,240,226,.12);color:var(--cream)}
.faq-nav .fact:hover{background:rgba(246,240,226,.22)}
.faq-group{max-width:820px}
.faq-group+.faq-group{margin-top:clamp(2.4rem,5vw,3.6rem)}
.faq-group h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.6rem}
.faq{border-top:1px solid rgba(27,66,48,.16)}
.faq:last-child{border-bottom:1px solid rgba(27,66,48,.16)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 0;cursor:pointer;font-weight:700;color:var(--fairway);list-style:none}
.faq summary::-webkit-details-marker{display:none}
/* the plus turns into a cross when open: a rotation, so no glyph swap */
.faq summary::after{content:"+";flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;background:var(--mist);color:var(--fairway);
  font-weight:600;font-size:1.1rem;line-height:1;transition:transform .2s ease}
.faq[open] summary::after{transform:rotate(45deg)}
.faq-body{padding:0 0 1.15rem;max-width:62ch}
.faq-body p{margin:0 0 .7rem;color:var(--muted)}
.faq-body p:last-child{margin-bottom:0}
.faq-body a{color:var(--fairway);font-weight:600}

/* ---------- the legal set: long-form reading ---------- */
.prose{max-width:72ch}
.prose h1{font-size:clamp(2.1rem,4.4vw,3.2rem);margin-bottom:.35rem}
.prose .updated{font-family:var(--disp);font-weight:600;letter-spacing:.16em;font-size:.74rem;
  text-transform:uppercase;color:var(--flap);margin:0 0 1.4rem}
.prose h2{font-size:clamp(1.35rem,2.2vw,1.7rem);margin:2.2rem 0 .6rem}
.prose h3{font-size:1.05rem;margin:1.4rem 0 .4rem}
.prose ul{margin:0 0 1.1rem;padding-left:1.2rem}
.prose li{margin-bottom:.45rem}
.prose li b{color:var(--fairway)}
.prose a{color:var(--fairway);font-weight:600}
.prose table{width:100%;border-collapse:collapse;font-size:.93rem;margin:0 0 1.1rem}
.prose th,.prose td{text-align:left;vertical-align:top;padding:.65rem .7rem .65rem 0;
  border-bottom:1px solid rgba(27,66,48,.16)}
.prose th{font-family:var(--disp);font-weight:600;letter-spacing:.14em;font-size:.72rem;
  text-transform:uppercase;color:var(--flap)}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--mist);padding:.1rem .35rem;border-radius:4px}

/* ---------- who it's for: each page's own device ---------- */
/* the 18-hole board: front nine covers the day, back nine is for the cause */
.board{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:clamp(2rem,4.5vw,3rem)}
.board-nine{background:#fff;border:1px solid rgba(27,66,48,.13);border-radius:12px;overflow:hidden}
.board-head{display:flex;justify-content:space-between;padding:.75rem 1rem;
  background:var(--fairway);color:var(--cream);font-family:var(--disp);font-weight:600;
  letter-spacing:.16em;font-size:.74rem;text-transform:uppercase}
.board-nine--cause .board-head{background:var(--gold);color:var(--pine)}
.board-row{display:flex;align-items:center;gap:.8rem;padding:.55rem 1rem;
  border-top:1px solid rgba(27,66,48,.1);font-size:.9rem}
.board-no{flex:0 0 32px;font-family:var(--disp);font-weight:700;font-size:1.05rem;color:var(--fairway)}
.board-what{flex:1 1 auto;color:var(--muted)}
.board-plate{flex:0 0 auto;font-family:var(--disp);font-weight:600;letter-spacing:.1em;
  font-size:.64rem;text-transform:uppercase;color:#fff;border-radius:5px;padding:.3rem .55rem}
.board-sold{background:var(--mist);color:var(--pine)}
.board-open{background:transparent;color:var(--muted);border:1px dashed rgba(27,66,48,.4)}
.board-foot{padding:.85rem 1rem;font-weight:700;color:var(--fairway);border-top:1px solid rgba(27,66,48,.1)}
.board-nine--cause .board-foot{color:var(--pine)}
.board-note{margin:1.4rem auto 0;max-width:62ch;text-align:center;font-size:.92rem;color:var(--muted)}
.board-note a{color:var(--fairway);font-weight:600}
@media (max-width:760px){.board{grid-template-columns:1fr}}

/* the club ledger: who does what */
.ledger{border-top:1px solid rgba(27,66,48,.16)}
.ledger-row{display:grid;grid-template-columns:1fr 1.5fr;gap:1.2rem;padding:1rem 0;
  border-bottom:1px solid rgba(27,66,48,.16)}
.ledger-k{font-weight:700;color:var(--fairway)}
.ledger-v{color:var(--muted);font-size:.95rem;line-height:1.5}
.ledger-v b{color:var(--ink)}
.ledger-row--punch{background:var(--fairway);margin:.6rem -1rem 0;padding:1rem;border-radius:10px;border:0}
.ledger-row--punch .ledger-k{color:rgba(246,240,226,.8)}
.ledger-row--punch .ledger-v{color:var(--gold);font-family:var(--disp);font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;font-size:1rem}
@media (max-width:560px){.ledger-row{grid-template-columns:1fr;gap:.3rem}}

/* the tour's fixture list */
.fixtures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:clamp(1.8rem,4vw,2.6rem)}
.fixture{position:relative;background:#fff;border:1px solid rgba(27,66,48,.13);border-radius:12px;
  padding:1.15rem 1.25rem 1.2rem;display:flex;flex-direction:column}
.fixture-leg{font-family:var(--disp);font-weight:600;letter-spacing:.2em;font-size:.68rem;
  text-transform:uppercase;color:var(--flap)}
.fixture h3{font-size:1.1rem;margin:.25rem 0 .35rem}
.fixture p{margin:0 0 .9rem;font-size:.88rem;line-height:1.5;color:var(--muted)}
.fixture-plate{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;
  background:#23395B;color:#fff;border-radius:6px;padding:.32rem .6rem;
  font-family:var(--disp);font-weight:600;letter-spacing:.12em;font-size:.62rem;text-transform:uppercase}
.fixture-plate span{opacity:.7;letter-spacing:.16em;font-size:.56rem}
.fixture-state{position:absolute;top:.9rem;right:.9rem;font-family:var(--disp);font-weight:600;
  letter-spacing:.14em;font-size:.6rem;text-transform:uppercase;border-radius:999px;padding:.22rem .55rem;
  background:var(--mist);color:var(--pine)}
.fixture--played{opacity:.7}
.fixture--next{border-color:var(--gold);box-shadow:0 0 0 3px rgba(225,158,51,.22)}
.fixture--next .fixture-state{background:var(--gold);color:var(--pine)}
@media (max-width:900px){.fixtures{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fixtures{grid-template-columns:1fr}}

/* the order of merit, drawn in the broadcast's language, sold before built */
.merit-wrap{position:relative;border-radius:12px;overflow:hidden;
  box-shadow:0 18px 44px rgba(15,41,30,.28)}
.merit-wrap .soon{position:absolute;top:.75rem;right:.75rem;margin:0;background:var(--gold)}
.merit{width:100%;border-collapse:collapse;background:var(--pine);color:var(--cream);font-size:.95rem}
.merit th{text-align:left;padding:.85rem 1rem;background:rgba(246,240,226,.06);
  font-family:var(--disp);font-weight:600;letter-spacing:.16em;font-size:.68rem;
  text-transform:uppercase;color:rgba(246,240,226,.6)}
.merit td{padding:.7rem 1rem;border-top:1px solid rgba(246,240,226,.08)}
.merit td:first-child{font-family:var(--disp);font-weight:700;color:var(--gold);width:3.2rem}
.merit .num{text-align:right;font-variant-numeric:tabular-nums}
.merit tbody tr:first-child td{background:rgba(225,158,51,.08)}

/* the society captain's day: before, crossed out; now, ticked */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);
  margin-top:clamp(1.8rem,4vw,2.6rem);max-width:980px}
.compare-k{font-family:var(--disp);font-weight:600;letter-spacing:.2em;font-size:.72rem;
  text-transform:uppercase;color:var(--flap);margin:0 0 .9rem}
.compare ul{margin:0;padding:0;list-style:none;display:grid;gap:.7rem}
.compare--then li{color:var(--muted);text-decoration:line-through;
  text-decoration-color:var(--bogey);text-decoration-thickness:2px;line-height:1.5}
.compare--now .compare-k{color:var(--fairway)}
@media (max-width:760px){.compare{grid-template-columns:1fr}}

/* staggered trio with captions, on dark */
.stag{margin:0}
.stag .ph{margin-inline:0}
.stag figcaption{margin-top:.7rem;font-family:var(--disp);font-weight:600;letter-spacing:.14em;
  font-size:.7rem;text-transform:uppercase;color:rgba(246,240,226,.7)}

/* the players' numbered steps, on the green */
.steps{list-style:none;margin:clamp(2rem,4.5vw,3rem) 0 0;padding:0;max-width:860px}
.step{display:grid;grid-template-columns:82px 1fr;gap:1.2rem;padding:1.35rem 0;
  border-top:1px solid rgba(246,240,226,.18)}
.step-n{font-family:var(--disp);font-weight:600;font-size:clamp(2rem,3.6vw,2.8rem);line-height:.9;
  color:var(--gold);font-variant-numeric:tabular-nums}
.step h3{margin:.15rem 0 .35rem;font-size:1.15rem}
.step p{margin:0;font-size:.95rem;line-height:1.55;color:rgba(246,240,226,.76);max-width:58ch}
@media (max-width:520px){.step{grid-template-columns:52px 1fr;gap:.8rem}}

/* phone screens inside tiles */
.tile-media{background:var(--mist);padding:1.4rem 1.6rem 0;display:flex;justify-content:center;
  overflow:hidden;max-height:300px}
.tile-media .ph{margin:0;max-width:180px}

/* the directory's regions */
.regions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.region{font-family:var(--disp);font-weight:600;letter-spacing:.12em;font-size:.76rem;
  text-transform:uppercase;color:var(--fairway);border:1px solid rgba(27,66,48,.3);
  border-radius:999px;padding:.5rem .95rem}
.region--first{background:var(--fairway);color:var(--cream);border-color:var(--fairway)}
.region--more{border-style:dashed;color:var(--muted)}