/* baild.com — landing page styles.
   Brand source of truth: ../../branding/BRAND.md (Ink & Cyan, locked 2026-07-12).
   Ink #0E2A47 grounds · cyan #4FD2FF (deep twin #0B7FA8 on light) · amber #FFB224 = approval only
   · paper #F2F6F9 · drafting grid ≤ .1 opacity on ink.
   Type: Archivo Black (display) / IBM Plex Sans (body) / IBM Plex Mono 500 (annotations). */

/* ---------- fonts (self-hosted, latin subsets) ---------- */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/archivo-black-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/plex-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/plex-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/plex-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/plex-mono-500.woff2') format('woff2');
}

/* ---------- tokens ---------- */
:root {
  --ink: #0E2A47;
  --ink-deep: #0A1F36;        /* nav / footer, one step darker than ink */
  --ink-raise: #14355A;       /* raised surfaces on ink */
  --cyan: #4FD2FF;
  --cyan-deep: #0B7FA8;       /* cyan's accessible twin on light grounds */
  --amber: #FFB224;           /* the approval node. never a large surface */
  --paper: #F2F6F9;
  --white: #FFFFFF;
  --line-light: #D8E2EA;      /* hairlines on light grounds */
  --line-ink: rgba(79, 210, 255, .22);   /* hairlines on ink */
  --grid: rgba(79, 210, 255, .09);
  --grid-cell: 34px;
  --body-ink: #21374E;        /* body text on light: ink nudged for long reading */
  --muted-ink: #51677D;       /* secondary text on light, AA on paper/white */
  --muted-paper: #A8C0D4;     /* secondary text on ink, AA */

  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --step-0: 1.0625rem;                                 /* body 17px */
  --step-1: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);     /* lead */
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem);         /* h3 */
  --step-3: clamp(1.9rem, 1.5rem + 1.9vw, 2.9rem);     /* h2 */
  --step-4: clamp(2.4rem, 1.7rem + 3.4vw, 4.35rem);    /* hero h1 */

  --space-section: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --radius: 10px;
  --radius-lg: 16px;

  --z-nav: 30;
  --ease-out: cubic-bezier(.19, 1, .22, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--body-ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--cyan-deep); }

.wrap {
  width: min(1120px, 100% - 2.5rem);
  margin-inline: auto;
}

/* the drafting grid, only on ink grounds */
.ink-ground {
  background-color: var(--ink);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  color: var(--paper);
}

/* mono annotation voice: real callouts only, never decoration */
.annot {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--ink-deep);
  border-bottom: 1px solid var(--line-ink);
}
.nav-inner {
  display: flex; align-items: center; gap: 2rem;
  padding-block: .9rem;
}
.nav-brand { display: flex; align-items: center; flex-shrink: 0; }
.nav-brand svg, .nav-brand img { height: 26px; width: auto; }
.nav-links {
  display: flex; align-items: center; gap: 1.75rem;
  margin-left: auto;
}
.nav-links a.nav-link {
  color: var(--paper); text-decoration: none;
  font-weight: 500; font-size: .95rem;
  padding-block: .25rem;
  border-bottom: 2px solid transparent;
  transition: border-color .2s var(--ease-out);
}
.nav-links a.nav-link:hover { border-bottom-color: var(--cyan); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  padding: .8rem 1.5rem; border-radius: var(--radius);
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .18s var(--ease-out);
}
.btn-cyan {
  background: var(--cyan); color: var(--ink); border-color: var(--cyan);
}
.btn-cyan:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(79, 210, 255, .35); }
.btn-ghost-ink {
  background: transparent; color: var(--paper); border-color: rgba(242, 246, 249, .35);
}
.btn-ghost-ink:hover { border-color: var(--paper); }
.btn-sm { padding: .55rem 1.1rem; font-size: .9rem; }

/* ---------- hero ---------- */
.hero { overflow: hidden; }
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: clamp(2.5rem, 4vw, 4.5rem);
  align-items: center;
  padding-block: clamp(4rem, 3rem + 5vw, 7.5rem) clamp(4.5rem, 3.5rem + 5vw, 8rem);
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: .75rem;
  color: var(--cyan);
}
/* measurement bracket: a real annotation calling out the product category */
.hero-kicker::before, .hero-kicker::after {
  content: ""; height: 1px; width: 26px; background: var(--cyan);
  opacity: .7;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--paper);
  margin-top: 1.25rem;
}
.hero h1 .hl-cyan { color: var(--cyan); }
.hero h1 .hl-amber { color: var(--amber); }
.hero-sub {
  margin-top: 1.5rem;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--muted-paper);
  max-width: 34ch;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.25rem; }

