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

:root {
  /* Secona design tokens — mirrors the product's palette.
     Dark ground: the page sits on ink, cards stay paper islands. */
  --ink: #161026;
  --ink-soft: #332B4A;
  --ink-mute: #4A4266;
  --cream-50: #FDFCFF;
  --cream-100: #F6F4FB;
  --cream-200: #EFEBF7;
  --cream-300: #E7E3F2;
  --paper: #F6F4FB;
  --paper-soft: rgba(246, 244, 251, 0.75);
  --paper-mute: rgba(246, 244, 251, 0.55);
  --paper-line: rgba(246, 244, 251, 0.12);
  --bg: #120D20;
  --card-bg: #FFFFFF;
  --border: rgba(22, 16, 38, 0.09);
  --border-strong: rgba(22, 16, 38, 0.15);
  --ona-green: #5FB800;
  --ona-green-br: #7BCF2E;
  --ona-green-dark: #3D8A1B;
  --ona-green-light: #E4F5D1;
  --iris: #7350D0;
  --iris-tint: rgba(115, 80, 208, 0.1);
  --font-display: 'Fraunces', Georgia, serif;
  --font-sans: 'Inter', -apple-system, system-ui, sans-serif;
  --radius: 14px;
  --radius-sm: 10px;
  --band: 1072px;
}

html {
  scroll-behavior: smooth;
}

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

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 700;
}

em {
  font-style: italic;
}

/* ---------- Header ---------- */

.header {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.4rem 1.5rem 1rem;
}

/* Header CTAs — "Log in" (existing users) beside "Get early access" (new
   ones). margin-left:auto lives on the wrapper rather than the buttons so the
   pair travels together instead of splitting across the header. */
.header-cta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--paper);
}

.logo-mark {
  display: inline-flex;
  width: 18px;
  height: 30px;
}

.logo-mark svg {
  width: 100%;
  height: 100%;
}

.logo-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}

.logo-o {
  color: var(--ona-green);
}

.logo-tld {
  color: var(--paper-mute);
  font-weight: 600;
}

.nav {
  display: flex;
  gap: 1.5rem;
  margin-left: auto;
}

.nav a {
  color: var(--paper-soft);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
}

.nav a:hover {
  color: var(--paper);
}

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

.btn {
  display: inline-block;
  border-radius: 999px;
  /* Every variant carries a border so solid and outlined buttons are the
     same height when they sit side by side. */
  border: 1px solid transparent;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  /* A wrapped label turns the pill into a blob on narrow screens. */
  white-space: nowrap;
  padding: 0.75rem 1.5rem;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.btn-primary {
  background: var(--ona-green);
  border-color: var(--ona-green);
  color: #fff;
}

.btn-primary:hover {
  transform: translateY(-1px);
  background: var(--ona-green-br);
  border-color: var(--ona-green-br);
  box-shadow: 0 6px 18px rgba(95, 184, 0, 0.3);
}

.btn-ghost {
  color: var(--paper);
  border: 1px solid rgba(246, 244, 251, 0.28);
  background: transparent;
}

.btn-ghost:hover {
  border-color: var(--paper-soft);
}

/* Secondary button for use inside a paper card, where btn-ghost's
   paper-on-transparent would vanish. */
.btn-outline {
  color: var(--ink);
  border: 1px solid var(--border-strong);
  background: var(--card-bg);
}

.btn-outline:hover {
  border-color: var(--ink-mute);
}

.btn-sm {
  padding: 0.55rem 1.1rem;
  font-size: 0.88rem;
}

.btn-lg {
  padding: 0.95rem 2rem;
  font-size: 1.05rem;
}

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

.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0.7rem 1.5rem 1rem;
}

.badge {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(95, 184, 0, 0.14);
  color: var(--ona-green-br);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}

.hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin-bottom: 1.1rem;
}

.hero h1 em {
  color: var(--ona-green);
}

.subtitle {
  color: var(--paper-soft);
  font-size: 1.1rem;
  max-width: 34rem;
  margin-bottom: 1.8rem;
}

.subtitle strong {
  color: var(--paper);
}

.hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.hero-note {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--paper-mute);
}

/* ---------- Chat demo card ---------- */

