/* FenceBook · same design system as CleaningBook (dark charcoal, cedar orange accent, pill UI).
   Tokens below mirror cleaningbook.app so the two products read as one family. */
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* Colour · paper ladder (elevation gets lighter) */
  --color-paper:   #16181B;
  --color-paper-2: #1F2226;
  --color-paper-3: #272A2F;
  --color-paper-4: #2E3238;
  --color-rule:    #2E3238;
  --color-rule-2: #2E3238;
  /* Colour · text */
  --color-ink:     #F2EFEA;
  --color-ink-2:   #D6D3CE;
  --color-muted:   #9AA0A6;
  /* Colour · accent (cedar orange) */
  --color-accent:      #E07A2F;
  --color-accent-hover:#C9661F;
  --color-accent-ink:  #16181B;
  --color-accent-soft: rgb(224 122 47 / 0.12);
  --color-accent-line: rgb(224 122 47 / 0.45);
  --color-focus:       #F29A55;
  --color-success:     #4CAF7A;
  --color-success-soft:rgb(76 175 122 / 0.14);
  --color-success-line:rgb(76 175 122 / 0.45);
  /* Colour · chat */
  --color-bubble-in:   #2E3238;
  --color-bubble-out:  #5A3A22;
  --color-photo-a:     oklch(62% 0.04 80);
  --color-photo-b:     oklch(52% 0.035 60);
  --color-photo-c:     oklch(70% 0.03 120);
  /* Colour · status */
  --color-danger:      oklch(74% 0.16 25);
  --color-danger-soft: oklch(74% 0.16 25 / 0.14);
  --color-scrim:       rgb(8 9 10 / 0.74);
  --color-shadow:      rgb(0 0 0 / 0.55);

  /* Type */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-outlier: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-md:   1.25rem;
  --text-lg:   clamp(1.375rem, 1.2vw + 1rem, 1.75rem);
  --text-xl:   clamp(1.75rem, 2.4vw + 1rem, 2.75rem);
  --text-display-s: clamp(2.375rem, 4.2vw + 1rem, 4.5rem);
  --text-price: clamp(3rem, 4vw + 1.5rem, 4.5rem);

  /* Space · 4pt */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;
  --page-gutter: clamp(1rem, 4vw, 3rem);
  --page-max: 76rem;

  /* Shape */
  --radius-sm: 0.625rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;
  --rule-hair: 1px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  /* Layers */
  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 400;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { overflow-x: clip; scroll-behavior: smooth; background: var(--color-paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  font-weight: 400;
  color: var(--color-ink);
  background:
    radial-gradient(48rem 32rem at 88% -6%, var(--color-accent-soft), transparent 70%),
    var(--color-paper);
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; font-style: normal; margin: 0; letter-spacing: -0.03em; line-height: 1.04; overflow-wrap: anywhere; min-width: 0; text-wrap: balance; }
p { margin: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: max(var(--page-gutter), env(safe-area-inset-left)) max(var(--page-gutter), env(safe-area-inset-right)); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.accent { color: var(--color-accent); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Buttons (8 states) ---------- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--color-ink); --btn-bd: var(--color-rule);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 3rem; padding: 0 var(--space-lg);
  border-radius: var(--radius-pill);
  border: var(--rule-hair) solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 600; font-size: var(--text-sm); line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out), opacity var(--dur-short) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn--fill { --btn-bg: var(--color-accent); --btn-fg: var(--color-accent-ink); --btn-bd: var(--color-accent); }
.btn--line { --btn-bd: var(--color-accent-line); }
.btn--lg { min-height: 3.5rem; padding: 0 var(--space-xl); font-size: var(--text-base); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
  .btn--fill:hover { --btn-bg: var(--color-accent-hover); --btn-bd: var(--color-accent-hover); }
  .btn--line:hover { --btn-bg: var(--color-paper-3); --btn-bd: var(--color-accent); }
}
.btn:active { transform: translateY(0) scale(0.985); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.42; cursor: not-allowed; transform: none; }
.btn[data-state="loading"] { cursor: progress; opacity: 1; }
.btn[data-state="loading"] .btn__label { opacity: 0.7; }
.btn__spin { display: none; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 700ms linear infinite; }
.btn[data-state="loading"] .btn__spin { display: inline-block; }
.btn[data-state="error"] { --btn-bd: var(--color-danger); }
.btn[data-state="success"] { --btn-bg: var(--color-paper-3); --btn-fg: var(--color-accent); --btn-bd: var(--color-accent); }
@keyframes spin { to { transform: rotate(360deg); } }
.linkish { background: none; border: 0; padding: 0; color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; font: inherit; }
.linkish:hover { text-decoration-thickness: 2px; }

/* ---------- Nav · N5 floating pill ---------- */
.nav-pill {
  position: fixed; top: max(var(--space-sm), env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--space-md);
  padding: 0.4rem 0.4rem 0.4rem 1rem;
  width: max-content; max-width: calc(100% - 1.5rem);
  background: color-mix(in oklch, var(--color-paper-2) 80%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 30px -14px var(--color-shadow);
}
.wordmark { display: inline-flex; align-items: center; min-height: 2.5rem; gap: 0.5rem; font-family: var(--font-display); font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.wordmark__mark { width: 1.25rem; height: 1.25rem; color: var(--color-accent); }
.nav-pill__link { font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; white-space: nowrap; padding: 0.5rem 0.25rem; }
.nav-pill__link:hover { color: var(--color-ink); }
.nav-pill .btn { min-height: 2.5rem; padding: 0 var(--space-md); }
@media (max-width: 23rem) { .nav-pill__link { display: none; } }

/* ---------- Hero ---------- */
.hero { padding-block: calc(var(--space-3xl) + var(--space-xs)) var(--space-2xl); }
.hero__grid { display: grid; gap: var(--space-2xl); align-items: center; }
.hero h1 { font-size: var(--text-display-s); max-width: 15ch; text-wrap: pretty; }
.hero__sub { margin-top: var(--space-lg); font-size: var(--text-md); line-height: 1.5; color: var(--color-ink-2); max-width: 34ch; }
.hero__ctas { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero__load { opacity: 0; transform: translateY(10px); animation: rise 700ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
@keyframes rise { to { opacity: 1; transform: none; } }

.quote-card {
  margin: 0; justify-self: start;
  width: min(100%, 22rem);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: grid; gap: var(--space-md);
  transform: rotate(-1.5deg);
}
.quote-card__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); }
.quote-card__live { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-accent); font-weight: 500; }
.quote-card__live::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--color-accent); }
.quote-card__specs { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.quote-card__specs span { padding: 0.15rem 0.6rem; border-radius: var(--radius-pill); background: var(--color-paper-3); white-space: nowrap; }
.quote-card__price { font-family: var(--font-outlier); font-size: 3rem; font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.quote-card__book { display: flex; justify-content: center; align-items: center; min-height: 2.75rem; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; font-size: var(--text-sm); }
.quote-card__foot { font-size: var(--text-xs); color: var(--color-muted); }

@media (min-width: 48rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--space-xl); }
  .quote-card { justify-self: end; }
}
@media (max-width: 29.99rem) {
  .hero__ctas { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero__ctas .btn { width: 100%; }
}
@media (min-width: 60rem) {
  .hero { padding-block: calc(var(--space-4xl) + var(--space-md)) var(--space-2xl); }
  .hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .quote-card { justify-self: end; margin-top: var(--space-2xl); }
}

/* ---------- Benefits ---------- */
.gets { padding-block: var(--space-xl) var(--space-2xl); }
.gets h2 { font-size: var(--text-xl); max-width: 18ch; }
.gets__grid { margin-top: var(--space-xl); display: grid; gap: var(--space-sm); grid-template-columns: minmax(0, 1fr); }
.benefit { padding: var(--space-lg); background: var(--color-paper-2); border-radius: var(--radius-lg); display: grid; gap: var(--space-xs); align-content: start; }
.benefit h3 { font-size: var(--text-md); letter-spacing: -0.02em; line-height: 1.2; display: flex; gap: var(--space-sm); align-items: baseline; }
.benefit h3::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 2px; background: var(--color-accent); transform: translateY(-0.1em); }
.benefit p { color: var(--color-muted); font-size: var(--text-sm); padding-left: calc(0.55rem + var(--space-sm)); }
.benefit--lead { background: var(--color-paper-3); }
.benefit--lead h3 { font-size: var(--text-lg); }
.benefit__big { display: none; font-family: var(--font-display); font-weight: 800; font-size: clamp(4.5rem, 7vw, 7rem); line-height: 0.9; letter-spacing: -0.05em; color: var(--color-accent); }

.ba { margin-top: var(--space-sm); display: grid; gap: var(--space-sm); grid-template-columns: minmax(0, 1fr); }
.ba__side { padding: var(--space-lg); border-radius: var(--radius-lg); border: var(--rule-hair) solid var(--color-rule-2); }
.ba__k { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.ba__v { margin-top: var(--space-xs); font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); letter-spacing: -0.02em; line-height: 1.15; }
.ba__side--before .ba__v { color: var(--color-ink-2); text-decoration: line-through; text-decoration-color: var(--color-danger); text-decoration-thickness: 2px; }
.ba__side--after { border-color: var(--color-accent-line); background: var(--color-accent-soft); }
.ba__side--after .ba__k { color: var(--color-accent); }

