/* ==========================================================================
   MAC Labs — studio system
   Light studio surfaces, navy Ink text, one brand Signal blue.
   ========================================================================== */

:root {
  --paper: #ffffff;
  --studio: #eceef2;
  --fog: #f4f5f8;
  --ink: #0d1626;
  --slate: #586377;
  --signal: #006dff;
  --signal-dark: #0058d1;
  --line: #e1e5ec;

  --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(20px, 4vw, 56px);
  --max: 1320px;
  --nav-h: 76px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: 18px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
body.is-loading { overflow: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
::selection { background: #cfe2ff; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px; }
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 300; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; }
.skip-link:focus { top: 16px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Type ---------- */
h1 { font-size: clamp(44px, 5.8vw, 92px); line-height: .98; letter-spacing: -.035em; font-weight: 700; }
h2 { font-size: clamp(36px, 4.4vw, 66px); line-height: 1.02; letter-spacing: -.03em; font-weight: 700; }
h3 { font-size: 22px; line-height: 1.25; letter-spacing: -.01em; font-weight: 650; }
.lead { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; color: var(--slate); max-width: 32em; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--ink); color: #fff; font-weight: 600; font-size: 17px; text-decoration: none;
  box-shadow: 0 10px 24px -14px rgba(13, 22, 38, .6);
  transition: background .2s, transform .2s;
}
.btn:hover { background: var(--signal); }
.btn:active { transform: translateY(1px); }
.btn--small { min-height: 42px; padding: 0 20px; font-size: 15px; box-shadow: none; }
.btn[disabled] { opacity: .6; cursor: progress; }
.text-link { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: rgba(13, 22, 38, .3); transition: text-decoration-color .2s, color .2s; }
.text-link:hover { color: var(--signal); text-decoration-color: currentColor; }

/* ---------- Loading screen ---------- */
.loader {
  position: fixed; inset: 0; z-index: 200; background: var(--studio);
  display: grid; place-items: center;
}
html:not(.js) .loader { display: none; }
.loader-window {
  width: min(70vw, 820px); aspect-ratio: 1.538; background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 50px 90px -50px rgba(13, 22, 38, .45), 0 0 0 1px rgba(13, 22, 38, .06);
  display: flex; flex-direction: column; will-change: transform;
}
.lw-bar { flex: none; height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #f5f6f8; border-bottom: 1px solid #e8ebf0; }
.lw-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d8dce2; }
.lw-url { margin: 0 auto; width: min(46%, 320px); height: 24px; border-radius: 7px; background: #fff; border: 1px solid #e6e9ee; font-size: 13px; color: var(--slate); display: grid; place-items: center; }
.lw-progress { flex: none; height: 2px; }
.lw-progress b { display: block; height: 100%; background: var(--signal); transform-origin: left; transform: scaleX(0); }
.lw-page { flex: 1; display: flex; flex-direction: column; gap: 7%; padding: 4.5% 6%; }
.sk { display: block; border-radius: 6px; background: #edf0f4; position: relative; overflow: hidden; }
.sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .75) 50%, transparent 70%); transform: translateX(-100%); animation: shimmer 1.6s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
[data-at] { opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .7s var(--ease); }
[data-at].is-on { opacity: 1; transform: none; }
.sk-nav { display: flex; align-items: center; gap: 4%; }
.sk-logo { width: 26px; height: 26px; border-radius: 7px; background: var(--ink); margin-right: auto; }
.sk-link { width: 9%; height: 9px; }
.sk-btn { width: 15%; height: 26px; border-radius: 99px; background: var(--signal); }
.sk-hero { flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 6%; align-items: center; }
.sk-copy { display: grid; gap: 12px; }
.sk-h1 { height: clamp(16px, 2.6vw, 28px); background: #d5dbe3; }
.sk-h1.short { width: 72%; }
.sk-p { height: 9px; margin-top: 6px; }
.sk-p.short { width: 80%; margin-top: 0; }
.sk-cta { width: 38%; height: 28px; border-radius: 99px; background: var(--ink); margin-top: 10px; }
.sk-img { height: 100%; min-height: 90px; border-radius: 10px; background: linear-gradient(135deg, #e8edf4, #d8e2ee); }
.sk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; }
.sk-cards .sk { height: clamp(40px, 7vw, 70px); border-radius: 10px; }
.loader-meta { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(24px, 4vw, 44px); display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.loader-pct { font-size: clamp(56px, 8vw, 116px); font-weight: 700; letter-spacing: -.05em; line-height: .8; font-variant-numeric: tabular-nums; }
.loader-pct::after { content: "%"; font-size: .36em; letter-spacing: 0; margin-left: .08em; vertical-align: top; color: var(--slate); }
.loader-note { color: var(--slate); font-weight: 500; font-size: 16px; }
@media (max-width: 700px) {
  .loader-window { width: 86vw; }
  .sk-link { display: none; }
}

/* ---------- Navigation ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, box-shadow .3s; }
.nav.is-scrolled { background: rgba(255, 255, 255, .82); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); }
.nav-inner { height: var(--nav-h); display: flex; align-items: center; gap: 32px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
.logo svg { width: 28px; height: 28px; }
.logo .m-l { fill: var(--ink); }
.logo .m-r { fill: var(--signal); }
.logo b { color: var(--signal); }
.nav-links { display: flex; gap: 30px; margin-left: auto; }
.nav-links a { text-decoration: none; font-size: 16px; font-weight: 500; color: var(--slate); transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.menu-btn { display: none; position: relative; width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.menu-btn span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s var(--ease), top .3s var(--ease); }
.menu-btn span:first-child { top: 16px; }
.menu-btn span:last-child { top: 25px; }
.menu-open .menu-btn span:first-child { top: 21px; transform: rotate(45deg); }
.menu-open .menu-btn span:last-child { top: 21px; transform: rotate(-45deg); }
.menu { display: none; }
@media (max-width: 860px) {
  .nav-links, .nav-cta { display: none; }
  .menu-btn { display: block; }
  .menu {
    position: absolute; left: 12px; right: 12px; top: calc(var(--nav-h) - 6px);
    display: grid; gap: 2px; padding: 10px; border-radius: 18px; background: #fff;
    box-shadow: 0 20px 50px -20px rgba(13, 22, 38, .3), 0 0 0 1px var(--line);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .3s var(--ease), visibility .25s;
  }
  .menu a { padding: 14px 16px; border-radius: 12px; text-decoration: none; font-size: 20px; font-weight: 600; }
  .menu a:hover { background: var(--fog); }
  .menu-open .menu { opacity: 1; visibility: visible; transform: none; }
  .menu .menu-cta { margin-top: 8px; color: #fff; justify-content: center; font-size: 17px; }
  .menu .menu-cta:hover { background: var(--signal); }
  body.menu-open::before { content: ""; position: fixed; inset: 0; z-index: 49; background: rgba(13, 22, 38, .18); }
}

/* ---------- The tour: the stage stays put (sticky) while the chapters scroll over it ---------- */
:root { --stage-h: max(100svh, 620px); --pace: 1.8; }
.tour { position: relative; background: var(--studio); }
.stage { position: sticky; top: 0; z-index: 0; height: var(--stage-h); background: var(--studio); overflow: hidden; }
.stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* a soft wash of studio light behind the opening copy; fades as the camera pulls back */
.stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--wash, 0);
  background: linear-gradient(90deg, rgba(236, 238, 242, 1) 0%, rgba(236, 238, 242, .99) 46%, rgba(236, 238, 242, .9) 64%, rgba(236, 238, 242, .82) 100%); }
@media (max-width: 860px) { .stage::after { background: linear-gradient(180deg, rgba(236, 238, 242, 1) 0%, rgba(236, 238, 242, .97) 62%, rgba(236, 238, 242, .55) 74%, rgba(236, 238, 242, .12) 100%); } }
/* the end of the story eases into the white page below, so there's no hard seam */
.stage::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--seam, var(--paper))); opacity: var(--tailfade, 0); }
/* the chapters start back at the top of the tour, on top of the stage. Only their links and buttons
   take taps, so the stage underneath still gets the pointer and the step bar stays clickable */