.chat-card {
  background: var(--card-bg);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  padding: 1.2rem 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 460px;
  margin-left: auto;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

.chat-mark {
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: var(--ink);
}

.chat-mark svg {
  width: 100%;
  height: 100%;
}

.msg {
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.msg-user {
  align-self: flex-end;
  background: var(--ink);
  color: var(--cream-50);
  max-width: 85%;
}

.msg-ona {
  align-self: flex-start;
  background: var(--cream-100);
  border: 1px solid var(--border);
  width: 100%;
}

.msg-lead {
  margin-bottom: 0.55rem;
  color: var(--ink-soft);
}

.understood {
  align-self: flex-start;
  font-size: 0.78rem;
  color: var(--ink-mute);
  background: var(--cream-200);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}

.listing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
}

.listing + .listing {
  margin-top: 0.5rem;
}

/* Photo thumbnail: the tile's image slot, with the shot count on it. */
.listing-thumb {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: linear-gradient(140deg, var(--cream-200), var(--cream-300));
  border: 1px solid var(--border);
  color: var(--ink-mute);
}

/* The illustration fills the frame. Its own radius rather than the frame's
   overflow, because the shot-count badge hangs outside and would be clipped. */
.listing-thumb .thumb-art {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.listing-thumb-count {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--ink);
  border: 2px solid var(--card-bg);
  color: var(--cream-50);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
}

.listing-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.listing-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.listing-spec {
  color: var(--ink-mute);
  font-size: 0.8rem;
}

.listing-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.chip {
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--card-bg);
  color: var(--ink-soft);
}

.chip-action {
  background: var(--ona-green-light);
  border-color: transparent;
  color: var(--ona-green-dark);
  font-weight: 600;
}

.receipt {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  background: var(--ona-green-light);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.9rem;
  font-size: 0.85rem;
  color: var(--ona-green-dark);
}

.receipt-check {
  font-weight: 700;
  line-height: 1.5;
}

/* ---------- Conversation walkthrough ---------- */

.convo-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--card-bg);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  padding: 1.2rem 1.2rem 1.4rem;
}

.convo-card .chat-head {
  margin-bottom: 0.9rem;
}

.replay {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-mute);
  background: var(--cream-100);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem 0.8rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.replay:hover {
  color: var(--ink);
  border-color: var(--border-strong);
}

/* Fixed height so the card never resizes as messages land — the thread
   scrolls inside it the way a real chat does. */
.convo {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  height: 440px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--cream-300) transparent;
}

.convo::-webkit-scrollbar {
  width: 6px;
}

.convo::-webkit-scrollbar-thumb {
  background: var(--cream-300);
  border-radius: 3px;
}

/* Hero variant: height tracks the viewport so the whole card stays above
   the fold on the first screen, and the thread scrolls inside it. */
.convo-free {
  height: clamp(280px, calc(100vh - 240px), 520px);
}

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

.turn[data-from="user"] {
  align-items: flex-end;
}

.turn > * {
  max-width: 100%;
}

/* Sequenced playback: only added once the script takes over, so the
   whole conversation stays readable if the script never runs. */
.convo.is-seq .turn {
  display: none;
}

.convo.is-seq .turn.is-in {
  display: flex;
  animation: rise 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.typing {
  display: flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  width: max-content;
  padding: 0.6rem 0.85rem;
  border-radius: 999px;
  background: var(--cream-100);
  border: 1px solid var(--border);
}

.typing[hidden] {
  display: none;
}

/* Ona's mark turns while it thinks, as in the product's loader. */
.typing-mark {
  display: inline-flex;
  width: 16px;
  height: 16px;
  margin-right: 3px;
  color: var(--ink);
  animation: turn 1.6s linear infinite;
}

.typing-mark svg {
  width: 100%;
  height: 100%;
}

@keyframes turn {
  to { transform: rotate(360deg); }
}

.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-mute);
  animation: blink 1.2s ease-in-out infinite;
}

.typing span:nth-child(2) { animation-delay: 0.18s; }
.typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes blink {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 0.85; transform: translateY(-2px); }
}

/* Lead context */

.lead-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem;
}

.lead-head {
  display: flex;
  flex-direction: column;
  padding-bottom: 0.6rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

.lead-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}

.lead-meta {
  color: var(--ink-mute);
  font-size: 0.8rem;
}

