/* Ladder: site styles. Mobile first. Motion states live at the end. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/archivo-latin-wght.woff2") format("woff2-variations"),
       url("../fonts/archivo-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy: #0b1320;
  --navy-2: #131e30;
  --navy-3: #1c2a42;
  --ink: #0f172a;
  --body: #334155;
  --muted: #536074;
  --on-dark: #ffffff;
  --on-dark-muted: #b3bed0;
  --accent: #ff7a1a;        /* safety orange: fills and text on dark only */
  --accent-hover: #ff8f3d;
  --accent-text: #a54300;   /* orange for text on white, passes AA */
  --paper: #ffffff;
  --paper-2: #f3f5f8;
  --line: #e2e7ee;
  --line-dark: #25344d;
  --field-line: #7d8a9e;    /* 3.5:1 on white */
  --error: #b42318;
  --phone: #131d30;
  --radius: 16px;
  --radius-sm: 12px;
  --wrap: 1180px;
  --gutter: 20px;
  --header-h: 64px;
  --bar-room: 100px;
  --comp-w: 320px;
  --comp-gap: 48px;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 12px);
  scroll-padding-bottom: var(--bar-room);
}
html.lenis, html.lenis body { height: auto; scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

/* Clip sideways overflow from reveal start positions (clip keeps position: sticky working) */
main, .site-footer { overflow-x: clip; }

h1, h2, h3, h4 {
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 0.5em;
  font-weight: 850;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 10.5vw, 5.6rem); font-weight: 900; letter-spacing: -0.04em; line-height: 0.98; }
h2 { font-size: clamp(2.1rem, 7.4vw, 4rem); font-weight: 900; letter-spacing: -0.035em; }
h3 { font-size: 1.25rem; letter-spacing: -0.01em; line-height: 1.2; font-weight: 800; }
h4 { font-size: 1.125rem; letter-spacing: -0.01em; line-height: 1.25; font-weight: 800; }

p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; }

/* Focus: navy on light surfaces, orange inside dark ones. Both 3:1 or better. */
:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 6px;
}
.hero :focus-visible, .site-header :focus-visible, .section--dark :focus-visible, .offer :focus-visible,
.plan--core :focus-visible, .site-footer :focus-visible, .bar :focus-visible, .companion :focus-visible,
.calc-card :focus-visible, .skip-link:focus-visible { outline-color: var(--accent); }
.card :focus-visible { outline-color: var(--navy); }
[tabindex="-1"]:focus { outline: none; }

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

.skip-link {
  position: absolute;
  left: 12px; top: -80px;
  z-index: 100;
  background: var(--accent);
  color: var(--navy);
  font-weight: 700;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

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

.section { position: relative; padding: 64px 0; }
.section--soft { background: var(--paper-2); }
.section--dark { background: var(--navy); color: var(--on-dark-muted); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--on-dark); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 16px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 3px;
  border-radius: 2px;
  background: currentColor;
}
.section--dark .eyebrow, .hero .eyebrow, .offer .eyebrow { color: var(--accent); }

.lede { font-size: 1.1875rem; color: var(--body); max-width: 40rem; }
.section--dark .lede { color: var(--on-dark-muted); }

.section-head { margin-bottom: 36px; max-width: 50rem; }
.accent { color: var(--accent); }
.accent-ink { color: var(--accent-text); }

/* Placeholders for business facts still to confirm. Light by default, dark variant on navy. */
.placeholder {
  background: #fff1e6;
  color: var(--accent-text);
  border-radius: 4px;
  padding: 0 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero .placeholder, .section--dark .placeholder, .offer .placeholder, .plan--core .placeholder,
.site-footer .placeholder { background: rgba(255,122,26,.16); color: #ffc49b; }
.card .placeholder { background: #fff1e6; color: var(--accent-text); }

/* Art slots: images arrive later at fixed ratios. Empty slots take no space. */
.art-slot { position: relative; overflow: hidden; margin: 0; }
.art-slot:empty { display: none; }
.art-slot > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.art-slot--problem { aspect-ratio: 4 / 3; width: min(100%, 460px); margin-top: 32px; border-radius: var(--radius); }
.art-slot--step-1, .art-slot--step-2, .art-slot--step-3,
.art-slot--step-4, .art-slot--step-5, .art-slot--step-6 { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); }
.art-slot--demo { aspect-ratio: 16 / 9; width: 100%; border-radius: var(--radius); }
.art-slot--founder { aspect-ratio: 1 / 1; }
.art-slot--hero {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.art-slot--hero > img { object-position: 78% 50%; }
/* Keeps hero text contrast whatever image lands here */
.art-slot--hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 520px at 88% 8%, rgba(255,122,26,.16), transparent 62%),
    linear-gradient(90deg, rgba(11,19,32,.9) 0%, rgba(11,19,32,.72) 52%, rgba(11,19,32,.25) 100%);
}

/* Buttons */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 14px 22px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  font: inherit;
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .3s ease, transform .3s var(--ease-out);
}
.btn svg { width: 22px; height: 22px; flex: none; }
.btn .num { white-space: nowrap; }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  color: var(--navy);
  box-shadow: 0 10px 30px -12px rgba(255,122,26,.65);
}
.btn--primary:hover { background: var(--accent-hover); box-shadow: 0 16px 36px -12px rgba(255,122,26,.8); }

.btn--ghost { background: rgba(255,255,255,.04); color: var(--on-dark); border-color: rgba(255,255,255,.34); }
.btn--ghost:hover { border-color: var(--on-dark); background: rgba(255,255,255,.08); }

.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--paper); }

.btn--dark { background: var(--navy); color: var(--on-dark); }
.btn--dark:hover { background: var(--navy-3); }

.btn--xl { min-height: 64px; font-size: 1.1875rem; padding: 16px 26px; }
.btn--block { width: 100%; }

/* Phone badge inside call buttons. Only the hero one rings, and only a few times. */
.live {
  position: relative;
  width: 36px; height: 36px;
  flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy);
  color: var(--accent);
}
.live svg { width: 18px; height: 18px; }
.live::before, .live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--navy);
  opacity: 0;
}
.btn--dark .live { background: var(--accent); color: var(--navy); }
@keyframes ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top, 0px);   /* paints the notch area navy */
  background: rgba(11, 19, 32, 0.94);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: box-shadow .3s ease;
}
.site-header.is-scrolled { box-shadow: 0 10px 30px -12px rgba(0,0,0,.6); }
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--on-dark);
  text-decoration: none;
  border-radius: 6px;
}
.lockup { display: block; width: auto; height: 36px; overflow: visible; }

.nav { display: none; }
.nav ul { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
.nav a {
  position: relative;
  color: var(--on-dark-muted);
  text-decoration: none;
  font-weight: 650;
  font-size: 0.96875rem;
  padding: 6px 0;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .35s var(--ease-out);
}
.nav a:hover { color: var(--on-dark); }
.nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.header-cta { font-size: 0.9375rem; min-height: 44px; padding: 8px 16px; }
.header-call { display: none; }

/* Phone bottom bar: two labelled actions. Hidden until the hero buttons scroll away. */

.bar { display: none; }
.js .bar {
  position: fixed;
  z-index: 50;
  left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(11, 19, 32, 0.97);
  border-top: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 -12px 30px -12px rgba(0,0,0,.45);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .3s var(--ease-out), visibility 0s linear .3s;
}
.bar-on .bar { transform: none; visibility: visible; transition: transform .45s var(--ease-out), visibility 0s; }
.bar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-weight: 850;
  font-size: 1.0625rem;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}
.bar-btn svg { width: 20px; height: 20px; flex: none; }
.bar-btn--call { background: var(--accent); color: var(--navy); }
.bar-btn--check { color: var(--on-dark); border: 2px solid rgba(255,255,255,.4); }

/* The story: hero, problem, how it works. The desktop companion rides over it. */

.story { position: relative; }

/* Hero */

