/* Goldie landing v28: the pre-deployment fix pass on v27 (13 Nov 2026). A preview, not the live site.
   No framework. Modern CSS does most of the motion:
   scroll-driven animations, view transitions, popovers with anchor positioning,
   registered properties, container queries and :has(). Each one has a plain fallback. */

/* v28: no page-to-page fade. It was for Home, Reports and Blog; with those tabs hidden for launch it only caused a console error on reload. */
@property --level { syntax: "<number>"; inherits: true; initial-value: 0.16; }
@property --glow { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  /* Sunshine (chosen 13 Nov 2026): sunshine yellow, white, and cobalt as the one pop colour.
     The variable names are kept from v23 so the rules below need no renaming. Read them as:
     --deep / --forest = sunshine yellow, --charcoal = a lighter yellow, --ivory / --paper = near-white and white,
     --gold / --gold-hi / --gold-ink = cobalt, --on-dark = the text colour on yellow (near-black ink). */
  --deep: #ffd60a; --charcoal: #ffe661; --forest: #ffd60a; --ivory: #fffdf4; --paper: #ffffff;
  --ink: #141414; --muted: #5c5a50; --line: rgb(from var(--ink) r g b / 0.13); --on-dark: #141414;
  --gold: #1f3bff; --gold-hi: #1f3bff; --gold-ink: #1f3bff; --on-pop: #ffffff;
  --bad: #a0241b; --good: #07573a; --dial: #141414;
  --aurora-1: rgba(255, 255, 255, 0.6); --aurora-2: rgba(255, 160, 0, 0.35); --aurora-3: rgba(255, 255, 255, 0.4);
  --water-a: #8194ff; --water-b: #1f3bff; --stream: #1f3bff; --plug: #141414; --on-plug: #ffffff;
  /* Soft heavy: Fraunces (variable, with SOFT and WONK dials) for headlines and figures, Figtree for everything else. */
  --serif: "Fraunces", Georgia, serif;
  --sans: "Figtree", -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "Figtree", -apple-system, "Segoe UI", Arial, sans-serif;
  /* Motion: one shared set of timings and curves, used by every transition and entrance on the page.
     Looping ambient motion (the water, the drips, the ringing play button) keeps its own speed. */
  --t-fast: 0.25s; --t-mid: 0.5s; --t-slow: 0.9s; --t-long: 1.6s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);     /* settle: quick start, soft landing */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* a small overshoot, for things that pop in */
  --rise: 32px;                                /* how far every section entrance travels */
  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.018em; margin: 0; text-wrap: balance; }
h1 em, h2 em { font-style: italic; color: var(--gold-hi); }
.sec h2 em { color: var(--gold-ink); }
.forest h2 em, .dark h2 em { color: var(--gold-hi); }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; }
.fine { font-size: 13px; color: var(--muted); }
.dark .fine, .forest .fine { color: rgb(from var(--on-dark) r g b / 0.55); }
.skip { position: absolute; left: -999px; } .skip:focus { left: 12px; top: 12px; z-index: 99; background: #fff; padding: 8px 12px; }

.dark { background: var(--charcoal); color: var(--on-dark); }
.forest { background: var(--forest); color: var(--on-dark); }
.sec { padding: clamp(72px, 10vw, 136px) 0; }

/* Reading progress: scroll-driven, no JavaScript */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; }

/* ---------- Header ---------- */
.top { position: fixed; inset: 12px 0 auto 0; z-index: 50; width: min(var(--wrap), 100% - 24px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 8px 8px 20px; border-radius: 999px; color: var(--on-dark); background: color-mix(in oklab, var(--deep) 72%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border: 1px solid rgb(from var(--on-dark) r g b / 0.12); view-transition-name: top; }
.logo { font-family: var(--serif); font-size: 26px; text-decoration: none; letter-spacing: -0.02em; }
.logo span { color: var(--gold); }
.nav { display: flex; gap: 4px; }
.nav a { text-decoration: none; font-size: 15px; padding: 8px 14px; border-radius: 999px; color: rgb(from var(--on-dark) r g b / 0.82); transition: background var(--t-fast), color var(--t-fast); }
.nav a:hover, .nav a[aria-current] { background: rgb(from var(--on-dark) r g b / 0.1); color: var(--on-dark); }
.top-end { display: flex; align-items: center; gap: 8px; }
.menu-btn { display: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgb(from var(--on-dark) r g b / 0.2); background: none; place-items: center; gap: 5px; flex-direction: column; justify-content: center; }
.menu-btn i { width: 16px; height: 1.5px; background: var(--on-dark); }
.menu { margin: 0; inset: 76px 12px auto auto; border: 1px solid rgb(from var(--on-dark) r g b / 0.14); border-radius: 18px; background: var(--deep); color: var(--on-dark); padding: 10px; min-width: 210px; opacity: 0; translate: 0 -8px; transition: opacity var(--t-fast), translate var(--t-fast) var(--ease), display var(--t-fast) allow-discrete, overlay var(--t-fast) allow-discrete; }
.menu:popover-open { opacity: 1; translate: 0 0; }
@starting-style { .menu:popover-open { opacity: 0; translate: 0 -8px; } }
.menu a { display: block; padding: 12px 14px; border-radius: 10px; text-decoration: none; }
.menu a:hover { background: rgb(from var(--on-dark) r g b / 0.08); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 999px; padding: 14px 24px; font-weight: 600; font-size: 16px; text-decoration: none; transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid), background var(--t-fast); will-change: transform; }
.btn-sm { padding: 10px 18px; font-size: 14.5px; }
.btn-lg { padding: 18px 32px; font-size: 17px; }
.btn-gold { background: var(--gold); color: var(--on-pop); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 10px 30px -12px rgb(from var(--gold) r g b / 0.8); position: relative; isolation: isolate; }
.btn-gold::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1; background: conic-gradient(from var(--glow), transparent 0 70%, rgb(from var(--gold-hi) r g b / 0.95) 80%, transparent 90%); filter: blur(6px); opacity: 0; transition: opacity var(--t-mid); }
.btn-gold:hover { background: var(--gold-hi); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 16px 40px -12px rgb(from var(--gold-hi) r g b / 0.9); }
.btn-gold:hover::before { opacity: 1; animation: spin 3.2s linear infinite; } /* v27: spins only while hovered */
.btn-glass { background: rgb(from var(--on-dark) r g b / 0.07); color: var(--on-dark); border: 1px solid rgb(from var(--on-dark) r g b / 0.22); }
.btn-glass:hover { background: rgb(from var(--on-dark) r g b / 0.14); }
.btn:active { transform: scale(0.97); }
.textlink { display: inline-flex; gap: 8px; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
@keyframes spin { to { --glow: 360deg; } }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--deep); padding: clamp(132px, 17vh, 190px) 0 0; overflow: clip; isolation: isolate; }
.aurora { position: absolute; inset: 0; z-index: -1; background:
    radial-gradient(42% 52% at var(--mx, 72%) var(--my, 28%), var(--aurora-1, rgb(from var(--gold) r g b / 0.22)), transparent 70%),
    radial-gradient(46% 58% at 12% 88%, var(--aurora-2), transparent 70%),
    radial-gradient(30% 40% at 88% 92%, var(--aurora-3, rgb(from var(--gold) r g b / 0.1)), transparent 70%); }
