/* Notebook of a COO: every page except the home page, on top of core.css.
   These pages keep their live words, links, forms and page scripts exactly (JT, Sep 18 2026: "It is
   simply a cosmetic redesign"); only the look changes. Each page still carries its own small style
   block from the live site; tools/restyle_css.py moves those onto the new type and colours at build
   time, and this sheet restyles the parts every page shares. body.pg scopes all of it. */

/* the names the live pages' own styles use, now pointing at direction C */
.pg{
  --black:var(--ground); --card:var(--surface); --surface-2:var(--surface);
  --gold:#E2C878; --gold-light:#EDD9A0; --gold-dim:rgba(226,200,120,0.10); --gold-border:rgba(226,200,120,0.32);
  --gradient-gold:var(--gold-grad);
  --white:#FFFFFF; --cream:#FFFFFF; --text:rgba(255,255,255,0.74); --text-bright:rgba(255,255,255,0.90); --text-muted:rgba(255,255,255,0.52);
  --border-subtle:var(--line); --display:var(--font); --display-bold:var(--font); --sans:var(--font);
  --t:.28s ease; --max-w:1160px;
  --radius-sm:20px;
}
/* the page's own content (everything in <main>) reads as it did live: its text tone and leading,
   and the zero margin, zero padding reset its spacing assumes. Only inside <main>, so the shared
   menu and footer compute exactly as on the home page (tools/check_shell_same.py) */