.hero {
  position: relative;
  background:
    radial-gradient(700px 520px at 88% 8%, rgba(255,122,26,.2), transparent 62%),
    radial-gradient(600px 500px at -10% 110%, rgba(56,97,160,.22), transparent 60%),
    var(--navy);
  color: var(--on-dark-muted);
  padding: 26px 0 0;
  overflow: hidden;
  isolation: isolate;
}

.hero h1 { color: var(--on-dark); margin-bottom: 18px; }
.hero .lede { color: #d0d8e4; margin-bottom: 26px; font-size: 1.1875rem; max-width: 34rem; }

.hero-actions { display: grid; gap: 12px; }
.reassure {
  margin: 18px 0 0;
  font-size: 0.96875rem;
  line-height: 1.5;
  color: #d0d8e4;
  max-width: 34rem;
}
.reassure strong { color: var(--on-dark); font-weight: 750; }
.reassure span { display: block; }

.hero-grid { display: grid; gap: 40px; align-items: center; padding-bottom: 48px; }

.trades {
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  padding: 16px 0 18px;
}
.trades .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.trades-label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.trades-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-weight: 700;
  font-size: 0.9375rem;
  color: #d0d8e4;
}
.trades-list li {
  padding: 3px 11px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  white-space: nowrap;
}

/* Phones: the hero scene and the small phone cards share this look */

.scene {
  --pw: min(calc(100vw - 40px), 300px);          /* phone width; height follows a real 6.1-inch ratio */
  position: relative;
  margin: 0 auto;
  width: var(--pw);
}
/* The phone: a graphite device body with side buttons and a bezel round an inset screen that has
   its own status bar, dynamic island and home bar. CSS only; the whole device is aria-hidden. */
.phone {
  position: relative;
  display: flex;
  aspect-ratio: 300 / 622;
  padding: calc(var(--pw, 300px) * .032);
  border-radius: calc(var(--pw, 300px) * .16);
  background: linear-gradient(150deg, #454b55 0%, #262a31 30%, #1b1e23 62%, #33373f 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 0 0 2px #121417,
    0 44px 70px -34px rgba(0,0,0,.85),
    0 16px 26px -16px rgba(0,0,0,.55);
}
.phone-btn {
  position: absolute;
  width: 4px;
  background: linear-gradient(90deg, #1b1e23, #4d535d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.phone-btn--vol { left: -3px; top: 22%; height: 13%; border-radius: 3px 0 0 3px; }
.phone-btn--power { right: -3px; top: 27%; height: 17%; border-radius: 0 3px 3px 0; background: linear-gradient(270deg, #1b1e23, #4d535d); }
.device-screen {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(var(--pw, 300px) * .128);
  background: var(--phone);
  padding: 0 12px 20px;
  box-shadow: 0 0 0 1px #07090c;
}
/* A faint diagonal glare across the glass */
.device-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 30%, transparent 46%);
}
.statusbar, .pcard-sb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #e6ebf2;
}
.statusbar { height: 40px; padding: 4px 10px 0 16px; }
.sb-time { font-size: 0.875rem; font-weight: 700; letter-spacing: .01em; }
.sb-icons { display: flex; align-items: center; gap: 5px; }
.sb-icons svg { display: block; height: 11px; }
.sb-icons .sb-signal { width: 17px; }
.sb-icons .sb-wifi { width: 15px; }
.sb-icons .sb-battery { width: 25px; }
.island {
  position: absolute;
  left: 50%;
  top: 9px;
  width: 92px;
  height: 26px;
  border-radius: 999px;
  background: #030406;
  transform: translateX(-50%);
}
.home-bar {
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 34%;
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,.6);
  transform: translateX(-50%);
}
.phone-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 6px 10px;
  border-bottom: 1px solid var(--line-dark);
}
.avatar {
  position: relative;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
}
.avatar svg { width: 34px; height: 34px; }
.avatar::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
}
.phone-top strong { color: var(--on-dark); display: block; font-size: 1rem; line-height: 1.2; }
.phone-top .status { color: var(--on-dark-muted); font-size: 0.8125rem; display: flex; align-items: center; gap: 6px; }
.phone-top .status i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #33d17a;
  box-shadow: 0 0 0 3px rgba(51,209,122,.2);
}
.wavebars { margin-left: auto; display: flex; align-items: center; gap: 3px; height: 22px; }
.wavebars b {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleY(.2);
}
.wavebars b:nth-child(2) { animation-delay: -.2s !important; }
.wavebars b:nth-child(3) { animation-delay: -.45s !important; }
.wavebars b:nth-child(4) { animation-delay: -.1s !important; }
.wavebars b:nth-child(5) { animation-delay: -.6s !important; }
@keyframes bar { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

.screen {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  margin-top: 12px;
  border-radius: 18px;
}
.layer {
  position: absolute;
  inset: 0;
  background: var(--phone);
}
.layer:not(.layer--call) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4px 2px;
  visibility: hidden;
  opacity: 0;
}

.incoming {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  color: var(--on-dark-muted);
}
.incoming-icon, .ring-icon {
  position: relative;
  width: 76px; height: 76px;
  margin-bottom: 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--navy);
}
.incoming-icon svg, .ring-icon svg { width: 34px; height: 34px; }
.incoming-icon::before, .incoming-icon::after, .ring-icon::before, .ring-icon::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
}
.incoming strong, .ring strong { color: var(--on-dark); font-size: 1.375rem; font-weight: 850; letter-spacing: -0.02em; }
.incoming em, .ring em {
  font-style: normal;
  font-size: 0.8125rem;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: #d0d8e4;
}

.chat { position: absolute; inset: 0; overflow: hidden; }
.chat-track, .chat-lite {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 2px;
}
.bubble {
  max-width: 86%;
  margin: 0;
  padding: 9px 13px;
  border-radius: 18px;
  font-size: 0.90625rem;
  line-height: 1.38;
}
.bubble--them { align-self: flex-start; background: var(--navy-3); color: #e6ebf2; border-bottom-left-radius: 6px; }
.bubble--ai { align-self: flex-end; background: var(--accent); color: var(--navy); font-weight: 600; border-bottom-right-radius: 6px; }

.summary {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  padding: 2px;
}
.sms {
  width: 100%;
  background: #22324d;
  color: #e6ebf2;
  border-radius: 18px 18px 18px 6px;
  padding: 14px 16px;
  font-size: 0.9375rem;
  line-height: 1.5;
  border: 1px solid #2f4263;
}
.sms-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sms-head span { font-size: 0.8125rem; color: var(--on-dark-muted); }
.sms b { color: var(--on-dark); }
.sms dl { margin: 10px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; }
.sms dt { color: var(--on-dark-muted); }
.sms dd { margin: 0; color: var(--on-dark); font-weight: 650; }
.sms--compact { padding: 12px 14px; font-size: 0.875rem; }
.sms--compact dl { margin-top: 8px; gap: 1px 12px; }
.booked {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px;
  background: var(--accent);
  color: var(--navy);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.8125rem;
  font-weight: 800;
}
.booked svg { width: 16px; height: 16px; }
.plan-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,122,26,.6);
  color: #ffc49b;
  font-size: 0.8125rem;
  font-weight: 750;
  letter-spacing: .02em;
}

.scene-caption {
  width: fit-content;
  max-width: 100%;
  margin: 14px auto 0;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(11,19,32,.9);   /* stays readable over the hero art and, on desktop, over white sections */
  text-align: center;
  font-size: 0.8125rem;
  color: var(--on-dark-muted);
}
.replay {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px auto 0;
  min-height: 40px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.3);
  background: var(--navy-2);
  color: var(--on-dark);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 750;
  cursor: pointer;
}
.replay[hidden] { display: flex; visibility: hidden; }   /* keeps its space so the phone never jumps */
.replay:hover { border-color: var(--on-dark); }
.replay svg { width: 16px; height: 16px; }

/* Scene states.
   Default (no JS, reduced motion, slow scripts, finished): the summary.
   With motion, before the call plays: the incoming-call frame.
   .is-live: GSAP owns each part's visibility. */
