/* Hourly News 2.0 marketing site.
   Ported from the Claude Design documents for the 2.0 marketing page, which
   are the visual source of truth and are kept outside this repo (alongside
   it, under ../docs/design/marketing-2.0/). Values here are copied from the
   inline styles in those files.

   Font url()s are bare relative filenames (not "/assets/..."), so Sprockets'
   registered text/css postprocessor (Sprockets::Rails::AssetUrlProcessor)
   rewrites them to their fingerprinted, asset-host-prefixed paths at
   precompile time — this works for plain .css files, no .css.erb needed. */

@font-face {
  font-family: 'HN Condensed';
  src: url(https://hourlynews-assets.s3.amazonaws.com/assets/HelveticaNeue_BoldCond-2b92f01bd8b0c570d9da713b69e727fa0b9bfee70908ee0b86a5a47d1f05d6ad.ttf) format('truetype');
  font-weight: 700 800;
  font-display: swap;
}

@font-face {
  font-family: 'Helveticons';
  src: url(https://hourlynews-assets.s3.amazonaws.com/assets/helveticons-43fbcbcb0e3438357dade52bd70a6d67ee0510e7bb9b4c13ff2d127e5904a8f5.ttf) format('truetype');
  font-display: swap;
}

:root {
  --hn-bg: #0a0b0f;
  --hn-card: #131419;
  --hn-card-2: #17181d;
  --hn-border: rgba(255, 255, 255, .06);
  --hn-border-strong: rgba(255, 255, 255, .12);
  --hn-text: #f5f5f7;
  --hn-text-2: #a7a9b0;
  --hn-text-3: #6e7076;
  --hn-text-4: #4c4e55;
  --hn-text-muted: #8a8c93;
  --hn-accent: #0A84FF;
  --hn-accent-hover: #3396FF;
  --hn-link-hover: #4DA2FF;
  --hn-radius-card: 20px;
  --hn-radius-card-lg: 24px;
  --hn-max: 1080px;
}

html, body { margin: 0; padding: 0; background: var(--hn-bg); }

.hn-body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--hn-text);
  min-height: 100vh;
  overflow-x: hidden;
}

.hn-body a { text-decoration: none; }
/* :where() keeps this at the original (0,1,1) specificity — plain :not(.hn-btn)
   would push it to (0,2,1), which outranks .hn-footer a (0,1,1) and would
   turn footer links accent-blue instead of leaving that source-order tie
   (.hn-footer a is declared later) to resolve it, as before. */
.hn-body a:where(:not(.hn-btn)) { color: var(--hn-accent); }
.hn-body a:where(:not(.hn-btn)):hover { color: var(--hn-link-hover); }
.hn-body ::selection { background: rgba(10, 132, 255, .35); }

/* Border-box everywhere inside the marketing site keeps fixed max-width +
   padding combinations (device frames, nav, cards) from overflowing at
   narrow viewports — see .hn-hero__shot / .hn-hero__copy below. */
.hn-body,
.hn-body *,
.hn-body *::before,
.hn-body *::after {
  box-sizing: border-box;
}

/* Display type — Helvetica Neue Bold Condensed with a system fallback stack. */
.hn-display {
  font-family: 'HN Condensed', 'Helvetica Neue Condensed', 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, sans-serif;
  font-stretch: condensed;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1;
  text-wrap: balance;
  margin: 0;
}

.hn-h2 {
  font-family: 'HN Condensed', 'Helvetica Neue Condensed', 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, sans-serif;
  font-stretch: condensed;
  font-weight: 800;
  font-size: clamp(32px, 4.5vw, 50px);
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
  /* Every .hn-h2 in the design is centered — either via the design's own
     text-align:center on the heading (Everywhere), or inherited from an
     ancestor section that's centered anyway (One tap, Sources, CTA, breaks).
     Centering here directly covers the Everywhere heading, which has no
     centered ancestor section (its section also holds left-aligned card
     copy that must NOT be centered). */
  text-align: center;
}