.aurora::after { content: ""; position: absolute; inset: 0; opacity: 0.32; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(from var(--on-dark) r g b / 0.72); margin-bottom: 22px; }
.eyebrow.ink { color: var(--muted); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgb(from var(--gold) r g b / 0.7); animation: ping 2.4s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 9px rgb(from var(--gold) r g b / 0); } 100% { box-shadow: 0 0 0 0 rgb(from var(--gold) r g b / 0); } }
h1 { font-size: clamp(2.7rem, 6.3vw, 5.5rem); line-height: 0.98; }
h1 .w { display: inline-block; opacity: 0; translate: 0 0.5em; filter: blur(6px); animation: rise var(--t-slow) var(--ease) forwards; animation-delay: calc(var(--i) * 70ms + 120ms); }
@keyframes rise { to { opacity: 1; translate: 0 0; filter: blur(0); } }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: rgb(from var(--on-dark) r g b / 0.8); max-width: 34em; margin-top: 26px; }
.lede.ink { color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-copy > .lede, .hero-copy > .actions, .ledger, .proof { animation: fadeup var(--t-slow) var(--ease) both; animation-delay: var(--t-slow); }
.ledger { animation-delay: var(--t-mid); }
.proof { animation-delay: var(--t-slow); }
@keyframes fadeup { from { opacity: 0; translate: 0 18px; } }

.ledger { margin: 0; border-radius: 22px; padding: 18px 20px 14px; background: linear-gradient(180deg, rgb(from var(--on-dark) r g b / 0.09), rgb(from var(--on-dark) r g b / 0.03)); border: 1px solid rgb(from var(--on-dark) r g b / 0.14); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.08) inset; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); rotate: 1.2deg; transition: rotate var(--t-mid) var(--ease); }
.ledger:hover { rotate: 0deg; }
.ledger figcaption { display: flex; justify-content: space-between; align-items: center; color: rgb(from var(--on-dark) r g b / 0.6); padding-bottom: 10px; }
.tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid rgb(from var(--on-dark) r g b / 0.25); transition: all var(--t-mid); }
.ledger.on .tag { background: rgb(from var(--gold) r g b / 0.18); border-color: var(--gold); color: var(--gold-hi); }
.ledger ol { list-style: none; margin: 0; padding: 0; }
.ledger li { display: grid; grid-template-columns: 62px 1fr; column-gap: 12px; padding: 13px 0; border-top: 1px solid rgb(from var(--on-dark) r g b / 0.1); }
.ledger time { font-family: var(--mono); font-size: 12px; color: rgb(from var(--on-dark) r g b / 0.5); padding-top: 4px; grid-row: span 2; }
.ledger b { font-family: var(--serif); font-weight: 400; font-size: 20px; }
.st { display: grid; font-family: var(--mono); font-size: 12.5px; }
.st i, .demo .row i { grid-area: 1 / 1; font-style: normal; transition: opacity var(--t-mid), translate var(--t-mid) var(--ease), filter var(--t-mid); }
.st .was { color: var(--bad); }
.st .now { color: var(--good); opacity: 0; translate: 0 8px; filter: blur(3px); }
.st .now.quiet { color: rgb(from var(--on-dark) r g b / 0.55); }
.ledger li.flip .was { opacity: 0; translate: 0 -8px; filter: blur(3px); }
.ledger li.flip .now { opacity: 1; translate: 0 0; filter: blur(0); }
.ledger .fine { padding-top: 10px; border-top: 1px solid rgb(from var(--on-dark) r g b / 0.1); font-size: 12px; }

.proof { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 34px; padding: 22px 0 26px; margin-top: clamp(48px, 8vh, 96px); border-top: 1px solid rgb(from var(--on-dark) r g b / 0.12); font-size: 14px; color: rgb(from var(--on-dark) r g b / 0.7); }
.proof li::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); margin-right: 10px; vertical-align: 3px; }
.proof b { color: var(--on-dark); font-weight: 600; }

/* ---------- Section headings ---------- */
.sec-head { max-width: 780px; margin-bottom: clamp(36px, 6vw, 72px); }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.7rem); line-height: 1.02; }
h3 { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.06; }

/* ---------- Video slot ---------- */
.watch-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.body { font-family: var(--serif); font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.4; color: color-mix(in oklab, var(--ink) 86%, var(--ivory)); margin-top: 22px; }
.chapters { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chapters li { display: flex; gap: 12px; align-items: baseline; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font-size: 15px; }
.chapters .mono { color: var(--gold-ink); letter-spacing: 0.04em; }
.player { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--deep); box-shadow: 0 50px 90px -50px rgb(from var(--deep) r g b / 0.75); }
.player img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; filter: saturate(0.9) contrast(1.02); scale: 1.04; transition: scale var(--t-slow) var(--ease); }
.player:hover img { scale: 1.08; }
.player::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(from var(--deep) r g b / 0.05) 40%, rgb(from var(--deep) r g b / 0.78)); }
.play { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; z-index: 1; box-shadow: 0 0 0 0 rgb(from var(--gold-hi) r g b / 0.6); animation: ring 2.6s infinite; }
.play svg { width: 30px; fill: var(--on-pop); margin-left: 4px; }
@keyframes ring { 70% { box-shadow: 0 0 0 26px rgb(from var(--gold-hi) r g b / 0); } 100% { box-shadow: 0 0 0 0 rgb(from var(--gold-hi) r g b / 0); } }
.soon { position: absolute; left: 18px; bottom: 16px; z-index: 1; color: rgb(from var(--on-dark) r g b / 0.85); }

