/* ============================================================================
   Kaizen — design tokens
   Everything downstream reads from here. Change a value once and it
   propagates: type scale, spacing rhythm, page width, radii, button shape.
   ========================================================================== */

:root {
  /* --- colour ------------------------------------------------------------ */
  --bg:          #E7EBE3;   /* page ground */
  --bg-sunk:     #E1E6DA;   /* alternating band, one step darker */
  --surface:     #FAFBF8;   /* cards sitting on the ground */
  --surface-2:   #F1F4EC;   /* quiet fills inside cards */
  --surface-soft: rgba(252, 253, 250, 0.55);  /* logo plates on the page ground */
  --fill-quiet:   rgba(27, 30, 25, 0.028);    /* barely-there fill inside cards */
  --ink:         #1B1E19;
  --ink-2:       #4C524A;   /* body copy */
  --ink-3:       #7C8378;   /* labels, meta, captions */
  --line:        rgba(27, 30, 25, 0.13);
  --line-soft:   rgba(27, 30, 25, 0.07);
  --line-strong: rgba(27, 30, 25, 0.26);

  /* status — muted, never neon */
  --ok:       #2F6B4B;  --ok-bg:     rgba(47, 107, 75, 0.10);
  --wait:     #8A5A12;  --wait-bg:   rgba(138, 90, 18, 0.11);
  --alert:    #8C3A2E;  --alert-bg:  rgba(140, 58, 46, 0.10);

  /* brand gradient, shared with the K tile and the wordmark */
  --grad-1: #bcc9ff;
  --grad-2: #e6c1ff;
  --grad-3: #faaef9;
  --grad-4: #96d7ff;

  /* --- type -------------------------------------------------------------- */
  --ff-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --ff-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --fs-display: clamp(30px, 4.6vw, 58px);
  --fs-h2:      clamp(27px, 3.4vw, 44px);
  --fs-h3:      clamp(19px, 1.7vw, 24px);
  --fs-lead:    clamp(16px, 1.35vw, 19px);
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      12.5px;

  --lh-display: 1.22;   /* also drives the rotator clip height */
  --lh-tight:   1.18;
  --lh-body:    1.6;

  --ls-display: -0.021em;
  --ls-label:    0.09em;

  /* --- space ------------------------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --section-y: clamp(56px, 7.5vw, 104px);
  --gutter:    clamp(20px, 4.5vw, 56px);

  /* --- measure ----------------------------------------------------------- */
  --w-page:   1160px;
  --w-text:   680px;
  --w-narrow: 560px;

  /* --- shape ------------------------------------------------------------- */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-pill: 999px;
  --r-btn: 9px;

  --shadow-card: 0 1px 2px rgba(27, 30, 25, 0.04);
  --shadow-lift: 0 1px 3px rgba(27, 30, 25, 0.06), 0 12px 32px -18px rgba(27, 30, 25, 0.22);

  /* Kaizen wordmark, as a mask. The cover is painted in the page colour and
     the letterforms are punched out of it, so the gradient below shows
     through. */
  --wordmark-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20790%20320%22%3E%3Cdefs%3E%3Cmask%20id%3D%22m%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22790%22%20height%3D%22320%22%3E%3Crect%20width%3D%22790%22%20height%3D%22320%22%20fill%3D%22white%22/%3E%3Ctext%20x%3D%220%22%20y%3D%22168%22%20dominant-baseline%3D%22middle%22%20font-family%3D%22Georgia%2C%20serif%22%20font-weight%3D%22700%22%20font-size%3D%22230%22%20letter-spacing%3D%22-6%22%20fill%3D%22black%22%3EKaizen%3C/text%3E%3C/mask%3E%3C/defs%3E%3Crect%20width%3D%22790%22%20height%3D%22320%22%20fill%3D%22white%22%20mask%3D%22url%28%23m%29%22/%3E%3C/svg%3E");

  --tile-w: clamp(94px, 11vw, 118px);
  --header-h: 60px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ============================================================================
   Base
   ========================================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: 'tnum' 1, 'cv05' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { display: block; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

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

/* ============================================================================
   Primitives
   ========================================================================== */

/* --- Container ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--text   { max-width: calc(var(--w-text) + var(--gutter) * 2); }
.container--narrow { max-width: calc(var(--w-narrow) + var(--gutter) * 2); }

/* --- Section -------------------------------------------------------------- */
.section {
  position: relative;
  padding-block: var(--section-y);
  scroll-margin-top: calc(var(--header-h) + 8px);
}
.section--tight  { padding-block: calc(var(--section-y) * 0.6); }
.section--ruled  { border-top: 1px solid var(--line); }
.section--sunk   { background: var(--bg-sunk); }

/* --- Eyebrow -------------------------------------------------------------- */
.eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --- SectionHeader -------------------------------------------------------- */
.section-header { max-width: var(--w-text); }
.section-header__title {
  margin-top: var(--s4);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.section-header__sub {
  margin-top: var(--s4);
  max-width: 56ch;
  font-size: var(--fs-lead);
  color: var(--ink-2);
}
.section-header--center {
  margin-inline: auto;
  text-align: center;
}
.section-header--center .section-header__sub { margin-inline: auto; }

/* --- Button --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  height: 44px;
  padding-inline: var(--s5);
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease),
              color 160ms var(--ease), transform 160ms var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--ink);
  color: var(--bg);
}
.btn--primary:hover { background: #2C312A; }

.btn--secondary {
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn--secondary:hover { background: rgba(27, 30, 25, 0.045); }

.btn--ghost { color: var(--ink-2); padding-inline: var(--s3); }
.btn--ghost:hover { color: var(--ink); }

/* A quieter companion to a primary button: reads as an action, not a rival. */
.link-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding-inline: var(--s3);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  transition: color 160ms var(--ease);
}
.link-action span { transition: transform 220ms var(--ease); }
.link-action:hover { color: var(--ink); }
.link-action:hover span { transform: translateX(3px); }

.btn--sm { height: 34px; padding-inline: var(--s4); font-size: var(--fs-xs); }

/* --- Card ----------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-card);
}
.card--lift  { box-shadow: var(--shadow-lift); }
.card--quiet { background: var(--surface-2); box-shadow: none; }
.card__pad   { padding: clamp(20px, 2.4vw, 32px); }
.card__head  {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s5) clamp(18px, 2.2vw, 28px);
  border-bottom: 1px solid var(--line);
}

/* --- StatusBadge ---------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding-inline: 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: -0.002em;
  white-space: nowrap;
}
.badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
.badge--auto,  .badge--done { background: var(--ok-bg);    color: var(--ok); }
.badge--wait                { background: var(--wait-bg);  color: var(--wait); }
.badge--alert               { background: var(--alert-bg); color: var(--alert); }
.badge--sent                { background: var(--surface-2); color: var(--ink-2); }

/* --- IntegrationTile ------------------------------------------------------
   Uniform tiles: one fixed logo viewport, the name quiet underneath. Marks
   keep their own aspect ratio inside the viewport and are balanced by a
   per-logo `scale` from the config rather than by bespoke rules. */

/* A compact logo wall rather than a marketplace: eight ERP plates fall four
   to a row well inside the column, and the whole ecosystem reads in a glance.
   Held narrow on purpose — this is supporting evidence for the step, not the
   main event. */
.ints {
  display: grid;
  gap: var(--s6);
  max-width: 528px;
}

.int-group__label { display: block; margin-bottom: var(--s4); }

.tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

/* A plate, not a card: the boundary should almost disappear and leave the
   mark as the only thing carrying weight. Wider than tall, logo only. */
.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tile-w);
  height: 74px;
  padding-inline: var(--s3);
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: var(--surface-soft);
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.tile:hover {
  background: var(--surface);
  border-color: var(--line-soft);
}

/* One viewport for every mark, whatever its aspect ratio. */
.tile__logo {
  max-width: 100%;
  max-height: 30px;
  width: auto;
  height: auto;
  object-fit: contain;
  transform: scale(var(--scale, 1));
}

/* --- Numeric -------------------------------------------------------------- */
.num {
  font-family: var(--ff-mono);
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.02em;
}

/* --- Reveal (opt-in, JS-gated so no-JS still renders) --------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ============================================================================
   Brand marks
   ========================================================================== */

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-fallback {
  background: linear-gradient(120deg, var(--grad-1), var(--grad-2), var(--grad-3), var(--grad-4));
  background-size: 300% 300%;
  animation: gradientShift 14s ease infinite;
}

.k-mark {
  position: relative;
  display: block;
  width: 30px; height: 30px;
  border-radius: var(--r-1);
  overflow: hidden;
  flex: none;
}
.k-mark-gradient { position: absolute; inset: 0; }
.k-mark-letter {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

/* Gradient plane with a page-coloured cover masked so the letterforms punch
   through. Same construction as the other site variants. */
.wordmark {
  position: relative;
  /* Sized on the glyphs, so the mark's left edge is the letterforms' left
     edge and it lines up with everything else in the column. */
  width: clamp(68px, 7.8vw, 92px);
  aspect-ratio: 790 / 320;
  overflow: hidden;
}
.wordmark-gradient { position: absolute; inset: 1px; }
.wordmark-cover {
  position: absolute;
  inset: -1px;
  background: var(--bg);
  -webkit-mask-image: var(--wordmark-mask);
  mask-image: var(--wordmark-mask);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}

/* ============================================================================
   Header
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.header.is-stuck { border-bottom-color: var(--line); }

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--s5);
  height: 100%;
}
.header__brand { display: flex; align-items: center; gap: var(--s3); }
.header__name  { font-size: var(--fs-sm); font-weight: 500; letter-spacing: -0.01em; }
.header__nav   { display: flex; align-items: center; gap: var(--s5); margin-left: auto; }
.header__link  { font-size: var(--fs-sm); color: var(--ink-2); transition: color 160ms var(--ease); }
.header__link:hover { color: var(--ink); }

/* ============================================================================
   Hero
   ========================================================================== */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(100svh - var(--header-h));
  /* Asymmetric on purpose: the heavier foot lifts the centred block clear of
     the optical middle, which sits low in a full-height hero. */
  padding-block: clamp(24px, 6vh, 60px) clamp(72px, 13vh, 132px);
}

.hero__headline {
  /* Wide enough that the longest composed line — "that take care of
     Procure-to-pay" — stays on one line at the top of the display scale. */
  max-width: 920px;
  margin-inline: auto;
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.hero__line { display: block; }
.hero__line--rot { white-space: nowrap; }

.hero__sub {
  margin-top: clamp(20px, 2.6vw, 30px);
  margin-inline: auto;
  max-width: 52ch;
  font-size: var(--fs-lead);
  color: var(--ink-2);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3);
  margin-top: clamp(28px, 3.4vw, 40px);
}

/* --- rotator --------------------------------------------------------------
   The clip box is exactly one line tall. Phrases live in a column track that
   slides up one line per tick; after each slide the leading phrase moves to
   the back of the track with the transition off, so the track returns to
   offset zero with the next phrase already in place. No end-of-list case,
   and never a blank frame. */
.rot {
  display: inline-block;
  position: relative;
  height: calc(1em * var(--lh-display));
  vertical-align: bottom;
  /* The box is pinned to one width in app.js so the words before it never
     move. Clipping is vertical only — overflow:hidden would also cut the
     phrases wider than that pinned width, which is the whole point of not
     using it. */
  overflow: visible;
  clip-path: inset(0 -100vw);
}
.rot-track {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transform: translateY(0);
  will-change: transform;
}
.rot-item {
  height: calc(1em * var(--lh-display));
  line-height: calc(1em * var(--lh-display));
  white-space: nowrap;
  font-weight: 600;
}

/* ============================================================================
   Problem — fragmentation
   ========================================================================== */

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

.frag__sources {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--surface);
  overflow: hidden;
}
.frag__source {
  padding: var(--s5) var(--s3);
  text-align: center;
  border-left: 1px solid var(--line-soft);
}
.frag__source:first-child { border-left: 0; }
.frag__source-name {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
}
.frag__source-note {
  margin-top: 3px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.frag__wires { display: none; }

.frag__fan { width: 100%; height: 92px; }
.frag__fan path { fill: none; stroke: var(--line-strong); stroke-width: 1; }

.frag__drop {
  width: 1px;
  height: 40px;
  margin-inline: auto;
  background: linear-gradient(to bottom, transparent, var(--line-strong));
}

.frag__target {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: max-content;
  margin-inline: auto;
  padding: var(--s3) var(--s5) var(--s3) var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.frag__target-note {
  margin-top: var(--s4);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

/* ============================================================================
   Steps — the 01–04 sequence
   ========================================================================== */

.steps { scroll-margin-top: calc(var(--header-h) + 8px); }
.step { padding-block: calc(var(--section-y) * 0.82); }
/* The plane's reserve below carries this step's bottom spacing, so the
   section must not add its own on top of it. */
.step--learn { padding-bottom: 0; }

.step__grid {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--s6);
}
/* Grid items default to min-width:auto, so one nowrap descendant — the action
   center's tab strip — could widen the whole column past the viewport. */
.step__grid > * { min-width: 0; }

.step__rail { position: relative; }
/* One continuous line through the sequence: each rail's line overruns into
   the neighbouring section's padding, so the gaps between sections close. */
.step__rail::before {
  content: '';
  position: absolute;
  left: 17px;
  top: calc(var(--section-y) * -1);
  bottom: calc(var(--section-y) * -1);
  width: 1px;
  background: var(--line);
}
.step:first-of-type .step__rail::before {
  top: 0;
  background: linear-gradient(to bottom, transparent, var(--line) 30%);
}
.step:last-of-type .step__rail::before {
  bottom: 30%;
  background: linear-gradient(to bottom, var(--line) 70%, transparent);
}

.step__num {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg);
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  color: var(--ink-2);
}
.section--sunk .step__num { background: var(--bg-sunk); }

.step__visual { margin-top: clamp(32px, 4vw, 52px); }

/* ============================================================================
   02 — the business cloud, and the workflows it resolves into
   ========================================================================== */

.learn { position: relative; }

/* --- the cloud ------------------------------------------------------------
   Loose, dense, mixed: the business before anything has joined it up. The
   pills are placed by app.js at irregular coordinates inside a blob
   silhouette — there is no grid or row structure to read off. Without JS the
   field falls back to ordinary wrapped flow, which still says the same thing.

   The pill treatment is shared with the two inline pills in the paragraph
   above, so the sentence acts as the legend. */

.cloud { position: relative; }

.cloud__field {
  width: 96%;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3);
}
/* Packed mode: children are positioned absolutely from measured coordinates. */
.cloud__field--packed { display: block; position: relative; }
.cloud__field--packed .pill { position: absolute; top: 0; left: 0; }

