/* ScanToScope: page styles. The engine (scrollcraft.css) is the mechanism and is
   never edited; everything here is this site's own markup and tokens. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/fonts/bricolage-grotesque.woff2") format("woff2-variations"),
       url("assets/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans.woff2") format("woff2-variations"),
       url("assets/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap;
}

:root {
  /* the six engine roles */
  --sc-canvas: #14100D;        /* Walnut Night */
  --sc-surface: #2E2119;       /* Cedar */
  --sc-ink: #F4EDE3;
  --sc-ink-soft: #B3A698;
  --sc-accent: #FF4B2B;        /* Laser Red: action and the laser line only */
  --sc-accent-ink: #14100D;
  --sc-font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --sc-font-text: "Instrument Sans", system-ui, sans-serif;
  --sc-shadow-color: 24 40% 3%;

  /* site tokens */
  --walnut: #14100D;
  --cedar: #2E2119;
  --plaster: #F1E9DE;
  --scan: #FFF3DC;
  --laser: #FF4B2B;
  --paper-ink: #1D1712;
  --paper-soft: #6B5D50;
  --paper-rule: #D9CCBB;

  --r-sm: 8px; --r-md: 14px; --r-lg: 22px;
  --bar-h: 64px;

  --t-hero: clamp(3rem, 1.4rem + 5.2vw, 6.25rem);
  --t-chap: clamp(2.2rem, 1.2rem + 3.4vw, 4.5rem);
  --t-lede: clamp(1.1rem, 1rem + 0.45vw, 1.42rem);
}

