/* Shopfloor AI homepage layout. Loaded after tokens.css and components.css. */

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

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

/* Plain links only: links styled as components (.sf-btn, .sf-card) keep their own colours. */
:where(a:not([class*="sf-"])) { color: var(--ink-brand); }
:where(a:not([class*="sf-"])):hover { color: var(--ink-muted); }
a:focus-visible,
button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.on-brand a:focus-visible { outline-color: var(--focus-ring-inverse); }

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-brand);
  color: var(--ink-on-brand);
  font: var(--text-ui);
}
.skip-link:focus { top: var(--space-4); color: var(--ink-on-brand); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------ Layout */

.section { padding: var(--space-16) var(--space-6); }
.section--muted { background: var(--surface-muted); }
.container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.section-head { display: flex; flex-direction: column; gap: var(--space-3); max-width: 720px; }
.section-head--row {
  max-width: none;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Type comes from the system's classes in tokens.css (.h1, .h2, .h3, .overline ...);
   these only add margins and colour. */
.h1, .h1-sm, .h2, .h3, .overline { margin: 0; }
.eyebrow { color: var(--ink-brand); }
.lead { margin: 0; font: var(--text-body-lg); color: var(--ink-muted); }
.copy { margin: 0; font: var(--text-body); color: var(--ink-muted); }

.grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 280px), 100%), 1fr)); }

.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4);
  font: var(--text-caption);
  color: var(--ink-muted);
}

/* -------------------------------------------------------- Brand art */

/* Graphics from the design system, used as quiet edge and corner treatments: never as a
   full field behind body copy. Content sits above them. */
/* overflow: clip, not hidden: hidden would make each section a scroll container, and the
   scroll-driven effects inside it would track that (never-scrolling) box instead of the page. */
.has-art { position: relative; overflow: clip; }
.has-art > .container,
.step__screen > .phone,
.step__screen > .browser,
.brand-band > :not(.section-art) { position: relative; z-index: 1; }
.section-art {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
}
/* Bottom-right, in the empty corner below the stage panel: clear of the heading and all text. */
.section-art--loop { bottom: -18%; right: -14%; width: 52%; opacity: 0.35; }
/* The grid is a square in the middle of its artboard; scaled up it covers the panel as graph paper. */
/* The grid is a square in the middle of its artboard; scaled up it fills the screen panel as graph paper. */
.section-art--stage { left: 50%; top: 50%; width: max(320%, 1300px); max-width: none; transform: translate(-50%, -50%); opacity: 0.1; }
.section-art--use-cases { top: -18%; right: -16%; width: 54%; opacity: 0.3; }
.section-art--band { right: -22%; bottom: -30%; width: 70%; opacity: 0.35; }
.section-art--resources { right: -12%; bottom: -24%; width: 60%; opacity: 0.6; }
@media (max-width: 640px) {
  .section-art--loop { width: 90%; right: -40%; bottom: -4%; }
  .section-art--use-cases { width: 110%; right: -55%; top: -6%; }
  .section-art--band { width: 140%; right: -60%; bottom: -10%; }
  .section-art--resources { width: 120%; right: -50%; bottom: -8%; }
}

/* ------------------------------------------------------------ Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.nav {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.nav__brand { display: flex; align-items: center; padding: var(--space-3) 0; }
.nav__brand img { width: 200px; height: auto; display: block; }
.nav__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-8); font: var(--text-ui); }
.nav__links a { color: var(--ink); text-decoration: none; padding: var(--space-3) 0; }
.nav__links a:hover { color: var(--ink-brand); }
.nav__links a[aria-current="page"] { color: var(--ink-brand); border-bottom: 2px solid var(--ink-brand); }
.mobile-menu a[aria-current="page"] { color: var(--ink-brand); }

/* The toggle is a system IconButton (ghost, lg); this only shows and hides it. */
.nav__toggle { display: none; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0 var(--space-6) var(--space-6);
  border-top: 1px solid var(--border);
  font: var(--text-ui-lg);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a:not(.sf-btn) { color: var(--ink); text-decoration: none; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.mobile-menu .sf-btn { margin-top: var(--space-4); }

@media (max-width: 960px) {
  .nav__links,
  .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
}
@media (min-width: 961px) {
  .mobile-menu { display: none !important; }
}

/* -------------------------------------------------------------- Hero */

.hero {
  position: relative;
  overflow: clip;
  background: var(--surface-muted);
  padding: var(--space-20) var(--space-6);
}
.hero__art {
  position: absolute;
  left: -240px;
  bottom: -220px;
  width: 820px;
  height: auto;
  opacity: 0.2;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
}
.hero__copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
/* .hero__title carries the system .h1 class; below 768px it takes the .h1-sm style. */
@media (max-width: 767px) {
  .hero__title,
  .page-hero__title { font: var(--text-h1-sm); letter-spacing: -0.01em; }
}
.hero__tagline { margin: 0; font: var(--text-h3-sm); }
.hero__lead { margin: 0; font: var(--text-body-lg); color: var(--ink-muted); max-width: 600px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-3); }

.hero__media { flex: 1 1 520px; min-width: 0; margin: 0; }
.hero__media figcaption { margin-top: var(--space-3); font: var(--text-caption); color: var(--ink-muted); }

.video-card {
  position: relative;
  aspect-ratio: 16 / 9; /* matches the intro video and its poster */
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface);
  color: var(--ink);
}
.video-card__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.video-card__video { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--black); }
/* The play control is a system IconButton (accent, lg, pill); this only places it. */
.video-card__play { position: absolute; right: var(--space-6); bottom: var(--space-6); }
.video-card__play[hidden] { display: none; }

