/* ============================================================
   Signal, Not Flaw — shared stylesheet
   Procrastination, reframed as an emotional signal.
   ============================================================ */

:root{
  --ink:#0e0f13;
  --ink-soft:#171921;
  --card:#1b1e28;
  --paper:#f2f5f0;
  --paper-alt:#eaefe7;
  --paper-card:#ffffff;
  --text-dark:#22252c;
  --text-mute:#5b6068;
  --text-light:#e9ecef;
  --text-light-mute:#a7adb8;
  --blue:#5b9fd6;
  --green:#6fbe8c;
  --green-ink:#3f9663;
  --amber:#e9a54b;
  --violet:#8f7fd4;
  --red:#d1706f;
  --line-dark:rgba(255,255,255,.09);
  --line-light:#dde3da;
  --radius:16px;
  --radius-sm:12px;
  --serif:'Source Serif 4',Georgia,serif;
  --sans:'Public Sans',system-ui,sans-serif;
  --shadow-soft:0 6px 24px rgba(20,30,22,.07);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--text-dark);background:var(--paper);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}

/* ---------- skip link (accessibility) ---------- */
.skip-link{position:absolute;left:16px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:11px 20px;border-radius:0 0 10px 10px;font-weight:600;font-size:14px;transition:top .18s ease}
.skip-link:focus{top:0}