.hn-lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--hn-text-2);
  text-wrap: pretty;
  margin: 20px auto 0;
  max-width: 56ch;
}

.hn-icon { font-family: 'Helveticons'; line-height: 1; }

.hn-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hn-text-muted);
}

/* The player hero's kicker pairs a pulsing status dot with its label and
   needs a flex row for that; the break-section kickers are plain text and
   rely on .hn-kicker being a normal block so they pick up their ancestor
   section's text-align:center (display:flex would need justify-content to
   center, which this modifier intentionally doesn't carry). */
.hn-kicker--dot {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Decorative background layers. Values below match variant A (Classic);
   variant B (Broadcast) overrides size/position under .hn-page--broadcast,
   and does not bake in an animation because its background-color is set at
   runtime by JS (see the "Do not fight the JS-set color" note lower down). */
.hn-glow {
  position: absolute;
  top: -320px;
  left: 50%;
  transform: translateX(-50%);
  width: 1100px;
  height: 640px;
  border-radius: 50%;
  filter: blur(140px);
  opacity: .16;
  pointer-events: none;
}

.hn-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: overlay;
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22/%3E%3C/filter%3E%3Crect width=%22160%22 height=%22160%22 filter=%22url(https://hourlynews-assets.s3.amazonaws.com/%23n)%22/%3E%3C/svg%3E');
}

/* Buttons and pills. */
.hn-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 99px;
  font-weight: 700;
  padding: 14px 26px;
  font-size: 16px;
  transition: background-color .2s ease, color .2s ease;
}

.hn-btn--primary { background: var(--hn-accent); color: #fff; }
.hn-btn--primary:hover { background: var(--hn-accent-hover); color: #fff; }
.hn-btn--light { background: var(--hn-text); color: var(--hn-bg); }
.hn-btn--light:hover { background: #fff; color: var(--hn-bg); }
.hn-btn--pill { font-size: 14px; font-weight: 600; padding: 8px 18px; }
.hn-btn--lg { font-size: 17px; padding: 16px 34px; }

.hn-pill {
  border: 1px solid var(--hn-border-strong);
  border-radius: 99px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #c9cbd1;
}

.hn-pill--add { border: 1px dashed rgba(10, 132, 255, .6); color: var(--hn-link-hover); }

.hn-pill-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 40px auto 0;
  max-width: 880px;
}

/* The "Any podcast. Seriously." card directly under the pill row: the design
   gives it its own top margin and caps its width (it's a single centered
   block, not a grid item, so nothing else constrains its width). */
.hn-pill-row + .hn-card--lg {
  margin: 48px auto 0;
  max-width: 680px;
}

.hn-card {
  background: var(--hn-card);
  border: 1px solid var(--hn-border);
  border-radius: var(--hn-radius-card);
  padding: 28px;
}

.hn-card--lg {
  border-radius: var(--hn-radius-card-lg);
  padding: 32px;
}

.hn-card__title {
  font-family: 'HN Condensed', 'Helvetica Neue Condensed', 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, sans-serif;
  font-stretch: condensed;
  font-size: 19px;
  font-weight: 700;
}

.hn-card__title--lg {
  font-size: 24px;
  margin-top: 6px;
}

.hn-card__body {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--hn-text-2);
}

.hn-card__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hn-accent);
}

/* Broadcast platform captions: the design specifies grey #8a8c93, not the
   accent blue .hn-card__eyebrow uses for Classic's card eyebrows, so this
   gets its own class instead of overriding color on a per-page basis. */
.hn-platform-caption {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a8c93;
}

