/* Palmway prototype, rebuild 2 (workstream 10, October 19, 2026).
   Mechanisms from the Calendly study (architecture/calendly-kit), Palmway's own brand and copy.
   One type scale, four corner sizes, three-layer slate shadows, one accent (coral) for the one action. */

@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('brand/fonts/plus-jakarta-sans-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('brand/fonts/plus-jakarta-sans-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url('brand/fonts/plus-jakarta-sans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* The seven brand colors, plus white for panels */
  --ivory: #F6F7EB; --ink: #16262E; --slate: #2E4756; --teal: #3C7A89; --coral: #FF8360; --mist: #E8F0F2; --muted: #52646D;
  --white: #FFFFFF;
  --coral-hover: #FF9677; --coral-press: #F57651;
  --hair: rgb(22 38 46 / .1); --hair-strong: rgb(22 38 46 / .2);
  --on-ink: #F6F7EB; --on-ink-muted: rgb(232 240 242 / .74); --on-ink-hair: rgb(246 247 235 / .14);
  --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* Type: one scale. 12 (tiny picture labels only), 14, 16, 18, 20, 24, then display. Fluid sizes land on the
     scale at 390 and 1440 wide. */
  --display-weight: 500;
  --h1: clamp(2.5rem, 1.25rem + 4.4vw, 4.5rem);     /* 40 -> 72 */
  --h2: clamp(2rem, 1.25rem + 3vw, 3.5rem);         /* 32 -> 56 */
  --h3: clamp(1.25rem, 1rem + 1vw, 1.5rem);         /* 20 -> 24 */
  --body: clamp(1rem, .75rem + 1vw, 1.125rem);      /* 16 -> 18 */
  --t12: .75rem; --t14: .875rem; --t16: 1rem; --t18: 1.125rem; --t20: 1.25rem; --t24: 1.5rem;

  /* Corners: chips 12, picture UI 24, cards 32, picture tiles 40, page panels 48. Buttons are pills. */
  --r-chip: 12px; --r-ui: 24px; --r-card: 32px; --r-tile: 40px; --r-panel: 48px; --r-pill: 999px;

  /* Space */
  --section-y: clamp(4rem, 2rem + 6vw, 7.5rem);     /* 64 -> 120 */
  --panel-gutter: clamp(8px, 2vw, 24px);
  --content: 1200px; --gutter: clamp(16px, 4vw, 48px);

  /* Depth: three layers, slate tint, 10% at most */
  --shadow-sm: 0 1px 2px rgb(46 71 86 / .04), 0 4px 10px rgb(46 71 86 / .05), 0 12px 24px rgb(46 71 86 / .06);
  --shadow-md: 0 2px 4px rgb(46 71 86 / .04), 0 10px 20px rgb(46 71 86 / .06), 0 24px 48px rgb(46 71 86 / .10);

  /* Motion */
  --ease-ui: cubic-bezier(.4, 0, .2, 1);            /* hovers, 150ms */
  --ease-out: cubic-bezier(.16, 1, .3, 1);          /* menus, picture steps */
  --ease-io: cubic-bezier(.77, 0, .175, 1);         /* on-screen movement inside pictures */
}
html.w600 { --display-weight: 600; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 400 var(--body)/1.6 var(--font); font-synthesis: none; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--slate); text-underline-offset: .18em; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.on-ink :focus-visible, .site-footer :focus-visible { outline-color: var(--on-ink); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -80px; z-index: 100; background: var(--ink); color: var(--ivory); padding: 12px 16px; border-radius: var(--r-chip); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 8px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.wrap { max-width: calc(var(--content) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Type ---------- */
.h1, .h2 { font-weight: var(--display-weight); letter-spacing: -0.03em; }
.h1 { font-size: var(--h1); line-height: 1.05; }
.h2 { font-size: var(--h2); line-height: 1.08; }
/* One clause per line, each balanced. Tested Oct 20 against Stripe/Linear-style flowing headings:
   flowing broke phrases mid-way ("Not sure where to / start?"), stacking kept every break on a clause. */
.h1 .line, .h2 .line { display: block; text-wrap: balance; }
.h3, .outcome, .kicker { text-wrap: balance; }
/* Narrow columns (FAQ heading, Contact intro): clause-per-line would wrap each clause into a stub,
   so the two halves flow together and balance as one block */
.faq-grid .h2 .line { display: inline; }
.faq-grid .h2 { text-wrap: balance; }
@media (min-width: 1024px) { .contact-intro .h1 { font-size: var(--h2); } }
/* Body text: no single word stranded on the last line */
p, li, summary, .xmore { text-wrap: pretty; }
.h1 .tone, .h2 .tone { color: var(--muted); }
.h2 .tone { font-style: italic; }                   /* the second voice: Plus Jakarta Sans italic */
.h3 { font-size: var(--h3); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.lede { color: var(--muted); max-width: 56ch; }
.voice { font-style: italic; font-weight: 500; font-size: var(--t20); line-height: 1.45; letter-spacing: -0.01em; color: var(--ink); max-width: 62ch; text-wrap: balance; }
.small { font-size: var(--t14); line-height: 1.5; color: var(--muted); }

/* Section label: number, name, rule. Numbers count themselves, so hidden sections leave no gap. */
main { counter-reset: sec; }
.numbered { counter-increment: sec; }
.label { display: flex; align-items: center; gap: 12px; font-size: var(--t14); font-weight: 600; line-height: 1.4; color: var(--muted); }
.label .num::before { content: counter(sec, decimal-leading-zero) " /"; color: var(--slate); }
.label::after { content: ""; flex: 0 1 56px; height: 1px; background: var(--hair-strong); }
.on-ink .label { color: var(--on-ink-muted); }
.on-ink .label .num::before { color: var(--on-ink); }
.on-ink .label::after { background: var(--on-ink-hair); }

/* Page eyebrow (Services, About, Contact): hairline pill with a blue-teal dot */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 14px 4px 12px; border: 1px solid var(--hair-strong); border-radius: var(--r-pill);
  font-size: var(--t14); font-weight: 600; color: var(--ink); background: rgb(255 255 255 / .55); }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }

/* ---------- Buttons: pill, coral with ink label. Hover changes color only. ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: var(--r-pill);
  font: 600 var(--t16)/1.2 var(--font); text-decoration: none; text-align: center; border: 1px solid transparent; cursor: pointer;
  transition: background-color 150ms var(--ease-ui), border-color 150ms var(--ease-ui), transform 120ms var(--ease-ui); }
.btn-primary { background: var(--coral); color: var(--ink); }
.btn-secondary { background: transparent; color: var(--ink); border-color: rgb(22 38 46 / .28); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: var(--t14); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--coral-hover); }
  .btn-secondary:hover { background: var(--white); border-color: rgb(22 38 46 / .5); }
}
.btn-primary:active { background: var(--coral-press); }
.btn:active { transform: scale(.97); }
.btn[disabled] { cursor: progress; opacity: .7; }
.text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--slate); text-decoration: underline; text-decoration-color: rgb(46 71 86 / .35); text-underline-offset: .22em; transition: text-decoration-color 150ms var(--ease-ui); }
.text-link:hover { text-decoration-color: currentColor; }
.text-link .arrow { transition: transform 150ms var(--ease-ui); }
@media (hover: hover) and (pointer: fine) { .text-link:hover .arrow { transform: translateX(2px); } }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Nav: sticky, a floating white card once the page scrolls ---------- */
.site-header { position: sticky; top: 0; z-index: 50; height: 72px; }
.nav-inner { position: relative; height: 100%; max-width: calc(1440px - var(--panel-gutter) * 2); margin-inline: auto; padding-inline: calc(var(--gutter) - 4px);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nav-inner::before { content: ""; position: absolute; inset: 8px var(--panel-gutter); z-index: -1; background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-md);
  opacity: 0; transition: opacity 200ms var(--ease-ui); }
.site-header { background: var(--ivory); transition: background-color 200ms var(--ease-ui); }
.site-header[data-floating] { background: transparent; }
.site-header[data-floating] .nav-inner::before { opacity: 1; }
.brand { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; flex: none; }
.brand img { width: 144px; height: auto; }
.nav-links { display: none; gap: 2px; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--r-chip); color: var(--ink); text-decoration: none;
  font-size: var(--t16); font-weight: 500; transition: background-color 150ms var(--ease-ui); }
.nav-links a:hover { background: var(--mist); }
.nav-links a[aria-current="page"] { background: var(--mist); }
.nav-actions { display: flex; align-items: center; gap: 4px; }
.menu-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-chip); background: transparent; cursor: pointer; transition: background-color 150ms var(--ease-ui); }
.menu-btn:hover { background: var(--mist); }
.menu-btn .ic { width: 22px; height: 22px; }
.menu-btn .ic-close { display: none; }
.menu-btn[aria-expanded="true"] .ic-open { display: none; }
.menu-btn[aria-expanded="true"] .ic-close { display: block; }
.mobile-menu { position: absolute; left: var(--panel-gutter); right: var(--panel-gutter); top: 68px; background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-md); padding: 12px;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
@starting-style { .mobile-menu { opacity: 0; transform: translateY(-8px); } }
.mobile-menu a { display: flex; align-items: center; min-height: 52px; padding: 0 16px; border-radius: var(--r-chip); color: var(--ink); text-decoration: none; font-size: var(--t18); font-weight: 500; }
.mobile-menu a:hover, .mobile-menu a[aria-current="page"] { background: var(--mist); }
.mobile-menu .btn { width: 100%; margin-top: 8px; }
@media (min-width: 900px) {
  .brand img { width: 168px; }
  .nav-links { display: flex; }
  .menu-btn, .mobile-menu { display: none !important; }
}

