/* 4Corners Media: the sections after the zoom. Tokens and components follow the brand guide (Design System v11);
   the glass button, push flap, Tag and fc-frame rules are copied from its components/bundle.css. */
:root {
  --glass: #ffffff99; --glass-strong: #ffffffe6; --glass-edge: #16151452;
  --glass-signal: #db2f18f5; --glass-signal-edge: #ffbeaf8c;
  --glass-image: #ffffff1a; --glass-image-strong: #ffffff33; --glass-image-edge: #ffffff8c;
  --glass-signal-image: #db2f188c; --glass-signal-image-strong: #db2f18b3;
  --scrim: #161514b3; --shadow-1: 0 1px 2px #1615140f, 0 2px 6px #16151414; --shadow-2: 0 2px 6px #16151414, 0 12px 28px -8px #1615142e;
  --dur-swing: 520ms; --ease-gravity: cubic-bezier(.5, 0, 1, 1);
  /* The red room behind the cut-out machine: the backdrop photo's own red, beyond its edges. */
  --room: #c51b11;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --glass: #ffffff14; --glass-strong: #ffffff29; --glass-edge: #ffffff5c; --glass-signal: #db2f18d9; --shadow-1: 0 1px 2px #00000080; --shadow-2: 0 12px 28px -8px #000000b3; }
}
:root[data-theme="dark"] { --glass: #ffffff14; --glass-strong: #ffffff29; --glass-edge: #ffffff5c; --glass-signal: #db2f18d9; --shadow-1: 0 1px 2px #00000080; --shadow-2: 0 12px 28px -8px #000000b3; }

h3, ol, ul, dl { margin: 0; }
.fc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.display-l {
  font-family: var(--font-display); font-stretch: 104%; font-weight: 900;
  font-size: clamp(40px, 5vw, 64px); line-height: .98; letter-spacing: -.03em; text-wrap: balance;
}
main h2 {
  font-family: var(--font-display); font-stretch: 104%; font-weight: 900;
  font-size: clamp(40px, 5vw, 64px); line-height: .98; letter-spacing: -.03em; text-wrap: balance;
}
main .lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; max-width: 52ch; }
main .label { margin-bottom: var(--space-4); }
/* On red, the stop can't be red: it turns white, like the corners. */
.fc-on-signal .stop { background: var(--brand-white); }

/* ---------- Kit: clear glass button and the push flap ---------- */

