/* Health Hour home page. Mobile first. Colours come from tokens.css; every text pair is in
   scripts/contrast-pairs.json. Only transform and opacity are animated, all with one easing curve. */

:root {
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: 24px;
}

html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { overflow-x: clip; }
a { color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.7rem 1rem; border-radius: 12px; background: var(--glow); color: var(--night-2); font-weight: var(--weight-strong); }
.skip:focus { top: 1rem; }

/* Read by screen readers, not shown: the standard clip pattern, not display: none. */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Headings share one display voice: Montserrat Black, tight, uppercase where the preview uses it */
.screen-top h2, .why h2, .streams h2, .cast h2, .foot-top h2 {
  font-weight: var(--weight-display); text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95; margin: 0;
}

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 3.2rem; padding: 0.45rem 1.35rem; border-radius: 999px; border: 1.5px solid transparent; font-weight: var(--weight-strong); font-size: 1rem; line-height: 1.2; text-decoration: none; transition: transform 0.2s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:has(.arrow) { padding-right: 0.5rem; }
.arrow { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--night); color: var(--glow); flex: none; }
.arrow svg { width: 14px; height: 14px; stroke-width: 2; }
.btn-lime { background: var(--glow); color: var(--night-2); box-shadow: 0 10px 30px -12px rgba(128, 195, 65, 0.8); }
.btn-glass { background: rgba(236, 228, 214, 0.06); border-color: rgba(236, 228, 214, 0.28); color: var(--cream); }
.btn-glass:hover { background: rgba(236, 228, 214, 0.12); }
.actions { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }

/* Studio: the always-dark sections */
.studio { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: var(--cream); }
.studio::before { content: ""; position: absolute; inset: 0; z-index: -2; background:
  radial-gradient(60% 45% at 80% 12%, rgba(128, 195, 65, 0.2), transparent 70%),
  radial-gradient(45% 35% at 8% 60%, rgba(28, 91, 45, 0.5), transparent 70%); }
.studio::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.22; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }

/* Navigation: a floating pill. The only place with a backdrop blur. */
.site-head { position: fixed; top: 0.75rem; left: 0; right: 0; z-index: 50; padding: 0 clamp(0.5rem, 3vw, 2rem); }
.nav-in { position: relative; max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.45rem 0.4rem 1rem; border-radius: 999px; background: rgba(6, 20, 10, 0.94); border: 1px solid rgba(236, 228, 214, 0.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.5); color: var(--cream); }
.logo { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; text-decoration: none; }
.logo-m, .logo-w { display: block; -webkit-mask: var(--mask) left center / contain no-repeat; mask: var(--mask) left center / contain no-repeat; }
.logo-m { --mask: url("/img/brand/hh-mark-mask-80.webp"); width: 28px; height: 35px; background: var(--leaf); }
.logo-w { --mask: url("/img/brand/hh-wordmark-mask-240.webp"); width: 88px; height: 37px; background: var(--cream); }
.nav-panel { display: flex; align-items: center; gap: 1.6rem; margin-left: auto; }
.nav-panel ul { display: flex; gap: 0.3rem; list-style: none; margin: 0; padding: 0; }
.nav-panel ul a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.7rem; border-radius: 999px; color: var(--on-dark-muted); font-weight: 600; font-size: 0.95rem; text-decoration: none; }
.nav-panel ul a:hover { color: var(--cream); }
.nav-in .btn { min-height: 2.9rem; font-size: 0.95rem; }
.menu-btn { display: none; min-height: 44px; min-width: 44px; margin-left: auto; padding: 0 1rem; border-radius: 999px; border: 1.5px solid rgba(236, 228, 214, 0.28); background: transparent; color: var(--cream); font: inherit; font-weight: var(--weight-strong); font-size: 0.95rem; cursor: pointer; }

@media (max-width: 899.98px) {
  /* Without JavaScript the links stay hidden on small screens; every section is still reachable by scrolling. */
  .nav-panel { display: none; }
  .js .menu-btn { display: inline-flex; align-items: center; }
  .js .nav-panel.is-open { display: flex; position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0.5rem; padding: 0.75rem; border-radius: 24px; background: var(--night-2); border: 1px solid rgba(236, 228, 214, 0.14); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7); }
  .js .nav-panel.is-open ul { flex-direction: column; }
  .js .nav-panel.is-open ul a { width: 100%; padding: 0 1rem; font-size: 1.05rem; color: var(--cream); }
  .js .nav-panel.is-open .nav-pro { justify-content: center; }
  .nav-reg { margin-left: 0; }
  .no-js .nav-reg { margin-left: auto; }
}
@media (max-width: 380px) {
  .logo-w { display: none; }
}

