/* ==========================================================================
   Tallo — site stylesheet
   Single stylesheet for all pages. No build step, no dependencies.
   Order: tokens → reset → type → buttons → layout → nav → footer → blocks
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Ink */
  --ink: #252627;
  --ink-soft: #4f4c48;
  --muted: #6e6b67;
  --muted-2: #8d8983;

  /* Paper */
  --paper: #fbfaf9;
  --paper-2: #f4f1ee;
  --paper-3: #f0ece7;
  --white: #ffffff;

  /* Hairlines */
  --line: #e4e1dd;
  --line-2: #e2ded9;
  --line-3: #ece8e3;
  --line-dark: rgba(255, 255, 255, .16);

  /* Dark ground */
  --dark: #1b1b1a;
  --dark-2: #2f2f2e;
  --on-dark: rgba(255, 255, 255, .74);
  --on-dark-soft: rgba(255, 255, 255, .62);

  /* Accent */
  --orange: #f66b23;
  --orange-ink: #9f4514;

  /* Type */
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: Geist, Inter, system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: clamp(38px, 5.6vw, 82px);
  --fs-h2: clamp(30px, 4.2vw, 58px);
  --fs-h2-sm: clamp(28px, 3.4vw, 46px);
  --fs-h3: clamp(21px, 2.2vw, 29px);
  --fs-lead: 17.5px;
  --fs-body: 17px;

  /* Space */
  --maxw: 1320px;
  --gut: clamp(20px, 3.4vw, 48px);
  --block: clamp(72px, 8vw, 128px);
  --block-sm: clamp(64px, 7vw, 110px);

  --radius: 12px;
  --radius-lg: 24px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
svg.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The design has no bold headings — weight and size come from the type
   classes, never from the UA sheet. :where() keeps specificity at 0. */
:where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote) { margin: 0; }
:where(h1, h2, h3, h4, h5, h6) { font-size: 1em; font-weight: 400; }
:where(ul, ol) { padding-left: 0; }

a { color: inherit; text-decoration: none; }
a:not(.btn):not(.nav__logo):not(.nav__panel a):not(.is-plain):hover { opacity: .64; }

:where(a, button, input, textarea, summary):focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--ink); color: var(--white); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--white);
  font-size: 14px;
  border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Type --------------------------------------------------------------- */
.display, .h2, .h2--sm, .h3, .h4 {
  font-family: var(--display);
  font-weight: 300;
  margin: 0;
}

.display {
  font-size: var(--fs-display);
  letter-spacing: -.05em;
  line-height: 1.02;
  text-wrap: balance;
}

.h2 {
  font-size: var(--fs-h2);
  letter-spacing: -.045em;
  line-height: 1.04;
  text-wrap: balance;
}

.h2--sm {
  font-size: var(--fs-h2-sm);
  letter-spacing: -.045em;
  line-height: 1.06;
  text-wrap: balance;
}

.h3 {
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.15;
}

.h4 {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.15;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--muted);
  margin: 0;
  text-wrap: pretty;
}

.body {
  font-size: 18px;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}

.small {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.note {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: 82ch;
}

.stack { display: flex; flex-direction: column; gap: 20px; }
.stack--sm { gap: 14px; }

.measure-46 { max-width: 46ch; }
.measure-52 { max-width: 52ch; }
.measure-56 { max-width: 56ch; }
.measure-58 { max-width: 58ch; }
.measure-66 { max-width: 66ch; }

/* On dark ground */
.on-dark { color: var(--white); }
.on-dark .lead, .lead--dark { color: var(--on-dark); }
.on-dark .eyebrow, .eyebrow--dark { color: var(--on-dark-soft); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 13px 22px;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  /* Hover is a tone shift only; the one motion is the 160ms press. */
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms cubic-bezier(0.23, 1, 0.32, 1), border-color 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.btn:active { transform: scale(.97); }

.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: #eee; }

.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark:hover { background: #3a3b3c; }

.btn--ghost { border: 1px solid #d9d5d0; color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--paper-2); }

.btn--ghost-dark { border: 1px solid rgba(255, 255, 255, .42); color: var(--white); background: transparent; }
.btn--ghost-dark:hover { background: rgba(255, 255, 255, .12); }

.btn--sm { min-height: 40px; padding: 0 16px; font-size: 14.5px; border-radius: 10px; }
.btn--lg { padding: 15px 26px; }

/* --- Layout ------------------------------------------------------------- */
.section { padding: var(--block) var(--gut); }
.section--sm { padding: clamp(64px, 5.4vw, 104px) var(--gut); }
.section--paper { background: var(--paper); }
.section--paper-2 { background: var(--paper-2); }
.section--dark { background: var(--dark); color: var(--white); }

.wrap { max-width: var(--maxw); margin: 0 auto; }
.wrap--narrow { max-width: 760px; margin: 0 auto; }

/* Two-column split that collapses to one */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 56px);
  align-items: start;
}
.split--center { align-items: center; }
.split--wide-gap { gap: clamp(28px, 4vw, 72px); }
@media (min-width: 860px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Hairline grids: the 1px gaps ARE the rules, so column counts are explicit
   (never auto-fit) — an incomplete last row would show the backing colour. */
.rule-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--line-2);
}
.rule-grid--dark { background: var(--line-dark); }
.rule-grid > * { background: var(--paper-2); padding: clamp(26px, 2.8vw, 36px) clamp(22px, 2.4vw, 32px) clamp(30px, 3.2vw, 42px); }
.rule-grid--dark > * { background: var(--dark); }
@media (min-width: 800px) { .rule-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) { .rule-grid--2-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .rule-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 720px) { .rule-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .rule-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Below the 3-up breakpoint a cell spans the full width, so narrow-column
   measures would strand half the row — set heading beside body instead. */
@media (max-width: 959px) {
  .rule-grid--3 > * {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    column-gap: clamp(20px, 4vw, 44px);
    align-items: start;
  }
  .rule-grid--3 > * > :where(span, .eyebrow) { grid-column: 1; }
  .rule-grid--3 > * > :where(h3, .h3, .h4) { grid-column: 1; max-width: 20ch; }
  .rule-grid--3 > * > :where(p, .cell-body) { grid-column: 2; grid-row: 1 / span 3; max-width: none; }
}
@media (max-width: 620px) {
  .rule-grid--3 > * { grid-template-columns: minmax(0, 1fr); }
  .rule-grid--3 > * > :where(p, .cell-body) { grid-column: 1; grid-row: auto; }
}

/* --- Header / nav ------------------------------------------------------- */
.nav { position: fixed; inset-inline: 0; top: 0; z-index: 50; }

.nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 54px;
  margin: 12px clamp(12px, 2.2vw, 22px);
  padding: 0 8px 0 16px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 16px;
  background: rgba(251, 250, 249, .18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 8px 26px rgba(20, 20, 19, .08);
  /* Ink by default (Figma "header"); .nav--light flips to white over dark
     sections (Figma "header2"). tallo.js toggles it from scroll position. */
  color: var(--ink);
  transition: color 200ms var(--ease);
}
.nav--light .nav__bar { color: var(--white); }
.nav__bar a { color: inherit; }

.nav__left { display: flex; align-items: center; gap: clamp(24px, 4vw, 60px); }
.nav__right { display: flex; align-items: center; gap: 8px; }
.nav__logo { display: flex; align-items: center; }
.nav__logo svg { width: 81px; height: 24px; }

.nav__links { display: flex; gap: clamp(18px, 2.4vw, 32px); }
.nav__links a { font-size: 15px; letter-spacing: -.01em; }
.nav__links a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.nav__burger span { width: 18px; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform 240ms var(--ease); }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(6deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-6deg); }

.nav__panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 6px clamp(12px, 2.2vw, 22px) 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  background: rgba(24, 24, 23, .94);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 30px rgba(20, 20, 19, .28);
  color: var(--white);
}
.nav__panel[hidden] { display: none; }
.nav__panel a {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 16px;
  letter-spacing: -.01em;
  transition: background 200ms;
}
.nav__panel a:hover { background: rgba(255, 255, 255, .08); }
.nav__panel .btn { margin-top: 6px; }
.nav__panel .btn:hover { background: #eee; transform: none; }

@media (max-width: 880px) {
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; }
}

/* --- Hero --------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--dark); }
.hero__layer { position: absolute; inset: 0; pointer-events: none; }
.hero__mesh {
  position: absolute;
  inset: -25%;
  filter: blur(30px);
  pointer-events: none;
  background:
    radial-gradient(40% 44% at 22% 32%, rgba(246, 107, 35, .34), transparent 66%),
    radial-gradient(38% 42% at 74% 58%, rgba(214, 150, 96, .30), transparent 68%),
    radial-gradient(48% 50% at 52% 96%, rgba(120, 110, 100, .40), transparent 70%);
  animation: drift-a 28s ease-in-out infinite;
}
.hero__mesh--close {
  background:
    radial-gradient(40% 44% at 26% 36%, rgba(246, 107, 35, .38), transparent 66%),
    radial-gradient(38% 42% at 72% 60%, rgba(206, 148, 102, .30), transparent 68%),
    radial-gradient(46% 48% at 50% 96%, rgba(110, 102, 94, .42), transparent 70%);
  filter: blur(28px);
  animation: drift-b 30s ease-in-out infinite;
}
.hero__scan {
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
.hero__scrim { background: linear-gradient(to top, rgba(20, 20, 19, .96) 0%, rgba(20, 20, 19, .86) 14%, rgba(20, 20, 19, .5) 40%, rgba(20, 20, 19, .18) 68%, rgba(20, 20, 19, .1)); }
/* Seamless hand-off into the dark footer below the closing band. */
.hero__scrim--close { background: linear-gradient(to top, #1b1b1a 0%, rgba(27, 27, 26, .94) 6%, rgba(20, 20, 19, .74) 16%, rgba(20, 20, 19, .32) 58%, rgba(20, 20, 19, .18)); }

/* Hero still (.hero__img) fills the band; the video was removed for now. */
.hero__poster { display: contents; }
.hero--home .hero__img { object-position: 50% 40%; }

.hero__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(140px, 15vw, 190px) var(--gut) clamp(56px, 6vw, 84px);
}

/* Home hero: headline left, copy right, both bottom-aligned. */
.hero--home .hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 28px;
  min-height: min(760px, 100svh);
  padding-top: clamp(116px, 17vw, 150px);
  padding-bottom: clamp(46px, 5vw, 66px);
  max-width: none;
}
/* On wide screens the hero follows the image's 16:9 so nothing is cropped
   beyond a hair; the copy sits at the bottom of that frame. */