/* ---------- Page panel + Palmway field ---------- */
.page-card { position: relative; margin-inline: var(--panel-gutter); border-radius: var(--r-panel); overflow: clip; isolation: isolate; background: var(--mist); }
.field { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.field .strip { position: absolute; top: 0; left: 0; height: 100%; width: 300%; max-width: none; object-fit: cover; will-change: transform; }
.field .veil { position: absolute; inset: 0; background: radial-gradient(ellipse 75% 60% at 50% 40%, rgb(246 247 235 / .94), rgb(246 247 235 / .5) 65%, rgb(246 247 235 / 0)); }
.dots { position: absolute; inset: 0; background-image: radial-gradient(rgb(22 38 46 / .16) 1px, transparent 1.5px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 65% 55% at 50% 40%, transparent 30%, #000 85%); mask-image: radial-gradient(ellipse 65% 55% at 50% 40%, transparent 30%, #000 85%); }
/* Static field crops for picture tiles (no image element, one cached file) */
.fieldbg { background: var(--mist) url('img/palmway-field.webp') var(--fx, 20%) 50% / auto 100% no-repeat; }

/* Squircle corners where supported (Chromium today). Everyone else gets ordinary round corners. */
@supports (corner-shape: squircle) {
  .sq { corner-shape: squircle; }
  .sq.page-card, .sq.r-panel { border-radius: calc(var(--r-panel) * 1.6); }
  .sq.r-tile { border-radius: calc(var(--r-tile) * 1.6); }
  .sq.r-card { border-radius: calc(var(--r-card) * 1.6); }
}

/* ---------- Homepage hero: text left, the Front Door stage right ---------- */
.hero { padding-block: clamp(40px, 3vw + 24px, 88px) clamp(32px, 4vw, 80px); }
.hero .field .veil { background: linear-gradient(180deg, rgb(246 247 235 / .97) 0 42%, rgb(246 247 235 / .55) 58%, rgb(246 247 235 / .08) 78%); }
.hero .dots { -webkit-mask-image: linear-gradient(180deg, transparent 0 46%, #000 80%); mask-image: linear-gradient(180deg, transparent 0 46%, #000 80%); }
.hero-grid { display: grid; gap: clamp(40px, 5vw, 64px); align-items: center; }
.hero-text { display: grid; gap: 24px; justify-items: start; }
.hero-text .lede { color: var(--slate); }
.hero-note { font-size: var(--t14); line-height: 1.5; color: var(--muted); max-width: 44ch; margin-top: -8px; }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
  .hero .h1 { font-size: clamp(2.5rem, 1.25rem + 4.4vw, 4rem); }
  .hero .field .veil { background: linear-gradient(90deg, rgb(246 247 235 / .97) 0 40%, rgb(246 247 235 / .5) 56%, rgb(246 247 235 / .04) 74%); }
  .hero .dots { -webkit-mask-image: linear-gradient(90deg, transparent 0 46%, #000 78%); mask-image: linear-gradient(90deg, transparent 0 46%, #000 78%); }
}

/* ---------- Front Door stage: four stops on a path, one 6-second story each ---------- */
.stage { position: relative; width: 100%; max-width: 600px; justify-self: center; padding: 16px; background: var(--white); border-radius: var(--r-tile); box-shadow: var(--shadow-md); }
.path { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 4px 0 12px; }
.path::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 22px; height: 2px; background: rgb(22 38 46 / .14); border-radius: 2px; }
.path-done { position: absolute; left: 12.5%; top: 22px; width: 75%; height: 2px; background: var(--teal); border-radius: 2px; transform-origin: left; transform: scaleX(var(--done, 0)); transition: transform 300ms var(--ease-out); }
.stop { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 0 2px 10px; border: 0; background: none; cursor: pointer;
  color: var(--muted); font: 600 var(--t14)/1.3 var(--font); text-align: center; transition: color 150ms var(--ease-ui); }
.stop .dot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--white); color: var(--slate); border: 1px solid var(--hair); box-shadow: var(--shadow-sm);
  transition: background-color 200ms var(--ease-ui), color 200ms var(--ease-ui), border-color 200ms var(--ease-ui); }
.stop .dot .ic { width: 20px; height: 20px; }
.stop:hover { color: var(--ink); }
.stop[aria-selected="true"] { color: var(--ink); }
.stop[aria-selected="true"] .dot { background: var(--teal); border-color: var(--teal); color: var(--white); }
.stop .timer { position: absolute; left: 22%; right: 22%; bottom: 0; height: 2px; border-radius: 2px; background: rgb(22 38 46 / .1); overflow: hidden; opacity: 0; transition: opacity 150ms var(--ease-ui); }
.stop .timer i { position: absolute; inset: 0; background: var(--teal); transform-origin: left; transform: scaleX(0); }
.stop[aria-selected="true"] .timer { opacity: 1; }
.stage-tile { position: relative; display: grid; height: clamp(392px, 26vw + 180px, 560px); border-radius: var(--r-ui); overflow: hidden; }
.stage-tile > .dots { -webkit-mask-image: none; mask-image: none; opacity: .7; }
.stage .panel { grid-area: 1 / 1; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity 300ms var(--ease-ui), visibility 0s 300ms; }
.stage .panel.is-active { opacity: 1; visibility: visible; transition: opacity 300ms var(--ease-ui), visibility 0s; }
.stage .vt { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.pause { position: absolute; z-index: 5; right: 12px; bottom: 12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hair); background: rgb(255 255 255 / .86); color: var(--ink); cursor: pointer;
  transition: background-color 150ms var(--ease-ui); }
.pause:hover { background: var(--white); }
.pause .ic { width: 18px; height: 18px; }
.pause .ic-play { display: none; }
.pause[aria-pressed="true"] .ic-play { display: block; }
.pause[aria-pressed="true"] .ic-pause { display: none; }

/* ---------- Picture kit: small business moments in plain HTML ---------- */
.vt { position: relative; overflow: hidden; }
.vt .b1, .vt .b2, .vt .b3, .vt .b4, .vt .o1, .vt .o2, .vt .o3, .vt .o4 { transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out); }
.vt.play:not(.s1) .b1, .vt.play:not(.s2) .b2, .vt.play:not(.s3) .b3, .vt.play:not(.s4) .b4 { opacity: 0; transform: translateY(8px) scale(.98); }
.vt:not(.play) .o1, .vt.s1 .o1, .vt:not(.play) .o2, .vt.s2 .o2, .vt:not(.play) .o3, .vt.s3 .o3, .vt:not(.play) .o4, .vt.s4 .o4 { opacity: 0; }
.vt .ty1, .vt .ty2 { display: inline-block; transition: clip-path 800ms steps(18, end); clip-path: inset(0 0 0 0); }
.vt.play:not(.s1) .ty1, .vt.play:not(.s2) .ty2 { clip-path: inset(0 100% 0 0); }
.vt .g1, .vt .g2, .vt .g3, .vt .g4 { transform-origin: left center; transition: transform 800ms var(--ease-out); }
.vt.play:not(.s1) .g1, .vt.play:not(.s2) .g2, .vt.play:not(.s3) .g3, .vt.play:not(.s4) .g4 { transform: scaleX(0); }
.vt .tap { position: absolute; z-index: 4; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgb(60 122 137 / .35); border: 2px solid rgb(60 122 137 / .7); opacity: 0; pointer-events: none; }
.vt.s2 .tap2, .vt.s3 .tap3, .vt.s4 .tap4 { animation: tap 800ms var(--ease-out) both; }
@keyframes tap { 0% { opacity: 0; transform: scale(.5); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
.vt.reset, .vt.reset * { transition: none !important; animation: none !important; }

.phone { position: relative; z-index: 1; width: min(296px, 84%); height: calc(100% - 52px); max-height: 480px; background: var(--white); border-radius: var(--r-ui); box-shadow: var(--shadow-md);
  overflow: hidden; display: flex; flex-direction: column; font-size: var(--t14); line-height: 1.4; color: var(--ink); text-align: left; }
.ph-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--hair); font-size: var(--t12); color: var(--muted); flex: none; }
.ph-bar .ic { width: 14px; height: 14px; }
.ph-body { position: relative; flex: 1; padding: 14px; display: grid; align-content: start; gap: 10px; overflow: hidden; }
.ui { background: var(--white); border-radius: var(--r-ui); box-shadow: var(--shadow-md); }
.ui-row { display: flex; align-items: center; gap: 10px; }
.ui-title { font-size: var(--t14); font-weight: 600; line-height: 1.3; }
.ui-meta { font-size: var(--t12); color: var(--muted); line-height: 1.3; }
.bar { display: block; height: 8px; border-radius: 4px; background: rgb(22 38 46 / .09); }
.bar.thick { height: 12px; }
.bar.teal { background: var(--teal); }
.bar.mist { background: var(--mist); }
.sq-logo { width: 32px; height: 32px; border-radius: 10px; flex: none; background: var(--mist); display: grid; place-items: center; color: var(--teal); }
.sq-logo .ic { width: 18px; height: 18px; }
.stars { display: inline-flex; gap: 1px; color: var(--teal); }
.stars .ic { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.stars.empty { color: rgb(22 38 46 / .2); }
.mini-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 10px; border-radius: var(--r-pill); background: var(--mist); color: var(--slate); font-size: var(--t12); font-weight: 600; white-space: nowrap;
  transition: background-color 200ms var(--ease-ui), color 200ms var(--ease-ui); }
.mini-chip .ic { width: 12px; height: 12px; }
.mini-chip.on { background: var(--teal); color: var(--white); }
.mini-chip.ink { background: var(--ink); color: var(--ivory); }
.bubble { max-width: 86%; padding: 10px 12px; border-radius: 16px; font-size: var(--t14); line-height: 1.4; }
.bubble.me { justify-self: end; background: var(--ink); color: var(--ivory); border-bottom-right-radius: 6px; }
.bubble.them { justify-self: start; background: var(--mist); color: var(--ink); border-bottom-left-radius: 6px; }
.bubble .tag { display: block; font-size: var(--t12); font-weight: 600; color: var(--slate); margin-bottom: 2px; }
.toast { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--ink); color: var(--ivory); box-shadow: var(--shadow-md); font-size: var(--t14); line-height: 1.3; text-align: left; }
.toast .ui-meta { color: var(--on-ink-muted); }
.toast .sq-logo { background: rgb(246 247 235 / .12); color: var(--ivory); }
.check-dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgb(22 38 46 / .08); color: transparent; transition: background-color 250ms var(--ease-ui), color 250ms var(--ease-ui); }
.check-dot .ic { width: 12px; height: 12px; stroke-width: 2.4; }
.check-dot.on { background: var(--teal); color: var(--white); }
.x-dot { background: rgb(22 38 46 / .08); color: var(--muted); }
.input-mock { display: grid; gap: 4px; }
.input-mock .box { min-height: 36px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--hair-strong); font-size: var(--t14); }
.btn-mock { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: var(--ink); color: var(--ivory); font-size: var(--t14); font-weight: 600;
  transition: background-color 200ms var(--ease-ui); }