.pill {
  display: block;
  transition: transform 420ms var(--ease);
  will-change: transform;
}

.pill__i,
.pill-inline {
  border-radius: var(--r-2);
  white-space: nowrap;
}
.pill__i {
  display: block;
  padding: 7px 13px;
  font-size: var(--fs-sm);
  line-height: 1.3;
}
/* Text-height, so it reads as a highlighted word rather than a button. */
.pill-inline {
  display: inline-block;
  padding: 1px 9px;
  font-size: 0.92em;
  line-height: 1.35;
}

.pill--is .pill__i,
.pill-inline--is {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}
.pill--does .pill__i,
.pill-inline--does {
  border: 1px dashed var(--line-strong);
  background: none;
  color: var(--ink-2);
}

/* Ambient drift — a few pixels, each pill on its own clock so nothing pulses
   in unison. Small enough to read as life, not as animation. */
@keyframes drift {
  from { transform: rotate(var(--rot, 0deg)) translate(0, 0); }
  to   { transform: rotate(var(--rot, 0deg)) translate(var(--drift-x, 2px), var(--drift-y, 2px)); }
}
/* Held for the reduced-motion case, where the animation never runs. */
.pill__i { transform: rotate(var(--rot, 0deg)); }
.pill__i {
  animation: drift var(--drift-dur, 11s) ease-in-out var(--drift-delay, 0s) infinite alternate;
}