/* ---------- The bucket ---------- */
.bucket-sec { padding: clamp(72px, 10vw, 136px) 0 0; position: relative; }
.scrolly { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(24px, 5vw, 80px); }
.pin { position: sticky; top: 92px; height: calc(100svh - 110px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* The bucket drawing itself is styled in the v25 block further down. */

.steps { padding-bottom: 12vh; }
.step { min-height: 88svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; padding: 6vh 0; opacity: 0.32; transition: opacity var(--t-mid); container-type: inline-size; }
.step.on { opacity: 1; }
.kicker { color: var(--bad); display: inline-flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.kicker.gold { color: var(--gold-hi); }
.stat { display: flex; align-items: baseline; gap: 4px; line-height: 1; margin-top: 6px; }
.big { font-family: var(--serif); font-size: clamp(5rem, 11vw, 9rem); letter-spacing: -0.04em; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.unit { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.2rem); color: var(--gold-hi); }
.stat-line { font-size: 1.12rem; max-width: 30em; color: rgb(from var(--on-dark) r g b / 0.88); }
.src { color: rgb(from var(--on-dark) r g b / 0.5); letter-spacing: 0.04em; }
.cite { anchor-name: none; border: 1px solid rgb(from var(--on-dark) r g b / 0.35); background: none; border-radius: 6px; font: 500 11px var(--mono); padding: 1px 6px; margin-left: 2px; color: rgb(from var(--on-dark) r g b / 0.8); }
.cite:hover { border-color: var(--gold-hi); color: var(--gold-hi); }
.plugbox { border-radius: 16px; padding: 18px 20px; background: rgb(from var(--gold) r g b / 0.1); border: 1px solid rgb(from var(--gold) r g b / 0.35); max-width: 34em; }
.plugbox b { color: var(--gold-hi); }
.demo { width: min(100%, 520px); border-radius: 18px; padding: 14px 18px; background: rgb(from var(--on-dark) r g b / 0.05); border: 1px solid rgb(from var(--on-dark) r g b / 0.13); }
.demo-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; color: rgb(from var(--on-dark) r g b / 0.55); }
.switch { display: inline-flex; padding: 3px; border-radius: 999px; background: rgb(from var(--on-dark) r g b / 0.08); }
.switch button { border: 0; background: none; font: 500 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; color: rgb(from var(--on-dark) r g b / 0.6); transition: background var(--t-fast), color var(--t-fast); }
.switch button[aria-pressed="true"] { background: var(--gold); color: var(--on-pop); }
.demo .row { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid rgb(from var(--on-dark) r g b / 0.1); }
.demo .row b { font-family: var(--serif); font-weight: 400; font-size: 19px; }
.demo .row span { display: grid; font-family: var(--mono); font-size: 12.5px; color: rgb(from var(--on-dark) r g b / 0.7); }
.demo .row span:has(i) { grid-template-columns: auto 1fr; column-gap: 6px; }
.demo .row i { grid-area: 1 / 2; }
.demo .row span:not(:has(i)) { display: block; }
.demo .was { color: var(--bad); }
.demo .now { color: var(--good); opacity: 0; translate: 0 8px; }
.demo[data-state="now"] .was { opacity: 0; translate: 0 -8px; }
.demo[data-state="now"] .now { opacity: 1; translate: 0 0; }
.bubble { margin: 4px 0 10px auto; max-width: 320px; padding: 12px 14px; border-radius: 16px 16px 4px 16px; background: var(--forest); border: 1px solid rgb(from var(--on-dark) r g b / 0.12); font-size: 14.5px; opacity: 0; scale: 0.9; transform-origin: 100% 100%; transition: opacity var(--t-mid) var(--t-fast), scale var(--t-mid) var(--t-fast) var(--spring); }
.demo[data-state="now"] .bubble { opacity: 1; scale: 1; }
.demo .fine { padding-top: 10px; border-top: 1px solid rgb(from var(--on-dark) r g b / 0.1); font-size: 12px; }
.tapstep h3 { font-size: clamp(2.4rem, 5vw, 4rem); }

/* Source pop-ups: Popover API, placed beside the button with anchor positioning where supported */
.srcpop { max-width: 300px; border: 1px solid rgba(244, 239, 230, 0.18); border-radius: 14px; background: #0b0d0d; color: #f4efe6; padding: 14px 16px; font-size: 13.5px; line-height: 1.45; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7); opacity: 0; transition: opacity var(--t-fast), display var(--t-fast) allow-discrete, overlay var(--t-fast) allow-discrete; }
.srcpop b { display: block; font: 500 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(244, 239, 230, 0.6); margin-bottom: 4px; }
.srcpop:popover-open { opacity: 1; }
@starting-style { .srcpop:popover-open { opacity: 0; } }
@supports (position-area: top) {
  .srcpop { margin: 8px; inset: auto; position-area: top; position-try-fallbacks: flip-block, flip-inline; }
}

/* ---------- Shelf calculator ---------- */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 28px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 60px 100px -70px rgb(from var(--ink) r g b / 0.5); }
.dials { padding: clamp(24px, 4vw, 48px); display: grid; gap: 26px; align-content: start; position: relative; }
.cur { justify-self: start; display: inline-flex; padding: 3px; border-radius: 999px; background: rgb(from var(--ink) r g b / 0.07); }
.cur button { border: 0; background: none; border-radius: 999px; padding: 6px 14px; font: 500 12px var(--mono); color: var(--muted); transition: background var(--t-fast), color var(--t-fast); }
.cur button[aria-pressed="true"] { background: var(--forest); color: var(--on-dark); }
.dials label { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: baseline; font-size: 15.5px; color: color-mix(in oklab, var(--ink) 82%, var(--ivory)); }
.dials output { font-family: var(--serif); font-size: 26px; color: var(--ink); font-variant-numeric: tabular-nums; }
.dials input[type="range"] { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; outline-offset: 8px; background: linear-gradient(90deg, var(--dial, var(--forest)) var(--p, 20%), rgb(from var(--ink) r g b / 0.14) var(--p, 20%)); }
.dials input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); border: 2px solid var(--dial, var(--forest)); box-shadow: 0 4px 12px rgb(from var(--forest) r g b / 0.3); transition: scale var(--t-fast); }
.dials input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 2px solid var(--dial, var(--forest)); }
.dials input[type="range"]:active::-webkit-slider-thumb { scale: 1.2; }
.result { background: var(--forest); color: var(--on-dark); padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; gap: 8px; }
.spent { font-size: 1.05rem; color: rgb(from var(--on-dark) r g b / 0.82); max-width: 26em; }
.spent b { color: var(--on-dark); }
.dots { display: grid; grid-template-columns: repeat(20, 1fr); gap: 5px; margin: 22px 0 8px; }
.dots i { aspect-ratio: 1; border-radius: 50%; background: rgb(from var(--on-dark) r g b / 0.16); transition: background var(--t-mid), scale var(--t-mid) var(--spring); }
.dots i.g { background: var(--gold-hi); scale: 1.35; box-shadow: 0 0 12px rgb(from var(--gold-hi) r g b / 0.7); }
.dots-key { color: rgb(from var(--on-dark) r g b / 0.55); display: flex; align-items: center; gap: 8px; font-size: 11px; }
.dots-key .k { width: 8px; height: 8px; border-radius: 50%; background: rgb(from var(--on-dark) r g b / 0.25); margin-left: 8px; }
.dots-key .k.g { background: var(--gold-hi); margin-left: 0; }
.patients { margin-top: 22px; font-size: 1.1rem; }
.patients b { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; color: var(--gold-hi); }
.value { font-family: var(--serif); font-size: clamp(3.2rem, 7vw, 5.4rem); line-height: 1; letter-spacing: -0.03em; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.value-line { color: rgb(from var(--on-dark) r g b / 0.85); margin-bottom: 14px; }
.result .fine { color: rgb(from var(--on-dark) r g b / 0.62); }

/* ---------- Meet Ari ---------- */
.ari-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 88px); align-items: center; }
.portrait { margin: 0; position: relative; }
.portrait img { border-radius: 24px; aspect-ratio: 5 / 6; object-fit: cover; object-position: 50% 20%; width: 100%; box-shadow: 0 50px 80px -40px rgba(0, 0, 0, 0.6); }
.portrait::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--gold); border-radius: 24px; z-index: 0; opacity: 0.6; }
.portrait img { position: relative; z-index: 1; }
.portrait figcaption { margin-top: 34px; padding-left: 14px; color: rgb(from var(--on-dark) r g b / 0.6); }
blockquote { margin: 26px 0 0; font-family: var(--serif); font-size: clamp(1.25rem, 2.1vw, 1.7rem); line-height: 1.35; color: rgb(from var(--on-dark) r g b / 0.94); }
.chips { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; border: 1px solid rgb(from var(--on-dark) r g b / 0.25); }
.chips .gold { background: var(--gold); border-color: var(--gold); color: var(--on-pop); }

