/* rentbloque.com — home page only (look D). The block wall, the house that
   builds itself and hands its door to the phone, the morning loop's phone,
   the questions panel, the feature rows, the cash-flow panel, the compare
   table, the free sheets, founder, pricing, the marquee and the close.
   Every motion start state is gated on html.js.motion; reduced motion and
   JS off get the finished house and the phone, static. */

/* ---------- THE WALL: CBS block in running bond, behind everything (C) ---------- */
.wall { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cpath d='M0 .75H96M0 48.75H96M.75 0V48M48.75 48V96M96.75 0V48' fill='none' stroke='%23DDD2BE' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 96px 96px; background-position: 0 0;
  -webkit-mask-image: linear-gradient(to top, #000 var(--built), transparent var(--built));
  mask-image: linear-gradient(to top, #000 var(--built), transparent var(--built)); }
.wall::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(247,241,230,.6), rgba(247,241,230,0) 70%); }

/* ---------- hero: copy left, the stage right (house -> phone), the panel under both ---------- */
.hero { position: relative; padding: var(--s6) 0 var(--s8); }
.hero-grid { display: grid; gap: var(--s5); align-items: start; }
.hero-cta .small { margin-top: var(--s4); max-width: 52ch; }
.hero-cta .small + .small { margin-top: var(--s2); }
/* phone order: head -> stage -> lede -> panel -> cta. The stage sits 24px under the h1, so the whole
   house AND the whole phone are inside a 390x844 fold, and the door lands at ~y620 (advisor 1.1). */
.hero-head { order: 1; } .stage { order: 2; } .hero-sub { order: 3; } .panel { order: 4; } .hero-cta { order: 5; }
@media (max-width: 1023px) { .panel, .hero-cta { margin-top: var(--s5); } }

/* the stage: the house and the phone share one box. Static (JS off / reduced):
   house, then phone, in flow. Motion: the phone's box sets the height and the
   house sits over it, centred, until the door becomes the phone. */
.stage { position: relative; z-index: 2; }
.stage-box { position: relative; display: grid; gap: var(--s5); justify-items: center; }
.house-wrap { position: relative; z-index: 2; width: 100%; display: grid; justify-items: center; gap: var(--s3); }  /* above the ribbon in the static layout too (advisor 1.5) */
.house { width: min(100%, 400px); aspect-ratio: 392 / 372; display: block; overflow: visible; transform-origin: 50% 90%; }
.house .blk { fill: #EFE7D8; stroke: var(--mortar); stroke-width: 1; }
.house .blk.door { fill: var(--mint); stroke: var(--door); }
.house .blk.win { fill: var(--card); }
.house .roof { fill: none; stroke: var(--palm); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.house .roof-fill { fill: var(--palm); opacity: 0; }
.house .footing { fill: var(--ink); }
.house-cap { font-family: var(--cond); font-weight: 800; font-size: 13px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink2); display: flex; gap: 10px; align-items: center; }
.house-cap i { width: 10px; height: 10px; background: var(--mint); display: inline-block; }
.js.motion .stage-box { display: block; }
/* clip-path: the dive (house scaled 2.2x) can never paint the roof over the headline (advisor 1.1) */
.js.motion .house-wrap { position: absolute; inset: 0; display: grid; justify-items: center; align-content: start; pointer-events: none; z-index: 2; clip-path: inset(0); }
@media (min-width: 1024px) { .js.motion .house-wrap { align-content: center; } }
.js.motion .house-cap { opacity: 0; }
.js.motion .phone-col { visibility: hidden; opacity: 0; }
.js.motion .phone-col.is-on { visibility: visible; }
.js.motion .phone-col:not(.is-on) .screen { display: none; }  /* the morning loop waits for the hand-off */
/* the proxy is laid out ONCE at the phone's frame and transformed down to the door, then tweened on
   transform only — no layout shift per frame (advisor 1.3, CLS 0.03 -> 0) */
.door-proxy { position: absolute; z-index: 3; background: var(--mint); border-radius: 2px; pointer-events: none; will-change: transform; }
.stage-box.is-done .house-wrap { display: none; }
/* no motion (reduced, JS off, GSAP missing): the finished house above the phone, smaller, and the stage
   does not stick — a 996px sticky stage cut the phone and Play off on a 900px screen (advisor 1.6) */
html:not(.motion) .stage { position: static; }
html:not(.motion) .house { width: min(100%, 260px); }

/* the ribbon: WebGL, feathered with a mask, travels with the sticky phone */
.ribbon { position: absolute; inset: -22% -34% -22% -34%; pointer-events: none; z-index: 0; opacity: .85;
  -webkit-mask-image: radial-gradient(50% 50% at 50% 48%, #000 25%, transparent 100%);
  mask-image: radial-gradient(50% 50% at 50% 48%, #000 25%, transparent 100%); }
.ribbon canvas { width: 100%; height: 100%; display: block; }
.ribbon::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: conic-gradient(from 210deg at 55% 50%, #DFF5EA, var(--mint) 25%, var(--door) 45%, var(--accent) 62%, #DFF5EA 80%, var(--mint)); filter: blur(60px); opacity: .5; }
.js .ribbon::before { display: none; }
.js .ribbon.gl-lost::before { display: block; }
.ribbon.gl-lost canvas { visibility: hidden; }
.js.motion .stage .ribbon { opacity: 0; }  /* fades in during the hand-off */

/* ---------- phone (pilot) ---------- */
.phone-col { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--s4); width: 100%; }
.phone { width: min(360px, 88vw); aspect-ratio: 360 / 500; background: var(--palm-ink); border: 1px solid rgba(255,255,255,.14); border-radius: 40px; padding: 12px;
  box-shadow: 0 40px 90px -20px rgba(6,56,46,.5), inset 0 0 0 1px rgba(255,255,255,.06); position: relative; z-index: 1; }
.playbtn { position: relative; z-index: 1; }  /* the ribbon is a positioned sibling now; keep the button above it */
.phone::before { content: ""; position: absolute; top: 12px; left: 50%; width: 90px; height: 24px; margin-left: -45px; background: var(--palm-ink); border-radius: 0 0 16px 16px; z-index: 7; }
.phone-badge { position: absolute; top: -14px; right: var(--s4); font-size: 12px; font-weight: 600; color: var(--ink); background: var(--card); border-radius: 99px; padding: 5px 12px; box-shadow: 0 4px 14px rgba(6,56,46,.18); z-index: 8; }
.screen { background: var(--card); color: var(--ink); border-radius: 30px; padding: 40px 18px 18px; height: 100%; position: relative; overflow: hidden; }
#scr [data-pane] { display: flex; flex-direction: column; min-height: 100%; }
.scr .cap { font-size: 13px; font-weight: 600; color: var(--ink2); }
.scr .scr-h3 { font-size: 19px; font-weight: 600; margin: 8px 0 2px; color: var(--ink); }  /* mock-UI titles are <p>, not <h3> under the h1 (advisor 4.6) */
.scr .big { font-size: 40px; font-weight: 400; letter-spacing: -.035em; line-height: 1.05; margin-top: 6px; }
.scr .sub { font-size: 14px; color: var(--ink2); }
.scr-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 14px; }
.scr-row:first-of-type { border-top: none; }
.scr-row .owe { color: var(--late); font-weight: 600; }
.scr-row .ok { color: var(--door); font-weight: 600; }
.scr .big.ok { color: var(--door); }
.chip { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 4px 9px; background: var(--ink); color: var(--card); letter-spacing: .03em; white-space: nowrap; }
.chip--late { background: var(--late); color: #fff; }
#scr [data-pane="rent"] span.chip { background: rgba(14,43,37,.06); color: var(--ink2); }
#scr [data-pane="rent"] #palmChip { transition: background-color .3s ease, color .3s ease; }
.scr button.chip { border: 1px solid var(--accent-edge); cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; min-height: 28px; padding: 0 10px; touch-action: manipulation; background: var(--accent); color: var(--on-accent); }
.scr button.chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: none; }
.meter { height: 6px; background: rgba(14,43,37,.08); border-radius: 99px; margin: 14px 0 8px; overflow: hidden; }
.meter i { display: block; height: 100%; width: 72%; background: var(--door); transition: width .85s var(--ease); }
.scr .note { margin-top: auto; padding-top: 12px; font-size: 13px; color: var(--ink2); }
#scr [data-pane] { transition: opacity .19s ease, transform .19s ease; }
#scr [data-pane].fade { opacity: 0; transform: translateY(6px); }
.scr-row.flash { animation: rowflash 1.2s ease; }
@keyframes rowflash { 0%, 100% { background: transparent; } 24% { background: rgba(93,202,165,.22); } }
.chip.pulse { animation: chippulse 1.15s ease 2; }
@keyframes chippulse { 0%, 100% { transform: none; } 45% { transform: scale(1.09); } }
#scr .rise { opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; }
#scr .rise.in { opacity: 1; transform: none; }
.tap { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(14,43,37,.07); border: 2px solid rgba(14,43,37,.42); opacity: 0; pointer-events: none; z-index: 6;
  transition: left .5s cubic-bezier(.4,0,.2,1), top .5s cubic-bezier(.4,0,.2,1), opacity .22s ease, transform .17s ease; }
.tap.on { opacity: 1; }
.tap.press { transform: scale(.66); background: rgba(14,43,37,.2); border-color: rgba(14,43,37,.66); }
.msg { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; background: var(--card); border-top: 1px solid var(--hair); border-radius: 24px; padding: 14px 16px 16px; box-shadow: 0 -14px 34px rgba(6,56,46,.14);
  transform: translateY(104%); transition: transform .44s cubic-bezier(.2,.85,.25,1); }
.msg.up { transform: none; }
.msg-hd { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink2); font-weight: 600; }
.msg-hd b { color: var(--ink); font-weight: 700; }
.msg-tag { font-size: 10px; letter-spacing: .06em; font-weight: 700; background: rgba(14,43,37,.06); color: var(--ink2); padding: 2px 6px; border-radius: 5px; margin-left: auto; }
.msg-field { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
.msg-box { flex: 1; border: 1px solid var(--hair); border-radius: 16px; padding: 9px 12px; font-size: 13px; line-height: 1.45; color: var(--ink); transition: background .3s ease, color .3s ease, border-color .3s ease, border-radius .3s ease; }
.msg-box.sent { background: var(--palm); color: var(--on-dark); border-color: var(--palm); border-radius: 16px 16px 4px 16px; }
.msg-send { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent-edge); cursor: pointer; display: grid; place-items: center; font-size: 15px; font-weight: 700; transition: opacity .3s ease; }
.msg-send.done { opacity: .3; }
.msg-deliv { height: 14px; text-align: right; font-size: 11px; color: var(--ink2); margin-top: 3px; opacity: 0; transition: opacity .3s ease; }
.msg-deliv.show { opacity: 1; }
.msg-note { margin: 7px 0 0; font-size: 12px; color: var(--ink2); }
.scr.anim-frozen, .scr.anim-frozen * { animation-play-state: paused !important; }
.playbtn { min-height: 44px; font-size: 14px; }
.playbtn .ico { font-size: 11px; color: var(--door); }

/* ---------- the panel (B): one rounded dark palm object; the three questions live in it ---------- */
.panel { position: relative; z-index: 1; background: var(--palm-mid); color: var(--on-dark); border-radius: 28px; padding: var(--s6) var(--s5); overflow: hidden; isolation: isolate;
  box-shadow: 0 40px 90px -30px rgba(6,56,46,.5); transform-origin: 50% 0; }
.panel-glow { position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 40% at 100% 0%, rgba(93,202,165,.28), transparent 70%), radial-gradient(60% 60% at 0% 100%, rgba(8,80,65,.9), transparent 70%),
    linear-gradient(160deg, #0E5B49 0%, var(--palm-mid) 45%, var(--palm-deep) 100%); }
.panel .small { color: var(--mint-soft); }
.q-hint { margin-bottom: var(--s2); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: rgba(4,36,28,.5); border-radius: 999px; padding: 4px; }
.seg button { position: relative; z-index: 1; min-height: 44px; border: 0; background: transparent; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--mint-soft); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: color .18s ease; }
.seg button[aria-pressed="true"] { color: var(--ink); }
.seg button::before { content: ""; position: absolute; inset: 0; border-radius: 999px; background: var(--card); opacity: 0; z-index: -1; transition: opacity .18s ease; }
.seg button[aria-pressed="true"]::before { opacity: 1; }
.q-cur { margin-top: var(--s4); min-height: 3.4em; }
.q-cur p { display: none; font-size: 16px; color: var(--mint-soft); }
.q-cur p.is-cur { display: block; }
.q-cur p b { display: block; color: var(--on-dark); font-weight: 500; font-size: 19px; letter-spacing: -.01em; }
.q-list { display: none; }
@media (min-width: 1024px) {
  .hero { padding-top: var(--s6); }
  .hero-grid { grid-template-columns: 7fr 5fr; gap: var(--s6) var(--s9); grid-template-rows: auto auto auto auto; }
  .hero-head { grid-column: 1; grid-row: 1; }
  .hero-sub { grid-column: 1; grid-row: 2; }
  .hero-cta { grid-column: 1; grid-row: 3; }
  .stage { grid-column: 2; grid-row: 1 / 5; position: sticky; top: 88px; align-self: start; padding-bottom: var(--s7); }
  .panel { grid-column: 1 / -1; grid-row: 4; margin-top: var(--s6); border-radius: var(--r4); padding: var(--s8) var(--s8) var(--s9); }
  .panel-in { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s9); }
  .q-hint, .seg, .q-cur { display: none; }
  .q-list { display: grid; }
  .q-list .q { position: relative; min-height: 52vh; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: var(--s4); align-content: center;
    border: 0; background: none; text-align: left; padding: var(--s6) 0; cursor: pointer; color: rgba(183,238,219,.7); transition: color .3s ease; }  /* .7: the 17px subtitles reach 4.6:1 on palm-mid (advisor 4.2) */
  .q-list .q:first-child { min-height: 40vh; align-content: start; padding-top: 0; }
  .q-list .q .q-bar { grid-column: 1; grid-row: 1 / 3; width: 2px; background: rgba(239,250,245,.16); margin: 6px 0 0 4px; min-height: 48px; position: relative; overflow: hidden; border-radius: 2px; align-self: stretch; }
  .q-list .q .q-bar i { position: absolute; inset: 0; background: var(--mint); transform: scaleY(0); transform-origin: top; }
  .q-list .q .t { grid-column: 2; grid-row: 1; display: block; font-size: clamp(30px, 3vw, 42px); line-height: 1.05; letter-spacing: -.03em; font-weight: 300; color: inherit; max-width: 18ch; }
  .q-list .q .s { grid-column: 2; grid-row: 2; display: block; margin-top: var(--s3); font-size: 17px; max-width: 40ch; color: inherit; }
  .q-list .q[aria-pressed="true"] { color: var(--on-dark); }
  .q-list .q[aria-pressed="true"] .s { color: var(--mint-soft); }
  .q-list .q:focus-visible { outline-offset: 8px; border-radius: var(--r1); }
}

/* ---------- stats: a hairline ticker strip (A) ---------- */
.stats { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: var(--s6) 0; }
.tick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s4); align-items: start; }
@media (min-width: 900px) { .tick { grid-template-columns: repeat(4, 1fr) 1.6fr; align-items: center; } }
.tick .cap { grid-column: 1 / -1; max-width: 38ch; }
@media (min-width: 900px) { .tick .cap { grid-column: auto; justify-self: end; text-align: right; } }