/* --- the operating model plane -------------------------------------------
   Geometric and aligned where the cloud is loose, and lifted over the foot of
   it: the lower pills pass behind the plane rather than fading out. The lift
   travels a little as the section scrolls (see app.js), from a slight overlap
   to covering three quarters of it. The padding under .learn holds the space
   it swings through, so the page geometry never changes with it. */

.plane {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--overlap, 90px));
  transform: translateY(var(--lift, 0px));
  overflow: hidden;          /* keeps a long chain inside the card */
}
/* The only thing holding space under the plane. It doubles as this step's
   bottom spacing, so it is the ordinary section rhythm rather than a number
   of its own: at rest the card sits the same distance from the divider as
   every other section, and the plane's downward swing is absorbed into it.
   Fixed, not scroll-linked — a reserve that changed with the transform would
   resize the document mid-scroll. */
.learn { padding-bottom: calc(var(--section-y) * 0.82); }

.js .plane { opacity: 0; transition: opacity 700ms var(--ease); }
.js .plane.is-in { opacity: 1; }

.plane__head {
  padding: clamp(14px, 1.6vw, 19px) clamp(16px, 2vw, 24px);
  border-bottom: 1px solid var(--line);
}
.plane__title {
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.015em;
}
.plane__sub { margin-top: 3px; font-size: var(--fs-sm); color: var(--ink-2); }