/* ---------- Reports and blog ---------- */
.library { background: var(--paper); }
.lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 36px); }
.book, .note { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.book .mono, .note .mono { color: var(--gold-ink); margin-top: 14px; }
.book b, .note b { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; line-height: 1.1; }
.desc { color: var(--muted); font-size: 15.5px; }
.cover { display: grid; place-items: center; border-radius: 20px; background: linear-gradient(160deg, color-mix(in oklab, var(--ivory) 92%, var(--ink)), color-mix(in oklab, var(--ivory) 82%, var(--ink))); padding: 12% 18%; perspective: 900px; overflow: hidden; }
.cover img { border-radius: 4px; box-shadow: -14px 22px 34px -12px rgb(from var(--ink) r g b / 0.45); transform: rotateY(-16deg) rotateX(4deg); transition: transform var(--t-slow) var(--ease); }
.book:hover .cover img { transform: rotateY(0) rotateX(0) scale(1.04); }
.note { border-radius: 20px; padding: clamp(22px, 3vw, 34px); background: var(--forest); color: var(--on-dark); justify-content: flex-end; min-height: 320px; }
.note .mono { color: var(--gold-hi); margin-top: 0; }
.note .desc { color: rgb(from var(--on-dark) r g b / 0.75); }
.note .textlink { align-self: flex-start; margin-top: 14px; }

/* ---------- Booking ---------- */
.go { position: relative; isolation: isolate; background: var(--deep); padding: clamp(88px, 12vw, 160px) 0; text-align: center; overflow: clip; }
.go .aurora { --mx: 50%; --my: 20%; }
.go-in { display: grid; justify-items: center; gap: 22px; }
.face { position: relative; width: 84px; height: 84px; }
.face img { border-radius: 50%; border: 2px solid var(--gold); width: 100%; height: 100%; object-fit: cover; }
.face i { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--good); border: 3px solid var(--deep); }
.go h2 { font-size: clamp(2.6rem, 6.4vw, 5rem); }
.steps3 { list-style: none; padding: 0; margin: 8px 0 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(100%, 900px); text-align: left; }
.steps3 li { padding: 20px; border-radius: 18px; border: 1px solid rgb(from var(--on-dark) r g b / 0.14); background: rgb(from var(--on-dark) r g b / 0.04); display: grid; gap: 14px; }
.steps3 .mono { color: var(--gold-hi); }

/* ---------- Footer ---------- */
.foot { padding: 56px 0 44px; border-top: 1px solid rgb(from var(--on-dark) r g b / 0.1); font-size: 14px; color: rgb(from var(--on-dark) r g b / 0.66); }
.foot-in { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 40px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; }
.foot-notes p { margin-bottom: 10px; }
.foot-notes b { color: var(--on-dark); }
.sources { padding-left: 18px; margin: 0 0 14px; display: grid; gap: 6px; font-size: 13px; }