.fc-icon { width: 20px; height: 20px; flex: none; overflow: visible; }
.fc-icon .fc-i-red { fill: var(--signal); }
.fc-btn {
  --z: 1; --in: -13px; --o: 0; --cc: var(--ink); --cr: var(--signal);
  --g-fill: var(--glass); --g-edge: var(--glass-edge); --g-text: var(--ink); --g-blur: 18px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; vertical-align: middle;
  height: 46px; padding: 0 22px; border: 0; border-radius: var(--radius-tile);
  background: var(--g-fill); color: var(--g-text); box-shadow: inset 0 0 0 1px var(--g-edge);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(165%); backdrop-filter: blur(var(--g-blur)) saturate(165%);
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: -.005em; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transform: scale(var(--z));
  transition: transform var(--dur-base) var(--ease-snap), background-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.fc-btn > * { position: relative; z-index: 1; }
.fc-btn::before {
  content: ""; position: absolute; inset: var(--in); opacity: var(--o); pointer-events: none;
  background:
    linear-gradient(var(--cr), var(--cr)) top left / 10px 2px no-repeat, linear-gradient(var(--cr), var(--cr)) top left / 2px 10px no-repeat,
    linear-gradient(var(--cc), var(--cc)) top right / 10px 2px no-repeat, linear-gradient(var(--cc), var(--cc)) top right / 2px 10px no-repeat,
    linear-gradient(var(--cc), var(--cc)) bottom left / 10px 2px no-repeat, linear-gradient(var(--cc), var(--cc)) bottom left / 2px 10px no-repeat,
    linear-gradient(var(--cc), var(--cc)) bottom right / 10px 2px no-repeat, linear-gradient(var(--cc), var(--cc)) bottom right / 2px 10px no-repeat;
  transition: inset var(--dur-base) var(--ease-snap), opacity var(--dur-fast) var(--ease-standard);
}
.fc-btn:focus-visible { outline: none; }
.fc-btn:is(:hover, :focus-visible) { --in: -7px; --o: 1; --z: 1.04; --g-fill: var(--glass-strong); }
.fc-btn:active { --z: .98; }
.fc-btn-lg { height: 56px; padding: 0 28px; font-size: 17px; }
.fc-btn .fc-icon { width: 18px; height: 18px; transition: transform var(--dur-base) var(--ease-snap); }
.fc-btn-lg .fc-icon { width: 20px; height: 20px; }
.fc-btn:is(:hover, :focus-visible) .fc-icon { transform: translateX(3px); }
.fc-btn-primary { --g-fill: var(--glass-signal); --g-edge: var(--glass-signal-edge); --g-text: var(--on-signal); }
.fc-btn-primary .fc-i-red { fill: currentColor; }
.fc-btn-primary:is(:hover, :focus-visible) { --g-fill: var(--signal-deep); }
:is(.fc-on-image, .fc-on-signal) .fc-btn {
  --g-fill: var(--glass-image); --g-edge: var(--glass-image-edge); --g-text: var(--brand-white); --cc: var(--brand-white); --g-blur: 22px; text-shadow: 0 1px 2px #0000004d;
}
:is(.fc-on-image, .fc-on-signal) .fc-btn-primary { --g-fill: var(--glass-signal-image); --g-edge: var(--glass-signal-edge); }
:is(.fc-on-image, .fc-on-signal) .fc-btn:is(:hover, :focus-visible) { --g-fill: var(--glass-image-strong); }
.fc-on-signal .fc-btn { --cr: var(--brand-white); }
.fc-on-signal .fc-btn-primary { --g-fill: color-mix(in srgb, var(--brand-white) 88%, transparent); --g-edge: transparent; --g-text: var(--signal); text-shadow: none; }
.fc-on-signal .fc-btn-primary:is(:hover, :focus-visible) { --g-fill: var(--brand-white); }

.fc-btn-flap { padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; perspective: 320px; perspective-origin: 50% 0; }
.fc-btn-flap:active { --z: 1.04; }
.fc-btn-pane {
  --fc-swing-back: linear(0 0%, 0.028 7%, 0.111 14%, 0.25 21%, 0.444 28%, 0.694 35%, 1 42%, 0.899 46.5%, 0.828 51%, 0.784 55.5%, 0.77 60%, 0.784 64%, 0.828 68%, 0.899 72%, 1 76%, 0.974 78.75%, 0.955 81.5%, 0.944 84.25%, 0.94 87%, 0.944 90.25%, 0.955 93.5%, 0.974 96.75%, 1 100%);
  display: inline-flex; flex: 1; align-self: stretch; align-items: center; justify-content: center; gap: inherit; box-sizing: border-box; padding: 0 22px;
  border-radius: inherit; background: var(--g-fill); box-shadow: inset 0 0 0 1px var(--g-edge);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(165%); backdrop-filter: blur(var(--g-blur)) saturate(165%);
  transform-origin: 50% 0; backface-visibility: hidden;
  transition: transform var(--dur-swing) var(--fc-swing-back), filter var(--dur-swing) var(--fc-swing-back), background-color var(--dur-fast) var(--ease-standard);
}
.fc-btn-flap.fc-btn-lg .fc-btn-pane { padding: 0 28px; }
.fc-btn-flap:active .fc-btn-pane {
  transform: rotateX(-48deg); filter: brightness(.72);
  transition: transform 120ms var(--ease-snap), filter 120ms var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.fc-btn-flap > .fc-btn-bay { position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: var(--brand-black); box-shadow: inset 0 0 0 1px #3a3733; opacity: 0; transition: opacity var(--dur-swing) step-end; }
.fc-btn-bay::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 5px; height: 4px; border-radius: 2px; background: #2b2926; }
.fc-btn-flap:active > .fc-btn-bay { opacity: 1; transition: none; }

/* ---------- Kit: Tag (corner-framed label), fc-frame, tile bullets ---------- */

.fc-tag {
  --c: var(--ink); --cr: var(--signal); --q: var(--ink);
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; vertical-align: middle;
  color: var(--ink); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
.fc-tag::before, .fc-frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--cr), var(--cr)) top left / var(--fa, 5px) var(--ft, 1.5px) no-repeat, linear-gradient(var(--cr), var(--cr)) top left / var(--ft, 1.5px) var(--fa, 5px) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--fa, 5px) var(--ft, 1.5px) no-repeat, linear-gradient(var(--c), var(--c)) top right / var(--ft, 1.5px) var(--fa, 5px) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--fa, 5px) var(--ft, 1.5px) no-repeat, linear-gradient(var(--c), var(--c)) bottom left / var(--ft, 1.5px) var(--fa, 5px) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--fa, 5px) var(--ft, 1.5px) no-repeat, linear-gradient(var(--c), var(--c)) bottom right / var(--ft, 1.5px) var(--fa, 5px) no-repeat;
}
.fc-tag-sq { width: 7px; height: 7px; border-radius: 1.5px; background: var(--q); flex: none; }
.fc-tag-sq.fc-flavor-lime { --q: var(--flavor-lime); }
.fc-tag-sq.fc-flavor-blue-raspberry { --q: var(--flavor-blue-raspberry); }
.fc-tag-sq.fc-flavor-grape { --q: var(--flavor-grape); }
.fc-tag-sq.fc-flavor-orange { --q: var(--flavor-orange); }
.fc-tag.is-changed::before { animation: fc-close-in 360ms var(--ease-snap) both; }
.fc-on-image .fc-tag { --c: var(--brand-white); color: var(--brand-white); background: var(--scrim); border-radius: 2px; }
@keyframes fc-close-in { from { inset: -8px; opacity: 0; } }
.fc-frame { --c: var(--ink); --cr: var(--signal); --fa: 12px; --ft: 2px; position: relative; padding: var(--space-5); }

