/* Porcelain & Navy (the client's pick): cool white pages, navy type and buttons, and a dark
   band for the film. The base tokens below are the original dark world; the Porcelain & Navy
   block at the end of this file sets the site's colors, plus the few colors written as literals.
   Layout: full-bleed film, then a 1180px column of sections, each opening with a label and a headline. */
:root {
  color-scheme: dark;
  --night: #05080e; --panel: #0b121c; --panel-2: #101a26; --line: rgba(90, 210, 255, 0.18); --line-2: rgba(233, 240, 245, 0.1);
  --cyan: #5ad2ff; --on-cyan: #04121c; --amber: #ffb35c; --paper: #e9f0f5; --soft: #c9d6e0; --muted: #8ca2b4;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: clamp(16px, 4vw, 56px);
  --nav-h: 64px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--night); color: var(--paper); font: 400 17px/1.6 var(--body); }
a { color: inherit; }
img, video, iframe { max-width: 100%; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 8px; background: var(--cyan); color: var(--on-cyan); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* Navigation */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; height: var(--nav-h); display: flex; align-items: center; gap: 20px; padding-inline: var(--gutter);
  background: rgba(5, 8, 14, 0.86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-2); }
.brand { display: inline-flex; align-items: center; min-height: 32px; font: 700 13px/1 var(--display); font-stretch: 125%; letter-spacing: 0.3em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.brand span { color: var(--cyan); }
.nav > nav { margin-left: auto; }
.nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.nav ul a { display: block; padding: 9px 11px; border-radius: 8px; font: 500 14px/1 var(--body); color: var(--soft); text-decoration: none; }
.nav ul a:hover, .nav ul a[aria-current="true"] { color: var(--paper); background: rgba(90, 210, 255, 0.1); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--cyan);
  background: none; color: var(--paper); font: 600 15px/1 var(--body); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn.solid { background: var(--cyan); color: var(--on-cyan); }
.btn.quiet { border-color: var(--line); color: var(--soft); }
.btn:hover { filter: brightness(1.12); }
.btn.small { min-height: 38px; padding: 0 14px; font-size: 14px; }
.menu { display: none; margin-left: auto; }
@media (max-width: 1040px) {
  .menu { display: inline-flex; }
  .nav > nav { margin-left: 0; }
  .nav ul { position: absolute; top: var(--nav-h); left: 0; right: 0; display: none; flex-direction: column; gap: 0; margin: 0; padding: 8px var(--gutter) 16px; background: var(--night); border-bottom: 1px solid var(--line-2); }
  .nav ul.open { display: flex; }
  .nav ul a { padding: 14px 4px; font-size: 16px; border-bottom: 1px solid var(--line-2); border-radius: 0; }
  .nav > .btn.solid { display: none; }
}

/* The film: nothing sits on top of it. The whole frame shows at every size (black at the sides
   on very wide or short screens), and the headline, buttons and controls sit in a band below. */
.hero { background: var(--night); }
.hero video { display: block; width: 100%; height: min(56.25vw, calc(100vh - var(--nav-h))); object-fit: contain; background: #000; }
.hero-copy { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px clamp(28px, 5vw, 72px); align-items: end;
  max-width: calc(1180px + 2 * var(--gutter)); margin: 0 auto; padding: clamp(32px, 5vw, 64px) var(--gutter) clamp(40px, 6vw, 72px); background: var(--night); }
.hero-title, .hero-act { display: grid; gap: 14px; min-width: 0; }
.eyebrow { margin: 0; font: 500 12px/1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); }
h1 { margin: 0; font: 300 clamp(34px, 4.6vw, 64px)/1.02 var(--display); font-stretch: 112%; letter-spacing: -0.015em; text-wrap: balance; }
h1 em, h2 em { font-style: normal; font-weight: 600; color: var(--cyan); }
.hero-copy p.lede { margin: 0; max-width: 56ch; color: var(--soft); font-size: clamp(15px, 1.4vw, 18px); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.film-note { margin: 0; font: 400 13px/1.5 var(--body); color: var(--muted); }
/* Captions for the full film, when the viewer turns them on: a strip under the picture, never on it. */
.cc-line { margin: 0; min-height: calc(2 * 1.4em + 20px); padding: 10px var(--gutter); display: grid; place-items: center; text-align: center; background: #000; color: #fff; font: 500 clamp(15px, 1.6vw, 19px)/1.4 var(--body); }
@media (max-width: 860px) { .hero-copy { grid-template-columns: 1fr; align-items: start; } }

/* Sections */
main > section { padding-block: clamp(64px, 9vw, 120px); padding-inline: var(--gutter); border-top: 1px solid var(--line-2); }
main > section.hero { padding: 0; border-top: 0; }
.spread { justify-content: space-between; }
.center { justify-content: center; }
.stack { display: grid; gap: 8px; align-content: start; }
.stack.wide { gap: 24px; }
.note { margin: 0; }
.wrap { max-width: 1180px; margin: 0 auto; display: grid; gap: 28px; }
.head { display: grid; gap: 14px; max-width: 760px; }
h2 { margin: 0; font: 300 clamp(30px, 4vw, 52px)/1.06 var(--display); font-stretch: 112%; letter-spacing: -0.01em; text-wrap: balance; }
h3 { margin: 0; font: 600 19px/1.3 var(--body); }
.head p { margin: 0; color: var(--soft); max-width: 64ch; }
.muted { color: var(--muted); }

/* Choose a screen for every room */
.chooser { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.rooms { display: grid; gap: 4px; }
.rooms button { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--soft); font: inherit; cursor: pointer; }
.rooms button b { font: 600 16px/1.3 var(--body); color: var(--paper); }
.rooms button span { font: 400 13px/1.3 var(--mono); color: var(--muted); }
.rooms button:hover { background: var(--panel); }
.rooms button[aria-selected="true"] { background: var(--panel-2); border-color: var(--line); }
.rooms button[aria-selected="true"] span { color: var(--cyan); }
.pick { display: grid; gap: 18px; min-width: 0; }
.shot { position: relative; margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); aspect-ratio: 16 / 10; }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.finishes { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); }
.finishes button { border: 0; background: none; color: var(--muted); font: 500 14px/1 var(--body); padding: 9px 14px; border-radius: 999px; cursor: pointer; min-height: 36px; }
.finishes button[aria-pressed="true"] { background: var(--cyan); color: var(--on-cyan); font-weight: 600; }
.pick-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 32px; }
.pick-info .best { margin: 0; font: 500 13px/1.4 var(--mono); letter-spacing: 0.04em; color: var(--amber); }
.pick-info p { margin: 0; color: var(--soft); }
.pick-info ul { margin: 0; padding-left: 1.1em; color: var(--muted); display: grid; gap: 4px; font-size: 15.5px; }
@media (max-width: 900px) {
  .chooser { grid-template-columns: 1fr; }
  .rooms { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: 6px; }
  .pick-info { grid-template-columns: 1fr; }
  .finishes { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
  .finishes button { flex: none; padding-inline: 12px; }
}

/* Live panel */
.live-bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.chip-set { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.chip-label { font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { border: 1px solid var(--line); background: none; color: var(--soft); font: 500 13px/1 var(--body); padding: 8px 12px; border-radius: 999px; cursor: pointer; min-height: 34px; }
.chips button[aria-pressed="true"] { background: var(--cyan); border-color: var(--cyan); color: var(--on-cyan); font-weight: 600; }
.frame { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); aspect-ratio: 16 / 10; }
.frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.frame .start { position: absolute; inset: 0; display: grid; place-content: center; gap: 14px; text-align: center; padding: 24px; background: linear-gradient(rgba(5, 8, 14, 0.78), rgba(5, 8, 14, 0.9)), var(--poster, none) center / cover; }
.frame .start p { margin: 0; color: var(--paper); max-width: 46ch; font-size: 17px; }
@media (max-width: 720px) { .frame { aspect-ratio: 9 / 14; } }

/* Haven */
.features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.features li { padding: 24px 28px 26px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; align-content: start; }
.features p { margin: 0; color: var(--muted); font-size: 15.5px; }
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }

/* Security */
.security { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.security blockquote { margin: 0; font: 300 clamp(26px, 3.2vw, 40px)/1.2 var(--display); font-stretch: 112%; color: #ffe2bd; }
.security pre { margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font: 400 13px/1.75 var(--mono); color: #bcd3e3; overflow-x: auto; }
.security pre b { color: var(--cyan); font-weight: 500; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checks li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 4px 14px; }
.checks li::before { content: ""; width: 10px; height: 10px; margin-top: 8px; border-radius: 50%; background: var(--cyan); grid-row: span 2; }
.checks p { margin: 0; color: var(--muted); font-size: 15.5px; }
@media (max-width: 900px) { .security { grid-template-columns: 1fr; } }

/* Homes */
.homes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.home-card { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); text-decoration: none; }
.home-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.home-card div { display: grid; gap: 8px; align-content: start; padding: 20px 22px 24px; }
.home-card p { margin: 0; color: var(--muted); }
.home-card .go { color: var(--cyan); font-weight: 600; }
.home-card:hover { border-color: var(--cyan); }
@media (max-width: 760px) { .homes { grid-template-columns: 1fr; } }

/* Builders */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: 8px; align-content: start; padding: 20px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); }
.steps li::before { content: "Step " counter(step); font: 500 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); }
.steps p { margin: 0; color: var(--muted); font-size: 15.5px; }
.styles { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.styles li { font: 500 13px/1 var(--mono); padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; color: #cfe6f5; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* FAQ */
.faq { display: grid; border-top: 1px solid var(--line); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font: 600 18px/1.35 var(--body); cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 26px/1 var(--display); color: var(--cyan); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 22px; color: var(--soft); max-width: 70ch; }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label { display: grid; gap: 7px; font: 500 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
label.full, .form-foot, .result { grid-column: 1 / -1; }
label { position: relative; }
label small { position: absolute; top: 0; right: 0; font: 400 12px/1 var(--body); letter-spacing: 0; text-transform: none; }
input, select, textarea { font: 400 16px/1.4 var(--body); color: var(--paper); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; min-height: 48px; width: 100%; }
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: transparent; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--amber); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form-foot p { margin: 0; font-size: 14px; color: var(--muted); }
.result { margin: 0; padding: 16px 18px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); display: grid; gap: 10px; }
.result.ok { border-color: var(--cyan); }
.result.warn { border-color: var(--amber); }
.result p { margin: 0; }
.result pre { margin: 0; white-space: pre-wrap; font: 400 13px/1.6 var(--mono); color: var(--soft); max-height: 220px; overflow: auto; }
.contact-side { display: grid; gap: 18px; }
.contact-side dl { margin: 0; display: grid; gap: 14px; }
.contact-side dt { font: 500 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.contact-side dd { margin: 0; color: var(--soft); }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } form { grid-template-columns: 1fr; } }

