/*
 * FluXion website design tokens.
 *
 * Values follow the Fluxion v2 product design system (fluxion_v2/DESIGN.md):
 * light slate canvas, white surfaces, a dark navigation rail, one decisive
 * cobalt accent and explicit semantic colors. Marketing-only additions (display
 * type sizes, section spacing, shadows for large surfaces) are marked.
 */

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

:root {
  /* Brand and interaction */
  --fx-primary: #2962ff;
  --fx-primary-hover: #1f54e8;
  --fx-primary-elevated: #1e40af;
  --fx-primary-pale: #eef3ff;
  --fx-primary-glow: rgba(41, 98, 255, 0.28);

  /* Ink */
  --fx-ink: #0f172a;
  --fx-ink-strong: #1e293b;
  --fx-ink-secondary: #475569;
  --fx-ink-muted: #64748b;
  --fx-ink-faint: #94a3b8;

  /* Surfaces */
  --fx-canvas: #f6f7fb;
  --fx-canvas-subtle: #fbfcff;
  --fx-surface: #ffffff;
  --fx-surface-muted: #f8fafc;
  --fx-line: #e2e8f0;
  --fx-line-strong: #cbd5e1;
  --fx-dark: #0f1220;
  --fx-dark-elevated: #161a2c;
  --fx-on-dark-muted: #a3adc2;
  --fx-on-dark-line: rgba(255, 255, 255, 0.1);

  /* Semantic */
  --fx-success: #16a34a;
  --fx-success-dark: #15803d;
  --fx-success-pale: #f0fdf4;
  --fx-warning: #f59e0b;
  --fx-warning-dark: #7c4a03;
  --fx-warning-pale: #fffbeb;
  --fx-danger: #dc2626;
  --fx-danger-dark: #991b1b;
  --fx-danger-pale: #fef2f2;
  --fx-info: #38bdf8;
  --fx-info-dark: #1e429f;
  --fx-info-pale: #f2f6ff;

  /* Data palette (entity differentiation) */
  --fx-data-blue: #2563eb;
  --fx-data-teal: #14b8a6;
  --fx-data-amber: #ca8a04;
  --fx-data-violet: #7c3aed;
  --fx-data-red: #dc2626;
  --fx-data-green: #15803d;
  --fx-data-cyan: #0891b2;
  --fx-data-pink: #ec4899;
  --fx-data-orange: #ea580c;
  --fx-data-indigo: #4338ca;

  /* Radii */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-nav: 14px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Shadows */
  --sh-panel: 0 8px 16px rgba(0, 0, 0, 0.06);
  --sh-menu: 0 10px 24px rgba(0, 0, 0, 0.16);
  --sh-action: 0 6px 16px var(--fx-primary-glow);
  --sh-hero: 0 24px 70px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06); /* marketing */
  --sh-card-hover: 0 14px 32px rgba(15, 23, 42, 0.1); /* marketing */

  /* Typography */
  --font-sans: 'Inter Variable', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Layout (marketing) */
  --container: 1200px;
  --container-wide: 1320px;
  --gutter: 24px;
  --section-y: clamp(64px, 9vw, 112px);
  --header-h: 72px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 220ms;

  color-scheme: light;
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
    --header-h: 64px;
  }
}

/* Base styles: reset, typography, layout primitives and shared utilities. */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--fx-ink);
  background: var(--fx-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'calt';
  overflow-x: clip;
}

[hidden] {
  display: none !important;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--fx-primary-elevated);
  text-decoration: none;
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration: underline;
}

button {
  font: inherit;
  color: inherit;
}

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

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

:focus-visible {
  outline: 3px solid var(--fx-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--fx-primary-pale);
  color: var(--fx-primary-elevated);
}

/* ---------- Typography ---------- */

.display {
  font-size: clamp(2.5rem, 1.7rem + 3.4vw, 4.375rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.h1 {
  font-size: clamp(2.125rem, 1.5rem + 2.4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.024em;
  text-wrap: balance;
}

.h3 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

.h4 {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.lead {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  color: var(--fx-ink-secondary);
  text-wrap: pretty;
}

.body-l {
  font-size: 1.0625rem;
  line-height: 1.6;
}

.muted {
  color: var(--fx-ink-muted);
}

.secondary {
  color: var(--fx-ink-secondary);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fx-primary-elevated);
}

.eyebrow::before {
  content: '';
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--fx-primary);
}

.eyebrow--plain::before {
  display: none;
}

.accent {
  color: var(--fx-primary);
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1px;
}

.text-balance {
  text-wrap: balance;
}

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

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

.container--wide {
  max-width: calc(var(--container-wide) + var(--gutter) * 2);
}

.container--narrow {
  max-width: calc(820px + var(--gutter) * 2);
}

.section {
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: calc(var(--section-y) * 0.6);
}

.section--canvas {
  background: var(--fx-canvas);
}

.section--dark {
  background: var(--fx-dark);
  color: #fff;
}

.section--line-top {
  border-top: 1px solid var(--fx-line);
}

.section-head {
  max-width: 720px;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .eyebrow {
  justify-content: center;
}

.section-head .eyebrow {
  margin-bottom: 14px;
}

.section-head .lead {
  margin-top: 16px;
}

.grid {
  display: grid;
  gap: 24px;
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
  .grid {
    gap: 16px;
  }
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--fx-ink);
  color: #fff;
  border-radius: var(--r-md);
  font-weight: 700;
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease-out);
}

.skip-link:focus {
  transform: none;
}

/* ---------- Scroll reveal ----------
 * Elements are visible by default. site.js marks only elements below the
 * initial viewport as pending, so the first frame is always complete.
 */

.reveal {
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-out);
}

.reveal.reveal--pending {
  opacity: 0;
  transform: translateY(14px);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal[data-delay='1'] {
  transition-delay: 80ms;
}
.reveal[data-delay='2'] {
  transition-delay: 160ms;
}
.reveal[data-delay='3'] {
  transition-delay: 240ms;
}
.reveal[data-delay='4'] {
  transition-delay: 320ms;
}
.reveal[data-delay='5'] {
  transition-delay: 400ms;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.reveal--pending {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Shared components: buttons, cards, header, footer, sections. */

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

.btn:hover {
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn .icon {
  flex: none;
}

.btn:disabled,
.btn:disabled:hover {
  opacity: 0.7;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

.btn--primary {
  background: var(--fx-primary);
  color: #fff;
  box-shadow: var(--sh-action);
}

.btn--primary:hover {
  background: var(--fx-primary-hover);
  box-shadow: 0 8px 20px var(--fx-primary-glow);
}

.btn--secondary {
  background: var(--fx-surface);
  color: var(--fx-ink);
  border-color: var(--fx-line-strong);
}

.btn--secondary:hover {
  border-color: var(--fx-ink-faint);
  background: var(--fx-surface-muted);
}

.btn--ghost {
  background: transparent;
  color: var(--fx-ink-secondary);
  padding-inline: 12px;
}

.btn--ghost:hover {
  background: var(--fx-surface-muted);
  color: var(--fx-ink);
}

.btn--on-dark {
  background: var(--fx-dark-elevated);
  color: #fff;
  border-color: var(--fx-on-dark-line);
}

.btn--on-dark:hover {
  background: #1d2236;
}

.btn--light {
  background: #fff;
  color: var(--fx-ink);
}

.btn--light:hover {
  background: var(--fx-canvas);
}

.btn--lg {
  min-height: 52px;
  padding: 14px 26px;
  font-size: 1.0625rem;
  border-radius: 14px;
}

.btn--sm {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 0.875rem;
  border-radius: var(--r-sm);
}

.btn--block {
  width: 100%;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--fx-primary-elevated);
}

.link-arrow .icon {
  transition: transform var(--dur) var(--ease-out);
}

.link-arrow:hover {
  text-decoration: none;
}

.link-arrow:hover .icon {
  transform: translateX(3px);
}

/* ---------- Icons ---------- */

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

.icon-tile {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--fx-primary-pale);
  color: var(--fx-primary-elevated);
  flex: none;
  line-height: 0;
}

/* Centered regardless of the tile's display mode (robust against host resets). */
.icon-tile .icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 22px;
  display: block;
}

.icon-tile--lg {
  width: 52px;
  height: 52px;
  border-radius: var(--r-nav);
}

.icon-tile--lg .icon {
  width: 26px;
  height: 26px;
}

.icon-tile--dark {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.icon-tile--subtle {
  background: var(--fx-surface-muted);
  color: var(--fx-ink-secondary);
  border: 1px solid var(--fx-line);
}

/* ---------- Cards ---------- */

.card {
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
  border-radius: var(--r-lg);
  padding: 28px;
  transition:
    box-shadow var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.card--link {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: inherit;
  text-decoration: none;
}

.card--link:hover {
  text-decoration: none;
  box-shadow: var(--sh-card-hover);
  transform: translateY(-2px);
  border-color: var(--fx-line-strong);
}

.card--muted {
  background: var(--fx-surface-muted);
}

.card__title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.3;
}

.card__text {
  color: var(--fx-ink-secondary);
  line-height: 1.55;
}

.card__footer {
  margin-top: auto;
  padding-top: 6px;
}

.card .icon-tile {
  margin-bottom: 4px;
}

.panel {
  background: var(--fx-surface);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-panel);
}

/* ---------- Badges & chips ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--fx-primary-pale);
  color: var(--fx-primary-elevated);
}

.badge--neutral {
  background: var(--fx-surface-muted);
  color: var(--fx-ink-secondary);
  border: 1px solid var(--fx-line);
}

.badge--success {
  background: var(--fx-success-pale);
  color: var(--fx-success-dark);
}

.badge--warning {
  background: var(--fx-warning-pale);
  color: var(--fx-warning-dark);
}

.badge--info {
  background: var(--fx-info-pale);
  color: var(--fx-info-dark);
}

.badge--on-dark {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- Check list ---------- */

.checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.5;
}

.checklist .check {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fx-primary-pale);
  color: var(--fx-primary-elevated);
}

.checklist .check .icon {
  width: 13px;
  height: 13px;
  stroke-width: 3;
}

.checklist--on-dark .check {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* ---------- Feature list (icon + title + text) ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 32px;
}

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

.feature {
  display: flex;
  gap: 16px;
  padding: 20px;
  border-radius: var(--r-lg);
  border: 1px solid var(--fx-line);
  background: var(--fx-surface);
}

.feature__title {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.feature__text {
  margin-top: 4px;
  font-size: 0.9375rem;
  color: var(--fx-ink-secondary);
  line-height: 1.55;
}

.feature .icon-tile {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
}

.feature .icon-tile .icon {
  width: 20px;
  height: 20px;
}

/* Compact fact grid (platform facts) */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--fx-line);
  border: 1px solid var(--fx-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.facts__item {
  background: var(--fx-surface);
  padding: 24px;
}

.facts__item .icon-tile {
  margin-bottom: 14px;
}

.facts__title {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.facts__text {
  margin-top: 6px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--fx-ink-secondary);
}

.facts--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .facts,
  .facts--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/* ---------- Steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  counter-reset: step;
}

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

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
  overflow: hidden;
}

/* Growth story: each step opens with a scene, and the plant in it grows from
   step to step. The scenes share one ground line and one road, so across the
   row they read as a single panorama. */
.step__scene {
  border-bottom: 1px solid var(--fx-line);
  background:
    radial-gradient(rgba(15, 23, 42, 0.07) 1px, transparent 1.2px) 0 0 / 14px 14px,
    linear-gradient(180deg, var(--fx-primary-pale), var(--fx-canvas-subtle));
}

.step__scene .scene {
  display: block;
  width: 100%;
  height: auto;
}

.step__body {
  padding: 22px 28px 28px;
}

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--fx-ink);
  color: #fff;
  font-weight: 800;
  font-size: 0.875rem;
  margin-bottom: 18px;
}

.step__title {
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.012em;
}

.step__text {
  margin-top: 8px;
  color: var(--fx-ink-secondary);
  line-height: 1.55;
}

/* The scenes' base state is the finished drawing. When the card scrolls into
   view the reveal observer adds `is-visible`: tiles, machines and the flag
   play once, in the order the inline animation delays set, while the
   magnifying glass keeps scanning and product keeps moving along the belt. */
.scene .scene-fade,
.scene .scene-drop,
.scene .scene-pop {
  transform-box: fill-box;
  transform-origin: center;
}

/* Product on the belt rides an offset path; without support it stays hidden
   rather than piling up in the corner. */
.scene .scene-item {
  display: none;
}

@supports (offset-path: path("M0 0L1 1")) {
  .scene .scene-item {
    display: block;
    offset-distance: var(--at, 0%);
    offset-rotate: 0deg;
  }
}

.step.is-visible .scene-fade {
  animation: scene-fade 500ms var(--ease-out) both;
}

.step.is-visible .scene-drop {
  animation: scene-drop 550ms var(--ease-out) both;
}

.step.is-visible .scene-pop {
  animation: scene-pop 450ms var(--ease-out) both;
}

.step.is-visible .scene-light {
  animation: scene-light 500ms ease-out both;
}

.step.is-visible .scene-scan {
  animation: scene-scan 7s ease-in-out infinite;
}

.step.is-visible .scene-belt {
  animation: scene-flow 600ms linear infinite;
}

.step.is-visible .scene-item {
  animation: scene-travel 5s linear infinite;
}

@keyframes scene-fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes scene-drop {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }
}

@keyframes scene-pop {
  from {
    opacity: 0;
    transform: scale(0);
  }
}

@keyframes scene-light {
  from {
    fill: #334155;
    opacity: 0;
  }
}

@keyframes scene-scan {
  0%,
  12% {
    transform: translate(0, 0);
  }
  38%,
  50% {
    transform: translate(44px, 22px);
  }
  76%,
  88% {
    transform: translate(-30px, 26px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes scene-flow {
  to {
    stroke-dashoffset: -8;
  }
}

@keyframes scene-travel {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .step.is-visible .scene [class^="scene-"] {
    animation: none;
  }
}
/* ---------- FAQ ---------- */

.faq {
  border-top: 1px solid var(--fx-line);
}

.faq__item {
  border-bottom: 1px solid var(--fx-line);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary .icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--fx-ink-muted);
  transition: transform var(--dur) var(--ease-out);
}

.faq__item[open] summary .icon {
  transform: rotate(180deg);
}

.faq__item summary:hover {
  color: var(--fx-primary-elevated);
}

.faq__body {
  padding: 0 4px 22px;
  color: var(--fx-ink-secondary);
  line-height: 1.6;
  max-width: 760px;
}

/* ---------- Screenshot frame ---------- */

.shot {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--fx-surface);
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: var(--sh-hero);
  overflow: hidden;
}

.shot__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  background: var(--fx-surface-muted);
  border-bottom: 1px solid var(--fx-line);
}

.shot__bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fx-line-strong);
}

.shot__url {
  margin-left: 10px;
  flex: 1;
  height: 20px;
  border-radius: 6px;
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
  font-size: 0.6875rem;
  color: var(--fx-ink-muted);
  display: flex;
  align-items: center;
  padding: 0 10px;
  max-width: 320px;
}

.shot img {
  width: 100%;
  height: auto;
}

.shot__zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: rgba(15, 23, 42, 0.82);
  color: #fff;
  border: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.shot:hover .shot__zoom,
.shot:focus-within .shot__zoom {
  opacity: 1;
}

@media (hover: none) {
  .shot__zoom {
    opacity: 1;
  }
}

.shot-caption {
  margin-top: 14px;
  font-size: 0.9375rem;
  color: var(--fx-ink-secondary);
  line-height: 1.5;
}

.shot-caption small {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--fx-ink-muted);
}

/* Lightbox */
.lightbox {
  border: 0;
  padding: 0;
  max-width: min(96vw, 1500px);
  max-height: 92vh;
  border-radius: var(--r-lg);
  background: var(--fx-surface);
  box-shadow: var(--sh-hero);
  overflow: hidden;
}

.lightbox::backdrop {
  background: rgba(15, 18, 32, 0.72);
  backdrop-filter: blur(4px);
}

.lightbox img {
  width: 100%;
  height: auto;
  max-height: 92vh;
  object-fit: contain;
}

.lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ---------- Tabs ---------- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border-radius: var(--r-nav);
  background: var(--fx-surface-muted);
  border: 1px solid var(--fx-line);
  width: fit-content;
  max-width: 100%;
}

.tabs button {
  border: 0;
  background: transparent;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--fx-ink-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

.tabs button[aria-selected='true'] {
  background: var(--fx-surface);
  color: var(--fx-ink);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.tabs button:hover {
  color: var(--fx-ink);
}

/* ---------- CTA band ---------- */

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--fx-dark) url('/images/cta-factory.webp') center / cover no-repeat;
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(40px, 6vw, 72px);
  isolation: isolate;
}

.cta-band::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto auto;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(41, 98, 255, 0.55), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

/* Darkens the factory backdrop behind the copy so the white text stays legible;
   the right side, where the mascot stands, keeps more of the scene. */
.cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15, 18, 32, 0.94) 0%, rgba(15, 18, 32, 0.86) 45%, rgba(15, 18, 32, 0.45) 100%);
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 860px) {
  .cta-band::after {
    background: linear-gradient(180deg, rgba(15, 18, 32, 0.94) 0%, rgba(15, 18, 32, 0.86) 55%, rgba(15, 18, 32, 0.5) 100%);
  }
}

.cta-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

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

.cta-band .eyebrow {
  color: #9db4ff;
}

.cta-band .eyebrow::before {
  background: #9db4ff;
}

.cta-band .lead {
  color: var(--fx-on-dark-muted);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
}

@media (min-width: 861px) {
  .cta-band__actions {
    justify-content: flex-end;
  }
}

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

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.header.is-scrolled {
  border-bottom-color: var(--fx-line);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
}

.header__logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.header__logo img {
  height: 26px;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--fx-ink-secondary);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

/* Between the burger breakpoint (1024px) and a roomy desktop the six nav items
   need tighter spacing, most of all with the longer English labels. */
@media (max-width: 1200px) {
  .header__inner {
    gap: 16px;
  }
  .nav__link {
    padding: 10px 8px;
  }
}

@media (max-width: 1100px) {
  .header__inner {
    gap: 12px;
  }
  .nav {
    margin-left: 0;
  }
  .nav__link {
    padding: 10px 6px;
  }
}

.nav__link:hover,
.nav__link[aria-expanded='true'],
.nav__link[aria-current='page'] {
  color: var(--fx-ink);
  background: var(--fx-surface-muted);
  text-decoration: none;
}

.nav__link[aria-current='page'] {
  color: var(--fx-primary-elevated);
  background: var(--fx-primary-pale);
}

.nav__link .icon {
  width: 16px;
  height: 16px;
  color: var(--fx-ink-muted);
  transition: transform var(--dur) var(--ease-out);
}

.nav__link[aria-expanded='true'] .icon {
  transform: rotate(180deg);
}

.nav__item {
  position: relative;
}

.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(1080px, calc(100vw - 48px));
  padding: 16px;
  display: grid;
  grid-template-columns: 236px 1fr;
  gap: 16px;
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-menu);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
  z-index: 60;
}

.mega.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.mega__intro {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: var(--r-md);
  background: var(--fx-dark);
  color: #fff;
  text-decoration: none;
}

.mega__intro:hover {
  text-decoration: none;
  background: var(--fx-dark-elevated);
}

.mega__intro .link-arrow {
  color: #9db4ff;
  font-size: 0.875rem;
  margin-top: auto;
}

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

.mega__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px;
  border-radius: var(--r-md);
  color: var(--fx-ink);
  text-decoration: none;
}

.mega__item:hover {
  background: var(--fx-surface-muted);
  text-decoration: none;
}

.mega__thumb {
  position: relative;
  flex: none;
  width: 124px;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  background: var(--fx-canvas) center / cover no-repeat;
  border: 1px solid var(--fx-line);
  overflow: hidden;
  transition:
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.mega__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 50%, rgba(15, 23, 42, 0.16) 100%);
  pointer-events: none;
}

.mega__item:hover .mega__thumb {
  border-color: var(--fx-line-strong);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

.mega__thumb .icon-tile {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 1;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #fff;
  color: var(--fx-primary-elevated);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}

.mega__thumb .icon-tile .icon {
  width: 14px;
  height: 14px;
}

.mega__item-text {
  display: block;
  min-width: 0;
}

.mega__item-title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fx-ink);
  line-height: 1.3;
}

.mega__item-desc {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--fx-ink-muted);
  line-height: 1.4;
  margin-top: 2px;
  text-wrap: pretty;
}

.mega__intro {
  text-decoration: none;
}

.mega__intro-title {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

.mega__intro-text {
  display: block;
  font-size: 0.875rem;
  color: var(--fx-on-dark-muted);
  line-height: 1.45;
}

.header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Language menu: an icon-only button that opens the list of languages. */
.lang-menu {
  position: relative;
}

.lang-menu__button {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--fx-ink-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lang-menu__button:hover,
.lang-menu__button[aria-expanded='true'] {
  background: var(--fx-surface-muted);
  color: var(--fx-ink);
}

.lang-menu__button .icon {
  width: 20px;
  height: 20px;
}

.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  padding: 6px;
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-menu);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
  z-index: 60;
}

.dropdown.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.lang-menu__panel {
  width: max-content;
  max-width: calc(100vw - 32px);
}

.lang-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}

.lang-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 10px;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fx-ink);
  text-decoration: none;
  white-space: nowrap;
}

.lang-list a:hover {
  background: var(--fx-surface-muted);
  text-decoration: none;
}

.lang-list a[aria-current='true'] {
  background: var(--fx-primary-pale);
  color: var(--fx-primary-elevated);
}

.lang-list a .icon {
  width: 16px;
  height: 16px;
  margin-left: auto;
}

.flag {
  width: 20px;
  height: 14px;
  flex: none;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
}

/* Inline variant (404 page): a centred, wrapping row. */
.lang-list--inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: 28px;
}

.lang-list--inline a .icon {
  display: none;
}