/* Device frames are CSS bezels; the images are raw screenshots. */
.hn-device { background: var(--hn-card-2); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 24px 48px rgba(0,0,0,.5); }
.hn-device img { display: block; width: 100%; background: #101116; }
.hn-device--phone { border-radius: 52px; padding: 12px; }
.hn-device--phone img { border-radius: 41px; aspect-ratio: 1320 / 2868; }
.hn-device--watch { border-radius: 48px; padding: 10px; }
.hn-device--watch img { border-radius: 39px; aspect-ratio: 422 / 514; }
.hn-device--carplay { border-radius: 18px; padding: 8px; }
.hn-device--carplay img { border-radius: 12px; aspect-ratio: 800 / 480; }

/* The Mac screenshot is deliberately not a device frame — no bezel
   background/padding, just the raw menu-bar screenshot with a drop shadow —
   so it gets its own wrapper class instead of a .hn-device modifier. */
.hn-mac-shot { margin: auto auto 0; width: 100%; max-width: 360px; }
.hn-mac-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 612 / 446;
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .5);
  background: #101116;
}

.hn-page--broadcast .hn-mac-shot { margin: 0 auto; max-width: 280px; }
.hn-page--broadcast .hn-mac-shot img { border-radius: 12px; }

/* Broadcast platform lineup: the phone/watch/carplay frames have no
   intrinsic max-width, so without one they fill their .hn-platform-row cell
   instead of rendering at the design's individually-tuned sizes. Classic
   reuses the same .hn-device--phone|watch|carplay classes at its own
   (larger) sizes in the hero and Everywhere-you-listen cards, so this is
   scoped to Broadcast only rather than added to the shared base rules
   above. */
.hn-page--broadcast .hn-device--phone { max-width: 200px; margin: 0 auto; }
.hn-page--broadcast .hn-device--watch { max-width: 150px; margin: 0 auto; }
.hn-page--broadcast .hn-device--carplay { max-width: 280px; margin: 0 auto; }

/* Broadcast platform lineup container: the design centers all four cells in
   one bottom-aligned flex row so the differing device heights (phone/watch/
   carplay/Mac) share a baseline. .hn-grid is the wrong primitive here — its
   auto-fit grid columns wrap the Mac alone onto a second row — and .hn-grid
   is shared with Classic's feature and Everywhere-you-listen grids, so this
   lineup gets its own class instead. */
.hn-platform-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 44px 28px;
}

.hn-platform-row > div {
  flex: 0 1 260px;
  min-width: 200px;
}

/* Everywhere-you-listen cards (Classic): design lays each card out as a flex
   column with a 20px gap, and bottom-aligns the screenshot in each one via
   margin-top:auto so the images line up across cards even when copy length
   differs. Scoped to .hn-grid so the unrelated Sources customization card
   (also .hn-card--lg, but not in a grid) is unaffected. */
.hn-grid .hn-card--lg { display: flex; flex-direction: column; gap: 20px; }

.hn-grid .hn-card--lg > .hn-device,
.hn-grid .hn-card--lg > .hn-mac-shot {
  margin-top: auto;
}

.hn-grid .hn-card--lg > .hn-device--watch {
  width: 210px;
  margin-left: auto;
  margin-right: auto;
}