/* ---------- Booking dialog ---------- */
.sheet { border: 0; border-radius: 26px; padding: 0; width: min(460px, 100% - 28px); background: var(--paper); color: var(--ink); box-shadow: 0 60px 120px -30px rgba(0, 0, 0, 0.6); opacity: 0; translate: 0 24px; scale: 0.97; transition: opacity var(--t-mid), translate var(--t-mid) var(--ease), scale var(--t-mid) var(--ease), display var(--t-mid) allow-discrete, overlay var(--t-mid) allow-discrete; }
.sheet[open] { opacity: 1; translate: 0 0; scale: 1; }
@starting-style { .sheet[open] { opacity: 0; translate: 0 24px; scale: 0.97; } }
.sheet::backdrop { background: rgb(from var(--deep) r g b / 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: all var(--t-mid) allow-discrete; }
.sheet[open]::backdrop { background: rgb(from var(--deep) r g b / 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@starting-style { .sheet[open]::backdrop { background: rgb(from var(--deep) r g b / 0); } }
.sheet form { display: grid; gap: 14px; padding: 30px 28px 26px; position: relative; }
.sheet h2 { font-size: 2.2rem; margin-bottom: 6px; }
.sheet .kicker { color: var(--gold-ink); }
.sheet label { display: block; font-size: 14px; font-weight: 600; }
.sheet label input { display: block; width: 100%; margin-top: 6px; }
.sheet small { font-weight: 400; color: var(--muted); }
.sheet input { font: inherit; font-weight: 400; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.sheet input:focus { outline: 0; border-color: var(--forest); box-shadow: 0 0 0 4px rgb(from var(--forest) r g b / 0.14); }
.sheet .btn { justify-content: center; margin-top: 6px; }
.sheet .x { position: absolute; right: 14px; top: 12px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgb(from var(--ink) r g b / 0.06); font-size: 22px; line-height: 1; }

/* ---------- Sub-pages (Reports, Blog) ---------- */
.page-hero { background: var(--deep); color: var(--on-dark); padding: clamp(140px, 20vh, 200px) 0 clamp(56px, 8vw, 96px); position: relative; isolation: isolate; overflow: clip; }
.page-hero h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); }
.empty { border: 1px dashed rgb(from var(--ink) r g b / 0.25); border-radius: 22px; padding: clamp(28px, 5vw, 56px); display: grid; gap: 14px; justify-items: start; background: var(--paper); }
.empty b { font-family: var(--serif); font-weight: 400; font-size: 1.8rem; }
.lib-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }

/* ---------- Text: Soft heavy (folded in from v23's type.css) ----------
   Heavy Fraunces with the SOFT dial turned right up, so it reads like a rounded display serif. */
:is(h1, h2, h3, .big, .unit, .value, blockquote, .body, .logo, .ledger b, .demo .row b, .dials output, .book b, .note b, .empty b, .patients b) { font-variation-settings: "SOFT" 100, "WONK" 0; font-optical-sizing: auto; }
:is(h1, h2, h3) { font-weight: 640; letter-spacing: -0.038em; line-height: 0.97; }
:is(h1, h2) em { font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 600; }
:is(.big, .unit, .value) { font-weight: 700; letter-spacing: -0.055em; }
:is(blockquote, .body) { font-weight: 440; letter-spacing: -0.015em; line-height: 1.3; }
:is(.ledger b, .demo .row b, .dials output, .book b, .note b, .empty b, .patients b) { font-weight: 560; letter-spacing: -0.02em; }
.logo { font-weight: 700; letter-spacing: -0.04em; }
:is(.mono, .eyebrow, .tag, .chips li, .switch button, .cur button, .ledger time, .cite) { font-family: var(--sans); font-weight: 600; letter-spacing: 0.13em; }
:is(.st, .demo .row span) { font-family: var(--sans); letter-spacing: 0.01em; text-transform: none; font-size: 14px; font-weight: 500; }
.btn { font-weight: 700; letter-spacing: -0.005em; }
/* v27: the accent words' "sharp to soft" settle was removed; the trimmed fonts carry only the soft setting. */

/* ---------- Scroll-driven motion (Chrome, Edge, Safari 26+). Without support, everything is simply visible. ---------- */
@supports (animation-timeline: view()) {
  .progress { animation: grow linear both; animation-timeline: scroll(root); }
  @keyframes grow { to { transform: scaleX(1); } }
  /* One entrance for every section: the same distance (--rise), the same blur and the same scroll range. */
  .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  @keyframes reveal { from { opacity: 0; translate: 0 var(--rise); filter: blur(6px); } }
  .lib-grid .reveal:nth-child(2) { animation-range: entry 8% entry 52%; }
  .lib-grid .reveal:nth-child(3) { animation-range: entry 16% entry 62%; }
  .hero-copy { animation: drift linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }
  .hero .ledger { animation: fadeup var(--t-slow) var(--ease) var(--t-mid) both, drift2 linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 80vh; }
  .hero .ari-card { animation: popin var(--t-slow) var(--spring) var(--t-mid) both, drift2 linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 80vh; }
  @keyframes drift { to { translate: 0 -60px; opacity: 0.2; } }
  @keyframes drift2 { to { translate: 0 -120px; } }
  .portrait img { animation: lift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes lift { from { translate: 0 30px; } to { translate: 0 -30px; } }
}

/* ---------- Section 3 on white: the boxes and cards are tuned for a white reading background ---------- */
.plugbox { background: rgb(from var(--gold) r g b / 0.06); border-color: rgb(from var(--gold) r g b / 0.2); }
.plugbox b { color: var(--gold-ink); }
.demo { background: #fff; border-color: var(--line); box-shadow: 0 22px 44px -30px rgb(from var(--ink) r g b / 0.35); }
.switch { background: rgb(from var(--ink) r g b / 0.06); }
.bubble { border-color: rgb(from var(--ink) r g b / 0.08); }

/* Video slot: a dark ink shade under the caption, not a yellow wash over the photo. */
.player { box-shadow: 0 50px 90px -50px rgb(from var(--ink) r g b / 0.55); }
.player::after { background: linear-gradient(180deg, transparent 45%, rgb(from var(--ink) r g b / 0.7)); }
.soon { color: #fff; }

/* Contrast (checked 13 Nov 2026): the faint labels from v23 were too pale on yellow and white, so they are darker here. */
.dark .fine, .forest .fine, .ledger figcaption, .ledger time, .dots-key, .result .fine, .st .now.quiet { color: rgb(from var(--on-dark) r g b / 0.74); }
.ledger.on .tag { background: var(--gold); border-color: var(--gold); color: var(--on-pop); }
.status { color: rgb(from var(--on-dark) r g b / 0.76); }
.src, .demo-top { color: rgb(from var(--ink) r g b / 0.68); }
.steps3 li { background: rgb(255 255 255 / 0.45); border-color: rgb(from var(--ink) r g b / 0.1); }

/* ---------- v24 · The live site's Ari box in the hero, in Sunshine ----------
   Same photo and words as getgoldie.ai. A white card on the yellow, tilted slightly, that pops up after the headline. */
.ari-card { margin: 0; justify-self: end; max-width: 460px; border-radius: 24px; padding: 22px 24px 24px; background: var(--paper); color: var(--ink); border: 1px solid rgb(from var(--ink) r g b / 0.08); box-shadow: 0 40px 80px -36px rgb(from var(--ink) r g b / 0.45), 0 2px 0 rgb(from var(--ink) r g b / 0.04); rotate: 1.2deg; transition: rotate var(--t-mid) var(--ease); animation: popin var(--t-slow) var(--spring) var(--t-mid) both; }
.ari-card:hover { rotate: 0deg; }
@keyframes popin { from { opacity: 0; translate: 0 26px; scale: 0.94; } }
.ari-card figcaption { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.ari-card img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--gold); }
.ari-card figcaption span { display: grid; line-height: 1.25; }
.ari-card b { font-weight: 700; font-size: 16px; }
.ari-card small { font-size: 13.5px; color: var(--muted); }
.ari-card blockquote { margin: 0; color: var(--ink); font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.38; font-weight: 440; letter-spacing: -0.012em; font-variation-settings: "SOFT" 100, "WONK" 0; }

/* ---------- v24 · Meet Ari moves up to section 2 (the live site's credibility section) until the VSL is ready ----------
   The same two photos as the live site: the team photo, with the show photo tucked under its bottom-right corner. */
.duo { margin: 0; position: relative; }
.duo img { border-radius: 22px; object-fit: cover; box-shadow: 0 40px 70px -40px rgb(from var(--ink) r g b / 0.55); }
.duo-a { width: 78%; aspect-ratio: 1179 / 863; }
/* The show photo sits low and to the right, so it only overlaps the team photo's bottom-right corner and never covers Ari (front centre). */
.duo-b { position: relative; display: block; width: 48%; margin: -12% 0 0 auto; aspect-ratio: 3 / 2; border: 6px solid var(--paper); }
.duo::before { content: ""; position: absolute; left: -16px; top: -16px; width: 40%; height: 46%; border-radius: 22px; background: var(--deep); z-index: -1; }
.duo { isolation: isolate; }
.library { background: var(--ivory); }
@media (min-width: 901px) { .ari .ari-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }

/* The trust row under the hero was removed (13 Nov 2026), so the hero needs its own bottom space. */
.hero { padding-bottom: clamp(80px, 12vh, 130px); }

/* ---------- v24 · Yellow as a rhythm ----------
   Yellow for the hero, the bucket's left side and the closing "Explore your options". White and near-white for reading. */
.shelf { background: var(--paper); }
.ari { background: var(--ivory); }
.foot { background: var(--ivory); }
.sheet::backdrop { transition: all var(--t-mid) allow-discrete; }
.sheet[open]::backdrop { background: rgb(from var(--ink) r g b / 0.5); }

/* The big figures gain weight as they count up: app.js sets font-weight from 250 to 700 (reduced motion skips it). */

/* =====================================================================================
   v26 · Section 3: the A1 bucket (flat shapes, navy and sky), the disc's own beat (13 Nov 2026)
   Illustration rules: no outlines, no grey or beige shading, no drop shadows; shadows are a darker shade of what they fall on.
   Cobalt stays out of the drawing (it is for buttons and links); the water is a softer sky blue.
   ===================================================================================== */
:root {
  --r-navy: #1b2a4e;    /* midnight navy, in place of black */
  --r-sky: #6db4ea;     /* the water and the plugs */
  --r-sky-lt: #b9dbf5;  /* the back wave and the puddle: a tint of the water */
  --r-butter: #fff1c1;  /* the soft surfaces */
  --r-amber: #e9a800;   /* shadows on yellow */
  --r-tint: #e3edf9;    /* shadows on white */
}

/* ---------- The closing circle, option A: its own beat ----------
   The section is white. Where scroll-driven animation is supported (desktop, motion welcome), a yellow disc behind the pinned bucket
   fills the screen while the heading is read. Once the bucket pins and the heading has gone, the disc closes to a circle during an
   empty stretch (.beat) with only the bucket on screen, and the lens sweeps. Hole 1's text arrives after the disc has finished, on white.
   Without support, with reduced motion, or on a phone: no beat, and a still disc on white (phones keep the yellow strip). */
.bucket-sec { background: var(--paper); isolation: isolate; overflow: clip; }
.bucket-sec .sec-head, .steps { position: relative; z-index: 1; }
.beat { display: none; position: relative; }
.beat-mark { position: absolute; left: 0; top: 100svh; width: 1px; height: 1px; }
@media (min-width: 901px) {
  .pin::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(100%, 500px); aspect-ratio: 1; border-radius: 50%; translate: -50% -45%; background: var(--deep); } /* nudged down so the counter dots sit inside it */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .beat { display: block; height: calc(100svh + 300px); }
      .scrolly { view-timeline: --scrolly block; }
      /* v27: the yellow starts closing as soon as the heading has scrolled away (the steps' top 80px below the top of the screen)
         and finishes 360px later; the beat is 180px shorter than in v26. */
      .pin::before { animation: sun-set linear both; animation-timeline: --scrolly; animation-range: entry calc(100% - 80px) contain 280px; }
      @keyframes sun-set { from { scale: 9; } to { scale: 1; } }
    }
  }
}

