/* ============================================================================
   DOMIVKA — HOME TECHNOLOGY BLUEPRINT
   Design language: thin-line architectural drawing set.
   Light theme only, by design. Palette is fixed in :root below.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  /* Palette (from brand spec) */
  --bg:          #F7F8FA;
  --card:        #FFFFFF;
  --ink:         #111827;
  --muted:       #6B7280;
  --faint:       #9CA3AF;
  --accent:      #006FFF;
  --accent-deep: #0055CC;
  --wash:        #EAF3FF;
  --border:      #E5E7EB;
  --border-soft: #EEF0F3;

  /* Type */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Inter", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo,
          Consolas, "Liberation Mono", monospace;

  --fs-display: clamp(2.75rem, 1.7rem + 3.9vw, 4.75rem);
  --fs-h2:      clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem);
  --fs-h3:      1.0625rem;
  --fs-lead:    clamp(1.0625rem, 1rem + .38vw, 1.3125rem);
  --fs-body:    1rem;
  --fs-small:   .875rem;
  --fs-micro:   .75rem;
  --fs-mono:    .6875rem;

  /* Space */
  --pad-section: clamp(72px, 8.5vw, 132px);
  --gap:         clamp(20px, 2vw, 28px);
  --container:   1180px;

  /* Form */
  --r-card:  20px;
  --r-input: 12px;
  --r-pill:  999px;

  --sh-sm: 0 1px 2px rgba(17,24,39,.04), 0 1px 3px rgba(17,24,39,.05);
  --sh-md: 0 2px 4px rgba(17,24,39,.03), 0 14px 30px -14px rgba(17,24,39,.12);
  --sh-lg: 0 4px 8px rgba(17,24,39,.03), 0 40px 70px -30px rgba(17,24,39,.20);
  --sh-accent: 0 40px 80px -44px rgba(0,111,255,.45);

  --ease: cubic-bezier(.22,.61,.36,1);

  color-scheme: light;
}

/* ------------------------------------------------------------- 2. BASE */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--bg);
  /* Faint drafting grid — the page sits on graph paper. */
  background-image:
    linear-gradient(to right, rgba(17,24,39,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,24,39,.028) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
/* Class-level `display` beats the UA rule for [hidden], which would otherwise
   leave JS-toggled elements (mobile call button, variant switcher) visible. */
[hidden] { display: none !important; }
a { color: var(--accent); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.022em; line-height: 1.18; text-wrap: balance; }
h2 { font-size: var(--fs-h2); letter-spacing: -.032em; line-height: 1.1; }
h3 { font-size: var(--fs-h3); }
p  { text-wrap: pretty; }
/* Keeps hyphenated product names from breaking mid-word in headings. */
.nb { white-space: nowrap; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 8px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ------------------------------------------------------- 3. LAYOUT PRIMITIVES */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 4vw, 32px); }
.container.narrow { max-width: 840px; }

/* One padding rule for every section. Modifiers change colour only, never space. */
.section { padding-block: var(--pad-section); position: relative; }
/* Clear the sticky header when jumping to an anchor. */
section[id], [id="top"] { scroll-margin-top: 84px; }
.section-alt  { background: #FCFCFD; border-block: 1px solid var(--border-soft); }
.section-wash { background: linear-gradient(180deg, var(--wash), #F4F9FF); border-block: 1px solid #DCEAFB; }

.section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head.center { margin-inline: auto; text-align: center; }
h2 + .lead { margin-top: 20px; }
.center { text-align: center; }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.split { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: clamp(36px, 5vw, 72px); align-items: start; }
/* Reversed split leads with the visual, so give that column the extra width. */
.split-reverse { grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr); }
.split-reverse .split-aside { order: 2; }
.split-reverse .split-main  { order: 1; }
.split-aside { position: sticky; top: 108px; }

/* --------------------------------------------------------- 4. TYPE HELPERS */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .55; flex: none; }
.section-head.center .eyebrow { justify-content: center; }

.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); letter-spacing: -.011em; }
.body { color: var(--muted); margin-top: 18px; }
.micro-note { font-size: var(--fs-micro); color: var(--faint); margin-top: 14px; text-align: center; }

.disclaimer {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--muted);
  border-left: 2px solid var(--border);
  padding-left: 18px;
  margin-top: clamp(28px, 3vw, 40px);
  max-width: 760px;
}

/* ---------------------------------------------------------------- 5. ICONS */
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-lg { width: 26px; height: 26px; stroke-width: 1.35; color: var(--accent); }

/* -------------------------------------------------------------- 6. BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: .9375rem; font-weight: 500; letter-spacing: -.01em;
  cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(0,111,255,.2), 0 10px 22px -12px rgba(0,111,255,.6); }
.btn-primary:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,111,255,.2), 0 16px 28px -14px rgba(0,111,255,.7); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--border); box-shadow: var(--sh-sm); }
.btn-ghost:hover { border-color: #D3D8E0; transform: translateY(-1px); }
.btn-sm  { padding: 10px 20px; font-size: .875rem; }
.btn-lg  { padding: 17px 32px; font-size: 1rem; }
.btn-block { display: flex; width: 100%; }
.btn:active { transform: translateY(0); }

/* --------------------------------------------------------------- 7. HEADER */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247,248,250,.82);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--border); background: rgba(255,255,255,.86); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 24px; }

