/* ==========================================================================
   Gavin Larnard — Retirement & Tax Funnel
   Shared styles: VSL page + confirmation page

   Palette: deep green (trust/money) · yellow (action) · white (clarity)

   Rule that makes this work: YELLOW IS ONLY EVER A CTA.
   Nothing else on either page is yellow. If everything is an accent,
   nothing is — and the button stops being the obvious next move.
   (One exception: the phone callout on the confirmation page. That IS
   the action on that page.)

   Audience skews 35–65+, skeptical: big type, high contrast, calm over hype.
   ========================================================================== */

:root {
  /* Greens — trust, money, "go" */
  --green-deep: #093528;
  --green-dark: #0e4735;
  --green: #1a7f5a;
  --green-bright: #2bb87b;
  --green-tint: #edf7f2;
  --green-line: rgba(43, 184, 123, 0.28);

  /* Yellow — ACTION ONLY */
  --yellow: #ffc93c;
  --yellow-hover: #ffd75e;
  --yellow-deep: #dfa513;
  --yellow-tint: #fff9e6;

  /* Neutrals */
  --white: #ffffff;
  --bg: #f6faf8;
  --border: #e0ebe6;
  --text: #14231d;
  --text-muted: #4f635a;
  --text-light: #7d9189;

  --maxw: 1000px;
  --measure: 68ch;
  --radius: 14px;
  --shadow-sm: 0 1px 3px rgba(9, 53, 40, 0.06);
  --shadow: 0 4px 20px rgba(9, 53, 40, 0.08);
  --shadow-lg: 0 18px 50px rgba(9, 53, 40, 0.28);
  --shadow-btn: 0 4px 0 var(--yellow-deep), 0 12px 26px rgba(223, 165, 19, 0.32);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* 18px base — deliberately larger than typical for an older audience */
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* belt-and-braces against any wide child */
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.22;
  color: var(--green-deep);
  margin: 0 0 0.5em;
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
}

p { margin: 0 0 1em; overflow-wrap: break-word; }
p:last-child { margin-bottom: 0; }
a { color: var(--green); }

/* ---------- Layout ---------- */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 800px; }

.section { padding: 72px 0; }
.section--tint { background: var(--green-tint); }
.section--white { background: var(--white); }

.section h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  text-align: center;
  margin-bottom: 0.6em;
}

.lede {
  text-align: center;
  max-width: 58ch;
  margin: 0 auto 40px;
  color: var(--text-muted);
  font-size: 1.02rem;
}

/* ---------- Top bar ---------- */

