/* MedPsycMoss shared stylesheet. Single source of truth for every page.
   See design-system.md. Do not fork this file per page. */
  /* self-hosted so there is no third-party round trip before first paint */
  @font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:300 800;font-stretch:100%;font-display:swap;src:url(/fonts/bricolage-grotesque-300-800.woff2) format('woff2')}
  @font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/inter-400-600.woff2) format('woff2')}
  @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/jetbrains-mono-400-600.woff2) format('woff2')}

  :root{
    /* ---- brand palette: maroon, navy, light pink, white ----
       every pair below was checked for WCAG AA on its intended background,
       see contrast.mjs. No teal anywhere in this system. */
    --base:#FFFFFF;
    --tint:#FBF1F4;          /* light pink, section backgrounds */
    --tint-deep:#F7E8EC;     /* light pink, cards and the patient panel */
    --navy-tint:#EFF1F7;     /* the doctor panel */
    --ink:#1B2A4A;           /* navy, body copy and the hero type */
    --muted:#55607D;         /* navy grey, secondary copy */
    --primary:#6E1F35;       /* deep maroon, buttons, links, headings accent */
    --primary-hi:#8C2A45;    /* hover */
    --accent:#A63A57;        /* ECG trace, vital dots, quote marks */
    --chip:#F3C6D2;          /* pill background */
    --chip-ink:#4A1424;      /* text on a pill */
    --on-dark:#F7D9E2;       /* pink text on the dark panels */
    --dark-a:#4A1526;        /* dark panel gradient start, maroon */
    --dark-b:#1B2A4A;        /* dark panel gradient end, navy */
    --line:rgba(27,42,74,0.14);
    --line-soft:rgba(27,42,74,0.08);
    --shadow:rgba(27,42,74,0.30);

    /* legacy aliases, so every component rule keeps working unchanged */
    --bg:var(--base);
    --bg-2:var(--tint);
    --card:var(--base);
    --pulse:var(--accent);
    --pulse-ink:var(--primary);
    --pulse-dim:rgba(166,58,87,0.10);
    --blue:var(--ink);
    --blue-ink:var(--ink);
    --coral:var(--accent);
    --coral-ink:var(--primary);

    --display:'Bricolage Grotesque',system-ui,sans-serif;
    --body:'Inter',system-ui,-apple-system,sans-serif;
    --mono:'JetBrains Mono',ui-monospace,monospace;
    /* dock box: 21px icon + 5 gap + 17 label + 8 link padding + 20 dock padding + 2 border */
    --dock-h:73px;
    --dock-gap:12px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);color:var(--ink);
    font-family:var(--body);font-size:16px;line-height:1.65;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
    /* the dock is fixed, so the document has to end above it or the footer
       sits underneath.  safe-area keeps it clear of the iPhone home bar too. */
    padding-bottom:calc(var(--dock-h) + var(--dock-gap) + 24px + env(safe-area-inset-bottom, 0px));
  }
  h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-0.02em}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;cursor:pointer}
  img{max-width:100%;height:auto}
  .wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 20px}

  .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;
  }
  .skip{
    position:absolute;left:12px;top:-60px;z-index:200;
    background:var(--pulse-ink);color:#fff;padding:12px 18px;border-radius:0 0 12px 12px;
    font-size:14px;font-weight:600;transition:top .2s;
  }
  .skip:focus{top:0}
  :focus-visible{outline:3px solid var(--pulse-ink);outline-offset:3px;border-radius:4px}

  /* vitals-style section label */
  .vital{
    font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--pulse-ink);
    display:inline-flex;align-items:center;gap:10px;
  }
  .vital::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pulse);animation:beat 1.4s ease-in-out infinite;flex-shrink:0}
  @keyframes beat{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(0.65);opacity:0.45}}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    font-size:14.5px;font-weight:600;padding:16px 26px;border-radius:14px;
    border:1px solid var(--pulse-ink);background:var(--pulse-ink);color:#fff;
    transition:.25s;min-height:50px;text-align:center;
  }
  .btn:hover{background:var(--primary-hi);transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(110,31,53,0.55)}
  .btn.dark{background:transparent;color:var(--ink);border-color:var(--line)}
  .btn.dark:hover{border-color:var(--pulse-ink);color:var(--pulse-ink);box-shadow:none}

  /* ============ top bar ============ */
  .top{
    position:sticky;top:0;z-index:60;
    background:rgba(255,255,255,0.86);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line-soft);
  }
  .top-in{display:flex;align-items:center;justify-content:space-between;height:62px;gap:12px}
  .logo{
    display:flex;align-items:baseline;gap:2px;font-family:var(--display);
    font-weight:800;font-size:19px;letter-spacing:-0.02em;
    padding:10px 0;min-height:44px;align-content:center;flex-wrap:wrap;
  }
  .logo .mp{color:var(--ink)}
  .logo .moss{color:var(--pulse-ink)}
  .logo .md{font-family:var(--mono);font-size:10px;color:var(--muted);margin-left:8px;letter-spacing:0.1em}
  .top-links{display:none}
  .top .btn{display:none}

  /* ============ hero ============ */
  .hero{position:relative;padding:30px 0 40px;overflow:hidden;background:linear-gradient(180deg,#FFFFFF,var(--tint))}
  .hero .mesh{
    position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(55% 40% at 88% 8%,rgba(27,42,74,0.09),transparent 70%),
      radial-gradient(45% 35% at 8% 90%,rgba(166,58,87,0.11),transparent 70%);
  }
  .kicker{
    font-family:var(--mono);font-size:11.5px;color:var(--muted);
    display:flex;gap:8px 18px;flex-wrap:wrap;margin-bottom:22px;line-height:1.5;
  }
  .kicker b{color:var(--pulse-ink);font-weight:600}
  .hero h1{
    font-size:clamp(50px,14.5vw,124px);
    text-transform:uppercase;letter-spacing:-0.03em;line-height:0.92;
  }
  .hero h1 .row{display:flex;align-items:center;gap:4vw}
  .hero h1 .amp{
    font-weight:300;font-style:italic;color:var(--pulse);
    font-size:0.55em;transform:translateY(0.06em);
  }
  .hero h1 .ghost{
    color:transparent;-webkit-text-stroke:1.5px rgba(27,42,74,0.55);
  }
  .hero .sub{
    color:var(--muted);font-size:clamp(15px,4.1vw,16.5px);
    max-width:44ch;margin-top:24px;text-wrap:pretty;
  }
  .hero .sub b{color:var(--ink);font-weight:600}
  .hero-cta{display:flex;flex-direction:column;gap:12px;margin-top:28px}
  .hero-cta .btn{width:100%}

  /* live ECG, clean chart-paper strip */
  .ecg{position:relative;margin-top:40px;height:120px;background:#fff;border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;box-shadow:0 16px 36px -26px rgba(27,42,74,0.35)}
  .ecg svg{position:absolute;inset:0;width:100%;height:100%}
  .ecg .grid line{stroke:rgba(110,31,53,0.12);stroke-width:1}
  .trace-base{fill:none;stroke:rgba(166,58,87,0.22);stroke-width:1.6}
  .trace{
    fill:none;stroke:var(--pulse);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  }
  .ecg .tag{
    position:absolute;top:10px;right:14px;font-family:var(--mono);
    font-size:10.5px;color:var(--muted);letter-spacing:0.1em;
  }
  .ecg .tag b{color:var(--pulse-ink)}

  /* ============ marquee ============ */
  .marquee{
    border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
    padding:16px 0;overflow:hidden;white-space:nowrap;background:var(--bg-2);
  }
  .marq-track{display:inline-flex;gap:0;animation:marq 26s linear infinite}
  .marq-track span{
    font-family:var(--display);font-weight:500;font-size:15px;color:var(--muted);
    padding:0 18px;display:inline-flex;align-items:center;gap:18px;
  }
  .marq-track span::after{content:"✚";color:var(--pulse);font-size:11px}
  @keyframes marq{to{transform:translateX(-50%)}}

  /* ============ sections ============ */
  section{padding:68px 0}
  .head{margin-bottom:32px}
  .head h2{font-size:clamp(32px,8.5vw,54px);margin-top:16px;letter-spacing:-0.025em}
  .head h2 .hl{color:var(--pulse-ink)}
  .head p{color:var(--muted);margin-top:14px;max-width:54ch;text-wrap:pretty}

  /* ============ credibility strip ============ */
  .stats{padding:36px 0}
  .stats-panel{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);
    border:1px solid var(--line-soft);border-radius:22px;overflow:hidden;
  }
  .stat{background:var(--card);padding:22px 18px}
  .stat .n{
    font-family:var(--display);font-weight:800;letter-spacing:-0.03em;line-height:1;
    font-size:clamp(24px,6.6vw,34px);color:var(--pulse-ink);
  }
  .stat .l{
    display:block;font-family:var(--mono);font-size:10px;letter-spacing:0.1em;
    text-transform:uppercase;color:var(--muted);margin-top:9px;line-height:1.6;
  }

  /* ============ bento store ============ */
  .bento{display:grid;grid-template-columns:1fr;gap:16px}
  .tile{
    position:relative;background:var(--card);border:1px solid var(--line-soft);
    border-radius:22px;padding:28px 24px;overflow:hidden;
    transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
    display:flex;flex-direction:column;
    box-shadow:0 14px 34px -26px rgba(27,42,74,0.30);
  }
  .tile:hover{transform:translateY(-5px);border-color:rgba(166,58,87,0.45);box-shadow:0 24px 44px -26px rgba(27,42,74,0.40)}
  .tile .num{
    font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:0.12em;
    display:flex;justify-content:space-between;gap:14px;margin-bottom:22px;
  }
  .tile .num .cat{text-align:right}
  /* product cover: 309/400 is the exact ratio of every cover in her store,
     so object-fit:cover crops nothing and nothing is ever stretched */
  .tile .cover{
    width:120px;aspect-ratio:309/400;flex-shrink:0;margin-bottom:20px;
    border-radius:12px;overflow:hidden;background:var(--bg-2);
    border:1px solid var(--line-soft);
  }
  .tile .cover img{width:100%;height:100%;object-fit:cover;display:block}
  .tile h3{font-size:24px;font-weight:700;letter-spacing:-0.02em;max-width:16ch}
  .tile p{color:var(--muted);font-size:14.5px;margin-top:12px;flex-grow:1;max-width:44ch;text-wrap:pretty}
  .tile .price{
    font-family:var(--mono);font-size:20px;font-weight:600;color:var(--ink);
    margin-top:18px;letter-spacing:-0.01em;
  }
  .tile .cta{
    margin-top:14px;display:inline-flex;align-items:center;gap:10px;
    font-weight:600;font-size:14px;color:var(--pulse-ink);
  }
  .tile .cta::after{content:"→";transition:transform .25s}
  .tile:hover .cta::after{transform:translateX(5px)}
  .tile.feature{
    background:linear-gradient(150deg,var(--dark-a),var(--dark-b) 80%);
    border-color:transparent;color:#fff;
  }
  .tile.feature h3{font-size:30px;color:#fff}
  .tile.feature p{color:rgba(255,255,255,0.82)}
  .tile.feature .price{color:#fff}
  .tile.feature .cta{color:var(--on-dark)}
  .tile.feature .num{color:rgba(255,255,255,0.72)}
  .tile.feature .cover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.18)}
  .tile.feature .spark{
    position:absolute;right:-30px;top:-30px;width:170px;height:170px;border-radius:50%;
    background:radial-gradient(circle,rgba(243,198,210,0.34),transparent 70%);
    animation:pulseGlow 4s ease-in-out infinite;pointer-events:none;
  }
  @keyframes pulseGlow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:0.55}}
  .tile.blue{background:linear-gradient(150deg,var(--navy-tint),#FFFFFF 75%);border-color:rgba(27,42,74,0.22)}
  .tile.blue .cta{color:var(--blue-ink)}
  .tile .chip{
    position:absolute;top:22px;right:22px;font-family:var(--mono);font-size:10px;
    letter-spacing:0.1em;color:var(--chip-ink);background:var(--chip);
    padding:5px 10px;border-radius:100px;font-weight:600;white-space:nowrap;
  }
  .tile.blue .chip{background:var(--blue-ink);color:#fff}
  /* the chip is pinned to the corner, so the meta row has to yield the space
     or the two collide at every width */
  .tile.has-chip .num{padding-right:126px}
  .store-more{margin-top:26px;display:flex}

  /* ============ free ============ */
  .free-list{display:flex;flex-direction:column;border-top:1px solid var(--line-soft)}
  .fr{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:22px 4px;border-bottom:1px solid var(--line-soft);transition:.25s;
    min-height:44px;
  }
  .fr:hover{padding-left:14px;background:linear-gradient(90deg,var(--pulse-dim),transparent 60%)}
  .fr>span{min-width:0}
  .fr .cat{
    display:block;font-family:var(--mono);font-size:10px;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--blue-ink);margin-bottom:7px;
  }
  .fr .t{display:block;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-0.015em;line-height:1.25}
  .fr .d{display:block;font-size:13.5px;color:var(--muted);margin-top:4px;text-wrap:pretty}
  .fr .tagm{
    font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:0.12em;
    color:var(--chip-ink);background:var(--chip);padding:6px 11px;border-radius:100px;flex-shrink:0;
  }

  /* ============ testimonials ============ */
  .quotes{display:grid;grid-template-columns:1fr;gap:16px}
  .qc{
    background:var(--card);border:1px solid var(--line-soft);border-radius:22px;
    padding:26px 24px;box-shadow:0 14px 34px -26px rgba(27,42,74,0.30);
    display:flex;flex-direction:column;
  }
  .qc .mark{font-family:var(--display);font-weight:800;font-size:42px;line-height:0.6;color:var(--pulse);height:24px}
  .qc blockquote{font-size:15px;color:var(--ink);margin-top:16px;flex-grow:1;text-wrap:pretty}
  .qc .by{
    font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;
    color:var(--muted);margin-top:18px;
  }

  /* ============ duality (story) ============ */
  /* Contained to the same 1140px measure as every other section rather than
     bleeding to the viewport edges, so the page reads as one centred column. */
  .dual-panel{
    border:1px solid var(--line-soft);border-radius:26px;overflow:hidden;
    box-shadow:0 18px 44px -34px rgba(27,42,74,0.45);
  }
  .dual-grid{display:grid;grid-template-columns:1fr}
  .half{padding:44px 24px;position:relative}
  .half.pt{background:var(--tint-deep)}
  .half.dr{background:var(--navy-tint)}
  .half .label{
    font-family:var(--mono);font-size:11px;letter-spacing:0.14em;color:var(--muted);
    text-transform:uppercase;margin-bottom:18px;display:block;
  }
  .half h3{font-size:clamp(30px,8vw,44px);letter-spacing:-0.025em}
  .half.pt h3{color:var(--coral-ink)}
  .half.dr h3{color:var(--pulse-ink)}
  .half p{
    color:var(--muted);margin-top:16px;font-size:15.5px;max-width:48ch;
    /* justified, flush to the panel's left edge; hyphenation stops the long
       clinical words from opening rivers at narrow widths */
    text-align:justify;text-align-last:start;
    -webkit-hyphens:auto;hyphens:auto;
  }
  .half p b{color:var(--ink);font-weight:600}
  .half .shot,.shot{
    margin-top:26px;width:100%;max-width:260px;border-radius:18px;overflow:hidden;
    border:1px solid var(--line-soft);box-shadow:0 18px 40px -28px rgba(27,42,74,0.50);
  }
  .half .shot img{display:block;width:100%;height:auto}
  .half .shot figcaption{
    font-family:var(--mono);font-size:10px;letter-spacing:0.1em;color:var(--muted);
    background:#fff;padding:10px 12px;text-transform:uppercase;
  }
  .dual-quote{
    text-align:center;padding:44px 24px;border-top:1px solid var(--line-soft);
    font-family:var(--display);font-weight:500;font-size:clamp(20px,5.4vw,30px);
    letter-spacing:-0.015em;line-height:1.25;background:#fff;
  }
  .dual-quote .q1{color:var(--coral-ink)}
  .dual-quote .q2{color:var(--pulse-ink)}
  .dual-quote .m{
    display:block;font-family:var(--mono);font-size:11px;color:var(--muted);
    margin-top:14px;letter-spacing:0.12em;font-weight:400;font-style:normal;
  }

  /* ============ podcast ============ */
  /* the tinted band is a contained panel, not a full-bleed stripe */
  .pod-in,.panel,.tint-band{
    background:var(--bg-2);border:1px solid var(--line-soft);
    border-radius:26px;padding:44px 24px;
  }
  .pod-shelf{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:4px 24px 20px;margin:0 -24px;scrollbar-width:none;
  }
  .pod-shelf::-webkit-scrollbar{display:none}
  .epi{
    scroll-snap-align:center;flex:0 0 78%;max-width:320px;
    background:var(--card);border:1px solid var(--line-soft);border-radius:20px;
    padding:24px;transition:.3s;box-shadow:0 14px 30px -24px rgba(27,42,74,0.30);
    display:flex;flex-direction:column;
  }
  .epi:hover{border-color:rgba(110,31,53,0.40);transform:translateY(-4px)}
  .epi .top-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
  .epi .pl{
    width:46px;height:46px;border-radius:50%;background:var(--pulse-ink);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;
  }
  .wave{display:flex;align-items:flex-end;gap:3px;height:26px}
  .wave i{width:3px;background:var(--blue);border-radius:2px;animation:eq 1.1s ease-in-out infinite alternate}
  @keyframes eq{from{height:20%}to{height:100%}}
  .epi h3{font-size:18px;font-weight:700;letter-spacing:-0.01em;line-height:1.3;flex-grow:1}
  .epi .m{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:12px;letter-spacing:0.08em}
  .pod .row{display:flex;flex-direction:column;gap:12px;margin-top:24px}

  /* ============ subscribe ============ */
  .sub-box{
    position:relative;overflow:hidden;border-radius:26px;
    background:linear-gradient(140deg,var(--dark-a),var(--dark-b));
    padding:46px 26px;text-align:center;color:#fff;
  }
  .sub-box .vital{color:var(--on-dark)}
  .sub-box .vital::before{background:var(--chip)}
  .sub-box h2{font-size:clamp(30px,7.4vw,46px);letter-spacing:-0.025em;color:#fff}
  .sub-box h2 .hl{color:var(--on-dark)}
  .sub-box p{color:rgba(255,255,255,0.85);margin:16px auto 10px;max-width:46ch;font-size:15px;text-wrap:pretty}
  .sub-box .gets{
    font-family:var(--mono);font-size:11px;letter-spacing:0.08em;color:var(--on-dark);
    margin:0 auto 26px;text-transform:uppercase;line-height:1.7;
  }
  .sub-box .btn{width:100%;background:#fff;color:var(--primary);border-color:#fff}
  .sub-box .btn:hover{background:var(--tint-deep);box-shadow:none}
  .sub-box .fine{margin-top:16px;font-family:var(--mono);font-size:10.5px;color:rgba(255,255,255,0.8);letter-spacing:0.1em}

  /* ============ footer ============ */
  footer{padding:48px 0 44px;border-top:1px solid var(--line-soft);background:var(--bg-2)}
  .foot-logo{font-family:var(--display);font-weight:800;font-size:22px}
  .foot-logo .moss{color:var(--pulse-ink)}
  .foot-bio{color:var(--muted);font-size:14.5px;margin-top:12px;max-width:56ch;text-wrap:pretty}
  .foot-sub{
    display:inline-flex;align-items:center;min-height:44px;margin-top:14px;
    font-size:13.5px;font-weight:600;color:var(--pulse-ink);
    border-bottom:1px solid rgba(110,31,53,0.38);
  }
  .foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px 20px;margin-top:30px}
  .foot-cols h2{
    font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--ink);margin-bottom:8px;
  }
  .foot-cols ul{list-style:none;display:flex;flex-direction:column;gap:2px}
  .foot-cols a{display:flex;align-items:center;min-height:44px;font-size:13.5px;color:var(--muted)}
  .foot-cols a:hover{color:var(--pulse-ink)}
  .disc{
    margin-top:30px;padding-top:22px;border-top:1px solid var(--line-soft);
    font-family:var(--mono);font-size:10.5px;color:var(--muted);
    line-height:1.9;letter-spacing:0.04em;
  }

  /* ============ app dock (mobile) ============ */
  .dock{
    position:fixed;left:12px;right:12px;z-index:70;
    bottom:calc(var(--dock-gap) + env(safe-area-inset-bottom, 0px));
    background:rgba(255,255,255,0.92);backdrop-filter:blur(16px);
    border:1px solid var(--line);border-radius:22px;
    display:flex;justify-content:space-around;padding:10px 6px;
    box-shadow:0 20px 50px -16px rgba(27,42,74,0.35);
  }
  .dock a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    font-size:10px;font-weight:600;color:var(--muted);letter-spacing:0.03em;
    padding:4px 10px;border-radius:14px;transition:.2s;min-width:56px;min-height:44px;
  }
  .dock a.on,.dock a:hover{color:var(--pulse-ink)}
  .dock svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

  /* reveal */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}

  /* ============ podcast page: show cards ============ */
  /* A .tile cannot be reused here: .tile is a single <a>, and each show card
     holds up to four separate platform links.  .tile .cover also hard-crops to
     the 309/400 store-cover ratio, which would slice the square podcast art. */
  .shows{display:grid;grid-template-columns:1fr;gap:18px}
  .show{
    display:flex;flex-direction:column;gap:20px;
    background:var(--card);border:1px solid var(--line-soft);border-radius:22px;
    padding:26px 22px;box-shadow:0 14px 34px -26px rgba(27,42,74,0.30);
  }
  .show .art{
    width:132px;flex-shrink:0;border-radius:16px;overflow:hidden;
    border:1px solid var(--line-soft);background:var(--bg-2);
  }
  /* height:auto, never object-fit: the three covers are not one ratio
     (600x750 and 600x600) and cropping her face is not acceptable */
  .show .art img{display:block;width:100%;height:auto}
  .show .label{
    display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--muted);margin-bottom:10px;
  }
  .show h3{font-size:clamp(24px,6.4vw,32px);letter-spacing:-0.02em}
  .show p{color:var(--muted);font-size:14.5px;margin-top:12px;max-width:52ch;text-wrap:pretty}
  /* the flagship show gets the same weight as .tile.feature in the bento */
  .show.lead{background:linear-gradient(150deg,var(--dark-a),var(--dark-b) 80%);border-color:transparent}
  .show.lead h3{color:#fff}
  .show.lead p{color:rgba(255,255,255,0.82)}
  .show.lead .label{color:var(--on-dark)}
  .show.lead .art{border-color:rgba(255,255,255,0.18);background:rgba(255,255,255,0.08)}

  /* platform picker: equal-weight links, two per row on the narrowest phone.
     .pod .row is a two-item column and cannot hold four labels without
     running four buttons deep. */
  .plat{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
  .plat .btn{width:100%;padding:14px 10px;font-size:13px;gap:6px}
  .plat.one{grid-template-columns:1fr}
  .show.lead .plat .btn{background:transparent;color:#fff;border-color:rgba(255,255,255,0.45)}
  .show.lead .plat .btn:hover{background:#fff;color:var(--primary);border-color:#fff;box-shadow:none}

  /* ============ podcast page: episode grid ============ */
  /* Nine episodes are too many for the homepage snap shelf, which sets
     flex:1 1 0 at desktop and would crush nine cards to about 110px each.
     Same .epi card, plain grid instead. */
  .epi-grid{display:grid;grid-template-columns:1fr;gap:14px}
  .epi-grid .epi{flex:none;max-width:none}

  /* ============ interior page hero ============ */
  /* Same mesh, kicker and rhythm as the homepage hero, but the headline is a
     sentence rather than the two-word PATIENT & DOCTOR lockup, so it takes a
     sentence-sized clamp and sentence case. */
  .hero.page{padding:30px 0 44px}
  .hero.page h1{
    font-size:clamp(36px,9.4vw,72px);text-transform:none;
    line-height:1.04;letter-spacing:-0.03em;max-width:15ch;
  }
  .hero.page h1 .hl{color:var(--pulse-ink)}

  /* ============ contact page: interior hero ============ */
  /* The homepage h1 is a two-word uppercase lockup at up to 124px. An interior
     page title is a sentence, so it needs its own scale and no uppercasing. */
  .hero.page-hero{padding:34px 0 44px}
  .hero.page-hero h1{
    font-size:clamp(38px,10vw,72px);text-transform:none;
    letter-spacing:-0.03em;line-height:1.02;max-width:15ch;margin-top:4px;
  }
  .hero.page-hero h1 .hl{color:var(--pulse-ink)}

  /* ============ forms ============ */
  /* No form component existed in the system. Named generically so the store,
     resource and podcast pages can reuse the same fields. */
  .contact-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
  .form-card{
    background:var(--card);border:1px solid var(--line-soft);border-radius:26px;
    padding:28px 22px;box-shadow:0 14px 34px -26px rgba(27,42,74,0.30);
  }
  .form-card h2{font-size:clamp(26px,6.6vw,36px);letter-spacing:-0.025em;margin-top:14px}
  .form-card h2 .hl{color:var(--pulse-ink)}
  .form-card>p{color:var(--muted);font-size:14.5px;margin-top:12px;max-width:52ch;text-wrap:pretty}
  .form-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:22px}
  .field{display:flex;flex-direction:column;gap:7px;min-width:0}
  .field label{
    font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--ink);
  }
  .field .req{color:var(--pulse-ink);margin-left:3px}
  .field .hint{font-size:12.5px;color:var(--muted);line-height:1.5;order:3}
  /* 16px prevents the iOS zoom-on-focus jump. 50px matches .btn for the tap floor.
     The border sits at 0.55 alpha so the control boundary clears 3:1 on white,
     which 1px of --line does not. */
  .field input,.field textarea{
    font-family:var(--body);font-size:16px;line-height:1.5;color:var(--ink);
    background:var(--base);border:1px solid rgba(27,42,74,0.55);border-radius:14px;
    padding:13px 14px;min-height:50px;width:100%;max-width:100%;
    -webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s;
  }
  .field textarea{min-height:150px;resize:vertical;line-height:1.6}
  .field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.8}
  .field input:hover,.field textarea:hover{border-color:var(--pulse-ink)}
  .field input:focus,.field textarea:focus{
    outline:none;border-color:var(--pulse-ink);box-shadow:0 0 0 3px rgba(110,31,53,0.18);
  }
  .field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--pulse-ink);outline-offset:2px}
  .form-actions{display:flex;flex-direction:column;gap:14px;margin-top:24px}
  .form-actions .btn{width:100%}
  .form-note{
    font-family:var(--mono);font-size:10.5px;letter-spacing:0.08em;line-height:1.8;
    color:var(--muted);text-transform:uppercase;
  }
  .form-card .form-note{margin-top:18px}
  /* spam trap for whatever endpoint is wired in later; hidden from AT as well */
  .hp{display:none}

  /* ============ contact aside ============ */
  .contact-aside{display:flex;flex-direction:column;gap:18px}
  .contact-aside .shot{margin-top:0}
  .aside-card{
    background:var(--tint);border:1px solid var(--line-soft);
    border-radius:26px;padding:24px 22px;
  }
  .aside-card h3{font-size:20px;letter-spacing:-0.02em;color:var(--pulse-ink)}
  .reasons{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:16px}
  .reasons li{position:relative;padding-left:26px;font-size:14.5px;color:var(--muted);line-height:1.6;text-wrap:pretty}
  .reasons li::before{content:"\271A";position:absolute;left:0;top:0;color:var(--pulse);font-size:11px;line-height:1.9}
  .social-list{list-style:none;display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px}
  .social{
    display:flex;align-items:center;gap:12px;min-height:48px;padding:11px 14px;
    border-radius:14px;background:var(--card);border:1px solid var(--line-soft);
    color:var(--ink);transition:.2s;
  }
  .social:hover{border-color:var(--pulse-ink);color:var(--pulse-ink);transform:translateY(-2px)}
  .social svg{
    width:20px;height:20px;flex-shrink:0;stroke:currentColor;fill:none;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  }
  .social .tx{display:flex;flex-direction:column;min-width:0}
  .social .n{font-size:14px;font-weight:600;line-height:1.35}
  .social .h{font-family:var(--mono);font-size:10.5px;letter-spacing:0.06em;color:var(--muted)}
  .social:hover .h{color:var(--pulse-ink)}

  /* ============ email sign-up on the dark panel ============ */
  /* .sub-box was link-only. These are the same fields restyled for the dark
     gradient: 0.55 alpha borders clear 3:1 against the panel, labels use
     --on-dark which is 10.82:1 there. */
  .sub-form{
    display:grid;grid-template-columns:1fr;gap:14px;margin:0 auto;
    max-width:520px;text-align:left;
  }
  .sub-form .field label{color:var(--on-dark)}
  .sub-form .field .req{color:var(--chip)}
  .sub-form .field input{
    background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.55);color:#fff;
  }
  .sub-form .field input::placeholder{color:rgba(255,255,255,0.72);opacity:1}
  .sub-form .field input:hover{border-color:#fff}
  .sub-form .field input:focus{border-color:#fff;box-shadow:0 0 0 3px rgba(247,217,226,0.35)}
  .sub-form .field input:focus-visible{outline:3px solid var(--chip);outline-offset:2px}
  .sub-form .form-actions{align-items:center;text-align:center}
  .sub-form .form-note{color:rgba(255,255,255,0.8)}

  /* ============ two-up prose blocks ============ */
  .duo{display:grid;grid-template-columns:1fr;gap:20px}
  .duo h3{font-size:20px;letter-spacing:-0.02em;color:var(--pulse-ink)}
  .duo p{color:var(--muted);font-size:14.5px;margin-top:10px;max-width:46ch;text-wrap:pretty}
  .panel .quotes{margin-top:26px}
  .btn-row{display:flex;flex-direction:column;gap:12px;margin-top:26px}
  .btn-row+.form-note{margin-top:14px}

  /* ============ page-level notice ============ */
  /* Every resource page owes an education-not-medical-advice note. This is the
     shared container for it. */
  .note{background:var(--tint);border:1px solid var(--line-soft);border-radius:22px;padding:22px}
  .note h2{
    font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--pulse-ink);line-height:1.6;margin-bottom:12px;
  }
  .note p{font-size:13.5px;color:var(--muted);line-height:1.8;text-wrap:pretty}
  .note p+p{margin-top:12px}
  .note b{color:var(--ink);font-weight:600}

  /* ================= desktop scale-up ================= */
  @media(min-width:780px){
    body{padding-bottom:0}
    .wrap{padding:0 40px}
    .top-in{height:72px}
    .top-links{display:flex;gap:26px;list-style:none}
    .top-links a{font-size:13.5px;font-weight:500;color:var(--muted);transition:.2s;font-family:var(--mono);letter-spacing:0.04em}
    .top-links a:hover{color:var(--pulse-ink)}
    .top .btn{display:inline-flex;padding:11px 20px;min-height:0;font-size:13px}
    .hero{padding:88px 0 56px}
    .hero-cta{flex-direction:row}
    .hero-cta .btn{width:auto}
    .ecg{height:150px}
    .stats{padding:44px 0}
    .stats-panel{grid-template-columns:repeat(4,1fr)}
    .stat{padding:30px 26px}
    .bento{grid-template-columns:repeat(6,1fr)}
    .tile.feature{grid-column:span 4}
    .tile.t2{grid-column:span 2}
    .tile.t3,.tile.t4,.tile.t5,.tile.t6{grid-column:span 3}
    .tile .cover{width:140px}
    .quotes{grid-template-columns:repeat(3,1fr);align-items:start}
    .dual-panel{border-radius:30px}
    .dual-grid{grid-template-columns:1fr 1fr}
    .half{padding:64px 44px}
    .half.dr{border-left:1px solid var(--line-soft)}
    .half .shot,.shot{max-width:280px}
    .pod-in,.panel,.tint-band{padding:64px 48px;border-radius:30px}
    .pod-shelf{margin:0;padding:4px 0 10px;overflow:visible}
    .epi{flex:1 1 0;max-width:none}
    .pod .row{flex-direction:row}
    .sub-box{padding:70px 60px}
    .sub-box .btn{width:auto}
    .dock{display:none}
    footer{padding:56px 0}
    .foot-cols{grid-template-columns:repeat(3,1fr);gap:26px 40px;max-width:760px}
    .foot-cols a{min-height:32px}
    .foot-cols ul{gap:0}
    section{padding:96px 0}

    /* ============ podcast page ============ */
    .hero.page{padding:76px 0 60px}
    .shows{grid-template-columns:1fr 1fr;gap:20px}
    .show{padding:34px 30px;gap:24px}
    .show .art{width:150px}
    .show.lead{grid-column:1 / -1;display:grid;grid-template-columns:230px 1fr;gap:36px;align-items:start}
    .show.lead .art{width:230px}
    .plat{display:flex;flex-wrap:wrap}
    .plat .btn{width:auto;padding:13px 18px}
    .epi-grid{grid-template-columns:repeat(3,1fr);gap:18px}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .reveal{opacity:1;transform:none}
    html{scroll-behavior:auto}
    .trace{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  }

  /* ============================================================
     /store page additions
     ============================================================ */

  /* ============ inner-page hero ============ */
  /* .hero h1 is bespoke to the homepage PATIENT & DOCTOR wordmark: uppercase and
     up to 124px across two rows. Inner pages need the same gradient, mesh and
     kicker with a normal display-size sentence heading, so this is a modifier on
     the existing component rather than a second hero. */
  .hero.inner{padding:34px 0 44px}
  .hero.inner h1{
    font-size:clamp(34px,9vw,62px);
    text-transform:none;letter-spacing:-0.03em;line-height:1.04;
    margin-top:18px;max-width:15ch;
  }
  .hero.inner h1 .hl{color:var(--pulse-ink)}
  .hero.inner .sub{max-width:52ch}

  /* ---- bento meta row: let it wrap ----
     .tile.has-chip .num reserves 126px for the pinned chip. At 360px that leaves
     ~146px for the format label plus the category, which is narrower than their
     combined min-content width, so the row was clipped by .tile{overflow:hidden}.
     Wrapping fixes it here and on the homepage; margin-left:auto keeps .cat hard
     right whether it shares the line or takes its own. */
  .tile .num{flex-wrap:wrap;row-gap:6px}
  .tile .num .cat{margin-left:auto}

  /* ============ how it works ============ */
  /* Delivery, turnaround and booking facts taken from her own product pages.
     Not statistics, not free-resource rows, not testimonials, so no existing
     component fits. Same panel construction as .stats-panel, prose sized. */
  .howto{
    display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-soft);
    border:1px solid var(--line-soft);border-radius:22px;overflow:hidden;
  }
  .howto .h{background:var(--card);padding:24px 20px}
  .howto .h h3{
    font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--pulse-ink);line-height:1.6;
  }
  .howto .h p{color:var(--muted);font-size:14.5px;margin-top:10px;text-wrap:pretty}
  .howto .h .lnk{
    display:inline-flex;align-items:center;min-height:44px;margin-top:4px;
    font-size:13.5px;font-weight:600;color:var(--pulse-ink);
    border-bottom:1px solid rgba(110,31,53,0.38);
  }
  .howto .h .lnk:hover{color:var(--primary-hi)}

  @media(min-width:780px){
    .hero.inner{padding:64px 0 60px}
    .hero.inner h1{max-width:18ch}
    .howto{grid-template-columns:1fr 1fr}
    .howto .h{padding:32px 30px}
  }

  /* ============================================================
     /about-me page additions
     ============================================================ */

  /* ---- pre-existing gap fix ----
     design-system.md documents .qc.long as "spans two rows on desktop" but no
     rule ever shipped for it. About's first testimonial uses the modifier, so
     it is added here rather than left silently inert. */
  .qc.long{grid-row:span 2}

  /* ============ page hero (About) ============ */
  /* The homepage hero is a full-bleed type slab with the ECG strip. An interior
     page needs a portrait beside a normal-cased h1, so this modifier resets the
     uppercase display treatment and adds a two-column grid at desktop. */
  .hero-page h1{
    text-transform:none;
    font-size:clamp(38px,10.5vw,74px);
    line-height:1.0;letter-spacing:-0.03em;
  }
  .hero-page h1 .hl{color:var(--pulse-ink)}
  .hero-page .sub{max-width:50ch}
  .hero-in{position:relative;display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
  .hero-shot{
    width:100%;max-width:320px;border-radius:22px;overflow:hidden;
    border:1px solid var(--line-soft);background:var(--tint-deep);
    box-shadow:0 22px 48px -30px rgba(27,42,74,0.55);
  }
  .hero-shot img{display:block;width:100%;height:auto}
  .hero-shot figcaption{
    font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;
    color:var(--muted);background:#fff;padding:10px 12px;line-height:1.5;
  }

  /* ============ credentials ============ */
  .cred-in{display:grid;grid-template-columns:1fr;gap:30px;align-items:start}
  .cred-list{list-style:none;display:flex;flex-direction:column;gap:13px}
  .cred-list li{
    display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
    font-size:15.5px;line-height:1.55;color:var(--ink);text-wrap:pretty;
  }
  .cred-list li::before{content:"✚";color:var(--pulse);font-size:11px;line-height:1.9}
  .cred-note{
    margin-top:24px;padding-top:22px;border-top:1px solid var(--line-soft);
    font-family:var(--display);font-weight:500;letter-spacing:-0.015em;
    font-size:clamp(18px,4.6vw,22px);line-height:1.3;
    color:var(--pulse-ink);max-width:40ch;text-wrap:pretty;
  }
  .cred-shot{
    width:100%;max-width:260px;border-radius:18px;overflow:hidden;
    border:1px solid var(--line-soft);box-shadow:0 18px 40px -28px rgba(27,42,74,0.50);
  }
  .cred-shot img{display:block;width:100%;height:auto}
  .cred-shot figcaption{
    font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;
    color:var(--muted);background:#fff;padding:10px 12px;line-height:1.5;
  }

  /* ============ timeline ============ */
  /* Spine sits at x=6px inside the 26px gutter; each node is centred on it. */
  .timeline{position:relative;padding-left:26px}
  .timeline::before{
    content:"";position:absolute;left:5px;top:10px;bottom:10px;width:2px;
    background:linear-gradient(180deg,var(--chip),var(--line-soft));
  }
  .tl-item{position:relative;padding-bottom:34px}
  .tl-item:last-child{padding-bottom:0}
  .tl-item::before{
    content:"";position:absolute;left:-26px;top:6px;width:12px;height:12px;
    border-radius:50%;background:var(--pulse);border:3px solid var(--base);
  }
  .tl-item .ph{
    display:block;font-family:var(--mono);font-size:10.5px;font-weight:600;
    letter-spacing:0.12em;text-transform:uppercase;color:var(--pulse-ink);line-height:1.5;
  }
  .tl-item h3{font-size:22px;margin-top:9px;line-height:1.2;letter-spacing:-0.02em}
  .tl-item p{
    color:var(--muted);font-size:15px;margin-top:11px;max-width:62ch;text-wrap:pretty;
  }
  .tl-item p + p{margin-top:12px}

  /* ============ populations ============ */
  .pop-grid{display:grid;grid-template-columns:1fr;gap:14px}
  .pop{
    background:var(--card);border:1px solid var(--line-soft);border-radius:20px;
    padding:24px 22px;box-shadow:0 14px 34px -26px rgba(27,42,74,0.30);
  }
  .pop h3{font-size:19px;line-height:1.25;letter-spacing:-0.015em;color:var(--ink);text-wrap:pretty}
  .pop dl{margin-top:16px}
  .pop dl > div{margin-top:11px}
  .pop dl > div:first-child{margin-top:0}
  .pop dt{
    font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:0.14em;
    text-transform:uppercase;color:var(--pulse-ink);
  }
  .pop dd{font-size:14px;line-height:1.55;color:var(--muted);margin-top:4px;text-wrap:pretty}

  /* ================= desktop scale-up, About page components ================= */
  @media(min-width:780px){
    .hero-in{grid-template-columns:1.3fr 0.7fr;gap:56px;align-items:center}
    .hero-shot{max-width:340px;justify-self:end}
    .cred-in{grid-template-columns:1fr auto;gap:56px;align-items:center}
    .cred-shot{max-width:280px}
    .tl-item h3{font-size:26px}
    .tl-item p{font-size:15.5px}
    .pop-grid{grid-template-columns:repeat(3,1fr);gap:16px}
    .pop{padding:28px 26px}
  }

  /* ============================================================
     /my-work page additions
     ============================================================ */

  /* ============ my-work: in-page jump nav ============ */
  /* This page is a long, list-heavy record with six distinct sections, so it
     needs its own table of contents. The old site carried the same idea in its
     "More" nav. Scrolls horizontally on the phone, wraps on desktop. */
  .jump{
    display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
    padding:0 20px;margin:26px -20px 0;
  }
  .jump::-webkit-scrollbar{display:none}
  .jump a{
    flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;
    padding:10px 16px;border-radius:100px;
    background:var(--card);border:1px solid var(--line);color:var(--muted);
    font-family:var(--mono);font-size:11px;font-weight:600;
    letter-spacing:0.1em;text-transform:uppercase;white-space:nowrap;transition:.2s;
  }
  .jump a:hover{color:var(--pulse-ink);border-color:var(--pulse-ink)}

  /* ============ my-work: static list rows ============ */
  /* Most of her talks have no public recording or deck. They still belong in
     the record, so .fr gets a non-link variant that keeps the row rhythm and
     drops the hover affordance that would promise a destination. */
  .fr.static{cursor:default}
  .fr.static:hover{padding-left:4px;background:none}

  /* ============ my-work: grouped lists ============ */
  .lgroup + .lgroup{margin-top:34px}
  .lg-h{
    font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--pulse-ink);margin:0 0 12px;
  }

  /* ============ my-work: outlet chips ============ */
  /* Ten published pieces are linked from the old site as bare screenshots with
     no title text anywhere in its DOM. Rather than invent titles, they ship as
     outlet chips until the client supplies the real ones. A .fr row would
     demand a title and a blurb that do not exist. */
  .pub-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
  .pc{
    display:inline-flex;align-items:center;gap:9px;min-height:44px;
    padding:11px 16px;border-radius:14px;
    background:var(--tint);border:1px solid var(--line-soft);
    font-size:13.5px;font-weight:600;color:var(--ink);transition:.2s;
  }
  .pc .n{font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--muted);letter-spacing:0.08em}
  .pc::after{content:"\2197";font-size:12px;color:var(--pulse-ink)}
  .pc:hover{border-color:var(--pulse-ink);color:var(--pulse-ink);transform:translateY(-2px)}

  /* ============================================================
     /contact page additions
     ============================================================ */
  @media(min-width:780px){
    .hero.page-hero{padding:72px 0 64px}
    .contact-grid{grid-template-columns:1.2fr 1fr;gap:28px}
    .form-card{padding:44px 40px;border-radius:30px}
    .form-grid{grid-template-columns:1fr 1fr;gap:18px}
    .field.wide{grid-column:1 / -1}
    .form-actions{flex-direction:row;align-items:center;justify-content:space-between;gap:20px}
    .form-actions .btn{width:auto}
    .form-card .form-note{margin-top:0}
    .aside-card{padding:30px 28px}
    .social-list{grid-template-columns:1fr 1fr}
    .sub-form{grid-template-columns:1fr 1fr}
    .sub-form .form-actions{grid-column:1 / -1;flex-direction:column;justify-content:center}
    .sub-form .form-actions .btn{width:auto}
    .duo{grid-template-columns:1fr 1fr;gap:32px}
    .btn-row{flex-direction:row}
    .note{padding:28px 32px}
    .jump{margin:32px 0 0;padding:0;flex-wrap:wrap;overflow:visible}
    .lgroup + .lgroup{margin-top:46px}
    /* the awards list is nine one-line rows: two columns on desktop keeps the
       section from running the length of the viewport for no reason */
    .free-list.cols2{display:grid;grid-template-columns:1fr 1fr;column-gap:44px}
  }

  /* ============================================================
     /blog page additions
     ============================================================ */

  /* ============ interior page hero ============ */
  /* Shared by every non-home page. `.hero` is built around the 124px
     PATIENT & DOCTOR lockup and the ECG strip; an index page needs a short
     banner, so this is a sibling component, not a per-page override. */
  .page-hero{
    position:relative;overflow:hidden;padding:34px 0 44px;
    background:linear-gradient(180deg,#FFFFFF,var(--tint));
    border-bottom:1px solid var(--line-soft);
  }
  .page-hero h1{font-size:clamp(38px,10.5vw,68px);letter-spacing:-0.03em;margin-top:16px}
  .page-hero h1 .hl{color:var(--pulse-ink)}
  .page-hero .sub{
    color:var(--muted);font-size:clamp(15px,4.1vw,16.5px);
    max-width:62ch;margin-top:20px;text-wrap:pretty;
  }
  .page-hero .note{
    font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;
    text-transform:uppercase;color:var(--muted);margin-top:22px;
  }
  /* the header nav gains a current-page state on interior pages */
  .top-links a[aria-current="page"]{color:var(--pulse-ink);font-weight:600}

  /* ============ topic jump nav ============ */
  /* A 55-card archive needs an in-page index. Plain anchors, so the page
     filters with zero JavaScript and works from a shared link. */
  .topic-nav{
    display:flex;flex-wrap:wrap;gap:8px;list-style:none;
    padding:26px 0 0;margin:0;
  }
  .topic-nav a{
    display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;
    border-radius:100px;border:1px solid var(--line);background:var(--card);
    font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:0.08em;
    text-transform:uppercase;color:var(--pulse-ink);transition:.2s;
  }
  .topic-nav a:hover{background:var(--chip);border-color:var(--chip);color:var(--chip-ink)}

  /* ============ blog archive cards ============ */
  /* `.tile` carries a cover, a price and a checkout CTA and is sized for six
     items; `.fr` is a one-line row. Neither renders a dated, tagged, blurbed
     post at archive scale. `.post` borrows `.tile`'s surface, radius, shadow
     and arrow so the two read as one set. */
  .post-band{padding:48px 0;scroll-margin-top:76px}
  .post-band .head{margin-bottom:24px}
  /* seven repeated h2s at the 54px `.head` size would out-shout the one h1 */
  .post-band .head h2{font-size:clamp(26px,6.4vw,36px);margin-top:14px}
  .post-grid{display:grid;grid-template-columns:1fr;gap:14px}
  .post{
    position:relative;display:flex;flex-direction:column;
    background:var(--card);border:1px solid var(--line-soft);border-radius:20px;
    padding:22px 20px;overflow:hidden;
    transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
    box-shadow:0 14px 34px -28px rgba(27,42,74,0.30);
  }
  .post:hover{
    transform:translateY(-4px);border-color:rgba(166,58,87,0.45);
    box-shadow:0 22px 42px -28px rgba(27,42,74,0.40);
  }
  .post .meta{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    font-family:var(--mono);font-size:10px;letter-spacing:0.12em;
    text-transform:uppercase;margin-bottom:14px;
  }
  .post .cat{
    color:var(--chip-ink);background:var(--chip);padding:5px 10px;
    border-radius:100px;font-weight:600;white-space:nowrap;
  }
  .post .date{color:var(--muted);white-space:nowrap}
  .post h3{font-size:19px;line-height:1.25;letter-spacing:-0.015em;text-wrap:pretty}
  .post p{color:var(--muted);font-size:14px;margin-top:10px;flex-grow:1;text-wrap:pretty}
  .post .go{
    margin-top:16px;display:inline-flex;align-items:center;gap:8px;
    font-weight:600;font-size:13.5px;color:var(--pulse-ink);
  }
  .post .go::after{content:"→";transition:transform .25s}
  .post:hover .go::after{transform:translateX(5px)}
  .post.feature{
    background:linear-gradient(150deg,var(--dark-a),var(--dark-b) 80%);
    border-color:transparent;color:#fff;
  }
  .post.feature h3{color:#fff;font-size:22px}
  .post.feature p{color:rgba(255,255,255,0.82)}
  .post.feature .date{color:rgba(255,255,255,0.72)}
  .post.feature .go{color:var(--on-dark)}

  @media(min-width:780px){
    .page-hero{padding:64px 0 68px}
    .topic-nav{padding-top:34px}
    .post-band{padding:64px 0;scroll-margin-top:88px}
    .post-band .head{margin-bottom:30px}
    .post{padding:28px 26px}
    .post h3{font-size:21px}
    .post.feature h3{font-size:24px}
    /* auto-fill keeps the single 780px breakpoint: 2 up from 780,
       3 up once .wrap reaches its 1140px cap. No second media query. */
    .post-grid{grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:18px}
  }

  /* ============================================================
     /resources page additions
     ============================================================ */

  /* ============ interior page hero ============ */
  /* One-word h1s ("Resources") overflow at 360px at the homepage hero scale,
     because 14.5vw assumes a hero title that can break across lines. This
     modifier keeps a single long word inside the 320px content box at 360
     and still reads as the same display treatment. */
  .hero h1.tight{font-size:clamp(44px,12.4vw,110px)}

  /* ============ resource hub ============ */
  /* Ten equal library cards. The card, its h3, p, .num and .cta all come from
     the existing .tile component; only the grid and a slightly denser card
     scale are new, because .bento is a 6-column product layout with explicit
     span classes and cannot lay out ten equal items. */
  .lib-grid{display:grid;grid-template-columns:1fr;gap:14px}
  .lib-grid .tile{padding:24px 22px}
  .lib-grid .tile .num{margin-bottom:16px}
  .lib-grid .tile h3{font-size:20px;max-width:22ch}
  .lib-grid .tile p{font-size:14px;margin-top:10px}

  /* education-not-medical-advice note: label span and paragraph measure.
     .note already exists site-wide (see contact.html) as a standalone section
     with its own h2 and box styling. Here the note is the last child of the
     libraries band, which already owns an h2 for that section; a second h2
     would break this page's one-h2-per-section rule, so the label is a plain
     mono span instead. The box, paragraph colour and paragraph spacing already
     defined on .note are reused as-is, not forked. */
  .note .l{
    display:block;font-family:var(--mono);font-size:10px;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--pulse-ink);margin-bottom:10px;
  }
  .note p{max-width:70ch}
  .lib-grid+.note{margin-top:26px}

  @media(min-width:780px){
    .lib-grid{grid-template-columns:repeat(2,1fr);gap:16px}
    .lib-grid .tile{padding:28px 26px}
    .lib-grid+.note{margin-top:32px}
  }

  /* ============ breadcrumbs (resource libraries and their child pages) ============ */
  /* Tap targets carry the 44px floor on mobile, per the accessibility bar. */
  .crumbs{
    display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;
    font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;
    text-transform:uppercase;margin-bottom:14px;
  }
  .crumbs a,.crumbs span{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;min-width:44px;
    color:var(--muted);text-decoration:none;
  }
  .crumbs a:hover{color:var(--primary);text-decoration:underline}
  .crumbs [aria-current]{color:var(--ink);font-weight:600}
  .crumbs [aria-hidden]{color:var(--line);min-height:0;min-width:0}

  /* Resource titles and bare URLs come from third parties and can be long
     single tokens; they must wrap rather than force a horizontal scrollbar. */
  .fr .t,.fr .d{overflow-wrap:anywhere}
  .kicker{flex-wrap:wrap}

  @media(min-width:780px){
    .crumbs{font-size:11px;margin-bottom:20px}
    .crumbs a,.crumbs span{min-height:0;min-width:0}
  }

  /* ============ article prose (blog posts, interviews) ============ */
  .prose{max-width:68ch}
  .prose p{color:var(--muted);font-size:16.5px;margin-bottom:20px;text-wrap:pretty}
  .prose h2{
    font-size:clamp(22px,5vw,30px);color:var(--ink);letter-spacing:-0.02em;
    margin:36px 0 14px;
  }
  .prose p b,.prose strong{color:var(--ink);font-weight:600}
  .prose a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
  .prose a:hover{color:var(--primary-hi)}
  @media(min-width:780px){
    .prose p{font-size:17px}
  }

  /* ============ "See all N" link on Free Guides group pages ============ */
  /* An inline link in body copy still has to clear the 44px tap floor. */
  .see-all{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;min-width:44px;padding:0 6px;
    font-weight:600;color:var(--primary);text-decoration:underline;
    text-underline-offset:3px;
  }
  .see-all:hover{color:var(--primary-hi)}

  /* ============ pictures inside an article ============ */
  .post-img{margin:26px 0}
  .post-img img{
    width:100%;height:auto;display:block;
    border-radius:16px;border:1px solid var(--line-soft);
  }
  .post-img figcaption{
    margin-top:9px;font-size:13.5px;color:var(--muted);text-wrap:pretty;
  }

  /* ============ product option picker ============ */
  .choose{
    display:flex;flex-direction:column;gap:12px;margin-top:22px;
    align-items:stretch;
  }
  .choose label{
    font-family:var(--mono);font-size:11px;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--pulse-ink);
  }
  .choose select{
    font-family:var(--body);font-size:15px;padding:14px 14px;border-radius:12px;
    border:1px solid var(--line);background:#fff;color:var(--ink);min-height:50px;
  }
  .choose select:focus-visible{border-color:var(--pulse-ink)}
  .choose .btn{width:100%}
  @media(min-width:780px){
    .choose{flex-direction:row;align-items:center;gap:14px}
    .choose label{flex:0 0 auto}
    .choose select{flex:1 1 auto;max-width:320px}
    .choose .btn{width:auto;flex:0 0 auto}
  }