:root {
  --bg: #050505; --ink: #f4f4f2; --mute: #8a8a86; --dim: #4a4a47; --line: rgba(255,255,255,.09);
  --amber: #f4f4f2; --amber-soft: rgba(255,255,255,.08); --light: #f2a44b;   /* text and UI are white now. Amber stays only in the city lights */
  --text: "Inter", system-ui, sans-serif; --small: "Inter", system-ui, sans-serif; --display: "Inter Tight", "Inter", system-ui, sans-serif; --wide: "Archivo", "Inter Tight", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { background: var(--bg); color: var(--ink); font-family: var(--text); -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }
a { color: inherit; }

.label { font-family: var(--small); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }
.big { font-weight: 500; font-size: clamp(32px, 4.6vw, 62px); letter-spacing: -.035em; line-height: 1.04; text-wrap: balance; }
.sub { color: var(--mute); font-size: 16px; line-height: 1.55; max-width: 470px; }
.line { font-size: clamp(18px, 2vw, 24px); letter-spacing: -.02em; }
.mock { position: absolute; left: 12px; bottom: 10px; font-family: var(--small); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.22); }
.ping { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgba(242,164,75,.6); animation: ping 2s infinite; margin-right: 10px; vertical-align: middle; }
@keyframes ping { 70% { box-shadow: 0 0 0 9px rgba(242,164,75,0); } 100% { box-shadow: 0 0 0 0 rgba(242,164,75,0); } }

.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #0a0a0a; text-decoration: none; border: 0; cursor: pointer;
  font: 500 14px var(--text); padding: 14px 24px; border-radius: 999px; transition: transform .3s, box-shadow .3s; }
.btn i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 6px rgba(242,164,75,.1), 0 10px 40px rgba(242,164,75,.18); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid rgba(255,255,255,.18); }