/* ---------- hero vignette: the product, drawn ---------- */
.vignette { position: relative; }
.browser {
  background: var(--ink-raise);
  border: 1px solid var(--line-ink);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(4, 14, 26, .55);
  overflow: hidden;
  font-size: .8rem;
}
.browser-bar {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .9rem;
  background: var(--ink-deep);
  border-bottom: 1px solid var(--line-ink);
}
.browser-dots { display: flex; gap: .35rem; }
.browser-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(242,246,249,.22); }
.browser-url {
  font-family: var(--font-mono); font-weight: 500; font-size: .7rem;
  color: var(--muted-paper);
  background: rgba(242,246,249,.07);
  border-radius: 6px; padding: .3rem .8rem;
  flex: 1; max-width: 300px;
}
.browser-body {
  display: grid; grid-template-columns: 38fr 62fr;
  min-height: 380px;
}

/* left rail: the conversation */
.convo {
  padding: 1rem;
  border-right: 1px solid var(--line-ink);
  display: flex; flex-direction: column; gap: .7rem;
}
.bubble {
  border-radius: 10px; padding: .6rem .75rem;
  line-height: 1.5; font-size: .78rem;
  max-width: 95%;
}
.bubble-po { background: rgba(79, 210, 255, .1); color: var(--paper); border: 1px solid rgba(79,210,255,.18); }
.bubble-owner { background: rgba(242, 246, 249, .09); color: var(--paper); align-self: flex-end; }
.bubble-link {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .45rem;
  font-weight: 600; color: var(--cyan);
}
.bubble-link::before { content: "→"; }
.convo-label { color: var(--muted-paper); font-size: .62rem; margin-bottom: .2rem; }

/* right pane: the drawn client page (client's colors, never Baild's) */
.canvas {
  position: relative;
  background: var(--paper);
  padding: 1.9rem 2.1rem 1.4rem 1.4rem;
  display: flex; flex-direction: column;
}
.client-page {
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(14, 42, 71, .1);
  flex: 1;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.client-topbar {
  display: flex; align-items: center; gap: .6rem;
  background: #1E7A63;              /* the sample client's brand, deliberately not Baild cyan */
  color: #fff;
  padding: .55rem .8rem;
  font-weight: 600; font-size: .74rem;
}
.client-topbar .client-navlink { opacity: .75; font-weight: 500; margin-left: .5rem; }
.client-body { padding: .9rem; display: flex; flex-direction: column; gap: .65rem; }
.client-h { font-weight: 600; color: #17324B; font-size: .82rem; }
.client-row {
  display: grid; grid-template-columns: 2fr 1fr 1fr .8fr; gap: .5rem;
  align-items: center;
  border: 1px solid var(--line-light); border-radius: 6px;
  padding: .45rem .6rem; font-size: .68rem; color: #51677D;
}
.client-row b { color: #17324B; font-weight: 600; }
.client-chip {
  justify-self: start;
  background: #E7F3EF; color: #1E7A63;
  border-radius: 99px; padding: .1rem .5rem;
  font-size: .62rem; font-weight: 600;
}
.client-btn {
  align-self: flex-start;
  background: #1E7A63; color: #fff;
  border-radius: 6px; padding: .4rem .8rem;
  font-size: .7rem; font-weight: 600;
}

/* measurement annotations over the canvas (Baild chrome, cyan) */
.measure {
  position: absolute;
  font-family: var(--font-mono); font-weight: 500;
  font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cyan-deep);
  display: flex; align-items: center; gap: .45rem;
}
.measure .tick { height: 1px; background: var(--cyan-deep); opacity: .65; flex: 1; min-width: 22px; }
.measure-top { top: .55rem; left: 1.4rem; right: 1.4rem; }
.measure-side {
  top: 50%; right: .1rem;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  gap: 0;
}
.measure-side .tick { display: none; }

/* the approval beat under the canvas */
.approve-beat {
  display: flex; align-items: center; gap: .6rem;
  margin-top: .9rem;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 8px;
  padding: .55rem .8rem;
  font-size: .74rem; font-weight: 600; color: #17324B;
}
.node {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(255, 178, 36, .22);
  flex-shrink: 0;
}
.approve-beat .approve-cta {
  margin-left: auto;
  background: var(--ink); color: var(--paper);
  border-radius: 6px; padding: .35rem .7rem;
  font-size: .66rem; font-weight: 600;
}

/* ---------- section scaffolding ---------- */
.section { padding-block: var(--space-section); }
.section-paper { background: var(--paper); }
.section-white { background: var(--white); }
.section h2 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--ink);
}
.section .lede {
  margin-top: 1.1rem;
  font-size: var(--step-1);
  color: var(--muted-ink);
  max-width: 52ch;
  line-height: 1.55;
}

