/* Homepage hero story: list -> evidence -> approval -> confirmed meeting.
   Timings arrive as custom properties from hero-story.js (STORY_TIMING). */

.vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.story{
  --story-fade:800ms; --story-move:700ms; --story-cursor:1000ms; --story-draw:900ms; --story-light:1400ms; --story-stagger:90ms;
  --story-ease:cubic-bezier(.45,.05,.2,1);
  position:relative; min-width:0;
}

/* ---------- stage ---------- */
.story-stage{ position:relative; height:470px; border-radius:32px; overflow:hidden; background:var(--bg-soft);
  border:1px solid var(--line); container:story / size; }
@media(max-width:640px){ .story-stage{ height:440px; border-radius:26px; } }

/* The travelling pool of light is the gobo: it lands on whatever matters in each scene. */
.story-light{ position:absolute; left:0; top:0; width:440px; height:440px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(111,190,140,.30), rgba(111,190,140,.10) 42%, transparent 68%);
  --lx:50cqw; --ly:45cqh;
  transform:translate(calc(var(--lx) - 50%), calc(var(--ly) - 50%));
  transition:transform var(--story-light) var(--story-ease); }
.story[data-scene="2"] .story-light{ --lx:50cqw; --ly:62cqh; }
.story[data-scene="3"] .story-light{ --lx:64cqw; --ly:70cqh; }
.story[data-scene="4"] .story-light{ --lx:74cqw; --ly:76cqh; }

.story-scene{ position:absolute; inset:0; padding:28px; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(12px) scale(.985); pointer-events:none;
  transition:opacity var(--story-fade) var(--story-ease), transform var(--story-fade) var(--story-ease); }
.story-scene.is-active{ opacity:1; transform:none; }
@container story (max-width:470px){ .story-scene{ padding:16px; } }