@media (max-width: 420px) {
  .lang-list:not(.lang-list--inline) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Footer variant: the globe with the current language's name, opening upwards. */
.lang-menu__button--labelled {
  width: auto;
  height: 36px;
  padding: 0 10px 0 10px;
  gap: 8px;
  border-color: var(--fx-line);
  background: var(--fx-surface);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--fx-ink);
}

.lang-menu__button--labelled:hover,
.lang-menu__button--labelled[aria-expanded='true'] {
  background: var(--fx-surface);
  border-color: var(--fx-line-strong);
  color: var(--fx-ink);
}

.lang-menu__button--labelled .icon {
  width: 18px;
  height: 18px;
  color: var(--fx-ink-secondary);
}

.lang-menu__button--labelled .icon-chevron-down {
  width: 14px;
  height: 14px;
  color: var(--fx-ink-faint);
}

.dropdown--up {
  top: auto;
  bottom: calc(100% + 8px);
  transform: translateY(6px);
}

.dropdown--up.is-open {
  transform: none;
}

@media (max-width: 640px) {
  .lang-menu--footer .dropdown {
    right: auto;
    left: 0;
  }
}

.header__login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--fx-ink-secondary);
}

.header__login:hover {
  background: var(--fx-surface-muted);
  color: var(--fx-ink);
  text-decoration: none;
}

.header__login .icon {
  width: 16px;
  height: 16px;
}

.header__burger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid var(--fx-line);
  background: var(--fx-surface);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.header__burger .icon {
  width: 22px;
  height: 22px;
}

/* Below this the six nav items plus the actions no longer fit on one line,
   so the header switches to the burger and the mobile panel. */
@media (max-width: 1060px) {
  .nav,
  .header__login,
  .header__actions .btn--demo {
    display: none;
  }
  .header__burger {
    display: inline-flex;
  }
}

/* Mobile navigation panel */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 49;
  background: var(--fx-surface);
  overflow-y: auto;
  padding: 16px var(--gutter) 32px;
  display: none;
  flex-direction: column;
  gap: 8px;
}

.mobile-nav.is-open {
  display: flex;
}

.mobile-nav__group {
  border-bottom: 1px solid var(--fx-line);
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.mobile-nav__label {
  display: block;
  padding: 10px 4px 6px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fx-ink-muted);
}

.mobile-nav a:not(.btn) {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--fx-ink);
}

.mobile-nav a:not(.btn):hover {
  background: var(--fx-surface-muted);
  text-decoration: none;
}

.mobile-nav a[aria-current='page'] {
  color: var(--fx-primary-elevated);
  background: var(--fx-primary-pale);
}

.mobile-nav a:not(.btn) .icon {
  width: 20px;
  height: 20px;
  color: var(--fx-ink-muted);
}

.mobile-nav__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

body.nav-open {
  overflow: hidden;
}

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

.footer {
  background: var(--fx-canvas);
  border-top: 1px solid var(--fx-line);
  padding-block: 64px 32px;
  color: var(--fx-ink-secondary);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
  gap: 32px;
}

@media (max-width: 1024px) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
}

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

.footer__brand img {
  height: 24px;
  width: auto;
}

.footer__brand p {
  margin-top: 16px;
  max-width: 320px;
  line-height: 1.55;
  font-size: 0.9375rem;
}

.footer__col h4 {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fx-ink);
  margin-bottom: 14px;
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__col a {
  color: var(--fx-ink-secondary);
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer__col a:hover {
  color: var(--fx-primary-elevated);
}

.footer__col a .icon {
  width: 14px;
  height: 14px;
  color: var(--fx-ink-faint);
}

.footer__bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--fx-line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--fx-ink-muted);
}

.footer__bottom a {
  color: var(--fx-ink-muted);
}

.footer__bottom a:hover {
  color: var(--fx-primary-elevated);
}

/* ---------- Page hero (inner pages) ---------- */

.page-hero {
  position: relative;
  padding-block: clamp(48px, 7vw, 88px) clamp(32px, 5vw, 64px);
  background:
    radial-gradient(60% 70% at 85% 0%, rgba(41, 98, 255, 0.1), transparent 60%),
    linear-gradient(180deg, var(--fx-canvas) 0%, var(--fx-surface) 100%);
}

.page-hero .eyebrow {
  margin-bottom: 16px;
}

.page-hero .lead {
  margin-top: 20px;
  max-width: 720px;
}

.page-hero__actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-hero--split {
  padding-bottom: 0;
}

.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

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

/* ---------- Prose ---------- */

.prose p + p {
  margin-top: 1em;
}

.prose {
  color: var(--fx-ink-secondary);
  line-height: 1.7;
  font-size: 1.0625rem;
}

.prose h2,
.prose h3 {
  color: var(--fx-ink);
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}

/* ---------- Forms ---------- */

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

.field label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--fx-ink-strong);
}

.field label small {
  font-weight: 600;
  color: var(--fx-ink-muted);
}

.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--fx-line-strong);
  background: var(--fx-surface-muted);
  font: inherit;
  color: var(--fx-ink);
  transition:
    border-color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.field textarea {
  min-height: 140px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  background: var(--fx-surface);
  border-color: var(--fx-primary);
  box-shadow: 0 0 0 4px var(--fx-primary-pale);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--fx-ink-muted);
}

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

.form-grid .field--full {
  grid-column: 1 / -1;
}

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

.form-note {
  font-size: 0.8125rem;
  color: var(--fx-ink-muted);
  line-height: 1.5;
}

.field.is-invalid input,
.field.is-invalid textarea {
  border-color: var(--fx-danger);
}

.field.is-invalid input:focus,
.field.is-invalid textarea:focus {
  box-shadow: 0 0 0 4px var(--fx-danger-pale);
}

.field__error {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--fx-danger-dark);
}

/* Honeypot field: out of sight and out of the tab order, but there for bots. */
.field--trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--fx-success-pale);
  color: var(--fx-success-dark);
  font-weight: 600;
  font-size: 0.9375rem;
}

.notice--info {
  background: var(--fx-info-pale);
  color: var(--fx-info-dark);
}

.notice--danger {
  background: var(--fx-danger-pale);
  color: var(--fx-danger-dark);
}

.notice a {
  color: inherit;
  text-decoration: underline;
}

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

.compare {
  overflow-x: auto;
  border: 1px solid var(--fx-line);
  border-radius: var(--r-lg);
  background: var(--fx-surface);
}

.compare table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.compare th,
.compare td {
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid var(--fx-line);
  font-size: 0.9375rem;
}

.compare thead th {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fx-ink-secondary);
  background: var(--fx-surface-muted);
}

.compare thead th:not(:first-child),
.compare td:not(:first-child) {
  text-align: center;
  width: 18%;
}

.compare .compare__group td {
  background: var(--fx-canvas);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fx-ink-strong);
}

.compare tbody tr:last-child td {
  border-bottom: 0;
}

/* Included: a bare green check, no disc behind it, so the table stays light.
   Not included: a faint minus in the same-size box so the columns stay aligned. */
.compare .yes,
.compare .no {
  display: inline-flex;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.compare .yes {
  color: var(--fx-success);
}

.compare .yes .icon {
  width: 20px;
  height: 20px;
  stroke-width: 2.75;
}

.compare .no {
  color: var(--fx-line-strong);
}

.compare .no .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}

.compare th.is-highlight,
.compare td.is-highlight {
  background: rgba(41, 98, 255, 0.04);
}

/* ---------- Pricing tiers ---------- */

.tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

@media (max-width: 1180px) {
  .tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 760px;
    margin-inline: auto;
  }
}

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

  /* Cards stack in one column here, so give the highlighted card room above it
     for the peeking mascot instead of letting it overlap the card before it.
     The scale-up is dropped too, so the card doesn't crowd the column's edges. */
  .tier--highlight,
  .tier--highlight:hover {
    margin-top: 96px;
    transform: none;
  }
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.tier:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-card-hover);
}

.tier--highlight {
  z-index: 1;
  border-color: var(--fx-primary);
  box-shadow: 0 24px 56px rgba(41, 98, 255, 0.22);
  transform: scale(1.045);
}

.tier--highlight:hover {
  transform: scale(1.045) translateY(-3px);
}

.tier__head {
  position: relative;
  padding: 26px 26px 20px;
  border-bottom: 1px solid var(--fx-line);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}

.tier--highlight .tier__head {
  padding-top: 38px;
  background: linear-gradient(160deg, var(--fx-primary-elevated) 0%, var(--fx-primary) 65%, #3f7dff 100%);
  border-bottom-color: transparent;
  color: #fff;
}

/* Mascot peeking over the highlighted tier's top edge. The body is cut flat at
   the ledge line 84% down the image; shifting the image down by 16% of its own
   height puts that cut exactly on the card border at every width, so only the
   hands dip into the gradient head. */
.tier__mascot {
  position: absolute;
  z-index: 3;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 16%);
  width: clamp(72px, 17%, 92px);
  aspect-ratio: 555 / 510;
  filter: drop-shadow(0 10px 16px rgba(15, 23, 42, 0.18));
  pointer-events: none;
  user-select: none;
}

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

.tier__name {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.tier__badge {
  flex: none;
  border-radius: var(--r-pill);
  padding: 4px 11px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tier__audience {
  margin-top: 6px;
  color: var(--fx-ink-secondary);
  line-height: 1.45;
  min-height: 2.6em;
}

.tier--highlight .tier__audience {
  color: rgba(255, 255, 255, 0.86);
}

.tier__price {
  margin-top: 12px;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.tier__price small {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fx-ink-muted);
}

.tier--highlight .tier__price small {
  color: rgba(255, 255, 255, 0.72);
}

.tier__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: 20px 26px 24px;
}

/* Work center and user allowance. It sits above the includes heading so a
   "Everything in S, plus" list is never read as adding to the S numbers. */
.tier__limits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tier__limits li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--fx-primary-pale);
  color: var(--fx-primary-elevated);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
}

.tier__limits .icon {
  flex: none;
  width: 16px;
  height: 16px;
}

.tier__includes-title {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fx-ink-secondary);
}

.tier .checklist {
  gap: 9px;
  font-size: 0.9375rem;
}

.tier .checklist li {
  line-height: 1.4;
}

.tier .btn {
  margin-top: auto;
}

/* ---------- Roadmap ---------- */

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

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

.roadmap-item {
  display: flex;
  gap: 16px;
  padding: 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--fx-line);
  background: var(--fx-surface);
}

.roadmap-item__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.roadmap-item__title {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.roadmap-item__text {
  margin-top: 6px;
  color: var(--fx-ink-secondary);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* ---------- Misc ---------- */

.divider {
  height: 1px;
  background: var(--fx-line);
}

.kicker-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 0.9375rem;
  color: var(--fx-ink-secondary);
  font-weight: 600;
}

.kicker-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.kicker-list .icon {
  width: 16px;
  height: 16px;
  color: var(--fx-primary);
}

.logo-dark {
  filter: invert(1);
}

/* Official store badges. Both are drawn 40 px tall, the minimum the brand
   guidelines allow, and are never restyled. */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.store-badge {
  display: inline-flex;
  border-radius: 6px;
}

.store-badge img {
  display: block;
  height: 40px;
  width: auto;
}

/* Google's PNGs are 646 × 250 with transparent clear space baked in. The
   localized files fill the width and leave 29 px above and below the badge;
   the English file is an older cut with 41 px on every side. Each is scaled so
   the badge itself is 40 px tall, and the baked-in space is pulled back so it
   lines up with the App Store badge. */
.store-badge--play img {
  height: 52px;
  margin-block: -6px;
}

.store-badge--play img:lang(en) {
  height: 60px;
  margin: -10px;
}

.footer .store-badges {
  margin-top: 16px;
}

/*
 * Product mockups drawn with HTML/CSS.
 *
 * Every mockup lives inside a `.mock` container. Sizes inside use container
 * query units (cqw) so a mockup scales proportionally with its width, like an
 * image, while staying crisp and themable.
 */

.mock {
  container-type: inline-size;
  width: 100%;
}

.app {
  position: relative;
  display: grid;
  grid-template-columns: 8.5cqw minmax(0, 1fr);
  width: 100%;
  aspect-ratio: 16 / 10.6;
  background: var(--fx-canvas);
  border-radius: 2.2cqw;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: var(--sh-hero);
  overflow: hidden;
  font-size: 1.7cqw;
  line-height: 1.35;
  color: var(--fx-ink);
  text-align: left;
  user-select: none;
}

.app--tall {
  aspect-ratio: 16 / 11.5;
}

/* Rail */
.app__rail {
  background: linear-gradient(180deg, #0f1220 0%, #161a2c 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.6cqw 0;
  gap: 0.9cqw;
}

.app__rail-logo {
  width: 3.6cqw;
  height: 3.6cqw;
  margin-bottom: 1.4cqw;
}

.app__rail-item {
  width: 6.4cqw;
  height: 5.6cqw;
  border-radius: 1.4cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4cqw;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1cqw;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.app__rail-item .icon {
  width: 2.4cqw;
  height: 2.4cqw;
}

.app__rail-item.is-active {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.app__rail-spacer {
  flex: 1;
}

.app__avatar {
  width: 3.4cqw;
  height: 3.4cqw;
  border-radius: 50%;
  background: linear-gradient(135deg, #7399ff, #2962ff);
  border: 0.3cqw solid rgba(255, 255, 255, 0.35);
}

/* Main */
.app__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.app__header {
  height: 5.6cqw;
  flex: none;
  background: #fff;
  border-bottom: 1px solid var(--fx-line);
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  padding: 0 2cqw;
}

.app__header img {
  height: 1.9cqw;
  width: auto;
}

/* Work timer in the header: a running clock-in, as in the real app (red dot, tabular digits). */
.app__timer {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.7cqw;
  font-weight: 900;
  font-size: 1.55cqw;
  font-variant-numeric: tabular-nums;
  color: var(--fx-ink-strong);
}

/* Shared work-timer dot: every mockup with a running clock-in (app header,
 * phone header, …) leads with this pulsing red dot, not a clock icon. */
.timer-dot {
  width: 1cqw;
  height: 1cqw;
  border-radius: 50%;
  background: var(--fx-data-red);
  box-shadow: 0 0 0 0.3cqw rgba(220, 38, 38, 0.16);
  animation: timer-pulse 2s ease-in-out infinite;
  flex: none;
}

@keyframes timer-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0.3cqw rgba(220, 38, 38, 0.16);
  }
  50% {
    box-shadow: 0 0 0 0.6cqw rgba(220, 38, 38, 0.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .timer-dot {
    animation: none;
  }
}

.app__search {
  width: 32cqw;
  height: 3.4cqw;
  border-radius: 1cqw;
  background: var(--fx-surface-muted);
  border: 1px solid var(--fx-line);
  font-size: 1.35cqw;
  color: var(--fx-ink-muted);
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  padding: 0 1.2cqw;
  white-space: nowrap;
  overflow: hidden;
}

.app__search .icon {
  width: 1.6cqw;
  height: 1.6cqw;
}

.app__icon-btn {
  width: 3.2cqw;
  height: 3.2cqw;
  border-radius: 50%;
  border: 1px solid var(--fx-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fx-ink-secondary);
}

.app__icon-btn .icon {
  width: 1.7cqw;
  height: 1.7cqw;
}

.app__body {
  flex: 1;
  min-height: 0;
  padding: 1.8cqw 2cqw;
  display: flex;
  flex-direction: column;
  gap: 1.4cqw;
  overflow: hidden;
}

.app__crumbs {
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  font-size: 1.4cqw;
  color: var(--fx-ink-muted);
  font-weight: 600;
}

.app__crumbs strong {
  color: var(--fx-ink);
}

.app__crumbs .icon {
  width: 1.5cqw;
  height: 1.5cqw;
}

.app__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 27cqw;
  gap: 1.4cqw;
  min-height: 0;
  flex: 1;
}

.app__col {
  display: flex;
  flex-direction: column;
  gap: 1.4cqw;
  min-width: 0;
  min-height: 0;
}

/* Panels */
.ap {
  background: #fff;
  border-radius: 1.6cqw;
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 0.8cqw 1.6cqw rgba(0, 0, 0, 0.05);
  padding: 1.6cqw;
}

.ap--flat {
  box-shadow: none;
}

.ap__title {
  font-weight: 800;
  font-size: 1.7cqw;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.8cqw;
}

.ap__title .icon {
  width: 1.8cqw;
  height: 1.8cqw;
  color: var(--fx-ink-secondary);
}

.ap__row {
  display: flex;
  align-items: center;
  gap: 1cqw;
}

.ap__row--between {
  justify-content: space-between;
}

.ap__eyebrow {
  font-size: 1.05cqw;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fx-primary-elevated);
}

.ap__muted {
  color: var(--fx-ink-muted);
  font-size: 1.3cqw;
  font-weight: 600;
}

/* Order header */
.ap-order {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
}

.ap-order__icon {
  width: 5.2cqw;
  height: 5.2cqw;
  border-radius: 1.2cqw;
  background: var(--fx-primary-pale);
  color: var(--fx-primary-elevated);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.ap-order__icon .icon {
  width: 2.6cqw;
  height: 2.6cqw;
}

.ap-order__name {
  font-size: 2.3cqw;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 1cqw;
  flex-wrap: wrap;
}

.ap-order__meta {
  font-size: 1.3cqw;
  color: var(--fx-ink-muted);
  font-weight: 600;
  margin-top: 0.3cqw;
}

.ap-order__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1cqw;
}

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5cqw;
  height: 2.6cqw;
  padding: 0 1cqw;
  border-radius: 999px;
  font-size: 1.15cqw;
  font-weight: 700;
  white-space: nowrap;
  background: var(--fx-surface-muted);
  color: var(--fx-ink-secondary);
  border: 1px solid var(--fx-line);
}

.chip .icon {
  width: 1.3cqw;
  height: 1.3cqw;
}

.chip--blue {
  background: var(--fx-primary-pale);
  color: var(--fx-primary-elevated);
  border-color: transparent;
}

.chip--violet {
  background: #f3efff;
  color: #5b21b6;
  border-color: transparent;
}

.chip--success {
  background: var(--fx-success-pale);
  color: var(--fx-success-dark);
  border-color: transparent;
}

.chip--warning {
  background: var(--fx-warning-pale);
  color: var(--fx-warning-dark);
  border-color: transparent;
}

.chip--danger {
  background: var(--fx-danger-pale);
  color: var(--fx-danger-dark);
  border-color: transparent;
}

.chip--dot::before {
  content: '';
  width: 0.8cqw;
  height: 0.8cqw;
  border-radius: 50%;
  background: currentColor;
}

/* Mock buttons */
.mbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7cqw;
  height: 3.6cqw;
  padding: 0 1.6cqw;
  border-radius: 1cqw;
  font-size: 1.35cqw;
  font-weight: 800;
  white-space: nowrap;
  background: var(--fx-primary);
  color: #fff;
  box-shadow: 0 0.5cqw 1.2cqw var(--fx-primary-glow);
}

.mbtn .icon {
  width: 1.5cqw;
  height: 1.5cqw;
}

.mbtn--secondary {
  background: #fff;
  color: var(--fx-ink);
  border: 1px solid var(--fx-line-strong);
  box-shadow: none;
}

.mbtn--ghost {
  background: transparent;
  color: var(--fx-primary-elevated);
  box-shadow: none;
}

/* KPI tiles */
.kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4cqw;
}

.kpi {
  background: #fff;
  border-radius: 1.4cqw;
  border: 1px solid rgba(15, 23, 42, 0.07);
  padding: 1.4cqw;
  display: flex;
  gap: 1.1cqw;
  align-items: flex-start;
}

.kpi__icon {
  width: 3.4cqw;
  height: 3.4cqw;
  border-radius: 1cqw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--fx-primary-pale);
  color: var(--fx-primary-elevated);
}

.kpi__icon .icon {
  width: 1.8cqw;
  height: 1.8cqw;
}

.kpi__icon--green {
  background: var(--fx-success-pale);
  color: var(--fx-success-dark);
}

.kpi__icon--violet {
  background: #f3efff;
  color: #6d28d9;
}

.kpi__label {
  font-size: 1.2cqw;
  color: var(--fx-ink-muted);
  font-weight: 600;
}

.kpi__value {
  font-size: 2cqw;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 0.2cqw;
}

.kpi__sub {
  font-size: 1.1cqw;
  color: var(--fx-ink-muted);
  margin-top: 0.2cqw;
}

/* Progress */
.bar {
  height: 0.8cqw;
  border-radius: 999px;
  background: var(--fx-line);
  overflow: hidden;
  width: 100%;
}

.bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--fx-primary);
}

.bar--success > i {
  background: var(--fx-success);
}

.bar--warning > i {
  background: var(--fx-warning);
}

/* Table */
.mtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.3cqw;
}

.mtable th {
  text-align: left;
  font-size: 1.05cqw;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--fx-ink-strong);
  padding: 0.8cqw 0.8cqw;
  border-bottom: 1px solid var(--fx-line);
  white-space: nowrap;
}

.mtable td {
  padding: 1cqw 0.8cqw;
  border-bottom: 1px solid var(--fx-line);
  vertical-align: middle;
  white-space: nowrap;
}

.mtable tr:last-child td {
  border-bottom: 0;
}

.mtable .cell-id {
  font-weight: 700;
}

.mtable .cell-id small {
  display: block;
  font-weight: 600;
  font-size: 1.1cqw;
  color: var(--fx-ink-muted);
}

.mtable .cell-bar {
  min-width: 10cqw;
}

.mtable .cell-bar .bar {
  margin-top: 0.4cqw;
}

.mtable .cell-bar span {
  font-size: 1.1cqw;
  color: var(--fx-ink-muted);
  font-weight: 600;
}

.mtable .is-selected td {
  background: var(--fx-primary-pale);
}

/* Health ring */
.ring {
  --p: 60;
  --c: var(--fx-warning);
  width: 11cqw;
  height: 11cqw;
  border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--fx-line) 0);
  display: grid;
  place-items: center;
  margin: 0.6cqw auto;
}

.ring::before {
  content: '';
  grid-area: 1 / 1;
  width: 8.4cqw;
  height: 8.4cqw;
  border-radius: 50%;
  background: #fff;
}

.ring > span {
  grid-area: 1 / 1;
  font-size: 2.2cqw;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
  line-height: 1;
}