.needs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.needs li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.need-tag {
  flex: none;
  margin-top: 0.12rem;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--cream-200);
  color: var(--ink-mute);
}

.need-hard {
  background: var(--iris-tint);
  color: var(--iris);
}

/* Listings with fit reasons */

.listing-rich {
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  margin-bottom: 0.5rem;
}

.listing-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.fit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.fit {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--ona-green-light);
  color: var(--ona-green-dark);
}

/* Approval card */

.approve-title {
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 0.7rem;
}

.approve-block {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.55rem;
}

.approve-label {
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0.4rem;
}

.wa-draft {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
  border-left: 2px solid var(--ona-green);
  padding-left: 0.7rem;
}

.visit {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.visit li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.86rem;
  color: var(--ink-soft);
}

.visit-time {
  min-width: 4.6rem;
  font-weight: 700;
  color: var(--ink);
}

.visit-note {
  margin-top: 0.45rem;
  font-size: 0.78rem;
  color: var(--ink-mute);
}

.chip-approve {
  background: var(--ona-green);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}

.stamp {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--ona-green-light);
  color: var(--ona-green-dark);
}

@media (prefers-reduced-motion: reduce) {
  .convo.is-seq .turn.is-in { animation: none; }
  .typing span { animation: none; }
  .typing-mark { animation: none; }
}

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

.section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 2rem 1.5rem 2.2rem;
}

.section-alt {
  max-width: none;
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
}

.section-alt > * {
  max-width: var(--band);
  margin-left: auto;
  margin-right: auto;
}

/* A full-bleed section centres each child inside the content band, which
   pushes anything narrower than the band off the left edge its siblings
   share. Pin those to that edge instead. */
.section-alt > .section-sub {
  margin-left: max(0px, calc((100% - var(--band)) / 2));
  margin-right: auto;
}

.kicker {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ona-green-br);
  margin-bottom: 0.6rem;
}

.section h2,
.cta h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 0.7rem;
}

.section-sub {
  color: var(--paper-soft);
  max-width: 40rem;
  margin-bottom: 1.3rem;
}

/* A heading that goes straight to its visual still needs air before it. */
.section h2:has(+ .steps, + .story, + .tiles, + .trust-row) {
  margin-bottom: 1.3rem;
}

/* One ranked listing: the pick, the score, and the two honest lines. */
.match {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.8rem;
}

.match + .match {
  margin-top: 0.5rem;
}

/* Anything clearing 90 is the one the rep will actually send, so it gets a
   green edge instead of sitting in an undifferentiated stack. */
.match-top-pick {
  border-color: var(--ona-green);
  box-shadow: 0 0 0 1px var(--ona-green);
}

/* Compound so it does not depend on sitting after .spec in the file. */
.spec.spec-best {
  color: #fff;
  background: var(--ona-green);
  border-color: var(--ona-green);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.66rem;
}

.match-top {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.match-pick {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  border-radius: 5px;
  background: var(--ona-green);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.match-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.match-name {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
}

.match-where {
  font-size: 0.78rem;
  color: var(--ink-mute);
}

.match-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  flex: none;
}

/* 0 to 100, the same number the ranking sorts on. */
.match-score {
  display: grid;
  place-items: center;
  min-width: 30px;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.5;
}

.score-hi {
  background: var(--ona-green);
  color: #fff;
}

.score-mid {
  background: var(--ona-green-light);
  color: var(--ona-green-dark);
}

.score-low {
  background: var(--cream-200);
  color: var(--ink-mute);
}

.match-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.55rem 0 0.5rem;
}

.spec {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink-mute);
  background: var(--cream-100);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.12rem 0.45rem;
}

.match-line {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.match-line + .match-line {
  margin-top: 0.2rem;
}

.match-tag {
  display: inline-block;
  min-width: 3.1rem;
  margin-right: 0.35rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.match-hit .match-tag {
  color: var(--ona-green-dark);
}

.match-miss .match-tag {
  color: #D64545;
}

.match-miss {
  color: var(--ink-mute);
}

/* ---------- How it works: three-step strip ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  background: var(--card-bg);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
}

.step h3 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.step p {
  color: var(--ink-mute);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* One icon box for steps, tiles and trust: stroke icons on a tinted square. */
.step-icon,
.tile-icon,
.trust-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--iris-tint);
  color: var(--iris);
}

