/* Homepage only. Builds on css/site.css.
   Spacing uses the --space-* scale in site.css. The interactive scenes drawn over screenshots (.scene, .ai-*, .sf-*,
   .sr-*, .obl*, the reaction chips, the search phone) keep exact px: their sizes and offsets match the images. */

/* ---------- Hero ---------- */
/* Equal padding top and bottom, so the hero content centres in the screen while clearing the fixed nav. */
.hero { position: relative; min-height: 100svh; padding-block: calc(var(--nav-h) + var(--space-16)); display: flex; flex-direction: column; overflow: clip; }
.hero-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: var(--space-fluid-2xl); }
.hero-copy { position: relative; z-index: 2; }
.hero-copy .eyebrow { margin-bottom: clamp(20px, 3.2vh, 36px); }
.hero h1 { max-width: 7.6em; font-size: clamp(3rem, 6.6vw, 7rem); }
.hero h1 .ital { font-weight: 300; }
.hero .lead { margin-top: clamp(20px, 3vh, 32px); max-width: 40ch; }
.hero-ctas { margin-top: clamp(26px, 4vh, 44px); display: flex; flex-wrap: wrap; gap: var(--space-12); }

.hero-globe { position: relative; margin: 0; aspect-ratio: 1; width: min(100%, 76vh, 700px); justify-self: end; touch-action: pan-y; }
.hero-globe canvas { width: 100%; height: 100%; opacity: 0; transform: scale(0.94) rotate(-8deg); transition: opacity 1.4s var(--ease), transform 1.8s var(--ease); cursor: grab; }
.hero-globe.is-ready canvas { opacity: 1; transform: none; }
.hero-globe.is-dragging canvas { cursor: grabbing; }
.hero-globe::before { /* a soft halo behind the globe (dark mode only; the light-mode globe gets a shadow instead) */
  content: ""; position: absolute; inset: 8%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--card) 90%, transparent), transparent 68%);
}
.hero-globe.is-failed { display: none; }
.globe-tip {
  position: absolute; left: 0; top: 0; z-index: 4; width: 230px; pointer-events: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-12) var(--space-16);
  font-size: 0.82rem; line-height: 1.45; color: var(--ink-2); opacity: 0; transition: opacity 0.2s ease;
}
.globe-tip.is-on { opacity: 1; }
.globe-tip b { display: block; color: var(--ink); font-size: 0.92rem; }
.globe-tip .mono { display: block; margin: 2px 0 var(--space-8); font-size: 10px; }
.globe-caption { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); display: flex; align-items: center; gap: var(--space-12); white-space: nowrap; color: var(--muted); }
.globe-caption [data-globe-caption] { display: inline-flex; gap: var(--space-8); color: var(--ink); }
.globe-caption .globe-arrow { color: var(--accent); }

.hero-foot { position: relative; z-index: 2; padding-block: var(--space-24) var(--space-24); }
.hero-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-24); border-top: 1px solid var(--line); padding-top: var(--space-20); margin: 0; }
.hero-facts dt { color: var(--muted); }
.hero-facts dd { margin: var(--space-8) 0 0; font-size: 0.95rem; color: var(--ink); line-height: 1.4; }
.scroll-cue { display: inline-flex; align-items: center; gap: var(--space-12); text-decoration: none; color: var(--muted); }
.scroll-cue i { width: 1px; height: 28px; background: var(--line-strong); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--accent); animation: cue 2.2s var(--ease-in-out) infinite; }
@keyframes cue { to { top: 110%; } }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; align-content: start; }
  .hero-globe { order: -1; width: min(78vw, 420px); justify-self: center; margin: -4px 0 var(--space-8); }
  .hero-copy { padding-bottom: 0; }
  .hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-16); }
  .globe-caption { bottom: -18px; }
}
@media (max-width: 560px) {
  .hero { padding-top: calc(var(--nav-h) + var(--space-8)); }
  .hero-grid { gap: var(--space-4); }
  .hero-globe { width: min(74vw, 340px); margin: 0 0 var(--space-48); }
  .globe-caption { bottom: -26px; }
  .hero h1 { font-size: clamp(2.5rem, 11vw, 3.2rem); }
  .hero .lead { font-size: 1.05rem; margin-top: var(--space-16); }
  .hero-ctas { margin-top: var(--space-24); gap: var(--space-12); }
  .hero-ctas .btn { flex: 1 1 auto; height: 46px; padding: 0 var(--space-16); }
  .hero-copy .eyebrow { margin-bottom: var(--space-16); }
}

/* ---------- Work: header + manifest ---------- */
.work-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-24); align-items: end; margin-bottom: 0; }
.work-head h2 { grid-column: 1 / span 7; }
.work-head p { grid-column: 9 / span 4; color: var(--ink-2); }
@media (max-width: 860px) { .work-head h2, .work-head p { grid-column: 1 / -1; } }

.manifest { list-style: none; margin: 0; padding: 0; }
/* Departure line above the work index: the plane draws it as the list scrolls in (js/home.js sets --rl). */
.route-line { position: relative; height: 1px; background: var(--line-strong); }
.route-fill { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--rl, 1)); }
.route-plane { position: absolute; top: -10px; left: 0; width: 20px; height: 20px; color: var(--accent); opacity: var(--rl-o, 0); transition: opacity 0.3s; }
.route-label { position: absolute; right: 0; top: -26px; color: var(--muted); }
.manifest li { border-bottom: 1px solid var(--line); }
.manifest a {
  display: grid; grid-template-columns: 64px minmax(0, 2.4fr) minmax(0, 1.1fr) minmax(0, 1.3fr) 32px;
  gap: var(--space-20); align-items: center; padding: var(--space-24) var(--space-4); text-decoration: none; position: relative; isolation: isolate;
  transition: padding 0.5s var(--ease), color 0.3s;
}
.manifest a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper-2); transform: scaleY(0); transform-origin: bottom; transition: transform 0.5s var(--ease); }
.manifest a:hover::before, .manifest a:focus-visible::before { transform: scaleY(1); }
.manifest a:hover { padding-inline: var(--space-16) var(--space-16); }
.m-num { font-family: var(--f-mono); font-size: 12px; color: var(--accent-ink); letter-spacing: 0.06em; }
.m-title { font-family: var(--f-display); font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.15; }
.m-co { color: var(--muted); font-size: 0.92rem; }
.m-out { font-size: 0.95rem; font-weight: 600; }
.m-out small { display: block; font-weight: 400; color: var(--muted); font-size: 0.82rem; }
.m-go { justify-self: end; transition: transform 0.5s var(--ease); }
.manifest a:hover .m-go { transform: translateX(4px) rotate(-45deg); color: var(--accent); }
@media (max-width: 860px) {
  .manifest a { grid-template-columns: 40px minmax(0, 1fr) 24px; row-gap: var(--space-8); }
  .m-co, .m-out { grid-column: 2; }
  .m-co { order: 3; } .m-out { order: 4; } .m-go { grid-row: 1; grid-column: 3; }
}
.peek {
  position: fixed; left: 0; top: 0; z-index: 60; width: 340px; aspect-ratio: 1280 / 1000; pointer-events: none;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); background: #fff;
  clip-path: inset(50% 50% 50% 50% round 14px); transition: clip-path 0.55s var(--ease); will-change: transform;
}
.peek.is-on { clip-path: inset(0 0 0 0 round 14px); }
.peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s; }
.peek img.is-on { opacity: 1; }
@media (hover: none), (max-width: 1000px) { .peek { display: none; } }