.btn-mock.light { background: var(--mist); color: var(--slate); }

/* Story 1: found on Google */
.v-search .search-pill { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--hair-strong); font-size: var(--t14); }
.v-search .search-pill .ic { width: 16px; height: 16px; color: var(--muted); }
.v-search .res { position: relative; padding: 12px; border-radius: 16px; border: 1px solid var(--hair); display: grid; gap: 8px; }
.v-search .slot { position: relative; display: grid; }
.v-search .slot > * { grid-area: 1 / 1; }
.v-search .res.you { border-color: var(--teal); outline: 3px solid rgb(60 122 137 / .14); background: var(--white); }
.v-search .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.v-search:not(.play) .act-web, .v-search.s4 .act-web { background: var(--teal); color: var(--white); }

/* Story 2: first look, the site on a phone */
.v-site .load { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--teal); }
.v-site .ph-bar { position: relative; }
.v-site .site-scroll { display: grid; gap: 12px; transition: transform 900ms var(--ease-io); transform: translateY(-72px); }
.v-site.play:not(.s3) .site-scroll { transform: none; }
.site-hero { height: 148px; border-radius: 16px; padding: 16px; display: grid; align-content: end; gap: 8px; }
.site-hero b { font-size: var(--t16); line-height: 1.25; font-weight: 700; color: var(--ink); max-width: 14ch; }
.site-btns { display: flex; gap: 8px; }
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.photos span { height: 84px; border-radius: 12px; }
.skel { position: absolute; inset: 14px; display: grid; align-content: start; gap: 12px; background: var(--white); z-index: 2; }
.skel .blk { height: 148px; border-radius: 16px; background: rgb(22 38 46 / .06); }
.v-site:not(.play) .quote, .v-site.s4 .quote { background: var(--teal); color: var(--white); }

/* Story 3: message sent */
.v-form .form-head { font-size: var(--t16); font-weight: 700; }
.v-form .box.tall { min-height: 64px; }
.v-form .send { justify-self: start; }
.v-form:not(.play) .send, .v-form.s3 .send { background: var(--teal); }
.v-form .sent { display: flex; align-items: center; gap: 8px; font-size: var(--t14); font-weight: 600; }

/* Story 4: the instant reply */
.v-reply .toast { top: 16px; left: max(12px, calc(50% - 150px)); right: max(12px, calc(50% - 150px)); }
.v-reply.play:not(.s3) .toast.b3 { transform: translateY(-12px); }
.v-reply .phone { margin-top: 56px; height: calc(100% - 96px); }
.v-reply .thread { display: grid; gap: 10px; align-content: end; height: 100%; padding: 14px; }
.v-reply .delivered { justify-self: start; display: flex; align-items: center; gap: 6px; font-size: var(--t12); color: var(--muted); }

