/*
 * Operansa landing page.
 *
 * Direction: ink-blue foundation, one cool accent that only ever means "progress",
 * warm off-white text. Practical rather than futuristic. The call to action is
 * warm paper white on purpose: the brightest object on the page.
 *
 * Rules this file follows:
 * - Shape: anything interactive is a pill. Containers use one nested radius pair
 *   (28px outer, 22px inner = outer minus the 6px bezel). Icon tiles use 12px.
 * - Motion: transform and opacity only, ease-out curves, and every animation is
 *   switched off under prefers-reduced-motion. Final states are the CSS defaults,
 *   animations only run *from* an earlier state.
 * - Layers: nav 40, skip link 60. The grain sits behind all content (z-index -1).
 */

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

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Ink foundation */
  --bg: #070b13;
  --surface: #0e1523;
  --surface-hi: #121b2d;
  --surface-2: #17223a;
  --line: rgb(160 182 220 / 0.12);
  --line-strong: rgb(160 182 220 / 0.22);

  /* Warm neutrals for text */
  --text: #edebe6;
  --text-2: #a9b2c3;
  --text-3: #8791a6;

  /* The single accent: progress (lines, nodes, ticks, highlights).
     Change --accent-rgb to re-colour every detail on the page. */
  --accent-rgb: 134 192 252;
  --accent: rgb(var(--accent-rgb));
  --accent-soft: rgb(var(--accent-rgb) / 0.1);
  --accent-line: rgb(var(--accent-rgb) / 0.34);

  /* Primary button: warm paper white with an ink arrow chip. */
  --cta: #f1eee8;
  --cta-hi: #fbfaf7;
  --cta-fg: #0a101b;
  --cta-chip-bg: #0a101b;
  --cta-chip-fg: #f1eee8;

  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --r-pill: 999px;
  --r-xl: 28px;
  --r-lg: 22px;
  --r-sm: 12px;

  --z-nav: 40;
  --z-skip: 60;

  /* Content width grows with big screens instead of floating in a 1200px column. */
  --wrap: clamp(1200px, 76vw, 1360px);
  --gutter: clamp(20px, 4vw, 40px);
}

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 88px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  position: relative;
  margin: 0;
  min-height: 100dvh;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Static grain. It dithers the dark gradients so they do not band. Fixed, behind content. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection {
  background: rgb(var(--accent-rgb) / 0.3);
  color: var(--text);
}

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

h1,
h2,
h3 {
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
}

svg {
  display: block;
}

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.wrap {
  width: min(var(--wrap), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: 16px;
  top: -72px;
  z-index: var(--z-skip);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s var(--ease-out);
}

.skip:focus {
  top: 16px;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

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

.btn {
  --h: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: var(--h);
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: 600 0.9375rem/1 var(--font-sans);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 0.16s var(--ease-out),
    background-color 0.25s var(--ease-out),
    border-color 0.25s var(--ease-out);
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  padding: 0 calc((var(--h) - var(--icon)) / 2) 0 calc(var(--h) * 0.46);
  --icon: calc(var(--h) - 12px);
  background: var(--cta);
  color: var(--cta-fg);
  box-shadow:
    inset 0 -1px 0 rgb(10 16 27 / 0.12),
    0 16px 34px -20px rgb(var(--accent-rgb) / 0.5);
}

/* Trailing arrow lives in its own circle, flush with the button's inner padding. */
.btn__icon {
  display: grid;
  place-items: center;
  width: var(--icon);
  height: var(--icon);
  border-radius: 50%;
  background: var(--cta-chip-bg);
  color: var(--cta-chip-fg);
  transition: transform 0.4s var(--ease-drawer);
}

.btn__icon .icon {
  width: 46%;
  height: 46%;
}

.btn--ghost {
  background: rgb(255 255 255 / 0.03);
  border-color: var(--line-strong);
  color: var(--text);
}

.btn--sm {
  --h: 40px;
  font-size: 0.875rem;
}

.btn--lg {
  --h: 58px;
  font-size: 1.0625rem;
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    background: var(--cta-hi);
  }

  .btn--primary:hover .btn__icon {
    transform: translate(2px, -1px) scale(1.06);
  }

  .btn--ghost:hover {
    background: rgb(255 255 255 / 0.07);
    border-color: rgb(160 182 220 / 0.38);
  }
}

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  inset: 16px 0 auto;
  z-index: var(--z-nav);
  pointer-events: none;
}

