/* 4Corners Media: home intro. Tokens copied from the brand guide's tokens.json. */
:root {
  --paper: #fafaf8; --paper-raised: #ffffff; --concrete: #eeede9; --line: #dedcd6; --line-strong: #8c8883;
  --ink: #161514; --ink-muted: #5c5853; --on-ink: #fafaf8;
  --signal: #db2f18; --signal-deep: #b8260f; --on-signal: #ffffff; --signal-shade: #9a200d; --ink-shade: #000000;
  --signal-ink: #b8260f; --led-red: #ff6b4f; --led-green: #4fc489;
  --brand-black: #161514; --brand-white: #ffffff;
  --flavor-lime: #5a9a1f; --flavor-blue-raspberry: #1f6fe0; --flavor-grape: #7a4fd0; --flavor-orange: #d9730d;
  --void: #000000;

  --font-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --radius-sm: 4px; --radius-md: 8px; --radius-tile: 12px; --radius-lg: 20px;

  --dur-instant: 80ms; --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 420ms;
  --ease-standard: cubic-bezier(.4, 0, .2, 1); --ease-snap: cubic-bezier(.2, .9, .1, 1);
  --ease-drop: cubic-bezier(.34, 1.56, .64, 1); --ease-exit: cubic-bezier(.4, 0, 1, 1);

  --gutter: max(var(--space-5), calc((100% - 1280px) / 2));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121110; --paper-raised: #1c1b19; --concrete: #262421; --line: #3a3733; --line-strong: #77726b;
    --ink: #f3f1ed; --ink-muted: #aba59d; --on-ink: #121110; --ink-shade: #aba59d; --signal-ink: #ff6b4f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121110; --paper-raised: #1c1b19; --concrete: #262421; --line: #3a3733; --line-strong: #77726b;
  --ink: #f3f1ed; --ink-muted: #aba59d; --on-ink: #121110; --ink-shade: #aba59d; --signal-ink: #ff6b4f;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 26px; -webkit-font-smoothing: antialiased;
}
h1, h2, p { margin: 0; }
img, svg { display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Lenis 1.3.26 base styles */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }

.skip {
  position: fixed; left: var(--space-4); top: var(--space-4); z-index: 50; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); background: var(--ink); color: var(--on-ink); font-weight: 700; text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

.label {
  font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted);
}
.unit { text-transform: none; }
.stop {
  display: inline-block; width: .19em; height: .19em; margin-left: .07em; border-radius: .04em;
  background: var(--signal); vertical-align: baseline;
}
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: square; stroke-linejoin: miter; }

/* ---------- Intro: a machine alone in the void; the camera moves through a sticky stage ---------- */

