/* VLD Marketing: neighborly and sunlit. Ink and paper from the logo and their shades only; the color comes from the footage. */

@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }

:root {
  --ink: #231F20;
  --ink-2: #463E40;
  --ink-3: #776D6F;
  --ink-4: #B8AFB1;
  --muted: #6B6264;
  --paper: #FBFAF9;
  --sand: #F1EDEA;
  --sand-2: #E6E0DC;
  --card: #FFFFFF;
  --coral: #231F20;
  --coral-d: #231F20;
  --coral-l: #ECE7E3;
  --garden: #231F20;
  --garden-d: #1A1718;
  --leaf: #231F20;
  --amber: #776D6F;
  --butter: #E6E0DC;
  --line: rgba(35, 31, 32, .12);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r: 28px;
  --shadow-card: 0 1px 2px rgba(35, 31, 32, .06), 0 18px 40px -16px rgba(35, 31, 32, .28);
  --shadow-float: 0 2px 6px rgba(35, 31, 32, .10), 0 24px 48px -14px rgba(35, 31, 32, .42);
  --glass: rgba(255, 255, 255, .80);
  --wrap: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-family: var(--serif); font-weight: 600; font-variation-settings: "SOFT" 100, "WONK" 0; letter-spacing: -.02em; line-height: 1.06; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 500; color: var(--coral-d); font-variation-settings: "SOFT" 100, "WONK" 1; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--coral-d); outline-offset: 3px; border-radius: 6px; }