@media (min-width: 40rem) {
  .gets__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .benefit { grid-column: span 6; }
  .benefit--lead { grid-column: span 12; }
  .ba { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 60rem) {
  .benefit:nth-child(1) { grid-column: span 7; grid-row: span 2; padding: var(--space-xl); grid-template-rows: 1fr auto auto; }
  .benefit__big { display: block; }
  .benefit:nth-child(2) { grid-column: span 5; }
  .benefit:nth-child(3) { grid-column: span 5; }
  .benefit:nth-child(4) { grid-column: span 4; }
  .benefit:nth-child(5) { grid-column: span 4; }
  .benefit:nth-child(6) { grid-column: span 4; }
  .benefit:nth-child(7) { grid-column: span 12; }
  .ba { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}

/* ---------- Get / form ---------- */
.get { padding-block: var(--space-2xl) var(--space-xl); }
.get__grid { display: grid; gap: var(--space-xl); align-items: start; }
.get h2 { font-size: var(--text-display-s); max-width: 14ch; }
.get__sub { margin-top: var(--space-lg); font-size: var(--text-md); color: var(--color-ink-2); max-width: 32ch; line-height: 1.5; }
.form-card { background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-lg); padding: var(--space-lg); }
.fields { display: grid; gap: var(--space-xs) var(--space-md); grid-template-columns: minmax(0, 1fr); }
.field { display: grid; gap: 0.4rem; min-width: 0; }
.field label { font-size: var(--text-sm); font-weight: 500; }
.field input, .field textarea {
  width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem;
  background: var(--color-paper); color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm);
  font-size: 1rem;
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.field textarea { min-height: 5.5rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); opacity: 0.85; }
.field input:hover, .field textarea:hover { border-color: var(--color-muted); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-accent); }
.field input:disabled { opacity: 0.5; cursor: not-allowed; }
.field input[aria-invalid="true"] { border-color: var(--color-danger); }
.field input.is-valid { border-color: var(--color-accent-line); }
.field__err { font-size: var(--text-xs); line-height: 1.15rem; min-height: 1.15rem; color: var(--color-danger); margin-top: -0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* space reserved so errors never shift the layout */
input[type="date"] { color-scheme: dark; }
.consent { margin-top: var(--space-lg); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: start; font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.5; }
.consent input { width: 1.375rem; height: 1.375rem; margin: 0.1rem 0 0; accent-color: var(--color-accent); cursor: pointer; }
.form-actions { margin-top: var(--space-lg); display: grid; gap: var(--space-sm); }
.form-actions .btn { width: 100%; }
.form-status { font-size: var(--text-sm); }
.form-status:empty { display: none; }
.form-status--error { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); background: var(--color-danger-soft); color: var(--color-ink); border: var(--rule-hair) solid var(--color-danger); display: grid; gap: var(--space-xs); }
.form-status--error .linkish { color: var(--color-ink); justify-self: start; font-weight: 600; }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.done { display: grid; gap: var(--space-md); justify-items: start; padding-block: var(--space-md); }
.done h3 { font-size: var(--text-xl); }
.done p { color: var(--color-ink-2); }
.check { width: 4rem; height: 4rem; color: var(--color-accent); }
.check circle, .check path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.check circle { stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw 600ms var(--ease-out) forwards; }
.check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 360ms var(--ease-out) 420ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

@media (min-width: 40rem) {
  .fields--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .field--full { grid-column: 1 / -1; }
  .form-card { padding: var(--space-xl); }
}
@media (min-width: 60rem) {
  .get__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-3xl); }
  .get__copy { position: sticky; top: 7rem; }
}

/* ---------- Extras panel ---------- */
.extras { border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-md); }
.extras__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-sm) var(--space-md); min-height: 3.5rem; text-align: left; cursor: pointer;
  background: var(--color-paper-3); color: var(--color-ink); border: var(--rule-hair) dashed var(--color-rule); border-radius: var(--radius-md);
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.extras__toggle:hover { background: var(--color-paper-4); border-color: var(--color-muted); }
.extras__toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.extras.has-items .extras__toggle { border-style: solid; border-color: var(--color-accent-line); }
.extras__text { display: grid; gap: 0.1rem; min-width: 0; }
.extras__title { font-weight: 600; font-size: var(--text-sm); }
.extras__sub { font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.extras.has-items .extras__sub { color: var(--color-accent); }
.extras__icon { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--color-paper-2); color: var(--color-accent); transition: transform var(--dur-long) var(--ease-out); }
.extras__icon svg { width: 1rem; height: 1rem; }
.extras.is-open .extras__icon { transform: rotate(45deg); }
.extras__wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-long) var(--ease-in-out); }
.extras.is-open .extras__wrap { grid-template-rows: 1fr; }
.extras__panel { overflow: hidden; min-height: 0; display: grid; gap: var(--space-lg); }
.extras.is-open .extras__panel { padding-top: var(--space-lg); }
#extrasGroups { display: grid; gap: var(--space-lg); }
.seg--cond { --cols: 3; }
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.chip { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0.55rem; align-items: center; padding: 0.6rem 0.7rem; min-height: 3.25rem; border-radius: var(--radius-sm); background: var(--color-paper-3); border: var(--rule-hair) solid transparent; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip:hover { background: var(--color-paper-4); }
.chip__check { grid-row: 1 / 3; width: 1.15rem; height: 1.15rem; border-radius: 0.35rem; border: 1.5px solid var(--color-muted); display: grid; place-items: center; color: transparent; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.chip__check svg { width: 0.75rem; height: 0.75rem; }
.chip__name { font-size: var(--text-sm); font-weight: 500; line-height: 1.25; color: var(--color-ink); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip__price { font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; line-height: 1.3; }
.chip:has(input:checked) { border-color: var(--color-accent-line); background: var(--color-accent-soft); }
.chip:has(input:checked) .chip__check { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.chip:has(input:checked) .chip__price { color: var(--color-accent); }
.chip:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chip.is-included { cursor: default; background: var(--color-paper-2); }
.chip.is-included input { cursor: default; }
.chip.is-included .chip__check { background: var(--color-paper-4); border-color: var(--color-paper-4); color: var(--color-accent); }
.chip.is-included .chip__price { color: var(--color-accent); }
@media (max-width: 29.99rem) { .seg--cond span { font-size: var(--text-xs); padding: 0 0.2rem; } }
@media (max-width: 21rem) { .size-chips .size-chip { padding-inline: 0.6rem; font-size: var(--text-xs); } .chips { grid-template-columns: minmax(0, 1fr); } .seg--cond { --cols: 1; } .seg--cond span { font-size: var(--text-sm); } }
.ctl__hint:empty { display: none; }

/* ---------- Booking calendar (modal) ---------- */
.cal { background: var(--color-paper-3); border-radius: var(--radius-md); padding: var(--space-sm); display: grid; gap: var(--space-xs); }
.cal__top { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-sm); font-weight: 600; padding: 0 0.2rem; }
.cal__legend { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 400; font-size: var(--text-xs); color: var(--color-muted); }
.cal__legend i { width: 0.7rem; height: 0.7rem; border-radius: 3px; background: var(--color-paper-2); border: 1px dashed var(--color-rule); }
.cal__head, .cal__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.3rem; }
.cal__head span { text-align: center; font-size: var(--text-xs); color: var(--color-muted); }
.day { min-height: 2.75rem; border-radius: 0.65rem; border: var(--rule-hair) solid transparent; background: var(--color-paper-4); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.day:hover:not(:disabled) { background: var(--color-rule); }
.day:active:not(:disabled) { transform: scale(0.95); }
.day:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.day.is-past { background: transparent; color: var(--color-rule); cursor: default; }
.day.is-full { background: var(--color-paper-2); color: var(--color-muted); border: 1px dashed var(--color-rule); cursor: not-allowed; text-decoration: line-through; text-decoration-color: var(--color-rule); }
.day[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-ink); }
.slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.slots__empty { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-muted); padding: var(--space-sm) 0; }
.slot { position: relative; display: grid; justify-items: start; gap: 0.05rem; min-height: 3.25rem; padding: 0.45rem 0.8rem; border-radius: var(--radius-sm); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-3); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; text-align: left; cursor: pointer; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.slot__pre { font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); }
.slot__full { position: absolute; top: 0.45rem; right: 0.6rem; font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); }
.slot:hover:not(:disabled) { background: var(--color-paper-4); }
.slot:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.slot:disabled { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; }
.slot[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); }
.slot[aria-pressed="true"] .slot__pre { color: var(--color-accent); }
.summary__specs { display: grid; gap: 0.3rem; }
.summary__when { color: var(--color-accent); font-weight: 600; }
.done__when { color: var(--color-accent); font-weight: 600; }

/* ---------- Then it books the job ---------- */
.after { padding-block: var(--space-2xl); }
.after__grid { display: grid; gap: var(--space-xl); align-items: center; grid-template-areas: "copy" "flow" "tools"; }
.after__copy { grid-area: copy; } .flow { grid-area: flow; } .tools { grid-area: tools; }
.after h2 { font-size: var(--text-xl); max-width: 16ch; }
.after__sub { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 42ch; }
.flow-mode { margin-top: var(--space-lg); --cols: 2; max-width: 30rem; }
.flow-mode span { font-size: var(--text-sm); }
.after__points { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-sm); min-height: 7.5rem; }
.after__points li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: baseline; color: var(--color-ink-2); }
.after__points li::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--color-accent); transform: translateY(-0.1em); }
.tools { padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); align-self: start; }
.tools__lead { font-size: var(--text-sm); color: var(--color-ink-2); max-width: 46ch; }
.tools__lead strong { color: var(--color-ink); font-weight: 600; }
.tools__list { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.tools__list li { padding: 0.35rem 0.75rem; border-radius: var(--radius-pill); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-xs); color: var(--color-ink-2); white-space: nowrap; }
.tools__list .tools__more { background: transparent; border-style: dashed; color: var(--color-muted); }