.step-icon svg,
.tile-icon svg,
.trust-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.step-icon {
  background: var(--ink);
  color: var(--ona-green);
}

/* ---------- See it work: five stories, one on stage ---------- */

.story {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 2rem;
  align-items: start;
}

.story-tabs {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.story-tab {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  text-align: left;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--paper-soft);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.story-tab:hover {
  background: rgba(255, 255, 255, 0.03);
}

.story-tab.is-on {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--paper-line);
}

.story-num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 0.1rem;
  border-radius: 50%;
  background: rgba(246, 244, 251, 0.08);
  color: var(--paper-soft);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  transition: background 0.2s, color 0.2s;
}

.story-tab.is-on .story-num {
  background: var(--ona-green);
  color: #fff;
}

/* Once the story on stage has played out, the next one breathes: a soft
   ring around its number, slow enough to be noticed and not to nag. */
.story-tab.is-next .story-num {
  color: var(--paper);
  animation: breathe 1.8s ease-in-out infinite;
}

.story-tab.is-next {
  border-color: rgba(95, 184, 0, 0.35);
}

@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(95, 184, 0, 0); }
  50% { box-shadow: 0 0 0 6px rgba(95, 184, 0, 0.35); }
}

@media (prefers-reduced-motion: reduce) {
  .story-tab.is-next .story-num {
    animation: none;
    box-shadow: 0 0 0 3px rgba(95, 184, 0, 0.35);
  }
}

.story-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--paper);
  margin-bottom: 0.2rem;
}

.story-text span {
  display: block;
  font-size: 0.86rem;
  line-height: 1.5;
}

/* .convo-card centres itself with auto side margins, which sizes it to its
   content once it is a grid item; every message starts hidden, so it would
   open as narrow as its header. */
.story-stage .convo-card {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Every story's thread is the same height, so switching never moves the page. */
.story-stage .convo {
  height: 460px;
}

.story-panel[hidden] {
  display: none;
}

.story-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.7rem;
}

.story-count {
  font-size: 0.82rem;
  color: var(--paper-mute);
  min-width: 3.5rem;
  text-align: center;
}

/* ---------- Features: an icon and a name, twelve across two rows ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.7rem;
}

/* A name is all a tile says; the one-line detail lives in its title
   attribute, and the tile itself leads to the stories above. */
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 0.6rem 0.95rem;
  background: var(--card-bg);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  text-align: center;
  transition: border-color 0.2s, transform 0.2s;
}

.tile:hover {
  border-color: var(--iris);
  transform: translateY(-2px);
}

.tile-name {
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Reveal in a wave across the wall rather than all at once. */
.js-reveal .tiles .reveal:nth-child(6n+2) { transition-delay: 0.05s; }
.js-reveal .tiles .reveal:nth-child(6n+3) { transition-delay: 0.1s; }
.js-reveal .tiles .reveal:nth-child(6n+4) { transition-delay: 0.15s; }
.js-reveal .tiles .reveal:nth-child(6n+5) { transition-delay: 0.2s; }
.js-reveal .tiles .reveal:nth-child(6n+6) { transition-delay: 0.25s; }

/* ---------- Trust: compact row ---------- */

.trust-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
}

.trust-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
}

.trust-icon {
  background: rgba(95, 184, 0, 0.14);
  color: var(--ona-green-br);
}

.trust-item h3 {
  font-size: 1rem;
  margin-bottom: 0.3rem;
}

.trust-item p {
  color: var(--paper-soft);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* ---------- Product screenshots: slider ---------- */

.slider {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
}

/* Native scroll-snap does the sliding, so a finger works without the
   script and the buttons only move the scroll position. */
.slider-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  outline: none;
}

.slider-track::-webkit-scrollbar {
  display: none;
}

.slider-track:focus-visible {
  box-shadow: 0 0 0 3px rgba(95, 184, 0, 0.45);
  border-radius: var(--radius);
}

.slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  margin: 0;
}

/* Each screen keeps its own shape. A shared frame letterboxed the wider
   inventory shot on the app's cream, which read as a slab of white space
   under it. The track is as tall as the tallest slide, so the shorter one
   simply has ink below its caption. The light screens need their own edge
   to sit on that ground. */