/* ---------- Sections ---------- */
.section { padding-block: var(--section-y); }
.head { display: grid; gap: 24px; justify-items: start; margin-bottom: clamp(40px, 4.5vw, 64px); }
.head .h2 { max-width: 22em; }                 /* full row at 56px: long two-tone headings set in 2 or 3 lines */
.head .lede { max-width: 52ch; }
.closing-line { margin-top: clamp(32px, 4vw, 48px); }
.closing-stat { margin-top: 12px; max-width: 62ch; font-size: var(--t16); line-height: 1.5; color: var(--slate); }
.closing-stat .src { color: var(--muted); font-size: var(--t14); white-space: nowrap; }
.closing-stat .src a { color: var(--muted); display: inline-block; padding-block: 12px; margin-block: -12px; }

/* ---------- Leaks: expanding cards ---------- */
.expand { display: grid; gap: 12px; }
@media (min-width: 640px) and (max-width: 1023px) { .expand { grid-template-columns: 1fr 1fr; } }
.xcard { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 12px; padding: 12px 12px 24px; background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-sm); overflow: hidden; min-width: 0; }
.xcard .h3 { box-sizing: border-box; padding-inline: 12px; overflow-wrap: anywhere; }
.xcard .h3 button { all: unset; display: block; cursor: pointer; min-height: 44px; }
.xcard .h3 button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 8px; }
.xcard .xmore { box-sizing: border-box; padding-inline: 12px; color: var(--muted); font-size: var(--t16); }
.xpic { position: relative; height: 224px; border-radius: var(--r-ui); overflow: hidden; display: grid; place-items: center; }
.xpic .dots, .switch-tile .dots, .step-pic .dots, .addon-pic .dots { -webkit-mask-image: none; mask-image: none; opacity: .55; }
@media (min-width: 1024px) {
  /* A grid whose columns ease between widths. site.js measures the row and sets exact pixel widths for
     the titles (closed column) and the text (open column), so nothing re-wraps or overflows mid-move.
     One even ease-in-out for the width, the shadow and the pictures, so it glides rather than snaps. */
  .expand { --glide: 720ms cubic-bezier(.65, 0, .35, 1); display: grid; grid-template-columns: var(--cols, 2.3fr 1fr 1fr 1fr); min-height: 452px;
    transition: grid-template-columns var(--glide); }
  .xcard { grid-template-rows: 224px auto 1fr; cursor: pointer; transition: box-shadow var(--glide); }
  .xcard[data-open="true"] { box-shadow: var(--shadow-md); cursor: default; }
  .xcard .h3 { width: var(--xc, auto); }
  /* The title re-wraps to the card's width. To keep it from jumping mid-glide, the two cards that change
     fade their title out, swap its width while it's hidden (200ms), then fade it back as the card lands. */
  .xcard[data-open="true"] .h3 { width: var(--xo, auto); }
  .xcard .h3 { transition: width 0s 200ms; }
  .expand.is-live .xcard[data-open="true"] .h3 { animation: xtitle-a 720ms var(--ease-ui) both; }
  .expand.is-live .xcard[data-open="false"] .h3 { animation: xtitle-b 720ms var(--ease-ui) both; }
  .xcard .xmore { width: var(--xo, auto); }
  /* Text: the leaving card's line fades out quickly, the arriving one fades up once the card has room */
  .xcard[data-open="false"] .xmore { opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity 200ms var(--ease-ui), transform 200ms var(--ease-ui), visibility 0s 200ms; }
  .xcard[data-open="true"] .xmore { opacity: 1; visibility: visible; transform: none;
    transition: opacity 420ms var(--ease-out) 300ms, transform 520ms var(--ease-out) 300ms, visibility 0s; }
  .xcard .h3 button { transition: color var(--glide); }
  .xcard[data-open="false"] .h3 button { color: var(--slate); }
  /* The field stays put while a card widens (fixed offset instead of a percentage) */
  .xcard .xpic { background-position: var(--fxp, 0px) 50%; }
  .xcard[data-open="false"] .xpic > .scene { opacity: .55; transform: scale(.97); }
  .xpic > .scene { transition: opacity var(--glide), transform var(--glide); }
}
@keyframes xtitle-a { 0% { opacity: 1; } 22%, 55% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }
@keyframes xtitle-b { 0% { opacity: 1; } 22%, 55% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }
/* Leak scenes (still pictures) */
.scene { position: relative; z-index: 1; width: min(300px, calc(100% - 32px)); display: grid; gap: 8px; font-size: var(--t14); line-height: 1.35; text-align: left; }
.scene .ui { padding: 12px 14px; display: grid; gap: 8px; }
.scene .ui.dim { opacity: .9; }
.scene .missing { border: 1.5px dashed rgb(22 38 46 / .3); border-radius: var(--r-ui); padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: rgb(255 255 255 / .55); }
.scene .missing b { font-size: var(--t14); font-weight: 600; color: var(--muted); }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgb(22 38 46 / .12); border-top-color: var(--teal); }
.badge-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--ink); color: var(--ivory); font-size: var(--t12); font-weight: 700; display: inline-grid; place-items: center; }

/* ---------- Switchback: one item open, a thin progress line, one picture ---------- */
.switch { display: grid; gap: 32px; align-items: start; }
.switch-tile { order: -1; }   /* phones: the picture comes first, then its list */
@media (min-width: 1024px) { .switch { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } .switch-tile { order: 0; } .switch.flip .switch-tile { order: -1; } }
.items { display: grid; }
.item { position: relative; border-top: 1px solid var(--hair); opacity: .5; transition: opacity 150ms var(--ease-ui); }
.item:last-child { border-bottom: 1px solid var(--hair); }
.item:hover, .item.is-open { opacity: 1; }
.item .h3 { font-size: var(--t20); }
.item .h3 button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 0; cursor: pointer; }
.item .h3 button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }
.ichip { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-chip); background: var(--mist); color: var(--teal); flex: none; }
.ichip .ic { width: 18px; height: 18px; }
.on-ink .ichip { background: rgb(232 240 242 / .1); color: var(--mist); }
/* The open item glides open (height: auto where the browser can animate it, instant elsewhere) */
.items { interpolate-size: allow-keywords; }
.item .body { height: 0; overflow: hidden; visibility: hidden; opacity: 0; padding: 0 0 0 50px; color: var(--muted); max-width: 52ch;
  transition: height 320ms var(--ease-io), padding-bottom 320ms var(--ease-io), opacity 200ms var(--ease-ui), visibility 0s 320ms; }
.item.is-open .body { height: auto; padding-bottom: 22px; visibility: visible; opacity: 1;
  transition: height 320ms var(--ease-io), padding-bottom 320ms var(--ease-io), opacity 260ms var(--ease-ui) 90ms, visibility 0s; }
/* Hover: the row lights up, so a pause on hover reads as on purpose */
.item .h3 button { margin-inline: -12px; padding-inline: 12px; width: calc(100% + 24px); border-radius: 14px; transition: background-color 150ms var(--ease-ui); }
@media (hover: hover) and (pointer: fine) { .item .h3 button:hover { background: var(--white); } }
.item .h3 button::after { content: ""; margin-left: auto; flex: none; width: 10px; height: 12px; border-inline: 3px solid var(--teal); opacity: 0; transition: opacity 150ms var(--ease-ui); }
[data-switch].is-paused .item.is-open .h3 button::after { opacity: 1; }
[data-switch].is-paused .item.is-open .progress { background: var(--slate); }
.stage.is-paused .pause { background: var(--ink); color: var(--white); border-color: var(--ink); }
.stage.is-paused .stop[aria-selected="true"] .timer i { background: var(--slate); }
.item .progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--teal); transform: scaleX(0); transform-origin: left; }
.switch-tile { position: relative; display: grid; aspect-ratio: 5 / 4; border-radius: var(--r-tile); overflow: hidden; }
.switch-tile > .vt { grid-area: 1 / 1; display: grid; place-items: center; opacity: 0; transition: opacity 300ms var(--ease-ui); }
.switch-tile > .vt.is-active { opacity: 1; }
.switch-tile .phone { height: calc(100% - 64px); }
.switch-after { margin-top: 28px; display: grid; gap: 20px; justify-items: start; }