.flow { display: grid; gap: var(--space-sm); justify-items: end; }
.flow__stage { width: 100%; display: grid; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-lg); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule-2); }
.flow__panel { position: relative; display: grid; gap: var(--space-sm); align-content: start; padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-paper); min-width: 0; }
.flow__label { font-size: var(--text-xs); color: var(--color-muted); font-weight: 500; }
.flow__arrow { display: grid; place-items: center; color: var(--color-accent); }
.flow__arrow svg { width: 1.5rem; height: 1.5rem; transform: rotate(90deg); }
.mcal { display: grid; gap: 0.35rem; }
.mcal__top { font-size: var(--text-sm); font-weight: 600; }
.mcal__head, .mcal__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.25rem; }
.mcal__head span { text-align: center; font-size: 0.6875rem; color: var(--color-muted); }
.mday { display: grid; place-items: center; height: 2rem; border-radius: 0.5rem; background: var(--color-paper-3); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out); }
.mday.is-full { background: transparent; border: 1px dashed var(--color-rule); color: var(--color-muted); text-decoration: line-through; }
.mday.is-sel { background: var(--color-accent); color: var(--color-accent-ink); }
.mslots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem; }
.mslot { padding: 0.4rem 0.5rem; border-radius: 0.5rem; border: 1px solid var(--color-rule); font-size: 0.6875rem; font-weight: 600; white-space: nowrap; text-align: center; transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out); }
.mslot.is-full { border-style: dashed; color: var(--color-muted); text-decoration: line-through; }
.mslot.is-sel { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); }
.mbook { display: grid; place-items: center; min-height: 2.25rem; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 600; }
.mdone { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.65rem; border-radius: 0.6rem; background: var(--color-accent-soft); border: 1px solid var(--color-accent-line); color: var(--color-accent); font-size: 0.75rem; font-weight: 600; }
.mdone svg, .req__status svg { width: 0.9rem; height: 0.9rem; flex: none; }
.tap { position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--color-accent); background: var(--color-accent-soft); box-shadow: 0 0 0 6px rgb(224 122 47 / 0.1); pointer-events: none; opacity: 0; z-index: var(--z-raised); }
.wk__head, .wk__grid { display: grid; grid-template-columns: 1.6rem repeat(6, minmax(0, 1fr)); gap: 0.2rem; }
.wk__head span { display: grid; justify-items: center; font-size: 0.625rem; color: var(--color-muted); line-height: 1.2; }
.wk__head b { font-size: 0.75rem; color: var(--color-ink); font-weight: 600; }
.wk__time { font-size: 0.5625rem; color: var(--color-muted); padding-top: 0.25rem; }
.wk__cell { height: 2.4rem; border-radius: 0.35rem; background: var(--color-paper-3); padding: 0.15rem; }
.wk__ev { display: block; height: 100%; border-radius: 0.3rem; background: var(--color-paper-4); color: var(--color-muted); font-size: 0.5625rem; padding: 0.15rem 0.25rem; overflow: hidden; }
.wk__ev--new { display: grid; place-items: center; padding: 0; background: var(--color-accent); color: var(--color-accent-ink); }
.wk__ev--new svg { width: 0.9rem; height: 0.9rem; }
.owner { display: grid; gap: 0.35rem; }
.owner__note { font-size: var(--text-xs); color: var(--color-accent); font-weight: 600; margin-top: 0.25rem; }
.req { display: grid; gap: 0.3rem; padding: 0.75rem; border-radius: 0.75rem; background: var(--color-paper-3); }
.req__title { font-size: var(--text-xs); color: var(--color-muted); }
.req__who { font-size: var(--text-sm); font-weight: 600; }
.req__when { font-size: var(--text-xs); color: var(--color-ink-2); }
.req__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; margin-top: 0.3rem; }
.req__btn { display: grid; place-items: center; min-height: 2rem; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; border: 1px solid var(--color-rule); transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out); }
.req__btn--ok { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.req__btn--ok.is-done { background: var(--color-paper-4); color: var(--color-accent); border-color: var(--color-accent-line); }
.req__status { display: flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: var(--color-accent); font-weight: 600; }
.sms { justify-self: end; max-width: 92%; padding: 0.55rem 0.75rem; border-radius: 1rem 1rem 0.3rem 1rem; background: var(--color-bubble-out); font-size: 0.75rem; line-height: 1.4; }
.flow__replay { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.25rem; padding: 0 0.75rem; border-radius: var(--radius-pill); border: var(--rule-hair) solid var(--color-rule); background: transparent; color: var(--color-muted); font-size: var(--text-xs); cursor: pointer; white-space: nowrap; }
.flow__replay:hover { color: var(--color-ink); background: var(--color-paper-2); }
.flow__replay:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.flow__replay svg { width: 0.9rem; height: 0.9rem; }
@media (min-width: 40rem) {
  .flow__stage { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; padding: var(--space-lg); }
  .flow__arrow svg { transform: none; }
}
@media (min-width: 60rem) {
  .after { padding-block: var(--space-xl) var(--space-2xl); }
  .after__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-areas: "copy flow" "tools flow"; column-gap: var(--space-2xl); row-gap: var(--space-lg); align-items: start; }
  .flow { align-self: center; }
}
@media (max-width: 22rem) { .flow-mode span { font-size: var(--text-xs); } }
@media (min-width: 60rem) and (max-width: 79.99rem) {
  .flow__stage { grid-template-columns: minmax(0, 1fr); }
  .flow__arrow svg { transform: rotate(90deg); }
}

/* ---------- Plus line (extra automations) ---------- */
.plus { margin-top: var(--space-sm); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-lg); border: var(--rule-hair) dashed var(--color-rule); display: grid; gap: var(--space-sm); }
.plus__lead { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.plus__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.plus__list li { display: inline-flex; align-items: baseline; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.plus__list li::before { content: "+"; color: var(--color-accent); font-weight: 700; }
@media (min-width: 60rem) { .plus { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-xl); } }

/* ---------- Missed call text back ---------- */
.mctb { padding-block: var(--space-2xl); }
.mctb__grid { display: grid; gap: var(--space-xl); align-items: center; }
.mctb h2 { font-size: var(--text-xl); max-width: 15ch; }
.mctb__sub { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 44ch; }
.mctb__visual { display: grid; gap: var(--space-sm); }
.mctb__card { padding: var(--space-md); border-radius: var(--radius-lg); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule-2); }
.mctb__inner { display: grid; gap: var(--space-md); padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-paper); max-width: 26rem; margin-inline: auto; }
.call { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; padding: 0.7rem 0.8rem; border-radius: var(--radius-md); background: var(--color-paper-3); }
.call__icon { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-accent); color: var(--color-accent-ink); transition: background-color 250ms var(--ease-out), color 250ms var(--ease-out); }
.call__icon svg { width: 1.1rem; height: 1.1rem; }
.call__who { font-weight: 600; font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.call__state { white-space: nowrap; }
.call__state { font-size: var(--text-xs); color: var(--color-accent); }
.call.is-missed .call__icon { background: var(--color-danger-soft); color: var(--color-danger); }
.call.is-missed .call__state { color: var(--color-danger); }
.call__busy { padding: 0.25rem 0.6rem; border-radius: var(--radius-pill); background: var(--color-paper-2); border: 1px solid var(--color-rule); font-size: 0.6875rem; color: var(--color-muted); white-space: nowrap; }
.mthread { display: grid; gap: var(--space-sm); }
.mmsg { position: relative; display: grid; }
.mmsg--out { justify-items: end; }
.mmsg--in { justify-items: start; }
.mbubble { max-width: 88%; padding: 0.65rem 0.85rem; border-radius: 1.1rem; font-size: 0.875rem; line-height: 1.45; }
.mmsg--out .mbubble { background: var(--color-bubble-out); border-bottom-right-radius: 0.35rem; }
.mmsg--in .mbubble { background: var(--color-bubble-in); border-bottom-left-radius: 0.35rem; }
.mlink { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.15em; overflow-wrap: anywhere; }
.mmeta { font-size: 0.6875rem; color: var(--color-muted); margin-top: 0.3rem; }
.mtyping { position: absolute; top: 0; right: 0; display: inline-flex; gap: 4px; padding: 0.75rem 0.85rem; border-radius: 1.1rem; background: var(--color-bubble-out); opacity: 0; }
.mtyping i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-ink-2); animation: blink 1.1s var(--ease-in-out) infinite; }
.mtyping i:nth-child(2) { animation-delay: 150ms; } .mtyping i:nth-child(3) { animation-delay: 300ms; }
.mbooked { justify-self: center; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; border-radius: var(--radius-pill); background: var(--color-accent-soft); border: 1px solid var(--color-accent-line); color: var(--color-accent); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.mbooked svg { width: 0.9rem; height: 0.9rem; }
.mctb__foot { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; justify-content: space-between; }
.mctb__custom { font-size: var(--text-sm); color: var(--color-muted); }
.summary__est { font-size: var(--text-xs); color: var(--color-muted); }
@media (max-width: 26rem) {
  .call { grid-template-columns: auto minmax(0, 1fr); }
  .call__busy { grid-column: 1 / -1; justify-self: start; }
}
@media (min-width: 60rem) {
  .mctb { padding-block: var(--space-2xl) var(--space-2xl); }
  .mctb__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-2xl); }
  .mctb__visual { order: -1; }
}

/* ---------- Footer · Ft5 statement ---------- */
.foot-stmt { padding-block: var(--space-2xl) max(var(--space-xl), env(safe-area-inset-bottom)); }
.foot-stmt__line { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 5vw, 3.25rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 26ch; text-wrap: balance; }
.foot-stmt__meta { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); align-items: baseline; justify-content: space-between; font-size: var(--text-sm); color: var(--color-muted); }
.foot-stmt__links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.foot-stmt__links a, .foot-stmt__links button { white-space: nowrap; color: var(--color-ink-2); display: inline-flex; align-items: center; min-height: 2.75rem; }
.foot-stmt__links .foot-ig { gap: 0.45rem; color: var(--color-accent); text-decoration: none; font-weight: 600; }
.foot-stmt__links .foot-ig:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.foot-stmt__links .foot-ig:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }
.foot-ig svg { width: 1.15rem; height: 1.15rem; flex: none; }