.topbar {
  background: var(--green-deep);
  padding: 16px 0;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.topbar .brand {
  font-family: Georgia, serif;
  font-size: 1.02rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background:
    radial-gradient(720px 380px at 50% 0%, #14563f 0%, transparent 70%),
    linear-gradient(180deg, var(--green-dark) 0%, var(--green-deep) 100%);
  color: var(--white);
  padding: 44px 0 64px;
  text-align: center;
  overflow: hidden;
}

/* ---- Audience callout ----
   This is the "we're talking about YOU" line. It has to be the first thing
   the right person sees and recognises themselves in, so it gets real size
   and a hard border — not the small grey kicker it used to be.
   It replaces the old generic "TAXES & RETIREMENT PLANNING" eyebrow, which
   was occupying the most valuable slot on the page and saying nothing. */
.audience-callout {
  display: inline-block;
  max-width: 34ch;
  font-size: clamp(1.05rem, 2.3vw, 1.5rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.005em;
  /* Solid yellow on the dark hero — the loudest element on the page.
     It works here because it sits a full screen above the CTA; they never
     compete in the same eyeful. Don't add a third yellow block between them. */
  color: #2a1e00;
  background: var(--yellow);
  border-radius: 10px;
  padding: 15px 30px;
  margin-bottom: 28px;
  box-shadow: 0 6px 24px rgba(255, 201, 60, 0.28);
}

/* Headline hierarchy is the whole game here.
   Audience callout identifies them; the promise carries the size. */
.hero h1 {
  color: var(--white);
  font-size: clamp(1.85rem, 3.9vw, 2.9rem);
  max-width: 26ch;          /* was 20ch — that forced 7 lines */
  margin: 0 auto 0.6em;
  text-wrap: balance;
}

/* Yellow underline on the payoff phrase.
   text-decoration (not border-bottom) is what makes this wrap cleanly across
   lines — the old border-bottom broke into disjointed segments per line. */
.hero h1 .accent {
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 6px;
  text-underline-offset: 8px;
  text-decoration-skip-ink: none;
}

/* Brighter than before — this audience is 35–65+ and the old muted greens
   were too low-contrast to read comfortably on a phone. */
.hero .sub {
  font-size: clamp(1.02rem, 1.8vw, 1.18rem);
  color: #d2e9de;
  max-width: 56ch;
  margin: 0 auto;
}

/* ---------- Video ---------- */

.video-wrap { max-width: 760px; margin: 34px auto 0; }

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #04150f;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.video-frame iframe,
.video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Clean, intentional-looking placeholder.
   (The old diagonal stripes read as a broken/error state.) */
.video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #79a893;
  text-align: center;
  padding: 24px;
  background: radial-gradient(420px 260px at 50% 45%, #0d3226 0%, #061c14 100%);
}

.video-placeholder .play {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 2px solid var(--green-bright);
  background: rgba(43, 184, 123, 0.12);
  display: grid;
  place-items: center;
  color: var(--green-bright);
  font-size: 1.35rem;
  padding-left: 4px;   /* optically centre the ▶ glyph */
}

.video-placeholder strong {
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9ec9b6;
}

.video-placeholder code {
  font-size: 0.72rem;
  color: #4f7a68;
  max-width: 90%;
}

.video-caption {
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-light);
  margin-top: 16px;
}
.hero .video-caption { color: #a9cfbe; }

/* ---------- Buttons (the only yellow) ---------- */

.cta-block { text-align: center; margin-top: 36px; }

.btn {
  display: inline-block;
  background: var(--yellow);
  color: #2a1e00;              /* dark-on-yellow; white would fail contrast */
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0.005em;
  text-decoration: none;
  padding: 20px 44px;          /* generous tap target — lots of phone traffic */
  border-radius: var(--radius);
  border: 0;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
  max-width: 100%;
}

.btn:hover {
  background: var(--yellow-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--yellow-deep), 0 16px 32px rgba(223, 165, 19, 0.38);
}

.btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--yellow-deep), 0 3px 8px rgba(223, 165, 19, 0.3);
}

.btn:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.section .btn:focus-visible { outline-color: var(--green-deep); }

.btn-note {
  display: block;
  font-size: 0.92rem;
  color: var(--text-muted);
  margin-top: 16px;
}
.hero .btn-note { color: #a9cfbe; }

/* ---------- Testimonials ---------- */

.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
  align-items: stretch;
}

/* Flex column + margin-top:auto on .who keeps attributions aligned to the
   card bottom, so uneven quote lengths stop looking like dead space. */
.testimonial {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}

.testimonial .quote {
  font-size: 0.98rem;
  line-height: 1.6;
  margin-bottom: 18px;
}

.testimonial .who {
  margin-top: auto;
  font-size: 0.84rem;
  color: var(--text-light);
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

/* Square, not 9:16 — a full vertical video made this card ~2x the height of
   its text neighbours and left dead space in the whole row. Vertical footage
   still works: object-fit crops it to the frame. */
.testimonial--video .video-frame {
  aspect-ratio: 1 / 1;
  margin-bottom: 16px;
  box-shadow: none;
}

.testimonial--video .video-frame iframe,
.testimonial--video .video-frame video { object-fit: cover; }

/* Placeholder styling — an unfilled slot must be impossible to ship by accident */
.placeholder {
  border: 2px dashed #b6cfc4;
  background: #fbfdfc;
  color: var(--text-light);
}
.placeholder .who { color: var(--text-light); }

.placeholder-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: var(--green-tint);
  color: var(--green);
  padding: 4px 10px;
  border-radius: 5px;
  margin-bottom: 14px;
}

/* ---------- Success banner (confirmation) ---------- */

.success {
  background:
    radial-gradient(760px 380px at 50% -10%, #2bb87b 0%, transparent 68%),
    linear-gradient(180deg, var(--green) 0%, var(--green-deep) 100%);
  color: var(--white);
  text-align: center;
  padding: 56px 0;
}

.success h1 { color: var(--white); font-size: clamp(1.7rem, 4vw, 2.4rem); max-width: 24ch; margin-inline: auto; }
.success .sub { color: #bce3d2; font-size: 1.05rem; max-width: 52ch; margin: 0 auto; }

/* Progress marker — tells them they're done, not mid-process */
.step-badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  padding: 9px 22px;
  margin-bottom: 22px;
}

.step-badge::before { content: "✓ "; }

.success .tick {
  width: 66px;
  height: 66px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 2px solid rgba(255, 255, 255, 0.5);
  display: grid;
  place-items: center;
  font-size: 1.9rem;
}

/* ---------- FAQ video grid (confirmation) ----------
   Two across, not three — bigger thumbnails so an older audience can
   actually read the question and find the play button.

   flex (not grid) so the 5th box centres on its own row instead of
   stretching full-width or stranding left.                            */

.faq-videos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.faq-video {
  flex: 1 1 400px;
  max-width: 470px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}

.faq-video:hover {
  border-color: var(--green-bright);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.faq-video:focus-visible { outline: 3px solid var(--green-bright); outline-offset: 3px; }

.faq-video .video-frame {
  box-shadow: none;
  border-radius: 8px;
  margin-bottom: 16px;
}

.faq-video:hover .play {
  background: var(--green-bright);
  color: #06251a;
}

.faq-video .play { transition: background 0.14s ease, color 0.14s ease; }

.faq-video h3 {
  font-size: 1.08rem;
  line-height: 1.4;
  margin: 0;
  padding: 0 4px 4px;
  color: var(--green-deep);
}

/* ---------- Lightbox ----------
   Clicking a thumbnail opens the video large and centred, rather than
   playing it in a tile too small to follow.                            */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 21, 15, 0.92);
  backdrop-filter: blur(4px);
}

.lightbox.is-open { display: flex; }

.lightbox-inner {
  width: 100%;
  max-width: 980px;
}

.lightbox-inner .video-frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.lightbox-title {
  color: var(--white);
  font-family: Georgia, serif;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  text-align: center;
  margin: 18px 0 0;
}

.lightbox-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 46px;
  height: 46px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--white);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;
}