/* Hero */
.hero { position: relative; padding: calc(5.5rem + clamp(1.5rem, 5vw, 3.5rem)) 0 clamp(1.5rem, 3vw, 2rem); }
.rings { position: absolute; right: -30%; top: -6%; width: min(760px, 120vw); aspect-ratio: 1; z-index: -1; pointer-events: none; }
.rings circle { stroke: var(--glow); stroke-width: 1; stroke-opacity: 0.12; }
.rings circle.dot { fill: var(--glow); stroke: none; fill-opacity: 0.6; }
.hero-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.announce { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; min-height: 44px; padding: 0.35rem 0.9rem 0.35rem 0.5rem; border-radius: 22px; background: rgba(236, 228, 214, 0.06); border: 1px solid rgba(236, 228, 214, 0.14); color: var(--cream); font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.announce i { width: 0.55rem; height: 0.55rem; margin-left: 0.3rem; border-radius: 50%; background: var(--leaf); }
.announce b { white-space: nowrap; padding: 0.12rem 0.6rem; border-radius: 999px; background: var(--chip); color: var(--glow); }
.hh-live .announce i { background: var(--live); }
.time { margin: 1.4rem 0 0.8rem; font-weight: var(--weight-display); font-size: clamp(4.2rem, 17vw, 8.2rem); line-height: 0.85; letter-spacing: -0.04em; color: var(--cream); }
.time small { display: block; margin-bottom: 0.15em; font-size: 0.3em; letter-spacing: 0; color: var(--leaf); }
.hero h1 { max-width: 22ch; margin: 0 0 1rem; font-weight: var(--weight-display); font-size: clamp(1.45rem, 2.6vw, 2.15rem); line-height: 1.08; letter-spacing: -0.01em; }
.lede { max-width: 34rem; margin: 0 0 1.8rem; color: var(--on-dark-muted); font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.65; }
.checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; list-style: none; margin: 1.3rem 0 0; padding: 0; color: var(--on-dark-muted); font-size: 0.95rem; }
.checks li { display: flex; align-items: center; gap: 0.45rem; }
.checks svg { width: 16px; height: 16px; flex: none; color: var(--leaf); stroke-width: 2; }

/* The hero photograph (step 23), where the speaker circles were. Its width and height are set in the HTML, so
   nothing moves while it loads, and it is not animated in, so it can paint as soon as it arrives. */
.hero-photo { display: block; width: 100%; max-width: 620px; margin: 0.5rem auto 0; border-radius: 28px; overflow: hidden; border: 1px solid rgba(192, 225, 160, 0.18); box-shadow: 0 26px 50px -20px rgba(0, 0, 0, 0.75); background: var(--night-2); }
.hero-photo img { display: block; width: 100%; height: auto; }


/* Next episode bar */
.nextbar { display: grid; gap: 1.1rem; align-items: center; margin-top: clamp(2rem, 4vw, 3rem); padding: 1.1rem 1.2rem; border-radius: 26px; background: var(--studio-panel); border: 1px solid rgba(192, 225, 160, 0.18); }
.nb-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0; }
.chip { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--chip); color: var(--glow); font-size: 0.9rem; font-weight: var(--weight-strong); white-space: nowrap; }
.nb-date { color: var(--cream); font-weight: 600; }
.nb-topic { margin: 0.6rem 0 0; font-weight: var(--weight-display); font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.15; }
.nb-row { margin: 0.35rem 0 0; font-size: 0.95rem; }
.nb-label { color: var(--on-dark-muted); font-weight: 600; margin-right: 0.3rem; }
.clock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; text-align: center; }
.clock div { padding: 0.45rem 0 0.35rem; border-radius: 14px; background: var(--night); border: 1px solid rgba(236, 228, 214, 0.1); }
.clock b { display: block; font-weight: var(--weight-display); font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1; font-variant-numeric: tabular-nums; color: var(--glow); }
.clock small { font-size: 0.8rem; color: var(--on-dark-muted); }
.clock[hidden], .livenow[hidden] { display: none; }
.livenow { margin: 0; font-weight: var(--weight-display); font-size: 1.9rem; text-transform: uppercase; color: var(--live); }
.nextbar > .btn { justify-self: start; }
/* Added by site.js only when a session is published (step 21): what is coming up, and the flash a returning
   visitor sees when the session has changed. Both use the bar's existing chip, label and border. The flash sits
   over the bar's top edge, out of the flow, so nothing moves when it appears. */
