:root {
  --bg: #0b0908;
  --surface: #17130f;
  --text: #f3eee7;
  --text-2: #9a9088;
  --line: rgba(255, 255, 255, 0.1);
  --accent: #e8622c;
  --paper: #efe8de;
  --ink: #14110f;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, p, ul, ol, dl, dd { margin: 0; padding: 0; }
h1, h2, h3, h4, h5 { font-weight: 600; }
ul, ol { list-style: none; }
a { color: inherit; }
code { font-family: var(--mono); font-size: 0.9em; }
em { font-style: normal; }
.wrap { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
.kicker { font-size: 13px; color: var(--text-2); margin-bottom: 24px; }

/* ---------- Header ---------- */
.topbar { position: fixed; inset: 0 0 auto 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; }
.topbar::before { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--bg), rgba(11, 9, 8, 0)); z-index: -1; pointer-events: none; }
.brand { font-weight: 700; letter-spacing: 0.08em; font-size: 15px; text-decoration: none; }
.mainnav { display: flex; align-items: center; gap: 32px; font-size: 13px; }
.mainnav a { text-decoration: none; color: var(--text-2); transition: color 200ms; }
.mainnav a:hover { color: var(--text); }
.mainnav .nav-cta { color: var(--ink); background: var(--text); padding: 8px 16px; border-radius: 999px; }
.mainnav .nav-cta:hover { color: var(--ink); background: #fff; }
.menu-btn { display: none; background: none; border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 13px; padding: 8px 16px; border-radius: 999px; cursor: pointer; }

/* ---------- Pinned stage: intro + 3D laptop + scene copy ---------- */
.show { position: relative; height: calc((var(--count) + 2) * 100vh); }
.show__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; perspective: 2400px; perspective-origin: 50% 40%;
  background: radial-gradient(60% 55% at var(--gx, 70%) 62%, rgba(232, 98, 44, 0.26), transparent 70%), radial-gradient(40% 40% at 15% 10%, rgba(255, 200, 160, 0.05), transparent 70%); }

.intro { position: absolute; left: 32px; right: 32px; top: 128px; z-index: 2; will-change: transform, opacity; }
.intro h1 { font-size: clamp(56px, 9.5vw, 156px); line-height: 0.92; letter-spacing: -0.045em; font-weight: 700; }
.intro h1 em { color: var(--accent); }
.hero__sub { max-width: 460px; color: var(--text-2); margin-top: 24px; font-size: 19px; }

.show__meta { position: absolute; left: 32px; bottom: 32px; z-index: 3; display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; transition: opacity 400ms; }
.show__idx b { color: var(--text); font-weight: 600; }
.show__bar { width: 160px; height: 2px; background: var(--line); }
.show__bar i { display: block; height: 100%; width: 0; background: var(--accent); }