.tile-list { display: grid; gap: var(--space-3); padding: 0; list-style: none; }
.tile-list li { position: relative; padding-left: 22px; }
.tile-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 9px; height: 9px; border-radius: 2px; background: var(--ink); }
.tile-list li:first-child::before { background: var(--signal); }

/* The screen ads, shared by every machine on the page. Sized in the screen's own units (cqh). */
.ad { position: absolute; inset: 0; display: flex; align-items: center; gap: 6cqh; padding: 0 8cqh; color: var(--brand-white); background: var(--brand-black); visibility: hidden; }
.ad.is-on { visibility: visible; }
.ad-tiles { display: grid; grid-template: 17cqh 17cqh / 17cqh 17cqh; gap: 4cqh; padding: 0; place-content: center; background: var(--signal); }
.ad-tiles i { width: 17cqh; height: 17cqh; border-radius: 4.5cqh; background: var(--brand-white); }
.ad-copy, .ad-scan { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4cqh; }
.ad-scan { flex-direction: row; justify-content: space-between; align-items: center; }
.ad-scan > div { display: grid; gap: 4cqh; }
.ad-eyebrow { font-family: var(--font-mono); font-size: 7.5cqh; line-height: 1; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.ad-line { font-family: var(--font-display); font-stretch: 104%; font-weight: 900; font-size: 19cqh; line-height: .98; letter-spacing: -.03em; max-width: 15em; text-wrap: balance; }
.ad-light { background: var(--brand-white); color: var(--brand-black); }
.ad-qr { height: 76cqh; width: auto; flex: none; border-radius: 4cqh; background: var(--brand-white); padding: 4cqh; }
.ad-cover { position: absolute; inset: 0; display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 3cqh; padding: 0; pointer-events: none; }
.ad-cover span { border-radius: 5cqh; background: var(--signal); transform: scale(0); }

/* ---------- 02 · Rooms you can't buy (js/rooms.js) ---------- */

.rooms { position: relative; background: var(--room); }
.rooms-stage { position: relative; height: 100vh; height: 100dvh; overflow: clip; color: var(--brand-white); background: var(--room); }
.js .rooms-stage { position: sticky; top: 0; }
/* The set, the machines and the people share one world, moved and scaled by one camera transform. */
.rooms-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.rooms-set { position: absolute; left: 0; top: 0; overflow: visible; }
.rooms-machine { position: absolute; }
.rooms-machine > img { display: block; width: 100%; height: 100%; max-width: none; }
.rooms-machine > div { position: absolute; }
/* A room with its lights down, lit by its screen: the dark is a hole's shadow, so the light falls off in two flat
   steps (a quarter dark next to the screen, half dark beyond). The screen and the people stay above it. */
.rooms-dark { position: absolute; z-index: 1; overflow: hidden; opacity: 0; pointer-events: none; }
.rooms-dark i { position: absolute; }
.rooms-dark i:first-child { box-shadow: 0 0 0 200vmax rgba(22, 21, 20, .35); }
.rooms-dark i:last-child { box-shadow: 0 0 0 200vmax rgba(22, 21, 20, .26); }
.rooms-world .rooms-screen, .rooms-mark { z-index: 2; }
.rooms-world .figure { z-index: 3; }
/* Phones end on a tower (js/rooms.js): a copy of the floor per storey, each framed on its own room. */
.rooms-tower { position: absolute; z-index: 1; left: 0; top: 0; pointer-events: none; }
.rooms-tower[hidden] { display: none; }
.rooms-storey { position: absolute; left: 0; top: 0; overflow: hidden; }
.rooms-storey :is(.rooms-dark, .rooms-mark) { display: none; }
/* The screen is small in the shot, so the room ads run a size up, in signal red: your ad is the red thing in the
   room, as your booking is along the floor. The screen is off until then, and switches on behind white wipe tiles. */
.rooms-screen .ad-copy { gap: 3cqh; background: var(--signal); }
.rooms-screen .ad-cover span { background: var(--brand-white); }
.rooms-screen .ad-copy .ad-eyebrow { font-size: 9.5cqh; }
.rooms-screen .ad-copy .ad-line { font-size: 25cqh; }

/* The backdrop photo fades out at its own edges into the room colour, so it never shows a seam. */
.queue-backdrop {
  position: absolute; max-width: none; user-select: none; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 86%, transparent);
  mask-composite: intersect;
}
/* Screens sit on the photo's own topper, in shares of the 966 × 1943 cut-out. */
.rooms-screen, .plug-screen, .queue-screen { left: 3.934%; top: 1.235%; width: 92.03%; height: 13.23%; overflow: hidden; container-type: size; background: var(--brand-black); }

