/* ============================================================
   Carousel — Tenant Screening v4
   Frame 135 sections. Loads AFTER tenant-screening-v3.css.
   Micro-animation vocabulary: quiet fades, typed text, staggered
   pops — claude.com/cowork inspired. How-it-works: granola.ai
   sticky-tab pattern.
   ============================================================ */

/* ---------- hero window ---------- */
.v4-hero-win {
  max-width: 1240px;
  margin: clamp(20px, 2.5vw, 36px) auto 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(26, 23, 20, 0.04), 0 24px 60px -24px rgba(26, 23, 20, 0.18);
  overflow: hidden;
  position: relative;
}
.v4hw-dots { display: flex; gap: 7px; padding: 15px 18px; position: absolute; top: 0; left: 0; z-index: 3; }
.v4hw-dots i { width: 11px; height: 11px; border-radius: 50%; }
.v4hw-dots i:nth-child(1) { background: #F0625A; }
.v4hw-dots i:nth-child(2) { background: #F5BD4F; }
.v4hw-dots i:nth-child(3) { background: #8FBF45; }
.v4hw-body { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(380px, 40vw, 520px); }
.v4hw-app {
  position: relative;
  background: linear-gradient(135deg, #F6EEDD 0%, #FBF7EE 42%, #FDFBF6 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(32px, 4vw, 56px);
}
.v4hw-appicon {
  position: absolute; top: 44px; left: 20px;
  width: 30px; height: 30px; border-radius: 8px; background: #191613;
  display: grid; place-items: center; color: #fff;
}
.v4hw-lang {
  position: absolute; top: 46px; right: 20px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--muted);
}
.v4hw-swap { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.v4hw-swap .v4hw-logo {
  width: 44px; height: 44px; border-radius: 11px; background: #191613;
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 6px 16px -6px rgba(26, 23, 20, 0.4);
}
.v4hw-swap .v4hw-logo img { width: 26px; height: 26px; object-fit: contain; filter: invert(1); }
.v4hw-swap-arr { color: var(--muted-2); }
@media (prefers-reduced-motion: no-preference) {
  .rv.in .v4hw-swap .v4hw-logo { animation: v4-pop .55s cubic-bezier(.34, 1.4, .5, 1) both; }
  .rv.in .v4hw-swap .v4hw-logo:last-child { animation-delay: .18s; }
  .rv.in .v4hw-swap-arr { animation: v4-fade .5s ease .32s both; }
}
@keyframes v4-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes v4-fade { from { opacity: 0; } to { opacity: 1; } }
.v4hw-title { font-family: var(--sans); font-weight: 600; font-size: clamp(19px, 1.7vw, 23px); color: #6f675c; margin: 0; }
.v4hw-invited { font-size: 12.5px; color: var(--muted-2); margin: 10px 0 26px; }
.v4hw-field { width: min(320px, 100%); text-align: left; }
.v4hw-field label { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 7px; }
.v4hw-input {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; font-size: 14.5px; color: var(--ink);
  box-shadow: 0 1px 2px rgba(26, 23, 20, 0.04);
}
.v4hw-input .v4hw-cc { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13.5px; border-right: 1px solid var(--line); padding-right: 9px; }
.v4hw-num { flex: 1; white-space: nowrap; overflow: hidden; color: var(--muted-2); }
.v4hw-num.is-typing { color: var(--ink); }
.v4-caret { display: inline-block; width: 1.5px; height: 1.05em; background: var(--ink); vertical-align: -0.18em; margin-left: 1px; opacity: 0; }
.is-typing .v4-caret, .v4-type-line .v4-caret { opacity: 1; animation: v4-caret 1s steps(1) infinite; }
@keyframes v4-caret { 50% { opacity: 0; } }
.v4hw-input > svg:last-child { color: var(--muted-2); flex-shrink: 0; }
.v4hw-img { position: relative; overflow: hidden; background: #E8E0CF; }
.v4hw-img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 100%;
  transform: scale(1.04);
  transition: transform 6s cubic-bezier(.2, .6, .2, 1);
}
.rv.in .v4hw-img img { transform: scale(1); }

/* ticker — small mono strip */
.peek-ticker { margin-top: clamp(36px, 4vw, 56px); }
.pt-stat { align-items: baseline; }
.pt-lab { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
.pt-num { font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--muted); }
.pt-num-u { font-size: 10.5px; }

/* ---------- trusted by — 3-up quote carousel ---------- */
.v4-trust .wrap { max-width: 1240px; }
.v4-trust-h { font-family: var(--serif); font-weight: 420; font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -0.01em; color: var(--ink); text-align: center; margin: 0 0 clamp(44px, 5vw, 72px); }
.v4-trust-h em { font-style: italic; font-weight: 400; }
.v4t-viewport { overflow: hidden; }
.v4t-track { display: flex; transition: transform .6s cubic-bezier(.3, .8, .3, 1); }
.v4t-card {
  flex: 0 0 33.3333%;
  min-width: 0;
  padding: 6px clamp(20px, 2.6vw, 38px) 0;
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 320px;
}
.v4t-co { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; color: var(--ink); margin-bottom: 26px; }
.v4t-co svg { flex-shrink: 0; }
.v4t-quote { font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); margin: 0; }
.v4t-quote b { font-weight: 600; }
.v4t-mid { margin-top: auto; padding-top: 26px; }
.v4t-story {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px;
  background: #fff; text-decoration: none;
  transition: background .18s ease, border-color .18s ease;
}
.v4t-story:hover { background: var(--faint); border-color: var(--muted-2); }
.v4t-by { font-size: 12px; color: var(--muted); margin-top: 26px; }
.v4t-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: clamp(36px, 4vw, 56px); }
.v4t-arrow {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.v4t-arrow:hover { background: var(--faint); }
.v4t-arrow:active { transform: scale(.94); }
.v4t-dots { display: flex; gap: 9px; }
.v4t-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); border: 0; padding: 0; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.v4t-dot.is-on { background: var(--ink); transform: scale(1.2); }

/* ---------- how it works — granola sticky tabs ---------- */
.v4-how { background: #F6F3EC; padding-top: clamp(96px, 10vw, 150px); padding-bottom: clamp(96px, 10vw, 150px); }
.v4-how .wrap { max-width: 1240px; }
.v4-how-title { font-family: var(--serif); font-weight: 460; font-size: clamp(34px, 3.6vw, 50px); letter-spacing: -0.012em; color: var(--ink); margin: 0 0 clamp(56px, 7vw, 110px); }
.v4-how-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(36px, 5vw, 90px); align-items: start; }
.v4-how-rail { position: sticky; top: calc(var(--nav-h, 134px) + 40px); display: flex; flex-direction: column; }
.v4-tab {
  appearance: none; background: none; border: 0; padding: 13px 0 14px; cursor: pointer;
  text-align: left; font-family: var(--serif); font-size: 17.5px; letter-spacing: 0.002em;
  color: var(--muted-2); position: relative;
  border-bottom: 1px solid var(--line);
  transition: color .3s ease;
}
.v4-tab:hover { color: var(--muted); }
.v4-tab.is-active { color: var(--ink); }
.v4-tab-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.v4-tab-bar i { display: block; height: 100%; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left center; }
.v4-tab.is-active .v4-tab-bar i { animation: v4-tabfill var(--v4-dwell, 9s) linear forwards; }
.v4-how.is-paused .v4-tab.is-active .v4-tab-bar i { animation-play-state: paused; }
@keyframes v4-tabfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .v4-tab.is-active .v4-tab-bar i { animation: none; transform: scaleX(1); }
}

.v4-how-copy { position: relative; min-height: 96px; margin-bottom: clamp(24px, 3vw, 40px); }
.v4-copy { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
.v4-copy.is-active { opacity: 1; transform: none; pointer-events: auto; transition-delay: .15s; }
.v4-copy h3 { font-family: var(--serif); font-weight: 480; font-size: clamp(21px, 2vw, 26px); color: var(--ink); margin: 0 0 10px; letter-spacing: -0.008em; }
.v4-copy p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 52ch; }

.v4-how-stage { position: relative; }
.v4-scene { position: absolute; inset: 0; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
.v4-scene.is-active { position: relative; opacity: 1; transform: none; pointer-events: auto; transition-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
  .v4-scene, .v4-copy { transition: opacity .3s ease; transform: none; }
}

/* shared panel + window chrome */
.v4-panel {
  border-radius: 20px;
  padding: clamp(24px, 3.4vw, 52px) clamp(20px, 3vw, 46px);
  min-height: clamp(380px, 34vw, 470px);
  display: flex; align-items: stretch; justify-content: center;
  overflow: hidden;
}
.v4-panel-cream { background: linear-gradient(100deg, #E9DFC8 0%, #F5EFE0 30%, #FAF6EC 55%, #EFE7D3 100%); }
.v4-panel-green { background: linear-gradient(100deg, #EFDDCD 0%, #F7EEE2 32%, #FCF7F0 55%, #EDDBC8 100%); }
.v4-win {
  background: #F7F2E7;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 18px 44px -18px rgba(60, 52, 38, 0.28);
  width: min(660px, 100%);
  margin-bottom: calc(-1 * clamp(24px, 3.4vw, 52px));
  padding: 16px 26px 34px;
}
.v4-win-dots { display: flex; gap: 5px; margin-bottom: 16px; }
.v4-win-dots i { width: 7px; height: 7px; border-radius: 50%; background: #D4CBB8; }
.v4-win-title { font-family: var(--serif); font-weight: 480; font-size: clamp(20px, 1.9vw, 25px); color: var(--ink); margin: 0 0 12px; letter-spacing: -0.006em; }
.v4-chips { display: flex; gap: 8px; margin-bottom: 18px; }
.v4-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted);
  border: 1px solid #E2DAC8; border-radius: 999px; padding: 5px 11px; background: rgba(255,255,255,.5);
}
.v4-chip svg { flex-shrink: 0; opacity: .7; }
.v4-chip .v4-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: #C97F3D; }

/* scene 1 — the brief */
.v4-brief {
  background: #fff; border-radius: 12px;
  box-shadow: 0 2px 10px rgba(60, 52, 38, 0.07);
  padding: 20px 22px 22px;
}
.v4-brief-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 13px; }
.v4-brief-h svg { color: #C97F3D; }
.v4-brief-lead { font-size: 14.5px; line-height: 1.6; color: var(--ink); margin: 0 0 12px; min-height: 3.2em; }
.v4-brief ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.v4-brief li { position: relative; padding-left: 15px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.v4-brief li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 4px; height: 4px; border-radius: 50%; background: var(--muted-2); }
/* staggered pop-in, driven by .is-run on the scene */
.v4-stagger { opacity: 0; transform: translateY(7px); transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--sd, 0ms); }
.is-run .v4-stagger { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .v4-stagger { opacity: 1; transform: none; } }

/* scene 2 — verify */
.v4-verify { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; width: min(660px, 100%); align-self: center; }
.v4-vid { background: #262622; border-radius: 12px; position: relative; min-height: 128px; display: grid; place-items: center; box-shadow: 0 14px 34px -16px rgba(50, 55, 35, 0.4); }
.v4-vid + .v4-vid { margin-top: 14px; }
.v4-vid-ph { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #6d6d64; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; padding: 0 12px; }
.v4-vid-ctl { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.v4-vid-ctl i { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.14); display: grid; place-items: center; color: #ddd; }
.v4-vid-ctl i.v4-hang { background: #D9564A; color: #fff; }
.v4-chat {
  background: #FDFCF8; border-radius: 14px;
  box-shadow: 0 14px 34px -16px rgba(50, 55, 35, 0.3);
  padding: 20px 22px; display: flex; flex-direction: column; min-height: 300px;
}
.v4-chat .v4-win-title { font-size: 19px; }
.v4-type-line { font-size: 13.5px; color: var(--muted); min-height: 1.5em; }
.v4-ask { margin-top: auto; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 8px 8px 16px; box-shadow: 0 1px 4px rgba(26,23,20,.05); }
.v4-ask span { flex: 1; font-size: 13.5px; color: var(--muted-2); }
.v4-ask i { width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; transition: transform .25s cubic-bezier(.34, 1.4, .5, 1); }
.v4-ask:hover i { transform: translateY(-2px); }

/* scene 3 — decision */
.v4-decide { position: relative; width: min(660px, 100%); align-self: center; }
.v4-decide .v4-win { border-radius: 14px; margin-bottom: 0; padding-bottom: 84px; background: #FBF9F2; width: 100%; }
.v4-outcome-h { font-size: 12px; font-weight: 700; color: var(--ink); margin: 4px 0 10px; }
.v4-outcome { display: flex; flex-direction: column; gap: 8px; }
.v4-outcome-row { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #3E6B4F; }
.v4-outcome-row svg { flex-shrink: 0; }
.v4-actions {
  position: absolute; right: clamp(12px, 3vw, 34px); bottom: -26px;
  width: min(330px, 78%);
  background: #fff; border-radius: 12px;
  box-shadow: 0 20px 50px -18px rgba(50, 45, 30, 0.35), 0 0 0 1px rgba(26,23,20,0.04);
  overflow: hidden;
}
.v4-action { display: flex; align-items: center; gap: 12px; padding: 13px 16px; font-size: 13.5px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--faint); cursor: default; transition: background .15s ease; }
.v4-action:last-child { border-bottom: 0; }
.v4-action:hover { background: var(--faint-2); }
.v4-action .v4-act-ic { width: 28px; height: 28px; border-radius: 8px; background: var(--faint); display: grid; place-items: center; color: var(--muted); flex-shrink: 0; }

/* ---------- your team gets their week back ---------- */
.v4-week { padding-bottom: 0; overflow: hidden; }
.v4-week .wrap { max-width: 1120px; position: relative; z-index: 2; }
.v4-week-h { font-family: var(--serif); font-weight: 440; font-size: clamp(38px, 4.6vw, 62px); line-height: 1.06; letter-spacing: -0.015em; color: var(--ink); margin: 0; max-width: 10ch; }
.v4-week-h em { font-style: italic; font-weight: 400; }
.v4-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); border-top: 1px solid var(--line); margin-top: clamp(36px, 4vw, 56px); padding-top: clamp(24px, 3vw, 36px); }
.v4-stat-n { font-family: var(--serif); font-weight: 420; font-size: clamp(34px, 3.4vw, 48px); color: var(--ink); letter-spacing: -0.01em; }
.v4-stat-n small { font-size: 0.42em; color: var(--muted); margin-left: 3px; letter-spacing: 0; }
.v4-stat-l { font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 6px; }
.v4-stat-s { font-size: 12.5px; color: var(--muted-2); margin-top: 3px; line-height: 1.45; }
.v4-calc {
  margin-top: clamp(36px, 4vw, 56px);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(232, 228, 221, 0.9);
  border-radius: 16px;
  box-shadow: 0 24px 60px -28px rgba(26, 23, 20, 0.28);
  padding: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 40px);
}
.v4-calc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.v4-calc-q { font-size: clamp(16px, 1.5vw, 19px); font-weight: 500; color: var(--ink); margin: 0; max-width: 26ch; }
.v4-calc-big { font-family: var(--serif); font-size: clamp(30px, 3vw, 42px); color: var(--ink); white-space: nowrap; }
.v4-calc-big em { font-style: normal; font-family: var(--sans); font-size: 13px; color: var(--muted-2); margin-left: 6px; }
.v4-calc input[type="range"] {
  width: 100%; margin: 18px 0 6px; appearance: none; height: 3px; border-radius: 2px;
  background: linear-gradient(to right, var(--ink) 0%, var(--ink) var(--fill, 32%), var(--line) var(--fill, 32%));
  outline-offset: 6px;
}
.v4-calc input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(26, 23, 20, 0.2); cursor: grab;
}
.v4-calc input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
.v4-calc-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 40px); margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--faint); }
.v4-co-n { font-family: var(--serif); font-size: clamp(26px, 2.6vw, 36px); color: var(--ink); }
.v4-co-n small { font-size: 0.45em; color: var(--muted); margin-left: 2px; }
.v4-co-l { font-size: 12px; color: var(--muted-2); margin-top: 4px; }
.v4-week-img { margin-top: clamp(-90px, -6vw, -40px); position: relative; z-index: 1; pointer-events: none; }
.v4-week-img img { display: block; width: 100%; height: auto; }

/* ---------- how leasing teams (og on painting) ---------- */
.sv-snaps .snaps-beige {
  background: url("orch-bg2.png") center / cover no-repeat;
}

/* ---------- screening that learns ---------- */
.v4-learn .wrap { max-width: 1180px; }
.v4-learn-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.v4-learn-h { font-family: var(--sans); font-weight: 700; font-size: clamp(26px, 2.7vw, 38px); line-height: 1.18; letter-spacing: -0.015em; color: var(--ink); margin: 0; }
.v4-learn-h span { color: var(--muted-2); }
.v4-learn-link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 26px; font-size: 13.5px; font-weight: 700; color: var(--ink);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.v4-learn-link:hover { text-decoration-thickness: 2px; }
.v4-learn-quote { margin: 30px 0 0; font-size: 15px; line-height: 1.62; color: var(--ink-soft); border: 0; padding: 0; }
.v4-learn-by { margin-top: 16px; font-size: 13px; }
.v4-learn-by b { display: block; color: var(--ink); font-weight: 600; }
.v4-learn-by span { color: var(--muted-2); }

.v4-policy {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 50px -24px rgba(26, 23, 20, 0.18);
  padding: clamp(24px, 2.6vw, 36px) clamp(24px, 2.6vw, 38px);
}
.v4-policy-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.v4-policy-h { font-family: var(--serif); font-weight: 480; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; color: var(--ink); margin: 0; letter-spacing: -0.008em; }
.v4-policy-pdf {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; background: var(--faint-2);
}
.v4-policy-meta { display: flex; flex-direction: column; gap: 9px; margin: 20px 0 4px; }
.v4-policy-mrow { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); }
.v4-policy-mrow svg { color: var(--muted-2); flex-shrink: 0; }
.v4-policy-ppl { display: flex; align-items: center; gap: 8px; }
.v4-avatars { display: flex; }
.v4-av { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; }
.v4-av + .v4-av { margin-left: -7px; }
.v4-policy-sec { font-size: 15px; font-weight: 700; color: var(--ink); margin: 22px 0 9px; }
.v4-policy-body { font-size: 13.5px; line-height: 1.62; color: var(--muted-2); margin: 0; }
.v4-suggest {
  margin-top: 18px; background: var(--faint-2); border: 1px solid var(--faint);
  border-radius: 11px; padding: 14px 16px; position: relative; overflow: hidden;
}
.v4-suggest::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(201, 127, 61, 0.07) 50%, transparent 70%);
  transform: translateX(-100%);
}
.rv.in .v4-suggest::after { animation: v4-shimmer 2.4s ease .8s 1; }
@keyframes v4-shimmer { to { transform: translateX(100%); } }
.v4-suggest-tag {
  display: inline-flex; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #9A6B1F; background: #FDF2DD; border-radius: 5px; padding: 3px 8px; margin-bottom: 9px;
}
.v4-suggest p { font-size: 13px; line-height: 1.58; color: var(--muted); margin: 0; }