/* Front Door pictures */
.v-profile .card { width: min(320px, 86%); padding: 16px; display: grid; gap: 12px; position: relative; z-index: 1; font-size: var(--t14); }
.v-profile .rows { display: grid; gap: 8px; }
.v-profile .rows > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgb(232 240 242 / .6); }
.v-profile.play:not(.s1) .c1, .v-profile.play:not(.s2) .c2, .v-profile.play:not(.s3) .c3, .v-profile.play:not(.s4) .c4 { background: rgb(22 38 46 / .08); color: transparent; }
.v-call .callbar { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: var(--r-pill); background: var(--ink); color: var(--ivory); font-weight: 600; font-size: var(--t14); transition: background-color 200ms var(--ease-ui), opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
.v-call:not(.play) .callbar, .v-call.s3 .callbar { background: var(--teal); }
.v-call .ph-body { padding-bottom: 64px; }
.mini-chip, .btn-mock { position: relative; }
.mini-chip .tap, .btn-mock .tap, .callbar .tap { left: 50%; top: 50%; }
.v-stats .card { width: min(320px, 86%); padding: 18px; display: grid; gap: 12px; position: relative; z-index: 1; }
.v-stats .stat { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 10px; font-size: var(--t12); color: var(--muted); }
.v-stats .spark { height: 56px; }
.v-stats .spark path { vector-effect: non-scaling-stroke; fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.v-stats .spark .area { fill: rgb(60 122 137 / .12); stroke: none; }
.v-stats .clipr { transition: clip-path 1100ms var(--ease-out); clip-path: inset(0 0 0 0); }
.v-stats.play:not(.s3) .clipr { clip-path: inset(0 100% 0 0); }

/* Leak review pictures */
.v-video .card { width: min(340px, 88%); padding: 12px; display: grid; gap: 10px; position: relative; z-index: 1; }
.v-video .frame { position: relative; height: 150px; border-radius: 16px; overflow: hidden; display: grid; place-items: center; }
.v-video .playbtn { width: 48px; height: 48px; border-radius: 50%; background: rgb(255 255 255 / .92); display: grid; place-items: center; color: var(--ink); box-shadow: var(--shadow-sm); }
.v-video .playbtn .ic { width: 18px; height: 18px; fill: currentColor; stroke: none; margin-left: 2px; }
.v-video .scrub { position: relative; height: 4px; border-radius: 2px; background: rgb(22 38 46 / .1); overflow: hidden; }
.v-video .scrub i { position: absolute; inset: 0; background: var(--teal); transform-origin: left; transition: transform 900ms var(--ease-out); }
.v-video.play:not(.s1) .scrub i { transform: scaleX(.05); }
.v-video.play.s1:not(.s2) .scrub i { transform: scaleX(.28); }
.v-video.play.s2:not(.s3) .scrub i { transform: scaleX(.55); }
.v-video:not(.play) .scrub i, .v-video.s3 .scrub i { transform: scaleX(.82); }
.v-video .chapters { display: grid; gap: 6px; }
.v-video .chapters > div { display: flex; align-items: center; gap: 8px; font-size: var(--t12); font-weight: 600; color: var(--muted); padding: 6px 8px; border-radius: 10px; transition: background-color 200ms var(--ease-ui), color 200ms var(--ease-ui); }
.v-video.s1:not(.s2) .ch1, .v-video.s2:not(.s3) .ch2, .v-video.s3 .ch3, .v-video:not(.play) .ch3 { background: var(--mist); color: var(--ink); }
.v-list .card { width: min(320px, 86%); padding: 18px; display: grid; gap: 12px; position: relative; z-index: 1; }
.v-list .fix { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: center; }
.v-list .fix .n { width: 24px; height: 24px; border-radius: 8px; background: var(--mist); color: var(--slate); font-size: var(--t12); font-weight: 700; display: grid; place-items: center; }
.v-list .fix.first .n { background: var(--teal); color: var(--white); }
.v-list .fix .lines { display: grid; gap: 6px; }
.v-test .card { width: min(320px, 86%); padding: 16px; display: grid; gap: 10px; position: relative; z-index: 1; }
.v-test .trow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--hair); }
.v-test .trow .ui-row { gap: 8px; }

/* Included in every build, add-on pills */
.extras { margin-top: clamp(48px, 6vw, 80px); padding: clamp(24px, 3vw, 40px); background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-sm); display: grid; gap: clamp(28px, 3vw, 40px); }
.extras h3 { font-size: var(--t18); font-weight: 600; margin-bottom: 16px; }
.included { display: grid; gap: 20px; }
@media (min-width: 640px) { .included { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .included { grid-template-columns: repeat(4, 1fr); } }
.included li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; font-size: var(--t16); color: var(--muted); line-height: 1.5; }
.included li b { display: block; color: var(--ink); font-weight: 600; }
.addons { display: flex; flex-wrap: wrap; gap: 10px; }
.addons li { display: flex; align-items: flex-start; gap: 10px; padding: 12px 18px 12px 12px; border-radius: var(--r-ui); background: var(--mist); font-size: var(--t16); line-height: 1.5; color: var(--muted); max-width: 560px; }
.addons li b { color: var(--ink); font-weight: 600; }
.addons .ichip { width: 32px; height: 32px; background: var(--white); }

/* 7 check pills */
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 6px; border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--hair); font-size: var(--t14); font-weight: 600; color: var(--ink); }
.checks .n { width: 24px; height: 24px; border-radius: 50%; background: var(--mist); color: var(--slate); font-size: var(--t12); display: grid; place-items: center; }
.fine { color: var(--muted); font-size: var(--t16); max-width: 52ch; }

/* ---------- Demos [DEMO] ---------- */
html:not(.show-demos) [data-demo] { display: none !important; }
html.show-demos [data-demo-off] { display: none !important; }
html:not(.show-demos) [data-sample] { display: none !important; }
.demo-tiles { display: grid; gap: 16px; }
@media (min-width: 900px) { .demo-tiles { grid-template-columns: repeat(3, 1fr); } }
.demo-tile { padding: 12px 12px 24px; background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-sm); display: grid; gap: 14px; }
.demo-tile .xpic { height: 188px; }
.demo-tile .h3, .demo-tile p { padding-inline: 12px; }
.demo-tile p { color: var(--muted); font-size: var(--t16); }

/* ---------- Promises ---------- */
.promises { display: grid; gap: 16px; }
@media (min-width: 900px) { .promises { grid-template-columns: 1fr 1fr; } }
.promise { position: relative; padding: clamp(28px, 3vw, 40px); background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-sm); display: grid; gap: 16px; align-content: start; overflow: hidden; }
.promise .ichip { width: 48px; height: 48px; border-radius: 14px; }
.promise .ichip .ic { width: 24px; height: 24px; }
.promise h3 { font-size: var(--h3); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.promise p { color: var(--muted); max-width: 46ch; }
.also { margin-top: 32px; display: grid; gap: 16px; }
@media (min-width: 900px) { .also { grid-template-columns: 1fr 1fr; gap: 32px; } }
.also li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; font-size: var(--t16); color: var(--muted); }
.also li b { color: var(--ink); font-weight: 600; }
.founder-line { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; color: var(--muted); font-size: var(--t16); }
.founder-line p { max-width: 64ch; }