.scene .incoming, .scene .chat { display: none; }
.motion:not(.late) .scene:not(.is-live):not(.is-rest) .incoming { display: flex; }
.motion:not(.late) .scene:not(.is-live):not(.is-rest) .summary { visibility: hidden; }
.status-pre { display: none; }
.motion:not(.late) .scene:not(.is-live):not(.is-rest) .status-text { display: none; }
.motion:not(.late) .scene:not(.is-live):not(.is-rest) .status-pre { display: inline; }
.scene.is-live .incoming, .scene.is-live .chat { display: flex; }
.scene.is-live .chat { display: block; }
.scene.is-ringing .incoming-icon::before, .scene.is-ringing .avatar::after { animation: ring 1.4s ease-out 3; }
.scene.is-ringing .incoming-icon::after { animation: ring 1.4s ease-out .7s 3; }
.scene.is-talking .wavebars b { animation: bar .9s ease-in-out infinite; }
.scene.is-paused *, .scene.is-paused *::before, .scene.is-paused *::after { animation-play-state: paused !important; }

/* Small phone cards: the same screens, inline in each section */

.pcard {
  width: 100%;
  max-width: 360px;
  background: var(--phone);
  color: #e6ebf2;
  border: 4px solid #23272e;          /* a thin graphite bezel: it reads as a phone without side buttons */
  border-radius: 30px;
  padding: 0 12px 14px;
  box-shadow: inset 0 0 0 1px #07090c, 0 0 0 1px rgba(255,255,255,.12), 0 30px 60px -34px rgba(11,19,32,.8);
}
.pcard-sb { height: 24px; padding: 0 4px 0 10px; margin-bottom: 2px; }
.pcard-sb .island { top: 4px; width: 70px; height: 18px; }
@media (max-width: 400px) {
  .statusbar .island { width: 74px; height: 22px; top: 10px; }
  .pcard-sb .island { width: 60px; }
}
.pcard-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 6px 10px;
  border-bottom: 1px solid var(--line-dark);
  font-size: 0.8125rem;
  color: var(--on-dark-muted);
}
.pcard-top b { color: var(--on-dark); font-size: 0.875rem; }
.pcard-top span:last-child { margin-left: auto; }
.pcard-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.pcard-body { padding: 12px 2px 4px; }
.pcard-cap { margin: 10px 0 0; text-align: center; font-size: 0.75rem; color: var(--on-dark-muted); }

.missed { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* The tag shares the first line with "Missed call"; the time and place get the full width below */
.missed li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
  padding: 10px;
  border-radius: 14px;
  background: var(--navy-3);
  font-size: 0.875rem;
}
.missed .dot {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: #3a1c22; color: #ff9d8f;
  flex: none;
}
.missed .dot svg { width: 18px; height: 18px; }
.missed .dot { grid-row: 1 / span 2; align-self: center; }
.missed li > div { display: contents; }
.missed li > div > strong { grid-column: 2; grid-row: 1; white-space: nowrap; }
.missed li > div > span { grid-column: 2 / span 2; grid-row: 2; line-height: 1.35; }
.missed .tag { grid-column: 3; grid-row: 1; }
.missed strong { color: var(--on-dark); display: block; line-height: 1.2; }
.missed span { color: var(--on-dark-muted); font-size: 0.8125rem; }
.missed .tag {
  margin-left: auto;
  font-style: normal;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #ffb3a7;
  background: #3a1c22;
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 0 8px;
  text-align: center;
  color: var(--on-dark-muted);
}

.sum { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.diary {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f3f5f8;
  color: var(--body);
  font-size: 0.8125rem;
  line-height: 1.35;
}
.diary b { display: block; color: var(--ink); font-size: 0.875rem; }
.diary-date {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--navy);
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
}
.diary-date b { color: var(--navy); font-size: 1rem; }

.msgs { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.msg-meta { margin: 0; font-size: 0.8125rem; font-weight: 700; color: var(--on-dark-muted); letter-spacing: .02em; }
.msg {
  margin: 0;
  max-width: 94%;
  padding: 11px 14px;
  border-radius: 18px 18px 18px 6px;
  background: #22324d;
  border: 1px solid #2f4263;
  color: #e6ebf2;
  font-size: 0.90625rem;
  line-height: 1.45;
}
.msg-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--navy);
  font-size: 0.8125rem;
  font-weight: 800;
}
.msg-link svg { width: 14px; height: 14px; }

/* Problem */

.statement {
  font-size: clamp(1.9rem, 6.6vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 24px;
  max-width: 60rem;
  text-wrap: balance;
}
.statement .accent-ink { color: var(--accent-text); }
.statement--small { font-size: clamp(1.4rem, 4vw, 1.9rem); margin: 24px 0 0; }
.problem-text { font-size: 1.1875rem; max-width: 36rem; }
.problem .split-side { margin-top: 32px; }

/* Missed-call calculator: a navy card on the soft band between the problem and how it works.
   With JavaScript it has sliders and number boxes; without it, the sum to do yourself. */
.calc .section-head { margin-bottom: 28px; }
.calc-card {
  position: relative;
  border-radius: 24px;
  padding: 24px 18px 26px;
  background:
    radial-gradient(420px 300px at 100% 0%, rgba(255,122,26,.14), transparent 60%),
    var(--navy);
  color: var(--on-dark-muted);
  box-shadow: 0 30px 60px -36px rgba(11,19,32,.55);
}
.js .calc-static { display: none; }
html:not(.js) .calc-live { display: none; }
.calc-field { padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line-dark); }
.calc-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.calc-label { color: var(--on-dark); font-weight: 750; font-size: 1rem; line-height: 1.3; }
.calc-box {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 6.25rem;
  min-height: 50px;
  padding: 0 12px;
  border: 2px solid #3a4c6d;
  border-radius: 12px;
  background: var(--navy-2);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.calc-box--money { width: 8.5rem; }
.calc-box:hover { border-color: #5b6f93; }
.calc-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,122,26,.3); }
.calc-box input {
  width: 100%;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  background: transparent;
  color: var(--on-dark);
  font: 800 1.25rem/1 var(--font);
  font-variant-numeric: tabular-nums;
  text-align: right;
  -moz-appearance: textfield;
  appearance: textfield;
}
.calc-box input:focus-visible { outline: none; }   /* the box's orange border and ring show focus */
.calc-box input::-webkit-inner-spin-button, .calc-box input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.calc-affix { color: var(--on-dark-muted); font-weight: 750; font-size: 1.125rem; }
.calc-range {
  --p: 50%;
  display: block;
  width: 100%;
  height: 44px;
  margin: 8px 0 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.calc-range:focus-visible { outline: none; }
.calc-range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent) 0 var(--p), #2a3b58 var(--p));
}
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px; height: 30px;
  margin-top: -11px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid var(--accent);
  box-shadow: 0 4px 12px rgba(0,0,0,.45);
  transition: box-shadow .2s ease;
}
.calc-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--navy), 0 0 0 7px #fff; }
.calc-range::-moz-range-track { height: 8px; border-radius: 4px; background: #2a3b58; }
.calc-range::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--accent); }
.calc-range::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid var(--accent);
  box-shadow: 0 4px 12px rgba(0,0,0,.45);
}
.calc-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--navy), 0 0 0 7px #fff; }
/* The job-value slider is a div with role="slider", drawn to match the native ones */
.calc-slider { position: relative; touch-action: pan-y; }
.calc-slider::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 8px;
  margin-top: -4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent) 0 var(--p), #2a3b58 var(--p));
}
.calc-slider-thumb {
  position: absolute;
  top: 50%;
  left: calc(15px + (100% - 30px) * var(--f, .5));
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid var(--accent);
  box-shadow: 0 4px 12px rgba(0,0,0,.45);
  transition: box-shadow .2s ease;
}
.calc-slider:focus-visible { outline: none; }
.calc-slider:focus-visible .calc-slider-thumb { box-shadow: 0 0 0 4px var(--navy), 0 0 0 7px #fff; }
.calc-scale { display: flex; justify-content: space-between; margin: 0; font-size: 0.8125rem; font-weight: 650; }
.calc-out {
  margin-top: 4px;
  padding: 20px 18px 22px;
  border-radius: 18px;
  background: var(--navy-2);
  border: 1px solid var(--line-dark);
  box-shadow: inset 0 3px 0 var(--accent);
}
.calc-out-label {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.calc-big { margin: 0; line-height: 1.05; }
.calc-num, .calc-stats dd {
  color: var(--on-dark);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.calc-num { font-size: clamp(1.75rem, 8.4vw, 3.5rem); }
.calc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 12px 20px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-dark);
}
.calc-stats dt { font-size: 0.875rem; font-weight: 650; }
.calc-stats dd { margin: 2px 0 0; font-size: clamp(1.25rem, 5vw, 1.625rem); }
.calc-sum { margin: 14px 0 0; font-size: 0.875rem; line-height: 1.5; min-height: 3lh; font-variant-numeric: tabular-nums; }
.calc-compare {
  margin: 10px 0 0;
  padding-left: 12px;
  border-left: 3px solid var(--accent);
  color: var(--on-dark);
  font-weight: 650;
  line-height: 1.45;
  min-height: 3lh;
}
.calc-note { margin: 14px 0 18px; font-size: 0.8125rem; }
.calc-card .btn { width: 100%; }
.nowrap { white-space: nowrap; }
.calc-formula { color: var(--on-dark); font-size: 1.125rem; font-weight: 650; line-height: 1.6; margin: 0 0 12px; }
.calc-formula span { color: var(--accent); font-weight: 800; padding: 0 2px; }
.calc-static .calc-out-label { margin-bottom: 10px; }

/* How it works */

.how .section-head .btn { margin-top: 4px; }

/* One ladder, six rungs: two lists (on the call, after the call) on one continuous rail */
.steps { position: relative; }
.steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
/* The ladder is an illustrated tile (ladder-tile.webp, 192 x 206: rails at x 10 to 182, a rung every
   103px with its face centred 59.5px down) repeated down the rail. --s scales it; the element shows
   the tile from x 8 to 184, so its edges are the rails. Rung centres sit at (59.5 + 103n) x --s. */
.steps-stage { position: relative; }
.steps-rail {
  --s: .2045;                       /* 36px wide on phones and tablets */
  position: absolute;
  left: 7px; top: 24px; bottom: 24px;
  width: calc(176px * var(--s));
  background-image: image-set(url("../img/art/ladder-tile.webp") 1x, url("../img/art/ladder-tile@2x.webp") 2x);
  background-repeat: repeat-y;
  background-size: calc(192px * var(--s)) calc(206px * var(--s));
  background-position: calc(-8px * var(--s)) 0;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
}
.step-num {
  position: relative;
  z-index: 1;
  display: grid; place-items: center;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--navy);
  font-weight: 900;
  font-size: 1.25rem;
  border: 4px solid var(--navy);
  transition: background-color .4s ease, color .4s ease, box-shadow .4s ease;
}
.step-body {
  padding: 16px 16px 20px;
  border-radius: var(--radius);
  background: var(--navy-2);
  border: 1px solid var(--line-dark);
  transition: border-color .4s ease;
}
.step-body > .art-slot { width: 100%; max-width: 420px; margin: 0 0 14px; }
.step-text h3 { font-size: 1.3125rem; margin-bottom: 8px; }
.step-text p { margin: 0; color: var(--on-dark-muted); }
.step-text .plan-chip { margin-top: 12px; }
.step .pcard { grid-column: 2; margin-top: 16px; }

