/* ============================================================
   Thought Club: shared stylesheet
   Aligned to the Creative Direction & Brand Guide (Madrid Collective)
   Keywords: optimistic, calming, playful, confident
   Palette: turquoise #0498a0 · sunshine #f9ac3d · burnt sienna #f97855
            peach #ffe3b7 · snow #ffffff
   Type: Montserrat (Black titles, Extra-Bold H1, Semi-Bold H2 + body)
   Logo wordmark approximated with Quicksand (rounded, like the brand mark)
   ============================================================ */

:root{
  --teal:#0498a0;
  --teal-deep:#08767c;      /* deeper teal for accessible link/button text */
  --teal-ink:#0d3538;       /* readable near-black text with a teal cast */
  --sunshine:#f9ac3d;
  --sienna:#f97855;
  --peach:#ffe3b7;
  --peach-soft:#fff4e2;     /* very light peach wash for calm section fills */
  --snow:#ffffff;
  --paper:#fffdf9;          /* barely-warm off-white, gentle on the eyes */
  --card:#ffffff;
  --line:#efe7da;
  --muted:#5b6b6c;
  --focus:#08767c;
  --radius:18px;
  --measure:64ch;

  --font:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-logo:'Quicksand', var(--font);
}

*{box-sizing:border-box;}
button,input,select,textarea{font-family:inherit;}   /* form controls inherit Montserrat instead of falling back to Arial */
html{scroll-behavior:smooth; overflow-y:scroll;}   /* keep the scrollbar always present so nothing shifts when the landing reveals */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important; transition:none !important;}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--teal-ink);
  font-family:var(--font);
  font-weight:600;                 /* body: Montserrat Semi-Bold, per brand guide */
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{line-height:1.15; letter-spacing:-0.015em;}
h1{font-weight:800;}               /* Extra-Bold, per guide */
h2{font-weight:600;}               /* Semi-Bold, per guide */
h3{font-weight:700;}
p{max-width:var(--measure);}
a{color:var(--teal-deep);}
img{max-width:100%; display:block;}
strong{font-weight:700;}

/* ---------- Accessibility helpers ---------- */
.skip{position:absolute; left:-999px; top:0; background:var(--teal); color:#fff; padding:12px 18px; border-radius:0 0 12px 0; z-index:100; font-weight:700;}
.skip:focus{left:0;}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:8px;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}

