/* garrisoncole.com v3
   Daylight: cool morning paper at the top, warm light at the bottom. Ink type, white cards.
   Sun gold is light only (glows, dots, fills, highlighter), never text.
   Instrument Sans for everything typed. Nanum Pen Script only for the marker's handwritten notes. */

:root {
  --paper: #F4F5F6;
  --paper-warm: #FFF4E0;
  --surface: #FFFFFF;
  --tint: #F6F2EA;
  --ink: #17191E;
  --muted: #5E636D;
  --line: #E4E1DA;
  --sun: #F2B33D;
  --sun-soft: #FFE6B5;
  --accent: #8A5300;
  --todo: #FFF0C2;
  --todo-ink: #5B4300;

  --font: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --pen: "Nanum Pen Script", "Bradley Hand", cursive;

  --h1: clamp(2.9rem, 1.55rem + 5.4vw, 5.75rem);
  --h2: clamp(2.1rem, 1.45rem + 2.6vw, 3.6rem);
  --h3: clamp(1.3rem, 1.15rem + 0.6vw, 1.55rem);
  --body: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --lede: clamp(1.125rem, 1.05rem + 0.45vw, 1.35rem);
  --small: 0.9375rem;

  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(88px, 6rem + 3vw, 152px);
  --r-field: 10px;
  --r-card: 14px;
  --r-panel: 22px;
  --shadow: 0 1px 2px rgba(23, 25, 30, 0.04), 0 18px 40px -24px rgba(60, 45, 20, 0.22);

  --t-ui: 160ms;
  --t-move: 420ms;
  --t-draw: 700ms;
  --t-reveal: 900ms;
  --spring: cubic-bezier(0.2, 0.9, 0.25, 1.15);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --sky-x: 72%;
  --sky-y: 118%;
  --sky-size: 1000px;
  --sky-glow: rgba(255, 196, 92, 0.55);

  color-scheme: light;
}
html[data-phase="night"] { --paper: #EEF0F3; }

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; background: var(--paper-warm); }
body {
  margin: 0;
  font: 400 var(--body)/1.55 var(--font);
  color: var(--ink);
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 22%, color-mix(in srgb, var(--paper) 55%, var(--paper-warm)) 60%, var(--paper-warm) 100%);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { margin: 0; color: var(--ink); text-wrap: balance; font-family: var(--font); }
h1 { font-size: var(--h1); font-weight: 600; font-stretch: 78%; line-height: 0.94; letter-spacing: -0.035em; }
h2 { font-size: var(--h2); font-weight: 600; font-stretch: 80%; line-height: 1; letter-spacing: -0.03em; max-width: 20ch; }
h3 { font-size: var(--h3); font-weight: 600; font-stretch: 88%; line-height: 1.15; letter-spacing: -0.015em; }
p { margin: 0 0 1em; max-width: 64ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; border-radius: 3px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.todo { background: var(--todo); color: var(--todo-ink); padding: 0 0.25em; border-radius: 3px; }

.wrap { width: 100%; max-width: calc(1180px + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; position: relative; }
.section.tight { padding-top: clamp(48px, 3rem + 2vw, 88px); }
.head { display: grid; gap: 16px; margin-bottom: clamp(40px, 5vw, 72px); }
.head p { color: var(--muted); }
.lede { font-size: var(--lede); line-height: 1.5; }
.muted { color: var(--muted); }
.small { font-size: var(--small); }

/* ---------- Buttons ---------- */

.btn {
  --b: var(--ink); --on: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px; border-radius: 999px;
  border: 1.5px solid var(--b); background: var(--b); color: var(--on);
  font: 600 1rem/1 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: box-shadow var(--t-ui), border-color var(--t-ui), background-color var(--t-ui);
}
.btn:hover { text-decoration: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--b) 16%, transparent); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.38; cursor: not-allowed; box-shadow: none; transform: none; }
.btn.line { background: var(--surface); color: var(--ink); border-color: color-mix(in srgb, var(--ink) 24%, transparent); }
.btn.line:hover { border-color: var(--ink); box-shadow: none; }
.btn.sm { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.textlink {
  font: inherit; font-weight: 600; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px;
}
.textlink:hover { text-decoration-thickness: 2px; }

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

.nav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 80%, transparent); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color 200ms; }
.nav.scrolled { border-bottom-color: var(--line); }
.nav-in { display: flex; align-items: center; gap: 12px; min-height: 70px; }
.brand { display: grid; line-height: 1.15; color: var(--ink); text-decoration: none; margin-right: auto; }
.brand b { font-weight: 700; font-stretch: 80%; font-size: 1.375rem; letter-spacing: -0.025em; white-space: nowrap; }
.clock { display: flex; align-items: center; gap: 7px; font-size: 0.8125rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ring { position: relative; width: 16px; height: 16px; flex: 0 0 16px; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; width: 16px; height: 16px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 1.6; }
.ring .track { stroke: var(--line); }
.ring .fill { stroke: var(--sun); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); transition: stroke-dashoffset 1s linear; }
.live { width: 6px; height: 6px; border-radius: 50%; background: var(--sun); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(242, 179, 61, 0.6); } 70% { box-shadow: 0 0 0 7px rgba(242, 179, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(242, 179, 61, 0); } }
.nav-links { display: none; list-style: none; margin: 0; padding: 0; gap: 28px; }
.nav-links a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.975rem; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--accent); }
.nav-phone { display: none; color: var(--ink); text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.nav .btn { padding: 0 16px; }
.nav .lg { display: none; }
.menu-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; background: transparent; color: var(--ink); border: 1.5px solid var(--line); border-radius: 999px; font: 600 0.9375rem var(--font); cursor: pointer; }
.menu-btn svg { width: 18px; height: 18px; }
.sheet { border-top: 1px solid var(--line); background: var(--paper); }
.sheet ul { list-style: none; margin: 0; padding: 8px 0 20px; }
.sheet li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font-weight: 600; font-stretch: 80%; font-size: 1.75rem; letter-spacing: -0.025em; color: var(--ink); text-decoration: none; }
.sheet .btn-row { padding-bottom: 20px; }
@media (max-width: 389px) { .brand b { font-size: 1.15rem; } .clock { font-size: 0.75rem; } .menu-btn { padding: 0 10px; } .nav .btn { padding: 0 12px; } }
@media (min-width: 900px) {
  .nav-in { gap: 28px; }
  .nav-links { display: flex; }
  .nav-phone { display: inline; }
  .nav .lg { display: inline; }
  .nav .sm-label { display: none; }
  .menu-btn, .sheet { display: none !important; }
}

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

.hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(24px, 4vw, 56px) 0 clamp(64px, 8vw, 120px); }
.sky { position: absolute; inset: 0; z-index: -2; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent, #000 140px); mask-image: linear-gradient(180deg, transparent, #000 140px); }
.sun {
  position: absolute; left: var(--sky-x); top: var(--sky-y);
  width: var(--sky-size); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--sky-glow), color-mix(in srgb, var(--sky-glow) 30%, transparent) 45%, transparent 72%);
  transition: left 1600ms var(--ease), top 1600ms var(--ease), width 1600ms var(--ease);
}
html[data-phase="night"] .sun::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: #FFD27A; box-shadow: 0 0 12px 4px rgba(255, 200, 110, 0.7);
}
.horizon { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(60px, 9vw, 150px); z-index: -1; pointer-events: none; }
.horizon .back { fill: color-mix(in srgb, var(--paper) 72%, #E2C48E 28%); opacity: 0.7; }
.horizon .front { fill: var(--paper); }
.hero-grid { display: grid; gap: 40px; align-items: center; }
.greeting { color: var(--muted); font-weight: 500; margin: 0 0 16px; min-height: 1.55em; max-width: 46ch; }
.greeting .co { color: var(--ink); font-weight: 600; }
.hero h1 { max-width: 14ch; font-size: clamp(2.75rem, 1.3rem + 4.6vw, 5.1rem); }
.hero .lede { margin-top: 24px; max-width: 44ch; color: color-mix(in srgb, var(--ink) 84%, var(--paper)); }
.hero .btn-row { margin-top: 22px; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; } }

/* Make it mine */
.claim { margin-top: 24px; max-width: 460px; min-height: 86px; }
.claim label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--muted); margin-bottom: 8px; }
.claim-row { display: flex; gap: 6px; padding: 5px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); }
.claim-row:focus-within { border-color: var(--ink); }
.claim-row input[type="text"] { flex: 1; min-height: 42px; border-radius: 999px; min-width: 0; border: 0; background: transparent; padding: 0 14px; font: 500 1rem var(--font); color: var(--ink); outline: none; }
.claim-row .btn { min-height: 42px; padding: 0 18px; font-size: 0.9375rem; }
.claim-msg { font-size: 0.875rem; color: var(--muted); margin: 8px 0 0 16px; min-height: 1.3em; }
.chips-wrap p { font-size: 0.875rem; font-weight: 500; color: var(--muted); margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: 500 0.875rem var(--font); cursor: pointer; transition: border-color var(--t-ui), background-color var(--t-ui); }
.chip:hover { border-color: var(--ink); }
.owned { display: inline-flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 10px 16px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 0.9375rem; }
.owned b { font-weight: 600; }
.owned .live { flex: 0 0 6px; }

/* ---------- Phone ---------- */