/* The rung between the call and what happens after it */
.steps-marker {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 22px 0;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ffc49b;
  width: fit-content;
  max-width: 100%;
}
.steps-marker-node { width: 50px; flex: none; display: grid; place-items: center; }
.steps-marker-node::before {
  content: "";
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--navy);
  border: 4px solid var(--accent);
}

.plan-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,122,26,.14);
  color: #ffc49b;
  font-size: 0.8125rem;
  font-weight: 750;
}

/* Phones and tablets: only the text summary card is worth its length; the others feed the desktop phone */
@media (max-width: 899.98px) {
  .pcard--desk { display: none; }
}

/* Demo band */

.demo {
  position: relative;
  background: var(--accent);
  color: var(--navy);
  padding: 64px 0;
}
.demo h2 { color: var(--navy); }
.demo .eyebrow { color: var(--navy); }
.demo-copy p { color: var(--navy); font-size: 1.1875rem; max-width: 34rem; }
.demo .small { font-size: 0.9375rem; margin: 12px 0 0; color: var(--navy); }
.demo-inner { display: grid; gap: 24px; align-items: center; }
.demo-action { max-width: 460px; }
.demo .art-slot--demo { max-width: 560px; border-radius: 0; }
/* Illustrations drawn on a flat field (orange, navy) melt into the band or card behind them */
.art-slot--demo > img {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}

