/* ═══════════════════════════════════════════════════════════════════════════
   INHOUSE — components, in document order
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── header ────────────────────────────────────────────────────────────────── */
.hd {
  position: sticky; top: 0; z-index: 60;
  background: var(--veil-hd);
  background: color-mix(in srgb, var(--bg) 87%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-hover) var(--ease-out);
}
.hd[data-stuck] { border-bottom-color: var(--line); }
.hd-in { display: flex; align-items: center; gap: var(--s-4); min-height: 4.1rem; }
.hd-mark { display: flex; align-items: baseline; gap: var(--s-2); text-decoration: none;
  margin-right: auto; min-width: 0; }
.hd-mark b { font-family: var(--display); font-size: var(--t-1); font-weight: 600;
  letter-spacing: -.02em; white-space: nowrap; }
.hd-mark span { font-family: var(--mono); font-size: var(--t--2); letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-3); white-space: nowrap; }
.hd-nav { display: none; gap: var(--s-5); }
@media (min-width: 66rem) { .hd-nav { display: flex; } }
.hd-nav a { text-decoration: none; font-size: var(--t--1); color: var(--fg-2);
  position: relative; padding-block: var(--s-2);
  transition: color var(--d-hover) var(--ease-out); }
.hd-nav a::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: var(--clay); transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .hd-nav a:hover { color: var(--fg); }
  .hd-nav a:hover::after { transform: scaleX(1); }
}
.hd-nav a[aria-current="true"] { color: var(--fg); }
.hd-nav a[aria-current="true"]::after { transform: scaleX(1); }
.hd-acts { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.icobtn { display: grid; place-items: center; width: 2.3rem; height: 2.3rem;
  border: 1px solid var(--line); border-radius: var(--r); color: var(--fg-2);
  transition: border-color var(--d-hover) var(--ease-out),
              color var(--d-hover) var(--ease-out), transform var(--d-press) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .icobtn:hover { border-color: var(--fg); color: var(--fg); } }
.icobtn:active { transform: scale(.97); }
.hd-only-wide { display: none; }
@media (min-width: 26rem) { .hd-only-wide { display: inline; } }

/* ── hero ──────────────────────────────────────────────────────────────────── */
/* The right half is a photograph, not a card. A company that sells a house's
   imagery had an above-the-fold made of type and one grey box. */
.hero { padding-block: clamp(2rem, 4vw, 4rem) var(--s-8); }
.hero-in { display: grid; gap: var(--s-7); align-items: center; }
.hero-in > *, .hero-copy { min-width: 0; }
@media (min-width: 64rem) {
  .hero-in { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(3rem, 5vw, 6rem); }
}
.hero-h { font-size: clamp(3.4rem, 1.1rem + 5.6vw, 6.6rem); line-height: .94; letter-spacing: -.035em; }
.hero-h em { font-style: italic; color: var(--clay); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.hero-p { margin-top: var(--s-6); font-size: clamp(var(--t-0), .9rem + .5vw, var(--t-1)); line-height: 1.5;
  color: var(--fg-2); max-width: 36rem; }
.hero-acts { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero-sub { font-family: var(--mono); font-size: var(--t--2); color: var(--fg-3);
  margin-top: var(--s-3); letter-spacing: .04em; }

/* the audit's headline, one line of proof under the buttons */
.card-stat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5);
  align-items: center; margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid var(--line); max-width: 36rem; min-width: 0; }
.card-stat:empty { display: none; }
.card-stat-n { font-family: var(--display); font-size: clamp(2.6rem, 1.8rem + 2.4vw, 3.6rem);
  line-height: .9; letter-spacing: -.04em; color: var(--clay);
  font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 96; }
.card-stat-t { display: grid; gap: var(--s-1); min-width: 0; }
.card-stat-l { font-size: var(--t--1); line-height: 1.45; color: var(--fg); }
.card-stat-a { font-family: var(--mono); font-size: var(--t--2); color: var(--fg-3);
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px;
  transition: color var(--d-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .card-stat-a:hover { color: var(--clay); } }
.mini-bars { display: grid; gap: var(--s-3); padding-top: var(--s-4);
  border-top: 1px solid var(--line-2); }
.mini-bar { display: grid; gap: var(--s-2); min-width: 0; }
.mini-bar-t { display: flex; justify-content: space-between; gap: var(--s-3);
  font-size: var(--t--1); color: var(--fg-2); }
.mini-bar-t b { font-family: var(--mono); color: var(--clay); font-weight: 500;
  font-variant-numeric: tabular-nums; flex: none; }
.mini-bar .bar { margin: 0; }

/* the print: the house's garment photograph, re-textured per cloth */
.print { display: grid; gap: var(--s-4); min-width: 0; justify-self: center;
  width: min(100%, 30rem); }
@media (min-width: 64rem) { .print { width: min(100%, calc((100svh - 21rem) * 2 / 3), 30rem); justify-self: end; } }
/* double bezel: a hairline mount around a white print, the way a photograph is framed */
.print-frame { position: relative; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--r-lg);
  background: #fff; box-shadow: 0 0 0 1px var(--line), 0 0 0 .5rem var(--bg-2),
  0 0 0 calc(.5rem + 1px) var(--line-2), var(--sh-3); }
.print-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 30%; background: #fff; opacity: 0;
  transition: opacity 280ms var(--ease-out); }
.print-img:first-child, .print-img[data-on] { opacity: 1; }
/* without JS the first photograph simply stays; once print.js runs it owns which one shows */
.print[data-armed] .print-img:first-child:not([data-on]) { opacity: 0; }
.print-count { position: absolute; right: var(--s-3); top: var(--s-3);
  font-family: var(--mono); font-size: var(--t--2); letter-spacing: .08em;
  color: #494F57; background: rgba(255,255,255,.86); padding: .15rem .45rem; border-radius: 2px; }
.print-count b { color: #14171A; font-weight: 500; }
.print-picks { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .375rem;
  margin-top: var(--s-3); }
.print-pick { position: relative; aspect-ratio: 1; min-height: 2.25rem; border-radius: 2px; overflow: hidden;
  outline: 1px solid var(--line); outline-offset: -1px;
  transition: transform var(--d-press) var(--ease-out), outline-color var(--d-hover) var(--ease-out); }
.print-pick img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); }
.print-pick[aria-pressed="true"] { outline: 2px solid var(--clay); outline-offset: 2px; }
.print-pick:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .print-pick:hover { outline-color: var(--fg-2); } }
.print-cap { display: grid; gap: var(--s-2); }
.print-name { font-family: var(--mono); font-size: var(--t--2); letter-spacing: .04em; color: var(--fg); }
.print-note { font-size: var(--t--1); line-height: 1.5; color: var(--fg-3); }
@media (hover: none) { .print-pick { min-height: 2.5rem; } }

/* the three things we are, stated once, at the top */
.pillars { display: grid; gap: var(--s-5); margin-top: var(--s-8);
  padding-top: var(--s-6); border-top: 1px solid var(--line); }
@media (min-width: 52rem) { .pillars { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); } }
.pillar { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.pillar-n { font-family: var(--mono); font-size: var(--t--2); letter-spacing: .14em;
  text-transform: uppercase; color: var(--clay); }
.pillar-h { font-family: var(--display); font-size: var(--t-2); line-height: 1.14;
  letter-spacing: -.02em; }
.pillar-p { font-size: var(--t--1); color: var(--fg-2); line-height: 1.6; }

/* ── the audit: the centrepiece ────────────────────────────────────────────── */
.audit-lead { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 64rem) { .audit-lead { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--s-9); } }
.headline-stat { display: grid; gap: var(--s-3); }
.headline-stat .n { font-family: var(--display); font-size: var(--t-num); line-height: .95;
  letter-spacing: -.04em; color: var(--clay); font-variant-numeric: tabular-nums; }
.headline-stat .l { font-size: var(--t-2); font-family: var(--display); line-height: 1.2;
  letter-spacing: -.02em; max-width: 26rem; }
.headline-stat .d { font-family: var(--mono); font-size: var(--t--2); color: var(--fg-3);
  letter-spacing: .05em; line-height: 1.6; }

.findings { display: grid; gap: 0; border-top: 1px solid var(--line); margin-top: var(--s-7); }
.finding {
  display: grid; gap: var(--s-2); padding-block: var(--s-5);
  border-bottom: 1px solid var(--line-2); min-width: 0;
}
@media (min-width: 50rem) {
  .finding { grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, 1.1fr);
             gap: var(--s-5); align-items: center; }
}
.finding-n { font-family: var(--mono); font-size: var(--t-2); font-weight: 500;
  color: var(--clay); font-variant-numeric: tabular-nums; line-height: 1; }
.finding-n small { display: block; font-size: var(--t--2); color: var(--fg-3);
  letter-spacing: .08em; margin-top: var(--s-1); }
.finding-h { font-size: var(--t-0); line-height: 1.4; }
.finding-m { font-size: var(--t--1); color: var(--fg-2); line-height: 1.55; }
.bar { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden;
  margin-top: var(--s-2); }
.bar i { display: block; height: 100%; width: 0; background: var(--clay);
  transition: width var(--d-count) var(--ease-out); }
.finding.rv-on .bar i { width: var(--pct, 0%); }

