/* MiniGolf2Hire
   Layout: full-width colour bands (ball white, turf, fairway) with one centred column;
   the chunky outline + hard offset shadow on cards, buttons and big numerals is lifted from the logo's lettering. */
:root {
  --ink: #062A1A;          /* logo outline green: text, borders, hard shadows */
  --fairway: #0B3B24;      /* dark bands */
  --turf: #96C636;         /* logo putting green */
  --turf-pale: #EFF6DB;    /* tinted band */
  --ball: #FBFAF5;         /* golf-ball white: page ground */
  --paper: #FFFFFF;        /* cards */
  --card-cream: #FFFCEB;   /* scorecard stock */
  --sun: #FDBA1E;          /* the yellow "2" */
  --flag: #EA2A1E;         /* flag red */
  --sneaker: #1F5FBF;      /* trainer blue: focus ring */
  --ink-soft: #3C5648;     /* secondary text on light */
  --mint: #CFE6C0;         /* secondary text on fairway */
  --rule: #D9DDCF;         /* hairlines on light */
  --dimple: rgba(6, 42, 26, .05);
  --error: #B4190F;

  --display: "Rubik", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --body: "Figtree", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --pencil: "Caveat", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;

  --radius: 22px;
  --header-h: 68px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ball);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--fairway); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, dl, dd, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sneaker); outline-offset: 3px; border-radius: 6px; }
.fairway :focus-visible, .site-header :focus-visible { outline-color: var(--sun); }

/* Selected text: always a solid block with strong contrast, whatever it sits on */
::selection { background: var(--ink); color: var(--paper); text-shadow: none; }
.fairway ::selection, .site-header ::selection, .sc-head ::selection, .caddie-head ::selection, .btn-ink::selection, .btn-ink ::selection, .legal-head ::selection { background: var(--sun); color: var(--ink); text-shadow: none; }
.sticker-text::selection, .sticker-text ::selection { background: var(--ink); color: var(--sun); -webkit-text-stroke-color: var(--ink); text-shadow: none; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--sun); color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 10px); }

