@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/Geist.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* HandoverAI
   One family (Geist), ink on white, a single blue accent, sky photographs
   that dissolve into the page, and white "objects" that all share one spec. */

:root {
  --ink: #0F1A26;
  --ink-2: #1F2B38;
  --text-2: #4F5B68;
  --muted: #56626E;
  --accent: #2F6BD4;
  --accent-text: #2A62C4;
  --accent-tint: #EAF0FB;
  /* Every tint on the page is the sky blue over white (4, 8, 14 and 22 per cent)
     or ink over white (6 and 12 per cent). Nothing else is mixed in. */
  --tint-1: #F6F8FD;
  --tint-2: #EEF2FA;
  --tint-3: #E1E8F7;
  --tint-4: #CFDBF2;
  --grey-1: #F1F2F4;
  --grey-2: #E3E5E8;
  --grey-tint: var(--grey-1);
  --track: var(--tint-3);
  --line: rgba(15, 26, 38, 0.1);
  --surface: #FFFFFF;
  /* The field: the brand's sky. Type on it is white; the logo's dots lighten as the favicon's do. */
  --end-blue: #265DC4;
  --sky-dot: #7FB0FF;
  --on-sky-2: rgba(255, 255, 255, 0.88);
  --on-sky-muted: rgba(255, 255, 255, 0.7);

  --shadow: 0 1px 2px rgba(15, 26, 38, 0.06), 0 18px 36px rgba(23, 50, 92, 0.13);
  --shadow-sm: 0 1px 2px rgba(15, 26, 38, 0.05), 0 8px 20px rgba(23, 50, 92, 0.08);
  --r-obj: 24px;
  --r-panel: 28px;

  --gutter: clamp(20px, 5vw, 72px);
  --nav-h: 88px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-pop: cubic-bezier(0.3, 1.5, 0.5, 1);
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* The page is paper: the same fibre as the sky's grain, on white. */
  background: var(--surface) url("../assets/field/paper.png") 0 0 / 192px 192px repeat;
  color: var(--ink);
  font-family: 'Geist', system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

::selection { background: var(--tint-4); }

img, svg { display: block; }

a {
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

a:hover { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 6px;
}

h1, h2, h3, p, figure, ol, ul { margin: 0; }

ol, ul { padding: 0; list-style: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.svg-defs { position: absolute; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  transform: translateY(-200%);
}

.skip-link:focus { transform: none; color: #fff; }

.wrap {
  width: 100%;
  max-width: calc(1296px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Type */

h1, h2 {
  font-weight: 500;
  text-wrap: balance;
}

h1, .h-display {
  max-width: 12.3em;
  font-size: clamp(2.75rem, 1.2rem + 5.4vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

h2 {
  max-width: 18em;
  font-size: clamp(2.125rem, 1rem + 3.9vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

h2.h2-narrow { max-width: 14.45em; }

h2.h-display { max-width: 11.5em; }

/* Keep the hero headline balanced as it wraps across screen sizes. */
h1 {
  max-width: 13.6em;
  font-size: clamp(2.75rem, 6.1vw, 5.5rem);
}

/* One sentence per block, so a line never breaks in the middle of the second one. */
h1 span, h2 span { display: block; text-wrap: balance; }

h3 {
  font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.lead {
  max-width: 760px;
  margin-top: 28px;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.lead-narrow { max-width: 640px; }

.label {
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
}

.footnote {
  margin-top: 20px;
  font-size: 13px;
  color: var(--muted);
}

/* Buttons, links, pills */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
}

.btn {
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.btn:hover { background: #243244; color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(15, 26, 38, 0.4); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn-sm { padding: 11px 20px; font-size: 15px; }
.btn-lg { padding: 17px 28px; font-size: 16px; }

.text-link {
  font-size: 16px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(15, 26, 38, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.text-link:hover { text-decoration-color: currentColor; }

.ghost-btn {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.ghost-btn:hover { background: #fff; color: var(--ink); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
  margin-top: 36px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.pill-blue { background: var(--accent-tint); color: var(--accent-text); }
.pill-grey { background: var(--grey-tint); color: var(--text-2); }

/* Objects and panels */

.obj {
  background: var(--surface);
  border: 1px solid rgba(15, 26, 38, 0.08);
  border-radius: var(--r-obj);
  box-shadow: var(--shadow);
}

/* Two sheets of paper behind an object. The parent must isolate. */
.stacked { position: relative; }

.stacked::before,
.stacked::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  border-radius: inherit;
  background: var(--surface);
}

.stacked::before { z-index: -1; transform: translate(calc(var(--stack) * -1), calc(var(--stack) * -1)); opacity: 0.94; }
.stacked::after { z-index: -2; transform: translate(calc(var(--stack) * -2), calc(var(--stack) * -2)); opacity: 0.86; }

.panel {
  margin-top: clamp(40px, 5vw, 64px);
  border: 1px solid rgba(15, 26, 38, 0.08);
  border-radius: var(--r-panel);
  /* A sheet of paper on the page: the same object as every card, only larger. */
  background: var(--surface);
  box-shadow: var(--shadow);
  isolation: isolate;
}

/* Navigation */

.nav {
  --nav-ink: var(--ink);
  --nav-link: var(--ink);
  --nav-link-hover: var(--accent);
  --nav-current: var(--accent);
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color 240ms ease, box-shadow 240ms ease;
}

/* Over a field, until the bar gains its white background: white type, and the
   logo's dots lightened to the on-sky blue. */
.nav:not(.is-stuck):has(+ main > .sky-hero) {
  --nav-ink: #fff;
  --nav-link: var(--on-sky-2);
  --nav-link-hover: #fff;
  --nav-current: var(--sky-dot);
  --logo-dot: var(--sky-dot);
}

.nav:not(.is-stuck):has(+ main > .sky-hero) .nav-cta-mobile { background: #fff; color: var(--ink); }
.nav:not(.is-stuck):has(+ main > .sky-hero) .nav-cta-mobile:hover { background: var(--tint-1); color: var(--ink); }

@media (min-width: 961px) {
  .nav:not(.is-stuck):has(+ main > .sky-hero) .nav-menu .btn { background: #fff; color: var(--ink); }
  .nav:not(.is-stuck):has(+ main > .sky-hero) .nav-menu .btn:hover { background: var(--tint-1); color: var(--ink); }
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: calc(1296px + 2 * var(--gutter));
  height: var(--nav-h);
  margin-inline: auto;
  padding-inline: var(--gutter);
  transition: height 240ms var(--ease);
}

/* Without JS the bar can never gain its background, so it scrolls away instead. */
html:not(.js) .nav { position: absolute; }

.nav.is-stuck {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: 0 1px 0 var(--line);
}

.nav.is-stuck .nav-inner { height: 68px; }

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--nav-ink);
  transition: color 240ms ease;
}

/* The logo is drawn on a 24-unit grid. Keep its height a multiple of 6 so the
   mark's straight edges land on whole pixels. */
.brand-logo {
  flex: none;
  width: auto;
  height: 24px;
}

.brand:hover { color: var(--nav-ink); }

.nav-menu {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 15px;
}

.nav-menu a:not(.btn) { padding: 8px 0; color: var(--nav-link); }
.nav-menu a:not(.btn):hover { color: var(--nav-link-hover); }

.nav-menu a[aria-current="true"],
.nav-menu a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--nav-current);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 8px;
}

.nav-cta-mobile { display: none; }
html.nav-is-open { overflow: hidden; }

.nav-toggle {
  flex: none;
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--nav-ink);
  cursor: pointer;
  transition: color 240ms ease;
}

.nav-toggle-bars {
  position: relative;
  display: block;
  width: 22px;
  height: 10px;
  margin: auto;
}

.nav-toggle-bars i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.75px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 240ms var(--ease), top 240ms var(--ease);
}

.nav-toggle-bars i:first-child { top: 0; }
.nav-toggle-bars i:last-child { top: 8px; }
.nav[data-open] .nav-toggle-bars i:first-child { top: 4px; transform: rotate(45deg); }
.nav[data-open] .nav-toggle-bars i:last-child { top: 4px; transform: rotate(-45deg); }

/* Skies
   The page's skies are the brand's V2 material: a flat field of end-blue with
   paper grain, and banks of cumulus dithered in white against one blue-noise
   tile. A section built on a field is one ground dissolving into the other
   through the cloud. .sky-top is the white page dissolving into the blue,
   .sky-open the open (white type), .sky-bank the cloud rising back to
   white, .sky-ground the page again. The page has two skies, the hero and the
   closing section, and is the white page between them. The strips are
   transparent where the field shows, so the grain runs under them unbroken,
   and they scale with the width, so each has a phone, a standard and a wide
   drawing. Artwork from tools/build_sky_fields.py. */

.sky {
  position: relative;
  isolation: isolate;
  background: var(--end-blue) url("../assets/field/grain.png") 0 0 / 192px 192px repeat;
  color: var(--ink);
  overflow: clip;
}

.section.sky { padding-block: 0; }

.sky-open {
  --sky-pad-b: clamp(40px, 5vw, 72px);
  position: relative;
  color: #fff;
}

.sky-open .wrap { position: relative; }

.sky-ground {
  position: relative;
  display: flow-root;
  margin-top: -1px;
  background: var(--surface) url("../assets/field/paper.png") 0 0 / 192px 192px repeat;
}

/* The strips do not clip: the section clips the page's sides, the layers'
   bottom bleed lies under the page, and the live cloud must be free to rise
   past the still's frame when the wind lifts it. */
.sky-top,
.sky-bank {
  position: relative;
  width: 100%;
  pointer-events: none;
}

/* Two layers under the clip. The inner element drifts slowly all the time;
   its image slides a little further with the scroll, so the cloud is always
   moving and moves a touch faster while you scroll. Both are wider than the
   page to cover the travel, and both reach two pixels past the clip: a moving
   layer's anti-aliased edge would otherwise show as a hairline where the
   cloud meets the page. The clip edge is pixel-aligned; the layers' are not. */
.sky-top > i,
.sky-bank > i {
  position: absolute;
  inset: -2px -7%;
  z-index: -1;
  display: block;
}

.sky-top > i::before,
.sky-bank > i::before {
  content: "";
  position: absolute;
  inset: 0;
  /* The cloud is paper too. The strip is a mask over the page's own tile, so
     the cloud's white carries the same fibre as the page it dissolves into and
     the floor of a bank meets the page with no step. */
  background: var(--surface) url("../assets/field/paper.png") 0 0 / 192px 192px repeat;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
}

.sky-top > i::before { -webkit-mask-position: top center; mask-position: top center; }
.sky-bank > i::before { -webkit-mask-position: bottom center; mask-position: bottom center; }

/* The live cloud (js/sky-live.js). On a device with a fine pointer the layer
   also carries a canvas, the same drawing redrawn by the GPU so the wind can
   blow through it; it sits where the still sits (the still's width, anchored
   to the same edge) with empty headroom beyond the still's frame on the open
   side, so lifted cloud is never cut flat, and cross-fades over the still
   once drawn. The still stays underneath, hidden, for the fallback. */
.sky-top > i > canvas,
.sky-bank > i > canvas {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 600ms linear;
}

.sky-top > i > canvas { top: 0; bottom: auto; }

.sky-top > i.is-live > canvas,
.sky-bank > i.is-live > canvas { opacity: 1; }

.sky-top > i.is-live::before,
.sky-bank > i.is-live::before { opacity: 0; transition: opacity 600ms linear; }

.sky-top > i.is-settled::before,
.sky-bank > i.is-settled::before { visibility: hidden; }

/* Each section's own sky, drawn for the standard width. */
.sky-hero .sky-bank { aspect-ratio: 1440 / 280; }
.sky-hero .sky-bank > i::before { -webkit-mask-image: url("../assets/field/hero-bank-1440.png"); mask-image: url("../assets/field/hero-bank-1440.png"); }
.sky-hero .sky-bank > i.far::before { -webkit-mask-image: url("../assets/field/hero-far-1440.png"); mask-image: url("../assets/field/hero-far-1440.png"); }
.sky-end .sky-top { aspect-ratio: 1440 / 200; }
.sky-end .sky-top > i::before { -webkit-mask-image: url("../assets/field/end-top-1440.png"); mask-image: url("../assets/field/end-top-1440.png"); }
.sky-end .sky-bank { aspect-ratio: 1440 / 260; }
.sky-end .sky-bank > i::before { -webkit-mask-image: url("../assets/field/end-bank-1440.png"); mask-image: url("../assets/field/end-bank-1440.png"); }

/* A strip squeezed far below its design width blurs its stipple into a haze; one
   enlarged a little just grows its grain. So each drawing serves from about 0.7
   of its width up to 1.4 of it. */
@media (max-width: 1024px) {
  .sky-hero .sky-bank { aspect-ratio: 720 / 220; }
  .sky-hero .sky-bank > i::before { -webkit-mask-image: url("../assets/field/hero-bank-720.png"); mask-image: url("../assets/field/hero-bank-720.png"); }
  .sky-hero .sky-bank > i.far::before { -webkit-mask-image: url("../assets/field/hero-far-720.png"); mask-image: url("../assets/field/hero-far-720.png"); }
  .sky-end .sky-top { aspect-ratio: 720 / 140; }
  .sky-end .sky-top > i::before { -webkit-mask-image: url("../assets/field/end-top-720.png"); mask-image: url("../assets/field/end-top-720.png"); }
  .sky-end .sky-bank { aspect-ratio: 720 / 200; }
  .sky-end .sky-bank > i::before { -webkit-mask-image: url("../assets/field/end-bank-720.png"); mask-image: url("../assets/field/end-bank-720.png"); }
}

@media (max-width: 480px) {
  .sky-hero .sky-bank { aspect-ratio: 400 / 150; }
  .sky-hero .sky-bank > i::before { -webkit-mask-image: url("../assets/field/hero-bank-400.png"); mask-image: url("../assets/field/hero-bank-400.png"); }
  .sky-hero .sky-bank > i.far::before { -webkit-mask-image: url("../assets/field/hero-far-400.png"); mask-image: url("../assets/field/hero-far-400.png"); }
  .sky-end .sky-top { aspect-ratio: 400 / 100; }
  .sky-end .sky-top > i::before { -webkit-mask-image: url("../assets/field/end-top-400.png"); mask-image: url("../assets/field/end-top-400.png"); }
  .sky-end .sky-bank { aspect-ratio: 400 / 130; }
  .sky-end .sky-bank > i::before { -webkit-mask-image: url("../assets/field/end-bank-400.png"); mask-image: url("../assets/field/end-bank-400.png"); }
}

@media (min-width: 1601px) {
  .sky-hero .sky-bank { aspect-ratio: 2560 / 340; }
  .sky-hero .sky-bank > i::before { -webkit-mask-image: url("../assets/field/hero-bank-2560.png"); mask-image: url("../assets/field/hero-bank-2560.png"); }
  .sky-hero .sky-bank > i.far::before { -webkit-mask-image: url("../assets/field/hero-far-2560.png"); mask-image: url("../assets/field/hero-far-2560.png"); }
  .sky-end .sky-top { aspect-ratio: 2560 / 260; }
  .sky-end .sky-top > i::before { -webkit-mask-image: url("../assets/field/end-top-2560.png"); mask-image: url("../assets/field/end-top-2560.png"); }
  .sky-end .sky-bank { aspect-ratio: 2560 / 320; }
  .sky-end .sky-bank > i::before { -webkit-mask-image: url("../assets/field/end-bank-2560.png"); mask-image: url("../assets/field/end-bank-2560.png"); }
}

/* The cloud is never still: a slow drift all the time, with a slower float
   up and down on a different period so the path is never a straight line, and
   a little more travel tied to the scroll position, so it quickens while you
   scroll. The hero's farther bank drifts the same way as the near one, as wind
   would carry it, but more slowly and out of phase, so the two slide past each
   other. The drift is the individual `translate` property and the float the
   `transform` property, which compose. Neither runs with reduced motion, and
   the scroll part is simply absent without support for scroll-driven
   animation. */
@media (prefers-reduced-motion: no-preference) {
  .sky-top > i,
  .sky-bank > i {
    animation:
      cloud-drift 40s ease-in-out infinite alternate,
      cloud-float 11s ease-in-out infinite alternate;
  }

  .sky-bank > i.far {
    animation:
      cloud-drift-far 64s ease-in-out -22s infinite alternate,
      cloud-float-far 17s ease-in-out -5s infinite alternate;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sky-top > i::before,
    .sky-bank > i::before,
    .sky-top > i > canvas,
    .sky-bank > i > canvas {
      animation: cloud-slide 1ms linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

@keyframes cloud-drift {
  from { translate: -3.5% 0; }
  to { translate: 3.5% 0; }
}

@keyframes cloud-drift-far {
  from { translate: -2.5% 0; }
  to { translate: 2.5% 0; }
}

@keyframes cloud-float {
  from { transform: translateY(2px); }
  to { transform: translateY(-2px); }
}

@keyframes cloud-float-far {
  from { transform: translateY(-1.5px); }
  to { transform: translateY(1.5px); }
}

@keyframes cloud-slide {
  from { translate: -2.5% 0; }
  to { translate: 2.5% 0; }
}

/* In the open, ink is white and the button is the white disc of the closing section. */
.sky-open .lead,
.sky-open .discovery-intro > p { color: var(--on-sky-2); }

.sky-open .footnote,
.sky-open .label { color: var(--on-sky-muted); }

.sky-open a:hover { color: #fff; }
.sky-open .btn { background: #fff; color: var(--ink); }
.sky-open .btn:hover { background: var(--tint-1); color: var(--ink); }
.sky-open .text-link { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.4); }
.sky-open .text-link:hover { color: #fff; text-decoration-color: #fff; }
.sky-open :focus-visible { outline-color: #fff; }
.sky-open ::selection { background: rgba(255, 255, 255, 0.3); }

/* The handover: one thread rises out of the cloud and lands on one dot, with
   the only light in the sky. The thread and the glow are stipple in the
   artwork; the dot is a disc, so it stays crisp at any size. The dot's place
   matches STAR in tools/build_sky_fields.py. */
.handover {
  --dot-x: 87.5%;
  --dot-y: 28.646%;
  position: absolute;
  right: calc(var(--gutter) + 8px);
  bottom: calc(8px - var(--sky-pad-b) - 6vw);
  width: 800px;
  height: 384px;
  pointer-events: none;
}

.handover-thread,
.handover-light,
.handover-star {
  position: absolute;
  display: block;
}

.handover-thread {
  inset: 0;
  background: url("../assets/field/thread-1440.png") 0 0 / 100% 100% no-repeat;
}

/* The light is three stipple halos of the same noise at rising strengths,
   so each holds every dot of the one below it and more. At rest only the
   first shows. Under the pointer the light wakes: the second comes up in
   under a second and the third, which reaches further out, a little after,
   so the light grows by dots appearing in the mist, never by moving; each
   then breathes on its own period, the two unrelated so the pattern never
   repeats; and when the pointer leaves they fade over a second. The waking
   is a transition on `--lit`, the breathing an animation on `--breath`,
   multiplied in `opacity`, so neither interrupts the other. */
.handover-light {
  top: var(--dot-y);
  left: var(--dot-x);
  width: 180px;
  height: 180px;
  background: url("../assets/field/glow.png") 0 0 / 100% 100% no-repeat;
  translate: -50% -50%;
  /* The light and the dot can be hovered; the thread cannot. */
  pointer-events: auto;
  border-radius: 50%;
}

.handover-glow-2 {
  background-image: url("../assets/field/glow-2.png");
  opacity: calc(var(--lit) * var(--breath-2));
}

.handover-glow-3 {
  background-image: url("../assets/field/glow-3.png");
  opacity: calc(var(--lit-far) * var(--breath-3));
}

.handover {
  --lit: 0;
  --lit-far: 0;
}

.handover:has(.handover-light:hover, .handover-star:hover) {
  --lit: 1;
  --lit-far: 1;
}

@property --lit { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --lit-far { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --breath-2 { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --breath-3 { syntax: "<number>"; inherits: false; initial-value: 0.85; }
@property --glint { syntax: "<number>"; inherits: false; initial-value: 0; }

.handover-star {
  top: var(--dot-y);
  left: var(--dot-x);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  translate: -50% -50%;
  /* Under the pointer the dot swells by a sixteenth at most, in time with the light. */
  transform: scale(calc(1 + 0.06 * var(--lit) * var(--glint)));
  pointer-events: auto;
}

/* Below 1280px the thread would cross the lead, so the handover sits under the
   actions instead and rises out of the bank beside them. */
@media (max-width: 1279px) {
  .sky-hero .sky-open { --sky-pad-b: 0px; }

  .handover {
    --dot-x: 75%;
    --dot-y: 38.793%;
    position: relative;
    right: auto;
    bottom: auto;
    width: 400px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 400 / 232;
    margin: 0 0 calc(-8vw - 52px) auto;
  }

  .handover-thread { background-image: url("../assets/field/thread-720.png"); }
}

/* On a phone the dot and its light shrink with the picture, or they look outsized. */
@media (max-width: 720px) {
  .handover { margin: -8px 0 calc(-8vw - 48px) auto; }
  .handover-light { width: 130px; height: 130px; }
  .handover-glow { background-image: url("../assets/field/glow-130.png"); }
  .handover-glow-2 { background-image: url("../assets/field/glow-2-130.png"); }
  .handover-glow-3 { background-image: url("../assets/field/glow-3-130.png"); }
  .handover-star { width: 20px; height: 20px; }
}

/* Phones held sideways: a shorter handover so the cloud is not pushed far below the fold. */
@media (orientation: landscape) and (max-height: 480px) {
  .handover { width: 280px; margin: -8px 0 calc(-6vw - 34px) auto; }
  .handover-light { width: 130px; height: 130px; }
  .handover-glow { background-image: url("../assets/field/glow-130.png"); }
  .handover-glow-2 { background-image: url("../assets/field/glow-2-130.png"); }
  .handover-glow-3 { background-image: url("../assets/field/glow-3-130.png"); }
  .handover-star { width: 20px; height: 20px; }
}

/* Arrival. The headline settles, the thread draws out of the cloud, the light
   comes up and the dot lands; then the light breathes. Still with reduced
   motion, where the final state is the only state. */
@media (prefers-reduced-motion: no-preference) {
  .sky-hero h1 { animation: rise-in 700ms var(--ease) both; }
  .sky-hero .lead { animation: rise-in 700ms var(--ease) 80ms both; }
  .sky-hero .actions,
  .sky-hero .ex-note { animation: rise-in 700ms var(--ease) 160ms both; }
  .handover-thread { animation: thread-draw 1100ms cubic-bezier(0.35, 0.5, 0.15, 1) 150ms both; }
  .handover-glow { animation: glow-in 500ms ease 950ms both, glow-breathe 6s ease-in-out 1700ms infinite alternate; }
  .handover-star { animation: star-land 550ms var(--ease-pop) 950ms both, star-breathe 6s ease-in-out 1700ms infinite alternate, glint 2.6s ease-in-out infinite alternate; }

  /* The light under the pointer: the breathing runs all the time on its own
     periods and only shows while `--lit` is up; the waking and the fading are
     the transitions on `--lit`, quick in and slow out, the farther light a
     little behind the nearer. */
  .handover-glow-2 { animation: breathe-2 2.6s ease-in-out infinite alternate; }
  .handover-glow-3 { animation: breathe-3 3.7s ease-in-out -1.3s infinite alternate; }
  .handover { transition: --lit 900ms ease, --lit-far 1200ms ease; }
  .handover:has(.handover-light:hover, .handover-star:hover) {
    transition: --lit 700ms cubic-bezier(0.2, 0.7, 0.2, 1), --lit-far 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) 150ms;
  }
}

@keyframes rise-in {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: none; }
}

@keyframes thread-draw {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes glow-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes glow-breathe {
  from { opacity: 1; }
  to { opacity: 0.7; }
}

@keyframes star-land {
  from { scale: 0; }
  to { scale: 1; }
}

@keyframes star-breathe {
  from { scale: 1; }
  to { scale: 1.08; }
}

@keyframes breathe-2 {
  from { --breath-2: 1; }
  to { --breath-2: 0.55; }
}

@keyframes breathe-3 {
  from { --breath-3: 0.85; }
  to { --breath-3: 0.2; }
}

@keyframes glint {
  from { --glint: 0; }
  to { --glint: 1; }
}


/* Sections */

.section {
  padding-block: clamp(80px, 10vw, 144px) clamp(88px, 10.5vw, 152px);
  scroll-margin-top: 40px;
}

#ownership { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* Hero: the headline in the open, the demo on the cloud below it */

.sky-hero {
  /* How far the demo climbs onto the bank: the strip's solid white body, never its stippled edge. */
  --bank-overlap: 5.5vw;
}

.sky-hero .sky-open {
  --sky-pad-b: clamp(64px, 4vw + 24px, 80px);
  padding-block: calc(var(--nav-h) + clamp(28px, 3.4vw, 48px)) var(--sky-pad-b);
}

.sky-hero .sky-ground { padding-bottom: clamp(48px, 5vw, 72px); }

.hero .lead { margin-top: 28px; }
.hero .actions { margin-top: 32px; }

.sky-hero .stage {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--bank-overlap));
}

@media (max-width: 1024px) { .sky-hero { --bank-overlap: 5vw; } }
@media (max-width: 480px) { .sky-hero { --bank-overlap: 4.5vw; } }
@media (min-width: 1601px) { .sky-hero { --bank-overlap: 3.8vw; } }
.hd-demo .demo-intro {
  max-width: 760px;
  margin: 12px 0 24px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
}

.evidence-label {
  margin-top: 32px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}


.stage {
  --stack: 11px;
  --slot: clamp(276px, 520px - 17vw, 310px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(36px, 6.5vw, 104px) minmax(0, 1fr) clamp(36px, 6.5vw, 104px) minmax(0, 1fr);
  margin-top: clamp(36px, 3.4vw, 48px);
}

.stage-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.stage-slot {
  display: grid;
  place-items: center;
  min-height: var(--slot);
  isolation: isolate;
}

.stage figcaption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

.stage figcaption strong {
  font-size: clamp(1.1875rem, 1rem + 0.4vw, 1.375rem);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.stage figcaption span {
  font-size: 15px;
  color: var(--muted);
}

.stage-arrow {
  display: flex;
  align-items: center;
  height: var(--slot);
  padding-inline: 8px;
  color: rgba(15, 26, 38, 0.4);
  transition: color 500ms ease;
}

.stage-arrow svg { overflow: visible; }
.stage-arrow .shaft { flex: 1; min-width: 0; height: 14px; }
.stage-arrow .head { flex: none; width: 10px; height: 14px; margin-left: -10px; }

.stage-arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stage-arrow.is-on { color: var(--accent); }

/* Hero object 1: the interview */

.interview {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 372px;
  padding: 24px 26px 22px;
}

.interview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.people { display: flex; }

.people svg {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
}

.people svg + svg { margin-left: -9px; }

.wave {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 34px;
}

.wave i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--ink);
  transform: scaleY(var(--h));
  transition: background-color 300ms ease;
}

.wave i:nth-child(1) { --h: 0.35; --t: 0.9s; }
.wave i:nth-child(2) { --h: 0.78; --t: 1.1s; }
.wave i:nth-child(3) { --h: 0.5; --t: 0.8s; }
.wave i:nth-child(4) { --h: 1; --t: 1.25s; }
.wave i:nth-child(5) { --h: 0.6; --t: 0.95s; }
.wave i:nth-child(6) { --h: 0.84; --t: 1.05s; }
.wave i:nth-child(7) { --h: 0.35; --t: 0.85s; }

.interview[data-speaker="ai"] .wave i { background: var(--accent); }

.stage.is-playing .interview.is-speaking .wave i {
  animation: speak var(--t) ease-in-out infinite;
}

@keyframes speak {
  0%, 100% { transform: scaleY(var(--h)); }
  50% { transform: scaleY(calc(var(--h) * 0.3 + 0.08)); }
}

.captions {
  display: grid;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.cap {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 0s 200ms;
}

.cap.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease;
}

.cap .who {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--muted);
}

.cap[data-cap="ai"] .who { color: var(--accent); }

.cap .said {
  font-size: 15px;
  line-height: 1.42;
}

.cap .w { opacity: 0; transition: opacity 320ms ease; }
.cap.is-on .w { opacity: 1; transition-delay: calc(var(--i) * 160ms); }

/* The meeting tools the interview can happen in, as small circles on the card's corner. */
.interview { position: relative; }

.interview-tools {
  position: absolute;
  right: 22px;
  bottom: -16px;
  display: flex;
}

.interview-tools span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(15, 26, 38, 0.08);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 26, 38, 0.06), 0 4px 10px rgba(23, 50, 92, 0.12);
}

.interview-tools span + span { margin-left: -7px; }
.interview-tools img { display: block; }

/* Hero object 2: the record */

/* A deck of three cards. Between examples the front card lifts out and tucks
   behind the other two, which each step forward. */
.deck {
  position: relative;
  width: 100%;
  max-width: 372px;
  margin: calc(var(--stack) * 2) 0 0 calc(var(--stack) * 2);
  isolation: isolate;
}

.sheet {
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-obj);
  background: var(--surface);
}

.sheet:nth-child(1) { z-index: 0; transform: translate(calc(var(--stack) * -2), calc(var(--stack) * -2)); opacity: 0.86; }
.sheet:nth-child(2) { z-index: 1; transform: translate(calc(var(--stack) * -1), calc(var(--stack) * -1)); opacity: 0.94; }

.record {
  position: relative;
  z-index: 2;
  padding: 20px 24px 12px;
}

.deck.is-dealing .record { animation: deal-front 780ms var(--ease) both; }
.deck.is-dealing .record > * { animation: deal-ink 780ms ease both; }
.deck.is-dealing .sheet:nth-child(2) { animation: deal-middle 780ms var(--ease) both; }
.deck.is-dealing .sheet:nth-child(1) { animation: deal-back 780ms var(--ease) both; }

/* The front card: out to the side, then behind the others into the last place. */
@keyframes deal-front {
  0% { z-index: 2; transform: none; opacity: 1; box-shadow: var(--shadow); }
  42% { z-index: 2; transform: translate(46px, -30px) rotate(3.5deg); opacity: 1; box-shadow: var(--shadow); }
  43% { z-index: -1; transform: translate(46px, -30px) rotate(3.5deg); }
  100% { z-index: -1; transform: translate(calc(var(--stack) * -2), calc(var(--stack) * -2)); opacity: 0.86; box-shadow: 0 0 0 rgba(23, 50, 92, 0); }
}

/* Its writing goes with it, and is gone by the time it is behind the deck. */
@keyframes deal-ink {
  0%, 25% { opacity: 1; }
  55%, 100% { opacity: 0; }
}

@keyframes deal-middle {
  0%, 30% { transform: translate(calc(var(--stack) * -1), calc(var(--stack) * -1)); opacity: 0.94; box-shadow: 0 0 0 rgba(23, 50, 92, 0); }
  100% { transform: none; opacity: 1; box-shadow: var(--shadow); }
}

@keyframes deal-back {
  0%, 30% { transform: translate(calc(var(--stack) * -2), calc(var(--stack) * -2)); opacity: 0.86; }
  100% { transform: translate(calc(var(--stack) * -1), calc(var(--stack) * -1)); opacity: 0.94; }
}

.record-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 27px;
}

.record-title {
  margin: 2px 0 12px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.record-rows li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.35;
}

.record-rows .n {
  flex: none;
  width: 30px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.record-rows .rule .n { color: var(--accent); font-weight: 500; }

/* Hero object 3: the chosen solution */

.agent {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 340px;
  padding: 22px 30px 22px 22px;
  border-radius: 999px;
  transition: opacity 500ms ease;
}

.agent-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.agent-body strong {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.agent-status {
  margin-top: 2px;
  font-size: 13.5px;
  color: var(--muted);
}

.agent-check {
  position: absolute;
  top: -8px;
  right: 22px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #fff;
}


/* The demo's hidden states exist only when JS will play it. */
@media (prefers-reduced-motion: no-preference) {
  .js .stage [data-row],
  .js .stage [data-captured] {
    transition: opacity 450ms var(--ease), transform 450ms var(--ease);
  }

  .js .stage [data-row]:not(.is-on) { opacity: 0; transform: translateY(6px); }
  .js .stage [data-captured]:not(.is-on) { opacity: 0; transform: scale(0.9); }
  .js .stage .agent:not(.is-on) { opacity: 0.55; }

  .js .stage .agent-check { transition: transform 450ms var(--ease-pop); }

  /* Between departments the names fade out, are replaced, and fade back in. */
  .js .stage .record-title,
  .js .stage .record-head,
  .js .stage .agent-body strong { transition: opacity 320ms ease; }
  .js .stage.is-swapping .record-title,
  .js .stage.is-swapping .agent-body strong { opacity: 0; }
  .js .stage .agent:not(.is-on) .agent-check { transform: scale(0); }
}

/* Why: a pile of workshop artefacts against one calm record */

.versus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 28px);
  padding: clamp(14px, 2.6vw, 36px);
}

.versus-col {
  display: flex;
  flex-direction: column;
  padding: clamp(10px, 1vw, 14px);
}

.versus-art svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.versus-art {
  border-radius: 16px;
  background: var(--tint-2);
}

.versus-ours .versus-art { overflow: hidden; }

.versus-art .t-q { font-size: 24px; font-weight: 500; fill: #9AA6B2; }

.versus h3 {
  margin: clamp(20px, 2.4vw, 32px) clamp(8px, 1.6vw, 22px) 14px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}

.versus ul { margin-inline: clamp(8px, 1.6vw, 22px); }

/* Two lines of room per row keeps the pairs level across the columns. */
.versus li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: calc(2.6em + 30px);
  padding-block: 12px;
  border-top: 1px solid var(--line);
  font-size: clamp(1.0625rem, 0.9rem + 0.45vw, 1.25rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.versus li svg { flex: none; }
.versus-usual li { color: var(--text-2); }
.versus-ours li { font-weight: 500; }
.versus-ours { padding-bottom: clamp(14px, 1.6vw, 22px); }

/* Discovery: conversations and recordings share one section. */

.discovery-intro { margin-top: clamp(32px, 4vw, 48px); }

.discovery-title {
  max-width: 24em;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.discovery-intro > p,
.discovery-copy {
  max-width: 760px;
  margin-top: 14px;
  color: var(--text-2);
  font-size: 18px;
  line-height: 1.5;
  text-wrap: pretty;
}

.discovery .where-when { margin-top: 28px; }

.discovery-copy a {
  text-decoration: underline;
  text-decoration-color: rgba(15, 26, 38, 0.35);
  text-underline-offset: 4px;
}

.discovery-recording {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid rgba(15, 26, 38, 0.2);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

.discovery-recording .trio { margin-top: 28px; }

.discovery-recording .trio h4 {
  margin: 24px 18px 0;
  font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.decision-next {
  max-width: 880px;
  margin-top: 28px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-2);
  text-wrap: pretty;
}

/* Interviews: where and when they happen */

.where-when {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px clamp(32px, 5vw, 88px);
  max-width: 1080px;
  margin-top: clamp(40px, 5vw, 64px);
}

.where-when > div {
  padding-top: 20px;
  border-top: 1px solid rgba(15, 26, 38, 0.2);
}

.where-when p {
  max-width: 30em;
  margin-top: 10px;
  color: var(--ink-2);
  text-wrap: pretty;
}

.tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.tools li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 8px 15px 8px 11px;
  border: 1px solid rgba(15, 26, 38, 0.08);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
}

.tools svg,
.tools img { flex: none; }

/* Interviews: convergence */

.converge { margin-top: clamp(40px, 5vw, 64px); }

.converge svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.converge-tall {
  display: none;
  max-width: 440px;
  margin-inline: auto;
}

.converge .t-label { font-size: 14px; fill: var(--muted); }
.converge .t-row { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; fill: var(--ink); }
.converge-tall .t-label { font-size: 13px; }
.converge-tall .t-row { font-size: 15px; }

.js .converge .threads path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 900ms var(--ease);
  transition-delay: calc(var(--d) * 25ms);
}

.js .converge .pick {
  opacity: 0;
  transition: opacity 400ms ease;
  transition-delay: calc(650ms + var(--d) * 140ms);
}

.js .converge.is-in .threads path { stroke-dashoffset: 0; }
.js .converge.is-in .pick { opacity: 1; }

/* How: six steps */

.steps-panel { padding: 44px clamp(8px, 1vw, 16px) 40px; }

.steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  text-align: center;
}

.steps li {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.step-art {
  position: relative;
  margin-bottom: 6px;
}

.step-art svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.steps li:not(:last-child) .step-art::after {
  content: "";
  position: absolute;
  top: 53.7%;
  left: var(--arrow-x, 100%);
  width: clamp(22px, 3.2vw, 44px);
  aspect-ratio: 44 / 14;
  transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 14' fill='none' stroke='%230F1A26' stroke-opacity='.45' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h41M34 1l8 6-8 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.steps li:nth-child(2) { --arrow-x: 101.5%; }
.steps li:nth-child(3) { --arrow-x: 95%; }

.step-n {
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.steps p {
  padding-inline: 10px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--muted);
  text-wrap: balance;
}

/* Teaser for the examples page */

.teaser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px clamp(32px, 5vw, 80px);
  margin-top: clamp(40px, 4.5vw, 64px);
}

.teaser p {
  max-width: 34em;
  margin-top: 10px;
  color: var(--text-2);
  text-wrap: pretty;
}

.teaser-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.teaser-links nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.teaser-links nav a {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
}

.teaser-links nav a:hover { border-color: var(--accent); }

/* AgentHandover: three moves, each shown as the thing that happens */

.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: clamp(40px, 5vw, 64px);
}

.trio li {
  position: relative;
  container-type: inline-size;
  padding: 10px 10px 30px;
}

.trio-art {
  border-radius: 16px;
  background: var(--tint-2);
  overflow: hidden;
}

.trio-art svg {
  width: 100%;
  height: auto;
}

.trio-art text { font-size: 13px; fill: var(--ink); }
.trio-art .t-muted { font-size: 12px; fill: var(--muted); }
.trio-art .t-blue { font-size: 12px; font-weight: 500; fill: var(--accent-text); }
.trio-art .t-initials { font-size: 8.5px; font-weight: 500; letter-spacing: 0.02em; }

/* Connector sits in the gap, level with the middle of the illustration. */
.trio li + li::before {
  content: "";
  position: absolute;
  top: calc(10px + (100cqw - 20px) * 0.2917);
  left: -12px;
  z-index: 1;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%230F1A26' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 11l5 5-5 5'/%3E%3C/svg%3E") center / 32px no-repeat;
  box-shadow: var(--shadow-sm);
}

.trio h3 { margin: 24px 18px 0; }

.trio p {
  margin: 10px 18px 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text-2);
  text-wrap: pretty;
}

/* Decide: one shortlisted workflow fans out into four options (the interviews diagram in reverse) */

.fork {
  --card-h: 100px;
  --card-gap: 16px;
  display: grid;
  grid-template-columns: minmax(0, 348px) minmax(60px, 1fr) minmax(0, 800px);
  align-items: center;
  /* Room above for the column headings, which hang over the first card. */
  margin-top: calc(clamp(40px, 5vw, 64px) + 31px);
}

.fork-source {
  --stack: 12px;
  padding: 24px 0 0 24px;
  isolation: isolate;
}

.fork-record { padding: 26px 28px 24px; }

.fork-title {
  margin-top: 4px;
  font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.fork-today {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}

.fork-record dl { margin: 6px 0 0; }

.fork-record dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  align-items: center;
  gap: 14px;
  padding: 7px 0;
  font-size: 14px;
}

.fork-record dd { margin: 0; }

.fork-lines {
  width: 100%;
  height: calc(var(--card-h) * 4 + var(--card-gap) * 3);
  overflow: visible;
}

.fork-lines path {
  fill: none;
  stroke: rgba(15, 26, 38, 0.28);
  stroke-width: 1;
}

.fork-lines path.is-rec { stroke: var(--accent); stroke-width: 2; }

.fork-options { position: relative; }

.fork-head,
.fork-card {
  display: grid;
  grid-template-columns: minmax(0, 212px) repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0 clamp(16px, 2vw, 28px);
  padding-inline: clamp(18px, 2vw, 28px);
}

.fork-head {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  align-items: end;
  padding-bottom: 14px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-2);
}

.fork-card {
  height: var(--card-h);
  margin-top: var(--card-gap);
  border-radius: 20px;
}

.fork-head + .fork-card { margin-top: 0; }

.fork-name {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.fork-name svg { flex: none; }

.fork-name > span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.fork-name em { font-style: normal; padding: 4px 9px; font-size: 12px; }

.fork .m-label { display: none; }

.meter {
  position: relative;
  display: block;
}

.meter::after {
  content: "";
  position: absolute;
  top: -4px;
  left: calc(var(--b) * 1%);
  width: 2px;
  height: 14px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--ink);
}

.bar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--track);
  overflow: hidden;
}

.bar i {
  display: block;
  width: calc(var(--v) * 1%);
  height: 100%;
  border-radius: 3px;
  background: var(--ink);
  transform-origin: left;
  transition: transform 900ms var(--ease);
  transition-delay: calc(var(--r, 0) * 110ms + 700ms);
}

.bar.is-today i { background: rgba(15, 26, 38, 0.45); transition-delay: 100ms; }
.is-recommended .bar i { background: var(--accent); }

.js .fork:not(.is-in) .bar i { transform: scaleX(0); }

/* The fan is wiped in from the source. (A dash-offset draw would need pathLength,
   which non-scaling strokes measure in screen space and so break.) */
.js .fork .fork-lines {
  clip-path: inset(-8px 100% -8px 0);
  transition: clip-path 1100ms var(--ease) 150ms;
}

.js .fork.is-in .fork-lines { clip-path: inset(-8px 0 -8px 0); }

/* What you get */

#value .lead { max-width: 700px; }

.value-panel {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 760px);
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(20px, 3.2vw, 44px) clamp(16px, 4vw, 56px);
}

.outcomes li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid rgba(15, 26, 38, 0.12);
  font-size: clamp(1.1875rem, 1rem + 0.4vw, 1.375rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.outcomes li:last-child { border-bottom: 1px solid rgba(15, 26, 38, 0.12); }
.outcomes svg { flex: none; margin-top: 3px; }

.ops {
  container: operations / inline-size;
  padding: 32px 36px 20px;
}

.ops-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ops-head .label { white-space: normal; }

.ops-title {
  margin-top: 4px;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.ops-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 124px 48px 128px;
  align-items: center;
  gap: 0 20px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}

.ops-cols {
  padding: 22px 0 12px;
  border-top: 0;
  font-size: 13px;
  color: var(--muted);
}

.ops-row > :last-child { justify-self: end; }

.ops .time {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ops .time .was,
.ops .time .to { color: var(--muted); }

.ops .time strong {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.ops-roi {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.ops-roi strong {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--accent);
}

.ops .wf {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.ops .how { font-size: 15px; color: var(--text-2); }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--tint-3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* The dissolve into the closing section starts white, so it serves as the
   bottom spacing of whatever comes before it. */
.section:has(+ .start) { padding-bottom: clamp(56px, 7vw, 104px); }

/* Start: the closing field. The page dissolves into the blue, the bank rises
   back to white above the footer. */

.sky-end .sky-open {
  --sky-pad-b: clamp(56px, 7vw, 96px);
  padding-block: clamp(32px, 4vw, 64px) var(--sky-pad-b);
}

.sky-end .lead { max-width: 720px; }
.sky-end .actions { margin-top: 36px; }

.contact { font-size: 16px; color: rgba(255, 255, 255, 0.94); }
.contact:hover { color: #fff; }

/* Footer */

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  min-height: 96px;
  padding-block: 28px;
}

.footer .brand-logo { height: 18px; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  font-size: 14px;
  color: var(--muted);
}

.copyright { font-size: 14px; color: var(--muted); }

/* Privacy notice */

.legal { padding-block: clamp(120px, 14vw, 180px) clamp(72px, 9vw, 120px); }
.legal h1 { font-size: clamp(2.5rem, 1.4rem + 4vw, 4.5rem); }
.legal-date { margin-top: 20px; font-size: 14px; color: var(--muted); }
.legal-body { max-width: 680px; margin-top: 56px; color: var(--ink-2); font-size: 16.5px; line-height: 1.65; }
.legal-body h2 { max-width: none; margin-top: 48px; font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body ul { margin-top: 14px; text-wrap: pretty; }
.legal-body ul { padding-left: 1.2em; list-style: disc; }
.legal-body li::marker { color: var(--muted); }
.legal-body li + li { margin-top: 8px; }
.legal-body b { font-weight: 500; color: var(--ink); }
.legal-body a, .book-actions p a { text-decoration: underline; text-decoration-color: rgba(15, 26, 38, 0.3); text-underline-offset: 3px; }
.legal-body a:hover, .book-actions p a:hover { text-decoration-color: currentColor; }
.legal-body code { font-size: 0.92em; }
.footer-links a[aria-current="page"] { color: var(--ink); }

/* The Claude Startups badge, in a full-width row under the footer row on every layout.
   The description stays on one line, down to the narrowest phones. */
.footer-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; flex-basis: 100%; grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--muted); }
.footer-note-text { white-space: nowrap; }
.startups-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border: 1px solid rgba(15, 26, 38, 0.1); border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(15, 26, 38, 0.06); color: var(--ink-2); white-space: nowrap; }
.startups-badge svg { flex: none; color: #D97757; }
.startups-badge b { font-weight: 500; color: var(--ink); }
.startups-badge:hover { border-color: rgba(15, 26, 38, 0.2); color: var(--ink); }
@media (max-width: 359px) { .footer-note { font-size: 11.5px; } }

/* Booking dialog */

html:has(.book[open]) { overflow: hidden; }

.book {
  width: min(100% - 32px, 600px);
  max-height: calc(100dvh - 32px);
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid rgba(15, 26, 38, 0.08);
  border-radius: var(--r-panel);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(15, 26, 38, 0.08), 0 40px 80px -20px rgba(15, 26, 38, 0.35);
  overflow: auto;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 220ms ease, transform 260ms var(--ease), overlay 260ms allow-discrete, display 260ms allow-discrete;
}

.book[open] { opacity: 1; transform: none; }

@starting-style {
  .book[open] { opacity: 0; transform: translateY(12px); }
}

.book::backdrop {
  background: rgba(15, 26, 38, 0.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.book-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.book h2 {
  max-width: none;
  font-size: clamp(1.625rem, 1.4rem + 1vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  outline: none;
}

.book-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.book-close:hover { background: var(--grey-tint); color: var(--ink); }

.book-intro {
  margin-top: 10px;
  color: var(--text-2);
  text-wrap: pretty;
}

.book form { margin-top: 26px; }

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
}

.field small { font-size: inherit; font-weight: 400; color: var(--muted); }

.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid rgba(15, 26, 38, 0.2);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.field textarea { resize: vertical; min-height: 92px; line-height: 1.45; }

.field input:hover,
.field textarea:hover { border-color: rgba(15, 26, 38, 0.4); }

.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  border-radius: 12px;
  box-shadow: 0 0 0 3px rgba(47, 107, 212, 0.22);
}

.field input:user-invalid { border-color: #C0392B; }

.book-actions {
  display: flex;
  align-items: center;
  gap: 16px 20px;
  margin-top: 10px;
}

.book-actions .btn { flex: none; border: 0; font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; }

.book-actions p {
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
  text-wrap: pretty;
}

.book-actions .btn[disabled] { opacity: 0.6; cursor: default; }

/* Spam trap: real people never see or reach this field. */
.book-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.book-intro strong { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }

.book-address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 22px 0 26px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--tint-1);
  font-size: 18px;
  font-weight: 500;
}

/* Responsive */

/* The paired panel needs room for the workflow name as well as all three
   fixed-width data columns. Retain the paired layout from 1280px upward. */
@media (max-width: 1279px) {
  .value-panel { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1100px) {
  .where-when { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .ops { width: 100%; }

  .fork { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-top: clamp(40px, 5vw, 64px); }
  .fork-source { padding: 16px 0 0 16px; --stack: 8px; }
  .fork-lines { display: none; }

  .fork-head {
    right: auto;
    bottom: auto;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
  }

  /* A short stem stands in for the fan of lines. */
  .fork-head + .fork-card { position: relative; margin-top: 44px; }

  .fork-head + .fork-card::before {
    content: "";
    position: absolute;
    top: -36px;
    left: 50%;
    width: 1px;
    height: 28px;
    background: rgba(15, 26, 38, 0.3);
  }

  .fork-card {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding-block: 20px 22px;
  }

  .fork-name > span { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 12px; }

  .fork .metric {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
  }

  .fork .m-label { display: block; font-size: 13px; color: var(--muted); }

  /* The hero demo stacks once three columns can no longer hold their text. */
  .stage {
    --slot: 0px;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .stage-col { width: 100%; max-width: 420px; }
  .interview, .deck, .agent { max-width: none; }
  .deck { width: calc(100% - var(--stack) * 2); }

  .stage-arrow {
    width: 48px;
    height: 14px;
    margin-block: 40px;
    padding: 0;
    transform: rotate(90deg);
  }
}

@media (max-width: 960px) {
  :root { --nav-h: 72px; }

  .nav-toggle { display: block; }
  .nav-cta-mobile { display: inline-flex; margin-left: auto; margin-right: 12px; min-height: 40px; padding: 0 14px; font-size: 15px; }
  html:not(.js) .nav-cta-mobile { display: none; }

  .nav-menu {
    position: absolute;
    top: calc(100% - 4px);
    right: var(--gutter);
    left: var(--gutter);
    display: grid;
    gap: 2px;
    padding: 10px;
    border: 1px solid rgba(15, 26, 38, 0.08);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--shadow);
    font-size: 18px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 200ms ease, transform 240ms var(--ease), visibility 0s 240ms;
  }

  .nav[data-open] .nav-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 200ms ease, transform 240ms var(--ease);
  }

  /* Short landscape screens: the menu scrolls inside itself instead of running off the screen. */
  .nav-menu { max-height: calc(100dvh - var(--nav-h) - 8px); overflow-y: auto; overscroll-behavior: contain; }

  .nav-menu { --nav-link: var(--ink); --nav-link-hover: var(--accent); --nav-current: var(--accent); }
  .nav-menu a:not(.btn) { padding: 14px 16px; border-radius: 12px; }
  .nav-menu a:not(.btn):hover { background: var(--tint-1); }
  .nav-menu a[aria-current="true"] { text-underline-offset: 6px; }
  .nav-menu .btn { margin-top: 8px; padding: 15px 20px; font-size: 16px; }

  /* Without JS the menu cannot open, so keep only the CTA in the bar. */
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .nav-menu { position: static; display: block; padding: 0; border: 0; box-shadow: none; background: none; opacity: 1; visibility: visible; transform: none; }
  html:not(.js) .nav-menu a:not(.btn) { display: none; }
  html:not(.js) .nav-menu .btn { margin: 0; padding: 11px 20px; font-size: 15px; }

  .converge-wide { display: none; }
  .converge-tall { display: block; }

  .steps-panel { padding: 16px clamp(16px, 4vw, 32px); }

  .steps {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
  }

  .steps li {
    display: grid;
    grid-template-columns: clamp(120px, 34vw, 200px) minmax(0, 1fr);
    align-content: center;
    gap: 4px clamp(12px, 3vw, 28px);
    padding-block: 4px;
  }

  .steps li + li { border-top: 1px solid var(--line); }
  .steps li:not(:last-child) .step-art::after { display: none; }

  .step-art { grid-row: 1 / 4; margin: 0; }
  .step-n { align-self: end; }
  .steps h3 { align-self: center; }
  .steps p { align-self: start; padding: 0; text-wrap: pretty; }
}

@media (max-width: 820px) {
  .teaser { grid-template-columns: minmax(0, 1fr); }

  .versus { grid-template-columns: minmax(0, 1fr); }
  .versus-art { max-width: 520px; }
  .versus li { min-height: 0; padding-block: 16px; text-wrap: pretty; }

  .trio { grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 520px; }
  .trio li + li::before { top: -14px; left: 50%; transform: translate(-50%, -50%) rotate(90deg); }
}

/* The operations view responds to its own available width, including when it
   shares the value panel with the deliverables. Keep table semantics intact. */
@container operations (max-width: 519px) {
  .ops-cols { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }

  .ops-table { margin-top: 18px; }

  .ops-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 14px 0;
  }

  .ops .wf { grid-column: 1; grid-row: 1; font-size: 17px; }
  .ops .time { grid-column: 2; grid-row: 1; justify-self: end; }
  .ops .how { grid-column: 1; grid-row: 2; font-size: 14px; }
  .ops .owner { grid-column: 2; grid-row: 2; justify-self: end; }
}

/* Narrow cards give the workflow name its own row so long names never collide
   with the before/after figures. */
@container operations (max-width: 259px) {
  .ops-head { flex-direction: column; align-items: flex-start; }
  .ops-roi { align-items: flex-start; text-align: left; }
  .ops .wf { grid-column: 1 / -1; grid-row: 1; }
  .ops .how { grid-column: 1; grid-row: 2; }
  .ops .owner { grid-column: 2; grid-row: 2; }
  .ops .time { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
}

@media (max-width: 640px) {
  .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .book-actions { flex-direction: column; align-items: stretch; }
  .book-actions .text-link { align-self: center; }

  .ops { padding: 24px 20px 8px; }
  .ops-title { font-size: 21px; }

  .footer-inner { flex-direction: column; align-items: flex-start; }

  /* Four links cannot share one row on a phone, so they form an even grid instead of wrapping three and one. */
  .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; width: 100%; }
}

/* Keep every tool name readable on phones, including when a logo cannot load. */
@media (max-width: 480px) {
  .tools { max-width: min(280px, 100%); }
  .tools li { padding-inline: 12px; }
}

@media (max-width: 420px) {
  .fork .metric { grid-template-columns: 148px minmax(0, 1fr); gap: 10px; }
  .actions .btn-lg { width: 100%; }
  .people svg { width: 32px; height: 32px; }
}

/* Phones held sideways: very little height, so the hero gives up some air and
   the headline comes down a size to keep the call to action on the first screen. */
@media (orientation: landscape) and (max-height: 480px) {
  :root { --nav-h: 60px; }
  .hero { padding-top: calc(var(--nav-h) + 8px); }
  h1 { font-size: clamp(2rem, 4.6vw, 2.75rem); }
  .hero .lead { margin-top: 16px; font-size: 1rem; }
  .hero .actions { margin-top: 20px; }
  .btn-lg { padding: 13px 24px; }
}

/* Touch screens: every link and button gets a finger-sized target. Padding is
   paired with a negative margin where the layout must not move. */
@media (pointer: coarse) {
  .brand { padding-block: 10px; }
  .nav-menu a:not(.btn) { padding-block: 12px; }
  .text-link, .contact { display: inline-block; padding-block: 11px; margin-block: -11px; }
  .ghost-btn { padding: 11px 16px; }
  .footer-links { row-gap: 0; }
  .footer-links a { padding-block: 12px; }
  .teaser-links nav a { padding-block: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* Use one spacing scale for the main journey; the hero and closing artwork
   retain the padding their illustrations require. */
#why,
.process-overview,
.discovery,
#decide { padding-block: clamp(64px, 6vw, 88px); }

#value { padding-top: clamp(64px, 6vw, 88px); }
.process-overview .teaser { margin-top: 32px; }

@media (min-width: 961px) {
  .process-overview .steps-panel { padding-block: 24px; }
  .process-overview .step-art svg { max-height: 116px; }
}

@media (max-width: 960px) {
  .process-overview .steps li {
    grid-template-columns: clamp(92px, 23vw, 148px) minmax(0, 1fr);
    padding-block: 12px;
  }
}

/* The pause button remains outside the decorative animation's hidden subtree. */
.stage-controls { display: flex; justify-content: flex-end; margin-top: 20px; }
.animation-toggle { min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-2); font: inherit; font-size: 14px; cursor: pointer; }
.animation-toggle[hidden] { display: none; }
.hero.is-paused [data-demo] * { animation-play-state: paused !important; }
.chart-guide { margin-bottom: 24px; }
.today-legend { white-space: nowrap; }
.today-legend i { display: inline-block; width: 2px; height: 14px; margin: 0 5px 0 4px; background: var(--ink); vertical-align: -2px; }
@media (max-width: 359px) { .nav-cta-mobile { display: none; } }
@media (min-width: 641px) and (max-width: 1100px) { h2 { font-size: min(4.88vw, 3.6rem); } }


/* Phone: the page shortened
   On a phone the desktop layouts stack into tall columns and the page runs to
   seventeen screens. These rules keep every statement, step and figure on the
   page and take back the height three ways: a tighter rhythm; the three tall
   blocks laid out for a narrow screen (the hero demo plays its three stages in
   one place, the comparison shows each pair as one row, the four scored options
   share one card); and the interviews section compacted (the empty workflow
   sheet stays folded until the interview plays, the recording's three cards
   become three rows). Desktop is untouched. */
@media (max-width: 720px) {
  /* Rhythm */
  .section { padding-block: 52px 56px; }
  .section:has(+ .start) { padding-bottom: 44px; }
  .lead { margin-top: 20px; }
  .sky-hero .lead { font-size: 1rem; }
  .panel { margin-top: 28px; }
  .teaser,
  .process-overview .teaser { margin-top: 24px; }
  .process-overview .steps li { grid-template-columns: 76px minmax(0, 1fr); padding-block: 8px; }
  .outcomes li { gap: 12px; padding: 7px 0; border-top: 0; font-size: 1rem; }
  .outcomes li:last-child { border-bottom: 0; }
  .outcomes { padding-block: 6px; }
  .outcomes svg { width: 20px; height: 20px; margin-top: 1px; }
  .where-when { margin-top: 24px; gap: 20px; }
  .where-when > div { padding-top: 16px; }
  .converge { margin-top: 24px; }
  .converge-tall { max-width: 300px; }
  .discovery-intro { margin-top: 24px; }
  .discovery-recording { margin-top: 44px; padding-top: 0; border-top: 0; }
  .discovery-copy { font-size: 17px; }
  .decision-next { font-size: 17px; }
  .stage-controls { margin-top: 12px; }
  .ops { padding: 20px 18px 6px; }
  .ops-head { gap: 6px; }
  .ops-head > div:first-child .label { display: none; }
  .ops-title { margin-top: 0; font-size: 19px; }
  .ops-roi { gap: 0; }
  .ops-roi .label { font-size: 13px; }
  .ops-roi strong { font-size: 1.125rem; }
  .ops-table { margin-top: 8px; }
  .ops-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 9px 0; }
  .value-panel { gap: 16px; padding: 16px 16px 18px; }
  #value .footnote { margin-top: 12px; }
  .ops .wf { grid-column: 1; grid-row: 1; font-size: 16px; }
  .ops .time { grid-column: 2; grid-row: 1; justify-self: end; font-size: 14px; }
  .ops .time strong { font-size: 15px; }
  .ops .how { grid-column: 1; grid-row: 2; font-size: 13.5px; }
  .ops .owner { grid-column: 2; grid-row: 2; justify-self: end; }
  /* The footer on two rows: the brand and the copyright on the first, the
     links in one row on the second. Five links do not fit one row, so the
     link to the section just above the footer is left to the menu. */
  .footer-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; min-height: 0; padding-block: 20px 18px; }
  .footer .brand { grid-column: 1; grid-row: 1; }
  .footer .copyright { grid-column: 2; grid-row: 1; font-size: 13px; }
  .footer-links { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 10px; grid-column: 1 / -1; grid-row: 2; width: 100%; font-size: 13px; }
  .footer-links a { padding-block: 10px; white-space: nowrap; }
  .footer-links a[href="/what-you-get"] { display: none; }

  /* The comparison: each pair as one row, the usual way above ours, under a
     two-word legend. The columns and lists give up their boxes so the items
     can be placed on one grid; one illustration stays, at the top. */
  .versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; padding: 16px 18px 6px; }
  .versus-col,
  .versus ul { display: contents; }
  .versus-usual .versus-art { display: none; }
  .versus-ours .versus-art { grid-column: 1 / -1; grid-row: 1; max-width: none; }
  .versus h3 { grid-row: 2; margin: 18px 0 4px; font-size: 13px; }
  .versus-usual h3 { grid-column: 1; }
  .versus-ours h3 { grid-column: 2; color: var(--ink); font-weight: 500; }
  .versus li {
    grid-column: 1 / -1;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 10px;
    min-height: 0;
    padding-block: 6px;
    border-top: 0;
    font-size: 15px;
    line-height: 1.35;
  }
  .versus li svg { width: 18px; height: 18px; }
  .versus-usual li { padding-top: 14px; border-top: 1px solid var(--line); }
  .versus-ours li { padding-bottom: 14px; }
  .versus-usual li:nth-child(1) { grid-row: 3; }
  .versus-usual li:nth-child(2) { grid-row: 5; }
  .versus-usual li:nth-child(3) { grid-row: 7; }
  .versus-usual li:nth-child(4) { grid-row: 9; }
  .versus-usual li:nth-child(5) { grid-row: 11; }
  .versus-usual li:nth-child(6) { grid-row: 13; }
  .versus-usual li:nth-child(7) { grid-row: 15; }
  .versus-ours li:nth-child(1) { grid-row: 4; }
  .versus-ours li:nth-child(2) { grid-row: 6; }
  .versus-ours li:nth-child(3) { grid-row: 8; }
  .versus-ours li:nth-child(4) { grid-row: 10; }
  .versus-ours li:nth-child(5) { grid-row: 12; }
  .versus-ours li:nth-child(6) { grid-row: 14; }
  .versus-ours li:nth-child(7) { grid-row: 16; }

  /* The decision: on a phone the scored-options drawing and its two notes are
     left out; the heading, the lead and the engineers' paragraph carry the
     point. */
  .fork,
  .chart-guide,
  .fork + .footnote { display: none; }
  .decision-next { margin-top: 24px; }

  /* The recording: three rows with small pictures instead of three cards. */
  .trio { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: none; margin-top: 16px; }
  .trio li {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 2px 16px;
    padding: 14px 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: none;
    box-shadow: none;
    container-type: normal;
  }
  .trio li:first-child { border-top: 0; }
  .trio li + li::before { display: none; }
  .trio-art { grid-row: 1 / 3; border-radius: 12px; }
  .trio h3,
  .discovery-recording .trio h4 { margin: 0; align-self: end; font-size: 17px; }
  .trio p { margin: 0; align-self: start; font-size: 15px; line-height: 1.4; }
}

/* The hero demo on a phone plays its three stages in one place: each column
   takes the same cell and the one the arrows have reached shows, the others
   fading away. Without JavaScript or with reduced motion the three stay
   stacked, every one in its final state, as before. */
@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  .js .stage { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .js .stage > .stage-arrow { display: none; }
  .js .stage > .stage-col {
    grid-area: 1 / 1;
    align-self: center;
    opacity: 0;
    translate: 0 12px;
    pointer-events: none;
    transition: opacity 600ms ease, translate 600ms var(--ease);
  }
  .js .stage > .stage-col:nth-child(1) { opacity: 1; translate: none; }
  .js .stage:has(> .stage-arrow:nth-child(2).is-on) > .stage-col:nth-child(1) { opacity: 0; translate: 0 -12px; }
  .js .stage:has(> .stage-arrow:nth-child(2).is-on) > .stage-col:nth-child(3) { opacity: 1; translate: none; }
  .js .stage:has(> .stage-arrow:nth-child(4).is-on) > .stage-col:nth-child(3) { opacity: 0; translate: 0 -12px; }
  .js .stage:has(> .stage-arrow:nth-child(4).is-on) > .stage-col:nth-child(5) { opacity: 1; translate: none; }
}