/* ---------- built for the leasing office ---------- */
.v4-office .wrap { max-width: 1180px; }
.v4-office-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 90px); align-items: start; }
.v4-office-h { font-family: var(--serif); font-weight: 460; font-size: clamp(28px, 3vw, 40px); line-height: 1.12; color: var(--ink); margin: 0; letter-spacing: -0.01em; }
.v4-office-r p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }
.v4-office-cta { margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; }
.v4-office-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 18px; margin-top: clamp(36px, 4vw, 56px); }
.v4o-card { position: relative; border-radius: 16px; overflow: hidden; background: #D9CFBC; min-height: clamp(280px, 30vw, 400px); }
.v4o-card .islot { position: absolute; inset: 0; width: 100%; height: 100%; }
.v4o-badges { position: absolute; left: 20px; bottom: 20px; display: flex; gap: 10px; z-index: 3; pointer-events: none; }
.v4o-badge {
  width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; color: #fff;
  box-shadow: 0 8px 20px -8px rgba(26, 23, 20, 0.5);
}
.v4o-badge.is-green { background: #7A8A5E; }
.v4o-badge.is-black { background: #17140F; }
.v4o-phone {
  position: absolute; right: clamp(14px, 3vw, 40px); top: 24px; bottom: 0; z-index: 3;
  width: min(196px, 52%);
  background: #FDFCF8; border-radius: 22px 22px 0 0;
  box-shadow: 0 22px 60px -20px rgba(26, 23, 20, 0.45), 0 0 0 1px rgba(26,23,20,0.06);
  padding: 12px 15px 0; pointer-events: none;
  display: flex; flex-direction: column; gap: 10px;
}
.v4o-status { display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 600; color: var(--ink); padding: 2px 4px; }
.v4o-status svg { opacity: .8; }
.v4o-phone-nav { display: flex; align-items: center; justify-content: space-between; }
.v4o-pnbtn { width: 26px; height: 26px; border-radius: 50%; background: var(--faint); display: grid; place-items: center; color: var(--muted); }
.v4o-phone-title { font-family: var(--serif); font-weight: 480; font-size: 17px; line-height: 1.2; color: var(--ink); letter-spacing: -0.005em; }
.v4o-phone .v4-chips { margin-bottom: 4px; flex-wrap: wrap; gap: 6px; }
.v4o-phone .v4-chip { font-size: 10px; padding: 4px 8px; border-color: var(--faint); background: #fff; }
.v4o-snap-h { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; color: var(--ink); }
.v4o-snap-h svg { color: #C97F3D; }
.v4o-phone ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.v4o-phone li { position: relative; padding-left: 11px; font-size: 10.5px; line-height: 1.5; color: var(--muted); }
.v4o-phone li::before { content: ""; position: absolute; left: 1px; top: 0.55em; width: 3px; height: 3px; border-radius: 50%; background: var(--muted-2); }

/* ============================================================
   v4.1 — hero cut by ticker, scroll-driven how-it-works,
   unified section headings
   ============================================================ */

/* hero window runs behind the ticker strip */
.sv-hero { padding-bottom: 0; }
.v4-hero-clip { overflow: hidden; }
.sv-hero .v4-hero-win { margin-bottom: -60px; }
.v4hw-app { justify-content: flex-start; padding-top: clamp(72px, 8vw, 120px); }
.v4hw-title { line-height: 1.25; }
.v4hw-body { min-height: clamp(420px, 44vw, 560px); }
.v4hw-verify {
  margin-top: 14px; width: min(320px, 100%);
  appearance: none; border: 0; cursor: pointer;
  background: #A8A49C; color: #fff;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  border-radius: 10px; padding: 12px 14px;
  transition: background .2s ease;
}
.v4hw-verify:hover { background: #98948b; }
.sv-hero .peek-ticker {
  position: relative; z-index: 2; margin: 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* unified section headings: big serif header, small black subheader */
.v4-trust-h, .v4-how-title, .v4-week-h, .v4-learn-h, .v4-office-h,
.sv .sv-h2 {
  font-family: var(--serif); font-weight: 450;
  font-size: clamp(38px, 4vw, 56px);
  line-height: 1.08; letter-spacing: -0.012em; color: var(--ink);
}
.sv:not(.sv-hero) .sv-sub,
.v4-learn-sub, .v4-office-sub {
  line-height: 1.6; color: var(--ink); font-weight: 400;
}
.v4-learn-sub, .v4-office-sub { margin: 14px 0 0; max-width: 46ch; }
.v4-week-h { max-width: none; }
.v4-office-cta { margin-top: 26px; }

/* how it works — granola scroll-driven: sticky rail, flowing steps */
.v4-how-rail { top: calc(var(--nav-h, 134px) + 48px); }
.v4-how-flow { display: flex; flex-direction: column; gap: clamp(110px, 12vw, 200px); }
.v4-how-flow .v4-copy {
  position: static; opacity: 1; transform: none; pointer-events: auto;
  margin-bottom: clamp(20px, 2.4vw, 32px); transition: none;
}
.v4-how-flow .v4-copy h3 { font-family: var(--serif); font-weight: 470; font-size: clamp(24px, 2.3vw, 32px); }
.v4-how-flow .v4-copy p { color: var(--ink); font-size: 15.5px; }
.v4-how-flow .v4-scene {
  position: static; opacity: 1; transform: none; pointer-events: auto; transition: none;
}
/* JS drives the underline as scroll progress */
.v4-tab.is-active .v4-tab-bar i { animation: none; }
.v4-tab .v4-tab-bar i { transition: transform .1s linear; }

/* claude.com-style rhythm: one consistent section gap, no per-section drift */
:root { --sv-gap: clamp(120px, 11vw, 176px); }
.sv { padding-top: var(--sv-gap); padding-bottom: var(--sv-gap); }
.sv-hero { padding-top: clamp(10px, 1.2vw, 18px); padding-bottom: 0; }
.sv-hero .sv-head { margin-top: clamp(32px, 4vw, 56px); }
.sv .sv-head { margin-bottom: clamp(56px, 6vw, 96px); }
.sv-hero .sv-head { margin-bottom: 0; }
.v4-trust-h { margin-bottom: clamp(56px, 7vw, 104px); }
.v4-how-title { margin-bottom: clamp(64px, 8vw, 130px); }
.v4-stats { margin-top: clamp(48px, 5vw, 72px); }
.v4-office-cards { margin-top: clamp(48px, 6vw, 80px); }
.snaps-head { margin-bottom: clamp(40px, 5vw, 72px); }

/* readable subheaders — black, one size everywhere below the hero */
.sv:not(.sv-hero) .sv-sub,
.v4-learn-sub, .v4-office-sub, .snaps-cap-r p, .ctrl-row-r p {
  font-size: clamp(19px, 1.8vw, 23px); line-height: 1.6; color: var(--ink); font-weight: 400;
}

/* §why → leasing-teams seam: image sits close to the calculator and the
   next section doesn't re-add a full gap on top of it */
.v4-week-img { margin-top: clamp(-120px, -8vw, -56px); }
.v4-week-img img { margin-bottom: -4px; }
.v4-week + .sv-snaps { padding-top: clamp(88px, 8vw, 128px); }

/* caption under the leasing-teams mock — both columns hang from one rule */
.snaps-cap {
  border-top: 1px solid var(--line);
  padding-top: clamp(28px, 3vw, 44px);
  margin-top: clamp(48px, 5vw, 80px);
  align-items: start;
}
.snaps-cap-h { max-width: 14ch; }

/* hero window = the provided mock image itself */
.sv-hero .v4-hero-win { margin-top: 0; }
.v4-hero-win-img {
  background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
}
.v4-hero-win-img img { display: block; width: 100%; height: auto; }

/* ---------- section glyphs — small animated line icons above headers ---------- */
.sv-glyph { display: flex; justify-content: center; color: var(--ink); margin-bottom: 28px; }
.v4-week .sv-glyph { justify-content: flex-start; }
.sv-glyph svg { overflow: visible; }
.g-rot, .g-gear-a, .g-gear-b, .g-hand, .g-swing, .g-pulse { transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
  /* gears ratchet forward a tooth at a time, with a springy overshoot */
  .g-gear-a { animation: g-ratchet 6.4s ease-in-out infinite; }
  .g-gear-b { animation: g-ratchet-rev 6.4s ease-in-out infinite; }
  /* clock hands tick in discrete jumps like a wall clock */
  .g-hand { animation: g-spin 96s steps(12, end) infinite; }
  .g-hand-min { animation: g-spin 14.4s steps(12, end) infinite; }
  /* tag gets knocked, swings like a pendulum, settles, rests */
  .g-swing { animation: g-knock 5.6s ease-in-out infinite; }
  /* sparkle twinkles — quick shrink-flare-settle, then a long rest */
  .g-pulse { animation: g-twinkle 5.2s ease-in-out infinite; }
  /* typing dots hop instead of blinking */
  .g-dot { transform-box: fill-box; transform-origin: center; animation: g-hop 1.5s ease-in-out infinite; }
  .g-dot:nth-of-type(2) { animation-delay: .18s; }
  .g-dot:nth-of-type(3) { animation-delay: .36s; }
  /* phone check draws itself, then the phone gives a happy wiggle */
  .g-draw { stroke-dasharray: 30; stroke-dashoffset: 30; }
  .rv.in .g-draw, .sv-head.in .g-draw { animation: g-drawin .7s ease .6s forwards; }
  .rv.in .sv-glyph svg:has(.g-draw) { animation: g-wiggle 6s ease-in-out 1.6s infinite; }
}
@keyframes g-ratchet {
  0%, 20% { transform: rotate(0deg); }
  26% { transform: rotate(51deg); }
  29% { transform: rotate(43.5deg); }
  31%, 53% { transform: rotate(45deg); }
  59% { transform: rotate(96deg); }
  62% { transform: rotate(88.5deg); }
  64%, 86% { transform: rotate(90deg); }
  92% { transform: rotate(141deg); }
  95% { transform: rotate(133.5deg); }
  97%, 100% { transform: rotate(135deg); }
}
@keyframes g-ratchet-rev {
  0%, 20% { transform: rotate(0deg); }
  26% { transform: rotate(-51deg); }
  29% { transform: rotate(-43.5deg); }
  31%, 53% { transform: rotate(-45deg); }
  59% { transform: rotate(-96deg); }
  62% { transform: rotate(-88.5deg); }
  64%, 86% { transform: rotate(-90deg); }
  92% { transform: rotate(-141deg); }
  95% { transform: rotate(-133.5deg); }
  97%, 100% { transform: rotate(-135deg); }
}
@keyframes g-spin { to { transform: rotate(360deg); } }
@keyframes g-knock {
  0%, 8% { transform: rotate(0deg); }
  16% { transform: rotate(10deg); }
  28% { transform: rotate(-7.5deg); }
  40% { transform: rotate(5deg); }
  51% { transform: rotate(-3deg); }
  60% { transform: rotate(1.5deg); }
  68%, 100% { transform: rotate(0deg); }
}
@keyframes g-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  10% { transform: scale(.8) rotate(-9deg); }
  20% { transform: scale(1.1) rotate(5deg); }
  28% { transform: scale(.97) rotate(-1.5deg); }
  34% { transform: scale(1) rotate(0deg); }
}
@keyframes g-hop {
  0%, 55%, 100% { transform: translateY(0); opacity: .32; }
  27% { transform: translateY(-3.2px); opacity: 1; }
}
@keyframes g-wiggle {
  0%, 6%, 100% { transform: rotate(0deg); }
  1.5% { transform: rotate(-3.5deg); }
  3% { transform: rotate(2.5deg); }
  4.5% { transform: rotate(-1.2deg); }
}
@keyframes g-drawin { to { stroke-dashoffset: 0; } }

/* how-it-works header — centered, claude.com-style */
.v4-how-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: clamp(64px, 8vw, 130px); }
.v4-how-head .v4-how-title { margin-bottom: 0; }

/* ---------- audit pass: rhythm, layout, motion polish ---------- */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* header blocks sit a touch closer to their content */
.v4-trust-h { margin-bottom: clamp(48px, 5.5vw, 88px); }
.v4-how-head { margin-bottom: clamp(48px, 6vw, 96px); }
.sv .sv-head { margin-bottom: clamp(48px, 5.5vw, 84px); }

/* trust cards: shorter quotes, lighter frame */
.v4t-card { min-height: 250px; }
.v4t-card:first-child { border-left: 0; padding-left: 0; }

/* cards respond to hover */
.pt-card, .v4t-story, .v4-policy {
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease;
}
.pt-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px -22px rgba(26, 23, 20, 0.22); }
.v4t-story:hover { transform: translateY(-1px); }

/* faq rows breathe a bit more */
.faq-q { padding-top: 26px; padding-bottom: 26px; }

/* ---------- accessibility: larger body text page-wide ---------- */
.v4t-quote { font-size: 17px; line-height: 1.65; }
.v4t-by, .v4t-story { font-size: 14px; }
.v4-copy p, .v4-office-r p { font-size: 17px; }
.v4-how-flow .v4-copy p { font-size: 17px; }
.v4-learn-quote { font-size: 17px; }
.v4-learn-by { font-size: 15px; }
.v4-policy-body { font-size: 15px; }
.v4-policy-mrow { font-size: 14.5px; }
.v4-suggest p { font-size: 14.5px; }
.v4-stat-l { font-size: 16px; }
.v4-stat-s { font-size: 14.5px; }
.v4-co-l, .v4-calc-big em { font-size: 14px; }
.pt-lab { font-size: 12px; }
.pt-num { font-size: 14px; }
.v4-brief-lead { font-size: 16px; }
.v4-brief li { font-size: 15px; }
.v4-brief-h { font-size: 13.5px; }
.v4-type-line { font-size: 15px; }
.v4-ask span { font-size: 15px; }
.v4-outcome-row { font-size: 15px; }
.v4-action { font-size: 15px; }
.v4-chip { font-size: 13px; }
.faq-q { font-size: 19px; }
.faq-a-inner p { font-size: 16.5px; line-height: 1.65; }

/* ---------- unified accessible type scale: headers / subheads / body ---------- */
.sv .sv-h2, .v4-how-title, .v4-week-h, .v4-trust-h, .v4-office-h { font-size: clamp(40px, 4.4vw, 60px); line-height: 1.08; letter-spacing: -0.014em; }
.v4-learn-h { font-family: var(--serif); font-weight: 460; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.1; letter-spacing: -0.012em; }
.v4-policy-h { font-size: clamp(25px, 2.3vw, 31px); }
.v4-copy h3, .v4-how-flow .v4-copy h3 { font-size: clamp(28px, 2.8vw, 38px); }
.v4-win-title { font-size: clamp(24px, 2.2vw, 30px); }
.sv:not(.sv-hero) .sv-sub, .v4-learn-sub, .v4-office-sub, .snaps-cap-r p, .ctrl-row-r p { font-size: clamp(20px, 1.9vw, 25px); line-height: 1.55; }
.v4-copy p, .v4-office-r p, .v4-how-flow .v4-copy p { font-size: 19px; line-height: 1.65; }
.v4t-quote, .v4-learn-quote { font-size: 18px; line-height: 1.68; }
.v4t-co { font-size: 18px; }
.v4-policy-body { font-size: 17px; }
.v4-policy-sec { font-size: 18px; }
.v4-policy-mrow, .v4-suggest p { font-size: 15.5px; }
.v4-learn-by, .v4t-by { font-size: 16px; }
.v4t-story, .v4-learn-link { font-size: 15.5px; }
.v4-stat-n { font-size: clamp(44px, 4.2vw, 62px); }
.v4-stat-l { font-size: 20px; }
.v4-stat-s { font-size: 17px; }
.v4-calc-q { font-size: clamp(20px, 1.9vw, 25px); }
.v4-calc-big { font-size: clamp(38px, 3.6vw, 52px); }
.v4-co-n { font-size: clamp(34px, 3.2vw, 46px); }
.v4-co-l, .v4-calc-big em { font-size: 17px; }
.faq-q { font-size: clamp(20px, 1.8vw, 23px); }
.faq-a-inner p { font-size: 17.5px; }
.v4hw-title { font-size: clamp(21px, 1.9vw, 25px); }
.v4hw-invited { font-size: 14px; }
.v4hw-field label { font-size: 13px; }
.sv-hero .sv-sub { font-size: clamp(19px, 1.8vw, 23px); line-height: 1.55; }

/* visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2.5px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 3D scroll — pinned phone, geex-arts style ---------- */
.v4-orbit { padding: 0; }
.v4-orbit-track { height: 380vh; }
.v4-orbit-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; grid-template-columns: minmax(280px, 34%) 1fr; align-items: center;
  gap: clamp(20px, 4vw, 80px);
  padding: var(--nav-h, 132px) clamp(20px, 5vw, 90px) 0;
  box-sizing: border-box;
  background: #FAF6EC;
}
/* mirrored display type — geex-style: centered columns, captions spread vertically */
.v4s-type {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  align-self: stretch;
  text-align: center; min-width: 0;
  padding: clamp(16px, 4vh, 44px) 0 clamp(40px, 9vh, 90px);
  transition: opacity .5s ease;
}
.v4-orbit-stage.is-cards .v4s-type { opacity: .3; }
.v4s-cap {
  font-family: var(--mono); font-size: clamp(10px, 1vw, 12.5px);
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.7;
  color: var(--ink); opacity: .5; transition: color .5s ease;
}
.v4s-big { display: flex; flex-direction: column; align-items: center; }
.v4s-ledger { margin-top: 30px; width: 216px; display: flex; flex-direction: column; }
.v4s-lrow { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; font-size: 13px; }
.v4s-lrow::before { content: ""; order: 2; flex: 1; border-bottom: 1.5px dotted rgba(26, 23, 20, 0.3); transform: translateY(-3px); }
.v4s-lrow span { order: 1; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); opacity: .55; }
.v4s-lrow b { order: 3; color: var(--ink); font-weight: 600; white-space: nowrap; font-family: var(--sans, inherit); font-size: 13px; line-height: 1.4; }
.v4s-anno { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.v4s-anno p { margin: 0; font-family: var(--serif); font-weight: 420; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.45; text-align: center; color: var(--ink); }
.v4s-anno p em { font-style: italic; font-weight: 380; }
.v4s-anno-arrow { width: 74px; height: auto; color: var(--ink); opacity: .55; align-self: flex-start; margin: 0 0 -4px 4px; }
.v4s-big em {
  font-family: var(--serif); font-style: italic; font-weight: 380;
  font-size: clamp(28px, 3.4vw, 58px); line-height: 1.05; white-space: nowrap;
  letter-spacing: -0.01em; color: var(--ink);
  transition: color .5s ease, opacity .3s ease, transform .3s ease;
}
.v4s-big > b {
  font-family: var(--serif); font-weight: 520;
  font-size: clamp(30px, 3.8vw, 66px); line-height: 1.04; white-space: nowrap;
  letter-spacing: -0.015em; color: var(--ink);
  transition: color .5s ease;
}
.v4s-tags { display: flex; gap: 8px; }
.v4s-tags span {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); border: 1px solid rgba(26, 23, 20, 0.28);
  border-radius: 999px; padding: 5px 11px; opacity: .65;
  transition: color .5s ease, border-color .5s ease;
}
.v4-orbit-stage.is-dark .v4s-tags span { color: #F4EFE3; border-color: rgba(244, 239, 227, 0.3); }
.v4-orbit-stage.is-swap .v4s-big em { opacity: 0; transform: translateY(10px); }
.v4-orbit-stage.is-dark .v4s-big em, .v4-orbit-stage.is-dark .v4s-big b { color: #F4EFE3; }
.v4-orbit-stage.is-dark .v4s-cap { color: #F4EFE3; }

/* section-wide stage fx — model + screen carousel span the whole stage */
.v4s-spacer { width: clamp(260px, 32vw, 480px); height: 1px; }
.v4s-stagefx { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.v4s-model {
  position: absolute; left: 50%; top: 50%;
  width: min(640px, 74vw);
  height: min(58vh, 520px);
  margin: calc(min(58vh, 520px) / -2 + 1vh) 0 0 calc(min(640px, 74vw) / -2);
  pointer-events: none;
  --poster-color: transparent;
  background: transparent;
  will-change: transform, opacity;
}
/* CSS-3D tower — ink & cream, turntables with scroll */
.v4s-tscale { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1400px; }
.v4s-t3d { position: relative; width: 210px; height: 380px; transform-style: preserve-3d; will-change: transform; transform: rotateX(9deg); }
.v4s-tw { position: absolute; left: 50%; top: 50%; box-sizing: border-box; backface-visibility: hidden; border: 1.6px solid #2E2A24; }
.v4s-tw-f, .v4s-tw-b { width: 210px; height: 380px; background: #FAF6EB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='46'%3E%3Crect x='8' y='9' width='26' height='30' rx='2' fill='%23E7DBC0' stroke='%232E2A24' stroke-width='1.6'/%3E%3Cpath d='M21 9v30' stroke='%232E2A24' stroke-width='1'/%3E%3C/svg%3E") 0 12px/42px 46px repeat; }
.v4s-tw-f { transform: translate(-50%, -50%) translateZ(75px); }
.v4s-tw-b { transform: translate(-50%, -50%) rotateY(180deg) translateZ(75px); }
.v4s-tw-l, .v4s-tw-r { width: 150px; height: 380px; background: #EFE8D6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='46'%3E%3Crect x='8' y='9' width='26' height='30' rx='2' fill='%23DCCFB2' stroke='%232E2A24' stroke-width='1.6'/%3E%3Cpath d='M21 9v30' stroke='%232E2A24' stroke-width='1'/%3E%3C/svg%3E") 3px 12px/42px 46px repeat; }
.v4s-tw-l { transform: translate(-50%, -50%) rotateY(-90deg) translateZ(105px); }
.v4s-tw-r { transform: translate(-50%, -50%) rotateY(90deg) translateZ(105px); }
.v4s-tw-f::after, .v4s-tw-b::after, .v4s-tw-l::after, .v4s-tw-r::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: #F5EFDF; border-top: 1.6px solid #2E2A24; }
.v4s-tw-f::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 30px; height: 38px; transform: translateX(-50%); background: #2E2A24; border: 1.6px solid #2E2A24; border-bottom: 0; border-radius: 4px 4px 0 0; z-index: 2; }
.v4s-troof { width: 210px; height: 150px; background: #F3EDDC; transform: translate(-50%, -50%) rotateX(90deg) translateZ(190px); }
.v4s-troof::before { content: ""; position: absolute; inset: 10px; border: 1.5px dashed rgba(46, 42, 36, 0.45); }
.v4s-tpf, .v4s-tpb { width: 90px; height: 34px; background: #FAF6EB; }
.v4s-tpf { transform: translate(-50%, -50%) translateY(-207px) translateZ(33px); }
.v4s-tpb { transform: translate(-50%, -50%) translateY(-207px) rotateY(180deg) translateZ(33px); }
.v4s-tpl, .v4s-tpr { width: 66px; height: 34px; background: #EFE8D6; }
.v4s-tpl { transform: translate(-50%, -50%) translateY(-207px) rotateY(-90deg) translateZ(45px); }
.v4s-tpr { transform: translate(-50%, -50%) translateY(-207px) rotateY(90deg) translateZ(45px); }
.v4s-tproof { width: 90px; height: 66px; background: #F3EDDC; transform: translate(-50%, -50%) translateY(-207px) rotateX(90deg) translateZ(17px); }
@media (max-width: 860px) { .v4s-tscale { transform: scale(.7); } }
/* highlighted unit on the front face */
.v4s-unit { position: absolute; left: 92px; top: 113px; width: 26px; height: 30px; box-sizing: border-box; background: #2E2A24; border: 1.6px solid #2E2A24; border-radius: 2px; display: grid; place-items: center; font-family: var(--mono); font-size: 9.5px; font-weight: 600; color: #FAF6EB; }
@media (prefers-reduced-motion: no-preference) { .v4s-unit { animation: v4s-unitpulse 2.4s ease-in-out infinite; } }
@keyframes v4s-unitpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(46, 42, 36, 0.55); } 50% { box-shadow: 0 0 0 12px rgba(46, 42, 36, 0); } }
/* cinematic stage: only the essentials, vertically centered */
.v4s-type { justify-content: center; gap: 0; }
.v4s-unittag { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 9px; font-family: var(--serif); font-style: italic; font-size: clamp(14px, 1.2vw, 17px); color: var(--ink); opacity: 0; transition: opacity .35s ease; will-change: transform; white-space: nowrap; pointer-events: none; }
.v4s-unittag svg { width: 40px; height: auto; flex-shrink: 0; opacity: .65; }
/* asymmetric cinematic layout: type left, tower right-of-center */
.v4-orbit-stage { --cx: 64%; }
.v4s-model, .v4s-ring, .v4s-ground, .v4s-modelcap { left: var(--cx, 50%); }
.v4s-type-l { padding-left: clamp(28px, 5vw, 96px); }
.v4s-anno { margin-top: clamp(26px, 4vh, 48px); flex-direction: row; align-items: flex-start; gap: 14px; }
.v4s-anno-arrow { transform: scaleX(-1); margin-top: -16px; }
@media (max-width: 860px) { .v4-orbit-stage { --cx: 50%; } }
.v4s-ring {
  position: absolute; left: 50%; top: calc(50% + min(21vh, 190px));
  width: min(430px, 50vw); transform: translateX(-50%);
  color: var(--ink); opacity: .5; will-change: opacity;
}
.v4s-ground {
  position: absolute; left: 50%; top: calc(50% + min(26vh, 235px));
  width: min(380px, 44vw); height: 40px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(26, 23, 20, 0.22), transparent 68%);
  filter: blur(4px);
  will-change: opacity;
}
.v4s-modelcap {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 26px; align-self: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink); opacity: .72; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(5px);
  border: 1px solid rgba(26, 23, 20, 0.14);
  border-radius: 999px; padding: 7px 15px 7px 12px; white-space: nowrap;
  will-change: opacity;
}
.v4s-modelcap::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2E2A24; flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) { .v4s-modelcap::before { animation: v4s-unitpulse 2.4s ease-in-out infinite; } }

/* horizontal screen carousel — revealed after the model flows down */
.v4s-carousel {
  --cw: clamp(250px, 27vw, 330px);
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px);
  opacity: 0;
  transition: opacity .45s ease;
  will-change: transform;
}
.v4s-card:first-child { margin-left: calc(50% - var(--cw) / 2); }
.v4s-card:last-child { margin-right: calc(50% - var(--cw) / 2); }
.v4s-carousel.is-on { opacity: 1; }
.v4s-card {
  position: relative; flex: 0 0 var(--cw);
  height: clamp(390px, 56vh, 470px);
  background: #FAF6EB; border-radius: 18px;
  border: 1px solid rgba(26, 23, 20, 0.16);
  box-shadow: 0 22px 44px -28px rgba(8, 6, 3, 0.35);
  padding: 24px 24px 22px; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease;
  will-change: transform;
}
.v4s-card:nth-child(odd):not(.is-front) { transform: scale(.92) rotate(-1.3deg) translateY(12px); }
.v4s-card:nth-child(even):not(.is-front) { transform: scale(.92) rotate(1.1deg) translateY(12px); }
.v4s-card.is-front { box-shadow: 0 34px 70px -30px rgba(8, 6, 3, 0.45); }
.v4s-cnum {
  position: absolute; right: 16px; top: 2px; pointer-events: none;
  font-family: var(--serif); font-style: italic; font-weight: 380;
  font-size: 92px; line-height: 1.1; color: var(--ink); opacity: .07;
}
.v4s-card-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; }
.v4s-card > b, .v4s-card-ol b { font-family: var(--serif); font-weight: 500; font-size: clamp(21px, 2vw, 27px); color: var(--ink); line-height: 1.1; }
.v4s-card b em { font-style: italic; font-weight: 380; }
.v4s-card-s { font-size: 13.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.v4s-cfield { border: 1.5px solid rgba(26, 23, 20, 0.22); border-radius: 14px; padding: 12px 15px; background: transparent; display: flex; flex-direction: column; gap: 3px; }
.v4s-cfield label { font-family: var(--mono); font-size: 9.5px; font-weight: 500; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.08em; }
.v4s-cfield span { font-size: 14.5px; color: var(--ink); }
.v4s-cbtn { background: var(--ink); color: #F4EFE3; text-align: center; border-radius: 999px; padding: 13px 8px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.v4s-card-photo { padding: 10px 10px 0; }
.v4s-cframe { position: relative; flex: 1; min-height: 0; border-radius: 12px; overflow: hidden; border: 1px solid rgba(26, 23, 20, 0.14); }
.v4s-cframe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v4s-card-scan {
  position: absolute; left: 8%; right: 8%; top: 22%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .v4s-card.is-front .v4s-card-scan { animation: v4s-scan 2.4s ease-in-out infinite; }
}
@keyframes v4s-scan { 0%, 100% { top: 16%; } 50% { top: 70%; } }
.v4s-card-ol { display: flex; flex-direction: column; gap: 5px; padding: 13px 14px 15px; }
.v4s-card-ol b { font-size: clamp(18px, 1.7vw, 22px); }
.v4s-card-ol .v4s-card-s { color: #3E6B4F; font-weight: 600; white-space: nowrap; font-size: 12.5px; }
.v4s-clist { display: flex; flex-direction: column; margin-top: auto; }
.v4s-cli {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 0; font-size: 12.5px;
}
.v4s-cli::before { content: ""; order: 2; flex: 1; border-bottom: 1.5px dotted rgba(26, 23, 20, 0.28); transform: translateY(-3px); }
.v4s-cli span { color: var(--muted); order: 1; }
.v4s-cli b { color: var(--ink); font-weight: 600; white-space: nowrap; order: 3; }
.v4s-cava-ok { background: #E4EBD3; color: #3E6B4F; border-color: rgba(62, 107, 79, 0.4); }
.v4s-cbtn-dark { background: var(--ink); }
.v4s-cbars { display: flex; align-items: flex-end; gap: 9px; height: 76px; margin-top: 8px; padding: 0 4px; border-bottom: 1.5px solid rgba(26, 23, 20, 0.4); }
.v4s-cbars i { flex: 1; background: #CBD6A9; border: 1.5px solid rgba(26, 23, 20, 0.55); border-bottom: 0; border-radius: 6px 6px 0 0; }
.v4s-crow { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); margin-top: 4px; }
.v4s-cava { width: 28px; height: 28px; border-radius: 50%; background: transparent; border: 1.5px solid rgba(26, 23, 20, 0.35); color: var(--ink); display: grid; place-items: center; font-size: 10.5px; font-weight: 700; flex-shrink: 0; }
.v4s-ccheck { align-self: center; margin: auto 0; width: 72px; height: 72px; border-radius: 50%; background: #E4EBD3; color: #3E6B4F; display: grid; place-items: center; }

.v4-orbit-bar { position: absolute; bottom: 34px; left: var(--cx, 50%); transform: translateX(-50%); width: 150px; height: 2px; background: rgba(26, 23, 20, 0.14); border-radius: 2px; overflow: hidden; z-index: 3; }
.is-dark .v4-orbit-bar { background: rgba(244, 239, 227, 0.22); }
.v4-orbit-bar i { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.is-dark .v4-orbit-bar i { background: #F4EFE3; }

@media (prefers-reduced-motion: reduce) {
  .v4-orbit-track { height: auto; }
  .v4-orbit-stage { position: static; height: auto; padding-top: var(--sv-gap); padding-bottom: var(--sv-gap); }
}
@media (max-width: 860px) {
  .v4-orbit-stage { grid-template-columns: 1fr; justify-items: center; gap: 26px; padding-top: calc(var(--nav-h, 110px) + 8px); }
  .v4s-type-l { display: none; }
  .v4s-type-r { align-items: center; text-align: center; }
  .v4s-cap-b { display: none; }
  .v4s-spacer { display: none; }
  .v4s-carousel { --cw: min(300px, 76vw); }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .v4-how-grid { grid-template-columns: 210px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .v4hw-body { grid-template-columns: 1fr; }
  .v4hw-img { min-height: 240px; }
  .v4hw-appicon { top: 44px; }
  .v4t-card { flex-basis: 100%; border-left: 0; padding-left: 0; padding-right: 0; min-height: 0; }
  .v4t-card .v4t-mid { padding-top: 20px; }
  .v4-how-grid { grid-template-columns: 1fr; gap: 32px; }
  .v4-how-rail {
    position: sticky; top: var(--nav-h, 70px); z-index: 5;
    flex-direction: row; gap: 0; background: #F6F3EC; padding: 8px 0 0;
  }
  .v4-tab { flex: 1; font-size: 13.5px; padding: 10px 4px 12px; }
  .v4-verify { grid-template-columns: 1fr; }
  .v4-vid { min-height: 96px; }
  .v4-learn-grid { grid-template-columns: 1fr; gap: 40px; }
  .v4-office-head { grid-template-columns: 1fr; gap: 20px; }
  .v4-office-cards { grid-template-columns: 1fr; }
  .v4-week-img { margin-top: -16px; }
  .v4-week-img img { min-height: 220px; object-fit: cover; object-position: center bottom; }
}
@media (max-width: 620px) {
  .v4-stats { grid-template-columns: 1fr; gap: 20px; }
  .v4-calc-top { flex-direction: column; gap: 8px; }
  .v4-calc-out { grid-template-columns: 1fr; gap: 14px; }
  .v4-actions { right: 8px; width: 88%; }
  .v4-panel { padding: 18px 14px; }
  .v4-win { padding: 14px 16px 26px; }
  .v4o-phone { width: min(180px, 60%); }
}

/* granola-scale how-it-works: bigger step type + mocks */
.v4-how-flow .v4-copy h3 { font-size: clamp(30px, 3vw, 42px); }
.v4-how-flow .v4-copy p { font-size: 19px; line-height: 1.6; max-width: 48ch; }
.v4-tab { font-size: 19px; }
.v4-win-title { font-size: clamp(24px, 2.2vw, 30px); }
.v4-chat .v4-win-title { font-size: 22px; }
.v4-decide { width: min(760px, 100%); }
@media (min-width: 901px) {
  .v4-win { padding: 20px 32px 42px; }
  .v4-panel { padding: clamp(28px, 3vw, 48px); }
}
/* stage alignment: everything tracks the tower's center + base */
.v4-orbit-stage { grid-template-columns: minmax(320px, 38%) 1fr; }
.v4s-type-l { padding-left: clamp(20px, 3.5vw, 80px); }
@media (max-width: 1100px) { .v4s-anno-arrow { display: none; } }
.v4s-stagefx .v4s-model, .v4s-stagefx .v4s-ring, .v4s-stagefx .v4s-ground, .v4s-stagefx .v4s-modelcap { left: var(--cx, 50%); }
.v4s-stagefx .v4s-ring { top: calc(50% + 142px); }
.v4s-stagefx .v4s-ground { top: calc(50% + 168px); }
.v4s-stagefx .v4s-modelcap { top: calc(50% + 214px); }
@media (max-height: 700px) {
  .v4s-tscale { transform: scale(.78); }
  .v4s-stagefx .v4s-ring { top: calc(50% + 112px); }
  .v4s-stagefx .v4s-ground { top: calc(50% + 132px); }
  .v4s-stagefx .v4s-modelcap { top: calc(50% + 166px); }
}
/* polish pass: gentler 3D, staggered card entrance */
.v4s-tscale { perspective: 1700px; }
.v4s-tw-f, .v4s-tw-b { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='126' height='138'%3E%3Crect x='50' y='55' width='26' height='30' rx='2' fill='%23E9C566' stroke='%232E2A24' stroke-width='1.6'/%3E%3Cpath d='M63 55v30' stroke='%232E2A24' stroke-width='1'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='46'%3E%3Crect x='8' y='9' width='26' height='30' rx='2' fill='%23E7DBC0' stroke='%232E2A24' stroke-width='1.6'/%3E%3Cpath d='M21 9v30' stroke='%232E2A24' stroke-width='1'/%3E%3C/svg%3E"); background-position: 0 12px, 0 12px; background-size: 126px 138px, 42px 46px; background-repeat: repeat, repeat; }
.v4s-carousel { opacity: 1; }
.v4s-carousel .v4s-card { opacity: 0; transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .55s ease; }
.v4s-carousel.is-on .v4s-card { opacity: 1; }
.v4s-carousel.is-on .v4s-card:nth-child(2) { transition-delay: 0s, .08s; }
.v4s-carousel.is-on .v4s-card:nth-child(3) { transition-delay: 0s, .16s; }
.v4s-carousel.is-on .v4s-card:nth-child(4) { transition-delay: 0s, .24s; }

/* ---------- flow polish: scroll progress, hero entrance, hover motion ---------- */

/* buttons — quiet hover, no lift */
.btn { transition: background .18s ease, border-color .18s ease, transform .12s ease; }
.btn-dark:hover { background: #3a352e; }
.btn-ghost:hover { background: var(--faint-2); border-color: #cfc9be; }

/* arrow links nudge on hover */
.v4-learn-link span, .pv-cta span, .pt-card-cta span { display: inline-block; transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.v4-learn-link:hover span, .pv-cta:hover span, .pt-card-cta:hover span { transform: translateX(4px); }

/* default link colors from palette (low specificity — styled links keep their own) */
a { color: var(--ink); }
a:not([class]):hover { color: var(--amber); }

/* hero — cinematic staggered entrance */
.sv-hero .sv-head.rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .sv-hero .sv-h1, .sv-hero .sv-sub, .sv-hero .sv-actions, .sv-hero .v4-hero-clip { opacity: 0; animation: v4-hero-rise .95s cubic-bezier(.22, 1, .36, 1) forwards; }
  .sv-hero .sv-h1 { animation-delay: .1s; }
  .sv-hero .sv-sub { animation-delay: .34s; }
  .sv-hero .sv-actions { animation-delay: .52s; }
  .sv-hero .v4-hero-clip { animation-delay: .66s; animation-duration: 1.05s; }
}
@keyframes v4-hero-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.v4-hero-win-img img { will-change: transform; }

/* ---------- consistent section glyphs: uniform icon size, aligned to header ---------- */
.sv-glyph { margin-bottom: 32px; }
.sv-glyph svg { width: auto; height: 60px; }
.v4-learn .sv-glyph, .v4-office .sv-glyph { justify-content: flex-start; }

/* ---------- Carousel Connect pop-up (bottom-right) ---------- */
.cc-toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 120;
  width: min(420px, calc(100vw - 40px));
  background: #F7F4EC; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 2px 4px rgba(26, 23, 20, 0.05), 0 30px 64px -24px rgba(26, 23, 20, 0.30);
  padding: 22px 24px 24px; font-family: var(--sans);
  transform: translateY(26px) scale(.98); opacity: 0;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
}
.cc-toast.is-in { opacity: 1; transform: none; }
.cc-toast[hidden] { display: none; }
.cc-toast-eyebrow { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; color: var(--muted); }
.cc-toast-i { display: grid; place-items: center; width: 22px; height: 22px; color: var(--muted); flex-shrink: 0; }
.cc-toast-x {
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: 12px; background: transparent;
  display: grid; place-items: center; color: var(--muted); cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cc-toast-x:hover { background: rgba(26, 23, 20, 0.05); color: var(--ink); border-color: rgba(26, 23, 20, 0.2); }
.cc-toast-body { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; margin-top: 18px; }
.cc-toast-title { font-family: var(--serif); font-weight: 480; font-size: 27px; line-height: 1.08; letter-spacing: -0.012em; color: var(--ink); margin: 0; }
.cc-toast-sub { margin: 9px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--muted); max-width: 27ch; }
.cc-toast-btn {
  display: inline-flex; align-items: center; margin-top: 18px;
  background: var(--ink); color: #F7F4EC; font-weight: 600; font-size: 14.5px;
  padding: 12px 20px; border-radius: 12px; text-decoration: none; letter-spacing: -0.005em;
  transition: transform .2s ease, background .2s ease;
}
.cc-toast-btn:hover { background: #000; transform: translateY(-1px); }
.cc-toast-art { width: 120px; height: 120px; border-radius: 18px; background: #2E2A24; display: grid; place-items: center; flex-shrink: 0; }
.cc-toast-art svg { width: 76px; height: 76px; }
@media (prefers-reduced-motion: no-preference) {
  .cc-toast-art .cc-node-c { transform-box: fill-box; transform-origin: center; animation: cc-pulse 2.6s ease-in-out infinite; }
}
@keyframes cc-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@media (max-width: 520px) {
  .cc-toast { right: 12px; left: 12px; bottom: 12px; width: auto; }
  .cc-toast-art { width: 100px; height: 100px; }
  .cc-toast-art svg { width: 64px; height: 64px; }
}

/* accessible text: darker muted tones */
:root { --muted: #575046; --muted-2: #6e675c; }
/* stat badges — soft cards */
.v4-stats { border-top: 0; padding-top: 0; gap: clamp(14px, 1.8vw, 22px); }
.v4-stat { background: #FDFCF8; border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.2vw, 28px); display: flex; flex-direction: column; align-items: flex-start; }
.v4-stat-badge { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; background: var(--faint-2); margin-bottom: 18px; }
/* calculator headcount icons */
.v4-cp-row { display: flex; gap: 5px; margin-top: 14px; color: var(--ink); }
.v4-cp { display: inline-flex; transition: opacity .35s ease; }
.v4-cp svg { display: block; }
.v4-cp-l { font-size: 13.5px; color: var(--muted); margin-top: 8px; max-width: 24ch; line-height: 1.5; }
.v4-cp-l b { color: var(--ink); font-weight: 600; }

/* dynamic stats: staggered card entrance + hover lift */
@media (prefers-reduced-motion: no-preference) {
.v4-stats.rv .v4-stat { opacity: 0; transform: translateY(22px); }
.v4-stats.rv .v4-stat .v4-stat-badge { opacity: 0; transform: translateY(6px); }
.v4-stats.rv.in .v4-stat { opacity: 1; transform: none; transition: opacity .65s ease, transform .65s cubic-bezier(.22,1,.36,1); }
.v4-stats.rv.in .v4-stat:nth-child(2) { transition-delay: .14s; }
.v4-stats.rv.in .v4-stat:nth-child(3) { transition-delay: .28s; }
.v4-stats.rv.in .v4-stat .v4-stat-badge { opacity: 1; transform: none; transition: opacity .5s ease .3s, transform .5s ease .3s; }
.v4-stats.rv.in .v4-stat:nth-child(2) .v4-stat-badge { transition-delay: .44s; }
.v4-stats.rv.in .v4-stat:nth-child(3) .v4-stat-badge { transition-delay: .58s; }
}
.v4-stat { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.v4-stat:hover { border-color: #d8d3ca; box-shadow: 0 18px 40px -26px rgba(45,30,15,.35); transform: translateY(-3px); }
/* people icons pop in with a springy scale */
.v4-cp { transform: scale(.72); transform-origin: 50% 100%; transition: opacity .35s ease, transform .4s cubic-bezier(.34,1.56,.64,1); }
.v4-cp.on { transform: scale(1); }
/* slider thumb: grow on hover */
.v4-calc input[type="range"]::-webkit-slider-thumb { transition: transform .18s ease, box-shadow .18s ease; }
.v4-calc input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.18); box-shadow: 0 3px 10px rgba(26,23,20,.25); }

/* calculator layout polish */
.v4-calc-out { gap: 0; }
.v4-co { padding: 0 clamp(18px, 2.4vw, 36px); }
.v4-co:first-child { padding-left: 0; }
.v4-co + .v4-co { border-left: 1px solid var(--faint); }
.v4-co-l { margin-top: 7px; }
.v4-calc-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 24px; padding: 16px 18px; background: var(--faint-2); border: 1px solid var(--faint); border-radius: 14px; }
.v4-calc-foot .v4-cp-row { margin-top: 0; }
.v4-calc-foot .v4-cp-l { margin-top: 0; max-width: none; font-size: 14.5px; }
@media (max-width: 900px) { .v4-co { padding: 0; } .v4-co + .v4-co { border-left: 0; } }

/* crew strip: people walk from "manual checks" (left) to "handed back" (right) */
.v4-calc-foot { display: block; }
.v4-crew { position: relative; height: 30px; }
.v4-crew .v4-cp { position: absolute; left: 0; top: 3px; color: var(--ink); transition: transform .6s cubic-bezier(.34,1.3,.64,1), color .45s ease; }
.v4-crew .v4-cp.free { color: var(--green); }
@media (prefers-reduced-motion: no-preference) { .v4-crew .v4-cp.free svg { animation: v4-bob 2.8s ease-in-out infinite; } }
@keyframes v4-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.v4-crew-labs { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.v4-crew-labs b { color: var(--ink); font-weight: 600; }
/* mountain tips overlap the calculator card */
.v4-week-img { z-index: 3; }
.v4-calc { position: relative; z-index: 2; }

.v4-week-img { margin-top: clamp(-220px, -14vw, -100px); }

.v4-crew { height: 40px; }
.v4-crew-labs { font-size: 14.5px; }

/* uniform section rhythm: every band uses the one --sv-gap, no drift */
.v4-how { padding-top: var(--sv-gap); padding-bottom: var(--sv-gap); }
.v4-week + .sv-snaps { padding-top: var(--sv-gap); }
.sv-final { padding-bottom: var(--sv-gap); }

.v4-week { padding-bottom: 0; }

.v4-week-img { margin-top: clamp(-160px, -10vw, -70px); }

/* week-back header centered */
.v4-week .wrap > .sv-glyph { display: block; margin-left: auto; margin-right: auto; width: fit-content; }
.v4-week-h { text-align: center; margin-left: auto; margin-right: auto; max-width: none; }

/* ---------- mountain seam: parallax band that the next section scrolls over ---------- */
.v4-week{padding-bottom:0}
.v4-week-img{position:relative;z-index:2;height:clamp(320px,32vw,480px);overflow:hidden;margin-top:clamp(-90px,-5vw,-40px)}
.v4-week-img img{position:absolute;left:0;top:-22%;display:block;width:100%;height:144%;object-fit:cover;object-position:center 45%;margin-bottom:0;will-change:transform}
.v4-week+.sv-snaps{position:relative;z-index:3;background:var(--bg);border-top-left-radius:clamp(32px,5vw,72px);border-top-right-radius:clamp(32px,5vw,72px);margin-top:clamp(-60px,-4vw,-28px);box-shadow:0 -30px 60px -40px rgba(45,30,15,.35)}
@media (prefers-reduced-motion:reduce){.v4-week-img img{transform:none!important}}
@media (max-width:820px){.v4-week-img{height:clamp(230px,40vw,300px);margin-top:-24px}}

.v4-calc{position:relative;z-index:0}

/* soften the top edge of the mountain band so it doesn't slice the calculator */
.v4-week-img{-webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.35) 12%,#000 34%);mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.35) 12%,#000 34%)}

/* leasing-teams mock — paper window on pavilion painting (matches hw styling) */
.sv-snaps .snaps-beige{background:#C9BFA8 url("/assets/img/platform-tall.webp") center/cover no-repeat}
.og-win{background:rgba(250,249,245,.94);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 1px 2px rgba(20,17,13,.05),0 60px 120px -40px rgba(45,30,15,.55),inset 0 0 0 1px rgba(255,255,255,.65)}
.og-win-bar{box-shadow:inset 0 -1px 0 var(--line)}
.og-h{color:var(--ink)}
.og-sub{color:var(--muted)}
.og-logo{background:#F1EDE4;box-shadow:inset 0 0 0 1px var(--line-2)}
.og-logo svg{stroke:var(--ink)}
.og-irow{background:#FFFDF7;box-shadow:inset 0 0 0 1px var(--line-2)}
.og-irow span{color:var(--muted)}
.og-irow b{color:var(--ink)}
.og-code i{color:var(--ink);background:#FFFDF7;box-shadow:inset 0 0 0 1px var(--line-2)}
.og-consent{background:#FFFDF7;box-shadow:inset 0 0 0 1px var(--line-2)}
.og-consent-t{color:var(--ink-soft)}
.og-check{background:var(--ink);color:var(--bg);box-shadow:none}
.og-cta{background:var(--ink);color:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 14px 30px -16px rgba(20,17,13,.55)}
.og-cta:hover{background:#000;transform:translateY(-1px)}
.og-bars i{background:linear-gradient(180deg,#3F5B4C,#94A797)}
.og-sig{color:var(--ink);border-bottom-color:var(--line-2)}
.og-sigcap{color:var(--muted)}
.og-done b{color:var(--ink)}
.og-donecheck{background:#2B6B3A;color:#fff}

/* snaps caption — balanced editorial two-column */
.snaps-cap{grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,96px);margin-top:clamp(44px,5vw,72px)}
.snaps-cap-h{max-width:16ch;font-size:clamp(30px,3vw,44px);line-height:1.08;letter-spacing:-.018em;text-wrap:balance}
.snaps-cap-r{gap:26px;max-width:52ch}
.snaps-cap-r p{max-width:none}
@media(max-width:760px){.snaps-cap{grid-template-columns:1fr;gap:20px}.snaps-cap-h{max-width:none}}