/* progplan_v1 · OPEN BOOK (Rowan 12:55 items 5–7 + 13:06/13:11 names). LOCAL BUILD. Loaded after allprograms.css/glass/pp-shelf.css.
   Rollback: remove the pp-book.css <link> and pp-book.js <script> and re-run without tools/build_book.py. */
/* bigger book on desktop: 2 × 380 × 540 (was 2 × 300 × 460) */
@media (min-width:1021px){.ap-ob .ap-ob-book{--pw:380px;--ph:540px}.ap-ob .ap-ob-side{width:300px}.ap-ob .ap-ob-dlg{gap:26px}}
@media (min-width:761px) and (max-width:1020px){.ap-ob .ap-ob-book{--pw:340px;--ph:500px}}
@media (max-width:760px){.ap-ob .ap-ob-book{--ph:440px}}
/* book look: page block under the spread + gutter shadow */
.ap-ob-book::after{content:"";position:absolute;left:6px;right:-6px;bottom:-7px;height:10px;border-radius:0 0 10px 10px;z-index:-1;
  background:repeating-linear-gradient(0deg,#FBF5E6 0 2px,#E6DCC3 2px 3px);box-shadow:0 14px 26px -12px rgba(20,32,74,.45)}
/* LEFT PAGE: two-line label + cover + stills */
.ap-ob-back{gap:12px}
.ap-ob-back .ap-eyebrow{font-size:11px;letter-spacing:.12em}
.ap-ob-back h2.pp-2l{display:flex;flex-direction:column;gap:3px}
.ap-ob-back h2.pp-2l .pp-k{font:700 12px/1.2 var(--font,inherit);letter-spacing:.1em;text-transform:uppercase}
.ap-ob-back h2.pp-2l .pp-n{font:800 28px/1.08 var(--font-d,inherit)}
.ap-ob-back.pp-has-stills .ap-bigcv{width:62%;align-self:center}
.ap-ob-back .pp-stills{margin:auto 0 0;display:flex;flex-direction:column;gap:6px}
.ap-ob-back .pp-strip{display:flex;gap:8px;align-items:stretch}
.ap-ob-back .pp-still{position:relative;flex:1 1 0;min-width:0;background:#FFFDF7;padding:4px 4px 18px;border-radius:4px;box-shadow:0 3px 8px rgba(0,0,0,.25);transform:rotate(-1.5deg)}
.ap-ob-back .pp-still:nth-child(2){transform:rotate(1.2deg)}.ap-ob-back .pp-still:nth-child(3){transform:rotate(-.6deg)}
.ap-ob-back .pp-still img{display:block;width:100%;height:64px;object-fit:cover;border:0;border-radius:2px}
.ap-ob-back .pp-cap{position:absolute;left:0;right:0;bottom:3px;text-align:center;font:600 10px/1.2 var(--font,inherit);color:#14204A}
.ap-ob-back .pp-stills figcaption{font:600 11px/1.3 var(--font,inherit);opacity:1}
.ap-ob-front .ap-plate.pp-2l{display:flex;flex-direction:column;gap:2px}
.ap-ob-front .ap-plate.pp-2l .pp-k{font:700 10.5px/1.2 var(--font,inherit);letter-spacing:.1em;text-transform:uppercase;color:#3E4866}
/* RIGHT PAGE: icon list, short lines, sans for readability; a gentle page-turn as the book opens */
.ap-ob-right{font:15px/1.5 var(--font,inherit);padding:28px 26px}
.ap-ob-right .pp-page h3{font:800 22px/1.2 var(--font-d,inherit);margin:0 0 10px}
.ap-ob-right .pp-lead{margin:0 0 14px;color:#3E4866}
.ap-ob-right .pp-soon{display:inline-block;margin:0 0 10px;padding:2px 10px;border-radius:999px;background:#BF5508;color:#fff;font:700 11px/1.6 var(--font,inherit);letter-spacing:.06em;text-transform:uppercase}
.ap-ob-right .pp-learn{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:12px}
.ap-ob-right .pp-learn li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;margin:0}
.ap-ob-right .pp-learn b{display:block;font:700 15.5px/1.3 var(--font-d,inherit)}
.ap-ob-right .pp-ic{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#FFF1E4;color:#A64508;box-shadow:inset 0 0 0 1px #F2D9C2}
.ap-ob-right .pp-ic-s{width:22px;height:22px}
.ap-ob-right .pp-branches{list-style:none;padding:0;margin:0 0 14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ap-ob-right .pp-branches li{display:flex;align-items:center;gap:8px;margin:0;font:700 14px/1.2 var(--font-d,inherit)}
.ap-ob-right .pp-branches .pp-ic{width:32px;height:32px;border-radius:10px}.ap-ob-right .pp-branches .pp-ic-s{width:18px;height:18px}
.ap-ob-right .pp-note{font-size:13px;color:#3E4866}
.ap-ob-right .ap-more a{font-family:var(--font,inherit);font-weight:700}
/* page-turn: a cream leaf lying on the right page turns over to the spine once the cover has opened (CSS only; restarts on every open) */
.ap-ob-mover{transform-style:preserve-3d}
.ap-ob-right{position:absolute}
.ap-ob-right::after{content:"";position:absolute;inset:0;transform-origin:0 50%;pointer-events:none;border-radius:0 12px 12px 0;
  background:linear-gradient(90deg,#EFE6D2 0,#FFFDF7 18%,#FFFDF7 85%,#F1E8D6 100%);box-shadow:-6px 0 14px -8px rgba(0,0,0,.25);
  animation:ppLeaf .75s cubic-bezier(.45,.05,.25,1) 1.05s both}
@keyframes ppLeaf{0%{transform:perspective(1400px) rotateY(0);opacity:1}85%{opacity:1}100%{transform:perspective(1400px) rotateY(-178deg);opacity:0}}
.ap-ob-right .pp-page{animation:ppText .45s ease-out 1.35s both}
@keyframes ppText{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ap-ob-right::after{display:none;animation:none}.ap-ob-right .pp-page{animation:none}}
/* SIDE PANEL: formats, ONE Register interest + 'or join the waitlist', badges */
.ap-ob-side .pp-side{display:flex;flex-direction:column;gap:12px}
.ap-ob-side .pp-fmt{display:flex;flex-direction:column;gap:4px}
.ap-ob-side .pp-fmt p{margin:0}
.ap-ob-side .pp-tlb{padding-top:10px;border-top:1px solid #E3DCCD}
.ap-ob-side .pp-one{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:0}
.ap-ob-side .pp-one .ap-btn,.ap-ob-side .pp-side>.ap-btn,.ap-ob-side .ap-dev .ap-btn{background:#BF5508;color:#fff;border-color:#BF5508}
.ap-ob-side .pp-one .ap-btn:hover,.ap-ob-side .ap-dev .ap-btn:hover{background:#A64508;border-color:#A64508;color:#fff}
.ap-ob-side .pp-or{margin:0;font-size:13px;color:#3E4866}
.ap-ob-side .pp-or a{color:#1F3B8F;font-weight:700}
.ap-ob-side .pp-badge{display:flex;gap:8px;align-items:flex-start;margin:0;padding:7px 10px;border-radius:10px;font-size:13px;line-height:1.35;color:#14204A}
.ap-ob-side .pp-badge .pp-ic-s{flex:0 0 18px;width:18px;height:18px;margin-top:1px}
.ap-ob-side .pp-bonus{background:#EAF3F8;box-shadow:inset 0 0 0 1px #CFE2EE}
.ap-ob-side .pp-bonus small{display:block;font-size:12px;color:#3E4866}
.ap-ob-side .pp-group{align-self:flex-start;background:#FFF1E4;box-shadow:inset 0 0 0 1px #F2D9C2;font-weight:700;color:#7A3505}
.ap-ob-side .pp-h{margin:0 0 4px;display:flex;flex-direction:column;gap:2px}
.ap-ob-side .pp-h .pp-k{font:700 11.5px/1.2 var(--font,inherit);letter-spacing:.1em;text-transform:uppercase;color:#3E4866}
.ap-ob-side .pp-h .pp-n{font:800 20px/1.15 var(--font-d,inherit);color:#14204A}
@media (max-width:760px){
  .ap-ob-right{padding:14px 10px;font-size:13px;line-height:1.4}
  .ap-ob-right .pp-page h3{font-size:16px}
  .ap-ob-right .pp-learn{gap:9px}.ap-ob-right .pp-learn li{grid-template-columns:28px 1fr;gap:7px}
  .ap-ob-right .pp-learn b{font-size:13.5px}
  .ap-ob-right .pp-ic{width:28px;height:28px;border-radius:8px}.ap-ob-right .pp-ic-s{width:16px;height:16px}
  .ap-ob-right .pp-branches{grid-template-columns:1fr;gap:5px}.ap-ob-right .pp-branches li{font-size:12.5px}
  .ap-ob-right .pp-branches .pp-ic{width:24px;height:24px}
  .ap-ob-back h2.pp-2l .pp-n{font-size:19px}.ap-ob-back h2.pp-2l .pp-k{font-size:10.5px}
  .ap-ob-back.pp-has-stills .ap-bigcv{width:100%}
  .ap-ob-back .pp-strip{flex-direction:column;gap:6px}.ap-ob-back .pp-still img{height:44px}
  .ap-ob-back .pp-still:nth-child(3){display:none}
}
/* 13:29 fix: × must not overlap the options panel (GD at 1280) — reserve a top strip for it on desktop */
@media (min-width:761px){.ap-ob .ap-ob-dlg{padding-top:76px}.ap-ob .ap-ob-x{top:8px;right:8px}}
/* Rowan 13:51 (1): hand-made badges on the book/paper theme. No line icons. Brand colours already in use: #FFFDF7 cream, #FFF1E4 peach,
   #F2D9C2 sand, #BF5508 orange, #7A3505 brown, #14204A navy. Wording unchanged. */
.ap-ob-side .pp-badge{box-shadow:none;border-radius:4px;font-family:var(--font,inherit)}
/* group: a paper luggage tag, stitched edge, punched hole + string, slight tilt */
.ap-ob-side .pp-group{position:relative;display:inline-block;align-self:flex-start;margin:6px 0 2px 10px;padding:7px 12px 7px 26px;background:#FFF1E4;color:#7A3505;font-weight:800;font-size:13px;line-height:1.3;
  border-radius:3px 10px 10px 3px;outline:1.5px dashed #BF5508;outline-offset:-5px;transform:rotate(-1.6deg);
  clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%);filter:drop-shadow(0 2px 2px rgba(122,53,5,.18))}
.ap-ob-side .pp-group::before{content:"";position:absolute;left:12px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#FFFDF7;box-shadow:inset 0 0 0 1.5px #BF5508}
.ap-ob-side .pp-group::after{content:"";position:absolute;left:-10px;top:calc(50% - 1px);width:26px;height:1.5px;background:#7A3505;transform:rotate(-18deg);transform-origin:right center}
/* bonus: a bookmark slip with a torn bottom edge and a small stamp-style label */
.ap-ob-side .pp-bonus{position:relative;display:block;margin:6px 0 4px;padding:10px 12px 16px;background:#FFFDF7;color:#14204A;font-size:13px;line-height:1.4;
  border:1.5px solid #F2D9C2;border-bottom:0;border-radius:4px 4px 0 0;transform:rotate(.6deg);
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 7px) no-repeat,radial-gradient(circle 5px at 50% 100%,transparent 4.5px,#000 5px) bottom/10px 7px repeat-x;
          mask:linear-gradient(#000,#000) top/100% calc(100% - 7px) no-repeat,radial-gradient(circle 5px at 50% 100%,transparent 4.5px,#000 5px) bottom/10px 7px repeat-x;
  background-image:repeating-linear-gradient(0deg,transparent 0 19px,rgba(191,85,8,.10) 19px 20px)}
.ap-ob-side .pp-bonus b{display:inline-block;margin-right:4px;padding:0 6px;border:1.5px solid #BF5508;border-radius:3px;color:#7A3505;font-size:11.5px;letter-spacing:.02em;transform:rotate(-2deg)}
.ap-ob-side .pp-bonus small{color:#3E4866}
@media (prefers-reduced-motion:reduce){.ap-ob-side .pp-group,.ap-ob-side .pp-bonus,.ap-ob-side .pp-bonus b{transform:none}}
/* Rowan 13:51 (3) layout prep: the right page fills from the top with generous spacing (story beats go here once approved) */
.ap-ob-right{display:block}
.ap-ob-right .pp-page{display:flex;flex-direction:column;min-height:100%}
.ap-ob-right .pp-learn{gap:22px;margin-top:6px}
.ap-ob-right .pp-learn li{line-height:1.6}
.ap-ob-right .pp-learn b{margin-bottom:3px}
.ap-ob-right .pp-page .ap-more{margin-top:auto;padding-top:18px}
@media (min-width:1021px){.ap-ob-right{padding:34px 30px 28px}.ap-ob-right .pp-page h3{margin-bottom:14px}.ap-ob-right .pp-lead{margin-bottom:22px;font-size:16px}.ap-ob-right .pp-learn{gap:30px}.ap-ob-right .pp-learn li{font-size:15.5px}}
@media (max-width:760px){.ap-ob-right .pp-learn{gap:14px}.ap-ob-right .pp-page{min-height:0}}
/* Relay 14:00: no line icons in the learn lists. Plain number / dot markers in brand colours; one existing Ted (unchanged) beside the heading, cream page only */
.ap-ob-right .pp-num{display:inline-grid;place-items:center;width:28px;height:28px;margin-top:1px;border-radius:50%;background:#FFF1E4;color:#7A3505;box-shadow:inset 0 0 0 1.5px #BF5508;font:800 14px/1 var(--font-d,inherit)}
.ap-ob-right .pp-learn li{grid-template-columns:28px 1fr}
.ap-ob-right .pp-dot{display:inline-block;width:9px;height:9px;margin-right:10px;border-radius:50%;background:#BF5508;vertical-align:middle;flex:0 0 9px}
.ap-ob-right .pp-h-ted{display:flex;align-items:center;gap:10px}
.ap-ob-right .pp-ted{width:40px;height:40px;flex:0 0 40px;object-fit:contain}
@media (max-width:760px){.ap-ob-right .pp-num{width:24px;height:24px;font-size:12.5px}.ap-ob-right .pp-learn li{grid-template-columns:24px 1fr;gap:8px}.ap-ob-right .pp-ted{width:32px;height:32px;flex-basis:32px}}
.ap-ob-right .pp-branches .pp-dot{margin-right:2px}
/* Rowan 14:02 approved: hero story (Echo / Bytey). A small path: hero at beats 1 and 5 in a glass v1.1 frame, numbers 2–4 between. */
.ap-ob-right .pp-story-page h3{margin:0 0 8px}
.ap-ob-right .pp-goal{margin:0 0 16px;padding:8px 12px;border-left:3px solid #BF5508;background:#FFF1E4;border-radius:0 8px 8px 0;color:#14204A;font:600 14px/1.45 var(--font,inherit)}
.ap-ob-right .pp-goal b{color:#7A3505}
.ap-ob-right .pp-story{list-style:none;margin:0 0 6px;padding:0;position:relative;display:flex;flex-direction:column;gap:14px;font-family:var(--font,inherit)}
.ap-ob-right .pp-story::before{content:"";position:absolute;left:31px;top:20px;bottom:30px;border-left:2px dashed #E3B48F}
.ap-ob-right .pp-beat{position:relative;display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:start;margin:0}
.ap-ob-right .pp-snum{position:relative;justify-self:center;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#FFF1E4;color:#7A3505;box-shadow:inset 0 0 0 1.5px #BF5508,0 0 0 4px #FFFDF7;font:800 14px/1 var(--font-d,inherit)}
.ap-ob-right .pp-btxt{display:flex;flex-direction:column;gap:2px;font-size:13.5px;line-height:1.5;color:#14204A}
.ap-ob-right .pp-lesson{font:800 11.5px/1.3 var(--font-d,inherit);letter-spacing:.06em;text-transform:uppercase;color:#7A3505}
.ap-ob-right .pp-beat-hero .pp-btxt{padding-top:4px}
/* hero frame = glass v1.1 surface (same tokens as glass_v1.css: --gl-blur / --gl-line / --gl-sheen / --gl-rim / --gl-drop; phone blur below 1020px). Flat, no 3D. */
.ap-ob-right .pp-hero{position:relative;display:block;width:64px;height:64px;padding:4px;border-radius:16px;border:1px solid var(--gl-line,rgba(200,208,226,.72));
  background-color:rgba(255,255,255,.66);background-image:var(--gl-sheen);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);box-shadow:var(--gl-rim),var(--gl-drop)}
.ap-ob-right .pp-hero img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;border-radius:12px}
@media (max-width:1020px){.ap-ob-right .pp-hero{-webkit-backdrop-filter:var(--gl-blur-m);backdrop-filter:var(--gl-blur-m)}}
@media (min-width:1021px){.ap-ob-right .pp-story-page h3{margin-bottom:10px}.ap-ob-right .pp-story{gap:13px}}
@media (max-width:760px){
  .ap-ob-right .pp-goal{font-size:12.5px;padding:6px 8px;margin-bottom:12px}
  .ap-ob-right .pp-beat{grid-template-columns:44px 1fr;gap:7px}
  .ap-ob-right .pp-hero{width:44px;height:44px;padding:3px;border-radius:12px}.ap-ob-right .pp-hero img{border-radius:9px}
  .ap-ob-right .pp-story::before{left:21px}
  .ap-ob-right .pp-snum{width:24px;height:24px;font-size:12px}
  .ap-ob-right .pp-btxt{font-size:12.5px;line-height:1.45}.ap-ob-right .pp-lesson{font-size:10.5px}}
@media (forced-colors:active){.ap-ob-right .pp-story::before{border-color:CanvasText}}
/* story pages are taller than the page at 1280 too: scroll inside the page, with a soft paper fade as the "more below" cue */
.ap-ob-right .pp-story-page::after{content:"";position:sticky;bottom:0;display:block;height:26px;margin-top:4px;background:linear-gradient(rgba(255,253,247,0),#FFFDF7 85%);pointer-events:none}
.ap-ob-right{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#E3B48F transparent}
/* Rowan 14:14 short story: one line per lesson, bigger hero art (60px image in the same glass frame), fade only when the page really scrolls */
.ap-ob-right .pp-story-page::after{content:none}
.ap-ob-right.pp-scrolls .pp-story-page::after{content:"";position:sticky;bottom:0;display:block;height:26px;margin-top:4px;background:linear-gradient(rgba(255,253,247,0),#FFFDF7 85%);pointer-events:none}
.ap-ob-right .pp-beat{grid-template-columns:70px 1fr;align-items:center}
.ap-ob-right .pp-hero{width:70px;height:70px;padding:5px;border-radius:18px}
.ap-ob-right .pp-hero img{border-radius:13px}
.ap-ob-right .pp-story::before{left:34px;top:36px;bottom:36px}
.ap-ob-right .pp-beat-hero .pp-btxt{padding-top:0}
.ap-ob-right .pp-btxt{font-size:14.5px;line-height:1.45}
@media (min-width:1021px){.ap-ob-right .pp-story{gap:14px}.ap-ob-right .pp-goal{margin-bottom:18px;font-size:14.5px}}
@media (max-width:760px){
  .ap-ob-right .pp-beat{grid-template-columns:50px 1fr;gap:8px}
  .ap-ob-right .pp-hero{width:50px;height:50px;padding:3px;border-radius:13px}.ap-ob-right .pp-hero img{border-radius:10px}
  .ap-ob-right .pp-story::before{left:24px;top:26px;bottom:26px}
  .ap-ob-right .pp-story{gap:10px}
  .ap-ob-right .pp-btxt{font-size:12.5px;line-height:1.4}}
/* Rowan 14:14 fit at 1280: lesson label runs in on the same line; tighter vertical rhythm, still airy */
.ap-ob-right .pp-btxt{display:block}
.ap-ob-right .pp-lesson{display:inline;margin-right:6px;font-size:11px}
.ap-ob-right .pp-hero{width:66px;height:66px}
.ap-ob-right .pp-beat{grid-template-columns:66px 1fr}
.ap-ob-right .pp-story::before{left:32px}
@media (min-width:1021px){.ap-ob-right{padding-top:26px}.ap-ob-right .pp-story-page h3{margin-bottom:10px}.ap-ob-right .pp-goal{margin-bottom:16px}.ap-ob-right .pp-story{gap:12px}}
@media (max-width:760px){.ap-ob-right .pp-beat{grid-template-columns:50px 1fr}.ap-ob-right .pp-hero{width:50px;height:50px}.ap-ob-right .pp-story::before{left:24px}.ap-ob-right .pp-lesson{font-size:10px}}
/* Rowan 14:16 (2): illustration fills the white frame (no empty band); all frames share one landscape ratio, heads kept in view */
.ap-ob-back img.ap-bigcv.pp-art{aspect-ratio:564/400;height:auto;object-fit:cover;object-position:50% 30%}
/* Rowan 14:16 (1): group tag hangs from the top of the spine on its string, in the dialog's top strip (never over book text, the panel or the ×) */
.ap-ob-book .pp-gtag{position:absolute;left:calc(var(--pw) + 22px);bottom:calc(100% + 12px);z-index:3;margin:0;display:flex;flex-direction:column;gap:1px;
  padding:6px 12px 6px 26px;background:#FFF1E4;color:#7A3505;font:800 12.5px/1.25 var(--font-d,inherit);white-space:nowrap;
  border-radius:3px 9px 9px 3px;outline:1.5px dashed #BF5508;outline-offset:-4px;transform:rotate(-3deg);transform-origin:0 100%;
  clip-path:polygon(11px 0,100% 0,100% 100%,11px 100%,0 50%);filter:drop-shadow(0 2px 2px rgba(122,53,5,.2));pointer-events:none}
.ap-ob-book .pp-gtag span+span{color:#14204A}
.ap-ob-book .pp-gtag::before{content:"";position:absolute;left:11px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#FFFDF7;box-shadow:inset 0 0 0 1.5px #BF5508}
/* the string: from the spine top up to the punched hole */

.ap-ob-book:has(.pp-gtag)::before{content:"";position:absolute;left:var(--pw);top:-30px;width:30px;height:32px;z-index:3;pointer-events:none;
  background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 32'%3E%3Cpath d='M1 31 C 4 18, 14 12, 28 9' fill='none' stroke='%237A3505' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
@media (max-width:760px){.ap-ob-book .pp-gtag{left:calc(var(--pw) + 16px);bottom:calc(100% + 8px);font-size:11px;padding:4px 9px 4px 22px}
  .ap-ob-book:has(.pp-gtag)::before{top:-24px;width:24px;height:26px}}
@media (prefers-reduced-motion:reduce){.ap-ob-book .pp-gtag{transform:none}}
/* fit at 1280 (Rowan 14:14): number beats use a narrow marker column (number stays centred on the path), slightly slimmer page padding */
.ap-ob-right .pp-beat:not(.pp-beat-hero){grid-template-columns:48px 1fr;gap:10px}
.ap-ob-right .pp-beat:not(.pp-beat-hero) .pp-snum{justify-self:end;margin-right:0}
.ap-ob-right .pp-hero{width:66px;height:66px;padding:4px}
@media (min-width:1021px){.ap-ob-right{padding:24px 22px 22px 24px}.ap-ob-right .pp-btxt{font-size:14px;line-height:1.42}.ap-ob-right .pp-goal{font-size:14px;margin-bottom:14px}.ap-ob-right .pp-story{gap:10px}.ap-ob-right .pp-story-page .ap-more{padding-top:10px}}
@media (max-width:760px){.ap-ob-right .pp-beat:not(.pp-beat-hero){grid-template-columns:37px 1fr;gap:7px}
  /* phones: the × sits top-right, so the tag hangs to the LEFT of the spine */
  .ap-ob-book .pp-gtag{left:auto;right:calc(var(--pw) + 16px);transform:rotate(3deg);transform-origin:100% 100%;padding:4px 22px 4px 9px;border-radius:9px 3px 3px 9px;clip-path:polygon(0 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,0 100%)}
  .ap-ob-book .pp-gtag::before{left:auto;right:11px}
  .ap-ob-book:has(.pp-gtag)::before{left:auto;right:var(--pw);transform:scaleX(-1)}}
@media (max-width:760px){.ap-ob-right .pp-hero{width:50px;height:50px;padding:3px}}
.ap-ob-right .pp-lesson{white-space:nowrap}
.ap-ob-right .pp-btxt{min-width:0;overflow-wrap:break-word}
/* ===== Rowan 14:31 desktop: beats spread evenly down to 'See the course' (no inner scroll); bigger cover art, whole picture (no crop) ===== */
.ap-ob-right .pp-story-page{min-height:100%;box-sizing:border-box}
.ap-ob-right .pp-story{flex:1 1 auto;justify-content:space-between;min-height:0}
.ap-ob-right .pp-story-page .ap-more{margin-top:14px}
.ap-ob-back img.ap-bigcv.pp-art,.ap-ob-back.pp-has-stills img.ap-bigcv.pp-art{width:100%;aspect-ratio:auto;height:auto;object-fit:contain;align-self:stretch}
/* AI for Business (plain list) fits at 1280: spacing and sizes only, same text */
@media (min-width:1021px){.ap-ob-right .pp-biz .pp-soon{margin-bottom:8px}.ap-ob-right .pp-biz h3{margin-bottom:8px}.ap-ob-right .pp-biz .pp-lead{margin-bottom:12px;font-size:15px;line-height:1.45}
  .ap-ob-right .pp-biz .pp-learn{gap:12px}.ap-ob-right .pp-biz .pp-learn li{font-size:14px;line-height:1.45}.ap-ob-right .pp-biz .pp-learn b{font-size:14.5px;margin-bottom:1px}
  .ap-ob-right .pp-biz .pp-note{margin:10px 0 0;font-size:13px}.ap-ob-right .pp-biz .ap-more{padding-top:8px}}
/* ===== Rowan 14:30 PHONES (<=760px): stacked open book. Cover (compact) -> story (full width, page grows) -> options panel. The dialog scrolls. ===== */
@media (max-width:760px){
  .ap-ob .ap-ob-dlg{overflow-y:auto;overflow-x:hidden;padding-top:60px}
  .ap-ob .ap-ob-x{position:fixed;top:14px;right:14px;z-index:6}
  .ap-ob .ap-ob-book{width:100%;height:auto;perspective:none;--ph:auto}
  .ap-ob .ap-ob-mover{position:relative;inset:auto;transform:none!important;display:flex;flex-direction:column}
  .ap-ob .ap-ob-leftbg{display:none}
  .ap-ob .ap-ob-lid{position:relative;left:0;top:0;width:100%;height:auto;transform:none!important;transform-style:flat}
  .ap-ob .ap-ob-front{display:none}
  .ap-ob .ap-ob-back{position:relative;inset:auto;transform:none;-webkit-backface-visibility:visible;backface-visibility:visible;border-radius:12px 12px 0 0;
    display:grid;grid-template-columns:58% 1fr;gap:8px 12px;align-items:start;padding:14px 14px 12px;overflow:visible}
  .ap-ob .ap-ob-back > *{grid-column:1/-1;min-width:0}
  .ap-ob .ap-ob-back img.ap-bigcv{grid-column:1;width:100%;margin:0}
  .ap-ob .ap-ob-back.pp-has-stills .pp-stills{grid-column:2;margin:0;gap:4px}
  .ap-ob .ap-ob-back:not(.pp-has-stills) img.ap-bigcv{grid-column:1/-1;width:72%;justify-self:center}
  .ap-ob .ap-ob-back .pp-strip{flex-direction:column;gap:6px}
  .ap-ob .ap-ob-back .pp-still{padding:3px 3px 14px}.ap-ob .ap-ob-back .pp-still img{height:40px}.ap-ob .ap-ob-back .pp-cap{font-size:9.5px;bottom:2px}
  .ap-ob .ap-ob-back .pp-still:nth-child(3){display:block}
  .ap-ob .ap-ob-back .pp-stills figcaption{font-size:10px}
  .ap-ob .ap-ob-right{position:relative;left:0;top:0;width:100%;height:auto;overflow:visible;border-radius:0 0 12px 12px;border-left:0;box-shadow:none;padding:18px 16px 20px}
  .ap-ob .ap-ob-right .pp-page{min-height:0}
  .ap-ob .ap-ob-right.pp-scrolls .pp-story-page::after{content:none}
  .ap-ob .ap-ob-right .pp-story{gap:14px;justify-content:flex-start}
  .ap-ob .ap-ob-right .pp-btxt{font-size:14px;line-height:1.45}.ap-ob .ap-ob-right .pp-lesson{font-size:10.5px}
  .ap-ob .ap-ob-right .pp-goal{font-size:13.5px}
  .ap-ob .ap-ob-right .pp-beat.pp-beat-hero{grid-template-columns:56px 1fr;gap:10px}
  .ap-ob .ap-ob-right .pp-beat:not(.pp-beat-hero){grid-template-columns:43px 1fr;gap:10px}
  .ap-ob .ap-ob-right .pp-hero{width:56px;height:56px;padding:4px}
  .ap-ob .ap-ob-right .pp-story::before{display:block;left:27px}
  /* group tag: tucked just below the book, right-aligned above the options panel (clear of the site header and the x) */
  .ap-ob .ap-ob-book .pp-gtag{position:relative;left:auto;right:auto;bottom:auto;width:max-content;margin:12px 6px 0 auto;transform:rotate(-2deg);transform-origin:50% 50%}
  .ap-ob .ap-ob-book:has(.pp-gtag)::before{content:none}
}
/* ===== Rowan 14:33 consistency + 14:35 rings ===== */
/* one marker column everywhere: plain-list numbers sit on the same centre line as the story numbers (desktop 33px in from the text edge) */
.ap-ob-right .pp-learn li{grid-template-columns:48px 1fr;gap:10px}
.ap-ob-right .pp-learn .pp-num{justify-self:end}
/* even spacing for the plain lists too: the list spreads down to 'See the course' */
.ap-ob-right .pp-page{display:flex;flex-direction:column;min-height:100%;box-sizing:border-box}
@media (min-width:761px){.ap-ob-right .pp-learn{flex:0 1 auto;justify-content:space-evenly;flex-grow:1;max-height:420px}}
/* metal binder rings along the gutter (same brushed steel + highlight as the shelf books, scaled down), decorative */
.ap-ob .pp-rings{position:absolute;left:calc(var(--pw) - 8px);top:22px;bottom:22px;width:16px;z-index:6;pointer-events:none;
  background:linear-gradient(90deg,#6F7783 0%,#B8BFC9 28%,#F4F6F9 46%,#A3AAB5 64%,#5F6672 100%);
  -webkit-mask:radial-gradient(50% 22% at 50% 50%,#000 88%,transparent 100%) 0 0/100% 26px repeat-y;
          mask:radial-gradient(50% 22% at 50% 50%,#000 88%,transparent 100%) 0 0/100% 26px repeat-y;
  filter:drop-shadow(0 1px 1px rgba(20,32,74,.25))}
@media (max-width:760px){
  .ap-ob .ap-ob-lid{order:0}.ap-ob .pp-rings{order:1}.ap-ob .ap-ob-right{order:2}
  .ap-ob .pp-rings{position:relative;left:auto;top:auto;bottom:auto;width:auto;height:16px;margin:-8px 22px;flex:0 0 16px;
    background:linear-gradient(180deg,#6F7783 0%,#B8BFC9 28%,#F4F6F9 46%,#A3AAB5 64%,#5F6672 100%);
    -webkit-mask:radial-gradient(22% 50% at 50% 50%,#000 88%,transparent 100%) 0 0/26px 100% repeat-x;
            mask:radial-gradient(22% 50% at 50% 50%,#000 88%,transparent 100%) 0 0/26px 100% repeat-x}
  .ap-ob .ap-ob-back.pp-has-stills img.ap-bigcv.pp-art,.ap-ob .ap-ob-back img.ap-bigcv.pp-art{align-self:start}
  .ap-ob .ap-ob-right .pp-beat:not(.pp-beat-hero){grid-template-columns:40px 1fr}
  .ap-ob .ap-ob-right .pp-learn li{grid-template-columns:40px 1fr;gap:10px}
  .ap-ob .ap-ob-right .pp-num{width:24px;height:24px}
  .ap-ob .ap-ob-right .pp-story-page{min-height:0}
}
/* phones: the page grows with its content (no trailing margin overflow); Maths branch dots on the shared marker centre line; Maths list spaced evenly on desktop */
.ap-ob-right .pp-page > :last-child,.ap-ob-right .ap-more{margin-bottom:0}
.ap-ob-right .pp-branches li:nth-child(odd){padding-left:29px}
@media (min-width:761px){.ap-ob-right .pp-branches{flex:1 1 auto;align-content:space-evenly;max-height:300px}}
@media (max-width:760px){.ap-ob-right .pp-branches li:nth-child(odd),.ap-ob-right .pp-branches li{padding-left:23px}}
.ap-ob-right .ap-more a{display:inline-block}
@media (max-width:760px){.ap-ob .ap-ob-right{padding-bottom:14px}.ap-ob .ap-ob-right .pp-page{padding-bottom:6px}}
@media (max-width:760px){.ap-ob .ap-ob-right{overflow:hidden}}
/* ===== 14:47 (1) ONE fixed marker column for every beat and list item: hero frame / number circle centred inside it, text starts at the same x ===== */
.ap-ob .ap-ob-right .pp-beat,.ap-ob .ap-ob-right .pp-beat.pp-beat-hero,.ap-ob .ap-ob-right .pp-beat:not(.pp-beat-hero),
.ap-ob .ap-ob-right .pp-learn li{grid-template-columns:66px 1fr;column-gap:10px}
.ap-ob .ap-ob-right .pp-beat .pp-snum,.ap-ob .ap-ob-right .pp-beat:not(.pp-beat-hero) .pp-snum,.ap-ob .ap-ob-right .pp-learn .pp-num{justify-self:center;margin:0}
.ap-ob .ap-ob-right .pp-beat .pp-hero{justify-self:center;width:66px;height:66px;max-width:66px;box-sizing:border-box}
.ap-ob .ap-ob-right .pp-story::before{left:33px}
@media (min-width:761px){.ap-ob .ap-ob-right .pp-story::before{left:calc(24px + 33px - 1px)}}
@media (max-width:760px){
  .ap-ob .ap-ob-right .pp-beat,.ap-ob .ap-ob-right .pp-beat.pp-beat-hero,.ap-ob .ap-ob-right .pp-beat:not(.pp-beat-hero),
  .ap-ob .ap-ob-right .pp-learn li{grid-template-columns:48px 1fr;column-gap:10px}
  .ap-ob .ap-ob-right .pp-beat .pp-hero{width:48px;height:48px;max-width:48px;padding:3px;border-radius:13px}
  .ap-ob .ap-ob-right .pp-hero img{border-radius:10px}
  .ap-ob .ap-ob-right .pp-story::before{left:calc(16px + 24px - 1px)}
  .ap-ob .ap-ob-right .pp-branches li,.ap-ob .ap-ob-right .pp-branches li:nth-child(odd){padding-left:19.5px}}
.ap-ob .ap-ob-right .pp-story::before{left:32px!important}@media (max-width:760px){.ap-ob .ap-ob-right .pp-story::before{left:23px!important}}
/* ===== 14:47 (2) group tag = one complete inline SVG; reset the older CSS-drawn tag ===== */
.ap-ob-book:has(.pp-gtag)::before{content:none!important}
.ap-ob .ap-ob-book .pp-gtag{clip-path:none;outline:0;background:none;padding:0;border-radius:0;display:block;white-space:normal;
  position:absolute;left:calc(var(--pw) - 2px);bottom:calc(100% + 2px);width:220px;height:56px;transform:rotate(-2deg);transform-origin:2px 54px;
  filter:drop-shadow(0 2px 2px rgba(122,53,5,.18));pointer-events:none;margin:0;z-index:3}
.ap-ob .ap-ob-book .pp-gtag::before,.ap-ob .ap-ob-book .pp-gtag::after{content:none}
.ap-ob .pp-gtag .pp-gtag-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.ap-ob .pp-gtag .pp-str-m{display:none}
.ap-ob .pp-gtag .pp-gtag-t{position:absolute;left:60px;top:10px;width:148px;height:36px;display:flex;flex-direction:column;justify-content:center;
  background:#FFF1E4;color:#7A3505;font:800 12.5px/1.25 var(--font-d,inherit);white-space:nowrap}
.ap-ob .pp-gtag .pp-gtag-t span+span{color:#14204A}
@media (max-width:760px){
  .ap-ob .ap-ob-book .pp-gtag{position:relative;left:auto;right:auto;bottom:auto;width:190px;height:48px;margin:0 6px 0 auto;transform:none}
  .ap-ob .pp-gtag .pp-str-d{display:none}.ap-ob .pp-gtag .pp-str-m{display:inline}
  .ap-ob .pp-gtag .pp-gtag-t{left:52px;top:8.5px;width:126px;height:31px;font-size:11px}}
@media (prefers-reduced-motion:reduce){.ap-ob .ap-ob-book .pp-gtag{transform:none}}
/* 14:47 tag: no rotation, sits right on the book top so the string meets the spine; >=8px below the dimmed header at 1280 */
@media (min-width:761px){.ap-ob .ap-ob-book .pp-gtag{transform:none;bottom:calc(100% + 1px)}}