/* ---------- Section 3 spacing (from v25), with waiting steps at 70% ---------- */
/* Waiting steps: the headline, figure, body line and box drop to 70%. The small grey labels (sources, citation buttons,
   the before-and-after card) are already quiet by colour, so they stay at full strength and keep 4.5:1. */
.step { min-height: 0; padding: 2vh 0; gap: 12px; opacity: 1; }
.step > * { transition: opacity var(--t-mid); }
.step:not(.on) > :not(.src):not(.demo) { opacity: 0.7; }
.tapstep { min-height: 38svh; }
.step .big { font-size: clamp(4rem, 7.4vw, 6.4rem); }
.step .unit { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.step .demo { padding: 10px 16px; }
.step .demo .row { padding: 9px 0; }
.bucket-sec { padding-top: clamp(64px, 8vw, 104px); }
.bucket-sec .sec-head { margin-bottom: clamp(24px, 4vw, 48px); }
.steps { padding-bottom: 16vh; } /* room after "The tap", so the full bucket stays pinned while you read it */

/* ---------- Supporting pieces in the A1 colours ---------- */
.steps .kicker, .steps .kicker.gold { color: var(--r-navy); }
.step .plugbox { padding: 14px 18px; background: var(--r-butter); border: 0; }
.step .plugbox b { color: var(--r-navy); }

/* ---------- The bucket ---------- */
@property --lx { syntax: "<number>"; inherits: true; initial-value: 200; }
@property --ly { syntax: "<number>"; inherits: true; initial-value: 299; }
.bucket { width: min(100%, 470px); max-height: calc(100% - 40px); overflow: visible; transition: --lx var(--t-slow) var(--ease), --ly var(--t-slow) var(--ease); }
/* v27: on desktop the bucket's box hugs the bucket, so the bucket sits straight under the heading instead of in the middle
   of a screen-high box; once it reaches the middle of the screen it pins there. --bk keeps it inside short screens. */
@media (min-width: 901px) {
  .scrolly { --bk: min(470px, calc(100svh - 230px)); }
  .pin { height: auto; align-self: start; top: max(88px, calc(50svh - var(--bk) / 2 + 25px)); padding-bottom: 6px; }
  .bucket { width: min(100%, var(--bk)); max-height: none; }
}
.bk-shadow { fill: var(--r-amber); }
.bk-body { fill: var(--r-butter); }
.bk-facet { fill: var(--r-amber); opacity: 0.22; }   /* the shaded side: a darker butter */
.bk-rim { fill: var(--r-navy); }
.bk-mouth { fill: var(--r-butter); transition: fill var(--t-slow) var(--ease); }
.bucket.done .bk-mouth { fill: var(--r-sky); }
.spout { fill: none; stroke: var(--r-navy); stroke-width: 12; stroke-linecap: round; }
.pour { fill: none; stroke: var(--r-sky); stroke-width: 4; stroke-linecap: round; transition: stroke-width var(--t-slow) var(--ease); }
.bucket.done .pour { stroke-width: 11; }

/* Water: two layered waves. The level rises as holes are plugged and reaches the brim when all five are. */
.water { transform: translateY(calc(300px - var(--level) * 180px)); transition: --level var(--t-slow) var(--ease); }
.slosh { transform-box: fill-box; transform-origin: 50% 0; }
.slosh.go { animation: slosh var(--t-slow) var(--ease); }
@keyframes slosh { 25% { rotate: 3deg; } 55% { rotate: -2deg; } 80% { rotate: 0.8deg; } }
.wave-back { fill: var(--r-sky-lt); animation: wave100 5.2s linear infinite reverse; }
.wave-front { fill: var(--r-sky); animation: wave100 3.4s linear infinite; }
@keyframes wave100 { to { transform: translateX(100px); } }

/* Leaks, unchanged from v25 except the colour: a tapered stream, a falling drop and a ripple in the puddle. */
.puddle { fill: var(--r-sky-lt); transform-box: fill-box; transform-origin: center; scale: var(--leak, 1) 1; transition: scale var(--t-slow) var(--ease); }
.leak { transition: opacity var(--t-mid) var(--ease); }
.stream { fill: var(--r-sky); opacity: 0.85; transition: opacity var(--t-mid); }
.hole.active .stream { opacity: 1; }
.drip { fill: var(--r-sky); animation: drip 0.9s ease-in infinite; }
.ripple { fill: none; stroke: var(--r-sky); stroke-width: 1.3; transform-box: fill-box; transform-origin: center; animation: ripple 0.9s ease-out infinite; }
@keyframes drip { from { translate: 0 -6px; opacity: 0; } 25% { opacity: 1; } to { translate: 0 14px; opacity: 0; } }
@keyframes ripple { 0%, 70% { scale: 0.15; opacity: 0; } 75% { opacity: 0.9; } to { scale: 1; opacity: 0; } }
.hole[data-h="1"] :is(.drip, .ripple) { animation-delay: -0.2s; }
.hole[data-h="2"] :is(.drip, .ripple) { animation-delay: -0.45s; }
.hole[data-h="3"] :is(.drip, .ripple) { animation-delay: -0.65s; }
.hole[data-h="4"] :is(.drip, .ripple) { animation-delay: -0.3s; }
.hole.plugged .leak { opacity: 0; }

/* Holes and plugs: a navy hole with a butter number; the sky plug pops in with a small overshoot and a navy tick replaces the number. */
.gap { fill: var(--r-navy); }
.hole text { font-family: var(--sans); font-weight: 700; fill: var(--r-butter); text-anchor: middle; pointer-events: none; transition: opacity var(--t-fast); }
.plug { fill: var(--r-sky); scale: 0; transform-box: fill-box; transform-origin: center; transition: scale var(--t-mid) var(--spring); }
.tick { fill: none; stroke: var(--r-navy); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset var(--t-mid) var(--ease) var(--t-fast); }
.hole.plugged .plug { scale: 1; }
.hole.plugged .tick { stroke-dashoffset: 0; }
.hole.plugged text { opacity: 0; }

/* ---------- The look-closer lens: a thin navy ring, no sheen ---------- */
.lens { transform: translate(calc(var(--lx) * 1px), calc(var(--ly) * 1px)); }
.lens-zoom { transform: scale(1.8) translate(calc(var(--lx) * -1px), calc(var(--ly) * -1px)); }
.lens-bg { fill: var(--deep); }
.lens-ring { fill: none; stroke: var(--r-navy); stroke-width: 2.5; }
.lens-handle { stroke: var(--r-navy); stroke-width: 4.5; stroke-linecap: round; }
.lens-lift { transition: opacity var(--t-mid) var(--ease), translate var(--t-slow) var(--ease); }
.bucket:not(.swept) .lens-lift, .bucket.done .lens-lift { opacity: 0; }
.bucket.done .lens-lift { translate: 24px -60px; }
/* Once, during the beat: the lens sweeps across the bucket, then settles on hole 1. */
.bucket.sweep { animation: sweep var(--t-long) var(--ease); }
@keyframes sweep { 0% { --lx: 130; --ly: 196; } 45% { --lx: 276; --ly: 226; } 100% { --lx: 200; --ly: 299; } }

/* v27: the waves, drips and ripples pause while section 3 is off screen */
.bucket.paused, .bucket.paused * { animation-play-state: paused !important; }

/* ---------- The counter: five dots that fill (the words are still there for screen readers) ---------- */
.pips { display: flex; gap: 10px; margin-top: 14px; }
.pips i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--r-navy); scale: 0.9; transition: background var(--t-fast), scale var(--t-mid) var(--spring); }
.pips i.on { background: var(--r-sky); scale: 1.15; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- The menu shows where you are ---------- */
.nav a[aria-current] { background: var(--paper); color: var(--ink); }

/* =====================================================================================
   v28 · pre-deployment fix pass (13 Nov 2026)
   ===================================================================================== */

/* ---------- One spacing system: one section padding and one heading gap, desktop and phone ---------- */
:root { --sec-pad: clamp(72px, 9vw, 120px); --head-gap: clamp(32px, 4.5vw, 56px); }
.sec { padding: var(--sec-pad) 0; }
.hero { padding-bottom: var(--sec-pad); }
.bucket-sec { padding-top: var(--sec-pad); }
.go { padding: var(--sec-pad) 0; }
.sec-head { margin-bottom: var(--head-gap); }
/* Deliberate exception: the bucket's heading keeps a tighter gap so the bucket sits right under it (v27). */
.bucket-sec .sec-head { margin-bottom: clamp(24px, 4vw, 48px); }
/* Reading sections are all white, with a hairline between the bucket and the calculator. */
.ari, .shelf, .library, .foot { background: var(--paper); }
.shelf { border-top: 1px solid var(--line); }

/* ---------- Hero: headline, lede and both buttons fully in view within a second; no delay on the main button ---------- */
h1 .w { animation-duration: var(--t-mid); animation-delay: calc(var(--i) * 40ms); }
.hero-copy > .lede { animation: fadeup var(--t-mid) var(--ease) 0.2s both; }
.hero-copy > .actions { animation: none; }

/* ---------- Booking form ---------- */
.sheet input { font-size: max(16px, 1rem); }          /* 16px or more, so iPhones do not zoom in */
.sheet input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgb(from var(--gold) r g b / 0.18); }   /* cobalt, not yellow */
.sheet .x { width: 46px; height: 46px; right: 10px; top: 8px; }
html.locked { overflow: hidden; }                     /* the page behind the open form does not scroll */