/* ---------- Dialogs ---------- */
dialog {
  width: min(100% - 1.5rem, 36rem); max-height: min(92dvh, 52rem);
  padding: 0; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg);
  background: var(--color-paper-2); color: var(--color-ink);
  box-shadow: 0 40px 100px -30px var(--color-shadow);
}
dialog[open] { animation: pop var(--dur-long) var(--ease-out); }
dialog::backdrop { background: var(--color-scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
.dlg__head { position: sticky; top: 0; z-index: var(--z-raised); display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); background: var(--color-paper-2); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.dlg__head h2 { font-size: var(--text-md); letter-spacing: -0.02em; }
.dlg__x { width: 2.75rem; height: 2.75rem; flex: none; border-radius: 50%; border: var(--rule-hair) solid var(--color-rule); background: transparent; color: var(--color-ink); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.dlg__x:hover { background: var(--color-paper-3); }
.dlg__body { padding: var(--space-lg); display: grid; gap: var(--space-md); }
.dlg__note { font-size: var(--text-xs); color: var(--color-muted); }
.summary { padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-paper-3); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs) var(--space-md); align-items: center; }
.summary__specs { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.5; }
.summary__price { font-family: var(--font-outlier); font-size: 2rem; font-weight: 500; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.terms { font-size: var(--text-sm); color: var(--color-ink-2); }
.terms h3 { font-size: var(--text-base); letter-spacing: -0.01em; color: var(--color-ink); margin-top: var(--space-xs); }
.terms ul { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--space-xs); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; }
  .hero__load { animation: fade 150ms linear forwards; transform: none; }
  @keyframes fade { to { opacity: 1; } }
  .btn__spin { animation-iteration-count: infinite !important; animation-duration: 1.2s !important; }
  .quote-card { transform: none; }
}.ctl { display: grid; gap: var(--space-xs); border: 0; margin: 0; padding: 0; min-width: 0; }
.ctl__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.ctl__label, .ctl legend { font-weight: 600; font-size: var(--text-sm); padding: 0; }
.ctl__value { font-variant-numeric: tabular-nums; color: var(--color-accent); font-weight: 600; }
.ctl__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2.75rem; background: transparent; cursor: pointer; --fill: 33%; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(to right, var(--color-accent) var(--fill), var(--color-paper-4) var(--fill)); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: var(--color-paper-4); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--color-accent); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.5rem; height: 1.5rem; margin-top: -9px; border-radius: 50%; background: var(--color-ink); border: 3px solid var(--color-accent); transition: transform var(--dur-micro) var(--ease-out); }
input[type="range"]::-moz-range-thumb { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--color-ink); border: 3px solid var(--color-accent); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-focus); outline-offset: 3px; }
input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.range__ends { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }

.stepper { display: grid; gap: var(--space-xs); min-width: 0; }
.stepper__box { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; align-items: center; background: var(--color-paper-3); border-radius: var(--radius-md); padding: 0.2rem; }
.stepper__btn { height: 2.5rem; border: 0; border-radius: 0.75rem; background: transparent; color: var(--color-ink); font-size: 1.25rem; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.stepper__btn:hover:not(:disabled) { background: var(--color-paper-4); }
.stepper__btn:active:not(:disabled) { transform: scale(0.94); }
.stepper__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.stepper__val { text-align: center; font-weight: 600; font-size: var(--text-md); font-variant-numeric: tabular-nums; }

.seg { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 0.25rem; padding: 0.25rem; background: var(--color-paper-3); border-radius: var(--radius-md); }
.seg label { position: relative; display: block; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 0.4rem; border-radius: 0.75rem; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.seg input:hover + span { color: var(--color-ink); }
.seg input:checked + span { background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; }
.seg input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.seg--freq { --cols: 2; }
.ctl__hint { font-size: var(--text-xs); color: var(--color-muted); min-height: 1.2em; }

@media (min-width: 30rem) { .seg--freq { --cols: 4; } }

/* ======================================================================
   FENCEBOOK ADDITIONS
   ====================================================================== */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.hero__load { animation-fill-mode: both; }
.hero h1 { max-width: 14ch; }
.hero__sub { max-width: 38ch; }
.btn--sm { min-height: 2.5rem; padding: 0 var(--space-md); }

/* live (contractor) mode */
.live-head { display: none; }
body.is-live [data-demo-only] { display: none !important; }
body:not(.is-live) [data-live-only] { display: none !important; }
body.is-live .live-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-md); }
.live-head__brand { display: inline-flex; align-items: center; gap: var(--space-sm); font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; min-width: 0; }
.live-head__brand img { height: 2rem; width: auto; }
.live-head__brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.is-live .demo { padding-top: var(--space-sm); }
body.is-live main { min-height: 100svh; }
body.is-live .demo__head { margin-bottom: 0; }

/* ---------- Demo / builder ---------- */
.demo { padding-block: var(--space-2xl); scroll-margin-top: 4.5rem; }
.demo__head p { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 48ch; }
.demo__head h2 { font-size: var(--text-xl); max-width: 22ch; }
.demo__grid { margin-top: var(--space-xl); display: grid; gap: var(--space-lg); align-items: start; }

.viz { background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-lg); overflow: hidden; }
.viz__label { display: flex; align-items: center; gap: var(--space-xs); min-height: 2.5rem; padding: 0.5rem var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-2); font-family: var(--font-outlier); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); line-height: 1.3; }
.viz__label::before { content: ""; flex: none; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--color-accent); }
.viz__label b { font-weight: 500; color: var(--color-ink); }
.stage { position: relative; height: clamp(17rem, 46svh, 24rem); touch-action: pan-y; background: radial-gradient(75% 80% at 50% 40%, var(--stage-a), var(--stage-b)); }
.stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; touch-action: pan-y; pointer-events: none; }
.stage__status { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.stage.is-ready .stage__status { display: none; }
.stage__status .btn__spin { display: block; margin: 0 auto var(--space-xs); color: var(--color-accent); }
.stage.is-failed .btn__spin { display: none; }

.price { position: sticky; bottom: max(var(--space-xs), env(safe-area-inset-bottom)); z-index: var(--z-raised); padding: var(--space-md); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-md); align-items: center; background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); box-shadow: 0 -18px 40px -24px var(--color-shadow); }
.price__label { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }
.tag { display: inline-flex; align-items: center; padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); border: var(--rule-hair) solid var(--color-accent-line); color: var(--color-accent); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; }
.price__num { font-family: var(--font-outlier); font-weight: 500; font-size: clamp(1.15rem, 5.6vw, 1.75rem); line-height: 1.05; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price__num.is-text { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; font-size: clamp(1.2rem, 5vw, 1.5rem); }
.price__per { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-2xs); line-height: 1.35; }
.price .btn { align-self: center; }
.breakdown { grid-column: 1 / -1; }
.breakdown summary { min-height: 2.5rem; cursor: pointer; font-size: var(--text-sm); color: var(--color-ink-2); padding-block: var(--space-2xs); list-style: none; display: inline-flex; gap: 0.4rem; align-items: center; }
.breakdown summary::-webkit-details-marker { display: none; }
.breakdown summary::after { content: "+"; color: var(--color-accent); font-weight: 600; }
.breakdown[open] summary::after { content: "\2212"; }
.breakdown dl { margin: var(--space-xs) 0 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem var(--space-md); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.breakdown dt { color: var(--color-muted); }
.breakdown dd { margin: 0; text-align: right; }
.breakdown .total { border-top: var(--rule-hair) solid var(--color-rule); padding-top: 0.4rem; color: var(--color-ink); font-weight: 600; }
.breakdown__note { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--color-muted); margin-top: 0.2rem; }

/* survey card */
.controls { display: grid; gap: var(--space-md); align-content: start; padding: var(--space-lg); background: var(--color-paper-2); border-radius: var(--radius-lg); border: var(--rule-hair) solid var(--color-rule-2); min-width: 0; }
.survey__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); }
.survey__count { font-weight: 500; color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.progress { height: 4px; border-radius: 4px; background: var(--color-paper-4); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--color-accent); transition: width var(--dur-long) var(--ease-out); }
.survey__view { position: relative; min-width: 0; }
.step { display: grid; gap: var(--space-md); align-content: start; min-width: 0; }
.step__q { font-size: var(--text-lg); letter-spacing: -0.03em; outline: none; }
.step__sub { margin-top: calc(var(--space-xs) * -1); color: var(--color-muted); font-size: var(--text-sm); line-height: 1.45; }
.survey__nav { display: flex; gap: var(--space-sm); justify-content: space-between; align-items: center; }
.survey__nav .btn { min-height: 2.75rem; }
.survey__nav .btn[hidden] { display: none; }
.survey__nav .spacer { flex: 1; }
.seg--stack { --cols: 2; }
.seg--4 { --cols: 2; }
.ctl__hint { font-size: var(--text-xs); color: var(--color-muted); min-height: 1.2em; line-height: 1.4; }
.ctl__hint:empty { display: none; }
.q-note { font-size: var(--text-xs); color: var(--color-muted); }
.swatch { width: 0.9rem; height: 0.9rem; border-radius: 50%; margin-right: 0.45rem; border: 1px solid oklch(100% 0 0 / 0.25); flex: none; }
.gate-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.stepper__sub { font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }

/* footage */
.foot-pill { display: flex; align-items: center; gap: var(--space-sm); width: 100%; min-height: 3.5rem; padding: 0.7rem var(--space-md); border-radius: var(--radius-md); border: var(--rule-hair) solid var(--color-accent-line); background: var(--color-accent-soft); color: var(--color-ink); text-align: left; cursor: pointer; font-weight: 600; font-size: var(--text-sm); }
.foot-pill__dot { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-ink); display: grid; place-items: center; }
.foot-pill__dot svg { width: 0.8rem; height: 0.8rem; }
.foot-pill small { display: block; font-weight: 400; color: var(--color-muted); font-size: var(--text-xs); }
.foot-know { justify-self: start; min-height: 2.5rem; padding: 0; background: none; border: 0; color: var(--color-muted); font-size: var(--text-sm); text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 0.2em; cursor: pointer; }
.foot-know:hover { color: var(--color-ink); text-decoration-color: currentColor; }
.foot-input { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: var(--space-sm); align-items: center; }
.numfield { display: flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0 0.75rem; border-radius: var(--radius-sm); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); }
.numfield:focus-within { border-color: var(--color-accent); }
.numfield input { width: 100%; min-width: 0; border: 0; background: transparent; font-size: 1rem; font-variant-numeric: tabular-nums; text-align: right; outline: none; padding: 0; }
.numfield span { color: var(--color-muted); font-size: var(--text-sm); }

/* book step */
.book-fields { display: grid; gap: var(--space-xs) var(--space-sm); grid-template-columns: minmax(0, 1fr); }
.book-fields .field label { font-size: var(--text-xs); color: var(--color-ink-2); }
.book-fields .field input { min-height: 2.75rem; padding: 0.55rem 0.8rem; }
.book-fields .field__err { min-height: 1rem; line-height: 1rem; }
.picker legend { font-weight: 600; font-size: var(--text-sm); padding: 0; margin-bottom: var(--space-xs); }
.picker { border: 0; padding: 0; margin: 0; min-width: 0; }
.cal__legend i { display: inline-block; }
.slot { min-height: 2.75rem; padding: 0.35rem 0.7rem; }
.demo-hint { font-size: var(--text-xs); color: var(--color-muted); }

