/* ============================================================
   Consential scrollytelling — layered ON TOP of style.css.
   Tokens, reset and base element rules come from style.css; this file adds
   only the scene engine and its components. Component class names are
   sc-prefixed where they would otherwise collide (wrap/btn/chip/eyebrow).
   ============================================================ */
:root{
  /* written every frame by js/scrolly.js */
  --mood-bg: var(--bg);
  --mood-ink: var(--ink);
  --gut: clamp(20px, 5vw, 72px);
  --maxw: 1180px;
}
/* no overflow declaration here on purpose — style.css already sets
   body{overflow-x:hidden}, and the one element that escaped the viewport
   (the overlay in the Disabilities refusal scene) is now clipped by its own pin */
body.sc-body{ background: var(--mood-bg); color: var(--mood-ink); }

/* The header is sticky over scenes whose background changes as you scroll,
   including one deep-toned scene. Letting it stay translucent means the nav
   text has to track a mood colour that spends most of the transition at a
   mid-blend grey — measured at roughly 2:1 against the surface behind it.
   On the site that sells accessibility monitoring that is not shippable, so
   the header keeps a solid bone surface and the site's own ink throughout.
   The scenes pass underneath it with a clean edge. */
body.sc-body .site-header{
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* body carries --mood-ink, which inherits into the chrome and turns brand text
   cream the moment the deep scene is on screen — cream on a bone header is
   invisible. Chrome opts back out to the site's own ink. */
body.sc-body .site-header, body.sc-body .site-footer{ color: var(--ink); }

/* clear the sticky header so centred scene content never sits under it */
body.sc-body .pin{ padding-top: 64px; }

/* ============ SCROLL RAIL + SCENE MARKER (review affordance) ============ */
.rail{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:90;
  background: rgba(18,23,21,.08); pointer-events:none;
}
.rail__fill{
  height:100%; width:100%; transform-origin: 0 50%;
  transform: scaleX(var(--doc, 0));
  background: var(--accent);
}
.marker{
  position:fixed; z-index:90; left: var(--gut); bottom: 26px;
  font-family: var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color: var(--mood-ink); opacity:.42;
  pointer-events:none; transition: opacity .3s;
  display:flex; gap:10px; align-items:baseline;
}
.marker b{ font-weight:600; opacity:1; }
.marker__bar{
  display:inline-block; width:44px; height:2px; background: currentColor; opacity:.3;
  position:relative; top:-3px;
}
.marker__bar::after{
  content:''; position:absolute; inset:0; transform-origin:0 50%;
  transform: scaleX(var(--scenep, 0)); background: currentColor; opacity:1;
}
.hint{
  position:fixed; z-index:90; right: var(--gut); bottom: 24px;
  font-family: var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color: var(--mood-ink); opacity:.72;
  pointer-events:none; display:flex; align-items:center; gap:9px;
  transition: opacity .4s;
}
.hint.gone{ opacity:0; }
.hint__wheel{
  width:15px; height:24px; border:1.5px solid currentColor; border-radius:9px;
  position:relative;
}
.hint__wheel::after{
  content:''; position:absolute; left:50%; top:5px; width:2px; height:5px;
  background:currentColor; margin-left:-1px; border-radius:1px;
  animation: wheel 1.9s var(--ease-in-out) infinite;
}
@keyframes wheel{ 0%,100%{ transform:translateY(0); opacity:1 } 55%{ transform:translateY(7px); opacity:.15 } }

/* ============ SCENES ============ */
.scene{
  position:relative;
  height: calc(var(--len, 300) * 1vh);
}
.scene--flow{ height:auto; }
.pin{
  position:sticky; top:0; height:100vh;
  display:grid; place-items:center; overflow:hidden;
}
.sc-wrap{
  width:100%; max-width: var(--maxw);
  padding-inline: var(--gut); margin-inline:auto;
}
.sc-wrap--wide{ max-width: 1400px; }

/* ============ TYPE ============ */
.sc-eyebrow{
  font-family: var(--font-mono); font-size: clamp(11px,1.05vw,13px);
  letter-spacing:.18em; text-transform:uppercase; color: var(--accent);
  opacity:.85;
}
.display{
  font-size: clamp(2.4rem, 6.4vw, 5.6rem);
  line-height:1.02; letter-spacing:-.03em; font-weight:600;
  text-wrap: balance;
}
.display--sm{ font-size: clamp(2rem, 4.4vw, 3.5rem); line-height:1.08; }
.lede{
  font-size: clamp(1.05rem, 1.55vw, 1.34rem); line-height:1.62;
  color: var(--ink-muted); max-width: 62ch;
}
.mono{ font-family: var(--font-mono); }
.tiny{
  font-family: var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color: var(--ink-faint);
}

/* dark-mood inversions — used by the deep scenes */
.on-dark{ --ink: #f3eee5; --ink-muted:#b6ab9c; --ink-faint:#9a9184;
  --surface: rgba(255,255,255,.055); --border: rgba(255,255,255,.14);
  --border-strong: rgba(255,255,255,.24); --accent: #6ec9bb; --accent-soft: rgba(110,201,187,.14);
  color: var(--ink);
}
.on-dark .sc-eyebrow{ color: var(--accent); }
.on-dark .lede{ color: var(--ink-muted); }

/* ============ WORD CUT-REVEAL (ported from pricing.html .pr-cut) ============ */
.cut{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.cut > span{
  display:inline-block; transform: translateY(105%);
  transition: transform .82s var(--ease-out);
  transition-delay: calc(var(--i,0) * 55ms);
}
.in .cut > span, .cut.in > span{ transform:none; }

/* ============ REVEALS ============ */
.rv{
  opacity:0; transform: translateY(22px);
  transition: opacity .78s var(--ease-out), transform .78s var(--ease-out);
  transition-delay: calc(var(--i,0) * 85ms);
}
.rv.in{ opacity:1; transform:none; }
.rv--l{ transform: translateX(-26px); }
.rv--r{ transform: translateX(26px); }
.rv--scale{ transform: scale(.965); }

/* ============ SHARED COMPONENTS ============ */
.card{
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--r-md); padding: clamp(20px,2.2vw,30px);
}
.card h3{ font-size:1.06rem; font-weight:600; letter-spacing:-.01em; margin-bottom:8px; }
.card p{ font-size:.95rem; color: var(--ink-muted); line-height:1.6; }
.card__n{
  font-family: var(--font-mono); font-size:11px; letter-spacing:.16em;
  color: var(--accent); margin-bottom:14px; display:block;
}

.sc-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px; border-radius:999px; font-size:.8rem;
  border:1px solid var(--border-strong); background: var(--surface);
  font-family: var(--font-mono); letter-spacing:.02em; white-space:nowrap;
}
.dot{ width:6px; height:6px; border-radius:50%; background: var(--ink-faint); flex:none; }
.dot--live{ background: var(--brick); }
.dot--hold{ background: var(--amber); }
.dot--ok{ background: var(--green); }