.rooms-copy { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); top: 9vh; }
/* A size down from other section openers: the building below is sized to start under the longest line. */
.rooms-copy :is(h2, .say-answer) {
  font-family: var(--font-display); font-stretch: 104%; font-weight: 900; font-size: clamp(34px, 4vw, 52px); line-height: .98; letter-spacing: -.03em;
}
/* The problem and its answer side by side: the problem in muted white (how things are; 68% white is 3.4:1 on room red,
   the floor for large text), the answer in full white, framed by the guide's four corners as it lands. */
.rooms-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); align-items: start; }
.say-answer { margin: 0; }
.rooms-copy .say-line.is-problem { color: #ffffffad; }
.rooms-copy .say-line.is-problem .stop { background: #ffffffad; }
/* The frame reaches into the column gap on the left but stops at the gutter on the right. */
.say-answer .say-line { position: relative; width: fit-content; padding: .16em .3em .22em; margin: -.16em 0 -.22em -.3em; }
.say-answer .say-line::before, .rooms-mark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; --c: var(--brand-white); --l: 18px; --w: 3px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l) no-repeat;
}
.say-answer .say-line.is-in::before { opacity: 1; animation: answer-frame 460ms var(--ease-snap) 260ms both; }
.say-answer .say-line.is-out::before { opacity: 0; transition: opacity var(--dur-fast) var(--ease-exit); }
@keyframes answer-frame { from { inset: -16px; opacity: 0; } }
/* The same corners close in around the screen playing the answer, in the same beat (ink on the light rooms).
   Sized in hundredths of the machine's width (--mu, set with the layout). */