/* behind the scenes */
.bts { padding-block: var(--space-xl) var(--space-2xl); }
.bts h2, .vs h2 { font-size: var(--text-xl); max-width: 20ch; }
.bts__sub { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 46ch; }
.bts__grid { margin-top: var(--space-xl); display: grid; gap: var(--space-sm); grid-template-columns: minmax(0, 1fr); }
.bts__card { padding: var(--space-lg); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-lg); display: grid; gap: var(--space-md); align-content: start; }
.bts__num { font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-accent); }
.bts__card h3 { font-size: var(--text-md); letter-spacing: -0.02em; line-height: 1.2; }
.bts__card p { color: var(--color-muted); font-size: var(--text-sm); }
.bts__mock { padding: var(--space-sm); border-radius: var(--radius-md); background: var(--color-paper); display: grid; gap: 0.4rem; align-content: start; }
.bts__from { font-size: 0.6875rem; color: var(--color-muted); }
.bts__mock .mbubble { max-width: 100%; font-size: 0.8125rem; }
.bts__mock .mmsg--out .mbubble { border-bottom-right-radius: 0.35rem; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.1rem 0.6rem; font-size: 0.75rem; }
.kv dt { color: var(--color-muted); }
.kv dd { margin: 0; color: var(--color-ink); font-weight: 500; }
@media (min-width: 52rem) { .bts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* beats a form */
.vs { padding-block: var(--space-2xl); }
.vs__grid { margin-top: var(--space-xl); display: grid; gap: var(--space-sm); grid-template-columns: minmax(0, 1fr); }
.vs__side { padding: var(--space-lg); border-radius: var(--radius-lg); border: var(--rule-hair) solid var(--color-rule-2); display: grid; gap: var(--space-md); align-content: start; }
.vs__k { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.vs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.vs__list li { padding: 0.4rem 0.85rem; border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink-2); font-size: var(--text-sm); white-space: nowrap; }
.vs__side--before .vs__list li { color: var(--color-muted); }
.vs__side--after { border-color: var(--color-accent-line); background: var(--color-accent-soft); }
.vs__side--after .vs__k { color: var(--color-accent); }
.vs__side--after .vs__list li { background: var(--color-paper-2); color: var(--color-ink); border: var(--rule-hair) solid var(--color-accent-line); }
.vs__line { margin-top: var(--space-xl); font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); letter-spacing: -0.02em; max-width: 30ch; line-height: 1.15; text-wrap: balance; }
@media (min-width: 52rem) { .vs__grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); } }

/* dialog tweaks */
dialog.demo-dlg { width: min(100% - 1.5rem, 28rem); }
.demo-dlg .dlg__body { gap: var(--space-md); }
.demo-dlg p { color: var(--color-ink-2); }
.dlg__actions { display: grid; gap: var(--space-xs); }
.field select { width: 100%; }
.get__perks { margin: var(--space-lg) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.get__perks li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xs); align-items: baseline; }
.get__perks li::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 2px; background: var(--color-accent); transform: translateY(-0.1em); }

/* ---------- Desktop: the whole demo fits on one screen ---------- */
@media (min-width: 60rem) {
  .demo__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-xl); grid-template-areas: "controls viz" "controls price"; grid-template-rows: auto auto; row-gap: var(--space-sm); }
  .controls { grid-area: controls; padding: var(--space-xl); }
  .viz { grid-area: viz; }
  .price { grid-area: price; position: static; box-shadow: none; background: var(--color-paper-2); border-color: var(--color-rule-2); padding: var(--space-md) var(--space-xl); grid-template-columns: minmax(0, 1fr) auto; }
  .stage { height: min(calc(100svh - 17rem), 34rem); min-height: 18rem; }
  .price__num { font-size: clamp(1.75rem, 1.2vw + 1.2rem, 2.375rem); }
  .price__num.is-text { font-size: 1.75rem; }
  .survey__nav { margin-top: var(--space-xs); }
  .seg--4 { --cols: 4; }
  .price .breakdown { grid-column: 2; grid-row: 1; justify-self: end; }
  .price__label { grid-column: 1; grid-row: 1; }
  .price > div:nth-child(2) { grid-column: 1; grid-row: 2; min-width: 0; }
  .price .btn { grid-column: 2; grid-row: 2; }
  .breakdown[open] dl { position: absolute; left: 0; right: 0; bottom: calc(100% + var(--space-xs)); z-index: var(--z-dropdown); margin: 0; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule); box-shadow: 0 24px 48px -20px var(--color-shadow); animation: pop var(--dur-short) var(--ease-out); }
  .price { position: relative; }
  .breakdown { position: static; }
}
@media (min-width: 60rem) and (min-height: 36rem) {
  .demo { padding-top: var(--space-lg); }
  .demo__fit { display: flex; flex-direction: column; height: calc(100svh - 7.25rem); min-height: 35rem; max-height: 60rem; }
  body.is-live .demo__fit { height: calc(100svh - 5.5rem); }
  .demo__head { flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2xl); }
  .demo__head h2 { max-width: 20ch; }
  .demo__head p { margin-top: 0; max-width: 44ch; padding-bottom: 0.3rem; }
  .demo__grid { flex: 1; min-height: 0; margin-top: var(--space-lg); grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; }
  .controls { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--color-rule) transparent; grid-template-rows: auto auto 1fr auto auto; align-content: stretch; }
  .viz { display: flex; flex-direction: column; min-height: 0; }
  .stage { flex: 1; height: auto; min-height: 0; }
}
@media (min-width: 60rem) and (min-height: 36rem) and (max-height: 56rem) {
  .demo__head h2 { font-size: var(--text-lg); max-width: none; }
  .demo__head p { font-size: var(--text-sm); }
  .demo__grid { margin-top: var(--space-md); }
  .controls { padding-block: var(--space-md); gap: var(--space-sm); }
}

/* ---------- Phones + tablets: preview pinned on top, price pinned at the bottom ---------- */
@media (max-width: 59.99rem) {
  .viz { position: sticky; top: 4.4rem; z-index: var(--z-raised); box-shadow: 0 16px 32px -20px var(--color-shadow); }
  .stage { height: clamp(10rem, 27svh, 16rem); }
  .viz__label { min-height: 2.1rem; padding-block: 0.3rem; }
  .price { padding: var(--space-sm) var(--space-md); row-gap: 0.1rem; }
  .price__label { grid-column: 1; grid-row: 1; white-space: nowrap; }
  .price .breakdown { grid-column: 2; grid-row: 1; justify-self: end; }
  .price .breakdown summary { font-size: var(--text-xs); padding: 0.2rem 0; min-height: 2rem; }
  .price > div:nth-child(2) { grid-column: 1; grid-row: 2; min-width: 0; }
  .price .btn { grid-column: 2; grid-row: 2; min-height: 3rem; padding: 0 var(--space-md); font-size: var(--text-sm); }
  .price__per { display: none; }
  .breakdown[open] dl { position: absolute; left: 0; right: 0; bottom: calc(100% + var(--space-xs)); margin: 0; z-index: var(--z-dropdown); padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule); box-shadow: 0 -18px 40px -20px var(--color-shadow); max-height: 50svh; overflow-y: auto; }
  .price { position: sticky; }
  .breakdown { position: static; }
  .survey__nav .survey__next { display: none; }
  .survey__nav { justify-content: flex-start; }
  .demo { padding-top: var(--space-xl); }
  .controls { padding: var(--space-md); scroll-margin-top: 14rem; }
}
@media (max-width: 29.99rem) {
  .gate-row { grid-template-columns: minmax(0, 1fr); }
  .stepper { grid-template-columns: minmax(0, 1fr) 9.5rem; align-items: center; }
  .seg span { font-size: var(--text-sm); }
}
@media (max-width: 40rem) { .price__lead { display: none; } }
@media (max-width: 22rem) { .price__label .tag { display: none; } }
@media (min-width: 48rem) and (max-width: 59.99rem) {
  .hero h1 { max-width: none; }
  .hero__ctas { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 22rem; }
  .hero__ctas .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---------- animation helpers (booking flow + missed call) ---------- */
.fx { opacity: 0; transform: translateY(8px); transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out); }
.fx.on { opacity: 1; transform: none; }
.wk__ev--new.fx { transform: translateY(-14px) scale(0.6); }
.wk__ev--new.fx.on { transform: none; }
.tap { transition: transform 700ms var(--ease-in-out), opacity 300ms var(--ease-out), scale 150ms var(--ease-out); scale: 1; box-shadow: 0 0 0 6px color-mix(in oklch, var(--color-accent) 12%, transparent); }
.tap.press { scale: 0.7; }
.mslot.dim { opacity: 0.3; }
.mslot { transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out), opacity 300ms var(--ease-out); }
.mbook { transition: transform 150ms var(--ease-out); }
.mbook.press { transform: scale(0.96); }
.call__icon.ring { animation: ring 0.55s ease-in-out 0s 4 alternate; }
@keyframes ring { from { transform: scale(1); } to { transform: scale(1.14); } }
.mtyping { transition: opacity 250ms var(--ease-out); }
.chip.is-set { border-color: var(--color-accent-line); background: var(--color-accent-soft); }
.chip.is-set .chip__check { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.chip input[type="file"] { font-size: 0; }
.get, .vs, .bts, .after, .mctb { scroll-margin-top: 4.5rem; }
.chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 22rem) { .chips { grid-template-columns: minmax(0, 1fr); } }
.chip__name { white-space: normal; }

/* survey card: roomier on desktop so it never looks empty */
.survey__note { font-size: var(--text-xs); color: var(--color-muted); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-2); }
@media (min-width: 60rem) {
  .step { gap: var(--space-lg); }
  .step__q { font-size: var(--text-xl); }
  .step__sub { font-size: var(--text-base); margin-top: calc(var(--space-sm) * -1); }
  .step .seg span { min-height: 3.25rem; font-size: var(--text-base); }
  .step .ctl__hint { font-size: var(--text-sm); }
  .step .stepper__box { padding: 0.3rem; }
  .step .stepper__btn { height: 2.75rem; }
}