.sc-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:999px; text-decoration:none;
  background: var(--accent); color:#f4faf8; font-weight:550; font-size:.98rem;
  border:1px solid var(--accent); transition: transform .3s var(--ease-out), background .3s;
}
.sc-btn:hover{ transform: translateY(-2px); background: var(--accent-strong); }
.sc-btn--ghost{ background:transparent; color: var(--ink); border-color: var(--border-strong); }
.sc-btn--ghost:hover{ background: var(--surface); }

.rule{ height:1px; background: var(--border); border:0; }

.note{
  font-size:.86rem; line-height:1.62; color: var(--ink-faint);
  border-left:2px solid var(--border-strong); padding-left:16px; max-width:64ch;
}

/* ============ END CTA ============ */
.end{ padding: clamp(90px,14vh,170px) 0 clamp(70px,10vh,120px); }
.end .display--sm{ margin-bottom:20px; }
.endbar{
  display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:34px;
}
.foot{
  margin-top: clamp(60px,9vh,110px); padding-top:26px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  .scene{ height:auto !important; }
  .pin{ position:static; height:auto; padding: 12vh 0; }
  .rv{ opacity:1 !important; transform:none !important; }
  .cut > span{ transform:none !important; }
  .hint{ display:none; }
}

@media (max-width: 780px){
  :root{ --gut: 20px; }
  .marker{ display:none; }
}