/* C16 paid opening, route 3 "Ten stages to a finished brand" (Claude, 16 Oct 2026).
   Scope: cold paid pages whose opening carries data-r8-hero-option="stages". Organic pages are untouched.
   Motion: transforms and opacity only. Pause motion (html.motion-paused) pauses it; reduced motion shows the end frame. */

/* ---------- Layout: copy left, art right, aligned to the header grid ---------- */
.phase3.story-revision.r7-page #opening.pb8-opening[data-r8-hero-option="stages"]{display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:44px;align-items:center!important;width:min(1180px,calc(100% - 48px));max-width:none!important;margin-inline:auto!important;padding:28px 0 60px!important;min-height:0!important;box-sizing:border-box}
@media (min-width:1000px){.phase3.story-revision.r7-page #opening.pb8-opening[data-r8-hero-option="stages"] h1{font-size:clamp(50px,4.75vw,68px)!important;line-height:1!important;max-width:none!important}}
.phase3.story-revision.r7-page #opening.pb8-opening[data-r8-hero-option="stages"] .pb8-hero-figure{position:relative;display:block;width:100%;margin:0!important}
.phase3.story-revision.r7-page #opening.pb8-opening[data-r8-hero-option="stages"] .pb8-hero-art.pb8-hero-art--stages{position:relative;width:100%;max-width:100%;aspect-ratio:1.2;overflow:visible;background:none;border-radius:0;isolation:isolate;container-type:size;-webkit-tap-highlight-color:transparent}
.pbs-cap{display:flex;align-items:center;gap:8px;margin:14px 0 0!important;font-size:12px!important;line-height:1.3!important;color:#5b6168!important;letter-spacing:.01em;transition:opacity .6s ease}
.pbs-cap::before{content:"";width:6px;height:6px;border-radius:50%;background:#9aa0a7;flex:none}
@media (max-width:999px){
 .phase3.story-revision.r7-page #opening.pb8-opening[data-r8-hero-option="stages"]{display:block!important;width:calc(100% - 48px);padding:28px 0 44px!important}
 .phase3.story-revision.r7-page #opening.pb8-opening[data-r8-hero-option="stages"] > .pb8-hero-media{max-width:720px;margin:34px auto 0!important}
 .phase3.story-revision.r7-page #opening.pb8-opening[data-r8-hero-option="stages"] .pb8-hero-art.pb8-hero-art--stages{aspect-ratio:1.28}
}
@media (max-width:760px){
 .phase3.story-revision.r7-page #opening.pb8-opening[data-r8-hero-option="stages"] > .pb8-hero-media{margin:36px 0 0!important}
 .phase3.story-revision.r7-page #opening.pb8-opening[data-r8-hero-option="stages"] .pb8-hero-art.pb8-hero-art--stages{aspect-ratio:.82}
}

/* ---------- Organic page (C16 R8 opening): align the copy to the header grid at every desktop width ---------- */
.phase3.story-revision.r7-page #opening.pb8-opening[data-r8-hero-context="organic"]{width:min(1180px,calc(100% - 48px));max-width:none!important;padding:44px 0!important;margin-inline:auto!important;gap:48px}
@media (max-width:999px){.phase3.story-revision.r7-page #opening.pb8-opening[data-r8-hero-context="organic"]{width:calc(100% - 48px);padding:32px 0 44px!important}}
@media (max-width:760px){.phase3.story-revision.r7-page #opening.pb8-opening[data-r8-hero-context="organic"]{padding:24px 0 36px!important}}

/* ---------- Stage and devices (native pixel size, scaled to the art by --pbs-ds) ---------- */
.pbs-stage{position:absolute;inset:0}
.pbs-dev{position:absolute;left:0;top:0;z-index:2;transform-origin:0 0;transform:translate(calc(var(--lx,0)*1cqw),calc(var(--ly,0)*1cqh)) scale(var(--pbs-ds,.4))}
.pbs-laptop{--frac:.66;--lx:0;--ly:13;--pbs-ds:.39;width:1068px}
.pbs-phone{--frac:.56;--lx:0;--ly:2;--pbs-ds:.7;width:272px;display:none}
@media (max-width:999px){.pbs-laptop{--frac:.62;--lx:1;--ly:12;--pbs-ds:.42}}
@media (max-width:760px){.pbs-laptop{display:none}.pbs-phone{display:block}}
.pbs-lid{position:relative;padding:22px 22px 26px;background:linear-gradient(180deg,#2c2f35,#17191d 55%,#111215);border-radius:34px 34px 12px 12px;box-shadow:0 0 0 2px #0a0b0d,inset 0 0 0 2px #3c4047,0 70px 120px -60px rgba(16,18,22,.62)}
.pbs-lid::before{content:"";position:absolute;top:8px;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#30343b;box-shadow:inset 0 0 0 2px #1b1d21}
.pbs-screen{position:relative;width:1024px;height:640px;overflow:hidden;border-radius:6px;background:#f3f4f5}
.pbs-base{position:relative;width:1196px;height:36px;margin-left:-64px;background:linear-gradient(180deg,#f0f1f3 0%,#d2d5da 40%,#a8acb3 100%);border-radius:3px 3px 40px 40px/3px 3px 100% 100%;box-shadow:0 46px 60px -34px rgba(16,18,22,.55),inset 0 2px 0 #fff}
.pbs-base::before{content:"";position:absolute;left:50%;top:0;width:150px;height:13px;margin-left:-75px;background:linear-gradient(180deg,#b2b6bc,#dadde1);border-radius:0 0 16px 16px}
.pbs-phone .iphone-18-pro{--phone-size:272px;width:272px!important;margin:0!important}
.phase3.story-revision.r7-page #opening.pb8-opening[data-r8-hero-option="stages"] .pbs-stage img{display:block;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:cover;object-position:center;border-radius:0;pointer-events:none;user-select:none;-webkit-user-drag:none}
.phase3.story-revision.r7-page #opening.pb8-opening[data-r8-hero-option="stages"] .pbs-stage img.pbs-logo{width:auto;height:34px;object-fit:contain;mix-blend-mode:multiply}

/* ---------- Screen views: the stage list, then the Launch Book ---------- */
.pbs-app,.pbs-m{position:absolute;inset:0;color:#171a20;font-family:"Mona Sans",Mona,Arial,sans-serif;transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.pbs-app{display:flex;flex-direction:column;background:linear-gradient(115deg,#fbfbfb,#eef0f3 70%,#e3e7eb)}
.pbs-bar{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 40px;border-bottom:1px solid #d9dde2;background:rgba(255,255,255,.55);flex:none}
.pbs-bar span,.pbs-mh span{font-size:22px;color:#30343a}
.pbs-body{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;padding:46px 56px 0}
.pbs-kick{margin:0 0 14px!important;font-size:14px!important;line-height:1.2!important;letter-spacing:.14em;text-transform:uppercase;color:#59616b!important}
.pbs-title{margin:0!important;font:550 50px/1.02 "Mona Sans",Mona,Arial,sans-serif!important;letter-spacing:-.055em!important;color:#171a20!important;max-width:none!important}
.pbs-list{list-style:none;margin:0;padding:0}
.pbs-list li{display:grid;grid-template-columns:44px 1fr 30px;align-items:center;min-height:47px;border-top:1px solid #cdd2d8;font-size:19px;line-height:1.2;letter-spacing:-.02em;transition:background .35s ease}
.pbs-list li b{font-weight:500}
.pbs-list li em{font-style:normal;color:#69717c;font-size:15px;margin-left:8px}
.pbs-list li span{font-variant-numeric:tabular-nums;color:#69717c;font-size:15px}
.pbs-tk{width:24px;height:24px;border-radius:50%;background:#dce0e5;display:grid;place-items:center;justify-self:end;transition:background .3s ease}
.pbs-tk svg{width:19px;height:19px;opacity:0;transform:scale(.6);transition:opacity .2s ease,transform .4s cubic-bezier(.2,1.4,.3,1)}
.pbs-tk path{fill:none;stroke:#306d58;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.pbs-list li.is-t .pbs-tk{background:#d7ebe2}
.pbs-list li.is-t .pbs-tk svg{opacity:1;transform:none}
.pbs-list li.is-a{background:linear-gradient(90deg,rgba(23,26,32,.06),transparent)}
.pbs-book{padding:30px 48px 0}
.pbs-book-title{margin:0!important;font:550 42px/1.05 "Mona Sans",Mona,Arial,sans-serif!important;letter-spacing:-.045em!important;color:#171a20!important}
.pbs-book-sub{margin:8px 0 22px!important;font-size:17px!important;line-height:1.3!important;color:#59616b!important}
.pbs-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.pbs-tiles li{min-width:0}
.pbs-th{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:6px;background:#fff;box-shadow:0 0 0 1px rgba(18,20,24,.08),0 10px 18px -12px rgba(18,20,24,.45)}
.pbs-route{display:flex;align-items:flex-end;width:100%;height:100%;padding:12px;box-sizing:border-box;background:linear-gradient(135deg,#f6f6f7,#e2e5e9)}
.pbs-route b{font:550 21px/1.05 "Mona Sans",Mona,Arial,sans-serif;letter-spacing:-.04em;color:#171a20}
.pbs-tl{display:block;margin-top:8px;font-size:13px;line-height:1.2;color:#30343a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbs-tl i{font-style:normal;color:#7a818b;margin-right:6px;font-variant-numeric:tabular-nums}
.pbs-book-foot{margin:18px 0 0!important;padding-top:12px;border-top:1px solid #d4d8dd;font-size:15px!important;line-height:1.3!important;color:#59616b!important}
/* phone views */
.pbs-m{padding:10px 14px 14px;background:#f5f6f7;box-sizing:border-box}
.pbs-mh{display:flex;justify-content:space-between;align-items:center;padding:1px 0 10px;border-bottom:1px solid #d8dce1;margin-bottom:11px}
.phase3.story-revision.r7-page #opening.pb8-opening[data-r8-hero-option="stages"] .pbs-mh img.pbs-logo{height:31px}
.pbs-mh span{font-size:18px}
.pbs-m .pbs-kick{font-size:9px!important;margin:0 0 6px!important}
.pbs-m .pbs-title{font-size:24px!important;margin:0 0 12px!important}
.pbs-m .pbs-list li{grid-template-columns:24px 1fr 20px;min-height:31px;font-size:13px}
.pbs-m .pbs-list li em{display:none}
.pbs-m .pbs-list li span{font-size:10px}
.pbs-m .pbs-tk{width:16px;height:16px}.pbs-m .pbs-tk svg{width:13px;height:13px}
.pbs-m .pbs-book-title{font-size:18px!important}
.pbs-m .pbs-book-sub{font-size:9px!important;margin:4px 0 11px!important}
.pbs-m .pbs-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px 6px}
.pbs-m .pbs-th{border-radius:4px}
.pbs-m .pbs-route{padding:6px}.pbs-m .pbs-route b{font-size:10px}
.pbs-m .pbs-tl{margin-top:4px;font-size:8px}
.pbs-m .pbs-tl i{margin-right:3px}
.pbs-m .pbs-book-foot{margin-top:11px!important;padding-top:7px;font-size:9px!important}
.pbs-view-book{opacity:0;transform:scale(1.02)}

/* ---------- Stage cards: dealt out of the screen into a fan, gathered, then poured back in ---------- */
.pbs-card{position:absolute;left:0;top:0;width:calc(var(--w,28)*1cqw);aspect-ratio:4/3;overflow:hidden;background:#fff;border-radius:7px;box-shadow:0 0 0 1px rgba(18,20,24,.07),0 26px 46px -26px rgba(18,20,24,.6),0 4px 12px rgba(18,20,24,.07);z-index:calc(10 + var(--i));opacity:var(--o,0);transform:translate(calc(var(--cx)*1cqw - 50%),calc(var(--cy)*1cqh - 50%)) rotate(var(--r,0deg)) scale(var(--sc,.3));transform-origin:50% 120%;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .45s ease;pointer-events:none}
.pbs-card{--cx:33;--cy:38}
.pbs-card.is-d{--o:1;--sc:1;--cx:calc(68 + (var(--i) - 4.5) * 3.56);--cy:calc(52 + (var(--i) - 4.5) * (var(--i) - 4.5) * .553);--r:calc((var(--i) - 4.5) * 5.78deg)}
.pbs-gather .pbs-card.is-d{--cx:calc(58 + var(--i) * .45);--cy:calc(45 - var(--i) * .36);--r:calc((var(--i) - 4.5) * 1.07deg);--sc:.9}
.pbs-pour .pbs-card.is-d{--cx:33;--cy:38;--r:0deg;--sc:.24;--o:0;transition:transform .72s cubic-bezier(.55,0,.25,1) calc(var(--i) * 45ms),opacity .4s ease calc(.26s + var(--i) * 45ms)}
@media (max-width:999px){.pbs-card{--cx:32;--cy:36}.pbs-pour .pbs-card.is-d{--cx:32;--cy:36}}
@media (max-width:760px){
 .pbs-card{--w:42;--cx:28;--cy:52}
 .pbs-card.is-d{--cx:calc(63 + (var(--i) - 4.5) * 2.58);--cy:calc(58 + (var(--i) - 4.5) * (var(--i) - 4.5) * .395);--r:calc((var(--i) - 4.5) * 4.89deg)}
 .pbs-gather .pbs-card.is-d{--cx:calc(60 + var(--i) * .45);--cy:calc(52 - var(--i) * .315)}
 .pbs-pour .pbs-card.is-d{--cx:28;--cy:52}
}

/* ---------- Product films: the finished brand, rotating ---------- */
.pbs-product{position:absolute;z-index:30;left:64%;top:18%;width:31%;aspect-ratio:9/16;overflow:hidden;border-radius:14px;background:#e9eaec;box-shadow:0 0 0 1px rgba(18,20,24,.08),0 40px 70px -34px rgba(16,18,22,.62),0 6px 16px rgba(18,20,24,.08);opacity:0;transform:translateY(5%) scale(.96);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1);cursor:pointer}
.pbs-film{position:absolute;inset:0;opacity:0;transition:opacity .55s ease}
.pbs-film.is-on{opacity:1;z-index:1}
.phase3.story-revision.r7-page #opening.pb8-opening[data-r8-hero-option="stages"] .pbs-film img,.pbs-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;border-radius:0}
.pbs-film video{opacity:0;transition:opacity .35s ease;background:transparent}
.pbs-film.is-playing video{opacity:1}
.pbs-dots{position:absolute;z-index:31;left:79.5%;top:86.6%;display:flex;gap:6px;transform:translateX(-50%);opacity:0;transition:opacity .6s ease}
.pbs-dots i{display:block;width:6px;height:6px;border-radius:3px;background:rgba(20,22,26,.24);cursor:pointer;transition:width .3s ease,background .3s ease}
.pbs-dots i.is-on{width:18px;background:#14161a}
@media (max-width:999px){.pbs-product{left:66%;top:15%;width:30%}.pbs-dots{left:81%;top:85%}}
@media (max-width:760px){.pbs-product{left:54%;top:24%;width:44%;border-radius:12px}.pbs-dots{left:76%;top:90.2%}}

/* ---------- States ---------- */
/* End frame (reduced motion, no JS after 2.4s, or after the sequence) */
.pbs-done .pbs-view-list,.pbs-booked .pbs-view-list{opacity:0}
.pbs-done .pbs-view-book,.pbs-booked .pbs-view-book{opacity:1;transform:none}
.pbs-done .pbs-product,.pbs-product-on .pbs-product{opacity:1;transform:none}
.pbs-done .pbs-dots,.pbs-product-on .pbs-dots{opacity:1}
.pbs-js:not(.pbs-cap-on) ~ .pbs-cap{opacity:0}
/* No script: show the finished frame after a beat */
.pb8-hero-art--stages:not(.pbs-js) .pbs-view-list{animation:pbs-out .6s ease 2.4s both}
.pb8-hero-art--stages:not(.pbs-js) .pbs-view-book,.pb8-hero-art--stages:not(.pbs-js) .pbs-product,.pb8-hero-art--stages:not(.pbs-js) .pbs-dots{animation:pbs-in .7s ease 2.4s both}
@keyframes pbs-in{to{opacity:1;transform:none}}
@keyframes pbs-out{to{opacity:0}}
html.motion-paused .pb8-hero-art--stages,html.motion-paused .pb8-hero-art--stages *{animation-play-state:paused!important}
@supports not (width:1cqw){.pbs-card{display:none}}
@media (prefers-reduced-motion:reduce){
 .pb8-hero-art--stages *,.pb8-hero-art--stages{transition:none!important;animation:none!important}
 .pb8-hero-art--stages .pbs-view-list,.pb8-hero-art--stages .pbs-card{opacity:0!important}
 .pb8-hero-art--stages .pbs-view-book,.pb8-hero-art--stages .pbs-product,.pb8-hero-art--stages .pbs-dots,.pb8-hero-art--stages ~ .pbs-cap{opacity:1!important;transform:none!important}
 .pb8-hero-art--stages .pbs-dev{opacity:1!important}
}

/* ---------- Trial pages: the signup form inside the offer card (Andy approved 13:15, 16 Oct) ---------- */
.p3-price-card .pbacq-signup{margin:22px 0 0;max-width:none;width:100%;text-align:left;grid-column:auto}
.p3-price-card .pbacq-signup .form__field{display:grid;gap:7px;margin:0 0 14px}
.p3-price-card .pbacq-signup label{font-size:14px;line-height:1.3;font-weight:500;color:#2f3338}
.p3-price-card .pbacq-signup input{width:100%;box-sizing:border-box;height:50px;padding:0 16px;border:1px solid rgba(20,22,26,.16);border-radius:14px;background:rgba(255,255,255,.92);font-size:16px;color:#14161a;box-shadow:inset 0 1px 2px rgba(20,22,26,.04)}
.p3-price-card .pbacq-signup input:focus{outline:2px solid #14161a;outline-offset:2px;border-color:transparent}
.p3-price-card .pbacq-signup .cf-turnstile{margin:0;min-height:0}
.p3-price-card .pbacq-signup .p3-button{width:100%;margin:8px 0 0;justify-content:space-between}
.p3-price-card .pbacq-signup [data-pbacq-status]:empty{display:none}
#pbacq-card{scroll-margin-top:96px}
@media (max-width:760px){#pbacq-card{scroll-margin-top:84px}}