.viz { padding: var(--s5); }
@media (min-width: 768px) { .viz { padding: var(--s6); } }
.viz .label { margin-bottom: var(--s3); }
.viz .note { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--hair); }
.viz .big { font-size: 40px; font-weight: 300; letter-spacing: -.035em; line-height: 1; }
.viz .sub { font-size: 14px; color: var(--ink2); margin: 4px 0 var(--s3); }
.bar-row { display: grid; grid-template-columns: 88px 1fr 64px 52px; gap: var(--s3); align-items: center; font-size: 14px; padding: 10px 0; border-top: 1px solid var(--hair); }
.bar-row > span:first-child { color: var(--ink); font-weight: 600; }
.track { height: 8px; border-radius: 99px; background: var(--paper2); overflow: hidden; display: block; }
.track i { display: block; height: 100%; width: var(--w, 0%); background: var(--door); transform-origin: left; border-radius: 99px; }
.bar-row .amt { text-align: right; color: var(--ink2); }
/* the chip flip: two faces on a 3D card; .is-paid turns it over (A) */
.flip { position: relative; height: 24px; perspective: 400px; }
.flip .face { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 700; letter-spacing: .04em; border-radius: 999px; background: rgba(93,202,165,.22); color: var(--door); backface-visibility: hidden; transition: transform .7s var(--ease); }
.flip .face.late { background: rgba(181,57,42,.12); color: var(--late); }
.flip .face.b { transform: rotateX(180deg); }
.flip.is-paid .face.a { transform: rotateX(-180deg); }
.flip.is-paid .face.b { transform: rotateX(0); }

