/* KonvertKit marketing site. Coral Classic tokens from packages/brand. */
:root {
  --ink: #111318;
  --coral: #FF5A36;
  --white: #FFFFFF;
  --canvas: #F6F6F7;
  --raised: #E9EAEC;
  --blush: #FFF0EB;
  --rust: #B83216;          /* links + focus on light surfaces */
  --coral-light: #FF937B;   /* links + focus on dark surfaces */
  --muted: #565B65;
  --muted-dark: #BCC0C8;
  --border: #DCDDDF;
  --ink-raised: #24272E;
  --ink-border: #454A54;

  /* Customer demo theme (Northstar), kept separate from first-party tokens */
  --ns-green: #294632;
  --ns-green-soft: #4E6C54;

  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(88px, 12vw, 160px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--rust); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--rust); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 8px;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* Type */
.display {
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.section-title { font-size: clamp(44px, 6.2vw, 84px); }
.lede { font-size: clamp(18px, 1.6vw, 20px); color: var(--muted); max-width: 34em; text-wrap: pretty; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px;
  border-radius: 12px; border: 0;
  font: 700 16px/1 var(--body);
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn-coral { background: var(--coral); color: var(--ink); }
.btn-coral:hover { background: #FF7352; }
.btn-quiet { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-quiet:hover { background: var(--canvas); }
.btn-ink { background: var(--ink); color: var(--white); }
.btn-ink:hover { background: #2A2D35; }
.btn-ink:focus-visible { outline-color: var(--ink); }
.btn-green { background: var(--ns-green); color: var(--white); width: 100%; }
.btn-green:hover { background: #1F3727; }
.btn-green[disabled] { opacity: .75; cursor: default; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.site-header.scrolled { border-bottom-color: var(--border); }
.header-row { display: flex; align-items: center; gap: 32px; height: 72px; }
.logo img { width: 150px; }
.site-header nav { margin-left: auto; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; }
.nav-links a:hover { color: var(--rust); }

/* Hero */
.hero { padding: clamp(48px, 7vw, 96px) 0 var(--section); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(56px, 6.4vw, 96px); }
.hero .lede { margin-top: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-note { margin-top: 28px; font-size: 15px; color: var(--muted); }

/* The relay: lead form → visitor phone */
.relay {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 280px);
  justify-content: center;
  align-items: start;
}
.lead-card {
  position: relative; z-index: 2;
  grid-column: 1; grid-row: 1;
  margin-top: 56px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 30px 60px -30px rgba(17,19,24,.35), 0 2px 6px rgba(17,19,24,.05);
  display: grid; gap: 6px;
}
.lead-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; color: var(--ns-green); margin-bottom: 8px; }
.lead-mark {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  background: var(--ns-green); color: var(--white); font: 800 16px/1 var(--display);
}
.lead-title { font: 800 30px/1 var(--display); margin-bottom: 10px; }
.lead-card label { font-size: 13px; font-weight: 600; margin-top: 6px; }
.lead-card input[type="text"] {
  width: 100%; height: 44px; padding: 0 12px;
  border: 1px solid #C9CBCF; border-radius: 10px; background: #FAFAF9;
  font: 500 16px var(--body); color: var(--ink);
}
.lead-card input[type="text"]:focus { outline: 2px solid var(--ns-green); outline-offset: 1px; border-color: var(--ns-green); }
.lead-card input[readonly] { color: var(--muted); }
.consent { display: flex; gap: 8px; align-items: flex-start; font-weight: 400 !important; font-size: 12px !important; color: var(--muted); line-height: 1.4; margin: 8px 0 10px !important; }
.consent input { margin: 2px 0 0; accent-color: var(--ns-green); }
.lead-foot { font-size: 12px; color: var(--muted); text-align: center; margin-top: 6px; }

.relay-status {
  grid-column: 1; grid-row: 2;
  margin-top: 20px; padding-left: 16px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 10px; border-radius: 999px;
  background: var(--ink); color: var(--white);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.chip.on { opacity: 1; transform: none; }

/* Phones */
.phone {
  position: relative;
  background: var(--ink);
  border-radius: 46px;
  padding: 10px;
  box-shadow: 0 50px 80px -40px rgba(17,19,24,.55);
}
.phone::before {
  content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 24px; border-radius: 14px; background: var(--ink); z-index: 2;
}
.phone-screen { border-radius: 36px; overflow: hidden; background: var(--white); height: 100%; }
.phone-visitor { grid-column: 2; grid-row: 1 / span 2; margin-left: -20px; margin-top: 0; height: 580px; }
.phone-visitor .phone-screen { display: flex; flex-direction: column; }
.relay-pause {
  grid-column: 2; grid-row: 3; justify-self: center; margin: 16px 0 0 -20px;
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: none;
  box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink);
  font: 600 14px var(--body); cursor: pointer;
}
.relay-pause:hover { background: var(--canvas); }
.relay-pause[hidden] { display: none; }
.sms-head {
  padding: 52px 16px 12px; display: grid; justify-items: center; gap: 4px;
  border-bottom: 1px solid var(--raised); background: #FBFBFB;
}
.sms-avatar {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ns-green); color: var(--white); font: 800 20px/1 var(--display);
}
.sms-name { font-size: 12px; font-weight: 600; }
.sms-thread { flex: 1; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; justify-content: flex-end; }
.sms-empty { margin: auto; color: #9A9EA6; font-size: 13px; }
.sms {
  max-width: 84%; padding: 9px 12px; border-radius: 18px;
  font-size: 14px; line-height: 1.35;
  animation: pop .32s cubic-bezier(.2,.9,.3,1.2) both;
}
.sms.from-biz { align-self: flex-start; background: var(--raised); border-bottom-left-radius: 6px; }
.sms.from-me { align-self: flex-end; background: var(--ink); color: var(--white); border-bottom-right-radius: 6px; }
.sms-meta { font-size: 11px; color: #8A8F98; align-self: center; margin: 2px 0; }
.typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; background: var(--raised); border-radius: 18px; border-bottom-left-radius: 6px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #8A8F98; animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }

/* How it works */
.how { padding: var(--section) 0; background: var(--canvas); }
.how .section-title { max-width: 12em; }
.steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(48px, 6vw, 80px);
  border-top: 2px solid var(--ink);
}
.steps li { padding: 28px 28px 0 0; position: relative; }
.steps li + li { padding-left: 28px; border-left: 1px solid var(--border); }
.step-num { font: 800 64px/1 var(--display); color: var(--coral); display: block; margin-bottom: 20px; }
.steps h3 { font: 700 22px/1.2 var(--body); margin-bottom: 10px; letter-spacing: -.01em; }
.steps p { color: var(--muted); font-size: 16px; }

/* App band */
.app { background: var(--ink); color: var(--white); padding: var(--section) 0; overflow: hidden; }
.app-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.app .section-title { max-width: 9em; }
.lede-dark { color: var(--muted-dark); margin-top: 24px; }
.features { margin-top: 44px; display: grid; gap: 0; }
.features div { padding: 18px 0; border-top: 1px solid var(--ink-border); display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 6px 24px; }
.features div:last-child { border-bottom: 1px solid var(--ink-border); }
.features dt { font-weight: 700; }
.features dd { color: var(--muted-dark); font-size: 16px; }

.app-stage { position: relative; height: 640px; }
.phone-app { position: absolute; width: 280px; height: 580px; background: #000; box-shadow: 0 0 0 1px var(--ink-border), 0 60px 100px -40px rgba(0,0,0,.8); }
.phone-app::before { background: #000; }
.phone-back { left: 0; top: 60px; transform: rotate(-4deg); }
.phone-front { right: 0; top: 0; transform: rotate(3deg); }
.app-screen { background: var(--canvas); color: var(--ink); display: flex; flex-direction: column; font-size: 12px; }
.app-top { background: var(--white); padding: 50px 14px 12px; border-bottom: 1px solid var(--border); }
.app-top-row { display: flex; align-items: center; gap: 8px; }
.app-top-row .app-h { font-size: 17px; flex: 1; text-align: center; }
.app-h { font-weight: 700; font-size: 22px; line-height: 1.1; }
.app-sub { color: var(--muted); font-size: 11px; margin-top: 4px; }
.mini-btn { border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; color: var(--rust); font-weight: 700; font-size: 11px; background: var(--white); }
.pills { display: flex; gap: 6px; padding: 12px 14px 4px; white-space: nowrap; }
.pill { border: 1px solid var(--border); background: var(--white); color: var(--rust); font-weight: 700; padding: 6px 10px; border-radius: 9px; font-size: 11px; }
.pill.on { background: var(--rust); color: var(--white); border-color: var(--rust); }
.convo-list { padding: 8px 12px; display: grid; gap: 8px; flex: 1; align-content: start; }
.convo-list li {
  background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
  display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; position: relative;
}
.convo-list b { font-size: 13px; }
.convo-list span { grid-column: 1 / -1; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 14px; }
.stage { font-style: normal; font-weight: 700; font-size: 10px; color: var(--rust); }
.stage-won { color: #146647; }
.dot { position: absolute; right: 12px; bottom: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.tabbar { display: flex; justify-content: space-around; background: var(--white); border-top: 1px solid var(--border); padding: 10px 0 22px; font-weight: 600; font-size: 11px; color: var(--muted); }
.tabbar .on { color: var(--ink); background: var(--coral); padding: 3px 12px; border-radius: 999px; }
.thread { flex: 1; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.day { text-align: center; color: var(--muted); font-size: 10px; margin-bottom: 4px; }
.b { max-width: 84%; padding: 9px 11px; border-radius: 12px; font-size: 12px; line-height: 1.35; }
.b small { display: block; font-size: 9.5px; color: var(--muted); margin-top: 4px; }
.b.in { background: var(--white); border: 1px solid var(--border); align-self: flex-start; }
.b.out { background: var(--blush); align-self: flex-end; }
.composer { display: flex; gap: 8px; padding: 10px 12px 4px; background: var(--white); border-top: 1px solid var(--border); align-items: flex-end; }
.composer-field { flex: 1; border: 1px solid var(--muted); border-radius: 10px; padding: 8px 10px; font-size: 11.5px; min-height: 48px; }
.composer-send { background: var(--coral); color: var(--ink); font-weight: 700; padding: 9px 12px; border-radius: 10px; }
.composer-note { background: var(--white); color: var(--muted); font-size: 10px; padding: 4px 12px 22px; }
.push {
  position: absolute; z-index: 5; left: 50%; top: -4px; transform: translateX(-56%);
  display: flex; gap: 10px; align-items: center;
  width: 300px; padding: 12px 14px; border-radius: 18px;
  background: rgba(255,255,255,.96); color: var(--ink);
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.6);
  font-size: 13px; line-height: 1.3;
}
.push img { width: 36px; height: 36px; border-radius: 9px; flex: none; }
.push strong { display: block; }
.push span { color: var(--muted); }

/* Follow-ups */
.follow { padding: var(--section) 0; }
.follow-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
.follow-head .lede { justify-self: end; }
.timeline { position: relative; margin-top: clamp(56px, 7vw, 96px); height: 260px; }
.timeline::before {
  content: ""; position: absolute; left: 0; right: 0; top: 76px; height: 2px;
  background: linear-gradient(90deg, var(--ink) 0 100%);
}
.tick { position: absolute; top: 0; width: min(210px, calc(20% - 24px)); }
.tick:nth-child(1) { left: 0; }
.tick:nth-child(2) { left: 20%; }
.tick:nth-child(3) { left: 60%; }
.tick:nth-child(4) { right: 0; text-align: right; }
.tick::after {
  content: ""; position: absolute; top: 69px; left: 0;
  width: 16px; height: 16px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px var(--white);
}
.tick:nth-child(4)::after { left: auto; right: 0; }
.hrs { font: 800 60px/1 var(--display); display: block; height: 60px; }
.hrs small { font-size: .5em; margin-left: 2px; color: var(--muted); }
.tick-label { margin-top: 36px; font-weight: 700; }
.tick-msg {
  margin-top: 10px; display: inline-block; text-align: left;
  background: var(--raised); padding: 9px 12px; border-radius: 16px; border-bottom-left-radius: 5px;
  font-size: 14px; line-height: 1.35;
}
.stops {
  margin-top: 40px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px;
  padding: 24px 28px; background: var(--blush); border-radius: 16px;
}
.stops-title { font-weight: 700; }
.stops ul { display: flex; flex-wrap: wrap; gap: 8px; }
.stops li { background: var(--white); padding: 6px 14px; border-radius: 999px; font-size: 15px; box-shadow: inset 0 0 0 1px #F5CFC4; }

/* Lead pages */
.pages { padding: var(--section) 0; background: var(--canvas); }
.pages-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
.layouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(48px, 6vw, 80px); }
.layout figcaption { margin-top: 18px; color: var(--muted); font-size: 16px; max-width: 26em; }
.layout figcaption strong { display: block; color: var(--ink); font-size: 18px; margin-bottom: 4px; }
.mock {
  --a: var(--ns-green); --bg: #F4F2EC; --s: #FFFFFF;
  position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden;
  background: var(--bg); padding: 28px 26px 40px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 1px 0 var(--border), 0 30px 50px -36px rgba(17,19,24,.45);
}
.mock span { display: block; border-radius: 6px; }
.m-logo { width: 34px; height: 34px; border-radius: 9px !important; background: var(--a); margin-bottom: 10px; }
.m-h { height: 22px; width: 88%; background: #1C1F1A; opacity: .9; }
.m-h.short { width: 58%; }
.m-line { height: 8px; width: 92%; background: rgba(0,0,0,.14); }
.m-line.short { width: 60%; }
.m-field { height: 34px; background: var(--s); border: 1px solid rgba(0,0,0,.12); border-radius: 8px !important; }
.mock-essential .m-field:first-of-type { margin-top: 14px; }
.m-btn { height: 38px; background: var(--a); border-radius: 9px !important; margin-top: 4px; }
.m-foot { position: absolute; left: 26px; right: 26px; bottom: 14px; font-size: 10px; color: rgba(0,0,0,.45); border-radius: 0 !important; }
.mock-focus { --a: #23466E; --bg: #EEF2F7; flex-direction: row; gap: 14px; align-items: center; }
.mock-focus .m-col { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.mock-focus .m-h { height: 18px; }
.mock-focus .m-card { background: var(--s); padding: 14px; border-radius: 10px; box-shadow: 0 10px 20px -12px rgba(0,0,0,.3); }
.mock-story { --a: #6B2D4E; --bg: #F7EFF2; padding-top: 0; }
.m-hero { height: 34%; margin: 0 -26px 8px; border-radius: 0 !important; background: linear-gradient(160deg, #6B2D4E, #A2587A); }
.m-row { display: flex; gap: 8px; }
.m-row span { flex: 1; height: 44px; background: var(--s); border-radius: 8px; }

/* Who it's for */
.asks { padding: var(--section) 0; }
.asks-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px 80px; align-items: center; }
.asks .section-title { max-width: 9em; }
.ask-cloud { display: flex; flex-direction: column; gap: 14px; }
.ask {
  align-self: flex-start; max-width: 100%;
  background: var(--raised); padding: 12px 18px; border-radius: 22px; border-bottom-left-radius: 6px;
  font-size: clamp(17px, 1.7vw, 21px); font-weight: 500;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
}
.ask:nth-child(2n) { margin-left: clamp(24px, 8vw, 120px); }
.ask:nth-child(3n) { margin-left: clamp(12px, 4vw, 56px); }
.ask span { font-size: 13px; color: var(--muted); font-weight: 600; }

/* Trust */
.trust { padding: 0 0 var(--section); }
.trust-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px 80px; border-top: 2px solid var(--ink); padding-top: 56px; }
.trust .section-title { font-size: clamp(40px, 5vw, 64px); max-width: 8em; }
.trust-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 48px; }
.trust-list dt { font-weight: 700; font-size: 18px; margin-bottom: 6px; }
.trust-list dd { color: var(--muted); font-size: 16px; }

/* CTA */
.cta { background: var(--coral); color: var(--ink); padding: clamp(72px, 10vw, 128px) 0; position: relative; overflow: hidden; }
.cta::after {
  content: ""; position: absolute; right: -6%; top: 50%; transform: translateY(-50%);
  width: min(560px, 60vw); aspect-ratio: 1;
  background: url("assets/konvertkit-mark.svg") center / contain no-repeat;
  opacity: .12; pointer-events: none;
}
.cta-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px 64px; align-items: end; }
.cta-title { font-size: clamp(48px, 7vw, 100px); max-width: 10em; }
.cta-body { margin-top: 24px; font-size: 19px; max-width: 32em; }
.cta-actions { display: grid; gap: 14px; justify-items: start; }
.cta-actions .btn { min-height: 60px; padding: 0 34px; font-size: 17px; }
.cta-actions a:not(.btn) { color: var(--ink); font-weight: 600; }

/* Footer */
.site-footer { padding: 48px 0 40px; }
.footer-row { display: grid; grid-template-columns: auto 1fr; gap: 24px 48px; align-items: center; }
.footer-logo { width: 140px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-self: end; }
.footer-links a { color: var(--ink); text-decoration: none; font-size: 15px; }
.footer-links a:hover { color: var(--rust); }
.fine { grid-column: 1 / -1; color: var(--muted); font-size: 13px; padding-top: 24px; border-top: 1px solid var(--border); }

/* Responsive */
@media (max-width: 1080px) {
  .hero-grid, .app-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { max-width: 720px; }
  .relay { justify-content: start; }
  .app-stage { max-width: 600px; width: 100%; margin: 0 auto; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps li:nth-child(3) { padding-left: 0; border-left: 0; }
  .steps li:nth-child(n+3) { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--border); }
  /* Vertical timeline: the 3px line runs through the centers of the 16px dots at x = 8px. */
  .timeline { height: auto; display: grid; gap: 16px; padding-left: 24px; }
  .timeline::before { left: 6.5px; right: auto; top: 8px; bottom: 8px; width: 3px; height: auto; }
  .tick, .tick:nth-child(n) { position: relative; left: auto; right: auto; width: auto; text-align: left; }
  .tick::after, .tick:nth-child(4)::after { left: -24px; right: auto; top: 22px; box-shadow: 0 0 0 4px var(--white); }
  .hrs { font-size: 48px; height: auto; }
  .tick-label { margin-top: 4px; }
  .tick-msg { margin-top: 6px; padding: 7px 11px; border-radius: 14px; border-bottom-left-radius: 5px; font-size: 13.5px; line-height: 1.3; }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .site-header nav { margin-left: 0; }
  .header-row > .btn { margin-left: auto; }
  .follow-head, .pages-head, .asks-grid, .trust-grid, .cta-grid { grid-template-columns: minmax(0, 1fr); }
  .follow-head .lede { justify-self: start; }
  .layouts { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
  .footer-row { grid-template-columns: minmax(0, 1fr); }
  .footer-links { justify-self: start; }
}
@media (max-width: 640px) {
  :root { --section: 72px; --chip-bar: 40px; }
  body { font-size: 16px; }
  .logo img { width: 128px; }
  .hero { padding-top: 32px; }
  .hero .lede { margin-top: 20px; }
  .hero-actions { margin-top: 28px; }
  .hero-note { margin-top: 20px; }

  /* Relay: a status bar over the form, then the phone. With motion allowed, the
     two-act query below puts the form and phone in the same cell instead. */
  .relay { grid-template-columns: minmax(0, 1fr); min-height: 0; justify-items: center; }
  .relay-status {
    grid-column: 1; grid-row: 1;
    width: 100%; height: var(--chip-bar); margin: 0; padding: 0;
    flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 6px;
  }
  .chip { padding: 5px 9px 5px 8px; gap: 6px; font-size: 11px; }
  .chip::before { width: 6px; height: 6px; }
  .phone-visitor { grid-column: 1; grid-row: 3; margin: 16px 0 0; width: 100%; max-width: 280px; height: 460px; }
  /* A shorter header and smaller bubbles keep the whole thread on screen at 460px. */
  .phone-visitor .sms-head { padding: 42px 16px 8px; gap: 2px; }
  .phone-visitor .sms-avatar { width: 32px; height: 32px; font-size: 17px; }
  .phone-visitor .sms-thread { padding: 10px 10px; gap: 6px; }
  .phone-visitor .sms { font-size: 13px; padding: 8px 11px; max-width: 86%; }
  .lead-card { grid-row: 2; margin-top: 0; width: 100%; max-width: 360px; }
  .relay-pause { grid-column: 1; grid-row: 4; margin: 12px 0 0; }

  /* How it works: numbers in a left rail, joined by a thin line. */
  .steps { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  /* :nth-child(n) matches the specificity of the 1080px rule for steps 3 and 4. */
  .steps li, .steps li:nth-child(n) {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start;
    padding: 24px 0 0; margin-top: 0; border: 0;
  }
  .steps li:not(:last-child)::before {
    content: ""; position: absolute; left: 21px; width: 2px;
    top: calc(24px + 44px + 8px); bottom: -16px;
    background: rgba(17, 19, 24, .16); border-radius: 1px;
  }
  .step-num { grid-row: 1 / span 2; font-size: 44px; margin: 0; text-align: center; }
  .steps h3 { grid-column: 2; font-size: 20px; margin-bottom: 6px; }
  .steps p { grid-column: 2; font-size: 15px; }
  .timeline { margin-top: 40px; }
  .stops { margin-top: 32px; }
  .features div { grid-template-columns: minmax(0, 1fr); }
  .app-stage { height: 580px; }
  .phone-app { width: 260px; height: 520px; }
  .phone-back { display: none; }
  .phone-front { right: auto; left: 50%; top: 52px; transform: translateX(-50%) rotate(2deg); }
  .push { width: 270px; left: 50%; transform: translateX(-50%); }
  .trust-list { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .mock { aspect-ratio: 1 / 1; }
  .stops { padding: 20px; }
  .ask:nth-child(n) { margin-left: 0; }
  .ask:nth-child(2n) { margin-left: 24px; }
}
/* Keep all three status chips on one line on the narrowest phones. */
@media (max-width: 360px) {
  .relay-status { gap: 4px; }
  .chip { padding: 4px 7px 4px 6px; gap: 5px; font-size: 10px; }
}
/* Two acts on phones. Act 1 shows the form alone. When the request goes out,
   main.js sets data-act="phone" on .relay: the form shrinks and lifts away and
   the phone rises into the same spot. The cell is as tall as the taller of the
   two, so nothing below it moves. With reduced motion, the stacked layout above
   stays and both are shown. */
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  /* The incoming element waits .15s so it reads as one becoming the other. The
     outgoing one stays visible until its fade ends, then leaves the tab order. */
  .lead-card, .phone-visitor {
    grid-row: 2; grid-column: 1; align-self: center; margin: 0;
    transition: opacity .45s ease .15s, transform .6s cubic-bezier(.2, .8, .2, 1) .15s, visibility 0s;
  }
  .phone-visitor,
  .relay[data-act="phone"] .lead-card {
    opacity: 0; visibility: hidden;
    transition: opacity .4s ease, transform .55s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .55s;
  }
  .phone-visitor { transform: translateY(56px) scale(.94); }
  .relay[data-act="phone"] .lead-card { transform: translateY(-40px) scale(.9); }
  .relay[data-act="phone"] .phone-visitor {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .45s ease .15s, transform .6s cubic-bezier(.2, .8, .2, 1) .15s, visibility 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}