.plane__flows { display: grid; }
/* The chain may run wider than the card; it scrolls inside its own row
   rather than widening the grid track and pushing the page sideways. */
.plane__flows > * { min-width: 0; }

/* --- one workflow --------------------------------------------------------- */

.wf {
  padding: clamp(12px, 1.3vw, 16px) clamp(16px, 2vw, 24px);
  border-top: 1px solid var(--line-soft);
}
.wf:first-child { border-top: 0; }

/* Title left, the systems it runs across right: one line instead of two. */
.wf__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s3);
}
.wf__n {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.wf__name { font-size: var(--fs-sm); font-weight: 500; }

.wf__steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: var(--s2);
}

.wf__node {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 5px 10px;
  font-size: 13px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-1);
  background: var(--fill-quiet);
  color: var(--ink);
  white-space: nowrap;
}

.wf__arrow {
  flex: none;
  align-self: center;
  width: 13px;
  height: 1px;
  position: relative;
  background: var(--line-strong);
}
.wf__arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
  transform: translateY(-50%) rotate(45deg);
}

.wf__meta {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  color: var(--ink-3);
}

/* Each workflow draws itself left to right once the plane has settled. */
.js .wf__node,
.js .wf__arrow {
  opacity: 0;
  transform: translateX(-8px);
}
.js .plane.is-in .wf__node,
.js .plane.is-in .wf__arrow {
  animation: nodeIn 420ms var(--ease) forwards;
  animation-delay: calc(320ms + var(--i, 0) * 160ms + var(--j, 0) * 60ms);
}
.js .wf__arrow { --j: 0; }
@keyframes nodeIn { to { opacity: 1; transform: none; } }