.stage { display: grid; justify-items: center; gap: 18px; position: relative; }
.phone { width: 300px; aspect-ratio: 9 / 19; border-radius: 50px; padding: 11px; background: linear-gradient(160deg, #2A3040, #0B0E15 40%, #1B202C); box-shadow: 0 50px 90px -40px rgba(23, 25, 30, 0.6), 0 18px 40px -24px rgba(23, 25, 30, 0.45), inset 0 0 0 1.5px rgba(255, 255, 255, 0.12); transform: rotate(-2deg); position: relative; }
.screen { position: relative; height: 100%; border-radius: 40px; overflow: hidden; color: #fff; background: linear-gradient(180deg, #6B7587 0%, #8C95A5 45%, #B3B8C2 75%, #C9CCD3 100%); }
.screen::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 1200ms var(--ease); background: linear-gradient(180deg, #6FA6DE 0%, #9EC3EA 34%, #F4D9AE 66%, #F6B75E 100%); }
.screen::after { content: ""; position: absolute; left: 50%; bottom: 30%; width: 120px; height: 120px; margin-left: -60px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 236, 190, 0.95), rgba(255, 200, 110, 0.5) 45%, transparent 70%); transform: translateY(70px) scale(0.6); opacity: 0; transition: transform 1600ms var(--ease), opacity 1200ms; }
.stage[data-mode="engine"] .screen::before { opacity: 1; }
.stage[data-mode="engine"] .screen::after { transform: none; opacity: 1; }
.ridges { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46%; z-index: 1; }
.ridges path { transition: fill 1200ms var(--ease); }
.ridges .p1 { fill: #A3A9B4; } .ridges .p2 { fill: #8A919D; } .ridges .p3 { fill: #727986; }
.stage[data-mode="engine"] .ridges .p1 { fill: #C9A97C; }
.stage[data-mode="engine"] .ridges .p2 { fill: #9A8762; }
.stage[data-mode="engine"] .ridges .p3 { fill: #6E6450; }
.island { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 96px; height: 28px; border-radius: 20px; background: #05070D; z-index: 3; }
.lock { position: absolute; top: 58px; left: 0; right: 0; text-align: center; z-index: 3; text-shadow: 0 1px 14px rgba(30, 40, 60, 0.35); }
.lock-date { font-size: 0.875rem; font-weight: 500; }
.lock-time { font-size: 4.25rem; font-weight: 600; font-stretch: 85%; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.focus-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 0.75rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: rgba(23, 25, 30, 0.28); text-shadow: none; }
.focus-chip i { width: 7px; height: 7px; border-radius: 50%; background: #D5D9E0; }
.stage[data-mode="engine"] .focus-chip i { background: var(--sun); }
.notes { position: absolute; left: 10px; right: 10px; top: 196px; display: grid; gap: 8px; z-index: 3; }
.note { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 18px; background: rgba(248, 249, 251, 0.86); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); color: var(--ink); font-size: 0.75rem; line-height: 1.32; box-shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.45); transform-origin: 50% 0; animation: note-in 520ms var(--spring) both; }
.note.leaving { animation: note-out 320ms ease-in forwards; }
@keyframes note-in { from { opacity: 0; transform: translateY(-18px) scale(0.94); } }
@keyframes note-out { to { opacity: 0; transform: translateY(10px) scale(0.96); } }
.note-icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--ink); color: #fff; }
.note-icon svg { width: 16px; height: 16px; }
.note[data-tone="alert"] .note-icon { background: #8D93A3; }
.note[data-tone="win"] .note-icon { background: var(--sun); color: var(--ink); }
.note-top { display: flex; justify-content: space-between; gap: 8px; color: #4A5468; font-size: 0.6875rem; font-weight: 500; }
.note b { display: block; font-size: 0.8125rem; font-weight: 600; margin-top: 1px; }
.mode { display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); position: relative; }
.mode button { position: relative; z-index: 1; min-height: 40px; padding: 0 16px; border: 0; background: none; border-radius: 999px; font: 600 0.875rem var(--font); color: var(--muted); cursor: pointer; white-space: nowrap; transition: color 200ms; }
.mode button[aria-pressed="true"] { color: #fff; }
.mode-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--ink); transition: transform var(--t-move) var(--spring); }
.stage[data-mode="engine"] .mode-thumb { transform: translateX(100%); }
.stage-cap { font-size: 0.8125rem; color: var(--muted); margin: 0; }
@media (max-width: 959px) { .phone { transform: none; zoom: 0.65; } }

/* ---------- The marker ---------- */

.mk-hl, .mk-ul { background-repeat: no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size var(--t-draw) var(--ease); }
.mk-hl {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M2 9 L40 6 L90 8 L140 5 L198 8 L196 33 L150 36 L100 34 L50 37 L4 33 Z' fill='%23FFE6B5'/%3E%3C/svg%3E");
  background-size: 0% 72%; background-position: 0 78%; padding: 0 0.06em;
}
.mk-ul {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C40 3 80 8 120 5 S180 4 198 6' fill='none' stroke='%2317191E' stroke-opacity='.85' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 0% 0.42em; background-position: 0 100%; padding-bottom: 0.14em;
}
.drawn.mk-hl { background-size: 100% 72%; }
.drawn.mk-ul { background-size: 100% 0.42em; }
.mk-circle { position: relative; display: inline-block; margin: 0 0.12em; }
.mk-svg { position: absolute; left: -0.3em; top: -0.3em; width: calc(100% + 0.6em); height: calc(100% + 0.55em); overflow: visible; pointer-events: none; }
.mk-svg path { fill: none; stroke: var(--ink); stroke-opacity: 0.88; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset var(--t-draw) var(--ease), opacity 1ms; }
.drawn > .mk-svg path, .drawn.mk-svg path { stroke-dashoffset: 0; opacity: 1; }
.pen-note { position: absolute; font-family: var(--pen); font-size: clamp(1.55rem, 1.3rem + 0.6vw, 2rem); line-height: 1; color: var(--ink); opacity: 0; white-space: nowrap; pointer-events: none; transition: opacity 300ms ease; }
.pen-note.drawn { opacity: 0.88; }
.pen-note svg { display: block; overflow: visible; }
.pen-note svg path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--t-draw) var(--ease) 200ms; }
.pen-note.drawn svg path { stroke-dashoffset: 0; }

/* ---------- Why small businesses matter ---------- */

.manifesto { padding: clamp(96px, 12vw, 200px) 0 clamp(120px, 13vw, 220px); }
.manifesto-text { margin: 0; max-width: 24ch; font-weight: 600; font-stretch: 80%; font-size: clamp(2.1rem, 1.1rem + 3.9vw, 4.75rem); line-height: 1.04; letter-spacing: -0.032em; }
.js .manifesto-text .w { color: color-mix(in srgb, var(--ink) 16%, var(--paper)); transition: color 260ms linear; }
.js .manifesto-text .w.on { color: var(--ink); }
.stats { display: grid; gap: 28px; margin-top: clamp(56px, 7vw, 96px); padding-top: 28px; border-top: 1px solid var(--line); }
.stat { display: grid; gap: 8px; align-content: start; }
.stat b { font-weight: 700; font-stretch: 75%; font-size: clamp(3.5rem, 2.2rem + 5vw, 7rem); line-height: 0.9; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); max-width: 28ch; }
@media (min-width: 760px) { .stats { grid-template-columns: 1fr 1fr; gap: 56px; } }
.source { font-size: 0.8125rem; color: var(--muted); margin-top: 22px; }
.source a { color: var(--muted); }
.manifesto-close { margin-top: clamp(40px, 5vw, 64px); font-size: var(--lede); line-height: 1.45; max-width: 46ch; }

/* ---------- Sound familiar ---------- */

.pains { list-style: none; margin: 0; padding: 0; max-width: 860px; border-top: 1px solid var(--line); }
.pains li { border-bottom: 1px solid var(--line); }
.pain { width: 100%; display: grid; grid-template-columns: 22px 1fr; gap: 18px; align-items: start; padding: 22px 0; background: none; border: 0; text-align: left; cursor: pointer; font: 400 var(--lede)/1.42 var(--font); color: var(--ink); }
.pain i { width: 22px; height: 22px; margin-top: 0.22em; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--ink) 32%, transparent); display: grid; place-items: center; transition: background-color var(--t-ui), border-color var(--t-ui), transform var(--t-move) var(--spring); }
.pain i::after { content: ""; width: 9px; height: 5px; border: solid var(--ink); border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform 240ms var(--spring); }
.pain:hover i { border-color: var(--ink); }
.pain[aria-pressed="true"] { font-weight: 500; }
.pain[aria-pressed="true"] i { background: var(--sun); border-color: var(--sun); transform: scale(1.08); }
.pain[aria-pressed="true"] i::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.pain-slot { min-height: 132px; margin-top: 28px; max-width: 860px; }
.pain-read { display: grid; gap: 6px 28px; align-items: center; padding: 22px 24px; border-radius: var(--r-panel); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); animation: rise-in var(--t-move) var(--spring); }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } }
.pain-count { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.pain-count b { font-weight: 700; font-stretch: 75%; font-size: 2.6rem; line-height: 1; color: var(--ink); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-right: 6px; }
.pain-verdict { margin: 0; font-weight: 600; font-stretch: 88%; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); line-height: 1.3; }
.pain-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
@media (min-width: 900px) { .pain-read { grid-template-columns: auto 1fr auto; } .pain-links { flex-direction: column; align-items: flex-end; gap: 6px; } }

