/* ============ SOCIAL LISTEN IN — shared design system ============ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#eff6ff;          /* azure mist */
  --ink:#1e5a96;         /* azure ink */
  --muted:#6b93b8;       /* muted azure */
  --c1:#0ea5e9;          /* azure */
  --c2:#60a5fa;          /* soft sky blue */
  --c3:#2563eb;          /* mediterranean blue */
  --c4:#0284c7;          /* coastal accent */
  --deep:#1d4ed8;        /* azure deep */
  --glass:rgba(255,255,255,.55);
  --stroke:rgba(37,99,235,.16);
  --font:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--ink);overflow-x:hidden;line-height:1.5;-webkit-font-smoothing:antialiased}

/* ============ ANIMATED AURORA BACKGROUND ============ */
.aurora{position:fixed;inset:0;z-index:-3;overflow:hidden;filter:saturate(1.1)}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;mix-blend-mode:multiply;animation:float 22s ease-in-out infinite;will-change:transform}
.b1{width:55vw;height:55vw;background:radial-gradient(circle,#93c5fd,transparent 70%);top:-15%;left:-10%}
.b2{width:50vw;height:50vw;background:radial-gradient(circle,#7dd3fc,transparent 70%);bottom:-20%;right:-10%;animation-delay:-7s}
.b3{width:42vw;height:42vw;background:radial-gradient(circle,#60a5fa,transparent 70%);top:40%;left:35%;animation-delay:-14s}
@keyframes float{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(8vw,-6vh) scale(1.15)}
  66%{transform:translate(-6vw,8vh) scale(.9)}
}
.grid-overlay{position:fixed;inset:0;z-index:-2;
  background-image:radial-gradient(circle,rgba(14,165,233,.22) 1.5px,transparent 1.5px);
  background-size:34px 34px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%)}
.noise{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.02;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============ NAV ============ */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,5vw,64px);backdrop-filter:blur(14px);background:linear-gradient(180deg,rgba(238,247,251,.8),transparent);
  border-bottom:1px solid transparent;transition:.4s}
nav.scrolled{border-bottom:1px solid var(--stroke);background:rgba(238,247,251,.8)}
.logo{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.05rem;letter-spacing:.5px;color:inherit;text-decoration:none}
.logo .mark{height:46px;width:auto;display:block;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.logo:hover .mark{transform:rotate(-6deg) scale(1.08)}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;font-size:.92rem;font-weight:500;transition:.25s;position:relative}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:2px;background:linear-gradient(90deg,var(--c1),var(--c2));transition:.3s}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{padding:9px 20px;border-radius:999px;background:linear-gradient(90deg,var(--c1),var(--c3));color:#fff!important;font-weight:600;
  box-shadow:0 6px 24px rgba(14,165,233,.45)}
.nav-cta::after{display:none}

/* hamburger (injected by main.js) */
.burger{display:none;flex-direction:column;justify-content:center;align-items:stretch;gap:5px;width:46px;height:46px;
  border:1px solid var(--stroke);border-radius:13px;background:var(--glass);backdrop-filter:blur(10px);cursor:pointer;padding:0 11px}
.burger span{display:block;height:2.5px;border-radius:2px;background:var(--ink);transition:.35s cubic-bezier(.2,.7,.2,1)}
.burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mobile-menu{position:fixed;top:0;left:0;right:0;z-index:49;padding:100px 28px 30px;display:flex;flex-direction:column;
  background:rgba(238,247,251,.95);backdrop-filter:blur(22px);border-bottom:1px solid var(--stroke);
  box-shadow:0 24px 60px rgba(14,165,233,.18);transform:translateY(-110%);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.mobile-menu.open{transform:none}
.mobile-menu a{padding:16px 6px;font-size:1.15rem;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--stroke)}
.mobile-menu a.nav-cta{margin-top:18px;text-align:center;border-bottom:none;border-radius:999px;color:#fff}

/* ============ HERO (home) ============ */
header.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:120px clamp(20px,5vw,40px) 60px;position:relative}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:999px;border:1px solid var(--stroke);
  background:var(--glass);backdrop-filter:blur(10px);font-size:.8rem;color:var(--muted);margin-bottom:30px;letter-spacing:1px;text-transform:uppercase}
.badge .dot{width:8px;height:8px;border-radius:50%;background:#0ea5e9;box-shadow:0 0 12px #0ea5e9;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.4)}}
h1{font-size:clamp(2.8rem,9vw,7rem);font-weight:700;line-height:.95;letter-spacing:-2px;margin-bottom:24px}
/* entrance — smooth staggered rise */
.badge,header h1,.sub,.hero-cta{opacity:0;transform:translateY(28px);animation:rise 1s cubic-bezier(.2,.7,.2,1) forwards;will-change:transform,opacity}
header h1{animation-delay:.12s}
.sub{animation-delay:.26s}
.hero-cta{animation-delay:.4s}
@keyframes rise{to{opacity:1;transform:none}}
h1 .grad{background:linear-gradient(120deg,#1d4ed8,#0ea5e9 30%,#60a5fa 50%,#38bdf8 70%,#1d4ed8);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:300% auto;animation:shine 9s ease-in-out infinite;will-change:background-position}
@keyframes shine{0%{background-position:0% center}50%{background-position:100% center}100%{background-position:0% center}}
.sub{max-width:680px;font-size:clamp(1rem,2.4vw,1.3rem);color:var(--muted);margin-bottom:42px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.btn{padding:15px 32px;border-radius:999px;font-weight:600;font-size:1rem;text-decoration:none;cursor:pointer;border:none;transition:.3s;display:inline-flex;align-items:center;gap:10px;font-family:inherit}
.btn-primary{background:linear-gradient(90deg,var(--c1),var(--c3));color:#fff;box-shadow:0 10px 40px rgba(14,165,233,.4)}
.btn-primary:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 50px rgba(14,165,233,.6)}
.btn-ghost{background:var(--glass);border:1px solid var(--stroke);color:var(--ink);backdrop-filter:blur(10px)}
.btn-ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-3px)}

/* ============ PAGE HERO (interior pages) ============ */
header.page-hero{padding:190px clamp(20px,6vw,80px) 70px;text-align:center;max-width:1280px;margin:0 auto}
header.page-hero h1{font-size:clamp(2.6rem,7vw,4.8rem)}
.page-hero .eyebrow,.page-hero .lead,.page-hero .platforms{opacity:0;transform:translateY(28px);animation:rise 1s cubic-bezier(.2,.7,.2,1) forwards}
.page-hero .lead{animation-delay:.26s;margin:0 auto}
.page-hero .platforms{animation-delay:.4s}

/* ============ HOME WAVEFORM ============ */
.wave{display:flex;align-items:center;justify-content:center;gap:3px;height:90px;cursor:pointer;
  align-self:stretch;margin:60px calc(50% - 50vw) 0;padding:0 24px;opacity:.45}
.wave span{flex:1;border-radius:3px;background:linear-gradient(var(--c2),var(--c1),var(--c3));will-change:height,opacity}

/* ============ MARQUEE — tilted gradient ribbon ============ */
.marquee{overflow:hidden;padding:20px 0;white-space:nowrap;position:relative;z-index:3;
  background:linear-gradient(90deg,var(--c1),var(--c3) 55%,var(--deep));
  transform:rotate(-1.4deg) scale(1.04);margin:10px 0 26px;
  box-shadow:0 18px 44px rgba(14,165,233,.35);
  border-top:1px solid rgba(255,255,255,.35);border-bottom:1px solid rgba(255,255,255,.2)}
.marquee .track{display:inline-flex;gap:48px;animation:scroll 24s linear infinite;font-size:1.05rem;font-weight:600;color:rgba(255,255,255,.75);letter-spacing:.5px}
.marquee .track span{display:inline-flex;align-items:center;gap:48px}
.marquee .track b{color:#fff;text-shadow:0 0 18px rgba(255,255,255,.45)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ============ SECTIONS ============ */
section{padding:clamp(70px,12vw,140px) clamp(20px,6vw,80px);position:relative;max-width:1280px;margin:0 auto}
.eyebrow{color:var(--c4);font-weight:600;letter-spacing:3px;text-transform:uppercase;font-size:.82rem;margin-bottom:16px}
h2{font-size:clamp(2rem,5vw,3.4rem);font-weight:700;letter-spacing:-1px;line-height:1.05;margin-bottom:20px}
.lead{color:var(--muted);max-width:620px;font-size:1.08rem;margin-bottom:54px}

/* reveal animation */
.reveal{opacity:0;transform:translateY(40px);transition:.9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ============ COASTAL WAVE DIVIDERS — full bleed ============ */
.wave-divider{width:100%;margin:0;overflow:hidden;line-height:0}
.wave-divider svg{width:100%;height:46px;display:block;overflow:visible}
.wave-divider path{fill:none;stroke-width:2.5;stroke-linecap:round}
.wave-divider .w-front{stroke:var(--c1);opacity:.55;animation:drift 11s linear infinite;will-change:transform}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-300px)}}

/* ============ FEATURE CARDS ============ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.cards.single-row{grid-template-columns:repeat(4,1fr)}
.cards.single-row .card{padding:28px}
@media(max-width:1020px){.cards.single-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards.single-row{grid-template-columns:1fr}}
.card{padding:34px;border-radius:24px;background:var(--glass);border:1px solid var(--stroke);backdrop-filter:blur(14px);
  position:relative;overflow:hidden;transition:.4s}
.card::before{content:'';position:absolute;inset:0;border-radius:24px;padding:1px;
  background:linear-gradient(135deg,var(--c1),var(--c2),transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:.4s}
.card:hover{transform:translateY(-8px)}
.card:hover::before{opacity:1}
.card .ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:1.6rem;margin-bottom:22px;
  background:linear-gradient(135deg,rgba(14,165,233,.2),rgba(96,165,250,.2));border:1px solid var(--stroke)}
.card h3{font-size:1.35rem;margin-bottom:10px;font-weight:600}
.card p{color:var(--muted);font-size:.98rem}

/* ============ STATS ============ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:30px;text-align:center;
  padding:54px;border-radius:28px;background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(96,165,250,.08));border:1px solid var(--stroke)}
.stat .num{font-size:clamp(2.4rem,6vw,4rem);font-weight:700;
  background:linear-gradient(120deg,#1d4ed8,#0ea5e9);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lbl{color:var(--muted);margin-top:6px;font-size:.95rem;letter-spacing:.5px}

/* ============ EPISODES ============ */
.episodes{display:grid;gap:18px}
.ep{display:flex;align-items:center;gap:24px;padding:24px 28px;border-radius:20px;background:var(--glass);border:1px solid var(--stroke);
  transition:.35s;cursor:pointer;flex-wrap:wrap}
.ep:hover{background:rgba(255,255,255,.07);transform:translateX(8px)}
.ep .play{width:54px;height:54px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--c1),var(--c3));font-size:1.1rem;box-shadow:0 6px 20px rgba(14,165,233,.5);transition:.3s}
.ep:hover .play{transform:scale(1.12) rotate(8deg)}
.ep .meta{flex:1;min-width:200px}
.ep .meta .tag{font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--c4);font-weight:600}
.ep .meta h4{font-size:1.18rem;font-weight:600;margin:4px 0}
.ep .meta p{color:var(--muted);font-size:.9rem}
.ep .dur{color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums;white-space:nowrap}