/* ---------- Logo wordmark ---------- */
.brand{display:inline-flex; align-items:baseline; gap:0; text-decoration:none;}
.wordmark{font-family:var(--font-logo); font-weight:700; font-size:1.5rem; color:var(--teal); letter-spacing:-0.01em; line-height:1;}
.wordmark .dot{color:var(--sunshine);}
.brand.on-dark .wordmark{color:#fff;}
.logo{height:32px; width:auto; display:block;}   /* real logo SVG goes here (logo.svg) */
.brandmark{width:46px; height:46px; display:block;}   /* no-JS fallback mark; app.js swaps in the build-from-mark logo */
/* Header logo builds from the tc mark into the full wordmark on scroll (app.js) */
header.site .brand{align-items:center; overflow:hidden; height:46px; width:50px; transition:width .85s cubic-bezier(.2,0,0,1);}
header.site .brand.built{width:150px;}
.buildlogo{height:46px; width:auto; display:block; flex:none;}

/* ---------- Header ---------- */
header.site{position:sticky; top:0; z-index:50; background:rgba(255,253,249,.92); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line);}
.bar{display:flex; align-items:center; gap:24px; height:78px;}
nav.main{margin-left:auto; display:flex; align-items:center; gap:6px;}
nav.main a{text-decoration:none; color:var(--teal-ink); font-weight:600; padding:10px 14px; border-radius:12px;}
nav.main a:hover{background:var(--peach-soft);}
nav.main a[aria-current="page"]{color:var(--teal-deep); background:var(--peach);}
.lang{display:inline-flex; border:1.5px solid var(--line); border-radius:999px; overflow:hidden; margin-left:8px;}
.lang a, .lang button{border:0; background:transparent; padding:8px 14px; font:inherit; font-weight:700; cursor:pointer; color:var(--muted); text-decoration:none; display:inline-flex; align-items:center;}
.lang a[aria-current="page"], .lang button[aria-pressed="true"]{background:var(--teal); color:#fff;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:1.02rem; text-decoration:none; cursor:pointer; padding:15px 26px; border-radius:12px; border:2px solid transparent;}
.btn-primary{background:var(--teal); color:#fff;}
.btn-primary:hover{background:var(--teal-deep);}
.btn-secondary{background:transparent; color:var(--teal-deep); border-color:var(--teal);}
.btn-secondary:hover{background:#e7f3f3;}
.btn-amber{background:var(--sunshine); color:#3a2600;}
.btn-amber:hover{background:#f0a02f;}

/* ---------- Breadcrumb ---------- */
/* padding-top only, so .wrap's horizontal 24px is kept and the crumb shares
   one left edge with the content below it (was: padding:22px 0 0, which zeroed it) */
.crumb{padding-top:22px; font-size:.92rem; color:var(--muted);}
.crumb a{text-decoration:none; font-weight:600;}
.crumb span{margin:0 8px;}

/* ---------- Page header (interior) ---------- */
/* keep .wrap's horizontal 24px (was: padding:44px 0 6px, which zeroed it) so the
   title lines up with the crumb above and the content below */
.page-head{padding-top:44px; padding-bottom:6px;}
.eyebrow{display:inline-block; background:var(--peach); color:#8a4a24; font-weight:700; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; padding:6px 13px; border-radius:999px; margin-bottom:16px;}
.page-head h1{font-size:clamp(1.9rem,4.5vw,2.9rem); margin:0 0 12px; max-width:20ch;}
.page-head p.lead{font-size:1.15rem; color:var(--muted); margin:0; max-width:56ch;}

/* ---------- Hero (home) ---------- */
.hero{padding:76px 0 44px;}
.hero h1{font-weight:900; font-size:clamp(2.2rem,5.2vw,3.6rem); margin:0 0 18px; max-width:17ch;}  /* Black title, per guide */
.hero p.lead{font-size:1.22rem; color:var(--muted); margin:0 0 32px; max-width:52ch;}
.cta-row{display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- Sections ---------- */
/* Content sections are full-width bands with alternating tints; a hairline divider
   makes every boundary crisp even where two tints are close in value. */
section{padding:64px 0;}
.tint-peach{background:#fdeccf; border-top:1px solid rgba(138,74,36,.12);}
.tint-teal{background:#e2f2f2; border-top:1px solid rgba(13,53,56,.10);}
/* CTA bands (quiz, try-one) hold little content — trim their height so the band
   isn't mostly empty space next to the taller content sections. */
.quizbar, .cta-band{padding:80px 0;}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:28px; flex-wrap:wrap;}
.section-head h2{font-size:clamp(1.6rem,3.5vw,2.2rem); margin:0;}
.section-head p{margin:6px 0 0; color:var(--muted);}
.see-all{font-weight:700; text-decoration:none; color:var(--teal-deep); white-space:nowrap;}

/* ---------- Grids ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}

/* "A familiar pattern": the who-this-is-for section */
.familiar{display:grid; grid-template-columns:0.9fr 1.1fr; gap:30px; align-items:stretch; margin-top:26px;}
.familiar-media{border-radius:20px; min-height:300px; background-color:var(--teal); background-image:linear-gradient(150deg, rgba(255,227,183,.12), rgba(8,107,112,.34)), url('img/familiar.jpg'); background-size:cover; background-position:center; box-shadow:0 10px 30px rgba(13,53,56,.08);}
.moments{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.moment{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px 22px; display:flex; flex-direction:column; gap:7px; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;}
.moment:hover{border-color:var(--teal); transform:translateY(-3px); box-shadow:0 10px 24px rgba(13,53,56,.07);}
.moment .m-ico{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:11px; background:var(--peach-soft); color:var(--teal); margin-bottom:3px; transition:background .2s ease, transform .2s ease;}
.moment .m-ico svg{width:20px; height:20px;}
.moment:hover .m-ico{background:var(--peach); transform:scale(1.08);}
.moment h3{margin:0; font-size:1.08rem;}
.moment p{margin:0; color:var(--muted); font-size:.95rem; max-width:none;}
@media(prefers-reduced-motion:reduce){ .moment:hover{transform:none;} .moment:hover .m-ico{transform:none;} }
.reassure{margin-top:26px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:24px 30px; display:flex; gap:20px; align-items:center; box-shadow:0 8px 26px rgba(13,53,56,.05);}
.reassure .mark{width:52px; height:52px; flex:none; display:block;}
.familiar-cta{margin:22px 0 0; text-align:center; max-width:none;}
.reassure .mark-orbit{transform-box:view-box; transform-origin:200px 200px;}
.reassure:hover .mark-orbit{animation:mark-orbit .9s cubic-bezier(.5,0,.1,1);}
@keyframes mark-orbit{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){ .reassure:hover .mark-orbit{animation:none;} }
.reassure p{margin:0; font-weight:700; font-size:1.14rem; line-height:1.45; color:var(--teal-ink); max-width:none;}
@media(max-width:820px){ .familiar{grid-template-columns:1fr;} .familiar-media{min-height:200px;} }
@media(max-width:520px){ .moments{grid-template-columns:1fr;} .reassure{flex-direction:column; text-align:center; align-items:center;} }

/* ---------- Show cards (each show gets its own brand colour) ---------- */
.show{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; gap:12px; text-decoration:none; color:inherit; position:relative; overflow:hidden;}
.show:hover{border-color:var(--accent,#0498a0); transform:translateY(-2px); transition:transform .15s ease;}
.show::before{content:""; position:absolute; top:0; left:0; right:0; height:6px; background:var(--accent,#0498a0);}
.avatar{width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:var(--accent,#0498a0); color:#fff; font-family:var(--font-logo); font-weight:700; font-size:1.4rem; margin-top:6px;}
img.avatar{object-fit:cover;}
.gen{font-size:.8rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent,#0498a0);}
.show h3{margin:0; font-size:1.35rem;}
.show p{margin:0; color:var(--muted); font-size:1rem;}
.show .listen{margin-top:auto; font-weight:700; text-decoration:none; color:var(--teal-deep); display:inline-flex; gap:8px; align-items:center;}
.show--teal{--accent:#0498a0;}
.show--sun{--accent:#f9ac3d;}
.show--sienna{--accent:#f97855;}

/* ---------- Episode rows ---------- */
.episode{display:grid; grid-template-columns:120px 1fr auto; gap:24px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; text-decoration:none; color:inherit; margin-bottom:14px;}
.episode:hover{border-color:var(--teal);}
.episode .art{width:120px; height:120px; border-radius:12px; background:var(--teal); display:grid; place-items:center; position:relative;}
/* persistent "listenable" cue: a soft play button + a duration badge on each cover */
.episode .art::after{content:""; position:absolute; left:50%; top:50%; width:40px; height:40px; transform:translate(-50%,-50%) scale(.92); border-radius:50%; background:rgba(255,253,249,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d3538'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/15px no-repeat; box-shadow:0 4px 14px rgba(13,53,56,.3); opacity:.9; transition:transform .18s ease, opacity .18s ease; pointer-events:none;}
.episode:hover .art::after{transform:translate(-50%,-50%) scale(1); opacity:1;}
.dur-badge{position:absolute; left:6px; bottom:6px; display:inline-flex; align-items:center; gap:4px; background:rgba(13,53,56,.82); color:#fff; font-size:.66rem; font-weight:700; letter-spacing:.03em; padding:3px 7px 3px 5px; border-radius:999px; line-height:1; pointer-events:none;}
.dur-badge svg{width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
@media(prefers-reduced-motion:reduce){ .episode .art::after{transition:none;} }
.episode .art.sun{background:var(--sunshine);}
.episode .art.sienna{background:var(--sienna);}
.episode .art{overflow:hidden;}
.episode .art img{width:100%; height:100%; object-fit:cover; display:block;}
.episode .meta{font-size:.82rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
.episode h3{margin:8px 0 4px; font-size:1.3rem;}
.episode p{margin:0; color:var(--muted); font-size:1rem;}

/* ---------- Resource cards ---------- */
.res{position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:12px; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;}
/* format-coded top stripe so cards are scannable at a glance */
.res::before{content:""; position:absolute; top:0; left:0; right:0; height:5px; background:var(--sunshine);}
/* category-coded top stripe so the whole card reads as one topic at a glance */
.res:has(.tag[data-cat="focus"])::before,
.res:has(.tag[data-cat="at-school"])::before{background:var(--teal);}
.res:has(.tag[data-cat="organization"])::before,
.res:has(.tag[data-cat="at-work"])::before{background:var(--sunshine);}
.res:has(.tag[data-cat="emotions"])::before,
.res:has(.tag[data-cat="relationships"])::before{background:var(--sienna);}
.res:hover{border-color:var(--teal); transform:translateY(-3px); box-shadow:0 12px 26px rgba(13,53,56,.10);}
@media (prefers-reduced-motion: reduce){ .res:hover{transform:none;} }

/* ---------- Resource carousel (coverflow) ---------- */
.res-carousel{position:relative; margin-top:26px;}
.carousel-viewport{overflow:hidden; padding:16px 0 30px;}
.carousel-track{display:flex; gap:24px; transition:transform .45s cubic-bezier(.4,0,.15,1); will-change:transform;}
.carousel-card{flex:0 0 320px; width:320px; opacity:.4; filter:blur(3px) saturate(.9); transform:scale(.84); transition:transform .45s ease, opacity .45s ease, filter .45s ease; cursor:pointer;}
.carousel-card.is-active{opacity:1; filter:none; transform:scale(1); cursor:default;}
.carousel-card:hover{transform:scale(.84);}
.carousel-card.is-active:hover{transform:scale(1); box-shadow:0 14px 30px rgba(13,53,56,.12);}
.carousel-card.is-hidden{display:none;}
.carousel-arrow{position:absolute; top:44%; transform:translateY(-50%); z-index:4; width:50px; height:50px; border-radius:50%; border:1.5px solid var(--line); background:#fff; color:var(--teal-deep); font-size:1.7rem; line-height:1; cursor:pointer; display:grid; place-items:center; box-shadow:0 8px 22px rgba(13,53,56,.12);}
.carousel-arrow.prev{left:2px;}
.carousel-arrow.next{right:2px;}
.carousel-arrow:hover{border-color:var(--teal); background:var(--peach-soft);}
.carousel-arrow:disabled{opacity:.3; cursor:default; box-shadow:none;}
.carousel-count{text-align:center; font-weight:700; color:var(--muted); font-size:.9rem; margin-top:2px; font-variant-numeric:tabular-nums;}
@media (prefers-reduced-motion: reduce){
  .carousel-card{filter:none; opacity:.55;}
  .carousel-track, .carousel-card{transition:none;}
}
@media(max-width:560px){ .carousel-card{flex-basis:80vw; width:80vw;} .carousel-arrow{width:42px; height:42px; font-size:1.4rem;} }
.tag{align-self:flex-start; display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:5px 11px 5px 9px; border-radius:999px; background:var(--peach); color:#8a4a24;}
.tag-ico{width:14px; height:14px; flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
/* category = colour + symbol (never colour alone) */
.tag[data-cat="focus"],
.tag[data-cat="at-school"]{background:#dff0f0; color:var(--teal-deep);}
.tag[data-cat="organization"],
.tag[data-cat="at-work"]{background:var(--peach); color:#8a4a24;}
.tag[data-cat="emotions"],
.tag[data-cat="relationships"]{background:#ffe0d6; color:#a63b22;}
.res h3{margin:0; font-size:1.1rem;}
.res .kind{display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:.9rem; font-weight:700; margin-top:auto;}
.kind-ico{width:15px; height:15px; flex:none; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}

/* ---------- Filter chips ---------- */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px;}
.chip{display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--line); background:var(--card); color:var(--teal-ink); font:inherit; font-weight:600; font-size:.92rem; padding:9px 16px 9px 13px; border-radius:999px; cursor:pointer; text-decoration:none;}
.chip-ico{width:16px; height:16px; flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; color:var(--teal);}
.chip:hover{border-color:var(--teal);}
.chip[aria-pressed="true"]{background:var(--teal); color:#fff; border-color:var(--teal);}
.chip[aria-pressed="true"] .chip-ico{color:#fff;}

/* Read / listen format toggle */
.mode-toggle{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 24px;}
.mode-label{font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-right:2px;}
.mode{display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--line); background:var(--card); color:var(--teal-ink); font:inherit; font-weight:600; font-size:.88rem; padding:7px 14px; border-radius:999px; cursor:pointer;}
.mode:hover{border-color:var(--teal);}
.mode[aria-pressed="true"]{background:var(--teal-ink); color:#fff; border-color:var(--teal-ink);}
.mode-ico{width:15px; height:15px; flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}

/* Resources: filter-driven grid */
.res-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:18px; margin-top:6px; transition:opacity .18s ease;}
.res-grid.is-filtering{opacity:0;}
.res-grid .res[hidden]{display:none;}
.res-empty{margin:20px 2px; color:var(--muted); font-weight:600;}
@media (prefers-reduced-motion: reduce){ .res-grid{transition:none;} }

/* ---------- Prose / show notes ---------- */
.prose{max-width:var(--measure);}
.mission-line{font-family:var(--font-logo); font-weight:700; font-size:clamp(1.5rem,3.4vw,2.1rem); color:var(--teal); line-height:1.2; margin:0 0 18px; max-width:none;}
.prose h2{font-size:1.4rem; margin:34px 0 10px;}
.prose p{margin:0 0 16px;}

/* ---------- About: mission ---------- */
.mission{padding-top:12px;}
.mission-grid .mission-line{margin:0 0 20px;}
.mission-body p{margin:0 0 16px; max-width:64ch;}
.mission-body p:last-child{margin-bottom:0;}
.mission-free{font-weight:700; color:var(--teal-ink);}

/* ---------- About: single host feature ---------- */
.host-feature{display:grid; grid-template-columns:210px 1fr; gap:34px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:32px; position:relative; overflow:hidden;}
.host-feature::before{content:""; position:absolute; top:0; left:0; bottom:0; width:6px; background:var(--teal);}
.host-photo{width:100%; aspect-ratio:1; object-fit:cover; border-radius:16px;}
.host-info{display:flex; flex-direction:column; gap:10px;}
.host-info .gen{color:var(--teal);}
.host-info h3{margin:0; font-size:1.7rem;}
.host-info p{margin:0; color:var(--muted); max-width:60ch;}
.notes-list{list-style:none; padding:0; margin:0; display:grid; gap:10px;}
.notes-list li{display:flex; gap:14px; padding:12px 16px; background:var(--card); border:1px solid var(--line); border-radius:12px;}
.notes-list .time{font-weight:700; color:var(--teal-deep); font-variant-numeric:tabular-nums;}

/* ---------- Player bar ---------- */
.player{display:flex; align-items:center; gap:18px; background:var(--teal-ink); color:#fff; border-radius:var(--radius); padding:20px 24px; margin:6px 0 10px;}
.player .play{width:56px; height:56px; border-radius:50%; background:var(--sunshine); border:0; cursor:pointer; display:grid; place-items:center; flex:none;}
.player .track{flex:1;}
.player .rail{height:6px; background:rgba(255,255,255,.25); border-radius:99px; overflow:hidden;}
.player .rail i{display:block; width:32%; height:100%; background:var(--sunshine);}
.player .t{font-size:.85rem; color:#cfe3e4; margin-top:8px;}
.platforms{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 0;}
.platforms a{display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:700; font-size:.9rem; color:var(--teal-deep); border:1.5px solid var(--line); padding:8px 14px 8px 12px; border-radius:999px;}
.platforms a:hover{border-color:var(--teal); background:var(--paper);}
.platform-ico{width:16px; height:16px; flex:none;}
.embed{border:0; width:100%; border-radius:12px; margin:10px 0 6px; display:block;}

/* Resource pages: document "sheet" card, checklist, fillable planner */
.sheet{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:36px 40px; box-shadow:0 8px 26px rgba(13,53,56,.05);}
.sheet .prose{max-width:none;}
.sheet-head{display:flex; justify-content:space-between; align-items:baseline; gap:16px; border-bottom:2px solid var(--line); padding-bottom:14px; margin-bottom:22px;}
.sheet-head h2{margin:0;}
.sheet-mark{font-family:var(--font-logo); font-weight:700; color:var(--teal);}
.sheet-mark i{color:var(--sunshine); font-style:normal;}

.checklist{list-style:none; padding:0; margin:0; display:grid; gap:10px;}
.checklist li{display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line); border-radius:12px; padding:12px 16px;}
.checklist input{margin-top:3px; width:18px; height:18px; accent-color:var(--teal); flex:none;}

.planner{display:grid; gap:18px;}
.planner .prow h4{margin:0 0 8px; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; color:var(--teal-deep);}
.planner .box{background:var(--peach-soft); border-radius:12px; padding:16px 18px;}
.field{width:100%; border:0; border-bottom:2px solid var(--line); background:transparent; font:inherit; padding:8px 2px; color:var(--teal-ink);}
.field:focus{outline:none; border-bottom-color:var(--teal);}
.fields3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px;}
@media(max-width:600px){ .fields3{grid-template-columns:1fr;} }
@media(max-width:560px){ .sheet{padding:24px 22px;} }

/* Interactive "start a task" widget */
.starter{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:32px 34px; box-shadow:0 12px 34px rgba(13,53,56,.08); margin:0 0 22px;}
.starter-step[hidden]{display:none;}
.starter-kicker{display:inline-block; font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-deep); background:var(--peach-soft); padding:5px 12px; border-radius:999px; margin-bottom:14px;}
.starter h2{font-size:clamp(1.3rem,3vw,1.7rem); line-height:1.2; margin:0 0 8px;}
.starter-step>p:not(.starter-do){margin:0 0 18px; color:var(--muted); max-width:none;}
.starter label{display:block; font-weight:700; margin-bottom:8px; color:var(--teal-ink);}
.starter .field{margin-bottom:22px; font-size:1.1rem;}
.starter-nav{display:flex; gap:12px; flex-wrap:wrap;}
.starter-do{font-size:1.2rem; color:var(--teal-ink); font-weight:700; background:var(--peach-soft); border-radius:12px; padding:16px 18px;}
.starter-do span{color:var(--teal-deep);}
.starter-timer{font-family:var(--font-logo); font-weight:700; font-size:clamp(2.8rem,9vw,3.6rem); color:var(--teal); text-align:center; margin:14px 0 24px; font-variant-numeric:tabular-nums; letter-spacing:.02em;}
.starter-orread{text-align:center; color:var(--muted); font-size:.92rem; font-weight:700; margin:0 0 24px;}

/* "Try one small thing" momentum block */
.tryone{max-width:680px; margin:0 auto; text-align:center;}
.tryone-ico{display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:50%; background:#fff; color:var(--teal); box-shadow:0 6px 18px rgba(13,53,56,.08); margin:0 auto 14px;}
.tryone-ico svg{width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.tryone h2{font-size:clamp(1.4rem,3.4vw,2rem); line-height:1.25; margin:6px 0 22px; color:var(--teal-ink); max-width:none; transition:opacity .2s ease;}
.tryone h2.is-swapping{opacity:0;}
.tryone-nav{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.tryone-nav[hidden]{display:none;}
.tryone-done{margin:20px 0 0;}
.done-msg{display:inline-flex; align-items:center; gap:10px; justify-content:center; font-weight:700; color:var(--teal-deep); font-size:1.05rem; margin:0 0 18px; max-width:none;}
.done-check{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--teal); color:#fff; flex:none; animation:done-pop .3s ease;}
.done-check svg{width:17px; height:17px;}
@keyframes done-pop{from{transform:scale(.6); opacity:0;} to{transform:scale(1); opacity:1;}}
.timer{display:flex; flex-direction:column; align-items:center; gap:14px;}
.timer-clock{font-family:var(--font-logo); font-weight:700; font-size:2.6rem; color:var(--teal-ink); font-variant-numeric:tabular-nums; letter-spacing:.02em; line-height:1;}
.timer-clock.is-done{color:var(--sienna);}
.timer-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.timer-note{margin:0; color:var(--teal-deep); font-weight:700;}
@media(prefers-reduced-motion:reduce){ .tryone h2{transition:none;} .done-check{animation:none;} }

/* Professional article layout */
.article{max-width:740px; margin:0 auto;}
.article-meta{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--teal-deep); margin-bottom:14px;}
.article-meta .dot{width:4px; height:4px; border-radius:50%; background:var(--line);}
.article h1.title{font-size:clamp(1.9rem,4vw,2.6rem); line-height:1.14; margin:0 0 18px;}
.byline{display:flex; align-items:center; gap:12px; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:0 0 28px; color:var(--muted); font-size:.92rem; line-height:1.4;}
.byline .avatar-sm{width:38px; height:38px; border-radius:50%; background:var(--teal); color:#fff; display:grid; place-items:center; font-family:var(--font-logo); font-weight:700; font-size:.9rem; flex:none;}
.byline .who{font-weight:700; color:var(--teal-ink);}
.takeaways{background:var(--peach-soft); border:1px solid #f2dcbe; border-radius:14px; padding:20px 24px; margin:0 0 30px;}
.takeaways h2{font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:#8a4a24; margin:0 0 10px;}
.takeaways ul{margin:0; padding-left:20px; display:grid; gap:7px;}
.takeaways li{color:var(--teal-ink);}
.article .prose{max-width:none;}
.article .prose>p:first-child{font-size:1.14rem; color:var(--teal-ink);}
.article .prose h2{font-size:1.3rem; margin:34px 0 10px;}
.tip{background:#e9f4f4; border-left:4px solid var(--teal); border-radius:0 12px 12px 0; padding:16px 20px; margin:26px 0;}
.tip strong{color:var(--teal-deep);}
.article-note{margin-top:34px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:.9rem; line-height:1.6;}

/* Episode transcript (collapsible) */
.transcript{margin:10px 0 4px; border:1px solid var(--line); border-radius:12px; padding:2px 20px; background:var(--paper);}
.transcript>summary{cursor:pointer; font-weight:700; color:var(--teal-deep); padding:14px 0; list-style:none;}
.transcript>summary::-webkit-details-marker{display:none;}
.transcript>summary::before{content:"\25B8\00a0\00a0";}
.transcript[open]>summary::before{content:"\25BE\00a0\00a0";}
.transcript .t-body{padding:4px 0 18px; max-width:var(--measure);}
.transcript .t-body p{margin:0 0 13px; color:var(--teal-ink);}
.transcript .t-note{font-size:.85rem; color:var(--muted); font-style:italic;}

@media print{
  header.site, footer.site, .crumb, .platforms, .aside, .no-print, section.tint-peach{display:none !important;}
  body{background:#fff;} .wrap{max-width:none; padding:0;} .cols{grid-template-columns:1fr;}
  .sheet{box-shadow:none; border:1px solid #ccc;} .field{border-bottom-color:#999;}
}

/* ---------- Two-column (episode page) ---------- */
.cols{display:grid; grid-template-columns:1fr 320px; gap:40px; align-items:start;}
.aside{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px;}
.aside h3{margin:0 0 12px; font-size:1.05rem;}
.aside ul{list-style:none; padding:0; margin:0; display:grid; gap:10px;}
.aside a{text-decoration:none; color:var(--teal-ink); font-weight:600;}
.aside a:hover{color:var(--teal-deep);}

/* ---------- Signed-in welcome bar (homepage) ---------- */
.welcome{position:relative; overflow:hidden; display:flex; align-items:center; gap:18px 22px; flex-wrap:wrap;
  background:linear-gradient(120deg,#eaf6f6,#f3fbfb); border:1px solid #cfe8e8; border-radius:20px;
  padding:20px 24px; box-shadow:0 8px 24px rgba(13,53,56,.05);}
.welcome::after{content:""; position:absolute; width:150px; height:150px; border-radius:50%;
  background:rgba(4,152,160,.08); right:-50px; top:-60px; pointer-events:none;}
.welcome-ico{position:relative; z-index:1; flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:50px; height:50px; border-radius:50%; background:var(--teal); color:#fff; box-shadow:0 6px 16px rgba(18,122,122,.28);}
.welcome-ico svg{width:25px; height:25px;}
.welcome-text{position:relative; z-index:1; margin-right:auto;}
.welcome-hi{margin:0; font-weight:800; font-size:1.2rem; color:var(--teal-deep,#0a5c5c); line-height:1.2;}
.welcome-sub{margin:2px 0 0; font-size:.92rem; color:var(--muted);}
.welcome-actions{position:relative; z-index:1; display:flex; gap:10px; flex-wrap:wrap;}
.welcome-link{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.92rem; text-decoration:none;
  color:var(--teal-deep); background:#fff; border:1.5px solid #cfe8e8; border-radius:999px; padding:9px 16px;
  transition:transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;}
.welcome-link svg{width:16px; height:16px; fill:currentColor;}
.welcome-link:hover{transform:translateY(-2px); border-color:var(--teal); box-shadow:0 6px 16px rgba(13,53,56,.10);}
.welcome-link.primary{background:var(--teal); border-color:var(--teal); color:#fff;}
.welcome-link.primary:hover{background:var(--teal-deep); border-color:var(--teal-deep);}
@media (max-width:560px){ .welcome-actions{width:100%;} .welcome-link{flex:1; justify-content:center;} }

/* ---------- Join / newsletter ---------- */
.join{background:var(--teal); color:#fff; border-radius:18px; padding:72px 52px; text-align:center; position:relative; overflow:hidden;}
.join::after{content:""; position:absolute; width:180px; height:180px; border-radius:50%; background:rgba(249,172,61,.25); right:-40px; bottom:-60px;}
.join h2{font-size:clamp(1.6rem,3.5vw,2.2rem); margin:0 0 10px; color:#fff;}
.join p{margin:0 auto 26px; color:#eafafa; max-width:50ch;}
.join form{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1;}
.join input{padding:15px 18px; border-radius:12px; border:0; font:inherit; min-width:280px;}
.join-ico{position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; margin:0 auto 18px;}
.join-ico svg{width:27px; height:27px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}

/* ---------- Quiz promo bar (homepage) ---------- */
.quizbar-inner{display:block; position:relative; text-align:center; text-decoration:none; color:var(--teal-ink);
  max-width:640px; margin:0 auto; padding:4px 0;
  transition:transform .2s ease;}
.quizbar-inner:hover{transform:translateY(-2px);}
.quizbar-inner:hover .quizbar-btn{transform:translateY(-1px);}
.quizbar-badge{position:relative; z-index:1; display:inline-block; background:var(--teal); color:#fff; font-weight:700; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; padding:6px 14px; border-radius:999px; margin-bottom:16px;}
.quizbar h2{position:relative; z-index:1; font-size:clamp(1.6rem,3.6vw,2.3rem); margin:0 0 10px;}
.quizbar p{position:relative; z-index:1; margin:0 auto 24px; color:var(--teal-ink); max-width:56ch;}
.quizbar-btn{position:relative; z-index:1;}

/* ---------- Footer ---------- */
footer.site{border-top:1px solid var(--line); padding:52px 0; margin-top:44px; color:var(--muted); background:var(--peach-soft);}
.fgrid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:28px;}
footer.site h4{color:var(--teal-ink); font-size:.9rem; text-transform:uppercase; letter-spacing:.05em; margin:0 0 12px;}
footer.site ul{list-style:none; padding:0; margin:0; display:grid; gap:8px;}
footer.site a{color:var(--muted); text-decoration:none;}
footer.site a:hover{color:var(--teal-deep);}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .grid-3{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:1fr 1fr;}
  .cols{grid-template-columns:1fr;}
  .mission-grid{grid-template-columns:1fr; gap:20px;}
  .host-feature{grid-template-columns:1fr; gap:22px; text-align:left;}
  .host-photo{width:150px; aspect-ratio:1;}
  .episode{grid-template-columns:80px 1fr;}
  .episode .art{width:80px;height:80px;}
  .episode .art::after{width:32px; height:32px; background-size:12px;}
  .episode .btn, .episode .go{grid-column:2;}
  .fgrid{grid-template-columns:1fr 1fr;}
  nav.main a:not(.nav-keep){display:none;}
}
@media (max-width:560px){
  .grid-4{grid-template-columns:1fr;}
  .fgrid{grid-template-columns:1fr;}
}

/* ---------- Landing intro animation ---------- */
.intro{position:fixed; inset:0; z-index:1000; background:#ffffff; overflow:hidden;}
.intro-svg{width:100%; height:100%; object-fit:cover; display:block;}
.intro-skip{position:absolute; bottom:26px; right:26px; z-index:1001; background:rgba(255,255,255,.92); color:var(--teal-ink); border:0; font:inherit; font-weight:700; padding:10px 18px; border-radius:999px; cursor:pointer;}
.intro-skip:hover{background:#fff;}
.intro.is-done{opacity:0; visibility:hidden; transition:opacity .6s ease;}
/* intro no longer hides the scrollbar (that caused the reveal to shift left) */
.intro-seen .intro{display:none;}          /* returning visitors this session: no replay */
@media (prefers-reduced-motion: reduce){
  .intro{display:none;}                     /* respect reduced-motion: skip the animation */
}

/* ---------- Landing hero: the teal world the animation lands on ---------- */
.lander{position:relative; min-height:100vh; background:var(--teal); color:#fff; overflow:hidden;}
.lander-anim{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; display:block; pointer-events:none;}
.lander-static-logo{display:none; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:max(26vw,46.5vh); height:auto; z-index:1; pointer-events:none;}  /* sized to match the animation's final wordmark so Skip doesn't jump */
.lander-inner{position:absolute; left:50%; top:58%; transform:translateX(-50%); width:100%; max-width:620px; padding:0 24px; text-align:center; z-index:3;}
.js .lander-inner{opacity:0;}
body.revealed .lander-inner{opacity:1; transition:opacity .9s ease .1s;}
.lander-motto{font-family:var(--font-logo); font-weight:700; color:#fff; font-size:clamp(.85rem,3.4vw,1.45rem); line-height:1.15; letter-spacing:.01em; margin:0 auto 10px; max-width:none; white-space:nowrap;}   /* the tagline: always one horizontal line, scales down with the viewport so it never wraps */
.lander-motto .dot{color:var(--sunshine);}
.lander-tag{color:rgba(255,255,255,.8); font-size:clamp(.9rem,1.8vw,1rem); line-height:1.5; max-width:44ch; margin:0 auto 30px; font-weight:500;}   /* clearly secondary supporting line under the tagline */
.lander .cta-row{justify-content:center;}
.lander-inner .cta-row{max-width:520px; margin:0 auto;}
.lander-inner .cta-row .btn{flex:1 1 0; justify-content:center;}   /* both hero buttons the same width */
/* show the frozen end-frame (static logo) instead of replaying, when not animating */
html.intro-seen .lander-anim, body.intro-skipped .lander-anim{display:none;}
html.intro-seen .lander-static-logo, body.intro-skipped .lander-static-logo{display:block;}
@media (prefers-reduced-motion: reduce){
  .lander-anim{display:none;}
  .lander-static-logo{display:block;}
}
.btn-onteal{background:transparent; color:#fff; border-color:rgba(255,255,255,.8);}
.btn-onteal:hover{background:rgba(255,255,255,.14);}
.scrollcue{margin:30px auto 0; color:#eafafa; font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; display:inline-flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none;}
.scrollcue svg{animation:cue 1.8s ease-in-out infinite;}
@keyframes cue{0%,100%{transform:translateY(0);} 50%{transform:translateY(5px);}}
.js .scrollcue{opacity:0;}
body.revealed .scrollcue{opacity:1; transition:opacity .8s ease .5s;}
.scrollcue{z-index:3;}
.intro-skip{z-index:5;}
body.revealed .intro-skip{display:none;}   /* skip only shows while the animation plays */

/* Header that sits over the teal hero, then turns solid on scroll */
.js .site--hero{opacity:0;}
body.revealed .site--hero{opacity:1; transition:opacity .8s ease;}
header.site--hero{position:fixed; left:0; right:0; top:0; background:rgba(255,255,255,.7); -webkit-backdrop-filter:saturate(1.1) blur(10px); backdrop-filter:saturate(1.1) blur(10px); border-bottom-color:var(--line);}
header.site--hero.scrolled{background:rgba(255,255,255,.85);}