.lightbox-close:hover { background: rgba(255, 255, 255, 0.26); }
.lightbox-close:focus-visible { outline: 3px solid var(--green-bright); outline-offset: 2px; }

/* Stop the page scrolling behind an open lightbox */
body.no-scroll { overflow: hidden; }

@media (max-width: 760px) {
  .faq-video { flex: 1 1 100%; max-width: 100%; }
  .lightbox { padding: 16px; }
  .lightbox-close { top: 10px; right: 12px; }
}

/* ---------- Phone callout (confirmation) ---------- */

.callout {
  background: var(--yellow-tint);
  border: 2px solid var(--yellow);
  border-radius: var(--radius);
  padding: 34px;
  text-align: center;
  box-shadow: var(--shadow);
}

.callout h2 { font-size: clamp(1.2rem, 2.4vw, 1.42rem); margin-bottom: 0.5em; }
.callout .rep { font-size: 1rem; color: var(--text-muted); }

.callout .phone {
  font-family: Georgia, serif;
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 700;
  color: var(--green-deep);
  letter-spacing: 0.01em;
  display: block;
  margin: 14px 0;
  text-decoration: none;
  overflow-wrap: break-word;
}
.callout .phone:hover { text-decoration: underline; }

.callout .warn {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #f2e4b4;
  font-size: 0.92rem;
  color: #7d6011;
  max-width: 54ch;
  margin-inline: auto;
}

/* ---------- FAQ ---------- */

.faq { max-width: 720px; margin: 0 auto; }

