/* RentCalc website. One stylesheet for every page, no external requests, no inline styles (the
   Content-Security-Policy in _headers forbids them). Colors, radii and the answer card's tint come
   from the app's own tokens (src/theme/tokens.ts), so the site and the app read as one product. */

:root {
  --paper: #ffffff;
  --mist: #f5f5f7;
  --ink: #1d1d1f;
  --ink-2: #3a3a3c;
  --soft: #6e6e73;
  --hair: #e3e3e8;
  --blue: #0066cc;
  --blue-press: #0055aa;
  --blue-soft: #e8f1fc;
  --green: #1f7a35;
  --night: #0c0d0f;
  --card-ink: #5a6070;
  --app-bg: #f2f2f7;
  --app-soft: #6c6c70;
  --tile: #e5f0fb;
  --rent: #0066cc;
  --fee: #74aeef;
  --covered: #8ccb9c;
  --paid: #34c759;
  --ring: #4fb36a;
  --wrap: 1160px;
  --gutter: clamp(20px, 5vw, 40px);
  --section: clamp(88px, 11vw, 152px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--font);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}

main { overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
p { margin: 0; text-wrap: pretty; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; font-family: var(--display); color: var(--ink); text-wrap: balance; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
::selection { background: rgba(0, 102, 204, 0.16); }
:focus-visible { outline: 3px solid rgba(0, 102, 204, 0.5); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.num { font-variant-numeric: tabular-nums; }

.skip {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  padding: 10px 16px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 600;
}
.skip:focus { top: 12px; text-decoration: none; }

/* ---------------------------------------------------------------- type */

.display {
  font-size: clamp(2.75rem, 1.55rem + 4.4vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  font-weight: 700;
}
.h2 {
  font-size: clamp(2.125rem, 1.5rem + 2.5vw, 3.625rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.h3 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.02em; font-weight: 600; }
.lede {
  font-size: clamp(1.1875rem, 1.06rem + 0.45vw, 1.4375rem);
  line-height: 1.45;
  letter-spacing: -0.019em;
  color: var(--soft);
}
.kicker {
  display: block;
  margin-bottom: 18px;
  color: var(--blue);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.fine { color: var(--soft); font-size: 0.875rem; line-height: 1.5; letter-spacing: -0.006em; }

/* ---------------------------------------------------------------- header */

.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
}
@supports (animation-timeline: scroll()) {
  .top { animation: top-edge linear both; animation-timeline: scroll(); animation-range: 0 48px; }
}
@supports not (animation-timeline: scroll()) {
  .top { border-bottom-color: var(--hair); }
}
@keyframes top-edge { to { border-bottom-color: var(--hair); } }

.top .wrap { display: flex; align-items: center; gap: 32px; height: 64px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); font: 600 1.1875rem/1 var(--display); letter-spacing: -0.03em;
}
.brand:hover { text-decoration: none; }
.brand svg { width: 30px; height: 30px; border-radius: 7px; box-shadow: 0 1px 2px rgba(0, 40, 90, 0.18); }
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav a { color: var(--ink-2); font-size: 0.9375rem; letter-spacing: -0.01em; }
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.top .soon { height: 36px; padding: 0 14px; font-size: 0.875rem; }
.soon-short { display: none; }
@media (max-width: 760px) {
  .nav { display: none; }
  .top .soon { margin-left: auto; }
}
@media (max-width: 520px) {
  .top .soon-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .top .soon-short { display: inline; }
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 26px; border-radius: 999px;
  background: var(--blue); color: #fff;
  font: 600 1.0625rem/1 var(--font); letter-spacing: -0.012em;
  transition: background-color 160ms ease, transform 160ms var(--ease);
}
.btn:hover { background: var(--blue-press); text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn svg { width: 16px; height: 16px; }
/* The arrow points at the calculator: beside the copy on wide screens, below it on phones. */
.btn .to-below { display: none; }
@media (max-width: 980px) {
  .btn .to-side { display: none; }
  .btn .to-below { display: block; }
}

/* Not a link: the app isn't on the App Store yet. At launch this becomes Apple's official badge. */
.soon {
  display: inline-flex; align-items: center; gap: 9px;
  height: 52px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--hair); background: var(--paper);
  color: var(--ink-2); font-size: 0.9375rem; letter-spacing: -0.01em; white-space: nowrap;
}
.soon svg { width: 14px; height: 14px; color: var(--soft); }

.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; letter-spacing: -0.012em; }
.more svg { width: 14px; height: 14px; transition: transform 200ms var(--ease); }
.more:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------------- hero */

.hero { position: relative; overflow: clip; padding-block: clamp(28px, 4vw, 56px) clamp(80px, 10vw, 128px); }
.hero > .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}
.hero-copy .display { max-width: 11.5ch; hanging-punctuation: first; }
.nb { white-space: nowrap; }
.hero-copy .lede { margin-top: 28px; max-width: 30em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 40px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 30px; list-style: none; color: var(--soft); font-size: 0.875rem; }
.facts li { display: inline-flex; align-items: center; gap: 7px; }
.facts svg { width: 15px; height: 15px; color: var(--green); }

@media (max-width: 980px) {
  .hero > .wrap { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .hero-copy .display { max-width: 14ch; }
  .hero-copy .lede { margin-top: 18px; }
  .hero .actions { margin-top: 26px; }
  .facts { margin-top: 18px; }
}
/* On phones the calculator's three fields fit on the first screen, so the button that scrolls to them
   goes (the header already says "Coming soon"), and the three facts move under the calculator. */
@media (max-width: 760px) {
  .hero .actions { display: none; }
  .hero-copy { display: contents; }
  .hero-copy .lede { margin-top: -4px; }
  .hero .stage { order: 1; }
  .hero .facts { order: 2; margin-top: 4px; justify-content: center; }
}

/* The stage: the phone, its glow, and the live arithmetic under it. */
.stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; isolation: isolate; }
.stage::before {
  content: ""; position: absolute; z-index: -1;
  inset: 4% -12% 10%;
  background:
    radial-gradient(48% 42% at 50% 40%, rgba(0, 102, 204, 0.16), rgba(0, 102, 204, 0) 70%),
    radial-gradient(40% 30% at 60% 75%, rgba(79, 179, 106, 0.1), rgba(79, 179, 106, 0) 70%);
  filter: blur(8px);
}
/* Above the phone, so it's read before anyone types. */
.stage-note { margin: 0 0 18px; color: var(--ink-2); font-size: 0.9375rem; text-align: center; }
@media (max-width: 760px) { .stage-note { margin-bottom: 12px; } }

/* ---------------------------------------------------------------- the phone */

.device {
  --w: min(318px, 80vw);
  position: relative;
  width: var(--w);
  aspect-ratio: 402 / 874;
  padding: calc(var(--w) * 0.03);
  border-radius: calc(var(--w) * 0.168);
  background: linear-gradient(150deg, #3a3b3f 0%, #121315 22%, #1c1d20 60%, #2c2d31 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.22),
    0 2px 4px rgba(15, 30, 60, 0.08),
    0 34px 70px -22px rgba(15, 40, 80, 0.38),
    0 70px 120px -40px rgba(15, 40, 80, 0.3);
}
.screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--w) * 0.139);
  background: var(--app-bg);
  container-type: inline-size;
  font-family: var(--font);
  letter-spacing: 0;
  color: var(--ink);
}
/* Everything inside the screen is sized in container units: the app's points times 100/402, so the
   miniature keeps the real screen's proportions at any width. */