.pg #top{color:rgba(255,255,255,0.74);line-height:1.7}
:where(.pg #top) *{margin:0;padding:0}
:where(.pg #top) ul,:where(.pg #top) ol{list-style:none}
:where(.pg #top) :where(h1,h2,h3,h4,h5,h6){font-family:var(--font);font-weight:700;color:var(--ink);line-height:1.1;letter-spacing:-0.025em;text-wrap:balance}
:where(.pg #top) h2{font-size:clamp(32px,4.2vw,58px);line-height:1.03;letter-spacing:-0.045em}
:where(.pg #top) h3{font-size:clamp(22px,2vw,28px);line-height:1.15}
:where(.pg #top) h4{font-size:clamp(19px,1.5vw,22px);line-height:1.2}
:where(.pg #top) p{text-wrap:pretty}
:where(.pg #top) strong,:where(.pg #top) b{color:var(--ink);font-weight:700}
:where(.pg #top) a{transition:color .2s ease}
:where(.pg #top) :where(input,select,textarea,button){font:inherit;color:inherit}
.pg #top{display:block}

/* sections sit on one ground, as on the home page; cards carry the surfaces */
.pg .section{padding:clamp(72px,8.5vw,128px) 0}
/* the live pages gave every plain section its room from noc-v4.css ("body.v4 > section"); the
   sections now sit inside <main>, so the rhythm is set here, at zero specificity (a page's own
   padding wins, as it did live) */
:where(.pg.v4 #top > section){padding:clamp(72px,8.5vw,128px) 0}
.pg .surface{background:transparent}
.pg #top section[style*="background"]{background:transparent !important}
.pg hr.divider{border:0;border-top:1px solid var(--line);max-width:calc(var(--max) - 2 * var(--pad));margin:0 auto}
.pg .tc{text-align:center}
.pg .tc h2,.pg .tc > p{margin-left:auto;margin-right:auto}
.pg .label,.pg .card__eyebrow,.pg .v3-eyebrow{display:block;margin-bottom:16px;font:600 13px/1.3 var(--font);letter-spacing:0.14em;text-transform:uppercase;color:var(--accent)}
.pg .rule,.pg .rule--center{display:none}
.pg .reveal,.pg [data-reveal]{opacity:1;transform:none}

/* buttons: the home page's pills, gold or glass, whatever the live markup calls them. Only in the
   page content (the shared menu's own button stays as on the home page), at low specificity so a
   page's own button rules still win, as they did live */
:where(.pg #top) .btn,:where(.pg #top) .btn--gold,:where(.pg #top) .btn--dark,:where(.pg #top) .v3-btn,:where(.pg #top) .v3-btn--white,:where(.pg #top) .v3-btn--gold{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;height:auto;padding:14px 30px;border-radius:999px;border:0;background-color:var(--gold-flat);background-image:var(--gold-grad);color:var(--on-gold);font:700 16px/1.2 var(--font);letter-spacing:0;text-transform:none;text-align:center;white-space:nowrap;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,0.22);transition:background-color .3s ease,color .3s ease,box-shadow .3s ease;cursor:pointer}
:where(.pg #top) .btn:hover,:where(.pg #top) .v3-btn:hover{background-image:none;background-color:rgba(226,200,120,0.14);color:#FFFFFF;box-shadow:inset 0 0 0 1.5px var(--accent)}
:where(.pg #top) .btn--ghost,:where(.pg #top) .v3-btn--ghost{background:rgba(255,255,255,0.10);background-image:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.55);color:#FFFFFF;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
:where(.pg #top) .btn--ghost:hover,:where(.pg #top) .v3-btn--ghost:hover{background-color:#FFFFFF;color:var(--ground);box-shadow:none}
:where(.pg #top) .btn--lg,:where(.pg #top) .v3-btn--lg{min-height:64px;padding:16px 38px;font-size:18px}
:where(.pg #top) .btn--sm{min-height:44px;padding:10px 20px;font-size:14px}
:where(.pg #top) .btn i,:where(.pg #top) .v3-btn i{font-size:0.9em}

/* the first frame: the live hero photo in a rounded frame, copy bottom left, like the home page */
.pg .v3-billboard{position:relative;isolation:isolate;display:flex;align-items:flex-end;margin:12px;min-height:min(84vh,880px);border-radius:var(--radius);overflow:hidden;background:#111}
.pg .v3-billboard__img{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;background-repeat:no-repeat}
.pg .v3-billboard::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,0.66) 0%,rgba(0,0,0,0.30) 50%,rgba(0,0,0,0.06) 82%),linear-gradient(0deg,rgba(0,0,0,0.72) 0%,rgba(0,0,0,0) 58%)}
.pg .v3-billboard__inner{position:relative;width:100%;max-width:1040px;padding:150px calc(12px + var(--pad)) calc(12px + var(--pad));display:flex;flex-direction:column;align-items:flex-start;gap:20px;color:#FFFFFF}
/* hidden on the live pages too: the chips everywhere; the intro paragraph and the meta line on the
   pages whose body carries the v4 class (noc-v4.css), which is all but nine newer episodes */
.pg .v3-billboard__chips,.pg.v4 .v3-billboard__sub,.pg.v4 .v3-billboard__meta{display:none}
.pg .v3-billboard__title{font-size:clamp(40px,5.4vw,84px);line-height:0.99;letter-spacing:-0.045em;max-width:17ch}
.pg .v3-billboard__title em{color:var(--hero-accent)}
.pg .v3-rotate__word{display:block}
.pg .v3-rotate__word .in{display:inline-block;max-width:100%;transition:opacity .36s ease,transform .36s ease}
.pg .v3-rotate__word .in.is-out{opacity:0;transform:translateY(0.18em)}
.pg .v3-billboard__sub,.pg .v3-billboard .v3-rotate{max-width:640px;font-size:19px;line-height:1.5;color:rgba(255,255,255,0.88)}
.pg .v3-billboard .sbm-disclosure{max-width:620px;font-size:14px;line-height:1.5;color:rgba(255,255,255,0.72)}
.pg .v3-billboard__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.pg .v3-billboard + .v3-billboard,.pg #top > .v3-billboard:not(.pg-hero){margin-top:var(--section)}
/* the load intro's starting states (desktop, motion allowed); core.js plays it and lifts the class */
.intro-pending .pg-hero{clip-path:inset(30% 34% 30% 34% round 999px)}
.intro-pending .pillnav>*,.intro-pending .pg-hero .v3-billboard__inner>*,.intro-pending .pg-hero .announce{opacity:0}
/* the live pages' top bar, now a glass pill at the top of the first frame (as on the home page) */
.pg .pg-hero .announce{z-index:3}
.pg .announce--flow{position:relative;top:auto;left:auto;right:auto;margin:104px auto 0}

/* episode pages: the episode's own thumbnail beside the title (JT, Sep 18), not a shared photo */
.pg .v3-billboard--ep{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(28px,4vw,64px);min-height:0;padding:150px calc(12px + var(--pad)) calc(12px + var(--pad));background:radial-gradient(ellipse at 78% 0%,rgba(226,200,120,0.16) 0%,rgba(226,200,120,0) 58%),var(--surface)}
.pg .v3-billboard--ep::after{display:none}
.pg .v3-billboard--ep .v3-billboard__img{position:relative;inset:auto;z-index:0;order:2;aspect-ratio:16/9;border-radius:var(--card-radius);box-shadow:0 30px 80px -30px rgba(0,0,0,0.9);border:1px solid var(--line)}
.pg .v3-billboard--ep .v3-billboard__inner{padding:0;max-width:none}
.pg .v3-billboard--ep .v3-billboard__title{font-size:clamp(36px,4.2vw,64px);max-width:none}
.pg .v3-billboard--ep .v3-billboard__sub{font-size:17px;line-height:1.6;color:rgba(255,255,255,0.78)}
/* JT, Sep 19: "yes I want it shown on all of them": the episode summary the old stylesheet hid */
.pg.v4 .v3-billboard--ep .v3-billboard__sub{display:block}

/* the big opening line under the frame */
.pg .v4-lede{padding-bottom:0}
.pg .v4-lede p{max-width:1080px;font-weight:500;font-size:clamp(22px,2.4vw,34px);line-height:1.32;letter-spacing:-0.02em;color:var(--muted)}

/* cards, quotes and lists every page shares */
.pg .card{padding:clamp(26px,3vw,40px);border-radius:var(--card-radius);background:var(--surface);border:1px solid var(--line)}
.pg .card--gold{border-color:var(--gold-border);background:radial-gradient(ellipse at 50% -10%,rgba(226,200,120,0.18) 0%,rgba(226,200,120,0) 60%),var(--surface)}
.pg .quote-block{padding:clamp(26px,3vw,40px);border-radius:var(--card-radius);background:var(--surface);border:1px solid var(--line)}
.pg .quote-block p{font-weight:600;font-size:clamp(20px,1.9vw,26px);line-height:1.35;letter-spacing:-0.02em;color:var(--ink)}
.pg .quote-block cite{display:block;margin-top:18px;font:600 13px/1.3 var(--font);font-style:normal;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent)}
.pg .check-list{display:flex;flex-direction:column;gap:12px}
.pg .check-list li{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.5;color:var(--muted)}
.pg .check-list li i{flex:none;margin-top:4px;font-size:13px;color:var(--accent)}
.pg .ai-feature{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.pg .ai-feature img{display:block;width:100%;height:auto}
.pg .sbm-disclosure{max-width:62ch;font-size:14px;line-height:1.5;color:var(--faint)}
.pg .v3-h2{font-size:clamp(34px,4.4vw,62px);line-height:1.02;letter-spacing:-0.045em}
.pg .v3-h2 em{color:var(--accent)}
.pg .v3-lede{margin-top:16px;max-width:640px;font-size:19px;line-height:1.55;color:var(--muted)}

/* the episode notes: a reading column */
.pg .ep-notes .wrap{max-width:900px}
.pg .ep-notes h2{margin:4px 0 22px;font-size:clamp(30px,3.4vw,46px)}
.pg .ep-notes h3{margin:44px 0 16px;font-size:clamp(22px,2vw,26px)}
.pg .ep-notes__lede{margin:0 0 16px;font-size:19px;line-height:1.65;color:rgba(255,255,255,0.84)}
.pg .ep-notes__list li{position:relative;margin:0 0 14px;padding-left:28px;font-size:17px;line-height:1.6;color:var(--muted)}
.pg .ep-notes__list li::before{content:"";position:absolute;left:0;top:0.78em;width:12px;height:2px;border-radius:2px;background:var(--accent)}
.pg .ep-faq{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.pg .ep-faq details{padding:18px 22px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.pg .ep-faq summary{display:flex;gap:12px;cursor:pointer;list-style:none;font-weight:600;font-size:17px;line-height:1.45;color:var(--ink)}
.pg .ep-faq summary::-webkit-details-marker{display:none}
.pg .ep-faq summary::before{content:"+";flex:none;width:14px;color:var(--accent);font-weight:700}
.pg .ep-faq details[open] summary::before{content:"\2212"}
.pg .ep-faq p{margin:12px 0 0 26px;font-size:16px;line-height:1.65;color:var(--muted)}

/* the closing block: the home page's closing line over a gold glow */
.pg .cta-strip,.pg .final-cta{position:relative;overflow:hidden;padding:var(--section) 0;text-align:center}
.pg .cta-strip::before,.pg .final-cta::before{content:"";position:absolute;left:50%;bottom:-38%;width:min(1400px,160vw);height:90%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 60%,rgba(226,200,120,0.40) 0%,rgba(226,200,120,0.10) 42%,rgba(0,0,0,0) 70%);pointer-events:none}
.pg .cta-strip .wrap,.pg .final-cta .wrap{position:relative;max-width:1140px;display:flex;flex-direction:column;align-items:center;gap:24px}
.pg .cta-strip h2,.pg .final-cta h2{max-width:none;font-size:clamp(40px,6vw,92px);line-height:0.98;letter-spacing:-0.055em;color:var(--ink)}
.pg .cta-strip p,.pg .final-cta p{max-width:720px;margin:0;font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--muted)}
.pg .cta-strip .cta-strip__note{font-size:14px;color:var(--faint)}

/* the podcast strip some pages end with */
.pg .podcast-strip{padding:clamp(40px,5vw,72px) 0}
.pg .podcast-strip__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:clamp(26px,3vw,40px);border-radius:var(--card-radius);border:1px solid var(--line);background:var(--surface)}
.pg .podcast-strip__left h3{margin:2px 0 8px}
.pg .podcast-strip__platforms{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pg .podcast-strip__platforms > a:not(.btn){display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--glass-line);color:var(--ink);font-weight:600;font-size:15px;text-decoration:none}

/* episode framework cards: four older episodes never styled theirs (they stack as plain text on
   live); every episode now shows the same cards. Zero specificity, so a page's own rules win */
:where(.pg) .framework-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:40px}
:where(.pg) .framework-item{padding:32px 28px;border:1px solid var(--line);border-radius:var(--card-radius);background:var(--surface)}
:where(.pg) .framework-item__num{margin-bottom:10px;font-weight:700;font-size:clamp(30px,2.6vw,36px);line-height:1;letter-spacing:-0.04em;color:var(--accent)}
:where(.pg) .framework-item h4{margin-bottom:8px;font-size:19px}
:where(.pg) .framework-item p{font-size:15px;line-height:1.6;color:rgba(255,255,255,0.55)}
@media (max-width: 900px){ :where(.pg) .framework-grid{grid-template-columns:minmax(0,1fr) !important} }

/* parts whose looks lived only in the old shared stylesheets (tools/scan_script_classes.py and the
   unstyled-class list find them; tools/port_old_rules.py carried each over, restyled) */
/* the workshops page's "how it works" steps */
.pg .v3-steps__head{margin-bottom:40px}
.pg .v3-step{display:grid;grid-template-columns:72px minmax(0,1fr);gap:22px;padding:24px 0;border-top:1px solid var(--line)}
.pg .v3-step:last-child{border-bottom:1px solid var(--line)}
.pg .v3-step__num{font-weight:700;font-size:clamp(28px,2.6vw,40px);line-height:1;letter-spacing:-0.04em;color:var(--accent);font-variant-numeric:tabular-nums}
.pg .v3-step h4{margin:0 0 6px;font-size:clamp(20px,1.8vw,24px)}
.pg .v3-step p{max-width:720px;font-size:17px;line-height:1.6;color:var(--muted)}
/* the MBA pages' loading screen (their own markup and script) and its 3.2s fail-safe, so a script
   that never runs can never leave the page covered */
.pg #noc-pre{transition:opacity .6s ease,visibility .6s;animation:nocPreFail 0s 3.2s forwards}
.pg #noc-pre.is-done{opacity:0;visibility:hidden;pointer-events:none}
.pg #noc-pre .pre-mark{margin-bottom:26px;font:600 13px/1 var(--font);letter-spacing:0.3em;text-transform:uppercase;color:var(--accent)}
.pg #noc-pre .pre-count{font-weight:700;font-size:clamp(48px,8vw,88px);line-height:1;letter-spacing:-0.04em;color:#FFFFFF;font-variant-numeric:tabular-nums}
.pg #noc-pre .pre-bar{position:relative;overflow:hidden;margin-top:26px;width:200px;height:2px;border-radius:2px;background:rgba(255,255,255,0.14)}
.pg #noc-pre .pre-bar > span{position:absolute;inset:0 100% 0 0;background:var(--gold-grad)}
@keyframes nocPreFail{to{opacity:0;visibility:hidden;pointer-events:none}}
@media (prefers-reduced-motion: reduce){.pg #noc-pre{display:none !important}}
/* the result pages' personal result card, built by assessment-result.js from the visitor's score */
.pg .ar{padding:40px 0 0}
.pg .ar__card{padding:clamp(24px,3vw,34px);border-radius:var(--card-radius);border:1px solid var(--line);background:var(--surface)}
.pg .ar__top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.pg .ar__eyebrow,.pg .ar-prog__h,.pg .ar-play__h{font:600 13px/1.3 var(--font);letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.5)}
.pg .ar-prog__h,.pg .ar-play__h{margin-bottom:12px}
.pg .ar__greet{margin:8px 0 0;font-size:20px;font-weight:600;color:#FFFFFF}
.pg .ar__score{font-weight:700;font-size:clamp(28px,3vw,36px);line-height:1;letter-spacing:-0.03em;color:var(--accent);white-space:nowrap}
.pg .ar-prog{margin-bottom:24px}
.pg .ar-prog__row{display:grid;grid-template-columns:96px 1fr 72px 44px;gap:10px;align-items:center;padding:8px 0;font-size:15px;color:rgba(255,255,255,0.6)}
.pg .ar-prog__row + .ar-prog__row{border-top:1px solid var(--line)}
.pg .ar-prog__row.is-now{color:#FFFFFF;font-weight:600}
.pg .ar-prog__d,.pg .ar-prog__p{white-space:nowrap;font-variant-numeric:tabular-nums}
.pg .ar-prog__p{text-align:right}
.pg .ar-prog__a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg .ar-prog__bar{height:5px;border-radius:3px;background:rgba(255,255,255,0.08);overflow:hidden}
.pg .ar-prog__bar i{display:block;height:100%;border-radius:3px;background:rgba(226,200,120,0.5)}
.pg .ar-prog__row.is-now .ar-prog__bar i{background:var(--accent)}
.pg .ar-prog__note{margin:12px 0 0;font-size:15px;color:rgba(255,255,255,0.5)}
.pg .ar-prog__note.is-up{color:#7FD79A}
.pg .ar-prog__note.is-down{color:#FFA06A}
.pg .ar-play{padding-top:22px;border-top:1px solid var(--line)}
.pg .ar-play__lead{margin:0 0 16px;font-size:16px;color:var(--muted)}
.pg .ar-play__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pg .ar-play__item{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,0.02);text-decoration:none;transition:border-color .2s ease,background .2s ease}
.pg .ar-play__item:hover{border-color:rgba(226,200,120,0.5);background:rgba(226,200,120,0.06)}
.pg .ar-play__t{display:block;margin-bottom:3px;font-weight:700;font-size:16px;color:#FFFFFF}
.pg .ar-play__d{display:block;font-size:15px;line-height:1.5;color:rgba(255,255,255,0.55)}
.pg .ar__cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.pg .ar__cta-note{max-width:40ch;font-size:15px;line-height:1.5;color:rgba(255,255,255,0.45)}

/* two layout faults the live workshops page already has on phones, which the new type made worse
   (check_pages.py measured both, live and rebuilt): the feature card's photo takes 46% of the
   card's height once the card stacks, a height its own content sets, so the text ran out of the
   card and was cut off (live cuts 245px); and its grid's 340px column is wider than a 360px phone
   (live hides the extra 4px with overflow-x:hidden) */
@media (max-width: 820px){ .pg .wk-card2.feature .wk-card2__img{flex:0 0 auto} }
@media (max-width: 420px){ .pg .wk-grid{grid-template-columns:minmax(0,1fr)} }

/* phones */
@media (max-width: 640px){
  .pg .ar-play__grid{grid-template-columns:1fr}
  .pg .ar-prog__row{grid-template-columns:88px 1fr 44px}
  .pg .ar-prog__bar{display:none}
  .pg .ar__score{font-size:24px}
}
@media (max-width: 520px){
  .pg .v3-step{grid-template-columns:1fr;gap:8px;padding:18px 0}
}
@media (max-width: 900px){
  .pg .v3-billboard--ep{grid-template-columns:minmax(0,1fr);padding-top:136px}
  .pg .v3-billboard--ep .v3-billboard__img{order:0}
}
@media (max-width: 760px){
  .pg .v3-billboard{margin:10px;min-height:min(88vh,760px);border-radius:24px}
  .pg .v3-billboard__inner{padding:132px 20px 22px;gap:16px}
  .pg .v3-billboard__title{font-size:clamp(34px,9.4vw,46px)}
  .pg .v3-billboard__sub,.pg .v3-billboard .v3-rotate{font-size:17px}
  .pg .v3-billboard--ep{padding:148px 18px 22px}
  .pg .v3-billboard--ep .v3-billboard__title{font-size:clamp(30px,8.4vw,40px)}
  :where(.pg #top) .btn,:where(.pg #top) .v3-btn{min-height:50px;padding:12px 22px;font-size:15px;white-space:normal}
  :where(.pg #top) .btn--lg,:where(.pg #top) .v3-btn--lg{min-height:56px;padding:14px 26px;font-size:16px}
  .pg .announce--flow{margin-top:84px}
  .pg .announce a{white-space:normal}      /* some pages' top-bar links are longer than a phone line */
  /* grids a page lays out in its own style="" (two or three columns) stack on phones */
  .pg #top [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important}
}