/* =========================================================================
   Yellowdesk v3 — the storyline under the trust row. Only /v3 loads this file.

     .say      the problem, one statement that comes into focus word by word on scroll
     .cost     what waiting really costs, with a short video
     .story    four chapters, pinned while you scroll through them (desktop). Each
               chapter is a photo with app-style cards floating over it, and its text.
               Below 1000px the chapters simply stack.
     .voices   a carousel of quotes, auto-advancing, with arrows, dots, swipe, keys

   Motion is v3's one gesture: blurred, transparent and 12px low, coming into focus in
   place on expo.out, line after line (see assets/v3-tour.css).
   ========================================================================= */
.say,.story,.cost,.voices{--st-ease:cubic-bezier(.19,1,.22,1)}

/* ---------- 1. the statement ----------
   Large, centred and balanced. Words start as a faint blur and come into focus in ink
   as the paragraph scrolls up through the screen (--k per word, 0 -> 1, set by
   assets/v3-story.js). The three phrases that carry the argument get a soft gold marker
   stroke that draws in as their last word lands (--m per phrase). */
/* it sits between the logos and the story on its own, with even space either side */
/* above the story, so the words handed over to its heading pass in front of it */
.say{position:relative;z-index:2;padding:clamp(56px,8vw,120px) 0 clamp(64px,9vw,136px)}
/* a statement, not a heading: a narrow block centred on the page, its lines set left */
.say__text{max-width:18.5em;margin:0 auto;text-align:left;font-size:clamp(1.6rem,3.1vw,2.7rem);line-height:1.42;font-weight:300;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
/* the opening sentences carry the claim: the same size and measure, just heavier */
.say__text strong{font-weight:600}
.say__text p+p{margin-top:.85em}
.say__text em{font-style:normal;font-weight:300;
  background:linear-gradient(transparent 64%,rgba(239,200,139,.7) 64%,rgba(239,200,139,.7) 88%,transparent 88%) no-repeat 0 0/calc(var(--m,0) * 100%) 100%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.say__text .w{display:inline-block;opacity:calc((.12 + .88 * var(--k,1)) * var(--fo,1));filter:blur(calc((1 - var(--k,1)) * 7px));
  transform-origin:0 0;
  transform:translate(var(--fx,0px),var(--fy,0px)) scale(var(--fs,1)) translateY(calc((1 - var(--k,1)) * .18em))}
.say__text:not(.is-split) .w{--k:1}

/* ---------- 2. the pinned story ---------- */
.story{position:relative;background:var(--paper);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.story__track{position:relative}
.story__pin{position:sticky;top:64px;height:calc(100vh - 64px);height:calc(100svh - 64px);min-height:640px;max-height:900px;display:flex;align-items:center}
.story__steps{position:absolute;inset:0;display:flex;flex-direction:column;pointer-events:none}
.story__steps i{flex:1}
/* the managed scroll, at every width: a stretch of scrolling per chapter while the pin holds */
/* about 40% of a screen of scrolling per chapter: quick to get through, long enough to read */
.story__track{height:calc(5 * 40vh + 100vh)}
.story__steps{top:0;bottom:100vh}
.story__in{width:100%}
.story__grid{width:100%;margin-top:clamp(28px,4vh,48px);display:grid;grid-template-columns:minmax(170px,.8fr) minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
/* every chapter's visual and text share the same two cells; only the current one shows */
.story__ch{display:contents}
.story__vis{grid-column:2;grid-row:1}
.story__txt{grid-column:3;grid-row:1}
.story__nav{grid-column:1;grid-row:1;align-self:center}

/* one line on desktop, sized off the viewport, never capped */
.story__h{font-size:clamp(1.5rem,2.3vw,2.2rem);line-height:1.1;letter-spacing:-.02em}
.story__h em{font-style:normal;background:linear-gradient(transparent 64%,rgba(239,200,139,.7) 64%,rgba(239,200,139,.7) 88%,transparent 88%) no-repeat 0 0/calc(var(--m,1) * 100%) 100%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.story__h .hw{display:inline-block;opacity:var(--ho,1)}
.story__menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.story__mi{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:13px 0;text-align:left;font-size:15px;font-weight:500;color:var(--muted-text);
  border-top:1px solid var(--border);transition:color .3s ease}
.story__menu li:last-child .story__mi{border-bottom:1px solid var(--border)}
.story__mi:hover{color:var(--ink)}
.story__mi.is-on{color:var(--ink)}
/* the chapter's progress, as a short bar that fills with the scroll */
.story__mbar{flex:none;position:relative;width:28px;height:3px;background:var(--border);overflow:hidden}
.story__mbar span{position:absolute;inset:0;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.story__mi.is-done .story__mbar span{transform:none;opacity:.35}
.story__cta{margin-top:32px}

/* the visual: product screens on a stage. The stage is a warm panel with a fine dot
   grid (a canvas, not a photo); the main screen sits on it, a second card floats over
   its edge. Everything is drawn in the app's own idiom. */
.story__vis{position:relative;aspect-ratio:4/4.1;max-height:min(560px,calc(100vh - 250px));justify-self:center;width:100%}
.story__stage{position:absolute;inset:0;overflow:hidden;
  background:radial-gradient(circle at 1px 1px,rgba(176,74,40,.16) 1px,transparent 1.4px) 0 0/18px 18px,
             radial-gradient(120% 90% at 20% 0%,#fbf3ea 0%,#f1e6da 55%,#ead9c8 100%)}
.story__stage::after{content:"";position:absolute;inset:0;background:url(v3/hero-noise.jpg) 50% 50%/cover;mix-blend-mode:multiply;opacity:.12}
/* chapter change: the outgoing chapter leaves quickly, the incoming one comes into focus */
.story__vis,.story__txt{opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.story__ch.is-on .story__vis,.story__ch.is-on .story__txt{opacity:1;visibility:visible;transition:opacity .2s ease,visibility 0s}
.story__stage{clip-path:inset(4% 4% 4% 4%);transition:clip-path 1s var(--st-ease)}
.story__ch.is-on .story__stage{clip-path:inset(0)}
.story__txt>*,.sc,.pc{opacity:0;filter:blur(8px);transform:translateY(12px);
  transition:opacity .6s ease,filter .7s ease,transform .9s var(--st-ease)}
.story__ch.is-on .story__txt>*,.story__ch.is-on .sc,.story__ch.is-on .pc{opacity:1;filter:none;transform:none}
.story__ch.is-on .story__txt>:nth-child(1){transition-delay:.10s}
.story__ch.is-on .story__txt>:nth-child(2){transition-delay:.17s}
.story__ch.is-on .story__txt>:nth-child(3){transition-delay:.24s}
.story__ch.is-on .story__txt>:nth-child(4){transition-delay:.31s}
.story__ch.is-on .story__txt>:nth-child(5){transition-delay:.38s}
.story__ch.is-on .sc,.story__ch.is-on .pc{transition-delay:calc(var(--d,0)*160ms + .25s)}
/* rows inside a screen land one by one after the screen itself */
.pc__row,.pc__alert{opacity:0;transform:translateY(7px);transition:opacity .46s ease,transform .46s ease}
.story__ch.is-on .pc__row,.story__ch.is-on .pc__alert{opacity:1;transform:none;transition-delay:calc(var(--r,0)*60ms + .5s)}

.story__n{display:block;font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--accent-deep)}
.story__t{margin-top:12px;font-size:clamp(1.45rem,2.1vw,1.95rem);line-height:1.12;letter-spacing:-.02em}
.story__k{margin-top:12px;font-size:17px;line-height:1.45;font-weight:500;color:var(--ink)}
.story__p{margin-top:10px;font-size:16px;line-height:1.55;color:var(--muted-text)}
/* what does it, in the product: small tags with an arrow lead */
.story__feat{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.story__feat li{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;border:1px solid #e3d8cc;background:#fff;font-size:13px;font-weight:500;color:var(--ink)}
.story__feat li::before{content:"";width:6px;height:6px;background:var(--accent);flex:none}
.story__li{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.story__li li{position:relative;padding-left:26px;font-size:15px;line-height:1.4}
.story__li li::before{content:"";position:absolute;left:2px;top:4px;width:12px;height:7px;border-left:1.8px solid var(--accent-deep);border-bottom:1.8px solid var(--accent-deep);transform:rotate(-45deg)}

/* ---- the product screens ---- */
.pc{position:absolute;z-index:1;left:7%;right:12%;top:9%;background:#fff;border:1px solid #e5e5e5;padding:14px 16px 12px;
  box-shadow:0 30px 60px -36px rgba(60,20,5,.45);font-size:12.5px;color:var(--ink)}
.pc__bar{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:10px;margin-bottom:4px;border-bottom:1px solid #e5e5e5}
.pc__h{flex:none;white-space:nowrap;font-size:14px;font-weight:600;letter-spacing:-.01em}
.pc__q{min-width:0;font-size:11.5px;color:#6e6e6e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc__row{display:grid;grid-template-columns:1.55fr 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid #eee}
.pc__row>*{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc__row b{font-weight:500}
.pc__row span{color:#b04a28}
.pc__row--head{opacity:1!important;transform:none!important;padding:6px 0;font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.pc__row--head span{color:#6e6e6e}
.pc__src{justify-self:end;padding:2px 6px;border:1px solid #e5e5e5;font-size:10.5px;color:#6e6e6e!important}
.pc__src--own{border-color:var(--accent-soft);background:rgba(239,200,139,.25);color:var(--ink)!important}
.pc__big{margin-top:4px;font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1.05;color:var(--accent-deep)}
.pc__t{margin-top:6px;font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.pc__t--sm{font-size:13.5px}
.pc__gnum{margin-top:12px;font-size:46px;font-weight:600;letter-spacing:-.03em;line-height:1}
.pc__gauge,.pc__track{position:relative;display:grid;grid-template-columns:repeat(4,1fr)}
.pc__gauge{height:10px;margin-top:10px}
.pc__gauge .z1,.pc__track .z1{background:#c9c9c9}.pc__gauge .z2,.pc__track .z2{background:#efc88b}
.pc__gauge .z3,.pc__track .z3{background:#e09a5f}.pc__gauge .z4,.pc__track .z4{background:#cf5c36}
.pc__gauge i,.pc__track i{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:#000;left:calc(var(--v)*1%)}
.pc__brk{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px;margin-top:12px}
.pc__brk span{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #eee;color:#6e6e6e;font-size:11.5px}
.pc__brk b{color:#000;font-weight:600}
.pc__score{display:flex;align-items:center;gap:10px;margin-top:6px}
.pc__score b{font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1}
.pc__band{padding:2px 7px;background:#b04a28;color:#fff;font-size:11px;font-weight:600}
.pc__fac{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.pc__fac span{position:relative;padding-left:14px;font-size:11.5px;color:#3a3a3a}
.pc__fac span::before{content:"";position:absolute;left:0;top:5px;width:7px;height:7px;background:var(--accent)}
.pc__grp{margin-top:10px;padding-bottom:4px;border-bottom:1px solid #000;font-size:11.5px;font-weight:600}
.pc__person{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 6px;margin:0 -6px;border-bottom:1px solid #eee}
.pc__person b{display:block;font-weight:500;font-size:12.5px}
.pc__person span{font-size:11.5px;color:#6e6e6e}
.pc__person--on{background:rgba(239,200,139,.28)}
.pc__btn{flex:none;padding:3px 8px;border:1px solid #000;font-size:11px;font-weight:500;color:#000!important}
.pc__btn--done{display:inline-flex;align-items:center;gap:4px;border-color:#1f7a4c;color:#1f7a4c!important}
.pc__btn svg,.pc__ok svg{width:11px;height:11px}
.pc__contact{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid #eee;font-size:12px}
.pc__contact>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc__ok{flex:none;display:inline-flex;align-items:center;gap:4px;color:#1f7a4c;font-size:11px;font-weight:600}
.pc__file{display:flex;gap:10px;align-items:center;padding:10px 0}
.pc__file b{display:block;font-weight:500}
.pc__file span{font-size:11.5px;color:#6e6e6e}
.pc__doc{width:30px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid #e5e5e5;background:#fafafa;font-size:10px;font-weight:600;color:var(--accent-deep)!important}
.pc__pct{justify-self:end;font-weight:600;color:var(--accent-deep)!important}
.pc__cta{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:6px 10px;background:#b04a28;color:#fff;font-size:12px;font-weight:500}
.pc__cta .arrow{width:13px;height:13px}
.pc__alert{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid #eee}
.pc__alert b{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc__sel{padding:2px 8px;border:1px solid #e5e5e5;font-size:11px}
.pc__new{font-weight:600;color:var(--accent-deep);min-width:26px;text-align:right}
.pc__mail b{display:block;font-weight:500;font-size:12px}
.pc__mail span{font-size:11px;color:#6e6e6e}
.pc__bell{flex:none;width:26px;height:26px;background:var(--accent-deep);position:relative}
.pc__bell::after{content:"";position:absolute;left:7px;top:7px;width:10px;height:8px;border:1.5px solid #fff;border-bottom:none;border-radius:5px 5px 0 0;box-shadow:0 2px 0 -.5px #fff}
.pc__team{display:flex;margin-top:8px}
.pc__team span{width:28px;height:28px;display:flex;align-items:center;justify-content:center;margin-right:-6px;border:2px solid #fff;border-radius:50%;background:#efc88b;font-size:10px;font-weight:600}
.pc__team span:nth-child(2){background:#e09a5f}.pc__team span:nth-child(3){background:#d8cfc4}
.pc__team .pc__more{background:#161311;color:#fff}
.pc__pool{height:6px;margin-top:12px;background:#eee}
.pc__pool span{display:block;height:100%;background:var(--accent)}

.pc__row--4{grid-template-columns:1fr auto 74px}
.pc__mini{display:inline-flex;align-items:center;gap:6px;justify-self:end}
.pc__mini b{font-weight:600;color:#000;font-size:11.5px;min-width:16px;text-align:right}
.pc__mini .pc__track{width:42px;height:4px}
.pc__mini .pc__track i{top:-3px;bottom:-3px}
.pc__alert .pc__mini{justify-self:end}
.pc__co{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid #eee;
  opacity:0;transform:translateY(7px);transition:opacity .46s ease,transform .46s ease}
.story__ch.is-on .pc__co{opacity:1;transform:none;transition-delay:calc(var(--r,0)*60ms + .5s)}
.pc__co b{display:block;font-weight:500}
.pc__co span{font-size:11px;color:#6e6e6e}
.pc__logo{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:1px solid #e5e5e5;background:#fafafa;font-size:11px;font-weight:600;color:#7c7c7c!important}
.pc__new--tag{padding:2px 7px;background:rgba(239,200,139,.45);color:#000!important;font-size:11px!important;font-weight:600}
.pc__quiet{font-size:11px}
.pc__live{display:flex;align-items:center;gap:7px}
.pc__dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(207,92,54,.5);animation:pcPing 1.8s ease-out infinite}
@keyframes pcPing{0%{box-shadow:0 0 0 0 rgba(207,92,54,.55)}100%{box-shadow:0 0 0 9px rgba(207,92,54,0)}}
.pc--mail{padding-top:12px}
.pc__mhead{display:flex;gap:10px;align-items:center;padding-bottom:10px;margin-bottom:2px;border-bottom:1px solid #e5e5e5}
.pc__mhead b{display:block;font-weight:600;font-size:12.5px}
.pc__mhead span{font-size:11px;color:#6e6e6e}
.pc__cta--ghost{background:transparent;color:#b04a28;border:1px solid #b04a28;padding:5px 10px}
.pc__crm{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pc__crm img{height:20px;width:auto}

/* ---- the floating cards: the app's idiom ---- */
.sc{position:absolute;z-index:2;background:#fff;border:1px solid var(--border);padding:14px 16px;
  box-shadow:0 24px 50px -24px rgba(40,15,5,.45);font-size:13px;color:var(--ink);max-width:300px}
.sc--a{left:-36px;top:9%}
.sc--b{z-index:2;right:-26px;bottom:7%;width:250px}
/* once in place they breathe, at different speeds, so the pair never moves in step */
@keyframes scFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
/* the page keeps moving while you scroll: within a chapter (--cp, 0 to 1, set by
   assets/v3-story.js) the screen drifts up, the floating card the other way and faster,
   the dot grid slower still, so each layer rides the scroll at its own depth. This uses
   the translate property, separate from the transform the reveal animates. */
.story__ch .pc{translate:0 calc((.5 - var(--cp,.5)) * 44px)}
.story__ch .sc--b{translate:0 calc((.5 - var(--cp,.5)) * 90px)}
.story__ch .story__txt{translate:0 calc((.5 - var(--cp,.5)) * 22px)}
.story__ch .story__stage{background-position:0 calc((.5 - var(--cp,.5)) * 30px),0 0}
.sc__cap{font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#6e6e6e}
.sc__t{margin-top:6px;font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.sc__t--sm{margin-top:0;font-size:13.5px}
.sc__s{margin-top:3px;font-size:12.5px;color:#6e6e6e}
.sc__p{margin-top:6px;font-size:13px;line-height:1.45}
.sc__stack{display:flex;margin-top:10px}
.sc__stack span{width:28px;height:28px;display:flex;align-items:center;justify-content:center;margin-right:-6px;border:2px solid #fff;
  background:#f0ece6;font-size:11px;font-weight:600;color:#6e6e6e}
.sc__stack .sc__more{background:var(--accent-deep);color:#fff}
.sc__file{display:flex;gap:10px;align-items:center;margin-top:8px}
.sc__doc{width:34px;height:42px;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);background:#fafafa;font-size:10px;font-weight:600;color:var(--accent-deep)}
.sc__row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--border);font-size:13px}
.sc__row:first-of-type{margin-top:8px}
.sc__row b{font-weight:500}
.sc__pct{font-weight:600;color:var(--accent-deep)}
.sc__alert{display:flex;gap:12px;align-items:flex-start}
.sc__bell{flex:none;width:30px;height:30px;background:var(--accent-deep);position:relative}
.sc__bell::after{content:"";position:absolute;left:9px;top:8px;width:12px;height:10px;border:1.6px solid #fff;border-bottom:none;border-radius:6px 6px 0 0;box-shadow:0 2px 0 -0.5px #fff}
.sc__lead{display:grid;grid-template-columns:1fr auto;column-gap:10px;padding:8px 0;border-top:1px solid var(--border)}
.sc__lead:first-of-type{margin-top:8px}
.sc__lead b{font-weight:500;font-size:13px}
.sc__lead span{grid-column:1;font-size:12px;color:#6e6e6e}
.sc__lead .sc__diff{grid-column:2;grid-row:1/3;align-self:center;font-size:15px;font-weight:600;color:var(--ink)}

/* ---- below 1000px: the same pinned story, in one column ----
   Heading, a row of four progress bars (the chapter menu), the visual, the text. Every
   chapter's visual and text share the same two grid cells, as on desktop. */
@media (max-width:1000px){
  .story__pin{min-height:0;max-height:none;align-items:flex-start;padding:22px 0 16px}
  .story__h{font-size:clamp(1.35rem,5.2vw,2rem);line-height:1.15}
  .story__grid{margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;gap:18px;align-items:start}
  .story__nav{grid-column:1;grid-row:1}
  .story__vis{grid-column:1;grid-row:2;aspect-ratio:auto;height:clamp(170px,33svh,330px);max-height:none;width:calc(100% - 24px);margin:0 auto}
  .story__txt{grid-column:1;grid-row:3}
  .story__cta{display:none}
  .story__menu{flex-direction:row;gap:6px}
  .story__menu li{flex:1}
  .story__mi{padding:0;border:none!important;height:14px}
  .story__mi>span:not(.story__mbar){display:none}
  .story__mbar{width:100%}
  .story__n{font-size:12px}
  .story__t{margin-top:6px;font-size:clamp(1.15rem,4.6vw,1.6rem)}
  .story__p{margin-top:10px;font-size:14.5px;line-height:1.5}
  .story__li{margin-top:14px;gap:7px}
  .story__li li{font-size:14px}
  .sc{padding:10px 12px;font-size:12px;max-width:200px}
  .sc--b{right:-10px;bottom:6%;width:180px}
  .pc{left:4%;right:9%;top:6%;padding:10px 12px 8px;font-size:11.5px}
  .pc__row{padding:5px 0}.pc__person{padding:5px 6px}.pc__alert{padding:6px 0}
  .pc__gnum{font-size:34px;margin-top:6px}.pc__big{font-size:26px}
  .pc__brk span:nth-child(n+4){display:none}
  .pc__alert:nth-child(n+5),.pc__co:nth-child(n+5){display:none}
  .story__k{margin-top:8px;font-size:15px}
  .story__feat{margin-top:12px;gap:6px}
  .story__feat li{height:26px;font-size:12px;padding:0 9px}
}
/* tablets: visual and text side by side under the bars */
@media (min-width:681px) and (max-width:1000px){
  .story__pin{align-items:center}
  .story__grid{grid-template-columns:1fr 1fr;column-gap:32px;align-items:center}
  .story__nav{grid-column:1/-1}
  .story__vis{grid-column:1;grid-row:2;height:clamp(260px,46svh,460px)}
  .story__txt{grid-column:2;grid-row:2}
}
/* short phones: the bullets give way so the chapter still fits the screen */
/* phones: the panel is sized by its screen instead of the screen floating in a fixed
   panel, so nothing can hang over the text below. Each screen keeps its first rows; the
   floating second card is left out (the text says it). */
@media (max-width:680px){
  .story__vis{height:auto;aspect-ratio:auto;max-height:none;width:100%;padding:14px 14px 16px}
  .pc{position:relative;left:auto;right:auto;top:auto;margin-right:8%}
  .pc>:nth-child(n+6){display:none}
  .sc--b{display:none}
  /* a gentler drift on a phone, so the screen never leaves its panel */
  .story__ch .pc{translate:0 calc((.5 - var(--cp,.5)) * 12px)}
  .story__ch .story__txt{translate:none}
  /* one line per row, so every chapter's screen is about the same height */
  .pc__co div span,.pc__mhead span,.pc__file span{display:none}
}
/* shorter phone screens (most phones once the browser's own bars are counted): a
   screen keeps fewer rows and the text tightens, so the chapter still fits */
@media (max-width:680px) and (max-height:820px){
  .story__pin{padding-top:16px}
  .story__grid{margin-top:12px;gap:14px}
  .pc>:nth-child(n+5){display:none}
  .story__p{font-size:13.5px;line-height:1.45}
  .story__feat{margin-top:10px}
}
@media (max-width:680px) and (max-height:700px){
  .story__p{display:none}
}

/* ---------- 3. the cost of waiting ----------
   A dark band, the one place the page goes to ink: the argument, a short video, the
   claim and the call to action. It comes into focus once, when it arrives (.is-in). */
.cost{background:#161311;color:#fff;padding:clamp(88px,11vw,150px) 0 clamp(80px,10vw,130px)}
.cost__eyebrow{display:block;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-soft)}
.cost__h{margin-top:16px;font-size:clamp(1.9rem,3.3vw,2.9rem);line-height:1.06;letter-spacing:-.025em;color:#fff}
.cost__lead{margin-top:18px;max-width:40em;font-size:clamp(1.05rem,1.4vw,1.22rem);line-height:1.55;color:rgba(255,255,255,.66)}
/* text left, the video beside it: a modest frame, not a screen-filler */
.cost__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6vw,96px);align-items:center}
.cost__in .cost__video{margin-top:0}
.cost__in .vid__play{width:72px;height:72px;margin:-36px 0 0 -36px}
.cost__in .vid__play svg{width:24px;height:24px}
.cost__in .vid__cap b{font-size:clamp(.95rem,1.2vw,1.1rem)}
@media (max-width:900px){ .cost__in{grid-template-columns:1fr} }
/* the video: a wide frame on the dark band, poster under a warm shade, a large play key */
.cost__video{margin-top:clamp(40px,5vw,64px)}
.vid{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000;text-align:left;color:#fff;cursor:pointer}
.vid__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%;transform:scale(1.04);transition:transform 1.4s var(--st-ease),filter .6s ease}
.vid__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,19,17,.15),rgba(22,19,17,.25) 45%,rgba(22,19,17,.85))}
.vid__play{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--accent-deep);color:#fff;box-shadow:0 0 0 0 rgba(207,92,54,.5);transition:transform .4s var(--st-ease),background-color .2s ease}
.vid__play svg{width:30px;height:30px;margin-left:4px}
.vid:hover .vid__poster{transform:scale(1.07)}
.vid__poster--grain{display:block;background:#b9542f url(v3/hero-noise.jpg) 50% 50%/cover}
.vid__poster--grain svg{position:absolute;left:clamp(20px,3vw,36px);top:clamp(20px,3vw,32px);width:clamp(28px,3vw,40px);height:auto;color:#fff;fill:#fff;opacity:.9}
.vid:hover .vid__play{transform:scale(1.06);background:#963e20}
.cost.is-in .vid__play{animation:vidPulse 2.6s ease-out 1.2s 2}
@keyframes vidPulse{0%{box-shadow:0 0 0 0 rgba(207,92,54,.55)}100%{box-shadow:0 0 0 26px rgba(207,92,54,0)}}
.vid__cap{position:absolute;left:clamp(20px,3vw,36px);right:clamp(20px,3vw,36px);bottom:clamp(18px,3vw,32px);display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.vid__cap b{font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:500;letter-spacing:-.01em}
.vid__cap span{flex:none;white-space:nowrap;font-size:13px;color:rgba(255,255,255,.7)}
.vid__cap span:only-child{margin-left:auto}   /* a duration with no title stays bottom-right */
.vid__soon{position:absolute;left:50%;top:calc(50% + 64px);transform:translateX(-50%);padding:6px 12px;background:rgba(0,0,0,.6);font-size:13px;white-space:nowrap;
  opacity:0;transition:opacity .3s ease}
.vid.is-soon .vid__soon{opacity:1}
.vid:focus-visible{outline:2px solid var(--accent-soft);outline-offset:4px}

/* the cinema (v3-story.js): a real video opens in a dark full-screen dialog. The dialog
   itself is the dark, so it can fade; the screen rises into it. When the video ends,
   an overlay offers the way on: back to the page, or a demo. The screen takes the video's
   own shape (--ar, from data-video-ratio): the feature videos are narrower than 16:9. */
.cine{--pad:clamp(16px,4vw,56px);position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:var(--pad);border:0;
  display:flex;align-items:center;justify-content:center;background:rgba(12,10,9,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;
  opacity:0;transition:opacity .38s ease;overscroll-behavior:contain;touch-action:none}
.cine:not([open]){display:none}
.cine::backdrop{background:transparent}
.cine.is-open{opacity:1}
.cine__stage{--ar:16/9;position:relative;width:min(100%,calc((100dvh - 2 * var(--pad)) * var(--ar)),1600px);aspect-ratio:var(--ar);background:#000;
  box-shadow:0 50px 140px -30px rgba(0,0,0,.9);transform:translateY(18px) scale(.975);transition:transform .6s cubic-bezier(.19,1,.22,1)}
.cine.is-open .cine__stage{transform:none}
.cine__v{display:block;width:100%;height:100%;background:#000}
.cine__v:focus{outline:none}
.cine__v::cue{font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;background:rgba(12,10,9,.78);color:#fff}
.cine__x{position:fixed;top:14px;right:14px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.8);transition:color .2s ease,background-color .2s ease}
.cine__x:hover{color:#fff;background:rgba(255,255,255,.1)}
.cine__x svg{width:24px;height:24px}
.cine__x:focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px}
.cine__end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,28px);padding:20px;text-align:center;
  background:rgba(22,19,17,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
.cine.is-ended .cine__end{opacity:1;visibility:visible;transition:opacity .5s ease}
.cine__h{max-width:22em;font-size:clamp(1.15rem,2.6vw,2.2rem);font-weight:600;line-height:1.15;letter-spacing:-.02em;
  opacity:0;transform:translateY(7px);transition:opacity .46s ease,transform .46s ease}
.cine__act{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;opacity:0;transform:translateY(7px);transition:opacity .46s ease .09s,transform .46s ease .09s}
.cine.is-ended .cine__h,.cine.is-ended .cine__act{opacity:1;transform:none}
@media (max-width:640px){
  .cine__act .btn{height:42px;padding:0 16px;font-size:14px}
}
.cost__video{opacity:0;filter:blur(8px);transform:translateY(16px);transition:opacity .8s ease .25s,filter .9s ease .25s,transform 1.1s var(--st-ease) .25s}
.cost.is-in .cost__video{opacity:1;filter:none;transform:none}

.cost__close{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-top:clamp(56px,7vw,88px);padding-top:32px;border-top:1px solid rgba(255,255,255,.16)}
.cost__claim{font-size:clamp(1.2rem,1.9vw,1.6rem);line-height:1.3;font-weight:500;letter-spacing:-.015em;max-width:30em}
.cost__act{display:flex;align-items:center;gap:20px;flex:none}
.cost__price{font-size:14px;color:rgba(255,255,255,.6)}

/* the band comes into focus once, when it arrives */
.cost__head>*,.cost__close{opacity:0;filter:blur(8px);transform:translateY(12px);
  transition:opacity .7s ease,filter .8s ease,transform 1s var(--st-ease)}
.cost.is-in .cost__head>*,.cost.is-in .cost__close{opacity:1;filter:none;transform:none}
.cost.is-in .cost__head>:nth-child(2){transition-delay:.08s}
.cost.is-in .cost__head>:nth-child(3){transition-delay:.16s}
.cost.is-in .cost__close{transition-delay:.5s}

@media (max-width:900px){
  .cost__close{flex-direction:column;align-items:flex-start}
  .vid__play{width:64px;height:64px;margin:-32px 0 0 -32px;top:42%}
  .vid__play svg{width:22px;height:22px}
  .vid__cap{flex-direction:row;align-items:baseline;bottom:14px}
  .vid__cap b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .vid__soon{top:calc(42% + 44px)}
}

/* ---------- 4. voices ---------- */
.voices{padding:clamp(48px,6vw,80px) 0 clamp(48px,6vw,80px);overflow:hidden}
.voices__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.voices__h{font-size:clamp(1.8rem,3.2vw,2.6rem);letter-spacing:-.02em}
.voices__ctl{display:flex;gap:8px}
.voices__arrow{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);transition:background-color .2s ease,border-color .2s ease}
.voices__arrow:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.voices__arrow svg{width:18px;height:18px}
.voices__viewport{margin-top:40px;padding-left:max(var(--pad),calc((100vw - var(--maxw)) / 2 + var(--pad)));cursor:grab;touch-action:pan-y}
.voices__viewport.is-drag{cursor:grabbing}
.voices__track{list-style:none;margin:0;padding:0;display:flex;gap:20px;transition:transform .8s var(--st-ease);will-change:transform}
.voices__viewport.is-drag .voices__track{transition:none}
/* a testimonial is a portrait with the quote laid into it: the photo fills the card, a
   warm shade rises from the bottom, and the words sit on the shade. The current card is
   lit; the ones either side wait, dimmed, at the edges. */
.vc{position:relative;flex:none;width:min(440px,80vw);aspect-ratio:4/5;overflow:hidden;background:#161311;color:#fff;user-select:none;
  opacity:.4;transform:scale(.94);transform-origin:50% 100%;transition:opacity .6s ease,transform .8s var(--st-ease)}
.vc.is-on{opacity:1;transform:none}
.vc__fig{position:absolute;inset:0;margin:0}
.vc__fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.6s var(--st-ease),filter .6s ease;filter:saturate(.9)}
.vc.is-on .vc__fig img{transform:none;filter:none}
.vc__fig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,19,17,0) 30%,rgba(22,19,17,.55) 58%,rgba(22,19,17,.92) 100%)}
.vc__body{position:absolute;left:0;right:0;bottom:0;padding:28px 28px 26px}
.vc__q{margin:0;font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.45;letter-spacing:-.01em;font-weight:500;color:#fff}
.vc.is-on .vc__q{animation:vcIn .9s var(--st-ease) both .1s}
@keyframes vcIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.vc__by{display:flex;flex-direction:column;gap:2px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.22)}
.vc__by b{font-size:15px}
.vc__by span{font-size:13px;color:rgba(255,255,255,.72)}
.voices__dots{display:flex;gap:8px;margin-top:28px}
.voices__dot{position:relative;width:44px;height:3px;background:var(--border);overflow:hidden}
.voices__dot span{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
.voices__dot.is-on span{animation:vcProg var(--vc-dur,7000ms) linear forwards}
.voices__dot.is-done span{transform:none;opacity:.35}
.voices.is-paused .voices__dot.is-on span{animation-play-state:paused}
@keyframes vcProg{to{transform:scaleX(1)}}

/* ---------- phones: the video replaces the product tour, and the black video band goes ---------- */
.mvid{display:none}
@media (max-width:680px){
  .mvid{display:block}
  .mvid__eyebrow{display:block;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep)}
  .mvid__h{margin:8px 0 16px;font-size:clamp(1.25rem,5.4vw,1.5rem);line-height:1.2;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
  .mvid__p{margin-top:12px;font-size:14.5px;line-height:1.5;color:var(--muted-text)}
  .mvid .vid__play{width:64px;height:64px;margin:-32px 0 0 -32px;top:42%}
  .mvid .vid__play svg{width:22px;height:22px}
  .mvid .vid__cap{bottom:14px}
  .mvid .vid__cap b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .demo-sec .pdemo{display:none!important}
  .cost{display:none}
}