@keyframes hnSourceGlow {
  0%, 100% { background-color: #1c6dd0; }
  25% { background-color: #b3223a; }
  50% { background-color: #1f8a70; }
  75% { background-color: #c07a1f; }
}

@keyframes hnTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes hnPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .hn-glow, .hn-ticker__track, .hn-player__bar, .hn-player__dot, .hn-announcement-banner__track {
    animation: none !important;
  }

  /* With the marquee stopped, wrap the surviving (non-aria-hidden) copy as
     static text instead of leaving both copies sitting side by side. */
  .hn-announcement-banner__track {
    flex-wrap: wrap;
    width: auto;
  }

  .hn-announcement-banner__track [aria-hidden="true"] {
    display: none;
  }
}

/* ==========================================================================
   Page shell — shared wrapper plus the two A/B variant scopes. Every rule
   scoped under .hn-page--classic / .hn-page--broadcast below is a
   variant-only override; everything above (and everything unscoped below)
   is shared between both designs.
   ========================================================================== */

.hn-page {
  position: relative;
  background: var(--hn-bg);
  color: var(--hn-text);
  min-height: 100vh;
  overflow-x: hidden;
}

.hn-page--broadcast {
  --hn-max: 1180px;
}

.hn-page--classic .hn-glow {
  background-color: #1c6dd0;
  animation: hnSourceGlow 48s ease-in-out infinite;
}

.hn-page--broadcast .hn-glow {
  top: -380px;
  width: 1300px;
  height: 760px;
  opacity: .22;
  transition: background-color 1.8s ease;
}

/* ==========================================================================
   Nav + locale switcher — shared by both variants (Broadcast widens via the
   --hn-max override above).
   ========================================================================== */

.hn-nav {
  position: relative;
  max-width: var(--hn-max);
  width: 100%;
  margin: 0 auto;
  padding: 20px 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Scoped as `.hn-nav .hn-nav__home` (0,2,0) so it definitively outranks
   `.hn-body a:where(:not(.hn-btn))` (0,1,1) regardless of source order —
   same technique as .hn-announcement-banner__link below — without touching
   that selector itself, which stays tight to `.hn-nav__home` and can't
   affect any other link on the page. Also restores the icon/wordmark gap
   that `.hn-nav`'s own `gap` no longer provides once both are wrapped in a
   single flex item. */
.hn-nav .hn-nav__home {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
}

.hn-nav .hn-nav__home:hover {
  color: inherit;
}

.hn-nav__icon {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}

.hn-nav__brand {
  font-family: 'HN Condensed', 'Helvetica Neue Condensed', 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, sans-serif;
  font-stretch: condensed;
  font-size: 19px;
  font-weight: 700;
}

.hn-nav__spacer { flex: 1; }

.hn-locale {
  position: relative;
  display: flex;
  align-items: center;
}

.hn-locale__globe {
  font-family: 'Helveticons';
  font-size: 15px;
  color: var(--hn-text-muted);
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  pointer-events: none;
}

.hn-locale__select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--hn-card-2);
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2210%22 height=%226%22%3E%3Cpath d=%22M1 1l4 4 4-4%22 stroke=%22%238a8c93%22 stroke-width=%221.5%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: #c9cbd1;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 99px;
  padding: 7px 30px 7px 34px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

/* At narrow widths the pill button no longer fits beside the locale select
   without wrapping to a second line (icon + wordmark + select already claim
   most of the row). Hidden rather than moved to its own row: the hero/player
   CTA and the closing CTA remain as App Store conversion paths on mobile, and
   this is a one-line change vs. new markup for a sub-row. Scoped narrow
   enough to leave the confirmed-correct 768px layout untouched. */
@media (max-width: 600px) {
  .hn-nav .hn-btn--pill {
    display: none;
  }

  /* Owner feedback from on-device testing: at phone widths the whole hero
     column centers — headline, lede, App Store button, trial note and the
     platform list. The platform list is also trimmed down a size so
     IPHONE/IPAD/APPLE WATCH/MAC/CARPLAY fit on one line at 375px (measured
     at 280.5px against 319px available); flex-wrap (already set on
     .hn-hero__platforms) is the fallback if a device's font metrics run
     wider, so it wraps cleanly rather than overflowing. */
  .hn-hero__copy {
    text-align: center;
  }

  /* max-width: 44ch with a 0 side margin would stay left-anchored inside the
     centered column, so the block itself has to be centered too. */
  .hn-hero__sub {
    margin-left: auto;
    margin-right: auto;
  }

  .hn-hero__cta {
    justify-content: center;
  }

  .hn-hero__note {
    text-align: center;
  }

  .hn-hero__platforms {
    justify-content: center;
    gap: 10px;
    font-size: 11px;
    letter-spacing: .04em;
  }
}

/* ==========================================================================
   Hero (Classic only).
   ========================================================================== */

.hn-hero {
  max-width: var(--hn-max);
  margin: 0 auto;
  padding: 64px 28px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
}

.hn-hero__copy {
  flex: 1 1 420px;
  /* Design specs min-width: 320px here, but that overflows at a 375px
     viewport once the section's 28px side padding is subtracted (319px
     available). min-width: 0 lets the column shrink to fit instead. */
  min-width: 0;
}

.hn-hero__title {
  margin: 0;
  font-family: 'HN Condensed', 'Helvetica Neue Condensed', 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, sans-serif;
  font-stretch: condensed;
  font-size: clamp(48px, 6.5vw, 76px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.hn-hero__sub {
  margin: 24px 0 0;
  font-size: 20px;
  line-height: 1.5;
  color: var(--hn-text-2);
  max-width: 44ch;
  text-wrap: pretty;
}

.hn-hero__cta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 36px;
  flex-wrap: wrap;
}

.hn-hero__note {
  font-size: 13px;
  color: var(--hn-text-3);
}

.hn-hero__platforms {
  display: flex;
  gap: 22px;
  margin-top: 44px;
  color: var(--hn-text-3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  flex-wrap: wrap;
}

.hn-hero__shot {
  flex: 0 1 340px;
  min-width: 0;
  margin: 0 auto;
}

.hn-hero__shot .hn-device--phone {
  width: 100%;
  max-width: 320px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px rgba(0, 0, 0, .6), 0 0 120px rgba(10, 132, 255, .07);
}

/* ==========================================================================
   Generic section / grid utilities shared by both variants' body content
   (features, everywhere-you-listen, sources, press, platforms, CTA).
   ========================================================================== */

.hn-section {
  max-width: var(--hn-max);
  margin: 0 auto;
  padding: 64px 28px 0;
}

.hn-section--lg { padding-top: 120px; }
.hn-section--xl { padding-top: 150px; }
.hn-section--center { text-align: center; }
/* One tap (Classic) is narrower than the shared 1080px section max-width. */
.hn-section--narrow { max-width: 840px; }

.hn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

/* Everywhere-you-listen (Classic): the design puts 48px between the heading
   and the card grid. Scoped to a heading immediately followed by a grid so
   it doesn't affect the Press section, whose grid has no preceding heading. */
.hn-h2 + .hn-grid { margin-top: 48px; }

.hn-banner {
  background: linear-gradient(90deg, #0866c8, var(--hn-accent));
  color: #fff;
  text-align: center;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
}

/* Announcement banner — scrolling ticker built on the same hnTicker
   mechanism as .hn-ticker, but pausable (WCAG 2.2.2) and screen-reader
   readable exactly once, since this content (unlike the source ticker) is
   not decorative. */
.hn-announcement-banner {
  /* Positioned + stacked above the decorative .hn-glow (position:absolute,
     z-index:auto) so the glow's source-tinted blur can't paint over the
     banner's own gradient — see marketing_stylesheet_spec.rb. */
  position: relative;
  z-index: 1;
  background: linear-gradient(90deg, #0866c8, var(--hn-accent));
  color: #fff;
  overflow: hidden;
  padding: 11px 0;
}

.hn-announcement-banner__track {
  display: flex;
  width: max-content;
  animation: hnTicker 26s linear infinite;
}

.hn-announcement-banner__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
  padding: 0 40px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
}

.hn-announcement-banner__body {
  font-weight: 400;
  opacity: .9;
}

/* Scoped as a descendant of .hn-announcement-banner (0,2,0) rather than the
   bare .hn-announcement-banner__link class (0,1,0), so this definitively
   outranks .hn-body a:where(:not(.hn-btn)) at (0,1,1) — which otherwise
   paints the link accent blue, identical to the gradient's right end, on top
   of this white. That generic rule stays untouched; see marketing_stylesheet_spec.rb
   for why it must keep excluding .hn-btn instead. */
.hn-announcement-banner .hn-announcement-banner__link {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hn-announcement-banner .hn-announcement-banner__link:hover {
  text-decoration-thickness: 2px;
}

.hn-announcement-banner:hover .hn-announcement-banner__track,
.hn-announcement-banner:focus-within .hn-announcement-banner__track {
  animation-play-state: paused;
}

.hn-quote {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #e8e9ec;
}

.hn-quote__cite {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hn-text-3);
}

.hn-cta {
  max-width: 840px;
  margin: 0 auto;
  padding: 130px 28px 110px;
  text-align: center;
}

.hn-cta .hn-h2 { margin-top: 28px; }

/* The design's CTA paragraph is margin:16px auto 0, tighter than the shared
   .hn-lede default of 20px; and the closing button — a direct .hn-btn child
   here, unlike the design's own margin-top:32px wrapper div — has no margin
   at all otherwise, so it butts against the paragraph above it. Both are
   scoped to .hn-cta (one .hn-lede/.hn-btn each, in both variants) so neither
   touches .hn-lede/.hn-btn usage elsewhere. */
.hn-cta .hn-lede { margin-top: 16px; }
.hn-cta .hn-btn { margin-top: 32px; }

.hn-cta__icon {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
}

.hn-page--broadcast .hn-cta { padding: 150px 28px 120px; }

.hn-page--broadcast .hn-cta .hn-h2 {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.05;
}

/* Platforms section note (plt_note): the design gives this paragraph more
   top margin and a narrower measure than the shared .hn-lede default. */
.hn-page--broadcast .hn-platform-row + .hn-lede { margin-top: 40px; max-width: 52ch; }

/* ==========================================================================
   Footer — shared by both variants.
   ========================================================================== */

.hn-footer {
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.hn-footer__row {
  max-width: var(--hn-max);
  margin: 0 auto;
  padding: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  font-size: 13px;
  color: var(--hn-text-3);
}

.hn-footer__spacer { flex: 1; }

.hn-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.hn-footer a { color: var(--hn-text-muted); }
.hn-footer a:hover { color: #c9cbd1; }

.hn-footer__legal {
  max-width: var(--hn-max);
  margin: 0 auto;
  padding: 0 28px 32px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--hn-text-4);
}

/* ==========================================================================
   Ticker (Broadcast only).
   ========================================================================== */

.hn-ticker {
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  padding: 14px 0;
  overflow: hidden;
}

.hn-ticker__track {
  display: flex;
  gap: 44px;
  width: max-content;
  animation: hnTicker 60s linear infinite;
}

.hn-ticker__item {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hn-text-3);
  white-space: nowrap;
}

.hn-ticker__item::after {
  content: '\00B7';
  color: #33353c;
  margin-left: 44px;
}

/* ==========================================================================
   Player hero (Broadcast only) — full-viewport section with the live
   player. .hn-player is the centered content column inside it; the
   .hn-player__* elements are its children in source order.
   ========================================================================== */

.hn-player-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.hn-player {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
}

.hn-player__source {
  font-family: 'HN Condensed', 'Helvetica Neue Condensed', 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, sans-serif;
  font-stretch: condensed;
  font-size: clamp(44px, 7vw, 84px);
  font-weight: 800;
  line-height: 1.02;
  margin-top: 18px;
  text-wrap: balance;
}

.hn-player__date {
  margin-top: 12px;
  font-size: 16px;
  color: var(--hn-text-2);
}

.hn-player__hour {
  margin-top: 4px;
  font-size: 13px;
  color: var(--hn-text-3);
}

.hn-player__controls {
  display: flex;
  align-items: center;
  gap: 38px;
  margin-top: 52px;
}

/* The design's 38px gap was tuned for three controls; this row now has five
   (previous/skip-back/play/skip-forward/next), which overflows .hn-player's
   24px side padding at narrow widths and pushes the outer buttons flush
   against the viewport edge. Compress the gap only — button padding/font-size
   (and therefore tap target size) is untouched, so every control stays at or
   above Apple's 44px minimum. */
@media (max-width: 600px) {
  .hn-player__controls {
    gap: 12px;
  }
}

.hn-player__button {
  font-family: 'Helveticons';
  font-size: 22px;
  color: var(--hn-text-muted);
  background: none;
  border: none;
  padding: 12px;
  cursor: pointer;
  transition: color .2s ease;
}

.hn-player__button:hover { color: var(--hn-text); }

.hn-player__button:disabled {
  opacity: .35;
  cursor: default;
}

.hn-player__button:disabled:hover { color: var(--hn-text-muted); }

/* Skip back/forward sit between the source-switch and play controls; a
   smaller size keeps that visual hierarchy (source switching stays the
   primary transport action). */
.hn-player__button--skip { font-size: 16px; }

.hn-player__button--play {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .1);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .2s ease;
}

.hn-player__button--play:hover { background: rgba(255, 255, 255, .14); }

.hn-player__button--play .hn-icon {
  font-size: 30px;
  color: var(--hn-text);
}

.hn-player__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  /* Fallback color; JS sets the live inline background-color per source/state. */
  background: #3a3c44;
  animation: hnPulse 2s ease-in-out infinite;
}

/* Small "1x" pill, matching the app's own playback-speed control idiom. */
.hn-player__speed {
  margin-top: 16px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: var(--hn-text-2);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}

.hn-player__speed:hover {
  color: var(--hn-text);
  border-color: rgba(255, 255, 255, .32);
}

.hn-player__status {
  min-height: 20px;
  margin-top: 16px;
  font-size: 13px;
  color: #c9a04d;
}

.hn-player__progress {
  width: min(560px, 84vw);
  margin-top: 36px;
}

.hn-player__track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
}

.hn-player__bar {
  height: 100%;
  width: 0;
  background: var(--hn-accent);
  transition: width .3s linear;
}

.hn-player__times {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: var(--hn-text-3);
  font-variant-numeric: tabular-nums;
}

.hn-player__note {
  margin-top: 64px;
  font-size: 14px;
  color: var(--hn-text-muted);
}

.hn-player__cta { margin-top: 20px; }

.hn-player__trial {
  margin-top: 12px;
  font-size: 12px;
  color: var(--hn-text-3);
}

/* ==========================================================================
   Break sections (Broadcast only) — reuse .hn-kicker / .hn-h2 / .hn-lede
   with contextual overrides for the larger Broadcast type scale.
   ========================================================================== */

.hn-break {
  max-width: 840px;
  margin: 0 auto;
  padding: 130px 28px 0;
  text-align: center;
}

.hn-break:first-of-type { padding-top: 140px; }

.hn-break .hn-kicker { color: var(--hn-link-hover); }

.hn-break .hn-h2 {
  margin-top: 16px;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.05;
}


/* ==========================================================================
   Legal documents (privacy, terms).
   Styled by descendant so the templates carry structure, not classes. These
   pages are long and dense, so the measure is tighter than the marketing
   sections and the vertical rhythm is larger.
   ========================================================================== */

.hn-legal {
  max-width: 70ch;
  margin: 0 auto;
  padding: 72px 28px 96px;
  color: var(--hn-text-2);
  font-size: 16px;
  line-height: 1.7;
}

.hn-legal h1 {
  font-family: 'HN Condensed', 'Helvetica Neue Condensed', 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, sans-serif;
  font-stretch: condensed;
  font-weight: 800;
  font-size: clamp(36px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--hn-text);
  margin: 0;
}

.hn-legal__updated {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--hn-text-3);
}

.hn-legal h2 {
  font-family: 'HN Condensed', 'Helvetica Neue Condensed', 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, sans-serif;
  font-stretch: condensed;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  color: var(--hn-text);
  margin: 56px 0 0;
}

.hn-legal h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--hn-text);
  margin: 32px 0 0;
}

.hn-legal p {
  margin: 16px 0 0;
}

.hn-legal ul,
.hn-legal ol {
  margin: 16px 0 0;
  padding-left: 24px;
}

.hn-legal li {
  margin-top: 8px;
}

.hn-legal strong {
  color: var(--hn-text);
  font-weight: 600;
}

/* No link rule here on purpose: `.hn-body a:where(:not(.hn-btn))` already
   paints links with the accent and its :where() keeps specificity low.
   Adding a competing rule is what previously made button labels invisible. */

.hn-legal hr {
  border: 0;
  border-top: 1px solid var(--hn-border);
  margin: 56px 0 0;
}

@media (max-width: 600px) {
  .hn-legal {
    padding: 48px 20px 72px;
    font-size: 15px;
  }

  .hn-legal h2 {
    margin-top: 44px;
  }
}