/* Footer */
footer { padding: 48px var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line-2); color: var(--muted); font-size: 14px; }
footer .wrap { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
footer h4 { margin: 0 0 10px; font: 500 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
footer ul a { display: inline-flex; align-items: center; min-height: 28px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--paper); }
footer .brand { color: var(--paper); }
footer .about p { margin: 12px 0 18px; max-width: 40ch; }
footer small { grid-column: 1 / -1; font-size: 13px; padding-top: 18px; border-top: 1px solid var(--line-2); }
@media (max-width: 860px) { footer .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } footer .about { grid-column: 1 / -1; } }
@media (max-width: 480px) { footer .wrap { grid-template-columns: 1fr; } }

/* ---- Motion: one idea, things drawn in light. Everything rests visible; motion only adds. ---- */
@media (prefers-reduced-motion: no-preference) {
  /* The hero copy rises in once, on load, in reading order. */
  .hero-copy > * { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero-copy > :nth-child(2) { animation-delay: 0.08s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.16s; }
  .hero-copy > :nth-child(4) { animation-delay: 0.24s; }
  .hero-copy > :nth-child(5) { animation-delay: 0.32s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }

  /* A new screen fades in under one sweep of cyan light, like the hologram drawing a room. */
  .shot img { transition: opacity 0.35s ease; }
  .shot.swap img { opacity: 0.25; }
  .shot::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--cyan) 20%, var(--cyan) 80%, transparent); box-shadow: 0 0 18px 2px rgba(90, 210, 255, 0.55); }
  .shot.scan::after { animation: scan 0.75s cubic-bezier(0.4, 0, 0.2, 1); }
  @keyframes scan { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: calc(100% - 2px); opacity: 0; } }

  .rooms button, .home-card, .home-card img, .steps li, .chips button, .finishes button, .btn { transition: background-color 0.18s, border-color 0.18s, color 0.18s, transform 0.25s, box-shadow 0.25s, filter 0.18s; }
  .home-card:hover img { transform: scale(1.03); }
  .steps li:hover { border-color: var(--line); }
}
/* The selected room has a lit edge. */
.rooms button { position: relative; }
.rooms button::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); opacity: 0; transition: opacity 0.2s; }
.rooms button[aria-selected="true"]::before { opacity: 1; }
.home-card { overflow: hidden; }
.home-card > img { transform-origin: center; }
@media (max-width: 900px) { .rooms button::before { left: 10px; right: 10px; top: auto; bottom: 0; width: auto; height: 2px; } }