.nextbar { position: relative; }
.nb-coming { margin: 0.8rem 0 0; padding-top: 0.7rem; border-top: 1px solid rgba(192, 225, 160, 0.18); font-size: 0.95rem; }
.nb-coming-title { margin: 0 0 0.25rem; font-size: 0.95rem; line-height: 1.4; }
.nb-coming ul { margin: 0; padding: 0; list-style: none; }
.nb-coming li { margin: 0.2rem 0 0; }
.nb-coming-date { color: var(--cream); font-weight: 600; }
/* The session flyer (step 22), added by site.js only when the session has one. Its shape is fixed before the
   image arrives, so nothing moves when it loads, and a flyer of any shape is contained on the studio green. */
.nb-flyer { display: block; width: min(100%, 240px); aspect-ratio: 4 / 5; margin: 0.9rem 0 0; overflow: hidden; border-radius: 16px; border: 1px solid rgba(192, 225, 160, 0.18); background: var(--night); }
.nb-flyer img { display: block; width: 100%; height: 100%; object-fit: contain; }
.nb-flash { position: absolute; top: 0; right: 1.2rem; margin: 0; transform: translateY(-50%); }
.nb-flash:empty { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .nb-flash:not(:empty) { animation: nb-flash-in 0.5s var(--ease) both; }
  @keyframes nb-flash-in { from { opacity: 0; transform: translateY(0); } to { opacity: 1; transform: translateY(-50%); } }
}