/* ---------- shared ---------- */
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin-bottom:14px}
.eyebrow.blue{color:var(--blue)}
.eyebrow.green{color:var(--green)}
.eyebrow.amber{color:var(--amber)}
.eyebrow.violet{color:var(--violet)}
.eyebrow.red{color:#c0595a}
.section.dark .eyebrow.green{color:var(--green)}
h1,h2,h3{font-family:var(--serif);line-height:1.15;font-weight:700}
h2{font-size:clamp(28px,4vw,40px);margin-bottom:16px}
.section{padding:96px 0}
.section.dark{background:var(--ink);color:var(--text-light)}
.section.dark .lede{color:var(--text-light-mute)}
.section.tight{padding-top:72px}
.lede{font-size:18px;color:var(--text-mute);max-width:640px}
.btn{display:inline-block;font-weight:600;font-size:15px;padding:13px 26px;border-radius:999px;transition:transform .15s ease,box-shadow .15s ease;border:1.5px solid transparent;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn-green{background:var(--green);color:#0c2417}
.btn-green:hover{box-shadow:0 6px 18px rgba(111,190,140,.35)}
.btn-ghost-dark{border-color:var(--line-light);color:var(--text-dark)}
.btn-ghost-dark:hover{border-color:#c3cbc0}
.btn-ghost-light{border-color:var(--line-dark);color:var(--text-light)}
.btn-ghost-light:hover{border-color:rgba(255,255,255,.3)}

/* ---------- logo mark ---------- */
.mark{display:flex;align-items:center;gap:10px}
.mark svg{width:26px;height:32px}
.mark .word{font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:-.01em}
.mark .word em{font-style:italic;font-weight:400;opacity:.65}

/* ---------- nav ---------- */
nav.site-nav{position:sticky;top:0;z-index:50;background:rgba(242,245,240,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line-light)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.nav-links{display:flex;gap:28px;align-items:center;position:relative}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--text-mute)}
.nav-links a:hover{color:var(--text-dark)}
.nav-links a[aria-current="page"]{color:var(--text-dark);font-weight:600}
/* Scroll-spy active link: green text. A single pill (.nav-indicator) glides
   between links so switching sections feels continuous, not a pop. */
.nav-links a.active{color:var(--green-ink);font-weight:600}
.nav-indicator{
  position:absolute;left:0;top:0;width:0;height:0;
  border:1.6px solid var(--green);border-radius:999px;
  pointer-events:none;opacity:0;
  transition:transform .45s cubic-bezier(.45,.85,.35,1),
             width .45s cubic-bezier(.45,.85,.35,1),
             height .45s ease, opacity .3s ease;
  animation:navPulse 1.8s ease-in-out infinite}
@keyframes navPulse{
  0%{box-shadow:0 0 0 0 rgba(111,190,140,.5)}
  70%{box-shadow:0 0 0 8px rgba(111,190,140,0)}
  100%{box-shadow:0 0 0 0 rgba(111,190,140,0)}}
.nav-cta{background:var(--ink);color:#fff !important;padding:10px 20px;border-radius:999px;font-size:14px;font-weight:600}
.nav-cta:hover{background:#22252c}
.nav-toggle{display:none;flex:none;width:44px;height:44px;border:1px solid var(--line-light);background:#fff;border-radius:10px;cursor:pointer;align-items:center;justify-content:center}
.nav-toggle svg{width:20px;height:20px;stroke:var(--text-dark)}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-open{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}

@media(max-width:900px){
  .nav-toggle{display:inline-flex}
  .nav-links{
    position:absolute;left:0;right:0;top:68px;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line-light);
    padding:8px 16px 18px;
    box-shadow:var(--shadow-soft);
    max-height:0;overflow:hidden;opacity:0;pointer-events:none;
    transition:max-height .28s ease,opacity .2s ease;
  }
  .nav-links.open{max-height:85vh;overflow-y:auto;opacity:1;pointer-events:auto}
  .nav-links a{padding:14px 8px;font-size:16px;border-bottom:1px solid var(--line-light)}
  .nav-links a:last-child{border-bottom:none}
  .nav-cta{margin-top:12px;text-align:center;color:#fff !important}
  /* In the stacked menu the sliding pill is hidden; mark the active row
     with a green tint + left bar instead. */
  .nav-indicator{display:none}
  .nav-links a.active{background:rgba(111,190,140,.1);box-shadow:inset 3px 0 0 var(--green)}
}

/* ---------- page header (interior pages) ---------- */
.page-head{padding:76px 0 8px}
.page-head .eyebrow{margin-bottom:16px}
.page-head h1{font-size:clamp(34px,5vw,52px);letter-spacing:-.015em;margin-bottom:20px;max-width:16ch}
.page-head .lede{font-size:19px;max-width:660px}
.crumbs{font-size:13px;color:var(--text-mute);margin-bottom:26px;letter-spacing:.02em}
.crumbs a:hover{color:var(--text-dark)}
.crumbs span{opacity:.5;margin:0 8px}

/* ---------- hero ---------- */
.hero{padding:88px 0 72px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(38px,5.6vw,60px);letter-spacing:-.015em;margin:0 0 22px}
.hero h1 .u-green{color:var(--green-ink);font-style:italic}
.hero h1 .strike{position:relative;white-space:nowrap}
.hero h1 .strike::after{content:"";position:absolute;left:-2%;right:-2%;top:54%;height:3px;background:var(--red);border-radius:2px;transform:rotate(-2deg) scaleX(0);transform-origin:left center;animation:strikeDraw .55s ease-out .9s forwards}
@keyframes strikeDraw{to{transform:rotate(-2deg) scaleX(1)}}
.hero .lede{margin-bottom:32px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-note{margin-top:22px;font-size:13.5px;color:var(--text-mute)}
.prism-stage{position:relative}
.prism-stage svg{width:100%;height:auto}
.spectrum-label{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.06em}

@keyframes beamIn{from{stroke-dashoffset:340}to{stroke-dashoffset:0}}
@keyframes rayOut{from{stroke-dashoffset:300}to{stroke-dashoffset:0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* opacity-only: labels carry their own rotate transform, don't clobber it */
@keyframes labelIn{from{opacity:0}to{opacity:1}}
/* Resting state = fully drawn, so no-JS / no-support shows the complete prism. */
.beam{stroke-dasharray:340}
.ray{stroke-dasharray:300}
/* JS 'armed' hides the strokes + labels, ready to draw in. */
.prism-stage.armed .beam{stroke-dashoffset:340}
.prism-stage.armed .ray{stroke-dashoffset:300}
.prism-stage.armed .lbl{opacity:0}
/* JS 'playing' runs the draw-in each time the prism scrolls into view. */
.prism-stage.playing .beam{animation:beamIn 1.1s ease-out .2s forwards}
.prism-stage.playing .ray{animation:rayOut 1s ease-out forwards}
.prism-stage.playing .lbl{animation:labelIn .5s ease-out forwards}
.prism-stage.playing .r1{animation-delay:1.15s}
.prism-stage.playing .r2{animation-delay:1.3s}
.prism-stage.playing .r3{animation-delay:1.45s}
.prism-stage.playing .r4{animation-delay:1.6s}
.prism-stage.playing .r5{animation-delay:1.75s}
.prism-stage.playing .l1{animation-delay:1.75s}
.prism-stage.playing .l2{animation-delay:1.9s}
.prism-stage.playing .l3{animation-delay:2.05s}
.prism-stage.playing .l4{animation-delay:2.2s}
.prism-stage.playing .l5{animation-delay:2.35s}

/* ---------- reveal on scroll (progressive enhancement) ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- rise: cards slide up + fade in as they enter view ----------
   Uses an animation with `backwards` fill (not forwards) so hover transforms
   still work after the entrance. Staggered per position in the grid. */
.rise:not(.in){opacity:0;transform:translateY(28px)}
.rise.in{animation:riseIn .6s cubic-bezier(.2,.75,.3,1) backwards}
@keyframes riseIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.rise:nth-child(2){animation-delay:.07s}
.rise:nth-child(3){animation-delay:.14s}
.rise:nth-child(4){animation-delay:.21s}
.rise:nth-child(5){animation-delay:.28s}
.rise:nth-child(6){animation-delay:.35s}

/* ---------- deck deal: the four practice-cycle cards only ----------
   Cards start stacked on the left (like a dealer's deck) and are dealt out
   into their columns one after another. Falls back to a plain rise below
   the 4-column layout, where a horizontal deal would look off. */
.deck{transition:transform .6s cubic-bezier(.18,.82,.28,1),opacity .45s ease}
.deck:not(.in){opacity:0}
.deck.in{opacity:1;transform:none}
.deck:nth-child(2){transition-delay:.12s}
.deck:nth-child(3){transition-delay:.24s}
.deck:nth-child(4){transition-delay:.36s}
@media(min-width:961px){
  .deck:nth-child(1):not(.in){transform:translateY(-6px) rotate(-2deg) scale(.97)}
  .deck:nth-child(2):not(.in){transform:translateX(calc(-100% - 20px)) rotate(-5deg)}
  .deck:nth-child(3):not(.in){transform:translateX(calc(-200% - 40px)) rotate(-6deg)}
  .deck:nth-child(4):not(.in){transform:translateX(calc(-300% - 60px)) rotate(-7deg)}
}
@media(max-width:960px){
  .deck:not(.in){transform:translateY(28px)}
}

/* ---------- reading highlight: spotlight the block you're reading ----------
   Only active when JS adds .js-reading to <body>, so no-JS keeps everything
   fully legible. Blocks in the central "reading band" go full-strength; the
   rest dim slightly to guide the eye. Disabled under reduced-motion. */
.js-reading .rl{transition:opacity .5s ease}
.js-reading .rl:not(.rl-active){opacity:.48}
.js-reading .rl.rl-active{opacity:1}

@media(prefers-reduced-motion:reduce){
  /* This site's motion is its signature and is what the user explicitly asked
     for (prism, sprout, card rise, nav pill, strike). It's all brief and
     non-looping, so it still plays. Only smooth-scroll and the reading-dim
     are relaxed here. */
  .js-reading .rl:not(.rl-active){opacity:1}
  html{scroll-behavior:auto}
}

/* ---------- audience strip ---------- */
.strip{border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light);background:var(--paper-alt)}
.strip-inner{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media(max-width:760px){.strip-inner{grid-template-columns:1fr}}
.strip-cell{padding:34px 32px;display:flex;gap:18px;align-items:flex-start}
.strip-cell+.strip-cell{border-left:1px solid var(--line-light)}
@media(max-width:760px){.strip-cell+.strip-cell{border-left:none;border-top:1px solid var(--line-light)}}
.strip-cell .dot{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:19px}
.strip-cell h3{font-size:19px;margin-bottom:4px}
.strip-cell p{font-size:14.5px;color:var(--text-mute)}

/* ---------- overview cards (home) ---------- */
.overview{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
@media(max-width:900px){.overview{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.overview{grid-template-columns:1fr}}
.ov-card{display:block;background:var(--paper-card);border:1px solid var(--line-light);border-radius:var(--radius);padding:28px;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.ov-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft);border-color:#c9d1c6}
.ov-card .ov-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px;margin-bottom:16px}
.ov-card h3{font-size:19px;margin-bottom:8px}
.ov-card p{font-size:14.5px;color:var(--text-mute)}
.ov-card .go{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:600;color:var(--green-ink)}
.ov-card:hover .go{text-decoration:underline}
.ov-card.static{cursor:default}
.ov-card.static:hover{transform:none;box-shadow:none;border-color:var(--line-light)}
.mt-lg{margin-top:32px}

/* ---------- decode / paths (dark) ---------- */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
@media(max-width:820px){.paths{grid-template-columns:1fr}}
.path{background:var(--card);border:1px solid var(--line-dark);border-radius:var(--radius);padding:34px}
.path.harmful{border-top:3px solid var(--amber)}
.path.functional{border-top:3px solid var(--green)}
.path-tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:5px 12px;border-radius:999px;margin-bottom:18px}
.path.harmful .path-tag{background:rgba(233,165,75,.14);color:var(--amber)}
.path.functional .path-tag{background:rgba(111,190,140,.14);color:var(--green)}
.path h3{font-size:23px;margin-bottom:14px}
.path dl div{margin-bottom:14px}
.path dt{font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-light-mute);margin-bottom:3px}
.path dd{font-size:15.5px;color:var(--text-light)}
.path .feels{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-dark);font-style:italic;font-family:var(--serif);font-size:15px}
.path.harmful .feels{color:var(--amber)}
.path.functional .feels{color:var(--green)}
.decode-kicker{margin-top:44px;text-align:center;font-family:var(--serif);font-size:clamp(19px,2.4vw,24px);line-height:1.5}
.decode-kicker strong{color:var(--green)}

/* ---------- cycle / steps (light) ---------- */
.cycle{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
@media(max-width:960px){.cycle{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cycle{grid-template-columns:1fr}}
.step{background:var(--paper-card);border:1px solid var(--line-light);border-radius:var(--radius);padding:28px 24px;position:relative}
.step .num{font-family:var(--serif);font-size:15px;font-weight:700;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px;color:#fff}
.step:nth-child(1) .num{background:var(--blue)}
.step:nth-child(2) .num{background:var(--green)}
.step:nth-child(3) .num{background:var(--amber)}
.step:nth-child(4) .num{background:var(--violet)}
.step h3{font-size:18px;margin-bottom:8px}
.step p{font-size:14.5px;color:var(--text-mute)}
.cycle-note{margin-top:36px;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--text-mute);text-align:center}

/* ---------- moves list (practice, dark) ---------- */
.moves{margin-top:44px;display:grid;gap:16px}
.move{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;background:var(--card);border:1px solid var(--line-dark);border-radius:var(--radius);padding:26px 30px}
@media(max-width:600px){.move{grid-template-columns:1fr;gap:10px}}
.move .move-n{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--green);line-height:1}
.move h3{font-size:19px;margin-bottom:7px}
.move p{font-size:15px;color:var(--text-light-mute)}

/* ---------- touchpoints (dark) ---------- */
.touch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
@media(max-width:900px){.touch-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.touch-grid{grid-template-columns:1fr}}
.touch{background:var(--card);border:1px solid var(--line-dark);border-radius:var(--radius);padding:28px}
.touch .ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:19px;margin-bottom:18px}
.touch h3{font-size:18px;margin-bottom:8px}
.touch p{font-size:14.5px;color:var(--text-light-mute)}
.touch .opt{display:inline-block;margin-top:14px;font-size:11px;font-weight:700;letter-spacing:.16em;background:rgba(111,190,140,.16);color:var(--green);padding:4px 11px;border-radius:999px}

/* ---------- timeline (context history, light) ---------- */
.timeline{margin-top:48px;display:grid;gap:0;position:relative}
.tl-item{display:grid;grid-template-columns:180px 1fr;gap:32px;padding:26px 0;border-top:1px solid var(--line-light)}
.tl-item:last-child{border-bottom:1px solid var(--line-light)}
@media(max-width:680px){.tl-item{grid-template-columns:1fr;gap:8px}}
.tl-era{font-family:var(--serif);font-weight:700;font-size:19px;display:flex;align-items:flex-start;gap:12px}
.tl-era .tl-dot{flex:none;width:14px;height:14px;border-radius:50%;margin-top:6px}
.tl-body h3{font-size:17px;margin-bottom:6px}
.tl-body p{font-size:15px;color:var(--text-mute)}

/* ---------- two-column compare (old vs new) ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
@media(max-width:760px){.compare{grid-template-columns:1fr}}
.compare-col{border-radius:var(--radius);padding:30px}
.compare-col.old{background:var(--paper-card);border:1px solid var(--line-light)}
.compare-col.new{background:#eef5ef;border:1px solid #cfe3d4}
.compare-col h3{font-size:20px;margin-bottom:16px}
.compare-col.old h3{color:var(--text-dark)}
.compare-col.new h3{color:var(--green-ink)}
.compare-col ul{list-style:none;display:grid;gap:12px}
.compare-col li{font-size:15px;padding-left:26px;position:relative;color:var(--text-mute)}
.compare-col li::before{position:absolute;left:0;top:0}
.compare-col.old li::before{content:"—";color:var(--red)}
.compare-col.new li::before{content:"✓";color:var(--green-ink);font-weight:700}

/* ---------- objections (challenges) ---------- */
.objections{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px}
@media(max-width:760px){.objections{grid-template-columns:1fr}}
.obj{background:var(--card);border:1px solid var(--line-dark);border-radius:var(--radius);padding:28px}
.obj h3{font-size:18px;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.obj .risk,.obj .counter{font-size:14.5px}
.obj .lab{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:14px 0 5px}
.obj .risk .lab{color:var(--red)}
.obj .counter .lab{color:var(--green)}
.obj .risk p,.obj .counter p{color:var(--text-light-mute)}

/* ---------- bulleted lists ---------- */
.bullets{list-style:none;display:grid;gap:11px;margin-top:4px}
.bullets li{font-size:15px;padding-left:22px;position:relative;color:var(--text-mute)}
.bullets li::before{content:"›";position:absolute;left:3px;top:-1px;color:var(--green-ink);font-weight:700}
.section.dark .bullets li{color:var(--text-light-mute)}
.section.dark .bullets li::before{color:var(--green)}

/* ---------- evidence ---------- */
.evidence{background:var(--paper-alt);border-top:1px solid var(--line-light)}
.ev-grid{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center}
@media(max-width:820px){.ev-grid{grid-template-columns:1fr;gap:28px}}
.ev-stat .big{font-family:var(--serif);font-size:clamp(56px,7vw,84px);font-weight:700;line-height:1;color:var(--green-ink);font-variant-numeric:tabular-nums}
.ev-stat .cap{font-size:14.5px;color:var(--text-mute);max-width:240px;margin-top:8px}
.ev-refs{font-size:14px;color:var(--text-mute)}
.ev-refs p{margin-bottom:10px}
.ev-refs .src{font-size:12.5px;letter-spacing:.05em;color:#7c8378}

/* ---------- references list ---------- */
.refs{margin-top:44px;display:grid;gap:4px}
.ref{padding:22px 0;border-top:1px solid var(--line-light);display:grid;grid-template-columns:96px 1fr;gap:28px;align-items:baseline}
.ref:last-child{border-bottom:1px solid var(--line-light)}
@media(max-width:600px){.ref{grid-template-columns:1fr;gap:6px}}
.ref .yr{font-family:var(--serif);font-weight:700;font-size:20px;color:var(--green-ink)}
.ref .cite{font-size:15px;color:var(--text-dark)}
.ref .cite em{color:var(--text-mute)}
.ref .cite .authors{font-weight:600}

/* ---------- media / listen ---------- */
.media-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:24px;margin-top:48px}
@media(max-width:900px){.media-grid{grid-template-columns:1fr}}
.pod-card{background:var(--paper-card);border:1px solid var(--line-light);border-radius:var(--radius);padding:32px;display:flex;flex-direction:column;gap:20px}
.pod-head{display:flex;gap:18px;align-items:center;position:relative}
.pod-art{flex:none;width:76px;height:76px;border-radius:14px;background:var(--ink);display:grid;place-items:center}
.pod-art svg{width:38px;height:46px}
.pod-head .kicker{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green-ink);margin-bottom:4px}
.pod-head h3{font-size:20px;line-height:1.3}
.pod-head .ep-meta{font-size:13px;color:var(--text-mute);margin-top:4px}
.pod-desc{font-size:14.5px;color:var(--text-mute)}
.player{display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--line-light);border-radius:999px;padding:10px 20px 10px 10px}
.play-btn{flex:none;width:46px;height:46px;border-radius:50%;border:none;background:var(--green);color:#0c2417;cursor:pointer;display:grid;place-items:center;transition:transform .15s ease}
.play-btn:hover{transform:scale(1.06)}
.skip-btn{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-light);background:var(--paper-card);color:var(--text-mute);cursor:pointer;display:grid;place-items:center;transition:transform .15s ease,color .15s ease,border-color .15s ease}
.skip-btn:hover{transform:scale(1.06);color:var(--text-dark);border-color:#c3cbc0}
.skip-btn .icon{width:16px;height:16px}
.speed-btn{flex:none;font-size:12.5px;font-weight:700;color:var(--text-mute);background:var(--paper-card);border:1px solid var(--line-light);border-radius:999px;padding:6px 9px;min-width:46px;text-align:center;cursor:pointer;font-variant-numeric:tabular-nums;transition:color .15s ease,border-color .15s ease}
.speed-btn:hover{color:var(--text-dark);border-color:#c3cbc0}
.play-btn .icon{width:18px;height:18px}
.play-btn .icon-play{margin-left:2px}
.play-btn .icon-pause{display:none}
.play-btn.playing .icon-play{display:none}
.play-btn.playing .icon-pause{display:block}
.play-btn:disabled{opacity:.5;cursor:progress}
.player .track{flex:1;display:flex;flex-direction:column;gap:6px}
.progress{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:3px;background:#d8dfd5;cursor:pointer;background-image:linear-gradient(var(--green),var(--green));background-repeat:no-repeat;background-size:0% 100%}
.progress::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--green);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.progress::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--green);border:2px solid #fff}
.time-row{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-mute);font-variant-numeric:tabular-nums}
.pod-note{font-size:12.5px;color:var(--text-mute);margin-top:auto;margin-bottom:auto}
.pod-note a{color:var(--green-ink);font-weight:600}
.pod-note a:hover{text-decoration:underline}
.media-side{display:flex;flex-direction:column;gap:20px}
.media-card{background:var(--paper-card);border:1px solid var(--line-light);border-radius:var(--radius);padding:24px;flex:1}
.media-card .type{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:4px 11px;border-radius:999px;margin-bottom:12px}
.media-card .type.article{background:rgba(91,159,214,.14);color:#3d7fb5}
.media-card .type.video{background:rgba(233,165,75,.16);color:#c07f22}
.media-card .type.posts{background:rgba(143,127,212,.16);color:#6f5fc0}
.media-card h3{font-size:17px;margin-bottom:6px}
.media-card p{font-size:13.5px;color:var(--text-mute)}
.media-card .more{display:inline-block;margin-top:12px;font-size:13.5px;font-weight:600;color:var(--green-ink)}
.media-card .more:hover{text-decoration:underline}
.media-all{margin-top:36px;text-align:center}

/* episode dropdown at the top of the player */
.pod-head-main{flex:1;min-width:0}
.ep-toggle{flex:none;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--text-mute);background:var(--paper);border:1px solid var(--line-light);border-radius:999px;padding:8px 14px;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}
.ep-toggle:hover,.ep-toggle[aria-expanded="true"]{color:var(--text-dark);border-color:#c3cbc0;background:#fff}
.ep-toggle .icon{width:15px;height:15px}
.ep-toggle .chev{width:13px;height:13px;transition:transform .2s ease}
.ep-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
@media(max-width:560px){.ep-toggle span{display:none}.ep-toggle{padding:8px 10px}}

.ep-panel{position:absolute;top:calc(100% + 12px);left:0;right:0;z-index:30;background:var(--paper-card);border:1px solid var(--line-light);border-radius:var(--radius);box-shadow:0 14px 34px rgba(20,30,22,.16);padding:8px;display:grid;gap:4px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
.ep-panel.open{opacity:1;visibility:visible;transform:none}

.ep-row{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;background:transparent;border:none;border-radius:var(--radius-sm);padding:12px 14px;cursor:pointer;transition:background .15s ease}
.ep-row:hover{background:var(--paper)}
.ep-row:focus-visible{outline:3px solid var(--blue);outline-offset:-2px}
.ep-row.playing{background:#eef5ef}
.ep-row.playing .ep-num{color:var(--green-ink)}
@media(max-width:600px){.ep-row{grid-template-columns:auto 1fr;gap:12px}}
.ep-row .ep-num{font-family:var(--serif);font-weight:700;font-size:19px;color:var(--text-mute);width:34px;text-align:center}
.ep-row h3{font-size:15.5px;margin-bottom:2px}
.ep-row p{font-size:12.5px;color:var(--text-mute)}
.ep-row .dur{font-size:12.5px;color:var(--text-mute);font-variant-numeric:tabular-nums}
@media(max-width:600px){.ep-row .dur{display:none}}

/* ---------- callout / pull quote ---------- */
.callout{margin:48px 0 0;background:#eef5ef;border:1px solid #cfe3d4;border-left:4px solid var(--green);border-radius:var(--radius);padding:30px 34px}
.callout p{font-family:var(--serif);font-size:clamp(18px,2.3vw,22px);line-height:1.5;color:var(--text-dark)}
.section.dark .callout{background:rgba(111,190,140,.08);border-color:var(--line-dark);border-left-color:var(--green)}
.section.dark .callout p{color:var(--text-light)}

/* ---------- syllabus / code block ---------- */
.syllabus{margin-top:40px;background:var(--card);border:1px solid var(--line-dark);border-radius:var(--radius);overflow:hidden}
.syllabus-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 24px;border-bottom:1px solid var(--line-dark);flex-wrap:wrap}
.syllabus-head span{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-light-mute)}
.copy-btn{font-size:12.5px;font-weight:600;color:var(--green);background:rgba(111,190,140,.12);border:1px solid var(--line-dark);padding:7px 14px;border-radius:999px;cursor:pointer;transition:background .15s ease}
.copy-btn:hover{background:rgba(111,190,140,.2)}
.syllabus pre{margin:0;padding:26px 24px;overflow-x:auto}
.syllabus code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;line-height:1.7;color:var(--text-light);white-space:pre-wrap}

/* ---------- prose ---------- */
.prose{max-width:680px}
.prose p{margin-bottom:18px;font-size:16.5px}
.prose p:last-child{margin-bottom:0}

/* ---------- cta ---------- */
.cta{background:var(--ink);color:var(--text-light);text-align:center}
.cta .prism-mini{margin:0 auto 26px;width:64px}
.cta h2{font-size:clamp(30px,4.5vw,46px);max-width:760px;margin:0 auto 18px}
.cta p{max-width:600px;margin:0 auto 34px;color:var(--text-light-mute)}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- inline SVG icons (Feather / Lucide, MIT) ---------- */
.icon{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-solid{fill:currentColor;stroke:none}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- soft icon backgrounds + matching icon colour ---------- */
.bg-blue{background:rgba(91,159,214,.16);color:#3d7fb5}
.bg-green{background:rgba(111,190,140,.16);color:var(--green-ink)}
.bg-amber{background:rgba(233,165,75,.16);color:#b9781f}
.bg-violet{background:rgba(143,127,212,.16);color:#6f5fc0}
.bg-red{background:rgba(209,112,111,.16);color:#c0595a}
/* solid timeline dots */
.dot-blue{background:var(--blue)}
.dot-green{background:var(--green)}
.dot-amber{background:var(--amber)}
.dot-violet{background:var(--violet)}
.dot-red{background:var(--red)}

/* ---------- footer ---------- */
footer.site-footer{background:#0a0b0e;color:var(--text-light-mute);padding:44px 0;font-size:13.5px}
.site-footer .mark .word{color:var(--text-light)}
.foot-inner{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a:hover{color:var(--text-light)}

/* ============================================================
   Mobile & tablet refinements
   ============================================================ */
/* Nothing should push the page wider than the screen. */
html,body{max-width:100%}
.wrap{width:100%}
.hero-grid,.paths,.cycle,.overview,.touch-grid,.objections,.compare,.media-grid{min-width:0}
pre{max-width:100%}

/* Tablets / small laptops */
@media(max-width:900px){
  .prism-stage{max-width:520px;margin:8px auto 0}
  .hero{padding:64px 0 56px}
}

/* Phones */
@media(max-width:600px){
  .section{padding:60px 0}
  .section.tight{padding-top:44px}
  .hero{padding:40px 0 44px}
  .hero-grid{gap:36px}
  .strip-cell{padding:26px 22px}
  .path,.move,.obj,.compare-col,.pod-card{padding:24px 22px}
  .move{grid-template-columns:1fr}
  .decode-kicker{margin-top:32px}
  .foot-inner{flex-direction:column;align-items:flex-start;gap:18px}
}

/* Small phones */
@media(max-width:380px){
  .wrap{padding:0 18px}
  .hero h1{font-size:33px}
  .player{padding:8px 14px 8px 8px;gap:12px}
}

/* ============================================================
   Cool extras: scroll-progress spectrum + sprout grow.
   (Strike-through draw lives with the hero rules.)
   ============================================================ */

/* ---- spectrum scroll-progress bar ---- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;background:transparent}
.scroll-progress-fill{height:100%;width:0;
  background:linear-gradient(90deg,var(--violet),var(--blue),var(--green),var(--amber),var(--red));
  background-size:100vw 100%;background-repeat:no-repeat}

/* ---- sprout grows on load, inside the hero prism ---- */
.sprout-grow{transform-box:fill-box;transform-origin:50% 100%}
.prism-stage.armed .sprout-grow{transform:scale(.15);opacity:0}
.prism-stage.playing .sprout-grow{animation:sproutGrow 1s cubic-bezier(.34,1.5,.5,1) .2s forwards}
@keyframes sproutGrow{0%{transform:scale(.15);opacity:0}55%{opacity:1}100%{transform:scale(1);opacity:1}}

/* ---- respect reduced motion for the ambient/one-shot extras ---- */

/* ---------- coming soon page (full-height, footer pinned to bottom) ---------- */
body.page-centered{min-height:100vh;display:flex;flex-direction:column}
body.page-centered main{flex:1 0 auto;display:flex}
body.page-centered .coming{flex:1}
.coming{min-height:70vh;display:grid;place-items:center;text-align:center;padding:80px 24px}
.coming-inner{max-width:620px}
.coming .prism-mini{width:78px;margin:0 auto 26px}
.coming h1{font-size:clamp(38px,6.5vw,64px);letter-spacing:-.02em;margin-bottom:20px}
.coming .lede{margin:0 auto 32px}
.coming .cta-actions{justify-content:center}
@media(max-width:600px){.coming{padding:56px 20px;min-height:56vh}}

/* ============================================================
   Research article — the long-form essay, set as a printed sheet
   sitting on the page so it reads as a document, not a web block.
   ============================================================ */
/* scroll-margin keeps the eyebrow clear of the sticky nav on a #article jump */
.article-section{background:var(--paper-alt);border-top:1px solid var(--line-light);scroll-margin-top:84px}
.article-sheet{max-width:780px;margin:48px auto 0;background:var(--paper-card);border:1px solid var(--line-light);border-radius:var(--radius);box-shadow:var(--shadow-soft);padding:56px 60px}
.article-head{padding-bottom:22px;border-bottom:1px solid var(--line-light);margin-bottom:30px}
.article-title{font-size:clamp(25px,3.2vw,33px);line-height:1.22;letter-spacing:-.01em;margin-bottom:12px}
.article-meta{font-size:13px;color:var(--text-mute);letter-spacing:.02em}
.article-body p{font-family:var(--serif);font-size:17.5px;line-height:1.78;margin-bottom:22px;color:var(--text-dark)}
.article-body p:last-child{margin-bottom:0}
/* Drop cap on the opening paragraph, in the brand green. */
.article-body p:first-child::first-letter{
  float:left;font-family:var(--serif);font-weight:700;color:var(--green-ink);
  font-size:60px;line-height:.84;padding:7px 11px 0 0}
.works-cited-head{font-family:var(--serif);font-size:18px;font-weight:700;margin:38px 0 18px;padding-top:26px;border-top:1px solid var(--line-light)}
.works-cited{list-style:none;display:grid;gap:13px}
/* Hanging indent, as the style guide asks for. */
.works-cited li{font-size:14.5px;line-height:1.62;color:var(--text-mute);padding-left:30px;text-indent:-30px}
.works-cited em{color:var(--text-dark)}
.works-cited a{color:var(--green-ink);overflow-wrap:anywhere}
.works-cited a:hover{text-decoration:underline}
.ev-more{display:inline-block;margin-top:6px;font-size:13.5px;font-weight:600;color:var(--green-ink)}
.ev-more:hover{text-decoration:underline}

@media(max-width:760px){
  .article-sheet{padding:36px 26px;margin-top:36px;border-radius:var(--radius-sm)}
  .article-body p{font-size:16.5px;line-height:1.72}
  .works-cited li{padding-left:22px;text-indent:-22px}
}

/* small screens: stack the transport row above a full-width progress bar,
   so adding the speed button never crowds the controls */
@media(max-width:480px){
  .player{flex-wrap:wrap;justify-content:center;border-radius:20px;padding:14px 16px}
  .player .track{order:1;flex-basis:100%;margin-top:2px}
}