.rooms-mark { left: 3.934%; top: 1.235%; width: 92.03%; height: 13.23%; pointer-events: none; }
.rooms-mark::before { inset: calc(var(--mu, 2px) * -3.2); --l: calc(var(--mu, 2px) * 8); --w: calc(var(--mu, 2px) * 1.3); }
.rooms-machine.is-light .rooms-mark::before { --c: var(--brand-black); }
.rooms-mark.is-on::before { opacity: 1; animation: mark-in 460ms var(--ease-snap) 260ms both; }
@keyframes mark-in { from { opacity: 0; transform: scale(1.14); } }
.rooms-copy .label { color: #ffffffcc; }
.rooms-leads { display: grid; margin-top: var(--space-5); max-width: min(38rem, 46vw); }
.rooms-leads > * { grid-area: 1 / 1; transition: opacity var(--dur-base) var(--ease-standard); }
.rooms-leads .lead { color: #ffffffe0; }
.rooms-leads .is-quiet { opacity: 0; pointer-events: none; }
.rooms-close { display: grid; justify-items: start; gap: var(--space-5); }
.rooms-close .fc-btn { margin-left: var(--space-2); }

/* The narrating headline: every line sits in the same cell, so the block is as tall as its longest line and
   nothing below it jumps. A new line rises in word by word (the headline rise, 40 ms apart, like the logo's
   letters) and its stop lands last; the old one lifts away. Scrolling back runs both the other way. */
.say { display: grid; }
.say-line { grid-area: 1 / 1; display: block; visibility: hidden; text-wrap: balance; }
.say-w { display: inline-block; }
.say-line.is-in, .say-line.is-out { visibility: visible; }
.say-line.is-in .say-w { animation: say-in var(--dur-slow) var(--ease-snap) calc(140ms + var(--i) * 40ms) both; }
.say-line.is-in .stop { animation: drop var(--dur-slow) var(--ease-drop) calc(220ms + var(--n) * 40ms) both; }
.say-line.is-out :is(.say-w, .stop) { animation: say-out var(--dur-fast) var(--ease-exit) both; }
.say.is-back .is-in .say-w { animation-name: say-in-back; }
.say.is-back .is-out :is(.say-w, .stop) { animation-name: say-out-back; }
@keyframes say-in { from { opacity: 0; transform: translateY(.35em); } }
@keyframes say-in-back { from { opacity: 0; transform: translateY(-.35em); } }
@keyframes say-out { to { opacity: 0; transform: translateY(-.3em); } }
@keyframes say-out-back { to { opacity: 0; transform: translateY(.3em); } }

/* The shared ad: as the camera pulls back, every room's screen switches to the same one. */
.ad-yours { align-items: center; justify-content: center; background: var(--signal); }
.ad-yours .ad-line { font-size: 46cqh; max-width: none; }
.ad-yours .stop { background: var(--brand-white); }

/* ---------- 03 · Going live: plug it in ---------- */

.plug { position: relative; padding: var(--space-9) 0; background: var(--paper); overflow: clip; }
.plug-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); align-items: center; }
.plug-copy { grid-column: 1 / span 5; display: grid; justify-items: start; }
.plug-copy .lead { margin-top: var(--space-5); color: var(--ink-muted); }
.plug-copy .tile-list { margin-top: var(--space-6); }
.plug-keys { margin-top: var(--space-6); padding-left: var(--space-2); }