.ring > span small {
  display: block;
  font-size: 0.85cqw;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--fx-ink-muted);
  margin-top: 0.4cqw;
}

.ring--blue {
  --c: var(--fx-primary);
}

.ring--green {
  --c: var(--fx-success);
}

.signal-list {
  display: flex;
  flex-direction: column;
}

.signal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1cqw;
  padding: 0.9cqw 0;
  border-bottom: 1px solid var(--fx-line);
  font-size: 1.3cqw;
}

.signal:last-child {
  border-bottom: 0;
}

.signal strong {
  display: block;
  font-weight: 700;
}

.signal small {
  display: block;
  color: var(--fx-ink-muted);
  font-size: 1.1cqw;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.signal__state {
  display: inline-flex;
  align-items: center;
  gap: 0.5cqw;
  font-weight: 700;
  font-size: 1.15cqw;
  white-space: nowrap;
}

.signal__state::before {
  content: '';
  width: 0.9cqw;
  height: 0.9cqw;
  border-radius: 50%;
  background: currentColor;
}

.signal__state--ok {
  color: var(--fx-success-dark);
}

.signal__state--risk {
  color: var(--fx-warning-dark);
}

.signal__state--danger {
  color: var(--fx-danger-dark);
}

/* Notice */
.mnotice {
  display: flex;
  align-items: center;
  gap: 1cqw;
  padding: 1cqw 1.2cqw;
  border-radius: 1cqw;
  background: var(--fx-warning-pale);
  color: var(--fx-warning-dark);
  font-size: 1.25cqw;
  font-weight: 700;
}

.mnotice .icon {
  width: 1.6cqw;
  height: 1.6cqw;
  flex: none;
}

/* Tabs in mock */
.mtabs {
  display: flex;
  gap: 2cqw;
  border-bottom: 1px solid var(--fx-line);
  font-size: 1.35cqw;
  font-weight: 700;
  color: var(--fx-ink-secondary);
}

.mtabs span {
  padding: 0.6cqw 0 1cqw;
  display: inline-flex;
  align-items: center;
  gap: 0.6cqw;
}

.mtabs span b {
  font-size: 1cqw;
  font-weight: 700;
  padding: 0.1cqw 0.6cqw;
  border-radius: 999px;
  background: var(--fx-surface-muted);
  border: 1px solid var(--fx-line);
  color: var(--fx-ink-muted);
}

.mtabs span.is-active {
  color: var(--fx-primary-elevated);
  box-shadow: inset 0 -0.3cqw 0 var(--fx-primary);
}

/* ---------- Planning (day view on the work-center axis) ----------
 * After the Fluxion v2 planner: resource column with an axis switch, hour
 * header with the now line, shift bands in the lanes, schedule items coloured
 * by order line (state = fill style + badge), and the backlog rail on the right.
 */

.ptb {
  width: 3.6cqw;
  height: 3.6cqw;
  flex: none;
  border-radius: 1cqw;
  border: 1px solid var(--fx-line-strong);
  background: #fff;
  color: var(--fx-ink-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ptb .icon {
  width: 1.6cqw;
  height: 1.6cqw;
}

.ptb--primary {
  background: var(--fx-primary);
  border-color: var(--fx-primary);
  color: #fff;
  box-shadow: 0 0.5cqw 1.2cqw var(--fx-primary-glow);
}

.mseg--sm {
  font-size: 0.98cqw;
}

.mseg--sm span {
  padding: 0.35cqw 0.7cqw;
  white-space: nowrap;
}

.planner {
  --plan-res: 18cqw;
  --plan-head: 3.8cqw;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22cqw;
  padding: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.plan-board {
  position: relative;
  display: grid;
  grid-template-columns: var(--plan-res) minmax(0, 1fr);
  grid-template-rows: var(--plan-head);
  grid-auto-rows: minmax(6.2cqw, 1fr);
  min-height: 0;
  overflow: hidden;
}

.plan-axis {
  display: flex;
  align-items: center;
  padding: 0 0.6cqw;
  border-right: 1px solid var(--fx-line);
  border-bottom: 1px solid var(--fx-line);
}

.plan-head {
  position: relative;
  border-bottom: 1px solid var(--fx-line);
  overflow: hidden;
}

.plan-head span {
  position: absolute;
  bottom: 0.5cqw;
  height: 1.7cqw;
  line-height: 1.7cqw;
  padding-left: 0.5cqw;
  border-left: 1px solid var(--fx-line);
  font-size: 0.95cqw;
  font-weight: 700;
  color: var(--fx-ink-muted);
}

.plan-now-pill {
  position: absolute;
  top: 0.5cqw;
  transform: translateX(-50%);
  height: 1.9cqw;
  padding: 0 0.7cqw;
  border-radius: 999px;
  background: var(--fx-danger);
  color: #fff;
  font-size: 0.95cqw;
  font-weight: 800;
  font-style: normal;
  display: flex;
  align-items: center;
  z-index: 3;
}

.plan-res {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 0.9cqw 0 1.4cqw;
  border-right: 1px solid var(--fx-line);
  border-bottom: 1px solid var(--fx-line);
  min-width: 0;
}

.plan-res::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.45cqw;
  background: var(--hue);
}

.plan-res b {
  font-size: 1.2cqw;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-res small {
  font-size: 0.98cqw;
  font-weight: 600;
  color: var(--fx-ink-muted);
}

.plan-lane {
  position: relative;
  border-bottom: 1px solid var(--fx-line);
  overflow: hidden;
}

/* Track: the timeline inside the header and each lane. The hero's track is the
 * lane (8 hours); the demo's is twice as wide (16 hours) and scrolls. Hour
 * grid plus the shift bands: 06:00–10:00 and 10:30–14:00, and on the wide
 * track also the evening shift 14:30–18:00 and 18:30–22:00. */
.plan-track {
  --plan-span: 8;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.plan-track--lane {
  background-image:
    linear-gradient(90deg, var(--fx-line) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 163, 74, 0.09) 0 50%, transparent 50% 56.25%, rgba(22, 163, 74, 0.09) 56.25% 100%);
  background-size: calc(100% / var(--plan-span)) 100%, 100% 100%;
}

.plan-track--wide {
  --plan-span: 16;
}

.plan-track--wide.plan-track--lane {
  background-image:
    linear-gradient(90deg, var(--fx-line) 1px, transparent 1px),
    linear-gradient(
      90deg,
      rgba(22, 163, 74, 0.09) 0 25%,
      transparent 25% 28.125%,
      rgba(22, 163, 74, 0.09) 28.125% 50%,
      transparent 50% 53.125%,
      rgba(22, 163, 74, 0.09) 53.125% 75%,
      transparent 75% 78.125%,
      rgba(22, 163, 74, 0.09) 78.125% 100%
    );
}

/* The now line drawn per lane when the track scrolls (the demo), so it moves
 * with the schedule and clips with the lane. */
.plan-now-seg {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.22cqw;
  background: var(--fx-danger);
  z-index: 2;
  pointer-events: none;
}

.plan-now {
  position: absolute;
  top: var(--plan-head);
  bottom: 0;
  left: calc(var(--plan-res) + (100% - var(--plan-res)) * var(--now));
  width: 0.22cqw;
  background: var(--fx-danger);
  z-index: 2;
  pointer-events: none;
}

/* Schedule item: hue = order line, state = fill + badge. */
.sbar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 4.4cqw;
  min-width: 2.2cqw;
  box-sizing: border-box;
  border-radius: 0.8cqw;
  border: 0.18cqw solid var(--hue);
  background: #fff;
  color: var(--fx-ink);
  display: flex;
  align-items: center;
  gap: 0.5cqw;
  padding: 0 0.7cqw 0 0.45cqw;
  overflow: hidden;
  font-size: 1.05cqw;
  line-height: 1.15;
  white-space: nowrap;
}

.sbar__badge {
  width: 1.7cqw;
  height: 1.7cqw;
  flex: none;
  border-radius: 50%;
  background: #fff;
  color: var(--hue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 0.12cqw rgba(255, 255, 255, 0.9);
}

.sbar__badge .icon {
  width: 1.05cqw;
  height: 1.05cqw;
}

.sbar__text {
  display: flex;
  flex-direction: column;
  gap: 0.15cqw;
  min-width: 0;
}

.sbar__text b,
.sbar__text small {
  display: block;
  overflow: hidden;
  mask-image: linear-gradient(90deg, #000 calc(100% - 1cqw), transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1cqw), transparent);
}

.sbar__text b {
  font-weight: 800;
}

.sbar__text small {
  font-size: 0.9cqw;
  font-weight: 500;
  opacity: 0.85;
}

.sbar--xs {
  padding: 0;
  gap: 0;
  justify-content: center;
}

.sbar--live {
  background: var(--hue);
  background: color-mix(in srgb, var(--hue) 72%, #000);
  border-color: color-mix(in srgb, var(--hue) 72%, #000);
  color: #fff;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 0.3cqw 0.8cqw rgba(15, 23, 42, 0.22);
}

.sbar--done {
  background: color-mix(in srgb, var(--hue) 22%, #fff);
  border-color: color-mix(in srgb, var(--hue) 30%, #fff);
  color: var(--fx-ink-strong);
  opacity: 0.82;
}

.sbar--done .sbar__badge {
  background: var(--fx-success-dark);
  color: #fff;
}

.sbar--late .sbar__badge {
  background: var(--fx-warning);
  color: #fff;
}

/* Dotted projection from the now line to the planned end of a live item. */
.sbar-proj {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 4.4cqw;
  box-sizing: border-box;
  border: 0.18cqw dotted var(--hue);
  border-left: 0;
  border-radius: 0 0.8cqw 0.8cqw 0;
  background: color-mix(in srgb, var(--hue) 6%, transparent);
}

/* Backlog rail */
.plan-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid var(--fx-line);
  background: #fff;
}

.plan-rail__head {
  padding: 1.3cqw 1.3cqw 0.9cqw;
}

.plan-rail__title {
  font-size: 1.7cqw;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-top: 0.2cqw;
}

.plan-rail__head .ap__muted {
  font-size: 1cqw;
  margin-top: 0.2cqw;
}

.plan-tabs {
  display: flex;
  border-bottom: 1px solid var(--fx-line);
}

.plan-tabs span {
  flex: 1;
  height: 3cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5cqw;
  font-size: 1.05cqw;
  font-weight: 700;
  color: var(--fx-ink-secondary);
  border-bottom: 0.22cqw solid transparent;
  white-space: nowrap;
}

.plan-tabs span.is-active {
  color: var(--fx-primary-elevated);
  border-bottom-color: var(--fx-primary);
}

.plan-tabs .icon {
  width: 1.2cqw;
  height: 1.2cqw;
}

.plan-tabs em {
  font-style: normal;
  height: 1.6cqw;
  padding: 0 0.5cqw;
  border-radius: 999px;
  background: var(--fx-warning-pale);
  color: var(--fx-warning-dark);
  font-size: 0.9cqw;
  display: inline-flex;
  align-items: center;
}

.plan-rail__list {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 1cqw 1.1cqw;
  display: flex;
  flex-direction: column;
  gap: 0.7cqw;
}

.brow {
  display: flex;
  align-items: flex-start;
  gap: 0.7cqw;
  padding: 0.8cqw 0.9cqw;
  border: 1px solid var(--fx-line);
  border-radius: 1cqw;
  background: #fff;
}

.brow.is-selected {
  border-color: var(--fx-primary);
  background: var(--fx-primary-pale);
}

.brow__check {
  width: 1.3cqw;
  height: 1.3cqw;
  flex: none;
  margin-top: 0.15cqw;
  border: 0.14cqw solid var(--fx-line-strong);
  border-radius: 0.35cqw;
  background: #fff;
}

.brow__body {
  flex: 1;
  min-width: 0;
}

.brow__name {
  display: flex;
  align-items: center;
  gap: 0.45cqw;
  font-size: 1.1cqw;
  font-weight: 700;
  min-width: 0;
}

.brow__name i {
  width: 0.7cqw;
  height: 0.7cqw;
  flex: none;
  border-radius: 50%;
  background: var(--hue);
}

.brow__name span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.brow__meta {
  margin-top: 0.15cqw;
  font-size: 0.95cqw;
  font-weight: 600;
  color: var(--fx-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brow__meta--row {
  display: flex;
  align-items: center;
  gap: 0.5cqw;
  margin-top: 0.4cqw;
}

.brow__meta .bar {
  width: 4cqw;
  height: 0.4cqw;
  flex: none;
}

.brow__meta .bar > i {
  background: var(--fx-ink-secondary);
}

.brow__meta .icon {
  width: 1cqw;
  height: 1cqw;
  flex: none;
}

.brow__due,
.brow__late {
  display: inline-flex;
  align-items: center;
  gap: 0.3cqw;
}

.brow__late {
  color: var(--fx-warning-dark);
  font-weight: 700;
}

.plan-rail__foot {
  display: flex;
  gap: 0.7cqw;
  padding: 0.9cqw 1.1cqw 1.1cqw;
  border-top: 1px solid var(--fx-line);
}

.plan-rail__foot .mbtn {
  flex: 1;
  height: 3.4cqw;
  font-size: 1.15cqw;
  color: var(--fx-ink-muted);
}

/* ---------- Planning deep-dive demo ----------
 * A looping walkthrough used only in the "Käytä resurssit älykkäästi" deep
 * dive, never in the hero. A cursor clicks a backlog order, then the
 * auto-schedule button; a progress overlay runs, the results dialog opens,
 * the cursor clicks "view schedule", and the board scrolls to the afternoon
 * where the new stages now sit. Everything is a *reaction* to a click.
 * Every piece shares one timeline (`--plan-demo-cycle`, 16 s), so the
 * percentages below line up across elements:
 *
 *    6–11 %  cursor on the backlog row, clicks at 9 %
 *   19–24 %  cursor on auto-schedule, clicks at 22 %
 *   22–39 %  overlay with the progress card
 *   38–57 %  results dialog; cursor clicks "view schedule" at 50 %
 *   56–66 %  board scrolls six hours forward, new stages pulse once
 *   67–77 %  the red process chain draws on between the new stages
 *   90–96 %  board scrolls back, everything resets for the next loop
 *
 * The cursor's three stops are `--p1`…`--p3` (percentages of the `.app`
 * frame, which keeps a fixed aspect ratio).
 */
:root {
  --plan-demo-cycle: 16s;
}

.brow__check {
  position: relative;
}

.plan-demo-cursor {
  --p1x: 78.6%;
  --p1y: 45.4%;
  --p2x: 86.8%;
  --p2y: 93.2%;
  --p3x: 66.1%;
  --p3y: 75.8%;
  position: absolute;
  left: var(--p1x);
  top: var(--p1y);
  width: 5cqw;
  height: 5cqw;
  transform: translate(-15%, -10%);
  filter: drop-shadow(0 0.3cqw 0.4cqw rgba(15, 23, 42, 0.35));
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  animation: plan-demo-cursor var(--plan-demo-cycle) ease-in-out infinite;
}

.plan-demo-row {
  animation: plan-demo-select var(--plan-demo-cycle) ease-in-out infinite;
}

.plan-demo-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fx-primary);
  opacity: 0;
  animation: plan-demo-check-in var(--plan-demo-cycle) ease-in-out infinite;
}

.plan-demo-check .icon {
  width: 1cqw;
  height: 1cqw;
}

.plan-demo-auto {
  animation:
    plan-demo-auto var(--plan-demo-cycle) ease-in-out infinite,
    plan-demo-press var(--plan-demo-cycle) ease-in-out infinite;
}

.plan-demo-track {
  animation: plan-demo-scroll var(--plan-demo-cycle) ease-in-out infinite;
}

.plan-demo-newbar {
  opacity: 0;
  animation: plan-demo-newbar var(--plan-demo-cycle) ease-in-out infinite;
}

/* Process chain: the order's new stages linked stage to stage with the red
 * journey line the real planner draws, from the end of one bar to the start
 * of the next. The clip covers the lanes only; the SVG inside is as wide as
 * the tracks and scrolls with them, and each edge draws itself on once the
 * board has arrived on the afternoon. */
.plan-chain-clip {
  position: absolute;
  top: var(--plan-head);
  left: var(--plan-res);
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

.plan-chain {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  max-width: none; /* the base reset caps svg at 100% */
  height: 100%;
  overflow: visible;
}

/* User units: 1 = 1 % of the track width (about 0.94cqw), so the stroke
 * scales with the mockup like everything else. `pathLength="100"` on the
 * paths makes the dash draw-on independent of each edge's real length. */
.plan-chain path {
  fill: none;
  stroke: var(--fx-data-red);
  stroke-width: 0.27;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: plan-demo-chain var(--plan-demo-cycle) ease-in-out infinite;
}

/* Overlay: dims the whole app frame; the progress card and the dialog share
 * its centre cell and take turns. */
.plan-demo-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.42);
  opacity: 0;
  pointer-events: none;
  animation: plan-demo-overlay var(--plan-demo-cycle) ease-in-out infinite;
}

.plan-demo-loading,
.plan-demo-dialog {
  grid-area: 1 / 1;
  background: #fff;
  border-radius: 1.6cqw;
  box-shadow: 0 2.4cqw 6cqw rgba(15, 23, 42, 0.35);
  color: var(--fx-ink);
  opacity: 0;
}

.plan-demo-loading {
  display: flex;
  align-items: center;
  gap: 1.3cqw;
  padding: 1.7cqw 2.4cqw 1.7cqw 2cqw;
  animation: plan-demo-loading var(--plan-demo-cycle) ease-in-out infinite;
}

.plan-demo-loading b {
  display: block;
  font-size: 1.5cqw;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.plan-demo-loading small {
  display: block;
  margin-top: 0.25cqw;
  font-size: 1.05cqw;
  font-weight: 600;
  color: var(--fx-ink-muted);
}

.plan-demo-spinner {
  width: 2.6cqw;
  height: 2.6cqw;
  flex: none;
  border-radius: 50%;
  border: 0.32cqw solid var(--fx-primary-pale);
  border-top-color: var(--fx-primary);
  animation: plan-demo-spin 0.9s linear infinite;
}

.plan-demo-dialog {
  width: 52cqw;
  overflow: hidden;
  animation: plan-demo-dialog var(--plan-demo-cycle) ease-in-out infinite;
}

.plan-demo-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.3cqw 1.8cqw;
  border-bottom: 1px solid var(--fx-line);
  font-size: 1.55cqw;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.plan-demo-dialog__head .icon {
  width: 1.5cqw;
  height: 1.5cqw;
  color: var(--fx-ink-muted);
}

.plan-demo-result {
  display: flex;
  gap: 1cqw;
  padding: 1.5cqw 1.8cqw 0;
}

.plan-demo-result > .icon {
  width: 2.3cqw;
  height: 2.3cqw;
  flex: none;
  color: var(--fx-success);
}

.plan-demo-result b {
  display: block;
  font-size: 1.65cqw;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.plan-demo-result span,
.plan-demo-result em {
  display: block;
  font-size: 1.1cqw;
  font-weight: 700;
  line-height: 1.3;
}

.plan-demo-result span {
  margin-top: 0.4cqw;
  color: var(--fx-ink-secondary);
}

.plan-demo-result em {
  margin-top: 0.15cqw;
  font-style: normal;
  font-weight: 800;
  color: var(--fx-success-dark);
}

.plan-demo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6cqw;
  padding: 1.2cqw 1.8cqw 0;
}

.plan-demo-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1.2cqw 1.8cqw 0;
  border: 1px solid var(--fx-line);
  border-radius: 1cqw;
  background: var(--fx-surface-muted);
}

.plan-demo-metrics > div {
  padding: 0.8cqw 1.1cqw;
  border-left: 1px solid var(--fx-line);
  min-width: 0;
}

.plan-demo-metrics > div:first-child {
  border-left: 0;
}

.plan-demo-metrics small {
  display: block;
  font-size: 0.9cqw;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fx-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-demo-metrics b {
  display: block;
  margin-top: 0.15cqw;
  font-size: 1.6cqw;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.plan-demo-metrics > div:first-child b {
  color: var(--fx-success-dark);
}

.plan-demo-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5cqw;
  padding: 1.2cqw 1.8cqw 0;
}

.plan-demo-prow {
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  padding: 0.6cqw 0.9cqw;
  border: 1px solid var(--fx-line);
  border-radius: 0.9cqw;
}

.plan-demo-prow i {
  width: 0.9cqw;
  height: 0.9cqw;
  flex: none;
  border-radius: 50%;
  background: var(--hue);
}

.plan-demo-prow > div {
  flex: 1;
  min-width: 0;
}

.plan-demo-prow b,
.plan-demo-prow small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-demo-prow b {
  font-size: 1.1cqw;
  font-weight: 800;
}

.plan-demo-prow small {
  font-size: 0.98cqw;
  font-weight: 600;
  color: var(--fx-ink-muted);
}

.plan-demo-dialog__foot {
  display: flex;
  justify-content: flex-end;
  padding: 1.4cqw 1.8cqw 1.6cqw;
}

.plan-demo-view {
  animation: plan-demo-view-press var(--plan-demo-cycle) ease-in-out infinite;
}

/* Appear over the backlog row, click it, travel to the button, click that,
 * wait through the run, click "view schedule" in the dialog, and fade. */
@keyframes plan-demo-cursor {
  0%,
  3% {
    opacity: 0;
    left: var(--p1x);
    top: var(--p1y);
    transform: translate(-15%, -10%) scale(1);
  }
  6%,
  8% {
    opacity: 1;
    left: var(--p1x);
    top: var(--p1y);
    transform: translate(-15%, -10%) scale(1);
  }
  9% {
    transform: translate(-15%, -10%) scale(0.7);
  }
  11% {
    left: var(--p1x);
    top: var(--p1y);
    transform: translate(-15%, -10%) scale(1);
  }
  19%,
  21% {
    left: var(--p2x);
    top: var(--p2y);
    transform: translate(-15%, -10%) scale(1);
  }
  22% {
    transform: translate(-15%, -10%) scale(0.7);
  }
  24%,
  40% {
    left: var(--p2x);
    top: var(--p2y);
    transform: translate(-15%, -10%) scale(1);
  }
  47%,
  49% {
    left: var(--p3x);
    top: var(--p3y);
    transform: translate(-15%, -10%) scale(1);
  }
  50% {
    transform: translate(-15%, -10%) scale(0.7);
  }
  52%,
  55% {
    opacity: 1;
    left: var(--p3x);
    top: var(--p3y);
    transform: translate(-15%, -10%) scale(1);
  }
  58%,
  100% {
    opacity: 0;
    left: var(--p3x);
    top: var(--p3y);
    transform: translate(-15%, -10%) scale(1);
  }
}

/* Selects the instant the cursor clicks the row, stays checked through the
 * run and the result, clears out with everything else at the end. */
@keyframes plan-demo-select {
  0%,
  8% {
    border-color: var(--fx-line);
    background: #fff;
  }
  10%,
  96% {
    border-color: var(--fx-primary);
    background: var(--fx-primary-pale);
  }
  99%,
  100% {
    border-color: var(--fx-line);
    background: #fff;
  }
}

@keyframes plan-demo-check-in {
  0%,
  8% {
    opacity: 0;
    transform: scale(0.6);
  }
  10%,
  96% {
    opacity: 1;
    transform: scale(1);
  }
  99%,
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}

/* Lights up as the cursor arrives (a hover cue), fully on by the click. */
@keyframes plan-demo-auto {
  0%,
  18% {
    background: #fff;
    color: var(--fx-ink-muted);
    border-color: var(--fx-line-strong);
    box-shadow: none;
  }
  21%,
  96% {
    background: var(--fx-primary);
    color: #fff;
    border-color: var(--fx-primary);
    box-shadow: 0 0.5cqw 1.2cqw var(--fx-primary-glow);
  }
  99%,
  100% {
    background: #fff;
    color: var(--fx-ink-muted);
    border-color: var(--fx-line-strong);
    box-shadow: none;
  }
}

/* The press dip lands exactly on the cursor's own click-scale at 22%. */
@keyframes plan-demo-press {
  0%,
  21%,
  100% {
    transform: scale(1);
  }
  22% {
    transform: scale(0.92);
  }
  24% {
    transform: scale(1);
  }
}

/* Backdrop: in with the run, out when the dialog is dismissed. */
@keyframes plan-demo-overlay {
  0%,
  22% {
    opacity: 0;
  }
  24%,
  54% {
    opacity: 1;
  }
  57%,
  100% {
    opacity: 0;
  }
}

@keyframes plan-demo-loading {
  0%,
  22% {
    opacity: 0;
    transform: translateY(0.8cqw) scale(0.96);
  }
  24%,
  37% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  39%,
  100% {
    opacity: 0;
    transform: translateY(0) scale(0.98);
  }
}

@keyframes plan-demo-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes plan-demo-dialog {
  0%,
  38% {
    opacity: 0;
    transform: translateY(1.2cqw) scale(0.97);
  }
  41%,
  54% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  57%,
  100% {
    opacity: 0;
    transform: translateY(-0.6cqw) scale(0.98);
  }
}

/* The dialog's primary button dips under the cursor's click at 50%. */
@keyframes plan-demo-view-press {
  0%,
  49%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.94);
  }
  52% {
    transform: scale(1);
  }
}

/* The hour header and every lane share this: six hours forward (12:00–20:00
 * of the 16-hour track) once the dialog closes, back to the morning for the
 * next loop. */
@keyframes plan-demo-scroll {
  0%,
  56% {
    transform: translateX(0);
  }
  66%,
  90% {
    transform: translateX(-37.5%);
  }
  96%,
  100% {
    transform: translateX(0);
  }
}

/* A stage appears (off-screen, in the afternoon) as the schedule is shown,
 * pulses once as the board arrives on it, and clears once scrolled away. */
@keyframes plan-demo-newbar {
  0%,
  52% {
    opacity: 0;
    transform: translateY(calc(-50% + 0.8cqw)) scale(0.85);
    box-shadow: 0 0 0 0 transparent;
  }
  54%,
  66% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 0 0 transparent;
  }
  68% {
    box-shadow: 0 0 0 0.7cqw color-mix(in srgb, var(--hue) 35%, transparent);
  }
  78%,
  96% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 0 0 transparent;
  }
  98%,
  100% {
    opacity: 0;
    transform: translateY(calc(-50% + 0.8cqw)) scale(0.85);
    box-shadow: 0 0 0 0 transparent;
  }
}

/* Each edge draws on over ~1 s (the second follows by animation-delay), stays
 * through the hold and clears before the board scrolls back. */
@keyframes plan-demo-chain {
  0%,
  67% {
    stroke-dashoffset: 100;
    opacity: 1;
  }
  73%,
  93% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  96%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plan-demo-cursor,
  .plan-demo-row,
  .plan-demo-check,
  .plan-demo-auto,
  .plan-demo-track,
  .plan-demo-newbar,
  .plan-demo-overlay,
  .plan-demo-loading,
  .plan-demo-dialog,
  .plan-demo-spinner,
  .plan-demo-view,
  .plan-chain path {
    animation: none;
  }
  .plan-chain path {
    stroke-dashoffset: 0;
  }
  .plan-demo-cursor,
  .plan-demo-overlay {
    display: none;
  }
  .plan-demo-row {
    border-color: var(--fx-primary);
    background: var(--fx-primary-pale);
  }
  .plan-demo-check {
    opacity: 1;
  }
  .plan-demo-auto {
    background: var(--fx-primary);
    color: #fff;
    border-color: var(--fx-primary);
    box-shadow: 0 0.5cqw 1.2cqw var(--fx-primary-glow);
  }
  .plan-demo-track {
    transform: translateX(-37.5%);
  }
  .plan-demo-newbar {
    opacity: 1;
    transform: translateY(-50%);
  }
}

/* Toolbar */
.mtoolbar {
  display: flex;
  align-items: center;
  gap: 1cqw;
  padding: 1.1cqw 1.4cqw;
  background: #fff;
  border-radius: 1.4cqw;
  border: 1px solid rgba(15, 23, 42, 0.07);
}

.mtoolbar__title {
  font-weight: 800;
  font-size: 1.7cqw;
  letter-spacing: -0.01em;
}

.mtoolbar__spacer {
  flex: 1;
}

.mseg {
  display: inline-flex;
  padding: 0.3cqw;
  border-radius: 999px;
  background: var(--fx-surface-muted);
  border: 1px solid var(--fx-line);
  font-size: 1.15cqw;
  font-weight: 700;
}

.mseg span {
  padding: 0.4cqw 1.1cqw;
  border-radius: 999px;
  color: var(--fx-ink-secondary);
}

.mseg span.is-active {
  background: var(--fx-primary);
  color: #fff;
}

/* ---------- Phone (shop floor) ----------
 * Modern iPhone-style frame: thin symmetric bezels, titanium rim, Dynamic
 * Island, side buttons and a home indicator. Sizes are container units so the
 * device scales with its column.
 */

.phone {
  width: 100%;
  aspect-ratio: 9 / 18.6;
  background: #1c1c1e;
  border-radius: 14.5cqw;
  padding: 2.4cqw;
  position: relative;
  box-shadow:
    inset 0 0 0 0.35cqw #46474c,
    inset 0 0 0 1cqw #0a0a0b,
    inset 0 0 0 1.25cqw #2c2c2f,
    0 40px 80px rgba(15, 23, 42, 0.28),
    0 8px 20px rgba(15, 23, 42, 0.12);
}

/* Side buttons: volume (left) and power (right) */
.phone::before,
.phone::after {
  content: '';
  position: absolute;
  width: 0.9cqw;
  border-radius: 0.5cqw;
  background: linear-gradient(90deg, #3a3a3d, #1c1c1e);
}

.phone::before {
  left: -0.9cqw;
  top: 22%;
  height: 8%;
  box-shadow: 0 12.5cqw 0 0 #2a2a2d;
}

.phone::after {
  right: -0.9cqw;
  top: 27%;
  height: 12%;
  background: linear-gradient(270deg, #3a3a3d, #1c1c1e);
}

.phone__screen {
  background: var(--fx-canvas);
  border-radius: 12.2cqw;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 3.2cqw;
  color: var(--fx-ink);
  position: relative;
}

/* Dynamic Island */
.phone__island {
  position: absolute;
  top: 2.6cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 27cqw;
  height: 7.6cqw;
  border-radius: 999px;
  background: #050506;
  z-index: 3;
}

.phone__island::after {
  content: '';
  position: absolute;
  right: 2.2cqw;
  top: 50%;
  width: 2.6cqw;
  height: 2.6cqw;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 35% 35%, #2f3a5a, #0b1020 60%);
}

/* Home indicator */
.phone__home {
  position: absolute;
  bottom: 1.8cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 32cqw;
  height: 1.2cqw;
  border-radius: 999px;
  background: rgba(15, 18, 32, 0.85);
  z-index: 3;
}

.phone__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3.6cqw 8cqw 0 9cqw;
  font-size: 3.3cqw;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.phone__status-icons {
  display: inline-flex;
  align-items: center;
  gap: 1.4cqw;
}

.phone__status-icons svg {
  height: 2.8cqw;
  width: auto;
  display: block;
}

.phone__header {
  display: flex;
  align-items: center;
  gap: 2cqw;
  padding: 3.2cqw 4.4cqw 2.6cqw;
  background: #fff;
  border-bottom: 1px solid var(--fx-line);
  margin-top: 2.2cqw;
}

.phone__header img {
  height: 3.6cqw;
  width: auto;
}

.phone__header .icon {
  width: 4cqw;
  height: 4cqw;
  color: var(--fx-ink-secondary);
}

.phone__header .phone__timer {
  margin-left: auto;
  font-size: 2.8cqw;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 1cqw;
}

.phone__body {
  padding: 3.6cqw 4cqw;
  display: flex;
  flex-direction: column;
  gap: 3cqw;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.pcard {
  background: #fff;
  border-radius: 4cqw;
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 1.6cqw 3.2cqw rgba(0, 0, 0, 0.05);
  padding: 3.6cqw;
}

.pcard__eyebrow {
  font-size: 2.2cqw;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fx-primary-elevated);
}

.pcard__title {
  font-size: 4.6cqw;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 1cqw;
  line-height: 1.15;
}

.pcard__meta {
  font-size: 2.7cqw;
  color: var(--fx-ink-muted);
  font-weight: 600;
  margin-top: 1cqw;
}

.pcard__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6cqw;
  margin-top: 3cqw;
}

.pcard__chips .chip {
  height: 5.6cqw;
  font-size: 2.5cqw;
  padding: 0 2.4cqw;
  gap: 1.2cqw;
}

.pcard__chips .chip .icon {
  width: 2.8cqw;
  height: 2.8cqw;
}

.pcard__list {
  margin-top: 3.4cqw;
  display: flex;
  flex-direction: column;
  gap: 1.8cqw;
  font-size: 2.9cqw;
  color: var(--fx-ink-strong);
}

.pcard__list li {
  display: flex;
  gap: 2cqw;
  align-items: flex-start;
  line-height: 1.35;
}

.pcard__list li i {
  flex: none;
  width: 4.2cqw;
  height: 4.2cqw;
  border-radius: 50%;
  background: var(--fx-primary-pale);
  color: var(--fx-primary-elevated);
  font-style: normal;
  font-size: 2.2cqw;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.2cqw;
}

.pcard__list li.is-done i {
  background: var(--fx-success-pale);
  color: var(--fx-success-dark);
}

.pbtn {
  margin-top: 4cqw;
  height: 12cqw;
  border-radius: 3.4cqw;
  background: var(--fx-primary);
  color: #fff;
  font-size: 3.8cqw;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  box-shadow: 0 2cqw 4cqw var(--fx-primary-glow);
}

.pbtn .icon {
  width: 4.2cqw;
  height: 4.2cqw;
}

.pqueue {
  display: flex;
  flex-direction: column;
  gap: 2cqw;
}

.pqueue__title {
  font-size: 2.4cqw;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fx-ink-muted);
  padding: 0 1cqw;
}

.pqueue__item {
  display: flex;
  align-items: center;
  gap: 2.6cqw;
  background: #fff;
  border-radius: 3cqw;
  border: 1px solid rgba(15, 23, 42, 0.07);
  padding: 2.6cqw 3.2cqw;
  border-left: 1.4cqw solid var(--fx-data-teal);
}

.pqueue__item--amber {
  border-left-color: var(--fx-data-amber);
}

.pqueue__item--violet {
  border-left-color: var(--fx-data-violet);
}

.pqueue__item strong {
  display: block;
  font-size: 3cqw;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pqueue__item small {
  display: block;
  font-size: 2.4cqw;
  color: var(--fx-ink-muted);
  font-weight: 600;
}

.pqueue__item .icon {
  margin-left: auto;
  width: 3.6cqw;
  height: 3.6cqw;
  color: var(--fx-ink-faint);
  flex: none;
}

/* Phone summary tiles */
.pstats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4cqw;
}

.pstat {
  display: flex;
  flex-direction: column;
  gap: 0.6cqw;
  padding: 3cqw 3.4cqw;
  border-radius: 3cqw;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.07);
}

.pstat__label {
  font-size: 2.3cqw;
  font-weight: 600;
  color: var(--fx-ink-muted);
}

.pstat__value {
  font-size: 3.6cqw;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Phone bottom tab bar */
.phone__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 2.6cqw 2cqw 5.6cqw;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--fx-line);
  margin-top: auto;
}

.phone__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1cqw;
  font-size: 2.3cqw;
  font-weight: 700;
  color: var(--fx-ink-muted);
}

.phone__tab .icon {
  width: 4.6cqw;
  height: 4.6cqw;
}

.phone__tab.is-active {
  color: var(--fx-primary-elevated);
}

.phone__body {
  padding-bottom: 2cqw;
}

/* ---------- Tablet screen (CTA mascot) ----------
 * `tabletScreen()` reuses the phone classes above on the tablet the CTA
 * mascot holds. `.tablet-mascot` is a size container with the mascot image's
 * proportions (613 × 1024). The screen box is the flat 183.5 × 274.4 px
 * rectangle of the tablet's display in that image, placed at the display's
 * top-left corner and skewed onto it with a `matrix()` fitted by least squares
 * to the four drawn corners (±1.6 image px). Box and matrix are both in image
 * units, so the fit holds at any rendered size. The screen is an inline-size
 * container of its own, which keeps the phone classes' cqw sizes meaningful;
 * its own font-size and radius resolve against the wrapper instead.
 */

.tablet-mascot {
  position: relative;
  aspect-ratio: 613 / 1024;
  container-type: size;
}

.tablet-mascot .mascot {
  width: 100%;
  height: 100%;
}

.tablet-mascot__screen {
  position: absolute;
  left: 7.506%;
  top: 30.639%;
  width: 29.935%;
  height: 26.797%;
  transform-origin: 0 0;
  transform: matrix(0.98875, -0.14952, 0.21619, 0.97643, 0, 0);
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.6cqw;
  background: var(--fx-canvas);
  color: var(--fx-ink);
  font-size: 0.96cqw;
  line-height: 1.25;
}

.tablet-mascot__screen .phone__header {
  margin-top: 0;
  padding: 2.6cqw 4cqw 2.2cqw;
}

.tablet-mascot__screen .timer-dot {
  width: 2.2cqw;
  height: 2.2cqw;
  box-shadow: 0 0 0 0.6cqw rgba(220, 38, 38, 0.16);
}

.tablet-mascot__screen .phone__tabs {
  padding: 2.2cqw 2cqw 2.6cqw;
}

/* The 1px hairlines of the phone classes would be 2–3 % of this screen's width, so they go;
   the white-on-canvas contrast separates the surfaces (the queue's coloured bars stay). */
.tablet-mascot__screen .phone__header,
.tablet-mascot__screen .phone__tabs,
.tablet-mascot__screen .pcard {
  border-width: 0;
}

.tablet-mascot__screen .pqueue__item {
  border-width: 0 0 0 1.4cqw;
}

/* QR pattern */
.qr {
  width: 4.6cqw;
  height: 4.6cqw;
  flex: none;
}

.qr rect {
  fill: var(--fx-ink);
}

/* ---------- Inventory (picking) ---------- */

.pick {
  display: flex;
  flex-direction: column;
  gap: 1.2cqw;
}

.pick__item {
  display: grid;
  grid-template-columns: 3.4cqw minmax(0, 1fr) auto;
  gap: 1.2cqw;
  align-items: center;
  padding: 1.1cqw 1.2cqw;
  border-radius: 1.2cqw;
  border: 1px solid var(--fx-line);
  background: #fff;
}

.pick__item.is-done {
  background: var(--fx-success-pale);
  border-color: transparent;
}

.pick__check {
  width: 3.4cqw;
  height: 3.4cqw;
  border-radius: 50%;
  border: 0.25cqw solid var(--fx-line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.pick__check .icon {
  width: 1.8cqw;
  height: 1.8cqw;
  stroke-width: 3;
}

.is-done .pick__check {
  background: var(--fx-success);
  border-color: var(--fx-success);
}

.pick__name {
  font-weight: 700;
  font-size: 1.35cqw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pick__loc {
  display: flex;
  gap: 0.6cqw;
  margin-top: 0.4cqw;
  flex-wrap: wrap;
}

.pick__loc .chip {
  height: 2.3cqw;
  font-size: 1.05cqw;
  padding: 0 0.8cqw;
}

.pick__qty {
  font-weight: 800;
  font-size: 1.5cqw;
  text-align: right;
  white-space: nowrap;
}

.pick__qty small {
  display: block;
  font-size: 1.05cqw;
  font-weight: 600;
  color: var(--fx-ink-muted);
}

.scan {
  display: flex;
  align-items: center;
  gap: 1cqw;
  height: 4.4cqw;
  border-radius: 1.2cqw;
  border: 1px solid var(--fx-primary);
  background: #fff;
  padding: 0 1.2cqw;
  font-size: 1.35cqw;
  color: var(--fx-ink-muted);
  box-shadow: 0 0 0 0.5cqw var(--fx-primary-pale);
}

.scan .icon {
  width: 1.9cqw;
  height: 1.9cqw;
  color: var(--fx-primary);
}

.scan__caret {
  width: 0.2cqw;
  height: 2cqw;
  background: var(--fx-primary);
  animation: blink 1s steps(2) infinite;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scan__caret {
    animation: none;
  }
}

/* Stock summary */
.stock-rows {
  display: flex;
  flex-direction: column;
}

.stock-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 1.2cqw;
  align-items: center;
  padding: 0.9cqw 0;
  border-bottom: 1px solid var(--fx-line);
  font-size: 1.3cqw;
}

.stock-row:last-child {
  border-bottom: 0;
}

.stock-row strong {
  display: block;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stock-row small {
  display: block;
  color: var(--fx-ink-muted);
  font-weight: 600;
  font-size: 1.1cqw;
}

.stock-row .qty {
  font-weight: 800;
  text-align: right;
}

/* ---------- Resources (shifts) ---------- */

.shifts {
  display: grid;
  grid-template-columns: 11cqw repeat(5, minmax(0, 1fr));
  gap: 0.5cqw;
  font-size: 1.15cqw;
  align-items: center;
}

.shifts__head {
  text-align: center;
  font-weight: 800;
  color: var(--fx-ink-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 1cqw;
  padding-bottom: 0.4cqw;
}

.shifts__name {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.7cqw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shifts__name i {
  width: 2.4cqw;
  height: 2.4cqw;
  border-radius: 50%;
  flex: none;
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
}

.shifts__name i.a {
  background: linear-gradient(135deg, #93c5fd, #2563eb);
}
.shifts__name i.b {
  background: linear-gradient(135deg, #99f6e4, #0d9488);
}
.shifts__name i.c {
  background: linear-gradient(135deg, #fde68a, #d97706);
}
.shifts__name i.d {
  background: linear-gradient(135deg, #ddd6fe, #7c3aed);
}

.shift {
  height: 3cqw;
  border-radius: 0.7cqw;
  background: var(--fx-primary-pale);
  color: var(--fx-primary-elevated);
  font-weight: 700;
  font-size: 1cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
}

.shift--evening {
  background: #f3efff;
  color: #5b21b6;
}

.shift--off {
  background: var(--fx-surface-muted);
  color: var(--fx-ink-faint);
  border: 1px dashed var(--fx-line-strong);
}

.shift--absent {
  background: var(--fx-warning-pale);
  color: var(--fx-warning-dark);
}

.skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6cqw;
}

.skills .chip {
  height: 2.5cqw;
  font-size: 1.1cqw;
}

.wc-card {
  display: flex;
  gap: 1.2cqw;
  align-items: flex-start;
}

.wc-card__icon {
  width: 4.2cqw;
  height: 4.2cqw;
  border-radius: 1cqw;
  background: var(--fx-surface-muted);
  border: 1px solid var(--fx-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fx-ink-secondary);
  flex: none;
}

.wc-card__icon .icon {
  width: 2.2cqw;
  height: 2.2cqw;
}

.wc-card__name {
  font-weight: 800;
  font-size: 1.6cqw;
  letter-spacing: -0.01em;
}

.wc-card__meta {
  font-size: 1.15cqw;
  color: var(--fx-ink-muted);
  font-weight: 600;
}

.util {
  display: flex;
  flex-direction: column;
  gap: 0.8cqw;
}

.util__row {
  display: grid;
  grid-template-columns: 9cqw minmax(0, 1fr) 4cqw;
  gap: 1cqw;
  align-items: center;
  font-size: 1.2cqw;
  font-weight: 700;
}

.util__row span:last-child {
  text-align: right;
  color: var(--fx-ink-secondary);
}

.util__row .bar {
  height: 1.1cqw;
}

.timer-card {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
}

.timer-card__value {
  font-size: 2.4cqw;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.timer-card__label {
  font-size: 1.15cqw;
  font-weight: 600;
  color: var(--fx-ink-muted);
}

/* ---------- Knowledge (docs & comments) ---------- */

.doc {
  font-size: 1.3cqw;
  line-height: 1.5;
  color: var(--fx-ink-strong);
}

.doc h5 {
  margin: 0 0 0.5cqw;
  font-size: 1.45cqw;
  font-weight: 800;
  color: var(--fx-ink);
}

.doc ol,
.doc ul {
  margin: 0 0 1.2cqw;
  padding-left: 2cqw;
  list-style: revert;
}

.doc li + li {
  margin-top: 0.2cqw;
}

.files {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8cqw;
}

.file {
  display: inline-flex;
  align-items: center;
  gap: 0.7cqw;
  padding: 0.7cqw 1cqw;
  border-radius: 0.9cqw;
  border: 1px solid var(--fx-line);
  background: var(--fx-surface-muted);
  font-size: 1.15cqw;
  font-weight: 700;
  white-space: nowrap;
}

.file .icon {
  width: 1.5cqw;
  height: 1.5cqw;
  color: var(--fx-primary-elevated);
}

.file small {
  color: var(--fx-ink-muted);
  font-weight: 600;
}

.thread {
  display: flex;
  flex-direction: column;
  gap: 1.2cqw;
}

.comment {
  display: grid;
  grid-template-columns: 3.2cqw minmax(0, 1fr);
  gap: 1cqw;
}

.comment__avatar {
  width: 3.2cqw;
  height: 3.2cqw;
  border-radius: 50%;
  background: linear-gradient(135deg, #93c5fd, #2563eb);
}

.comment__avatar--b {
  background: linear-gradient(135deg, #fde68a, #d97706);
}

.comment__avatar--sys {
  background: var(--fx-surface-muted);
  border: 1px solid var(--fx-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fx-ink-muted);
}

.comment__avatar--sys .icon {
  width: 1.6cqw;
  height: 1.6cqw;
}

.comment__head {
  font-size: 1.2cqw;
  font-weight: 700;
}

.comment__head small {
  color: var(--fx-ink-muted);
  font-weight: 600;
  margin-left: 0.6cqw;
}

.comment__body {
  font-size: 1.3cqw;
  line-height: 1.45;
  color: var(--fx-ink-strong);
  margin-top: 0.2cqw;
}

.comment__body--sys {
  color: var(--fx-ink-muted);
  font-weight: 600;
  font-size: 1.2cqw;
}

.mention {
  color: var(--fx-primary-elevated);
  font-weight: 700;
}

.composer {
  display: flex;
  align-items: center;
  gap: 1cqw;
  height: 4cqw;
  padding: 0 1.2cqw;
  border-radius: 1.1cqw;
  border: 1px solid var(--fx-line-strong);
  background: var(--fx-surface-muted);
  font-size: 1.3cqw;
  color: var(--fx-ink-muted);
}

.composer .icon {
  width: 1.7cqw;
  height: 1.7cqw;
  margin-left: auto;
  color: var(--fx-primary);
}

/* Audit rows */
.audit {
  display: flex;
  flex-direction: column;
}

.audit__row {
  display: grid;
  grid-template-columns: 7cqw minmax(0, 1fr) auto;
  gap: 1cqw;
  align-items: center;
  padding: 0.8cqw 0;
  border-bottom: 1px solid var(--fx-line);
  font-size: 1.2cqw;
}

.audit__row:last-child {
  border-bottom: 0;
}

.audit__time {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--fx-ink-muted);
  font-size: 1.05cqw;
}

.audit__text strong {
  font-weight: 700;
}

.audit__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.hero-visual {
  position: relative;
}

.hero-visual .mock {
  position: relative;
  z-index: 1;
}

.hero-visual__phone {
  position: absolute;
  right: -4%;
  bottom: -10%;
  width: 24%;
  z-index: 2;
}

.hero-visual__glow {
  position: absolute;
  inset: -12% -8% -14% -8%;
  background: radial-gradient(50% 50% at 30% 30%, rgba(41, 98, 255, 0.16), transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.float-card {
  position: absolute;
  z-index: 3;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--fx-ink);
  white-space: nowrap;
}

.float-card small {
  display: block;
  font-weight: 600;
  color: var(--fx-ink-muted);
  font-size: 0.75rem;
}

.float-card .icon-tile {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.float-card .icon-tile .icon {
  width: 18px;
  height: 18px;
}

.float-card--tl {
  left: -5%;
  bottom: 6%;
}

.float-card--br {
  right: 4%;
  top: -3%;
}

.icon-tile--success {
  background: var(--fx-success-pale);
  color: var(--fx-success-dark);
}

.icon-tile--warning {
  background: var(--fx-warning-pale);
  color: var(--fx-warning-dark);
}

@media (max-width: 1024px) {
  .hero-visual__phone {
    display: none;
  }
  .float-card--tl {
    left: 0;
  }
  .float-card--br {
    right: 0;
  }
}

@media (max-width: 640px) {
  .float-card {
    display: none;
  }
}

/* ---------- NeXa pane ----------
 * The workspace assistant, as it docks at the right edge of the app: a white
 * pane with a toolbar, the conversation on the slate canvas and a composer.
 * Sizes are container units of the pane's own width.
 */

/* NeXa's avatar in the app's gradient ring (info → primary), with a thin white
 * gap. Scales with font-size so the same markup serves the pane and the page. */
.navatar {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  padding: 0.06em;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fx-info), var(--fx-primary));
  box-shadow: 0 0 0.16em rgba(41, 98, 255, 0.28);
  line-height: 0;
}

.navatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 0.045em solid #fff;
  object-fit: cover;
  background: #dbeafe;
}

.npane {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border-radius: 4cqw;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: var(--sh-hero);
  overflow: hidden;
  font-size: 3cqw;
  line-height: 1.4;
  color: var(--fx-ink);
  text-align: left;
  user-select: none;
}

.npane__bar {
  display: flex;
  align-items: center;
  gap: 2.2cqw;
  padding: 2.6cqw 3.4cqw;
  border-bottom: 1px solid var(--fx-line);
}

.npane__bar .navatar {
  font-size: 8cqw;
}

.npane__title {
  display: flex;
  flex-direction: column;
  font-weight: 800;
  font-size: 3.3cqw;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.npane__title small {
  font-size: 2.4cqw;
  font-weight: 600;
  color: var(--fx-ink-muted);
}

.npane__spacer {
  flex: 1;
}

.npane .ptb {
  width: 6.4cqw;
  height: 6.4cqw;
  border-radius: 1.8cqw;
}

.npane .ptb .icon {
  width: 3.2cqw;
  height: 3.2cqw;
}

.npane__body {
  display: flex;
  flex-direction: column;
  gap: 2.8cqw;
  padding: 3.6cqw 3.4cqw;
  background: var(--fx-canvas);
}

.nmsg--user {
  align-self: flex-end;
  max-width: 86%;
  padding: 2.2cqw 3.2cqw;
  border-radius: 3.4cqw 3.4cqw 1cqw 3.4cqw;
  background: var(--fx-primary);
  color: #fff;
  font-weight: 600;
}

.nmsg--tool {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  font-size: 2.6cqw;
  font-weight: 600;
  color: var(--fx-ink-muted);
}

.nmsg--tool .icon {
  width: 3.2cqw;
  height: 3.2cqw;
  color: var(--fx-success);
}

.nmsg--nexa {
  display: grid;
  grid-template-columns: 6.4cqw minmax(0, 1fr);
  gap: 2cqw;
  align-items: start;
}

.nmsg--nexa .navatar {
  font-size: 6.4cqw;
  margin-top: 0.4cqw;
}

.nmsg__bubble {
  display: flex;
  flex-direction: column;
  gap: 2cqw;
  padding: 2.6cqw 3.2cqw;
  border-radius: 1cqw 3.4cqw 3.4cqw 3.4cqw;
  background: #fff;
  border: 1px solid var(--fx-line);
  color: var(--fx-ink-strong);
}

.nmsg__bubble p {
  margin: 0;
}

.nsources {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2cqw;
}

.nsources .chip {
  height: 4.6cqw;
  padding: 0 1.8cqw;
  gap: 1cqw;
  font-size: 2.3cqw;
}

.nsources .chip .icon {
  width: 2.6cqw;
  height: 2.6cqw;
}

.nproposal {
  display: flex;
  flex-direction: column;
  gap: 1.6cqw;
  padding: 2.4cqw 2.8cqw;
  border-radius: 2.4cqw;
  background: var(--fx-primary-pale);
  border: 1px solid rgba(41, 98, 255, 0.18);
}

.nproposal__head {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  font-size: 2.9cqw;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.nproposal__head .icon {
  width: 3.4cqw;
  height: 3.4cqw;
  color: var(--fx-primary-elevated);
}

.nproposal__meta {
  font-size: 2.6cqw;
  font-weight: 600;
  color: var(--fx-ink-secondary);
}

.nproposal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 1.6cqw;
  margin-top: 0.6cqw;
}

.npane .mbtn {
  height: 6.6cqw;
  padding: 0 3cqw;
  gap: 1.2cqw;
  border-radius: 1.8cqw;
  font-size: 2.7cqw;
}

.npane .mbtn .icon {
  width: 3cqw;
  height: 3cqw;
}

.npane__composer {
  display: flex;
  align-items: center;
  gap: 2cqw;
  margin: 3cqw 3.4cqw 3.4cqw;
  height: 9cqw;
  padding: 0 1.6cqw 0 3cqw;
  border-radius: 2.6cqw;
  border: 1px solid var(--fx-line-strong);
  background: #fff;
  font-size: 2.9cqw;
  color: var(--fx-ink-muted);
}

.npane__composer > span:first-of-type {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.npane__composer .icon {
  width: 3.6cqw;
  height: 3.6cqw;
  color: var(--fx-ink-muted);
}

.npane__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6.4cqw;
  height: 6.4cqw;
  border-radius: 1.8cqw;
  background: var(--fx-primary);
  color: #fff;
  box-shadow: var(--sh-action);
}

.npane__send .icon {
  width: 3.2cqw;
  height: 3.2cqw;
  color: #fff;
}

/* ---------- NeXa automations panel ----------
 * Recurring watches and reports NeXa runs on a schedule or on an event, each
 * with its approval policy and an on/off switch. Container units of the
 * panel's width.
 */
.nauto {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border-radius: 3.2cqw;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: var(--sh-hero);
  overflow: hidden;
  font-size: 2.7cqw;
  line-height: 1.35;
  color: var(--fx-ink);
  text-align: left;
  user-select: none;
}

.nauto__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  padding: 3cqw 3.6cqw;
  border-bottom: 1px solid var(--fx-line);
}

.nauto__title {
  display: flex;
  flex-direction: column;
  font-weight: 800;
  font-size: 3.1cqw;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.nauto__title small {
  font-size: 2.3cqw;
  font-weight: 600;
  color: var(--fx-ink-muted);
}

.nauto .mbtn {
  height: 6cqw;
  padding: 0 2.6cqw;
  gap: 1cqw;
  border-radius: 1.6cqw;
  font-size: 2.5cqw;
}

.nauto .mbtn .icon {
  width: 2.8cqw;
  height: 2.8cqw;
}

.nauto__row {
  display: grid;
  grid-template-columns: 7cqw minmax(0, 1fr) auto;
  align-items: center;
  gap: 2.6cqw;
  padding: 2.8cqw 3.6cqw;
  border-bottom: 1px solid var(--fx-line);
}

.nauto__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 7cqw;
  height: 7cqw;
  border-radius: 2cqw;
  background: var(--fx-primary-pale);
  color: var(--fx-primary-elevated);
}

.nauto__icon .icon {
  width: 3.4cqw;
  height: 3.4cqw;
}

.nauto__body {
  display: flex;
  flex-direction: column;
  gap: 0.6cqw;
  min-width: 0;
}

.nauto__body strong {
  font-size: 2.9cqw;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.nauto__body small {
  display: flex;
  align-items: center;
  gap: 1cqw;
  font-size: 2.4cqw;
  font-weight: 600;
  color: var(--fx-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nauto__body small .icon {
  width: 2.6cqw;
  height: 2.6cqw;
  flex: none;
}

.nauto__switch {
  position: relative;
  flex: none;
  width: 8.4cqw;
  height: 4.8cqw;
  border-radius: 999px;
  background: var(--fx-primary);
}

.nauto__switch i {
  position: absolute;
  top: 0.6cqw;
  left: 4.2cqw;
  width: 3.6cqw;
  height: 3.6cqw;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.nauto__foot {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  padding: 2.6cqw 3.6cqw;
  font-size: 2.4cqw;
  font-weight: 600;
  color: var(--fx-ink-muted);
  background: var(--fx-surface-muted);
}

.nauto__foot .icon {
  width: 3cqw;
  height: 3cqw;
  color: var(--fx-success);
}

/* ---------- NeXa scenes (src/components/mockups/demos.ts) ----------
 * Timed states: the player adds is-on / is-off / is-moving / is-clicked at
 * the moments written in the markup. `.dstep` elements are absent until
 * they are on (chat messages, added rows, toasts); `.dfade` elements keep
 * their space and fade in; `.dhide` elements are present until they are off.
 */
.dstep:not(.is-on),
.dstep.is-off,
.dhide.is-off {
  display: none !important;
}

.dstep.is-on {
  animation: dstep-in 0.35s var(--ease-out) both;
}

@keyframes dstep-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.dfade {
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  transition:
    opacity 0.4s var(--ease-out),
    transform 0.4s var(--ease-out);
}

.dfade.is-on {
  opacity: 1;
  transform: none;
}

/* Typing indicator in NeXa's bubble. */
.nmsg__bubble--typing {
  padding: 2.2cqw 3cqw;
}

.ntyping {
  display: inline-flex;
  gap: 1cqw;
  padding: 0.6cqw 0;
}

.ntyping i {
  width: 1.7cqw;
  height: 1.7cqw;
  border-radius: 50%;
  background: var(--fx-ink-faint);
  animation: ntyping 1s ease-in-out infinite;
}

.ntyping i:nth-child(2) {
  animation-delay: 0.15s;
}

.ntyping i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes ntyping {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-40%);
    opacity: 1;
  }
}

/* The question being typed into the composer before it is sent. */
.npane__text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dtype {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  vertical-align: bottom;
  color: var(--fx-ink);
  font-weight: 600;
  animation: dtype 0.45s steps(28) both;
}

@keyframes dtype {
  from {
    max-width: 0;
  }
  to {
    max-width: 100%;
  }
}

/* Approval: the button presses, then the actions give way to a confirmation. */
.dbtn {
  position: relative;
  transition:
    transform 0.12s ease-out,
    filter 0.12s ease-out;
}

.dbtn.is-clicked {
  transform: scale(0.95);
  filter: brightness(0.9);
}

.nproposal__ok {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  margin-top: 0.6cqw;
  font-size: 2.6cqw;
  font-weight: 700;
  color: var(--fx-success-dark);
}

.nproposal__ok .icon {
  width: 3.2cqw;
  height: 3.2cqw;
}

/* The cursor lives inside the approve button, so it always lands on it. It
 * starts down-left of the button (inside the pane, over the composer) and
 * glides up onto it. */
.dcursor {
  position: absolute;
  z-index: 5;
  left: -36cqw;
  top: calc(100% + 12cqw);
  width: 5.6cqw;
  height: 5.6cqw;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  transition:
    left 0.75s ease-in-out,
    top 0.75s ease-in-out,
    opacity 0.25s ease-out,
    transform 0.12s ease-out;
}

.dcursor.is-on {
  opacity: 1;
}

.dcursor.is-moving {
  left: 44%;
  top: 40%;
}

.dcursor.is-clicked {
  transform: scale(0.85);
}

/* ----- App views (container units of the view column) ----- */
.dview {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.6cqw;
  padding: 3.2cqw 3.6cqw;
  background: #fff;
  border: 1px solid var(--fx-line);
  border-radius: 2.6cqw;
  font-size: 2.5cqw;
  line-height: 1.35;
  color: var(--fx-ink);
  text-align: left;
  user-select: none;
}

.dview__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6cqw;
}

.dview__heading {
  display: flex;
  flex-direction: column;
  margin-right: auto;
}

.dview__eyebrow {
  font-size: 2cqw;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fx-ink-muted);
}

.dview__title {
  font-size: 3.2cqw;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.dview__sub {
  margin-top: -1.4cqw;
  font-size: 2.3cqw;
  font-weight: 600;
  color: var(--fx-ink-muted);
}

.dview .chip {
  height: 4.6cqw;
  padding: 0 1.8cqw;
  gap: 0.9cqw;
  font-size: 2.2cqw;
}

.dview .chip .icon {
  width: 2.5cqw;
  height: 2.5cqw;
}

.dview__foot {
  display: flex;
  justify-content: space-between;
  font-size: 2.3cqw;
  font-weight: 700;
  color: var(--fx-ink-secondary);
}

.dview__foot b {
  color: var(--fx-ink);
}

/* Quote request lines */
.dtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 2.4cqw;
}

.dtable th {
  padding: 1cqw 0;
  border-bottom: 1px solid var(--fx-line);
  text-align: left;
  font-size: 1.9cqw;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fx-ink-muted);
}

.dtable td {
  padding: 2cqw 1cqw 2cqw 0;
  border-bottom: 1px solid var(--fx-line);
  font-weight: 600;
  vertical-align: top;
}

.dtable td small {
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  margin-top: 0.5cqw;
  font-size: 2cqw;
  font-weight: 600;
  color: var(--fx-primary-elevated);
}

.dtable td small .icon {
  width: 2.2cqw;
  height: 2.2cqw;
}

.dtable__new td {
  animation: dflash 2.4s ease-out both;
}

@keyframes dflash {
  from {
    background: var(--fx-primary-pale);
  }
  to {
    background: transparent;
  }
}

/* Planner lanes */
.dplan {
  display: flex;
  flex-direction: column;
  gap: 1.4cqw;
}

.dplan__row {
  display: grid;
  grid-template-columns: 24cqw minmax(0, 1fr);
  align-items: center;
  gap: 1.6cqw;
}

.dplan__name {
  font-size: 2.2cqw;
  font-weight: 700;
  color: var(--fx-ink-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dplan__axis {
  position: relative;
  height: 3cqw;
  font-size: 2cqw;
  font-weight: 700;
  color: var(--fx-ink-muted);
  font-variant-numeric: tabular-nums;
}

.dplan__axis span {
  position: absolute;
  top: 0;
}

.dplan__axis--days {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  text-align: center;
}

.dplan__axis--days span {
  position: static;
}

.dplan__track {
  position: relative;
  height: 7.2cqw;
  border-radius: 1.4cqw;
  background: var(--fx-surface-muted);
  border: 1px solid var(--fx-line);
}

.dplan__track--days {
  --col: calc(100% / var(--cols, 5));
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(var(--col) - 1px), var(--fx-line) calc(var(--col) - 1px) var(--col)),
    var(--fx-surface-muted);
}

.dplan__due {
  position: absolute;
  top: -1cqw;
  bottom: -1cqw;
  border-left: 0.4cqw dashed var(--fx-danger);
  opacity: 0.8;
}

.dbar {
  position: absolute;
  top: 1cqw;
  bottom: 1cqw;
  left: var(--l0);
  width: var(--w);
  display: flex;
  align-items: center;
  padding: 0 1.2cqw;
  border-radius: 1cqw;
  background: var(--fx-primary-pale);
  border: 1px solid rgba(41, 98, 255, 0.35);
  color: var(--fx-primary-elevated);
  font-size: 2cqw;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  transition:
    left 0.8s var(--ease-out),
    background-color 0.4s,
    border-color 0.4s,
    color 0.4s;
}

.dbar--late {
  background: var(--fx-danger-pale);
  border-color: rgba(220, 38, 38, 0.4);
  color: var(--fx-danger-dark);
}

/* Bars keep their order's hue, as in the planner; a late bar is red until it
 * lands on time. `.dbar--moves` slides from --l0 to --l1 when the plan changes. */
.dbar--amber {
  background: var(--fx-warning-pale);
  border-color: rgba(202, 138, 4, 0.45);
  color: var(--fx-warning-dark);
}

.dbar--violet {
  background: #f3e8ff;
  border-color: rgba(124, 58, 237, 0.4);
  color: #5b21b6;
}

.dbar--moves.is-on {
  left: var(--l1);
}

.dbar--late.is-on {
  background: var(--fx-success-pale);
  border-color: rgba(22, 163, 74, 0.4);
  color: var(--fx-success-dark);
}

.dplan__row--legend {
  margin-top: -0.4cqw;
}

.dplan__legend {
  display: inline-flex;
  align-items: center;
  gap: 0.8cqw;
  font-size: 2cqw;
  font-weight: 700;
  color: var(--fx-danger-dark);
}

.dplan__legend .icon {
  width: 2.4cqw;
  height: 2.4cqw;
}

/* Delivery list under the lanes */
.dorders {
  display: flex;
  flex-direction: column;
  gap: 0.8cqw;
}

.dorder {
  display: grid;
  grid-template-columns: 15cqw minmax(0, 1fr) auto;
  align-items: center;
  gap: 2cqw;
  padding: 1.4cqw 0;
  border-bottom: 1px solid var(--fx-line);
  font-size: 2.3cqw;
  font-weight: 600;
}

.dorder__code {
  font-variant-numeric: tabular-nums;
  color: var(--fx-ink-secondary);
}

.dorder__name small {
  display: block;
  font-size: 2cqw;
  color: var(--fx-ink-muted);
}

.dorder__status .chip {
  height: 4.2cqw;
  font-size: 2cqw;
}

.dview .chip--muted {
  background: var(--fx-surface-muted);
  color: var(--fx-ink-secondary);
}

/* Materials on a shop-floor task */
.dmats {
  display: flex;
  flex-direction: column;
}

.dmat {
  display: grid;
  grid-template-columns: 4.4cqw minmax(0, 1fr) auto;
  align-items: center;
  gap: 2cqw;
  padding: 1.8cqw 0;
  border-bottom: 1px solid var(--fx-line);
  font-size: 2.4cqw;
  font-weight: 600;
}

.dmat__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4cqw;
  height: 4.4cqw;
  border-radius: 50%;
  background: var(--fx-success-pale);
  color: var(--fx-success-dark);
}

.dmat__check .icon {
  width: 2.6cqw;
  height: 2.6cqw;
  stroke-width: 3;
}

.dmat__name small {
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  margin-top: 0.4cqw;
  font-size: 2cqw;
  color: var(--fx-primary-elevated);
}

.dmat__name small .icon {
  width: 2.2cqw;
  height: 2.2cqw;
}

.dmat__qty b {
  font-variant-numeric: tabular-nums;
  color: var(--fx-success-dark);
}

.dmat--missing:not(.is-on) .dmat__check {
  background: var(--fx-danger-pale);
  color: var(--fx-danger-dark);
}

.dmat--missing:not(.is-on) .icon-check,
.dmat--missing:not(.is-on) .dmat__name small,
.dmat--missing:not(.is-on) .dmat__qty b:last-child,
.dmat--missing.is-on .icon-circle-alert,
.dmat--missing.is-on .dmat__qty b:first-child {
  display: none;
}

.dmat--missing:not(.is-on) .dmat__qty b {
  color: var(--fx-danger-dark);
}

.dmat--missing.is-on .dmat__name small,
.dmat--missing.is-on .dmat__qty b:last-child {
  animation: dstep-in 0.35s var(--ease-out) both;
}

/* Weekly review */
.dview--report {
  min-height: 62cqw;
}

.dempty {
  position: absolute;
  inset: 40% 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.4cqw;
  font-size: 2.5cqw;
  font-weight: 700;
  color: var(--fx-ink-faint);
}

.dempty .icon {
  width: 4cqw;
  height: 4cqw;
}

.dkpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6cqw;
}

.dkpi {
  padding: 2cqw 2.2cqw;
  border-radius: 2cqw;
  background: var(--fx-surface-muted);
  border: 1px solid var(--fx-line);
}

.dkpi__label {
  display: block;
  font-size: 1.9cqw;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fx-ink-muted);
}

.dkpi__value {
  display: block;
  margin-top: 0.6cqw;
  font-size: 4.2cqw;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.dkpi__sub {
  display: block;
  margin-top: 0.5cqw;
  font-size: 2cqw;
  font-weight: 600;
  color: var(--fx-ink-secondary);
}

.dutil {
  display: flex;
  flex-direction: column;
  gap: 1.2cqw;
}

.dutil__row {
  display: grid;
  grid-template-columns: 26cqw minmax(0, 1fr) 8cqw;
  align-items: center;
  gap: 1.6cqw;
  font-size: 2.2cqw;
  font-weight: 700;
  color: var(--fx-ink-secondary);
}

.dutil__row b {
  text-align: right;
  color: var(--fx-ink);
  font-variant-numeric: tabular-nums;
}

.dutil__bar {
  display: block;
  height: 2cqw;
  border-radius: 999px;
  background: var(--fx-line);
  overflow: hidden;
}

.dutil__bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--fx-primary);
  transition: width 0.9s var(--ease-out) 0.2s;
}

.dutil.is-on .dutil__bar i {
  width: var(--p);
}

/* Shifts and the day's tasks */
.dshifts {
  display: grid;
  grid-template-columns: 20cqw repeat(5, minmax(0, 1fr));
  gap: 0.9cqw;
  align-items: center;
  font-size: 2.1cqw;
}

.dshifts__day {
  text-align: center;
  font-weight: 800;
  color: var(--fx-ink-muted);
}

.dshifts__name {
  font-weight: 700;
  color: var(--fx-ink-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dshift {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 6.2cqw;
  border-radius: 1.2cqw;
  font-weight: 800;
  background: var(--fx-primary-pale);
  color: var(--fx-primary-elevated);
  transition:
    background-color 0.4s,
    color 0.4s;
}

.dshift--evening {
  background: #f3e8ff;
  color: #6d28d9;
}

.dshift--off {
  background: var(--fx-surface-muted);
  color: var(--fx-ink-faint);
}

.dshift--swap span:last-child,
.dshift--swap.is-on span:first-child {
  display: none;
}

.dshift--swap.is-on {
  background: var(--fx-danger-pale);
  color: var(--fx-danger-dark);
}

.dshift--swap.is-on span:last-child {
  display: inline;
  animation: dstep-in 0.35s var(--ease-out) both;
}

.dtasks {
  display: flex;
  flex-direction: column;
  gap: 1cqw;
}

.dtask {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.6cqw;
  padding: 1.6cqw 2cqw;
  border-radius: 1.6cqw;
  background: var(--fx-surface-muted);
  border: 1px solid var(--fx-line);
  font-size: 2.3cqw;
  font-weight: 600;
}

.davatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.2cqw;
  height: 5.2cqw;
  border-radius: 50%;
  font-size: 1.9cqw;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #fde68a, #d97706);
}

.davatar--b {
  background: linear-gradient(135deg, #93c5fd, #2563eb);
}

.dtask:not(.is-on) .davatar--b,
.dtask.is-on .davatar--a {
  display: none;
}

.dtask.is-on .davatar--b {
  animation: dpop 0.4s var(--ease-out) both;
}

@keyframes dpop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* Confirmation toast at the bottom of the view column */
.dtoast-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3cqw;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.dtoast {
  display: inline-flex;
  align-items: center;
  gap: 1.4cqw;
  max-width: 92%;
  padding: 2cqw 3cqw;
  border-radius: 999px;
  background: var(--fx-dark);
  color: #fff;
  font-size: 2.3cqw;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
}

.dtoast .icon {
  width: 3cqw;
  height: 3cqw;
  color: #4ade80;
}

/* ---------- Production reports (shop floor spotlight) ----------
 * `reportHandling()`: the Anomalies list behind a scrim and the wide handling
 * dialog (fluxion_v2 board RD-01); `reportComposerPhone()`: the composer as
 * a bottom sheet on the phone. Sizes are cqw of the mockup container. */

.rp-list {
  display: flex;
  flex-direction: column;
  gap: 1.2cqw;
  flex: 1;
  min-height: 0;
}

.rp-list__bar {
  display: flex;
  align-items: center;
  gap: 1cqw;
  padding: 1cqw 1.4cqw;
}

.rp-list__bar--views {
  padding: 0.6cqw 1.4cqw;
}

.rp-seg {
  display: inline-flex;
  background: var(--fx-surface-muted);
  border: 1px solid var(--fx-line);
  border-radius: 1cqw;
  padding: 0.25cqw;
  font-size: 1.15cqw;
  font-weight: 700;
  color: var(--fx-ink-secondary);
}

.rp-seg span {
  padding: 0.45cqw 1.1cqw;
  border-radius: 0.8cqw;
  white-space: nowrap;
}

.rp-seg span.is-selected {
  background: #fff;
  color: var(--fx-ink);
  box-shadow: 0 0.2cqw 0.6cqw rgba(15, 23, 42, 0.08);
}

.rp-list__search {
  flex: 1;
  min-width: 0;
  height: 3.2cqw;
  border-radius: 0.9cqw;
  background: #fff;
  border: 1px solid var(--fx-line);
  font-size: 1.2cqw;
  color: var(--fx-ink-muted);
  display: flex;
  align-items: center;
  gap: 0.7cqw;
  padding: 0 1cqw;
  white-space: nowrap;
  overflow: hidden;
}

.rp-list__search .icon {
  width: 1.5cqw;
  height: 1.5cqw;
}

.rp-list__btn {
  height: 3.2cqw;
}

.rp-list__flag {
  width: 3.2cqw;
  padding: 0;
  border-color: rgba(41, 98, 255, 0.3);
  color: var(--fx-primary);
}

.rp-list__sort {
  margin-left: auto;
  font-size: 1.05cqw;
  color: var(--fx-ink-muted);
  font-weight: 700;
  white-space: nowrap;
}

.rp-list__sort b {
  color: var(--fx-ink);
}

.rp-list__rows {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.rp-grp {
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  padding: 0.8cqw 1.4cqw;
  font-size: 1.15cqw;
  font-weight: 800;
}

.rp-grp .icon {
  width: 1.5cqw;
  height: 1.5cqw;
}

.rp-grp b {
  margin-left: auto;
  font-size: 1cqw;
  padding: 0.1cqw 0.7cqw;
  border-radius: 999px;
  border: 1px solid currentColor;
  opacity: 0.85;
}

.rp-grp--danger {
  background: rgba(220, 38, 38, 0.07);
  color: var(--fx-danger-dark);
}

.rp-grp--warning {
  background: rgba(245, 158, 11, 0.09);
  color: var(--fx-warning-dark);
}

.rp-grp--info {
  background: rgba(56, 189, 248, 0.1);
  color: var(--fx-info-dark);
}

.rp-row {
  display: grid;
  grid-template-columns: 3cqw minmax(0, 1fr) 2cqw;
  gap: 1cqw;
  align-items: center;
  padding: 1cqw 1.4cqw;
  border-top: 1px solid var(--fx-line);
  font-size: 1.2cqw;
}

.rp-row > .icon {
  width: 1.6cqw;
  height: 1.6cqw;
  color: var(--fx-ink-faint);
}

.rp-row__mark {
  width: 3cqw;
  height: 3cqw;
  border-radius: 0.9cqw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fx-line);
}

.rp-row__mark .icon {
  width: 1.5cqw;
  height: 1.5cqw;
}

.rp-row__mark--danger {
  background: var(--fx-danger-pale);
  color: var(--fx-danger-dark);
  border-color: rgba(220, 38, 38, 0.25);
}

.rp-row__mark--warning {
  background: var(--fx-warning-pale);
  color: var(--fx-warning-dark);
  border-color: rgba(245, 158, 11, 0.3);
}

.rp-row__mark--info {
  background: var(--fx-info-pale);
  color: var(--fx-info-dark);
  border-color: rgba(56, 189, 248, 0.35);
}

.rp-row__body {
  min-width: 0;
}

.rp-row__src {
  font-size: 1cqw;
  color: var(--fx-ink-muted);
  font-weight: 700;
}

.rp-row__title {
  font-weight: 800;
  font-size: 1.25cqw;
}

.rp-row__title code {
  font-family: var(--font-mono);
  font-weight: 600;
}

.rp-row__text {
  color: var(--fx-ink-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rp-row__sup {
  font-size: 1cqw;
  color: var(--fx-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Modal barrier over the whole shell; the dialog is centred over the main area, shifted right to leave room for the phone. */
.rp-scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(0.25cqw);
}

.rp-overlay {
  position: absolute;
  inset: 0 0 0 8.5cqw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rp-dlg {
  width: 68cqw;
  margin-left: 8cqw;
  background: #fff;
  border-radius: 2.2cqw;
  box-shadow: 0 2.4cqw 6cqw rgba(15, 23, 42, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 1.25cqw;
}

.rp-dlg__hdr {
  display: flex;
  gap: 1.4cqw;
  padding: 2cqw 2cqw 0.6cqw 2.4cqw;
}

.rp-dlg__case {
  flex: 1;
  min-width: 0;
}

.rp-dlg__eyebrow {
  font-size: 0.95cqw;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fx-ink-muted);
}

.rp-dlg__title {
  font-size: 2.3cqw;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-family: var(--font-mono);
  margin-top: 0.2cqw;
  line-height: 1.1;
}

.rp-dlg__close {
  margin-left: auto;
  width: 3.6cqw;
  height: 3.6cqw;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fx-ink-secondary);
  flex: none;
}

.rp-dlg__close .icon {
  width: 1.9cqw;
  height: 1.9cqw;
}

/* Status track: current step filled, later steps dashed, Closed behind a separator. */
.rp-track {
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  margin-top: 1.2cqw;
  font-size: 1.15cqw;
  font-weight: 700;
  color: var(--fx-ink-muted);
  white-space: nowrap;
}

.rp-track__step {
  display: inline-flex;
  align-items: center;
  gap: 0.5cqw;
}

.rp-track__step.is-current {
  color: var(--fx-ink);
  font-weight: 800;
}

.rp-track__mark {
  width: 1.6cqw;
  height: 1.6cqw;
  border-radius: 50%;
  border: 0.18cqw dashed var(--fx-line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.rp-track__step.is-current .rp-track__mark {
  background: var(--fx-ink);
  border: 0.18cqw solid var(--fx-ink);
}

.rp-track__step.is-current .rp-track__mark::after {
  content: '';
  width: 0.55cqw;
  height: 0.55cqw;
  border-radius: 50%;
  background: #fff;
}

.rp-track__conn {
  width: 2.2cqw;
  height: 0.18cqw;
  flex: none;
  background: repeating-linear-gradient(90deg, var(--fx-line-strong) 0 0.4cqw, transparent 0.4cqw 0.8cqw);
}

.rp-track__sep {
  width: 1px;
  height: 1.8cqw;
  background: var(--fx-line-strong);
  margin: 0 0.6cqw;
  flex: none;
}

.rp-dlg__chips {
  display: flex;
  align-items: center;
  gap: 0.7cqw;
  margin-top: 1.1cqw;
  flex-wrap: wrap;
}

.rp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5cqw;
  height: 2.7cqw;
  padding: 0 1cqw;
  border-radius: 0.9cqw;
  font-size: 1.15cqw;
  font-weight: 800;
  border: 1px solid;
}

.rp-pill .icon {
  width: 1.35cqw;
  height: 1.35cqw;
}

.rp-pill--warning {
  background: var(--fx-warning-pale);
  color: var(--fx-warning-dark);
  border-color: rgba(245, 158, 11, 0.28);
}

.rp-tchip {
  display: inline-flex;
  align-items: center;
  gap: 0.4cqw;
  height: 2.7cqw;
  padding: 0 1.1cqw;
  border-radius: 999px;
  font-size: 1.15cqw;
  font-weight: 700;
  background: var(--fx-surface-muted);
  color: var(--fx-ink-secondary);
  border: 1px solid var(--fx-line);
}

.rp-tchip .icon {
  width: 1.3cqw;
  height: 1.3cqw;
}

.rp-who {
  display: flex;
  align-items: center;
  gap: 0.7cqw;
  margin-top: 1cqw;
  font-size: 1.1cqw;
  color: var(--fx-ink-muted);
  white-space: nowrap;
  overflow: hidden;
}

.rp-who b {
  color: var(--fx-ink);
}

.rp-av {
  width: 2.2cqw;
  height: 2.2cqw;
  border-radius: 50%;
  background: linear-gradient(135deg, #7399ff, #2962ff);
  color: #fff;
  font-size: 0.85cqw;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  letter-spacing: 0.02em;
}

.rp-av--none {
  width: 3.2cqw;
  height: 3.2cqw;
  background: var(--fx-surface-muted);
  border: 0.18cqw dashed var(--fx-line-strong);
  color: var(--fx-ink-faint);
}

.rp-av--none .icon {
  width: 1.5cqw;
  height: 1.5cqw;
}

.rp-dlg__body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  border-top: 1px solid var(--fx-line);
  margin-top: 1.2cqw;
}

.rp-pane {
  padding: 1.8cqw 2.4cqw 2.2cqw;
  display: flex;
  flex-direction: column;
  gap: 1.6cqw;
  min-width: 0;
}

.rp-pane--side {
  border-left: 1px solid var(--fx-line);
  background: var(--fx-canvas-subtle);
}

.rp-eyebrow {
  font-size: 0.9cqw;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fx-ink-muted);
  display: flex;
  align-items: center;
  gap: 0.6cqw;
}

.rp-eyebrow b {
  font-weight: 700;
  color: var(--fx-ink-faint);
  letter-spacing: 0;
}

.rp-desc {
  margin: 0;
  font-size: 1.3cqw;
  line-height: 1.5;
  color: var(--fx-ink-strong);
}

.rp-media {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9cqw;
  margin-top: 0.9cqw;
}

/* Media tiles; the two photos are drawn with CSS (a drive display with the fault code, a clogged fan filter). */
.rp-tile {
  aspect-ratio: 4 / 3;
  border-radius: 1cqw;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--fx-line);
  background: var(--fx-surface-muted);
}

.rp-tile--drive {
  background: linear-gradient(160deg, #334155 0%, #161a2c 100%);
}

.rp-tile__screen {
  position: absolute;
  left: 16%;
  top: 14%;
  width: 68%;
  height: 72%;
  border-radius: 0.6cqw;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3cqw;
}

.rp-tile__screen b {
  font-family: var(--font-mono);
  font-size: 2cqw;
  color: #fde68a;
  letter-spacing: 0.05em;
}

.rp-tile__screen small {
  font-size: 0.8cqw;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.rp-tile--filter {
  background: radial-gradient(circle at 50% 50%, #cbd5e1 0 14%, #94a3b8 15% 18%, #e2e8f0 19% 100%);
}

.rp-tile--filter::after {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 0.5cqw solid #64748b;
  background: repeating-linear-gradient(45deg, #94a3b8 0 0.35cqw, #cbd5e1 0.35cqw 1cqw);
}

.rp-tile--add {
  border: 0.18cqw dashed var(--fx-line-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3cqw;
  color: var(--fx-ink-muted);
  font-size: 1cqw;
  font-weight: 700;
  background: #fff;
}

.rp-tile--add .icon {
  width: 1.8cqw;
  height: 1.8cqw;
}

.rp-echips {
  display: flex;
  align-items: center;
  gap: 0.7cqw;
  flex-wrap: wrap;
  margin-top: 0.9cqw;
}

.rp-echip {
  display: inline-flex;
  align-items: center;
  gap: 0.6cqw;
  height: 3cqw;
  padding: 0 0.6cqw 0 1cqw;
  border-radius: 999px;
  border: 1px solid var(--fx-line-strong);
  background: #fff;
  font-size: 1.15cqw;
  font-weight: 700;
  color: var(--fx-ink);
}

.rp-echip .icon {
  width: 1.4cqw;
  height: 1.4cqw;
  color: var(--fx-ink-secondary);
}

.rp-echip .icon-x {
  width: 1.2cqw;
  height: 1.2cqw;
  color: var(--fx-ink-muted);
  margin-left: 0.2cqw;
}

.rp-plus {
  width: 3cqw;
  height: 3cqw;
  border-radius: 50%;
  border: 1px solid var(--fx-line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fx-primary);
}

.rp-plus .icon {
  width: 1.5cqw;
  height: 1.5cqw;
}

.rp-disc {
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  margin-top: 1cqw;
  font-size: 1.1cqw;
  font-weight: 700;
  color: var(--fx-ink-secondary);
}

.rp-disc .icon {
  width: 1.4cqw;
  height: 1.4cqw;
}

.rp-disc span {
  color: var(--fx-ink-faint);
  font-weight: 600;
}

.rp-hcard {
  background: #fff;
  border: 1px solid var(--fx-line);
  border-radius: 1.4cqw;
  padding: 1.4cqw 1.6cqw;
  box-shadow: 0 0.4cqw 1cqw rgba(15, 23, 42, 0.04);
}

.rp-hcard__top {
  display: flex;
  align-items: center;
}

.rp-hcard__top > .icon {
  margin-left: auto;
  width: 1.6cqw;
  height: 1.6cqw;
  color: var(--fx-ink-muted);
}

.rp-owner {
  display: flex;
  align-items: center;
  gap: 1cqw;
  margin-top: 1.1cqw;
}

.rp-owner__label {
  font-size: 0.95cqw;
  color: var(--fx-ink-muted);
  font-weight: 700;
}

.rp-owner__value {
  font-size: 1.25cqw;
  font-weight: 700;
  color: var(--fx-ink-secondary);
}

.rp-acts {
  display: flex;
  gap: 0.8cqw;
  margin-top: 1.3cqw;
  flex-wrap: wrap;
}

.rp-acts .mbtn {
  height: 3.4cqw;
  font-size: 1.25cqw;
  padding: 0 1.4cqw;
}

.rp-day {
  font-size: 1cqw;
  color: var(--fx-ink-muted);
  font-weight: 700;
  margin: 0.9cqw 0 0.8cqw;
}

.rp-ev {
  display: flex;
  gap: 0.9cqw;
  align-items: flex-start;
  font-size: 1.1cqw;
  color: var(--fx-ink-secondary);
  line-height: 1.4;
}

.rp-ev > .icon {
  width: 1.4cqw;
  height: 1.4cqw;
  color: var(--fx-ink-muted);
  margin-top: 0.15cqw;
}

.rp-ev b {
  color: var(--fx-ink);
}

.rp-ev small {
  display: block;
  color: var(--fx-ink-muted);
  font-size: 1cqw;
}

.rp-comp {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  height: 3.6cqw;
  border: 1px solid var(--fx-line-strong);
  border-radius: 1cqw;
  padding: 0 1.1cqw;
  color: var(--fx-ink-faint);
  font-size: 1.15cqw;
  background: #fff;
}

.rp-comp .icon {
  width: 1.5cqw;
  height: 1.5cqw;
  margin-left: auto;
  color: var(--fx-ink-muted);
}

/* Phone: the composer bottom sheet over the task card. */
.rp-phone__body {
  position: relative;
}

.rp-pscrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.34);
  z-index: 4;
}

.rp-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background: #fff;
  border-radius: 7cqw 7cqw 0 0;
  box-shadow: 0 -3cqw 8cqw rgba(15, 23, 42, 0.2);
  padding: 2.4cqw 4.4cqw 8cqw;
  display: flex;
  flex-direction: column;
  gap: 2.6cqw;
}

.rp-sheet__grab {
  width: 11cqw;
  height: 1.1cqw;
  border-radius: 999px;
  background: var(--fx-line-strong);
  margin: 0 auto 0.6cqw;
}

.rp-sheet__eyebrow {
  font-size: 2.3cqw;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fx-ink-muted);
}

.rp-sheet__title {
  font-size: 5.2cqw;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 0.6cqw;
  display: flex;
  align-items: center;
}

.rp-sheet__title .icon {
  margin-left: auto;
  width: 5cqw;
  height: 5cqw;
  color: var(--fx-ink-secondary);
}

.rp-sheet__sub {
  font-size: 2.9cqw;
  color: var(--fx-ink-muted);
  margin-top: 1cqw;
  line-height: 1.4;
}

.rp-fld {
  border: 1px solid var(--fx-line-strong);
  border-radius: 3cqw;
  padding: 2.6cqw 3cqw 2cqw;
  background: #fff;
}

.rp-fld__label {
  font-size: 2.4cqw;
  font-weight: 700;
  color: var(--fx-ink-secondary);
}

.rp-fld__label i {
  color: var(--fx-danger);
  font-style: normal;
}

.rp-fld__text {
  font-size: 3.1cqw;
  line-height: 1.45;
  margin-top: 1.2cqw;
  color: var(--fx-ink);
}

.rp-fld__text::after {
  content: '';
  display: inline-block;
  width: 0.4cqw;
  height: 3.4cqw;
  background: var(--fx-primary);
  vertical-align: -0.7cqw;
  margin-left: 0.3cqw;
}

.rp-fld__bar {
  display: flex;
  align-items: center;
  gap: 1cqw;
  margin-top: 2cqw;
}

.rp-fld__btn {
  width: 7.6cqw;
  height: 7.6cqw;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fx-ink-secondary);
}

.rp-fld__btn .icon {
  width: 4cqw;
  height: 4cqw;
}

.rp-fld__btn--mic {
  margin-left: auto;
  background: var(--fx-primary-pale);
  color: var(--fx-primary-elevated);
}

.rp-fld__count {
  font-size: 2.2cqw;
  color: var(--fx-ink-faint);
  font-variant-numeric: tabular-nums;
}

.rp-thumbs {
  display: flex;
  gap: 2cqw;
}

.rp-thumbs .rp-tile {
  width: 18cqw;
  aspect-ratio: 1;
  border-radius: 2.4cqw;
}

.rp-thumbs .rp-tile__screen b {
  font-size: 4.4cqw;
}

.rp-thumbs .rp-tile__screen small {
  font-size: 1.8cqw;
}

.rp-thumbs .rp-tile--filter::after {
  border-width: 1.2cqw;
  background: repeating-linear-gradient(45deg, #94a3b8 0 0.9cqw, #cbd5e1 0.9cqw 2.4cqw);
}

.rp-pchips {
  display: flex;
  gap: 1.6cqw;
  flex-wrap: wrap;
}

.rp-pchip {
  display: inline-flex;
  align-items: center;
  gap: 1.2cqw;
  height: 6.4cqw;
  padding: 0 1.6cqw 0 2.4cqw;
  border-radius: 999px;
  border: 1px solid var(--fx-line-strong);
  font-size: 2.7cqw;
  font-weight: 700;
  background: #fff;
}

.rp-pchip .icon {
  width: 3.2cqw;
  height: 3.2cqw;
  color: var(--fx-ink-secondary);
}

.rp-pchip .icon-x {
  width: 2.8cqw;
  height: 2.8cqw;
  color: var(--fx-ink-muted);
}

.rp-exp {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  padding: 2.6cqw 3cqw;
  border: 1px solid var(--fx-line);
  border-radius: 3cqw;
  background: var(--fx-surface-muted);
}

.rp-exp > .icon {
  width: 4cqw;
  height: 4cqw;
  color: var(--fx-ink-secondary);
}

.rp-exp > .icon-chevron-down {
  margin-left: auto;
  color: var(--fx-ink-faint);
}

.rp-exp__title {
  font-size: 3cqw;
  font-weight: 700;
}

.rp-exp__sub {
  font-size: 2.5cqw;
  color: var(--fx-ink-muted);
  margin-top: 0.3cqw;
}

.rp-sheet .pbtn {
  margin-top: 0;
}

.rp-cancel {
  text-align: center;
  font-size: 3cqw;
  font-weight: 700;
  color: var(--fx-ink-secondary);
  margin-top: -0.6cqw;
}

/* Page-specific layouts. */

/* ---------- Home hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(40px, 6vw, 88px) clamp(48px, 7vw, 104px);
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(41, 98, 255, 0.1), transparent 60%),
    radial-gradient(50% 40% at 0% 100%, rgba(20, 184, 166, 0.08), transparent 60%),
    linear-gradient(180deg, var(--fx-canvas) 0%, var(--fx-surface) 100%);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 70% 40%, #000 10%, transparent 65%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.hero__copy {
  max-width: 600px;
}

.hero__copy .eyebrow {
  margin-bottom: 20px;
}

.hero__copy .lead {
  margin-top: 22px;
  max-width: 560px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero__copy .kicker-list {
  margin-top: 28px;
}

.hero__visual {
  position: relative;
  padding: 24px 0 40px 8px;
}

@media (max-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero__copy {
    max-width: 680px;
  }
  .hero__visual {
    padding: 8px 0 16px;
  }
}

/* ---------- Industries (home) ---------- */

.sectors-section {
  border-top: 1px solid var(--fx-line);
  border-bottom: 1px solid var(--fx-line);
}

.sectors__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 32px;
}

.sectors__head .section-head {
  max-width: 640px;
}

.sectors__link {
  margin-bottom: 6px;
  white-space: nowrap;
}

.sectors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 1024px) {
  .sectors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

/* On phones the home strip becomes a swipeable row: the next card peeks in
 * from the right edge so the row reads as scrollable without any chrome. */
@media (max-width: 640px) {
  .sectors:not(.sectors--static) {
    display: flex;
    gap: 12px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sectors:not(.sectors--static)::-webkit-scrollbar {
    display: none;
  }
  .sectors:not(.sectors--static) > .sector {
    flex: 0 0 min(78vw, 320px);
    scroll-snap-align: start;
  }
  .sectors--static {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sector__link,
.sector-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--r-lg);
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
  color: var(--fx-ink);
  text-decoration: none;
  overflow: hidden;
  transition:
    box-shadow var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.sector__link:hover {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: var(--sh-card-hover);
  border-color: var(--fx-line-strong);
}

.sector__link:focus-visible {
  outline: 2px solid var(--fx-primary);
  outline-offset: 3px;
}

/* Illustration area */

.sector__media {
  position: relative;
  display: block;
  border-bottom: 1px solid var(--fx-line);
}

.sector__art {
  --art-a: var(--fx-primary-pale);
  --art-b: #dfe7ff;
  --art-dot: rgba(15, 23, 42, 0.12);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    radial-gradient(var(--art-dot) 1px, transparent 1.2px) 0 0 / 14px 14px,
    linear-gradient(135deg, var(--art-a), var(--art-b));
}

.sector__art::after {
  /* Soft "floor" the object sits on. */
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 8%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15, 23, 42, 0.16), transparent);
  pointer-events: none;
}

.sector__art .illo {
  position: relative;
  z-index: 1;
  width: 70%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 14px rgba(15, 23, 42, 0.14));
  transition: transform 320ms var(--ease-out);
}

.sector__link:hover .sector__art .illo {
  transform: translateY(-5px) scale(1.04);
}

/* Small "alive" details that only run while the card is hovered. */
.illo .illo-spin {
  transform-box: fill-box;
  transform-origin: center;
}

.sector__link:hover .illo-spin {
  animation: illo-spin 7s linear infinite;
}

.sector__link:hover .illo-spin--reverse {
  animation-direction: reverse;
  animation-duration: 5.25s;
}

.sector__link:hover .illo-flow {
  animation: illo-flow 1.2s linear infinite;
}

.sector__link:hover .illo-blink {
  animation: illo-blink 1.4s ease-in-out infinite;
}

.illo .illo-twinkle {
  transform-box: fill-box;
  transform-origin: center;
}

.sector__link:hover .illo-twinkle {
  animation: illo-twinkle 1.6s ease-in-out infinite;
}

/* Machining: the end mill travels along the channel while it "spins". */
.illo .illo-mill {
  transform-box: fill-box;
  transform-origin: center;
}

.sector__link:hover .illo-mill {
  animation: illo-mill-move 2.6s ease-in-out infinite;
}

.sector__link:hover .illo-mill-spin {
  animation: illo-mill-spin 0.6s linear infinite;
}

/* Electronics: the status LED blinks (hard on/off, like a real one) while
 * the card is hovered; at rest it simply sits lit. */
.sector__link:hover .illo-led {
  animation: illo-led 1.2s linear infinite;
}

/* Equipment: three different cabinet builds share one slot and take turns,
 * carousel-style, on hover; at rest only the first build shows. */
.illo-cabinet-set {
  opacity: 0;
}

.illo-cabinet-set--a {
  opacity: 1;
}

.sector__link:hover .illo-cabinet-set {
  animation: illo-cabinet-show 6s ease-in-out infinite backwards;
}

/* Surface treatment: the part in the bath takes on its colour, holds it and
 * fades back for the next loop; the bubbles share the food tank's
 * `illo-bubble`. */
.sector__link:hover .illo-anodize {
  animation: illo-anodize 3.6s ease-in-out infinite;
}

.illo .illo-glow {
  transform-box: fill-box;
  transform-origin: center;
}

.sector__link:hover .illo-glow {
  animation: illo-glow 1.8s ease-in-out infinite alternate;
}

/* Food: the agitator flips end for end (which from the side reads as it
 * turning on its shaft) while bubbles rise through the batch. */
.illo .illo-paddle {
  transform-box: fill-box;
  transform-origin: center;
}

.sector__link:hover .illo-paddle {
  animation: illo-paddle 1.6s ease-in-out infinite;
}

.illo .illo-bubble {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

.sector__link:hover .illo-bubble {
  animation: illo-bubble 1.8s ease-out infinite;
}

/* Injection moulding: the halves press together, open, and the part flies out. */
.sector__link:hover .illo-mould-top {
  animation: illo-mould-top 2.8s ease-in-out infinite;
}

.sector__link:hover .illo-mould-bottom {
  animation: illo-mould-bottom 2.8s ease-in-out infinite;
}

.illo .illo-part {
  transform-box: fill-box;
  transform-origin: center;
}

.sector__link:hover .illo-part {
  animation: illo-mould-eject 2.8s ease-in-out infinite;
}

@keyframes illo-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes illo-flow {
  to {
    stroke-dashoffset: -18;
  }
}

@keyframes illo-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

@keyframes illo-mould-top {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
  22%,
  42% {
    transform: translateY(33px);
  }
}

@keyframes illo-mould-bottom {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
  22%,
  42% {
    transform: translateY(-33px);
  }
}

@keyframes illo-mould-eject {
  0%,
  50% {
    opacity: 0;
    transform: translate(0, 0) scale(0.55);
  }
  62%,
  72% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  86% {
    opacity: 1;
    transform: translate(44px, -42px) scale(1) rotate(22deg);
  }
  100% {
    opacity: 0;
    transform: translate(90px, -30px) scale(0.9) rotate(48deg);
  }
}

@keyframes illo-twinkle {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(0.72) rotate(20deg);
    opacity: 0.7;
  }
}

/* Horizontal only, so the mill stays level with the channel it has cut. */
@keyframes illo-mill-move {
  0%,
  100% {
    transform: translateX(-16px);
  }
  50% {
    transform: translateX(10px);
  }
}

@keyframes illo-mill-spin {
  to {
    stroke-dashoffset: -16;
  }
}

/* The status LED: hard on for half the loop, hard off for the other half. */
@keyframes illo-led {
  0%,
  45% {
    opacity: 1;
  }
  50%,
  95% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Each build fades in for a slice of the loop, then hands off to the next
 * (staggered 2s apart via each set's own `animation-delay`, see illustrations.ts). */
@keyframes illo-cabinet-show {
  0%,
  4% {
    opacity: 0;
  }
  10%,
  28% {
    opacity: 1;
  }
  34%,
  100% {
    opacity: 0;
  }
}

/* The anodised colour builds up on the part, holds, then fades for the loop. */
@keyframes illo-anodize {
  0% {
    opacity: 0;
  }
  55%,
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* The glow around the part breathes while the current is on. */
@keyframes illo-glow {
  from {
    transform: scale(0.96);
    opacity: 0.12;
  }
  to {
    transform: scale(1.06);
    opacity: 0.4;
  }
}

/* The agitator flips end for end, which from the side reads as it turning. */
@keyframes illo-paddle {
  0% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(-1);
  }
  100% {
    transform: scaleX(1);
  }
}

/* Bubbles rise through the batch and fade out at the surface. */
@keyframes illo-bubble {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  20% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-28px);
    opacity: 0;
  }
}

.sector__media--compact .sector__art {
  aspect-ratio: 16 / 8;
}

.sector__media--compact .sector__art .illo {
  width: 52%;
}

/* Per-industry tints: all pale, so the drawings stay the loudest thing. */
.sector__art--metal {
  --art-a: #eef2f8;
  --art-b: #dbe3ef;
}
.sector__art--electronics {
  --art-a: #e9fbf6;
  --art-b: #cdf5ea;
}
.sector__art--wood {
  --art-a: #fff6e8;
  --art-b: #fbe6c2;
}
.sector__art--plastics {
  --art-a: #f3f0ff;
  --art-b: #e4defc;
}
.sector__art--contract {
  --art-a: #eef3ff;
  --art-b: #d9e4ff;
}
.sector__art--equipment {
  --art-a: #fffaeb;
  --art-b: #fdeebd;
}
.sector__art--surface {
  --art-a: #fff0f5;
  --art-b: #ffd6e8;
}
.sector__art--pharma {
  --art-a: #eafbff;
  --art-b: #c9f1fb;
}
.sector__art--food {
  --art-a: #f4fbf0;
  --art-b: #dcf0cf;
}

.sector__num {
  position: absolute;
  left: 16px;
  top: 14px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--fx-ink-muted);
}

.sector__arrow {
  position: absolute;
  right: 14px;
  top: 12px;
  z-index: 2;
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: var(--fx-ink-secondary);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(4px);
  transition:
    color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

.sector__arrow .icon {
  width: 15px;
  height: 15px;
}

.sector__link:hover .sector__arrow {
  color: #fff;
  background: var(--fx-primary);
  border-color: var(--fx-primary);
  transform: translate(2px, -2px);
}

/* Text */

.sector__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 20px;
}

.sector__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.3;
}

.sector__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--fx-ink-secondary);
}

.sector__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}

.sector-card {
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.sector-card:target {
  border-color: var(--fx-primary);
  box-shadow: 0 0 0 3px var(--fx-primary-pale);
}

@media (prefers-reduced-motion: reduce) {
  .sector__link,
  .sector__link:hover,
  .sector__art .illo,
  .sector__link:hover .sector__art .illo,
  .sector__arrow {
    transition: none;
    transform: none;
  }
  .sector__link:hover .illo-spin,
  .sector__link:hover .illo-flow,
  .sector__link:hover .illo-blink,
  .sector__link:hover .illo-twinkle,
  .sector__link:hover .illo-mould-top,
  .sector__link:hover .illo-mould-bottom,
  .sector__link:hover .illo-part,
  .sector__link:hover .illo-mill,
  .sector__link:hover .illo-mill-spin,
  .sector__link:hover .illo-led,
  .sector__link:hover .illo-cabinet-set,
  .sector__link:hover .illo-anodize,
  .sector__link:hover .illo-glow,
  .sector__link:hover .illo-paddle,
  .sector__link:hover .illo-bubble {
    animation: none;
  }
}

/* ---------- Flow ---------- */

.flow {
  position: relative;
  display: grid;
  /* One equal column per step, whatever the step count. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 16px;
}

.flow::before {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--fx-primary), var(--fx-data-teal));
  opacity: 0.35;
}

.flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 0 4px;
}

.flow__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
  color: var(--fx-primary-elevated);
  box-shadow: var(--sh-panel);
  position: relative;
  z-index: 1;
}

.flow__icon .icon {
  width: 24px;
  height: 24px;
}

.flow__num {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--fx-ink-faint);
}

.flow__title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.flow__text {
  font-size: 0.875rem;
  color: var(--fx-ink-secondary);
  line-height: 1.45;
}

.flow__note {
  margin-top: 40px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--fx-ink-secondary);
  text-align: center;
}

.flow__note .icon {
  color: var(--fx-primary);
}

@media (max-width: 960px) {
  .flow {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 16px;
  }
  .flow::before {
    display: none;
  }
}

@media (max-width: 520px) {
  .flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Split sections ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.split--reverse .split__copy {
  order: 2;
}

.split--reverse .split__visual {
  order: 1;
}

.split__copy {
  max-width: 520px;
}

.split__phone {
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
}

@media (max-width: 960px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
  .split--reverse .split__copy,
  .split--reverse .split__visual {
    order: initial;
  }
  .split__copy {
    max-width: 640px;
  }
  .split__phone {
    max-width: 260px;
  }
}

/* ---------- Roles ---------- */

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

.role {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 20px;
  border-radius: var(--r-lg);
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
}

.role__name {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-top: 6px;
}

.role__text {
  font-size: 0.9375rem;
  color: var(--fx-ink-secondary);
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .roles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

/* ---------- Screenshots on dark ---------- */

.shots {
  position: relative;
  overflow: hidden;
}

.shots::before {
  content: '';
  position: absolute;
  inset: auto -10% -40% -10%;
  height: 80%;
  background: radial-gradient(50% 60% at 50% 100%, rgba(41, 98, 255, 0.35), transparent 70%);
  pointer-events: none;
}

.shots .container {
  position: relative;
}

.shots__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.shots__head .section-head {
  margin-bottom: 0;
}

.shots .eyebrow {
  color: #9db4ff;
}

.shots .eyebrow::before {
  background: #9db4ff;
}

.shots .lead {
  color: var(--fx-on-dark-muted);
}

.shots__tabs {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.shots__tabs button {
  color: var(--fx-on-dark-muted);
}

.shots__tabs button:hover {
  color: #fff;
}

.shots__tabs button[aria-selected='true'] {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: none;
}

.shots .shot {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.shots .shot-caption {
  color: var(--fx-on-dark-muted);
}

.shots .shot-caption small {
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- Module pages ---------- */

.module-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

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

.stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--fx-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--fx-surface);
}

.stage {
  padding: 28px;
  border-right: 1px solid var(--fx-line);
}

.stage:last-child {
  border-right: 0;
}

.stage__num {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--fx-primary-elevated);
}

.stage__title {
  margin-top: 10px;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.stage__text {
  margin-top: 10px;
  color: var(--fx-ink-secondary);
  line-height: 1.55;
}

@media (max-width: 860px) {
  .stages {
    grid-template-columns: minmax(0, 1fr);
  }
  .stage {
    border-right: 0;
    border-bottom: 1px solid var(--fx-line);
  }
  .stage:last-child {
    border-bottom: 0;
  }
}

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

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

/* ---------- Product overview: connected diagram ---------- */

.connected {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

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

.diagram {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  font-family: var(--font-sans);
}

.diagram text {
  font-weight: 700;
  fill: var(--fx-ink);
}

.diagram .diagram__center-text {
  fill: #fff;
  font-weight: 800;
}

.diagram .diagram__line {
  stroke: var(--fx-line-strong);
  stroke-width: 1.5;
}

.diagram .diagram__ring {
  fill: none;
  stroke: var(--fx-line);
  stroke-dasharray: 4 6;
}

.diagram .diagram__node {
  fill: var(--fx-surface);
  stroke: var(--fx-line);
  stroke-width: 1.5;
}

.diagram .diagram__node-icon {
  color: var(--fx-primary-elevated);
}

.diagram .diagram__center {
  fill: var(--fx-dark);
}

/* ---------- Solutions ---------- */

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

.role-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

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

.role-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  padding: 26px;
  border-radius: var(--r-lg);
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
}

.role-card__role {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.role-card__q {
  margin-top: 4px;
  color: var(--fx-primary-elevated);
  font-weight: 700;
  font-size: 0.9375rem;
}

.role-card__a {
  margin-top: 10px;
  color: var(--fx-ink-secondary);
  line-height: 1.55;
}

.role-card .link-arrow {
  margin-top: 12px;
  font-size: 0.9375rem;
}

.scenario {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  padding: 32px;
  border-radius: var(--r-xl);
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
}

@media (max-width: 860px) {
  .scenario {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px;
  }
}

.scenario__label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fx-primary-elevated);
}

.scenario__title {
  margin-top: 10px;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.scenario__block {
  margin-top: 16px;
}

.scenario__block strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fx-ink-muted);
  margin-bottom: 4px;
}

.scenario__block p {
  color: var(--fx-ink-secondary);
  line-height: 1.55;
}

.scenario__side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border-radius: var(--r-lg);
  background: var(--fx-canvas);
}

/* ---------- Getting started ---------- */

.gs-steps {
  display: grid;
  gap: 16px;
}

.gs-step {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) minmax(0, 0.7fr);
  gap: 24px;
  padding: 28px;
  border-radius: var(--r-lg);
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
  align-items: start;
}

.gs-step__num {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--fx-primary);
  line-height: 1;
}

.gs-step__title {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.gs-step__text {
  margin-top: 8px;
  color: var(--fx-ink-secondary);
  line-height: 1.6;
}

@media (max-width: 860px) {
  .gs-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .gs-step__num {
    font-size: 1.75rem;
  }
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}

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

.need-list {
  display: grid;
  gap: 14px;
}

.need-list li {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
}

.need-list strong {
  font-weight: 700;
}

.need-list span {
  color: var(--fx-ink-secondary);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.no-list li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--fx-line);
  color: var(--fx-ink-secondary);
}

.no-list li:last-child {
  border-bottom: 0;
}

.no-list .icon {
  color: var(--fx-ink-faint);
}

/* ---------- Company ---------- */

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

.value-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.value-card__body {
  padding: 22px 26px 28px;
}

.value-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.value-card__body .card__text {
  margin-top: 12px;
}

/* Value illustrations: HTML/CSS drawings in the product's own language (a white
   panel on the slate canvas, one cobalt action). Sizes inside use container
   units so each drawing scales with its card like an image. */
.value-visual {
  container-type: inline-size;
  width: 100%;
  border-bottom: 1px solid var(--fx-line);
  background:
    radial-gradient(70% 80% at 100% 0%, rgba(41, 98, 255, 0.1), transparent 60%),
    var(--fx-canvas);
  user-select: none;
}

.vv-scene {
  aspect-ratio: 5 / 4;
  display: grid;
  place-items: center;
  padding: 6cqw 7cqw;
  background-image: radial-gradient(rgba(15, 23, 42, 0.1) 1px, transparent 1.3px);
  background-size: 14px 14px;
  color: var(--fx-ink);
  text-align: left;
  line-height: 1.3;
}

.vv-panel {
  width: 100%;
  padding: 5cqw 6cqw;
  background: var(--fx-surface);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 4cqw;
  box-shadow:
    0 2.5cqw 6cqw rgba(15, 23, 42, 0.1),
    0 0.5cqw 1cqw rgba(15, 23, 42, 0.04);
}

.vv-eyebrow {
  font-size: 2.8cqw;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fx-primary-elevated);
}

.vv-title {
  margin-top: 2cqw;
  font-size: 5.8cqw;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.vv-sub {
  margin-top: 1.4cqw;
  font-size: 3.8cqw;
  font-weight: 600;
  color: var(--fx-ink-strong);
}

.vv-meta {
  margin-top: 0.8cqw;
  font-size: 3.2cqw;
  font-weight: 600;
  color: var(--fx-ink-muted);
}

.vv-chips {
  margin-top: 3.4cqw;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6cqw;
}

.vv-chip {
  display: inline-flex;
  align-items: center;
  gap: 1.4cqw;
  height: 6.4cqw;
  padding: 0 2.8cqw;
  border-radius: 999px;
  font-size: 2.9cqw;
  font-weight: 700;
  white-space: nowrap;
  background: var(--fx-surface-muted);
  color: var(--fx-ink-secondary);
  border: 1px solid var(--fx-line);
}

.vv-chip .icon {
  width: 3.2cqw;
  height: 3.2cqw;
}

.vv-chip--ok {
  background: var(--fx-success-pale);
  color: var(--fx-success-dark);
  border-color: transparent;
}

.vv-chip--blue {
  background: var(--fx-primary-pale);
  color: var(--fx-primary-elevated);
  border-color: transparent;
}

.vv-btn {
  margin-top: 4.4cqw;
  height: 11.5cqw;
  border-radius: 3cqw;
  background: var(--fx-primary);
  color: #fff;
  font-size: 4cqw;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  box-shadow: 0 2cqw 4.5cqw var(--fx-primary-glow);
}

.vv-btn .icon {
  width: 4.2cqw;
  height: 4.2cqw;
  fill: currentColor;
}

/* Configuration: role tabs and switches */
.vv-seg {
  margin-top: 2.4cqw;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8cqw;
  padding: 0.9cqw;
  border-radius: 2.6cqw;
  background: var(--fx-surface-muted);
  border: 1px solid var(--fx-line);
}

.vv-seg span {
  height: 6.6cqw;
  padding: 0 1.2cqw;
  border-radius: 2cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.9cqw;
  font-weight: 700;
  color: var(--fx-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vv-seg span.is-active {
  background: var(--fx-surface);
  color: var(--fx-ink);
  box-shadow: 0 0.6cqw 1.6cqw rgba(15, 23, 42, 0.1);
}

.vv-toggles {
  list-style: none;
  margin: 1.6cqw 0 0;
  padding: 0;
}

.vv-toggles li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3cqw;
  padding: 2.1cqw 0;
  border-top: 1px solid var(--fx-line);
  font-size: 3.5cqw;
  font-weight: 600;
  color: var(--fx-ink-muted);
}

.vv-toggles li.is-on {
  color: var(--fx-ink);
}

.vv-switch {
  position: relative;
  flex: none;
  width: 9.5cqw;
  height: 5.4cqw;
  border-radius: 999px;
  background: var(--fx-line-strong);
}

.vv-switch::after {
  content: '';
  position: absolute;
  top: 0.7cqw;
  left: 0.7cqw;
  width: 4cqw;
  height: 4cqw;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.4cqw 1cqw rgba(15, 23, 42, 0.2);
}

.vv-toggles li.is-on .vv-switch {
  background: var(--fx-primary);
}

.vv-toggles li.is-on .vv-switch::after {
  left: auto;
  right: 0.7cqw;
}

/* Development together: a request travelling from wish to release */
.vv-msg {
  display: flex;
  gap: 3cqw;
  align-items: flex-start;
}

.vv-msg__body {
  min-width: 0;
  flex: 1;
}

.vv-avatar {
  flex: none;
  width: 8.5cqw;
  height: 8.5cqw;
  border-radius: 50%;
  background: var(--fx-primary-pale);
  color: var(--fx-primary-elevated);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vv-avatar .icon {
  width: 4.5cqw;
  height: 4.5cqw;
}

.vv-from {
  font-size: 2.8cqw;
  font-weight: 700;
  color: var(--fx-ink-muted);
}

.vv-bubble {
  margin-top: 1.2cqw;
  padding: 2.8cqw 3.4cqw;
  border-radius: 3.2cqw;
  border-top-left-radius: 1cqw;
  background: var(--fx-surface-muted);
  border: 1px solid var(--fx-line);
  font-size: 3.4cqw;
  font-weight: 500;
  line-height: 1.4;
  color: var(--fx-ink-strong);
}

.vv-steps {
  list-style: none;
  margin: 5cqw 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  position: relative;
}

.vv-steps::before {
  content: '';
  position: absolute;
  left: 16.6%;
  right: 16.6%;
  top: 3.1cqw;
  height: 2px;
  background: var(--fx-success);
}

.vv-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6cqw;
  text-align: center;
}

.vv-steps li i {
  width: 6.6cqw;
  height: 6.6cqw;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fx-success);
  color: #fff;
  box-shadow: 0 0 0 0.9cqw var(--fx-surface);
  font-style: normal;
}

.vv-steps li i .icon {
  width: 3.6cqw;
  height: 3.6cqw;
}

.vv-steps li.is-current i {
  background: var(--fx-primary);
  box-shadow:
    0 0 0 0.9cqw var(--fx-surface),
    0 1.5cqw 3cqw var(--fx-primary-glow);
}

.vv-steps li span {
  font-size: 2.8cqw;
  font-weight: 700;
  line-height: 1.2;
  color: var(--fx-ink-secondary);
}

.vv-steps li.is-current span {
  color: var(--fx-primary-elevated);
}

.vv-release {
  margin-top: 3.6cqw;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 1024px) {
  .values {
    gap: 12px;
  }
  .value-card__body {
    padding: 18px 20px 22px;
  }
}

/* Between phone and desktop widths the cards stack, each with its drawing on the left. */
@media (max-width: 860px) {
  .values {
    grid-template-columns: minmax(0, 1fr);
  }
  .value-card {
    flex-direction: row;
  }
  .value-visual {
    flex: none;
    width: 42%;
    border-bottom: 0;
    border-right: 1px solid var(--fx-line);
  }
  .vv-scene {
    height: 100%;
    aspect-ratio: auto;
  }
  .value-card__body {
    align-self: center;
    padding: 22px 24px;
  }
}

@media (max-width: 560px) {
  .value-card {
    flex-direction: column;
  }
  .value-visual {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--fx-line);
  }
  .vv-scene {
    height: auto;
    aspect-ratio: 5 / 4;
  }
}

.company-card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 32px;
  padding: 36px;
  border-radius: var(--r-xl);
  background: var(--fx-dark);
  color: #fff;
}

.company-card .lead {
  color: var(--fx-on-dark-muted);
}

.company-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.company-card dt {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9db4ff;
}

.company-card dd {
  margin: 4px 0 0;
  font-weight: 700;
}

@media (max-width: 860px) {
  .company-card {
    grid-template-columns: minmax(0, 1fr);
    padding: 28px;
  }
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 32px;
  align-items: start;
}

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

.contact-form {
  position: relative; /* Anchors the off-screen honeypot field. */
  padding: 32px;
  border-radius: var(--r-xl);
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
  box-shadow: var(--sh-panel);
}

.contact-form h2 {
  margin-bottom: 20px;
}

.contact-form .btn {
  margin-top: 8px;
}

.aside-card {
  padding: 24px;
  border-radius: var(--r-lg);
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
}

.aside-card + .aside-card {
  margin-top: 16px;
}

.aside-card h3 {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fx-ink-muted);
  margin-bottom: 12px;
}

