/* XSL framework pages: /how-i-work/ and /insights/people-process-technology-data/
   Loads after main.css. Ink means "you or active". Motion rules live in main.css. */
:root{--line:#7A8494;--field:#7E8798;--ease:cubic-bezier(.2,0,0,1)}


/* page frame */
.fw-head{padding-top:clamp(36px,6vw,72px);padding-bottom:clamp(28px,4vw,44px)}
.fw-head h1{font:400 clamp(34px,4.6vw,58px)/1.08 var(--serif);letter-spacing:-.015em;max-width:18ch;text-wrap:balance}
.fw-head .dek{font-size:clamp(18px,1.7vw,21px);line-height:1.5;color:var(--muted);max-width:36em;margin-top:20px}
.byline{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:22px;font-size:15px;color:var(--muted)}
.byline a{color:var(--ink)}
.fw-sec{padding:clamp(56px,7vw,92px) 0}
.fw-sec.mist{background:var(--mist)}
.fw-sec h2{font:400 clamp(27px,3vw,40px)/1.15 var(--serif);letter-spacing:-.01em;max-width:22ch;text-wrap:balance}
.fw-sec .intro{margin:16px 0 36px}
.fw-sec h3{font:400 22px/1.3 var(--serif)}
.prose{max-width:40em}
.prose p{margin:0 0 18px;font-size:18px;line-height:1.65}
.prose p:last-child{margin-bottom:0}
.note{font-size:15px;color:var(--muted)}
.todo{margin:10px 0}
.after{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}

/* in page contents */
.toc{display:flex;flex-wrap:wrap;gap:8px 22px;margin:26px 0 0;padding:14px 0 0;border-top:1px solid var(--rule);list-style:none;font:600 15px/1.4 var(--sans)}
.toc a{color:var(--ink);text-underline-offset:5px}

/* ---------- the spine (how-i-work) ---------- */
.spine{position:relative;margin-top:8px}
.spine-nav{list-style:none;margin:0;padding:64px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
.spine-nav li{position:relative}
.spine-nav a{display:block;text-decoration:none;color:var(--ink);padding:16px 18px 18px 0;border-top:3px solid var(--rule);margin-right:10px;transition:border-color .2s var(--ease)}
.spine-nav .num{display:block;font:400 14px/1 var(--serif);color:var(--muted);margin-bottom:10px}
.spine-nav b{display:block;font:400 20px/1.25 var(--serif);font-weight:400}
.spine-nav span.sum{display:block;font-size:15px;line-height:1.45;color:var(--muted);margin-top:6px;max-width:24ch}
.spine-nav a:hover{border-top-color:var(--line)}
.spine-nav a[aria-selected=true]{border-top-color:var(--ink)}
.spine-nav a[aria-selected=true] .num{color:var(--ink)}
.spine-nav a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.spine .bp-mark{position:absolute;right:3px;top:-8px;width:13px;height:13px;background:var(--paper);border:1.5px solid var(--ink);transform:rotate(45deg)}
.spine .bp-mark.on{background:var(--ink)}
.spine .bp-label{position:absolute;right:18px;top:-30px;font-size:13px;color:var(--muted);white-space:nowrap}
.spine .loop{position:absolute;left:calc(25% + 2px);right:calc(12.5% - 4px);top:16px;height:36px;border:1.5px dashed var(--line);border-bottom:0;border-radius:18px 18px 0 0;pointer-events:none}
.spine .loop::after{content:"";position:absolute;left:-6px;bottom:-2px;width:9px;height:9px;border-right:1.5px solid var(--line);border-bottom:1.5px solid var(--line);transform:rotate(45deg)}
.spine .loop span{position:absolute;left:50%;top:-10px;transform:translateX(-50%);background:var(--paper);padding:0 10px;font-size:13px;line-height:18px;color:var(--muted);white-space:nowrap}
.fw-sec.mist .spine .loop span{background:var(--mist)}
.spine .posts{display:block;height:12px;margin-top:12px;background:repeating-linear-gradient(to right,var(--line) 0 1.5px,transparent 1.5px 14px);max-width:150px}

.stage-panels{margin-top:34px}
.stage-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 56px;padding:30px 0;border-top:1px solid var(--rule)}
.stage-panel > header{grid-column:1/-1}
.stage-panel h3{font:400 clamp(24px,2.4vw,30px)/1.2 var(--serif)}
.stage-panel .lead{font-size:19px;line-height:1.55;margin-top:10px;max-width:38em}
.facet{border-top:1px solid var(--rule);padding-top:12px}
.facet h4{margin:0 0 6px;font:700 13px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.facet p,.facet li{font-size:17px;line-height:1.55}
.facet ul{margin:0;padding-left:20px}.facet li{margin:4px 0}
.facet.leave{border-top:2px solid var(--ink)}
.facet.leave p{font:400 19px/1.45 var(--serif)}
.js .stage-panel[hidden]{display:none}
.js .stage-panel{border-top:0;padding-top:4px}

/* depth of change dial */
.depth{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,64px);align-items:start}
.dial{border:0;margin:0;padding:0;min-width:0}
.dial legend{font:400 20px/1.3 var(--serif);padding:0;margin-bottom:14px}
.dial-track{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1.5px solid var(--line);border-radius:4px;background:var(--paper);overflow:hidden}
.dial-track label{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:64px;padding:10px 14px;border-left:1.5px solid var(--line);cursor:pointer}
.dial-track label:first-child{border-left:0}
.dial-track input{position:absolute;opacity:0;width:1px;height:1px}
.dial-track b{font:400 19px/1.2 var(--serif);font-weight:400}
.dial-track small{font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.3}
.dial-track label:has(input:checked){background:var(--ink);color:#fff}
.dial-track label:has(input:checked) small{color:#D9DBE3}
.dial-track label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:-5px;box-shadow:inset 0 0 0 4px #fff}
.layers{margin:22px 0 0;display:grid;gap:8px}
.layer{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:54px;padding:10px 16px;border:1.5px solid var(--line);background:var(--paper);transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.layer b{font:400 18px/1.25 var(--serif);font-weight:400}
.layer span{font-size:14px;color:var(--muted);text-align:right}
.layer.on{background:var(--ink);border-color:var(--ink);color:#fff}
.layer.on span{color:#D9DBE3}
.depth-out article{border-top:2px solid var(--ink);padding-top:16px}
.depth-out article + article{margin-top:34px}
.depth-out h3{font:400 26px/1.2 var(--serif)}
.depth-out .what{font-size:19px;line-height:1.55;margin:10px 0 16px}
.depth-out dl{margin:0;display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px 18px}
.depth-out dt{font:700 13px/1.5 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.depth-out dd{margin:0;font-size:17px;line-height:1.55}
.js .depth-out article[hidden]{display:none}
.js .depth-out article + article{margin-top:0}
.argyris{margin-top:30px;padding:18px 20px;background:var(--paper);border-left:3px solid var(--ink);font-size:16px;line-height:1.55;color:var(--muted)}
.argyris b{color:var(--ink);font-weight:600}

/* 30 60 90 table */
.t369{width:100%;border-collapse:collapse;margin-top:8px}
.t369 th,.t369 td{text-align:left;vertical-align:top;padding:16px 18px 16px 0;border-top:1px solid var(--rule)}
.t369 thead th{border-top:0;font:400 20px/1.3 var(--serif);padding-bottom:12px;border-bottom:2px solid var(--ink)}
.t369 tbody th{font:400 17px/1.35 var(--serif);white-space:nowrap;width:110px}
.t369 td{font-size:17px;line-height:1.55}
.t369 .stg{display:block;font:700 12.5px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.filter.doorpick{display:none}

/* cases: looked like, was */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0;border:0}
.filter legend{font-size:15px;color:var(--muted);margin-bottom:10px;padding:0}
.filter label{position:relative;display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1.5px solid var(--line);border-radius:3px;font:600 15px/1 var(--sans);cursor:pointer;background:var(--paper)}
.filter input{position:absolute;opacity:0;width:1px;height:1px}
.filter label:has(input:checked){background:var(--ink);border-color:var(--ink);color:#fff}
.filter label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.filter-note{font-size:15px;color:var(--muted);margin:-12px 0 20px;min-height:1.4em}
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.case{background:var(--paper);border:1px solid var(--rule);padding:26px 26px 22px;display:flex;flex-direction:column}
.case[hidden]{display:none}
.case .kind{font:700 12.5px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.case h3{font:400 23px/1.3 var(--serif);margin:10px 0 8px}
.case .ctx{font-size:17px;color:var(--muted)}
.lw{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 6px;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.lw figure{margin:0;display:flex;gap:10px;align-items:center}
.lw figcaption{font-size:13px;line-height:1.35;color:var(--muted)}
.lw figcaption b{display:block;color:var(--ink);font-size:15px;font-weight:600}
.glyph{display:block;width:44px;height:36px;flex:none}
.case details{margin-top:8px}
.case summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:44px;font:600 16px/1.4 var(--sans)}
.case summary::-webkit-details-marker{display:none}
.case summary::before{content:"";width:8px;height:8px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(-45deg);transition:transform .15s var(--ease);margin:0 4px 0 2px}
.case details[open] summary::before{transform:rotate(45deg)}
.case .was{font:400 19px/1.4 var(--serif);margin:4px 0 10px}
.case details p{font-size:16.5px;line-height:1.6;color:var(--muted);margin-bottom:10px}
.case details p b{color:var(--ink);font-weight:600}

/* ---------- PPTD model (insights post) ---------- */
.model{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,60px);align-items:start}
.found{margin:0}
.beam{text-align:center;font:500 14px/1 var(--sans);color:var(--muted);padding-bottom:8px;border-bottom:1.5px solid var(--line);margin:0 -14px}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pillar,.slab{position:relative;display:block;text-decoration:none;color:var(--ink);background:var(--paper);transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.pillar{height:210px;border:1.5px solid var(--line);border-top:0;border-bottom:0;padding:14px 12px}
.pillar b,.slab b{display:block;font:400 21px/1.2 var(--serif);font-weight:400}
.pillar small,.slab small{display:block;font-size:14px;line-height:1.35;color:var(--muted);margin-top:4px}
.slab{height:72px;margin:0 -14px;border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line);background:var(--mist);padding:14px 26px;display:flex;align-items:center;gap:16px}
.slab small{margin:0}
.ground{height:10px;border-top:1px solid var(--rule);margin:6px -28px 0}
.pillar .fx,.slab .fx{position:absolute;right:10px;bottom:10px;font:700 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;opacity:0}
.slab .fx{top:50%;bottom:auto;transform:translateY(-50%);right:18px}
.found.origin-set .pillar,.found.origin-set .slab{color:var(--muted)}
.found .src{background:var(--ink)!important;border-color:var(--ink)!important;color:#fff!important}
.found .src small{color:#D9DBE3}
.found .hit{border-color:var(--ink)!important;color:var(--ink)!important}
.found .hit .fx,.found .src .fx{opacity:1}
.found .hit{box-shadow:inset 0 0 0 1.5px var(--ink)}
.pillar:focus-visible,.slab:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.scen{border:0;margin:0;padding:0;min-width:0}
.scen legend{font:400 20px/1.3 var(--serif);padding:0;margin-bottom:6px}
.scen .hint{font-size:15px;color:var(--muted);margin-bottom:14px}
.scen-btns{display:grid;gap:8px}
.scen-btns label{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:50px;padding:10px 16px;border:1.5px solid var(--line);border-radius:3px;background:var(--paper);cursor:pointer;font:600 16px/1.3 var(--sans)}
.scen-btns label span{font:400 14px/1.3 var(--sans);color:var(--muted)}
.scen-btns input{position:absolute;opacity:0;width:1px;height:1px}
.scen-btns label:has(input:checked){background:var(--ink);border-color:var(--ink);color:#fff}
.scen-btns label:has(input:checked) span{color:#D9DBE3}
.scen-btns label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.ripple{margin-top:24px}
.ripple article{border-top:2px solid var(--ink);padding-top:14px}
.ripple article + article{margin-top:28px}
.ripple h3{font:400 21px/1.3 var(--serif)}
.ripple ul{list-style:none;margin:10px 0 0;padding:0}
.ripple li{padding:10px 0;border-top:1px solid var(--rule);font-size:16.5px;line-height:1.5}
.ripple li b{display:block;font:400 17px/1.3 var(--serif);font-weight:400}
.js .ripple article[hidden]{display:none}
.js .ripple article + article{margin-top:0}
.ripple .empty{font-size:16px;color:var(--muted);border-top:1px solid var(--rule);padding-top:12px}

/* area chapters */
.area{padding:44px 0;border-top:1px solid var(--rule);scroll-margin-top:20px}
.area:first-of-type{border-top:0;padding-top:8px}
.area-head{display:flex;gap:16px;align-items:center}
.area-head .glyph{width:52px;height:42px}
.area-head h2{max-width:none;font:400 clamp(30px,3.2vw,42px)/1.1 var(--serif);letter-spacing:-.01em}
.area-head .k{display:block;font:700 12.5px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.area-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px 56px;margin-top:22px}
.ask{background:var(--mist);padding:20px 22px}
.ask h3,.signs h3{font:700 13px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.ask ol{margin:0;padding-left:22px}
.ask li{font:400 17.5px/1.5 var(--serif);margin:0 0 12px}
.ask li:last-child{margin-bottom:0}
.signs{margin-top:22px}
.signs ul{list-style:none;margin:0;padding:0}
.signs li{padding:9px 0 9px 22px;border-top:1px solid var(--rule);font-size:16.5px;position:relative}
.signs li::before{content:"";position:absolute;left:0;top:20px;width:12px;height:1.5px;background:var(--line)}
.casebox{margin-top:8px;border-left:3px solid var(--ink);padding:4px 0 4px 18px}
.casebox .k{display:block;font:700 12.5px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.casebox p{font-size:17px;line-height:1.6;margin:0 0 10px}
.stat{margin:6px 0 20px;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);display:flex;gap:16px;align-items:baseline}
.stat b{font:400 34px/1 var(--serif);font-weight:400;flex:none}
.stat span{font-size:15.5px;line-height:1.45;color:var(--muted)}

/* self check */
.check{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,60px);align-items:start}
.ticks{border:0;margin:0;padding:0;min-width:0}
.ticks legend{font:400 20px/1.3 var(--serif);padding:0;margin-bottom:10px}
.tick{display:flex;gap:14px;align-items:flex-start;min-height:50px;padding:12px 0;border-top:1px solid var(--rule);cursor:pointer}
.tick:last-of-type{border-bottom:1px solid var(--rule)}
.tick input{position:absolute;opacity:0;width:1px;height:1px}
.box{flex:none;width:22px;height:22px;margin-top:2px;border:1.5px solid var(--line);border-radius:2px;display:grid;place-items:center;background:var(--paper);transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.box::after{content:"";width:6px;height:11px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) translate(-1px,-1px);opacity:0}
.tick input:checked + .box{background:var(--ink);border-color:var(--ink)}
.tick input:checked + .box::after{opacity:1}
.tick input:focus-visible + .box{outline:2px solid var(--ink);outline-offset:3px}
.tick .t{font-size:17px;line-height:1.4}
.tick .t small{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.tally{position:sticky;top:20px}
.bars{display:grid;gap:10px;margin:0 0 18px}
.bar{display:grid;grid-template-columns:110px minmax(0,1fr) 24px;gap:12px;align-items:center}
.bar b{font:400 18px/1.2 var(--serif);font-weight:400}
.bar .bricks{height:20px;border-bottom:1.5px solid var(--line);background:repeating-linear-gradient(to right,var(--ink) 0 14px,transparent 14px 18px) left/calc(var(--n,0) * 18px) 100% no-repeat;transition:background-size .2s var(--ease)}
.bar em{font:400 18px/1 var(--serif);font-style:normal;text-align:right}
.bar em.zero{color:var(--line)}
.readout p{font-size:16.5px;line-height:1.55;margin-bottom:10px}
.readout .areas{list-style:none;margin:0 0 10px;padding:0}
.readout .areas li{border-top:1px solid var(--rule);padding:10px 0;font-size:15.5px;color:var(--muted)}
.readout .areas li b{display:block;font:400 17px/1.3 var(--serif);color:var(--ink);font-weight:400}
.js .readout .areas li{display:none}.js .readout .areas li.on{display:block}
.js .readout .caveat{display:none}.js .ticked .readout .caveat{display:block}
.readout .send[hidden],.readout .multi[hidden]{display:none}
.readout .send{margin-top:16px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}

/* author box and next step */
.author{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:start;max-width:820px}
.author .mat{padding:6px}
.author h2{font:400 24px/1.25 var(--serif)}
.author p{font-size:16.5px;line-height:1.55;color:var(--muted);margin-top:8px}
.author .creds{color:var(--ink)}
.cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:center}
.cta h2{max-width:20ch}
.cta p{color:var(--muted);margin-top:12px;max-width:34em}
.sources{font-size:15px;color:var(--muted);margin-top:8px}
.sources ol{padding-left:20px;margin:10px 0 0}.sources li{margin:6px 0;overflow-wrap:anywhere}
.sources a{color:var(--muted)}
.foot .legal{flex-basis:100%;font-size:13px}

@media (hover:hover){.tick:hover .box{border-color:var(--ink)}.filter label:hover,.scen-btns label:hover{border-color:var(--ink)}}
@media (max-width:900px){
  .depth,.model,.check,.area-grid{grid-template-columns:1fr}
  .tally{position:static}
  .cases{grid-template-columns:1fr}
}
@media (max-width:760px){
  .spine-nav{grid-template-columns:1fr;padding-top:0;row-gap:0}
  .spine-nav a{border-top:0;border-left:3px solid var(--rule);margin:0;padding:12px 0 14px 16px}
  .spine-nav a[aria-selected=true]{border-left-color:var(--ink)}
  .spine .loop,.spine .bp-label{display:none}
  .spine .bp-mark{right:auto;left:-8px;top:auto;bottom:-7px}
  .spine-nav span.sum{max-width:none}
  .stage-panel{grid-template-columns:1fr;gap:16px}
  .dial-track{grid-template-columns:1fr}
  .dial-track label{border-left:0;border-top:1.5px solid var(--line)}
  .dial-track label:first-child{border-top:0}
  .depth-out dl{grid-template-columns:1fr;gap:2px}
  .depth-out dd{margin-bottom:10px}
  .layer span{display:none}
  .t369 thead{display:none}
  .js .t369 thead{display:none}
  .filter.doorpick{display:flex}
  .t369,.t369 tbody,.t369 tr{display:block}
  .t369 tr{border-top:1px solid var(--rule);padding:12px 0}
  .t369 th,.t369 td{display:block;border:0;padding:4px 0}
  .t369 td::before{content:attr(data-door);display:block;font:700 12.5px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .js .t369 td{display:none}.js .t369 td.on{display:block}.js .t369 td::before{display:none}
  .pillar{height:150px;padding:10px 6px}.pillar b{font-size:14px}.pillar small{display:none}
  .slab{padding:10px 16px;margin:0 -8px}.beam{margin:0 -8px}.ground{margin:6px -16px 0}
  .slab small{display:none}
  .pillar .fx{left:8px;right:auto}
  .lw{grid-template-columns:1fr}
  .author{grid-template-columns:72px minmax(0,1fr);gap:14px}
  .cta{grid-template-columns:1fr}
  .cta .btn{width:100%}
  .bar{grid-template-columns:92px minmax(0,1fr) 20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- 2026-10-26 v8: the four steps read as clickable cards ---------- */
.pick-hint{margin:6px 0 0;font:600 14.5px/1.4 var(--sans);color:var(--muted)}
.spine-nav{gap:12px}
.spine-nav a{height:100%;box-sizing:border-box;margin-right:0;padding:16px 16px 18px;border:1px solid var(--rule);border-top:3px solid var(--rule);border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(27,35,66,.06);transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease);cursor:pointer}
.spine-nav a:hover{border-color:var(--line);border-top-color:var(--c,var(--line));box-shadow:0 4px 14px rgba(27,35,66,.10);transform:translateY(-1px)}
.spine-nav a[aria-selected=true]{border-color:var(--ink);border-top-color:var(--ink);background:color-mix(in srgb,var(--c,#1B2342) 7%,#fff);box-shadow:0 4px 14px rgba(27,35,66,.12)}
.spine-nav a[aria-selected=true] b{font-weight:700}
.spine-nav .sp-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.spine-nav .sp-top .num{margin:0}
.spine-nav span.sum{color:var(--muted)}
.spine-nav .sp-go{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font:600 14px/1.2 var(--sans);color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.spine-nav a[aria-selected=true] .sp-go{text-decoration:none;color:var(--muted)}
.spine-nav .st-ico{width:44px;height:44px;border-radius:12px}
.spine .bp-mark{top:-8px;right:-9px;z-index:2}
.spine .bp-label{z-index:2}
@media (max-width:760px){.spine-nav{gap:10px}.spine-nav a{border-left:1px solid var(--rule);border-top:3px solid var(--rule);margin:0;padding:14px 14px 16px}.spine-nav a[aria-selected=true]{border-left-color:var(--ink)}.spine .bp-mark{right:auto;left:auto;display:none}}

/* ---------- 2026-10-27 v10: phone stage cards open in place (option B) ---------- */
.sp-of,.sp-foot{display:none}
@media (max-width:760px){
 .spine{padding-bottom:88px}
 .spine-nav a{height:auto!important}
 .spine-nav a[aria-expanded=true]{border-color:var(--ink);border-top-color:var(--c,var(--ink));background:color-mix(in srgb,var(--c,#1B2342) 7%,#fff);box-shadow:0 4px 14px rgba(27,35,66,.12)}
 .spine-nav a[aria-expanded=true] b{font-weight:700}
 .spine-nav a[aria-expanded=true] .sp-go{text-decoration:none;color:var(--muted)}
 .spine-nav .sp-go svg{transition:transform .2s var(--ease)}
 .spine-nav a[aria-expanded=true] .sp-go svg{transform:rotate(90deg)}
 .spine-nav li>.stage-panel{display:block;margin:8px 0 4px;padding:16px 16px 18px;background:#fff;border:1px solid var(--rule);border-left:3px solid var(--c,var(--ink));border-radius:14px}
 .js .spine-nav li>.stage-panel[hidden]{display:none}
 .spine-nav li>.stage-panel header h3{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
 .spine-nav li>.stage-panel .lead{font-size:17px;margin-top:0}
 .spine-nav li>.stage-panel .facet{margin-top:16px}
 .sp-of{display:block;margin:0 0 10px;font:600 12px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--c,#5A6070) 72%,#1B2342)}
 .sp-foot{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:20px;padding-top:12px;border-top:1px solid var(--rule)}
 .spine-nav .sp-foot a,.spine-nav .sp-foot a:hover{height:auto!important;width:auto;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none}
 .spine-nav .sp-next,.spine-nav .sp-mail{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:600 15.5px/1.3 var(--sans);color:var(--ink)}
 .spine-nav .sp-next{text-decoration:none}
 .spine-nav .sp-next .sp-k{font-weight:500;color:var(--muted)}
 .spine-nav .sp-next svg{width:14px;height:14px;flex:none}
 .spine-nav .sp-loop svg{transform:rotate(-90deg)}
 .spine-nav .sp-mail{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
 html.sp-in-view .float-cta.on{opacity:0;visibility:hidden}
}

/* ---------- 2026-10-28 v13: How I Work on phones ---------- */
/* no empty band under the step cards: the panels live inside the cards, and the floating button already hides while a step is open */
@media (max-width:760px){
 .spine{padding-bottom:0}
 .js .spine .stage-panels{margin-top:0}
}
/* depth dial: the layers get a caption, and on phones the picker stays one row of three so it reads as the control,
   while the layers read as the result (dashed when untouched, a soft blue tint when this depth changes them) */
.layers-cap{margin:0;font:600 12.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (max-width:760px){
 .dial-track{grid-template-columns:repeat(3,minmax(0,1fr));border-radius:12px}
 .dial-track label{border-top:0;border-left:1.5px solid var(--line);min-height:76px;padding:10px 6px;align-items:center;text-align:center}
 .dial-track label:first-child{border-left:0}
 .dial-track b{font-size:17px}
 .dial-track small{font-size:12.5px;text-wrap:balance}
 .layers{margin-top:26px;gap:6px}
 .layer{min-height:46px;border:1.5px dashed #C2BEB6;background:none;color:var(--muted)}
 .layer.on{border:1.5px solid transparent;background:rgba(125,156,216,.16);box-shadow:inset 4px 0 0 var(--glow);color:var(--ink)}
}
@media (max-width:360px){
 .dial-track b{font-size:15.5px}
}