.wrap {
  width: 100%; max-width: 1180px; margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.band { padding-block: clamp(56px, 8vw, 104px); }
.band.turf { background: var(--turf); }
.band.paper { background: var(--ball); }
.band.tint { background: var(--turf-pale); }
.band.fairway { background: var(--fairway); color: var(--paper); }

/* ---------- type ---------- */
h1, h2, h3, .btn, .lockup-text, .pkg-num, .step-ball, .sc-title { font-family: var(--display); }
h1 { font-size: clamp(2.5rem, 5.6vw, 4.5rem); font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.015em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 900; font-style: italic; line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
h3 { font-size: 1.3rem; font-weight: 800; line-height: 1.15; }
.section-head { display: grid; gap: 10px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 44rem; }
.section-head p { font-size: 1.2rem; font-weight: 500; }
.eyebrow { font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.scribble { font-family: var(--pencil); font-weight: 700; font-size: 1.6rem; line-height: 1.1; }

/* the logo's lettering: light fill, thick dark outline, hard drop */
.sticker-text {
  color: var(--sun);
  -webkit-text-stroke: .14em var(--ink);
  paint-order: stroke fill;
  text-shadow: .045em .065em 0 var(--ink);
  letter-spacing: .022em;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .72em 1.35em; min-height: 48px;
  border: 3px solid var(--ink); border-radius: 999px;
  background: var(--paper); color: var(--ink);
  font-weight: 800; font-style: italic; font-size: 1.08rem; line-height: 1.1; text-decoration: none; letter-spacing: .01em;
  box-shadow: 0 5px 0 var(--ink);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn-sun { background: var(--sun); }
.btn-paper { background: var(--paper); }
.btn-ink { background: var(--ink); color: var(--paper); box-shadow: 0 5px 0 var(--turf); border-color: var(--ink); }
.btn-ink:hover { box-shadow: 0 7px 0 var(--turf); }
.btn-ink:active { box-shadow: 0 1px 0 var(--turf); }
.btn-sm { min-height: 42px; padding: .5em 1.05em; font-size: .98rem; box-shadow: 0 4px 0 var(--ink); }
.btn-ink.btn-sm { box-shadow: 0 4px 0 var(--turf); }
.btn-lg { font-size: 1.25rem; padding: .8em 1.7em; min-height: 58px; }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.linkish { background: none; border: 0; padding: 0; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.card { background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 7px 0 var(--ink); }

/* ---------- header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--fairway); color: var(--paper); }
.header-inner { display: flex; align-items: center; gap: 14px; min-height: var(--header-h); }
.lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--paper); margin-right: auto; }
.lockup img { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 0 0 var(--paper)); background: var(--paper); border-radius: 50%; }
.lockup-text { font-weight: 900; font-style: italic; font-size: 1.42rem; letter-spacing: -.01em; white-space: nowrap; }
.lockup-text b { color: var(--sun); font-weight: 900; }
.site-nav { display: flex; gap: 4px; }
.site-nav a { padding: 10px 12px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 1rem; }
.site-nav a:hover { background: rgba(255, 255, 255, .12); }
.header-book { border-color: var(--ink); box-shadow: 0 4px 0 #041C11; }
.menu-btn { display: none; width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); background: transparent; cursor: pointer; place-items: center; }
.menu-bars, .menu-bars::before, .menu-bars::after { display: block; width: 18px; height: 2.5px; border-radius: 2px; background: var(--paper); content: ""; transition: transform .18s ease, opacity .18s ease; }
.menu-bars { position: relative; }
.menu-bars::before { position: absolute; top: -6px; }
.menu-bars::after { position: absolute; top: 6px; }
.menu-btn[aria-expanded="true"] .menu-bars { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-bars::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero {
  position: relative; padding-block: clamp(36px, 6vw, 76px) clamp(110px, 13vw, 170px);
  background-color: var(--ball);
  background-image: radial-gradient(circle, var(--dimple) 0 6px, transparent 7px), radial-gradient(circle, var(--dimple) 0 6px, transparent 7px);
  background-size: 46px 46px; background-position: 0 0, 23px 23px;
  overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 56px); align-items: center; position: relative; z-index: 2; }
.hero-copy { display: grid; gap: 20px; min-width: 0; }
.hero h1 .sticker-text { display: inline; }
.lede { font-size: 1.25rem; max-width: 34rem; color: var(--ink); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 6px; }
.hero-facts li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); font-weight: 600; font-size: .92rem; }
.hero-facts li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--turf); border: 2px solid var(--ink); }
.hero-art { position: relative; min-width: 0; }
.hero-logo { width: 100%; max-width: 600px; margin-inline: auto; animation: bob 5s ease-in-out infinite; filter: drop-shadow(0 14px 0 rgba(6, 42, 26, .08)); }
.hero-note { position: relative; width: fit-content; margin: 6px 4% 0 auto; transform: rotate(-4deg); color: var(--ink); text-align: right; }
.hero-note small { display: block; font-size: 1.15rem; opacity: .75; }
.hill { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(60px, 8.5vw, 120px); z-index: 1; display: block; }
.hill-fill { fill: var(--turf); }
.hill-edge { fill: none; stroke: var(--ink); stroke-width: 7; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-9px) rotate(.6deg); } }

/* ---------- packages ---------- */
.pkg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.pkg { display: grid; grid-template-rows: auto auto auto 1fr auto auto auto; gap: 12px; padding: 22px 20px 20px; min-width: 0; transition: transform .16s ease, box-shadow .16s ease; }
.pkg:hover { transform: translate(-2px, -4px); box-shadow: 9px 12px 0 var(--ink); }
.pkg-num { font-size: 5.2rem; font-weight: 900; font-style: italic; line-height: .9; padding-left: .04em; }
.pkg h3 { font-size: 1.55rem; font-style: italic; font-weight: 900; }
.pkg-nick { display: block; font-family: var(--pencil); font-style: normal; font-weight: 700; font-size: 1.45rem; color: var(--ink-soft); line-height: 1.1; margin-top: 2px; }
.holes { display: grid; grid-template-columns: repeat(6, 18px); gap: 7px; min-height: 43px; align-content: start; }
.holes li { width: 18px; height: 18px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 -4px 0 rgba(150, 198, 54, .55); }
.pkg-blurb { font-size: 1rem; color: var(--ink); }
.pkg-dep { font-size: .98rem; font-weight: 600; color: var(--ink-soft); padding-top: 10px; border-top: 2px dotted var(--rule); }
.pkg-dep strong { color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 1.2rem; margin-left: 2px; }
.pkg-dep s { color: var(--ink-soft); text-decoration-thickness: 2px; margin-left: 2px; }
.special { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin-top: 9px; padding: 4px 13px 4px 4px; background: var(--sun); border: 2.5px solid var(--ink); border-radius: 999px; box-shadow: 0 3px 0 var(--ink); font-family: var(--display); font-weight: 800; font-size: .93rem; line-height: 1.2; color: var(--ink); transform: rotate(-2deg); }
.special img { flex: none; width: 34px; height: 34px; background: var(--paper); border-radius: 50%; border: 2px solid var(--ink); }
.special-line .special { transform: none; border-radius: 22px; margin-top: 12px; }
.avail { font-size: .95rem; font-weight: 700; color: var(--fairway); }
.avail:empty { display: none; }
.avail.is-full { color: var(--error); }
.seg label.is-off { cursor: not-allowed; }
.seg label.is-off span { opacity: .45; text-decoration: line-through; }
.seg label.is-off input { cursor: not-allowed; }
.steps li a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; white-space: nowrap; }
.pkg-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 6px; }
.poa { font-family: var(--display); font-weight: 800; font-size: .95rem; letter-spacing: .08em; padding: 5px 12px; border-radius: 8px; background: var(--sun); border: 2px solid var(--ink); transform: rotate(-3deg); }
.poa-note { margin-top: 30px; font-size: 1.08rem; max-width: 46rem; font-weight: 500; }

.extras { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 56px); align-items: start; margin-top: clamp(38px, 5vw, 60px); padding-top: clamp(30px, 4vw, 44px); border-top: 3px solid var(--ink); }
.included { display: grid; gap: 16px; min-width: 0; }
.included h3, .house-rules h3 { font-size: 1.6rem; font-style: italic; font-weight: 900; }
.included p { font-size: 1.1rem; font-weight: 500; }
.ticks { display: flex; flex-wrap: wrap; gap: 10px; }
.ticks li { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 10px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 999px; font-weight: 700; font-size: 1.05rem; }
.ticks li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.4 3.3L16 8' fill='none' stroke='%2396C636' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.house-rules { background: var(--sun); border: 3px solid var(--ink); border-radius: 6px 22px 6px 22px; box-shadow: 6px 7px 0 var(--ink); padding: 20px 22px 22px; transform: rotate(1.2deg); display: grid; gap: 12px; min-width: 0; }
.house-rules ul { display: grid; gap: 10px; }
.house-rules li { font-size: 1.04rem; line-height: 1.45; }
.house-rules strong { display: block; font-family: var(--display); font-weight: 800; font-size: 1.12rem; }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.steps li { position: relative; display: grid; gap: 10px; align-content: start; min-width: 0; }
.steps li p { color: var(--ink-soft); }
.step-ball {
  position: relative; z-index: 1; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  border: 3px solid var(--ink); background-color: var(--paper);
  background-image: radial-gradient(circle, rgba(6, 42, 26, .09) 0 3px, transparent 3.5px); background-size: 14px 14px; background-position: 3px 3px;
  font-weight: 900; font-style: italic; font-size: 1.7rem; box-shadow: 0 5px 0 var(--ink);
}
.steps li:not(:last-child)::before { content: ""; position: absolute; top: 31px; left: 74px; right: -14px; border-top: 4px dotted var(--turf); }
.step-flag::after { content: ""; position: absolute; right: -30px; top: -14px; width: 30px; height: 20px; background: var(--flag); clip-path: polygon(0 0, 100% 42%, 0 100%); }
.step-flag::before { content: ""; position: absolute; right: 0; top: -16px; width: 3px; height: 30px; background: var(--ink); border-radius: 2px; transform: translateX(3px); }

/* ---------- occasions + where ---------- */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 6vw, 80px); }
.duo > div { display: grid; gap: 16px; align-content: start; min-width: 0; }
.duo-lede { color: var(--mint); font-size: 1.15rem; max-width: 30rem; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.chips li { padding: 8px 16px; border: 2px solid rgba(255, 255, 255, .6); border-radius: 999px; font-weight: 600; }
.chips .chip-sun { background: var(--sun); color: var(--ink); border-color: var(--sun); transform: rotate(-3deg); }
.towns { display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--display); font-weight: 800; font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.25; }
.towns li { display: inline-flex; align-items: center; gap: 10px; }
.towns li::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--turf); }
.towns li:last-child { color: var(--turf); }
.where-note { color: var(--sun); transform: rotate(-2deg); width: fit-content; }

