/* Visiwatt design tokens — extracted from css/site.css (source of truth). */
:root {
  --canvas: #F5F6F8;
  --card: #FFFFFF;
  --ink: #111418;
  --muted: #606874;
  --mint: #57BE8C;
  --mint-deep: #2E7D5B;
  --mint-soft: #E2F3EA;
  --clay: #B3423A;
  --clay-soft: #F9E3E2;
  --amber: #8A5A17;
  --amber-soft: #FBEEDC;
  --blue: #3A6EA5;
  --blue-soft: #E4EDF7;
  --hairline: #E9EAEE;
  --r-card: 22px;
  --r-input: 12px;
  --shadow: 0 1px 2px rgba(17,20,24,.04), 0 8px 24px rgba(17,20,24,.05);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Helvetica, Arial, sans-serif; /* @kind font */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; /* @kind font */
}

/* Visiwatt component classes — css/site.css (source of truth) minus tokens. */
/* Visiwatt — site-wide design system.
   The visual language IS the iOS app: cool light canvas, white cards with
   large radius and no borders, mint accent, big black numerals with light
   unit suffixes, pill controls, soft chips. Light theme only. Markup and
   content are usable with zero JS; js/site.js is progressive enhancement
   only (quantity steppers, gallery/lightbox, filters, form handoff) — see
   its header comment. */