/* ---------- Laptop height (about 720px tall): every step fits below the menu bar ---------- */
@media (min-width: 901px) and (max-height: 820px) {
  .step { gap: 8px; }
  .step h3 { font-size: clamp(1.6rem, 4.6vh, 2.3rem); }
  .step .big { font-size: clamp(3.2rem, 9vh, 4.6rem); }
  .step .unit { font-size: clamp(1.5rem, 4vh, 2rem); }
  .step .stat-line { font-size: 1rem; }
  .step .plugbox { padding: 10px 14px; font-size: 15px; }
  .step .demo { padding: 8px 14px; }
  .step .demo-top { padding-bottom: 6px; }
  .step .demo .row { padding: 6px 0; }
  .step .bubble { margin: 2px 0 6px auto; padding: 8px 12px; font-size: 13.5px; }
  .step .demo .fine { padding-top: 6px; }
}
/* The full bucket stays pinned for at least 300px of scrolling after "Then turn up the ads" becomes active. */
@media (min-width: 901px) { .steps { padding-bottom: max(16vh, calc(380px + var(--bk) / 2 - 38svh)); } }

/* ---------- Tap targets: a 44px hit area without changing how things look ---------- */
.cite, .switch button, .cur button, .step .textlink, .foot-nav a { position: relative; }
.cite::after, .switch button::after, .cur button::after, .step .textlink::after, .foot-nav a::after, .top .btn-sm::after {
  content: ""; position: absolute;
  inset-block: min(0px, calc((100% - 44px) / 2)); inset-inline: min(0px, calc((100% - 44px) / 2));
}
.sources a { padding-block: 14px; }                   /* inline links: padding widens the tap area, not the line */
.menu-btn { width: 44px; height: 44px; }
/* Sliders: a 44px tall control with the same thin track drawn inside it */
.dials input[type="range"] { height: 44px; margin-block: -19px; background: transparent; }
.dials input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--dial, var(--forest)) var(--p, 20%), rgb(from var(--ink) r g b / 0.14) var(--p, 20%)); }
.dials input[type="range"]::-webkit-slider-thumb { margin-top: -10px; }
.dials input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--dial, var(--forest)) var(--p, 20%), rgb(from var(--ink) r g b / 0.14) var(--p, 20%)); }

