/* ============================================================
   tallo.ai — "Porch light, daylight edition"
   The best of two systems:
   - Type, logo, and restraint from CLEAN light (Inter, hairlines,
     one soft shadow, accent used sparingly).
   - Warmth and story from Porch Light (bone ground, brass/amber,
     the SMS thread as centerpiece proof, one dusk moment).

   Rules of the merged system:
   - Ground is bone. White is reserved for product surfaces
     (phone frames, cards).
   - One warm hue family: brass for eyebrows/labels on bone,
     amber only on night, logo orange (--accent) only for primary
     CTAs and the underline mark. Blue is SMS bubbles ONLY.
   - No italics anywhere. Emphasis is the .mark underline.
   - Exactly one dark section per page: the final CTA + footer.
     That is the porch light coming on.
   - Dashed borders stay semantic: not-yet / kept-warm / roadmap.
   ============================================================ */

/* Self-hosted fonts: variable files, latin subset, zero third-party
   requests on the critical path. Preloaded from every page head. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/fraunces-300-600-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-400-700-latin.woff2') format('woff2');
}

:root {
  /* Porch-light palette (PR #2). Dusk is ink-blue, never black. */
  --bone: #F6F1E7;          /* page ground */
  --bone-deep: #EDE5D3;     /* tint band for section rhythm */
  --white: #FFFFFF;         /* product surfaces only */
  --ink: #1D2130;           /* text on bone */
  --muted: #6E6A5E;         /* secondary text on bone */
  --faint: #A8A294;         /* tertiary, pending states */
  --line: #DDD3C1;
  --line-strong: #C9BFA9;

  --night: #151B2C;         /* dusk-ink ground: nav, heroes, final CTA, footer */
  --night-card: #1C2338;    /* cards sitting on night */
  --cream: #F4EEDF;         /* text on night */
  --muted-night: #99A1B6;   /* secondary text on night */
  --line-night: #2C3450;

  --accent: #F86A22;        /* the logo period. Primary CTAs + .mark only. */
  --accent-hover: #E55A14;
  --brass: #A96F1E;         /* eyebrows, small labels, caption dots on bone */
  --amber: #E19A3C;         /* porch light. Night surfaces only. */
  --blue: #2E7CF6;          /* SMS bubbles inside phone frames. Nowhere else. */

  --shadow-card: 0 24px 48px -24px rgba(29, 33, 48, 0.18);
  --shadow-sm: 0 1px 2px rgba(29, 33, 48, 0.05), 0 12px 32px -16px rgba(29, 33, 48, 0.10);
  --shadow-btn: 0 1px 2px rgba(29, 33, 48, 0.18);
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --radius-card: 16px;
  --radius-phone: 32px;
  --radius-pill: 999px;

  --font-display: 'Fraunces', georgia, serif;
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Night sections are never flat fills. Glow from above (heroes)
     and from below (the closing CTA — the porch light coming on). */
  --night-glow: radial-gradient(ellipse 1100px 700px at 50% -10%,
    #202946 0%, #151B2C 58%, #101525 100%);
  --night-glow-up: radial-gradient(ellipse 1000px 600px at 50% 100%,
    #1C2440 0%, #151B2C 62%, #101525 100%);
}

/* ---------- Base ---------- */

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: rgba(248, 106, 34, 0.22); }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 4px;
}

.shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Type ---------- */

h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 66px);
  font-weight: 420;
  line-height: 1.16;
  letter-spacing: -0.02em;
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 420;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

h4 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

h1, h2, .testimonial blockquote { text-wrap: balance; }

.eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 16px;
}

.section-lede {
  font-size: 17px;
  color: var(--muted);
  max-width: 640px;
  margin-top: 16px;
}