/* polish */
.viz__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; padding-left: calc(var(--space-md) + 0.9rem); position: relative; }
.viz__label::before { position: absolute; left: var(--space-md); top: 50%; transform: translateY(-50%); }
.price__num { overflow: hidden; }
@media (min-width: 60rem) {
  .price .btn { min-height: 3.25rem; padding: 0 var(--space-lg); font-size: var(--text-sm); }
  .price__num { font-size: clamp(1.5rem, 0.9vw + 1.1rem, 1.9rem); }
}
@media (max-width: 59.99rem) { .price__num { font-size: clamp(1rem, 4.7vw, 1.5rem); } .price__num.is-text { font-size: clamp(1.05rem, 4.6vw, 1.4rem); } }

/* success / confirm states use green, everything else uses the cedar accent */
.mdone, .mbooked { background: var(--color-success-soft); border-color: var(--color-success-line); color: var(--color-success); }
.req__status, .owner__note, .done__when, .check { color: var(--color-success); }
.req__btn--ok.is-done { color: var(--color-success); border-color: var(--color-success-line); }
.wk__ev--new { background: var(--color-success); color: #0f1a14; }
.mday.is-sel, .mslot.is-sel { }
.call__state { color: var(--color-success); }
.call.is-missed .call__state { color: var(--color-danger); }
.call__icon { background: var(--color-success); color: #0f1a14; }
.call.is-missed .call__icon { background: var(--color-danger-soft); color: var(--color-danger); }
.quote-card__live { color: var(--color-success); }
.quote-card__live::before { background: var(--color-success); }
.viz__label::before { background: var(--color-accent); }

.price__num, .quote-card__price { color: var(--color-accent); }
.ctl__value { color: var(--color-accent); }

.live-head__brand { text-decoration: none; }

/* ======================================================================
   MAKEOVER: contractor grade, consumer friendly
   ====================================================================== */
:root {
  --font-display: "Geist", ui-sans-serif, system-ui, sans-serif;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.125rem;
  --color-line-2: #3A3F46;
  --color-card-2: #23262B;
  --color-hover-line: #4A4F57;
  --color-bar: #1C1E22;
  --color-well: #1A1C1F;
  --color-accent-text: var(--color-accent);
  --stage-a: #2A2D31;
  --stage-b: #1F2226;
  --shadow-bar: rgb(0 0 0 / 0.8);
  --text-h2: clamp(2rem, 2.2vw + 1.1rem, 2.875rem);
}
body { background: var(--color-paper); }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.035em; line-height: 1.06; }
h3 { letter-spacing: -0.02em; }

/* eyebrow labels */
.eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 var(--space-md); font-family: var(--font-outlier); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); }
.eyebrow::before { content: ""; width: 1.25rem; height: 2px; border-radius: 2px; background: currentColor; }

/* buttons */
.btn { border-radius: var(--radius-md); min-height: 2.875rem; padding: 0 1.25rem; letter-spacing: -0.005em; }
.btn--lg { min-height: 3.25rem; padding: 0 1.5rem; font-size: 1rem; }
.btn--sm { min-height: 2.5rem; padding: 0 1rem; font-size: 0.9375rem; }
.btn--fill { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 10px 24px -14px color-mix(in srgb, var(--color-accent) 75%, transparent); }
.btn--line { --btn-bg: var(--color-paper-2); --btn-bd: var(--color-line-2); }
.btn__arrow { width: 1rem; height: 1rem; transition: transform var(--dur-short) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn--line:hover { --btn-bg: var(--color-paper-3); --btn-bd: var(--color-hover-line); }
  .btn:hover .btn__arrow { transform: translateX(3px); }
}
.btn--fill:disabled { --btn-bg: var(--color-paper-3); --btn-fg: var(--color-muted); --btn-bd: var(--color-rule); box-shadow: none; opacity: 1; }

/* header */
.site-head { position: sticky; top: 0; z-index: var(--z-sticky); background: rgb(22 24 27 / 0.8); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid transparent; transition: border-color var(--dur-short) var(--ease-out); padding-top: env(safe-area-inset-top); }
.site-head.is-scrolled { border-bottom-color: var(--color-rule); }
.site-head__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); height: 4rem; }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.03em; gap: 0.6rem; }
.wordmark__mark { width: 2rem; height: 2rem; padding: 0.3rem; border-radius: 0.55rem; background: var(--color-accent); color: var(--color-accent-ink); }
.wordmark__mark path:last-child { stroke: var(--color-accent); }
.wordmark__by { font-size: 0.8125rem; font-weight: 500; color: var(--color-muted); letter-spacing: 0; padding-left: 0.6rem; border-left: 1px solid var(--color-rule); }
.site-nav { display: flex; align-items: center; gap: 1.5rem; }
.site-nav__link { font-size: 0.9375rem; font-weight: 500; color: var(--color-ink-2); text-decoration: none; padding: 0.5rem 0; }
.site-nav__link:hover { color: var(--color-ink); }
@media (max-width: 47.99rem) { .wordmark__by, .site-nav__link--wide { display: none; } .site-nav { gap: 1rem; } }

/* hero */
.hero { position: relative; overflow: hidden; padding-block: 3.5rem 4rem; }
.hero__bg { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(36rem 26rem at 80% 35%, rgb(224 122 47 / 0.14), transparent 70%),
    linear-gradient(rgb(255 255 255 / 0.03) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgb(255 255 255 / 0.03) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 95%); mask-image: linear-gradient(to bottom, #000 30%, transparent 95%); }
.hero__grid { position: relative; gap: 3rem; }
.hero h1 { font-size: clamp(2.5rem, 4vw + 1.1rem, 4.25rem); max-width: 13ch; line-height: 1.02; letter-spacing: -0.045em; }
.hero__sub { margin-top: 1.25rem; font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem); max-width: 36ch; line-height: 1.55; }
.hero__ctas { margin-top: 2rem; gap: 0.75rem; }
.hero__trust { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; font-size: 0.9375rem; color: var(--color-ink-2); }
.hero__trust li, .get__perks li, .after__points li { position: relative; }
.hero__trust li { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__trust li::before, .get__perks li::before, .after__points li::before {
  content: ""; flex: none; width: 1.125rem; height: 1.125rem; border-radius: 50%; transform: none;
  background: var(--color-accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3 7 10.8l4.5-5' fill='none' stroke='%23E07A2F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
  box-shadow: inset 0 0 0 1px var(--color-accent-line);
}
.get__perks li, .after__points li { align-items: start; }
.get__perks li::before, .after__points li::before { margin-top: 0.2rem; }

.hero__visual { position: relative; }
.quote-card { width: 100%; max-width: 32rem; padding: 0; gap: 0; transform: none; overflow: hidden; border-radius: 1.25rem; border: 1px solid var(--color-rule); background: var(--color-paper-2); box-shadow: 0 50px 90px -45px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(255 255 255 / 0.02) inset; }
.quote-card__img { padding: 1.5rem 1.5rem 0.75rem; background: radial-gradient(75% 85% at 50% 40%, #2A2D31, #1F2226); }
.quote-card__img img { width: 100%; height: auto; }
.quote-card__body { display: grid; gap: 0.9rem; padding: 1.25rem 1.5rem 1.5rem; border-top: 1px solid var(--color-rule); }
.quote-card__specs span { padding: 0.25rem 0.65rem; border-radius: 0.45rem; background: var(--color-paper-3); border: 1px solid var(--color-rule); font-size: 0.8125rem; }
.quote-card__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.quote-card__price { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1.2vw + 1rem, 1.875rem); letter-spacing: -0.03em; white-space: nowrap; }
.quote-card__book { min-height: 2.75rem; padding: 0 1.1rem; border-radius: var(--radius-md); font-size: 0.875rem; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22); }
.hero-note { position: absolute; top: 1rem; left: 1rem; display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.95rem 0.65rem 0.7rem; border-radius: 0.875rem; background: rgb(31 34 38 / 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--color-line-2); box-shadow: 0 24px 40px -24px rgb(0 0 0 / 0.9); }
.hero-note__icon { width: 2rem; height: 2rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--color-success-soft); color: var(--color-success); box-shadow: inset 0 0 0 1px var(--color-success-line); }
.hero-note__icon svg { width: 1rem; height: 1rem; }
.hero-note__t { font-size: 0.875rem; font-weight: 600; line-height: 1.25; }
.hero-note__s { font-size: 0.75rem; color: var(--color-muted); line-height: 1.3; white-space: nowrap; }
@media (min-width: 48rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 3rem; }
  .quote-card { justify-self: end; margin: 0; }
  .hero__ctas { display: flex; max-width: none; }
  .hero__ctas .btn { width: auto; }
}
@media (min-width: 60rem) {
  .hero { padding-block: 5.5rem 6rem; }
  .hero-note { top: 2.25rem; left: -2rem; }
}
@media (max-width: 29.99rem) {
  .hero { padding-top: 2.5rem; }
  .hero__trust { flex-direction: column; gap: 0.5rem; }
  .quote-card__img { padding: 1rem 1rem 0.5rem; }
  .quote-card__body { padding: 1rem 1.1rem 1.15rem; }
  .quote-card__book { width: 100%; }
  .hero-note { top: 0.75rem; left: 0.75rem; }
}

/* section rhythm + headings (one left edge, one size) */
.sec-head { max-width: 44rem; }
.sec-head p:not(.eyebrow) { margin-top: 1rem; }
.demo__head h2, .bts h2, .after h2, .mctb h2, .vs h2, .get h2 { font-size: var(--text-h2); max-width: 18ch; }
.bts__sub, .after__sub, .mctb__sub, .get__sub, .demo__head p { font-size: 1.0625rem; color: var(--color-ink-2); line-height: 1.6; }
.bts, .after, .mctb, .vs, .get { padding-block: 4.5rem; }
.bts, .mctb { background: #191B1F; border-block: 1px solid var(--color-rule); }
@media (min-width: 60rem) { .bts, .after, .mctb, .vs, .get { padding-block: 6.5rem; } }

/* ---------- builder ---------- */
.demo { padding-block: 4rem 4.5rem; scroll-margin-top: 4rem; }
.demo__head p { margin-top: 1rem; max-width: 52ch; }
.demo__grid { margin-top: 2rem; }
.controls, .viz, .price, .bts__card, .form-card, .flow__stage, .mctb__card, .vs__side { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03); }
.controls { border-color: var(--color-rule); }
.survey__top { align-items: center; }
.survey__count { font-family: var(--font-outlier); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); font-weight: 500; }
.progress { height: 6px; border-radius: 6px; background: var(--color-paper-4); }
.progress i { border-radius: 6px; }
.step__q { font-size: clamp(1.5rem, 1vw + 1.1rem, 2rem); letter-spacing: -0.035em; }
.step__sub { font-size: 0.9375rem; }
.ctl__hint { font-size: 0.8125rem; }
.survey__note { border-top-color: var(--color-rule); }