.plug-scene { grid-column: 6 / span 7; position: relative; height: min(76vh, 700px); min-height: 460px; touch-action: none; user-select: none; }
.plug-floor { position: absolute; left: 0; right: -100vw; bottom: 9%; height: 1px; background: var(--line); }
.plug-machine { position: absolute; transition: filter 900ms var(--ease-standard); filter: brightness(.5) saturate(.4); }
.plug-machine img { display: block; width: 100%; height: auto; }
.plug-machine::after {
  /* Contact shadow: the machine stands on the floor, not on the page. */
  content: ""; position: absolute; left: 4%; right: 4%; bottom: -1.2%; height: 2.4%; border-radius: 50%; background: #16151438; filter: blur(6px); z-index: -1;
}
.plug.is-on .plug-machine { filter: none; }
.plug-screen { position: absolute; }
.plug-screen > * { position: absolute; }
.plug-socket { position: absolute; width: 40px; }
.plug-socket svg { display: block; width: 100%; height: auto; overflow: visible; }
.plug-plate { fill: var(--paper-raised); stroke: var(--line-strong); stroke-width: 1.5; }
.plug-slot { fill: var(--ink); }
.plug-socket::before {
  /* The brand's corners close in on the socket while it waits for the plug. */
  content: ""; position: absolute; inset: -12px; pointer-events: none; --c: var(--ink); --cr: var(--signal);
  background:
    linear-gradient(var(--cr), var(--cr)) top left / 10px 2px no-repeat, linear-gradient(var(--cr), var(--cr)) top left / 2px 10px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 10px 2px no-repeat, linear-gradient(var(--c), var(--c)) top right / 2px 10px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 10px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 2px 10px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 10px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 2px 10px no-repeat;
  animation: socket-call 2.4s var(--ease-snap) infinite;
}
.plug.is-near .plug-socket::before { animation: none; inset: -7px; opacity: 1; }
.plug.is-on .plug-socket::before { animation: none; opacity: 0; }
@keyframes socket-call { 0%, 30% { inset: -16px; opacity: 0; } 45%, 80% { inset: -9px; opacity: 1; } 100% { inset: -9px; opacity: 0; } }
.plug-socket.is-hit { animation: socket-hit 260ms var(--ease-snap); }
@keyframes socket-hit { 30% { transform: translate(1px, 1px); } 60% { transform: translate(-1px, 0); } }