/* ============================================================================
   03 — configure
   ========================================================================== */

.configure {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
}

.flow { padding: clamp(20px, 2.2vw, 28px); }
.flow__title { font-size: var(--fs-sm); font-weight: 500; }
.flow__caption { margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-3); }

.flow__chain { margin-top: var(--s5); }
.flow__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-left: var(--s5);
  min-height: 34px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.flow__step::before {           /* node */
  content: '';
  position: absolute;
  left: 3px; top: 14px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--line-strong);
}
.flow__step::after {            /* connector down to the next node */
  content: '';
  position: absolute;
  left: 5px; top: 22px;
  width: 1px; height: calc(100% - 22px + 4px);
  background: var(--line);
}
.flow__step:last-child::after { display: none; }
.flow__step--terminal { color: var(--ink); font-weight: 500; }

.perms { margin-top: var(--s6); }
.perms__label { display: block; margin-bottom: var(--s2); }
.perms__rows { border-top: 1px solid var(--line); }
.perms__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
}
.perms__row:last-child { border-bottom: 0; }
.perms__row > span:first-child { min-width: 0; }   /* free to wrap, not clip */
.perms__row .badge { flex: none; }

.rules { padding: clamp(20px, 2.2vw, 28px); }
.rules__list { margin-top: var(--s5); display: grid; gap: var(--s3); }
.rules__item {
  padding: var(--s4);
  border-left: 2px solid var(--line-strong);
  background: var(--surface);
  border-radius: 0 var(--r-1) var(--r-1) 0;
  font-size: var(--fs-sm);
  color: var(--ink);
}
.rules__foot {
  margin-top: var(--s5);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

/* ============================================================================
   04 — action center
   ========================================================================== */

.ac__meta { margin-top: 3px; font-size: var(--fs-xs); color: var(--ink-3); }

.tabs { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-2); background: var(--surface-2); }
.tab {
  padding: 6px 12px;
  border-radius: 7px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-3);
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.tab:hover { color: var(--ink-2); }
.tab[aria-selected='true'] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }
.tab__count { font-family: var(--ff-mono); opacity: 0.6; margin-left: 5px; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
}
.stat {
  padding: var(--s5) clamp(18px, 2.2vw, 28px);
  border-left: 1px solid var(--line-soft);
}
.stat:first-child { border-left: 0; }
.stat__value {
  font-family: var(--ff-mono);
  font-size: clamp(19px, 2vw, 25px);
  letter-spacing: -0.03em;
  color: var(--ink);
}
.stat__label { margin-top: 3px; font-size: var(--fs-xs); color: var(--ink-3); }

.ac__row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 92px 132px;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) clamp(18px, 2.2vw, 28px);
  border-bottom: 1px solid var(--line-soft);
}
.ac__row:last-child { border-bottom: 0; }
.ac__row:hover { background: var(--surface-2); }
.ac__cat {
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ac__desc { font-size: var(--fs-sm); color: var(--ink); }
.ac__val  { font-family: var(--ff-mono); font-size: var(--fs-sm); color: var(--ink-2); text-align: right; }
.ac__end  { display: flex; justify-content: flex-end; }

.ac__empty { padding: var(--s7); text-align: center; font-size: var(--fs-sm); color: var(--ink-3); }

/* rows fade in as the panel enters view, staggered */
.js .ac__row { opacity: 0; transform: translateY(6px); }
.js .ac.is-in .ac__row { animation: rowIn 420ms var(--ease) forwards; }
@keyframes rowIn { to { opacity: 1; transform: none; } }

/* ============================================================================
   Verticals · CTA · footer
   ========================================================================== */

.verticals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(32px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--surface);
}
.vertical {
  padding: clamp(20px, 2.2vw, 28px);
  border-left: 1px solid var(--line-soft);
  border-top: 1px solid var(--line-soft);
}
.vertical:nth-child(3n + 1) { border-left: 0; }
.vertical:nth-child(-n + 3) { border-top: 0; }
.vertical__name { font-size: var(--fs-body); font-weight: 500; letter-spacing: -0.01em; }
.vertical__note { margin-top: 4px; font-size: var(--fs-sm); color: var(--ink-3); }