/* ---------- Work: stops ---------- */
.stops { position: relative; }
.stop { position: relative; padding-block: var(--space-section-xl); }
.stop + .stop { border-top: 0; }
.stop-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-fluid-lg); align-items: start; }
/* The visual stays pinned while its copy scrolls past, so long copy never leaves an empty column. */
@media (min-width: 981px) { .ob-visual, .ds-visual, .iam-visual, .search-visual { position: sticky; top: calc(var(--nav-h) + 6vh); } .feature-visual { position: sticky; top: calc(var(--nav-h) + 6vh); } }
.stop-tag { display: flex; flex-wrap: wrap; gap: var(--space-12) var(--space-16); align-items: center; margin-bottom: var(--space-24); }
.stop-index {
  font-family: var(--f-display); font-weight: 300; font-size: clamp(5rem, 13vw, 12rem); line-height: 0.8; letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1px var(--line-strong); user-select: none; pointer-events: none;
}
.stop h3 { margin-bottom: var(--space-16); }
.stop h3 a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 96% / 0% 1px no-repeat; transition: background-size 0.7s var(--ease); }
.stop h3 a:hover { background-size: 100% 1px; }
.stop .lead { max-width: 34ch; }
.stop-role { margin-top: var(--space-24); font-size: 0.93rem; color: var(--ink-2); max-width: 46ch; padding-left: var(--space-16); border-left: 2px solid var(--accent); }
.stop-role b { color: var(--ink); font-weight: 600; }
.stop-cta { margin-top: var(--space-32); }

.outcome { margin: 0; }
.outcome dt { font-size: 0.93rem; color: var(--ink-2); max-width: 28ch; margin-top: var(--space-12); line-height: 1.45; }
.outcome dd { margin: 0; }
.outcome .num { font-size: clamp(3.6rem, 7vw, 6.6rem); display: block; }
.outcome-src { display: block; margin-top: var(--space-8); color: var(--muted); font-size: 0.78rem; }
.outcome-row { display: flex; flex-wrap: wrap; gap: var(--space-fluid-2xl); margin-top: var(--space-32); }

/* Layered visuals. The *-card-ui images are transparent, with their own UI frame and shadow,
   so they sit straight on a tinted panel and bleed off its bottom edge. */
.panel.layers { padding: var(--space-fluid-lg) var(--space-fluid-md) 0 !important; }
.panel .base { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.layers { position: relative; }
.layers .base { border-radius: var(--radius-lg); overflow: hidden; background: #fff; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.layers .base img { width: 100%; }
.layers .float { position: absolute; border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.layers .float img { width: 100%; }

/* Outline stop numbers sit in the top padding of each stop, on the side of its copy. */
.stop .stop-index.is-left, .stop .stop-index.is-right { position: absolute; top: clamp(18px, 3vw, 48px); }
.stop .stop-index.is-left { left: var(--gutter); }
.stop .stop-index.is-right { right: var(--gutter); }
@media (min-width: 1440px) { .stop .stop-index.is-left { left: calc((100vw - var(--max)) / 2); } .stop .stop-index.is-right { right: calc((100vw - var(--max)) / 2); } }
@media (max-width: 980px) { .stop .stop-index.is-left, .stop .stop-index.is-right { font-size: 4.6rem; top: 20px; } .stop .stop-index.is-right { right: auto; left: var(--gutter); } }

/* Stop 01 — featured, full-bleed night panel */
.stop--feature { padding-block: var(--space-fluid-2xl) var(--space-32); border-radius: clamp(0px, 1vw, var(--radius-lg)); margin-inline: clamp(0px, 1.2vw, 18px); overflow: clip; } /* inset stays exact: it reaches 0 (full bleed) on small screens, with the radius */
.stop--feature .stop-index { -webkit-text-stroke-color: rgba(242,235,223,0.2); position: absolute; right: var(--gutter); top: clamp(40px, 6vw, 90px); }
.feature-copy { grid-column: 1 / span 5; position: relative; z-index: 2; }
.feature-visual { grid-column: 7 / span 6; }
/* Copy + widget get their own grid so the sticky widget stops above the outcomes row. */
.feature-main { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-fluid-lg); align-items: start; }
.feature-visual .base { transform: perspective(1600px) rotateY(-7deg) rotateX(3deg); transform-origin: left center; transition: transform 1.2s var(--ease); }
.feature-visual:hover .base { transform: perspective(1600px) rotateY(-3deg) rotateX(1deg); }
.feature-visual .f1 { width: 52%; left: -14%; bottom: -12%; }
.feature-visual .f2 { width: 44%; right: -4%; top: -14%; }
/* The panel's bottom padding matches the space above the outcomes (both --space-32), so the row sits evenly between
   the divider and the panel's edge. */
.feature-foot { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: inherit; margin-top: var(--space-fluid-2xl); padding-top: var(--space-32); border-top: 1px solid var(--line); }
.feature-foot .outcome { grid-column: span 3; }
.feature-foot .feature-note { grid-column: 8 / span 5; align-self: center; color: var(--ink-2); font-size: 0.95rem; }
.feature-foot .feature-note p + p { margin-top: var(--space-16); }


/* Stop 02 — onboarding: typographic metric + timeline */
.ob-copy { grid-column: 1 / span 5; }
.ob-visual { grid-column: 7 / span 6; }
.ob-visual .panel { padding: var(--space-fluid-2xl) var(--space-fluid-xl) 0; background: linear-gradient(160deg, var(--paper-2), var(--paper-3)); }
.ob-visual .base { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ob-visual .f1 { width: 56%; right: -6%; bottom: 10%; }
/* Time to activation: a second line in the same style as the outcome's caption, with the result in bold. */
.ttv { margin-top: var(--space-16); font-size: 0.93rem; color: var(--ink-2); line-height: 1.45; }
.ttv b { color: var(--ink); font-weight: 600; }

/* Stop 03 — data sources: visual left, relationship diagram */
.ds-visual { grid-column: 1 / span 6; grid-row: 1; }
.ds-copy { grid-column: 8 / span 5; grid-row: 1; }
.ds-visual .panel { padding: var(--space-fluid-xl); background: var(--paper-2); }
.diagram svg { width: 100%; height: auto; overflow: visible; }
.diagram text { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.05em; fill: var(--ink-2); }
.diagram .node { fill: var(--card); stroke: var(--line-strong); }
.diagram .node.main { fill: var(--ink); stroke: var(--ink); }
.diagram .node.main + text, .diagram text.on-ink { fill: var(--paper); }
.diagram .edge { fill: none; stroke: var(--accent); stroke-width: 1.2; }
.diagram figcaption { font-size: 0.74rem; color: var(--muted); margin-top: var(--space-8); }
@media (prefers-reduced-motion: no-preference) {
  .js .diagram .edge { stroke-dasharray: 160; stroke-dashoffset: 160; transition: stroke-dashoffset 1.4s var(--ease); transition-delay: calc(0.3s + var(--i, 0) * 0.12s); }
  .js .diagram.is-in .edge { stroke-dashoffset: 0; }
}

/* Stop 04 — messaging: phases strip */
.iam-copy { grid-column: 1 / span 5; }
.iam-visual { grid-column: 7 / span 6; }
.iam-visual .panel { padding: var(--space-fluid-xl); background: linear-gradient(200deg, var(--paper-2), var(--paper)); }
.phases { list-style: none; margin: var(--space-32) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-8); max-width: 520px; }
.phases li { border-top: 2px solid var(--accent); padding-top: var(--space-12); font-size: 0.8rem; color: var(--ink-2); line-height: 1.3; }
.phases li span { display: block; font-family: var(--f-mono); font-size: 10px; color: var(--muted); margin-bottom: var(--space-4); }

/* Stop 05 — search: phone overlap + no-dead-end flow */
.search-visual { grid-column: 1 / span 6; grid-row: 1; }
.search-copy { grid-column: 8 / span 5; grid-row: 1; }
.search-visual .panel { padding: var(--space-fluid-xl) var(--space-fluid-xl) var(--space-section-md); background: var(--paper-2); }
.search-visual .f1 { width: 44%; right: clamp(16px, 3vw, 36px); bottom: clamp(-30px, -2vw, -16px); }
.deadend { margin-top: var(--space-32); display: grid; grid-template-columns: auto 1fr; gap: var(--space-8) var(--space-16); font-size: 0.88rem; align-items: center; max-width: 420px; }
.deadend .mono { color: var(--muted); }
.deadend .pills { display: flex; flex-wrap: wrap; gap: var(--space-8); }

@media (max-width: 980px) {
  .feature-copy, .feature-visual, .ob-copy, .ob-visual, .ds-visual, .ds-copy, .iam-copy, .iam-visual, .search-visual, .search-copy { grid-column: 1 / -1; grid-row: auto; }
  .feature-visual, .ob-visual, .iam-visual { margin-top: var(--space-64); }
  .ds-visual, .search-visual { margin-bottom: var(--space-48); }
  .feature-visual .base { transform: none !important; }
  .feature-visual .f1 { left: -2%; bottom: -10%; width: 50%; }
  .feature-visual .f2 { right: -2%; }
  .feature-foot .outcome { grid-column: span 6; }
  .feature-foot .feature-note { grid-column: 1 / -1; margin-top: var(--space-32); }
  .stop--feature .stop-index { top: 24px; }
}
@media (max-width: 560px) {
    .phases { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-16); }
  .feature-foot .outcome { grid-column: 1 / -1; }
  .feature-foot .outcome + .outcome { margin-top: var(--space-32); }
}

/* Route rail: the old site's plane-on-a-line, kept as the work section's progress marker */
.rail { position: fixed; left: clamp(14px, 1.8vw, 28px); top: 50%; z-index: 40; transform: translateY(-50%); height: 300px; width: 28px; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.rail.is-on { opacity: 1; pointer-events: auto; }
.rail-line { position: absolute; left: 13px; top: 0; bottom: 0; width: 1px; background: var(--line-strong); }
.rail-fill { position: absolute; left: 13px; top: 0; width: 1px; height: 100%; background: var(--accent); transform-origin: top; transform: scaleY(var(--rp, 0)); }
.rail a { position: absolute; left: 7px; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--accent); background: var(--paper); transform: translateY(-50%); transition: background-color 0.3s, transform 0.3s var(--ease); }
.rail a.is-past { background: var(--accent); }
.rail a:hover { transform: translateY(-50%) scale(1.25); }
.rail a span { position: absolute; left: 24px; top: 50%; transform: translate(-6px, -50%); white-space: nowrap; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); opacity: 0; transition: opacity 0.25s, transform 0.35s var(--ease); background: var(--paper); padding: 3px var(--space-8); border-radius: var(--radius-6); border: 1px solid var(--line); }
.rail a:hover span, .rail a:focus-visible span { opacity: 1; transform: translate(0, -50%); }
.rail-plane { position: absolute; left: 4px; top: 0; width: 20px; height: 20px; color: var(--accent); transform: translateY(calc(var(--rp, 0) * 300px - 50%)); }
.stop--feature.is-active ~ .rail, .rail.on-night a { background: transparent; }
@media (max-width: 1180px) { .rail { display: none; } }