.nav__bar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(calc(var(--wrap) - 120px), 100% - var(--gutter) * 2);
  height: 56px;
  margin-inline: auto;
  padding: 0 8px 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgb(10 16 27 / 0.6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  transition:
    background-color 0.4s var(--ease-out),
    border-color 0.4s var(--ease-out);
}

.nav.is-scrolled .nav__bar {
  background: rgb(10 16 27 / 0.86);
  border-color: var(--line-strong);
}

@media (prefers-reduced-transparency: reduce) {
  .nav__bar {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px; /* comfortable tap target, the visual size does not change */
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand__mark {
  width: 26px;
  height: 26px;
  color: var(--text);
}

.nav__links {
  display: flex;
  gap: 2px;
}

.nav__links a {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  color: var(--text-2);
  font-size: 0.9375rem;
  text-decoration: none;
  transition:
    color 0.2s var(--ease-out),
    background-color 0.2s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover {
    color: var(--text);
    background: rgb(255 255 255 / 0.05);
  }
}

.nav-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 24px;
  pointer-events: none;
}

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

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 100dvh;
  padding: 104px 0 40px;
  overflow: clip;
}

/* Soft ambient light behind the workflow panel and at the top left. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(44% 46% at 76% 42%, rgb(var(--accent-rgb) / 0.1), transparent 72%),
    radial-gradient(38% 40% at 6% 4%, rgb(72 112 224 / 0.11), transparent 72%);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.hero__copy {
  container-type: inline-size;
}

.pill {
  display: inline-flex;
  padding: 9px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.03);
  color: var(--text-2);
  font: 500 0.8125rem/1.25 var(--font-mono);
}

.h1 {
  margin-top: 22px;
  font-size: 2.25rem;
  font-size: clamp(2.25rem, 8.4cqi, 4rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.h1 span {
  display: block;
}

.h1__dim {
  color: var(--text-2);
}

.lead {
  max-width: 33rem;
  margin-top: 24px;
  color: var(--text-2);
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem);
  line-height: 1.55;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

/* Load-in for the hero: hierarchy, top to bottom. */
@media (prefers-reduced-motion: no-preference) {
  .rise {
    animation: rise 0.9s var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 90ms + 80ms);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
}

/* ---------- Bezel: outer shell plus inner core ---------- */

.bezel {
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: rgb(255 255 255 / 0.03);
}

.core {
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-hi), var(--surface));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
}

/* ---------- Hero workflow panel ---------- */

.flow {
  width: 100%;
  max-width: 560px;
  justify-self: end;
}

.flow .core {
  overflow: hidden;
}

.flow__head {
  padding: 15px 22px;
  border-bottom: 1px solid var(--line);
  color: var(--text-3);
  font: 500 0.8125rem/1.2 var(--font-mono);
}

.flow__list {
  display: grid;
  gap: 26px;
  padding: 24px 22px 26px;
  list-style: none;
}

.stage {
  --t: 0.9s;
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 16px;
}

.stage:nth-child(2) {
  --t: 2.1s;
}

.stage:nth-child(3) {
  --t: 3.3s;
}

.stage__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}

.stage__node .icon {
  width: 18px;
  height: 18px;
}

/* Connector from this node down to the next one. */
.stage:not(:last-child)::before,
.stage:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 17.5px;
  top: 40px;
  bottom: -22px;
  width: 1px;
  transform-origin: top;
}

.stage:not(:last-child)::before {
  background: var(--line-strong);
}

