/* Page styles for the continuous world: copy blocks, rail, name tag, scrims. */

/* Worldflight: nothing but the spacer may sit in document flow, so the chrome is fixed. */
.staging {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 400; margin: 0;
  padding: 6px 16px; text-align: center;
  font: 600 12px/1.4 var(--sc-font-text); letter-spacing: .04em;
  background: var(--sc-ink); color: var(--sc-canvas);
}

.rail {
  position: fixed; top: 16px; right: 16px; z-index: 300;
  font-family: var(--sc-font-text);
}
.rail__agent { margin: 0 0 8px; font-size: 13px; color: var(--sc-ink-soft); text-align: right; }
.rail__agent span { color: var(--sc-ink); font-weight: 600; }
.rail__stops { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.rail__stop {
  font: 600 13px/1 var(--sc-font-text); color: var(--sc-ink-soft);
  background: color-mix(in srgb, var(--sc-canvas) 85%, transparent);
  border: 1.5px solid transparent; border-radius: 999px; padding: 10px 14px; min-height: 44px;
  cursor: pointer;
}
.rail__stop[aria-current="true"] { color: var(--sc-ink); border-color: var(--sc-ink); }
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  .rail { top: auto; bottom: 36px; left: 16px; right: 16px; }
  .rail__agent { display: none; }
  .rail__stops { justify-content: center; }
  .rail__stop { font-size: 0; padding: 0; width: 14px; min-height: 14px; height: 14px; border-color: var(--sc-ink-soft); }
  .rail__stop::after { content: ""; }
  .rail__stops li { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
  .rail__stop[aria-current="true"] { background: var(--sc-ink); }
}

/* ---- brand ------------------------------------------------------------------------------- */
.brand { position: fixed; top: 20px; left: var(--sc-gutter); z-index: 300; color: var(--sc-ink); text-decoration: none; }
.wordmark { display: inline-flex; align-items: flex-start; gap: 3px; }
.wordmark__name { font: 800 20px/1 var(--sc-font-display); letter-spacing: -0.03em; }
.wordmark__ai { font: 800 8px/1 var(--sc-font-display); color: var(--sc-accent); letter-spacing: 0.04em; }

/* ---- copy blocks ------------------------------------------------------------------------- */
/* The copy layer covers the engine's stage exactly, so everything in it measures against the
   layer (container units), not the viewport: on an iPhone, vh is the height with Safari's
   toolbars hidden, and overlays sized by it drift off the video. */
[data-sc-world-copy] { container-type: size; }

/* Each waypoint's block sits where its scene leaves room: the sky, the office wall, the left
   of the kneeling robot. A soft paper panel is the scrim, only where the text is. */
.wp {
  top: clamp(84px, 13cqh, 128px); bottom: auto; inset-inline: auto; left: var(--sc-gutter);
  max-width: min(34rem, 44cqw);
  padding: 22px 26px; border-radius: 20px;
  background: color-mix(in srgb, var(--sc-canvas) 86%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--sc-ink); font-family: var(--sc-font-text);
}
.wp--street { max-width: min(44rem, 50cqw); }
.wp__display {
  font: 800 clamp(34px, 4.4cqw, 64px)/1.02 var(--sc-font-display); letter-spacing: -0.035em; margin: 0;
}
.wp__display em { font-style: normal; color: var(--sc-accent); }
.wp__title { font: 800 clamp(24px, 2.6cqw, 38px)/1.08 var(--sc-font-display); letter-spacing: -0.03em; margin: 0; }
.wp__body { font-size: clamp(16px, 1.25cqw, 19px); line-height: 1.55; color: var(--sc-ink-soft); margin: 14px 0 0; max-width: 46ch; }
.wp__small { font-size: 14px; color: var(--sc-ink-soft); margin: 12px 0 0; }

.wp--prologue { top: auto; bottom: clamp(72px, 10cqh, 110px); max-width: min(30rem, 40cqw); }
.wp__for { font: 600 13px/1.3 var(--sc-font-text); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-accent); margin: 0; }
.wp__prologue { font-size: 17px; line-height: 1.5; margin: 8px 0 0; }