/* ------------------------------------------------------------- Trust */

.trust { padding: var(--space-12) var(--space-6); border-bottom: 1px solid var(--border); }
.trust .container { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); }
.trust__label { display: flex; flex-direction: column; gap: var(--space-1); max-width: 360px; }
.trust__note { font: var(--text-ui); color: var(--ink-muted); }
.trust__industries { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.trust__industries li {
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font: var(--text-ui-lg);
  color: var(--ink);
}

/* -------------------------------------------------------------- Loop */

.loop-section { background: var(--surface-brand); color: var(--ink-on-brand); }
.loop-section .section-head .eyebrow,
.loop-section .section-head .h2,
.loop-section .section-head .lead { color: var(--ink-on-brand); }

/* Ring and panel share a row, so the panel centres on the ring itself; the controls and
   caption sit in their own rows under the ring. Stacks on narrower screens. */
.loop-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-areas:
    "ring panel"
    "controls ."
    "caption .";
  column-gap: var(--space-10);
  align-items: center;
}
.loop-diagram { display: contents; }
.loop { grid-area: ring; }
.loop-controls { grid-area: controls; }
.loop-diagram__caption { grid-area: caption; }
.loop-panel { grid-area: panel; }
@media (max-width: 1023px) {
  .loop-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "ring" "controls" "caption" "panel";
  }
  .loop-panel { margin-top: var(--space-10); }
}
.loop-diagram__caption { margin: var(--space-4) 0 0; text-align: center; font: var(--text-caption); color: var(--ink-on-brand); }

/* The ring: five stops read clockwise from the top. Positions come from --a (degrees)
   and --r (radius as a share of the ring's width), so stops, marker and SVG agree. */
.loop {
  --r: 34%;
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1;
  margin: 0 auto;
}
.loop__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Stroke widths are in ring units: the SVG is 100 units across, so 0.6 is about 3px at full size. */
.loop__track,
.loop__progress {
  fill: none;
  r: 34px;
}
.loop__disc { r: 34px; fill: var(--teal-deep); }
.loop__track { stroke: var(--teal-muted); stroke-width: 0.4; }
.loop__progress {
  stroke: var(--ink-brand);
  stroke-width: 0.6;
  stroke-linecap: round;
  transition: opacity 300ms ease;
}
.loop__progress.is-resetting { opacity: 0; }

.loop__marker,
.loop__stop {
  position: absolute;
  left: calc(50% + var(--r) * sin(var(--a) * 1deg));
  top: calc(50% - var(--r) * cos(var(--a) * 1deg));
}
.loop__marker {
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: var(--radius-pill);
  background: var(--surface-accent);
  outline: 2px solid var(--surface-brand);
  pointer-events: none;
  z-index: 2;
}

.loop__stop {
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink-on-brand);
  cursor: pointer;
  z-index: 1;
}
.loop__stop-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  /* border-strong is teal-bright on this dark band: 3.08:1, above the 3:1 a control needs */
  border: 2px solid var(--border-strong);
  transition: background-color 200ms ease, border-color 200ms ease, transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.loop__stop[data-state="done"] .loop__stop-dot { background: var(--ink-brand); border-color: var(--ink-brand); }
