/* The Process page (redesign 2026-11-12, Daniel: "the layout is bad, animations are awful ... missing anything unique").
   House parts reused as they are on Home, Cost and Travel: the navy header band with Home's DIO orange cut-corner frame (Travel's
   tv-head scale), Home's navy week panel (home-week.css .wk5), Home's scroll-filled orange spine (timeline-icons.js / .css), the green
   step and tick discs (#BACE61, Cost's step list), mineral grey (#f5f7f7) boxes, weight 600 / -0.035em headings.
   The page's own piece is the week stage: on wide screens the five steps read down the left while one framed screen on the right
   holds still and changes to each step's real clip as you reach it; on phones each step shows its clip under its heading.
   Motion: everything moves with the reader's scroll (spine, chapter bar, chair-time bar), plus a short cross-fade when the stage
   changes clip. Reduced motion (system, site switch, UserWay): no fades, clips keep their posters, fills show their place at once. */

.pr-page{--pr-col:min(1280px,calc(100% - 96px));--pr-cut:52px;--pr-green:#BACE61;--pr-orange-soft:#f4a165}
.pr-wrap{width:var(--pr-col);margin-inline:auto}
@media(max-width:900px){.pr-page{--pr-col:calc(100% - 48px)}}
@media(max-width:600px){.pr-page{--pr-col:calc(100% - 40px)}}

/* ---------- Header: navy band, text left, laptop clip in the orange frame ---------- */
section.pr-head{color:#fff;padding:56px 0 60px}
.pr-head-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);gap:clamp(32px,5vw,80px);align-items:center}
.pr-head-copy{min-width:0}
.pr-head .eyebrow{color:var(--pr-orange-soft);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px}
.pr-head h1{margin:0;font-size:clamp(44px,5vw,64px);line-height:1.02;color:#fff;letter-spacing:-.035em}
.pr-head h1 span{color:var(--pr-orange-soft)}
.pr-lead{margin:22px 0 0;max-width:470px;font-size:19px;line-height:1.55;color:#e6edf1}
.pr-head .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:30px}
.pr-head .hero-actions .text-link{margin:0;color:#fff;gap:14px}
.pr-head-media{margin:0;min-width:0}
.pr-frame{--cut:var(--pr-cut);position:relative;margin:13px}
.pr-frame::before{content:'';position:absolute;inset:-13px;background:#ed873c;clip-path:polygon(calc(var(--cut) + 7px) 0,100% 0,100% calc(100% - var(--cut) - 7px),calc(100% - var(--cut) - 7px) 100%,0 100%,0 calc(var(--cut) + 7px));pointer-events:none}
.pr-frame::after{content:'';position:absolute;inset:-11px;background:#22374a;clip-path:polygon(calc(var(--cut) + 6px) 0,100% 0,100% calc(100% - var(--cut) - 6px),calc(100% - var(--cut) - 6px) 100%,0 100%,0 calc(var(--cut) + 6px));pointer-events:none}
.pr-frame-photo{position:relative;z-index:1;aspect-ratio:16/10;background:#ed873c;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.pr-frame-photo>video{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);object-fit:cover;object-position:62% 50%;background:#1b3140;--ic:calc(var(--cut) - 1.7574px);clip-path:polygon(var(--ic) 0,100% 0,100% calc(100% - var(--ic)),calc(100% - var(--ic)) 100%,0 100%,0 var(--ic))}
.pr-head-media figcaption{margin:14px 13px 0;font-size:13px;color:#cfdbe2;text-align:right}

/* ---------- Why a week: the story, with its closing line in a mineral box ---------- */
.pr-story{padding:clamp(56px,7vw,96px) 0 clamp(40px,5vw,64px)}
.pr-story-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,96px);align-items:end}
.pr-story h2{margin:14px 0 22px;font-size:clamp(32px,3.4vw,46px);color:var(--ink);text-wrap:balance}
.pr-story-copy>p:not(.label){font-size:19px;line-height:1.65;color:var(--muted);max-width:640px}
.pr-story-line{margin:0;padding:30px 32px 32px;background:var(--mineral);border-left:4px solid var(--orange);font-size:clamp(21px,1.9vw,25px);line-height:1.38;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.pr-story-line span{display:block;margin-top:10px;color:var(--steel)}
.pr-story-line,.pr-story-line span,.pr-chair-lead{text-wrap:balance}
.pr-page p{text-wrap:pretty}

/* ---------- The week: Home's navy panel ---------- */
.pr-week{width:min(1280px,calc(100% - 32px));margin:8px auto 0;border-radius:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 22px 44px -24px rgba(16,32,42,.45);color:#fff}
.pr-week-in{width:calc(100% - 2 * clamp(20px,4vw,56px));margin-inline:auto;padding-block:clamp(44px,5.5vw,80px) clamp(36px,4.5vw,64px)}
.pr-week-head h2{margin:0;max-width:900px;font-size:clamp(32px,3.6vw,50px);line-height:1.1;color:#fff;text-wrap:balance}
.pr-week-head h2 span{display:block;margin-top:6px;color:var(--pr-orange-soft)}
.pr-week-head p{margin:18px 0 0;font-size:19px;color:#dce6ec}

.pr-week .pr-label{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--pr-orange-soft);line-height:1.4}
.pr-week .pr-label--quiet{color:#bed0dc}

/* Step list, phones and no-script first: spine on the left, each step's clip under its heading */
.pr-steps{--timeline-gutter:52px;position:relative;margin-top:clamp(36px,5vw,64px)}
.pr-steps.icon-timeline::before{background:radial-gradient(circle,rgba(220,230,236,.45) 1.2px,transparent 1.5px) center top/3px 9px repeat-y}
.pr-bar{display:none}
.pr-step{position:relative;display:flex;flex-direction:column;padding:0 0 56px 68px}
.pr-step:last-of-type{padding-bottom:8px}
.pr-copy{display:contents}
.pr-copy>*{order:4}
.pr-copy>.pr-label{order:1}
.pr-copy>.pr-anchor{order:0;scroll-margin-top:16px}
.pr-copy>h3{order:2}
.pr-shot{order:3}
.pr-disc{position:absolute;left:0;top:-6px;width:52px;height:52px;border-radius:50%;background:#fff;color:#2f4453;z-index:1;transition:box-shadow .3s var(--ease)}
.pr-disc>svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pr-step.is-reached .pr-disc{box-shadow:0 0 0 3px #ed873c}
.pr-step h3{margin:0 0 16px;font-size:clamp(28px,2.6vw,36px);line-height:1.12;color:#fff;text-wrap:balance}
.pr-step p{font-size:17px;line-height:1.62;color:#dce6ec;margin:0 0 14px;max-width:560px}
.pr-step .pr-kicker{font-size:19px;line-height:1.5;color:#fff;font-weight:500}
.pr-step .pr-aside{font-size:16px;color:#c9d6dd;padding-left:14px;border-left:2px solid rgba(244,161,101,.7)}
.pr-step a:not(.text-link){color:#fff;text-underline-offset:4px;white-space:nowrap}
.pr-step .text-link{color:#fff;margin-top:6px;align-self:flex-start;gap:14px}
.pr-shot{margin:2px 0 22px;min-width:0}
.pr-screen{--cut:30px;position:relative;aspect-ratio:16/10;background:#1b3140;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.pr-screen>video,.pr-screen>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
[data-step="3"] .pr-screen>img{object-position:50% 56%}
[data-step="4"] .pr-screen>video{object-position:45% 50%}
.pr-chip{display:flex;align-items:baseline;gap:10px;margin-top:10px;font-size:13px;letter-spacing:.02em;color:#bed0dc}
.pr-chip b{font-weight:700;color:var(--pr-orange-soft);letter-spacing:.08em}

/* The fittings: the three things you shape, green step discs, and the approval tick */
.pr-rounds-box{margin:10px 0 18px;padding:24px 24px 20px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);max-width:560px}
.pr-rounds{list-style:none;margin:6px 0 0;padding:0;position:relative}
.pr-rounds::before{content:'';position:absolute;left:15px;top:18px;bottom:30px;width:2px;background:rgba(186,206,97,.35)}
.pr-rounds li{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:16px;padding:10px 0}
.pr-num{position:relative;width:32px;height:32px;border-radius:50%;background:var(--pr-green);color:#203846;display:grid;place-items:center;font-size:15px;font-weight:700}
.pr-rounds .pr-when{margin:4px 0 2px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#bed0dc}
.pr-rounds h4{margin:0 0 4px;font-size:19px;font-weight:600;letter-spacing:-.02em;color:#fff}
.pr-rounds li p:last-child{margin:0;font-size:16px;line-height:1.55}
.pr-approve{display:flex!important;align-items:center;gap:14px;margin:14px 0 0!important;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);color:#fff!important;font-weight:600}
.pr-tick{flex:none;width:32px;height:32px;border-radius:50%;background:var(--pr-green);display:grid;place-items:center}
.pr-tick svg{width:18px;height:18px;fill:none;stroke:#203846;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* Time in the chair: drawn to scale, fills with the scroll */
.pr-chair{margin-top:clamp(36px,5vw,64px);padding-top:clamp(28px,3.5vw,40px);border-top:1px solid rgba(255,255,255,.16);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px clamp(28px,5vw,72px);align-items:center}
.pr-chair>.pr-label{grid-column:1/-1;margin:0}
.pr-chair-lead{margin:0;font-size:clamp(20px,1.8vw,24px);line-height:1.4;font-weight:600;letter-spacing:-.015em;color:#fff}
.pr-scale{--fill:1;min-width:0}
.pr-scale-bar{display:grid;grid-template-columns:2fr 2fr 2fr;height:22px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.pr-scale-bar i{display:block;transform-origin:left center;transform:scaleX(clamp(0,calc(var(--fill) * 3 - var(--k)),1))}
.pr-s{--k:0;background:#ed873c}
.pr-r{--k:1;background:#7f9cad}
.pr-u{--k:2;background:linear-gradient(90deg,#7f9cad,rgba(127,156,173,.12))}
.pr-scale-keys{display:flex;justify-content:space-between;gap:16px;margin-top:12px;font-size:15px;color:#dce6ec}
.pr-scale-keys b{color:#fff;font-weight:700}
.pr-scale-keys span:last-child{text-align:right}
.pr-scale-note{margin:6px 0 0;font-size:13px;color:#a9bcc7;text-align:right}

/* ---------- A patient's words beside the study ---------- */
.pr-proof{padding:clamp(48px,6vw,88px) 0 clamp(24px,3vw,40px)}
.pr-proof-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
@media(min-width:1000px){.pr-proof-quote{position:sticky;top:calc(var(--head,82px) + 56px);padding-top:24px}}
.pr-proof-quote .rv-quote{margin:0}
.pr-proof-chart>*{margin:0!important;max-width:none!important}
.pr-proof:not(:has(.rv-quote)) .pr-proof-in{grid-template-columns:minmax(0,640px);justify-content:center}

/* ---------- The digital design, now its own section after the week ---------- */
.pr-page .design-section{margin:clamp(32px,4vw,56px) 0 0}

/* ---------- Wide screens: the stage ---------- */
@media(min-width:1000px){
 .pr-steps.is-staged{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,4.5vw,72px);align-items:start}
 .is-staged .pr-step{display:contents}
 .is-staged .pr-copy{display:block;grid-column:1;position:relative;padding:4px 0 0 76px;min-height:max(56vh,420px)}
 .is-staged .pr-anchor{scroll-margin-top:28px}
 .is-staged .pr-step:last-of-type .pr-copy{min-height:min(62vh,520px)}
 .is-staged .pr-step:nth-of-type(1) .pr-copy{grid-row:1}.is-staged .pr-step:nth-of-type(2) .pr-copy{grid-row:2}.is-staged .pr-step:nth-of-type(3) .pr-copy{grid-row:3}.is-staged .pr-step:nth-of-type(4) .pr-copy{grid-row:4}.is-staged .pr-step:nth-of-type(5) .pr-copy{grid-row:5}
 .is-staged .pr-disc{top:-6px;width:56px;height:56px}
 .is-staged .pr-bar{pointer-events:auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;grid-column:2;grid-row:1/span 5;align-self:start;position:sticky;top:calc(var(--head,82px) + 28px);z-index:2}
 .pr-bar a{display:block;padding:0 0 10px;text-decoration:none;color:#a9bcc7;font-size:13px;font-weight:600;letter-spacing:.01em;min-height:40px}
 .pr-bar a:hover,.pr-bar a:focus-visible{color:#fff}
 .pr-bar a[aria-current]{color:#fff}
 .pr-bar i{display:block;height:3px;background:rgba(255,255,255,.18);margin-bottom:9px;overflow:hidden}
 .pr-bar b{display:block;height:100%;background:#ed873c;transform-origin:left center;transform:scaleX(var(--p,0))}
 .is-staged .pr-shot{grid-column:2;grid-row:1/span 5;align-self:start;position:sticky;top:calc(var(--head,82px) + 92px);margin:64px 0 0;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s linear .45s}
 .is-staged .pr-shot.is-on{opacity:1;visibility:visible;transition:opacity .45s var(--ease),visibility 0s}
 .is-staged .pr-screen{--cut:var(--pr-cut)}
 .is-staged .pr-shot .pr-chip{font-size:14px}
 .is-staged .pr-rounds-box{max-width:none}
}
@media(min-width:1000px) and (max-height:760px){.is-staged .pr-shot{top:calc(var(--head,82px) + 80px)}.is-staged .pr-screen{aspect-ratio:16/9}}

/* ---------- Narrow screens ---------- */
@media(max-width:999px){
 .pr-head-in{grid-template-columns:1fr;gap:36px}
 .pr-head-media{max-width:640px}
 .pr-story-in{grid-template-columns:1fr;align-items:start}
 .pr-chair{grid-template-columns:1fr}
 .pr-proof-in{grid-template-columns:1fr}
}
@media(max-width:700px){
 .pr-page{--pr-cut:30px}
 section.pr-head{padding:32px 0 40px}
 .pr-head h1{font-size:46px}
 .pr-lead{font-size:17px;margin-top:18px}
 .pr-head .hero-actions{margin-top:24px;gap:6px 24px}
 .pr-frame{margin:9px}
 .pr-frame::before{inset:-9px;clip-path:polygon(calc(var(--cut) + 5px) 0,100% 0,100% calc(100% - var(--cut) - 5px),calc(100% - var(--cut) - 5px) 100%,0 100%,0 calc(var(--cut) + 5px))}
 .pr-frame::after{inset:-7px;clip-path:polygon(calc(var(--cut) + 4px) 0,100% 0,100% calc(100% - var(--cut) - 4px),calc(100% - var(--cut) - 4px) 100%,0 100%,0 calc(var(--cut) + 4px))}
 .pr-frame-photo>video{inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);--ic:calc(var(--cut) - 1.1716px)}
 .pr-head-media figcaption{text-align:left;margin:12px 9px 0;font-size:12px}
 .pr-story h2{font-size:31px}
 .pr-story-copy>p:not(.label){font-size:17px}
 .pr-story-line{padding:22px 22px 24px;font-size:20px}
 .pr-week{width:calc(100% - 16px)}
 .pr-week-in{width:calc(100% - 40px)}
 .pr-week-head h2{font-size:30px}
 .pr-week-head p{font-size:17px}
 .pr-steps{--timeline-gutter:40px}
 .pr-step{padding:0 0 44px 54px}
 .pr-disc{width:40px;height:40px;top:-2px}
 .pr-step h3{font-size:27px}
 .pr-step p{font-size:16.5px}
 .pr-step .pr-kicker{font-size:18px}
 .pr-screen{--cut:22px;aspect-ratio:16/10}
 .pr-rounds-box{padding:18px 0 4px;background:none;box-shadow:none;border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}
 .pr-rounds li{grid-template-columns:28px minmax(0,1fr);gap:12px}
 .pr-num,.pr-tick{width:28px;height:28px;font-size:14px}
 .pr-rounds::before{left:13px}
 .pr-scale-keys{flex-direction:column;gap:4px}
 .pr-scale-keys span:last-child,.pr-scale-note{text-align:left}
 .pr-scale-keys{font-size:14px}
 .pr-chair-lead{font-size:19px}
}

/* Reduced motion: no fades or eased fills; the reader's place still shows */
@media(prefers-reduced-motion:reduce){.pr-shot,.pr-disc{transition:none!important}}
html:is(.reduce-motion,.dio-alive-off,.userway-s13) :is(.pr-shot,.pr-disc){transition:none!important}