/* nav */
nav { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 22px 32px;
  background: linear-gradient(var(--bg) 20%, transparent); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand .mark-solid { width: 38px; height: 15px; }
.brand span { font-family: var(--small); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.pill { font-size: 13px; text-decoration: none; padding: 9px 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; transition: background .3s; }
.pill:hover { background: rgba(255,255,255,.06); }

section, header { position: relative; }
.sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }

/* 1 · opening → 2 · the story */
.intro { height: 1600vh; }
.intro .dots { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-copy { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 16px; }
.hero-copy .label { margin-bottom: 20px; }
.hero-copy h1 { font-weight: 500; font-size: clamp(40px, 6vw, 84px); letter-spacing: -.04em; line-height: 1.02; }
.hero-copy h1 span { color: #77736c; }
.hero-copy .sub { margin: 18px auto 0; font-size: 15px; }
.scene-copy .cap { position: absolute; left: 6vw; top: 50%; transform: translateY(-50%); max-width: 30vw; opacity: 0; pointer-events: none; }
.scene-copy .big { margin-top: 16px; }
.scene-copy .sub { margin-top: 18px; font-size: 16px; color: #9a958c; }
.scene-copy .cap { max-width: 32vw; }
.scene-copy .cap.pos-tl { top: 13vh; transform: none; }
.scene-copy .cap.pos-tr { top: 13vh; left: auto; right: 4vw; transform: none; max-width: 27vw; }
/* words arrive in steps: label, number, line, then the rest */
.scene-copy .cap > * { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.scene-copy .cap.on > * { opacity: 1; transform: none; }
.scene-copy .cap.on > :nth-child(2) { transition-delay: .08s; } .scene-copy .cap.on > :nth-child(3) { transition-delay: .16s; }
.scene-copy .cap.on > :nth-child(4) { transition-delay: .24s; } .scene-copy .cap.on > :nth-child(5) { transition-delay: .32s; }
.scene-copy .cap.on > :nth-child(n+6) { transition-delay: .4s; }
.scene-copy .waffle { margin-top: 22px; display: grid; grid-template-columns: repeat(20, 8px); gap: 6px; }
.scene-copy .waffle i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); transition: background .25s, box-shadow .25s, border-color .25s; }
.scene-copy .waffle i.on { background: #eef2fb; border-color: #eef2fb; box-shadow: 0 0 8px rgba(238,242,251,.7); }
.scene-copy .waffle-label { margin-top: 10px; font-family: var(--small); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #77736c; }
/* city captions: spread across the empty sky above the skyline, three columns */
.scene-copy .cap.pos-sky { left: 6vw; right: 6vw; top: 11vh; max-width: none; transform: none; display: grid; grid-template-columns: 1.15fr 1fr .95fr; column-gap: 4.5vw; align-items: end; }
.scene-copy .pos-sky .hud { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; margin-bottom: 4vh; font-family: var(--small); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: #6d6961; }
.scene-copy .pos-sky .hud i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.04) 50%, rgba(255,255,255,.18)); position: relative; }
.scene-copy .pos-sky .hud i::after { content: ""; position: absolute; left: 0; top: -1px; height: 3px; width: calc(var(--grow, 0) * 100%); background: linear-gradient(90deg, transparent, rgba(242,164,75,.7)); }
.scene-copy .pos-sky .col > :first-child { margin-top: 0; }
.scene-copy .pos-sky .col.a .stat { margin-top: 14px; }
.scene-copy .pos-sky .big { font-weight: 600; letter-spacing: -.04em; }
.scene-copy .pos-sky:not(.has-stat) .big { font-size: clamp(38px, 4.2vw, 64px); line-height: 1; }
.scene-copy .pos-sky.has-stat .big { font-size: clamp(24px, 2.5vw, 36px); }
.scene-copy .pos-sky .stat { font-weight: 600; }
.scene-copy .pos-sky .col.b .body { font-size: 17px; line-height: 1.45; color: #d6d2ca; }
.scene-copy .pos-sky .col.b .body { max-width: 360px; }
.scene-copy .pos-sky .col.c { padding-left: 2.2vw; border-left: 1px solid rgba(255,255,255,.09); }
.scene-copy .pos-sky .col.c .bars { margin-top: 0; }
.scene-copy .cap.on > .col.b { transition-delay: .18s; } .scene-copy .cap.on > .col.c { transition-delay: .34s; }
.scene-copy .legend .dim::before { width: 4px; height: 4px; margin: 0 11px 0 2px; background: #b98a52; opacity: .7; }
/* a pointer on one real light */
/* detection boxes around places (corner brackets), ring groups that link into one label, hover notes */
.dbox { position: absolute; transition: opacity .4s; }
.dbox::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(244,244,242,.7),rgba(244,244,242,.7)) left top / 14px 1px no-repeat, linear-gradient(rgba(244,244,242,.7),rgba(244,244,242,.7)) left top / 1px 14px no-repeat, linear-gradient(rgba(244,244,242,.7),rgba(244,244,242,.7)) right top / 14px 1px no-repeat, linear-gradient(rgba(244,244,242,.7),rgba(244,244,242,.7)) right top / 1px 14px no-repeat, linear-gradient(rgba(244,244,242,.7),rgba(244,244,242,.7)) left bottom / 14px 1px no-repeat, linear-gradient(rgba(244,244,242,.7),rgba(244,244,242,.7)) left bottom / 1px 14px no-repeat, linear-gradient(rgba(244,244,242,.7),rgba(244,244,242,.7)) right bottom / 14px 1px no-repeat, linear-gradient(rgba(244,244,242,.7),rgba(244,244,242,.7)) right bottom / 1px 14px no-repeat; }
.dbox::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(244,244,242,.06); }
.dbox b { position: absolute; left: 0; bottom: calc(100% + 6px); white-space: nowrap; font-weight: 400; font-family: var(--small); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(244,244,242,.8); }
.dbox { transform: scale(.94); opacity: 0; } .dbox.on { transform: none; transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .4s; }
.links { position: absolute; left: 0; top: 0; overflow: visible; }
.links line { stroke-width: .7; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .38; }
.links.on line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.3,.6,.2,1) var(--d); }
.links .ring { fill: rgba(0,0,0,0); stroke-width: 1; transform-box: fill-box; transform-origin: center; transform: scale(0); pointer-events: all; cursor: pointer; }
.links.on .ring { transform: none; transition: transform .5s cubic-bezier(.3,1.6,.5,1) var(--d), stroke .2s, fill .2s; }
.links.amber line, .links.amber .ring { stroke: rgb(242,164,75); } .links.white line, .links.white .ring { stroke: #eef2fb; }
.links .ring.hot { fill: rgba(242,164,75,.25); stroke-width: 2; } .links.white .ring.hot { fill: rgba(238,242,251,.25); }
.hub { position: absolute; transform: translate(-50%, -100%); padding: 12px 16px 12px; min-width: 150px; text-align: left; background: rgba(5,5,5,.86); border: 1px solid rgba(244,244,242,.18); border-radius: 4px; opacity: 0; transition: opacity .5s .5s; }
.hub.on { opacity: 1; }
.hub b { display: block; font-weight: 400; font-family: var(--small); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: #9a958c; }
.hub strong { display: block; margin-top: 6px; font-weight: 600; font-size: 30px; letter-spacing: -.04em; line-height: 1; }
.map-labels .hub span { position: static; display: block; transform: none; margin-top: 4px; font-family: inherit; font-size: 12px; letter-spacing: 0; text-transform: none; color: #8d897f; white-space: nowrap; }
.hub.amber strong { color: var(--amber); } .hub.white strong { color: #eef2fb; }
.hub.amber { border-color: rgba(242,164,75,.45); box-shadow: 0 0 30px rgba(242,164,75,.12); } .hub.white { border-color: rgba(238,242,251,.4); }
.map-labels .tip { position: absolute; z-index: 3; transform: translate(-50%, -100%); max-width: 260px; padding: 9px 12px; border-radius: 4px; background: #f4f4f2; color: #0a0a0a; font-size: 12px; line-height: 1.4; opacity: 0; transition: opacity .15s; pointer-events: none; visibility: visible !important; }
.map-labels .tip.on { opacity: 1 !important; }
.callout { pointer-events: all; cursor: pointer; }
.callout.hot::before { background: rgba(242,164,75,.3); border-color: var(--amber); }
/* slide 02: lines from every funded light into one point, no boxes */
.rays { position: absolute; left: 0; top: 0; overflow: visible; }
.rays line { stroke: rgb(242,164,75); stroke-width: .6; opacity: .32; stroke-dasharray: 1; stroke-dashoffset: 1; }
.rays.on line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.3,.6,.2,1) var(--d); }
.you { position: absolute; width: 0; height: 0; text-align: center; }
.you i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #fff3e0; box-shadow: 0 0 18px 6px rgba(242,164,75,.75), 0 0 60px 20px rgba(242,164,75,.25); transform: scale(0); }
.you.on i { transform: none; transition: transform .6s cubic-bezier(.3,1.6,.5,1) 1.2s; }
.you b, .you em { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap; opacity: 0; }
.you b { top: -44px; font-weight: 600; font-size: 20px; letter-spacing: -.02em; }
.you em { top: -20px; font-style: normal; font-family: var(--small); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: #a7a298; }
.you.on b, .you.on em { opacity: 1; transition: opacity .6s 1.5s; }
/* slide 02 words: centred over the sky. Slide 03: one big number in the middle */
.scene-copy .cap.pos-ct { left: 50%; top: 12vh; transform: translateX(-50%); max-width: 720px; text-align: center; }
.scene-copy .pos-ct .stat { margin-top: 14px; }
.scene-copy .pos-ct .big { font-weight: 600; font-size: clamp(24px, 2.6vw, 36px); }
.scene-copy .pos-ct .body { margin: 16px auto 0; max-width: 560px; font-size: 16px; color: #d6d2ca; }
.scene-copy .cap.pos-c { left: 50%; top: 13vh; transform: translateX(-50%); max-width: 820px; text-align: center; }
.scene-copy .pos-c.has-stat .big { font-weight: 600; font-size: clamp(36px, 4vw, 60px); margin-top: 12px; }
.scene-copy .pos-c .stat { margin-top: 10px; font-weight: 600; font-size: clamp(96px, 14vw, 210px); letter-spacing: -.06em; text-shadow: 0 0 60px rgba(242,164,75,.35); }
.scene-copy .pos-c .body { margin: 14px auto 0; max-width: 520px; font-size: 17px; color: #d6d2ca; }
.scene-copy .pos-c .note { display: inline-block; margin-top: 18px; text-align: left; }
/* sources, once, at the bottom */
.sources { padding: 40px 6vw 0; font-family: var(--small); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #5f5b55; }
.sources ol { margin-top: 10px; padding-left: 18px; display: grid; gap: 6px; }
.callout { position: absolute; width: 0; height: 0; }
.callout::before { content: ""; position: absolute; left: -11px; top: -11px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(244,244,242,.75); }
.callout::after { content: ""; position: absolute; left: -.5px; top: -64px; width: 1px; height: 53px; background: linear-gradient(rgba(244,244,242,.7), rgba(244,244,242,.25)); }
.callout b { position: absolute; left: 0; top: -92px; transform: translateX(-50%); white-space: nowrap; padding: 6px 10px; border: 1px solid rgba(244,244,242,.22); border-radius: 999px; background: rgba(5,5,5,.82); font-weight: 400; font-family: var(--small); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #f4f4f2; }
.scene-copy .bar.dim i::after { background: rgba(244,244,242,.35); box-shadow: none; }
.scene-copy .has-stat .big { font-size: clamp(22px, 2.3vw, 32px); margin-top: 8px; }
.scene-copy .stat { margin-top: 18px; font-weight: 500; font-size: clamp(64px, 8vw, 120px); letter-spacing: -.05em; line-height: .9; color: var(--amber); font-variant-numeric: tabular-nums; }
.scene-copy .body { margin-top: 18px; font-size: 15px; line-height: 1.55; color: #a7a298; max-width: 400px; }
.scene-copy .legend { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 18px; font-family: var(--small); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #8d897f; }
.scene-copy .legend span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 9px; vertical-align: 1px; }
.scene-copy .legend .amber::before { background: var(--amber); box-shadow: 0 0 10px rgba(242,164,75,.8); }
.scene-copy .legend .white::before { background: #eef2fb; box-shadow: 0 0 10px rgba(238,242,251,.8); }
.scene-copy .bars { margin-top: 24px; display: grid; gap: 14px; max-width: 400px; }
.scene-copy .bar { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 12px; color: #a7a298; }
.scene-copy .bar i { grid-column: 1 / -1; grid-row: 2; height: 1px; background: rgba(255,255,255,.12); position: relative; }
.scene-copy .bar i::after { content: ""; position: absolute; left: 0; top: -1px; height: 3px; width: calc(var(--w) * var(--grow, 0)); background: var(--amber); box-shadow: 0 0 12px rgba(242,164,75,.6); }
.scene-copy .bar.white i::after { background: #eef2fb; box-shadow: 0 0 12px rgba(238,242,251,.5); }
.scene-copy .bar em { font-style: normal; font-family: var(--small); font-size: 11px; color: #f4f4f2; }
.scene-copy .note { margin-top: 20px; font-size: 13px; color: #f4f4f2; padding-left: 12px; border-left: 1px solid var(--amber); }
.scene-copy .source { margin-top: 18px; font-family: var(--small); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #5f5b55; }
.map-labels { opacity: 1 !important; }
.map-labels [data-s] { opacity: 0; }
.ping-mark { position: absolute; width: 0; height: 0; }
.ping-mark::before, .ping-mark::after { content: ""; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(242,164,75,.8); animation: pingmark 2.4s ease-out infinite; }
.ping-mark::after { animation-delay: 1.2s; }
.ping-mark b { position: absolute; left: 30px; top: -9px; white-space: nowrap; font-weight: 400; font-family: var(--small); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
@keyframes pingmark { from { transform: scale(.3); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.map-labels { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.map-labels span { position: absolute; transform: translate(14px, -50%); font-family: var(--small); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(244,244,242,.62); white-space: nowrap; text-shadow: 0 0 12px #000, 0 0 4px #000; }
@media (max-width: 760px) {
  .scene-copy .cap, .scene-copy .cap.pos-tl, .scene-copy .cap.pos-tr, .scene-copy .cap.pos-sky, .scene-copy .cap.pos-ct, .scene-copy .cap.pos-c { left: 16px; right: 16px; top: 96px; transform: none; max-width: none; }
  .scene-copy .cap.pos-sky { display: block; } .scene-copy .pos-sky .hud { margin-bottom: 18px; } .scene-copy .pos-sky .col.c { padding-left: 0; border: 0; }
  .scene-copy .pos-sky .source, .scene-copy .pos-sky .waffle-label { display: none; }
  .scene-copy .pos-sky .col + .col { margin-top: 18px; }
  .hub { min-width: 0; padding: 9px 11px; } .hub strong { font-size: 22px; } .map-labels .hub span { display: none; }
  .scene-copy .pos-sky .col.b .body { font-size: 15px; }
}
/* 'backwards' holds each line hidden through its own delay, even while the scroll script writes opacity:1 inline;
   once it has risen, the scroll script takes over again so the lines can still fade out on scroll */
.rise { animation: none; }   /* 11 Nov: label, line and buttons are simply there from the start; only the name floats in */
.r1 { animation-delay: 1.5s; } .r2 { animation-delay: 1.75s; } .r3 { animation-delay: 2s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* 2 · door (code placeholder; the real visual comes later) */
.door-scene { height: 280vh; }
.door-scene .sticky { display: grid; place-items: center; perspective: 1600px; }
.door-line { position: absolute; top: 14vh; width: 100%; text-align: center; font-size: clamp(24px, 3.4vw, 44px); letter-spacing: -.03em;
  opacity: calc(1 - var(--open, 0) * 2.2); }
.stage { position: relative; transform: scale(calc(1 + var(--zoom, 0) * 5)); transform-origin: 50% 52%; }
.doorway { position: relative; width: 31vh; height: 64vh; margin-top: 8vh; border: 10px solid #111; border-bottom: 0; border-radius: 2px;
  box-shadow: 0 0 0 1px #1c1c1c, inset 0 0 0 1px #000; background: #000; transform-style: preserve-3d; }
.room { position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 100%, rgba(242,164,75,.95), rgba(242,164,75,.35) 45%, rgba(40,22,6,1) 80%); }
.room .mock { color: rgba(0,0,0,.45); }
.leaf { position: absolute; inset: 0; transform-origin: left center; transform: rotateY(calc(var(--open, 0) * -108deg));
  background: repeating-linear-gradient(90deg, #121212 0 13px, #0c0c0c 13px 15px), #0e0e0e;
  box-shadow: inset 0 0 0 1px #1d1d1d, inset 0 -40px 60px rgba(0,0,0,.6); backface-visibility: hidden; }
.handle { position: absolute; right: 12%; top: 50%; width: 3px; height: 15%; border-radius: 3px; background: linear-gradient(#b9b6ae, #6d6a64);
  transform: translateY(-50%) rotate(calc(var(--turn, 0) * -30deg)); transform-origin: 50% 20%; }
/* light leaking under and around the closed door */
.doorway::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: 0; height: 2px; background: var(--amber);
  box-shadow: 0 0 18px 4px rgba(242,164,75,.55), 0 0 60px 10px rgba(242,164,75,.25); opacity: calc(1 - var(--open, 0)); }
.spill { position: absolute; left: 50%; top: 100%; width: 90vh; height: 30vh; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 60% at 50% 0%, rgba(242,164,75,calc(.12 + var(--open, 0) * .4)), transparent 70%); }

/* 2b · story */
.story { padding: 10vh 8vw 4vh; display: grid; gap: 16vh; }
.chapter { display: grid; grid-template-columns: 1fr 1.25fr; grid-template-rows: auto 1fr; column-gap: 6vw; align-items: start;
  opacity: .25; transition: opacity .8s; }
.chapter.on { opacity: 1; }
.chapter .num { font-family: var(--small); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--amber); grid-column: 1; }
.chapter h2 { grid-column: 1; font-weight: 500; font-size: clamp(28px, 3.6vw, 48px); letter-spacing: -.03em; line-height: 1.05; margin-top: 16px; }
.frame { grid-column: 2; grid-row: 1 / 3; position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: 10px;
  background: radial-gradient(80% 80% at 50% 110%, rgba(242,164,75,.10), transparent 60%), #0a0a0a; display: grid; place-items: center; overflow: hidden; }
.frame svg { width: 70%; height: 70%; }

/* teardown: growth isn't one thing */
.pieces { height: 340vh; }
.pieces .sticky { display: grid; place-items: center; text-align: center; padding: 0 16px; }
.pl { position: absolute; top: 26vh; left: 0; right: 0; margin: auto; max-width: 900px; padding: 0 16px; font-weight: 500;
  font-size: clamp(28px, 4vw, 54px); letter-spacing: -.035em; line-height: 1.05; opacity: 0; transition: opacity .7s, transform .7s; transform: translateY(10px); }
.pl.on { opacity: 1; transform: none; }
.pl4 { top: auto; bottom: 20vh; }
.chips { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 10vh; }
.chips span { font-family: var(--small); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; padding: 14px 20px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--mute); transition: all .8s cubic-bezier(.2,.8,.2,1); }
.pieces[data-s="1"] .chips span { transform: translateY(calc((var(--i) - 2) * 18px)) rotate(calc((var(--i) - 2) * 6deg)); }
.pieces[data-s="2"] .chips span:not(.key), .pieces[data-s="3"] .chips span:not(.key), .pieces[data-s="4"] .chips span:not(.key) { opacity: .12; }
.pieces[data-s="3"] .chips .key, .pieces[data-s="4"] .chips .key { color: #111; background: var(--amber); border-color: var(--amber);
  box-shadow: 0 0 60px rgba(242,164,75,.45); transform: scale(1.18); }

/* 3 · signals */
.signals { padding: 18vh 8vw; max-width: 1240px; margin: 0 auto; }
.signals ul { list-style: none; margin: 8vh 0; border-top: 1px solid var(--line); }
.signals li { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: baseline;
  opacity: 0; transform: translateX(-14px); transition: opacity .7s, transform .7s; }
.signals li.on { opacity: 1; transform: none; }
.signals li b { font-family: var(--small); font-weight: 400; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.signals li b::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); margin-right: 14px; vertical-align: middle; box-shadow: 0 0 12px var(--amber); }
.signals li span { color: var(--mute); font-size: 17px; }

/* 5 · engine */
.engine { height: 460vh; }
.engine .sticky { display: grid; grid-template-columns: .9fr 1.2fr; align-items: center; gap: 6vw; padding: 0 8vw; }
.engine .big { margin: 14px 0 34px; }
.steps { list-style: none; display: grid; gap: 4px; }
.steps li { padding: 12px 0 12px 18px; border-left: 1px solid var(--line); color: var(--dim); font-size: 16px; transition: color .4s, border-color .4s; }
.steps li b { display: block; font-family: var(--small); font-weight: 400; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 4px; }
.steps li.on { color: var(--ink); border-color: var(--amber); }
.steps li.on b { color: var(--amber); }
.engine .line { margin-top: 30px; }
.mac { border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: #0c0c0c; box-shadow: 0 40px 120px rgba(0,0,0,.7), 0 0 0 1px #000; overflow: hidden; }
.mac .bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.mac .bar i { width: 10px; height: 10px; border-radius: 50%; background: #2a2a2a; }
.mac .bar span { margin-left: 12px; font-family: var(--small); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.screen { position: relative; height: 380px; }
.pane { position: absolute; inset: 0; padding: 34px; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; }
.pane.on { opacity: 1; transform: none; }
.pane .tag { font-family: var(--small); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); margin-bottom: 22px; }
.pane h3 { font-weight: 500; font-size: 28px; letter-spacing: -.02em; }
.muted { color: var(--mute); font-size: 14px; margin-top: 6px; }
.rows { display: grid; grid-template-columns: auto 1fr; gap: 14px 28px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; }
.rows span { color: var(--dim); font-family: var(--small); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding-top: 2px; }
.rows b { font-weight: 400; }
.person { display: flex; gap: 18px; align-items: center; }
.person > i { width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #2b2b2b 30%, #1a1a1a 31%); border: 1px solid var(--line); }
.mail { border: 1px solid var(--line); border-radius: 10px; padding: 20px; font-size: 15px; line-height: 1.6; display: grid; gap: 12px; }
.bubble { display: inline-block; background: #1a1a1a; border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; padding: 16px 20px; font-size: 17px; }
.handled { margin-top: 26px; }
.cal { border-left: 3px solid var(--amber); background: var(--amber-soft); border-radius: 6px; padding: 20px 22px; display: grid; gap: 6px; max-width: 360px; }
.cal span { font-family: var(--small); font-size: 11px; letter-spacing: .2em; color: var(--amber); }
.cal b { font-weight: 500; font-size: 22px; }
.cal em { font-style: normal; color: var(--mute); font-size: 13px; }

/* 6 · territories */
.territories { padding: 18vh 8vw 12vh; text-align: center; }
.territories .status { margin-bottom: 22px; }
.territories .sub { margin: 16px auto 0; }
.map { position: relative; width: min(820px, 100%); aspect-ratio: 1.35; margin: 8vh auto 0; }
.map canvas { width: 100%; height: 100%; }
.pins { position: absolute; inset: 0; }
.pin { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; cursor: default;
  font-family: var(--small); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.pin em { font-style: normal; color: var(--amber); font-size: 9px; opacity: 0; transition: opacity .3s; }
.pin:hover em { opacity: 1; }

/* 7 · pricing */
.pricing { padding: 11vh 8vw 10vh; text-align: center; position: relative; z-index: 2; margin-top: -100vh; min-height: 100vh; visibility: hidden; }   /* sits on top of the end of the intro */
.toggle { display: inline-flex; margin-top: 34px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; }
.toggle button { background: none; border: 0; color: var(--mute); font: 14px var(--text); padding: 10px 18px; border-radius: 999px; cursor: pointer; }
.toggle button em { font-style: normal; color: var(--amber); font-size: 12px; margin-left: 6px; }
.toggle button.on { background: #1a1a1a; color: var(--ink); }
.founding { color: var(--mute); margin-top: 22px; font-size: 14px; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1120px; margin: 7vh auto 0; text-align: left; }
.tier { border: 1px solid var(--line); border-radius: 16px; padding: 30px; display: flex; flex-direction: column; background: rgba(8,8,8,.72); }
.tier.rec { border-color: rgba(242,164,75,.45); box-shadow: 0 0 80px rgba(242,164,75,.08); }
.tier .label em { font-style: normal; color: var(--amber); margin-left: 8px; }
.price { margin: 22px 0 24px; }
.price b { font-weight: 500; font-size: 46px; letter-spacing: -.04em; }
.price span { color: var(--mute); margin-left: 4px; }
.tier ul { list-style: none; display: grid; gap: 11px; font-size: 14.5px; color: #cfcfcb; flex: 1; }
.tier li::before { content: ""; display: inline-block; width: 14px; margin-right: 10px; text-align: center; font-size: 12px; }
.tier li.y::before { content: "✓"; color: #f4f4f2; }
.tier li.n { color: #5f5b55; text-decoration: line-through; text-decoration-color: rgba(255,255,255,.18); }
.tier li.n::before { content: "✕"; color: #4a4741; }
.tier.rec li.y::before { color: var(--amber); }
.setup { color: var(--dim); font-size: 13px; margin: 26px 0 16px; font-family: var(--small); letter-spacing: .1em; text-transform: uppercase; }
.tier .btn { justify-content: center; }
.guarantee { margin-top: 6vh; font-size: clamp(18px, 2vw, 24px); letter-spacing: -.02em; }

/* 8 · close */
.close { padding: 20vh 8vw 14vh; text-align: center; }
.big-mark { width: 120px; height: 46px; margin-bottom: 40px; }
.close .sub { margin: 16px auto 0; }
.access-form { max-width: 620px; margin: 7vh auto 0; text-align: left; }
.access-form .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.access-form input:not([type=checkbox]) { background: #0b0b0b; border: 1px solid var(--line); border-radius: 10px; padding: 15px 16px; color: var(--ink); font: 15px var(--text); outline: none; }
.access-form input:focus { border-color: rgba(242,164,75,.5); }
.access-form .wide { grid-column: 1 / 3; }
.consent { display: flex; gap: 10px; align-items: flex-start; color: var(--mute); font-size: 13px; margin: 18px 0 22px; line-height: 1.5; }
.consent input { accent-color: var(--amber); margin-top: 3px; }
.sent { display: none; color: var(--amber); margin-top: 16px; }
.access-form.done .sent { display: block; }

footer { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 30px 32px; border-top: 1px solid var(--line);
  font-family: var(--small); font-size: 11px; letter-spacing: .14em; color: var(--dim); }
footer a { text-decoration: none; }

/* phones */
@media (max-width: 760px) {
  nav { padding: 18px 16px; } .brand span { display: none; }
  .hero .label { font-size: 10px; letter-spacing: .15em; }
  .chapter { grid-template-columns: 1fr; } .frame { grid-column: 1; grid-row: auto; margin-top: 24px; }
  .story, .signals, .territories, .pricing, .close { padding-left: 16px; padding-right: 16px; }
  .signals li { grid-template-columns: 1fr; gap: 8px; }
  .engine .sticky { grid-template-columns: 1fr; padding: 10vh 16px 0; align-content: start; gap: 22px; }
  .engine .big { margin: 8px 0 14px; } .steps li { padding: 6px 0 6px 14px; font-size: 14px; } .steps li:not(.on) { display: none; }
  .engine .line { display: none; } .screen { height: 330px; } .pane { padding: 22px; } .pane h3 { font-size: 22px; }
  .tiers { grid-template-columns: 1fr; }
  .access-form .grid { grid-template-columns: 1fr; } .access-form .wide { grid-column: auto; }
  .doorway { width: 34vw; height: 60vw; max-height: 60vh; }
}
@media (prefers-reduced-motion: reduce) { .rise { animation: none; opacity: 1; transform: none; } html { scroll-behavior: auto; } }
/* door hand-off: after moving through the doorway, fade to black into the story */
.door-scene .sticky::after { content: ""; position: absolute; inset: 0; background: var(--bg); pointer-events: none;
  opacity: clamp(0, calc((var(--zoom, 0) - .55) * 2.4), 1); }

/* pricing: the dots draw the cards, the cards fade in exactly where the dots are, then the dots melt away */
.pricing > * { opacity: 0; transition: opacity .8s ease; }
.pricing.in > * { opacity: 1; }
.pricing.in > :nth-child(2) { transition-delay: .08s; } .pricing.in > :nth-child(3) { transition-delay: .14s; }
.pricing .tiers { opacity: 1; }
.pricing .tier { opacity: 0; border-color: transparent; transition: opacity .9s ease, border-color 1.2s ease .9s, box-shadow 1.2s ease .9s; box-shadow: none; }
.pricing.in .tier { opacity: 1; border-color: var(--line); }
.pricing.in .tier.rec { border-color: rgba(242,164,75,.5); box-shadow: 0 0 80px rgba(242,164,75,.08); }
.pricing.in .tier:nth-child(2) { transition-delay: .1s, 1s, 1s; } .pricing.in .tier:nth-child(3) { transition-delay: .2s, 1.1s, 1.1s; }
.price s { display: block; color: #6d6961; font-size: 18px; text-decoration-color: var(--amber); margin-bottom: 2px; }
.pricing[data-plan="m"] .price s, .pricing[data-plan="m"] .setup s, .pricing[data-plan="m"] .save { visibility: hidden; }
.pricing[data-plan="m"] .tier:last-child .save { visibility: visible; }
.save { margin: -14px 0 22px; font-size: 13px; color: var(--amber); }
.tier:last-child .save { color: var(--mute); }
.setup s { margin-right: 10px; color: #4a4741; }
/* slide 02: signal pulses from every funded light (they are looking for an IT partner) */
.pulses i { position: absolute; width: 0; height: 0; }
.pulses i::before { content: ""; position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,190,110,.85); box-shadow: 0 0 6px rgba(242,164,75,.35); opacity: 0; animation: pulse 7s ease-out infinite var(--d); }
@keyframes pulse { 0% { transform: scale(.1); opacity: 0; } 2% { opacity: 1; } 22% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }
/* the exclusivity strip under slide 02 */
.scene-copy .seat { margin: 26px auto 0; display: inline-flex; align-items: center; gap: 22px; padding: 16px 24px; text-align: left;
  background: linear-gradient(90deg, rgba(242,164,75,.14), rgba(242,164,75,.03)); border-left: 2px solid var(--amber); }
.scene-copy .seat-n { display: flex; align-items: center; gap: 12px; }
.scene-copy .seat-n b { font-weight: 600; font-size: 54px; line-height: .9; letter-spacing: -.05em; color: var(--amber); }
.scene-copy .seat-n span { font-family: var(--small); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #f4f4f2; line-height: 1.5; }
.scene-copy .seat-t p { font-size: 14px; color: #d6d2ca; max-width: 300px; }
.scene-copy .seat-k { margin-top: 8px; font-family: var(--small); font-size: 9px !important; letter-spacing: .2em; text-transform: uppercase; color: var(--amber) !important; }
.scene-copy .seat-k i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); margin-right: 8px; box-shadow: 0 0 10px var(--amber); animation: pingmark 2s ease-out infinite; vertical-align: 0; }
/* the one new client: white like the others */
.ping-mark::before, .ping-mark::after { border-color: rgba(238,242,251,.85); }
.ping-mark b { color: #eef2fb; }
/* shooting stars */
.shooting { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.shooting i { position: absolute; width: 140px; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9)); transform: rotate(var(--a)); transform-origin: right center; opacity: 0; animation: shoot 1.3s ease-out forwards; }
@keyframes shoot { 0% { opacity: 0; translate: 0 0; } 15% { opacity: 1; } 100% { opacity: 0; translate: 260px 110px; } }
@media (max-width: 760px) {
  .scene-copy .seat { gap: 14px; padding: 12px 14px; } .scene-copy .seat-n b { font-size: 40px; } .scene-copy .seat-t p { font-size: 13px; }
}

/* ---------- questions ---------- */
.faq { padding: 16vh 8vw 4vh; max-width: 900px; margin: 0 auto; }
.faq .big { margin-top: 14px; }
.qa { margin-top: 6vh; border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; font-size: clamp(17px, 1.6vw, 20px); letter-spacing: -.01em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { position: relative; width: 14px; height: 14px; flex: none; }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 14px; height: 1px; background: var(--mute); transition: transform .3s ease, background .3s; }
.qa summary i::after { transform: rotate(90deg); }
.qa details[open] summary i::after { transform: rotate(0); } .qa details[open] summary i::before { background: var(--amber); }
.qa summary:hover { color: #fff; } .qa summary:hover i::before, .qa summary:hover i::after { background: var(--ink); }
.qa details p { padding: 0 40px 26px 0; color: #b9b5ad; font-size: 15px; line-height: 1.6; max-width: 640px; }

@media (max-width: 760px) {
  .demo { grid-template-columns: 1fr; align-content: start; gap: 18px; padding: 86px 16px 24px; }
  .dsteps li { display: none; } .demo[data-step="0"] .dsteps li:nth-child(1), .demo[data-step="1"] .dsteps li:nth-child(2), .demo[data-step="2"] .dsteps li:nth-child(3) { display: grid; }
  .demo-copy .label { margin-bottom: 14px; } .demo-bar { margin-top: 16px; }
  .mac { height: 54vh; font-size: 12px; }
  .mac-body { grid-template-columns: 1fr; } .mac aside { display: none; }
  .mac-bar span { margin-right: 0; } .view { padding: 14px; }
  .row { grid-template-columns: 10px 1fr auto; } .row strong { display: none; }
  .kpis b { font-size: 18px; } .dcal .grid { height: 120px; } .li { flex-wrap: wrap; }
  .faq { padding: 12vh 16px 2vh; } .qa details p { padding-right: 0; }
}

/* =================== type v10: white, heavy, tiny =================== */
/* tiny spaced small text (eyebrows, labels, readouts) */
.label, .brand span, .scene-copy .pos-sky .hud, .dbox b, .callout b, .seat-k, .mac-bar em, .sources { font-family: var(--small); font-weight: 500; letter-spacing: .32em; }
.label { font-size: 10px; color: rgba(244,244,242,.55); }
/* headlines: heavy and tight */
.big, .scene-copy .big, .scene-copy .pos-sky .big, .scene-copy .pos-ct .big, .scene-copy .pos-c.has-stat .big, .faq .big, .pricing .big, .steps h3, .dsteps h3 {
  font-family: var(--display); font-weight: 800; letter-spacing: -.045em; line-height: .95; color: #f4f4f2; }
.scene-copy .stat { font-family: var(--display); font-weight: 800; letter-spacing: -.06em; color: #f4f4f2; text-shadow: 0 0 40px rgba(255,255,255,.18); }
.scene-copy .pos-sky .stat { font-size: clamp(88px, 10.5vw, 160px); line-height: .85; }
.scene-copy .pos-sky.has-stat .big { font-size: clamp(30px, 3.2vw, 50px); max-width: 520px; margin-top: 14px; }
.scene-copy .pos-ct .stat { font-size: clamp(80px, 9vw, 140px); }
.scene-copy .pos-ct .big { font-size: clamp(26px, 2.6vw, 40px); }
.scene-copy .pos-c .stat { font-size: clamp(110px, 14vw, 220px); }
.scene-copy .pos-c.has-stat .big { font-size: clamp(36px, 4.2vw, 64px); }
.scene-copy .cap.pos-l .big { font-size: clamp(44px, 5vw, 80px); }
/* body text: small and quiet, like a caption under a product */
.scene-copy .body, .scene-copy .pos-sky .col.b .body { font-size: 13px; line-height: 1.55; color: rgba(244,244,242,.6); max-width: 330px; }
.scene-copy .note { font-size: 12px; color: rgba(244,244,242,.75); border-left-color: rgba(244,244,242,.6); }
/* exclusivity strip: white */
.scene-copy .seat { background: linear-gradient(90deg, rgba(255,255,255,.09), rgba(255,255,255,.015)); border-left: 2px solid #f4f4f2; }
.scene-copy .seat-n b { font-family: var(--display); font-weight: 800; color: #f4f4f2; }
.scene-copy .seat-k { color: rgba(244,244,242,.75) !important; }
.scene-copy .seat-k i { background: #f4f4f2; box-shadow: 0 0 10px rgba(255,255,255,.9); }
.scene-copy .pos-sky .hud i::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.7)); }

/* the name: wide and heavy, arrives like a film title, then you fly through it */
.hero-copy .wordmark { font-family: var(--wide); font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 5.5vw, 108px); letter-spacing: .01em; line-height: 1;
  color: #f4f4f2; white-space: nowrap; transform-origin: 50% 55%; will-change: transform; text-shadow: 0 0 34px rgba(255,255,255,.22), 0 0 4px rgba(255,255,255,.35); margin: 6px 0 4px; }
.hero-copy .wordmark .w { display: inline-block; color: #f4f4f2; }
.hero-copy .wordmark i { font-style: normal; display: inline-block; opacity: 0; filter: blur(16px); transform: translateY(.06em) scale(1.25); animation: letterIn 1.6s cubic-bezier(.2,.7,.2,1) forwards var(--d); }
@keyframes letterIn { 60% { opacity: 1; } to { opacity: 1; filter: blur(0); transform: none; } }
.hero-copy .sub { font-size: 13px; color: rgba(244,244,242,.6); max-width: 380px; margin-top: 26px; line-height: 1.55; }
.hero-copy .label { margin-bottom: 26px; }
.r1 { animation-delay: 2s; } .r3 { animation-delay: 2.5s; }
@media (prefers-reduced-motion: reduce) { .hero-copy .wordmark i { animation: none; opacity: 1; filter: none; transform: none; } }

/* pricing: white */
.price b, .kpis b { font-family: var(--display); font-weight: 800; letter-spacing: -.045em; }
.tier.rec, .pricing.in .tier.rec { border-color: rgba(244,244,242,.55); box-shadow: 0 0 80px rgba(255,255,255,.05); }
.save { color: rgba(244,244,242,.7); }
.price s { text-decoration-color: rgba(244,244,242,.7); }
.toggle button em { color: rgba(244,244,242,.6); }
.ping-mark::before, .ping-mark::after { border-color: rgba(238,242,251,.85); }

@media (max-width: 760px) {
  .hero-copy .wordmark { white-space: normal; font-size: 15.5vw; line-height: .98; }
  .hero-copy .wordmark .w { display: block; }
  .hero-copy .label { font-size: 9px; letter-spacing: .2em; white-space: nowrap; }
  .scene-copy .pos-sky .stat { font-size: 84px; } .scene-copy .pos-c .stat { font-size: 96px; } .scene-copy .pos-ct .stat { font-size: 72px; }
}

/* =================== how it works: a Mac that acts out the engine (light mode) =================== */
.demo { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(250px, 27%) 1fr; gap: 4vw; align-items: center; padding: 90px 5vw 40px; visibility: hidden; opacity: 0; pointer-events: none; }
.demo-copy .label { margin-bottom: 26px; }
.dsteps { list-style: none; display: grid; gap: 20px; }
.dsteps li { display: grid; grid-template-columns: 30px 1fr; gap: 8px; opacity: .25; transition: opacity .5s ease; }
.dsteps b { font-family: var(--small); font-weight: 500; font-size: 10px; letter-spacing: .2em; color: rgba(244,244,242,.5); padding-top: 8px; }
.dsteps h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.04em; font-size: clamp(22px, 2vw, 30px); line-height: 1; }
.dsteps p { margin-top: 7px; font-size: 13px; line-height: 1.5; color: rgba(244,244,242,.6); max-width: 300px; }
.demo[data-step="0"] .dsteps li:nth-child(1), .demo[data-step="1"] .dsteps li:nth-child(2), .demo[data-step="2"] .dsteps li:nth-child(3), .demo[data-step="3"] .dsteps li:nth-child(4) { opacity: 1; }
.demo-bar { margin-top: 28px; height: 1px; background: rgba(255,255,255,.12); max-width: 300px; }
.demo-bar i { display: block; height: 1px; width: 25%; background: #f4f4f2; box-shadow: 0 0 10px rgba(255,255,255,.7); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.demo[data-step="1"] .demo-bar i { width: 50%; } .demo[data-step="2"] .demo-bar i { width: 75%; } .demo[data-step="3"] .demo-bar i { width: 100%; }

.demo .mac { --t: #17171a; --m: #6e6e73; --l: #e8e7e3; --g: #2f9e55; position: relative; height: min(68vh, 620px); width: 100%; max-width: 1020px; justify-self: center; border-radius: 14px; border: 0; overflow: hidden;
  background: #fbfbfa; color: var(--t); display: flex; flex-direction: column; font-family: var(--text); font-size: 13px;
  box-shadow: 0 50px 140px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.1), 0 0 120px rgba(255,255,255,.06); }
.mac-bar { height: 38px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: #f1f0ed; border-bottom: 1px solid var(--l); }
.mac-bar i { width: 11px; height: 11px; border-radius: 50%; } .mac-bar i:first-child { background: #ee6a5f; } .mac-bar i:nth-child(2) { background: #f5bd4f; } .mac-bar i:nth-child(3) { background: #61c454; }
.mac-bar span { flex: 1; text-align: center; font-size: 12px; font-weight: 500; color: var(--m); margin-right: 40px; }
.mac-bar em { font-style: normal; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--m); border: 1px solid var(--l); padding: 3px 7px; border-radius: 6px; }
.mac-body { flex: 1; display: grid; grid-template-columns: 178px 1fr; min-height: 0; }
.mac aside { background: #f6f5f2; border-right: 1px solid var(--l); padding: 18px 12px; display: flex; flex-direction: column; gap: 3px; }
.mac .who { padding: 0 8px 16px; display: flex; flex-direction: column; } .mac .who b { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; font-size: 15px; } .mac .who span { color: var(--m); font-size: 11px; }
.mac aside a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; color: #45454a; transition: background .4s, color .4s, box-shadow .4s; }
.mac aside a i { width: 6px; height: 6px; border-radius: 2px; background: #c9c7c1; transition: background .4s; }
.mac aside a em { margin-left: auto; font-style: normal; font-size: 11px; background: var(--t); color: #fff; padding: 1px 7px; border-radius: 99px; }
.demo[data-step="0"] .n0, .demo[data-step="1"] .n1, .demo[data-step="2"] .n2, .demo[data-step="3"] .n3 { background: #fff; color: var(--t); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.demo[data-step="0"] .n0 i, .demo[data-step="1"] .n1 i, .demo[data-step="2"] .n2 i, .demo[data-step="3"] .n3 i { background: var(--t); }
.mac .area { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--l); font-size: 12px; font-weight: 500; line-height: 1.4; }
.mac .area span { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--g); margin-right: 7px; box-shadow: 0 0 0 3px rgba(47,158,85,.15); }
.mac .area small { color: var(--m); font-weight: 400; margin-left: 14px; }
.views { position: relative; min-width: 0; }
.view { position: absolute; inset: 0; padding: 20px 24px; opacity: 0; transform: translateY(12px) scale(.99); transition: opacity .5s ease, transform .7s cubic-bezier(.2,.7,.2,1); overflow: hidden; display: flex; flex-direction: column; gap: 14px; }
.demo[data-step="0"] .v0, .demo[data-step="1"] .v1, .demo[data-step="2"] .v2, .demo[data-step="3"] .v3 { opacity: 1; transform: none; }
.view header { display: flex; align-items: center; gap: 10px; }
.view h4 { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -.03em; margin-right: auto; }
.view .live { font-size: 11px; color: var(--m); display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--l); background: #fff; padding: 4px 10px; border-radius: 99px; }
.view .live i { width: 6px; height: 6px; border-radius: 50%; background: var(--g); animation: macping 1.8s infinite; }
@keyframes macping { 0% { box-shadow: 0 0 0 0 rgba(47,158,85,.5); } 70%, 100% { box-shadow: 0 0 0 6px rgba(47,158,85,0); } }
.m-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; flex: none; }
.m-kpis p { position: relative; background: #fff; border: 1px solid var(--l); border-radius: 10px; padding: 11px 13px 13px; display: flex; flex-direction: column; overflow: hidden; }
.m-kpis span { font-size: 11px; color: var(--m); } .m-kpis b { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -.04em; line-height: 1.15; }
.m-kpis svg { position: absolute; right: 12px; bottom: 12px; width: 44%; height: 26px; } .m-kpis polyline { fill: none; stroke: var(--t); stroke-width: 1.6; stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset 1.4s ease .3s; }
.m-kpis i { position: absolute; left: 13px; right: 13px; bottom: 8px; height: 3px; border-radius: 3px; background: #efeeea; }
.m-kpis i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 3px; background: var(--t); transform: scaleX(0); transform-origin: 0 0; transition: transform 1.1s cubic-bezier(.2,.7,.2,1) .35s; }
.view .m-kpis p:has(i) { padding-bottom: 18px; }
.demo[data-step="0"] .v0 polyline { stroke-dashoffset: 0; }
.demo[data-step="0"] .v0 .m-kpis i::after, .demo[data-step="1"] .v1 .m-kpis i::after, .demo[data-step="2"] .v2 .m-kpis i::after { transform: none; }
.m-split { flex: 1; min-height: 0; display: grid; grid-template-columns: .85fr 1.15fr; gap: 12px; }
.m-map { position: relative; border: 1px solid var(--l); border-radius: 10px; background: #fff radial-gradient(#e3e2de 1px, transparent 1.2px) 0 0 / 12px 12px; overflow: hidden; }
.m-map svg { display: none; } .m-map path { fill: rgba(23,23,26,.05); stroke: rgba(23,23,26,.25); stroke-width: 1; vector-effect: non-scaling-stroke; }
.m-map i { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--t); opacity: .55; }
.m-map i.hot { opacity: 1; animation: mapping 1.6s infinite; } @keyframes mapping { 0% { box-shadow: 0 0 0 0 rgba(23,23,26,.4); } 80%, 100% { box-shadow: 0 0 0 14px rgba(23,23,26,0); } }
.m-map b { position: absolute; transform: translate(12px, -50%); font-size: 10px; font-weight: 600; background: var(--t); color: #fff; padding: 2px 7px; border-radius: 5px; }
.m-feed, .m-inbox { border: 1px solid var(--l); border-radius: 10px; background: #fff; overflow: hidden; }
.mac .row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--l); opacity: 0; transform: translateX(14px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.mac .row:first-child { border-top: 0; }
.demo[data-step="0"] .v0 .row, .demo[data-step="2"] .v2 .row { opacity: 1; transform: none; }
.mac .row:nth-child(2) { transition-delay: .1s; } .mac .row:nth-child(3) { transition-delay: .2s; } .mac .row:nth-child(4) { transition-delay: .3s; } .mac .row:nth-child(5) { transition-delay: .4s; }
.mac .row b { font-weight: 500; display: block; font-size: 13px; } .mac .row small { color: var(--m); font-size: 11.5px; }
.mac .row .dot { width: 7px; height: 7px; border-radius: 50%; background: #d5d3ce; }
.mac .row.hot { background: #f5f5f2; } .mac .row.hot .dot { background: var(--t); }
.mac .tag { font-style: normal; font-size: 10.5px; padding: 3px 9px; border-radius: 6px; background: #f0efec; color: #3a3a3d; white-space: nowrap; }
.mac .tag.g { background: #e5f4ea; color: #1f7a3f; }
.m-inbox .row { grid-template-columns: 96px 1fr auto; } .m-inbox .row .tag { justify-self: start; }
.m-inbox .row strong { font-weight: 500; font-size: 11.5px; color: var(--t); white-space: nowrap; } .m-inbox .row.hot strong { color: #1f7a3f; }
.m-flow { display: flex; align-items: center; gap: 0; flex: none; }
.m-flow .nd { flex: 1; background: #fff; border: 1px solid var(--l); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; opacity: .4; transition: opacity .5s ease, border-color .5s; }
.m-flow > i { flex: 0 0 34px; height: 1px; background: repeating-linear-gradient(90deg, #c9c7c1 0 4px, transparent 4px 8px); }
.m-flow small { font-size: 10.5px; color: var(--m); } .m-flow b { font-weight: 600; } .m-flow span { font-size: 11px; color: var(--m); } .m-flow .done span { color: #1f7a3f; }
.demo[data-step="1"] .m-flow .nd { opacity: 1; } .demo[data-step="1"] .m-flow .nd:nth-of-type(2) { transition-delay: .25s; } .demo[data-step="1"] .m-flow .nd:nth-of-type(3) { transition-delay: .5s; }
.m-bars { flex: 1; min-height: 0; border: 1px solid var(--l); border-radius: 10px; background: #fff; padding: 12px 14px; display: flex; flex-direction: column; }
.m-bars p { font-size: 11px; color: var(--m); } .m-bars div { flex: 1; display: flex; align-items: flex-end; gap: 6px; margin-top: 10px; }
.m-bars i { flex: 1; height: var(--h); border-radius: 4px 4px 1px 1px; background: #e2e1dd; transform: scaleY(0); transform-origin: bottom; transition: transform .8s cubic-bezier(.2,.7,.2,1) calc(.2s + var(--d)); }
.m-bars i:last-child { background: #17171a; }
.demo[data-step="1"] .m-bars i { transform: none; }
.m-meet { flex: 1; min-height: 0; display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.mac .dcal { border: 1px solid var(--l); border-radius: 10px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.mac .dcal .days { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--l); } .mac .dcal .days span { padding: 9px 12px; color: var(--m); font-size: 12px; } .mac .dcal .days .on { color: var(--t); font-weight: 700; }
.mac .dcal .grid { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); }
.mac .dcal .grid i { font-style: normal; position: relative; border-left: 1px solid var(--l); background: repeating-linear-gradient(#fff 0 31px, #f3f2ef 31px 32px); } .mac .dcal .grid i:first-child { border: 0; }
.mac .dcal u { position: absolute; left: 5px; right: 5px; height: 46px; padding: 7px 8px; text-decoration: none; font-size: 10.5px; line-height: 1.3; border-radius: 7px; background: #f0efec; color: var(--m); border-left: 3px solid #c9c7c1; }
.mac .dcal u.new { height: 62px; background: #17171a; color: rgba(255,255,255,.7); border-left-color: #17171a; box-shadow: 0 10px 24px rgba(0,0,0,.18); opacity: 0; transform: translateY(-16px) scale(.9); transition: opacity .5s ease .9s, transform .7s cubic-bezier(.2,.7,.2,1) .9s; }
.mac .dcal u.new b { display: block; color: #fff; font-size: 11.5px; }
.demo[data-step="3"] .dcal u.new { opacity: 1; transform: none; }
.m-ring { position: relative; border: 1px solid var(--l); border-radius: 10px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 14px; }
.m-ring .rc { position: relative; width: 62%; max-width: 160px; } .m-ring svg { width: 100%; display: block; transform: rotate(-90deg); } .m-ring circle { fill: none; stroke: #efeeea; stroke-width: 10; }
.m-ring circle.v { stroke: var(--t); stroke-linecap: round; stroke-dasharray: 302; stroke-dashoffset: 302; transition: stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1) .4s; }
.demo[data-step="3"] .m-ring circle.v { stroke-dashoffset: 90; }
.m-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -.04em; }
.m-ring span { font-size: 11px; color: var(--m); margin-top: 8px; } .m-ring em { font-style: normal; font-size: 11px; color: #1f7a3f; font-weight: 500; }
/* pop-up windows, like a real app being used */
.m-pop { position: absolute; z-index: 3; width: 250px; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.06); opacity: 0; transform: translateY(10px) scale(.96); transform-origin: 0 0; transition: opacity .35s ease, transform .5s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.demo[data-step="0"] .p0, .demo[data-step="1"] .p1, .demo[data-step="2"] .p2 { opacity: 1; transform: none; transition-delay: 1.15s; }
.m-pop .t { font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.m-pop .r, .m-pop .hd { display: flex; gap: 10px; font-size: 12px; padding: 5px 0; border-top: 1px solid var(--l); } .m-pop .r span, .m-pop .hd span { width: 52px; color: var(--m); flex: none; }
.m-pop .fit { display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 8px 0 2px; border-top: 1px solid var(--l); } .m-pop .fit span { width: 52px; color: var(--m); }
.m-pop .fit i { flex: 1; height: 5px; border-radius: 5px; background: #efeeea; overflow: hidden; } .m-pop .fit u { display: block; height: 100%; width: var(--w); background: var(--t); }
.m-pop .fit b { font-family: var(--display); font-weight: 800; }
.m-pop .txt { font-size: 12px; line-height: 1.5; color: #2c2c30; padding-top: 8px; border-top: 1px solid var(--l); }
.m-pop .ok { margin-top: 10px; font-size: 11.5px; color: #1f7a3f; font-weight: 500; }
.p0 { right: 24px; top: 41%; } .p1 { right: 26px; top: 170px; width: 280px; } .p2 { right: 34px; top: 50%; }
/* the cursor that does the work */
.m-cursor { position: absolute; z-index: 5; width: 22px; height: 22px; left: var(--x, 70%); top: var(--y, 80%); filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); transition: left 1s cubic-bezier(.45,0,.2,1), top 1s cubic-bezier(.45,0,.2,1); pointer-events: none; }
.m-cursor path { fill: #111; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.m-cursor.tap { animation: tap .35s ease; } @keyframes tap { 50% { transform: scale(.82); } }
.demo[data-step="0"] .m-cursor { --x: 63%; --y: 34%; } .demo[data-step="1"] .m-cursor { --x: 36%; --y: 38%; }
.demo[data-step="2"] .m-cursor { --x: 40%; --y: 41%; } .demo[data-step="3"] .m-cursor { --x: 77%; --y: 52%; }
/* a notification slides in from the corner when the meeting is booked */
.m-toast { position: absolute; z-index: 6; top: 50px; right: 14px; width: 270px; display: flex; gap: 10px; align-items: center; padding: 11px 13px; border-radius: 14px; background: rgba(246,246,244,.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 50px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.05); transform: translateX(120%); transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.m-toast > b { flex: none; width: 34px; height: 34px; border-radius: 9px; background: #17171a; color: #fff; font-family: var(--display); font-weight: 800; font-size: 10px; display: grid; place-items: center; letter-spacing: -.02em; }
.m-toast p { font-size: 11.5px; color: var(--m); line-height: 1.35; } .m-toast strong { display: block; color: var(--t); font-weight: 600; font-size: 12.5px; }
.demo[data-step="3"] .m-toast { transform: none; transition-delay: 1.5s; }

/* =================== pricing: fits one screen, the promise up top =================== */
.pricing { padding: 92px 6vw 6vh; }
.pricing .big { font-size: clamp(30px, 3.4vw, 48px); }
.promise { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(244,244,242,.28); background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); box-shadow: 0 0 50px rgba(255,255,255,.05); }
.promise i { width: 8px; height: 8px; border-radius: 50%; background: #f4f4f2; box-shadow: 0 0 12px #fff; animation: pingmark 2s ease-out infinite; }
.promise b { font-weight: 600; font-size: clamp(14px, 1.25vw, 17px); letter-spacing: -.01em; }
.promise span { font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: rgba(244,244,242,.55); padding-left: 12px; border-left: 1px solid rgba(255,255,255,.18); }
.p-row { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 16px; flex-wrap: wrap; }
.p-row .toggle { margin-top: 0; } .p-row .founding { margin-top: 0; font-size: 12.5px; }
.tiers { margin-top: 3.2vh; gap: 14px; }
.tier { padding: 20px 22px; }
.price { margin: 8px 0 14px; } .price b { font-size: 40px; } .price s { font-size: 15px; }
.save { margin: -10px 0 14px; font-size: 12px; }
.tier ul { gap: 6px; font-size: 13px; }
.setup { margin: 14px 0 12px; }
@media (max-width: 760px) {
  .demo { grid-template-columns: 1fr; align-content: start; gap: 16px; padding: 84px 16px 20px; }
  .dsteps li { display: none; } .demo[data-step="0"] .dsteps li:nth-child(1), .demo[data-step="1"] .dsteps li:nth-child(2), .demo[data-step="2"] .dsteps li:nth-child(3), .demo[data-step="3"] .dsteps li:nth-child(4) { display: grid; }
  .demo-copy .label { margin-bottom: 12px; } .demo-bar { margin-top: 14px; }
  .demo .mac { height: 58vh; font-size: 12px; } .mac-body { grid-template-columns: 1fr; } .mac aside { display: none; } .mac-bar span { margin-right: 0; }
  .view { padding: 14px; gap: 10px; } .m-kpis b { font-size: 18px; } .m-kpis svg { display: none; }
  .m-split { grid-template-columns: 1fr; } .m-map { display: none; } .m-meet { grid-template-columns: 1fr; } .m-ring { display: none; }
  .m-inbox .row { grid-template-columns: 1fr; gap: 4px; } .m-flow > i { flex-basis: 10px; } .m-flow .nd { padding: 9px; }
  .m-pop { width: 210px; right: 12px !important; top: auto !important; bottom: 14px; } .m-toast { width: 230px; top: 46px; right: 10px; } .m-cursor { display: none; }
  .promise { flex-wrap: wrap; justify-content: center; border-radius: 16px; text-align: center; } .promise span { border: 0; padding: 0; width: 100%; }
  .tiers { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 22px -16px 0; padding: 0 16px 8px; scrollbar-width: none; }
  .tiers::-webkit-scrollbar { display: none; }
  .tier { flex: 0 0 84%; scroll-snap-align: center; }
}
.m-map::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 47%, rgba(23,23,26,.14) 47.4%, transparent 48%), linear-gradient(20deg, transparent 60%, rgba(23,23,26,.1) 60.3%, transparent 60.8%), linear-gradient(160deg, transparent 30%, rgba(23,23,26,.1) 30.3%, transparent 30.8%); }

/* slide 03: the one light, called out like a product detail */
.ping-mark::before, .ping-mark::after { left: -16px; top: -16px; width: 32px; height: 32px; }
.ping-mark u { position: absolute; left: 22px; top: 0; width: 120px; height: 1px; background: linear-gradient(90deg, rgba(244,244,242,.9), rgba(244,244,242,.5)); }
.ping-mark u::after { content: ""; position: absolute; right: -2px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: #f4f4f2; }
.ping-mark b { left: 156px; top: -10px; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; text-transform: none; color: #f4f4f2; }
.ping-mark em { position: absolute; left: 156px; top: 12px; width: 250px; font-style: normal; font-size: 11.5px; line-height: 1.45; color: rgba(244,244,242,.58); }
.map-labels .ping-mark.on u { animation: drawline .8s cubic-bezier(.2,.7,.2,1) both .3s; transform-origin: 0 0; }
.map-labels .ping-mark.on b, .map-labels .ping-mark.on em { animation: fadeUp 1s ease both .7s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }
@keyframes drawline { from { transform: scaleX(0); } }
/* the meeting log + what it closed */
.mac .dcal u.held { background: #e5f4ea; border-left-color: #2f9e55; color: #1f7a3f; }
.mac .dcal u s { display: block; text-decoration: none; font-weight: 600; margin-top: 2px; }
.m-ring .won { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--l); width: 100%; text-align: center; display: flex; flex-direction: column; }
.m-ring .won span { margin: 0; } .m-ring .won b { position: static; display: block; font-size: 15px; font-family: var(--display); font-weight: 800; letter-spacing: -.02em; }
.demo[data-step="3"] .m-ring circle.v { stroke-dashoffset: 0; }
@media (max-width: 760px) {
  .ping-mark u { left: 0; top: 20px; width: 1px; height: 40px; background: linear-gradient(rgba(244,244,242,.9), rgba(244,244,242,.4)); }
  .ping-mark u::after { right: -2px; top: auto; bottom: -2px; }
  .ping-mark b { left: -120px; width: 240px; top: 68px; text-align: center; white-space: normal; }
  .ping-mark em { left: -120px; width: 240px; top: 92px; text-align: center; }
}
.ping-mark { font-style: normal; }

/* =================== v14: the demo like a product page: title on top, a big centred Mac, step tabs =================== */
.demo { grid-template-columns: 1fr; grid-template-rows: auto 1fr; justify-items: center; align-items: start; gap: 22px; padding: 92px 5vw 34px; text-align: center; }
.demo-copy { display: flex; flex-direction: column; align-items: center; width: 100%; }
.demo-copy .label { margin-bottom: 12px; }
.dsteps { display: grid; width: 100%; }
.dsteps li { grid-area: 1 / 1; display: block; opacity: 0 !important; transform: translateY(10px); transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.demo[data-step="0"] .dsteps li:nth-child(1), .demo[data-step="1"] .dsteps li:nth-child(2), .demo[data-step="2"] .dsteps li:nth-child(3), .demo[data-step="3"] .dsteps li:nth-child(4) { opacity: 1 !important; transform: none; }
.dsteps li > b { display: none; }
.dsteps h3 { font-size: clamp(30px, 3.4vw, 50px); }
.dsteps p { margin: 10px auto 0; max-width: 520px; font-size: 13.5px; }
.dtabs { list-style: none; display: flex; gap: 6px; margin-top: 18px; padding: 4px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.03); }
.dtabs li { position: relative; padding: 7px 14px; border-radius: 999px; font-size: 12px; color: rgba(244,244,242,.5); transition: color .4s, background .4s; white-space: nowrap; }
.dtabs b { font-weight: 500; font-size: 10px; letter-spacing: .14em; margin-right: 7px; opacity: .6; }
.demo[data-step="0"] .dtabs li:nth-child(1), .demo[data-step="1"] .dtabs li:nth-child(2), .demo[data-step="2"] .dtabs li:nth-child(3), .demo[data-step="3"] .dtabs li:nth-child(4) { background: #f4f4f2; color: #0a0a0a; }
.demo .mac { width: min(1180px, 90vw); max-width: none; height: min(620px, calc(100vh - 330px)); }
.demo .mac { transform-origin: 50% 0; }

/* =================== v14: pricing. The middle card leads =================== */
.pricing { padding: 84px 4vw 4vh; }
.pricing .big { font-size: clamp(30px, 3.2vw, 46px); }
.promise { margin-top: 14px; }
.p-row { margin-top: 12px; }
.tiers { position: relative; max-width: 1320px; grid-template-columns: 1fr 1.22fr 1fr; align-items: center; gap: 18px; margin-top: 3vh; }
.tiers::before { content: ""; position: absolute; left: 50%; top: 50%; width: 70%; height: 120%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255,255,255,.08), transparent); pointer-events: none; z-index: -1; }
.tier { padding: 22px 24px; }
.pricing.in .tier:not(.rec) { opacity: .62; }
.pricing.in .tier:not(.rec):hover { opacity: 1; }
.tier:not(.rec) .price b { font-size: 34px; } .tier:not(.rec) ul { font-size: 12.5px; gap: 5px; }
.tier.rec { position: relative; padding: 34px 34px 30px; background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.015) 60%), rgba(10,10,10,.9); }
.pricing.in .tier.rec { border-color: rgba(244,244,242,.7); box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 30px 90px rgba(0,0,0,.6), 0 0 120px rgba(255,255,255,.08); }
.tier.rec .price b { font-size: 56px; } .tier.rec .label { color: #f4f4f2; }
.tier.rec ul { font-size: 14px; gap: 8px; } .tier.rec .btn { padding-top: 17px; padding-bottom: 17px; }
.tier .badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: #f4f4f2; color: #0a0a0a; font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 0 30px rgba(255,255,255,.35); }
@media (max-width: 760px) {
  .demo { padding: 80px 16px 18px; gap: 14px; }
  .dsteps h3 { font-size: 28px; } .dtabs li { padding: 6px 9px; font-size: 11px; } .dtabs b { display: none; }
  .demo .mac { width: 100%; height: 54vh; }
  .tier.rec { padding: 30px 22px 24px; } .tier.rec .price b { font-size: 44px; }
  .pricing.in .tier:not(.rec) { opacity: .8; }
}
@media (max-width: 760px) { .demo .dsteps li { display: block !important; } .dsteps p { font-size: 12.5px; } }
.demo .mac { text-align: left; }

/* =================== v15: the Mac is now the client portal, laid out like a sales platform =================== */
.ap-defs { position: absolute; }
.mac .ic { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ap { flex: 1; min-height: 0; display: grid; grid-template-columns: 188px 1fr; }
.ap-rail { background: #f4f3f0; border-right: 1px solid var(--l); padding: 12px 10px; display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.ap-ws { display: flex; align-items: center; gap: 9px; padding: 2px 6px 10px; }
.ap-ws > b { width: 26px; height: 26px; border-radius: 7px; background: var(--t); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 13px; }
.ap-ws span { font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: -.02em; line-height: 1.1; display: flex; flex-direction: column; }
.ap-ws small { font-family: var(--text); font-weight: 400; font-size: 10.5px; color: var(--m); letter-spacing: 0; }
.ap-rail a { display: flex; align-items: center; gap: 9px; padding: 5.5px 8px; border-radius: 7px; color: #4a4a4f; font-size: 12.5px; transition: background .4s, color .4s, box-shadow .4s; }
.ap-rail a .ic { color: #8a8a8f; transition: color .4s; }
.ap-rail a em { margin-left: auto; font-style: normal; font-size: 10px; background: #e6e5e1; color: #3a3a3d; padding: 1px 6px; border-radius: 99px; }
.ap-rail a.soon { opacity: .55; } .ap-rail a.soon small { margin-left: auto; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--m); }
.ap-rail .ap-ask { margin-bottom: 4px; background: #fff; border: 1px solid var(--l); color: var(--t); font-weight: 500; }
.ap-rail .ap-ask .ic { color: var(--t); }
.ap-rail h6 { font-size: 9.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #9a9a9e; padding: 9px 8px 3px; }
.demo[data-step="0"] .ap-rail .s0, .demo[data-step="1"] .ap-rail .s1, .demo[data-step="2"] .ap-rail .s2, .demo[data-step="3"] .ap-rail .s3,
.demo[data-step="2"] .ap-rail .ap-ask { background: #fff; color: var(--t); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.demo[data-step="0"] .ap-rail .s0 .ic, .demo[data-step="1"] .ap-rail .s1 .ic, .demo[data-step="2"] .ap-rail .s2 .ic, .demo[data-step="3"] .ap-rail .s3 .ic { color: var(--t); }
.demo[data-step="0"] .ap-rail .s0 em, .demo[data-step="2"] .ap-rail .s2 em { background: var(--t); color: #fff; }
.ap-guar { margin-top: auto; padding: 10px 8px 2px; border-top: 1px solid var(--l); font-size: 11px; }
.ap-guar p { display: flex; justify-content: space-between; } .ap-guar p span { color: var(--m); } .ap-guar p b { font-weight: 600; }
.ap-guar i { display: block; height: 4px; border-radius: 4px; background: #e6e5e1; margin: 6px 0 7px; overflow: hidden; } .ap-guar u { display: block; height: 100%; width: 100%; background: var(--g); }
.ap-guar small { color: var(--m); font-size: 10px; display: flex; align-items: center; gap: 6px; } .ap-guar small s { width: 6px; height: 6px; border-radius: 50%; background: var(--g); }

.ap-main { min-width: 0; display: flex; flex-direction: column; }
.ap-top { height: 42px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--l); background: #fff; }
.ap-search { flex: 1; max-width: 360px; display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border-radius: 7px; background: #f4f3f0; color: #9a9a9e; font-size: 11.5px; }
.ap-me { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; background: #e6e5e1; color: #4a4a4f; font-size: 9.5px; font-weight: 600; display: grid; place-items: center; }
.ap-views { position: relative; flex: 1; min-height: 0; }
.ap-view { position: absolute; inset: 0; padding: 14px 18px; display: flex; flex-direction: column; gap: 11px; overflow: hidden; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.demo[data-step="0"] .w0, .demo[data-step="1"] .w1, .demo[data-step="2"] .w2, .demo[data-step="3"] .w3 { opacity: 1; transform: none; }
.ap-h { display: flex; align-items: center; gap: 10px; }
.ap-h h4 { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -.03em; margin-right: auto; }
.ap-live { font-size: 11px; color: var(--m); display: inline-flex; align-items: center; gap: 7px; }
.ap-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--g); animation: macping 1.8s infinite; }
.ap-h button { font: inherit; font-size: 11.5px; font-weight: 500; padding: 5px 11px; border-radius: 7px; border: 1px solid var(--l); background: #fff; color: var(--t); }
.ap-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--l); font-size: 12px; color: var(--m); }
.ap-tabs span { padding-bottom: 8px; margin-bottom: -1px; } .ap-tabs span.on { color: var(--t); font-weight: 500; border-bottom: 2px solid var(--t); }
.ap-tabs b { font-weight: 500; font-size: 10.5px; margin-left: 4px; padding: 0 6px; border-radius: 99px; background: #f0efec; color: #4a4a4f; }

.ap-split { flex: 1; min-height: 0; display: grid; grid-template-columns: 168px 1fr; gap: 12px; }
.ap-filters { border: 1px solid var(--l); border-radius: 10px; background: #fff; padding: 10px 12px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; }
.ap-filters .fh { font-weight: 600; font-size: 12px; }
.ap-filters .f { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--l); font-size: 11px; }
.ap-filters .f > span { color: var(--m); } .ap-filters .f b { display: flex; flex-wrap: wrap; gap: 4px; font-weight: 400; }
.ap-filters .f i { font-style: normal; padding: 2px 7px; border-radius: 5px; background: #f0efec; color: #2c2c30; font-size: 10.5px; }
.ap-table { border: 1px solid var(--l); border-radius: 10px; background: #fff; overflow: hidden; min-width: 0; }
.ap-table .tr { display: grid; grid-template-columns: 26px 1.7fr 1.2fr .55fr .9fr .9fr; align-items: center; gap: 8px; padding: 0 12px; height: 42px; border-top: 1px solid #f0efec; font-size: 12px; color: #3a3a3d;
  opacity: 0; transform: translateX(10px); transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1), background .4s; }
.ap-table .tr:nth-child(2) { transition-delay: .1s; } .ap-table .tr:nth-child(3) { transition-delay: .18s; } .ap-table .tr:nth-child(4) { transition-delay: .26s; } .ap-table .tr:nth-child(5) { transition-delay: .34s; } .ap-table .tr:nth-child(6) { transition-delay: .42s; } .ap-table .tr:nth-child(7) { transition-delay: .5s; }
.demo[data-step="0"] .w0 .tr, .demo[data-step="3"] .w3 .tr { opacity: 1; transform: none; }
.ap-table .tr.th { height: 32px; border-top: 0; background: #fafaf8; font-size: 10.5px; color: var(--m); text-transform: uppercase; letter-spacing: .06em; }
.ap-table .tr.hot { background: #f7f7f5; }
.ap-table .cb { width: 12px; height: 12px; border-radius: 3px; border: 1px solid #cfcdc7; }
.ap-table .tr.hot .cb { background: var(--t); border-color: var(--t); }
.ap-table .co { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; color: var(--t); }
.ap-table .co > span { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ap-table .co small { color: var(--m); font-weight: 400; font-size: 10.5px; }
.mac .lg { flex: none; width: 22px; height: 22px; border-radius: 6px; background: #ecebe7; color: #4a4a4f; display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; font-family: var(--display); }
.ap-table .fit { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 11.5px; }
.ap-table .fit u { display: block; width: 44px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--t) var(--w), #ecebe7 var(--w)); }
.ap-table .st { font-size: 11px; color: var(--m); }
.mac .tag.nw { background: var(--t); color: #fff; }

.ap-pop { position: absolute; z-index: 3; width: 248px; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 13px 15px;
  box-shadow: 0 20px 50px rgba(0,0,0,.16); opacity: 0; transform: translateY(8px) scale(.97); transition: opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.demo[data-step="0"] .q0, .demo[data-step="1"] .q1 { opacity: 1; transform: none; transition-delay: 1.15s; }
.ap-pop .t { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.ap-pop .r { display: flex; gap: 10px; font-size: 12px; padding: 5px 0; border-top: 1px solid var(--l); } .ap-pop .r span { width: 54px; color: var(--m); flex: none; }
.ap-pop .fit { display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 8px 0 2px; border-top: 1px solid var(--l); } .ap-pop .fit span { width: 54px; color: var(--m); }
.ap-pop .fit i { flex: 1; height: 5px; border-radius: 5px; background: #efeeea; overflow: hidden; } .ap-pop .fit u { display: block; height: 100%; width: var(--w); background: var(--t); } .ap-pop .fit b { font-family: var(--display); font-weight: 800; }
.ap-pop .txt { font-size: 12px; line-height: 1.5; color: #2c2c30; } .ap-pop .ok { margin-top: 9px; font-size: 11.5px; color: #1f7a3f; font-weight: 500; }
.q0 { right: 18px; top: 92px; } .q1 { right: 18px; bottom: 18px; }

.ap-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ap-kpis p { border: 1px solid var(--l); border-radius: 10px; background: #fff; padding: 10px 12px 14px; position: relative; overflow: hidden; }
.ap-kpis span { display: block; font-size: 11px; color: var(--m); } .ap-kpis b { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.04em; }
.ap-kpis i { position: absolute; left: 12px; right: 12px; bottom: 8px; height: 3px; border-radius: 3px; background: #efeeea; overflow: hidden; }
.ap-kpis i::after { content: ""; position: absolute; inset: 0; width: var(--w); background: var(--t); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s cubic-bezier(.2,.7,.2,1) .35s; }
.demo[data-step="1"] .w1 .ap-kpis i::after, .demo[data-step="3"] .w3 .ap-kpis i::after { transform: none; }

.ap-seq { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px 1fr; gap: 12px; }
.ap-steps { list-style: none; display: flex; flex-direction: column; gap: 8px; position: relative; }
.ap-steps li { border: 1px solid var(--l); border-radius: 10px; background: #fff; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.ap-steps li.on { border-color: var(--t); box-shadow: 0 0 0 1px var(--t); }
.ap-steps small { color: var(--m); font-size: 10.5px; } .ap-steps b { font-weight: 600; } .ap-steps span { font-size: 11px; color: #1f7a3f; } .ap-steps li:last-child span { color: var(--m); }
.ap-editor { border: 1px solid var(--l); border-radius: 10px; background: #fff; padding: 12px 16px; display: flex; flex-direction: column; }
.ap-editor .hd { display: flex; gap: 10px; font-size: 12px; padding: 7px 0; border-bottom: 1px solid #f0efec; } .ap-editor .hd span { width: 56px; color: var(--m); flex: none; }
.ap-editor .txt { font-size: 13px; line-height: 1.65; padding-top: 12px; color: #2c2c30; }
.ap-editor mark { background: #eeeeea; color: var(--t); border-radius: 4px; padding: 1px 5px; font-weight: 500; }
.ap-editor .ok { margin-top: auto; font-size: 11px; color: var(--m); padding-top: 10px; }

.ap-inbox { border: 1px solid var(--l); border-radius: 10px; background: #fff; overflow: hidden; margin-right: 270px; }
.ap-inbox .tr { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 12px; padding: 9px 12px; border-top: 1px solid #f0efec; font-size: 12px;
  opacity: 0; transform: translateX(10px); transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.ap-inbox .tr:first-child { border-top: 0; } .ap-inbox .tr.hot { background: #f7f7f5; }
.ap-inbox .tr:nth-child(2) { transition-delay: .1s; } .ap-inbox .tr:nth-child(3) { transition-delay: .18s; } .ap-inbox .tr:nth-child(4) { transition-delay: .26s; } .ap-inbox .tr:nth-child(5) { transition-delay: .34s; }
.demo[data-step="2"] .w2 .tr { opacity: 1; transform: none; }
.ap-inbox .tag { justify-self: start; } .ap-inbox b { font-weight: 600; display: block; } .ap-inbox small { color: var(--m); font-size: 11.5px; } .ap-inbox strong { font-weight: 500; font-size: 11px; color: var(--m); }
.ap-chat { position: absolute; right: 18px; top: 14px; bottom: 14px; width: 252px; border: 1px solid var(--l); border-radius: 12px; background: #fff; padding: 12px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.08);
  opacity: 0; transform: translateX(14px); transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.demo[data-step="2"] .ap-chat { opacity: 1; transform: none; transition-delay: .5s; }
.ap-chat .ch { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 12.5px; padding-bottom: 8px; border-bottom: 1px solid #f0efec; }
.ap-chat .me { align-self: flex-end; max-width: 86%; background: var(--t); color: #fff; font-size: 12px; padding: 7px 10px; border-radius: 12px 12px 3px 12px; }
.ap-chat .ai { max-width: 92%; background: #f4f3f0; font-size: 12px; line-height: 1.5; padding: 8px 10px; border-radius: 12px 12px 12px 3px; opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .5s ease; }
.demo[data-step="2"] .ap-chat .ai { opacity: 1; transform: none; transition-delay: 1.6s; }
.ap-chat .in { margin-top: auto; font-size: 11.5px; color: #9a9a9e; border: 1px solid var(--l); border-radius: 8px; padding: 8px 10px; }

.ap-meet { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; }
.ap-table.mt .tr { grid-template-columns: .8fr 1.6fr 1fr 1.1fr; }
.ap-meet .m-ring { padding: 12px; } .ap-meet .m-ring .rc { width: 52%; }

.demo .m-cursor { transition: left 1s cubic-bezier(.45,0,.2,1), top 1s cubic-bezier(.45,0,.2,1); }
.demo[data-step="0"] .m-cursor { --x: 40%; --y: 41%; } .demo[data-step="1"] .m-cursor { --x: 30%; --y: 48%; }
.demo[data-step="2"] .m-cursor { --x: 36%; --y: 37%; } .demo[data-step="3"] .m-cursor { --x: 40%; --y: 44%; }

@media (max-width: 760px) {.mac:not(.desk) .ap { grid-template-columns: 1fr; }.mac:not(.desk) .ap-rail { display: none; }.mac:not(.desk) .ap-search { font-size: 10.5px; }.mac:not(.desk) .ap-view { padding: 12px; gap: 9px; }.mac:not(.desk) .ap-split { grid-template-columns: 1fr; }.mac:not(.desk) .ap-filters { display: none; }.mac:not(.desk) .ap-table .tr { grid-template-columns: 1.7fr 1fr .9fr; }.mac:not(.desk) .ap-table .tr > :nth-child(1), .mac:not(.desk) .ap-table .tr > :nth-child(3), .mac:not(.desk) .ap-table .tr > :nth-child(6) { display: none; }.mac:not(.desk) .ap-table.mt .tr { grid-template-columns: .8fr 1.6fr 1.1fr; }.mac:not(.desk) .ap-table.mt .tr > :nth-child(1) { display: block; }.mac:not(.desk) .ap-table.mt .tr > :nth-child(3) { display: none; }.mac:not(.desk) .ap-table.mt .tr > :nth-child(4) { display: block; }.mac:not(.desk) .ap-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }.mac:not(.desk) .ap-kpis p { padding: 8px 10px 12px; }.mac:not(.desk) .ap-kpis b { font-size: 17px; }.mac:not(.desk) .ap-seq { grid-template-columns: 1fr; }.mac:not(.desk) .ap-steps { display: none; }.mac:not(.desk) .ap-inbox { margin-right: 0; }.mac:not(.desk) .ap-inbox .tr { grid-template-columns: 84px 1fr; }.mac:not(.desk) .ap-inbox strong { display: none; }.mac:not(.desk) .ap-chat { top: auto; height: 46%; left: 12px; right: 12px; width: auto; }.mac:not(.desk) .ap-meet { grid-template-columns: 1fr; }.mac:not(.desk) .ap-meet .m-ring { display: none; }.mac:not(.desk) .ap-pop { width: 210px; right: 12px; top: auto; bottom: 12px; }.mac:not(.desk) .ap-h button, .mac:not(.desk) .ap-live { display: none; }.mac:not(.desk) .ap-tabs { gap: 12px; font-size: 11px; overflow: hidden; white-space: nowrap; }
}
.ap-editor .hd em { font-style: normal; }
@media (max-width: 760px) { .demo .mac { height: 62vh; } }

/* =================== v16 =================== */
/* the Bay slide: a fuller block. Bigger line, the copy, then three small facts */
.scene-copy .cap.pos-l .big { font-size: clamp(54px, 6.4vw, 104px); line-height: .9; }
.scene-copy .cap.pos-l .body { max-width: 420px; margin-top: 22px; font-size: 14px; }
.scene-copy .facts { display: flex; gap: 0; margin-top: 30px; max-width: 520px; border-top: 1px solid rgba(255,255,255,.14); }
.scene-copy .facts p { flex: 1; padding: 14px 18px 0 0; display: flex; flex-direction: column; gap: 4px; }
.scene-copy .facts p + p { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.1); }
.scene-copy .facts b { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -.04em; color: #f4f4f2; line-height: 1; }
.scene-copy .facts span { font-size: 11px; line-height: 1.4; color: rgba(244,244,242,.55); }
/* 02: exclusivity as a quiet line, not a box */
.scene-copy .seat { display: none; }
.scene-copy .excl { margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); max-width: 420px; }
.scene-copy .ex-k { font-family: var(--small); font-size: 10px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: rgba(244,244,242,.75); display: flex; align-items: center; gap: 10px; }
.scene-copy .ex-k i { width: 6px; height: 6px; border-radius: 50%; background: #f4f4f2; box-shadow: 0 0 10px rgba(255,255,255,.9); animation: macping 2s infinite; }
.scene-copy .ex-t { margin-top: 10px; font-size: 13px; line-height: 1.55; color: rgba(244,244,242,.6); }
/* 03: room to breathe. The number, then the two figures side by side */
.scene-copy .pos-c.has-stat .stat { margin: 18px 0 8px; }
.scene-copy .pair { display: flex; align-items: stretch; justify-content: center; gap: 34px; margin-top: 26px; }
.scene-copy .pair > i { width: 1px; background: rgba(255,255,255,.16); }
.scene-copy .pair p { display: flex; flex-direction: column; gap: 6px; text-align: center; max-width: 220px; }
.scene-copy .pair b { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.03em; color: #f4f4f2; }
.scene-copy .pair span { font-size: 12.5px; line-height: 1.45; color: rgba(244,244,242,.6); }
@media (max-width: 760px) {
  .scene-copy .cap.pos-l .big { font-size: 46px; } .scene-copy .facts b { font-size: 22px; } .scene-copy .facts p { padding-right: 10px; } .scene-copy .facts p + p { padding-left: 10px; }
  .scene-copy .pair { gap: 16px; } .scene-copy .pair b { font-size: 18px; }
}

/* the Mac: lined out like a real platform, not a card for every piece */
.demo [data-go] { cursor: pointer; }
.dtabs li { cursor: pointer; } .dtabs li:hover { color: #f4f4f2; }
.ap-rail a[data-go]:hover { background: rgba(0,0,0,.04); }
.ap-view { padding: 0; gap: 0; }
.ap-h { padding: 14px 18px 10px; } .ap-tabs { padding: 0 18px; }
.ap-split { gap: 0; } .ap-filters { border: 0; border-right: 1px solid var(--l); border-radius: 0; background: transparent; padding: 12px 16px 12px 18px; }
.ap-table { border: 0; border-radius: 0; background: transparent; } .ap-table .tr { padding: 0 18px; }
.ap-table .tr.th { background: transparent; border-bottom: 1px solid var(--l); }
.ap-kpis { gap: 0; border-top: 1px solid var(--l); border-bottom: 1px solid var(--l); }
.ap-kpis p { border: 0; border-radius: 0; background: transparent; padding: 12px 18px 16px; } .ap-kpis p + p { border-left: 1px solid var(--l); } .ap-kpis i { left: 18px; right: 18px; }
.ap-h + .ap-kpis { margin-top: 0; }
.ap-seq { gap: 0; } .ap-steps { gap: 0; border-right: 1px solid var(--l); }
.ap-steps li { border: 0; border-radius: 0; border-bottom: 1px solid var(--l); background: transparent; padding: 12px 18px; box-shadow: none !important; }
.ap-steps li.on { background: #fff; box-shadow: inset 2px 0 0 var(--t) !important; }
.ap-editor { border: 0; border-radius: 0; background: transparent; padding: 12px 20px; }
.w2 { padding-right: 300px; }
.ap-inbox { border: 0; border-radius: 0; background: transparent; margin: 0; } .ap-inbox .tr { padding: 10px 18px; }
.ap-chat { top: 0; right: 0; bottom: 0; width: 300px; border: 0; border-left: 1px solid var(--l); border-radius: 0; box-shadow: none; padding: 14px 16px; background: #fff; }
.ap-chat .ch { font-size: 13px; }
.ap-meet { gap: 0; } .ap-meet .m-ring { border: 0; border-left: 1px solid var(--l); border-radius: 0; background: transparent; }
.q0 { top: 108px; }
@media (max-width: 760px) {.mac:not(.desk) .w2 { padding-right: 0; }.mac:not(.desk) .ap-chat { top: auto; left: 0; right: 0; width: auto; height: 50%; border-left: 0; border-top: 1px solid var(--l); }.mac:not(.desk) .ap-h { padding: 12px 14px 8px; }.mac:not(.desk) .ap-tabs { padding: 0 14px; }.mac:not(.desk) .ap-table .tr { padding: 0 14px; }
}

/* pricing: narrower cards, a lift on hover, the guarantee as a line under them */
.pricing .promise { display: none; }
.tiers { max-width: 1060px; grid-template-columns: 1fr 1.16fr 1fr; gap: 16px; margin-top: 3.4vh; }
.tier { transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .45s; }
.pricing.in .tier:hover { opacity: 1; transform: translateY(-8px) scale(1.025); border-color: rgba(244,244,242,.75); box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 90px rgba(255,255,255,.07); z-index: 2; }
.pricing.in .tiers:hover .tier.rec:not(:hover) { opacity: .7; }
.promise2 { margin: 3.4vh auto 0; max-width: 640px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.promise2 b { font-family: var(--display); font-weight: 800; font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -.03em; color: #f4f4f2; }
.promise2 span { font-size: 12px; color: rgba(244,244,242,.55); }
@media (max-width: 760px) { .promise2 b { font-size: 17px; } .pricing.in .tier:hover { transform: none; } }

/* sources: folded away */
.sources { padding: 0 6vw 28px; }
.sources details { max-width: 1120px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,.08); }
.sources summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 16px 0; font-family: var(--small); font-size: 10px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: rgba(244,244,242,.45); }
.sources summary::-webkit-details-marker { display: none; }
.sources summary i { width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .3s; }
.sources details[open] summary i { transform: rotate(-135deg); }
.sources summary:hover { color: rgba(244,244,242,.8); }
.sources ol { padding: 0 0 14px 18px; display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; color: rgba(244,244,242,.5); }

/* the close: two columns, what happens next + the form */
.close .close-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 6vw; align-items: center; max-width: 1180px; margin: 0 auto; text-align: left; }
.close .close-l .big { font-size: clamp(38px, 4vw, 60px); text-align: left; }
.close .close-l .sub { text-align: left; margin-top: 12px; }
.close .label { margin-bottom: 18px; }
.close .next { list-style: none; margin-top: 34px; border-top: 1px solid rgba(255,255,255,.12); }
.close .next li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.close .next b { font-family: var(--small); font-weight: 500; font-size: 10px; letter-spacing: .2em; color: rgba(244,244,242,.45); padding-top: 4px; }
.close .next strong { display: block; font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -.03em; color: #f4f4f2; }
.close .next span { font-size: 13px; color: rgba(244,244,242,.55); }
.close .access-form { margin: 0; max-width: none; width: 100%; padding: 28px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.025); }
.close .access-form .btn { width: 100%; justify-content: center; margin-top: 6px; }
@media (max-width: 760px) {
  .close .close-grid { grid-template-columns: 1fr; gap: 34px; } .close .access-form { padding: 18px; }
}
.scene-copy .pos-ct .excl { margin-left: auto; margin-right: auto; text-align: center; } .scene-copy .pos-ct .ex-k { justify-content: center; }
.scene-copy .pair { margin-top: 34px; } .scene-copy .pair b { font-size: 17px; letter-spacing: -.02em; } .scene-copy .pair p { max-width: 240px; }
.close .close-l .sub { margin: 12px 0 0; max-width: none; }
@media (max-width: 760px) { .scene-copy .facts { display: none; } .scene-copy .cap.pos-l .body { font-size: 13px; margin-top: 14px; } }

/* =================== v17 =================== */
.mark-solid { color: #f4f4f2; }
/* nav: just the mark. Hover and it spins, then the name slides out */
nav .brand { gap: 0; }
nav .brand .mark-solid { transition: transform .9s cubic-bezier(.3,.7,.2,1); }
nav .brand:hover .mark-solid { transform: rotate(360deg); }
nav .brand span { display: inline-block; font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: -.035em; text-transform: none; color: #f4f4f2;
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; margin-left: 0; transform: translateX(-8px);
  transition: max-width .7s cubic-bezier(.2,.7,.2,1) .15s, opacity .45s ease .25s, margin .7s cubic-bezier(.2,.7,.2,1) .15s, transform .7s cubic-bezier(.2,.7,.2,1) .15s; }
nav .brand:hover span { max-width: 240px; opacity: 1; margin-left: 12px; transform: none; }
@media (max-width: 760px) { nav .brand span { display: none; } }

/* the Mac: logo in the workspace switcher */
.ap-ws > b { background: var(--t); } .ap-ws .mark-solid { width: 18px; height: 8px; color: #fff; }

/* screens opened by clicking */
.demo[data-view] .w0, .demo[data-view] .w1, .demo[data-view] .w2, .demo[data-view] .w3 { opacity: 0 !important; transform: translateY(10px) !important; pointer-events: none; }
.demo[data-view="home"] .x-home, .demo[data-view="companies"] .x-companies, .demo[data-view="people"] .x-people, .demo[data-view="lists"] .x-lists,
.demo[data-view="analytics"] .x-analytics, .demo[data-view="calls"] .x-calls { opacity: 1; transform: none; }
.demo[data-view] .ap-view.x .tr { opacity: 1; transform: none; }
.demo[data-view] .ap-view.x .ap-kpis i::after { transform: none; }
.demo[data-view] .m-cursor, .demo[data-view] .m-toast { opacity: 0; }
.demo[data-view] .ap-rail a:not(.on) { background: transparent !important; box-shadow: none !important; color: #4a4a4f; }
.demo[data-view] .ap-rail a:not(.on) .ic { color: #8a8a8f; }
.ap-rail a.on { background: #fff !important; color: var(--t) !important; box-shadow: 0 1px 3px rgba(0,0,0,.08) !important; opacity: 1; } .ap-rail a.on .ic { color: var(--t) !important; }
.ap-table.ct5 .tr { grid-template-columns: 1.6fr 1.1fr .5fr .9fr .9fr; }
.ap-table.ct4 .tr { grid-template-columns: 1.5fr 1.2fr 1fr .9fr; }
.ap-table.lst .lg { width: auto; min-width: 22px; padding: 0 5px; }
.ap-two { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; }
.ap-two > * { padding: 14px 18px; min-width: 0; } .ap-two > * + * { border-left: 1px solid var(--l); }
.ct { font-size: 11.5px; font-weight: 600; color: var(--t); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ct em { font-style: normal; font-weight: 500; font-size: 10.5px; color: #1f7a3f; background: #e5f4ea; padding: 2px 7px; border-radius: 99px; }
.feed p:not(.ct) { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid #f0efec; font-size: 12px; color: #4a4a4f; }
.feed time { width: 38px; flex: none; color: var(--m); font-size: 11px; } .feed b { font-weight: 600; color: var(--t); }
.soon-box { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 300px; }
.x-calls { justify-content: center; } .soon-box .ic.big { width: 28px; height: 28px; color: var(--m); }
.soon-box h4 { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -.03em; } .soon-box p { font-size: 12.5px; color: var(--m); line-height: 1.5; }

/* charts */
.cbars { position: relative; height: 120px; display: flex; align-items: flex-end; gap: 14px; padding: 0 4px 18px; border-bottom: 1px solid var(--l); }
.cbars i { position: relative; flex: 1; height: var(--h); background: #e4e3df; border-radius: 4px 4px 0 0; transform: scaleY(0); transform-origin: 50% 100%; transition: transform .9s cubic-bezier(.2,.7,.2,1) calc(.3s + var(--d)); }
.cbars i:last-of-type { background: var(--t); }
.cbars i b { position: absolute; top: -17px; left: 0; right: 0; text-align: center; font-size: 10.5px; font-weight: 600; color: var(--t); }
.cbars i span { position: absolute; bottom: -17px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--m); }
.cbars u { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed #1f7a3f; text-decoration: none; }
.cbars u { bottom: calc(18px + (120px - 18px) * var(--gn, .5)); }
.cbars u span { position: absolute; right: 0; top: -15px; font-size: 9.5px; color: #1f7a3f; background: rgba(255,255,255,.9); padding: 0 3px; }
.demo[data-step="3"] .w3 .cbars i, .demo[data-view="home"] .cbars i, .demo[data-view="analytics"] .cbars i { transform: none; }
.lchart svg { width: 100%; height: 102px; display: block; border-bottom: 1px solid var(--l); }
.lchart polyline { fill: none; stroke: var(--t); stroke-width: 2; vector-effect: non-scaling-stroke; } .lchart polygon { fill: rgba(23,23,26,.06); }
.lx { display: flex; justify-content: space-between; font-size: 10px; color: var(--m); padding-top: 4px; }

/* meetings: thin ring + chart in the side column */
.ap-meet { grid-template-columns: 1.45fr 1fr; }
.ap-side { border-left: 1px solid var(--l); padding: 14px 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ring-row { display: flex; align-items: center; gap: 14px; }
.ring-row .rc { position: relative; width: 62px; flex: none; } .ring-row svg { width: 100%; display: block; transform: rotate(-90deg); }
.ring-row circle { fill: none; stroke: #efeeea; stroke-width: 7; }
.ring-row circle.v { stroke: var(--t); stroke-linecap: round; stroke-dasharray: 315; stroke-dashoffset: 315; transition: stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1) .4s; }
.demo[data-step="3"] .ring-row circle.v { stroke-dashoffset: 0; }
.ring-row .rc b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 19px; }
.ring-row strong { display: block; font-size: 13px; font-weight: 600; } .ring-row span { display: block; font-size: 11px; color: var(--m); } .ring-row em { font-style: normal; font-size: 11px; color: #1f7a3f; font-weight: 500; }
.ap-side .won { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--l); display: flex; justify-content: space-between; font-size: 11.5px; } .ap-side .won span { color: var(--m); } .ap-side .won b { font-weight: 600; }
@media (max-width: 760px) {.mac:not(.desk) .ap-meet .ap-side { display: none; }.mac:not(.desk) .ap-two { grid-template-columns: 1fr; }.mac:not(.desk) .ap-two > * + * { display: none; }.mac:not(.desk) .ap-table.ct5 .tr, .mac:not(.desk) .ap-table.ct4 .tr { grid-template-columns: 1.6fr 1fr; }.mac:not(.desk) .ap-table.ct5 .tr > :nth-child(n+2):not(:last-child), .mac:not(.desk) .ap-table.ct4 .tr > :nth-child(n+2):not(:last-child) { display: none; }
}

/* request access: centred, the three steps in a row, the form under them */
.close .close-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0; max-width: 980px; }
.close .close-l { display: flex; flex-direction: column; align-items: center; }
.close .big-mark { display: block; margin: 0 auto 34px; }
.close .close-l .big { text-align: center; font-size: clamp(40px, 4.6vw, 72px); }
.close .close-l .sub { text-align: center; margin: 14px auto 0; }
.close .next { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin-top: 48px; border-top: 1px solid rgba(255,255,255,.12); }
.close .next li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 22px 6px; border-bottom: 0; text-align: center; }
.close .next li + li { border-left: 1px solid rgba(255,255,255,.08); }
.close .next b { padding-top: 0; }
.close .access-form { max-width: 620px; margin: 44px auto 0; text-align: left; }
@media (max-width: 760px) {
  .close .next { grid-template-columns: 1fr; } .close .next li + li { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
}
.cbars i { font-style: normal; } .cbars { margin-top: 18px; }
.cbars { --ch: 120px; height: var(--ch); } .cbars u { bottom: calc(18px + (var(--ch) - 18px) * var(--gn, .5)); } .ap-two .cbars { --ch: 210px; } .ap-two .lchart svg { height: 210px; } .ap-side .cbars { --ch: 130px; }
@media (max-width: 760px) {.mac:not(.desk) .ap-meet { grid-template-columns: 1fr; }.mac:not(.desk) .ap-table .co > span { white-space: nowrap; } }

/* nav v18: two halves pull apart, the name sits between them */
nav .brand { display: flex; align-items: center; gap: 0; color: #f4f4f2; }
nav .brand .bp { flex: none; display: block; transition: transform .75s cubic-bezier(.2,.7,.2,1), margin .75s cubic-bezier(.2,.7,.2,1); }
nav .brand .b0 { transform: translateY(calc(var(--dy) / -2)); }
nav .brand .b1 { margin-left: var(--mx); transform: translateY(calc(var(--dy) / 2)); }
nav .brand span.bn { display: inline-block; max-width: 0; opacity: 0; margin: 0; overflow: hidden; white-space: nowrap; transform: none;
  font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: -.035em; text-transform: none; color: #f4f4f2;
  transition: max-width .75s cubic-bezier(.2,.7,.2,1), margin .75s cubic-bezier(.2,.7,.2,1), opacity .4s ease .2s; }
nav .brand:hover .b0 { transform: translateY(0); }
nav .brand:hover .b1 { margin-left: 0; transform: translateY(0); }
nav .brand:hover span.bn { max-width: 240px; opacity: 1; margin: 0 12px; }
@media (max-width: 760px) { nav .brand span.bn { display: none; } }

/* =================== v19 =================== */
/* headlines: enough line height that descenders never touch the next line */
.big, .scene-copy .big { line-height: 1.02 !important; }
.scene-copy .cap.pos-l .big { line-height: 1 !important; }
.scene-copy .pos-sky.has-stat .big, .scene-copy .pos-ct .big { line-height: 1.04 !important; }
.hero-copy .wordmark { line-height: 1.05; }

/* the Bay: a key, stacked in its own box */
.scene-copy .facts { display: none; }
.scene-copy .kbox { margin-top: 26px; max-width: 360px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(8,8,8,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 6px 18px; }
.scene-copy .kbox .kh { font-family: var(--small); font-size: 9.5px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: rgba(244,244,242,.45); padding: 10px 0 8px; }
.scene-copy .kbox p:not(.kh) { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.08); }
.scene-copy .kbox b { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -.04em; color: #f4f4f2; line-height: 1; }
.scene-copy .kbox span { font-size: 12.5px; line-height: 1.4; color: rgba(244,244,242,.65); }
.scene-copy .kbox .kd { display: flex; align-items: center; height: 24px; } .scene-copy .kbox .kd i { width: 9px; height: 9px; border-radius: 50%; background: #f2a44b; box-shadow: 0 0 12px 3px rgba(242,164,75,.55); }
@media (max-width: 760px) { .scene-copy .kbox { display: none; } }

/* 02: a few pulses say what they are */
.sigs i { position: absolute; width: 0; height: 0; font-style: normal; }
.sigs u { position: absolute; left: 0; bottom: 12px; width: 1px; height: 0; background: linear-gradient(to top, rgba(255,210,150,.9), rgba(255,255,255,.35)); transition: height .6s cubic-bezier(.2,.7,.2,1); }
.sigs b { position: absolute; left: 0; bottom: 64px; transform: translate(-50%, 6px); white-space: nowrap; font-family: var(--small); font-weight: 500; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #f4f4f2;
  padding: 6px 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 99px; background: rgba(8,8,8,.7); backdrop-filter: blur(6px); opacity: 0; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.sigs i::before { content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #ffd9a6; box-shadow: 0 0 14px 4px rgba(242,164,75,.7); opacity: 0; transition: opacity .4s; }
.sigs.on i::before { opacity: 1; transition-delay: var(--d); }
.sigs.on u { height: 52px; transition-delay: calc(var(--d) + .15s); }
.sigs.on b { opacity: 1; transform: translate(-50%, 0); transition-delay: calc(var(--d) + .45s); }
@media (max-width: 760px) { .sigs i:nth-child(2) { display: none; } .sigs b { font-size: 8.5px; letter-spacing: .1em; } }

/* 03: twenty seats light up, one by one */
.scene-copy .pair { display: none; }
.scene-copy .seats { display: grid; grid-template-columns: repeat(10, 26px); gap: 10px 12px; justify-content: center; margin-top: 30px; }
.scene-copy .seats i { position: relative; width: 26px; height: 17px; border: 1.5px solid rgba(255,255,255,.28); border-radius: 3px; transition: border-color .4s, background .4s, box-shadow .4s; }
.scene-copy .seats i::after { content: ""; position: absolute; left: -5px; right: -5px; bottom: -5px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.28); transition: background .4s; }
.scene-copy .cap.on .seats i { border-color: #f4f4f2; background: rgba(255,255,255,.12); box-shadow: 0 0 12px rgba(255,255,255,.25); transition-delay: var(--d); }
.scene-copy .cap.on .seats i::after { background: #f4f4f2; transition-delay: var(--d); }
.scene-copy .seat-note { margin-top: 18px; font-size: 13px; color: rgba(244,244,242,.7); }
.scene-copy .after { margin-top: 8px; font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -.02em; color: #f4f4f2; }
@media (max-width: 760px) { .scene-copy .seats { grid-template-columns: repeat(10, 20px); gap: 8px 8px; } .scene-copy .seats i { width: 20px; height: 13px; } }

/* thin line charts, like a stock chart */
.lc { position: relative; padding-top: 16px; }
.lc-plot { position: relative; height: 128px; }
.ap-two .lc-plot { height: 210px; } .ap-side .lc-plot { height: 140px; }
.lc svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lc .gr { stroke: #efeeea; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lc .gl { stroke: #2f9e55; stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.lc polygon { fill: url(#none); fill: rgba(23,23,26,.05); }
.lc polyline { fill: none; stroke: var(--t); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1) .3s; }
.lc i { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #fff; border: 1.5px solid var(--t); font-style: normal; opacity: 0; transition: opacity .3s ease var(--d); }
.lc i.last { background: var(--t); box-shadow: 0 0 0 4px rgba(23,23,26,.1); }
.lc i b { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); font-size: 10.5px; font-weight: 600; color: var(--t); white-space: nowrap; }
.lc .gt { position: absolute; right: 0; transform: translateY(-120%); font-style: normal; font-size: 9.5px; color: #1f7a3f; }
.lc .lx { display: flex; justify-content: space-between; padding-top: 6px; font-size: 10px; color: var(--m); border-top: 1px solid var(--l); margin-top: 0; }
.demo[data-step="3"] .w3 .lc polyline, .demo[data-view="home"] .lc polyline, .demo[data-view="analytics"] .lc polyline { stroke-dashoffset: 0; }
.demo[data-step="3"] .w3 .lc i, .demo[data-view="home"] .lc i, .demo[data-view="analytics"] .lc i { opacity: 1; }
.ap-side { gap: 12px; } .ap-side .mchart { padding-top: 12px; border-top: 1px solid var(--l); }

/* request access: steps stacked in a box, the form open beside it */
.close .close-row { display: grid; grid-template-columns: 1fr 1.15fr; gap: 44px; width: 100%; max-width: 980px; margin: 52px auto 0; text-align: left; align-items: start; }
.close .steps-box { border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.025); padding: 8px 22px 6px; }
.close .sb-h { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 12px; font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -.03em; color: #f4f4f2; }
.close .sb-h span { order: 2; font-family: var(--small); font-weight: 500; font-size: 10px; letter-spacing: .24em; color: rgba(244,244,242,.4); }
.close .steps-box .next { display: block; margin: 0; border-top: 0; width: auto; }
.close .steps-box .next li { display: grid; grid-template-columns: 40px 1fr; align-items: start; text-align: left; gap: 6px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.08); border-left: 0 !important; }
.close .steps-box .next b { padding-top: 5px; }
.close .access-form { margin: 0; max-width: none; padding: 0; border: 0; background: none; border-radius: 0; }
.close .access-form .grid { gap: 4px 24px; }
.close .access-form input:not([type=checkbox]) { background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.18); border-radius: 0; padding: 16px 2px 12px; }
.close .access-form input:not([type=checkbox]):focus { border-bottom-color: #f4f4f2; }
.close .access-form .consent { margin-top: 20px; }
@media (max-width: 760px) { .close .close-row { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 760px) { .sigs i:nth-child(1) b { transform: translate(-20%, 6px); } .sigs.on i:nth-child(1) b { transform: translate(-20%, 0); } .sigs i:nth-child(3) b { transform: translate(-82%, 6px); } .sigs.on i:nth-child(3) b { transform: translate(-82%, 0); } }
.scene-copy .seats { margin-top: 40px; }

/* v20: the Bay notes. One thin box per fact, an outline icon and a plain sentence */
.scene-copy .kbox { display: none; }
.scene-copy .notes { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; max-width: 440px; }
.scene-copy .notes p { display: flex; align-items: center; gap: 16px; padding: 15px 18px; border: 1px solid rgba(255,255,255,.16); border-radius: 2px; background: rgba(8,8,8,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.scene-copy .notes svg { width: 22px; height: 22px; flex: none; fill: none; stroke: #f4f4f2; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.scene-copy .notes span { font-size: 15px; line-height: 1.35; color: #f4f4f2; letter-spacing: -.01em; }
.scene-copy .lightkey { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 12px; color: rgba(244,244,242,.55); }
.scene-copy .lightkey i { width: 8px; height: 8px; border-radius: 50%; background: #f2a44b; box-shadow: 0 0 12px 3px rgba(242,164,75,.55); }
@media (max-width: 760px) { .scene-copy .notes, .scene-copy .lightkey { display: none; } }

/* v21: headline spacing. Letters no longer touch, lines get room, the Bay line breaks cleanly */
.big, .scene-copy .big, .scene-copy .stat { letter-spacing: -.03em !important; }
.scene-copy .cap.pos-l { max-width: min(600px, 42vw); }
.scene-copy .cap.pos-l .big { font-size: clamp(44px, 4.9vw, 74px); line-height: 1.08 !important; }
.scene-copy .pos-sky.has-stat .big, .scene-copy .pos-ct .big, .scene-copy .pos-c.has-stat .big { line-height: 1.08 !important; }
.big { line-height: 1.06 !important; }
@media (max-width: 760px) { .scene-copy .cap.pos-l { max-width: none; } .scene-copy .cap.pos-l .big { font-size: 40px; } }

/* top bar v2: plans + questions always one click away */
.nav-r { display: flex; align-items: center; gap: 6px; }
.nav-link { font-size: 13px; color: var(--mute); text-decoration: none; padding: 9px 14px; border-radius: 999px; transition: color .25s, background .25s; }
.nav-link:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.pill.solid { margin-left: 6px; background: var(--ink); color: #0a0a0a; border-color: var(--ink); font-weight: 500; }
.pill.solid:hover { background: #fff; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.r4 { animation-delay: 2.25s; }
.veil { position: fixed; inset: 0; z-index: 30; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity .26s ease; }
.veil.on { opacity: 1; }
@media (max-width: 760px) {
  .nav-link[data-jump="faq"] { display: none; }
  .nav-link { padding: 8px 10px; }
  .hero-cta .btn { padding: 12px 20px; font-size: 13px; }
}

/* ================= v2 (9 Nov 2026): dots only on the opening, then plain sections ================= */
.intro { height: 250vh; }
.how { height: 420vh; position: relative; }
.how .demo { visibility: visible; opacity: 1; pointer-events: auto; }
.pricing { margin-top: 0; min-height: 0; visibility: visible; padding-top: 14vh; }

/* what you're missing: Ethics-style word reveal */
.missing { padding: 26vh 8vw 24vh; text-align: center; }
.missing .label { margin-bottom: 44px; }
.missing .reveal { margin: 0 auto; max-width: 1180px; font-family: 'Inter Tight', var(--display); font-weight: 700; font-size: clamp(30px, 4.6vw, 70px); line-height: 1.04; letter-spacing: -.045em; }
.reveal .w { display: inline-block; white-space: pre; opacity: .12; filter: blur(4px); transition: opacity .5s, filter .5s; }
.reveal .w.on { opacity: 1; filter: none; }
.reveal .w.num.on { color: var(--light); text-shadow: 0 0 40px rgba(242,164,75,.35); }

/* proof: three example lead cards */
.proof { padding: 16vh 6vw 12vh; }
.sec-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.sec-head .big { margin-top: 18px; } .sec-head .sub { margin: 18px auto 0; }
.leads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1180px; margin: 0 auto; }
.lead { border: 1px solid var(--line); border-radius: 16px; padding: 22px; background: rgba(255,255,255,.02); opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.proof.in .lead { opacity: 1; transform: none; } .proof.in .lead:nth-child(2) { transition-delay: .1s; } .proof.in .lead:nth-child(3) { transition-delay: .2s; }
.lead header { display: flex; align-items: center; gap: 12px; }
.lead .lg { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: #f4f4f2; color: #0a0a0a; font-weight: 600; font-size: 14px; flex: none; }
.lead h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; } .lead small { color: var(--mute); font-size: 12.5px; }
.lead .fit { margin-left: auto; text-align: right; color: var(--mute); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.lead .fit b { display: block; color: var(--ink); font-size: 22px; letter-spacing: -.03em; text-transform: none; font-weight: 600; }
.fitbar { display: block; height: 2px; margin: 18px 0 16px; background: rgba(255,255,255,.08); border-radius: 2px; position: relative; overflow: hidden; }
.fitbar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ink); transition: width 1.4s cubic-bezier(.2,.7,.2,1) .5s; }
.proof.in .fitbar::after { width: var(--w); }
.lead .sig { list-style: none; display: grid; gap: 10px; }
.lead .sig li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding-left: 16px; position: relative; }
.lead .sig li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--light); box-shadow: 0 0 10px rgba(242,164,75,.8); }
.lead .sig em, .lead .who em { font-style: normal; color: var(--mute); font-size: 12.5px; white-space: nowrap; }
.lead .who { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; }
.lead .st { margin-top: 14px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.lead .st.on { color: var(--ink); } .lead .st.on::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #2f9e55; margin-right: 8px; vertical-align: 1px; }
.ex-note { text-align: center; margin-top: 26px; color: var(--dim); font-size: 12.5px; }

/* signals marquee (Ethics style) */
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 2.4vw 0; display: grid; gap: 1.2vw; }
.marquee .row { display: flex; width: max-content; will-change: transform; }
.marquee .item { display: flex; align-items: center; gap: 3vw; padding-right: 3vw; font-family: 'Inter Tight', var(--display); font-weight: 800; font-size: clamp(38px, 7vw, 116px); letter-spacing: -.05em; line-height: 1; white-space: nowrap; }
.marquee .item .light { font-weight: 300; color: #77736c; }
.marquee .item i { width: .14em; height: .14em; border-radius: 50%; background: var(--light); box-shadow: 0 0 20px rgba(242,164,75,.6); flex: none; }

/* founder note */
.founder { padding: 18vh 8vw 6vh; text-align: center; opacity: 0; transition: opacity 1s ease; }
.founder.in { opacity: 1; }
.founder .note-big { margin: 30px auto 0; max-width: 900px; font-family: 'Inter Tight', var(--display); font-weight: 600; font-size: clamp(24px, 2.8vw, 40px); line-height: 1.18; letter-spacing: -.03em; }
.founder .sign { margin-top: 26px; color: var(--mute); font-size: 14px; }

/* footer: columns + the glowing wordmark */
.site-footer { display: block; padding: 70px 5vw 0; border-top: 1px solid var(--line); margin-top: 8vh; }
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1.4fr 1fr; gap: 24px; font-size: 14px; }
.site-footer .cols div { display: flex; flex-direction: column; gap: 8px; }
.site-footer .cols b { font-family: 'Inter Tight', var(--display); font-weight: 800; letter-spacing: -.03em; font-size: 17px; }
.site-footer .cols span, .site-footer .cols a { color: var(--mute); text-decoration: none; transition: color .2s; }
.site-footer .cols a:hover { color: var(--ink); }
.fghost { margin: 0 -2vw; padding: 5vw 0 2vw; touch-action: pan-y; }
.fghost svg { display: block; width: 100%; height: auto; overflow: visible; }
.fghost text { font-family: 'Inter Tight', var(--display); font-weight: 800; letter-spacing: -.06em; }
.site-footer .legal { display: flex; justify-content: space-between; padding: 16px 0 22px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12.5px; }

@media (max-width: 1000px) { .leads { grid-template-columns: 1fr; max-width: 520px; } }
@media (max-width: 760px) {
  .missing { padding: 18vh 16px 16vh; } .proof { padding: 12vh 16px 8vh; } .founder { padding: 12vh 16px 4vh; }
  .site-footer { padding: 50px 16px 0; } .site-footer .cols { grid-template-columns: 1fr 1fr; }
  .how { height: 360vh; }
}
@media (prefers-reduced-motion: reduce) { .reveal .w { opacity: 1; filter: none; } }

/* ================= v3 (9 Nov 2026): logo dots stay behind everything, islands that play by themselves ================= */
.intro { height: 200vh; }
.intro .dots { position: fixed; inset: 0; z-index: 0; pointer-events: none; transition: opacity .2s linear; }
body > section:not(.intro), body > footer { position: relative; z-index: 1; }
.sec-top { text-align: center; max-width: 1000px; margin: 0 auto 64px; }
.sec-top .sub { margin: 20px auto 0; max-width: 520px; }
.duo { font-family: 'Inter Tight', var(--display); font-weight: 700; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.04; letter-spacing: -.045em; margin-top: 18px; }
.duo span { display: block; } .duo .g { color: #6f6c66; }

/* the island: a dark glass card with a small screen that plays on its own */
.isl { position: relative; border: 1px solid var(--line); border-radius: 22px; padding: 14px; background: rgba(12,12,12,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.in .isl, .in.isl, .step.in .isl { opacity: 1; transform: none; }
.isl .k { margin: 18px 8px 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.isl h3 { margin: 8px 8px 8px; font-family: 'Inter Tight', var(--display); font-weight: 600; font-size: 20px; letter-spacing: -.025em; line-height: 1.2; }
.vis { position: relative; height: 230px; border-radius: 14px; background: #0d0d0c; border: 1px solid rgba(255,255,255,.06); overflow: hidden; padding: 16px 18px; font-size: 13px; }
.vh { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin-bottom: 14px; }
.vh i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #2f9e55; margin-right: 8px; vertical-align: 1px; animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .25; } }

.why { padding: 22vh 6vw 14vh; }
.isles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1180px; margin: 0 auto; }
.why.in .isl:nth-child(2) { transition-delay: .12s; } .why.in .isl:nth-child(3) { transition-delay: .24s; }

/* 01 money: a feed of new rounds rolling upward */
.v-raise .tick { height: 170px; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 18%, #000 78%, transparent); mask: linear-gradient(transparent, #000 18%, #000 78%, transparent); }
.v-raise .tk { animation: roll 9s linear infinite; }
.v-raise .tk p { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.v-raise .tk b { font-weight: 500; } .v-raise .tk span { color: var(--light); font-variant-numeric: tabular-nums; }
@keyframes roll { to { transform: translateY(-50%); } }

/* 02 hiring: job posts pop in one by one */
.v-hire .job { display: grid; grid-template-columns: 1fr auto; row-gap: 2px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; margin-bottom: 9px; background: rgba(255,255,255,.02);
  opacity: 0; transform: translateY(10px); animation: pop 7s infinite; }
.v-hire .job b { font-weight: 500; } .v-hire .job span { color: var(--mute); font-size: 12px; grid-column: 1; }
.v-hire .job em { grid-row: 1 / 3; grid-column: 2; align-self: center; font-style: normal; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #0a0a0a; background: var(--light); border-radius: 999px; padding: 4px 9px; }
.v-hire .j2 { animation-delay: .7s; } .v-hire .j3 { animation-delay: 1.4s; }
@keyframes pop { 0%, 4% { opacity: 0; transform: translateY(10px); } 12%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-6px); } }

/* 03 need: the day-one checklist ticks itself off */
.v-need .chk { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.06); color: var(--mute); animation: chkText 7s infinite; }
.v-need .chk u { width: 18px; height: 18px; border-radius: 6px; border: 1px solid rgba(255,255,255,.2); flex: none; position: relative; animation: chkBox 7s infinite; }
.v-need .chk u::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid #0a0a0a; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); animation: chkTick 7s infinite; }
.v-need .c2, .v-need .c2 u, .v-need .c2 u::after { animation-delay: .8s; } .v-need .c3, .v-need .c3 u, .v-need .c3 u::after { animation-delay: 1.6s; } .v-need .c4, .v-need .c4 u, .v-need .c4 u::after { animation-delay: 2.4s; }
@keyframes chkBox { 0%, 10% { background: transparent; border-color: rgba(255,255,255,.2); } 16%, 85% { background: var(--ink); border-color: var(--ink); } 95%, 100% { background: transparent; } }
@keyframes chkTick { 0%, 12% { transform: rotate(45deg) scale(0); } 18%, 85% { transform: rotate(45deg) scale(1); } 95%, 100% { transform: rotate(45deg) scale(0); } }
@keyframes chkText { 0%, 10% { color: var(--mute); } 16%, 85% { color: var(--ink); } 95%, 100% { color: var(--mute); } }

/* step by step: one line runs down through all four steps */
.flow2 { padding: 16vh 6vw 12vh; }
.rail { position: relative; max-width: 1100px; margin: 0 auto; display: grid; gap: 12vh; }
.rail::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(var(--line), rgba(255,255,255,.18) 50%, var(--line)); }
.step { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 5vw; align-items: center; padding-left: 64px; position: relative; }
.step::before { content: ""; position: absolute; left: 16px; top: 50%; width: 11px; height: 11px; border-radius: 50%; background: #050505; border: 1px solid rgba(255,255,255,.3); transform: translateY(-50%); transition: all .6s ease; }
.step.in::before { background: var(--light); border-color: var(--light); box-shadow: 0 0 0 6px rgba(242,164,75,.12), 0 0 22px rgba(242,164,75,.6); }
.st-copy .n { font-size: 12px; letter-spacing: .2em; color: var(--light); font-weight: 500; }
.st-copy h3 { margin-top: 12px; font-family: 'Inter Tight', var(--display); font-weight: 700; font-size: clamp(28px, 3vw, 42px); letter-spacing: -.04em; line-height: 1.05; }
.st-copy p { margin-top: 14px; color: var(--mute); font-size: 16px; line-height: 1.55; max-width: 380px; }
.step .vis { height: 290px; padding: 22px; }

/* 01 find: scanning bar, then hits land */
.v-scan .bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.04); color: var(--mute); position: relative; overflow: hidden; margin-bottom: 16px; }
.v-scan .bar .ic { width: 12px; height: 12px; border: 1.5px solid var(--mute); border-radius: 50%; }
.v-scan .bar u { position: absolute; left: 0; bottom: 0; height: 2px; width: 30%; background: var(--light); box-shadow: 0 0 12px var(--light); animation: scan 2.2s ease-in-out infinite; }
@keyframes scan { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
.v-scan .hit { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid rgba(255,255,255,.06); opacity: 0; animation: pop 8s infinite; }
.v-scan .hit i { width: 7px; height: 7px; border-radius: 50%; background: var(--light); box-shadow: 0 0 10px var(--light); }
.v-scan .hit b { font-weight: 500; } .v-scan .hit span { color: var(--ink); } .v-scan .hit em { font-style: normal; font-size: 11px; color: var(--mute); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.v-scan .h1 { animation-delay: .9s; } .v-scan .h2 { animation-delay: 1.7s; } .v-scan .h3 { animation-delay: 2.5s; }

/* 02 rate: the prospect rating circle fills, criteria tick in */
.v-rate { display: flex; align-items: center; gap: 34px; }
.v-rate .ring { position: relative; width: 170px; height: 170px; flex: none; }
.v-rate svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.v-rate circle { fill: none; stroke-width: 7; } .v-rate .bg { stroke: rgba(255,255,255,.07); }
.v-rate .fg { stroke: var(--light); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; filter: drop-shadow(0 0 6px rgba(242,164,75,.6)); animation: ring 7s cubic-bezier(.3,.7,.2,1) infinite; }
@keyframes ring { 0%, 6% { stroke-dashoffset: 327; } 30%, 86% { stroke-dashoffset: 20; } 96%, 100% { stroke-dashoffset: 327; } }
.v-rate .ring p { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.v-rate .ring b { font-family: 'Inter Tight', var(--display); font-size: 40px; font-weight: 700; letter-spacing: -.04em; }
.v-rate .ring span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.v-rate ul { list-style: none; display: grid; gap: 12px; }
.v-rate li { padding-left: 26px; position: relative; color: var(--mute); animation: chkText 7s infinite; }
.v-rate li::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 17px; height: 17px; border-radius: 50%; font-size: 10px; display: grid; place-items: center; background: rgba(47,158,85,.18); color: #4cc777; }
.v-rate .r1 { animation-delay: 1s; } .v-rate .r2 { animation-delay: 1.4s; } .v-rate .r3 { animation-delay: 1.8s; } .v-rate .r4 { animation-delay: 2.2s; }

/* 03 reach: the message writes itself, then it is approved and sent */
.v-reach .chips { display: flex; gap: 8px; margin-bottom: 16px; }
.v-reach .chips span { font-size: 12px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--mute); display: inline-flex; align-items: center; gap: 3px; }
.v-reach .chips .on { background: var(--ink); color: #0a0a0a; border-color: var(--ink); }
.v-reach .vn i { display: inline-block; width: 2px; height: 10px; background: var(--light); border-radius: 2px; animation: wave 1s ease-in-out infinite; margin-left: 2px; }
.v-reach .vn i:nth-child(2) { animation-delay: .15s; } .v-reach .vn i:nth-child(3) { animation-delay: .3s; } .v-reach .vn i:nth-child(4) { animation-delay: .45s; } .v-reach .vn i:nth-child(5) { animation-delay: .6s; }
@keyframes wave { 50% { transform: scaleY(.3); } }
.v-reach .to { color: var(--mute); font-size: 12.5px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: 16px; }
.v-reach .ln { height: 9px; border-radius: 5px; background: rgba(255,255,255,.14); margin-bottom: 12px; width: 0; animation: type 8s infinite; }
.v-reach .l1 { --w: 92%; } .v-reach .l2 { --w: 78%; animation-delay: .6s; } .v-reach .l3 { --w: 54%; animation-delay: 1.2s; }
@keyframes type { 0%, 6% { width: 0; } 22%, 88% { width: var(--w); } 96%, 100% { width: 0; } }
.v-reach .send { position: absolute; right: 22px; bottom: 22px; }
.v-reach .send span { display: inline-block; font-size: 13px; font-weight: 500; padding: 10px 18px; border-radius: 999px; }
.v-reach .send .a { background: var(--ink); color: #0a0a0a; animation: sendA 8s infinite; }
.v-reach .send .b { position: absolute; right: 0; top: 0; background: rgba(47,158,85,.18); color: #4cc777; opacity: 0; animation: sendB 8s infinite; }
.v-reach .send .b::before { content: "✓ "; }
@keyframes sendA { 0%, 46% { opacity: 1; transform: scale(1); } 50% { transform: scale(.94); } 54%, 100% { opacity: 0; } }
@keyframes sendB { 0%, 52% { opacity: 0; } 56%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* 04 book: the meeting drops into the week, then the toast */
.v-book .wk { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-bottom: 10px; text-align: center; }
.v-book .cal { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; height: 170px; }
.v-book .cal i { border-radius: 8px; background: repeating-linear-gradient(transparent 0 33px, rgba(255,255,255,.05) 33px 34px); border: 1px solid rgba(255,255,255,.05); }
.v-book .ev { position: absolute; left: calc(40% + 3px); width: calc(20% - 6px); top: 58px; height: 52px; border-radius: 8px; background: var(--ink); color: #0a0a0a; font-size: 11px; font-weight: 600; line-height: 1.3; padding: 7px 8px; animation: drop 7s cubic-bezier(.3,.7,.2,1) infinite; }
@keyframes drop { 0%, 8% { opacity: 0; transform: translateY(-30px) scale(.9); } 20%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.v-book .tst { position: absolute; right: 16px; top: 14px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; background: #1b1b1a; border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; opacity: 0; animation: tst 7s infinite; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.v-book .tst em { font-style: normal; font-size: 10px; font-weight: 700; background: var(--ink); color: #0a0a0a; border-radius: 5px; padding: 2px 5px; }
@keyframes tst { 0%, 26% { opacity: 0; transform: translateY(-8px); } 32%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }

/* why us: numbered rows, title left, one line right (SpaceFS style) */
.choose { padding: 16vh 6vw 10vh; }
.rows { list-style: none; max-width: 1100px; margin: 0 auto; border-top: 1px solid var(--line); }
.rows li { display: grid; grid-template-columns: 60px 1fr 1fr; gap: 24px; align-items: center; padding: 30px 4px; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1), background .3s; }
.choose.in .rows li { opacity: 1; transform: none; }
.choose.in .rows li:nth-child(2) { transition-delay: .08s; } .choose.in .rows li:nth-child(3) { transition-delay: .16s; } .choose.in .rows li:nth-child(4) { transition-delay: .24s; } .choose.in .rows li:nth-child(5) { transition-delay: .32s; }
.rows li:hover { background: rgba(255,255,255,.02); }
.rows b { font-size: 12px; letter-spacing: .16em; color: var(--mute); font-weight: 500; }
.rows h3 { font-family: 'Inter Tight', var(--display); font-weight: 600; font-size: clamp(22px, 2.3vw, 32px); letter-spacing: -.035em; }
.rows p { color: var(--mute); font-size: 15px; line-height: 1.5; }

/* who I am */
.who { padding: 16vh 6vw 6vh; }
.who-grid { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.05fr; gap: 6vw; align-items: center; }
.who-l .duo { margin-top: 18px; } .who-l .sub { margin-top: 22px; max-width: 460px; }
.who.in .who-r { opacity: 1; transform: none; }
.who-r { padding: 30px; }
.who-r .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.who-r .stats b { display: block; font-family: 'Inter Tight', var(--display); font-weight: 700; font-size: clamp(30px, 3vw, 44px); letter-spacing: -.045em; }
.who-r .stats p:first-child b { color: var(--light); text-shadow: 0 0 30px rgba(242,164,75,.35); }
.who-r .stats span { display: block; margin-top: 6px; color: var(--mute); font-size: 13px; line-height: 1.4; }
.who-r .facts { display: grid; gap: 18px; padding-top: 24px; }
.who-r .facts dt { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.who-r .facts dd { margin-top: 6px; font-size: 16px; line-height: 1.45; }

@media (max-width: 1000px) {
  .isles { grid-template-columns: 1fr; max-width: 520px; }
  .step { grid-template-columns: 1fr; gap: 24px; } .who-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .why, .flow2, .choose, .who { padding-left: 16px; padding-right: 16px; }
  .why { padding-top: 14vh; } .sec-top { margin-bottom: 40px; }
  .step { padding-left: 40px; } .rail::before { left: 11px; } .step::before { left: 6px; top: 12px; transform: none; }
  .step .vis { height: 270px; padding: 16px; } .v-rate { gap: 18px; } .v-rate .ring { width: 120px; height: 120px; } .v-rate .ring b { font-size: 30px; }
  .v-scan .hit { grid-template-columns: 10px 1fr auto; } .v-scan .hit em { display: none; }
  .rows li { grid-template-columns: 40px 1fr; } .rows li p { grid-column: 2; }
  .who-r { padding: 20px; } .who-r .stats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .vis *, .vis *::before, .vis *::after { animation: none !important; opacity: 1 !important; } }
/* v3: undo old rules that share these class names */
.v-reach .chips { margin-top: 0; justify-content: flex-start; flex-wrap: nowrap; }
.v-reach .chips span { font-family: var(--text); letter-spacing: 0; text-transform: none; padding: 6px 12px; transition: none; }
ol.rows { display: block; margin: 0 auto; padding: 0; font-size: inherit; gap: 0; }
.v-book .cal { border-left: 0; background: none; border-radius: 0; padding: 0; max-width: none; display: grid; gap: 8px; }
.v-book .cal b { font-size: 11px; font-weight: 600; }

/* ---------- v4 · "Why it works" as real white screens from the portal ---------- */
.wscenes { max-width: 1180px; margin: 0 auto; display: grid; gap: clamp(90px, 12vw, 160px); }
.wscene { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center;
  opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.wscene.in { opacity: 1; transform: none; }
.wscene.flip .ws-copy { order: 2; }
.ws-copy .k { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.ws-copy h3 { margin-top: 14px; font-family: 'Inter Tight', var(--display); font-weight: 700; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.035em; line-height: 1.05; }
.ws-copy p:last-child { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--mute); max-width: 380px; }

.win { --t: #17171a; --m: #6e6e73; --l: #e9e8e4; --soft: #f6f5f2; --ok: #2f9e55; --hot: #d9822b;
  border-radius: 14px; overflow: hidden; background: #fff; color: var(--t); font-family: var(--text); font-size: 12.5px; text-align: left;
  box-shadow: 0 40px 120px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.1), 0 0 100px rgba(255,255,255,.05); }
.win-bar { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 13px; background: #f1f0ed; border-bottom: 1px solid var(--l); }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; } .win-bar i:nth-child(1) { background: #ee6a5f; } .win-bar i:nth-child(2) { background: #f5bd4f; } .win-bar i:nth-child(3) { background: #61c454; }
.win-bar span { flex: 1; text-align: center; font-size: 11.5px; font-weight: 500; color: var(--m); margin-right: 36px; }
.win-body { padding: 18px 20px 20px; height: 380px; overflow: hidden; }
.win-body.split { display: grid; grid-template-columns: 210px 1fr; gap: 18px; }
.win u { text-decoration: none; }

/* 01 · funding table */
.w-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.w-tabs { display: flex; gap: 4px; background: var(--soft); border: 1px solid var(--l); border-radius: 9px; padding: 3px; }
.w-tabs b { font-weight: 500; padding: 5px 11px; border-radius: 6px; color: var(--m); }
.w-tabs b.on { background: #fff; color: var(--t); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.w-filt { display: flex; gap: 6px; } .w-filt span { border: 1px solid var(--l); border-radius: 999px; padding: 4px 10px; color: #45454a; font-size: 11.5px; }
.w-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.w-stats p { border: 1px solid var(--l); border-radius: 10px; padding: 11px 13px; display: flex; flex-direction: column; gap: 3px; }
.w-stats small { color: var(--m); font-size: 11px; } .w-stats b { font-family: 'Inter Tight', var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.03em; }
.w-stats .live { display: flex; align-items: center; gap: 8px; }
.w-stats .live i, .w-lh em::before { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(47,158,85,.15); animation: blink 1.6s infinite; }
.w-table { border: 1px solid var(--l); border-radius: 10px; overflow: hidden; }
.w-table p { display: grid; grid-template-columns: 1.7fr 1.1fr .9fr .9fr .8fr 1fr; gap: 10px; align-items: center; padding: 9px 13px; }
.w-table .th { background: var(--soft); color: var(--m); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--l); }
.w-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.w-table .tr { border-bottom: 1px solid var(--l); color: #45454a; }
.w-table .tr span:first-child { display: flex; align-items: center; gap: 9px; color: var(--t); font-weight: 500; white-space: nowrap; }
.w-table .tr .r { color: var(--t); font-weight: 500; }
.w-table u, .w-co u { width: 22px; height: 22px; border-radius: 6px; background: #17171a; color: #fff; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; flex: none; }
.w-table .src { font-size: 11px; color: var(--m); }
.w-rows { animation: wrows 8s cubic-bezier(.2,.7,.2,1) infinite; }
.w-table .fresh { animation: wfresh 8s ease infinite; }
@keyframes wrows { 0%, 8% { transform: translateY(-41px); } 20%, 100% { transform: none; } }
@keyframes wfresh { 0%, 8% { opacity: 0; background: #fff; } 20% { opacity: 1; background: #fdf1e3; } 60% { background: #fdf1e3; } 80%, 100% { background: #fff; } }

/* 02 · hiring */
.w-lh { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--m); margin-bottom: 10px; }
.w-lh em { font-style: normal; display: flex; align-items: center; gap: 6px; letter-spacing: 0; text-transform: none; color: var(--ok); font-weight: 500; }
.w-lh em::before { content: ""; }
.w-list .job { display: flex; flex-direction: column; gap: 2px; padding: 10px 11px; border-radius: 9px; border: 1px solid transparent; margin-bottom: 4px; }
.w-list .job b { font-weight: 500; } .w-list .job span { font-size: 11px; color: var(--m); }
.w-list .job.on { background: var(--soft); border-color: var(--l); }
.w-list .job:not(.on) { animation: wjob 6s ease infinite; } .w-list .job:nth-child(4) { animation-delay: .3s; } .w-list .job:nth-child(5) { animation-delay: .6s; }
@keyframes wjob { 0% { opacity: 0; transform: translateX(-8px); } 10%, 100% { opacity: 1; transform: none; } }
.w-detail { border-left: 1px solid var(--l); padding-left: 18px; display: flex; flex-direction: column; gap: 14px; }
.w-co { display: flex; gap: 10px; align-items: center; } .w-co u { width: 34px; height: 34px; border-radius: 9px; font-size: 14px; }
.w-co span { display: flex; flex-direction: column; } .w-co b { font-size: 14px; } .w-co small { color: var(--m); font-size: 11.5px; }
.w-role { font-family: 'Inter Tight', var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.03em; display: flex; flex-direction: column; gap: 3px; }
.w-role em { font-style: normal; font-family: var(--text); font-size: 11.5px; font-weight: 400; letter-spacing: 0; color: var(--m); }
.w-grow { border: 1px solid var(--l); border-radius: 10px; padding: 12px 14px; }
.w-gh { display: flex; align-items: baseline; gap: 10px; } .w-gh small { color: var(--m); font-size: 11px; flex: 1; }
.w-gh b { font-family: 'Inter Tight', var(--display); font-size: 18px; letter-spacing: -.02em; } .w-gh em { font-style: normal; font-size: 11px; color: var(--ok); font-weight: 500; }
.bars { height: 70px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; margin-top: 10px; }
.bars i { display: block; height: calc(var(--h) * 100%); background: #d9d7d1; border-radius: 4px 4px 0 0; transform-origin: bottom; animation: wbar 6s cubic-bezier(.2,.7,.2,1) infinite; }
.bars i:last-child { background: #17171a; }
.bars i:nth-child(2) { animation-delay: .08s; } .bars i:nth-child(3) { animation-delay: .16s; } .bars i:nth-child(4) { animation-delay: .24s; } .bars i:nth-child(5) { animation-delay: .32s; } .bars i:nth-child(6) { animation-delay: .4s; }
@keyframes wbar { 0% { transform: scaleY(0); } 14%, 100% { transform: scaleY(1); } }
.months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 6px; font-size: 10px; color: var(--m); text-align: center; }
.w-tags { display: flex; flex-wrap: wrap; gap: 6px; } .w-tags span { border: 1px solid var(--l); border-radius: 999px; padding: 4px 10px; font-size: 11px; color: #45454a; }
.w-tags .hot { border-color: #f1c79a; background: #fdf1e3; color: #9a5512; font-weight: 500; }

/* 03 · the need */
.win-body.need { grid-template-columns: 1fr 230px; }
.w-post { font-size: 13px; line-height: 1.7; color: #45454a; display: flex; flex-direction: column; gap: 10px; }
.w-ph { font-family: 'Inter Tight', var(--display); font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--t); line-height: 1.2; }
.w-post mark { background: linear-gradient(#fbe3c6, #fbe3c6) left / 0 100% no-repeat; color: inherit; border-radius: 3px; padding: 0 2px; animation: wmark 8s ease infinite; }
.w-post .m2 { animation-delay: .9s; } .w-post .m3 { animation-delay: 1.8s; } .w-post .m4 { animation-delay: 2.7s; }
@keyframes wmark { 0%, 4% { background-size: 0 100%; color: inherit; } 14%, 88% { background-size: 100% 100%; color: #17171a; } 100% { background-size: 100% 100%; } }
.w-needs { border-left: 1px solid var(--l); padding-left: 18px; display: flex; flex-direction: column; }
.nd { display: flex; gap: 11px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--l); opacity: .35; animation: wnd 8s ease infinite; }
.nd u { width: 18px; height: 18px; border-radius: 6px; border: 1px solid #cfcdc7; flex: none; margin-top: 1px; position: relative; animation: wndbox 8s ease infinite; }
.nd u::after { content: ""; position: absolute; left: 5.5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.nd span { display: flex; flex-direction: column; } .nd b { font-weight: 500; } .nd small { font-size: 11px; color: var(--m); }
.nd.n2, .nd.n2 u { animation-delay: .9s; } .nd.n3, .nd.n3 u { animation-delay: 1.8s; } .nd.n4, .nd.n4 u { animation-delay: 2.7s; }
@keyframes wnd { 0%, 6% { opacity: .35; } 16%, 90% { opacity: 1; } 100% { opacity: .35; } }
@keyframes wndbox { 0%, 6% { background: #fff; border-color: #cfcdc7; } 16%, 90% { background: var(--ok); border-color: var(--ok); } 100% { background: #fff; } }
.w-match { margin-top: 14px; font-size: 11.5px; font-weight: 500; color: var(--ok); background: rgba(47,158,85,.08); border-radius: 8px; padding: 8px 10px; text-align: center; animation: wnd 8s ease 3.4s infinite; }

@media (max-width: 1000px) {
  .wscene, .wscene.flip { grid-template-columns: 1fr; } .wscene.flip .ws-copy { order: 0; }
  .ws-copy p:last-child { max-width: 560px; }
}
@media (max-width: 760px) {
  .win-body { height: auto; padding: 14px; } .win-body.split, .win-body.need { grid-template-columns: 1fr; }
  .w-detail, .w-needs { border-left: 0; padding-left: 0; border-top: 1px solid var(--l); padding-top: 14px; }
  .w-list .job:nth-child(n+4) { display: none; }
  .w-filt { display: none; }
  .w-table p { grid-template-columns: 1.6fr .9fr .9fr; } .w-table p > :nth-child(2), .w-table p > :nth-child(5), .w-table p > :nth-child(6) { display: none; }
  .w-stats b { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .win *, .win *::after { animation: none !important; } .nd, .w-match { opacity: 1; } .w-post mark { background-size: 100% 100%; } }

.w-table .th { position: relative; z-index: 1; }

/* ---------- v4 · calm load (one block fade) was removed 11 Nov: the soft letter-by-letter title is back,
   now started by one signal (.go) so it can't float or arrive all at once on a slow refresh ---------- */
@keyframes heroIn { from { opacity: 0; transform: translateY(14px); } }
.tm { font-family: var(--text); font-weight: 500; font-size: .22em; letter-spacing: .04em; vertical-align: top; position: relative; top: .35em; margin-left: .12em; opacity: .7; font-stretch: 100%; }
.hero-copy .wordmark .w:last-child::after { content: "TM"; font-family: var(--text); font-weight: 500; font-size: .16em; letter-spacing: .04em; vertical-align: top; position: relative; top: .5em; margin-left: .15em; opacity: .7; font-stretch: 100%; text-shadow: none; }
.brand .tm, .site-footer .tm { font-size: .5em; top: .1em; }
.duo .tm { font-size: .3em; top: .45em; }
@media (prefers-reduced-motion: reduce) { .hero-copy { animation: none; } }

/* ---------- v5 · team-size line chart ---------- */
.tline { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.tline .gl { stroke: #eceae5; stroke-width: 1; } .tline .gl.base { stroke: #d9d7d1; }
.tline .ar { fill: rgba(23,23,26,.05); animation: tarea 6s ease infinite; }
.tline .ln { fill: none; stroke: #17171a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: tdraw 6s cubic-bezier(.4,.1,.2,1) infinite; }
.tline .pt { fill: #fff; stroke: #17171a; stroke-width: 1.5; opacity: 0; animation: tpt 6s ease infinite; }
.tline .p1 { animation-delay: .2s; } .tline .p2 { animation-delay: .4s; } .tline .p3 { animation-delay: .6s; } .tline .p4 { animation-delay: .8s; }
.tline .end { fill: #2f9e55; stroke: #fff; stroke-width: 2; opacity: 0; animation: tend 6s ease infinite; }
@keyframes tdraw { 0% { stroke-dashoffset: 1; } 22%, 100% { stroke-dashoffset: 0; } }
@keyframes tarea { 0%, 12% { opacity: 0; } 26%, 100% { opacity: 1; } }
@keyframes tpt { 0%, 4% { opacity: 0; } 12%, 100% { opacity: 1; } }
@keyframes tend { 0%, 20% { opacity: 0; transform: scale(.4); } 28%, 100% { opacity: 1; transform: none; } }
.tline .end { transform-box: fill-box; transform-origin: center; }
.months { display: flex; justify-content: space-between; padding: 0 2px; }
@media (prefers-reduced-motion: reduce) { .tline .ln { stroke-dashoffset: 0; } .tline .pt, .tline .end { opacity: 1; } }

/* ---------- v5 · footer fades from black to white as it scrolls in ---------- */
.site-footer { --f: 0; --fp: calc(var(--f) * 100%);
  background: color-mix(in srgb, #f4f4f2 var(--fp), #050505); color: color-mix(in srgb, #111110 var(--fp), #f4f4f2);
  border-top: 0; margin-top: 0; padding-top: 110px; }
.site-footer .cols span, .site-footer .cols a { color: color-mix(in srgb, #6b6a66 var(--fp), #8a8a86); }
.site-footer .cols a:hover { color: color-mix(in srgb, #000 var(--fp), #f4f4f2); }
.site-footer .legal { color: color-mix(in srgb, #8d8b86 var(--fp), #4a4a47); border-top-color: color-mix(in srgb, rgba(0,0,0,.1) var(--fp), rgba(255,255,255,.09)); }
.fghost .s1 { fill: color-mix(in srgb, #c9c7c1 var(--fp), #000); }
.fghost .s2 { fill: color-mix(in srgb, #ffffff var(--fp), #232321); }
.fghost .base { fill: color-mix(in srgb, #e7e6e2 var(--fp), #111110); }
.fghost .st0 { stop-color: color-mix(in srgb, #0a0a0a var(--fp), #ffffff); }
.fghost .st1 { stop-color: color-mix(in srgb, #2a2622 var(--fp), #fff4e4); }
.fghost .st2, .fghost .st3, .fghost .st4 { stop-color: color-mix(in srgb, #d9822b var(--fp), #f2a44b); }
body.foot-lit nav .brand, body.foot-lit nav .brand span, body.foot-lit nav .nav-link { color: #111110; }
body.foot-lit nav .pill.solid { background: #111110; color: #f4f4f2; border-color: #111110; }
body.foot-lit nav::before, body.foot-lit nav { background: transparent; }
nav, nav .brand, nav .nav-link, nav .pill { transition: color .4s, background .4s, border-color .4s; }
.wscene.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
@media (max-width: 1000px) { .wscene.flip { grid-template-columns: 1fr; } }

/* ---------- v6 · step-by-step as real white portal screens ---------- */
.step { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.step .win { opacity: 0; transform: translateY(30px); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.step.in .win { opacity: 1; transform: none; }
.step .win-body { height: 360px; }
.win .sc-lh, .win .w-lh { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--m); margin-bottom: 9px; }
.win .sc-lh em { font-style: normal; letter-spacing: 0; text-transform: none; color: var(--t); font-weight: 600; }

/* 01 · daily scan */
.sc-top { display: flex; justify-content: space-between; align-items: center; }
.sc-top p { display: flex; flex-direction: column; } .sc-top b { font-size: 15px; } .sc-top small { color: var(--m); font-size: 11.5px; }
.sc-st { font-style: normal; display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 500; color: var(--ok); background: rgba(47,158,85,.08); padding: 5px 10px; border-radius: 999px; }
.sc-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: blink 1.4s infinite; }
.sc-prog { height: 3px; background: var(--l); border-radius: 3px; margin: 14px 0 14px; overflow: hidden; }
.sc-prog i { display: block; height: 100%; background: #17171a; border-radius: 3px; transform-origin: left; animation: scprog 7s cubic-bezier(.4,.1,.2,1) infinite; }
@keyframes scprog { 0% { transform: scaleX(.04); } 45%, 100% { transform: scaleX(1); } }
.sc-src { border: 1px solid var(--l); border-radius: 10px; margin-bottom: 14px; }
.sc-src p { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 9px 12px; }
.sc-src p + p { border-top: 1px solid var(--l); }
.sc-src span { display: flex; flex-direction: column; } .sc-src b { font-weight: 500; } .sc-src small { color: var(--m); font-size: 11px; }
.sc-src em { font-style: normal; color: var(--m); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.sc-src strong { font-weight: 600; font-size: 11.5px; min-width: 56px; text-align: right; animation: scm 7s ease infinite; }
.sc-src p:nth-child(2) strong { animation-delay: .5s; } .sc-src p:nth-child(3) strong { animation-delay: 1s; }
@keyframes scm { 0%, 15% { opacity: 0; } 25%, 100% { opacity: 1; } }
.sc-feed p { display: grid; grid-template-columns: 22px auto 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--l); animation: scf 7s ease infinite; }
.sc-feed b { font-weight: 500; } .sc-feed span { color: var(--m); font-size: 11.5px; }
.sc-feed em { font-style: normal; font-size: 10.5px; color: #45454a; border: 1px solid var(--l); border-radius: 6px; padding: 2px 7px; }
.sc-feed u, .rt .w-co u, .bk-reply u { width: 22px; height: 22px; border-radius: 6px; background: #17171a; color: #fff; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; text-decoration: none; }
.sc-feed .f2 { animation-delay: .5s; } .sc-feed .f3 { animation-delay: 1s; }
@keyframes scf { 0%, 30% { opacity: 0; transform: translateY(6px); } 40%, 100% { opacity: 1; transform: none; } }

/* 02 · the score */
.win-body.rt { display: grid; grid-template-columns: 200px 1fr; gap: 20px; }
.rt-l { display: flex; flex-direction: column; gap: 16px; }
.rt .w-co u { width: 34px; height: 34px; border-radius: 9px; font-size: 14px; }
.rt-ring { position: relative; width: 150px; height: 150px; align-self: center; margin-top: 6px; }
.rt-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rt-ring circle { fill: none; stroke-width: 7; } .rt-ring .bg { stroke: var(--l); }
.rt-ring .fg { stroke: #17171a; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; animation: rtring 7s cubic-bezier(.3,.1,.2,1) infinite; }
@keyframes rtring { 0%, 6% { stroke-dashoffset: 327; } 40%, 100% { stroke-dashoffset: 19.6; } }
.rt-ring p { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rt-ring b { font-family: 'Inter Tight', var(--display); font-size: 34px; font-weight: 700; letter-spacing: -.04em; } .rt-ring b small { font-size: 16px; }
.rt-ring span { font-size: 11px; font-weight: 500; color: var(--ok); }
.rt-proof { display: flex; gap: 6px; justify-content: center; } .rt-proof span { border: 1px solid var(--l); border-radius: 999px; padding: 4px 10px; font-size: 11px; color: #45454a; }
.rt-r { border-left: 1px solid var(--l); padding-left: 20px; }
.rs { display: grid; grid-template-columns: 1fr auto; row-gap: 6px; padding: 8px 0 9px; border-bottom: 1px solid var(--l); animation: scm 7s ease infinite; }
.rs span { display: flex; flex-direction: column; } .rs b { font-weight: 500; } .rs small { color: var(--m); font-size: 11px; }
.rs em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; align-self: center; }
.rs i { grid-column: 1 / -1; height: 3px; background: var(--l); border-radius: 3px; position: relative; overflow: hidden; }
.rs i::after { content: ""; position: absolute; inset: 0; width: calc(var(--w) * 100%); background: #17171a; border-radius: 3px; transform-origin: left; animation: rsbar 7s cubic-bezier(.3,.1,.2,1) infinite; animation-delay: inherit; }
@keyframes rsbar { 0%, 15% { transform: scaleX(0); } 32%, 100% { transform: scaleX(1); } }
.rs.s2 { animation-delay: .25s; } .rs.s3 { animation-delay: .5s; } .rs.s4 { animation-delay: .75s; } .rs.s5 { animation-delay: 1s; }

/* 03 · the message */
.rc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.rc-top em { font-style: normal; font-size: 11px; color: #9a5512; background: #fdf1e3; border: 1px solid #f1c79a; padding: 4px 10px; border-radius: 999px; }
.rc-f { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--l); }
.rc-f small { width: 56px; color: var(--m); font-size: 11.5px; }
.rc-body { padding: 14px 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.6; color: #2c2c30; }
.rc-body p { clip-path: inset(0 100% 0 0); animation: rctype 9s steps(40, end) infinite; }
.rc-body .t2 { animation-name: rctype2; } .rc-body .t3 { animation-name: rctype3; }
@keyframes rctype { 0% { clip-path: inset(0 100% 0 0); } 14%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes rctype2 { 0%, 14% { clip-path: inset(0 100% 0 0); } 34%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes rctype3 { 0%, 34% { clip-path: inset(0 100% 0 0); } 42%, 100% { clip-path: inset(0 0 0 0); } }
.rc-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--l); padding-top: 12px; }
.rc-foot > span { font-size: 11.5px; color: var(--m); }
.rc-foot .send { position: relative; height: 32px; width: 140px; }
.rc-foot .send span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 8px; font-size: 12.5px; font-weight: 500; }
.rc-foot .send .a { background: #17171a; color: #fff; animation: rcA 9s ease infinite; }
.rc-foot .send .b { background: rgba(47,158,85,.1); color: var(--ok); opacity: 0; animation: rcB 9s ease infinite; }
@keyframes rcA { 0%, 52% { opacity: 1; transform: none; } 54% { transform: scale(.96); } 58%, 100% { opacity: 0; } }
@keyframes rcB { 0%, 56% { opacity: 0; } 62%, 94% { opacity: 1; } 100% { opacity: 0; } }

/* 04 · the meeting */
.win-body.bk { position: relative; }
.bk-reply { display: grid; grid-template-columns: 22px 1fr auto; gap: 11px; align-items: center; border: 1px solid var(--l); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; animation: scf 8s ease infinite; animation-delay: -2.4s; }
.bk-reply span { display: flex; flex-direction: column; } .bk-reply b { font-weight: 500; } .bk-reply small { color: var(--m); font-size: 11.5px; }
.bk-reply em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--ok); background: rgba(47,158,85,.08); padding: 4px 10px; border-radius: 999px; }
.bk-cal { border: 1px solid var(--l); border-radius: 10px; overflow: hidden; }
.bk-h, .bk-g { display: grid; grid-template-columns: 48px repeat(5, 1fr); }
.bk-h span { padding: 7px 8px; font-size: 11px; color: var(--m); border-left: 1px solid var(--l); } .bk-h span:first-child { border-left: 0; }
.bk-h .today { color: var(--t); font-weight: 600; }
.bk-h { border-bottom: 1px solid var(--l); background: var(--soft); }
.bk-g { --row: 33px; height: calc(var(--row) * 6); }
.bk-t { display: grid; grid-template-rows: repeat(6, var(--row)); } .bk-t span { font-size: 10px; color: var(--m); padding: 3px 6px; text-align: right; }
.bk-d { position: relative; border-left: 1px solid var(--l); background: repeating-linear-gradient(transparent 0 calc(var(--row) - 1px), var(--l) calc(var(--row) - 1px) var(--row)); }
.bk-d:nth-child(4) { background-color: #fcfbf9; }
.ev { position: absolute; left: 3px; right: 3px; top: calc(var(--r) * var(--row) + 2px); height: calc(var(--h) * var(--row) - 4px); border-radius: 6px; font-style: normal; font-size: 10.5px; padding: 4px 6px; overflow: hidden; line-height: 1.3; }
.ev.old { background: #eeede9; color: #6e6e73; }
.ev.new { background: #17171a; color: #e6e5e1; display: flex; flex-direction: column; animation: bkdrop 8s cubic-bezier(.2,.8,.2,1) infinite; }
.ev.new b { color: #fff; font-weight: 600; }
@keyframes bkdrop { 0%, 22% { opacity: 0; transform: translateY(-14px) scale(.96); } 30%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.bk-toast { position: absolute; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 1px; background: #fff; border: 1px solid var(--l); border-left: 3px solid var(--ok); border-radius: 10px; padding: 10px 14px; box-shadow: 0 12px 30px rgba(0,0,0,.12); animation: bktoast 8s ease infinite; }
.bk-toast b { font-weight: 600; } .bk-toast span { font-size: 11.5px; color: var(--m); }
@keyframes bktoast { 0%, 32% { opacity: 0; transform: translateY(10px); } 38%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

@media (max-width: 1000px) { .step { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 760px) {
  .step .win-body { height: auto; } .win-body.rt { grid-template-columns: 1fr; } .rt-r { border-left: 0; padding-left: 0; }
  .sc-src em { display: none; } .sc-src p { grid-template-columns: 1fr auto; }
  .rc-top em { display: none; } .bk-h, .bk-g { grid-template-columns: 38px repeat(5, 1fr); } .ev { font-size: 9px; }
  .bk-toast { position: static; margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .rc-body p { clip-path: none; } .rt-ring .fg { stroke-dashoffset: 19.6; } }

/* ---------- v6 · "Why IT companies choose" as a bento of white cards ---------- */
.bento { --t: #17171a; --m: #6e6e73; --l: #e9e8e4; --soft: #f6f5f2; --ok: #2f9e55;
  max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.bc { grid-column: span 2; background: #fff; color: var(--t); border-radius: 20px; padding: 14px 14px 26px; display: flex; flex-direction: column; text-align: left;
  box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
  opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.bc.b-alone, .bc.b-proof { grid-column: span 3; }
.choose.in .bc { opacity: 1; transform: none; }
.choose.in .bc:nth-child(2) { transition-delay: .08s; } .choose.in .bc:nth-child(3) { transition-delay: .16s; } .choose.in .bc:nth-child(4) { transition-delay: .24s; } .choose.in .bc:nth-child(5) { transition-delay: .32s; }
.bv { height: 210px; border-radius: 12px; background: var(--soft); border: 1px solid var(--l); padding: 18px; overflow: hidden; position: relative; font-size: 12.5px; display: flex; flex-direction: column; justify-content: center; }
.bc .k { margin: 20px 10px 0; font-size: 11px; letter-spacing: .2em; color: var(--m); font-weight: 500; }
.bc h3 { margin: 6px 10px 0; font-family: 'Inter Tight', var(--display); font-weight: 700; font-size: 24px; letter-spacing: -.035em; line-height: 1.1; }
.bc .d { margin: 8px 10px 0; font-size: 14px; line-height: 1.5; color: var(--m); max-width: 420px; }
.bc u { text-decoration: none; }

/* 01 · yours alone */
.al-lead { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--l); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.al-lead u { width: 30px; height: 30px; border-radius: 8px; background: var(--t); color: #fff; display: grid; place-items: center; font-weight: 600; }
.al-lead span { display: flex; flex-direction: column; } .al-lead b { font-size: 13.5px; } .al-lead small { color: var(--m); font-size: 11.5px; }
.al-firms { display: grid; gap: 6px; }
.al-firms p { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 8px; color: #b3b1ab; border: 1px dashed #dcdad4; animation: alfade 6s ease infinite; }
.al-firms p b { font-weight: 500; } .al-firms em { font-style: normal; font-size: 11px; }
.al-firms .mine { background: var(--t); color: #fff; border: 1px solid var(--t); animation: alyou 6s ease infinite; }
.al-firms .mine em { display: flex; align-items: center; gap: 6px; color: #fff; font-weight: 500; }
.al-firms svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
@keyframes alyou { 0%, 10% { transform: scale(.97); opacity: .5; } 22%, 100% { transform: none; opacity: 1; } }
@keyframes alfade { 0%, 18% { opacity: 1; } 30%, 100% { opacity: .45; } }

/* 02 · proof */
.fd { background: #fff; border: 1px solid var(--l); border-radius: 10px; padding: 12px 14px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11.5px; }
.fd-h { display: flex; gap: 10px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--l); margin-bottom: 4px; font-family: var(--text); }
.fd-h b { font-size: 13px; letter-spacing: .04em; } .fd-h span { color: var(--m); font-size: 11.5px; flex: 1; } .fd-h em { font-style: normal; font-size: 11px; color: var(--m); }
.fd-r { display: grid; grid-template-columns: 140px 1fr; padding: 5px 0; } .fd-r small { color: var(--m); font-size: 11px; }
.fd mark { background: linear-gradient(#fbe3c6, #fbe3c6) left / 0 100% no-repeat; color: inherit; padding: 1px 3px; border-radius: 3px; font-weight: 600; animation: wmark 6s ease infinite; }

/* 03 · pay after results */
.py { list-style: none; position: relative; display: grid; gap: 18px; padding-left: 4px; }
.py::before { content: ""; position: absolute; left: 10px; top: 10px; bottom: 10px; width: 2px; background: var(--l); }
.py::after { content: ""; position: absolute; left: 10px; top: 10px; width: 2px; height: calc(100% - 20px); background: var(--t); transform-origin: top; animation: pyline 7s ease infinite; }
@keyframes pyline { 0%, 8% { transform: scaleY(0); } 50%, 100% { transform: scaleY(1); } }
.py li { display: flex; gap: 14px; align-items: center; position: relative; z-index: 1; }
.py i { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #cfcdc7; flex: none; animation: pydot 7s ease infinite; }
.py .q2 i { animation-delay: 1.5s; } .py .q3 i { animation-delay: 3s; }
@keyframes pydot { 0%, 4% { background: #fff; border-color: #cfcdc7; } 10%, 92% { background: var(--t); border-color: var(--t); } 100% { background: #fff; } }
.py .q3 i { animation-name: pydot3; }
@keyframes pydot3 { 0%, 4% { background: #fff; border-color: #cfcdc7; box-shadow: none; } 10%, 92% { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 0 4px rgba(47,158,85,.15); } 100% { background: #fff; } }
.py span { display: flex; flex-direction: column; } .py b { font-weight: 500; font-size: 13px; } .py small { font-size: 11px; color: var(--m); }

/* 04 · done for you */
.dn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dn > div { background: #fff; border: 1px solid var(--l); border-radius: 10px; padding: 10px 12px; }
.dn .me { align-self: start; }
.dn-h { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--m); margin-bottom: 6px; }
.dn .t { display: flex; gap: 9px; align-items: center; padding: 5px 0; font-weight: 500; }
.dn .t u { width: 16px; height: 16px; border-radius: 5px; border: 1px solid #cfcdc7; position: relative; flex: none; animation: wndbox 7s ease infinite; }
.dn .t u::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dn .t2 u { animation-delay: .5s; } .dn .t3 u { animation-delay: 1s; } .dn .t4 u { animation-delay: 1.5s; } .dn .t5 u { animation-delay: 2.4s; }

/* 05 · linkedin */
.lt { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: #fff; border: 1px solid var(--l); border-radius: 10px; padding: 3px; margin-bottom: 14px; font-size: 11.5px; font-weight: 500; }
.lt span { position: relative; z-index: 1; text-align: center; padding: 7px 4px; color: var(--m); animation: ltc 8s ease infinite; }
.lt span:nth-child(2) { animation-name: ltc2; }
.lt i { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); background: var(--t); border-radius: 7px; animation: ltk 8s cubic-bezier(.6,0,.2,1) infinite; }
@keyframes ltk { 0%, 42% { transform: none; } 50%, 92% { transform: translateX(100%); } 100% { transform: none; } }
@keyframes ltc { 0%, 42% { color: #fff; } 50%, 92% { color: var(--m); } 100% { color: #fff; } }
@keyframes ltc2 { 0%, 42% { color: var(--m); } 50%, 92% { color: #fff; } 100% { color: var(--m); } }
.lm { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--l); border-radius: 10px; padding: 10px 12px; position: relative; }
.lm p { display: flex; flex-direction: column; } .lm b { font-weight: 500; } .lm small { color: var(--m); font-size: 11px; }
.lm em { font-style: normal; font-size: 11.5px; font-weight: 500; padding: 5px 11px; border-radius: 7px; white-space: nowrap; }
.lm .auto { color: var(--ok); background: rgba(47,158,85,.08); animation: lma 8s ease infinite; }
.lm .ok { position: absolute; right: 12px; background: var(--t); color: #fff; animation: lmb 8s ease infinite; }
@keyframes lma { 0%, 42% { opacity: 1; } 48%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes lmb { 0%, 46% { opacity: 0; } 52%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }

@media (max-width: 1000px) { .bento { grid-template-columns: 1fr 1fr; } .bc, .bc.b-alone, .bc.b-proof { grid-column: span 1; } .bc.b-li { grid-column: span 2; } }
@media (max-width: 760px) { .bento { grid-template-columns: 1fr; } .bc, .bc.b-alone, .bc.b-proof, .bc.b-li { grid-column: span 1; } .fd-r { grid-template-columns: 120px 1fr; } }
@media (prefers-reduced-motion: reduce) { .bento *, .bento *::before, .bento *::after { animation: none !important; } }

/* ---------- v6 · footer: black fades into gray; text, wordmark and glow back to the original colours ---------- */
.site-footer { background: color-mix(in srgb, #1d1d1b var(--fp), #050505); color: #f4f4f2; }
.site-footer .cols span, .site-footer .cols a { color: #8a8a86; }
.site-footer .cols a:hover { color: #f4f4f2; }
.site-footer .legal { color: #6a6a66; border-top-color: rgba(255,255,255,.09); }
.fghost .s1 { fill: color-mix(in srgb, #0d0d0c var(--fp), #000); }
.fghost .s2 { fill: color-mix(in srgb, #2b2b29 var(--fp), #232321); }
.fghost .base { fill: color-mix(in srgb, #181817 var(--fp), #111110); }
.fghost .st0 { stop-color: #ffffff; } .fghost .st1 { stop-color: #fff4e4; } .fghost .st2 { stop-color: #f2a44b; } .fghost .st3, .fghost .st4 { stop-color: #b86a24; }

/* form: honeypot hidden from people, error line */
.access-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.access-form .fail { display: none; margin-top: 12px; font-size: 14px; color: #f2a44b; }
.access-form .fail a { color: inherit; }
.access-form.failed .fail { display: block; }

/* hero intro waits for the start signal (.go from site.js), so every piece runs on the same clock on any connection */
.js .hero-copy:not(.go) .wordmark { opacity: 0; }
.js .hero-copy:not(.go) .rise, .js .hero-copy:not(.go) .wordmark i { animation-play-state: paused; }
/* the TM arrives with the outer letters, never alone before the name */
.hero-copy .wordmark .w:last-child::after { animation: tmIn 1.2s cubic-bezier(.2,.7,.2,1) .7s backwards; }
@keyframes tmIn { from { opacity: 0; filter: blur(8px); } }
.js .hero-copy:not(.go) .wordmark .w:last-child::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hero-copy .wordmark .w:last-child::after { animation: none; } }

/* 11 Nov: "No setup fee" is a selling point, so it reads first: a white pill with a tick.
   The old $1,500 stays readable next to it, crossed out. Monthly shows a plain "Setup $1,500". */
.setup { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 30px; }
.setup s { margin-right: 0; color: #9a968e; text-decoration-color: rgba(244,244,242,.6); }
.pricing[data-plan="6"] .setup span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 11px; border-radius: 999px;
  background: #f4f4f2; color: #0b0b0b; font-weight: 600; letter-spacing: .08em; box-shadow: 0 0 18px rgba(255,255,255,.12); }
.pricing[data-plan="6"] .setup span::before { content: ""; width: 9px; height: 5px; border: solid currentColor; border-width: 0 0 1.8px 1.8px; transform: translateY(-1px) rotate(-45deg); }
.pricing[data-plan="m"] .setup s { display: none; }
.pricing[data-plan="m"] .setup span { color: #b9b5ad; }
.who-r .stats.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .who-r .stats.two { grid-template-columns: 1fr 1fr; } }

/* 11 Nov · phones: the demo keeps the full laptop layout (sidebar and all), shrunk to fit the screen,
   instead of a squeezed phone layout. site.js wraps the Mac in .mac-fit and sets the scale (--s). */
@media (max-width: 760px) {
  .demo .mac-fit { position: relative; width: 100%; overflow: hidden; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
  .demo .mac.desk { position: absolute; left: 0; top: 0; width: 960px !important; height: 600px !important; max-width: none !important; transform: scale(var(--s, .36)); transform-origin: 0 0; }
}
/* 11 Nov · phones: the plans line up one under another. No sideways swiping, nothing moves. */
@media (max-width: 760px) {
  .tiers { display: flex !important; flex-direction: column; overflow: visible; scroll-snap-type: none; margin: 26px 0 0; padding: 0; gap: 18px; }
  .tier { flex: none !important; width: 100%; }
  .tier.rec { margin-top: 10px; }
  .pricing.in .tier:not(.rec) { opacity: 1; }
}