.loop__stop[data-state="active"] .loop__stop-dot {
  background: var(--ink-brand);
  border-color: var(--ink-brand);
  transform: scale(1.5);
}
/* One soft ring when the marker arrives. */
.loop__stop-dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid var(--ink-brand);
  opacity: 0;
}
.loop__stop.is-arriving .loop__stop-dot::after { animation: loop-arrive 700ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes loop-arrive {
  from { opacity: 0.7; transform: scale(1); }
  to { opacity: 0; transform: scale(2.6); }
}
.loop__stop:active .loop__stop-dot { transform: scale(0.9); }
.loop__stop[data-state="active"]:active .loop__stop-dot { transform: scale(1.4); }
.loop__stop:focus-visible { outline: 2px solid var(--focus-ring-inverse); outline-offset: 0; }
@media (hover: hover) and (pointer: fine) {
  .loop__stop:hover .loop__stop-dot { border-color: var(--ink-on-brand); }
  .loop__stop:hover .loop__label-name { color: var(--ink-on-brand); }
}

.loop__label {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  white-space: nowrap;
  text-align: left;
}
/* Small text on the teal band uses ink-on-brand, which passes AA; the number carries .overline. */
.loop__label-num { color: var(--ink-on-brand); }
.loop__label-name { font: var(--text-h3-sm); color: var(--ink-muted); transition: color 200ms ease; }
.loop__stop[data-state="active"] .loop__label-name { color: var(--ink-on-brand); }
.loop__label--top { bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); text-align: center; align-items: center; }
.loop__label--right { left: calc(100% - 4px); top: 50%; transform: translateY(-50%); }
.loop__label--left { right: calc(100% - 4px); top: 50%; transform: translateY(-50%); text-align: right; align-items: flex-end; }

.loop-panel {
  flex: 2 1 360px;
  min-width: 0;
  min-height: 380px;
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* The system's dark-theme ink-brand (teal-bright) is 4.07:1 on this panel, short of AA for 12px
   text, so the panel's small labels use ink-muted (teal-pale, 9.23:1). */
.loop-panel .eyebrow { color: var(--ink-muted); }
.loop-panel__stage { display: flex; flex-direction: column; gap: var(--space-4); }
.loop-panel__stage[hidden] { display: none; }
.loop-panel__stage.is-entering { animation: loop-panel-in 260ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes loop-panel-in { from { opacity: 0; transform: translateY(6px); } }
.loop-panel__text { margin: 0; font: var(--text-body); color: var(--ink); }
.loop-panel__example {
  background: var(--surface-muted);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font: var(--text-body-sm);
}

/* Apple-style stage controls: dots in a pill, the active one stretches into a progress bar. */
/* The ring's square box leaves an empty band under the ring; pull the controls up into it. */
.loop-controls { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: calc(var(--space-10) * -1); }
.loop-controls__dots {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  /* The system scrim: teal-deepest at opacity-scrim */
  background: color-mix(in srgb, var(--teal-deepest) calc(var(--opacity-scrim) * 100%), transparent);
}
.loop-controls__dot {
  height: 44px;
  padding: 0 var(--space-2);
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: var(--radius-pill);
}
.loop-controls__dot > .loop-controls__fill {
  position: relative;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  /* teal-bright on the scrim is 3.65:1; teal-muted would be 2.11:1, below the 3:1 a control needs */
  background: var(--border-strong);
  overflow: hidden;
  transition: width 300ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms ease;
}
.loop-controls__bar {
  position: absolute;
  inset: 0;
  background: var(--ink-on-brand);
  transform-origin: left center;
  transform: scaleX(0);
}
.loop-controls__dot[aria-pressed="true"] > .loop-controls__fill { width: 48px; }
@media (hover: hover) and (pointer: fine) {
  .loop-controls__dot:not([aria-pressed="true"]):hover > .loop-controls__fill { background: var(--ink-on-brand); }
}
.loop-controls__dot:focus-visible { outline: 2px solid var(--focus-ring-inverse); outline-offset: 2px; }

/* Play/pause is a system IconButton (accent, lg, pill). The two icons share the glyph box and
   cross-fade. Accent is the only variant the system allows on a brand ground. */
.loop-controls__play .sf-iconbtn__glyph { position: relative; }
.loop-controls__play svg {
  position: absolute;
  inset: 0;
  transition: opacity 150ms ease, transform 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
.loop-controls__play[data-playing="true"] .icon-play,
.loop-controls__play[data-playing="false"] .icon-pause { opacity: 0; transform: scale(0.6); }
.loop-controls__play[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .loop-panel__stage.is-entering { animation: loop-panel-fade 160ms ease; }
  .loop-controls__dot > .loop-controls__fill,
  .loop-controls__play svg,
  .loop__stop-dot,
  .loop__progress { transition: none; }
  .loop__stop.is-arriving .loop__stop-dot::after { animation: none; }
}
@keyframes loop-panel-fade { from { opacity: 0; } }

@media (max-width: 640px) {
  .loop { --r: 25%; margin: -6% auto -20%; }
  .loop-controls { margin-top: var(--space-8); }
  .loop__disc,
  .loop__track,
  .loop__progress { r: 25px; }
  .loop__label-name { font: var(--text-ui); }
}

/* ----------------------------------------------------------- Process */

/* Steps: each step is its text and its app screen. On phones they stack in order (text, screen,
   text, screen...). From 960px the three texts share one row and the three screens share a
   graph-paper stage below them, with the supervisor's desktop screen given half the width. */
.steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-12); }
.step { display: flex; flex-direction: column; gap: var(--space-6); }
.step__text { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-6); border-top: 2px solid var(--surface-brand); }
.step__num { font: var(--text-h2); color: var(--ink-brand); }
.step__text h3 { margin: 0; font: var(--text-h3-sm); }