/* ---------- booking ---------- */
.book-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-areas: "form card" "actions card"; gap: 28px 34px; align-items: start; }
.form-card { grid-area: form; padding: clamp(18px, 3vw, 30px); display: grid; gap: 22px; min-width: 0; }
.form-actions { grid-area: actions; display: grid; gap: 12px; justify-items: start; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
.field { display: grid; gap: 7px; align-content: start; min-width: 0; }
.field > label, .field > legend { font-weight: 700; font-size: 1.02rem; padding: 0; }
.field > legend { margin-bottom: 7px; }
.opt { font-weight: 500; font-size: .85rem; color: var(--ink-soft); margin-left: 4px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="date"], .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 11px 14px; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--paper); color: var(--ink); font-size: 1.05rem;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input::placeholder, .field textarea::placeholder { color: #7A8C81; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-offset: 1px; border-radius: 14px; }
.field [aria-invalid="true"] { border-color: var(--error); background: #FFF4F2; }
.hint { font-size: .9rem; color: var(--ink-soft); }
.error { font-size: .93rem; font-weight: 700; color: var(--error); }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; min-height: 46px; padding: 8px 16px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--paper); font-weight: 700; transition: background-color .12s ease, transform .12s ease; }
.seg .seg-help { display: inline-flex; align-items: center; min-height: 46px; padding: 8px 16px; border: 2.5px dashed var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.seg .seg-help span { display: inline; margin-left: .3em; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; }
.seg .seg-help:hover { background: var(--paper); }
.seg .seg-help:focus-visible { outline: 3px solid var(--sneaker); outline-offset: 2px; }
.seg input:checked + span { background: var(--turf); box-shadow: 0 3px 0 var(--ink); transform: translateY(-2px); }
.seg input:focus-visible + span { outline: 3px solid var(--sneaker); outline-offset: 2px; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.small-print { font-size: .93rem; color: var(--ink-soft); max-width: 36rem; }
.small-print a, .faq a, .faq-more a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
.form-status { font-weight: 700; color: var(--error); min-height: 1px; }

.scorecard {
  grid-area: card; position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 22px);
  background: var(--card-cream); border: 3px solid var(--ink); border-radius: 10px; box-shadow: 7px 8px 0 var(--ink);
  padding: 0 0 16px; transform: rotate(1.4deg); min-width: 0;
}
.sc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 18px; background: var(--fairway); color: var(--paper); border-radius: 6px 6px 0 0; }
.sc-title { font-weight: 900; font-style: italic; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .04em; }
.sc-brand { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--turf); }
.sc-rows { padding: 6px 18px 0; }
.sc-rows > div { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); align-items: end; gap: 8px; min-height: 44px; padding-block: 6px 4px; border-bottom: 1.5px solid #CFCBB0; }
.sc-rows dt { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); padding-bottom: 4px; }
.sc-rows dd { font-family: var(--pencil); font-weight: 700; font-size: 1.55rem; line-height: 1.05; color: #23324A; overflow-wrap: anywhere; }
#sc-price, #sc-pay { font-size: 1.32rem; }
.sc-holes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 14px 18px 0; border-left: 1.5px solid var(--ink); border-top: 1.5px solid var(--ink); }
.sc-holes:empty { display: none; }
.sc-holes li { border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); text-align: center; font-size: .78rem; font-weight: 700; padding: 3px 0 20px; font-variant-numeric: tabular-nums; background: var(--paper); }
.sc-foot { margin: 12px 18px 0; font-size: 1.35rem; color: #23324A; }

.sent { max-width: 40rem; padding: 30px; display: grid; gap: 14px; justify-items: start; }
.sent h3 { font-size: 2rem; font-style: italic; font-weight: 900; }
.demo-flag { background: var(--sun); border: 2px dashed var(--ink); border-radius: 12px; padding: 10px 14px; font-weight: 600; font-size: .98rem; }

/* ---------- faq ---------- */
.faq-wrap { max-width: 860px; }
.faq details { border-bottom: 3px solid var(--ink); }
.faq details:first-child { border-top: 3px solid var(--ink); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 2px; cursor: pointer; font-family: var(--display); font-weight: 800; font-size: 1.25rem; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--turf); border: 2.5px solid var(--ink); font-size: 1.5rem; line-height: 1; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--sun); }
.faq details p { padding: 0 54px 20px 2px; max-width: 42rem; color: var(--ink-soft); font-size: 1.08rem; }
.faq-more { margin-top: 26px; font-size: 1.1rem; }