.method {
  margin-top: var(--s-7); padding: var(--s-5); background: var(--bg-2);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  display: grid; gap: var(--s-4); min-width: 0;
}
.method[open] summary { margin-bottom: var(--s-2); }
.method summary { cursor: pointer; font-family: var(--mono); font-size: var(--t--2);
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.method summary::marker { color: var(--clay); }
.method-body { display: grid; gap: var(--s-4); }
.method-body p { font-size: var(--t--1); color: var(--fg-2); line-height: 1.65; max-width: 44rem; }
.method-body h4 { font-family: var(--mono); font-size: var(--t--2); letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-3); }
.method-body ul { margin: 0; padding-left: var(--s-5); display: grid; gap: var(--s-2); }
.method-body li { font-size: var(--t--1); color: var(--fg-2); line-height: 1.6; }
.funnel { display: grid; gap: 0; font-family: var(--mono); font-size: var(--t--2); }
.funnel div { display: flex; justify-content: space-between; gap: var(--s-4);
  padding-block: var(--s-2); border-bottom: 1px solid var(--line-2); }
.funnel dt { color: var(--fg-3); }
.funnel dd { color: var(--fg); font-variant-numeric: tabular-nums; }

/* ── the gap (the problem) ─────────────────────────────────────────────────── */
.gaps { display: grid; gap: var(--s-4); }
@media (min-width: 54rem) { .gaps { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
.gap {
  display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  min-width: 0;
}
.gap-a { flex: 1 1 auto; }
.gap-t { margin-top: auto; }
.sec--raised .gap { background: var(--bg); }
.gap-q { font-family: var(--display); font-size: var(--t-2); line-height: 1.16;
  letter-spacing: -.02em; }
.gap-a { font-size: var(--t--1); color: var(--fg-2); line-height: 1.65; }
.gap-t { font-family: var(--mono); font-size: var(--t--2); color: var(--clay);
  letter-spacing: .08em; padding-top: var(--s-3); border-top: 1px solid var(--line-2); }

/* ── the ladder ────────────────────────────────────────────────────────────── */
.stages { display: grid; gap: var(--s-6); }
.stage {
  display: grid; gap: var(--s-5); padding: var(--s-6);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-2);
  min-width: 0;
}
@media (min-width: 62rem) {
  .stage { grid-template-columns: 19rem minmax(0, 1fr); gap: var(--s-8); align-items: start; }
  /* the step list is much taller than the lead; sticking the lead uses the
     column instead of leaving a tall blank beside it */
  .stage-lead { position: sticky; top: 6rem; }
}
.stage-lead { display: grid; gap: var(--s-3); align-content: start; }
.stage-k { font-family: var(--mono); font-size: var(--t--2); letter-spacing: .15em;
  text-transform: uppercase; color: var(--clay); }
.stage-h { font-family: var(--display); font-size: var(--t-3); line-height: 1.1;
  letter-spacing: -.024em; }
.stage-p { font-size: var(--t--1); color: var(--fg-2); line-height: 1.65; }
.steps { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; }
.steps > li, .runs > li { list-style: none; }
.step {
  display: grid; gap: var(--s-1); padding-block: var(--s-4);
  border-top: 1px solid var(--line-2); min-width: 0;
}
@media (min-width: 40rem) {
  .step { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s-4); align-items: baseline; }
}
.step:first-child { border-top: 0; }
.step-n { font-family: var(--mono); font-size: var(--t--2); color: var(--fg-3);
  letter-spacing: .06em; }
.step-b { display: grid; gap: var(--s-1); min-width: 0; }
.step-h { font-size: var(--t-0); line-height: 1.4; }
.step-p { font-size: var(--t--1); color: var(--fg-2); line-height: 1.6; }
.step-tag { font-family: var(--mono); font-size: var(--t--2); color: var(--clay);
  letter-spacing: .06em; }

/* ── the menu ──────────────────────────────────────────────────────────────── */
.menu { display: grid; gap: var(--s-4); }
@media (min-width: 46rem) { .menu { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 76rem) { .menu { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
.item {
  display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-2);
  min-width: 0;
  transition: border-color var(--d-hover) var(--ease-out),
              transform var(--d-hover) var(--ease-out);
}
.item-p { flex: 1 1 auto; }
@media (hover: hover) and (pointer: fine) {
  .item:hover { border-color: var(--clay); transform: translateY(-2px); }
}
.item[data-lead="1"] { border-color: var(--clay); background: var(--bg); }
.item-badge { font-family: var(--mono); font-size: var(--t--2); letter-spacing: .12em;
  text-transform: uppercase; color: var(--clay-fg); background: var(--clay);
  padding: .15rem var(--s-2); border-radius: 2px; justify-self: start; }
.item-n { font-family: var(--mono); font-size: var(--t--2); color: var(--fg-3);
  letter-spacing: .1em; }
.item-h { font-family: var(--display); font-size: var(--t-2); line-height: 1.14;
  letter-spacing: -.02em; }
.item-p { font-size: var(--t--1); color: var(--fg-2); line-height: 1.6; }
.item-t { font-family: var(--mono); font-size: var(--t--2); color: var(--fg-3);
  letter-spacing: .05em; padding-top: var(--s-3); border-top: 1px solid var(--line-2);
  margin-top: auto; }

/* ── the demonstrations ────────────────────────────────────────────────────── */
.demos { display: grid; gap: var(--s-5); }
@media (min-width: 60rem) {
  .demos { grid-template-columns: repeat(2, 1fr); gap: var(--s-6);
           align-items: start; }   /* a short card should not inherit a tall row */
}
.demo {
  display: grid; gap: var(--s-4); align-content: start; padding: var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-2);
  min-width: 0;
}
.demo-hd { display: grid; gap: var(--s-2); }
.demo-k { font-family: var(--mono); font-size: var(--t--2); letter-spacing: .13em;
  text-transform: uppercase; color: var(--clay); }
.demo-h { font-family: var(--display); font-size: var(--t-2); line-height: 1.14;
  letter-spacing: -.02em; }
.demo-p { font-size: var(--t--1); color: var(--fg-2); line-height: 1.6; }
.demo-stage { background: var(--bg); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: var(--s-4); min-width: 0; }
.demo-note { font-family: var(--mono); font-size: var(--t--2); color: var(--fg-3);
  line-height: 1.6; }

/* a live cloth grid, cut down */
.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr));
  gap: var(--s-2); }
.mini-sw { aspect-ratio: 1; min-height: 2.75rem; border-radius: 2px; overflow: hidden; border: 1px solid var(--line);
  transition: border-color var(--d-hover) var(--ease-out), transform var(--d-press) var(--ease-out); }
.mini-sw img { width: 100%; height: 100%; object-fit: cover; }
.mini-sw[aria-pressed="true"] { border-color: var(--clay); border-width: 2px; }
.mini-sw:active { transform: scale(.95); }
.mini-spec { display: grid; gap: 0; margin-top: var(--s-4); }
.mini-spec div { display: flex; justify-content: space-between; gap: var(--s-3);
  padding-block: var(--s-2); border-bottom: 1px solid var(--line-2); }
.mini-spec dt { font-family: var(--mono); font-size: var(--t--2); color: var(--fg-3);
  letter-spacing: .08em; text-transform: uppercase; }
.mini-spec dd { font-size: var(--t--1); text-align: right; }

/* the lead-reception demo */
.reply { display: grid; gap: var(--s-3); }
.bubble { padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); font-size: var(--t--1);
  line-height: 1.55; max-width: 92%; }
.bubble--in { background: var(--bg-3); justify-self: start; border-bottom-left-radius: 2px; }
.bubble--out { background: var(--clay); color: var(--clay-fg); justify-self: end;
  border-bottom-right-radius: 2px; }
.bubble-k { font-family: var(--mono); font-size: var(--t--2); letter-spacing: .1em;
  text-transform: uppercase; opacity: .72; display: block; margin-bottom: var(--s-1); }
.typing { display: inline-flex; gap: 3px; }
.typing i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .4;
  animation: blip 1.1s var(--ease-in-out) infinite; }
.typing i:nth-child(2) { animation-delay: .16s; }
.typing i:nth-child(3) { animation-delay: .32s; }
@keyframes blip { 0%, 60%, 100% { opacity: .25; } 30% { opacity: .95; } }

/* the competitor-research demo */
.scan { display: grid; gap: var(--s-2); }
.scan-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3);
  align-items: center; padding-block: var(--s-2); border-bottom: 1px solid var(--line-2);
  font-size: var(--t--1); }
.scan-row b { font-weight: 500; }
.scan-mark { font-family: var(--mono); font-size: var(--t--2); letter-spacing: .06em;
  min-height: 2.5rem; min-width: 2.75rem; display: inline-grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r); }
.scan-mark[data-on="yes"] { border-color: var(--good); }
.scan-mark[data-on="no"] { border-color: var(--clay); }
.scan-mark[data-on="yes"] { color: var(--good); }
.scan-mark[data-on="no"] { color: var(--clay); }

/* ── how it runs ───────────────────────────────────────────────────────────── */
.runs { display: grid; gap: var(--s-1); list-style: none; padding: 0; margin: 0; }
@media (min-width: 62rem) { .runs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } }
.run { position: relative; padding: var(--s-5) 0 var(--s-5) var(--s-6);
  border-left: 1px solid var(--line); min-width: 0; }