.step__screen {
  position: relative;
  overflow: clip;
  margin: 0;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone {
  width: min(100%, 220px);
  border: 8px solid var(--black);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--black);
}
.browser {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}
.browser__bar {
  height: 28px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border);
}
.browser__bar span { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--border-strong); }
.phone img,
.browser img { display: block; width: 100%; height: auto; }

@media (min-width: 960px) {
  .steps {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-6);
    row-gap: var(--space-8);
  }
  /* Each li steps aside (display: contents): its text and screen become cells of the 12-column grid. */
  .step { display: contents; }
  /* Text and screen share columns, so each step sits directly above its own screen. */
  .step:nth-child(1) .step__text { grid-area: 1 / 1 / 2 / 4; }
  .step:nth-child(2) .step__text { grid-area: 1 / 4 / 2 / 7; }
  .step:nth-child(3) .step__text { grid-area: 1 / 7 / 2 / 13; }
  .step:nth-child(1) .step__screen { grid-area: 2 / 1 / 3 / 4; }
  .step:nth-child(2) .step__screen { grid-area: 2 / 4 / 3 / 7; }
  .step:nth-child(3) .step__screen { grid-area: 2 / 7 / 3 / 13; }

  /* One stage behind all three screens: the panel colour, then the graph paper on top of it. */
  .steps::before,
  .steps::after {
    content: "";
    grid-area: 2 / 1 / 3 / 13;
    border-radius: var(--radius-lg);
    z-index: 0;
  }
  .steps::before { background: var(--surface-subtle); }
  .steps::after {
    background: url("../img/graphics/grid-20.svg") center / 2800px auto no-repeat;
    opacity: 0.1;
  }
  .step__screen { z-index: 1; background: none; padding: var(--space-10) var(--space-6); overflow: visible; }
  .step__screen .section-art--stage { display: none; }
}

.device-phone {
  width: 240px;
  aspect-ratio: 9 / 19.5;
  border: 8px solid var(--black);
  border-radius: var(--radius-xl);
  background: var(--surface);
  overflow: hidden;
}
.device-browser {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.device-browser__bar {
  height: 28px;
  flex: none;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
}
.device-browser__bar span { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--border); }
.device-browser .placeholder { flex: 1; }

/* ---------------------------------------------------------- Personas */

.persona-panel {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}
.persona-panel[hidden] { display: none; }
.persona-panel:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.persona-panel__copy { flex: 1 1 320px; display: flex; flex-direction: column; gap: var(--space-3); }
.persona-panel__visual { flex: 2 1 480px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.persona-panel__visual--center { align-items: center; }
.persona-panel .device-phone,
.persona-panel .device-browser { background: var(--surface-muted); }
.persona-panel .device-browser { display: flex; }
.badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sf-tabs { overflow-x: auto; scrollbar-width: none; }
.sf-tabs::-webkit-scrollbar { display: none; }
.sf-tab { white-space: nowrap; }

/* --------------------------------------------------------- Comparison */

.ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-4); font: var(--text-body); color: var(--ink); }
.ticks li { display: flex; gap: var(--space-2); align-items: flex-start; }
.ticks img { width: 20px; height: 20px; flex: none; margin-top: var(--space-1); }
.sf-card .ticks { margin-top: var(--space-4); }