.chapters { position: relative; z-index: 2; margin-top: calc(-1 * var(--stage-h)); pointer-events: none; }
/* each chapter is a stretch of page (--len screens long). Its copy holds in place while its act
   plays on the laptop, then scrolls away as the next one arrives */
.beat { position: relative; height: max(var(--stage-h), calc(var(--len-d, var(--len, 1)) * var(--stage-h) * var(--pace))); }
/* --len-d (desktop) and --len-m (phones) let one chapter run at a different length where a wheel and a
   thumb need different pacing; without them --len applies to both */
.beat--hero { height: var(--stage-h); } /* the opening is always one screen */
.chapter { position: sticky; top: 0; height: var(--stage-h); display: flex; flex-direction: column; justify-content: center; max-width: 470px; padding-bottom: 72px; pointer-events: none; }
.chapter > * { flex: none; }
.chapter a, .chapter button { pointer-events: auto; }
.chapter--hero { max-width: 720px; padding-top: var(--nav-h); }
.chapter--hero h1 { font-size: clamp(44px, 5vw, 80px); }
.chapter--hero .lead { margin-top: 26px; }
.chapter h2 + .lead { margin-top: 20px; }
/* small print in a chapter: which example the laptop is showing */
.tour-note, .work-name { margin-top: 16px; font-size: 15px; line-height: 1.4; color: var(--slate); }
.work-name span, .tour-note b { color: var(--ink); font-weight: 600; }
.work-name b { color: var(--ink); font-weight: 700; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 30px; margin-top: 38px; }
.step-label { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; font-weight: 500; font-size: 16px; color: var(--slate); }
.step-label span { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.step-label span::after { content: ""; width: 40px; height: 1px; background: currentColor; opacity: .35; }
/* headline words arrive out of focus, then sharpen */
.chapter .w { display: inline-block; overflow: clip; overflow-clip-margin: .45em; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.chapter .w > span { display: inline-block; will-change: transform, filter; }

/* the hero says what we do, in two parts */
.offer { display: grid; grid-template-columns: repeat(2, max-content); gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.offer li { position: relative; border-radius: 16px; background: rgba(255, 255, 255, .78); box-shadow: 0 0 0 1px rgba(13, 22, 38, .08), 0 14px 30px -24px rgba(13, 22, 38, .5); transition: box-shadow .2s; }
/* each one is a link to its part of the tour, and the whole pill is the tap target */
.offer a { display: grid; gap: 1px; padding: 13px 20px 14px 42px; border-radius: inherit; color: inherit; text-decoration: none; }
.offer li:hover, .offer li:focus-within { box-shadow: 0 0 0 1px rgba(13, 22, 38, .22), 0 14px 30px -24px rgba(13, 22, 38, .5); }
.offer li::before { content: ""; position: absolute; left: 18px; top: 20px; width: 12px; height: 12px; border-radius: 4px; background: var(--ink); }
.offer li + li::before { background: var(--signal); }
.offer b { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.offer span { font-size: 15px; line-height: 1.35; color: var(--slate); }
.chapter--hero .offer + .actions { margin-top: 30px; }
/* desktop: says whose site is faded in behind the headline, so nobody thinks we sell soap */
.hero-note { margin-top: 26px; font-size: 14px; color: var(--slate); max-width: 34em; }

/* the step bar: always on screen during the tour, grouped by what we do */
.rail { position: absolute; z-index: 3; left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); bottom: 20px; display: flex; gap: 28px; }
.rail-group { flex: 1 1 0; min-width: 0; display: grid; gap: 6px; }
.rail-group--web { flex-grow: 5; }
.rail-group--ai { flex-grow: 1.7; }
.rail-group--you { flex-grow: 1.3; }
.rail-name { font-size: 13px; font-weight: 700; color: var(--slate); white-space: nowrap; transition: color .3s; }
.rail-short { display: none; }
.rail-group.is-on .rail-name { color: var(--signal-dark); }
.rail-steps { display: flex; gap: 6px; }
.rail-steps button { flex: 1 1 0; min-width: 0; display: grid; gap: 7px; padding: 0 0 6px; border: 0; background: none; text-align: left; font-size: 14px; font-weight: 500; color: var(--slate); -webkit-tap-highlight-color: transparent; }
.rail-steps button span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: color .3s; }
.rail-steps button:hover span, .rail-steps button.is-on span { color: var(--ink); }
.rail-steps button.is-on span { font-weight: 650; }
.rail-steps i { position: relative; display: block; height: 3px; border-radius: 3px; background: rgba(13, 22, 38, .12); overflow: hidden; }
.rail-steps i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); transform: scaleX(var(--f, 0)); transform-origin: left; }
.rail-group--ai .rail-steps i::after { background: var(--signal); }

