/* duc-story.css · WP-1 · Story section (hero → the app → how it works)
   Pixel source: dc/SiteStory.dc.html (≥900px) + dc/WebHomeMobile.dc.html hero/How-it-works (<900px).
   Tokens come from duc-core.css (§2.3). Everything else is lifted from the DC inline styles.
   Modes: desktop = @media (min-width:900px) pinned choreography · mobile = rail · reduced motion = static.
   State written by js/story.js on the section root: data-step 0–3 · data-sub 0–2 · data-hero 0–2. */

/* ── keyframes (namespaced so duc-core's duc-pulse is untouched) ── */
@keyframes duc-story-float{0%{transform:translateY(-6px)}100%{transform:translateY(8px)}}
@keyframes duc-story-float-m{0%{transform:translateY(-5px)}100%{transform:translateY(7px)}}
@keyframes duc-story-winA{0%{margin:0}45%{margin:24px 20px 0 0}100%{margin:-8px -10px 0 0}}
@keyframes duc-story-winB{0%{margin:0}50%{margin:-20px 0 0 20px}100%{margin:10px 0 0 -8px}}
@keyframes duc-story-winA-m{0%{transform:translate(0,0)}45%{transform:translate(-14px,18px)}100%{transform:translate(8px,-6px)}}
@keyframes duc-story-winB-m{0%{transform:translate(0,0)}50%{transform:translate(14px,0)}100%{transform:translate(-6px,0)}}
@keyframes duc-story-pulse{0%,100%{opacity:.35}50%{opacity:.9}}

/* ── root ── */
.duc-story{position:relative;font-family:var(--font-ui);color:var(--ink);font-size:16px;line-height:normal}
/* the DC has no box-sizing reset; keep content-box inside the section and opt in where the DC does */
.duc-story,.duc-story *{box-sizing:content-box}
.duc-story a:focus-visible,.duc-story button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.duc-story button{font:inherit;color:inherit;margin:0;appearance:none;-webkit-appearance:none}

/* ── the phone (one component, every instance) ── */
.duc-phone{box-sizing:content-box;width:312px;background:var(--ink);border-radius:52px;padding:10px;box-shadow:0 18px 38px -12px rgba(18,22,27,.32)}
.duc-phone--hiw{box-shadow:0 18px 38px -12px rgba(18,22,27,.28)}
.duc-phone--rail{box-shadow:0 22px 44px -14px rgba(18,22,27,.3)}
.duc-phone__screen{position:relative;width:312px;height:664px;border-radius:43px;overflow:hidden;background:var(--paper);display:flex;flex-direction:column}
.duc-phone__screen--white{background:var(--white)}
.duc-phone__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;opacity:0;transition:opacity .45s ease}
.duc-phone__img--on{opacity:1}
.duc-phone__img[data-hero-screen]{transition:opacity .5s ease}
.duc-phone__island{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:96px;height:26px;border-radius:14px;background:var(--ink);z-index:9}
.duc-phone__status{position:absolute;left:0;right:0;top:0;z-index:8;display:flex;align-items:center;justify-content:space-between;padding:14px 18px 0;font-size:12.5px;font-weight:700;color:var(--ink);pointer-events:none}
.duc-phone__time{width:54px}
.duc-phone__icons{display:inline-flex;gap:5px;align-items:center}
.duc-story[data-hero="0"] [data-hero-screen="0"],
.duc-story[data-hero="1"] [data-hero-screen="1"],
.duc-story[data-hero="2"] [data-hero-screen="2"]{opacity:1}
.duc-story[data-sub="0"] [data-sub-screen="0"],
.duc-story[data-sub="1"] [data-sub-screen="1"],
.duc-story[data-sub="2"] [data-sub-screen="2"]{opacity:1}