.aside-card .big-link {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.aside-card p {
  margin-top: 8px;
  color: var(--fx-ink-secondary);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.aside-card .checklist {
  font-size: 0.9375rem;
}

.aside-card--mascot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 16px;
  align-items: center;
  background: var(--fx-canvas);
}

.aside-card--mascot img {
  width: 120px;
  height: auto;
}

/* ---------- 404 ---------- */

.not-found {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: 64px;
}

.not-found img,
.not-found .mascot {
  width: auto;
  height: 280px;
  margin-inline: auto;
  margin-bottom: 24px;
}

/* ---------- Privacy / prose pages ---------- */

.prose-page h2 {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin-top: 32px;
  margin-bottom: 8px;
  color: var(--fx-ink);
}

.prose-page p {
  color: var(--fx-ink-secondary);
  line-height: 1.7;
}

/* ---------- Mascot ---------- */

/* The FluXion character, one WebP per pose in the mascot image folder. Decorative everywhere: alt="" and no pointer events. */
.mascot {
  display: block;
  width: auto;
  user-select: none;
  pointer-events: none;
}

/* Presenter standing at the bottom-right corner of a product mockup (home and product heroes),
   gesturing towards it. On the home hero the phone moves to the bottom-left and the
   notification card to the top-left to make room. */
.mascot--present {
  position: absolute;
  right: -3%;
  bottom: -5%;
  height: 42%;
  z-index: 3;
  filter: drop-shadow(0 14px 22px rgba(15, 23, 42, 0.16));
}

.hero-visual--mascot .hero-visual__phone {
  left: -4%;
  right: auto;
}

/* Home hero: the mascot rises from the hero's bottom edge next to the mockup and is
   cropped at the waist by the section's overflow, so it reads as a large presenter. */
.hero__mascot {
  position: absolute;
  /* Overhangs the container by up to 28px on wide screens; once the container
     fills the viewport (below 1368px) it stays 8px inside the edge instead. */
  right: clamp(-28px, calc(1376px - 100vw), 8px);
  bottom: calc(-1 * clamp(48px, 7vw, 104px));
  height: clamp(360px, 42vw, 600px);
  transform: translateY(40%);
  z-index: 4;
  filter: drop-shadow(0 18px 28px rgba(15, 23, 42, 0.18));
}

/* Both notification cards stack like toasts along the mockup's bottom edge, between
   the phone and the mascot, so the plan's title bar and top rows stay uncovered. */
.hero-visual--mascot .float-card--tl {
  top: auto;
  bottom: 11%;
  left: 18%;
}

.hero-visual--mascot .float-card--br {
  top: auto;
  right: auto;
  bottom: -7%;
  left: 18%;
}

.page-hero__visual {
  position: relative;
}

@media (max-width: 1024px) {
  .mascot--present,
  .hero__mascot {
    display: none;
  }
  .hero-visual--mascot .hero-visual__phone {
    left: auto;
    right: -4%;
  }
  .hero-visual--mascot .float-card--tl {
    top: auto;
    bottom: 6%;
    left: -5%;
  }
  .hero-visual--mascot .float-card--br {
    top: -3%;
    right: 4%;
    bottom: auto;
    left: auto;
  }
}

/* Page heroes with a mascot column (getting started, roadmap, portal, company). */
.page-hero__grid--mascot {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
}

.page-hero__mascot {
  justify-self: center;
  height: clamp(240px, 26vw, 360px);
}

.page-hero__scene {
  justify-self: end;
  width: min(100%, 560px);
}

/* Portal hero: the facts row keeps its distance from the buttons, and the mascot
   stands on the hero's bottom edge instead of floating mid-column. */
.page-hero .kicker-list {
  margin-top: 24px;
}

.page-hero__grid--stand {
  align-items: end;
}

.page-hero__mascot--stand {
  align-self: end;
  height: clamp(280px, 30vw, 420px);
  margin-bottom: calc(-1 * clamp(24px, 4vw, 56px));
}

@media (max-width: 960px) {
  .page-hero__grid--mascot {
    grid-template-columns: minmax(0, 1fr);
  }
  .page-hero__mascot {
    display: none;
  }
  .page-hero__scene {
    justify-self: center;
    width: min(100%, 440px);
  }
}

/* CTA band: the mascot shows the app from the right edge, standing on the band's bottom edge.
   `.cta-band__mascot` is the `.tablet-mascot` wrapper (image + overlaid screen, see mockups.css). */
.cta-band--mascot .cta-band__inner {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.cta-band--mascot .cta-band__actions {
  margin-top: 28px;
  justify-content: flex-start;
}

.cta-band__mascot {
  height: clamp(220px, 24vw, 320px);
  margin-bottom: calc(-1 * clamp(40px, 6vw, 72px));
  margin-right: clamp(0px, 3vw, 40px);
  justify-self: end;
}

@media (max-width: 860px) {
  .cta-band--mascot .cta-band__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .cta-band__mascot {
    height: 200px;
    margin-top: 8px;
    margin-right: 0;
    justify-self: center;
  }
}

/* FAQ heading with the thinking mascot. */
.faq__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.faq__head .h2 {
  margin-bottom: 0;
}

.faq__mascot {
  height: 136px;
  flex: none;
  margin-bottom: -6px;
}

@media (max-width: 640px) {
  .faq__mascot {
    height: 104px;
  }
}

/* Product mega menu: a small wave in the intro card. */
.mega__intro--mascot {
  position: relative;
  overflow: hidden;
  padding-bottom: 120px;
}

.mega__mascot {
  position: absolute;
  right: 14px;
  bottom: -6px;
  height: 128px;
}

/* Contact form success message. */
.notice--mascot {
  align-items: center;
}

.notice__mascot {
  height: 64px;
  flex: none;
  margin: -10px 0 -10px -2px;
}

/* Company story. */
.story__mascot {
  max-width: 380px;
  margin-inline: auto;
}

/* ---------- NeXa: teaser (home, product) and the NeXa page ---------- */

/* Teaser: one pale panel with the copy and the assistant pane side by side. */
.nexa-panel {
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid rgba(41, 98, 255, 0.14);
  background:
    radial-gradient(60% 70% at 85% 10%, rgba(41, 98, 255, 0.12), transparent 65%),
    linear-gradient(180deg, #fbfcff 0%, #f2f6ff 100%);
  padding: clamp(28px, 4.5vw, 64px);
}

.nexa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.nexa__copy {
  max-width: 560px;
}

.nexa__copy .h2 {
  margin-top: 12px;
}

.nexa__copy .lead {
  margin-top: 16px;
}

.nexa__copy .checklist {
  margin-top: 24px;
}

.nexa__copy .link-arrow {
  display: inline-flex;
  margin-top: 24px;
}

.nexa__eyebrow {
  flex-wrap: wrap;
}

.nexa__eyebrow .badge {
  margin-left: 6px;
  text-transform: none;
  letter-spacing: 0.01em;
}

/* The pane keeps the app's proportions (a narrow docked panel) and sits to the
 * right. NeXa's portrait stands beside it at the bottom, just touching the
 * pane's corner so it never covers the composer; both are sized from the
 * column's width (the column is a container) so nothing spills into the copy
 * on narrower desktops. */
.nexa__visual {
  position: relative;
  container-type: inline-size;
}

.nexa__visual .mock {
  position: relative;
  z-index: 1;
  width: min(440px, 100cqw - 96px);
  margin-left: auto;
}

.nexa__glow {
  position: absolute;
  inset: -12% -10% -8% -10%;
  background: radial-gradient(50% 50% at 62% 42%, rgba(41, 98, 255, 0.2), transparent 70%);
  pointer-events: none;
}

.nexa__portrait {
  position: absolute;
  right: calc(min(440px, 100cqw - 96px) - 24px);
  bottom: -14px;
  z-index: 2;
  font-size: clamp(96px, 100cqw - 420px, 168px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

/* The three roles as chips in the teaser (their names come from the NeXa page). */
.nexa__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.nexa__chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 14px 6px 12px;
  border-radius: var(--r-pill);
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--fx-ink-strong);
}

.nexa__chips .icon {
  width: 18px;
  height: 18px;
  color: var(--fx-primary-elevated);
}

@media (max-width: 960px) {
  .nexa {
    grid-template-columns: minmax(0, 1fr);
  }
  .nexa__copy {
    max-width: 640px;
  }
  /* Stacked: the pane takes the column and the portrait hangs below its
   * bottom-left corner. */
  .nexa__visual {
    padding-bottom: 72px;
  }
  .nexa__visual .mock {
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
  }
  .nexa__portrait {
    right: auto;
    left: 8px;
    bottom: 0;
    font-size: 96px;
  }
}

/* ---------- NeXa page ---------- */

/* The hero reuses the teaser's split (.nexa) on the page hero's background;
 * the portrait hangs slightly below the pane, so leave room for it. */
.page-hero--nexa {
  padding-bottom: clamp(40px, 5vw, 64px);
}

.page-hero--nexa .nexa {
  gap: clamp(32px, 5vw, 64px);
}

.page-hero--nexa .nexa__copy {
  max-width: 600px;
}

/* Four steps in the "how it works" flow: the base flow already gives one
 * column per step; stacked (below 960px, where the base switches to rows)
 * four steps read better as two by two than as three plus one. */
@media (max-width: 960px) {
  .flow--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Automations mockup column. */
.nexa-auto {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}

/* ---------- NeXa page: animated scenes ----------
 * A scene picker on the left, the stage on the right. The stage shows an app
 * view beside the docked NeXa pane; src/scripts/site.js plays the scenes.
 */
.demo {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.demo__tabs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.demo-tab {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  width: 100%;
  padding: 14px 16px 16px;
  border-radius: var(--r-lg);
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition:
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.demo-tab:hover {
  border-color: var(--fx-line-strong);
}

.demo-tab[aria-selected='true'] {
  border-color: var(--fx-primary);
  box-shadow: 0 0 0 3px var(--fx-primary-pale);
}

.demo-tab__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.demo-tab__icon .icon {
  width: 18px;
  height: 18px;
}

.demo-tab__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.demo-tab__title {
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.demo-tab__text {
  font-size: 0.8125rem;
  color: var(--fx-ink-secondary);
  line-height: 1.45;
}

/* Only the playing scene shows its description, so the list stays compact. */
.demo-tab[aria-selected='false'] .demo-tab__text {
  display: none;
}

.demo-tab__role {
  margin-top: 4px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fx-primary-elevated);
}

/* Progress of the playing scene, driven by the player. */
.demo-tab__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--fx-primary);
  transform: scaleX(0);
  transform-origin: left center;
}

.dstage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  min-height: 540px;
  background: var(--fx-canvas);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-hero);
  overflow: hidden;
}

.dstage__inner {
  display: contents;
}

.dstage__view {
  position: relative;
  container-type: inline-size;
  min-width: 0;
  padding: 20px;
}

.dstage__pane {
  position: relative;
  container-type: inline-size;
  min-width: 0;
  background: #fff;
  border-left: 1px solid var(--fx-line);
}

.dstage__pane .npane {
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.dstage__pane .npane__body {
  flex: 1;
}

@media (max-width: 900px) {
  .demo {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo__tabs {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .demo-tab {
    flex: 0 0 236px;
    scroll-snap-align: start;
  }
  .demo-tab .demo-tab__text {
    display: none;
  }
  .dstage {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .dstage__view {
    padding: 16px;
  }
  .dstage__pane {
    border-left: 0;
    border-top: 1px solid var(--fx-line);
  }
}

/* ---------- Module spotlight (shop floor: production reports) ----------
 * Section head with the mascot at its right, a split with a vertical step
 * track and the composite visual (src/components/mockups/reports.ts), and a
 * facts strip. Below 640 px the visual keeps only the phone. */

.spotlight__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
}

.spotlight__copy {
  margin-bottom: 0;
}

.spotlight__mascot {
  width: 132px;
  height: auto;
  margin-bottom: -8px;
  justify-self: end;
}

.spotlight__split {
  margin-top: clamp(32px, 5vw, 56px);
}

/* The visual column gets 60 % so the desktop mockup stays legible. */
.split--visual-lg {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

/* Vertical track: the section's steps drawn like the app's status track. */
.spot-track {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

.spot-track__step {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 0 16px;
  padding-bottom: 26px;
}

.spot-track__step:last-child {
  padding-bottom: 0;
}

.spot-track__step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: 0;
  width: 2px;
  background: var(--fx-line);
}

.spot-track__marker {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fx-primary-pale);
  color: var(--fx-primary-elevated);
  border: 1px solid rgba(41, 98, 255, 0.18);
}

.spot-track__marker .icon {
  width: 18px;
  height: 18px;
}

.spot-track__step--done .spot-track__marker {
  background: var(--fx-success-pale);
  color: var(--fx-success-dark);
  border-color: rgba(22, 163, 74, 0.22);
}

.spot-track__body {
  padding-top: 5px;
}

.spot-track__eyebrow {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fx-ink-faint);
}

.spot-track__title {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.spot-track__text {
  margin-top: 6px;
  color: var(--fx-ink-secondary);
  line-height: 1.55;
  font-size: 0.9375rem;
}

.spot-track__tags {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.spot-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--fx-surface-muted);
  color: var(--fx-ink-secondary);
  border: 1px solid var(--fx-line);
  white-space: nowrap;
}

.spot-tag .icon {
  width: 13px;
  height: 13px;
}

.spot-tag--danger {
  background: var(--fx-danger-pale);
  color: var(--fx-danger-dark);
  border-color: rgba(220, 38, 38, 0.22);
}

.spot-tag--warning {
  background: var(--fx-warning-pale);
  color: var(--fx-warning-dark);
  border-color: rgba(245, 158, 11, 0.28);
}

.spotlight__link {
  margin-top: 28px;
  display: inline-flex;
}

.spotlight__facts {
  margin-top: clamp(40px, 6vw, 72px);
}

/* Composite visual: the desktop mockup behind, the phone in front at the lower left. */
.spot-visual {
  position: relative;
  padding-bottom: 8%;
}

.spot-visual__app {
  width: 90%;
  margin-left: auto;
}

.spot-visual__phone {
  position: absolute;
  left: -3%;
  bottom: 0;
  width: 30%;
}

@media (max-width: 960px) {
  .spotlight__head {
    grid-template-columns: minmax(0, 1fr);
  }
  .spotlight__mascot {
    display: none;
  }
  .split--visual-lg {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .spot-visual {
    padding: 0;
  }
  .spot-visual__app {
    display: none;
  }
  .spot-visual__phone {
    position: static;
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
  }
}