/* ------------------------------------------------------- Integrations */

.brand-band {
  position: relative;
  overflow: clip;
  max-width: 1280px;
  margin: 0 auto;
  background: var(--surface-brand);
  color: var(--ink-on-brand);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  align-items: center;
}
.brand-band__copy { flex: 1 1 360px; display: flex; flex-direction: column; gap: var(--space-3); }
.brand-band__copy .eyebrow,
.brand-band__copy .h2,
.brand-band__copy p { color: var(--ink-on-brand); }
.brand-band__copy p:not(.eyebrow) { margin: 0; font: var(--text-body); }
.brand-band__cards { flex: 1 1 420px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--space-4); }

/* ------------------------------------------------------- Testimonial */

.quote { margin: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.quote blockquote { margin: 0; font: var(--text-h3); color: var(--ink); }
.quote figcaption { display: flex; align-items: center; gap: var(--space-3); }
.avatar { width: 48px; height: 48px; flex: none; border-radius: var(--radius-pill); background: var(--surface-subtle); display: flex; align-items: center; justify-content: center; }
.avatar img { width: 20px; height: 20px; }
.quote__who { display: flex; flex-direction: column; }
.quote__name { font: var(--text-ui); color: var(--ink); }
.quote__org { font: var(--text-caption); color: var(--ink-muted); }

/* -------------------------------------------------------------- Demo */

.demo { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--space-12); }
.demo__copy { flex: 1 1 380px; display: flex; flex-direction: column; gap: var(--space-4); }
.demo__points { margin: 0; padding: var(--space-2) 0 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); font: var(--text-ui); }
.demo__points li { display: flex; gap: var(--space-2); align-items: center; }
.demo__points img { width: 20px; height: 20px; }
.compliance {
  margin-top: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.compliance__list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.compliance__link { align-self: flex-start; padding: var(--space-2) 0; font: var(--text-ui); }
.demo__form-wrap { flex: 1 1 420px; min-width: 0; }
.demo-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--space-5); }
.demo-form .span-all { grid-column: 1 / -1; }
.demo-form__challenge:empty { display: none; }
.demo-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.demo-form__note { flex: 1 1 240px; font: var(--text-caption); color: var(--ink-muted); }
.demo-form__status { margin: 0; font: var(--text-ui); color: var(--status-success); }
.demo-form__status:empty { display: none; }
.demo-form__status.is-error { color: var(--status-danger); }
.demo-form[hidden] { display: none; }
.demo-form__consent { margin: 0; font: var(--text-body-sm); color: var(--ink-muted); }

/* Shown in place of the form once a request is registered. */
.demo-done { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.demo-done[hidden] { display: none; }
.demo-done__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}
.demo-done__icon img { width: 28px; height: 28px; }
.demo-done__title:focus { outline: none; }
.demo-done__title:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.demo-done__steps {
  margin: 0;
  padding: var(--space-4) 0 var(--space-2);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-top: 1px solid var(--border);
  width: 100%;
}
.demo-done__steps li { display: flex; gap: var(--space-3); align-items: flex-start; font: var(--text-body); color: var(--ink); }
.demo-done__num {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--surface-brand);
  color: var(--ink-on-brand);
  font: var(--text-ui-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* ------------------------------------------------------------ Footer */

.site-footer { background: var(--surface-brand); color: var(--ink-on-brand); }
.footer {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-16) var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.footer__top { display: flex; flex-wrap: wrap; gap: var(--space-12); justify-content: space-between; }
.footer__brand { flex: 1 1 320px; display: flex; flex-direction: column; gap: var(--space-4); max-width: 420px; }
.footer__brand img { width: 220px; height: auto; display: block; }
.footer__brand p { margin: 0; font: var(--text-body-sm); }
.footer__by { font: var(--text-caption); }
.footer__cols { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.footer__col { display: flex; flex-direction: column; gap: var(--space-2); font: var(--text-body-sm); font-style: normal; max-width: 260px; }
.footer__col h2 { margin: 0; }
.footer__col a { color: var(--ink-on-brand); text-decoration: none; padding: var(--space-1) 0; }
.footer__col a:hover,
.footer__legal a:hover { color: var(--ink-on-brand); text-decoration: underline; }
.footer__legal {
  border-top: 1px solid var(--border-strong);
  padding-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  font: var(--text-caption);
}
.footer__legal div { display: flex; gap: var(--space-6); }
.footer__legal a { color: var(--ink-on-brand); }

/* -------------------------------------------------------- Sub-pages */

.page-hero {
  position: relative;
  overflow: clip;
  background: var(--surface-muted);
  padding: var(--space-20) var(--space-6) var(--space-16);
}
.page-hero__art {
  position: absolute;
  right: -260px;
  top: -160px;
  width: 820px;
  height: auto;
  opacity: 0.2;
  pointer-events: none;
}
.page-hero__inner { position: relative; max-width: 1280px; margin: 0 auto; }
.page-hero__inner--split { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-10); }
.page-hero__copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); max-width: 860px; }