.stage:not(:last-child)::after {
  background: linear-gradient(180deg, var(--accent), var(--accent-line));
}

.stage__who {
  color: var(--text-3);
  font: 500 0.8125rem/1.3 var(--font-mono);
}

.stage__title {
  margin-top: 3px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.draft {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgb(255 255 255 / 0.03);
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.draft del {
  color: var(--text-3);
  text-decoration-color: rgb(237 235 230 / 0.45);
}

.draft ins {
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--accent-soft);
  box-shadow: inset 0 -1px 0 var(--accent-line);
  color: var(--accent);
  text-decoration: none;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.03);
  color: var(--text-2);
  font: 500 0.75rem/1.35 var(--font-mono);
}

.tag .icon {
  width: 14px;
  height: 14px;
}

.tag--accent {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

.stage__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.checks {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.checks li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.checks .icon {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--accent);
}

.stage__text {
  margin-top: 8px;
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* The panel tells its story in order: draft, correction, shared process, company knowledge. */
@media (prefers-reduced-motion: no-preference) {
  .stage {
    animation: stage-in 0.8s var(--ease-out) backwards;
    animation-delay: var(--t);
  }

  .stage__node {
    animation: node-in 0.6s var(--ease-out) backwards;
    animation-delay: var(--t);
  }

  .stage:not(:last-child)::after {
    animation: line-in 0.9s var(--ease-drawer) backwards;
    animation-delay: calc(var(--t) + 0.5s);
  }

  .draft ins {
    animation: fade-in 0.5s var(--ease-out) backwards;
    animation-delay: 1.5s;
  }

  .stage:first-child .tag--accent {
    animation: fade-in 0.5s var(--ease-out) backwards;
    animation-delay: 1.9s;
  }
}

@keyframes stage-in {
  from {
    opacity: 0.28;
  }
}

@keyframes node-in {
  from {
    border-color: var(--line-strong);
    background: var(--surface-2);
    color: var(--text-3);
  }
}

@keyframes line-in {
  from {
    transform: scaleY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

/* ---------- Shared section rhythm ---------- */

.section {
  padding-block: clamp(88px, 11vw, 160px);
}

.section-head h2 {
  max-width: 20ch;
  font-size: clamp(1.875rem, 1.2rem + 2.2vw, 2.75rem);
  line-height: 1.08;
}

.section-head p {
  max-width: 38rem;
  margin-top: 20px;
  color: var(--text-2);
}

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 80ms);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Why: the statement ---------- */

.statement {
  padding-block: clamp(56px, 8vw, 112px) clamp(88px, 11vw, 160px);
}

.statement__title {
  max-width: 21ch;
  font-size: clamp(2rem, 1rem + 3.5vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.statement__title span {
  color: var(--text-2);
}

.statement__body {
  max-width: 40rem;
  margin-top: 36px;
  margin-left: clamp(0px, 24vw, 360px);
  color: var(--text-2);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
  line-height: 1.6;
}

.statement mark {
  /* No side padding: at a line end it would poke a couple of pixels past the text column. */
  padding: 0;
  background: linear-gradient(transparent 60%, rgb(var(--accent-rgb) / 0.24) 60%);
  color: var(--text);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- How it works: the rail ---------- */

.rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 32px;
  margin-top: 64px;
  padding: 0;
  list-style: none;
}

.rail::before,
.rail::after {
  content: "";
  position: absolute;
  top: 17.5px;
  left: 18px;
  right: 18px;
  height: 1px;
  transform-origin: left;
}

.rail::before {
  background: var(--line-strong);
}

.rail::after {
  background: linear-gradient(90deg, var(--accent), var(--accent-line));
  transition: transform 1.8s var(--ease-drawer);
}

.rail__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  transition:
    color 0.5s var(--ease-out),
    border-color 0.5s var(--ease-out),
    background-color 0.5s var(--ease-out);
  transition-delay: calc(var(--i) * 380ms);
}

.rail__node .icon {
  width: 18px;
  height: 18px;
}

/* The finished state is the default, so the rail still reads without JavaScript.
   With JavaScript it starts quiet and lights up once it scrolls into view. */
.js .rail:not(.is-visible)::after {
  transform: scaleX(0);
}

.js .rail:not(.is-visible) .rail__node {
  border-color: var(--line-strong);
  background: var(--surface-2);
  color: var(--text-3);
}

.rail__body {
  margin-top: 28px;
}

.rail__body h3 {
  font-size: 1.5rem;
  line-height: 1.15;
}

.rail__body p {
  margin-top: 12px;
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .rail::after,
  .rail__node {
    transition: none;
  }
}

/* ---------- What you get: asymmetric tiles ---------- */

.gain__title {
  max-width: 18ch;
  font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.08;
}

.gain__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 56px;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.04), rgb(255 255 255 / 0.012));
  transition: border-color 0.3s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .tile:hover {
    border-color: var(--line-strong);
  }
}

.tile--lead {
  grid-row: span 2;
  justify-content: space-between;
  gap: 40px;
  min-height: 400px;
  background:
    radial-gradient(70% 60% at 0% 0%, rgb(var(--accent-rgb) / 0.14), transparent 72%),
    linear-gradient(180deg, rgb(255 255 255 / 0.045), rgb(255 255 255 / 0.012));
}

.tile__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
}

