/* Runverra site v2 — light, colourful stage. Loaded after styles.css. */
:root{--ember-text:color-mix(in srgb,var(--ember) 72%,#000);color-scheme:light}
html{background:var(--ink)}
.btn,.btn:hover{color:#141414}
.btn:hover{background:#141414;color:#FAF8F4}
.btn--ghost{color:var(--bone);border-color:rgba(20,20,20,.35)}
.skip{background:#141414;color:#FAF8F4}
.eyebrow,.steps span,.price,.tiers b,.stats div:nth-child(2) dd,.faq summary::after{color:var(--ember-text)}
.rate strong{border-bottom-color:var(--ember)}
.hud-list dt,.tiny{color:var(--mute)}
.nav.scrolled{background:rgba(250,248,244,.86)}
.status.ok{border-color:#1f9d55}
/* cinematic hero */
.cine{position:relative;height:420vh}
.cine .hero{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden;padding:84px var(--pad) 0}
.cine__canvas,.cine__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--fx,none)}
.cine__poster{display:none}
.hero__veil{background:linear-gradient(90deg,rgba(250,248,244,.86) 0%,rgba(250,248,244,.35) 45%,rgba(250,248,244,0) 70%),linear-gradient(transparent 75%,rgba(250,248,244,.9))}
.hero__copy{position:absolute;left:var(--pad);bottom:clamp(110px,18vw,260px);margin:0;max-width:600px}
.cine__big{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);font-family:Display,Impact,sans-serif;text-transform:uppercase;font-size:clamp(64px,11vw,190px);line-height:.85;color:#141414;opacity:0;visibility:hidden;pointer-events:none}
.cine__big+.cine__big{left:auto;right:var(--pad);color:var(--ember-text)}
.cine__hud{position:absolute;left:var(--pad);top:116px;display:flex;gap:14px;color:var(--mute)}
.cine__ph{color:#B3261E;border:1px solid currentColor;padding:2px 6px}
.cine__bar{position:absolute;left:0;right:0;top:0;height:3px;background:transparent;z-index:3}
.cine__bar b{display:block;height:100%;background:var(--ember);transform-origin:left;transform:scaleX(0)}
.hero__mark{color:#141414;z-index:0}
.cine__canvas{z-index:0}.hero__veil{z-index:0}.hero__top,.hero__copy,.cine__big,.cine__hud{z-index:1}
/* chapter stages: frame canvases */
.stage{background:#fff;overflow:hidden}
.stage .seq{position:absolute;inset:0;width:100%;height:100%;filter:var(--fx,none)}
.stage--data table,.stage--data .tiny{position:relative;z-index:1;background:rgba(255,255,255,.82);padding:4px 8px}
.stage--data:not(.clean) td{color:#6b665f}
.panel{color:var(--bone)}
@media (max-width:860px){
  .cine{height:320vh}
  .hero__copy{bottom:30vw;right:var(--pad)}
  .cine__hud{top:100px;font-size:10px;flex-wrap:wrap}
  .hero__veil{background:linear-gradient(transparent 30%,rgba(250,248,244,.9) 70%)}
}
@media (prefers-reduced-motion:reduce){
  .cine{height:auto}.cine .hero{position:relative;height:100svh}
  .cine__canvas{display:none}.cine__poster{display:block}
  .cine__big,.cine__bar,.cine__hud #cine-frame{display:none}
  .hero{background:none}
}

/* S1/contrast: soft paper scrim behind copy that sits over the frames */
.hero__copy{padding:18px 22px 22px;margin-left:-22px;border-radius:18px;background:rgba(250,248,244,.84);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);box-shadow:0 12px 40px rgba(11,11,12,.08)}
.hero__copy .hero__line,.hero__copy .eyebrow{text-shadow:0 0 14px rgba(250,248,244,.95),0 0 2px rgba(250,248,244,.9)}
.cine__big{text-shadow:0 0 28px rgba(250,248,244,.95),0 0 6px rgba(250,248,244,.9)}
.cine__hud span[hidden]{display:none}
@media (max-width:860px){.hero__copy{margin-left:-14px;padding:14px}}
/* R1.1: at 390 the stage must never ride up over the chapter text/button — stack as a flex column and let the stage take only the space left */
@media (max-width:860px){
  /* R1.1 D1: base .ch has align-items:center (from desktop grid); stretch text to the page margin */
  .ch{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:18px;padding-bottom:24px}
  .ch__text{flex:0 0 auto;align-self:stretch;width:100%;min-width:0;max-width:100%}
  .ch .stage{flex:1 1 0;min-height:0;height:auto;width:auto;max-width:100%;max-height:38svh;aspect-ratio:1;align-self:center}
}
/* R1.4: mobile box floor (normal motion) and a fixed box in reduced motion (it was 0x0) */
@media (max-width:860px){
  .ch .stage{min-height:140px}
}
@media (max-width:860px) and (prefers-reduced-motion:reduce){
  .ch .stage{flex:0 0 auto;width:min(100%,320px);height:auto;max-height:none;min-height:0;min-width:0;aspect-ratio:1}
}
/* R1.4: short phones (e.g. 320x640): tighten the chapter text so the 140px box floor still fits the pinned screen */
@media (max-width:860px) and (max-height:700px) and (prefers-reduced-motion:no-preference){
  .ch{padding-top:112px;padding-bottom:10px;gap:18px}
  .ch h2{font-size:clamp(26px,8vw,34px)}
  .ch__text p:not(.eyebrow){margin:4px 0 6px;font-size:14px;line-height:1.36}
  .ch .hud-list{gap:3px;padding-top:7px}
  .ch .btn--sm{margin-top:8px}
}
/* R1.5: chapter label row on mobile: one line, 10px text, 6px under the fixed header (header measured 69px), underline at least 10px above the eyebrow */
@media (max-width:860px) and (prefers-reduced-motion:no-preference){
  .chapters__rail{top:75px;flex-wrap:nowrap;white-space:nowrap;gap:0 10px}
  .chapters__rail span{font-size:10px;letter-spacing:0}
  .ch{padding-top:112px}
}
/* v3: no lens; scene stages share the R1.5 mobile spacing */
@media (prefers-reduced-motion:no-preference){.chapters{height:375vh}}

/* R3 landscape-short phones (844x390, 932x430; matches seq.js LSQ): the 600px hero floor puts the copy card high, over the R.
   Pin the card to the bottom-left of the visible screen and narrow it so the R (drawn right of centre) stays clear. */
@media (orientation:landscape) and (max-height:500px){.cine .hero .hero__copy{top:auto;bottom:calc(600px - 100svh + 14px);right:auto;max-width:min(600px,44vw)}}