.section-head {
  max-width: 760px;
  margin: 0 auto 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.section-head .section-title { max-width: 680px; }
.section-lede { margin-left: auto; margin-right: auto; }

/* The emphasis device: a hand-drawn underline in the logo's orange.
   Used on at most one phrase per page. No italics, ever. */
.mark {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.mark .mark__stroke {
  position: absolute;
  left: 1%;
  bottom: -0.14em;
  width: 98%;
  height: 0.14em;
  color: var(--accent);
  pointer-events: none;
}

/* The second emphasis device: a hand-drawn ring in the same orange.
   Rarer than the underline. At most one per page, on the one claim
   that earns it. Draws itself in when its section scrolls into view. */
.mark--circle { white-space: nowrap; }
.mark--circle .mark__ring {
  position: absolute;
  left: -13%;
  top: -34%;
  width: 128%;
  max-width: none;
  height: 172%;
  color: var(--accent);
  pointer-events: none;
  overflow: visible;
}
.mark--circle .mark__ring path {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
.js .reveal:not(.is-visible) .mark--circle .mark__ring path,
.js .reveal--stagger:not(.is-visible) .mark--circle .mark__ring path { stroke-dashoffset: 100; }
.js .reveal.is-visible .mark--circle .mark__ring path,
.js .reveal--stagger.is-visible .mark--circle .mark__ring path {
  transition: stroke-dashoffset 0.9s var(--ease-out) 0.5s;
}

/* The underline draws itself in too, once its section arrives.
   Same one-stroke language as the ring. Requires pathLength="100"
   on the stroke path. */
.mark .mark__stroke path {
  stroke-dasharray: 101;
  stroke-dashoffset: 0;
}
.js .reveal:not(.is-visible) .mark .mark__stroke path,
.js .reveal--stagger:not(.is-visible) .mark .mark__stroke path { stroke-dashoffset: 101; }
.js .reveal.is-visible .mark .mark__stroke path,
.js .reveal--stagger.is-visible .mark .mark__stroke path {
  transition: stroke-dashoffset 0.7s var(--ease-out) 0.55s;
}

/* ---------- Buttons & links ---------- */
/* Buttons are pills. Warmth over sharpness. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-btn), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn--primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.btn--ghost {
  border: 1px solid var(--line-strong);
  color: var(--ink);
  padding: 12px 25px;
}
.btn--ghost:hover { border-color: rgba(28, 25, 21, 0.36); }

/* Night variant, for the final CTA. */
.btn--cream { background: var(--cream); color: var(--night); }
.btn--cream:hover { transform: translateY(-1px); }

.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--sm.btn--ghost { padding: 9px 17px; }

.link-arrow {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.16s ease;
}
.link-arrow:hover { color: var(--ink); }
.link-arrow .arrow {
  display: inline-block;
  transition: transform 0.16s ease;
}
.link-arrow:hover .arrow { transform: translateX(2px); }

/* ---------- Nav ---------- */
/* Every page opens on the night ground and the nav sits on it —
   one continuous dusk surface, exactly as in the porch-light system. */

header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--night);
  border-bottom: 1px solid transparent;
  transition: border-color 0.16s ease;
}
header.is-scrolled { border-bottom-color: var(--line-night); }

.nav {
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { flex: 1 1 0; }
.brand svg { height: 26px; width: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav__links a {
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted-night);
  border-radius: var(--radius-pill);
  transition: color 0.16s ease;
}
.nav__links a:hover { color: var(--cream); }

.nav__actions {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.nav__link {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted-night);
}
.nav__link:hover { color: var(--cream); }

.menu-button {
  display: none;
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
  color: var(--cream);
}

.nav-menu {
  display: none;
  flex-direction: column;
  padding: 8px 24px 20px;
  border-bottom: 1px solid var(--line-night);
  background: var(--night);
}
.nav-menu.is-open { display: flex; }
.nav-menu a {
  padding: 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--cream);
  border-bottom: 1px solid var(--line-night);
}
.nav-menu a:last-child { border-bottom: 0; }

/* ---------- Hero ---------- */
/* Every page opens at dusk. The nav sits inside the same night surface,
   and the hero hands off to bone daylight at a hard section boundary.
   Heroes sit under the sticky nav so dusk starts at the very top. */

.hero {
  padding: 108px 0 0;
  text-align: center;
  background-color: var(--night);
  background-image: var(--night-glow);
  color: var(--cream);
}

.hero h1 { max-width: 980px; margin: 0 auto; color: var(--cream); }

.hero .eyebrow { color: var(--amber); }

.hero__sub {
  font-size: 19px;
  color: var(--muted-night);
  max-width: 560px;
  margin: 24px auto 0;
}

.hero .link-arrow { color: var(--muted-night); }
.hero .link-arrow:hover { color: var(--cream); }
.hero .hero__peek {
  border-color: var(--line-night);
  box-shadow: 0 30px 80px -30px rgba(5, 8, 18, 0.6);
}

.hero__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 40px;
}

/* Media slot. Today a product screenshot, tomorrow whatever earns
   the spot. Swap the child, keep the frame. */
.hero__peek {
  max-width: 960px;
  margin: 72px auto 0;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 45%, transparent 100%);
}
.hero__peek img { width: 100%; height: auto; }

/* ---------- Sections ---------- */

.section { padding: 108px 0; }
.section--tint { background: var(--bone-deep); }

/* The mid-page night band: the point-solution story told at dusk,
   amber marking what Tallo leads. */
.section--night {
  background-color: var(--night);
  background-image: var(--night-glow);
  color: var(--cream);
}
.section--night .section-title { color: var(--cream); }
.section--night .eyebrow { color: var(--amber); }
.section--night .section-lede { color: var(--muted-night); }

/* ---------- Product overview grid ---------- */
/* RentEngine-format overview: everything in one place, at a glance.
   White product cards on bone, type-led, one proof line each. */

.overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.overview-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 22px 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.overview-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  padding: 0 6px;
}
/* Each card leads with a small drawn product moment, not a paragraph. */
.ov-vis {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 118px;
  background: var(--bone);
  border-radius: 12px;
  padding: 14px;
  overflow: hidden;
}
.ov-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.ov-chip--ghost { background: transparent; color: var(--muted); }
.ov-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brass); }
.ov-bubble {
  max-width: 240px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.45;
  border-radius: 14px 14px 14px 5px;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  align-self: flex-start;
}
.ov-bubble--tallo {
  border: 0;
  background: var(--blue);
  color: #fff;
  border-radius: 14px 14px 5px 14px;
  align-self: flex-end;
}
.ov-row { display: flex; align-items: center; gap: 8px; }
.ov-bar { display: flex; gap: 3px; width: 100%; max-width: 250px; height: 30px; }
.ov-bar .q {
  flex: 10;
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: var(--amber);
  border-radius: 8px 3px 3px 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: #3A2A10;
  white-space: nowrap;
}
.ov-bar .w {
  flex: 14;
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: rgba(169, 111, 30, 0.08);
  border: 1.5px dashed var(--brass);
  border-radius: 3px 8px 8px 3px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--brass);
  white-space: nowrap;
}
.ov-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

/* ---------- Onboarding promises ---------- */

.onboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.onboard-card {
  padding: 28px 28px 30px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.onboard-card h4 { margin-bottom: 10px; }
.onboard-card p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }

.switch-head { max-width: 760px; }
.switch-head .btn { margin-top: 32px; }
.pms-label {
  margin: 64px 0 20px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Scenario tiles ---------- */

.tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 36px;
}

.tile {
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.tile:hover { color: var(--ink); border-color: rgba(28, 25, 21, 0.36); }
.tile.is-active {
  color: var(--bone);
  background: var(--ink);
  border-color: var(--ink);
}

/* ---------- Meet Tallo: phone frame + side cards ---------- */

.demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
}

.phone {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-phone);
  box-shadow: var(--shadow-card);
  transition: opacity 0.18s ease;
}

.phone__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.phone__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--ink);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--cream);
}
.phone__contact { font-size: 13px; font-weight: 600; color: var(--muted); }

.thread { display: flex; flex-direction: column; gap: 10px; }

.thread__time {
  text-align: center;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--faint);
}
.thread__time:not(:first-child) { margin-top: 14px; }

.bubble {
  max-width: 78%;
  padding: 11px 15px;
  font-size: 14px;
  line-height: 1.5;
}
.bubble--renter {
  align-self: flex-start;
  background: #F1EDE4;
  border-radius: 18px 18px 18px 6px;
  color: var(--ink);
}
.bubble--tallo {
  align-self: flex-end;
  background: var(--blue);
  border-radius: 18px 18px 6px 18px;
  color: #fff;
}

.thread__caption {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: -2px 0 8px;
  padding: 2px 4px 0;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--brass);
}
.thread__caption::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--brass);
}

.side-cards {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.side-card {
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  transition: opacity 0.18s ease;
}
.side-card h5 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.lead-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.lead-row .label { color: var(--muted); }
.lead-row .value { text-align: right; font-weight: 600; }

.timeline { margin-top: 18px; }
.timeline li { position: relative; padding: 0 0 16px 22px; }
.timeline li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brass);
}
.timeline li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 18px;
  bottom: 2px;
  width: 1px;
  background: var(--line);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::after { display: none; }
.timeline b { display: block; font-size: 14px; font-weight: 600; }
.timeline .t-time { display: block; font-size: 13px; color: var(--muted); }
.timeline li.pending::before { background: transparent; border: 1.5px solid var(--brass); }
.timeline li.pending b { color: var(--brass); }

/* "Your rules, applied" gets the night treatment: the one dark card,
   previewing the dusk the page ends on. */
.side-card--night {
  background-color: var(--night);
  background-image: radial-gradient(ellipse 420px 260px at 50% 115%,
    #232C4C 0%, var(--night) 70%);
  border: 0;
  color: var(--cream);
}
.side-card--night h5 { color: var(--muted-night); }

.rules-list { display: flex; flex-direction: column; gap: 12px; }
.rules-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
.rules-list svg { flex-shrink: 0; margin-top: 3px; }

.side-card__note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-night);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted-night);
}