/* featured episode */
.featured{display:flex;gap:40px;align-items:center;padding:44px;border-radius:28px;flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(14,165,233,.16),rgba(37,99,235,.1));border:1px solid var(--stroke)}
.featured .art{width:200px;height:200px;border-radius:24px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--c1),var(--c3));box-shadow:0 18px 50px rgba(14,165,233,.4)}
.featured .art svg{width:120px;height:auto}
.featured .info{flex:1;min-width:260px}
.featured .info h3{font-size:clamp(1.4rem,3vw,2rem);margin:6px 0 12px;letter-spacing:-.5px}
.featured .info p{color:var(--muted);margin-bottom:22px}

/* platform pills */
.platforms{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.platforms a{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:999px;text-decoration:none;
  background:var(--glass);border:1px solid var(--stroke);color:var(--ink);font-weight:600;font-size:.9rem;backdrop-filter:blur(10px);transition:.3s}
.platforms a:hover{transform:translateY(-3px);background:#fff;box-shadow:0 10px 26px rgba(14,165,233,.2)}

/* ============ BLOG ============ */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.post{border-radius:24px;overflow:hidden;border:1px solid var(--stroke);background:var(--glass);transition:.4s;cursor:pointer;
  text-decoration:none;color:inherit;display:block}
.post:hover{transform:translateY(-8px);border-color:rgba(37,99,235,.5)}
.post .thumb{height:160px;background-size:cover;position:relative;display:flex;align-items:flex-end;padding:16px;
  font-weight:700;font-size:1.05rem;color:#fff}
.post .thumb.t1{background:linear-gradient(135deg,#0ea5e9,#93c5fd)}
.post .thumb.t2{background:linear-gradient(135deg,#60a5fa,#2563eb)}
.post .thumb.t3{background:linear-gradient(135deg,#1d4ed8,#38bdf8)}
.post .body{padding:24px}
.post .body .tag{font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--c4);font-weight:600}
.post .body h4{font-size:1.2rem;margin:8px 0;font-weight:600}
.post .body p{color:var(--muted);font-size:.92rem;margin-bottom:14px}
.post .body .read{color:var(--c4);font-weight:600;font-size:.88rem}

/* filter chips */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:44px}
.chip-btn{padding:10px 22px;border-radius:999px;border:1px solid var(--stroke);background:var(--glass);color:var(--muted);
  font-family:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:.3s;backdrop-filter:blur(10px)}
.chip-btn:hover{color:var(--ink);transform:translateY(-2px)}
.chip-btn.active{background:linear-gradient(90deg,var(--c1),var(--c3));color:#fff;border-color:transparent;
  box-shadow:0 8px 24px rgba(14,165,233,.35)}

/* ============ ARTICLE ============ */
article{max-width:760px;margin:0 auto;padding:0 clamp(20px,6vw,40px) 80px}
.article-meta{color:var(--muted);font-size:.92rem;margin-top:14px}
.article-body{font-size:1.1rem;line-height:1.8;color:#2c5d8f}
.article-body p{margin-bottom:26px}
.article-body h2{font-size:1.7rem;margin:46px 0 18px;letter-spacing:-.5px}
.article-body ul,.article-body ol{margin:0 0 26px 24px}
.article-body li{margin-bottom:10px}
.article-body blockquote{margin:38px 0;padding:28px 34px;border-left:4px solid var(--c1);border-radius:0 20px 20px 0;
  background:linear-gradient(135deg,rgba(14,165,233,.1),rgba(96,165,250,.06));font-size:1.25rem;font-weight:500;color:var(--ink)}
.callout{margin:38px 0;padding:30px 34px;border-radius:20px;border:1px solid var(--stroke);
  background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(37,99,235,.07))}
.callout h3{margin-bottom:12px;font-size:1.15rem}
.callout ol{margin-left:22px}
.callout li{margin-bottom:8px;color:#2c5d8f}
.figure{margin:38px 0;padding:26px 26px 16px;border-radius:20px;background:#fff;border:1px solid var(--stroke);
  box-shadow:0 12px 34px rgba(14,165,233,.1)}
.figure svg{width:100%;height:auto;display:block}
.figure text{font-family:var(--font)}
.figure figcaption{margin-top:12px;font-size:.85rem;color:var(--muted);text-align:center}
.author-box{display:flex;align-items:center;gap:20px;margin-top:56px;padding:26px 30px;border-radius:22px;
  background:var(--glass);border:1px solid var(--stroke)}
.avatar{width:64px;height:64px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;color:#fff;font-weight:700;font-size:1.3rem;
  background:linear-gradient(135deg,var(--c1),var(--c3));box-shadow:0 8px 22px rgba(14,165,233,.4)}
.author-box .who h4{font-size:1.05rem}
.author-box .who p{color:var(--muted);font-size:.88rem}

/* ============ CTA / NEWSLETTER ============ */
.cta-box{text-align:center;padding:clamp(50px,8vw,90px);border-radius:32px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(14,165,233,.2),rgba(37,99,235,.14));border:1px solid var(--stroke)}
.cta-box::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(96,165,250,.3),transparent 50%)}
.cta-box>*{position:relative;z-index:2}
.signup{display:flex;gap:12px;max-width:480px;margin:34px auto 0;flex-wrap:wrap}
.signup input{flex:1;min-width:200px;padding:15px 22px;border-radius:999px;border:1px solid var(--stroke);
  background:rgba(255,255,255,.85);color:var(--ink);font-family:inherit;font-size:1rem;outline:none;transition:.3s}
.signup input:focus{border-color:var(--c2);box-shadow:0 0 0 3px rgba(96,165,250,.25)}
.thanks{margin-top:18px;color:#0ea5e9;font-weight:600;opacity:0;transition:.4s}

/* ============ FOOTER ============ */
footer{text-align:center;padding:60px 20px 40px;border-top:1px solid var(--stroke);color:var(--muted)}
footer .logo{justify-content:center}
.socials{display:flex;gap:18px;justify-content:center;margin:24px 0}
.socials a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--glass);border:1px solid var(--stroke);
  color:var(--ink);text-decoration:none;transition:.3s;font-weight:600}
.socials a:hover{transform:translateY(-4px) scale(1.1);background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff}
/* brand icons (inline SVGs tinted by currentColor) */
.icon-mask{display:inline-block;width:20px;height:20px;flex:0 0 auto}
.platforms .icon-mask{width:17px;height:17px}
footer .fine{font-size:.82rem;opacity:.6;margin-top:14px}
footer .fine a{color:var(--c1);text-decoration:none;font-weight:600}

/* ============ SCROLL ARROW ============ */
.scroll-arrow{position:fixed;bottom:28px;right:28px;z-index:40;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;border:1px solid var(--stroke);
  background:var(--glass);backdrop-filter:blur(10px);box-shadow:0 8px 28px rgba(14,165,233,.25);
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.scroll-arrow:hover{background:rgba(255,255,255,.85)}
.scroll-arrow.up{transform:rotate(180deg)}
.scroll-arrow svg{width:22px;height:22px;animation:bob 1.6s ease-in-out infinite;will-change:transform}
.scroll-arrow svg path{stroke:var(--c1);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
@keyframes bob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}

/* cursor glow */
.cursor-glow{position:fixed;width:400px;height:400px;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(96,165,250,.2),transparent 60%);transform:translate(-50%,-50%);transition:.15s ease-out}

/* ============ RESPONSIVE / MOBILE ============ */
/* touch devices: no mouse, no cursor glow */
@media(hover:none){.cursor-glow{display:none}}

@media(max-width:760px){
  /* nav: collapse to hamburger */
  .nav-links{display:none}
  .burger{display:flex}
  nav{padding:14px 18px}
  .logo .mark{height:40px}

  /* heroes */
  header.hero{padding:110px 20px 50px;min-height:92svh}
  h1{letter-spacing:-1px}
  header.page-hero{padding:140px 22px 50px}
  .sub{font-size:1.02rem}
  .hero-cta .btn{padding:14px 26px;font-size:.95rem}
  .wave{height:60px;margin-top:40px;padding:0 14px}
  .badge{font-size:.7rem;padding:7px 14px}

  /* layout rhythm */
  section{padding:60px 20px}
  .lead{margin-bottom:38px}
  .cards{gap:16px}
  .card{padding:26px}

  /* stats */
  .stats{padding:34px 22px;gap:22px;grid-template-columns:repeat(2,1fr)}

  /* episodes */
  .ep{padding:18px 18px;gap:14px}
  .ep .play{width:46px;height:46px}
  .ep .dur{width:100%;text-align:left;margin-left:60px;margin-top:-6px}

  /* featured */
  .featured{padding:26px;gap:24px;text-align:center;justify-content:center}
  .featured .art{width:140px;height:140px}
  .featured .info{min-width:0}

  /* blog */
  .chips{gap:8px}
  .chip-btn{padding:9px 16px;font-size:.84rem}
  .post .thumb{height:140px}

  /* article */
  .article-body{font-size:1.02rem}
  .article-body blockquote{padding:20px 22px;font-size:1.1rem}
  .callout{padding:22px 20px}
  .author-box{flex-direction:column;text-align:center}

  /* CTA + forms */
  .cta-box{padding:44px 22px}
  .signup{gap:10px}
  .signup .btn{width:100%;justify-content:center}

  /* platform pills */
  .platforms{gap:9px}
  .platforms a{padding:10px 16px;font-size:.84rem}

  /* fixed elements */
  .scroll-arrow{width:46px;height:46px;bottom:18px;right:18px}
  .marquee .track{font-size:.92rem}

  /* footer */
  footer{padding:46px 18px 32px}
}

/* very small screens */
@media(max-width:380px){
  h1{font-size:2.4rem}
  header.page-hero h1{font-size:2.2rem}
  .stats{grid-template-columns:1fr}
}