/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--coral-d); color: #fff; font: 650 17px/1.1 var(--sans); padding: 16px 26px; border-radius: 999px; text-decoration: none; border: 0; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 22px -10px rgba(35, 31, 32, .7); transition: background-color .2s, transform .2s, box-shadow .2s; }
.btn:hover { background: #3A3335; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 14px 26px -10px rgba(35, 31, 32, .75); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.btn--big { width: 100%; padding: 18px 24px; font-size: 18px; }
.btn--sm { padding: 11px 18px; font-size: 15px; }
.btn--light { background: #fff; color: var(--ink); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); }
.btn--light:hover { background: var(--paper); }
.btn--light:focus-visible, .foot .btn:focus-visible { outline-color: var(--butter); }

/* ---------- top bar ---------- */
.bar { position: sticky; top: 0; z-index: 50; background: rgba(251, 250, 249, .86); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.bar[data-scrolled] { border-bottom-color: var(--line); box-shadow: 0 8px 24px -20px rgba(35, 31, 32, .5); }
.bar__in { max-width: 1320px; margin: 0 auto; padding: 10px 40px; display: flex; align-items: center; gap: 28px; }
.bar__logo img { height: 54px; width: auto; }
.bar__nav { display: flex; gap: 26px; margin-left: auto; }
.bar__nav a { font: 550 15.5px/1 var(--sans); text-decoration: none; color: var(--ink-2); padding: 8px 0; background: linear-gradient(var(--coral), var(--coral)) left 100% / 0 2px no-repeat; transition: background-size .25s, color .2s; }
.bar__nav a:hover { color: var(--ink); background-size: 100% 2px; }
.bar__menu { display: none; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 12px; cursor: pointer; position: relative; }
.bar__menu i { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s; }
.bar__menu i:first-of-type { top: 17px; }
.bar__menu i:last-of-type { top: 25px; }
.bar__menu[aria-expanded="true"] i:first-of-type { transform: translateY(4px) rotate(45deg); }
.bar__menu[aria-expanded="true"] i:last-of-type { transform: translateY(-4px) rotate(-45deg); }
.menu { padding: 8px 20px 22px; display: grid; gap: 4px; border-top: 1px solid var(--line); }
.menu[hidden] { display: none; }
.menu a:not(.btn) { font: 600 19px/1 var(--sans); text-decoration: none; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.menu .btn { margin-top: 14px; }

/* ---------- stop icon ---------- */
.stop { position: absolute; top: 16px; right: 16px; z-index: 6; width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 14px -6px rgba(35, 31, 32, .45); }
.stop::before, .stop::after { content: ""; position: absolute; top: 13px; width: 3.5px; height: 12px; border-radius: 2px; background: var(--ink); }
.stop::before { left: 14px; }
.stop::after { left: 20.5px; }
.stop[aria-pressed="true"]::before { left: 15px; top: 12px; width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--ink); }
.stop[aria-pressed="true"]::after { display: none; }
.stop--light { background: rgba(255, 255, 255, .22); }
.stop--light::before, .stop--light::after { background: #fff; }
.stop--light[aria-pressed="true"]::before { border-color: transparent transparent transparent #fff; }

/* ---------- glass notification (header tiles, steps) ---------- */
.note, .push, .toast { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; padding: 11px 14px 11px 11px; border-radius: 18px; background: var(--glass); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--shadow-float); color: var(--ink); text-align: left; }
.note b, .push b, .toast b { display: block; font: 700 14.5px/1.25 var(--sans); }
.note small, .push small, .toast small { display: block; font: 500 12.5px/1.35 var(--sans); color: var(--ink-2); margin-top: 2px; }
.note em { font: 600 11.5px/1 var(--sans); font-style: normal; color: var(--muted); align-self: start; padding-top: 3px; }
.note__ico { width: 38px; height: 38px; border-radius: 11px; background: var(--coral); position: relative; display: block; }
.note__ico::after { content: ""; position: absolute; inset: 9px; background: #fff; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ico-cal { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17M9 15l2 2 4-4'/%3E%3C/svg%3E"); }
.ico-call { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E"); background: var(--leaf) !important; }
.ico-chat { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 0 1-11.6 7.1L4 20l1-4A8 8 0 1 1 20 12z'/%3E%3C/svg%3E"); background: var(--ink) !important; }
.ico-star { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2.8l2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17.2l-5.6 3 1.1-6.3L2.9 9.5l6.3-.9z'/%3E%3C/svg%3E"); background: #F4B400 !important; }

/* =========================================================
   1. HEADER
   ========================================================= */
.hero { position: relative; padding: 22px 0 72px; background: radial-gradient(55% 60% at 88% 6%, var(--sand), transparent 66%), var(--paper); }
.hero__in { max-width: 1440px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: minmax(0, 530px) minmax(0, 1fr); gap: 52px; align-items: start; }
.hero__copy { padding-top: 14px; }
.hero__title { font-size: clamp(40px, 4.2vw, 60px); line-height: 1.04; margin-bottom: 18px; }
.hero__title > span { display: block; }
.hero__title .l2 { font-size: .9em; padding: .04em 0 .02em; }
.hero__title .l2 em { display: inline-block; white-space: nowrap; transform: translateY(calc(var(--kit-swap, 0) * 6px)); opacity: calc(1 - var(--kit-swap, 0) * .6); }
.hero__title .l3 { font-size: 1.32em; line-height: 1; }
.mark { position: relative; display: inline-block; z-index: 0; }
.mark__ink { position: absolute; left: -2%; right: -4%; bottom: -.1em; width: 106%; height: .3em; z-index: -1; overflow: visible; }
.mark__ink path { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.hero__lede { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 520px; margin-bottom: 22px; }

/* the picker with its month */
.pick { background: var(--card); border-radius: 26px; padding: 20px 20px 16px; box-shadow: var(--shadow-card); max-width: 530px; position: relative; }
.pick__set { border: 0; margin: 0; padding: 0; min-width: 0; }
.pick__q { font: 700 16.5px/1.3 var(--sans); padding: 0; margin-bottom: 12px; }
.pick__opts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pick__opts label { position: relative; cursor: pointer; }
.pick__opts input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pick__opts span { display: grid; place-items: center; height: 46px; border-radius: 14px; border: 1.5px solid var(--line); font: 700 17px/1 var(--sans); background: #fff; transition: border-color .2s, background-color .2s, color .2s, transform .2s; }
.pick__opts label:hover span { border-color: rgba(35, 31, 32, .45); }
.pick__opts input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.pick__opts input:focus-visible + span { outline: 3px solid var(--coral-d); outline-offset: 2px; }
.cal { margin: 12px 0 10px; background: #F7F5F3; border: 1px solid rgba(35, 31, 32, .07); border-radius: 18px; padding: 10px 12px 8px; }
.cal__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.cal__head b { font: 600 17px/1.2 var(--serif); font-variation-settings: "SOFT" 100; letter-spacing: -.01em; white-space: nowrap; }
.cal__key > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cal__key { font: 600 12px/1 var(--sans); color: var(--muted); display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; justify-content: flex-end; }
.cal__key i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cal__key { gap: 4px 10px !important; }
.k-maps { background: var(--ink); }
.k-call { background: var(--ink-3); }
.k-chat { background: var(--ink-4); }
.cal__grid, .cal__nums { display: grid; grid-template-columns: repeat(var(--n, 30), minmax(0, 1fr)); gap: 3px; }
.cal__grid { height: 52px; margin-top: 4px; }
.cal__grid .d { position: relative; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1px rgba(35, 31, 32, .07); display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; padding: 4px 0; }
.cal__grid .d--we { background: var(--sand); box-shadow: none; }
.cal__grid .dot { width: min(9px, 72%); aspect-ratio: 1; border-radius: 3px; flex: none; transform: scale(var(--s, 0)); opacity: min(1, calc(var(--s, 0) * 2)); }
.cal__nums { margin-top: 4px; }
.cal__nums span:first-child { text-align: left; }
.cal__nums span { font: 700 11px/1 var(--sans); color: var(--muted); text-align: center; white-space: nowrap; overflow: visible; }
.dot.m { background: var(--ink); }
.dot.c { background: var(--ink-3); }
.dot.h { background: var(--ink-4); }
.pick__read { font: 500 14px/1.4 var(--sans); color: var(--ink-2); margin-bottom: 14px; min-height: 1.4em; }
.pick__read b { color: var(--ink); font-weight: 750; }
.trust { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; padding: 0; font: 550 13.5px/1.3 var(--sans); color: var(--ink-2); }
.trust li { display: flex; align-items: center; gap: 6px; }
.trust li::before { content: ""; width: 15px; height: 15px; border-radius: 50%; background: var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-4.8'/%3E%3C/svg%3E") center / 15px no-repeat; }

/* the mosaic */
.mosaic { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, auto); gap: 18px; padding: 4px 0 34px; }
.mosaic .stop--hero { top: auto; bottom: -22px; right: 0; }
.tile { margin: 0; position: relative; aspect-ratio: 1 / 1.42; border-radius: 24px; z-index: 1; transform: translateY(var(--dy, 0)) scale(calc(1 + var(--kit-in, 0) * .045)); transition: none; }
.tile.t1, .tile.t4 { --dy: 28px; }
.tile.t3, .tile.t6 { --dy: 14px; }
.tile video { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; background: var(--sand); filter: saturate(calc(var(--kit-in, 0) * 1.05)) sepia(calc(.14 - var(--kit-in, 0) * .14)) brightness(calc(1.06 - var(--kit-in, 0) * .06)) contrast(calc(.92 + var(--kit-in, 0) * .08)); box-shadow: 0 1px 2px rgba(35, 31, 32, .08); }
.tile::after { content: ""; position: absolute; inset: 0; border-radius: 24px; background: rgba(251, 250, 249, calc(.3 - var(--kit-in, 0) * .3)); pointer-events: none; }
.tile[data-kit-on] { z-index: 3; }
.tile[data-kit-on] video { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink), 0 30px 50px -22px rgba(35, 31, 32, .55); }
.tile .note { position: absolute; bottom: 14px; width: 290px; z-index: 4; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.96); pointer-events: none; }
.tile[data-kit-on] .note { visibility: visible; opacity: min(1, calc(var(--kit-in, 0) * 1.6)); transform: translateY(calc((1 - var(--kit-in, 0)) * 26px)) scale(calc(.94 + var(--kit-in, 0) * .06)); }
.t1 .note, .t4 .note { left: -10px; }
.t2 .note, .t5 .note { left: 50%; margin-left: -145px; }
.t3 .note, .t6 .note { right: -10px; }
.t1 .note, .t2 .note, .t3 .note { bottom: -30px; }

/* =========================================================
   sections
   ========================================================= */
.sec { padding: 112px 40px; }
.sec__head { max-width: 780px; margin: 0 auto 64px; text-align: center; }
.sec__head h2 { font-size: clamp(36px, 4.3vw, 58px); margin-bottom: 18px; }
.sec__head > p:last-child { font-size: 19px; color: var(--ink-2); max-width: 660px; margin: 0 auto; }
.sec__head--light h2 { color: #fff; }
.sec__head--light h2 em { color: var(--butter); }
.sec__head--light > p:last-child { color: rgba(255, 255, 255, .82); }
.sec__cta { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 44px; flex-wrap: wrap; text-align: center; }
.sec__cta span { color: var(--ink-2); font-size: 15.5px; }

/* =========================================================
   2. OUTCOMES rows
   ========================================================= */
.rows { background: var(--paper); padding-top: 104px; }
.row { max-width: var(--wrap); margin: 0 auto 120px; display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.row:last-child { margin-bottom: 0; }
.row--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr); }
.row--flip .row__media { order: 2; }
.row__media { position: relative; aspect-ratio: 5 / 4; container-type: inline-size; }
.row__media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); background: var(--sand); }
.row__media::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); box-shadow: inset 0 0 0 1px rgba(35, 31, 32, .06); pointer-events: none; }
.row__copy h3 { font-size: clamp(30px, 3vw, 42px); margin-bottom: 18px; }
.row__copy h3 em { display: block; }
.row__copy > p:not(.row__how) { font-size: 18px; color: var(--ink-2); margin-bottom: 22px; }
.row__how { font-size: 15px; color: var(--muted); padding-top: 18px; border-top: 1px solid var(--line); }
.row__how b { color: var(--ink); }
.ui { position: absolute; z-index: 3; font-family: var(--sans); color: var(--ink); }
.stars { color: #F4B400; letter-spacing: .5px; }

/* row 1: the maps card */
.ui--maps { left: -6cqw; bottom: 9cqw; width: 46cqw; min-width: 300px; background: #fff; border-radius: 22px; box-shadow: var(--shadow-float); padding: 12px; }
.maps__search { display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 14px; border-radius: 999px; background: #fff; box-shadow: 0 1px 4px rgba(32, 33, 36, .28); font: 500 15px/1 var(--sans); }
.maps__search svg { width: 17px; height: 17px; fill: none; stroke: #5F6368; stroke-width: 2; stroke-linecap: round; flex: none; }
.maps__search span { white-space: nowrap; overflow: hidden; }
.caret { width: 1.5px; height: 18px; background: #1A73E8; opacity: var(--caret, 0); }
.maps__map { position: relative; height: 112px; margin: 10px 0 8px; border-radius: 14px; overflow: hidden; }
.maps__streets { width: 100%; height: 100%; }
.maps__streets .land { fill: #F3EFE8; }
.maps__streets .park { fill: #CDE8C9; }
.maps__streets .water { fill: #AFD3F2; }
.maps__streets .st path { stroke: #fff; stroke-width: 7; fill: none; }
.maps__streets .st--small path { stroke-width: 3.5; }
.pin { position: absolute; width: 18px; height: 18px; margin: -18px 0 0 -9px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg) scale(var(--s, 0)); transform-origin: 50% 100%; background: #EA4335; box-shadow: 0 3px 5px rgba(0, 0, 0, .25); }
.pin.p1 { left: 18%; top: 44%; } .pin.p2 { left: 70%; top: 34%; } .pin.p3 { left: 84%; top: 76%; }
.pin--you { left: 45%; top: 62%; width: 26px; height: 26px; margin: -26px 0 0 -13px; background: var(--coral-d); z-index: 2; }
.pin--you b { position: absolute; inset: 0; display: grid; place-items: center; transform: rotate(45deg); color: #fff; font: 800 11px/1 var(--sans); }
.maps__list { list-style: none; margin: 0; padding: 0; position: relative; height: calc(var(--open, 0) * 190px); overflow: hidden; }
.res { position: absolute; left: 0; right: 0; height: 58px; display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; padding: 0 10px; border-radius: 14px; background: #fff; transform: translateY(var(--y, 0)); opacity: var(--o, 0); }
.res__n { font: 700 13px/1 var(--sans); color: #5F6368; }
.res__txt { min-width: 0; }
.res__txt b { display: block; font: 700 14.5px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res__txt small { display: block; font: 500 12px/1.3 var(--sans); color: #5F6368; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stars i { font-style: normal; color: #DADCE0; }
.res__call { font: 700 12.5px/1 var(--sans); color: #1A73E8; border: 1.5px solid #DADCE0; border-radius: 999px; padding: 7px 12px; }
.res--you { background: #F7F5F3; box-shadow: inset 0 0 0 1.5px var(--ink); z-index: 2; }
.res--you .res__n { color: var(--coral-d); }
.res--you .res__call { background: #1A73E8; color: #fff; border-color: #1A73E8; transform: scale(var(--press, 1)); }
.toast--call { position: absolute; left: 14%; right: -22%; bottom: -54px; opacity: var(--o, 0); transform: translateY(calc((1 - var(--o, 0)) * 18px)); }

/* row 2: the call that books itself */
.ui--call { right: -5cqw; top: 12cqw; width: 50cqw; min-width: 290px; background: var(--glass); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); border-radius: 22px; padding: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--shadow-float); }
.call__top { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; }
.call__av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--leaf); color: #fff; font: 700 13px/1 var(--sans); font-style: normal; }
.call__who b { display: block; font: 700 14.5px/1.2 var(--sans); }
.call__who small { display: block; font: 600 12px/1.3 var(--sans); color: var(--leaf); margin-top: 2px; }
.call__wave { display: flex; align-items: center; gap: 2.5px; height: 26px; }
.call__wave i { width: 3px; border-radius: 3px; background: var(--leaf); height: calc(4px + var(--a, 0) * 20px); }
.call__talk { display: grid; gap: 7px; margin-top: 12px; }
.bub { max-width: 86%; padding: 9px 12px; border-radius: 16px; font: 500 13.5px/1.38 var(--sans); opacity: var(--o, 0); transform: translateY(calc((1 - var(--o, 0)) * 10px)); }
.bub--in { background: #fff; border-bottom-left-radius: 5px; justify-self: start; }
.bub--out { background: var(--garden); color: #fff; border-bottom-right-radius: 5px; justify-self: end; }
.call__booked { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 12px; border-radius: 12px; background: var(--ink); color: #fff; font: 700 13.5px/1.2 var(--sans); opacity: var(--o, 0); transform: scale(calc(.92 + var(--o, 0) * .08)); }
.call__booked svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ui--week { left: -5cqw; bottom: -4cqw; width: 50cqw; min-width: 320px; background: #fff; border-radius: 20px; padding: 13px 14px 14px; box-shadow: var(--shadow-float); opacity: var(--o, 0); transform: translateY(calc((1 - var(--o, 0)) * 16px)); }
.week__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.week__head b { font: 700 14px/1 var(--sans); }
.week__head small { font: 500 12px/1 var(--sans); color: var(--muted); }
.week__cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.week__cols > div { display: grid; gap: 4px; align-content: start; min-height: 104px; min-width: 0; }
.week__cols span { font: 700 11px/1 var(--sans); color: var(--muted); text-align: center; padding-bottom: 3px; }
.is-wed span { color: var(--coral-d); }
.job { display: block; font: 600 11px/1.2 var(--sans); font-style: normal; padding: 6px 5px; border-radius: 7px; background: var(--sand); color: var(--ink-2); text-align: center; }
.job--new { background: var(--coral-d); color: #fff; opacity: var(--jo, 0); transform: translateY(calc((1 - var(--jy, 1)) * -40px)) scale(calc(.9 + var(--jo, 0) * .1)); box-shadow: 0 6px 14px -6px rgba(35, 31, 32, .7); }

/* row 3: reviews */
.ui--sms { left: -5cqw; top: 44cqw; width: 42cqw; min-width: 260px; background: var(--glass); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); border-radius: 20px; padding: 13px 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--shadow-float); opacity: var(--o, 0); transform: translateY(calc((1 - var(--o, 0)) * 14px)); }
.sms__head { display: flex; gap: 9px; align-items: center; margin-bottom: 8px; }
.sms__av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--coral); color: #fff; font: 800 11px/1 var(--sans); font-style: normal; }
.sms__head b { display: block; font: 700 13.5px/1.2 var(--sans); }
.sms__head small { display: block; font: 500 11.5px/1.2 var(--sans); color: var(--muted); }
.sms__msg { background: #fff; border-radius: 16px; border-top-left-radius: 5px; padding: 9px 12px; font: 500 13.5px/1.4 var(--sans); }
.sms__msg u { color: #1A73E8; text-decoration: none; }
.ui--review { right: -5cqw; bottom: 5cqw; width: 46cqw; min-width: 280px; background: #fff; border-radius: 22px; padding: 16px 18px; box-shadow: var(--shadow-float); opacity: var(--o, 0); transform: translateY(calc((1 - var(--o, 0)) * 22px)) scale(calc(.95 + var(--o, 0) * .05)); }
.rev__top { display: flex; align-items: center; gap: 10px; }
.rev__top .g { width: 26px; height: 26px; }
.rev__top b { display: block; font: 700 14.5px/1.2 var(--sans); }
.rev__top small { display: block; font: 500 12px/1.2 var(--sans); color: var(--muted); }
.rev__stars { color: #F4B400; font-size: 22px; letter-spacing: 2px; margin: 10px 0 6px; line-height: 1; }
.rev__txt { font: 500 15px/1.45 var(--sans); }
.rev__by { font: 700 13px/1 var(--sans); color: var(--ink-2); margin-top: 8px; }
.rev__total { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.rev__total b { font: 700 20px/1 var(--sans); }
.rev__total small { font: 600 12.5px/1 var(--sans); color: var(--muted); }

/* row 4: today */
.ui--today { left: -6cqw; bottom: -9cqw; width: 52cqw; min-width: 320px; background: #fff; border-radius: 22px; padding: 16px 16px 10px; box-shadow: var(--shadow-float); }
.today__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.today__head b { display: block; font: 700 15px/1.2 var(--sans); }
.today__head small { display: block; font: 500 12px/1.2 var(--sans); color: var(--muted); }
.today__count { text-align: right; }
.today__count b { font: 600 30px/1 var(--serif); color: var(--coral-d); }
.today__list { list-style: none; margin: 0; padding: 0; }
.today__list li { display: grid; grid-template-columns: 58px 1fr auto; gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(35, 31, 32, .07); opacity: var(--o, 0); transform: translateY(calc((1 - var(--o, 0)) * 12px)); }
.today__list li:last-child { border-bottom: 0; }
.today__list time { font: 700 11.5px/1.2 var(--sans); color: var(--muted); }
.today__list b { display: block; font: 700 13.5px/1.25 var(--sans); }
.today__list small { display: block; font: 500 12px/1.25 var(--sans); color: var(--muted); }
.src { display: inline-flex; align-items: center; gap: 5px; font: 700 11.5px/1 var(--sans); font-style: normal; padding: 6px 9px 6px 7px; border-radius: 999px; white-space: nowrap; background: var(--sand); color: var(--ink); }
.src::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--ink)); }
.src--maps { --c: #EA4335; }
.src--web { --c: var(--ink); }
.src--ads { --c: #1A73E8; }
.src--lsa { --c: #1877F2; }

/* =========================================================
   3. FREE PLAN: sheets on the table
   ========================================================= */
.plan { background: var(--sand); }
.plan__wrap { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 40px; align-items: center; }
.plan__tabs { display: grid; gap: 10px; }
.plan__tabs [role="tab"] { position: relative; overflow: hidden; display: grid; grid-template-columns: 38px 1fr; gap: 14px; text-align: left; padding: 18px 18px 20px; border: 0; border-radius: 20px; background: transparent; cursor: pointer; transition: background-color .25s, box-shadow .25s; }
.plan__tabs [role="tab"]:hover { background: rgba(255, 255, 255, .5); }
.plan__tabs [role="tab"][aria-selected="true"] { background: #fff; box-shadow: var(--shadow-card); }
.plan__n { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 600 17px/1 var(--serif); background: rgba(35, 31, 32, .07); color: var(--ink-2); }
[aria-selected="true"] .plan__n { background: var(--coral-d); color: #fff; }
.plan__tabs b { display: block; font: 700 18px/1.25 var(--sans); margin-bottom: 4px; }
.plan__tabs small { display: block; font: 500 14.5px/1.45 var(--sans); color: var(--ink-2); }
.plan__fill { position: absolute; left: 18px; right: 18px; bottom: 9px; height: 3px; border-radius: 3px; background: rgba(35, 31, 32, .08); display: none; }
[data-kit-on] [aria-selected="true"] .plan__fill { display: block; }
.plan__fill::after { content: ""; position: absolute; inset: 0; border-radius: 3px; background: var(--coral); transform-origin: left; transform: scaleX(var(--kit-fill, 0)); }
.plan__table { position: relative; aspect-ratio: 16 / 11.2; border-radius: var(--r); overflow: hidden; container-type: inline-size; box-shadow: 0 30px 60px -36px rgba(35, 31, 32, .6); background: var(--sand-2); }
.plan__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plan__panel { position: absolute; inset: 0; outline-offset: -6px; }
.sheet { position: absolute; left: 50%; top: 50%; width: 44cqw; aspect-ratio: 8.5 / 11; margin: calc(-44cqw * 11 / 8.5 / 2) 0 0 -22cqw; background: #FFFFFF; border-radius: .5cqw; padding: 2.6cqw 2.8cqw; font-size: 1.5cqw; color: var(--ink); box-shadow: 0 .2cqw .4cqw rgba(35, 31, 32, .18), 0 2.4cqw 3.6cqw -1.2cqw rgba(35, 31, 32, .55); transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--rot, -2deg)); }
.sheet--under { --rot: 4deg; --x: 3cqw; --y: 1cqw; background: #F7F5F3; }
.sheet--under2 { --rot: -6deg; --x: -4cqw; --y: .5cqw; background: #F7F5F3; }
.sheet__top { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding-bottom: 1.1em; border-bottom: 1px solid var(--line); margin-bottom: 1.4em; }
.sheet__top img { width: 6.8em; height: auto; }
.sheet__top span { font: 500 .9em/1.35 var(--sans); color: var(--muted); text-align: right; }
.sheet__top span b { color: var(--ink); font-weight: 700; }
.sheet h4 { font-size: 1.95em; line-height: 1.1; margin-bottom: 1.1em; }
.gap { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.05em; }
.gap li { position: relative; display: grid; grid-template-columns: 1fr; gap: .45em; }
.gap__lbl { display: flex; align-items: center; gap: .55em; font: 700 1em/1.2 var(--sans); }
.gi { width: 1.6em; height: 1.6em; border-radius: .45em; background: var(--sand) center / 1em no-repeat; flex: none; }
.gi--maps { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23EA4335' d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
.gi--star { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F4B400' d='M12 2.8l2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17.2l-5.6 3 1.1-6.3L2.9 9.5l6.3-.9z'/%3E%3C/svg%3E"); }
.gi--web { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231F20' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E"); }
.gi--clock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231F20' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.gap__bars { display: grid; gap: .3em; padding-right: 4.6em; }
.gap__bars i { display: block; height: .62em; border-radius: 1em; width: calc(var(--w) * var(--f, 1) * 100%); }
.b-you { background: var(--coral); }
.b-top { background: var(--ink-4); }
.gap__v { position: absolute; right: 0; bottom: -.15em; text-align: right; font: 600 .9em/1.15 var(--sans); color: var(--muted); }
.gap__v b { display: block; font: 800 1.12em/1.1 var(--sans); color: var(--coral-d); }
.gap--big .gap__lbl { position: relative; z-index: 1; }
.hl { position: absolute; left: 1.9em; top: 1.15em; width: 9em; height: .5em; z-index: 0; overflow: visible; }
.hl path { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.sheet__legend { display: flex; gap: 1.4em; margin-top: 1.3em; font: 600 .9em/1 var(--sans); color: var(--muted); }
.sheet__legend span { display: flex; align-items: center; gap: .45em; }
.sheet__legend i { width: 1.4em; height: .55em; border-radius: 1em; display: inline-block; }
.sheet__note { margin-top: 1.4em; padding: .9em 1em; border-radius: .7em; background: var(--sand); font: 500 .98em/1.4 var(--sans); }
.sheet__note b { font-weight: 800; }
.months { position: relative; margin-top: .4em; }
.months__bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: .45em; height: 12em; align-items: end; border-bottom: 1.5px solid var(--line); }
.months__bars i { position: relative; display: block; height: calc(var(--h) * var(--g, 1) * 100%); min-height: 2px; border-radius: .35em .35em 0 0; background: linear-gradient(var(--ink), #5A5052); }
.months__bars i[data-m="1"] { background: repeating-linear-gradient(45deg, #D9D2CC 0 3px, transparent 3px 6px); height: .5em; }
.months__bars i b { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -.35em); font: 800 .92em/1 var(--sans); color: var(--ink); opacity: var(--lo, 0); }
.months__goal { position: absolute; left: 0; right: 0; top: 0; border-top: 1.5px dashed var(--leaf); }
.months__goal span { position: absolute; left: 0; top: -1.7em; font: 700 .88em/1 var(--sans); color: var(--ink); }
.months__axis { display: grid; grid-template-columns: repeat(12, 1fr); gap: .45em; margin-top: .5em; font: 600 .9em/1 var(--sans); color: var(--muted); text-align: center; }
.phases { display: flex; flex-wrap: wrap; gap: .45em; margin-top: 1.1em; }
.ph { font: 700 .82em/1 var(--sans); padding: .6em .8em; border-radius: 999px; white-space: nowrap; }
.ph em { font-style: normal; font-weight: 800; opacity: .7; margin-right: .2em; }
.ph--1 { background: var(--sand); color: var(--ink-2); }
.ph--2 { background: var(--sand-2); color: var(--ink); }
.ph--3 { background: var(--ink); color: #fff; }
.budget { display: grid; grid-template-columns: 11em 1fr; gap: 1.6em; align-items: center; margin-top: .4em; }
.donut { width: 11em; height: 11em; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 20; }
.donut .d0 { stroke: var(--sand); }
.donut .d { stroke-dasharray: 0 100; }
.donut .d1 { stroke: var(--coral); }
.donut .d2 { stroke: var(--ink-3); }
.donut .d3 { stroke: var(--ink-4); }
.donut .d4 { stroke: var(--sand-2); }
.shares { list-style: none; margin: 0; padding: 0; display: grid; gap: .75em; }
.shares li { display: grid; grid-template-columns: 1em 1fr auto; gap: .6em; align-items: center; font: 600 1em/1.2 var(--sans); opacity: var(--o, 1); }
.shares i { width: 1em; height: 1em; border-radius: .3em; }
.shares .s1 { background: var(--ink); } .shares .s2 { background: var(--ink-3); } .shares .s3 { background: var(--ink-4); } .shares .s4 { background: var(--sand-2); box-shadow: inset 0 0 0 1px rgba(35, 31, 32, .15); }
.shares b { font: 800 1.1em/1 var(--sans); }
.sheet__pay { display: flex; justify-content: space-between; align-items: center; margin-top: 1.6em; padding: .9em 1em; border-radius: .7em; background: var(--ink); color: #fff; font: 600 1em/1 var(--sans); }
.sheet__pay b { font: 600 1.6em/1 var(--serif); }
.sheet--1, .sheet--2, .sheet--3 { opacity: var(--o, 1); }

/* =========================================================
   4. STEPS over the coffee break
   ========================================================= */
.coffee { background: var(--paper); }
.coffee__frame { position: relative; max-width: var(--wrap); margin: 0 auto; aspect-ratio: 16 / 8.6; border-radius: var(--r); overflow: hidden; container-type: inline-size; background: var(--sand-2); box-shadow: 0 30px 60px -36px rgba(35, 31, 32, .55); }
.coffee__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.coffee__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 40%, rgba(35, 31, 32, .08) 100%); pointer-events: none; }
.coffee__cards { position: absolute; inset: 0; z-index: 2; }
.coffee__steps { list-style: none; max-width: var(--wrap); margin: 34px auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.coffee__steps li { position: relative; padding: 22px 22px 22px 74px; border-radius: 20px; background: rgba(255, 255, 255, calc(.4 + var(--lit, 0) * .6)); box-shadow: 0 0 0 1px rgba(35, 31, 32, calc(.08 - var(--lit, 0) * .08)), 0 calc(var(--lit, 0) * 18px) calc(var(--lit, 0) * 36px) calc(var(--lit, 0) * -16px) rgba(35, 31, 32, .35); }
.coffee__steps li::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 3px; border-radius: 3px; background: var(--coral); transform-origin: left; transform: scaleX(var(--lit, 0)); }
.cs__n { position: absolute; left: 20px; top: 20px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 600 18px/1 var(--serif); background: rgb(calc(230 - var(--lit, 0) * 195) calc(224 - var(--lit, 0) * 193) calc(220 - var(--lit, 0) * 188)); color: rgb(calc(70 + var(--lit, 0) * 185) calc(62 + var(--lit, 0) * 193) calc(64 + var(--lit, 0) * 191)); }
.coffee__steps b { display: block; font: 700 18.5px/1.25 var(--sans); margin-bottom: 4px; }
.coffee__steps li > span:last-child { display: block; font: 500 15.5px/1.5 var(--sans); color: var(--ink-2); }
.cc { position: absolute; width: 27cqw; min-width: 280px; padding: 16px; border-radius: 22px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 2px 6px rgba(35, 31, 32, .1), 0 30px 50px -20px rgba(35, 31, 32, .5); color: var(--ink); opacity: var(--o, 0); transform: translateY(calc((1 - var(--o, 0)) * 30px)) scale(calc(var(--sc, 1) * (.94 + var(--o, 0) * .06))); transform-origin: 50% 0; }
.cc--1 { left: 49cqw; top: 3.5cqw; }
.cc--2 { left: 70cqw; top: 11cqw; }
.cc--3 { left: 53cqw; top: 31cqw; }
.cc__tag { display: flex; align-items: center; gap: 8px; font: 700 14.5px/1 var(--sans); margin-bottom: 12px; }
.cc__tag span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--coral-d); color: #fff; font: 600 13px/1 var(--serif); }
.cc__tag em { margin-left: auto; font: 700 11.5px/1 var(--sans); font-style: normal; padding: 5px 8px; border-radius: 999px; background: var(--sand); color: var(--ink); }
.chat { font: 500 13.5px/1.4 var(--sans); padding: 9px 12px; border-radius: 15px; max-width: 92%; margin-bottom: 7px; opacity: var(--o, 1); transform: translateY(calc((1 - var(--o, 1)) * 8px)); }
.chat--bot { background: #fff; border-bottom-left-radius: 5px; }
.chat--bot b { display: block; margin-top: 3px; }
.chat--me { background: var(--garden); color: #fff; margin-left: auto; width: fit-content; border-bottom-right-radius: 5px; }
.chips { display: flex; gap: 6px; margin: 2px 0 9px; opacity: var(--o, 1); }
.chips i { font: 700 13px/1 var(--sans); font-style: normal; padding: 8px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); }
.chips i.is-pick[data-on] { background: var(--coral-d); color: #fff; box-shadow: none; }
.mini { background: #fff; border-radius: 16px; padding: 13px 14px; }
.mini__k { font: 600 12.5px/1 var(--sans); color: var(--muted); }
.mini__v { font: 600 26px/1.15 var(--serif); margin: 4px 0 8px; }
.mini__v small { font: 600 13px/1 var(--sans); color: var(--muted); }
.mini__bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; height: 54px; align-items: end; }
.mini__bars i { display: block; border-radius: 3px 3px 0 0; background: linear-gradient(var(--ink), #5A5052); height: calc(var(--h) * var(--g, 1) * 100%); }
.mini__gap { margin-top: 9px; font: 500 13px/1 var(--sans); color: var(--ink-2); }
.mini__gap b { color: var(--coral-d); }
.push { margin-top: 2px; opacity: var(--o, 1); transform: translateY(calc((1 - var(--o, 1)) * 12px)); background: #fff; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .4); grid-template-columns: 38px 1fr; }
.push--2 { margin-top: 8px; }

/* =========================================================
   5. CALCULATOR: your next 12 months, booked
   A paper year planner, a row a month from next month and a square a day (weekends shaded, as in the picker's
   month). Every new customer is a booking chip on a day, in its source's shade; the chips' size is what one
   customer is worth (--vs, 0 at $200 to 1 at $50,000). It fills once (the kit's year: data-kit-on, --kit-in),
   then only the sliders change it, at once.
   ========================================================= */
.worth { background: var(--garden); position: relative; }
.worth::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 60% at 15% 0%, rgba(251, 250, 249, .06), transparent 70%); pointer-events: none; }
.worth__wrap { position: relative; max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.sliders { background: #fff; border-radius: var(--r); padding: 26px 34px 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 48px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); }
.sl { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; align-content: end; gap: 6px 14px; }
.sl label { font: 700 16px/1.3 var(--sans); color: var(--ink); text-wrap: balance; }
.sl output { font: 600 30px/1 var(--serif); font-variation-settings: "SOFT" 100; letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; color: var(--ink); white-space: nowrap; }
.sl output[data-kit-out="value"] { min-width: 4.3em; text-align: right; } /* its label keeps its lines while the figure changes */
.sl input { grid-column: 1 / -1; }
.sl__scale { grid-column: 1 / -1; display: flex; justify-content: space-between; font: 600 12.5px/1 var(--sans); color: var(--muted); margin-top: 1px; }
/* the slider: a groove of paper that fills with ink, and a white knob ringed in ink (the whole track takes the hand) */
.sl input[type="range"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 34px; margin: 4px 0 0; background: transparent; cursor: pointer; border-radius: 12px; }
.sl input[type="range"]::-webkit-slider-runnable-track { height: 10px; border-radius: 10px; background: linear-gradient(90deg, var(--ink) 0 var(--kit-fill, 50%), var(--sand-2) var(--kit-fill, 50%) 100%); box-shadow: inset 0 1px 2px rgba(35, 31, 32, .2); }
.sl input[type="range"]::-moz-range-track { height: 10px; border-radius: 10px; background: var(--sand-2); box-shadow: inset 0 1px 2px rgba(35, 31, 32, .2); }
.sl input[type="range"]::-moz-range-progress { height: 10px; border-radius: 10px; background: var(--ink); }
.sl input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -10px; border-radius: 50%; background: radial-gradient(circle, var(--ink) 0 3.5px, #fff 4.5px); border: 2.5px solid var(--ink); box-shadow: 0 0 0 4px rgba(255, 255, 255, .92), 0 7px 16px -4px rgba(35, 31, 32, .55); transition: transform .15s; }
.sl input[type="range"]::-moz-range-thumb { width: 25px; height: 25px; border-radius: 50%; background: radial-gradient(circle, var(--ink) 0 3.5px, #fff 4.5px); border: 2.5px solid var(--ink); box-shadow: 0 0 0 4px rgba(255, 255, 255, .92), 0 7px 16px -4px rgba(35, 31, 32, .55); }
.sl input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.07); }
.sl input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.sl input[type="range"]:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.sliders__tip { grid-column: 1 / -1; font: 500 14.5px/1.5 var(--sans); color: var(--muted); padding-top: 12px; border-top: 1px solid var(--line); }

.yr { --vs: .37; position: relative; background: #fff; color: var(--ink); border-radius: var(--r); padding: 30px 32px 26px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.yr__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 236px); align-items: end; gap: 18px 28px; margin-bottom: 20px; }
.yr__title { font: 600 20px/1.2 var(--serif); font-variation-settings: "SOFT" 100; letter-spacing: -.01em; }
.yr__v { font: 600 clamp(52px, 5vw, 72px)/1 var(--serif); font-variation-settings: "SOFT" 100; letter-spacing: -.025em; font-variant-numeric: tabular-nums lining-nums; margin: 12px 0 6px; white-space: nowrap; }
.yr__by { font: 500 17px/1.35 var(--sans); color: var(--ink-2); }
.yr__by span { font: italic 500 1.12em/1 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--ink); }
.yr__sum { margin-top: 12px; font: 500 15px/1.5 var(--sans); color: var(--ink-2); }
.yr__sum b { font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums; }
.yr__sum span { white-space: nowrap; }
.yr__plan { --lab: 44px; --tot: 104px; background: #F8F6F4; border: 1px solid rgba(35, 31, 32, .07); border-radius: 20px; padding: 14px 18px 16px; display: grid; gap: 5px; }
.yr__m, .yr__nums { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr) var(--tot); align-items: center; column-gap: 10px; }
.yr__days, .yr__dn { display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 2.5px; }
.yr__nums { margin-bottom: 2px; font: 700 11.5px/1 var(--sans); color: var(--muted); }
.yr__dn span { justify-self: center; width: max-content; white-space: nowrap; }
.yr__nums > i { font-style: normal; text-align: right; }
.yr__m b { font: 600 16.5px/1 var(--serif); font-variation-settings: "SOFT" 100; color: var(--ink-3); }
.yr__m[data-kit-on] b { color: var(--ink); }
.yr__m em { font: 600 16.5px/1 var(--serif); font-variation-settings: "SOFT" 100; font-style: normal; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; color: var(--ink); opacity: 0; }
.yr__m[data-kit-on] em { opacity: var(--kit-in, 1); }
/* a day: a dot on the paper (weekends on a sand square), like a dotted planner */
.yr__d { display: grid; place-items: center; aspect-ratio: 1 / .78; border-radius: 5px; container-type: size; }
.yr__d::before { content: ""; grid-area: 1 / 1; width: 3px; height: 3px; border-radius: 50%; background: rgba(35, 31, 32, .24); }
.yr__d--we { background: var(--sand); }
.yr__d--we::before { background: rgba(35, 31, 32, .16); }
/* a booking chip: as big as what one customer is worth; a day's second booking stacks over the first */
.yr__c { --s: calc(.5 + .44 * var(--vs)); grid-area: 1 / 1; display: block; width: calc(var(--s) * 100cqmin); aspect-ratio: 1; border-radius: 28%; background: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 1.5px #fff, 0 2px 4px rgba(35, 31, 32, .22); transform: scale(0); }
.yr__c + .yr__c { translate: 20% -20%; }
.yr__c--c { background: var(--ink-3); }
.yr__c--h { background: var(--ink-4); }
/* the month arriving: its chips land across the row as --kit-in runs (only while the year first fills) */
.yr__m[data-kit-on] .yr__c { --p: clamp(0, calc((var(--kit-in, 1) - var(--x, 0) * .55) / .45), 1); transform: scale(var(--p)); }
.yr__key { display: grid; gap: 7px; margin: 0 0 6px; font: 600 12.5px/1.35 var(--sans); color: var(--muted); }
.yr__key span { display: flex; align-items: center; gap: 8px; }
.yr__key i { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; }
.yr__size { align-items: flex-start !important; margin-top: 3px; padding-top: 10px; border-top: 1px solid var(--line); }
.yr__size i { background: var(--ink); margin-top: 2px; }
.yr__size i:first-child { width: 6px; height: 6px; border-radius: 2px; }
.yr__size i:nth-child(2) { width: 13px; height: 13px; border-radius: 4px; margin: 0 4px 0 -3px; }
.yr__foot { display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.yr__foot small { font: 500 13.5px/1.45 var(--sans); color: var(--muted); max-width: 300px; }

/* =========================================================
   6. COMPARE: sticky notes
   ========================================================= */
.notes { background: var(--paper); }
.notes__wrap { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 64px; align-items: center; }
.notes__copy h2 { font-size: clamp(36px, 4.2vw, 56px); margin-bottom: 20px; }
.notes__copy > p { font-size: 18.5px; color: var(--ink-2); margin-bottom: 26px; }
.notes__promise { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.notes__promise li { position: relative; padding-left: 34px; font-size: 16.5px; color: var(--ink-2); }
.notes__promise li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-4.8'/%3E%3C/svg%3E") center / 20px no-repeat; }
.notes__promise b { color: var(--ink); }
.desk { position: relative; aspect-ratio: 4 / 3.1; border-radius: var(--r); overflow: hidden; container-type: inline-size; box-shadow: 0 30px 60px -36px rgba(35, 31, 32, .6); background: var(--sand-2); }
.desk__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stickies { position: absolute; inset: 0; }
.sticky { position: absolute; width: 21cqw; aspect-ratio: 1; padding: 2cqw 1.8cqw; font: 650 2.1cqw/1.25 var(--sans); color: var(--ink); background: linear-gradient(170deg, var(--c1), var(--c2)); box-shadow: 0 .3cqw .5cqw rgba(0, 0, 0, .14), 0 1.6cqw 2.2cqw -1cqw rgba(0, 0, 0, .45); transform: translate(var(--tx, 0), var(--ty, 0)) rotate(calc(var(--r0) + var(--pr, 0deg))) scale(var(--ps, 1)); opacity: var(--po, 1); transform-origin: 50% 0; }
.sticky::after { content: ""; position: absolute; right: 0; bottom: 0; width: 22%; height: 22%; background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, .1) 50%, rgba(255, 255, 255, .5) 62%, var(--c2) 80%); border-top-left-radius: 0; }
.s1 { --c1: #FFE98A; --c2: #FFDD5C; --r0: -5deg; left: 9cqw; top: 9cqw; }
.s2 { --c1: #FFD0B5; --c2: #FFB892; --r0: 4deg; left: 36cqw; top: 6cqw; }
.s3 { --c1: #D3EED9; --c2: #B8E2C3; --r0: -3deg; left: 64cqw; top: 11cqw; }
.s4 { --c1: #FFE98A; --c2: #FFDD5C; --r0: 6deg; left: 20cqw; top: 38cqw; }
.s5 { --c1: #FFD3DC; --c2: #FFBCCB; --r0: -4deg; left: 52cqw; top: 40cqw; }
.vldmsg { position: absolute; left: 50%; top: 50%; width: 54cqw; margin-left: -27cqw; transform: translateY(calc(-50% + (1 - var(--o, 0)) * 6cqw)) scale(calc(.94 + var(--o, 0) * .06)); opacity: var(--o, 0); background: #fff; border-radius: 22px; padding: 18px 20px 16px; box-shadow: var(--shadow-float); }
.vldmsg__head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.vldmsg__head img { width: 84px; height: auto; }
.vldmsg__head b { display: block; font: 700 14.5px/1.2 var(--sans); }
.vldmsg__head small { display: block; font: 500 12px/1.2 var(--sans); color: var(--muted); }
.vldmsg__big { font: 600 22px/1.25 var(--serif); margin: 14px 0 12px; }
.vldmsg__big b { font-size: 40px; color: var(--coral-d); margin-right: 4px; vertical-align: -3px; }
.vldmsg__src { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vldmsg__src li { display: flex; justify-content: space-between; align-items: center; font: 800 15px/1 var(--sans); opacity: var(--lo, 1); transform: translateX(calc((1 - var(--lo, 1)) * 12px)); }
.vldmsg__ps { margin-top: 12px; font: 500 12.5px/1.3 var(--sans); color: var(--muted); }

/* =========================================================
   7. WHO WE HELP: reel
   ========================================================= */
.who { background: var(--sand); padding-left: 0; padding-right: 0; overflow: hidden; }
.who .sec__head { padding: 0 40px; }
.reel { position: relative; }
.reel .stop { top: -62px; right: max(40px, calc((100vw - var(--wrap)) / 2)); }
.reel__track { list-style: none; margin: 0; padding: 10px 0 20px; display: flex; gap: 22px; width: max-content; transform: translateX(var(--x, 0px)); }
.rc { position: relative; flex: none; width: 300px; height: 420px; border-radius: 26px; overflow: hidden; background: var(--sand-2); box-shadow: 0 24px 40px -26px rgba(35, 31, 32, .6); }
.rc img { width: 100%; height: 100%; object-fit: cover; }
.rc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(26, 23, 24, .82) 0%, rgba(26, 23, 24, .35) 38%, transparent 58%); pointer-events: none; }
.rc > span { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 1; color: #fff; }
.rc b { display: block; font: 600 26px/1.1 var(--serif); font-variation-settings: "SOFT" 100; letter-spacing: -.01em; margin-bottom: 6px; }
.rc small { display: block; font: 500 14.5px/1.4 var(--sans); color: rgba(255, 255, 255, .88); }
.rc--more::after { background: linear-gradient(0deg, rgba(26, 23, 24, .94) 0%, rgba(26, 23, 24, .62) 45%, transparent 72%); }
.rc--more .btn { margin-top: 14px; background: #fff; color: var(--ink); box-shadow: none; pointer-events: auto; }

/* =========================================================
   8. FAQ
   ========================================================= */
.faq { background: var(--paper); }
.faq__wrap { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.faq__head { position: sticky; top: 120px; }
.faq__head h2 { font-size: clamp(36px, 4.2vw, 56px); margin-bottom: 16px; }
.faq__head p:last-child { font-size: 18px; color: var(--ink-2); }
.faq__list { display: grid; gap: 12px; }
.faq details { background: #fff; border-radius: 20px; box-shadow: 0 1px 2px rgba(35, 31, 32, .06); border: 1px solid rgba(35, 31, 32, .07); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 64px 22px 24px; position: relative; font: 700 18.5px/1.35 var(--sans); border-radius: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: var(--sand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23231F20' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M10 5v10M5 10h10'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 24px 22px; font-size: 17px; color: var(--ink-2); max-width: 640px; }

/* =========================================================
   9. CLOSING BAND
   ========================================================= */
.close { position: relative; color: #fff; overflow: hidden; isolation: isolate; }
.close__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; z-index: -2; background: var(--ink); }
.close::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(26, 23, 24, .9) 0%, rgba(26, 23, 24, .72) 38%, rgba(26, 23, 24, .12) 62%, rgba(26, 23, 24, .05) 100%); }
.close .stop { z-index: 2; }
.close__in { max-width: 1240px; margin: 0 auto; padding: 110px 40px; display: grid; grid-template-columns: minmax(0, 560px) 1fr; }
.close__col { display: grid; gap: 30px; }
.close__copy h2 { font-size: clamp(38px, 4.4vw, 60px); color: #fff; margin-bottom: 18px; }
.close__copy h2 em { color: var(--butter); }
.close__copy p { font-size: 19px; color: rgba(255, 255, 255, .86); max-width: 520px; }
.pick--close { color: var(--ink); }

/* =========================================================
   footer, call bar, exit
   ========================================================= */
.foot { background: var(--garden-d); color: rgba(255, 255, 255, .86); padding: 80px 40px 30px; }
.foot__in { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1.3fr .8fr 1fr; gap: 56px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.foot__brand img { height: 64px; width: auto; margin-bottom: 18px; }
.foot__brand p { font-size: 16px; max-width: 360px; margin-bottom: 22px; }
.foot__h { font: 700 12.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--butter); margin-bottom: 18px; }
.foot__nav { display: grid; gap: 10px; align-content: start; }
.foot__nav a { text-decoration: none; font-size: 16px; }
.foot__nav a:hover { color: #fff; text-decoration: underline; }
.foot__svc p:last-child { font-size: 15.5px; line-height: 1.7; }
.foot__base { max-width: var(--wrap); margin: 24px auto 0; font-size: 14px; color: rgba(255, 255, 255, .7); }
.foot :focus-visible { outline-color: var(--butter); }

.callbar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: none; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 16px 34px -12px rgba(35, 31, 32, .45); transform: translateY(140%); transition: transform .35s cubic-bezier(.2, .9, .3, 1.05); }
.callbar[data-kit-on] { transform: translateY(0); }
.callbar span { order: -1; font: 600 13px/1.25 var(--sans); color: var(--ink-2); flex: 1; }
.callbar .btn { padding: 13px 20px; font-size: 15.5px; }

.exit { padding: 0; border: 0; margin: auto; max-width: none; max-height: none; background: transparent; width: min(860px, calc(100vw - 32px)); }
.exit::backdrop { background: rgba(35, 31, 32, .55); backdrop-filter: blur(3px); }
.exit__box { position: relative; display: grid; grid-template-columns: 320px 1fr; background: var(--paper); border-radius: 30px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .35s, transform .45s cubic-bezier(.2, .9, .3, 1.05); }
.exit[data-kit-on] .exit__box { opacity: 1; transform: none; }
.exit__pic img { width: 100%; height: 100%; object-fit: cover; }
.exit__copy { padding: 36px 36px 24px; }
.exit__copy h2 { font-size: 36px; margin-bottom: 12px; padding-right: 30px; }
.exit__copy > p { font-size: 17px; color: var(--ink-2); margin-bottom: 18px; }
.pick--exit { box-shadow: none; border: 1px solid var(--line); max-width: none; padding: 16px 16px 14px; }
.pick--exit .cal { margin: 10px 0 8px; }
.exit__no { display: block; margin: 14px auto 0; background: none; border: 0; font: 600 15px/1 var(--sans); color: var(--muted); text-decoration: underline; cursor: pointer; padding: 8px; }
.exit__x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .3); z-index: 2; }
.exit__x svg { width: 18px; height: 18px; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
html[data-kit-modal] { overflow: hidden; }

/* =========================================================
   responsive
   ========================================================= */
@media (max-width: 1180px) {
  .bar__nav { gap: 18px; }
  .bar__nav a { font-size: 14.5px; }
  .hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
  .plan__wrap { grid-template-columns: 300px minmax(0, 1fr); }
  .sliders { padding: 26px 26px 20px; gap: 18px 32px; }
  .yr { padding: 26px 24px 22px; }
  .yr__plan { --lab: 40px; --tot: 96px; padding: 12px 14px 14px; }
  .yr__m, .yr__nums { column-gap: 10px; }
  .yr__m em { font-size: 15px; }
}
@media (max-width: 980px) {
  .bar__nav { display: none; }
  .bar__menu { display: block; }
  .bar__cta { margin-left: auto; }
  .bar__in { padding: 10px 24px; gap: 14px; }
  .hero__in { grid-template-columns: 1fr; padding: 0 24px; }
  .pick { max-width: 560px; }
  .mosaic { max-width: 640px; }
  .sec { padding: 88px 24px; }
  .row { grid-template-columns: 1fr; gap: 48px; margin-bottom: 96px; }
  .row--flip .row__media { order: 0; }
  .row__media { width: calc(100% - 40px); margin: 0 auto; }
  .plan__wrap { grid-template-columns: 1fr; }
  .plan__tabs { grid-template-columns: repeat(3, 1fr); }
  .plan__tabs small { display: none; }
  .coffee__frame { aspect-ratio: 16 / 10.5; }
  .cc--1 { left: 44cqw; top: 3cqw; }
  .cc--2 { left: 67cqw; top: 14cqw; min-width: 0; width: 31cqw; }
  .cc--3 { left: 48cqw; top: 38cqw; }
  .notes__wrap { grid-template-columns: 1fr; gap: 44px; }
  .faq__wrap { grid-template-columns: 1fr; gap: 36px; }
  .faq__head { position: static; }
  /* the owner stays in view above the words: the footage sits on top, the copy and the picker on ink below */
  .close { background: var(--ink); }
  .close::before { display: none; }
  .close__bg { position: relative; inset: auto; z-index: 0; height: auto; aspect-ratio: 16 / 9; object-position: 60% 40%; }
  .close__in { position: relative; grid-template-columns: 1fr; margin-top: -120px; padding: 110px 24px 88px; background: linear-gradient(180deg, transparent, var(--ink) 110px); }
  .foot__in { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .callbar { display: flex; }
  .exit__box { grid-template-columns: 1fr; }
  .exit__pic { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .bar__logo img { height: 44px; }
  .bar__in { padding: 8px 16px; gap: 8px; }
  .bar__cta { padding: 10px 14px; font-size: 14px; }
  .hero { padding: 14px 0 56px; }
  .hero__in { padding: 0 16px; gap: 34px; }
  .hero__copy { padding-top: 6px; }
  .hero__title { font-size: 40px; margin-bottom: 14px; }
  .hero__title .l2 { font-size: .84em; }
  .hero__lede { font-size: 16.5px; margin-bottom: 18px; }
  .pick { padding: 16px 14px 14px; border-radius: 22px; }
  .pick__q { font-size: 15px; margin-bottom: 10px; }
  .pick__opts { gap: 6px; }
  .pick__opts span { height: 42px; font-size: 16px; border-radius: 12px; }
  .cal { margin: 10px 0 8px; padding: 8px 9px 10px; }
  .cal__head b { font-size: 15px; }
  .cal__key { font-size: 11px; }
  .cal__more { display: none; }
  .cal__grid, .cal__nums { gap: 2px; }
  .cal__grid { height: 40px; }
  .cal__grid .d { border-radius: 3px; gap: 2px; padding: 3px 0; }
  .cal__grid .dot { width: min(6px, 76%); border-radius: 2px; }
  .cal__nums span { font-size: 10.5px; }
  .pick__read { font-size: 13px; margin-bottom: 10px; }
  .btn--big { padding: 16px 20px; font-size: 17px; }
  .trust { gap: 4px 12px; font-size: 12.5px; margin-top: 10px; }
  .mosaic { gap: 8px; padding: 0 0 84px; }
  .mosaic .stop--hero { top: auto; bottom: 18px; right: 0; }
  .tile .note, .t1 .note, .t2 .note, .t3 .note, .t4 .note, .t5 .note, .t6 .note { right: 48px !important; }
  .tile { position: static; border-radius: 16px; aspect-ratio: 4 / 5.2; transform: none; }
  .tile::after { display: none; }
  .tile video { border-radius: 16px; filter: saturate(calc(var(--kit-in, 0) * 1.05)) sepia(calc(.14 - var(--kit-in, 0) * .14)) brightness(calc(1.06 - var(--kit-in, 0) * .06)); }
  .tile[data-kit-on] video { box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--coral); }
  .tile .note, .t1 .note, .t2 .note, .t3 .note, .t4 .note, .t5 .note, .t6 .note { left: 0; right: 0; bottom: 0; margin: 0; width: auto; }
  .sec { padding: 76px 16px; }
  .sec__head { margin-bottom: 44px; }
  .sec__head h2 { font-size: 34px; }
  .sec__head > p:last-child { font-size: 17px; }
  .rows { padding-top: 76px; }
  .row { gap: 36px; margin-bottom: 80px; }
  .row__copy h3 { font-size: 30px; }
  .row__copy > p:not(.row__how) { font-size: 16.5px; }
  .maps__map { height: 84px; }
  .week__cols > div { min-height: 76px; }
  .plan__tabs { grid-template-columns: 1fr; gap: 6px; }
  .plan__tabs [role="tab"] { padding: 12px 14px 15px; }
  .plan__tabs b { font-size: 16px; margin: 0; align-self: center; }
  .plan__n { width: 32px; height: 32px; font-size: 15px; }
  .plan__tabs [role="tab"] { grid-template-columns: 32px 1fr; align-items: center; }
  .plan__table { aspect-ratio: 4 / 5.4; }
  .sheet { width: 86cqw; margin: calc(-86cqw * 11 / 8.5 / 2) 0 0 -43cqw; font-size: 3.2cqw; padding: 5cqw 4.6cqw; }
  .coffee__frame { aspect-ratio: auto; overflow: visible; container-type: normal; border-radius: 0; box-shadow: none; background: none; }
  .coffee__frame::after { display: none; }
  .coffee__bg { position: relative; inset: auto; aspect-ratio: 4 / 3.3; height: auto; border-radius: 22px; object-position: 30% 30%; }
  .coffee__cards { position: relative; inset: auto; display: grid; gap: 12px; margin-top: -56px; padding: 0 10px; }
  .cc, .cc--1, .cc--2, .cc--3 { position: relative; left: auto; top: auto; width: auto; min-width: 0; }
  .coffee__steps { grid-template-columns: 1fr; gap: 10px; margin-top: 26px; }
  .coffee__steps li { padding: 16px 16px 16px 64px; }
  .cs__n { left: 14px; top: 15px; width: 34px; height: 34px; font-size: 16px; }
  .row__media { aspect-ratio: auto; width: 100%; }
  .row__media::after { display: none; }
  .row__media > video { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 3.4; border-radius: 22px; }
  .row__media .ui { position: relative; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: auto !important; min-width: 0 !important; margin: 12px 10px 0; }
  .row__media > video + .ui { margin-top: -64px; }
  .ui--maps { margin-bottom: 34px !important; }
  .maps__list { height: 190px; }
  .toast--call { left: 12px; right: 12px; bottom: -28px; }
  .row__media { display: grid; grid-template-columns: 100%; }
  .ui--sms, .ui--review { grid-row: 2; grid-column: 1; align-self: start; }
  .row__media > .ui--review { margin-top: -8px; }
  /* the call and the day grow upward over the footage, so nothing below moves */
  #answered .row__media > video, #loop .row__media > video { aspect-ratio: 4 / 5.1; }
  #answered .ui--call, #loop .ui--today { position: absolute; left: 10px !important; right: 10px !important; bottom: 10px !important; top: auto !important; margin: 0; }
  #loop .row__media > video { object-position: 62% 50%; aspect-ratio: 4 / 5.4; }
  .today__list li { grid-template-columns: 52px 1fr auto; padding: 7px 0; }
  .ui--week { display: none; }
  .coffee__cards { grid-template-columns: 100%; }
  .cc, .cc--1, .cc--2, .cc--3 { grid-row: 1; grid-column: 1; align-self: start; background: #fff; }
  .cc--1, .cc--2 { opacity: calc(var(--o, 0) * (1 - var(--next, 0))); }
  .sliders { grid-template-columns: 1fr; padding: 24px 20px 22px; gap: 24px; }
  .sl label { font-size: 15.5px; }
  .sl output { font-size: 27px; }
  .yr { padding: 22px 12px 18px; border-radius: 24px; }
  .yr__title { font-size: 18px; }
  .yr__v { font-size: 46px; margin: 8px 0 4px; }
  .yr__by { font-size: 16px; }
  .yr__sum { font-size: 14px; margin-top: 8px; }
  /* on the phone the year is twelve small month calendars, three across, each with its year so far */
  .yr__plan { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; padding: 12px 10px 14px; border-radius: 16px; }
  .yr__nums { display: none; }
  .yr__plan { align-items: start; }
  .yr__m { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 4px; }
  .yr__m b { font-size: 13px; }
  .yr__m em { margin-left: auto; font: 700 11px/1 var(--sans); } /* its year so far beside the month, or under it when long */
  .yr__days { order: 2; flex: 0 0 100%; margin-top: 2px; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1.5px; }
  .yr__d:first-child { grid-column-start: var(--start, 1); }
  .yr__d { aspect-ratio: 1; border-radius: 3px; }
  .yr__d::before { width: 2.5px; height: 2.5px; }
  .yr__head { grid-template-columns: 1fr; gap: 14px; margin: 0 6px 16px; }
  .yr__key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: 12px; }
  .yr__size { flex-basis: 100%; margin-top: 2px; padding-top: 9px; }
  .yr__foot { margin: 16px 6px 0; padding-top: 16px; }
  .yr__foot .btn { width: 100%; }
  .notes__copy h2 { font-size: 34px; }
  .desk { aspect-ratio: 4 / 4.4; }
  .sticky { width: 30cqw; font-size: 3.4cqw; padding: 3cqw 2.6cqw; }
  .s1 { left: 4cqw; top: 6cqw; } .s2 { left: 36cqw; top: 3cqw; } .s3 { left: 63cqw; top: 18cqw; } .s4 { left: 12cqw; top: 46cqw; } .s5 { left: 54cqw; top: 50cqw; }
  .vldmsg { width: 88cqw; margin-left: -44cqw; padding: 14px 16px; }
  .vldmsg__big { font-size: 19px; }
  .vldmsg__big b { font-size: 32px; }
  .who .sec__head { padding: 0 16px; }
  .reel .stop { top: -56px; right: 16px; }
  .rc { width: 250px; height: 350px; }
  .close__bg { aspect-ratio: 5 / 6; object-position: 50% 30%; }
  .close__in { margin-top: -100px; padding: 96px 16px 80px; }
  .faq summary { font-size: 17px; padding: 18px 56px 18px 18px; }
  .faq details p { padding: 0 18px 18px; font-size: 16px; }
  .close__col { gap: 26px; }
  .close__copy h2 { font-size: 36px; }
  .close__copy p { font-size: 17px; }
  .foot { padding: 60px 16px 96px; }
  .foot__in { grid-template-columns: 1fr; gap: 34px; }
  .exit__copy { padding: 36px 22px 22px; }
  .exit__copy h2 { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .bar__nav a, .callbar, .exit__box, .faq summary::after { transition: none !important; }
}