.slide img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--paper-line);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
}

.slide figcaption {
  text-align: center;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--paper-soft);
}

.slide figcaption strong {
  color: var(--paper);
}

.slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 0.7rem;
}

.slider-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(246, 244, 251, 0.28);
  background: transparent;
  color: var(--paper);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 0 3px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.slider-btn:hover {
  border-color: var(--paper-soft);
  background: rgba(246, 244, 251, 0.06);
}

.slider-dots {
  display: flex;
  gap: 0.5rem;
}

.slider-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(246, 244, 251, 0.25);
  cursor: pointer;
  transition: width 0.25s, background 0.25s;
}

.slider-dot.is-on {
  width: 22px;
  background: var(--ona-green);
}

/* ---------- Spotlights: portals, paperwork, brochure ---------- */

/* Natural-height visuals driven by the same sequencer as the chats. */
.convo-auto {
  height: auto;
  overflow: visible;
  padding-right: 0;
}

/* Rows, not bubbles: every turn spans the card. */
.convo-rows .turn,
.convo-rows .turn[data-from="user"] {
  align-items: stretch;
}

/* Portal enquiry rows */

.enq {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
}

.enq-hot {
  background: #FBF3EA;
  border-color: #E8CDB0;
}

.portal-pill {
  align-self: flex-start;
  margin-bottom: 0.3rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}

.portal-site {
  background: #E3F0FA;
  color: #1F5F99;
}

.portal-web {
  background: var(--ona-green-light);
  color: var(--ona-green-dark);
}

.enq-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.enq-name {
  font-size: 0.88rem;
  font-weight: 600;
}

.enq-prop {
  font-size: 0.78rem;
  color: var(--ink-mute);
}

.enq-wait {
  font-size: 0.74rem;
  font-weight: 600;
  color: #A35A1C;
  text-align: right;
  white-space: nowrap;
}

.enq-wait small {
  display: block;
  font-weight: 500;
  color: var(--ink-mute);
}

/* Paperwork checklist rows */

.paper-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--ink-mute);
}

.paper-head strong {
  color: var(--ink);
}

.check {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.45rem 0.2rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.check + .check {
  border-top: 1px solid var(--border);
}

.check-box {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--border-strong);
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
}

.check-done .check-box {
  background: var(--ona-green);
  border-color: var(--ona-green);
}

.check-done .check-label {
  color: var(--ink);
}

.check-meta {
  font-size: 0.74rem;
  color: var(--ink-mute);
  white-space: nowrap;
}

.check-chase .check-meta {
  color: #A35A1C;
  font-weight: 600;
}

.check-opt .check-label::after {
  content: " optional";
  font-size: 0.72rem;
  color: var(--ink-mute);
  font-weight: 500;
}

/* Brochure message */

.wa-bubble {
  align-self: flex-start;
  width: 100%;
  background: #E7F8E1;
  border: 1px solid #C9EBBB;
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.link-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0.7rem;
  align-items: center;
  margin-top: 0.6rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
}

.link-card .listing-thumb {
  width: 56px;
  height: 56px;
}

.link-title {
  display: block;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.86rem;
}

.link-sub {
  display: block;
  font-size: 0.76rem;
  color: var(--ink-mute);
}

.link-url {
  display: block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  color: var(--iris);
  margin-top: 0.15rem;
  word-break: break-all;
}

.wa-footer {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px dashed #C9EBBB;
  font-size: 0.72rem;
  color: var(--ink-mute);
}

/* The property page opening on the buyer's phone. Sized like a thumbnail
   of a real screen: everything inside is scaled to a 214px device. */

.turn-phone,
.convo-rows .turn-phone {
  align-items: center;
}

.stamp-tap {
  background: var(--cream-200);
  color: var(--ink-mute);
}

.phone {
  width: 214px;
  padding: 8px;
  border-radius: 26px;
  background: #15101F;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.phone-bar {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 6px 6px;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  background: #2A2338;
  color: var(--paper-soft);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.58rem;
  white-space: nowrap;
  overflow: hidden;
}

.phone-bar svg {
  flex: none;
  width: 9px;
  height: 9px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}