.factoid {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.factoid strong {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--brass);
}
.factoid p { font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* ---------- Stat pillars ---------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  padding: 48px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pillar h4 { margin-bottom: 2px; }
.pillar .sub { font-size: 14px; color: var(--muted); }
.pillar .num {
  font-family: var(--font-display);
  font-size: clamp(48px, 5.6vw, 68px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--brass);
  margin: 14px 0 8px;
}
.pillar .prov { font-size: 14px; line-height: 1.55; color: var(--muted); }

/* ---------- The funnel flow: one line, one handoff ---------- */
/* Amber carries the lit side of the funnel; the handoff is the one
   marked moment; your side runs dashed. A diagram, not a paragraph. */

.flow {
  display: flex;
  align-items: center;
  margin-top: 64px;
}
.flow__node {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.flow__node--tallo {
  background: rgba(225, 154, 60, 0.16);
  border: 1px solid rgba(225, 154, 60, 0.55);
  color: var(--cream);
}
.flow__node--team {
  border: 1.5px dashed rgba(244, 238, 223, 0.5);
  color: var(--cream);
}
.flow__link { flex: 1; height: 1.5px; min-width: 12px; background: rgba(225, 154, 60, 0.45); }
.flow__link--lit { background: linear-gradient(to right, rgba(225, 154, 60, 0.45), var(--amber)); }
.flow__link--team {
  background: none;
  border-top: 1.5px dashed rgba(244, 238, 223, 0.35);
}
/* The handoff: the porch light itself. */
.flow__handoff {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  margin: 0 6px;
}
.flow__handoff .lamp {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 32px 10px rgba(225, 154, 60, 0.5), 0 0 80px 30px rgba(225, 154, 60, 0.18);
}
.flow__handoff .lamp-label {
  position: absolute;
  top: 26px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  white-space: nowrap;
  color: var(--amber);
}
.flow__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 48px;
}
.flow__labels span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.flow__labels .l-tallo { color: var(--amber); }
.flow__labels .l-team { color: var(--muted-night); }
.flow__note {
  margin: 32px auto 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-night);
  max-width: 560px;
  text-align: center;
}

/* The funnel draws itself in: Tallo's side lights up node by node,
   the porch light flickers on at the showing, then your side sketches
   in dashed. One story, told once, on scroll. */
.js .flow.is-visible .flow__node,
.js .flow.is-visible .flow__handoff {
  animation: flow-pop 0.5s var(--ease-out) backwards;
}
.js .flow.is-visible .flow__link {
  transform-origin: left center;
  animation: flow-draw 0.35s var(--ease-out) backwards;
}
.js .flow.is-visible > :nth-child(1) { animation-delay: 0.05s; }
.js .flow.is-visible > :nth-child(2) { animation-delay: 0.16s; }
.js .flow.is-visible > :nth-child(3) { animation-delay: 0.27s; }
.js .flow.is-visible > :nth-child(4) { animation-delay: 0.38s; }
.js .flow.is-visible > :nth-child(5) { animation-delay: 0.49s; }
.js .flow.is-visible > :nth-child(6) { animation-delay: 0.60s; }
.js .flow.is-visible > :nth-child(7) { animation-delay: 0.71s; }
.js .flow.is-visible > :nth-child(8) { animation-delay: 0.84s; }
.js .flow.is-visible > :nth-child(9) { animation-delay: 1.0s; }
.js .flow.is-visible > :nth-child(10) { animation-delay: 2.0s; }
.js .flow.is-visible > :nth-child(11) { animation-delay: 2.1s; }
.js .flow.is-visible > :nth-child(12) { animation-delay: 2.2s; }
.js .flow.is-visible > :nth-child(13) { animation-delay: 2.3s; }
/* The lamp switches on: dark, a flicker, then full porch glow. */
.js .flow.is-visible .lamp {
  animation: flow-pop 0.5s var(--ease-out) 1.0s backwards,
             lamp-on 0.9s ease-out 1.15s backwards;
}
.js .flow.is-visible .lamp-label {
  animation: flow-fade 0.5s var(--ease-out) 1.8s backwards;
}
/* Once lit, the lamp breathes. Opacity-only, on a soft halo. */
.flow__handoff .lamp::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 154, 60, 0.22) 0%, rgba(225, 154, 60, 0) 65%);
  pointer-events: none;
}
.js .flow.is-visible .lamp::after {
  animation: glow-breathe 5.5s ease-in-out 2.4s infinite;
}