/* What is Health Hour? and the video facades */
.screen { padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(3rem, 7vw, 5rem); }
.screen-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 0.6rem 2rem; margin-bottom: 1.2rem; }
.screen-top h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.screen-top p { max-width: 30rem; margin: 0; color: var(--on-dark-muted); }
.tv { padding: 0.5rem; border-radius: 30px; background: var(--studio-panel); border: 1px solid rgba(192, 225, 160, 0.18); }
.vid { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 24px; background: var(--night-2); }
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.facade { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.facade img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.facade:hover img { transform: scale(1.02); }
.play { position: absolute; left: 50%; top: 50%; width: clamp(64px, 9vw, 96px); aspect-ratio: 1; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 10px rgba(128, 195, 65, 0.25); transform: translate(-50%, -50%); transition: transform 0.3s var(--ease); }
.play::after { content: ""; position: absolute; left: 40%; top: 30%; border-left: 26px solid var(--night); border-top: 17px solid transparent; border-bottom: 17px solid transparent; }
.facade:hover .play { transform: translate(-50%, -50%) scale(1.06); }

/* How it works: the owner's section, on the brand tokens */
.hiw { position: relative; isolation: isolate; overflow: hidden; padding: clamp(3.5rem, 8vw, 5.25rem) var(--gutter) clamp(3rem, 7vw, 4.4rem); background: radial-gradient(circle at 50% 0%, rgba(128, 195, 65, 0.12), transparent 38%), var(--night); }
.hiw-in { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; }
.hiw-orb { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.hiw-orb-left { width: 460px; height: 460px; left: -180px; top: 40px; border: 1px solid rgba(192, 225, 160, 0.16); }
.hiw-orb-left::after { content: ""; position: absolute; width: 14px; height: 14px; right: 62px; top: 100px; border-radius: 50%; background: rgba(128, 195, 65, 0.6); }
.hiw-orb-right { width: 340px; height: 340px; right: -110px; top: -20px; border: 1px solid rgba(192, 225, 160, 0.1); }
.hiw-intro { margin: 0 auto 2rem; text-align: center; }
.hiw-eyebrow { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; margin: 0 0 1.5rem; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(192, 225, 160, 0.22); background: var(--studio-panel); font-weight: var(--weight-strong); font-size: 1.05rem; }
.hiw-eyebrow-icon { display: inline-flex; width: 26px; height: 26px; color: var(--leaf); }
.hiw-eyebrow-icon svg { width: 100%; height: 100%; }
.hiw-intro h2 { margin: 0 0 1rem; font-weight: 800; font-size: clamp(2rem, 4.7vw, 4rem); line-height: 1; letter-spacing: -0.035em; }
.hiw-intro h2 span { color: var(--leaf); }
.hiw-grid { position: relative; display: grid; gap: 18px; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.step { position: relative; display: flex; flex-direction: column; padding: 22px; border-radius: 24px; border: 1px solid rgba(192, 225, 160, 0.16); background: radial-gradient(circle at top right, rgba(128, 195, 65, 0.07), transparent 34%), var(--studio-panel); }
.step-num { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 16px; border-radius: 50%; background: var(--leaf); color: var(--night); font-size: 1.4rem; font-weight: 800; box-shadow: 0 0 0 4px var(--night), 0 0 0 6px rgba(128, 195, 65, 0.55), 0 0 26px 4px rgba(128, 195, 65, 0.35); }
.step-head { display: flex; align-items: center; gap: 18px; margin-bottom: 12px; }
.step-icon { display: grid; place-items: center; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 16px; border: 1px solid rgba(128, 195, 65, 0.4); background: var(--night-2); color: var(--leaf); }
.step-icon svg { width: 28px; height: 28px; }
.step h3 { margin: 0; font-weight: 800; font-size: clamp(1.3rem, 1.8vw, 1.8rem); line-height: 1.1; letter-spacing: -0.02em; }
.step-copy { max-width: 32ch; margin: 0 0 18px; color: var(--on-dark-muted); font-size: 1.05rem; line-height: 1.5; }
.step-demo { margin-top: auto; min-height: 184px; padding: 18px; overflow: hidden; border-radius: 22px; border: 1px solid rgba(192, 225, 160, 0.08); background: var(--night); }
.mini-form { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; height: 100%; }
.mini-field { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; border-radius: 14px; background: rgba(236, 228, 214, 0.07); color: var(--on-dark-muted); font-size: 0.95rem; }
.mini-field svg { width: 18px; height: 18px; flex: none; }
.mini-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.mini-btn { flex: 1; display: grid; place-items: center; min-height: 46px; border-radius: 999px; background: var(--leaf); color: var(--night); font-weight: 800; }
.mini-done { display: grid; place-items: center; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(128, 195, 65, 0.65); color: var(--leaf); }
.mini-done svg { width: 24px; height: 24px; stroke-width: 2.2; }
.step-demo-mail { display: grid; place-items: center; }
.env { position: relative; width: 200px; height: 124px; color: var(--leaf); }
.env-svg { position: absolute; left: 0; bottom: 0; width: 176px; height: 112px; overflow: visible; filter: drop-shadow(0 0 10px rgba(128, 195, 65, 0.35)); }
.env-svg .env-body { fill: rgba(128, 195, 65, 0.08); stroke: currentColor; stroke-width: 2; }
.env-svg .env-flap { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.env-svg .env-spark { fill: none; stroke: var(--glow); stroke-width: 2.4; stroke-linecap: round; }
.env-tag { position: absolute; right: -6px; top: 0; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--glow); color: var(--night); font-size: 0.95rem; font-weight: 800; }
.chat { display: flex; flex-direction: column; gap: 12px; }
.chat-top { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.bubble { display: inline-flex; align-items: center; max-width: 100%; min-height: 42px; padding: 0 16px; border-radius: 20px; font-size: 0.9rem; line-height: 1.2; }
.bubble-q { background: rgba(236, 228, 214, 0.1); }
.bubble-a { margin-left: auto; background: var(--forest); color: var(--cream); }
.chat-live { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: var(--weight-strong); }
.chat-live span { width: 12px; height: 12px; border-radius: 50%; background: var(--live); }
.chat-input { display: flex; align-items: center; justify-content: space-between; min-height: 46px; margin-top: 6px; padding: 0 8px 0 16px; border-radius: 999px; background: rgba(236, 228, 214, 0.06); color: var(--on-dark-muted); font-size: 0.95rem; }
.chat-send { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: var(--cream); color: var(--night); }
.chat-send svg { width: 16px; height: 16px; stroke-width: 2; }
.hiw-pill { display: flex; align-items: flex-start; gap: 18px; max-width: 760px; margin: 2.5rem auto 0; padding: 18px; border-radius: 24px; border: 1px solid rgba(192, 225, 160, 0.2); background: var(--studio-panel); }
.hiw-pill-icon { display: inline-flex; flex: none; width: 28px; height: 28px; color: var(--leaf); }
.hiw-pill-icon svg { width: 100%; height: 100%; }
.hiw-pill-divider { flex: none; width: 1px; height: 28px; background: rgba(128, 195, 65, 0.3); }
.hiw-pill p { margin: 0; color: var(--on-dark-muted); font-size: 1.05rem; line-height: 1.35; }
.hiw-pill strong { color: var(--cream); }
.hiw-watch { margin: 1.1rem auto 0; text-align: center; color: var(--on-dark-muted); font-size: 1rem; }

/* Topic ticker: decorative and hidden from screen readers. The titles are past episode topics; the episodes section itself is off the page for now (step 23). */
.ticker { overflow: hidden; white-space: nowrap; border-block: 1px solid rgba(236, 228, 214, 0.14); background: var(--night); }
.ticker .track { display: inline-flex; gap: 2.6rem; padding: 0.95rem 0; font-weight: 800; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--on-dark-muted); }
.ticker span::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 1.1rem; border-radius: 50%; background: var(--leaf); vertical-align: middle; }

/* Light sections */
.light { padding: clamp(3.5rem, 8vw, 6rem) 0; background: var(--bg); color: var(--text); }
.why { max-width: 62rem; }
.why h2 { margin-bottom: 1.2rem; font-size: clamp(2rem, 4.6vw, 3.4rem); }
.why-text { max-width: 62ch; margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
.figures { display: grid; grid-template-columns: 1fr 1fr; margin: 2.4rem 0 0; border-top: 2px solid var(--accent); }
.figures div { padding: 1.2rem 1rem 0 0; }
.figures div:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--line); }
.figures dt { font-weight: var(--weight-display); font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -0.02em; color: var(--accent); }
.figures dd { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.98rem; line-height: 1.4; }
.offer { display: grid; gap: 1rem; list-style: none; margin: clamp(2.5rem, 6vw, 4rem) 0 1rem; padding: 0; }
.offer li { padding: 1.2rem; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.offer .ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: 0.8rem; border-radius: 12px; background: var(--glow); color: var(--night-2); }
.offer .ico svg { width: 20px; height: 20px; stroke-width: 2; }
.offer h3 { margin: 0 0 0.25rem; font-size: 1.08rem; }
.offer p { margin: 0; color: var(--muted); font-size: 0.97rem; }
.bento { display: grid; gap: 1rem; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; min-height: 240px; padding: 1.4rem; border-radius: var(--radius); overflow: hidden; }
.tile h3 { margin: 0.4rem 0 0.3rem; font-size: 1.12rem; }
.tile p { margin: 0; font-size: 0.98rem; }
.tile .tile-word { font-weight: var(--weight-display); font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.02em; }
.t-grey { background: var(--panel); color: var(--text); }
.t-lime { background: var(--glow); color: var(--night-2); }
.t-dark { background: var(--night); color: var(--cream); }
.t-dark p { color: var(--on-dark-muted); }
.big { display: block; font-weight: var(--weight-display); font-size: clamp(3.4rem, 6vw, 4.6rem); line-height: 0.9; letter-spacing: -0.03em; }
.corner { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--night); color: var(--glow); text-decoration: none; }
.corner svg { width: 13px; height: 13px; stroke-width: 2; }
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chips span { padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.9rem; border: 1px solid rgba(236, 228, 214, 0.18); }
.t-grey .chips span { background: var(--card); border-color: var(--line); }

