/* story.css: the home page only. Loaded after product.css, which owns the tokens, the buttons,
   the cards and the footer. This file owns the floating nav, the hero, the scroll story, the
   bento grid and the manifesto. Nothing here is loaded by pricing, demo, trust or the legal pages.

   Design notes: warm paper and charcoal ink from product.css; the display face is the system
   serif so nothing is downloaded and every page still reads as one product. Motion comes from
   GSAP ScrollTrigger served from /vendor, never a CDN, so the site has no third-party request.
   Reduced motion: everything is laid out complete and still, the story stacks, nothing pins. */

:root {
  --serif: ui-serif, 'New York', 'Iowan Old Style', 'Palatino', Georgia, 'Times New Roman', serif;
  --stage-bg: #fdfcfa;
  --stage-ink: #1d1d1f;
  --night: #131317;
  --night-2: #1c1c22;
  --night-ink: #f3f1ed;
  --night-muted: #9d9a94;
  --ok: #3f8f5f;
  --ok-wash: rgba(63, 143, 95, .14);
  --warn: #b7791f;
  --warn-wash: rgba(183, 121, 31, .14);
  --heat: #c25d3f;
}
@media (prefers-color-scheme: dark) {
  :root { --stage-bg: #1c1b1f; --stage-ink: #f3f1ed; }
}

html, body { overflow-x: clip; max-width: 100%; }
main { overflow-x: clip; width: 100%; max-width: 100%; }
body { background: var(--bg); }
body::before { display: none; }

/* Ambient ground: two washes that drift very slowly. Fixed so the paper feels lit, not painted. */
.ambient { position: fixed; inset: -20vh -10vw; z-index: -1; pointer-events: none; overflow: hidden; }
.ambient i {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55;
  animation: drift 26s ease-in-out infinite alternate;
}
.ambient i:nth-child(1) { width: 70vw; height: 70vw; left: -18vw; top: -22vh; background: var(--accent-wash); }
.ambient i:nth-child(2) { width: 56vw; height: 56vw; right: -16vw; top: 6vh; background: rgba(196, 144, 110, .14); animation-delay: -9s; }
.ambient i:nth-child(3) { width: 64vw; height: 64vw; right: -10vw; bottom: -30vh; background: rgba(126, 152, 180, .12); animation-delay: -17s; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(4vw, 3vh, 0) scale(1.08); } }
.grain { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
@media (prefers-color-scheme: dark) { .grain { mix-blend-mode: screen; opacity: .05; } }

/* Floating nav: one glass pill, centred, sits over everything. */
header.top { position: fixed; top: 14px; left: 0; right: 0; z-index: 50; background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
header.top .bar {
  pointer-events: auto; width: auto; max-width: none; margin: 0 auto; display: inline-flex; gap: 6px;
  padding: 6px 6px 6px 14px; border-radius: 999px; position: relative; left: 50%; transform: translateX(-50%);
  background: color-mix(in srgb, var(--panel-solid) 78%, transparent); border: 1px solid var(--edge); outline: 1px solid var(--hair);
  box-shadow: var(--shadow-s); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
  transition: box-shadow .3s ease, transform .3s ease;
}
header.top.stuck .bar { box-shadow: var(--shadow-l); }
header.top .brand { margin-right: 10px; }
header.top nav.links { margin-left: 4px; gap: 2px; flex-wrap: nowrap; }
header.top nav.links a { padding: 8px 12px; border-radius: 999px; font-size: 14px; }
header.top nav.links a:hover { background: var(--accent-wash); }
header.top .cta-head { margin-left: 6px; border-radius: 999px; }
@media (max-width: 760px) {
  header.top .bar { padding: 5px 5px 5px 12px; gap: 4px; }
  header.top nav.links { display: none; }
}

/* Hero: cinematic centre. The headline gets the whole width so it never becomes a text wall. */
.hero { min-height: 100svh; display: grid; align-content: center; justify-items: center; text-align: center; padding: 120px 22px 40px; position: relative; }
.hero h1 {
  font-family: var(--serif); font-weight: 500; letter-spacing: -.028em; line-height: 1.02;
  font-size: clamp(2.7rem, 6.4vw, 6.4rem); max-width: 1180px; width: 100%; margin: 0 auto;
  text-wrap: balance;
}
.hero h1 em { font-style: italic; color: var(--accent); }
.hero .lede { margin: 26px auto 0; text-align: center; max-width: 42em; }
.hero .cta { justify-content: center; margin-top: 34px; }
.hero .btn, .hero .ghost { padding: 15px 28px; border-radius: 999px; font-size: 16px; }
.hero .fine { margin-top: 16px; }
.hero .word { display: inline-block; will-change: transform, opacity; }

/* The hero stage: a live board where enquiries land, in the visitor's first five seconds. */
.hero-stage { width: min(1080px, 100%); margin: 64px auto 0; position: relative; }
.board {
  background: var(--stage-bg); border: 1px solid var(--edge); outline: 1px solid var(--hair);
  border-radius: 22px; box-shadow: var(--shadow-l); overflow: hidden; text-align: left;
  transform-origin: 50% 0;
}
.board .chrome { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--hair); font-size: 12.5px; color: var(--muted); }
.board .chrome i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); display: inline-block; }
.board .chrome .url { margin-left: 10px; font-family: var(--mono); font-size: 12px; background: var(--bg-soft); padding: 4px 10px; border-radius: 8px; color: var(--ink-2); }
.board .cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 16px; min-height: 340px; }
.board .col h4 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; font-weight: 600; display: flex; justify-content: space-between; }
.board .col h4 b { color: var(--ink-2); font-weight: 600; }
.lead {
  background: var(--panel-solid); border: 1px solid var(--hair); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(15, 15, 20, .05); font-size: 13px; color: var(--ink-2); position: relative;
}
.lead b { display: block; color: var(--ink); font-weight: 600; font-size: 13.5px; margin-bottom: 2px; }
.lead .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.lead .tag { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--accent-wash); color: var(--accent); font-weight: 600; letter-spacing: .02em; }
.lead .tag.ok { background: var(--ok-wash); color: var(--ok); }
.lead .tag.hot { background: rgba(194, 93, 63, .12); color: var(--heat); }
.lead .tag.time { background: var(--bg-soft); color: var(--muted); font-family: var(--mono); font-weight: 500; }
.lead.new { opacity: 0; transform: translateY(-14px); }
@media (max-width: 760px) {
  .board .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; }
  .board .col:nth-child(n+3) { display: none; }
}

