/* ============================================================
   PAGE LAYER — herai.co design system (from the sales page)
   ============================================================ */
body { display: block; padding: 0; }
.tm { font-size: 0.42em; vertical-align: super; }

:root {
  --white-page: #FAFAF8;
  --fs-hero: clamp(48px, 7.4vw, 94px);
  --fs-display: clamp(44px, 6.5vw, 74px);
  --fs-eyebrow: 15px;
  --fs-lede: 18px;
  --fs-card: 15px;
  --lh-lede: 1.7;
  --lh-card: 1.65;
  --fs-hand: 26px;
  --lh-hand: 1.12;
  --max-lede: 720px;
  --sec-pad: 124px;
  --w-container: 1180px;
  --w-narrow: 800px;
  --w-nav: 1320px;
  --grad-holo: linear-gradient(120deg, #ff6441 0%, #f08fae 35%, #e2a9f1 68%, #f5d9fd 100%);
  --wash-card: linear-gradient(135deg, rgba(255,100,65,0.05), rgba(226,169,241,0.10)), rgba(255,255,255,0.55);
  --border-soft: 1px solid rgba(226,169,241,0.45);
  --shadow-soft: 0 18px 48px rgba(46,46,46,0.08);
}
.container { max-width: var(--w-container); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: var(--w-narrow); margin: 0 auto; padding: 0 24px; }
section { padding: var(--sec-pad) 0; position: relative; }
[id] { scroll-margin-top: 110px; }
.sec-white { background: var(--white-page); box-shadow: 0 -1px 0 rgba(226,169,241,0.3), 0 1px 0 rgba(226,169,241,0.3); }
.sec-dark { background: var(--color-plum); color: var(--white-page); }
.eyebrow { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--color-coral); margin-bottom: 24px; }
.eyebrow.center { text-align: center; }
.sec-dark .eyebrow { color: var(--color-pink); }
h2.h-display { font-family: var(--font-loud); font-weight: 400; font-size: var(--fs-display); line-height: 0.95; letter-spacing: 1px; text-transform: uppercase; color: var(--color-plum); margin-bottom: 24px; text-wrap: balance; }
.sec-dark h2.h-display { color: var(--white-page); }
.h-display .pop, .accent { font-family: var(--font-fame); font-weight: 400; font-size: 0.95em; line-height: 1; text-transform: none; letter-spacing: 0; color: var(--color-coral); display: inline-block; transform: translateY(-0.09em); }
.sec-dark .h-display .pop { color: var(--color-pink); }
.lede { font-size: var(--fs-lede); line-height: var(--lh-lede); color: color-mix(in srgb, var(--color-plum) 78%, var(--white-page)); max-width: var(--max-lede); text-wrap: pretty; }
.sec-dark .lede { color: color-mix(in srgb, var(--white-page) 80%, var(--color-plum)); }
.center-block { text-align: center; }
.center-block .lede { margin: 0 auto; }
.btn { font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 16px 34px; border-radius: var(--radius-pill); text-decoration: none; display: inline-block; transition: transform 0.18s ease, box-shadow 0.18s ease; cursor: pointer; border: 1px solid transparent; text-align: center; }
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--color-coral); outline-offset: 3px; }
.btn.coral { background: rgba(255,100,65,0.94); color: #fff; border-color: rgba(255,175,155,0.65); box-shadow: 0 12px 36px rgba(255,100,65,0.42), inset 0 6px 14px -6px rgba(255,215,200,0.55), inset 0 -10px 18px -8px rgba(190,45,15,0.18); }
.btn.charcoal { background: rgba(46,46,46,0.92); color: var(--white-page); border-color: rgba(130,130,130,0.5); box-shadow: 0 12px 36px rgba(46,46,46,0.4), inset 0 6px 14px -6px rgba(210,210,210,0.35), inset 0 -10px 18px -8px rgba(0,0,0,0.35); }
.btn.white { background: rgba(255,255,255,0.72); color: var(--color-plum); border-color: rgba(255,255,255,0.85); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: 0 12px 40px rgba(226,169,241,0.32), inset 0 1.5px 0 rgba(255,255,255,1); }
.top-bar { display: block; background: var(--color-plum); color: var(--white-page); text-align: center; padding: 17px 20px; font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none; transition: background 0.2s ease; }
.top-bar:hover { background: #222222; }
.top-bar .live-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-circle); background: var(--color-lime); margin-right: 10px; vertical-align: 1px; animation: livePulse 2.2s ease-in-out infinite; }
.top-bar .bar-accent { color: var(--color-pink); margin: 0 6px; }
.top-bar .tb-count { color: var(--color-lime); margin-left: 8px; font-variant-numeric: tabular-nums; letter-spacing: 1.5px; }
@media (max-width: 560px) { .top-bar .tb-cta { display: none; } }
.top-bar .bar-arrow { display: inline-block; margin-left: 8px; transition: transform 0.2s ease; }
.top-bar:hover .bar-arrow { transform: translateX(4px); }
@keyframes livePulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@media (prefers-reduced-motion: reduce) { .top-bar .live-dot { animation: none; } }
.site-nav { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,0.62); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border-bottom: 1px solid rgba(255,255,255,0.85); box-shadow: 0 12px 40px rgba(226,169,241,0.18), inset 0 1.5px 0 rgba(255,255,255,1); }
.nav-inner { max-width: var(--w-nav); display: flex; align-items: center; gap: 28px; padding-top: 19px; padding-bottom: 19px; }
.nav-logo { font-family: var(--font-fame); font-weight: 400; font-size: 33px; line-height: 1; color: var(--color-coral); text-decoration: none; }
.nav-logo .pop { color: var(--color-coral); }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; color: color-mix(in srgb, var(--color-plum) 72%, var(--white-page)); transition: color 0.18s ease; }
.nav-links a:hover { color: var(--color-coral); }
.nav-cta { padding: 12px 24px; font-size: 12px; }
@media (max-width: 760px) { .nav-links { display: none; } .nav-inner { gap: 16px; } .nav-cta { margin-left: auto; } }
.hero { padding: 120px 0 96px; background: radial-gradient(900px 620px at 10% 12%, rgba(223,172,236,0.55), transparent 62%), radial-gradient(1000px 720px at 90% 82%, rgba(253,138,112,0.45), transparent 62%); }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 56px; align-items: center; }
.hero h1 { font-family: var(--font-loud); font-weight: 400; font-size: var(--fs-hero); line-height: .96; letter-spacing: 1px; text-transform: uppercase; }
.hero h1 .line-lav { color: var(--color-pink); display: block; }
.hero h1 .line-red { color: var(--color-coral); display: block; }
.hero .lede { margin-top: 22px; }
.listen-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero .listen-row { margin: 40px 0 36px; }
.cadence-line { margin-top: 24px; font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: color-mix(in srgb, var(--color-plum) 55%, var(--white-page)); }
.cadence-line .dot { color: var(--color-coral); }
.hero-art { position: relative; justify-self: center; }
.hero-phone-note { position: absolute; top: -46px; left: -34px; transform: rotate(-5deg); white-space: nowrap; font-size: 28px; z-index: 2; }
.phone { position: relative; width: min(300px,72vw); aspect-ratio: .485; background: linear-gradient(150deg,#3d3d3d,#262626 55%,#313131); border-radius: 47px; padding: 10px; transform: rotate(4deg); box-shadow: 0 40px 80px -30px rgba(46,46,46,.45), inset 0 0 0 2px rgba(255,255,255,.14), inset 0 0 0 4px rgba(0,0,0,.35); transition: transform .3s ease; }
.phone:hover { transform: rotate(2deg) scale(1.01); }
.ph-key { position:absolute; width:3px; background:#1f1f1f; border-radius:2px; box-shadow:inset 0 0 1px rgba(255,255,255,.25); }
.ph-key-action { left:-3px; top:17%; height:4.5%; }
.ph-key-volup { left:-3px; top:25%; height:8.5%; }
.ph-key-voldn { left:-3px; top:35.5%; height:8.5%; }
.ph-key-power { right:-3px; top:27%; height:13%; }
.phone-screen { position:relative; height:100%; background:linear-gradient(180deg,#eae5fb,var(--color-lavender)); border-radius:38px; display:flex; flex-direction:column; overflow:hidden; }
.ph-status { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:15px 26px 0; font-family:var(--font-body); font-size:13px; font-weight:700; color:var(--color-plum); }
.ph-status-icons { display:inline-flex; align-items:center; gap:5px; }
.ph-status-icons svg { height:11px; width:auto; fill:var(--color-plum); }
.phone-island { position:absolute; top:10px; left:50%; transform:translateX(-50%); width:33%; aspect-ratio:125/37; background:#101010; border-radius:var(--radius-pill); }
.ph-body { flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; padding:0 20px; }
.phone-cover { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:16px; display:block; box-shadow:0 14px 30px -14px rgba(46,46,46,.45); }
.phone-ep-label { font-family:var(--font-fame); font-weight:400; font-size:24px; color:var(--color-coral); margin-top:16px; }
.phone-ep-title { font-family:var(--font-loud); font-weight:400; font-size:14px; letter-spacing:1.5px; text-transform:uppercase; color:var(--color-plum); margin-top:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ph-bar { margin-top:16px; padding:6px 0; cursor:pointer; }
.ph-track { position:relative; height:3px; border-radius:var(--radius-pill); background:rgba(46,46,46,.18); }
.ph-fill { position:absolute; left:0; top:0; bottom:0; width:0%; border-radius:var(--radius-pill); background:var(--color-coral); }
.ph-fill::after { content:''; position:absolute; right:-5px; top:50%; width:10px; height:10px; transform:translateY(-50%); border-radius:var(--radius-circle); background:var(--color-coral); }
.phone-times { display:flex; justify-content:space-between; font-family:var(--font-body); font-size:10px; font-weight:600; color:rgba(46,46,46,.55); margin-top:4px; font-variant-numeric:tabular-nums; }
.phone-controls { display:flex; align-items:center; justify-content:center; gap:20px; margin-top:12px; }
.ph-ctl { background:none; border:0; padding:8px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-circle); }
.ph-ctl:focus-visible { outline:2px solid var(--color-coral); outline-offset:2px; }
.ph-ctl svg { width:20px; height:20px; fill:var(--color-plum); }
.ph-play { width:54px; height:54px; padding:0; background:var(--color-coral); box-shadow:0 8px 18px -6px rgba(240,74,36,.6); }
.ph-play svg { width:20px; height:20px; fill:#fff; }
.ph-play .ph-ic-play { transform:translateX(1px); }
.ph-home { flex-shrink:0; width:37%; height:5px; margin:10px auto 9px; border-radius:var(--radius-pill); background:rgba(46,46,46,.35); }
.marquee-wrap { background:var(--color-plum); padding:16px 0; overflow:hidden; border-top:2px solid var(--color-pink); border-bottom:2px solid var(--color-pink); }
.marquee-track { display:flex; animation:marquee 46s linear infinite; white-space:nowrap; width:max-content; }
.marquee-wrap:hover .marquee-track { animation-play-state:paused; }
.marquee-item { font-family:var(--font-fame); font-weight:400; font-size:32px; color:var(--color-pink); padding:0 28px; display:inline-flex; align-items:center; gap:18px; flex-shrink:0; }
.marquee-item .star { color:var(--color-coral); font-size:20px; }
@keyframes marquee { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) { .marquee-track { animation:none; } }
.anti { padding:104px 0; }
.anti-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:64px; align-items:center; max-width:1100px; margin:0 auto; }
@media (max-width:880px) { .anti-grid { grid-template-columns:minmax(0,1fr); gap:48px; justify-items:center; } .anti-grid .anti-is { text-align:center; } }
.note-card { position:relative; display:inline-block; background:#fffdf8; border-radius:6px; padding:40px 52px 34px; box-shadow:0 22px 50px -20px rgba(46,46,46,.28); transform:rotate(-2.4deg); text-align:left; transition:transform .3s ease; }
.note-card:hover { transform:rotate(-.8deg); }
.note-tape { position:absolute; top:-14px; left:50%; width:110px; height:30px; transform:translateX(-50%) rotate(2deg); background:rgba(226,169,241,.5); border-left:1px dashed rgba(255,255,255,.7); border-right:1px dashed rgba(255,255,255,.7); }
.note-title { font-family:var(--font-hand); font-weight:600; font-size:clamp(27px,3.2vw,34px); color:var(--color-coral); margin-bottom:10px; transform:rotate(-.5deg); }
.note-line { font-family:var(--font-hand); font-weight:500; font-size:clamp(29px,3.8vw,41px); line-height:1.38; color:var(--color-plum); }
.note-line:nth-child(3){transform:rotate(.6deg)} .note-line:nth-child(4){transform:rotate(-.8deg)} .note-line:nth-child(5){transform:rotate(.4deg)}
.scratch { display:inline; padding:0 4px; -webkit-box-decoration-break:clone; box-decoration-break:clone; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 Q 28 3 55 8 T 105 7 T 150 8 T 197 5' fill='none' stroke='%23ff6441' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center / 160px .3em; }
.anti-is { font-family:var(--font-loud); font-weight:400; font-size:clamp(32px,4.6vw,56px); letter-spacing:1px; text-transform:uppercase; line-height:1.1; color:var(--color-plum); margin:0; text-align:left; text-wrap:balance; }
.anti-is .accent { color:var(--color-coral); }
.hosts-shared { font-size:var(--fs-lede); line-height:var(--lh-lede); color:var(--color-plum); max-width:var(--max-lede); margin:8px auto 0; }
.hosts-pair { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; margin:48px auto 0; max-width:860px; }
.host-card { background:var(--wash-card); border:var(--border-soft); border-radius:20px; padding:20px; box-shadow:var(--shadow-soft); }
.host-photo { position:relative; aspect-ratio:1/1; border-radius:14px; overflow:hidden; }
.host-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.host-card h3 { font-family:var(--font-fame); font-weight:400; font-size:34px; color:var(--color-coral); margin:16px 0 2px; }
.host-card .host-role { font-family:var(--font-loud); font-weight:400; font-size:16px; letter-spacing:2px; text-transform:uppercase; color:color-mix(in srgb,var(--color-plum) 60%,var(--white-page)); margin-bottom:10px; }
.host-card p { text-wrap:pretty; font-size:var(--fs-card); line-height:var(--lh-card); color:color-mix(in srgb,var(--color-plum) 78%,var(--white-page)); }
.listen { text-align:center; }
.listen .player-wrap { display:grid; grid-template-columns:minmax(0,420px) minmax(0,480px); gap:28px 56px; justify-content:center; align-items:start; margin-top:48px; text-align:left; }
.listen .wave { grid-column:1/-1; justify-self:center; }
.listen .player-card { text-align:left; }
.listen .ep-list-wrap { max-width:none; margin-top:0; }
.listen .host-line { grid-column:1/-1; text-align:center; }
.listen .listen-row { grid-column:1/-1; justify-content:center; }
@media (max-width:920px) { .listen .player-wrap { grid-template-columns:minmax(0,420px); justify-items:center; } .listen .ep-list-wrap { max-width:var(--card-max-width); margin-top:10px; } }