/* Inner pages of outofthetruck.com on the Canva Remix system. Loads AFTER ot.css and ot-canva.css (which own the tokens,
   the green header, buttons, focus, grain, section openers and the FAQ). This file adds the page head and the components
   the copy needs: reading columns, step cards, fit panels, the topics list, values, years, platform tiles, episode rows,
   the guest card, resources, chapters, the transcript slot, the booking form, CTA rows and the closing band. */

/* ---------- page head ---------- */
.pg-hero{padding:150px 0 0; background:linear-gradient(180deg,#E7EEE8 0,var(--paper) 46%); overflow:visible}
.pg-hero::before{content:""; position:absolute; left:50%; top:120px; width:min(900px,90vw); aspect-ratio:1; translate:-50% -50%; border-radius:50%; background:radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,0)); z-index:0; pointer-events:none}
.pg-hero .wrap{position:relative; z-index:1}
.crumbs{display:flex; flex-wrap:wrap; gap:10px; align-items:center; font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 30px}
.crumbs a{color:var(--ink-3); text-decoration:none; transition:color .25s ease} .crumbs a:hover{color:var(--green-deep)}
.crumbs .sep{opacity:.5} .crumbs [aria-current]{color:var(--ink)}
.pg-hero__grid{display:grid; grid-template-columns:7fr 5fr; gap:64px; align-items:center}
.pg-hero__grid--wide{grid-template-columns:1fr}
.pg-hero .eyebrow{color:var(--green-deep); margin-bottom:18px}
.pg-hero h1{font:400 clamp(42px,4.9vw,72px)/.98 var(--display); letter-spacing:-.02em; text-transform:uppercase; color:var(--ink); max-width:17ch; text-wrap:balance; margin:0}
.pg-hero__grid--wide h1{max-width:20ch}
.pg-hero .hero__lead{margin:26px 0 0; font-size:18px; line-height:1.6; color:var(--ink-2); max-width:56ch}
.pg-hero .hero__lead + .hero__lead{margin-top:14px}
.pg-hero .hero__cta{margin-top:32px; gap:14px; flex-wrap:wrap}
.pg-hero .statement{margin:28px 0 0; font:500 18px/1.4 var(--body); color:var(--ink); max-width:44ch}
.pg-hero__obj{position:relative}
.pg-hero__foot{height:var(--sec-band)}
.obj-photo{position:relative; border-radius:24px; overflow:hidden; aspect-ratio:4/5; background:#E4E7E2; box-shadow:0 44px 88px -48px rgba(17,17,17,.5); outline:1px solid rgba(17,17,17,.06); outline-offset:-1px}
.obj-photo--wide{aspect-ratio:4/3}
.obj-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:block}
.obj-photo--bw img{filter:grayscale(1) contrast(1.05)}
.obj-photo__tag{position:absolute; left:16px; bottom:16px; font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(17,17,17,.6); padding:9px 12px; border-radius:999px}
.obj-mic{position:relative; display:flex; justify-content:center; align-items:flex-start; height:520px}
.obj-mic .cable{position:absolute; left:50%; top:-150px; width:3px; height:290px; background:#3D3D3D; translate:-50% 0}
.obj-mic img{position:relative; width:150px; height:auto; margin-top:138px; filter:drop-shadow(0 18px 18px rgba(17,17,17,.28)) drop-shadow(0 44px 54px rgba(28,121,64,.3))}
.obj-mic::before{content:""; position:absolute; left:50%; top:56%; width:420px; height:420px; translate:-50% -50%; border-radius:50%; background:radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,0)); z-index:0}
/* the episode video, same component as the home page (.fan.about__video .card[data-yt]) */
.obj-video .card__tag{white-space:normal}
.obj-video--held .card__play{display:none}