.phone-bar span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.phone-screen {
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
}

.phone-hero {
  display: block;
  width: 100%;
  height: 112px;
  object-fit: cover;
}

.phone-body {
  padding: 0.55rem 0.6rem 0.6rem;
}

.phone-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 1.25;
}

.phone-sub {
  font-size: 0.6rem;
  color: var(--ink-mute);
  margin-bottom: 0.3rem;
}

.phone-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}

.phone-price small {
  font-family: var(--font-sans);
  font-size: 0.56rem;
  font-weight: 500;
  color: var(--ink-mute);
  margin-left: 0.15rem;
}

.phone-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem;
  margin-bottom: 0.45rem;
}

.phone-specs span {
  font-size: 0.56rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: var(--cream-100);
  border: 1px solid var(--border);
  color: var(--ink-soft);
}

.phone-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
  margin-bottom: 0.45rem;
}

.phone-gallery img,
.phone-more {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 5px;
}

.phone-more {
  display: grid;
  place-items: center;
  background: var(--cream-200);
  color: var(--ink-mute);
  font-size: 0.6rem;
  font-weight: 700;
}

.phone-row {
  display: flex;
  justify-content: space-between;
  padding: 0.32rem 0;
  border-top: 1px solid var(--border);
  font-size: 0.62rem;
  color: var(--ink-soft);
}

.phone-row span:last-child {
  color: var(--ink-mute);
}

.phone-cta {
  display: block;
  margin-top: 0.5rem;
  padding: 0.42rem;
  border-radius: 999px;
  background: var(--ona-green);
  color: #fff;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 700;
}

.phone-footer {
  margin-top: 0.45rem;
  font-size: 0.5rem;
  line-height: 1.4;
  color: var(--ink-mute);
  text-align: center;
}

/* The phone arrives with more travel than a chat bubble. */
.convo.is-seq .turn-phone.is-in {
  animation: phone-in 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes phone-in {
  from { opacity: 0; transform: translateY(28px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .convo.is-seq .turn-phone.is-in { animation: none; }
}

/* ---------- Scroll reveal ---------- */

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.js-reveal .reveal.is-shown {
  opacity: 1;
  transform: none;
}

.js-reveal .reveal:nth-child(2) { transition-delay: 0.08s; }
.js-reveal .reveal:nth-child(3) { transition-delay: 0.16s; }

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

/* The one section that centres rather than sharing the left edge: the
   plans read as a pair, so everything above them lines up on the middle. */
.section-pricing .kicker,
.section-pricing h2,
.section-pricing .section-sub,
.section-pricing .plan-save {
  text-align: center;
}

.section-pricing .section-sub,
.section-pricing .plans,
.section-pricing .plan-save {
  margin-left: auto;
  margin-right: auto;
}

/* No align-items: start here — the tracks must stretch so both plans end
   on the same line and their buttons sit at one height. */
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  max-width: 720px;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: var(--card-bg);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1.15rem 1.1rem;
}

/* The heavier edge comes from a shadow ring, not a thicker border, so both
   plans keep the same content box and their buttons land on one line. */
.plan-featured {
  border-color: var(--ona-green);
  box-shadow: 0 0 0 1px var(--ona-green), 0 18px 46px rgba(95, 184, 0, 0.16);
}

.plan-tag {
  position: absolute;
  top: -0.68rem;
  left: 1.25rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--ona-green);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.plan h3 {
  font-size: 1rem;
}

.plan-price {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.plan-per {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: 0;
  margin-left: 0.25rem;
}

.plan-term {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-mute);
  min-height: 3em;
}

.plan-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin: 0.15rem 0 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
}

.plan-list li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.plan-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -0.05em;
  font-weight: 700;
  color: var(--ona-green-dark);
}

.plan .btn {
  margin-top: auto;
  text-align: center;
  padding: 0.65rem 1.1rem;
  font-size: 0.88rem;
}

.plan-save {
  max-width: 620px;
  margin-top: 1rem;
  font-size: 0.88rem;
  color: var(--paper-soft);
}

.plan-save strong {
  color: var(--ona-green-br);
}

/* ---------- CTA ---------- */

