/*
Theme Name: BPO and Beyond
Theme URI: https://bpoandbeyond.com
Author: Merphix
Author URI: https://bpoandbeyond.com
Description: Minimal, mobile-first block theme for BPO and Beyond. Three colours, gradient heroes, and pillar-grouped cards for articles, podcast, shorts and video, with editable patterns for the Home, Academy and For companies pages. Pair with the BAB Content plugin for pillars, formats and the waitlist.
Version: 1.0.8
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bpo-and-beyond
Tags: full-site-editing, blog, education, one-column, block-patterns, custom-colors, editor-style, featured-images, translation-ready
*/

/* ============================================================
   MOBILE FIRST.  Base rules are the phone layout.
   A single @media (min-width:900px) block adds the desktop layout.
   Three colours only: --blue, --navy, --white. Everything else
   is an opacity of one of them.
   ============================================================ */

/* ============================================================
   BPO and Beyond — mobile-first stylesheet
   Base rules = phone. One @media (min-width: 900px) block = desktop.
   Three colors. Everything else is an opacity of one of them.
   ============================================================ */
:root{--blue:#377DFF;--navy:#0F1F3D;--white:#fff;
  --tint:rgba(55,125,255,.06);--line:rgba(15,31,61,.12);--muted:rgba(15,31,61,.6);--faint:rgba(15,31,61,.38);
  --grad:linear-gradient(135deg,#0F1F3D 0%,#1E4FD0 60%,#377DFF 100%);
  --g1:linear-gradient(150deg,#0F1F3D,#377DFF);--g2:linear-gradient(210deg,#377DFF,#0F1F3D);--g3:linear-gradient(160deg,#1E4FD0,#0F1F3D 85%);
  --tap:44px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:"DM Sans",system-ui,sans-serif;color:var(--navy);background:var(--white);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
h1,h2,h3{font-family:"DM Serif Display",Georgia,serif;font-weight:400;line-height:1.12;letter-spacing:-.01em}
h1{font-size:34px}
h2{font-size:27px}
h3{font-size:20px}
p{max-width:62ch}
.wrap{width:min(1160px,100% - 40px);margin:0 auto}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:10px 18px;border-radius:6px;font-weight:600;font-size:15px;background:var(--blue);color:#fff;border:1.5px solid var(--blue);cursor:pointer;font-family:inherit;white-space:nowrap}
.btn:hover{filter:brightness(.94)}
.btn.o{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn.w{background:#fff;color:var(--navy);border-color:#fff;box-shadow:0 4px 14px rgba(3,15,45,.22)}
.btn.ow{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn.n{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.sm{min-height:40px;padding:8px 14px;font-size:14px}
.btn.full{width:100%}
.more{color:var(--blue);font-weight:600;font-size:15px;display:inline-block;min-height:var(--tap);line-height:var(--tap)}
section{padding:48px 0}
.band{background:var(--tint)}
.band-n{background:var(--navy);color:#fff}
.head{display:grid;gap:8px;margin-bottom:22px}
.head p{color:var(--muted)}
.band-n .head p{color:rgba(255,255,255,.7)}
.has-sticky{padding-bottom:84px}
.lbl{font-size:12px;font-weight:600;color:var(--muted)}
.lbl b{color:var(--blue);font-weight:600}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.cta .btn{width:auto}

/* header ----------------------------------------------------- */
header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;height:60px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px}
.brand i{width:30px;height:30px;border-radius:6px;background:var(--grad);display:grid;place-items:center;font-style:normal;font-family:"DM Serif Display",serif;font-size:18px;color:#fff}
.burger{margin-left:auto;background:none;border:1.5px solid var(--line);border-radius:6px;min-height:40px;padding:0 14px;font:inherit;font-weight:600;cursor:pointer}
.menu{display:none;position:absolute;left:0;right:0;top:60px;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;padding:6px 20px 16px}
.menu.open{display:flex}
.menu a{padding:0;min-height:52px;display:flex;align-items:center;border-bottom:1px solid var(--line);font-size:17px;font-weight:500}
.menu a.on{color:var(--blue)}
.menu a.mlogin{color:var(--muted)}
.menu a.mstart{border:0;margin-top:12px;background:var(--blue);color:#fff;justify-content:center;border-radius:6px;font-weight:600;min-height:var(--tap)}
.hright{display:none}

/* media placeholder ----------------------------------------- */
.ph{position:relative;overflow:hidden;background:var(--g1)}
.ph.b{background:var(--g2)}.ph.c{background:var(--g3)}
.ph::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.22),transparent 45%)}
.ph .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:#fff}
.ph .play::after{content:"";position:absolute;left:55%;top:50%;transform:translate(-50%,-50%);border-left:15px solid var(--navy);border-top:9px solid transparent;border-bottom:9px solid transparent}
.ph .dur{position:absolute;right:10px;bottom:10px;font-size:11px;font-weight:600;background:rgba(15,31,61,.8);color:#fff;padding:3px 7px;border-radius:4px}

/* hero ------------------------------------------------------- */
.hero{background:var(--grad);color:#fff;padding:44px 0 40px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-200px;top:-220px;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.18),transparent)}
.hero .wrap{position:relative;display:grid;gap:32px}
.hero .kicker{font-size:13px;color:rgba(255,255,255,.75);margin-bottom:12px}
.hero h1{margin-bottom:14px;text-wrap:balance}
.hero .lead{font-size:16px;color:rgba(255,255,255,.82);margin-bottom:22px}
.newlist .lh{display:flex;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.7);padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.25)}
.newlist .lh a{color:#fff;font-weight:600}
.newlist a.row{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.newlist a.row:nth-child(n+4){display:none}   /* phones: two items */
.newlist .row small{font-size:12px;color:rgba(255,255,255,.7);font-weight:600}
.newlist .row b{font-family:"DM Serif Display",serif;font-weight:400;font-size:17px;line-height:1.3}

/* pillars ---------------------------------------------------- */
.pillars{padding:0}
.pillars .wrap{display:grid;border-bottom:1px solid var(--line)}
.pillar{padding:26px 0;border-top:1px solid var(--line)}
.pillar:first-child{border-top:0}
.pillar small{display:block;font-size:12px;font-weight:600;color:var(--blue);margin-bottom:8px}
.pillar h3{font-size:22px;margin-bottom:8px}
.pillar p{font-size:15px;color:var(--muted);margin-bottom:6px}

/* mosaic: a feed on phones ---------------------------------- */
.mosaic{display:grid;gap:0;border-top:1px solid var(--line)}
.tile{position:relative;display:grid;grid-template-columns:1fr;gap:6px;padding:16px 0;border-bottom:1px solid var(--line);background:transparent}
.tile .top{display:flex;justify-content:space-between;gap:12px;font-size:12px;font-weight:600;color:var(--muted)}
.tile .top b{color:var(--blue);font-weight:600}
.tile h3{font-size:19px;line-height:1.25}
.tile p{font-size:14px;color:var(--muted);max-width:none}
.tile .m{font-size:12px;color:var(--faint)}
.tile .playc{display:none}
.wave{display:flex;align-items:flex-end;gap:3px;height:22px;max-width:150px}
.wave i{flex:1;background:var(--blue);border-radius:1px;opacity:.7}
/* feature: the one gradient block in the feed */
.tile.f{background:var(--g1);color:#fff;border:0;border-radius:12px;padding:20px;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;margin:16px 0;overflow:hidden}
.tile.f::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 15%,rgba(255,255,255,.22),transparent 40%),linear-gradient(to top,rgba(15,31,61,.55),transparent 60%)}
.tile.f>*{position:relative}
.tile.f .top{position:absolute;left:20px;right:20px;top:16px}
.tile.f .top,.tile.f .top b,.tile.f p,.tile.f .m{color:rgba(255,255,255,.82)}
.tile.f h3{font-size:26px;margin-bottom:6px}
/* shorts and videos: text row with a small gradient thumb */
.tile.g:not(.f){grid-template-columns:1fr 84px;grid-template-rows:auto auto;column-gap:14px}
.tile.g:not(.f) .top{grid-column:1}
.tile.g:not(.f) h3{grid-column:1}
.tile.g:not(.f) .playc{display:block;grid-column:2;grid-row:1/3;width:84px;height:84px;border-radius:8px;background:var(--g1);position:relative}
.tile.g.b:not(.f) .playc{background:var(--g2)}.tile.g.c:not(.f) .playc{background:var(--g3)}
.tile.g:not(.f) .playc::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;background:#fff}
.tile.g:not(.f) .playc::after{content:"";position:absolute;left:53%;top:50%;transform:translate(-50%,-50%);border-left:11px solid var(--navy);border-top:7px solid transparent;border-bottom:7px solid transparent}

/* academy teaser --------------------------------------------- */
.acad .wrap{display:grid;gap:28px}
.acad h2{margin-bottom:12px}
.acad p{color:rgba(255,255,255,.72);margin-bottom:20px}
.tr{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:16px 0;border-top:1px solid rgba(255,255,255,.18)}
.tr:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.tr b{display:block;font-family:"DM Serif Display",serif;font-weight:400;font-size:20px;margin-bottom:2px}
.tr span{font-size:14px;color:rgba(255,255,255,.7)}
.tr em{font-style:normal;font-size:13px;font-weight:600;color:rgba(255,255,255,.85);white-space:nowrap}

/* companies teaser + dashboard ------------------------------- */
.corp .wrap{display:grid;gap:28px}
.corp h2{margin-bottom:12px}
.corp p{color:var(--muted);margin-bottom:20px}
.mini{border:1px solid var(--line);border-radius:10px;padding:18px;background:#fff}
.mini .mh{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:14px}
.mini .mh b{color:var(--navy);font-weight:600}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px;margin-bottom:18px}
.kpi{border-top:2px solid var(--navy);padding-top:10px}
.kpi b{display:block;font-family:"DM Serif Display",serif;font-weight:400;font-size:26px;line-height:1}
.kpi span{font-size:12px;color:var(--muted)}
.bars{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;align-items:end;height:76px;border-bottom:1px solid var(--line);padding-bottom:6px}
.bars i{display:block;background:var(--blue);border-radius:2px 2px 0 0}
.bars i.dim{background:var(--line)}
.axis{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;font-size:10px;color:var(--faint);text-align:center;margin-top:6px}

.about .wrap{display:grid;gap:28px}
.about h2{margin-bottom:12px}
.about p{color:var(--muted);margin-bottom:12px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
.stat{border-top:1px solid var(--navy);padding-top:12px}
.stat b{display:block;font-family:"DM Serif Display",serif;font-weight:400;font-size:32px;line-height:1;margin-bottom:6px}
.stat span{font-size:13px;color:var(--muted)}

.nl{padding:0 0 48px}
.nl .wrap{border-top:1px solid var(--line);padding-top:32px;display:grid;gap:20px}
.nl h3{font-size:22px;margin-bottom:8px}
.nl p{color:var(--muted);font-size:15px}
.nl form{display:grid;gap:10px}
.nl input{min-height:var(--tap);padding:10px 14px;border-radius:6px;border:1px solid var(--line);font:inherit;font-size:16px}
.nl small{display:block;margin-top:8px;font-size:12px;color:var(--faint)}

/* hub -------------------------------------------------------- */
.phead{padding:36px 0 8px}
.phead h1{margin-bottom:8px}
.phead p{color:var(--muted);font-size:16px}
.tabs{display:flex;gap:6px;overflow-x:auto;padding:14px 0 18px;margin:0 -20px;padding-left:20px;padding-right:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:0 0 auto;min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font:inherit;font-size:14px;font-weight:500;cursor:pointer;color:var(--muted)}
.tabs button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.tabs .sep{flex:0 0 1px;background:var(--line);margin:6px 6px}

/* article ---------------------------------------------------- */
.article{width:min(720px,100% - 40px);margin:0 auto;padding:36px 0 0}
.article .crumb{font-size:14px;color:var(--muted);margin-bottom:14px}
.article .crumb a{color:var(--blue)}
.article h1{font-size:30px;margin:10px 0 12px}
.article .dek{font-size:17px;color:var(--muted);margin-bottom:16px}
.article .byline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--muted);padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:24px}
.av{width:36px;height:36px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-family:"DM Serif Display",serif}
.article .ph{aspect-ratio:16/9;border-radius:10px;margin-bottom:24px}
.body p{font-size:17px;line-height:1.7;margin-bottom:20px;max-width:none}
.body h2{font-size:24px;margin:30px 0 10px}
.callout{background:var(--tint);border-left:3px solid var(--blue);padding:16px 18px;border-radius:0 8px 8px 0;margin:24px 0}
.callout b{display:block;margin-bottom:8px}
.callout ul{font-size:15px;margin:0 0 0 18px}
.quote{font-family:"DM Serif Display",serif;font-style:italic;font-size:22px;line-height:1.35;padding:6px 0 6px 18px;border-left:3px solid var(--navy);margin:26px 0}
.upsell{display:grid;gap:14px;border:1px solid var(--line);border-radius:10px;padding:18px;margin:28px 0}
.upsell b{display:block;font-size:16px;font-weight:600;margin-bottom:4px}
.upsell span{font-size:14px;color:var(--muted)}
.article .author{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:22px 0;border-top:1px solid var(--line);margin:32px 0 0}
.article .author .av{width:52px;height:52px;font-size:22px}
.article .author b{display:block;font-size:16px;font-weight:600}
.article .author span{font-size:14px;color:var(--muted)}

/* watch ------------------------------------------------------ */
.watch{padding:0 0 48px}
.watch .wrap{display:grid;gap:32px}
.vid{aspect-ratio:16/9;border-radius:0;margin:0 -20px;width:calc(100% + 40px)}
.wtitle{margin:18px 0 8px;font-size:24px}
.wmeta{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-bottom:14px}
.wacts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.chap{margin-bottom:24px}
.chap h4{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
.chap a{display:grid;grid-template-columns:52px 1fr;gap:10px;min-height:var(--tap);align-items:center;border-top:1px solid var(--line);font-size:15px}
.chap a b{color:var(--blue);font-weight:600;font-variant-numeric:tabular-nums}
.notes p{font-size:16px;margin-bottom:12px}
.upnext h4{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
.upnext a{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line);align-items:start}
.upnext .ph{aspect-ratio:16/9;border-radius:6px}
.upnext b{font-size:14px;font-weight:600;line-height:1.3;display:block}
.upnext span{font-size:12px;color:var(--muted)}

/* academy ---------------------------------------------------- */
.ahero{padding:44px 0}
.ahero .wrap{display:grid;gap:28px}
.ahero .kicker{font-size:13px;color:var(--blue);font-weight:600;margin-bottom:10px}
.ahero h1{margin-bottom:14px}
.ahero .lead{font-size:16px;color:var(--muted);margin-bottom:20px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.facts div{border-top:1px solid var(--navy);padding-top:10px}
.facts b{display:block;font-family:"DM Serif Display",serif;font-weight:400;font-size:24px;margin-bottom:2px}
.facts span{font-size:13px;color:var(--muted)}
.who3{display:grid;gap:22px}
.who3 div{border-top:1px solid var(--navy);padding-top:14px}
.who3 b{display:block;font-family:"DM Serif Display",serif;font-weight:400;font-size:21px;margin-bottom:6px}
.who3 p{font-size:15px;color:var(--muted)}
.track3{display:grid;gap:16px}
.tk{border:1px solid var(--line);border-radius:10px;padding:22px;background:#fff;display:flex;flex-direction:column}
.tk small{display:block;font-size:12px;font-weight:600;color:var(--blue);margin-bottom:8px}
.tk h3{font-size:24px;margin-bottom:4px}
.tk .sub{color:var(--muted);font-size:15px;margin-bottom:18px}
.tk ol{list-style:none;display:grid;gap:8px;margin-bottom:18px}
.tk li{display:grid;grid-template-columns:56px 1fr;gap:10px;font-size:14px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.tk li span{color:var(--faint);font-size:12px;padding-top:2px}
.tk .out{font-size:14px;color:var(--muted);margin:auto 0 18px;padding-top:4px}
.tk .out b{color:var(--navy);font-weight:600}
.tk .btn{width:auto;align-self:flex-start}
.steps3{display:grid;gap:22px}
.steps3 div{border-top:1px solid var(--navy);padding-top:14px}
.steps3 small{display:block;color:var(--blue);font-weight:600;font-size:13px;margin-bottom:6px}
.steps3 b{display:block;font-size:17px;font-weight:600;margin-bottom:6px}
.steps3 p{font-size:15px;color:var(--muted)}
.plans{display:grid;gap:16px}
.plan{border:1px solid var(--line);border-radius:10px;padding:22px;background:#fff}
.plan.hi{border-color:var(--navy)}
.plan h3{font-size:22px;margin-bottom:4px}
.plan .price{font-size:14px;color:var(--muted);margin-bottom:16px}
.plan .pr{font-family:"DM Serif Display",serif;font-size:30px;line-height:1;margin-bottom:4px}
.plan .pr small{font-family:"DM Sans",sans-serif;font-size:13px;color:var(--faint);margin-left:6px}
.plan ul{list-style:none;display:grid;gap:8px;font-size:15px;margin-bottom:18px}
.plan li{padding-left:18px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
/* cohorts table: stacked cards on phones */
table{width:100%;border-collapse:collapse;font-size:15px}
thead{display:none}
tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;padding:14px 0;border-bottom:1px solid var(--line)}
td{padding:0;border:0;font-size:14px}
td::before{content:attr(data-l);display:block;font-size:11px;font-weight:600;color:var(--faint)}
td:first-child{grid-column:1/3;font-family:"DM Serif Display",serif;font-size:19px}
td:first-child::before{display:none}
.st{font-size:13px;font-weight:600;color:var(--blue)}
.st.soon{color:var(--faint)}
details{border-top:1px solid var(--line);padding:14px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:16px;min-height:28px}
summary::after{content:"+";color:var(--blue)}
details[open] summary::after{content:"–"}
details p{margin-top:10px;font-size:15px;color:var(--muted)}
.faqw{width:100%}

/* companies -------------------------------------------------- */
.chero{padding:44px 0}
.chero .wrap{display:grid;gap:28px}
.chero .kicker{font-size:13px;color:var(--blue);font-weight:600;margin-bottom:10px}
.chero h1{margin-bottom:14px}
.chero .lead{font-size:16px;color:var(--muted);margin-bottom:20px}
.proof{display:grid;gap:16px}
.pf{display:grid;grid-template-columns:80px 1fr;gap:12px;align-items:baseline;border-top:1px solid var(--navy);padding-top:10px}
.pf b{font-family:"DM Serif Display",serif;font-weight:400;font-size:24px}
.pf span{font-size:14px;color:var(--muted)}
.four{display:grid;gap:22px}
.four div{border-top:1px solid var(--navy);padding-top:14px}
.four small{display:block;color:var(--blue);font-weight:600;font-size:13px;margin-bottom:6px}
.four b{display:block;font-size:17px;font-weight:600;margin-bottom:6px}
.four p{font-size:14px;color:var(--muted)}
.dash{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.dash .top{display:grid;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.dash .top b{font-size:15px;font-weight:600}.dash .top span{font-size:13px;color:var(--muted)}
.dash .dtabs{display:flex;gap:14px;font-size:13px;color:var(--muted);overflow-x:auto}
.dash .dtabs span{white-space:nowrap;padding-bottom:4px}
.dash .dtabs span.on{color:var(--navy);font-weight:600;border-bottom:2px solid var(--navy)}
.dgrid{display:grid;grid-template-columns:minmax(0,1fr)}
.dmain{padding:16px;border-bottom:1px solid var(--line)}
.dside{padding:16px}
.dash h4{font-size:12px;font-weight:600;margin-bottom:10px;color:var(--muted)}
.mods{display:grid;gap:10px;margin-top:18px}
.mod{display:grid;grid-template-columns:1fr 60px;gap:12px;align-items:center;font-size:14px}
.dside .mod{grid-template-columns:1fr 84px}
.mod .bar{height:6px;background:var(--tint);border-radius:3px;overflow:hidden;margin-top:6px}
.mod .bar i{display:block;height:100%;background:var(--blue)}
.mod .bar i.g{background:var(--navy)}
.mod em{font-style:normal;font-weight:600;text-align:right;font-size:13px}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px}
.roster{width:100%;min-width:360px;font-size:13px}
.roster thead{display:table-header-group}
.roster tbody tr{display:table-row;padding:0;border:0}
.roster td,.roster th{display:table-cell;padding:9px 6px 9px 0;border-bottom:1px solid var(--line);font-size:13px;font-family:"DM Sans",sans-serif}
.roster th{text-align:left;font-weight:600;color:var(--muted);font-size:12px}
.roster td::before{display:none}
.roster td:first-child{font-family:"DM Sans",sans-serif;font-size:13px}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:var(--blue)}
.dot.a{background:var(--faint)}.dot.r{background:var(--navy)}
.models{display:grid;gap:16px}
.mdl{border:1px solid var(--line);border-radius:10px;padding:22px;background:#fff}
.mdl.hi{border-color:var(--navy)}
.mdl h3{font-size:22px;margin-bottom:6px}
.mdl .for{font-size:14px;color:var(--muted);margin-bottom:14px}
.mdl dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:14px;margin-bottom:18px}
.mdl dt{color:var(--muted)}
.mdl dd{font-weight:600}
.mdl .btn{width:auto}
.sched .wrap{display:grid;gap:28px}
.sched h2{margin-bottom:10px}
.sched .lead{color:var(--muted);margin-bottom:18px}
.sched ul{list-style:none;display:grid;gap:8px;font-size:15px}
.sched li{padding-left:18px;position:relative}
.sched li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.book{border:1px solid var(--line);border-radius:10px;display:grid;overflow:hidden;background:#fff}
.cal{padding:18px;border-bottom:1px solid var(--line)}
.cal .ch{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-weight:600}
.cal .ch button{background:none;border:1px solid var(--line);border-radius:6px;width:40px;height:40px;cursor:pointer;font:inherit}
.dow{display:grid;grid-template-columns:repeat(7,1fr);font-size:12px;color:var(--muted);text-align:center;margin-bottom:4px}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.days button{aspect-ratio:1;min-height:40px;border:0;background:none;border-radius:6px;font:inherit;font-size:15px;cursor:pointer;color:var(--navy)}
.days button:disabled{color:var(--faint);cursor:default;background:none}
.days button.sel{background:var(--blue);color:#fff;font-weight:600}
.days button.today{box-shadow:inset 0 0 0 1.5px var(--blue)}
.slots{padding:18px}
.slots .sh{font-weight:600;margin-bottom:2px}
.slots .tz{font-size:13px;color:var(--muted);margin-bottom:12px}
.slots .list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.slot{min-height:var(--tap);padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:#fff;font:inherit;font-size:15px;font-weight:500;cursor:pointer}
.slot.sel{border-color:var(--blue);color:var(--blue)}
.slots label{display:grid;gap:4px;font-size:13px;font-weight:600;margin-bottom:10px}
.slots input,.slots select{font:inherit;font-size:16px;min-height:var(--tap);padding:10px 12px;border:1px solid var(--line);border-radius:6px;color:var(--navy);background:#fff}
.slots .sum{font-size:13px;color:var(--muted);margin-top:10px;text-align:center}

/* sticky bottom CTA (phones only) ---------------------------- */
div.sticky{position:fixed;left:0;right:0;bottom:0;z-index:15;background:#fff;border-top:1px solid var(--line);padding:10px 20px;display:none;grid-template-columns:1fr auto;gap:12px;align-items:center}
.has-sticky .sticky{display:grid}
.sticky b{display:block;font-size:14px;font-weight:600}
.sticky span{display:block;font-size:12px;color:var(--muted)}

footer{background:var(--navy);color:rgba(255,255,255,.7);padding:44px 0 24px;font-size:14px}
footer .cols{display:grid;gap:26px;margin-bottom:32px}
footer h5{color:#fff;font-size:14px;font-weight:600;margin-bottom:10px}
footer ul{list-style:none;display:grid;gap:6px}
footer li a{display:inline-block;min-height:32px;line-height:32px}
footer .brand{color:#fff;margin-bottom:12px}
footer .bot{border-top:1px solid rgba(255,255,255,.14);padding-top:18px;display:grid;gap:8px;font-size:12px}

/* ============================================================
   Desktop (and large tablets)
   ============================================================ */
@media(min-width:900px){
  h1{font-size:clamp(36px,4.8vw,56px)}
  h2{font-size:clamp(28px,3.4vw,38px)}
  h3{font-size:21px}
  section{padding:72px 0}
  .head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px;flex-wrap:wrap}
  .cta{display:flex;flex-wrap:wrap;gap:12px}
  .cta .btn{width:auto}
  .btn{min-height:0;padding:12px 20px}
  .has-sticky{padding-bottom:0}
  .sticky,.has-sticky .sticky{display:none}

  header .wrap{height:68px;gap:32px}
  .burger{display:none}
  .menu{display:flex;position:static;flex-direction:row;gap:6px;padding:0;border:0;background:none}
  .menu a{min-height:0;padding:8px 12px;border:0;border-radius:6px;font-size:15px;color:var(--muted)}
  .menu a:hover{color:var(--navy)}
  .menu a.on{color:var(--navy);background:var(--tint)}
  .menu a.mlogin,.menu a.mstart{display:none}
  .hright{margin-left:auto;display:flex;align-items:center;gap:8px}
  .hright .login{font-size:15px;font-weight:500;color:var(--muted);padding:8px 12px}

  .hero{padding:88px 0 84px}
  .hero::before{right:-240px;top:-280px;width:720px;height:720px}
  .hero .wrap{grid-template-columns:1.1fr .9fr;gap:72px;align-items:center}
  .hero .kicker{font-size:14px;margin-bottom:16px}
  .hero h1{margin-bottom:18px}
  .hero .lead{font-size:18px;margin-bottom:28px}
  .newlist a.row{padding:16px 0}
  .newlist a.row:nth-child(n+4){display:grid}
  .newlist a.row:last-child{border-bottom:0}
  .newlist .row b{font-size:18px}
  .newlist a.row:hover b{text-decoration:underline;text-underline-offset:3px}

  .pillars .wrap{grid-template-columns:repeat(3,1fr)}
  .pillar{padding:44px 32px 44px 32px;border-top:0;border-left:1px solid var(--line)}
  .pillar:first-child{border-left:0;padding-left:0}
  .pillar h3{font-size:24px}

  /* mosaic: the magazine grid */
  .mosaic{grid-template-columns:repeat(6,1fr);grid-auto-rows:148px;gap:16px;grid-auto-flow:dense;border-top:0}
  .tile{display:flex;flex-direction:column;justify-content:flex-end;padding:20px;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;gap:0}
  .tile:hover h3{color:var(--blue)}
  .tile .top{position:absolute;left:20px;right:20px;top:16px}
  .tile h3{font-size:20px;line-height:1.22;margin-bottom:4px}
  .tile .m{margin-top:8px}
  .wave{height:28px;max-width:180px;margin-bottom:12px}
  .tile.f{grid-column:span 4;grid-row:span 2;min-height:0;margin:0;padding:20px}
  .tile.f h3{font-size:34px}
  .tile.f p{font-size:15px;max-width:58ch}
  .tile.t{grid-column:span 2;grid-row:span 2}
  .tile.m2{grid-column:span 2}
  .tile.w{grid-column:span 3}
  .tile.g{color:#fff;border:0;background:var(--g1);display:flex;grid-template-columns:none}
  .tile.g.b{background:var(--g2)}.tile.g.c{background:var(--g3)}
  .tile.g::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 15%,rgba(255,255,255,.22),transparent 40%),linear-gradient(to top,rgba(15,31,61,.55),transparent 60%)}
  .tile.g>*{position:relative}
  .tile.g .top{position:absolute;z-index:1}
  .tile.g .top,.tile.g .top b,.tile.g p,.tile.g .m{color:rgba(255,255,255,.82)}
  .tile.g:hover h3{color:#fff}
  .tile.g:not(.f) .playc{display:block;position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:#fff;z-index:1;grid-column:auto;grid-row:auto}
  .tile.g:not(.f) .playc::before{display:none}
  .tile.g:not(.f) .playc::after{left:55%;border-left:14px solid var(--navy);border-top:8px solid transparent;border-bottom:8px solid transparent}
  .tile.g:not(.f) .playc.pv{display:none}
  .tile.m2 .playc{top:34%;width:40px;height:40px}

  .acad .wrap{grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .tr{padding:18px 0}
  .tr b{font-size:22px}
  .corp .wrap{grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
  .mini{padding:22px}
  .kpis{grid-template-columns:repeat(4,1fr);gap:10px}
  .bars{height:84px;gap:8px}
  .axis{gap:8px;font-size:11px}
  .about .wrap{grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .stats{gap:28px 24px}
  .stat b{font-size:38px}
  .stat span{font-size:14px}
  .nl{padding:0 0 72px}
  .nl .wrap{padding-top:40px;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
  .nl h3{font-size:24px}
  .nl form{display:flex;gap:10px;flex-wrap:wrap}
  .nl input{flex:1;min-width:220px;min-height:0;padding:12px 14px;font-size:15px}

  .phead{padding:56px 0 24px}
  .phead p{font-size:17px}
  .tabs{flex-wrap:wrap;overflow:visible;margin:0;padding:14px 0 28px}
  .tabs button{min-height:0;padding:8px 14px}

  .article{width:min(720px,92vw);padding:56px 0 0}
  .article h1{font-size:clamp(32px,4.4vw,46px);margin:12px 0 14px}
  .article .dek{font-size:19px}
  .article .ph{aspect-ratio:16/8;margin-bottom:32px}
  .body p{font-size:18px;margin-bottom:22px}
  .body h2{font-size:28px;margin:36px 0 12px}
  .quote{font-size:26px;padding:8px 0 8px 24px;margin:32px 0}
  .upsell{grid-template-columns:1fr auto;align-items:center;padding:20px 24px;margin:36px 0}

  .watch{padding:40px 0 72px}
  .watch .wrap{grid-template-columns:1fr 320px;gap:48px;align-items:start}
  .vid{border-radius:10px;margin:0;width:100%}
  .wtitle{font-size:30px}
  .wmeta{font-size:14px}

  .ahero{padding:72px 0}
  .ahero .wrap{grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
  .ahero .lead{font-size:18px}
  .facts{gap:24px}
  .facts b{font-size:28px}
  .who3{grid-template-columns:repeat(3,1fr);gap:32px}
  .track3{grid-template-columns:repeat(3,1fr);gap:24px}
  .tk{padding:28px}
  .tk h3{font-size:26px}
  .tk .btn{width:auto;align-self:flex-start}
  .steps3{grid-template-columns:repeat(3,1fr);gap:32px}
  .plans{grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
  .plan{padding:28px}
  .plan .pr{font-size:34px}
  thead{display:table-header-group}
  tbody tr{display:table-row;padding:0;border:0}
  th,td{display:table-cell;text-align:left;padding:14px 12px 14px 0;border-bottom:1px solid var(--line);vertical-align:top;font-size:15px}
  th{font-weight:600;color:var(--muted);font-size:13px;border-bottom:1px solid var(--navy)}
  td::before{display:none}
  td:first-child{font-family:"DM Sans",sans-serif;font-size:15px}
  .faqw{width:min(760px,100%)}

  .chero{padding:72px 0}
  .chero .wrap{grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
  .chero .lead{font-size:18px}
  .proof{gap:20px}
  .pf{grid-template-columns:90px 1fr;gap:16px}
  .pf b{font-size:28px}
  .four{grid-template-columns:repeat(4,1fr);gap:32px}
  .dash .top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 22px;flex-wrap:wrap}
  .dgrid{grid-template-columns:1.2fr .8fr}
  .dmain{padding:22px;border-bottom:0;border-right:1px solid var(--line)}
  .dside{padding:22px}
  .scrollx{margin:0;padding:0}
  .roster{min-width:0}
  .models{grid-template-columns:repeat(3,1fr);gap:24px}
  .mdl{padding:28px}
  .mdl .btn{width:auto}
  .sched .wrap{grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
  .book{grid-template-columns:1fr 1fr}
  .cal{padding:24px;border-bottom:0;border-right:1px solid var(--line)}
  .cal .ch button{width:30px;height:30px}
  .days button{min-height:0}
  .slots{padding:24px}
  .slots .list{grid-template-columns:1fr}
  .slot{min-height:0;padding:10px 14px;font-size:14px;text-align:left}
  .slots input,.slots select{min-height:0;font-size:15px}

  footer{padding:56px 0 28px}
  footer .cols{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
  footer li a{min-height:0;line-height:1.5}
  footer .bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;padding-top:22px}
}

/* hero without the list */
.hero .wrap{grid-template-columns:1fr}
.hero .inner{max-width:760px}
/* pillar cards */
.pillars{padding:24px 0 0}
.pillars .wrap{display:grid;gap:12px;border:0}
.pil{display:block;border:1px solid var(--line);border-radius:12px;padding:20px;background:var(--tint)}
.pil .num{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:9px;background:var(--grad);color:#fff;font-weight:600;font-size:13px;margin-bottom:14px}
.pil h3{font-size:22px;margin-bottom:6px}
.pil p{font-size:15px;color:var(--muted);margin-bottom:14px}
.pil .link{color:var(--blue);font-weight:600;font-size:15px}
/* feature card */
.featcard{display:grid;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.featcard .ph{aspect-ratio:16/10}
.featcard .fb{padding:18px 20px 22px}
.featcard small{display:block;font-size:12px;font-weight:600;color:var(--blue);margin-bottom:6px}
.featcard h3{font-size:22px;line-height:1.22;margin-bottom:8px}
.featcard p{font-size:14px;color:var(--muted);max-width:none}
.featcard .m{display:block;font-size:12px;color:var(--faint);margin-top:10px}
.featcard:hover h3{color:var(--blue)}
/* category sections with swipeable cards */
.catsec{padding:40px 0}
.catsec .head{margin-bottom:16px}
.catsec .head h2{font-size:24px}
.catsec .head p{font-size:14px}
.cards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:2px 20px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cards::-webkit-scrollbar{display:none}
.acard{flex:0 0 76%;scroll-snap-align:start;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.acard .ph{aspect-ratio:16/10}
.acard .ph .play{width:40px;height:40px}
.acard .ph .play::after{border-left-width:12px;border-top-width:7px;border-bottom-width:7px}
.acard .ab{padding:14px 16px 16px}
.acard small{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px}
.acard h3{font-size:17px;line-height:1.28}
.acard:hover h3{color:var(--blue)}
.pwave{position:absolute;left:14px;bottom:12px;display:flex;align-items:flex-end;gap:3px;height:22px}
.pwave i{width:4px;background:#fff;border-radius:1px;opacity:.9}
.pwave i:nth-child(1){height:40%}.pwave i:nth-child(2){height:75%}.pwave i:nth-child(3){height:100%}.pwave i:nth-child(4){height:55%}.pwave i:nth-child(5){height:85%}.pwave i:nth-child(6){height:45%}.pwave i:nth-child(7){height:65%}
/* newsletter as a gradient band */
.nl{padding:8px 0 48px}
.nl .wrap{border:0;padding:28px 22px;border-radius:14px;background:var(--grad);color:#fff}
.nl h3{color:#fff;font-size:24px}
.nl p{color:rgba(255,255,255,.85)}
.nl input{border:0;background:#fff;color:var(--navy)}
.nl .btn{background:#fff;color:var(--navy);border-color:#fff}
.nl small{color:rgba(255,255,255,.7)}
/* footer accordion */
footer .fbrand{margin-bottom:20px}
footer .fbrand p{font-size:14px;max-width:34ch}
.fcols{display:grid}
.fcol{border-top:1px solid rgba(255,255,255,.14);padding:0}
.fcol summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:52px;color:#fff;font-weight:600;font-size:15px}
.fcol summary::-webkit-details-marker{display:none}
.fcol summary::after{content:"+";font-size:18px;color:rgba(255,255,255,.7)}
.fcol[open] summary::after{content:"–"}
.fcol ul{padding:0 0 14px}
.fcol li a{min-height:40px;line-height:40px}
footer .bot{margin-top:24px}
@media(min-width:900px){
  .hero h1{font-size:clamp(44px,5.6vw,68px)}
  .hero .lead{font-size:19px}
  .pillars{padding:48px 0 0}
  .pillars .wrap{grid-template-columns:repeat(3,1fr);gap:20px}
  .pil{padding:28px}
  .pil h3{font-size:24px}
  .latest{padding-bottom:24px}
  .featcard{grid-template-columns:1.1fr .9fr}
  .featcard .ph{aspect-ratio:auto;min-height:300px}
  .featcard .fb{padding:36px 36px 40px;display:flex;flex-direction:column;justify-content:center}
  .featcard h3{font-size:30px}
  .featcard p{font-size:15px}
  .catsec{padding:56px 0}
  .catsec .head{margin-bottom:24px}
  .catsec .head h2{font-size:30px}
  .catsec .head p{font-size:15px}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;overflow:visible;margin:0;padding:0}
  #hubsecs .cards{grid-template-columns:repeat(4,1fr)}
  .acard{flex:auto}
  .nl{padding:24px 0 72px}
  .nl .wrap{padding:44px 48px}
  .nl h3{font-size:28px}
  .fcols{grid-template-columns:repeat(4,1fr);gap:32px}
  .fcol{border:0}
  .fcol summary{pointer-events:none;min-height:0;margin-bottom:10px;font-size:14px}
  .fcol summary::after{display:none}
  .fcol ul{padding:0}
  .fcol li a{min-height:0;line-height:1.5}
  footer .fbrand{margin-bottom:32px}
}

.secbar{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--navy);color:#fff;padding:0 16px;min-height:46px;border-radius:6px;margin-bottom:14px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.secbar b{font-weight:700;display:flex;align-items:center;gap:10px}
.secbar b::before{content:"";width:8px;height:8px;background:var(--blue);display:inline-block}
.secbar a,.secbar span{font-size:12px;color:#fff;letter-spacing:.06em}
.secbar a:hover{text-decoration:underline;text-underline-offset:3px}
.catsec{padding:28px 0}
.latest{padding:36px 0 8px}
.cards{display:grid;gap:16px;overflow:visible;margin:0;padding:0}
.acard{flex:auto;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;display:block}
.catsec .acard:nth-child(n+3){display:none}
.acard .ph{display:block;aspect-ratio:16/10;position:relative}
.acard .ph .play{width:48px;height:48px}
.acard .date{position:absolute;right:0;bottom:0;background:var(--blue);color:#fff;font-size:12px;font-weight:700;padding:7px 12px;border-radius:6px 0 0 0;letter-spacing:.02em}
.acard .ab{padding:18px 20px 22px}
.acard .cat{display:block;font-size:12px;font-weight:700;color:var(--blue);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.acard h3{font-family:"DM Sans",system-ui,sans-serif;font-weight:700;font-size:22px;line-height:1.2;letter-spacing:-.015em;margin-bottom:8px}
.acard h3 a:hover{color:var(--blue)}
.acard .by{font-size:13px;color:var(--muted);margin-bottom:10px}
.acard .by b{color:var(--navy);font-weight:600}
.acard .ex{font-size:15px;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:16px;max-width:none}
.acard .rb{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1px solid var(--navy);border-radius:6px;font-weight:600;font-size:14px;color:var(--navy)}
.acard .rb:hover{background:var(--tint)}
.acard.feat h3{font-size:24px}
@media(min-width:900px){
  .secbar{min-height:48px;margin-bottom:20px}
  .catsec{padding:40px 0}
  .latest{padding:56px 0 8px}
  .cards{grid-template-columns:repeat(3,1fr);gap:24px}
  #hubsecs .cards{grid-template-columns:repeat(3,1fr)}
  .catsec .acard:nth-child(n+3){display:block}
  .acard h3{font-size:21px}
  .acard.feat{display:grid;grid-template-columns:1.1fr .9fr}
  .acard.feat .ph{aspect-ratio:auto;min-height:340px}
  .acard.feat .ab{padding:36px 36px 40px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
  .acard.feat h3{font-size:30px}
  .acard.feat .ex{-webkit-line-clamp:5;font-size:16px}
}

:root{--gradd:linear-gradient(160deg,#0F1F3D 0%,#0F1F3D 45%,#1E4FD0 100%)}
.shero-d{background:var(--gradd);color:#fff;padding:48px 0 44px;position:relative;overflow:hidden}
.shero-d::before{content:"";position:absolute;right:-220px;top:-240px;width:560px;height:560px;border-radius:50%;background:radial-gradient(closest-side,rgba(55,125,255,.35),transparent)}
.shero-d .wrap{position:relative;max-width:820px;margin-left:max(20px,(100% - 1160px)/2)}
.shero-d .kicker{font-size:13px;color:rgba(255,255,255,.7);font-weight:600;margin-bottom:10px}
.shero-d h1{margin-bottom:14px;text-wrap:balance}
.shero-d .lead{font-size:16px;color:rgba(255,255,255,.82);margin-bottom:22px}
.fstrip{border-bottom:1px solid var(--line);background:#fff}
.fstrip .wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;padding:18px 0}
.fstrip b{display:block;font-family:"DM Serif Display",serif;font-weight:400;font-size:22px;line-height:1.1}
.fstrip span{font-size:12px;color:var(--muted)}
.whocards{display:grid;gap:12px}
.ins3{display:grid;gap:12px}
.ins{border:1px solid var(--line);border-radius:12px;padding:20px;background:#fff}
.ins .num{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:9px;background:var(--grad);color:#fff;font-weight:600;font-size:13px;margin-bottom:14px}
.ins h3{font-size:22px;margin-bottom:10px}
.ins p{font-size:15px;color:var(--muted);margin-bottom:10px;max-width:none}
.ins p b{color:var(--navy);font-weight:600}
.ins .ms{padding-top:10px;border-top:1px solid var(--line);margin-bottom:0}
.flow{display:grid;gap:4px}
.fstep{border:1px solid var(--line);border-radius:12px;padding:18px;background:#fff}
.fstep small{display:block;color:var(--blue);font-weight:600;font-size:13px;margin-bottom:6px}
.fstep b{display:block;font-size:17px;font-weight:600;margin-bottom:6px}
.fstep p{font-size:14px;color:var(--muted)}
.farrow{display:grid;place-items:center;height:34px;color:var(--blue)}
.farrow svg{width:26px;height:26px;transform:rotate(90deg)}
.outc{display:grid;gap:0;border-top:1px solid var(--navy)}
.outc div{padding:16px 0;border-bottom:1px solid var(--line)}
.outc b{display:block;font-family:"DM Serif Display",serif;font-weight:400;font-size:22px;margin-bottom:4px}
.outc span{font-size:15px;color:var(--muted)}
@media(min-width:900px){
  .shero-d{padding:88px 0 80px}
  .shero-d .kicker{font-size:14px;margin-bottom:14px}
  .shero-d h1{font-size:clamp(40px,4.8vw,58px);margin-bottom:18px}
  .shero-d .lead{font-size:18px;margin-bottom:28px}
  .fstrip .wrap{grid-template-columns:repeat(4,1fr);gap:32px;padding:26px 0}
  .fstrip b{font-size:26px}
  .fstrip span{font-size:13px}
  .whocards{grid-template-columns:repeat(3,1fr);gap:20px}
  .ins3{grid-template-columns:repeat(3,1fr);gap:20px}
  .ins{padding:28px}
  .flow{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:stretch;gap:8px}
  .fstep{padding:22px}
  .farrow{height:auto;width:34px}
  .farrow svg{transform:none;width:28px;height:28px}
  .outc{border-top:1px solid var(--navy)}
}

.acad-note{display:block;font-size:13px;color:var(--muted);padding:12px 0;margin-bottom:10px;border-top:1px solid var(--line)}
.startnote{display:none;font-size:15px;color:var(--muted);padding:0 0 18px;max-width:60ch}
@media(min-width:900px){.acad-note{font-size:13px}}

#p-home .catsec .acard:nth-child(n+3){display:block}
@media(min-width:900px){#p-home .latest{padding-bottom:0}}

.d90{display:grid;gap:12px}
.dcol{border:1px solid var(--line);border-radius:12px;padding:18px;background:#fff}
.dh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.dh b{font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:24px}
.dh span{font-size:12px;font-weight:600;color:var(--blue);letter-spacing:.06em;text-transform:uppercase}
.dcol ul{list-style:none;display:grid;gap:12px}
.dcol li{display:grid;grid-template-columns:16px 1fr;gap:10px;font-size:15px;color:var(--muted);line-height:1.45}
.dcol li i{width:14px;height:14px;border:2px solid var(--blue);border-radius:4px;margin-top:4px}
.dcol li b{color:var(--navy);font-weight:600}
.prog{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:18px;background:#fff}
.ph2{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.ph2 b{display:block;font-size:16px;font-weight:600}
.ph2 span{font-size:13px;color:var(--faint)}
.pct{font-family:"DM Serif Display",Georgia,serif;font-size:22px;white-space:nowrap}
.ptrack{display:grid;gap:12px}
.pseg span{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.pbar{height:8px;background:var(--tint);border-radius:4px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--blue);border-radius:4px}
.pn{font-size:14px;color:var(--muted);margin-top:14px;padding-top:14px;border-top:1px solid var(--line);max-width:none}
@media(min-width:900px){
  .d90{grid-template-columns:repeat(3,1fr);gap:20px}
  .dcol{padding:26px}
  .prog{margin-top:20px;padding:26px}
  .ptrack{grid-template-columns:repeat(3,1fr);gap:24px}
}

.whocta{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:20px;background:#fff;display:grid;gap:14px}
.whocta b{display:block;font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:21px;margin-bottom:4px}
.whocta span{font-size:15px;color:var(--muted)}
.whocta .btn{justify-self:start}
@media(min-width:900px){
  .whocta{margin-top:20px;padding:24px 28px;grid-template-columns:1fr auto;align-items:center;gap:24px}
  .whocta .btn{justify-self:end}
}

.wl{display:grid;gap:20px}
.wlc h2{margin-bottom:10px}
.wlc .lead{color:var(--muted);margin-bottom:16px}
.wll{list-style:none;display:grid;gap:10px;font-size:15px}
.wll li{padding-left:18px;position:relative;color:var(--muted)}
.wll li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.wlf{border:1px solid var(--line);border-radius:12px;padding:20px;background:#fff}
.wlf label{display:grid;gap:5px;font-size:13px;font-weight:600;margin-bottom:12px}
.wlf input,.wlf select{font:inherit;font-size:16px;min-height:var(--tap);padding:10px 12px;border:1px solid var(--line);border-radius:8px;color:var(--navy);background:#fff}
.wlf .btn{margin-top:4px}
.wln{font-size:12px;color:var(--faint);margin-top:10px;text-align:center;max-width:none}
@media(min-width:900px){
  .wl{grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .wlf{padding:28px}
  .wlf input,.wlf select{font-size:15px;min-height:0}
}

.brand .mark{width:32px;height:32px;display:block;flex:0 0 32px}
.brand i{display:none}
footer .brand .mark{width:30px;height:30px;flex:0 0 30px}
@media(min-width:900px){.brand .mark{width:34px;height:34px;flex:0 0 34px}}

/* ============================================================
   WordPress plumbing
   ============================================================ */
.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:var(--navy);padding:12px 18px;border-radius:0 0 8px 0;font-weight:600}
.skip-link:focus{left:0}
.alignwide{max-width:1160px;margin-left:auto;margin-right:auto}
.alignfull{max-width:none;width:100%}
.aligncenter{margin-left:auto;margin-right:auto}
img{max-width:100%;height:auto}
.wp-block-image img{border-radius:10px}
figure{margin:0}
.sticky-post{font-weight:600}
.comment-respond,.comment-list{max-width:720px;margin:0 auto}
.wp-block-post-terms a,.wp-block-post-date{color:var(--muted);font-size:13px}
.wp-element-button,.wp-block-button__link{border-radius:6px;font-weight:600}
/* editor: give patterns room to breathe without the front-end body */
.editor-styles-wrapper{background:var(--white)}


/* ============================================================
   Block-editor bridging: WordPress wraps content in extra
   elements the prototype did not have. These rules make the
   block markup land on the same design.
   ============================================================ */

/* header ---------------------------------------------------- */
.bab-header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.bab-header .wrap{display:flex;align-items:center;min-height:60px;gap:16px}
.bab-header .brand{gap:10px}
.bab-header .wp-block-site-logo img{width:32px;height:32px;border-radius:0;display:block}
.bab-header .wp-block-site-title a{font-weight:600;font-size:16px;color:var(--navy)}
.bab-menu{display:none}
.bab-menu{width:100%}
.bab-menu.open{display:block;position:absolute;left:0;right:0;top:60px;background:#fff;border-bottom:1px solid var(--line);padding:6px 20px 16px;z-index:30}
.bab-menu.open .wp-block-navigation__responsive-container,
.bab-menu.open .wp-block-navigation__container{display:flex!important;flex-direction:column;align-items:stretch;gap:0;width:100%;position:static;background:none;visibility:visible;height:auto}
.bab-menu .wp-block-navigation-item{border-bottom:1px solid var(--line)}
.bab-menu .wp-block-navigation-item__content{min-height:52px;display:flex;align-items:center;font-size:17px;font-weight:500;color:var(--navy)}
.bab-header .hright{display:none}
.bab-burger{margin-left:auto;background:none;border:1.5px solid var(--line);border-radius:6px;min-height:40px;padding:0 14px;font:inherit;font-weight:600;cursor:pointer;color:var(--navy)}

/* footer ---------------------------------------------------- */
.bab-footer{background:var(--navy);color:rgba(255,255,255,.7);padding:44px 0 24px;font-size:14px}
.bab-footer .wp-block-site-title a,.bab-footer .brand{color:#fff}
.bab-footer .wp-block-site-logo img{width:30px;height:30px;display:block}
.bab-footer .fbrand{margin-bottom:20px}
.bab-footer .fbrand p{font-size:14px;max-width:34ch}
.bab-footer a{color:inherit}
.bab-footer a:hover{color:#fff}

/* buttons: WP wraps every button in .wp-block-button --------- */
.wp-block-button.btn{margin:0}
.wp-block-button.btn>.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:10px 18px;border-radius:6px;font-weight:600;font-size:15px;line-height:1.2;background:var(--blue);color:#fff;border:1.5px solid var(--blue);box-shadow:none}
.wp-block-button.btn.o>.wp-block-button__link{background:transparent;color:var(--navy);border-color:var(--navy)}
/* white button: needs a visible edge on the gradient, so give it a faint outline of itself */
.wp-block-button.btn.w>.wp-block-button__link{background:#fff;color:var(--navy);border:1.5px solid #fff;box-shadow:0 4px 14px rgba(3,15,45,.22)}
.wp-block-button.btn.ow>.wp-block-button__link{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.wp-block-button.btn.n>.wp-block-button__link{background:var(--navy);color:#fff;border:1.5px solid var(--navy)}
.wp-block-button.btn.sm>.wp-block-button__link{min-height:40px;padding:8px 14px;font-size:14px}
.wp-block-buttons.cta,.wp-block-buttons.cta .wp-block-button{margin:0}
.wp-block-buttons.cta{display:flex;flex-wrap:wrap;gap:10px!important}

/* Insights filters as links --------------------------------- */
.tabs a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:14px;font-weight:500;color:var(--muted)}
.tabs a.on,.tabs a[aria-current="page"]{background:var(--navy);color:#fff;border-color:var(--navy)}

/* query-loop cards ------------------------------------------ */
.cards .wp-block-query{margin:0}
.acard .wp-block-post-featured-image{margin:0}
.acard .wp-block-post-featured-image img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:0}
.acard .wp-block-post-title{font-family:"DM Sans",system-ui,sans-serif;font-weight:700;font-size:22px;line-height:1.2;letter-spacing:-.015em;margin:0 0 8px}
.acard .wp-block-post-title a{color:inherit}
.acard .wp-block-post-title a:hover{color:var(--blue)}
.acard .cat a{color:var(--blue)}
.acard .wp-block-post-excerpt__excerpt{margin:0}
.acard .wp-block-post-excerpt__more-text{display:none}
.acard .rb,.acard .wp-block-read-more{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1px solid var(--navy);border-radius:6px;font-weight:600;font-size:14px;color:var(--navy);text-decoration:none}
.acard .rb:hover,.acard .wp-block-read-more:hover{background:var(--tint)}
.pager{display:flex;justify-content:center;gap:8px;margin-top:32px}
.pager a,.pager span{min-width:42px;min-height:42px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:600}
.pager .current{background:var(--navy);color:#fff;border-color:var(--navy)}

/* single article -------------------------------------------- */
.article .wp-block-post-title{font-family:"DM Serif Display",Georgia,serif;font-weight:400}
.article .crumb p{margin:0;font-size:14px;color:var(--muted)}
.article .byline .wp-block-avatar img{border-radius:50%}
.article .wp-block-post-featured-image img{width:100%;border-radius:10px}
.article .author .wp-block-post-author-name{font-weight:600}

/* forms shipped by the plugin -------------------------------- */
.bab-form{display:grid;gap:10px}
.bab-form label{display:grid;gap:5px;font-size:13px;font-weight:600}
.bab-form input,.bab-form select,.bab-form textarea{font:inherit;font-size:16px;min-height:var(--tap);padding:10px 12px;border:1px solid var(--line);border-radius:8px;color:var(--navy);background:#fff;width:100%}
.bab-form .btn{width:100%}
.bab-form .bab-hp{position:absolute;left:-9999px}
.bab-note{font-size:12px;color:var(--faint);margin-top:10px;text-align:center}
.bab-ok{padding:16px 18px;border-radius:10px;background:var(--tint);border-left:3px solid var(--blue);font-size:15px}
.bab-err{padding:12px 14px;border-radius:8px;background:#fff;border:1px solid var(--navy);font-size:14px;margin-bottom:12px}
.nl .bab-form{grid-template-columns:1fr;gap:10px}

@media(min-width:900px){
  .bab-header .wrap{min-height:68px;gap:32px}
  .bab-burger{display:none}
  .bab-menu{display:flex!important;position:static;flex-direction:row;padding:0;border:0;background:none}
  .bab-menu .wp-block-navigation-item{border:0}
  .bab-menu .wp-block-navigation-item__content{min-height:0;padding:8px 12px;border-radius:6px;font-size:15px;color:var(--muted)}
  .bab-menu .wp-block-navigation-item__content:hover{color:var(--navy);background:var(--tint)}
  .bab-header .hright{margin-left:auto;display:flex;align-items:center;gap:8px}
  .bab-header .login{margin:0;font-size:15px;font-weight:500}
  .bab-header .login a{color:var(--muted)}
  .bab-footer{padding:56px 0 28px}
  .acard .wp-block-post-title{font-size:21px}
  .acard.feat .wp-block-post-title{font-size:30px}
  .nl .bab-form{grid-template-columns:1fr auto;align-items:end}
  .nl .bab-form .btn{width:auto}
}

/* ============================================================
   Query loop: WordPress puts a <ul class="wp-block-post-template">
   between .cards and the cards themselves, so the grid has to
   live on that list, not on .cards.
   ============================================================ */
.wp-block-post-template{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.wp-block-post-template>li{margin:0;max-width:none}
.wp-block-post-template>li>.acard{height:100%}
.cards>.wp-block-query{margin:0}

/* Latest by pillar: three separate one-post queries, side by side */
.cards{display:grid;gap:16px}

/* empty terms: core prints "No categories" when a post has no pillar */
.acard .wp-block-post-terms:empty{display:none}
.acard.feat .wp-block-post-featured-image img{aspect-ratio:16/10}
.wp-block-query-pagination{margin-top:32px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.wp-block-query-pagination a,.wp-block-query-pagination span{min-width:42px;min-height:42px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:600;text-decoration:none}
.wp-block-query-pagination .current{background:var(--navy);color:#fff;border-color:var(--navy)}

@media(min-width:900px){
  .wp-block-post-template{grid-template-columns:repeat(3,1fr);gap:24px}
  .cards{grid-template-columns:repeat(3,1fr);gap:24px}
  .cards .wp-block-post-template{grid-template-columns:1fr}
}

/* ============================================================
   Width and alignment guards
   ============================================================ */
/* WP root padding would double up with .wrap; neutralise it on our sections */
.wrap{width:min(1160px,100% - 40px);margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
main>.wp-block-group>.wrap,main>.wrap{box-sizing:border-box}

/* alignfull sections span the viewport; their inner .wrap re-centres the content */
.alignfull{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw;width:100vw}

/* the archive column: give the query room and keep the top spacing tidy */
.phead{padding:36px 0 8px}
.phead h1{margin-bottom:8px}
.phead p{color:var(--muted);font-size:16px;max-width:60ch}
main>.wp-block-group.wrap{padding-top:0}

/* single-post body stays narrow on purpose */
.article{width:min(720px,100% - 40px);margin-left:auto;margin-right:auto}

@media(min-width:900px){
  .phead{padding:56px 0 16px}
  .phead p{font-size:17px}
}


/* ============================================================
   Button box-in-a-box fix
   The block button wrapper (.wp-block-button) must be invisible;
   only the inner link carries the fill, border and shadow.
   ============================================================ */
.wp-block-button.btn{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
.wp-block-button.btn>.wp-block-button__link{box-sizing:border-box}


/* ============================================================
   Brand: logo and wordmark on one line, no wrapping
   ============================================================ */
.bab-header .brand,.bab-footer .brand{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;white-space:nowrap}
.bab-header .brand .wp-block-site-title{margin:0}
.bab-header .brand .wp-block-site-title a{font-family:"DM Sans",system-ui,sans-serif;font-weight:600;font-size:16px;color:var(--navy);white-space:nowrap;line-height:1.1}
.bab-header .wp-block-site-logo{margin:0;line-height:0}
.bab-header .wp-block-site-logo img{width:32px;height:32px;display:block}
.bab-footer .brand .wp-block-site-title a{white-space:nowrap}
/* if no logo image is set, the little placeholder should not reserve odd space */
.bab-header .wp-block-site-logo.is-default-size{width:auto}


/* ============================================================
   Mobile actions inside the open menu (appended by JS)
   ============================================================ */
.bab-mobile-actions{display:none}
@media(max-width:899px){
  .bab-menu.open .bab-mobile-actions{display:flex;gap:12px;align-items:center;padding:14px 0 4px;width:100%}
  .bab-menu.open .bab-mobile-actions .mlogin{font-size:16px;font-weight:600;color:var(--muted);flex:0 0 auto}
  .bab-menu.open .bab-mobile-actions .mstart{flex:1;text-align:center;background:var(--blue);color:#fff;font-weight:600;padding:12px;border-radius:6px;min-height:44px;display:flex;align-items:center;justify-content:center}
}