.cta { text-align: center; }
.cta__title {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.cta__actions { display: flex; justify-content: center; gap: var(--s3); margin-top: var(--s6); }

/* Where the page finishes: quiet, functional, and not another pitch. One row
   on desktop — wordmark against the utility links — and every link is the
   same muted text. Nothing in the footer is a button or a section shortcut. */
.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding-block: var(--s7);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.footer__utility { display: flex; flex-wrap: wrap; gap: 10px var(--s5); }
.footer__utility a:hover { color: var(--ink); }

/* ============================================================================
   Demo modal
   The glass is the cami-i18n treatment — a real backdrop-filter over the page
   (blur + saturate), not `filter` on the overlay's own content, which only
   blurs the card. The card keeps the short blur-in resolve and the slight
   overshoot from the cami modal.
   ========================================================================== */

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

@keyframes demo-modal-in {
  from { opacity: 0; filter: blur(12px); transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; filter: blur(0);    transform: scale(1) translateY(0); }
}

.demo-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
  background: rgba(28, 30, 26, 0.42);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
}
/* `display: flex` above is an author rule and beats the UA rule that [hidden]
   relies on, so without this the hidden attribute sets the property and hides
   nothing. */
.demo-overlay[hidden] { display: none; }

.demo-overlay.is-open { animation: demo-scrim-in 0.18s ease forwards; }
.demo-overlay.is-open .demo {
  animation: demo-modal-in 0.22s cubic-bezier(0.34, 1.1, 0.64, 1) forwards;
}

.demo {
  position: relative;
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  /* The overlay is sized to the visible area (see syncViewport), so measuring
     against it keeps the card inside whatever the keyboard leaves. */
  max-height: 100%;
  /* The body scrolls, not the card, so the close button cannot scroll away. */
  overflow: hidden;
  border-radius: var(--r-3);
  background: var(--surface);
  /* The inset highlights are the cami-i18n glass edge, kept subtle on an
     opaque card. */
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.24),
    0 4px 16px rgba(0, 0, 0, 0.10),
    inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.55),
    inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.25);
}

/* The month view wants width; the form does not. */
.demo--wide { max-width: 980px; }

.demo__body { overflow-y: auto; padding: clamp(24px, 3.4vw, 40px); }

/* --- the Cal.com embed ---------------------------------------------------- */

.demo__cal {
  /* Only a placeholder while the iframe loads; Cal reports its own height
     afterwards, and a tall floor would leave dead space under it. */
  min-height: 420px;
  margin-top: var(--s5);
  border-radius: var(--r-2);
  overflow: hidden;
}
/* Cal injects its own iframe; keep it inside the rounded card. */
.demo__cal iframe { border-radius: var(--r-2); }


.demo__close {
  position: absolute;
  top: var(--s4);
  right: var(--s4);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(27, 30, 25, 0.07);
  color: var(--ink-2);
  font-size: 20px;
  line-height: 1;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
/* A 44px target without a 44px circle. */
.demo__close::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
}
.demo__close:hover { background: rgba(27, 30, 25, 0.14); color: var(--ink); }
.demo__close:active { background: rgba(27, 30, 25, 0.2); }

/* --- progress ------------------------------------------------------------- */

.demo__progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  /* Clears the close button pinned to the top-right of the card. */
  padding-right: var(--s7);
  margin-bottom: var(--s6);
}
.demo__stage { display: flex; flex-direction: column; gap: 7px; }
.demo__stage-bar {
  height: 2px;
  border-radius: 1px;
  background: var(--line);
  transition: background-color 260ms var(--ease);
}
.demo__stage-label {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  transition: color 260ms var(--ease);
}
.demo__stage.is-done .demo__stage-bar { background: var(--line-strong); }
.demo__stage.is-current .demo__stage-bar { background: var(--ink); }
.demo__stage.is-current .demo__stage-label { color: var(--ink); font-weight: 500; }

/* --- form ----------------------------------------------------------------- */

.demo__title {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.demo__sub { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--ink-2); }

.demo__form > .field { margin-top: var(--s5); }
.demo__form > .demo__sub + .field { margin-top: var(--s6); }