/* ---------- footer ---------- */
.site-footer { padding-block: 52px 110px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) auto auto; gap: 30px 48px; align-items: start; }
.footer-tag { margin-top: 12px; color: var(--mint); max-width: 22rem; }
.footer-mail { margin-top: 10px; font-weight: 700; font-size: 1.08rem; }
.footer-mail a { text-underline-offset: 4px; }
.footer-nav { display: grid; gap: 8px; }
.footer-nav a { text-decoration: none; font-weight: 600; }
.footer-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.insta { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px; border: 2.5px solid var(--paper); border-radius: 18px; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.insta:hover { background: var(--paper); color: var(--ink); }
.insta strong { display: block; font-size: 1.1rem; }
.insta small { display: block; font-size: .85rem; opacity: .8; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: .9rem; color: var(--mint); }

/* ---------- mascot helper ---------- */
.caddie { position: fixed; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 70; display: grid; justify-items: end; gap: 10px; pointer-events: none; }
.caddie > * { pointer-events: auto; }
.caddie-launch { width: 72px; height: 72px; padding: 0; border-radius: 50%; border: 3px solid var(--ink); background: var(--sun); box-shadow: 0 5px 0 var(--ink); cursor: pointer; display: grid; place-items: center; animation: roll-in 1.1s cubic-bezier(.2, .8, .3, 1) .6s both; transition: transform .14s ease, box-shadow .14s ease; }
.caddie-launch img { width: 62px; height: 62px; }
.caddie-launch:hover { transform: translateY(-3px) rotate(-8deg); box-shadow: 0 8px 0 var(--ink); }
.caddie-launch:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.caddie.open .caddie-launch { display: none; }
@keyframes roll-in { from { transform: translateX(160px) rotate(300deg); } to { transform: translateX(0) rotate(0); } }
.caddie-nudge { display: flex; align-items: stretch; background: var(--paper); border: 3px solid var(--ink); border-radius: 18px 18px 4px 18px; box-shadow: 4px 5px 0 var(--ink); animation: pop .35s cubic-bezier(.2, 1.4, .4, 1) both; transform-origin: 100% 100%; max-width: min(270px, calc(100vw - 40px)); }
.nudge-text { border: 0; background: none; padding: 11px 6px 11px 16px; font-weight: 700; font-size: 1.02rem; cursor: pointer; text-align: left; }
.nudge-x { border: 0; background: none; padding: 0 12px 0 6px; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--ink-soft); min-width: 40px; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.caddie-panel { width: min(380px, calc(100vw - 24px)); height: min(590px, calc(100vh - 110px)); height: min(590px, calc(100dvh - 110px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--ball); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 6px 8px 0 var(--ink); overflow: hidden; animation: pop .28s cubic-bezier(.2, 1.2, .4, 1) both; transform-origin: 100% 100%; }
.caddie-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; background: var(--fairway); color: var(--paper); }
.caddie-head img { width: 40px; height: 40px; background: var(--paper); border-radius: 50%; flex: none; }
.caddie-head div { margin-right: auto; min-width: 0; line-height: 1.2; }
.caddie-head strong { display: block; font-family: var(--display); font-weight: 800; font-style: italic; font-size: 1.15rem; }
.caddie-head small { display: block; font-size: .8rem; color: var(--mint); }
.caddie-restart { border: 0; background: none; color: var(--mint); font-size: .85rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px 4px; }
.caddie-close { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); background: none; color: var(--paper); font-size: 1.5rem; line-height: 1; cursor: pointer; flex: none; }
.caddie-log { overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 9px; overscroll-behavior: contain; }
.msg { max-width: 86%; padding: 10px 14px; border-radius: 18px; font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; animation: msg-in .22s ease both; }
.msg.bot { align-self: flex-start; background: var(--paper); border: 2px solid var(--ink); border-bottom-left-radius: 5px; }
.msg.me { align-self: flex-end; background: var(--turf); border: 2px solid var(--ink); border-bottom-right-radius: 5px; font-weight: 600; }
.msg.note { align-self: stretch; max-width: none; background: var(--sun); border: 2px dashed var(--ink); border-radius: 12px; font-size: .92rem; font-weight: 600; }
.msg.summary { display: grid; gap: 2px; }
.msg.summary b { font-weight: 700; }
.typing { display: inline-flex; gap: 5px; align-items: center; min-height: 22px; }
.typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); opacity: .35; animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: .9; transform: translateY(-3px); } }
@keyframes msg-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.caddie-tray { padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 2px solid var(--rule); background: var(--paper); display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; max-height: min(400px, 64dvh); max-height: min(400px, 64vh); max-height: min(400px, 64dvh); overflow-y: auto; }
.caddie-tray:empty { display: none; }
.opt-btn { border: 2.5px solid var(--ink); border-radius: 24px; background: var(--paper); padding: 10px 16px; min-height: 46px; font-weight: 700; font-size: 1rem; line-height: 1.25; text-align: center; cursor: pointer; box-shadow: 0 3px 0 var(--ink); transition: transform .1s ease, box-shadow .1s ease, background-color .1s ease; }
.caddie-tray .opt-btn { flex: 1 1 auto; }
.opt-btn:hover { background: var(--turf); transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.opt-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.opt-btn.quiet { border-style: dashed; box-shadow: none; font-weight: 600; color: var(--ink-soft); }
.ask-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; width: 100%; }
.ask-form input { min-height: 46px; padding: 9px 14px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--paper); font-size: 1.02rem; min-width: 0; width: 100%; }
.ask-form .btn { min-height: 46px; padding: .4em 1.05em; font-size: 1rem; box-shadow: 0 3px 0 var(--ink); }
.ask-form .ask-error { grid-column: 1 / -1; font-size: .88rem; font-weight: 700; color: var(--error); }
.ask-form .opt-btn { grid-column: 1 / -1; justify-self: start; }