.tile__icon .icon {
  width: 24px;
  height: 24px;
}

.tile h3 {
  font-size: 1.375rem;
  line-height: 1.2;
}

.tile p {
  color: var(--text-2);
}

.tile--lead h3 {
  font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.25rem);
}

.tile--lead p {
  margin-top: 14px;
  max-width: 24ch;
  color: var(--text);
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
}

/* ---------- Control: the staircase ---------- */

.stairs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  margin-top: 56px;
  padding: 0;
  list-style: none;
}

.stair {
  --h: 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: var(--h);
  padding: 26px 26px 26px;
  border: 1px solid var(--line);
  border-top-color: var(--accent-line);
  border-radius: var(--r-lg) var(--r-lg) 12px 12px;
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.11), rgb(var(--accent-rgb) / 0.015) 75%);
}

.stair:nth-child(2) {
  --h: 268px;
}

.stair:nth-child(3) {
  --h: 336px;
}

.stair h3 {
  font-size: 1.375rem;
}

.stair p {
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.55;
}

.stair__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: auto;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
}

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

/* Automation is gated: dashed, quiet, and explicitly "later". */
.stair--later {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg) var(--r-lg) 12px 12px;
  background: transparent;
}

.stair--later .stair__icon {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--text-3);
}

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

.basics li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: var(--text-2);
  line-height: 1.5;
}

.tick {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}

.tick .icon {
  width: 13px;
  height: 13px;
}

/* ---------- Start: the closing call to action ---------- */

.start {
  padding-block: clamp(32px, 5vw, 64px) clamp(88px, 11vw, 144px);
}

.start__panel {
  max-width: 960px;
  margin-inline: auto;
}

.start__core {
  padding: clamp(44px, 7vw, 92px) clamp(24px, 6vw, 88px);
  background:
    radial-gradient(52% 64% at 50% 0%, rgb(var(--accent-rgb) / 0.15), transparent 72%),
    linear-gradient(180deg, var(--surface-hi), var(--surface));
  text-align: center;
}