.office__chat { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.office__chat li {
  justify-self: start; font-size: 14px; padding: 8px 12px; border-radius: 14px 14px 14px 4px;
  background: var(--sc-surface); border: 1.5px solid var(--sc-ink);
}
.office__chat li:nth-child(even) { justify-self: end; border-radius: 14px 14px 4px 14px; background: #F3E3C8; }

/* ---- the name tag (signature move) -------------------------------------------------------- */
.nametag { margin-top: 18px; }
.nametag__label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.nametag__row { display: flex; gap: 8px; }
.nametag__input {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid var(--sc-ink); background: var(--sc-surface);
  font: 600 17px/1 var(--sc-font-text); color: var(--sc-ink);
}
.nametag__go, .cta {
  min-height: 48px; padding: 0 20px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--sc-ink); color: var(--sc-canvas); font: 600 16px/48px var(--sc-font-text);
  text-decoration: none; display: inline-block; white-space: nowrap;
}
.nametag__suggest { display: flex; gap: 8px; margin-top: 10px; }
.nametag__suggest button {
  min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--sc-ink-soft); background: transparent; font: 600 14px var(--sc-font-text); color: var(--sc-ink);
}
/* The name drawn on the blank tag in the robot's hand, on the kneel's held frame. The box below
   reproduces the video's object-fit: cover (a 16:9 frame covering the viewport, centred), so the
   tag's position, measured on the held frame at 36.1-48.1% across and 58.3-70.2% down, holds at
   any window shape. */
.kneel__tag {
  position: absolute; left: 50%; top: 50%; margin: 0; pointer-events: none;
  width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); translate: -50% -50%;
}
.wp--kneel { max-width: min(27rem, 29cqw); }
.wp--kneel .wp__title { font-size: clamp(22px, 2.1cqw, 32px); }

/* ---- jobs -------------------------------------------------------------------------------- */
.wp--jobs { max-width: min(60rem, 70cqw); }
.jobs__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.job-card { background: var(--sc-surface); border: 1.5px solid var(--sc-ink); border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; align-content: start; }
.job-card--orders { border-top: 6px solid var(--gg-sand); }
.job-card--scheduling { border-top: 6px solid var(--gg-teal); }
.job-card--reporting { border-top: 6px solid var(--gg-coral); }
.job-card__who { margin: 0; font: 800 15px/1.2 var(--sc-font-display); display: grid; gap: 3px; }
.job-card__ex { font: 600 11px/1.2 var(--sc-font-text); color: var(--sc-ink-soft); letter-spacing: 0.04em; text-transform: uppercase; }
.job-card__text { margin: 0; font-size: 14px; line-height: 1.45; }
.job-card__ok { justify-self: start; margin: 2px 0 0; padding: 6px 12px; border-radius: 999px; background: var(--gg-teal); color: var(--sc-canvas); font: 600 12px/1 var(--sc-font-text); }
.jobs__proof { font-size: 14px; line-height: 1.5; color: var(--sc-ink-soft); margin: 14px 0 0; max-width: 70ch; }

/* ---- door -------------------------------------------------------------------------------- */
.wp--door { top: auto; bottom: clamp(64px, 12cqh, 120px); }
.wp--door .cta { margin-top: 20px; }

/* ---- phone ------------------------------------------------------------------------------- */

/* ---- onward: in-copy buttons that glide to the next waypoint; scrolling still works ------- */
/* Filled in the accent so they read as the way forward, with a slow ring that breathes out from
   them. The ring is the only looping motion on the page and it stops under reduced motion. */
.onward {
  position: relative; margin-top: 20px; min-height: 48px; padding: 0 22px; border-radius: 999px; cursor: pointer;
  border: 0; background: var(--sc-accent); color: var(--sc-ink);
  font: 600 16px/1 var(--sc-font-text);
  box-shadow: 0 3px 0 var(--sc-ink);
  transition: transform .18s ease, box-shadow .18s ease;
}
.onward::after {
  content: ""; position: absolute; inset: -4px; border-radius: inherit; pointer-events: none;
  border: 2px solid var(--sc-accent); opacity: 0;
  animation: onward-breathe 2.8s ease-out 1.2s infinite;
}
.onward:hover, .onward:focus-visible { transform: translateY(-2px); box-shadow: 0 5px 0 var(--sc-ink); }
.onward:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sc-ink); }
@keyframes onward-breathe {
  0% { opacity: .9; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.18, 1.5); }
}
.onward--quiet {
  background: transparent; box-shadow: none; color: var(--sc-ink-soft);
  text-decoration: underline; padding: 0 4px; margin-top: 8px; min-height: 44px; font-size: 14px;
}
.onward--quiet::after { content: none; }
.onward--quiet:hover { transform: none; box-shadow: none; color: var(--sc-ink); }

