/* Playbook section (replaces career timeline) */
.pb-head{max-width:860px}
.pb{margin-top:clamp(28px,5vw,56px);display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:clamp(16px,3vw,36px);align-items:start}
.pb-tabs{display:flex;flex-direction:column;gap:6px;position:sticky;top:calc(var(--bar-top) + 16px)}
.pb-tab{all:unset;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;font:600 17px/1.2 var(--f-body);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);background:rgba(255,255,255,.45);transition:background .25s var(--e-out),box-shadow .25s var(--e-out),transform .25s var(--e-out)}
.pb-tab .mono{color:var(--muted)}
.pb-tab:hover{background:#fff}
.pb-tab:focus-visible{box-shadow:inset 0 0 0 2px var(--link)}
.pb-tab[aria-selected="true"]{background:var(--ink);color:#fff;box-shadow:none;transform:translateX(4px)}
.pb-tab[aria-selected="true"] .mono{color:var(--mint)}
.pb-panels{position:relative;min-height:440px}
.pb-panel{background:var(--card);border-radius:24px;padding:clamp(22px,4vw,40px);box-shadow:var(--sh-lg)}
.pb-panel.is-on{animation:pbIn .5s var(--e-out)}
@keyframes pbIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pb-panel h3{font:800 clamp(24px,3.2vw,36px)/1.08 var(--f-display);letter-spacing:-.03em;max-width:24ch}
.pb-panel>p{margin-top:14px;font-size:17px;line-height:1.55;color:var(--ink-2);max-width:56ch}
.pb-src{margin-top:22px;color:var(--muted);display:flex;align-items:center;gap:8px}
.pb-src::before{content:"";width:18px;height:1px;background:var(--line-2)}
.pb-foot{margin-top:28px;color:var(--muted);line-height:1.8}
.pb-foot b{color:var(--ink);font-weight:600}
/* demos */
.pb-demo{margin-top:24px;border-radius:18px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);padding:18px;display:flex;flex-direction:column;gap:10px}
.pb-demo>*{opacity:0;transform:translateY(8px)}
.is-on .pb-demo>*{animation:pbIn .5s var(--e-out) forwards}
.is-on .pb-demo>*:nth-child(2){animation-delay:.1s}.is-on .pb-demo>*:nth-child(3){animation-delay:.2s}.is-on .pb-demo>*:nth-child(4){animation-delay:.3s}.is-on .pb-demo>*:nth-child(5){animation-delay:.4s}
.pb-demo--intent .q{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:#fff;box-shadow:var(--sh);font-size:15px}
.pb-demo--intent .q b{font:500 10px var(--f-mono);text-transform:uppercase;letter-spacing:.04em;padding:4px 8px;border-radius:999px;white-space:nowrap}
.q--hot b{background:var(--green);color:#fff}.q--warm b{background:var(--hl);color:var(--ink)}.q--cold b{background:var(--line);color:var(--muted)}
.q--cold{opacity:.6}
.pb-demo--tree{display:grid;grid-template-columns:repeat(2,1fr)}
.pb-demo--tree .root{grid-column:1/-1;font:700 15px var(--f-body);padding:10px 14px;border-radius:10px;background:var(--ink);color:#fff;justify-self:start}
.pb-demo--tree .leaf{font:500 13px var(--f-mono);padding:10px 12px;border-radius:10px;background:#fff;box-shadow:var(--sh);color:var(--link)}
.pb-demo--phone{flex-direction:row;align-items:center;gap:22px}
.ph{width:120px;height:200px;border-radius:22px;background:#fff;box-shadow:0 0 0 6px var(--ink),var(--sh-lg);padding:16px 12px;display:flex;flex-direction:column;gap:8px;flex:none}
.ph i{display:block;height:8px;border-radius:4px;background:var(--line-2)}
.ph .ph-h{height:16px;width:80%;background:var(--ink)}.ph .s{width:60%}
.ph .ph-r{height:auto;background:none;font-style:normal;font-size:11px;color:#f5a623}
.ph-c{margin-top:auto;text-align:center;padding:9px;border-radius:10px;background:var(--green);color:#fff;font:700 12px var(--f-body);animation:pbPulse 1.8s ease-in-out infinite}
@keyframes pbPulse{50%{box-shadow:0 0 0 8px rgba(14,159,90,.18)}}
.ph-k{line-height:2;color:var(--muted)}.ph-k b{color:var(--ink);font-weight:600}
.pb-demo--ai .ai-q{align-self:flex-end;background:var(--ink);color:#fff;padding:10px 14px;border-radius:16px 16px 4px 16px;font-size:15px}
.pb-demo--ai .ai-a{background:#fff;box-shadow:var(--sh);padding:12px 14px;border-radius:16px 16px 16px 4px;font-size:15px;line-height:1.45;max-width:90%}
.pb-demo--ai .ai-a b{background:var(--hl);padding:0 4px;border-radius:4px}
.pb-demo--log span{display:flex;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:12px;background:#fff;box-shadow:var(--sh);font-size:14px}
.pb-demo--log i{font:500 12px var(--f-mono);color:var(--muted);font-style:normal}
.pb-demo--log span:first-child b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:8px;vertical-align:1px;animation:pbPulse 1.8s infinite}
/* mobile: tabs become a swipe row */
@media (max-width:820px){
  .pb{grid-template-columns:1fr}
  .pb-tabs{position:static;flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--pad) * -1);padding:4px var(--pad);scrollbar-width:none}
  .pb-tabs::-webkit-scrollbar{display:none}
  .pb-tab{flex:none;scroll-snap-align:start;font-size:15px;padding:12px 14px;white-space:nowrap}
  .pb-tab[aria-selected="true"]{transform:none}
  .pb-panels{min-height:0}
  .pb-demo--phone{gap:16px}
}
@media (prefers-reduced-motion:reduce){.pb-panel.is-on,.is-on .pb-demo>*{animation:none;opacity:1;transform:none}.ph-c{animation:none}}
/* override the old 2-col experience grid; full width head, 3-box numbers row */
#experience .sec.pb-sec{display:block}
#experience .pb-head .sec-h{font-size:clamp(42px,8.4vw,112px)}
.nums{grid-template-columns:1fr 1fr 1fr!important}
@media (max-width:520px){.nums{grid-template-columns:1fr 1fr!important}.nums li:last-child{grid-column:1/-1}}
@media (max-width:820px){#experience .pb-tabs{margin-top:4px}}
/* mobile fix (Nov 13 5pm): grid children can't widen past the screen; tabs scroll inside */
.pb>*{min-width:0}
.pb-panels,.pb-panel{max-width:100%}
@media (max-width:820px){
  .pb-tabs{margin:0 calc(var(--pad) * -1);padding:4px var(--pad);scroll-padding-inline:var(--pad);max-width:none;width:auto}
  .pb-panel{padding:22px 18px;border-radius:20px}
  .pb-demo{padding:12px}
  .pb-demo--intent .q{font-size:14px;padding:11px 12px}
  .pb-src{font-size:10px;line-height:1.5;align-items:flex-start}
  .pb-src::before{margin-top:7px;flex:none}
}
@media (max-width:520px){
  .pb-demo--intent .q{flex-wrap:wrap;row-gap:6px}
  .pb-demo--intent .q b{font-size:9px;padding:3px 7px}
}
/* phone fix (Nov 13 5:40pm): the pinned story was 100svh, so when Chrome's address bar hid, a strip of page showed under the black sheet.
   Size the story to the LARGEST viewport and pad the sheet by the address-bar height, so its text stays visible when the bar is shown
   and the black reaches the bottom when the bar hides. */
@media (max-width:899px){
  @supports (height:100lvh){
    .stage-in{height:100lvh}
    .sheet{padding-bottom:calc(20px + var(--sb) + (100lvh - 100svh))}
  }
}
/* heading reveal (desktop) driven by IntersectionObserver in main.js */
.h-rv .w>span{transform:translateY(112%);transition:transform .6s cubic-bezier(.23,1,.32,1)}
.h-rv.h-in .w>span{transform:none}
@media (prefers-reduced-motion:reduce){.h-rv .w>span{transform:none;transition:none}}


/* heading reveal (desktop) driven by IntersectionObserver in main.js */
.h-rv .w>span{transform:translateY(112%);transition:transform .6s cubic-bezier(.23,1,.32,1)}
.h-rv.h-in .w>span{transform:none}
@media (prefers-reduced-motion:reduce){.h-rv .w>span{transform:none;transition:none}}

/* =================== PLAYBOOK v3 (clean rewrite, Nov 13 8:07pm) ===================
   One console. Desktop: steps column + lesson/demo. Phone: swipeable step row on top, lesson below. */
#experience .sec-h{position:static!important;top:auto!important}
#experience .sec.pb-sec{display:block;max-width:1440px;padding-left:clamp(18px,4vw,64px);padding-right:clamp(18px,4vw,64px)}
#experience .pb-head{max-width:none;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);column-gap:5vw;align-items:end}
#experience .pb-head .kicker{grid-column:1/-1}
#experience .pb-head .sec-h{grid-column:1;font-size:clamp(46px,6.4vw,112px)}
#experience .pb-head .lead{grid-column:2;margin:0 0 .4em;max-width:44ch}

.pb{position:relative;display:grid;grid-template-columns:300px minmax(0,1fr);margin-top:clamp(32px,5vw,60px);
  background:var(--card);border-radius:28px;box-shadow:0 0 0 1px var(--line),var(--sh-lg);overflow:hidden}
.pb>*{min-width:0}
.pb-tabs{display:flex;flex-direction:column;gap:2px;padding:14px;border-right:1px solid var(--line);position:static;margin:0;overflow:visible}
.pb-tab{all:unset;box-sizing:border-box;position:relative;cursor:pointer;display:flex;align-items:center;gap:14px;padding:14px 12px;border-radius:14px;
  font:600 16px/1.25 var(--f-body);color:var(--ink-2);transition:background .2s,color .2s}
.pb-tab .mono{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--muted);font-size:11px;transition:background .25s,color .25s,box-shadow .25s}
.pb-tab:hover{background:rgba(127,127,127,.07)}
.pb-tab:focus-visible{outline:2px solid var(--link);outline-offset:-2px}
.pb-tab[aria-selected="true"]{background:rgba(127,127,127,.09);color:var(--ink)}
.pb-tab[aria-selected="true"] .mono{background:var(--green);color:#fff;box-shadow:none}
.pb-tab[aria-selected="true"]::after{content:"";position:absolute;right:-15px;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--green)}
.pb-tab[aria-selected="true"]::before{content:"";position:absolute;left:56px;right:14px;bottom:7px;height:2px;border-radius:2px;background:var(--green);opacity:.4;transform-origin:left;animation:pbTimer 6s linear forwards}
.pb.pb-stopped .pb-tab::before{display:none}
@keyframes pbTimer{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.pb-panels{display:block;min-height:0}
.pb-panel{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);grid-template-areas:"h demo" "p demo" "src demo";
  column-gap:clamp(28px,3.5vw,56px);align-content:center;height:100%;padding:clamp(28px,3.6vw,48px);background:none;box-shadow:none;border-radius:0;animation:pbIn .45s var(--e-out)}
.pb-panel[hidden]{display:none!important}
.pb-panel h3{grid-area:h;max-width:22ch;font:800 clamp(26px,2.7vw,42px)/1.08 var(--f-display);letter-spacing:-.03em}
.pb-panel>p:not(.pb-src){grid-area:p;margin-top:14px;max-width:60ch;font-size:17px;line-height:1.55;color:var(--ink-2)}
.pb-panel .pb-src{grid-area:src;align-self:end;margin-top:22px;display:flex;gap:8px;align-items:flex-start;font:500 10.5px/1.5 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.pb-panel .pb-src::before{content:"";width:18px;height:1px;margin-top:7px;flex:none;background:var(--line-2)}
.pb-demo{grid-area:demo;align-self:center;justify-self:end;width:100%;max-width:440px;min-width:0;margin:0;padding:16px;border-radius:20px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.pb-demo--intent .q{flex-wrap:wrap;row-gap:6px}
.pb-demo--intent .q b{font-size:9px;padding:3px 7px}
.pb-foot{margin-top:24px;text-align:center}

/* dark mode: a black console, slightly lifted, not grey */
html[data-theme="dark"] .pb{background:#121212;box-shadow:0 0 0 1px rgba(255,255,255,.09),0 30px 60px -24px rgba(0,0,0,.7)}
html[data-theme="dark"] .pb-tabs{border-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .pb-tab{color:#bdbdbd}
html[data-theme="dark"] .pb-tab:not([aria-selected="true"]){background:transparent}
html[data-theme="dark"] .pb-tab:hover{background:rgba(255,255,255,.04)}
html[data-theme="dark"] .pb-tab[aria-selected="true"]{background:rgba(255,255,255,.06);color:#fff}
html[data-theme="dark"] .pb-demo{background:#0a0a0a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
html[data-theme="dark"] .pb-demo--intent .q,html[data-theme="dark"] .pb-demo--tree .leaf,html[data-theme="dark"] .pb-demo--ai .ai-a,html[data-theme="dark"] .pb-demo--log span{background:#1c1c1c;color:#eee}

/* tablet: demo under the copy */
@media (max-width:1100px){
  #experience .pb-head{grid-template-columns:1fr}
  #experience .pb-head .lead{grid-column:1;margin-top:20px}
  .pb{grid-template-columns:260px minmax(0,1fr)}
  .pb-panel{grid-template-columns:1fr;grid-template-areas:"h" "p" "demo" "src"}
  .pb-demo{justify-self:stretch;max-width:none;margin-top:22px}
}
/* phone: steps become a swipe row on top, lesson fills the width below */
@media (max-width:820px){
  .pb{grid-template-columns:1fr;border-radius:22px}
  .pb-tabs{flex-direction:row;gap:4px;padding:10px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .pb-tabs::-webkit-scrollbar{display:none}
  .pb-tab{flex:none;scroll-snap-align:start;white-space:nowrap;padding:10px 12px;gap:10px;font-size:14px}
  .pb-tab .mono{width:24px;height:24px;font-size:10px}
  .pb-tab[aria-selected="true"]::after{left:12px;right:12px;top:auto;bottom:-11px;width:auto;height:3px}
  .pb-tab[aria-selected="true"]::before{display:none}
  .pb-panel{padding:22px 18px}
  .pb-panel h3{font-size:26px}
  .pb-panel>p:not(.pb-src){font-size:16px}
  .pb-demo{padding:12px}
}
@media (prefers-reduced-motion:reduce){.pb-tab::before{display:none}.pb-panel{animation:none}}
.pb .pb-tab,.pb .pb-tab[aria-selected="true"]{box-shadow:none!important;border:0!important;transform:none!important}