@media (min-width: 1100px) {
  .hero--home { width: 100%; height: min(56.25vw, 100svh); display: flex; flex-direction: column; justify-content: flex-end; }
  .hero--home .hero__inner { min-height: 0; width: 100%; }
}
@media (min-width: 900px) {
  .hero--home .hero__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; }
}
.hero__aside { max-width: 400px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.hero__aside { max-width: 380px; }
.hero__aside p { font-size: 17px; line-height: 1.55; letter-spacing: -.01em; color: rgba(255, 255, 255, .9); margin: 0; }

/* Sub-page hero: eyebrow + h1 left, copy + CTA right. */
.hero--page .hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: clamp(28px, 4vw, 56px);
}
@media (min-width: 900px) { .hero--page .hero__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Closing band */
.close-band { position: relative; overflow: hidden; background: var(--dark); }
.close-band__inner {
  position: relative;
  min-height: min(500px, 80svh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 80px var(--gut);
  text-align: center;
}
.close-band .h2 { font-size: clamp(32px, 5vw, 74px); letter-spacing: -.05em; line-height: 1.02; max-width: 18ch; }
.close-band__inner { min-height: min(940px, 100svh); }

@keyframes drift-a {
  0%, 100% { transform: translate3d(-4%, -3%, 0) scale(1.15); }
  50% { transform: translate3d(5%, 4%, 0) scale(1.3); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(6%, 5%, 0) scale(1.25); }
  50% { transform: translate3d(-5%, -6%, 0) scale(1.1); }
}

/* --- Stat row ----------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.stat__rule { height: 1px; background: var(--line); }
.stat__n {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -.03em;
  margin-top: 22px;
}
.stat__t {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: -.03em;
  line-height: 1.25;
  margin-top: 16px;
}
.stat__d { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 8px 0 0; max-width: 34ch; }

/* --- Scroll-reveal headline -------------------------------------------- */
.reveal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 .26em;
  font-family: var(--display);
  font-size: clamp(30px, 4.8vw, 66px);
  font-weight: 300;
  letter-spacing: -.048em;
  line-height: 1.08;
  margin: 0;
  max-width: 17ch;
}
/* --p (0–1) is eased toward the scroll position by tallo.js; the 1 default
   means "fully inked" without JS. tallo.js splits each word into letters, and
   --w sets the soft front — ink fades across ~a fifth of the line rather than
   flipping word by word. */
.reveal { --w: .22; }
.reveal span {
  --f: clamp(0, (var(--p, 1) * (1 + var(--w)) - var(--i, 0)) / var(--w), 1);
  color: color-mix(in oklab, var(--to, #8d8983) calc(var(--f) * 100%), #d5d1cb);
}

/* --- Timeline (how it works) ------------------------------------------- */
.steps {
  list-style: none;
  margin: clamp(40px, 5vw, 60px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: clamp(52px, 6.6vw, 104px) 22px minmax(0, 1fr);
  align-items: stretch;
}
.steps > li { display: contents; }
.steps__n {
  font-family: var(--display);
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 300;
  letter-spacing: -.05em;
  line-height: 1;
  color: #cdc7bf;
  text-align: right;
  padding-bottom: clamp(30px, 3.4vw, 44px);
}
.steps__rail { position: relative; }
.steps__rail::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 12px;
  width: 11px;
  height: 11px;
  border-radius: 3.5px;
  background: var(--orange);
}
.steps__rail::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-1px);
  top: 30px;
  bottom: -12px;
  width: 2px;
  background: var(--orange);
  opacity: .34;
}
/* Hand-off rows: the rail shifts from Tallo orange to your-team ink. */
.steps__rail--fade::after { background: linear-gradient(var(--orange), var(--ink)); }
.steps__rail--fade-back::after { background: linear-gradient(var(--ink), var(--orange)); }
.steps__rail--split::before { background: linear-gradient(to right, var(--orange) 0 50%, var(--ink) 50% 100%); }
.steps__rail--end::before { background: var(--ink); }
.steps__rail--end::after { content: none; }
.steps__body { padding: 0 0 clamp(30px, 3.4vw, 44px) clamp(16px, 2vw, 26px); }
.steps > li:last-child .steps__n,
.steps > li:last-child .steps__body { padding-bottom: 0; }
.steps__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.steps__head h3 {
  font-family: var(--display);
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.15;
  margin: 0;
}
.steps__owner {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.steps__owner--team { color: var(--ink); }
.steps__owner--both { color: #5d5a55; }
.steps__body p { font-size: 15.5px; line-height: 1.55; color: var(--muted); margin: 8px 0 0; max-width: 56ch; text-wrap: pretty; }

/* --- Ticked baseline (numerals) ---------------------------------------- */
.figure { display: flex; align-items: flex-start; gap: 8px; }
.figure__unit {
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--orange);
}
.figure__n {
  font-family: var(--display);
  font-size: clamp(80px, 11vw, 152px);
  font-weight: 300;
  letter-spacing: -.06em;
  line-height: .86;
}
.figure__n--md { font-size: clamp(62px, 8vw, 96px); }
.figure__caption {
  font-family: var(--display);
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.3;
  color: var(--muted);
  align-self: flex-end;
  padding-bottom: clamp(6px, 1vw, 10px);
}

.ticks {
  margin-top: clamp(20px, 2.4vw, 26px);
  height: 9px;
  border-top: 1px solid #d9d4cd;
  display: flex;
  justify-content: space-between;
}
.ticks span { width: 1px; height: 5px; background: #e2ddd6; }
.ticks span.is-major { height: 9px; background: #d9d4cd; }
.ticks span.is-accent { height: 9px; background: var(--orange); }
.ticks--dark { border-top-color: rgba(255, 255, 255, .28); }
.ticks--dark span { background: rgba(255, 255, 255, .18); }
.ticks--dark span.is-major { background: rgba(255, 255, 255, .28); }

.ledger {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
}
.ledger > span { display: flex; align-items: baseline; gap: 10px; }
.ledger i { flex: 1; border-bottom: 1px dotted #cfc9c1; }
.ledger b { font-weight: 400; color: var(--ink); }
.ledger .is-accent { color: var(--orange); }
.ledger .is-accent + i { border-bottom-color: rgba(246, 107, 35, .5); }

/* --- Product-shot placeholder ------------------------------------------
   Swap each .shot for <img src="…" alt="…"> once real screenshots land.  */
.shot {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper-2);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.shot__chrome { display: flex; align-items: center; gap: 7px; }
.shot__chrome span { width: 8px; height: 8px; border-radius: 999px; background: #ded9d3; }
.shot__label { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.shot__chrome .shot__label { margin-left: 6px; width: auto; height: auto; border-radius: 0; background: none; }
.shot__pane {
  flex: 1;
  border: 1px solid var(--line-3);
  border-radius: 12px;
  background: var(--white);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.shot__pane i { height: 10px; border-radius: 3px; background: #f0ece7; }
.shot__pane i.is-strong { background: #e6e2dc; }
.shot__pane .shot__label { margin-top: auto; }

/* --- Callout ------------------------------------------------------------ */
.callout {
  margin-top: 22px;
  border-left: 2px solid var(--orange);
  padding: 2px 0 2px 16px;
}
.callout p { font-size: 15.5px; line-height: 1.55; color: var(--ink); margin: 0; max-width: 46ch; }

.pull {
  margin: clamp(34px, 4vw, 52px) 0;
  padding: 0 0 0 clamp(18px, 2vw, 26px);
  border-left: 2px solid var(--orange);
}
.pull p {
  font-family: var(--display);
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1.2;
  margin: 0;
  max-width: 26ch;
}

/* --- Quotes ------------------------------------------------------------- */
.quote { margin: 0; padding: 0; text-align: center; max-width: 1000px; margin-inline: auto; }
.quote p {
  font-family: var(--display);
  font-size: clamp(26px, 3.6vw, 50px);
  font-weight: 300;
  letter-spacing: -.045em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
.quote footer { display: flex; flex-direction: column; gap: 4px; margin-top: 26px; }
.quote cite { font-style: normal; font-size: 15px; letter-spacing: -.01em; }
.quote small { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }

.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(28px, 3.4vw, 48px); }
.quotes blockquote { margin: 0; padding: 0; }
.quotes hr { height: 1px; border: 0; background: var(--line); margin: 0; }
.quotes p {
  font-family: var(--display);
  font-size: clamp(20px, 2.1vw, 27px);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1.22;
  margin: 22px 0 0;
  text-wrap: pretty;
}
.quotes footer { display: flex; flex-direction: column; gap: 3px; margin-top: 18px; }
.quotes cite { font-style: normal; font-size: 14.5px; letter-spacing: -.01em; }
.quotes small { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* --- Integration ledger ------------------------------------------------- */
.ints { margin-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--line-2); }
.ints__row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  align-items: baseline;
  padding: clamp(20px, 2.2vw, 26px) 0;
  border-bottom: 1px solid var(--line-2);
}
.ints__row:last-child { border-bottom: 0; }
.ints__cat {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  flex: 0 0 clamp(150px, 18vw, 230px);
}
.ints__cat--accent { color: var(--orange-ink); }
.ints__names { display: flex; flex-wrap: wrap; gap: 12px 28px; min-width: 0; }
.ints__names span {
  font-family: var(--display);
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.2;
}

/* --- Pricing tiers ------------------------------------------------------ */
.tiers { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); overflow: hidden; }
.tier { display: grid; grid-template-columns: minmax(0, 1fr); }
.tier + .tier { border-top: 1px solid var(--line-3); }
.tier__head { padding: clamp(28px, 3.2vw, 38px) clamp(24px, 2.6vw, 32px); }
.tier__body { padding: clamp(28px, 3.2vw, 38px) clamp(24px, 2.6vw, 32px); }
@media (min-width: 900px) {
  .tier { grid-template-columns: 300px minmax(0, 1fr); }
  .tier__head { border-right: 1px solid var(--line-3); }
}
.tier--dark { background: var(--dark); color: var(--white); border-top-color: var(--dark-2); }
@media (min-width: 900px) { .tier--dark .tier__head { border-right-color: var(--dark-2); } }
.tier__name {
  font-family: var(--display);
  font-size: clamp(26px, 2.6vw, 30px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.1;
}
.tier__for { font-size: 15px; line-height: 1.5; color: var(--muted); margin-top: 6px; }
.tier--dark .tier__for, .tier--dark .tier__terms { color: rgba(255, 255, 255, .7); }
.tier__price { display: flex; align-items: flex-start; gap: 5px; margin-top: clamp(20px, 2.4vw, 26px); }
.tier__currency {
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--orange-ink);
}
.tier--dark .tier__currency { color: var(--orange); }
.tier__amount {
  font-family: var(--display);
  font-size: clamp(58px, 7vw, 76px);
  font-weight: 300;
  letter-spacing: -.06em;
  line-height: .86;
}
.tier__terms { font-size: 15px; line-height: 1.5; color: var(--muted); margin-top: 14px; max-width: 26ch; }
.tier .btn { margin-top: 24px; }
.tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange);
  border: 1px solid rgba(246, 107, 35, .5);
  border-radius: 999px;
  padding: 4px 9px;
}

.feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px 24px;
  align-content: start;
}
.feats--spaced { padding-top: 20px; }
@media (min-width: 620px) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .feats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feats li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15px; line-height: 1.45; }
.feats li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2.5px;
  background: var(--ink);
  margin-top: 6px;
}
.tier--dark .feats li::before { background: var(--orange); }

/* --- Analytics mock ----------------------------------------------------- */
.panel {
  margin-top: clamp(36px, 4vw, 56px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper-2);
  padding: clamp(16px, 2vw, 22px);
}
.panel__top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.panel__top .eyebrow { letter-spacing: .08em; font-size: 11px; }
.panel__ranges { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.panel__ranges span {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 5px 9px;
  background: var(--white);
}
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 14px;
}
.kpis > div { background: var(--white); padding: 16px 18px; }
.kpis b { display: block; font-family: var(--mono); font-size: 26px; font-weight: 400; line-height: 1; }
.kpis span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 7px; }
.chart {
  margin-top: 14px;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  align-items: flex-end;
  gap: clamp(6px, 1.2vw, 14px);
  height: 190px;
}
.chart i { flex: 1; border-radius: 4px 4px 2px 2px; background: #e0dbd3; }
.chart i.is-flagged { background: var(--orange); }
.panel__cap { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin: 12px 0 0; }

/* --- FAQ (native disclosure — works without JS) ------------------------- */
.faq { list-style: none; margin: clamp(28px, 3vw, 40px) 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.faq--on-paper details { background: var(--white); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  font-size: 16.5px;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
  margin-right: 4px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 400ms var(--ease);
}
.faq details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.faq p { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin: 0; padding: 0 22px 22px; max-width: 62ch; }
/* Open/close is tweened by tallo.js ("FAQ" block); without JS the native
   disclosure just toggles. */

/* --- Waitlist / forms --------------------------------------------------- */
.waitlist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--maxw);
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
}
@media (min-width: 900px) { .waitlist { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.waitlist__media {
  background: var(--paper-3);
  min-height: clamp(260px, 34vw, 560px);
  display: flex;
  align-items: flex-end;
  padding: clamp(18px, 2.4vw, 26px);
}
.waitlist__media img { width: 100%; height: 100%; object-fit: cover; }
.waitlist__media span { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--muted-2); }
.waitlist form { padding: clamp(26px, 3.4vw, 46px) clamp(22px, 3vw, 44px); }

.fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 680px) { .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > span { font-size: 13.5px; color: var(--ink-soft); }
.field input, .field textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 14px;
  height: 46px;
  font-family: var(--sans);
  font-size: 15.5px;
  color: var(--ink);
  outline: 0;
  transition: border-color 200ms;
}
.field textarea { height: auto; padding: 12px 14px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.form-note { font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--muted); margin: 16px 0 0; max-width: 44ch; }

/* --- Cards -------------------------------------------------------------- */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  padding: clamp(30px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
@media (min-width: 860px) { .card { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card--light { background: var(--paper); border-color: var(--line-2); padding: clamp(28px, 3.4vw, 52px); }

/* --- Alternating tour rows --------------------------------------------- */
.tour { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 104px); }
.tour__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
@media (min-width: 860px) {
  .tour__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Even rows put the screenshot on the left; on one column text always
     comes first so a step never opens on an unlabelled wireframe. */
  .tour__row--flip .tour__text { order: 2; }
  .tour__row--flip .shot { order: 1; }
}
.tour__head { display: flex; align-items: baseline; gap: 14px; }
.tour__head .h2 { font-size: clamp(26px, 3.2vw, 42px); }
.tour__n { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.tour__text { max-width: 52ch; }
.tour__text .stack { margin-top: 18px; }
.tour__text p { font-size: var(--fs-body); line-height: 1.6; color: var(--muted); margin: 0; text-wrap: pretty; }

/* --- Footer ------------------------------------------------------------- */
.footer { background: var(--dark); color: var(--white); padding: clamp(48px, 6vw, 80px) var(--gut) 0; overflow: clip; }
.footer__legal { padding-bottom: clamp(24px, 3vw, 52px); }
.footer__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(min(200px, 100%), 1.5fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: 34px 24px;
  padding-bottom: clamp(40px, 5vw, 64px);
}
.footer__brand svg { width: 97px; height: 29px; }
.footer__brand p { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .7); margin: 16px 0 0; max-width: 26ch; }
.footer__brand .btn { margin-top: 20px; }
.footer__brand .btn:hover { background: #eee; transform: none; }
.footer__head {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.footer__links { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.footer__links a, .footer__mail { font-size: 14.5px; letter-spacing: -.01em; color: rgba(255, 255, 255, .8); }
.footer__mail { display: inline-block; font-family: var(--mono); font-size: 13.5px; margin-top: 14px; }
.footer__legal {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: baseline;
  padding: 22px 0 clamp(36px, 4vw, 52px);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.footer__legal small { font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, .48); max-width: 66ch; }
.footer__legal nav { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; }
.footer__legal nav a { font-size: 12.5px; color: rgba(255, 255, 255, .6); }
/* Figma: the wordmark sits whole inside a 1824×540 box inset 48px, 1579 wide, #2b2b2a with the orange dot. */
/* Figma 2026-09-22: the mark spans the full inset width (1824 at 1920) and the
   footer ends 86.7% of the way down it, so the base of the letters is cut. */
.footer__mark { color: #2b2b2a; line-height: 0; margin: clamp(24px, 3.7vw, 71px) 0 0; aspect-ratio: 1824 / 469; overflow: hidden; }
.footer__mark svg { width: 100%; height: auto; display: block; }

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


/* ==========================================================================
   Figma sync — 2026-09-08
   Home: horizontal step rail + product stage, guardrails widget, quote card,
   integration marks. Product: tour accordion, analytics KPI groups + line.
   ========================================================================== */

/* --- Step rail (how it works) — replaces the vertical timeline ----------- */
.rail-wrap { position: relative; margin-top: clamp(28px, 3vw, 40px); }
/* Card + gap are sized so exactly 3.4 cards fit the rail at any width: the
   fourth always peeks in under the fade, so it reads as "more to come". */
.rail-wrap { container-type: inline-size; }
.rail {
  --rail-gap: clamp(32px, 4.5cqw, 96px);
  --rail-card: calc((100cqw - 3 * var(--rail-gap)) / 3.4);
  list-style: none; margin: 0; padding: 40px 0;
  display: flex; gap: var(--rail-gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }
.rail > li {
  flex: 0 0 var(--rail-card); min-width: 200px; scroll-snap-align: start; padding: 0 clamp(16px, 2vw, 26px);
  display: flex; flex-direction: column; gap: 40px;
}
/* Timeline marker: 18px disc, 8px orange core, hairline running right. */
.rail__dot { position: relative; height: 18px; }
.rail__dot::before { content: ""; position: absolute; left: 9px; right: -200px; top: 8.5px; height: 1px; background: #f1f0f0; }
.rail__dot::after { content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: #f1f0f0; box-shadow: inset 0 0 0 5px #f1f0f0, inset 0 0 0 9px var(--orange); }
.rail > li:last-child .rail__dot::before { content: none; }
.rail__n { font-family: var(--display); font-size: 56px; font-weight: 300; letter-spacing: -.05em; line-height: 1; color: #cdc7bf; }
.rail__body { display: flex; flex-direction: column; gap: 7px; }
.rail__body .steps__head h3 { font-size: 27px; }
.rail__body p { font-size: 15.5px; line-height: 24px; color: var(--muted); margin: 0; text-wrap: wrap; }
/* Right-edge fade so the rail reads as continuing. */
/* Right-edge fade so the rail reads as continuing; gone once it's at the end. */
.rail-wrap::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: clamp(80px, 22%, 360px); pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.85) 70%, var(--white)); opacity: 1; transition: opacity 200ms var(--ease); }
.rail-wrap.is-end::after { opacity: 0; }
/* Mouse users: drag to scroll. */
.rail { cursor: grab; user-select: none; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.rail__dots { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 20px 0; }
.rail__dots button { appearance: none; border: 0; padding: 0; margin: 0; cursor: pointer; width: 8px; height: 8px; border-radius: 50%; background: #cbcbcb; transition: width 200ms var(--ease), background-color 200ms var(--ease); position: relative; }
.rail__dots button::before { content: ""; position: absolute; inset: -12px; } /* 32px hit area */
.rail__dots button.is-on { width: 30px; border-radius: 2.5px; background: var(--orange); }
.rail__dots button:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.rail__dots span { width: 8px; height: 8px; border-radius: 50%; background: #cbcbcb; transition: width 200ms var(--ease), background-color 200ms var(--ease); }
.rail__dots span.is-on { width: 30px; border-radius: 2.5px; background: var(--orange); }

/* --- Product stage below the rail ---------------------------------------- */
.stage { position: relative; margin: clamp(40px, 5vw, 100px) auto 0; max-width: 1003px; aspect-ratio: 1003 / 516; border-radius: clamp(28px, 8vw, 80px); overflow: hidden; background: linear-gradient(160deg, #ece7e1, #f7f4f0 55%, #e4dfd8); }
.stage__note { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-family: var(--mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.lic { position: absolute; background: var(--white); border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 8px 26px rgba(31,32,33,.06); }
.lic--a { left: 14.9%; top: 35%; width: 70%; }
.lic--b { left: 18.4%; top: 42.2%; width: 63.3%; opacity: .6; border-radius: 26px; padding: 26px; }
.lic__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.lic__t { font-family: var(--sans); font-size: 24px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.lic__s { font-family: var(--sans); font-size: 17px; color: var(--muted); }
.lic__d { font-family: var(--sans); font-size: 15px; color: var(--muted-2); white-space: nowrap; }
.lic__badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: #1f7a3a; background: #e6f4ea; border-radius: 999px; padding: 4px 10px; }
@media (max-width: 720px) { .lic { padding: 16px; gap: 8px; border-radius: 16px; } .lic__t { font-size: 15px; } .lic__s, .lic__d { font-size: 12px; } .lic__badge { display: none; } }

/* --- Lead-to-lease notifications (looping) -------------------------------
   tallo.js steps through the six stages on a timer, independent of scroll.
   Cards behave like phone notifications — the next one drops in over the
   centre while the current one settles down and fades. transform + opacity
   only, strong ease-out, 360ms (marketing budget). */
.notes-pin { position: relative; margin-top: clamp(40px, 5vw, 100px); }
.notes-pin__panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.stage--notes { margin: 0; width: 100%; max-height: calc(100vh - 120px); }
.lic--note {
  left: 14.9%; width: 70%; top: 50%;
  opacity: 0;
  transform: translate3d(0, calc(-50% - 56px), 0) scale(.96);
  transition: opacity 360ms cubic-bezier(0.23, 1, 0.32, 1), transform 360ms cubic-bezier(0.23, 1, 0.32, 1);
  will-change: opacity, transform;
  pointer-events: none;
}
.lic--note.is-on { opacity: 1; transform: translate3d(0, -50%, 0) scale(1); }
.lic--note.is-past { opacity: 0; transform: translate3d(0, calc(-50% + 40px), 0) scale(.96); }
@media (prefers-reduced-motion: reduce) {
  .lic--note, .lic--note.is-on, .lic--note.is-past { transform: translate3d(0, -50%, 0); transition: opacity 200ms ease; }
}

/* --- Guardrails widget ("Property stats") -------------------------------- */
.widget { background: var(--white); border-radius: 21.5px; padding: 21.5px; display: flex; flex-direction: column; gap: 21.5px; box-shadow: 0 8px 26px rgba(31,32,33,.06); max-width: 417px; width: 100%; }
.widget__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.widget__t { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ink); }
.widget__s { font-family: var(--sans); font-size: 13px; color: var(--muted); margin-top: 3px; }
.widget__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-top: 36px; }
.widget__meta { font-family: var(--sans); font-size: 10.75px; font-weight: 500; color: #84857c; }
.toggle { flex: none; width: 39px; height: 23px; border-radius: 999px; background: var(--ink); position: relative; }
.toggle::after { content: ""; position: absolute; top: 2.5px; right: 2.5px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); }
.toggle--lg { width: 52px; height: 30px; }
.toggle--lg::after { width: 24px; height: 24px; top: 3px; right: 3px; }

/* --- Quote card ---------------------------------------------------------- */
.quote-card { max-width: 1000px; margin: 0 auto; background: var(--white); border-radius: clamp(28px, 6vw, 80px); padding: clamp(20px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); }
@media (min-width: 860px) { .quote-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.quote-card__img { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; object-position: 32% 50%; transform: scaleX(-1); border-radius: clamp(20px, 3vw, 40px); }
.quote-card blockquote { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.quote-card blockquote p { font-family: var(--display); font-size: clamp(26px, 3vw, 40px); font-weight: 300; letter-spacing: -.056em; line-height: 1.2; color: var(--ink); margin: 0; text-wrap: balance; }
.quote-card footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.quote-card footer > div { display: flex; flex-direction: column; gap: 4px; }
.quote-card cite { font-style: normal; font-size: 15px; letter-spacing: -.01em; color: var(--ink); }
.quote-card small { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }

/* --- Integration marks ----------------------------------------------------
   Each mark is exactly the Figma box: 32×32 unless noted, image cropped the
   way the frame crops it (background-size / position carried over). */
.ints__names span { display: inline-flex; align-items: center; gap: 8px; }
.ints__mark { flex: none; display: block; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; }
.ints__mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ints__mark--yardi img { transform: scale(1.4286); object-position: 50% 61.6%; }   /* 142.857% @ 50% 61.616% */
.ints__mark--realpage { width: 28px; height: 24px; border-radius: 0; }
.ints__mark--realpage img { object-fit: contain; }
.ints__mark--zillow { border-radius: 0; }
.ints__mark--zillow img { object-fit: contain; }
.ints__mark--trulia, .ints__mark--outlook, .ints__mark--rent-manager { border-radius: 0; }
.ints__mark--buildium { background: #d6d6d6; }
/* Entrata and Google Calendar are vector icons in the frame (not bitmaps): a
   32px disc holds the slot until the SVGs are exported. */
.ints__mark--vector { background: #d6d6d6; }
.ints__mark--vector.is-ink { background: var(--ink); }

/* --- Tour (product) ------------------------------------------------------
   Pinned scroll story. The section is a tall track (one viewport per step);
   inside it a 100vh panel is sticky, so the page appears to hold still while
   the reader scrolls — and that scroll distance drives which step is open
   and which screen the stage shows. After the last step the track ends and
   the page moves on. Below 900px there is nothing to pin: the steps stack,
   each with its own screen, and read as a plain document. */
.tour-pin { padding-top: 0 !important; padding-bottom: 0 !important; }
.tour-pin__track { position: relative; }
.tour-pin__panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 120px); align-items: start; padding: clamp(64px, 5.4vw, 104px) 0; }
@media (min-width: 900px) {
  /* Click-driven: no pinned track, the panel sits in the page flow. */
  .tour-pin__panel { box-sizing: border-box; grid-template-columns: 320px minmax(0, 1fr); align-items: center; padding: 0; }
  /* Keep the whole list inside the pinned viewport on short screens. */
  .tour-pin__panel .tour-acc__list { max-height: calc(100vh - 96px); }
  .tour-pin__panel .tour-acc__list { gap: clamp(20px, 4vh, 40px); }
  .tour-pin__panel .tour-acc__body-in > :first-child { margin-top: clamp(20px, 4vh, 40px); }
  .tour-pin__panel .tour-acc__btn .h2 { font-size: clamp(26px, 5vh, 42px); }
  .tour-pin__panel .tour-acc__body p { font-size: clamp(14px, 2.6vh, 17px); line-height: 1.6; }
}

/* Left column — Figma: 320 wide, 40 gap between items, 42px Geist titles,
   16px under the rule. Closed items show the title only. */
.tour-acc__list { display: flex; flex-direction: column; gap: 40px; }
.tour-acc__item { display: flex; flex-direction: column; gap: 40px; }
.tour-acc__btn { display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 0 0 16px; background: none; border: 0; border-bottom: 1px solid transparent; text-align: left; cursor: pointer; color: var(--ink); font: inherit; transition: border-color 200ms var(--ease); }
.tour-acc__btn .tour__n { line-height: 1; }
.tour-acc__btn .h2 { font-size: clamp(26px, 3.2vw, 42px); }
.tour-acc__item.is-open .tour-acc__btn { border-bottom-color: #959595; }
.tour-acc__body { display: flex; flex-direction: column; gap: 13px; }
.tour-acc__body-in { display: flex; flex-direction: column; gap: 13px; }
.tour-acc__body p { font-size: var(--fs-body); line-height: 1.6; color: var(--muted); margin: 0; text-wrap: wrap; }
.tour-acc__btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .tour-acc__btn:hover .h2 { color: var(--ink-soft); } }
/* Accordion body: the one place height is the honest property. 200ms, ease-out. */
@media (min-width: 900px) {
  .tour-acc__body { display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden; transition: grid-template-rows 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms cubic-bezier(0.23, 1, 0.32, 1); }
  .tour-acc__body > * { min-height: 0; }
  .tour-acc__body-in { display: flex; flex-direction: column; gap: 13px; }
  .tour-acc__item.is-open .tour-acc__body { grid-template-rows: 1fr; opacity: 1; }
  .tour-acc__item .tour-shot { display: none; }
  .tour-acc__item { gap: 0; }
  .tour-acc__body-in > :first-child { margin-top: 40px; }
}

/* The stage — Figma: 895×516, r80, blurred living-room photo, frosted veil. */
.tour-acc__stage { display: none; }
@media (min-width: 900px) { .tour-acc__stage { display: block; } }
.tour-shot, .tour-acc__stage { position: relative; aspect-ratio: 895 / 516; border-radius: clamp(28px, 8vw, 80px); overflow: hidden; background: #d9d3cb; }
.tour-acc__bg { position: absolute; left: -17%; top: -43%; width: 134%; height: 186%; object-fit: cover; }
.tour-acc__veil { position: absolute; inset: 0; background: rgba(226,226,226,.2); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }

/* Screens: all stacked, one visible. Crossfade + a 12px settle, 260ms,
   strong ease-out; transitions so a fast scroll retargets rather than restarts. */
.tour-screen { position: absolute; left: 10.5%; top: 19.9%; width: 79%; opacity: 0; transform: translateY(12px); transition: opacity 260ms cubic-bezier(0.23, 1, 0.32, 1), transform 260ms cubic-bezier(0.23, 1, 0.32, 1); will-change: opacity, transform; }
.tour-screen.is-on { opacity: 1; transform: none; }
.tour-screen img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(31,32,33,.35); }
.tour-screen--2 img { object-fit: cover; aspect-ratio: 16 / 10; object-position: 0 0; }
.tour-screen--3 img { object-fit: cover; aspect-ratio: 16 / 10; object-position: 100% 30%; }
.tour-screen--4 img { object-fit: cover; aspect-ratio: 16 / 10; object-position: 50% 100%; }
@media (prefers-reduced-motion: reduce) {
  .tour-screen { transform: none; transition: opacity 200ms ease; }
  .tour-acc__body { transition: opacity 200ms ease; }
}

/* --- Analytics: KPI groups + line chart --------------------------------- */
.kpi-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(16px, 2.6vw, 40px); margin-top: 24px; }
.kpi-group { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; border-left: 1px solid var(--line-2); }
.kpi-group--on { border-left: 3px solid var(--orange); padding-left: 14px; }
.kpi-group__t { font-family: var(--sans); font-size: 12px; font-weight: 600; line-height: 16px; color: #84857c; }
.kpi-group__cells { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kpi-group__cells > div { display: flex; flex-direction: column; gap: 4px; justify-content: center; min-height: 52px; }
.kpi-group__cells b { display: block; font-family: var(--sans); font-size: 24px; font-weight: 600; line-height: 32px; color: #2b2b2c; }
.kpi-group__cells span { display: block; font-family: var(--sans); font-size: 12px; font-weight: 500; line-height: 16px; color: #a7a8a0; }
.legend { display: flex; gap: 16px; margin-top: 24px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted-2); }
.legend i { width: 8px; height: 8px; border-radius: 2px; background: #f86a22; }
.legend i.is-amber { background: #ffa800; }
.line-chart { display: block; width: 100%; height: clamp(110px, 8.4vw, 160px); margin-top: 24px; overflow: visible; }
.line-chart text { font-family: var(--mono); font-size: 10px; fill: var(--muted); }


/* Figma sync, pass 2 — section geometry ------------------------------------ */
/* Pricing is an inset, 80px-radius dark block (Figma: x 48, w 1819, r 80). */
.section--inset { margin: 0 clamp(12px, 2.5vw, 48px); border-radius: clamp(28px, 4.2vw, 80px); padding: clamp(72px, 6.7vw, 128px) clamp(24px, 10.4vw, 200px); }
.section--white { background: var(--white); }
/* Manifesto and how-it-works measures from the frame. */
.section--manifesto { padding: clamp(72px, 6.9vw, 132px) var(--gut); }
/* Integration ledger columns: 262px category track at desktop, 80px rows. */
@media (min-width: 1100px) { .ints__cat { flex: 0 0 230px; } }
.ints__row { min-height: 80px; }
@media (min-width: 700px) { .ints__row { padding: 24px 0; } }
.ints__names span { font-size: 23px; letter-spacing: -.69px; line-height: 27.6px; font-weight: 400; color: var(--ink); }
/* Analytics panel: Figma r20, paper-2 ground, 22px padding, 24px gap. */
.panel { background: var(--paper-2); border-radius: 20px; padding: 22px; }
.panel__ranges span { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--paper); }


/* Figma sync, pass 3 — photography ----------------------------------------- */
.hero__img, .close-band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__img { object-position: 0 41%; }
.hero--page .hero__img { object-position: 50% 50%; }
/* Product hero ground is the photo itself (light), not the dark base. */
.hero--page { background: #c9c4c0; }
/* The frosted bar inherits white over dark grounds; the CTA inside stays ink-on-white. */
.nav__bar .btn { color: var(--ink); }
.close-band__img { object-position: 50% 0; }
/* Photo carries the warmth; the mesh stays as the Figma radial tints only. */
.close-band .hero__mesh--close { opacity: .55; }
/* Product close band (Figma section#close on that frame): radial mesh + scrim
   only, no photo, 520px tall. */
.close-band--plain .hero__mesh--close { opacity: 1; }
.close-band--plain .close-band__inner { min-height: min(520px, 80svh); }
/* Figma layers a 0.62→0.11 grey ramp over the hero photo before the scrim. */
.hero__tint { background: linear-gradient(to top, rgba(81,81,81,.616) 4%, rgba(90,90,90,.238) 48%, rgba(225,225,225,.112)); }


/* ==========================================================================
   Motion pass — find-animation-opportunities, 2026-09-09
   All entrances are IntersectionObserver-triggered once (.is-in), transform
   + opacity only, ease-out cubic-bezier(0.23, 1, 0.32, 1). Without JS the
   .is-in state is the default, so nothing is hidden.
   ========================================================================== */

/* 1. Notification cards: rows land in sequence (0 / 40 / 70ms). */
.lic--note .lic__row { transition: opacity 360ms cubic-bezier(0.23, 1, 0.32, 1), transform 360ms cubic-bezier(0.23, 1, 0.32, 1); }
.lic--note .lic__row + .lic__row { transition-delay: 40ms; }
.lic--note .lic__badge, .lic--note .lic__row:first-child .lic__d { transition: opacity 360ms cubic-bezier(0.23, 1, 0.32, 1) 70ms, transform 360ms cubic-bezier(0.23, 1, 0.32, 1) 70ms; }
.lic--note:not(.is-on) .lic__row, .lic--note:not(.is-on) .lic__badge, .lic--note:not(.is-on) .lic__row:first-child .lic__d { opacity: 0; transform: translateY(6px); transition-delay: 0ms; }
.lic--note.is-on .lic__row, .lic--note.is-on .lic__badge, .lic--note.is-on .lic__row:first-child .lic__d { opacity: 1; transform: none; }

/* 2. Guardrails toggles: off → on when the widget enters (0 / 120ms). */
.toggle { transition: background-color 200ms cubic-bezier(0.23, 1, 0.32, 1); }
.toggle::after { transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1); }
.js .widget:not(.is-in) .toggle { background: #cbcbcb; }
.js .widget:not(.is-in) .toggle::after { transform: translateX(-16px); }
.js .widget:not(.is-in) .toggle--lg::after { transform: translateX(-22px); }
.widget .widget__foot .toggle { transition-delay: 120ms; }
.widget .widget__foot .toggle::after { transition-delay: 120ms; }

/* 4. Stat rules draw left→right (60ms stagger); numerals fade alongside. */
.stat__rule { transform-origin: left; transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1); }
.stat__n { transition: opacity 500ms cubic-bezier(0.23, 1, 0.32, 1); }
.js .stats:not(.is-in) .stat__rule { transform: scaleX(0); }
.js .stats:not(.is-in) .stat__n { opacity: 0; }
.stat:nth-child(2) .stat__rule, .stat:nth-child(2) .stat__n { transition-delay: 60ms; }
.stat:nth-child(3) .stat__rule, .stat:nth-child(3) .stat__n { transition-delay: 120ms; }

/* 5. Quote card: one soft entrance, no stagger. */
.quote-card { transition: opacity 400ms cubic-bezier(0.23, 1, 0.32, 1), transform 400ms cubic-bezier(0.23, 1, 0.32, 1); }
.js .quote-card:not(.is-in) { opacity: 0; transform: translateY(16px); }

@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
  .lic--note .lic__row, .lic--note .lic__badge, .lic--note .lic__row:first-child .lic__d { transform: none !important; transition: opacity 200ms ease; transition-delay: 0ms; }
  .js .widget:not(.is-in) .toggle, .js .widget:not(.is-in) .toggle::after { background: var(--ink); transform: none; }
  .stat__rule { transition: none; } .js .stats:not(.is-in) .stat__rule { transform: none; }
  .stat__n { transition: opacity 200ms ease; }
  .quote-card { transition: opacity 200ms ease; } .js .quote-card:not(.is-in) { transform: none; }
}


/* ==========================================================================
   Motion pass, other pages — same contract: IO adds .is-in once; without JS
   the final state is the default. transform + opacity (+ stroke offset for
   the chart), ease-out cubic-bezier(0.23, 1, 0.32, 1).
   ========================================================================== */

/* Product 1+3: chart lines draw in, then the Leads highlight lands. */
.line-chart path { transition: stroke-dashoffset 900ms cubic-bezier(0.23, 1, 0.32, 1); }
.line-chart path + path { transition-delay: 150ms; }
.js .panel:not(.is-in) .line-chart path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .panel.is-in .line-chart path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.kpi-group--on { transition: border-color 300ms cubic-bezier(0.23, 1, 0.32, 1) 700ms; }
.js .panel:not(.is-in) .kpi-group--on { border-left-color: transparent; }

/* Product 2: ledger ticks rise, 30ms stagger. */
.ticks span { transform-origin: bottom; transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1); }
.js .card:not(.is-in) .ticks span { transform: scaleY(0); }
.ticks span:nth-child(2) { transition-delay: 30ms; } .ticks span:nth-child(3) { transition-delay: 60ms; } .ticks span:nth-child(4) { transition-delay: 90ms; }
.ticks span:nth-child(5) { transition-delay: 120ms; } .ticks span:nth-child(6) { transition-delay: 150ms; } .ticks span:nth-child(7) { transition-delay: 180ms; }

/* Pricing 4: tier cards rise in, second +80ms. */
.tier { transition: opacity 400ms cubic-bezier(0.23, 1, 0.32, 1), transform 400ms cubic-bezier(0.23, 1, 0.32, 1); }
.tier + .tier { transition-delay: 80ms; }
.js .tiers:not(.is-in) .tier { opacity: 0; transform: translateY(16px); }

/* Pricing 5 / Renters 8 / About 7: rules draw left→right, numerals fade. */
.quotes blockquote hr, #scams .rule-grid > div > span[aria-hidden] { transform-origin: left; transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1); }
.js .quotes:not(.is-in) blockquote hr { transform: scaleX(0); }
.quotes blockquote:nth-child(2) hr { transition-delay: 60ms; } .quotes blockquote:nth-child(3) hr { transition-delay: 120ms; }
.js #scams .rule-grid:not(.is-in) > div > span[aria-hidden] { transform: scaleX(0); }
#scams .rule-grid > div:nth-child(2) > span[aria-hidden] { transition-delay: 40ms; } #scams .rule-grid > div:nth-child(3) > span[aria-hidden] { transition-delay: 80ms; } #scams .rule-grid > div:nth-child(4) > span[aria-hidden] { transition-delay: 120ms; }
#lines .rule-grid > div > span { transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); }
.js #lines .rule-grid:not(.is-in) > div > span { opacity: 0; }
#lines .rule-grid > div:nth-child(2) > span { transition-delay: 60ms; } #lines .rule-grid > div:nth-child(3) > span { transition-delay: 120ms; }

/* About 6: pull quote rises. */
.pull { transition: opacity 400ms cubic-bezier(0.23, 1, 0.32, 1), transform 400ms cubic-bezier(0.23, 1, 0.32, 1); }
.js .pull:not(.is-in) { opacity: 0; transform: translateY(12px); }

@media (prefers-reduced-motion: reduce) {
  .line-chart path { transition: opacity 200ms ease; stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .js .panel:not(.is-in) .line-chart path { opacity: 0; }
  .ticks span { transition: none; } .js .card:not(.is-in) .ticks span { transform: none; }
  .tier, .pull { transition: opacity 200ms ease; } .js .tiers:not(.is-in) .tier, .js .pull:not(.is-in) { transform: none; }
  .quotes blockquote hr, #scams .rule-grid > div > span[aria-hidden] { transition: none; }
  .js .quotes:not(.is-in) blockquote hr, .js #scams .rule-grid:not(.is-in) > div > span[aria-hidden] { transform: none; }
}



/* ==========================================================================
   Figma sync — 2026-09-22 (div.sc-host frames, 1920 wide)
   Home: pricing run-out, bleeding step rail, notification stack, guardrail
   collage, portrait quote photo, integration marks. Product: flat tour
   stage + setup screen, standards cells, analytics chart. Renters: photo
   band, waitlist overlay, scams rules. About: team. All pages: footer mark.
   ========================================================================== */

/* --- Home ---------------------------------------------------------------- */
/* Pricing block sits on paper with the frame's 187px run-out below it. */
.section--inset { margin-bottom: clamp(56px, 9.75vw, 187px); }

/* Step rail runs off the right edge of the page; 317 card + 96 gap at 1320. */
#how { overflow-x: clip; padding-bottom: clamp(48px, 4.4vw, 84px); }
#how .rail { padding: 23px 0; }
.rail-wrap { margin-right: calc(50% - 50vw); }
.rail {
  --wrap-w: min(calc(100vw - 2 * var(--gut)), var(--maxw));
  --rail-gap: clamp(32px, calc(var(--wrap-w) * .0598), 79px);
  --rail-card: max(260px, calc(var(--wrap-w) * .253));
}

/* Notification stack: no stage box; the card floats on white with a ghost
   card behind it. */
.notes-pin { --panel-h: clamp(440px, 33.4vw, 640px); margin-top: 26px; }
.notes-pin__panel { height: var(--panel-h); }
.stage--notes { aspect-ratio: auto; height: 100%; max-height: none; max-width: none; border-radius: 0; background: none; overflow: visible; }
.lic-ghost { position: absolute; left: 50%; top: 50%; width: min(636px, 88%); height: 128px; transform: translate(-50%, calc(-50% + 32px)); background: #f6f6f6; border: 1px solid #e8e8e8; border-radius: 26px; box-shadow: 0 22px 40px -18px rgba(31, 32, 33, .12); }
.lic--note { left: 50%; width: min(720px, 100%); margin-left: calc(min(720px, 100%) / -2); flex-direction: row; align-items: center; gap: 18px; padding: 27px 28px; border-radius: 28px; background: #f4f4f4; border: 1px solid #e3e3e3; box-shadow: 0 18px 36px -20px rgba(31, 32, 33, .14); }
.lic__icon { flex: none; width: 70px; height: 70px; border-radius: 50%; background: #e2ecf3; color: #2f7fc1; display: grid; place-items: center; }
.lic__icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lic__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lic--note .lic__row { align-items: flex-start; }
.lic--note .lic__t { font-size: 24px; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; }
.lic--note .lic__s { font-size: 24px; line-height: 1.2; color: var(--muted); }
.lic--note .lic__d { font-size: 20px; line-height: 1.2; color: var(--muted-2); }

/* Guardrails collage — card boxes carried over from the frame (489×275). */
#rules { padding-top: clamp(72px, 7.3vw, 140px); padding-bottom: clamp(64px, 6.45vw, 124px); }
#rules .split { align-items: start; }
.rules-copy { padding-top: 19px; }
.rules { position: relative; width: 489px; height: 275px; max-width: 100%; justify-self: end; }
.rule-card { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 18px 21px; background: var(--white); border-radius: 16px; box-shadow: 0 8px 26px rgba(31, 32, 33, .06); }
.rule-card--1 { left: 29px; top: 0; width: 215px; gap: 4px; }
.rule-card--2 { left: 278px; top: 21px; width: 181px; gap: 12px; padding: 22px 21px; }
.rule-card--3 { left: 0; top: 148px; width: 288px; padding: 20px 21px; }
.rule-card--4 { left: 322px; top: 149px; width: 167px; }
.rule-card svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rule-card__k { font-family: var(--mono); font-size: 11px; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rule-card__v { font-family: var(--display); font-size: 17.5px; font-weight: 400; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); }
.rule-card__v--lg { font-size: 27px; letter-spacing: -.035em; line-height: 1.15; }
.rule-card__m { font-family: var(--mono); font-size: 13px; line-height: 1.4; color: var(--muted-2); }

/* Quote: portrait photo (430×591 in the frame) sets the card height. */
#quote { padding-top: clamp(56px, 6.4vw, 123px); padding-bottom: clamp(40px, 3.125vw, 60px); }
.quote-card__img { aspect-ratio: 430 / 591; height: auto; min-height: 0; object-position: 30% 50%; }
.quote-card blockquote p { text-wrap: pretty; }

/* Integration marks drawn as vectors (Entrata, Google Calendar). */
.ints__mark--svg { border-radius: 0; }
.ints__mark--svg svg { display: block; width: 100%; height: 100%; }

/* --- Product ------------------------------------------------------------- */
/* Tour: 320 list · 80 gap · 920×552 flat stage (r80), no photo or veil.
   The pinned panel is top-aligned like the frame (104 above, 66 below). */
.tour-shot, .tour-acc__stage { aspect-ratio: 5 / 3; background: #f0eeec; container-type: inline-size; }
@media (min-width: 900px) {
  .tour-pin__panel { height: auto; column-gap: clamp(40px, 4.2vw, 80px); align-items: start; padding: min(104px, 10vh) 0 66px; }
}
.tour-screen--1 { left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

/* Setup screen (step 1) — 526×355 at a 920 stage; sized in em off the stage. */
.assist { font-size: max(9.5px, 1.739cqw); width: 32.875em; box-sizing: border-box; padding: 1.125em; background: var(--paper); border: 1px solid #e6e2dd; border-radius: 1em; font-family: var(--sans); color: var(--ink); box-shadow: 0 1.9em 3.75em -1.9em rgba(31, 32, 33, .22); }
.assist p { margin: 0; }
.assist__head { display: flex; align-items: center; gap: .375em; font-size: .9375em; font-weight: 600; line-height: 1.25; }
.assist__head svg { width: 1.2em; height: 1.2em; fill: none; stroke: var(--orange); stroke-width: 1.8; stroke-linejoin: round; }
.assist__q { margin-top: 1.6em !important; font-size: 1.0625em; line-height: 1.2; letter-spacing: -.005em; }
.assist__opts { display: flex; flex-direction: column; gap: .875em; margin-top: 1.8em; }
.assist__opts span { display: flex; align-items: center; height: 2.25em; padding: 0 .75em; background: var(--white); border-radius: .5em; font-size: .78125em; font-weight: 600; }
.assist__opts span { height: 2.88em; }
.assist__foot { display: flex; justify-content: flex-end; gap: .56em; margin-top: 2em; }
.assist__btn { display: inline-flex; align-items: center; height: 2.25em; padding: 0 1em; border-radius: .5em; background: #f2f1ef; font-size: 1em; font-weight: 400; }
.assist__btn--go { background: #3a3a33; color: var(--white); font-size: .9em; font-weight: 500; height: 2.5em; }

/* Standards — frame cells are 24 / 24 / 32. */
@media (min-width: 1120px) { #standard .rule-grid--4 > * { padding: 24px 24px 32px; } }

/* Analytics chart: smooth area traced from the frame; months space-between. */
.chart-x { display: flex; justify-content: space-between; padding: 0 8px; margin-top: 12px; font-size: 12.5px; line-height: 1.3; color: var(--muted-2); }
.panel__cap { margin-top: 24px; }
.line-chart .line-chart__area { transition: opacity 400ms cubic-bezier(0.23, 1, 0.32, 1) 500ms; }
.js .panel:not(.is-in) .line-chart .line-chart__area { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .line-chart .line-chart__area { transition: opacity 200ms ease; } }

/* Close bands without a photo: 490 (Product) / 510 (About, Pricing). */
.close-band--plain .close-band__inner { min-height: min(490px, 80svh); }
.close-band--510 .close-band__inner { min-height: min(510px, 80svh); }

/* --- Renters ------------------------------------------------------------- */
.section--110 { padding-top: clamp(64px, 5.73vw, 110px); padding-bottom: clamp(64px, 5.73vw, 110px); }
#scams { padding-top: clamp(72px, 6.25vw, 120px); padding-bottom: clamp(72px, 6.25vw, 120px); }
.photo-band { display: block; width: 100%; height: auto; aspect-ratio: 1320 / 779; object-fit: cover; border-radius: var(--radius-lg); background: var(--paper-3); }

/* Scams: one vertical rule; a faint horizontal one in the right column only. */
.rule-grid--scams { gap: 0; background: none; }
.rule-grid--scams > * { background: none; }
@media (min-width: 800px) {
  .rule-grid--scams > :nth-child(even) { border-left: 1px solid var(--line-dark); }
  .rule-grid--scams > :nth-child(4) { border-top: 1px solid rgba(255, 255, 255, .035); }
}
@media (max-width: 799px) { .rule-grid--scams > * + * { border-top: 1px solid var(--line-dark); } }

/* Waitlist overlay: the frame has no form on the page, so the form opens
   over it whenever #waitlist is the target — no JS needed. */
.waitlist-modal { position: fixed; inset: 0; z-index: 90; display: none; overflow-y: auto; padding: clamp(12px, 4vw, 48px); }
.waitlist-modal:target { display: grid; }
body:has(.waitlist-modal:target) { overflow: hidden; }
.waitlist-modal__scrim { position: fixed; inset: 0; background: rgba(20, 20, 19, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* Auto margins centre it, and a form taller than the screen still scrolls from its top. */
.waitlist.waitlist--modal { position: relative; width: 100%; max-width: 680px; margin: auto; grid-template-columns: minmax(0, 1fr); }
.waitlist-modal__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; font-size: 24px; line-height: 1; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .waitlist-modal__close:hover { background: var(--paper-2); } }

/* --- About --------------------------------------------------------------- */
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.7vw, 52px); }
.team__card { margin: 0; }
.team__photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--line-2); }
.team__card figcaption { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.team__name { font-family: var(--display); font-size: clamp(21px, 1.42vw, 27px); font-weight: 400; letter-spacing: -.03em; line-height: 1.15; color: var(--ink); }
.team__role { font-size: 15px; line-height: 1.4; color: var(--muted); }


/* ==========================================================================
   Layouts — one stylesheet, four widths
   ≥1680   extra-wide: the Figma 1920 frame. Wrap 1320, gutters 48; every
           fluid value above is at its max, so nothing here overrides it.
   1024+   desktop: the same layout, fluid.
   700–1023 tablet (tuned at 834): burger nav, stacked splits, 2–3-up grids.
   ≤699    mobile (tuned at 390): one column, compact type, stacked cards.
   ========================================================================== */

/* Guardrail collage (489 wide) needs a 490 column; below that it stacks. */
@media (max-width: 1119px) {
  #rules .split { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .rules-copy { padding-top: 0; }
  .rules { justify-self: start; }
}
/* Quote card keeps photo | quote down to tablet. */
@media (min-width: 700px) { .quote-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* --- Tablet ------------------------------------------------------------- */
@media (max-width: 1023px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .stat__d { font-size: 14.5px; }
  .rail { --rail-card: 300px; --rail-gap: 40px; }
  .kpi-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
  .quote-card { gap: 28px; }
  .quote-card blockquote { gap: 28px; }
  .team { gap: 20px; }
  .team__card figcaption { margin-top: 16px; gap: 6px; }
  .team__role { font-size: 14px; }
  .close-band .h2 { font-size: clamp(32px, 6.2vw, 52px); }
  .ints__cat { flex-basis: 180px; }
  .ints__names, .ints__row > p { flex: 1 1 300px; }
}

/* --- Mobile ------------------------------------------------------------- */
@media (max-width: 699px) {
  .stats { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .stat__n { margin-top: 18px; }

  .rail { --rail-card: 272px; --rail-gap: 24px; padding: 32px 0; }
  .rail > li { padding: 0 16px; gap: 28px; }
  .rail__n { font-size: 44px; }
  .rail__body .steps__head h3 { font-size: 23px; }
  .rail__body p { font-size: 15px; line-height: 23px; }

  .notes-pin { --panel-h: 184px; margin-top: 12px; }
  .lic-ghost { width: 90%; height: 64px; border-radius: 18px; transform: translate(-50%, calc(-50% + 16px)); }
  .lic--note { left: 0; margin-left: 0; width: 100%; gap: 14px; padding: 14px 16px; border-radius: 20px; transform: translate3d(0, calc(-50% - 28px), 0) scale(.96); }
  .lic--note.is-on { transform: translate3d(0, -50%, 0) scale(1); }
  .lic--note.is-past { transform: translate3d(0, calc(-50% + 20px), 0) scale(.96); }
  .lic__icon { width: 44px; height: 44px; }
  .lic__icon svg { width: 20px; height: 20px; }
  .lic--note .lic__t { font-size: 16px; line-height: 1.3; }
  .lic--note .lic__s { font-size: 14.5px; line-height: 1.35; }
  .lic--note .lic__d { font-size: 13px; line-height: 1.6; }

  .rules { width: 100%; height: auto; display: flex; flex-direction: column; gap: 12px; }
  .rule-card { position: relative; left: auto; top: auto; width: auto; max-width: 100%; }
  .rule-card--1, .rule-card--3 { align-self: flex-start; }
  .rule-card--2, .rule-card--4 { align-self: flex-end; }
  .rule-card--3 { max-width: 288px; }

  .quote-card { border-radius: 28px; padding: 16px 16px 24px; gap: 24px; }
  .quote-card__img { aspect-ratio: 4 / 3; object-position: 30% 40%; border-radius: 18px; }
  .quote-card blockquote { padding: 0 6px; }
  .quote-card blockquote p { font-size: 27px; }

  .ints__row { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 0; min-height: 0; }
  .ints__cat { flex: none; }
  .ints__names { gap: 12px 20px; }
  .ints__names span { font-size: 19px; line-height: 1.2; letter-spacing: -.02em; }
  .ints__mark { width: 26px; height: 26px; }
  .ints__mark--realpage { width: 24px; height: 20px; }

  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__legal nav { margin-left: 0; gap: 16px; }

  .tour-shot { aspect-ratio: 4 / 3; border-radius: 28px; }
  .tour-acc__item { gap: 20px; }
  .kpi-groups { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .panel__ranges { margin-left: 0; }
  .chart-x { font-size: 11.5px; padding: 0 2px; }

  #scams { padding-top: clamp(72px, 6.25vw, 120px); padding-bottom: clamp(72px, 6.25vw, 120px); }
.photo-band { aspect-ratio: 4 / 3; object-position: 30% 50%; border-radius: 18px; }
  .waitlist-modal { padding: 10px; }
  .waitlist-modal__close { top: 8px; right: 8px; }

  .team { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .team__card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center; }
  .team__card figcaption { margin-top: 0; }
  .team__name { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .lic--note, .lic--note.is-on, .lic--note.is-past { transform: translate3d(0, -50%, 0); }
}


/* ==========================================================================
   Text appear — 2026-09-22 (after wonderful.ai's text treatment)
   Headings arrive word by word; the copy under them follows as whole blocks,
   so the eye lands on the heading first, then the line that explains it.
   tallo.js marks targets [data-ap] and adds .ap-in once each is 12% into
   view; targets entering together play in reading order (a heading holds the
   next block back until most of its words are in). Opacity + the individual
   translate property (never fights a component's own transform), ease-out
   cubic-bezier(0.23, 1, 0.32, 1), 850ms — marketing budget, plays once.
   Without JS nothing is marked, so nothing is hidden.
   ========================================================================== */
@keyframes ap-rise { from { opacity: 0; translate: 0 var(--ap-y, 16px); } }
@keyframes ap-fade { from { opacity: 0; } }
.js [data-ap]:not(.ap-split):not(.ap-in), .js .ap-split:not(.ap-in) .ap-w { opacity: 0; }
[data-ap].ap-in:not(.ap-split) { animation: ap-rise 850ms cubic-bezier(0.23, 1, 0.32, 1) var(--ap-d, 0ms) backwards; }
.ap-w { display: inline-block; --ap-y: .32em; }
.ap-split.ap-in .ap-w { animation: ap-rise 850ms cubic-bezier(0.23, 1, 0.32, 1) calc(var(--ap-d, 0ms) + var(--wi, 0) * 45ms) backwards; }
.ap-now, .ap-now .ap-w { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  /* Opacity only, and !important to step past the global kill switch above:
     the fade still paces the reading order, nothing moves. */
  [data-ap].ap-in:not(.ap-split), .ap-split.ap-in .ap-w { animation-name: ap-fade; animation-duration: 400ms !important; }
}
/* Hero load-in: the same treatment, played once as the page opens —
   eyebrow, headline word by word, then the copy and buttons beside it.
   Hidden from first paint (each page sets .js inline in <head>); if tallo.js
   never runs, this timer shows the text after 1.5s anyway. */
@keyframes ap-show { to { opacity: 1; } }
.js :is(.hero__inner, #top) :is(.eyebrow, h1, p, .btn):not(.ap-in) { opacity: 0; animation: ap-show 0s 1.5s forwards; }
@media print {
  .js [data-ap], .js .ap-w, .js :is(.hero__inner, #top) :is(.eyebrow, h1, p, .btn) { opacity: 1 !important; animation: none !important; }
}


/* ==========================================================================
   Phone + tablet pass — 2026-09-23 (after wonderful.ai's small-screen layouts)
   Their phone and tablet layouts are composed, not shrunk: bigger, tighter
   headlines, portrait crops, and fewer things per screen. Same content here,
   just more air around it.
   ========================================================================== */
@media (max-width: 1023px) {
  :root {
    --fs-h2: clamp(34px, 5.2vw, 46px);
    --fs-h2-sm: clamp(30px, 4.6vw, 40px);
    --block: clamp(88px, 12vw, 112px);
    --block-sm: clamp(80px, 11vw, 104px);
  }
  /* One headline scale for small screens. The desktop sizes set inline per
     Figma frame would otherwise stay small here; tour steps, closing bands
     and the waitlist form keep their own sizes. */
  main .section .h2:not(.on-dark):not(.tour-acc__btn .h2) { font-size: var(--fs-h2) !important; letter-spacing: -.05em !important; line-height: 1.04 !important; }
  main .section .h2--sm { font-size: var(--fs-h2-sm) !important; letter-spacing: -.05em !important; line-height: 1.06 !important; }
  .reveal { font-size: clamp(38px, 6.4vw, 56px); line-height: 1.04; }
  .section--sm, .section--110 { padding-top: var(--block-sm); padding-bottom: var(--block-sm); }
  .team__photo { aspect-ratio: 4 / 5; }
}
@media (max-width: 699px) {
  :root { --gut: 24px; }
  /* Portrait crop, same framing as the desktop card. */
  .quote-card__img { aspect-ratio: 4 / 5; object-position: 30% 50%; }
  /* Team: one portrait card per screen, the next one peeking in. */
  .team { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
  .team::-webkit-scrollbar { display: none; }
  .team__card { display: block; scroll-snap-align: start; }
  .team__card figcaption { margin-top: 16px; gap: 6px; }
  .team__name { font-size: 24px; }
}


/* Filled boxes never fade their own fill: a half-transparent black box over
   white reads as a white box turning black (a white one on dark, the
   reverse). Grid cells keep their fill and bring their contents in; the dark
   pricing tier opens upward. Buttons fade in whole, in place — no rise. */
.btn[data-ap].ap-in:not(.ap-split) { animation-name: ap-fade; }
.js .rule-grid > [data-ap]:not(.ap-split):not(.ap-in) { opacity: 1; }
.js .rule-grid > [data-ap]:not(.ap-split):not(.ap-in) > * { opacity: 0; }
.rule-grid > [data-ap].ap-in:not(.ap-split) { animation: none; }
.rule-grid > [data-ap].ap-in:not(.ap-split) > * { animation: ap-rise 850ms cubic-bezier(0.23, 1, 0.32, 1) var(--ap-d, 0ms) backwards; }
.rule-grid > .ap-now > * { animation: none !important; }
.tier--dark { clip-path: inset(0 0 0 0); transition: clip-path 400ms cubic-bezier(0.23, 1, 0.32, 1), transform 400ms cubic-bezier(0.23, 1, 0.32, 1); }
.js .tiers:not(.is-in) .tier--dark { opacity: 1; clip-path: inset(100% 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .rule-grid > [data-ap].ap-in:not(.ap-split) > * { animation-name: ap-fade; animation-duration: 400ms !important; }
}
@media print {
  .js .tiers .tier--dark { clip-path: none !important; }
  .js .rule-grid > [data-ap] > * { opacity: 1 !important; animation: none !important; }
}

/* ==========================================================================
   Figma sync — 2026-09-28 (latest 1920w frames): shared chrome
   Header (1669:5751 light / 1668:4434 dark), closing bands (1426:4047,
   1675:5817, 1702:8878, 1702:8868, 1675:5785) and footer (1426:3996).
   Appended last on purpose: everything here is a refinement of the rules
   above, and the mobile/tablet rules it touches are re-scoped below.
   ========================================================================== */

/* --- Header --------------------------------------------------------------
   Frosted light bar: rgba(251,250,249,.18), blur 9, white/.2 hairline, r16,
   0 8 26 / .08. Ink by default, white over dark grounds (.nav--light, set by
   the scroll probe in tallo.js — unchanged). */
.nav__bar { backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.nav__links { gap: clamp(18px, 2.4vw, 34px); }
/* Dark glass bar over the paper heroes (Pricing, About): rgba(24,24,23,.66),
   blur 7, white/.14 hairline, 0 8 26 / .18, white text on every ground.
   .nav--dark is set in the page markup; tallo.js still toggles .nav--light on
   scroll, which resolves to the same white here, so nothing flips. */
.nav--dark .nav__bar {
  background: rgba(24, 24, 23, .66);
  border-color: rgba(255, 255, 255, .14);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow: 0 8px 26px rgba(20, 20, 19, .18);
  color: var(--white);
}

/* --- Closing band ---------------------------------------------------------
   Layers, bottom to top: photo (.close-band__img) → radial mesh, blur 14,
   drifting (.hero__mesh--close) → scrim (.hero__scrim--close, ends solid
   #1b1b1a so it hands off into the footer) → centred copy. 600 tall; Home is
   the 940 variant. The photo treatment is per page (see the modifiers). */
.close-band { background: var(--dark); }
.close-band__inner { min-height: min(600px, 80svh); gap: 32px; padding: 80px var(--gut); }
.close-band--tall .close-band__inner { min-height: min(940px, 100svh); }
/* Geist Light 74 / 75.48, -3.7px; two lines set with <br>. */
.close-band .h2 { font-family: var(--display); font-weight: 300; font-size: clamp(32px, 5vw, 74px); letter-spacing: -.05em; line-height: 1.02; max-width: none; text-wrap: balance; }
.close-band--lh4 .h2 { line-height: 1.04; }
.close-band--68 .h2 { font-size: clamp(30px, 4.6vw, 68px); line-height: 1.04; }

/* Mesh: the three Figma radials on a 2880×900 canvas (inset -25%), blur 14,
   full opacity; the drift animation from .hero__mesh--close stays. */
.close-band .hero__mesh--close {
  opacity: 1;
  filter: blur(14px);
  background:
    radial-gradient(40% 44% at 26% 36%, rgba(248, 106, 34, .38), transparent 66%),
    radial-gradient(38% 42% at 72% 60%, rgba(206, 148, 102, .30), transparent 68%),
    radial-gradient(46% 48% at 50% 96%, rgba(110, 102, 94, .42), transparent 70%);
}
/* Pricing and Renters: the orange radial at half strength. */
.close-band--mesh-soft .hero__mesh--close {
  background:
    radial-gradient(40% 44% at 26% 36%, rgba(248, 106, 34, .19), transparent 66%),
    radial-gradient(38% 42% at 72% 60%, rgba(206, 148, 102, .30), transparent 68%),
    radial-gradient(46% 48% at 50% 96%, rgba(110, 102, 94, .42), transparent 70%);
}
/* Scrim A (Home, Pricing, Renters) is .hero__scrim--close as defined above.
   Scrim B (Product, About) fades out sooner and leaves the photo lighter. */
.close-band--scrim-b .hero__scrim--close {
  background: linear-gradient(to top, #1b1b1a 0%, rgba(27, 27, 26, .94) 8.63%, rgba(20, 20, 19, .74) 23.02%, rgba(20, 20, 19, .12) 83.43%, rgba(20, 20, 19, .03) 143.85%);
}

/* Photos. Home: sharp, top-anchored (the 3:2 frame runs past the bottom).
   The others are blurred in Figma: Product / About blur 30 and overscan
   past the band so the blur has no edge; Pricing / Renters blur 20 at the
   band's own bounds over the paper ground, as drawn. */
.close-band__img { object-position: 50% 0; }
.close-band__img--blur { filter: blur(30px); object-position: 50% 100%; }
.close-band--product .close-band__img { inset: -25.02% -5.31% -21.18% -13.18%; width: auto; height: auto; opacity: .8; }
.close-band--about .close-band__img { inset: -.03% 0 -21.13% 0; width: auto; height: auto; }
.close-band--pricing, .close-band--renters { background: var(--paper); }
.close-band--pricing .close-band__img, .close-band--renters .close-band__img { filter: blur(20px); }
.close-band--pricing .close-band__img { object-position: 50% 50%; }
/* .close-band--plain / --510 (no-photo bands) are no longer used in the
   markup; their rules above are inert. */

/* --- Footer ---------------------------------------------------------------
   1320 wrap at x300: brand 416 | 277.33 | 277.33 | 277.34, gap 24, 64 under.
   Brand: mark 97×29, 20 gap, copy 14/21 at 229.63 wide, 20 gap, white pill
   12×20 r12. Legal hairline at y296; giant mark inset 48, 1824×540, cut at
   86.7% — both already match. */
@media (min-width: 700px) {
  .footer__grid { grid-template-columns: minmax(0, 416fr) minmax(0, 277.33fr) minmax(0, 277.33fr) minmax(0, 277.34fr); gap: 24px; padding-bottom: 64px; }
}
.footer__brand p { margin-top: 20px; max-width: 230px; }
.footer__brand .btn { margin-top: 20px; min-height: 0; padding: 12px 20px; border-radius: 12px; font-size: 14.5px; letter-spacing: -.01em; line-height: 1.2; }
.footer__mail { margin-top: 14px; }

/* --- Tablet / mobile ------------------------------------------------------ */
@media (max-width: 1023px) {
  .close-band .h2 { font-size: clamp(32px, 6.2vw, 52px); }
  .close-band--68 .h2 { font-size: clamp(30px, 5.8vw, 48px); }
  .close-band__inner { min-height: min(560px, 80svh); }
  .close-band--tall .close-band__inner { min-height: min(720px, 100svh); }
}
@media (max-width: 699px) {
  /* Let the headline wrap on its own; the desktop line break is too wide. */
  .close-band .h2 br { display: none; }
  .close-band__inner { min-height: min(480px, 80svh); padding: 72px var(--gut); }
  .close-band--tall .close-band__inner { min-height: min(600px, 100svh); }
  /* Lighter blur on phones: the band is a fifth of the pixels, the halo
     would otherwise swallow it. */
  .close-band__img--blur { filter: blur(18px); }
  .close-band--pricing .close-band__img, .close-band--renters .close-band__img { filter: blur(12px); }
  .footer__brand p { max-width: 26ch; }
}


/* ==========================================================================
   Figma sync — 2026-09-28: about (page frame 1577:7881, "1920w light")
   Hero 1577:7884 · story 1577:7890 · lines 1577:7914 · team 1577:8063.
   Everything below is page-scoped (#top on this page only via about.html's
   ids) and hits its Figma value from 1680 up; the fluid layer takes over
   below that and the tablet / mobile rules further down still apply.
   ========================================================================== */

/* --- Hero (632 tall): eyebrow 11/1.54, 40 to the h1; h1 Geist Light 92/92,
   tracking -4.784 (-.052em), 1150 wide. The frame breaks after "focus", not
   balanced, so the explicit break carries the line and balance is off. */
#top .display { font-size: clamp(38px, 5.48vw, 92px); letter-spacing: -.052em; max-width: 1150px; text-wrap: initial; }
@media (max-width: 1023px) { #top .br-d { display: none; } }

/* --- Story: right column 696 → 1320 (624 wide). Type already matches
   (27/35.64 lead, 18/29.16 body, 34/40.8 pull, 11.5/18.4 note). */

/* --- Three lines: cells 439.33 × 289.36, 32 sides, 36 top, 44 under the
   tallest body; 15 under the numeral, 17 under the h3 (29/33, -1.015);
   body 16.5/26 white 74% fills the 375 cell measure. */
#lines .rule-grid > * { gap: 15px; padding-bottom: clamp(30px, 3.2vw, 44px); }
#lines .rule-grid .h3 { line-height: 33px; margin-bottom: 2px; }
@media (min-width: 960px) { #lines .rule-grid > * > p { max-width: none; } }

/* --- Team (section#know): white ground, 405.33 squares at a 52 gap, 24 to
   the caption; name Geist 26/29.9 (-0.78), role Inter 16.5/26 in ink-soft. */
#team { background: var(--white); }
.team { gap: clamp(20px, 2.71vw, 52px); }
.team__card figcaption { margin-top: 24px; }
.team__name { font-size: clamp(21px, 1.36vw, 26px); }
.team__role { font-size: 16.5px; line-height: 26px; color: var(--ink-soft); }
@media (max-width: 1023px) { .team__role { font-size: 15px; line-height: 1.5; } }


/* ==========================================================================
   Figma sync — 2026-09-28: pricing (frame 1668:4187, "1920w light")
   Hero 1668:4773 · plans 1668:4202 · add-ons 1668:4316 · proof 1668:4331.
   Every rule is page-scoped (#top.hero--pricing, #plans, #addons, #proof).
   The dark glass header over the paper hero is the shared .nav--dark; the
   hero keeps .hero so the load-in and the scroll probe in tallo.js are
   untouched (over .nav--dark the probe's colour flip resolves to white).
   ========================================================================== */

/* --- Hero: paper ground, no mesh. 540 tall at 1920 = 220 top, 14 eyebrow,
   26 gap, two 92px lines, 96 bottom. Wrap 1320 at x300: 874 headline | 26 |
   420 copy, bottom-aligned. The inner box grows by the gutters so the copy
   sits on the 1320 wrap like the sections below it. */
#top.hero--pricing { background: var(--paper); color: var(--ink); }
#top.hero--pricing .hero__inner {
  max-width: calc(var(--maxw) + 2 * var(--gut));
  padding-top: clamp(140px, 11.46vw, 220px);
  padding-bottom: clamp(56px, 5vw, 96px);
  gap: 26px;
}
@media (min-width: 900px) { #top.hero--pricing .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); } }
#top.hero--pricing .eyebrow { color: var(--muted); }
/* Geist Light 92 / 92, -4.784px. */
#top.hero--pricing .display { font-size: clamp(38px, 4.79vw, 92px); letter-spacing: -.052em; line-height: 1; color: var(--ink); }
#top.hero--pricing .hero__aside { max-width: 420px; gap: 24px; }
/* Inter 18 / 29.16, no tracking, ink-soft. */
#top.hero--pricing .hero__aside p { font-size: 18px; line-height: 1.62; letter-spacing: 0; color: var(--ink-soft); }
/* Pill: 13 / 20 inset, 15px, r12 → 44 tall. */
#top.hero--pricing .btn { min-height: 0; padding: 13px 20px; line-height: 1.2; letter-spacing: -.01em; border-radius: 12px; }

/* --- Plans: the tier table already carries the frame (300 head, 38 / 32
   inset, 30 / 33 name, 76 / 65.36 numeral, 3-up features at 24 × 14, notes
   11.5 / 18.4). Nudges only. */
#plans .tier__for { margin-top: 5px; }
#plans .tier__currency { color: #a04413; }
#plans .tier--dark .tier__currency { color: var(--orange); }
#plans .tier__terms { max-width: 246px; margin-top: 13px; }
#plans .tier .btn { min-height: 0; padding: 13px 20px; line-height: 1.2; border-radius: 12px; }

/* --- Add-ons: 110 vertical, h2 Geist Light 54 / 56.16 (-2.43px), 48 to the
   hairline grid; cells 33 / 30 / 38, h3 Geist 26 / 29.9, copy 16.5 / 26. */
#addons { padding-top: clamp(64px, 5.73vw, 110px); padding-bottom: clamp(64px, 5.73vw, 110px); }
#addons .h2 { font-size: clamp(30px, 2.8125vw, 54px); letter-spacing: -.045em; line-height: 1.04; }
#addons .rule-grid > * { padding: 33px 30px 38px; }
#addons .h4 { font-size: clamp(22px, 1.354vw, 26px); letter-spacing: -.03em; line-height: 1.15; }

/* --- Proof: white ground, 110 vertical, three columns at 48; hairline, 21
   to the quote (Geist Light 27 / 32.94), 19 to the name. */
#proof { padding-top: clamp(64px, 5.73vw, 110px); padding-bottom: clamp(64px, 5.73vw, 110px); }
#proof .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
#proof .quotes p { margin-top: 21px; }
#proof .quotes footer { margin-top: 19px; }

/* --- Tablet / mobile ------------------------------------------------------ */
@media (max-width: 1023px) {
  /* Hand the vertical rhythm back to the small-screen pass. */
  #addons, #proof { padding-top: var(--block-sm); padding-bottom: var(--block-sm); }
  #proof .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
}
@media (max-width: 699px) {
  #top.hero--pricing .hero__inner { padding-top: 128px; padding-bottom: 56px; gap: 28px; }
  #top.hero--pricing .display { font-size: clamp(38px, 11vw, 46px); }
  #proof .quotes { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
/* Pin the cell line boxes to the frame (numeral 14, body 26) so the cell
   lands on 289 rather than drifting a pixel per line; caption 64.89. */
#lines .rule-grid > * > span { line-height: 14px; }
#lines .rule-grid > * > p { line-height: 26px; }
.team__name { padding-bottom: 1px; }

/* Figma sync — 2026-09-28: pricing, addendum. Chrome sets Inter ~5% wider
   than the Figma render, so the hero copy gets 8px of slack past the 420
   column to keep the frame's three line breaks ("…charge per unit /
   per month, …"); it ends at 1628, still inside the gutter. */
#top.hero--pricing .hero__aside p { width: calc(100% + 8px); max-width: none; }
@media (max-width: 899px) { #top.hero--pricing .hero__aside p { width: auto; } }
/* The desktop team values above sit later in the cascade than the tablet /
   mobile layer, so restate that layer's team values here. */
@media (max-width: 1023px) { .team { gap: 20px; } .team__card figcaption { margin-top: 16px; } }
@media (max-width: 699px) { .team { gap: 16px; } .team__name { font-size: 24px; } }


/* ==========================================================================
   Figma sync — 2026-09-28: home (page frame 1426:3722, "1920w light")
   Hero 1669:5735 · stats 1426:3725 · manifesto 1426:3889 · pricing
   1426:3751 · how-it-works 1426:4511 (card 1558:7228) · guardrails
   1550:6266 · quote 1426:4232 · integrations 1426:3814. Page-scoped through
   the section ids in index.html; every value lands at 1680+, the fluid layer
   takes over below, and the tablet / mobile rules are re-scoped at the end.
   Motion hooks (.nav probe, [data-reveal], .rail, #notes-track, .is-in,
   [data-ap]) are untouched.
   ========================================================================== */

/* --- Hero (924 tall) --------------------------------------------------------
   Layers: photo (2400×1342, top-anchored: at 1920 it runs 16% past the band)
   → grey ramp .7 → .27 → .13 → radial mesh at .6, blur 15 (two Figma radials
   on a 2880×1386 canvas, so inset -25%). Copy sits on a 1740 wrap (90
   gutters), 190 above, 84 below: h1 Geist Light 88/89.76, -4.4 (-.05em) at
   821 wide left; 420 column right with 17/26.35 copy and the white CTA. */
#top.hero--home { height: min(48.125vw, 100svh); min-height: 640px; }
#top.hero--home .hero__img { object-position: 50% 0; }
#top.hero--home .hero__tint { background: linear-gradient(to top, rgba(81, 81, 81, .7) 4%, rgba(90, 90, 90, .27) 48%, rgba(225, 225, 225, .13)); }
.hero__mesh--home {
  opacity: .6;
  filter: blur(15px);
  background:
    radial-gradient(40% 44% at 20% 30%, rgba(248, 106, 34, .32), transparent 66%),
    radial-gradient(38% 42% at 76% 60%, rgba(206, 150, 102, .28), transparent 68%);
}
#top.hero--home .hero__inner {
  padding-inline: clamp(20px, 4.6875vw, 90px);
  padding-top: clamp(116px, 9.9vw, 190px);
  padding-bottom: clamp(46px, 4.375vw, 84px);
  gap: 40px;
}
/* About's shared-chrome block sets #top .display to 92; the home frame is 88. */
#top.hero--home .display { font-size: clamp(38px, 4.583vw, 88px); letter-spacing: -.05em; line-height: 1.02; max-width: 821px; text-wrap: initial; }
@media (max-width: 1023px) { #top.hero--home .br-d { display: none; } }
#top.hero--home .hero__aside { max-width: 420px; gap: 24px; }
#top.hero--home .hero__aside p { font-size: 17px; line-height: 26.35px; letter-spacing: -.17px; color: rgba(255, 255, 255, .9); }
#top.hero--home .hero__aside .btn { min-height: 46px; padding: 14px 22px; font-size: 15px; letter-spacing: -.15px; line-height: 18px; }

/* --- Stats: 3 × 413.33 at a 40 gap; rule → 22 → 52/52 numeral → 16 → 19/23.75
   title → 8 → 15/24 copy at 321.73. Already matched; the measure is pinned. */
.stats .stat__d { max-width: 322px; }

/* --- Manifesto: 132 padding; 66/71.28 headline (.reveal, unchanged), 30 to
   the 17.5/28.35 copy at 671 wide, 30 to the dark CTA. */
.section--manifesto .lead { max-width: 672px; line-height: 28.35px; }

/* --- Pricing (section#pricing): x 50.5, 1819 wide, r80, 128 / 200 inset,
   two 628 columns at a 64 gap, no run-out below (the frame butts into #how). */
#pricing { margin-inline: clamp(12px, 2.63vw, 50.5px); margin-bottom: 0; }
#pricing .lead { line-height: 28px; max-width: 508px; }
#pricing .eyebrow { color: rgba(255, 255, 255, .4); letter-spacing: 1.26px; }
#pricing .figure { margin-top: 21.5px !important; padding-bottom: 6px; }
#pricing .figure__unit { color: #f86a22; }
#pricing .ticks span.is-accent { background: #f86a22; }
#pricing .ticks { margin-top: 20px; }

/* --- How it works (section#how): 128 padding, 58/60.32 h2 at 839.61,
   21 to the 17.5/28.35 copy at 772.8, 15 to the rail. */
#how { padding-bottom: 0; }
#how > .wrap > .lead { margin-top: 21px !important; max-width: 773px; line-height: 28.35px; }
#how .rail-wrap { margin-top: 15px; }
#how .rail { padding: 40px 0 0; }
/* Cards 300 wide at a 113 gap (pitch 413), 26 inset on the left only;
   marker row 18 tall, 40 to the body; body 56/56 numeral → 7 → 27/31 title
   with the 10.5/.945 owner tag at a 12 gap → 7 → 15.5/24 copy. */
#how .rail {
  --rail-gap: clamp(32px, calc(var(--wrap-w) * .0856), 113px);
  --rail-card: max(260px, calc(var(--wrap-w) * .2273));
}
#how .rail > li { padding: 0 0 0 26px; gap: 40px; min-height: 279px; } /* card 06 runs five lines in the frame */
#how .rail__body { gap: 7px; }
#how .rail__body .steps__head { gap: 0 12px; }
#how .rail__body .steps__head h3 { font-size: 27px; line-height: 31px; letter-spacing: -.945px; }
#how .rail__body p { font-size: 15.5px; line-height: 24px; max-width: none; }
#how .steps__owner { font-size: 10.5px; letter-spacing: .945px; color: #a04413; }
#how .steps__owner--both { color: #5d5a55; }
#how .steps__owner--team { color: var(--ink); }
/* Marker: 20px disc #f1f0f0 centred on x 9, an 8px r2.5 orange core, and the
   hairline from the core to the next card's core (gap + 26 + 9). */
#how .rail__dot::before { left: 9px; top: 8.5px; right: calc(-1 * (var(--rail-gap) + 35px)); height: 1px; background: #f1f0f0; }
#how .rail__dot::after { left: -1px; top: -1px; width: 20px; height: 20px; background: #f1f0f0; box-shadow: none; }
#how .rail__dot i { position: absolute; left: 5px; top: 5px; width: 8px; height: 8px; border-radius: 2.5px; background: #f86a22; z-index: 1; }
/* Right-edge fade: 272 wide, solid from 42% (Figma Rectangle 240648303). */
#how .rail-wrap::after { width: clamp(80px, 14.2vw, 272px); background: linear-gradient(90deg, rgba(255, 255, 255, 0) .4%, #fff 42.3%); }
/* Dots row: 20 above and below the 46×8 pair. */
#how .rail__dots { padding: 20px 0; }

/* Notification stack: a 750 frame right after the dots; the card centre sits
   30 above the frame's middle. Card 720 wide, 29.24 padding, r29.24, #f4f4f4
   with a #e4e1e1 hairline and no shadow; 70 disc #e2ecf3 with a 38.9 icon,
   17 gap; Inter 25.52/34.03 title (500, #2b2b2c) and address (#696a62), date
   22/34.03 #84857c. Ghost: 635 × 117.6, r25.8, #f4f4f4 at .8, 34 lower. */
#how .notes-pin { --panel-h: clamp(440px, 39vw, 750px); margin-top: 0; }
#how .stage--notes { top: -30px; }
#how .lic--note { padding: 28.24px; border-radius: 29.24px; border-color: #e4e1e1; box-shadow: none; gap: 17px; }
#how .lic__icon svg { width: 38.89px; height: 38.89px; stroke-width: 3.11; }
#how .lic--note[data-note="1"] .lic__icon svg { stroke-width: 3.11; color: #3387c4; }
#how .lic__main { gap: 0; }
#how .lic--note .lic__t { font-size: 25.52px; line-height: 34.03px; letter-spacing: 0; color: #2b2b2c; }
#how .lic--note .lic__s { font-size: 25.52px; line-height: 34.03px; color: #696a62; }
#how .lic--note .lic__d { font-size: 22px; line-height: 34.03px; color: #84857c; }
#how .lic-ghost { width: min(635px, 88%); height: 117.6px; border: 0; border-radius: 25.8px; background: #f4f4f4; opacity: .8; box-shadow: 0 6.45px 32.24px rgba(43, 43, 44, .06); transform: translate(-50%, calc(-50% + 34px)); }

/* --- Guardrails (section#rules): 124 padding; 46/48.76 h2, 19 to the
   17.5/28.35 copy at 574, 26 to the CTA. Collage 489.6 × 275 flush right,
   19 above the copy's top; cards r18, 0 10 26 / .08, 18 / 22 / 20 inset. */
#rules { padding-top: clamp(72px, 6.46vw, 124px); padding-bottom: clamp(64px, 6.46vw, 124px); }
#rules .rules-copy { padding-top: 0; }
#rules > .wrap { min-height: 393px; } /* the frame keeps 393 under its 124 inset */
#rules .rules-copy .lead { margin-top: 19px !important; max-width: 574px; line-height: 28.35px; }
#rules .rules { width: 490px; margin-top: -19px; }
#rules .rule-card { padding: 18px 22px 20px; border-radius: 18px; box-shadow: 0 10px 26px rgba(0, 0, 0, .08); gap: 5px; }
#rules .rule-card--1 { width: 215px; height: 109px; gap: 5px; }
#rules .rule-card--1 .rule-card__m { margin-top: -1px; }
#rules .rule-card--2 { left: 278px; top: 21px; width: 181px; gap: 10px; }
#rules .rule-card--3 { width: 288px; gap: 10px; }
#rules .rule-card--4 { left: 321.6px; top: 148.3px; width: 168px; }
#rules .rule-card svg { width: 26px; height: 26px; stroke: #14110d; stroke-width: 1.8; }
#rules .rule-card__k { font-size: 11px; line-height: 14px; letter-spacing: 1.1px; color: #696a62; }
#rules .rule-card__v { font-size: 18px; line-height: 21.6px; letter-spacing: -.45px; color: #2b2b2c; }
#rules .rule-card__v--lg { font-size: 27px; line-height: 31.32px; letter-spacing: -.945px; color: var(--ink); }
#rules .rule-card__m { font-size: 13px; line-height: 17px; color: #989b9c; }

/* --- Quote (section): 120 padding; card 1000 × 673, r80, 40 inset, 60 gap;
   portrait 430 × 593 r40 (mirrored), 40/48 quote, footer at the base. */
#quote { padding-top: clamp(56px, 6.25vw, 120px); padding-bottom: clamp(56px, 6.25vw, 120px); }
#quote .quote-card__img { aspect-ratio: 430 / 593; object-position: 31.6% 50%; }
#quote .quote-card blockquote p { line-height: 1.2; letter-spacing: -.056em; }

/* --- Integrations (section#about in the frame): 128 padding; h2 58/60.32
   at 572, copy column from 688 (618 wide, 17 between paragraphs), 56 to the
   ledger. Rows 80.59 tall, category track 262, marks 32 at an 8 gap, names
   23/27.6 at a 28 gap; the last row is 108.69 with 26 above the copy. */
#integrations .split .lead { max-width: 618px; line-height: 28.35px; }
#integrations .stack { gap: 17px; }
#integrations .ints__row { column-gap: 0; min-height: 80.59px; padding: 0; align-items: center; }
#integrations .ints__cat { flex: 0 0 262px; letter-spacing: 1.54px; }
#integrations .ints__names { gap: 12px 28px; }
#integrations .ints__row:last-child { min-height: 108.69px; padding: 26px 0; align-items: flex-start; }
#integrations .ints__row:last-child .ints__cat { padding-top: 9px; }
#integrations .ints__row:last-child .lead { max-width: 618px; line-height: 28.35px; }
/* Marks, each at its Figma box. Bitmaps: Yardi / Outlook fill the 32 square,
   RealPage fits to the bottom, AppFolio and Trulia sit inset as the frame
   crops them, Buildium is a 30 disc. Vectors: 32 (Rent Manager 32 × 31.1,
   Google Calendar 27.9 × 30 on a #d6d6d6 pill). */
#integrations .ints__mark { border-radius: 0; background: none; }
#integrations .ints__mark img { object-fit: cover; }
#integrations .ints__mark--yardi img { transform: none; object-position: 50% 100%; }
#integrations .ints__mark--realpage { width: 32px; height: 32px; }
#integrations .ints__mark--realpage img { object-fit: contain; object-position: 50% 100%; }
#integrations .ints__mark--appfolio img { width: 93.35%; height: 93.35%; margin: 3.1% 0 0 4.29%; object-fit: contain; }
#integrations .ints__mark--trulia img { width: 88.15%; height: 88.15%; margin: 7.1% 0 0 5.93%; object-fit: contain; }
#integrations .ints__mark--buildium img { width: 30px; height: 30px; margin: 1px 0 0 .68px; border-radius: 50%; }
#integrations .ints__mark--svg img { width: 100%; height: 100%; object-fit: contain; }
#integrations .ints__mark--rent-manager { height: 31.135px; }
#integrations .ints__mark--gcal { width: 27.917px; height: 30px; border-radius: 999px; background: #d6d6d6; }

/* --- Tablet / mobile -------------------------------------------------------- */
@media (max-width: 1119px) {
  #rules .rules { margin-top: 0; }
}
@media (max-width: 1023px) {
  #top.hero--home { height: auto; min-height: 0; }
  #top.hero--home .hero__inner { min-height: min(720px, 100svh); }
  #top.hero--home .hero__img { object-position: 60% 0; }
  #top.hero--home .display { font-size: clamp(38px, 6.4vw, 64px); max-width: 12ch; }
  #how .rail { --rail-card: 300px; --rail-gap: 60px; }
  #how .notes-pin { --panel-h: clamp(360px, 46vw, 520px); }
  #integrations .ints__cat { flex-basis: 180px; }
  #integrations .ints__row { column-gap: 32px; }
  #integrations .ints__row:last-child { min-height: 0; padding: 24px 0; }
  #integrations .ints__row:last-child .ints__cat { padding-top: 0; }
}
@media (max-width: 699px) {
  #top.hero--home .hero__inner { min-height: min(640px, 100svh); }
  #top.hero--home .hero__img { object-position: 62% 0; }
  #top.hero--home .display { font-size: clamp(38px, 11vw, 48px); max-width: none; }
  #how .rail { --rail-card: 272px; --rail-gap: 24px; padding: 32px 0 0; }
  #how .rail > li { padding: 0 0 0 16px; gap: 28px; }
  #how .rail__dot::before { right: calc(-1 * (var(--rail-gap) + 25px)); }
  #how .rail__body .steps__head h3 { font-size: 23px; line-height: 1.2; }
  #how .rail__body p { font-size: 15px; line-height: 23px; }
  #how .notes-pin { --panel-h: 200px; }
  #how .stage--notes { top: 0; }
  #how .lic--note { padding: 14px 16px; border-radius: 20px; gap: 14px; }
  #how .lic__icon svg { width: 22px; height: 22px; }
  #how .lic--note .lic__t { font-size: 16px; line-height: 1.3; }
  #how .lic--note .lic__s { font-size: 14.5px; line-height: 1.35; }
  #how .lic--note .lic__d { font-size: 13px; line-height: 1.6; }
  #how .lic-ghost { width: 90%; height: 64px; border-radius: 18px; transform: translate(-50%, calc(-50% + 16px)); }
  #rules .rules { width: 100%; }
  #rules .rule-card, #rules .rule-card--1, #rules .rule-card--2, #rules .rule-card--4 { left: auto; top: auto; width: auto; height: auto; }
  #rules .rule-card--3 { max-width: 288px; }
  #quote .quote-card__img { aspect-ratio: 4 / 5; }
  #integrations .ints__row, #integrations .ints__row:last-child { flex-direction: column; align-items: flex-start; gap: 14px; min-height: 0; padding: 20px 0; }
  #integrations .ints__names, #integrations .ints__row > p { flex: none; width: 100%; }
  #integrations .ints__cat { flex: none; }
  #integrations .ints__mark, #integrations .ints__mark--realpage { width: 26px; height: 26px; }
  #integrations .ints__mark--buildium img { width: 24px; height: 24px; margin: 1px; }
  #integrations .ints__mark--rent-manager { height: 25.3px; }
  #integrations .ints__mark--gcal { width: 22.7px; height: 24.4px; }
}


/* ==========================================================================
   Figma sync — 2026-09-28: renters
   Page frame 1573:7533 ("1920w light"): hero 1668:4151, what 1573:7536,
   know 1573:7545, scams 1573:7567, lock-screen band 1696:8664, programs
   1573:7672, faq 1573:7683. Header, closing band and footer are the shared
   chrome block above. Scoped to this page (.hero--renters and section ids);
   the entrances and text-appear hooks are untouched.
   ========================================================================== */

/* --- Hero (1668:4151) -----------------------------------------------------
   1920×760 photo of a house; a grey ramp then the orange/tan mesh over it;
   eyebrow + headline and, 56 below, copy + CTA, stacked bottom-left on the
   1320 wrap (x300, 190 above, 84 below). */
.hero--renters { background: #c9c4c0; }
/* The frame's photo is 141% tall from -9.86%: cover sizes it the same at
   1920 (1071 tall), 24% pulls the same 75px crop. */
.hero--renters .hero__img { object-position: 50% 24%; }
.hero__tint--renters { background: linear-gradient(to top, rgba(81, 81, 81, .79) 4%, rgba(90, 90, 90, .31) 48%, rgba(225, 225, 225, .14)); }
/* Mesh: the frame's two radials (no dark third one) on the same -25% canvas,
   blur 15 at 60%; the drift from .hero__mesh stays. */
.hero--renters .hero__mesh {
  opacity: .6;
  filter: blur(15px);
  background:
    radial-gradient(40% 44% at 20% 30%, rgba(248, 106, 34, .32), transparent 66%),
    radial-gradient(38% 42% at 76% 60%, rgba(206, 150, 102, .28), transparent 68%);
}
.hero--renters .hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: clamp(32px, 2.92vw, 56px);
  /* Copy spans the full 1320 wrap (the gutter sits outside it). */
  max-width: calc(var(--maxw) + 2 * var(--gut));
  min-height: min(760px, 100svh);
  padding-top: clamp(150px, 9.9vw, 190px);
  padding-bottom: clamp(56px, 4.375vw, 84px);
}
.hero--renters .hero__head { display: flex; flex-direction: column; gap: 17px; }
/* Geist Light 86 / 87.72, -4.3px; "Find your next home" is 785 wide, so the
   measure (in em) breaks before "before" at every size. #top.hero--renters
   outranks the other pages' #top .display rules above. */
#top.hero--renters .display { font-size: clamp(38px, 4.48vw, 86px); letter-spacing: -.05em; line-height: 1.02; max-width: 9.6em; text-wrap: initial; }
.hero--renters .hero__aside { max-width: 420px; gap: 24px; }
.hero--renters .hero__aside p { font-size: 17.5px; line-height: 1.58; letter-spacing: -.01em; color: rgba(255, 255, 255, .9); }

/* --- Section headings: Geist Light 54 / 56.16, -2.43px (What, Know, FAQ);
   Scams keeps the 58 set inline. --------------------------------------- */
#what .h2, #know .h2, #faq .h2 { font-size: clamp(30px, 2.8125vw, 54px); letter-spacing: -.045em; line-height: 1.04; }

/* --- What is Tallo (1573:7536): 426 | 269.62 | 624 on the 1320 wrap. ---- */
#what .h2 { max-width: 426px; }
@media (min-width: 860px) {
  #what .split { grid-template-columns: minmax(0, 426.38fr) minmax(0, 624fr); column-gap: clamp(56px, 14.04vw, 269.62px); }
}
#what .stack { gap: 20px; }
#what .body { font-size: 18px; line-height: 1.62; }

/* --- Things to know (1573:7545): 52 under the heading; cells 33 / 30 / 38,
   Geist Regular 26 / 29.9, -0.78px over Inter 16.5 / 26. ----------------- */
#know .h2 { max-width: 426px; }
@media (min-width: 960px) { #know .rule-grid > * { padding: 33px 30px 38px; } }
#know .h4 { font-size: clamp(20px, 1.354vw, 26px); letter-spacing: -.03em; line-height: 1.15; max-width: 276px; }

/* --- Scams (1573:7567): 124 rhythm, 496 | 191.87 | 632 header row, 58 to
   the grid; cells 36 / 32 / 42 with Geist Regular 27 / 31.32. The frame
   draws one vertical rule and a faint horizontal one under the right column
   only (the existing --scams rules); the link is orange with a half-tone
   underline. -------------------------------------------------------------- */
#scams { padding-top: clamp(72px, 6.46vw, 124px); padding-bottom: clamp(72px, 6.46vw, 124px); }
@media (min-width: 860px) {
  #scams .split { grid-template-columns: minmax(0, 496.13fr) minmax(0, 632fr); column-gap: clamp(48px, 9.99vw, 191.87px); }
}
#scams .h2 { max-width: 497px; }
#scams .lead { max-width: 641px; }
#scams .lead a { color: #f86a22; border-bottom-color: rgba(248, 106, 34, .5); }
@media (min-width: 800px) {
  #scams .rule-grid--scams > * { padding: 36px 32px 42px; }
  #scams .rule-grid--scams > :nth-child(4) { border-top-color: rgba(255, 255, 255, .1); }
}
#scams .h3 { font-size: clamp(21px, 1.406vw, 27px); letter-spacing: -.035em; line-height: 1.16; max-width: 394px; }

/* --- Lock-screen band (1696:8664): div.t-wait 1320×778, r24, hairline. -- */
#texted .photo-band { aspect-ratio: 1320 / 778; border: 1px solid var(--line); }

/* --- Housing programs (1573:7672): 52 padding and gap, Geist Light 42 /
   44.52 headline, Inter 17 / 27.54 copy at 600. ---------------------------- */
#programs .card { gap: clamp(24px, 2.71vw, 52px); }
#programs .h2 { line-height: 1.06; }

/* --- FAQ (1573:7683): 760 wrap, 40 under the heading, 19px chevron from
   the frame; it turns over on open (same 400ms ease as before). ------------ */
#faq .faq summary::after {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  margin-right: 0;
  border: 0;
  background: url(icons/chevron-down.svg) center / 19px 19px no-repeat;
  transform: none;
}
#faq .faq details[open] summary::after { transform: rotate(180deg); }

/* --- Tablet / mobile ----------------------------------------------------- */
@media (max-width: 1023px) {
  .hero--renters .hero__inner { min-height: min(680px, 100svh); }
  .hero--renters .hero__head { gap: 14px; }
}
/* Tablet cells set heading beside body (rule above); the 14px top margin the
   desktop stack needs is inline, so it takes !important to zero here. */
@media (max-width: 959px) and (min-width: 621px) {
  #know .rule-grid--3 > * > :where(p, .cell-body) { margin-top: 0 !important; }
}
@media (max-width: 699px) {
  .hero--renters .hero__inner { min-height: min(620px, 92svh); gap: 28px; padding-bottom: 48px; }
  #top.hero--renters .display { font-size: clamp(38px, 11.5vw, 48px); max-width: none; }
  .hero--renters .hero__aside p { font-size: 16.5px; }
  /* Phones: the 4:3 crop and 18px corners the band already used, anchored
     on the lock screen. */
  #texted .photo-band { aspect-ratio: 4 / 3; object-position: 30% 50%; border-radius: 18px; }
}


/* ==========================================================================
   Figma sync — 2026-09-28: product
   Page frame 1469:8356 ("1920w light"). Hero 1666:4105, tour 1677:5857 with
   the four stage screens from 1666:4030 (Setup 1666:3786, List 1666:3827,
   Engage 1666:3871, Screen 1666:3917), waitlist 1469:8485, standards
   1469:8522, analytics 1469:8550, FAQ 1469:8612. Everything here is scoped
   to the product page (.hero--product, #tour, #ledger, #standard,
   #analytics, .faq-product); the shared chrome block above is untouched.
   The tour stage is a fixed 920×516 composition, so its screens are drawn
   in em off a container-query unit (1em = 10px at the 920 frame, 16px for
   the .assist card) and scale with the stage.
   ========================================================================== */

/* --- Hero (1666:4105) ---------------------------------------------------
   760 tall at 1920; 1320 wrap, 190 above / 84 below the bottom-aligned row.
   Left column 584 (eyebrow, 17 gap, Geist Light 88 / 89.76, -4.4px); right
   column 420 (Inter 17.5 / 27.65, -0.17px, white .9; 24 gap; white r12 CTA).
   Photo → grey ramp .7 / .27 / .13 → radial mesh at .6, blur 15. */
.hero--product .hero__inner { padding-top: clamp(140px, 15vw, 190px); padding-bottom: clamp(56px, 6vw, 84px); box-sizing: border-box; }
@media (min-width: 1024px) { .hero--product .hero__inner { min-height: min(760px, 100svh); } }
@media (min-width: 900px) { .hero--product .hero__inner { grid-template-columns: minmax(0, 584px) minmax(0, 420px); justify-content: space-between; } }
.hero--product .display { font-size: clamp(38px, 5.6vw, 88px); letter-spacing: -.05em; line-height: 1.02; }
.hero--product .hero__aside p { font-size: 17.5px; line-height: 1.58; letter-spacing: -.01em; }
.hero--product .hero__tint { background: linear-gradient(to top, rgba(81, 81, 81, .7) 4%, rgba(90, 90, 90, .27) 48%, rgba(225, 225, 225, .13)); }
.hero--product .hero__mesh--page {
  opacity: .6;
  filter: blur(15px);
  background:
    radial-gradient(40% 44% at 20% 30%, rgba(248, 106, 34, .32), transparent 66%),
    radial-gradient(38% 42% at 76% 60%, rgba(206, 150, 102, .28), transparent 68%);
}

/* --- Tour (1677:5857) ---------------------------------------------------
   104 above, 64 below; 320 list · 80 gap · 920 stage. The stage column is
   571.46 tall: the 920×516 r80 box (#f4f1ee, 1px #e4e1dd) plus a 736×413
   r64 card peeking out 55 below it (rgba(226,226,226,.2)); the peek card is
   absent on the Screen step, so it fades with the screen switch. Screens
   fill the box and clip to its radius (the List card runs off the left). */
@media (min-width: 900px) { #tour .tour-pin__panel { padding: min(104px, 10vh) 0 64px; } }
#tour .tour-acc__stage { aspect-ratio: 920 / 571.46; background: none; border: 0; border-radius: 0; overflow: visible; isolation: isolate; }
#tour .tour-acc__stage::before { content: ""; position: absolute; inset: 0 0 9.705% 0; border-radius: clamp(28px, 8.696cqw, 80px); background: #f4f1ee; border: 1px solid #e4e1dd; }
#tour .tour-acc__stage::after { content: ""; position: absolute; left: 10%; width: 80%; top: 24.15%; bottom: 3.615%; z-index: -1; border-radius: clamp(24px, 6.957cqw, 64px); background: rgba(226, 226, 226, .2); transition: opacity 260ms cubic-bezier(0.23, 1, 0.32, 1); }
#tour .tour-acc__stage:has(.tour-screen--4.is-on)::after { opacity: 0; }
#tour .tour-acc__stage .tour-screen { left: 0; top: 0; right: 0; bottom: 9.705%; width: auto; height: auto; overflow: hidden; border-radius: clamp(28px, 8.696cqw, 80px); }
#tour .tour-shot { background: #f4f1ee; border: 1px solid #e4e1dd; border-radius: clamp(28px, 8.696cqw, 80px); }
#tour .tour-shot .tour-screen { inset: 0; width: auto; height: auto; overflow: hidden; border-radius: inherit; }
#tour .tour-screen--1 { display: flex; align-items: center; justify-content: center; }
#tour .tour-screen img { width: auto; height: auto; border-radius: 0; box-shadow: none; aspect-ratio: auto; object-fit: unset; object-position: 0 0; }

/* Setup / Engage card (.assist, 1em = 16px at 920): 530 wide, 17.2 pad,
   r19.3, #fbfaf9 on 1px #e4e1dd, 28.8 between blocks; no shadow. */
#tour .assist { width: 33.125em; padding: 1.075em; background: #fbfaf9; border: 1px solid #e4e1dd; border-radius: 1.209em; box-shadow: none; }
#tour .assist__head { gap: .15em; font-size: .9em; font-weight: 600; line-height: normal; color: #000; }
#tour .assist__head svg { width: 1.333em; height: 1.333em; fill: none; stroke: #f8863f; stroke-width: 1.92; stroke-linecap: round; stroke-linejoin: round; }
#tour .assist__q { margin-top: 1.714em !important; font-size: 1.05em; line-height: 1.2; letter-spacing: 0; color: #000; }
#tour .assist__opts { margin-top: 1.8em; gap: .75em; }
#tour .assist__opts span { height: auto; padding: 1em; border-radius: .833em; font-size: .75em; font-weight: 600; line-height: 1.2; color: #000; }
#tour .assist__foot { margin-top: 1.8em; gap: .5em; }
#tour .assist__btn { height: 2.286em; padding: 0 .857em; border-radius: .571em; background: #f7f8f8; color: #2b2b2c; font-size: 1.05em; font-weight: 500; line-height: 1; }
#tour .assist__btn--go { height: 2.667em; padding: 0 1em; border-radius: .667em; background: #3a3a35; color: #e4e6e6; font-size: .9em; font-weight: 600; }
/* Engage checklist: 24px icon, 8 gap, white r10 row padded 12; Inter 600 /
   400 at 12 / 1.2, status #989b9c. */
.assist__tasks { list-style: none; margin: 1.8em 0 0; padding: 0; display: flex; flex-direction: column; gap: .75em; }
.assist__tasks li { display: flex; align-items: center; gap: .5em; }
.assist__tasks svg { flex: none; width: 1.5em; height: 1.5em; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.assist__tasks .is-done { stroke: #2e946d; }
.assist__tasks .is-busy { stroke: #989b9c; }
.assist__task { flex: 1; min-width: 0; display: flex; align-items: center; gap: .667em; padding: 1em; border-radius: .833em; background: var(--white); font-size: .75em; line-height: 1.2; }
.assist__task b { flex: 1; font-weight: 600; color: #000; }
.assist__task i { font-style: normal; font-weight: 400; color: #989b9c; white-space: nowrap; }

/* List and Screen compositions: 1em = 10px at the 920 stage. */
.tl, .scr { position: absolute; inset: 0; font-size: 1.087cqw; font-family: var(--sans); color: var(--ink); }
.tour-shot .tl, .tour-shot .scr { font-size: max(7px, 1.087cqw); }
/* List: the "List property" card (468 wide, centred at x88 so it runs off
   the left edge and fades under a 199-wide veil), four curved connectors,
   four 408×87 listing rows at x490 fading out under a 272-wide veil. */
.tl__card { position: absolute; left: calc(50% - 60.6em); top: calc(50% - 3.64em); width: 46.8em; padding: 1.72em; box-sizing: border-box; display: flex; justify-content: flex-end; background: #fbfaf9; border: 1px solid #e4e1dd; border-radius: 1.934em; }
.tl__go { display: inline-flex; align-items: center; height: 2.667em; padding: 0 1em; border-radius: .667em; background: #3a3a35; color: #e4e6e6; font-size: 1.44em; font-weight: 600; line-height: 1; white-space: nowrap; }
.tl__fade { position: absolute; pointer-events: none; }
.tl__fade--l { left: 0; top: 9.4em; width: 19.9em; height: 30.8em; background: linear-gradient(269.5deg, rgba(244, 241, 238, 0) .7%, #f4f1ee 78.2%); }
.tl__fade--r { left: 63.1em; top: 4.566em; width: 27.2em; height: 43.03em; background: linear-gradient(269.56deg, #f4f1ee 16.1%, rgba(244, 241, 238, 0) 99.4%); }
#tour .tl__arc { position: absolute; left: 30.3em; width: 17.5em; }
.tl__arc--1 { top: 10.54em; }
#tour .tl__arc--2 { left: 30.21em; top: 20em; width: 17.42em; }
#tour .tl__arc--3 { top: 26.03em; width: 17.42em; transform: scaleY(-1); }
#tour .tl__arc--4 { left: 30.2em; top: 26.03em; transform: scaleY(-1); }
.tl__rows { position: absolute; left: 49em; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1.6em; }
.tl__rows li { display: flex; align-items: center; gap: .8em; width: 40.8em; height: 8.7em; padding: 0 1.72em; box-sizing: border-box; background: #fbfaf9; border: 1px solid #e4e1dd; border-radius: 1.934em; }
#tour .tl__rows img { flex: none; width: 3.2em; height: 3.2em; }
.tl__rows span { font-family: var(--display); font-size: 2.3em; font-weight: 400; letter-spacing: -.03em; line-height: 1.2; color: var(--ink); white-space: nowrap; }
/* Screen: three 476×162 cards stepped 72 right / 64 down, last on top;
   16px check, Inter 600 14.4 (#696a62; #2b2b2c on the front card), "Done"
   12 #989b9c, then three rows of #f1f2f2 placeholder bars. */
.scr__card { position: absolute; width: 47.6em; height: 16.2em; padding: 1.72em; box-sizing: border-box; overflow: hidden; background: #fbfaf9; border: 1px solid #e4e1dd; border-radius: 1.934em; transform: translateY(-50%); }
.scr__card--1 { left: 15.1em; top: calc(50% - 6.3em); }
.scr__card--2 { left: 22.3em; top: calc(50% + .1em); }
.scr__card--3 { left: 29.5em; top: calc(50% + 6.5em); }
.scr__head { display: flex; align-items: center; gap: .8em; margin: 0; }
.scr__head svg { flex: none; width: 1.6em; height: 1.6em; fill: none; stroke: #52b58c; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scr__head b { flex: 1; font-size: 1.44em; font-weight: 600; line-height: normal; color: #696a62; }
.scr__card--3 .scr__head { gap: 1em; }
.scr__card--3 .scr__head b { color: #2b2b2c; }
.scr__head i { font-style: normal; font-size: 1.2em; line-height: 1.2; color: #989b9c; }
.scr__lines { display: flex; flex-direction: column; gap: 2em; padding: 1.6em 0; margin-top: 1.075em; }
.scr__lines span { display: flex; justify-content: space-between; }
.scr__lines i { display: block; height: .8em; border-radius: .6em; background: #f1f2f2; }
.scr__lines span:nth-child(1) i:first-child { width: 14.1em; } .scr__lines span:nth-child(1) i:last-child { width: 3.7em; }
.scr__lines span:nth-child(2) i:first-child { width: 11em; }   .scr__lines span:nth-child(2) i:last-child { width: 6.9em; }
.scr__lines span:nth-child(3) i:first-child { width: 9.2em; }  .scr__lines span:nth-child(3) i:last-child { width: 9.7em; }

/* --- Waitlist (1469:8485) — r40 card, 64 pad, 48 gap, dashed leaders. */
#ledger .card { padding: clamp(28px, 3.333vw, 64px); gap: clamp(28px, 2.5vw, 48px); border-radius: clamp(24px, 2.083vw, 40px); }
#ledger .ledger i { border-bottom-style: dashed; }

/* --- Standards (1469:8522) — lead at white .76, cells 26 / 24 / 32. */
#standard .lead--dark { color: rgba(255, 255, 255, .76); }
@media (min-width: 1120px) { #standard .rule-grid--4 > * { padding: 26px 24px 32px; } }

/* --- Analytics (1469:8550) — r40 panel padded 40; white r8 range chips;
   KPI rules #e4e6e6; legend Inter 12 #a7a8a0; 184-tall plot with the
   month labels right under it. */
#analytics .stack { gap: 15px; }
#analytics .panel { padding: clamp(20px, 2.083vw, 40px); border-radius: clamp(24px, 2.083vw, 40px); }
#analytics .panel__ranges span { background: var(--white); border-color: #e2ded9; border-radius: 8px; }
#analytics .kpi-group { border-left-color: #e4e6e6; padding-right: 0; }
#analytics .kpi-group--on { padding-left: 16px; }
#analytics .legend { gap: 16px; }
#analytics .legend span { gap: 4px; font-family: var(--sans); font-size: 12px; line-height: 16px; color: #a7a8a0; }
#analytics .line-chart { height: clamp(110px, 9.583vw, 184px); margin-top: 8px; }
#analytics .chart-x { margin-top: 0; padding: 0 8px; font-family: var(--sans); font-size: 12px; line-height: 16px; color: #84857c; }

/* --- FAQ (1469:8612) — the 19px chevron from the frame; 300ms flip. */
.faq-product .faq summary::after { flex: 0 0 19px; width: 19px; height: 19px; margin: 0; border: 0; background: url(icons/chevron-down.svg) center / 19px 19px no-repeat; transform: none; transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1); }
.faq-product .faq details[open] summary::after { transform: rotate(180deg); }

/* --- Tablet / mobile ------------------------------------------------------
   The tour list stacks with a screen under each step (existing rules); the
   List and Screen compositions are too wide for a phone, so they compact:
   rows only, centred; the three check cards step in from the left. */
@media (max-width: 699px) {
  #tour .tour-shot .tl__card, #tour .tour-shot .tl__fade, #tour .tour-shot .tl__arc { display: none; }
  #tour .tour-shot .tl__rows { left: 50%; transform: translate(-50%, -50%); gap: 1em; }
  #tour .tour-shot .tl__rows li { width: 36em; height: 7em; }
  #tour .tour-shot .scr__card { width: 78%; }
  #tour .tour-shot .scr__card--1 { left: 4%; }
  #tour .tour-shot .scr__card--2 { left: 11%; }
  #tour .tour-shot .scr__card--3 { left: 18%; }
}
@media (prefers-reduced-motion: reduce) {
  #tour .tour-acc__stage::after { transition: opacity 200ms ease; }
  .faq-product .faq summary::after { transition: none; }
}

/* Figma sync — 2026-09-28: product, addendum. The About and Renters blocks
   above set #top .display (92px) and #faq .h2 (54px) by id, which also
   matches this page; these outrank them with the page class. The hero row
   is the full 1320 wrap (300–1620), not the 1224 the gutter padding left. */
#top.hero--product .display { font-size: clamp(38px, 5.6vw, 88px); letter-spacing: -.05em; line-height: 1.02; max-width: none; text-wrap: balance; }
#top.hero--product .hero__inner { max-width: calc(var(--maxw) + 2 * var(--gut)); }
#faq.faq-product .h2 { font-size: var(--fs-h2); letter-spacing: -.045em; line-height: 1.04; }
#faq.faq-product .faq summary::after { flex: 0 0 19px; width: 19px; height: 19px; margin: 0; border: 0; background: url(icons/chevron-down.svg) center / 19px 19px no-repeat; transform: none; transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1); }
#faq.faq-product .faq details[open] summary::after { transform: rotate(180deg); }
@media (max-width: 1023px) { #faq.faq-product .h2 { font-size: var(--fs-h2); } }
@media (prefers-reduced-motion: reduce) { #faq.faq-product .faq summary::after { transition: none; } }


/* ==========================================================================
   Figma sync — 2026-09-28: about (fixes)
   Reviewer pass on frame 1577:7881. Page-scoped through about.html's own
   hooks (.close-band--about, #story, #lines); nothing here touches the JS
   hooks or the motion rules.
   ========================================================================== */

/* --- Close band photo (1702:8869). The frame's fill is the Figma-composited
   image (assets/photo-close-about-fill.png: the cropped, brightened fill,
   not the raw upload) in a 1920 × 727 box — top -.03%, running 21.13% past
   the band — cover, anchored bottom, so the band shows the lower half:
   cream top edge, plant silhouette bottom-left, blush upper-left from the
   mesh. The earlier width/height:auto rule let the img size to its own 3:2
   and showed the top half. A 40px overscan on top and both sides keeps the
   30px blur (18px on phones) from pulling the dark band ground into the
   edges at any width; max-width: none lifts the global img cap so the
   overscan actually spans. */
.close-band--about .close-band__img {
  top: -40px; bottom: auto; left: -40px; right: -40px;
  width: calc(100% + 80px); max-width: none; height: calc(121.16% + 40px);
  object-fit: cover; object-position: 50% 100%;
}

/* --- Story footnote (1577:7912): the hairline runs the full 624 column
   (left-0 right-0), not the 82ch note measure; pb .39 in the frame. */
#story .note { max-width: none; padding-bottom: 1px; }

/* --- Close band button (1702:8875): 169 × 48 — 15/26 padding around an
   18px Inter text box; the 15px line-height was rendering 46. */
.close-band--about .btn--lg { line-height: 18px; }

/* --- Orange accent (Figma "Ecstasy" #F86A22) on the pull-quote rule and the
   01/02/03 numerals. The numerals colour through an inline var(--orange), so
   the token is re-pointed on those spans only; the site-wide token and the
   wordmark dot stay as they are. */
#story .pull { border-left-color: #f86a22; }
#lines .rule-grid > * > span:first-child { --orange: #f86a22; }


/* ==========================================================================
   Figma sync — 2026-09-28: renters (fixes)
   Reviewer pass on frame 1573:7533. The header (1573:7800) is the shared
   chrome and the same component on every page, so that fix is site-wide;
   the rest is scoped to renters.html's own hooks (#scams,
   .close-band--renters) plus two footer line boxes the frame shares with
   every page. No JS hook, class name or motion rule is touched.
   ========================================================================== */

/* --- Header (1573:7800): wordmark 76 × 23, 52 to the links, links Inter
   14.5 / -0.145 on a 30 gap, so the row starts at x167 and "For renters"
   ends at x472 on the 1920 frame. Only the clamp caps change, so the fluid
   header below 1680 keeps its behaviour; .nav / .nav--light / .nav__burger /
   .nav__panel and the scroll probe are untouched. The viewBox stays 0 0 81 24
   (the symbol is shared with the footer). */
.nav__logo svg { width: 76px; height: 23px; }
.nav__left { gap: clamp(24px, 4vw, 52px); }
.nav__links { gap: clamp(18px, 2.4vw, 30px); }
.nav__links a { font-size: 14.5px; letter-spacing: -.01em; }

/* --- Scams (1573:7567): the 26 × 2 rules and the hello@tallo.ai link are
   Figma "Ecstasy" #F86A22 (the site token --orange is #f66b23). The inline
   colours that overrode the renters block above are gone from renters.html,
   so the colour lives here; the rules' scaleX entrance is untouched. */
#scams .rule-grid--scams > div > span[aria-hidden] { background: #f86a22; }
#scams .lead a { color: #f86a22; border-bottom: 1px solid rgba(248, 106, 34, .5); }

/* --- Close band (1675:5785): 601 tall on the frame; the CTA (1675:5844) is
   161 × 48 — 15 / 26 padding around an 18px Inter text box, as on About.
   Desktop only, so the 560 / 480 tablet and phone heights above still win. */
@media (min-width: 1024px) { .close-band--renters .close-band__inner { min-height: min(601px, 80svh); } }
.close-band--renters .btn--lg { line-height: 18px; }

/* --- Footer (1573:7726): link rows on a 28 pitch (18px line box + 10 gap),
   brand CTA 146 × 42 (12 / 20 around an 18px box), mail DM Mono 13.5 with
   no tracking. The same footer component sits on every page. */
.footer__links a { line-height: 18px; }
.footer__brand .btn { line-height: 18px; }
.footer__mail { letter-spacing: 0; }


/* ==========================================================================
   Figma sync — 2026-09-28: product (fixes)
   Reviewer pass on frame 1469:8356. Page-scoped through product.html's own
   hooks (#tour, #ledger, #analytics, .close-band--product); nothing here
   touches the JS hooks or the motion rules.
   ========================================================================== */

/* --- Tour, Engage stage (1666:3891 / 1669:5081). The "Tallo working…" card
   is centred in the 920×516 box like the Setup card (left 50% / top 50% in
   the frame → x≈195, y≈146). Only .tour-screen--1 had the flex centring, so
   the Engage card sat in the top-left corner of the r80 box, clipped by the
   radius — on the desktop stage and in the tablet/mobile .tour-shot slot. */
#tour .tour-screen--3 { display: flex; align-items: center; justify-content: center; }

/* --- Waitlist ledger (1469:8520). The "Matched to openings" leader is the
   orange at 50% ("Ecstasy 50%"); the earlier `.is-accent + i` rule never
   matched because the <i> precedes the accent <b> in the markup. */
#ledger .ledger > span:has(.is-accent) i { border-bottom-color: rgba(248, 106, 34, .5); }

/* --- Waitlist accents (1469:8505): the tick and the "4" are Figma "Ecstasy"
   #F86A22, not the #f66b23 site token — same re-point as pricing/about. */
#ledger .ticks span.is-accent { background: #f86a22; }
#ledger .ledger .is-accent { color: #f86a22; }

/* --- Waitlist / FAQ lead paragraphs (1469:8494 / 1469:8617): 17 / 27.2
   (line height/27_2) — the 1.62 site default rendered 27.54. */
#ledger .lead, #faq .lead { line-height: 1.6; }

/* --- Analytics panel (1469:8566–8575, 1469:8560). Range chips are 26 tall in
   the frame: 5/9 padding around a normal-leading 10.5 DM Mono box, not a
   24px locked height; the caption is a 14px-tall normal-leading line. This
   restores the frame's vertical rhythm (Stats y+91, legend y+191, panel 494).
   14px is Figma's "normal" for DM Mono 10.5; Chrome's normal comes out 13. */
#analytics .panel__ranges span { height: auto; padding: 5px 9px; line-height: 14px; }
#analytics .panel__cap { line-height: 14px; }

/* --- Close band button (1675:5823): 119 × 48 — 15/26 padding around an
   18px Inter text box; the .btn line-height of 1 was rendering 46. */
.close-band--product .btn--lg { line-height: 18px; }


/* ==========================================================================
   Follow-ups — 2026-09-29 (review of the 2026-09-28 sync)
   1 quote photo · 2 hero eyebrows removed · 3 FAQ tween · 4 tour spacing ·
   5 closing band melts into the footer · 6 regressions from the sync review
   ========================================================================== */

/* 1. Quote card: the licensed portrait replaces the mirrored comp, so no flip. */
#quote .quote-card__img { transform: none; object-position: 50% 50%; }
@media (max-width: 699px) { #quote .quote-card__img { object-position: 50% 40%; } }

/* 3. FAQ: tallo.js wraps each answer in .faq__body and tweens its height; the
   chevron turns back the moment a close starts (.is-closing), not at the end. */
.faq__body { overflow: hidden; }
.faq details.is-closing summary::after { transform: translateY(-2px) rotate(45deg); }
#faq .faq details.is-closing summary::after,
.faq-product .faq details.is-closing summary::after,
#faq.faq-product .faq details.is-closing summary::after { transform: none; }

/* 4. Product tour: the step list no longer carries the pinned-story
   viewport cap (it overflowed into the next block on short screens when
   Engage was open), and the panel closes with the same 104px it opens with. */
#tour .tour-pin__panel .tour-acc__list { max-height: none; }
@media (min-width: 900px) { #tour .tour-pin__panel { padding-bottom: 104px; } }

/* 5. Closing band → footer. The scrim now goes fully solid over the bottom
   tenth of the band and ramps out of it on an eased curve, so the photo
   dissolves into the footer's #1b1b1a with no readable edge. Scrim A keeps
   its veil at the top (Home, Pricing, Renters); scrim B stays lighter up
   top (Product, About). Same photo, mesh and drift as before. */
.hero__scrim--close {
  background: linear-gradient(to top,
    #1b1b1a 0%, #1b1b1a 10%,
    rgba(27, 27, 26, .985) 14%, rgba(27, 27, 26, .94) 19%, rgba(27, 27, 26, .86) 25%,
    rgba(27, 27, 26, .75) 32%, rgba(27, 27, 26, .62) 40%, rgba(27, 27, 26, .48) 49%,
    rgba(27, 27, 26, .36) 58%, rgba(27, 27, 26, .27) 68%, rgba(27, 27, 26, .2) 80%,
    rgba(27, 27, 26, .16) 100%);
}
.close-band--scrim-b .hero__scrim--close {
  background: linear-gradient(to top,
    #1b1b1a 0%, #1b1b1a 10%,
    rgba(27, 27, 26, .985) 14%, rgba(27, 27, 26, .94) 19%, rgba(27, 27, 26, .85) 25%,
    rgba(27, 27, 26, .72) 32%, rgba(27, 27, 26, .58) 40%, rgba(27, 27, 26, .44) 49%,
    rgba(27, 27, 26, .3) 58%, rgba(27, 27, 26, .18) 68%, rgba(27, 27, 26, .09) 80%,
    rgba(27, 27, 26, .04) 100%);
}
/* The mesh's lowest radial used to glow through the hand-off; it fades out
   over the same stretch so only the scrim's ramp is visible there. */
.close-band .hero__mesh--close { -webkit-mask-image: linear-gradient(to top, transparent 0%, transparent 8%, #000 42%); mask-image: linear-gradient(to top, transparent 0%, transparent 8%, #000 42%); }
/* Overscanned photos were clamped by the global img max-width. */
.close-band--product .close-band__img, .close-band--about .close-band__img { max-width: none; }

/* 6a. Home: the notification stage is decorative and sat over the rail's
   page dots, eating their clicks. */
#how .stage--notes, #how .lic-ghost { pointer-events: none; }
#how .rail__dots { position: relative; z-index: 2; }
/* 6b. Product analytics: the page rule that greys every KPI rule outranked
   the Leads accent; restate it with the same weight (and its entrance). */
#analytics .kpi-group--on { border-left-color: #f86a22; }
.js #analytics .panel:not(.is-in) .kpi-group--on { border-left-color: transparent; }
/* 6c. Header: four of the five Figma headers use the 81×24 wordmark, 60px
   logo gap, 34px link gap and 15px links; the renters pass had applied that
   frame's smaller bar site-wide. Standardised back on the majority bar. */
.nav__logo svg { width: 81px; height: 24px; }
.nav__left { gap: clamp(24px, 4vw, 60px); }
.nav__links { gap: clamp(18px, 2.4vw, 34px); }
.nav__links a { font-size: 15px; letter-spacing: -.01em; }
/* 6d. Pricing: Figma tucks section#plans 71px under the 540 hero (plans at
   y469, tiers card at 557). Same ground colour, so the hero simply gives up
   that inset and the card lands where the frame puts it. */
@media (min-width: 900px) { #top.hero--pricing .hero__inner { padding-bottom: 25px; } }

/* 7. Integrations ledger below 1200. The six property-management marks need
   906px beside the 262px category column, so from 1199 down the label sits
   above its names (the stack the phone layout already uses) and the names
   keep to one line for as long as the type allows: 23px to 1000, 20px to
   900, 19px below. The ≤699 phone rules above still apply as before. */
@media (max-width: 1199px) {
  #integrations .ints__row, #integrations .ints__row:last-child { flex-direction: column; align-items: flex-start; gap: 14px; min-height: 0; padding: 22px 0; }
  #integrations .ints__cat, #integrations .ints__row:last-child .ints__cat { flex: none; padding-top: 0; }
  #integrations .ints__names, #integrations .ints__row > p { flex: none; width: 100%; }
  #integrations .ints__names { gap: 12px 26px; }
}
@media (max-width: 999px) {
  #integrations .ints__names span { font-size: 20px; letter-spacing: -.5px; line-height: 24px; }
  #integrations .ints__mark, #integrations .ints__mark--realpage { width: 28px; height: 28px; }
  #integrations .ints__mark--buildium img { width: 26px; height: 26px; margin: 1px 0 0 .6px; }
  #integrations .ints__mark--rent-manager { height: 27.2px; }
  #integrations .ints__mark--gcal { width: 24.4px; height: 26.2px; }
}
@media (max-width: 899px) {
  #integrations .ints__names span { font-size: 19px; line-height: 23px; }
  #integrations .ints__mark, #integrations .ints__mark--realpage { width: 26px; height: 26px; }
  #integrations .ints__mark--buildium img { width: 24px; height: 24px; margin: 1px; }
  #integrations .ints__mark--rent-manager { height: 25.3px; }
  #integrations .ints__mark--gcal { width: 22.7px; height: 24.4px; }
}

/* 8. Product tour below 900: every step is already expanded, so the step
   headers are plain headings — no tap target, hover colour, hairline or
   button padding — and the rhythm is header 16 text 20 image 56 next step. */
@media (max-width: 899px) {
  #tour .tour-acc__btn, #tour .tour-acc__item.is-open .tour-acc__btn { padding-bottom: 0; border-bottom: 0; cursor: default; pointer-events: none; }
  #tour .tour-acc__btn .h2 { color: var(--ink); }
  #tour .tour-acc__item { gap: 16px; }
  #tour .tour-shot { margin-top: 4px; }
  #tour .tour-acc__list { gap: 56px; }
}

/* 9. Closing-band photos on Product, About and Renters. Figma places these
   with size-full and no object-fit, i.e. the whole photo stretched into its
   box (sky at the top, ground at the bottom), which the 20–30px blur hides.
   A cover crop showed only the middle strip. Pricing is a real cover fill. */
.close-band--product .close-band__img, .close-band--about .close-band__img, .close-band--renters .close-band__img { object-fit: fill; object-position: 50% 50%; }
/* An absolutely positioned <img> with width:auto keeps its intrinsic size
   rather than stretching between its insets, so the overscanned boxes get
   explicit sizes (100% + the insets). */
.close-band--product .close-band__img { width: 118.49%; height: 146.2%; }
.close-band--about .close-band__img { width: 100%; height: 121.16%; }

/* 10. Blur-up photos. Each sharp photo carries a 24px preview inline as its
   own background, so something is on screen from the first paint; the real
   image paints over it still blurred and slightly enlarged (hiding the blur's
   soft edge), then sharpens once tallo.js marks it .is-loaded. If the script
   never runs, the blur clears on its own after 2.5s. The blurred closing
   bands are not part of this: they are meant to be soft. */
img[data-lqip]:not([data-lqip="soft"]) { transition: filter 600ms cubic-bezier(0.23, 1, 0.32, 1), transform 600ms cubic-bezier(0.23, 1, 0.32, 1); }
.js img[data-lqip]:not([data-lqip="soft"]):not(.is-loaded) { filter: blur(14px); transform: scale(1.04); animation: lqip-clear 0s 2.5s forwards; }
@keyframes lqip-clear { to { filter: none; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  img[data-lqip] { transition: none; }
  .js img[data-lqip]:not(.is-loaded) { transform: none; }
}
/* Blurred closing bands (data-lqip="soft"): the preview sits on the band
   itself and the photo, blurred by design, fades in over it. */
.close-band__img[data-lqip="soft"] { transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1); }
.js .close-band__img[data-lqip="soft"]:not(.is-loaded) { opacity: 0; animation: lqip-show 0s 2.5s forwards; }
@keyframes lqip-show { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .close-band__img[data-lqip="soft"] { transition: none; } }

/* 11. Home hero on phones. A landscape photo cover-fitted to a portrait
   viewport zooms the faces up under the headline, so the photo keeps its
   own scale in the top ~72% and dissolves into the dark ground, and the
   copy packs at the bottom on that fade. Both faces stay clear of the text. */
@media (max-width: 699px) {
  #top.hero--home { height: auto; min-height: 0; }
  #top.hero--home .hero__inner { min-height: max(720px, 100svh); align-content: end; }
  #top.hero--home .hero__img { height: 72%; object-position: 56% 0; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
}

/* 12. Phone gutter: 16px instead of 24px. Every container reads --gut, so
   this is the one change; the floating header bar keeps its own 12px inset. */
@media (max-width: 699px) { :root { --gut: 16px; } }

/* 13. Product hero: the doorway photo (2026-09-29) keeps both faces in the
   upper half, so on desktop it sits a little high; on phones it gets the
   same treatment as the home hero (photo in the top ~72%, fading into the
   ground, copy packed at the bottom). */
#top.hero--product .hero__img { object-position: 50% 35%; }
@media (max-width: 699px) {
  #top.hero--product .hero__inner { min-height: max(720px, 100svh); align-content: end; }
  #top.hero--product .hero__img { height: 72%; object-position: 50% 0; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
}

/* 14. Step rail: the six steps rise one after another (140ms apart) once
   the rail is in view, and each step's hairline draws toward the next one
   just behind it. tallo.js sets --i per step and adds .is-in; without the
   script the steps show themselves after 2.5s. */
#rail > li { transition: opacity 700ms cubic-bezier(0.23, 1, 0.32, 1) calc(var(--i, 0) * 140ms), translate 700ms cubic-bezier(0.23, 1, 0.32, 1) calc(var(--i, 0) * 140ms); }
#rail .rail__dot::before { transform-origin: left center; transition: transform 700ms cubic-bezier(0.23, 1, 0.32, 1) calc(var(--i, 0) * 140ms + 240ms); }
.js #rail:not(.is-in) > li { opacity: 0; translate: 0 14px; animation: rail-show 0s 2.5s forwards; }
.js #rail:not(.is-in) .rail__dot::before { transform: scaleX(0); animation: rail-line 0s 2.5s forwards; }
#rail.is-now > li, #rail.is-now .rail__dot::before { transition: none; }
@keyframes rail-show { to { opacity: 1; translate: none; } }
@keyframes rail-line { to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  #rail > li { transition: opacity 300ms ease calc(var(--i, 0) * 80ms); }
  .js #rail:not(.is-in) > li { translate: none; }
  #rail .rail__dot::before { transition: none; }
  .js #rail:not(.is-in) .rail__dot::before { transform: none; }
}

/* 15. Notification cards from the Figma "Card list" (1558:7270): each stage
   has its own icon and a tinted 70px disc — blue for listing and paperwork,
   orange for a new lead, green for qualified and rented, amber for the
   showing request. Icons are the frame's vectors, coloured by currentColor. */
#how .lic--note .lic__icon svg { stroke: currentColor; stroke-width: 3.11; stroke-linecap: round; stroke-linejoin: round; fill: none; }
#how .lic--note[data-note="1"] .lic__icon, #how .lic--note[data-note="5"] .lic__icon { background: rgba(51, 135, 196, .12); color: #3387c4; }
#how .lic--note[data-note="2"] .lic__icon { background: rgba(246, 107, 34, .12); color: #f8863f; }
#how .lic--note[data-note="3"] .lic__icon, #how .lic--note[data-note="6"] .lic__icon { background: rgba(46, 148, 109, .12); color: #2e946d; }
#how .lic--note[data-note="4"] .lic__icon { background: rgba(214, 131, 28, .12); color: #d6831c; }

/* 16. Renters lock-screen band: no hairline (the frame has none); the asset
   is the current Figma export with +20% saturation baked in. */
#texted .photo-band { border: 0; }

/* 17 — Product tour, List screen arrows (1669:5381, 2026-09-29). The frame's
   arrows now start at the card's edge and fade in towards the rows (light at
   the card, darker at the arrowhead): four fresh vectors, 159/158 wide at the
   frame's own offsets, in place of the earlier 175-wide set that began behind
   the card and faded the other way. Two fixes ride along: the widths are
   stated above the stage's generic `img { width: auto }` reset, so the arrows
   scale with the composition instead of staying 159px (they used to cross in
   the stacked tablet shots), and the tops hang off the vertical centre like
   the card and the rows do, so the four still meet at the card's edge when a
   stage has a different aspect. The tops sit 1px above the layer offsets:
   Figma's SVG export carries the stroke's outer edge, and that is where a
   pixel diff against the frame's own export goes to zero. */
#tour .tour-screen .tl__arc--1 { left: 32.6em; top: calc(50% - 15.217em); width: 15.9em; }
#tour .tour-screen .tl__arc--2 { left: 32.5em; top: calc(50% - 5.817em); width: 15.8em; }
#tour .tour-screen .tl__arc--3 { left: 32.6em; top: calc(50% + .183em); width: 15.8em; }
#tour .tour-screen .tl__arc--4 { left: 32.5em; top: calc(50% + .183em); width: 15.9em; }

/* 18 — Product analytics chart (1469:8550, 2026-09-29): the line draws from
   January on the left to December on the right. The path is authored from
   its right end, so the hidden state parks the dash at -1 instead of 1: the
   dash then advances from the path's end, which is the left edge. */
.js .panel:not(.is-in) .line-chart path { stroke-dashoffset: -1; }

/* 19 — Photo heroes, darker ground under the copy (2026-09-29). The grey
   ramps pushed the photo towards mid-grey, which is the worst ground for
   white type; these ramps use the page's dark tone instead and hold it
   through the band where the headline and the aside sit, thinning out
   above so the faces keep their light. */
#top.hero--home .hero__tint { background: linear-gradient(to top, rgba(20, 20, 19, .8) 0%, rgba(20, 20, 19, .68) 18%, rgba(22, 22, 21, .44) 46%, rgba(60, 60, 58, .18) 72%, rgba(225, 225, 225, .1) 100%); }
.hero--product .hero__tint { background: linear-gradient(to top, rgba(20, 20, 19, .82) 0%, rgba(20, 20, 19, .66) 26%, rgba(22, 22, 21, .46) 52%, rgba(60, 60, 58, .2) 76%, rgba(225, 225, 225, .1) 100%); }
.hero__tint--renters { background: linear-gradient(to top, rgba(20, 20, 19, .82) 0%, rgba(20, 20, 19, .64) 30%, rgba(22, 22, 21, .46) 60%, rgba(40, 40, 39, .3) 100%); }

/* 20 — Large screens (2026-09-29). Above 2200px the 1320px container and
   the type caps tuned for 1920 leave the pages small in the middle of the
   glass, so the container widens and every explicit type size steps up 8%
   (20% above 3000px). The block is generated from the rules above by
   scripts/bigscreen.py; regenerate it rather than editing by hand. */
@media (min-width: 2200px) {
  :root { --maxw: 1480px; --gut: 64px; }
  :root { --fs-display: clamp(41.04px, 5.6vw, 88.56px); --fs-h2: clamp(32.4px, 4.2vw, 62.64px); --fs-h2-sm: clamp(30.24px, 3.4vw, 49.68px); --fs-h3: clamp(22.68px, 2.2vw, 31.32px); --fs-lead: 18.9px; --fs-body: 18.36px; }
  .skip { font-size: 15.12px; }
  .h4 { font-size: clamp(21.6px, 2vw, 28.08px); }
  .eyebrow { font-size: 11.88px; }
  .body { font-size: 19.44px; }
  .small { font-size: 16.2px; }
  .note { font-size: 12.42px; }
  .btn { font-size: 16.2px; }
  .btn--sm { font-size: 15.66px; }
  .nav__links a { font-size: 16.2px; }
  .nav__panel a { font-size: 17.28px; }
  .hero__aside p { font-size: 18.36px; }
  .close-band .h2 { font-size: clamp(34.56px, 5vw, 79.92px); }
  .stat__n { font-size: clamp(36.72px, 4vw, 56.16px); }
  .stat__t { font-size: 20.52px; }
  .stat__d { font-size: 16.2px; }
  .reveal { font-size: clamp(32.4px, 4.8vw, 71.28px); }
  .steps__n { font-size: clamp(36.72px, 4.2vw, 60.48px); }
  .steps__head h3 { font-size: clamp(22.68px, 2.2vw, 29.16px); }
  .steps__owner { font-size: 11.34px; }
  .steps__body p { font-size: 16.74px; }
  .figure__unit { font-size: clamp(30.24px, 3vw, 45.36px); }
  .figure__n { font-size: clamp(86.4px, 11vw, 164.16px); }
  .figure__n--md { font-size: clamp(66.96px, 8vw, 103.68px); }
  .figure__caption { font-size: clamp(20.52px, 2vw, 28.08px); }
  .ledger { font-size: 14.04px; }
  .shot__label { font-size: 11.34px; }
  .callout p { font-size: 16.74px; }
  .pull p { font-size: clamp(23.76px, 2.5vw, 36.72px); }
  .quote p { font-size: clamp(28.08px, 3.6vw, 54px); }
  .quote cite { font-size: 16.2px; }
  .quote small { font-size: 13.5px; }
  .quotes p { font-size: clamp(21.6px, 2.1vw, 29.16px); }
  .quotes cite { font-size: 15.66px; }
  .quotes small { font-size: 12.96px; }
  .ints__cat { font-size: 11.88px; }
  .ints__names span { font-size: clamp(20.52px, 2vw, 24.84px); }
  .tier__name { font-size: clamp(28.08px, 2.6vw, 32.4px); }
  .tier__for { font-size: 16.2px; }
  .tier__currency { font-size: clamp(21.6px, 2vw, 25.92px); }
  .tier__amount { font-size: clamp(62.64px, 7vw, 82.08px); }
  .tier__terms { font-size: 16.2px; }
  .tag { font-size: 10.8px; }
  .feats li { font-size: 16.2px; }
  .panel__top .eyebrow { font-size: 11.88px; }
  .panel__ranges span { font-size: 11.34px; }
  .kpis b { font-size: 28.08px; }
  .kpis span { font-size: 13.5px; }
  .panel__cap { font-size: 11.34px; }
  .faq summary { font-size: 17.82px; }
  .faq p { font-size: 16.74px; }
  .waitlist__media span { font-size: 11.88px; }
  .field > span { font-size: 14.58px; }
  .field input, .field textarea { font-size: 16.74px; }
  .form-note { font-size: 12.96px; }
  .tour__head .h2 { font-size: clamp(28.08px, 3.2vw, 45.36px); }
  .tour__n { font-size: 12.96px; }
  .footer__brand p { font-size: 15.12px; }
  .footer__head { font-size: 10.8px; }
  .footer__links a, .footer__mail { font-size: 15.66px; }
  .footer__mail { font-size: 14.58px; }
  .footer__legal small { font-size: 13.5px; }
  .footer__legal nav a { font-size: 13.5px; }
  .rail__n { font-size: 60.48px; }
  .rail__body .steps__head h3 { font-size: 29.16px; }
  .rail__body p { font-size: 16.74px; line-height: 25.92px; }
  .stage__note { font-size: 11.34px; }
  .lic__t { font-size: 25.92px; }
  .lic__s { font-size: 18.36px; }
  .lic__d { font-size: 16.2px; }
  .lic__badge { font-size: 14.04px; }
  .widget__t { font-size: 16.2px; }
  .widget__s { font-size: 14.04px; }
  .widget__meta { font-size: 11.61px; }
  .quote-card blockquote p { font-size: clamp(28.08px, 3vw, 43.2px); }
  .quote-card cite { font-size: 16.2px; }
  .quote-card small { font-size: 13.5px; }
  .tour-pin__panel .tour-acc__btn .h2 { font-size: clamp(28.08px, 5vh, 45.36px); }
  .tour-pin__panel .tour-acc__body p { font-size: clamp(15.12px, 2.6vh, 18.36px); }
  .tour-acc__btn .h2 { font-size: clamp(28.08px, 3.2vw, 45.36px); }
  .kpi-group__t { font-size: 12.96px; line-height: 17.28px; }
  .kpi-group__cells b { font-size: 25.92px; line-height: 34.56px; }
  .kpi-group__cells span { font-size: 12.96px; line-height: 17.28px; }
  .legend span { font-size: 13.5px; }
  .line-chart text { font-size: 10.8px; }
  .ints__names span { font-size: 24.84px; line-height: 29.81px; }
  .lic--note .lic__t { font-size: 25.92px; }
  .lic--note .lic__s { font-size: 25.92px; }
  .lic--note .lic__d { font-size: 21.6px; }
  .rule-card__k { font-size: 11.88px; }
  .rule-card__v { font-size: 18.9px; }
  .rule-card__v--lg { font-size: 29.16px; }
  .rule-card__m { font-size: 14.04px; }
  .chart-x { font-size: 13.5px; }
  .waitlist-modal__close { font-size: 25.92px; }
  .team__name { font-size: clamp(22.68px, 1.42vw, 29.16px); }
  .team__role { font-size: 16.2px; }
  .close-band .h2 { font-size: clamp(34.56px, 5vw, 79.92px); }
  .close-band--68 .h2 { font-size: clamp(32.4px, 4.6vw, 73.44px); }
  .footer__brand .btn { font-size: 15.66px; }
  #top .display { font-size: clamp(41.04px, 5.48vw, 99.36px); max-width: 1242px; }
  #lines .rule-grid .h3 { line-height: 35.64px; }
  .team__name { font-size: clamp(22.68px, 1.36vw, 28.08px); }
  .team__role { font-size: 17.82px; line-height: 28.08px; }
  #top.hero--pricing .display { font-size: clamp(41.04px, 4.79vw, 99.36px); }
  #top.hero--pricing .hero__aside p { font-size: 19.44px; }
  #addons .h2 { font-size: clamp(32.4px, 2.8125vw, 58.32px); }
  #addons .h4 { font-size: clamp(23.76px, 1.354vw, 28.08px); }
  #lines .rule-grid > * > span { line-height: 15.12px; }
  #lines .rule-grid > * > p { line-height: 28.08px; }
  #top.hero--home .display { font-size: clamp(41.04px, 4.583vw, 95.04px); max-width: 886.68px; }
  #top.hero--home .hero__aside p { font-size: 18.36px; line-height: 28.46px; }
  #top.hero--home .hero__aside .btn { font-size: 16.2px; line-height: 19.44px; }
  .section--manifesto .lead { line-height: 30.62px; }
  #pricing .lead { line-height: 30.24px; }
  #how > .wrap > .lead { line-height: 30.62px; }
  #how .rail__body .steps__head h3 { font-size: 29.16px; line-height: 33.48px; }
  #how .rail__body p { font-size: 16.74px; line-height: 25.92px; }
  #how .steps__owner { font-size: 11.34px; }
  #how .lic--note .lic__t { font-size: 27.56px; line-height: 36.75px; }
  #how .lic--note .lic__s { font-size: 27.56px; line-height: 36.75px; }
  #how .lic--note .lic__d { font-size: 23.76px; line-height: 36.75px; }
  #rules .rules-copy .lead { line-height: 30.62px; }
  #rules .rule-card__k { font-size: 11.88px; line-height: 15.12px; }
  #rules .rule-card__v { font-size: 19.44px; line-height: 23.33px; }
  #rules .rule-card__v--lg { font-size: 29.16px; line-height: 33.83px; }
  #rules .rule-card__m { font-size: 14.04px; line-height: 18.36px; }
  #integrations .split .lead { line-height: 30.62px; }
  #integrations .ints__row:last-child .lead { line-height: 30.62px; }
  #top.hero--renters .display { font-size: clamp(41.04px, 4.48vw, 92.88px); }
  .hero--renters .hero__aside p { font-size: 18.9px; }
  #what .h2, #know .h2, #faq .h2 { font-size: clamp(32.4px, 2.8125vw, 58.32px); }
  #what .body { font-size: 19.44px; }
  #know .h4 { font-size: clamp(21.6px, 1.354vw, 28.08px); max-width: 298.08px; }
  #scams .h3 { font-size: clamp(22.68px, 1.406vw, 29.16px); max-width: 425.52px; }
  .hero--product .display { font-size: clamp(41.04px, 5.6vw, 95.04px); }
  .hero--product .hero__aside p { font-size: 18.9px; }
  #analytics .legend span { font-size: 12.96px; line-height: 17.28px; }
  #analytics .chart-x { font-size: 12.96px; line-height: 17.28px; }
  #top.hero--product .display { font-size: clamp(41.04px, 5.6vw, 95.04px); }
  .close-band--about .btn--lg { line-height: 19.44px; }
  .nav__links a { font-size: 15.66px; }
  .close-band--renters .btn--lg { line-height: 19.44px; }
  .footer__links a { line-height: 19.44px; }
  .footer__brand .btn { line-height: 19.44px; }
  #analytics .panel__ranges span { line-height: 15.12px; }
  #analytics .panel__cap { line-height: 15.12px; }
  .close-band--product .btn--lg { line-height: 19.44px; }
  .nav__links a { font-size: 16.2px; }
}
@media (min-width: 3000px) {
  :root { --maxw: 1720px; --gut: 80px; }
  :root { --fs-display: clamp(45.6px, 5.6vw, 98.4px); --fs-h2: clamp(36px, 4.2vw, 69.6px); --fs-h2-sm: clamp(33.6px, 3.4vw, 55.2px); --fs-h3: clamp(25.2px, 2.2vw, 34.8px); --fs-lead: 21px; --fs-body: 20.4px; }
  .skip { font-size: 16.8px; }
  .h4 { font-size: clamp(24px, 2vw, 31.2px); }
  .eyebrow { font-size: 13.2px; }
  .body { font-size: 21.6px; }
  .small { font-size: 18px; }
  .note { font-size: 13.8px; }
  .btn { font-size: 18px; }
  .btn--sm { font-size: 17.4px; }
  .nav__links a { font-size: 18px; }
  .nav__panel a { font-size: 19.2px; }
  .hero__aside p { font-size: 20.4px; }
  .close-band .h2 { font-size: clamp(38.4px, 5vw, 88.8px); }
  .stat__n { font-size: clamp(40.8px, 4vw, 62.4px); }
  .stat__t { font-size: 22.8px; }
  .stat__d { font-size: 18px; }
  .reveal { font-size: clamp(36px, 4.8vw, 79.2px); }
  .steps__n { font-size: clamp(40.8px, 4.2vw, 67.2px); }
  .steps__head h3 { font-size: clamp(25.2px, 2.2vw, 32.4px); }
  .steps__owner { font-size: 12.6px; }
  .steps__body p { font-size: 18.6px; }
  .figure__unit { font-size: clamp(33.6px, 3vw, 50.4px); }
  .figure__n { font-size: clamp(96px, 11vw, 182.4px); }
  .figure__n--md { font-size: clamp(74.4px, 8vw, 115.2px); }
  .figure__caption { font-size: clamp(22.8px, 2vw, 31.2px); }
  .ledger { font-size: 15.6px; }
  .shot__label { font-size: 12.6px; }
  .callout p { font-size: 18.6px; }
  .pull p { font-size: clamp(26.4px, 2.5vw, 40.8px); }
  .quote p { font-size: clamp(31.2px, 3.6vw, 60px); }
  .quote cite { font-size: 18px; }
  .quote small { font-size: 15px; }
  .quotes p { font-size: clamp(24px, 2.1vw, 32.4px); }
  .quotes cite { font-size: 17.4px; }
  .quotes small { font-size: 14.4px; }
  .ints__cat { font-size: 13.2px; }
  .ints__names span { font-size: clamp(22.8px, 2vw, 27.6px); }
  .tier__name { font-size: clamp(31.2px, 2.6vw, 36px); }
  .tier__for { font-size: 18px; }
  .tier__currency { font-size: clamp(24px, 2vw, 28.8px); }
  .tier__amount { font-size: clamp(69.6px, 7vw, 91.2px); }
  .tier__terms { font-size: 18px; }
  .tag { font-size: 12px; }
  .feats li { font-size: 18px; }
  .panel__top .eyebrow { font-size: 13.2px; }
  .panel__ranges span { font-size: 12.6px; }
  .kpis b { font-size: 31.2px; }
  .kpis span { font-size: 15px; }
  .panel__cap { font-size: 12.6px; }
  .faq summary { font-size: 19.8px; }
  .faq p { font-size: 18.6px; }
  .waitlist__media span { font-size: 13.2px; }
  .field > span { font-size: 16.2px; }
  .field input, .field textarea { font-size: 18.6px; }
  .form-note { font-size: 14.4px; }
  .tour__head .h2 { font-size: clamp(31.2px, 3.2vw, 50.4px); }
  .tour__n { font-size: 14.4px; }
  .footer__brand p { font-size: 16.8px; }
  .footer__head { font-size: 12px; }
  .footer__links a, .footer__mail { font-size: 17.4px; }
  .footer__mail { font-size: 16.2px; }
  .footer__legal small { font-size: 15px; }
  .footer__legal nav a { font-size: 15px; }
  .rail__n { font-size: 67.2px; }
  .rail__body .steps__head h3 { font-size: 32.4px; }
  .rail__body p { font-size: 18.6px; line-height: 28.8px; }
  .stage__note { font-size: 12.6px; }
  .lic__t { font-size: 28.8px; }
  .lic__s { font-size: 20.4px; }
  .lic__d { font-size: 18px; }
  .lic__badge { font-size: 15.6px; }
  .widget__t { font-size: 18px; }
  .widget__s { font-size: 15.6px; }
  .widget__meta { font-size: 12.9px; }
  .quote-card blockquote p { font-size: clamp(31.2px, 3vw, 48px); }
  .quote-card cite { font-size: 18px; }
  .quote-card small { font-size: 15px; }
  .tour-pin__panel .tour-acc__btn .h2 { font-size: clamp(31.2px, 5vh, 50.4px); }
  .tour-pin__panel .tour-acc__body p { font-size: clamp(16.8px, 2.6vh, 20.4px); }
  .tour-acc__btn .h2 { font-size: clamp(31.2px, 3.2vw, 50.4px); }
  .kpi-group__t { font-size: 14.4px; line-height: 19.2px; }
  .kpi-group__cells b { font-size: 28.8px; line-height: 38.4px; }
  .kpi-group__cells span { font-size: 14.4px; line-height: 19.2px; }
  .legend span { font-size: 15px; }
  .line-chart text { font-size: 12px; }
  .ints__names span { font-size: 27.6px; line-height: 33.12px; }
  .lic--note .lic__t { font-size: 28.8px; }
  .lic--note .lic__s { font-size: 28.8px; }
  .lic--note .lic__d { font-size: 24px; }
  .rule-card__k { font-size: 13.2px; }
  .rule-card__v { font-size: 21px; }
  .rule-card__v--lg { font-size: 32.4px; }
  .rule-card__m { font-size: 15.6px; }
  .chart-x { font-size: 15px; }
  .waitlist-modal__close { font-size: 28.8px; }
  .team__name { font-size: clamp(25.2px, 1.42vw, 32.4px); }
  .team__role { font-size: 18px; }
  .close-band .h2 { font-size: clamp(38.4px, 5vw, 88.8px); }
  .close-band--68 .h2 { font-size: clamp(36px, 4.6vw, 81.6px); }
  .footer__brand .btn { font-size: 17.4px; }
  #top .display { font-size: clamp(45.6px, 5.48vw, 110.4px); max-width: 1380px; }
  #lines .rule-grid .h3 { line-height: 39.6px; }
  .team__name { font-size: clamp(25.2px, 1.36vw, 31.2px); }
  .team__role { font-size: 19.8px; line-height: 31.2px; }
  #top.hero--pricing .display { font-size: clamp(45.6px, 4.79vw, 110.4px); }
  #top.hero--pricing .hero__aside p { font-size: 21.6px; }
  #addons .h2 { font-size: clamp(36px, 2.8125vw, 64.8px); }
  #addons .h4 { font-size: clamp(26.4px, 1.354vw, 31.2px); }
  #lines .rule-grid > * > span { line-height: 16.8px; }
  #lines .rule-grid > * > p { line-height: 31.2px; }
  #top.hero--home .display { font-size: clamp(45.6px, 4.583vw, 105.6px); max-width: 985.2px; }
  #top.hero--home .hero__aside p { font-size: 20.4px; line-height: 31.62px; }
  #top.hero--home .hero__aside .btn { font-size: 18px; line-height: 21.6px; }
  .section--manifesto .lead { line-height: 34.02px; }
  #pricing .lead { line-height: 33.6px; }
  #how > .wrap > .lead { line-height: 34.02px; }
  #how .rail__body .steps__head h3 { font-size: 32.4px; line-height: 37.2px; }
  #how .rail__body p { font-size: 18.6px; line-height: 28.8px; }
  #how .steps__owner { font-size: 12.6px; }
  #how .lic--note .lic__t { font-size: 30.62px; line-height: 40.84px; }
  #how .lic--note .lic__s { font-size: 30.62px; line-height: 40.84px; }
  #how .lic--note .lic__d { font-size: 26.4px; line-height: 40.84px; }
  #rules .rules-copy .lead { line-height: 34.02px; }
  #rules .rule-card__k { font-size: 13.2px; line-height: 16.8px; }
  #rules .rule-card__v { font-size: 21.6px; line-height: 25.92px; }
  #rules .rule-card__v--lg { font-size: 32.4px; line-height: 37.58px; }
  #rules .rule-card__m { font-size: 15.6px; line-height: 20.4px; }
  #integrations .split .lead { line-height: 34.02px; }
  #integrations .ints__row:last-child .lead { line-height: 34.02px; }
  #top.hero--renters .display { font-size: clamp(45.6px, 4.48vw, 103.2px); }
  .hero--renters .hero__aside p { font-size: 21px; }
  #what .h2, #know .h2, #faq .h2 { font-size: clamp(36px, 2.8125vw, 64.8px); }
  #what .body { font-size: 21.6px; }
  #know .h4 { font-size: clamp(24px, 1.354vw, 31.2px); max-width: 331.2px; }
  #scams .h3 { font-size: clamp(25.2px, 1.406vw, 32.4px); max-width: 472.8px; }
  .hero--product .display { font-size: clamp(45.6px, 5.6vw, 105.6px); }
  .hero--product .hero__aside p { font-size: 21px; }
  #analytics .legend span { font-size: 14.4px; line-height: 19.2px; }
  #analytics .chart-x { font-size: 14.4px; line-height: 19.2px; }
  #top.hero--product .display { font-size: clamp(45.6px, 5.6vw, 105.6px); }
  .close-band--about .btn--lg { line-height: 21.6px; }
  .nav__links a { font-size: 17.4px; }
  .close-band--renters .btn--lg { line-height: 21.6px; }
  .footer__links a { line-height: 21.6px; }
  .footer__brand .btn { line-height: 21.6px; }
  #analytics .panel__ranges span { line-height: 16.8px; }
  #analytics .panel__cap { line-height: 16.8px; }
  .close-band--product .btn--lg { line-height: 21.6px; }
  .nav__links a { font-size: 18px; }
}

/* 21 — Guardrail widget on large screens (2026-09-30). The four rule cards
   are a fixed 490×275 composition placed in px (card 1 even has a fixed
   height); block 20 grew their type but not their boxes, so "$1,650–$2,150"
   broke onto two lines and spilled out of its card. The boxes now scale by
   the same factors as the type (card widths 3% more, since glyph advances do
   not scale perfectly linearly), restated at the page-scoped specificity. */
@media (min-width: 2200px) {
  .rules { width: 528.12px; height: 297px; }
  .rule-card { gap: 6.48px; padding: 19.44px 22.68px; border-radius: 17.28px; }
  .rule-card--1 { left: 31.32px; width: 239.17px; gap: 4.32px; }
  .rule-card--2 { left: 300.24px; top: 22.68px; width: 201.34px; gap: 12.96px; padding: 23.76px 22.68px; }
  .rule-card--3 { top: 159.84px; width: 320.37px; padding: 21.6px 22.68px; }
  .rule-card--4 { left: 347.76px; top: 160.92px; width: 185.77px; }
  .rule-card svg { width: 21.6px; height: 21.6px; }
  #rules .rules { width: 529.2px; margin-top: -20.52px; }
  #rules .rule-card { padding: 19.44px 23.76px 21.6px; border-radius: 19.44px; gap: 5.4px; }
  #rules .rule-card--1 { width: 239.17px; height: 117.72px; gap: 5.4px; }
  #rules .rule-card--1 .rule-card__m { margin-top: -1.08px; }
  #rules .rule-card--2 { left: 300.24px; top: 22.68px; width: 201.34px; gap: 10.8px; }
  #rules .rule-card--3 { width: 320.37px; gap: 10.8px; }
  #rules .rule-card--4 { left: 347.33px; top: 160.16px; width: 186.88px; }
  #rules .rule-card svg { width: 28.08px; height: 28.08px; }
}
@media (min-width: 3000px) {
  .rules { width: 586.8px; height: 330px; }
  .rule-card { gap: 7.2px; padding: 21.6px 25.2px; border-radius: 19.2px; }
  .rule-card--1 { left: 34.8px; width: 265.74px; gap: 4.8px; }
  .rule-card--2 { left: 333.6px; top: 25.2px; width: 223.72px; gap: 14.4px; padding: 26.4px 25.2px; }
  .rule-card--3 { top: 177.6px; width: 355.97px; padding: 24px 25.2px; }
  .rule-card--4 { left: 386.4px; top: 178.8px; width: 206.41px; }
  .rule-card svg { width: 24px; height: 24px; }
  #rules .rules { width: 588px; margin-top: -22.8px; }
  #rules .rule-card { padding: 21.6px 26.4px 24px; border-radius: 21.6px; gap: 6px; }
  #rules .rule-card--1 { width: 265.74px; height: 130.8px; gap: 6px; }
  #rules .rule-card--1 .rule-card__m { margin-top: -1.2px; }
  #rules .rule-card--2 { left: 333.6px; top: 25.2px; width: 223.72px; gap: 12px; }
  #rules .rule-card--3 { width: 355.97px; gap: 12px; }
  #rules .rule-card--4 { left: 385.92px; top: 177.96px; width: 207.65px; }
  #rules .rule-card svg { width: 31.2px; height: 31.2px; }
}