/* ---------- legal pages + 404 ---------- */
.legal-head .header-inner { justify-content: space-between; }
.legal-back { color: var(--paper); font-weight: 600; text-underline-offset: 4px; margin-left: auto; }
.legal { padding-block: clamp(36px, 6vw, 72px) clamp(56px, 8vw, 96px); }
.legal .wrap { max-width: 800px; }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 14px; }
.legal .short { font-size: 1.22rem; font-weight: 500; max-width: 40rem; }
.legal .updated { margin-top: 10px; font-size: .92rem; color: var(--ink-soft); }
.draft-flag { margin: 22px 0 0; background: var(--sun); border: 2px dashed var(--ink); border-radius: 12px; padding: 12px 16px; font-weight: 600; font-size: .98rem; }
.legal h2 { font-size: 1.6rem; font-style: italic; font-weight: 900; margin: 44px 0 12px; padding-top: 22px; border-top: 3px solid var(--ink); }
.legal h3 { font-size: 1.12rem; margin: 22px 0 6px; }
.legal p, .legal li { max-width: 42rem; }
.legal p + p, .legal ul + p, .legal p + ul { margin-top: 12px; }
.legal ul { list-style: disc; padding-left: 1.3em; display: grid; gap: 7px; }
.legal a { font-weight: 700; text-underline-offset: 3px; }
.legal .aside { font-family: var(--pencil); font-weight: 700; font-size: 1.45rem; line-height: 1.15; color: var(--ink-soft); margin-top: 10px; }
.legal table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: .98rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1.5px solid var(--rule); }
.legal th { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.table-scroll { overflow-x: auto; }
.pay-card { margin-top: 30px; }
.pay-card .btn-lg { justify-self: start; }
.check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; font-weight: 600; cursor: pointer; }
.check input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--fairway); }
.pay-hello { font-size: 1.2rem; font-weight: 600; }
.pay-summary { display: grid; gap: 0; }
.pay-summary > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1.5px solid var(--rule); align-items: baseline; }
.pay-summary dt { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.pay-summary dd { font-family: var(--display); font-weight: 800; font-size: 1.2rem; }
.pay-card h2 { margin: 0; padding: 0; border: 0; }
.pay-card .btn { justify-self: start; }
.decide-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-deny { border-color: #8A2B22; color: #8A2B22; box-shadow: 0 5px 0 #8A2B22; }
.btn-deny:hover { box-shadow: 0 7px 0 #8A2B22; }
.btn-deny:active { box-shadow: 0 1px 0 #8A2B22; }
@media (max-width: 620px) { .decide-actions .btn { flex: 1 1 100%; } }
.pay-help { margin-top: 26px; font-size: 1.08rem; }
.next-steps { counter-reset: nx; list-style: none !important; padding-left: 0 !important; margin-top: 18px; gap: 14px !important; }
.next-steps li { counter-increment: nx; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 1.1rem; }
.next-steps li::before { content: counter(nx); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--ink); background: var(--turf); font-family: var(--display); font-weight: 900; font-style: italic; }
.lost { min-height: 62vh; display: grid; align-content: center; justify-items: start; gap: 18px; }
.lost img { width: 120px; height: 120px; transform: rotate(-14deg); }

.legal-foot a { color: inherit; text-underline-offset: 3px; }
.legal-foot { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 26px; max-width: 620px; }
  .steps li { grid-template-columns: 62px minmax(0, 1fr); column-gap: 16px; }
  .steps li .step-ball { grid-row: 1 / span 2; }
  .steps li::before { display: none !important; }
  .steps li:not(:last-child)::after { content: ""; position: absolute; left: 29px; top: 70px; bottom: -22px; border-left: 4px dotted var(--turf); }
  .step-flag::after, .step-flag::before { display: none; }
  .extras { grid-template-columns: minmax(0, 1fr); }
  .house-rules { max-width: 520px; }
  .book-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "form" "card" "actions"; }
  .scorecard { position: relative; top: auto; max-width: 460px; transform: rotate(-1deg); }
  .footer-grid { grid-template-columns: minmax(0, 1fr) auto; }
  .insta { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 860px) {
  :root { --header-h: 62px; }
  .menu-btn { display: grid; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--fairway); border-top: 1px solid rgba(255, 255, 255, .18); padding: 8px max(20px, env(safe-area-inset-right, 0px)) 18px max(20px, env(safe-area-inset-left, 0px)); box-shadow: 0 14px 24px rgba(6, 42, 26, .35); }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 14px 6px; font-size: 1.2rem; font-family: var(--display); font-weight: 800; font-style: italic; border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .site-nav a:last-child { border-bottom: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-art { max-width: 520px; margin-inline: auto; width: 100%; }
  .duo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  body { font-size: 1rem; }
  .lockup-text { font-size: 1.18rem; }
  .lockup img { width: 34px; height: 34px; }
  .header-inner { gap: 10px; }
  .pkg-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pkg { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto; column-gap: 16px; align-items: start; }
  .pkg-num { grid-row: 1 / span 2; font-size: 4.2rem; min-width: 1.25em; }
  .pkg .holes, .pkg-blurb, .pkg-dep, .pkg-foot { grid-column: 1 / -1; }
  .pkg h3 { align-self: center; }
  .holes { min-height: 0; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .faq summary { font-size: 1.12rem; }
  .faq details p { padding-right: 8px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .caddie { right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .caddie-panel { height: min(600px, calc(100vh - 90px)); height: min(600px, calc(100dvh - 90px)); }
  .form-actions .btn-lg { width: 100%; }
  .legal-back { display: none; }
}
@media (max-width: 350px) {
  .lockup-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- offers ---- */
.offer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 22px; }
.offer-card { padding: 22px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.offer-card h2 { margin: 0; padding: 0; border: 0; font-size: 2rem; }
.offer-holes { margin: -6px 0 0; font-weight: 600; color: var(--ink-soft); }
.offer-card .btn { justify-self: start; }
.offer-none { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.offer-none p { margin: 0; font-weight: 600; }
@media (max-width: 760px) { .offer-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- prices on the package cards ---- */
.pkg-rate { display: grid; gap: 2px; padding-top: 10px; border-top: 2px dotted var(--rule); }
.pkg-rate-main { font-size: 1.05rem; font-weight: 600; }
.pkg-rate-main strong { font-family: var(--display); font-weight: 900; font-style: italic; font-size: 2.1rem; line-height: 1; margin-right: 4px; }
.pkg-rate-more { font-size: .95rem; color: var(--ink-soft); font-weight: 600; }
.pkg-rate-more strong { color: var(--ink); }
.pkg-rate + .pkg-dep { border-top: 0; padding-top: 0; }