/* ---------- Scout a sample business ---------- */

.scout { display: grid; gap: 32px; margin-bottom: clamp(72px, 9vw, 120px); position: relative; }
@media (min-width: 1000px) { .scout { grid-template-columns: 400px minmax(0, 1fr); column-gap: 240px; align-items: start; } }
.scout-label { font-weight: 600; font-stretch: 88%; font-size: 1.15rem; margin: 0 0 4px; }
.frame { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow); padding: 18px 16px 20px; font-size: 0.875rem; line-height: 1.35; max-width: 400px; width: 100%; }
.frame-tag { position: absolute; top: -12px; right: 18px; padding: 4px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 0.75rem; font-weight: 600; }
.sf-search { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); font-weight: 500; margin-bottom: 12px; }
.sf-search svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--muted); }
.sf-rows { display: grid; gap: 5px; }
.sf-row { display: grid; gap: 4px; padding: 7px 10px; border-radius: 8px; background: #F7F7F5; }
.sf-row.org { padding: 6px 10px; }
.sf-row small { font-size: 0.6875rem; font-weight: 600; color: var(--muted); }
.bar { display: block; height: 6px; border-radius: 3px; background: #E3E3DF; }
.bar.w60 { width: 60%; } .bar.w45 { width: 45%; } .bar.w70 { width: 70%; } .bar.w35 { width: 35%; }
.sf-target { position: relative; border-radius: 10px; }
.listing { margin-top: 10px; padding: 14px; border: 1.5px solid var(--ink); border-radius: 12px; display: grid; gap: 10px; }
.lst-title { display: block; margin: 0; font-size: 1.05rem; font-weight: 600; font-stretch: 88%; }
.stars { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.stars svg { width: 76px; height: 13px; }
.stars span { color: var(--muted); font-weight: 400; }
.sf-hours { color: #A23B1E; font-weight: 600; font-size: 0.8125rem; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tiles span { aspect-ratio: 1; border-radius: 6px; background: linear-gradient(180deg, #E8E2D6, #D5CBB8); display: grid; place-items: end center; overflow: hidden; }
.tiles svg { width: 100%; height: 60%; }
.tiles-cap { font-size: 0.75rem; color: var(--muted); }
.sf-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sf-btn { display: block; text-align: center; padding: 8px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; font-size: 0.8125rem; }
.review { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #F7F7F5; font-size: 0.8125rem; }
.review i { display: block; font-style: normal; color: var(--muted); font-size: 0.75rem; margin-top: 4px; }
.spot {
  position: absolute; z-index: 4; top: 50%; margin-top: -15px; right: -24px; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--surface); background: var(--sun); color: var(--ink); font: 700 0.875rem var(--font);
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 12px -4px rgba(120, 80, 0, 0.5);
  transition: transform var(--t-move) var(--spring), background-color var(--t-ui);
}
.spot:hover { transform: scale(1.12); }
.spot[aria-expanded="true"] { background: var(--ink); color: #fff; }
.spot::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--sun); opacity: 0; animation: ping 2.4s infinite; }
.spot[aria-expanded="true"]::before { display: none; }
@keyframes ping { 0% { opacity: 0.7; transform: scale(0.8); } 80%, 100% { opacity: 0; transform: scale(1.4); } }
.sf-target .mk-svg { left: -8px; right: -8px; top: -7px; bottom: -7px; width: calc(100% + 16px); height: calc(100% + 14px); }
.hand { display: none; font-family: var(--pen); font-size: 1.65rem; line-height: 0.95; color: var(--ink); opacity: 0; transform: rotate(-3deg); transition: opacity 300ms ease 250ms; }
.sf-target.open .hand { display: block; opacity: 0.88; }
@media (min-width: 1000px) {
  .hand { display: block; position: absolute; left: calc(100% + 40px); top: 50%; width: 168px; transform: translateY(-50%) rotate(-3deg); pointer-events: none; }
  .hand::before { content: ""; position: absolute; right: calc(100% + 6px); top: 0.5em; width: 26px; height: 2px; background: currentColor; border-radius: 2px; transform: rotate(-8deg); }
  .sf-target:not(.open) .hand { opacity: 0; }
}
@media (max-width: 999px) { .sf-target.open .hand { margin-top: 8px; } }
.scout-side { display: grid; gap: 18px; align-content: start; }
.scout-side h3 { font-size: 1.35rem; }
.scout-ctrl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.scout-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; min-height: 300px; align-content: start; }
.scout-notes li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); animation: rise-in var(--t-move) var(--spring); font-size: 1rem; }
.scout-notes li b { width: 26px; height: 26px; border-radius: 50%; background: var(--sun); display: grid; place-items: center; font-size: 0.8125rem; }
.scout-notes .empty { display: block; background: none; border: 1px dashed var(--line); color: var(--muted); animation: none; }
.verdict-card { padding: 22px 24px; border-radius: var(--r-panel); background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--sun-soft) 50%, var(--surface))); border: 1.5px solid var(--sun); box-shadow: var(--shadow); display: grid; gap: 10px; }
.verdict-card.waiting { visibility: hidden; }
.verdict-card.shown { animation: rise-in var(--t-move) var(--spring); }
.verdict-card h3 { font-size: 1.5rem; }
.verdict-card .btn-row { margin-top: 6px; }
.video-slot { aspect-ratio: 16 / 9; border-radius: var(--r-panel); overflow: hidden; background: var(--ink); max-width: 760px; }
.video-slot iframe { width: 100%; height: 100%; border: 0; display: block; }
.m3 { left: 236px; top: -64px; z-index: 2; transform: rotate(-3deg); display: flex; align-items: flex-start; gap: 4px; }
.m3 svg { order: -1; transform: scaleX(-1); margin-top: 16px; }
@media (max-width: 999px) { .m3 { display: none; } }