/* ---------- Ink band with a rounded lip ---------- */
.ink-band { position: relative; background: var(--ink); color: var(--on-ink); margin-top: 32px; }
.ink-band::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 32px; background: var(--ivory); border-radius: 0 0 32px 32px; }
.ink-band .h2 .tone { color: rgb(232 240 242 / .64); }
.ink-band .lede { color: var(--on-ink-muted); }
.steps-wrap { position: relative; }
.steps { position: relative; display: grid; grid-template-rows: repeat(5, auto); row-gap: 16px; grid-auto-flow: column; grid-auto-columns: min(82%, 340px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: thin; }
.step { scroll-snap-align: start; display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 16px; align-content: start; }
.step-pic { position: relative; height: 200px; border-radius: var(--r-ui); overflow: hidden; display: grid; place-items: center; }
.step-num { position: relative; display: flex; align-items: center; gap: 12px; font-size: var(--t14); font-weight: 600; color: var(--on-ink); }
.step-num span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: var(--white); font-size: var(--t14); flex: none; }
.step h3 { font-size: var(--t20); font-weight: 600; line-height: 1.3; }
.step p { color: var(--on-ink-muted); font-size: var(--t16); }
.step .from { align-self: stretch; padding: 12px; border-radius: 14px; background: rgb(232 240 242 / .08); color: var(--on-ink); font-size: var(--t14); line-height: 1.5; }
.step .from b { font-weight: 600; font-style: italic; }
.steps-line { display: none; }
@media (min-width: 1024px) {
  .steps { grid-auto-flow: column; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; column-gap: 24px; row-gap: 16px; }
  .steps-line { display: block; position: absolute; left: 16px; right: 0; top: 232px; height: 2px; background: var(--on-ink-hair); border-radius: 2px; }
  .steps-line i { position: absolute; inset: 0; background: var(--teal); transform-origin: left; transform: scaleX(1); border-radius: 2px; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
    .steps-line i { animation: line-fill linear both; animation-timeline: view(); animation-range: entry 40% cover 55%; }
  }
}
@keyframes line-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.step-pic .card { position: relative; z-index: 1; width: min(250px, 86%); padding: 14px; display: grid; gap: 8px; font-size: var(--t14); color: var(--ink); }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: 32px; }
@media (min-width: 1024px) { .faq-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; } .faq-grid .head { position: sticky; top: 112px; margin-bottom: 0; } }
.faq details { border-top: 1px solid var(--hair); }
.faq details:last-child { border-bottom: 1px solid var(--hair); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 68px; padding: 12px 0; cursor: pointer; font-weight: 600; font-size: var(--t18); line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline-offset: 4px; }
.faq .plus { position: relative; width: 36px; height: 36px; border-radius: var(--r-chip); background: rgb(22 38 46 / .05); flex: none; transition: transform 150ms var(--ease-out), background-color 150ms var(--ease-ui); }
.faq .plus::before, .faq .plus::after { content: ""; position: absolute; left: 11px; right: 11px; top: 17px; height: 2px; border-radius: 1px; background: var(--ink); }
.faq .plus::after { transform: rotate(90deg); }
.faq summary:hover .plus { background: rgb(22 38 46 / .09); }
.faq details[open] .plus { transform: rotate(45deg); }
.faq details > p { color: var(--muted); padding: 0 52px 24px 0; max-width: 62ch; }

/* ---------- Closing panel ---------- */
.closing { padding-block: clamp(56px, 7vw, 112px); }
.closing .field .veil { background: radial-gradient(ellipse 80% 70% at 30% 45%, rgb(246 247 235 / .95), rgb(246 247 235 / .6) 60%, rgb(246 247 235 / .1)); }
.closing .dots { -webkit-mask-image: radial-gradient(ellipse 60% 60% at 30% 45%, transparent 35%, #000 80%); mask-image: radial-gradient(ellipse 60% 60% at 30% 45%, transparent 35%, #000 80%); }
.closing-grid { position: relative; display: grid; gap: 24px; justify-items: start; max-width: 720px; }
.closing-grid .lede { color: var(--slate); }
.bookend { position: absolute; z-index: -1; right: -7%; bottom: -16%; width: clamp(220px, 30vw, 440px); height: auto; pointer-events: none; }
@media (max-width: 899px) { .bookend { right: -18%; bottom: -10%; width: 240px; opacity: .35; } }
.next { display: grid; gap: 0; counter-reset: nx; width: 100%; max-width: 640px; }
.next li { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 14px; padding-bottom: 18px; font-size: var(--t16); color: var(--ink); }
.next li::before { counter-increment: nx; content: counter(nx); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--white); border: 1px solid var(--hair); color: var(--slate); font-size: var(--t14); font-weight: 700; position: relative; z-index: 1; }
.next li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: rgb(60 122 137 / .35); border-radius: 1px; }
.next li span { padding-top: 4px; }
.next-title { font-size: var(--t16); font-weight: 600; }

/* ---------- Footer: ink card ---------- */
.site-footer { margin: clamp(48px, 6vw, 96px) var(--panel-gutter) var(--panel-gutter); background: var(--ink); color: var(--on-ink); border-radius: var(--r-panel); padding: clamp(32px, 5vw, 64px); display: grid; gap: 36px; }
.site-footer .statement { font-size: clamp(1.5rem, 1rem + 2vw, 2rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; max-width: 26ch; color: var(--on-ink); margin-top: 28px; text-wrap: balance; }
.site-footer .statement .tone { color: rgb(232 240 242 / .64); font-style: italic; }
.foot-logo { width: 168px; height: auto; }
.foot-nav { display: grid; align-content: start; }
.foot-nav a { color: var(--on-ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t16); }
.foot-nav a:hover { text-decoration: underline; text-underline-offset: .22em; }
.foot-title { font-size: var(--t14); color: var(--on-ink-muted); font-weight: 600; margin-bottom: 4px; }
.legal { border-top: 1px solid var(--on-ink-hair); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: var(--t14); color: var(--on-ink-muted); }
@media (min-width: 900px) { .site-footer { grid-template-columns: 1.6fr 1fr 1fr; } .legal { grid-column: 1 / -1; } }

/* ---------- Inner page heroes (Services, About, Contact) ---------- */
.page-hero { padding-block: clamp(48px, 6vw, 112px) clamp(48px, 6vw, 104px); }
.page-hero-inner { display: grid; gap: 24px; justify-items: start; max-width: 1120px; }   /* wide enough that each half of a two-line H1 sits on one line */
.page-hero .lede { color: var(--slate); max-width: 52ch; }

/* ---------- Services: sticky switchback (the picture stays, the parts scroll past) ---------- */
.sticky-switch { display: grid; gap: 40px; }
.part { display: grid; gap: 16px; scroll-margin-top: 96px; }
.part + .part { padding-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--hair); }
@media (max-width: 1023px) { .part:not(:last-child) { padding-bottom: 40px; } }   /* phones: the list no longer sits on the divider */
.part .outcome { font-size: var(--h3); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.part .kicker { display: flex; align-items: center; gap: 12px; font-size: var(--t14); font-weight: 600; color: var(--slate); }
.part h4 { font-size: var(--t14); font-weight: 600; color: var(--muted); text-transform: none; margin-bottom: 6px; }
.part p { color: var(--muted); max-width: 58ch; }
.part .notice { color: var(--ink); }
.ticks { display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; color: var(--ink); font-size: var(--t16); line-height: 1.5; }
.ticks li::before { content: ""; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C7A89' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.part-pic { display: grid; height: 360px; border-radius: var(--r-tile); overflow: hidden; }
.part-pic > .vt { display: grid; place-items: center; }
.sticky-tile { display: none; }
@media (min-width: 1024px) {
  .sticky-switch { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; }
  .sticky-tile { display: grid; position: sticky; top: 112px; height: min(560px, calc(100vh - 160px)); border-radius: var(--r-tile); overflow: hidden; }
  .sticky-tile > .vt { grid-area: 1 / 1; display: grid; place-items: center; opacity: 0; transition: opacity 300ms var(--ease-ui); }
  .sticky-tile > .vt.is-active { opacity: 1; }
  .part-pic { display: none; }
  .part { min-height: 62vh; align-content: center; }
  /* The picture switches when a part reaches mid-screen and lets go when the parts run out, so the last
     picture was pinned for about 380px of scroll against 560px for the others. The extra room evens that out. */
  .parts > .part:last-child { margin-bottom: 20vh; }
}
.included-row { margin-top: clamp(48px, 6vw, 80px); display: grid; gap: 12px; }
@media (min-width: 640px) { .included-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .included-row { grid-template-columns: repeat(4, 1fr); } }
.included-row li { display: grid; gap: 10px; align-content: start; padding: 20px; background: var(--white); border-radius: var(--r-ui); box-shadow: var(--shadow-sm); font-size: var(--t16); color: var(--muted); line-height: 1.5; }
.included-row li b { color: var(--ink); font-weight: 600; }
.already { margin-top: 28px; display: grid; gap: 4px; }

/* Add-on cards */
.addon-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .addon-grid { grid-template-columns: 1fr 1fr; } }
.addon { padding: clamp(24px, 3vw, 36px); background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-sm); display: grid; gap: 16px; align-content: start; scroll-margin-top: 96px; }
.addon .kicker { display: flex; align-items: center; gap: 12px; font-size: var(--t16); font-weight: 600; color: var(--ink); }
.addon .outcome { font-size: var(--t20); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.addon h4 { font-size: var(--t14); font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.addon p { color: var(--muted); font-size: var(--t16); }

/* How it connects: eight stops on one line */
.connect { position: relative; display: grid; gap: 0; }
.connect li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding-bottom: 20px; }
.connect li::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--on-ink-hair); }
.connect li:last-child::before { display: none; }
.connect .cdot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgb(232 240 242 / .08); color: var(--mist); border: 1px solid var(--on-ink-hair); position: relative; z-index: 1; }
.connect .cdot .ic { width: 18px; height: 18px; }
.connect .fd .cdot { background: var(--teal); color: var(--white); border-color: var(--teal); }
.connect b { display: block; font-size: var(--t16); font-weight: 600; color: var(--on-ink); padding-top: 2px; }
.connect span { font-size: var(--t14); color: var(--on-ink-muted); }
.connect-key { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; font-size: var(--t14); color: var(--on-ink-muted); }
.connect-key span { display: inline-flex; align-items: center; gap: 8px; }
.connect-key i { width: 12px; height: 12px; border-radius: 50%; background: var(--teal); }
.connect-key i.add { background: rgb(232 240 242 / .2); border: 1px solid var(--on-ink-hair); }
@media (min-width: 1024px) {
  .connect { grid-template-columns: repeat(8, 1fr); gap: 8px; }
  .connect li { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-bottom: 0; gap: 12px; }
  .connect li::before { left: calc(50% + 24px); right: calc(-50% + 24px); top: 19px; bottom: auto; width: auto; height: 2px; }
  .connect .fd-group { position: absolute; }
}
.connect-note { margin-top: 32px; }
.connect-note.voice { color: var(--on-ink); max-width: 60ch; }