@keyframes flow-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
}
@keyframes flow-draw {
  from { opacity: 0; transform: scaleX(0); }
}
@keyframes flow-fade {
  from { opacity: 0; }
}
@keyframes lamp-on {
  0%   { background: #4A4636; box-shadow: none; }
  55%  { background: #4A4636; box-shadow: none; }
  63%  { background: var(--amber); box-shadow: 0 0 22px 6px rgba(225, 154, 60, 0.35); }
  71%  { background: #6B5A2E; box-shadow: 0 0 10px 2px rgba(225, 154, 60, 0.15); }
  100% { background: var(--amber); box-shadow: 0 0 32px 10px rgba(225, 154, 60, 0.5), 0 0 80px 30px rgba(225, 154, 60, 0.18); }
}
@keyframes glow-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* After the handoff: what your side gets, and what's next.
   Solid card = live today. Dashed = roadmap, per the system. */
.after-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 64px;
}
.after-card {
  padding: 28px;
  background-color: var(--night-card);
  background-image: radial-gradient(ellipse 420px 260px at 50% 120%, #232C4C 0%, var(--night-card) 72%);
  border-radius: var(--radius-card);
  color: var(--cream);
}
.after-card--soon {
  background: transparent;
  border: 1.5px dashed rgba(225, 154, 60, 0.4);
}
.after-card h4 { color: var(--cream); margin-bottom: 16px; }
.after-card h4 small {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--amber);
  margin-left: 10px;
  vertical-align: middle;
}
.nv-rows { display: flex; flex-direction: column; gap: 10px; }
.nv-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 8px 14px;
  background: rgba(244, 238, 223, 0.06);
  border: 1px solid var(--line-night);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--cream);
  white-space: nowrap;
}
.nv-chip--soon {
  background: transparent;
  border: 1.5px dashed rgba(225, 154, 60, 0.45);
  color: var(--muted-night);
}
.nv-chip .amber-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); flex-shrink: 0; }
.after-card .note {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-night);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted-night);
}


.step-num {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--brass);
  margin-bottom: 12px;
}
.step h4 { margin-bottom: 10px; }
.step p, .step li {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
}
.step ul { display: flex; flex-direction: column; gap: 8px; }
.step li { display: flex; gap: 10px; align-items: flex-start; }
.step li::before {
  content: "";
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--brass);
}


/* ---------- Testimonial ---------- */

.testimonial {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.testimonial .label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 24px;
}
.testimonial blockquote {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.testimonial figcaption {
  margin-top: 24px;
  font-size: 14px;
  color: var(--muted);
}
.testimonial figcaption b { color: var(--ink); font-weight: 600; }

/* ---------- Pricing strip ---------- */
/* The one thing no competitor will put on their homepage. */

.price-strip {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  padding: 48px 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
/* The category attack, set in the display face so it reads as
   conviction, never as a discount banner. */
.price-strip .lead {
  width: 100%;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 450;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 10px;
  text-wrap: balance;
}
.price-strip .amount {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--brass);
}
.price-strip .terms {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.price-strip .fine {
  width: 100%;
  font-size: 13.5px;
  color: var(--muted);
}
.price-strip .fine a {
  font-weight: 600;
  color: var(--brass);
}
.price-strip .fine a:hover { color: var(--ink); }

/* ---------- Integrations ---------- */
/* The logo wall keeps porch-light's dashed treatment: dashed means
   placeholder wordmarks until the real logos are licensed. */

.pms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.pms-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 32px 20px 28px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-card);
  text-align: center;
}
.pms-cell b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.014em; color: #8A7248; }
.pms-cell small { display: block; font-size: 13px; color: var(--muted); }

/* The rest of the stack continues the wall as chips: solid hairline
   for what's live, dashed brass for the slot we scope with you. */
.pms-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.pms-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}
.pms-chip small { font-size: 12px; font-weight: 500; color: var(--faint); }
.pms-chip--custom {
  border: 1.5px dashed var(--line-strong);
  color: var(--brass);
}
a.pms-chip--custom { transition: border-color 0.16s ease; }
a.pms-chip--custom:hover { border-color: var(--brass); }

/* ---------- Waitlist / customization splits ---------- */

.split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.split-row h2 { max-width: 480px; }
.split-copy p {
  margin-top: 16px;
  font-size: 16px;
  color: var(--muted);
  max-width: 520px;
}
.split-copy .eyebrow { margin-bottom: 4px; }

.split-card {
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: 32px;
}

.kicker {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 20px;
}