/* ── ACT 1+2 · hero act ── */
.duc-story__act{position:relative;height:400vh;z-index:1}
.duc-story__pin{position:sticky;top:0;height:100vh;overflow:hidden}
.duc-story__hero{position:absolute;left:0;right:0;top:0;padding:0 40px;z-index:2}
.duc-story__hero-in{padding-top:max(88px,min(15vh,140px));text-align:center;max-width:880px;margin:0 auto}
.duc-story__h1{margin:0;font-size:clamp(52px,6.4vw,84px);line-height:1.02;letter-spacing:-.035em;font-weight:800;color:var(--ink)}
.duc-story__h1 span{color:var(--teal)}
.duc-story__sub{margin:22px auto 0;max-width:620px;font-size:19px;line-height:1.6;color:var(--body2);text-wrap:pretty}
.duc-story__ctas{display:flex;gap:14px;justify-content:center;margin-top:30px}
.duc-story__cta{min-height:52px;display:inline-flex;align-items:center;gap:10px;border-radius:999px;font-size:16.5px;font-weight:700;text-decoration:none;transition:background .15s ease}
.duc-story__cta--join{padding:0 30px;background:var(--teal);color:var(--white);box-shadow:var(--sh-cta)}
@media (hover:hover){.duc-story__cta--join:hover{background:var(--teal-hover);color:var(--white)}}
.duc-story__cta--how{padding:0 28px;background:rgba(255,255,255,.72);border:1px solid rgba(18,22,27,.2);color:var(--ink)}
@media (hover:hover){.duc-story__cta--how:hover{background:var(--white);color:var(--ink)}}
.duc-story__gdpr{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:1.1px;color:var(--mono-4)}

/* hero phone · JS writes the transform; this is the p=0 approximation before the first frame */
.duc-story__phone-wrap{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%) translateY(72vh) scale(1.6)}

/* hero floats (desktop only) · wrappers carry the drift anchor, inner nodes the float animation */
.duc-story__ambient{position:absolute;inset:0;z-index:1;opacity:0}
.duc-story__float{position:absolute}
.duc-story__float--0{left:13%;top:21%}
.duc-story__float--1{left:17%;top:64%}
.duc-story__float--2{right:15%;top:24%}
.duc-story__float--3{right:13.5%;top:60%}
.duc-story__float--4{left:28%;top:80%}
.duc-story__float--5{right:26%;top:79%}
.duc-story__float--0 .duc-story__card{animation:duc-story-float 6s ease-in-out infinite alternate}
.duc-story__pill--1{animation:duc-story-float 7.5s ease-in-out infinite alternate-reverse}
.duc-story__pill--2{animation:duc-story-float 8s ease-in-out infinite alternate}
.duc-story__tile--sp{animation:duc-story-float 6.8s ease-in-out infinite alternate-reverse}
.duc-story__tile--am{animation:duc-story-float 9s ease-in-out infinite alternate}
.duc-story__star-float{animation:duc-story-float 7s ease-in-out infinite alternate;font-size:20px;color:var(--teal)}