.field__label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-2);
}
.field__input {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-sm);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.field__input::placeholder { color: var(--ink-3); }
.field__input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(27, 30, 25, 0.08);
}
.field__input--area {
  height: auto;
  min-height: 120px;
  padding: 11px 13px;
  line-height: 1.5;
  resize: vertical;
}
.field__input.is-invalid { border-color: var(--alert); }
.field__error:not(:empty) {
  margin-top: 5px;
  font-size: var(--fs-xs);
  color: var(--alert);
}

.demo__error:not(:empty) {
  margin-top: var(--s5);
  padding: 10px 13px;
  border-radius: var(--r-2);
  background: var(--alert-bg);
  color: var(--alert);
  font-size: var(--fs-sm);
}

.demo__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s4);
  margin-top: var(--s6);
}
.demo__back { margin-right: auto; height: 40px; padding-inline: 0; }
/* Back sits alone on the booking step, so it keeps the left edge. Declared
   after .demo__actions so the modifier actually wins. */
.demo__actions--quiet { justify-content: flex-start; margin-top: var(--s5); }
.demo__actions--quiet .demo__back { margin-right: 0; }
.demo__arrow { margin-left: 2px; }
.demo__submit.is-busy { opacity: 0.65; cursor: default; }
.demo__submit.is-busy .demo__arrow { display: none; }

.demo__done { text-align: center; padding-block: var(--s5) var(--s2); }
.demo__done .demo__sub { margin-inline: auto; max-width: 34ch; }
.demo__done .demo__actions { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .demo-overlay.is-open,
  .demo-overlay.is-open .demo { animation: none !important; }
}

