/* ==========================================================
   TYPEFACE
   Montserrat, self-hosted. Serving the four weights ourselves
   removes a render-blocking request to a third-party origin
   (two DNS + TLS handshakes) from every first visit. Latin
   subset only: 75KB for the whole family.
   ========================================================== */
@font-face{
  font-family:"Montserrat"; font-style:normal; font-weight:400;
  font-display:swap; src:url("fonts/montserrat-400.woff2") format("woff2");
}
@font-face{
  font-family:"Montserrat"; font-style:normal; font-weight:500;
  font-display:swap; src:url("fonts/montserrat-500.woff2") format("woff2");
}
@font-face{
  font-family:"Montserrat"; font-style:normal; font-weight:600;
  font-display:swap; src:url("fonts/montserrat-600.woff2") format("woff2");
}
@font-face{
  font-family:"Montserrat"; font-style:normal; font-weight:700;
  font-display:swap; src:url("fonts/montserrat-700.woff2") format("woff2");
}


/* ==========================================================
   DESIGN TOKENS
   ========================================================== */
:root{
  --ink:        #171226;
  --ink-2:      #443D5A;
  --muted:      #78718E;
  --purple:     #6D28D9;   /* primary brand purple  */
  --purple-dk:  #55189E;   /* hover / deep          */
  --purple-lt:  #A78BFA;   /* light accent          */
  --glow:       #C026D3;   /* fuchsia glow - sparing */
  --tint:       #F7F5FC;   /* lavender surface      */
  --tint-2:     #EFEAF9;
  --line:       #E7E2F2;
  --line-dash:  #C9BCEC;
  --white:      #FFFFFF;
  --radius:     3px;
  --radius-lg:  3px;
  --font-display: "Montserrat", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-text:    "Montserrat", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --shadow-sm:  none;
  --shadow-md:  none;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; }
body{
  font-family:var(--font-text);
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img,canvas{ max-width:100%; display:block; }
a{ color:var(--purple); text-decoration:none; }
a:hover{ color:var(--purple-dk); }
::selection{ background:var(--purple); color:#fff; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.18; letter-spacing:-0.025em; color:var(--ink); }
h1{ font-size:clamp(2.35rem, 5vw, 3.6rem); letter-spacing:-0.035em; line-height:1.1; }
h2{ font-size:clamp(1.8rem, 3.1vw, 2.4rem); letter-spacing:-0.03em; }
h3{ font-size:1.18rem; letter-spacing:-0.015em; }

.container{ max-width:1140px; margin:0 auto; padding:0 24px; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
section{ padding:104px 0; }
section.tight{ padding:72px 0; }

.eyebrow{
  display:inline-block;
  font-size:.72rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--purple);
  margin-bottom:16px;
}
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ text-wrap:balance; }
.section-head p{ margin-top:16px; color:var(--ink-2); font-size:1.08rem; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-text); font-weight:600; font-size:.95rem;
  padding:14px 24px; border-radius:3px;
  border:1px solid transparent; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--purple); color:#fff; }
.btn-primary:hover{ background:var(--purple-dk); color:#fff; }
.btn-secondary{ background:#fff; color:var(--ink); border-color:var(--ink); }
.btn-secondary:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.btn-ghost{ background:transparent; color:var(--ink-2); padding:10px 16px; }
.btn-ghost:hover{ color:var(--purple); }
.btn .arrow{ transition:transform .18s ease; }
.btn:hover .arrow{ transform:translateX(2px); }
.btn:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; }

/* ---------- Media placeholder slots ---------- */
.media-slot{
  position:relative;
  border:1px dashed var(--line-dash);
  border-radius:2px;
  background:var(--tint);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; gap:10px;
  color:var(--muted);
  overflow:hidden;
  padding:24px;
}
.media-slot .slot-icon{ opacity:.8; }
.media-slot .slot-kind{
  font-size:.7rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--purple);
}
.media-slot .slot-desc{ font-size:.85rem; max-width:300px; line-height:1.45; }
.ar-16x9{ aspect-ratio:16/9; }
.ar-4x3{ aspect-ratio:4/3; }
.ar-3x4{ aspect-ratio:3/4; }
.ar-1x1{ aspect-ratio:1/1; }
.ar-9x16{ aspect-ratio:9/16; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; }
.reveal.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ==========================================================
   NAV
   ========================================================== */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease;
}
header.nav.scrolled{ border-bottom-color:var(--line); }
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.logo{ display:flex; align-items:center; }
.logo img{ display:block; height:27px; width:auto; }
.logo .logo-on-dark{ display:none; }
/* Over the hero film the nav is transparent, so the wordmark flips to
   its white version. The mark keeps its colour in both. */
header.nav.over-hero .logo .logo-on-light{ display:none; }
header.nav.over-hero .logo .logo-on-dark{ display:block; }
footer .logo img{ height:30px; margin-bottom:4px; }