/* ---------- Timeline ---------- */

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 36px; position: relative; }
.timeline li { position: relative; display: grid; gap: 10px; align-content: start; padding-left: 34px; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid color-mix(in srgb, var(--ink) 25%, transparent); transition: background-color 300ms, border-color 300ms, box-shadow 300ms; }
.timeline li.lit::before { background: var(--sun); border-color: var(--sun); box-shadow: 0 0 0 6px color-mix(in srgb, var(--sun) 25%, transparent); }
.timeline::before, .timeline::after { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; background: var(--line); }
.timeline::after { background: var(--sun); transform-origin: top; transform: scaleY(var(--fill, 0)); transition: transform 1400ms var(--ease); }
.when { font-size: 0.875rem; font-weight: 600; color: var(--accent); }
.timeline p { color: var(--muted); }
.checkpoints { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.checkpoints span { font-size: 0.8125rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
@media (min-width: 900px) {
  .timeline { grid-template-columns: repeat(3, 1fr); gap: 44px; }
  .timeline li { padding-left: 0; padding-top: 40px; }
  .timeline li::before { top: 0; }
  .timeline::before, .timeline::after { left: 0; right: 0; top: 6px; bottom: auto; width: auto; height: 2px; }
  .timeline::after { transform-origin: left; transform: scaleX(var(--fill, 0)); }
}

/* ---------- Scoreboard ---------- */

.linescore { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.ls-team { grid-column: 1 / -1; padding: 16px 18px; border-bottom: 1px solid var(--line); font-weight: 500; font-size: var(--small); color: var(--muted); }
.ls-team b { display: block; color: var(--ink); font-size: 1.125rem; font-stretch: 88%; }
.ls-cell { padding: 16px 18px 20px; display: grid; gap: 12px; align-content: space-between; container-type: inline-size; min-width: 0; }
.ls-cell:nth-child(even) { border-right: 1px solid var(--line); }
.ls-cell:nth-child(n+4) { border-top: 1px solid var(--line); }
.ls-label { font-size: 0.875rem; font-weight: 500; color: var(--muted); line-height: 1.3; }
.ls-value {
  display: block; min-width: 0; padding: 12px 14px 10px; border-radius: 8px; white-space: nowrap;
  background: linear-gradient(180deg, var(--surface), var(--tint));
  box-shadow: inset 0 0 0 1px var(--line), inset 0 -3px 0 var(--sun);
  font-weight: 700; font-stretch: 75%; font-size: clamp(1.9rem, 27cqi, 4.75rem); line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums; color: var(--ink);
}
.ls-value.empty { color: var(--muted); }
@media (min-width: 900px) {
  .linescore.wide { grid-template-columns: minmax(170px, 0.8fr) repeat(4, 1fr); }
  .linescore.wide .ls-team { grid-column: auto; border-bottom: 0; border-right: 1px solid var(--line); display: grid; align-content: end; padding: 20px; }
  .linescore.wide .ls-cell { padding: 20px; border-top: 0; border-right: 0; }
  .linescore.wide .ls-cell + .ls-cell { border-left: 1px solid var(--line); }
  .linescore.wide .ls-value { font-size: clamp(2.4rem, 31cqi, 5.25rem); }
}
.numbers-line { margin: 24px 0 clamp(48px, 6vw, 80px); font-size: var(--lede); max-width: 52ch; }
.teasers { border-top: 1px solid var(--line); }
.teaser { display: grid; gap: 10px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.teaser p { color: var(--muted); margin: 0; }
.teaser .textlink { justify-self: start; }
@media (min-width: 900px) { .teaser { grid-template-columns: 4fr 6fr 2fr; gap: 32px; align-items: baseline; } .teaser .textlink { justify-self: end; } }
.mini { grid-column: 1 / -1; display: grid; gap: 20px; margin-top: 12px; background: var(--tint); border-radius: var(--r-panel); padding: clamp(18px, 3vw, 30px); }
.mini-fields { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.mini-out { display: grid; gap: 8px; container-type: inline-size; }
.mini-out .ls-value { background: var(--surface); font-size: clamp(2rem, 16cqi, 3.5rem); padding: 14px 18px 12px; }
.mini-out .ls-value.empty { font-size: 1.0625rem; font-stretch: 100%; font-weight: 500; letter-spacing: 0; white-space: normal; }
@media (min-width: 900px) { .mini { grid-template-columns: 5fr 4fr 3fr; align-items: end; } }

/* ---------- A business grows in order ---------- */

.lit-band { background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--sun-soft) 55%, transparent), transparent 70%); }
.band-grid { display: grid; gap: 48px; }
@media (min-width: 900px) { .band-grid { grid-template-columns: 5fr 7fr; gap: 72px; align-items: center; } }
.stack { display: flex; flex-direction: column-reverse; gap: 8px; list-style: none; margin: 0; padding: 0; }
.stack > li { width: 100%; }
@media (min-width: 640px) { .stack > li:nth-child(2) { width: 93%; } .stack > li:nth-child(3) { width: 86%; } .stack > li:nth-child(4) { width: 79%; } }
.stack-block { display: grid; gap: 4px; padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow); }
.stack-block b { font-size: 1.5rem; font-weight: 600; font-stretch: 80%; letter-spacing: -0.025em; }
.stack-block span { color: var(--muted); font-size: 1rem; }
.stack > li:first-child .stack-block { border-color: var(--sun); background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--sun-soft) 45%, var(--surface))); }
.band-close { font-weight: 600; font-stretch: 85%; font-size: 1.45rem; letter-spacing: -0.02em; margin: 30px 0 14px; max-width: 30ch; }
.js [data-build] > li { opacity: 0; transform: translateY(26px); transition: opacity 500ms var(--ease), transform 620ms var(--spring); }
.js [data-build].built > li { opacity: 1; transform: none; }
.js [data-build].built > li:nth-child(2) { transition-delay: 140ms; }
.js [data-build].built > li:nth-child(3) { transition-delay: 280ms; }
.js [data-build].built > li:nth-child(4) { transition-delay: 420ms; }

/* ---------- About ---------- */