@media (min-width: 62rem) {
  .run { padding: var(--s-6) var(--s-5) var(--s-5) 0; border-left: 0; border-top: 1px solid var(--line); }
}
.run::before { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: var(--clay); left: -4px; top: calc(var(--s-5) + .5em); }
@media (min-width: 62rem) { .run::before { left: 0; top: -4px; } }
.run-k { font-family: var(--mono); font-size: var(--t--2); color: var(--fg-3);
  letter-spacing: .14em; display: block; margin-bottom: var(--s-2); }
.run-h { font-family: var(--display); font-size: var(--t-1); line-height: 1.16;
  margin-bottom: var(--s-2); letter-spacing: -.02em; }
.run-p { font-size: var(--t--1); color: var(--fg-2); line-height: 1.6; }

/* ── who ───────────────────────────────────────────────────────────────────── */
.who { display: grid; gap: var(--s-6); }
@media (min-width: 58rem) { .who { grid-template-columns: repeat(2, 1fr); gap: var(--s-8); } }
.who-c { display: grid; gap: var(--s-3); align-content: start; min-width: 0; }
.who-k { font-family: var(--mono); font-size: var(--t--2); letter-spacing: .14em;
  text-transform: uppercase; color: var(--clay); }
.who-h { font-family: var(--display); font-size: var(--t-3); line-height: 1.1;
  letter-spacing: -.024em; }
.who-p { color: var(--fg-2); }
.who-list { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.who-list li { list-style: none; font-size: var(--t--1); color: var(--fg-2);
  display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: var(--s-2); }
.who-list b { color: var(--clay); font-family: var(--mono); font-size: var(--t--2); }

/* ── the call ──────────────────────────────────────────────────────────────── */
.call { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 64rem) { .call { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-9); } }
.agenda { display: grid; gap: 0; }
.agenda-i { display: grid; gap: var(--s-1); padding-block: var(--s-4);
  border-bottom: 1px solid var(--line-2); min-width: 0; }
@media (min-width: 34rem) {
  .agenda-i { grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--s-4); align-items: baseline; }
}
.agenda-t { font-family: var(--mono); font-size: var(--t--2); color: var(--clay); letter-spacing: .08em; }
.agenda-v { font-size: var(--t--1); color: var(--fg-2); line-height: 1.6; }
.agenda-v b { color: var(--fg); font-weight: 600; }

.form { display: grid; gap: var(--s-5); min-width: 0; }
.steps-bar { display: flex; gap: var(--s-2); align-items: center; }
.pip { flex: 1; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.pip i { display: block; height: 100%; width: 0; background: var(--clay);
  transition: width var(--d-pop) var(--ease-out); }
.pip[data-on="1"] i { width: 100%; }
.step-lbl { font-family: var(--mono); font-size: var(--t--2); color: var(--fg-3);
  letter-spacing: .12em; text-transform: uppercase; }
.fgrid { display: grid; gap: var(--s-4); min-width: 0; max-width: 32rem; }
@media (min-width: 34rem) { .fgrid--pair { grid-template-columns: 1fr 1fr; } }
.form { max-width: 32rem; }
.field { display: grid; gap: var(--s-2); min-width: 0; }
.field > label { font-family: var(--mono); font-size: var(--t--2); letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-3); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 2.9rem; padding: var(--s-3) var(--s-4);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  font-size: var(--t-0);
  transition: border-color var(--d-hover) var(--ease-out);
}
.field textarea { min-height: 6.5rem; resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--fg); }
.field[data-bad="1"] input, .field[data-bad="1"] textarea, .field[data-bad="1"] select { border-color: var(--clay); }
.field-err { font-size: var(--t--1); color: var(--clay); }
.form-note { font-size: var(--t--1); color: var(--fg-3); line-height: 1.6; }
.form-acts { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.picks, .enqs { display: grid; gap: var(--s-2); }
@media (min-width: 30rem) { .picks { grid-template-columns: repeat(2, 1fr); } }
.pick, .enq { display: flex; align-items: center; gap: var(--s-3); text-align: left;
  min-height: 2.75rem;
  padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r);
  font-size: var(--t--1); color: var(--fg-2); min-width: 0;
  transition: border-color var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out),
              transform var(--d-press) var(--ease-out); }
.pick:active, .enq:active { transform: scale(.98); }
.pick-box { flex: none; width: .95rem; height: .95rem; border: 1px solid var(--line);
  border-radius: 2px; display: grid; place-items: center;
  transition: background var(--d-hover) var(--ease-out), border-color var(--d-hover) var(--ease-out); }
.pick-box svg { opacity: 0; color: var(--clay-fg); transition: opacity var(--d-press) var(--ease-out); }
.pick[aria-pressed="true"], .enq[aria-pressed="true"] { border-color: var(--clay); color: var(--fg); }
.pick[aria-pressed="true"] .pick-box, .enq[aria-pressed="true"] .pick-box {
  background: var(--clay); border-color: var(--clay); }
.pick[aria-pressed="true"] .pick-box svg, .enq[aria-pressed="true"] .pick-box svg { opacity: 1; }
.ok { display: grid; gap: var(--s-4); padding: var(--s-6); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.ok-h { font-family: var(--display); font-size: var(--t-3); line-height: 1.12;
  letter-spacing: -.024em; }
.ok-list { display: grid; gap: var(--s-3); padding: 0; }
.ok-list li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: var(--s-2);
  font-size: var(--t--1); color: var(--fg-2); list-style: none; }
.ok-list b { font-family: var(--mono); color: var(--clay); font-size: var(--t--2); }

/* ── the demo callout (the closer, deliberately last) ──────────────────────── */
.closer { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 60rem) { .closer { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: var(--s-8); } }
/* the house on a desktop, with the same page on a phone laid over its corner */
.closer-frame { position: relative; min-width: 0; padding-bottom: clamp(2rem, 6vw, 4rem); }
.closer-win { display: block; border-radius: var(--r-lg); overflow: hidden; text-decoration: none;
  background: var(--bg-3); box-shadow: 0 0 0 1px var(--line), var(--sh-3);
  transition: transform var(--d-sheet) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .closer-win:hover { transform: translateY(-3px); } }
.closer-win:active { transform: scale(.99); }
.closer-bar { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line-2); background: var(--bg-2); }
.closer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.closer-url { font-family: var(--mono); font-size: var(--t--2); color: var(--fg-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.closer-win img { width: 100%; display: block; }
.closer-phone { position: absolute; right: calc(-1 * min(1.5rem, var(--gutter) / 2)); bottom: 0; width: 27%;
  max-width: 11rem; aspect-ratio: 780 / 1688; border-radius: 1.4rem; overflow: hidden;
  background: #0C0A09; padding: .3rem;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), var(--sh-3); pointer-events: none; }
.closer-phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 1.15rem; }

/* ── footer ────────────────────────────────────────────────────────────────── */
.ft { padding-block: var(--s-8) var(--s-7); border-top: 1px solid var(--line);
  background: var(--bg-2); }
.ft-in { display: grid; gap: var(--s-6); }
@media (min-width: 60rem) { .ft-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-9); } }
.ft-mark b { font-family: var(--display); font-size: var(--t-2); display: block; letter-spacing: -.02em; }
.ft-mark span { font-family: var(--mono); font-size: var(--t--2); letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-3); }
.ft-note { font-size: var(--t--1); color: var(--fg-2); line-height: 1.65; max-width: 42rem; }
.ft-note strong { color: var(--fg); font-weight: 600; }
.ft-meta { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-5);
  padding-top: var(--s-4); border-top: 1px solid var(--line-2);
  font-family: var(--mono); font-size: var(--t--2); color: var(--fg-3); letter-spacing: .05em; }

/* ── native scroll-driven enhancement, behind a support query ──────────────
   IntersectionObserver is the baseline: ~84% global support, and Firefox 152
   still has this behind a flag in stable. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rv-sd { animation: rv-in linear both; animation-timeline: view();
             animation-range: entry 8% cover 26%; opacity: 1; transform: none; }
    @keyframes rv-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  }
}

@media print {
  .hd, .skip, .demo-stage, .form { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ── the rendering demonstration: one plate, two crops ─────────────────────── */
.look-set { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: .5rem; }
.look-main, .look-side { min-width: 0; }
.look-side { display: grid; gap: .5rem; }
.look-plate, .look-crop { width: 100%; height: 100%; object-fit: cover; background: #fff;
  border-radius: 2px; }
.look-plate { aspect-ratio: 2 / 3; object-position: 50% 30%; }
/* a crop with no ratio of its own took its height from the photograph, so the
   section was 8px taller once it had loaded than before (gate C3) */
.look-crop { aspect-ratio: 2 / 3; height: auto; min-height: 0; }
.look-side { align-content: space-between; }
.look-demo .mini-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .375rem; }
.look-demo .mini-sw { min-height: 0; }
@media (max-width: 40rem) { .look-demo .mini-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── scan: the audit on your own site ─────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; }
.live-grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 64rem) { .live-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-8); }
  .live-side { position: sticky; top: calc(4.5rem + var(--s-5)); } }
.live-side, .live-out { min-width: 0; }
.live { position: relative; display: grid; gap: var(--s-3);
  padding: var(--s-5); border-radius: var(--r-lg); background: var(--bg-2);
  box-shadow: 0 0 0 1px var(--line), var(--sh-2); overflow: hidden; }