.island {
  position: absolute; top: 2.9cqw; left: 50%; z-index: 3;
  width: 30.6cqw; height: 9cqw; margin-left: -15.3cqw;
  border-radius: 99px; background: #000;
}
.statusbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 13.4cqw; padding: 1.4cqw 8.2cqw 0 10cqw;
  font-size: 4.1cqw; font-weight: 600; letter-spacing: -0.01em;
}
.statusbar .icons { display: flex; align-items: center; gap: 1.6cqw; }
.statusbar svg { height: 3cqw; width: auto; }
.app { padding: 0 3.98cqw; }
.app-title { margin: 3.4cqw 0 0; font: 700 8.46cqw/1.15 var(--display); letter-spacing: -0.02em; }

/* The answer card, as in src/components/AnswerCard.tsx. */
.answer {
  position: relative;
  margin-top: 2.98cqw;
  padding: 3.5cqw 3.98cqw 0;
  border-radius: 2.98cqw;
  background: linear-gradient(172deg, #d3e5fa 0%, #e2eefc 45%, #eef5fe 100%);
  color: var(--ink);
}
.answer-top { display: flex; align-items: center; gap: 2.98cqw; }
.answer-text { flex: 1; min-width: 0; }
.answer-label { font-size: 3.23cqw; color: var(--card-ink); }
.answer-figure { display: flex; align-items: baseline; gap: 1cqw; margin-top: 0.5cqw; white-space: nowrap; }
.answer-figure strong { font: 700 9.95cqw/1.12 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.answer-figure span { font-size: 4.23cqw; color: var(--card-ink); }
.answer.is-empty .answer-figure strong,
.answer.is-empty .answer-figure span { color: rgba(0, 102, 204, 0.26); }
.ring { position: relative; width: 18.9cqw; height: 18.9cqw; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-81.94deg); }
.ring .track { stroke: rgba(255, 255, 255, 0.85); }
.ring .arc { stroke: var(--ring); transition: stroke-dashoffset 450ms cubic-bezier(0.33, 1, 0.68, 1), opacity 120ms linear; }
.ring-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.15; }
.ring-mid strong { font-size: 4.23cqw; font-weight: 600; color: var(--green); font-variant-numeric: tabular-nums; }
.ring-mid span { font-size: 3.23cqw; color: var(--card-ink); }
.answer.is-empty .ring-mid strong { color: rgba(0, 102, 204, 0.26); }
.answer-foot {
  display: flex; align-items: center; gap: 1.5cqw;
  min-height: 10.95cqw; margin-top: 2.98cqw;
  border-top: 0.5px solid rgba(0, 102, 204, 0.18);
  font-size: 3.73cqw; font-weight: 600; color: var(--green);
}
.answer-foot svg { width: 4.5cqw; height: 4.5cqw; flex: none; }
.answer-foot.is-plain { color: var(--card-ink); font-weight: 400; }