/* ---------- Approach ---------- */
.approach-quote { max-width: none; }
.approach-quote .h1 { max-width: 15.5em; }
.approach-quote .h1 { line-height: 1.06; }
.approach-quote cite { display: block; margin-top: var(--space-24); font-style: normal; }
.principles { list-style: none; padding: 0; margin: var(--space-section-md) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-fluid-md); counter-reset: p; }
/* The four cards share their rows (subgrid), so numbers, titles, text, and "In practice" boxes line up across cards
   however each one wraps; the boxes all match the tallest. */
.principle { border-top: 1px solid var(--ink); padding-top: var(--space-20); display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
.principle .mono { color: var(--accent-ink); }
.principle h3 { margin-top: var(--space-16); font-size: 1.45rem; }
.principle > p { margin-top: var(--space-12); color: var(--ink-2); font-size: 0.97rem; }
.evidence { padding-top: var(--space-24); display: flex; flex-direction: column; }
.evidence a { flex: 1; }
.evidence a { display: block; text-decoration: none; padding: var(--space-16); border-radius: var(--radius); background: var(--paper-2); font-size: 0.9rem; color: var(--ink-2); transition: background-color 0.3s, transform 0.4s var(--ease); }
.evidence a:hover { background: var(--paper-3); transform: translateY(-3px); }
.evidence .mono { display: flex; justify-content: space-between; color: var(--muted); margin-bottom: var(--space-8); font-size: 10px; }
@media (max-width: 1080px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-48); } }
@media (max-width: 600px) { .principles { grid-template-columns: 1fr; } }

/* ---------- Lab ---------- */
.lab-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-24); flex-wrap: wrap; margin-bottom: var(--space-48); }
.lab-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-fluid-md); align-items: stretch; }
.lab-card .body { flex: 1; }
.lab-card { display: flex; flex-direction: column; text-decoration: none; border-radius: var(--radius-lg); background: var(--night-2); color: var(--on-night); overflow: hidden; border: 1px solid var(--night-line); transition: transform 0.6s var(--ease); }
.lab-card:hover { transform: translateY(-4px); }
.lab-card .media { aspect-ratio: 16 / 10; overflow: hidden; background: #000; }
.lab-card .media video, .lab-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.lab-card:hover .media video { transform: scale(1.03); }
.lab-card .body { padding: var(--space-24) var(--space-24) var(--space-24); }
.lab-card .mono { color: #EC9563; }
.lab-card h3 { font-family: var(--f-display); font-size: 1.6rem; letter-spacing: -0.02em; margin-top: var(--space-8); }
.lab-card p { color: var(--on-night-muted); font-size: 0.93rem; margin-top: var(--space-8); max-width: 46ch; }
.lab-list { list-style: none; padding: 0; margin: var(--space-32) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-32); }
.lab-list a { display: flex; justify-content: space-between; gap: var(--space-12); padding: var(--space-16) 0; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 0.95rem; transition: color 0.2s, padding 0.4s var(--ease); }
.lab-list a:hover { color: var(--accent-ink); padding-left: var(--space-8); }
.lab-list .mono { color: var(--muted); font-size: 10px; align-self: center; }
@media (max-width: 860px) { .lab-grid, .lab-list { grid-template-columns: 1fr; } }

/* ---------- About + contact ---------- */
.about-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-fluid-lg); align-items: start; }
.about-photo { grid-column: 1 / span 4; position: relative; }
.about-photo .frame { aspect-ratio: 3 / 4; }
.about-photo img { height: 100%; object-fit: cover; }
.about-photo figcaption { margin-top: var(--space-12); color: var(--muted); }
.about-copy { grid-column: 6 / span 7; }
.about-copy .body-copy { margin-top: var(--space-32); font-size: 1.08rem; }
.about-copy .link-arrow { margin-top: var(--space-32); }
@media (max-width: 860px) { .about-photo { grid-column: 1 / span 8; max-width: 340px; } .about-copy { grid-column: 1 / -1; margin-top: var(--space-40); } }