html { background: var(--walnut); }
body { font-optical-sizing: auto; }
:focus-visible { outline-color: var(--scan); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--laser);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0 1.35rem;
  border-radius: 10px; border: 0;
  background: var(--btn-bg); color: var(--walnut);
  font: 600 1rem/1 var(--sc-font-text); letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.22) inset, 0 6px 18px -8px rgb(255 75 43 / 0.55), 0 2px 4px rgb(10 6 4 / 0.35);
  transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.btn:hover { --btn-bg: #FF6649; }
.btn:active { transform: translateY(1px) scale(0.98); box-shadow: 0 1px 0 rgb(255 255 255 / 0.18) inset, 0 1px 2px rgb(10 6 4 / 0.4); }
.btn:focus-visible { outline: 2px solid var(--scan); outline-offset: 3px; }
.btn[aria-disabled="true"], .btn:disabled { --btn-bg: #5A4A3E; color: #B3A698; box-shadow: none; cursor: not-allowed; }
.btn--sm { min-height: 40px; padding: 0 1rem; font-size: 0.9375rem; border-radius: 9px; }

.link {
  color: var(--sc-ink); font-weight: 500; text-decoration: underline;
  text-decoration-color: rgb(244 237 227 / 0.35); text-underline-offset: 0.3em; text-decoration-thickness: 1px;
  transition: text-decoration-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
  border-radius: 4px;
}
.link:hover { text-decoration-color: var(--laser); }
.link:active { color: var(--sc-ink-soft); }

/* -------------------------------------------------------------- the mark */
.mark { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--sc-ink); text-decoration: none; border-radius: 8px; }
.mark svg { width: 26px; height: 26px; flex: none; }
.mark__word { font: 700 1.2rem/1 var(--sc-font-display); letter-spacing: -0.03em; }
.mark:hover .mark__dot { fill: #FF6649; }

/* ------------------------------------------------------------------ bar */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: calc(var(--bar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(var(--sc-gutter), env(safe-area-inset-right)) 0 max(var(--sc-gutter), env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  isolation: isolate;
}
.bar::before, .bar::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  transition: opacity 300ms var(--sc-ease-out);
}
/* glass: a top-down gradient of Walnut over the footage */
.bar::before { background: linear-gradient(to bottom, rgb(20 16 13 / 0.72), rgb(20 16 13 / 0.34) 60%, rgb(20 16 13 / 0)); height: 150%; }
/* solid: near-opaque Cedar-tinted Walnut, blur and a hairline */
.bar::after {
  background: rgb(22 17 14 / 0.93);
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid rgb(244 237 227 / 0.09);
  opacity: 0;
}
.bar[data-state="solid"]::before { opacity: 0; }
.bar[data-state="solid"]::after { opacity: 1; }
.bar[data-state="clear"]::before { opacity: 0; }
.bar__nav { display: flex; align-items: center; gap: 1.75rem; }
.bar__nav .link { text-decoration-color: transparent; font-size: 0.9375rem; }
.bar__nav .link:hover { text-decoration-color: var(--laser); }
.bar__apply { display: none; }
.bar__menu {
  display: none; min-width: 44px; min-height: 44px; margin-right: -8px;
  align-items: center; justify-content: center; gap: 0.5rem;
  background: none; border: 0; border-radius: 10px; color: var(--sc-ink); cursor: pointer;
  font: 500 0.9375rem/1 var(--sc-font-text); padding: 0 8px;
}
.bar__menu:active { transform: translateY(1px); }
.bar__menu svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------ phone menu */
.menu {
  position: fixed; inset: 0; z-index: calc(var(--sc-z-chrome) + 1);
  background: rgb(20 16 13 / 0.97);
  padding: calc(env(safe-area-inset-top) + 12px) max(var(--sc-gutter), env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 24px) max(var(--sc-gutter), env(safe-area-inset-left));
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity 220ms var(--sc-ease-out);
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu__top { display: flex; justify-content: space-between; align-items: center; height: var(--bar-h); }
.menu__list { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 0.25rem; }
.menu__list a {
  display: flex; align-items: center; min-height: 56px; border-radius: 10px;
  font: 600 2rem/1.1 var(--sc-font-display); letter-spacing: -0.03em; color: var(--sc-ink); text-decoration: none;
  border-bottom: 1px solid rgb(244 237 227 / 0.08);
}
.menu__list a:active { color: var(--sc-ink-soft); }
.menu__cta { margin-top: auto; }
.menu__cta .btn { width: 100%; min-height: 54px; }
body.menu-open { overflow: hidden; }

/* =============================================================== the tour */
.tour { background: var(--walnut); }
.tour__slot { position: absolute; pointer-events: none; visibility: hidden; }
/* where the lit window sits on arrival */
.tour__slot--window { left: 44%; right: var(--sc-gutter); top: calc(var(--bar-h) + 24px); bottom: 40px; }
/* where the plan lands */
.tour__slot--plan { left: var(--sc-gutter); width: 50%; top: 35%; bottom: 7%; }
.tour__slot--plan-ledger { left: var(--sc-gutter); width: 50%; top: 35%; bottom: 7%; }

.tour__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(52% 64% at 72% 52%, rgb(255 243 220 / 0.10), rgb(255 243 220 / 0) 70%);
}
.tour__window {
  position: absolute; inset: 0; overflow: hidden;
  will-change: clip-path;
  clip-path: inset(0);
}
.tour__picture { position: absolute; inset: 0; }
.tour__poster, .tour__canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.tour__poster { object-fit: cover; }
.tour__canvas { opacity: 0; transition: opacity 280ms var(--sc-ease-out); }
.tour.is-live .tour__canvas { opacity: 1; }
.tour__grade { position: absolute; inset: 0; background: #170F09; opacity: 0; pointer-events: none; }
.tour__trace { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; overflow: visible; }

.tour__brackets { position: absolute; inset: 0; pointer-events: none; }
.tour__brackets i {
  position: absolute; width: 26px; height: 26px; border-color: var(--scan); border-style: solid; border-width: 0;
  opacity: 0.9; will-change: transform, opacity;
}
.tour__brackets i:nth-child(1) { border-top-width: 1.5px; border-left-width: 1.5px; }
.tour__brackets i:nth-child(2) { border-top-width: 1.5px; border-right-width: 1.5px; }
.tour__brackets i:nth-child(3) { border-bottom-width: 1.5px; border-right-width: 1.5px; }
.tour__brackets i:nth-child(4) { border-bottom-width: 1.5px; border-left-width: 1.5px; }

/* scrims: siblings of the copy, never children, so verification measures them */
.scrim { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.scrim--walk {
  background: linear-gradient(to top left, rgb(20 16 13 / 0.94) 0%, rgb(20 16 13 / 0.74) 28%, rgb(20 16 13 / 0.26) 50%, rgb(20 16 13 / 0) 68%);
}
.scrim--measured {
  background: linear-gradient(to bottom, rgb(15 11 8 / 0.9) 0%, rgb(15 11 8 / 0.72) 16%, rgb(15 11 8 / 0.3) 27%, rgb(15 11 8 / 0) 38%);
}

/* chapters */
.chap { position: absolute; z-index: var(--sc-z-copy); }
.chap h1, .chap h2 { margin: 0; font-family: var(--sc-font-display); letter-spacing: -0.035em; text-wrap: balance; }
.chap p { margin: 0; text-wrap: pretty; }

.chap--arrive {
  left: var(--sc-gutter); width: calc(44% - var(--sc-gutter) - 40px);
  /* centred in the space under the header; on short windows it starts under the header and never rises into it */
  top: var(--bar-h); bottom: 0; padding: clamp(16px, 3vh, 32px) 0;
  display: flex; flex-direction: column; justify-content: flex-start;
}
/* auto margins centre the block when there is room and collapse to 0 when there is not,
   so the headline can never be pushed up into the header */
.chap--arrive > :first-child { margin-top: auto; }
.chap--arrive > :last-child { margin-bottom: auto; }
.chap--arrive h1 { font-size: min(var(--t-hero), 11vh); font-weight: 680; line-height: 0.93; }
@media (min-width: 861px) and (max-height: 860px) {
  .chap--arrive h1 { font-size: min(var(--t-hero), 9.6vh); }
  .chap--arrive p { margin-top: 0.8rem; font-size: 1rem; line-height: 1.4; }
  .chap--arrive .chap__actions { margin-top: 1.1rem; }
  .chap--arrive .chap__proof { margin-top: 0.9rem !important; }
}
@media (min-width: 861px) and (max-height: 720px) {
  .chap--arrive .chap__proof { display: none; }
}
/* mid-width laptop windows: the hero column is narrow, so cap the headline by width too (three lines, not four) */
@media (min-width: 861px) and (max-width: 1180px) {
  .chap--arrive h1 { font-size: min(var(--t-hero), 9.6vh, 5.6vw); }
}
/* laptop windows up to 800 tall (1366x768, 1280x720, 1024x768): smaller headline and no proof line,
   so the chips stay on screen; the founder note and the strip after the tour carry the rest */
@media (min-width: 861px) and (max-height: 800px) {
  .chap--arrive h1 { font-size: min(var(--t-hero), 8.4vh, 5.6vw); }
  .chap--arrive .chap__proof { display: none; }
}
@media (min-width: 861px) and (max-height: 640px), (min-width: 861px) and (max-width: 960px) and (max-height: 760px) {
  .chap--arrive .fd-offerline { display: none; }
}
.chap--arrive .fd-offerline { color: var(--sc-ink); }
.chap--arrive p { margin-top: 1.5rem; max-width: 30ch; font-size: var(--t-lede); line-height: 1.45; color: var(--sc-ink-soft); letter-spacing: -0.01em; }
.chap__actions { margin-top: 2rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

.chap--walk { right: var(--sc-gutter); bottom: clamp(3rem, 11vh, 7.5rem); max-width: 34rem; text-align: right; }
.chap--walk h2 { font-size: var(--t-chap); font-weight: 650; line-height: 0.98; }

.chap--measured { left: var(--sc-gutter); top: calc(var(--bar-h) + clamp(1.25rem, 4vh, 2.75rem)); max-width: 46rem; }
.chap--measured h2 { font-size: clamp(1.8rem, 1rem + 2.2vw, 3.1rem); font-weight: 650; line-height: 1; }
@media (min-width: 861px) { .chap--measured { max-width: none; } .chap--measured h2 { white-space: nowrap; } }

.chap--scope { left: var(--sc-gutter); top: calc(var(--bar-h) + clamp(1.5rem, 5vh, 3.25rem)); width: min(44rem, 50%); }
.chap--scope h2 { font-size: clamp(2.1rem, 1.1rem + 3vw, 4rem); font-weight: 680; line-height: 0.98; }
.chap--scope p { margin-top: 1rem; max-width: 42ch; color: var(--sc-ink-soft); font-size: var(--t-lede); line-height: 1.45; }

.plan-cap {
  position: absolute; z-index: var(--sc-z-copy); margin: 0;
  font: 500 0.8125rem/1.3 var(--sc-font-text); color: var(--sc-ink-soft); letter-spacing: 0.01em;
  white-space: nowrap;
}

/* the estimate: paper, lit like a product shot */
.estimate-wrap {
  position: absolute; z-index: calc(var(--sc-z-copy) + 1);
  right: var(--sc-gutter); top: 50%;
  width: min(30rem, 36vw);
  will-change: transform;
}
.estimate {
  background: var(--plaster); color: var(--paper-ink);
  border-radius: var(--r-md);
  padding: 1.6rem 1.6rem 1.4rem;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.7) inset,
              0 2px 3px rgb(8 5 3 / 0.3),
              0 18px 40px -12px rgb(8 5 3 / 0.65),
              0 40px 90px -30px rgb(8 5 3 / 0.7);
}
.estimate__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.estimate__title { margin: 0; font: 700 1.35rem/1.1 var(--sc-font-display); letter-spacing: -0.025em; }
.estimate__tag {
  font: 600 0.75rem/1 var(--sc-font-text); color: var(--paper-ink);
  background: #E5D9C8; border-radius: 6px; padding: 0.4rem 0.55rem; white-space: nowrap;
}
.estimate__meta { margin: 0.4rem 0 0; font-size: 0.875rem; color: var(--paper-soft); }
.estimate table { width: 100%; border-collapse: collapse; margin-top: 1.1rem; font-size: 0.9375rem; }
.estimate th { text-align: left; font-weight: 500; color: var(--paper-soft); font-size: 0.75rem; padding: 0 0 0.45rem; border-bottom: 1px solid var(--paper-rule); }
.estimate th:last-child, .estimate td:last-child { text-align: right; }
.estimate td { padding: 0.62rem 0; border-bottom: 1px solid var(--paper-rule); vertical-align: baseline; }
.estimate tbody tr { will-change: clip-path; }
.estimate .row-item { font-weight: 600; }
.estimate .row-item i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 0.55rem; background: var(--paper-rule); vertical-align: 1px; transition: background-color 200ms var(--sc-ease-out); }
.estimate tr.is-lit .row-item i { background: var(--laser); }
.estimate .row-qty { display: block; font-weight: 400; color: var(--paper-soft); font-size: 0.8125rem; margin-top: 0.1rem; }
.estimate .row-amt { font-weight: 600; font-variant-numeric: tabular-nums; width: 5.6em; }   /* fixed width: the column does not shift while the amounts count up */
.estimate tfoot td { border-bottom: 0; padding-top: 0.95rem; }
.estimate__total-label { font: 600 1rem/1 var(--sc-font-text); }
.estimate__total { font: 700 2.1rem/1 var(--sc-font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.estimate__note { margin: 0.8rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--paper-soft); }
.estimate__cta { margin-top: 1.1rem; display: flex; align-items: center; gap: 1rem; }
.estimate__cta .btn { box-shadow: 0 1px 0 rgb(255 255 255 / 0.22) inset, 0 6px 16px -8px rgb(200 50 20 / 0.6); }
.estimate__cta .btn:focus-visible { outline-color: var(--paper-ink); }

.tour__anchor { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* ------------------------------------------------------------- after the tour */
.endnote { position: relative; z-index: 2; background: var(--walnut); padding: clamp(5rem, 14vh, 9rem) 0 clamp(4rem, 10vh, 7rem); border-top: 1px solid rgb(244 237 227 / 0.07); }
.endnote__inner { width: 100%; max-width: var(--sc-maxw); margin: 0 auto; padding: 0 var(--sc-gutter); display: grid; gap: 1.25rem; }
.endnote h2 { margin: 0; font: 650 var(--t-chap)/1 var(--sc-font-display); letter-spacing: -0.035em; max-width: 16ch; }
.endnote p { margin: 0; max-width: 52ch; color: var(--sc-ink-soft); }
.endnote__proof { margin-top: 2.5rem !important; font-size: 0.875rem; padding-top: 1.25rem; border-top: 1px solid rgb(244 237 227 / 0.08); }

/* ------------------------------------------------------------------ phone */
@media (max-width: 860px) {
  :root { --bar-h: 58px; --sc-gutter: 20px; }
  .bar__nav { display: none; }
  .bar__apply { display: inline-flex; margin-left: auto; min-height: 36px; padding: 0 0.85rem; font-size: 0.9rem; }
  .bar__menu { display: inline-flex; }

  .tour__slot--window { left: 16px; right: 16px; top: auto; bottom: 16px; height: calc(100% - var(--arrive-h, 420px) - 16px); }
  .tour__slot--plan { left: 16px; right: 16px; width: auto; top: calc(var(--bar-h) + 24px); bottom: 240px; }
  .tour__slot--plan-ledger { left: 16px; right: 16px; width: auto; top: calc(var(--bar-h) + 10px); height: calc(42% - var(--bar-h) - 16px); bottom: auto; }

  .chap--arrive { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; top: calc(var(--bar-h) + 18px); bottom: auto; padding: 0; display: block; translate: none; }
  .chap--arrive h1 { font-size: clamp(2.5rem, 1.2rem + 7.4vw, 3.6rem); line-height: 0.95; }
  .chap--arrive p { margin-top: 0.9rem; font-size: 1.0625rem; max-width: 34ch; }
  .chap__actions { margin-top: 1.1rem; gap: 1.1rem; }

  .chap--walk { left: var(--sc-gutter); right: var(--sc-gutter); bottom: calc(28px + env(safe-area-inset-bottom)); max-width: none; text-align: left; }
  .chap--measured { left: var(--sc-gutter); right: var(--sc-gutter); top: calc(var(--bar-h) + 14px); max-width: none; }
  .chap--walk h2, .chap--measured h2 { font-size: clamp(2rem, 1rem + 5.6vw, 2.8rem); }
  .scrim--walk {
    background: linear-gradient(to top, rgb(20 16 13 / 0.92) 0%, rgb(20 16 13 / 0.72) 24%, rgb(20 16 13 / 0.25) 44%, rgb(20 16 13 / 0) 60%);
  }
  .scrim--measured {
    background: linear-gradient(to bottom, rgb(15 11 8 / 0.9) 0%, rgb(15 11 8 / 0.7) 22%, rgb(15 11 8 / 0.2) 40%, rgb(15 11 8 / 0) 52%);
  }

  .chap--scope { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; top: auto; bottom: calc(26px + env(safe-area-inset-bottom)); }
  .chap--scope h2 { font-size: clamp(2rem, 1rem + 5.6vw, 2.8rem); }
  .chap--scope p { font-size: 1rem; }

  .estimate-wrap { left: 12px; right: 12px; width: auto; top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .estimate { padding: 1.05rem 1.1rem 1rem; border-radius: 16px; }
  .estimate__title { font-size: 1.15rem; }
  .estimate__meta { font-size: 0.8125rem; margin-top: 0.25rem; }
  .estimate table { margin-top: 0.6rem; font-size: 0.875rem; }
  .estimate td { padding: 0.4rem 0; }
  .estimate .row-qty { display: inline; margin: 0 0 0 0.35rem; font-size: 0.75rem; white-space: nowrap; }
  .estimate tfoot td { padding-top: 0.6rem; }
  .estimate__total { font-size: 1.7rem; }
  .estimate__note { margin-top: 0.45rem; font-size: 0.75rem; }
  .estimate__cta { margin-top: 0.7rem; }
  .estimate__cta .btn { width: 100%; min-height: 46px; }
}
@media (max-width: 380px) { .estimate .row-rate { display: none; } .estimate .row-qty { display: block; margin: 0.1rem 0 0; } }
@media (max-width: 860px) and (max-height: 760px) {
  .chap--arrive h1 { font-size: clamp(2.1rem, 0.9rem + 6.4vw, 2.9rem); }
  .chap--arrive p { margin-top: 0.6rem; font-size: 0.9375rem; line-height: 1.4; }
  .chap__actions { margin-top: 0.8rem; }
  .estimate__note { display: none; }
  .estimate th { display: none; }
}
@media (max-width: 860px) and (max-height: 560px) { .chap--arrive p:not(.chap__proof) { display: none; } }

/* ------------------------------------------------------------- reduced */
@media (prefers-reduced-motion: reduce) {
  .tour__canvas, .menu, .bar::before, .bar::after { transition: none; }
}

/* ============================================================ the scan step */
.tour__backdrop {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: rgb(14 10 8 / 0.62);   /* a dim over the real photo, not a second picture: the glass shows the same pixels, brighter */
}
.scanner { position: absolute; left: 0; top: 0; pointer-events: none; visibility: hidden; transform-origin: 0 0; will-change: transform; }
.scanner__hand { display: block; width: 100%; height: 100%; max-width: none; filter: drop-shadow(0 30px 60px rgb(8 5 3 / 0.55)); }
.scanner__screen { position: absolute; overflow: hidden; background: #0c0a08; }
.scanner__view { position: absolute; left: 0; top: 0; background-repeat: no-repeat; }
.scanner__ui { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 12% 8% 9%; }
.scanner__pill {
  display: inline-flex; align-items: center; gap: 0.45em;
  font: 600 0.8rem/1 var(--sc-font-text); color: var(--sc-ink);
  background: rgb(20 16 13 / 0.72); padding: 0.5em 0.8em; border-radius: 999px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.scanner__pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--laser); box-shadow: 0 0 0 3px rgb(255 75 43 / 0.25); }
.scanner__bar { width: 70%; height: 4px; border-radius: 2px; background: rgb(255 243 220 / 0.25); overflow: hidden; margin-top: auto; margin-bottom: 0.7em; }
.scanner__bar b { display: block; height: 100%; width: 100%; background: var(--scan); transform-origin: 0 50%; transform: scaleX(0); }
.scanner__hint { font: 500 0.75rem/1.2 var(--sc-font-text); color: var(--sc-ink); background: rgb(20 16 13 / 0.6); padding: 0.45em 0.75em; border-radius: 8px; }

.chap--scanlede {
  left: var(--sc-gutter); top: calc(var(--bar-h) + clamp(1.25rem, 4vh, 2.75rem) + clamp(2.6rem, 1.4rem + 2.6vw, 4rem));
  max-width: 30ch; margin: 0; font-size: var(--t-lede); line-height: 1.45; color: var(--sc-ink); letter-spacing: -0.01em;
}

.chap__proof { margin-top: 1.6rem !important; font-size: 0.9375rem !important; color: var(--sc-ink-soft); max-width: none !important; }
.chap__proof-num { color: var(--sc-ink); font-weight: 650; font-variant-numeric: tabular-nums; }

/* ========================================================= desk (what you get) */
.desk { position: relative; z-index: 2; background: var(--walnut); padding: clamp(5rem, 13vh, 9rem) 0 clamp(4rem, 10vh, 7rem); }
.desk__inner { width: 100%; max-width: var(--sc-maxw); margin: 0 auto; padding: 0 var(--sc-gutter); }
.desk h2 { margin: 0; font: 650 var(--t-chap)/1 var(--sc-font-display); letter-spacing: -0.035em; max-width: 16ch; text-wrap: balance; }
.desk__lede { margin: 1.2rem 0 0; font-size: var(--t-lede); line-height: 1.5; color: var(--sc-ink-soft); max-width: 40ch; }
.desk__list { list-style: none; margin: clamp(2.5rem, 6vh, 4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgb(244 237 227 / 0.12); }
.desk__list li { padding: 1.5rem 1.5rem 1.6rem 0; border-bottom: 1px solid rgb(244 237 227 / 0.12); }
.desk__list li:not(:nth-child(4n+1)) { padding-left: 1.5rem; border-left: 1px solid rgb(244 237 227 / 0.12); }
.desk__list h3 { margin: 0; font: 650 1.25rem/1.15 var(--sc-font-display); letter-spacing: -0.02em; color: var(--sc-ink); }
.desk__list h3::before { content: ""; display: block; width: 10px; height: 10px; margin-bottom: 0.9rem; border-radius: 2px; background: var(--laser); }
.desk__list p { margin: 0.6rem 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--sc-ink-soft); }
.fd { z-index: 2; }
@media (min-width: 861px) { .fd-float { display: none; } }

@media (max-width: 860px) {
  .chap--scanlede { left: var(--sc-gutter); right: var(--sc-gutter); top: auto; bottom: calc(24px + env(safe-area-inset-bottom)); max-width: none; font-size: 1rem; }
  .chap__proof { margin-top: 1rem !important; font-size: 0.875rem !important; }
  .desk__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desk__list li:not(:nth-child(4n+1)) { padding-left: 0; border-left: 0; }
  .desk__list li { padding: 1.3rem 1rem 1.3rem 0; }
  .desk__list li:nth-child(even) { padding-left: 1rem; border-left: 1px solid rgb(244 237 227 / 0.12); }
}
@media (max-width: 860px) and (max-height: 760px) { .chap__proof { margin-top: 0.7rem !important; font-size: 0.8125rem !important; } }
.scanner__screen::after { content: ""; position: absolute; inset: 0; background: #170F09; opacity: var(--g, 0); pointer-events: none; }
.scanner__ui { z-index: 1; }

.scanner.is-diving .scanner__hand { filter: none; }
html { overflow-anchor: none; }

/* phones: keep the GPU work to what the story needs */
@media (max-width: 860px) {
  .sc-grain { display: none; }
  .bar::after { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(22 17 14 / 0.97); }
  .scanner__hand { filter: none; }
  .scanner__pill { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(20 16 13 / 0.85); }
}
.fd, .desk { scroll-margin-top: var(--bar-h); }

/* hero: the problem in one line, then the fix (same type as the rest of the hero) */
.chap--arrive .chap__pain { color: var(--sc-ink-soft); }
.chap--arrive .chap__pain b, .chap--arrive .chap__fix b { color: var(--sc-ink); font-weight: 650; }
.chap--arrive .chap__fix { margin-top: 0.6rem; }
.chap--walk .chap__sub { margin: 0.9rem 0 0 auto; max-width: 30ch; font-size: var(--t-lede); line-height: 1.45; color: var(--sc-ink); letter-spacing: -0.01em; text-shadow: 0 1px 14px rgb(10 7 5 / 0.7); }
@media (max-width: 860px) {
  .chap--arrive .chap__fix { margin-top: 0.45rem; }
  .chap--walk .chap__sub { margin: 0.6rem 0 0; font-size: 1rem; }
}

/* the offer line under the hero and estimate buttons */
.chap--arrive .fd-offerline { color: var(--sc-ink-soft); margin-top: 0.8rem; }
.estimate__cta { flex-wrap: wrap; }
.estimate__cta .fd-offerline { flex: 1 1 100%; color: #5E5146; opacity: 1; margin-top: 0.6rem; }
@media (max-width: 860px) and (max-height: 700px) { .chap--arrive .fd-offerline { display: none; } }

/* scan cue on the front door while the page is at rest (designer pass, 2026-10-10) */
.tour__cue { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transform-origin: 0 0; }
.tour__cue svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.tour__cue-m { display: none; }
@media (max-width: 860px) { .tour__cue-d { display: none; } .tour__cue-m { display: block; } }
.tour__cue .cue-br path, .tour__cue .cue-dim path { fill: none; stroke: #FFF3DC; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.5)); }
.tour__cue .cue-dim text { fill: #FFF3DC; font: 600 15px var(--sc-font-text); letter-spacing: 0.02em; paint-order: stroke; stroke: rgb(20 16 13 / 0.55); stroke-width: 3px; }
.tour__cue .cue-tag rect { fill: rgb(20 16 13 / 0.78); stroke: rgb(255 243 220 / 0.18); }
.tour__cue .cue-tag circle { fill: var(--laser); }
.tour__cue .cue-tag text { fill: #FFF3DC; font: 650 13px var(--sc-font-text); letter-spacing: 0.01em; }
.tour__cue-m .cue-dim text { font-size: 17px; }
.tour__cue-m .cue-tag text { font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .tour__cue { opacity: 1; } }

/* the real-project card above the desk tiles (hidden until permission: data-permission="granted") */
.realcard { margin: clamp(2rem, 5vh, 3rem) 0 0; padding: 1.4rem 1.5rem 1.5rem; border-radius: 14px; background: hsl(26 22% 10%); box-shadow: inset 0 0 0 1px rgb(244 237 227 / 0.1); max-width: 56rem; }
.realcard__label { margin: 0; font-size: 0.9375rem; color: var(--sc-ink-soft); max-width: 60ch; }
.realcard__figs { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 8px 2.2rem; margin: 1rem 0 0; }
.realcard__figs > div { display: flex; flex-direction: column-reverse; }
.realcard__figs dt { font-size: 13px; color: var(--sc-ink-soft); }
.realcard__figs dd { margin: 0; font: 780 clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem)/1.05 var(--sc-font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.realcard__list { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 0.9375rem; line-height: 1.45; color: var(--sc-ink-soft); }
.realcard__list b { color: var(--sc-ink); font-weight: 650; }
.realcard__note { margin: 0.9rem 0 0; font-size: 12px; color: var(--sc-ink-soft); opacity: 0.8; }
@media (max-width: 600px) { .realcard__figs { grid-template-columns: repeat(2, auto); } }


/* Play the tour on phones and small tablets: the story copy at the bottom of the screen rises above the tour bar
   while the tour plays (founding.js sets --fd-tourbar-h to the bar's height) */
@media (max-width: 860px) {
  .chap--walk, .chap--scope, .chap--scanlede { transition: translate 0.3s ease; }
  body.is-touring .chap--walk, body.is-touring .chap--scope, body.is-touring .chap--scanlede { translate: 0 calc(-1 * var(--fd-tourbar-h, 0px)); }
}

/* Phones (iPhone Safari and Chrome hide their bars as you scroll; the screen grows by about 80px).
   The film's stage fills the large screen, so the bar sliding away uncovers more film and never a strip
   of the next section. Everything placed on the film stays inside the small screen (always visible):
   bottom anchors add --vgap, and tour.js lays out with the visible height. --svh and --lvh are
   variables so the lab can test both bar states in a desktop browser. */
:root { --svh: 100svh; --lvh: 100lvh; --vgap: calc(var(--lvh) - var(--svh)); }
@media (max-width: 860px) {
  .tour.sc-stage { height: var(--lvh); }
  .tour__slot--window { bottom: calc(16px + var(--vgap)); height: calc(100% - var(--vgap) - var(--arrive-h, 420px) - 16px); }
  .tour__slot--plan { bottom: calc(240px + var(--vgap)); }
  .tour__slot--plan-ledger { height: calc(var(--svh) * 0.42 - var(--bar-h) - 16px); }
  .chap--walk { bottom: calc(28px + env(safe-area-inset-bottom) + var(--vgap)); }
  .chap--scope { bottom: calc(26px + env(safe-area-inset-bottom) + var(--vgap)); }
  .chap--scanlede { bottom: calc(24px + env(safe-area-inset-bottom) + var(--vgap)); }
  .estimate-wrap { bottom: calc(12px + env(safe-area-inset-bottom) + var(--vgap)); }
}

/* short laptop windows (up to 860 tall): the estimate is compact so the whole card, from its title to the
   Apply button, fits between the header and the bottom of the screen */
@media (min-width: 861px) and (max-height: 860px) {
  .estimate { padding: 1.1rem 1.3rem 1.05rem; }
  .estimate__meta { margin-top: 0.25rem; font-size: 0.8125rem; }
  .estimate table { margin-top: 0.6rem; font-size: 0.875rem; }
  .estimate th { display: none; }
  .estimate td { padding: 0.42rem 0; }
  .estimate .row-qty { display: inline; margin: 0 0 0 0.4rem; font-size: 0.75rem; white-space: nowrap; }
  .estimate tfoot td { padding-top: 0.6rem; }
  .estimate__total { font-size: 1.75rem; }
  .estimate__note { margin-top: 0.45rem; font-size: 0.75rem; }
  .estimate__cta { margin-top: 0.75rem; }
}
@media (min-width: 861px) and (max-height: 660px) {
  .estimate__note { display: none; }   /* the line under the title already says "sample rates" */
  .estimate { padding-top: 0.95rem; padding-bottom: 0.95rem; }
  .estimate td { padding: 0.36rem 0; }
}

/* =================================================================== LEAN PROTOTYPE (12 Oct)
   One message per step: the tour's lines are the headlines, the tour is the first action,
   and it ends on the application. */
.chap__actions .btn.lean-play {
  background: var(--btn-bg); color: var(--walnut);
  min-height: 52px; padding: 0 1.5rem; border-radius: 10px; font: 650 1.0625rem/1 var(--sc-font-text);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.22) inset, 0 8px 22px -10px rgb(200 50 20 / 0.7);
}
.chap__actions .btn.lean-play::before { color: var(--walnut); margin-right: 0.15em; }
.chap__actions .btn.lean-play.on { --btn-bg: #3A2E25; color: var(--sc-ink); }
.chap__actions .btn.lean-play.on::before { color: var(--laser); }
.lean-actions { row-gap: 0.7rem; }
.lean-actions .fd-play-or { flex-basis: 100%; margin: -0.2rem 0 0; font-size: 0.875rem; }
.lean-step {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0.85rem;
  font: 650 0.75rem/1 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.lean-step::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--laser); }
.chap--walk .lean-step { justify-content: flex-end; }
@media (max-width: 860px) { .chap--walk .lean-step { justify-content: flex-start; } }
.estimate .lean-step--card { display: flex; margin-bottom: 0.45rem; color: var(--paper-soft); }
.estimate__title { line-height: 1.15; }
body[data-tour="lean"] .fd-tourbar__n { display: none; }   /* the step is already on screen */
body[data-tour="lean"] .fd-tourbar.is-end .fd-tourbar__go { display: none; }   /* the form is right there */
body[data-tour="lean"] .fd-tourbar.is-end { padding-right: 18px; }

/* lean round 2 (12 Oct). TEST, on in the approval build (?name=off hides it): the company name in the hero, and the text in step 1 */
.lean-name { margin-top: 1rem; max-width: 22rem; }
.lean-name[hidden] { display: none; }
.lean-name label { display: block; margin-bottom: 0.35rem; font: 600 0.875rem/1.3 var(--sc-font-text); color: var(--sc-ink-soft); }
.lean-name label span { font-weight: 500; opacity: 0.8; }
.lean-name input {
  width: 100%; min-height: 46px; padding: 0 0.95rem; border-radius: 10px;
  border: 1px solid rgb(255 243 220 / 0.22); background: rgb(255 243 220 / 0.06); color: var(--sc-ink);
  font: 500 16px var(--sc-font-text);
}
.lean-name input::placeholder { color: rgb(244 237 227 / 0.45); }
.lean-name input:focus-visible { outline: 2px solid var(--laser); outline-offset: 2px; }
.chap--arrive .lean-name ~ .fd-offerline { margin-top: 0.9rem; }

.lean-sms[hidden] { display: none; }
.lean-sms { display: flex; justify-content: flex-end; margin-bottom: 1.1rem; }
/* the see-your-link phone, only its top: name, time and the whole text; the phone runs on below the fade */
.lean-sms .fd-phone { width: 270px; height: auto; border-radius: 40px 40px 0 0; padding: 10px 10px 0;
  --fd-text: "Instrument Sans", system-ui, sans-serif;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); }
.lean-sms .fd-phone__notch { top: 18px; width: 80px; height: 22px; margin-left: -40px; }
.lean-sms .fd-phone__scr { position: relative; inset: auto; border-radius: 31px 31px 0 0; padding: 52px 14px 30px; animation: none; }
.lean-sms .fd-sms__time { margin: 4px 0 6px; }
.lean-sms .fd-sms__bubble { font-size: 13px; }
@media (max-width: 860px) {
  .lean-sms { justify-content: flex-start; margin-bottom: 0.9rem; }
  .lean-sms .fd-phone { width: 248px; }
  .lean-sms .fd-phone__scr { padding: 46px 12px 26px; }
  .lean-sms .fd-sms__av { width: 36px; height: 36px; font-size: 14px; }
  .lean-sms .fd-sms__bubble { font-size: 12.5px; max-width: 94%; }
}
/* the test adds a field to the hero: on short laptop windows the chips make room (they are on the form too) */
@media (min-width: 861px) and (max-height: 960px) { body.try-name .chap--arrive .fd-offerline { display: none; } }   /* 13 Oct: the four-line hook needs the room at 1440x900 */
@media (max-width: 860px) and (max-height: 900px) { body.try-name .chap--arrive .fd-offerline { display: none; } }   /* phones: the film window keeps its size */

/* lean round 2: a fast first visit. Before the scripts arrive (slow phone data) the film section already has
   its height and its stuck stage, so the hero copy is what shows first, never the application below it.
   The film window stays dark until tour.js opens it from its scan line. */
#tour[data-sc-act="pin"] { height: 1040vh; }   /* = data-sc-span 10.4; scrollcraft sets the same value */
.tour[data-sc-stage] { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
@media (max-width: 860px) { .tour[data-sc-stage] { height: var(--lvh); } }
.chap--arrive[data-sc-cue] { opacity: 1; }   /* scrollcraft's inline opacity takes over as soon as it runs */
html:not(.tour-on) .tour__window, html:not(.tour-on) .tour__cue, html:not(.tour-on) .tour__brackets { visibility: hidden; }
/* the few founding.css rules the hero needs, so founding.css (the application, below the fold) can load
   without holding up the first paint. Same rules as in founding.css. */
.fd-offerline { margin: 0.85rem 0 0; display: flex; flex-wrap: wrap; gap: 0.45rem 0.6rem; font-size: 14px; font-weight: 550; line-height: 1.2; opacity: 1; max-width: 40ch; }
.fd-offerline span { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.38rem 0.7rem 0.38rem 0.55rem; border-radius: 999px; background: hsl(38 100% 92% / 0.09); box-shadow: inset 0 0 0 1px hsl(38 100% 92% / 0.14); white-space: nowrap; }
.fd-offerline span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #FF4B2B; flex: none; }
.fd-play[hidden], .fd-play-or[hidden] { display: none !important; }
body[data-variant="walkin"] .fd-float { display: none; }
.fd-play::before { content: "\25B6"; font-size: 0.75em; margin-right: 0.45em; color: #FF4B2B; }
.fd-play.on::before { content: "\275A\275A"; }
.fd-play-or { display: inline-block; margin-left: 0.5em; font: 500 15px "Instrument Sans", system-ui, sans-serif; opacity: 0.72; }
@media (prefers-reduced-motion: reduce) { #fdPlay, #fdPlayOr { display: none !important; } }
/* lean: on phones the tour bar sat on the estimate card's chips at step 4. While the tour plays the card drops
   the chips (the same three are in the hero and the application) and rises above the bar. */
@media (max-width: 860px) {
  body.is-touring .estimate__cta .fd-offerline { display: none; }
  body.is-touring .estimate-wrap { translate: 0 calc(-1 * var(--fd-tourbar-h, 0px) + 12px); transition: translate 0.3s ease; }
}
.lean-sms .fd-phone { text-align: left; }
.lean-sms .fd-sms__who, .lean-sms .fd-sms__time { text-align: center; }

/* The phone screen during the scan (Yuri, 18 Oct): show what the app does, in the film's own look
   (white outlines, the laser orange). tour.js drives --sweep, --mesh, the found list and the two hints. */
.scanner__mesh {
  position: absolute; inset: 0; pointer-events: none; opacity: var(--mesh, 0);
  background-image: radial-gradient(circle, rgb(255 243 220 / 0.95) 0 1.1px, transparent 1.6px);
  background-size: 8px 8px;
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--sweep, -30%) - 26%), #000 calc(var(--sweep, -30%) - 6%), #000 var(--sweep, -30%), transparent calc(var(--sweep, -30%) + 4%));
          mask-image: linear-gradient(to bottom, transparent calc(var(--sweep, -30%) - 26%), #000 calc(var(--sweep, -30%) - 6%), #000 var(--sweep, -30%), transparent calc(var(--sweep, -30%) + 4%));
}
.scanner__mesh::after {   /* the leading edge of the sweep: one bright line */
  content: ""; position: absolute; left: 0; right: 0; top: var(--sweep, -30%); height: 2px; margin-top: -1px;
  background: linear-gradient(to right, transparent, var(--laser) 18%, var(--laser) 82%, transparent); box-shadow: 0 0 10px rgb(255 75 43 / 0.7);
}
.scanner__frame { position: absolute; inset: 9% 7% 21%; pointer-events: none; opacity: var(--mesh, 0); }
.scanner__frame i { position: absolute; width: 14%; height: 9%; border: 0 solid rgb(255 243 220 / 0.9); }
.scanner__frame i:nth-child(1) { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; border-top-left-radius: 6px; }
.scanner__frame i:nth-child(2) { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; border-top-right-radius: 6px; }
.scanner__frame i:nth-child(3) { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; border-bottom-right-radius: 6px; }
.scanner__frame i:nth-child(4) { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; border-bottom-left-radius: 6px; }
.scanner__found { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35em; margin-top: auto; margin-bottom: 0.6em; max-width: 100%; }
.scanner__found b {
  display: inline-flex; align-items: center; gap: 0.35em; padding: 0.35em 0.6em; border-radius: 999px;
  font: 600 0.76rem/1 var(--sc-font-text); color: var(--sc-ink); background: rgb(20 16 13 / 0.78);
  opacity: 0; transform: translateY(0.4em) scale(0.9); transition: opacity 0.25s ease, transform 0.25s ease;
}
.scanner__found b::before { content: ""; width: 0.55em; height: 0.3em; margin-top: -0.15em; border: solid var(--laser); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.scanner__found b.on { opacity: 1; transform: none; }
.scanner__bar { margin-top: 0; }
.scanner__hint { position: relative; display: grid; }
.scanner__hint > span { grid-area: 1 / 1; text-align: center; transition: opacity 0.3s ease; }
.scanner__hint > span + span { opacity: 0; }
.scanner__hint.is-2 > span:first-child { opacity: 0; }
.scanner__hint.is-2 > span + span { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .scanner__found b { transition: none; } }
/* the hand photo ends at the wrist; where it does not reach the bottom of the screen (tall phones, tablets) it fades out instead of a hard edge */
.scanner__hand { -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, #000 84%, transparent 100%); }