/* Who runs it */
.runs { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 900px) { .runs { grid-template-columns: repeat(3, 1fr); } }
.runs li { padding: 22px; border-radius: var(--r-ui); background: var(--mist); display: grid; gap: 6px; font-size: var(--t16); color: var(--muted); line-height: 1.5; }
.runs li b { color: var(--ink); font-weight: 600; }
.subhead { font-size: var(--t20); font-weight: 600; letter-spacing: -0.01em; margin-top: clamp(40px, 5vw, 64px); }
.results-line { margin-top: 28px; padding: 22px 24px; border-radius: var(--r-ui); border: 1px solid var(--hair); display: grid; gap: 4px; max-width: 760px; }
.results-line b { font-weight: 600; }
.results-line p { color: var(--muted); }

/* ---------- About ---------- */
.founder-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .founder-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; } }
/* Cut-out photo breaking out of the top of a rounded field tile. The tile fills the bottom 80%. */
.portrait { position: relative; aspect-ratio: 4 / 4.6; max-width: 460px; width: 100%; justify-self: center; }
/* Full photo, garden kept (Ryan, Oct 20): the sunlight on the face only reads right with its real background. */
.portrait .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: var(--r-tile); }
.founder-copy { display: grid; gap: 20px; }
.founder-copy .h2 { font-size: clamp(2rem, 1.25rem + 2vw, 2.5rem); }
.founder-copy p { color: var(--muted); max-width: 54ch; }
.ways { display: grid; gap: 16px; }
@media (min-width: 768px) { .ways { grid-template-columns: 1fr 1fr; } }
.ways li { padding: clamp(24px, 3vw, 32px); background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-sm); display: grid; gap: 12px; align-content: start; }
.ways h3 { font-size: var(--t20); font-weight: 600; line-height: 1.3; }
.ways p { color: var(--muted); font-size: var(--t16); }
.where { display: flex; align-items: center; gap: 16px; padding: 24px 32px; border-radius: var(--r-card); background: var(--mist); }
.where p { font-size: var(--t18); color: var(--ink); text-wrap: balance; }

/* ---------- Contact ---------- */
.contact-panel { padding-block: clamp(40px, 5vw, 96px); }
.contact-panel .field .veil { background: linear-gradient(180deg, rgb(246 247 235 / .96) 0 30%, rgb(246 247 235 / .6) 60%, rgb(246 247 235 / .3)); }
.contact-panel .dots { -webkit-mask-image: linear-gradient(180deg, transparent 0 30%, #000 80%); mask-image: linear-gradient(180deg, transparent 0 30%, #000 80%); }
.contact-grid { display: grid; gap: 40px; align-items: start; }
/* Phones and tablets: heading, then the form, then the checks and what you get (CRO pass, Oct 20). Desktop: form beside both. */
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); grid-template-rows: auto 1fr; column-gap: 64px; row-gap: 24px; }
  .contact-intro { grid-column: 1; grid-row: 1; }
  .contact-grid > .form-card { grid-column: 2; grid-row: 1 / span 2; }
  .contact-details { grid-column: 1; grid-row: 2; }
}
.contact-intro, .contact-details { display: grid; gap: 24px; justify-items: start; }
.contact-intro .lede { color: var(--slate); }
.getlist { display: grid; gap: 10px; }
.getlist li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--ink); font-size: var(--t16); }
.form-card { position: relative; padding: clamp(24px, 3.5vw, 44px); background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-md); }
.form { display: grid; gap: 20px; }
.form-row { display: grid; gap: 8px; }
.form-row label, .form-row .lbl { font-size: var(--t16); font-weight: 600; color: var(--ink); }
.form-row .opt { font-weight: 400; color: var(--muted); }
.hint { font-size: var(--t14); color: var(--muted); line-height: 1.5; }
.input { width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid rgb(22 38 46 / .28); border-radius: var(--r-chip); background: var(--white); color: var(--ink); font: 400 var(--t16)/1.5 var(--font);
  transition: border-color 150ms var(--ease-ui), box-shadow 150ms var(--ease-ui); }