.story .avatar{ flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:var(--green); color:#fff; font-size:12.5px; font-weight:600; letter-spacing:.01em; }

.fake-btn{ display:inline-grid; align-items:center; justify-items:center; height:38px; padding:0 18px; border-radius:999px;
  font-size:13.5px; font-weight:600; border:1px solid var(--line-2); background:#fff; color:var(--ink); }
.fake-btn.primary{ background:var(--green); border-color:var(--green); color:#fff; }
.fake-btn.small{ height:32px; padding:0 14px; font-size:12.5px; }

/* ---------- 1: the list ---------- */
.sheet{ width:100%; background:#fff; border:1px solid var(--line-2); border-radius:18px; overflow:hidden; }
.sheet-bar{ display:flex; justify-content:space-between; gap:12px; padding:12px 18px; font-size:12px; color:var(--muted); border-bottom:1px solid var(--line); }
.sheet-file{ font-family:var(--mono); color:var(--ink); }
.sheet-head, .sheet-rows li{ display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:14px; align-items:center; padding:0 18px; }
.sheet-head{ height:32px; font-size:11.5px; color:var(--muted); background:var(--sage-2); }
.sheet-rows{ list-style:none; margin:0; padding:0; }
.sheet-rows li{ position:relative; height:46px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-2);
  opacity:0; transform:translateX(22px);
  transition:opacity var(--story-move) var(--story-ease) calc(var(--i) * var(--story-stagger)),
             transform var(--story-move) var(--story-ease) calc(var(--i) * var(--story-stagger)); }
.sheet-rows li > span{ position:relative; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sheet-rows .n{ color:var(--ink); font-weight:500; }
.sheet-rows li::before{ content:""; position:absolute; inset:0; background:var(--sage); opacity:0;
  transition:opacity var(--story-move) var(--story-ease); }
.sheet-rows li::after{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--green);
  transform:scaleY(0); transition:transform var(--story-move) var(--story-ease); }
.is-b1 .sheet-rows li{ opacity:1; transform:none; }
.is-b2 .sheet-rows li:not(.pick){ opacity:.45; }
.is-b2 .sheet-rows .pick::before{ opacity:1; }
.is-b2 .sheet-rows .pick::after{ transform:none; }

@container story (max-width:470px){
  .sheet-bar{ padding:11px 14px; }
  .sheet-head{ display:none; }
  .sheet-rows li{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"n c" "t t"; gap:0 10px; height:52px; padding:0 14px; align-content:center; }
  .sheet-rows .n{ grid-area:n; }
  .sheet-rows .c{ grid-area:c; font-size:12px; color:var(--muted); }
  .sheet-rows .t{ grid-area:t; font-size:12px; color:var(--muted); }
}

/* ---------- 2: the real thread ---------- */
.pair{ --gap:64px; --pp:20px; width:100%; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto auto; column-gap:var(--gap); }
.person{ position:relative; display:grid; grid-row:span 4; grid-template-rows:subgrid; align-content:start;
  padding:var(--pp); background:#fff; border:1px solid var(--line-2); border-radius:20px;
  opacity:0; transform:translateY(-18px) scale(.97);
  transition:opacity var(--story-move) var(--story-ease), transform var(--story-move) var(--story-ease); }
.p-b{ transform:translateY(22px) scale(.97); transition-delay:120ms; }
.p-b .avatar{ background:var(--green-bright); }
.person .avatar{ margin-bottom:12px; }
.pname{ margin:0; font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--ink); line-height:1.3; }
.prole{ margin:2px 0 16px; font-size:12.5px; line-height:1.4; color:var(--muted); }
.facts{ list-style:none; margin:0; padding:0; display:grid; gap:8px; align-content:start; }
.fact{ position:relative; padding:6px 12px; font-size:12.5px; line-height:1.4; color:var(--ink-2); border:1px solid var(--line-2); border-radius:999px;
  transition:opacity var(--story-move) var(--story-ease); }
.fact::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; background:var(--sage); border:1px solid var(--green-glow);
  box-shadow:0 0 0 5px rgba(111,190,140,.16); opacity:0; transition:opacity var(--story-move) var(--story-ease); z-index:-1; }
.fact{ z-index:0; isolation:isolate; }
.thread{ position:absolute; top:50%; left:calc(100% + 1px); width:calc(var(--gap) + 2 * var(--pp) + 2px); height:2px; margin-top:-1px; overflow:visible; }
.thread line{ stroke:var(--green-bright); stroke-width:1.5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset var(--story-draw) var(--story-ease); }
.is-b1 .person{ opacity:1; transform:none; }
.is-b2 .fact.shared::before{ opacity:1; }
.is-b3 .thread line{ stroke-dashoffset:0; }
.is-b3 .fact.other{ opacity:.3; }
.p-b .fact.shared::before{ transition-delay:120ms; }

@container story (max-width:470px){
  .pair{ --gap:26px; --pp:13px; }
  .person{ border-radius:18px; }
  .person .avatar{ width:32px; height:32px; font-size:11.5px; margin-bottom:10px; }
  .pname{ font-size:13.5px; }
  .prole{ font-size:11.5px; margin-bottom:12px; }
  .fact{ padding:5px 9px; font-size:11.5px; }
}

/* ---------- 3: you approve ---------- */
.intro{ position:relative; width:min(100%, 380px); padding:26px; background:#fff; border:1px solid var(--line-2); border-radius:24px;
  box-shadow:0 24px 60px rgba(15,36,25,.10);
  opacity:0; transform:translateY(16px);
  transition:opacity var(--story-move) var(--story-ease), transform var(--story-move) var(--story-ease); }
.intro-top{ display:flex; align-items:center; gap:12px; }
.avatars{ display:flex; }
.avatars .avatar{ box-shadow:0 0 0 2px #fff; }
.avatars .avatar + .avatar{ margin-left:-5px; background:var(--green-bright); }
.intro-label{ font-size:12.5px; color:var(--muted); }
.intro-names{ margin:18px 0 0; font-size:28px; font-weight:600; letter-spacing:-.03em; line-height:1.1; color:var(--ink); }
.intro-link{ color:var(--green-bright); font-weight:400; }
.intro-why{ margin:10px 0 0; font-size:15px; line-height:1.5; color:var(--ink-2); }
.intro-actions{ display:flex; gap:10px; margin-top:22px; }
.approve-wrap{ position:relative; display:inline-block; }
.fake-btn .lbl{ grid-area:1 / 1; transition:opacity var(--story-move) var(--story-ease); }
.fake-btn .lbl.done{ opacity:0; }
.approve-wrap .fake-btn{ transition:transform 220ms var(--story-ease); }
.cursor{ position:absolute; left:78%; top:62%; width:20px; height:24px; overflow:visible;
  opacity:0; transform:translate(120px, 90px);
  transition:opacity var(--story-cursor) var(--story-ease), transform var(--story-cursor) var(--story-ease); }
.intro-check{ position:absolute; top:-14px; right:-14px; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:var(--green); color:#fff; box-shadow:0 0 0 5px var(--bg-soft);
  opacity:0; transform:scale(.5); transition:opacity var(--story-move) var(--story-ease), transform var(--story-move) var(--story-ease); }
.intro-check svg{ width:22px; height:22px; }
.is-b1 .intro{ opacity:1; transform:none; }
.is-b2 .cursor{ opacity:1; transform:translate(0, 0); }
.is-b3 .cursor{ transform:translate(0, 0) scale(.84); transition-duration:220ms; }
.is-b3 .approve-wrap .fake-btn{ transform:scale(.95); }
.is-b4 .cursor{ transform:translate(0, 0) scale(1); }
.is-b4 .approve-wrap .fake-btn{ transform:none; }
.is-b4 .fake-btn .lbl{ opacity:0; }
.is-b4 .fake-btn .lbl.done{ opacity:1; }
.is-b4 .intro-check{ opacity:1; transform:none; }

@container story (max-width:470px){
  .intro{ padding:22px 20px; margin-right:10px; }
  .intro-names{ font-size:24px; }
  .intro-why{ font-size:14px; }
  .cursor{ transform:translate(70px, 80px); }
}

/* ---------- 4: they meet, you get proof ---------- */
.proof{ width:100%; display:grid; gap:14px; }
.mail{ padding:18px 20px; background:#fff; border:1px solid var(--line-2); border-radius:18px;
  opacity:0; transform:translateY(-24px);
  transition:opacity var(--story-move) var(--story-ease), transform var(--story-move) var(--story-ease); }
.mail-head{ display:flex; justify-content:space-between; gap:12px; padding-bottom:10px; margin-bottom:12px; border-bottom:1px solid var(--line); font-size:12px; color:var(--muted); }
.mail-subject{ margin:0; font-size:15px; font-weight:600; letter-spacing:-.01em; line-height:1.35; color:var(--ink); }
.mail-body{ margin:6px 0 14px; font-size:13px; line-height:1.5; color:var(--ink-2); }
.proof-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.confirms{ list-style:none; margin:0; padding:0; display:grid; gap:10px; align-content:center; }
.cf{ display:flex; align-items:center; gap:10px; padding:7px 14px 7px 7px; background:#fff; border:1px solid var(--line-2); border-radius:999px;
  font-size:13px; font-weight:500; color:var(--ink); white-space:nowrap;
  opacity:0; transform:translateY(10px);
  transition:opacity var(--story-move) var(--story-ease), transform var(--story-move) var(--story-ease); }
.tick{ flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--sage); color:var(--green-deep); }
.tick svg{ width:15px; height:15px; }
.tally{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:16px 18px; border-radius:18px; background:var(--green-deep); color:#fff;
  opacity:0; transform:translateY(12px);
  transition:opacity var(--story-move) var(--story-ease) 200ms, transform var(--story-move) var(--story-ease) 200ms; }
.tally-label{ font-size:12.5px; color:#B9CCC0; }
.tally-num{ display:block; height:1em; overflow:hidden; font-size:40px; font-weight:600; letter-spacing:-.03em; line-height:1; }
.roll{ display:flex; flex-direction:column; transition:transform var(--story-move) var(--story-ease); }
.tally .sample-pill{ font-size:10px; padding:3px 9px; }
.is-b1 .mail, .is-b1 .tally{ opacity:1; transform:none; }
.is-b2 .cf-a, .is-b3 .cf-b{ opacity:1; transform:none; }
.is-b4 .roll{ transform:translateY(-1em); }

@container story (max-width:470px){
  .mail{ padding:16px; }
  .mail-from{ display:none; }
  .mail-subject{ font-size:14px; }
  .proof-row{ gap:10px; }
  .cf{ font-size:12px; gap:8px; padding-right:10px; }
  .tick{ width:22px; height:22px; }
  .tally{ padding:14px; }
  .tally-num{ font-size:34px; }
}

/* ---------- controls and captions ---------- */
.story-bar{ position:relative; margin-top:22px; }
.story-toggle{ display:none; position:absolute; top:0; right:0; z-index:1; align-items:center; gap:8px; height:38px; padding:0 16px 0 13px;
  border:1px solid var(--line-2); border-radius:999px; background:#fff; color:var(--ink); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
  transition:border-color .2s; }
.story-toggle:hover{ border-color:var(--ink); }
.story-toggle svg{ width:14px; height:14px; }
.story-toggle .i-play, .story-toggle .i-next{ display:none; }
.story.is-user-paused .story-toggle .i-pause, .story.is-reduced .story-toggle .i-pause{ display:none; }
.story.is-user-paused .story-toggle .i-play{ display:block; }
.story.is-reduced .story-toggle .i-next{ display:block; }

.story-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
.story-cap{ margin:0; font-size:14px; line-height:1.5; color:var(--ink-2); }
.story-step{ display:block; width:100%; padding:0 0 6px; background:none; border:0; text-align:left; font:inherit; font-size:13.5px; line-height:1.3;
  color:var(--muted); cursor:pointer; transition:color .2s; }
.story-step:hover, .story-step[aria-current]{ color:var(--ink); }
.story-step[aria-current]{ font-weight:600; }
.story-track{ display:block; height:2px; margin-bottom:12px; border-radius:2px; background:var(--line-2); overflow:hidden; }
.story-fill{ display:block; height:100%; background:var(--green); transform:scaleX(0); transform-origin:left center; }

/* With the script running, captions share one line above the steps and cross-fade. */
.story.is-ready .story-toggle{ display:inline-flex; }
.story.is-ready .story-steps{ position:relative; padding-top:66px; }
.story.is-ready .story-cap{ position:absolute; top:0; left:0; right:132px; font-size:16px; color:var(--ink);
  opacity:0; transform:translateY(6px);
  transition:opacity var(--story-fade) var(--story-ease), transform var(--story-fade) var(--story-ease); }
.story.is-ready .is-current .story-cap{ opacity:1; transform:none; }
.story.is-ready .story-step{ padding-top:10px; }
@media(max-width:640px){
  .story.is-ready .story-steps{ padding-top:74px; gap:8px; }
  .story.is-ready .story-cap{ right:112px; font-size:15px; }
  .story-step{ font-size:12.5px; }
  .story-toggle{ padding:0 13px 0 11px; }
}

.story.is-instant *, .story.is-instant *::before, .story.is-instant *::after{ transition:none !important; }
@media(prefers-reduced-motion:reduce){
  .story *, .story *::before, .story *::after{ transition:none !important; }
}