/* ---------- how it works: a real sequence, drawn as one ---------- */
.steps {
  margin-top: clamp(2.5rem, 4vw, 4rem);
  display: grid;
  gap: clamp(2.25rem, 3vw, 3.25rem);
}
.step {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: center;
}
.step:nth-child(even) .step-copy { order: 2; }
.step:nth-child(even) .step-visual { order: 1; }
.step-no {
  font-family: var(--font-mono); font-weight: 500;
  font-size: .75rem; letter-spacing: .14em;
  color: var(--cyan-deep);
  display: flex; align-items: center; gap: .6rem;
}
.step-no .tick { height: 1px; width: 30px; background: var(--cyan-deep); opacity: .6; }
.step h3 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.15;
  color: var(--ink);
  margin-top: .7rem;
}
.step p { margin-top: .8rem; color: var(--body-ink); max-width: 46ch; }
.step p b { color: var(--ink); }

.step-visual {
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 40px rgba(14, 42, 71, .08);
  padding: 1.25rem;
  min-height: 200px;
  display: flex; flex-direction: column; justify-content: center; gap: .7rem;
  font-size: .82rem;
}

/* step vignettes */
.sv-bubble {
  border-radius: 10px; padding: .65rem .85rem; line-height: 1.5;
  font-size: .82rem; max-width: 92%;
}
.sv-po { background: #E5F6FD; color: #17324B; }
.sv-owner { background: var(--paper); color: #17324B; align-self: flex-end; }
.sv-label { font-size: .62rem; color: var(--muted-ink); }

.sv-pages { display: flex; gap: .7rem; align-items: stretch; }
.sv-page {
  flex: 1; border: 1px solid var(--line-light); border-radius: 8px;
  padding: .55rem; background: var(--white);
  display: flex; flex-direction: column; gap: .35rem;
}
.sv-page .ph { height: 7px; border-radius: 3px; background: var(--paper); }
.sv-page .ph-head { background: #1E7A63; opacity: .85; height: 9px; }
.sv-page.active { border-color: var(--cyan-deep); box-shadow: 0 0 0 3px rgba(11, 127, 168, .12); }
.sv-page-name { font-family: var(--font-mono); font-weight: 500; font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-deep); }

.sv-approve {
  display: flex; align-items: center; gap: .7rem;
  border: 1px solid var(--line-light); border-radius: 10px;
  padding: .8rem .95rem; background: var(--white);
  font-weight: 600; color: var(--ink);
}
.sv-approve small { display: block; font-weight: 400; color: var(--muted-ink); margin-top: .15rem; }
.sv-locked {
  display: flex; align-items: center; gap: .5rem;
  font-size: .74rem; color: var(--muted-ink);
}
.sv-locked svg { width: 13px; height: 13px; flex-shrink: 0; }

.sv-verify {
  display: flex; flex-direction: column; gap: .5rem;
}
.sv-check {
  display: flex; align-items: center; gap: .6rem;
  font-size: .8rem; color: var(--body-ink);
}
.sv-check .ok {
  width: 16px; height: 16px; border-radius: 50%;
  background: #17805F; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .6rem; flex-shrink: 0;
}
.sv-verdict {
  margin-top: .3rem;
  font-family: var(--font-mono); font-weight: 500; font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; color: #17805F;
}

/* ---------- for agencies ---------- */
.agency-grid {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
.agency-points { display: flex; flex-direction: column; }
.agency-point { padding-block: 1.6rem; }
.agency-point + .agency-point { border-top: 1px solid var(--line-light); }
.agency-point h3 {
  font-size: 1.2rem; font-weight: 600; color: var(--ink);
  font-family: var(--font-body);
}
.agency-point p { margin-top: .55rem; color: var(--body-ink); max-width: 52ch; }

/* the link-invite vignette */
.invite-card {
  background: var(--ink);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--paper);
  position: sticky; top: 90px;
}
.invite-card .annot { color: var(--cyan); }
.invite-link {
  margin-top: 1rem;
  display: flex; align-items: center; gap: .6rem;
  background: rgba(242,246,249,.07);
  border: 1px solid var(--line-ink);
  border-radius: 8px; padding: .65rem .9rem;
  font-family: var(--font-mono); font-weight: 500; font-size: .72rem;
  color: var(--paper);
  overflow-wrap: anywhere;
}
.invite-copybtn {
  margin-left: auto; flex-shrink: 0;
  background: var(--cyan); color: var(--ink);
  border-radius: 6px; padding: .25rem .6rem;
  font-family: var(--font-body); font-weight: 600; font-size: .72rem;
}
.invite-steps { margin: 1.4rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .8rem; }
.invite-steps li {
  display: flex; gap: .7rem; align-items: baseline;
  font-size: .92rem; color: var(--muted-paper); line-height: 1.5;
}
.invite-steps li b { color: var(--paper); font-weight: 600; }
.invite-steps .idot {
  font-family: var(--font-mono); font-weight: 500; font-size: .66rem;
  color: var(--cyan); flex-shrink: 0;
}

/* ---------- honesty beat ---------- */
.honesty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
.readiness {
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 40px rgba(14, 42, 71, .08);
  padding: 1.5rem;
}
.readiness-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.readiness-head .annot { color: var(--cyan-deep); }
.readiness-pct { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); }
.readiness-bar {
  margin-top: .9rem; height: 10px; border-radius: 99px;
  background: var(--paper); overflow: hidden;
}
.readiness-bar span {
  display: block; height: 100%; width: 68%;
  background: var(--cyan-deep); border-radius: 99px;
}
.readiness-rows { margin-top: 1.1rem; display: flex; flex-direction: column; }
.readiness-row {
  display: flex; align-items: center; gap: .7rem;
  padding-block: .55rem; font-size: .88rem; color: var(--body-ink);
}
.readiness-row + .readiness-row { border-top: 1px solid var(--paper); }
.readiness-row .state {
  margin-left: auto;
  font-family: var(--font-mono); font-weight: 500; font-size: .6rem;
  letter-spacing: .12em; text-transform: uppercase;
}
.state-ok { color: #17805F; }
.state-open { color: #B4540A; }

/* ---------- waitlist / start a build ---------- */
.start-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  padding-block: var(--space-section);
}
.start-inner h2 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.12;
  color: var(--paper);
}
.start-inner .lede { color: var(--muted-paper); }
.start-note {
  margin-top: 1.75rem;
  display: flex; align-items: center; gap: .65rem;
  font-size: .95rem; color: var(--muted-paper);
}

.waitlist {
  background: var(--ink-raise);
  border: 1px solid var(--line-ink);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.waitlist .annot { color: var(--cyan); }
.field { margin-top: 1.1rem; }
.field label {
  display: block; font-weight: 500; font-size: .9rem;
  color: var(--paper); margin-bottom: .4rem;
}
.field input {
  width: 100%; min-height: 48px;
  background: rgba(242, 246, 249, .06);
  border: 1px solid rgba(242, 246, 249, .25);
  border-radius: var(--radius);
  color: var(--paper);
  font-family: var(--font-body); font-size: 1rem;
  padding: .65rem .9rem;
  transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.field input::placeholder { color: rgba(242, 246, 249, .55); }
.field input:focus {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(79, 210, 255, .2);
}
.waitlist .btn { width: 100%; margin-top: 1.4rem; min-height: 50px; }
.waitlist-fineprint { margin-top: .9rem; font-size: .82rem; color: var(--muted-paper); text-align: center; }
.form-msg {
  margin-top: 1rem; border-radius: var(--radius);
  padding: .75rem .9rem; font-size: .92rem; line-height: 1.5;
  display: none;
}
.form-msg.ok { display: block; background: rgba(79, 210, 255, .12); border: 1px solid rgba(79,210,255,.35); color: var(--paper); }
.form-msg.err { display: block; background: rgba(255, 120, 120, .1); border: 1px solid rgba(255, 120, 120, .4); color: #FFD6D6; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- footer ---------- */
.footer {
  background: var(--ink-deep);
  color: var(--muted-paper);
  border-top: 1px solid var(--line-ink);
}
.footer-inner {
  padding-block: 2.5rem;
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
.footer-brand { display: flex; align-items: center; gap: .75rem; }
.footer-brand img, .footer-brand svg { height: 22px; width: auto; }
.footer-tag { font-size: .92rem; }
.footer-meta { margin-left: auto; font-size: .85rem; }

/* ---------- reveal motion (enhances an already-visible default) ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.js .vignette.reveal { transform: translateY(26px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .nav-links a.nav-link { transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-sub { max-width: 46ch; }
  .agency-grid, .honesty, .start-inner { grid-template-columns: 1fr; }
  .invite-card { position: static; }
  .step, .step:nth-child(even) { grid-template-columns: 1fr; }
  .step:nth-child(even) .step-copy { order: 1; }
  .step:nth-child(even) .step-visual { order: 2; }
  .step p { max-width: 60ch; }
}
@media (max-width: 640px) {
  .nav-links a.nav-link { display: none; }
  .browser-body { grid-template-columns: 1fr; }
  .convo { border-right: 0; border-bottom: 1px solid var(--line-ink); }
  .measure-side { display: none; }
  .hero-ctas .btn { flex: 1; min-width: 200px; }
}