/* #relay-story: the 60s WeRelay film, drawn by its own code and scrubbed by scroll. */
.relay-story{padding:86px 4.4% 72px;border-top:1px solid var(--line);background:#f6f7f2;color:#182719;scroll-margin-top:24px}
.rs-section-heading{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:30px}
.rs-section-heading h2{font-size:clamp(34px,4.5vw,65px);line-height:1.14;letter-spacing:-.04em}
.rs-section-heading p{max-width:325px;font-size:13px;line-height:1.8;margin:0 0 6px;color:#697164}
.rs-eyebrow{display:block;font-size:10px;letter-spacing:.16em;margin-bottom:18px;color:#697164}
.rs-demo-note{font-size:10px;line-height:1.8;color:#77806f;margin:22px 0 0}
.rs-transcript{font-size:12px;color:#697164;margin-top:15px}
.rs-transcript summary{cursor:pointer}
.rs-transcript li{margin:8px 0;line-height:1.7}

.wf-scrolly{position:relative;height:calc(100svh + var(--wf-dist,5400px))}
.wf-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:14px 0}
.wf-pin>*{width:min(100%,calc((100svh - 170px) * 16 / 9));margin-left:auto;margin-right:auto}
.wf-stage{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#f4f4ef;box-shadow:0 0 0 1px #dfe3d6,0 40px 80px -52px rgba(24,39,25,.55);isolation:isolate}
.wf-stage iframe{position:absolute;left:0;top:0;width:1920px;height:1080px;border:0;transform-origin:0 0;pointer-events:none}
.wf-hint{position:absolute;left:50%;bottom:18px;translate:-50% 0;z-index:2;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:18px;background:rgba(24,39,25,.86);color:#f6f7f2;font-size:12px;pointer-events:none;transition:opacity .4s}
.wf-hint svg{width:13px;height:13px;fill:none;stroke:#adf044;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wf-bar{display:flex;align-items:center;gap:14px;margin-top:14px}
.wf-bar button{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.wf-play{width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--line)}
.wf-play svg{width:14px;height:14px;fill:currentColor}
.wf-play[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.wf-track{position:relative;flex:1;height:28px;cursor:pointer;touch-action:none}
.wf-track:before{content:"";position:absolute;left:0;right:0;top:12px;height:4px;border-radius:2px;background:var(--line)}
.wf-fill{position:absolute;left:0;top:12px;height:4px;border-radius:2px;background:var(--ink);width:0}
.wf-tick{position:absolute;top:9px;width:2px;height:10px;margin-left:-1px;border-radius:1px;background:#bfc6b5}
.wf-knob{position:absolute;top:7px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 2px var(--ink)}
.wf-clock{font:500 12px ui-monospace,"SF Mono",Menlo,monospace;color:var(--sub);min-width:74px;text-align:right}
.wf-sound{height:40px;padding:0 16px 0 13px;border-radius:20px;background:var(--green);font-size:13px;font-weight:600}
.wf-sound svg{width:16px;height:16px;fill:currentColor}
.wf-sound:hover{background:#a2e534}
.wf-chapters{list-style:none;padding:0;margin-top:12px;margin-bottom:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.wf-chapters button{width:100%;text-align:left;padding:6px 2px 10px;font-size:12px;line-height:1.4;color:var(--sub);position:relative}
.wf-chapters b{display:block;font-family:Author,Manrope,sans-serif;font-weight:400;font-size:11px;letter-spacing:.06em;color:#8a9580;margin-bottom:2px}
.wf-chapters i{position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.wf-chapters i:after{content:"";position:absolute;inset:0;background:var(--green);transform:scaleX(var(--p,0));transform-origin:0 50%}
.wf-chapters button[aria-current=step]{color:var(--ink)}
.wf-chapters button[aria-current=step] b{color:#4f7a1b}
.wf-dialog{border:0;padding:0;background:transparent;width:min(94vw,calc((100vh - 60px) * 16 / 9));max-width:none;overflow:visible}
.wf-dialog::backdrop{background:rgba(12,18,12,.82)}
.wf-dialog video{display:block;width:100%;aspect-ratio:16/9;border-radius:14px;background:#000}
.wf-close{position:absolute;right:-6px;top:-46px;height:36px;padding:0 14px;border-radius:18px;background:#f6f7f2;font-size:13px}
@media(max-width:760px){
  .relay-story{padding:55px 6% 45px}
  .rs-section-heading{display:block;margin-bottom:25px}
  .rs-section-heading p{margin-top:20px;font-size:12px;max-width:270px}
  .rs-eyebrow{font-size:9px;margin-bottom:14px}
  .rs-demo-note{font-size:9px}
  .wf-pin>*{width:100%}
  .wf-stage{border-radius:12px}
  .wf-bar{flex-wrap:wrap;gap:10px}
  .wf-track{order:3;flex-basis:100%}
  .wf-sound{margin-left:auto}
  .wf-chapters{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 10px}
  .wf-chapters button{font-size:11px}
  .wf-hint{font-size:10px;bottom:8px;padding:5px 10px}
}

/* ---------- borderless: the film sits on the page itself, full width ---------- */
html,body{overflow-x:clip}
.wf-pin{width:100vw;margin-left:calc(50% - 50vw);padding:0;display:block}
.wf-pin>*{width:auto}
.wf-pin>.wf-stage{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;background:transparent;box-shadow:none;overflow:hidden}
.wf-stage iframe{background:transparent;color-scheme:light;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(transparent,#000 4%,#000 96%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(transparent,#000 4%,#000 96%,transparent);mask-composite:intersect}
.wf-controls{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:26px max(4.4vw,20px) 14px;background:linear-gradient(rgba(246,247,242,0),#f6f7f2 34%)}
.wf-controls>*{max-width:1400px;margin-left:auto;margin-right:auto}
.wf-controls .wf-bar{margin-top:0}
.wf-hint{bottom:auto;top:auto}
@media(max-width:760px){.wf-controls{padding:18px 6% 12px}}

/* ---------- phones: page-native headline above a cropped, focus-following film ---------- */
.wf-cap{display:none}
.wf-narrow .wf-cap{display:block;position:absolute;left:6%;right:6%;top:max(18px,4svh);z-index:2;margin:0;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.wf-narrow .wf-cap.on{opacity:1;transform:none}
.wf-cap b{display:block;font-size:24px;line-height:1.28;font-weight:650;letter-spacing:-.01em;color:var(--ink,#182719)}
.wf-cap span{display:block;min-height:1.5em;margin-top:6px;font-size:15px;line-height:1.5;color:#57644f}
.wf-cap em{font-style:normal;background:linear-gradient(transparent 60%,#adf044 60%,#adf044 94%,transparent 94%)}
.wf-narrow .wf-stage iframe{-webkit-mask-image:none;mask-image:none}
.wf-narrow .wf-hint{display:none}

/* phones: one scrolling row of chapters (current one kept in view), fixed-height headline slot */
@media(max-width:760px){
  .wf-narrow .wf-chapters{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;margin-top:8px;scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .wf-narrow .wf-chapters::-webkit-scrollbar{display:none}
  .wf-narrow .wf-chapters li{flex:0 0 auto;scroll-snap-align:start}
  .wf-narrow .wf-chapters button{white-space:nowrap;padding:4px 0 8px}
  .wf-narrow .wf-controls{padding-top:16px}
  .wf-narrow .wf-cap{min-height:calc(2 * 24px * 1.28 + 6px + 15px * 1.5)}
}