.split-card .big { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; }
.split-card .big strong {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.split-card .big span { font-size: 14px; color: var(--muted); }

/* Solid amber = qualified now. Dashed brass = right renter, wrong
   timing, kept warm. Same semantics as the porch-light system. */
.split-bar { display: flex; gap: 4px; height: 48px; }
.split-bar > div {
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}
.split-bar .qualified {
  flex-grow: 1000;
  flex-basis: 0;
  background: var(--amber);
  border-radius: 10px 4px 4px 10px;
  color: #3A2A10;
}
.split-bar .warm {
  flex-grow: 1400;
  flex-basis: 0;
  background: rgba(169, 113, 30, 0.08);
  border: 1.5px dashed var(--brass);
  border-radius: 4px 10px 10px 4px;
  color: var(--brass);
}

.split-legend { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.split-legend li {
  position: relative;
  padding-left: 26px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
}
.split-legend li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: var(--amber);
}
.split-legend li.warm-key::before {
  background: rgba(169, 113, 30, 0.08);
  border: 1.5px dashed var(--brass);
}
.split-legend b { color: var(--ink); }

.split-card__note {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

/* ---------- Customization ("engine you tune") ---------- */

.split-row + .tune { margin-top: 112px; }

.tune__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
  margin-bottom: 64px;
}

/* ---------- Product screenshots ---------- */
/* Framing rule: hairline + one soft shadow, nothing else. */

.app-shot { margin: 0; }
.app-shot img {
  width: 100%;
  height: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.app-shot figcaption {
  margin: 22px auto 0;
  max-width: 560px;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
}

/* ---------- FAQ ---------- */

.faq { max-width: 760px; margin: 0 auto; }
.faq .section-head { margin-bottom: 32px; }

.accordion-item { border-bottom: 1px solid var(--line); }

.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  text-align: left;
}
.accordion-header .q { flex: 1; font-size: 17px; font-weight: 600; }

.accordion-header .icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.accordion-header .icon::before,
.accordion-header .icon::after {
  content: "";
  position: absolute;
  background: var(--brass);
  border-radius: 1px;
}
.accordion-header .icon::before { left: 0; right: 0; top: 6px; height: 2px; }
.accordion-header .icon::after { top: 0; bottom: 0; left: 6px; width: 2px; }
.accordion-item.is-open .icon { transform: rotate(45deg); }

.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease;
}
.accordion-content > p {
  overflow: hidden;
  font-size: 15px;
  color: var(--muted);
  max-width: 640px;
}
.accordion-item.is-open .accordion-content { grid-template-rows: 1fr; }
.accordion-item.is-open .accordion-content > p { padding-bottom: 24px; }

/* Catch the fence-sitters the accordion didn't convince. */
.faq-foot {
  margin-top: 28px;
  text-align: center;
  font-size: 14.5px;
  color: var(--muted);
}
.faq-foot a { font-weight: 600; color: var(--brass); }
.faq-foot a:hover { color: var(--ink); }

/* ---------- Final CTA: dusk falls, the porch light comes on ---------- */

.section--cta {
  background-color: var(--night);
  background-image: var(--night-glow-up);
  padding: 128px 0 120px;
  text-align: center;
  color: var(--cream);
}

.cta-frame { max-width: 680px; margin: 0 auto; }

.cta-frame .eyebrow { color: var(--amber); }

.cta-frame h2 {
  font-size: clamp(34px, 4.6vw, 50px);
  color: var(--cream);
}

.cta-frame .cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 36px;
}

.cta-frame .link-arrow { color: var(--muted-night); }
.cta-frame .link-arrow:hover { color: var(--cream); }

.price-line {
  margin-top: 36px;
  font-size: 14px;
  font-weight: 500;
  color: var(--amber);
}
.founder-line {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--muted-night);
}

/* ---------- Footer: the porch at night ---------- */
/* The house has gone quiet. The wordmark stays modest; the design
   moment is the porch rail: the funnel diagram compressed to one
   line. Solid amber where Tallo led, the lamp still on, and the
   dashed side that belongs to you. */

.footer {
  background-color: var(--night);
  background-image: radial-gradient(ellipse 900px 460px at 22% 118%,
    #1D2542 0%, rgba(21, 27, 44, 0) 62%);
  border-top: 1px solid var(--line-night);
  padding: 84px 0 40px;
  color: var(--cream);
  overflow: hidden;
}

.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 48px 72px;
}

.footer__pitch { max-width: 340px; }
.footer__pitch .footer__brand svg { height: 26px; width: auto; }
.footer__line {
  margin-top: 26px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 450;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.footer__meta {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-night);
}
/* Membership badge slot. Expects the official NARPM Black Logo;
   the invert turns black art cream on the dusk ground. Slight, tight. */
.footer__narpm {
  height: 32px;
  width: auto;
  margin-top: 22px;
  opacity: 0.72;
  filter: invert(1) brightness(1.05);
  transition: opacity 0.16s ease;
}
.footer__narpm:hover { opacity: 0.95; }

.footer__cols {
  display: flex;
  gap: 72px;
}

.footer__col h6 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-night);
  margin-bottom: 14px;
}
.footer__col a {
  display: block;
  font-size: 14px;
  color: var(--cream);
  padding: 6px 0;
  opacity: 0.85;
  transition: opacity 0.16s ease, color 0.16s ease;
}
.footer__col a:hover { opacity: 1; color: var(--amber); }

/* The porch rail: lit where Tallo led, lamp still on, dashed where
   the work is yours. Same semantics as the funnel, one line tall. */