/* Manifesto: one paragraph, revealed word by word as it is read. */
.manifesto { padding: 160px 22px; }
.manifesto p {
  font-family: var(--serif); font-size: clamp(1.7rem, 3.6vw, 3.2rem); line-height: 1.22; letter-spacing: -.015em;
  max-width: 1080px; margin: 0 auto; text-align: left; color: var(--ink);
}
.manifesto p .w { opacity: .12; display: inline; }
.manifesto p em { font-style: italic; color: var(--accent); }

/* The story: a sticky stage on the right, six steps of text scrolling on the left. */
.story { padding: 80px 22px 120px; }
.story .head { max-width: 1080px; margin: 0 auto 60px; }
.story .head h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4.2vw, 3.6rem); letter-spacing: -.02em; line-height: 1.05; max-width: 16em; }
.story .head .sub { margin-top: 16px; }
.story .layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); max-width: 1180px; margin: 0 auto; align-items: start; }
.steps { display: grid; }
.step-s { min-height: 88svh; display: grid; align-content: center; padding: 10vh 0; }
.step-s .when { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; color: var(--accent); margin: 0 0 14px; }
.step-s h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 14px; }
.step-s p { color: var(--ink-2); font-size: 16.5px; max-width: 32em; }
.step-s { opacity: .32; transition: opacity .5s ease; }
.step-s.is-active { opacity: 1; }
.stage-wrap { position: sticky; top: 0; height: 100svh; display: grid; align-items: center; }
.stage {
  position: relative; width: 100%; aspect-ratio: 4 / 3.1; max-height: 78svh;
  background: var(--stage-bg); border: 1px solid var(--edge); outline: 1px solid var(--hair);
  border-radius: 26px; box-shadow: var(--shadow-l); overflow: hidden; color: var(--stage-ink);
}
.stage .scene { position: absolute; inset: 0; padding: clamp(18px, 3.2vw, 36px); display: grid; align-content: center; opacity: 0; visibility: hidden; }
.stage .scene.is-on { opacity: 1; visibility: visible; }
.stage .clock { position: absolute; top: 18px; right: 22px; font-family: var(--mono); font-size: 13px; color: var(--muted); letter-spacing: .08em; }
.stage .night { background: var(--night); color: var(--night-ink); }
.stage .night .clock { color: var(--night-muted); }