.live-label, .live-k { font-family: var(--mono); font-size: var(--t--2); letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-3); }
.live-row-in { display: flex; gap: var(--s-2); min-width: 0; }
.live-row-in input { flex: 1; min-width: 0; height: 3.25rem; padding: 0 var(--s-4);
  font-size: var(--t-1); font-family: var(--mono); letter-spacing: -.01em;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color var(--d-hover) var(--ease-out); }
.live-row-in input:focus { outline: none; border-color: var(--fg); }
.live-row-in .btn { height: 3.25rem; flex: none; }
.live-try { font-size: var(--t--1); color: var(--fg-3); }
.live-demo { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line);
  text-underline-offset: 3px; min-height: 2.5rem; transition: color var(--d-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .live-demo:hover { color: var(--clay); } }
.live-demo:active { transform: scale(.97); }
@media (max-width: 34rem) {
  /* ⚠️ `flex: 1` on the input means `flex-basis: 0`, and once the row turns
     into a COLUMN that basis applies to the height — so the field collapsed
     from 52px to 29px on every phone, while the button beside it kept its
     size. This is the audit box: the one control the whole site is built to
     get tapped, squashed on the device most people open the link on. */
  .live-row-in { flex-direction: column; }
  .live-row-in .btn { width: 100%; }
  .live-row-in input { flex: none; width: 100%; }
}
/* indeterminate: a line that travels while we wait. It claims no percentage. */
.live-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden;
  opacity: 0; transition: opacity 200ms var(--ease-out); }
.live-bar i { position: absolute; inset: 0; width: 38%; background: var(--clay); transform: translateX(-100%); }
.live[data-busy] .live-bar { opacity: 1; }
.live[data-busy] .live-bar i { animation: live-sweep 1.1s var(--ease-in-out) infinite; }
@keyframes live-sweep { to { transform: translateX(265%); } }
@media (prefers-reduced-motion: reduce) {
  .live[data-busy] .live-bar i { animation: none; transform: none; width: 100%; opacity: .5; }
}

.live-sum-slot:not(:empty) { margin-top: var(--s-6); }
.live-err { color: var(--clay); }
.live-sum { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5); align-items: center; }
.live-score { font-family: var(--display); line-height: .85; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.live-score b { font-weight: 400; font-size: var(--t-num); color: var(--clay); }
.live-score span { font-size: var(--t-3); color: var(--fg-3); }
.live-host { font-weight: 500; overflow-wrap: anywhere; line-height: 1.35; }
.live-meta { font-family: var(--mono); font-size: var(--t--2); color: var(--fg-3); margin-top: var(--s-1); }
.live-note { font-family: var(--mono); font-size: var(--t--2); color: var(--fg-3); line-height: 1.6; margin-top: var(--s-5); }
.live-cta { margin-top: var(--s-5); }

.live-k { margin-bottom: var(--s-2); }
.live-list { list-style: none; padding: 0; display: grid; border-top: 1px solid var(--line); }
.live-item { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) 5rem; gap: var(--s-4);
  align-items: center; padding: var(--s-4) 0; border-bottom: 1px solid var(--line-2); }
.live-mark { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center;
  font-size: 1rem; line-height: 1; box-shadow: inset 0 0 0 1px var(--line); color: var(--fg-3);
  transform: scale(1);
  transition: background-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out), transform 220ms var(--ease-out); }
.live-item[data-state="pass"] .live-mark { background: var(--good); color: var(--bg); box-shadow: none; }
.live-item[data-state="fail"] .live-mark { background: var(--clay); color: var(--clay-fg); box-shadow: none; }
.live-h { font-size: var(--t-0); line-height: 1.35; transition: color 220ms var(--ease-out); }
.live-item[data-state="wait"] .live-h { color: var(--fg-2); }
.live-cmp { font-size: var(--t--1); color: var(--fg-3); line-height: 1.5; margin-top: .15rem; overflow-wrap: anywhere; }
.live-meter { position: relative; height: 4px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.live-meter i { position: absolute; top: 0; bottom: 0; left: 0; width: var(--pct); background: var(--fg-3);
  transform-origin: 0 50%; transform: scaleX(0); transition: transform 700ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 50ms); }
.live-out.rv-on .live-meter i, html:not(.rv-armed) .live-meter i { transform: scaleX(1); }
.live-item[data-state="fail"] .live-meter i { background: var(--clay); }
@media (max-width: 34rem) { .live-item { grid-template-columns: 1.75rem minmax(0, 1fr); }
  .live-meter { grid-column: 2; } }

/* the verdicts land row by row, in the order the page lists them */
.live-out[data-done] .live-item:not([data-state="wait"]) .live-mark { animation: live-land 300ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes live-land { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.live-sum-slot > * { animation: live-in 260ms var(--ease-out) both; }
.live-sum-slot > :nth-child(2) { animation-delay: 80ms; }
.live-sum-slot > :nth-child(3) { animation-delay: 140ms; }
@keyframes live-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .live-out[data-done] .live-item .live-mark, .live-sum-slot > * { animation: none; }
  .live-meter i, .live-mark { transition: none; }
}

/* ── signature motion ─────────────────────────────────────────────────────── */
/* the headline rises word by word out of its own line, once, on arrival */
.hero-h .w { display: inline-block; overflow: clip; overflow-clip-margin: .2em;
  padding-bottom: .14em; margin-bottom: -.14em; vertical-align: top; }
.hero-h .w > span { display: inline-block; }
html.rv-armed .hero-h.rv { transform: none; }
html.rv-armed .hero-h .w > span { transform: translateY(108%); }
html.rv-armed .hero-h.rv-on .w > span, html:not(.rv-armed) .hero-h .w > span {
  transform: none; transition: transform 780ms var(--ease-out);
  transition-delay: calc(var(--w, 0) * 70ms + 60ms); }

/* the path: a rail that fills as you read, and numbers that light once passed */
@media (min-width: 40rem) {
  .steps { position: relative; }
  .steps::before, .steps::after { content: ""; position: absolute; left: -1.1rem; top: var(--s-4);
    bottom: var(--s-4); width: 2px; border-radius: 1px; }
  .steps::before { background: var(--line); }
  .steps::after { background: var(--clay); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
}
.step-n { transition: color 240ms var(--ease-out); }
.step[data-past] .step-n { color: var(--clay); }

/* the menu: cards answer the pointer, lightly */
@media (hover: hover) and (pointer: fine) {
  /* scoped as high as the reveal's own `html.rv-armed .rv.rv-on`, or that rule's
     transform:none wins and the card never moves */
  html .menu .item.rv:hover { transform: translateY(-3px); box-shadow: var(--sh-2);
    transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out); transition-delay: 0ms; }
}

/* ── the film: one client, scrubbed by scroll ─────────────────────────────── */
.film { position: relative; padding-top: var(--sec-y); }
.film-hd { margin-bottom: var(--s-6); }
.film-hd .sec-h { max-width: 18ch; }
/* the runway only exists once the film is live; without JS or with reduced
   motion the section is its natural height */
.film[data-live] { height: calc(var(--film-len, 5.5) * 100svh); }
.film-pin { position: relative; }
.film[data-live] .film-pin { position: sticky; top: 4.25rem; height: calc(100svh - 4.25rem);
  display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: clip; }
.film-in { display: grid; gap: var(--s-5); align-items: center; min-height: 0; }
@media (min-width: 64rem) { .film-in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-8); } }
.film-caps { list-style: none; padding: 0; margin: 0; display: grid; min-width: 0; }
.film-cap { font-family: var(--text); font-size: clamp(1.6rem, 1rem + 2.2vw, 2.9rem); line-height: 1.12;
  letter-spacing: -.025em; }
.film-cap .film-lead { display: block; color: var(--fg-2); font-weight: 400; }
.film-cap b { display: block; font-family: var(--display); font-weight: 500; font-size: 1.12em;
  letter-spacing: -.035em; color: var(--fg); font-variation-settings: "opsz" 96; }
.film[data-live] .film-caps > .film-cap { grid-area: 1 / 1; opacity: 0; transform: translateY(12px);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); }
.film[data-live] .film-caps > .film-cap[data-on] { opacity: 1; transform: none; }
.film-cap .fw { transition: opacity 120ms linear; }
.film:not([data-live]):not([data-still]) .film-caps { gap: var(--s-5); padding-block: var(--s-6); }
.film:not([data-ready]) .film-stage { display: none; }
@media (max-width: 63.99rem) {
  .film[data-live] .film-in { grid-template-rows: auto minmax(0, 1fr); align-items: stretch; padding-block: var(--s-4); }
  .film[data-live] .film-caps { min-height: 6.2em; font-size: .82rem; align-content: start; }
}

.film-stage { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 100%;
  perspective: 1400px; perspective-origin: 50% 40%; container-type: inline-size; min-width: 0; }
@media (max-width: 63.99rem) { .film-stage { aspect-ratio: auto; height: 100%; min-height: 20rem; } }
.film-foot { font-family: var(--mono); font-size: var(--t--2); color: var(--fg-3); padding-block: var(--s-3) var(--s-5); }

/* every actor: centred, transformed by film.js */
.fo { position: absolute; left: 50%; top: 50%; will-change: transform, opacity; opacity: 0;
  backface-visibility: hidden; }
/* no preserve-3d: nothing nests in depth, and with it a fading card split into
   its own background and content planes (a grey slab beside the letter) */
.film-stage { font-size: clamp(10px, 2.25cqi, 19px); }