.footer__porch {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 76px;
}
.footer__porch .rail-lit {
  flex: 1;
  height: 1.5px;
  background: linear-gradient(to right,
    rgba(225, 154, 60, 0) 0%,
    rgba(225, 154, 60, 0.55) 100%);
}
.footer__porch .rail-rest {
  flex: 1;
  border-top: 1.5px dashed var(--line-night);
}
.footer__lamp {
  position: relative;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 18px 5px rgba(225, 154, 60, 0.45),
              0 0 48px 16px rgba(225, 154, 60, 0.14);
  flex-shrink: 0;
}
.footer__lamp::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90px;
  height: 90px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 154, 60, 0.16) 0%, rgba(225, 154, 60, 0) 65%);
  animation: glow-breathe 6s ease-in-out infinite;
  pointer-events: none;
}

.footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 30px;
  font-size: 13px;
  color: var(--muted-night);
}
.footer__legal nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer__legal a:hover { color: var(--cream); }

@media (max-width: 560px) {
  .footer { padding-top: 64px; }
  .footer__cols { gap: 40px; }
  .footer__porch { margin-top: 56px; }
}

/* ---------- Reveal (fade + 12px rise, staggered children) ---------- */

.js .reveal,
.js .reveal--stagger > * { opacity: 0; }
.js .reveal.is-visible,
.js .reveal--stagger.is-visible > * {
  opacity: 1;
  animation: reveal-rise 0.45s var(--ease-out) backwards;
}
.js .reveal--stagger.is-visible > *:nth-child(2) { animation-delay: 60ms; }
.js .reveal--stagger.is-visible > *:nth-child(3) { animation-delay: 120ms; }
.js .reveal--stagger.is-visible > *:nth-child(4) { animation-delay: 180ms; }
.js .reveal--stagger.is-visible > *:nth-child(5) { animation-delay: 240ms; }
.js .reveal--stagger.is-visible > *:nth-child(6) { animation-delay: 300ms; }
.js .reveal--stagger.is-visible > *:nth-child(7) { animation-delay: 360ms; }
.js .reveal--stagger.is-visible > *:nth-child(n+8) { animation-delay: 420ms; }

@keyframes reveal-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

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

/* ---------- Pricing tiers ---------- */