.work-fallback { display: none; }
.no-3d .work-fallback { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 36px; }
.no-3d .work-fallback img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.no-3d .chapter[data-chapter="work"] { max-width: none; }

/* everything in the story starts hidden; scrolling reveals it */
.js .chapter [data-rv] { opacity: 0; }
.js .chapter .actions[data-rv] { visibility: hidden; }

/* the build copy sits beside the laptop's closest corner while the camera leans in */
@media (min-width: 1181px) {
  .has-3d .chapter[data-chapter="build"] { max-width: 430px; }
  .has-3d .chapter[data-chapter="build"] .lead { max-width: 360px; }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .chapter { max-width: 380px; }
  .chapter h2 { font-size: clamp(34px, 4vw, 48px); }
  .chapter--hero { max-width: 560px; }
  .has-3d .chapter:not(.chapter--hero) .lead { max-width: 290px; font-size: 17px; }
  .chapter--hero h1 { font-size: clamp(44px, 5.4vw, 60px); }
  .rail { gap: 18px; }
  .rail-steps button { font-size: 13px; }
}
/* short desktop windows: the hero keeps its first sentence and stays clear of the step bar */
@media (min-width: 861px) and (max-height: 800px) {
  .chapter--hero h1 { font-size: clamp(40px, 4.8vw, 70px); }
  .chapter--hero .lead { margin-top: 18px; }
  .chapter--hero .lead-more { display: none; }
  .offer { margin-top: 22px; }
  .chapter--hero .offer + .actions { margin-top: 22px; }
  .hero-note { margin-top: 18px; }
}
/* shorter still (1366x657, 1280x650…): no room for the note above the step bar */
@media (min-width: 861px) and (max-height: 760px) {
  .hero-note { display: none; }
}