.example {
  margin-top: 36px;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 24px 50px -30px rgba(11,19,32,.6);
}
.example summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font-weight: 850;
  font-size: 1.125rem;
  color: var(--ink);
  border-radius: var(--radius);
}
.example summary::-webkit-details-marker { display: none; }
.example-body { padding: 0 20px 24px; display: grid; gap: 24px; }
.example-intro { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.transcript { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.transcript li { padding: 8px 12px; border-radius: 10px; background: var(--paper-2); color: var(--body); line-height: 1.45; }
.transcript b { color: var(--ink); }
.example-text h3 { font-size: 1.125rem; margin-bottom: 10px; }
.example-text .sms { max-width: 360px; }
.example-note { margin: 12px 0 0; font-size: 0.9375rem; color: var(--muted); }
.demo-audio { margin-top: 20px; }

/* Plus icon used by the demo transcript and the FAQ */
.plus {
  width: 36px; height: 36px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper-2);
  color: var(--ink);
  transition: transform .4s var(--ease-out), background-color .3s ease, color .3s ease;
}
.plus svg { width: 18px; height: 18px; }
details[open] > summary .plus { transform: rotate(135deg); background: var(--accent); color: var(--navy); }

/* Founder */

.founder-grid { display: grid; gap: 28px; align-items: center; }
.founder-photo { margin: 0; width: 180px; }
.art-slot--founder { border-radius: 24px; box-shadow: 0 20px 40px -24px rgba(11,19,32,.45); }
.founder-photo figcaption { margin-top: 10px; font-size: 0.8125rem; font-weight: 700; }
.founder-copy p { max-width: 40rem; }
.founder-sign {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 24px;
  padding-left: 14px;
  border-left: 3px solid var(--accent);
}
.founder-sign-name { font-weight: 800; font-size: 1.125rem; color: var(--ink); }
.founder-sign-role { font-size: 0.9375rem; color: var(--muted); }

/* Pricing */

.plans { display: grid; gap: 22px; }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 22px 24px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.plan > * { margin: 0; }
.plan h3 { font-size: 1.5rem; margin-bottom: 4px; }
.plan-for { color: var(--muted); font-size: 0.96875rem; padding-bottom: 16px; }
.price { color: var(--ink); line-height: 1; }
.price .amount { font-size: 3.25rem; font-weight: 900; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.price .per { font-size: 1rem; font-weight: 650; color: var(--muted); }
.per-day { padding-top: 8px; font-weight: 750; color: var(--ink); font-size: 0.96875rem; }
.setup { padding: 8px 0 18px; font-size: 0.875rem; color: var(--muted); line-height: 1.5; }
.feats-wrap { padding: 16px 0 22px; border-top: 1px solid var(--line); }
.feats-lead { margin: 0 0 6px; font-weight: 750; color: var(--ink); font-size: 0.96875rem; }
.feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.feats li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; line-height: 1.4; padding: 5px 0; font-size: 0.96875rem; }
.feats svg { width: 20px; height: 20px; margin-top: 1px; color: var(--accent-text); }
.plan .btn { margin-top: auto; }

.plan--core {
  order: -1;
  color: var(--on-dark-muted);
  background: var(--navy);
  border: 2px solid var(--accent);
  box-shadow: 0 30px 60px -30px rgba(11,19,32,.8);
  margin-top: 14px;
}
.plan--core h3, .plan--core .price, .plan--core .per-day { color: var(--on-dark); }
.plan--core .plan-for, .plan--core .price .per, .plan--core .setup { color: var(--on-dark-muted); }
.plan--core .feats-wrap { border-top-color: var(--line-dark); }
.plan--core .feats-lead { color: var(--on-dark); }
.plan--core .feats li { color: #dbe2ec; }
.plan--core .feats svg { color: var(--accent); }
.badge {
  position: absolute;
  top: -14px; left: 22px;
  margin: 0;
  background: var(--accent);
  color: var(--navy);
  font-weight: 850;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: 999px;
}

/* One comparison for all three plans. A real table with explicit roles, so the phone layout (chips)
   keeps its table semantics. The Core column is navy, continuing the Core card above it. */
.compare { margin-top: 48px; }
.compare table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--paper);
  border-radius: 22px;
  box-shadow: 0 30px 60px -36px rgba(11,19,32,.45), 0 0 0 1px var(--line);
  font-size: 0.9375rem;
  line-height: 1.35;
}
.compare caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 14px 3px;
  font-weight: 850;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.compare thead th {
  position: sticky;
  top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  z-index: 2;
  padding: 18px 8px 14px;
  text-align: center;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.compare thead th:first-child { width: 40%; border-top-left-radius: 22px; }
.compare thead th:last-child { border-top-right-radius: 22px; }
.cmp-plan-name { display: block; font-weight: 850; font-size: 1.0625rem; color: var(--ink); }
.cmp-price { display: block; font-weight: 700; font-size: 0.875rem; color: var(--muted); }
.compare thead th.is-core { background: var(--navy); border-radius: 18px 18px 0 0; border-bottom-color: var(--line-dark); }
.compare thead th.is-core .cmp-plan-name { color: var(--on-dark); }
.compare thead th.is-core .cmp-price { color: var(--on-dark-muted); }

.cmp-group > * { padding: 18px 8px 6px; }
.cmp-group th { padding-left: 20px; text-align: left; font-size: 0.75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.compare tbody th[scope="row"] { padding: 14px 10px 14px 20px; text-align: left; font-weight: 400; border-bottom: 1px solid var(--line); }
.cmp-feat { display: flex; gap: 12px; align-items: flex-start; }
.cmp-ico { width: 22px; height: 22px; flex: none; margin-top: 1px; color: var(--accent-text); }
.cmp-name { display: block; font-weight: 750; color: var(--ink); }
.cmp-sub { display: block; margin-top: 2px; font-size: 0.875rem; line-height: 1.4; color: var(--muted); }
.compare td { padding: 14px 6px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--line); font-size: 0.8125rem; font-weight: 700; }
.cmp-group td { border-bottom: 0; }
.cmp-plan { display: none; }
.cmp-mark { display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto; border-radius: 50%; }
.cmp-mark svg { width: 16px; height: 16px; }
.cmp-mark--yes { background: var(--accent); color: var(--navy); }
.cmp-mark--no { background: #eef1f5; color: #5f6b7e; }
.cmp-q { display: block; margin-top: 6px; color: var(--ink); }
.compare td.no .cmp-q { color: var(--muted); }
.compare td.is-core {
  background: var(--navy);
  border-bottom-color: var(--line-dark);
  box-shadow: 12px 0 24px -20px rgba(11,19,32,.75), -12px 0 24px -20px rgba(11,19,32,.75);
}
.compare td.is-core .cmp-q { color: var(--on-dark); }
.compare td.no.is-core .cmp-q { color: var(--on-dark-muted); }
.compare td.no.is-core .cmp-mark--no { background: rgba(255,255,255,.12); color: var(--on-dark-muted); }
.compare tbody:last-child tr:last-child > * { border-bottom: 0; }
.compare tbody:last-child tr:last-child > th { border-bottom-left-radius: 22px; }
.compare tbody:last-child tr:last-child > td:last-child { border-bottom-right-radius: 22px; }
.compare tbody:last-child tr:last-child > td.is-core { border-radius: 0 0 18px 18px; }

/* Phones: each feature, then its three plans as small labelled chips (Core in navy) */
@media (max-width: 599.98px) {
  .compare table, .compare tbody, .compare tr, .compare th, .compare td { display: block; }
  .compare caption { display: block; padding: 16px 14px 2px; font-size: 1.25rem; }
  .compare thead th { position: static; }
  .compare table { border-radius: 18px; }
  .compare thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .compare tbody tr:not(.cmp-group) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 12px 12px 14px;
    border-bottom: 1px solid var(--line);
  }
  .compare tbody:last-child tr:last-child { border-bottom: 0; }
  .compare tbody th[scope="row"] { grid-column: 1 / -1; padding: 0 0 6px; border: 0; }
  .cmp-group th { padding: 16px 12px 2px; }
  .cmp-group td { display: none; }
  .compare td { padding: 8px 4px 10px; border: 0; border-radius: 12px; background: var(--paper-2); box-shadow: none; }
  .compare td.is-core { box-shadow: none; }
  .compare tbody:last-child tr:last-child > td.is-core, .compare tbody:last-child tr:last-child > td:last-child { border-radius: 12px; }
  .cmp-plan { display: block; margin-bottom: 6px; font-size: 0.75rem; font-weight: 800; color: var(--ink); }
  .compare td.is-core .cmp-plan { color: var(--on-dark); }
  .cmp-mark { width: 26px; height: 26px; }
  .cmp-q { font-size: 0.75rem; }
  .compare td.no .cmp-mark--no { background: #e2e7ee; }
  .compare td.no.is-core .cmp-mark--no { background: rgba(255,255,255,.12); }
}

.terms { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; }
.terms li { display: flex; align-items: flex-start; gap: 12px; font-weight: 750; color: var(--ink); line-height: 1.4; }
.terms svg { width: 24px; height: 24px; flex: none; color: var(--accent-text); }
.terms-note { margin: 16px 0 0; font-size: 0.9375rem; color: var(--muted); }

/* Founding offer */

.founding { padding-top: 0; }
.offer {
  position: relative;
  display: grid;
  gap: 28px;
  align-items: center;
  border-radius: 24px;
  background:
    radial-gradient(500px 360px at 100% 0%, rgba(255,122,26,.2), transparent 60%),
    var(--navy);
  color: var(--on-dark-muted);
  padding: 36px 22px;
  overflow: hidden;
}
.offer h2 { color: var(--on-dark); }
.offer p { max-width: 34rem; }
.offer .btn { margin-top: 8px; }
/* The founding ladder: five rungs, one per place, leaning on a roofline. The count sits large
   beside the top of the ladder and is the only number; main.js marks the rungs from it. */
.founding-art {
  position: relative;
  width: min(96%, 282px);           /* no taller than 350px on phones */
  margin: 0 auto;
}
.offer .places-left {
  position: absolute;
  left: 0; top: 0;
  z-index: 1;
  margin: 0;
  color: var(--on-dark-muted);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
}
.places-left strong {
  display: block;
  margin-top: 4px;
  color: var(--on-dark);
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.places-left .placeholder { color: var(--accent); }
.places-pips { position: absolute; left: 0; top: 86px; z-index: 1; display: flex; gap: 6px; margin: 0; }
.places-pips i { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(255,122,26,.55); }
.places-pips i.is-taken { background: #3a4c6d; box-shadow: none; }
.places-pips:not(.has-state) { visibility: hidden; }   /* until the page has read the count */
.places-art img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 92%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 92%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 90%, transparent);
  mask-composite: intersect;
}

/* FAQ */

.faq-grid { display: grid; gap: 20px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  font-weight: 800;
  font-size: 1.1875rem;
  color: var(--ink);
  line-height: 1.3;
  transition: color .2s ease;
}
.faq summary:hover { color: var(--accent-text); }
.faq summary::-webkit-details-marker { display: none; }
.faq .answer { padding: 0 0 22px; max-width: 42rem; }
.faq .answer p:last-child { margin-bottom: 0; }

/* Free check form */

.final { overflow: hidden; isolation: isolate; }
.final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(600px circle at 20% 10%, rgba(255,122,26,.16), transparent 60%);
}
.final-grid { display: grid; gap: 36px; }
.final-call h2 { font-size: clamp(2.3rem, 8.6vw, 4.4rem); }
.final-call p { max-width: 30rem; }
.final-call .lede strong { color: var(--on-dark); font-weight: 750; }
.final-alt { margin-top: 24px; }
.final-alt p { margin-bottom: 10px; color: var(--on-dark); font-weight: 700; }

.card {
  background: var(--paper);
  color: var(--body);
  border-radius: 22px;
  padding: 26px 20px;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.7);
}
.card h3, .section--dark .card h3 { font-size: 1.5rem; margin-bottom: 6px; color: var(--ink); letter-spacing: -0.02em; }
.section--dark .card h4 { color: var(--ink); }
.form-req { margin-bottom: 18px; font-size: 0.9375rem; color: var(--muted); }

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-weight: 750;
  color: var(--ink);
  margin-bottom: 6px;
  font-size: 0.96875rem;
}
.field input, .field select {
  width: 100%;
  min-height: 54px;
  padding: 12px 14px;
  font: inherit;
  font-size: 1.0625rem; /* 17px stops iOS zooming on focus */
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--field-line);
  border-radius: var(--radius-sm);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .2s ease;
  scroll-margin-top: calc(var(--header-h) + 56px);
  scroll-margin-bottom: 120px;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px;
  padding-right: 44px;
}
.field input:hover, .field select:hover { border-color: #5b6b82; }
.field input:focus, .field select:focus { border-color: var(--ink); }
.field input:focus-visible, .field select:focus-visible { outline-offset: 2px; }
.field [aria-invalid="true"] { border-color: var(--error); }
.field-error { margin: 6px 0 0; color: var(--error); font-weight: 650; font-size: 0.9375rem; line-height: 1.4; }
.field-error[hidden] { display: none; }

.form-status { margin: 14px 0 0; font-weight: 650; border-radius: var(--radius-sm); scroll-margin-bottom: 120px; }
.form-status:not(:empty) { padding: 12px 14px; }
.form-status.is-ok { background: #e7f6ec; color: #14532d; }
.form-status.is-error { background: #fdecea; color: #8a1c12; }

.next { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.next h4 { font-size: 1rem; margin-bottom: 10px; }
.next ol { margin: 0; padding: 0 0 0 1.3em; display: grid; gap: 6px; font-size: 0.9375rem; line-height: 1.45; }
.next li::marker { font-weight: 800; color: var(--accent-text); }
.form-legal { font-size: 0.875rem; color: var(--muted); margin: 18px 0 0; line-height: 1.5; }
.form-legal a { color: var(--ink); }

/* Footer */

.site-footer {
  position: relative;
  background: #070c15;
  color: var(--on-dark-muted);
  padding: 52px 0 36px;
  font-size: 0.9375rem;
  overflow: hidden;
}
.footer-grid { display: grid; gap: 26px; }
.site-footer .brand { margin-bottom: 10px; }
.site-footer p { margin: 0 0 6px; }
.site-footer a { color: var(--on-dark); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer .copy { margin-top: 16px; }
.site-footer { padding-bottom: 0; }
/* The wordmark sits on the footer's bottom edge. On phones it sits just above the bottom bar,
   leaving exactly the bar's height below it (the bar is 73px plus any home-indicator inset). */
.footer-word-wrap { margin-top: 48px; }
.js .footer-word-wrap { padding-bottom: calc(73px + env(safe-area-inset-bottom, 0px)); }
.footer-word {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* Legal page */

.legal { padding: 48px 0 72px; }
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: clamp(2.2rem, 8vw, 3.4rem); }
.legal h2 { font-size: 1.5rem; margin-top: 1.6em; }
.notice {
  border: 2px dashed #b6c0cd;
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--paper-2);
  margin: 0 0 28px;
}

/* Larger screens */

@media (max-width: 599.98px) {
  .plan { padding: 26px 20px 20px; }
  .price .amount { font-size: 2.75rem; }
  .plan-for { padding-bottom: 12px; }
  .setup { padding-bottom: 14px; }
  .feats-wrap { padding: 12px 0 16px; }
  .feats li { padding: 3px 0; }
  .plan .btn { padding-inline: 12px; }
}

@media (min-width: 600px) {
  .calc-card { padding: 32px 32px 34px; }
  .calc-out { padding: 24px 26px 26px; }
  .calc-card .btn { width: auto; }
  .calc-sum, .calc-compare { min-height: 2lh; }
  :root { --gutter: 28px; }
  .hero-actions { grid-template-columns: auto auto; justify-content: start; }
  .card { padding: 34px 32px; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .offer { padding: 44px 36px; }
  .example-body { padding: 0 28px 28px; }
  .example summary { padding: 20px 28px; }
  .founder-photo { width: 200px; }
}

@media (min-width: 900px) {
  :root { --header-h: 72px; --bar-room: 24px; }
  body { font-size: 1.125rem; }
  .section { padding: 112px 0; }
  .nav { display: block; }
  .header-call { display: inline-flex; }
  .js .bar { display: none; }
  .js .footer-word-wrap { padding-bottom: 0; }
  .trades .wrap { padding-right: calc(var(--gutter) + var(--comp-w) + var(--comp-gap)); }

  /* Two columns through the story: text on the left, phone on the right */
  .hero-grid, .split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--comp-w);
    column-gap: var(--comp-gap);
    align-items: start;
  }
  .col-main { max-width: calc(100% - var(--comp-w) - var(--comp-gap)); }

  .hero { padding-top: 56px; }
  .hero-grid { align-items: center; padding-bottom: 72px; min-height: calc(88vh - var(--header-h)); }
  .hero h1 { font-size: clamp(3rem, 5.3vw, 5.4rem); }
  .hero .btn--xl { padding-inline: 20px; font-size: 1.125rem; }
  .scene { --pw: 300px; }

  .story h2 { font-size: clamp(2.3rem, 4.3vw, 3.6rem); }
  .statement { font-size: clamp(2.2rem, 3.9vw, 3.4rem); }
  .problem .split-side { margin-top: 0; }

  .step { grid-template-columns: 50px minmax(0, 1fr) calc(var(--comp-w) + var(--comp-gap) - 18px); }
  .step .pcard { grid-column: 3; grid-row: 1; margin-top: 0; justify-self: end; width: var(--comp-w); }
  .steps-list { gap: 28px; }
  .step-body { padding: 20px 24px 24px; }
  .step-body > .art-slot { max-width: 320px; }
  .steps-marker { max-width: calc(100% - var(--comp-w) - var(--comp-gap)); }

  .demo { padding: 100px 0; }
  .demo-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); row-gap: 8px; }
  .demo .art-slot--demo { grid-column: 2; grid-row: 1; align-self: end; }
  .demo-action { grid-column: 1; }

  .founder-grid { grid-template-columns: 240px minmax(0, 1fr); gap: 64px; }
  .founder-photo { width: 240px; }

  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .plan--core { order: 0; margin-top: 0; }
  .terms { grid-template-columns: repeat(3, auto); justify-content: start; gap: 36px; }
  .compare { max-width: 960px; margin-inline: auto; margin-top: 64px; }
  .compare table { font-size: 1rem; }
  .compare td { font-size: 0.875rem; padding: 18px 10px; }
  .compare tbody th[scope="row"] { padding: 18px 12px 18px 24px; }
  .cmp-group th { padding-left: 24px; }

  .founding { padding-top: 0; }
  .offer { grid-template-columns: 1.4fr 1fr; padding: 64px; }
  .founding-art { width: min(100%, 380px); }
  .faq-grid { grid-template-columns: 0.8fr 1.2fr; gap: 64px; }
  .final-grid { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (min-width: 1100px) {
  :root { --comp-w: 350px; --comp-gap: 80px; }
  /* Illustration leads, text beside it */
  .step-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 26px; align-items: center; padding: 20px; }
  .step-body > .art-slot { margin: 0; }
}


/* Desktop, 600px tall and up: the hero phone and everything that goes with it fit on one screen,
   in the hero and while it travels. The phone is laid out at 300 x 622 and scaled as a whole
   (--phone-k, 0.75 to 1, worked out from the screen height by the script in the page head and
   main.js), so its layout never changes; the caption and the Skip or Replay button share one row
   under it. The hero's top padding shrinks on short screens, and the scene sits at the top of its
   column, so the Skip button is on screen from the first frame. */
@media (min-width: 900px) and (min-height: 600px) {
  .hero { padding-top: clamp(8px, calc(100vh - 744px), 56px); }
  .hero-grid .scene-home { align-self: start; }
  .scene { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
  .scene .phone {
    grid-column: 1 / -1;
    scale: var(--phone-k, 1);
    transform-origin: 50% 0;
    margin-bottom: calc(622px * (var(--phone-k, 1) - 1));
  }
  .scene .scene-caption { margin: 8px 0 0; justify-self: start; text-align: left; line-height: 1.3; }
  .scene .replay { margin: 8px 0 0; }
  .scene .replay-more { display: none; }
}

/* From 1100px wide (and 600px tall): the six steps sit on a centred ladder and alternate sides.
   This static layout is what reduced motion and no JavaScript get, with each step's phone card on
   the other side of the ladder. With motion it becomes the pinned climb (.pin-live, further down).
   main.js nudges each number onto the nearest real rung of the tile (--snap, a transform). */
@media (min-width: 1100px) and (min-height: 600px) {
  .steps { --lad: 176px; --gap: 28px; padding: 4px 0; }
  .steps-rail {
    --s: 1;
    left: 50%;
    top: 0; bottom: 0;
    margin-left: -88px;
  }
  .steps-list { gap: 0; }
  .step {
    grid-template-columns: minmax(0, 1fr) var(--lad) minmax(0, 1fr);
    column-gap: var(--gap);
    align-items: center;
    padding-block: 26px;
  }
  /* The step's own rung: a glowing orange bar laid exactly over one of the tile's rungs, carrying its number */
  .step::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 111px;
    height: 16px;
    margin: -8px 0 0 -55.5px;
    border-radius: 2px;
    background: linear-gradient(180deg, #ff8a2e 0 70%, #ffb070 70%);
    box-shadow: 0 0 12px 2px rgba(255,122,26,.55), 0 0 30px 6px rgba(255,122,26,.22);
    transition: opacity .4s ease;
  }
  .step-num { grid-column: 2; grid-row: 1; justify-self: center; width: 58px; height: 58px; font-size: 1.375rem; }
  :root:not(.pin-live) .step::before, :root:not(.pin-live) .step-num, :root:not(.pin-live) .step-body::after { translate: 0 var(--snap, 0px); }
  .step-body { grid-row: 1; display: block; width: min(100%, 460px); padding: 18px 20px 22px; position: relative; }
  .step-body > .art-slot { max-width: 300px; margin: 0 auto 16px; }
  .step--left .step-body { grid-column: 1; justify-self: end; }
  .step--right .step-body { grid-column: 3; justify-self: start; }
  /* A short bracket from the card to its rung */
  .step-body::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(var(--gap) + 4px);
    height: 6px;
    margin-top: -3px;
    background: #4b5f82;
    border-radius: 3px;
  }
  .step--left .step-body::after { right: calc(-1 * (var(--gap) + 4px)); }
  .step--right .step-body::after { left: calc(-1 * (var(--gap) + 4px)); }
  .step .pcard { grid-row: 1; margin: 0; width: min(100%, 340px); }
  .step--left .pcard { grid-column: 3; justify-self: start; }
  .step--right .pcard { grid-column: 1; justify-self: end; }
  /* The plate between the call and what happens after it, across the ladder */
  .steps-marker {
    max-width: none;
    margin: 14px auto;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 999px;
    background: var(--navy-2);
    border: 2px solid var(--accent);
    box-shadow: 0 10px 24px -14px rgba(0,0,0,.7);
  }
  .steps-marker-node { display: none; }
}


/* The pinned climb (main.js adds .pin-live from 1100px wide and 600px tall, with motion).
   .steps is a tall scroll track; .steps-stage sticks below the header, one screen high. The ladder
   is taller than the stage and moves down as you scroll (--climb), so the active rung sits in the
   middle. Only the active step's card shows; the others are clipped, never removed, so the list is
   whole for screen readers. Each step's rung and number ride on the ladder (--ry, their height on it). */
.pin-live .steps { height: var(--track); padding: 0; }
.pin-live .steps-stage {
  position: sticky;
  top: var(--stage-top, 72px);
  height: var(--stage-h, 80vh);
  overflow: clip;
}
.pin-live .steps-rail { top: 0; bottom: auto; height: var(--ladder-h); transform: translateY(var(--climb, 0px)); will-change: transform; }
.pin-live .steps-list { display: block; }
.pin-live .step { position: absolute; inset: 0; display: block; padding: 0; pointer-events: none; }
.pin-live .step::before { top: 0; margin: 0 0 0 -55.5px; translate: 0 calc(var(--ry) + var(--climb, 0px) - 8px); }
.pin-live .step-num { position: absolute; left: 50%; top: 0; margin-left: -29px; translate: 0 calc(var(--ry) + var(--climb, 0px) - 29px); }
.pin-live .step-body {
  position: absolute;
  top: 50%;
  width: min(440px, calc(50% - 88px - var(--gap) - 8px));
  translate: 0 -50%;
  pointer-events: auto;
}
.pin-live .step-body > .art-slot { width: clamp(140px, calc(100vh - 480px), 260px); max-width: none; }
.pin-live .step--left .step-body { right: calc(50% + 88px + var(--gap)); justify-self: auto; }
.pin-live .step--right .step-body { left: calc(50% + 88px + var(--gap)); justify-self: auto; }
.pin-live .step:not(.is-active) .step-body { clip-path: inset(0 0 100% 0); }
.pin-live .step-body:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.pin-live .steps-marker {
  position: absolute;
  left: 50%; top: 0;
  z-index: 2;
  margin: 0;
  width: 208px;                     /* stays within the gap between the two cards' sides */
  padding: 8px 14px;
  font-size: 0.75rem;
  line-height: 1.35;
  text-align: center;
  translate: -50% calc(var(--ry) + var(--climb, 0px) - 50%);
}
/* A way past the track, and six buttons to jump to a step, over the ladder at the top and bottom */
.pin-live .steps-skip, .pin-live .steps-progress {
  position: absolute;
  left: 50%;
  z-index: 3;
  translate: -50% 0;
  border-radius: 999px;
  background: rgba(19, 30, 48, .94);
  border: 1px solid var(--line-dark);
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.8);
}
.pin-live .steps-skip {
  top: 14px;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 750;
  color: var(--on-dark);
  text-underline-offset: 3px;
  white-space: nowrap;
}
.pin-live .steps-progress {
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 6px 4px 14px;
}
.steps-progress-text { margin: 0; font-size: 0.8125rem; font-weight: 750; color: var(--on-dark); white-space: nowrap; font-variant-numeric: tabular-nums; }
.steps-marks { display: flex; }
.steps-go {
  display: grid;
  place-items: center;
  width: 26px; height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.steps-go::before {
  content: "";
  width: 14px; height: 5px;
  border-radius: 2px;
  background: #5b729a;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.steps-go.is-on::before { background: var(--accent); }
.steps-go[aria-current="step"]::before { box-shadow: 0 0 8px 1px rgba(255,122,26,.7); height: 7px; }
.steps-go:focus-visible { outline-offset: -2px; }

/* Plans line up row by row where subgrid is supported */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .plans { grid-template-rows: repeat(7, auto); row-gap: 0; }
    .plan { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; }
  }
}

/* Small phones: keep the demo button above the fold */
@media (max-width: 380px), (max-height: 600px) and (max-width: 899.98px) {
  .hero { padding-top: 18px; }
  .hero .eyebrow { margin-bottom: 10px; font-size: 0.75rem; }
  .hero h1 { font-size: 2.35rem; margin-bottom: 12px; }
  .hero .lede { font-size: 1.0625rem; line-height: 1.5; margin-bottom: 18px; }
  .btn--xl { min-height: 60px; font-size: 1.0625rem; padding: 12px 20px; }
}

/* Short screens (landscape phones, 400% zoom): nothing fixed */
@media (max-height: 420px) {
  html { scroll-padding-top: 12px; scroll-padding-bottom: 12px; }
  .site-header { position: relative; }
  .js .bar { display: none; }
  .js .footer-word-wrap { padding-bottom: 0; }
}

/* ---------- Motion ----------
   .motion (from the page head): JavaScript on and no reduced-motion preference.
   .anim (from main.js, once it has run): below-the-fold reveals may hide until they enter.
   Hidden states use opacity and transforms only, so everything stays in the Tab order. */

/* Logo intro, once on load (the owner's idea). The frame is there from the start; the rails and
   rungs draw on as the letters climb one above the other in a column standing on the L; the
   column then tips over clockwise about its foot, lands as the wordmark with two small bounces,
   and the hook draws on. About 1.55 s. Transforms and stroke draws only. The SVG keeps its final
   size throughout, so nothing around it moves. */
.motion .site-header .lockup .rail,
.motion .site-header .lockup .rung,
.motion .site-header .lockup .wave { stroke-dasharray: 1; animation: draw .42s cubic-bezier(.65, 0, .35, 1) backwards; }
.motion .site-header .lockup .rail:nth-of-type(2) { animation-delay: .06s; }
.motion .site-header .lockup .rung { animation-duration: .24s; animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
.motion .site-header .lockup .rung:nth-of-type(5) { animation-delay: .22s; }
.motion .site-header .lockup .rung:nth-of-type(4) { animation-delay: .34s; }
.motion .site-header .lockup .rung:nth-of-type(3) { animation-delay: .46s; }
.motion .site-header .lockup .wave { animation-duration: .3s; animation-delay: 1.2s; }
.motion .site-header .lockup .wm { transform-box: view-box; transform-origin: 146px 108px; animation: tip 1.55s backwards; }
.motion .site-header .lockup .ltr { animation: climb .3s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.motion .site-header .lockup .ltr:nth-child(2) { animation-delay: .08s; }
.motion .site-header .lockup .ltr:nth-child(3) { animation-delay: .16s; }
.motion .site-header .lockup .ltr:nth-child(4) { animation-delay: .24s; }
.motion .site-header .lockup .ltr:nth-child(5) { animation-delay: .32s; }
.motion .site-header .lockup .ltr:nth-child(6) { animation-delay: .40s; }
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes climb {
  from { transform: translateX(-44px); opacity: 0; }
  25% { opacity: 1; }
}
@keyframes tip {
  0%, 52% { transform: translateX(22px) rotate(-90deg) scale(.44); animation-timing-function: cubic-bezier(.5, 0, .85, .45); }
  75% { transform: translateX(0) rotate(0deg) scale(1); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  84% { transform: translateX(0) rotate(-7deg) scale(1); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  92% { transform: translateX(0) rotate(0deg) scale(1); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  96.5% { transform: translateX(0) rotate(-2deg) scale(1); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  100% { transform: translateX(0) rotate(0deg) scale(1); }
}

/* The hero call button rings twice, then rests (done inside 5 s) */
.motion .hero-actions .live::before { animation: ring 1.8s ease-out .6s 2; }
.motion .hero-actions .live::after { animation: ring 1.8s ease-out 1.2s 2; }

/* One-time reveals */
[data-reveal], [data-split] { transition: opacity .7s ease, transform .9s var(--ease-out); }
.anim [data-reveal]:not(.is-in), .anim [data-split]:not(.is-in) { opacity: 0; transform: translateY(26px); }
[data-split].is-split { transition: none; }
.anim .pcard:not(.is-in) .bits > * { opacity: 0; transform: translateY(10px); }
.pcard .bits > * { transition: opacity .45s ease, transform .6s var(--ease-out); }
.pcard .bits > :nth-child(2) { transition-delay: .12s; }
.pcard .bits > :nth-child(3) { transition-delay: .24s; }
.pcard .bits > :nth-child(4) { transition-delay: .36s; }
.pcard .bits > :nth-child(5) { transition-delay: .48s; }
.anim .pcard.is-in .ring-icon::before { animation: ring 1.4s ease-out .4s 2; }
.anim .pcard.is-in .ring-icon::after { animation: ring 1.4s ease-out .9s 2; }

/* How it works: the steps light up in turn (phones) */
.anim .steps:not(.is-in) .step-num { background: var(--navy-3); color: var(--on-dark-muted); }
.steps.is-in .step .step-num { transition-delay: calc(var(--i, 0) * .25s); }

/* Founding places: the ladder is revealed from the ground up, once */
/* Founding illustration, once, on the way into view: revealed from the ground up, then the pips pop in */
@media (prefers-reduced-motion: no-preference) {
  .anim .places-art img { clip-path: inset(0 0 0 0); transition: clip-path .9s cubic-bezier(.65, 0, .35, 1); }
  .anim .places-art:not(.is-in) img { clip-path: inset(100% 0 0 0); }
  .anim .places-pips i { transition: transform .4s cubic-bezier(.3, 1.8, .5, 1) calc(.7s + var(--k, 0) * .08s); }
  .anim .founding-art:not(:has(.places-art.is-in)) .places-pips i { transform: scale(0); }
}
.places-pips i:nth-child(2) { --k: 1; }
.places-pips i:nth-child(3) { --k: 2; }
.places-pips i:nth-child(4) { --k: 3; }
.places-pips i:nth-child(5) { --k: 4; }

/* Footer wordmark, once: the letters rise one by one from below the edge */
@media (prefers-reduced-motion: no-preference) {
  .anim .footer-word .fw-ltr { transform-box: fill-box; transition: transform .6s cubic-bezier(.2, .9, .25, 1) calc(var(--i) * .08s); }
  .anim .footer-word:not(.is-in) .fw-ltr { transform: translateY(105%); }
}

/* Desktop scroll companion (main.js adds .has-companion at 900px wide and up) */
.companion { display: none; }
.has-companion .companion {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.has-companion .companion-grid {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--comp-w);
  column-gap: var(--comp-gap);
}
.has-companion .companion-slot {
  grid-column: 2;
  align-self: start;
  position: sticky;
  top: var(--comp-stick, 120px);
  margin-top: var(--comp-start, 0px);
  pointer-events: none;   /* the column itself lets clicks through: the phone moves across the page */
}
.has-companion .companion-slot .scene { pointer-events: auto; }
.has-companion .companion .scene { max-width: none; }
.has-companion .story .pcard {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.has-companion .problem { min-height: 90vh; }
.has-companion .how { padding-bottom: 208px; }   /* the last screen (review request) stays up for 250 px or more before the phone lets go */
.has-companion .step:not(.is-lit) .step-num { background: var(--navy-3); color: var(--on-dark-muted); }
.has-companion .step .step-num { transition-delay: 0s; }
.has-companion .step.is-current .step-body { border-color: rgba(255,122,26,.55); }
.has-companion .step.is-current.is-lit .step-num { box-shadow: 0 0 0 6px rgba(255,122,26,.18); }
.has-companion .step:not(.is-lit)::before { opacity: 0; }   /* the tile's own slate rung shows through */
.scene.not-call .replay { visibility: hidden; }
.layer.is-ringing .ring-icon::before { animation: ring 1.4s ease-out 2; }
.layer.is-ringing .ring-icon::after { animation: ring 1.4s ease-out .7s 2; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}