.tiers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 1000px;
  margin: 0 auto;
}
.tier {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 38px 36px 40px;
  border-radius: var(--radius-card);
}
.tier--individual {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.tier--team {
  position: relative;
  background-color: var(--night);
  background-image: radial-gradient(ellipse 560px 380px at 50% 115%,
    #232C4C 0%, var(--night) 72%);
  color: var(--cream);
}
.tier__badge {
  position: absolute;
  top: -12px;
  left: 36px;
  padding: 5px 14px;
  background: var(--amber);
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #3A2A10;
}
.tier h3 { font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -0.01em; }
.tier .kicker { font-size: 14px; color: var(--muted); margin: 4px 0 0; }
.tier--team .kicker { color: var(--muted-night); }
.tier__price {
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tier--team .tier__price { border-color: var(--line-night); }
.tier__price .amount { display: flex; align-items: baseline; gap: 10px; }
.tier__price strong {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--brass);
}
.tier--team .tier__price strong { color: var(--amber); }
.tier__price .per { font-size: 15px; font-weight: 500; }
.tier__price .note { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-top: 8px; }
.tier--team .tier__price .note { color: var(--muted-night); }
.tier ul { display: flex; flex-direction: column; gap: 11px; flex: 1; }
.tier li { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.tier li svg { flex-shrink: 0; margin-top: 3px; }
.tier .btn { width: 100%; }

/* The fine print, made structural: three quiet columns under the
   tiers instead of a paragraph bolted on after them. */
.price-extras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1000px;
  margin: 56px auto 0;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}
.price-extras h5 {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 8px;
}
.price-extras p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}
/* The one metered add-on, kept to a footnote off the Team tier. */
.price-foot {
  max-width: 1000px;
  margin: 26px auto 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
@media (max-width: 960px) {
  .price-extras { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- About story ---------- */

.story { max-width: 680px; margin: 0 auto; }
.story p { font-size: 17px; line-height: 1.75; color: var(--muted); }
.story p + p { margin-top: 22px; }
.story p:first-child { color: var(--ink); font-weight: 500; }

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

@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav__actions .nav__link { display: none; }
  .menu-button { display: block; }
  .nav__actions { gap: 10px; }

  .hero { padding-top: 80px; }
  .section { padding: 80px 0; }
  .section--cta { padding: 96px 0 88px; }

  .demo-grid { grid-template-columns: 1fr; }
  .overview-grid { grid-template-columns: 1fr 1fr; }
  .onboard-grid { grid-template-columns: 1fr; }
  .flow { flex-wrap: wrap; gap: 10px; justify-content: center; }
  .flow__link { display: none; }
  .flow__labels { display: none; }
  .after-grid { grid-template-columns: 1fr; }
  .phone { max-width: 560px; margin: 0 auto; width: 100%; }
  .pillars { grid-template-columns: 1fr; gap: 36px; padding: 40px 0; }
  .steps { grid-template-columns: 1fr; gap: 36px; }
  .split-row { grid-template-columns: 1fr; gap: 40px; }
  .split-row + .tune { margin-top: 80px; }
  .tune__grid { grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; }
  .pms-grid { grid-template-columns: 1fr 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }

  .hero__cta, .cta-frame .cta-row { flex-direction: column; gap: 16px; }

  .pms-grid { grid-template-columns: 1fr; }
  .overview-grid { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; gap: 32px; }

  .phone, .side-card, .split-card { padding: 20px; }
  .ov-chip, .ov-bubble { font-size: 11px; }
  .ov-chip { padding: 6px 10px; }
  .price-strip .amount { font-size: 36px; }
  .bubble { max-width: 88%; }
  .factoid { padding: 18px 20px; }

  .split-bar { height: auto; }
  .split-bar > div {
    white-space: normal;
    min-height: 48px;
    padding: 8px 12px;
    line-height: 1.35;
  }
}

/* ---------- Pointed rows (toolkit / we-speak-your-stack) ---------- */

.toolkit-rows { border-top: 1px solid var(--line); }
.toolkit-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 8px 40px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.toolkit-row h4 { font-size: 19px; }
.toolkit-row p { font-size: 14px; color: var(--muted); max-width: 640px; }
@media (max-width: 560px) {
  .toolkit-row { grid-template-columns: 1fr; }
}

/* PMS wall cells double as links to the per-PMS landing pages. */
a.pms-cell { transition: border-color 0.16s ease; }
a.pms-cell:hover { border-color: var(--brass); border-style: solid; }

/* ---------- Compare pages (tallo-vs-*) ---------- */
/* Same hairline vocabulary as toolkit-rows: a labeled grid, no card
   chrome. The Tallo cell reads in ink, the other product in muted. */

.compare-table { border-top: 1px solid var(--line-strong); }
.compare-row {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 8px 36px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.compare-row--head {
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--line-strong);
}
.compare-row--head span {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass);
}
.compare-row h4 { font-size: 16px; align-self: start; }
.compare-row p { font-size: 14px; line-height: 1.6; color: var(--muted); }
.compare-row p.cell--tallo { color: var(--ink); }
.compare-row .cell-tag { display: none; }
@media (max-width: 760px) {
  .compare-row { grid-template-columns: 1fr; gap: 10px 0; }
  .compare-row--head { display: none; }
  .compare-row .cell-tag {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brass);
    margin-bottom: 2px;
  }
}
.compare-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--faint);
}
.compare-note a { color: var(--brass); font-weight: 600; }
.compare-note a:hover { color: var(--ink); }

/* --- Renter waitlist form (renters.html) --- */
/* One white product surface, like the phone frame: the form IS the product
   here, so it gets the card treatment. Fields stay quiet bone-on-white. */
.waitlist-form {
  margin-top: 40px;
  padding: 36px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.hp-field { position: absolute; left: -9999px; opacity: 0; }
.wf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
}
.wf-field { display: flex; flex-direction: column; gap: 7px; }
.wf-field > span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.wf-field > span small { font-weight: 400; color: var(--faint); }
.wf-field input,
.wf-field select {
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  padding: 11px 14px;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.wf-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E6A5E' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 34px;
}
.wf-field input::placeholder { color: var(--faint); }
.wf-field input:focus,
.wf-field select:focus {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(169, 111, 30, 0.12);
}
.wf-actions {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.wf-fine {
  flex: 1;
  min-width: 220px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.wf-success, .wf-error {
  margin-top: 24px;
  padding: 16px 18px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.6;
}
.wf-success {
  background: var(--bone);
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.wf-error {
  background: var(--bone);
  border: 1px dashed var(--line-strong);
  color: var(--muted);
}
.wf-error a { color: var(--brass); font-weight: 600; }
.waitlist-form.is-done .wf-grid,
.waitlist-form.is-done .wf-actions { display: none; }
@media (max-width: 640px) {
  .waitlist-form { padding: 24px 20px; }
  .wf-grid { grid-template-columns: 1fr; }
}

/* Three waitlist steps side by side on desktop; the base .after-grid
   media query at 960px still collapses this to one column. */
@media (min-width: 961px) {
  .after-grid--steps { grid-template-columns: repeat(3, 1fr); }
}

/* Four perk cards read as 2x2, not 3+1. The base responsive rules
   (2-up, then 1-up) already match at smaller widths. */
@media (min-width: 961px) {
  .overview-grid--four { grid-template-columns: repeat(2, 1fr); }
}