/* ══════════════════════════════════════════════════════════════
   LS&D 2026 REFRESH  ·  loaded after every page's own stylesheet
   1. No circles   2. Sitewide polish   3. Home page moments
   One file to edit. To roll back: remove the <link> to this file.
   ══════════════════════════════════════════════════════════════ */

:root{
  --lagoon:#0B7A82;                 /* deep teal for gradient depth */
  --light-sweep:linear-gradient(105deg,rgba(31,195,204,.15) 0%,rgba(31,195,204,0) 48%);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ───────── 1. NO CIRCLES ───────── */

/* round glows: off. The main one in each hero becomes a soft linear light sweep */
.wash-2,.pg-hero .wash-b,.aida .wash-3,.hired .wash-h,.final .wash-f1,
.podcast::after,.ways::before{display:none !important}
.hero .wash,.wash-1,.pg-hero .wash-a{border-radius:0 !important;inset:0 !important;width:auto !important;height:auto !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;transform:none !important;animation:none !important;filter:none !important;background:var(--light-sweep) !important}
.hero-duo .scrim{background:var(--light-sweep) !important}
/* thank-you page glows */
.hero::before,.hero::after{border-radius:0 !important;background:none !important}

/* avatars, initials, photos: soft squares */
.hcell .ava,.grad-card .ava,.csx-card .ava,.pfv-fallback .ava,.mentor-card .ava,.tm-card .ava,.rq .rq-who .ava,
.story .who img,.story .who .mono,.bcard .who .mono,.bcard .who img,.hv-quote .who img,
.hf-chip .who .mono,.float-quote .fa .mono,.mini-jill .mj-photo,.byline .mj-photo{border-radius:28% !important}

/* round buttons and badges: soft squares */
.car-btn,.footer .fsoc a,.xcard .xtoggle,details.faq summary .xtoggle,.step .snum,.sim-mock .sm-send{border-radius:30% !important}
.aida-hero-card .ck,.aidahq li .ck,.price-card li .ck{border-radius:7px !important}
.pfv-chrome i{border-radius:2px !important}
.tsal-slider::-webkit-slider-thumb{border-radius:7px !important}
.tsal-slider::-moz-range-thumb{border-radius:7px !important}

/* thank-you pages: check badge and step numbers */
.hero__check,.prep-card__num,.hero-step__num,.step-card__num{border-radius:30% !important}

/* bullet dots: short glowing dashes */
.aida-feat .dot,.hcol li .dot,.cs-facts li .dot,.b2b-feat .dot,.door li .dot,.ai-card li .dot,.studio-list li .dot,
.rs-col li::before,.rs-price li::before{width:14px !important;height:2px !important;border-radius:2px !important;margin-top:12px !important;box-shadow:0 0 10px rgba(31,195,204,.55) !important}
.door li .dot,.rs-col li::before{box-shadow:none !important}

/* ───────── 2. SITEWIDE POLISH ───────── */

/* fine film grain on the dark sections: richer navy, less flat */
.hero-bleed::after,.pg-hero::after,.hired::after,.aida::after,.final::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;mix-blend-mode:overlay;background-image:var(--grain);z-index:1}
.hero-bleed .hero-content,.hero-bleed .proof-strip,.pg-hero>.container,.hired>.container,.aida>.container,.final>.inner,.final>.container{position:relative;z-index:2}

/* stat bar lifts off the hero and overlaps the next section */
.hero-bleed{overflow:visible}
.hero-bleed .bg{overflow:hidden}
.hero-bleed .proof-strip{width:min(1120px,calc(100% - 48px));margin:0 auto -64px;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:rgba(18,40,52,.86);box-shadow:0 40px 80px -30px rgba(5,15,22,.75);z-index:4}
.hero-bleed + section{padding-top:150px}
.hero-bleed h1{font-size:clamp(40px,5vw,66px);line-height:1.08}
.hero-bleed .hero-content>div{max-width:640px}
.proof-item .num{white-space:nowrap;font-size:36px}

/* grad wall: left-aligned tiles with a glowing top edge */
.hcell{text-align:left;padding:24px 22px 22px;position:relative;overflow:hidden}
.hcell::before{content:"";position:absolute;left:22px;right:22px;top:0;height:2px;background:linear-gradient(90deg,#1FC3CC,#8FE8ED,transparent);opacity:.7}
.hcell .ava{width:48px;height:48px;margin:0 0 16px;box-shadow:none;font-size:17px}

/* quote marks: big gradient glyph */
.hired-quote{border-radius:24px;padding:34px 40px 34px 36px}
.hired-quote .qm{font-family:Georgia,serif;font-size:96px;line-height:.7;background:linear-gradient(160deg,#8FE8ED,#1FC3CC);-webkit-background-clip:text;background-clip:text;color:transparent;align-self:flex-start}

/* final call to action button glow */
.final .btn{box-shadow:0 20px 40px -14px rgba(31,195,204,.7)}

/* ───────── 3. HOME PAGE MOMENTS (body.home only) ───────── */

/* paths: oversized outlined numbers hanging off each card */
.pnum{display:none}
.home .pnum{display:block;position:absolute;top:-34px;right:20px;font-family:var(--font-display);font-weight:300;font-size:74px;line-height:1;color:transparent;-webkit-text-stroke:1.2px rgba(172,113,77,.55);pointer-events:none}
.home .pcard-dark .pnum{-webkit-text-stroke-color:rgba(31,195,204,.85)}
.home .paths-cards{margin-top:20px}
.home .pcard{border-radius:22px}
.home .pcard:hover{transform:translateY(-10px) rotate(-.6deg)}

/* Jill: photo rises up into the section above */
.home .jill{padding-top:120px;overflow:visible;position:relative;z-index:1}
.home .jill-visual{margin-top:-300px;z-index:3}
.home .jill-grid>div:last-child{padding-top:70px}
.home .jill-visual .photo{transform:rotate(-2.4deg);box-shadow:0 60px 100px -40px rgba(34,58,76,.55)}
.home .jill-visual .badge{right:-34px}

/* podcast: phone breaks out of the top and bottom of the section */
.phone{display:none}
.home .podcast{overflow:visible;background:linear-gradient(120deg,#FBF6F0 0%,#F7E4D6 100%);padding:46px 0}
.home .pod-cover,.home .pod-frame,.home .pod-badge{display:none}
.home .pod-visual{min-height:440px}
.home .phone{display:block;position:absolute;left:50%;top:50%;width:300px;height:680px;transform:translate(-50%,-50%) rotate(-6deg);background:#0E1A22;border-radius:46px;padding:12px;box-shadow:0 70px 110px -40px rgba(20,35,45,.65),inset 0 0 0 2px #2b3a44,inset 0 0 0 4px #0b141a;z-index:6}
.phone::before{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:84px;height:24px;border-radius:14px;background:#0E1A22;z-index:3}
.ph-screen{height:100%;border-radius:36px;overflow:hidden;background:linear-gradient(180deg,#1E4250 0%,#16333F 55%,#0F2530 100%);padding:58px 20px 22px;color:#fff;display:flex;flex-direction:column}
.ph-top{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);text-align:center}
.ph-screen img{width:100%;border-radius:16px;margin:16px 0 18px;box-shadow:0 20px 40px -14px rgba(0,0,0,.6)}
.ph-title{font-family:var(--font-display);font-size:17px;line-height:1.25}
.ph-sub{font-size:12px;color:var(--sky);margin-top:4px}
.ph-bar{height:3px;border-radius:2px;background:rgba(255,255,255,.18);margin:18px 0 6px;position:relative}
.ph-bar i{position:absolute;left:0;top:0;bottom:0;width:38%;border-radius:2px;background:linear-gradient(90deg,#8FE8ED,#1FC3CC)}
.ph-ctrl{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding:0 14px;font-size:18px;color:rgba(255,255,255,.75)}
.ph-ctrl b{width:56px;height:56px;border-radius:18px;background:linear-gradient(140deg,#8FE8ED,#1FC3CC);color:#16333F;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 12px 24px -8px rgba(31,195,204,.7)}
.ph-tag{position:absolute;right:-96px;bottom:170px;background:#fff;border-radius:14px;padding:12px 16px;box-shadow:0 24px 40px -16px rgba(20,35,45,.45);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);transform:rotate(6deg);z-index:7;white-space:nowrap}
.ph-tag em{font-style:normal;color:var(--lagoon)}

/* ───────── RESPONSIVE ───────── */
@media (max-width:900px){
  .hero-bleed h1{font-size:clamp(34px,8.6vw,48px)}
  .proof-item .num{white-space:normal;font-size:30px}
  .hero-bleed .proof-strip{width:calc(100% - 32px);margin-bottom:-40px}
  .hero-bleed + section{padding-top:110px}
  .home .jill{padding-top:80px}
  .home .jill-visual{margin-top:0}
  .home .jill-grid>div:last-child{padding-top:0}
  .home .jill-visual .badge{right:-6px}
  .home .podcast{padding:80px 0}
  .home .phone{position:relative;left:auto;top:auto;transform:rotate(-4deg);margin:0 auto;height:560px;width:270px}
  .ph-tag{right:-10px}
}

/* ───────── text-only heroes: centered and wider (2026-10-16) ───────── */
.pg-hero--solo .container{text-align:center;}
.pg-hero--solo h1{max-width:26ch !important;margin-left:auto;margin-right:auto;}
.pg-hero--solo .pg-sub{max-width:68ch;margin-left:auto;margin-right:auto;}
.pg-hero--solo .hero-ctas,.pg-hero--solo .pg-chips{justify-content:center;}
.pg-hero--solo .crumbs,.pg-hero--solo .breadcrumbs{justify-content:center;}

/* ══════════════════════════════════════════════════════════════
   4. SITEWIDE VIBE RULES (2026-10-16, Jill approved)
   Dusk to daylight on every page. Skips the homepage (body.v2),
   which has its own version in /assets/v2/home-v2.css.
   S1 every page ends at sunrise   S2 no mid-page navy stripes
   S3 dusk-to-dawn after the hero  S4 one script word per page
   S5 one liquid glass recipe      S7 phone fixes
   ══════════════════════════════════════════════════════════════ */
:root{
  --dusk:#16333F; --dawn-1:#2F6A75; --dawn-2:#A9CFCF;
  --sun-1:#F6D0B6; --sun-2:#F3BB98; --sun-3:#EEA47F;
  --glass-dark:linear-gradient(130deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 40%,rgba(255,255,255,.10) 100%),rgba(16,38,48,.30);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.10),inset 0 0 30px rgba(143,232,237,.10);
}

/* S3 fade removed 2026-10-21 (Jill: "I didn't approve that other version that makes it look all weird").
   The hero now meets the next section with a clean edge. The homepage keeps its own approved
   dusk-to-daylight in /assets/v2/home-v2.css (D2). Positioning kept so nothing else shifts. */
body:not(.v2) .pg-hero{position:relative;isolation:isolate}
body:not(.v2) .pg-hero + section{position:relative;isolation:isolate}

/* S2. No stripes: mid-page navy bands become navy panels floating in the light.
   A navy band is "mid-page" when another navy band, or any section with a heading, comes after it. */
body:not(.v2) section.sec-navy:is(:has(~ section.sec-navy),:has(~ section h2)){background:transparent !important;overflow:visible;padding-top:48px;padding-bottom:48px}
body:not(.v2) section.sec-navy:is(:has(~ section.sec-navy),:has(~ section h2))::after{display:none}
body:not(.v2) section.sec-navy:is(:has(~ section.sec-navy),:has(~ section h2)) > .container{
  position:relative;color:#fff;
  background:linear-gradient(140deg,#24505E 0%,#1C3F4D 45%,#16333F 100%);
  border-radius:36px;padding:72px 56px;
  box-shadow:0 60px 120px -50px rgba(22,51,63,.6);
}
body:not(.v2) section.sec-navy:is(:has(~ section.sec-navy),:has(~ section h2)) > .container::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,rgba(143,232,237,.12) 0%,rgba(143,232,237,0) 40%),linear-gradient(300deg,rgba(247,207,184,.12) 0%,rgba(247,207,184,0) 35%)}
@media (max-width:900px){
  body:not(.v2) section.sec-navy:is(:has(~ section.sec-navy),:has(~ section h2)) > .container{margin-left:16px;margin-right:16px;padding:48px 22px;border-radius:28px;width:auto}
}

/* S1. Every page ends at sunrise: the last navy band, when nothing after it but a byline or note. */
body:not(.v2) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)),
body:not(.v2) section.ms-close{
  background:linear-gradient(180deg,rgba(255,255,255,0) 55%,rgba(255,236,214,.5) 82%,rgba(255,244,230,0) 100%),
             linear-gradient(180deg,var(--sun-1) 0%,var(--sun-2) 55%,var(--sun-3) 100%) !important;
  color:var(--navy) !important;
}
body:not(.v2) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2))::after,
body:not(.v2) section.ms-close::after{opacity:.08}
body:not(.v2) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)) *:not(.btn):not(.btn *),
body:not(.v2) section.ms-close *:not(.btn):not(.btn *){color:inherit !important}
body:not(.v2) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)) :is(p,li,small),
body:not(.v2) section.ms-close :is(p,li,small){opacity:.85}
body:not(.v2) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)) a:not(.btn),
body:not(.v2) section.ms-close a:not(.btn){text-decoration-color:rgba(34,58,76,.4)}
body:not(.v2) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)) :is(.btn-teal,.btn-peach),
body:not(.v2) section.ms-close :is(.btn-teal,.btn-peach){background:var(--navy) !important;border-color:var(--navy) !important;color:#fff !important;box-shadow:0 22px 44px -16px rgba(22,51,63,.7) !important}
body:not(.v2) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)) :is(.btn-ghost-light,.btn-ghost),
body:not(.v2) section.ms-close :is(.btn-ghost-light,.btn-ghost){background:rgba(255,255,255,.35) !important;border-color:rgba(34,58,76,.45) !important;color:var(--navy) !important}
body:not(.v2) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)) :is([class*="card"],[class*="door"],input,select),
body:not(.v2) section.ms-close :is([class*="card"],[class*="door"]){background:rgba(255,255,255,.5) !important;border-color:rgba(255,255,255,.85) !important}

/* S4. One script word per page: only the headline keeps it. */
body:not(.v2) .script:not(h1 .script){font-family:inherit !important;font-size:1em !important;transform:none !important;color:inherit !important;padding:0 !important;display:inline !important;line-height:inherit !important}
body:not(.v2) :is(.pcard .tagline,.hcol .h-kicker,.res-card .r-tag,.door .d-kicker,.ai-card .a-kicker,.mode-card .mk,.res-tab .rt-script,.chap,.ftt-verdict .k){
  font-family:var(--font-display) !important;font-size:15px !important;font-weight:600 !important;letter-spacing:.02em !important;text-transform:none !important;line-height:1.35 !important;transform:none !important}
body:not(.v2) :is(.chap-block .txt .pull,.ms-flash .pull){font-family:var(--font-display) !important;font-weight:300 !important;font-size:26px !important;line-height:1.35 !important}
body:not(.v2) :is(.xcard .xnum,.mstage .m-n,.cred .c-ic,.jshq-card .j-ic,.pause-card h3 .pi){font-family:var(--font-display) !important;font-weight:300 !important}

/* S5. One liquid glass recipe for hero cards, chips and stat cards. */
body:not(.v2) :is(.aida-hero-card,.grad-card,.statcard){
  background:var(--glass-dark) !important;border:1px solid rgba(255,255,255,.30) !important;
  box-shadow:var(--glass-edge),0 40px 80px -34px rgba(5,15,22,.8) !important;
  -webkit-backdrop-filter:blur(22px) saturate(170%) !important;backdrop-filter:blur(22px) saturate(170%) !important}
body:not(.v2) .pg-chip{background:rgba(255,255,255,.10) !important;border-color:rgba(255,255,255,.28) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}

/* S7. Phone: the logo can't get squeezed, and nothing runs off the screen. */
@media (max-width:900px){ .nav-logo{flex:0 0 auto;display:flex;align-items:center} .nav-logo img{width:auto;max-width:none} }
@media (max-width:900px){ .nav-logo img{height:32px} .nav-inner{gap:12px} .nav-cta{margin-left:auto} .nav-cta .btn{padding:10px 16px;font-size:11px;letter-spacing:.14em} }
@media (max-width:420px){ .nav-logo img{height:27px} .nav-inner{gap:8px} .nav-cta .btn{padding:9px 12px;font-size:10px;letter-spacing:.1em} }
/* A few pages force columns inline (style="grid-template-columns:..."), which beats the phone rule. Stack them on phones. */
@media (max-width:820px){ .glass-row[style]{grid-template-columns:1fr !important} }