.page-hero__lead { max-width: 700px; }

.jump-links { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-3); }
.jump-link,
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0 var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font: var(--text-ui-lg);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.jump-link:hover { color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--surface-brand); border-color: var(--surface-brand); color: var(--ink-on-brand); }
.chip:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .jump-link:hover,
  .chip[aria-pressed="false"]:hover { background: var(--surface-subtle); }
}

.problem-fix { display: flex; flex-direction: column; gap: var(--space-3); }
.problem-fix p { margin: 0; }
.problem-fix b { color: var(--ink); }

.cta-band {
  max-width: 1280px;
  margin: 0 auto;
  background: var(--surface-brand);
  color: var(--ink-on-brand);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}
.cta-band--stacked { flex-direction: column; align-items: stretch; }
.cta-band__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
.cta-band__copy { flex: 1 1 420px; display: flex; flex-direction: column; gap: var(--space-3); max-width: 640px; }
.cta-band__copy .eyebrow,
.cta-band__copy .h2 { color: var(--ink-on-brand); }
.cta-band__copy p:not(.eyebrow) { margin: 0; font: var(--text-body); }
.cta-band a:not(.sf-btn) { color: var(--ink-on-brand); }

.facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--space-6);
  border-top: 1px solid var(--border-strong);
  padding-top: var(--space-6);
}
.facts div { display: flex; flex-direction: column; gap: var(--space-1); }

.facts dd { margin: 0; font: var(--text-ui-lg); }