/* Scene pieces. Each is a small, honest reproduction of a CRM surface, not a screenshot. */
.mail { background: var(--panel-solid); border: 1px solid var(--hair); border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow-s); max-width: 520px; width: 100%; margin: 0 auto; font-size: 14px; color: var(--ink-2); }
.night .mail { background: var(--night-2); border-color: rgba(255, 255, 255, .08); color: #d8d5cf; }
.mail .from { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.mail .subj { font-weight: 600; color: inherit; margin-bottom: 8px; font-size: 15px; }
.night .mail .subj { color: var(--night-ink); }
.mail .body { line-height: 1.5; }
.mail .body mark { background: var(--warn-wash); color: inherit; padding: 0 3px; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 520px; width: 100%; margin: 14px auto 0; }
.field { background: var(--panel-solid); border: 1px solid var(--hair); border-radius: 12px; padding: 9px 12px; font-size: 13px; opacity: 0; transform: translateY(8px); }
.night .field { background: var(--night-2); border-color: rgba(255, 255, 255, .08); }
.field small { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.field b { font-weight: 600; }

.team { display: grid; gap: 12px; max-width: 520px; width: 100%; margin: 0 auto; }
.agent { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--night-2); border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; padding: 12px 14px; }
.agent .av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: linear-gradient(150deg, var(--accent-soft), var(--accent)); color: #141316; }
.agent b { display: block; font-size: 15px; }
.agent span { font-size: 12.5px; color: var(--night-muted); }
.agent .st { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--night-muted); white-space: nowrap; }
.agent.off { opacity: .38; }
.agent.pick { outline: 2px solid var(--accent); outline-offset: 2px; }
.agent.pick .st { background: var(--accent); color: #141316; }
.routed { margin: 16px auto 0; max-width: 520px; font-size: 13.5px; color: var(--night-muted); text-align: center; }

.chat { display: grid; gap: 10px; max-width: 540px; width: 100%; margin: 0 auto; }
.bubble { max-width: 86%; padding: 12px 15px; border-radius: 18px; font-size: 14px; line-height: 1.5; position: relative; }
.bubble.in { background: var(--bg-soft); color: var(--ink); border-bottom-left-radius: 6px; justify-self: start; }
.bubble.out { background: var(--ink); color: var(--bg); border-bottom-right-radius: 6px; justify-self: end; }
.night .bubble.in { background: var(--night-2); color: var(--night-ink); }
.night .bubble.out { background: var(--accent); color: #141316; }
.bubble .who { display: block; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; margin-bottom: 4px; }
.bubble .tr { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(127, 127, 127, .35); font-size: 12.5px; opacity: .75; font-style: italic; }
.typing { justify-self: end; display: inline-flex; gap: 4px; padding: 10px 14px; border-radius: 18px; background: var(--accent); opacity: .9; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #141316; animation: blink 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: .18s; } .typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.card-l { background: var(--panel-solid); border: 1px solid var(--hair); border-radius: 18px; padding: 18px 20px; max-width: 540px; width: 100%; margin: 0 auto; box-shadow: var(--shadow-s); }
.card-l .top { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 12px; }
.card-l .top b { font-size: 18px; letter-spacing: -.01em; }
.card-l .top small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.heat { display: inline-flex; gap: 3px; align-items: end; height: 20px; }
.heat i { width: 5px; background: var(--line); border-radius: 2px; height: 30%; }
.heat i.on { background: var(--heat); }
.heat i:nth-child(2) { height: 50%; } .heat i:nth-child(3) { height: 70%; } .heat i:nth-child(4) { height: 90%; } .heat i:nth-child(5) { height: 100%; }
.kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.kv div { background: var(--bg-soft); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.kv small { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.notes { font-size: 13.5px; color: var(--ink-2); display: grid; gap: 6px; }
.notes li { list-style: none; padding-left: 18px; position: relative; }
.notes li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.notes li.ask { color: var(--ink); font-weight: 600; }

.cal { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0; max-width: 540px; width: 100%; margin: 0 auto; background: var(--panel-solid); border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-s); }
.cal .hrs { display: grid; grid-template-rows: repeat(5, 46px); border-right: 1px solid var(--hair); font-family: var(--mono); font-size: 11px; color: var(--muted); }
.cal .hrs span { padding: 4px 8px; border-bottom: 1px solid var(--hair); }
.cal .grid-c { display: grid; grid-template-rows: repeat(5, 46px); position: relative; }
.cal .grid-c span { border-bottom: 1px solid var(--hair); }
.cal .ev { position: absolute; left: 10px; right: 10px; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; background: var(--accent-wash); border-left: 3px solid var(--accent); color: var(--ink); transform: scaleY(0); transform-origin: top; }
.cal .ev b { display: block; font-size: 13px; }
.route { display: flex; align-items: center; gap: 8px; max-width: 540px; margin: 14px auto 0; font-size: 12.5px; color: var(--muted); }
.route .pin { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); font-weight: 700; font-size: 11px; flex: 0 0 26px; }
.route .ln { flex: 1; height: 1px; background: var(--line); position: relative; }
.route .ln::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }

.deal { max-width: 540px; width: 100%; margin: 0 auto; background: var(--panel-solid); border: 1px solid var(--hair); border-radius: 18px; padding: 18px 20px; box-shadow: var(--shadow-s); }
.deal .row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 14px; }
.deal .row:last-child { border-bottom: 0; }
.deal .row b { font-weight: 600; }
.deal .row .amt { font-family: var(--mono); font-size: 13.5px; }
.deal .row .st { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: var(--ok-wash); color: var(--ok); font-weight: 600; }
.split { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin: 12px 0 6px; background: var(--bg-soft); }
.split i { display: block; height: 100%; transform: scaleX(0); transform-origin: left; }
.split i:nth-child(1) { background: var(--ink); } .split i:nth-child(2) { background: var(--accent); } .split i:nth-child(3) { background: var(--accent-soft); }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

.never { text-align: center; display: grid; justify-items: center; gap: 12px; }
.never .logo { width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center; font-family: var(--serif); font-size: 40px; font-weight: 500; background: linear-gradient(150deg, var(--accent-soft), var(--accent)); color: #141316; box-shadow: var(--shadow-s); }
.never b { font-size: 20px; letter-spacing: -.01em; }
.never span { color: var(--muted); font-size: 14px; max-width: 30em; }
.never .dom { font-family: var(--mono); font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--bg-soft); color: var(--ink-2); }

@media (max-width: 860px) {
  .story .layout { grid-template-columns: 1fr; gap: 0; }
  .stage-wrap { order: -1; position: sticky; top: 0; height: auto; z-index: 2; padding: 64px 0 8px; background: linear-gradient(var(--bg) 78%, transparent); }
  .stage { aspect-ratio: auto; height: 46svh; max-height: 420px; }
  .stage .scene { padding: 16px; }
  .steps { padding-top: 10px; }
  .step-s { min-height: 0; padding: 40px 0; }
  .step-s:first-child { padding-top: 10px; }
  .fields { grid-template-columns: 1fr 1fr; gap: 6px; }
  .field { padding: 7px 10px; font-size: 12px; }
  .mail { padding: 12px 14px; font-size: 12.5px; }
  .kv { grid-template-columns: 1fr 1fr 1fr; }
  .cal .hrs, .cal .grid-c { grid-template-rows: repeat(4, 40px); }
  .stage .clock { top: 12px; right: 14px; font-size: 11px; }
  .bubble { font-size: 13px; padding: 10px 12px; }
  .bubble .tr { display: none; }
  .fields .field:nth-child(n+5) { display: none; }
  .team { gap: 8px; }
  .agent { padding: 9px 12px; grid-template-columns: 36px minmax(0, 1fr) auto; }
  .agent .av { width: 36px; height: 36px; font-size: 13px; }
  .card-l { padding: 14px 16px; }
  .notes li:nth-child(n+4) { display: none; }
  .deal .row { padding: 7px 0; font-size: 13px; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .stage { height: 40svh; }
  .mail .body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Bento: gapless, dense, five cells over a 6x2 grid. 3+3 on the first row, 2+2+2 on the second. */
.bento-s { padding: 60px 22px 120px; }
.bento-s .head { max-width: 1080px; margin: 0 auto 40px; }
.bento-s h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4.2vw, 3.6rem); letter-spacing: -.02em; line-height: 1.05; max-width: 16em; }
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(340px, auto); grid-auto-flow: dense; gap: 14px; max-width: 1180px; margin: 0 auto; }
.cell { position: relative; overflow: hidden; border-radius: 22px; padding: 26px; background: var(--panel); border: 1px solid var(--edge); outline: 1px solid var(--hair); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); display: grid; align-content: end; gap: 8px; transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s ease; }
.cell:hover { transform: translateY(-3px); box-shadow: var(--shadow-l); }
.cell h3 { font-size: 20px; letter-spacing: -.015em; }
.cell p { font-size: 14.5px; color: var(--ink-2); max-width: 34em; }
.cell.c3 { grid-column: span 3; } .cell.c2 { grid-column: span 2; } .cell.c6 { grid-column: span 6; }
.cell .art { position: absolute; left: 0; right: 0; top: 0; bottom: 46%; pointer-events: none; overflow: hidden; }
.cell h3, .cell p { position: relative; z-index: 1; }
.cell.dark { background: var(--night); color: var(--night-ink); }
.cell.dark p { color: #cfcbc4; }
.cell.dark h3 { color: var(--night-ink); }
@media (max-width: 860px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .cell.c3, .cell.c2, .cell.c6 { grid-column: span 2; }
  .cell { padding-top: 190px; }
  .cell .art { bottom: auto; height: 176px; }
}

/* Art inside the cells: pure CSS, so it repaints in dark mode and never downloads. */
.marquee { position: absolute; left: -10%; right: -10%; top: 26px; display: grid; gap: 10px; transform: rotate(-4deg); opacity: .55; mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.marquee .row { display: flex; gap: 10px; white-space: nowrap; width: max-content; animation: slide 38s linear infinite; }
.marquee .row.r2 { animation-direction: reverse; animation-duration: 46s; }
.marquee span { font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); background: var(--panel-solid); }
.cell.dark .marquee span { border-color: rgba(255, 255, 255, .12); color: var(--night-ink); background: var(--night-2); }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cell.dark .marquee { opacity: .8; }
.switchboard { position: absolute; right: 22px; top: 22px; display: grid; gap: 6px; width: min(48%, 240px); }
.sw { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding: 6px 10px; border-radius: 10px; background: var(--panel-solid); border: 1px solid var(--hair); color: var(--ink-2); }
.sw i { width: 30px; height: 18px; border-radius: 999px; background: var(--line); position: relative; flex: 0 0 30px; transition: background .3s; }
.sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .3s; }
.sw.on i { background: var(--ok); } .sw.on i::after { transform: translateX(12px); }
.paint { position: absolute; right: -20px; top: -20px; width: 60%; height: 60%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--accent-soft), transparent 60%); opacity: .5; filter: blur(10px); }
.swatch { position: absolute; right: 22px; top: 22px; display: flex; gap: 6px; }
.swatch i { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--hair); }
.stack { position: absolute; right: 22px; top: 20px; width: min(70%, 260px); }
.stack .mini { position: absolute; left: 0; right: 0; background: var(--panel-solid); border: 1px solid var(--hair); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; box-shadow: var(--shadow-s); display: flex; justify-content: space-between; }
.stack .mini:nth-child(1) { top: 0; } .stack .mini:nth-child(2) { top: 44px; transform: scale(.96); opacity: .8; } .stack .mini:nth-child(3) { top: 88px; transform: scale(.92); opacity: .6; }
.stack .mini .amt { font-family: var(--mono); }
.clockface { position: absolute; right: 26px; top: 22px; font-family: var(--mono); font-size: 44px; letter-spacing: -.02em; color: var(--ink); opacity: .9; }
.clockface small { display: block; font-size: 12px; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.map { position: absolute; right: 18px; top: 18px; width: 46%; height: 86%; border-radius: 14px; background: var(--bg-soft); border: 1px solid var(--hair); overflow: hidden; }
.map::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 22px, var(--hair) 22px 23px), repeating-linear-gradient(90deg, transparent 0 22px, var(--hair) 22px 23px); }
.map b { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-wash); }