.cta {
  background: linear-gradient(135deg, rgba(115, 80, 208, 0.22), rgba(95, 184, 0, 0.1));
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
  color: var(--paper);
  text-align: center;
  padding: 2.2rem 1.5rem;
}

.cta p {
  color: var(--paper-soft);
  max-width: 34rem;
  margin: 0 auto 1.3rem;
}

/* ---------- Early-access dialog ---------- */

.access-dialog {
  border: none;
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(22, 16, 38, 0.28);
  padding: 0;
  width: min(480px, calc(100vw - 2rem));
  margin: auto;
}

.access-dialog::backdrop {
  background: rgba(6, 3, 14, 0.65);
}

.access-form {
  padding: 1.5rem 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.access-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.access-head h3 {
  font-size: 1.35rem;
}

.access-close {
  border: none;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}

.access-close:hover {
  color: var(--ink);
}

.access-sub {
  color: var(--ink-mute);
  font-size: 0.9rem;
  margin-top: -0.5rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border: none;
}

.field-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* Not [type=checkbox]: the sell-type boxes live in a .field too, and the
   width below stretched each one to the dialog's width. */
.field input:not([type="checkbox"]),
.field select {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--cream-50);
  border: 1px solid #D8D2ED;
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}

.field input::placeholder {
  color: var(--ink-ghost, #9b93b5);
}

.field input:not([type="checkbox"]):focus,
.field select:focus {
  border-color: var(--iris);
  box-shadow: 0 0 0 3px var(--iris-tint);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

.pick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.pick {
  cursor: pointer;
}

.pick input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.pick span {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--card-bg);
  color: var(--ink-soft);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.pick input:checked + span {
  background: var(--ona-green-light);
  border-color: var(--ona-green);
  color: var(--ona-green-dark);
  font-weight: 600;
}

.pick input:focus-visible + span {
  box-shadow: 0 0 0 3px var(--iris-tint);
}

.access-error {
  font-size: 0.83rem;
  color: #D64545;
}

.access-submit {
  cursor: pointer;
  font-family: var(--font-sans);
  margin-top: 0.2rem;
}

.access-note {
  font-size: 0.78rem;
  color: var(--ink-mute);
  text-align: center;
}

/* Post-submit panel */

.access-ready {
  padding: 1.5rem 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.access-ready[hidden] {
  display: none;
}

.ready-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.ready-actions .btn {
  text-align: center;
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
}

.ready-alt {
  margin-top: -0.35rem;
  text-align: center;
  font-size: 0.83rem;
}

.ready-alt a {
  color: var(--iris);
  font-weight: 500;
}

.ready-text {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-soft);
  background: var(--cream-100);
  border: 1px solid #D8D2ED;
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.8rem;
  resize: vertical;
  width: 100%;
}

.ready-copy {
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: center;
}

@media (max-width: 480px) {
  .ready-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .field-row {
    grid-template-columns: 1fr;
  }
}

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

.footer {
  padding: 1.8rem 1.5rem;
  text-align: center;
  color: var(--paper-mute);
  font-size: 0.85rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  color: var(--paper);
}

.footer-contact {
  margin-top: 0.3rem;
}

.footer-sep {
  margin: 0 0.5rem;
  color: var(--paper-mute);
}

.footer a {
  color: var(--ona-green-br);
  text-decoration: none;
  font-weight: 500;
}

.footer a:hover {
  text-decoration: underline;
}

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

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 0.75rem;
  }

  .chat-card {
    margin: 0 auto;
  }

  .steps,
  .trust-row,
  .plans,
  .story {
    grid-template-columns: 1fr;
  }

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

  /* Stacked, the stories become a row of chips above the card: the title
     alone, the line lives in the card it opens. */
  .story-tabs {
    flex-direction: row;
    gap: 0.45rem;
    overflow-x: auto;
    padding-bottom: 0.3rem;
    scrollbar-width: none;
    /* The row runs off the right edge on purpose; fade it so that reads
       as "more this way" rather than a chip cut in half. */
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }

  .story-tabs::-webkit-scrollbar {
    display: none;
  }

  .story-tab {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.8rem 0.45rem 0.45rem;
    border-radius: 999px;
    border-color: var(--paper-line);
  }

  .story-num {
    margin-top: 0;
    width: 22px;
    height: 22px;
    font-size: 0.72rem;
  }

  .story-text strong {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.85rem;
    margin: 0;
    white-space: nowrap;
  }

  .story-text span {
    display: none;
  }

  .story-stage .convo {
    height: 440px;
  }

  .nav {
    display: none;
  }

  /* The wrapper owns the push now; leaving it on .btn would shove the two
     CTAs apart once there is more than one of them. */
  .header-cta {
    margin-left: auto;
    gap: 0.45rem;
  }
}