.faq details {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.12s ease;
}

.faq details[open] { border-color: var(--green-bright); box-shadow: var(--shadow-sm); }

.faq summary {
  padding: 20px 24px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: var(--green-deep);
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--green-tint); }

.faq summary::after {
  content: "+";
  font-size: 1.5rem;
  color: var(--green-bright);
  flex-shrink: 0;
  line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq summary:focus-visible { outline: 3px solid var(--green-bright); outline-offset: -3px; }

.faq .answer {
  padding: 0 24px 22px;
  color: var(--text-muted);
  font-size: 0.96rem;
}

.faq .answer .video-frame { margin-bottom: 18px; box-shadow: var(--shadow); }

/* ==========================================================================
   APPLICATION FORM (apply.html) + BOOKING (book.html)
   Prototype UI — see the warnings in those files. No backend.
   ========================================================================== */

.app-body { background: var(--white); }

.app-main {
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  padding: 48px 0 72px;
}

/* ---------- Progress ---------- */

.progress { height: 5px; background: var(--border); }

.progress-bar {
  height: 100%;
  width: 0;
  background: var(--green-bright);
  transition: width 0.3s ease;
}

/* ---------- Question stage ---------- */

.stage { min-height: 260px; }

.q-count {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 10px;
}

.q-title {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  margin-bottom: 0.35em;
}

.q-help { color: var(--text-muted); font-size: 1rem; margin-bottom: 22px; }

.q-error { color: #b03a2e; font-size: 0.92rem; margin-top: 10px; font-weight: 600; }

/* ---------- Fields ---------- */

.field {
  width: 100%;
  font: inherit;
  font-size: 1.15rem;
  color: var(--text);
  background: var(--white);
  border: 0;
  border-bottom: 2px solid var(--border);
  border-radius: 0;
  padding: 12px 2px;
  outline: none;
  transition: border-color 0.14s ease;
}

.field::placeholder { color: #b3c3bb; }
.field:focus { border-bottom-color: var(--green-bright); }

textarea.field {
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  resize: vertical;
}
textarea.field:focus { border-color: var(--green-bright); }

/* ---------- Options ---------- */

.opts { display: grid; gap: 10px; }

.opt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 1.02rem;
  color: var(--text);
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.opt:hover { border-color: var(--green-bright); background: var(--green-tint); }
.opt:focus-visible { outline: 3px solid var(--green-bright); outline-offset: 2px; }

.opt.is-on {
  border-color: var(--green-bright);
  background: var(--green-tint);
  font-weight: 600;
}

.opt-key {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--green);
  background: var(--green-tint);
  border: 1px solid var(--green-line);
  border-radius: 6px;
}

.opt.is-on .opt-key { background: var(--green-bright); color: #06251a; border-color: var(--green-bright); }

/* ---------- Nav ---------- */

.app-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
}

.btn-ghost {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: 0;
  padding: 12px 6px;
  cursor: pointer;
  border-radius: 8px;
}
.btn-ghost:hover { color: var(--green); }
.btn-ghost:focus-visible { outline: 3px solid var(--green-bright); outline-offset: 2px; }

.app-nav .btn { padding: 15px 38px; font-size: 1.02rem; }

.app-hint { font-size: 0.85rem; color: var(--text-light); margin-top: 14px; }

.app-hint kbd {
  font: inherit;
  font-size: 0.78rem;
  background: var(--green-tint);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
}

/* ---------- Done ---------- */

.done { text-align: center; padding: 40px 0; }

.done-tick {
  width: 66px;
  height: 66px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--green-bright);
  color: #06251a;
  display: grid;
  place-items: center;
  font-size: 1.9rem;
}

/* ---------- Booking ---------- */

.book-head { text-align: center; margin-bottom: 34px; }
.book-head .q-help { margin-bottom: 0; }

.booker {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 24px;
  align-items: start;
}

.cal-panel, .slot-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  font-family: Georgia, serif;
  font-size: 1.1rem;
  color: var(--green-deep);
}