* { margin: 0; padding: 0; box-sizing: border-box; }
html { color-scheme: light; }
body {
  font-family: var(--sans);
  background: var(--canvas);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
[hidden] { display: none !important; } /* img/svg{display:block} above would otherwise beat the UA [hidden] rule */
a { color: var(--mint-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--mint); outline-offset: 2px; border-radius: 6px;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ── Type ───────────────────────────────────────────────── */
h1, h2, h3 { letter-spacing: -0.03em; line-height: 1.08; }
h1 { font-size: clamp(2.4rem, 6vw, 3.9rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); font-weight: 800; }
h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.015em; }
.lead { font-size: 1.16rem; color: var(--muted); line-height: 1.5; }
.small { font-size: .85rem; color: var(--muted); }

/* The app's numeral voice: huge bold figure, light unit. */
.figure { font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.figure .unit { font-weight: 400; color: var(--muted); font-size: .55em; margin-left: .08em; }

/* ── Chips (the app's pills: Peak hours, RESOLVED, Live) ── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  padding: 4px 12px; border-radius: 999px;
  background: var(--mint-soft); color: var(--mint-deep);
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.plain::before { display: none; }
.chip.clay { background: var(--clay-soft); color: var(--clay); }
.chip.amber { background: var(--amber-soft); color: var(--amber); }
.chip.blue { background: var(--blue-soft); color: var(--blue); }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-block; border: 0; cursor: pointer;
  font: 700 1rem/1 var(--sans); text-decoration: none;
  padding: 15px 30px; border-radius: 999px;
  background: var(--mint); color: #fff;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(87,190,140,.35); }
.btn.ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--mint), 0 6px 18px rgba(17,20,24,.06); }
.btn.small { padding: 10px 20px; font-size: .9rem; }

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background: var(--card); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: 28px;
}
.card.pad-lg { padding: 40px; }

/* ── Header / nav ───────────────────────────────────────── */
.site-head { padding: 20px 0; }
.site-head .wrap { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.wordmark { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.wordmark b { color: var(--mint); font-weight: 800; }
.wordmark:hover { text-decoration: none; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; align-items: center; }
.nav a {
  color: var(--muted); font-weight: 600; font-size: .95rem;
  padding: 8px 14px; border-radius: 999px;
}
.nav a:hover { color: var(--ink); background: #fff; text-decoration: none; }
.nav a.active { color: var(--ink); background: #fff; box-shadow: var(--shadow); }
.nav .btn.small { margin-left: 8px; }

/* ── Sections ───────────────────────────────────────────── */
.section { padding: 72px 0; }
.section.tight { padding: 44px 0; }
.section-head { max-width: 620px; margin-bottom: 36px; }
.section-head .chip { margin-bottom: 14px; }
.section-head p { margin-top: 12px; }

.grid { display: grid; gap: 20px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .section { padding: 52px 0; }
}

/* ── App-style widget pieces (reused across pages) ──────── */
.appliance-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border-radius: 16px; box-shadow: var(--shadow);
  padding: 14px 18px;
}
.appliance-row .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.appliance-row .name { font-weight: 700; font-size: .95rem; }
.appliance-row .watts { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.appliance-row .watts span { font-weight: 400; color: var(--muted); font-size: .8em; }

.stat { padding: 24px 28px; }
.stat .figure { font-size: 2.4rem; }
.stat .label { color: var(--muted); font-size: .9rem; margin-top: 2px; }

/* ── Footer ─────────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--hairline); margin-top: 40px; padding: 44px 0 60px; }
.site-foot .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px; }
.site-foot h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 12px; }
.site-foot a { display: block; color: var(--ink); font-size: .95rem; padding: 4px 0; }
.site-foot .small { margin-top: 14px; }
@media (max-width: 700px) { .site-foot .wrap { grid-template-columns: 1fr 1fr; } }

/* ── Docs & blog shared ─────────────────────────────────── */
.prose { max-width: 680px; }
.prose h2 { margin: 44px 0 14px; font-size: 1.5rem; }
.prose h3 { margin: 30px 0 10px; }
.prose p, .prose ul, .prose ol { margin-bottom: 16px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose code { font-family: var(--mono); font-size: .86em; background: #fff; border: 1px solid var(--hairline); border-radius: 6px; padding: 1px 6px; }
.prose pre {
  background: var(--ink); color: #E8ECEF; border-radius: 16px;
  padding: 20px 24px; overflow-x: auto; margin-bottom: 18px;
  font-family: var(--mono); font-size: .84rem; line-height: 1.6;
}
.prose pre code { background: none; border: 0; padding: 0; color: inherit; }
.prose pre .c { color: #7B8794; }   /* comment */
.prose pre .k { color: #7EE0AF; }   /* keyword/field */
.prose pre .s { color: #F2C97D; }   /* string */
.prose blockquote { border-left: 3px solid var(--mint); padding: 4px 0 4px 18px; color: var(--muted); margin-bottom: 16px; }
.prose table { border-collapse: collapse; width: 100%; margin-bottom: 18px; font-size: .93rem; }
.prose th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--hairline); }

/* Docs layout: sticky rail + content */
.docs-layout { display: grid; grid-template-columns: 220px 1fr; gap: 44px; align-items: start; }
.docs-rail { position: sticky; top: 24px; }
.docs-rail a { display: block; color: var(--muted); font-weight: 600; font-size: .92rem; padding: 7px 12px; border-radius: 999px; }
.docs-rail a:hover { color: var(--ink); text-decoration: none; background: #fff; }
.docs-rail a.active { color: var(--ink); background: #fff; box-shadow: var(--shadow); }
.docs-rail h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 0 6px 12px; }
@media (max-width: 800px) { .docs-layout { grid-template-columns: 1fr; } .docs-rail { position: static; display: flex; flex-wrap: wrap; gap: 2px; } .docs-rail h4 { width: 100%; } }

/* Blog cards */
.post-card { display: flex; flex-direction: column; gap: 10px; padding: 26px; color: var(--ink); }
.post-card:hover { text-decoration: none; transform: translateY(-2px); transition: transform .15s ease; }
.post-card .meta { color: var(--muted); font-size: .84rem; }
.post-card h3 { font-size: 1.25rem; }
.post-card p { color: var(--muted); font-size: .95rem; }

/* CTA band */
.cta-band { text-align: center; padding: 56px 40px; }
.cta-band h2 { margin-bottom: 10px; }
.cta-band p { color: var(--muted); margin-bottom: 26px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ── Full-bleed brand hero (HA-pattern: confident color, giant type) ── */
.hero-bleed {
  background: linear-gradient(160deg, #62CE9A 0%, #57BE8C 45%, #3FA377 100%);
  color: #fff;
  overflow: hidden;
}
.hero-bleed .site-head { padding: 22px 0; }
.hero-bleed .wordmark { color: #fff; }
.hero-bleed .wordmark b { color: #0E3B28; }
.hero-bleed .nav a { color: rgba(255,255,255,.85); }
.hero-bleed .nav a:hover { color: #fff; background: rgba(255,255,255,.14); }
.hero-bleed .nav a.active { color: #fff; background: rgba(255,255,255,.18); box-shadow: none; }
.hero-bleed .nav .btn { background: var(--ink); color: #fff; }
.hero-bleed .nav .btn:hover { box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.hero-bleed h1 { color: #fff; font-size: clamp(2.8rem, 7vw, 4.6rem); }
.hero-bleed h1 .tone { color: #0E3B28; }
.hero-bleed .lead { color: rgba(255,255,255,.92); }
.hero-bleed .small { color: rgba(255,255,255,.75); }
.hero-bleed .btn.primary-ink { background: var(--ink); color: #fff; }
.hero-bleed .btn.primary-ink:hover { box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.hero-bleed .btn.ghost { background: rgba(255,255,255,.16); color: #fff; box-shadow: none; }
.hero-bleed .btn.ghost:hover { background: rgba(255,255,255,.24); box-shadow: none; }
.hero-bleed a { color: #fff; }

/* Big feature tiles (product features, not news) */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.tile { background: var(--card); border-radius: 26px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.tile .tile-visual { background: var(--canvas); padding: 30px 30px 26px; display: grid; place-items: center; min-height: 220px; }
.tile .tile-body { padding: 22px 30px 28px; }
.tile .tile-body h3 { font-size: 1.3rem; margin-bottom: 6px; }
.tile .tile-body p { color: var(--muted); font-size: .97rem; }
.tile.span-2 { grid-column: span 2; }
@media (max-width: 760px) { .tiles { grid-template-columns: 1fr; } .tile.span-2 { grid-column: span 1; } }

.icon-tile { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--mint-soft); color: var(--mint-deep); flex: none; }
.icon-tile svg { width: 25px; height: 25px; }
.icon-tile.clay { background: var(--clay-soft); color: var(--clay); }
.icon-tile.amber { background: var(--amber-soft); color: var(--amber); }
.icon-tile.blue { background: var(--blue-soft); color: var(--blue); }

/* Card header with an icon tile */
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.card-head h3 { margin: 0; }
.card-head .icon-tile { width: 40px; height: 40px; border-radius: 12px; }
.card-head .icon-tile svg { width: 22px; height: 22px; }

/* Real app screenshot in a device frame */
.shot-frame {
  border-radius: 44px; box-shadow: 0 0 0 10px var(--ink), 0 30px 70px rgba(0,0,0,.35);
  overflow: hidden; background: var(--ink); line-height: 0;
}
.shot-frame img { width: 100%; height: auto; }


/* ── Promoted page patterns (source: index.html scoped styles) ──────────── */
.tile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.tile-head h3 { margin: 0; }
.steps { counter-reset: step; }
.steps .card { position: relative; padding-top: 60px; }
.steps .card::before { counter-increment: step; content: counter(step);
  position: absolute; top: 22px; left: 26px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--mint-soft); color: var(--mint-deep); font-weight: 800; display: grid; place-items: center; font-size: .95rem; }
.steps p { color: var(--muted); font-size: .95rem; margin-top: 8px; }
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; padding: 40px 0 88px; }
.hero p.lead { margin: 20px 0 32px; max-width: 480px; font-size: 1.22rem; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero .trust { margin-top: 22px; }
.hero .promise { margin-top: 6px; }
.hero .shot-frame { width: min(330px, 80vw); justify-self: center; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding-bottom: 64px; } }
.privacy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 800px) { .privacy-grid { grid-template-columns: 1fr; } }

/* ── Progressive-enhancement widgets (js/site.js) ─────────────────────── */

/* Real checkbox styled as the design's pill toggle — no JS needed. */
.vw-check { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; flex: none;
  margin-top: 1px; border-radius: 8px; border: 1.5px solid #C9CED6; background: #fff; cursor: pointer;
  display: grid; place-items: center; }
.vw-check:hover { border-color: var(--mint); }
.vw-check:checked { background: var(--mint); border-color: var(--mint); }
.vw-check:checked::after { content: ''; width: 12px; height: 8px; border-left: 2.6px solid #fff;
  border-bottom: 2.6px solid #fff; transform: rotate(-45deg) translateY(-1px); }

/* Inline field validation (toggled by js/site.js; safe no-op with JS off). */
.vw-field.field-error input:not([type="checkbox"]), .vw-field.field-error textarea,
.vw-field.field-error select {
  border-color: var(--clay) !important; background: #FDF3F2 !important; }
/* A checkbox in the error state takes the red border and NOTHING else. The
   blanket rule above used to paint its box pale pink with !important, which
   outranked :checked — so ticking the consent box drew a white checkmark on
   near-white and changed nothing else. It read as a checkbox that would not
   click, and people gave up on the form there. */
.vw-field.field-error .vw-check { border-color: var(--clay) !important; }
.vw-field.field-error .vw-check:checked {
  background: var(--mint) !important; border-color: var(--mint) !important; }
.vw-msg { font-size: .82rem; font-weight: 700; color: var(--clay); margin-top: 6px; }
.vw-form-note { margin-top: 14px; font-size: .86rem; color: var(--muted); }
.vw-form-note.is-ok { color: var(--mint-deep); font-weight: 700; }
.vw-form-note.is-bad { color: var(--clay); font-weight: 700; }

/* Quantity stepper */
.vw-qty { display: flex; align-items: center; background: #fff; border-radius: 999px; }
.vw-qty button { width: 48px; height: 56px; border: 0; background: transparent; cursor: pointer;
  font: 800 1.3rem/1 var(--sans); color: #5A6270; }
.vw-qty button:first-child { border-radius: 999px 0 0 999px; }
.vw-qty button:last-child { border-radius: 0 999px 999px 0; }
.vw-qty button:hover { color: #fff; background: var(--mint); }
.vw-qty span { min-width: 34px; text-align: center; font: 800 1.05rem/1 var(--sans); color: var(--ink); }

/* FAQ accordion — native <details>, no JS */
.vw-faq { background: var(--canvas); border-radius: 22px; overflow: hidden; }
.vw-faq + .vw-faq { margin-top: 12px; }
.vw-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 20px;
  font: 700 1.08rem/1.3 var(--sans); color: var(--ink); padding: 26px 34px; }
.vw-faq summary::-webkit-details-marker { display: none; }
.vw-faq summary:hover { color: var(--mint-deep); }
.vw-faq summary::after { content: '+'; margin-left: auto; font: 800 1.3rem/1 var(--sans); color: var(--mint); }
.vw-faq[open] summary::after { content: '−'; }
.vw-faq p { padding: 0 34px 28px; max-width: 820px; font-size: 1rem; color: #5A6270; }

/* Product gallery + lightbox */
.vw-gallery-stage { position: relative; background: #fff; border-radius: 28px; overflow: hidden; aspect-ratio: 4/3; }
.vw-gallery-slide { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0;
  background: #fff; cursor: default; }
.vw-gallery-slide[data-zoomable] { cursor: zoom-in; }
.vw-gallery-slide img { width: 100%; height: 100%; object-fit: contain; }
.vw-gallery-count { position: absolute; right: 18px; bottom: 16px; z-index: 3; font: 700 .78rem/1 var(--sans);
  color: #5A6270; background: var(--canvas); padding: 8px 12px; border-radius: 999px; }
.vw-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; display: grid;
  place-items: center; width: 48px; height: 48px; border: 1px solid var(--hairline); padding: 0; cursor: pointer;
  border-radius: 50%; background: #fff; color: var(--ink); }
.vw-gallery-nav:hover { background: var(--mint); color: #fff; border-color: var(--mint); }
.vw-gallery-nav.prev { left: 14px; } .vw-gallery-nav.next { right: 14px; }
.vw-gallery-thumbs { display: flex; gap: 12px; margin-top: 16px; }
.vw-gallery-thumbs button { flex: 1; height: 80px; border: 0; padding: 0; cursor: pointer; border-radius: 18px;
  background: #fff; font: 700 .8rem/1.2 var(--sans); color: #5A6270; }
.vw-gallery-thumbs button:hover, .vw-gallery-thumbs button[aria-current="true"] { color: var(--mint-deep); }
.vw-lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(14,20,24,.86); display: flex;
  align-items: center; justify-content: center; padding: 56px 34px; }
.vw-lightbox[hidden] { display: none; }
.vw-lightbox img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 18px; }
.vw-lightbox-close { position: absolute; top: 24px; right: 26px; display: grid; place-items: center;
  width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.3); padding: 0; cursor: pointer;
  border-radius: 50%; background: transparent; color: #fff; }
.vw-lightbox-close:hover { background: rgba(255,255,255,.14); border-color: #fff; }

/* Hero slide toggle dots */
.vw-dot { width: 10px; height: 8px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: #CBD2DA; }
.vw-dot:hover { background: #9AA3AE; }
.vw-dot[aria-current="true"] { width: 30px; background: var(--mint); box-shadow: 0 10px 26px rgba(22,199,155,.4); }

/* Pill filters. Blog's category tabs sit on a canvas section, so inactive
   ones are white to stand out; contact's topic pills sit on a white card,
   so inactive ones must be canvas instead — same shape, inverted context. */
.vw-pill { font: 700 .9rem/1 var(--sans); border: 0; cursor: pointer; padding: 12px 20px; border-radius: 999px;
  background: #fff; color: #4C535F; }
.vw-pill:hover { color: var(--ink); }
.vw-pill[aria-current="true"] { background: var(--mint-deep); color: #fff; }
.vw-pill-oncard { background: var(--canvas); color: #5A6270; }
.vw-pill-oncard:hover { color: var(--ink); }
.vw-pill-oncard[aria-current="true"] { background: var(--mint-deep); color: #fff; }

/* Landing header: transparent over the hero, glass once scrolled (js/site.js). */
[data-scroll-header].is-scrolled {
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Home/Business pill toggle on the landing pre-order panel */
.vw-audience-btn { font: 800 1rem/1 var(--sans); letter-spacing: -.01em; padding: 17px 34px; border-radius: 999px;
  border: 0; cursor: pointer; background: transparent; color: var(--muted); }
.vw-audience-btn:hover { color: var(--ink); }
.vw-audience-btn[aria-current="true"] { background: var(--mint-deep); color: #fff; }
.vw-audience-btn[aria-current="true"]:hover { color: #fff; }

/* ── Landing hero video background ──────────────────────────────────────
   The hero keeps its linear-gradient as the paint underneath: if the video
   is blocked, still loading, or suppressed for reduced motion, the section
   looks exactly like it did before rather than going blank. The scrim is
   what keeps the dark headline legible over moving colour — it lightens
   the left third (where the copy sits) and settles the bottom edge into
   --canvas so the hero still hands off cleanly to the next section.
   These values are set by measurement, not taste: the source footage is a
   real interior, and in the copy region its darkest decile reaches Y=29
   (the kettle scene, ~t3.0-3.5s). The file is graded on the way in to lift
   that to Y=76; the left wash then has to carry the rest to clear 4.5:1
   for the #454C58 paragraph. Lighten it and the body copy fails AA. */
.vw-hero-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  border: 0; pointer-events: none;
}
.vw-hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.82) 34%, rgba(255,255,255,.68) 54%, rgba(255,255,255,.30) 70%, rgba(255,255,255,.04) 84%, rgba(255,255,255,0) 92%),
    linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 28%, rgba(245,246,248,.52) 100%);
}
/* Narrow screens stack the copy over the full width, so the directional
   wash would leave the right-hand words on raw video — go flat instead. */
@media (max-width: 900px) {
  .vw-hero-scrim {
    background:
      linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.72) 46%, rgba(245,246,248,.66) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vw-hero-video { display: none; }
}

/* ── Hero: the sensor beside the app ─────────────────────────────────────
   Two halves of one product, shown together so the pair explains itself:
   the unit you fit in the panel once, and the app you actually live with.
   Deliberately unequal — the phone is what people hold every day, so the
   sensor reads as the smaller, install-and-forget half rather than
   competing with it. It sits mostly clear of the phone, overlapping just
   enough to read as in front of it. Sits above the "See what's ON" button,
   which shares this side of the phone, and high enough to stay above the
   fold — a hero element below the fold is not a hero element. */
.vw-hero-sensor {
  position: absolute; z-index: 3;
  right: -12%; bottom: 34%; width: 42%; height: auto;
  /* The unit is white and it overlaps a white app card, so without an edge
     the two merge. The mint halo is ordered first so it hugs the silhouette;
     the depth shadow then falls from that. Kept faint — it should register
     as a separated edge, not as a glow. */
  filter:
    drop-shadow(0 0 4px rgba(18, 190, 142, .30))
    drop-shadow(0 14px 26px rgba(17, 20, 24, .16));
  pointer-events: none;
}
/* .wrap caps at 1080px, so past ~1280 the page margin is dead space the
   sensor can move out into — that is the only width where it can sit
   properly clear of the screenshot. Below this the column is too tight:
   measured at 910px there is only ~16px of slack to the viewport edge, so
   the base rule stays modest and pushing it further right would simply run
   it off screen. */
@media (min-width: 1280px) {
  .vw-hero-sensor { right: -46%; width: 58%; }
}
/* Stacked layout puts the phone mid-column, where a far-left offset would
   hang off the viewport — tuck it in and shrink it. */
@media (max-width: 900px) {
  .vw-hero-sensor { right: -14%; bottom: 9%; width: 28%; }
}

/* ── iPhone frame for app screenshots ────────────────────────────────────
   Driven by one inline custom property, --w. Everything else derives from
   it with calc, so the frame keeps correct geometry at any size and the
   three radii nest properly: each inner radius is the one outside it minus
   the padding between them. Radii that do not nest are the main reason a
   CSS phone reads as fake.

   Proportions matter more than materials here: a real device is a THIN
   bright rail around a THICK black bezel. The screenshots already carry
   their own status bar and Dynamic Island, so none is drawn. */
.vw-iphone {
  --rail: calc(var(--w) * .011);        /* the metal edge */
  --bez:  calc(var(--w) * .034);        /* black surround of the glass */
  --r:    calc(var(--w) * .168);
  position: relative;
  width: var(--w);
  padding: var(--rail);
  border-radius: var(--r);
  background: linear-gradient(152deg,
    #FFFFFF 0%, #E4E8ED 14%, #FCFDFE 34%, #D9DEE5 60%, #F4F6F8 82%, #E7EBF0 100%);
  box-shadow:
    0 0 0 1px rgba(146,154,167,.55),
    0 24px 48px rgba(17, 20, 24, .22);
}
.vw-iphone-screen {
  padding: var(--bez);
  border-radius: calc(var(--r) - var(--rail));
  background: #000;
  overflow: hidden;
}
.vw-iphone-screen img {
  display: block; width: 100%; height: auto;
  border-radius: calc(var(--r) - var(--rail) - var(--bez));
}

/* Side buttons, in the real positions. Kept close to the rail's own tone —
   at these sizes a darker button reads as a rendering fault. */
.vw-ip-btn {
  position: absolute;
  width: calc(var(--w) * .010);
  background: linear-gradient(180deg, #E9ECF0, #C6CCD4);
  border-radius: calc(var(--w) * .006);
}
.vw-ip-btn.act { left: calc(var(--w) * -.008); top: 16.5%; height: 4.5%; }
.vw-ip-btn.vup { left: calc(var(--w) * -.008); top: 25%;   height: 8.5%; }
.vw-ip-btn.vdn { left: calc(var(--w) * -.008); top: 35.5%; height: 8.5%; }
.vw-ip-btn.pwr { right: calc(var(--w) * -.008); top: 28%;  height: 13%; }

/* Trio: one screen forward, two tucked behind it. */
.vw-phones { display: flex; align-items: center; justify-content: center; }
.vw-phones .vw-iphone { flex: none; }
.vw-phones .side { z-index: 1; }
.vw-phones .lead { z-index: 2; }
@media (max-width: 700px) {
  .vw-phones .side { display: none; }   /* three phones at phone width is mush */
}

/* ── Technology: the sensor, the link, the app ───────────────────────────
   One section rather than a title block above a card grid. The beam in the
   middle is the point of the layout: it is the product's whole story — the
   thing in the panel feeds the thing in your hand — so the two cards read
   as one system instead of two unrelated boxes. */
.vw-tech { position: relative; overflow: hidden; padding: 92px 0 104px;
  background: linear-gradient(168deg, #E2F7ED 0%, #F0FBF6 44%, #F7F9FB 100%); }
.vw-tech::before, .vw-tech::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.vw-tech::before { top: -280px; right: -200px; width: 860px; height: 860px;
  background: radial-gradient(circle, rgba(22,199,155,.32) 0%, rgba(22,199,155,0) 68%); }
.vw-tech::after { left: -240px; bottom: -320px; width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(58,110,165,.13) 0%, rgba(58,110,165,0) 70%); }
.vw-tech > .wrap { position: relative; z-index: 1; }

.vw-tech-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.vw-tech-chips span { font: 700 .86rem/1 var(--sans); letter-spacing: -.01em; color: var(--mint-deep);
  background: rgba(255,255,255,.78); padding: 10px 15px; border-radius: 999px; }

.vw-tech-grid { display: grid; grid-template-columns: 1fr 74px 1fr; gap: 0 16px;
  align-items: stretch; margin-top: 54px; }
.vw-tech .tile { border-radius: 26px;
  box-shadow: 0 26px 60px rgba(17,20,24,.11), 0 2px 6px rgba(17,20,24,.05) !important; }

/* The link between them: a mint line with charges running along it. */
.vw-link { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.vw-beam { position: relative; width: 100%; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(18,190,142,0) 0%, #12BE8E 26%, #12BE8E 74%, rgba(18,190,142,0) 100%); }
.vw-beam i { position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: #12BE8E; box-shadow: 0 0 0 5px rgba(18,190,142,.20); animation: vwflow 2.6s linear infinite; }
.vw-beam i:nth-child(2) { animation-delay: .87s; }
.vw-beam i:nth-child(3) { animation-delay: 1.74s; }
@keyframes vwflow {
  0%   { left: -8px;  opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { left: 100%;  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vw-beam i { animation: none; left: 42%; }
  .vw-beam i:nth-child(2), .vw-beam i:nth-child(3) { display: none; }
}
@media (max-width: 820px) {
  .vw-tech-grid { grid-template-columns: 1fr; gap: 22px; }
  .vw-beam { display: none; }          /* stacked, the horizontal link makes no sense */
}

/* Part legend under a product card. A grid rather than a sentence: four
   labelled parts read as a list, not as prose with letters buried in it. */
.vw-legend { display: grid; grid-template-columns: auto 1fr; gap: 9px 12px;
  margin: 15px 0 0; font-size: .94rem; line-height: 1.45; }
/* Mint markers, so the lettered parts and the app card's bullets read as one
   family rather than two unrelated list styles. */
.vw-legend dt { display: grid; place-items: center; min-width: 22px; height: 22px;
  padding: 0 6px; border-radius: 7px; background: var(--mint-soft); color: var(--mint-deep);
  font: 800 .82rem/1 var(--sans); letter-spacing: -.01em; }
.vw-legend dd { margin: 0; padding-top: 2px; color: #5A6270; }

/* The sensor talks to the app over Wi-Fi, so the link says so: arcs pulse
   outward from the dot, inner first, at the same tempo as the charges
   running along the line beneath. */
.vw-wifi { width: 26px; height: 26px; display: block; color: #12BE8E; overflow: visible; }
.vw-wifi path { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; }
.vw-wifi circle { fill: currentColor; }
@keyframes vwwifi { 0%, 100% { opacity: .22; } 45% { opacity: 1; } }
.vw-wifi .w1 { animation: vwwifi 1.9s ease-in-out infinite; }
.vw-wifi .w2 { animation: vwwifi 1.9s ease-in-out infinite .22s; }
.vw-wifi .w3 { animation: vwwifi 1.9s ease-in-out infinite .44s; }
@media (prefers-reduced-motion: reduce) {
  .vw-wifi .w1, .vw-wifi .w2, .vw-wifi .w3 { animation: none; opacity: 1; }
}

/* Feature list inside a product card. Mirrors .vw-legend's rhythm so the two
   cards read as a pair rather than two unrelated text blocks. */
.vw-applist { margin: 15px 0 0; padding: 0; list-style: none; display: grid; gap: 9px;
  font-size: .94rem; line-height: 1.45; color: #5A6270; }
.vw-applist li { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; }
.vw-applist li::before { content: ""; width: 6px; height: 6px; margin-top: .52em;
  border-radius: 50%; background: var(--mint); }

/* ── Install block ───────────────────────────────────────────────────────
   Deliberately shallow: the website's job is to show that the unit goes
   inside the consumer unit and that a professional does it. The fourteen
   real steps live in the PDF, so nothing here needs to be followable. */
.vw-install { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.vw-install-steps { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.vw-install-steps li { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start;
  font-size: 1.02rem; line-height: 1.45; color: #454C58; }
.vw-install-steps b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px;
  background: var(--mint-soft); color: var(--mint-deep); font: 800 .84rem/1 var(--sans); }
/* A cut-out, not a photograph in a frame. A grey drop-shadow across a white
   page just reads as a smudge at this size, so the image sits in light
   instead: a soft mint-and-sky wash behind the silhouette, and only the
   faintest shadow to seat it. */
.vw-install-photo { position: relative; }
.vw-install-photo::before {
  content: ""; position: absolute; inset: -8% -12% -6%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(56% 50% at 38% 34%, rgba(20,200,160,.22) 0%, rgba(20,200,160,0) 70%),
    radial-gradient(50% 46% at 78% 62%, rgba(34,166,245,.18) 0%, rgba(34,166,245,0) 72%),
    radial-gradient(44% 40% at 62% 88%, rgba(124,92,255,.12) 0%, rgba(124,92,255,0) 74%);
  filter: blur(10px);
}
/* Four shadows, all cast down-and-right from a single light at the upper
   left, each roughly tripling the blur as the opacity falls. Two details do
   most of the work: the offsets grow with the blur, so the light has one
   consistent direction; and the colour is a cool blue-grey rather than
   black, because a neutral-black shadow on a white page reads as dirt. */
.vw-install-photo img { position: relative; z-index: 1; display: block;
  width: 84%; height: auto; margin: 0 auto;
  filter:
    drop-shadow(1px 1px 1px rgba(28, 44, 68, .13))
    drop-shadow(2px 5px 7px rgba(28, 44, 68, .08))
    drop-shadow(5px 16px 22px rgba(28, 44, 68, .08))
    drop-shadow(9px 38px 52px rgba(28, 44, 68, .07)); }

/* What the numbers on the photograph point at. */
.vw-callouts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin-top: 22px; }
.vw-callouts div { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  font-size: .93rem; line-height: 1.4; color: #5A6270; }
.vw-callouts b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--mint-soft); color: var(--mint-deep); font: 800 .78rem/1 var(--sans); }
@media (max-width: 620px) { .vw-callouts { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .vw-install { grid-template-columns: 1fr; gap: 34px; } }

/* ── Figures inside a post ───────────────────────────────────────────────
   An explainer that is only paragraphs makes the reader do all the work.
   These carry the ideas the prose can only describe: the shape of an
   appliance's draw, the path from panel to phone, the split of a bill. */
.prose figure { margin: 30px 0 28px; }
.prose figure svg { display: block; width: 100%; height: auto; }
.prose figcaption { margin-top: 11px; font-size: .88rem; line-height: 1.5; color: var(--muted); }
.fig-card { background: var(--card); border-radius: 18px; padding: 22px 24px; box-shadow: var(--shadow); }
.fig-lede { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mint-deep); margin-bottom: 14px; }

/* Figures break out of the 680px reading column — a diagram is looked at,
   not read, so it should not be measured for line length. */
/* .prose sits at the LEFT of .wrap, not centred in it, so a wide figure
   grows rightwards to the wrap's edge. Centring it on the column instead
   pushes it off the left of the screen. */
.prose .fig-wide { width: min(1032px, calc(100vw - 48px)); }
/* Each appliance gets a colour, and keeps it across every figure in the
   piece: the trace, the app list, the share of the bill. The colour is the
   appliance's identity, which is what makes three separate diagrams read as
   one explanation. */
.fig-card-bright {
  border-radius: 24px; padding: 32px 34px;
  background:
    radial-gradient(120% 140% at 8% 0%, rgba(20,200,160,.20) 0%, rgba(20,200,160,0) 55%),
    radial-gradient(100% 130% at 92% 10%, rgba(34,166,245,.22) 0%, rgba(34,166,245,0) 58%),
    radial-gradient(110% 150% at 60% 110%, rgba(124,92,255,.20) 0%, rgba(124,92,255,0) 60%),
    linear-gradient(135deg, #F2FFFB 0%, #EEF8FF 52%, #F6F1FF 100%);
  box-shadow: 0 26px 60px rgba(17,20,24,.10), inset 0 0 0 1px rgba(255,255,255,.7);
}
.fig-card-bright .fig-lede { color: #0E9E7C; }
.fig-key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; font-size: .84rem; color: var(--muted); }
.fig-key span { display: inline-flex; align-items: center; gap: 7px; }
.fig-key i { width: 11px; height: 11px; border-radius: 4px; display: inline-block; }
.trace { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.fig-wifi path { fill: none; stroke: #12BE8E; stroke-width: 2.6; stroke-linecap: round; }
.fig-wifi .w1 { animation: vwwifi 1.9s ease-in-out infinite; }
.fig-wifi .w2 { animation: vwwifi 1.9s ease-in-out infinite .22s; }
.fig-wifi .w3 { animation: vwwifi 1.9s ease-in-out infinite .44s; }
@media (prefers-reduced-motion: reduce) { .fig-wifi path { animation: none; opacity: 1; } }

/* ── Itemised month ──────────────────────────────────────────────────────
   The article opens on "312 kilowatt-hours". This is that number itemised,
   so the figure is the answer to the first sentence rather than a chart
   dropped in beside it. Set like a receipt because that is the promise the
   site already makes elsewhere: itemised, like a receipt. */
.bill-bar { display: flex; gap: 3px; margin-bottom: 26px; }
.bill-bar span { height: 30px; border-radius: 7px; }
.bill { width: 100%; border-collapse: collapse; }
.bill td { padding: 11px 0; border-bottom: 1px dashed var(--hairline); font-size: 1rem; }
.bill td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right;
  white-space: nowrap; color: var(--ink); }
.bill td.p { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right;
  width: 74px; font-weight: 700; }
.bill .dot { display: inline-block; width: 11px; height: 11px; border-radius: 4px; margin-right: 11px;
  vertical-align: -1px; }
.bill tr.total td { border-bottom: 0; border-top: 2px solid var(--ink); padding-top: 15px;
  font-weight: 800; font-size: 1.06rem; color: var(--ink); }

/* ── One screen at a time ────────────────────────────────────────────────
   Four near-identical screenshot sections down the page asked the reader to
   scroll past the same layout four times. One block that advances instead
   keeps the phone in place and swaps what it is showing, so the screens are
   compared rather than merely listed. */
.vw-carousel { display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: center; }
.vw-carousel-phone { justify-self: center; }
.vw-carousel-text { min-height: 330px; display: flex; flex-direction: column; justify-content: center; }
.vw-slide[hidden] { display: none; }
.vw-slide .eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #087255; }
.vw-slide h2 { margin: 14px 0 0; font-size: clamp(2.1rem, 4.2vw, 3.2rem); font-weight: 800;
  letter-spacing: -.04em; line-height: 1.02; color: var(--ink); }
.vw-slide .lead { margin: 16px 0 0; max-width: 460px; font-size: 1.14rem; line-height: 1.5; color: #5A6270; }
.vw-slide ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.vw-slide li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  font-size: 1.02rem; line-height: 1.4; color: var(--ink); }
.vw-slide li b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--mint-soft); color: var(--mint-deep); font: 800 .8rem/1 var(--sans); }

.vw-car-nav { display: flex; align-items: center; gap: 16px; margin-top: 34px; }
.vw-car-dots { display: flex; gap: 8px; }
.vw-car-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px;
  background: #CBD2DA; cursor: pointer; transition: width .18s, background .18s; }
.vw-car-dots button[aria-current="true"] { width: 28px; background: var(--mint); }
.vw-car-arrow { width: 44px; height: 44px; display: grid; place-items: center; border: 0; cursor: pointer;
  border-radius: 50%; background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.vw-car-arrow:hover { background: var(--mint-soft); color: var(--mint-deep); }
.vw-car-count { margin-left: auto; font: 700 .9rem/1 var(--sans); color: var(--muted);
  font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .vw-carousel { grid-template-columns: 1fr; gap: 34px; }
  .vw-carousel-text { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .vw-car-dots button { transition: none; } }

/* ── Blog index: categories at the left, posts at the right ──────────────
   A rail rather than a row of pills: with one category today and more
   later, a vertical list grows down the page instead of wrapping into a
   second line and shoving the posts around. */
.vw-blog { display: grid; grid-template-columns: 210px 1fr; gap: 56px; align-items: start; }
.vw-blog-rail { position: sticky; top: 96px; display: grid; gap: 3px; }
.vw-blog-rail h4 { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 11px; }
.vw-blog-rail a { display: flex; justify-content: space-between; gap: 10px; padding: 10px 13px;
  border-radius: 11px; font: 700 .96rem/1.2 var(--sans); color: #4C535F; }
.vw-blog-rail a:hover { background: #fff; color: var(--ink); }
.vw-blog-rail a[aria-current="true"] { background: var(--mint-soft); color: var(--mint-deep); }
.vw-blog-rail a span { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.vw-blog-rail a[aria-current="true"] span { color: var(--mint-deep); }
.vw-post-card { display: block; background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow);
  padding: 30px 32px; }
.vw-post-card + .vw-post-card { margin-top: 20px; }
.vw-post-card .meta { font-size: .86rem; color: var(--muted); }
.vw-post-card h3 { margin: 10px 0 0; font-size: 1.5rem; letter-spacing: -.03em; color: var(--ink); }
.vw-post-card p { margin: 10px 0 0; max-width: 60ch; font-size: 1.02rem; line-height: 1.5; color: #5A6270; }
.vw-post-card .read { display: inline-block; margin-top: 16px; font-weight: 800; color: var(--mint-deep); }
@media (max-width: 820px) {
  .vw-blog { grid-template-columns: 1fr; gap: 26px; }
  .vw-blog-rail { position: static; grid-auto-flow: column; justify-content: start; }
  .vw-blog-rail h4 { display: none; }
}

/* ── Sensor features ─────────────────────────────────────────────────────
   Plain-language headings, not a wall of figures. A number only appears
   where it means something without explanation — fifteen minutes, two
   years. "50/second" and "0 cloud" needed a paragraph to decode, which is
   the sign a stat is being shown off rather than communicating. */
.vw-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 46px; }
.vw-stat { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 28px; }
.vw-stat .ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px;
  background: var(--mint-soft); color: var(--mint-deep); }
.vw-stat h3 { margin-top: 20px; font-size: 1.12rem; letter-spacing: -.02em; color: var(--ink); }
.vw-stat p { margin-top: 6px; font-size: .95rem; line-height: 1.45; color: #5A6270; }
@media (max-width: 900px) { .vw-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .vw-stats { grid-template-columns: 1fr; } }

/* ── What people say ─────────────────────────────────────────────────────
   Placeholder cards until there are real quotes to put in them. */

/* Equal cards, and the two calls to action sitting on one baseline: the body
   is a column that pushes its button to the bottom, so both land in a row
   however much text sits above them. */
.vw-tech .tile { display: flex; flex-direction: column; }
.vw-tech .tile-body { flex: 1; display: flex; flex-direction: column; }
.vw-tech .tile-body .vw-tile-cta { margin-top: auto; padding-top: 20px; }
.vw-tech .tile-body .vw-tile-cta a { display: inline-block;
  font: 700 .96rem/1 var(--sans); color: #fff; background: var(--ink);
  padding: 14px 24px; border-radius: 999px; }

/* ── Blog index ───────────────────────────────────────────────────────
   One post, so it gets the space one post deserves: a wide card with its
   own cover art rather than a lonely text box in a list. */
.vw-blog-lede { margin-top: 14px; max-width: 52ch; font-size: 1.08rem; line-height: 1.55; color: #5A6270; }




/* ── Business: the two doors ──────────────────────────────────────────
   These are the only choice on the page, so they need to read as objects
   you can click, not as two columns of text on a white field. */
.vw-door { position: relative; border: 1px solid var(--hairline);
  box-shadow: 0 14px 38px rgba(17,20,24,.07), 0 2px 4px rgba(17,20,24,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.vw-door:hover { transform: translateY(-3px); border-color: rgba(18,190,142,.45);
  box-shadow: 0 24px 54px rgba(17,20,24,.11), 0 2px 6px rgba(17,20,24,.05); }
@media (prefers-reduced-motion: reduce) { .vw-door:hover { transform: none; } }

/* A plain card on a white ground needs an edge; --shadow alone is invisible there.
   Same surface as .vw-door, without the hover lift, since these are not links. */
.vw-edge { border: 1px solid var(--hairline);
  box-shadow: 0 14px 38px rgba(17,20,24,.07), 0 2px 4px rgba(17,20,24,.04); }



/* The photo is used as supplied; the page frames it rather than editing it. */
.vw-portrait { position: relative; margin-bottom: 44px; }
.vw-portrait picture { display: block; border-radius: 26px; overflow: hidden;
  box-shadow: 0 30px 64px rgba(17,20,24,.16), 0 2px 6px rgba(17,20,24,.06); }
.vw-portrait img { display: block; width: 100%; height: auto; }
.vw-portrait-tag { position: absolute; left: -16px; bottom: -18px; z-index: 3;
  padding: 11px 17px; border-radius: 15px; background: var(--card);
  border: 1px solid var(--hairline);
  box-shadow: 0 16px 38px rgba(17,20,24,.16); }
.vw-portrait-tag strong { display: block; font-size: .95rem; font-weight: 800;
  letter-spacing: -.02em; color: var(--ink); }
.vw-portrait-tag span { display: block; margin-top: 2px; font-size: .79rem;
  font-weight: 700; color: var(--mint-deep); }

.vw-desks { padding: 72px 0 24px; background: var(--canvas); }
.vw-desk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vw-desk { position: relative; display: block; background: var(--card);
  border: 1px solid var(--hairline); border-radius: 26px; padding: 30px 30px 34px;
  text-decoration: none;
  box-shadow: 0 14px 38px rgba(17,20,24,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.vw-desk:hover { transform: translateY(-4px); border-color: rgba(18,190,142,.45);
  box-shadow: 0 26px 56px rgba(17,20,24,.12); text-decoration: none; }
.vw-desk .icon { display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 14px; background: var(--mint-soft); color: var(--mint-deep); }
.vw-desk .icon svg { width: 24px; height: 24px; }
.vw-desk .icon.blue { background: #E8F0FB; color: #37639C; }
.vw-desk .icon.amber { background: #FDF1E0; color: #9A6A18; }
.vw-desk .lbl { display: block; margin-top: 20px; font-size: .74rem; font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.vw-desk .addr { display: block; margin-top: 9px; font-size: 1.24rem; font-weight: 800;
  letter-spacing: -.032em; color: var(--ink); word-break: break-word; }
.vw-desk .addr.sm { font-size: 1.08rem; }
.vw-desk p { margin: 10px 0 0; font-size: .95rem; line-height: 1.5; color: #5A6270; }
.vw-desk .go { position: absolute; right: 26px; bottom: 28px; color: var(--mint-deep);
  transition: transform .18s ease; }
.vw-desk .go svg { width: 22px; height: 22px; display: block; }
a.vw-desk:hover .go { transform: translateX(5px); }

.vw-formwrap { padding: 40px 0 96px; background: var(--canvas); }
.vw-formcard { max-width: 720px; margin: 0 auto; background: var(--card);
  border: 1px solid var(--hairline); border-radius: 30px; padding: 42px;
  box-shadow: 0 26px 64px rgba(17,20,24,.09); }
.vw-formcard form { background: transparent !important; border-radius: 0 !important;
  padding: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  a.vw-desk:hover { transform: none; }
  a.vw-desk:hover .go { transform: none; }
}
@media (max-width: 980px) {
  .vw-contact-grid { grid-template-columns: 1fr; gap: 8px; }
  .vw-contact-lede { padding-bottom: 8px; }
  .vw-portrait { max-width: 300px; margin: 0 auto 44px; }
  .vw-desk-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .vw-desk-grid { grid-template-columns: 1fr; }
  .vw-formcard { padding: 28px 22px; border-radius: 24px; }
}

/* ══ Contact ═════════════════════════════════════════════════════════
   A plain two-column page: details on the left, the form on the right. */
.vw-contact { padding: 64px 0 96px; background: var(--canvas); }
.vw-contact-head { max-width: 640px; }
.vw-contact-head .eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mint-deep); }
.vw-contact-head h1 { margin: 14px 0 0; font-size: clamp(2.2rem, 4.4vw, 3.2rem);
  font-weight: 800; letter-spacing: -.042em; line-height: 1.04; color: var(--ink); }
.vw-contact-head p { margin: 14px 0 0; font-size: 1.08rem; line-height: 1.55; color: #5A6270; }

.vw-contact-cols { display: grid; grid-template-columns: 300px 1fr; gap: 64px;
  align-items: start; margin-top: 48px; }

.vw-contact-info dl { margin: 0; }
.vw-contact-info dl > div { padding: 20px 0; border-bottom: 1px solid var(--hairline); }
.vw-contact-info dl > div:first-child { padding-top: 20px; }
.vw-contact-info dl > div:last-child { border-bottom: 0; }
.vw-contact-info dt { font-size: .74rem; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted); }
.vw-contact-info dd { margin: 8px 0 0; }
.vw-contact-info dd a { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--ink); word-break: break-word; }
.vw-contact-info dd span { display: block; margin-top: 5px; font-size: .92rem;
  line-height: 1.5; color: #606874; }
.vw-contact-info dd.plain { font-size: 1rem; line-height: 1.6; color: var(--ink); }

.vw-contact-person { display: flex; align-items: center; gap: 17px;
  padding-bottom: 22px; border-bottom: 1px solid var(--hairline); }
/* A rounded panel, not a circle: the portrait is tight to the top of its
   frame, so any circular crop takes the top of her head off. */
.vw-contact-person picture { flex: none; width: 112px; border-radius: 18px;
  overflow: hidden; display: block;
  background: linear-gradient(180deg, #EAF8F2 0%, #DCF2E9 100%); }
.vw-contact-person img { display: block; width: 100%; height: auto; }
.vw-contact-person strong { display: block; font-size: 1.06rem; font-weight: 800;
  letter-spacing: -.02em; color: var(--ink); }
.vw-contact-person span { display: block; margin-top: 2px; font-size: .88rem;
  color: var(--muted); }

.vw-formcard { background: var(--card); border: 1px solid var(--hairline);
  border-radius: 26px; padding: 38px;
  box-shadow: 0 14px 40px rgba(17,20,24,.06); }
.vw-formcard form { background: transparent !important; border-radius: 0 !important;
  padding: 0 !important; }

@media (max-width: 900px) {
  .vw-contact-cols { grid-template-columns: 1fr; gap: 40px; }
  .vw-formcard { padding: 26px 22px; border-radius: 22px; }
}


/* ── Business: the offer opens the page ───────────────────────────────
   No banner above it — the first thing on the page is the choice. */
.vw-offer { position: relative; overflow: hidden; padding: 68px 0 92px;
  border-bottom: 1px solid var(--hairline);
  background:
    radial-gradient(78% 108% at 84% -6%, rgba(20,200,160,.34) 0%, rgba(20,200,160,0) 62%),
    radial-gradient(64% 92% at 6% 12%, rgba(58,110,165,.15) 0%, rgba(58,110,165,0) 66%),
    radial-gradient(70% 100% at 46% 108%, rgba(124,92,255,.13) 0%, rgba(124,92,255,0) 64%),
    linear-gradient(166deg, #E2F9F0 0%, #EFFBF7 44%, #F5F6F8 100%); }
.vw-offer > .wrap { position: relative; z-index: 1; }

.vw-offer-head { max-width: 760px; }
.vw-offer-head .eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mint-deep); }
.vw-offer-head h1 { margin: 16px 0 0; font-size: clamp(2.6rem, 5.6vw, 4.3rem);
  font-weight: 800; letter-spacing: -.05em; line-height: .96; color: var(--ink); }
.vw-offer-head h1 em { font-style: normal;
  background: linear-gradient(96deg, #12BE8E 0%, #087255 46%, #22A6F5 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.vw-offer-head p { margin: 20px 0 0; max-width: 56ch; font-size: 1.14rem;
  line-height: 1.55; color: #454C58; }

.vw-offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 46px; }

.vw-offer-card { position: relative; display: flex; flex-direction: column;
  background: var(--card); border-radius: 30px; padding: 36px 34px 34px;
  overflow: hidden; text-decoration: none;
  box-shadow: 0 22px 56px rgba(17,20,24,.11), 0 2px 6px rgba(17,20,24,.05);
  transition: transform .2s ease, box-shadow .2s ease; }
.vw-offer-card:hover { transform: translateY(-5px); text-decoration: none;
  box-shadow: 0 34px 74px rgba(17,20,24,.15), 0 2px 8px rgba(17,20,24,.06); }
.vw-offer-card .rule { position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, #12BE8E 0%, #22A6F5 100%); }
.vw-offer-card.alt .rule { background: linear-gradient(90deg, #7C5CFF 0%, #22A6F5 100%); }
.vw-offer-card .ico { display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 16px; background: var(--mint-soft); color: var(--mint-deep); }
.vw-offer-card.alt .ico { background: #EEEBFE; color: #5B45C7; }
.vw-offer-card .ico svg { width: 27px; height: 27px; }
.vw-offer-card .tag { display: block; margin-top: 22px; font-size: .74rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.vw-offer-card h2 { margin: 9px 0 0; font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.06; color: var(--ink); }
.vw-offer-card > p { margin: 12px 0 0; font-size: 1.02rem; line-height: 1.55; color: #5A6270; }
.vw-offer-card ul { margin: 20px 0 0; padding: 0; list-style: none; }
.vw-offer-card li { position: relative; padding-left: 26px; margin-top: 10px;
  font-size: .96rem; line-height: 1.45; color: #454C58; }
.vw-offer-card li::before { content: ""; position: absolute; left: 6px; top: .52em;
  width: 7px; height: 7px; border-radius: 50%; background: #12BE8E; }
.vw-offer-card.alt li::before { background: #7C5CFF; }
.vw-offer-card .cta { display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start; margin-top: auto; padding-top: 28px;
  font: 800 1.02rem/1 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.vw-offer-card .cta svg { width: 20px; height: 20px; color: var(--mint-deep);
  transition: transform .2s ease; }
.vw-offer-card.alt .cta svg { color: #5B45C7; }
.vw-offer-card:hover .cta svg { transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
  .vw-offer-card, .vw-offer-card .cta svg { transition: none; }
  .vw-offer-card:hover { transform: none; }
  .vw-offer-card:hover .cta svg { transform: none; }
}
@media (max-width: 860px) {
  .vw-offer { padding: 48px 0 64px; }
  .vw-offer-grid { grid-template-columns: 1fr; gap: 18px; }
  .vw-offer-card { padding: 30px 26px 28px; border-radius: 26px; }
}

/* Three doors rather than two. */
.vw-offer-grid.three { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vw-offer-grid.three .vw-offer-card { padding: 32px 28px 30px; }
.vw-offer-grid.three .vw-offer-card h2 { font-size: clamp(1.35rem, 1.9vw, 1.6rem); }
.vw-offer-card.b2b .rule { background: linear-gradient(90deg, #FF8A3D 0%, #FFC53D 100%); }
.vw-offer-card.b2b .ico { background: #FDF1E0; color: #9A6A18; }
.vw-offer-card.b2b li::before { background: #FF8A3D; }
.vw-offer-card.b2b .cta svg { color: #B0771A; }
@media (max-width: 1080px) { .vw-offer-grid.three { grid-template-columns: 1fr; } }


/* ── Where you fit ────────────────────────────────────────────────────
   With no hub page, each of the three pages carries the map: the two
   routes to market, and a way across for anyone who landed wrong. */
.vw-fit { padding: 84px 0; background: var(--canvas); border-top: 1px solid var(--hairline); }
.vw-fit-head { max-width: 640px; }
.vw-fit-head .eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mint-deep); }
.vw-fit-head h2 { margin: 14px 0 0; font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 800;
  letter-spacing: -.04em; line-height: 1.05; color: var(--ink); }


.vw-fit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.vw-fit-card { position: relative; display: block; background: var(--card);
  border: 1px solid var(--hairline); border-radius: 22px; padding: 26px;
  text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.vw-fit-card:hover { transform: translateY(-3px); border-color: rgba(18,190,142,.45);
  box-shadow: 0 20px 46px rgba(17,20,24,.10); text-decoration: none; }
.vw-fit-card.here { border-color: rgba(18,190,142,.55); background: #F4FCF9; }
.vw-fit-card .chip { display: inline-block; margin-bottom: 12px; font: 800 .68rem/1 var(--sans);
  letter-spacing: .1em; text-transform: uppercase; color: var(--mint-deep);
  background: var(--mint-soft); padding: 7px 11px; border-radius: 999px; }
.vw-fit-card h3 { margin: 0; font-size: 1.16rem; letter-spacing: -.025em; color: var(--ink); }
.vw-fit-card p { margin: 9px 0 0; font-size: .95rem; line-height: 1.5; color: #5A6270; }
.vw-fit-card .go { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font: 800 .93rem/1 var(--sans); color: var(--mint-deep); }
.vw-fit-card .go svg { width: 17px; height: 17px; transition: transform .18s ease; }
a.vw-fit-card:hover .go svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .vw-fit-card, .vw-fit-card .go svg { transition: none; }
  a.vw-fit-card:hover { transform: none; }
  a.vw-fit-card:hover .go svg { transform: none; }
}
@media (max-width: 900px) {
  .vw-fit-grid { grid-template-columns: 1fr; }
}


/* ── FAQ ──────────────────────────────────────────────────────────────
   Collapsed by default, filtered by category. <details> does the
   open/close natively; the script only handles the chips. */
.vw-faqs { padding: 92px 0; background: var(--canvas); border-top: 1px solid var(--hairline); }
.vw-faqs-head { max-width: 640px; }
.vw-faqs-head .eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mint-deep); }
.vw-faqs-head h2 { margin: 14px 0 0; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800;
  letter-spacing: -.042em; line-height: 1.04; color: var(--ink); }
.vw-faqs-head p { margin: 14px 0 0; font-size: 1.04rem; line-height: 1.55; color: #5A6270; }
.vw-faqs-head a { color: var(--mint-deep); font-weight: 700; }

.vw-faq-chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 32px 0 26px; }
.vw-faq-chip { font: 700 .9rem/1 var(--sans); color: #4C535F; background: #fff;
  border: 1px solid var(--hairline); padding: 11px 17px; border-radius: 999px;
  cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.vw-faq-chip:hover { color: var(--mint-deep); border-color: rgba(18,190,142,.45); }
.vw-faq-chip[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.vw-faqs .vw-faq { background: #fff; border: 1px solid var(--hairline); }
.vw-faqs .vw-faq + .vw-faq { margin-top: 10px; }
.vw-faqs .vw-faq summary { padding: 22px 26px; font-size: 1.06rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--ink); }
.vw-faqs .vw-faq[open] { border-color: rgba(18,190,142,.4); }
.vw-faqs .vw-faq[open] summary { color: var(--mint-deep); padding-bottom: 8px; }
.vw-faqs .vw-faq p { padding: 0 26px 24px; font-size: 1rem; line-height: 1.6; color: #5A6270; }
.vw-faqs .vw-faq p a { color: var(--mint-deep); font-weight: 700; }
.vw-faq[hidden] { display: none !important; }
@media (max-width: 600px) {
  .vw-faqs .vw-faq summary { padding: 18px 20px; font-size: 1rem; gap: 14px; }
  .vw-faqs .vw-faq p { padding: 0 20px 20px; }
}

/* ── Three steps ──────────────────────────────────────────────────────
   On its own tinted ground, because the section above it is white.
   Each step shows the thing it is about: the sensor, the link, the app. */
.vw-steps { position: relative; overflow: hidden; padding: 92px 0;
  background:
    radial-gradient(72% 100% at 88% 0%, rgba(20,200,160,.30) 0%, rgba(20,200,160,0) 60%),
    radial-gradient(60% 90% at 6% 20%, rgba(58,110,165,.13) 0%, rgba(58,110,165,0) 64%),
    linear-gradient(168deg, #E6F9F2 0%, #F0FBF7 46%, #F5F6F8 100%);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.vw-steps > .wrap { position: relative; z-index: 1; }
.vw-steps-head { max-width: 640px; margin-bottom: 42px; }
.vw-steps-head h2 { margin: 0; font-size: clamp(2.2rem, 4.4vw, 3.3rem); font-weight: 800;
  letter-spacing: -.045em; line-height: 1.02; color: var(--ink); }

.vw-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin: 0; padding: 0; list-style: none; }
.vw-step { position: relative; display: flex; flex-direction: column;
  background: var(--card); border-radius: 28px; padding: 0 30px 32px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(17,20,24,.09), 0 2px 5px rgba(17,20,24,.04); }

.vw-step .art { position: relative; height: 236px; margin: 0 -30px 0;
  display: grid; place-items: end center; overflow: hidden;
  background: linear-gradient(180deg, #F7FBF9 0%, #EDF7F3 100%); }
.vw-step .art.sensor { place-items: center; }
.vw-step .art.sensor img { height: 176px; width: auto; display: block;
  filter: drop-shadow(0 14px 22px rgba(17,20,24,.16)); }
/* whole screens in the site's own phone frame, rather than cropped
   rectangles cut out of a screenshot */
.vw-step .art.phone { background: linear-gradient(180deg, #F4FAFF 0%, #E9F3FC 100%); }
.vw-step .art.phone .vw-iphone { margin-bottom: -30px;
  filter: drop-shadow(0 16px 26px rgba(17,20,24,.20)); }

.vw-step .num { position: absolute; top: 18px; right: 20px; z-index: 2;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.86); font: 800 .84rem/1 var(--sans); color: var(--ink); }
.vw-step h3 { margin: 26px 0 0; font-size: 1.22rem; letter-spacing: -.028em; color: var(--ink); }
.vw-step p { margin: 9px 0 0; font-size: .99rem; line-height: 1.55; color: #5A6270; }

@media (max-width: 860px) { .vw-steps-grid { grid-template-columns: 1fr; } }



/* The closing block plays rather than sits still. */
.vw-kitchen { display: block; width: 100%; height: auto; border-radius: 26px;
  box-shadow: 0 24px 60px rgba(17,20,24,.13); background: #DDEFE4; }

/* ── Pico ─────────────────────────────────────────────────────────────
   A round launcher bottom-right that opens a small answer panel. He keeps
   his own mint ground inside the circle: the clip renders him in almost
   exactly the backdrop colour, so any cut-out frays at his highlights. */
.vw-pico { position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }

.vw-pico-launch { display: block; width: 64px; height: 64px; padding: 0;
  border: 2px solid #fff; border-radius: 50%; overflow: hidden; cursor: pointer;
  background: #C1E0CB; line-height: 0;
  box-shadow: 0 10px 26px rgba(17,20,24,.24), 0 2px 6px rgba(17,20,24,.10);
  transition: transform .2s ease, box-shadow .2s ease; }
.vw-pico-launch img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vw-pico-launch:hover { transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(17,20,24,.30), 0 2px 8px rgba(17,20,24,.12); }
.vw-pico-launch:focus-visible { outline: 3px solid var(--mint-deep); outline-offset: 4px; }

.vw-pico-panel { width: 320px; max-width: calc(100vw - 40px);
  background: var(--card); border-radius: 22px; overflow: hidden;
  box-shadow: 0 26px 64px rgba(17,20,24,.24), 0 2px 8px rgba(17,20,24,.10); }
.vw-pico-head { position: relative; display: flex; align-items: center; gap: 12px;
  padding: 15px 44px 15px 15px;
  background: linear-gradient(180deg, #E6F9F2 0%, #DCF3EA 100%); }
.vw-pico-head img { flex: none; display: block; width: 40px; height: 40px;
  border-radius: 50%; object-fit: cover; background: #C1E0CB; }
.vw-pico-head b { display: block; font-size: 1rem; letter-spacing: -.02em; color: var(--ink); }
.vw-pico-head span { display: block; margin-top: 1px; font-size: .78rem; color: #0A7D60; }
.vw-pico-x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center;
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: #4C535F; background: rgba(255,255,255,.7); }
.vw-pico-x:hover { background: #fff; color: var(--ink); }

.vw-pico-body { max-height: 44vh; overflow-y: auto; padding: 14px 15px;
  display: flex; flex-direction: column; gap: 9px; }
/* a short transcript, not a menu of every question the site can answer */
.vw-pico-b { max-width: 88%; padding: 11px 13px; font-size: .89rem; line-height: 1.5;
  border-radius: 15px; }
.vw-pico-b.pico { align-self: flex-start; color: #2C333D;
  background: var(--mint-soft); border-bottom-left-radius: 5px; }
.vw-pico-b.me { align-self: flex-end; color: #fff;
  background: var(--ink); border-bottom-right-radius: 5px; }
.vw-pico-b a { color: var(--mint-deep); font-weight: 700; }
.vw-pico-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 3px; }
.vw-pico-chip { cursor: pointer; font: 600 .82rem/1.25 var(--sans); color: #4A5260;
  background: #fff; border: 1px solid var(--hairline); border-radius: 999px;
  padding: 8px 12px; transition: border-color .18s, color .18s; }
.vw-pico-chip:hover { border-color: rgba(18,190,142,.55); color: var(--ink); }
.vw-pico-chip:focus-visible { outline: 2px solid var(--mint-deep); outline-offset: 2px; }

.vw-pico-form { padding: 12px 15px 14px; border-top: 1px solid var(--hairline); }
.vw-pico-form textarea { display: block; width: 100%; resize: none;
  font: 500 .9rem/1.45 var(--sans); color: var(--ink);
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--hairline);
  background: var(--canvas); }
.vw-pico-form .row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; }
.vw-pico-form input { font: 500 .88rem/1.2 var(--sans); color: var(--ink);
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--hairline);
  background: var(--canvas); min-width: 0; }
.vw-pico-form textarea:focus, .vw-pico-form input:focus { outline: 0;
  border-color: rgba(18,190,142,.6); background: #fff; }
.vw-pico-form.is-bad textarea:invalid, .vw-pico-form.is-bad input:invalid {
  border-color: var(--clay); background: var(--clay-soft); }
.vw-pico-form button { display: grid; place-items: center; width: 42px; cursor: pointer;
  border: 0; border-radius: 12px; color: #fff;
  background: linear-gradient(180deg, #20C99A 0%, #12BE8E 100%); }
.vw-pico-form button:focus-visible { outline: 2px solid var(--mint-deep); outline-offset: 2px; }
.vw-pico-note { margin: 9px 2px 0; font-size: .78rem; line-height: 1.4; color: var(--muted); }
.vw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 700px) {
  .vw-pico { right: 12px; bottom: 12px; }
  .vw-pico-launch { width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .vw-pico-launch { transition: none; }
  .vw-pico-launch:hover { transform: none; }
}

/* ── Closing call to action ───────────────────────────────────────────
   The kitchen clip runs behind it, washed back the way the hero video is,
   so the type stays readable without a solid colour block. */
.vw-cta-film { padding: 0 0 96px; background: var(--canvas); }
.vw-cta-card { position: relative; border-radius: 32px; overflow: hidden;
  min-height: 380px; display: grid; align-items: center;
  background: #DDEFE4; box-shadow: 0 26px 64px rgba(17,20,24,.14); }
.vw-cta-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 32% 50%; pointer-events: none; }
.vw-cta-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(96deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.90) 40%,
                    rgba(255,255,255,.62) 66%, rgba(255,255,255,.46) 100%),
    linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 45%); }
.vw-cta-body { position: relative; z-index: 2; padding: 62px 52px; max-width: 620px; }
.vw-cta-body h2 { margin: 0; font-size: clamp(2.1rem, 4vw, 3.1rem); font-weight: 800;
  letter-spacing: -.045em; line-height: 1.02; color: var(--ink); }
.vw-cta-body p { margin: 14px 0 0; font-size: 1.1rem; color: #3A424C; }
.vw-cta-body a { display: inline-block; margin-top: 28px; font: 700 1.02rem/1 var(--sans);
  color: #fff; background: var(--ink); padding: 18px 32px; border-radius: 999px; }
.vw-cta-body .fine { margin-top: 18px; font-size: .88rem; color: #5A6270; }

@media (max-width: 820px) {
  .vw-cta-card { min-height: 0; }
  .vw-cta-body { padding: 38px 26px; }
  .vw-cta-scrim { background: rgba(255,255,255,.86); }
}
@media (prefers-reduced-motion: reduce) { .vw-cta-bg { display: none; } }

/* ══ B2B: the dashboard page ═════════════════════════════════════════ */
.vw-dash-hero { position: relative; overflow: hidden; padding: 72px 0 0;
  background:
    radial-gradient(64% 90% at 82% 0%, rgba(20,200,160,.26) 0%, rgba(20,200,160,0) 60%),
    radial-gradient(56% 80% at 8% 14%, rgba(58,110,165,.16) 0%, rgba(58,110,165,0) 64%),
    linear-gradient(168deg, #101820 0%, #16212B 52%, #101820 100%); }
.vw-dash-lede { max-width: 780px; }
/* smaller than a full-width hero would be: it shares the row with the
   machine, so 60px type wrapped to four cramped lines */
.vw-dash-lede h1 { margin: 0; font-size: clamp(1.85rem, 3.05vw, 2.5rem); font-weight: 800;
  letter-spacing: -.042em; line-height: 1.08; color: #fff; text-wrap: balance; }
.vw-dash-lede h1 span { color: #3FDCAE; }
.vw-dash-lede p { margin: 18px 0 0; max-width: 56ch; font-size: 1.04rem; line-height: 1.6;
  color: rgba(255,255,255,.72); }
.vw-dash-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.vw-dash-cta a { font: 700 1rem/1 var(--sans); color: var(--ink); background: #fff;
  padding: 17px 30px; border-radius: 999px; }
.vw-dash-cta a.ghost { color: #fff; background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.34); }


.vw-sec-head { max-width: 700px; margin-bottom: 38px; }
.vw-sec-head h2 { margin: 0; font-size: clamp(2rem, 3.8vw, 2.9rem); font-weight: 800;
  letter-spacing: -.042em; line-height: 1.05; color: var(--ink); }
.vw-sec-head p { margin: 14px 0 0; font-size: 1.06rem; line-height: 1.55; color: #5A6270; }



/* ── Fitting facts ────────────────────────────────────────────────────
   A thin band under the hero, not a section: three deployment facts that
   answer the first objection, then the page moves on. The value story
   lives in the cards, so nothing here repeats them. */
.vw-facts-band { padding: 40px 0; background: #fff; border-bottom: 1px solid var(--hairline); }
.vw-facts { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 18px 52px; }
.vw-facts li { display: flex; align-items: center; gap: 13px; }
.vw-facts .ico { display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border-radius: 13px; background: var(--mint-soft); color: var(--mint-deep); }
.vw-facts .ico.blue { background: var(--blue-soft); color: var(--blue); }
.vw-facts .ico.plain { background: var(--canvas); color: #4A5260; }
.vw-facts b { display: block; font-size: 1.02rem; font-weight: 800;
  letter-spacing: -.025em; color: var(--ink); }
.vw-facts .t { display: block; font-size: .88rem; line-height: 1.35; color: #606874; }

/* ── Smart building ecosystem ─────────────────────────────────────────
   A hub diagram in CSS, not SVG. Five columns: cards, rail, node, rail,
   cards. Both rails share the card stacks' row structure — three 1fr rows
   with the same gap — so a stub centred in a rail row is centred on its
   card by construction, at any width, with no geometry to get wrong.
   The vertical bus spans row one's centre to row three's centre, which
   with three 1fr rows and gap g is exactly (100% - 2g)/6 from each end. */
.vw-eco { position: relative; padding: 100px 0; overflow: hidden;
  background:
    radial-gradient(50% 60% at 50% 46%, rgba(20,200,160,.20) 0%, rgba(20,200,160,0) 68%),
    radial-gradient(60% 70% at 88% 6%, rgba(58,110,165,.16) 0%, rgba(58,110,165,0) 64%),
    linear-gradient(168deg, #0B1219 0%, #101B24 52%, #0B1219 100%); }
.vw-eco-head { max-width: 680px; margin-bottom: 56px; }
.vw-eco-head h2 { margin: 0; text-wrap: balance;
  font-size: clamp(2rem, 3.8vw, 2.9rem); font-weight: 800;
  letter-spacing: -.042em; line-height: 1.05; color: #fff; }
.vw-eco-head p { margin: 16px 0 0; font-size: 1.04rem; line-height: 1.6;
  color: rgba(255,255,255,.70); }

.vw-eco-map { display: grid; grid-template-columns: 1fr 74px auto 74px 1fr;
  align-items: stretch; }

/* ── the two card stacks ── */
.vw-eco-col { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-rows: repeat(3, 1fr); gap: 16px; }
.vw-eco-col li { display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 16px;
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  transition: box-shadow .25s, background .25s; }
.vw-eco-col li:hover { background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(63,220,174,.34); }
.vw-eco-col .ico { display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border-radius: 12px; color: #5BE3B4; background: rgba(63,220,174,.10);
  box-shadow: inset 0 0 0 1px rgba(63,220,174,.22); }
.vw-eco-col b { display: block; font-size: 1rem; letter-spacing: -.022em; color: #fff; }
.vw-eco-col .t > span { display: block; margin-top: 3px;
  font-size: .84rem; line-height: 1.4; color: rgba(255,255,255,.56); }

/* ── the rails ── */
.vw-eco-rail { position: relative;
  display: grid; grid-template-rows: repeat(3, 1fr); gap: 16px; }
.vw-eco-rail::before { content: ""; position: absolute; left: 50%; width: 2px;
  transform: translateX(-50%);
  top: calc((100% - 32px) / 6); bottom: calc((100% - 32px) / 6);
  background-image: repeating-linear-gradient(to bottom,
    rgba(63,220,174,.55) 0 5px, rgba(63,220,174,0) 5px 12px);
  background-size: 2px 12px; }
.vw-eco-rail > span { position: relative; }
.vw-eco-rail > span::before { content: ""; position: absolute; top: 50%; height: 2px;
  transform: translateY(-50%);
  background-image: repeating-linear-gradient(to right,
    rgba(63,220,174,.55) 0 5px, rgba(63,220,174,0) 5px 12px);
  background-size: 12px 2px;
  animation: eco-flow 1.15s linear infinite; }
/* a dot where the line leaves the card */
.vw-eco-rail > span::after { content: ""; position: absolute; top: 50%; width: 6px; height: 6px;
  border-radius: 50%; background: #3FDCAE; transform: translateY(-50%);
  box-shadow: 0 0 0 3px rgba(63,220,174,.18); }
.vw-eco-rail.left > span::before { left: 0; right: 50%; }
.vw-eco-rail.left > span:nth-child(2)::before { right: 0; }
.vw-eco-rail.left > span::after { left: -3px; }
.vw-eco-rail.right > span::before { right: 0; left: 50%; }
.vw-eco-rail.right > span:nth-child(2)::before { left: 0; }
.vw-eco-rail.right > span::after { right: -3px; }
/* data leaves the hub, so the dashes travel outward on both sides */
.vw-eco-rail.left > span::before { animation-direction: reverse; }
@keyframes eco-flow { to { background-position-x: 12px; } }

/* ── the hub ── */
.vw-eco-node { position: relative; align-self: center; display: grid; place-items: center;
  padding: 0 6px; }
.vw-eco-node .ring { position: absolute; top: 50%; left: 50%; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  border: 1px solid rgba(63,220,174,.16); }
.vw-eco-node .r1 { width: 252px; height: 252px; }
.vw-eco-node .r2 { width: 340px; height: 340px; border-color: rgba(63,220,174,.09); }
.vw-eco-node .box { position: relative; display: grid; place-items: center;
  align-content: center; gap: 10px;
  width: 176px; height: 176px; border-radius: 50%;
  background: linear-gradient(168deg, rgba(20,200,160,.24) 0%, rgba(11,32,34,.86) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(63,220,174,.72), 0 0 70px rgba(20,200,160,.38);
  animation: eco-pulse 4.2s ease-in-out infinite; }
.vw-eco-node .mark { display: block; color: #5BE3B4; }
.vw-eco-node b { font: 800 1.16rem/1 var(--sans); letter-spacing: -.028em; color: #fff; }
@keyframes eco-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(63,220,174,.68), 0 0 58px rgba(20,200,160,.30); }
  50%      { box-shadow: inset 0 0 0 1.5px rgba(63,220,174,.92), 0 0 84px rgba(20,200,160,.50); }
}

.vw-eco-foot { margin: 52px 0 0; padding-top: 26px; text-align: center;
  font-size: .95rem; color: rgba(255,255,255,.54); }
.vw-eco-foot::before { content: ""; display: block; width: 46px; height: 2px;
  margin: 0 auto 22px; border-radius: 2px; background: rgba(63,220,174,.5); }

@media (prefers-reduced-motion: reduce) {
  .vw-eco-rail > span::before, .vw-eco-node .box { animation: none; }
}
@media (max-width: 1080px) {
  .vw-eco-map { grid-template-columns: 1fr 54px auto 54px 1fr; }
  .vw-eco-node .box { width: 152px; height: 152px; }
  .vw-eco-node .r1 { width: 210px; height: 210px; }
  .vw-eco-node .r2 { width: 286px; height: 286px; }
}
/* stacked, the rails and rings would be decoration with nothing to
   connect, so they go and the hub leads the list instead */
@media (max-width: 900px) {
  .vw-eco { padding: 76px 0; }
  .vw-eco-map { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .vw-eco-rail, .vw-eco-node .ring { display: none; }
  .vw-eco-node { grid-column: 1 / -1; margin-bottom: 10px; }
  .vw-eco-col { grid-template-rows: none; gap: 14px; }
}
@media (max-width: 620px) {
  .vw-eco-map { grid-template-columns: 1fr; }
}

/* ── Why us ───────────────────────────────────────────────────────────
   The closing argument before the pilot. */
.vw-wb { padding: 92px 0; background: #fff; }
.vw-wb-grid { display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: 20px; row-gap: 0; grid-template-rows: auto auto auto; }
.vw-wb-card p { max-width: 26ch; }
.vw-wb-card { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid;
  align-content: start; padding: 30px 28px 32px;
  background: var(--canvas); border-radius: 24px; }
.vw-wb-card .ico { display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 14px; background: var(--mint-soft); color: var(--mint-deep); }
.vw-wb-card .ico.blue { background: var(--blue-soft); color: var(--blue); }
.vw-wb-card .ico.amber { background: var(--amber-soft); color: var(--amber); }
.vw-wb-card h3 { margin: 20px 0 0; font-size: 1.2rem; font-weight: 800;
  letter-spacing: -.028em; line-height: 1.22; color: var(--ink); }
.vw-wb-card p { margin: 10px 0 0; font-size: .98rem; line-height: 1.6; color: #5A6270; }

@media (max-width: 900px) {
  .vw-wb { padding: 72px 0; }
  .vw-wb-grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 20px; }
  .vw-wb-card { display: block; grid-row: auto; }
}

.vw-hw { padding: 92px 0; background: #fff; }
.vw-hw-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 56px; align-items: center; }
.vw-hw-grid h2 { margin: 0; font-size: clamp(2rem, 3.8vw, 2.9rem); font-weight: 800;
  letter-spacing: -.042em; line-height: 1.05; color: var(--ink); }
.vw-hw-grid p { margin: 16px 0 0; font-size: 1.04rem; line-height: 1.6; color: #5A6270; }
.vw-hw-grid picture { display: grid; place-items: center; padding: 34px; border-radius: 28px;
  background:
    radial-gradient(90% 90% at 50% 20%, rgba(20,200,160,.16) 0%, rgba(20,200,160,0) 62%),
    linear-gradient(180deg, #F6FBF9 0%, #EAF5F1 100%); }
.vw-hw-grid img { display: block; width: 72%; max-width: 250px; height: auto;
  filter: drop-shadow(0 24px 38px rgba(17,20,24,.20)); }
.vw-hw-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.vw-hw-cta a { font: 700 1rem/1 var(--sans); color: #fff; background: var(--ink);
  padding: 17px 28px; border-radius: 999px; }
.vw-hw-cta a.ghost { color: var(--ink); background: var(--canvas); }

.vw-uses { padding: 92px 0; background: var(--canvas); }
.vw-use-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  /* start, not stretch: an open card must not drag the closed ones in
     its row out to its own height and leave them half empty. */
  align-items: start; }
/* ── Capability cards, expandable ─────────────────────────────────────
   Title and one line always visible so the section still says what it
   does at rest; the points are behind the toggle. The open row is a grid
   0fr -> 1fr, which animates a height the browser does not otherwise
   know, without measuring anything in script. */
.vw-use { background: var(--card); border: 1px solid var(--hairline);
  border-radius: 22px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.vw-use.is-open { border-color: #C9E9DA; box-shadow: 0 10px 30px rgba(17,20,24,.06); }
.vw-use-head { display: grid; grid-template-columns: auto 1fr auto; align-items: start;
  gap: 14px; width: 100%; text-align: left; cursor: pointer;
  /* a floor under the head so every closed card is the same box, however
     the title and its line happen to wrap */
  min-height: 148px; align-content: start;
  padding: 24px 22px; background: none; border: 0; font: inherit; color: inherit; }
.vw-use-head:hover .pm { background: var(--canvas); }
.vw-use-head:focus-visible { outline: 2px solid var(--mint-deep); outline-offset: -3px; }
.vw-use .ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 12px; background: var(--mint-soft); color: var(--mint-deep); }
.vw-use .ico.blue { background: var(--blue-soft); color: var(--blue); }
.vw-use .ico.amber { background: var(--amber-soft); color: var(--amber); }
.vw-use .ico.clay { background: var(--clay-soft); color: var(--clay); }
.vw-use .t b { display: block; font-size: 1.08rem; font-weight: 800;
  letter-spacing: -.028em; line-height: 1.25; color: var(--ink); }
.vw-use .t > span { display: block; margin-top: 5px;
  font-size: .93rem; line-height: 1.5; color: #606874; }
/* the toggle: two bars, the vertical one folds away when the card opens */
.vw-use .pm { position: relative; width: 30px; height: 30px; flex: none;
  border-radius: 50%; background: transparent; transition: background .2s; }
.vw-use .pm::before, .vw-use .pm::after { content: ""; position: absolute;
  left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px;
  background: #6B7480; transform: translate(-50%, -50%);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .2s; }
.vw-use .pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.vw-use.is-open .pm::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.vw-use.is-open .pm::before { background: var(--mint-deep); }
.vw-use-body { display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .34s cubic-bezier(.22,.61,.36,1); }
.vw-use.is-open .vw-use-body { grid-template-rows: 1fr; }
.vw-use-body > div { overflow: hidden; }
.vw-use ul { margin: 0; padding: 0 22px 24px 76px; list-style: none; display: grid; gap: 10px; }
.vw-use li { position: relative; padding-left: 22px;
  font-size: .95rem; line-height: 1.5; color: #39414B; }
.vw-use li::before { content: ""; position: absolute; left: 4px; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: #12BE8E; }

@media (prefers-reduced-motion: reduce) {
  .vw-use-body, .vw-use .pm::before, .vw-use .pm::after { transition: none; }
}
@media (max-width: 560px) { .vw-use ul { padding-left: 22px; } }


.vw-rollout { padding: 92px 0; background: var(--canvas); }
/* ── The pilot, as a numbered sequence ────────────────────────────────
   The numbers earn their place: this is an order of events, not three
   parallel options. No subgrid here — the three steps carry different
   amounts of text, and pinning their rows together left holes in the
   short ones. Content flows; only the cards themselves match height. */
.vw-pilot { list-style: none; margin: 34px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vw-pilot > li { padding: 26px 26px 28px;
  background: #fff; border: 1px solid var(--hairline); border-radius: 24px; }
.vw-pilot-top { display: flex; align-items: center; gap: 13px; margin: 0; }
.vw-pilot .n { display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 10px; background: var(--mint-soft); color: var(--mint-deep);
  font: 800 .95rem/1 var(--sans); font-variant-numeric: tabular-nums; }
.vw-pilot-top > span:last-child { font: 800 1.1rem/1.25 var(--sans);
  letter-spacing: -.028em; color: var(--ink); }
.vw-pilot > li:nth-child(2) .n { background: var(--blue-soft); color: var(--blue); }
.vw-pilot > li:nth-child(3) .n { background: var(--amber-soft); color: var(--amber); }
.vw-pilot > li > p:not(.vw-pilot-top) { margin: 14px 0 0;
  font-size: .97rem; line-height: 1.58; color: #5A6270; }
.vw-pilot ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.vw-pilot ul li { position: relative; padding-left: 22px;
  font-size: .94rem; line-height: 1.5; color: #39414B; }
.vw-pilot ul li::before { content: ""; position: absolute; left: 4px; top: .56em;
  width: 6px; height: 6px; border-radius: 50%; background: #12BE8E; }
.vw-pilot > li:nth-child(2) ul li::before { background: #3A6EA5; }
.vw-pilot > li:nth-child(3) ul li::before { background: #B0771A; }

/* the sequence, animated. A single rail is drawn behind the row at the
   height of the number badges: the cards are opaque, so it shows only in
   the two gaps between them. As the mint fill grows left to right the
   first gap lights, then the second — the eye is walked 1 -> 2 -> 3
   without a chevron or a box anywhere. */
.vw-pilot { position: relative; }
.vw-pilot::before, .vw-pilot::after { content: ""; position: absolute; z-index: 0;
  left: 0; right: 0; top: 41px; height: 2px; border-radius: 2px; }
.vw-pilot::before { background: var(--hairline); }
.vw-pilot::after { background: linear-gradient(90deg, #12BE8E 0%, #3FDCAE 100%);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.15s cubic-bezier(.4, 0, .2, 1) .12s; }
.vw-pilot.is-in::after { transform: scaleX(1); }
.vw-pilot > li { position: relative; z-index: 1; }
.vw-pilot > li { opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); }
.vw-pilot.is-in > li { opacity: 1; transform: none; }
.vw-pilot.is-in > li:nth-child(2) { transition-delay: .16s; }
.vw-pilot.is-in > li:nth-child(3) { transition-delay: .32s; }
/* each badge settles as the rail reaches it */
.vw-pilot .n { transform: scale(.86); transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.vw-pilot.is-in .n { transform: none; }
.vw-pilot.is-in > li:nth-child(2) .n { transition-delay: .42s; }
.vw-pilot.is-in > li:nth-child(3) .n { transition-delay: .78s; }

@media (prefers-reduced-motion: reduce) {
  .vw-pilot > li, .vw-pilot .n, .vw-pilot::after { transition: none; }
  .vw-pilot > li { opacity: 1; transform: none; }
  .vw-pilot .n { transform: none; }
  .vw-pilot::after { transform: scaleX(1); }
}
@media (max-width: 900px) {
  .vw-pilot { grid-template-columns: 1fr; }
  /* stacked, the rail runs down through the badges instead of across */
  .vw-pilot::before, .vw-pilot::after { left: 41px; right: auto; top: 0; bottom: 0;
    width: 2px; height: auto; }
  .vw-pilot::after { transform: scaleY(0); transform-origin: center top;
    transition: transform 1.15s cubic-bezier(.4, 0, .2, 1) .12s; }
  .vw-pilot.is-in::after { transform: scaleY(1); }
}




@media (max-width: 980px) {
  .vw-dash-body { grid-template-columns: 1fr; }
  .vw-dash-units { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .vw-tenant-grid, .vw-use-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .vw-dash { margin: 34px 0 -50px; }
  .vw-dash-units .col-head, .vw-dash-units .unit { grid-template-columns: 1fr 70px 62px; }
}

/* A week of daily cost under the open unit. Heights come from --h so the
   bars are data, not decoration. */
.vw-dash-detail .d-trend { margin-top: 14px; padding: 13px 14px 10px;
  background: #fff; border-radius: 10px; }
.vw-dash-detail .t-head { display: flex; align-items: baseline; justify-content: space-between;
  font-size: .8rem; color: var(--muted); }
.vw-dash-detail .t-head b { font-size: .95rem; color: var(--ink); font-variant-numeric: tabular-nums; }
/* The 1fr row is definite because .t-bars has a fixed height, so the bar's
   percentage height resolves against it. In an auto row it would be zero. */
.vw-dash-detail .t-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  height: 66px; margin-top: 10px; }
.vw-dash-detail .t-bars span { display: grid; grid-template-rows: 1fr 11px; gap: 5px;
  justify-items: center; }
.vw-dash-detail .t-bars i { display: block; align-self: end; width: 100%; height: var(--h);
  border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #3FDCAE 0%, #12BE8E 100%); }
.vw-dash-detail .t-bars span:last-child i { background: linear-gradient(180deg, #FFB84D 0%, #FF9A1F 100%); }
.vw-dash-detail .t-bars em { font-style: normal; font-size: .62rem; color: #606874; }

@media (max-width: 1080px) {
  .vw-use-grid { grid-template-columns: repeat(2, 1fr); }
  .vw-hw-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 760px) {
  .vw-use-grid { grid-template-columns: 1fr; }
}

/* ── Why Visiwatt ─────────────────────────────────────────────────────
   The one dark block on the homepage, so the claim that carries the most
   weight is the one that looks least like everything around it. */
.vw-why { position: relative; overflow: hidden; padding: 104px 0;
  background:
    radial-gradient(58% 84% at 88% 4%, rgba(20,200,160,.30) 0%, rgba(20,200,160,0) 62%),
    radial-gradient(52% 76% at 6% 96%, rgba(124,92,255,.22) 0%, rgba(124,92,255,0) 66%),
    radial-gradient(46% 70% at 48% 0%, rgba(34,166,245,.16) 0%, rgba(34,166,245,0) 64%),
    linear-gradient(165deg, #0C1319 0%, #131E27 54%, #0C1319 100%); }
.vw-why > .wrap { position: relative; z-index: 1; }
.vw-why-head { max-width: 640px; margin-bottom: 48px; }
.vw-why-head h2 { margin: 0; font-size: clamp(2.4rem, 5vw, 3.7rem); font-weight: 800;
  letter-spacing: -.05em; line-height: 1; color: #fff; }
.vw-why-head p { margin: 16px 0 0; font-size: 1.1rem; line-height: 1.55;
  color: rgba(255,255,255,.62); }

.vw-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vw-why-card { position: relative; display: flex; flex-direction: column;
  padding: 34px 32px 34px; border-radius: 26px;
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); }
.vw-why-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  border-radius: 26px 26px 0 0;
  background: linear-gradient(90deg, #12BE8E 0%, #22A6F5 100%); }
.vw-why-card:nth-child(2)::before { background: linear-gradient(90deg, #22A6F5 0%, #7C5CFF 100%); }
.vw-why-card:nth-child(3)::before { background: linear-gradient(90deg, #FFB84D 0%, #12BE8E 100%); }

.vw-why-card .stat { margin-bottom: 22px; }
.vw-why-card .stat b { display: block; font-size: clamp(2.6rem, 4.6vw, 3.5rem); font-weight: 800;
  letter-spacing: -.05em; line-height: 1;
  background: linear-gradient(180deg, #FFFFFF 0%, #9FE8D2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums; }
.vw-why-card .stat b span { font-size: .44em; letter-spacing: -.02em; margin-left: 3px; }
.vw-why-card .stat em { display: block; margin-top: 8px; font-style: normal;
  font: 700 .78rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.52); }
.vw-why-card h3 { margin: 0; font-size: 1.22rem; font-weight: 800; letter-spacing: -.03em;
  line-height: 1.24; color: #fff; }
.vw-why-card p { margin: 12px 0 0; font-size: .98rem; line-height: 1.62;
  color: rgba(255,255,255,.68); }

@media (max-width: 980px) { .vw-why-grid { grid-template-columns: 1fr; } .vw-why { padding: 72px 0; } }

/* ── Hero split: copy left, machine right ─────────────────────────────
   The dashboard sits beside the headline rather than under it, which
   also stops it dictating the height of the whole section. */
.vw-hero-split { display: grid; grid-template-columns: 1.08fr 1fr; gap: 46px;
  align-items: center; padding-bottom: 88px; }
.vw-dash-hero { padding: 76px 0 0; }

/* ── The machine ──────────────────────────────────────────────────────
   Lid, bezel, hinge, deck. The deck is wider than the lid and carries the
   finger lip, which is the detail that makes it read as a laptop. */
.vw-mac { position: relative; filter: drop-shadow(0 34px 44px rgba(0,0,0,.45)); }

.vw-mac-lid { position: relative; padding: 10px; border-radius: 14px 14px 4px 4px;
  background: linear-gradient(178deg, #454B53 0%, #2E343B 42%, #1E2329 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26),
              inset 0 0 0 1px rgba(255,255,255,.09),
              inset 0 -1px 0 rgba(0,0,0,.4); }

.vw-mac-bezel { position: relative; padding: 13px 5px 5px; border-radius: 7px;
  background: #07090B;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.vw-mac-bezel .cam { position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #4A525B 0%, #14181C 70%); }
.vw-mac-view { position: relative; border-radius: 2px; overflow: hidden; background: #fff; }
.vw-mac-view::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 22px rgba(12,18,26,.07); }

/* the sheen across the glass is what sells it as a screen */
.vw-mac-bezel .glare { position: absolute; inset: 13px 5px 5px; border-radius: 2px;
  pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(112deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.05) 26%,
              rgba(255,255,255,0) 46%, rgba(255,255,255,0) 100%); }

.vw-mac-hinge { height: 4px; margin: 0 6%;
  background: linear-gradient(180deg, #0E1216 0%, #262C33 100%); }

/* Seen from slightly above, the deck's front edge is wider than the hinge
   edge, so it is a trapezoid rather than a rectangle. */
/* Top edge equals the lid width; the front edge flares 6%, which is what a
   shallow viewing angle actually gives you. 16% looked like fins. */
.vw-mac-deck { position: relative; height: 14px; width: 106%; margin-left: -3%;
  clip-path: polygon(2.85% 0%, 97.15% 0%, 99.4% 62%, 98.2% 100%, 1.8% 100%, .6% 62%);
  background: linear-gradient(180deg, #E7EAEE 0%, #C3C9D0 18%, #9AA2AB 56%,
                              #7B838C 84%, #5F666E 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.vw-mac-deck .lip { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 15%; height: 5px; border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.10) 100%); }
/* contact shadow, so it sits on something */
.vw-mac-deck::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -9px;
  height: 12px; border-radius: 50%; background: rgba(0,0,0,.34); filter: blur(7px); }


/* ── The dashboard ────────────────────────────────────────────────── */
.vw-dsh { font-size: 11px; color: var(--ink); background: #fff; }
.vw-dsh .dsh-top { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 14px; border-bottom: 1px solid #EDEFF2; }
.vw-dsh .dsh-brand b { display: block; font-size: 1.15em; letter-spacing: -.01em; }
.vw-dsh .dsh-brand span { display: block; margin-top: 1px; font-size: .92em; color: #8A93A0; }
.vw-dsh .dsh-range { display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: #F1F3F6; }
.vw-dsh .dsh-range span { padding: 5px 10px; border-radius: 999px; font-weight: 700; color: #606874; }
.vw-dsh .dsh-range span.on { background: #fff; color: var(--ink);
  box-shadow: 0 1px 3px rgba(17,20,24,.14); }

.vw-dsh .dsh-kpis { display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid #EDEFF2; }
.vw-dsh .dsh-kpis > div { padding: 12px 14px; border-left: 1px solid #EDEFF2; }
.vw-dsh .dsh-kpis > div:first-child { border-left: 0; }
.vw-dsh .dsh-kpis em { display: block; font-style: normal; font-size: .9em; color: #8A93A0; }
.vw-dsh .dsh-kpis b { display: block; margin-top: 4px; font-size: 1.65em; font-weight: 800;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.vw-dsh .dsh-kpis b i { font-style: normal; font-size: .55em; font-weight: 700;
  margin-left: 2px; color: #8A93A0; }
.vw-dsh .dsh-kpis .good b { color: #0A7D60; }

.vw-dsh .dsh-main { display: grid; grid-template-columns: 1.5fr 1fr; }
.vw-dsh .dsh-chart { padding: 12px 14px 10px; border-right: 1px solid #EDEFF2; }
.vw-dsh .dsh-rank { padding: 12px 14px 10px; }
.vw-dsh .c-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; font-weight: 700; }
.vw-dsh .c-head .mut { font-weight: 400; color: #8A93A0; font-size: .92em; }

.vw-dsh .c-plot { position: relative; display: grid; grid-template-columns: repeat(24, 1fr);
  gap: 2px; align-items: end; height: 96px; margin-top: 10px; }
.vw-dsh .c-plot .grid { position: absolute; left: 0; right: 0; height: 1px; background: #F1F3F6; }
.vw-dsh .c-plot .grid:nth-child(1) { top: 0; }
.vw-dsh .c-plot .grid:nth-child(2) { top: 33%; }
.vw-dsh .c-plot .grid:nth-child(3) { top: 66%; }
.vw-dsh .c-plot .col { position: relative; display: flex; flex-direction: column-reverse;
  justify-content: flex-start; height: 100%; }
.vw-dsh .c-plot .col i { display: block; width: 100%; }
.vw-dsh .c-plot .col i:last-child { border-radius: 2px 2px 0 0; }
.vw-dsh .c-plot .col em { position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%);
  font-style: normal; font-size: .82em; color: #A8AEB7; }
.vw-dsh .c-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 20px; color: #606874; }
.vw-dsh .c-key span { display: inline-flex; align-items: center; gap: 5px; }
.vw-dsh .c-key i { width: 8px; height: 8px; border-radius: 2px; }

.vw-dsh .dsh-rank ul { margin: 10px 0 0; padding: 0; list-style: none; }
.vw-dsh .dsh-rank li { position: relative; display: grid;
  grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline;
  padding: 7px 0 9px; }
.vw-dsh .dsh-rank .n { color: #39414B; }
.vw-dsh .dsh-rank .p { font-weight: 800; font-variant-numeric: tabular-nums; }
.vw-dsh .dsh-rank .d { min-width: 34px; text-align: right; font-size: .92em; color: #A8AEB7;
  font-variant-numeric: tabular-nums; }
.vw-dsh .dsh-rank .d.up { color: #C8262C; }
.vw-dsh .dsh-rank .d.dn { color: #0A7D60; }
.vw-dsh .dsh-rank em { position: absolute; left: 0; bottom: 3px; width: var(--w); height: 3px;
  border-radius: 2px; background: linear-gradient(90deg, #3FDCAE 0%, #12BE8E 100%); }
.vw-dsh .dsh-rank li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px;
  height: 3px; border-radius: 2px; background: #F1F3F6; z-index: -1; }

.vw-dsh .dsh-flag { display: flex; align-items: flex-start; gap: 7px;
  padding: 10px 14px; border-top: 1px solid #EDEFF2;
  color: #8A5A17; background: #FDF7EC; line-height: 1.45; }
.vw-dsh .dsh-flag svg { flex: none; margin-top: 1px; }
.vw-dsh .dsh-flag b { color: #6E4712; }

@media (max-width: 1080px) {
  .vw-hero-split { grid-template-columns: 1fr; gap: 40px; padding-bottom: 64px; }
  .vw-dash-hero { padding: 56px 0 0; }
}
@media (max-width: 640px) {
  .vw-dsh { font-size: 9px; }
  .vw-dsh .dsh-main { grid-template-columns: 1fr; }
  .vw-dsh .dsh-chart { border-right: 0; border-bottom: 1px solid #EDEFF2; }
}

/* ── Audiences and sectors ────────────────────────────────────────────
   Same measurement, read three ways; then the buildings it suits. */
.vw-aud { padding: 92px 0; background: #fff; }
.vw-aud-grid { display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: 20px; row-gap: 0;
  /* three rows, not four: the icon is out of flow on the card's top edge.
     row-gap is 0 because the cards are subgrids — a row gap here would be
     inherited into every card and open a hole at each seam. */
  grid-template-rows: auto auto auto; }
/* subgrid: "Facility & Operations Managers" runs to two lines where the
   other two headings run to one, and without it that card's paragraph and
   bullets sit a line lower than its neighbours'. */
.vw-aud-card { position: relative; display: grid; grid-row: 1 / -1;
  grid-template-rows: subgrid; align-content: start;
  background: var(--canvas); border-radius: 26px; padding: 28px 30px 32px; }
/* the icon sits on the card's top edge rather than in a row of its own,
   which was costing every card 66px of height for one glyph */
.vw-aud-card .ico { position: absolute; top: 20px; right: 20px;
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 14px; background: var(--mint-soft); color: var(--mint-deep); }
.vw-aud-card .ico.blue { background: var(--blue-soft); color: var(--blue); }
.vw-aud-card .ico.amber { background: var(--amber-soft); color: var(--amber); }
.vw-aud-card h3 { margin: 0; padding-right: 52px;
  font-size: 1.22rem; letter-spacing: -.028em; color: var(--ink); }
.vw-aud-card > p { margin: 8px 0 0; font-size: .98rem; line-height: 1.55; color: #5A6270; }
.vw-aud-card ul { align-self: start; margin: 18px 0 0; padding: 0; list-style: none; }
.vw-aud-card li { position: relative; padding-left: 24px; margin-top: 10px;
  font-size: .95rem; line-height: 1.5; color: #454C58; }
.vw-aud-card li::before { content: ""; position: absolute; left: 4px; top: .55em;
  width: 7px; height: 7px; border-radius: 50%; background: #12BE8E; }
.vw-aud-card:nth-child(2) li::before { background: #3A6EA5; }
.vw-aud-card:nth-child(3) li::before { background: #B0771A; }

/* A real building behind the sector list: the lit windows are the point. */

@media (max-width: 1080px) {
  .vw-aud-grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 20px; }
  .vw-aud-card { display: block; grid-row: auto; }
}


/* The dashboard mockup, in place of the frame that was drawn in CSS. */
.vw-laptop { display: block; }
.vw-laptop img { display: block; width: 100%; height: auto;
  filter: drop-shadow(0 30px 46px rgba(0,0,0,.42)); }

/* Public forms must shrink with the viewport instead of taking the intrinsic
   width of two text inputs. min-width:0 also keeps grid cards within a phase. */
.vw-field, .vw-contact-cols > *, .vw-split > *, .vw-tech-grid > * { min-width: 0; }
[data-lead-form] input:not([type="checkbox"]),
[data-lead-form] textarea, [data-lead-form] select { width: 100%; min-width: 0; max-width: 100%; }
[data-lead-form] button[type="submit"], .vw-pico-form button[type="submit"] {
  background: #087255 !important; color: #fff;
}
@media (max-width: 600px) {
  [data-lead-form] { padding: 24px 20px !important; }
  [data-lead-form] > div, .vw-field { min-width: 0; }
  .vw-contact-cols, .vw-tech-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .vw-install-photo::before { left: 0; right: 0; }
}
.vw-pico-b.me { background: #087255; }
@media (max-width: 600px) {
  [data-audience-panel] > .vw-split { padding: 28px 20px !important; }
}
@media (max-width: 600px) {
  .vw-carousel { grid-template-columns: minmax(0, 1fr); }
  .vw-carousel-phone .vw-iphone { --w: min(300px, calc(100vw - 56px)) !important; }
}