/* BoldLeads.ai — Bold Ideas brand (issue #4).
   Shared tokens, type, controls, floating nav, footer and legal-page styles,
   ported from boldideas-web/prototype/src/optical.css and friends.
   Loaded by index.html, quiz.html, privacy.html and terms.html.

   Element rules are written with :where() so they have zero specificity and
   never outrank Tailwind utilities (index.html) or the quiz embed's own CSS.
   index.html runs Tailwind without preflight, so the box-sizing and border
   resets below stand in for it. */

*, *::before, *::after { box-sizing: border-box; border: 0 solid var(--line); }

@font-face {
  font-family: 'Overused Grotesk';
  src: url('OverusedGrotesk-VF.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f8f3ec;
  --ink: #173438;
  --red: #e8502f;
  --red-text: #bd4024;
  --lavender: #c7a8f2;
  --lavender-text: #735199;
  --muted: #526360;
  --line: #17343832;
  --line-on-ink: rgb(248 243 236 / 24%);
  --line-on-red: rgb(6 30 32 / 27%);
  --nav-surface: #fffdfa;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --button-icon-gap: 10px;
  --content-max: 1920px;
  --content-gutter: clamp(24px, 4vw, 88px);
  --junction-color: var(--red);
  --list-marker-color: var(--red);
}

:where(body) {
  margin: 0;
  font-family: 'Overused Grotesk', sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-width: 320px;
}
::selection { background: var(--lavender); color: var(--ink); }
:where(body) :is(h1, h2, h3, p, figure, dl, dd) { margin: 0; }
:where(body) :is(h1, h2, h3) { font-weight: 350; letter-spacing: -.04em; }
:where(body) h2 { font-size: clamp(42px, 5.15vw, 74px); line-height: 1.04; text-wrap: balance; }
:where(body) h3 { font-size: clamp(25px, 2vw, 32px); line-height: 1.13; letter-spacing: -.025em; font-weight: 450; }
:where(body) p { font-size: 18px; line-height: 1.5; text-wrap: pretty; }
:where(body) a { color: inherit; text-decoration: none; }
:where(body) button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
:where(body) :is(button, a, [tabindex]):focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
:where(body) img { display: block; max-width: 100%; height: auto; }
:where(body) svg { flex-shrink: 0; }
:where(body) button:disabled { opacity: .6; cursor: default; }
:where(body) [id] { scroll-margin-top: 110px; }
:where(body) [hidden] { display: none; }
.muted { color: var(--muted); }

.wrap { width: min(var(--content-max), 100%); margin-inline: auto; padding-inline: var(--content-gutter); box-sizing: border-box; }

/* Colour grounds. Each section picks one junction colour. */
.ground-ink { background: var(--ink); color: var(--paper); --line: var(--line-on-ink); --list-marker-color: currentColor; --muted: #d5dfd9; }
.ground-lavender { background: var(--lavender); color: var(--ink); --line: rgb(23 52 56 / 24%); --list-marker-color: currentColor; --muted: #3f2f5a; }
.ground-red { background: var(--red); color: #061e20; --line: var(--line-on-red); --list-marker-color: currentColor; --muted: #3a1c14; }
.ground-paper { background: var(--paper); color: var(--ink); }

/* Controls */
.primary-link {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--button-icon-gap);
  padding: 17px 22px; min-height: 56px; background: var(--ink); color: var(--paper);
  border-radius: 3px; font-size: 16px; font-weight: 500; line-height: 1.25; white-space: nowrap;
  box-sizing: border-box;
  transition: background-color .22s var(--ease), color .22s var(--ease);
}
.primary-link svg { transition: transform .22s var(--ease); }
.primary-link:hover, .primary-link:focus-visible, .nav-booking:hover, .nav-booking:focus-visible { background: var(--lavender); color: var(--ink); }
.primary-link:hover svg { transform: translate(2px, -2px); }
.primary-link--paper { background: var(--paper); color: var(--ink); }
.text-link { display: inline-flex; align-items: center; gap: var(--button-icon-gap); min-height: 48px; font-size: 16px; font-weight: 500; }
.text-link svg { transition: transform .4s var(--ease); }
.text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.text-link:hover svg { transform: translate(3px, 0); }
.quiet-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.inline-link { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.inline-link:hover { text-decoration-color: currentColor; }

/* Floating navigation */
.skip-link { position: fixed; z-index: 100; top: 10px; left: 16px; background: var(--ink); color: var(--paper); padding: 16px; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.floating-header {
  position: fixed; z-index: 50; left: 50%; top: 20px; transform: translateX(-50%); box-sizing: border-box;
  padding: 7px 7px 7px 18px; background: var(--nav-surface); color: var(--ink); border-radius: 7px;
  box-shadow: 0 5px 24px #1734380c; width: max-content; max-width: calc(100% - 32px);
  transition: width .6s var(--ease), padding .6s var(--ease), top .6s var(--ease), background-color .24s ease, color .24s ease, border-radius .4s ease, box-shadow .4s ease;
}
.floating-header[data-expanded="true"] {
  width: calc(min(100%, var(--content-max)) - 2 * var(--content-gutter)); max-width: none; top: 26px; padding: 7px 0;
  border-radius: 0; background: transparent; box-shadow: none; color: var(--paper);
}
.floating-header.menu-is-open { background: var(--nav-surface); color: var(--ink); }
.nav-row { display: flex; align-items: center; justify-content: flex-start; gap: 32px; min-height: 48px; }
.floating-header[data-expanded="true"] .nav-row { justify-content: space-between; }
.site-logo { flex-shrink: 0; display: block; }
.site-logo img { width: 134px; height: 37px; object-fit: contain; transition: width .6s var(--ease); }
.floating-header[data-expanded="true"] .site-logo img { width: 150px; }
.desktop-nav { display: flex; align-items: center; gap: 23px; }
.desktop-nav a, .desktop-nav button { position: relative; font-size: 15px; line-height: 48px; white-space: nowrap; }
.desktop-nav a::after, .desktop-nav button::after { content: ''; position: absolute; bottom: 8px; left: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.desktop-nav a:hover::after, .desktop-nav button:hover::after { transform: scaleX(1); }
.desktop-nav .nav-booking::after { content: none; }
.nav-booking { display: inline-flex; align-items: center; gap: var(--button-icon-gap); background: var(--red); color: #061e20; min-height: 48px; padding: 12px 16px; border-radius: 3px; font-size: 15px; font-weight: 500; line-height: 1.25; box-sizing: border-box; transition: background-color .22s var(--ease), color .22s var(--ease); }
.menu-toggle { display: none; min-height: 44px; padding: 8px 3px; align-items: center; gap: 9px; font-size: 15px; }
.menu-icon { position: relative; display: block; width: 24px; height: 20px; }
.menu-icon > span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease), opacity .2s ease; }
.menu-icon > span:nth-child(1) { top: 2px; }
.menu-icon > span:nth-child(2) { top: 9px; }
.menu-icon > span:nth-child(3) { top: 16px; }
.menu-is-open .menu-icon > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-is-open .menu-icon > span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.menu-is-open .menu-icon > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav { display: none; padding: 20px 15px 15px 0; }
.mobile-nav a, .mobile-nav button { display: flex; width: 100%; align-items: center; justify-content: flex-start; gap: var(--button-icon-gap); border-top: 1px solid var(--line); padding: 18px 0; font-size: 24px; text-align: left; box-sizing: border-box; }
.mobile-nav .nav-booking { border-top: 0; margin-top: 16px; font-size: 16px; justify-content: center; }
@media (max-width: 899px) {
  .floating-header { width: calc(100% - 24px); top: 12px; max-width: calc(100% - 24px); padding: 7px 12px; }
  .floating-header[data-expanded="true"] { top: 16px; }
  .nav-row { gap: 14px; }
  .site-logo img { width: 127px; height: 36px; }
  .desktop-nav { display: none; }
  .menu-toggle { display: flex; }
  .menu-is-open .mobile-nav { display: block; }
  /* Subpages have two links and no menu: keep them inline, drop "Home" on narrow phones. */
  .floating-header--simple .desktop-nav { display: flex; gap: 14px; }
  .floating-header--simple .nav-row { justify-content: space-between; }
}
@media (max-width: 520px) { .floating-header--simple .site-home { display: none; } }

/* Four-point star marker, hairlines and framed surfaces */
.star { width: 16px; height: 16px; fill: var(--junction-color); }
.brand-list { list-style: none; padding: 0; margin: 0; }
.brand-list > li { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 16px; }
.brand-list > li + li { margin-top: 12px; }
.brand-list .star { fill: var(--list-marker-color); margin-top: .4em; }
.junction { position: absolute; width: 19px; height: 19px; fill: var(--junction-color); z-index: 1; pointer-events: none; }
.junction--tl { left: 0; top: 0; transform: translate(-50%, -50%); }
.junction--tr { right: 0; top: 0; transform: translate(50%, -50%); }
.junction--bl { left: 0; bottom: 0; transform: translate(-50%, 50%); }
.junction--br { right: 0; bottom: 0; transform: translate(50%, 50%); }
.rule-top { border-top: 1px solid var(--line); }
.rule-bottom { border-bottom: 1px solid var(--line); }
.framed { position: relative; border: 1px solid var(--line); }
.eyebrow { font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--muted); }
/* Step numerals (01, 02, 03) above step headings. */
.step-number { display: block; font-size: 30px; line-height: 1; letter-spacing: -.03em; font-weight: 350; font-variant-numeric: tabular-nums; }
.margin-label { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.4; }

/* Disclosures (FAQ) */
.disclosure h3 { font: inherit; letter-spacing: 0; margin: 0; }
.disclosure { border-bottom: 1px solid var(--line); }
.disclosure:first-child { border-top: 1px solid var(--line); }
.disclosure-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; text-align: left; font-size: 22px; line-height: 1.3; letter-spacing: -.02em; }
.disclosure-trigger:is(:hover, :focus-visible) > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.disclosure-icon { width: 22px; height: 22px; transition: transform .3s var(--ease); }
.disclosure.is-open .disclosure-icon { transform: rotate(45deg); }
.disclosure-motion { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.disclosure.is-open .disclosure-motion { grid-template-rows: 1fr; }
.disclosure-motion > div { overflow: hidden; }
.disclosure-content { padding: 0 0 24px; }
.disclosure-content p { max-width: 55ch; color: var(--muted); font-size: 17px; }

/* Hero video frame */
.video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #0d1f22; border-radius: 3px; }
.video-frame iframe { position: absolute; left: -2px; top: 50%; transform: translateY(-50%); width: calc(100% + 4px); height: auto; aspect-ratio: 16 / 9; pointer-events: none; border: 0; }
.video-sound { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; background: var(--paper); color: var(--ink); border-radius: 3px; font-size: 14px; font-weight: 500; transition: background-color .22s var(--ease), color .22s var(--ease); }
.video-sound:hover, .video-sound:focus-visible { background: var(--lavender); color: var(--ink); }

/* Static subpages (quiz, privacy, terms): compact nav from the start, ink footer */
.subpage { min-height: 100vh; display: flex; flex-direction: column; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
.subpage main { flex: 1; padding-top: 104px; }
.site-footer { background: var(--ink); color: var(--paper); --line: var(--line-on-ink); }
.site-footer .footer-main { display: grid; gap: 40px; padding-top: 64px; padding-bottom: 40px; }
.site-footer .footer-logo img { width: 176px; height: auto; }
.site-footer .footer-tagline { margin-top: 24px; max-width: 40ch; font-size: 17px; }
.site-footer nav { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer nav a, .site-footer nav button { min-height: 44px; padding: 6px 0; font-size: 23px; line-height: 1.2; letter-spacing: -.02em; text-align: left; box-sizing: border-box; display: inline-flex; align-items: center; }
.site-footer .footer-utility { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 20px 0; font-size: 13px; }
.site-footer .footer-utility a { min-height: 44px; display: inline-flex; align-items: center; }
.site-footer nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
.site-footer .footer-utility div { display: flex; flex-wrap: wrap; gap: 8px 28px; }
@media (min-width: 768px) {
  .site-footer .footer-main { grid-template-columns: 1.2fr 1fr; }
}

/* Legal pages */
.legal { box-sizing: border-box; max-width: 760px; margin: 0 auto; padding: 56px 24px 112px; font-size: 18px; line-height: 1.5; color: var(--ink); }
.legal h1 { font-size: clamp(42px, 5.15vw, 74px); line-height: 1.04; font-weight: 350; letter-spacing: -.04em; text-wrap: balance; }
.legal .updated { margin: 16px 0 0; font-size: 15px; color: var(--muted); }
.legal h2 { margin: 56px 0 16px; font-size: clamp(25px, 2vw, 32px); line-height: 1.13; font-weight: 450; letter-spacing: -.025em; }
.legal h3 { margin: 32px 0 12px; font-size: 21px; line-height: 1.2; font-weight: 500; letter-spacing: -.02em; }
.legal p { margin: 0 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin: 0 0 8px; }
.legal li::marker { color: var(--red); }
.legal strong { font-weight: 500; }
.legal a { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.legal a:hover { text-decoration-color: currentColor; }
.legal .intro { margin-top: 32px; font-size: 20px; }
.legal .summary { margin: 32px 0 0; padding: 22px 26px; border-radius: 3px; background: var(--paper); border: 1px solid var(--line); }
.legal .summary h2 { margin: 0 0 10px; font-size: 22px; }
.legal .summary p:last-child { margin-bottom: 0; }
@media (max-width: 520px) { .legal { padding-top: 36px; padding-bottom: 72px; } }

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