@media (max-width: 480px) {
  .convo-card {
    padding: 1rem 0.8rem 1.1rem;
  }

  /* Narrow cards: keep the thumbnail beside the name and drop the price
     to its own line, so the address isn't squeezed into a few characters. */
  .listing,
  .listing-top {
    flex-wrap: wrap;
  }

  .listing-price {
    flex: 0 0 100%;
    text-align: right;
  }

  .listing-thumb {
    width: 44px;
    height: 44px;
  }

  /* On a narrow card the score is the signal worth the width, not the photo:
     with the thumbnail in, the property name breaks over three lines. */
  .match .listing-thumb {
    display: none;
  }

  .visit-time {
    min-width: 4rem;
  }

  /* The audience is a long phrase and it belongs in the badge, so it gets a
     notch smaller here rather than breaking a pill across three lines. */
  .badge {
    font-size: 0.7rem;
  }

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

/* ---------- Blog ---------- */

/* Posts borrow the legal page's column and typography; what follows is only
   what an article needs on top of it. */
.post h3 {
  font-size: 1rem;
  color: var(--paper);
  margin: 1.4rem 0 0.5rem;
}

/* A table wide enough to need it scrolls on its own rather than widening
   the page, which on a phone would take the whole article sideways. */
.post-table {
  overflow-x: auto;
  margin: 0 0 1.2rem;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
}

.post-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.post-table th,
.post-table td {
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--paper-line);
  vertical-align: top;
}

.post-table th {
  color: var(--paper);
  font-weight: 600;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.03);
}

.post-table tr:last-child td {
  border-bottom: 0;
}

/* The caveat a property article has to carry. */
.post-note {
  display: block;
  margin: 1.4rem 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid rgba(95, 184, 0, 0.28);
  background: rgba(95, 184, 0, 0.08);
  font-size: 0.9rem;
  line-height: 1.65;
}

.post-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 1.6rem;
}

.post-card {
  display: block;
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--paper-line);
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}

.post-card:hover {
  border-color: var(--ona-green);
  transform: translateY(-2px);
}

.post-card-date {
  display: block;
  font-size: 0.78rem;
  color: var(--paper-mute);
  margin-bottom: 0.3rem;
}

.post-card-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--paper);
  margin-bottom: 0.3rem;
}

.post-card-sub {
  display: block;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--paper-soft);
}

/* The card is the link, so its own text must not fight the underline. */
.post-card:hover .post-card-title {
  text-decoration: none;
}

/* ---------- Legal pages ---------- */

.legal {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem;
  color: var(--paper-soft);
}

.legal h1 {
  font-size: clamp(2rem, 4vw, 2.6rem);
  color: var(--paper);
  margin-bottom: 0.5rem;
}

.legal h2 {
  font-size: 1.15rem;
  color: var(--paper);
  margin: 2rem 0 0.6rem;
}

.legal p {
  margin-bottom: 0.9rem;
  line-height: 1.7;
}

.legal ul {
  margin: 0 0 0.9rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.legal li {
  line-height: 1.65;
}

.legal strong {
  color: var(--paper);
}

.legal a {
  color: var(--ona-green-br);
  text-decoration: none;
  font-weight: 500;
}

.legal a:hover {
  text-decoration: underline;
}

.legal-date {
  font-size: 0.85rem;
  color: var(--paper-mute);
  margin-bottom: 1.6rem;
}

.legal-summary {
  background: rgba(95, 184, 0, 0.08);
  border: 1px solid rgba(95, 184, 0, 0.28);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-bottom: 1.5rem;
}

.legal-summary p {
  margin: 0;
  font-size: 0.95rem;
}

.legal-back {
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--paper-line);
  font-size: 0.9rem;
}

.footer-legal {
  margin-top: 0.45rem;
  font-size: 0.82rem;
}