/* Without backdrop-filter the scrim alone has to do the separating. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .demo-overlay { background: rgba(28, 30, 26, 0.62); }
}

@media (max-width: 560px) {
  .demo-overlay { padding: 16px; }
  .demo { max-width: none; }
  .demo__body { padding: var(--s5) var(--s4) var(--s4); }
  .demo__progress { gap: var(--s2); padding-right: var(--s6); margin-bottom: var(--s5); }
  .demo__stage-label { font-size: 11px; }
  .demo__actions { flex-wrap: wrap; gap: var(--s3); }
  .demo--wide { max-width: none; }
  .demo__cal { min-height: 380px; margin-top: var(--s4); }
  .demo__submit { width: 100%; }
  .demo__back { order: 1; margin-right: 0; width: 100%; justify-content: center; }
}

/* ============================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1040px) {
  .configure { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .frag__sources { grid-template-columns: repeat(4, 1fr); }
  .frag__source:nth-child(4n + 1) { border-left: 0; }
  .frag__source:nth-child(n + 5)  { border-top: 1px solid var(--line-soft); }
  .frag__source:last-child:nth-child(4n + 3) { grid-column: span 2; }
  .frag__fan { display: none; }
  .frag__drop { margin-top: var(--s6); }

  .verticals { grid-template-columns: repeat(2, 1fr); }
  .vertical:nth-child(3n + 1) { border-left: 1px solid var(--line-soft); }
  .vertical:nth-child(-n + 3) { border-top: 1px solid var(--line-soft); }
  .vertical:nth-child(2n + 1) { border-left: 0; }
  .vertical:nth-child(-n + 2) { border-top: 0; }

  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2n + 1) { border-left: 0; }
  .stat:nth-child(n + 3)  { border-top: 1px solid var(--line-soft); }

}

@media (max-width: 880px) {
  .ac__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'cat cat' 'desc desc' 'val end';
    gap: var(--s2) var(--s4);
    padding-block: var(--s5);
  }
  .ac__cat  { grid-area: cat; }
  .ac__desc { grid-area: desc; }
  .ac__val  { grid-area: val; text-align: left; }
  .ac__end  { grid-area: end; }
}

@media (max-width: 760px) {
  .step__grid { grid-template-columns: 1fr; gap: var(--s5); }
  .step__rail::before { display: none; }
  .step__num { width: 30px; height: 30px; }

  .header__nav { gap: var(--s3); }
  .header__link { display: none; }

  .hero__line--rot { white-space: normal; }

  /* On its own line the phrase is centred, so the pinned width that keeps the
     desktop line static is no longer wanted. */
  .rot { width: 100% !important; }
  .rot-track { align-items: center; }

  /* A wide illustration seen through a narrow window: the swarm keeps its
     shape and the screen crops it, rather than the swarm reflowing into a
     tidy column. Full-bleed, so pills run off both edges. */
  .cloud {
    margin-inline: calc(-1 * var(--gutter));
    overflow: hidden;
  }
  .cloud__field { width: 145%; margin-left: -22.5%; }
  .pill__i { padding: 5px 10px; font-size: 13px; }

  .plane { margin-top: calc(-1 * var(--overlap, 56px)); }

  /* Two full-width stacked cards is a lot of scrolling for a comparison the
     eye wants to make side by side. A snapping rail keeps them adjacent, and
     the peek of the second card is the affordance. Full-bleed so the peek
     sits at the screen edge. */
  .configure {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
  }
  .configure > * {
    /* Against the viewport, not the padded rail, so the card is a predictable
       share of the screen and the next one peeks by a consistent amount. */
    flex: 0 0 84vw;
    scroll-snap-align: start;
  }
  .flow, .rules { padding: var(--s5) var(--s4); }
  .flow__chain { margin-top: var(--s4); }
  .flow__step { min-height: 30px; }
  .perms { margin-top: var(--s5); }
  .perms__row { padding: 9px 0; }
  .rules__list { margin-top: var(--s4); gap: var(--s2); }
  .rules__item { padding: var(--s3); }
  .rules__foot { margin-top: var(--s4); }

  /* No room for the count beside the title. */
  .wf__meta { margin-left: 0; flex-basis: 100%; }

  /* The chain stays horizontal and simply runs past the edge — a stack of
     five full-width cards loses the idea of a process entirely. The card
     clips it, and the partial node at the edge says it continues. */
  .wf__steps {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
  .wf__steps::-webkit-scrollbar { display: none; }

  .wf__node {
    max-width: 100px;
    min-height: 44px;
    padding: 5px 8px;
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }
  .wf__arrow { width: 10px; }


  /* A loose cluster of small plates rather than a table: the point of this
     visual is disparate sources converging, and a bordered 2-column grid
     reads as a taxonomy and eats the screen. The enclosing card goes; each
     source becomes a soft tile, and the notes go with it — the paragraph
     above already says what lives where. */
  .frag__sources {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
  }
  .frag__source {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 76px;
    min-height: 62px;
    padding: var(--s2) var(--s3);
    border: 0;
    border-radius: var(--r-2);
    background: var(--surface-soft);
  }
  /* Just off the baseline, so the cluster reads as scattered sources rather
     than a centred stack. Small: every pixel here is vertical space. */
  .frag__source:nth-child(3n + 2) { margin-top: 7px; }
  .frag__source-note { display: none; }

  /* The strip's fan and drop are replaced by wires measured from the tiles. */
  .frag__fan, .frag__drop { display: none; }

  .frag { position: relative; }
  .frag__wires {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  .frag__wires path { fill: none; stroke: var(--line-strong); stroke-width: 1; }

  /* Above the wires, so a connector running past a tile tucks behind it. */
  .frag__source { position: relative; z-index: 1; }

  /* Room for the wires to converge, and no more. */
  .frag__target { margin-top: 58px; }

  /* --- action center: a compact console, not a squeezed dashboard ------- */

  /* Roughly 16px of air each side, wider than the body gutter allows. */
  .ac { margin-inline: calc(16px - var(--gutter)); }

  .ac__head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s3);
    padding: var(--s4) var(--s4) var(--s3);
  }

  /* Three fixed segments that always fit the card: equal columns rather than
     a row that can outgrow it and clip the last tab. */
  .tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
  }
  .tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 6px 4px;
    font-size: 11.5px;
    white-space: nowrap;
  }
  .tab__count { margin-left: 0; }

  /* Label over count: three equal thirds that read as a segmented control
     rather than three lines of squeezed text. */
  .tab {
    flex-direction: column;
    gap: 1px;
    padding: 5px 4px;
    line-height: 1.2;
  }
  .tab__label { font-size: 11.5px; }
  .tab__count { font-size: 10.5px; }

  /* --- footer: wordmark over a plain vertical list ----------------------- */
  .footer {
    flex-direction: column;
    align-items: flex-start;   /* wordmark and every link share one left edge */
    gap: var(--s5);
    padding-block: var(--s6);
  }
  .footer__utility { flex-direction: column; gap: 11px; }

  .stat { padding: var(--s4); }
  .stat__value { font-size: 20px; }

  .ac__row { padding: var(--s4); gap: 5px var(--s3); }
  .ac__cat { font-size: 11px; }

  .cta__actions { flex-direction: column; align-items: stretch; }
}

@media (max-width: 460px) {
  .verticals { grid-template-columns: 1fr; }
  .vertical  { border-left: 0 !important; border-top: 1px solid var(--line-soft) !important; }
  .vertical:first-child { border-top: 0 !important; }
}

/* ============================================================================
   Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gradient-fallback { animation: none; }
  .rot-track { transition: none !important; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .ac__row { opacity: 1; transform: none; animation: none !important; }
  .js .plane   { opacity: 1; transform: none; transition: none; }
  .js .wf__node, .js .wf__arrow { opacity: 1; transform: none; animation: none !important; }
  .pill__i { animation: none !important; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}