.group-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 5.5cqw 3.98cqw 1.6cqw;
  font-size: 3.6cqw; font-weight: 600; color: var(--app-soft);
}
.group-head span { color: var(--blue); font-weight: 400; font-size: 3.95cqw; }
.group { border-radius: 2.98cqw; background: #fff; padding-left: 3.98cqw; }
.row { display: flex; align-items: center; gap: 2.98cqw; min-height: 12.4cqw; padding-right: 2.4cqw; }
.row + .row { border-top: 0.5px solid #d1d1d6; margin-left: 10.9cqw; padding-left: 0; }
.row + .row .tile { margin-left: -10.9cqw; }
.tile {
  display: grid; place-items: center; flex: none;
  width: 7.96cqw; height: 7.96cqw; border-radius: 1.99cqw;
  background: var(--tile); color: var(--blue);
}
.tile svg { width: 4.6cqw; height: 4.6cqw; }
.row-label { flex: 1; min-width: 0; font-size: 4.23cqw; line-height: 1.2; }
.row-label label { display: block; }
.row-label .unit-pick {
  position: relative; display: inline-flex; align-items: center; gap: 0.6cqw;
  margin-top: 0.3cqw; font-size: 3.73cqw; color: var(--blue);
}
.unit-pick select {
  position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer;
  font-size: 16px; /* keeps iOS from zooming while the native picker is open */
}
.unit-pick svg { width: 2.9cqw; height: 2.9cqw; }
.unit-pick:focus-within { outline: 2px solid rgba(0, 102, 204, 0.5); outline-offset: 2px; border-radius: 4px; }
.field {
  display: flex; align-items: center; justify-content: flex-end; gap: 1cqw;
  width: 30.8cqw; height: 10cqw; padding: 0 3.4cqw;
  border-radius: 2.49cqw; background: var(--app-bg);
  font-size: 4.23cqw; font-variant-numeric: tabular-nums;
  transition: box-shadow 140ms ease;
}
.field:focus-within { box-shadow: inset 0 0 0 1.5px var(--blue); }
.field input {
  width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent;
  font: inherit; color: var(--ink); text-align: right; letter-spacing: 0;
}
.field .pre, .field .suf { color: var(--app-soft); flex: none; }
.field.is-flat .suf, .field:not(.is-flat) .pre.unit-dollar { display: none; }
@media (pointer: coarse) { .field input { font-size: 16px; } }

.add { display: flex; align-items: center; gap: 2.98cqw; min-height: 12.4cqw; color: var(--blue); font-size: 4.23cqw; }
.add svg { width: 6.5cqw; height: 6.5cqw; }
.app-note { margin: 2cqw 3.98cqw 0; font-size: 3.73cqw; line-height: 1.3; color: var(--app-soft); }
.app-cta {
  display: grid; place-items: center; height: 12.2cqw; margin-top: 5.5cqw;
  border-radius: 99px; background: var(--blue); color: #fff; font-size: 4.23cqw; font-weight: 600;
}
.tabbar {
  position: absolute; left: 3.5cqw; right: 3.5cqw; bottom: 5.2cqw;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: 15.4cqw; padding: 1.2cqw;
  border-radius: 99px;
  background: rgba(250, 250, 252, 0.86);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 6px 18px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.tabbar span {
  display: grid; justify-items: center; align-content: center; gap: 0.7cqw;
  border-radius: 99px; font-size: 2.6cqw; font-weight: 500; color: var(--ink);
}
.tabbar span.on { background: rgba(120, 120, 128, 0.12); color: var(--blue); }
.tabbar svg { width: 6.2cqw; height: 6.2cqw; }

/* The card's arithmetic under the phone, as the app's "How It Adds Up" sheet shows it. */
.math {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 10px;
  margin-top: 30px; font-size: 1.0625rem; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.math .op { color: var(--soft); }
.math b { font-weight: 700; color: var(--ink); }
.math-note { margin-top: 4px; color: var(--soft); font-size: 0.875rem; text-align: center; }
.stage.is-empty .math { opacity: 0.45; }

/* ---------------------------------------------------------------- sections */

.section { padding-block: var(--section); }
.section.mist { background: var(--mist); }
.section-head { max-width: 760px; }
.section-head .lede { margin-top: 22px; max-width: 36em; }

/* Specials, side by side */
.deals { width: 100%; margin-top: clamp(48px, 6vw, 72px); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.deals th {
  padding: 0 0 14px; text-align: left;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; color: var(--soft);
  border-bottom: 1px solid var(--ink);
}
.deals th.r, .deals td.r { text-align: right; }
.deals td { padding: 26px 0; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.deals .name { width: 30%; }
.deals .name strong { display: block; font: 600 clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem)/1.2 var(--display); letter-spacing: -0.025em; }
.deals .name span { display: block; margin-top: 4px; color: var(--soft); font-size: 0.9375rem; }
.deals .free { width: 16%; color: var(--ink-2); }
.deals .off { width: 30%; padding-right: 32px; }
.deals .rent { width: 24%; }
.deals .rent strong { font: 700 clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem)/1 var(--display); letter-spacing: -0.035em; }
.deals .rent span { color: var(--soft); font-size: 0.9375rem; margin-left: 2px; }
.deals tr.best .rent strong { color: var(--green); }
.bar { display: block; height: 10px; border-radius: 99px; background: var(--mist); overflow: hidden; }
.section.mist .bar { background: #e8e8ed; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--covered); transform-origin: left center; }
.bar-a i { width: 100%; }
.bar-b i { width: 72.2%; }
.bar-c i { width: 78.2%; }
.bar-d i { width: 27.9%; }
.off small { display: block; margin-top: 8px; color: var(--soft); font-size: 0.875rem; }
.deals-note { margin-top: 22px; }
.deals .name .best-tag {
  display: inline-block; margin: 0 0 0 10px; padding: 3px 9px; border-radius: 99px; vertical-align: 4px;
  background: #e3f2e6; color: var(--green); font: 600 0.75rem/1.4 var(--font); letter-spacing: 0;
}

@media (max-width: 760px) {
  .deals thead { display: none; }
  .deals, .deals tbody, .deals tr, .deals td { display: block; width: auto; }
  .deals tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding: 22px 0; border-bottom: 1px solid var(--hair); }
  .deals td, .deals .name, .deals .free, .deals .off, .deals .rent { width: auto; padding: 0; border: 0; }
  .deals .name { grid-column: 1; grid-row: 1; }
  .deals .rent { grid-column: 2; grid-row: 1; align-self: start; text-align: right; white-space: nowrap; }
  .deals .off { grid-column: 1 / -1; grid-row: 2; padding-top: 12px; }
  .deals .free { grid-column: 1 / -1; grid-row: 3; color: var(--soft); font-size: 0.875rem; }
  .deals .name .best-tag { display: block; width: fit-content; margin: 8px 0 2px; }
  .deals .free::before { content: "Free rent in total: "; }
}

/* Feature rows: copy beside a visual */
.feature { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(48px, 7vw, 112px); align-items: center; }
.feature.flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.feature.flip .feature-visual { order: -1; }
/* On phones each picture comes right after its intro, before the three points. */
@media (max-width: 980px) {
  .feature, .feature.flip { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .feature-copy { display: contents; }
  .feature .feature-visual, .feature.flip .feature-visual { order: 1; margin-top: 44px; }
  .feature .points { order: 2; }
}
.feature-copy .lede, .price .lede { margin-top: 22px; }
.points { list-style: none; margin-top: 40px; border-top: 1px solid var(--hair); }
.points li { padding: 18px 0; border-bottom: 1px solid var(--hair); }
.points h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.016em; }
.points p { margin-top: 4px; color: var(--soft); font-size: 0.9375rem; line-height: 1.5; }

/* The payment plan card, as on My Home */
.plan {
  width: min(100%, 460px); margin-inline: auto;
  padding: 26px 26px 22px;
  border-radius: 24px; background: #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(15, 30, 60, 0.04), 0 30px 60px -28px rgba(15, 40, 80, 0.25);
}
.plan-when { color: var(--soft); font-size: 0.9375rem; }
.plan-due { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.plan-due strong { font: 700 clamp(2.25rem, 1.9rem + 1.2vw, 2.75rem)/1.05 var(--display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.plan-due s { margin-right: 4px; color: var(--soft); font-size: 1.25rem; text-decoration-thickness: 1.5px; font-variant-numeric: tabular-nums; }
.plan-due .before { color: var(--soft); font-size: 0.9375rem; }
.plan-credit { margin-top: 6px; color: var(--green); font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.plan-next { display: flex; align-items: center; gap: 8px; margin-top: 2px; color: var(--ink-2); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.plan-next svg { width: 15px; height: 15px; color: var(--soft); }
.plan-chart { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hair); }
.plan-chart-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.9375rem; }
.plan-chart-head b { font-weight: 600; color: var(--soft); }
.plan-chart-head span { color: var(--blue); }
.chart { width: 100%; height: auto; margin-top: 12px; overflow: visible; }
.chart text { font-family: var(--font); font-size: 10.5px; fill: var(--soft); letter-spacing: 0; }
.chart .sel { fill: var(--ink); font-weight: 600; }
.chart .credit-label { font-size: 11.5px; }
.chart .credit-label tspan.v { fill: var(--green); font-weight: 600; }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 10px; list-style: none; font-size: 0.8125rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend b { font-weight: 600; }
.legend b.g { color: var(--green); }
.legend i { width: 10px; height: 10px; border-radius: 2px; }
.legend .k-rent { background: var(--rent); }
.legend .k-fee { background: var(--fee); }
.legend .k-credit { background: var(--covered); }
.legend .k-paid { background: var(--paid); border-radius: 50%; width: 8px; height: 8px; }
.plan-lease { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }
.plan-lease-row { display: flex; justify-content: space-between; font-size: 0.9375rem; }
.plan-lease-row span { color: var(--blue); }
.progress { height: 5px; margin-top: 10px; border-radius: 99px; background: #e5e5ea; overflow: hidden; }
.progress i { display: block; width: 29%; height: 100%; border-radius: inherit; background: var(--blue); }
.plan-dates { display: flex; justify-content: space-between; margin-top: 8px; color: var(--soft); font-size: 0.8125rem; }
.plan-cap { width: min(100%, 460px); margin: 18px auto 0; text-align: center; }

/* The move-in report and a stamped photo */
.paper-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; padding: 8px 0 72px; }
.report {
  width: min(100%, 400px);
  padding: 30px 28px 26px;
  border-radius: 6px;
  background: #fff;
  transform: rotate(-1.6deg);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(15, 30, 60, 0.05), 0 36px 64px -28px rgba(15, 40, 80, 0.3);
  font-size: 0.75rem; line-height: 1.45;
}
.report-head { display: flex; align-items: center; gap: 8px; color: var(--soft); font-size: 0.6875rem; letter-spacing: 0.02em; text-transform: uppercase; }
.report-head svg { width: 16px; height: 16px; border-radius: 4px; }
.report h3 { margin-top: 14px; font-size: 1.375rem; letter-spacing: -0.03em; }
.report-meta { margin-top: 4px; color: var(--soft); }
.report h4 { margin: 18px 0 8px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.issues { list-style: none; }
.issues li { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-top: 0.5px solid var(--hair); }
.issues b { font-weight: 600; }
.issues img { display: block; width: 56px; height: 42px; flex: none; border-radius: 3px; object-fit: cover; }
.counter-thumb, .tile-thumb { display: block; width: 56px; height: 42px; flex: none; overflow: hidden; border-radius: 3px; }
.counter-thumb img { border-radius: 0; transform: translateY(-6px) scale(1.8); }
.tile-thumb img { border-radius: 0; transform: scale(2.5); }
.areas { max-width: 54%; color: var(--ink-2); }

.stamped {
  position: absolute; right: -2%; bottom: 6px; z-index: 2;
  width: min(48%, 236px); aspect-ratio: 4 / 3;
  border-radius: 14px;
  transform: rotate(2.4deg);
  box-shadow: 0 0 0 4px #fff, 0 30px 60px -24px rgba(15, 40, 80, 0.4);
  container-type: inline-size;
  overflow: hidden;
}
.stamped > img { display: block; width: 100%; height: 100%; object-fit: cover; transform: translateY(-18px) scale(1.3); }
.stamped .shade { position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.32)); }
.stamp { position: absolute; left: 5%; bottom: 7%; display: flex; align-items: center; gap: 3.4cqw; color: #fff; white-space: nowrap; text-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.35); }
.stamp svg { width: 8.4cqw; height: 8.4cqw; flex: none; }
.stamp b { display: block; font-size: 5.5cqw; font-weight: 600; letter-spacing: -0.005em; font-variant-numeric: tabular-nums; }
.stamp span { display: block; font-size: 4.6cqw; opacity: 0.92; }
.sample-note { margin-top: 4px; color: var(--soft); font-size: 0.75rem; }
@media (max-width: 560px) { .report { padding: 24px 20px 22px; transform: rotate(-1deg); } .stamped { right: 0; width: 56%; } .areas { max-width: 40%; } }

/* When the lease ends */
.ends { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); margin-top: clamp(72px, 9vw, 120px); padding-top: 40px; border-top: 1px solid var(--hair); }
.ends h3 { font-size: 1.375rem; letter-spacing: -0.025em; }
.ends p { margin-top: 10px; color: var(--soft); max-width: 30em; }
@media (max-width: 760px) { .ends { grid-template-columns: minmax(0, 1fr); } }

/* Privacy, on the dark band */
.night { background: var(--night); color: #f5f5f7; }
.night .kicker { color: #4da3ff; }
.night .lede { color: #a1a1a6; }
.night a { color: #4da3ff; }
.promises { font: 700 clamp(2.75rem, 1.6rem + 4.6vw, 5.5rem)/1.02 var(--display); letter-spacing: -0.022em; color: #f5f5f7; }
.promises span { display: block; }
.night .lede { margin-top: 36px; max-width: 34em; }
.night .more { margin-top: 28px; }

/* Pricing */
.price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.price .lede { max-width: 28em; }
@media (max-width: 860px) { .price { grid-template-columns: minmax(0, 1fr); } }

/* The three plans: side by side, then one row each on phones */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 36px; list-style: none; border-top: 1px solid var(--ink); }
.plans li { padding: 16px 16px 0 0; }
.plans li + li { padding-left: 18px; border-left: 1px solid var(--hair); }
.plans .pn { display: block; color: var(--soft); font-size: 0.9375rem; }
.plans b { display: block; margin-top: 4px; font: 700 clamp(1.875rem, 1.5rem + 1.2vw, 2.375rem)/1.05 var(--display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.plans .per { display: block; margin-top: 2px; color: var(--ink-2); font-size: 0.9375rem; }
.plans .launch { display: block; margin-top: 8px; color: var(--soft); font-size: 0.8125rem; line-height: 1.4; }
.price-terms { margin-top: 24px; max-width: 34em; }
.price .actions { margin-top: 30px; }
@media (max-width: 520px) {
  .plans { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
  .plans li, .plans li + li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 0 8px; padding: 14px 0; border-left: 0; border-bottom: 1px solid var(--hair); }
  .plans .pn { color: var(--ink); font-size: 1.0625rem; }
  .plans b { margin-top: 0; font-size: 1.625rem; }
  .plans .per { margin-top: 0; min-width: 4.4em; }
  .plans .launch { grid-column: 1 / -1; margin-top: 4px; }
}

/* Free and Pro, with the same rows and words as the app's Pro screen (app/paywall.tsx) */
.tiers { width: 100%; border-collapse: collapse; }
.tiers th, .tiers td { padding: 16px 0; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: middle; }
.tiers thead th { padding: 0 0 12px; border-bottom: 1px solid var(--ink); font-size: 0.8125rem; font-weight: 500; color: var(--soft); }
.tiers tbody th { padding-right: 20px; font-weight: 600; letter-spacing: -0.012em; text-wrap: balance; }
.tiers td, .tiers thead th + th { width: 6.4em; color: var(--ink-2); }
.tiers .pro { color: var(--blue); font-weight: 600; }
.tiers svg { width: 18px; height: 18px; }
@media (max-width: 520px) {
  .tiers th, .tiers td { font-size: 0.9375rem; }
  .tiers td, .tiers thead th + th { width: 6.2em; }
  .tiers tbody th { padding-right: 12px; }
}

/* FAQ */
.faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); }
@media (max-width: 860px) { .faq { grid-template-columns: minmax(0, 1fr); } }
.qa { border-top: 1px solid var(--hair); }
.qa details { border-bottom: 1px solid var(--hair); }
.qa summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 22px 44px 22px 0;
  font: 600 1.1875rem/1.35 var(--display); letter-spacing: -0.022em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -9px;
  border-right: 2px solid var(--soft); border-bottom: 2px solid var(--soft);
  transform: rotate(45deg); transition: transform 220ms var(--ease);
}
.qa details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.qa summary:hover { color: var(--blue); }
.qa .a { padding: 0 44px 24px 0; color: var(--ink-2); }
.qa .a p + p { margin-top: 12px; }

/* ---------------------------------------------------------------- footer */

.foot { padding-block: 56px 48px; background: var(--paper); border-top: 1px solid var(--hair); color: var(--soft); font-size: 0.875rem; }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 28px; list-style: none; }
.foot-links a { color: var(--ink-2); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--hair); }

/* ---------------------------------------------------------------- document pages */

.doc { padding-block: clamp(56px, 8vw, 104px) var(--section); }
.doc-head { max-width: 760px; }
.doc-head .lede { margin-top: 18px; }
.doc-body { max-width: 680px; margin-top: clamp(40px, 5vw, 64px); }
.doc-body h2 { margin: 48px 0 12px; font-size: 1.5rem; letter-spacing: -0.028em; font-weight: 700; }
.doc-body h2:first-child { margin-top: 0; }
.doc-body p, .doc-body li { color: var(--ink-2); }
.doc-body p + p, .doc-body ul + p { margin-top: 14px; }
.doc-body ul { margin-top: 10px; padding-left: 22px; }
.doc-body li { margin: 8px 0; }
.doc-body li::marker { color: var(--soft); }
.summary-card {
  max-width: 680px; margin-top: 36px; padding: 22px 24px;
  border-radius: 18px; background: var(--blue-soft); color: var(--ink);
  font-size: 1.0625rem; line-height: 1.5;
}
.contact-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px;
  max-width: 760px; margin-top: 40px; padding: 28px 30px;
  border-radius: 22px; background: var(--mist);
}
.contact-card h2 { font-size: 1.5rem; letter-spacing: -0.028em; }
.contact-card p { margin-top: 6px; color: var(--soft); }
.help { max-width: 760px; margin-top: clamp(56px, 7vw, 88px); }
.help > h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); letter-spacing: -0.032em; margin-bottom: 20px; }

.lost { min-height: 70vh; display: grid; align-content: center; padding-block: 96px; }
.lost .lede { margin-top: 18px; }
.lost .actions { margin-top: 32px; }

/* ---------------------------------------------------------------- motion
   Reveal on scroll with CSS scroll-driven animations where the browser has them; elsewhere, and
   with Reduce Motion on, everything simply shows. No script decides what is visible. */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 4% cover 26%; }
    .grow .tube { animation: grow linear both; animation-timeline: view(); animation-range: entry 10% cover 42%; transform-box: fill-box; transform-origin: 50% 100%; }
    .grow .stair { animation: draw linear both; animation-timeline: view(); animation-range: entry 20% cover 46%; }
    .bar i { animation: fill linear both; animation-timeline: view(); animation-range: entry 0% cover 34%; }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleY(0.04); } to { transform: none; } }
@keyframes draw { from { stroke-dashoffset: 520; } to { stroke-dashoffset: 0; } }
@keyframes fill { from { transform: scaleX(0); } to { transform: none; } }
.stair { stroke-dasharray: 520; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
  .top, .foot, .stage, .feature-visual { display: none; }
  .section, .doc { padding-block: 24px; }
}