/* the jobs sheet (C): the checklist ticks itself; the toggle swaps the crew's words */
.sheet-hd { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.lang-seg { display: inline-flex; background: var(--paper2); border-radius: 999px; padding: 3px; gap: 2px; }
.lang-seg button { border: 0; background: transparent; min-height: 36px; padding: 0 14px; border-radius: 999px; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--ink2); touch-action: manipulation; }
.lang-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.viz h3 { margin-top: var(--s3); }
.chk { list-style: none; padding: 0; margin: var(--s3) 0 0; }
.chk li { display: grid; grid-template-columns: 24px 1fr auto; gap: var(--s3); align-items: center; padding: 9px 0; border-top: 1px solid var(--hair); font-size: 15px; }
.chk li:first-child { border-top: 0; }
.chk .box { width: 20px; height: 20px; border: 1.5px solid var(--hair2); border-radius: 6px; display: grid; place-items: center; background: var(--card); }
.chk .box svg { width: 14px; height: 14px; stroke: var(--door); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.chk li.done .name { color: var(--ink2); text-decoration: line-through; text-decoration-color: var(--hair2); }
.chk li.now .name { font-weight: 600; }
.chk li.now .box { border-color: var(--late); }
.chk .pid { font-size: 11px; color: var(--ink2); letter-spacing: .04em; margin-right: 8px; font-variant-numeric: tabular-nums; }
.tag { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px; flex: none; letter-spacing: .03em; white-space: nowrap; }
.tag--late { background: rgba(181,57,42,.12); color: var(--late); }
.tag--ok { background: rgba(93,202,165,.22); color: var(--door); }
.block-line { display: flex; gap: var(--s3); align-items: baseline; padding: var(--s3) 0; border-top: 1px solid var(--hair); font-size: 15px; }
.spent { display: grid; gap: var(--s2); margin-top: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--hair); }
.spent .num { color: var(--ink2); }