/* Wordmark: a leader line, then the name. Reads as a drawing callout. */
.wordmark { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); }
.wordmark-rule { width: 20px; height: 1px; background: var(--accent); transition: width .3s var(--ease); flex: none; }
.wordmark:hover .wordmark-rule { width: 30px; }
.wordmark-text { font-size: 1.125rem; font-weight: 600; letter-spacing: .055em; }
.wordmark-lg .wordmark-text { font-size: 1.375rem; letter-spacing: .06em; }
.wordmark-lg .wordmark-rule { width: 26px; }

.nav-desktop { display: flex; align-items: center; gap: 30px; }
.nav-desktop a:not(.btn) { color: var(--muted); font-size: .9375rem; letter-spacing: -.008em; transition: color .18s var(--ease); }
.nav-desktop a:not(.btn):hover { color: var(--ink); }

.nav-toggle { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; background: none; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.nav-toggle-bars { display: grid; gap: 5px; width: 17px; }
.nav-toggle-bars i { display: block; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.nav-mobile { border-top: 1px solid var(--border); background: var(--card); padding-block: 12px 20px; }
.nav-mobile .container { display: grid; gap: 4px; }
.nav-mobile a:not(.btn) { padding: 13px 4px; color: var(--ink); border-bottom: 1px solid var(--border-soft); font-size: 1rem; }
.nav-mobile .btn { margin-top: 14px; }

/* ----------------------------------------------------------------- 8. HERO */
.hero { padding-block: clamp(48px, 6vw, 84px) clamp(64px, 7vw, 108px); }
.hero-grid { display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: clamp(40px, 5vw, 76px); align-items: center; }
.hero-title { font-size: var(--fs-display); letter-spacing: -.042em; line-height: 1.02; }
.hero-copy .lead { margin-top: 24px; max-width: 30ch; }
.hero-support { margin-top: 18px; color: var(--faint); font-size: .9375rem; line-height: 1.55; max-width: 42ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.hero-facts { list-style: none; padding: 0; margin-top: 38px; display: grid; gap: 11px; border-top: 1px solid var(--border); padding-top: 24px; }
.hero-facts li { display: flex; align-items: center; gap: 11px; font-size: var(--fs-small); color: var(--muted); }
.hero-facts .icon { width: 17px; height: 17px; color: var(--accent); opacity: .85; }

/* ---- Plan card (the signature element) ---- */
.plan-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-lg), var(--sh-accent);
  overflow: hidden;
}
.plan-card { position: relative; }
.plan-layers {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: inline-flex; gap: 2px; padding: 3px;
  background: rgba(255,255,255,.86); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: var(--r-pill); box-shadow: var(--sh-sm);
}
.plan-layers button {
  padding: 6px 14px; border: 0; background: none; border-radius: var(--r-pill);
  font-size: .75rem; font-weight: 500; color: var(--muted); cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.plan-layers button:hover { color: var(--ink); }
.plan-layers button[aria-pressed="true"] { background: var(--accent); color: #fff; }

.plan-stage { padding: clamp(10px, 1.6vw, 20px); }
/* Layer states. The two coverage maps compete for the same space, so only one
   is drawn at a time — camera markers stay put in both. Wi-Fi is the default. */
.fp-heat, .fp-cams { transition: opacity .32s var(--ease); }
.fp-cone { opacity: 0; transition: opacity .32s var(--ease); }
.plan-stage.show-cams .fp-heat { opacity: 0; }
.plan-stage.show-cams .fp-cone { opacity: 1; }

/* Cameras view zooms the scene out so every 110 degree cone is visible out to
   its full range, and drops the interior detail that is not the point here.
   The scale and offset frame the union of all four cones. */
.fp-scene { transform-box: view-box; transform-origin: 0 0; transition: transform .45s var(--ease); }
.plan-stage.show-cams .fp-scene { transform: translate(152px, 108px) scale(.6); }
.fp-dim, .fp-labels, .fp-zone-labels { transition: opacity .3s var(--ease); }
/* !important is needed here: the hero load sequence animates these groups with
   animation-fill-mode: forwards, and a filled animation beats a normal rule. */
.plan-stage.show-cams .fp-dim,
.plan-stage.show-cams .fp-labels { opacity: 0 !important; }
/* Cones are clipped to the property line on the Wi-Fi view; here they run free. */
.plan-stage.show-cams .fp-cams { clip-path: none; }
/* Type is scaled up in viewBox units to survive the zoom-out. */
.plan-stage.show-cams .fp-zone-labels text { font-size: 20px; letter-spacing: .08em; }
.plan-stage.show-cams .fp-tag { font-size: 16px; }
.plan-stage svg { width: 100%; height: auto; }

/* Title block, borrowed from a drawing sheet. */
.plan-block {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: var(--fs-mono);
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.plan-block span { padding: 11px 14px; }
.plan-block span + span { border-left: 1px solid var(--border); }
.plan-block b { color: var(--faint); font-weight: 500; margin-right: 7px; }

.plan-legend { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 28px; }
.legend-scale { display: grid; gap: 6px; min-width: 190px; flex: 1 1 190px; }
.legend-title { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.legend-ramp {
  display: block; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #FCA5A5, #F87171 14%, #F97316 30%, #FBBF24 44%, #FDE047 58%, #BEF264 72%, #6EE7A8 86%, #22C55E);
}
.legend-ends { display: flex; justify-content: space-between; font-size: var(--fs-micro); color: var(--muted); }
.legend-ends i { font-style: normal; }
.legend-keys { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--fs-micro); color: var(--muted); }
.legend-keys li { display: flex; align-items: center; gap: 8px; }
.lg-swatch { width: 13px; height: 13px; flex: none; border-radius: 50%; }
.lg-ap   { background: var(--accent); box-shadow: 0 0 0 2.5px rgba(0,111,255,.16); width: 9px; height: 9px; margin: 2px; }
.lg-cam  { background: rgba(0,111,255,.2); border: 1px solid rgba(0,111,255,.4); border-radius: 2px 50% 2px 2px; }

/* ---- Floor plan SVG ---- */
.fp-zone  { fill: rgba(17,24,39,.014); stroke: var(--border); stroke-width: 1; stroke-dasharray: 5 5; }
.fp-lot   { fill: none; stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 6; }
.fp-floor { fill: #fff; }
.fp-wall-ext { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
.fp-wall-int path { fill: none; stroke: #4B5563; stroke-width: 1.4; stroke-linecap: round; }

/* Signal-strength ramp, weakest to strongest. Each band is painted once as an
   even-odd ring, so alphas never stack. Generated by tools/generate-visuals.mjs. */
.fp-band, .iso-band { stroke: none; }
/* Eight-step signal ramp, weakest to strongest. Each band is painted once as an
   even-odd ring so alphas never stack, and the small steps between neighbouring
   colours are what make it read as a gradient rather than as contour lines. */
.b0 { fill: #FCA5A5; fill-opacity: .07; }
.b1 { fill: #F87171; fill-opacity: .10; }
.b2 { fill: #F97316; fill-opacity: .13; }
.b3 { fill: #FBBF24; fill-opacity: .17; }
.b4 { fill: #FDE047; fill-opacity: .21; }
.b5 { fill: #BEF264; fill-opacity: .26; }
.b6 { fill: #6EE7A8; fill-opacity: .32; }
.b7 { fill: #22C55E; fill-opacity: .38; }

/* Blurring the whole layer softens the join between bands into a continuous
   wash. Filter runs before the clip, so the property line stays crisp. */
.fp-heat { filter: blur(4px); }
.iso-cov { filter: blur(2.6px); }

/* Camera cones stay brand blue so they read as a separate layer from the
   Wi-Fi ramp underneath. */
/* Four 110-degree cones overlap around the whole perimeter, so the fill stays
   very light and the outline does the work of showing each camera's shape. */
.fp-cone { fill: var(--accent); fill-opacity: .19; stroke: var(--accent); stroke-opacity: .75; stroke-width: 1.1; stroke-linejoin: round; }
.fp-cam:hover .fp-cone { fill-opacity: .3; stroke-opacity: 1; }
.fp-ap-dot  { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.fp-cam-dot { fill: var(--ink); stroke: #fff; stroke-width: 2; }
.fp-pulse { fill: none; stroke: var(--accent); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; opacity: 0; }
.fp-tag { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .07em; fill: var(--accent); paint-order: stroke; stroke: #fff; stroke-width: 2.6; stroke-linejoin: round; }
.fp-tag-dark { fill: var(--ink); }
.fp-labels text, .fp-zone-labels text { font-family: var(--sans); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; fill: #6B7280; paint-order: stroke; stroke: #fff; stroke-width: 2.4; stroke-linejoin: round; }
.fp-dim path { fill: none; stroke: var(--faint); stroke-width: 1; }
.fp-dim text { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; fill: var(--muted); }

/* Hover an access point or camera to isolate its layer. Pure enhancement. */
.fp-ap, .fp-cam { transition: opacity .28s var(--ease); }
.fp-aps, .fp-cams, .fp-heat { transition: opacity .28s var(--ease); }
.fp:has(.fp-cam:hover) .fp-cam:not(:hover) { opacity: .2; }
.fp:has(.fp-cam:hover) .fp-heat { opacity: .35; }
.fp:has(.fp-ap:hover) .fp-cams { opacity: .25; }

/* ---- Hero variant switcher (review tool) ---- */
.variant-switch { margin-top: 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.variant-label { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.variant-btns { display: inline-flex; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px; gap: 2px; box-shadow: var(--sh-sm); }
.variant-btns button { padding: 7px 15px; border: 0; background: none; border-radius: var(--r-pill); font-size: .8125rem; color: var(--muted); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.variant-btns button:hover { color: var(--ink); }
.variant-btns button[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* ----------------------------------------------------------------- 9. CARDS */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: clamp(22px, 2.2vw, 30px);
  box-shadow: var(--sh-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: #DDE1E7; }
.card h3 { margin-bottom: 9px; }
.card p { color: var(--muted); font-size: var(--fs-small); line-height: 1.6; }
.card .icon-lg { margin-bottom: 18px; }
.card-feature { padding: clamp(20px, 2vw, 26px); }
.card-feature h3 { font-size: .9375rem; }
.card-feature p { font-size: .8125rem; }

.check-list { list-style: none; padding: 0; margin-top: 28px; display: grid; gap: 13px; }
.check-list li { display: flex; align-items: flex-start; gap: 12px; font-size: .9375rem; color: var(--ink); }
.check-list .icon { width: 17px; height: 17px; margin-top: 3px; color: var(--accent); stroke-width: 2; }

/* --------------------------------------------------------------- 10. STEPS */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 40px); counter-reset: step; }
.step { position: relative; }
.step-num { font-family: var(--mono); font-size: .8125rem; font-weight: 500; letter-spacing: .08em; color: var(--accent); }
.step-rule { display: block; height: 1px; background: var(--border); margin: 14px 0 18px; position: relative; }
.step-rule::before { content: ""; position: absolute; left: 0; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.step h3 { margin-bottom: 9px; }
.step p { color: var(--muted); font-size: var(--fs-small); line-height: 1.62; }
/* Three stages get more room each than six did. */
.steps-3 .step h3 { font-size: 1.1875rem; letter-spacing: -.02em; }
.steps-3 .step p { font-size: .9375rem; }

/* ---- About: a real person behind the product, which matters most while
   there are no reviews yet. Photo drops in via config; until then the SVG
   placeholder shows the same idea. ---- */
.about-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(36px, 5vw, 68px); align-items: center; }
.about-media { position: relative; }
.about-media img, .about-media svg { width: 100%; height: auto; border-radius: var(--r-card); display: block; }
/* The overlay sits inside the photo box, so it scales with it at every width. */
.about-media { position: relative; }
.about-overlay { border-radius: 0; pointer-events: none; }
.about-media img { object-fit: cover; aspect-ratio: 4 / 3; box-shadow: var(--sh-lg); }
.about-copy .body { font-size: 1.0625rem; line-height: 1.65; }
.about-sign { display: flex; align-items: center; gap: 12px; margin-top: 28px; font-size: var(--fs-small); color: var(--muted); }
.about-sign::before { content: ""; width: 26px; height: 1px; background: var(--accent); flex: none; }
.about-note { margin-top: 14px; font-size: var(--fs-micro); color: var(--faint); text-align: center; }

/* Tablet placeholder. Swapped for the real photo via about.photo in config.js. */
.tab-body   { fill: #F7F8FA; stroke: #1B2230; stroke-width: 2.6; stroke-linejoin: round; }
.tab-screen { fill: #FBFCFE; }
.tab-bez    { fill: none; stroke: #D9DEE6; stroke-width: 1; }
.tab-lens   { fill: #C7CDD7; }
.tab-chip   { fill: var(--wash); }
.tab-chiptx { font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em; fill: var(--accent); }
.tab-title  { font-family: var(--sans); font-size: 11px; font-weight: 600; fill: var(--ink); }
.tab-meta   { font-family: var(--mono); font-size: 8.5px; letter-spacing: .07em; fill: var(--faint); }
.tab-rule   { fill: none; stroke: var(--border); stroke-width: 1; }
.tab-tag    { font-family: var(--mono); font-size: 9px; letter-spacing: .06em; fill: var(--accent);
              paint-order: stroke; stroke: #fff; stroke-width: 2.4; stroke-linejoin: round; }
.tab-shadow { fill: rgba(17,24,39,.10); }

/* On a backlit screen the ramp reads brighter than it does on the page, so the
   bands are stronger here than in the hero — same colours, more presence. */
.about-media .b0 { fill-opacity: .26; } .about-media .b1 { fill-opacity: .30; }
.about-media .b2 { fill-opacity: .33; } .about-media .b3 { fill-opacity: .36; }
.about-media .b4 { fill-opacity: .39; } .about-media .b5 { fill-opacity: .43; }
.about-media .b6 { fill-opacity: .47; } .about-media .b7 { fill-opacity: .51; }
.about-media .iso-cov { filter: blur(3px); }

/* ------------------------------------------------------- 11. COMPARE / REPORT */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--gap); }
.compare-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 20px; box-shadow: var(--sh-sm); margin: 0; }
.cmp { width: 100%; height: auto; }
.cmp-floor { fill: #fff; }
/* These plots are a quarter the size of the hero, so the same band opacities
   would wash out. Stronger fills keep the guessed-vs-designed contrast legible
   at thumbnail scale; the blur is scaled to match. */
.cmp-heat { filter: blur(2.6px); }
.cmp-heat .b0 { fill-opacity: .14; }
.cmp-heat .b1 { fill-opacity: .19; }
.cmp-heat .b2 { fill-opacity: .23; }
.cmp-heat .b3 { fill-opacity: .27; }
.cmp-heat .b4 { fill-opacity: .31; }
.cmp-heat .b5 { fill-opacity: .36; }
.cmp-heat .b6 { fill-opacity: .41; }
.cmp-heat .b7 { fill-opacity: .46; }
.cmp-walls path { fill: none; stroke: #4B5563; stroke-width: 1.3; }
.cmp-walls path:first-child { stroke: var(--ink); stroke-width: 2; }
.cmp-dot { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.cmp-dot-gray { fill: var(--faint); }
.cmp-note { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; fill: var(--muted); }
.compare-item figcaption { margin-top: 16px; font-size: var(--fs-small); color: var(--muted); line-height: 1.55; }
.cmp-tag { display: inline-block; font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: var(--wash); border-radius: var(--r-pill); padding: 3px 10px; margin-right: 8px; }
.cmp-tag-gray { color: var(--muted); background: #F3F4F6; }

.report { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: clamp(22px, 2.4vw, 34px); box-shadow: var(--sh-md); }
.report-svg { width: 100%; height: auto; max-width: 460px; margin-inline: auto; }
.rp-back rect { fill: #fff; stroke: var(--border); stroke-width: 1; }
.rp-front rect:first-child { fill: #fff; stroke: var(--border); stroke-width: 1.2; }
.rp-front > path { stroke: var(--border); stroke-width: 1; }
.rp-plan { fill: #FCFDFE; stroke: none; }
.rp-walls path { fill: none; stroke: #4B5563; stroke-width: 1.2; }
.rp-walls path:first-child { stroke: var(--ink); stroke-width: 1.8; }
.rp-dot { fill: var(--accent); stroke: #fff; stroke-width: 1.6; }
.rp-h { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: -.01em; fill: var(--ink); }
.rp-p { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; fill: var(--faint); }
.rp-lines path { stroke: var(--border); stroke-width: 5; stroke-linecap: round; }
.rp-chips rect { fill: var(--wash); }

.report-spec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--border); }
.report-spec dt { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }
.report-spec dd { margin: 0; font-size: var(--fs-small); font-weight: 500; }
.report-contents { margin-top: 20px; font-size: var(--fs-micro); line-height: 1.65; color: var(--muted); }

/* -------------------------------------------------- 12. BENEFITS + NOTES */
/* Three plain benefits replace the network topology diagram: UniFi is the
   reason to believe, not the thing a homeowner is buying. */
.benefit-row { list-style: none; padding: 0; margin-top: clamp(32px, 4vw, 44px); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.benefit-row li { display: grid; justify-items: center; gap: 14px; }
.benefit-row h3 { font-size: .9375rem; font-weight: 500; color: var(--ink); }
.benefit-row .icon-lg { width: 30px; height: 30px; }

/* One line carrying everything the four product cards had to drop. */
.feature-note {
  margin-top: clamp(24px, 2.6vw, 32px);
  text-align: center;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--muted);
}

/* Problem cards run two-up at full container width, so each sentence sits on
   two lines instead of five. */
.card-wide p { font-size: .9375rem; }

/* ------------------------------------------------------------ 13. CALCULATOR */
.calc-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.calc { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: clamp(26px, 3.2vw, 42px); box-shadow: var(--sh-md); }

.field { display: block; }
.field label { display: block; font-size: var(--fs-small); font-weight: 500; margin-bottom: 8px; }
.field .opt { color: var(--faint); font-weight: 400; font-size: var(--fs-micro); margin-left: 4px; }
.req { color: var(--accent); }

.select-wrap { position: relative; }
.select-chevron { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); width: 18px; height: 18px; }

input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%; padding: 13px 15px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-input);
  font-size: .9375rem; line-height: 1.4;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
select { appearance: none; padding-right: 42px; cursor: pointer; }
textarea { resize: vertical; min-height: 108px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,111,255,.14); }
input::placeholder, textarea::placeholder { color: var(--faint); }
input[type="file"] { width: 100%; padding: 11px 14px; border: 1px dashed var(--border); border-radius: var(--r-input); background: #FCFCFD; font-size: var(--fs-small); cursor: pointer; }
input[type="file"]::file-selector-button { margin-right: 12px; padding: 7px 14px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--card); font-size: var(--fs-small); cursor: pointer; }

.calc-out { margin-top: 26px; padding: clamp(22px, 2.6vw, 30px); background: var(--wash); border: 1px solid #D5E6FC; border-radius: 16px; text-align: center; }
.calc-out-label { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--accent); }
.calc-out-value { font-size: clamp(2.4rem, 1.7rem + 2.4vw, 3.4rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.1; margin-top: 8px; font-variant-numeric: tabular-nums; }
.calc-out.is-custom .calc-out-value { font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); letter-spacing: -.025em; line-height: 1.35; }
.calc-out-meta { font-size: var(--fs-small); color: var(--muted); margin-top: 8px; }
.calc .btn-block { margin-top: 22px; }
.calc .disclaimer { border-left: 0; padding-left: 0; text-align: center; font-size: var(--fs-micro); margin-top: 20px; }

/* ----------------------------------------------------------------- 14. TIERS */
.tier { display: flex; flex-direction: column; }
.tier-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.tier-name { font-family: var(--mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.tier-bars { display: inline-flex; gap: 3px; }
.tier-bars i { width: 15px; height: 3px; border-radius: 2px; background: var(--border); }
.tier-bars i.on { background: var(--accent); }
.tier > p { color: var(--muted); font-size: var(--fs-small); line-height: 1.62; }
.tier-for { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.tier ul { list-style: none; padding: 0; margin-top: 12px; display: grid; gap: 8px; }
.tier ul li { position: relative; padding-left: 16px; font-size: var(--fs-small); color: var(--muted); }
.tier ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 1px; background: var(--accent); }
.tier-featured { border-color: rgba(0,111,255,.32); box-shadow: 0 2px 4px rgba(17,24,39,.03), 0 24px 44px -22px rgba(0,111,255,.35); }

/* ------------------------------------------------------------------ 15. FAQ */
.faq { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 2px; font-size: 1.0625rem; font-weight: 500; letter-spacing: -.015em;
  transition: color .18s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-chevron { color: var(--muted); transition: transform .25s var(--ease); }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-body { padding: 0 60px 24px 2px; }
.faq-body p { color: var(--muted); font-size: .9375rem; line-height: 1.65; }
/* Smooth open where supported; a no-op elsewhere. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq-item::details-content { block-size: 0; overflow: hidden; transition: block-size .3s var(--ease), content-visibility .3s allow-discrete; }
  .faq-item[open]::details-content { block-size: auto; }
}

/* ----------------------------------------------------------------- 16. FORM */
.form-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: clamp(26px, 3.4vw, 46px); box-shadow: var(--sh-md); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.field-full { grid-column: 1 / -1; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hint { font-size: var(--fs-micro); color: var(--faint); margin-top: 7px; }

/* Optional upload, folded away: visible enough to find, quiet enough that it
   does not read as another required step before you can submit. */
.upload { border: 1px solid var(--border); border-radius: var(--r-input); background: #FCFCFD; }
.upload summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 13px 15px; font-size: var(--fs-small); color: var(--muted);
}
.upload summary::-webkit-details-marker { display: none; }
.upload summary:hover { color: var(--ink); }
.upload summary .faq-chevron { margin-left: auto; width: 18px; height: 18px; }
.upload[open] summary .faq-chevron { transform: rotate(180deg); }
.upload[open] summary { border-bottom: 1px solid var(--border); }
.upload-body { padding: 14px 15px 15px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.err { font-size: var(--fs-micro); color: #C2261B; margin-top: 7px; }
.form-err { margin-top: 16px; text-align: center; font-size: var(--fs-small); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: #E0796F; }
.form-card .btn-lg { margin-top: 28px; }
.form-note { font-size: var(--fs-micro); color: var(--faint); line-height: 1.6; margin-top: 18px; text-align: center; }

.calc-echo { display: flex; align-items: center; gap: 11px; padding: 13px 18px; background: var(--wash); border: 1px solid #D5E6FC; border-radius: var(--r-input); margin-bottom: 24px; font-size: var(--fs-small); color: var(--ink); }
.calc-echo .icon { width: 18px; height: 18px; color: var(--accent); }
.calc-echo a { margin-left: auto; font-size: var(--fs-micro); }

.form-success { text-align: center; padding: clamp(24px, 4vw, 48px) 0; }
.success-mark { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--wash); color: var(--accent); margin-bottom: 22px; }
.success-mark .icon { width: 26px; height: 26px; stroke-width: 2; }
.form-success h3 { font-size: 1.5rem; letter-spacing: -.03em; margin-bottom: 10px; }
.form-success p { color: var(--muted); max-width: 44ch; margin-inline: auto; }

/* ------------------------------------------------------- 16b. LEGAL PAGES */
.legal-page { padding-top: 8px; }
.legal-page h1 { font-size: var(--fs-h2); letter-spacing: -.032em; line-height: 1.1; }
.legal-page h1 + .lead { margin-top: 20px; }
.legal-page h2 {
  font-size: 1.25rem; letter-spacing: -.022em;
  margin-top: clamp(38px, 4vw, 52px); margin-bottom: 12px;
  padding-top: 22px; border-top: 1px solid var(--border);
}
.legal-page p { color: var(--muted); line-height: 1.7; }
.legal-page p + p { margin-top: 14px; }
.legal-page ul { margin: 14px 0 0; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.legal-page li { position: relative; padding-left: 20px; color: var(--muted); line-height: 1.65; }
.legal-page li::before { content: ""; position: absolute; left: 0; top: .68em; width: 7px; height: 1px; background: var(--accent); }
.legal-page strong { color: var(--ink); font-weight: 600; }
.legal-updated { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-top: 20px; }
.legal-contact { line-height: 1.9; }
.legal-note {
  margin-top: clamp(38px, 4vw, 52px); padding: 18px 22px;
  background: #FCFCFD; border: 1px solid var(--border); border-radius: var(--r-input);
  font-size: var(--fs-small); color: var(--muted);
}
.copyright a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.copyright a:hover { color: var(--accent); }

/* --------------------------------------------------------------- 17. FOOTER */
.site-footer { background: var(--card); border-top: 1px solid var(--border); padding-block: clamp(48px, 6vw, 76px) 32px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); padding-bottom: 40px; border-bottom: 1px solid var(--border); }
.footer-tags { font-size: var(--fs-small); color: var(--muted); margin-top: 14px; padding-left: 31px; max-width: 30ch; }
.footer-desc { font-size: var(--fs-small); color: var(--muted); margin-top: 16px; max-width: 34ch; }
.footer-col h4 { font-family: var(--mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; }
.footer-col p { display: flex; gap: 11px; font-size: var(--fs-small); color: var(--muted); line-height: 1.6; }
.footer-col .icon { width: 17px; height: 17px; margin-top: 3px; color: var(--accent); opacity: .8; }
.footer-contact + .footer-contact { margin-top: 10px; }
.footer-col .btn { margin-top: 20px; }
.footer-bottom { padding-top: 28px; }
.legal { font-size: var(--fs-micro); line-height: 1.7; color: var(--faint); max-width: 90ch; }
.copyright { font-size: var(--fs-micro); color: var(--faint); margin-top: 18px; }

/* ----------------------------------------------------------- 18. MOBILE BAR */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-top: 1px solid var(--border);
  transform: translateY(110%); transition: transform .3s var(--ease);
}
.mobile-bar.is-visible { transform: translateY(0); }
.mobile-cta { flex: 1; }

/* ------------------------------------------------------------ 19. REVEALS */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------ 20. HERO LOAD SEQUENCE
   Runs once, on load. Each layer is staged so the plan reads as if it is being
   plotted: walls, then rooms, then coverage, then cameras, then markers.        */
@keyframes drawIn   { to { stroke-dashoffset: 0; } }
@keyframes fadeIn   { to { opacity: 1; } }
@keyframes bloomIn  { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
@keyframes sweepIn  { from { opacity: 0; transform: scale(.15); } to { opacity: 1; transform: scale(1); } }
@keyframes popIn    { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes pulseOut { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(3.4); opacity: 0; } }

.fp-anim .fp-wall-ext,
.fp-anim .fp-wall-int path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawIn .85s var(--ease) forwards; }
.fp-anim .fp-wall-int path { animation-duration: .7s; animation-delay: .3s; }
.fp-anim .fp-zones,
.fp-anim .fp-labels,
.fp-anim .fp-dim { opacity: 0; animation: fadeIn .6s var(--ease) .75s forwards; }
.fp-anim .fp-ap { opacity: 0; animation: bloomIn .9s var(--ease) forwards; }
.fp-anim .fp-ap:nth-child(1) { animation-delay: .95s; }
.fp-anim .fp-ap:nth-child(2) { animation-delay: 1.08s; }
.fp-anim .fp-ap:nth-child(3) { animation-delay: 1.21s; }
.fp-anim .fp-cam { opacity: 0; animation: sweepIn .6s var(--ease) forwards; }
.fp-anim .fp-cam:nth-child(1) { animation-delay: 1.5s; }
.fp-anim .fp-cam:nth-child(2) { animation-delay: 1.6s; }
.fp-anim .fp-cam:nth-child(3) { animation-delay: 1.7s; }
.fp-anim .fp-cam:nth-child(4) { animation-delay: 1.8s; }
.fp-anim .fp-pulse { animation: pulseOut 3.4s var(--ease) 2.2s infinite; }

/* ------------------------------------------------------------ 21. RESPONSIVE */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-copy .lead { max-width: 46ch; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split-aside { position: static; }
  .split-reverse .split-aside { order: 1; }
  .split-reverse .split-main  { order: 2; }
  .steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .steps-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-media { max-width: 520px; margin-inline: auto; }
}

@media (max-width: 860px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: inline-flex; }
  .grid-3 { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .topology { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 12px; }
  .topo-rail { display: none; }
  .mobile-bar { display: flex; }
  body { padding-bottom: 76px; }
}

@media (max-width: 640px) {
  /* The plan renders at roughly half scale here, so SVG type is scaled up in
     viewBox units to stay readable. The dimension line is dropped — it is the
     detail that survives shrinking least well. */
  .fp-labels text { font-size: 19px; letter-spacing: .06em; }
  .fp-tag { font-size: 17px; }
  .fp-dim { display: none; }
  .iso-tag, .rpt-tag { font-size: 16px; }
  .iso-lvl text { font-size: 15px; }
  .rpt-title { font-size: 18px; }
  .rpt-meta, .rpt-chiptxt { font-size: 14px; }
  .rpt-foot text { font-size: 15px; }
  .cmp-note { font-size: 13px; }
  .hero .eyebrow { font-size: .625rem; letter-spacing: .09em; }

  .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .steps-3 { grid-template-columns: 1fr; }
  .benefit-row { grid-template-columns: 1fr; gap: 22px; }
  .benefit-row li { grid-template-columns: 30px auto; justify-items: start; align-items: center; }
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .calc-fields, .form-grid { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .hero-actions .btn { flex: 1; }
  .plan-block { grid-template-columns: 1fr; }
  .plan-block span + span { border-left: 0; border-top: 1px solid var(--border); }
  .report-spec { grid-template-columns: 1fr; gap: 14px; }
  .faq-body { padding-right: 24px; }
  .variant-switch { gap: 10px; }
  .variant-btns { width: 100%; justify-content: space-between; }
  .variant-btns button { flex: 1; padding: 8px 6px; font-size: .75rem; }
}

/* ------------------------------------------------------- 22. REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .fp-anim .fp-wall-ext, .fp-anim .fp-wall-int path { stroke-dashoffset: 0; }
  .fp-anim .fp-zones, .fp-anim .fp-labels, .fp-anim .fp-dim,
  .fp-anim .fp-ap, .fp-anim .fp-cam { opacity: 1; }
  .fp-anim .fp-pulse { display: none; }
  .mobile-bar { transform: translateY(0); }
}

/* -------------------------------------------- 23. HERO VARIANTS 2, 3 AND 4 */
/* Isometric cutaway — a furnished single-storey model with the roof removed.
   Faces are shaded by orientation only (top brightest, left darkest) so the
   whole model stays inside the blue-grey palette. */
.iso-floor       { fill: #FBFCFE; stroke: #D8DEE7; stroke-width: 1; }
.iso-slab-side   { fill: #EAEEF4; stroke: #D8DEE7; stroke-width: 1; }
/* Walls are drawn as many short runs for correct depth sorting, so they carry
   no outline — a seam would show at every join. Faces read by value alone. */
.iso-wall-top    { fill: #FFFFFF; }
.iso-wall-right  { fill: #F0F3F7; }
.iso-wall-left   { fill: #E3E8F0; }

/* Furniture keeps a hairline so it separates from the walls behind it. */
.iso-soft-top  { fill: #C9DCF4; } .iso-soft-right  { fill: #AFC9EB; } .iso-soft-left  { fill: #9BBAE2; }
.iso-wood-top  { fill: #DCE3EE; } .iso-wood-right  { fill: #C3CEDE; } .iso-wood-left  { fill: #B2BFD2; }
.iso-unit-top  { fill: #ECF1F7; } .iso-unit-right  { fill: #D8E0EB; } .iso-unit-left  { fill: #C7D1DF; }
.iso-light-top { fill: #F4F9FF; } .iso-light-right { fill: #E2EBF6; } .iso-light-left { fill: #D3DEED; }
.iso-dark-top  { fill: #8B99AC; } .iso-dark-right  { fill: #77869A; } .iso-dark-left  { fill: #6A7889; }
.iso-soft-top, .iso-soft-right, .iso-soft-left,
.iso-wood-top, .iso-wood-right, .iso-wood-left,
.iso-unit-top, .iso-unit-right, .iso-unit-left,
.iso-light-top, .iso-light-right, .iso-light-left,
.iso-dark-top, .iso-dark-right, .iso-dark-left {
  stroke: #A9B4C4; stroke-width: .6; stroke-linejoin: round; stroke-opacity: .55;
}
.iso-ground { fill: #F8FAFC; stroke: none; }
.iso-floor { fill: #FDFEFF; stroke: #D3DAE4; stroke-width: 1; }
.iso-slab-side { fill: #E7ECF3; stroke: #D3DAE4; stroke-width: 1; }

.iso-cone { fill: var(--accent); fill-opacity: .17; stroke: var(--accent); stroke-opacity: .3; stroke-width: 1; }
.iso-leader { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 3; stroke-opacity: .5; fill: none; }
/* Sight lines tie the wall-mounted camera to the patch of ground it covers. */
.iso-sight { stroke: var(--accent); stroke-width: 1; stroke-opacity: .45; fill: none; }
.iso-ap { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.iso-camdot { fill: var(--ink); stroke: #fff; stroke-width: 2; }
.iso-room {
  font-family: var(--sans); font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  fill: #7C8798; text-anchor: middle;
  paint-order: stroke; stroke: #fff; stroke-width: 2.6; stroke-linejoin: round;
}
.iso-tag {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .07em; fill: var(--accent);
  paint-order: stroke; stroke: #fff; stroke-width: 2.6; stroke-linejoin: round;
}
.iso-tag-dark { fill: var(--ink); }

/* Tablet report */
.rpt-shadow { fill: rgba(17,24,39,.06); }
.rpt-body   { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.rpt-screen { fill: #FCFDFE; stroke: var(--border); stroke-width: 1; }
.rpt-lens   { fill: var(--border); }
.rpt-title  { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: -.015em; fill: var(--ink); }
.rpt-meta   { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; fill: var(--faint); }
.rpt-rule   { fill: none; stroke: var(--border); stroke-width: 1; }
.rpt-planbg { fill: #fff; }
.rpt-walls path { fill: none; stroke: #4B5563; stroke-width: 1.2; }
.rpt-walls path:first-child { stroke: var(--ink); stroke-width: 1.9; }
.rpt-ap     { fill: var(--accent); stroke: #fff; stroke-width: 1.8; }
.rpt-tag    { font-family: var(--mono); font-size: 9px; letter-spacing: .07em; fill: var(--accent); }
.rpt-chip rect { fill: var(--wash); }
.rpt-chiptxt { font-family: var(--sans); font-size: 10px; fill: var(--accent); }
.rpt-lines path { stroke: var(--border); stroke-width: 5; stroke-linecap: round; }
.rpt-foot text { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: -.01em; fill: var(--ink); }
.rpt-foot .rpt-meta { font-weight: 400; }
.rpt-bars rect { fill: var(--accent); fill-opacity: .55; }

/* Variant swap fade */
.plan-stage.is-swapping svg { opacity: 0; }
.plan-stage svg { transition: opacity .22s var(--ease); }

/* ------------------------------------------------------------- 24. PRINT */
@media print {
  .site-header, .mobile-bar, .variant-switch, .hero-actions, .btn { display: none !important; }
  body { background: #fff; }
  .reveal { opacity: 1; transform: none; }
  .card, .calc, .form-card, .report { box-shadow: none; break-inside: avoid; }
}