/* Included: one list, three columns, no cards. */
.included { padding: 60px 22px 140px; }
.included .wrap { max-width: 1080px; }
.included h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 3.6vw, 3rem); letter-spacing: -.02em; line-height: 1.08; max-width: 18em; }
.incl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 40px; margin-top: 36px; list-style: none; padding: 0; }
.incl li { padding: 12px 0; border-top: 1px solid var(--hair); font-size: 15.5px; color: var(--ink-2); }
.incl li b { color: var(--ink); font-weight: 600; display: block; }
@media (max-width: 860px) { .incl { grid-template-columns: 1fr; gap: 0; } }

/* Pricing on the home page: the calculator from product.css, in a wider panel. */
.price-s { padding: 60px 22px 120px; }
.price-s .wrap { max-width: 1080px; }
.price-s h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4.2vw, 3.6rem); letter-spacing: -.02em; line-height: 1.05; max-width: 16em; }
.price-s .bignum { font-family: var(--serif); font-weight: 500; letter-spacing: -.03em; }

/* Closing: the largest ask on the page. */
.close-s { padding: 60px 22px 160px; }
.close-s .panel { max-width: 1180px; margin: 0 auto; padding: clamp(40px, 8vw, 96px) clamp(22px, 6vw, 80px); text-align: center; background: var(--night); color: var(--night-ink); border-color: rgba(255, 255, 255, .06); position: relative; overflow: hidden; }
.close-s h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 5.4vw, 5rem); letter-spacing: -.025em; line-height: 1.02; max-width: 14em; margin: 0 auto; text-wrap: balance; }
.close-s .sub { color: var(--night-muted); text-align: center; margin: 18px auto 30px; }
.close-s .btn { background: var(--night-ink); color: var(--night); border-radius: 999px; padding: 16px 30px; font-size: 16px; }
.close-s .btn:hover { background: #fff; }
.close-s .ghost { color: var(--night-ink); border-color: rgba(255, 255, 255, .22); border-radius: 999px; padding: 16px 30px; font-size: 16px; }
.close-s .ghost:hover { background: rgba(255, 255, 255, .06); }
.close-s .cta { justify-content: center; }
.close-s .glow { position: absolute; width: 60%; height: 80%; left: 20%; top: -40%; border-radius: 50%; background: radial-gradient(circle, rgba(203, 175, 128, .28), transparent 65%); filter: blur(30px); pointer-events: none; }

/* Reveal helpers for GSAP. Without JS everything is visible, so the page never depends on it. */
.js .rv { opacity: 0; transform: translateY(24px); }
.js .stage .scene { opacity: 0; }
.js .stage .scene.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ambient i, .marquee .row, .typing i { animation: none !important; }
  .js .rv { opacity: 1; transform: none; }
  .lead.new { opacity: 1; transform: none; }
  .field { opacity: 1; transform: none; }
  .cal .ev, .split i, .route .ln::after { transform: none; }
  .manifesto p .w { opacity: 1; }
  .step-s { opacity: 1; }
}