/* ---------- cash flow: the dark palm panel (A), chart bars scrub up ---------- */
.cashflow { padding: 0 0 var(--pad); }
.cf-grid { display: grid; gap: var(--s7); margin-top: var(--s7); position: relative; z-index: 1; }
.cf-grid > * { min-width: 0; }  /* the chart's six month labels must not widen the column past the dark panel (360px: it ate the right gutter) */
@media (max-width: 479px) { .months, .mo-lbls { gap: 6px; } .chart { padding: var(--s4); } }
@media (min-width: 900px) { .cf-grid { grid-template-columns: 5fr 7fr; gap: var(--s9); } }
.cf-figs { display: grid; gap: var(--s6); align-content: start; }
.cf-figs .fig { margin-top: var(--s2); }
.cf-figs .small { margin-top: var(--s1); }
.cf-lines { border-top: 1px solid var(--hair-dark); padding-top: var(--s3); }
.cf-line { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s2) 0; font-size: 15px; color: var(--soft-dark); }
.cf-line b { color: var(--on-dark); font-weight: 400; }
.cf-line .num { color: var(--on-dark); }
.chart { border: 1px solid var(--hair-dark); border-radius: var(--r3); padding: var(--s5); background: rgba(239,250,245,.03); align-self: start; }
.months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s3); align-items: end; height: 190px; margin-top: var(--s5); }
.mo { display: flex; gap: 5px; align-items: flex-end; height: 100%; }
.mo i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; transform-origin: bottom; }
.mo .in { background: var(--mint); }
.mo .out { background: var(--clay); }
.mo-lbls { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s3); text-align: center; }  /* minmax(0,…): six equal columns, never min-content wide */
.mo-lbls span { font-size: 12px; color: var(--soft-dark); }
.mo-lbls .net { display: block; color: var(--on-dark); font-weight: 500; font-size: 13px; }
.legend { display: flex; gap: var(--s4); margin-top: var(--s4); font-size: 13px; color: var(--soft-dark); flex-wrap: wrap; }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.sw--in { background: var(--mint); } .sw--out { background: var(--clay); }
.legend .push { margin-left: auto; }
.cf-foot { margin-top: var(--s6); max-width: 62ch; position: relative; z-index: 1; }