.f-phone { width: 30cqi; aspect-ratio: 780 / 1688; border-radius: 3.6cqi; padding: .7cqi;
  background: #0C0A09; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 40px 80px -20px rgba(0,0,0,.45); }
.f-phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 3cqi; background: #111; }

.f-card { border-radius: .9em; padding: 1.2em 1.3em; display: grid; gap: .55em;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 30px 60px -18px rgba(0,0,0,.4), 0 8px 18px -8px rgba(0,0,0,.25); }
.f-dark { background: #16181B; color: #EDEAE3; }
.f-paper { background: #FBF8F2; color: #15171B; box-shadow: 0 0 0 1px rgba(20,23,26,.08), 0 30px 60px -18px rgba(0,0,0,.28); }
.f-k { font-family: var(--mono); font-size: .72em; letter-spacing: .1em; text-transform: uppercase; opacity: .62;
  display: flex; align-items: center; gap: .5em; }
.f-h { font-size: 1.45em; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.f-sub { font-size: .85em; opacity: .66; }
.f-cal { width: 46cqi; }
.f-slots { display: flex; gap: .5em; flex-wrap: wrap; }
.f-slots span { font-family: var(--mono); font-size: .9em; padding: .45em .8em; border-radius: 99px;
  box-shadow: inset 0 0 0 1px rgba(237,234,227,.18); transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out); }
.f-slots .f-on { background: #E0764F; color: #180A05; box-shadow: none; }
.f-stamp { font-family: var(--text); font-weight: 600; font-size: 1.15em; letter-spacing: .02em; text-transform: uppercase;
  padding: .35em .75em; border-radius: .35em; background: #15171B; color: #FBF8F2; white-space: nowrap;
  box-shadow: 0 0 0 2px #FBF8F2, 0 14px 30px -10px rgba(0,0,0,.45); }
.f-chip { font-family: var(--mono); font-size: .95em; padding: .5em .9em; border-radius: 99px; white-space: nowrap;
  background: #FBF8F2; color: #15171B; box-shadow: 0 0 0 1px rgba(20,23,26,.1), 0 12px 26px -10px rgba(0,0,0,.3); }
.f-chip b { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; margin-left: .35em;
  border-radius: 99px; background: #B44A26; color: #FFF6F2; font-weight: 500; }
.f-sw { width: 23cqi; padding: .6em; gap: .45em; }
.f-sw-img { display: block; aspect-ratio: 1; border-radius: .45em; overflow: hidden; background: #ddd; }
.f-sw-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); }
.f-sw-name { font-size: .78em; line-height: 1.25; font-weight: 500; padding-inline: .15em; }
.f-sw-tick { display: flex; align-items: center; gap: .35em; font-family: var(--mono); font-size: .68em;
  color: #1E6B4F; padding-inline: .15em; opacity: 0; transition: opacity 180ms var(--ease-out); }
.f-ticked .f-sw-tick { opacity: 1; }
.f-note { width: 48cqi; }
.f-dot { width: .55em; height: .55em; border-radius: 50%; background: #4FBF92; display: inline-block; }
.f-mini { display: flex; gap: .4em; }
.f-mini img { width: 2.6em; height: 2.6em; object-fit: cover; border-radius: .35em; }
.f-btn { justify-self: start; font-size: .85em; font-weight: 500; padding: .55em 1em; border-radius: .45em;
  box-shadow: inset 0 0 0 1px rgba(237,234,227,.25); transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out); }
.f-btn.f-on { background: #E0764F; color: #180A05; box-shadow: none; }
.f-letter { width: 34cqi; min-height: 42cqi; align-content: start; padding: 1.6em 1.5em; }
.f-serif { font-family: var(--display); font-size: 1.7em; letter-spacing: -.02em; line-height: 1; }
.f-line { font-size: .9em; line-height: 1.4; }
.f-ghost { height: .6em; border-radius: 99px; background: rgba(20,23,26,.09); }
.f-short { width: 60%; }
.f-cursor { width: 2.2em; height: 2.2em; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); z-index: 5; }
.f-cursor svg { width: 100%; height: 100%; }

/* reduced motion: five stills */
.film[data-still] .film-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); padding-block: var(--s-6) var(--s-4); }
.film-still .film-cap { list-style: none; }
.film[data-still] .film-caps { display: none; }
.film-still { display: grid; gap: var(--s-4); margin: 0; }
@media (min-width: 64rem) { .film-still { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-8); align-items: center; } }
.film-still .film-cap .fw { opacity: 1 !important; }
@media (max-width: 63.99rem) { .film-still .film-stage { aspect-ratio: 4 / 3; height: auto; min-height: 0; } }
/* a phone's stage is tall and narrow, so the cast is sized up against its width */
@container (max-width: 40rem) {
  .fo.f-phone { width: 42cqi; }
  .fo.f-cal, .fo.f-note { width: 76cqi; }
  .fo.f-sw { width: 31cqi; }
  .fo.f-letter { width: 50cqi; min-height: 60cqi; }
  .fo { font-size: 3.4cqi; }
  .fo.f-cursor { width: 7cqi; height: 7cqi; }
}
.film-still .film-stage { overflow: clip; }
/* the cast scales with the stage, but never below the page's own 12px floor */
.f-k { font-size: max(.72em, 12px); }
.f-sub, .f-slots span, .f-line, .f-sw-name, .f-mini + .f-sub { font-size: max(.85em, 12px); }
.f-sw-tick { font-size: max(.68em, 12px); }
.f-btn { font-size: max(.85em, 12px); }

/* ── hero motion: cards off the print's edges ─────────────────────────────── */
.hero { overflow-x: clip; }
.print { position: relative; }
.print-frame { transform: translate3d(0, calc(var(--hp, 0) * 70px), 0) scale(calc(1 - var(--hp, 0) * .05)); }
.pf { position: absolute; z-index: 3; pointer-events: none; opacity: 0;
  transition: opacity 420ms var(--ease-out), transform 620ms var(--ease-out); }
.print[data-float] .pf { opacity: 1; }
.pf-audit { left: -18%; top: 14%; width: min(15rem, 58%); padding: .9rem 1rem 1rem; border-radius: .8rem;
  background: #16181B; color: #EDEAE3; display: grid; gap: .2rem;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 30px 60px -18px rgba(0,0,0,.5);
  transform: translate3d(-12px, calc(8px + var(--hp, 0) * -150px), 0) rotate(-4deg) scale(.95); }
.print[data-float] .pf-audit { transform: translate3d(0, calc(var(--hp, 0) * -150px), 0) rotate(-4deg); }
.pf-audit:not([data-ready]) { visibility: hidden; }
.pf-k { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .6;
  display: flex; align-items: center; gap: .45em; }
.pf-k i { width: 7px; height: 7px; border-radius: 50%; background: #E0764F; }
.pf-audit .pf-n { font-family: var(--display); font-weight: 400; font-size: 2.6rem; line-height: 1; letter-spacing: -.04em; color: #E0764F;
  font-variation-settings: "opsz" 96; }
.pf-l { font-size: 13px; line-height: 1.4; opacity: .88; }
.pf-l a { pointer-events: auto; color: #E0764F; text-underline-offset: 2px; }
.pf-sw { right: -7%; bottom: 19%; width: min(15rem, 52%); padding: .5rem; border-radius: .8rem;
  background: #FBF8F2; color: #15171B; display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: .6rem; align-items: center;
  box-shadow: 0 0 0 1px rgba(20,23,26,.08), 0 26px 50px -16px rgba(0,0,0,.4);
  transform: translate3d(12px, calc(8px + var(--hp, 0) * -260px), 0) rotate(3deg) scale(.95); }
.print[data-float] .pf-sw { transform: translate3d(0, calc(var(--hp, 0) * -260px), 0) rotate(3deg); }
.pf-sw-img { display: block; aspect-ratio: 1; border-radius: .45rem; overflow: hidden; background: #ddd; }
.pf-sw-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); }
.pf-sw-t { display: grid; gap: .1rem; min-width: 0; }
.pf-sw-t b { font-size: 13px; font-weight: 500; line-height: 1.25; }
.pf-sw-t i { font-style: normal; font-family: var(--mono); font-size: 12px; opacity: .6; line-height: 1.3; }
.pf-flip .pf-sw-img, .pf-flip .pf-sw-t { animation: pf-in 320ms var(--ease-out) both; }
@keyframes pf-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.pf-cursor { position: absolute; left: 0; top: 0; z-index: 4; width: 26px; height: 26px; pointer-events: none;
  opacity: 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35));
  transform: translate3d(calc(var(--cx, 60%) + 40px), calc(var(--cy, 80%) + 60px), 0);
  transition: transform 700ms cubic-bezier(.77, 0, .175, 1), opacity 240ms var(--ease-out); }
.pf-cursor svg { width: 100%; height: 100%; transition: transform 120ms var(--ease-out); transform-origin: 20% 10%; }
.pf-cursor[data-on] { opacity: 1; transform: translate3d(var(--cx), var(--cy), 0); }
.pf-cursor[data-press] svg { transform: scale(.82); }

@media (max-width: 63.99rem) {
  .pf-audit { left: -4%; top: 6%; width: min(13rem, 56%); }
  .pf-audit .pf-n { font-size: 2.1rem; }
  .pf-sw { right: -4%; bottom: 16%; }
}
@media (prefers-reduced-motion: reduce) {
  .print-frame, .pf-audit, .pf-sw, .print[data-float] .pf-audit, .print[data-float] .pf-sw { transition: none; }
  .print-frame { transform: none; }
  .print[data-float] .pf-audit { transform: rotate(-4deg); }
  .print[data-float] .pf-sw { transform: rotate(3deg); }
}

/* the film, slower: about a viewport and three-quarters of scroll per scene */
.film[data-live] { --film-len: 9.5; }

/* ── the audit, one square per house ─────────────────────────────────────── */
.dots-wrap { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.dots { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; max-width: 44rem; }
@media (max-width: 40rem) { .dots { grid-template-columns: repeat(15, minmax(0, 1fr)); } }
.dots i { aspect-ratio: 1; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line); transform: scale(.7); opacity: .5;
  transition: background-color 260ms var(--ease-out), transform 360ms var(--ease-out), opacity 260ms var(--ease-out); }
.dots i[data-on], .dots-wrap:not([data-live]) .dots i, .dots-wrap[data-lit="all"] .dots i { transform: none; opacity: 1; }
.dots i[data-k="no"][data-on], .dots-wrap:not([data-live]) .dots i[data-k="no"], .dots-wrap[data-lit="all"] .dots i[data-k="no"] { background: var(--clay); box-shadow: none; }
.dots i[data-k="est"][data-on], .dots-wrap:not([data-live]) .dots i[data-k="est"], .dots-wrap[data-lit="all"] .dots i[data-k="est"] {
  background: repeating-linear-gradient(45deg, var(--clay) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1px var(--clay); }
.dots i[data-k="ok"][data-on], .dots-wrap:not([data-live]) .dots i[data-k="ok"], .dots-wrap[data-lit="all"] .dots i[data-k="ok"] { box-shadow: inset 0 0 0 1.5px var(--fg-2); }
.dots-key { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-family: var(--mono); font-size: var(--t--2); color: var(--fg-2); }
.dots-key span { display: inline-flex; align-items: center; gap: .5em; }
.dots-key i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.dots-key [data-k="no"] i { background: var(--clay); }
.dots-key [data-k="est"] i { background: repeating-linear-gradient(45deg, var(--clay) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1px var(--clay); }
.dots-key [data-k="ok"] i { box-shadow: inset 0 0 0 1.5px var(--fg-2); }

/* ── how it runs: the courier ─────────────────────────────────────────────── */
.runs[data-courier] { position: relative; }
.courier { position: absolute; left: 0; top: 0; z-index: 2; width: 36px; height: 36px; border-radius: 50%;
  background: var(--clay); color: var(--clay-fg); display: grid; place-items: center;
  box-shadow: 0 0 0 5px var(--bg), 0 10px 24px -8px rgba(0,0,0,.45); will-change: transform; }
@media (max-width: 61.99rem) { .courier { left: 0; } }
.courier svg { grid-area: 1 / 1; width: 20px; height: 20px; opacity: 0; transform: scale(.8);
  transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out); }
.courier[data-i="0"] svg[data-i="0"], .courier[data-i="1"] svg[data-i="1"],
.courier[data-i="2"] svg[data-i="2"], .courier[data-i="3"] svg[data-i="3"] { opacity: 1; transform: none; }
.runs[data-courier] .run { transition: opacity 320ms var(--ease-out); }
.runs[data-courier] .run:not([data-past]) .run-h, .runs[data-courier] .run:not([data-past]) .run-p { opacity: .45; transition: opacity 320ms var(--ease-out); }
.runs[data-courier] .run[data-past]::before { background: var(--clay); }
.run-h, .run-p { transition: opacity 320ms var(--ease-out); }

/* ── where to start: three ways in ────────────────────────────────────────── */
.tiers { display: grid; gap: var(--s-4); align-items: stretch; }
@media (min-width: 60rem) { .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
.tier { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6) var(--s-5) var(--s-5);
  border-radius: var(--r-lg); background: var(--bg); box-shadow: 0 0 0 1px var(--line), var(--sh-1); min-width: 0; }
.tier[data-lead="1"] { background: #16181B; color: #EDEAE3; box-shadow: 0 0 0 1px rgba(255,255,255,.06), var(--sh-3); }
@media (min-width: 60rem) { .tier[data-lead="1"] { transform: translateY(-.75rem); }
  html.rv-armed .tier.rv[data-lead="1"].rv-on { transform: translateY(-.75rem); } }
.tier-k { font-family: var(--mono); font-size: var(--t--2); letter-spacing: .13em; text-transform: uppercase; color: var(--clay); }
.tier[data-lead="1"] .tier-k { color: #E0764F; }
.tier-h { font-family: var(--display); font-size: var(--t-3); line-height: 1.05; letter-spacing: -.025em; }
.tier-sub { font-size: var(--t--1); line-height: 1.5; color: var(--fg-2); }
.tier[data-lead="1"] .tier-sub, .tier[data-lead="1"] .tier-foot { color: rgba(237,234,227,.7); }
.tier-list { list-style: none; padding: var(--s-4) 0 0; margin: var(--s-2) 0 0; display: grid; gap: var(--s-3);
  border-top: 1px solid var(--line); }
.tier[data-lead="1"] .tier-list { border-color: rgba(237,234,227,.14); }
.tier-list li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--s-2); font-size: var(--t--1); line-height: 1.5; }
.tier-tick { width: 1.1rem; height: 1.1rem; margin-top: .15rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--clay); color: var(--clay-fg); }
.tier-foot { margin-top: auto; padding-top: var(--s-4); font-family: var(--mono); font-size: var(--t--2); color: var(--fg-3); line-height: 1.6; }
.tier .btn { align-self: flex-start; }
.tier[data-lead="1"] .btn--ghost { color: #EDEAE3; }
@media (hover: hover) and (pointer: fine) {
  html #start .tier.rv:hover { transform: translateY(-4px); transition: transform 240ms var(--ease-out); transition-delay: 0ms; }
  html #start .tier.rv[data-lead="1"]:hover { transform: translateY(calc(-.75rem - 4px)); }
}

/* ── the audit: three key figures ─────────────────────────────────────────── */
.audit-lead { grid-template-columns: minmax(0, 1fr) !important; }
[data-findings] { display: grid; gap: var(--s-4); margin-top: var(--s-7); }
@media (min-width: 56rem) { [data-findings] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
.key { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-6) var(--s-5) var(--s-5);
  border-top: 2px solid var(--clay); background: var(--bg); border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: 0 0 0 1px var(--line-2); min-width: 0; }
.key-n { font-family: var(--display); font-size: clamp(3.2rem, 2rem + 3.6vw, 5.2rem); line-height: .9;
  letter-spacing: -.045em; color: var(--clay); font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 144; }
.key-h { font-family: var(--display); font-size: var(--t-2); line-height: 1.1; letter-spacing: -.02em; margin-top: var(--s-2); }
.key .bar { margin: var(--s-3) 0 var(--s-2); }
.key-m { font-size: var(--t--1); color: var(--fg-2); line-height: 1.55; }
.key-d { font-family: var(--mono); font-size: var(--t--2); color: var(--fg-3); margin-top: var(--s-2); }
.findings[data-findings] { border-top: 0; }
.key.rv-on .bar i, html:not(.rv-armed) .key .bar i { width: var(--pct, 0%); }

/* ── the social film ──────────────────────────────────────────────────────── */
.film--social { background: var(--bg-2); }
.s-plan { width: 56cqi; gap: .8em; }
.s-weeks { display: grid; gap: .45em; }
.s-week { display: grid; grid-template-columns: 3.2em repeat(3, minmax(0, 1fr)); gap: .4em; align-items: center; }
.s-wk { font-family: var(--mono); font-size: max(.72em, 12px); opacity: .55; }
.s-slot { font-size: max(.78em, 12px); text-align: center; padding: .55em .3em; border-radius: .45em;
  box-shadow: inset 0 0 0 1px rgba(237,234,227,.14); color: rgba(237,234,227,.35);
  transition: background-color 220ms var(--ease-out), color 220ms var(--ease-out), transform 220ms var(--ease-out); transform: scale(.96); }
.s-slot.s-on { transform: none; box-shadow: none; color: #180A05; background: #E0764F; }
.s-slot.s-on[data-kind="Post"] { background: #EDEAE3; }
.s-slot.s-on[data-kind="Story"] { background: #B9A58F; }

.s-cam { width: 36cqi; aspect-ratio: 9 / 16; border-radius: 3cqi; overflow: hidden; background: #0C0A09; padding: .6cqi;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 40px 80px -20px rgba(0,0,0,.45); }
.s-cam img { width: 100%; height: 100%; object-fit: cover; border-radius: 2.5cqi; }
.s-rec { position: absolute; top: 3cqi; left: 3cqi; display: flex; align-items: center; gap: .4em; font-family: var(--mono);
  font-size: max(.72em, 12px); color: #fff; background: rgba(0,0,0,.5); padding: .3em .6em; border-radius: 99px; }
.s-rec i { width: .6em; height: .6em; border-radius: 50%; background: #E5484D; animation: s-blink 1s steps(2, start) infinite; }
@keyframes s-blink { to { visibility: hidden; } }
.s-frame { position: absolute; inset: 8cqi 4cqi; border: 1px solid rgba(255,255,255,.55); border-radius: .4em; pointer-events: none; }

.s-reel { width: 36cqi; aspect-ratio: 9 / 16; border-radius: 3cqi; overflow: hidden; background: #0C0A09;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 40px 80px -20px rgba(0,0,0,.45); }
.s-reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7), transparent 45%, rgba(0,0,0,.35)); }
.s-hook { position: absolute; z-index: 1; top: 14%; left: 8%; right: 8%; font-family: var(--display); color: #fff;
  font-size: 1.35em; line-height: 1.1; letter-spacing: -.02em; text-align: center; }
.s-sub { position: absolute; z-index: 1; bottom: 12%; left: 8%; right: 8%; color: #fff; font-size: max(.8em, 12px); line-height: 1.35; text-align: center; }
.s-bar { position: absolute; z-index: 1; left: 6%; right: 6%; bottom: 5%; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; }
.s-bar i { position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }

.s-grid { width: 52cqi; padding: .9em; gap: .7em; }
.s-handle { display: flex; align-items: center; gap: .5em; font-size: max(.8em, 12px); font-weight: 500; }
.s-handle i { width: 1.6em; height: 1.6em; border-radius: 50%; background: #15171B; }
.s-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.s-tile { aspect-ratio: 4 / 5; background: #e8e3da; overflow: hidden; border-radius: 2px; }
.s-tile img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08);
  transition: opacity 260ms var(--ease-out), transform 420ms var(--ease-out); }
.s-tile.s-on img { opacity: 1; transform: none; }

.s-report { width: 48cqi; padding: 1.5em 1.4em; }
.s-rows { list-style: none; padding: .6em 0 0; margin: .4em 0 0; display: grid; gap: .7em; border-top: 1px solid rgba(20,23,26,.1); }
.s-rows li { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); gap: .5em; align-items: center; font-size: max(.85em, 12px); }
.s-tick { width: 1.2em; height: 1.2em; border-radius: 50%; display: grid; place-items: center; background: #1E6B4F; color: #fff; }
@container (max-width: 40rem) {
  .fo.s-plan, .fo.s-grid, .fo.s-report { width: 80cqi; }
  .fo.s-cam, .fo.s-reel { width: 46cqi; }
}
@media (prefers-reduced-motion: reduce) { .s-rec i { animation: none; } }

/* ── the hero's audit box: the page's first action ───────────────────────── */
.hero-audit { margin-top: var(--s-6); max-width: 36rem; display: grid; gap: var(--s-3);
  padding: var(--s-4); border-radius: var(--r-lg); background: var(--bg-2);
  box-shadow: 0 0 0 1px var(--line), var(--sh-2); }
.hero-audit-l { font-family: var(--mono); font-size: var(--t--2); letter-spacing: .13em; text-transform: uppercase; color: var(--clay); }
.hero-audit-row { display: flex; gap: var(--s-2); min-width: 0; }
.hero-audit-row input { flex: 1; min-width: 0; height: 3.4rem; padding: 0 var(--s-4); font-family: var(--mono);
  font-size: var(--t-1); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color var(--d-hover) var(--ease-out); }
.hero-audit-row input:focus { outline: none; border-color: var(--clay); }
.hero-audit-row .btn { height: 3.4rem; flex: none; }
.hero-audit-s { font-size: var(--t--1); color: var(--fg-3); line-height: 1.5; }
.hero-audit-s a { color: var(--fg); text-underline-offset: 3px; }
@media (max-width: 34rem) {
  /* the same collapse as .live-row-in above, on the hero's own audit box */
  .hero-audit-row { flex-direction: column; }
  .hero-audit-row .btn { width: 100%; }
  .hero-audit-row input { flex: none; width: 100%; }
}

/* ── the meeting ──────────────────────────────────────────────────────────── */
.meet { max-width: 52rem; margin-inline: auto; text-align: center; display: grid; gap: var(--s-5); justify-items: center;
  padding-block: var(--s-7); }
.meet-h { font-size: var(--t-6); line-height: 1; letter-spacing: -.03em; }
.meet-p { max-width: 40rem; color: var(--fg-2); }
.meet-acts { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }

/* ── the film's generic house on a phone ─────────────────────────────────── */
.f-phone--site { background: #0C0A09; }
.f-site { width: 100%; height: 100%; border-radius: 3cqi; overflow: hidden; background: #F2EFE8; color: #15171B;
  display: grid; grid-template-rows: auto minmax(0, 1.25fr) auto auto auto auto; gap: .5em; padding-bottom: 1em; }
.f-site-bar { display: flex; justify-content: space-between; align-items: center; padding: .8em .9em .2em;
  font-size: max(.72em, 12px); }
.f-site-bar b { font-family: var(--display); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.f-site-bar span { font-size: .9em; padding: .25em .6em; background: #15171B; color: #F2EFE8; border-radius: .25em; }
.f-site-img { display: block; overflow: hidden; background: #fff; }
.f-site-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.f-site-h { font-family: var(--display); font-size: 1.35em; line-height: 1.02; padding-inline: .8em; letter-spacing: -.02em; }
.f-site-btn { justify-self: start; margin-left: .8em; font-size: max(.78em, 12px); padding: .55em .9em; background: #15171B; color: #F2EFE8; border-radius: .3em; }
.f-site-ln { display: block; height: .45em; margin-inline: .8em; border-radius: 99px; background: rgba(21,23,27,.1); }
.f-site-ln.f-short { width: 50%; }

/* ── get to the point: skip the films, and a dock for the two actions ─────── */
.film-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2) var(--s-5); }
.film-skip { font-family: var(--mono); font-size: var(--t--2); color: var(--fg); text-decoration: none;
  padding: .55rem .9rem; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); min-height: 2.5rem; display: inline-flex; align-items: center;
  transition: box-shadow var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .film-skip:hover { color: var(--clay); box-shadow: inset 0 0 0 1px var(--clay); } }
.film-skip:active { transform: scale(.97); }
.dock { position: fixed; z-index: 40; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .35rem;
  padding: .35rem .35rem .35rem .5rem; border-radius: 99px; background: var(--veil-hd);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 0 0 1px var(--line), var(--sh-3);
  opacity: 0; transform: translate(-50%, 12px) scale(.96); pointer-events: none;
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
.dock[data-on] { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.dock-a { font-size: var(--t--1); font-weight: 500; color: var(--fg); text-decoration: none; padding: .6rem .9rem; border-radius: 99px; min-height: 2.5rem; display: inline-flex; align-items: center; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .dock-a:hover { color: var(--clay); } }
.dock-a:active { transform: scale(.97); }
.dock .btn { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .dock { transition: opacity 120ms linear; transform: translate(-50%, 0); } }

/* ── why houses pay more ──────────────────────────────────────────────────── */
.why { background: #111315; color: #EDEAE3; }
.why .eyebrow { color: rgba(237,234,227,.55); }
.why-top { display: grid; gap: var(--s-7); align-items: end; }
@media (min-width: 64rem) { .why-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); } }
.why-h { font-size: clamp(2.6rem, 1rem + 4.8vw, 5.6rem); line-height: .98; letter-spacing: -.035em; margin-top: var(--s-3); }
.why-h em { color: #E0764F; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.why-p { margin-top: var(--s-5); font-size: var(--t-1); line-height: 1.5; color: rgba(237,234,227,.72); max-width: 32rem; }
.week { position: relative; padding: var(--s-5); border-radius: var(--r-lg); background: #181B1E;
  box-shadow: 0 0 0 1px rgba(237,234,227,.08), 0 30px 60px -24px rgba(0,0,0,.6); min-width: 0; }
.week-days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4rem; }
.week-days span { display: grid; gap: .3rem; padding: .7rem .55rem; border-radius: .5rem; min-width: 0;
  box-shadow: inset 0 0 0 1px rgba(237,234,227,.1); opacity: .45;
  transition: opacity 260ms var(--ease-out), background-color 260ms var(--ease-out), box-shadow 260ms var(--ease-out); }
.week-days b { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .06em; }
.week-days i { font-style: normal; font-size: 13px; line-height: 1.25; color: rgba(237,234,227,.75); overflow-wrap: anywhere; }
.week-days span[data-on] { opacity: 1; box-shadow: inset 0 0 0 1px rgba(224,118,79,.55); }
.week-days span[data-d="6"][data-on] { background: #E0764F; box-shadow: none; }
.week-days span[data-d="6"][data-on] b, .week-days span[data-d="6"][data-on] i { color: #180A05; }
.week-bar { position: relative; height: 3px; margin-top: var(--s-4); border-radius: 3px; background: rgba(237,234,227,.1); overflow: hidden; }
.week-bar i { position: absolute; inset: 0; background: #E0764F; transform-origin: 0 50%; transform: scaleX(var(--wp, 0)); }
.week-stamp { position: absolute; right: -.6rem; top: -1rem; font-weight: 600; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: .35rem; background: #EDEAE3; color: #111315; transform: rotate(6deg) scale(.8); opacity: 0;
  box-shadow: 0 12px 26px -10px rgba(0,0,0,.6); transition: opacity 220ms var(--ease-out), transform 320ms var(--ease-out); }
.week[data-live] .week-stamp { opacity: 1; transform: rotate(6deg); }
@media (max-width: 40rem) { .week-days { grid-template-columns: repeat(3, minmax(0, 1fr)); } .week-stamp { right: .4rem; } }
.why-grid { display: grid; gap: var(--s-4); margin-top: var(--s-8); }
@media (min-width: 56rem) { .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
.why-c { padding: var(--s-6) var(--s-5); border-top: 1px solid rgba(237,234,227,.14); display: grid; gap: var(--s-3); align-content: start; }
.why-k { font-family: var(--mono); font-size: var(--t--2); color: #E0764F; letter-spacing: .1em; }
.why-ch { font-family: var(--display); font-size: var(--t-3); line-height: 1.05; letter-spacing: -.02em; }
.why-cp { font-size: var(--t-0); line-height: 1.6; color: rgba(237,234,227,.72); }
@media (prefers-reduced-motion: reduce) { .week-days span { opacity: 1; } .week-stamp { opacity: 1; transform: rotate(6deg); } }

/* ── the header, in three ──────────────────────────────────────────────────
   Seven links across the bar was a wall of words. The audit stays a plain
   link because it is the hook; the rest group under their own names and open
   in a panel that scales from its trigger, under 200ms. */
/* ⚠️ This started life as `gap: var(--s-1)` for the long page's grouped bar,
   where each .hd-l carries its own padding. The LANDING page's bar is plain
   <a> links with no padding, so the same rule collapsed them into
   "The renders Social Casting The site" with no space at all. The tight gap
   belongs to the groups; a plain link keeps the old breathing room. */
.hd-nav { align-items: center; }
.hd-nav:has(.hd-g) { gap: var(--s-1); }
.hd-nav:not(:has(.hd-g)) { gap: var(--s-5); }
.hd-l { position: relative; display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem .6rem; border-radius: var(--r); background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--fg-2); text-decoration: none; white-space: nowrap;
  transition: color var(--d-hover) var(--ease-out), background var(--d-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .hd-l:hover { color: var(--fg); } }
.hd-caret { opacity: .5; transition: transform var(--d-hover) var(--ease-out); }
.hd-g { position: relative; }
.hd-g[data-on="1"] .hd-caret { transform: rotate(180deg); }
.hd-g[data-on="1"] .hd-l { color: var(--fg); }
.hd-pop { position: absolute; top: calc(100% + .35rem); left: 0; z-index: 40;
  min-width: 19rem; display: grid; gap: 1px; padding: var(--s-2);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  transform-origin: 12% 0; transform: scale(.96) translateY(-4px); opacity: 0;
  transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out); }
.hd-g[data-on="1"] .hd-pop { transform: none; opacity: 1; }
.hd-pop a { display: grid; gap: .05rem; padding: var(--s-2) var(--s-3); border-radius: var(--r);
  text-decoration: none; color: var(--fg); transition: background var(--d-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .hd-pop a:hover { background: var(--bg-2); } }
.hd-pop-n { font-size: var(--t--1); }
.hd-pop-s { font-family: var(--mono); font-size: var(--t--2); color: var(--fg-3); line-height: 1.4; }
@media (prefers-reduced-motion: reduce) {
  .hd-pop { transition: opacity 120ms linear; transform: none; }
  .hd-g[data-on="1"] .hd-pop { transform: none; }
}


/* ── touch targets ────────────────────────────────────────────────────────
   Found by sweeping every page at 390px: the wordmark (the way home) and a
   few controls were under the 44px a finger needs. Padding rather than a
   height, so nothing reflows around them. */
@media (pointer: coarse) {
  .hd-mark { min-height: 44px; align-content: center; }
  .hd-acts .icobtn { min-width: 44px; min-height: 44px; }
}

/* ── the designs, shown ───────────────────────────────────────────────────
   The short page is the one that gets sent to a house, so it shows the built
   pages rather than describing them. Our own screenshots of our own demo. */
.ln-shots { display: grid; gap: var(--s-3); margin: var(--s-3) 0 var(--s-4);
  grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ln-shot { margin: 0; min-width: 0; }
.ln-shot--wide { grid-column: 1 / -1; }
.ln-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--rule);
  border-radius: var(--r-1); background: var(--paper-2); }
.ln-shot figcaption { display: grid; gap: .15rem; margin-top: var(--s-2); }
.ln-shot figcaption b { font-family: var(--mono); font-size: var(--t--2); letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); font-weight: 400; }
.ln-shot figcaption span { font-size: var(--t--1); color: var(--ink-2); line-height: 1.6; }
@media (max-width: 62rem) { .ln-shots { grid-template-columns: minmax(0, 1fr); } }

/* the measured fact, stated before the offer */
.ln-stat { max-width: 34rem; margin: 0 0 var(--s-3); font-size: var(--t-0); line-height: 1.6;
  color: var(--ink-2); }
.ln-stat b { font-family: var(--mono); font-size: 1.12em; color: var(--accent); font-weight: 400;
  letter-spacing: .01em; }
.sec--tight { padding-top: var(--s-5); padding-bottom: var(--s-5); }

/* ── the six that matter, and the rest on request ─────────────────────────
   Aaryan, 22 Sep: "add the top 6 key ones and then say much more have a
   look", and "dont put too much". Thirteen offers at once is a list a house
   skims; six is a list it reads. Nothing is removed — the rest is one tap. */
.menu[data-folded="1"] .item[data-rest="1"] { display: none; }
.menu-more { display: flex; justify-content: center; margin-top: var(--s-4); }

/* ── the three ways in, each one openable ─────────────────────────────── */
.tier-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: auto; }
.tier[data-lead="1"] .tier-more { border-color: rgba(237,234,227,.3); color: #EDEAE3; }
@media (hover: hover) and (pointer: fine) {
  .tier[data-lead="1"] .tier-more:hover { border-color: rgba(237,234,227,.6); }
}

/* the brief, brought onto the screen and focused: a house choosing where its
   money goes needs more than three bullets, but the card has to stay a card */
.brief { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: var(--s-4); }
.brief-veil { position: absolute; inset: 0; background: rgba(12,13,15,.55); opacity: 0;
  transition: opacity 220ms var(--ease-out); }
.brief[data-on="1"] .brief-veil { opacity: 1; }
.brief-panel { position: relative; width: min(38rem, 100%); max-height: min(86vh, 46rem);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--s-6) var(--s-5) var(--s-5); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-3);
  opacity: 0; transform: scale(.96) translateY(6px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
.brief[data-on="1"] .brief-panel { opacity: 1; transform: none; }
.brief-panel:focus-visible { outline: none; }
.brief-x { position: absolute; top: .35rem; right: .35rem; width: 44px; height: 44px;
  display: grid; place-items: center; background: none; border: 0; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--fg-3); border-radius: var(--r); }
@media (hover: hover) and (pointer: fine) { .brief-x:hover { color: var(--fg); } }
.brief-k { font-family: var(--mono); font-size: var(--t--2); letter-spacing: .13em;
  text-transform: uppercase; color: var(--clay); margin: 0; }
.brief-h { font-family: var(--display); font-size: var(--t-3); line-height: 1.05;
  letter-spacing: -.025em; margin: var(--s-2) 0 var(--s-2); }
.brief-sub { font-size: var(--t-0); line-height: 1.55; color: var(--fg-2); margin: 0; }
.brief-dl { margin: var(--s-4) 0 0; display: grid; gap: var(--s-3);
  border-top: 1px solid var(--line); padding-top: var(--s-4); }
.brief-row { display: grid; gap: .2rem; }
.brief-row dt { font-family: var(--mono); font-size: var(--t--2); letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-3); }
.brief-row dd { margin: 0; font-size: var(--t--1); line-height: 1.65; color: var(--fg); }
.brief-foot { margin: var(--s-4) 0 var(--s-4); padding-top: var(--s-3);
  border-top: 1px solid var(--line); font-family: var(--mono); font-size: var(--t--2);
  color: var(--fg-3); line-height: 1.6; }
@media (prefers-reduced-motion: reduce) {
  .brief-veil, .brief-panel { transition: opacity 120ms linear; transform: none; }
  .brief[data-on="1"] .brief-panel { transform: none; }
}

/* each offer opens its own brief — the same panel the three ways in use */
.item--open { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  appearance: none; }
.item-go { font-family: var(--mono); font-size: var(--t--2); letter-spacing: .06em;
  color: var(--clay); margin-top: var(--s-2); opacity: 0;
  transition: opacity 180ms var(--ease-out); }
.item--open:focus-visible .item-go { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .item--open:hover .item-go { opacity: 1; } }
@media (hover: none) { .item-go { opacity: 1; } }

/* ── the diary: real days, real times ─────────────────────────────────── */
.daystrip { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: .3rem;
  scrollbar-width: none; }
.daystrip::-webkit-scrollbar { display: none; }
.daychip { flex: none; display: grid; gap: .05rem; justify-items: center; min-width: 3.6rem;
  min-height: 60px; padding: .45rem .5rem; background: transparent; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r); color: var(--fg-2);
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out); }
.daychip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.daychip-w { font-family: var(--mono); font-size: var(--t--2); letter-spacing: .06em; }
.daychip-d { font-size: var(--t-0); line-height: 1; }
.daychip-m { font-family: var(--mono); font-size: var(--t--2); opacity: .8; }
.timegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr));
  gap: var(--s-2); margin-top: var(--s-3); }
.timechip { min-height: 44px; padding: .4rem .5rem; cursor: pointer;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r);
  font-family: var(--mono); font-size: var(--t--1); color: var(--fg);
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out); }
.timechip[aria-pressed="true"] { background: var(--clay); border-color: var(--clay); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .daychip:hover, .timechip:hover { border-color: var(--fg-3); }
}