.start h2 {
  max-width: 17ch;
  margin-inline: auto;
  font-size: clamp(2rem, 1.1rem + 2.9vw, 3.375rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.start__core > p {
  max-width: 36rem;
  margin: 24px auto 0;
  color: var(--text-2);
}

.start__core .btn {
  margin-top: 36px;
}

.start__core > .start__note {
  max-width: 32rem;
  margin-top: 24px;
  color: var(--text-3);
  font-size: 0.9375rem;
  line-height: 1.55;
}

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

.foot {
  padding-block: 44px 52px;
  border-top: 1px solid var(--line);
}

.foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 40px;
  color: var(--text-3);
  font-size: 0.9375rem;
}

.foot__row .brand {
  color: var(--text);
}

/* ---------- Responsive ---------- */

@media (max-width: 899px) {
  /* Two hero columns need about 900px. Below that the hero stacks, is only as tall as
     its content, and the panel fills the column instead of hugging the left edge. */
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }

  .hero {
    align-items: start;
    min-height: 0;
    padding-top: 128px;
  }

  .h1 {
    font-size: clamp(2.25rem, 8.4cqi, 3.5rem);
  }

  .flow {
    justify-self: stretch;
    max-width: 760px;
  }

  /* The rail turns vertical: the line runs down the left edge. */
  .rail {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    margin-top: 48px;
  }

  .rail::before,
  .rail::after {
    top: 18px;
    bottom: 18px;
    left: 17.5px;
    right: auto;
    width: 1px;
    height: auto;
    transform-origin: top;
  }

  .js .rail:not(.is-visible)::after {
    transform: scaleY(0);
  }

  .rail__item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 22px;
  }

  .rail__body {
    margin-top: 0;
  }

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

  .tile--lead {
    grid-row: auto;
    min-height: 0;
  }

  .stairs {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .stair,
  .stair:nth-child(2),
  .stair:nth-child(3) {
    --h: 0px;
    min-height: 0;
  }

  .stair:nth-child(2) {
    margin-left: 20px;
  }

  .stair:nth-child(3) {
    margin-left: 40px;
  }

  .stair__icon {
    margin-top: 12px;
  }

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

  .statement__body {
    margin-left: 0;
  }
}

@media (max-width: 759px) {
  .nav__links {
    display: none;
  }

  .hero {
    padding-top: 112px;
  }

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

/* Full-width stacked buttons only where the screen is phone-sized. On a 700px wide
   tablet they would turn into 600px slabs. */
@media (max-width: 479px) {
  .actions {
    flex-direction: column;
  }

  .actions .btn {
    width: 100%;
  }

  .btn--primary {
    justify-content: space-between;
  }

  .start__core .btn {
    width: 100%;
  }

  /* Give the text more room: on a 320px phone the panel copy would otherwise get ~170px. */
  .flow__head {
    padding-inline: 16px;
  }

  .flow__list {
    gap: 22px;
    padding: 20px 14px 22px;
  }

  .stage {
    column-gap: 12px;
  }

  /* The connector stops 4px short of the next node; the stage gap is 4px smaller here. */
  .stage:not(:last-child)::before,
  .stage:not(:last-child)::after {
    bottom: -18px;
  }

  .draft {
    padding: 10px 12px;
  }

  .stair {
    padding: 22px;
  }

  .stair:nth-child(2) {
    margin-left: 12px;
  }

  .stair:nth-child(3) {
    margin-left: 24px;
  }
}

/* Compact nav so brand and call to action always fit inside the bar. The bar keeps the same
   side margin as the page content. 320px is the floor that has to work; narrower foldables
   degrade by dropping the arrow chip, then the wordmark. */
@media (max-width: 420px) {
  .nav {
    inset: 12px 0 auto;
  }

  .nav__bar {
    height: 52px;
    gap: 8px;
    padding: 0 6px 0 14px;
  }

  .nav .brand {
    gap: 8px;
    font-size: 1rem;
  }

  .nav .brand__mark {
    width: 24px;
    height: 24px;
  }

  .nav .btn--sm {
    gap: 10px;
    font-size: 0.8125rem;
  }
}

/* Thresholds leave at least ~15px of slack so a fallback font cannot push the button out. */
@media (max-width: 349px) {
  .nav .btn__icon {
    display: none;
  }

  .nav .btn--sm {
    padding-inline: 14px;
  }
}

@media (max-width: 319px) {
  .nav .brand > span {
    display: none;
  }
}