/* ---------- compare ---------- */
.compare { padding: var(--pad) 0; }
.compare .cap { margin-top: var(--s4); }
.compare .cap + .cap { margin-top: var(--s2); }

/* ---------- free sheets, founder, pricing, faq ---------- */
.free { padding: var(--pad) 0; }
.free .cta-band { margin-top: var(--s7); }
.founder { padding: var(--pad) 0; }
.founder .inner { max-width: 700px; }
.founder .body { margin-top: var(--s5); font-size: 18px; }
.founder .body + .body { margin-top: var(--s4); }
.pricing { padding: var(--pad) 0; }
.prices { display: grid; gap: var(--s6); margin-top: var(--s6); }
@media (min-width: 640px) { .prices { grid-template-columns: 1fr 1fr; max-width: 760px; } }
.price { border-top: 1px solid var(--hair2); padding-top: var(--s4); }
.fig--price { font-size: clamp(64px, 9vw, 112px); font-weight: 200; letter-spacing: -.05em; margin-top: var(--s3); }
.fig--price small { font-size: .24em; font-weight: 400; letter-spacing: -.01em; margin-left: 6px; }
.price .body { margin-top: var(--s3); }
.pricing .pair { margin-top: var(--s7); }
.pricing .cap { margin-top: var(--s4); }