/* The calculator's compact result line shows on phones only (see the end of the file). */
.calc-live { display: none; }

/* =====================================================================================
   v29 · the questionnaire in the booking dialog (phone first)
   ===================================================================================== */
.quiz { width: min(520px, 100% - 24px); max-height: min(760px, 100svh - 24px); overflow: auto; overscroll-behavior: contain; }
.q-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 12px 12px 8px; background: var(--paper); }
.q-progress { flex: 1; height: 6px; border-radius: 999px; background: rgb(from var(--ink) r g b / 0.1); overflow: hidden; }
.q-progress i { display: block; height: 100%; width: var(--p, 20%); background: var(--gold); border-radius: inherit; transition: width var(--t-mid) var(--ease); }
.quiz .x, .q-back { position: static; flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgb(from var(--ink) r g b / 0.06); font-size: 22px; line-height: 1; color: var(--ink); }
.quiz form { padding: 8px 24px 26px; }
.q-step { display: grid; gap: 12px; }
.q-step[hidden], .q-done[hidden], .quiz form[hidden] { display: none; }
.q-count { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.quiz h2 { font-size: clamp(1.6rem, 6vw, 2rem); line-height: 1.08; margin: 0 0 6px; outline: none; }
.q-opts { display: grid; gap: 10px; }
.q-opt { min-height: 54px; text-align: left; padding: 12px 18px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: 600 16px/1.3 var(--sans); transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast); }
.q-opt:hover { border-color: rgb(from var(--gold) r g b / 0.6); }
.q-opt[aria-pressed="true"] { border-color: var(--gold); background: rgb(from var(--gold) r g b / 0.08); }
.q-opt:active { transform: scale(0.98); }
.quiz label { display: block; font-size: 14px; font-weight: 600; }
.quiz label input { display: block; width: 100%; margin-top: 6px; }
.q-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.quiz .fine a { color: inherit; padding-block: 14px; }
.q-error { color: var(--bad); font-weight: 600; font-size: 15px; }
.q-done { display: grid; gap: 14px; padding: 8px 24px 26px; }
.q-done-line:empty { display: none; }
.quiz [hidden] { display: none !important; }   /* the button styles must not override "hidden" (the calendar button stays hidden until there is a link) */
.q-done .btn { justify-content: center; }
.q-preview { font-size: 14px; background: var(--r-butter, #fff1c1); border-radius: 14px; padding: 12px 14px; }
.q-preview dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0 0; }
.q-preview dt { font-weight: 600; } .q-preview dd { margin: 0; overflow-wrap: anywhere; }
/* Phones: the questionnaire fills the screen like a native sheet */
@media (max-width: 600px) {
  .quiz { width: 100%; max-width: 100%; height: 100svh; max-height: 100svh; margin: 0; border-radius: 0; }
  .quiz form, .q-done { padding: 8px 20px 28px; }
}

/* ---------- Smaller screens ---------- */
@media (max-width: 900px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .hero-grid, .watch-grid, .ari-grid, .calc, .foot-in { grid-template-columns: 1fr; }
  .ledger, .ari-card { rotate: 0deg; }
  .ari-card { justify-self: stretch; max-width: none; }
  .scrolly { grid-template-columns: 1fr; gap: 0; }
  .pin { top: 0; height: calc(38svh + 84px); z-index: 2; background: var(--charcoal); margin-inline: -20px; padding: 84px 20px 8px; }
  /* v26: text fades out on white before it reaches the yellow strip, so no yellow edge ever crosses it */
  .pin::after { content: ""; position: absolute; inset: 100% 0 auto 0; height: 40px; background: linear-gradient(var(--paper) 45%, rgb(255 255 255 / 0)); pointer-events: none; }
  .bucket { height: calc(100% - 30px); width: auto; }
  .step { min-height: 70svh; padding: 5vh 0; }
  .lib-grid, .lib-grid.two { grid-template-columns: 1fr; }
  .cover { padding: 8% 26%; }
  .steps3 { grid-template-columns: 1fr; }
  .chapters { grid-template-columns: 1fr; }
  .portrait { max-width: 420px; }
  /* Phone: the bucket strip stays yellow at the top and the steps scroll on a white panel beneath it. */
  .bucket-sec { background: var(--charcoal); }
  .steps { position: relative; isolation: isolate; }
  .steps::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -20px; right: -20px; background: var(--paper); border-radius: 30px 30px 0 0; }
  .pin::before { display: none; }
  .lens-lift { display: none; }
  .hole.active .gap { stroke: var(--r-sky); stroke-width: 4; }
  .pips { margin-top: 6px; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .top { padding-left: 16px; }
  .top .btn-sm { padding: 9px 14px; font-size: 13.5px; }
  .actions .btn { width: 100%; justify-content: center; }
  .proof { gap: 8px 22px; font-size: 13px; }
}

/* =====================================================================================
   v28 · phone and tablet
   ===================================================================================== */
@media (max-width: 900px) {
  :root { --sec-pad: 64px; --head-gap: 32px; }
}
/* Tablet: comfortable line lengths, and the report cards two across */
@media (min-width: 700px) and (max-width: 900px) {
  .lede, .body, blockquote, .stat-line, .spent, .value-line, .steps p, .desc { max-width: 65ch; }
  .lib-grid, .lib-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Section 3 on phones (Ari picked version A, 13 Nov 2026, with a smaller strip) ----------
   A compact pinned strip: about a quarter of the screen including the menu bar (a little more on very small phones, so the
   bucket stays legible). A step is active when its heading reaches the middle of the reading area below the strip (app.js);
   steps are as tall as their content with one gap; nothing is dimmed. The calculator keeps a compact result line in view. */
@media (max-width: 900px) {
  .pin { height: clamp(170px, 25svh, 230px); padding: 68px 20px 6px; flex-direction: row; align-items: center; justify-content: center; gap: 20px; }
  .bucket { height: 100%; width: auto; max-height: none; }
  .pips { flex-direction: column; gap: 7px; margin: 0; }
  .pips i { width: 11px; height: 11px; }
  .hole text { display: none; }
  .step { min-height: 0; padding: 0; }
  .step + .step { margin-top: 56px; }
  .steps { padding-top: 32px; padding-bottom: 50svh; }
  .step:not(.on) > :not(.src):not(.demo) { opacity: 1; }
  .calc-live { display: flex; position: sticky; bottom: 12px; z-index: 2; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; padding: 12px 16px; border-radius: 16px; background: var(--deep); color: var(--ink); font-size: 15px; }
  .calc-live b { font-family: var(--serif); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: 1.45rem; letter-spacing: -0.03em; }
}

/* ---------- People who prefer less motion get a still page ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  h1 .w { opacity: 1; translate: none; filter: none; }
  .step { opacity: 1; }
  @view-transition { navigation: none; }
}