/* Resources */
.featured {
  flex: 1 1 380px;
  min-width: 0;
  background: var(--surface-brand);
  color: var(--ink-on-brand);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.featured .eyebrow,
.featured .h3 { color: var(--ink-on-brand); }
.featured p:not(.eyebrow) { margin: 0; font: var(--text-body); }
.featured__soon {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--ink-on-brand);
  border-radius: var(--radius-pill);
  font: var(--text-ui-sm);
}
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.library__count { margin: calc(var(--space-8) * -0.5) 0 0; font: var(--text-caption); color: var(--ink-muted); }
.library__body { display: flex; flex-direction: column; gap: var(--space-3); }
.library__meta { font: var(--text-ui-sm); color: var(--ink-brand); }
[data-library-grid] > [hidden] { display: none; }
[data-library-grid].is-entering > :not([hidden]) { animation: library-in 220ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes library-in { from { opacity: 0; transform: translateY(4px); } }

.newsletter { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
.newsletter__copy { flex: 1 1 360px; display: flex; flex-direction: column; gap: var(--space-2); }
.newsletter__form { flex: 1 1 420px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.newsletter__form .sf-field { flex: 1 1 240px; }
.newsletter__status { flex-basis: 100%; margin: 0; font: var(--text-ui); color: var(--ink-muted); }
.newsletter__status:empty { display: none; }

/* About */
.split { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-12); }
.split__main { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.split__aside { flex: 1 1 380px; min-width: 0; }
.prose { margin: 0; font: var(--text-body); color: var(--ink); }
.person { display: flex; flex-direction: column; gap: var(--space-1); }
.person__name { margin: 0; font: var(--text-h3-sm); }
.person__role { margin: 0; font: var(--text-ui); color: var(--ink-brand); }

@media (prefers-reduced-motion: reduce) {
  [data-library-grid].is-entering > :not([hidden]) { animation: none; }
  .chip { transition: background-color 160ms ease, color 160ms ease; }
}

/* Panels and bands: system spacing, larger from 768px. */
@media (min-width: 768px) {
  .persona-panel { padding: var(--space-10); }
  .brand-band { padding: var(--space-12); }
  .cta-band { padding: var(--space-12); }
}

/* ------------------------------------------------------- Legal pages */

.legal__updated { margin: 0; font: var(--text-caption); color: var(--ink-muted); }
.legal { max-width: 1280px; margin: 0 auto; display: grid; gap: var(--space-10); }
.legal__toc ol { margin: var(--space-3) 0 0; padding: 0 0 0 var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); font: var(--text-body-sm); }
.legal__toc a { text-decoration: none; }
.legal__toc a:hover { text-decoration: underline; }
.legal__body { max-width: 720px; display: flex; flex-direction: column; gap: var(--space-4); font: var(--text-body); color: var(--ink); }
.legal__body p,
.legal__body ul { margin: 0; }
.legal__body ul { padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.legal__body h2 { margin: var(--space-8) 0 0; scroll-margin-top: 96px; }
.legal__body h2:first-child { margin-top: 0; }
.legal__h { margin: var(--space-2) 0 0; font: var(--text-h3-sm); }
@media (min-width: 960px) {
  .legal { grid-template-columns: 220px minmax(0, 1fr); }
  .legal__toc { position: sticky; top: 112px; align-self: start; }
}

/* ------------------------------------------------------------ Phone */

@media (max-width: 640px) {
  .section,
  .trust,
  .hero,
  .nav,
  .mobile-menu,
  .footer,
  .page-hero { padding-left: var(--space-4); padding-right: var(--space-4); }
  .page-hero { padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .h2 { font: var(--text-h2-sm); }
  .h3,
  .quote blockquote { font: var(--text-h3-sm); }
  .lead,
  .hero__lead { font: var(--text-body); }
  .hero { padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .hero__art { width: 520px; left: -220px; bottom: -160px; }
  .video-card__play { right: var(--space-4); bottom: var(--space-4); }
  .nav__brand img { width: 168px; }
}

/* ------------------------------------------------------ Scroll effects */

/* Scroll-driven animations: native CSS, no script, no layout change. They only run where the
   browser supports animation-timeline and the visitor hasn't asked for reduced motion; everywhere
   else the page is exactly as it is without them. Ranges are in pixels, not percentages, so a
   block taller than the screen is fully visible by the time you're reading it. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* 1. Reveals: blocks fade in and rise 12px as they enter; grid items cascade 40px apart.
       The hero and the industries strip are left out: they sit at the fold on load. */
    .section-head,
    .grid > *,
    .step__text,
    .step__screen,
    .sf-tabs,
    .persona-panel,
    .loop,
    .loop-controls,
    .loop-panel,
    .brand-band,
    .demo__copy,
    .demo__form-wrap,
    .cta-band,
    .newsletter,
    .split__main,
    .split__aside {
      animation: scroll-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0 entry 160px;
    }
    .grid > :nth-child(2) { animation-range: entry 40px entry 200px; }
    .grid > :nth-child(3) { animation-range: entry 80px entry 240px; }
    .grid > :nth-child(n + 4) { animation-range: entry 120px entry 280px; }

    /* 2. Steps: the teal rule over 01, 02 and 03 draws left to right. */
    .step__text { position: relative; border-top-color: transparent; }
    .step__text::before {
      content: "";
      position: absolute;
      top: -2px;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--surface-brand);
      transform-origin: left center;
      animation: scroll-draw linear both;
      animation-timeline: view();
      animation-range: entry 40px cover 40%;
    }

    /* 3. Graphics drift: the brand art moves a little slower than the page. Uses `translate`,
       so it composes with any transform the art already has. */
    .section-art,
    .hero__art,
    .page-hero__art {
      animation: scroll-drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }

    /* 4. Header: once you're past the top, the logo eases down a step and the border appears.
       Both are paint-only, so the header keeps its height. */
    .site-header {
      animation: scroll-header-border linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 160px;
    }
    .nav__brand img {
      transform-origin: left center;
      animation: scroll-logo linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 160px;
    }
  }
}

@keyframes scroll-reveal { from { opacity: 0; transform: translateY(12px); } }
@keyframes scroll-draw { from { transform: scaleX(0); } }
@keyframes scroll-drift { from { translate: 0 -40px; } to { translate: 0 40px; } }
@keyframes scroll-header-border { from { border-bottom-color: transparent; } }
@keyframes scroll-logo { to { transform: scale(0.88); } }