.contact { padding-block: var(--space-section-xl) var(--space-section-md); text-align: left; overflow: clip; }
.contact .display { font-size: clamp(3rem, 9.5vw, 10rem); max-width: 10em; }
.contact-mail { display: inline-block; margin-top: var(--space-fluid-xl); font-family: var(--f-display); font-size: clamp(1.4rem, 3.4vw, 3rem); letter-spacing: -0.02em; text-decoration: none; position: relative; padding-bottom: var(--space-8); word-break: break-word; }
.contact-mail::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform-origin: left; transition: transform 0.6s var(--ease); }
.contact-mail:hover::after { transform: scaleX(0.3); }
.contact-links { margin-top: var(--space-40); display: flex; flex-wrap: wrap; gap: var(--space-12); }

/* Stops 02–05 share one card size: same column width, same padding, same aspect ratio. */
.ob-visual .panel, .ds-visual .panel, .iam-visual .panel, .search-visual .panel {
  aspect-ratio: 1 / 0.86; padding: var(--space-fluid-lg) var(--space-fluid-lg) 0 !important;
  background: linear-gradient(170deg, var(--paper-2), var(--paper-3)); display: flex; flex-direction: column; justify-content: flex-end;
}
.ob-visual .panel .base, .ds-visual .panel .base, .iam-visual .panel .base, .search-visual .panel .base { transform: none !important; }
@media (max-width: 560px) { .ds-visual .panel { aspect-ratio: auto; } }


/* Stops 02–05: the cropped product screenshot is a standalone card (like the AI widget in stop 01),
   with two floating UI fragments from the work overlapping its corners. */