textarea.input { min-height: 120px; height: 120px; resize: vertical; }
.input::placeholder { color: rgb(82 100 109 / .8); }
.input:hover { border-color: rgb(22 38 46 / .45); }
.input:focus-visible, .input:focus { outline: 2px solid var(--slate); outline-offset: 1px; border-color: var(--slate); }
.input[aria-invalid="true"] { border-color: #B3412A; box-shadow: 0 0 0 3px rgb(179 65 42 / .12); }
.error-msg { display: flex; gap: 8px; align-items: flex-start; font-size: var(--t14); color: #9C3721; line-height: 1.45; }
.error-msg svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.consent { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; padding: 16px; border-radius: var(--r-chip); background: var(--mist); cursor: pointer; font-size: var(--t16); line-height: 1.5; color: var(--ink); }
.consent input { appearance: none; -webkit-appearance: none; width: 28px; height: 28px; margin: 0; border-radius: 8px; border: 1.5px solid rgb(22 38 46 / .4); background: var(--white); display: grid; place-items: center; cursor: pointer;
  transition: background-color 150ms var(--ease-ui), border-color 150ms var(--ease-ui); }
.consent input::after { content: ""; width: 14px; height: 8px; border-left: 2.5px solid var(--white); border-bottom: 2.5px solid var(--white); transform: translateY(-2px) rotate(-45deg) scale(.6); opacity: 0; transition: opacity 150ms var(--ease-ui), transform 150ms var(--ease-out); }
.consent input:checked { background: var(--slate); border-color: var(--slate); }
.consent input:checked::after { opacity: 1; transform: translateY(-2px) rotate(-45deg) scale(1); }
.consent input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: grid; gap: 12px; justify-items: start; }
.form-note { font-size: var(--t14); color: var(--muted); }
.form .btn .spinner { display: none; width: 18px; height: 18px; border-width: 2px; border-color: rgb(22 38 46 / .25); border-top-color: var(--ink); }
.form .btn[aria-busy="true"] .spinner { display: block; animation: spin 800ms linear infinite; }
.form .btn[aria-busy="true"] .arrow { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-chip); background: #FBEDE7; color: #7A2B19; font-size: var(--t16); line-height: 1.5; }
.alert svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.alert a { color: inherit; }
.success { display: grid; gap: 18px; justify-items: start; }
.success:focus { outline: none; }
.success .badge { width: 52px; height: 52px; border-radius: 50%; background: var(--teal); color: var(--white); display: grid; place-items: center; }
.success .badge svg { width: 26px; height: 26px; }
.success .h2 { font-size: clamp(2rem, 1.25rem + 2vw, 2.5rem); }
.success p { color: var(--muted); }
.success.enter { animation: rise 300ms var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.prefer { font-size: var(--t16); color: var(--muted); }

/* ---------- Finished state for screenshots ---------- */
html.settle *, html.settle *::before, html.settle *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-delay: 0ms !important; }

/* ---------- Reduced motion: still field, finished pictures, no progress lines, click to switch ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .field .strip { transform: none !important; }
  .item .progress, .stop .timer, .pause { display: none !important; }
  .form .btn[aria-busy="true"] .spinner { animation: none; }
}

/* ---------- Small helpers used inside pictures ---------- */
.lines { flex: 1; display: grid; gap: 6px; min-width: 0; }
.stars-svg { width: 64px; height: 13px; fill: var(--teal); stroke: none; flex: none; }
.stars-svg.empty { fill: rgb(22 38 46 / .16); }
.review-intro { display: grid; gap: 24px; justify-items: start; }
.get-title { font-size: var(--t14); font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.frame-mini { height: 92px; border-radius: 14px; display: grid; place-items: center; }
.frame-mini .playbtn { width: 40px; height: 40px; border-radius: 50%; background: rgb(255 255 255 / .92); display: grid; place-items: center; color: var(--ink); }
.frame-mini .playbtn .ic { width: 16px; height: 16px; fill: currentColor; stroke: none; margin-left: 2px; }

/* Contact: what happens next, Services: parts column */
.next-wrap { display: grid; gap: 32px; }
.next-big { max-width: none; }
.next-big li { font-size: var(--t18); padding-bottom: 24px; }
.next-big li b { font-weight: 600; }
@media (min-width: 1024px) {
  .next-big { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .next-big li { grid-template-columns: 1fr; gap: 16px; padding-bottom: 0; }
  .next-big li:not(:last-child)::after { left: 44px; right: -20px; top: 15px; bottom: auto; width: auto; height: 2px; }
}
.parts { display: grid; }
.contact-details .ticks li { font-size: var(--t16); }
/* Inline links inside sentences: 44px tall hit area without changing the line */
.form-note a, .prefer a, .alert a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.faq-grid .head .founder-line { margin-top: 12px; padding-top: 20px; flex-direction: column; align-items: flex-start; gap: 4px; }
.promise-wide { grid-template-columns: 48px 1fr; align-items: start; gap: 20px; margin-bottom: 12px; }
.promise-wide h3 { margin-bottom: 8px; }
@media (min-width: 1024px) { .connect b, .connect span { white-space: nowrap; } }
.head > .label { justify-self: stretch; }

/* Contact: what happens next, as three pictured steps on a path (light version of the How it works band) */
.nextcards { display: grid; row-gap: 16px; }
.nextcards .ncard + .ncard { margin-top: 24px; }
.ncard { display: grid; row-gap: 16px; }
@media (min-width: 1024px) { .ncard { grid-row: span 3; grid-template-rows: subgrid; } }
.ncard p { color: var(--muted); font-size: var(--t18); line-height: 1.5; max-width: 34ch; }
.ncard p b { color: var(--ink); font-weight: 600; }
.ncard .step-num { color: var(--ink); }
.ncard .step-num span { background: var(--white); color: var(--slate); border: 1px solid var(--hair-strong); }
.next-steps-wrap .steps-line { background: var(--hair); }
.fixrow { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: center; }
.fixrow .n { width: 24px; height: 24px; border-radius: 8px; background: var(--mist); color: var(--slate); font-size: var(--t12); font-weight: 700; display: grid; place-items: center; }
@media (min-width: 1024px) {
  .nextcards { grid-template-rows: repeat(3, auto); grid-auto-flow: column; grid-template-columns: repeat(3, 1fr); column-gap: 24px; }
  .nextcards .ncard + .ncard { margin-top: 0; }
}

/* Profile picture: each check pops in as it is ticked, and a four-part bar fills as the profile completes */
.v-profile .meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.v-profile .meter i { position: relative; height: 6px; border-radius: 3px; overflow: hidden; background: rgb(22 38 46 / .1); }
.v-profile .meter i::after { content: ""; position: absolute; inset: 0; background: var(--teal); transform-origin: left center; transition: transform 450ms var(--ease-out); }
.v-profile.play:not(.s1) .m1::after, .v-profile.play:not(.s2) .m2::after, .v-profile.play:not(.s3) .m3::after, .v-profile.play:not(.s4) .m4::after { transform: scaleX(0); }
.v-profile .check-dot { transition: background-color 250ms var(--ease-ui), color 250ms var(--ease-ui), transform 380ms var(--ease-out); }
.v-profile.play:not(.s1) .c1, .v-profile.play:not(.s2) .c2, .v-profile.play:not(.s3) .c3, .v-profile.play:not(.s4) .c4 { transform: scale(.6); }
.v-profile .rows > div { transition: background-color 300ms var(--ease-ui); }

/* About: Why Palmway, four sourced numbers */
.stats { display: grid; gap: 16px; }
@media (min-width: 640px) { .stats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat-card { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.5vw, 32px); background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-sm); }
.stat-card .big { font-size: var(--h2); font-weight: var(--display-weight); letter-spacing: -0.03em; line-height: 1; color: var(--slate); }
.stat-card .big small { font-size: var(--t20); font-weight: 500; letter-spacing: -0.01em; color: var(--muted); margin-right: 4px; }
.stat-card p { color: var(--ink); font-size: var(--t18); line-height: 1.45; text-wrap: balance; }
.stat-card .src { margin-top: auto; padding-top: 8px; font-size: var(--t14); color: var(--muted); }
.stat-card .src a { color: var(--muted); display: inline-block; padding-block: 12px; margin-block: -12px; }
.founder-copy p + p { margin-top: -4px; }

/* Privacy page: one readable column, hairline between topics */
.policy { max-width: 720px; }
.policy > section { padding-block: 32px; border-top: 1px solid var(--hair); }
.policy > section:first-child { padding-top: 0; border-top: 0; }
.policy h2 { margin: 0 0 12px; font-size: var(--h3); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.policy p { margin: 0; max-width: 64ch; }
.policy p + p, .policy p + ul, .policy ul + p { margin-top: 12px; }
.policy ul { margin: 0; padding-left: 1.25em; list-style: disc; display: grid; gap: 8px; max-width: 64ch; }
.policy a { display: inline-block; padding-block: 12px; margin-block: -12px; }