/* CartProof identity layer (packet v1.0, NPV-KOC color spec v0.4). Loaded last, so it re-maps the existing
   site tokens onto the CartProof palette without renaming any class or file. Exact packet values are used where
   the packet defines them. Values marked "derived" are soft tints or a hairline that the packet does not specify. */
:root {
  --cp-midnight: #142B33; --cp-lime: #B9ED32; --cp-cream: #F6F5EF;
  --cp-member: #35B9EF; --cp-bev: #FFAB52; --cp-barn: #AC8CEF; --cp-equip: #FFD16B; --cp-grounds: #83CD61; --cp-stock: #FF8B8B; --cp-rest: #FFAB91;
  --cp-hover: #AADD24; --cp-pressed: #99C51F; --cp-focus: #006F9B;

  --bg: #F6F5EF; --ink: #142B33; --fg: #3F565E; --muted: #53686D;
  --line: #D3DDD9;                                   /* derived hairline between cream and #748A8F */
  --glass: rgba(255, 255, 255, 0.86); --solid: #FFFFFF; --surface: #FFFFFF;
  --accent: #267A00; --accent-soft: #E7EFEB; --on-accent: #142B33; --plate: #142B33; --glow: #B9ED32;
  --fill: #B9ED32; --fill-d: #99C51F;
  --grad: linear-gradient(180deg, #B9ED32, #B9ED32);
  --gt: linear-gradient(90deg, #267A00, #006F9B);    /* logo gradient darkened to the palette's light-surface inks for readable headings */
  --blue: #35B9EF; --blue-d: #006F9B; --yellow: #FFD16B; --yellow-d: #E5B84F; --orange: #FFAB52; --purple: #AC8CEF; --red: #FF8B8B;
  --warn: #805600; --warn-soft: #FFF3D6; --bad: #AC303C; --bad-soft: #FFE6E6;
  --g-l: #EEF8D6; --b-l: #E0F4FC; --y-l: #FFF4D9; --p-l: #EFE9FC; --r-l: #FFE8E8; --p-d: #6544AA;   /* derived tints */
  --rp-golfer: #142B33; --rp-attendant: #142B33; --rp-maintenance: #142B33; --rp-mechanic: #142B33; --rp-grounds: #142B33; --rp-stock: #142B33;
  --shadow: 0 8px 24px rgb(0 0 0 / 12%);
  --sky1: #D7EEF4; --sky2: #F6F5EF;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0D1C22; --ink: #F6F5EF; --fg: #D0DDE0; --muted: #B2C4C9; --line: #314D56;
  --glass: rgba(34, 60, 68, 0.86); --solid: #142B33; --surface: #142B33;
  --accent: #B9ED32; --accent-soft: #2D4328; --on-accent: #142B33; --plate: #0D1C22;
  --gt: linear-gradient(90deg, #B9ED32, #35B9EF);
  --blue-d: #35B9EF; --warn: #FFD16B; --warn-soft: rgba(255, 209, 107, 0.16); --bad: #FF8B8B; --bad-soft: rgba(255, 139, 139, 0.16);
  --g-l: #2D4328; --b-l: rgba(53, 185, 239, 0.18); --y-l: rgba(255, 209, 107, 0.16); --p-l: rgba(172, 140, 239, 0.2); --r-l: rgba(255, 139, 139, 0.18); --p-d: #AC8CEF;
  --sky1: #183842; --sky2: #0D1C22; --shadow: 0 8px 24px rgb(0 0 0 / 35%); --cp-focus: #35B9EF;
} }
:root[data-theme="dark"] {
  --bg: #0D1C22; --ink: #F6F5EF; --fg: #D0DDE0; --muted: #B2C4C9; --line: #314D56;
  --glass: rgba(34, 60, 68, 0.86); --solid: #142B33; --surface: #142B33;
  --accent: #B9ED32; --accent-soft: #2D4328; --on-accent: #142B33; --plate: #0D1C22;
  --gt: linear-gradient(90deg, #B9ED32, #35B9EF);
  --blue-d: #35B9EF; --warn: #FFD16B; --warn-soft: rgba(255, 209, 107, 0.16); --bad: #FF8B8B; --bad-soft: rgba(255, 139, 139, 0.16);
  --g-l: #2D4328; --b-l: rgba(53, 185, 239, 0.18); --y-l: rgba(255, 209, 107, 0.16); --p-l: rgba(172, 140, 239, 0.2); --r-l: rgba(255, 139, 139, 0.18); --p-d: #AC8CEF;
  --sky1: #183842; --sky2: #0D1C22; --shadow: 0 8px 24px rgb(0 0 0 / 35%); --cp-focus: #35B9EF;
}

/* focus: 3px ring, 3px offset (packet layout rule) */
:where(a, button, select, input, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--cp-focus); outline-offset: 3px; }

/* header: midnight in both modes, with the dark logo master */
.topnav { background: rgba(20, 43, 51, 0.96); border-bottom-color: #0D1C22; }
.brand { display: inline-flex; align-items: center; }
.brand-logo { display: block; height: 40px; width: auto; }
.topnav .links a { color: #D0DDE0; }
.topnav .links a:hover { background: #2D4328; color: #F6F5EF; }
.topnav .links a[aria-current="page"] { background: #B9ED32; color: #142B33; }
.nav-toggle { background: #223C44; color: #F6F5EF; border-color: #314D56; }
@media (max-width: 900px) { .topnav .links { background: #142B33; border-color: #314D56; } }
@media (max-width: 380px) { .brand-logo { height: 34px; } }
.plus { background: #AC8CEF; color: #142B33; }

/* buttons: lime primary with midnight text (10.7:1), hover and pressed from the spec */
.btn { background: #B9ED32; color: #142B33; box-shadow: 0 4px 0 #99C51F; }
.btn:hover { background: #AADD24; filter: none; }
.btn:active { background: #99C51F; box-shadow: 0 1px 0 #99C51F; }
.btn.ghost { background: var(--solid); color: var(--ink); border: 2px solid #748A8F; box-shadow: 0 4px 0 var(--line); }
.smallbtn { background: #B9ED32; color: #142B33; }
.smallbtn.ghost { background: transparent; color: var(--ink); border: 2px solid #748A8F; }
.chip[aria-pressed="true"] { background: #B9ED32; color: #142B33; }

/* role chips: bright role accent with midnight text and a label everywhere */
.rp { color: #142B33 !important; }
.rp.golfer { background: var(--cp-member); } .rp.attendant { background: var(--cp-bev); } .rp.maintenance { background: var(--cp-barn); }
.rp.mechanic { background: var(--cp-equip); } .rp.grounds { background: var(--cp-grounds); } .rp.stock { background: var(--cp-stock); } .rp.restaurant { background: var(--cp-rest); }
.c-blue { --rc: var(--cp-member); } .c-orange { --rc: var(--cp-bev); } .c-purple { --rc: var(--cp-barn); } .c-yellow { --rc: var(--cp-equip); } .c-green { --rc: var(--cp-grounds); }
.c-red { --rc: var(--cp-stock); } .c-red.restaurant-tone { --rc: var(--cp-rest); }
.c-blue, .c-orange, .c-purple, .c-yellow, .c-green, .c-red { --rc-l: color-mix(in srgb, var(--rc) 22%, var(--solid)); }
/* the role accent is a fill or border, never body text */
.cat .rp, .cat .go, .connects span, .catnav a[aria-current="page"], .rolebtn i { color: var(--ink); }
.cat .rp { background: var(--rc); color: #142B33 !important; } .cat .go { text-decoration: underline; text-decoration-color: var(--rc); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.daylist li::before { color: #142B33; }
.rolebtn i { background: var(--rc); color: #142B33; }

/* the interactive phone and the plate: midnight body, lime edge, scan window black on white */
.phone { border-color: #142B33; }
.phone-top, .mph .mt, .mini .top { background: linear-gradient(160deg, #142B33, #223C44); }
.plate { background: linear-gradient(135deg, #314D56, #142B33); box-shadow: 0 24px 48px rgba(13, 28, 34, 0.45), inset 0 0 0 2px rgba(185, 237, 50, 0.35); }
.plate .face { background: #142B33; border: 4px solid #B9ED32; box-shadow: 0 0 18px rgba(185, 237, 50, 0.55); }
.plate .qr { background: #fff; border-radius: 10px; padding: 8px; box-sizing: border-box; }
.plate .qr .beam { display: none; }   /* nothing glows over the scan window */
.plate .row, .plate .cartno { color: #F6F5EF; }
.plate .tap { color: #B9ED32; }
.plate-brand { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.plate-brand img { height: 18px; width: auto; }
.plate-btn .hint { background: #B9ED32; color: #142B33; box-shadow: 0 4px 0 #99C51F; }
.hchip i { background: var(--rc, #B9ED32); }

/* footer: midnight with the stacked lockup and its endorsement */
footer.site-footer { background: #142B33; }
footer.site-footer h2, footer.site-footer h3, footer.site-footer p, footer.site-footer a { color: #F6F5EF; }
footer.site-footer .fine { color: #B2C4C9; }
.footer-logo { display: block; width: 260px; max-width: 100%; height: auto; margin-bottom: 14px; }
.marq { background: #B9ED32; color: #142B33; }

/* status pills use the packet's light-surface inks */
.pill.ok { background: #E3F7EE; color: #126D4E; } .pill.warn { background: #FFF3D6; color: #805600; } .pill.bad { background: #FFE6E6; color: #AC303C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill.ok { background: rgba(68, 211, 156, 0.16); color: #44D39C; } :root:not([data-theme="light"]) .pill.warn { background: rgba(255, 209, 107, 0.16); color: #FFD16B; } :root:not([data-theme="light"]) .pill.bad { background: rgba(255, 139, 139, 0.16); color: #FF8B8B; } }
.tagrow.on { border-color: #99C51F; }
.tagtotal { background: #142B33; color: #F6F5EF; } .tagtotal a { color: #B9ED32; }

/* ---- the crew: seven role guides ---- */
.guide-card { position: relative; margin: 0; width: 100%; aspect-ratio: 430 / 766; border-radius: 22px; overflow: hidden; border: 5px solid var(--gc, #B9ED32); background: #142B33; box-shadow: 0 18px 40px rgba(13, 28, 34, 0.35); }
.guide-card img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }
.guide-card figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 12px 12px; background: linear-gradient(180deg, transparent, rgba(13, 28, 34, 0.88)); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.guide-card figcaption b { color: #F6F5EF; font-size: 20px; line-height: 1.1; }
.gtag { display: inline-flex; align-items: center; gap: 6px; background: var(--gc, #B9ED32); color: #142B33; font-weight: 900; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.gtag .i { width: 15px; height: 15px; }
.crew { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); grid-template-areas: "deck talk" "pick pick"; gap: 22px 28px; align-items: center; }
.crew-deck { grid-area: deck; position: relative; height: 470px; perspective: 1300px; outline-offset: 6px; touch-action: pan-y; }
.crew-slot { position: absolute; left: 50%; top: 50%; width: 236px; margin: 0 0 0 -118px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 22px;
  transform: translateY(-50%) translateX(calc(var(--d) * min(11vw, 128px))) translateZ(calc(var(--a) * -150px)) rotateY(calc(var(--d) * -22deg)) scale(calc(1 - var(--a) * 0.12));
  filter: brightness(calc(1 - var(--a) * 0.16)) saturate(calc(1 - var(--a) * 0.12)); transition: transform 0.75s cubic-bezier(.2,.8,.2,1), filter 0.75s, opacity 0.5s; transform-style: preserve-3d; }
.crew-slot[aria-hidden="true"] { opacity: 0; pointer-events: none; }
.crew-slot.on .guide-card { transform: rotateY(calc(var(--tx, 0) * 16deg)) rotateX(calc(var(--ty, 0) * -10deg)); transition: transform 0.25s ease-out; box-shadow: 0 30px 60px rgba(13, 28, 34, 0.45), 0 0 0 6px color-mix(in srgb, var(--gc) 35%, transparent); }
.crew-slot.on img { animation: guidebob 3.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes guidebob { 0%, 100% { transform: scale(1.02) translateY(0); } 50% { transform: scale(1.045) translateY(-6px); } }
.crew-talk { grid-area: talk; display: flex; flex-direction: column; gap: 14px; }
.bubble { position: relative; background: var(--solid); border: 3px solid var(--gc, #B9ED32); border-radius: 22px; padding: 16px 18px; box-shadow: 0 6px 0 color-mix(in srgb, var(--gc, #B9ED32) 55%, transparent); }
.bubble p { margin: 10px 0 0; font-size: 18px; font-weight: 700; color: var(--ink); min-height: 4.8em; }
.crew .bubble::before { content: ""; position: absolute; left: -16px; top: 40px; border: 12px solid transparent; border-right-color: var(--gc, #B9ED32); }
.crew-does { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.crew-does li { display: flex; gap: 10px; align-items: center; font-weight: 700; color: var(--fg); animation: lift 0.5s calc(var(--k) * 0.12s) both cubic-bezier(.2,.8,.2,1); }
.crew-does li::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--gc, #B9ED32); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gc, #B9ED32) 30%, transparent); }
@keyframes lift { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.crew-pick { grid-area: pick; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.crew-pick button { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--solid); border-radius: 14px; padding: 6px 14px 6px 8px; font: inherit; font-weight: 900; color: var(--ink); cursor: pointer; }
.crew-pick button i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--gc); color: #142B33; }
.crew-pick button[aria-selected="true"] { border-color: var(--gc); background: color-mix(in srgb, var(--gc) 22%, var(--solid)); transform: translateY(-2px); }
@media (max-width: 900px) { .crew { grid-template-columns: 1fr; grid-template-areas: "deck" "pick" "talk"; } .crew-deck { height: 400px; } .crew-slot { width: 196px; margin-left: -98px; transform: translateY(-50%) translateX(calc(var(--d) * 22vw)) translateZ(calc(var(--a) * -140px)) rotateY(calc(var(--d) * -20deg)) scale(calc(1 - var(--a) * 0.1)); } .crew .bubble::before { display: none; } }
.solo { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; }
.solo .guide-card { border-width: 4px; }
.solo .bubble p { font-size: 16px; min-height: 0; }
[data-crew-single].enter .guide-card { animation: guidein 0.7s cubic-bezier(.2,.8,.2,1) both; } [data-crew-single].enter .bubble { animation: lift 0.6s 0.15s both; }
@keyframes guidein { from { opacity: 0; transform: translateY(24px) rotate(-4deg) scale(0.92); } to { opacity: 1; transform: none; } }
.hero-guide { position: relative; }
.hero-guide .guide-float { position: absolute; right: -10px; bottom: -36px; width: min(190px, 38%); transform: rotate(4deg); animation: floaty 5s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: rotate(4deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-10px); } }
.story-face { width: 56px; height: 56px; border-radius: 16px; object-fit: cover; object-position: 50% 12%; border: 3px solid var(--gc, #B9ED32); flex: none; }
.storycap { flex-direction: row !important; align-items: flex-start; gap: 12px !important; } .storycap .sc { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .crew-slot, .crew-slot.on img, .hero-guide .guide-float, .crew-does li { animation: none !important; transition: none !important; } }

/* ---- Course Guide Plus: the immersive tee view ---- */
body.course .topnav { background: rgba(13, 28, 34, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.course .flow { display: none; }
.cg { position: relative; height: calc(100svh - var(--header-h)); min-height: 700px; overflow: hidden; background: #0D1C22; color: #F6F5EF; isolation: isolate; }
.cg-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cg-scene.cg-in .cg-cam { animation: camin 1.1s cubic-bezier(.2,.8,.2,1) backwards; transform-origin: 800px 600px; }
.cg-scene.cg-out .cg-cam { transition: opacity 0.28s, transform 0.28s; opacity: 0; transform: scale(1.06); transform-origin: 800px 500px; }
@keyframes camin { from { opacity: 0; transform: scale(0.94) translateY(20px); } to { opacity: 1; transform: none; } }
.cg-clouds { animation: clouds 60s linear infinite alternate; } @keyframes clouds { to { transform: translateX(120px); } }
.cg-birds { animation: birds 22s linear infinite; } @keyframes birds { from { transform: translate(-80px, 210px); } to { transform: translate(1700px, 120px); } }
.cg-sun { animation: sun 6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; } @keyframes sun { to { transform: scale(1.08); } }
.cg-flag { animation: cgflag 1.3s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: left center; } @keyframes cgflag { from { transform: skewY(-8deg) scaleX(1); } to { transform: skewY(6deg) scaleX(0.86); } }
.cg-scene .sway { animation: cgsway 5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; } @keyframes cgsway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
.cg-shimmer { animation: shim 2.4s ease-in-out infinite alternate; } @keyframes shim { from { opacity: 0.35; } to { opacity: 0.9; } }
.cg-label { paint-order: stroke; stroke: #142B33; stroke-width: 3px; }
.cg-hot { cursor: pointer; } .cg-hot .dot { fill: #B9ED32; stroke: #142B33; stroke-width: 3; } .cg-hot .ring { fill: none; stroke: #B9ED32; stroke-width: 3; animation: hotpulse 2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.cg-hot:hover .dot, .cg-hot:focus-visible .dot { fill: #fff; } .cg-hot:focus-visible { outline: none; } .cg-hot:focus-visible .ring { stroke: #35B9EF; stroke-width: 6; }
.cg-hot.hit .dot { fill: #35B9EF; } @keyframes hotpulse { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
.cg-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(13,28,34,0.55) 0, transparent 22%, transparent 62%, rgba(13,28,34,0.75) 100%), radial-gradient(ellipse at center, transparent 55%, rgba(13,28,34,0.45) 100%); }
.cg-top { position: absolute; left: 20px; right: 20px; top: 14px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; z-index: 3; }
.cg-brand { display: flex; align-items: center; gap: 10px; background: rgba(13, 28, 34, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 8px 14px; border-radius: 16px; border: 1px solid rgba(246,245,239,0.15); }
.cg-brand b { display: block; font-size: 18px; } .cg-brand span:not(.plus) { font-size: 13px; color: #D0DDE0; }
.cg-tees { display: flex; gap: 6px; flex-wrap: wrap; }
.cg-tees button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; border-radius: 999px; border: 2px solid rgba(246,245,239,0.25); background: rgba(13, 28, 34, 0.7); color: #F6F5EF; font: inherit; font-weight: 900; cursor: pointer; backdrop-filter: blur(8px); }
.cg-tees button i { width: 14px; height: 14px; border-radius: 50%; background: var(--tc); border: 2px solid #142B33; } .cg-tees small { font-weight: 700; color: #B2C4C9; }
.cg-tees button[aria-pressed="true"] { border-color: #B9ED32; box-shadow: 0 0 0 3px rgba(185, 237, 50, 0.3); }
.cg-left { position: absolute; left: 20px; top: 84px; bottom: 96px; width: min(380px, 32vw); display: flex; flex-direction: column; gap: 12px; z-index: 3; }
.cg-holecard { background: rgba(13, 28, 34, 0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(246,245,239,0.16); border-left: 6px solid #B9ED32; border-radius: 18px; padding: 12px 16px; animation: lift 0.6s both; }
.cg-holeno { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #B9ED32; font-weight: 900; } .cg-holeno b { font-size: 42px; color: #F6F5EF; letter-spacing: 0; margin-left: 4px; vertical-align: -6px; }
.cg-par { font-size: 22px; font-weight: 900; } .cg-par small { font-size: 13px; padding: 2px 8px; border-radius: 999px; background: var(--tc); color: #142B33; vertical-align: 3px; margin-left: 6px; }
.cg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .cg-chips span { background: rgba(246,245,239,0.12); border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 800; }
.cg-chips .sc.under { background: #44D39C; color: #142B33; } .cg-chips .sc.over { background: #FFAB52; color: #142B33; } .cg-chips .sc.even { background: #B9ED32; color: #142B33; }
.cg-desc { flex: 1; min-height: 0; overflow: auto; background: rgba(13, 28, 34, 0.74); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(246,245,239,0.14); border-radius: 18px; padding: 12px 16px; font-size: 15px; color: #D0DDE0; }
.cg-desc summary { font-weight: 900; color: #F6F5EF; cursor: pointer; min-height: 32px; } .cg-desc p { margin: 8px 0; }
.cg-sub { display: block; margin-top: 10px; color: #F6F5EF; } .idot { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #B9ED32; color: #142B33; font-size: 12px; }
.cg-lm { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cg-lm button { min-height: 40px; border-radius: 12px; border: 1px solid rgba(246,245,239,0.25); background: rgba(246,245,239,0.08); color: #F6F5EF; font: inherit; font-size: 13px; font-weight: 800; padding: 6px 10px; cursor: pointer; } .cg-lm button:hover { background: rgba(185,237,50,0.2); }
.cg-desc .small { color: #B2C4C9; }
.cg-right { position: absolute; right: 20px; top: 84px; bottom: 96px; width: 330px; display: flex; flex-direction: column; gap: 10px; z-index: 3; }
.cg-steps { display: flex; flex-direction: column; gap: 8px; } .cg-steps .btn { display: flex; align-items: center; gap: 10px; text-align: left; font-size: 13px; padding: 10px 14px; width: 100%; }
.cg-steps .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #142B33; color: #B9ED32; flex: none; }
.cg-steps .btn.ghost { background: rgba(13, 28, 34, 0.75); color: #F6F5EF; border-color: rgba(246,245,239,0.35); }
.cg-phone { flex: 1; min-height: 0; overflow: auto; border-radius: 34px; } .cg-phone .phone { min-height: 100%; max-width: none; margin: 0; } .cg-phone .phone-body { color: var(--fg); }
.mini-list { margin: 0; padding-left: 18px; font-size: 13.5px; } .big-step b { font-size: 26px; min-width: 34px; } .big-step .smallbtn { min-width: 44px; min-height: 44px; font-size: 20px; }
.cg-bottom { position: absolute; left: 20px; right: 20px; bottom: 14px; display: flex; align-items: center; gap: 8px; z-index: 3; }
.cg-nav { width: 48px; height: 48px; border-radius: 14px; border: 2px solid rgba(246,245,239,0.3); background: rgba(13,28,34,0.75); color: #F6F5EF; font-size: 20px; font-weight: 900; cursor: pointer; flex: none; }
.cg-strip { display: flex; gap: 4px; overflow-x: auto; flex: 1; padding: 4px; background: rgba(13,28,34,0.7); border-radius: 16px; backdrop-filter: blur(8px); scrollbar-width: none; }
.cg-strip button { flex: 1 0 40px; min-width: 40px; height: 44px; border-radius: 11px; border: 0; background: rgba(246,245,239,0.1); color: #F6F5EF; font: inherit; font-weight: 900; cursor: pointer; position: relative; }
.cg-strip button[aria-pressed="true"] { background: #B9ED32; color: #142B33; } .cg-strip button.under::after, .cg-strip button.over::after, .cg-strip button.even::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; }
.cg-strip button.under::after { background: #44D39C; } .cg-strip button.over::after { background: #FFAB52; } .cg-strip button.even::after { background: #F6F5EF; }
.cg-bottom .smallbtn { min-height: 48px; flex: none; } .cg-bottom .smallbtn.ghost { color: #F6F5EF; border-color: rgba(246,245,239,0.4); background: rgba(13,28,34,0.7); }
.cg-mini { width: 150px; height: 93px; border-radius: 12px; border: 2px solid rgba(246,245,239,0.3); flex: none; cursor: pointer; } .mm-hole { cursor: pointer; }
.cg-pop { position: absolute; z-index: 6; background: #F6F5EF; color: #142B33; border-radius: 18px; padding: 14px 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.4); border: 3px solid #B9ED32; animation: lift 0.3s both; }
.cg-pop h3 { color: #142B33; font-size: 19px; margin: 8px 0 4px; } .cg-pop p { margin: 0; font-size: 14.5px; color: #3F565E; } .cg-pop .x { position: absolute; right: 6px; top: 6px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; font-size: 22px; font-weight: 900; cursor: pointer; color: #142B33; }
.cg-yards { position: absolute; left: 50%; top: 84px; transform: translateX(-50%); z-index: 4; background: #B9ED32; color: #142B33; font-weight: 900; font-size: 22px; padding: 6px 18px; border-radius: 999px; box-shadow: 0 6px 0 #99C51F; font-variant-numeric: tabular-nums; }
.card-box { width: min(980px, 100%) !important; background: var(--solid); border-radius: 22px; padding: 20px; } .card-box h3 { font-size: 24px; margin: 4px 0 10px; }
.scorecard { min-width: 860px; font-size: 13px; } .scorecard th, .scorecard td { text-align: center; padding: 6px 4px; border-bottom: 1px solid var(--line); } .scorecard .sum { font-weight: 900; background: var(--accent-soft); }
.scorecard td.birdie { box-shadow: inset 0 0 0 2px #44D39C; border-radius: 50%; font-weight: 900; } .scorecard td.bogey { box-shadow: inset 0 0 0 2px #FFAB52; font-weight: 900; } .scorecard td.par { font-weight: 900; }
/* tablets and phones: the view on top, the panels underneath */
@media (max-width: 1100px) {
  .cg { height: auto; min-height: 0; overflow: visible; display: flex; flex-direction: column; gap: 12px; padding: 0 0 16px; }
  .cg-scene { position: relative; height: 62svh; min-height: 420px; }
  .cg-vignette { height: 62svh; min-height: 420px; }
  .cg-top { top: 10px; left: 12px; right: 12px; } .cg-brand span:not(.plus) { display: none; }
  .cg-left, .cg-right, .cg-bottom { position: static; width: auto; margin: 0 12px; }
  .cg-left { order: 3; } .cg-right { order: 4; } .cg-bottom { order: 2; flex-wrap: wrap; }
  .cg-holecard { position: absolute; left: 12px; top: calc(62svh - 150px); max-width: calc(100% - 24px); } 
  .cg-desc { max-height: none; } .cg-phone { min-height: 560px; }
  .cg-strip { order: -1; flex-basis: 100%; } .cg-mini { display: none; }
  .cg-yards { top: 70px; font-size: 17px; }
}
@media (max-width: 1100px) and (max-height: 520px) { .cg-holecard { position: static; margin: 0 12px; } }
@media (prefers-reduced-motion: reduce) { .cg-scene *, .cg-hot .ring { animation: none !important; } }
.cg-desc details { background: none; border: 0; padding: 0; margin: 0; box-shadow: none; } .cg-desc details summary { color: #F6F5EF; }

.crew-talk { position: relative; z-index: 30; }
.crew-slot.far { opacity: 0; pointer-events: none; }
.phone.locked { background: linear-gradient(170deg, #142B33, #0D1C22); border-color: #142B33; }
.cg-desc p { color: #D0DDE0; }

/* ---- exploded plate ---- */
.explode-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.explode { position: relative; height: 470px; perspective: 1400px; }
.lyr { position: absolute; left: 50%; top: 50%; width: 200px; height: 236px; margin: -118px 0 0 -100px; border-radius: 20px; transform: rotateX(58deg) rotateZ(-38deg) translateZ(calc(var(--i) * -8px)); transition: transform 0.9s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; }
.explode.open .lyr { transform: rotateX(58deg) rotateZ(-38deg) translateZ(calc(120px - var(--i) * 52px)); }
.lyr span { position: absolute; left: 105%; top: 30%; width: 230px; font-size: 13px; font-weight: 800; color: var(--ink); transform: rotateZ(38deg) rotateX(-58deg); transform-origin: left top; opacity: 0; transition: opacity 0.5s 0.4s; }
.explode.open .lyr span { opacity: 1; }
.l1 { background: rgba(214, 240, 255, 0.35); border: 2px solid rgba(255,255,255,0.9); box-shadow: inset 0 0 30px rgba(255,255,255,0.6); }
.l2 { background: #142B33; border: 3px solid #314D56; } .l2 .qrmini { position: absolute; left: 32px; top: 30px; width: 136px; height: 136px; border-radius: 8px; background: #fff repeating-conic-gradient(#142B33 0 25%, #fff 0 50%) 0 0 / 22px 22px; box-shadow: inset 0 0 0 10px #fff; }
.l3 { background: linear-gradient(135deg, #223C44, #142B33); }
.l4 { background: transparent; border: 8px solid #B9ED32; box-shadow: 0 0 26px rgba(185,237,50,0.8), inset 0 0 18px rgba(185,237,50,0.6); }
.l5 { background: transparent; } .l5::before { content: ""; position: absolute; left: 50px; right: 50px; top: 150px; height: 60px; border-radius: 10px; border: 4px solid #35B9EF; background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(53,185,239,0.5) 6px 8px); }
.l6 { background: #748A8F; } .l6::before, .l6::after { content: ""; position: absolute; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(#D0DDE0, #53686D); top: 14px; left: 14px; box-shadow: 138px 0 0 #53686D, 0 174px 0 #53686D, 138px 174px 0 #53686D; }
.specs dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 14px; margin: 18px 0; } .specs dt { font-weight: 900; color: var(--ink); } .specs dd { margin: 0; color: var(--fg); }
@media (max-width: 900px) { .explode-wrap { grid-template-columns: 1fr; } .explode { height: 400px; } .lyr span { width: 150px; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .lyr, .lyr span { transition: none; } }
.cg-h1 { font-size: 18px; color: #F6F5EF; margin: 0; line-height: 1.2; } .cg-brand .cg-h1 + span { display: block; }
.explode { overflow-x: clip; }
.gtag { flex-wrap: wrap; }
@media (max-width: 900px) { .crew-deck { overflow-x: clip; } }
@media (max-width: 480px) { .solo { grid-template-columns: 104px minmax(0, 1fr); gap: 10px; } .solo .bubble { padding: 12px; } }
.lyr span { display: none; }
.layer-legend { counter-reset: ly; list-style: none; padding: 0; margin: 4px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 14px; font-size: 14px; font-weight: 700; color: var(--fg); }
.layer-legend li { counter-increment: ly; display: flex; align-items: center; gap: 8px; } .layer-legend li::before { content: counter(ly); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); font-size: 12px; flex: none; }
.layer-legend i { width: 16px; height: 16px; border-radius: 5px; flex: none; box-sizing: border-box; }

/* ---- scroll environments (home) ---- */
body.home .flow { display: none; }
body.home .band, body.home .band.alt { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.envs { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.8s; --k: 0; }
.envs.live { opacity: 1; }
.envs::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(246, 245, 239, 0.9) 0%, rgba(246, 245, 239, 0.74) 40%, rgba(246, 245, 239, 0.5) 72%, rgba(246, 245, 239, 0.42) 100%); }
.env { position: absolute; inset: 0; opacity: 0; transform: scale(1.08) translateY(18px); transition: opacity 0.9s ease, transform 1.6s cubic-bezier(.2,.8,.2,1); }
.env.on { opacity: 1; transform: none; }
.env svg { width: 100%; height: 100%; display: block; }
.env .ep1 { transform: translateY(calc(var(--k) * -26px)); transition: transform 0.2s linear; } .env .ep2 { transform: translateY(calc(var(--k) * -54px)); transition: transform 0.2s linear; }
.env .twinkle { animation: twinkle 2.4s ease-in-out infinite alternate; } @keyframes twinkle { from { opacity: 0.35; } to { opacity: 1; } }
.env .drifty { animation: clouds 50s linear infinite alternate; }
.env .eflag { animation: cgflag 1.3s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: left center; }
.env .edrive { animation: edrive 26s linear infinite; } @keyframes edrive { from { transform: translateX(-500px); } to { transform: translateX(1900px); } }
.env .edrive2 { animation: edrive2 34s ease-in-out infinite alternate; } @keyframes edrive2 { from { transform: translate(140px, 720px); } to { transform: translate(1380px, 730px); } }
.env .spray { animation: spray 1.6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center bottom; } @keyframes spray { from { transform: scaleY(0.85); opacity: 0.6; } to { transform: scaleY(1.05); opacity: 1; } }
.env .sunglow { animation: sun 5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .env svg { filter: brightness(0.5) saturate(0.85); } :root:not([data-theme="light"]) .envs::after { background: linear-gradient(180deg, rgba(13, 28, 34, 0.92) 0%, rgba(13, 28, 34, 0.78) 40%, rgba(13, 28, 34, 0.55) 75%, rgba(13, 28, 34, 0.45) 100%); } }
:root[data-theme="dark"] .env svg { filter: brightness(0.5) saturate(0.85); }
/* each section arrives like a new place */
section[data-env] > .inner { transition: transform 0.9s cubic-bezier(.2,.8,.2,1), opacity 0.9s; }
.js section[data-env]:not(.entered) > .inner { transform: translateY(40px); opacity: 0.35; }
section[data-env].entered .eyebrow { animation: envtag 0.8s cubic-bezier(.2,.8,.2,1) both; } @keyframes envtag { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
.env-rail { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 25; display: flex; flex-direction: column; gap: 6px; }
.env-rail a { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 30px; text-decoration: none; }
.env-rail a::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: rgba(20, 43, 51, 0.25); border: 2px solid #F6F5EF; box-shadow: 0 0 0 1px rgba(20,43,51,0.3); transition: transform 0.3s, background 0.3s; }
.env-rail a.on::after { background: #B9ED32; transform: scale(1.4); box-shadow: 0 0 0 2px #142B33; }
.env-rail span { font-size: 12px; font-weight: 900; color: #142B33; background: #F6F5EF; padding: 3px 9px; border-radius: 999px; opacity: 0; transform: translateX(6px); transition: opacity 0.25s, transform 0.25s; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.env-rail a:hover span, .env-rail a:focus-visible span, .env-rail a.on span { opacity: 1; transform: none; }
.env-chip { position: fixed; left: 50%; top: calc(var(--header-h) + 10px); transform: translate(-50%, -10px); z-index: 24; background: #142B33; color: #B9ED32; font-weight: 900; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none; }
.env-chip.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 1100px) { .env-chip { display: none; } }
@media (max-width: 1099px) { .env-rail { display: none; } }
@media (prefers-reduced-motion: reduce) { .env, .env * { animation: none !important; transition: opacity 0.3s !important; transform: none !important; } .js section[data-env]:not(.entered) > .inner { transform: none; opacity: 1; } }
body.home .tl { background: var(--glass); border-radius: 18px; padding: 14px 16px; border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body.home .fine, body.home .sub { text-shadow: 0 1px 0 rgba(246,245,239,0.6); }
body.home section[data-env] .fine { color: var(--fg); background: var(--glass); padding: 8px 12px; border-radius: 12px; display: inline-block; }
.ready { display: inline-flex; align-items: center; gap: 6px; background: #B9ED32; color: #142B33; font-weight: 900; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.pitch-phone { max-width: 340px; justify-self: center; width: 100%; }
.pitch-why { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.pitch-why li { background: var(--glass); border: 2px solid var(--line); border-left: 6px solid #B9ED32; border-radius: 16px; padding: 14px 16px; font-weight: 700; color: var(--ink); }

/* ---- ForeSure enclosure (approved design) ---- */
.fs-plate { position: relative; width: min(250px, 58vw); aspect-ratio: 1 / 1.12; background: #142B33; border: 9px solid #B9ED32; border-radius: 28px; padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 8px; color: #F6F5EF; box-shadow: 0 0 0 2px #99C51F, 0 0 26px rgba(185, 237, 50, 0.45), 0 24px 44px rgba(13, 28, 34, 0.45); }
.fs-head { display: flex; align-items: center; gap: 8px; } .fs-head img { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.fs-head b { display: block; font-size: 20px; font-weight: 900; line-height: 1; letter-spacing: -0.01em; } .fs-head span { display: block; font-size: 9.5px; color: #D0DDE0; margin-top: 2px; }
.fs-tile { position: relative; flex: 1; min-height: 0; background: rgba(214, 240, 255, 0.18); border: 2px solid rgba(255, 255, 255, 0.55); border-radius: 12px; padding: 12px; display: grid; place-items: center; box-shadow: inset 0 0 14px rgba(255,255,255,0.25); }
.fs-qr { width: 100%; max-width: 150px; aspect-ratio: 1; background: #fff; border-radius: 4px; padding: 4px; } .fs-qr svg { width: 100%; height: 100%; display: block; }
.sd { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffffff, #b2c4c9 55%, #748a8f); box-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.sd.s1 { left: 5px; top: 5px; } .sd.s2 { right: 5px; top: 5px; } .sd.s3 { left: 5px; bottom: 5px; } .sd.s4 { right: 5px; bottom: 5px; }
.fs-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .fs-tap { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; line-height: 1.15; } .fs-tap svg { color: #B9ED32; flex: none; }
.fs-cart { font-size: 11px; font-weight: 900; color: #B9ED32; white-space: nowrap; }
.fs-by { font-size: 8.5px; font-weight: 800; color: #B9ED32; }
.plate-btn .fs-plate { width: min(236px, 52vw); }
.plate-btn.tapped .fs-plate { animation: platetap 0.7s var(--ease); }
/* product page */
.fs-hero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 22px; align-items: center; }
.fs-render { margin: 0; border-radius: 24px; overflow: hidden; border: 3px solid #B9ED32; box-shadow: var(--shadow); } .fs-render img { display: block; width: 100%; height: auto; } .fs-render figcaption, .fs-board figcaption { font-size: 12.5px; color: var(--muted); padding: 8px 12px; background: var(--solid); }
.fs-cards { grid-template-columns: 1fr !important; }
.fs-board { margin: 0; border-radius: 24px; overflow: hidden; border: 2px solid var(--line); } .fs-board img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .fs-hero { grid-template-columns: 1fr; } }
.fs-build { --g: min(220px, 27vw); background: radial-gradient(ellipse at center, #223C44, #0D1C22); border-radius: 26px; padding: 18px; display: flex; flex-direction: column; gap: 14px; color: #F6F5EF; }
.fs-stage { position: relative; height: 300px; perspective: 1000px; }
.fs-part { position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 26px; transition: transform 0.9s cubic-bezier(.2,.8,.2,1), opacity 0.6s; }
.fs-base { background: linear-gradient(145deg, #3a4a50, #1b262b); border: 3px solid #4b5a60; box-shadow: inset 0 0 0 10px #263238, 0 16px 30px rgba(0,0,0,0.45); }
.fs-base .lip { position: absolute; left: 50%; bottom: -8px; width: 40px; height: 12px; margin-left: -20px; background: #263238; border-radius: 0 0 6px 6px; }
.fs-tilep { width: 128px; height: 128px; margin: -64px 0 0 -64px; border-radius: 12px; background: rgba(214, 240, 255, 0.25); border: 2px solid rgba(255,255,255,0.8); padding: 14px; display: grid; place-items: center; box-shadow: 0 12px 24px rgba(0,0,0,0.35); }
.fs-tilep .fs-qr { max-width: 98px; }
.fs-front { background: #142B33; border: 9px solid #B9ED32; box-shadow: 0 0 22px rgba(185,237,50,0.5); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.fs-front .fs-head b { font-size: 17px; } .fs-front .fs-head span { font-size: 8px; } .fs-front .win { flex: 1; border-radius: 10px; background: rgba(13,28,34,0.6); border: 2px solid rgba(185,237,50,0.4); } .fs-front .fs-tap { font-size: 9.5px; } .fs-front .fs-by { font-size: 7.5px; }
.fs-build[data-step="0"] .fs-front { transform: translateX(calc(var(--g) * -1)) rotateY(14deg); } .fs-build[data-step="0"] .fs-tilep { transform: none; } .fs-build[data-step="0"] .fs-base { transform: translateX(var(--g)) rotateY(-14deg); }
.fs-build[data-step="1"] .fs-front { transform: translateX(calc(var(--g) * -1)) translateY(-10px) rotateY(28deg) rotateZ(-6deg); } .fs-build[data-step="1"] .fs-tilep { transform: translate(0, -96px) scale(0.85); } .fs-build[data-step="1"] .fs-base { transform: none; }
.fs-build[data-step="2"] .fs-front { transform: translateX(calc(var(--g) * -1)) rotateY(20deg); } .fs-build[data-step="2"] .fs-tilep { transform: scale(0.92); } .fs-build[data-step="2"] .fs-base { transform: none; }
.fs-build[data-step="3"] .fs-front { transform: none; } .fs-build[data-step="3"] .fs-tilep { transform: scale(0.92); } .fs-build[data-step="3"] .fs-base { transform: none; }
.fs-tilep { z-index: 2; } .fs-front { z-index: 3; } .fs-build[data-step="3"] .win { background: transparent; }
.snap { position: absolute; left: 50%; top: 12px; transform: translateX(-50%) scale(0.6); background: #B9ED32; color: #142B33; font-weight: 900; padding: 4px 12px; border-radius: 999px; opacity: 0; transition: opacity 0.2s, transform 0.3s; z-index: 5; }
.fs-build[data-step="3"] .snap { opacity: 1; transform: translateX(-50%) scale(1); transition-delay: 0.7s; }
.fs-labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; font-size: 13px; color: #D0DDE0; } .fs-labels b { display: block; color: #F6F5EF; }
.fs-build[data-step="3"] .fs-labels { opacity: 0.5; }
.fs-steps { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.fs-steps button { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 14px 6px 8px; border-radius: 14px; border: 2px solid #314D56; background: #142B33; color: #F6F5EF; font: inherit; font-weight: 900; cursor: pointer; }
.fs-steps button b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #B9ED32; color: #142B33; }
.fs-steps button[aria-pressed="true"] { border-color: #B9ED32; background: #2D4328; } .fs-steps .play { background: #B9ED32; color: #142B33; border-color: #99C51F; padding-left: 14px; }
.fs-cap { text-align: center; margin: 0; color: #D0DDE0; font-weight: 700; min-height: 1.6em; }
@media (max-width: 560px) { .fs-stage { height: 240px; } .fs-part { width: 132px; height: 132px; margin: -66px 0 0 -66px; } .fs-tilep { width: 92px; height: 92px; margin: -46px 0 0 -46px; padding: 9px; } .fs-front .fs-head span, .fs-front .fs-by { display: none; } .fs-labels { font-size: 11.5px; } }
@media (prefers-reduced-motion: reduce) { .fs-part, .snap { transition: none; } }
/* fixes: keep the code inside the clear window, the hint above the plate, and the tile visible once snapped */
.fs-tile { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fs-qr { height: 100%; width: auto; max-width: 100%; max-height: 150px; }
.plate-btn .hint { z-index: 4; bottom: -20px; }
.fs-part.fs-front, .fs-part.fs-base { height: 222px; margin-top: -111px; }
.fs-build[data-step="3"] .fs-tilep { z-index: 4; transform: translateY(2px) scale(0.84); }
@media (max-width: 560px) { .fs-part.fs-front, .fs-part.fs-base { height: 156px; margin-top: -78px; } .fs-build[data-step="3"] .fs-tilep { transform: translateY(2px) scale(0.72); } }

/* ---- ForeSure name: "Fore" in cream or midnight, "Sure" in the green-to-blue gradient ---- */
.wm { font-family: "Nunito", system-ui, sans-serif; font-weight: 900; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.wm b { font-weight: 900; background: linear-gradient(90deg, #58CC02, #35B9EF); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.brand { gap: 10px; text-decoration: none; } .brand-mark { width: 40px; height: 40px; border-radius: 11px; display: block; } .brand .wm { font-size: 26px; color: #F6F5EF; }
@media (max-width: 380px) { .brand .wm { font-size: 22px; } .brand-mark { width: 34px; height: 34px; } }
.footer-logo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 14px; width: auto; } .footer-logo img { width: 56px; height: 56px; border-radius: 14px; }
.footer-logo .wm { font-size: 40px; color: #F6F5EF; } .footer-logo small { font-size: 13px; font-weight: 800; color: #D0DDE0; letter-spacing: 0.02em; }
.plate-brand { display: flex; align-items: center; gap: 6px; } .plate-brand img { width: 18px; height: 18px; border-radius: 5px; } .wm.sm { font-size: 14px; color: #F6F5EF; }
/* the phone: our name first, the club small underneath */
.phone-top .club.fs-wm { font-family: "Nunito", system-ui, sans-serif; font-weight: 900; font-size: 30px; letter-spacing: -0.02em; text-transform: none; color: #F6F5EF; line-height: 1.05; }
.phone-top .club.fs-wm b { font-weight: 900; background: linear-gradient(90deg, #58CC02, #35B9EF); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.phone-top .clubsub { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #D0DDE0; }
.mph .mt { font-family: "Nunito", system-ui, sans-serif !important; font-weight: 900; letter-spacing: 0 !important; text-transform: none !important; }
/* the hero plate: the premium glass plate, with a lime scan line sweeping the code */
.plate .qr .beam { display: block; background: linear-gradient(180deg, transparent, rgba(185, 237, 50, 0.55), transparent); mix-blend-mode: multiply; }
.plate { animation: plateglow 3.2s ease-in-out infinite alternate; }
@keyframes plateglow { from { box-shadow: 0 24px 48px rgba(13, 28, 34, 0.45), inset 0 0 0 2px rgba(185, 237, 50, 0.35), 0 0 18px rgba(185, 237, 50, 0.25); } to { box-shadow: 0 24px 48px rgba(13, 28, 34, 0.45), inset 0 0 0 2px rgba(185, 237, 50, 0.55), 0 0 42px rgba(185, 237, 50, 0.55); } }
@media (prefers-reduced-motion: reduce) { .plate { animation: none; } }

/* ---- pricing tabs ---- */
.ptabs { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h)); z-index: 15; background: rgba(246, 245, 239, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding: 10px max(var(--gutter), env(safe-area-inset-left, 0px)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ptabs { background: rgba(13, 28, 34, 0.94); } } :root[data-theme="dark"] .ptabs { background: rgba(13, 28, 34, 0.94); }
.ptabs .inner { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.ptabs button { flex: none; min-height: 48px; padding: 8px 18px; border-radius: 14px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--solid); color: var(--ink); font: inherit; font-weight: 900; cursor: pointer; transition: transform 0.15s, background 0.2s; }
.ptabs button[aria-selected="true"] { background: #B9ED32; border-color: #99C51F; color: #142B33; transform: translateY(-1px); }
.ptabs:not(.live) { display: none; }
[data-ptab] { scroll-margin-top: calc(var(--header-h) + 80px); }
[data-ptab].ptab-in > .inner { animation: ptabin 0.55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ptabin { from { opacity: 0; transform: translateY(26px) scale(0.985); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) { .ptabs { top: var(--header-h); } .ptabs button { padding: 8px 14px; font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { [data-ptab].ptab-in > .inner { animation: none; } }

/* ---- section motion on every page ---- */
section.band.sx-wait > .inner { opacity: 0.001; transform: translateY(46px) scale(0.98); }
section.band.sx-in > .inner { animation: sxin 0.8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes sxin { from { opacity: 0; transform: translateY(46px) scale(0.98); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
/* the home scenery sections: softer resting state, so nothing reads as missing */
.js section[data-env]:not(.entered) > .inner { transform: translateY(30px); opacity: 0.6; }
/* ---- spacing: anchors clear the header, sections breathe evenly ---- */
html { scroll-padding-top: calc(var(--header-h) + 16px); }
main section[id], main header[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
body.pricing [data-ptab] { scroll-margin-top: calc(var(--header-h) + 84px); }
.builder .total { top: calc(var(--header-h) + 84px); }
.band { padding-block: clamp(56px, 7vw, 88px); }
main > section.band > .inner { row-gap: clamp(18px, 2.4vw, 28px); }
@media (prefers-reduced-motion: reduce) { section.band.sx-wait > .inner { opacity: 1; transform: none; } section.band.sx-in > .inner { animation: none; } }
.ptabs .inner { flex-direction: row !important; flex-wrap: nowrap; align-items: center; }
.ptabs button { width: auto; }
footer.site-footer li { color: #D0DDE0; }

/* Motion layer (js/ui.js, CHfx): hero course light, plate tilt, idle CTA shine, live ping, progress line, page fade */
.fx-motes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.fx-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: linear-gradient(90deg, #8FC71E, #B9ED32, #F3CB5C); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.plate-btn.fx-tilt, .fs-plate.fx-tilt { transform: perspective(900px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg)); transition: transform 0.25s ease-out; transform-style: preserve-3d; }
.cta-row .btn:not(.ghost)::after { animation: fxshine 5.5s ease-in-out 1.5s infinite; }
@keyframes fxshine { 0%, 78% { left: -60%; } 100% { left: 130%; } }
.plate-btn .hint::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #142B33; vertical-align: 1px; color: #142B33; animation: fxping 2s infinite; }
@keyframes fxping { 0% { box-shadow: 0 0 0 0 rgba(20, 43, 51, 0.55); } 80%, 100% { box-shadow: 0 0 0 8px rgba(20, 43, 51, 0); } }
main.fx-pagein { animation: fxpagein 0.5s ease; }
@keyframes fxpagein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fx-motes { display: none; } .cta-row .btn::after, .plate-btn .hint::before, main.fx-pagein { animation: none !important; } .plate-btn.fx-tilt, .fs-plate.fx-tilt { transform: none; } }
.contact-line a { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* Tree bands, everywhere: each band is a treeline on its own strip of ground (build.py trees()).
   In-page bands get a solid backdrop behind the trunks (so moving scenery never shows through) and grass that fades into the next section. */
.trees { background: linear-gradient(to bottom, transparent 30%, color-mix(in srgb, var(--t1) 12%, transparent) 100%); }
main .trees { background: linear-gradient(to bottom, transparent 0%, var(--bg) 58%); z-index: 2; }
main .trees::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 30px; background: linear-gradient(to bottom, color-mix(in srgb, var(--t1) 55%, transparent), transparent); pointer-events: none; }
body > .trees { margin-bottom: -1px; }
.tree { animation-name: swaysoft; }
@keyframes swaysoft { from { transform: rotate(-0.9deg); } to { transform: rotate(0.9deg); } }
.place-shot { display: flex; flex-direction: column; gap: 10px; }
.place-shot .scenic { margin: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 14px 30px rgba(13, 28, 34, 0.18); }
.place-shot p { margin: 0; color: var(--fg); } .place-shot p b { display: block; color: var(--ink); font-size: 1.05rem; }
/* Five department cards: one row on wide screens, no orphan card */
@media (min-width: 1100px) { .steps3.five { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 1099px) { .steps3.five { grid-template-columns: repeat(6, minmax(0, 1fr)); } .steps3.five > * { grid-column: span 2; } .steps3.five > :nth-child(4) { grid-column: 2 / span 2; } }
/* Tree bands keep their drawn scale: sized by the band's height, centred, never stretched by a wide screen (which cropped the treetops) */
.trees { overflow: hidden; }
.trees svg { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; min-width: 100%; transform: translateX(-50%); }
main .trees { height: 116px; }
main .trees svg { bottom: 30px; height: calc(100% - 30px); }
main .trees::after { top: auto; bottom: 0; }
.page-head .trees { background: none; } .page-head .trees svg { bottom: 0; height: 100%; } .page-head .trees::after { display: none; }