.plug-cord { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.plug-cord path { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.plug-plug {
  position: absolute; left: 0; top: 0; width: 44px; height: 50px; margin: 0; padding: 0; border: 0; background: none; color: var(--ink);
  cursor: grab; touch-action: none; transform-origin: 50% 40%; -webkit-tap-highlight-color: transparent;
}
.plug-plug svg { display: block; width: 100%; height: 100%; overflow: visible; }
.plug-body { fill: var(--ink); }
.plug-prong { fill: var(--line-strong); transition: opacity var(--dur-fast) var(--ease-standard); }
.plug.is-on .plug-prong { opacity: 0; }
.plug-plug:active, .plug.is-dragging .plug-plug { cursor: grabbing; }
.plug-plug:focus-visible { outline: none; }
.plug-plug:focus-visible::after {
  content: ""; position: absolute; inset: -8px; --c: var(--ink); --cr: var(--signal);
  background:
    linear-gradient(var(--cr), var(--cr)) top left / 10px 2px no-repeat, linear-gradient(var(--cr), var(--cr)) top left / 2px 10px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 10px 2px no-repeat, linear-gradient(var(--c), var(--c)) top right / 2px 10px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 10px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 2px 10px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 10px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 2px 10px no-repeat;
}
.plug-hint, .plug-status { position: absolute; margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.plug-hint { transition: opacity var(--dur-base) var(--ease-standard); text-align: center; text-wrap: balance; }
.plug.is-on .plug-hint, .plug.was-on .plug-hint { opacity: 0; }
.plug-status { left: 0; bottom: 0; }

/* ---------- 04 · Questions from the queue ---------- */

.queue { padding: var(--space-9) 0; background: var(--paper); }
.queue-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5); margin-top: var(--space-7); align-items: stretch; }
.queue-stage { position: relative; height: clamp(380px, 58vh, 560px); overflow: clip; border-radius: var(--radius-lg); background: var(--room); }
.queue-machine { position: absolute; }
.queue-machine > img { display: block; width: 100%; height: auto; }
.queue-machine > div { position: absolute; }
.queue-screen .ad-tiles { visibility: visible; }
.queue-card { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.queue-card-body { display: grid; gap: var(--space-4); align-content: start; }
.queue-card-body .label { margin: 0; }
.queue-q { font-family: var(--font-display); font-stretch: 104%; font-weight: 800; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.queue-a { color: var(--ink-muted); font-size: 17px; line-height: 27px; max-width: 46ch; }
.queue-card-body.is-new { animation: fc-drop-in var(--dur-slow) var(--ease-drop) both; }
@keyframes fc-drop-in { from { opacity: 0; transform: translateY(-28px); } 35% { opacity: 1; } to { opacity: 1; transform: none; } }
.queue-keys { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-left: var(--space-2); }
.queue-count { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
/* The bubbles over the queue (js/queue.js), in figure units (--u) so they grow with the people. Waiting, a white
   thought bubble with the icon for their question and two dots trailing down to the head; at the front, a speech
   bubble, its icon red and its tail a turned square; answered, a red bubble with a "!". The script sets the
   transform to the top of the head. */
.qb { position: absolute; left: 0; top: 0; z-index: 2; width: 0; height: 0; pointer-events: none; }
.qb-body {
  position: absolute; left: calc(var(--u) * -13); bottom: calc(var(--u) * 10); display: grid; place-items: center;
  width: calc(var(--u) * 26); height: calc(var(--u) * 20); border-radius: calc(var(--u) * 10);
  background: #ffffff; color: var(--brand-black); box-shadow: 0 calc(var(--u) * 1.6) 0 rgba(74, 8, 2, .35);
  opacity: 0; transform: scale(.3); transform-origin: 40% 120%;
  transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-base) var(--ease-drop), background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.qb-icon { grid-area: 1 / 1; width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: opacity var(--dur-fast) var(--ease-standard); }
.qb-aha { opacity: 0; stroke-width: 3.4; }
.qb-dot { position: absolute; border-radius: 50%; background: #ffffff; opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); }
.qb-dot:nth-child(1) { left: calc(var(--u) * -6.5); bottom: calc(var(--u) * 5.2); width: calc(var(--u) * 5); height: calc(var(--u) * 5); }
.qb-dot:nth-child(2) { left: calc(var(--u) * -3.4); bottom: calc(var(--u) * 1.4); width: calc(var(--u) * 3); height: calc(var(--u) * 3); }
.qb.is-shown .qb-body { opacity: 1; transform: none; }
.qb.is-shown .qb-dot:nth-child(2) { opacity: 1; transition-delay: 60ms; }
.qb.is-shown .qb-dot:nth-child(1) { opacity: 1; transition-delay: 120ms; }
.qb.is-asking .qb-dot { opacity: 0; transition-delay: 0ms; }
.qb.is-shown.is-asking .qb-body { color: var(--signal); transform: scale(1.12); }
.qb-body::after {
  content: ""; position: absolute; left: 50%; bottom: calc(var(--u) * -2.4); width: calc(var(--u) * 5.6); height: calc(var(--u) * 5.6);
  margin-left: calc(var(--u) * -2.8); border-radius: calc(var(--u) * .8); background: inherit; transform: rotate(45deg) scale(0);
  transition: transform var(--dur-fast) var(--ease-snap);
}
.qb.is-asking .qb-body::after { transform: rotate(45deg); }
.qb.is-shown.is-aha .qb-body { background: var(--signal); color: #ffffff; }
.qb.is-aha { z-index: 3; }
.qb.is-aha .qb-icon { opacity: 0; }
.qb.is-aha .qb-aha { opacity: 1; }

/* ---------- 06 · Book ---------- */

.close { padding: var(--space-9) 0; background: var(--paper); }
.close-frame { display: grid; justify-items: start; padding: var(--space-8) var(--space-7); }
.close-frame .lead { margin-top: var(--space-5); color: var(--ink-muted); }
.close-keys { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-6); padding-left: var(--space-2); }
.foot { padding: var(--space-7) 0; border-top: 1px solid var(--line); background: var(--paper); }
.foot-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); }
.foot-inner img { width: 140px; height: auto; }
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.foot-nav a { font-weight: 600; text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-note { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }

/* ---------- Small screens ---------- */

@media (max-width: 900px) {
  /* Phones: the words stack at the top of the frame and the rooms pass below. */
  .rooms-copy { top: var(--space-7); left: var(--space-4); right: var(--space-4); display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); }
  .rooms-copy .label { margin: 0; }
  /* The opening and closing paragraphs take the answer's place under the headline (they never show at the same
     time), so no empty answer slot opens a gap and the building can stand taller. */
  .rooms-pair { display: contents; }
  .rooms-copy .say-answer, .rooms-leads { grid-area: 3 / 1; align-self: start; }
  .rooms-copy :is(h2, .say-answer) { font-size: clamp(28px, 8vw, 34px); }
  .rooms-leads { max-width: none; margin-top: 0; }
  .rooms-leads .lead { font-size: 16px; line-height: 24px; }
  /* Going live, on a phone: the plug comes straight after the headline, where you can try it, and the details
     follow it. */
  .plug { padding: var(--space-7) 0; }
  .plug-grid { display: flex; flex-direction: column; align-items: flex-start; }
  .plug-copy { display: contents; }
  .plug-scene { order: 1; align-self: stretch; height: 400px; min-height: 0; margin-top: var(--space-5); }
  .plug-copy .tile-list { order: 2; margin-top: var(--space-5); }
  .plug-keys { order: 3; }
  .queue { padding: var(--space-7) 0; }
  .queue-grid { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-6); }
  .queue-stage { height: 360px; }
  .queue-card { padding: var(--space-5); }
  .close { padding: var(--space-7) 0; }
  .close-frame { padding: var(--space-6) var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  .js .rooms-stage { position: relative; }
  .plug-machine, .rooms-leads > * { transition: none; }
  .say-line :is(.say-w, .stop) { animation: none !important; }
  .say-line.is-out { visibility: hidden; }
  .say-answer .say-line.is-in::before { animation: none; }
  .plug-socket::before { animation: none; inset: -9px; opacity: 1; }
  .queue-card-body.is-new { animation: none; }
  .qb-body, .qb-body::after, .qb-dot, .qb-icon { transition: none; }
  .fc-btn, .fc-btn::before, .fc-btn .fc-icon, .fc-btn-pane { transition-duration: 1ms; }
  .fc-btn { --z: 1 !important; }
  .fc-btn-flap:active .fc-btn-pane { transform: none; filter: brightness(.82); }
  .fc-btn-flap:active > .fc-btn-bay { opacity: 0; }
}