.about-grid { display: grid; gap: 44px; }
.about-grid > * { min-width: 0; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; } }
.about-side { display: grid; gap: 20px; }
.portrait { margin: 0; position: relative; }
.portrait img { border-radius: var(--r-panel); aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; width: 100%; background: var(--tint); }
.portrait figcaption { position: absolute; left: 14px; bottom: 14px; padding: 8px 12px; border-radius: 999px; background: rgba(23, 25, 30, 0.72); color: #fff; font-size: 0.8125rem; font-weight: 500; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; align-items: center; gap: 8px; }
.creds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cred { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.cred b { display: block; font-weight: 700; font-stretch: 75%; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); letter-spacing: -0.03em; line-height: 1.02; }
.cred span { color: var(--muted); font-size: 0.875rem; display: block; margin-top: 6px; line-height: 1.35; }
.ps { font-style: italic; color: var(--muted); }
.strip { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin-top: 40px; }
.slot { margin: 0; display: grid; gap: 8px; }
.slot-box { aspect-ratio: 3 / 2; background: var(--tint); border-radius: var(--r-card); display: grid; place-items: center; padding: 12px; text-align: center; font-size: 0.8125rem; }
.slot figcaption { font-size: 0.8125rem; color: var(--muted); }

/* ---------- Proof (hidden until filled) ---------- */

.proof { width: 100%; border-collapse: collapse; font-size: 1rem; }
.proof th, .proof td { text-align: left; vertical-align: top; padding: 18px 18px 18px 0; border-top: 1px solid var(--line); }
.proof thead th { font-size: 0.875rem; font-weight: 500; color: var(--muted); border-top: 2px solid var(--ink); }
.pull { margin: 44px 0 0; padding-left: 24px; border-left: 3px solid var(--sun); font-weight: 600; font-stretch: 85%; font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem); line-height: 1.2; max-width: 34ch; }

/* ---------- Contact + form ---------- */

.contact { background: radial-gradient(80% 80% at 50% 100%, color-mix(in srgb, var(--sun-soft) 85%, transparent), transparent 75%); }
.contact h2 { font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); max-width: 14ch; }
.contact-grid { display: grid; gap: 44px; }
.contact-grid > * { min-width: 0; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 7fr 4fr; gap: 80px; } }
.form-card { position: relative; }
.form { display: grid; gap: 18px; background: var(--surface); padding: clamp(20px, 3vw, 32px); border-radius: var(--r-panel); box-shadow: var(--shadow); border: 1px solid var(--line); }
.form-row { display: grid; gap: 18px; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 7px; min-width: 0; }
.field label, .field legend { font-weight: 500; font-size: 0.9375rem; }
.opt { color: var(--muted); font-weight: 400; }
.field small { color: var(--muted); font-size: 0.8125rem; }
input[type="text"], input[type="tel"], input[type="number"], input[type="url"], textarea, select {
  width: 100%; min-height: 50px; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: var(--r-field);
  background: var(--surface); color: var(--ink); font: 400 1rem/1.4 var(--font); font-variant-numeric: tabular-nums;
  -webkit-appearance: none; appearance: none; transition: border-color var(--t-ui), box-shadow var(--t-ui);
}
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E636D' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; }
input:hover, textarea:hover, select:hover { border-color: color-mix(in srgb, var(--ink) 30%, var(--line)); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--sun-soft); }
.claim-row input:focus-visible { box-shadow: none; }
textarea { min-height: 88px; resize: vertical; }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.money { position: relative; }
.money::before { content: "$"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.money input { padding-left: 28px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.attached { display: flex; gap: 12px; align-items: flex-start; background: var(--tint); border: 1px solid var(--line); border-radius: var(--r-field); padding: 12px 14px; font-size: 0.9375rem; }
.attached > span { overflow-wrap: anywhere; min-width: 0; }
.attached button { margin-left: auto; flex: 0 0 auto; }
.form-status { min-height: 1.5em; font-size: 0.9375rem; font-weight: 500; margin: 0; }
.form-status.error { color: #B3261E; }
.contact-side { display: grid; gap: 26px; align-content: start; }
.contact-side h3 { font-size: 1.15rem; margin-bottom: 4px; }
.contact-big { display: inline-block; font-weight: 600; font-stretch: 78%; font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem); letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.contact-big:hover { color: var(--accent); }
.m5 { left: 96px; top: -50px; transform: rotate(-4deg); display: flex; align-items: flex-start; gap: 2px; }
.m5 svg { order: -1; transform: scaleX(-1); margin-top: 14px; }
@media (max-width: 899px) { .m5 { position: static; display: block; margin: 0 0 10px 6px; } .m5 svg { display: none; } }

/* ---------- Footer ---------- */

.foot { position: relative; margin-top: clamp(56px, 7vw, 112px); padding: clamp(56px, 6vw, 88px) 0 56px; font-size: var(--small); color: var(--muted); background: color-mix(in srgb, var(--paper-warm) 70%, var(--sun-soft)); }
.contact + .foot, main:has(> .contact:last-child) + .foot { margin-top: clamp(40px, 5vw, 72px); }
.ridge-top { position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); width: 100%; height: clamp(36px, 6vw, 96px); color: color-mix(in srgb, var(--paper-warm) 70%, var(--sun-soft)); pointer-events: none; }
.foot-grid { display: grid; gap: 24px; }
.foot b { color: var(--ink); font-stretch: 80%; font-size: 1.3rem; letter-spacing: -0.02em; }
.foot a { color: var(--ink); }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 4fr 5fr 3fr; } }
@media (max-width: 899px) { .foot { padding-bottom: 100px; } }

/* ---------- Sticky bar ---------- */

.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--paper) 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform 260ms var(--ease); }
.sticky.on { transform: none; }
.sticky .btn { width: 100%; padding: 0 10px; font-size: 0.9375rem; }
@media (min-width: 900px) { .sticky { display: none; } }

/* ---------- Two minutes ---------- */