.scene { position: relative; }
.scene-shot { position: relative; aspect-ratio: 1086 / 904; border-radius: var(--radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.scene-shot img { position: absolute; width: 117.86%; max-width: none; left: -8.84%; top: -10.62%; }
.scene-float { --card: #fff; --paper: #fff; --ink: #1D1915; --ink-2: #4A433B; --muted: #6F665B; --line-strong: rgba(29,25,21,0.24);
  position: absolute; z-index: 2; margin: 0; background: #fff; color: #1D1915; border-radius: var(--radius); padding: 12px 14px; border: 1px solid rgba(29,25,21,0.08);
  box-shadow: 0 22px 44px -16px rgba(29,25,21,0.4), 0 1px 3px rgba(29,25,21,0.08); display: flex; flex-direction: column; gap: 5px; font-size: 0.8rem; line-height: 1.35; max-width: 50%; }
.scene-float.fa { left: -4%; top: -5%; }
.scene-float.fb { right: -4%; bottom: -7%; }
.sf-label { font-size: 0.74rem; color: #6F665B; }
.sf-big { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.sf-sub { color: #4A433B; display: block; }
.sf-title { font-weight: 600; display: block; }
.sf-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.sf-demo { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 6px; border-radius: var(--radius-pill); border: 1px dashed #A89C8B; color: #6F665B; }
.sf-widget { min-width: 190px; } .sf-widget .sf-big { color: #9A9186; }
.sf-pills { display: flex; flex-wrap: wrap; gap: 6px; max-width: 300px; }
.sf-pills span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius-8); border: 1px solid #DDD6CA; font-size: 0.75rem; }
.sf-pills .is-on { border-color: #2F6FE4; background: #EEF3FD; color: #1F4FB0; font-weight: 600; }
.sf-pills .is-on::before { content: "✓"; font-size: 10px; }
.sf-check { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; } .sf-check::before { content: "✓"; width: 14px; height: 14px; border-radius: var(--radius-4); background: #2F6FE4; color: #fff; font-size: 9px; display: grid; place-items: center; flex: none; }
.sf-btn { align-self: flex-start; margin-top: 4px; padding: 6px 12px; border-radius: var(--radius-pill); background: #1D1915; color: #fff; font-weight: 600; font-size: 0.74rem; }
.scene--search .sf-btn { background: #1D6E78; }
.scene-float:has(.sf-av), .scene-float:has(.sf-tick) { flex-direction: row; align-items: center; gap: 10px; }
.sf-av, .sf-tick { width: 30px; height: 30px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 700; flex: none; }
.sf-tick { background: #1D6E78; font-size: 13px; }
.sf-reacts { display: flex; gap: 6px; } .sf-reacts span { padding: 3px 9px; border-radius: var(--radius-pill); border: 1px solid #DDD6CA; font-size: 0.8rem; }
.sf-diagram { width: min(58%, 360px); max-width: none; padding: 14px 16px 10px; }
@media (max-width: 980px) { .scene { margin-inline: 12px; } }
@media (max-width: 560px) {
  .scene { margin: 18px 6px 30px; }
  .scene-float { font-size: 0.7rem; padding: 9px 10px; max-width: 62%; }
  .scene-float.fa { left: -6px; top: -18px; } .scene-float.fb { right: -6px; bottom: -24px; }
  .sf-diagram { width: 72%; } .sf-pills span { padding: 4px 7px; font-size: 0.68rem; } .sf-widget { min-width: 0; }
}
.js .scene[data-reveal], .js .scene[data-reveal].is-in { clip-path: none; }
/* The route rail (plane + stop dots) is hidden on the homepage. */
.rail { display: none !important; }
/* Impact numbers in Selected work use the sans, not the display serif. */
.stop .outcome .num { font-family: var(--f-body); font-weight: 500; letter-spacing: -0.045em; line-height: 1.05; font-variant-numeric: tabular-nums; }

/* Light-mode globe: a soft drop shadow under the sphere instead of the dark-mode halo. */
html:not([data-theme="dark"]) .hero-globe::before { background: none; inset: 7%; box-shadow: 0 36px 70px -34px rgba(29,25,21,0.32); }

@media (max-width: 1080px) and (min-width: 861px) { .lab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Stop 01: dashboard screenshot with a live Sessions chart over its own chart (js/aiscene.js). */
.ai-live { position: absolute; display: none; }
.scene--ai.is-live .ai-live { display: block; }
.ai-live text { font-family: Inter, -apple-system, "Segoe UI", system-ui, sans-serif; }
.ai-grid { stroke: #EEF0F3; stroke-width: 1; }
.ai-axis { font-size: 11px; fill: #6B7280; }
.ai-leg { font-size: 11.5px; fill: #374151; }
.ai-line { fill: none; stroke: #2F6FE4; stroke-width: 2.6; stroke-linejoin: round; }
.ai-ext { transition: opacity 0.4s ease; }
.show-forecast .ai-ext { opacity: 0; }
.ai-today { stroke: #D1D5DB; stroke-dasharray: 3 4; }
.ai-band { fill: #3E9A5E; opacity: 0.1; }
.ai-hi { fill: none; stroke: #7BC47F; stroke-width: 1.6; }
.ai-lo { fill: none; stroke: #E9A3A3; stroke-width: 1.6; }
.ai-fcline { fill: none; stroke: #2F6FE4; stroke-width: 2.6; stroke-dasharray: 6 5; }
.ai-median { stroke: #C1652F; stroke-width: 1.6; stroke-dasharray: 2 4; }
.ai-median-t { fill: #A24E1E; font-weight: 600; }
.ai-dot { stroke: #fff; stroke-width: 2; } .ai-dot.up { fill: #3E9A5E; } .ai-dot.down { fill: #D2453B; }
.ai-tip rect { fill: #fff; stroke: #E5E7EB; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.12)); }
.ai-tip-t { font-size: 12px; fill: #374151; } .ai-tip-t.b { font-weight: 600; fill: #111827; } .ai-tip-t.r { fill: #D2453B; font-weight: 600; }
.ai-layer { opacity: 0; transition: opacity 0.45s ease; }
.ai-fc { transform: translateX(-8px); transition: opacity 0.45s ease, transform 0.6s var(--ease); }
.ai-an .ai-dot { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 0.45s var(--ease); }
.show-forecast .ai-fc, .show-benchmark .ai-bench, .show-anomalies .ai-an, .bench-legend .ai-bench-leg { opacity: 1; transform: none; }
.show-anomalies .ai-an .ai-dot { transform: scale(1); }
/* Floating switch menu, styled like the widget's own options menu */
.ai-menu { gap: 2px; padding: 8px; min-width: 210px; }
.ai-switch { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 8px 10px; border-radius: var(--radius-8); font-size: 0.82rem; color: #1D1915; text-align: left; transition: background-color 0.2s; }
.ai-switch:hover { background: #F3F5F8; }
.ai-track { width: 30px; height: 17px; border-radius: var(--radius-pill); background: #D5D9E0; position: relative; flex: none; transition: background-color 0.3s var(--ease); }
.ai-track span { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: transform 0.35s var(--ease); }
.ai-switch[aria-checked="true"] .ai-track { background: #3E9A5E; }
.ai-switch[aria-checked="true"] .ai-track span { transform: translateX(13px); }
.scene--ai .scene-float.fa { left: auto; right: -4%; top: -6%; }
.scene--ai .scene-float.fb { right: auto; left: -4%; bottom: -8%; max-width: 54%; }
.ai-explain .sf-sub { margin-top: 2px; font-size: 0.78rem; }
.sf-note { margin-top: 4px; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: #8A8074; }
html:not(.js) .scene--ai .scene-float { display: none; }
@media (max-width: 560px) { .ai-menu { min-width: 0; padding: 4px; } .ai-switch { padding: 6px 8px; font-size: 0.72rem; gap: 8px; } .scene--ai .scene-float.fb { max-width: 70%; } }
.ai-median-t { paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
@media (max-width: 560px) { .ai-explain .sf-sub, .ai-explain .sf-note { display: none; } .scene--ai .scene-float.fb { bottom: -18px; } }
/* Bottom-left callout: the benchmark's plain-language headline and confidence label. */
.ai-bench-card { min-width: 250px; gap: 8px; }
.ai-headline { align-self: flex-start; padding: 6px 12px; border-radius: var(--radius-8); background: #E6F4EA; color: #237A43; font-weight: 700; font-size: 0.95rem; }
.ai-conf { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 600; color: #1D1915; }
.ai-conf-meter { display: inline-flex; gap: 3px; } .ai-conf-meter i { width: 14px; height: 6px; border-radius: var(--radius-2); background: #E2DDD4; } .ai-conf-meter i.on { background: #E0A43A; }
.ai-conf-i { width: 15px; height: 15px; flex: none; display: block; }
.ai-bench-card .sf-sub { font-size: 0.75rem; color: #6F665B; max-width: 230px; }
.ai-menu .sf-note { padding: 4px 10px 2px; }
@media (max-width: 560px) { .ai-bench-card { min-width: 0; } .ai-bench-card .sf-sub, .ai-bench-card .sf-label { display: none; } .ai-headline { font-size: 0.78rem; } .ai-menu .sf-note { display: none; } }
.ai-conf-tip { max-width: 240px; padding: 9px 11px; border-radius: var(--radius-6); background: #3A6FDB; color: #fff; font-size: 0.74rem; line-height: 1.4; }
@media (max-width: 560px) { .ai-conf-tip { display: none; } }
/* Stop label: "Stop 0N", then the company in regular text on the same line. */
.stop-eyebrow { flex-direction: row; align-items: baseline; gap: var(--space-12); flex-wrap: wrap; }
.stop-co { font-family: var(--f-body); font-size: 0.98rem; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--ink-2); }
/* Impact numbers: smaller, so they support the project rather than dominate it. */
.outcome .num { font-size: clamp(2.4rem, 3.8vw, 3.5rem); }
.outcome .num.word { font-size: clamp(1.6rem, 2.4vw, 2.2rem) !important; }
/* Two stats side by side, sharing the row equally. */
.outcome-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-fluid-lg); }
.outcome-row .outcome dt { max-width: none; }
@media (max-width: 420px) { .outcome-row { grid-template-columns: 1fr; } }
#stop-messaging .outcome-row { grid-template-columns: 1fr; }
#stop-messaging .outcome-row .outcome dt { max-width: 28ch; }
/* Every Selected work stop: copy on the left, visual on the right (and copy first when stacked). */
.ds-copy, .search-copy { grid-column: 1 / span 5; grid-row: 1; }
.ds-visual, .search-visual { grid-column: 7 / span 6; grid-row: 1; }
@media (max-width: 980px) {
  .ds-copy, .search-copy, .ds-visual, .search-visual { grid-column: 1 / -1; grid-row: auto; }
  .ds-copy, .search-copy { order: 1; }
  .ds-visual, .search-visual { order: 2; margin: var(--space-64) 0 0; }
}

/* Stop 01: the dashboard stays in place instead of pinning while the copy scrolls. */
.feature-visual { position: static !important; }
/* Alternate sides: 01 and 02 image right, 03 left, 04 right, 05 left. */
@media (min-width: 981px) {
  .ds-visual, .search-visual { grid-column: 1 / span 6 !important; grid-row: 1; }
  .ds-copy, .search-copy { grid-column: 8 / span 5 !important; grid-row: 1; }
}
/* Phones and tablets: the image comes first, inside a tinted container, then the copy. */
@media (max-width: 980px) {
  .feature-visual, .ob-visual, .ds-visual, .iam-visual, .search-visual { order: -1 !important; margin: 0 0 var(--space-40) !important; }
  .feature-copy, .ob-copy, .ds-copy, .iam-copy, .search-copy { order: 0 !important; }
  .stop .scene { margin: 0 !important; padding: 34px 22px; border-radius: var(--radius-lg); background: var(--paper-2); }
  .stop--feature .scene { background: var(--night-2); }
  .stop .scene .scene-float.fa { left: 10px !important; right: auto !important; top: 10px !important; }
  .stop .scene .scene-float.fb { right: 10px !important; left: auto !important; bottom: 10px !important; }
  .stop .scene.scene--ai .scene-float.fa { left: auto !important; right: 10px !important; }
  .stop .scene.scene--ai .scene-float.fb { right: auto !important; left: 10px !important; }
}

/* Hero background: one soft warm glow behind the globe.
   Fades out at the bottom of the hero so Selected work starts on the plain page colour. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(46% 62% at 76% 48%, rgba(228, 150, 96, 0.11), rgba(228, 150, 96, 0) 70%);
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
          mask-image: linear-gradient(#000 72%, transparent);
}
html[data-theme="dark"] .hero::before {
  background: radial-gradient(46% 62% at 76% 48%, rgba(193, 101, 47, 0.12), rgba(193, 101, 47, 0) 70%);
}
@media (max-width: 980px) {
  .hero::before { background: radial-gradient(70% 38% at 50% 24%, rgba(232, 163, 112, 0.1), rgba(232, 163, 112, 0) 72%); }
  html[data-theme="dark"] .hero::before { background: radial-gradient(70% 38% at 50% 24%, rgba(193, 101, 47, 0.1), rgba(193, 101, 47, 0) 72%); }
}
.hero > .wrap { position: relative; z-index: 1; }
/* Search: the phone in the screenshot (x 898–1230, y 420–1000) runs past the laptop view, so a second copy of just
   the phone sits on top, aligned exactly, outside the card's clipping — it pops out past the card's right edge.
   Positions are percentages of the card crop (x 96–1182, y 96–1000). */
.search-phone { position: absolute; z-index: 1; left: 73.85%; top: 35.84%; width: 30.57%; height: 64.16%; overflow: hidden;
  border-top-left-radius: 13.9% 7.9%; border-top-right-radius: 13.9% 7.9%; pointer-events: none;
  filter: drop-shadow(0 18px 30px rgba(29, 25, 21, 0.22)); }
.search-phone img { position: absolute; width: 385.54%; max-width: none; left: -270.48%; top: -72.41%; }

/* ---------- Stop 02: live dashboard behind the real Welcome modal (js/obscene.js) ----------
   Sized in screenshot pixels: --u is one pixel of the 1086 × 904 card crop, so it scales with the card. */
.scene--ob .scene-shot { container-type: inline-size; }
.obl, .obl-modal { display: none; }
.scene--ob.is-live .obl, .scene--ob.is-live .obl-modal { display: block; }
.obl { --u: calc(100cqw / 1086); position: absolute; inset: 0; background: #F3F5F8; overflow: hidden; font-family: Inter, -apple-system, "Segoe UI", system-ui, sans-serif; color: #1F2937; }
.obl-bar { height: calc(var(--u) * 66); background: #fff; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--u) * 24); }
.obl-logo { font-size: calc(var(--u) * 21); font-weight: 600; color: #1F2937; } .obl-logo b { color: #2C55C7; font-weight: 600; }
.obl-edit { background: #2C55C7; color: #fff; font-size: calc(var(--u) * 14); font-weight: 600; padding: calc(var(--u) * 9) calc(var(--u) * 16); border-radius: calc(var(--u) * 6); }
.obl-body { padding: calc(var(--u) * 22); display: grid; gap: calc(var(--u) * 14); }
.obl-sec { display: grid; gap: calc(var(--u) * 12); animation: obl-in 0.5s var(--ease) both; }
@keyframes obl-in { from { opacity: 0; transform: translateY(calc(var(--u) * 14)); } }
.obl-head { background: #fff; border: 1px solid #E5E7EB; border-radius: calc(var(--u) * 8); padding: calc(var(--u) * 11) calc(var(--u) * 16); font-weight: 700; font-size: calc(var(--u) * 17); }
.obl-row { display: grid; gap: calc(var(--u) * 12); }
.obl-row3 { grid-template-columns: repeat(3, 1fr); } .obl-row21 { grid-template-columns: 2fr 1fr; } .obl-row4 { grid-template-columns: repeat(4, 1fr); }
.obl-card { background: #fff; border: 1px solid #E5E7EB; border-radius: calc(var(--u) * 8); padding: calc(var(--u) * 14) calc(var(--u) * 15); min-height: calc(var(--u) * 244); display: flex; flex-direction: column; gap: calc(var(--u) * 10); }
.obl-row21 .obl-card { min-height: calc(var(--u) * 290); }
.obl-top { display: flex; justify-content: space-between; font-size: calc(var(--u) * 13); }
.obl-t { font-size: calc(var(--u) * 13); color: #374151; }
.obl-bars { flex: 1; display: flex; align-items: flex-end; gap: calc(var(--u) * 18); padding: 0 calc(var(--u) * 16); }
.obl-bars i { flex: 1; height: var(--h); background: #4B7BE5; border-radius: calc(var(--u) * 3) calc(var(--u) * 3) 0 0; opacity: .85; }
.obl-list, .obl-chan { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 12); font-size: calc(var(--u) * 13); }
.obl-list li, .obl-chan li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: calc(var(--u) * 4); }
.obl-chan i { flex-basis: 100%; height: calc(var(--u) * 6); border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--c) var(--w), #EEF0F3 var(--w)); }
.obl-line { flex: 1; width: 100%; }
.obl-tile { min-height: calc(var(--u) * 116); gap: calc(var(--u) * 6); }
.obl-big { font-size: calc(var(--u) * 26); font-weight: 700; letter-spacing: -0.01em; }
.obl-delta { align-self: flex-start; font-size: calc(var(--u) * 11.5); font-weight: 600; padding: calc(var(--u) * 2) calc(var(--u) * 7); border-radius: calc(var(--u) * 4); }
.obl-delta.up { background: #E6F4EA; color: #237A43; } .obl-delta.down { background: #FCE8E6; color: #B5382F; }
.obl-empty { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 12); }
.obl-empty span { height: calc(var(--u) * 244); border: 1.5px dashed #CBD2DB; border-radius: calc(var(--u) * 8); }
/* The screenshot's grey dimming behind the modal. */
.obl-dim { position: absolute; inset: 0; background: rgba(78, 84, 92, 0.38); }
/* The real modal, cropped from the screenshot (x 270–1010, y 296–763 of the 1280 × 1000 image). */
.obl-modal { position: absolute; z-index: 1; left: 16.02%; top: 22.12%; width: 68.14%; height: 51.66%; overflow: hidden; border-radius: calc(100cqw / 1086 * 6); box-shadow: 0 calc(100cqw / 1086 * 20) calc(100cqw / 1086 * 50) rgba(0,0,0,0.25); }
.obl-modal img { position: absolute; width: 172.97%; max-width: none; left: -36.49%; top: -63.38%; }
/* Source chips are buttons now. */
.sf-pills button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius-8); border: 1px solid #DDD6CA; background: #fff; color: #1D1915; font: inherit; font-size: 0.75rem; transition: border-color .2s, background-color .2s, color .2s; }
.sf-pills button:hover { border-color: #2F6FE4; }
.sf-pills button.is-on { border-color: #2F6FE4; background: #EEF3FD; color: #1F4FB0; font-weight: 600; }
.sf-pills button.is-on::before { content: "✓"; font-size: 10px; }
@media (max-width: 560px) { .sf-pills button { padding: 4px 7px; font-size: 0.68rem; } }
/* Stop 03: clickable account checkboxes. */
.sf-checks { display: grid; gap: 4px; }
button.sf-check { border: 0; background: none; padding: 3px 0; font: inherit; color: inherit; text-align: left; }
button.sf-check::before { content: ""; border: 1.5px solid #B8C0CC; background: #fff; transition: background-color .2s, border-color .2s; }
button.sf-check[aria-checked="true"]::before { content: "✓"; border-color: #2F6FE4; background: #2F6FE4; }
button.sf-check:hover::before { border-color: #2F6FE4; }
.sf-btn.is-off { background: #D5D9E0; color: #6B7280; }
.sf-btn { transition: background-color .2s, color .2s; }
/* Same hover as the AI benchmarking toggles: a light row highlight. */
button.sf-check { padding: 6px 8px; margin: 0 -8px; border-radius: var(--radius-8); transition: background-color .2s; }
button.sf-check:hover { background: #F3F5F8; }
.sf-checks { gap: 0; }

/* Stop 04: live reaction chips over the screenshot's own (x 178–308, y 378–414 of the 1280 × 1000 image,
   i.e. a box inside the 1086 × 904 card crop). Sized in screenshot pixels via --u. */
.scene--iam .scene-shot { container-type: inline-size; }
.iam-live-reacts { --u: calc(100cqw / 1086); display: none; position: absolute; z-index: 1; left: 7.37%; top: 31.0%; width: 12.3%; height: 4.3%;
  background: #fff; align-items: center; gap: calc(var(--u) * 7); padding-left: calc(var(--u) * 2); font-family: Inter, -apple-system, "Segoe UI", system-ui, sans-serif; }
.scene--iam.is-live .iam-live-reacts { display: flex; }
.iam-live-reacts span { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 10);
  border-radius: var(--radius-pill); border: 1px solid #E5E7EB; background: #fff; font-size: calc(var(--u) * 14); color: #1F2937; white-space: nowrap; }
.iam-live-reacts span b { font-weight: 600; }
.iam-live-reacts span.is-mine { border-color: #BFD0F5; background: #E8EEFB; color: #2F5FD0; }
.iam-live-reacts span.is-pop { animation: iam-pop .35s var(--ease); }
@keyframes iam-pop { 40% { transform: scale(1.18); } }
/* The card's reaction buttons: same hover as the AI benchmarking toggles. */
.sf-reacts button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid #DDD6CA; background: #fff;
  font: inherit; font-size: 0.85rem; color: #1D1915; transition: background-color .2s, border-color .2s, color .2s; }
.sf-reacts button:hover { background: #F3F5F8; }
.sf-reacts button[aria-pressed="true"] { border-color: #BFD0F5; background: #E8EEFB; color: #2F5FD0; font-weight: 600; }
/* The count inside each reaction button is plain text (one chip, like the chat), not a pill of its own. */
.sf-reacts button span { padding: 0; border: 0; border-radius: 0; background: none; font-size: inherit; font-weight: 600; color: inherit; }
.sf-reacts button { gap: 6px; height: 34px; padding: 0 14px; border-color: #E5E7EB; }
/* Toggle rows touch (no gap), so the hover highlight never blinks off between them. */
.ai-menu { gap: 0; }
.ai-switch { padding: 9px 10px; }
/* Stop 04: every reaction as a chip in the card, and room for more chips behind. */
.scene--iam .sf-reacts { flex-wrap: wrap; max-width: 300px; }
.scene--iam .scene-float.fb { max-width: none; }
.iam-live-reacts { width: auto; min-width: 12.3%; padding-right: calc(var(--u) * 6); }
@media (max-width: 560px) { .scene--iam .sf-reacts { max-width: 220px; } .scene--iam .sf-reacts button { height: 28px; padding: 0 9px; font-size: 0.75rem; } }
/* All seven reactions on one row. */
.scene--iam .sf-reacts { flex-wrap: nowrap; max-width: none; gap: 6px; }
.scene--iam .sf-reacts button { padding: 0 11px; flex: none; }
@media (max-width: 980px) { .scene--iam .sf-reacts { flex-wrap: wrap; max-width: 260px; } }
/* Only the section you just added animates in; the rest stay put. */
.obl-sec { animation: none; }
.obl-sec.is-new { animation: obl-in 0.55s var(--ease) both; }
.sf-reacts button span:empty { display: none; }

/* ---------- Stop 05: live search results behind the filter chips (js/searchscene.js) ----------
   Sized in screenshot pixels: --u is one pixel of the 1086 × 904 card crop, --pu one pixel of the phone's 332px-wide crop. */
html:not(.js) .scene--search .sf-filters, .scene--search:not(.is-live) .sf-filters { display: none; }
.scene--search .scene-shot { container-type: inline-size; --u: calc(100cqw / 1086); }
.scene--search .search-phone { container-type: inline-size; --pu: calc(100cqw / 332); }
.sr-desk, .sr-count, .sr-mob, .sr-mob-count { display: none; position: absolute; background: #fff; color: #0F2B3D; font-family: "DM Sans", Inter, -apple-system, "Segoe UI", system-ui, sans-serif; }
.scene--search.is-filtered :is(.sr-desk, .sr-count, .sr-mob, .sr-mob-count) { display: block; }
.sr-desk { left: calc(20 * var(--u)); top: calc(204 * var(--u)); width: calc(1048 * var(--u)); bottom: 0; }
.sr-grid { display: grid; grid-template-columns: repeat(4, calc(246 * var(--u))); column-gap: calc(21 * var(--u)); row-gap: calc(44 * var(--u)); padding-top: calc(15 * var(--u)); }
.sr-count { right: calc(18 * var(--u)); top: calc(116 * var(--u)); padding-left: calc(20 * var(--u)); font-size: calc(12.5 * var(--u)); line-height: calc(20 * var(--u)); color: #6B7280; }
.sr-photo { display: block; border-radius: calc(5 * var(--u)); background-repeat: no-repeat; }
.sr-car { font-size: calc(14.5 * var(--u)); line-height: 1.25; animation: srIn .35s ease both; }
.sr-row { display: flex; justify-content: space-between; align-items: baseline; gap: calc(8 * var(--u)); }
.sr-car .sr-row:first-of-type { margin-top: calc(14 * var(--u)); }
.sr-car b { font-weight: 600; }
.sr-car small { font-size: calc(11.5 * var(--u)); color: #6B7280; }
.sr-km { display: block; margin-top: calc(9 * var(--u)); }
.sr-cert { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: calc(18 * var(--u)); font-size: calc(12 * var(--u)); color: #4B5563; animation: srIn .35s ease both; }
.sr-cert-icon { width: calc(76 * var(--u)); height: calc(62 * var(--u)); background-size: calc(1280 * var(--u)) auto; background-position: calc(-468 * var(--u)) calc(-598 * var(--u)); background-repeat: no-repeat; }
.sr-cert b { font-size: calc(16.5 * var(--u)); color: #0F2B3D; margin: calc(14 * var(--u)) 0 calc(8 * var(--u)); }
.sr-cert p { line-height: 1.6; max-width: calc(220 * var(--u)); }
.sr-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(10 * var(--u)); max-width: calc(440 * var(--u)); margin: calc(110 * var(--u)) auto 0; font-size: calc(14 * var(--u)); line-height: 1.55; color: #374151; animation: srIn .35s ease both; }
.sr-empty b { font-size: calc(26 * var(--u)); color: #0F2B3D; }
.sr-empty u { color: #0F2B3D; }
.sr-notify { margin-top: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(42 * var(--u)); border-radius: calc(6 * var(--u)); background: #7FE0D2; color: #0F2B3D; font-weight: 600; }
/* Phone: the list under its Filters / Recommended buttons, and its result count. */
.sr-mob { left: calc(14 * var(--pu)); top: calc(208 * var(--pu)); width: calc(306 * var(--pu)); bottom: 0; padding: calc(15 * var(--pu)) calc(11 * var(--pu)) 0; display: none; }
.scene--search.is-filtered .sr-mob { display: flex; flex-direction: column; gap: calc(30 * var(--pu)); }
.sr-mob .sr-car { font-size: calc(13.5 * var(--pu)); }
.sr-mob .sr-car small { font-size: calc(10.5 * var(--pu)); }
.sr-mob .sr-car .sr-row:first-of-type { margin-top: calc(14 * var(--pu)); }
.sr-mob .sr-km { margin-top: calc(5 * var(--pu)); }
.sr-mob .sr-photo { border-radius: calc(8 * var(--pu)); }
.sr-mob .sr-empty { margin-top: calc(18 * var(--pu)); gap: calc(8 * var(--pu)); font-size: calc(10.5 * var(--pu)); max-width: none; padding-inline: calc(8 * var(--pu)); }
.sr-mob .sr-empty b { font-size: calc(19 * var(--pu)); }
.sr-mob .sr-notify { align-self: stretch; padding: calc(9 * var(--pu)); border-radius: calc(6 * var(--pu)); margin-top: calc(6 * var(--pu)); }
.sr-mob-count { right: calc(23 * var(--pu)); top: calc(124 * var(--pu)); padding-left: calc(10 * var(--pu)); font-size: calc(11 * var(--pu)); line-height: calc(18 * var(--pu)); color: #6B7280; }
@keyframes srIn { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .sr-car, .sr-cert, .sr-empty { animation: none; } }
.sf-filters .sf-pills { flex-wrap: nowrap; max-width: none; }
.sf-filters { max-width: none; }
.sf-filters .sf-pills button { white-space: nowrap; }
@media (max-width: 560px) { .sf-filters .sf-pills { flex-wrap: wrap; max-width: 230px; } }
.stop-eyebrow .accent { font-size: 0.86rem; letter-spacing: 0.08em; }

/* AI Lab cards: a clearer hover. The card lifts with a shadow, its border warms to the accent, and an arrow slides in
   after the title. The video no longer zooms. */
.lab-card { transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.3s; }
.lab-card:hover .media video, .lab-card:hover .media img { transform: none; }
.lab-card h3 { display: flex; align-items: baseline; gap: var(--space-12); transition: color 0.3s; }
.lab-card h3::after { content: "→"; font-family: var(--f-body); font-size: 0.8em; opacity: 0; transform: translateX(-8px); transition: opacity 0.3s, transform 0.4s var(--ease); }
@media (hover: hover) {
  .lab-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.45); border-color: color-mix(in srgb, #EC9563 55%, transparent); }
  .lab-card:hover h3 { color: #F3B48C; }
  .lab-card:hover h3::after { opacity: 1; transform: none; }
}
.lab-card:focus-visible h3::after { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .lab-card, .lab-card:hover { transform: none; } }
/* Light mode: the dark card on a light page needs a stronger cue, so the accent ring sits outside the card. */
@media (hover: hover) {
  html[data-theme="light"] .lab-card:hover { box-shadow: 0 0 0 2px var(--accent), 0 28px 50px -22px rgba(29, 25, 21, 0.5); border-color: var(--accent); }
}
html[data-theme="light"] .lab-card:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.lab-card h3 { margin-top: var(--space-4); }
/* Tighter label → title: the label and title carry their own short line boxes, so the gap is just the margin. */
.lab-card .body > .mono { display: block; line-height: 1.3; }
.lab-card h3 { line-height: 1.1; margin-top: var(--space-8); }
.ai-band.ai-band-down { fill: #D9534F; opacity: 0.1; }
/* Light mode: the "In practice" labels on the beige cards get a slightly darker grey (5.8:1 instead of 4.5:1). */
html[data-theme="light"] .evidence .mono { color: #5E564C; }
/* Stop 02: the live dashboard is dimmed behind the modal, so the card's white edge and border would show as a light rim. Use the dimmed colour instead. */
.scene--ob.is-live .scene-shot { border-color: transparent; background: rgb(180, 184, 189); }
.scene--ob.is-live .obl { inset: -1px; }
/* Phones and tablets: the scene gains padding, so place the pop-out phone against the screenshot, not the padded box,
   so it sits exactly over the screenshot's own phone. */
@media (max-width: 980px) {
  .stop .scene--search .search-phone { left: calc(22px + (100% - 44px) * 0.7385); top: calc(34px + (100% - 68px) * 0.3584); width: calc((100% - 44px) * 0.3057); height: calc((100% - 68px) * 0.6416); }
}
/* Phones and tablets: the stop label comes first, then the image, then the title and copy. The copy's children join the
   stop grid directly so the image can sit between the label and the title. */
@media (max-width: 980px) {
  .stop-grid > :is(.ob-copy, .ds-copy, .iam-copy, .search-copy), .feature-main > .feature-copy { display: contents; }
  .stop-grid > :is(.ob-copy, .ds-copy, .iam-copy, .search-copy) > *, .feature-main > .feature-copy > * { grid-column: 1 / -1; order: 1; }
  .stop-grid > :is(.ob-copy, .ds-copy, .iam-copy, .search-copy) > .stop-tag, .feature-main > .feature-copy > .stop-tag { order: -2; margin-bottom: var(--space-16); }
  .stop-grid > :is(.ob-visual, .ds-visual, .iam-visual, .search-visual), .feature-main > .feature-visual { order: -1 !important; grid-row: auto !important; }
}
@media (max-width: 980px) {
  /* Trial: label, then title, then image, then the rest. */
  .stop-grid > :is(.ob-copy, .ds-copy, .iam-copy, .search-copy) > .h2, .feature-main > .feature-copy > .h2 { order: -2; margin-bottom: var(--space-24); }
}