/* The name landing on the tag: a small pop so the hold has something to watch. */
.kneel__tag.is-new span { animation: tag-pop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tag-pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .onward::after, .kneel__tag.is-new span { animation: none; }
}

/* ==== scene layers and arrival beats ======================================================== */
/* A scene layer reproduces the video's object-fit: cover (a 16:9 frame covering the viewport,
   centred), so anything placed in it in percentages sits on the same spot of the frame at any
   window shape. The engine moves copy blocks with transform; a scene must not move, or it would
   slide off the frame, hence transform: none. */
.scene {
  position: absolute; left: 50%; top: 50%; margin: 0; pointer-events: none;
  width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); translate: -50% -50%;
  transform: none !important;
}

/* Arrival beats: [data-beat] gets .is-here (beats.js) while its scene holds. Anything marked
   .beat-in waits hidden and plays in at its own --d delay. Only with JavaScript, so a page
   without it shows everything at once; never under reduced motion. */
@keyframes beat-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { 0% { opacity: 0; transform: translate(-50%, 14px) scale(.6); } 70% { transform: translate(-50%, -3px) scale(1.04); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.has-js [data-beat] .beat-in { opacity: 0; visibility: hidden; }
.has-js [data-beat].is-here .beat-in { visibility: visible; animation: beat-in .55s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both; }

/* -- Main Street: the headline builds; "Big" lands heavy, "small" shrinks to size ------------ */
.wp--street .w { display: inline-block; }
.has-js .wp--street .w { opacity: 0; }
.has-js .wp--street.is-here .w { animation: word-in .5s cubic-bezier(.2, .8, .2, 1) both; }
.has-js .wp--street.is-here .w:nth-child(1) { animation-name: word-big; animation-duration: .7s; animation-delay: .1s; }
.has-js .wp--street.is-here .w:nth-child(2) { animation-delay: .45s; }
.has-js .wp--street.is-here .w:nth-child(3) { animation-delay: .6s; }
.has-js .wp--street.is-here .w:nth-child(4) { animation-name: word-small; animation-duration: .9s; animation-delay: .8s; transform-origin: 30% 80%; }
.has-js .wp--street.is-here .w:nth-child(5) { animation-delay: 1.15s; }
@keyframes word-in { from { opacity: 0; transform: translateY(.4em); } to { opacity: 1; transform: none; } }
@keyframes word-big { 0% { opacity: 0; transform: translateY(-.6em) scale(1.5); } 55% { opacity: 1; transform: translateY(.05em) scale(1.08, .9); } 75% { transform: scale(.97, 1.03); } 100% { opacity: 1; transform: none; } }
@keyframes word-small { 0% { opacity: 0; transform: scale(2.6); } 30% { opacity: 1; transform: scale(2.6); } 80% { transform: scale(.92); } 100% { opacity: 1; transform: none; } }

/* -- The back office: bubbles over heads, then the robot appears in the window -------------- */
.office-robot { opacity: 0; transition: opacity .9s ease; }
.office-robot img { position: absolute; inset: 0; width: 100%; height: 100%; }
.office-robot .office-robot__tall { display: none; }
.office-robot.is-shown { opacity: 1; }
.bubble {
  position: absolute; margin: 0; max-width: 17%; padding: .7em 1em; translate: -50% 0;
  font: 600 clamp(12px, 1cqw, 16px)/1.3 var(--sc-font-text); color: var(--sc-ink);
  background: var(--sc-surface); border: 2px solid var(--sc-ink); border-radius: 16px;
  box-shadow: 0 3px 0 var(--sc-ink); opacity: 0;
}
.bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; translate: -50% 0;
  background: var(--sc-surface); border-right: 2px solid var(--sc-ink); border-bottom: 2px solid var(--sc-ink); rotate: 45deg;
}
.bubble--2 { background: #F3E3C8; } .bubble--2::after { background: #F3E3C8; }
.scene--office.is-here .bubble { animation: bubble-in .5s cubic-bezier(.3, 1.5, .5, 1) var(--d) both; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(10px) scale(.6); } to { opacity: 1; transform: none; } }
.wp--office { max-width: min(36rem, 40cqw); }
.wp--office .wp__title { font-size: clamp(22px, 2.2cqw, 34px); }
.wp--office .office__chat { display: none; }

/* -- The kneel: a blinking cursor on the blank tag, a blinking robot ------------------------- */
.kneel__name {
  position: absolute; left: 36.1%; top: 58.3%; width: 12%; height: 11.9%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font: 800 clamp(14px, 1.6cqw, 28px)/1 var(--sc-font-display); letter-spacing: -0.02em; color: var(--sc-ink);
  transform: rotate(3deg); overflow: hidden; white-space: nowrap;
}
.kneel__tag:not(.has-name) .kneel__name::after {
  content: ""; width: 3px; height: 1.1em; background: var(--sc-ink); animation: cursor 1s steps(1) infinite;
}
@keyframes cursor { 50% { opacity: 0; } }
.lid { position: absolute; background: #000B10; border-radius: 50%; transform: scaleY(0); transform-origin: 50% 0; }
.lid--l { left: 66.9%; top: 25.6%; width: 1.4%; height: 2.6%; }
.lid--r { left: 73.7%; top: 25.2%; width: 1.4%; height: 2.6%; }
.kneel__tag.is-here .lid { animation: blink 4.2s ease-in-out 1.2s infinite; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(0); } 95% { transform: scaleY(1.05); } }
.nametag__or { margin: 12px 0 0; font-size: 13px; color: var(--sc-ink-soft); }
.nametag__suggest { margin-top: 6px; }

/* -- The jobs: cards over each pair, then each Approve flips to Approved --------------------- */
.wp--jobs { max-width: none; left: var(--sc-gutter); right: var(--sc-gutter); padding: 18px 24px; }
.jobs__strip { display: flex; align-items: center; gap: 24px; justify-content: space-between; }
.jobs__strip .onward { margin-top: 0; flex: none; }
.jobs__strip > div { min-width: 0; }
.wp--jobs .jobs__proof { margin-top: 8px; font-size: 13px; }
.wp--jobs .jobs__cards { display: none; }
.scene--jobs .job-card {
  position: absolute; width: 21%; margin: 0; translate: -50% 0; opacity: 0;
  box-shadow: 0 4px 0 var(--sc-ink); border-width: 2px;
}
.scene--jobs.is-here .job-card { animation: card-in .55s cubic-bezier(.3, 1.4, .5, 1) var(--d) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(24px) scale(.7); } to { opacity: 1; transform: none; } }
.scene--jobs .job-card::after {
  content: ""; position: absolute; left: 50%; bottom: -10px; width: 16px; height: 16px; translate: -50% 0; rotate: 45deg;
  background: var(--sc-surface); border-right: 2px solid var(--sc-ink); border-bottom: 2px solid var(--sc-ink);
}
.job-card__ok { position: relative; display: inline-grid; }
.job-card__ok > span { grid-area: 1 / 1; }
.job-card__done { opacity: 0; }
.scene--jobs.is-here .job-card__ask { animation: chip-out .3s ease var(--ok) both; }
.scene--jobs.is-here .job-card__done { animation: chip-in .4s cubic-bezier(.3, 1.6, .5, 1) var(--ok) both; }
.scene--jobs.is-here .job-card__ok { animation: chip-flash .5s ease var(--ok) both; }
@keyframes chip-out { to { opacity: 0; transform: scale(.6); } }
@keyframes chip-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes chip-flash { 0% { background: var(--gg-teal); } 40% { background: var(--sc-accent); } 100% { background: var(--gg-teal); } }