/* The security package. Product pictures sit on their own grounds (white studio, night navy);
   everything around them takes the site's tokens. */
.protection .wrap { gap: clamp(40px, 6vw, 72px); }
.protection .lede { margin: 0; color: var(--soft); max-width: 64ch; }
.protection h3 { margin: 0; }
.shot-wide { margin: 0; display: grid; gap: 12px; }
.shot-wide img { display: block; width: 100%; height: auto; aspect-ratio: 1344 / 752; object-fit: cover; border-radius: 18px; border: 1px solid var(--line); background: #f4f4f4; }
.shot-wide figcaption { margin: 0; color: var(--muted); font-size: 14.5px; max-width: 80ch; }

/* The rule in the code: the promise, the code that keeps it, and what the panel shows */
.rule { display: grid; gap: 20px; }
.rule h3:first-child, .o-head h3, .house-map .sub h3, .voices .sub h3 { font: 300 clamp(24px, 2.6vw, 32px)/1.15 var(--display); font-stretch: 112%; letter-spacing: -0.01em; }

/* One system, the whole house: the render with a numbered marker where each device goes */
.house-map { display: grid; gap: 22px; }
.house-map .sub { display: grid; gap: 10px; max-width: 64ch; }
.house-map .sub p { margin: 0; color: var(--soft); }
.map-fig { position: relative; margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #d1d1d3; aspect-ratio: 1600 / 905; max-width: 100%; }
.map-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mark { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font: 600 14px/1 var(--body); color: #fff; background: #0f1c2e; border: 2px solid #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.mark.fire { background: #b3261e; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; counter-reset: dev; }
.legend li { counter-increment: dev; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); align-content: start; }
.legend li::before { content: counter(dev); grid-row: span 2; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--body); color: var(--on-cyan); background: var(--cyan); }
.legend b { font-weight: 600; color: var(--paper); }
.legend span { color: var(--muted); font-size: 14.5px; }
@media (max-width: 980px) { .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .legend { grid-template-columns: 1fr; } .mark { width: 22px; height: 22px; font-size: 10.5px; border-width: 1.5px; } }

/* A small label above a heading */
.protection .kicker { margin: 0; font: 500 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); }