/* S1 for Stories Like Yours: its closing is a card inside the tool, not a section. Same sunrise, navy button. */
body #lsd-proof-tool .pt-cta{background:linear-gradient(180deg,var(--sun-1) 0%,var(--sun-2) 55%,var(--sun-3) 100%) !important;box-shadow:0 24px 60px -30px rgba(172,113,77,.45)}
body #lsd-proof-tool .pt-cta-head,body #lsd-proof-tool .pt-cta-sub{color:var(--navy) !important}
body #lsd-proof-tool .pt-cta-btn{background:var(--navy) !important;color:#fff !important}
body #lsd-proof-tool .pt-cta-btn:hover,body #lsd-proof-tool .pt-cta-btn:focus,body #lsd-proof-tool .pt-cta-btn:visited{color:#fff !important;box-shadow:0 8px 24px rgba(34,58,76,.35)}

/* END SITEWIDE VIBE RULES */

/* ==========================================================================
   5. ANNOTATION ARROWS (style session, 2026-10-16)
   Used with assets/lsd-annotate.js. Markup and rules: see the session brief,
   "Design on purpose". Only for pointing at something real, and only where it earns its spot.
   ========================================================================== */
.annot{margin:0;position:relative}
.annot .annot-notes{margin:18px 0 0;padding-left:1.4em;font-size:15px;line-height:1.6;color:var(--navy)}
.annot .annot-notes li+li{margin-top:8px}
.annot .annot-notes b{display:block}
.annot.annot-js > .annot-notes{display:none}
.annot-stage{position:relative;display:grid;grid-template-columns:240px minmax(0,1fr) 240px;gap:42px;align-items:start}
.annot-col{position:relative}
.annot-frame{position:relative;background:#fff;border-radius:14px;box-shadow:0 40px 80px -40px rgba(34,58,76,.45),0 0 0 1px rgba(34,58,76,.12)}
.annot-frame::after{content:"";position:absolute;inset:-12px;border:2.5px dashed var(--teal);border-radius:22px;opacity:0;transition:opacity .25s;pointer-events:none}
.annot-frame.is-whole::after{opacity:1}
.annot-chrome{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid rgba(34,58,76,.12);background:#F3F5F6;border-radius:14px 14px 0 0}
.annot-chrome i{width:10px;height:10px;border-radius:50%;background:#D6DCE0}
.annot-chrome span{margin-left:12px;flex:1;background:#fff;border-radius:7px;padding:4px 12px;font-size:12px;color:#5D6F7E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.annot-shot{position:relative;border-radius:14px;overflow:hidden}
.annot-frame.has-chrome .annot-shot{border-radius:0 0 14px 14px}
.annot-shot > img{display:block;width:100%;height:auto;max-width:none}
.annot-arrows{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:3}
.annot-arrows path{fill:none;stroke:var(--sienna);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.annot-arrows path.is-hot{stroke:var(--lagoon,#0B7A82);stroke-width:2.6}
.annot-arrows .is-draw{stroke-dasharray:var(--annot-len);stroke-dashoffset:var(--annot-len);animation:annot-draw .7s ease-out forwards}
@keyframes annot-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.annot-arrows .is-draw{animation:none;stroke-dashoffset:0}}
.annot-dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--sienna);box-shadow:0 0 0 4px rgba(255,255,255,.85),0 2px 6px rgba(0,0,0,.25);z-index:2;transition:transform .2s,background .2s}
.annot-dot.is-hot{background:var(--lagoon,#0B7A82);transform:scale(1.35)}
.annot-pin{display:none}
.annot-note{position:absolute;left:0;right:0;text-align:left;background:#fff;border:0;border-radius:16px;padding:14px 16px 14px 50px;cursor:pointer;font:inherit;color:inherit;box-shadow:0 14px 30px -18px rgba(34,58,76,.45),inset 0 0 0 1px rgba(34,58,76,.12);transition:box-shadow .2s,transform .2s,top .25s}
.annot-col-l .annot-note{transform:rotate(-.6deg)}
.annot-col-r .annot-note{transform:rotate(.6deg)}
.annot-note:hover,.annot-note.is-hot{transform:rotate(0) translateY(-2px);box-shadow:0 18px 34px -16px rgba(11,122,130,.45),inset 0 0 0 1.5px var(--teal)}
.annot-n{position:absolute;left:14px;top:13px;width:26px;height:26px;border-radius:50%;background:var(--sienna);color:#fff;font-family:var(--font-display);font-weight:600;font-size:14px;display:grid;place-items:center;line-height:1;padding-top:2px}
.annot-note.is-hot .annot-n{background:var(--lagoon,#0B7A82)}
.annot-t{display:block;font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1.25;color:var(--navy)}
.annot-more{display:block;font-size:12px;color:var(--sienna);margin-top:4px;font-weight:600}
.annot-why{display:none;font-size:14px;line-height:1.6;color:#33475A;margin-top:8px}
.annot-note[aria-expanded="true"] .annot-why,.annot-whole[aria-expanded="true"] .annot-why{display:block}
.annot-note[aria-expanded="true"] .annot-more,.annot-whole[aria-expanded="true"] .annot-more{display:none}
.annot-wholes{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:0 auto 30px}
.annot-whole{position:relative;border:0;cursor:pointer;text-align:left;font:inherit;background:var(--cream);color:var(--sienna);border-radius:14px;padding:12px 16px 12px 48px;max-width:330px;box-shadow:0 12px 26px -18px rgba(172,113,77,.7);transition:transform .2s,box-shadow .2s}
.annot-whole:nth-child(odd){transform:rotate(-1deg)} .annot-whole:nth-child(even){transform:rotate(1deg)}
.annot-whole:hover{transform:rotate(0) translateY(-2px);box-shadow:0 14px 28px -14px rgba(11,122,130,.55),inset 0 0 0 1.5px var(--teal)}
.annot-whole svg{position:absolute;left:14px;top:13px;width:22px;height:22px}
.annot-whole .annot-t{font-size:16.5px}
.annot-note:focus-visible,.annot-whole:focus-visible,.annot-pin:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.annot-list{display:none}
@media (max-width:1100px){ .annot-stage{grid-template-columns:200px minmax(0,1fr) 200px;gap:32px} .annot-t{font-size:15.5px} }
@media (max-width:900px){
  .annot-stage{display:block}
  .annot-col,.annot-arrows,.annot-dot{display:none !important}
  .annot-pin{display:grid;position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:0;padding:2px 0 0;background:var(--sienna);color:#fff;font-family:var(--font-display);font-weight:600;font-size:13px;place-items:center;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 4px 10px rgba(0,0,0,.3);cursor:pointer;z-index:2}
  .annot-pin.is-hot{background:var(--lagoon,#0B7A82);transform:scale(1.15)}
  .annot-list{display:grid;gap:10px;margin-top:20px}
  .annot-list .annot-note{position:relative;transform:none}
}
/* END ANNOTATION ARROWS */

/* ==========================================================================
   6. LANE D OPENINGS, WAVE 1 (2026-10-20)
   Each page type gets its own opening (site-vibe-sweep Part 2).
   H3 podcast episodes: "now playing" card   H4 Jill's samples: laptop frame
   H2 case studies: photo-led (subtitle dropped)   My Story: boarding pass   Team: faces
   Appended only. To roll back: delete this block.
   ========================================================================== */

/* ── H3. Podcast episodes: the "now playing" card is the hero ── */
.np-hero{padding:156px 0 76px}
.np-card{position:relative;display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:46px;align-items:center;
  max-width:1060px;margin:0 auto;padding:38px 46px 38px 38px;border-radius:32px;text-align:left;
  background:var(--glass-dark);border:1px solid rgba(255,255,255,.30);
  box-shadow:var(--glass-edge),0 40px 80px -34px rgba(5,15,22,.8);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%)}
.np-num{position:absolute;top:-74px;right:34px;font-family:var(--font-display);font-weight:300;font-size:148px;line-height:1;
  color:transparent;-webkit-text-stroke:1.4px rgba(143,232,237,.8);letter-spacing:-.02em;pointer-events:none;user-select:none}
.np-art{margin:0;position:relative}
.np-art img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:22px;transform:rotate(-2deg);
  box-shadow:0 34px 60px -28px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.12)}
.np-body{min-width:0}
.np-hero h1{font-size:clamp(30px,3.3vw,46px);line-height:1.12;max-width:none;margin:0;text-wrap:balance}
.np-hero .pg-sub{margin-top:16px;font-size:16px;line-height:1.65;max-width:58ch}
.np-ctrl{display:flex;align-items:center;gap:20px;margin-top:28px}
.np-play{flex:0 0 auto;width:64px;height:64px;border:0;border-radius:30%;cursor:pointer;display:grid;place-items:center;
  background:linear-gradient(140deg,#8FE8ED,#1FC3CC);color:#16333F;box-shadow:0 14px 28px -10px rgba(31,195,204,.75);
  transition:transform .15s var(--ease),box-shadow .2s}
.np-play:hover{transform:translateY(-2px);box-shadow:0 18px 34px -10px rgba(31,195,204,.9)}
.np-play:focus-visible{outline:2px solid #fff;outline-offset:3px}
.np-play svg{width:24px;height:24px;fill:currentColor}
.np-play .i-pause,.np-hero.is-playing .np-play .i-play{display:none}
.np-hero.is-playing .np-play .i-pause{display:block}
.np-track{flex:1;min-width:0}
.np-wave{display:block;width:100%;height:46px;cursor:pointer}
.np-w-base{fill:rgba(255,255,255,.30)}
.np-w-fill{fill:var(--teal)}
.np-times{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-family:var(--font-display);font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.72)}
.np-hero .pg-chips{margin-top:22px;justify-content:flex-start}
@media (max-width:860px){
  .np-hero{padding:134px 0 56px}
  .np-card{grid-template-columns:1fr;gap:26px;padding:26px 22px 26px;border-radius:26px}
  .np-num{top:-50px;right:18px;font-size:96px}
  .np-art{width:136px}
  .np-hero h1{font-size:clamp(27px,7.4vw,36px)}
  .np-hero .pg-sub{font-size:15px}
  .np-ctrl{gap:14px;margin-top:22px}
  .np-play{width:56px;height:56px}
}

/* ── H4. Jill's sample galleries: the laptop frame (same recipe as the course pages) ── */
.lap-hero .pg-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:56px}
.lap-hero h1{max-width:18ch}
.lap{position:relative;width:88%;max-width:560px;margin:0 auto}
.lap-lid{position:relative;background:linear-gradient(180deg,#1E2E39,#13212B);border-radius:16px 16px 4px 4px;padding:16px 16px 20px;box-shadow:0 44px 70px -34px rgba(4,12,18,.8),inset 0 0 0 1px rgba(255,255,255,.08)}
.lap-lid::before{content:"";position:absolute;top:6px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#46565F}
.lap-screen{border-radius:3px;overflow:hidden;background:#000}
.lap-screen img{display:block;width:100%;height:auto}
.lap-base{position:relative;height:13px;margin:0 -6.5%;background:linear-gradient(180deg,#E6EAED 0%,#BCC4CA 65%,#98A1A8 100%);border-radius:0 0 14px 14px;box-shadow:0 20px 30px -18px rgba(4,12,18,.7)}
.lap-base::before{content:"";position:absolute;top:0;left:50%;width:17%;height:5px;transform:translateX(-50%);background:#A6AFB5;border-radius:0 0 8px 8px}
.lap figcaption{margin-top:18px;text-align:center;font-size:13.5px;color:rgba(255,255,255,.66)}
.lap figcaption a{color:var(--sky)}
@media (max-width:980px){.lap-hero .pg-hero-grid{grid-template-columns:1fr;gap:40px}.lap{width:90%}}

/* ── H2. Case studies: with the subtitle gone, the headline and the photo carry the opening ── */
.cs-hero-grid h1{font-size:clamp(34px,4.2vw,54px);line-height:1.12}
.cs-hero-grid .hero-ctas{margin-top:34px}

/* ── My Story: a real photo in a boarding-pass frame, matching the chapter passes ── */
.ms-pass{width:min(420px,100%)}
.ms-pass-card{margin:0;position:relative;border-radius:26px;overflow:hidden;background:var(--paper);transform:rotate(1.6deg);
  box-shadow:0 50px 90px -40px rgba(5,15,22,.8),0 0 0 1px rgba(255,255,255,.18)}
.ms-pass-photo{aspect-ratio:1/1;overflow:hidden}
.ms-pass-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.ms-pass-stub{position:relative;display:flex;justify-content:space-between;gap:16px;padding:18px 24px 18px;
  background:linear-gradient(120deg,var(--mist) 0%,#F3FBFC 60%,var(--sand) 100%);border-top:2px dashed var(--line-cool)}
.ms-pass-stub::before,.ms-pass-stub::after{content:"";position:absolute;top:-10px;width:18px;height:18px;background:#24505E;border-radius:5px;transform:rotate(45deg)}
.ms-pass-stub::before{left:-10px}.ms-pass-stub::after{right:-10px}
.ms-pass-stub span{min-width:0;font-family:var(--font-display);font-size:16px;font-weight:600;line-height:1.2;color:var(--navy)}
.ms-pass-stub span:last-child{text-align:right;color:var(--lagoon,#0B7A82)}
.ms-pass-stub small{display:block;font-family:var(--font-body);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:4px}
@media (max-width:900px){.ms-pass{margin:36px auto 0}.ms-pass-card{transform:none}.ms-pass-stub{padding:16px 20px}.ms-pass-stub span{font-size:14.5px}}

/* ── Team: the people lead, so their faces sit under the headline ── */
.tm-faces{display:flex;justify-content:center;margin-top:34px;padding-left:18px}
.tm-faces img{width:92px;height:92px;object-fit:cover;border-radius:28%;margin-left:-18px;border:3px solid rgba(255,255,255,.85);
  box-shadow:0 18px 34px -16px rgba(5,15,22,.8);background:var(--navy)}
.tm-faces img:nth-child(odd){transform:rotate(-3deg)}
.tm-faces img:nth-child(even){transform:rotate(3deg) translateY(6px)}
@media (max-width:520px){.tm-faces img{width:70px;height:70px;margin-left:-14px}.tm-faces{padding-left:14px}}
/* END LANE D OPENINGS */

/* 6b. LANE D: case studies without a photo on file show a monogram (S40, c11d), swapped for the photo when it arrives */
.cs-photo--mono{display:flex;align-items:flex-start;justify-content:center;padding-top:15%}
.cs-mono{font-family:var(--font-display);font-weight:300;font-size:clamp(110px,13vw,170px);line-height:1;letter-spacing:.02em;
  background:linear-gradient(180deg,#fff 0%,var(--sky) 55%,var(--teal) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cs-big.is-mono .g-id .ava{display:none}
@media (max-width:900px){.cs-photo--mono{padding-top:10%}.cs-mono{font-size:104px}}
/* END 6b */

/* 6c. LANE D (2026-10-21): one player per episode page. The card is the player; app links live in the card. */
.np-audio{display:none}
.np-apps{margin:18px 0 0;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.72)}
.np-apps a{color:var(--sky);text-decoration:underline;text-underline-offset:3px}
.np-apps a:hover{color:#fff}
/* END 6c */

/* ==========================================================================
   7. LANE E OPENINGS, WAVE 2 (2026-10-21)
   The rest of the page types get their own opening (site-vibe-sweep Part 2).
   H1 family: the four AIDA subpages share /academy/'s photo band, each with its own glass card
   Router: Start Here carries the five doors in the hero
   Proof: real faces under the headline (Results, case studies index); numbers lead (Outcomes Report);
          the tool is the hero (Stories Like Yours, H5)
   Hub: Resource Hub carries its three stages      Podcast hub: the cover-art card (H3 family), S60
   Employer pages (P20): daylight hero, calmer     AIDC: the credential as a card
   Appended only. To roll back: delete this block.
   ========================================================================== */

/* ── Shared: the glass card (same recipe as the hero cards, S5) ── */
.le-card{position:relative;border-radius:26px;padding:26px 28px 24px;color:#fff;text-align:left;
  background:var(--glass-dark);border:1px solid rgba(255,255,255,.30);
  box-shadow:var(--glass-edge),0 40px 80px -34px rgba(5,15,22,.8);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%)}
.le-card .le-k{font-family:var(--font-display);font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--sky);margin:0 0 16px}
.le-card a{color:#fff;text-decoration:none}
.le-card .arrow-link{margin-top:18px;color:var(--sky);font-size:12px}
.le-card .arrow-link::after{background:var(--sky)}
.le-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;position:relative}
.le-grid>*{min-width:0}
.le-grid .hero-ctas .btn{white-space:normal;text-align:center}
@media (max-width:900px){.le-grid{grid-template-columns:1fr;gap:36px}}

/* ── H1 family. Photo band for the AIDA subpages: the same morning photo as /academy/, dusk on the left ── */
.pg-hero.le-photo{position:relative;isolation:isolate;overflow:hidden;background:var(--dusk,#16333F)}
.le-photo .le-bg{position:absolute;top:0;bottom:0;right:0;left:34%;z-index:-2;background-size:cover;background-position:center 30%}
.le-photo .le-bg::before{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(22,51,63,.55) 0%,rgba(22,51,63,0) 24%,rgba(22,51,63,0) 72%,rgba(22,51,63,.9) 100%),
  linear-gradient(90deg,var(--dusk,#16333F) 0%,rgba(22,51,63,.82) 18%,rgba(22,51,63,.35) 42%,rgba(22,51,63,0) 64%)}
.le-photo .le-tag{position:absolute;z-index:5;right:24px;top:96px;font:600 10px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--navy);background:rgba(255,255,255,.82);border-radius:6px;padding:7px 9px;pointer-events:none}
.le-photo h1{max-width:none}
.le-photo .pg-sub{text-wrap:balance}
@media (max-width:900px){
  .le-photo .le-bg{left:0;bottom:auto;height:42svh;min-height:280px}
  .le-photo .le-bg::before{background:linear-gradient(180deg,rgba(22,51,63,.55) 0%,rgba(22,51,63,0) 30%,rgba(22,51,63,.2) 62%,var(--dusk,#16333F) 100%)}
  .le-photo .le-grid{padding-top:calc(max(280px,42svh) - 120px)}
  .le-photo .le-tag{top:78px;right:16px}
}

/* Curriculum: the ID Skill Ladder, bottom rung first */
.le-rungs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column-reverse;gap:6px;position:relative}
.le-rungs::before,.le-rungs::after{content:"";position:absolute;top:-8px;bottom:-8px;width:3px;border-radius:2px;background:linear-gradient(180deg,rgba(143,232,237,.9),rgba(143,232,237,.2))}
.le-rungs::before{left:4px}.le-rungs::after{right:4px}
.le-rungs li a{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 14px;padding:7px 14px;border-radius:10px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-family:var(--font-display);font-size:14px;line-height:1.2;transition:background .2s,transform .2s}
.le-rungs li a small{font-family:var(--font-body);font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.6)}
.le-rungs li a:hover{background:rgba(255,255,255,.14);transform:translateX(3px)}
.le-rungs li:first-child a{background:rgba(31,195,204,.22);border-color:rgba(31,195,204,.55)}

/* Steps: the four LEAD letters (AI page) and the six moves of a week in the search (job search page) */
.le-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.le-steps li a{display:flex;align-items:center;gap:14px;padding:9px 14px 9px 10px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-family:var(--font-display);font-size:15px;line-height:1.25;transition:background .2s,transform .2s}
.le-steps li a:hover{background:rgba(255,255,255,.14);transform:translateX(3px)}
.le-steps li a b{flex:0 0 auto;width:36px;height:36px;border-radius:30%;display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:16px;color:#16333F;background:linear-gradient(140deg,#8FE8ED,#1FC3CC);box-shadow:0 10px 20px -8px rgba(31,195,204,.7)}
.le-steps li a span{min-width:0}
.le-steps.le-path li a b{width:30px;height:30px;font-size:13px;font-weight:600}
.le-card .le-note{margin:16px 0 0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.72)}
.le-card .le-note a{color:var(--sky);text-decoration:underline;text-underline-offset:3px}

/* Faces: real people under a headline (Lane D's Team recipe, now with links) */
.le-faces{display:flex;flex-wrap:wrap;align-items:flex-end;margin:0;padding-left:18px}
.le-faces a,.le-faces img{display:block}
.le-faces img{width:84px;height:84px;object-fit:cover;border-radius:28%;margin-left:-18px;border:3px solid rgba(255,255,255,.85);
  box-shadow:0 18px 34px -16px rgba(5,15,22,.8);background:var(--navy);transition:transform .2s}
.le-faces>*:nth-child(odd) img{transform:rotate(-3deg)}
.le-faces>*:nth-child(even) img{transform:rotate(3deg) translateY(6px)}
.le-faces a:hover img{transform:rotate(0) translateY(-6px) scale(1.06);z-index:2;position:relative}
.le-card .le-faces{margin:0 0 18px;padding-left:16px}
.le-card .le-faces img{width:72px;height:72px;margin-left:-16px}
.le-card .le-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.le-card .le-list li a{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-size:14.5px;line-height:1.35;transition:background .2s}
.le-card .le-list li a::before{content:"";flex:0 0 14px;height:2px;border-radius:2px;background:var(--teal);box-shadow:0 0 10px rgba(31,195,204,.55)}
.le-card .le-list li a:hover{background:rgba(255,255,255,.14)}
/* proof pages: the faces sit between the subtitle and the buttons */
.pg-hero--solo .le-faces{justify-content:center;margin-top:28px}
.pg-hero--solo .le-faces+.hero-ctas{margin-top:26px}
@media (max-width:520px){.le-faces img{width:66px;height:66px;margin-left:-14px}.le-faces{padding-left:14px}}

/* Start Here: the five doors, right in the hero */
.le-doors{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:34px auto 0;max-width:1060px;text-align:left}
.le-doors a{display:flex;flex-direction:column;gap:6px;min-height:118px;padding:16px 16px 14px;border-radius:18px;color:#fff;text-decoration:none;
  background:var(--glass-dark);border:1px solid rgba(255,255,255,.30);box-shadow:var(--glass-edge),0 30px 60px -30px rgba(5,15,22,.8);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);transition:transform .2s var(--ease),box-shadow .2s}
.le-doors a:hover{transform:translateY(-6px);box-shadow:var(--glass-edge),0 36px 60px -26px rgba(31,195,204,.45)}
.le-doors small{font-family:var(--font-display);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--sky)}
.le-doors b{font-family:var(--font-display);font-weight:600;font-size:16px;line-height:1.25;text-wrap:balance}
.le-doors .arr{margin-top:auto;font-size:18px;color:var(--teal);line-height:1}
.pg-hero--solo .le-doors+.hero-ctas{margin-top:30px}
@media (max-width:1000px){.le-doors{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.le-doors{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.le-doors a{min-height:0;padding:14px}.le-doors b{font-size:14.5px}}

/* Outcomes Report: the numbers lead, as glass stat cards */
.le-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:34px}
.le-stat{flex:1 1 200px;max-width:260px;padding:24px 22px 20px;border-radius:22px;text-align:center;color:#fff;
  background:var(--glass-dark);border:1px solid rgba(255,255,255,.30);box-shadow:var(--glass-edge),0 40px 80px -34px rgba(5,15,22,.8);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%)}
.le-stat .num{font-family:var(--font-display);font-weight:300;font-size:46px;line-height:1;letter-spacing:-.01em}
.le-stat .num em{font-style:normal;color:var(--teal)}
.le-stat .cap{margin-top:10px;font-size:12.5px;letter-spacing:.04em;line-height:1.5;color:rgba(255,255,255,.72)}
.pg-hero--solo .le-stats+.hero-ctas{margin-top:30px}
@media (max-width:520px){.le-stats{gap:10px}.le-stat{flex-basis:140px;padding:18px 12px 16px}.le-stat .num{font-size:36px}}

/* Stories Like Yours (H5): shorter hero, the picker starts on the first screen */
.pg-hero.le-tool{padding-bottom:132px}
.pg-hero.le-tool+#lsd-proof-tool{position:relative;z-index:5;margin-top:-84px}
.pg-hero.le-tool+#lsd-proof-tool .pt-inner{padding-top:0}
@media (max-width:900px){.pg-hero.le-tool{padding-bottom:104px}.pg-hero.le-tool+#lsd-proof-tool{margin-top:-64px}}

/* Resource Hub: the three stages, as a map of the page */
.le-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:34px auto 0;max-width:960px;text-align:left}
.le-stages a{display:flex;flex-direction:column;gap:6px;padding:18px 20px 16px;border-radius:18px;color:#fff;text-decoration:none;
  background:var(--glass-dark);border:1px solid rgba(255,255,255,.30);box-shadow:var(--glass-edge),0 30px 60px -30px rgba(5,15,22,.8);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);transition:transform .2s var(--ease)}
.le-stages a:hover{transform:translateY(-6px)}
.le-stages small{font-family:var(--font-display);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--sky)}
.le-stages b{font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1.25;text-wrap:balance}
.le-stages span{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.72)}
.le-stages a:nth-child(2){background:linear-gradient(130deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.08) 40%,rgba(255,255,255,.14) 100%),rgba(47,106,117,.35)}
.le-stages a:nth-child(3){background:linear-gradient(130deg,rgba(255,244,230,.34) 0%,rgba(255,236,214,.14) 40%,rgba(255,244,230,.22) 100%),rgba(169,207,207,.28)}
.pg-hero--solo .le-stages+.hero-ctas{margin-top:30px}
@media (max-width:760px){.le-stages{grid-template-columns:1fr;gap:10px}}

/* Podcast hub: the cover-art card, the same family as the episode pages' "now playing" card */
.le-pod{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:44px;align-items:center;max-width:1060px;margin:0 auto;padding:36px 44px 34px 36px;border-radius:32px;text-align:left}
.le-pod .np-art{margin:0}
.le-pod h1{font-size:clamp(30px,3.4vw,46px);line-height:1.12;max-width:none;margin:0;text-wrap:balance}
.le-pod .pg-sub{margin-top:16px;font-size:16px;line-height:1.65;max-width:62ch}
.le-pod .pod-hero-plats{margin-top:24px;justify-content:flex-start}
.le-pod .pg-chips{margin-top:20px;justify-content:flex-start}
@media (max-width:860px){.le-pod{grid-template-columns:1fr;gap:24px;padding:24px 22px}.le-pod .np-art{width:150px}.le-pod h1{font-size:clamp(27px,7.4vw,36px)}}

/* Employer pages (P20): daylight from the first screen, one navy panel after */
body:not(.v2) .pg-hero.le-light{background:linear-gradient(160deg,#FBF6F0 0%,#F3E7DA 55%,#E6F4F5 100%);color:var(--navy)}
body:not(.v2) .pg-hero.le-light::before{background:linear-gradient(180deg,rgba(169,207,207,0) 0%,rgba(169,207,207,.35) 100%)}
body:not(.v2) .pg-hero.le-light::after{opacity:.08}
.le-light .wash{display:none !important}
.le-light h1{color:var(--navy)}
.le-light h1 .script{color:var(--sienna)}
.le-light .pg-sub{color:var(--ink-soft);font-weight:400}
.le-light .btn-ghost-light{color:var(--navy);border-color:rgba(34,58,76,.45)}
.le-light .btn-ghost-light:hover{background:rgba(34,58,76,.06)}
.le-light .pg-chip{background:rgba(255,255,255,.7) !important;border-color:rgba(34,58,76,.18) !important;color:var(--navy);box-shadow:0 10px 24px -18px rgba(34,58,76,.5)}
.le-light .pg-chip .st{color:var(--lagoon,#0B7A82)}
body:not(.v2) .pg-hero.le-light+section::before{display:none}
/* the nav reads dark over the light hero (same look as its scrolled state) */
body:has(.pg-hero.le-light) .nav:not(.scrolled) .logo-light{display:none}
body:has(.pg-hero.le-light) .nav:not(.scrolled) .logo-dark{display:block}
body:has(.pg-hero.le-light) .nav:not(.scrolled) .nav-links>li>a{color:var(--navy)}
body:has(.pg-hero.le-light) .nav:not(.scrolled) .nav-burger span{background:var(--navy)}
/* Hire an ID: the work, first (three grad portfolio home pages) */
.le-shots{position:relative;height:480px;width:min(100%,520px);justify-self:center}
.le-shots .shot{position:absolute;width:76%;display:block;border-radius:12px;overflow:hidden;background:#fff;text-decoration:none;
  box-shadow:0 34px 70px -24px rgba(34,58,76,.5),0 0 0 1px rgba(34,58,76,.1);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.le-shots .shot .bar{display:flex;align-items:center;gap:8px;height:26px;padding:0 12px;background:#F3F5F6;border-bottom:1px solid #E2E7EA;font-family:var(--font-display);font-size:11px;letter-spacing:.06em;color:#5B6B75}
.le-shots .shot .bar i{display:block;width:26px;height:4px;border-radius:2px;background:#CBD5DA}
.le-shots .shot img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;object-position:top}
.le-shots .s1{top:0;right:0;transform:rotate(3deg);z-index:1}
.le-shots .s2{top:100px;left:0;transform:rotate(-3.5deg);z-index:2}
.le-shots .s3{top:200px;right:5%;transform:rotate(1.5deg);z-index:3}
.le-shots .shot:hover{transform:rotate(0) translateY(-8px) scale(1.03);z-index:5;box-shadow:0 44px 80px -24px rgba(34,58,76,.55),0 0 0 2px var(--teal)}
@media (max-width:900px){.le-shots{height:420px;width:min(100%,440px)}}
@media (max-width:520px){.le-shots{height:390px}}

/* AIDC: the credential, as a card */
.le-cred{position:relative;border-radius:22px;padding:30px 30px 26px;color:#fff;text-align:left;
  background:var(--glass-dark);border:1px solid rgba(255,255,255,.30);box-shadow:var(--glass-edge),0 40px 80px -34px rgba(5,15,22,.8);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);transform:rotate(1.2deg)}
.le-cred::before{content:"";position:absolute;inset:10px;border:1px dashed rgba(255,255,255,.28);border-radius:14px;pointer-events:none}
.le-cred .le-seal{position:absolute;top:-22px;right:26px;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:.06em;color:#16333F;background:linear-gradient(140deg,#8FE8ED,#1FC3CC);box-shadow:0 14px 28px -10px rgba(31,195,204,.8)}
.le-cred .le-seal::after{content:"";position:absolute;inset:5px;border:1px dashed rgba(22,51,63,.45);border-radius:50%}
.le-cred .le-cred-t{font-family:var(--font-display);font-size:22px;line-height:1.2;margin:0 0 4px;padding-right:70px}
.le-cred .le-cred-s{font-size:12.5px;letter-spacing:.06em;color:rgba(255,255,255,.65);margin:0 0 20px}
.le-cred dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:14px;line-height:1.4}
.le-cred dt{font-family:var(--font-display);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sky);padding-top:3px}
.le-cred dd{margin:0;color:#fff}
@media (max-width:900px){.le-cred{transform:none;margin-top:8px}}
/* Outcomes Report: the numbers count up on first view (Jill, 10/21); tabular digits so the card doesn't jitter */
.le-stat .le-n{font-variant-numeric:tabular-nums}
/* END LANE E OPENINGS */
/* POST-LANE-H 2026-10-21 (b35, S64): The Method joins the top nav (8 items). Above 1180px the labels stay on one line with slightly tighter spacing; below that the nav keeps its old wrapping behaviour. */
@media (min-width:1180px){ .nav-links{gap:2px} .nav-links>li>a{white-space:nowrap;padding:10px 10px;letter-spacing:.11em} }
/* END POST-LANE-H */
/* LANE 4 BUILD PASS 2026-10-21 (S68, launch-lanes-master Lane 4 item 1): byline and Updated date under the H1 */
.pg-byline{margin:14px 0 0;font-family:var(--font-display);font-size:13px;letter-spacing:.06em;line-height:1.55;color:rgba(255,255,255,.7)}
.pg-byline a{color:var(--sky);text-decoration:none}
.pg-byline a:hover{text-decoration:underline}
.pg-byline-note{margin-top:4px;color:rgba(255,255,255,.58)}
/* Lane 4 item 3: series block, one per hub, on the hub and every spoke. The heading is a role=heading paragraph, not an h2, so the sitewide 'navy band followed by a section with an h2' card rule doesn't restyle the closing CTA band */
.series-block{padding:52px 0 56px}
.series-block .series-in{max-width:760px;margin:0 auto}
.series-block .series-h{font-family:var(--font-display);font-size:clamp(22px,2.4vw,28px);line-height:1.2;color:var(--navy);margin:0 0 18px}
.series-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.series-list li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.5}
.series-list a{color:var(--navy);text-decoration:none;font-weight:600}
.series-list a:hover{color:var(--teal)}
.series-list .s-tag{flex:0 0 auto;font-family:var(--font-display);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.series-list li[aria-current] > span:first-child{color:var(--ink-soft)}
@media (max-width:560px){.series-list li{flex-direction:column;gap:2px}}
/* Lane 4 item 2: Outcomes Report findings as H3s, eight cards */
.finding h3{margin:0;font:inherit;letter-spacing:inherit;color:inherit;text-transform:none}
.finding h3 .f-num,.finding h3 .f-cap{display:block}
@media (min-width:1100px){#findings .findings{grid-template-columns:repeat(4,1fr)}}
@media (min-width:881px) and (max-width:1099px){#findings .findings{grid-template-columns:repeat(2,1fr)}}
.pg-hero a.or-cite,.pg-sub a.or-cite{color:var(--sky)}
/* END LANE 4 BUILD PASS */

/* ══════════ SKY PAGES (2026-10-21, Jill: the homepage's slow dusk-to-daylight on the AIDA page and the teacher door) ══════════
   Opt-in: class "sky" on <body>, "sky-dawn" on the section where the light comes in, and (optional)
   "sky-dark" on a section that should stay in the dark sky above it. Same colors as the homepage
   (home-v2.css, D2). The page stays dark at the top, the light comes in through the sky-dawn section,
   then the rest of the page warms from cream to peach as you scroll. Cream and white stripes are off
   on these pages: the sections sit on one long sky. Navy panels further down stay as they are. */
body.sky{
  --sk-dusk:#16333F;--sk-dusk-2:#1D4553;--sk-dawn-1:#2F6A75;--sk-dawn-2:#8CBDBE;--sk-dawn-3:#E3EFEC;
  --sk-day:#FBF6F0;--sk-day-2:#FFFDF9;--sk-w1:#FDF4EB;--sk-w2:#FCEDE0;--sk-w3:#FAE4D3;--sk-w4:#F8DBC6;--sk-sun:#F6D0B6;
  background:linear-gradient(180deg,var(--sk-day) 0%,var(--sk-day) 14%,var(--sk-day-2) 26%,var(--sk-w1) 42%,var(--sk-w2) 58%,var(--sk-w3) 72%,var(--sk-w4) 86%,var(--sk-sun) 100%);
}
body.sky section.sec.sec-sand,body.sky section.sec.sec-paper{background:transparent !important}
body.sky section.sec.sky-dark.sky-dark.sky-dark{background:var(--sk-dusk) !important;padding-top:64px !important;padding-bottom:56px !important}
body.sky section.sec.sky-dark.sky-dark.sky-dark > .container{background:none !important;box-shadow:none !important}
body.sky section.sec.sky-dark.sky-dark.sky-dark > .container::before{display:none !important}
body.sky section.sec.sky-dawn.sky-dawn{
  background:linear-gradient(180deg,var(--sk-dusk) 0%,var(--sk-dusk-2) 14%,var(--sk-dawn-1) 26%,var(--sk-dawn-2) 44%,var(--sk-dawn-3) 62%,rgba(251,246,240,0) 80%) !important;
  padding-top:110px !important;padding-bottom:140px !important;
}
body.sky .sky-dawn .head h2{color:#fff}
body.sky .sky-dawn .head p{color:rgba(255,255,255,.85)}
@media (max-width:720px){
  body.sky section.sec.sky-dawn.sky-dawn{padding-top:72px !important;padding-bottom:110px !important}
  body.sky section.sec.sky-dark.sky-dark.sky-dark{padding-top:48px !important;padding-bottom:40px !important}
}
/* Teacher door (sky-tall): the light comes in behind one short card, so the section is taller and the fade
   runs the full height, about the same length as the homepage's (Jill 10/21: "on the home page, it's more fade in between"). */
body.sky section.sec.sky-dawn.sky-dawn.sky-tall{
  background:linear-gradient(180deg,var(--sk-dusk) 0%,var(--sk-dusk-2) 12%,var(--sk-dawn-1) 30%,var(--sk-dawn-2) 54%,var(--sk-dawn-3) 78%,var(--sk-day) 100%) !important;
  padding-top:150px !important;padding-bottom:150px !important;
}
@media (max-width:720px){
  body.sky section.sec.sky-dawn.sky-dawn.sky-tall{padding-top:96px !important;padding-bottom:110px !important}
}
/* END SKY PAGES */

/* ══════════ CALM PAGES (2026-10-21, Jill: no cream/white stripes on the long reading pages) ══════════
   Opt-in: class "calm" on <body>. One warm-white page; sections separated by space and a hairline at the
   top of each section's content. "calm-zone" on a run of sections gives one deliberate color change
   (used on the Ultimate Guide for the how-to part). Dark sections, navy panels and the peach ending stay. */
body.calm{background:#FFFDF9}
body.calm section.sec.sec-sand,body.calm section.sec.sec-paper{background:#FFFDF9 !important;padding-top:64px !important;padding-bottom:64px !important}
body.calm section.sec.calm-zone.calm-zone{background:#F6EEE3 !important}
body.calm section.sec:not(.sec-navy) + section.sec:not(.sec-navy){padding-top:0 !important}
body.calm section.sec:not(.sec-navy) + section.sec:not(.sec-navy) > .container{border-top:1px solid rgba(22,51,63,.10);padding-top:64px}
body.calm section.sec:not(.calm-zone) + section.sec.calm-zone,
body.calm section.sec.calm-zone + section.sec:not(.calm-zone):not(.sec-navy){padding-top:88px !important}
body.calm section.sec:not(.calm-zone) + section.sec.calm-zone > .container,
body.calm section.sec.calm-zone + section.sec:not(.calm-zone) > .container{border-top:0;padding-top:0}
body.calm section.sec.calm-zone:has(+ section.sec:not(.calm-zone)){padding-bottom:88px !important}
@media (max-width:720px){
  body.calm section.sec.sec-sand,body.calm section.sec.sec-paper{padding-top:48px !important;padding-bottom:48px !important}
  body.calm section.sec:not(.sec-navy) + section.sec:not(.sec-navy) > .container{padding-top:48px}
}
/* END CALM PAGES */

/* ══════════ READABLE TYPE (2026-10-22, Jill: bigger, darker text, one scale; narrower reading column) ══════════
   Body text 17px; FAQ answers and step text 16.5px; text inside cards 15.5px (was 13.5 to 14.5);
   captions 14px. The gray-blue body color is darker so it reads as ink, not gray.
   FAQ questions 18px and small card titles 19px so headings stay bigger than the text under them.
   Reading column on the calm pages: 640px, about 75 characters a line (was 760px, about 90).
   Homepage (body.v2) keeps its own type for now. */
body:not(.v2){--ink-soft:#3A4D5C;--ink-faint:#5E707E}
body:not(.v2) details.faq .fbody,body:not(.v2) details.faq .fbody p,body:not(.v2) .xbody,body:not(.v2) .xbody p{font-size:16.5px}
body:not(.v2) details.faq summary{font-size:18px}
body:not(.v2) .steps .step p{font-size:16.5px}
body:not(.v2) article:is(.ep-article,.legal,.cmp-article) :is(p,li){font-size:17px}
body:not(.v2) section :is([class*="card"]:not(.frame-card),.ac-move,.ac-teaser,.ac-call,.ac-face,.door,.hcol,.cd-side,.jsp-tool,.smp-course,.ty-next,.sbs-build) :is(p,li,blockquote){font-size:15.5px}
body:not(.v2) section :is(.ac-move,.ty-next){font-size:15.5px}
body:not(.v2) section :is(.jshq-card,.pause-card) h3{font-size:19px}
body:not(.v2) section.sec-navy li > span{font-size:15.5px}
body:not(.v2) section.sec table :is(td,th){font-size:15.5px}
body:not(.v2) :is(.byline p,.sc-d,.mv-d){font-size:14px;color:var(--ink-faint)}
body.calm section.sec :is(div[style*="max-width:760px"],.lead-prose,.lk-prose){max-width:640px !important}
body:not(.v2) article.legal{overflow-wrap:anywhere}
/* END READABLE TYPE */

/* ══════════ PAY CALCULATOR ON LIGHT SECTIONS (2026-10-22) ══════════
   The state pay calculator was styled for a dark panel (teacher door). On light sections (AIDA, AIDA Monthly,
   the salary page) its white text disappeared. Same calculator, dark-on-light colors. */
body:not(.v2) section:not(.sec-navy) .tsal-card{background:#fff !important;border:1px solid rgba(22,51,63,.12) !important;box-shadow:0 34px 70px -34px rgba(22,51,63,.30) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
body:not(.v2) section:not(.sec-navy) .tsal-card h3{color:var(--navy)}
body:not(.v2) section:not(.sec-navy) .tsal-eyebrow{color:var(--lagoon,#0B7A82)}
body:not(.v2) section:not(.sec-navy) .tsal-label{color:var(--ink-soft)}
body:not(.v2) section:not(.sec-navy) .tsal-val{color:var(--lagoon,#0B7A82)}
body:not(.v2) section:not(.sec-navy) .tsal-select{background-color:#FBF6F0;border-color:rgba(22,51,63,.18);color:var(--navy)}
body:not(.v2) section:not(.sec-navy) .tsal-display{background:#E8F7F8;border-color:rgba(31,195,204,.45)}
body:not(.v2) section:not(.sec-navy) .tsal-display-label{color:var(--ink-soft)}
body:not(.v2) section:not(.sec-navy) .tsal-display-value{color:var(--lagoon,#0B7A82)}
body:not(.v2) section:not(.sec-navy) .tsal-slider{background:rgba(22,51,63,.15)}
body:not(.v2) section:not(.sec-navy) .tsal-hint{color:var(--ink-faint)}
body:not(.v2) section:not(.sec-navy) .tsal-result{background:#FBF6F0;border-color:rgba(22,51,63,.10)}
body:not(.v2) section:not(.sec-navy) .tsal-metric-label{color:var(--ink-soft)}
body:not(.v2) section:not(.sec-navy) .tsal-metric-value{color:var(--navy)}
body:not(.v2) section:not(.sec-navy) .tsal-metric-sub{color:var(--ink-soft);font-size:15px}
body:not(.v2) section:not(.sec-navy) .tsal-fine{color:var(--ink-faint);font-size:12.5px}
/* END PAY CALCULATOR ON LIGHT SECTIONS */

/* ══════════ SPEED (2026-10-22, Jill #6) ══════════
   The top section shows immediately. Its headline, intro and buttons used to start invisible and fade in
   only after the page's script ran at the end of the page, which made phones wait to see the main content.
   Fade-ins further down the page stay. */
:is(.pg-hero,.hero,.hero-bleed,.wk-hero,.ty-hero) .reveal,:is(.pg-hero,.hero,.hero-bleed,.wk-hero,.ty-hero) .reveal:not(.in){opacity:1 !important;transform:none !important;transition:none !important}
/* END SPEED */

/* ══════════ QUIET LINKS (2026-10-22, Jill: one main button, the rest as text links) ══════════ */
.link-quiet-light{color:#fff !important;align-self:center;font-weight:600;letter-spacing:.02em}
.link-quiet-light .arr{color:var(--sky,#8FE8ED)}
/* END QUIET LINKS */

/* ══════════ LANE 5 TOOL CARDS (2026-10-22): free tool, shop and workshop cards on content pages. Reuses .res-card from the site stylesheet ══════════ */
.tool-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin:32px 0 0;text-align:left}
.tool-cards.one{grid-template-columns:minmax(0,420px)}
.tool-cards.one.center{justify-content:center}
.tool-cards>*{min-width:0}
.tool-cards .res-card{overflow-wrap:anywhere;color:inherit}
.tool-cards .res-card h3{margin-top:0}
.tool-cards .res-card p{margin:0}
.anat-tools{padding:8px 0 56px}
.anat-tools .tool-cards{grid-template-columns:repeat(auto-fit,minmax(220px,340px));justify-content:center}
.shop-item[id]{scroll-margin-top:110px}
/* END LANE 5 TOOL CARDS */

/* ══════════ LANE 6 SUBSTACK CARD AND PODCAST LINE (2026-10-22, M21 and M23, S96). Card styling copied from the /learnmore-thank-you/ np-card ══════════ */
.ss-wrap{padding:8px 0 48px}
.ss-card{display:flex;flex-direction:column;max-width:640px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px;box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;transition:box-shadow .25s,transform .25s;overflow-wrap:anywhere}
.ss-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.ss-card h3{font-size:19px;margin:0 0 8px;color:var(--navy)}
.ss-card p{font-size:15.5px;line-height:1.65;color:var(--ink-soft);margin:0 0 10px}
.ss-card .ss-go{margin-top:auto;padding-top:12px;color:var(--teal);font-weight:600;font-size:14.5px}
.series-pod{margin:14px 0 0;font-size:13.5px;color:var(--ink-soft)}
.series-pod a{color:var(--navy)}
.created-by{color:rgba(255,255,255,.7)}
/* END LANE 6 SUBSTACK CARD AND PODCAST LINE */
/* ══════════ PODCAST + SUBSTACK PLUGS AND THE OFFER SLIDE-IN (2026-10-23, S105/S106) ══════════ */
/* Same values as the site palette, set here too because a few older pages load a stylesheet without these variables */
.pod-band,.ep-in,.offer-si{--mist:#E6F8FA;--navy:#223A4C;--ink-soft:#4A5E70;--teal:#1FC3CC;--sky:#8FE8ED;--paper:#FFFFFF;--line:#E6DED4;--line-cool:#D7E4E8;--radius-md:14px;--shadow-xs:0 1px 2px rgba(34,58,76,.06);--shadow-md:0 8px 20px rgba(34,58,76,.10);--shadow-lg:0 20px 48px rgba(34,58,76,.14);--ease:cubic-bezier(.22,.61,.36,1);--font-display:"Josefin Sans","Helvetica Neue",Arial,sans-serif}
.pod-band{background:var(--mist);border-top:1px solid var(--line-cool);padding:40px 0}
.pod-band-in{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap}
.pod-band-txt{flex:1 1 380px;min-width:0}
.pod-band-h{font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1.2;color:var(--navy);margin:0 0 6px}
.pod-band-txt p:not(.pod-band-h){margin:0;color:var(--ink-soft);font-size:15.5px;line-height:1.6}
.pod-band-ctas{display:flex;gap:12px;flex-wrap:wrap}
.ep-in{margin-top:32px}
.ep-card{display:flex;align-items:center;gap:16px;max-width:760px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:var(--radius-md);padding:18px 22px;text-decoration:none;color:inherit;box-shadow:var(--shadow-xs);transition:box-shadow .25s,transform .25s;overflow-wrap:anywhere}
.ep-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.ep-ico{flex:none;width:44px;height:44px;border-radius:50%;background:var(--mist);color:var(--navy);display:grid;place-items:center}
.ep-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ep-k{font-size:13px;color:var(--ink-soft)}
.ep-t{font-weight:700;color:var(--navy);font-size:16px;line-height:1.35}
.ep-go{color:var(--teal);font-weight:600;font-size:14px;margin-top:2px}
.offer-si{position:fixed;right:20px;bottom:20px;z-index:60;width:340px;max-width:calc(100vw - 40px);background:var(--navy);color:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:18px 46px 18px 20px;opacity:0;transform:translateY(16px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.offer-si.in{opacity:1;transform:none}
.offer-si-t{font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1.25;margin:0 0 4px;color:#fff}
.offer-si-w{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.78);margin:0 0 12px}
.offer-si .btn{padding:10px 18px;font-size:13px}
.offer-si-x{position:absolute;top:8px;right:8px;width:32px;height:32px;border:0;border-radius:50%;background:none;color:rgba(255,255,255,.75);font-size:22px;line-height:1;cursor:pointer}
.offer-si-x:hover{color:#fff}
.offer-si-x:focus-visible,.offer-si a:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
@media (max-width:600px){
  .pod-band{padding:32px 0}
  .pod-band-ctas{width:100%}
  .pod-band-ctas .btn{flex:1 1 0;justify-content:center}
  .ep-card{padding:16px 18px;gap:12px}
  .offer-si{left:0;right:0;bottom:0;width:auto;max-width:none;border-radius:16px 16px 0 0;padding:12px 46px 12px 16px}
  .offer-si-w{display:none}
  .offer-si-t{font-size:14px;line-height:1.3;margin:0 0 8px}
  .offer-si .btn{padding:8px 14px;font-size:12px;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.offer-si{transition:none}.ep-card{transition:none}}
/* END PODCAST + SUBSTACK PLUGS */
/* ══════════ SITE-WIDE TOP BAR (2026-10-23, b11, S105): live event, else the Blueprint; never the podcast or Substack ══════════ */
.lsd-topbar{--tb-h:40px;position:fixed;top:0;left:0;right:0;z-index:101;height:var(--tb-h);display:flex;align-items:center;justify-content:center;gap:14px;padding:0 16px;background:#223A4C;color:#fff;text-decoration:none;font-family:"Montserrat","Helvetica Neue",Arial,sans-serif;font-size:13.5px;line-height:1.2;white-space:nowrap;overflow:hidden}
.lsd-topbar:hover .tb-go{text-decoration:underline}
.lsd-topbar:focus-visible{outline:2px solid #8FE8ED;outline-offset:-3px}
.lsd-topbar .tb-t{font-weight:700;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lsd-topbar .tb-w{color:rgba(255,255,255,.75)}
.lsd-topbar .tb-go{color:#8FE8ED;font-weight:600;flex:none}
body:has(> .lsd-topbar){padding-top:40px}
body:has(> .lsd-topbar) .nav{top:40px}
html.tb-off body{padding-top:0}
html.tb-off .nav{top:0}
.lsd-topbar .tb-m{display:none;font-weight:700}
@media (max-width:760px){.lsd-topbar .tb-w,.lsd-topbar .tb-t{display:none}.lsd-topbar .tb-m{display:inline}.lsd-topbar{font-size:13px;gap:12px}}
/* END SITE-WIDE TOP BAR */

/* ===== TIER 1 MENU + LEARNING LIBRARY (S109, S110; 2026-10-23) ===== */
.nav-links .dropdown.dd-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:6px;min-width:470px;left:50%;transform:translate(-50%,10px);}
.nav-links li:hover .dropdown.dd-cols,.nav-links li:focus-within .dropdown.dd-cols{transform:translate(-50%,4px);}
.dropdown .dd-col{display:flex;flex-direction:column;min-width:0;}
.dropdown .dd-h{margin:0;padding:8px 12px 4px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint,#7E8F9D);}
.mobile-menu.mm-grouped{justify-content:flex-start;}
.mobile-menu .mm-group{border-bottom:1px solid rgba(255,255,255,.1);}
.mobile-menu .mm-group summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:#fff;font-family:var(--font-display);font-size:24px;padding:13px 0;}
.mobile-menu .mm-group summary::-webkit-details-marker{display:none;}
.mobile-menu .mm-group summary::after{content:"+";font-family:var(--font-body);font-size:22px;opacity:.6;}
.mobile-menu .mm-group[open] summary::after{content:"\2212";}
.mobile-menu .mm-group a{font-family:var(--font-body);font-size:17px;padding:10px 0 10px 16px;border-bottom:1px solid rgba(255,255,255,.06);}
.mobile-menu .mm-group a:last-child{border-bottom:0;margin-bottom:8px;}
.mobile-menu .mm-h{margin:12px 0 2px 16px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);}
.res-card.lib-pillar{border-top:3px solid var(--teal);}
body.menu-open .nav{z-index:220;} /* burger stays above the open phone menu so the X closes it */

/* ══════════ REVIEW FIXES: HOMEPAGE (2026-10-23, Jill's review 6:40pm) ══════════ */
/* Workshop slide-in, a little more prominent: a bigger corner card with Jill's photo, still a corner (Google-safe, S106) */
.offer-si.offer-si-ws{width:400px;display:flex;align-items:center;gap:16px;padding:20px 48px 20px 20px;border-left:5px solid var(--teal)}
.offer-si-pic{flex:none;width:68px;height:68px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.9)}
.offer-si-body{min-width:0}
.offer-si-k{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--sky);margin:0 0 4px}
.offer-si-ws .offer-si-t{font-size:19px}
.offer-si-ws .btn{padding:11px 20px;font-size:14px}
@media (max-width:600px){
  .offer-si.offer-si-ws{width:auto;border-left:0;border-top:4px solid var(--teal);padding:12px 46px 12px 14px;gap:12px}
  .offer-si-pic{width:44px;height:44px;border-width:2px}
  .offer-si-k{display:none}
  .offer-si-ws .offer-si-t{font-size:14px}
  .offer-si-ws .btn{padding:8px 14px;font-size:12px}
}
/* Quick sign-up modal (workshop) */
.ws-modal{--navy:#223A4C;--ink:#2B3A47;--ink-soft:#4A5E70;--teal:#1FC3CC;--line:#E6DED4;--sand:#FBF7F2;width:calc(100% - 32px);max-width:540px;max-height:calc(100vh - 32px);overflow:auto;border:0;border-radius:18px;padding:30px 28px 24px;background:#fff;color:var(--ink);box-shadow:0 24px 60px rgba(34,58,76,.28)}
.ws-modal::backdrop{background:rgba(34,58,76,.55)}
.ws-modal-x{position:absolute;top:10px;right:10px;width:38px;height:38px;border:0;border-radius:50%;background:none;color:var(--ink-soft);font-size:26px;line-height:1;cursor:pointer}
.ws-modal-x:hover{color:var(--navy)}
.ws-modal-k{font-size:12.5px;font-weight:600;letter-spacing:.06em;color:#B4532A;margin:0 0 6px}
.ws-modal-t{font-family:"Josefin Sans","Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:24px;line-height:1.2;color:var(--navy);margin:0 0 6px;padding-right:30px}
.ws-modal-w{font-size:15px;color:var(--ink-soft);margin:0 0 18px}
.ws-form{display:block}
.ws-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ws-field{display:block;margin:0 0 12px;border:0;padding:0;min-width:0}
.ws-field>span,.ws-field legend{display:block;font-size:13.5px;font-weight:600;color:var(--navy);margin:0 0 5px;padding:0}
.ws-field i{font-weight:400;font-style:normal;color:var(--ink-soft)}
.ws-field input[type=text],.ws-field input[type=email],.ws-field input[type=tel],.ws-field select{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--sand);color:var(--ink)}
.ws-field input:focus,.ws-field select:focus{outline:2px solid var(--teal);outline-offset:1px;background:#fff}
.ws-radios{display:flex;gap:20px;font-size:15px}
.ws-radios label{display:flex;align-items:center;gap:6px}
.ws-radios input{accent-color:var(--teal)}
.ws-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--ink-soft);margin:0 0 12px}
.ws-check input{margin-top:2px;width:16px;height:16px;flex:none;accent-color:var(--teal)}
.ws-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ws-err{display:none;color:#B3261E;font-size:14px;margin:0 0 12px}
.ws-submit{width:100%;justify-content:center;margin:4px 0 12px}
.ws-note{font-size:13px;color:var(--ink-soft);margin:0 0 6px;text-align:center}
.ws-note a{color:var(--navy)}
.ws-modal-x:focus-visible,.ws-note a:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media (max-width:480px){.ws-modal{padding:26px 18px 18px}.ws-row{grid-template-columns:1fr;gap:0}.ws-modal-t{font-size:21px}}
/* Homepage: path cards with two links, hero tagline line break, headings, Trustpilot link, two-ways tags */
.v2 .pcard .pc-links{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.v2 .hero-sub .hs-br{display:none}
@media (min-width:900px){.v2 .hero-sub{max-width:none}.v2 .hero-sub .hs-br{display:inline}}
@media (min-width:1024px){.v2 .gr-head h2{max-width:none;white-space:nowrap}}
.v2 .ways .way .tag{text-transform:none;letter-spacing:.04em;font-size:13px}
/* Homepage fixes, second pass: specificity over home-v2.css (loads after this file), modal centering, two-card tool row */
@media (min-width:1024px){body.v2 .gr-head h2{max-width:none;white-space:nowrap}}
.ws-modal{margin:auto}
@media (min-width:901px){body.v2 .ti-grid:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,400px));justify-content:center}}
/* END REVIEW FIXES: HOMEPAGE */

/* ══════════ DESIGN SYSTEM v2 (2026-10-23, S112; design-pass Lane 1, after the independent rating) ══════════
   One system for every page except the homepage, which is the benchmark (Jill 10/23). Footer alignment and the
   footer's phone columns apply to the homepage too (pure alignment fixes); everything else is body:not(.home).
   WIDTHS, two only: reading 720px (headings, intros, quick answers, steps, FAQs) and wide 1136px (grids, panels).
   CARDS, three styles: 1 light card (.ds-card and the older light cards), 2 glass card on dark (S5), 3 navy panel.
   BUTTONS: primary is peach (.btn-peach) on light and teal (.btn-teal) on dark; secondary is the ghost button;
     text links (.ds-link, .arrow-link, link groups) are sentence case with an arrow glued to the last word.
     In a link group the first link is the main one; the rest are quieter.
   QUOTES, one treatment: a curly gradient quote mark, the quote in the display face, the name in sentence case below.
   LABELS: micro labels, chips and footnotes are sentence case, 13px minimum, with real contrast.
   HEADINGS: statement headings end with a period, questions with "?" (as on the homepage); they wrap evenly.
   STEPS: flat number tiles and one continuous line; phones indent about 48px.
   CLOSE: one warm block: the closing band (cream into sun, peach button), the author box and the series list on
     the same color, then the podcast band in the same warm palette, then the footer. */
body:not(.home){--ds-line:rgba(22,51,63,.10);--ds-shadow:0 26px 52px -34px rgba(22,51,63,.40);--ds-radius:22px;--ds-pad:28px;
  --ds-read:720px;--ds-wide:1136px;--ds-close-1:#FDF4EB;--ds-close-2:#F8DBC6;--ds-close-3:#F6D0B6}

/* Widths */
body:not(.home) .sec .head,body:not(.home) .ds-head,body:not(.home) .ds-read,body:not(.home) .tldr,body:not(.home) .faq-list,body:not(.home) .steps{max-width:var(--ds-read);margin-left:auto;margin-right:auto}
body:not(.home) .sec .head.left{margin-left:0}

/* 1. Light card */
body:not(.home) :is(.ds-card,.frame-card,.skm-card,.dr-life .lq,.q-light,.xcard){background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-radius);box-shadow:var(--ds-shadow)}
body:not(.home) .ds-card{padding:var(--ds-pad)}
body:not(.home) .frame-wrap::before,body:not(.home) .grad-card-wrap .gframe{display:none}
body:not(.home) .q-light{border-left:1px solid var(--ds-line)}

/* Buttons and text links */
body:not(.home) .arrow-link{text-transform:none;letter-spacing:.01em;font-size:15px;font-weight:600;font-family:var(--font-body)}
body:not(.home) :is(.ds-link,.step .s-links a,.skm-card .s-links a){display:inline;padding:0;border:0;background:none;box-shadow:none;border-radius:0;font-family:var(--font-body);font-size:15px;font-weight:600;color:var(--navy);text-decoration:underline;text-decoration-color:rgba(31,195,204,.55);text-decoration-thickness:1.5px;text-underline-offset:5px;transition:text-decoration-color .2s}
body:not(.home) :is(.ds-link,.step .s-links a,.skm-card .s-links a):hover{transform:none;border:0;text-decoration-color:var(--teal)}
body:not(.home) :is(.ds-link,.step .s-links a,.skm-card .s-links a,.arrow-link) .arr{color:var(--teal);text-decoration:none;display:inline-block;margin-left:2px}
/* Jill 10/27: a step's links are a plain list, one per line, every link the same font, weight and arrow (the old first-link-bold row read as a main link with sub-pages) */
body:not(.home) .step .s-links{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:16px}
/* Primary on light is peach, with an edge that holds on cream */
body:not(.home) section:not(.sec-navy) .btn-peach,body:not(.home) .ds-close .btn-peach{border:1px solid #DFA57F;box-shadow:0 16px 30px -18px rgba(172,113,77,.75)}

/* Labels, chips and footnotes: 13px minimum, readable */
body:not(.home) :is(.ds-label,.tldr .lbl,.grad-card .g-eyebrow,.tsal-eyebrow,.tsal-label,.tsal-display-label,.tsal-metric-label,.q-light .qa,.hired-quote .qa,.skm-detail .d-col .k,.series-list .s-tag){text-transform:none;letter-spacing:.01em;font-family:var(--font-body);font-weight:600;font-size:13px}
body:not(.home) .ds-label{color:var(--sienna)}
body:not(.home) .grad-card .g-chips span{font-size:13px !important;color:#E9FBFC !important;background:rgba(255,255,255,.12) !important;border-color:rgba(255,255,255,.32) !important;letter-spacing:.01em}
body:not(.home) .grad-card .g-arrow{font-size:13px;color:rgba(255,255,255,.85)}
body:not(.home) .grad-card .g-was{font-size:13.5px;color:rgba(255,255,255,.78)}
body:not(.home) .statcard .cap{font-size:13.5px;color:rgba(255,255,255,.82)}
body:not(.home) .statcard .num em{color:inherit;opacity:.8;font-size:.82em}
body:not(.home) .tsal-hint{font-size:13px;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.7)}
body:not(.home) section:not(.sec-navy) .tsal-hint{color:var(--ink-faint)}
body:not(.home) .tsal-fine{font-size:13px;line-height:1.6;color:rgba(255,255,255,.72)}
body:not(.home) section:not(.sec-navy) .tsal-fine{color:var(--ink-faint);font-size:13px}
body:not(.home) .ep-card .ep-k{font-size:13px}

/* Calculator on navy: one surface inside the card */
body:not(.home) section.sec-navy :is(.tsal-display,.tsal-result){background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}
body:not(.home) section.sec-navy .tsal-display-value{color:#fff}

/* Quotes: one treatment */
body:not(.home) :is(.q-light,.hired-quote) .qm{font-size:0 !important;line-height:0 !important;color:transparent;margin-top:0;width:34px;flex:0 0 auto}
body:not(.home) :is(.q-light,.hired-quote) .qm::before{content:"\201C";display:block;font:400 64px/.9 Georgia,serif;background:linear-gradient(160deg,#8FE8ED,#1FC3CC);-webkit-background-clip:text;background-clip:text;color:transparent}
body:not(.home) :is(.q-light,.hired-quote){align-items:flex-start}
body:not(.home) .q-light .qt{font:400 19px/1.5 var(--font-display);color:var(--navy)}
body:not(.home) .hired-quote .qt{font:400 19px/1.5 var(--font-display)}
body:not(.home) :is(.q-light,.hired-quote) .qa{margin-top:12px;font-size:13.5px;color:var(--sienna)}
body:not(.home) .hired-quote .qa{color:var(--sky)}
@media (max-width:720px){body:not(.home) :is(.q-light,.hired-quote){flex-direction:column;gap:6px;padding:24px 22px}}

/* Headings */
body:not(.home) :is(h1,h2,h3,.series-h){text-wrap:balance}

/* Steps: flat tiles, one continuous line */
body:not(.home) .step .snum{background:#DFF5F6 !important;color:#0B6F76 !important;box-shadow:none !important;border:1px solid rgba(31,195,204,.45);font-size:20px;width:52px;height:52px;border-radius:30% !important}
body:not(.home) .step{grid-template-columns:52px 1fr;gap:22px}
body:not(.home) .step::before{left:25px;top:52px;bottom:-2px;width:2px;background:rgba(31,195,204,.30) !important}
body:not(.home) .step:last-child::before{display:none}
@media (max-width:600px){
  body:not(.home) .step{grid-template-columns:36px 1fr;gap:12px}
  body:not(.home) .step .snum{width:36px;height:36px;font-size:16px}
  body:not(.home) .step::before{left:17px;top:36px}
}

/* Stat cards: 2 by 2 on phones */
@media (max-width:720px){
  body:not(.home) .statband{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  body:not(.home) .statband .statcard{max-width:none;padding:18px 12px}
  body:not(.home) .statcard .num{font-size:28px}
}

/* FAQ: a bigger, darker toggle */
body:not(.home) details.faq summary .xtoggle{width:30px;height:30px;border:1.5px solid rgba(22,51,63,.35);color:var(--navy);font-size:0;position:relative}
body:not(.home) details.faq summary .xtoggle::before,body:not(.home) details.faq summary .xtoggle::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--navy)}
body:not(.home) details.faq summary .xtoggle::after{transform:rotate(90deg)}
body:not(.home) details.faq[open] summary .xtoggle{border-color:var(--teal)}

/* Navy panel: a cleaner shadow */
body:not(.v2) section.sec-navy:is(:has(~ section.sec-navy),:has(~ section h2)) > .container{box-shadow:0 40px 80px -46px rgba(22,51,63,.55) !important}

/* The close: one warm block */
body:not(.v2):not(.home) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)){
  background:linear-gradient(180deg,rgba(253,244,235,0) 0%,var(--ds-close-1) 38%,var(--ds-close-2) 100%) !important;padding:96px 0 72px !important}
body:not(.v2):not(.home) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2))::after{display:none}
body:not(.v2):not(.home) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)) :is(.btn-teal,.btn-peach){background:var(--btn-peach) !important;border:1px solid #DFA57F !important;color:var(--navy) !important;box-shadow:0 18px 34px -18px rgba(172,113,77,.8) !important}
body:not(.home) section:has(> .container > .byline){background:var(--ds-close-2) !important;padding-top:8px !important;padding-bottom:12px !important}
body:not(.home) section:has(> .container > .byline) > .container{max-width:calc(var(--ds-read) + 64px)}
body:not(.home) .byline{max-width:none;border-top:1px solid rgba(22,51,63,.12);padding-top:28px;align-items:flex-start;gap:16px}
body:not(.home) .byline .mj-photo{width:56px;height:56px;border:0;box-shadow:0 10px 22px -12px rgba(22,51,63,.5)}
body:not(.home) .byline p{font-size:14px;color:var(--ink-soft);margin:0}
body:not(.home) .byline b{color:var(--navy)}
body:not(.home) section:has(> .container > .byline) + .series-block,body:not(.home) .series-block{background:var(--ds-close-2) !important;padding:20px 0 64px !important}
body:not(.home) .series-block .series-in{max-width:var(--ds-read)}
body:not(.home) .series-block .series-h{font-size:22px;margin-bottom:12px}
body:not(.home) .series-list{border-top:1px solid rgba(22,51,63,.12)}
body:not(.home) .series-list li{justify-content:flex-start;gap:12px;border-bottom-color:rgba(22,51,63,.12)}
body:not(.home) .series-list li[aria-current] span:first-child{color:var(--ink-soft)}
body:not(.home) .series-list .s-tag{color:var(--sienna);font-size:13px}
/* Jill 10/27: no "You're here" row in the More-on lists; the reader is already on that page */
body:not(.home) .series-list li[aria-current]{display:none !important}
body:not(.home) .series-list li:not([aria-current]):not(:has(a)){display:none}
body:not(.home) .series-block:not(:has(.series-list a)){display:none}
body:not(.home) .series-list a{text-decoration:underline;text-decoration-color:rgba(31,195,204,.5);text-underline-offset:5px;text-decoration-thickness:1.5px}
body:not(.home) .pod-band{background:var(--ds-close-3);border-top:1px solid rgba(172,113,77,.25)}
body:not(.home) .pod-band .btn-teal{background:var(--btn-peach);border:1px solid #DFA57F;color:var(--navy);box-shadow:0 14px 26px -16px rgba(172,113,77,.75)}
body:not(.home) .pod-band .btn-peach{background:transparent;border:1px solid rgba(22,51,63,.45);color:var(--navy);box-shadow:none}
body:not(.home) .pod-band-h{font-weight:500}

/* Footer (all pages): the company paragraph lines up with the copyright; two columns of links on phones */
.footer .footer-bottom .footer-ess{margin-left:0 !important;margin-right:0 !important;max-width:760px !important}
.footer .footer-bottom,.footer .footer-bottom :is(p,a,span){font-size:13px;color:rgba(255,255,255,.64)}
.footer .footer-bottom a{text-decoration-color:rgba(255,255,255,.35)}
@media (max-width:900px){
  .footer .footer-grid{grid-template-columns:1fr 1fr !important;gap:32px 24px !important}
  .footer .footer-grid .fbrand{grid-column:1 / -1}
}
/* ── DESIGN SYSTEM v3 (2026-10-23, after the independent ratings of the teacher door and lane 3's pages) ──
   Overrides the v2 rules above where they differ. Non-home pages only (the homepage is the benchmark), except the footer.
   The nav's Take the Quiz pill and the logo artwork are left as they are on purpose: both are sitewide on the homepage.
   CLASSES lanes can use:
     .ds-card       the one shadowed card (white)          .ds-answer   the lighter answer card (tinted, no shadow)
     .ds-more       the "more" arrow link                   inline links in copy need no class
     .ds-quote      the one quote component (light); inside .sec-navy it takes the dark theme automatically
     .ds-band       a full-bleed contrasting band (mist) to break a long run of the same background
     .ds-seg        segmented toggle (selected = filled teal)
     .ds-swipe      phones: a row of cards becomes a swipe row
     .ds-answer .ds-label for the "Short answer" label
     data-ds-toc    on any nav of #links: phones get the sticky "On this page" pill (assets/ds.js)
     data-ds-more="5" on .faq-list: shows 5 questions, then "Show all" (assets/ds.js)
     data-ds-tabs   on a two-column block whose children carry data-ds-tab="Label": tabs on phones (assets/ds.js)
     Back to top appears by itself on phones on long pages (assets/ds.js). */
body:not(.home){--ds-teal-text:#0A6870;--sienna:#8A4F2E;--ink-faint:#56646D;--ds-tint:#EEF6F4;--ds-tint-line:rgba(10,104,112,.16);
  --ds-wide:1136px;--ds-attr:#8A4F2E;--ds-attr-dark:#F7CFB8;--ds-band:#E3EFEC}

/* Text teal on light backgrounds: the bright teal is for fills and rules only */
body:not(.home) :is(.eyebrow,.lbl,.g-eyebrow,.tsal-eyebrow,.ep-k,.or-cite,.bb-group,.s-tag):not(:is(.sec-navy,.pg-hero,.sky-dark,.footer,.grad-card,.lsd-topbar,.nav) *){color:var(--ds-teal-text)}
body:not(.home) .ds-label,body:not(.home) .tldr .lbl{color:var(--sienna)}

/* One link system. Inline links in copy: text teal, thin underline. "More" links: text teal, semibold, arrow, no underline. */
body:not(.home) :is(p,li,dd,td,figcaption,.fbody,.byline) a:not(.btn):not(.ds-more):not(.arrow-link):not(.ds-link):not(:is(.sec-navy,.pg-hero,.sky-dark,.footer,.grad-card,.lsd-topbar,.nav,.mobile-menu,.s-links,.series-list,.dr-toc,.dr-toc-jump,.toc-list,.pp-list,.pod-all-list,.pcard-dark,[class*="card-dark"],nav,.lead-toc,[class*="rail"],[class*="jump"]) *){
  color:var(--ds-teal-text) !important;font-weight:inherit;text-decoration:underline !important;text-decoration-color:rgba(10,104,112,.45) !important;text-decoration-thickness:1px !important;text-underline-offset:3px}
body:not(.home) :is(p,li,dd,td,figcaption,.fbody,.byline) a:not(.btn):not(.ds-more):not(.arrow-link):not(.ds-link):not(:is(.sec-navy,.pg-hero,.sky-dark,.footer,.grad-card,.lsd-topbar,.nav,.mobile-menu,.s-links,.series-list,.dr-toc,.dr-toc-jump,.toc-list,.pp-list,.pod-all-list,.pcard-dark,[class*="card-dark"],nav,.lead-toc,[class*="rail"],[class*="jump"]) *):hover{text-decoration-color:var(--ds-teal-text) !important}
body:not(.home) :is(.ds-more,.ds-link,.arrow-link,.s-links a,.ep-card .ep-l,.ep-card .ep-go,.series-list a):not(:is(.sec-navy,.pg-hero,.sky-dark,.footer,.grad-card) *){
  color:var(--ds-teal-text) !important;font-family:var(--font-body);font-size:15px;font-weight:600;letter-spacing:.01em;text-transform:none;
  text-decoration:none !important;border:0;background:none;box-shadow:none;padding:0}
body:not(.home) :is(.ds-more,.ds-link,.arrow-link,.s-links a,.series-list a):not(:is(.sec-navy,.pg-hero,.sky-dark,.footer,.grad-card) *):hover{text-decoration:underline !important;text-decoration-thickness:1px !important;text-underline-offset:4px}
body:not(.home) :is(.ds-more,.ds-link,.arrow-link,.s-links a,.ep-card .ep-l):not(:is(.sec-navy,.pg-hero,.sky-dark,.footer,.grad-card) *) .arr{color:inherit !important;margin-left:3px}
body:not(.home) .s-links a:not(:first-child):not(:is(.sec-navy,.pg-hero,.sky-dark,.footer) *){font-size:14.5px;font-weight:500}
body:not(.home) .s-links a:not(:first-child) .arr{display:none}
/* on dark: the same two styles in sky */
body:not(.home) :is(.sec-navy,.pg-hero,.sky-dark,.grad-card) :is(.ds-more,.ds-link,.arrow-link){color:var(--sky) !important;text-decoration:none !important;font-weight:600;text-transform:none;letter-spacing:.01em}

/* Labels: one wording ("On this page"), sentence case */
body:not(.home) :is(.ds-label,.lbl,.eyebrow,.g-eyebrow,.tsal-eyebrow,.s-tag,.ep-k){text-transform:none;letter-spacing:.01em}

/* Cards: one shadowed card (.ds-card), one lighter answer card (.ds-answer, also every .tldr short answer) */
body:not(.home) :is(.ds-answer,.tldr .frame-card){background:var(--ds-tint) !important;border:1px solid var(--ds-tint-line) !important;border-left:1px solid var(--ds-tint-line) !important;border-radius:18px !important;box-shadow:none !important;padding:24px 28px}
body:not(.home) .ds-answer .ds-label,body:not(.home) .tldr .lbl{display:block;margin-bottom:8px;font-size:13px;font-weight:600}
@media (max-width:720px){body:not(.home) :is(.ds-answer,.tldr .frame-card){padding:20px 20px}}

/* One quote component: mark on top, the quote in the display face, one attribution line (warm: sienna on light, peach on dark) */
body:not(.home) :is(.ds-quote,.q-light,.hired-quote){display:block !important;position:relative;padding:28px 30px 26px}
body:not(.home) :is(.ds-quote,.q-light,.hired-quote) .qm{display:block;width:auto;height:34px;margin:0 0 8px}
body:not(.home) :is(.ds-quote,.q-light,.hired-quote) .qm::before{font-size:60px !important;line-height:.9 !important}
body:not(.home) :is(.ds-quote,.q-light,.hired-quote) .qt{font:400 19px/1.5 var(--font-display);color:var(--navy)}
body:not(.home) :is(.ds-quote,.q-light,.hired-quote) .qa{display:flex;align-items:center;gap:12px;margin-top:16px;font:600 13.5px/1.4 var(--font-body);color:var(--ds-attr) !important;letter-spacing:.01em;text-transform:none}
body:not(.home) :is(.ds-quote,.q-light,.hired-quote) .qa img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto}
body:not(.home) .sec-navy :is(.ds-quote,.q-light,.hired-quote){background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--ds-radius);box-shadow:none}
body:not(.home) .sec-navy :is(.ds-quote,.q-light,.hired-quote) .qt{color:#fff}
body:not(.home) .sec-navy :is(.ds-quote,.q-light,.hired-quote) .qa{color:var(--ds-attr-dark) !important}
@media (max-width:720px){body:not(.home) :is(.ds-quote,.q-light,.hired-quote){padding:22px 20px 20px}}
/* Pull quotes stay inside the 1136 grid */
@media (min-width:1320px){html body.guide .g-pull{width:180px;margin:0 -208px 20px 28px}}

/* Accordions: one style for FAQs and every other disclosure row */
body:not(.home) details.faq{border-radius:16px;box-shadow:none;border:1px solid var(--ds-line)}
body:not(.home) details.faq[open]{box-shadow:0 18px 34px -28px rgba(22,51,63,.5);border-color:rgba(22,51,63,.18)}
body:not(.home) details.faq summary{font:600 16px/1.45 var(--font-body) !important;color:var(--navy);padding:16px 18px 16px 22px;align-items:center;min-height:62px}
body:not(.home) details.faq .fbody{padding:0 22px 20px}
body:not(.home) details.faq summary .xtoggle{border-radius:10px !important;width:30px;height:30px;border:1.5px solid rgba(22,51,63,.30)}
body:not(.home) details.faq[open] summary .xtoggle{background:var(--ds-tint);border-color:var(--teal)}

/* Segmented toggles: the selected option is filled teal */
body:not(.home) :is(.ds-seg,.bb-seg){display:inline-flex;gap:4px;background:#F4F1EC;border:1px solid var(--ds-line);border-radius:12px;padding:4px}
body:not(.home) :is(.ds-seg,.bb-seg) button{font:600 14px/1 var(--font-body);color:var(--navy);background:transparent;border:0;border-radius:9px;padding:10px 16px;cursor:pointer;box-shadow:none}
body:not(.home) :is(.ds-seg,.bb-seg) button[aria-pressed="true"]{background:var(--teal);color:#0F2A35;font-weight:700;box-shadow:0 4px 12px -6px rgba(11,111,118,.8)}
body:not(.home) :is(.ds-seg,.bb-seg) button:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* Stat tiles: big numbers, readable labels, units all the same way (a smaller unit after the number) */
body:not(.home) .statcard{padding:28px 20px 24px}
body:not(.home) .statcard .num{font-size:52px;line-height:1;letter-spacing:-.01em;color:#fff}
body:not(.home) .statcard .num em{font-size:.5em !important;opacity:1;color:var(--sky) !important;margin-left:2px;font-style:normal}
body:not(.home) .statcard .cap{margin-top:12px;font-size:14px;line-height:1.45;color:rgba(255,255,255,.9)}
@media (max-width:720px){body:not(.home) .statcard .num{font-size:38px}body:not(.home) .statcard .cap{font-size:13px}}

/* Calculator: a read-only result is a result row, not an input */
body:not(.home) .tsal-display{background:none !important;border:0 !important;border-top:1px solid rgba(255,255,255,.16) !important;border-bottom:1px solid rgba(255,255,255,.16) !important;border-radius:0 !important;padding:14px 2px !important;margin-top:16px}
body:not(.home) section:not(.sec-navy) .tsal-display{border-color:var(--ds-line) !important}
body:not(.home) .tsal-display-value{font-size:28px !important}

/* The navy panel sits on the 1136 grid; on phones it runs edge to edge with the page's own gutters */
body:not(.v2):not(.home) section.sec-navy:is(:has(~ section.sec-navy),:has(~ section h2)) > .container{max-width:var(--ds-wide)}
@media (max-width:900px){
  body:not(.v2):not(.home) section.sec-navy:is(:has(~ section.sec-navy),:has(~ section h2)) > .container{margin-left:0;margin-right:0;border-radius:0;padding:56px 32px}
}

/* A contrasting band to break a long run of one background */
body:not(.home) section.sec.ds-band.ds-band{background:var(--ds-band) !important;border-top:1px solid rgba(10,104,112,.10);border-bottom:1px solid rgba(10,104,112,.10)}

/* The ending: content > author box > related > final CTA (a contained navy band, full-size button) > podcast band > footer */
body:not(.home) section:has(> .container > .byline){background:transparent !important;padding-top:24px !important;padding-bottom:8px !important}
body:not(.home) .series-block{background:transparent !important;padding:16px 0 40px !important}
body:not(.v2):not(.home) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)){
  background:transparent !important;color:#fff !important;padding:24px 0 80px !important}
body:not(.v2):not(.home) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)) > .container{
  position:relative;max-width:var(--ds-wide) !important;padding:72px 56px !important;border-radius:32px;text-align:center;
  background:linear-gradient(140deg,#24505E 0%,#1C3F4D 45%,#16333F 100%);box-shadow:0 40px 80px -46px rgba(22,51,63,.55)}
body:not(.v2):not(.home) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)) > .container > :is(h2,h3,p,.head,.lede,small){max-width:720px;margin-left:auto;margin-right:auto}
body:not(.v2):not(.home) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)) :is(h2,h3){color:#fff !important}
body:not(.v2):not(.home) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)) :is(p,li,small){color:rgba(255,255,255,.86) !important;opacity:1}
body:not(.v2):not(.home) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)) a:not(.btn){color:var(--sky) !important;text-decoration-color:rgba(143,232,237,.5)}
body:not(.v2):not(.home) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)) :is(.btn-teal,.btn-peach){
  background:var(--btn-peach) !important;border:1px solid #F7CFB8 !important;color:var(--navy) !important;font-size:15px;padding:19px 40px !important;min-width:240px;box-shadow:0 22px 44px -20px rgba(0,0,0,.55) !important}
body:not(.v2):not(.home) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)) :is(.btn-ghost-light,.btn-ghost){background:transparent !important;border:1.5px solid rgba(255,255,255,.6) !important;color:#fff !important}
body:not(.v2):not(.home) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)) :is([class*="card"],[class*="door"],input,select){background:rgba(255,255,255,.07) !important;border-color:rgba(255,255,255,.18) !important}
@media (max-width:900px){
  body:not(.v2):not(.home) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)) > .container{margin:0;border-radius:0;padding:56px 32px !important}
  body:not(.v2):not(.home) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)){padding:16px 0 0 !important}
}
@media (max-width:600px){
  body:not(.v2):not(.home) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)) :is(.btn-teal,.btn-peach){display:block;width:100%;min-width:0;white-space:normal;line-height:1.35}
}
/* Podcast band: its own light band (never two peaches touching), real buttons */
body:not(.home) .pod-band{background:#FFFDF9 !important;border-top:1px solid var(--ds-line)}
body:not(.home) .pod-band-h{color:var(--navy)}
body:not(.home) .pod-band :is(.btn-teal,.btn-peach){font-size:14px;padding:15px 30px;border-radius:999px}
body:not(.home) .pod-band .btn-teal{background:var(--btn-peach) !important;border:1px solid #DFA57F !important;color:var(--navy) !important;box-shadow:0 14px 26px -16px rgba(172,113,77,.85) !important}
body:not(.home) .pod-band .btn-peach{background:#fff !important;border:1.5px solid var(--navy) !important;color:var(--navy) !important;box-shadow:none !important}
/* "You're here" never sits alone on a line: on phones it becomes the label above the title */
body:not(.home) .series-list .s-tag{white-space:nowrap}
@media (max-width:720px){
  body:not(.home) .series-list li[aria-current]{flex-direction:column;align-items:flex-start;gap:2px}
  body:not(.home) .series-list li[aria-current] .s-tag{order:-1}
}
/* Author box photo always loads (ds_sitewide removes its lazy load); keep a neutral tile behind it */
body:not(.home) .byline .mj-photo{background:#E8EEF0}

/* Phones: paragraphs over about three lines are left-aligned, and so is the hero intro */
@media (max-width:720px){
  body:not(.home) .sec .head{text-align:left}
  body:not(.home) .sec .head :is(p,h2){margin-left:0;margin-right:0}
  body:not(.home) .sec p[style*="text-align:center"]{text-align:left !important}
  body:not(.home) .pg-hero :is(h1,.pg-sub,.pg-hero-copy p){text-align:left !important;margin-left:0 !important;margin-right:0 !important}
  body:not(.home) .pg-hero .hero-ctas{justify-content:flex-start !important}
}

/* The logo over a photo: a soft scrim behind the nav at the top of non-home pages (logo and Quiz pill unchanged) */
body:not(.home) .nav:not(.scrolled):not(.light-mode)::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 36px);z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,36,46,.62) 0%,rgba(16,36,46,.30) 60%,rgba(16,36,46,0) 100%)}
body:has(> .lsd-topbar):not(.home) .nav:not(.scrolled):not(.light-mode)::before{top:0}

/* Back to top and the "On this page" pill (phones; built by assets/ds.js) */
.ds-totop{position:fixed;right:16px;bottom:18px;z-index:90;width:46px;height:46px;border-radius:14px;border:1px solid rgba(255,255,255,.4);background:var(--navy,#223A4C);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px -12px rgba(22,51,63,.7);opacity:0;transform:translateY(12px);transition:opacity .2s,transform .2s;pointer-events:none}
.ds-totop.on{opacity:1;transform:none;pointer-events:auto}
.ds-totop svg{width:18px;height:18px}
.ds-toc-pill{position:fixed;left:16px;bottom:18px;z-index:90;max-width:calc(100% - 96px)}
.ds-toc-pill > button{display:flex;align-items:center;gap:10px;font:600 14px/1 var(--font-body,inherit);color:var(--navy,#223A4C);background:#fff;border:1px solid rgba(22,51,63,.16);border-radius:999px;padding:13px 18px;
  box-shadow:0 14px 30px -14px rgba(22,51,63,.6);opacity:0;transform:translateY(12px);transition:opacity .2s,transform .2s;pointer-events:none;cursor:pointer}
.ds-toc-pill.on > button{opacity:1;transform:none;pointer-events:auto}
.ds-toc-pill > button::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-135deg) translate(-2px,-2px)}
.ds-toc-pill ol{display:none;position:absolute;left:0;bottom:56px;min-width:240px;max-height:60vh;overflow:auto;margin:0;padding:10px;list-style:none;background:#fff;border:1px solid rgba(22,51,63,.14);border-radius:16px;box-shadow:0 24px 48px -20px rgba(22,51,63,.6)}
.ds-toc-pill.open ol{display:block}
.ds-toc-pill ol a{display:block;padding:11px 12px;border-radius:10px;font:600 15px/1.3 var(--font-body,inherit);color:var(--navy,#223A4C);text-decoration:none}
.ds-toc-pill ol a:hover,.ds-toc-pill ol a:focus-visible{background:#EEF6F4}
@media (min-width:721px){.ds-totop,.ds-toc-pill{display:none !important}}
/* FAQ "Show all" (assets/ds.js) */
.faq-list .faq.ds-hide{display:none}
.ds-showall{display:block;margin:18px auto 0;font:600 15px/1 var(--font-body,inherit);color:var(--ds-teal-text,#0A6870);background:none;border:1.5px solid rgba(10,104,112,.35);border-radius:999px;padding:14px 24px;cursor:pointer}
.ds-showall:hover{border-color:var(--ds-teal-text,#0A6870)}
/* Tabs on phones (assets/ds.js) */
.ds-tabs{display:none}
@media (max-width:720px){
  .ds-tabs{display:flex;gap:4px;background:#F4F1EC;border:1px solid rgba(22,51,63,.10);border-radius:14px;padding:4px;margin:0 0 14px}
  .ds-tabs button{flex:1 1 0;font:600 14.5px/1.2 var(--font-body,inherit);color:var(--navy,#223A4C);background:transparent;border:0;border-radius:10px;padding:12px 8px;cursor:pointer}
  .ds-tabs button[aria-selected="true"]{background:#fff;box-shadow:0 2px 10px -3px rgba(22,51,63,.35)}
  [data-ds-tabs].ds-tabbed > [data-ds-tab]:not(.ds-tab-on){display:none !important}
}
/* Swipe rows on phones */
@media (max-width:720px){
  body:not(.home) .ds-swipe{display:flex !important;grid-template-columns:none !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px !important;margin-left:-32px !important;margin-right:-32px !important;padding:4px 32px 18px !important;scrollbar-width:none}
  body:not(.home) .ds-swipe::-webkit-scrollbar{display:none}
  body:not(.home) .ds-swipe > *{flex:0 0 84%;scroll-snap-align:center}
}

/* The podcast episode card is a standard white card (no accent bar) */
body:not(.home) .ep-card{background:#fff;border:1px solid var(--ds-line,rgba(22,51,63,.10)) !important;border-left-width:1px !important;border-radius:18px;box-shadow:0 18px 40px -30px rgba(22,51,63,.45);padding:18px 22px}
body:not(.home) .ep-card .ep-ico{background:var(--ds-tint,#EEF6F4);color:var(--ds-teal-text,#0A6870)}
body:not(.home) .ep-card .ep-k{color:var(--ink-soft) !important}

/* Footer (all pages): the legal paragraph 13.5px and AA on navy */
.footer .footer-bottom :is(.footer-ess,p,span){font-size:13.5px !important;line-height:1.65;color:rgba(255,255,255,.70) !important}
.footer .footer-bottom a{color:rgba(255,255,255,.86) !important}
/* ── DESIGN SYSTEM v4 (2026-10-24, after the third independent rating of the teacher door: one of each) ──
   One label color on light (sienna) and one on dark (sky). One avatar shape (circle). One card shadow; rows (FAQ,
   skills) stay flat. One secondary button (outline, the primary's type). The ending reads as one finish: author box,
   related list, the final CTA panel, then the podcast band on the footer's navy. Back to top and "On this page"
   at every width, one style. Non-home pages only, except the footer. */
body:not(.home){--ds-shadow:0 22px 44px -32px rgba(22,51,63,.42)}
body:not(.home) :is(.eyebrow,.lbl,.g-eyebrow,.tsal-eyebrow,.bb-group,.bb-k-label,.ds-label,.s-tag,.ep-k):not(:is(.sec-navy,.pg-hero,.sky-dark,.footer,.grad-card,.lsd-topbar,.nav,.pod-band) *){color:var(--sienna) !important}
body:not(.home) :is(.grad-card .ava,.byline .mj-photo,.byline .mj-photo img){border-radius:50% !important}
body:not(.home) :is(.ds-card,.q-light,.lq,.ep-card,.bb-card):not(:is(.sec-navy) *){box-shadow:var(--ds-shadow) !important}
body:not(.home) :is(.ds-quote,.q-light,.hired-quote) .qt,body:not(.home) .lq > p{letter-spacing:0 !important;font-size:18px !important;line-height:1.55 !important}
body:not(.home) section.sec.ds-band.ds-band{border-top:0 !important;border-bottom:0 !important}
/* Secondary button: outline, same type as the primary */
.ds-showall.btn{display:flex;width:fit-content;margin:28px auto 0;background:transparent !important;border:1.5px solid var(--navy,#223A4C) !important;color:var(--navy,#223A4C) !important;box-shadow:none !important}
.ds-showall.btn:hover{background:var(--navy,#223A4C) !important;color:#fff !important}
/* The ending */
body:not(.home) section:has(+ section > .container > .byline){padding-bottom:40px !important}
body:not(.home) .byline{display:grid !important;grid-template-columns:64px 1fr;gap:20px;align-items:start;max-width:var(--ds-read);margin:0 auto;padding:28px 0 0 !important;border-top:1px solid var(--ds-line,rgba(22,51,63,.12))}
body:not(.home) .byline .mj-photo{width:64px !important;height:64px !important;overflow:hidden}
body:not(.home) .byline .mj-photo img{width:100%;height:100%;object-fit:cover}
body:not(.home) .byline p{font-size:15.5px !important;line-height:1.7 !important;color:var(--ink-soft) !important;margin:0}
body:not(.home) .byline p b{color:var(--navy);font-size:16.5px;font-weight:600}
body:not(.home) .series-block{padding:8px 0 56px !important}
body:not(.home) .pod-band{background:#1A2F3C !important;border-top:0 !important;padding:30px 0 !important}
body:not(.home) .pod-band .pod-band-h{color:#fff !important}
body:not(.home) .pod-band p:not(.pod-band-h){color:rgba(255,255,255,.78) !important}
body:not(.home) .pod-band .btn-teal{background:var(--btn-peach) !important;border:1px solid #F7CFB8 !important;color:var(--navy) !important;box-shadow:none !important}
body:not(.home) .pod-band .btn-peach{background:transparent !important;border:1.5px solid rgba(255,255,255,.6) !important;color:#fff !important;box-shadow:none !important}
body:not(.home) .pod-band + .footer{border-top:1px solid rgba(255,255,255,.08)}
/* Footer (all pages): the AIDA list in two short columns; the legal paragraph at a reading measure */
@media (min-width:901px){
  .footer .footer-grid{grid-template-columns:1.2fr 1fr 1.7fr 1fr !important}
  .footer .footer-grid > div:nth-child(3) ul{columns:2;column-gap:32px}
  .footer .footer-grid > div:nth-child(3) li{break-inside:avoid}
}
.footer .footer-bottom .footer-ess{max-width:680px !important}
@media (max-width:900px){
  .footer .footer-grid{grid-template-columns:1fr 1fr !important}
  .footer .footer-grid > .fbrand{grid-column:1 / -1}
  .footer .footer-grid > div:nth-child(3){grid-column:1 / -1;order:5}
  .footer .footer-grid > div:nth-child(3) ul{columns:2;column-gap:24px}
}
/* Back to top and "On this page": every width, one style (white, hairline, soft blur) */
@media (min-width:721px){.ds-totop,.ds-toc-pill{display:block !important}}
.ds-totop{display:flex !important;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--navy,#223A4C);border:1px solid rgba(22,51,63,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 14px 30px -14px rgba(22,51,63,.6)}
.ds-toc-pill > button{height:48px;padding:0 20px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (min-width:721px){.ds-totop{right:28px;bottom:28px}.ds-toc-pill{left:auto;right:88px;bottom:28px}.ds-toc-pill ol{left:auto;right:0}}
/* Phones: body copy at a tuned leading and a darker grey */
@media (max-width:720px){
  body:not(.home) .sec :is(p,li,dd):not([class]){line-height:1.7}
  body:not(.home) .sec-navy .head{text-align:center}
  body:not(.home) .ds-swipe{padding-bottom:34px !important;margin-bottom:-10px !important}
  .ds-dots{display:flex;justify-content:center;gap:8px;margin:4px 0 0}
  .ds-dots span{width:7px;height:7px;border-radius:50%;background:rgba(22,51,63,.22);transition:background .2s,width .2s}
  .ds-dots span.on{background:var(--ds-teal-text,#0A6870);width:20px;border-radius:4px}
  /* Steps: the number sits with the title, the text takes the full measure */
  body:not(.home) .steps .step{display:block;padding-bottom:36px}
  body:not(.home) .steps .step::before{display:none}
  body:not(.home) .steps .step .snum{float:left;width:36px;height:36px;margin:0 12px 6px 0;font-size:16px}
  body:not(.home) .steps .step h3{padding-top:4px;min-height:36px}
  body:not(.home) .steps .step + .step{border-top:1px solid var(--ds-line,rgba(22,51,63,.10));padding-top:28px}
}
@media (min-width:721px){.ds-dots{display:none}}
@media (max-width:900px){body:not(.v2):not(.home) section.sec-navy > .container{box-shadow:none !important}}
@media (max-width:720px){body:not(.home) .byline{grid-template-columns:52px 1fr;gap:16px}body:not(.home) .byline .mj-photo{width:52px !important;height:52px !important}}
/* v4b */
body:not(.home) .statcard .cap{text-wrap:balance}
body:not(.home) .arr{display:inline !important}
body:not(.home) .s-links a:not(:first-child) .arr{display:none !important}
@media (min-width:901px){.footer .footer-grid{gap:48px 44px !important}.footer .footer-grid > div:nth-child(3) ul{column-gap:44px}}
@media (max-width:900px){body:not(.v2):not(.home) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)){padding-bottom:40px !important}}
/* v4c: a narrower intro under a centered heading stays centered under it (Jill 10/23: the mentors paragraph sat 40px left) */
@media (min-width:721px){body:not(.home) .sec .head > p{margin-left:auto;margin-right:auto}}
/* v4d: a bare .ds-quote draws its own mark */
body:not(.home) .ds-quote .qm{font-size:0 !important;line-height:0 !important;color:transparent}
body:not(.home) .ds-quote .qm::before{content:"\201C";display:block;font:400 60px/.9 Georgia,serif;background:linear-gradient(160deg,#8FE8ED,#1FC3CC);-webkit-background-clip:text;background-clip:text;color:transparent}
/* v4e (10/24, raters): the ending sits on the page's own cream, never on white strips; phones keep the closing panel inset
   so the space around it reads as intended; the footer keeps the desktop order on phones */
body:not(.home):not(.sky):not(.calm){background:var(--sand,#FBF7F2)}
@media (max-width:900px){
  body:not(.v2):not(.home) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)){padding:8px 0 32px !important}
  body:not(.v2):not(.home) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)) > .container{margin:0 16px !important;border-radius:24px !important;padding:48px 24px !important}
  .footer .footer-grid > div:not(.fbrand){grid-column:1 / -1 !important;order:0 !important}
  .footer .footer-grid > div:not(.fbrand) ul{columns:2;column-gap:24px}
}
/* v4f (10/24, after 18 independent ratings): fixes that repeat across pages */
/* One primary button color off the homepage: peach (the nav's Take the Quiz pill stays, homepage benchmark) */
body:not(.home) .btn.btn-teal:not(:is(.nav,.mobile-menu,.lsd-topbar) *){background:var(--btn-peach) !important;border:1px solid #F2C0A2 !important;color:var(--navy) !important;box-shadow:0 14px 26px -18px rgba(172,113,77,.7) !important}
/* Phones: the closing panel's buttons share one width */
@media (max-width:600px){
  body:not(.v2):not(.home) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)) .btn{display:block !important;width:100% !important;min-width:0 !important;margin-left:0 !important;margin-right:0 !important;white-space:normal;text-align:center}
  body:not(.v2):not(.home) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)) .btn + .btn{margin-top:12px !important}
}
/* "Show all" really hides the rest */
.ds-hide{display:none !important}
/* An author box without a photo is one column */
body:not(.home) .byline:not(:has(.mj-photo)){display:block !important}
/* The "Created by" line under hero titles is readable */
body:not(.home) .pg-hero :is(.pg-byline.created-by,.pg-byline-note,.created-by){font-size:14px !important;color:rgba(255,255,255,.84) !important;opacity:1 !important;letter-spacing:.01em !important}
/* Phones: the scrolled header is solid, so nothing ghosts through it */
@media (max-width:900px){body:not(.home) .nav.scrolled{background:#fff !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}}
/* Footer: the AIDA list is one column with its heading (no heading-less second column) on desktop */
@media (min-width:901px){.footer .footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr !important}.footer .footer-grid > div:nth-child(3) ul{columns:1 !important}}
/* Back to top steps aside near the end of the page, where it would sit on the closing panel and footer */
.ds-totop.near-end{opacity:0 !important;pointer-events:none !important}
/* v4g (Lane 3 notes): the related list sits on the page's own ground except on the sky pages (teacher door, AIDA), where the warm close continues */
body:not(.home):not(.sky) section:has(> .container > .byline) + .series-block,body:not(.home):not(.sky) .series-block{background:transparent !important}
/* The closing panel's paragraphs never leave one word on the last line */
body:not(.home) section.sec-navy :is(p,h2){text-wrap:pretty}
/* v4h (10/24, door raters): room between the author box and the closing panel, and the same room below the panel */
body:not(.home) section:has(> .container > .byline):has(+ section.sec-navy){padding-bottom:64px !important}
body:not(.v2):not(.home) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)){padding-bottom:64px !important}
@media (max-width:720px){
  body:not(.home) section:has(> .container > .byline):has(+ section.sec-navy){padding-bottom:40px !important}
  body:not(.v2):not(.home) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)){padding-bottom:40px !important}
  /* the "On this page" pill: smaller, so it covers less of the page */
  .ds-toc-pill > button{height:40px;padding:0 15px;font-size:13px;gap:8px}
  .ds-totop{width:42px;height:42px}
}
/* Desktop: "On this page" is a round button above back to top, out of the 1136 column (it covered text at 1440) */
@media (min-width:1100px){
  .ds-toc-pill{right:28px;bottom:88px}
  .ds-toc-pill > button{width:48px;height:48px;padding:0;justify-content:center;font-size:0;border-radius:50%;
    box-shadow:0 14px 30px -14px rgba(22,51,63,.6)}
  .ds-toc-pill > button::after{content:"";width:18px;height:14px;border:0;transform:none;
    background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 6px/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 12px/70% 2px no-repeat}
}
/* v4i (10/25, W session, AIDA raters): bold words inside a grad quote follow the quote color (the old site CSS made them white, invisible on light) */
body:not(.home) .hired-quote .qt b{color:inherit}
/* v4i (10/25, W session, Tier 1B raters): phone swipe rows run to the screen edge on any gutter (they stopped 8px short where the gutter isn't 32px), and the shadows aren't cut */
@media (max-width:720px){body:not(.home) .ds-swipe{margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important;padding-left:calc(50vw - 50%) !important;padding-right:calc(50vw - 50%) !important;scroll-padding-inline:calc(50vw - 50%)}}
/* v4i (10/25): on phones the closing panel lines up with the content gutter (it sat 16px from the edge, the content 24 to 32) */
@media (max-width:720px){body:not(.v2) section.sec-navy:is(:has(~ section.sec-navy),:has(~ section h2)) > .container{margin-left:24px !important;margin-right:24px !important;padding-left:20px !important;padding-right:20px !important}}
/* v4i (10/25): on phones every dark panel sits on the same 24px gutter with the same rounded corners (mid-page panels had gone square, the closing panel sat at 16px) */
@media (max-width:720px){body:not(.v2) section.sec-navy:is(:has(~ section.sec-navy),:has(~ section h2)) > .container:not([style*="background:none"]){border-radius:24px !important}
  html body:not(.v2):not(.home) section.sec-navy:not(:has(~ section.sec-navy)):not(:has(~ section h2)) > .container{margin-left:24px !important;margin-right:24px !important;padding-left:20px !important;padding-right:20px !important}}
/* END DESIGN SYSTEM */

/* FIX BATCH A3 2026-10-26 (Jill 10/25: "I don't love the navigation breaking into two lines"). The main nav stays on one line at every desktop width.
   1300px and up: unchanged. 1000-1299px: the logo keeps its shape, labels and spacing scale down a little with the screen. Under 1000px: the menu button (was under 820px). */
@media (min-width:1000px){ .nav-logo{flex:0 0 auto} .nav-logo img{width:auto;max-width:none} }
@media (min-width:1000px) and (max-width:1299px){
 .nav .container.nav-inner{padding-left:24px;padding-right:24px;gap:14px}
 .nav-logo img{height:30px}
 .nav-links{gap:0}
 .nav-links>li>a{white-space:nowrap;padding:10px clamp(6px,calc(6px + (100vw - 1000px) / 75),10px);font-size:clamp(11.5px,calc(11.5px + (100vw - 1000px) / 300),12.5px);letter-spacing:.07em;gap:4px}
 .nav-links>li>a:hover::after{width:calc(100% - 12px);left:6px}
 .nav-cta{margin-left:auto}
 .nav-cta .btn{padding:10px 16px;font-size:11px;letter-spacing:.12em;white-space:nowrap}
}
@media (max-width:999px){ .nav-links{display:none} .nav-burger{display:block} }
/* JUMP NAV (S133, S137, S152; fix batch A6, 2026-10-26). One jump nav site-wide: the white pill bar from the door pages, no "On this page" label.
   Desktop: centered pill, wraps if it has to. Phones: one row that swipes sideways. Replaces the left cards, rails, legal rail and the floating button. */
.jp-sec{padding:40px 0 8px !important}
html body section.sec.jp-sec > .container{max-width:var(--ds-wide,1136px) !important;width:auto;background:none !important;border:0 !important;box-shadow:none !important}
.jump-pill{display:flex;justify-content:center;max-width:var(--ds-wide,1136px);margin:0 auto}
.jump-pill ol{list-style:none;margin:0;padding:14px 28px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 22px;
  background:rgba(255,255,255,.96);border:1px solid rgba(22,51,63,.10);border-radius:30px;box-shadow:0 18px 40px -28px rgba(22,51,63,.5)}
.jump-pill li{margin:0 !important;padding:0 !important;line-height:1.5}
.jump-pill li::before{content:none !important}
.jump-pill a{font:600 14.5px/1.5 var(--font-body);color:var(--ds-teal-text,#0A6870) !important;text-decoration:none !important;white-space:nowrap}
.jump-pill a:hover,.jump-pill a:focus-visible{text-decoration:underline !important;text-underline-offset:4px}
.jump-pill.jp-legal{margin:0 auto 40px}
.jump-pill.jp-after{margin-top:32px}
.jump-pill.jp-inline{margin:28px 0 8px;justify-content:flex-start}
.jump-pill.jp-inline ol{justify-content:flex-start}
.pg-legal .legal-wrap{grid-template-columns:minmax(0,740px) !important;justify-content:center}
/* the reading column was pushed right to make room for the left card; with the card gone it sits centered again */
html body.t2o.t2o{--t2-shift:0px}
@media (max-width:720px){
  .jump-pill{justify-content:flex-start}
  .jump-pill ol,.jump-pill.jp-inline ol{flex-wrap:nowrap;justify-content:flex-start;max-width:100%;overflow-x:auto;padding:12px 20px;border-radius:999px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .jump-pill ol::-webkit-scrollbar{display:none}
  .jp-sec{padding:28px 0 4px !important}
  /* door pages: the same row on phones (it was a dropdown with an "On this page" label) */
  html .door .dr-toc-row{display:block !important;width:auto;max-width:100%;margin:120px 0 0 !important;padding:0 !important;position:relative;top:-14px;
    background:rgba(255,255,255,.96);border:1px solid rgba(22,51,63,.10);border-radius:999px;box-shadow:0 18px 40px -28px rgba(22,51,63,.5);overflow:hidden}
  html .door .dr-toc-row ol{display:flex !important;flex-wrap:nowrap !important;gap:22px;overflow-x:auto;padding:12px 20px !important;margin:0;list-style:none;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  html .door .dr-toc-row ol::-webkit-scrollbar{display:none}
  html .door .dr-toc-row a{white-space:nowrap}
}

/* Jill 10/27: a step's links are one plain list, every link the same font, weight and arrow (overrides the secondary-link rules above) */
body:not(.home) .step .s-links a:not(:first-child):not(#_){font-size:15px;font-weight:600;color:var(--navy);text-decoration-color:rgba(31,195,204,.55);text-decoration-thickness:1.5px}
body:not(.home) .step .s-links a:not(:first-child):not(#_) .arr{display:inline-block !important}

/* EPISODE CARDS BUILT IN (S209, Jill 10/27 evening): an episode card sits inside the layout of the section it belongs to,
   never on its own in the middle of the screen. Left column under the heading (tl-rail), right column under the short
   answer (tl-aside), or beside the section heading (everywhere else). */
.ep-side .ep-card{max-width:none !important;width:100%;margin:0 !important}
.tl-left .ep-side{margin-top:28px}
.tl-side .ep-side{margin-top:20px}
.ep-headrow{margin-bottom:8px}
.ep-headrow > .ep-side{margin-top:20px}
@media (min-width:961px){
  .ep-headrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);column-gap:56px;align-items:end;max-width:1136px;margin-left:auto;margin-right:auto}
  .ep-headrow > .head{margin:0 !important;max-width:none !important;text-align:left !important}
  .ep-headrow > .head :is(h2,p){margin-left:0 !important;margin-right:0 !important;text-align:left !important}
  .ep-headrow > .head h2::after{margin-left:0 !important}
  .ep-headrow > .ep-side{margin-top:0}
}
/* Cards that follow a grid or list span that block's width and start at its left edge (S209) */
html body section .container.ep-in.ep-fullrow:not(#_):not(#_a){max-width:1200px !important;padding-left:32px !important;padding-right:32px !important;margin-left:auto !important;margin-right:auto !important}
html body section .container.ep-in.ep-fullrow:not(#_):not(#_a) .ep-card{max-width:none !important;width:100% !important;margin:0 !important}
html body section .container.ep-in.ep-under-faq:not(#_):not(#_a){max-width:1064px !important;padding-left:32px !important;padding-right:32px !important}
html body section .container.ep-in.ep-under-faq:not(#_):not(#_a) .ep-card{max-width:820px !important;margin:0 !important}
@media (max-width:960px){.tl-left .ep-side{margin-bottom:28px}}

/* HEADINGS USE THE ROOM (S211, Jill 10/27 evening): a heading doesn't break onto a second line while the page has room
   for it. One-column heroes let the headline run up to 1060px; section headings use the full content width, and only the
   intro paragraph under them keeps the reading width. Two-column layouts (a hero with an image, heading-left rails,
   a heading beside a card) and the homepage keep their own widths. */
@media (min-width:901px){
  html body:not(.home) section.pg-hero:not(#_):not(#_a):not(#_b):not(#_c) > .container:not(.pg-hero-grid):not([class*="hero-grid"]){max-width:1200px !important}
  html body:not(.home) section.pg-hero:not(#_):not(#_a):not(#_b):not(#_c) > .container:not(.pg-hero-grid):not([class*="hero-grid"]) > h1{max-width:1060px !important;margin-left:auto !important;margin-right:auto !important}
  html body:not(.home) section:not(.pg-hero):not(#_):not(#_a):not(#_b):not(#_c) > .container > .head{max-width:none !important}
  html body:not(.home) section:not(.pg-hero):not(#_):not(#_a):not(#_b):not(#_c) > .container > .head > h2{max-width:none !important}
  html body:not(.home) section:not(.pg-hero):not(#_):not(#_a):not(#_b):not(#_c) > .container > .head > p{max-width:820px}
  html body:not(.home) section:not(.pg-hero):not(#_):not(#_a):not(#_b):not(#_c) > .container > .head[style*="text-align:center"] > p,
  html body:not(.home) section:not(.pg-hero):not(#_):not(#_a):not(#_b):not(#_c) > .container > .head:not(.left) > p{margin-left:auto;margin-right:auto}
}
/* S211: headings fill the line before wrapping. "balance" split every two-line heading into two equal halves, which left
   a short first line and a lot of empty room ("cut off in the middle"). "pretty" fills the line and only keeps a lone
   last word from sitting by itself. */
html body :is(h1,h2,h3,.series-h):not(#_){text-wrap:pretty !important}
/* S211: closing panels' headings use the panel's width too (they were held to 720 to 760px and broke early) */
@media (min-width:901px){
  html body:not(.home) section.sec-navy:not(#_):not(#_a):not(#_b):not(#_c) > .container > h2{max-width:min(1000px,100%) !important;margin-left:auto !important;margin-right:auto !important}
}

/* S211 follow-up (Jill 10/28, Start Here "Your background changes your first move"): where a section heading sits flush left,
   the intro line under it starts flush left too. The S211 rule above centered the intro as a block under every heading
   without a "left" class, which pushed it about 160px in under left headings. Found on 7 pages (Start Here, Resource Hub,
   Find the Time, the podcast hub, AI in AIDA, Portfolio Sample in a Day, Skill Builder Society). */
@media (min-width:721px){
  html body:not(.home) section:is(.tl-media,.tl-statement,.tl-groups,.tl-aside,.pod-all,.ftt-grads,#which-one-sounds-like-you,#the-three-resources-people-come-back):not(#_):not(#_a):not(#_b):not(#_c):not(#_d) > .container > .head > p,
  html body.hub-res section.sec:not(.sec-navy):not(#_):not(#_a):not(#_b):not(#_c):not(#_d) > .container > .head > p{margin-left:0 !important;margin-right:auto !important}
}

/* S213 PHONE WIDTH GUARD (Jill 10/27: nothing runs off the side of the screen on a phone). Found by checking all pages at
   360, 375, 390 and 414px. Long buttons, placeholder dates, email addresses, one price card and a sign-up form were wider
   than a small phone. */
@media (max-width:480px){
  html body .t2-fallback .btn{white-space:normal !important;max-width:100%;text-align:center;justify-content:center}
  html body .np-ph{white-space:normal !important}
  html body a[href^="mailto:"]{overflow-wrap:anywhere}
  html body .np-prices > .price-card{min-width:0 !important}
  html body #optinForm{grid-template-columns:minmax(0,1fr) !important}
  html body #optinForm label,html body #optinForm input{min-width:0 !important;max-width:100% !important;box-sizing:border-box}
  html body #optinForm label > input{width:100%}
  html body .price-card .p-amount{flex-wrap:wrap}
  html body #optinForm .btn{white-space:normal !important;text-align:center}
}

/* JUMP BAR v2 (S268, Jill 11/1): one look on every page that keeps the bar (guides, posts, doors, legal).
   A light teal pill with a real border so it shows on white and on the door bands, a "Jump to:" label,
   a down arrow on each link, and spacing that ties the bar to the section under it instead of floating. */
html body .jump-pill ol,
html body.door nav.dr-toc-row{background:#E6F3F2 !important;border:1.5px solid #8CC7C2 !important;box-shadow:0 12px 28px -22px rgba(22,51,63,.55) !important;border-radius:28px !important}
html body .jump-pill ol{padding:12px 28px !important;gap:8px 22px !important;align-items:center}
/* room for one line on wide screens (the bar may run a little wider than the reading column) */
html body section.sec.sec.jp-sec:not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) > .container{max-width:1280px !important}
html body .jump-pill{max-width:none !important}
html body.door nav.dr-toc-row{padding:12px 28px !important;top:0 !important}
html body.door nav.dr-toc-row ol{background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;gap:8px 24px !important;align-items:center}
html body :is(.jump-pill,.door .dr-toc-row) ol::before{content:"Jump to:";flex:none;white-space:nowrap;font:600 13.5px/1.5 var(--font-body);letter-spacing:.01em;color:var(--sienna,#9A4E2C);padding-right:18px;margin-right:-6px;border-right:1.5px solid #8CC7C2}
html body :is(.jump-pill,.door .dr-toc-row) a{color:var(--ds-teal-text,#0A6870) !important;white-space:nowrap}
html body :is(.jump-pill,.door .dr-toc-row) a::after{content:"\2193";display:inline-block;margin-left:5px;font-size:.9em;font-weight:700;opacity:.75;transition:transform .15s}
html body :is(.jump-pill,.door .dr-toc-row) a:hover::after{transform:translateY(2px);opacity:1}
/* spacing: a little room under the hero, and the first section starts at its own top padding (no second gap stacked on it) */
html body section.sec.sec.jp-sec:not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e){padding:44px 0 0 !important}
html body section.sec.sec.jp-sec:not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) > .container{padding-top:0 !important;padding-bottom:0 !important}
/* the bar is the divider: no hairline on the section right under it */
html body section.sec.sec.jp-sec + section.sec:not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) > .container{border-top-color:transparent !important;background-image:none !important}
/* where the next section is a different band, the bar sits inside that band so it never touches the color edge */
html body section.sec.sec.jp-sec:has(+ section.sec-sand, + span + section.sec-sand):not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e){background:var(--sand,#FBF6F0) !important}
html body section.sec.sec.jp-sec:has(+ section.ds-band, + span + section.ds-band):not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e){background:#E3EFEC !important}
/* doors: the bar and the guide line under it close the light band, so the band ends sooner */
html body.door section.sec.sec:has(nav.dr-toc-row):not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e){padding-bottom:36px !important}
@media (max-width:720px){
  html body section.sec.sec.jp-sec:not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e){padding:28px 0 0 !important}
  html body .jump-pill{display:block}
  html body .jump-pill ol,html body.door nav.dr-toc-row ol{flex-wrap:nowrap !important;justify-content:flex-start !important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  html body .jump-pill ol{padding:11px 0 11px 18px !important}
  html body.door nav.dr-toc-row{padding:0 !important;overflow:hidden;margin-top:120px !important}
  html body.door nav.dr-toc-row ol{padding:11px 0 11px 18px !important}
  /* the label stays put while the links swipe under it, and a fade on the right says there's more */
  html body :is(.jump-pill,.door .dr-toc-row) ol::before{position:sticky;left:0;z-index:2;background:#E6F3F2;padding:0 14px 0 0;margin-right:-8px;box-shadow:-18px 0 0 #E6F3F2}
  html body :is(.jump-pill,.door .dr-toc-row) ol::after{content:"";flex:none;position:sticky;right:0;width:40px;min-height:22px;margin-left:-16px;background:linear-gradient(90deg,rgba(230,243,242,0),#E6F3F2 70%)}
  html body.door section.sec.sec:has(nav.dr-toc-row):not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e){padding-bottom:28px !important}
}
/* legal pages sit in a 1080px column: a slightly tighter row so the list fits on one line there */
html body .jump-pill.jp-legal ol{gap:8px 18px !important;padding:12px 24px !important}
html body .jump-pill.jp-legal ol::before{padding-right:14px;margin-right:-4px}
/* the facts page: a contents box in the reading column, left-aligned like a list */
html body .jump-pill.jp-inline ol{justify-content:flex-start !important}
@media (min-width:1260px){html body .jump-pill.jp-legal{margin-left:-70px !important;margin-right:-70px !important}}
/* on a tinted band the bar goes white so it still stands out */
html body section.sec.sec.jp-sec:has(+ section.ds-band, + span + section.ds-band):not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) .jump-pill ol{background:#fff !important}
/* END JUMP BAR v2 */

/* S283 (Jill 11/1): slim cards were sand on sand with a faint outline, hard to see. White card, shadow, arrow in a circle. */
body:not(.home) .slim-card{background:#fff;border:1px solid var(--ds-line);box-shadow:var(--ds-shadow)}
body:not(.home) .slim-card:hover{border-color:var(--ds-teal-text)}
body:not(.home) .slim-card .sc-t{font-size:17px;color:var(--navy)}
body:not(.home) .slim-card .sc-d{font-size:14px;color:var(--ink-soft)}
body:not(.home) .slim-card .arr2{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--ds-tint);color:var(--ds-teal-text);font-size:18px}