.scene { position: absolute; left: 32px; top: 50%; transform: translateY(-50%); width: min(380px, 30vw); z-index: 2; pointer-events: none; }
.scene.is-on { pointer-events: auto; }
.scene__copy > * { opacity: 0; transform: translateY(24px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.scene.was-on .scene__copy > * { transform: translateY(-24px); }
.scene.is-on .scene__copy > * { opacity: 1; transform: none; }
.scene.is-on .scene__copy > *:nth-child(2) { transition-delay: 60ms; }
.scene.is-on .scene__copy > *:nth-child(n+3) { transition-delay: 120ms; }
.scene__tag { font-size: 13px; color: var(--accent); margin-bottom: 16px; }
.scene h2 { font-size: clamp(32px, 3.2vw, 48px); line-height: 1.02; letter-spacing: -0.03em; }
.scene__lede { color: var(--text-2); margin: 16px 0 32px; }
.scene h3 { font-size: 13px; color: var(--text-2); font-weight: 400; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.scene ul li { font-size: 15px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.scene__math { margin-top: 24px; font-size: 15px; color: var(--text-2); }
.scene__math span { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); background: var(--accent); padding: 2px 8px; border-radius: 999px; margin-right: 8px; }
.scene__math b { color: var(--text); font-weight: 600; }

/* The 3D laptop. --L is its width in px (set from JS); everything derives from it. */
.rig { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-style: preserve-3d; pointer-events: none; }
.laptop {
  --pad: calc(var(--L) * 0.022);
  --bar: calc(var(--L) * 0.028);
  --view: calc((var(--L) - 2 * var(--pad)) / 1.6);
  --lidH: calc(var(--pad) * 2 + var(--bar) + var(--view));
  --depth: calc(var(--L) * 0.66);
  position: absolute; left: 0; top: 0; width: var(--L); height: var(--lidH);
  transform-style: preserve-3d; transform-origin: 50% 100%;
  will-change: transform;
}
.lid { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 100%; transform: rotateX(var(--lidA, -14deg)) translateZ(calc(var(--L) * -0.012)); }
.lid__front, .lid__back { position: absolute; inset: 0; border-radius: calc(var(--L) * 0.022) calc(var(--L) * 0.022) 4px 4px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lid__front { background: #070606; padding: var(--pad); box-shadow: inset 0 0 0 1px #2c2724, inset 0 0 0 3px #0d0b0a; }
.lid__back { transform: rotateX(180deg); background: linear-gradient(160deg, #4a423c, #2a2522 55%, #1d1a18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); display: grid; place-items: center; }
.lid__back span { font-weight: 800; letter-spacing: 0.1em; font-size: calc(var(--L) * 0.05); color: rgba(255, 255, 255, 0.18); }
.screen { position: relative; height: 100%; border-radius: 4px; overflow: hidden; background: #111; }
.screen__bar { height: var(--bar); display: flex; align-items: center; gap: calc(var(--L) * 0.006); padding: 0 calc(var(--L) * 0.012); background: #1d1a17; }
.screen__bar i { width: calc(var(--L) * 0.009); height: calc(var(--L) * 0.009); border-radius: 50%; background: #3a3531; }
.screen__bar span { margin: 0 auto; font-family: var(--mono); font-size: calc(var(--L) * 0.0125); color: var(--text-2); background: #12100e; padding: 1px calc(var(--L) * 0.05); border-radius: 4px; }
.screen__view { position: relative; height: var(--view); overflow: hidden; }
.screen__page { position: absolute; inset: 0; opacity: 0; transform: translateY(6%) scale(1.02); transition: opacity 600ms var(--ease), transform 800ms var(--ease); visibility: hidden; }
.screen__page.is-on { opacity: 1; transform: none; visibility: visible; }
.screen__page.was-on { transform: translateY(-6%); }
.screen__glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 38%); mix-blend-mode: screen; opacity: var(--glare, 0.6); }

.base { position: absolute; left: calc(var(--L) * -0.015); top: 100%; width: calc(var(--L) * 1.03); height: var(--depth); transform-style: preserve-3d; transform-origin: 50% 0; transform: rotateX(-90deg); }
.base__top { position: absolute; inset: 0; border-radius: 4px 4px calc(var(--L) * 0.025) calc(var(--L) * 0.025); background: linear-gradient(180deg, #3b3531, #2a2522); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.keys { position: absolute; left: 7%; right: 7%; top: 7%; height: 46%; border-radius: 6px; background-color: #3c3632; background-image: linear-gradient(90deg, #141110 0 10%, transparent 10%), linear-gradient(0deg, #141110 0 16%, transparent 16%); background-size: calc(100% / 14) 100%, 100% calc(100% / 6); box-shadow: 0 0 0 calc(var(--L) * 0.006) #141110; }
.pad { position: absolute; left: 33%; right: 33%; top: 60%; bottom: 8%; border-radius: 8px; background: #322c29; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.base__front { position: absolute; left: 1.5%; right: 1.5%; top: 100%; height: calc(var(--L) * 0.018); transform-origin: 50% 0; transform: rotateX(90deg); background: linear-gradient(90deg, #1a1715, #2e2925 50%, #1a1715); border-radius: 0 0 8px 8px; }
.shadow { position: absolute; left: 0; top: 0; width: var(--sw, 600px); height: calc(var(--sw, 600px) * 0.22); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); will-change: transform; }

.mock { position: absolute; left: 0; top: 0; width: 1200px; height: 750px; transform: scale(var(--s, 0.5)); transform-origin: 0 0; font-family: var(--sans); overflow: hidden; }
.mock nav { display: flex; align-items: center; gap: 32px; padding: 24px 48px; font-size: 15px; }
.mock nav b { margin-right: auto; font-size: 20px; }
.mock nav em { padding: 10px 20px; border-radius: 999px; font-weight: 600; }

/* m1 Booking (black / cyan) */
.m1 { background: radial-gradient(60% 70% at 20% 90%, rgba(33, 212, 253, 0.18), transparent 70%), #07090b; color: #eaf6fa; }
.m1 nav b { letter-spacing: 0.1em; } .m1 nav b span { color: #21d4fd; }
.m1 nav span { color: #8aa0a8; } .m1 nav em { background: #21d4fd; color: #001218; }
.m1__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; padding: 48px 48px; }
.m1__hero small { color: #21d4fd; font-size: 16px; }
.m1__hero h4 { font-size: 88px; line-height: 0.95; letter-spacing: -0.04em; margin: 24px 0; }
.m1__hero p { font-size: 22px; color: #8aa0a8; }
.m1__stars { margin-top: 40px; color: #ffd36e; font-size: 22px; } .m1__stars span { color: #8aa0a8; font-size: 16px; margin-left: 8px; }
.m1__widget { background: #10161a; border: 1px solid #1f2b31; border-radius: 20px; padding: 32px; }
.m1__lbl { font-size: 14px; color: #8aa0a8; margin: 0 0 12px; }
.m1__pk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }
.m1__pk div { border: 1px solid #24343b; border-radius: 12px; padding: 16px; display: grid; gap: 4px; }
.m1__pk b { font-size: 16px; } .m1__pk span { font-size: 26px; font-weight: 600; }
.m1__pk .on { border-color: #21d4fd; background: rgba(33, 212, 253, 0.08); }
.m1__slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 28px; }
.m1__slots span { text-align: center; padding: 12px; border-radius: 10px; background: #172026; font-size: 16px; }
.m1__slots .on { background: #21d4fd; color: #001218; font-weight: 600; } .m1__slots .off { opacity: 0.3; text-decoration: line-through; }
.m1__pay { text-align: center; background: #eaf6fa; color: #001218; font-weight: 700; font-size: 20px; padding: 18px; border-radius: 12px; }

/* m2 Emergency (green / yellow) */
.m2 { background: #0e2a1b; color: #f4f9ea; }
.m2__alert { background: #f9d342; color: #1b1a05; text-align: center; font-weight: 600; font-size: 16px; padding: 10px; }
.m2 nav b { font-size: 24px; letter-spacing: 0.04em; } .m2 nav span { color: #a9c3a4; } .m2 nav em { background: #f9d342; color: #1b1a05; }
.m2__body { padding: 32px 48px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px 48px; align-items: end; }
.m2__body h4 { grid-row: span 2; font-size: 112px; line-height: 0.9; letter-spacing: -0.045em; }
.m2__body h4 span { color: #f9d342; }
.m2__call { background: #f9d342; color: #1b1a05; border-radius: 20px; padding: 28px; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
.m2__call small { display: block; font-size: 15px; font-weight: 500; margin-top: 4px; }
.m2__zip { border: 2px solid #2f5a40; border-radius: 16px; padding: 20px; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; font-size: 16px; color: #a9c3a4; }
.m2__zip b { font-size: 28px; color: #fff; grid-row: span 2; align-self: center; } .m2__zip em { color: #9be15d; }
.m2__row { display: flex; gap: 12px; padding: 16px 48px; }
.m2__row span { flex: 1; text-align: center; border: 1px solid #2f5a40; border-radius: 999px; padding: 12px; font-size: 17px; }
.m2__sticky { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; padding: 16px 48px; background: #071a10; border-top: 1px solid #2f5a40; font-size: 16px; color: #a9c3a4; }
.m2__sticky b { background: #f9d342; color: #1b1a05; padding: 12px 28px; border-radius: 999px; font-size: 18px; }

/* m3 Trust (paper / navy, editorial) */
.m3 { background: #f4f1ea; color: #0f1e33; }
.m3 nav { border-bottom: 1px solid #d8d2c5; } .m3 nav b { font-family: Georgia, "Times New Roman", serif; font-size: 28px; font-weight: 400; font-style: italic; }
.m3 nav span { color: #59657a; } .m3 nav em { background: #0f1e33; color: #f4f1ea; }
.m3__split { display: grid; grid-template-columns: 1.25fr 1fr; height: calc(100% - 82px); }
.m3__left { padding: 56px 48px; border-right: 1px solid #d8d2c5; display: flex; flex-direction: column; }
.m3__left small { font-size: 14px; color: #59657a; letter-spacing: 0.06em; text-transform: uppercase; }
.m3__left h4 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 76px; line-height: 1; letter-spacing: -0.02em; margin: 24px 0; }
.m3__left p { font-size: 19px; color: #3d4a5f; max-width: 520px; }
.m3__badges { margin-top: auto; display: flex; gap: 12px; } .m3__badges span { border: 1px solid #0f1e33; padding: 8px 14px; font-size: 14px; border-radius: 4px; }
.m3__plans { display: grid; grid-template-rows: repeat(3, 1fr); }
.m3__plans div { padding: 28px 40px; border-bottom: 1px solid #d8d2c5; display: grid; grid-template-columns: 1fr auto; align-content: center; }
.m3__plans b { font-size: 22px; } .m3__plans span { font-size: 40px; font-weight: 600; grid-row: span 2; align-self: center; } .m3__plans small { font-size: 16px; color: #59657a; }
.m3__plans p { color: #59657a; font-size: 16px; }
.m3__plans .on { background: #0f1e33; color: #f4f1ea; } .m3__plans .on p, .m3__plans .on small { color: #a8b4c8; }

/* m4 Menu (cream / tomato) */
.m4 { background: #f6ead7; color: #2b130b; }
.m4 nav b { font-size: 30px; letter-spacing: -0.03em; } .m4 nav span { color: #7a5a4a; } .m4 nav em { background: #d9381e; color: #fff4e6; }
.m4__menu { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 48px; padding: 32px 48px; }
.m4__menu h5 { font-size: 64px; letter-spacing: -0.04em; color: #d9381e; margin-bottom: 16px; font-weight: 700; }
.m4__menu p { display: flex; align-items: baseline; gap: 8px; font-size: 22px; padding: 12px 0; border-bottom: 1px solid #e2cfb3; }
.m4__menu p i { flex: 1; border-bottom: 2px dotted #c8ad8c; }
.m4__big { background: #d9381e; color: #fff4e6; border-radius: 24px; padding: 32px; display: flex; flex-direction: column; }
.m4__big h4 { font-size: 92px; line-height: 0.9; letter-spacing: -0.045em; }
.m4__big p { font-size: 19px; margin: 20px 0; opacity: 0.9; }
.m4__big em { background: #fff4e6; color: #d9381e; font-weight: 700; text-align: center; padding: 16px; border-radius: 999px; font-size: 20px; margin-top: auto; }
.m4__big small { text-align: center; margin-top: 16px; font-size: 16px; }

/* m5 Quote (white / electric blue) */
.m5 { background: #f5f8ff; color: #06163a; }
.m5 nav b { font-size: 28px; letter-spacing: -0.04em; color: #1652f0; } .m5 nav span { color: #5c6b8e; } .m5 nav em { background: #1652f0; color: #fff; }
.m5__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 40px 48px; align-items: center; }
.m5__grid h4 { font-size: 92px; line-height: 0.92; letter-spacing: -0.045em; }
.m5__grid > div > p { font-size: 22px; color: #5c6b8e; margin-top: 24px; }
.m5__calc { background: #fff; border-radius: 24px; padding: 36px; box-shadow: 0 30px 80px rgba(22, 82, 240, 0.15); }
.m5__lbl { display: flex; justify-content: space-between; font-size: 17px; color: #5c6b8e; margin-bottom: 14px; } .m5__lbl b { color: #06163a; }
.m5__slider { height: 8px; border-radius: 4px; background: #e3e9f8; position: relative; margin-bottom: 32px; }
.m5__slider i { position: absolute; left: 0; top: 0; bottom: 0; width: 55%; background: #1652f0; border-radius: 4px; }
.m5__slider b { position: absolute; left: 55%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: #fff; border: 4px solid #1652f0; }
.m5__chk { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.m5__chk span { border: 1.5px solid #d4dcf2; border-radius: 999px; padding: 10px 16px; font-size: 16px; }
.m5__chk .on { border-color: #1652f0; background: #eaf0ff; color: #1652f0; font-weight: 600; }
.m5__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid #e3e9f8; padding-top: 20px; }
.m5__total small { font-size: 17px; color: #5c6b8e; } .m5__total b { font-size: 72px; letter-spacing: -0.04em; }
.m5__calc em { display: block; text-align: center; background: #06163a; color: #fff; padding: 18px; border-radius: 14px; font-weight: 600; font-size: 20px; margin-top: 16px; }

/* m6 Agent storefront */
.m6 { background: #0d0b0a; color: var(--text); display: grid; grid-template-columns: 1fr 1.2fr; }
.m6__site { padding: 48px; background: #f3eee7; color: var(--ink); display: flex; flex-direction: column; gap: 24px; }
.m6__site b { font-size: 18px; } .m6__site h4 { font-size: 64px; letter-spacing: -0.04em; line-height: 1; }
.m6__blocks { display: grid; gap: 12px; } .m6__blocks i { height: 56px; border-radius: 10px; background: #e0d7ca; } .m6__blocks i:first-child { height: 140px; }
.m6__site em { margin-top: auto; background: var(--ink); color: #f3eee7; text-align: center; padding: 16px; border-radius: 999px; font-weight: 600; }
.m6__log { margin: 0; padding: 48px; font-family: var(--mono); font-size: 20px; line-height: 1.7; color: #d8d0c6; white-space: pre-wrap; }
.m6__log .d { color: #7d736b; } .m6__log .a { color: var(--accent); } .m6__log .g { color: #9be15d; }

/* ---------- Wordmark ---------- */
.wordmark { padding: 160px 32px; text-align: center; overflow: hidden; }
.wordmark__text { position: relative; display: inline-block; font-size: clamp(64px, 14vw, 240px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.9; color: transparent; -webkit-text-stroke: 1.5px rgba(243, 238, 231, 0.35); white-space: nowrap; }
.wordmark__text::after { content: attr(data-text); position: absolute; inset: 0; color: var(--text); -webkit-text-stroke: 0; clip-path: inset(0 calc(100% - var(--fill, 0%)) 0 0); }
.wordmark__sub { max-width: 560px; margin: 48px auto 0; color: var(--text-2); font-size: 19px; }

/* ---------- Agent ready ---------- */
.agent { padding: 64px 0 160px; position: relative; overflow: hidden; }
.giant { font-size: clamp(80px, 17vw, 300px); font-weight: 700; letter-spacing: -0.06em; line-height: 0.85; text-align: center; color: var(--accent); margin-bottom: 96px; white-space: nowrap; }
.agent__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 96px; align-items: start; }
.agent h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -0.03em; }
.body2 { color: var(--text-2); margin-top: 24px; max-width: 600px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.stats div { border-top: 1px solid var(--line); padding-top: 16px; }
.stats dt { font-size: 48px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; margin-bottom: 8px; }
.stats dd { font-size: 13px; color: var(--text-2); }
.rows { border-top: 1px solid var(--line); }
.rows li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.rows li > span { font-size: 13px; color: var(--accent); padding-top: 4px; font-variant-numeric: tabular-nums; }
.rows h3 { font-size: 20px; letter-spacing: -0.01em; } .rows p { color: var(--text-2); font-size: 15px; margin-top: 4px; }

/* ---------- Horizontal automations ---------- */
.hscroll { height: 300vh; position: relative; }
.hscroll__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 64px; padding: 96px 0 64px; }
.hscroll__head { padding: 0 32px; }
.hscroll__head .kicker { margin-bottom: 16px; }
.hscroll__head h2 { font-size: clamp(40px, 5vw, 72px); line-height: 0.98; letter-spacing: -0.04em; }
.hscroll__track { display: flex; gap: 24px; padding: 0 32px; will-change: transform; }
.hscroll__track article { flex: 0 0 360px; height: 340px; border-radius: 16px; padding: 32px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); }
.hscroll__track article:nth-child(3n+2) { background: var(--accent); color: var(--ink); border-color: transparent; }
.hscroll__track article:nth-child(3n+3) { background: var(--paper); color: var(--ink); border-color: transparent; }
.hscroll__track span { font-size: 13px; opacity: 0.7; }
.hscroll__track h3 { font-size: 32px; line-height: 1; letter-spacing: -0.03em; margin-top: auto; }
.hscroll__track p { font-size: 15px; margin-top: 16px; opacity: 0.8; }

/* ---------- Pricing ---------- */
.pricing { position: relative; padding: 160px 0; overflow: hidden;
  background: radial-gradient(55% 45% at 30% 40%, rgba(232, 98, 44, 0.16), transparent 70%); }
.pricing__top { display: grid; grid-template-columns: 1fr; margin-bottom: 64px; }
.pricing__head, .contact__head { font-size: clamp(48px, 7vw, 112px); line-height: 0.94; letter-spacing: -0.045em; max-width: 1000px; }
.pricing__head em { color: var(--accent); }
.contact__head { margin-bottom: 64px; }

.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; perspective: 1200px; }
.plan { position: relative; display: flex; flex-direction: column; min-height: 480px; padding: 32px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--line);
  transform: rotateX(var(--trx, 0deg)) rotateY(var(--try, 0deg)); transform-style: preserve-3d;
  transition: transform 500ms var(--ease), box-shadow 500ms var(--ease); }
.plan:hover { box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5); }
.plan.reveal { transition: opacity 700ms var(--ease), transform 500ms var(--ease), box-shadow 500ms var(--ease); opacity: 0; transform: translateY(32px); }
.plan.reveal.in { opacity: 1; transform: rotateX(var(--trx, 0deg)) rotateY(var(--try, 0deg)); }
.plan__n { font-size: 13px; color: var(--text-2); }
.plan h3 { font-size: 24px; letter-spacing: -0.02em; margin-top: 48px; }
.price { display: flex; align-items: baseline; gap: 8px; font-size: clamp(56px, 5.4vw, 80px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; margin: 16px 0 32px; }
.price small { font-size: 13px; letter-spacing: 0; font-weight: 400; color: var(--text-2); }
.plan ul { display: grid; gap: 0; font-size: 15px; margin-top: auto; }
.plan li { padding: 10px 0; border-top: 1px solid var(--line); color: var(--text-2); }
.guarantee { margin-top: 24px; font-size: 13px; line-height: 1.45; }

/* Featured card in the accent, like the automation strip */
.plan--hot { background: var(--accent); color: var(--ink); border-color: transparent; }
.plan--hot .plan__n, .plan--hot .price small, .plan--hot li { color: rgba(20, 17, 15, 0.7); }
.plan--hot li { border-top-color: rgba(20, 17, 15, 0.18); }
.plan--hot .guarantee { background: var(--ink); color: var(--text); padding: 16px; border-radius: 12px; }
.plan--paper { background: var(--paper); color: var(--ink); border-color: transparent; }
.plan--paper .plan__n, .plan--paper .price small, .plan--paper li { color: #6d645c; }
.plan--paper li { border-top-color: rgba(20, 17, 15, 0.12); }

.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.trust p { font-size: 15px; color: var(--text-2); }
.trust b { display: block; color: var(--text); font-size: 17px; margin-bottom: 4px; }

/* Recent work: big editorial rows */
.work { margin-top: 160px; }
.work .kicker { margin-bottom: 16px; }
.work ol { border-top: 1px solid var(--line); }
.work li { display: grid; grid-template-columns: 64px 1fr minmax(240px, 420px); gap: 24px; align-items: baseline; padding: 32px 0; border-bottom: 1px solid var(--line); transition: padding 400ms var(--ease); }
.work li > span { font-size: 13px; color: var(--accent); font-variant-numeric: tabular-nums; }
.work li h3 { font-size: clamp(32px, 4.4vw, 64px); letter-spacing: -0.045em; line-height: 1; transition: color 300ms; }
.work li p { color: var(--text-2); font-size: 15px; }
.work li:hover { padding-left: 16px; }
.work li:hover h3 { color: var(--accent); }
.note { margin-top: 24px; font-size: 13px; color: var(--text-2); }

/* ---------- Contact ---------- */
.contact { padding: 160px 0; }
.contact__head em { color: var(--accent); }
.forms { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.forms form { display: grid; gap: 16px; align-content: start; }
.forms h3 { font-size: 24px; letter-spacing: -0.02em; }
.small { font-size: 15px; color: var(--text-2); margin-bottom: 8px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; font-size: 13px; color: var(--text-2); }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 17px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; outline: none; transition: border-color 200ms; }
.field select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239a9088' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.field input::placeholder { color: var(--text-2); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.btn { justify-self: start; margin-top: 8px; font: inherit; font-size: 17px; font-weight: 600; padding: 14px 28px; border-radius: 999px; border: 0; cursor: pointer; transition: transform 200ms var(--ease), opacity 200ms; }
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--accent); color: var(--ink); }
.btn--secondary { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- Footer ---------- */
.footer { padding: 64px 32px 32px; border-top: 1px solid var(--line); overflow: hidden; }
.footer__mark { font-size: clamp(48px, 12.5vw, 220px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.85; white-space: nowrap; color: var(--surface); -webkit-text-stroke: 1px rgba(243, 238, 231, 0.12); }
.footer__row { display: flex; justify-content: space-between; gap: 32px; margin-top: 32px; font-size: 13px; color: var(--text-2); }
.footer__row p:first-child { max-width: 420px; }
.footer__row p:last-child { text-align: right; }

/* ---------- Toast & reveal ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--text); color: var(--ink); padding: 12px 20px; border-radius: 999px; font-size: 13px; opacity: 0; transition: opacity 400ms var(--ease); z-index: 40; }
.toast.show { opacity: 1; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* Short laptop screens: tighten the pinned scenes so the copy fits */
@media (min-width: 961px) and (max-height: 760px) {
  .scene__lede { margin: 8px 0 16px; }
  .scene ul li { padding: 4px 0; font-size: 14px; }
  .hscroll__track article { height: 280px; }
}

/* ---------- Mobile: no pinning, everything stacks ---------- */
@media (max-width: 960px) {
  .mainnav { display: none; position: absolute; top: 64px; left: 16px; right: 16px; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 8px 16px; }
  .mainnav.open { display: flex; }
  .mainnav a { padding: 12px 0; font-size: 17px; }
  .mainnav .nav-cta { text-align: center; margin: 8px 0; }
  .menu-btn { display: block; }
  .topbar { padding: 16px; }
  /* Stage stays pinned on phones: laptop up top, copy underneath */
  .show__stage { height: 100svh; perspective: 1400px; }
  .intro { left: 16px; right: 16px; top: 104px; }
  .hero__sub { font-size: 17px; }
  .show__meta { left: 16px; bottom: 16px; }
  .scene { left: 16px; right: 16px; top: auto; bottom: 48px; transform: none; width: auto; }
  .scene h3, .scene ul { display: none; }
  .scene__lede { margin: 8px 0 0; font-size: 15px; }
  .scene__math { margin-top: 16px; }
  .wrap { width: calc(100% - 32px); }
  .wordmark { padding: 96px 16px; }
  .agent__grid, .forms { grid-template-columns: 1fr; gap: 48px; }
  .stats { grid-template-columns: 1fr; }
  .hscroll { height: auto; }
  .hscroll__stage { position: static; height: auto; padding: 64px 0; gap: 32px; }
  .hscroll__head { padding: 0 16px; }
  .hscroll__track { overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px 16px; transform: none !important; scrollbar-width: none; }
  .hscroll__track article { flex-basis: 80%; height: 300px; scroll-snap-align: start; }
  .pricing { padding: 96px 0; }
  .plans { grid-template-columns: 1fr 1fr; }
  .plan { min-height: 420px; padding: 24px; }
  .trust { grid-template-columns: 1fr; gap: 16px; }
  .work { margin-top: 96px; }
  .work li { grid-template-columns: 40px 1fr; gap: 8px 16px; padding: 24px 0; }
  .work li p { grid-column: 2; }
  .row2 { grid-template-columns: 1fr; }
  .contact { padding: 96px 0; }
  .footer { padding: 48px 16px 24px; }
  .footer__row { flex-direction: column; } .footer__row p:last-child { text-align: left; }
}

@media (max-width: 600px) {
  .plans { grid-template-columns: 1fr; }
  .plan { min-height: 0; }
  .plan h3 { margin-top: 32px; }
  .plan ul { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}