/* Feature rows: a picture and what it means, alternating sides */
.feature-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.feature-row.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.feature-row.flip figure { order: 2; }
.feature-row figure { margin: 0; }
.feature-row img { display: block; width: 100%; height: auto; aspect-ratio: 1344 / 752; object-fit: cover; border-radius: 18px; border: 1px solid var(--line); background: #071226; }
.feature-row .txt { display: grid; gap: 14px; }
.feature-row h3 { font: 300 clamp(26px, 3vw, 38px)/1.12 var(--display); font-stretch: 112%; letter-spacing: -0.01em; text-wrap: balance; }
.feature-row h3 em { font-style: normal; font-weight: 600; color: var(--cyan); }
.feature-row .txt > p { margin: 0; color: var(--soft); }
.feature-row ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.feature-row li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 12px; color: var(--soft); }
.feature-row li::before { content: ""; width: 8px; height: 8px; margin-top: 10px; border-radius: 2px; background: var(--cyan); }
.feature-row li b { color: var(--paper); font-weight: 600; }
@media (max-width: 900px) { .feature-row, .feature-row.flip { grid-template-columns: 1fr; } .feature-row.flip figure { order: 0; } }
.pkg-cta { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; padding: 24px 26px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel-2); }
.pkg-cta p { margin: 0; font: 300 clamp(20px, 2.2vw, 26px)/1.25 var(--display); font-stretch: 112%; color: var(--paper); }