.nudge { position: fixed; z-index: 50; right: 20px; bottom: 20px; width: min(360px, calc(100vw - 32px)); padding: 20px 22px; border-radius: var(--r-panel); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(60, 45, 20, 0.45); display: grid; gap: 14px; animation: nudge-in 600ms var(--spring); }
.nudge p { margin: 0; font-weight: 600; font-stretch: 88%; font-size: 1.15rem; line-height: 1.3; }
@keyframes nudge-in { from { opacity: 0; transform: translateY(24px); } }
@media (max-width: 899px) { .nudge { left: 16px; right: 16px; width: auto; bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* ---------- Inner pages ---------- */

.page-hero { padding: clamp(44px, 7vw, 96px) 0 clamp(36px, 4vw, 64px); }
.page-hero h1 { max-width: 14ch; }
.page-hero .lede { margin-top: 24px; max-width: 54ch; }
.plain { padding: clamp(56px, 9vw, 128px) 0; min-height: 52vh; }
.plain h1 { margin-bottom: 26px; }

/* Philosophy */
.layers-wrap { position: relative; }
.layers { display: flex; flex-direction: column-reverse; gap: 10px; list-style: none; margin: 0; padding: 0; }
.layers > li { width: 100%; }
@media (min-width: 760px) { .layers > li:nth-child(2) { width: 96%; } .layers > li:nth-child(3) { width: 92%; } .layers > li:nth-child(4) { width: 88%; } }
.layer { border: 1.5px solid var(--line); border-radius: var(--r-panel); background: var(--surface); transition: border-color 200ms; }
.layer:has([aria-expanded="true"]) { border-color: var(--ink); }
.layers > li:first-child .layer { border-color: var(--sun); }
.layer-btn { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; padding: 22px 24px; background: none; border: 0; text-align: left; cursor: pointer; color: var(--ink); font: inherit; border-radius: var(--r-panel); }
.layer-btn b { font-weight: 600; font-stretch: 78%; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.6rem); letter-spacing: -0.03em; line-height: 1; }
.layer-btn span { grid-column: 1; color: var(--muted); font-size: 1rem; font-weight: 400; }
.layer-btn svg { grid-row: 1 / span 2; grid-column: 2; width: 24px; height: 24px; color: var(--accent); transition: transform 240ms var(--spring); }
.layer-btn[aria-expanded="true"] svg { transform: rotate(45deg); }
.layer-panel { overflow: hidden; height: 0; transition: height 240ms var(--ease); }
.layer-body { display: grid; gap: 22px; padding: 4px 24px 26px; }
@media (min-width: 900px) { .layer-body { grid-template-columns: 1fr 1fr 0.8fr; gap: 32px; } }
.layer-body h4 { font-size: 1.0625rem; font-weight: 600; margin: 0 0 6px; }
.layer-body ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: 1rem; }
.layer-body p { font-size: 1rem; }
.layer-num { font-weight: 700; font-stretch: 78%; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--accent); line-height: 1.1; }
.pen-note.bracket { position: absolute; right: calc(100% + 18px); top: 0; bottom: 0; width: 130px; }
.bracket svg { position: absolute; right: 0; top: 0; height: 100%; width: 22px; overflow: visible; }
.bracket-note { position: absolute; right: 30px; top: 44%; width: 64px; text-align: right; line-height: 0.9; transform: rotate(-6deg); font-family: var(--pen); font-size: 1.9rem; }
@media (max-width: 1479px) { .bracket { display: none; } }
.bracket-mobile { display: none; font-family: var(--pen); font-size: 1.7rem; margin: 0 0 12px; transform: rotate(-3deg); opacity: 0.88; }
@media (max-width: 1479px) { .bracket-mobile { display: block; } }
.explain { display: grid; border-top: 1px solid var(--line); }
.explain > div { padding: 24px 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.explain h3 { font-size: 1.35rem; }
.explain p { color: var(--muted); font-size: 1rem; }
@media (min-width: 900px) { .explain { grid-template-columns: 1fr 1fr; column-gap: 56px; } }
.rules { list-style: none; margin: 0; padding: 0; }
.rules li { padding: 16px 0; border-top: 1px solid var(--line); font-weight: 600; font-stretch: 85%; font-size: clamp(1.2rem, 1rem + 0.65vw, 1.55rem); letter-spacing: -0.02em; line-height: 1.22; max-width: 40ch; }
.two-col { display: grid; gap: 56px; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; gap: 80px; } }