/* -- Going back: a soft cut through paper ---------------------------------------------------- */
.curtain { position: fixed; inset: 0; z-index: 250; background: var(--sc-canvas); opacity: 0; pointer-events: none; transition: opacity .32s ease; }
.curtain.is-down { opacity: 1; }

/* -- Phone: the scene layers are drawn for the desktop frame, so the panel carries the beats -- */

@media (prefers-reduced-motion: reduce) {
  .has-js [data-beat] .beat-in, .has-js .wp--street .w, .bubble, .scene--jobs .job-card { opacity: 1 !important; visibility: visible !important; animation: none !important; }
  .office-robot { transition: none; }
  .lid, .kneel__name::after { animation: none !important; }
}

/* -- The door: Massive AI's name on the sign above the door --------------------------------- */
/* Measured on the held frame: the sign's corners run 54.1-82.5% across and 30.2-50.3% down,
   tilted about 8 degrees. Sized in container units so the lettering scales with the frame. */
.scene--door { container-type: size; }
.door__sign {
  position: absolute; left: 68.3%; top: 40.4%; width: 26%; height: 11%; margin: 0;
  translate: -50% -50%; rotate: -8deg;
  display: flex; align-items: center; justify-content: center; color: var(--sc-ink);
}
.door__sign .wordmark__name { font-size: 3.9cqw; }
.door__sign .wordmark__ai { font-size: 1.5cqw; }
.has-js .scene--door .door__sign { opacity: 0; }
.has-js .scene--door.is-here .door__sign { animation: sign-paint .9s cubic-bezier(.2, .8, .2, 1) .4s both; }
@keyframes sign-paint { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .has-js .scene--door .door__sign { opacity: 1; animation: none; } }