/* Every piece, up close (the "Module Orbit" product shot): one piece stands in a white studio
   while the devices it works with float around it. Picking another folds them into the middle
   and flies them back out. Each device photo sits on white and is multiplied onto the studio,
   so no photo shows a box edge. The words sit beside the studio, never on it. */
.orbit { display: grid; gap: 18px; }
.o-head { display: grid; gap: 10px; max-width: 64ch; }
.o-head p { margin: 0; color: var(--soft); }
.o-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--panel); }
.studio { position: relative; overflow: hidden; background: radial-gradient(90% 70% at 50% 35%, #ffffff 0%, #f1f2f4 72%); min-height: 520px; color-scheme: light; }
.studio .dev { position: absolute; margin: 0; mix-blend-mode: multiply; will-change: transform, opacity;
  transition: transform 0.75s cubic-bezier(0.2, 0.75, 0.2, 1), opacity 0.45s ease, left 0.75s cubic-bezier(0.2, 0.75, 0.2, 1), top 0.75s cubic-bezier(0.2, 0.75, 0.2, 1); }
.studio .dev img { display: block; width: 100%; height: auto; }
.studio .o-hero { left: 50%; top: 56%; width: min(62%, 520px); transform: translate(-50%, -50%); z-index: 2; }
.studio .m { width: min(28%, 220px); z-index: 1; }
.studio .m.a { left: 6%; top: 6%; transform: rotate(-14deg); }
.studio .m.b { left: 68%; top: 4%; transform: rotate(12deg); }
.studio .m.c { left: 72%; top: 44%; width: min(22%, 180px); transform: rotate(-8deg); }
.studio.fold .m { left: 38%; top: 36%; transform: rotate(0deg) scale(0.35); opacity: 0; }
.studio.fold .o-hero { opacity: 0; transform: translate(-50%, -46%) scale(0.92); }
@media (prefers-reduced-motion: no-preference) {
  .studio .m img { animation: o-drift 7s ease-in-out infinite; }
  .studio .m.b img { animation-delay: -2.3s; animation-duration: 8s; }
  .studio .m.c img { animation-delay: -4.1s; animation-duration: 6.5s; }
  @keyframes o-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
}
@media (prefers-reduced-motion: reduce) { .studio .dev { transition: none; } }
.plate { position: absolute; bottom: -7%; width: 34%; height: 15%; border-radius: 14px; z-index: 3;
  background: linear-gradient(100deg, #c9ccd0 0%, #eef0f2 30%, #b8bcc1 55%, #e6e8ea 80%, #c3c6ca 100%); box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, 0.25); }
.plate.l { left: -6%; transform: rotate(8deg); }
.plate.r { right: -6%; transform: rotate(-9deg); }
.o-mark, .o-count { position: absolute; top: 18px; z-index: 4; font: 500 11.5px/1 var(--mono); letter-spacing: 0.2em; color: #555d68; }
.o-mark { left: 20px; }
.o-count { right: 20px; letter-spacing: 0.1em; }
.o-info { display: grid; align-content: center; gap: 18px; padding: clamp(22px, 3vw, 40px); border-left: 1px solid var(--line); min-width: 0; }
.o-panel { display: grid; gap: 12px; }
.o-name { margin: 0; font: 300 clamp(28px, 3vw, 40px)/1.08 var(--display); font-stretch: 112%; letter-spacing: -0.01em; color: var(--paper); }
.o-name b { font-weight: 600; }
.o-lede { margin: 0; color: var(--soft); }
.o-does { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.o-does li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 12px; color: var(--soft); font-size: 15.5px; }
.o-does li::before { content: ""; width: 8px; height: 8px; margin-top: 9px; border-radius: 2px; background: var(--cyan); }
.o-soon { display: inline-block; margin-left: 10px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--amber); color: var(--amber); font: 600 11px/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 6px; }
@media (prefers-reduced-motion: no-preference) { .o-swap { transition: opacity 0.3s, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); } .o-info.out .o-swap { opacity: 0; transform: translateY(8px); } }
.o-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.o-chip { appearance: none; display: grid; gap: 4px; justify-items: center; align-content: start; min-height: 44px; padding: 8px 6px 9px; border-radius: 12px; border: 1px solid var(--line); background: #f6f7f9;
  color: #15202e; font: 600 12px/1.2 var(--body); text-align: center; cursor: pointer; }
.o-chip img { width: 52px; height: 52px; mix-blend-mode: multiply; }
.o-chip:hover { border-color: var(--muted); }
.o-chip[aria-selected="true"] { background: #fff; border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
@media (max-width: 900px) {
  .o-body { grid-template-columns: 1fr; }
  .studio { min-height: 0; aspect-ratio: 1 / 0.95; }
  .o-info { border-left: 0; border-top: 1px solid var(--line); padding-top: 14px; }
  /* the picker sits right under the studio, so a tap shows its result */
  .o-picker { display: flex; overflow-x: auto; margin-inline: calc(-1 * clamp(22px, 3vw, 40px)); padding: 2px clamp(22px, 3vw, 40px) 10px; scroll-snap-type: x proximity; scroll-padding-inline: clamp(22px, 3vw, 40px); }
  .o-chip { flex: 0 0 92px; scroll-snap-align: start; }
}

/* Choose Haven's voice: four cards, a play button and a pick each. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.voices { display: grid; gap: 18px; margin-top: 12px; }
.voices .sub { display: grid; gap: 10px; max-width: 64ch; }
.voices .sub h3 { margin: 0; }
.voices .sub p { margin: 0; color: var(--soft); }
.voice-pick { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.voice { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 6px 12px; align-items: center; padding: 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.voice input { position: absolute; opacity: 0; pointer-events: none; }
.voice label { all: unset; display: grid; gap: 4px; cursor: pointer; min-width: 0; }
.voice label::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.voice label b { font: 600 18px/1.2 var(--body); color: var(--paper); }
.voice label span { font-size: 14px; color: var(--muted); }
.voice small { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); }
.voice .play { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--cyan); background: transparent; color: var(--cyan); display: grid; place-items: center; cursor: pointer; }
.voice .play svg { width: 20px; height: 20px; fill: currentColor; }
.voice .play[aria-pressed="true"] { background: var(--cyan); color: var(--on-cyan); }
.voice:has(input:checked) { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
.voice:has(input:checked) label b::after { content: " \2713"; color: var(--cyan); }
.voice:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 3px; }
.voice-note { margin: 0; color: var(--soft); }
.voice-note a { color: var(--cyan); }
.voice-fine { margin: 0; font-size: 13.5px; color: var(--muted); }
@media (max-width: 900px) { .voice-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .voice-pick { grid-template-columns: 1fr; } }

/* Porcelain & Navy: the site's colors. Tokens, then the few colors written as literals above
   (nav glass, quote, code). The film band (hero) and the live panel's start screen stay dark. */
:root {
  color-scheme: light;
  --night: #f4f5f7; --panel: #ffffff; --panel-2: #e9edf3; --line: rgba(16, 36, 66, 0.16); --line-2: rgba(16, 36, 66, 0.09);
  --cyan: #1d4a86; --on-cyan: #ffffff; --amber: #8a5a12; --paper: #0f1c2e; --soft: #34445b; --muted: #59677b;
  --quote: #0f1c2e; --code: #2a3a52; --shade: 12 22 38; --nav-bg: rgba(244, 245, 247, 0.92); --hover: rgba(29, 74, 134, 0.08);
}
.nav { background: var(--nav-bg); }
.nav ul a:hover, .nav ul a[aria-current="true"] { background: var(--hover); }
.frame .start { background: linear-gradient(rgb(var(--shade) / 0.78), rgb(var(--shade) / 0.9)), var(--poster, none) center / cover; }
.security blockquote { color: var(--quote); }
.security pre { color: var(--code); }
.styles li { color: var(--soft); }
/* Corporate restraint: no glow on the selected-room edge or the screen-change sweep. */
.rooms button::before { box-shadow: none; }
.shot::after { box-shadow: none; }
.hero, .frame .start {
  color-scheme: dark;
  --night: #0c1626; --paper: #f2f5f9; --soft: #cbd4e0; --muted: #9aa8ba; --cyan: #9cbce6; --on-cyan: #0c1626; --line: rgba(156, 188, 230, 0.32);
  color: var(--paper);
}
.home-card, .steps li, .shot, .frame { box-shadow: 0 1px 2px rgba(15, 28, 46, 0.06); }

/* FAQ: the heading beside the questions on wide screens. */
.faq-wrap { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(28px, 5vw, 72px); }
.faq-wrap .head { position: sticky; top: calc(var(--nav-h) + 24px); }
.faq-wrap .faq { max-width: none; }
.faq details p a { color: var(--cyan); }
@media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; } .faq-wrap .head { position: static; } }

/* Built by Meridian Interface: what we make, for anyone who wants a site like this. */
.services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.services li { display: grid; gap: 8px; align-content: start; padding: 22px 20px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); box-shadow: 0 1px 2px rgba(15, 28, 46, 0.06); }
.services li::before { content: ""; width: 28px; height: 2px; background: var(--cyan); margin-bottom: 6px; }
.services p { margin: 0; color: var(--muted); font-size: 15.5px; }
@media (max-width: 960px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .services { grid-template-columns: 1fr; } }

/* The maker, at the bottom of every page: logo, what we do, how to reach us. */
footer .maker { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; padding-top: 28px; border-top: 1px solid var(--line-2); }
footer .maker img { width: 168px; height: auto; }
footer .maker-text { display: grid; gap: 8px; max-width: 56ch; }
footer .maker-text p { margin: 0; color: var(--soft); }
footer .maker-k { font: 500 12px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper) !important; }
footer .maker a { color: var(--cyan); }
footer .maker a:hover { text-decoration: underline; }

/* Plain pages (how it was built, privacy, accessibility): one readable column. */
.doc { max-width: 760px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--gutter); }
.doc h1 { margin: 10px 0 18px; font: 300 clamp(34px, 5vw, 56px)/1.05 var(--display); font-stretch: 112%; text-wrap: balance; }
.doc h1 em, .doc h2 em { font-style: normal; color: var(--cyan); font-weight: 500; }
.doc h2 { margin: 48px 0 12px; font-size: clamp(24px, 3vw, 32px); }
.doc p, .doc li { color: var(--soft); }
.doc ul { padding-left: 1.2em; display: grid; gap: 8px; }
.doc a { color: var(--cyan); }
.doc .lede { font-size: 19px; color: var(--paper); }
.doc .facts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px 0 8px; }
.doc .facts li { padding: 18px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); display: grid; gap: 4px; }
.doc .facts b { font: 300 34px/1 var(--display); color: var(--paper); }
.doc .facts span { font-size: 14px; color: var(--muted); }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-2); }
.doc th { font: 500 12px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.doc td:first-child { color: var(--paper); font-weight: 600; white-space: nowrap; }
.doc .back { display: inline-flex; margin-top: 40px; }
@media (max-width: 640px) { .doc .facts { grid-template-columns: 1fr; } .doc td:first-child { white-space: normal; } }
.nav-back { margin-left: auto; }
@media (max-width: 520px) { .nav-back { display: none; } } /* the name links home, and the page ends with the same button */