/* option cards */
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
.opts--list { grid-template-columns: minmax(0, 1fr); }
.opt { position: relative; display: block; min-width: 0; }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.opt__box { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; min-height: 4rem; padding: 0.7rem 0.85rem; border-radius: 0.875rem; border: 1px solid var(--color-rule); background: var(--color-card-2); transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.opt__icon { width: 2.75rem; height: auto; color: var(--color-muted); transition: color var(--dur-short) var(--ease-out); }
.opt__swatch { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid rgb(255 255 255 / 0.2); box-shadow: inset 0 -4px 8px rgb(0 0 0 / 0.25); }
.opt__text { min-width: 0; }
.opt__name { display: block; font-weight: 600; font-size: 0.9375rem; color: var(--color-ink); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opt__sub { display: block; margin-top: 0.15rem; font-size: 0.8125rem; color: var(--color-muted); line-height: 1.3; font-variant-numeric: tabular-nums; }
.opt__tick { width: 1.25rem; height: 1.25rem; flex: none; border-radius: 50%; border: 1.5px solid var(--color-hover-line); display: grid; place-items: center; color: transparent; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.opt__tick svg { width: 0.7rem; height: 0.7rem; }
.opt:hover .opt__box { border-color: var(--color-hover-line); background: var(--color-paper-3); }
.opt input:checked + .opt__box { border-color: var(--color-accent); background: var(--color-accent-soft); box-shadow: 0 0 0 1px var(--color-accent) inset; }
.opt input:checked + .opt__box .opt__icon { color: var(--color-accent); }
.opt input:checked + .opt__box .opt__sub { color: var(--color-ink-2); }
.opt input:checked + .opt__box .opt__tick { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.opt input:focus-visible + .opt__box { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.opt:active .opt__box { transform: scale(0.99); }
@media (max-width: 22rem) { .opt__icon { width: 2.2rem; } .opt__box { gap: 0.5rem; padding-inline: 0.6rem; } }
@media (min-width: 60rem) {
  .opts--4 .opt__box { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "icon tick" "text text"; align-items: start; gap: 0.9rem 0.5rem; min-height: 8rem; padding: 1rem 1.1rem; }
  .opts--4 .opt__icon { grid-area: icon; width: 3.75rem; }
  .opts--4 .opt__text { grid-area: text; align-self: end; }
  .opts--4 .opt__tick { grid-area: tick; }
  .opts--4 .opt__name { font-size: 1.0625rem; }
  .opt__box { min-height: 4.5rem; padding: 0.85rem 1rem; }
  .opts--list .opt__icon, .opts--2 .opt__icon { width: 3.25rem; }
}
@media (min-width: 60rem) and (max-height: 56rem) { .opts--4 .opt__box { min-height: 6.5rem; padding: 0.8rem 1rem; } .opts--4 .opt__icon { width: 3.25rem; } }

/* steppers + extras + footage */
.stepper__box { background: var(--color-card-2); border: 1px solid var(--color-rule); border-radius: var(--radius-md); padding: 0.25rem; }
.stepper__btn { border-radius: 0.55rem; background: var(--color-paper-4); font-weight: 500; }
.stepper__btn:hover:not(:disabled) { background: var(--color-line-2); }
.extras__toggle { border-style: solid; border-color: var(--color-rule); background: var(--color-card-2); border-radius: 0.875rem; }
.chip { border-radius: var(--radius-md); background: var(--color-card-2); border: 1px solid var(--color-rule); }
.foot-pill { border-radius: 0.875rem; }
.numfield { border-radius: var(--radius-sm); }

/* preview + price joined into one unit */
.viz { border-color: var(--color-rule); }
.viz__label { background: var(--color-bar); border-bottom-color: var(--color-rule); }
.price__num, .price__num.is-text { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; }
.tag { border-radius: 0.4rem; }
@media (min-width: 60rem) {
  .demo__grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); column-gap: 1.25rem; row-gap: 0; }
  .viz { border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .price { border-radius: 0 0 var(--radius-lg) var(--radius-lg); border-color: var(--color-rule); border-top: 1px solid var(--color-rule); background: var(--color-bar); padding: 1rem 1.5rem 1.1rem; }
  .controls { padding: 1.75rem 1.75rem 1.5rem; }
}
@media (min-width: 60rem) and (min-height: 36rem) {
  .demo { padding-top: 2rem; }
  .demo__fit { height: calc(100svh - 6.5rem); }
  .demo__head { display: block; }
  .demo__head p { margin-top: 0.6rem; max-width: 60ch; padding: 0; }
  .demo__head h2 { max-width: none; }
  .demo__grid { margin-top: 1.5rem; }
}
@media (min-width: 60rem) and (min-height: 36rem) and (max-height: 56rem) {
  .demo__head .eyebrow { margin-bottom: 0.5rem; }
  .demo__head h2 { font-size: 1.875rem; }
  .demo__grid { margin-top: 1.1rem; }
}
@media (max-width: 59.99rem) {
  .viz { top: 4.4rem; }
  body.is-live .viz { top: 0.5rem; }
  .price { background: var(--color-card-2); border-color: var(--color-line-2); box-shadow: 0 -12px 40px -16px var(--shadow-bar); }
  .demo { padding-top: 3rem; }
}

/* behind the scenes */
.bts__grid { margin-top: 2.5rem; gap: 1rem; }
.bts__card { padding: 1.5rem; border-color: var(--color-rule); gap: 1rem; }
.bts__num { justify-self: start; display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.6rem; background: var(--color-accent-soft); box-shadow: inset 0 0 0 1px var(--color-accent-line); font-size: 0.8125rem; font-weight: 600; }
.bts__card h3 { font-size: 1.1875rem; line-height: 1.3; }
.bts__mock { padding: 0.875rem; border: 1px solid var(--color-rule); }

/* booking + missed calls */
.after__grid, .mctb__grid { gap: 2.5rem; }
.after__points li { display: flex; gap: 0.7rem; }
.seg { border-radius: var(--radius-md); background: var(--color-card-2); border: 1px solid var(--color-rule); }
.seg span { border-radius: 0.55rem; }
.flow__stage, .mctb__card { border-color: var(--color-rule); }
.flow__panel, .mctb__inner { border: 1px solid var(--color-rule); }
.tools__list li { border-radius: 0.45rem; }
.flow__replay { border-radius: 0.55rem; }

/* why it beats a form */
.vs__grid { margin-top: 2.5rem; gap: 1rem; }
.vs__side { padding: 1.75rem; gap: 1.25rem; border-color: var(--color-rule); background: var(--color-paper-2); }
.vs__k { font-size: 0.8125rem; font-family: var(--font-outlier); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; }
.vs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1.25rem; }
.vs__side--before .vs__list { grid-template-columns: minmax(0, 1fr); }
.vs__list li, .vs__side--after .vs__list li { display: flex; align-items: center; gap: 0.65rem; padding: 0; background: none; border: 0; font-size: 1rem; color: var(--color-ink); white-space: normal; }
.vs__list li::before { content: ""; flex: none; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3 7 10.8l4.5-5' fill='none' stroke='%2316181B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.85rem no-repeat; }
.vs__side--before .vs__list li { color: var(--color-muted); }
.vs__side--before .vs__list li::before { background: var(--color-paper-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5l5 5m0-5l-5 5' fill='none' stroke='%239AA0A6' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 0.85rem no-repeat; box-shadow: inset 0 0 0 1px var(--color-rule); }
.vs__side--after { border-color: var(--color-accent-line); background: linear-gradient(180deg, rgb(224 122 47 / 0.12), rgb(224 122 47 / 0.04)); }
.vs__line { font-size: clamp(1.375rem, 1vw + 1rem, 1.75rem); font-weight: 700; margin-top: 2.5rem; }
.plus { border-style: solid; border-color: var(--color-rule); background: var(--color-paper-2); border-radius: var(--radius-lg); }
@media (min-width: 52rem) { .vs__grid { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); } }
@media (min-width: 72rem) { .vs__side--after .vs__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* get it */
.form-card { border-color: var(--color-rule); }
.field input, .field textarea { background: var(--color-well); border-color: var(--color-line-2); border-radius: var(--radius-sm); }
.field label { font-size: 0.875rem; color: var(--color-ink-2); }
.get__perks { gap: 0.7rem; font-size: 1rem; }
.get__perks li { display: flex; gap: 0.65rem; }

/* footer */
.foot-stmt { border-top: 1px solid var(--color-rule); padding-top: 4.5rem; }
.foot-stmt__line { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.04em; font-size: clamp(1.875rem, 3vw + 1rem, 3rem); }

/* dialogs */
dialog { border-radius: var(--radius-lg); }
.dlg__x { border-radius: var(--radius-sm); }

/* option cards: stacked layout (icon on top) for the 2 column grids on every screen */
.opts--4 .opt__box, .opts--2 .opt__box { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "icon tick" "text text"; align-items: start; gap: 0.55rem 0.5rem; padding: 0.75rem 0.85rem; }
.opts--4 .opt__icon, .opts--2 .opt__icon, .opts--2 .opt__swatch { grid-area: icon; }
.opts--4 .opt__text, .opts--2 .opt__text { grid-area: text; }
.opts--4 .opt__tick, .opts--2 .opt__tick { grid-area: tick; }
.opts--4 .opt__icon { width: 2.5rem; }
.opts--2 .opt__icon { width: 2.75rem; }
@media (min-width: 60rem) { .opts--2 .opt__box { min-height: 7rem; padding: 1rem 1.1rem; } .opts--2 .opt__icon { width: 3.5rem; } .opts--2 .opt__swatch { width: 2.5rem; height: 2.5rem; } }
@media (min-width: 60rem) { .mctb__visual { order: 0; } .mctb__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }
@media (min-width: 60rem) and (min-height: 36rem) {
  .controls { overflow: hidden; grid-template-rows: auto auto minmax(0, 1fr) auto auto; }
  .survey__view { min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--color-line-2) transparent; margin-inline: -0.35rem; padding: 0.35rem; }
}
.demo__head .eyebrow, .sec-head .eyebrow { font-size: 0.75rem; color: var(--color-accent); margin: 0 0 var(--space-md); max-width: none; padding: 0; line-height: 1.4; }
@media (min-width: 60rem) and (min-height: 36rem) and (max-height: 56rem) { .demo__head .eyebrow { margin-bottom: 0.5rem; } }
@media (min-width: 60rem) and (min-height: 36rem) and (max-height: 62rem) {
  .demo { padding-top: 1.5rem; }
  .demo__head .eyebrow { margin-bottom: 0.5rem; }
  .demo__head h2 { font-size: 2rem; max-width: none; }
  .demo__head p { font-size: 1rem; margin-top: 0.5rem; }
  .demo__grid { margin-top: 1.25rem; }
  .controls { padding: 1.4rem 1.6rem 1.25rem; gap: 0.85rem; }
  .step { gap: 1rem; }
  .opts--4 .opt__box { min-height: 5.75rem; padding: 0.8rem 0.95rem; }
  .opts--4 .opt__icon { width: 2.9rem; }
  .opts--2 .opt__box { min-height: 5.75rem; }
}
@media (min-width: 60rem) and (max-height: 50rem) { .survey__note { display: none; } }


/* ======================================================================
   LIGHT THEME (contractor sites with a light look)
   On the sales page it is applied to the demo section only.
   In live mode it is applied to the whole page.
   ====================================================================== */
.theme-light {
  --color-paper: #F6F5F2;
  --color-paper-2: #FFFFFF;
  --color-paper-3: #F1EFEB;
  --color-paper-4: #E7E4DF;
  --color-rule: #E2DFD9;
  --color-rule-2: #E2DFD9;
  --color-ink: #1B1D20;
  --color-ink-2: #3E4247;
  --color-muted: #6A7077;
  --color-card-2: #FAF9F7;
  --color-line-2: #D3CFC8;
  --color-hover-line: #B9B4AC;
  --color-bar: #FAF9F7;
  --color-well: #FFFFFF;
  --color-accent-text: #B5561A;
  --color-accent-soft: rgb(224 122 47 / 0.10);
  --color-accent-line: rgb(224 122 47 / 0.55);
  --color-focus: #B5561A;
  --color-shadow: rgb(30 25 20 / 0.16);
  --color-bubble-in: #ECEAE6;
  --color-bubble-out: #F5DDC8;
  --stage-a: #F7F6F3;
  --stage-b: #E7E5E0;
  --shadow-bar: rgb(30 25 20 / 0.18);
  --color-danger: #C2412D;
  --color-danger-soft: rgb(194 65 45 / 0.08);
  color: var(--color-ink);
  background: var(--color-paper);
  color-scheme: light;
}
html.html-light { background: #F6F5F2; }
.theme-light .controls, .theme-light .viz, .theme-light .price { box-shadow: 0 1px 2px rgb(30 25 20 / 0.05), 0 12px 32px -18px rgb(30 25 20 / 0.18); }
.theme-light .opt input:checked + .opt__box { background: color-mix(in srgb, var(--color-accent) 8%, #FFFFFF); }
.theme-light .tag, .theme-light .survey__count, .theme-light .ctl__value, .theme-light .price__num,
.theme-light .extras.has-items .extras__sub, .theme-light .chip:has(input:checked) .chip__price, .theme-light .chip.is-set .chip__price,
.theme-light .slot[aria-pressed="true"], .theme-light .slot[aria-pressed="true"] .slot__pre, .theme-light .linkish, .theme-light .eyebrow,
.theme-light .breakdown summary::after, .theme-light .extras__icon { color: var(--color-accent-text); }
.theme-light .tag { border-color: var(--color-accent-line); }
.theme-light .viz__label::before { background: var(--color-accent); }
.theme-light .btn--line { --btn-bg: #FFFFFF; --btn-bd: var(--color-line-2); --btn-fg: var(--color-ink); }
@media (hover: hover) and (pointer: fine) { .theme-light .btn--line:hover { --btn-bg: var(--color-paper-3); --btn-bd: var(--color-hover-line); } }
.theme-light .btn--fill:disabled { --btn-bg: var(--color-paper-4); --btn-fg: var(--color-muted); }
.theme-light .stepper__btn { background: var(--color-paper-4); color: var(--color-ink); }
.theme-light .stepper__btn:hover:not(:disabled) { background: #DCD8D1; }
.theme-light .opt__swatch { border-color: rgb(0 0 0 / 0.12); box-shadow: inset 0 -4px 8px rgb(0 0 0 / 0.08); }
.theme-light .day:hover:not(:disabled) { background: var(--color-line-2); }
.theme-light .day.is-past { color: var(--color-line-2); }
.theme-light input[type="range"]::-webkit-slider-thumb { background: #FFFFFF; }
.theme-light input[type="range"]::-moz-range-thumb { background: #FFFFFF; }
.theme-light .field input, .theme-light .numfield { background: #FFFFFF; }
.theme-light input[type="date"] { color-scheme: light; }
.theme-light .live-head .btn--line { --btn-bg: #FFFFFF; }
.theme-light .breakdown[open] dl { background: #FFFFFF; }
@media (max-width: 59.99rem) { .theme-light .viz { box-shadow: 0 14px 28px -20px rgb(30 25 20 / 0.35); } }
/* sales page: the demo becomes a light band, like the contractor's own site */
.demo { transition: background-color var(--dur-long) var(--ease-out); }
.demo.theme-light { border-block: 1px solid #E2DFD9; }
.demo.theme-light .demo__head h2 { color: var(--color-ink); }
.demo.theme-light .demo__head p:not(.eyebrow), .demo.theme-light .theme-pick__label { color: var(--color-ink-2); }

/* theme picker in the demo heading */
.theme-pick { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.25rem; }
.theme-pick__label { font-size: 0.875rem; color: var(--color-ink-2); font-weight: 500; }
.seg--theme { --cols: 2; width: 12rem; padding: 0.2rem; }
.seg--theme span { min-height: 2.25rem; font-size: 0.875rem; }
@media (min-width: 60rem) {
  .demo__head { position: relative; display: block; max-width: none; }
  .theme-pick { position: absolute; right: 0; bottom: 0; margin: 0; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
}

/* alignment pass */
.bts__card h3, .vs__line { text-wrap: pretty; max-width: none; }
@media (min-width: 60rem) {
  .after__grid, .mctb__grid { align-items: start; }
  .flow, .mctb__visual { align-self: start; margin-top: 2.1rem; }
}
.fields { row-gap: 0.15rem; }
.field__err { min-height: 1.1rem; }
@media (max-width: 29.99rem) { .vs__list li { font-size: 0.9375rem; } .vs__side { padding: 1.4rem; } }
@media (min-width: 48rem) and (max-width: 59.99rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .hero h1 { max-width: 14ch; }
  .hero__sub { max-width: 44ch; }
  .quote-card { justify-self: start; max-width: 34rem; }
  .hero-note { left: 1rem; top: 1rem; }
}

/* 3D preview: sideways turn */
.stage.can-turn { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.stage.is-dragging { cursor: grabbing; }
.stage__hint { position: absolute; left: 50%; bottom: 0.85rem; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem 0.35rem 0.6rem; border-radius: 999px; background: rgb(22 24 27 / 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #F2EFEA; font-size: 0.75rem; font-weight: 500; white-space: nowrap; pointer-events: none; transition: opacity 400ms var(--ease-out); opacity: 0; animation: hintIn 500ms var(--ease-out) 1.2s forwards; }
.stage__hint svg { width: 1rem; height: 1rem; }
.stage__hint.is-gone { opacity: 0 !important; animation: none; }
.stage:not(.is-ready) .stage__hint { display: none; }
@keyframes hintIn { to { opacity: 1; } }
@media (max-width: 59.99rem) { .stage__hint { bottom: 0.5rem; font-size: 0.6875rem; } }

/* comparison: same row rhythm on both sides, checks lined up in even columns */
.vs__list, .vs__side--after .vs__list, .vs__side--before .vs__list { display: grid; grid-auto-rows: 1.75rem; row-gap: 0.75rem; column-gap: 1.5rem; align-items: center; }
.vs__side--after .vs__list { grid-template-columns: repeat(2, minmax(0, max-content)); }
@media (min-width: 72rem) { .vs__side--after .vs__list { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 4rem; } }
.vs__list li, .vs__side--after .vs__list li { line-height: 1.75rem; min-height: 1.75rem; }
.vs__list li::before { align-self: center; }
@media (max-width: 29.99rem) { .vs__side--after .vs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; grid-auto-rows: auto; } .vs__list li, .vs__side--after .vs__list li { line-height: 1.35; } }

/* spec label above the 3D preview: text and dot centered on one line */
.viz__label { height: 2.75rem; min-height: 0; padding-block: 0; line-height: 2.75rem; }
.viz__label::before { top: 50%; transform: translateY(-50%); }
@media (max-width: 59.99rem) { .viz__label { height: 2.25rem; line-height: 2.25rem; padding-block: 0; } }

/* dialog title takes focus quietly */
dialog h2:focus { outline: none; }

/* extras chips: check box lines up with the first line of text */
.chip { align-items: start; grid-template-rows: auto auto; }
.chip__check { grid-row: 1 / 3; align-self: start; margin-top: 0.12rem; }
.chip__name { align-self: start; }
.chip__price { align-self: start; }

/* booking step: phone and email side by side on desktop to save room */
@media (min-width: 60rem) { .book-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .book-fields .field:first-child { grid-column: 1 / -1; } }

/* more below? a soft fade at the bottom of the question area */
.survey__view.has-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent); }
.chip { align-content: start; }