/* ---------- sections ---------- */
.pg{padding:var(--sec-band) 0; position:relative}
.pg--ink{background:#111; color:#fff} .pg--green{background:linear-gradient(180deg,#1B4F31 0,#164328 100%); color:#fff}
.pg--ink .h2,.pg--green .h2{color:#fff}
.pg--ink main .h2:not(.pillh)::before,.pg--green .h2::before{background:var(--green)}
.pg .h2{font-size:clamp(34px,3.4vw,48px)}
.pg--tight{padding-top:0}
.split--pg{display:grid; grid-template-columns:5fr 7fr; gap:64px; align-items:start}
.split--pg > .sticky{position:sticky; top:110px}
.split--pg .h2{max-width:14ch}
.prose p{font-size:18px; line-height:1.65; color:var(--ink-2); max-width:62ch; margin:0 0 20px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink); font-weight:600}
.prose a{color:var(--green-deep); text-decoration:underline; text-decoration-color:rgba(28,121,64,.5); text-underline-offset:3px; transition:text-decoration-color .25s ease} .prose a:hover{text-decoration-color:var(--green-deep)}
.pg--ink .prose p,.pg--green .prose p{color:rgba(255,255,255,.86)} .pg--ink .prose strong,.pg--green .prose strong{color:#fff}
.pg--ink .prose a,.pg--green .prose a{color:#fff; text-decoration-color:rgba(255,255,255,.4)}
.lead-p{font:400 clamp(22px,1.9vw,27px)/1.35 var(--body); color:var(--ink); max-width:30ch; margin:0 0 22px}
.pg--green .lead-p,.pg--ink .lead-p{color:#fff}
.sec-head{margin-bottom:40px; max-width:900px}
.sec-head p{font-size:18px; line-height:1.6; color:var(--ink-2); max-width:62ch; margin:14px 0 0}
.pg--green .sec-head p,.pg--ink .sec-head p{color:rgba(255,255,255,.82)}

/* ---------- CTA rows and the closing band ---------- */
.cta{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 22px 22px 30px; border:1px solid rgba(17,17,17,.1); border-radius:22px; background:rgba(255,255,255,.62); margin:36px 0 0; box-shadow:0 24px 48px -36px rgba(17,17,17,.35)}
.cta p{margin:0; font:500 17px/1.4 var(--body); color:var(--ink); max-width:46ch}
.cta .btn{flex:none}
.pg--green .cta,.pg--ink .cta{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); box-shadow:none} .pg--green .cta p,.pg--ink .cta p{color:#fff}
.pg--green .cta .btn,.pg--ink .cta .btn{background:#fff; color:var(--green-deep)} .pg--green .cta .btn:hover,.pg--ink .cta .btn:hover{background:#EFF1EE; color:var(--green-deep)}
.cta--stack{flex-direction:column; align-items:flex-start}
.ctaband{position:relative; overflow:hidden; display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; padding:52px 56px; border-radius:28px; background:linear-gradient(160deg,var(--green) 0%,var(--green-deep) 100%); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 48px 96px -56px rgba(28,121,64,.6)}
.ctaband::after{content:""; position:absolute; inset:0; background:radial-gradient(90% 90% at 6% 0, rgba(255,255,255,.16), transparent 58%); pointer-events:none}
.ctaband > *{position:relative; z-index:1}
.ctaband p{margin:0; font:400 clamp(26px,2.6vw,38px)/1.02 var(--display); text-transform:uppercase; letter-spacing:-.015em; max-width:22ch; text-wrap:balance}
.ctaband .btn{background:#fff; color:var(--green-deep)} .ctaband .btn:hover{background:#EFF1EE; color:var(--green-deep)}
.ctaband .btns{display:flex; flex-direction:column; gap:12px; align-items:flex-start}
.ctaband small{display:block; margin-top:16px; font:400 15px/1.5 var(--body); color:rgba(255,255,255,.85)} .ctaband small a{color:#fff}
/* Episodes page only (30 Sep): the closing band in the hero mic panel's material, so the page opens and closes on the same
   object. Black (#111) behind the words, turning green (#1F5E39, the panel's glow) behind the button, with the panel's sound
   rings (same radii and opacities, 1.3px lines). The rings are centred 205px below the button (which sits 173px in from the
   right edge at every desktop width), so the first ring curves under it and the second over it. Stacked (<=960): black
   top-left to green bottom-right, rings from the bottom-right corner, like the panel's own corner. Used by
   episodes/index.html alone (class ctaband--dark); every other page keeps the bright band. */
.ctaband--dark{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='white' stroke-width='0.108'%3E%3Ccircle cx='50' cy='50' r='14' stroke-opacity='.3'/%3E%3Ccircle cx='50' cy='50' r='22' stroke-opacity='.22'/%3E%3Ccircle cx='50' cy='50' r='30' stroke-opacity='.15'/%3E%3Ccircle cx='50' cy='50' r='38' stroke-opacity='.09'/%3E%3Ccircle cx='50' cy='50' r='46' stroke-opacity='.05'/%3E%3C/g%3E%3C/svg%3E") calc(100% + 427px) calc(50% + 205px) / 1200px 1200px no-repeat,
    radial-gradient(640px 360px at calc(100% - 173px) calc(50% + 150px), #1F5E39 0, rgba(31,94,57,.55) 42%, rgba(17,17,17,0) 100%),
    linear-gradient(100deg, #111 0%, #111 36%, #122C1C 68%, #17432A 100%);
  box-shadow:0 48px 96px -56px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(255,255,255,.06)}
.ctaband--dark::after{content:none}
@media (max-width:960px){
  .ctaband--dark{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='white' stroke-width='0.171'%3E%3Ccircle cx='50' cy='50' r='14' stroke-opacity='.3'/%3E%3Ccircle cx='50' cy='50' r='22' stroke-opacity='.22'/%3E%3Ccircle cx='50' cy='50' r='30' stroke-opacity='.15'/%3E%3Ccircle cx='50' cy='50' r='38' stroke-opacity='.09'/%3E%3Ccircle cx='50' cy='50' r='46' stroke-opacity='.05'/%3E%3C/g%3E%3C/svg%3E") calc(100% + 400px) calc(100% + 400px) / 760px 760px no-repeat,
      radial-gradient(80% 70% at 100% 100%, #1F5E39 0, rgba(31,94,57,.5) 45%, rgba(17,17,17,0) 100%),
      linear-gradient(145deg, #111 0%, #111 45%, #133221 100%)}
}

/* ---------- cards: bullet leads as titles ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.cards--2{grid-template-columns:repeat(2,1fr)} .cards--5{grid-template-columns:repeat(5,1fr)}
.cardx{position:relative; padding:28px 26px; border-radius:20px; background:#fff; border:1px solid rgba(17,17,17,.08); box-shadow:0 24px 48px -36px rgba(17,17,17,.35); transition:transform .45s var(--ease), box-shadow .45s var(--ease)}
.cardx:hover{transform:translateY(-3px); box-shadow:0 30px 56px -34px rgba(17,17,17,.4)}
.cardx .n{display:block; font:400 40px/1 var(--display); color:var(--green); letter-spacing:-.02em; margin:0 0 16px}
.cardx .rule{display:block; width:32px; height:3px; border-radius:2px; background:var(--green); margin:0 0 18px}
.cardx b{display:block; font:600 17px/1.35 var(--body); color:var(--ink); margin:0 0 8px}
.cardx p{margin:0; font-size:15.5px; line-height:1.6; color:var(--ink-2)}
.cardx--title b{font:400 26px/1.02 var(--display); text-transform:uppercase; letter-spacing:-.01em; margin-bottom:12px}
.pg--green .cardx,.pg--ink .cardx{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.pg--green .cardx b,.pg--ink .cardx b{color:#fff} .pg--green .cardx p,.pg--ink .cardx p{color:rgba(255,255,255,.8)}
.pg--green .cardx:hover,.pg--ink .cardx:hover{background:rgba(255,255,255,.09)}
.note-panel{margin-top:20px; padding:24px 28px; border-radius:18px; background:#E9ECE7; border:1px solid rgba(17,17,17,.06)}
.note-panel p{margin:0; font-size:16.5px; line-height:1.6; color:var(--ink-2)} .note-panel strong{color:var(--ink)}

/* ---------- fit panels (two-column tables) ---------- */
.fit{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.fit__col{border-radius:24px; padding:34px 32px}
.fit__col--yes{background:#fff; border:1px solid rgba(17,17,17,.08); box-shadow:0 24px 48px -36px rgba(17,17,17,.35)}
.fit__col--no{background:#111; color:#fff}
.fit__col h3{font:400 26px/1 var(--display); text-transform:uppercase; letter-spacing:-.01em; margin:0 0 20px}
.fit__col ul{list-style:none; margin:0; padding:0}
.fit__col li{position:relative; padding:16px 0 16px 36px; border-top:1px solid rgba(17,17,17,.1); font-size:16.5px; line-height:1.5; color:var(--ink-2)}
.fit__col--no li{border-top-color:rgba(255,255,255,.12); color:rgba(255,255,255,.82)}
.fit__col li::before{content:""; position:absolute; left:2px; top:24px; width:14px; height:14px; border-radius:50%}
.fit__col--yes li::before{background:var(--green)}
.fit__col--no li::before{background:transparent; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}

/* ---------- topics list ---------- */
.topics{list-style:none; margin:0; padding:0; border-top:1px solid rgba(17,17,17,.14)}
.topic{display:grid; grid-template-columns:5fr 7fr; gap:32px; padding:28px 0; border-bottom:1px solid rgba(17,17,17,.14); align-items:baseline}
.topic b{font:400 24px/1.1 var(--display); text-transform:uppercase; letter-spacing:-.01em; color:var(--green-deep)}
.topic p{font:500 clamp(18px,1.6vw,22px)/1.35 var(--body); color:var(--ink); margin:0}

/* ---------- years ---------- */
.years{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0 0 28px}
.year{padding:28px; border-radius:20px; background:#fff; border:1px solid rgba(17,17,17,.08)}
.year b{display:block; font:400 56px/1 var(--display); color:var(--green); letter-spacing:-.03em; margin:0 0 12px}
.year p{margin:0; font-size:16px; line-height:1.6; color:var(--ink-2)}

/* ---------- platform tiles ---------- */
.platforms{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.plat{position:relative; display:flex; flex-direction:column; gap:18px; min-height:230px; padding:26px; border-radius:22px; background:#111; color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.1); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s var(--ease)}
a.plat:hover{transform:translateY(-4px); border-color:rgba(255,255,255,.3); box-shadow:0 30px 56px -34px rgba(0,0,0,.6)}
.plat .badge{width:48px; height:48px; border-radius:50%; background:#fff; color:#111; display:grid; place-items:center; box-shadow:none} .plat .badge svg{width:22px; height:22px}
.plat--yt .badge{background:#FF0033; color:#fff}
.plat b{font:400 28px/1 var(--display); text-transform:uppercase; letter-spacing:-.01em}
.plat p{margin:auto 0 0; font-size:15px; line-height:1.55; color:rgba(255,255,255,.72)}
.plat .i-arr{position:absolute; right:22px; top:26px; width:20px; height:20px; color:#fff}
.plat[aria-disabled="true"]{background:#E9ECE7; color:var(--ink); border:1px dashed rgba(17,17,17,.22); box-shadow:none}
.plat[aria-disabled="true"] .badge{background:#fff; color:var(--ink-3); box-shadow:inset 0 0 0 1px rgba(17,17,17,.14)}
.plat[aria-disabled="true"] p{color:var(--ink-2)}
.needs{display:inline-flex; align-items:center; gap:8px; font:600 11px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); background:#fff; border:1px dashed rgba(17,17,17,.4); padding:8px 11px; border-radius:8px}
.needs--block{margin-top:20px}

/* ---------- episode rows (hub, topics) ---------- */
.eprows{border-top:1px solid rgba(17,17,17,.14)}
.eprow{display:grid; grid-template-columns:280px 1fr; gap:40px; align-items:center; padding:40px 0; border-bottom:1px solid rgba(17,17,17,.14)}
.eprow__art{position:relative; aspect-ratio:1; border-radius:22px; overflow:hidden; background:#111; box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.eprow__art .cut{position:absolute; right:-4%; bottom:0; height:100%; width:auto; filter:grayscale(1) contrast(1.05)}
.eprow__art .logo{position:absolute; left:18px; top:18px; height:44px; width:auto; opacity:.9}
.eprow__art .bars{position:absolute; left:14px; bottom:0; width:48%; height:60px; color:rgba(255,255,255,.3)}
.eprow__art .num{position:absolute; left:16px; bottom:10px; font:400 64px/1 var(--display); color:var(--green); letter-spacing:-.03em}
.eprow__art .card__play{right:16px; bottom:16px; width:56px; height:56px}
.eprow .meta{display:flex; flex-wrap:wrap; gap:10px 18px; font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--green-deep); margin:0 0 14px}
.eprow h3{font:400 clamp(26px,2.4vw,34px)/1.02 var(--display); text-transform:uppercase; letter-spacing:-.015em; margin:0 0 10px; text-wrap:balance}
.eprow h3 a{color:var(--ink); text-decoration:none} .eprow h3 a:hover{color:var(--green-deep)}
.eprow .guestline{font:500 15px/1.4 var(--body); color:var(--ink-3); margin:0 0 14px}
.eprow p.desc{font-size:16.5px; line-height:1.6; color:var(--ink-2); max-width:62ch; margin:0}
.eprow .links{display:flex; gap:22px; flex-wrap:wrap; margin-top:18px}
.eprow .links .yt{width:24px; height:24px; border-radius:50%; background:#FF0033; color:#fff; padding:6px; box-sizing:border-box; margin-right:8px; flex:none}
.eprow .links .arrow{display:inline-flex; align-items:center; color:var(--green-deep); font-weight:500}
.eprow--held .eprow__art{opacity:.92}

/* ---------- start here (green panel with the video) ---------- */
.start{display:grid; grid-template-columns:5fr 7fr; gap:56px; align-items:center}
.start .about__video{box-shadow:0 44px 88px -48px rgba(0,0,0,.7)}

/* ---------- guest card ---------- */
.guest-card{display:grid; grid-template-columns:170px 1fr; gap:30px; align-items:center; padding:28px; border-radius:24px; background:#111; color:#fff; margin-top:36px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.guest-card .ph{position:relative; width:170px; height:170px; border-radius:20px; overflow:hidden; background:#1B1B1B}
.guest-card .ph img{width:100%; height:100%; object-fit:cover; object-position:50% 8%; filter:grayscale(1) contrast(1.05)}
.guest-card .logo{height:44px; width:auto; margin:0 0 14px; opacity:.92}
.guest-card small{display:block; font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin-bottom:10px}
.guest-card p{margin:0; font-size:16px; line-height:1.65; color:rgba(255,255,255,.86)} .guest-card p strong{color:#fff} .guest-card a{color:#fff}

/* ---------- resources ---------- */
.res{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.res__card{display:flex; flex-direction:column; padding:30px; border-radius:22px; background:#fff; border:1px solid rgba(17,17,17,.08); box-shadow:0 24px 48px -36px rgba(17,17,17,.35)}
.res__card b{display:block; font:400 26px/1.05 var(--display); text-transform:uppercase; letter-spacing:-.01em; margin:0 0 12px; text-wrap:balance}
.res__card p{margin:0 0 22px; font-size:15.5px; line-height:1.6; color:var(--ink-2)}
.res__card .foot{margin-top:auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.res__card .btn[aria-disabled="true"]{opacity:.45; pointer-events:none}

/* ---------- chapters ---------- */
.chapters{list-style:none; margin:0; padding:0; columns:2; column-gap:48px}
.chapters li{break-inside:avoid; border-bottom:1px solid rgba(17,17,17,.1)}
.chapters a{display:flex; gap:16px; align-items:baseline; padding:12px 0; text-decoration:none; color:var(--ink); font-size:16px; line-height:1.45; transition:color .25s ease}
.chapters a:hover{color:var(--green-deep)}
.chapters time{flex:none; min-width:54px; font:400 17px/1.4 var(--display); letter-spacing:.02em; color:var(--green)}

/* ---------- transcript slot ---------- */
.transcript{padding:44px; border:1px dashed rgba(17,17,17,.28); border-radius:22px; background:rgba(255,255,255,.45)}
.transcript p{margin:0 0 16px; font-size:16px; color:var(--ink-2); max-width:62ch}

/* ---------- booking form ---------- */
.book{position:relative; scroll-margin-top:110px; background:linear-gradient(180deg,#1B4F31 0,#164328 100%); color:#fff; border-radius:28px; padding:34px; box-shadow:0 44px 88px -48px rgba(22,67,40,.7), inset 0 1px 0 rgba(255,255,255,.12)}
.book h2{font:400 28px/1 var(--display); text-transform:uppercase; letter-spacing:-.01em; margin:0 0 6px}
.book .sub{font-size:14.5px; color:rgba(255,255,255,.72); margin:0 0 22px}
.book .f{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.book .field{display:block} .book .full{grid-column:1/-1}
.book label{display:block; font:500 11.5px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.72); margin:0 0 8px}
.book input,.book textarea{width:100%; border:0; border-radius:12px; background:var(--paper); color:var(--ink); font:400 15.5px/1.35 var(--body); padding:14px 16px; box-sizing:border-box}
.book input::placeholder,.book textarea::placeholder{color:#7A7E79}
.book textarea{min-height:112px; resize:vertical}
.book .btn{width:100%; justify-content:center; margin-top:8px; background:#fff; color:var(--green-deep)} .book .btn:hover{background:#EFF1EE; color:var(--green-deep)}
.book .form__note{margin:14px 0 0; font-size:13.5px; color:rgba(255,255,255,.7)}
.book :focus-visible{outline-color:#fff}

/* ---------- FAQ on paper reuses .faq--canva; the copy's Q/A pairs render as details ---------- */
.faq--pg .faq__head{text-align:left; margin-bottom:34px}
.faq--pg .faq__head .h2::before{margin-left:0}

/* ---------- responsive ---------- */
@media (max-width:1100px){ .cards{grid-template-columns:repeat(2,1fr)} .cards--5{grid-template-columns:repeat(3,1fr)} .platforms{grid-template-columns:repeat(2,1fr)} .eprow{grid-template-columns:220px 1fr; gap:28px} }
@media (max-width:960px){
  .pg-hero{padding-top:120px}
  .pg-hero__grid{grid-template-columns:1fr; gap:40px} .pg-hero h1{max-width:none}
  .obj-photo{max-width:520px} .obj-mic{height:380px} .obj-mic img{width:120px; margin-top:110px} .obj-mic .cable{height:230px}
  .split--pg{grid-template-columns:1fr; gap:24px} .split--pg > .sticky{position:static}
  .start{grid-template-columns:1fr; gap:32px}
  .fit{grid-template-columns:1fr}
  .topic{grid-template-columns:1fr; gap:8px; padding:22px 0}
  .years{grid-template-columns:1fr 1fr}
  .cards--5{grid-template-columns:repeat(2,1fr)}
  .guest-card{grid-template-columns:130px 1fr; gap:22px} .guest-card .ph{width:130px; height:130px}
  .res{grid-template-columns:1fr}
  .chapters{columns:1}
  .ctaband{grid-template-columns:1fr; padding:40px 32px; gap:28px}
  .book{padding:26px}
}
@media (max-width:700px){
  .pg-hero{padding-top:100px} .pg-hero .hero__cta{flex-direction:column; align-items:stretch} .pg-hero .hero__cta .btn{justify-content:center}
  .cards,.cards--2,.cards--5,.platforms{grid-template-columns:1fr}
  .eprow{grid-template-columns:1fr; gap:22px} .eprow__art{max-width:320px}
  .years{grid-template-columns:1fr}
  .cta{flex-direction:column; align-items:stretch; padding:22px} .cta .btn{justify-content:center}
  .guest-card{grid-template-columns:1fr} .guest-card .ph{width:100%; height:auto; aspect-ratio:4/3}
  .book .f{grid-template-columns:1fr}
  .transcript{padding:28px}
  .ctaband p{font-size:clamp(26px,8vw,34px)}
}
/* numbered method inside prose (Episode 1 review script) */
.prose ol.steps{list-style:none; counter-reset:step; margin:8px 0 24px; padding:0}
.prose ol.steps li{counter-increment:step; position:relative; padding:16px 0 16px 56px; border-top:1px solid rgba(17,17,17,.1); font-size:17px; line-height:1.6; color:var(--ink-2)}
.prose ol.steps li:last-child{border-bottom:1px solid rgba(17,17,17,.1)}
.prose ol.steps li::before{content:counter(step,decimal-leading-zero); position:absolute; left:0; top:14px; font:400 26px/1 var(--display); color:var(--green); letter-spacing:-.02em}
.prose ol.steps strong{color:var(--ink)}
.pg--ink .prose ol.steps li{border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.86)} .pg--ink .prose ol.steps strong{color:#fff}
.prose ul{margin:0 0 20px; padding-left:22px} .prose ul li{font-size:17px; line-height:1.6; color:var(--ink-2); margin:0 0 8px}
.prose h3{font:400 24px/1.05 var(--display); text-transform:uppercase; margin:28px 0 12px}
/* hit areas: 12px labels that are links get a 40px target without moving the text */
.crumbs a,.eprow .meta a{position:relative; display:inline-block; padding:14px 0; margin:-14px 0}
.pg-hero .eyebrow,.needs{font-size:12px}
.pg-hero .eyebrow a{color:var(--green-deep); text-decoration:none; display:inline-block; padding:14px 0; margin:-14px 0}
/* review pass 1 */
.pg-hero .chips{margin-top:34px}
.pg .wrap > .chips:first-child{margin-top:-40px}
.pg-hero--ep h1{font-size:clamp(38px,4.3vw,62px); max-width:22ch}
.pg-hero--ep .pg-hero__grid{grid-template-columns:6.5fr 5.5fr}
.res__card{color:var(--ink)}
.topic--head{padding:14px 0} .topic--head b,.topic--head p{font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
/* review pass 2 */
.pg--green .h2::before,.pg--green main .h2:not(.pillh)::before{background:rgba(255,255,255,.9)}
.start .h2{margin-bottom:22px}
.pg .wrap > .chips:first-child{margin-top:-16px}
.pg-hero__grid--wide h1{margin-bottom:8px}
.cardx--run p{font-size:16.5px; line-height:1.6; color:var(--ink-2)} .cardx--run strong{color:var(--ink); font-weight:600}
.pg--green .cardx--run p,.pg--ink .cardx--run p{color:rgba(255,255,255,.82)} .pg--green .cardx--run strong,.pg--ink .cardx--run strong{color:#fff}
.plat{min-height:210px}
.pg .wrap > .chips:first-child{margin-top:36px}

/* ============================================================ episodes pass: cover cards on the hub, a cinematic episode hero */
/* ---------- the hub: 2-up cover cards ---------- */
.epgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:28px}
.epbig{position:relative; display:flex; flex-direction:column; border-radius:24px; overflow:hidden; background:#fff; border:1px solid rgba(17,17,17,.08); box-shadow:0 36px 72px -44px rgba(17,17,17,.45); transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.epbig:hover{transform:translateY(-4px); box-shadow:0 44px 80px -40px rgba(17,17,17,.5)}
.epbig__art{position:relative; display:block; aspect-ratio:16/10; background:radial-gradient(80% 70% at 30% 0, #1F1F1F 0, #111 70%); overflow:hidden; text-decoration:none}
.epbig__art .num{position:absolute; left:24px; top:14px; font:400 clamp(96px,10vw,150px)/1 var(--display); letter-spacing:-.04em; color:var(--green); opacity:.9; z-index:1}
.epbig__art .logo{position:absolute; left:26px; bottom:26px; height:52px; width:auto; opacity:.92; z-index:2}
.epbig__art .bars{position:absolute; left:22px; bottom:96px; width:38%; height:64px; color:rgba(255,255,255,.28); z-index:1}
.epbig__art .cut{position:absolute; right:2%; bottom:-2%; height:112%; width:auto; filter:grayscale(1) contrast(1.05); z-index:2; transition:transform .8s var(--out-expo)}
.epbig:hover .epbig__art .cut{transform:translateY(-6px)}
.epbig__art .pill{position:absolute; right:22px; top:22px; z-index:3; font:500 12px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); padding:10px 14px; border-radius:999px; backdrop-filter:blur(6px)}
.epbig > .card__play{position:absolute; right:24px; top:calc(62.5% - 32px); width:64px; height:64px; z-index:4; background:#fff; color:#111; display:grid; place-items:center; border-radius:50%; box-shadow:0 18px 40px -16px rgba(0,0,0,.7)}
.epbig > .card__play svg{width:24px; height:24px; margin-left:3px}
.epbig > .needs{position:absolute; right:24px; top:calc(62.5% - 20px); z-index:4}
.epbig__body{padding:26px 28px 30px}
.epbig__body .meta{display:flex; flex-wrap:wrap; gap:10px 18px; font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--green-deep); margin:0 0 14px}
.epbig__body .meta a{color:var(--green-deep); text-decoration:none; padding:14px 0; margin:-14px 0} .epbig__body .meta a:hover{text-decoration:underline}
.epbig__body h3{font:400 clamp(26px,2.3vw,32px)/1.04 var(--display); text-transform:uppercase; letter-spacing:-.015em; margin:0 0 10px; text-wrap:balance}
.epbig__body h3 a{color:var(--ink); text-decoration:none} .epbig__body h3 a:hover{color:var(--green-deep)}
.epbig__body .guestline{font:500 14.5px/1.4 var(--body); color:var(--ink-3); margin:0 0 14px}
.epbig__body .desc{font-size:16px; line-height:1.6; color:var(--ink-2); margin:0}
.epbig__body .links{display:flex; gap:22px; flex-wrap:wrap; margin-top:18px}
.epbig__body .links .yt{width:24px; height:24px; border-radius:50%; background:#FF0033; color:#fff; padding:6px; box-sizing:border-box; margin-right:8px; flex:none}
.epbig__body .links .arrow{display:inline-flex; align-items:center; color:var(--green-deep); font-weight:500}
.epbig--held .epbig__art .cut{opacity:.85}
.pg > .wrap > .epgrid + *{margin-top:0}
.pg-hero__foot{height:calc(var(--sec-band) - 40px)}

/* ---------- the episode page: dark hero with the video, the guest under the lead, a sticky strip ---------- */
.pg-hero--ep{background:radial-gradient(70% 60% at 62% 30%, #1E5A37 0, rgba(17,17,17,0) 62%), #111; color:#fff; padding-bottom:64px}
.pg-hero--ep::before{display:none}
.pg-hero--ep .crumbs,.pg-hero--ep .crumbs a{color:rgba(255,255,255,.6)} .pg-hero--ep .crumbs [aria-current]{color:#fff} .pg-hero--ep .crumbs a:hover{color:#fff}
.pg-hero--ep .eyebrow,.pg-hero--ep .eyebrow a{color:var(--green)}
.pg-hero--ep h1{color:#fff; font-size:clamp(38px,4.1vw,60px)}
.pg-hero--ep .hero__lead{color:rgba(255,255,255,.8)}
.pg-hero--ep .pg-hero__grid{grid-template-columns:6fr 6fr; gap:56px}
.pg-hero--ep .about__video{box-shadow:0 60px 120px -50px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08)}
.pg-hero--ep .about__video .card__play{box-shadow:0 18px 40px -16px rgba(0,0,0,.8)}
.pg-hero--ep .needs{background:rgba(255,255,255,.08); color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.35)}
.hero__cta--guest{margin-top:30px}
.ep-guest{display:inline-flex; align-items:center; gap:14px; padding:8px 20px 8px 8px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14)}
.ep-guest > img:first-child{width:56px; height:56px; border-radius:50%; object-fit:cover; object-position:50% 8%; filter:grayscale(1) contrast(1.05); background:#1B1B1B; flex:none}
.ep-guest small{display:block; font:500 11px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin-bottom:5px}
.ep-guest b{display:block; font:600 15px/1.2 var(--body); color:#fff}
.ep-guest i{display:block; font:400 12.5px/1.3 var(--body); font-style:normal; color:rgba(255,255,255,.65); margin-top:2px}
.ep-guest__logo{height:34px; width:auto; margin-left:8px; padding-left:18px; border-left:1px solid rgba(255,255,255,.16); opacity:.9}
.epstrip{position:sticky; top:96px; z-index:30; margin:0 0 -1px}
.epstrip__in{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:8px 8px 8px 10px; border-radius:999px; background:rgba(239,241,238,.88); backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); border:1px solid rgba(17,17,17,.08); box-shadow:0 20px 44px -28px rgba(17,17,17,.45); transform:translateY(-32px)}
.epstrip__nav{display:flex; gap:2px; overflow:auto; scrollbar-width:none} .epstrip__nav::-webkit-scrollbar{display:none}
.epstrip__nav a{flex:none; font:500 14px/1 var(--body); color:var(--ink); text-decoration:none; padding:12px 16px; border-radius:999px; transition:background-color .3s var(--ease), color .3s var(--ease)}
.epstrip__nav a:hover{background:#fff; color:var(--green-deep)}
.epstrip__yt{flex:none; display:inline-flex; align-items:center; gap:2px; font:500 14px/1 var(--body); color:#fff; background:var(--ink); text-decoration:none; padding:0 18px 0 8px; height:44px; border-radius:999px; transition:background-color .3s var(--ease)}
.epstrip__yt:hover{background:var(--green-ui)}
.epstrip__yt .yt{width:28px; height:28px; border-radius:50%; background:#FF0033; color:#fff; padding:7px; box-sizing:border-box; margin-right:10px}
.epstrip__yt .i-arr{margin-left:8px}
.pg-hero--ep + .epstrip + section{padding-top:calc(var(--sec-band) - 16px)}
#learn,#resources,#q1,#q2,#q3,#chapters,#transcript{scroll-margin-top:170px}
@media (max-width:1100px){ .epgrid{gap:20px} .epbig__art .num{font-size:96px} }
@media (max-width:960px){
  .epgrid{grid-template-columns:1fr}
  .pg-hero--ep .pg-hero__grid{grid-template-columns:1fr}
  .epstrip{top:76px} .epstrip__in{transform:translateY(-24px)} .epstrip__yt span{display:none}
}
@media (max-width:700px){
  .epbig__art .num{font-size:80px} .epbig__art .logo{height:40px} .epbig__body{padding:22px 20px 24px}
  .epbig > .card__play{width:56px; height:56px}
  .ep-guest{width:100%; box-sizing:border-box} .ep-guest__logo{display:none}
  .epstrip{top:68px} .epstrip__in{border-radius:22px; flex-direction:column; align-items:stretch; padding:8px} .epstrip__yt{justify-content:center}
  .pg-hero--ep{padding-bottom:48px}
}
/* episodes pass 2 */
.epbig__art .cut{bottom:0; top:auto; height:104%; max-height:none; right:3%}
.epbig__art{aspect-ratio:16/10.5}
.epbig__held{position:absolute; right:22px; bottom:26px; z-index:3; background:rgba(255,255,255,.08); color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.4)}
.epstrip__yt{padding-right:20px} .epstrip__yt span{display:inline}
@media (max-width:960px){ .epstrip__yt span{display:inline} }
@media (max-width:700px){ .epstrip__yt{padding:0 16px 0 8px} }
/* next episode hand-off */
.nextep{display:grid; grid-template-columns:320px 1fr; gap:36px; align-items:center; padding:20px; border-radius:26px; background:#fff; border:1px solid rgba(17,17,17,.08); box-shadow:0 36px 72px -44px rgba(17,17,17,.45); text-decoration:none; color:var(--ink); transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.nextep:hover{transform:translateY(-3px); box-shadow:0 44px 80px -40px rgba(17,17,17,.5)}
.nextep__art{position:relative; aspect-ratio:4/3; border-radius:18px; overflow:hidden; background:radial-gradient(80% 70% at 30% 0, #1F1F1F 0, #111 70%)}
.nextep__art .num{position:absolute; left:18px; top:8px; font:400 88px/1 var(--display); letter-spacing:-.04em; color:var(--green); z-index:1}
.nextep__art .bars{position:absolute; left:16px; bottom:14px; width:44%; height:52px; color:rgba(255,255,255,.28)}
.nextep__art .cut{position:absolute; right:2%; bottom:0; height:104%; width:auto; filter:grayscale(1) contrast(1.05); z-index:2}
.nextep__body{padding:8px 20px 8px 0}
.nextep__body .meta{display:flex; flex-wrap:wrap; gap:8px 18px; font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--green-deep); margin:0 0 14px}
.nextep__body h3{font:400 clamp(24px,2.2vw,32px)/1.04 var(--display); text-transform:uppercase; letter-spacing:-.015em; margin:0 0 8px; text-wrap:balance; color:var(--ink)}
.nextep__body .guestline{font:500 14.5px/1.4 var(--body); color:var(--ink-3); margin:0 0 20px}
.nextep__body .btn{background:var(--ink)} .nextep:hover .btn{background:var(--green-ui)}
@media (max-width:960px){ .nextep{grid-template-columns:1fr; gap:20px} .nextep__art{max-width:420px} .nextep__body{padding:0 8px 12px} }
/* episodes pass 3: the sticky strip hides once the reader is past the chapters; the phone card's play circle stays in the art */
.epstrip.is-past{opacity:0; pointer-events:none; transform:translateY(-8px); transition:opacity .3s ease, transform .3s ease}
.epstrip{transition:opacity .3s ease, transform .3s ease}
@media (max-width:700px){ .epbig > .card__play{top:auto; bottom:calc(100% - 100vw * 10.5 / 16 + 16px); right:16px} .epbig{position:relative} }

/* ============================================================ episodes hub v3: one flowing page */
.pg-hero--hub{padding-bottom:0}
.hub-head{display:grid; grid-template-columns:7fr 5fr; gap:64px; align-items:end}
.hub-head h1{font-size:clamp(40px,4.4vw,60px); max-width:14ch}
.hub-head .hero__lead{margin-top:0} .hub-head .hero__lead + .hero__lead{margin-top:14px}
.filterbar{margin-top:44px; padding:18px 0; border-top:1px solid rgba(17,17,17,.14); border-bottom:1px solid rgba(17,17,17,.14)}
.filterbar .chips{margin:0}
/* start here: an ink feature panel with the video */
.feature{display:grid; grid-template-columns:7fr 5fr; border-radius:28px; overflow:hidden; background:#111; color:#fff; box-shadow:0 48px 96px -56px rgba(0,0,0,.7)}
.feature .about__video,.feature .about__video .card{border-radius:0; box-shadow:none}
.feature .about__video .card{aspect-ratio:16/10.4}
.feature__body{padding:44px 44px 40px; display:flex; flex-direction:column; justify-content:center; background:radial-gradient(90% 80% at 100% 0, #1E5A37 0, rgba(17,17,17,0) 60%), #111}
.feature__body .h2{color:#fff; font-size:clamp(28px,2.7vw,38px)}
.feature__body > p{color:rgba(255,255,255,.82); font-size:17px; line-height:1.6; margin:18px 0 0}
.feature__meta{margin:28px 0 0; padding-top:24px; border-top:1px solid rgba(255,255,255,.14)}
.feature__meta .meta{display:flex; flex-wrap:wrap; gap:8px 16px; font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin:0 0 10px}
.feature__meta .meta a{color:var(--green); text-decoration:none; padding:14px 0; margin:-14px 0}
.feature__meta h3{font:400 clamp(20px,1.7vw,24px)/1.08 var(--display); text-transform:uppercase; letter-spacing:-.01em; margin:0 0 6px; text-wrap:balance}
.feature__meta h3 a{color:#fff; text-decoration:none} .feature__meta h3 a:hover{color:var(--green)}
.feature__meta .guestline{font:500 14px/1.4 var(--body); color:rgba(255,255,255,.6); margin:0 0 18px}
.feature__meta .btn{background:#fff; color:var(--green-deep)} .feature__meta .btn:hover{background:#EFF1EE; color:var(--green-deep)}
/* the list: numbered rows with a square art tile */
.eplist{border-top:1px solid rgba(17,17,17,.14)}
.eprow{display:grid; grid-template-columns:300px 1fr; gap:44px; align-items:center; padding:44px 0; border-bottom:1px solid rgba(17,17,17,.14)}
.eprow__art{position:relative; display:block; aspect-ratio:1; border-radius:20px; overflow:hidden; background:radial-gradient(80% 70% at 30% 0, #1F1F1F 0, #111 70%); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); text-decoration:none}
.eprow__art .num{position:absolute; left:18px; top:6px; font:400 96px/1 var(--display); letter-spacing:-.04em; color:var(--green); z-index:1}
.eprow__art .cut{position:absolute; right:0; bottom:0; width:62%; height:88%; max-width:none; object-fit:cover; object-position:50% 0; filter:grayscale(1) contrast(1.05); z-index:2; transition:transform .8s var(--out-expo); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%); mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
.eprow:hover .eprow__art .cut{transform:translateY(-6px)}
.eprow__art .logo{position:absolute; left:20px; bottom:20px; height:40px; width:auto; opacity:.92; z-index:3}
.eprow__art .bars{display:none}
.eprow__art .card__play{position:absolute; right:18px; bottom:18px; width:52px; height:52px; z-index:4; background:#fff; color:#111; display:grid; place-items:center; border-radius:50%; transition:background-color .25s var(--ease)}
.eprow__art .card__play svg{width:20px; height:20px; margin-left:3px}
.eprow:hover .eprow__art .card__play{background:var(--green); color:#fff}
.eprow__art .epbig__held{position:absolute; right:18px; bottom:24px; z-index:3; background:rgba(255,255,255,.08); color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.4)}
.eprow .meta{display:flex; flex-wrap:wrap; gap:10px 18px; font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--green-deep); margin:0 0 14px}
.eprow .meta a{color:var(--green-deep); text-decoration:none; padding:14px 0; margin:-14px 0} .eprow .meta a:hover{text-decoration:underline}
.eprow h3{font:400 clamp(28px,2.6vw,38px)/1.02 var(--display); text-transform:uppercase; letter-spacing:-.015em; margin:0 0 10px; text-wrap:balance; max-width:20ch}
.eprow h3 a{color:var(--ink); text-decoration:none; transition:color .25s ease} .eprow h3 a:hover{color:var(--green-deep)}
.eprow .guestline{font:500 15px/1.4 var(--body); color:var(--ink-3); margin:0 0 14px}
.eprow .desc{font-size:16.5px; line-height:1.6; color:var(--ink-2); max-width:60ch; margin:0}
.eprow .links{display:flex; gap:22px; flex-wrap:wrap; margin-top:20px}
.eprow--held .eprow__art .cut{opacity:.85}
@media (max-width:1100px){ .eprow{grid-template-columns:240px 1fr; gap:32px} .eprow__art .num{font-size:80px} }
@media (max-width:960px){ .hub-head{grid-template-columns:1fr; gap:20px} .feature{grid-template-columns:1fr} .feature__body{padding:32px 28px} }
@media (max-width:700px){ .filterbar{margin-top:32px} .eprow{grid-template-columns:1fr; gap:22px; padding:32px 0} .eprow__art{aspect-ratio:4/3} .eprow__art .cut{width:52%} .eprow h3{max-width:none} }
.eprow__art .logo{top:auto}
.pg-hero--hub .pg-hero__grid--wide h1{margin-bottom:0}
.eprow__art .epbig__held{bottom:auto; top:18px; right:18px; left:auto}
.pg-hero--hub + .pg{padding-top:0}
.pg-hero--hub + .pg .eplist{border-top:0}

/* ============================================================ episodes hero: "Paper and the hanging mic" v2 (Shoaib's pick, 2026-09-29)
   Copy left with the topic chips anchored to the panel's bottom line; right, the ink panel as a sound stage built from the
   home hero's objects (.rings from ot-canva.css, the mic on its cable with sway + the home's ot-ripple), carrying the pick. */
.hh{position:relative; padding:150px 0 0; overflow:hidden; background:linear-gradient(180deg,#E7EEE8 0,var(--paper) 46%)}
.hh__in{position:relative; z-index:2}
.hh-split__grid{display:grid; grid-template-columns:7fr 6fr; gap:56px; align-items:stretch}
.hh .hh__copy{display:flex; flex-direction:column; padding:0}
.hh__copy h1{font:400 clamp(44px,5.2vw,76px)/.98 var(--display); letter-spacing:-.02em; text-transform:uppercase; color:var(--ink); max-width:13ch; margin:0; text-wrap:balance}
.hh__copy .hero__lead{margin:26px 0 0; font-size:18px; line-height:1.6; max-width:52ch; color:var(--ink-2)} .hh__copy .hero__lead + .hero__lead{margin-top:12px}
.hh-split__browse{margin-top:auto; padding-top:26px; border-top:1px solid rgba(17,17,17,.14)}
.hh-split__browse small{display:block; font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 14px}
.hh-split__browse .chips{margin:0}
.hh-split--topic .hh__copy{display:block} .hh-split--topic .hh-split__browse{margin-top:40px}
.hh-split__panel{position:relative; padding:430px 40px 40px; border-radius:28px; overflow:hidden; color:#fff; background:radial-gradient(60% 42% at 50% 36%, #1F5E39 0, rgba(17,17,17,0) 66%), #111; box-shadow:0 60px 120px -56px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(255,255,255,.06)}
.hh-split__panel .rings{top:290px; left:50%; right:auto; width:660px; translate:-50% -50%; color:#fff; z-index:0}
.hh-split__panel .rings circle{stroke-width:.22; opacity:.3} .hh-split__panel .rings circle:nth-child(2){opacity:.22} .hh-split__panel .rings circle:nth-child(3){opacity:.15} .hh-split__panel .rings circle:nth-child(4){opacity:.09} .hh-split__panel .rings circle:nth-child(5){opacity:.05} .hh-split__panel .rings .dot{opacity:.35}
html.motion .hh-split__panel .rings{animation:ot-breathe 8s ease-in-out infinite alternate; will-change:transform}
.hh-split__rig{position:absolute; left:50%; top:0; translate:-50% 0; display:flex; flex-direction:column; align-items:center; transform-origin:50% 0; z-index:1; pointer-events:none}
.hh-split__rig .cable{display:block; width:3px; height:92px; background:#3D3D3D; border-radius:0 0 1.5px 1.5px}
.hh-split__rig .mic{display:block; width:130px; height:auto; margin-top:-1px; filter:drop-shadow(0 18px 18px rgba(0,0,0,.5)) drop-shadow(0 44px 54px rgba(28,121,64,.35))}
.hh-split__rig::after{content:""; position:absolute; left:50%; top:296px; width:150px; height:150px; translate:-50% -50%; border-radius:50%; border:1.5px solid var(--green); opacity:0; pointer-events:none; z-index:-1}
html.motion .hh-split__rig{animation:hh-sway 7s ease-in-out infinite alternate}
html.motion .hh-split__rig::after{animation:ot-ripple 7s cubic-bezier(.16,1,.3,1) 1.4s infinite}
@keyframes hh-sway{from{rotate:-.7deg} to{rotate:.7deg}}
.hh-split__pick{position:relative; z-index:2}
.hh-split__pick .lbl{display:block; font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin:0 0 12px}
.hh-split__pick > p,.hh-split__ep p.desc{font:400 15.5px/1.6 var(--body); color:rgba(255,255,255,.82); margin:0; max-width:44ch}
.hh-split__ep{margin-top:24px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14)} .hh-split__ep--first{margin-top:0; padding-top:0; border-top:0}
.hh-split__ep .meta{display:flex; flex-wrap:wrap; gap:8px 16px; font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); margin:0 0 14px} .hh-split--topic .hh-split__ep .meta{color:var(--green)}
.hh-split__ep .meta a{color:inherit; text-decoration:none; padding:14px 0; margin:-14px 0} .hh-split__ep .meta a:hover{color:#fff}
.hh-split__ep h3{font:400 clamp(20px,1.7vw,24px)/1.08 var(--display); text-transform:uppercase; letter-spacing:-.01em; margin:0 0 6px; text-wrap:balance; color:#fff} .hh-split__ep h3 a{color:inherit; text-decoration:none} .hh-split__ep h3 a:hover{text-decoration:underline; text-underline-offset:4px}
.hh-split__ep .guestline{font:500 14px/1.4 var(--body); color:rgba(255,255,255,.6); margin:0}
.hh-split__ep p.desc{margin-top:14px}
.hh-split__cta{display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:20px}
.hh-split__cta .btn{background:#fff; color:var(--green-deep)} .hh-split__cta .btn:hover{background:#EFF1EE; color:var(--green-deep)}
.hh-split__cta .ytgo{display:inline-flex; align-items:center; gap:10px; font:600 14.5px/1 var(--body); color:#fff; text-decoration:none; padding:8px 0}
.hh-split__cta .ytgo .badge{width:36px; height:36px; background:#FF0033; color:#fff; box-shadow:none} .hh-split__cta .ytgo .badge svg{width:16px; height:16px}
.hh-split__cta .ytgo:hover{text-decoration:underline; text-underline-offset:4px}
@media (max-width:1100px){ .hh-split__grid{grid-template-columns:1fr 1fr; gap:40px} .hh-split__panel{padding:440px 32px 32px} .hh-split__rig .cable{height:110px} .hh-split__rig .mic{width:124px} .hh-split__rig::after{top:300px} .hh-split__panel .rings{top:310px; width:700px} }
@media (max-width:960px){ .hh-split__grid{grid-template-columns:1fr; gap:36px} .hh .hh__copy{display:block} .hh-split__browse{margin-top:36px} .hh-split__panel{padding:400px 28px 28px; border-radius:24px} .hh-split__rig .cable{height:90px} .hh-split__rig .mic{width:116px} .hh-split__rig::after{top:270px} .hh-split__panel .rings{top:250px; width:560px} }
@media (max-width:700px){ .hh{padding-top:110px} .hh__copy h1{font-size:clamp(38px,11vw,48px)} .hh-split__panel{padding:350px 22px 24px} .hh-split__rig .mic{width:100px} .hh-split__rig .cable{height:80px} .hh-split__rig::after{top:235px; width:120px; height:120px} .hh-split__panel .rings{top:210px; width:440px} }
@media (prefers-reduced-motion:reduce){ .hh-split__rig,.hh-split__rig::after,.hh-split__panel .rings{animation:none} }
/* topic pages have no leads: centre the short copy block beside the panel so the lockup reads composed */
@media (min-width:961px){ .hh-split--topic .hh__copy{display:flex; flex-direction:column; justify-content:center} .hh-split--topic .hh-split__browse{margin-top:40px} }
/* --- the same hero on every inner page (2026-09-29): each panel carries that page's own object --- */
.hh .hh__foot{margin-top:auto; padding-top:32px}
.hh-split--topic .hh__foot{margin-top:40px}
.hh__eyebrow{display:flex; flex-wrap:wrap; gap:8px 16px; font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--green-deep); margin:0 0 18px; position:relative; z-index:3}
.hh__eyebrow a{color:inherit; text-decoration:none; padding:14px 0; margin:-14px 0} .hh__eyebrow a:hover{text-decoration:underline; text-underline-offset:4px}
.hh__foot .hero__cta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0}
.hh-split--ep .hh__copy,.hh-split--sarah .hh__copy,.hh-split--guest .hh__copy{justify-content:center}
.hh-split__panel--obj{display:flex; flex-direction:column; padding:40px}
.hh-split__panel--obj .hh-split__pick{margin-top:auto; padding-top:28px}
.hh-split__obj{position:relative; z-index:1}
.hh-split__obj .about__video{margin:0} .hh-split__obj .about__video .card{border-radius:16px; box-shadow:0 30px 60px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1)}
.hh-split__obj .needs--block{margin:12px 0 0; color:rgba(255,255,255,.6)}
.hh-split__obj--photo img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:50% 40%; border-radius:16px; filter:grayscale(1) contrast(1.05); box-shadow:0 30px 60px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1)}
.hh-split__pick .powered{justify-content:flex-start; color:#fff; font-size:18px; margin:0} .hh-split__pick .powered img{height:22px; filter:brightness(0) invert(1)}
.hh-split__pick h3{font:400 clamp(22px,1.9vw,28px)/1.08 var(--display); text-transform:uppercase; letter-spacing:-.01em; margin:0 0 6px; color:#fff}
.hh-split__pick .guestline{font:500 14px/1.4 var(--body); color:rgba(255,255,255,.6); margin:0}
.hh-split__pick .ep-guest{margin:0}
.hh-split__panel--cut{min-height:620px; padding:40px; display:flex; align-items:flex-end}
.hh-split__panel--cut .hh-split__pick{max-width:46%}
.hh-split__cut{position:absolute; right:0; bottom:0; height:92%; width:auto; max-width:64%; object-fit:contain; object-position:right bottom; z-index:1; filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
.hh-split__cta .btn.btn--amber{background:var(--green-ui); color:#fff} .hh-split__cta .btn.btn--amber:hover{background:var(--green); color:#fff}
.booksec{max-width:760px; margin:0 auto}
@media (max-width:960px){ .hh .hh__foot{margin-top:36px} .hh-split__panel--cut{min-height:520px} .hh-split__panel--cut .hh-split__pick{max-width:50%} }
@media (max-width:700px){ .hh-split__panel--obj{padding:24px} .hh-split__panel--cut{min-height:440px; padding:24px} .hh-split__cut{height:82%} }
.hh-split--long .hh__copy h1{font-size:clamp(40px,4.6vw,66px); max-width:16ch}
/* Episodes hero spacing (30 Sep). The copy needs ~590px and the mic panel was ~800px, and "Browse by topic" was pinned to
   the panel's bottom line, so a 210–300px empty band opened between the intro and the topics at every desktop width. Now
   the topics follow the intro (one hairline between them), the copy block centres on the panel, and the panel's mic stage
   is 90px tighter (shorter cable, slightly smaller mic, rings and ripple re-centred on it). Measured after: ~48px of air
   above and below the copy at 1280–1920, ~85–95px at 961–1200. Hub and topic pages only (the only .hh-split heroes);
   delete this block to go back. */
@media (min-width:961px){
  .hh-split--long .hh__copy{justify-content:center}
  .hh-split--long .hh__foot{margin-top:0; padding-top:44px}
  .hh-split--long .hh-split__browse{margin-top:0}
}
@media (min-width:1101px){
  .hh-split__panel{padding-top:340px}
  .hh-split__rig .cable{height:44px}
  .hh-split__rig .mic{width:120px}
  .hh-split__rig::after{top:232px}
  .hh-split__panel .rings{top:232px; width:620px}
}
@media (min-width:961px) and (max-width:1100px){
  .hh-split__panel{padding-top:350px}
  .hh-split__rig .cable{height:56px}
  .hh-split__rig .mic{width:116px}
  .hh-split__rig::after{top:238px}
  .hh-split__panel .rings{top:238px; width:640px}
}
/* Mobile (30 Sep): the foot's margin + padding and the browse block's margin stacked to ~104px of empty band between the
   intro and "Browse by topic"; now one 28px step to the hairline. Hub and topic pages only. (The smaller phone chips are
   site-wide now, at the end of ot-canva.css.) */
@media (max-width:960px){
  .hh-split .hh__foot{margin-top:0; padding-top:28px}
  .hh-split .hh-split__browse{margin-top:0; padding-top:20px}
  .hh-split__browse small{margin-bottom:12px}
}
.hh-split__obj .needs--block{background:rgba(255,255,255,.08); color:rgba(255,255,255,.78); border-color:rgba(255,255,255,.28)}
.hh-split--ep{padding-bottom:28px}   /* the sticky episode strip follows the hero: air under the panel, on phones its 24px straddle lands in this gap */

/* ============================================================ episode page v3 (2026-09-29): player first, like YouTube.
   The video directly under the header, the chapters beside it (a panel the player's height, scrolling inside), then one
   plain column under the player: title, meta, actions, description, guest, takeaways, guides, questions, band, transcript.
   The side column carries Up next. No hero, no strip, no cards; hairlines do the separating. The dock is off (own player). */
body.ep-page .dock{display:none}
.ep-stage{padding:104px 0 0}
.ep-grid{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:28px; align-items:start}
.ep-grid--stage{align-items:stretch}
.ep-stage__player .about__video{margin:0} .ep-stage__player .card{border-radius:16px; aspect-ratio:16/9; box-shadow:0 40px 80px -48px rgba(17,17,17,.5), 0 0 0 1px rgba(17,17,17,.06)}
.ep-stage__player .needs--block{margin-top:14px}
.ep-chap{position:relative; background:#fff; border:1px solid rgba(17,17,17,.08); border-radius:16px; padding:18px 18px 0; box-shadow:0 24px 48px -40px rgba(17,17,17,.35); min-height:0}
.ep-chap h2{font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 10px}
.ep-chap ol{position:absolute; left:10px; right:6px; top:44px; bottom:8px; overflow:auto; list-style:none; margin:0; padding:0 6px 0 0; scrollbar-width:thin; scrollbar-color:rgba(17,17,17,.25) transparent}
.ep-chap li{border-top:1px solid rgba(17,17,17,.08)} .ep-chap li:first-child{border-top:0}
.ep-chap a{display:grid; grid-template-columns:46px 1fr; gap:10px; padding:10px 8px; border-radius:10px; font:400 14px/1.4 var(--body); color:var(--ink); text-decoration:none; transition:background-color .2s var(--ease)}
.ep-chap a:hover{background:rgba(32,157,80,.1)} .ep-chap time{font:400 14px/1.4 var(--display); color:var(--green)}
.ep-chap__held{padding:8px 0 18px}
.ep-head{padding:26px 0 0}
.ep-head .crumbs{margin:0 0 14px}
.ep-head h1{font:400 clamp(30px,3.1vw,44px)/1.02 var(--display); text-transform:uppercase; letter-spacing:-.015em; margin:0 0 14px; color:var(--ink); text-wrap:balance}
.ep-meta{display:flex; flex-wrap:wrap; gap:8px 18px; font:500 12px/1.4 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 18px}
.ep-meta a{color:var(--green-deep); text-decoration:none; padding:14px 0; margin:-14px 0} .ep-meta a:hover{text-decoration:underline}
.ep-actions{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:16px 0; border-top:1px solid rgba(17,17,17,.12); border-bottom:1px solid rgba(17,17,17,.12)}
.ep-actions .ytgo{display:inline-flex; align-items:center; gap:10px; font:600 14.5px/1 var(--body); color:var(--ink); text-decoration:none; padding:6px 0}
.ep-actions .ytgo .badge{width:36px; height:36px; background:#FF0033; color:#fff; box-shadow:none} .ep-actions .ytgo .badge svg{width:16px; height:16px}
.ep-actions .ytgo:hover{text-decoration:underline; text-underline-offset:4px}
.ep-desc{margin:24px 0 0; padding:20px 24px; border-radius:16px; background:rgba(17,17,17,.045)}
.ep-desc p{font:400 16.5px/1.6 var(--body); color:var(--ink-2); margin:0 0 12px} .ep-desc p:last-child{margin:0}
.ep-who{display:grid; grid-template-columns:64px 1fr; gap:18px; align-items:start; margin:28px 0 0; padding:0 0 28px; border-bottom:1px solid rgba(17,17,17,.12)}
.ep-who .ph{width:64px; height:64px; border-radius:50%; object-fit:cover; object-position:50% 8%; filter:grayscale(1) contrast(1.05); background:#161616}
.ep-who b{display:flex; align-items:center; gap:12px; font:600 16px/1.2 var(--body); color:var(--ink)} .ep-who .logo{height:26px; width:auto; filter:brightness(0); opacity:.8}
.ep-who .co{display:inline-block; font:500 13.5px/1.3 var(--body); color:var(--green-deep); text-decoration:none; margin-top:4px} .ep-who .co:hover{text-decoration:underline}
.ep-who p{font:400 15.5px/1.6 var(--body); color:var(--ink-2); margin:12px 0 0; max-width:64ch} .ep-who p a{color:var(--green-deep)}
.ep-sec{padding:40px 0 0} .ep-sec + .ep-sec{margin-top:40px; border-top:1px solid rgba(17,17,17,.12)}
.ep-sec .h2{font-size:clamp(26px,2.3vw,34px); margin:0 0 22px}
.ep-p{font:400 16.5px/1.6 var(--body); color:var(--ink-2); margin:24px 0 0}
.ledger{list-style:none; margin:0; padding:0}
.ledger li{display:grid; grid-template-columns:56px 1fr; gap:14px; align-items:start; padding:16px 0; border-top:1px solid rgba(17,17,17,.1)} .ledger li:first-child{border-top:0; padding-top:0}
.ledger .n{font:400 30px/1.1 var(--display); color:var(--green); letter-spacing:-.02em}
.ledger div{font:400 16.5px/1.6 var(--body); color:var(--ink-2)} .ledger b{color:var(--ink); font-weight:600}
.ep-res{list-style:none; margin:0; padding:0}
.ep-res li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; padding:22px 0; border-top:1px solid rgba(17,17,17,.1)} .ep-res li:first-child{border-top:0; padding-top:0}
.ep-res b{display:block; font:400 22px/1.08 var(--display); text-transform:uppercase; letter-spacing:-.01em; margin:0 0 8px; color:var(--ink)}
.ep-res p{font:400 15.5px/1.6 var(--body); color:var(--ink-2); margin:0; max-width:60ch}
.ep-res .foot{display:flex; flex-direction:column; align-items:flex-end; gap:8px} .ep-res .btn[aria-disabled="true"]{opacity:.45; pointer-events:none}
.ep-main .prose{max-width:none} .ep-main .prose p{font-size:16.5px}
.ep-band{margin:48px 0 0}
.ep-main .transcript{margin:0}
.ep-grid--body{padding-bottom:var(--sec-band)}
.ep-side{position:sticky; top:104px}
.ep-next{display:block; text-decoration:none; color:var(--ink); background:#fff; border:1px solid rgba(17,17,17,.08); border-radius:16px; padding:12px; margin-top:26px; box-shadow:0 24px 48px -40px rgba(17,17,17,.35)}
.ep-next small{display:block; font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:6px 6px 12px}
.ep-next .eprow__art{aspect-ratio:16/10; border-radius:12px} .ep-next .eprow__art .num{font-size:72px} .ep-next .eprow__art .cut{width:48%; height:92%} .ep-next .eprow__art .logo{height:30px; left:16px; bottom:16px} .ep-next .eprow__art .card__play{width:44px; height:44px; right:14px; bottom:14px} .ep-next .eprow__art .card__play svg{width:16px; height:16px}
.ep-next:hover .eprow__art .cut{transform:translateY(-6px)} .ep-next:hover .eprow__art .card__play{background:var(--green); color:#fff}
.ep-next__body{display:block; padding:12px 6px 4px}
.ep-next .meta{display:flex; flex-wrap:wrap; gap:6px 14px; font:500 11.5px/1.4 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--green-deep); margin:0 0 8px}
.ep-next strong{display:block; font:400 19px/1.1 var(--display); text-transform:uppercase; letter-spacing:-.01em; margin:0 0 6px; text-wrap:balance}
.ep-next .guestline{display:block; font:500 13.5px/1.4 var(--body); color:var(--ink-3)}
@media (max-width:1100px){ .ep-grid{grid-template-columns:minmax(0,1fr) 320px; gap:24px} }
@media (max-width:960px){ .ep-grid{grid-template-columns:1fr} .ep-grid--stage{align-items:start} .ep-chap{padding-bottom:8px} .ep-chap ol{position:static; max-height:300px} .ep-side{position:static} .ep-next{margin-top:40px; max-width:420px} }
@media (max-width:700px){ .ep-stage{padding-top:96px} .ep-head h1{font-size:clamp(26px,7.6vw,34px)} .ep-actions{justify-content:flex-start} .ep-res li{grid-template-columns:1fr} .ep-res .foot{align-items:flex-start} .ep-who{grid-template-columns:52px 1fr} .ep-who .ph{width:52px; height:52px} .ledger li{grid-template-columns:44px 1fr} .ledger .n{font-size:26px} }
/* episode v3 review fixes: a held chapters panel does not stretch; tap sizes; the next-episode tile at 320px wide */
.ep-chap--held{align-self:start}
.ep-chap a{padding:12px 8px}
.ep-who .co{padding:12px 0; margin:-9px 0}
.ep-next .eprow__art .num{font-size:56px; top:10px} .ep-next .eprow__art .epbig__held{font-size:10px; padding:6px 8px; top:14px; right:14px}
/* episode v3, Shoaib 2026-09-29 ("the cards on the right should be green"): the chapters panel and the next-episode card
   take the site's deep-green surface (the home strip, the booking form), white type, white hairlines */
.ep-chap,.ep-next{background:linear-gradient(180deg,#1B4F31 0,#164328 100%); color:#fff; border:1px solid rgba(255,255,255,.08); box-shadow:0 44px 88px -48px rgba(22,67,40,.7), inset 0 1px 0 rgba(255,255,255,.1)}
.ep-chap h2,.ep-next small{color:rgba(255,255,255,.62)}
.ep-chap li{border-top-color:rgba(255,255,255,.12)}
.ep-chap a{color:rgba(255,255,255,.88)} .ep-chap a:hover{background:rgba(255,255,255,.1); color:#fff}
.ep-chap time{color:#fff}
.ep-chap ol{scrollbar-color:rgba(255,255,255,.3) transparent}
.ep-chap .needs{background:rgba(255,255,255,.08); color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.3)}
.ep-next .eprow__art{box-shadow:0 20px 40px -24px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06)}
.ep-next .meta{color:rgba(255,255,255,.62)}
.ep-next strong{color:#fff}
.ep-next .guestline{color:rgba(255,255,255,.62)}
/* .prose a (0,1,1) outranks .btn (0,1,0): a CTA row inside prose on paper got green text on the green button (Shoaib, 2026-09-29) */
.prose .cta .btn{color:#fff; text-decoration:none} .prose .cta .btn:hover{color:#fff}
.pg--ink .prose .cta .btn,.pg--green .prose .cta .btn{color:var(--green-deep)} .pg--ink .prose .cta .btn:hover,.pg--green .prose .cta .btn:hover{color:var(--green-deep)}

/* ============================================================ inner pages v2 (2026-09-29, episode page final → "go ahead for other pages"):
   About, Sarah, Listen, Be a Guest bodies on the episode page's grammar: one plain main column, hairline sections, ledgers,
   a deep-green side card (Start here / topics / the booking form). The approved paper-and-mic hero stays on top. */
.ep-grid--inner{padding-top:56px}
.ep-side--inner > :first-child{margin-top:0} .ep-side--inner > * + *{margin-top:20px}
.ep-side--inner .book{margin:0; padding:24px; border-radius:16px} .ep-side--inner .book h2{font-size:24px} .ep-side--inner .book .f{grid-template-columns:1fr 1fr; gap:10px}
.ep-card{background:linear-gradient(180deg,#1B4F31 0,#164328 100%); color:#fff; border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px; box-shadow:0 44px 88px -48px rgba(22,67,40,.7), inset 0 1px 0 rgba(255,255,255,.1)}
.ep-card small{display:block; font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62); margin:0 0 14px}
.ep-card .chips{margin:0; gap:8px} .ep-card .chip{color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.04)}
.ep-card a.chip:hover{background:#fff; border-color:#fff; color:var(--green-deep)} .ep-card .chip.is-active{background:#fff; color:var(--green-deep); border-color:#fff}
.ep-card .chip[aria-disabled="true"]{opacity:1; border-style:solid; border-color:rgba(255,255,255,.1); color:rgba(255,255,255,.38); background:transparent}
.ep-main > .ep-sec:first-child{padding-top:0}
.ep-main .cta{margin-top:28px}
.ep-p--lead{font-size:18px; color:var(--ink)}
.ep-desc strong{color:var(--ink)}
.ledger--years li{grid-template-columns:96px 1fr} .ledger--years .n{font-size:34px}
.ep-fit{display:grid; grid-template-columns:1fr 1fr; gap:0 40px}
.ep-fit__col h3{font:400 22px/1.1 var(--display); text-transform:uppercase; letter-spacing:-.01em; margin:0; padding:0 0 12px; border-bottom:2px solid var(--ink); color:var(--ink)}
.ep-fit__col--no h3{border-bottom-color:rgba(17,17,17,.3); color:var(--ink-2)}
.ep-fit__col ul{list-style:none; margin:0; padding:0}
.ep-fit__col li{position:relative; padding:14px 0 14px 22px; border-bottom:1px solid rgba(17,17,17,.1); font:400 16px/1.55 var(--body); color:var(--ink)}
.ep-fit__col li::before{content:""; position:absolute; left:0; top:23px; width:8px; height:8px; border-radius:50%; background:var(--green)}
.ep-fit__col--no li{color:var(--ink-2)} .ep-fit__col--no li::before{background:transparent; box-shadow:inset 0 0 0 1.5px rgba(17,17,17,.35)}
.ep-values{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:28px 0}
.ep-values > div{padding-top:16px; border-top:2px solid var(--green)}
.ep-values h3{font:400 22px/1.1 var(--display); text-transform:uppercase; letter-spacing:-.01em; margin:0 0 8px; color:var(--ink)}
.ep-values p{font:400 15.5px/1.6 var(--body); color:var(--ink-2); margin:0}
.ep-topics{list-style:none; margin:0; padding:0}
.ep-topics li{display:grid; grid-template-columns:5fr 7fr; gap:24px; padding:18px 0; border-top:1px solid rgba(17,17,17,.1)}
.ep-topics b{font:400 20px/1.15 var(--display); text-transform:uppercase; letter-spacing:-.01em; color:var(--ink)} .ep-topics b a{color:inherit; text-decoration:none} .ep-topics b a:hover{color:var(--green-deep)}
.ep-topics p{margin:0; font:400 16.5px/1.55 var(--body); color:var(--ink)}
.ep-topics .ep-topics__head{padding:0 0 10px; border-top:0} .ep-topics .ep-topics__head b,.ep-topics .ep-topics__head p{font:500 12px/1.4 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.ep-plats{list-style:none; margin:0; padding:0}
.ep-plat{display:grid; grid-template-columns:48px auto minmax(0,1fr) auto; gap:18px; align-items:center; padding:18px 0; border-top:1px solid rgba(17,17,17,.1); text-decoration:none; color:var(--ink)}
.ep-plats li:first-child .ep-plat{border-top:0; padding-top:0}
.ep-plat .badge{width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:#111; color:#fff; box-shadow:none} .ep-plat .badge svg{width:20px; height:20px}
.ep-plat--yt .badge{background:#FF0033}
.ep-plat b{font:400 24px/1 var(--display); text-transform:uppercase; letter-spacing:-.01em; white-space:nowrap}
.ep-plat p{margin:0; font:400 15.5px/1.55 var(--body); color:var(--ink-2)}
.ep-plat .i-arr{width:22px; height:22px; color:var(--ink); transition:transform .3s var(--out-expo)} a.ep-plat:hover .i-arr{transform:translateX(4px)} a.ep-plat:hover b{color:var(--green-deep)}
.ep-plat.is-off .badge{background:transparent; color:var(--ink-3); box-shadow:inset 0 0 0 1px rgba(17,17,17,.22)} .ep-plat.is-off b,.ep-plat.is-off p{color:var(--ink-3)}
.ep-plat .soon{font:500 11px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); border:1px dashed rgba(17,17,17,.3); border-radius:999px; padding:8px 10px; white-space:nowrap}
.ep-main .faq--pg .h2{margin-bottom:22px}
.ep-main .needs--block{margin-top:20px}
@media (max-width:960px){ .ep-grid--inner{padding-top:44px} .ep-side--inner{margin-top:8px; max-width:none} .ep-side--inner .ep-next{max-width:420px} .ep-values{grid-template-columns:1fr; gap:18px} .ep-fit{grid-template-columns:1fr} .ep-fit__col + .ep-fit__col{margin-top:28px} .ep-topics li{grid-template-columns:1fr; gap:6px} }
@media (max-width:700px){ .ep-plat{grid-template-columns:44px minmax(0,1fr) auto; gap:12px 14px} .ep-plat p{grid-column:2 / -1} .ep-plat .badge{width:44px; height:44px} .ep-side--inner .book .f{grid-template-columns:1fr} }

/* ============================================================ About v3 (2026-09-29): story-led scroll. Its own opening (the statement, the deck,
   the studio strip bleeding into the first chapter), then one numbered chapter per screen: statement on ink, stepped sequence,
   four blocks on green, a large topic grid, a bold yes/no split on ink, the closing statement + band. */
.ab2-open{position:relative; padding:150px 0 0; background:linear-gradient(180deg,#E7EEE8 0,var(--paper) 46%); min-height:0}
.ab2-open .crumbs{margin-bottom:26px}
.ab2-open h1{font:400 clamp(50px,7vw,100px)/.96 var(--display); text-transform:uppercase; letter-spacing:-.025em; color:var(--ink); max-width:15ch; margin:0 0 44px; text-wrap:balance}
.ab2-open__row{display:grid; grid-template-columns:7fr 5fr; gap:48px; align-items:end}
.ab2-open__deck p{font:400 19px/1.6 var(--body); color:var(--ink-2); max-width:56ch; margin:0 0 14px} .ab2-open__deck p:last-child{margin:0}
.ab2-open__cta{justify-content:flex-end; margin:0; gap:14px}
.ab2-open__fig{position:relative; z-index:2; margin:64px 0 -140px; aspect-ratio:21/9; border-radius:24px; overflow:hidden; background:#111; box-shadow:0 60px 120px -56px rgba(0,0,0,.6), 0 0 0 1px rgba(17,17,17,.06)}
.ab2-open__fig img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 45%; filter:grayscale(1) contrast(1.05)}
.ab2-open__fig figcaption{position:absolute; left:18px; bottom:18px; font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(17,17,17,.6); padding:9px 12px; border-radius:999px}
.ab2-ch{padding:var(--sec-band) 0}
#means.ab2-ch{padding-top:calc(var(--sec-band) + 140px)}
.ab2-ch--screen{min-height:min(760px,88vh); display:flex; align-items:center}
.ab2-ch .h2{font-size:clamp(34px,3.6vw,52px); max-width:20ch; margin:0 0 36px; text-wrap:balance}
.ab2-n{color:var(--green); margin-right:.3em}
.ab2-story{max-width:760px}
.ab2-big{font:500 clamp(22px,2.3vw,30px)/1.4 var(--body); color:var(--ink); margin:0 0 26px; text-wrap:pretty}
.ab2-story p:not(.ab2-big){font:400 18px/1.65 var(--body); color:var(--ink-2); margin:0 0 16px; max-width:58ch} .ab2-story p:last-child{margin-bottom:0}
.pg--ink .ab2-big{color:#fff} .pg--ink .ab2-story p:not(.ab2-big){color:rgba(255,255,255,.82)}
.ab2-how{display:grid; grid-template-columns:5fr 7fr; gap:64px; align-items:start}
.ab2-how__label{position:sticky; top:110px} .ab2-how__label .h2{margin:0}
.ab2-steps{list-style:none; margin:0; padding:0}
.ab2-steps li{display:grid; grid-template-columns:96px 1fr; gap:20px; align-items:start; padding:30px 0; border-top:1px solid rgba(17,17,17,.14)} .ab2-steps li:first-child{border-top:0; padding-top:0}
.ab2-steps .num{font:400 56px/1 var(--display); color:var(--green); letter-spacing:-.03em}
.ab2-steps b{display:block; font:400 clamp(22px,2vw,28px)/1.08 var(--display); text-transform:uppercase; letter-spacing:-.01em; color:var(--ink); margin:6px 0 10px; text-wrap:balance}
.ab2-steps p{margin:0; font:400 17px/1.6 var(--body); color:var(--ink-2); max-width:48ch}
.ab2-how .ep-p{margin:32px 0 0; font:400 17px/1.6 var(--body); color:var(--ink-2); max-width:52ch}
.ab2-how .cta{margin-top:28px}
.ab2-get{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:40px 56px}
.ab2-get li{padding-top:22px; border-top:1px solid rgba(255,255,255,.2)}
.ab2-get .num{display:block; font:400 40px/1 var(--display); color:rgba(255,255,255,.45); margin:0 0 14px}
.ab2-get b{display:block; font:400 clamp(24px,2.2vw,30px)/1.08 var(--display); text-transform:uppercase; letter-spacing:-.01em; color:#fff; margin:0 0 10px; text-wrap:balance}
.ab2-get p{margin:0; font:400 16.5px/1.6 var(--body); color:rgba(255,255,255,.82); max-width:40ch}
.ab2-tail{margin:44px 0 0; font:400 18px/1.6 var(--body); color:rgba(255,255,255,.88); max-width:56ch}
.ab2-label{font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 20px}
.ab2-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:36px 48px}
.ab2-grid li{padding-top:20px; border-top:2px solid var(--ink)}
.ab2-grid b{display:block; font:400 clamp(26px,2.4vw,34px)/1.05 var(--display); text-transform:uppercase; letter-spacing:-.015em; color:var(--ink); margin:0 0 12px; text-wrap:balance}
.ab2-grid b a{color:inherit; text-decoration:none} .ab2-grid b a:hover{color:var(--green-deep)}
.ab2-grid p{margin:0; font:400 17px/1.55 var(--body); color:var(--ink-2)}
#topics .cta{margin-top:48px}
.ab2-split{display:grid; grid-template-columns:1fr 1fr; border-radius:28px; overflow:hidden}
.ab2-split > div{padding:44px 44px 48px}
.ab2-split__yes{background:linear-gradient(180deg,#1B4F31 0,#164328 100%)}
.ab2-split__no{background:#1E1E1E}
.ab2-split h3{font:400 clamp(26px,2.4vw,34px)/1.05 var(--display); text-transform:uppercase; letter-spacing:-.01em; color:#fff; margin:0 0 26px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.2)}
.ab2-split ul{list-style:none; margin:0; padding:0}
.ab2-split li{position:relative; padding:14px 0 14px 30px; font:400 17px/1.55 var(--body); color:rgba(255,255,255,.92); border-top:1px solid rgba(255,255,255,.1)} .ab2-split li:first-child{border-top:0; padding-top:0}
.ab2-split li::before{content:""; position:absolute; left:0; top:23px; width:10px; height:10px; border-radius:50%; background:#fff} .ab2-split li:first-child::before{top:9px}
.ab2-split__no li{color:rgba(255,255,255,.72)} .ab2-split__no li::before{background:transparent; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
#prove .ctaband{margin-top:48px}
@media (max-width:1100px){ .ab2-open__row{grid-template-columns:1fr; gap:28px} .ab2-open__cta{justify-content:flex-start} .ab2-how{grid-template-columns:4fr 8fr; gap:40px} .ab2-grid{gap:28px 32px} }
@media (max-width:960px){ .ab2-open__fig{margin:48px 0 -96px; aspect-ratio:16/9} #means.ab2-ch{padding-top:calc(var(--sec-band) + 96px)} .ab2-ch--screen{min-height:0; display:block} .ab2-how{grid-template-columns:1fr; gap:28px} .ab2-how__label{position:static} .ab2-get{grid-template-columns:1fr; gap:28px} .ab2-grid{grid-template-columns:1fr 1fr} .ab2-split{grid-template-columns:1fr} }
@media (max-width:700px){ .ab2-open{padding-top:110px} .ab2-open h1{font-size:clamp(40px,12vw,52px)} .ab2-open__fig{margin:36px 0 -72px; border-radius:18px} #means.ab2-ch{padding-top:calc(var(--sec-band) + 72px)} .ab2-ch .h2{font-size:clamp(30px,8.6vw,38px)} .ab2-steps li{grid-template-columns:64px 1fr; gap:14px} .ab2-steps .num{font-size:40px} .ab2-grid{grid-template-columns:1fr} .ab2-split > div{padding:28px 24px 32px} }
.ab2-open{overflow:visible}   /* the base .hero clips; the studio strip must bleed into chapter 01 */
/* About v3 review: the title took five lines at 15ch/100px; the two buttons stacked in the right column */
.ab2-open h1{font-size:clamp(48px,6.6vw,94px); max-width:20ch}
.ab2-open__row{display:block}
.ab2-open__cta{justify-content:flex-start; margin-top:34px}

/* About v3.1 ("more better"): the statement in the display face + two-column body; byline on the strip; the Episode 1 tile in
   chapter 03; a chapter rail on wide screens; the strip drifts under motion */
.ab2-open__by{position:absolute; right:18px; bottom:18px; display:inline-flex; align-items:center; gap:10px; font:500 13px/1 var(--body); color:#fff; background:rgba(17,17,17,.6); padding:9px 12px 9px 14px; border-radius:999px}
.ab2-open__by img{height:16px; width:auto; filter:brightness(0) invert(1)}
html.motion .ab2-open__fig img{height:112%; margin-top:-6%}
.ab2-story{max-width:none}
.ab2-big{font:400 clamp(34px,4.2vw,58px)/1.04 var(--display); text-transform:uppercase; letter-spacing:-.015em; color:var(--ink); max-width:24ch; margin:0 0 36px; text-wrap:balance}
.ab2-story__body{column-count:2; column-gap:56px; max-width:1000px}
.ab2-story__body p{break-inside:avoid; margin:0 0 16px; font:400 18px/1.65 var(--body); color:var(--ink-2)}
.pg--ink .ab2-story__body p{color:rgba(255,255,255,.82)}
.ab2-get-grid{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:56px; align-items:start}
.ab2-get-grid .ep-next{margin:0; background:#111; border-color:rgba(255,255,255,.1); box-shadow:0 44px 88px -48px rgba(0,0,0,.6)}   /* an ink card on the green band; the green card is for paper */
.ab2-rail{position:fixed; left:calc((100% - var(--wrap)) / 2 - 64px); top:50%; translate:0 -50%; z-index:20; display:none; flex-direction:column; gap:16px; transition:opacity .3s ease}
.ab2-rail a{display:flex; align-items:center; gap:10px; font:400 13px/1 var(--display); letter-spacing:.04em; color:#8A8D89; text-decoration:none; transition:color .3s var(--ease)}
.ab2-rail a::before{content:""; width:18px; height:1px; background:currentColor; transition:width .4s var(--out-expo)}
.ab2-rail a:hover{color:var(--ink)} .ab2-rail a.is-active{color:var(--green)} .ab2-rail a.is-active::before{width:30px}
.ab2-rail.is-hidden{opacity:0; pointer-events:none}
@media (min-width:1400px){ .ab2-rail{display:flex} }
@media (max-width:1100px){ .ab2-get-grid{grid-template-columns:1fr; gap:36px} .ab2-get-grid .ep-next{max-width:420px} }
@media (max-width:960px){ .ab2-story__body{column-count:1} .ab2-big{font-size:clamp(30px,6vw,44px)} }
@media (max-width:700px){ .ab2-big{font-size:clamp(28px,8.4vw,36px)} .ab2-open__by{display:none} }
@media (prefers-reduced-motion:reduce){ .ab2-rail a::before{transition:none} }
.ab2-rail a{padding:8px 0; margin:-8px 0}   /* 29px hit area on the rail numerals */
/* v3.1 review: the figure's cover rule hit the byline's wordmark too (it rendered 800px wide over the strip); the rail only
   where there is real room beside the wrap */
.ab2-open__fig img{width:100%; height:100%}
.ab2-open__fig .ab2-open__by img{width:auto; height:16px; margin:0; object-fit:contain}
.ab2-rail{display:none; left:max(16px, calc((100% - var(--wrap)) / 2 - 72px))}
@media (min-width:1400px){ .ab2-rail{display:none} }
@media (min-width:1520px){ .ab2-rail{display:flex} }
/* the byline wordmark must outrank html.motion .ab2-open__fig img (0,2,2), whose 112% height resolves to the image's intrinsic size inside the auto-height span */
.ab2-open__fig .ab2-open__by img,html.motion .ab2-open__fig .ab2-open__by img{width:auto; height:16px; margin:0; object-fit:contain}

/* ============================================================ About v4 (2026-09-29): the home page, literally. Every object is the home's;
   these rules only fit the About copy into the home's slots. */
.ab4-hero .hero__cta .btn{height:52px; padding:0 26px} .ab4-hero .hero__cta .btn svg{width:18px; height:18px; padding:0; border-radius:0; background:transparent; color:currentColor}
.ab4-means .lead{max-width:26ch}
.feat__head p{margin:0; font:400 16.5px/1.6 var(--body); color:rgba(239,241,238,.74); max-width:44ch}
.ab4-how .epc,.ab4-topics .epc{padding-bottom:26px}
.ab4-how .epc .desc,.ab4-topics .epc .desc{margin-top:4px}
.ab4-topics .chips{margin-bottom:30px}
.ab4-topics .epc .ep__title a{text-decoration:none} .ab4-topics .epc .ep__title a:hover{text-decoration:underline; text-underline-offset:4px}
.ab4-bridge .card--cta{flex-direction:row; align-items:center; gap:36px; min-height:0; padding:30px 34px}
.ab4-bridge .card--cta .cta__logo{margin:0; height:40px} .ab4-bridge .card--cta .big{margin:0; max-width:26ch; font-size:clamp(24px,2.4vw,34px); flex:1}
.ab4-get .ab4-after{margin:32px 0 0 56px; font:400 17px/1.6 var(--body); color:var(--ink-2); max-width:50ch}
.ab4-fig img{object-position:50% 50%; filter:grayscale(1) contrast(1.05)}
.ab4-prove .h2{max-width:14ch}
@media (max-width:960px){ .ab4-get .ab4-after{margin-left:0} .ab4-bridge .card--cta{flex-direction:column; align-items:flex-start; gap:24px} .ab4-bridge .card--cta .big{max-width:none} }
/* About v4 mic geometry (measured: tip = cable + 80px; strip top 1137 / 1096 / 1150 / 1131 at 1440 / 1280 / 1100 / 1024): the tip parks ~35px into the strip, payout 120, labels at 160 */
@media (min-width:961px){ .ab4-hero .strip > div{padding-top:160px} }
@media (min-width:1400px){ .ab4-hero .mic-rig{--cable:1092px} }
@media (min-width:1200px) and (max-width:1399px){ .ab4-hero .mic-rig{--cable:1052px} }
@media (min-width:961px) and (max-width:1199px){ .ab4-hero .mic-rig{--cable:1096px} }
/* About v4 review: two wide buttons in the mic channel (the home has one button + badges) → tighter gap so the right one clears the
   Derrick chip; text cards drop the home's 99px art reserve; the green card's statement set smaller and wider so its row fits five short cards */
.ab4-hero .hero__cta{gap:clamp(24px,9vw,120px)} .ab4-hero .hero__cta .btn{padding:0 22px}
.ab4-how .epc .desc,.ab4-topics .epc .desc{margin-bottom:0}
.ab4-how .card--cta .cta__logo{height:40px; margin:0 0 24px}
.ab4-how .card--cta .big{font-size:clamp(26px,2.2vw,32px); max-width:16ch; margin:0 0 26px}
/* 1200–1299: the chips ride level with the buttons from 1200 up, so the mic channel narrows to 64px there; the cable shortens so the tip stays 25–45px into the strip across 1200–1399 */
@media (min-width:1200px) and (max-width:1299px){ .ab4-hero .hero__cta{gap:64px} }
@media (min-width:1200px) and (max-width:1399px){ .ab4-hero .mic-rig{--cable:1042px} }
/* About v4.1 ("more better and professional"): primary + secondary in the hero; a lighter statement lead; the five points as one
   numbered row with the green call as a full-width bar (the topics band's rhythm); big faint numerals give every card a foot */
.ab4-hero .hero__cta .btn--ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px rgba(17,17,17,.28)}
.ab4-hero .hero__cta .btn--ghost:hover{background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1.5px rgba(17,17,17,.45)}
.ab4-means .lead{font-size:clamp(30px,3.1vw,42px); max-width:26ch}
.ab4-how .epc,.ab4-topics .epc{position:relative; padding:22px 20px 84px}
.epc__big{position:absolute; right:14px; bottom:4px; font:400 80px/1 var(--display); letter-spacing:-.04em; color:rgba(255,255,255,.08); pointer-events:none; transition:color .5s var(--ease)}
.epc:hover .epc__big{color:rgba(32,157,80,.28)}
.ab4-how .epc .ep__title,.ab4-topics .epc .ep__title{font-size:clamp(22px,1.7vw,26px)}
.ab4-how .epc .desc,.ab4-topics .epc .desc{font-size:15px}
.ab4-topics .feat__head .ab4-thead{font:500 12px/1.4 var(--body); letter-spacing:.14em; text-transform:uppercase; color:rgba(239,241,238,.6); max-width:none; align-self:end}
@media (min-width:1200px){
  .ab4-how .eps{grid-template-columns:repeat(5,1fr); gap:16px}
  .ab4-how .ep--cta{grid-column:1/-1}
  .ab4-how .card--cta{flex-direction:row; align-items:center; gap:36px; min-height:0; padding:30px 34px}
  .ab4-how .card--cta .cta__logo{margin:0; height:40px} .ab4-how .card--cta .big{margin:0; max-width:26ch; font-size:clamp(24px,2.4vw,34px); flex:1}
}
/* How an Episode Works: unnumbered (Shoaib, 2026-09-29); the card keeps the ink-band look without the foot reserve */
.ab4-how .epc--plain{padding-bottom:26px}
/* The Topics We Keep Coming Back To: icons, not numbers (from a marked screenshot, 2026-09-29). Each card leads with its topic's
   glyph (Lucide, in the page sprite) in the footer's badge circle: 6% white + hairline, green glyph, filling green on hover as the
   old foot numeral did. Without the numeral the card drops its foot reserve, like the unnumbered How cards. */
.ab4-topics .epc{padding-bottom:26px}
.epc__icon{flex:none; align-self:flex-start; display:grid; place-items:center; width:48px; height:48px; margin-bottom:6px; border-radius:50%; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); color:var(--green); transition:background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease)}
.epc__icon svg{width:22px; height:22px}
.epc:hover .epc__icon,.epc:focus-within .epc__icon{background:var(--green-ui); color:#fff; box-shadow:inset 0 0 0 1px var(--green-ui)}
/* ...and the green call straddles the seam into the next band, as drawn (About: Topics → Who It's For, and How an Episode Works →
   What You Get). It opens that band inside a .feat--ink bridge, so it keeps the ink band's card styles and reveal; the bridge is
   the card's height at every width, so painting #111 over its top 50% puts the seam exactly on the card's centre line. The ink
   band ends ¾ of a band gap under its cards (96 / 72 / 60: one grid gap looked cramped once the call became its own object; it
   is #111 there, so the join is invisible) and the next band's own gradient starts under the card, so neither background steps.
   Keyed on the structure, not the page's class names. Be a Guest (What Happens After You Hit Send → What One Hour Gets You)
   got the same bridge and unnumbered cards on 2026-09-30. */
.feat--ink:has(+ .band > .ab4-bridge:first-child){padding-bottom:calc(var(--sec-band) * .75)}
.band:has(> .ab4-bridge:first-child){padding-top:0}
.feat--ink.ab4-bridge{padding:0; margin-bottom:var(--sec-band); background:linear-gradient(180deg,#111 50%,transparent 50%)}
.ab4-bridge .card--cta{box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 44px 88px -48px rgba(22,67,40,.7)}   /* its shadow now falls on paper: the green-card-on-paper shadow (.ep-card), not the ink band's glow */
/* ...set as a bar (marked screenshot, 2026-09-29): the statement on two balanced lines instead of three (the 26ch measure is
   lifted), the button at the bar's right end, centred on its height. From 960 down the card stacks and keeps its column. */
.ab4-bridge .card--cta .big{max-width:none; text-wrap:balance}
@media (min-width:961px){ .ab4-bridge .card--cta .btn{margin-left:auto; align-self:center} }
/* Who it's for / who it isn't (About #fit, Be a Guest #who): the copy is a two-column table, so it renders as one (variation C
   from who-its-for-variants/, picked 2026-09-30, header icons dropped). It replaces the two-<details> accordion that hid half the
   comparison: each "yes" sits level with the "no" it rules out. On phones each pair stacks under the two labels, with no sideways
   scroll (Hassan's note on the Be a Guest table). The ARIA roles keep table semantics once the phone layout sets display:block. */
.fit-table{width:100%; max-width:1150px; margin:0 auto; border-collapse:collapse; table-layout:fixed}
.fit-table th{text-align:left; vertical-align:bottom; padding:0 32px 18px 0; font:400 clamp(22px,1.9vw,28px)/1.05 var(--display); text-transform:uppercase; letter-spacing:-.01em; color:var(--ink); border-bottom:2px solid var(--ink)}
.fit-table th + th{padding-left:32px; color:var(--ink-2); border-bottom-color:rgba(17,17,17,.3)}
.fit-table td{vertical-align:top; padding:26px 32px 26px 0; border-bottom:1px solid rgba(17,17,17,.12); font:500 18px/1.5 var(--body); color:var(--ink)}
.fit-table td + td{padding-left:32px; border-left:1px solid rgba(17,17,17,.12); font-weight:400; color:var(--ink-2)}
.fit-table td > span{display:grid; grid-template-columns:24px 1fr; gap:14px}
.fit-table tbody tr{transition:background-color .35s var(--ease)} .fit-table tbody tr:hover{background:rgba(17,17,17,.03)}
.fit-ic{display:grid; place-items:center; width:24px; height:24px; margin-top:2px; border-radius:50%}
.fit-ic svg{width:55%; height:55%}
.fit-ic--yes{background:var(--green-ui); color:#fff}
.fit-ic--no{color:var(--ink-3); box-shadow:inset 0 0 0 1.5px rgba(17,17,17,.28)}
@media (max-width:700px){
  .fit-table,.fit-table thead,.fit-table tbody,.fit-table tr,.fit-table th,.fit-table td{display:block; width:auto}
  .fit-table thead tr{display:flex; flex-wrap:wrap; gap:6px 18px; padding-bottom:14px; border-bottom:2px solid var(--ink)}
  .fit-table th,.fit-table th + th{padding:0; border:0; font-size:20px}
  .fit-table tbody tr{padding:14px 0; border-bottom:1px solid rgba(17,17,17,.12)}
  .fit-table td,.fit-table td + td{padding:8px 0; border:0; font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){ .fit-table tbody tr{transition:none} }
/* About hero ("more better", 2026-09-29): the leads on a wider measure and closer together, so the mic's head sits in the button channel, not on the copy */
.ab4-hero .hero__lead{max-width:720px; margin:28px auto 34px}
.ab4-hero .hero__lead + .hero__lead{margin-top:-16px}
.ab4-hero h1 em{display:block}

/* About hero row ("more better", 2026-09-29): a three-column row whose middle column is the mic's channel, so the channel is
   centred on the mic whatever the two calls measure; chips ride level with the row only from 1400 up, where they fit */
.ab4-hero .hero__cta{display:grid; grid-template-columns:1fr 150px 1fr; gap:0; align-items:center; width:100%}
.ab4-hero .hero__cta > :first-child{justify-self:end; grid-column:1}
.ab4-hero .hero__cta > .arrow{grid-column:3; justify-self:start; font-size:16px; padding:14px 0}
@media (min-width:961px){ .ab4-hero .strip > div{padding-top:200px} .ab4-hero .mic-rig{--payout:100px} }
@media (min-width:1200px) and (max-width:1399px){ .ab4-hero .hero__guests{margin-top:40px} }
@media (max-width:960px){ .ab4-hero .hero__cta{grid-template-columns:1fr 110px 1fr} }
@media (max-width:700px){ .ab4-hero .hero__cta{display:flex; flex-direction:column; gap:18px} }
/* About hero cables, from the measured row (mic top = cable - 221, tip = cable + 80): head 8-100px under the lead, tip 25-70px into the strip, never past the labels (strip padding 200, payout 100) */
@media (min-width:1400px){ .ab4-hero .mic-rig{--cable:1101px} }
@media (min-width:1200px) and (max-width:1399px){ .ab4-hero .mic-rig{--cable:1090px} }
@media (min-width:961px) and (max-width:1199px){ .ab4-hero .mic-rig{--cable:1085px} }
@media (min-width:1200px) and (max-width:1399px){ .ab4-hero .mic-rig{--cable:1120px} }   /* 1280 measured 3px short of the strip */
/* About hero v4.3: the primary is the home's Listen Now object (white icon circle + label); one lead at the home's measure */
.ab4-hero .hero__cta .btn{height:56px; padding:0 26px 0 8px; gap:12px}
.ab4-hero .hero__cta .btn svg{width:40px; height:40px; padding:10px; border-radius:50%; background:#fff; color:var(--green-ui); box-sizing:border-box}
.ab4-hero .hero__lead{max-width:640px}
/* v4.3 cables (one lead: the copy block is ~100px shorter): head 8-100px under the lead, tip 34-67px into the strip, labels clear ≥33px at max payout */
@media (min-width:1400px){ .ab4-hero .mic-rig{--cable:1000px} }
@media (min-width:1200px) and (max-width:1399px){ .ab4-hero .mic-rig{--cable:1030px} }
@media (min-width:961px) and (max-width:1199px){ .ab4-hero .mic-rig{--cable:990px} }
/* About: What This Show Is Trying to Prove ("more better", 2026-09-29): the thesis sentence as the big statement, the two guests
   (the home's chips) under it as the proof, the rest as body; the call stays in the home's bar */
.ab4-prove .h2{max-width:14ch; margin-bottom:22px}
.ab4-prove__copy p{max-width:44ch}
.ab4-prove__big{font:400 clamp(32px,3.2vw,46px)/1.04 var(--display) !important; text-transform:uppercase; letter-spacing:-.015em; color:#fff; max-width:17ch !important; margin:30px 0 22px; text-wrap:balance}
.ab4-prove .hero__guests{position:relative; z-index:3; display:flex; justify-content:flex-start; gap:14px; margin:0 0 24px; text-align:left}
.ab4-prove .gchip{background:rgba(255,255,255,.94); border-color:transparent} .ab4-prove .gchip:hover{background:#fff}
.ab4-prove .gchip i{display:block; max-width:22ch}
@media (min-width:1200px){ .ab4-prove .hero__guests{margin-top:0} }
@media (max-width:700px){ .ab4-prove .hero__guests{display:flex; flex-direction:column; align-items:flex-start} .ab4-prove .gchip i{display:none} }
/* About hero, Shoaib 2026-09-29 ("cards on right and left"): the guest chips ride level with the row from 1200 up, as on the
   home (the earlier drop was for a wide second button; the arrow link fits); the strip sits a little lower there so the
   mic's head clears the lead */
@media (min-width:1200px) and (max-width:1399px){ .ab4-hero .hero__guests{margin-top:-63px} .ab4-hero .strip{margin-top:190px} }
/* 1200-1399 geometry with level chips (measured: lead bottom 710/730/752 at 1200/1280/1366): channel = 8 + mic 301 - 30 = 279, so the
   head sits just under the lead and the tip 30px into the strip; the company line goes at 1200-1299 where the row and the chips touch */
@media (min-width:1200px) and (max-width:1399px){ .ab4-hero .strip{margin-top:167px} }
@media (min-width:1300px) and (max-width:1399px){ .ab4-hero .mic-rig{--cable:981px} }
@media (min-width:1200px) and (max-width:1299px){ .ab4-hero .mic-rig{--cable:955px} .ab4-hero .gchip i{display:none} }
/* About hero, Shoaib 2026-09-29 ("this pill need to be in card on left and right"): the two guest pills become the site's green
   episode card, compact: the hub's art tile (numeral, cutout, logo, play) beside episode / guest / company */
.ab4-cards{gap:24px}
.ab4-card{display:grid; grid-template-columns:88px 1fr; gap:14px; align-items:center; width:300px; padding:10px 16px 10px 10px; border-radius:16px; background:linear-gradient(180deg,#1B4F31 0,#164328 100%); color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.08); box-shadow:0 30px 60px -36px rgba(22,67,40,.7), inset 0 1px 0 rgba(255,255,255,.1); transition:transform .3s var(--out-expo), box-shadow .3s var(--ease)}
.ab4-card:hover{transform:translateY(-2px); box-shadow:0 36px 64px -34px rgba(22,67,40,.8), inset 0 1px 0 rgba(255,255,255,.1)}
.ab4-card .eprow__art{width:88px; border-radius:10px}
.ab4-card .eprow__art .num{font-size:34px; left:8px; top:3px}
.ab4-card .eprow__art .cut{width:66%; height:92%}
.ab4-card .eprow__art .logo{height:16px; left:8px; bottom:8px}
.ab4-card .eprow__art .card__play{width:26px; height:26px; right:6px; bottom:6px} .ab4-card .eprow__art .card__play svg{width:10px; height:10px; margin-left:2px}
.ab4-card:hover .eprow__art .cut{transform:translateY(-3px)} .ab4-card:hover .eprow__art .card__play{background:var(--green); color:#fff}
.ab4-card__body{min-width:0}
.ab4-card__body small{display:block; font:500 11px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62); margin:0 0 6px}
.ab4-card__body b{display:block; font:600 15px/1.2 var(--body); color:#fff}
.ab4-card__body i{display:block; font:400 12.5px/1.35 var(--body); font-style:normal; color:rgba(255,255,255,.62); margin-top:3px}
@media (min-width:1200px){ .ab4-hero .strip{margin-top:160px} }          /* the cards are ~25px taller than the pills */
@media (min-width:1200px) and (max-width:1399px){ .ab4-hero .strip{margin-top:197px} }
@media (min-width:1300px) and (max-width:1399px){ .ab4-hero .mic-rig{--cable:1011px} }
@media (min-width:1200px) and (max-width:1299px){ .ab4-card{width:260px; grid-template-columns:72px 1fr; gap:12px} .ab4-card .eprow__art{width:72px} .ab4-card .eprow__art .num{font-size:28px} .ab4-hero .mic-rig{--cable:985px} }
@media (max-width:960px){ .ab4-card{width:260px; grid-template-columns:72px 1fr} .ab4-card .eprow__art{width:72px} .ab4-card__body i{display:block} }
@media (max-width:700px){ .ab4-cards{display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:28px} .ab4-card{width:min(300px,100%)} }
/* hero cards, measured: the button is wider than the arrow, so the LEFT card has the least room (-30px at 254+); cards 254 wide
   from 1300 (tile 80), 224 at 1200-1299 (tile 64, company line off); strip margin and cables re-set for the card heights */
@media (min-width:1300px){ .ab4-card{width:254px; grid-template-columns:80px 1fr; gap:12px; padding:8px 12px 8px 8px} .ab4-card .eprow__art{width:80px} }
@media (min-width:1400px){ .ab4-hero .strip{margin-top:150px} }
@media (min-width:1300px) and (max-width:1399px){ .ab4-hero .strip{margin-top:180px} }
@media (min-width:1200px) and (max-width:1299px){ .ab4-card{width:224px; grid-template-columns:64px 1fr; gap:10px; padding:8px 12px 8px 8px} .ab4-card .eprow__art{width:64px} .ab4-card .eprow__art .num{font-size:24px; top:2px} .ab4-card .eprow__art .logo{height:12px; left:6px; bottom:6px} .ab4-card .eprow__art .card__play{width:22px; height:22px; right:4px; bottom:4px} .ab4-card__body i{display:none} .ab4-hero .strip{margin-top:180px} .ab4-hero .mic-rig{--cable:975px} }
@media (min-width:1200px) and (max-width:1299px){ .ab4-card{width:210px; grid-template-columns:60px 1fr} .ab4-card .eprow__art{width:60px} }   /* 1200 measured 2px from the button */
/* About hero, Shoaib's drawing (2026-09-29): the two episode cards go BIG, out beside the title in the ring space at the far left and
   right of the hero, not in the button row. Same markup; from 1200 up they leave the flow. Width = the room between 4vw and the
   title's edge (title left ≈ .2745vw below 1460, 635px above): clamp(200, 23.45vw − 24, 320). Vertically centred on the title. */
@media (min-width:1200px){
  .ab4-hero .ab4-cards{position:absolute; left:0; right:0; top:310px; margin:0; display:block; pointer-events:none; z-index:3}
  .ab4-hero .ab4-card{pointer-events:auto; position:absolute; top:0; width:clamp(200px,calc(23.45vw - 24px),320px); display:block; padding:0; border-radius:18px; overflow:hidden}
  .ab4-hero .ab4-card:first-child{left:4vw} .ab4-hero .ab4-card:last-child{right:4vw}
  .ab4-hero .ab4-card .eprow__art{display:block; width:100%; aspect-ratio:4/3; border-radius:0}
  .ab4-hero .ab4-card .eprow__art .num{font-size:64px; left:14px; top:6px}
  .ab4-hero .ab4-card .eprow__art .cut{width:58%; height:92%}
  .ab4-hero .ab4-card .eprow__art .logo{height:28px; left:14px; bottom:14px}
  .ab4-hero .ab4-card .eprow__art .card__play{width:44px; height:44px; right:12px; bottom:12px} .ab4-hero .ab4-card .eprow__art .card__play svg{width:16px; height:16px; margin-left:3px}
  .ab4-hero .ab4-card__body{display:block; padding:14px 16px 16px}
  .ab4-hero .ab4-card__body small{margin-bottom:6px} .ab4-hero .ab4-card__body b{font-size:16px} .ab4-hero .ab4-card__body i{display:block; font-size:13px}
  /* the row is now button + arrow only (52px, was 98 with the cards in it): the strip keeps its place under the mic */
  .ab4-hero .strip{margin-top:206px}
}
@media (min-width:1300px){ .ab4-hero .strip{margin-top:222px} }
@media (min-width:1400px){ .ab4-hero .strip{margin-top:192px} }
@media (min-width:1600px){ .ab4-hero .ab4-cards{top:300px} .ab4-hero .ab4-card:first-child{left:max(4vw,calc(50vw - 640px - 40px))} .ab4-hero .ab4-card:last-child{right:max(4vw,calc(50vw - 640px - 40px))} }
/* the hero's .wrap is the positioning context (it is position:relative for the rings): subtract its own left offset so the cards
   sit 4vw from the viewport edge, and start 72px into the wrap = level with the title (the byline line is 60px) */
@media (min-width:1200px){
  .ab4-hero .ab4-cards{top:72px; --wl:max(var(--gutter), (100vw - var(--wrap)) / 2)}
  .ab4-hero .ab4-card:first-child{left:calc(4vw - var(--wl))} .ab4-hero .ab4-card:last-child{right:calc(4vw - var(--wl))}
}
@media (min-width:1600px){ .ab4-hero .ab4-cards{top:80px} .ab4-hero .ab4-card:first-child{left:calc(max(4vw, 50vw - 680px) - var(--wl))} .ab4-hero .ab4-card:last-child{right:calc(max(4vw, 50vw - 680px) - var(--wl))} }

/* ============================================================ Sarah / Listen / Be a Guest on the About treatment (2026-09-29) */
.ab4-card .eprow__art .logo--inv{filter:brightness(0) invert(1); opacity:.95}
.about--canva .h2.pillh--long{line-height:1.4}   /* the long Listen label wraps beside its equaliser on phones */
.ab4-photo{aspect-ratio:4/5; max-width:440px; margin-left:auto} .ab4-photo img{object-position:50% 15%}
@media (max-width:960px){ .ab4-photo{margin-left:0; max-width:420px} }
.ab4-years .epc--year{padding:24px 20px 84px} .ab4-years .epc--year .ep__num{font:400 clamp(30px,2.6vw,38px)/1 var(--display); letter-spacing:-.02em; color:var(--green); text-transform:none}
.ab4-years .epc--year .desc{font-size:16px; margin-top:12px}
.ab4-years .feat__head{display:block} .ab4-years .feat__head p{max-width:56ch; margin-top:16px}
.ab4-before,.ab4-after{font:400 17px/1.6 var(--body); color:var(--ink-2); max-width:50ch} .ab4-before{margin:0 0 24px} .ab4-after{margin:28px 0 0 56px}
.ab4-get .note-panel{margin:28px 0 0 56px; max-width:50ch}
.ab4-plats .eps{grid-template-columns:repeat(4,1fr)}
.epc--plat{padding:24px 20px 26px; color:#fff; text-decoration:none; gap:14px}
.epc--plat .badge{width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:#fff; color:#111; box-shadow:none} .epc--plat .badge svg{width:20px; height:20px}
.epc--plat.is-off .badge{background:transparent; color:rgba(255,255,255,.55); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.epc--plat .ep__title{font-size:clamp(22px,1.8vw,26px)} .epc--plat.is-off .ep__title,.epc--plat.is-off .desc{color:rgba(255,255,255,.55)}
.epc--plat .arrow{color:#fff; margin-top:auto; padding-top:16px; font-size:14.5px; background:none} .epc--plat .arrow .i-arr{margin-left:.35em; vertical-align:-.2em; width:16px; height:16px}
.epc.epc--plat .desc{margin-bottom:0}   /* not the 99px an art-less episode card keeps for its art panel (ot-canva.css): the link or pill follows the text */
.epc--plat .soon{margin-top:auto; align-self:flex-start; font:500 11px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); border:1px dashed rgba(255,255,255,.35); border-radius:999px; padding:8px 10px}
a.epc--plat:hover{border-color:rgba(255,255,255,.34)}
.ab4-plats .feat__head .needs--block{margin:0; align-self:end; background:rgba(255,255,255,.08); color:rgba(255,255,255,.78); border-color:rgba(255,255,255,.28)}
.ab4-means .cta{margin-top:28px}
.ab4-formsec{padding-top:0; margin-top:-8px}
.ab4-formsec__lead{max-width:60ch; margin:0 auto 26px; text-align:center; font:400 18px/1.6 var(--body); color:var(--ink-2)}
.ab4-formsec .booksec{margin:0 auto}
.ab4-faqnote{max-width:1150px; margin:26px auto 0; font:400 17px/1.6 var(--body); color:var(--ink-2)}
@media (max-width:1100px){ .ab4-plats .eps{grid-template-columns:1fr 1fr} }
@media (max-width:700px){ .ab4-plats .eps{grid-template-columns:1fr} .ab4-after,.ab4-get .note-panel{margin-left:0} }
/* Listen and Be a Guest carry THREE-line titles (272px vs About's 368): the copy block is ~95px shorter, so their cables are 95px
   shorter and the flanking cards start 32px higher to stay centred on the title (measured 2026-09-29) */
@media (min-width:1200px){ .ab4-hero--listen .ab4-cards,.ab4-hero--guest .ab4-cards{top:40px} }
@media (min-width:1400px){ .ab4-hero--listen .mic-rig,.ab4-hero--guest .mic-rig{--cable:905px} }
@media (min-width:1300px) and (max-width:1399px){ .ab4-hero--listen .mic-rig,.ab4-hero--guest .mic-rig{--cable:916px} }
@media (min-width:1200px) and (max-width:1299px){ .ab4-hero--listen .mic-rig,.ab4-hero--guest .mic-rig{--cable:890px} }
@media (min-width:961px) and (max-width:1199px){ .ab4-hero--listen .mic-rig,.ab4-hero--guest .mic-rig{--cable:895px} }
/* Be a Guest: the form section must clear the strip (its intro line was riding under the strip's edge); a body paragraph before the big line reads as body */
.ab4-formsec{padding-top:64px; margin-top:0}
.about--canva .reveal > p:not(.lead){font-size:18px; line-height:1.6; color:var(--ink-2); max-width:58ch}
.about--canva .reveal > p + .lead{margin-top:26px}
/* Sarah: the bio photo is 540x675 with the face at the top; show it whole (no crop) at the source ratio */
.ab4-means--sarah .ab4-photo{aspect-ratio:540/675} .ab4-means--sarah .ab4-photo img{object-position:50% 0}
/* Be a Guest: the form section directly under the strip */
.ab4-formsec{padding-top:56px}
.ab4-formsec__lead{margin-bottom:22px}
/* Listen: the home's Listen Now object in the About hero row */
.ab4-hero--listen .hero__cta .btn{height:56px; padding:0 26px 0 8px; gap:12px}
.ab4-hero--listen .hero__cta .btn svg{width:40px; height:40px; padding:10px; border-radius:50%; background:#fff; color:var(--green-ui); box-sizing:border-box}
/* Sarah hero (Shoaib 2026-09-29: no Derrick card; hero "totally changed" → asked → Sarah large beside the copy): the split hero
   with a DEEP-GREEN panel, her cutout large, the name over a scrim at the panel's foot; no mic, rings or strip */
.sh-hero{padding-bottom:0}
.sh-hero .hh__copy h1{max-width:14ch}
.sh-hero .hh__copy .hero__lead{max-width:46ch}
.sh-hero .hh__foot .hero__cta{gap:24px} .sh-hero .hh__foot .arrow{font-size:16px}
.sh-panel{background:linear-gradient(180deg,#1B4F31 0,#164328 100%); min-height:680px; box-shadow:0 60px 120px -56px rgba(22,67,40,.8), inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(255,255,255,.06)}
.sh-panel::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 50% at 50% 28%, rgba(32,157,80,.38), transparent 70%); z-index:0}
.sh-panel .hh-split__cut{height:100%; max-width:none; right:-2%; z-index:1; filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.sh-panel::after{content:""; position:absolute; left:0; right:0; bottom:0; height:40%; background:linear-gradient(180deg,rgba(22,67,40,0),rgba(22,67,40,.94) 72%); z-index:2; pointer-events:none}
.sh-panel .hh-split__pick{z-index:3; max-width:none}
.sh-panel .hh-split__pick .lbl{color:rgba(255,255,255,.7)}
.sh-panel .hh-split__pick h3{font-size:clamp(30px,2.8vw,42px); margin-bottom:8px}
.sh-panel .hh-split__pick .guestline{color:rgba(255,255,255,.75); font-size:15px}
@media (max-width:960px){ .sh-panel{min-height:560px} }
@media (max-width:700px){ .sh-panel{min-height:460px} .sh-panel .hh-split__cut{height:96%} }
/* Sarah hero = the home hero with NO cards (2026-09-29): at 961-1199 the compact cards used to flow under the row and give the mic its
   channel; without them the lead→strip channel was 200px against a 301px mic, so the strip takes the missing 140px here */
@media (min-width:961px) and (max-width:1199px){ .ab4-hero--nocards .strip{margin-top:250px} }
@media (min-width:961px) and (max-width:1199px){ .ab4-hero--nocards .mic-rig{--cable:940px} }   /* 1024 measured 8px from the labels */
/* The shorter stage (2026-09-29, as the home's I.4 in ot-canva.css): the empty band above the fact row drops from 200px to 72px, and
   the mic lands 19px into the strip at every desktop width, 24px clear of the fact row at its lowest while that row is on screen
   (payout 36). The cable follows the headline: the strip rises 1px per title line for every 1px the F.1 headline loses below 1460px
   (About's title is four lines, Listen's and Be a Guest's three), plus a step per band from the lead-to-strip channel (282px from
   1400, 312 at 1300-1399, 296 at 1200-1299, 366 at 961-1199 where the cards flow under the row). --mic-base is the cable from 1400;
   Be a Guest's lead runs a line longer than Listen's. The mic's head stays at or under the lead (0 / 30 / 14 / 84px). */
@media (min-width:961px){
  .ab4-hero{--mic-base:996px; --mic-lines:4; --mic-step:84px}
  .ab4-hero--listen{--mic-base:876px; --mic-lines:3}
  .ab4-hero--guest{--mic-base:904px; --mic-lines:3}
  .ab4-hero .strip > div{padding-top:72px}
  .ab4-hero .mic-rig{--payout:36px; --cable:calc(var(--mic-base) + var(--mic-step) + (min(6.3vw, 92px) - 92px) * var(--mic-lines))}
}
@media (min-width:1200px){ .ab4-hero{--mic-step:14px} }
@media (min-width:1300px){ .ab4-hero{--mic-step:30px} }
@media (min-width:1400px){ .ab4-hero{--mic-step:0px} }
/* Listen without the episode cards (2026-09-29, "remove these from listen page"), as .ab4-hero--nocards. From 1200 the cards sat
   beside the title out of the flow, so nothing moves there. At 961-1199 they flowed under the row and made the mic's channel: the
   strip now drops 96px to the 296px channel of 1200-1299 (same step). On tablets the strip comes up under the mic, so the payout
   shortens 430 → 120px: the mic touches down 10-27px into the strip and stays ≥25px clear of the stacked rows' text (701-960). */
@media (min-width:961px) and (max-width:1199px){ .ab4-hero--nocards .strip{margin-top:206px} .ab4-hero--nocards{--mic-step:14px} }
@media (min-width:701px) and (max-width:960px){ .ab4-hero--nocards .mic-rig{--payout:120px} }
/* Listen (marked screenshot, 2026-09-30): the closing call rises into the ink "Following" band and straddles its seam, as the About
   and Be a Guest bridges do. Its section is exactly the card's height (the bottom padding becomes a margin), so painting #111 over
   its top 50% puts the seam on the card's centre line; the ink band ends ¾ of a band gap under its copy (96 / 72 / 60, as the
   About bridge; half a gap sat too close, marked screenshot 2026-09-30). */
.pg--ink:has(+ .pg--bridge){padding-bottom:calc(var(--sec-band) * .75)}
.pg--bridge{padding:0; margin-bottom:var(--sec-band); background:linear-gradient(180deg,#111 50%,transparent 50%)}
/* ...and the "Following" title sets on three lines, not four (marked screenshot, 2026-09-30): 20ch holds three from 360 to 1920 */
.ab4-follow .split--pg .h2{max-width:20ch}
/* ...and the title's first line starts on the copy's first line (marked screenshot, 2026-09-30): the green rule over the title had
   dropped its cap tops 17px under the copy's at every desktop width (961-1920), so the title, rule and all, rises 17px */
@media (min-width:961px){ .ab4-follow .split--pg .h2{margin-top:-17px} }
/* The bridges' pale hairline (marked screenshot, 30 Sep: About, and the same join on Be a Guest and Listen). Where an ink band
   hands over to a bridge the join lands mid-pixel at a fractional scale (browser zoom 110/125%, phones at 2.625x); the band's
   foot and the bridge's top each cover part of that row and the page's paper shows through between them, up to a third of the
   way to paper, full width either side of the green call. An ink strip 2px either side of the join now paints over both, and
   the call sits above it. Measured after: no pale row at any join on any page, 360-412 at 1.1, 1.25 and 2.625. */
.feat--ink:has(+ .band > .ab4-bridge:first-child)::after,.pg--ink:has(+ .pg--bridge)::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:4px; background:#111; z-index:1; pointer-events:none}
.ab4-bridge .ep--cta{position:relative; z-index:2} .pg--bridge .ctaband{z-index:2}

/* ============================================================ Sarah hero v5 (2026-09-29): rsgonzales.com/sarah-gonzales/ measured and translated.
   Live at 1440: copy column 565px at x144 (eyebrow pill row, H1 60px two lines with the name in green, subhead 22px bold on a 4px
   green rule, body 15.5px, filled + outlined buttons), photo card 472x550 at x777 (radius 20, #FAFAFA) with a name badge over
   its bottom-left and a deep-green block behind bottom-right, then a dark credentials band. Here: Anton/Poppins, the site's green. */
.sg-hero{padding:150px 0 0; background:linear-gradient(180deg,#E7EEE8 0,var(--paper) 46%)}
.sg-hero__grid{display:grid; grid-template-columns:minmax(0,1fr) 472px; gap:72px; align-items:center}
.sg-hero__copy .crumbs{margin-bottom:22px}
.sg-eyebrow{display:inline-flex; align-items:center; gap:14px; padding:5px 18px 5px 5px; border:1px solid rgba(17,17,17,.12); border-radius:999px; background:rgba(255,255,255,.72); margin:0 0 26px; font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.sg-pill{display:inline-flex; align-items:center; gap:8px; padding:9px 14px 9px 12px; border-radius:999px; background:#111; color:#fff; font-weight:600; letter-spacing:.12em}
.sg-pill i{width:8px; height:8px; border-radius:50%; background:var(--green)}
.sg-roles{display:inline-flex; align-items:center; gap:12px} .sg-rdiv{width:1px; height:14px; background:rgba(17,17,17,.22)}
.sg-hero h1{font:400 clamp(44px,4.9vw,68px)/.98 var(--display); text-transform:uppercase; letter-spacing:-.02em; color:var(--ink); margin:0 0 24px; max-width:14ch; text-wrap:balance}
.sg-hero h1 em{display:block; font-style:normal; color:var(--green)}
.sg-sub{font:600 20px/1.45 var(--body); color:var(--ink); margin:0 0 18px; padding-left:18px; border-left:4px solid var(--green); max-width:30ch}
.sg-body{font:400 16px/1.65 var(--body); color:var(--ink-2); max-width:52ch; margin:0 0 30px}
.sg-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0}
.sg-row .btn--ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px rgba(17,17,17,.28)} .sg-row .btn--ghost:hover{background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1.5px rgba(17,17,17,.45)}
.sg-hero__ph{position:relative; width:472px; max-width:100%; justify-self:end; padding:0 0 44px}
.sg-block{position:absolute; left:56px; right:-48px; top:52px; bottom:0; border-radius:20px; background:linear-gradient(180deg,#1B4F31 0,#164328 100%); z-index:0}
.sg-photo{position:relative; z-index:1; margin:0; aspect-ratio:760/885; border-radius:20px; overflow:hidden; background:#FAFAFA; box-shadow:0 44px 88px -48px rgba(17,17,17,.45)}
.sg-photo img{display:block; width:100%; height:100%; object-fit:cover}
.sg-badge{position:absolute; left:-28px; bottom:80px; z-index:2; background:#fff; border-radius:14px; padding:14px 20px; box-shadow:0 20px 40px -20px rgba(17,17,17,.35)}
.sg-badge b{display:block; font:600 16px/1.2 var(--body); color:var(--ink)} .sg-badge small{display:block; font:500 12px/1.3 var(--body); color:var(--green-deep); margin-top:4px}
.sg-facts{padding:48px 0 0; background:var(--paper)}
.sg-strip{display:grid; grid-template-columns:repeat(3,1fr); background:linear-gradient(180deg,#1B4F31 0,#164328 100%); color:#fff; border-radius:22px; padding:0 36px; border:1px solid rgba(255,255,255,.08); box-shadow:0 40px 80px -48px rgba(22,67,40,.7), inset 0 1px 0 rgba(255,255,255,.1)}
.sg-strip > div{padding:26px 28px 26px 0; border-left:1px solid rgba(255,255,255,.12)} .sg-strip > div:first-child{border-left:0} .sg-strip > div + div{padding-left:28px}
.sg-strip small{display:block; font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:10px}
.sg-strip b{font:500 16px/1.45 var(--body); color:#fff}
@media (max-width:1100px){ .sg-hero__grid{grid-template-columns:minmax(0,1fr) 400px; gap:40px} .sg-hero__ph{width:400px} .sg-hero h1{font-size:clamp(40px,4.4vw,56px)} }
@media (max-width:960px){ .sg-hero__grid{grid-template-columns:1fr; gap:40px} .sg-hero__ph{justify-self:start; width:min(440px,100%); margin-top:8px} .sg-block{right:-16px} .sg-badge{left:16px} .sg-strip{grid-template-columns:1fr; padding:0 24px} .sg-strip > div{border-left:0; border-top:1px solid rgba(255,255,255,.12); padding:20px 0} .sg-strip > div:first-child{border-top:0} }
@media (max-width:700px){ .sg-hero{padding-top:110px} .sg-hero h1{font-size:clamp(38px,11vw,48px); max-width:none} .sg-eyebrow{flex-wrap:wrap; border-radius:22px; gap:10px} .sg-roles{flex-wrap:wrap; gap:8px} .sg-row{flex-direction:column; align-items:stretch} .sg-row .btn{justify-content:center} .sg-hero__ph{padding-bottom:36px} }
.ab4-means--sarah .ab4-photo--studio{aspect-ratio:670/893} .ab4-means--sarah .ab4-photo--studio img{object-position:50% 20%}
@media (max-width:960px){ .sg-strip > div + div{padding-left:0} }   /* the desktop cell indent outranked the phone reset */

/* ============================================================ Sarah page body v6 (2026-09-29): the live rsgonzales.com Sarah page sections in the podcast brand.
   Eyebrow = green dot + small caps (the live one; since 30 Sep the site's equaliser eyebrow), H2 48px without the site rule, white/ink alternation, one dark card per story. */
.sg2-sec{padding:var(--sec-band) 0}
.sg2-eb{display:flex; align-items:center; gap:12px; font:600 12px/1.3 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--ink); margin:0 0 18px}   /* the site eyebrow (.eq--eb, ot-canva.css) in place of the green dot, 30 Sep */
.sg2-eb--dark{color:rgba(255,255,255,.86)} .sg2-eb--c{justify-content:center}
main .h2.sg2-h2::before{display:none}
.sg2-h2{font-size:clamp(34px,3.4vw,48px); max-width:22ch; margin:0 0 36px}
.sg2-h2--md{font-size:clamp(30px,2.8vw,38px); margin-bottom:24px}
.sg2-h2--wide{max-width:none}   /* full-width section title: balances onto two lines */
.sg2-h2--mid{max-width:30ch}   /* a shorter title that would run on one line at full width: two balanced lines instead */
.sg2-hl{font-style:normal; color:var(--green)}
/* 1. the postings map card */
.sg2-mapcard{background:#0F1512; color:#fff; border-radius:22px; overflow:hidden; box-shadow:0 60px 120px -56px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06)}
.sg2-mapcard__head{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:22px 32px; border-bottom:1px solid rgba(255,255,255,.08)}
.sg2-big{display:flex; align-items:center; gap:14px} .sg2-big b{font:400 56px/1 var(--display); color:var(--green); letter-spacing:-.03em} .sg2-big span{font:600 14px/1.3 var(--body); color:#fff}
.sg2-legend{list-style:none; margin:0; padding:0; display:flex; gap:28px; flex-wrap:wrap; font:600 11px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72)}
.sg2-legend li{display:flex; align-items:center; gap:10px} .sg2-legend i{width:10px; height:10px; border-radius:50%; background:var(--green)} .sg2-legend i.now{border-radius:3px; background:#5FD08A}
.sg2-stage{position:relative; background:radial-gradient(70% 90% at 50% 40%, #16261C 0, #0B140F 70%)}
.sg2-svg{display:block; width:100%; height:auto}
.sg2-svg .svr-land{fill:#213D2C} .sg2-svg .svr-us{fill:var(--green); opacity:.85} .sg2-svg .svr-route{fill:none; stroke:rgba(255,255,255,.45); stroke-width:1.4; stroke-dasharray:5 6}
.sg2-svg .svr-pin{fill:#fff} .sg2-svg .svr-halo{fill:var(--green); opacity:.35} .sg2-svg .svr-now{fill:#fff} .sg2-svg .svr-nowhalo{fill:#5FD08A; opacity:.45}
.sg2-svg rect{fill:none}
html.motion .sg2-svg .svr-halo,html.motion .sg2-svg .svr-nowhalo{transform-box:fill-box; transform-origin:center; animation:sg2-pulse 3.2s ease-in-out infinite}
@keyframes sg2-pulse{0%,100%{transform:scale(1); opacity:.35} 50%{transform:scale(1.5); opacity:.12}}
.sg2-lb{position:absolute; translate:-50% 0; white-space:nowrap; font:600 10.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(11,20,15,.85); border:1px solid rgba(255,255,255,.14); padding:7px 10px; border-radius:999px; pointer-events:none}
.sg2-lb.up{margin-top:-38px} .sg2-lb.dn{margin-top:16px} .sg2-lb.now{background:#fff; color:var(--green-deep); border-color:#fff}
.sg2-mapcard__foot{display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid rgba(255,255,255,.08)}
.sg2-drop{padding:32px 36px 36px 32px; border-right:1px solid rgba(255,255,255,.08)}
.sg2-drop p{font:400 15.5px/1.7 var(--body); color:rgba(255,255,255,.82); margin:0 0 14px} .sg2-drop p:last-child{margin:0}
.sg2-drop p:first-child::first-letter{font:400 54px/.8 var(--display); color:var(--green); float:left; margin:6px 10px 0 0}
.sg2-quote{margin:0; padding:30px 36px 32px; position:relative}
.sg2-quote .q{display:block; height:20px; font:400 64px/.6 var(--display); color:var(--green); margin:0 0 6px}   /* the glyph fills only the top of its line box; cap the box so the gap under the mark stays tight */
.sg2-quote p{font:600 clamp(20px,1.7vw,24px)/1.35 var(--body); color:#fff; margin:0 0 18px}
.sg2-quote footer{display:flex; align-items:center; gap:14px}
.sg2-quote footer img{width:56px; height:56px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px var(--green)}
.sg2-quote footer b{display:block; font:600 15px/1.2 var(--body); color:#fff} .sg2-quote footer small{display:block; font:600 10.5px/1.4 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin-top:3px}
/* 2. the company: photo beside copy, a statement, three cells */
.sg2-co__grid{display:grid; grid-template-columns:5fr 7fr; gap:64px; align-items:center}
.sg2-co__ph{position:relative; margin:0; border-radius:22px; overflow:hidden; padding:60px 20px 24px; background:linear-gradient(180deg,#1B4F31 0,#164328 100%); box-shadow:0 44px 88px -48px rgba(17,17,17,.5)}   /* transparent cut-out: shown whole, the tag chip sits in the top padding */
.sg2-co__ph img{display:block; width:100%; height:auto}
.sg2-co__tag{position:absolute; left:16px; top:16px; z-index:1; font:600 10.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); background:#fff; padding:9px 12px; border-radius:999px}
.sg2-co__grid p:not(.sg2-eb){font:400 16.5px/1.65 var(--body); color:var(--ink-2); margin:0 0 16px} .sg2-co__grid p strong{color:var(--ink)}   /* :not() so the eyebrow keeps its 12px caps */
.sg2-cells{display:grid; grid-template-columns:repeat(3,1fr); margin-top:40px; border-top:1px solid rgba(17,17,17,.12); border-bottom:1px solid rgba(17,17,17,.12)}
.sg2-cells > div{padding:28px 28px 28px 0; border-left:1px solid rgba(17,17,17,.12)} .sg2-cells > div:first-child{border-left:0} .sg2-cells > div + div{padding-left:28px}
.sg2-cells small{display:block; font:600 11px/1.4 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--green-deep); margin:0 0 10px}
.sg2-cells b{display:block; font:600 17px/1.35 var(--body); color:var(--ink); margin:0 0 8px} .sg2-cells p{font:400 15px/1.55 var(--body); color:var(--ink-3); margin:0}
.sg2-cells--ask p{font-size:16px; color:var(--ink-2)}
/* 3. why HVAC: photos, mission card, values */
.sg2-why__head{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end; margin:0 0 36px} .sg2-why__head .sg2-h2{margin:0}   /* the opening line sits beside the title, as in .sg2-inside__head */
.sg2-why__lead{font:400 16.5px/1.65 var(--body); color:var(--ink-2); margin:0; padding-left:32px; border-left:1px solid rgba(17,17,17,.12); text-wrap:pretty}
@media (max-width:960px){ .sg2-why__head{grid-template-columns:1fr; gap:20px} .sg2-why__lead{padding-left:0; border-left:0} }
.sg2-why__grid{display:grid; grid-template-columns:5fr 7fr; gap:56px; align-items:start}
.sg2-photos{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.sg2-photos figure{position:relative; margin:0; aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:#111}   /* the crew photos are 4:3: square tiles cut people off the ends of a team line-up */
.sg2-photos img{display:block; width:100%; height:100%; object-fit:cover}
@media (min-width:961px){ .sg2-photos{align-self:stretch; grid-template-rows:minmax(180px,1fr) auto} .sg2-photos figure:nth-child(-n+2){aspect-ratio:auto} .sg2-photos figure:nth-child(-n+2) img{position:absolute; inset:0} }   /* the grid runs the full height of the copy: the top row takes the extra, the 4:3 crew shots below stay uncropped */
.sg2-why__copy > p{font:400 16.5px/1.65 var(--body); color:var(--ink-2); margin:0 0 16px}
.sg2-mission{display:grid; grid-template-columns:48px 1fr; gap:20px; align-items:start; margin:24px 0; padding:28px 30px; border-radius:16px; background:linear-gradient(180deg,#1B4F31 0,#164328 100%); color:#fff; box-shadow:0 40px 80px -48px rgba(22,67,40,.7)}
.sg2-mission .ico{width:48px; height:48px; border-radius:12px; background:rgba(255,255,255,.12); display:grid; place-items:center; color:#fff} .sg2-mission .ico svg{width:24px; height:24px}
.sg2-mission p{font:600 clamp(18px,1.6vw,22px)/1.4 var(--body); color:#fff; margin:0}
.sg2-why__copy > p.sg2-why__intro{font-weight:600; color:var(--ink); margin-bottom:12px}
.sg2-checks{list-style:none; margin:0 0 20px; padding:18px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; border-top:1px solid rgba(17,17,17,.12)}
.sg2-checks b{display:flex; align-items:center; gap:10px; font:600 15px/1.2 var(--body); color:var(--ink); margin:0 0 8px}
.sg2-checks b i{width:22px; height:22px; border-radius:6px; background:rgba(32,157,80,.14); position:relative; flex:none} .sg2-checks b i::after{content:""; position:absolute; left:7px; top:4px; width:5px; height:9px; border:solid var(--green-deep); border-width:0 2px 2px 0; transform:rotate(45deg)}
.sg2-checks p{font:400 14px/1.55 var(--body); color:var(--ink-3); margin:0}
.sg2-why__copy > p.sg2-why__close{font-weight:600; color:var(--ink); padding-top:16px; border-top:1px solid rgba(17,17,17,.12); margin-bottom:0}
/* 4. inside the trade: dark, the card */
.sg2-inside__head{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:40px}
.sg2-inside .sg2-h2{margin-bottom:0; color:#fff}
.sg2-inside__lead{font:400 16.5px/1.65 var(--body); color:rgba(255,255,255,.82); margin:0; padding-left:32px; border-left:1px solid rgba(255,255,255,.12)} .sg2-inside__lead a{color:#fff}
.sg2-dcard{display:grid; grid-template-columns:4fr 8fr; background:#151515; border-radius:22px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 60px 120px -56px rgba(0,0,0,.7)}
.sg2-dcard__ph{position:relative; margin:0; min-height:420px; overflow:hidden; background:radial-gradient(70% 60% at 50% 38%,#2e2e2e 0,#141414 100%)}
.sg2-dcard__ph img{position:absolute; top:4%; left:47%; width:auto; max-width:none; height:200%; transform:translateX(-38%)}   /* the B&W cut-out, as on his episode pages: head room above, shoulders and crossed arms below; his head sits 38% across the file, so that point is pinned just left of centre */
.sg2-dcard__body{padding:40px 40px 32px}
.sg2-rule{display:block; width:44px; height:3px; border-radius:2px; background:var(--green); margin:0 0 20px}
.sg2-dcard__body h3{font:600 clamp(22px,2vw,28px)/1.25 var(--body); color:#fff; margin:0 0 24px; max-width:22ch}
.sg2-rows{margin:0} .sg2-rows > div{display:grid; grid-template-columns:130px 1fr; gap:20px; padding:16px 0; border-top:1px solid rgba(255,255,255,.1)}
.sg2-rows dt{font:600 11px/1.6 var(--body); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); margin:0}
.sg2-rows dd{font:400 15.5px/1.6 var(--body); color:rgba(255,255,255,.85); margin:0} .sg2-rows dd a{color:#fff; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.4)}
.sg2-rows > div.is-on{background:rgba(32,157,80,.12); margin:0 -40px -32px; padding:18px 40px 22px; border-left:3px solid var(--green)} .sg2-rows > div.is-on dt{color:var(--green)} .sg2-rows > div.is-on dd a{text-decoration:none; font-weight:600}
.sg2-dcard__bar{grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; padding:24px 40px; background:linear-gradient(180deg,#1B4F31 0,#164328 100%)}
.sg2-dcard__bar p{margin:0; font:400 16px/1.55 var(--body); color:rgba(255,255,255,.88); max-width:60ch} .sg2-dcard__bar strong{color:#fff; font-weight:700}
.sg2-dcard__bar .btn--paper{background:#fff; color:var(--green-deep)} .sg2-dcard__bar .btn--paper:hover{background:#EFF1EE; color:var(--green-deep)}
/* 6. the closing */
.sg2-close{text-align:center; padding:var(--sec-band) 0}
.sg2-close__h2{color:#fff; font-size:clamp(34px,3.9vw,56px); max-width:26ch; margin:0 auto 22px}   /* 26ch: three balanced lines from 768 up (team, 30 Sep: "three lines rather than 4"; 22ch made four) */
.sg2-close__p{font:400 18px/1.6 var(--body); color:rgba(255,255,255,.82); max-width:56ch; margin:0 auto 32px}
.sg2-close__row{justify-content:center}
.sg2-close__row .btn--ghost-w{background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)} .sg2-close__row .btn--ghost-w:hover{background:rgba(255,255,255,.1); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
@media (max-width:1100px){ .sg2-co__grid,.sg2-why__grid{gap:40px} .sg2-dcard{grid-template-columns:1fr 1fr} }
@media (max-width:960px){ .sg2-mapcard__foot{grid-template-columns:1fr} .sg2-drop{border-right:0; border-bottom:1px solid rgba(255,255,255,.08)} .sg2-co__grid,.sg2-why__grid,.sg2-inside__head{grid-template-columns:1fr} .sg2-co__ph{max-width:440px} .sg2-inside__lead{padding-left:0; border-left:0} .sg2-cells{grid-template-columns:1fr} .sg2-cells > div{border-left:0; border-top:1px solid rgba(17,17,17,.12); padding:20px 0} .sg2-cells > div:first-child{border-top:0} .sg2-cells > div + div{padding-left:0} .sg2-checks{grid-template-columns:1fr} .sg2-dcard{grid-template-columns:1fr} .sg2-dcard__ph{min-height:0; aspect-ratio:1} .sg2-lb{font-size:9px; padding:5px 8px} .sg2-lb.up{margin-top:-30px} .sg2-lb.dn{margin-top:12px} }
@media (max-width:700px){ .sg2-mapcard__head{padding:18px 20px} .sg2-big b{font-size:44px} .sg2-drop,.sg2-quote{padding:24px 20px} .sg2-dcard__body{padding:28px 22px 24px} .sg2-rows > div{grid-template-columns:1fr; gap:6px} .sg2-rows > div.is-on{margin:0 -22px -24px; padding:16px 22px 20px} .sg2-dcard__bar{padding:20px 22px} .sg2-lb{display:none} .sg2-close__row{flex-direction:column; align-items:stretch} .sg2-close__row .btn{justify-content:center} }
/* Sarah body review: the year paragraphs keep their bold year; the company grid aligns to the top (a 4:5 photo beside three short
   paragraphs left 160px of dead paper above the photo when centred) */
.sg2-co__grid{align-items:start} .sg2-co__grid > div{padding-top:24px} .sg2-co__ph{align-self:center}   /* the card centres on the text column */
.sg2-co__grid p strong{color:var(--ink); font-weight:700}
.sg2-co__grid > div > p:not(.sg2-eb){max-width:64ch; text-wrap:pretty}   /* an even right edge instead of the full column ragging out */

/* ============================================================ About v4.5 (2026-09-30): "What This Show Is Trying to Prove" was two
   plain paragraphs beside the heading. The copy is an argument in two halves, so the section now shows it that way. Words are
   verbatim and nothing is new; only the site's own objects are used. (1) The heading sits beside the claim, as before, and a green
   hairline is drawn through "the independents lose", the conclusion the show argues against. (2) The deep-green panel (the
   site's card surface, with the hero's sound rings inside it) carries the answer: the statement on the left, and on the right its
   three proofs as a ledger. Each ledger row is a topic-card icon circle that lights up as the row rises in. */
.ab5-prove{padding-top:0}   /* the Fit section above already ends on 170px of paper; its 128 on top of that left a 298px gap */
.ab5-prove .ab5-prove__head{align-items:end}
.ab5-prove__claim p{font-size:20px; line-height:1.6; color:var(--ink-2); max-width:50ch}
.ab5-strike{color:var(--ink); background:linear-gradient(var(--green),var(--green)) 0 55%/100% 3px no-repeat; transition:background-size 1.2s var(--out-expo) .45s}
html.motion .ab5-prove__claim:not(.is-in) .ab5-strike{background-size:0 3px}

.ab5-panel{position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:7fr 5fr; gap:72px; align-items:center; margin-top:64px; padding:64px 64px 64px 64px; border-radius:28px; background:linear-gradient(180deg,#1B4F31 0,#164328 100%); color:#fff; border:1px solid rgba(255,255,255,.08); box-shadow:0 44px 88px -48px rgba(22,67,40,.7), inset 0 1px 0 rgba(255,255,255,.1)}
.ab5-panel::after{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(80% 90% at 0 0, rgba(255,255,255,.1), transparent 60%); pointer-events:none}
.ab5-panel > :not(svg){position:relative; z-index:1}
.ab5-rings{top:50%; right:-340px; left:auto; width:780px; translate:0 -50%; color:#fff; opacity:.55; z-index:-1}
.ab5-rings .dot{display:none}
html.motion .ab5-rings{animation:ot-breathe 8s ease-in-out infinite alternate}
.ab5-panel__big{margin:0; font:400 clamp(38px,3.9vw,56px)/1 var(--display); text-transform:uppercase; letter-spacing:-.015em; color:#fff; max-width:21ch; text-wrap:balance}
.ab5-panel__lead{margin:28px 0 0; font:400 17px/1.6 var(--body); color:rgba(255,255,255,.8); max-width:38ch}
.ab5-panel__lead .i-arr{display:inline-block; width:18px; height:18px; margin-left:.45em; vertical-align:-.22em; color:var(--green)}

.ab5-ledger{margin:0; padding:0; list-style:none; border-top:1px solid rgba(255,255,255,.16)}
.ab5-ledger li{display:flex; align-items:center; gap:20px; padding:22px 0; border-bottom:1px solid rgba(255,255,255,.16)}
.ab5-ledger .epc__icon{margin:0; align-self:center; width:52px; height:52px; background:var(--green); color:#fff; box-shadow:inset 0 0 0 1px var(--green), 0 10px 24px -12px rgba(0,0,0,.5)}
.ab5-ledger .epc__icon svg{width:22px; height:22px}
.ab5-ledger b{font:400 clamp(24px,2.1vw,30px)/1.05 var(--display); text-transform:uppercase; letter-spacing:-.005em; color:#fff}
@media (prefers-reduced-motion:no-preference){
  .ab5-ledger li{transition:opacity .9s var(--out-expo), transform 1.1s var(--out-expo)}
  .ab5-ledger .epc__icon{transition:background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease)}
  .ab5-ledger li:nth-child(1),.ab5-ledger li:nth-child(1) .epc__icon{transition-delay:.3s}
  .ab5-ledger li:nth-child(2),.ab5-ledger li:nth-child(2) .epc__icon{transition-delay:.45s}
  .ab5-ledger li:nth-child(3),.ab5-ledger li:nth-child(3) .epc__icon{transition-delay:.6s}
  html.motion .ab5-panel:not(.is-in) .ab5-ledger li{opacity:0; transform:translateX(24px)}
  html.motion .ab5-panel:not(.is-in) .ab5-ledger .epc__icon{background:rgba(255,255,255,.06); color:var(--green); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
}

@media (max-width:1199px){ .ab5-panel{gap:48px; padding:52px} .ab5-rings{right:-380px} }
@media (max-width:960px){
  .ab5-prove .ab5-prove__head{align-items:start}
  .ab5-panel{grid-template-columns:1fr; gap:36px; margin-top:48px; padding:44px 36px}
  .ab5-panel__big{max-width:18ch}
  .ab5-panel__lead .i-arr{rotate:90deg}
  .ab5-rings{top:auto; bottom:-360px; right:-300px; translate:none}
}
@media (max-width:700px){
  .ab5-prove__claim p{font-size:18px}
  .ab5-panel{margin-top:40px; padding:32px 22px; border-radius:22px; gap:28px}
  .ab5-panel__big{font-size:clamp(30px,8.4vw,38px)}
  .ab5-panel__lead{margin-top:20px; font-size:16px}
  .ab5-ledger li{gap:16px; padding:18px 0}
  .ab5-ledger .epc__icon{width:44px; height:44px} .ab5-ledger .epc__icon svg{width:20px; height:20px}
  .ab5-ledger b{font-size:24px}
  .ab5-rings{width:560px; bottom:-300px; right:-280px}
}
/* Sarah §2 timeline: the three plain cells became a deep-green card with one spine. 2017 (white node) and 2022 (green check)
   sit on the ends of a single line; "While the business was already running" is the live pill in the middle of it, and the four
   skills from the sentence are chips (the commas/"and" stay in the DOM for screen readers). The line draws in on reveal. */
.sg2-vh{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.sg2-tl{--tl-hi:#5FD08A; list-style:none; margin:56px 0 0; padding:44px 48px 46px; display:grid; grid-template-columns:1fr 1.35fr 1fr; position:relative; overflow:hidden; isolation:isolate; border-radius:22px; color:#fff;
  background:radial-gradient(60% 120% at 0% 0%, rgba(95,208,138,.12) 0, transparent 60%), radial-gradient(50% 110% at 100% 100%, rgba(0,0,0,.18) 0, transparent 70%), linear-gradient(180deg,#1B4F31 0,#164328 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 44px 88px -48px rgba(17,17,17,.5)}
.sg2-tl__step{margin:0; min-width:0}
.sg2-tl__mark{display:flex; align-items:center; height:64px; margin:0 0 30px}
.sg2-tl__yr{flex:none; font:400 clamp(52px,5vw,68px)/1 var(--display); letter-spacing:-.01em; color:#fff; margin-right:20px}
.sg2-tl__step--end .sg2-tl__yr{color:var(--tl-hi); margin:0 0 0 20px}
.sg2-tl__seg{flex:1; height:2px; position:relative; background:rgba(255,255,255,.14); border-radius:2px}
.sg2-tl__seg::after{content:""; position:absolute; inset:0; border-radius:inherit; background:var(--tl-hi); transform-origin:left center}
.sg2-tl__node{flex:none; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 0 0 6px rgba(255,255,255,.12)}
.sg2-tl__node--done{width:34px; height:34px; display:grid; place-items:center; background:var(--green); color:#fff; box-shadow:0 0 0 7px rgba(95,208,138,.16), 0 0 28px rgba(95,208,138,.4)}
.sg2-tl__node--done svg{width:17px; height:17px}
.sg2-tl__pill{flex:none; display:inline-flex; align-items:center; gap:10px; max-width:calc(100% - 40px); padding:10px 16px 10px 13px; border-radius:999px; background:rgba(8,28,17,.55); box-shadow:inset 0 0 0 1px rgba(95,208,138,.35); font:600 10.5px/1.3 var(--body); letter-spacing:.14em; text-transform:uppercase; color:#fff}
.sg2-tl__live{flex:none; width:8px; height:8px; border-radius:50%; background:var(--tl-hi); position:relative}
.sg2-tl__live::after{content:""; position:absolute; inset:0; border-radius:50%; background:var(--tl-hi); opacity:0}
.sg2-tl__step > :not(.sg2-tl__mark){margin-left:0; margin-right:0}
.sg2-tl__step--start > :not(.sg2-tl__mark){padding-right:40px}
.sg2-tl__step--mid{text-align:center} .sg2-tl__step--mid > :not(.sg2-tl__mark){padding:0 28px}
.sg2-tl__step--end{text-align:right} .sg2-tl__step--end > :not(.sg2-tl__mark){padding-left:40px}
.sg2-tl .sg2-tl__t{font:600 19px/1.4 var(--body); color:#fff; margin:0 0 10px; text-wrap:balance}
.sg2-tl p:not(.sg2-tl__t){font:400 15px/1.6 var(--body); color:rgba(255,255,255,.72); margin:0; text-wrap:pretty}
.sg2-tl__lead{display:block; margin:0 0 16px}
.sg2-tl__skills{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.sg2-tl__skill{display:inline-flex; align-items:center; gap:8px; padding:9px 15px 9px 11px; border-radius:999px; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); font:500 14px/1 var(--body); color:#fff; white-space:nowrap}
.sg2-tl__skill svg{width:16px; height:16px; flex:none; color:var(--tl-hi)}
.sg2-tl__skill > span{display:inline-block} .sg2-tl__skill > span::first-letter{text-transform:uppercase}
/* motion (only when ot.js granted html.motion): the spine draws left to right, the pill and the 2022 check land as it arrives */
html.motion .sg2-tl__seg::after{transform:scaleX(0); transition:transform .55s cubic-bezier(.65,0,.35,1)}
html.motion .sg2-tl__pill,html.motion .sg2-tl__node--done,html.motion .sg2-tl__step--end .sg2-tl__yr{opacity:0; transform:scale(.9); transition:opacity .4s var(--ease), transform .5s cubic-bezier(.2,.9,.3,1.2)}
html.motion .sg2-tl__skill{opacity:0; transform:translateY(6px); transition:opacity .4s var(--ease), transform .4s var(--ease)}
html.motion .sg2-tl.is-in .sg2-tl__seg::after{transform:none}
html.motion .sg2-tl.is-in .sg2-tl__step--start .sg2-tl__seg::after{transition-delay:.25s}
html.motion .sg2-tl.is-in .sg2-tl__step--mid .sg2-tl__seg:first-child::after{transition-delay:.8s}
html.motion .sg2-tl.is-in .sg2-tl__step--mid .sg2-tl__seg:last-child::after{transition-delay:1.4s}
html.motion .sg2-tl.is-in .sg2-tl__step--end .sg2-tl__seg::after{transition-delay:1.95s}
html.motion .sg2-tl.is-in .sg2-tl__pill{opacity:1; transform:none; transition-delay:1.25s}
html.motion .sg2-tl.is-in .sg2-tl__skill{opacity:1; transform:none}
html.motion .sg2-tl.is-in .sg2-tl__skill:nth-child(1){transition-delay:1.35s} html.motion .sg2-tl.is-in .sg2-tl__skill:nth-child(3){transition-delay:1.43s}
html.motion .sg2-tl.is-in .sg2-tl__skill:nth-child(5){transition-delay:1.51s} html.motion .sg2-tl.is-in .sg2-tl__skill:nth-child(7){transition-delay:1.59s}
html.motion .sg2-tl.is-in .sg2-tl__node--done,html.motion .sg2-tl.is-in .sg2-tl__step--end .sg2-tl__yr{opacity:1; transform:none; transition-delay:2.45s}
html.motion .sg2-tl.is-in .sg2-tl__live::after{animation:sg2-live 2.4s ease-out 2.8s infinite}
@keyframes sg2-live{0%{transform:scale(1); opacity:.55} 70%,100%{transform:scale(3); opacity:0}}
@media (max-width:1100px){ .sg2-tl{padding:40px 36px 42px; grid-template-columns:1fr 1.5fr 1fr} .sg2-tl__step--start > :not(.sg2-tl__mark){padding-right:24px} .sg2-tl__step--end > :not(.sg2-tl__mark){padding-left:24px} .sg2-tl__step--mid > :not(.sg2-tl__mark){padding:0 16px} .sg2-tl__pill{letter-spacing:.1em} }
/* tablet/phone: the spine turns vertical and runs down the left; everything reads left-aligned */
@media (max-width:960px){
  .sg2-tl{grid-template-columns:1fr; padding:36px 28px 34px; margin-top:44px}
  .sg2-tl__step{position:relative; padding:0 0 34px 50px; text-align:left} .sg2-tl__step:last-child{padding-bottom:0}
  .sg2-tl__step::before{content:""; position:absolute; left:16px; top:0; bottom:0; width:2px; background:rgba(95,208,138,.55)}
  .sg2-tl__step--start::before{top:28px} .sg2-tl__step--end::before{bottom:auto; height:28px}
  .sg2-tl__step--mid,.sg2-tl__step--end{text-align:left}
  .sg2-tl__step > :not(.sg2-tl__mark),.sg2-tl__step--start > :not(.sg2-tl__mark),.sg2-tl__step--mid > :not(.sg2-tl__mark),.sg2-tl__step--end > :not(.sg2-tl__mark){padding:0}
  .sg2-tl__mark{height:56px; margin:0 0 14px}
  .sg2-tl__seg{display:none}
  .sg2-tl__node{position:absolute; left:9px; top:20px}
  .sg2-tl__node--done{left:0; top:11px}
  .sg2-tl__yr,.sg2-tl__step--end .sg2-tl__yr{margin:0; font-size:52px}
  .sg2-tl__step--mid .sg2-tl__mark::before{content:""; position:absolute; left:10px; top:21px; width:14px; height:14px; border-radius:50%; background:#164328; box-shadow:inset 0 0 0 2px var(--tl-hi)}
  .sg2-tl__pill{max-width:100%}
  .sg2-tl__skills{justify-content:flex-start}
  .sg2-tl .sg2-tl__t{max-width:34ch}
}
@media (max-width:700px){ .sg2-tl{padding:30px 20px 30px; border-radius:18px} .sg2-tl__step{padding-left:44px} .sg2-tl__yr,.sg2-tl__step--end .sg2-tl__yr{font-size:46px} .sg2-tl .sg2-tl__t{font-size:17.5px} .sg2-tl__pill{letter-spacing:.1em; padding:9px 14px 9px 12px} .sg2-tl__skill{font-size:13.5px} }
@media (max-width:430px){ .sg2-tl__pill{border-radius:16px} .sg2-tl__label span{display:block} }   /* the label can't hold one line here: break it after "business" so "running" isn't orphaned and the pill shrink-wraps */
/* ...tighter on phones (marked screenshot, 30 Sep: "taking too much spacing in mob mode"): the three steps keep their order,
   words, spine and nodes, at a smaller scale. The marks are 44px, not 56px (the nodes and the spine's ends re-centred on
   them), the years 38px, and the gaps between steps, under the marks and inside the card are about a third shorter. The skill
   pills take the site's phone chip size. */
@media (max-width:700px){
  .sg2-tl{padding:24px 18px 26px; margin-top:32px}
  .sg2-tl__step{padding:0 0 22px 42px}
  .sg2-tl__mark{height:44px; margin:0 0 8px}
  .sg2-tl__node{top:14px} .sg2-tl__node--done{top:5px}
  .sg2-tl__step--mid .sg2-tl__mark::before{top:15px}
  .sg2-tl__step--start::before{top:22px} .sg2-tl__step--end::before{height:22px}
  .sg2-tl__yr,.sg2-tl__step--end .sg2-tl__yr{font-size:38px}
  .sg2-tl .sg2-tl__t{font-size:16.5px; line-height:1.35; margin-bottom:6px}
  .sg2-tl p:not(.sg2-tl__t){font-size:14.5px; line-height:1.55}
  .sg2-tl__pill{padding:7px 12px 7px 10px; font-size:10px; gap:8px}
  .sg2-tl__lead{margin-bottom:10px}
  .sg2-tl__skills{gap:6px}
  .sg2-tl__skill{padding:7px 11px 7px 9px; font-size:12.5px; gap:6px} .sg2-tl__skill svg{width:14px; height:14px}
}

/* Sarah §2 timeline v2 (30 Sep). Shoaib on the boxed v1: "both are in boxes look like a same thing". The photo stays the
   section's only card; the timeline comes out of its box and sits on the paper as type: a hollow Anton 2017 and a solid green
   2022 on the two ends of one rail, the "already running" pill (deep green, live dot) riding the middle of it, the three stages
   under it. Same markup and words as v1, renamed .sg2-tl → .sg2-rail. v1 stays in the .sg2-tl block above for
   sarah-gonzales/index.timeline-card.html. He then picked v1 back ("this section was good before keep it as it was"),
   so this block only serves the kept sarah-gonzales/index.timeline-open.html. */
.sg2-rail{--rail-yr:clamp(72px,7.2vw,104px); list-style:none; margin:96px 0 0; padding:0; display:grid; grid-template-columns:1fr 1.35fr 1fr}
.sg2-rail__step{margin:0; min-width:0}
.sg2-rail__mark{display:flex; align-items:center; height:var(--rail-yr); margin:0 0 30px}
.sg2-rail__yr{flex:none; font:400 var(--rail-yr)/1 var(--display); letter-spacing:-.01em; color:var(--ink); margin-right:24px}
.sg2-rail__step--start .sg2-rail__yr{-webkit-text-stroke:1.5px var(--ink); -webkit-text-fill-color:transparent}   /* where stroke is unsupported, fill is too, so it falls back to solid ink */
.sg2-rail__step--end .sg2-rail__yr{color:var(--green); margin:0 0 0 24px}
.sg2-rail__seg{flex:1; height:2px; position:relative; background:rgba(17,17,17,.12); border-radius:2px}
.sg2-rail__seg::after{content:""; position:absolute; inset:0; border-radius:inherit; background:var(--green); transform-origin:left center}
.sg2-rail__node{flex:none; width:18px; height:18px; border-radius:50%; background:var(--paper); box-shadow:inset 0 0 0 2px var(--ink)}   /* hollow, like the 2017 beside it */
.sg2-rail__node--done{width:38px; height:38px; display:grid; place-items:center; background:var(--green); color:#fff; box-shadow:0 0 0 7px rgba(32,157,80,.14), 0 14px 26px -12px rgba(28,121,64,.7)}
.sg2-rail__node--done svg{width:18px; height:18px}
.sg2-rail__pill{flex:none; display:inline-flex; align-items:center; gap:10px; max-width:calc(100% - 40px); padding:11px 18px 11px 14px; border-radius:999px; background:linear-gradient(180deg,#1B4F31 0,#164328 100%); box-shadow:0 16px 30px -18px rgba(22,67,40,.9); font:600 10.5px/1.3 var(--body); letter-spacing:.14em; text-transform:uppercase; color:#fff}
.sg2-rail__live{flex:none; width:8px; height:8px; border-radius:50%; background:#5FD08A; position:relative}
.sg2-rail__live::after{content:""; position:absolute; inset:0; border-radius:50%; background:#5FD08A; opacity:0}
.sg2-rail__step > :not(.sg2-rail__mark){margin-left:0; margin-right:0}
.sg2-rail__step--start > :not(.sg2-rail__mark){padding-right:40px}
.sg2-rail__step--mid{text-align:center} .sg2-rail__step--mid > :not(.sg2-rail__mark){padding:0 28px}
.sg2-rail__step--end{text-align:right} .sg2-rail__step--end > :not(.sg2-rail__mark){padding-left:40px}
.sg2-rail .sg2-rail__t{font:600 19px/1.4 var(--body); color:var(--ink); margin:0 0 10px; text-wrap:balance}
.sg2-rail p:not(.sg2-rail__t){font:400 15.5px/1.6 var(--body); color:var(--ink-3); margin:0; text-wrap:pretty}
.sg2-rail__lead{display:block; margin:0 0 16px}
.sg2-rail__skills{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.sg2-rail__skill{display:inline-flex; align-items:center; gap:8px; padding:10px 16px 10px 12px; border-radius:999px; background:#fff; box-shadow:0 0 0 1px rgba(17,17,17,.07), 0 10px 22px -14px rgba(17,17,17,.35); font:500 14px/1 var(--body); color:var(--ink); white-space:nowrap}
.sg2-rail__skill svg{width:16px; height:16px; flex:none; color:var(--green-ui)}
.sg2-rail__skill > span{display:inline-block} .sg2-rail__skill > span::first-letter{text-transform:uppercase}
@media (min-width:961px){ .sg2-rail__skills::after{content:""; flex-basis:100%; order:1} .sg2-rail__skill:nth-child(n+5){order:2} }   /* two rows of two: four chips never fit one row here, and 3 + 1 orphaned "Operations" */
/* motion (only under html.motion): the rail draws 2017 → 2022 in one pass (linear through the middle so it never stalls at a
   column edge), the pill lands as the line reaches it, the chips rise, and the check and 2022 arrive with the line */
html.motion .sg2-rail__seg::after{transform:scaleX(0)}
html.motion .sg2-rail__pill,html.motion .sg2-rail__node--done{opacity:0; transform:scale(.7); transition:opacity .35s var(--ease), transform .5s cubic-bezier(.2,.9,.3,1.25)}
html.motion .sg2-rail__step--end .sg2-rail__yr{opacity:0; transform:translateX(-14px); transition:opacity .5s var(--ease), transform .7s var(--ease)}
html.motion .sg2-rail__skill{opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease), transform .45s var(--ease)}
html.motion .sg2-rail.is-in .sg2-rail__seg::after{transform:none}
html.motion .sg2-rail.is-in .sg2-rail__step--start .sg2-rail__seg::after{transition:transform .4s cubic-bezier(.5,0,1,1) .25s}
html.motion .sg2-rail.is-in .sg2-rail__step--mid .sg2-rail__seg:first-child::after{transition:transform .25s linear .65s}
html.motion .sg2-rail.is-in .sg2-rail__step--mid .sg2-rail__seg:last-child::after{transition:transform .25s linear .9s}
html.motion .sg2-rail.is-in .sg2-rail__step--end .sg2-rail__seg::after{transition:transform .45s cubic-bezier(0,0,.4,1) 1.15s}
html.motion .sg2-rail.is-in .sg2-rail__pill{opacity:1; transform:none; transition-delay:.8s}
html.motion .sg2-rail.is-in .sg2-rail__skill{opacity:1; transform:none}
html.motion .sg2-rail.is-in .sg2-rail__skill:nth-child(1){transition-delay:1s} html.motion .sg2-rail.is-in .sg2-rail__skill:nth-child(3){transition-delay:1.07s}
html.motion .sg2-rail.is-in .sg2-rail__skill:nth-child(5){transition-delay:1.14s} html.motion .sg2-rail.is-in .sg2-rail__skill:nth-child(7){transition-delay:1.21s}
html.motion .sg2-rail.is-in .sg2-rail__node--done{opacity:1; transform:none; transition-delay:1.5s}
html.motion .sg2-rail.is-in .sg2-rail__step--end .sg2-rail__yr{opacity:1; transform:none; transition-delay:1.55s}
html.motion .sg2-rail.is-in .sg2-rail__live::after{animation:sg2-live 2.4s ease-out 2.2s infinite}
@media (max-width:1100px){ .sg2-rail{grid-template-columns:1fr 1.5fr 1fr; margin-top:80px} .sg2-rail__step--start > :not(.sg2-rail__mark){padding-right:24px} .sg2-rail__step--end > :not(.sg2-rail__mark){padding-left:24px} .sg2-rail__step--mid > :not(.sg2-rail__mark){padding:0 16px} .sg2-rail__yr{margin-right:18px} .sg2-rail__step--end .sg2-rail__yr{margin:0 0 0 18px} .sg2-rail__pill{letter-spacing:.1em} }
/* tablet/phone: the rail turns vertical and runs down the left; everything reads left-aligned */
@media (max-width:960px){
  .sg2-rail{--rail-yr:64px; grid-template-columns:1fr; margin-top:64px}
  .sg2-rail__step{position:relative; padding:0 0 40px 54px; text-align:left} .sg2-rail__step:last-child{padding-bottom:0}
  .sg2-rail__step::before{content:""; position:absolute; left:18px; top:0; bottom:0; width:2px; background:rgba(32,157,80,.45)}
  .sg2-rail__step--start::before{top:calc(var(--rail-yr) / 2)} .sg2-rail__step--end::before{bottom:auto; height:calc(var(--rail-yr) / 2)}
  .sg2-rail__step--mid,.sg2-rail__step--end{text-align:left}
  .sg2-rail__step > :not(.sg2-rail__mark),.sg2-rail__step--start > :not(.sg2-rail__mark),.sg2-rail__step--mid > :not(.sg2-rail__mark),.sg2-rail__step--end > :not(.sg2-rail__mark){padding:0}
  .sg2-rail__mark{margin:0 0 16px}
  .sg2-rail__step--mid .sg2-rail__mark{height:auto; min-height:44px}
  .sg2-rail__seg{display:none}
  .sg2-rail__node{position:absolute; left:10px; top:calc(var(--rail-yr) / 2 - 9px)}
  .sg2-rail__node--done{left:0; top:calc(var(--rail-yr) / 2 - 19px)}
  .sg2-rail__yr,.sg2-rail__step--end .sg2-rail__yr{margin:0}
  .sg2-rail__step--mid .sg2-rail__mark::before{content:""; position:absolute; left:11px; top:14px; width:16px; height:16px; border-radius:50%; background:var(--paper); box-shadow:inset 0 0 0 2px var(--green)}
  .sg2-rail__pill{max-width:100%}
  .sg2-rail__skills{justify-content:flex-start}
  .sg2-rail .sg2-rail__t{max-width:34ch}
}
@media (max-width:700px){ .sg2-rail{--rail-yr:56px} .sg2-rail__step{padding-left:48px} .sg2-rail .sg2-rail__t{font-size:17.5px} .sg2-rail__pill{letter-spacing:.1em; padding:10px 14px 10px 12px} .sg2-rail__skill{font-size:13.5px} }
@media (max-width:430px){ .sg2-rail__pill{border-radius:16px} .sg2-rail__label span{display:block} }   /* the label can't hold one line here: break it after "business" so the pill still shrink-wraps its two lines */

/* ============================================================ About v4.6 (2026-09-30): Prove, out of the box. Team on v4.5: "both thing
   looking like a same" (the deep-green proof panel and the green Come On the Show band were two green slabs of the same
   width). Same fix as the Sarah timeline: the closing ctaband stays the only card here, and the proof comes out of its box and
   sits on the paper as type. The heading sits beside the argument, all of it on one column line: the claim with the green
   strike through "the independents lose", the statement (the site's Anton statement object, smaller than the H2), then the
   lead-in pointing down at the rail. The three proofs run along one rail (the Sarah rail's language): two hollow ink nodes, then
   a solid green end node with the green label, as the story runs changed, then cost, then what happened next. v4.5 (the green
   panel) stays in the .ab5-* block above for about/index.proof-card.html; delete one of the two once he picks. */
.ab6-prove{padding-top:0}   /* the Fit section above already ends on 170px of paper */
.ab6-prove__claim{margin:0; font:400 20px/1.6 var(--body); color:var(--ink-2); max-width:50ch}
.ab6-strike{color:var(--ink); background:linear-gradient(var(--green),var(--green)) 0 55%/100% 3px no-repeat; transition:background-size 1.2s var(--out-expo) .45s}
html.motion .ab6-prove__copy:not(.is-in) .ab6-strike{background-size:0 3px}
.ab6-prove__big{margin:44px 0 0; font:400 clamp(30px,2.9vw,40px)/1.02 var(--display); text-transform:uppercase; letter-spacing:-.012em; color:var(--ink); max-width:24ch; text-wrap:balance}
.ab6-prove__lead{margin:20px 0 0; font:400 18px/1.6 var(--body); color:var(--ink-2); max-width:46ch}
.ab6-prove__lead .i-arr{display:inline-block; width:18px; height:18px; margin-left:.45em; vertical-align:-.22em; color:var(--green); rotate:90deg}

.ab6-rail{list-style:none; margin:96px 0 0; padding:0; display:grid; grid-template-columns:1fr 1.35fr 1fr}
.ab6-rail__step{margin:0; min-width:0}
.ab6-rail__step--mid{text-align:center} .ab6-rail__step--end{text-align:right}
.ab6-rail__mark{display:flex; align-items:center; height:64px; margin:0 0 28px}
.ab6-rail__seg{flex:1; height:2px; position:relative; background:rgba(17,17,17,.12)}   /* square ends: the segments meet at the column lines without a pinch */
.ab6-rail__seg::after{content:""; position:absolute; inset:0; background:var(--green); transform-origin:left center}
.ab6-rail__node{flex:none; position:relative; display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:var(--paper); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink)}   /* hollow, like the Sarah rail's 2017 */
.ab6-rail__node svg{width:24px; height:24px}
.ab6-rail__node--end{background:var(--green); color:#fff; box-shadow:0 0 0 8px rgba(32,157,80,.14), 0 16px 30px -12px rgba(28,121,64,.7)}
.ab6-rail__node--end::after{content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 2px var(--green); opacity:0; pointer-events:none}
.ab6-rail__step--start .ab6-rail__node{margin-right:22px} .ab6-rail__step--mid .ab6-rail__node{margin:0 22px} .ab6-rail__step--end .ab6-rail__node{margin-left:22px}
.ab6-rail b{display:block; font:400 clamp(30px,3vw,42px)/1 var(--display); text-transform:uppercase; letter-spacing:-.01em; color:var(--ink); text-wrap:balance}
.ab6-rail__step--end b{color:var(--green)}
/* motion (only under html.motion): the rail draws left to right in one pass, each node lands as the line reaches it, the labels
   rise with their node, and the green end keeps a slow ring going once it has arrived */
html.motion .ab6-rail__seg::after{transform:scaleX(0)}
html.motion .ab6-rail__node{opacity:0; transform:scale(.7); transition:opacity .35s var(--ease), transform .5s cubic-bezier(.2,.9,.3,1.25)}
html.motion .ab6-rail b{opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .6s var(--out-expo)}
html.motion .ab6-rail.is-in .ab6-rail__seg::after{transform:none}
html.motion .ab6-rail.is-in .ab6-rail__node,html.motion .ab6-rail.is-in b{opacity:1; transform:none}
html.motion .ab6-rail.is-in .ab6-rail__step--start .ab6-rail__node,html.motion .ab6-rail.is-in .ab6-rail__step--start b{transition-delay:.15s}
html.motion .ab6-rail.is-in .ab6-rail__step--start .ab6-rail__seg::after{transition:transform .45s cubic-bezier(.5,0,1,1) .35s}
html.motion .ab6-rail.is-in .ab6-rail__step--mid .ab6-rail__seg:first-child::after{transition:transform .25s linear .8s}
html.motion .ab6-rail.is-in .ab6-rail__step--mid .ab6-rail__node,html.motion .ab6-rail.is-in .ab6-rail__step--mid b{transition-delay:1s}
html.motion .ab6-rail.is-in .ab6-rail__step--mid .ab6-rail__seg:last-child::after{transition:transform .25s linear 1.05s}
html.motion .ab6-rail.is-in .ab6-rail__step--end .ab6-rail__seg::after{transition:transform .45s cubic-bezier(0,0,.4,1) 1.3s}
html.motion .ab6-rail.is-in .ab6-rail__step--end .ab6-rail__node,html.motion .ab6-rail.is-in .ab6-rail__step--end b{transition-delay:1.7s}
html.motion .ab6-rail.is-in .ab6-rail__node--end::after{animation:ab6-ring 2.8s ease-out 2.4s infinite}
@keyframes ab6-ring{0%{transform:scale(1); opacity:.6} 70%,100%{transform:scale(1.7); opacity:0}}
/* tablet/phone: the rail turns vertical and runs down the left, every label beside its node */
@media (max-width:960px){
  .ab6-prove__big{margin-top:36px; max-width:22ch}
  .ab6-rail{grid-template-columns:1fr; margin-top:64px}
  .ab6-rail__step,.ab6-rail__step--mid,.ab6-rail__step--end{position:relative; display:flex; align-items:center; gap:20px; padding:0 0 36px; text-align:left}
  .ab6-rail__step:last-child{padding-bottom:0}
  .ab6-rail__step:not(:last-child)::before{content:""; position:absolute; left:27px; top:56px; bottom:0; width:2px; background:rgba(32,157,80,.45)}
  .ab6-rail__mark{height:auto; margin:0}
  .ab6-rail__seg{display:none}
  .ab6-rail__node,.ab6-rail__step--start .ab6-rail__node,.ab6-rail__step--mid .ab6-rail__node,.ab6-rail__step--end .ab6-rail__node{width:56px; height:56px; margin:0}
  .ab6-rail b{font-size:clamp(28px,4.6vw,34px)}
}
@media (max-width:700px){
  .ab6-prove__claim{font-size:18px}
  .ab6-prove__big{font-size:clamp(28px,8vw,34px)}
  .ab6-prove__lead{font-size:16px}
  .ab6-rail{margin-top:52px}
  .ab6-rail__step,.ab6-rail__step--mid,.ab6-rail__step--end{gap:16px; padding-bottom:30px}
  .ab6-rail__step:not(:last-child)::before{left:23px; top:48px}
  .ab6-rail__node,.ab6-rail__step--start .ab6-rail__node,.ab6-rail__step--mid .ab6-rail__node,.ab6-rail__step--end .ab6-rail__node{width:48px; height:48px}
  .ab6-rail__node svg{width:21px; height:21px}
  .ab6-rail b{font-size:26px}
}

/* Sarah §2 photo v2 (30 Sep). Shoaib: "for the sarah image do not use the background keep the design to png version ... in the
   background you can give a good frame", and of the boxed timeline under it: "this section was good before keep it as it was".
   So the timeline card is the section's one box, and the photo comes off its deep-green card: the transparent cut-out stands on
   the paper (as rsgonzales.com shows it, .fbd-fig) inside a thin green frame. Her head and the first row of faces rise above the
   frame's top line, the frame's bottom edge is the floor the crop lands on, and inside the frame a soft green light and the home
   hero's sound rings (.rings, ot-canva.css) spread out from her, clipped by the frame. The Washington, DC chip hangs under it as
   the caption. Scoped to --cut so the kept versions (index.before-timeline, index.timeline-card, index.timeline-open) keep
   their card. */
.sg2-co__ph--cut{padding:0; background:none; border-radius:0; overflow:visible; box-shadow:none}
.sg2-co__stage{position:relative; display:block; isolation:isolate; padding:0 5%}
.sg2-co__frame{position:absolute; z-index:-1; inset:15% 0 0; overflow:hidden; border-radius:28px; box-shadow:inset 0 0 0 1.5px rgba(32,157,80,.6);
  background:radial-gradient(70% 70% at 46% 80%, rgba(32,157,80,.2) 0, rgba(32,157,80,.06) 52%, rgba(32,157,80,0) 80%)}
.sg2-co__frame .rings{top:7%; left:45%; right:auto; width:175%; translate:-50% -50%; color:var(--green); z-index:0}   /* centred just under her chin, which sits on the frame's top line */
.sg2-co__frame .rings circle{stroke-width:.16; opacity:.5} .sg2-co__frame .rings circle:nth-child(2){opacity:.38} .sg2-co__frame .rings circle:nth-child(3){opacity:.28} .sg2-co__frame .rings circle:nth-child(4){opacity:.18} .sg2-co__frame .rings circle:nth-child(5){opacity:.1}
html.motion .sg2-co__frame .rings{animation:ot-breathe 8s ease-in-out infinite alternate}
.sg2-co__ph--cut .sg2-co__tag{position:static; display:inline-flex; align-items:center; gap:9px; margin:20px 0 0; box-shadow:0 0 0 1px rgba(17,17,17,.08), 0 10px 24px -12px rgba(20,62,37,.35)}
.sg2-co__ph--cut .sg2-co__tag::before{content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(32,157,80,.18)}
@media (max-width:700px){ .sg2-co__frame{border-radius:22px} }

/* ============================================================ About v4.7 (2026-09-30): Prove with the copy exactly as written. Team on
   v4.6: "it still needs improvement … make sure that there are no changes to the content" (v4.5 and v4.6 split paragraph 2 into
   a headline and three labels, hid its commas and "and", and struck through "the independents lose"). Checked against Zahra's
   Notion page: the H2 and both paragraphs now render whole, in order, with every word and mark visible. The design is in the
   objects around the words. Paragraph 1 is the quieter claim and paragraph 2 the larger answer, with the three things a guest can
   tell you as white icon chips inside the sentence (the Sarah rail's chip style) and their commas and "and" left between them.
   Beside the text, the guests themselves as two episode cards (picked from about-prove-variants/, option 5, 30 Sep; the thin
   green frame they replaced is kept in that page's pv.css). v4.6 (the rail) is about/index.proof-rail.html and v4.5 (the green
   panel) about/index.proof-card.html; both alter the visible copy, so do not reuse them without restoring the sentence. */
.ab7-prove{padding-top:0}   /* the Fit section above already ends on 170px of paper */
.ab7-prove__grid{display:grid; grid-template-columns:1fr 1fr; gap:88px; align-items:center}
.ab7-prove .h2{max-width:14ch; margin:0}
.ab7-prove__claim{margin:28px 0 0; font:400 18px/1.65 var(--body); color:var(--ink-3); max-width:52ch}
.ab7-prove__answer{margin:30px 0 0; padding-top:30px; border-top:1px solid rgba(17,17,17,.14); font:500 clamp(20px,1.75vw,24px)/1.6 var(--body); letter-spacing:-.005em; color:var(--ink); max-width:40ch; text-wrap:pretty}
.ab7-chip{display:inline-flex; align-items:center; gap:.4em; padding:.06em .62em .06em .4em; border-radius:999px; background:#fff; box-shadow:0 0 0 1px rgba(17,17,17,.07), 0 10px 22px -14px rgba(17,17,17,.35); font-weight:600; line-height:1.35; color:var(--ink); white-space:nowrap; vertical-align:.04em}
.ab7-chip svg{flex:none; width:.9em; height:.9em; color:var(--green-ui)}
/* the two guests as the site's dark episode tiles (the .eprow__art surface, the company logo, a white play circle, and the tile's
   left-edge fade on each cut-out, which also hides the side where the original photo was cropped), fanned -5 / +4 degrees over
   the home hero's sound rings. Each card opens that guest's episode, and straightens and lifts on hover or focus. They are dark,
   not green, so the closing ctaband stays the only green box; under html.motion they fan out from a straight stack as they rise in. */
.ab7-cards{position:relative; margin:0; aspect-ratio:36/35; isolation:isolate}
.ab7-cards .rings{z-index:0; left:50%; top:50%; width:140%; translate:-50% -50%; color:var(--green)}
.ab7-cards .rings circle{opacity:.26} .ab7-cards .rings circle:nth-child(2){opacity:.2} .ab7-cards .rings circle:nth-child(3){opacity:.14} .ab7-cards .rings circle:nth-child(4){opacity:.09} .ab7-cards .rings circle:nth-child(5){opacity:.05}
html.motion .ab7-cards .rings{animation:ot-breathe 8s ease-in-out infinite alternate}
.ab7-card{position:absolute; z-index:1; width:54%; aspect-ratio:4/5.4; border-radius:22px; overflow:hidden; text-decoration:none;
  background:radial-gradient(80% 70% at 30% 0, #1F1F1F 0, #111 70%); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 50px 90px -50px rgba(17,17,17,.75);
  transition:transform .6s var(--out-expo), rotate .6s var(--out-expo), box-shadow .6s var(--out-expo)}
.ab7-card--a{left:1%; top:2%; rotate:-5deg; z-index:2}   /* Derrick, Episode 2 */
.ab7-card--b{right:1%; bottom:2%; rotate:4deg}   /* Austin, Episode 1 */
.ab7-card:hover,.ab7-card:focus-visible{rotate:0deg; transform:translateY(-8px); z-index:3; box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 60px 100px -50px rgba(17,17,17,.85)}
.ab7-cards .ab7-card__cut{position:absolute; z-index:1; left:6%; top:13%; width:100%; height:auto; max-width:none; filter:grayscale(1) contrast(1.05);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%); mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
.ab7-cards .ab7-card__logo{position:absolute; z-index:2; left:20px; top:20px; height:42px; width:auto; opacity:.95}
.ab7-cards .ab7-card--b .ab7-card__logo{left:auto; right:20px}   /* its top-left corner sits under the front card */
.ab7-card__play{position:absolute; z-index:3; right:18px; bottom:18px; width:52px; height:52px; border-radius:50%; background:#fff; color:#111; display:grid; place-items:center; transition:background-color .25s var(--ease), color .25s var(--ease)}
.ab7-card__play svg{width:20px; height:20px; margin-left:3px}
.ab7-card:hover .ab7-card__play,.ab7-card:focus-visible .ab7-card__play{background:var(--green); color:#fff}
html.motion .ab7-cards:not(.is-in) .ab7-card{rotate:0deg; transform:translateY(28px)}
@media (prefers-reduced-motion:no-preference){
  .ab7-chip{transition:opacity .5s var(--ease), transform .6s var(--out-expo)}
  .ab7-chip:nth-of-type(1){transition-delay:.35s} .ab7-chip:nth-of-type(2){transition-delay:.5s} .ab7-chip:nth-of-type(3){transition-delay:.65s}
  html.motion .ab7-prove__text:not(.is-in) .ab7-chip{opacity:0; transform:translateY(8px)}
}
@media (max-width:1199px){ .ab7-prove__grid{gap:56px} }
@media (max-width:960px){
  .ab7-prove__grid{grid-template-columns:1fr; gap:56px}
  .ab7-prove__answer{max-width:44ch}
  .ab7-cards{width:min(100%,560px)}
}
@media (max-width:700px){
  .ab7-prove__claim{margin-top:22px; font-size:17px}
  .ab7-prove__answer{margin-top:24px; padding-top:24px; font-size:19px}
  .ab7-prove__grid{gap:44px}
  .ab7-cards .ab7-card__logo{left:14px; top:14px; height:32px} .ab7-cards .ab7-card--b .ab7-card__logo{left:auto; right:14px}
  .ab7-card__play{right:12px; bottom:12px; width:44px; height:44px}
}

/* Sarah "What I'll Ask You" v2 (30 Sep). Shoaib: "this section seems very quiet boring or simple ... make [it] follow the content
   as well". It sits on the paper between two ink sections (#inside above, #close below), so it stays open, with no card, and
   speaks the home hero's language instead: the photo-real mic hangs on its cable from the section's top edge in the right column,
   swaying, with the grey sound rings, a white studio light and a green ripple behind its grille. The copy is Zahra's three
   paragraphs, whole and in Notion order: each is a row with an icon medallion (a question, a lock, an eye) and its first sentence
   set bold, so every word and mark reads straight through. The label lines ("I'll ask / I won't / You'll see") that repeated each
   paragraph's opening words are gone, and the H2 carries the home hero's last phrase in green. The old three cells stay in
   sarah-gonzales/index.before-ask.html (.sg2-cells--ask). */
.sg2-ask{overflow:hidden}   /* the rings and the cable stay inside the section */
.sg2-ask__grid{position:relative; display:grid; grid-template-columns:7fr 5fr; gap:64px; align-items:start}
.sg2-ask__copy{position:relative; z-index:1}   /* above the rings, which spread out of the mic column */
.sg2-ask .sg2-h2{margin-bottom:40px}
.sg2-ask__list{list-style:none; margin:0; padding:0; border-top:1px solid rgba(17,17,17,.12)}
.sg2-ask__list li{display:grid; grid-template-columns:56px minmax(0,1fr); gap:26px; align-items:start; padding:30px 0; border-bottom:1px solid rgba(17,17,17,.12)}
.sg2-ask__ico{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--green-ui); color:#fff; box-shadow:0 0 0 6px rgba(32,157,80,.12), 0 14px 28px -14px rgba(28,121,64,.85)}
.sg2-ask__ico svg{width:24px; height:24px}
.sg2-ask__list p{margin:0; font:400 17px/1.7 var(--body); color:var(--ink-2); max-width:62ch; text-wrap:pretty}
.sg2-ask__list b{font-weight:600; color:var(--ink)}
/* the mic: the rig starts at the section's top edge (-sec-band), so the cable always hangs from the ink section above; the
   mic's top sits 120px into the grid at every width, and its grille (80% down the image) is what the rings and light centre on */
.sg2-ask__mic{position:relative; align-self:stretch; min-height:560px}
.sg2-ask__mic::before{content:""; position:absolute; left:50%; top:394px; width:520px; aspect-ratio:1; translate:-50% -50%; border-radius:50%; background:radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0)); pointer-events:none}
.sg2-ask__mic .rings{top:394px; left:50%; right:auto; width:680px; translate:-50% -50%; color:#A6AAA5; z-index:0}
.sg2-ask__rig{position:absolute; left:50%; top:calc(-1 * var(--sec-band)); translate:-50% 0; display:flex; flex-direction:column; align-items:center; transform-origin:50% 0; z-index:1}
.sg2-ask__rig .cable{display:block; width:3px; height:calc(var(--sec-band) + 120px); background:#3D3D3D; border-radius:0 0 1.5px 1.5px}
.sg2-ask__head{position:relative; display:block}
.sg2-ask__head .mic{display:block; width:150px; height:auto; margin-top:-1px; filter:drop-shadow(0 18px 18px rgba(17,17,17,.28)) drop-shadow(0 44px 54px rgba(28,121,64,.3))}
.sg2-ask__head::after{content:""; position:absolute; left:50%; top:80%; width:150px; height:150px; translate:-50% -50%; border-radius:50%; border:1.5px solid var(--green); opacity:0; pointer-events:none; z-index:-1}
html.motion .sg2-ask__rig{animation:hh-sway 7s ease-in-out infinite alternate}
html.motion .sg2-ask__head::after{animation:ot-ripple 7s cubic-bezier(.16,1,.3,1) 1.4s infinite}
html.motion .sg2-ask__mic .rings{animation:ot-breathe 8s ease-in-out infinite alternate}
@media (max-width:1100px){ .sg2-ask__grid{gap:40px} .sg2-ask__head .mic{width:130px} .sg2-ask__mic .rings,.sg2-ask__mic::before{top:357px} .sg2-ask__mic .rings{width:600px} }
/* tablet: one column; the mic hangs small in the top-right corner, beside the title only. Its top is 60px up in the section's
   padding and it is 80px wide (183px tall), so it ends ~120px into the grid, above the first row (which starts ~140px in) */
@media (max-width:960px){
  .sg2-ask__grid{grid-template-columns:1fr}
  .sg2-ask__copy > .sg2-h2{max-width:min(22ch, calc(100% - 200px))}
  .sg2-ask__mic{position:absolute; top:0; right:0; width:170px; height:0; min-height:0}
  .sg2-ask__rig .cable{height:calc(var(--sec-band) - 60px)}
  .sg2-ask__head .mic{width:80px}
  .sg2-ask__head::after{width:96px; height:96px}
  .sg2-ask__mic .rings,.sg2-ask__mic::before{top:86px}
  .sg2-ask__mic .rings{width:380px} .sg2-ask__mic::before{width:280px}
}
@media (max-width:700px){ .sg2-ask__list li{grid-template-columns:44px minmax(0,1fr); gap:16px; padding:24px 0} .sg2-ask__ico{width:44px; height:44px; box-shadow:0 0 0 5px rgba(32,157,80,.12)} .sg2-ask__ico svg{width:20px; height:20px} .sg2-ask__list p{font-size:16px} }
/* phone: no room beside the title, so the section is the title and the three rows */
@media (max-width:600px){ .sg2-ask__mic{display:none} .sg2-ask__copy > .sg2-h2{max-width:22ch} }
/* ============================================================ Sarah #why v3 (30 Sep): "Why I Work With HVAC Contractors and Nobody Else".
   Shoaib was not satisfied with the photo grid + green mission card, took option C of why-hvac-variants/ ("the poster"), asked
   for client photos inside its three value cards, then: "use this one in its actual page". "HVAC" is set at poster size inside
   the H2 itself (it still reads as one heading) with the home hero's sound rings behind it; P1 and P2 beside it, whole (the old
   card split P2's last sentence off); the values as three hairline cards with no fill (the green timeline card sits right above,
   the ink #inside right below), each opening on a client crew with the value's icon notched into the photo's bottom edge.
   The old section stays in sarah-gonzales/index.before-why.html (.sg2-why__*, .sg2-photos, .sg2-mission, .sg2-checks).
   Later the same day: "HVAC" in a green gradient, a smaller P1 with the columns top-aligned so it sits level with the eyebrow
   (centred, the taller side column rose above it), and the value cards in black. The black read "weird" twice (and §5 says
   cards are deep green, never black); from sarah-values-variants/ the team picked C: "this is good move this to actual page".
   Each value is now a rounded photo with a deep-green caption card (.sg2-hvac__panel: icon, name, line) lifted over its lower
   edge. The page before is sarah-gonzales/index.before-values.html (its cards have no panel, so they no longer look as they did).
   Then, on the green captions: "use darker versions for these rather than green", so the captions are near-black (the green
   ones stay in sarah-values-variants/c-caption.html). "the description should be till there" (a line drawn level with the
   heading's last line): the side column now spans the title's height, P2 sitting at its foot. Then "there should be a light
   line between them": a hairline down the gap, eyebrow to heading foot, desktop only. */
.sg2-hvac{overflow:hidden}   /* the rings stay inside the section */
.sg2-hvac__grid{display:grid; grid-template-columns:7fr 5fr; gap:56px; align-items:start}   /* P1 starts level with the eyebrow at every width */
.sg2-hvac__title{position:relative; isolation:isolate}
.sg2-hvac__title .rings{top:56%; left:22%; right:auto; width:min(720px,70vw); translate:-50% -50%; color:#A6AAA5; z-index:-1}
html.motion .sg2-hvac__title .rings{animation:ot-breathe 8s ease-in-out infinite alternate}
.sg2-hvac .sg2-h2{max-width:none; margin:0; line-height:.95}
.sg2-hvac__big{display:block; font-size:clamp(120px,16vw,236px); line-height:.84; letter-spacing:-.02em; color:var(--green); margin:.06em 0 .04em -.02em}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .sg2-hvac__big{background:linear-gradient(180deg,#3DD47D 0%,#209D50 50%,#135A32 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
    padding:.05em 0 .03em; margin-block:.01em}   /* Anton overshoots the .84 line box and a clipped background paints nothing outside it; same outer size */
}
.sg2-hvac__lead{margin:0 0 20px; font:500 clamp(19px,1.55vw,22px)/1.45 var(--body); color:var(--ink); letter-spacing:-.005em; text-wrap:pretty}
.sg2-hvac__side{position:relative; align-self:stretch; display:flex; flex-direction:column}   /* as tall as the title: P1 level with the eyebrow, P2's last line level with the heading's foot */
.sg2-hvac__side::before{content:""; position:absolute; top:0; bottom:0; left:-104px; width:1px; background:rgba(17,17,17,.14)}   /* the divider, about halfway between the heading's longest line and the text from 961 to 1440+ */
.sg2-hvac__body{margin:auto 0 0; font:400 17px/1.75 var(--body); color:var(--ink-2); text-wrap:pretty}
.sg2-hvac__foot{margin-top:80px; padding-top:40px; border-top:1px solid rgba(17,17,17,.12)}
.sg2-hvac__intro{margin:0; font:600 18px/1.5 var(--body); color:var(--ink)}
.sg2-hvac__vals{list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:22px 0 0; padding:0}
.sg2-hvac__card{display:flex; flex-direction:column}
.sg2-hvac__ph{margin:0; aspect-ratio:4/3; border-radius:22px; overflow:hidden; background:#164328}
.sg2-hvac__ph img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% var(--y,50%)}
.sg2-hvac__panel{position:relative; flex:1; margin:-68px 14px 0; padding:22px 24px 26px; border-radius:18px; color:#fff; background:linear-gradient(180deg,#1E1E1E 0,#141414 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), 0 30px 60px -34px rgba(0,0,0,.6)}   /* flex:1 keeps the three captions level; the black of the #inside card below */
.sg2-hvac__panel h3{display:flex; align-items:center; gap:14px; margin:0 0 12px; font:400 clamp(22px,1.8vw,26px)/1 var(--display); text-transform:uppercase; letter-spacing:-.005em; color:#fff}
.sg2-hvac__ico{flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; color:var(--green-ui); background:#fff}
.sg2-hvac__ico svg{width:20px; height:20px}
.sg2-hvac__panel p{margin:0; font:400 16px/1.6 var(--body); color:rgba(255,255,255,.74)}
@media (prefers-reduced-motion:no-preference){ .sg2-hvac__ph img{transition:transform .7s var(--ease)} .sg2-hvac__card:hover .sg2-hvac__ph img{transform:scale(1.04)} }
.sg2-hvac__close{display:flex; align-items:flex-start; justify-content:center; gap:14px; margin:48px 0 0; text-align:center; font:600 clamp(19px,1.6vw,22px)/1.45 var(--body); color:var(--ink); text-wrap:balance}
.sg2-hvac__mark{flex:none; display:inline-flex; margin-top:.42em}   /* on the first line, not centred on a wrapped sign-off */
@media (max-width:960px){
  .sg2-hvac__grid{grid-template-columns:1fr; gap:24px}
  .sg2-hvac__side::before{display:none}   /* stacked: nothing beside it to divide from */
  .sg2-hvac__title .rings{width:92vw; left:40%}
  .sg2-hvac__foot{margin-top:56px}
  .sg2-hvac__vals{grid-template-columns:1fr}
  .sg2-hvac__ph{aspect-ratio:16/9}   /* one column: a 4:3 photo would stand ~680px tall on a tablet */
  .sg2-hvac__ph img{object-position:50% var(--y-sm,var(--y,50%))}
  .sg2-hvac__close{justify-content:flex-start; text-align:left}   /* stacked cards: centred text beside a left mark reads off-centre */
}
@media (max-width:700px){ .sg2-hvac__big{font-size:clamp(96px,30vw,150px)} }
@media (max-width:600px){ .sg2-hvac__ph{aspect-ratio:4/3} .sg2-hvac__panel{margin-top:-44px} }   /* a 16:9 photo under a 68px overlap was mostly hidden on a phone */
@media (prefers-reduced-motion:reduce){ .sg2-hvac__title .rings{animation:none} }

/* ---- Next / Previous episode card: the episode's own video banner (assets/img/episode-0N-thumbnail.webp, 30 Sep) in
   place of the art tile, 16:9 like the player. The play circle sits in the banner's empty bottom-right corner; a held
   video's {{NEEDS_SOURCE}} chip is too wide for that corner (it covered the title), so it joins the meta line instead.
   The tile (.eprow__art) stays as it is for the About hero cards. */
.ep-next__thumb{position:relative; display:block; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#111; box-shadow:0 20px 40px -24px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06)}
.ep-next__thumb img{display:block; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--out-expo)}
.ep-next:hover .ep-next__thumb img{transform:scale(1.03)}
.ep-next__thumb .card__play{position:absolute; right:10px; bottom:10px; z-index:2; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:#fff; color:#111; box-shadow:0 10px 24px -12px rgba(0,0,0,.6); transition:background-color .25s var(--ease), color .25s var(--ease)}
.ep-next__thumb .card__play svg{width:15px; height:15px; margin-left:2px}
.ep-next:hover .ep-next__thumb .card__play{background:var(--green); color:#fff}
.ep-next .meta .needs{font-size:10px; letter-spacing:.12em; padding:4px 7px; border-radius:6px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.4)}
@media (prefers-reduced-motion:reduce){ .ep-next__thumb img{transition:none} .ep-next:hover .ep-next__thumb img{transform:none} }
/* phones: a long button label inside a .cta box wraps instead of propping the whole column open. Episode 1's "Watch the
   Gross Profit Breakdown" (.btn is nowrap) made its column 389px on a 390 phone, and html{overflow-x:clip} cut the right
   edge off every block below the player. Short labels still sit on one line. */
@media (max-width:700px){ .cta .btn{white-space:normal; text-align:center; line-height:1.25} }