/* Authority Network · player layout (see recorrido-player.js).
   One screen tall, scrolls with the page: diagram, current slide, and a timeline below. */
.experience .method-story.has-player{padding:72px 0 96px}
.experience .scrolly[data-mode=player]{display:block}
.experience .scrolly[data-mode=player] .scrolly__steps{display:none!important}
.experience .scrolly[data-mode=player] .player-shell{position:relative;margin:0;padding:0;background:none;border:0;box-shadow:none}

.experience .player-stage{
 --rail-h:58px;
 position:relative;display:grid;
 grid-template-columns:auto minmax(0,1fr) minmax(300px,380px);
 grid-template-areas:"head head copy" "red red copy" "legend legend legend" "foot rail rail";
 column-gap:clamp(32px,4vw,64px);align-items:end;
 max-width:1440px;margin:0 auto;padding:0 clamp(0px,2vw,24px)
}
.experience .player-stage>.stage-heading{grid-area:head;position:static;display:block;padding:0 0 8px;border:0;align-self:start}
.experience .player-stage .stage-heading .stage-title{display:none}
.experience .player-stage>.red{grid-area:red;position:relative;min-width:0;margin:0;transform:none;background:#fcfbf9;border:1px solid #e4dfd8;border-radius:16px;overflow:hidden;box-shadow:0 18px 40px -34px rgba(26,25,23,.35)}
.experience .player-stage .red__stage--story{position:relative;inset:auto;height:clamp(320px,calc(100svh - 440px),600px);min-height:0}
.experience .player-stage>.stage-legend{grid-area:legend;position:static;display:flex;flex-wrap:wrap;margin:14px 0 0;padding-bottom:14px;border-bottom:1px solid #e3ded6;font-size:13px;font-weight:500;gap:8px 26px;color:var(--text-secondary)}
.experience .player-stage .player-note{margin:0 0 0 auto;font-size:11px;font-weight:400;color:#7c756b}
.experience .player-stage>.stage-progress{display:none}
.experience .player-stage>.stage-footer{grid-area:foot;position:static;inset:auto;transform:none;display:flex;margin:0;padding:16px 0 0;border:0;align-self:end}
.experience .player-stage>.rc{z-index:10;background:#fff;opacity:1;pointer-events:none;width:320px;max-width:calc(100% - 24px);max-height:calc(100% - 24px);overflow:auto;overscroll-behavior:contain;box-shadow:0 12px 32px rgba(26,25,23,.18)}
.experience .player-stage>.rc:is(.is-pinned,.rc--docs){pointer-events:auto}
.experience .player-stage>.rc .rc__cta{display:grid;grid-template-columns:1fr}

/* The slide */
.player-window{grid-area:copy;align-self:center;padding:8px 0;position:relative;display:flex;flex-direction:column;justify-content:center}
/* The slide area holds its tallest state so the pager below never moves */
.player-slides{min-height:var(--slide-height,420px)}
/* Pager under the slide: back, and a wide «Next · 08 · title →» */
.player-pager{display:flex;align-items:stretch;gap:10px;margin-top:16px}
.experience .player-pager [data-step-prev]{flex:none;display:grid;place-items:center;width:52px;height:auto;min-height:56px;padding:0;border:1px solid #d3cec6;border-radius:12px;background:#fff;color:#35302b;font-size:18px;cursor:pointer;transition:background .2s,border-color .2s}
.experience .player-pager [data-step-prev]:hover{background:#f3efe8}
.experience .player-pager [data-step-prev]:disabled{opacity:.35;cursor:default;background:#fff}
.experience .player-pager [data-step-next]{flex:1 1 auto;min-width:0;width:auto;height:auto;min-height:56px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k a" "t a";align-items:center;column-gap:12px;padding:9px 16px;border:1px solid #F97316;border-radius:12px;background:#fff7ed;color:#1a1917;text-align:left;cursor:pointer;transition:background .2s}
.experience .player-pager [data-step-next]:hover{background:#ffedd5}
.player-pager__k{grid-area:k;font:10px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#c2410c}
.player-pager__t{grid-area:t;font:600 14px/1.35 var(--font-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-pager__a{grid-area:a;font-size:20px;color:#c2410c}
.experience .player-pager [data-step-next].is-restart{border-color:#d3cec6;background:#fff}
.experience .player-pager [data-step-next].is-restart:hover{background:#f3efe8}
.player-pager button:focus-visible{outline:2px solid #F97316;outline-offset:2px}
/* A chapter: phase, headline, and its three steps; only the current one is open */
.player-window>.chapter{width:100%}
.player-window>.chapter[hidden]{display:none!important}
.experience .player-window .chapter__eyebrow{font:11px/1.5 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:#b64d12;margin:0}
.experience .player-window .h2{font:600 clamp(26px,2.3vw,34px)/1.1 var(--font-ui);letter-spacing:-.035em;margin:12px 0 0;max-width:none}
.chapter__steps{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid #e7e4e0}
.chapter-step{border-bottom:1px solid #e7e4e0}
.chapter-step__head{display:grid;grid-template-columns:30px minmax(0,1fr) 16px;align-items:baseline;gap:8px;width:100%;padding:13px 0;border:0;background:none;text-align:left;cursor:pointer;color:#6f6861;font:500 14px/1.4 var(--font-ui)}
.chapter-step__head::after{content:"+";color:#b5ada3;font-size:17px;line-height:1;transition:transform .25s}
.chapter-step__n{font:11px var(--font-mono);color:#a39b91}
.chapter-step.is-done .chapter-step__n{color:#e0905a}
.chapter-step__head:hover{color:#1a1917}
.chapter-step__head:focus-visible{outline:2px solid #F97316;outline-offset:2px;border-radius:4px}
.chapter-step.is-active .chapter-step__head{color:#1a1917;font-weight:600}
.chapter-step.is-active .chapter-step__n{color:#c2410c}
.chapter-step.is-active .chapter-step__head::after{content:"";}
.chapter-step__more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.chapter-step__more>div{overflow:hidden;min-height:0;padding-left:38px}
.chapter-step.is-active .chapter-step__more{grid-template-rows:1fr}
.chapter-step.is-active .chapter-step__more>div{padding-bottom:14px}
.is-measuring .chapter-step__more{transition:none}
.experience .player-window .chapter-step__summary{font-size:14.5px;line-height:1.6;margin:0;max-width:none;color:#57514b}
.chapter-step__metric{display:flex;align-items:baseline;gap:10px;margin:12px 0 0;padding:9px 12px;border-left:2px solid #F97316;background:#f7f4ef;border-radius:0 6px 6px 0}
.chapter-step__metric strong{font:500 22px/1.1 var(--font-mono);letter-spacing:-.04em;color:#29231e;white-space:nowrap}
.chapter-step__metric span{font-size:12px;line-height:1.4;color:#62584e}
.chapter-step__detail{margin:10px 0 0;padding:4px 0;border:0;background:none;cursor:pointer;color:#c2410c;font:600 12.5px var(--font-ui);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.chapter-step__detail:hover{color:#9a3412}
/* The closing slide keeps the finale copy and surfaces the calls to action */
.experience .player-window .chapter--finale .step-eyebrow{font-size:11px;color:#b64d12}
.experience .player-window .chapter--finale .step-summary{font-size:15px;line-height:1.62;margin:14px 0 0;max-width:none;color:#57514b}
.experience .player-window .network-finale__hint{margin:14px 0 0}
/* Closing calls to action as white cards, like the audience cards in the mobile menu
   (site.css): brand carries the orange, voice stays neutral */
.chapter__cta{display:flex;gap:10px;margin-top:24px}
.experience .player-cta{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:9px 9px 9px 16px;border:1.5px solid #dcd7cf;border-radius:10px;background:#fff;color:#35302b;font:600 14px/1.3 var(--font-ui);letter-spacing:-.048px;text-decoration:none;transition:background .2s,border-color .2s}
.experience .player-cta::after{content:"↗";display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;background:#eeedeb;color:#35302b;font-size:15px;line-height:1}
.experience .player-cta--brand{border-color:#F97316;color:#c2410c}
.experience .player-cta--brand::after{background:#F97316;color:#fff}
.experience .player-cta--brand:hover{background:#fff7ed;color:#c2410c}
.experience .player-cta--voice:hover{background:#f7f5f2;color:#1a1917}
.experience .player-cta:focus-visible{outline:2px solid #F97316;outline-offset:2px}

/* Timeline: four phases of three steps, then the network */
.player-rail{grid-area:rail;display:flex;gap:14px;padding-top:16px;margin-right:48px;user-select:none}
.player-rail__group{flex:3 1 0;min-width:0}
.player-rail__group--network{flex:1.15 1 0}
.player-rail__label{display:block;font:10px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#8c847a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;transition:color .25s}
.player-rail__group:has(.is-current) .player-rail__label{color:#b64d12}
.player-rail__track{display:flex;gap:4px}
.player-seg{flex:1 1 0;min-width:0;height:24px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center}
.player-seg>i{position:relative;display:block;width:100%;height:6px;border-radius:6px;background:#dcd5cb;overflow:hidden;transition:height .2s}
.player-seg>i::after{content:"";position:absolute;inset:0;background:#F97316;transform-origin:0 50%;transform:scaleX(0)}
.player-seg.is-done>i::after{transform:none;background:#f6b27f}
.player-seg.is-current>i::after{transform:scaleX(var(--fill,1))}
.is-playing .player-seg.is-current>i::after{transform:scaleX(var(--fill,0))}
.player-seg:hover>i,.player-seg:focus-visible>i{height:9px}
.player-seg:focus-visible{outline:2px solid #F97316;outline-offset:2px;border-radius:3px}
.player-rail__group--network .player-seg>i{background:#efe6dc}

/* Play / pause sits with the arrows */
.experience .player-stage>.stage-footer>div{align-items:center}
.experience .player-stage .player-play{width:auto;min-width:132px;height:44px;padding:0 20px 0 16px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:999px;background:#F97316;color:#fff;font:600 14px var(--font-ui);box-shadow:0 8px 20px -10px rgba(249,115,22,.7)}
.experience .player-stage .player-play:hover{background:#ea580c}
.is-playing .player-stage .player-play{background:#fff;color:#c2410c;box-shadow:inset 0 0 0 1.5px #F97316}
.is-playing .player-stage .player-play:hover{background:#fff7ed}
.player-play svg{flex:none;width:14px;height:14px;fill:currentColor}
.player-play .i-pause{display:none}
.is-playing .player-stage .player-play .i-play{display:none}
.is-playing .player-stage .player-play .i-pause{display:inline}
.is-playing.is-held .player-stage .player-play{background:#fff7ed}

/* Frame status bar: playing / paused, step, and how to explore */
.player-bar{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid #ebe6df;background:#fff;font:10.5px/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:#7c756b}
.player-bar__status{display:flex;align-items:center;gap:8px;white-space:nowrap}
.player-bar__status b{font-weight:600;color:#1a1917}
.player-bar__status>span::before{content:"·";margin-right:8px;color:#b5ada3}
.player-bar__status i{width:8px;height:8px;border-radius:50%;background:#b5ada3}
.is-playing .player-bar__status i{background:#F97316;animation:player-live 1.6s ease-in-out infinite}
.player-bar__hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:none;letter-spacing:0;font-size:11px}
@keyframes player-live{0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,.55)}50%{box-shadow:0 0 0 6px rgba(249,115,22,0)}}
.experience .player-stage>.red.is-cued{animation:player-cue 1.1s ease-out 1}
@keyframes player-cue{0%{box-shadow:0 0 0 0 rgba(249,115,22,.45)}100%{box-shadow:0 0 0 14px rgba(249,115,22,0)}}

/* Short laptop screens: a tighter heading buys the diagram room above its stats cards. */
@media(min-width:761px) and (max-height:820px){
 .experience .method-story.has-player{padding-top:48px}
 .experience .player-stage .stage-heading .stage-live{font-size:44px}
 .experience .player-stage .red__stage--story{height:clamp(350px,calc(100svh - 370px),500px)}
 .experience .player-window .h2{font-size:24px;margin-top:8px}
 .chapter__steps{margin-top:12px}
 .chapter-step__head{padding:9px 0;font-size:13.5px}
 .experience .player-window .chapter-step__summary{font-size:13.5px;line-height:1.5}
 .chapter-step__metric{margin-top:8px;padding:6px 10px}
 .chapter-step__metric strong{font-size:18px}
 .chapter-step__detail{margin-top:6px}
 .chapter-step.is-active .chapter-step__more>div{padding-bottom:10px}
 .player-pager{margin-top:10px}
 .experience .player-pager [data-step-prev],.experience .player-pager [data-step-next]{min-height:48px}
}
@media(min-width:761px) and (max-width:1100px){
 .experience .player-stage{grid-template-columns:auto minmax(0,1fr) minmax(270px,320px)}
 .player-rail__label{font-size:9px}
}

/* Phone: story format. Timeline, diagram and the current step share one screen; controls
   [← ▶ →] sit under the step. One step at a time, at a fixed height, so nothing below moves. */
.player-beat{display:none}
@media(max-width:760px){
 .experience .method-story.has-player{padding:20px 0 48px}
 .experience .player-stage{
  display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"head" "rail" "red" "copy" "legend";
  height:auto;overflow:visible;padding:0 20px;gap:0
 }
 .experience .player-stage>.stage-heading{padding:0 0 10px}
 .experience .player-stage .stage-heading .stage-live{font-size:26px;margin-top:6px}
 .player-rail{margin:0 0 6px;padding-top:0;gap:6px}
 .player-rail__label{display:none}
 .player-rail__group,.player-rail__group--network{flex:3 1 0}
 .player-rail__group--network{flex:1 1 0}
 .player-rail__track{gap:3px}
 .player-seg{height:16px}
 .player-seg>i{height:5px}
 .player-bar{padding:7px 12px;font-size:9.5px}
 .player-bar__hint{display:none}
 /* The diagram takes what the step panel and the controls leave on screen */
 .experience .player-stage .red__stage--story{height:clamp(190px,calc(100svh - var(--beat-height,260px) - 330px),340px)}
 .experience .player-stage>.stage-footer{display:none}
 .player-window{align-self:start;justify-content:flex-start;margin-top:0;padding:12px 0 0}
 .player-slides{display:none}
 .player-beat{display:block;min-height:var(--beat-height,0px)}
 .player-beat--probe{position:absolute;left:0;right:0;top:0;visibility:hidden;pointer-events:none;min-height:0}
 .player-beat__eyebrow{margin:0;font:10.5px/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:#b64d12}
 .player-beat__title{margin:6px 0 0;font:600 19px/1.25 var(--font-ui);letter-spacing:-.02em;color:#1a1917}
 .experience .player-beat__summary{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:#45403b;max-width:none}
 .player-beat .chapter-step__metric{margin-top:10px;padding:7px 10px}
 .player-beat .chapter-step__metric strong{font-size:19px}
 .player-beat__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
 .player-beat .chapter-step__detail--short{flex:none;margin:0;padding:6px 0 6px 8px;font-size:12.5px;text-decoration:none}
 .player-beat .chapter-step__detail--short::after{content:" +";font-weight:400;font-size:15px}
 .player-beat--finale .h2{font-size:24px;margin-top:6px}
 .player-beat--finale .step-summary{font-size:14.5px;line-height:1.55;margin-top:8px;color:#45403b}
 .player-beat--finale .network-finale__hint{margin-top:8px}
 .player-beat--finale .chapter__cta{margin-top:14px}
 /* Controls under the step: ← · Play/Pause · → */
 .player-pager{margin:12px 8px 0 0;gap:10px;align-items:center}
 .experience .player-pager [data-step-prev],.experience .player-pager [data-step-next]{flex:none;width:48px;min-height:48px;height:48px;padding:0;display:grid;place-items:center;grid-template-areas:none;grid-template-columns:none}
 .experience .player-pager [data-step-next]{border-color:#d3cec6;background:#fff}
 .player-pager__k,.player-pager__t{display:none}
 .player-pager__a{grid-area:auto;font-size:19px;line-height:1;color:#35302b}
 .experience .player-pager .player-play{flex:1 1 auto;height:48px;min-width:0}
 .experience .player-stage>.stage-legend{display:flex;margin-top:14px;padding:12px 0;border-top:1px solid #e3ded6;font-size:11px;gap:6px 16px}
 .experience .player-stage .player-note{flex-basis:100%;margin:0;font-size:10px}
 .experience .player-stage>.rc{width:300px}
}
/* Short phones (iPhone SE and similar): a tighter heading keeps the controls on screen */
@media(max-width:760px) and (max-height:720px){
 .experience .method-story.has-player{padding-top:12px}
 .experience .player-stage .stage-heading .stage-kicker{display:none}
 .experience .player-stage .stage-heading .stage-live{font-size:22px;margin-top:0}
 .experience .player-stage>.stage-heading{padding-bottom:8px}
 .experience .player-stage .red__stage--story{height:clamp(170px,calc(100svh - var(--beat-height,260px) - 270px),300px)}
 .player-beat__title{font-size:17.5px}
 .experience .player-beat__summary{font-size:14px;line-height:1.5}
 .player-pager{margin-top:10px}
 .experience .player-pager [data-step-prev],.experience .player-pager [data-step-next],.experience .player-pager .player-play{height:44px;min-height:44px}
}
.experience .player-stage .player-play.is-cued{animation:play-cue 1.5s ease-out 3}
@keyframes play-cue{0%{box-shadow:0 0 0 0 rgba(249,115,22,.55)}70%,100%{box-shadow:0 0 0 14px rgba(249,115,22,0)}}
@media(prefers-reduced-motion:reduce){.player-seg>i{transition:none}.chapter-step__more{transition:none}.experience .player-stage .player-play.is-cued{animation:none}.is-playing .player-bar__status i,.experience .player-stage>.red.is-cued{animation:none}}