/* Home page preview (2026-10-08). A scroll-driven film at the top: the page
   is pinned and scrolling moves the camera from the pour, into the plan, the
   estimator, the proposal, the crew sheet and back out to the finished slab.
   Below it, plain sections on a light ground. Self-contained: it does not
   load v2.css or v3.css so it cannot disturb the current home page. */

:root {
  --blue: #3a62e0;
  --blue-ink: #2f50c4;
  --ground: #0b0c10;
  --paper: #f4f3f0;
  --card: #ffffff;
  --text: #16181f;
  --text2: #50566b;
  --line: #dddbd5;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
}
html[data-theme="dark"] {
  --paper: #101217;
  --card: #171a21;
  --text: #e6e7ee;
  --text2: #9ba0b8;
  --line: #2a2e3a;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; color: #000; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: 6px;
  font: 600 15px/1 var(--sans); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-ink); }
.btn-line { border-color: rgba(255,255,255,.55); color: #fff; }
.btn-line:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn-white { background: #fff; color: var(--blue-ink); }
.btn-white:hover { background: #e9edfb; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn:focus-visible, .rail a:focus-visible, .nav a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.on-paper .btn:focus-visible, .on-paper a:focus-visible { outline-color: var(--blue); }

/* ── Nav: clear over the film, solid after it ─────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: 64px; display: flex; align-items: center;
  color: #fff;
  transition: background-color .25s, color .25s, border-color .25s;
  border-bottom: 1px solid transparent;
}
.nav .wrap { max-width: none; width: 100%; display: flex; align-items: center; gap: 28px; }
.wordmark { font: 800 19px/1 var(--sans); letter-spacing: -0.02em; text-decoration: none; }
.wordmark span { color: #7f9cff; }
.nav-links { display: flex; gap: 26px; margin-left: 12px; }
.nav-links a, .nav-signin { font-size: 14.5px; font-weight: 500; text-decoration: none; opacity: .88; }
.nav-links a:hover, .nav-signin:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.nav.solid { background: var(--paper); color: var(--text); border-bottom-color: var(--line); }
.nav.solid .wordmark span { color: var(--blue); }

/* ── The film ────────────────────────────────────────── */
.film { position: relative; background: var(--ground); color: #fff; }
.scene { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.media { position: absolute; inset: 0; will-change: transform, opacity; }
.media > img.full { width: 100%; height: 100%; object-fit: cover; }
.media.plate-ground { background: radial-gradient(120% 90% at 70% 45%, #22262f 0%, #12141a 55%, #0b0c10 100%); }
.plate {
  position: absolute; top: 50%; right: 17vw; transform: translateY(-50%);
  max-height: 74svh; max-width: 44vw; width: auto; height: auto;
  border: 1px solid rgba(255,255,255,.14);
}
.phone {
  position: absolute; top: 50%; right: 20vw; transform: translateY(-50%);
  height: min(78svh, 760px); aspect-ratio: 390 / 844;
  padding: 11px; border-radius: 54px;
  background: #16181d; box-shadow: inset 0 0 0 1px #3b3f49, 0 0 0 1px #000;
}
.phone-screen { position: relative; height: 100%; border-radius: 43px; overflow: hidden; background: #f4f6fb; }
.phone-shot { position: absolute; left: 0; top: 0; width: 100%; height: auto; margin-top: 15.6%; will-change: transform; }
.phone-bar {
  position: absolute; inset: 0 0 auto 0; height: 7.2%; background: rgb(234,240,253);
  display: flex; align-items: center; justify-content: space-between; padding: 0 9% 0 11%;
  font: 600 clamp(11px, 1.1vw, 15px)/1 -apple-system, 'SF Pro Text', var(--sans); color: #111;
}
.phone-bar i { position: absolute; left: 50%; top: 22%; width: 31%; height: 52%; transform: translateX(-50%); background: #000; border-radius: 99px; }
.phone-bar b { width: 7%; height: 32%; border: 1.5px solid #111; border-radius: 3px; position: relative; }
.phone-bar b::after { content: ""; position: absolute; inset: 1.5px; right: 25%; background: #111; border-radius: 1px; }

/* The trace over the plan: the app's polygon and handles, no numbers. */
.trace { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.trace .poly-fill { fill: rgba(58,98,224,.22); }
.trace .poly-edge { fill: none; stroke: #3a62e0; stroke-width: 4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.trace .vtx { fill: #fff; stroke: #3a62e0; stroke-width: 3; vector-effect: non-scaling-stroke; }
.trace .ring { fill: none; stroke: #3a62e0; stroke-width: 2; vector-effect: non-scaling-stroke; }
.trace .cursor { opacity: 0; }
.trace .cursor path { fill: #fff; stroke: #111; stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }

.scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,9,12,.74) 0%, rgba(8,9,12,.42) 34%, rgba(8,9,12,0) 62%),
    linear-gradient(0deg, rgba(8,9,12,.55) 0%, rgba(8,9,12,0) 38%),
    linear-gradient(180deg, rgba(8,9,12,.45) 0%, rgba(8,9,12,0) 16%);
}

.cap {
  position: absolute; left: var(--gutter); bottom: 13svh; bottom: 13vh;
  max-width: 560px; z-index: 3;
}
.cap-k {
  margin: 0; font: 500 12.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.cap-k b { color: #9db3ff; font-weight: 600; }
.cap h1, .cap h2 {
  margin: 16px 0 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.02; color: #fff;
  font-size: clamp(40px, 5.4vw, 76px);
}
.cap h2 { font-size: clamp(36px, 4.6vw, 64px); }
.cap p { margin: 18px 0 0; font-size: 18px; line-height: 1.5; color: rgba(255,255,255,.88); max-width: 480px; }
.cap-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cap-fine { margin-top: 18px !important; font-size: 14.5px !important; color: rgba(255,255,255,.72) !important; }
.cap-fine b { color: #fff; font-weight: 600; }

/* Static mode (no JS, or reduced motion): one scrim per scene. */
.stage { position: relative; }
.stage > .scrim { display: none; }

/* Chapter rail, right edge. */
.rail { display: none; }
.hint { display: none; }

/* Live mode: JS pins the stage and drives every scene from scroll. */
.film.live { height: var(--film-h, 600vh); }
.film.live .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.film.live .scene { position: absolute; inset: 0; height: auto; }
.film.live .scene .scrim { display: none; }
.film.live .stage > .scrim { display: block; z-index: 2; }
.film.live .media { opacity: 0; visibility: hidden; }
.film.live .cap { opacity: 0; visibility: hidden; will-change: opacity, transform; }
.film.live .rail {
  display: flex; flex-direction: column; gap: 4px;
  position: absolute; right: calc(var(--gutter) - 12px); top: 104px; z-index: 4;
  list-style: none; margin: 0; padding: 0;
}
.rail a {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: 7px 12px; text-decoration: none; color: rgba(255,255,255,.55);
  font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0,0,0,.7);
}
.rail a i { display: block; width: 18px; height: 1px; background: currentColor; transition: width .25s; }
.rail a:hover { color: #fff; }
.rail a.on { color: #fff; }
.rail a.on i { width: 34px; background: #9db3ff; }
.film.live .hint {
  display: block; position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 4;
  font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7);
  transition: opacity .3s;
}
.hint::after {
  content: ""; display: block; width: 1px; height: 28px; margin: 10px auto 0;
  background: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,0));
  animation: hintDrop 1.8s ease-in-out infinite;
}
@keyframes hintDrop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ── Sections below the film ─────────────────────────── */
.sec { padding: 112px 0; }
.kicker { margin: 0; font: 500 12.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
html[data-theme="dark"] .kicker { color: #8ea6ff; }
.h2 { margin: 18px 0 0; font-size: clamp(32px, 3.6vw, 48px); font-weight: 600; letter-spacing: -0.022em; line-height: 1.08; }
.lede { margin: 0; font-size: 18px; line-height: 1.6; color: var(--text2); }
.more { display: inline-block; margin-top: 22px; font-weight: 600; color: var(--blue); text-decoration: none; }
.more:hover { text-decoration: underline; text-underline-offset: 4px; }
html[data-theme="dark"] .more { color: #8ea6ff; }

.statement .grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: end; margin-top: 8px; }
.statement .h2 { font-size: clamp(36px, 4.4vw, 60px); }
.sig { margin-top: 22px; display: flex; gap: 12px; align-items: center; font-size: 14.5px; color: var(--text2); }
.sig b { color: var(--text); font-weight: 600; }

.pours-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.pours-head .lede { max-width: 420px; }
.pours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; margin-top: 52px; }
.pour { display: block; text-decoration: none; color: inherit; }
.pour figure { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: #d9d7d1; }
.pour img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.pour:hover img { transform: scale(1.04); }
.pour h3 { margin: 18px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.pour p { margin: 6px 0 0; font-size: 15.5px; color: var(--text2); }
.pour:hover h3 { color: var(--blue); }
html[data-theme="dark"] .pour:hover h3 { color: #8ea6ff; }

.dark { background: var(--ground); color: #fff; }
.dark .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.dark .kicker { color: #9db3ff; }
.dark .lede { color: rgba(255,255,255,.78); }
.dark figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.dark figure img { width: 100%; height: 100%; object-fit: cover; }
.leaks { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.16); }
.leaks li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.16); font-size: 16.5px; }
.leaks span { font: 500 12.5px/1.9 var(--mono); color: #9db3ff; }
.dark .more { color: #9db3ff; }

.faq .grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 72px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 36px 22px 0; position: relative;
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--text2); border-bottom: 2px solid var(--text2); transform: rotate(45deg);
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.faq details p { margin: 0 0 24px; max-width: 620px; color: var(--text2); font-size: 16px; }
.faq .alt { margin-top: 28px; font-size: 15px; color: var(--text2); }
.faq .alt a { color: var(--blue); font-weight: 600; }
html[data-theme="dark"] .faq .alt a { color: #8ea6ff; }

.close { background: var(--blue); color: #fff; padding: 104px 0; }
.close .grid { display: flex; justify-content: space-between; align-items: end; gap: 48px; }
.close .h2 { margin: 0; font-size: clamp(36px, 4.6vw, 62px); max-width: 720px; }
.close p { margin: 18px 0 0; font-size: 18px; color: rgba(255,255,255,.88); max-width: 560px; }
.close .cap-cta { margin-top: 0; flex: 0 0 auto; }
.close .btn:focus-visible { outline-color: #fff; }

.foot { padding: 40px 0 56px; font-size: 14px; color: var(--text2); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; }
.foot .wordmark { color: var(--text); font-size: 17px; }
.foot .wordmark span { color: var(--blue); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.foot small { margin-left: auto; font-size: 13.5px; }

/* ── Narrower screens. The film still runs; the rail goes. ── */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .statement .grid, .dark .grid, .faq .grid { grid-template-columns: 1fr; gap: 36px; }
  .pours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pours-head, .close .grid { flex-direction: column; align-items: flex-start; }
  .dark figure { aspect-ratio: 16 / 10; }
  .film.live .rail { display: none; }
  .plate { right: 50%; transform: translate(50%, -58%); max-width: 80vw; max-height: 50svh; }
  .phone { right: 50%; transform: translate(50%, -60%); height: 52svh; }
  .film.live .hint { display: none; }
}
@media (max-width: 600px) {
  .sec { padding: 76px 0; }
  .nav-signin { display: none; }
  .cap { bottom: 9svh; right: var(--gutter); }
  .cap p { font-size: 16px; }
  .pours { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .close { padding: 76px 0; }
  .foot small { margin-left: 0; }
}

/* No motion: the chapters stack as plain full-height panels (the default
   without JS too). */
@media (prefers-reduced-motion: reduce) {
  .pour img, .hint::after { transition: none; animation: none; }
}