/* No WebGL or reduced motion: the story as a plain page */
.no-3d .chapter [data-rv] { visibility: visible !important; opacity: 1 !important; transform: none !important; }
.no-3d .stage { display: none; }
.no-3d .chapters { margin-top: 0; padding-top: calc(var(--nav-h) + 56px); padding-bottom: 96px; display: grid; gap: 80px; }
.no-3d .beat { height: auto; }
.no-3d .chapter { position: static; height: auto; display: block; max-width: 760px; padding: 0; }

/* ---------- Scenes: copy on one side, the pixels form a shape on the other ---------- */
.flow-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 4; pointer-events: none; }
.no-3d .flow-canvas { display: none; }
.scene { position: relative; padding: clamp(96px, 12vw, 160px) 0; }
/* room between sections for the pixels to travel from one shape to the next */
.scene + .scene, .scene + .outro { margin-top: 30vh; }
/* the outro follows the form closely, so there's never a screen of nothing but pixels */
.scene + .outro { margin-top: 12vh; }
@media (max-width: 860px) { .scene + .scene, .scene + .outro { margin-top: 0; } }
.scene:nth-of-type(even) { background: var(--fog); }
.scene-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.scene-grid--flip { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.scene-art { position: sticky; top: 18vh; height: 64vh; }
.scene-copy { position: relative; z-index: 5; background: var(--paper); }
.scene:nth-of-type(even) .scene-copy { background: var(--fog); }
.scene-copy h2 + .lead { margin-top: 18px; }
.kicker { font-size: 16px; font-weight: 600; color: var(--signal-dark); margin-bottom: 16px; }
.no-3d .scene-art { display: none; }
.no-3d .scene-grid, .no-3d .scene-grid--flip { grid-template-columns: 1fr; }
@media (max-width: 860px) {
  .scene-grid, .scene-grid--flip { grid-template-columns: 1fr; gap: 24px; }
  .scene-grid--flip .scene-art { order: -1; }
  .scene-grid:not(.scene-grid--flip) .scene-art { order: -1; }
  .scene-art { position: relative; top: 0; height: 240px; }
}

/* Services */
.service { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.service h3 { font-size: 26px; letter-spacing: -.02em; }
.service p { margin-top: 10px; color: var(--slate); max-width: 34em; }
.scene .chat { margin-top: 40px; }

/* Steps: a real sequence, so they're numbered */
.steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 0; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 52px 1fr; gap: 4px 16px; padding: 24px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; font-size: 16px; }
.steps h3 { font-size: 21px; align-self: center; }
.steps li > p { grid-column: 2; color: var(--slate); font-size: 17px; }

/* Outro */
.outro { position: relative; padding: calc(var(--nav-h) + 56px) var(--gutter) clamp(72px, 9vw, 120px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.scene-art--outro { position: relative; top: 0; width: min(40vh, 320px); height: min(40vh, 320px); }
@media (max-width: 860px) { .scene-art--outro { width: min(30vh, 240px); height: min(30vh, 240px); } }
.outro-line { font-size: clamp(28px, 3.4vw, 48px); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; max-width: 16ch; }
.outro-back { margin-top: -10px; font-size: 16px; color: var(--slate); }
.no-3d .scene-art--outro { display: none; }

/* Chat demo */
.chat { margin: 0; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 40px 80px -50px rgba(13, 22, 38, .4); overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.chat-avatar { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--ink); }
.chat-avatar svg { width: 18px; height: 18px; }
.chat-avatar--mono { background: #1f7a5c; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.chat-pill { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: var(--fog); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; font-weight: 600; color: var(--slate); vertical-align: 2px; }
.chat-intro { margin-top: 36px; font-weight: 600; }
.chat-intro + .chat { margin-top: 12px; }
.chat-head b { display: block; font-size: 16px; }
.chat-head small { display: block; font-size: 14px; color: var(--slate); }
.chat-body { height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--fog); scrollbar-width: none; }
.chat-body > :first-child { margin-top: auto; }
.msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; }
.msg--bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.msg--user { align-self: flex-end; background: var(--signal); color: #fff; border-bottom-right-radius: 5px; }
.msg--card { align-self: flex-start; background: #fff; border: 1px solid #cfe0ff; display: grid; gap: 8px; }
.msg--card small { font-size: 13px; font-weight: 600; color: var(--signal); }
.msg--card .slots { display: flex; flex-wrap: wrap; gap: 6px; }
.msg--card .slots span { font-size: 13px; padding: 4px 10px; border-radius: 99px; background: var(--fog); }
.typing { display: inline-flex; gap: 4px; padding: 13px 14px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #9aa4b5; animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.chat-prompts { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px 18px; border-top: 1px solid var(--line); }
.chat-prompts button { font-size: 14px; padding: 8px 14px; border-radius: 99px; border: 1px solid #8f99aa; background: #fff; color: var(--ink); }
.chat-prompts button:hover { border-color: var(--signal); color: var(--signal); }
.chat-prompts button[aria-disabled="true"] { opacity: .5; cursor: progress; }
.chat-prompts:empty { display: none; }

/* FAQ */
.faq { margin-top: 36px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-size: 20px; font-weight: 600; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--fog); color: var(--ink); font-size: 22px; font-weight: 500; transition: transform .3s var(--ease), background .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--ink); color: #fff; }
.faq details p { padding: 0 48px 26px 0; color: var(--slate); }
@media (max-width: 860px) { .faq details p { padding-right: 0; } }

.form { margin-top: 36px; display: grid; gap: 20px; padding: clamp(24px, 3.5vw, 44px); background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 40px 80px -60px rgba(13, 22, 38, .45); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 560px) { .row { grid-template-columns: 1fr; } }
.field { display: grid; align-content: start; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > span, .field legend { font-size: 15px; font-weight: 600; padding: 0; }
.field em { font-style: normal; font-weight: 500; color: var(--slate); margin-left: 6px; }
.field input, .field textarea { width: 100%; font: inherit; font-size: 17px; color: var(--ink); background: #fff; border: 1px solid #8f99aa; border-radius: 12px; padding: 13px 14px; transition: border-color .2s, box-shadow .2s; }
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: #6b7587; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--signal); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(0, 109, 255, .38); }
.field.is-invalid input, .field.is-invalid textarea { border-color: #d64545; }
.field-error { font-size: 14px; color: #c0392b; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-block; padding: 9px 16px; border-radius: 99px; border: 1px solid #8f99aa; font-size: 15px; transition: background .2s, border-color .2s, color .2s; }
.chips label:hover span { border-color: var(--ink); }
.chips input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chips input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }
.form-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; margin-top: 4px; }
.form-note { font-size: 14px; color: var(--slate); max-width: 26em; }
.status:empty { display: none; }
.status { padding: 14px 16px; border-radius: 12px; font-size: 16px; }
.status.is-success { background: #eaf7ef; color: #17633a; }
.status.is-success strong { display: block; }
.status.is-error { background: #fdeeee; color: #a32727; }

/* Footer */
.footer { padding: 44px 0; border-top: 1px solid var(--line); }
.footer-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 40px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-left: auto; }
.footer nav a, .footer p a { text-decoration: none; color: var(--slate); font-size: 16px; }
.footer nav a:hover, .footer p a:hover { color: var(--ink); }
@media (max-width: 560px) { .footer nav { margin-left: 0; width: 100%; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px 28px; } .footer nav a { font-size: 15px; } }
.footer p { width: 100%; display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 15px; color: var(--slate); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* phones and tablets: skip effects that are costly to composite over a live 3D canvas */
@media (max-width: 860px), (pointer: coarse) {
  .nav.is-scrolled { background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .chapter .w > span { will-change: auto; }
}
@media (max-width: 860px), (pointer: coarse) {
  /* the pixel shapes travel in front of the page (below only the menu bar and the loader) */
  .flow-canvas { z-index: 45; }
}

/* ==========================================================================
   Phones: a calmer layout (everything here is phone-only; desktop is untouched)
   ========================================================================== */
.skip-tour, .to-top, .chat-less { display: none; }

@media (max-width: 860px) {
  /* --- the tour: laptop in the top half; each chapter's text holds in the bottom half, then scrolls on --- */
  :root { --stage-h: max(100svh, 580px); --pace: 1.6; }
  .beat:not(.beat--hero) { height: max(var(--stage-h), calc(var(--len-m, var(--len, 1)) * var(--stage-h) * var(--pace))); }
  .stage::after { display: none; }                      /* the laptop is no longer behind the copy, so no wash */
  .chapter { justify-content: flex-start; max-width: none; padding: max(50svh, 320px) 4px 0 0; }
  .chapter--hero { padding-top: calc(var(--nav-h) + 16px); }
  /* the design act's layers spread lower than the other acts: start its copy a little further down */
  .has-3d .chapter[data-chapter="design"] { padding-top: max(54svh, 340px); }
  .chapter--hero h1 { font-size: clamp(32px, 9.4vw, 44px); line-height: 1.02; }
  .chapter--hero .lead { margin-top: 12px; font-size: 16px; line-height: 1.45; max-width: 30em; }
  .offer { gap: 8px; margin-top: 16px; }
  .offer li { border-radius: 99px; box-shadow: 0 0 0 1px rgba(13, 22, 38, .14); }
  .offer a { padding: 7px 14px 7px 30px; }
  .hero-note { display: none; }
  .offer li::before { left: 13px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 3px; }
  .offer b { font-size: 14px; font-weight: 600; }
  .offer span { display: none; }
  .chapter--hero .actions, .chapter--hero .offer + .actions { margin-top: 20px; gap: 12px 22px; }
  .offer b::after { content: " ›"; opacity: .5; } /* the pills are links: say so */
  .skip-tour { display: inline-block; color: var(--slate); text-decoration-color: rgba(88, 99, 119, .4); font-weight: 500; }
  .step-label { margin-bottom: 12px; }
  .chapter h2 { font-size: clamp(27px, 7.6vw, 34px); line-height: 1.05; }
  .chapter h2 + .lead { margin-top: 12px; }
  .chapter .lead { font-size: 16px; line-height: 1.5; }

  /* the step bar: group names over seven tappable steps */
  .rail { left: var(--gutter); right: var(--gutter); bottom: max(4px, env(safe-area-inset-bottom)); gap: 10px; }
  .rail-group { gap: 0; }
  .rail-group--ai { flex-grow: 1.4; }
  .rail-group--you { flex-grow: 1.7; }
  .rail-name { font-size: 12px; }
  .rail-long { display: none; }
  .rail-short { display: inline; }
  .rail-steps { gap: 4px; }
  .rail-steps button { gap: 0; padding: 10px 0 12px; }
  .rail-steps button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  /* --- below the tour: tighter sections, pictures sit above their heading, no big gaps --- */
  .scene { padding: 52px 0 60px; }
  .scene-grid, .scene-grid--flip { gap: 10px; }
  .scene-art { height: 190px; }
  .scene-copy h2 { font-size: clamp(28px, 8vw, 36px); line-height: 1.05; }
  .scene-copy h2 + .lead { margin-top: 12px; }
  .kicker { margin-bottom: 10px; font-size: 15px; }
  .service { margin-top: 26px; padding-top: 22px; }
  .service h3 { font-size: 23px; }
  .scene .chat { margin-top: 28px; }
  /* the demo's header: name and "Demo" pill fit one line at common phone widths, wrap
     (never overflow) on narrower ones, and a short subtitle */
  .chat-head { gap: 10px; padding: 14px 16px; }
  .chat-head > div { min-width: 0; }
  .chat-head b { font-size: 14px; overflow-wrap: anywhere; }
  .chat-pill { margin-left: 4px; white-space: nowrap; }
  .chat-more { display: none; }
  .chat-less { display: inline; }
  .chat-intro { margin-top: 26px; }
  .scene .chat-intro + .chat { margin-top: 12px; }
  .tour-note, .work-name { margin-top: 10px; font-size: 14px; }
  .steps { margin-top: 28px; }
  .steps li { padding: 18px 0; }
  .faq { margin-top: 24px; }
  .faq summary { padding: 18px 0; font-size: 18px; }
  .form { margin-top: 24px; padding: 20px; }
  .outro { padding-top: 20px; }

  /* --- back to top: a quick way out of the long page --- */
  .to-top { display: grid; place-items: center; position: fixed; right: 14px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 74px); z-index: 60; width: 46px; height: 46px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 255, 255, .96); color: var(--ink); box-shadow: 0 10px 26px -12px rgba(13, 22, 38, .5); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .25s, transform .3s var(--ease); -webkit-tap-highlight-color: transparent; }
  .to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
}
/* phones with room for the two offer pills: "Websites" already goes where "See how it works" does,
   so drop the duplicate and keep one clear next step (short phones hide the pills and keep the link) */
@media (max-width: 860px) and (min-height: 741px) {
  .chapter--hero .actions .text-link:not(.skip-tour) { display: none; }
}
@media (max-width: 860px) and (max-height: 740px) {
  .offer { display: none; }
  .chapter--hero { padding-top: calc(var(--nav-h) + 8px); }
  .chapter--hero h1 { font-size: clamp(28px, 8.4vw, 36px); }
  .chapter--hero .lead { font-size: 15px; margin-top: 10px; }
  .lead-more { display: none; } /* short screens: the first sentence says it */
  .chapter--hero .actions { margin-top: 14px; gap: 8px 18px; }
  .chapter--hero .btn { min-height: 48px; }
  /* the last chapter: the button and the AI link stay clear of the step bar (the link covers the AI line) */
  .chapter--end .step-label { margin-bottom: 6px; }
  .chapter--end h2 + .lead { margin-top: 10px; }
  .chapter--end .actions { flex-direction: column; align-items: flex-start; margin-top: 14px; gap: 4px; }
  .chapter--end .btn { min-height: 48px; }
}