/* ---------- marquee (C): the page's own words on the accent band, near the close ---------- */
.marq { background: var(--accent); color: var(--on-accent); overflow: hidden; padding: 12px 0; }
.marq-track { display: flex; width: max-content; animation: marq 40s linear infinite; }
.marq-track.is-off { animation-play-state: paused; }  /* off screen: no compositor work (advisor 3.4) */
.marq-track span { font-family: var(--cond); font-weight: 800; text-transform: uppercase; font-size: 24px; letter-spacing: .03em; padding: 0 26px; white-space: nowrap; display: inline-flex; align-items: center; gap: 26px; }
.marq-track span::after { content: ""; width: 10px; height: 10px; background: var(--on-accent); display: inline-block; opacity: .8; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- close + form: dark palm, the ribbon again ---------- */
.close { position: relative; background: var(--palm-deep); color: var(--on-dark); padding: var(--pad) 0; overflow: clip; }
.ribbon--close { inset: -20% -10% -20% 30%; opacity: .75;
  -webkit-mask-image: radial-gradient(55% 60% at 60% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(55% 60% at 60% 50%, #000 30%, transparent 100%); }
.close-grid { position: relative; z-index: 1; display: grid; gap: var(--s7); align-items: start; }
@media (min-width: 900px) { .close-grid { grid-template-columns: 1.1fr .9fr; gap: var(--s9); } }
.close .h1 { color: var(--on-dark); }
.close .h1 em { color: var(--mint); }
.close .body { margin-top: var(--s5); max-width: 44ch; color: var(--soft-dark); }
.close .body b { color: var(--on-dark); }
.close .body a { color: var(--mint); }
.close .price-note { margin-top: var(--s4); }
.close .form { padding: var(--s5); }
@media (min-width: 768px) { .close .form { padding: var(--s6); } }

/* ---------- motion start states (JS on, motion allowed) ---------- */
.js.motion [data-words] .w { display: inline-block; opacity: 0; transform: translateY(.6em) rotate(1.5deg); }
.js.motion .house .blk { opacity: 0; }
.js.motion .house .roof { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js.motion .house .footing { opacity: 0; }
.js.motion [data-bars] .track i, .js.motion .spent .track i { transform: scaleX(0); }
.js.motion [data-chart] .mo i { transform: scaleY(0); }
.js.motion .chk .box svg path { stroke-dasharray: 24; stroke-dashoffset: 24; }
.js.motion .chk li.done .box svg path.is-in { stroke-dashoffset: 0; transition: stroke-dashoffset .35s ease; }

/* ---------- reduced motion: the finished house and the phone, static ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --built: 100% !important; }
  .marq-track { animation: none; }
  .js .ribbon::before { display: block; }
  .ribbon canvas { display: none; }
  .ribbon { opacity: 1; }
}