/* Tools */
.tool { scroll-margin-top: 90px; }
.tool + .tool { margin-top: clamp(64px, 8vw, 112px); }
.tool-head { display: grid; gap: 10px; margin-bottom: 24px; }
.tool-head p { color: var(--muted); }
.panel { background: var(--tint); border-radius: var(--r-panel); display: grid; overflow: hidden; }
.panel > * { min-width: 0; }
.panel-in { padding: clamp(22px, 3vw, 34px); display: grid; gap: 16px; align-content: start; }
.panel-out { display: grid; align-content: start; background: var(--surface); }
.panel-out .linescore { border: 0; border-radius: 0; box-shadow: none; }
.panel-out .ls-value { font-size: clamp(1.6rem, 24cqi, 3.25rem); }
.verdict { padding: 18px 20px 20px; border-top: 1px solid var(--line); font-size: 1rem; margin: 0; }
.verdict.empty { color: var(--muted); }
@media (min-width: 900px) { .panel { grid-template-columns: 5fr 6fr; } .panel.one { grid-template-columns: 1fr; } }
.fields { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.fields .full { grid-column: 1 / -1; }
.range-wrap { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; }
.range-wrap output { font-weight: 700; font-stretch: 78%; font-size: 1.6rem; min-width: 3.2ch; text-align: right; font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; accent-color: var(--ink); min-height: 44px; }
.seg { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.seg legend { font-weight: 500; font-size: 0.9375rem; padding: 0; margin-bottom: 7px; }
.seg-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); }
.seg-opts label { position: relative; display: grid; place-items: center; text-align: center; min-height: 44px; padding: 6px 8px; font-size: 0.875rem; font-weight: 500; cursor: pointer; line-height: 1.2; border-radius: 8px; transition: background-color var(--t-ui), color var(--t-ui); }
.seg-opts input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg-opts label:has(input:checked) { background: var(--ink); color: #fff; }
.seg-opts label:has(input:focus-visible) { outline: 2.5px solid var(--ink); outline-offset: 1px; }
.handoff { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; padding: 16px 20px 22px; border-top: 1px solid var(--line); }
.handoff[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.assume { font-size: 0.8125rem; color: var(--muted); padding: 0 20px 18px; margin: 0; }
.finder-in { padding: clamp(22px, 3vw, 34px); display: grid; gap: 18px; align-content: start; min-height: 440px; }
.progress { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.progress span { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 14%, transparent); transition: background-color 240ms; }
.progress span.done { background: var(--ink); }
.q { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.q legend { font-weight: 600; font-stretch: 82%; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.95rem); letter-spacing: -0.025em; line-height: 1.12; padding: 0; margin-bottom: 8px; }
.choice { position: relative; display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; font-weight: 500; transition: border-color 120ms, background-color 120ms; }
.choice:hover { border-color: var(--ink); }
.choice input { appearance: none; -webkit-appearance: none; margin: 0; width: 20px; height: 20px; flex: 0 0 20px; border: 2px solid var(--muted); border-radius: 50%; display: grid; place-items: center; }
.choice input::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform 140ms var(--spring); }
.choice:has(input:checked) { border-color: var(--ink); background: var(--ink); color: #fff; }
.choice:has(input:checked) input { border-color: #fff; }
.choice:has(input:checked) input::after { transform: scale(1); }
.choice:has(input:focus-visible) { outline: 2.5px solid var(--ink); outline-offset: 2px; }
.finder-nav { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-top: 4px; }
.finder-count { font-size: 0.875rem; color: var(--muted); margin: 0; }
.answers { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: var(--small); }
.result-layer { padding: 20px 20px 6px; display: grid; gap: 8px; container-type: inline-size; }
.result-layer .ls-value { font-size: clamp(2rem, 11cqi, 3.75rem); }
.result-body { padding: 14px 20px 20px; display: grid; gap: 14px; font-size: 1rem; }
.result-body h3 { font-size: 1rem; font-stretch: 100%; letter-spacing: 0; }
.result-body ul { margin: 6px 0 0; padding-left: 1.1em; display: grid; gap: 6px; }
.result-body p { margin: 0; }
.search-row { display: grid; gap: 14px; }
@media (min-width: 760px) { .search-row { grid-template-columns: 1fr 1fr auto; align-items: end; } }

/* Link builder */
.lb { display: grid; gap: 32px; }
@media (min-width: 900px) { .lb { grid-template-columns: 1fr 340px; align-items: start; } }
.lb-url { padding: 14px 16px; border-radius: var(--r-field); background: var(--surface); border: 1px solid var(--line); font-size: 0.9375rem; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.qr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 20px; display: grid; gap: 12px; justify-items: center; box-shadow: var(--shadow); }
.qr canvas { width: 240px; height: 240px; image-rendering: pixelated; }

/* ---------- Headline reveal ---------- */

.js [data-reveal]:not(.split) { opacity: 0; animation: show 0s 1.5s forwards; }
@keyframes show { to { opacity: 1; } }
.js [data-reveal] .hw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.js [data-reveal] .hw > span { display: inline-block; transform: translateY(108%); animation: rise 900ms var(--ease) forwards; animation-delay: calc(120ms + var(--i) * 55ms); }
@keyframes rise { to { transform: none; } }
.js .hero .lede, .js .hero .btn-row, .js .hero .claim { opacity: 0; animation: fade-up 800ms var(--ease) forwards; animation-delay: 760ms; }
.js .hero .btn-row { animation-delay: 860ms; }
.js .hero .claim { animation-delay: 960ms; }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .js .hero .lede, .js .hero .btn-row, .js .hero .claim { opacity: 1; animation: none; }
  .ring { display: none; }
  .nudge { animation: fade 300ms ease; }
}
@keyframes fade { from { opacity: 0; } }

/* ---------- v3 additions ---------- */
.lst-name { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; }
.lst-name .rank { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; font-weight: 700; font-size: 0.8125rem; align-self: center; }
.lst-name .small { grid-column: 2; }
.sf-loc { margin: 0; color: var(--muted); font-size: 0.8125rem; }
.sf-hours { margin: 0; }

.listing .review { margin-top: 8px; }
.sample-link { margin-top: 16px; }
.video-slot { margin-top: 16px; }
.tools-wrap { padding-bottom: var(--section); }
.jump { margin-top: 18px; }
.close-row { margin-top: 28px; }
.bracket-mobile { color: var(--ink); }
.pain span { display: block; }
.card-row { display: contents; }

/* ---------- Proof ---------- */
.cases { display: grid; gap: 16px; }
@media (min-width: 900px) { .cases { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.case { display: grid; gap: 12px; align-content: start; grid-template-rows: auto 1fr auto; padding: 26px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow); }
.case p { color: var(--muted); font-size: 1rem; margin: 0; }
.case .case-num { color: var(--ink); font-weight: 700; font-stretch: 78%; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.02em; line-height: 1.05; padding-top: 14px; box-shadow: inset 0 3px 0 var(--sun); }
.mine { margin-top: clamp(28px, 4vw, 48px); }
@media (min-width: 900px) { .linescore.wide.three { grid-template-columns: minmax(170px, 0.8fr) repeat(3, 1fr); } }
@media (max-width: 899px) { .linescore.three .ls-cell:last-child { grid-column: 1 / -1; border-right: 0; } }

/* ---------- Why it hasn't worked, fit ---------- */
.claim-lead { margin: 0; color: var(--muted); font-size: 1rem; }
.scout-side .claim { margin-top: 0; min-height: 0; }
.breaks { list-style: none; margin: 0 0 clamp(48px, 6vw, 80px); padding: 0; max-width: 860px; border-top: 1px solid var(--line); }
.breaks li { position: relative; padding: 18px 0 18px 38px; border-bottom: 1px solid var(--line); font-size: var(--lede); line-height: 1.4; }
.breaks li::before { content: "\00d7"; position: absolute; left: 0; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--ink) 35%, transparent); display: grid; place-items: center; font-size: 1rem; line-height: 1; color: var(--muted); }
.cases-head { margin-bottom: 28px; }
.cases-head h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-stretch: 80%; letter-spacing: -0.025em; }
.case .case-you { color: var(--ink); background: var(--tint); border-radius: var(--r-field); padding: 12px 14px; font-size: 0.9375rem; }
.proof-close { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(32px, 4vw, 48px); }
.proof-close p { margin: 0; font-weight: 600; font-stretch: 88%; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); line-height: 1.3; max-width: 44ch; }
.fit { display: grid; gap: 16px; }
@media (min-width: 900px) { .fit { grid-template-columns: 3fr 2fr; gap: 20px; } }
.fit-card { padding: 26px 24px; border-radius: var(--r-panel); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.fit-card.yes { border-color: var(--sun); }
.fit-card h3 { margin-bottom: 14px; }
.fit-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.fit-card li { position: relative; padding-left: 30px; line-height: 1.45; }
.fit-card.yes li::before { content: ""; position: absolute; left: 2px; top: 0.3em; width: 16px; height: 16px; border-radius: 50%; background: var(--sun); }
.fit-card.no li::before { content: ""; position: absolute; left: 2px; top: 0.3em; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--ink) 35%, transparent); }
.fit-card.no li { color: var(--muted); }
.fit-note { margin-top: 22px; color: var(--muted); }