/* ── Real screens (2026-09-11): every picture is the product, framed, never drawn ─────────── */
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; }
.shot-note { margin: 14px auto 0; max-width: 46em; font-size: 13px; color: var(--muted); text-align: center; }
.stage .scene { padding: 0; display: block; background: #f4f2ee; }
.stage .scene img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
@media (prefers-color-scheme: dark) { .stage .scene { background: #1c1b1f; } }

.film-s { padding: 40px 22px 120px; }
.film-s .wrap { max-width: 1080px; }
.film-s h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4.2vw, 3.6rem); letter-spacing: -.02em; line-height: 1.05; max-width: 16em; }
.film { margin-top: 28px; border-radius: 22px; overflow: hidden; background: #131317; border: 1px solid var(--edge); outline: 1px solid var(--hair); box-shadow: var(--shadow-l); aspect-ratio: 16 / 10; }
.film video { display: block; width: 100%; height: 100%; object-fit: contain; background: #131317; }

.cell .shotart { position: absolute; left: 0; right: 0; top: 0; bottom: 44%; overflow: hidden; pointer-events: none; }
.cell .shotart::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, var(--panel-solid)); }
.cell.dark .shotart::after { background: linear-gradient(to bottom, transparent 50%, var(--night)); }
.cell .shotart img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.cell:hover .shotart img { transform: scale(1.03); }
.cell.wide .shotart { bottom: 40%; }
@media (max-width: 860px) {
  .cell .shotart { bottom: auto; height: 190px; }
  .stage .scene img { object-position: left top; }
}

/* Live numbers from the platform: four facts in one row, two on a phone. */
.proof-s { padding: 20px 22px 110px; }
.proof-s .wrap { max-width: 1080px; }
.proof-s h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 3.6vw, 3rem); letter-spacing: -.02em; line-height: 1.08; max-width: 18em; }
.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 34px; border-top: 1px solid var(--line); }
.proof .stat { padding: 22px 22px 6px 0; display: grid; gap: 8px; align-content: start; }
.proof .stat + .stat { padding-left: 22px; border-left: 1px solid var(--hair); }
.proof .stat b { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 4.6vw, 3.6rem); letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.proof .stat span { font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.proof-s .fine { margin-top: 20px; }
@media (max-width: 860px) {
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .proof .stat:nth-child(n+3) { border-top: 1px solid var(--hair); }
}