/* float vocabulary (hero floats + How-it-works bands) */
.duc-story__card{box-sizing:content-box;background:var(--white);border-radius:16px;box-shadow:0 14px 34px rgba(24,44,84,.16)}
.duc-story__card--dividend{box-shadow:0 14px 34px rgba(24,44,84,.14);padding:14px 18px}
.duc-story__card-t{font-size:12.5px;font-weight:700;color:var(--ink)}
.duc-story__card-t--sm{font-size:12px;flex:1}
.duc-story__card-t--warm{color:var(--warm-hover)}
.duc-story__card-row{display:flex;align-items:baseline;gap:5px;margin-top:3px}
.duc-story__num{font-family:var(--font-mono);font-size:22px;font-weight:700;color:var(--ink)}
.duc-story__num--big{font-size:23px}
.duc-story__per{font-family:var(--font-mono);font-size:10.5px;font-weight:600;color:#8C9099}
.duc-story__per--sm{font-size:10px}
.duc-story__pill{display:inline-flex;align-items:center;gap:8px;background:var(--white);border-radius:999px;box-shadow:0 12px 28px rgba(24,44,84,.14);padding:10px 16px}
.duc-story__pill-t{font-size:13px;font-weight:700;color:var(--ink)}
.duc-story__pill-n{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--ink)}
.duc-story__pill-n--gold{color:#8A6510}
.duc-story__pill-n--teal{color:var(--teal)}
.duc-story__pill-n--blue{color:var(--blue)}
.duc-story__dot{width:7px;height:7px;border-radius:50%;flex:none}
.duc-story__dot--gold{background:#F5C664}
.duc-story__dot--teal{background:var(--teal-status)}
.duc-story__dot--blue{background:var(--blue)}
.duc-story__dot--8{width:8px;height:8px}
.duc-story__tile{border-radius:16px;box-shadow:0 12px 28px rgba(24,44,84,.14);display:flex;align-items:center;justify-content:center;font-weight:800}
.duc-story__tile--sp{width:58px;height:58px;background:var(--teal-tint);color:var(--teal);font-size:17px}
.duc-story__tile--am{width:52px;height:52px;background:#FBEFD3;color:#8A6510;font-size:15px}
.duc-story__card-line{display:flex;align-items:center;gap:9px}
.duc-story__card-line--10{gap:10px}
.duc-story__card-sub{font-size:9.5px;font-weight:500;color:#8C9099;margin-top:6px;line-height:1.4}
.duc-story__card-sub--warm{color:var(--warm-hover);opacity:.75;margin-top:4px}
.duc-story__card-mono{font-family:var(--font-mono);font-size:8.5px;font-weight:600;letter-spacing:.4px;color:#8C9099;margin-top:6px}
.duc-story__te{width:30px;height:30px;border-radius:9px;background:var(--blue-tint);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;flex:none}
.duc-story__check{width:17px;height:17px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center;flex:none}
.duc-story__user{flex:none}
.duc-story__toggle{width:34px;height:20px;border-radius:999px;background:var(--teal);flex:none;position:relative;display:block}
.duc-story__toggle-knob{position:absolute;right:2.5px;top:2.5px;width:15px;height:15px;border-radius:50%;background:var(--white)}
.duc-story__disc{width:56px;height:56px;border-radius:50%;background:var(--white);box-shadow:0 12px 28px rgba(24,44,84,.14);display:flex;align-items:center;justify-content:center}
.duc-story__disc-in{width:42px;height:42px;border-radius:50%;background:var(--teal-tint);color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}
.duc-story__canva{width:min(280px,100%);border-radius:12px;overflow:hidden;background:var(--white);box-shadow:0 14px 34px rgba(24,44,84,.16)}
.duc-story__canva img{width:100%;height:auto;display:block}

/* ── decor · desktop (WEB home v2 decoS layer) · may be adopted by the page ground's #duc-story-decor hook, so it carries its own box-sizing ── */
.duc-story__decor{position:absolute;inset:0;pointer-events:none;z-index:0}
.duc-story__decor,.duc-story__decor *{box-sizing:content-box}
.duc-story__decor.is-paused *{animation-play-state:paused}   /* invisible decor costs nothing — R-perf P2 */
.duc-story__map{position:absolute;opacity:.85}
.duc-story__map--desk{left:5%;top:24%;width:min(235px,14vw);height:auto}
.duc-story__win{position:absolute}
/* The desktop drift animates margin (layout) rather than transform on purpose: the disc below carries
   background-attachment:fixed, and under a transformed ancestor Chromium re-anchors that background to the
   element — the sky stops being the viewport sky and `cover` re-scales the whole photo into the 180px disc
   (measured: disc paint 18.9 KB → 28.1 KB). js/story.js pauses these animations while the decor is invisible
   (.is-paused), which is the rest of the page. — R-perf P2 */
.duc-story__win--a{left:max(calc(50% + 355px),calc(100% - 11.5vw - 7.5%));top:24%;width:min(180px,11.5vw,20vh);height:min(180px,11.5vw,20vh);animation:duc-story-winA 34s ease-in-out infinite alternate}
.duc-story__win--b{right:max(calc(50% + 345px),calc(100% - 11.5vw - 7%));top:66%;width:min(190px,11.5vw,22vh);height:min(190px,11.5vw,22vh);animation:duc-story-winB 40s ease-in-out infinite alternate}
.duc-story__win-ring{position:absolute;inset:-20px;border:1px solid rgba(18,22,27,.13);border-radius:50%}
.duc-story__win--b .duc-story__win-ring{inset:-15px}
.duc-story__tick{position:absolute;background:rgba(18,22,27,.20)}
.duc-story__tick--n{left:50%;top:-26px;width:1px;height:11px}
.duc-story__tick--s{left:50%;bottom:-26px;width:1px;height:11px}
.duc-story__tick--w{left:-26px;top:50%;width:11px;height:1px}
.duc-story__tick--e{right:-26px;top:50%;width:11px;height:1px}
.duc-story__star{position:absolute;line-height:normal}
.duc-story__star--a{left:-44px;top:-10px;font-size:22px;color:var(--ink);animation:duc-story-pulse 5s ease-in-out infinite}
.duc-story__star--b{right:-30px;bottom:6px;font-size:15px;color:var(--teal);animation:duc-story-pulse 7s ease-in-out infinite}
.duc-story__win-disc{position:absolute;inset:0;border-radius:50%;overflow:hidden;box-shadow:0 18px 44px rgba(24,44,84,.16);background-image:url("/assets/site/sky-clouds.jpg");background-image:image-set(url("/assets/site/sky-clouds.webp") type("image/webp"),url("/assets/site/sky-clouds.jpg") type("image/jpeg"));background-size:cover;background-position:center;background-attachment:fixed}
.duc-story__win--b .duc-story__win-disc{box-shadow:0 14px 34px rgba(24,44,84,.14)}
.duc-story__constellation{position:absolute;left:55%;top:-52%;width:min(120px,8vw)}
.duc-story__blob{position:absolute;height:auto}
.duc-story__blob--l{left:min(8.8%,max(1.5%,50% - 470px));top:50%;width:min(76px,5vw);transform:scaleX(-1) rotate(-4deg)}
.duc-story__blob--r{right:min(10.5%,max(1.5%,50% - 470px));top:70%;width:min(96px,6.5vw);transform:rotate(3deg)}
.duc-story__plan{position:absolute;left:max(calc(50% + 355px),calc(100% - 15% - 10vw));top:52%;width:min(150px,10vw);height:min(100px,14vh);border:1px dashed rgba(18,22,27,.14)}
.duc-story__plan-v{position:absolute;left:33%;top:0;bottom:0;width:1px;border-left:1px dashed rgba(18,22,27,.11)}
.duc-story__plan-h{position:absolute;left:0;right:0;top:55%;height:1px;border-top:1px dashed rgba(18,22,27,.11)}
.duc-story__plan-plus{position:absolute;font-size:10px;line-height:1;color:rgba(18,22,27,.32)}
.duc-story__plan-plus--tl{left:-4px;top:-4px}
.duc-story__plan-plus--br{right:-4px;bottom:-4px}
.duc-story__bird{position:absolute}
.duc-story__bird--1{left:27%;top:76%;opacity:.8}
.duc-story__bird--2{right:20%;top:70%;opacity:.65}

/* ── decor · mobile (WebHomeMobile hero panel) ── */
.duc-story__mwin{position:absolute}
.duc-story__mwin--a{right:-36px;top:196px;width:130px;height:130px;animation:duc-story-winA-m 34s ease-in-out infinite alternate}
.duc-story__mwin--b{left:-46px;bottom:118px;width:150px;height:150px;animation:duc-story-winB-m 40s ease-in-out infinite alternate}
.duc-story__mwin--a .duc-story__win-ring{inset:-14px}
.duc-story__mwin--b .duc-story__win-ring{inset:-12px}
.duc-story__mwin .duc-story__tick{background:rgba(18,22,27,.22)}
.duc-story__mwin .duc-story__tick--n{top:-20px;height:9px}
.duc-story__mwin .duc-story__tick--s{bottom:-20px;height:9px}
.duc-story__mwin .duc-story__tick--w{left:-20px;width:9px}
.duc-story__star--ma{left:-30px;top:-34px;font-size:20px;color:var(--ink);animation:duc-story-pulse 5s ease-in-out infinite}
.duc-story__mwin .duc-story__win-disc{background-attachment:scroll;background-image:url("/assets/site/sky-clouds.jpg");background-image:image-set(url("/assets/site/sky-clouds-600.webp") type("image/webp"),url("/assets/site/sky-clouds.jpg") type("image/jpeg"))}   /* 600w source for a 130-150px disc — P4 */
.duc-story__mwin--a .duc-story__win-disc{box-shadow:0 16px 38px rgba(24,44,84,.16)}
.duc-story__mwin--b .duc-story__win-disc{box-shadow:0 14px 34px rgba(24,44,84,.14)}
.duc-story__cross{position:absolute;right:22px;top:100px;width:18px;height:18px}
.duc-story__cross-v{position:absolute;left:50%;top:-6px;bottom:-6px;width:1px;background:rgba(18,22,27,.3)}
.duc-story__cross-h{position:absolute;top:50%;left:-6px;right:-6px;height:1px;background:rgba(18,22,27,.3)}
.duc-story__cross-o{position:absolute;inset:4px;border:1px solid rgba(18,22,27,.3);border-radius:50%}
.duc-story__map--mob{right:14px;top:47%;width:136px;height:auto}
.duc-story__star--mb{right:24px;top:56%;font-size:17px;color:var(--ink);animation:duc-story-pulse 6s ease-in-out infinite}
.duc-story__bird--m{right:16%;top:44%;opacity:.75}

/* mobile panel marks */
.duc-story__marks{position:absolute;inset:0;pointer-events:none;z-index:1}
.duc-story__mark{position:absolute;bottom:22px;white-space:nowrap;font-family:var(--font-mono);font-size:10px;font-weight:600}
.duc-story__mark--l{left:20px;letter-spacing:1.2px;color:var(--mono-2)}
.duc-story__mark--r{right:20px;letter-spacing:.8px;color:var(--mono-3)}
.duc-story__mark-n{color:var(--blue)}

/* ── ACT 3 · How it works (desktop: pinned) ── */
.duc-story__hiw{position:relative;height:580vh;z-index:1}
.duc-story__hiw-pin{position:sticky;top:0;height:100vh;overflow:hidden}
.duc-story__hiw-row{position:relative;width:var(--rail);max-width:1180px;height:100%;margin:0 auto;padding:108px 0 20px;box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;gap:56px}
.duc-story__hiw-left{width:340px;flex:none;position:relative;z-index:4;transform-origin:left center}
.duc-story__label{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:1.6px;color:var(--teal)}
.duc-story__h2{margin:12px 0 0;font-size:37px;font-weight:800;letter-spacing:-.025em;line-height:1.12;color:var(--ink)}
.duc-story__tabs{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.duc-story__tab{box-sizing:border-box;width:100%;display:flex;align-items:center;gap:14px;padding:13px 20px;border:0;border-bottom:1px solid rgba(18,22,27,.12);border-radius:0;background:transparent;cursor:pointer;text-align:left;transition:all .35s ease}
.duc-story__tab[aria-selected="true"]{background:var(--white);border-radius:999px;border-bottom-width:0;box-shadow:0 10px 26px rgba(24,44,84,.12)}
.duc-story__tab-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none;opacity:0;transition:opacity .3s}
.duc-story__tab[aria-selected="true"] .duc-story__tab-dot{opacity:1}
.duc-story__tab-n{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--mono-4);transition:color .3s}   /* idle: DC #9A947F was 2.6:1 — F1 */
.duc-story__tab[aria-selected="true"] .duc-story__tab-n{color:var(--teal)}
.duc-story__tab-label{font-size:17px;font-weight:600;color:var(--body3);flex:1;transition:color .3s}
.duc-story__tab[aria-selected="true"] .duc-story__tab-label{font-weight:800;color:var(--ink)}
.duc-story__descs{position:relative;height:150px;margin-top:24px}
.duc-story__desc{position:absolute;left:0;right:0;top:0;margin:16px 0;opacity:0;transform:translateY(10px);transition:opacity .4s ease .1s,transform .4s ease .1s}
.duc-story__desc span{font-size:15.5px;line-height:1.7;color:var(--body2)}
.duc-story[data-step="0"] [data-story-desc="0"],
.duc-story[data-step="1"] [data-story-desc="1"],
.duc-story[data-step="2"] [data-story-desc="2"],
.duc-story[data-step="3"] [data-story-desc="3"]{opacity:1;transform:translateY(0)}
.duc-story__foot{font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:1px;color:var(--mono-4);margin-top:8px}
.duc-story__hiw-railref{position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none}
.duc-story__hiw-col{flex:none;display:flex;justify-content:center;align-items:center;position:relative;z-index:3}
.duc-story__layer{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.duc-story[data-step="0"] [data-story-layer="0"],
.duc-story[data-step="1"] [data-story-layer="1"],
.duc-story[data-step="2"] [data-story-layer="2"],
.duc-story[data-step="3"] [data-story-layer="3"]{opacity:1;transform:translateY(0);pointer-events:auto}
.duc-story__hiw-spacer{width:200px;flex:none}
.duc-story__band{position:absolute;top:108px;bottom:20px;left:60%;right:-40px;z-index:5;opacity:0;transition:opacity .5s ease;pointer-events:none}
.duc-story[data-step="0"] [data-story-band="0"],
.duc-story[data-step="1"] [data-story-band="1"],
.duc-story[data-step="2"] [data-story-band="2"],
.duc-story[data-step="3"] [data-story-band="3"]{opacity:1}
.duc-story__band > *{position:absolute}
.duc-story__band-pill{animation:duc-story-float 7s ease-in-out infinite alternate}
.duc-story__band-item--f0a{left:0;top:14%}
.duc-story__band-item--f0b{right:0;top:36%;animation:duc-story-float 8.5s ease-in-out infinite alternate-reverse}
.duc-story__band-item--f0c{left:8%;top:72%;animation:duc-story-float 6.5s ease-in-out infinite alternate}
.duc-story__band-item--f1a{left:0;top:14%}
.duc-story__band-item--f1b{right:0;top:42%;animation:duc-story-float 8.8s ease-in-out infinite alternate;padding:13px 16px;width:180px}
.duc-story__band-item--f1c{left:4%;top:68%;animation:duc-story-float 6.8s ease-in-out infinite alternate-reverse;padding:13px 16px;width:170px}
.duc-story__band-item--f2a{left:0;top:14%}
.duc-story__band-item--f2b{right:0;top:40%;animation:duc-story-float 8.5s ease-in-out infinite alternate-reverse}
.duc-story__band-item--f2c{left:6%;top:70%;animation:duc-story-float 6.5s ease-in-out infinite alternate}
.duc-story__band-item--f3a{left:0;top:12%}
.duc-story__band-item--f3b{right:0;top:29%;animation:duc-story-float 8.4s ease-in-out infinite alternate-reverse;padding:13px 16px;width:196px}
.duc-story__band-item--f3c{left:2%;top:52%;animation:duc-story-float 7.6s ease-in-out infinite alternate;padding:13px 16px;width:188px}
.duc-story__band-item--f3d{right:0;top:74%;animation:duc-story-float 9s ease-in-out infinite alternate-reverse;padding:12px 16px;width:190px}

/* desktop hides the mobile-only nodes */
.duc-story__decor--mob,.duc-story__marks,.duc-story__rail,.duc-story__foot--mob{display:none}

/* ── mobile (<900px): hero rises over 320dvh, How it works = pill control + rail ── */
@media (max-width:899.98px){
  .duc-story__act{height:320vh;height:320svh}   /* stable track — F10 */
  .duc-story__pin{height:100vh;height:100dvh}
  .duc-story__decor--desk,.duc-story__ambient{display:none}
  .duc-story__decor--mob,.duc-story__marks{display:block}
  .duc-story__hero{padding:0}
  .duc-story__hero-in{padding:94px 24px 0;text-align:left;max-width:none;margin:0}
  .duc-story__h1{font-size:clamp(36px,11.2vw,44px)}
  .duc-story__sub{margin:16px 0 0;max-width:300px;font-size:16.5px;line-height:1.55}
  .duc-story__ctas{flex-direction:column;align-items:flex-start;gap:10px;margin-top:22px}
  .duc-story__cta--join{padding:0 26px}
  .duc-story__cta--how{min-height:48px;padding:0 22px;font-size:15.5px}
  .duc-story__play{width:11px;height:13px}
  .duc-story__gdpr{display:flex;margin-top:14px;font-size:10px;letter-spacing:1px}
  .duc-story__lock{width:11px;height:13px}
  .duc-phone--hero{box-shadow:var(--sh-phone)}
  .duc-story__phone-wrap{transform:translate(-50%,-50%) translateY(60vh) scale(.88)}

  .duc-story__hiw{height:auto;z-index:2;padding:76px 24px 12px;overflow-x:clip}   /* F8 */
  .duc-story__hiw-pin{position:static;height:auto;overflow:visible}
  .duc-story__hiw-row{display:block;width:auto;max-width:none;height:auto;margin:0;padding:0}
  .duc-story__hiw-left{width:auto;transform:none;margin:0}
  .duc-story__h2{margin:8px 0 0;font-size:25px;line-height:1.1}
  .duc-story__tabs{flex-direction:row;gap:4px;margin-top:14px;padding:4px;border-radius:999px;border:1px solid rgba(18,22,27,.14);background:rgba(255,255,255,.4)}
  .duc-story__tab{position:relative;width:auto;flex:1;min-height:40px;justify-content:center;gap:7px;padding:0 6px;border:0;border-radius:999px;transition:background .35s ease,box-shadow .35s ease}
  .duc-story__tab::before{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px} /* 48px touch target, visual stays 40 */
  .duc-story__tab[aria-selected="true"]{box-shadow:var(--sh-seg)}
  .duc-story__tab-dot{display:none}
  .duc-story__tab-n{font-size:11.5px}
  .duc-story__tab-label{font-size:15px;flex:none}
  .duc-story__descs{height:72px;margin-top:10px}
  .duc-story__desc{margin:0;transform:translateY(8px);pointer-events:none}
  .duc-story__desc span{font-size:14.5px;line-height:1.6}
  .duc-story__foot--desk,.duc-story__hiw-railref,.duc-story__hiw-col,.duc-story__hiw-spacer,.duc-story__band{display:none}

  .duc-story__rail{display:block;position:relative;overflow:hidden;margin:0 -24px;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
  .duc-story__track{display:flex;width:400%;transform:translateX(0);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
  .duc-story[data-step="1"] .duc-story__track{transform:translateX(-25%)}
  .duc-story[data-step="2"] .duc-story__track{transform:translateX(-50%)}
  .duc-story[data-step="3"] .duc-story__track{transform:translateX(-75%)}
  /* FOUNDER ITEM 1 (2026-09-12) — the board's 480px slide (dc/WebHomeMobile.dc.html :127) cut the rail phone 32px short:
     the phone is 10 + 684·.76 = 529.84 tall and the app's own bottom bar went with the cut. Worse, the rail's clip is 498,
     not 480, because the dots row sits inside the overflow:hidden box — so the board's 456→480 paper fade finished 18px
     ABOVE the cut and left a raw strip of capture hanging below its own shadow. The slide is now tall enough for the whole
     phone plus the visible extent of its shadow (529.84 + 22.8 = 552.64): every capture reads complete down to the app's
     tab bar, nothing is clipped, and the fade is gone with the cut it existed to hide. Phone drawn size unchanged. */
  .duc-story__slide{width:25%;flex:none;position:relative;height:554px}
  .duc-story__slide-in{position:absolute;inset:0;opacity:.5;transform:scale(.94);transform-origin:center top;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
  .duc-story[data-step="0"] [data-story-slide="0"],
  .duc-story[data-step="1"] [data-story-slide="1"],
  .duc-story[data-step="2"] [data-story-slide="2"],
  .duc-story[data-step="3"] [data-story-slide="3"]{opacity:1;transform:scale(1)}
  .duc-phone--rail{position:absolute;left:50%;top:10px;transform:translateX(-50%) scale(.76);transform-origin:top center}
  .duc-story__dots{display:flex;justify-content:center;gap:6px;padding:2px 0 10px}
  .duc-story__dot-btn{position:relative;width:6px;height:6px;padding:0;border:0;border-radius:3px;background:rgba(18,22,27,.18);cursor:pointer;transition:all .35s ease}
  .duc-story__dot-btn::before{content:"";position:absolute;left:-3px;right:-3px;top:-19px;bottom:-19px} /* 44px-tall pointer target, visual stays 6. The dots are aria-hidden spans (tap still jumps); the pill tabs above are the accessible 48px control (WCAG 2.5.8) — F1 */
  .duc-story__dot-btn.is-on{width:18px;background:var(--teal)}
  .duc-story__foot--mob{display:block;position:relative;z-index:1;padding:8px 24px 0;margin:0;text-align:center;line-height:1.6}
}

/* ── reduced motion: static hero, phone below the copy, How it works = control + one phone (click to switch), no drifts ── */
@media (prefers-reduced-motion:reduce){
  .duc-story *,.duc-story__decor,.duc-story__decor *{animation:none!important;transition:none!important} /* the desktop decor may live in the page ground (#duc-story-decor) */
  .duc-story__act{height:auto}
  /* Q3 (2026-09-12) — overflow-x stays clipped. This block un-pins the act, so the pin's own
     `overflow:hidden` (L45) has to go with it: with height:auto a hidden box would cut the decor that
     legitimately hangs below. But dropping it on BOTH axes un-clipped the mobile hero decor, and
     `.duc-story__mwin--a` is right:-36px with a -14px ring, so at a 390 phone the document laid out
     441px wide (ring right edge 440) and the fixed header went with it — the 44px menu button parked
     at x=377, its right edge 31px off the screen. Same at 360 (410) and 320 (370). overflow-x:clip
     (not hidden) keeps the y axis visible and makes no scroll container, so nothing the visitor needs
     is hidden and no choreography comes back: the decor is cut at the viewport edge in reduced motion
     exactly as `overflow:hidden` already cuts it in full motion. */
  .duc-story__pin{position:relative;height:auto;overflow:visible;overflow-x:clip;padding-bottom:48px}
  .duc-story__hero{position:relative;transform:none!important;opacity:1!important;pointer-events:auto!important}
  .duc-story__ambient,.duc-story__band{display:none}
  .duc-story__phone-wrap{position:relative;left:auto;top:auto;transform:none!important;margin:28px auto 0;width:332px;height:calc(684px * .8)}
  .duc-story__phone-wrap .duc-phone{transform:scale(.8);transform-origin:top left}
  .duc-story__hiw{height:auto}
  .duc-story__hiw-pin{position:relative;height:auto;overflow:visible}
  .duc-story__hiw-row{height:auto;align-items:flex-start;padding:108px 0 60px}
  .duc-story__hiw-left{transform:none!important;margin:0!important}
  .duc-story__hiw-col{display:block;width:332px!important;height:calc(684px * .8);transform:none!important}
  .duc-phone--hiw{transform:scale(.8);transform-origin:top left}
  .duc-story__marks{position:absolute}
  @media (max-width:899.98px){
    .duc-story__pin{padding-bottom:0}
    .duc-story__hero-in{padding-bottom:0}
    .duc-story__phone-wrap{margin:22px auto 0;width:332px;height:calc(684px * .76)}
    .duc-story__phone-wrap .duc-phone{transform:scale(.76)}
    .duc-story__marks{display:none}
    .duc-story__hiw-col{display:none}
  }
}