.streams { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-top: clamp(3.5rem, 8vw, 5.5rem); }
.streams h2 { margin-bottom: 1rem; font-size: clamp(2rem, 5vw, 3.6rem); }
.streams p { margin: 0 0 1rem; color: var(--muted); }
.streams .who-lead { margin-bottom: 0.2rem; color: var(--text); font-weight: var(--weight-strong); }
.who { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin: 0.8rem 0 0; padding: 0; }
.who li { padding: 0.35rem 0.85rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); font-size: 0.95rem; font-weight: 600; }
.cahn-diagram { margin: 0; padding: 1rem; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.cahn-diagram img { width: 100%; height: auto; }


/* Be on the show */
.cast { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.cast-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.vid-round { border: 1px solid rgba(236, 228, 214, 0.14); }
.cap { margin: 0.8rem 0 0; color: var(--cream); }
.cast h2 { margin-bottom: 1.1rem; font-size: clamp(3rem, 9vw, 5.6rem); line-height: 0.86; }
.cast h2 span { display: block; color: var(--leaf); }
.cast-copy > p { max-width: 34rem; margin: 0 0 1.5rem; color: var(--on-dark-muted); }
.sheet { display: grid; gap: 0.6rem; margin: 0 0 1.8rem; }
.sheet div { padding: 0.9rem 1rem; border-radius: 18px; background: var(--studio-panel); border: 1px solid rgba(192, 225, 160, 0.18); }
.sheet dt { font-weight: 800; font-size: 1.1rem; line-height: 1; text-transform: uppercase; color: var(--glow); }
.sheet dd { margin: 0.35rem 0 0; font-size: 0.95rem; color: var(--on-dark-muted); }

/* Footer */
.site-foot { padding: clamp(3rem, 7vw, 5rem) 0 2rem; }
.foot-top { display: grid; gap: 1.5rem; align-items: end; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(236, 228, 214, 0.14); }
.foot-top h2 { font-size: clamp(2.4rem, 7vw, 5rem); line-height: 0.9; }
.foot-bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; padding-top: 1.8rem; color: var(--on-dark-muted); font-size: 0.98rem; }
.foot-bot p { margin: 0.2rem 0; }
.foot-bot a { color: var(--cream); font-weight: 600; }
.foot-bot .foot-prog { margin-top: 0.7rem; }
.foot-bot .cahn-link { display: inline-flex; align-items: center; gap: 0.8rem; min-height: 44px; margin-top: 1rem; padding: 0.5rem 0.9rem; border-radius: 14px; background: var(--paper); color: var(--night); text-decoration: none; font-size: 0.95rem; }
.cahn-link img { width: 144px; height: 44px; }
.mail { display: inline-flex; align-items: center; min-height: 44px; font-size: clamp(1.2rem, 2.6vw, 1.8rem); text-decoration: none; overflow-wrap: anywhere; }
.foot-bot .mail:hover { color: var(--glow); }
.social { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.social a { display: inline-flex; align-items: center; min-height: 44px; }
.legal { margin: 2rem 0 0; font-size: 0.9rem; color: var(--on-dark-muted); }

/* Wider screens */
@media (min-width: 560px) {
  .offer { grid-template-columns: 1fr 1fr; }
  .sheet { grid-template-columns: 1fr 1fr; }
  .hiw-pill { align-items: center; border-radius: 999px; padding: 0 24px; min-height: 72px; }
  .chat-top { flex-direction: row; justify-content: space-between; }
  .bubble { max-width: 78%; font-size: 0.95rem; }
}
@media (min-width: 640px) {
  .nextbar { grid-template-columns: 1fr 1fr; }
  .nextbar > .btn { grid-column: 1 / -1; }
}
@media (min-width: 760px) {
  .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .figures div + div { padding-left: 1.2rem; border-left: 1px solid var(--line); }
}
@media (min-width: 820px) {
  .foot-top { grid-template-columns: 1.4fr 1fr; }
  .foot-top .actions { justify-content: flex-end; }
  .hiw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
  .step { min-height: 440px; padding: 28px; border-radius: 28px; }
  .step-num { width: 64px; height: 64px; font-size: 1.6rem; }
}
@media (min-width: 900px) {
  .offer { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .streams { grid-template-columns: 1fr 1.3fr; }
  .cast-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-photo { margin: 0 0 0 auto; }
  .rings { right: -8%; top: -10%; width: min(760px, 90vw); }
}
@media (min-width: 980px) {
  .bento { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .nextbar { grid-template-columns: minmax(0, 1fr) auto auto; }
  .nextbar > .btn { grid-column: auto; }
  .clock { grid-template-columns: repeat(4, 4.1rem); }
  .hiw-grid { gap: 76px; }
  .step::before { content: ""; position: absolute; right: -76px; top: 50%; z-index: 2; width: 76px; border-top: 2px dashed rgba(128, 195, 65, 0.55); }
  .step::after { content: ""; position: absolute; right: -60px; top: 50%; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(128, 195, 65, 0.5); transform: translateY(-50%);
    background: var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2380C341' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m10 7 5 5-5 5'/%3E%3C/svg%3E") center / 22px no-repeat; }
  .step:last-child::before, .step:last-child::after { display: none; }
}

/* Registration page: the intro on the studio background, the form on a light card */
.reg { min-height: 100vh; padding: calc(5.5rem + clamp(1.5rem, 4vw, 3rem)) 0 clamp(3rem, 7vw, 5rem); }
.reg-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.reg-intro .reg-when { margin: 0 0 1.2rem; color: var(--glow); }
.reg-intro h1 { margin: 0 0 1rem; font-weight: var(--weight-display); font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; }
.reg-intro p { max-width: 34rem; margin: 0; color: var(--on-dark-muted); }
.reg-steps { display: grid; gap: 0.9rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.reg-steps li { display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.8rem; align-items: start; }
.reg-steps b { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--leaf); color: var(--night); font-weight: var(--weight-display); }
.reg-steps span { padding-top: 0.2rem; }
.reg-intro .reg-watch { margin-top: 1.6rem; }
.reg-card { padding: clamp(1.3rem, 3vw, 2.2rem); border-radius: 26px; background: var(--bg); }
.reg-where { grid-template-columns: 1fr; }
.reg-short { max-width: 10rem; text-transform: uppercase; }
.reg-short::placeholder { text-transform: none; }
.reg-use { margin: 0 0 1rem; color: var(--muted); font-size: 0.95rem; }
.reg-back { display: inline-flex; align-items: center; text-decoration: none; }
@media (min-width: 521px) {
  .reg-where { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .reg-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

/* Motion. The hidden starting state only exists under .motion-on, which site.js adds when motion is allowed,
   so if JavaScript fails nothing stays invisible. */
@keyframes tick { to { transform: translateX(-50%); } }
@keyframes ringPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes livePulse { 50% { opacity: 0.3; } }

.motion-on .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.motion-on .reveal.in { opacity: 1; transform: none; }
.motion-on .rings circle { animation: ringPulse 6s var(--ease) infinite; }
.motion-on .rings circle:nth-child(2) { animation-delay: 1.5s; }
.motion-on .rings circle:nth-child(3) { animation-delay: 3s; }
.motion-on.hh-live .announce i { animation: livePulse 1.6s var(--ease) infinite; }
.motion-on .ticker .track { animation: tick 60s linear infinite; }
.ticker:hover .track, .ticker:focus-within .track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* The registration form needs JavaScript: the bot check cannot run without it, so the form is hidden
   until site.js marks the page, and a noscript block takes its place. */
.js-only { display: none; }
html.js .js-only { display: block; }
.reg-noscript p { margin: 0; color: var(--text); }
.reg-noscript a { color: var(--accent); font-weight: var(--weight-strong); }
.hf-turnstile { margin: 0 0 1rem; min-height: 65px; }

/* Stagger order for revealed items. These were inline style attributes until step 15; the security policy
   allows no inline styles, so the page carries a class instead. site.js still sets --i on episode tiles
   through the style object, which the policy does allow. */
.i-0 { --i: 0; }
.i-1 { --i: 1; }
.i-2 { --i: 2; }
.i-3 { --i: 3; }

/* Long reading pages, like the privacy notice. One column, a comfortable line length, real
   headings to jump between. No new colours: text, muted and accent come from tokens.css. */
/* The top padding clears the fixed header, the same way .reg does on the registration page. */
.prose { max-width: 42rem; margin: 0 auto; padding: calc(5.5rem + clamp(1.5rem, 4vw, 3rem)) 0 clamp(3rem, 8vw, 4.5rem); }
.prose h1 { font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.15; }
.prose h2 { margin-top: 2.4rem; font-size: clamp(1.3rem, 3.6vw, 1.55rem); line-height: 1.25; }
.prose p { margin-top: 1rem; }
.prose ul { margin: 1rem 0 0; padding-left: 1.3rem; }
.prose li { margin-top: 0.5rem; }
.prose li::marker { color: var(--accent); }
.prose a { color: var(--accent); }
.prose-date { color: var(--muted); font-size: 0.98rem; }

/* The Privacy link that sits above the copyright line in every footer. */
.foot-legal { margin: 1.6rem 0 0; font-size: 0.9rem; }
.foot-legal a { display: inline-block; min-height: 44px; padding: 0.7rem 0 0; color: var(--cream); font-weight: 600; }
.foot-legal + .legal { margin-top: 0.2rem; }