/* Measured, one-page launch (launch/). Home v14 (docs/design/v2/home-b-v14.html, Dave 2026-10-22) trimmed for a
   site with no form: call and email take the form's place, and the live client site card is not shown. Built
   from launch-src/ by scripts/launch-build.ts; edit launch-src/, never launch/. Rules that only the form, the
   placeholders, Client login or the client site card used are left out. Plain pages (privacy, 404) at the end. */

/* Figtree, self-hosted (SIL Open Font License 1.1, /fonts/OFL.txt). Latin subset from @fontsource/figtree. */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/figtree-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/figtree-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/figtree-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/figtree-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/figtree-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 900; font-display: swap; src: url("/fonts/figtree-latin-900-normal.woff2") format("woff2"); }

/* =====================================================================
   Tokens (comp v14). Warmth comes from the cream second tone, the paper ground and the brand's soft cards.
   ===================================================================== */
:root {
  color-scheme: light;
  --band: #0C1A33;
  --bg: #F2F5F9; --white-ground: #FFFFFF;
  --surface: #FFFFFF; --surface-2: #F4F7FA; --surface-3: #EAEFF5;
  --warm: #FFF9EF; --warm-2: #FBEFD9; --warm-line: #EEDFC4;
  --ink: #14284B; --ink-2: #3E4F70;
  --hair: #DFE5EE; --hair-2: #CDD6E3; --line: #6B7C9B; --field-line: #6B7C9B;
  --mark: #14284B;
  --amber: #F59B2A; --amber-h: #F8AD52;
  --cream: #FDEBC4;
  --chip-m: #D6EFEC; --chip-ink: #14284B;
  --on-band: #FFFFFF; --on-band-2: #C9D5E8; --on-band-3: #9FB4DA;
  --stage: linear-gradient(160deg, #FDEBC4 0%, #F6E9DF 40%, #E4E9F1 100%);
  --focus: #14284B; --err: #B42318;
  --shadow-1: 0 0 0 1px rgb(20 40 75 / .07), 0 1px 2px rgb(20 40 75 / .05);
  --shadow-2: 0 0 0 1px rgb(20 40 75 / .06), 0 1px 2px rgb(20 40 75 / .04), 0 8px 18px -8px rgb(20 40 75 / .14);
  --shadow-band: 0 0 0 1px rgb(255 255 255 / .1), 0 2px 4px rgb(0 0 0 / .1), 0 22px 44px -16px rgb(4 10 24 / .42), 0 60px 110px -40px rgb(4 10 24 / .36);
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --page: 1200px; --gutter: clamp(16px, 4vw, 72px);
  --dur: 180ms; --ease: cubic-bezier(.2,0,0,1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --band: #0E1E3C; --bg: #060C18; --white-ground: #0A1325;
    --surface: #111C33; --surface-2: #16233D; --surface-3: #1B2A47;
    --warm: #1A2034; --warm-2: #22273A; --warm-line: #343A52;
    --ink: #EEF2F8; --ink-2: #B8C4D8;
    --hair: #22314F; --hair-2: #31446B; --line: #7B8FB3; --field-line: #6D82AD; --mark: #EEF2F8;
    --chip-m: rgb(214 239 236 / .14); --chip-ink: #FDEBC4;
    --focus: #F59B2A; --err: #FDA29B;
    --stage: linear-gradient(160deg, rgb(245 155 42 / .12), transparent 60%), #141B2E;
    --shadow-1: 0 0 0 1px rgb(255 255 255 / .07);
    --shadow-2: 0 0 0 1px rgb(255 255 255 / .08), inset 0 1px 0 rgb(255 255 255 / .04), 0 10px 22px -10px rgb(0 0 0 / .6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --band: #0E1E3C; --bg: #060C18; --white-ground: #0A1325;
  --surface: #111C33; --surface-2: #16233D; --surface-3: #1B2A47;
  --warm: #1A2034; --warm-2: #22273A; --warm-line: #343A52;
  --ink: #EEF2F8; --ink-2: #B8C4D8;
  --hair: #22314F; --hair-2: #31446B; --line: #7B8FB3; --field-line: #6D82AD; --mark: #EEF2F8;
  --chip-m: rgb(214 239 236 / .14); --chip-ink: #FDEBC4;
  --focus: #F59B2A; --err: #FDA29B;
  --stage: linear-gradient(160deg, rgb(245 155 42 / .12), transparent 60%), #141B2E;
  --shadow-1: 0 0 0 1px rgb(255 255 255 / .07);
  --shadow-2: 0 0 0 1px rgb(255 255 255 / .08), inset 0 1px 0 rgb(255 255 255 / .04), 0 10px 22px -10px rgb(0 0 0 / .6);
}
@media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: calc(var(--page) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sprite { position: absolute; }
.skip { position: absolute; left: 16px; top: -200px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; background: #fff; color: #14284B; font-weight: 600; text-decoration: none; box-shadow: 0 8px 22px -8px rgb(0 0 0 / .5); }
.skip:focus { top: 12px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border-radius: 999px; font: 600 17px/1 var(--sans); text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.btn--amber { background: var(--amber); color: #14284B; box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 1px 2px rgb(0 0 0 / .2), 0 8px 22px -8px rgb(245 155 42 / .45); }
.btn--amber:hover { background: var(--amber-h); }
.btn--line { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--hair-2); background: transparent; }
.btn--line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.link:hover { text-decoration-color: currentColor; }

.kicker { font-size: 15px; font-weight: 600; color: var(--ink-2); display: inline-flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--amber); }
.h2 { margin-top: 14px; font-weight: 600; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.06; letter-spacing: -0.045em; text-wrap: balance; }
.intro { margin-top: 16px; font-size: 21px; line-height: 1.55; color: var(--ink-2); max-width: 36em; }
.sec { padding-top: 104px; }

/* ---------- Header ---------- */
.head { position: relative; z-index: 40; background: var(--band); color: #fff; --focus: var(--amber); }
.head__bar { display: flex; align-items: center; gap: 4px; height: 76px; }
.wordmark { font: 900 26px/1 var(--sans); letter-spacing: -0.05em; text-decoration: none; color: #fff; margin-right: auto; display: inline-flex; align-items: center; min-height: 44px; }
.wordmark i { font-style: normal; color: var(--amber); }
.nav { display: flex; gap: 2px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 14px; font-size: 15px; font-weight: 500; color: var(--on-band-2); text-decoration: none; border-radius: 999px; }
.nav a:hover { color: #fff; background: rgb(255 255 255 / .08); }
.head-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; margin-left: 6px; border-radius: 999px; font-size: 15px; font-weight: 600; color: #fff; text-decoration: none; white-space: nowrap; }
.head-tel .i { color: var(--amber); }
.icon-btn { width: 44px; height: 44px; border: 0; background: transparent; color: var(--on-band-2); display: inline-grid; place-items: center; padding: 0; border-radius: 999px; cursor: pointer; }
.icon-btn .i { width: 18px; height: 18px; }
.call-btn { display: none; color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); }
.call-btn .i { color: var(--amber); }
.menu { display: none; }
.menu .x { display: none; }
.menu[aria-expanded="true"] .x { display: block; } .menu[aria-expanded="true"] .bars { display: none; }
.head .btn { min-height: 44px; padding: 0 18px; font-size: 15px; margin-left: 8px; }
.mnav { border-top: 1px solid rgb(255 255 255 / .1); padding: 8px var(--gutter) 18px; background: var(--band); }
.mnav a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-size: 18px; font-weight: 500; color: #fff; text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / .08); }
.mnav .btn { margin: 16px 0 0; width: 100%; min-height: 52px; font-size: 17px; border-bottom: 0; justify-content: center; color: #14284B; }

/* ---------- Hero: navy band, Aurora, film grain ---------- */
.hero { --edgeh: 210px; position: relative; overflow-x: clip; color: var(--on-band); isolation: isolate; --focus: var(--amber);
  background: linear-gradient(var(--band) calc(100% - var(--edgeh)), var(--bg) 0); }
.hero__glow { position: absolute; inset: 0 0 var(--edgeh) 0; z-index: -2; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(42% 36% at 50% 92%, rgb(125 180 245 / .16), transparent 72%),
    radial-gradient(40% 44% at 96% 96%, rgb(245 155 42 / .20), transparent 70%),
    radial-gradient(36% 40% at 4% 100%, rgb(245 155 42 / .09), transparent 70%),
    radial-gradient(130% 95% at 50% 45%, transparent 55%, rgb(2 6 16 / .5) 100%); }
.hero__glow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(to top, rgb(185 212 247 / .08), transparent); }
.hb { position: absolute; inset: -20% -30%; pointer-events: none; filter: blur(36px); }
.hb--1 { background: radial-gradient(60% 14% at 34% 34%, rgb(47 111 192 / .32), transparent 70%); }
.hb--2 { background: radial-gradient(55% 11% at 66% 52%, rgb(245 165 80 / .13), transparent 70%); }
.hb--3 { background: radial-gradient(70% 16% at 48% 72%, rgb(56 120 210 / .24), transparent 70%); }
.hero__grain { position: absolute; inset: 0 0 var(--edgeh) 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px; }
.hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: var(--edgeh); height: 1px; z-index: 0; background: linear-gradient(90deg, transparent, rgb(185 212 247 / .3) 30%, rgb(185 212 247 / .3) 70%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  /* One drift pass of 5 s or less, eased out, then still. Never loops (WCAG 2.2.2). Reduced motion: static. */
  @keyframes drift1 { from { transform: translate3d(-6%, 0, 0) rotate(-4deg); } to { transform: translate3d(5%, 3%, 0) rotate(3deg); } }
  @keyframes drift2 { from { transform: translate3d(5%, 2%, 0) rotate(3deg); } to { transform: translate3d(-4%, -2%, 0) rotate(-2deg); } }
  @keyframes drift3 { from { transform: translate3d(6%, 3%, 0) rotate(3deg); } to { transform: translate3d(-5%, 0, 0) rotate(-3deg); } }
  .hb--1 { animation: drift1 5s cubic-bezier(.16, 1, .3, 1) 1 both; }
  .hb--2 { animation: drift2 4.5s cubic-bezier(.16, 1, .3, 1) 1 both; }
  .hb--3 { animation: drift3 5s cubic-bezier(.16, 1, .3, 1) 1 both; }
}
.hero__copy { text-align: center; padding-top: 52px; display: grid; justify-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 16px 6px 12px; border-radius: 999px; font-size: 15px; line-height: 1.35; font-weight: 500; color: var(--on-band-2); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); background: rgb(12 26 51 / .55); text-align: left; }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none; }
.hero h1 { margin-top: 20px; font-weight: 600; font-size: clamp(44px, 5.8vw, 84px); line-height: .98; letter-spacing: -0.045em; text-wrap: balance; }
.hero h1 span { display: block; color: var(--cream); }
.hero h1 .stop { font-style: normal; color: var(--amber); }
.lede { margin-top: 18px; max-width: 1040px; font-size: 21px; line-height: 1.5; color: var(--on-band-2); text-wrap: balance; }

/* ---------- Call and email, in the card where v14's form sits ---------- */
.aform { --focus: #14284B; width: 100%; max-width: 680px; margin-top: 26px; padding: 16px; border-radius: 20px; background: var(--surface); color: var(--ink); text-align: left; box-shadow: var(--shadow-band); }
.cta2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.cta2 .btn { width: 100%; min-height: 54px; padding: 0 18px; border-radius: 14px; white-space: normal; text-align: center; line-height: 1.2; }
.cta2 .btn .i { width: 18px; height: 18px; }
.cta2__hint { margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--ink-2); text-align: center; }
.cta2__hint a { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; text-underline-offset: .2em; }

.under { margin-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 1100px; }
.ticks { display: flex; justify-content: center; gap: 6px 26px; }
.ticks li { display: flex; align-items: center; gap: 9px; font-size: 15px; line-height: 1.4; color: var(--on-band-2); white-space: nowrap; }
.ticks .tk { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; flex: none; background: rgb(127 193 184 / .2); color: #7FC1B8; }
.ticks .tk .i { width: 12px; height: 12px; stroke-width: 2; }
@media (min-width: 1101px) {
  .hero__copy { padding-top: 32px; }
  .hero h1 { margin-top: 16px; }
  .lede { margin-top: 14px; }
  .aform { margin-top: 22px; }
  .under { flex-direction: row; justify-content: center; gap: 26px; max-width: none; }
  .instrument.rdi { margin-top: 28px; }
}
@media (min-width: 761px) and (max-width: 1099px) { .ticks { display: grid; justify-content: center; gap: 6px; } }

/* =====================================================================
   Hero window: the original chart window (Dave: "I prefer the original charts"). A render of the real client
   dashboard, light product UI in both themes, with the phone view in front. Daily bars, no draw-in.
   ===================================================================== */
.hero:has(.rdi) { --edgeh: 330px; }
.instrument.rdi { position: relative; margin-top: 40px; height: 600px; }
.rdi .win { position: absolute; left: 50%; top: 0; width: 940px; margin-left: -540px; background: #fff; color: #0F2240; border-radius: 16px; box-shadow: var(--shadow-band); overflow: hidden; z-index: 1; }
.rdi .win__bar { height: 40px; display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid #E3E8EF; background: #F6F8FB; }
.rdi .dots { display: flex; gap: 7px; width: 47px; } .rdi .dots i { width: 11px; height: 11px; border-radius: 50%; background: #D5DCE6; }
.rdi .url { margin-inline: auto; width: 320px; height: 24px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px #E3E8EF; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 400; color: #4B5B78; }
.rdi .url .i { width: 11px; height: 11px; }
.rd-app { display: grid; grid-template-columns: 214px 1fr; background: #EEF2F8; font-family: var(--sans); color: #0F2240; }
.rd-side { background: #fff; border-right: 1px solid #E3E8EF; padding: 18px 12px; }
.rd-client { display: flex; gap: 10px; align-items: center; padding: 0 4px 18px; }
.rd-logo { width: 34px; height: 34px; border-radius: 9px; background: #127A74; color: #fff; display: grid; place-items: center; flex: none; }
.rd-logo .i { width: 18px; height: 18px; }
.rd-client b { display: block; font-weight: 700; font-size: 14px; line-height: 1.15; }
.rd-client small { display: block; white-space: nowrap; font-size: 11px; color: #4B5B78; margin-top: 2px; }
.rd-client strong { font-weight: 800; color: #0F2240; }
.rd-navh { padding: 0 8px; font-size: 11.5px; font-weight: 600; color: #4B5B78; }
.rd-side a { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 9px 10px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: #0F2240; }
.rd-side a .i { width: 15px; height: 15px; color: #4B5B78; }
.rd-side a.on { background: #EEF2F8; box-shadow: inset 2px 0 0 #127A74; font-weight: 600; }
.rd-main { padding: 12px 132px 20px 20px; }
.rd-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #DCE3EC; font-size: 12.5px; color: #4B5B78; }
.rd-owner { display: flex; align-items: center; gap: 8px; }
.rd-owner i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px #DCE3EC; font: 700 11px/1 var(--sans); font-style: normal; color: #0F2240; }
.rd-owner b { display: block; font-size: 12.5px; font-weight: 700; color: #0F2240; }
.rd-owner small { display: block; font-size: 11px; }
.rd-kick { margin-top: 14px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #4B5B78; }
.rd-greet { margin-top: 10px; display: flex; align-items: baseline; gap: 14px; }
.rd-greet .rd-kick { margin: 0; order: 2; }
.rd-hi { margin: 0; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.rd-card { background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px rgb(15 34 64 / .06), 0 1px 2px rgb(15 34 64 / .04); }
.rd-big { margin-top: 10px; padding: 14px 18px 10px; background: #fff; }
.rd-big__h { display: flex; align-items: center; gap: 10px; }
.rd-big__h b { font-weight: 600; font-size: 15px; }
.rd-big__h .rd-info { margin-left: auto; }
.rd-pill { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 6px; background: #E6F4EA; color: #1E6B38; font: 600 11px/1 var(--sans); white-space: nowrap; }
.rd-pill i { width: 5px; height: 5px; border-radius: 50%; background: #1E7B3B; }
.rd-pill--g { margin-top: 10px; background: #EEF2F8; color: #3E4F70; }
.rd-pill--g i { background: transparent; box-shadow: inset 0 0 0 1.5px #6B7C9B; width: 7px; height: 7px; }
.rd-info { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; box-shadow: inset 0 0 0 1.2px #4B5B78; font: 600 10px/1 var(--sans); color: #4B5B78; }
.rd-big__body { display: grid; grid-template-columns: 150px 1fr; align-items: end; gap: 10px; }
.rd-num { margin-top: 4px; font-weight: 500; font-size: 52px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.rd-num span { display: block; margin: 6px 0 0; font-size: 16px; font-weight: 500; letter-spacing: 0; color: #3E4F70; }
.rd-chart { display: block; width: 100%; height: auto; margin-top: 4px; --fs: 11px; }
.rd-grid line { stroke: #E3E8EF; stroke-width: 1; }
.rd-ax text { font: 500 var(--fs, 10.5px) var(--sans); fill: #4B5B78; }
.rd-rest { font: 500 11px var(--sans); fill: #4B5B78; }
.rd-dbars rect { fill: #127A74; }
.rd-row { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rd-sm { padding: 14px 16px; }
.rd-sm__h { display: flex; align-items: center; gap: 9px; }
.rd-sm__h b { font-weight: 600; font-size: 13.5px; margin-right: auto; }
.rd-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; }
.rd-ic .i { width: 14px; height: 14px; }
.rd-ic--t { background: #DFF1EF; color: #0E6E68; } .rd-ic--p { background: #EDE7FD; color: #6D28D9; }
.rd-num2 { margin-top: 8px; font-weight: 500; font-size: 30px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rd-sub { margin-top: 5px; font-size: 12px; color: #3E4F70; }
.rd-bars { margin-top: 10px; height: 52px; display: flex; align-items: flex-end; gap: 3px; }
.rd-bars i { flex: 1; background: #127A74; border-radius: 2px 2px 0 0; }
.rd-bars i.nyi { height: 100%; background: repeating-linear-gradient(135deg, #fff 0 3px, #C3CCD9 3px 4.5px); box-shadow: inset 0 0 0 1px #B5C0CF; border-radius: 3px; }
.rd-leg { margin-top: 6px; display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: #3E4F70; }
.rd-leg span { display: inline-flex; align-items: center; gap: 4px; }
.rd-leg i { width: 8px; height: 8px; border-radius: 2px; }
.rd-leg .k3 { background: repeating-linear-gradient(135deg, #fff 0 2px, #9AA7BD 2px 3px); box-shadow: inset 0 0 0 1px #9AA7BD; }
.rd-stack { margin-top: 12px; display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; }
.rd-list { margin-top: 10px; display: grid; gap: 6px; }
.rd-list li { display: grid; grid-template-columns: 10px 1fr auto; gap: 9px; align-items: center; font-size: 12px; }
.rd-list li i { width: 8px; height: 8px; border-radius: 2px; }
.rd-list li b { font-weight: 700; font-variant-numeric: tabular-nums; }
/* "Seen in Google Search" bars and the "Clicked or tapped" series (former inline styles, moved for the CSP) */
.rd-bars .h50 { height: 50%; } .rd-bars .h55 { height: 55%; } .rd-bars .h58 { height: 58%; } .rd-bars .h60 { height: 60%; }
.rd-bars .h61 { height: 61%; } .rd-bars .h64 { height: 64%; } .rd-bars .h69 { height: 69%; } .rd-bars .h71 { height: 71%; }
.rd-bars .h72 { height: 72%; } .rd-bars .h76 { height: 76%; } .rd-bars .h78 { height: 78%; } .rd-bars .h79 { height: 79%; }
.rd-bars .h82 { height: 82%; } .rd-bars .h86 { height: 86%; } .rd-bars .h88 { height: 88%; } .rd-bars .h90 { height: 90%; }
.rd-bars .h92 { height: 92%; }
.k-web { background: #127A74; } .k-call { background: #7C3AED; } .k-site { background: #0B6BA8; } .k-dir { background: #B45309; }
.rd-stack .k-web { flex: 52; } .rd-stack .k-call { flex: 21; } .rd-stack .k-site { flex: 15; } .rd-stack .k-dir { flex: 8; }
/* Phone view, in front of the window's right edge */
.rdm { position: absolute; z-index: 3; left: calc(50% + 300px); top: 40px; width: 286px; border-radius: 44px; background: #0D1422; padding: 9px; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 30px 60px -20px rgb(0 0 0 / .55), 0 70px 120px -40px rgb(0 0 0 / .5); }
.rdm::before { content: ""; position: absolute; inset: 1px; border-radius: 43px; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .14); pointer-events: none; }
.rdm__screen { position: relative; border-radius: 36px; overflow: hidden; height: auto; padding-bottom: 18px; background: #EEF2F8; color: #0F2240; font-family: var(--sans); }
.rdm__island { position: absolute; top: 9px; left: 50%; width: 82px; height: 24px; margin-left: -41px; border-radius: 20px; background: #0D1422; z-index: 2; }
.rdm__status { display: flex; justify-content: space-between; padding: 13px 24px 0 28px; font: 600 12px/1 var(--sans); background: #fff; height: 40px; }
.rdm__head { display: flex; align-items: center; gap: 9px; padding: 6px 14px 12px; background: #fff; border-bottom: 1px solid #E3E8EF; }
.rdm__head .rd-logo { width: 28px; height: 28px; border-radius: 8px; }
.rdm__head .rd-logo .i { width: 15px; height: 15px; }
.rdm__head b { display: block; font-size: 13px; font-weight: 700; line-height: 1.15; }
.rdm__head small { display: block; font-size: 10.5px; color: #4B5B78; }
.rdm__head strong { font-weight: 800; color: #0F2240; }
.rdm__body { padding: 10px 12px 14px; }
.rdm__date { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: #4B5B78; }
.rdm__hi { margin: 2px 0 0; font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
/* The phone is a feed of enquiries coming in, newest at top (Dave, 21 Oct), not a copy of the desktop chart */
.rdf { margin-top: 10px; display: grid; gap: 8px; }
.rdf__new { position: relative; padding: 12px 12px 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #F5C27A, 0 8px 18px -10px rgb(15 34 64 / .35); }
.rdf__new::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: #F59B2A; }
.rdf__new b { display: block; margin-top: 8px; font-size: 14px; font-weight: 700; }
.rdf__new small, .rdf__row small { display: block; font-size: 12px; color: #4B5B78; }
.rdf q, .rdf__new q { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: #0F2240; font-weight: 500; }
.rdf__new q { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.rdf__row { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 12px; background: #fff; }
.rdf__row b { display: block; font-size: 13px; font-weight: 600; }
.rdf__ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #DCE9FB; color: #14284B; }
.rdf__ic--f { background: #D6EFEC; }
.rdf__ic .i { width: 14px; height: 14px; }
.rdf__new .rd-pill, .rdf__row .rd-pill { margin-top: 6px; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes rdfIn { from { opacity: 0; transform: translateY(-10px); } }
  .rdf__new { animation: rdfIn 480ms cubic-bezier(.2, 0, 0, 1) 700ms 1 both; }
}
@media (max-width: 1340px) { .rdm { left: auto; right: 0; } .rdi .win { left: auto; right: 186px; margin-left: 0; } }
@media (max-width: 1200px) {
  .instrument.rdi { height: auto; display: grid; justify-items: center; padding-bottom: 32px; }
  .rdi .win { display: none; }
  .rdm { position: relative; left: auto; right: auto; top: auto; }
}
@media (max-width: 760px) {
  .hero:has(.rdi) { --edgeh: 300px; }
  .instrument.rdi { margin-top: 28px; padding-bottom: 20px; }
  .rdm { width: 320px; }
  .rdm__head b { font-size: 14px; } .rdm__head small { font-size: 11.5px; }
  .rdm__date { font-size: 12px; } .rdm__hi { font-size: 21px; }
}

/* ---------- The rebuild: the heading, then the Example Plumbing pair ---------- */
.rebuild { padding-top: 104px; padding-bottom: 104px; background: var(--white-ground); }
.rebuild__head { max-width: 1040px; margin-inline: auto; }
.rebuild__head .intro { max-width: 40em; }
.frame { position: relative; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-band); overflow: hidden; }
.frame__bar { height: 34px; display: flex; align-items: center; padding: 0 14px; background: var(--surface-2); border-bottom: 1px solid var(--hair); }
.dots { display: flex; gap: 7px; width: 47px; } .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--hair-2); }
.url { margin-inline: auto; width: 220px; height: 22px; border-radius: 7px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--ink); }
.frame img { display: block; width: 100%; height: auto; }

/* Example Plumbing, a made-up business: its own brand inside the mock-up (deep green with brass), never outside the
   device frames. The browser sits behind on the left; the phone overlaps it at the front right. */
.exrow { max-width: 1040px; margin: 48px auto 0; display: grid; grid-template-columns: minmax(0, 300px) 600px; justify-content: center; gap: 48px; align-items: center; padding: 28px 40px; border-radius: 28px; background: var(--stage); }
.exrow__copy .exrow__h { font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
@media (max-width: 760px) { .exrow__copy .exrow__h { font-size: 24px; } }
.exrow__copy .exrow__lead { margin-top: 14px; font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 24em; text-wrap: pretty; }
.more { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.more .btn { min-height: 44px; padding: 0 20px; font-size: 15px; }
@media (max-width: 760px) { .more .btn { width: 100%; } }
.exfig { position: relative; width: 600px; height: 644px; }
.exfig__in { position: relative; width: 600px; height: 644px; }
.bframe { position: absolute; left: 0; top: 0; width: 520px; z-index: 1; }
.bframe .url { width: 230px; font-size: 13px; }
.frame__sp { width: 47px; }
.exfig .phone { position: absolute; right: 0; top: 200px; z-index: 2; box-shadow: 0 0 0 1px rgb(12 26 51 / .4), 0 30px 60px -22px rgb(12 26 51 / .55), -18px 0 40px -18px rgb(12 26 51 / .35); }
.ep { --ep-g: #1D3A32; --ep-b: #C9A66B; --ep-c: #F7F2E9; --ep-i: #1B2723; --ep-i2: #4A5752; background: var(--ep-c); color: var(--ep-i); font-family: var(--sans); }
.ep__nav { display: flex; align-items: center; gap: 20px; padding: 14px 20px; background: var(--ep-c); }
.ep__brand { display: inline-flex; align-items: center; gap: 9px; margin-right: auto; font-weight: 600; font-size: 14px; letter-spacing: 0.01em; color: var(--ep-g); white-space: nowrap; }
.ep__mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--ep-g); box-shadow: inset 0 0 0 1.5px var(--ep-b); color: var(--ep-c); font: 700 12px/1 var(--sans); font-style: normal; letter-spacing: 0.02em; }
.ep__links { display: flex; gap: 20px; white-space: nowrap; font-size: 12px; font-weight: 500; color: var(--ep-i2); }
.ep__call, .ep__acts span { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ep__call { background: var(--ep-g); color: var(--ep-c); }
.ep .i { width: 12px; height: 12px; }
.ep__call .i { color: var(--ep-b); }
.ep__hero { position: relative; height: 300px; overflow: hidden; background: var(--ep-g); }
.ep__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 80% 62%; }
.ep__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(20 40 34 / .94) 0%, rgb(20 40 34 / .88) 44%, rgb(20 40 34 / .35) 66%, rgb(20 40 34 / 0) 82%); }
.ep__copy { position: absolute; z-index: 1; left: 24px; top: 0; bottom: 0; width: 292px; display: flex; flex-direction: column; justify-content: center; color: var(--ep-c); }
.ep__kick { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #E6D3AC; }
.ep__h { margin-top: 10px; font-weight: 600; font-size: 34px; line-height: 1; letter-spacing: -0.04em; text-wrap: balance; color: var(--ep-c); }
.ep__sub { margin-top: 10px; font-size: 13px; font-weight: 300; line-height: 1.45; color: rgb(247 242 233 / .9); max-width: 25em; text-wrap: balance; }
.ep__acts { margin-top: 16px; display: flex; gap: 8px; }
.epd .ep__acts .p { background: var(--ep-b); color: #14261F; }
.epd .ep__acts .s { box-shadow: inset 0 0 0 1px rgb(247 242 233 / .55); color: var(--ep-c); }
.ep__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 12px; font-weight: 500; }
.ep__trust span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 9px; border-radius: 50%; background: var(--ep-b); vertical-align: 3px; }
.epd .ep__trust { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgb(247 242 233 / .2); color: rgb(247 242 233 / .88); }
.ep__svc { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 0 36px; padding: 14px 20px 16px; }
.ep__svc p { font-size: 12px; line-height: 1.4; color: var(--ep-i2); }
.ep__svc b { display: block; font-weight: 600; font-size: 13px; color: var(--ep-g); }
.ep__svc b::before { content: ""; display: inline-block; width: 12px; height: 1.5px; margin-right: 7px; background: var(--ep-b); vertical-align: 4px; }
.epm { height: 100%; }
.epm__status { display: flex; justify-content: space-between; padding: 12px 22px 0 26px; font: 600 12px/1 var(--sans); color: var(--ep-i); }
.epm .ep__nav { gap: 12px; padding: 14px 14px 10px; }
.epm .ep__brand { font-size: 13px; gap: 8px; }
.epm .ep__mark { width: 24px; height: 24px; border-radius: 6px; }
.ep__menu { display: grid; gap: 4px; width: 18px; }
.ep__menu i { display: block; height: 1.5px; border-radius: 2px; background: var(--ep-g); }
.epm__hero { position: relative; height: 212px; margin: 0 10px; border-radius: 14px; overflow: hidden; background: var(--ep-g); }
.epm__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 24% 40%; }
.epm__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(20 40 34 / 0) 30%, rgb(20 40 34 / .9) 78%); }
.epm .ep__h { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 14px; margin: 0; font-size: 23px; }
.epm__body { padding: 12px 12px 0; }
.epm .ep__trust { justify-content: center; color: var(--ep-i2); }
.epm .ep__acts { margin-top: 17px; display: grid; gap: 7px; }
.epm .ep__acts span { height: 40px; border-radius: 11px; font-size: 13px; gap: 8px; }
.epm .ep__acts .p { background: var(--ep-g); color: var(--ep-c); }
.epm .ep__acts .p .i { width: 13px; height: 13px; color: var(--ep-b); }
.epm .ep__acts .s { box-shadow: inset 0 0 0 1px #BFC7BF; color: var(--ep-g); }
.phone { position: relative; width: 240px; flex: none; border-radius: 40px; background: #0D1422; padding: 8px; box-shadow: 0 0 0 1px rgb(12 26 51 / .4), 0 30px 60px -22px rgb(12 26 51 / .5); }
.phone__screen { position: relative; border-radius: 32px; overflow: hidden; height: 428px; background: #fff; }
.exfig .phone .phone__screen { background: #F7F2E9; }
.island { position: absolute; top: 8px; left: 50%; width: 72px; height: 22px; margin-left: -36px; border-radius: 20px; background: #0D1422; z-index: 3; }
/* Annotations, not controls: words left of the phone, a hairline leader to a dot on the call and enquiry buttons */
.ann { position: absolute; z-index: 4; left: 0; width: 392px; padding-right: 64px; text-align: right; font: 600 13px/1.35 var(--sans); color: var(--ink); }
.ann::before { content: ""; position: absolute; right: 4px; top: 9px; width: 54px; height: 0; border-top: 1.5px solid var(--line); }
.ann::after { content: ""; position: absolute; right: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: #F59B2A; box-shadow: 0 0 0 2px #fff; }
.ann--call { top: 549px; }
.ann--form { top: 596px; }
/* Phones: the same two notes as a quiet list under the copy, dot only */
.anns-inline { display: none; margin-top: 14px; gap: 6px; }
.anns-inline li { display: flex; align-items: center; gap: 10px; font: 600 13px/1.35 var(--sans); color: var(--ink); }
.anns-inline li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #F59B2A; flex: none; }
@media (max-width: 1100px) { .exrow { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 32px; gap: 28px; } .exrow__copy { justify-self: stretch; max-width: 600px; margin-inline: auto; } }

/* ---------- How it works: on paper, a plain numbered list, no cards ---------- */
.how { padding: 104px 0; background: var(--warm); box-shadow: inset 0 1px 0 var(--warm-line), inset 0 -1px 0 var(--warm-line); }
.how__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px 72px; align-items: start; }
.how__head { position: sticky; top: 32px; }
.hlist { border-top: 1px solid var(--warm-line); }
.hlist li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--warm-line); align-items: baseline; }
.hlist .n { grid-row: span 2; font-weight: 600; font-size: 28px; line-height: 1; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.hlist .n::after { content: "."; color: var(--amber); }
.hlist b { font-weight: 600; font-size: 21px; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); }
.hlist .t { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 1100px) { .how__head { position: static; } }
@media (max-width: 760px) {
  .hlist li { grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; padding: 12px 0; }
  .hlist .n { font-size: 21px; }
  .hlist b { font-size: 17px; }
  .hlist .t { margin-top: 2px; }
}

/* ---------- Points of difference: a six-column track, three across ---------- */
.pods__head { max-width: 760px; }
.pods__head .intro { margin-top: 14px; }
.pods { margin-top: 40px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.pods li { grid-column: span 2; display: grid; align-content: start; gap: 8px; padding: 24px 24px 26px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-2); }
.pods:has(> li:nth-child(4):last-child) li,
.pods:has(> li:nth-child(5):last-child) li:nth-child(n+4) { grid-column: span 3; }
.pods__i { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 6px; border-radius: 11px; background: var(--warm); box-shadow: inset 0 0 0 1px var(--warm-line); color: var(--ink); }
.pods__i .i { width: 18px; height: 18px; }
.pods b { font-weight: 600; font-size: 19px; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); }
.pods p { font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 30em; }
@media (max-width: 960px) { .pods li, .pods:has(> li:nth-child(4):last-child) li, .pods:has(> li:nth-child(5):last-child) li:nth-child(n+4) { grid-column: span 3; } }
@media (max-width: 760px) {
  .pods { margin-top: 24px; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pods li, .pods:has(> li:nth-child(4):last-child) li, .pods:has(> li:nth-child(5):last-child) li:nth-child(n+4) { grid-column: auto; padding: 18px; grid-template-columns: 36px 1fr; column-gap: 14px; row-gap: 4px; }
  .pods__i { grid-row: span 2; margin-bottom: 0; }
  .pods b { font-size: 17px; }
}

/* ---------- Why choose Measured? A navy band, the page's one statement before the questions ---------- */
.whyband { position: relative; isolation: isolate; color: var(--on-band); --focus: var(--amber); padding: 96px 0;
  background: radial-gradient(46% 90% at 100% 0%, rgb(245 155 42 / .14), transparent 70%), radial-gradient(40% 80% at 0% 100%, rgb(47 111 192 / .2), transparent 70%), var(--band); }
.why { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px 56px; align-items: start; }
.why h2 { font-weight: 600; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.06; letter-spacing: -0.045em; color: var(--cream); text-wrap: balance; }
.why p { font-size: 24px; line-height: 1.5; letter-spacing: -0.01em; color: #fff; text-wrap: pretty; }
.why .link { margin-top: 14px; font-size: 17px; color: #fff; }
@media (max-width: 1100px) { .why { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .whyband { padding: 48px 0; } .why { gap: 12px; } .why h2 { font-size: 28px; } .why p { font-size: 17px; } .why .link { margin-top: 6px; } }

/* ---------- Questions: on the light ground, hairlines only; "More questions" folds the rest ---------- */
.qsec { padding: 104px 0; background: var(--white-ground); }
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px 56px; }
.faq h2 { font-weight: 600; font-size: 32px; letter-spacing: -0.02em; line-height: 1.1; }
.faq > div { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.faq details { border-top: 1px solid var(--hair); }
.faq details:first-child { border-top: 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 8px 0; font-weight: 600; font-size: 17px; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { width: 18px; height: 18px; color: var(--ink-2); transition: transform var(--dur) var(--ease); }
.faq details[open] > summary .i { transform: rotate(180deg); }
.faq details p { padding: 0 40px 18px 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.faq details p a { color: var(--ink); font-weight: 600; }
.moreq > summary { color: var(--ink-2); }
.moreq__in { padding: 0 0 6px 18px; border-left: 2px solid var(--amber); margin-bottom: 14px; }
.moreq__in details:first-child { border-top: 0; }

/* ---------- Close: the steps, and a way back to the one form ---------- */
.close { position: relative; isolation: isolate; color: var(--on-band); --focus: var(--amber); padding: 104px 0; overflow: hidden;
  background: radial-gradient(50% 70% at 88% 30%, rgb(245 155 42 / .16), transparent 70%), radial-gradient(40% 60% at 6% 100%, rgb(47 111 192 / .22), transparent 70%), var(--band); }
.close__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px 64px; align-items: center; }
.close h2 { font-weight: 600; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.06; letter-spacing: -0.045em; text-wrap: balance; }
.steps { margin-top: 26px; display: grid; max-width: 580px; }
.steps li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid rgb(255 255 255 / .12); }
.steps li:first-child { border-top: 0; padding-top: 0; }
.steps .n { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgb(245 155 42 / .18); color: var(--amber); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.steps b { display: block; font-weight: 600; font-size: 17px; color: #fff; }
.steps p { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--on-band-2); }
.stepsfold > summary { display: none; }
.go { border-radius: 22px; background: #FFFBF3; color: #14284B; padding: 30px; box-shadow: var(--shadow-band); --focus: #14284B; }
.go h3 { font-weight: 600; font-size: 24px; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.go .btn { margin-top: 18px; width: 100%; min-height: 56px; font-size: 17px; border-radius: 14px; }
.go .btn--cream { margin-top: 10px; background: transparent; color: #14284B; box-shadow: inset 0 0 0 1.5px #CDBF9F; }
.go .btn--cream:hover { box-shadow: inset 0 0 0 1.5px #14284B; }
.alt { margin-top: 20px; padding-top: 16px; border-top: 1px solid #EEDFC4; }
.alt b { font-weight: 600; font-size: 15px; }
.alt__row { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 0 20px; }
.alt__row a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 15px; color: #14284B; }
.alt__row .i { color: #3E4F70; }
.alt p { margin-top: 2px; font-size: 13px; line-height: 1.5; color: #3E4F70; }
.go .link { font-size: 15px; }

/* ---------- Footer ---------- */
.foot { background: var(--bg); padding: 48px 0 52px; border-top: 1px solid var(--hair); }
.foot__grid { display: grid; grid-template-columns: 1fr auto; gap: 20px 32px; align-items: start; }
.foot .wordmark { color: var(--ink); font-size: 24px; }
.foot p { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--ink-2); max-width: 34em; }
.foot nav { display: flex; gap: 0 22px; flex-wrap: wrap; align-items: center; font-size: 15px; }
.foot nav a { color: var(--ink-2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; font-weight: 500; }
.theme { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink); font: 500 15px/1 var(--sans); cursor: pointer; }
.theme .moon { display: none; }
:root[data-theme="dark"] .theme .sun { display: none; } :root[data-theme="dark"] .theme .moon { display: block; }
.foot__legal { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 13px; color: var(--ink-2); }

/* ---------- Narrower screens ---------- */
@media (max-width: 1100px) {
  .how__grid { grid-template-columns: 1fr; gap: 28px; }
  .close__grid { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .head-tel { display: none; } .call-btn { display: inline-grid; }
}
@media (max-width: 760px) {
  .head { position: sticky; top: 0; box-shadow: 0 1px 0 rgb(255 255 255 / .08), 0 8px 20px -12px rgb(0 0 0 / .5); }
  .nav { display: none; } .menu { display: inline-grid; }
  .head__bar { height: 62px; }
  .head .btn { margin-left: 6px; padding: 0 16px; }
  .wordmark { font-size: 24px; }
  html { scroll-padding-top: 70px; }
  .hero { --edgeh: 150px; }
  .hero__copy { padding-top: 24px; text-align: left; justify-items: start; }
  .eyebrow { padding: 0; min-height: 0; box-shadow: none; background: none; font-size: 14px; align-items: flex-start; }
  .eyebrow::before { margin-top: 6px; }
  .hero h1 { margin-top: 14px; font-size: 44px; letter-spacing: -0.045em; line-height: 1; }
  .lede { margin-top: 14px; font-size: 17px; text-wrap: pretty; }
  .aform { margin-top: 18px; padding: 14px; border-radius: 18px; }
  .cta2 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cta2__hint { text-align: left; }
  .under { margin-top: 12px; align-items: flex-start; }
  /* Phones: the reassurance shows before the tap */
  .ticks { flex-direction: column; gap: 6px; }
  .ticks li { white-space: normal; }
  .sec { padding-top: 64px; }
  .h2 { font-size: 32px; }
  .intro { font-size: 17px; }
  /* Phones see the example pair too, stacked under its words: the pair keeps the desktop composition, the phone
     overlapping the browser's lower right, scaled as one picture to the card's width (site.js sets --exs; 0.543 at
     390). The two notes move to the list under the copy, at full size. */
  .exrow { margin-top: 40px; grid-template-columns: minmax(0, 1fr); justify-content: stretch; justify-items: center; gap: 20px; padding: 20px 16px 22px; border-radius: 22px; }
  .exrow__copy { justify-self: stretch; }
  .exrow__copy .exrow__lead { font-size: 15px; }
  .exfig { width: 100%; height: calc(644px * var(--exs, .543)); overflow: visible; }
  .exfig__in { width: 600px; height: 644px; transform: scale(var(--exs, .543)); transform-origin: 0 0; }
  .ann { display: none; } .anns-inline { display: grid; }
  .faq h2 { font-size: 24px; }
  .faq details p { padding-right: 0; }
  .close__grid { gap: 22px; }
  .stepsfold > summary { display: flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 10px; list-style: none; cursor: pointer; font-size: 15px; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: .25em; text-decoration-color: rgb(255 255 255 / .4); }
  .stepsfold > summary::-webkit-details-marker { display: none; }
  .stepsfold > summary .i { transition: transform var(--dur) var(--ease); }
  .stepsfold[open] > summary .i { transform: rotate(180deg); }
  .stepsfold:not([open]) ~ .steps { display: none; }
  .steps { margin-top: 14px; }
  .steps li { grid-template-columns: 30px 1fr; gap: 12px; padding: 10px 0; }
  .steps .n { width: 28px; height: 28px; border-radius: 8px; font-size: 13px; }
  .go { padding: 20px 16px; }
  .go h3 { font-size: 21px; }
  .foot { padding: 28px 0 24px; }
  .foot__grid { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 374px) { .hero h1 { font-size: 38px; } }
/* Dark: the form's focus ring is amber (navy on the navy card was about 1.1:1); the example phone gets a ring */
:root[data-theme="dark"] .hero .aform { --focus: var(--amber); background: var(--surface-2); box-shadow: 0 0 0 1px rgb(255 255 255 / .14), var(--shadow-band); }
:root[data-theme="dark"] .phone { box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 30px 60px -22px rgb(0 0 0 / .6); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero .aform { --focus: var(--amber); background: var(--surface-2); box-shadow: 0 0 0 1px rgb(255 255 255 / .14), var(--shadow-band); }
  :root:not([data-theme="light"]) .phone { box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 30px 60px -22px rgb(0 0 0 / .6); }
}
/* Eyebrow as a short list (Dave, 21 Oct: "we had it right the first time"; middle dots allowed on this line only) */
.eyebrow--list { gap: 0; padding: 0 16px; }
.eyebrow--list::before { display: none; }
.eyebrow--list .sep { display: inline-block; margin: 0 9px; color: var(--amber); font-weight: 700; transform: translateY(-0.02em); }
.eyebrow--list .brk { display: none; }
@media (max-width: 480px) {
  .eyebrow--list { height: auto; padding: 8px 16px; flex-wrap: wrap; justify-content: center; row-gap: 4px; border-radius: 18px; }
  .eyebrow--list .brk { display: block; flex-basis: 100%; height: 0; }
  .eyebrow--list .sep--brk { display: none; }
}
/* Phones set the hero left and drop the pill, so the list sits flush left too */
@media (max-width: 760px) { .eyebrow--list { padding: 0; justify-content: flex-start; align-items: center; } }

/* Hero ticks: three even columns on desktop, wrapping inside each tick; the "for" line sits under */
.ticks li { white-space: normal; align-items: flex-start; text-align: left; }
.ticks .tk { margin-top: 1px; }
.hero-for { margin-top: 12px; font-size: 15px; line-height: 1.45; color: var(--on-band-2); text-wrap: balance; }
@media (min-width: 1101px) {
  .under { flex-direction: column; align-items: center; gap: 0; }
  .ticks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 32px; max-width: 1080px; }
}
@media (min-width: 761px) and (max-width: 1100px) { .ticks { max-width: 620px; } }
@media (max-width: 760px) { .hero-for { margin-top: 10px; text-align: left; } }

/* Surface rhythm: navy hero, cards on the page ground, the showcase on white, How it works on paper, Why choose as a
   navy band, questions on white, the navy close. No two neighbours share a ground. */
/* Tighter rhythm on phones (Dave, 22 Oct): sections 48px, heading gaps trimmed */
@media (max-width: 760px) {
  .sec, .rebuild { padding-top: 48px; }
  .rebuild { padding-bottom: 48px; }
  .how { padding: 48px 0; }
  .qsec { padding: 40px 0 48px; }
  .close { padding: 48px 0; }
  .h2 { margin-top: 10px; }
  .pods { margin-top: 20px; }
  .exrow { margin-top: 24px; }
  .how__grid { gap: 18px; }
  .faq { gap: 4px; }
  .faq summary { min-height: 50px; }
}

/* Footer contact line: links, at least 44px to tap */
.foot__legal a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-underline-offset: .2em; }
/* The close card's email and phone show their values; on narrow phones the value wraps under its label, and the long
   address may break, so the card never grows past the page */
.close__grid > * { min-width: 0; }
.alt__row a { flex-wrap: wrap; column-gap: 8px; }
.alt__row .alt__v { font-weight: 500; color: #3E4F70; overflow-wrap: anywhere; }
.foot__legal { align-items: center; }
.foot__legal a { overflow-wrap: anywhere; }

/* ---------- Plain pages: privacy and 404 ---------- */
.plain { padding: 72px 0 104px; background: var(--white-ground); }
.plain h1 { font-weight: 600; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.045em; text-wrap: balance; }
.plain__links { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.plain__links .btn--line { color: var(--ink); }
.prose { max-width: 42em; }
.prose .updated { margin-top: 12px; font-size: 15px; color: var(--ink-2); }
.prose .lead { margin-top: 20px; font-size: 19px; line-height: 1.55; color: var(--ink); }
.prose h2 { margin-top: 44px; font-weight: 600; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; }
.prose p, .prose ul { margin-top: 12px; color: var(--ink-2); }
.prose ul { list-style: disc; padding-left: 1.3em; }
.prose li + li { margin-top: 4px; }
.prose a { color: var(--ink); font-weight: 600; text-underline-offset: .2em; overflow-wrap: anywhere; }
.prose b { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) { .plain { padding: 40px 0 64px; } .prose h2 { margin-top: 32px; font-size: 21px; } .prose .lead { font-size: 17px; } }