.intro { position: relative; }
.js .intro { height: 380vh; }
.stage {
  /* dvh is the height actually on screen, so nothing hides under a phone browser's toolbar; vh is the fallback. */
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--brand-black);
  /* The frame: corner inset, bracket length, and the one logo that sits inside the top-left corner. */
  --in: 28px; --arm: 30px; --logo-w: 148px;
  --logo-x: calc(var(--in) + 18px); --logo-y: calc(var(--in) + 16px); --logo-h: calc(var(--logo-w) * .1948);
}
.js .stage { background: var(--void); }
.scene { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
/* The figure from the intro (js/walker.js) stands in front of the machine, so a card falling through it passes
   behind the figure (.hv-drop is 12). */
.scene > .walker { z-index: 13; }

.backdrop, .rig, .light, .cue { display: none; }
.js .backdrop, .js .rig, .js .light { display: block; }

/* The photo fades out at its own edges so it can never show a seam against the stage colour. */
.backdrop, .machine {
  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;
}
/* A cut-out machine has its own transparent edges; only the backdrop behind it needs the fade. */
:root[data-cut] .machine { -webkit-mask-image: none; mask-image: none; }
.backdrop { opacity: 0; transition: opacity 1.4s cubic-bezier(.25, .6, .3, 1); }
.scene.is-lit .backdrop { opacity: 1; }

/* The machine, its screen and the ad turn together as one object (transform set from main.js). */
.object { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
/* The machine's sides run back from its front edges, so a turn shows a sliver of solid cabinet. */
.side { position: absolute; opacity: 0; backface-visibility: hidden; transition: opacity 1.8s cubic-bezier(.25, .6, .3, 1); }
.side-l { transform-origin: 100% 50%; transform: rotateY(-90deg); background: linear-gradient(to left, #2b2a27, #121110 22%, #0b0a09); }
.side-r { transform-origin: 0 50%; transform: rotateY(90deg); background: linear-gradient(to right, #2b2a27, #121110 22%, #0b0a09); }
.scene.is-lit .side { opacity: 1; }
/* A touch screen never turns the machine (there's no pointer to follow), so it skips the 3D: no side panels and a
   flat object, which keeps the intro's layers within what a phone can hold. */
@media (hover: none) {
  .side { display: none; }
  .object { transform-style: flat; }
}

/* The machine photo and its screen light up together, so the dark screen never floats alone. */
.rig { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 1.8s cubic-bezier(.25, .6, .3, 1); }
.scene.is-lit .rig { opacity: 1; }
.screen { position: absolute; background: var(--brand-black); container-type: size; }

/* The machine's light reaching into the dark: bloom from its glass and screen, and a warm pool on the floor.
   The whole layer adds light (screen blend), so it can only brighten, never grey out the void. */
.light {
  position: absolute; left: 0; top: 0; mix-blend-mode: screen; pointer-events: none;
  opacity: 0; transition: opacity 2.6s var(--ease-standard) .35s;
}
.scene.is-lit .light { opacity: 1; }
.glow { position: absolute; max-width: none; transform-origin: 50% 32%; }
.scene.is-lit .glow { animation: spread 3s cubic-bezier(.2, .7, .2, 1) .35s both; }
.pool {
  position: absolute; border-radius: 50%;
  background: radial-gradient(closest-side, #ffe9cc40, #ffe9cc1a 55%, transparent);
}
.scene.is-lit .pool { animation: spill 3.2s cubic-bezier(.2, .7, .2, 1) .6s both; }
@keyframes spread { from { transform: scale(.9); } }
@keyframes spill { from { transform: scaleX(.35); opacity: 0; } }

/* Scroll cue: a mouse whose wheel rolls down, over two arrows that pulse in turn. No words. */
.cue {
  position: absolute; left: 50%; bottom: calc(var(--in) + 2px); padding: 6px 10px; border: 0; background: none;
  color: var(--cue-ink, #ffffff); transform: translateX(-50%); cursor: pointer;
  opacity: 0; transition: opacity 1.2s var(--ease-standard);
}
.js .cue { display: block; }
.cue.is-shown { opacity: 1; }
.cue-body { display: grid; justify-items: center; gap: 6px; }
.cue-mouse {
  position: relative; width: 24px; height: 38px; border: 2.5px solid currentColor; border-radius: 9px;
}
.cue-wheel {
  position: absolute; left: 50%; top: 6px; width: 5px; height: 7px; margin-left: -2.5px; border-radius: 1.5px;
  background: currentColor; animation: wheel 1.8s var(--ease-standard) infinite;
}
.cue-chevrons { width: 18px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: square; stroke-linejoin: miter; }
.cue-chevrons path { animation: chevron 1.8s var(--ease-standard) infinite; }
.cue-chevrons path:last-child { animation-delay: 180ms; }
.cue:hover .cue-body { transform: translateY(2px); }
.cue-body { transition: transform var(--dur-fast) var(--ease-snap); }
.cue:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 60% { transform: translateY(11px); opacity: 1; } 80%, 100% { transform: translateY(13px); opacity: 0; } }
@keyframes chevron { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
/* Touch screens have no mouse wheel: a finger swipes up instead. It presses in low, drags up and lifts off, and a
   ring marks the touch while it's down. */
.cue-swipe { position: relative; display: none; width: 30px; height: 30px; animation: swipe 2.2s var(--ease-standard) infinite; }
.cue-hand {
  display: block; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transform-origin: 46% 10%; animation: press 2.2s var(--ease-standard) infinite;
}
.cue-touch { position: absolute; left: 6.5px; top: -4.5px; width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 50%; opacity: 0; animation: touch 2.2s var(--ease-standard) infinite; }
@keyframes swipe { 0% { transform: translateY(12px); opacity: 0; } 14%, 28% { transform: translateY(12px); opacity: 1; } 68% { transform: translateY(-8px); opacity: 1; } 80%, 100% { transform: translateY(-12px); opacity: 0; } }
@keyframes press { 0%, 20% { transform: scale(1); } 28%, 68% { transform: scale(.88); } 78%, 100% { transform: scale(1); } }
@keyframes touch { 0%, 22% { opacity: 0; transform: scale(.4); } 30%, 66% { opacity: 1; transform: scale(1); } 74%, 100% { opacity: 0; transform: scale(1.3); } }
@media (hover: none) {
  .cue-mouse, .cue-chevrons { display: none; }
  .cue-swipe { display: block; }
}

/* Viewfinder: four corners framing the view, the red one top-left like the logo's tile, and the logo inside it. */
.chrome { position: absolute; inset: 0; display: none; pointer-events: none; }
.js .chrome { display: block; }
.corner {
  position: absolute; width: var(--arm); height: var(--arm); border: 0 solid #f3f1edb3; opacity: 0;
  transition: opacity 700ms var(--ease-standard), transform 700ms var(--ease-snap);
}
.c-tl { left: var(--in); top: var(--in); border-width: 3px 0 0 3px; border-color: var(--signal); transform: translate(-14px, -14px); }
.c-tr { right: var(--in); top: var(--in); border-width: 3px 3px 0 0; transform: translate(14px, -14px); transition-delay: 90ms; }
.c-br { right: var(--in); bottom: var(--in); border-width: 0 3px 3px 0; transform: translate(14px, 14px); transition-delay: 180ms; }
.c-bl { left: var(--in); bottom: var(--in); border-width: 0 0 3px 3px; transform: translate(-14px, 14px); transition-delay: 270ms; }
.chrome.is-shown .corner { opacity: 1; transform: none; }

/* The logo stays put from the first frame to the landed page. Its light version is clipped to wherever the
   dark screen is behind it (set from main.js), so it changes colour exactly as the screen's edge passes under it. */
.brand { position: absolute; z-index: 3; left: var(--logo-x); top: var(--logo-y); width: var(--logo-w); border-radius: 2px; }
.brand img { display: block; width: 100%; height: auto; }
.brand-lit { position: absolute; left: 0; top: 0; }
.js .brand { opacity: 0; transition: opacity 1s var(--ease-standard) 350ms; }
.js .brand.is-shown { opacity: 1; }
.brand:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }

/* Looks: light backgrounds take ink corners, the red one takes white throughout, busy scenes get a soft shadow. */
:root[data-tone="dark"] .chrome, :root[data-tone="dark"] .brand { filter: drop-shadow(0 1px 3px #00000080); }
:root[data-tone="light"] .corner { border-color: #161514a6; }
:root[data-tone="light"] .c-tl { border-color: var(--signal); }
:root[data-tone="red"] .corner, :root[data-tone="red"] .c-tl { border-color: #ffffffd9; }
:root[data-tone="light"] .cue { --cue-ink: #161514; }
/* A full scene fills the window from the first frame, so its photo needs no fade at the edges. */
:root[data-cover] .machine { -webkit-mask-image: none; mask-image: none; }

/* ---------- The hero lives in css/hero.css (three directions, picked with ?hero=) ---------- */

/* The brand's ad wipe: four red tiles cover the screen as it powers on, then shrink away. */
.ad-wipe { position: absolute; inset: 0; display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 1.2cqw; visibility: hidden; }
.ad-wipe span { border-radius: 1.6cqw; background: var(--signal); }
.screen.is-on .ad-wipe { visibility: visible; }
.screen.is-on .ad-wipe span { animation: ad-wipe var(--dur-slow) var(--ease-exit) 260ms both; }
.screen.is-on .ad-wipe span:nth-child(2) { animation-delay: 330ms; }
.screen.is-on .ad-wipe span:nth-child(4) { animation-delay: 400ms; }
.screen.is-on .ad-wipe span:nth-child(3) { animation-delay: 470ms; }
@keyframes ad-wipe { from { transform: scale(1.04); } to { transform: scale(0); opacity: 0; } }

/* On a phone (.is-wide, from js/main.js) the wide screen stays dark, so it stands out from the red room, and plays
   the logo's four tiles at its centre, the top-left one red. Close to the end of the zoom they open out over the
   page and wipe away to reveal it; until then the page stays veiled. */
.screen-mark { display: none; }
/* Above the hero's own layers (its photo, words and menu stack up to 5), so the tiles cover all of the page. */
.is-wide .screen-mark { position: absolute; z-index: 10; left: 0; top: 0; display: block; pointer-events: none; }
.screen-mark i { position: absolute; visibility: hidden; }
.hero.is-on ~ .screen-mark i { visibility: visible; }
/* Lit tiles bloom a little into the dark around them. */
.screen-mark b { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--brand-white); box-shadow: 0 0 28px 3px #ffffff5c; }
.screen-mark i:first-child b { background: var(--signal); box-shadow: 0 0 28px 3px #db2f188c; }

/* The screen's glass (placed by js/main.js on the screen, in the scene's pixels). Light layers add light (screen
   blend), so they can only brighten: a glow spilling past the bezel onto the wall, a brighter centre where the
   backlight is, and a band of reflection across the glass. The edges sink a little darker. */
.screen-glass { position: absolute; z-index: 11; pointer-events: none; container-type: size; }
.screen-glass i, .glass-face { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity 1.4s var(--ease-standard) 500ms; }
.hero.is-on ~ .screen-glass :is(i, .glass-face) { opacity: 1; }
.glass-halo { mix-blend-mode: screen; box-shadow: 0 0 38cqh 8cqh #fff1e642, 0 0 10cqh 1.5cqh #ffffff33; }
.glass-face { overflow: hidden; box-shadow: inset 0 0 9cqh 2cqh #0000006b, inset 0 .5cqh 0 #ffffff1a; }
.glass-back { mix-blend-mode: screen; background: radial-gradient(ellipse 62% 75% at 50% 46%, #ffffff26, #ffffff0d 55%, transparent 80%); }
.glass-glare {
  mix-blend-mode: screen;
  background: linear-gradient(104deg, transparent 31%, #ffffff17 33%, #ffffff26 40%, #ffffff0d 44%, transparent 46%, transparent 49%, #ffffff12 50%, transparent 53%);
}
.hero.is-on ~ .screen-mark b { animation: drop var(--dur-slow) var(--ease-drop) 760ms both; }
.hero.is-on ~ .screen-mark i:nth-child(2) b { animation-delay: 840ms; }
.hero.is-on ~ .screen-mark i:nth-child(4) b { animation-delay: 920ms; }
.hero.is-on ~ .screen-mark i:nth-child(3) b { animation-delay: 1000ms; }
.js .hero.is-veiled { visibility: hidden; }

.js .hero:not(.is-on) { visibility: hidden; }
.js .hero-title-text, .js .hero-title .stop { opacity: 0; }
.is-on .hero-title-text { display: inline; animation: rise var(--dur-slow) var(--ease-snap) 640ms both; }
.is-on .hero-title .stop { animation: drop var(--dur-slow) var(--ease-drop) 960ms both; }
@keyframes rise { from { opacity: 0; transform: translateY(.25em); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-120%); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }

/* ---------- Vending keys (the brand's Button) ---------- */

.key {
  --k-h: 52px; --k-d: 4px; --k-pad: var(--space-5); --k-fs: 16px;
  --k-face: var(--signal); --k-text: var(--on-signal); --k-bed: var(--signal-shade); --k-edge: transparent;
  --k-cap: var(--ink); --k-cap-text: var(--on-ink); --k-cap-bed: var(--ink-shade); --k-cap-edge: transparent;
  position: relative; display: inline-flex; align-items: stretch; gap: 3px; height: var(--k-h); margin-bottom: var(--k-d);
  color: var(--k-text); font-size: var(--k-fs); font-weight: 700; line-height: 1; letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.key-face, .key-cap {
  display: inline-grid; place-items: center; height: 100%; border-radius: var(--radius-md);
  transition: transform var(--dur-instant) var(--ease-standard), box-shadow var(--dur-instant) var(--ease-standard),
    border-radius var(--dur-fast) var(--ease-snap), background-color var(--dur-fast) var(--ease-standard);
}
.key-face {
  display: inline-flex; align-items: center; gap: var(--space-3); padding: 0 var(--k-pad);
  background: var(--k-face); color: var(--k-text); box-shadow: inset 0 0 0 1.5px var(--k-edge), 0 var(--k-d) 0 var(--k-bed);
}
.key-cap {
  width: var(--k-h); background: var(--k-cap); color: var(--k-cap-text);
  box-shadow: inset 0 0 0 1.5px var(--k-cap-edge), 0 var(--k-d) 0 var(--k-cap-bed);
}
.key-cap .icon { transition: transform var(--dur-fast) var(--ease-snap); }
.key-code { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; opacity: .75; }
.key:hover .key-face { border-top-left-radius: 0; }
.key:hover .key-cap .icon { transform: translateX(2px); }
.key:active .key-face { transform: translateY(var(--k-d)); box-shadow: inset 0 0 0 1.5px var(--k-edge), 0 0 0 var(--k-bed); }
.key:active .key-cap { transform: translateY(var(--k-d)); box-shadow: inset 0 0 0 1.5px var(--k-cap-edge), 0 0 0 var(--k-cap-bed); }
.key-secondary { --k-face: var(--ink); --k-text: var(--on-ink); --k-bed: var(--ink-shade); --k-cap: var(--concrete); --k-cap-text: var(--ink); --k-cap-bed: var(--line-strong); }
.key-outline { --k-face: var(--paper-raised); --k-text: var(--ink); --k-bed: var(--ink); --k-edge: var(--ink); }
.key-sm { --k-h: 40px; --k-d: 3px; --k-pad: var(--space-4); --k-fs: 14px; }

.key:focus-visible { outline: none; }
.key:focus-visible::after {
  content: ""; position: absolute; inset: -7px -7px calc(-7px - var(--k-d)) -7px; pointer-events: none;
  --c: var(--ink); --l: 12px; --w: 2.5px;
  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;
  animation: brackets var(--dur-fast) var(--ease-snap) both;
}
@keyframes brackets { from { inset: -16px -16px calc(-16px - var(--k-d)) -16px; opacity: 0; } }

/* ---------- After the intro ---------- */

.section { padding: var(--space-9) 0; }
.wrap { max-width: 1280px; margin-inline: auto; padding-inline: var(--space-5); }
.section .label { margin-bottom: var(--space-4); }
.section 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;
}
.section .lead { margin-top: var(--space-5); max-width: 58ch; font-size: 20px; line-height: 30px; color: var(--ink-muted); }

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

@media (max-width: 820px) {
  .stage { --in: 16px; --arm: 22px; --logo-w: 116px; --logo-x: calc(var(--in) + 12px); --logo-y: calc(var(--in) + 12px); }
}

@media (prefers-reduced-motion: reduce) {
  .js .intro { height: auto; }
  .cue-wheel, .cue-chevrons path, .cue-swipe, .cue-hand, .cue-touch, .scene.is-lit .glow, .scene.is-lit .pool { animation: none; }
  .backdrop, .rig, .side, .light, .corner, .brand { transition: none; }
  .is-on .hero-title-text, .is-on .hero-title .stop, .screen.is-on .ad-wipe span, .hero.is-on ~ .screen-mark b { animation: none; }
  .screen-glass i, .glass-face { transition: none; }
  .js .hero-title-text, .js .hero-title .stop { opacity: 1; }
  .screen.is-on .ad-wipe { visibility: hidden; }
  .key-face, .key-cap, .key-cap .icon { transition-duration: 1ms; }
}