.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a.link{
  font-size:.87rem; font-weight:500; color:var(--ink-2);
  padding:8px 11px; border-radius:3px;
}
.nav-links a.link:hover{ color:var(--purple-dk); background:var(--tint); }
.nav-cta{ margin-left:8px; padding:11px 18px; font-size:.86rem; }
/* Hamburger: hidden on desktop, the only nav control on mobile */
.nav-toggle{
  display:none; width:42px; height:42px; padding:10px 9px;
  background:none; border:none; cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.nav-toggle span{
  display:block; height:2px; width:100%; background:var(--ink);
  transition:transform .22s ease, opacity .18s ease;
}
header.nav.over-hero .nav-toggle span{ background:#fff; }
body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

@media (max-width: 900px){
  .nav-toggle{ display:flex; }
  .nav-inner{ height:64px; }
  .nav-links{
    position:fixed; left:0; right:0; top:64px;
    background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0;
    padding:8px 20px 24px;
    max-height:calc(100dvh - 64px); overflow-y:auto;
    transform:translateY(-12px); opacity:0; visibility:hidden;
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  }
  body.nav-open .nav-links{ transform:none; opacity:1; visibility:visible; }
  body.nav-open{ overflow:hidden; }
  .nav-links a.link{
    display:block; font-size:1.02rem; font-weight:500; color:var(--ink);
    padding:15px 4px; border-bottom:1px solid var(--line); border-radius:0;
  }
  .nav-links a.link:hover{ background:none; color:var(--purple-dk); }
  header.nav.over-hero .nav-links a.link{ color:var(--ink); }
  .nav-cta{ margin:18px 0 0; justify-content:center; padding:15px 20px; font-size:.95rem; }
  /* the sticky bar at the bottom already carries the quote CTA */
  header.nav .nav-cta{ display:none; }
  body.nav-open header.nav .nav-cta{ display:inline-flex; }
  header.nav.over-hero{ background:transparent; }
  body.nav-open header.nav{ background:#fff; }
  body.nav-open header.nav .logo{ color:var(--ink); }
  body.nav-open .nav-toggle span{ background:var(--ink); }
}

/* ==========================================================
   HERO - full-bleed product film
   ========================================================== */
.hero{
  position:relative;
  min-height:min(100svh, 900px);
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:#0B0716;
  isolation:isolate;
}
.hero-video{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  object-fit:cover; object-position:center 42%;
}
/* Scrim: dark at the base for copy, light touch up top for the nav */
.hero-scrim{
  position:absolute; inset:0; z-index:-1;
  /* Functional scrim only: keeps white type legible over moving footage. */
  background:linear-gradient(180deg, rgba(9,6,18,.60) 0%, rgba(9,6,18,.14) 24%, rgba(9,6,18,.20) 46%, rgba(9,6,18,.80) 84%, rgba(9,6,18,.93) 100%);
}
.hero-inner{
  width:100%;
  padding-top:150px; padding-bottom:64px;   /* side padding stays with .container */
  position:relative;
}
.hero-copy{ max-width:720px; }
.hero .eyebrow{
  color:#D9C8FF;
  display:flex; align-items:center; gap:10px;
  margin-bottom:20px;
}
.hero .eyebrow::before{
  content:""; width:24px; height:1px;
  background:var(--purple-lt);
}
.hero h1{
  color:#fff;
  text-wrap:balance;
  text-shadow:0 2px 40px rgba(0,0,0,.45);
}
.hero h1 .accent{ color:#B69BFF; }
.hero-sub{
  margin-top:20px; font-size:1.08rem; max-width:575px;
  color:rgba(255,255,255,.82);
  text-shadow:0 1px 20px rgba(0,0,0,.5);
}
.hero-ctas{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-ctas .btn-secondary{
  background:transparent; color:#fff;
  border-color:rgba(255,255,255,.45);
}
.hero-ctas .btn-secondary:hover{ background:#fff; border-color:#fff; color:var(--ink); }
.hero-proof{
  margin-top:44px; display:flex; flex-wrap:wrap; gap:12px 30px;
  font-size:.9rem; color:rgba(255,255,255,.78);
}
.proof-item{ display:flex; align-items:center; gap:8px; font-weight:500; }
.proof-item svg{ flex:none; }
.proof-item svg *{ stroke:#C4A6FF; }
.proof-item svg [fill="#6D28D9"]{ fill:#C4A6FF; }

/* Film controls (sound + scroll cue) */
.hero-tools{
  position:absolute; right:24px; bottom:34px; z-index:3;
  display:flex; align-items:center; gap:10px;
}
.film-btn{
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(9,6,18,.5); color:#fff;
  border:1px solid rgba(255,255,255,.35); border-radius:3px;
  padding:10px 16px; cursor:pointer;
  font-family:var(--font-text); font-size:.85rem; font-weight:500;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.film-btn:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.film-btn svg{ flex:none; }
.scroll-cue{
  position:absolute; left:50%; bottom:36px; transform:translateX(-50%);
  z-index:3; color:rgba(255,255,255,.6);
  animation:cue 2.4s ease-in-out infinite;
}
@keyframes cue{ 0%,100%{ transform:translate(-50%,0); opacity:.55 } 50%{ transform:translate(-50%,7px); opacity:1 } }
@media (prefers-reduced-motion: reduce){ .scroll-cue{ animation:none; } }

/* Nav sits over the film until the page scrolls */
header.nav.over-hero{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
header.nav.over-hero .logo{ color:#fff; }
header.nav.over-hero .nav-links a.link{ color:rgba(255,255,255,.85); }
header.nav.over-hero .nav-links a.link:hover{ color:#fff; background:rgba(255,255,255,.14); }

@media (max-width: 960px){
  .hero{ min-height:min(92svh, 760px); }
  .hero-inner{ padding-top:120px; padding-bottom:104px; }
  .hero-sub{ font-size:1.05rem; }
  .hero-tools{ right:16px; bottom:24px; }
  .scroll-cue{ display:none; }
}
@media (max-width: 560px){
  .hero-proof{ gap:10px 20px; font-size:.84rem; }
}

/* ---------- Ratings strip ---------- */
.ratings-strip{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--tint);
  padding:22px 0;
}
.ratings-inner{
  display:flex; align-items:center; justify-content:center;
  gap:18px 48px; flex-wrap:wrap;
  font-size:.92rem; color:var(--ink-2);
}
@media (max-width: 720px){
  .ratings-strip{ padding:18px 0; }
  .ratings-inner{
    display:grid; grid-template-columns:1fr 1fr; gap:14px 18px;
    text-align:center; font-size:.82rem;
  }
  .rating-item{ justify-content:center; flex-direction:column; gap:4px; }
}
.rating-item{ display:flex; align-items:center; gap:10px; font-weight:500; }
.stars{ color:#F5A623; letter-spacing:2px; font-size:.95rem; }
.rating-note{ color:var(--muted); font-size:.85rem; }

/* ==========================================================
   PREVIEW TOOL
   ========================================================== */
#preview{ background:var(--tint); padding:40px 0 44px; }
#preview .section-head{ margin-bottom:16px; max-width:600px; }
#preview .section-head .eyebrow{ margin-bottom:8px; }
#preview .section-head h2{ font-size:clamp(1.55rem, 2.5vw, 1.95rem); }
#preview .section-head p{ margin-top:8px; font-size:.95rem; }
.preview-shell{
  background:#fff; border:1px solid var(--line);
  border-radius:3px; overflow:hidden;
}
.preview-steps{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--line);
}
.pstep{
  display:flex; gap:10px; align-items:center;
  padding:8px 18px;
}
.pstep + .pstep{ border-left:1px solid var(--line); }
.pstep-num{
  flex:none; width:24px; height:24px; border-radius:2px;
  background:var(--tint-2); color:var(--purple-dk);
  font-weight:600; font-size:.85rem;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
}
.pstep h4{ font-size:.9rem; margin-bottom:1px; }
.pstep p{ font-size:.78rem; color:var(--muted); line-height:1.35; }
.preview-body{
  display:grid; grid-template-columns:1fr 268px;
}
.preview-canvas-wrap{
  position:relative; background:#0E0A1A;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
/* Crop the letterboxed sky so the tool stays inside one screen.
   Only on wide screens: on a phone the panel stacks anyway, and the
   crop would cut the roof off the sample house. */
@media (min-width: 921px){ #previewCanvas{ margin:-9% 0; } }
#previewCanvas{ width:100%; height:auto; cursor:crosshair; display:block; }
.canvas-hint{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  background:rgba(14,10,26,.72); color:#E8E2F8;
  backdrop-filter:blur(6px);
  font-size:.82rem; padding:8px 16px; border-radius:3px;
  pointer-events:none;
  max-width:calc(100% - 28px); text-align:center; line-height:1.35;
  border:1px solid rgba(167,139,250,.3);
  transition:opacity .3s ease;
}
.canvas-hint.hidden{ opacity:0; }
.preview-controls{
  border-left:1px solid var(--line);
  padding:14px; display:flex; flex-direction:column; gap:8px;
  background:#fff;
}
.ctl-group label.ctl-label{
  display:block; font-size:.68rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:6px;
}
.pattern-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.pattern-btn{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); background:#fff;
  border-radius:3px; padding:6px 8px;
  font-family:var(--font-text); font-size:.75rem; font-weight:500;
  color:var(--ink-2); cursor:pointer; transition:all .15s ease;
  text-align:left;
}
.pattern-btn:hover{ border-color:var(--line-dash); }
.pattern-btn.active{
  border-color:var(--purple); background:var(--tint);
  color:var(--purple-dk); font-weight:600;
}
.swatch{ display:flex; flex:none; }
.swatch i{
  width:9px; height:9px; border-radius:1px;
  margin-left:-2px; border:1.5px solid #fff;
}
.swatch i:first-child{ margin-left:0; }
.slider-row{ display:flex; align-items:center; gap:10px; }
.slider-row input[type=range]{ margin:0; }
.slider-row input[type=range]{
  flex:1; accent-color:var(--purple); height:4px;
}
.slider-val{ font-size:.78rem; color:var(--muted); min-width:34px; text-align:right; font-variant-numeric:tabular-nums; }
.seg{
  display:flex; border:1px solid var(--line); border-radius:3px; overflow:hidden;
}
.seg button{
  flex:1; border:none; background:#fff; padding:7px 4px;
  font-family:var(--font-text); font-size:.78rem; font-weight:500;
  color:var(--ink-2); cursor:pointer; transition:all .15s ease;
}
.seg button + button{ border-left:1px solid var(--line); }
.seg button.active{ background:var(--purple); color:#fff; font-weight:600; }
.line-chip{
  font-size:.82rem; color:var(--purple-dk); font-weight:600;
  background:var(--tint); border:1px solid var(--tint-2);
  border-radius:2px; padding:6px 9px; margin-bottom:0; font-size:.75rem; line-height:1.2;
}
.btn-block{ width:100%; justify-content:center; padding:8px 12px; font-size:.8rem; }
.btn-block:disabled{ color:var(--muted); border-color:var(--line); background:var(--tint); cursor:default; }
#previewCanvas:focus-visible{ outline:2px solid var(--purple-lt); outline-offset:-2px; }
.preview-actions{ display:flex; flex-direction:column; gap:6px; margin-top:auto; }
.preview-actions .btn{ justify-content:center; padding:8px 14px; font-size:.82rem; }
.preview-actions .row2{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
/* rooflines: counter and action share one row */
.line-row{ display:flex; gap:7px; align-items:stretch; }
.line-row .line-chip{ flex:1; margin:0; display:flex; align-items:center; }
.line-row .btn-block{ width:auto; white-space:nowrap; }
.btn-outline-sm{
  background:#fff; border:1px solid var(--line); color:var(--ink-2);
}
.btn-outline-sm:hover{ border-color:var(--line-dash); color:var(--purple-dk); }
.upload-note{ font-size:.7rem; color:var(--muted); text-align:center; line-height:1.3; margin-top:1px; }
/* two sliders side by side to keep the panel inside one screen */
.ctl-pair{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
/* value sits in the label so paired sliders can use the full width */
.ctl-group label.ctl-label.inline{
  display:flex; justify-content:space-between; align-items:baseline; gap:8px;
}
.ctl-group label.ctl-label.inline .slider-val{
  min-width:0; letter-spacing:0; text-transform:none;
  font-size:.76rem; font-weight:600; color:var(--purple-dk);
}
.ctl-group input[type=range]{ width:100%; accent-color:var(--purple); height:4px; margin:0; display:block; }
/* Note that the demo is a subset of what the real app can do */
.preview-more{
  border-top:1px solid var(--line);
  padding:9px 18px; display:flex; align-items:center; gap:18px;
  flex-wrap:wrap; justify-content:space-between;
  background:var(--tint);
}
.preview-more p{ font-size:.86rem; color:var(--ink-2); margin:0; }
.preview-more strong{ color:var(--purple-dk); }
.preview-more .stat-pair{ display:flex; gap:26px; }
.preview-more .stat-pair span{ font-size:.86rem; color:var(--ink-2); }
.preview-more .stat-pair b{
  font-family:var(--font-display); font-size:1.15rem; color:var(--ink);
  display:block; line-height:1.2; font-variant-numeric:tabular-nums;
}
@media (max-width: 920px){
  .preview-steps{ grid-template-columns:1fr; }
  .pstep + .pstep{ border-left:none; border-top:1px solid var(--line); }
  .preview-body{ grid-template-columns:1fr; }
  .preview-controls{ border-left:none; border-top:1px solid var(--line); }
}

/* ==========================================================
   PRODUCT SYSTEM
   ========================================================== */
.cards-3{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.card{
  border:1px solid var(--line); border-radius:3px;
  background:#fff; overflow:hidden;
  transition:border-color .18s ease;
}
.card:hover{ border-color:var(--line-dash); }
.card .media-slot{ border:none; border-bottom:1px dashed var(--line-dash); border-radius:0; }
.card-body{ padding:26px; }
.card-body h3{ margin-bottom:10px; }
.card-body p{ font-size:.95rem; color:var(--ink-2); }
.card-spec{
  margin-top:16px; padding-top:16px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px;
}
.chip{
  font-size:.74rem; font-weight:600; color:var(--purple-dk);
  background:var(--tint); border:1px solid var(--tint-2);
  padding:4px 9px; border-radius:2px;
}
@media (max-width: 920px){ .cards-3{ grid-template-columns:1fr; } }

/* ==========================================================
   DAY / NIGHT SPLIT
   ========================================================== */
.daynight{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
.dn-panel{ position:relative; }
.dn-tag{
  position:absolute; top:16px; left:16px; z-index:2;
  background:rgba(255,255,255,.92); backdrop-filter:blur(4px);
  border:1px solid var(--line);
  font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); padding:6px 11px; border-radius:2px;
}
.dn-panel.night .dn-tag{ background:rgba(23,18,38,.85); color:#D8CDF5; border-color:rgba(167,139,250,.3); }
.dn-panel.night .media-slot{
  background:#171226; border-color:#4B3A75; color:#9C92BC;
}
.dn-panel.night .media-slot .slot-kind{ color:var(--purple-lt); }
@media (max-width: 860px){ .daynight{ grid-template-columns:1fr; } }

/* ==========================================================
   USE CASES
   ========================================================== */
.usecases{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.usecase h3{ margin:18px 0 8px; }
.usecase p{ font-size:.95rem; color:var(--ink-2); }
@media (max-width: 920px){ .usecases{ grid-template-columns:1fr; } }

/* ==========================================================
   TIMELINE
   ========================================================== */
#install{ background:var(--tint); }
.timeline{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  position:relative; margin-top:8px;
}
.tl-step{ position:relative; padding:0 26px 0 0; }
.tl-track{
  display:flex; align-items:center; gap:0; margin-bottom:22px;
}
.tl-dot{
  flex:none; width:36px; height:36px; border-radius:2px;
  background:var(--purple); border:1px solid var(--purple);
  color:#fff;
  font-family:var(--font-display); font-weight:600; font-size:.92rem;
  display:flex; align-items:center; justify-content:center;
  z-index:1; margin-right:14px;
}
.tl-line{ height:1px; flex:1; background:var(--line-dash); }
.tl-step:last-child .tl-line{ visibility:hidden; }
.tl-step h3{ font-size:1.08rem; margin-bottom:8px; }
.tl-step p{ font-size:.92rem; color:var(--ink-2); }
.tl-meta{
  display:inline-block; margin-top:12px;
  font-size:.76rem; font-weight:600; color:var(--purple);
  letter-spacing:.08em; text-transform:uppercase;
}
@media (max-width: 920px){
  .timeline{ grid-template-columns:1fr; gap:36px; }
  .tl-track{ margin-bottom:14px; }
  .tl-line{ display:none; }
}

/* ==========================================================
   APP SECTION
   ========================================================== */
.app-grid{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:72px; align-items:center;
}
.app-phone{ max-width:320px; margin:0 auto; width:100%; }
.feature-list{ display:flex; flex-direction:column; gap:26px; margin-top:36px; }
.feature{ display:flex; gap:18px; }
.feature-icon{
  flex:none; width:42px; height:42px; border-radius:2px;
  background:var(--tint); border:1px solid var(--tint-2);
  display:flex; align-items:center; justify-content:center;
  color:var(--purple);
}
.feature h3{ font-size:1.05rem; margin-bottom:4px; }
.feature p{ font-size:.94rem; color:var(--ink-2); }
@media (max-width: 920px){
  .app-grid{ grid-template-columns:1fr; gap:44px; }
}

/* ==========================================================
   COMPARISON
   ========================================================== */
.compare-wrap{ overflow-x:auto; }
.compare{
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid var(--line); border-radius:3px;
  overflow:hidden; min-width:640px;
}
.compare th, .compare td{
  padding:16px 22px; text-align:left; font-size:.95rem;
  border-bottom:1px solid var(--line);
}
.compare thead th{
  font-family:var(--font-display); font-size:.95rem; font-weight:600;
  background:var(--tint);
}
.compare thead th.hl{ background:var(--purple); color:#fff; }
.compare tbody tr:last-child td{ border-bottom:none; }
.compare td.hl{ background:var(--tint); font-weight:600; color:var(--purple-dk); }
.compare td{ color:var(--ink-2); }
.compare td:first-child{ color:var(--ink); font-weight:500; }
.check{ color:var(--purple); font-weight:700; }
.cross{ color:#C4BFD4; }

/* ==========================================================
   TESTIMONIALS
   ========================================================== */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.quote-card{
  border:1px solid var(--line); border-radius:3px;
  padding:28px; background:#fff;
  display:flex; flex-direction:column; gap:18px;
}
.quote-card .stars{ font-size:.9rem; }
.quote-card blockquote{
  font-size:.97rem; color:var(--ink-2); line-height:1.6;
  border:none; font-style:normal;
}
.quote-attr{ display:flex; align-items:center; gap:12px; margin-top:auto; }
/* No avatars: a name and a source read cleaner than an empty frame.
   To add customer photos later, drop an <img> back in here. */
.quote-attr{ padding-top:16px; border-top:1px solid var(--line); }
.quote-attr .who{ font-size:.9rem; font-weight:600; }
.quote-attr .where{ font-size:.78rem; color:var(--muted); }
@media (max-width: 920px){ .quotes{ grid-template-columns:1fr; } }

/* ==========================================================
   FAQ
   ========================================================== */
.faq-list{ max-width:760px; margin:0 auto; }
details.faq{
  border-bottom:1px solid var(--line);
}
details.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 4px;
  font-family:var(--font-display); font-weight:600; font-size:1.04rem;
  transition:color .15s ease;
}
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary:hover{ color:var(--purple-dk); }
details.faq summary .plus{
  flex:none; width:22px; height:22px; color:var(--purple);
  transition:transform .25s ease;
}
details.faq[open] summary .plus{ transform:rotate(45deg); }
details.faq .faq-body{ padding:0 40px 22px 4px; color:var(--ink-2); font-size:.97rem; }

/* ==========================================================
   QUOTE / CTA
   ========================================================== */
#quote{ background:#171226; color:#CFC7E6; }
#quote .eyebrow{ color:var(--purple-lt); }
#quote h2{ color:#fff; }
.quote-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start;
}
.quote-benefits{ margin-top:28px; display:flex; flex-direction:column; gap:16px; }
.qb{ display:flex; gap:12px; align-items:flex-start; font-size:.97rem; }
.qb svg{ flex:none; margin-top:3px; color:var(--purple-lt); }
.quote-contact{
  margin-top:36px; padding-top:28px; border-top:1px solid rgba(167,139,250,.22);
  font-size:.94rem; display:flex; flex-direction:column; gap:8px;
}
.quote-contact a{ color:#fff; font-weight:500; }
.quote-contact a:hover{ color:var(--purple-lt); }
.form-card{
  background:#fff; border-radius:3px;
  padding:36px; color:var(--ink);
}
.form-card h3{ font-size:1.3rem; margin-bottom:6px; }
.form-card .form-sub{ font-size:.9rem; color:var(--muted); margin-bottom:24px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-field{ margin-bottom:14px; }
.form-field label{
  display:block; font-size:.8rem; font-weight:600; color:var(--ink-2);
  margin-bottom:6px;
}
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:12px 14px;
  border:1px solid var(--line); border-radius:3px;
  font-family:var(--font-text); font-size:.95rem; color:var(--ink);
  background:#fff; transition:border-color .15s ease, box-shadow .15s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(109,40,217,.14);
}
.form-field textarea{ resize:vertical; min-height:84px; }
.form-submit{ width:100%; justify-content:center; margin-top:8px; padding:15px; font-size:1rem; }
.form-fineprint{ margin-top:14px; font-size:.78rem; color:var(--muted); text-align:center; }
.form-success{
  display:none; text-align:center; padding:36px 12px;
}
.form-success.show{ display:block; }
.form-success .big{ font-size:2.2rem; margin-bottom:12px; }
@media (max-width: 920px){
  .quote-grid{ grid-template-columns:1fr; gap:44px; }
  .form-row{ grid-template-columns:1fr; }
}

/* ==========================================================
   STICKY MOBILE CTA - keeps the quote action one tap away
   ========================================================== */
.mobile-cta{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:99;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  gap:10px;
  transform:translateY(110%); transition:transform .3s ease;
}
.mobile-cta.show{ transform:none; }
.mobile-cta .btn{ flex:1; justify-content:center; padding:13px 12px; }
@media (max-width: 720px){
  .mobile-cta{ display:flex; }
  body{ padding-bottom:76px; }
  section{ padding:72px 0; }
  section.tight{ padding:56px 0; }
}

/* ==========================================================
   FOOTER
   ========================================================== */
footer{
  border-top:1px solid var(--line);
  padding:56px 0 40px; background:#fff;
}
.footer-grid{
  display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.footer-brand{ max-width:300px; }
.footer-brand p{ margin-top:14px; font-size:.88rem; color:var(--muted); }
.footer-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.fcol h4{
  font-size:.76rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); margin-bottom:14px;
}
.fcol a{ display:block; font-size:.92rem; color:var(--ink-2); padding:5px 0; }
.fcol a:hover{ color:var(--purple-dk); }
.footer-base{
  margin-top:48px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.82rem; color:var(--muted);
}

/* ==========================================================
   PAYBACK / SAVINGS
   ========================================================== */
#payback{ background:var(--ink); color:#CFC7E6; }
#payback .eyebrow{ color:var(--purple-lt); }
#payback h2{ color:#fff; }
#payback .section-head p{ color:rgba(255,255,255,.72); }
.pay-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.pay-note{ font-size:.95rem; color:rgba(255,255,255,.72); }
.pay-note + .pay-note{ margin-top:14px; }
.pay-calc{ background:#fff; color:var(--ink); border-radius:3px; padding:30px; }
.pay-calc h3{ font-size:1.12rem; margin-bottom:4px; }
.pay-calc .calc-sub{ font-size:.86rem; color:var(--muted); margin-bottom:22px; }
.calc-field label{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.72rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:10px;
}
.calc-field label b{
  font-family:var(--font-display); font-size:1.1rem; color:var(--purple-dk);
  letter-spacing:0; text-transform:none; font-variant-numeric:tabular-nums;
}
.calc-field input[type=range]{ width:100%; accent-color:var(--purple); height:4px; }
.calc-scale{
  display:flex; justify-content:space-between;
  font-size:.72rem; color:var(--muted); margin-top:6px;
  font-variant-numeric:tabular-nums;
}
.calc-bars{ margin-top:26px; display:flex; flex-direction:column; gap:16px; }
.bar-row .bar-label{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.86rem; margin-bottom:7px;
}
.bar-row .bar-label span{ color:var(--ink-2); }
.bar-row .bar-label b{ font-family:var(--font-display); font-size:1.02rem; font-variant-numeric:tabular-nums; }
.bar-track{ height:12px; background:var(--tint-2); border-radius:2px; overflow:hidden; }
.bar-fill{ height:100%; width:0; transition:width .35s ease; }
.bar-fill.seasonal{ background:#B9AED4; }
.bar-fill.luminair{ background:var(--purple); }
.calc-out{
  margin-top:26px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; gap:30px; flex-wrap:wrap;
}
.calc-out div{ min-width:118px; }
.calc-out .k{
  font-size:.72rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:5px;
}
.calc-out .v{
  font-family:var(--font-display); font-size:1.75rem; font-weight:600;
  color:var(--purple-dk); font-variant-numeric:tabular-nums; line-height:1.1;
}
.calc-fine{ margin-top:20px; font-size:.76rem; color:var(--muted); line-height:1.45; }
@media (max-width: 920px){ .pay-grid{ grid-template-columns:1fr; gap:36px; } }

/* ==========================================================
   INQUIRY TYPE (quote form)
   ========================================================== */
.inquiry-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; position:relative; }
.inquiry-grid input[type=radio]{
  position:absolute; width:1px; height:1px; padding:0; margin:0; border:0;
  opacity:0; pointer-events:none;
}
.inquiry-opt{
  display:block; border:1px solid var(--line); border-radius:3px;
  padding:11px 13px; cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease;
}
.inquiry-opt:hover{ border-color:var(--line-dash); }
.inquiry-opt .t{ display:block; font-size:.88rem; font-weight:600; color:var(--ink); }
.inquiry-opt .d{ display:block; font-size:.75rem; color:var(--muted); margin-top:2px; }
input[type=radio]:checked + .inquiry-opt{ border-color:var(--purple); background:var(--tint); }
input[type=radio]:checked + .inquiry-opt .t{ color:var(--purple-dk); }
input[type=radio]:focus-visible + .inquiry-opt{ outline:2px solid var(--purple); outline-offset:2px; }
@media (max-width: 560px){ .inquiry-grid{ grid-template-columns:1fr; } }

/* ==========================================================
   INTERIOR PAGE HEADER
   ========================================================== */
.page-head{ background:var(--ink); color:#CFC7E6; padding:150px 0 72px; }
.page-head .eyebrow{ color:var(--purple-lt); }
.page-head h1{ color:#fff; font-size:clamp(2.1rem, 4.2vw, 3rem); max-width:21ch; text-wrap:balance; }
.page-head p{ margin-top:18px; font-size:1.1rem; max-width:56ch; color:rgba(255,255,255,.76); }
.page-head .btn-row{ margin-top:30px; display:flex; gap:12px; flex-wrap:wrap; }
.page-head .btn-secondary{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.page-head .btn-secondary:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.crumbs{ font-size:.8rem; color:rgba(255,255,255,.55); margin-bottom:18px; }
.crumbs a{ color:rgba(255,255,255,.75); }
.crumbs a:hover{ color:#fff; }

/* ==========================================================
   BENEFIT / REQUIREMENT LISTS
   ========================================================== */
.benefit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.benefit{ background:#fff; padding:28px 26px; }
.benefit h3{ font-size:1.02rem; margin-bottom:8px; }
.benefit p{ font-size:.93rem; color:var(--ink-2); }
.benefit .bnum{
  font-family:var(--font-display); font-size:.72rem; font-weight:600;
  color:var(--purple); letter-spacing:.12em; display:block; margin-bottom:12px;
}
@media (max-width: 920px){ .benefit-grid{ grid-template-columns:1fr; } }

.check-list{ list-style:none; display:flex; flex-direction:column; gap:14px; margin-top:8px; }
.check-list li{ display:flex; gap:12px; font-size:.97rem; color:var(--ink-2); }
.check-list li::before{
  content:""; flex:none; width:16px; height:16px; margin-top:4px; background:var(--purple);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
@media (max-width: 920px){ .two-col{ grid-template-columns:1fr; gap:40px; } }

/* ==========================================================
   GALLERY
   ========================================================== */
.gallery-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:32px; }
.gfilter{
  border:1px solid var(--line); background:#fff; border-radius:3px;
  padding:9px 16px; font-family:var(--font-text); font-size:.86rem;
  font-weight:500; color:var(--ink-2); cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease, color .15s ease;
}
.gfilter:hover{ border-color:var(--line-dash); }
.gfilter.active{ background:var(--purple); border-color:var(--purple); color:#fff; font-weight:600; }
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.gallery-grid .media-slot{ border-radius:2px; }
.gitem[hidden]{ display:none; }
.gitem .gcap{ margin-top:9px; font-size:.8rem; color:var(--muted); display:flex; justify-content:space-between; gap:10px; }
.gitem .gcap b{ color:var(--ink-2); font-weight:600; }
@media (max-width: 920px){ .gallery-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .gallery-grid{ grid-template-columns:1fr; } }

/* ==========================================================
   BLOG
   ========================================================== */
.post-list{ display:flex; flex-direction:column; }
.post{ display:grid; grid-template-columns:200px 1fr; gap:32px; padding:30px 0; border-bottom:1px solid var(--line); }
.post:first-child{ border-top:1px solid var(--line); }
.post .post-meta{ font-size:.78rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }
.post h3{ font-size:1.28rem; margin:6px 0 10px; }
.post p{ font-size:.96rem; color:var(--ink-2); }
.empty-state{ border:1px dashed var(--line-dash); background:var(--tint); padding:56px 32px; text-align:center; border-radius:3px; }
.empty-state h3{ margin-bottom:10px; }
.empty-state p{ color:var(--ink-2); max-width:56ch; margin:0 auto; font-size:.97rem; }
@media (max-width: 720px){ .post{ grid-template-columns:1fr; gap:8px; } }

/* ==========================================================
   PROSE (keyword-rich SEO body copy)
   ========================================================== */
.prose{ max-width:68ch; }
.prose p{ color:var(--ink-2); font-size:1.02rem; }
.prose p + p{ margin-top:18px; }
.prose h3{ margin:34px 0 12px; font-size:1.14rem; }
.prose a{ text-decoration:underline; text-underline-offset:3px; }

/* ==========================================================
   REFERRAL PROGRAM
   ========================================================== */
#referral{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--tint); }
.ref-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; }
.ref-rate{
  display:flex; align-items:flex-end; gap:14px;
  padding-bottom:22px; margin-bottom:22px;
  border-bottom:1px solid var(--line-dash);
}
.ref-rate .amt{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(3rem, 6vw, 4.4rem); line-height:1;
  color:var(--purple); letter-spacing:-0.03em;
}
.ref-rate .unit{ font-size:1.05rem; color:var(--ink-2); font-weight:500; }
.ref-rate .unit b{ display:block; font-family:var(--font-display); font-size:1.15rem; color:var(--ink); }
.ref-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.ref-step{ background:#fff; padding:22px 20px; }
.ref-step .rnum{
  font-family:var(--font-display); font-size:.72rem; font-weight:600;
  letter-spacing:.12em; color:var(--purple); display:block; margin-bottom:10px;
}
.ref-step h3{ font-size:.98rem; margin-bottom:6px; }
.ref-step p{ font-size:.89rem; color:var(--ink-2); }
.ref-example{
  background:#fff; border:1px solid var(--line); border-radius:3px; padding:26px;
}
.ref-example h3{ font-size:1.05rem; margin-bottom:4px; }
.ref-example .ex-sub{ font-size:.84rem; color:var(--muted); margin-bottom:20px; }
.ex-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:11px 0; border-bottom:1px solid var(--line); font-size:.93rem;
}
.ex-row span{ color:var(--ink-2); }
.ex-row b{ font-family:var(--font-display); font-variant-numeric:tabular-nums; }
.ex-row.total{ border-bottom:none; padding-top:16px; }
.ex-row.total span{ color:var(--ink); font-weight:600; }
.ex-row.total b{ font-size:1.6rem; color:var(--purple-dk); }
.ref-fine{ margin-top:16px; font-size:.76rem; color:var(--muted); line-height:1.45; }
@media (max-width: 920px){
  .ref-grid{ grid-template-columns:1fr; gap:36px; }
  .ref-steps{ grid-template-columns:1fr; }
}

/* ==========================================================
   SCROLL OFFER MODAL
   ========================================================== */
.offer-scrim{
  position:fixed; inset:0; z-index:200;
  background:rgba(12,8,24,.62);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}
.offer-scrim.show{ opacity:1; visibility:visible; }
.offer-card{
  background:#fff; border-radius:3px;
  width:100%; max-width:440px; padding:40px 38px 34px;
  position:relative; text-align:center;
  transform:translateY(10px);
  transition:transform .25s ease;
}
.offer-scrim.show .offer-card{ transform:none; }
.offer-card .offer-eyebrow{
  font-size:.72rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--purple); display:block; margin-bottom:16px;
}
.offer-card .offer-amt{
  font-family:var(--font-display); font-weight:700;
  font-size:3.4rem; line-height:1; letter-spacing:-0.03em;
  color:var(--ink); display:block; margin-bottom:6px;
}
.offer-card h3{ font-size:1.18rem; margin-bottom:12px; }
.offer-card p{ font-size:.95rem; color:var(--ink-2); margin-bottom:24px; }
.offer-card .btn{ width:100%; justify-content:center; padding:15px; }
.offer-card .offer-decline{
  display:block; width:100%; margin-top:14px;
  background:none; border:none; cursor:pointer;
  font-family:var(--font-text); font-size:.84rem; color:var(--muted);
  text-decoration:underline; text-underline-offset:3px;
}
.offer-card .offer-decline:hover{ color:var(--ink-2); }
.offer-close{
  position:absolute; top:12px; right:12px;
  width:32px; height:32px; border:none; background:none; cursor:pointer;
  color:var(--muted); border-radius:2px; line-height:0;
}
.offer-close:hover{ color:var(--ink); background:var(--tint); }
.offer-fine{ margin-top:16px; font-size:.72rem; color:var(--muted); }
@media (prefers-reduced-motion: reduce){
  .offer-scrim, .offer-card{ transition:none; }
}

/* ==========================================================
   FILM BAND (warm white showcase)
   The clip runs at about half the container width. Displayed
   well under its source resolution, so it stays crisp instead
   of showing compression on a full-bleed frame.
   ========================================================== */
.filmband{ background:var(--ink); }
.filmband .eyebrow{ color:var(--purple-lt); }
.filmband h2{ color:#fff; }
.filmband p{ color:rgba(255,255,255,.74); }
.band-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.band-lede{ margin-top:16px; font-size:1.05rem; max-width:46ch; }
.band-facts{
  margin-top:32px; padding-top:26px;
  border-top:1px solid rgba(167,139,250,.22);
  display:flex; flex-direction:column; gap:16px;
}
.band-facts span{ font-size:.9rem; color:rgba(255,255,255,.62); }
.band-facts b{
  font-family:var(--font-display); font-size:1rem; color:#fff;
  display:inline-block; min-width:112px; margin-right:4px;
}
.band-frame{
  position:relative; overflow:hidden; border-radius:3px;
  background:#0B0716; aspect-ratio:16/9;
  border:1px solid rgba(167,139,250,.18);
}
.band-frame video{ width:100%; height:100%; object-fit:cover; display:block; }
.band-note{
  margin-top:14px; font-size:.82rem; line-height:1.5;
  color:rgba(255,255,255,.55);
}
@media (max-width: 920px){
  .band-grid{ grid-template-columns:1fr; gap:36px; }
  .band-facts{ margin-top:24px; padding-top:22px; }
}

/* current page in nav */
.nav-links a.link.current{ color:var(--purple-dk); font-weight:600; }
header.nav.over-hero .nav-links a.link.current{ color:#fff; font-weight:600; }

/* ==========================================================
   REAL PHOTOGRAPHY
   Same box as the placeholder slots so swapping one in never
   moves the layout. Width and height are set on the <img> so
   the space is reserved before the file arrives, which is what
   keeps Cumulative Layout Shift at zero.
   ========================================================== */
.photo{
  position:relative; overflow:hidden; border-radius:2px;
  background:var(--tint-2); display:block;
}
.photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo.ar-4x3{ aspect-ratio:4/3; }
.card .photo{ border-radius:0; }

/* ==========================================================
   APP DEMO VIDEO
   The clip is already composited inside a phone on a dark
   ground, so it needs a frame, not another phone mockup.
   ========================================================== */
.app-video{
  position:relative; overflow:hidden; border-radius:3px;
  background:#0B0716; aspect-ratio:9/16;
  max-width:320px; margin:0 auto;
  border:1px solid var(--line);
}
.app-video video{ width:100%; height:100%; object-fit:cover; display:block; }
.app-caption{
  margin:14px auto 0; max-width:320px;
  font-size:.78rem; color:var(--muted); text-align:center; line-height:1.45;
}

/* ==========================================================
   MOBILE PASS
   Everything below is layout and touch-target work for small
   screens. The desktop composition is unchanged.
   ========================================================== */

/* Horizontally scrolling table needs an affordance, or people
   never discover the other three columns. */
.compare-wrap{ position:relative; }
.scroll-note{
  display:none; font-size:.78rem; color:var(--muted);
  margin-bottom:10px; align-items:center; gap:6px;
}
@media (max-width: 820px){
  .scroll-note{ display:flex; }
  .compare-wrap{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  .compare th, .compare td{ padding:13px 16px; font-size:.88rem; }
}

@media (max-width: 920px){
  /* stacked panel: give the canvas and controls room to breathe */
  .preview-controls{ padding:16px; gap:12px; }
  .preview-canvas-wrap{ min-height:0; }
  .band-facts b{ display:block; min-width:0; margin-bottom:2px; }
  .band-facts span{ display:block; }
}

@media (max-width: 720px){
  section{ padding:60px 0; }
  section.tight{ padding:48px 0; }
  .container{ padding:0 20px; }
  .section-head{ margin-bottom:32px; }
  .page-head{ padding:118px 0 52px; }
  .page-head p{ font-size:1rem; }

  /* full-width CTAs read as deliberate, not ragged */
  .hero-ctas{ flex-direction:column; align-items:stretch; gap:10px; }
  .hero-ctas .btn{ justify-content:center; }
  .page-head .btn-row{ flex-direction:column; align-items:stretch; }
  .page-head .btn-row .btn{ justify-content:center; }
  .hero-proof{ gap:10px 18px; }

  .preview-steps .pstep{ padding:11px 16px; }
  .preview-steps .pstep p{ display:none; }   /* titles alone carry it here */
  .preview-more{ flex-direction:column; align-items:flex-start; gap:12px; }
  .preview-more .stat-pair{ gap:20px; }

  .pay-calc, .form-card, .ref-example{ padding:22px; }
  .calc-out{ gap:20px; }
  .calc-out .v{ font-size:1.5rem; }
  .ref-rate .amt{ font-size:3rem; }

  .timeline{ gap:28px; }
  .quotes, .cards-3, .usecases{ gap:18px; }
  .footer-cols{ gap:32px; }
  .footer-base{ flex-direction:column; gap:8px; }
}

/* Touch targets. A 29px button is a miss on a phone; 44px is the
   size a thumb actually hits. Scoped to coarse pointers so the
   desktop UI keeps its tighter proportions. */
@media (pointer: coarse){
  .btn{ min-height:46px; }
  .pattern-btn{ min-height:44px; }
  .seg button{ min-height:44px; }
  .gfilter{ min-height:44px; }
  .btn-block, .preview-actions .btn{ min-height:44px; }
  .nav-links a.link{ min-height:48px; }
  .fcol a{ padding:9px 0; }
  .offer-decline{ min-height:44px; }
  .offer-close{ width:44px; height:44px; }
  details.faq summary{ padding:20px 4px; }
  input[type=range]{ height:26px; }        /* wider grab area */
  .slider-row input[type=range],
  .ctl-group input[type=range],
  .calc-field input[type=range]{ height:26px; }
}

.benefit-grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width: 1000px){ .benefit-grid-4{ grid-template-columns:1fr 1fr; } }
@media (max-width: 620px){ .benefit-grid-4{ grid-template-columns:1fr; } }

/* ==========================================================
   MOBILE NAV COLOUR OVERRIDES
   These have to sit after the hero block, whose
   `header.nav.over-hero ...` rules would otherwise keep the
   menu text white on the white dropdown panel.
   ========================================================== */
@media (max-width: 900px){
  header.nav .nav-links a.link,
  header.nav.over-hero .nav-links a.link{ color:var(--ink); }
  header.nav .nav-links a.link:hover,
  header.nav.over-hero .nav-links a.link:hover{ color:var(--purple-dk); background:none; }
  body.nav-open header.nav,
  body.nav-open header.nav.over-hero{
    background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none;
    border-bottom:1px solid var(--line);
  }
  body.nav-open header.nav .logo,
  body.nav-open header.nav.over-hero .logo{ color:var(--ink); }
  body.nav-open header.nav .nav-toggle span,
  body.nav-open header.nav.over-hero .nav-toggle span{ background:var(--ink); }
}

@media (max-width: 720px){
  .canvas-hint{ font-size:.74rem; padding:7px 12px; bottom:10px; max-width:calc(100% - 20px); }
}

.form-error{
  margin-top:12px; padding:11px 13px; border-radius:3px;
  background:#FDF2F8; border:1px solid #F0C8E4;
  color:#8A1D5E; font-size:.86rem; line-height:1.45;
}

/* Menu open on mobile puts a white panel behind the nav, so the
   wordmark must go back to its dark version even over the hero. */
@media (max-width: 900px){
  body.nav-open header.nav.over-hero .logo .logo-on-light{ display:block; }
  body.nav-open header.nav.over-hero .logo .logo-on-dark{ display:none; }
  .logo img{ height:25px; }
}

/* ==========================================================
   FORM FIELD ERRORS
   A red border alone does not tell anyone what is wrong.
   ========================================================== */
.form-field.invalid input,
.form-field.invalid textarea{ border-color:#C026D3; }
.field-error{
  display:block; margin-top:6px;
  font-size:.78rem; color:#8A1D5E; line-height:1.4;
}

/* ==========================================================
   ARTICLE / BLOG POST
   ========================================================== */
.article{ max-width:none; }
.article-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:64px; align-items:start; }
.article-body{ max-width:68ch; }
.article-body h2{ font-size:1.55rem; margin:44px 0 14px; }
.article-body h3{ font-size:1.15rem; margin:32px 0 10px; }
.article-body p{ color:var(--ink-2); font-size:1.04rem; line-height:1.7; }
.article-body p + p{ margin-top:18px; }
.article-body ul, .article-body ol{ margin:16px 0 16px 22px; color:var(--ink-2); font-size:1.04rem; }
.article-body li + li{ margin-top:9px; }
.article-body a{ text-decoration:underline; text-underline-offset:3px; }
.article-body blockquote{
  margin:28px 0; padding:18px 22px;
  background:var(--tint); border-left:2px solid var(--purple);
  font-size:1.02rem; color:var(--ink-2);
}
.article-body img{ border-radius:3px; margin:28px 0; }
.article-body .lede{ font-size:1.15rem; color:var(--ink); }
.article-meta{ font-size:.82rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }
.article-aside{ position:sticky; top:100px; }
.article-aside .aside-card{
  border:1px solid var(--line); border-radius:3px; padding:24px; background:var(--tint);
}
.article-aside h3{ font-size:1.02rem; margin-bottom:8px; }
.article-aside p{ font-size:.9rem; color:var(--ink-2); margin-bottom:16px; }
.article-aside .btn{ width:100%; justify-content:center; }
@media (max-width: 920px){
  .article-wrap{ grid-template-columns:1fr; gap:36px; }
  .article-aside{ position:static; }
}

/* Article hero photograph: the .photo wrapper needs the same breathing
   room the bare <img> rule gives, since the image sits inside a box. */
.article-body .photo{ margin:0 0 30px; }
.article-body .photo img{ margin:0; }

/* ==========================================================
   PHOTO FRAMING
   After an upload the canvas enters a framing mode: the photo
   is shown undimmed, the pointer drags it, and a zoom slider
   scales it. The bar replaces the tracing hint while active.
   ========================================================== */
.crop-bar{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  display:flex; align-items:center; gap:12px;
  background:rgba(14,10,26,.82); color:#E8E2F8;
  backdrop-filter:blur(6px);
  padding:8px 8px 8px 16px; border-radius:3px;
  border:1px solid rgba(167,139,250,.34);
  max-width:calc(100% - 28px);
}
.crop-bar[hidden]{ display:none; }
.crop-msg{ font-size:.82rem; line-height:1.35; }
.btn-sm{ padding:7px 16px; font-size:.78rem; }
/* touch-action off while framing so a one-finger drag pans the photo
   instead of scrolling the page underneath it. */
#previewCanvas.framing{ cursor:grab; touch-action:none; }
.ctl-group[hidden]{ display:none; }
#previewCanvas.framing.dragging{ cursor:grabbing; }
/* The sticky Call / Get a Quote bar is fixed to the bottom of the viewport
   and would sit on top of the Done button. Framing is a short, focused
   task, so the CTA steps aside for it and comes back afterwards. */
body.framing-active .mobile-cta{ transform:translateY(110%); }

@media (max-width: 720px){
  /* Span the canvas rather than shrinking to fit: on a narrow screen the
     shrink-to-fit width wraps the message into a ragged stack. */
  .crop-bar{ left:10px; right:10px; transform:none; bottom:10px;
             justify-content:space-between; gap:8px;
             font-size:.74rem; padding:7px 7px 7px 12px; max-width:none; }
  .crop-msg{ font-size:.74rem; }
  .btn-sm{ padding:6px 12px; font-size:.72rem; flex:0 0 auto; }
}

/* ==========================================================
   SERVICE AREA GRID
   Plain columns of place names on the About page. Useful to a
   homeowner checking whether we come to them, and it is where
   the regional terms live without being sprayed through prose.
   ========================================================== */
.area-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:26px 32px;
}
.area-col h3{
  font-size:.72rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted);
  padding-bottom:9px; margin-bottom:11px;
  border-bottom:1px solid var(--line);
}
.area-col ul{ list-style:none; margin:0; padding:0; }
.area-col li{ font-size:.95rem; color:var(--ink-2); padding:3px 0; }
@media (max-width: 720px){
  .area-grid{ grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:22px 20px; }
}

/* Seven links plus a CTA is a tight fit in the band between the hamburger
   breakpoint and a full desktop width. Tighten the spacing through that
   band rather than letting the bar wrap onto two rows. */
.nav-links{ flex-wrap:nowrap; }
.nav-links a.link{ white-space:nowrap; }
@media (min-width: 901px) and (max-width: 1180px){
  .nav-links{ gap:2px; }
  .nav-links a.link{ font-size:.81rem; padding:8px 7px; }
  .nav-cta{ margin-left:4px; padding:10px 13px; font-size:.81rem; }
}