/* ============================================================
   Homepage hero — scroll-scrubbed video + beats + closing CTA.
   Ported from the hero-scrub preview. Scoped so it only affects
   the landing page; the PropertySurveyFlow survey itself is left
   untouched (only the collapsed field is resized, at the bottom).
   ============================================================ */

.hero   { position: relative; height: 660vh; }
.stage  { position: sticky; top: 0; height: 100vh; overflow: hidden;
          background: #cfe0ea url('/video/hero-scrub-poster.jpg') center/cover no-repeat; }

.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.scrim { position: absolute; inset: 0; pointer-events: none;
         background: linear-gradient(180deg, rgba(20,30,40,.28), rgba(20,30,40,0) 42%); }

.hero-content { position: absolute; inset: 0; display: flex; flex-direction: column;
                align-items: center; padding-top: 22vh; text-align: center; z-index: 3; }
.hero-title { font-family: "Playfair Display", Georgia, serif; font-weight: 500;
              font-size: clamp(2rem, 4.6vw, 3.4rem); color: #fff; letter-spacing: .01em;
              text-shadow: 0 2px 20px rgba(20,30,40,.35); margin: 0 0 2.2rem; }

/* ── Scroll-revealed cards overlay (pinned over the scrubbing video) ── */
.hero-cards { position: absolute; inset: 0; z-index: 4; display: flex;
              align-items: center; justify-content: center; gap: 3rem;
              padding: 4vh 2rem; transform: scale(.9); transform-origin: center center;
              pointer-events: none; }
.hc-how, .hc-cards { opacity: 0; will-change: opacity, transform; }

/* How it works — solid card + gold step badges on a timeline thread */
.how-it-works {
  flex-shrink: 0;
  background: rgba(26, 31, 28, 0.8);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 1.9rem 1.9rem;
  position: relative;
  box-shadow: 0 14px 40px rgba(10, 16, 28, 0.22);
}
.how-label { font-family: 'Outfit', sans-serif; font-size: .62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .2em; color: rgba(195,160,95,.75);
  margin: 0 0 1.5rem; text-align: left; padding-left: 2px; }
.flow-steps-vertical { display: flex; flex-direction: column; gap: 1.4rem; align-items: stretch; position: relative; }
.flow-thread { position: absolute; left: 17px; top: 20px; bottom: 20px; width: 2px; border-radius: 2px; z-index: 0;
  background: linear-gradient(180deg, rgba(195,160,95,.18), rgba(195,160,95,.6) 45%, rgba(195,160,95,.18));
  transform: scaleY(0); transform-origin: top; }
.flow-step-v { display: flex; align-items: center; gap: .95rem; opacity: 0; transform: translateX(-16px); }
.flow-num { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(195,160,95,.16); border: 1px solid rgba(195,160,95,.5); color: #E6C079;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1rem; line-height: 1;
  -webkit-text-stroke: 0; text-shadow: none; position: relative; z-index: 1; }
.flow-text { text-align: left; }
.flow-text h3 { font-family: 'Outfit', sans-serif; font-size: .95rem; font-weight: 600; color: #F0EDEA; margin: 0 0 .12rem; }
.flow-text p { font-family: 'Outfit', sans-serif; font-size: .74rem; font-weight: 300; color: rgba(240,237,234,.55); margin: 0; }
.how-it-works.play .flow-thread { animation: threadDraw .7s ease .1s forwards; }
.how-it-works.play .flow-step-v { animation: stepIn .5s cubic-bezier(.22,1,.36,1) forwards; }
.how-it-works.play .flow-step-v:nth-child(1) { animation-delay: .12s; }
.how-it-works.play .flow-step-v:nth-child(2) { animation-delay: .24s; }
.how-it-works.play .flow-step-v:nth-child(3) { animation-delay: .36s; }
@keyframes stepIn { to { opacity: 1; transform: translateX(0); } }
@keyframes threadDraw { to { transform: scaleY(1); } }

/* Agent deck */
.preview-cards { position: relative; width: 360px; height: 760px; flex-shrink: 0;
  animation: cardStackFloat 6s ease-in-out infinite; }
@keyframes cardStackFloat { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-8px);} }
.preview-card {
  position: absolute; width: 310px;
  background: rgba(26,31,28,.45);
  backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.15); border-radius: 22px; padding: 1.25rem 1.4rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1), opacity .5s ease;
}
.preview-card-back  { top: 0;   left: 20px; z-index: 1; opacity: 1; transform: scale(.94);
  background: rgba(26,31,28,.86); box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.preview-card-mid   { top: 40px; left: 10px; z-index: 2; opacity: 1; transform: scale(.97);
  background: rgba(26,31,28,.9); box-shadow: 0 8px 22px rgba(0,0,0,.32); }
.preview-card-front { top: 80px; left: 0;   z-index: 3; opacity: 1; transform: scale(1);
  background: rgba(26,31,28,.92); border-color: rgba(255,255,255,.2); box-shadow: 0 18px 48px rgba(0,0,0,.4); }
.preview-card-back .pc-stats, .preview-card-mid .pc-stats { display: none; }
.preview-cards:hover .preview-card-back  { transform: scale(.94) translateY(-5px); }
.preview-cards:hover .preview-card-mid   { transform: scale(.97) translateY(-3px); }
.preview-cards:hover .preview-card-front { box-shadow: 0 20px 52px rgba(0,0,0,.45), 0 0 60px rgba(195,160,95,.06); }

.deck-count { position: absolute; top: -14px; right: 12px; z-index: 4; display: inline-flex; align-items: center; gap: .4rem;
  background: #C3A05F; color: #1A1F1C; font: 700 .74rem 'Outfit', sans-serif; letter-spacing: .02em;
  padding: .42rem .8rem; border-radius: 999px; box-shadow: 0 8px 20px rgba(0,0,0,.3);
  opacity: 0; transform: scale(.6); }
.deck-count svg { width: 15px; height: 15px; stroke: #1A1F1C; fill: none; stroke-width: 1.8; }
.preview-cards.in-view .deck-count { animation: aaPop .4s cubic-bezier(.34,1.56,.64,1) .35s forwards; }

.pc-header { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.pc-logo-placeholder { width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); flex-shrink: 0;
  display: grid; place-items: center; font: 700 1rem 'Outfit', sans-serif; color: rgba(240,237,234,.85); }
.pc-logo-highlight { background: rgba(195,160,95,.18); border-color: rgba(195,160,95,.4); color: #E6C079; }
.pc-agent-info { flex: 1; min-width: 0; }
.pc-name { display: block; font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 600;
  color: #F0EDEA; margin-bottom: .12rem; }
.pc-reviews { font-family: 'Outfit', sans-serif; font-size: .76rem; color: #FFD54F; }
.pc-review-count { color: rgba(240,237,234,.5); font-size: .66rem; }
.pc-score-badge { display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; }
.pc-score-num { font-family: 'Outfit', sans-serif; font-size: 1.05rem; font-weight: 700; line-height: 1; }
.pc-score-label { font-family: 'Outfit', sans-serif; font-size: .42rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; opacity: .85; line-height: 1; margin-top: 3px; }
.preview-card-front .pc-score-badge { width: 58px; height: 58px; border-radius: 15px; }
.preview-card-front .pc-score-num { font-size: 1.55rem; }
.preview-card-front .pc-score-label { font-size: .5rem; margin-top: 4px; }
.pc-score-high { background: rgba(76,175,80,.18); border: 1px solid rgba(76,175,80,.35); color: #81C784; }
.pc-score-good { background: rgba(195,160,95,.18); border: 1px solid rgba(195,160,95,.35); color: #C3A05F; }
.pc-score-avg  { background: rgba(255,152,0,.15); border: 1px solid rgba(255,152,0,.3); color: #FFB74D; }
.pc-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: .4rem; margin-bottom: .5rem;
  padding: .7rem 0; border-top: 1px solid rgba(255,255,255,.08); }
.pc-stat { text-align: center; }
.pc-stat-val { display: block; position: relative; overflow: hidden; font-family: 'Outfit', sans-serif;
  font-size: 1.05rem; font-weight: 600; color: #F0EDEA; }
.pc-stat-label { font-family: 'Outfit', sans-serif; font-size: .66rem; font-weight: 400;
  color: rgba(240,237,234,.55); text-transform: uppercase; letter-spacing: .04em; }
.pc-stat-val::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(195,160,95,.25), transparent); pointer-events: none; }
.preview-cards.in-view .preview-card-front .pc-stat-val::after { animation: shimmerSweep .8s ease .4s forwards; }
@keyframes shimmerSweep { 0% { left: -100%; } 100% { left: 150%; } }
.pc-fee-note { font-family: 'Outfit', sans-serif; font-size: .64rem; font-weight: 400;
  color: rgba(195,160,95,.78); text-align: center; letter-spacing: .04em;
  padding: .2rem 0 .5rem; margin-top: -.3rem; line-height: 1.3; font-style: italic; }
.pc-binding { display: inline-block; background: #C3A05F; color: #1A1F1C; font-family: 'Outfit', sans-serif;
  font-size: .56rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px;
  border-radius: 3px; margin-left: 3px; vertical-align: middle; line-height: 1.4; box-shadow: 0 0 8px rgba(195,160,95,.25); }
.pc-listings { padding: .5rem 0 .25rem; border-top: 1px solid rgba(255,255,255,.06); margin-bottom: .45rem; }
.pc-listings-label { font-family: 'Outfit', sans-serif; font-size: .58rem; font-weight: 500;
  color: rgba(240,237,234,.5); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem; text-align: center; }
.pc-listings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.pc-listing-tile { display: flex; flex-direction: column; gap: .12rem; padding: .45rem .6rem;
  background: rgba(255,255,255,.04); border: 1px solid rgba(195,160,95,.14); border-radius: 6px; min-width: 0; }
.pc-listing-addr { font-family: 'Outfit', sans-serif; font-size: .7rem; font-weight: 500;
  color: rgba(240,237,234,.82); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-listing-price { font-family: 'Outfit', sans-serif; font-size: .78rem; font-weight: 600; color: #C3A05F; line-height: 1.2; }
.pc-radar { display: flex; flex-direction: column; align-items: center; padding: .4rem 0;
  border-top: 1px solid rgba(255,255,255,.08); margin-bottom: .5rem; }
.pc-radar-title { font-family: 'Outfit', sans-serif; font-size: .68rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em; color: rgba(240,237,234,.5); margin-bottom: .4rem; }
.pc-radar svg { width: 172px; height: 172px; }
.pc-radar svg text { font-size: 9px; fill: rgba(240,237,234,.75); font-weight: 500; }
.pc-radar svg polygon[fill*="195,160,95"] { stroke-dasharray: 400; stroke-dashoffset: 400; fill-opacity: 0;
  transition: fill-opacity .6s ease 1.6s; }
.preview-cards.in-view .pc-radar svg polygon[fill*="195,160,95"] { animation: radarDraw 1s cubic-bezier(.22,1,.36,1) .3s forwards; }
@keyframes radarDraw { 0% { stroke-dashoffset: 400; fill-opacity: 0; } 60% { stroke-dashoffset: 0; fill-opacity: 0; } 100% { stroke-dashoffset: 0; fill-opacity: 1; } }
.pc-radar svg circle { transform-origin: center; transform: scale(0); opacity: 0; }
.preview-cards.in-view .pc-radar svg circle { animation: dotPop .35s cubic-bezier(.34,1.56,.64,1) forwards; }
.preview-cards.in-view .pc-radar svg circle:nth-of-type(1) { animation-delay: .8s; }
.preview-cards.in-view .pc-radar svg circle:nth-of-type(2) { animation-delay: .9s; }
.preview-cards.in-view .pc-radar svg circle:nth-of-type(3) { animation-delay: 1.0s; }
.preview-cards.in-view .pc-radar svg circle:nth-of-type(4) { animation-delay: 1.1s; }
@keyframes dotPop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.pc-tags { display: flex; gap: .4rem; flex-wrap: wrap; }
.pc-tag { font-family: 'Outfit', sans-serif; font-size: .6rem; font-weight: 400; color: rgba(240,237,234,.6);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px;
  padding: .2rem .6rem; opacity: 0; transform: translateX(-12px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1); }
.preview-cards.in-view .pc-tag:nth-child(1) { animation: tagSlide .45s cubic-bezier(.22,1,.36,1) .65s forwards; }
.preview-cards.in-view .pc-tag:nth-child(2) { animation: tagSlide .45s cubic-bezier(.22,1,.36,1) .8s forwards; }
.preview-cards.in-view .pc-tag:nth-child(3) { animation: tagSlide .45s cubic-bezier(.22,1,.36,1) .95s forwards; }
@keyframes tagSlide { 0% { opacity: 0; transform: translateX(-12px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes aaPop { to { opacity: 1; transform: scale(1); } }

/* Trust line under the postcode field */
.hero-trust { margin: 1.1rem 0 0; font-family: 'Outfit', sans-serif; font-weight: 400;
  font-size: .76rem; letter-spacing: .03em; color: rgba(255,255,255,.85);
  text-shadow: 0 1px 6px rgba(20,30,40,.45); }

/* Beat 1 — money hook + data-credibility strip */
.hero-stakes { position: absolute; inset: 0; z-index: 4; display: flex;
  align-items: center; justify-content: center; padding: 4vh 2rem;
  opacity: 0; pointer-events: none; will-change: opacity, transform; }
.merge-panel { position: relative; width: min(760px, 92vw); background: rgba(26,31,28,.45);
  backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.15); border-radius: 26px;
  box-shadow: 0 16px 48px rgba(10,16,28,.26); padding: 2.2rem 2.2rem 2rem; text-align: center; }
.merge-title { font-family: 'Playfair Display', serif; font-weight: 500; color: #F0EDEA;
  font-size: clamp(1.5rem, 3vw, 2.3rem); margin: 0 0 .7rem; letter-spacing: .01em; line-height: 1.15; }
.merge-title em { font-style: normal; color: #E6C079; }
.merge-sub { font-family: 'Outfit', sans-serif; font-weight: 300; color: rgba(240,237,234,.66);
  font-size: clamp(.9rem, 1.5vw, 1.02rem); line-height: 1.6; max-width: 52ch; margin: 0 auto 1.5rem; }
.merge-flow-label { font-family: 'Outfit', sans-serif; font-size: .6rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em; color: rgba(195,160,95,.72); margin-bottom: 1rem; }
.merge-foot { margin: 1.3rem auto 0; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.08);
  font-family: 'Outfit', sans-serif; font-size: .82rem; font-weight: 300; color: rgba(240,237,234,.62);
  line-height: 1.5; max-width: 50ch; }
.merge-foot-lead { color: #E6C079; font-weight: 600; }
.flow { display: flex; align-items: center; gap: 1rem; max-width: 620px; margin: 0 auto; }
.sources { display: flex; flex-direction: column; gap: .5rem; flex: 1; min-width: 0; }
.src { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; text-align: left;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 12px;
  opacity: 0; transform: translateX(-22px); }
.play .src { animation: srcIn .55s cubic-bezier(.22,1,.36,1) forwards; }
.play .src:nth-child(1) { animation-delay: .10s; }
.play .src:nth-child(2) { animation-delay: .25s; }
.play .src:nth-child(3) { animation-delay: .40s; }
.play .src:nth-child(4) { animation-delay: .55s; }
@keyframes srcIn { to { opacity: 1; transform: translateX(0); } }
.src-ico { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(195,160,95,.14); border: 1px solid rgba(195,160,95,.3); animation: icoPulse 3.2s ease-in-out infinite; }
.src:nth-child(2) .src-ico { animation-delay: .4s; }
.src:nth-child(3) .src-ico { animation-delay: .8s; }
.src:nth-child(4) .src-ico { animation-delay: 1.2s; }
@keyframes icoPulse { 0%,100% { box-shadow: 0 0 0 rgba(195,160,95,0); } 50% { box-shadow: 0 0 14px rgba(195,160,95,.35); } }
.src-ico svg { width: 16px; height: 16px; stroke: #D6B36A; fill: none; stroke-width: 1.6; }
.src-name { display: block; font-size: .78rem; font-weight: 500; color: #F0EDEA; line-height: 1.15; }
.src-desc { display: block; font-size: .64rem; font-weight: 300; color: rgba(240,237,234,.5); }
.connector { position: relative; width: 60px; height: 22px; flex: 0 0 60px; align-self: center; }
.connector .track { position: absolute; top: 50%; left: 0; right: 10px; height: 2px; transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(195,160,95,.12), rgba(195,160,95,.45)); border-radius: 2px; }
.connector .head { position: absolute; top: 50%; right: -2px; transform: translateY(-50%); color: rgba(195,160,95,.75); }
.connector .head svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; display: block; }
.flow-dot { position: absolute; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: #E6C079;
  box-shadow: 0 0 8px rgba(195,160,95,.9); transform: translateY(-50%); left: 0; animation: flow 1.9s linear infinite; }
.flow-dot:nth-child(2) { animation-delay: .63s; }
.flow-dot:nth-child(3) { animation-delay: 1.26s; }
@keyframes flow { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { left: 46px; opacity: 0; } }
.score-node { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.gauge { position: relative; width: 108px; height: 108px; }
.gauge::before { content: ''; position: absolute; inset: 12px; border-radius: 50%;
  box-shadow: 0 0 26px rgba(76,175,80,.28); animation: dialPulse 3s ease-in-out infinite; }
@keyframes dialPulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); position: relative; }
.gauge-track { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 6; }
/* Green, not gold: this is the top score tier, and it should read as such. The
   colour is the same one the agent deck's .pc-score-high badge uses, so a high
   score looks the same wherever it appears in the hero.
   Arc geometry: r=42, so circumference = 2*pi*42 = 263.9. The dashoffset is the
   UNFILLED remainder, i.e. 263.9 * (1 - score/100). Keep it in step with
   .score-num's data-count in LandingPage.razor — 82 -> 263.9 * .18 = 47.5. */
.gauge-arc { fill: none; stroke: #81C784; stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 263.9; stroke-dashoffset: 263.9; filter: drop-shadow(0 0 6px rgba(76,175,80,.55)); }
.play .gauge-arc { animation: gaugeFill 1.4s cubic-bezier(.22,1,.36,1) .3s forwards; }
@keyframes gaugeFill { to { stroke-dashoffset: 47.5; } }
.score-num { position: absolute; inset: 0; display: grid; place-items: center;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.95rem; color: #F0EDEA; }
.score-label { font-size: .58rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(240,237,234,.55); }

/* Beat 3 — ecosystem tiles */
.hero-eco { position: absolute; inset: 0; z-index: 4; display: flex;
  align-items: center; justify-content: center; padding: 4vh 2rem;
  opacity: 0; pointer-events: none; will-change: opacity, transform; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: .3rem; }
.tile { position: relative; overflow: hidden; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 1.2rem 1rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .5rem; text-decoration: none; cursor: pointer;
  opacity: 0; transform: translateY(26px) scale(.96); transition: border-color .25s ease, box-shadow .25s ease; }
.play .tile { animation: tileIn .6s cubic-bezier(.22,1,.36,1) forwards; }
.play .tile:nth-child(1) { animation-delay: .10s; }
.play .tile:nth-child(2) { animation-delay: .25s; }
.play .tile:nth-child(3) { animation-delay: .40s; }
@keyframes tileIn { to { opacity: 1; transform: translateY(0) scale(1); } }
.tile:hover { border-color: rgba(195,160,95,.4); box-shadow: 0 10px 30px rgba(10,16,28,.2); }
.tile::after { content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
  transform: skewX(-18deg); animation: sheen 5.5s ease-in-out infinite; }
.tile:nth-child(2)::after { animation-delay: .9s; }
.tile:nth-child(3)::after { animation-delay: 1.8s; }
@keyframes sheen { 0%, 55% { left: -130%; } 78%, 100% { left: 170%; } }
.tile-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(195,160,95,.14); border: 1px solid rgba(195,160,95,.3); animation: icoFloat 4s ease-in-out infinite; }
.tile:nth-child(2) .tile-ico { animation-delay: .5s; }
.tile:nth-child(3) .tile-ico { animation-delay: 1s; }
@keyframes icoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.tile-ico svg { width: 22px; height: 22px; stroke: #D6B36A; fill: none; stroke-width: 1.5; }
.tile-ico img { width: 23px; height: 23px; display: block; }
.tile-name { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .95rem; color: #F0EDEA; }
.tile-desc { font-family: 'Outfit', sans-serif; font-weight: 300; font-size: .76rem; line-height: 1.45; color: rgba(240,237,234,.6); }
.tile-tag { margin-top: .1rem; font-size: .58rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #1A1F1C; background: #C3A05F; padding: 2px 8px; border-radius: 20px; opacity: 0; transform: scale(.6); }
.play .tile-tag { animation: tagPop .4s cubic-bezier(.34,1.56,.64,1) forwards; }
.play .tile:nth-child(1) .tile-tag { animation-delay: .7s; }
.play .tile:nth-child(2) .tile-tag { animation-delay: .85s; }
.play .tile:nth-child(3) .tile-tag { animation-delay: 1s; }
@keyframes tagPop { to { opacity: 1; transform: scale(1); } }
.tile-tag.ghost { color: rgba(240,237,234,.7); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.tile-cta { margin-top: .35rem; font-family: 'Outfit', sans-serif; font-size: .7rem; font-weight: 600;
  letter-spacing: .03em; color: rgba(230,192,121,.85); display: inline-flex; align-items: center; gap: .3rem;
  transition: color .2s ease, gap .2s ease; }
.tile:hover .tile-cta { color: #E6C079; gap: .5rem; }

.scroll-hint { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 5;
               color: rgba(255,255,255,.85); font-size: .8rem; letter-spacing: .14em;
               text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scroll-hint .chev { width: 22px; height: 22px; border-right: 2px solid rgba(255,255,255,.8);
                     border-bottom: 2px solid rgba(255,255,255,.8); transform: rotate(45deg);
                     animation: hintBob 1.8s ease-in-out infinite; }
@keyframes hintBob { 0%,100% { transform: rotate(45deg) translate(0,0);} 50% { transform: rotate(45deg) translate(4px,4px);} }

/* Closing CTA (on the cloud) */
.after { min-height: 100vh;
  background: linear-gradient(180deg, #eaf1f5 0%, #f6efe0 38%, #f3e7d0 72%, #eedabf 100%);
  padding: 12vh 8vw; display: flex; align-items: center; justify-content: center; text-align: center; }
.closing-cta { max-width: 640px; }
.cc-title { font-family: "Playfair Display", serif; font-weight: 500; color: #1A1F1C;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin: 0 0 .8rem; line-height: 1.15; }
.cc-sub { font-family: "Outfit", sans-serif; font-weight: 300; color: #2E3530;
  font-size: clamp(.95rem, 1.6vw, 1.1rem); line-height: 1.6; max-width: 46ch; margin: 0 auto 1.8rem; }
.cc-search { display: flex; align-items: center; width: min(520px, 88vw); margin: 0 auto;
  background: rgba(26,31,28,.72); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 999px; padding: 6px 6px 6px 22px; box-shadow: 0 14px 40px rgba(10,16,28,.25); }
.cc-search input { flex: 1; border: 0; background: transparent; outline: none;
  font: 400 1rem/1 "Outfit", sans-serif; color: #fff; padding: 15px 6px; }
.cc-search input::placeholder { color: rgba(255,255,255,.7); }
.cc-search .go { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 999px; border: 0;
  background: #C3A05F; cursor: pointer; display: grid; place-items: center; transition: background .2s ease; }
.cc-search .go:hover { background: #d4ad68; }
.cc-search .go svg { width: 18px; height: 18px; stroke: #1A1F1C; }
.cc-note { font-family: "Outfit", sans-serif; font-size: .8rem; color: #5A6560; margin: 1.1rem 0 0; }

@media (max-width: 980px) { .hero-cards { transform: scale(.78); } }

/* Zooming poster layer — mobile only (see the media query below). Hidden on
   desktop, where the <canvas> scrub owns the background. */
.hero-poster { display: none; }

/* ── Mobile (≤768px) ──────────────────────────────────────────────
   The desktop hero is a pinned, 660vh scroll-scrubbed stack of
   absolutely-positioned "beats" — that doesn't translate to touch.
   Below 768px we let the whole hero flow as normal stacked sections
   over the warm cloud backdrop, and reveal each on scroll
   (IntersectionObserver in hero-landing.js). Desktop rules are untouched. */
@media (max-width: 768px) {
  .hero  { height: auto; }
  /* Warm "cloud" backdrop behind the beats — same palette the desktop scrub
     cross-dissolves into (drawCloudGradient / .after), so it's never black. */
  .stage { position: relative; height: auto; overflow: visible;
           background: linear-gradient(180deg, #e9f0f4 0%, #f6efe0 34%, #f3e7d0 66%, #eedabf 100%); }
  .hero-canvas, .scrim, .scroll-hint { display: none; }

  /* First screen: a zooming poster (canvas scrub is desktop-only). It's its own
     element so the survey text isn't clipped by the zoom and the transform never
     touches the copy. hero-landing.js drives --zoom from scroll. */
  .hero-poster { display: block; position: absolute; top: 0; left: 0; right: 0;
    height: 100vh; height: 100svh; overflow: hidden; z-index: 0; }
  .hero-poster-img { position: absolute; inset: -3%;
    background: url('/video/hero-scrub-poster.jpg') center/cover no-repeat;
    transform: scale(var(--zoom, 1)); transform-origin: 50% 42%; will-change: transform; }
  .hero-poster::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(20,30,40,.34) 0%, rgba(20,30,40,.04) 44%,
                rgba(233,240,244,0) 70%, #e9f0f4 100%); }

  .hero-content { position: relative; z-index: 1; inset: auto;
    min-height: 100vh; min-height: 100svh;
    padding: 15vh 1.1rem 9vh; justify-content: flex-start; background: none; }

  /* Beats: from absolute cross-fading overlays to stacked, in-flow sections. */
  .hero-stakes, .hero-cards, .hero-eco {
    position: relative; inset: auto; opacity: 1; transform: none;
    pointer-events: auto; min-height: auto; padding: 8vh 1.1rem;
  }
  .hero-cards { flex-direction: column; gap: 2.4rem; transform: none; }

  /* Take full ownership of .how-it-works / .preview-cards. The legacy
     LandingPage.css (loaded globally in _Host) has its own ≤768px rules that
     pin these absolutely and size .how-it-works to 48% of a shrink-wrapped
     parent, collapsing the card. Reset them for the new stacked layout. */
  .hc-how  { opacity: 1; width: 100%; display: flex; justify-content: center; }
  .hc-cards { opacity: 1; display: flex; justify-content: center; }
  .how-it-works {
    position: relative; top: auto; left: auto; right: auto; bottom: auto;
    width: 100%; max-width: 420px; margin: 0; transform: none; animation: none; }
  .flow-text { flex: 1 1 auto; min-width: 0; }
  /* Deck: the legacy LandingPage.css has a whole competing mobile treatment for
     .preview-cards / .preview-card-front (some rules at 0,2,0 specificity that
     hide the card). #hero-scoped rules (1,1,0) beat all of them, so we render a
     single clean, in-flow front card that actually sizes its own box. */
  #hero .preview-cards { position: relative; width: min(340px, 92vw); height: auto;
    margin: 0 auto; animation: none; }
  #hero .preview-card-back, #hero .preview-card-mid { display: none; }
  #hero .preview-card-front { position: relative; top: auto; left: auto; width: 100%;
    opacity: 1; transform: none; animation: none; }
  .merge-panel { width: 100%; max-width: 560px; padding: 1.9rem 1.3rem 1.7rem; }
  .merge-title, .merge-sub, .merge-foot { max-width: 100%; }

  /* Whole-card entrance as each scrolls into view (JS adds .mob-in). Gated on
     .mob-reveal — added by hero-landing.js only on this ≤768 path — so the
     cards are never left hidden if the script fails to run. */
  .mob-reveal .merge-panel,
  .mob-reveal .how-it-works,
  .mob-reveal .hc-cards {
    opacity: 0; transform: translateY(30px);
    transition: opacity .6s ease, transform .75s cubic-bezier(.22,1,.36,1); }
  .mob-reveal .merge-panel.mob-in,
  .mob-reveal .how-it-works.mob-in,
  .mob-reveal .hc-cards.mob-in {
    opacity: 1; transform: translateY(0); }
}
@media (max-width: 560px) { .flow { flex-direction: column; } .connector { transform: rotate(90deg); } .tiles { grid-template-columns: 1fr; } }

/* Reduced motion: the beats' internals start hidden and are revealed by entrance
   animations. If the user opts out of motion, show them in their final state so
   no content is lost (applies wherever the beats render). */
@media (prefers-reduced-motion: reduce) {
  .src, .flow-step-v, .tile, .tile-tag, .pc-tag, .deck-count {
    opacity: 1 !important; transform: none !important; animation: none !important; }
  .flow-thread { transform: scaleY(1) !important; animation: none !important; }
  .gauge-arc { stroke-dashoffset: 47.5 !important; animation: none !important; }
  .pc-radar svg polygon[fill*="195,160,95"] {
    fill-opacity: 1 !important; stroke-dashoffset: 0 !important; animation: none !important; }
  .pc-radar svg circle { opacity: 1 !important; transform: none !important; animation: none !important; }
  .mob-reveal .merge-panel, .mob-reveal .how-it-works, .mob-reveal .hc-cards {
    opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-poster-img { transform: none !important; }
}

/* ── Landing page only: make the dark footer full-bleed so no page
   background shows around it. This file is only loaded on the landing
   page, so other pages keep the standard rounded/margined footer. ── */
.agent-seeker-footer {
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
}

/* ── Landing only: survey text legibility on the misty glass ── */
.hero-content .progress-text { color: #545E57; }   /* was pale grey #8A9890 — now readable */
.hero-content .question-title { color: #3B443E; }  /* was near-black #2E3530 — softened a touch */

/* ── Landing only: smooth the retract. The collapsed state has no explicit
   max-width (it's `none`, which can't be animated), so the width snaps the
   instant it closes. Give both states an explicit width so it interpolates. ── */
.hero-content .search-container { max-width: 380px; }
.hero-content .search-container.expanded { max-width: 360px; }

/* Faster retract (collapse) so it plays even on a quick scroll; the expand
   into the survey keeps its normal, slower feel. */
.hero-content .search-container:not(.expanded) { transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1); }