/* Brazos Site Co. — v4 "Precision" (v1.1)
   Crisp cool white, cobalt where it means something, one warm ember accent used sparingly,
   and full-bleed dark site-model plates for punch. */

@font-face { font-family: "Mona Sans"; src: url("../fonts/mona-sans-latin.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
/* metric-matched fallback so the swap does not shift layout */
/* Arial on Windows and Mac, Roboto on Android: their average widths differ by 0.2%, so one set of overrides fits both. */
@font-face { font-family: "Mona Fallback"; src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular"); size-adjust: 104%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }

:root {
  --paper: #F8F9FB;          /* cool white page */
  --paper-2: #EDF0F4;        /* cool gray fill */
  --surface: #FFFFFF;
  --ink: #0B0D12;
  --ink-2: #252A33;
  --muted: #535A67;
  --faint: #8A919D;
  --line: rgba(11, 13, 18, .09);
  --line-2: rgba(11, 13, 18, .16);
  --blue: #2747E8;
  --blue-ink: #1B34C4;
  --blue-soft: #E7ECFD;
  --ember: #E8551F;          /* the one warm accent: flags, the period, a single highlight per section */
  --ember-ink: #B63C0D;      /* ember for text on white (5.6:1) */
  --ember-lit: #FF7A45;      /* ember on dark */
  --ok: #1B7A4B;
  --warn: #9A5A06;
  --bad: #C0361E;
  --dark: #090B10;
  --dark-2: #11141B;
  --dark-line: rgba(226, 232, 244, .11);
  --on-dark: #F2F4F8;
  --on-dark-2: #A4ABB8;

  --sans: "Mona Sans", "Mona Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --serif: "Instrument Serif", Georgia, serif;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1360px;
  --sec: clamp(88px, 11vw, 168px);
  --r: 20px;
  --r-sm: 12px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --shadow-lg: 0 1px 0 rgba(255,255,255,.7) inset, 0 40px 80px -32px rgba(11,13,18,.28), 0 16px 32px -16px rgba(11,13,18,.14);
  --shadow-sm: 0 1px 2px rgba(11,13,18,.06), 0 6px 16px -8px rgba(11,13,18,.14);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* One offset for every in-page jump: the sticky header's height (68px, 60px on phones). Lenis reads it too. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 68px; }
html:not(.lenis) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:not(.lenis) { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" 0; overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.dark :focus-visible, .contact-copy :focus-visible { outline-color: #8FA2FF; }
/* sections and other targets that only take focus so the next Tab starts there */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 10px; font-weight: 600; transition: top .2s; }
.skip:focus { top: 12px; }
/* JetBrains Mono is for real data only: the check report and metrics, the receipt, the browser URL bar, the 390 × 844 tag. */
.mono { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; font-weight: 500; font-variant-numeric: tabular-nums; }
/* Small labels everywhere else: Mona Sans on its narrow axis (already in the one Mona file, so no extra download). */
.cap { font-family: var(--sans); font-stretch: 78%; font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; }
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.fine { font-size: 13px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.dark .fine { color: var(--on-dark-2); }

/* ---------- type ---------- */
.h1 {
  font-size: clamp(2.6rem, 5.7vw, 5.6rem); line-height: .97; letter-spacing: -.045em; font-weight: 600;
  font-stretch: 104%; text-wrap: balance;
}
.h1 .ink { display: block; }
/* Second line: contrast from the face, not from a pale gray. Instrument Serif italic, full ink. */
.h1 .em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.15em; line-height: .9; letter-spacing: -.028em; font-stretch: 100%; color: var(--ink); }
.dot { font-style: inherit; color: var(--ember); }
.h2 { font-size: clamp(2.1rem, 4.2vw, 3.9rem); line-height: 1.0; letter-spacing: -.04em; font-weight: 600; font-stretch: 103%; text-wrap: balance; }
.lede { font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.5; color: var(--muted); text-wrap: pretty; max-width: 46ch; }
.dark .lede { color: var(--on-dark-2); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); margin-bottom: 22px; font-stretch: 78%; font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.tick { width: 18px; height: 1px; background: var(--ink); display: inline-block; }
/* Section labels: narrow Mona caps after a short rule. No numbers. */
.label { display: flex; align-items: center; gap: 12px; color: var(--muted); margin-bottom: 22px; font-family: var(--sans); font-stretch: 78%; font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; }
.label::before { content: ""; width: 16px; height: 1px; background: var(--line-2); flex: none; }
.dark .label, [data-dark] .label { color: var(--on-dark-2); }
.dark .label::before, [data-dark] .label::before { background: rgba(242,244,248,.3); }
/* Label-led intros: a small label runs into one big paragraph. */
.lead-k { display: inline; font: 700 12.5px/1 var(--sans); font-stretch: 78%; text-transform: uppercase; letter-spacing: .08em; margin-right: 1.4em; vertical-align: .5em; color: var(--muted); }
.lead-p { display: inline; font-size: clamp(1.55rem, 2.6vw, 2.5rem); line-height: 1.22; letter-spacing: -.03em; font-weight: 500; text-wrap: pretty; color: var(--ink); }
.lead { max-width: 30em; }
/* A staggered second line: set in from the left, so the two lines read as a step. */
.stag { display: inline-block; padding-left: 1.4em; }
/* Studio artwork tag: one style for every AI image, a small dark pill. */
.art-tag { display: inline-flex; align-items: center; gap: 8px; width: fit-content; font: 700 11px/1 var(--sans); font-stretch: 78%; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(9,11,16,.68); padding: 7px 10px; border-radius: 999px; white-space: nowrap; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ---------- buttons ---------- */
.btn {
  --h: 48px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 20px 0 22px; border-radius: 999px; font-size: 15.5px; font-weight: 560; letter-spacing: -.01em;
  white-space: nowrap; isolation: isolate; overflow: hidden; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s, transform .4s var(--ease), box-shadow .3s;
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .45s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: inset(100% 0 0 0); transition: clip-path .5s var(--ease); }
.btn:hover::after { clip-path: inset(0 0 0 0); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink::after { background: var(--blue); }
.btn--blue { background: var(--blue); color: #fff; }
.btn--blue::after { background: var(--ink); }
.dark .btn--blue::after { background: #3655F0; }
.btn--line { border: 1px solid var(--line-2); color: var(--ink); background: transparent; }
.btn--line::after { background: var(--ink); }
.btn--line:hover { color: var(--paper); border-color: var(--ink); }
.btn--paper { background: var(--paper); color: var(--ink); }
.btn--paper::after { background: #fff; }
.btn--sm { --h: 38px; font-size: 14px; padding: 0 16px; }
.btn--block { width: 100%; }
/* The one primary button: an ink plate with a cobalt square that holds the arrow (ember on hover). */
.btn--cta { --h: 52px; background: var(--ink); color: var(--paper); border-radius: 12px; padding: 0 6px 0 20px; gap: 16px; justify-content: space-between; }
.btn--cta::after { display: none; }
.btn-sq { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--blue); color: #fff; flex: none; transition: background .4s var(--ease); }
.btn-sq svg { width: 18px; height: 18px; }
.btn--cta:hover .btn-sq { background: var(--ember); }
.btn--cta:hover .btn-sq svg { transform: translateX(3px); }
.btn--cta.btn--sm { --h: 44px; font-size: 14.5px; padding: 0 4px 0 16px; gap: 12px; border-radius: 10px; }
.btn--cta.btn--sm .btn-sq { width: 36px; height: 36px; border-radius: 7px; }
.dark .btn--cta, [data-dark] .btn--cta { background: var(--paper); color: var(--ink); }
/* white surfaces inside dark panels (the sketch inspector, the contact form) keep the ink button */
[data-dark] .inspector .btn--cta, [data-dark] .form .btn--cta { background: var(--ink); color: var(--paper); }
.btn--cta:focus-visible { outline-offset: 3px; }
.btn[aria-disabled="true"] { opacity: .65; pointer-events: none; }
.linkbtn { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); min-height: 32px; transition: color .2s; text-align: left; font-size: 14px; font-weight: 520; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.linkbtn svg { width: 15px; height: 15px; }
.linkbtn:hover { color: var(--ink); }
.dark .linkbtn { color: var(--on-dark-2); text-decoration-color: rgba(242,244,248,.3); }
.dark .linkbtn:hover { color: var(--on-dark); }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 0 rgba(39,71,232,.45); animation: ping 2.4s var(--ease) infinite; flex: none; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(39,71,232,.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(39,71,232,0); } }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 60; transition: background-color .35s, box-shadow .35s, backdrop-filter .35s; }
.hdr.is-scrolled { background: rgba(248,249,251,.82); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); box-shadow: 0 1px 0 var(--line); }
.hdr-in { height: 68px; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; min-height: 44px; }
.brand-mark { width: 28px; height: 28px; color: var(--ink); }
.brand-word { font-size: 17.5px; font-weight: 500; letter-spacing: -.02em; color: var(--muted); font-stretch: 100%; }
.brand-word b { color: var(--ink); font-weight: 640; font-stretch: 112%; letter-spacing: -.025em; }
.nav { display: flex; gap: 2px; margin-inline: auto; }
.nav a { position: relative; padding: 8px 12px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); border-radius: 999px; transition: background-color .2s, color .2s; }
.nav a:hover { background: rgba(11,13,18,.05); }
.nav a.is-active { color: var(--ink); background: rgba(11,13,18,.06); }
.hdr-right { display: flex; align-items: center; gap: 14px; flex: none; margin-left: auto; }
.hdr-tel { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 560; min-height: 44px; }
.hdr-tel svg { width: 16px; height: 16px; }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 12px; position: relative; }
.menu-btn i { position: absolute; left: 13px; right: 13px; height: 1.6px; background: var(--ink); border-radius: 2px; transition: transform .4s var(--ease); }
.menu-btn i:nth-of-type(1) { top: 18px; } .menu-btn i:nth-of-type(2) { top: 25px; }
.menu-btn[aria-expanded="true"] i:nth-of-type(1) { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:nth-of-type(2) { transform: translateY(-3.5px) rotate(-45deg); }
.menu { position: absolute; inset: 68px 0 auto 0; background: rgba(248,249,251,.97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.menu-in { display: grid; padding-block: 8px 20px; }
.menu-in a:not(.btn) { display: flex; align-items: center; gap: 14px; min-height: 54px; font-size: 22px; font-weight: 560; letter-spacing: -.02em; border-bottom: 1px solid var(--line); }
.menu-in .btn { margin-top: 18px; }
.nav a[aria-current="page"], .menu-in a[aria-current="page"] { color: var(--ink); }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; }
.progress i { display: block; height: 100%; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; }

.todo-banner { background: #FFF4D6; color: #3B2E00; font-size: 14px; padding: 10px var(--gutter); text-align: center; border-bottom: 1px dashed #D8B65A; }
.todo-banner code { font-family: var(--mono); font-size: 12.5px; background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; }
[data-owner].todo { background: #FFF1C2; outline: 1px dashed #C9A23A; border-radius: 4px; padding: 0 3px; }

/* ---------- hero ---------- */
.hero { padding-top: clamp(20px, 2.6vw, 40px); position: relative; }
.hero::before { /* faint 12-column guides, the only decoration in the hero */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 100%; pointer-events: none; z-index: -1;
  background: linear-gradient(to right, transparent calc(100% - 1px), rgba(11,13,18,.045) 0) center / calc((min(100vw, var(--max) + var(--gutter) * 2) - var(--gutter) * 2) / 12) 100% repeat-x;
  -webkit-mask: linear-gradient(to bottom, #000 0%, transparent 70%); mask: linear-gradient(to bottom, #000 0%, transparent 70%);
}
.hero-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.hero-head { flex: 1 1 auto; max-width: 1000px; }
.hero-side { flex: 0 0 440px; padding-bottom: 10px; }
.hero-side .lede { font-size: 18px; margin-bottom: 22px; max-width: 40ch; }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cta-row .btn--line { --h: 52px; border-radius: 12px; }
.hero-for { margin-top: 16px; font-size: 15px; color: var(--muted); }
.hero-for a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--line-2); transition: text-decoration-color .2s; }
.hero-for a:hover { text-decoration-color: var(--ink); }
@media (min-width: 961px) { .cta-row { flex-wrap: nowrap; } }
/* The plate: full-bleed dark site model behind the generator */
/* The dark art panels are framed: set in from the page edges with rounded corners, like a print. The footer stays full-bleed.
   Inside a frame the content keeps the page grid: the wrap loses the frame inset from its padding. */
.hero-plate, .band, .contact { --inset: 12px; margin-inline: var(--inset); border-radius: 22px; overflow: hidden; overflow: clip; }
.hero-plate > .wrap, .band > .wrap, .contact > .wrap { padding-inline: max(8px, calc(var(--gutter) - var(--inset))); max-width: calc(var(--max) + (var(--gutter) - var(--inset)) * 2); }
.hero-plate { position: relative; margin-top: clamp(28px, 3.4vw, 48px); padding: 18px 0 clamp(30px, 3.6vw, 48px); isolation: isolate; background: var(--dark); color: var(--on-dark); }
.plate-media { position: absolute; inset: 0; z-index: -2; display: block; }
.plate-media img { width: 100%; height: 100%; object-fit: cover; object-position: 96% 0%; }
.hero-plate::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(9,11,16,.5) 0%, rgba(9,11,16,.12) 12%, rgba(9,11,16,.18) 50%, rgba(9,11,16,.5) 78%, rgba(9,11,16,.9) 100%); }
.plate-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 16px; }
.plate-intro { font-size: 16px; line-height: 1.4; color: var(--on-dark); max-width: 52ch; text-wrap: pretty; text-shadow: 0 1px 12px rgba(9,11,16,.6); }
.hero-foot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 56px; align-items: start; margin-top: 26px; }
.hero-price { color: var(--on-dark-2); font-size: 15px; line-height: 1.45; max-width: 46ch; text-wrap: pretty; }
.hero-price b { color: var(--on-dark); font-weight: 650; font-size: 1.25em; letter-spacing: -.02em; margin-right: 2px; }
.area-strip { display: grid; gap: 10px; justify-items: end; }
.area-l { display: flex; align-items: center; gap: 9px; color: var(--on-dark-2); font: 700 12px/1.2 var(--sans); font-stretch: 78%; letter-spacing: .08em; text-transform: uppercase; }
.area-towns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; max-width: 760px; }
.area-towns li { display: inline-flex; align-items: baseline; gap: 6px; font-size: 15px; white-space: nowrap; }
.area-towns b { font-weight: 560; color: var(--on-dark); letter-spacing: -.01em; }
.area-towns span { font: 700 11px/1 var(--sans); font-stretch: 78%; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-2); }
.area-towns li:first-child span { color: var(--ember-lit); }
/* survey flag: the ember mark used for "you are here" moments */
.flag { position: relative; display: inline-block; width: 10px; height: 12px; border-left: 1.5px solid currentColor; flex: none; }
.flag::after { content: ""; position: absolute; left: 0; top: 0; width: 9px; height: 7px; background: var(--ember); clip-path: polygon(0 0, 100% 0, 72% 50%, 100% 100%, 0 100%); }
.dark .flag::after, [data-dark] .flag::after { background: var(--ember-lit); }

/* ---------- generator stage ---------- */
.stage {
  display: grid; grid-template-columns: 328px minmax(0, 1fr);
  border: 1px solid rgba(242,244,248,.16); border-radius: 28px; overflow: hidden;
  box-shadow: 0 60px 120px -50px rgba(0,0,0,.75);
}
.inspector { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 18px; background: var(--surface); color: var(--ink); min-width: 0; }
.insp-form { display: flex; flex-direction: column; gap: 18px; }
.insp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.insp-title { font-weight: 620; font-size: 15px; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.insp-title::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--blue); }
.field { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 9px; }
.field-l { color: var(--muted); padding: 0; font: 700 11.5px/1.2 var(--sans); font-stretch: 78%; letter-spacing: .08em; text-transform: uppercase; }
.input {
  width: 100%; height: 46px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; padding: 0 14px;
  font-size: 16px; font-weight: 500; letter-spacing: -.01em; transition: border-color .2s, box-shadow .2s;
}
.input::placeholder { color: #6B717C; font-weight: 400; }
.input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* the controls are drawn by script; hold their space so nothing below them shifts when they appear */
#gTrades:empty { min-height: 114px; } #gStyles:empty { min-height: 65px; } #gColors:empty { min-height: 30px; }
@media (max-width: 1180px) { #gTrades:empty { min-height: 154px; } }
@media (max-width: 820px) { #gTrades:empty { min-height: 78px; } #gColors:empty { min-height: 36px; } }
.chip { position: relative; }
.chip input, .seg-o input, .sw input, .pk input, .plan input, .addon input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13.5px; font-weight: 520; color: var(--ink-2); background: #fff; cursor: pointer; transition: background-color .25s var(--ease), color .25s, border-color .25s; user-select: none; }
.chip span:hover { border-color: var(--ink); }
.chip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip input:focus-visible + span, .seg-o input:focus-visible + span, .sw input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; background: var(--paper-2); border-radius: 12px; }
.seg-o span { display: grid; justify-items: center; gap: 2px; padding: 8px 4px 7px; border-radius: 9px; cursor: pointer; transition: background-color .25s, box-shadow .25s; user-select: none; }
.seg-o .aa { font-size: 21px; line-height: 1; color: var(--ink); }
.seg-o .nm { font-size: 11.5px; font-weight: 540; color: var(--muted); }
.seg-o input:checked + span { background: #fff; box-shadow: var(--shadow-sm); }
.seg-o input:checked + span .nm { color: var(--ink); }
.aa--sturdy { font-stretch: 75%; font-weight: 820; text-transform: uppercase; letter-spacing: .01em; }
.aa--refined { font-family: var(--serif); font-style: italic; font-size: 24px !important; } /* italic: that face is already loaded for the headline */
.aa--clean { font-weight: 620; font-stretch: 110%; letter-spacing: -.03em; }
.swatches { display: flex; gap: 10px; }
.sw span { display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); transition: transform .3s var(--ease), box-shadow .3s; position: relative; }
.sw span::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--ink); opacity: 0; transform: scale(.85); transition: opacity .25s, transform .35s var(--ease); }
.sw input:checked + span::after { opacity: 1; transform: none; }
.sw span:hover { transform: scale(1.06); }
.insp-foot { margin-top: auto; display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
/* the email disclosure and the copy-link button share a row when there is room; opened, the form takes the full width */
.insp-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 2px 12px; }
.g-send[open] { flex-basis: 100%; }
.insp-meta #gShare { font-size: 13px; min-height: 32px; }
.insp-meta #gShare svg { width: 14px; height: 14px; }
/* "Email me this sketch": a small disclosure, the copy-link button beside it */
.g-send summary { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 560; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.g-send summary::-webkit-details-marker { display: none; }
.g-send summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .3s var(--ease); }
.g-send[open] summary::before { transform: rotate(45deg); }
.g-send-f { display: grid; gap: 10px; padding-top: 12px; }
/* small capture forms (sketch, check report) */
.mf { display: grid; gap: 5px; min-width: 0; }
.mf-l { font-size: 13px; font-weight: 560; color: var(--ink-2); }
.mf-l i { color: var(--blue); font-style: normal; }
.mf input { width: 100%; min-height: 44px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); padding: 9px 12px; font-size: 16px; }
.mf input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.mf input[aria-invalid="true"] { border-color: var(--bad); }
.mini .f-err { font-size: 12.5px; }
.mini-status { font-size: 14px; line-height: 1.45; }
.mini-status:empty { display: none; }
.mini-status.ok { padding: 10px 12px; border-radius: 10px; background: #E7F4EC; color: #124A2E; border: 1px solid #B9DEC8; }
.mini-status.err { padding: 10px 12px; border-radius: 10px; background: #FCEDEA; color: #6E1E0F; border: 1px solid #F1C2B8; }
.mini-status a { text-decoration: underline; text-underline-offset: 3px; font-weight: 560; }

/* the canvas is a window onto the plate behind it */
.canvas { position: relative; container-type: inline-size; aspect-ratio: 1000 / 640; min-height: 0; overflow: hidden; background: rgba(9,11,16,.08); }
.canvas-grid { position: absolute; inset: 0; background-image: radial-gradient(rgba(242,244,248,.16) 1px, transparent 1.2px); background-size: 22px 22px; background-position: 11px 11px; -webkit-mask: radial-gradient(90% 80% at 50% 45%, #000 30%, transparent 85%); mask: radial-gradient(90% 80% at 50% 45%, #000 30%, transparent 85%); opacity: .6; }
.canvas::after { content: ""; position: absolute; inset: 14px; pointer-events: none; z-index: 1;
  background: linear-gradient(var(--on-dark-2), var(--on-dark-2)) 0 0 / 12px 1px, linear-gradient(var(--on-dark-2), var(--on-dark-2)) 0 0 / 1px 12px,
    linear-gradient(var(--on-dark-2), var(--on-dark-2)) 100% 0 / 12px 1px, linear-gradient(var(--on-dark-2), var(--on-dark-2)) 100% 0 / 1px 12px,
    linear-gradient(var(--on-dark-2), var(--on-dark-2)) 0 100% / 12px 1px, linear-gradient(var(--on-dark-2), var(--on-dark-2)) 0 100% / 1px 12px,
    linear-gradient(var(--on-dark-2), var(--on-dark-2)) 100% 100% / 12px 1px, linear-gradient(var(--on-dark-2), var(--on-dark-2)) 100% 100% / 1px 12px;
  background-repeat: no-repeat; opacity: .55; }
.canvas-img { position: absolute; inset: 0; pointer-events: none; }
.canvas-label { position: absolute; left: 18px; bottom: 14px; display: flex; align-items: center; gap: 8px; color: var(--on-dark); font: 700 11px/1.2 var(--sans); font-stretch: 78%; letter-spacing: .07em; text-transform: uppercase; z-index: 7; background: rgba(9,11,16,.72); padding: 4px 4px 4px 10px; min-height: 30px; border-radius: 999px; max-width: calc(100% - 36px); }
.canvas-label .live-dot { background: #7B8FFF; }
.canvas-label .cl-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; }
@container (max-width: 700px) { .canvas-label .cl-x { display: none; } }
.cl-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 9px 0 7px; border-radius: 999px; background: rgba(242,244,248,.14); color: var(--on-dark); font: 700 10.5px/1 var(--sans); font-stretch: 78%; letter-spacing: .07em; text-transform: uppercase; flex: none; transition: background-color .2s; }
/* Demo progress: four bars, one per look. Past bars are full; the active one fills over the 8 s hold and stops when the demo pauses. */
.demo-steps { display: inline-flex; gap: 4px; flex: none; padding-right: 2px; }
.demo-steps i { position: relative; width: 18px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.25); overflow: hidden; }
.demo-steps i::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.demo-steps[data-step="1"] i:nth-child(-n+1)::after, .demo-steps[data-step="2"] i:nth-child(-n+2)::after, .demo-steps[data-step="3"] i:nth-child(-n+3)::after { transform: none; }
.demo-steps[data-step="0"] i:nth-child(1)::after, .demo-steps[data-step="1"] i:nth-child(2)::after, .demo-steps[data-step="2"] i:nth-child(3)::after, .demo-steps[data-step="3"] i:nth-child(4)::after { animation: stepFill 8s linear forwards; }
.demo-steps.is-paused i::after { animation-play-state: paused; }
@keyframes stepFill { from { transform: scaleX(0); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .demo-steps { display: none; } }
.cl-btn:hover { background: rgba(242,244,248,.24); }
.cl-btn svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cl-btn .i-play { display: none; fill: currentColor; stroke-width: 1.5; }
.cl-btn[data-paused] .i-pause { display: none; }
.cl-btn[data-paused] .i-play { display: inline; }
/* narrow canvases: icon-only, so the "Example design · made-up business" tag always reads in full */
@container (max-width: 520px) { .canvas-label .cl-btn { padding: 0; width: 24px; justify-content: center; } .canvas-label .cl-btn span { display: none; } }

.browser { position: absolute; left: 5.5cqw; top: 6.5cqw; width: 68cqw; border-radius: 1.2cqw; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 50px 90px -30px rgba(0,0,0,.75), 0 16px 30px -14px rgba(0,0,0,.45); transform-origin: 50% 100%; }
.browser-bar { height: 3.4cqw; display: flex; align-items: center; gap: 1cqw; padding: 0 1.2cqw; background: #F3F5F8; border-bottom: 1px solid rgba(11,13,18,.07); }
.dots { display: flex; gap: .6cqw; }
.dots i { width: .95cqw; height: .95cqw; border-radius: 50%; background: #D5DAE1; }
.url { flex: 1; max-width: 46%; margin-inline: auto; height: 2.2cqw; border-radius: .7cqw; background: #E8EBF0; display: flex; align-items: center; justify-content: center; gap: .5cqw; font-family: var(--mono); font-size: max(9px, 1.1cqw); color: #535A66; letter-spacing: .01em; overflow: hidden; white-space: nowrap; }
.url svg { width: 1.2cqw; height: 1.2cqw; min-width: 9px; min-height: 9px; color: #79808C; }
.bar-pad { width: 4cqw; }
.browser .view { height: calc(68cqw * 10 / 16); }
/* The mini site scrolls under the wheel until its end, then the page takes over (Lenis allowNestedScroll; native chaining without Lenis). */
.view { overflow: hidden auto; scrollbar-width: none; position: relative; }
.view::-webkit-scrollbar { display: none; }
.zoom { width: var(--vw); transform-origin: 0 0; }
.browser .zoom { --vw: 1280px; }
.phone .zoom { --vw: 390px; }

.phone { position: absolute; right: 5cqw; top: 9cqw; width: 23.5cqw; transform-origin: 50% 100%; }
.phone-body { position: relative; padding: .85cqw; border-radius: 4.1cqw; background: linear-gradient(145deg, #3A3B3D 0%, #1C1D1E 40%, #2A2B2C 100%); box-shadow: inset 0 0 0 .18cqw #4B4C4E, inset 0 0 0 .4cqw #161718, 0 0 0 1px rgba(255,255,255,.1), 0 50px 80px -30px rgba(0,0,0,.8), 0 18px 30px -12px rgba(0,0,0,.5); }
.phone-screen { position: relative; border-radius: 3.3cqw; overflow: hidden; background: #fff; aspect-ratio: 390 / 844; }
.phone .view { position: absolute; inset: 0; }
.island { position: absolute; top: 1.1cqw; left: 50%; transform: translateX(-50%); width: 7.2cqw; height: 2.1cqw; border-radius: 999px; background: #0B0B0C; z-index: 4; }
.phone-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; transform-origin: 0 100%; }

.notes { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
/* the spec notes wait until the frames have settled, so they never point at a moving target */
.canvas:not(.notes-ready) .note, .canvas:not(.notes-ready) .dim-v { opacity: 0 !important; transition: none; }
.note { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .5s var(--ease); }
.note.is-on { opacity: 1; }
.note-dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 0 0 4px rgba(232,85,31,.35); }
.note-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(255,122,69,.6); animation: ring 2.6s var(--ease) infinite; }
@keyframes ring { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
.note-l { position: absolute; top: -12px; white-space: nowrap; background: #fff; color: var(--ink); padding: 5px 9px; border-radius: 999px; font: 700 10.5px/1.2 var(--sans); font-stretch: 78%; letter-spacing: .07em; text-transform: uppercase; box-shadow: 0 8px 20px -8px rgba(0,0,0,.6); }
.note-l::before { content: ""; position: absolute; top: 50%; width: 22px; height: 1px; background: rgba(255,255,255,.85); }
.note[data-side="r"] .note-l { left: 30px; } .note[data-side="r"] .note-l::before { right: 100%; }
.note[data-side="l"] .note-l { right: 30px; } .note[data-side="l"] .note-l::before { left: 100%; }
.note[data-side="t"] .note-l, .note[data-side="b"] .note-l { left: -14px; }
.note[data-side="t"] .note-l { top: calc(-1 * var(--lead, 40px) - 24px); }
.note[data-side="b"] .note-l { top: calc(var(--lead, 40px) - 1px); }
.note[data-side="t"] .note-l::before, .note[data-side="b"] .note-l::before { display: none; }
.note::before { content: ""; position: absolute; left: -.5px; width: 1px; background: rgba(255,255,255,.85); height: var(--lead, 0px); opacity: 0; }
.note[data-side="t"]::before { bottom: 0; opacity: 1; }
.note[data-side="b"]::before { top: 0; opacity: 1; }
.dim-v { position: absolute; left: 0; top: 0; width: 1px; background: #8FA2FF; opacity: 0; transition: opacity .5s; color: #B9C5FF; }
.dim-v.is-on { opacity: .9; }
.dim-v::before, .dim-v::after { content: ""; position: absolute; left: -4px; width: 9px; height: 1px; background: #8FA2FF; }
.dim-v::before { top: 0; } .dim-v::after { bottom: 0; }
.dim-v span { position: absolute; top: 50%; left: 8px; transform: translateY(-50%) rotate(90deg); transform-origin: 0 0; white-space: nowrap; font-size: 10px; background: rgba(9,11,16,.7); padding: 2px 6px; margin-left: 12px; border-radius: 4px; }
.canvas.is-switching .zoom, .canvas.is-switching .phone-bar { opacity: .12; transform: translateY(6px); }
.zoom, .phone-bar { transition: opacity .35s var(--ease), transform .5s var(--ease); }
/* Entrance: the frames are painted with the page and only settle into place (transform only, nothing is ever hidden).
   fill-mode backwards, so the pointer tilt in generator.js owns the transform once the entrance ends. */
@keyframes frameIn { from { transform: perspective(1600px) translateY(36px) rotateX(9deg); } }
@keyframes phoneIn { from { transform: translateY(70px); } }
html.js .browser { animation: frameIn 1.4s var(--ease) .1s backwards; }
html.js .phone { animation: phoneIn 1.6s var(--ease) .2s backwards; }
@keyframes plateIn { from { transform: scale(1.06); } }
html.js .plate-media img { animation: plateIn 2.4s var(--ease) backwards; }
/* gallery tiles inside the sketches: two studio photos per trade (lazy), or crops of the main photo for trades without them */
.sk-gal div { position: relative; border-radius: var(--rad); overflow: hidden; }
.sk-gal div:first-child, .sk--m .sk-gal div { aspect-ratio: 4/3; }
.sk-gal img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 0 0; }
.sk-gal--same div:nth-child(2) img { object-position: 20% 70%; transform: scale(1.6); transform-origin: 20% 70%; }
.sk-gal--same div:nth-child(3) img { object-position: 85% 30%; transform: scale(2); transform-origin: 85% 30%; }
.sk-gal:not(.sk-gal--same) img { object-position: 50% 50%; }
html.no-js .zoom > .sk, html.no-js .phone-bar > .sk-bar { display: none; }

/* ---------- sections ---------- */
.sec-head { margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.sec-head--split .lede { max-width: 40ch; }
.dark { background: var(--dark); color: var(--on-dark); }

/* ---------- website check ---------- */
/* overflow: clip, not hidden: hidden would make this section the sticky container and the dock would never stick */
.check { margin-top: clamp(64px, 7vw, 112px); padding-block: var(--sec); position: relative; overflow: hidden; overflow: clip; isolation: isolate; }
.check::before { content: ""; position: absolute; width: 900px; height: 900px; right: -260px; top: -380px; background: radial-gradient(closest-side, rgba(39,71,232,.32), rgba(39,71,232,0)); z-index: -1; pointer-events: none; }
.check::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(242,244,248,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(242,244,248,.04) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask: linear-gradient(to bottom, #000, transparent 75%); mask: linear-gradient(to bottom, #000, transparent 75%); }
.check-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.check-copy { align-self: stretch; }
.check-copy .h2 { margin-bottom: 22px; }
.check-copy .lede { margin-bottom: 32px; }
.check-form { display: grid; gap: 12px; justify-items: start; margin-bottom: 26px; }
.check-input { width: 100%; display: flex; align-items: center; gap: 0; padding: 6px; border-radius: 16px; background: #141821; border: 1px solid rgba(242,244,248,.14); transition: border-color .2s, box-shadow .2s; }
.check-input:focus-within { border-color: #6F86FF; box-shadow: 0 0 0 4px rgba(111,134,255,.18); }
.check-input .pre { color: #8C93A0; padding-left: 12px; font-size: 13px; text-transform: none; letter-spacing: 0; }
.check-input input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; outline: none; font-size: 17px; padding: 0 8px 0 2px; color: var(--on-dark); }
.check-input input::placeholder { color: #7D8491; }
.check-input .btn { --h: 44px; border-radius: 11px; }
.check-err { color: #FF9C88; font-size: 14px; }
/* left column after a run: summary + the ten checks, docked while the report scrolls */
.check-dock { display: grid; gap: 14px; align-content: start; }
@media (min-width: 961px) { .check-dock { position: sticky; top: 92px; } }
.cs { display: grid; gap: 12px; padding: 18px 18px 16px; border-radius: 18px; background: linear-gradient(180deg, rgba(242,244,248,.07), rgba(242,244,248,.03)); border: 1px solid rgba(242,244,248,.13); }
.cs-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--on-dark-2); }
.cs-host { color: var(--on-dark); text-transform: none; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 64%; }
.cs-main { display: flex; align-items: baseline; gap: 8px; }
.cs-n { font-size: 54px; font-weight: 600; letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; font-stretch: 104%; }
.cs-of { color: var(--on-dark-2); }
.cs-grade { margin-left: auto; align-self: center; padding: 4px 9px; border-radius: 999px; background: rgba(242,244,248,.08); color: var(--on-dark-2); font-size: 10px; }
.cs[data-band="good"] .cs-grade { background: rgba(67,194,127,.14); color: #8BE3B1; }
.cs[data-band="mid"] .cs-grade { background: rgba(242,180,65,.14); color: #F7CF84; }
.cs[data-band="bad"] .cs-grade { background: rgba(255,122,92,.14); color: #FFAE99; }
.cs-counts { color: var(--on-dark-2); font-size: 14.5px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.cs-counts b { font-weight: 600; font-variant-numeric: tabular-nums; }
.cs-counts .cs-f b { color: #FF9C88; } .cs-counts .cs-w b { color: #F7CF84; } .cs-counts .cs-p b { color: #6FDDA1; }
.cs.is-none .cs-n, .cs.is-none .cs-of { display: none; }
.cs.is-none .cs-grade { margin-left: 0; }
.cs-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
@media (min-width: 821px) { .cs-act .cs-see { display: none; } }
.check-what { color: var(--on-dark-2); font-size: 14.5px; line-height: 1.5; max-width: 52ch; text-wrap: pretty; }
.self-score { margin: -10px 0 22px; }
.check-busy { position: relative; overflow: hidden; margin: -8px 0 20px; padding: 12px 14px; border-radius: 12px; background: rgba(39,71,232,.18); border: 1px solid rgba(111,134,255,.4); color: #C9D2FF; font-size: 14px; }
.check-busy i { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: #6F86FF; transform-origin: 0 50%; animation: scan 3.2s linear forwards; }
@media (min-width: 821px) { .check-busy { display: none !important; } }
.ck.is-flash { background: rgba(111,134,255,.12); transition: background-color .2s; }
.ck { transition: background-color 1.2s; border-radius: 8px; }

.report { background: linear-gradient(180deg, #151922, #0F121A); border: 1px solid rgba(242,244,248,.10); border-radius: 24px; padding: 22px; box-shadow: 0 40px 100px -40px rgba(0,0,0,.6); position: relative; overflow: hidden; }
.report-head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--dark-line); color: var(--on-dark-2); }
.report-url { color: var(--on-dark); text-transform: none; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%; }
.report-sample { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 196, 92, .10); border: 1px solid rgba(255, 196, 92, .35); color: #FFD89A; font-size: 13.5px; }
.report-sample b { color: #FFE3B3; }
.report-err { display: grid; gap: 12px; padding: 22px 0 6px; justify-items: start; }
.re-code { color: #FFAE99; padding: 4px 9px; border-radius: 999px; background: rgba(255,122,92,.12); font-size: 10px; }
.report-err h3 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.03em; line-height: 1.12; font-weight: 600; text-wrap: balance; max-width: 26ch; }
.report-err p { color: var(--on-dark-2); max-width: 54ch; text-wrap: pretty; }
.re-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.report.is-err .report-body, .report.is-err .checks, .report.is-err .report-cta { display: none; }
.btn--ghost { border: 1px solid rgba(242,244,248,.24); color: var(--on-dark); background: transparent; }
.btn--ghost::after { background: rgba(242,244,248,.12); }
.report-body { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center; padding: 22px 0 18px; }
.gauge { position: relative; width: 200px; height: 200px; }
.gauge svg { width: 100%; height: 100%; transform: rotate(135deg); }
.g-track, .g-val { fill: none; stroke-width: 9; stroke-linecap: round; }
.g-track { stroke: rgba(242,244,248,.08); stroke-dasharray: 367.6 490.1; }
.g-val { stroke: #6F86FF; stroke-dasharray: 0 490.1; transition: stroke .4s; filter: drop-shadow(0 0 10px rgba(111,134,255,.35)); }
.g-ticks line { stroke: rgba(242,244,248,.22); stroke-width: 1; }
.g-ticks line.major { stroke: rgba(242,244,248,.45); }
.g-read { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; }
.g-n { font-size: 60px; font-weight: 600; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; font-stretch: 104%; }
.g-of { color: var(--on-dark-2); margin-top: 4px; }
.g-grade { margin-top: 10px; padding: 4px 9px; border-radius: 999px; background: rgba(242,244,248,.08); color: var(--on-dark-2); font-size: 10px; }
.gauge[data-band="good"] .g-val { stroke: #43C27F; filter: drop-shadow(0 0 10px rgba(67,194,127,.35)); }
.gauge[data-band="mid"] .g-val { stroke: #F2B441; filter: drop-shadow(0 0 10px rgba(242,180,65,.3)); }
.gauge[data-band="bad"] .g-val { stroke: #FF7A5C; filter: drop-shadow(0 0 10px rgba(255,122,92,.3)); }
.gauge[data-band="good"] .g-grade { background: rgba(67,194,127,.14); color: #8BE3B1; }
.gauge[data-band="mid"] .g-grade { background: rgba(242,180,65,.14); color: #F7CF84; }
.gauge[data-band="bad"] .g-grade { background: rgba(255,122,92,.14); color: #FFAE99; }
.metrics { display: grid; gap: 0; }
.metrics div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--dark-line); }
.metrics div:last-child { border-bottom: 0; }
.metrics dt { color: var(--on-dark-2); }
.metrics dd { font-size: 22px; font-weight: 560; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.metrics dd small { font-size: 13px; color: var(--on-dark-2); font-weight: 400; margin-left: 4px; }
.checks { display: grid; border-top: 1px solid var(--dark-line); }
.ck { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--dark-line); }
.ck-i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(242,244,248,.07); color: var(--on-dark-2); margin-top: 1px; }
.ck-i svg { width: 13px; height: 13px; }
.ck[data-s="pass"] .ck-i { background: rgba(67,194,127,.16); color: #6FDDA1; }
.ck[data-s="fail"] .ck-i { background: rgba(255,122,92,.16); color: #FF9C88; }
.ck[data-s="warn"] .ck-i { background: rgba(242,180,65,.16); color: #F7CF84; }
.ck-t b { display: block; font-weight: 560; font-size: 15.5px; letter-spacing: -.01em; }
.ck-t span { display: block; color: var(--on-dark-2); font-size: 14px; margin-top: 3px; text-wrap: pretty; }
.ck[data-s="idle"] .ck-t b { color: #7D8491; font-weight: 500; }
.ck-v { color: var(--on-dark-2); font-size: 10.5px; padding-top: 4px; white-space: nowrap; }
.ck[data-s="pass"] .ck-v { color: #6FDDA1; } .ck[data-s="fail"] .ck-v { color: #FF9C88; } .ck[data-s="warn"] .ck-v { color: #F7CF84; }
.report-scan { position: absolute; left: 22px; right: 22px; bottom: 22px; padding: 12px 14px; border-radius: 12px; background: rgba(39,71,232,.18); border: 1px solid rgba(111,134,255,.4); color: #C9D2FF; overflow: hidden; }
.report-scan i { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: #6F86FF; transform-origin: 0 50%; animation: scan 3.2s linear forwards; }
@keyframes scan { from { transform: scaleX(0); } to { transform: scaleX(.94); } }
.report-none { padding: 18px 0 4px; display: grid; gap: 14px; }
.report-none h3 { font-size: 26px; letter-spacing: -.03em; line-height: 1.1; font-weight: 600; }
.report-none p { color: var(--on-dark-2); }
.report-none ul { display: grid; gap: 8px; }
.report-none li { display: flex; gap: 10px; align-items: flex-start; color: var(--on-dark); }
.report-none li svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: #6F86FF; }
.report-cta { display: grid; gap: 14px; justify-items: start; padding-top: 18px; }
.rc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; width: 100%; }
.rc-top .fine { max-width: 44ch; }
.rc-cap { width: 100%; display: grid; gap: 12px; padding: 18px; border-radius: 16px; background: rgba(242,244,248,.05); border: 1px solid rgba(242,244,248,.12); }
.rc-h { font-size: clamp(20px, 1.9vw, 24px); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.rc-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.dark .mf-l { color: var(--on-dark-2); }
.dark .mf input { background: #141821; color: var(--on-dark); border-color: rgba(242,244,248,.18); }
.dark .mf input:focus { outline-color: #8FA2FF; border-color: #6F86FF; }
.dark .f-err { color: #FF9C88; }
.rc-form .btn { --h: 44px; border-radius: 10px; }
.rc-cap .linkbtn { justify-self: start; }
.report.is-idle .checks .ck-t span { display: none; }

/* ---------- work: a shelf of printed covers ---------- */
.work { padding-top: var(--sec); }
.work-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: end; margin-bottom: clamp(24px, 4vw, 44px); }
.work-head .label, .work-head .h2 { grid-column: 1; }
.work-head .lede { grid-column: 2; grid-row: 2; }
.work-tag { margin-bottom: 18px; }
.shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; align-items: start; }
.cover { display: grid; gap: 12px; min-width: 0; }
/* each cover stands on the shelf: a ledge under the picture that runs across the gaps into its neighbours */
.cover figure { display: grid; grid-template-rows: auto 14px auto; }
.cover figure::before { content: ""; grid-row: 2; margin-inline: -14px; background: linear-gradient(#fff, #EEF1F5); border-top: 1px solid var(--line-2); box-shadow: 0 18px 30px -18px rgba(11,13,18,.25); position: relative; z-index: 1; }
.cover figure img { grid-row: 1; }
.cover figcaption { grid-row: 3; padding-top: 16px; }
.cover img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; object-position: top; border-radius: 10px; background: var(--paper-2); box-shadow: 0 2px 0 rgba(255,255,255,.6) inset, 0 34px 44px -26px rgba(11,13,18,.38); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.cover:hover img { transform: translateY(-6px); box-shadow: 0 2px 0 rgba(255,255,255,.6) inset, 0 44px 54px -28px rgba(11,13,18,.42); }
.cover figcaption { display: grid; gap: 4px; align-content: start; }
.cover figcaption b { font-size: 17px; font-weight: 620; letter-spacing: -.02em; line-height: 1.2; }
.cover figcaption span { font: 700 11.5px/1.2 var(--sans); font-stretch: 78%; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cover-try { justify-self: start; display: inline-flex; align-items: center; min-height: 36px; font-size: 14px; font-weight: 560; color: var(--blue-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(27,52,196,.35); transition: text-decoration-color .2s; }
.cover-try:hover { text-decoration-color: currentColor; }

/* ---------- band ---------- */
.band { position: relative; margin-top: var(--sec); min-height: min(84vh, 780px); display: flex; align-items: center; isolation: isolate; }
.band-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.band-media img { width: 100%; height: 118%; object-fit: cover; object-position: 62% 40%; will-change: transform; }
.band::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(9,11,16,.96) 0%, rgba(9,11,16,.86) 28%, rgba(9,11,16,.35) 56%, rgba(9,11,16,.05) 78%), linear-gradient(0deg, rgba(9,11,16,.55), rgba(9,11,16,0) 35%); }
.band-in { display: grid; justify-items: start; text-align: left; padding-block: clamp(88px, 11vw, 150px); }
.band-h { font-size: clamp(2.4rem, 5.6vw, 5.4rem); line-height: .98; letter-spacing: -.05em; font-weight: 600; font-stretch: 104%; width: 100%; max-width: 720px; color: #fff; }
.band-h .stag { padding-left: 1.4em; }
.band-t { max-width: 46ch; width: 100%; color: var(--on-dark-2); margin-top: 22px; font-size: 18px; text-wrap: pretty; }
.band > .art-tag { position: absolute; right: 16px; bottom: 16px; }

/* Strip reveal (motion.js adds these only with GSAP and without reduced motion): four columns lift away. */
.strips { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); pointer-events: none; }
.strips i { background: var(--dark); }
.strips--paper i { background: var(--paper); }

/* ---------- included: a ruled spec sheet ---------- */
.incl { padding-top: var(--sec); }
.spec { border-bottom: 1px solid var(--line-2); }
.spec-row { padding-block: 28px; border-top: 1px solid var(--line-2); display: grid; gap: 8px; }
.spec-row h3 { font-size: clamp(1.45rem, 2.6vw, 2.6rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; transition: color .4s var(--ease); }
.spec-row p { color: var(--muted); font-size: 16px; max-width: 54ch; text-wrap: pretty; }
/* below 1024px (or without script): each row shows its own little UI, in a ruled box */
.spec-ui { margin-top: 12px; height: 220px; overflow: hidden; display: grid; place-items: center; background: var(--paper-2); border: 1px solid var(--line-2); position: relative; }
.spec-row[data-ui="bar"] .spec-ui { align-items: end; }
/* the row box (no side panel, below 1024px) shows the lower half of the phone, so its call bar is in view */
.spec-row[data-ui="bar"] .mini-phone { width: 230px; margin-top: -118px; }
.spec-row[data-ui="gbp"] .gbp { transform: scale(.78); }
.spec-row[data-ui="chat"] .chat { transform: scale(.9); width: min(400px, 92%); }
.spec-panel { display: none; }
@media (min-width: 1024px) {
  .spec-wrap.has-panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
  .has-panel .spec-row { min-height: 210px; align-content: center; }
  .has-panel .spec-row h3 { font-size: clamp(1.7rem, 2.6vw, 2.6rem); }
  .has-panel .spec-row:not(.is-on) h3 { color: #747B88; }
  .has-panel .spec-row.is-on h3 { color: var(--ink); }
  .has-panel .spec-ui { display: none; }
  .has-panel .spec-panel { display: block; position: sticky; top: 96px; aspect-ratio: 4 / 5; max-height: calc(100vh - 128px); width: 100%; background: var(--paper-2); border: 1px solid var(--line-2); overflow: hidden; }
  .sp-item { position: absolute; inset: 0; display: grid; place-items: center; padding: 32px; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s .4s; }
  .sp-item.is-on { opacity: 1; visibility: visible; transition: opacity .4s var(--ease), visibility 0s; }
  .sp-item[data-ui="bar"] { align-items: end; padding-bottom: 0; }
  .sp-item[data-ui="bar"] .mini-phone { width: min(300px, 74%); margin-bottom: -110px; }
}
/* the little UIs */
.mini-phone { width: min(300px, 62%); aspect-ratio: 390 / 760; border-radius: 40px; padding: 9px; background: linear-gradient(145deg, #3A3B3D, #1C1D1E 45%, #2A2B2C); box-shadow: inset 0 0 0 1.5px #4B4C4E, 0 40px 60px -30px rgba(11,13,18,.45); }
.mp-screen { height: 100%; border-radius: 32px; background: #fff; position: relative; overflow: hidden; padding: 46px 18px 0; display: grid; align-content: start; gap: 10px; }
.mp-line { height: 9px; border-radius: 5px; background: #EBEEF2; }
.mp-line.tall { height: 22px; background: #1E1915; border-radius: 4px; }
.mp-img { height: 140px; border-radius: 10px; background: url("../assets/trades/builder-800.webp") center/cover, #ddd; margin-block: 4px; } /* 800: the file most phones and 1440px desktops already have from the hero sketch */
.w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; } .w90 { width: 90%; }
.mp-bar { position: absolute; left: 10px; right: 10px; bottom: 124px; display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 6px; padding: 7px; border-radius: 16px; background: #1E1915; box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); }
.mp-bar span { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 40px; border-radius: 10px; color: #fff; font-size: 12.5px; font-weight: 600; background: rgba(255,255,255,.08); white-space: nowrap; }
.mp-bar span svg { width: 13px; height: 13px; }
.mp-bar span.on { background: #B4532A; }

.gbp { width: min(360px, 100%); background: #fff; border-radius: 16px; box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); overflow: hidden; }
.gbp-map { width: 100%; height: 120px; }
.gbp-body { padding: 14px 16px 16px; }
.gbp-name { font-weight: 640; font-size: 18px; letter-spacing: -.02em; }
.gbp-sub { color: var(--muted); font-size: 13.5px; }
.gbp-open { font-size: 13.5px; margin-top: 4px; color: var(--muted); }
.gbp-open b { color: var(--ok); font-weight: 600; }
.gbp-btns { display: flex; gap: 6px; margin-top: 12px; }
.gbp-btns span { flex: 1; text-align: center; padding: 8px 4px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 560; color: var(--blue-ink); }

/* photo day: an empty contact sheet, waiting for the client's own work (no AI image here) */
.sheet { width: min(420px, 86%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sheet i { aspect-ratio: 4 / 3; background: var(--paper-2); border: 1px solid var(--line-2); box-shadow: inset 0 0 0 6px #fff; }
.sheet-cap { grid-column: 1 / -1; margin-top: 6px; font: 700 11.5px/1.2 var(--sans); font-stretch: 78%; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.spec-ui .sheet i, .sp-item .sheet i { background: #fff; box-shadow: none; }
.spec-row[data-ui="photo"] .sheet { width: min(330px, 86%); }

.qr-box { display: grid; justify-items: center; }
.qr { width: 164px; height: 164px; padding: 8px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); image-rendering: pixelated; }
.qr-cap { color: var(--muted); margin-top: 12px; font: 700 11px/1.2 var(--sans); font-stretch: 78%; letter-spacing: .08em; text-transform: uppercase; }
.spec-row[data-ui="qr"] .qr { width: 132px; height: 132px; }

.chat { width: min(420px, 100%); display: grid; gap: 8px; }
.chat-tag { justify-self: center; margin-bottom: 6px; font: 700 10.5px/1 var(--sans); font-stretch: 78%; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: #fff; border: 1px solid var(--line-2); padding: 5px 9px; border-radius: 999px; }
.bub { max-width: 80%; padding: 10px 14px; border-radius: 18px; font-size: 14.5px; line-height: 1.35; }
.bub.them { background: #fff; justify-self: start; border-bottom-left-radius: 6px; box-shadow: 0 0 0 1px var(--line); }
.bub.me { background: var(--blue); color: #fff; justify-self: end; border-bottom-right-radius: 6px; }
.bub.sm { padding: 8px 12px; font-size: 13.5px; }

/* ---------- pricing ---------- */
.pricing { padding-top: var(--sec); }
.founding { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 24px; align-items: center; padding: 18px 22px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface); margin-bottom: 18px; }
.founding-l { display: flex; align-items: center; gap: 8px; color: var(--blue-ink); font: 700 12px/1.2 var(--sans); font-stretch: 78%; letter-spacing: .08em; text-transform: uppercase; }
#spots { color: var(--ink); font-weight: 600; }
.founding-t { font-size: 15.5px; color: var(--ink-2); text-wrap: pretty; }
.founding-t b { color: var(--ink); }
.founding-x { color: var(--muted); font-size: 13.5px; max-width: 30ch; }
.builder { display: grid; grid-template-columns: minmax(0, 8fr) minmax(320px, 4fr); gap: 18px; align-items: start; }
.b-opts { display: grid; gap: 18px; }
.b-group { border: 1px solid var(--line); border-radius: var(--r); padding: 20px; margin: 0; background: var(--surface); min-width: 0; }
.b-legend { float: left; width: 100%; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-weight: 600; font-size: 17px; letter-spacing: -.02em; margin-bottom: 16px; padding: 0; }
.b-legend .cap { color: var(--muted); font-size: 12px; }
.b-legend em { font-style: normal; font-weight: 400; color: var(--muted); font-size: 14px; letter-spacing: 0; }
.b-group > *:not(legend) { clear: both; }
.pk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pk { position: relative; display: flex; }
.pk-in { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 10px 10px 16px; border-radius: 16px; border: 1px solid var(--line-2); background: #fff; cursor: pointer; transition: border-color .25s, box-shadow .3s var(--ease), transform .4s var(--ease); }
.pk-in:hover { border-color: var(--ink); }
.pk input:checked + .pk-in { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--shadow-sm); }
.pk input:focus-visible + .pk-in { outline: 2px solid var(--blue); outline-offset: 3px; }
.pk-art { display: block; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--paper-2); margin-bottom: 6px; position: relative; }
.pk-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: scale(1.06); transform-origin: 50% 0; transition: transform 1s var(--ease); }
.pk input:checked + .pk-in .pk-art img { transform: scale(1); }
.pk-ex { position: absolute; left: 8px; top: 8px; bottom: auto; font: 700 10px/1 var(--sans); font-stretch: 78%; letter-spacing: .08em; text-transform: uppercase; font-style: normal; padding: 5px 7px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--muted); }
.pk-art::after { content: ""; position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; transform: scale(0); transition: transform .4s var(--ease); }
.pk input:checked + .pk-in .pk-art::after { transform: none; }
.pk-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-inline: 6px; }
.pk-name { font-size: 16px; letter-spacing: -.02em; font-weight: 620; line-height: 1.2; }
.pk-price { font-size: 20px; font-weight: 620; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-price small { font-size: 11.5px; color: var(--muted); font-weight: 500; margin-left: 3px; letter-spacing: 0; }
.pk-for { font-size: 13.5px; color: var(--muted); padding-inline: 6px; }
.pk-list { display: grid; gap: 5px; padding: 10px 6px 0; border-top: 1px solid var(--line); margin-top: 2px; }
.pk-list span { position: relative; padding-left: 16px; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.pk-list span::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 2px; border: 1.5px solid var(--blue); }
.pk-time { margin-top: auto; padding: 10px 6px 0; color: var(--blue-ink); font: 700 11.5px/1.2 var(--sans); font-stretch: 78%; letter-spacing: .08em; text-transform: uppercase; }
.pk-more { margin-top: 14px; font-size: 14.5px; color: var(--muted); }
.pk-more a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--line-2); display: inline-block; padding-block: 4px; }
.pk-more a:hover { text-decoration-color: var(--ink); }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.plan { position: relative; display: flex; }
.plan-in { display: grid; align-content: start; gap: 4px; width: 100%; padding: 14px 16px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: #fff; cursor: pointer; transition: border-color .25s, box-shadow .3s; }
.plan-in:hover { border-color: var(--ink); }
.plan input:checked + .plan-in { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.plan input:focus-visible + .plan-in { outline: 2px solid var(--blue); outline-offset: 3px; }
.plan-in b { font-weight: 620; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-p { font-size: 26px; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.plan-p small { font-size: 13px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.plan-d { font-size: 13.5px; color: var(--muted); line-height: 1.45; text-wrap: pretty; }
.pill { font: 700 10px/1 var(--sans); font-stretch: 78%; letter-spacing: .08em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-ink); }
.addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.addon { position: relative; display: flex; }
.addon-in { display: grid; grid-template-columns: 24px 1fr auto; grid-template-rows: auto auto; gap: 2px 12px; align-items: start; width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: #fff; cursor: pointer; transition: border-color .25s, box-shadow .3s; }
.addon--qty { grid-column: 1 / -1; }
.addons:has(#qrAddon[hidden]) #glsAddon { grid-column: 1 / -1; } /* salon packages: the Starter takes the full row */
.addon--qty .addon-in { cursor: default; grid-template-columns: 24px 1fr auto; }
.addon-in:hover { border-color: var(--ink); }
.addon input:checked + .addon-in { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.addon input:focus-visible + .addon-in { outline: 2px solid var(--blue); outline-offset: 3px; }
.addon input:disabled + .addon-in { cursor: default; background: var(--paper); border-style: dashed; }
.box { grid-row: span 2; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: transparent; transition: background-color .2s, border-color .2s, color .2s; margin-top: 1px; }
.box svg { width: 14px; height: 14px; }
.addon input:checked + .addon-in .box { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.box--n { font-size: 11px; color: var(--muted); }
.addon-in b { font-weight: 600; letter-spacing: -.01em; font-size: 15px; }
.addon-d { grid-column: 2; font-size: 13px; color: var(--muted); line-height: 1.4; }
.addon-p { grid-column: 3; grid-row: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.stepper { grid-column: 3; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; }
.stepper button { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; transition: background-color .2s; }
.stepper button:hover { background: var(--paper-2); }
.stepper button svg { width: 16px; height: 16px; }
.stepper output { min-width: 18px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

.receipt { position: sticky; top: 88px; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 22px; box-shadow: var(--shadow-lg); display: grid; gap: 16px; }
.receipt::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; background: var(--blue); border-radius: 0 0 3px 3px; }
.rc-head { display: flex; justify-content: space-between; color: var(--muted); }
.rc-lines { display: grid; gap: 8px; padding-bottom: 14px; border-bottom: 1px dashed var(--line-2); min-height: 52px; }
.rc-lines li { display: flex; align-items: baseline; gap: 8px; font-size: 14.5px; }
.rc-lines li span:first-child { color: var(--ink-2); }
.rc-lines li i { flex: 1; border-bottom: 1px dotted var(--line-2); transform: translateY(-4px); }
.rc-lines li b { font-weight: 560; font-variant-numeric: tabular-nums; }
.rc-sum { display: grid; gap: 6px; }
.rc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14.5px; color: var(--ink-2); position: relative; }
.rc-row b { font-variant-numeric: tabular-nums; font-weight: 560; color: var(--ink); }
.rc-total { padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--ink); }
.rc-total b { font-size: 30px; font-weight: 620; letter-spacing: -.04em; font-stretch: 112%; }
.tip { position: relative; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 11px; font-weight: 600; color: var(--muted); display: inline-grid; place-items: center; margin-left: 4px; vertical-align: 1px; }
.tip::after { content: ""; position: absolute; inset: -4px; } /* 26px hit area around the 18px dot */
.tip-b { position: absolute; left: 0; bottom: calc(100% + 8px); width: 260px; padding: 10px 12px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: 12.5px; line-height: 1.45; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .2s, transform .3s var(--ease); z-index: 3; }
.tip:hover + .tip-b, .tip:focus-visible + .tip-b { opacity: 1; transform: none; }
.rc-pay { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.rc-pay li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.rc-pay li:last-child { border-bottom: 0; }
.rc-pay li .mono { color: var(--muted); font-size: 10px; grid-column: 1; }
.rc-pay li b { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 18px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rc-pay li em { font-style: normal; font-size: 13px; color: var(--ink-2); }
.rc-pay li:first-child b { color: var(--blue-ink); }
.rc-time .mono { color: var(--muted); margin-bottom: 10px; font-size: 10px; }
.tl { position: relative; height: 10px; margin: 0 5px; }
.tl::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px; background: var(--paper-2); border-radius: 2px; }
.tl-fill { position: absolute; left: 0; top: 4px; height: 2px; width: 100%; background: var(--blue); transform-origin: 0 50%; transform: scaleX(.001); border-radius: 2px; }
.receipt.is-in .tl-fill { transform: none; transition: transform 1.6s var(--ease) .2s; }
.tl i { position: absolute; left: var(--p); top: 0; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); z-index: 1; }
.tl-l { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: 11px; gap: 4px; }
.tl-l span:last-child { color: var(--ink); }
.rc-24 { color: var(--muted); font-size: 10.5px; padding-top: 12px; border-top: 1px dashed var(--line-2); text-transform: none; letter-spacing: 0; font-size: 12px; }
.rc-actions { display: grid; gap: 6px; justify-items: center; }

/* ---------- pledge: the terms as one statement ---------- */
.pledge { padding-block: var(--sec); }
.pledge-h { font-family: var(--sans); font-stretch: 125%; font-weight: 500; font-size: clamp(2.4rem, 7vw, 7.2rem); line-height: .98; letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
.pledge-h span { display: block; }
.pledge-h span:nth-child(2) { padding-left: 8%; }
.pledge-h span:nth-child(3) { padding-left: 16%; }
@media (min-width: 821px) {
  .pledge-h span:nth-child(2) { padding-left: 16.6%; }
  .pledge-h span:nth-child(3) { padding-left: 33.3%; }
}
.pledge-terms { margin-top: clamp(36px, 5vw, 64px); margin-left: 33.3%; max-width: 62ch; border-top: 1px solid var(--line-2); }
.pledge-terms summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding-top: 10px; cursor: pointer; font-weight: 560; font-size: 16px; color: var(--ink); }
.pledge-terms summary::-webkit-details-marker { display: none; }
.pledge-terms summary::after { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); background: linear-gradient(var(--ink), var(--ink)) center/9px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center/1.5px 9px no-repeat; transition: transform .4s var(--ease); }
.pledge-terms[open] summary::after { transform: rotate(45deg); }
.pledge-terms blockquote { margin-top: 12px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; letter-spacing: -.015em; font-weight: 450; color: var(--ink-2); text-wrap: pretty; }
.pledge-terms p { margin-top: 10px; }
.pledge-terms p a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 560; color: var(--blue-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- process ---------- */
.process { padding-top: 0; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; padding-top: 34px; }
.steps-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-2); }
.steps-line i { position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; }
.step { position: relative; }
.step::before { content: ""; position: absolute; top: -39px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.step-d { color: var(--blue-ink); margin-bottom: 12px; font: 760 13px/1.1 var(--sans); font-stretch: 78%; letter-spacing: .06em; text-transform: uppercase; }
.step h3 { font-size: 22px; letter-spacing: -.03em; font-weight: 600; line-height: 1.15; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 15.5px; text-wrap: pretty; max-width: 30ch; }
.qa details p a, .fine a { text-decoration: underline; text-underline-offset: 3px; }
.fine a, .foot-bot a { display: inline-block; padding-block: 5px; margin-block: -5px; } /* 24px+ touch target without moving the text */
.qa details p a { color: var(--blue-ink); font-weight: 520; }

/* ---------- about ---------- */
.about { padding-top: var(--sec); }
.about-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "lead lead" "fig copy"; gap: clamp(32px, 4vw, 56px) clamp(32px, 5vw, 80px); align-items: center; }
.about-lead { grid-area: lead; max-width: 1080px; }
.about-fig { grid-area: fig; position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 11; background: var(--dark); }
.about-fig img { width: 100%; height: 100%; object-fit: cover; }
.about-fig .art-tag { position: absolute; right: 14px; bottom: 14px; }
.about-fig .art-tag.is-name { text-transform: none; letter-spacing: .01em; font-stretch: 100%; font-weight: 560; font-size: 12.5px; }
.about-copy { grid-area: copy; }
/* With a real photo: a tall black-and-white portrait on the left, the copy wider on the right. */
.about.has-photo .about-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.about.has-photo .about-fig { aspect-ratio: 4 / 5; max-height: 760px; }
.about.has-photo #photoImg { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.principles { display: grid; border-top: 1px solid var(--line-2); }
.principles li { display: grid; grid-template-columns: 40px 1fr; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; color: var(--muted); }
.principles li p { text-wrap: pretty; }
.principles li .cap { color: var(--blue-ink); padding-top: 4px; }
.principles li b { color: var(--ink); font-weight: 600; }
.about-contact { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* ---------- faq ---------- */
.faq { padding-top: var(--sec); }
.faq-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 4vw, 56px) 40px; }
.faq-head { grid-column: 1 / -1; max-width: 900px; }
.faq .qa { grid-column: 2; }
.qa { border-top: 1px solid var(--line-2); }
.qa details { border-bottom: 1px solid var(--line-2); }
.qa summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; font-size: clamp(18px, 1.6vw, 21px); font-weight: 560; letter-spacing: -.02em; min-height: 44px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); background: linear-gradient(var(--ink), var(--ink)) center/11px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center/1.5px 11px no-repeat; transition: transform .4s var(--ease), background-color .2s; }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa summary:hover::after { background-color: rgba(11,13,18,.05); }
.qa details p { padding: 0 48px 24px 0; color: var(--muted); max-width: 64ch; text-wrap: pretty; }

/* ---------- contact ---------- */
.contact { position: relative; margin-top: var(--sec); padding-block: var(--sec); isolation: isolate; background: var(--dark); color: var(--on-dark); }
.contact-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.contact-art img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 70%; }
.contact-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,11,16,.9) 0%, rgba(9,11,16,.62) 42%, rgba(9,11,16,.3) 70%, rgba(9,11,16,.55) 100%), linear-gradient(180deg, rgba(9,11,16,.4), rgba(9,11,16,0) 30%, rgba(9,11,16,0) 70%, rgba(9,11,16,.85)); }
/* Desktop: the heading and the details on the left, the form on the right. Phones: heading, form, details, in that order. */
.contact-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head form" "info form"; column-gap: clamp(32px, 6vw, 96px); row-gap: 8px; align-items: start; }
.contact-head { grid-area: head; }
.contact-head .h2 { margin-bottom: 20px; }
.contact-head .lede { color: var(--on-dark-2); }
#form { grid-area: form; scroll-margin-top: 76px; }
.contact-info { grid-area: info; }
.ci-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.06); margin-top: 28px; box-shadow: 0 0 0 1px rgba(242,244,248,.24); }
.contact-dl { margin-top: 28px; display: grid; border-top: 1px solid rgba(242,244,248,.18); max-width: 440px; }
.ci-photo:not([hidden]) + .contact-dl { margin-top: 16px; }
.contact-dl > div { display: grid; grid-template-columns: 110px 1fr; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--dark-line); }
.contact-dl dt { color: var(--on-dark-2); }
.contact-dl dd { font-weight: 540; }
.contact-dl .linkbtn { color: var(--on-dark); font-weight: 560; text-decoration: none; font-size: inherit; }
.contact-dl .linkbtn:hover { color: #fff; }
.contact-dl .linkbtn svg { color: var(--on-dark-2); }
.area { margin-top: 30px; max-width: 440px; }
.area figcaption { display: flex; justify-content: space-between; gap: 12px; color: var(--on-dark-2); font: 700 11px/1.2 var(--sans); font-stretch: 78%; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.area-map svg { width: 100%; height: auto; overflow: hidden; color: var(--on-dark-2); }
.area-map .axis { stroke: rgba(242,244,248,.1); }
.area-map .ring { fill: none; stroke: rgba(242,244,248,.3); stroke-dasharray: 2 4; }
.area-map .ring-t { fill: var(--on-dark-2); font-family: var(--sans); font-stretch: 78%; font-weight: 700; font-size: 10.5px; letter-spacing: .08em; }
.area-map .town circle { fill: var(--on-dark); }
.area-map .town text { fill: var(--on-dark); font-family: var(--sans); font-size: 14.5px; font-weight: 520; letter-spacing: -.01em; paint-order: stroke; stroke: rgba(9,11,16,.85); stroke-width: 3px; }
.area-map .hq circle { fill: var(--ember-lit); }
.area-map .hq .halo { fill: none; stroke: var(--ember-lit); stroke-width: 1; }
.area-map .hq text { font-weight: 640; }
.form { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 24px; padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow-lg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.form-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 18px; border-radius: 12px; background: var(--blue-soft); color: #23308A; font-size: 14px; }
.form-pick b { font-weight: 600; color: var(--ink); }
.form-pick button { margin-left: auto; font-size: 13px; color: var(--blue-ink); text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
.f-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.f { display: grid; gap: 7px; min-width: 0; }
.f--full { grid-column: 1 / -1; }
.f-l { font-size: 14px; font-weight: 560; color: var(--ink-2); }
.f-l i { color: var(--blue); font-style: normal; }
.f-l em { font-style: normal; font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 4px; }
.f input, .f select, .f textarea { width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; padding: 11px 14px; font-size: 16px; transition: border-color .2s, box-shadow .2s; }
.f textarea { resize: vertical; min-height: 92px; line-height: 1.45; }
/* the optional fields wait behind one line */
.f-more { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.f-more summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; font-size: 14.5px; font-weight: 560; color: var(--ink-2); }
.f-more summary::-webkit-details-marker { display: none; }
.f-more summary em { font-style: normal; font-weight: 400; color: var(--muted); font-size: 13px; }
.f-more summary::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-2); background: linear-gradient(var(--ink), var(--ink)) center/8px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center/1.5px 8px no-repeat; transition: transform .4s var(--ease); }
.f-more[open] summary::before { transform: rotate(45deg); }
.f-more-in { padding: 4px 0 18px; }
.f input:focus, .f select:focus, .f textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.f ::placeholder { color: #6B717C; }
.form-nojs { margin-bottom: 18px; padding: 12px 14px; border-radius: 12px; background: #FFF4D6; color: #3B2E00; font-size: 14.5px; }
.form-nojs a { text-decoration: underline; }
.f input[aria-invalid="true"] { border-color: var(--bad); }
.f-err { color: var(--bad); font-size: 13px; }
.select { position: relative; display: block; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 1.6px solid var(--ink); border-bottom: 1.6px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.form-foot .fine { max-width: 32ch; }
.status { margin-top: 14px; font-size: 15px; }
.status:empty { display: none; }
.status.ok { padding: 16px 18px; border-radius: 14px; background: #E7F4EC; color: #124A2E; border: 1px solid #B9DEC8; }
.status.err { padding: 14px 16px; border-radius: 14px; background: #FCEDEA; color: #6E1E0F; border: 1px solid #F1C2B8; }
.status a { text-decoration: underline; text-underline-offset: 3px; font-weight: 560; }

/* ---------- footer ---------- */
.foot { padding-block: clamp(72px, 9vw, 128px) 28px; }
.foot-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-bottom: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--dark-line); }
.foot-h { font-size: clamp(2.4rem, 6vw, 5.6rem); line-height: .96; letter-spacing: -.05em; font-weight: 600; font-stretch: 104%; }
.foot-h .stag { font-stretch: 125%; font-weight: 500; color: #C9CFDA; letter-spacing: -.045em; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr; gap: 32px; padding-block: 40px; }
.foot-brand p { color: var(--on-dark-2); margin-top: 16px; max-width: 30ch; font-size: 15px; }
.foot-nav { display: grid; align-content: start; gap: 8px; font-size: 15px; color: var(--on-dark); }
.foot-nav .cap { color: var(--on-dark-2); margin-bottom: 4px; }
.foot-addr { font-style: normal; display: grid; align-content: start; gap: 8px; }
.foot-addr > span { color: var(--on-dark); }
.foot-serve { color: var(--on-dark-2); max-width: 32ch; text-wrap: pretty; }
.foot-nav a, .foot-nav .linkbtn { color: var(--on-dark); min-height: 30px; display: inline-flex; align-items: center; width: fit-content; text-decoration: none; font-size: 15px; font-weight: 400; }
.foot-nav a:hover, .foot-nav .linkbtn:hover { color: #9FB0FF; }
.foot-bot { display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--dark-line); color: #8C93A0; font-size: 12.5px; line-height: 1.5; }
.foot-bot .foot-priv { flex-basis: 100%; color: var(--on-dark); font-size: 14px; }
.foot-bot a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.foot-bot a:hover { color: #9FB0FF; }

/* ---------- mobile bar + toast ---------- */
.actionbar { display: none; }
.toast { font-size: 14px; font-weight: 560; position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s var(--ease); z-index: 90; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ======================================================================
   SKETCH (mini homepage). Sizes in virtual px: desktop 1280, mobile 390.
   ====================================================================== */
.sk { --ink: #1B1A18; --mut: #5D5A55; --bg: #fff; --rad: 4px; font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.4; letter-spacing: 0; font-stretch: 100%; width: 100%; }
.sk svg { width: 1em; height: 1em; display: inline-block; vertical-align: -.12em; }
.sk-logo { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.sk-mono { flex: none; display: grid; place-items: center; width: 38px; height: 38px; background: var(--a); color: #fff; font-weight: 760; font-size: 15px; letter-spacing: .02em; border-radius: var(--rad); }
.sk-name { font-size: 19px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-name b { font-weight: 700; }
.sk-name [data-sk="n2"] { font-weight: 400; opacity: .78; }
.sk-btn, .sk-btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.sk-btn { background: var(--a); color: #fff; font-weight: 650; }
.sk-kicker { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 650; color: var(--a); }
.sk-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-trust { display: flex; gap: 22px; flex-wrap: wrap; }
.sk-trust li { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 520; }
.sk-trust svg { color: var(--a); width: 16px; height: 16px; }
.sk-list ul { display: grid; }
.sk-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: baseline; }
.sk-i { font-size: 13px; font-weight: 600; color: var(--a); font-variant-numeric: tabular-nums; }
.sk-d { color: var(--mut); }
.sk-gal { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; }
.sk-book { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 28px; }
.sk-book .sk-kicker { width: 100%; }
.sk-chip { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid rgba(0,0,0,.14); border-radius: var(--rad); font-size: 17px; font-weight: 560; }
.sk-chip svg { color: var(--a); }
.sk-foot { display: flex; justify-content: space-between; align-items: center; padding: 28px 48px; border-top: 1px solid rgba(0,0,0,.08); font-size: 14px; color: var(--mut); }
.sk-long .sk-name { font-size: 16px; }

/* desktop layout */
.sk--d .sk-nav { height: 80px; display: flex; align-items: center; gap: 32px; padding: 0 48px; }
.sk--d .sk-links { display: flex; gap: 28px; margin-left: auto; font-size: 15px; font-weight: 520; }
.sk--d .sk-tel { display: inline-flex; align-items: center; gap: 8px; font-weight: 640; font-size: 15px; }
.sk--d .sk-btn--sm { padding: 12px 18px; font-size: 14.5px; border-radius: var(--rad); }
.sk--d .sk-hero { position: relative; }
.sk--d .sk-eyebrow { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; font-weight: 650; margin-bottom: 20px; }
.sk--d .sk-sub { font-size: 20px; line-height: 1.45; max-width: 520px; margin-top: 22px; }
.sk--d .sk-ctas { display: flex; gap: 12px; margin-top: 32px; }
.sk--d .sk-ctas .sk-btn, .sk--d .sk-ctas .sk-btn2 { padding: 18px 26px; font-size: 17px; border-radius: var(--rad); }
.sk--d .sk-trust { margin-top: 30px; }
.sk--d .sk-list { padding: 72px 48px 48px; }
.sk--d .sk-list ul { grid-template-columns: repeat(3, 1fr); gap: 0 32px; margin-top: 20px; }
.sk--d .sk-list li { grid-template-columns: auto 1fr; grid-template-rows: auto auto; padding: 22px 0; border-top: 1px solid rgba(0,0,0,.12); gap: 4px 14px; }
.sk--d .sk-list li b { font-size: 22px; font-weight: 650; }
.sk--d .sk-list li .sk-d { grid-column: 2; font-size: 15.5px; }
.sk--d .sk-gal { padding: 0 48px 56px; }

/* STURDY — condensed, high contrast, built for trades */
.sk--sturdy { --rad: 3px; --bg: #F3F1EC; }
.sk--sturdy .sk-nav { background: var(--deep); color: #fff; }
.sk--sturdy .sk-name { font-stretch: 78%; text-transform: uppercase; font-size: 21px; letter-spacing: .01em; }
.sk--sturdy .sk-name b { font-weight: 820; }
.sk--sturdy .sk-mono { font-stretch: 75%; font-weight: 850; font-size: 17px; }
.sk--sturdy .sk-links span { text-transform: uppercase; letter-spacing: .08em; font-size: 13.5px; font-stretch: 85%; opacity: .78; }
.sk--sturdy .sk-btn { text-transform: uppercase; letter-spacing: .04em; font-stretch: 85%; font-weight: 760; }
.sk--sturdy .sk-h { font-stretch: 75%; font-weight: 830; text-transform: uppercase; letter-spacing: -.005em; line-height: .9; }
.sk--sturdy.sk--d .sk-hero { height: 640px; color: #fff; }
.sk--sturdy.sk--d .sk-media { position: absolute; inset: 0; }
.sk--sturdy.sk--d .sk-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--deep) 94%, transparent) 0%, color-mix(in srgb, var(--deep) 78%, transparent) 36%, color-mix(in srgb, var(--deep) 0%, transparent) 72%); }
.sk--sturdy.sk--d .sk-copy { position: absolute; left: 48px; bottom: 64px; width: 640px; z-index: 2; }
.sk--sturdy.sk--d .sk-eyebrow { color: color-mix(in srgb, var(--a) 55%, #fff); display: flex; align-items: center; gap: 12px; }
.sk--sturdy.sk--d .sk-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--a); }
.sk--sturdy.sk--d .sk-h { font-size: 92px; }
.sk--sturdy.sk--d .sk-sub { color: rgba(255,255,255,.84); }
.sk--sturdy .sk-btn2 { border: 1.5px solid rgba(255,255,255,.5); color: #fff; font-weight: 650; }
.sk--sturdy.sk--d .sk-trust li { color: rgba(255,255,255,.85); }
.sk--sturdy .sk-trust svg { color: color-mix(in srgb, var(--a) 60%, #fff); }
.sk--sturdy .sk-list li b { font-stretch: 80%; text-transform: uppercase; font-weight: 800; }

/* REFINED — serif, cream, editorial */
.sk--refined { --rad: 0; --bg: #F6F1EA; --ink: #2A2420; --mut: #6E645C; }
.sk--refined .sk-nav { border-bottom: 1px solid rgba(42,36,32,.12); }
.sk--refined .sk-mono { background: transparent; color: var(--a); border: 1px solid currentColor; font-family: var(--serif); font-weight: 400; font-size: 18px; border-radius: 50%; }
.sk--refined .sk-name { font-family: var(--serif); font-size: 27px; }
.sk--refined .sk-name b { font-weight: 400; }
.sk--refined .sk-links span { text-transform: uppercase; letter-spacing: .18em; font-size: 12px; color: var(--mut); }
.sk--refined .sk-tel { font-size: 14px !important; color: var(--mut); }
.sk--refined .sk-btn { text-transform: uppercase; letter-spacing: .16em; font-size: 13px !important; font-weight: 600; }
.sk--refined .sk-h { font-family: var(--serif); font-weight: 400; line-height: .98; letter-spacing: -.01em; }
.sk--refined .sk-h em { font-style: italic; color: var(--a); }
.sk--refined .sk-eyebrow { color: var(--mut); }
.sk--refined.sk--d .sk-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 56px 48px 24px; align-items: center; }
.sk--refined.sk--d .sk-copy { order: 0; }
.sk--refined.sk--d .sk-media { order: 1; height: 560px; outline: 1px solid rgba(42,36,32,.18); outline-offset: 12px; }
.sk--refined.sk--d .sk-h { font-size: 104px; }
.sk--refined .sk-btn2 { color: var(--ink); border-bottom: 1px solid currentColor; padding-inline: 0 !important; padding-block: 6px !important; font-weight: 560; }
.sk--refined.sk--d .sk-trust li { color: var(--mut); font-size: 13.5px; }
.sk--refined .sk-list li b { font-family: var(--serif); font-weight: 400; font-size: 26px !important; }
.sk--refined .sk-list li .sk-d { font-variant-numeric: tabular-nums; }
.sk--refined .sk-chip { font-family: var(--serif); font-size: 21px; font-weight: 400; background: #fff; border-color: rgba(42,36,32,.14); }

/* CLEAN — rounded, bright, modern */
.sk--clean { --rad: 14px; --bg: #FFFFFF; --ink: #15171A; --mut: #5B6068; }
.sk--clean .sk-mono { border-radius: 50%; font-weight: 700; }
.sk--clean .sk-name { font-stretch: 104%; letter-spacing: -.02em; }
.sk--clean .sk-name b { font-weight: 680; }
.sk--clean .sk-links span { color: var(--mut); font-size: 15px; }
.sk--clean .sk-btn { border-radius: 999px; }
.sk--clean .sk-h { font-weight: 660; font-stretch: 106%; letter-spacing: -.04em; line-height: 1; }
.sk--clean .sk-eyebrow { display: inline-flex !important; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--tint); color: var(--a); text-transform: none !important; letter-spacing: 0 !important; font-weight: 600; font-size: 14px; }
.sk--clean .sk-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--a); }
.sk--clean.sk--d .sk-hero { display: grid; grid-template-columns: 1.02fr 1fr; gap: 48px; padding: 48px 48px 40px; align-items: center; }
.sk--clean.sk--d .sk-h { font-size: 76px; }
.sk--clean.sk--d .sk-media { height: 520px; border-radius: 28px; overflow: hidden; }
.sk--clean .sk-btn2 { background: var(--tint); color: var(--ink); border-radius: 999px; font-weight: 600; }
.sk--clean.sk--d .sk-ctas .sk-btn, .sk--clean.sk--d .sk-ctas .sk-btn2 { border-radius: 999px; }
.sk--clean.sk--d .sk-trust li { color: var(--mut); }
.sk--clean .sk-float { position: absolute; right: 80px; bottom: 76px; background: #fff; border-radius: 18px; padding: 16px 20px; box-shadow: 0 20px 40px -16px rgba(0,0,0,.3); display: grid; gap: 2px; font-size: 14px; color: var(--mut); }
.sk--clean .sk-float b { color: var(--ink); font-size: 17px; }
.sk--clean.sk--d .sk-list ul li { border-top: 0; background: var(--tint); border-radius: 18px; padding: 22px; margin-right: 0; }
.sk--clean.sk--d .sk-list ul { gap: 14px; }
.sk--clean .sk-gal div { border-radius: 18px; }

/* mobile layout */
.sk--m .sk-nav { height: 112px; padding: 50px 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sk--m .sk-mono { width: 34px; height: 34px; font-size: 14px; }
.sk--m .sk-name { font-size: 16.5px; max-width: 250px; }
.sk--m.sk--refined .sk-name { font-size: 22px; }
.sk--m.sk--sturdy .sk-name { font-size: 18px; }
.sk--m .sk-burger svg { width: 26px; height: 26px; }
.sk--m .sk-eyebrow { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 650; margin-bottom: 12px; }
.sk--m .sk-h { font-size: 44px; }
.sk--m .sk-sub { font-size: 16.5px; line-height: 1.45; margin-top: 14px; }
.sk--m .sk-ctas { margin-top: 22px; }
.sk--m .sk-ctas .sk-btn { width: 100%; padding: 16px; font-size: 16px; border-radius: var(--rad); }
.sk--m .sk-trust { margin-top: 18px; gap: 8px 16px; }
.sk--m .sk-trust li { font-size: 13px; }
.sk--m .sk-copy { padding: 26px 20px 30px; }
.sk--m .sk-list { padding: 30px 20px; }
.sk--m .sk-list ul { margin-top: 12px; }
.sk--m .sk-list li { padding: 14px 0; border-top: 1px solid rgba(0,0,0,.1); font-size: 16px; }
.sk--m .sk-list li b { font-weight: 640; }
.sk--m .sk-gal { grid-template-columns: 1fr 1fr; padding: 0 20px 24px; }
.sk--m .sk-foot { padding: 24px 20px 120px; font-size: 13px; flex-direction: column; align-items: flex-start; gap: 12px; }
.sk--m .sk-book { margin-top: 18px; gap: 8px; }
.sk--m .sk-chip { padding: 10px 14px; font-size: 15px; }
.sk--m.sk--sturdy .sk-nav { background: var(--deep); color: #fff; }
.sk--m.sk--sturdy .sk-media { height: 250px; }
.sk--m.sk--sturdy .sk-copy { background: var(--deep); color: #fff; }
.sk--m.sk--sturdy .sk-eyebrow { color: color-mix(in srgb, var(--a) 55%, #fff); }
.sk--m.sk--sturdy .sk-h { font-size: 52px; }
.sk--m.sk--sturdy .sk-sub, .sk--m.sk--sturdy .sk-trust li { color: rgba(255,255,255,.82); }
.sk--m.sk--refined .sk-media { height: 300px; margin: 8px 20px 0; outline: 1px solid rgba(42,36,32,.18); outline-offset: 8px; }
.sk--m.sk--refined .sk-h { font-size: 54px; }
.sk--m.sk--refined .sk-copy { padding-top: 34px; }
.sk--m.sk--clean .sk-copy { padding-top: 14px; }
.sk--m.sk--clean .sk-hero { display: flex; flex-direction: column-reverse; }
.sk--m.sk--clean .sk-media { height: 230px; margin: 4px 16px 0; border-radius: 22px; overflow: hidden; }
.sk--m.sk--clean .sk-h { font-size: 40px; }
.sk--m.sk--clean .sk-eyebrow { font-size: 12.5px !important; }

/* phone call bar (lives outside the scroll view, scaled with it) */
.sk-bar { width: 390px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; padding: 10px 12px 28px; font-family: var(--sans); }
.sk-bar-b { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 52px; font-size: 15px; font-weight: 650; white-space: nowrap; }
.sk-bar-b svg { width: 17px; height: 17px; }
.sk-bar--sturdy { background: var(--deep); }
.sk-bar--sturdy .sk-bar-b { color: #fff; background: rgba(255,255,255,.08); border-radius: 4px; text-transform: uppercase; font-stretch: 82%; letter-spacing: .03em; font-weight: 760; }
.sk-bar--sturdy .sk-bar-b.is-main { background: var(--a); }
.sk-bar--refined { background: #F6F1EA; border-top: 1px solid rgba(42,36,32,.14); }
.sk-bar--refined .sk-bar-b { color: #2A2420; border: 1px solid rgba(42,36,32,.25); text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; }
.sk-bar--refined .sk-bar-b.is-main { background: var(--a); color: #fff; border-color: var(--a); }
.sk-bar--clean { background: transparent; padding: 10px 14px 30px; }
.sk-bar--clean .sk-bar-b { background: #fff; color: #15171A; border-radius: 999px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.06); }
.sk-bar--clean .sk-bar-b.is-main { background: var(--a); color: #fff; }

/* ======================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width: 1180px) {
  .nav { display: none; }
  .menu-btn { display: block; }
  .stage { grid-template-columns: 290px minmax(0, 1fr); }
  .builder { grid-template-columns: 1fr; }
  .receipt { position: relative; top: 0; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1100px) and (min-width: 821px) {
  .hero-side { flex-basis: 300px; }
}
@media (max-width: 960px) {
  .hero-top { flex-direction: column; align-items: flex-start; gap: 22px; }
  .hero-side { flex: none; max-width: 560px; }
  .check-in, .faq-in { grid-template-columns: 1fr; }
  .faq .qa { grid-column: 1; }
  .about-in, .about.has-photo .about-in { grid-template-columns: 1fr; grid-template-areas: "lead" "fig" "copy"; }
  .about.has-photo .about-fig { max-width: 520px; }
  .work-head { grid-template-columns: 1fr; }
  .work-head .lede { grid-column: 1; grid-row: auto; }
  .sec-head--split { flex-direction: column; align-items: flex-start; gap: 18px; }
  .pk-grid, .plan-grid { grid-template-columns: 1fr; }
  .pk-in { display: grid; grid-template-columns: 112px 1fr; grid-template-rows: auto auto auto; column-gap: 14px; }
  .pk-art { grid-row: 1 / span 4; aspect-ratio: 1; margin: 0; height: 112px; }
  .pk-list { grid-column: 1 / -1; }
  .pk-time { grid-column: 1 / -1; }
  .founding { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .hero-foot { grid-template-columns: 1fr; }
  .area-strip { justify-items: start; }
  .area-towns { justify-content: flex-start; }
  .about-fig { aspect-ratio: 16 / 10; }
  .rc-form { grid-template-columns: 1fr 1fr; }
  .rc-form .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 820px) {
  body { font-size: 16.5px; }
  .hdr-in { height: 60px; gap: 12px; }
  .menu { inset: 60px 0 auto 0; }
  .hdr-right .btn { display: none; }
  .hdr-tel { display: none; }
  .brand-word { font-size: 16.5px; }
  .h1 { font-size: clamp(2.3rem, 10.1vw, 4rem); letter-spacing: -.045em; }
  .eyebrow { font-size: 11.5px; letter-spacing: .06em; margin-bottom: 18px; }
  .eyebrow .tick { width: 12px; }
  .hero-for { font-size: 14.5px; }
  .hero-plate, .band, .contact { --inset: 8px; border-radius: 16px; }
  .stage { grid-template-columns: 1fr; border-radius: 18px; }
  .canvas { order: -1; aspect-ratio: auto; height: 600px; }
  .plate-media { bottom: auto; height: 720px; }
  .plate-media img { object-position: 50% 30%; }
  .hero-plate::before { background: linear-gradient(180deg, rgba(9,11,16,.55) 0%, rgba(9,11,16,.1) 14%, rgba(9,11,16,.12) 520px, rgba(9,11,16,1) 720px); }
  .plate-top { align-items: flex-start; gap: 12px; }
  .plate-intro { font-size: 15px; }
  html { scroll-padding-top: 60px; }
  /* Phones: sections below the examples are laid out only as they come near the screen (about 400 ms less work before first paint).
     The sizes are close to the real heights at 390px, so the scrollbar and in-page jumps barely move when they render. */
  .band, .incl, .pricing, .pledge, .process, .about, .faq, .contact, .foot { content-visibility: auto; contain-intrinsic-size: auto 900px; }
  /* content heights measured at 390px (padding is added on top) */
  .band { contain-intrinsic-size: auto 600px; }
  .incl { contain-intrinsic-size: auto 2213px; }
  .pricing { contain-intrinsic-size: auto 3691px; }
  .pledge { contain-intrinsic-size: auto 236px; }
  .process { contain-intrinsic-size: auto 833px; }
  .about { contain-intrinsic-size: auto 988px; }
  .faq { contain-intrinsic-size: auto 837px; }
  .contact { contain-intrinsic-size: auto 1340px; }
  .foot { contain-intrinsic-size: auto 1374px; }
  .browser { display: none; }
  .phone { width: 262px; left: 0; right: 0; margin-inline: auto; top: 40px; }
  .phone-body { padding: 9px; border-radius: 44px; box-shadow: inset 0 0 0 2px #4B4C4E, inset 0 0 0 4px #161718, 0 40px 60px -30px rgba(11,13,18,.45); }
  .phone-screen { border-radius: 36px; }
  .island { top: 11px; width: 78px; height: 23px; }
  .notes .note[data-note="logo"], .notes .note[data-note="cta"] { display: none; }
  .canvas-label { left: 50%; transform: translateX(-50%); top: 12px; bottom: auto; white-space: nowrap; }
  .inspector { border-right: 0; border-top: 1px solid var(--line); padding: 18px 14px 18px; }
  /* every trade on screen at once: two rows of chips, no sideways scrolling */
  .chips { flex-wrap: wrap; gap: 6px 4px; }
  .demo-steps { gap: 3px; }
  .demo-steps i { width: 12px; }
  .chips .chip span { min-height: 36px; padding: 0 9px; font-size: 13px; }
  .sw span { width: 36px; height: 36px; }
  .swatches { gap: 14px; }
  .check-busy { display: block; }
  .report { padding: 16px; border-radius: 20px; }
  /* the report waits for the first run, then shows only the summary card until "See the full report" */
  .check:not(.has-run) .report, .report.is-collapsed { display: none; }
  .report-body { grid-template-columns: 1fr; justify-items: center; gap: 8px; }
  .metrics { width: 100%; }
  .check-input { flex-wrap: wrap; }
  .check-input .pre { display: none; }
  .check-input input { flex-basis: 100%; padding-left: 10px; }
  .check-input .btn { width: 100%; margin-top: 6px; }
  .check-copy .lede { margin-bottom: 24px; }
  .rc-form { grid-template-columns: 1fr; }
  .rc-form .btn { justify-self: stretch; }
  .rc-cap { padding: 14px; }
  .pk-top { flex-direction: column; align-items: flex-start; gap: 2px; padding-inline: 0; }
  .pk-for { padding-inline: 0; }
  /* the covers swipe sideways */
  .shelf { grid-auto-flow: column; grid-auto-columns: 64%; grid-template-columns: none; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 30px; scrollbar-width: none;
 }
  .shelf::-webkit-scrollbar { display: none; }
  .cover figure::before { margin-inline: -8px; }
  .cover { scroll-snap-align: start; }
  .addons { grid-template-columns: 1fr; }
  /* estimate timeline: a vertical list with dots */
  .tl { display: none; }
  .tl-l { display: grid; gap: 10px; font-size: 12px; margin-top: 0; justify-content: start; }
  .tl-l span { position: relative; padding-left: 20px; }
  .tl-l span::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--blue); }
  .tl-l span:not(:last-child)::after { content: ""; position: absolute; left: 3.5px; top: calc(50% + 6px); height: 14px; width: 1px; background: var(--line-2); }
  .tl-l span:last-child::before { background: var(--ember); }
  .steps { grid-template-columns: 1fr; padding-top: 0; padding-left: 28px; gap: 32px; }
  .steps-line { left: 5px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .steps-line i { transform: scaleY(0); transform-origin: 50% 0; }
  .step::before { top: 4px; left: -28px; }
  .pledge-terms { margin-left: 0; }
  .band { min-height: 600px; align-items: flex-end; }
  .band::after { background: linear-gradient(to top, rgba(9,11,16,.96) 18%, rgba(9,11,16,.7) 50%, rgba(9,11,16,.15) 80%); }
  .band-in { justify-items: start; padding-block: 0 84px; }
  .band-h .stag, .foot-h .stag { padding-left: .6em; }
  .band-media img { object-position: 64% 40%; }
  .band > .art-tag { right: 12px; bottom: 12px; }
  .contact-in { grid-template-columns: 1fr; grid-template-areas: none; row-gap: 28px; }
  .contact-head, #form, .contact-info { grid-area: auto; }
  .contact-art img { object-position: 30% 80%; }
  .contact-art::after { background: linear-gradient(180deg, rgba(9,11,16,.88) 0%, rgba(9,11,16,.72) 45%, rgba(9,11,16,.92) 100%); }
  .ci-photo, .contact-dl { margin-top: 0; }
  .f-grid { grid-template-columns: 1fr; }
  .foot-top { flex-direction: column; align-items: flex-start; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .qa details p { padding-right: 0; }

  .actionbar { display: flex; align-items: center; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 70; gap: 6px; padding: 6px; border-radius: 18px; background: rgba(11,13,18,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 20px 40px -12px rgba(0,0,0,.4); transition: transform .5s var(--ease), opacity .3s; }
  /* hidden = out of reach for the keyboard too (motion.js also sets inert) */
  .actionbar.is-hidden { transform: translateY(140%); opacity: 0; visibility: hidden; transition: transform .5s var(--ease), opacity .3s, visibility 0s .5s; }
  /* the form is on screen (or has focus): the bar steps aside so it never covers a field */
  .actionbar.is-off { transform: translateY(110%); opacity: 0; visibility: hidden; transition: transform .3s var(--ease), opacity .3s, visibility 0s .3s; }
  .ab-b { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; border-radius: 13px; color: var(--paper); font-size: 15px; font-weight: 600; background: rgba(242,244,248,.08); }
  .ab-b svg { width: 17px; height: 17px; }
  .ab-main { background: var(--blue); flex: 1.5; }
  .ab-b[hidden] { display: none; }
  .ab-b { white-space: nowrap; }
  /* with Call and Text on the bar, Site check steps out (it is one tap away in the menu) so Free mockup stays on one line */
  .actionbar:has(.ab-tel:not([hidden])) .ab-check { display: none; }
  /* over the package builder: the running total and a Start button */
  .ab-total { display: none; flex: 1.6; flex-direction: column; justify-content: center; padding: 0 12px; color: var(--paper); line-height: 1.15; }
  .ab-total b { font-size: 18px; font-weight: 640; letter-spacing: -.02em; font-variant-numeric: tabular-nums; font-stretch: 112%; }
  .ab-total em { font-style: normal; font-size: 12px; color: #B5BCC8; }
  .actionbar.is-total .ab-total { display: flex; }
  .actionbar.is-total .ab-tel, .actionbar.is-total .ab-sms, .actionbar.is-total .ab-check { display: none; }
  .actionbar.is-total .ab-main { flex: 1; }
  .foot { padding-bottom: 100px; }
  .toast { bottom: 90px; }
}
@media (max-width: 420px) {
  .cta-row .btn { flex: 1 1 100%; }
  .canvas { height: 584px; }
  .phone { width: 250px; }
}

/* ---------- motion preferences ---------- */
html.js .split-wait { opacity: 0; animation: failsafe 0s 2.4s forwards; }
@keyframes failsafe { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .live-dot, .note-dot::after { animation: none; }
}

/* no-website panel inside the dark report */
.dark .seg { background: rgba(242,244,248,.06); }
.dark .seg-o input:checked + span { background: rgba(242,244,248,.14); box-shadow: none; }
.dark .seg-o .nm { color: var(--on-dark-2); font-style: normal; font-size: 13px; }
.dark .seg-o input:checked + span .nm { color: var(--on-dark); }
.none-seg { margin-top: 6px; }
.none-seg .seg-o span { padding: 10px 6px; }
.none-pick { color: var(--on-dark); font-size: 15.5px; }
.none-pick b { color: #A9B7FF; font-weight: 600; }
.seg-o .nm { font-style: normal; }
.sk-bar--clean { gap: 6px; padding-inline: 10px; }
.sk-bar--clean .sk-bar-b { font-size: 13.5px; gap: 5px; letter-spacing: -.01em; }
.sk-bar--clean .sk-bar-b svg { width: 15px; height: 15px; }

/* idle instrument sweep on the gauge */
.gauge::before { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0; transition: opacity .4s; background: conic-gradient(from 0deg, rgba(111,134,255,0) 0 78%, rgba(111,134,255,.55) 100%); -webkit-mask: radial-gradient(closest-side, transparent 73%, #000 74%, #000 82%, transparent 83%); mask: radial-gradient(closest-side, transparent 73%, #000 74%, #000 82%, transparent 83%); animation: sweep 3.2s linear infinite; pointer-events: none; }
.report.is-idle .gauge::before, .report.is-scanning .gauge::before { opacity: 1; }
@keyframes sweep { to { transform: rotate(360deg); } }

/* header over dark sections */
.hdr.on-dark.is-scrolled { background: rgba(11,13,18,.72); box-shadow: 0 1px 0 var(--dark-line); }
.hdr.on-dark .brand-mark { color: var(--on-dark); --mark-b: #6F86FF; }
.hdr.on-dark .brand-word { color: var(--on-dark-2); }
.hdr.on-dark .brand-word b { color: var(--on-dark); }
.hdr.on-dark .nav a { color: #D9D8D2; }
.hdr.on-dark .nav a:hover, .hdr.on-dark .nav a.is-active { background: rgba(242,244,248,.1); color: #fff; }
.hdr.on-dark .btn--ink { background: var(--paper); color: var(--ink); }
.hdr.on-dark .btn--ink::after { background: #fff; }
.hdr.on-dark .menu-btn i { background: var(--on-dark); }
.brand-mark, .brand-word, .brand-word b, .nav a { transition: color .35s, background-color .25s; }

.nojs-shot { width: 100%; height: auto; display: block; }
html.no-js .browser .zoom, html.no-js .phone .zoom { width: 100%; }


@media (max-width: 820px) {
  .mp-bar { gap: 4px; padding: 6px; }
  .mp-bar span { font-size: 11px; gap: 4px; min-height: 36px; }
}
/* 44px tap targets on touch screens */
@media (max-width: 820px), (pointer: coarse) {
  .chip span { min-height: 44px; padding: 0 14px; }
  .sw { padding: 4px; margin: -4px; }
  .linkbtn { min-height: 44px; }
  .stepper button { width: 44px; height: 44px; }
  .form-pick button { min-height: 44px; padding-inline: 6px; }
  .tip { width: 28px; height: 28px; }
  .foot-nav a, .foot-nav .linkbtn { min-height: 44px; }
}