/* ==== phone ================================================================================== */
/* The phone plays its own portrait clips, so every scene layer is a 9:16 frame covering the
   viewport, and every touch is placed by coordinates measured on the portrait held frames. The
   copy is compact and sits where each portrait scene leaves room. */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  .scene { width: max(100cqw, 56.25cqh); height: max(100cqh, 177.78cqw); }

  .wp { left: 12px; right: 12px; max-width: none; top: 64px; padding: 14px 16px; }
  .wp__title { font-size: 21px; }
  .wp__body { font-size: 14px; margin-top: 8px; }
  .onward { margin-top: 14px; min-height: 46px; font-size: 15px; }
  .wp--prologue { top: auto; bottom: 84px; }

  /* Main Street: the headline in the sky, the rest in a card over the shops, so the robot's face
     rising over the roofs sits clear between them. */
  .wp--street {
    top: 64px; bottom: 84px; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    display: flex; flex-direction: column; justify-content: space-between; pointer-events: none;
  }
  .wp--street > * { pointer-events: auto; }
  .wp--street .wp__display { font-size: 40px; padding: 4px 4px 0; }
  .wp--street .wp__foot {
    background: color-mix(in srgb, var(--sc-canvas) 88%, transparent); border-radius: 18px; padding: 12px 14px;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
  .wp--street .wp__foot .wp__body { margin-top: 0; }

  /* The back office: copy in the empty window, bubbles over the heads. When the robot arrives
     the bubbles go and the copy steps down to the desks, clearing the window for its face. The
     copy block's transform belongs to the engine, so the step uses the separate translate. */
  .wp--office { top: 136px; translate: 0 0; transition: translate .7s cubic-bezier(.3, .7, .2, 1); }
  .wp--office .office__chat { display: none; }
  .office-robot.is-shown ~ .wp--office { translate: 0 calc(100cqh - 136px - 100% - 84px); }
  .scene--office { transition: filter .45s ease; }
  .office-robot.is-shown ~ .scene--office { filter: opacity(0); }
  .has-js [data-beat].is-here .onward--office { animation-delay: 4.5s; }
  .bubble { left: var(--mx) !important; bottom: calc(100% - var(--my)) !important; width: max-content; max-width: 38%; font-size: 12px; padding: .55em .8em; }
  .bubble--1 { translate: -18% 0; } .bubble--1::after { left: 18%; }
  .bubble--3 { translate: -82% 0; } .bubble--3::after { left: 82%; }
  .office-robot .office-robot__wide { display: none; }
  .office-robot .office-robot__tall { display: block; inset: auto; left: 16.17%; top: 13.75%; width: 75.43%; height: 70.49%; }

  /* The kneel: the headline sits in the sky, a compact name form docks below the tag, and the
     name lands on the tag. The frame stays centred (shifting it would break the hand-off from
     the office clip); only the tag's outer edge is cropped on a narrow phone. */
  .kneel__name { left: 7.1%; top: 65.3%; width: 19%; height: 6.6%; font-size: 15px; }
  .lid--l { left: 52.6%; top: 40.9%; width: 2.4%; height: 2%; }
  .lid--r { left: 64%; top: 40.7%; width: 2.4%; height: 2%; }
  .wp--kneel {
    top: 64px; bottom: 84px; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    display: flex; flex-direction: column; justify-content: space-between; pointer-events: none;
  }
  .wp--kneel > * { pointer-events: auto; }
  .wp--kneel .wp__title, .wp--kneel .nametag {
    background: color-mix(in srgb, var(--sc-canvas) 88%, transparent); border-radius: 18px; padding: 12px 14px; margin: 0;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
  .wp--kneel .wp__title { font-size: 19px; }
  .wp--kneel .wp__title::after { content: " What should we call it?"; display: block; margin-top: 6px; font: 600 14px/1.3 var(--sc-font-text); letter-spacing: 0; color: var(--sc-ink-soft); }
  .wp--kneel .wp__body { display: none; }
  .wp--kneel .nametag { padding: 10px 12px; }
  .nametag__or { display: none; }
  .nametag__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nametag__input { min-height: 44px; font-size: 16px; }
  .nametag__go { min-height: 44px; line-height: 44px; padding: 0 14px; font-size: 15px; }
  .nametag__suggest { margin-top: 8px; gap: 6px; align-items: center; }
  .nametag__suggest button { min-height: 36px; padding: 0 12px; font-size: 13px; }
  .wp--kneel .nametag .onward--quiet { margin: 0 0 0 auto; min-height: 36px; font-size: 13px; }
  .wp--kneel .nametag { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; }
  .wp--kneel .nametag__row { grid-column: 1 / -1; }
  .wp--kneel .nametag__suggest { grid-column: 1; }
  .wp--kneel .nametag .onward--quiet { grid-column: 2; align-self: end; }

  /* The jobs: the strip at the top, three compact cards in a row above the three pairs, tails
     pointing down at each. */
  .wp--jobs { left: 12px; right: 12px; padding: 14px 16px; }
  .jobs__strip { flex-direction: column; align-items: flex-start; gap: 10px; }
  .wp--jobs .jobs__proof { font-size: 12px; }
  .wp--jobs .jobs__cards { display: none; }
  .scene--jobs {
    left: 8px; right: 8px; top: auto; bottom: 37cqh; width: auto; height: auto; translate: none;
    display: flex; gap: 6px; align-items: flex-end;
  }
  .scene--jobs .job-card { position: relative; left: auto !important; bottom: auto !important; translate: none; width: auto; flex: 1; padding: 9px 9px 10px; gap: 4px; }
  .scene--jobs .job-card--scheduling { order: 1; }
  .scene--jobs .job-card--orders { order: 2; }
  .scene--jobs .job-card--reporting { order: 3; }
  .scene--jobs .job-card::after { left: var(--tail, 50%); }
  .scene--jobs .job-card--scheduling { --tail: 26%; }
  .scene--jobs .job-card--orders { --tail: 40%; }
  .scene--jobs .job-card--reporting { --tail: 80%; }
  .scene--jobs .job-card__who { font-size: 12px; }
  .scene--jobs .job-card__ex { font-size: 9px; }
  .scene--jobs .job-card__text { font-size: 11px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .scene--jobs .job-card__ok { font-size: 10px; padding: 5px 9px; }

  /* The door: the copy in the sky above the robots, the name on the sign below it. */
  .wp--door { top: 64px; bottom: auto; }
  .door__sign { left: 53.3%; top: 52%; width: 40%; height: 7%; rotate: -9deg; }
  .door__sign .wordmark__name { font-size: 6.4cqw; }
  .door__sign .wordmark__ai { font-size: 2.4cqw; }
}

/* ==== booking ================================================================================ */
/* Book a free AI audit on the page (booking.js): a card on the canvas, in the site's type, over
   a soft ink veil. Fills the screen on a phone. */
.booking {
  width: min(560px, calc(100% - 32px)); max-height: calc(100% - 48px); padding: 0; border: 0; border-radius: 24px;
  background: var(--sc-canvas); color: var(--sc-ink); box-shadow: 0 6px 0 var(--sc-ink); overflow: auto;
  overscroll-behavior: contain;
}
/* The page behind is scroll-driven, so it holds still while the dialog is open. */
html:has(.booking[open]) { overflow: hidden; }
.booking::backdrop { background: rgb(36 33 29 / 0.45); }
.booking[open] { animation: booking-in .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes booking-in { from { opacity: 0; translate: 0 16px; } }
.booking__card { position: relative; padding: 28px 28px 24px; border: 2px solid var(--sc-ink); border-radius: 24px; }
.booking__close {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--sc-ink-soft); background: transparent; color: var(--sc-ink); font: 400 24px/1 var(--sc-font-text); cursor: pointer;
}
.booking__kicker { margin: 0 52px 6px 0; font: 600 13px/1.3 var(--sc-font-text); letter-spacing: .04em; text-transform: uppercase; color: var(--sc-ink-soft); }
.booking__title { margin: 0 0 12px; font: 800 30px/1.05 var(--sc-font-display); letter-spacing: -0.02em; }
.booking__note, .booking__chosen { margin: 0 0 14px; font: 400 16px/1.45 var(--sc-font-text); color: var(--sc-ink-soft); }
.booking__chosen { color: var(--sc-ink); font-weight: 600; }
.booking__days { display: grid; gap: 16px; }
.booking__day h3 { margin: 0 0 8px; font: 700 15px/1.2 var(--sc-font-text); }
.booking__times { display: flex; flex-wrap: wrap; gap: 8px; }
.booking__time {
  min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--sc-ink); background: var(--sc-surface); color: var(--sc-ink); font: 600 15px var(--sc-font-text);
}
.booking__time:hover, .booking__time:focus-visible { background: var(--gg-sand); }
.booking__form { display: grid; gap: 10px; }
.booking__form label { display: grid; gap: 6px; font: 600 15px/1.2 var(--sc-font-text); }
.booking__optional { font-weight: 400; color: var(--sc-ink-soft); }
.booking__form input, .booking__form textarea {
  min-height: 48px; padding: 12px 16px; border-radius: 16px; border: 1.5px solid var(--sc-ink);
  background: var(--sc-surface); font: 500 16px/1.35 var(--sc-font-text); color: var(--sc-ink); resize: vertical;
}
.booking__error { margin: -4px 0 0; font: 600 14px/1.3 var(--sc-font-text); color: #B4432F; }
.booking__actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; }
.booking__back {
  min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--sc-ink-soft);
  background: transparent; color: var(--sc-ink); font: 600 15px var(--sc-font-text); cursor: pointer;
}
.booking [data-booking-submit]:disabled { opacity: .6; cursor: progress; }
.booking__status { margin: 14px 0 0; font: 500 15px/1.4 var(--sc-font-text); color: var(--sc-ink-soft); }
.booking__status:empty { display: none; }
.booking__fallback { margin: 8px 0 0; }
.booking__fallback a { font: 700 16px var(--sc-font-text); color: var(--sc-ink); }
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  .booking { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border-radius: 0; box-shadow: none; }
  .booking__card {
    min-height: 100%; border: 0; border-radius: 0;
    padding: calc(24px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  }
  .booking__close { top: calc(14px + env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .booking[open] { animation: none; } }

/* ---- short desktop windows ----------------------------------------------------------------- */
/* A wide, short window (a laptop with its browser bars) crops the video top and bottom, which
   lifts the bubbles and the job cards up into the copy. There the copy sits higher and tighter,
   and the office's body runs wider so it takes fewer lines; the job cards sit a little lower,
   nearer the robots they point at. */
@container (min-width: 861px) and (max-height: 920px) {
  .wp { top: 62px; padding: 14px 20px; }
  .wp__title { line-height: 1.04; }
  .wp__body { font-size: 15px; line-height: 1.45; margin-top: 8px; }
  .onward { margin-top: 12px; }
  .wp--office { max-width: min(42rem, 50cqw); }
  .wp--office .wp__body { max-width: none; }
  .wp--jobs { top: 96px; padding: 12px 20px; }
  .wp--jobs .jobs__proof { margin-top: 4px; max-width: none; }
  .scene--jobs .job-card { translate: -50% 30px; }
  .wp--jobs .wp__title { font-size: clamp(22px, 2.2cqw, 32px); }
}
/* Shorter still (a small laptop window): the cards shrink a little toward their robots. */
@container (min-width: 861px) and (max-height: 720px) {
  .scene--jobs .job-card { translate: -50% 40px; scale: .9; transform-origin: 50% 100%; }
}

/* A forward scroll at the kneel waits for a name: the form nudges to say why (waypoints.js). */
form[data-name-tag].is-nudge .nametag__row { animation: nudge .45s cubic-bezier(.3, .7, .3, 1); }
@keyframes nudge { 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }
@media (prefers-reduced-motion: reduce) { form[data-name-tag].is-nudge .nametag__row { animation: none; } }