.cal-nav {
  font: inherit;
  font-size: 1.1rem;
  color: var(--green);
  background: var(--green-tint);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 38px;
  height: 38px;
  cursor: pointer;
}
.cal-nav:hover:not(:disabled) { background: var(--green-bright); color: #06251a; }
.cal-nav:disabled { opacity: 0.3; cursor: default; }

.cal-dow, .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.cal-dow {
  margin-bottom: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
  text-align: center;
}

.cal-day {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--green-deep);
  background: var(--green-tint);
  border: 1px solid transparent;
  border-radius: 8px;
  aspect-ratio: 1;
  cursor: pointer;
  transition: background 0.1s ease;
}

.cal-day:hover:not(:disabled) { background: var(--green-bright); color: #06251a; }
.cal-day:focus-visible { outline: 3px solid var(--green-bright); outline-offset: 1px; }

.cal-day.is-off {
  background: none;
  color: #c2cfc9;
  cursor: default;
}

.cal-day.is-on {
  background: var(--green-deep);
  color: var(--white);
}

.cal-tz {
  margin: 16px 0 0;
  font-size: 0.82rem;
  color: var(--text-light);
  text-align: center;
}

.slot-date {
  font-family: Georgia, serif;
  font-size: 1.05rem;
  color: var(--green-deep);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.slots { display: grid; gap: 8px; max-height: 340px; overflow-y: auto; }

.slot-empty { font-size: 0.9rem; color: var(--text-light); }

.slot {
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--green);
  background: var(--white);
  border: 2px solid var(--green-line);
  border-radius: 8px;
  padding: 13px;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}
.slot:hover { background: var(--green-bright); color: #06251a; border-color: var(--green-bright); }
.slot:focus-visible { outline: 3px solid var(--green-bright); outline-offset: 2px; }

.slot-confirm { text-align: center; padding: 10px 0; }
.slot-confirm-date { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 2px; }

.slot-confirm-time {
  font-family: Georgia, serif;
  font-size: 1.7rem;
  color: var(--green-deep);
  margin-bottom: 18px;
}

.slot-confirm .btn { width: 100%; padding: 15px; font-size: 1rem; }
.slot-confirm .btn-ghost { width: 100%; margin-top: 8px; }

/* Impossible to mistake this for a working booker */
.proto-warn {
  margin: 26px auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: 0.85rem;
  color: #8a6a10;
  background: var(--yellow-tint);
  border: 1px dashed var(--yellow-deep);
  border-radius: 8px;
  padding: 12px 16px;
}

@media (max-width: 760px) {
  .booker { grid-template-columns: 1fr; }
  .app-main { min-height: 0; padding: 32px 0 56px; }
  .app-nav .btn { flex: 1; padding: 16px 20px; }
  .slots { max-height: none; }
}

/* ---------- Legal pages (privacy / terms / disclaimer) ---------- */

.legal { max-width: 68ch; }

.legal h2 {
  font-size: 1.15rem;
  margin: 1.8em 0 0.4em;
  padding-top: 1.2em;
  border-top: 1px solid var(--border);
}

.legal h2:first-child { margin-top: 0.8em; }
.legal p { color: var(--text-muted); font-size: 0.98rem; }

/* ---------- Disclaimer / footer ---------- */

.disclaimer {
  background: #eaf3ef;
  border-top: 1px solid var(--border);
  padding: 44px 0;
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--text-light);
}

.disclaimer h3 {
  font-size: 0.78rem;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 1em;
}

.footer {
  background: var(--green-deep);
  color: #85b5a0;
  text-align: center;
  padding: 34px 0;
  font-size: 0.84rem;
}
.footer a { color: #b0d9c6; margin: 0 10px; }

/* ---------- Responsive ---------- */

@media (max-width: 760px) {
  body { font-size: 17px; }
  .wrap { padding: 0 18px; }
  .section { padding: 48px 0; }
  .hero { padding: 36px 0 48px; }
  .btn { width: 100%; padding: 19px 20px; font-size: 1.04rem; }
  .callout { padding: 26px 20px; }
  .audience-callout { padding: 13px 20px; }
}

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