/* custom.css — per-site design layer.
 *
 * Ships with the Basecamp project bar. Everything else is intentionally empty:
 * this is where a site adds bespoke design without forking the template.
 * `sites update-template` PRESERVES this file, so template updates never
 * clobber a site's custom look.
 */

/* ── Basecamp project bar ──────────────────────────────────────────────
   Shows signed-in Basecamp users their subscribed cards and a quick
   "Talk" button for feedback. Hidden until /_api/portal/me returns ok. */

body.zk-has-open-bar:not(.zk-open-bar-minimized) {
  --zk-bc-bar-h: 2.4rem;
}

.zk-open-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--color-surface);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  color: var(--color-text);
  font: inherit;
  box-sizing: border-box;
}

.zk-open-bar.is-minimized {
  position: fixed;
  top: 0.55rem;
  left: 0.55rem;
  right: auto;
  width: auto;
  height: auto;
  background: transparent;
  border: 0;
  z-index: 70;
}

.zk-open-bar.is-minimized .zk-open-bar-inner,
.zk-open-bar.is-minimized .zk-open-panel {
  display: none !important;
}

.zk-open-bar-inner {
  max-width: 80rem;
  margin-inline: auto;
  padding: 0.3rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.35rem;
  box-sizing: border-box;
}

.zk-open-bar-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  font: inherit;
  color: var(--color-text);
  cursor: pointer;
  padding: 0.28rem 0.55rem 0.28rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
  background: color-mix(in srgb, var(--color-text) 4%, transparent);
  line-height: 1.15;
  min-height: 1.7rem;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.zk-open-bar-toggle:hover {
  border-color: var(--color-text);
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  transform: translateY(-1px);
}

.zk-open-bar-toggle.has-items {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-surface);
}

.zk-open-bar-toggle.has-items:hover {
  filter: brightness(1.05);
}

.zk-open-bar.is-open .zk-open-bar-toggle {
  border-color: var(--color-text);
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
}

.zk-open-bar-pulse {
  display: none;
  position: absolute;
  left: 0.55rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--color-surface);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-text) 35%, transparent);
  animation: zk-open-ping 1.6s ease-out infinite;
}

.zk-open-bar-toggle.has-items .zk-open-bar-pulse {
  display: block;
}

.zk-open-bar-toggle.has-items .zk-open-bar-label {
  padding-left: 0.55rem;
}

@keyframes zk-open-ping {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-text) 35%, transparent); }
  70% { box-shadow: 0 0 0 0.55rem color-mix(in srgb, var(--color-text) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-text) 0%, transparent); }
}

.zk-open-bar-label {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: inherit;
  line-height: 1.15;
}

.zk-open-bar-count {
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.32rem;
  border-radius: 999px;
  background: var(--color-text);
  color: var(--color-surface);
  font-size: 0.68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.zk-open-bar-toggle.has-items .zk-open-bar-count {
  background: var(--color-surface);
  color: var(--color-text);
}

.zk-open-bar-count.is-zero {
  background: color-mix(in srgb, var(--color-text) 12%, transparent);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.zk-open-bar-chevron {
  flex-shrink: 0;
  width: 0.85rem;
  height: 0.85rem;
  opacity: 0.75;
  transition: transform 0.18s ease, opacity 0.15s ease;
}

.zk-open-bar.is-open .zk-open-bar-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.zk-open-bar-who {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zk-open-bar-ask,
.zk-open-bar-bc {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  box-sizing: border-box;
  height: 1.7rem;
  min-height: 1.7rem;
  padding: 0 0.65rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.zk-open-bar-ask {
  color: var(--color-surface);
  background: var(--color-text);
  border-color: var(--color-text);
}

.zk-open-bar-ask:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.zk-open-bar-ask svg {
  flex-shrink: 0;
  width: 0.85rem;
  height: 0.85rem;
  opacity: 0.95;
}

.zk-open-bar-bc {
  color: var(--color-text) !important;
  text-decoration: none !important;
  background: transparent;
  border-color: color-mix(in srgb, var(--color-text) 18%, transparent);
}

.zk-open-bar-bc:hover {
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
  border-color: var(--color-text);
}

.zk-open-bar-min {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-right: 0.1rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  cursor: pointer;
  line-height: 0;
  order: -1;
}

.zk-open-bar-min:hover {
  color: var(--color-text);
  border-color: var(--color-text);
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
}

.zk-open-bar-chip {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  color: var(--color-surface);
  background: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-surface) 25%, transparent);
  padding: 0.35rem 0.45rem;
  min-height: 2rem;
  min-width: 2rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.18);
  line-height: 0;
  border-radius: 0;
}

.zk-open-bar.is-minimized .zk-open-bar-chip {
  display: inline-flex;
}

.zk-open-bar-chip:hover {
  border-color: var(--color-surface);
}

.zk-open-bar-chip-icon {
  flex-shrink: 0;
  width: 0.85rem;
  height: 0.85rem;
  color: var(--color-surface);
  display: block;
  opacity: 0.95;
}

.zk-open-bar-chip .zk-open-bar-count {
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.28rem;
  font-size: 0.65rem;
  background: var(--color-surface);
  color: var(--color-text);
}

.zk-open-bar-drop {
  position: relative;
  flex-shrink: 0;
  z-index: 62;
}

.zk-open-panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: auto;
  width: min(22rem, calc(100vw - 1.5rem));
  max-height: min(70vh, 26rem);
  overflow-y: auto;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.14);
  z-index: 63;
}

@media (min-width: 480px) {
  .zk-open-panel {
    min-width: 16rem;
  }
}

.zk-open-panel-inner {
  max-width: none;
  margin: 0;
  padding: 0.7rem 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.zk-open-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  background: color-mix(in srgb, var(--color-text) 2%, transparent);
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color 160ms ease, background 160ms ease;
  box-sizing: border-box;
}

.zk-open-item:hover {
  border-color: var(--color-text);
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
}

.zk-open-item-col {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 1.3;
  opacity: 0.7;
}

.zk-open-item-title {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--color-text);
}

.zk-open-item-meta {
  display: block;
  font-size: 0.8rem;
  color: var(--color-secondary);
  line-height: 1.35;
  margin-top: 0.1rem;
}

.zk-open-empty {
  margin: 0;
  padding: 0.65rem 0.15rem 0.35rem;
  color: var(--color-secondary);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Push the site header below the expanded bar */
body.zk-has-open-bar:not(.zk-open-bar-minimized) > header {
  top: var(--zk-bc-bar-h, 2.4rem);
}

body.zk-has-open-bar.zk-open-bar-minimized > header {
  top: 0;
}

@media (max-width: 640px) {
  body.zk-has-open-bar:not(.zk-open-bar-minimized) {
    --zk-bc-bar-h: 2.35rem;
  }
  .zk-open-bar-inner {
    padding: 0.28rem 0.85rem;
    gap: 0.5rem;
  }
  .zk-open-bar-who {
    display: none;
  }
  .zk-open-panel {
    left: 0;
    width: min(20rem, calc(100vw - 1.25rem));
    max-width: calc(100vw - 1.25rem);
  }
  .zk-open-panel-inner {
    padding: 0.65rem 0.65rem 0.75rem;
  }
  .zk-open-bar.is-minimized {
    top: auto;
    bottom: 0.85rem;
    left: 0.85rem;
    right: auto;
  }
}

/* Small corner note. A short pad lets the copyright line scroll clear of it. */
body.zk-has-notice {
  padding-bottom: calc(4.25rem + env(safe-area-inset-bottom));
}

.zk-notice {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 40;
  width: max-content;
  max-width: calc(100vw - 2rem);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-text) 12%, transparent);
}

.zk-notice-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0.45rem 0.55rem 0.45rem 0.85rem;
}

.zk-notice-copy {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--color-secondary);
  white-space: nowrap;
}

.zk-notice-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.zk-notice-ok {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.35rem 0.7rem;
  border-radius: 0.45rem;
  border: 0;
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
}

.zk-notice-ok:hover { filter: brightness(1.12); }

.zk-notice-ok:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary);
}

.zk-notice-privacy {
  font-size: 0.8125rem;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-right: 0.35rem;
}

.zk-notice-privacy:hover { color: var(--color-primary); }

.zk-notice-privacy:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary);
  border-radius: 0.25rem;
}

@media (prefers-reduced-motion: no-preference) {
  .zk-notice.is-leaving {
    transform: translateY(12px);
    opacity: 0;
    transition: transform 180ms ease, opacity 180ms ease;
  }
}

/* ══ Joplin Radio design layer ═══════════════════════════════════════════
   From the Figma homepage prototype ("Joplin Radio Prototype 2026",
   Homepage-Desktop, light mode). Canvas is 1920 wide with a 1280 content
   column, Barlow throughout, brand red #ec1e24, buttons #e42128.

   Overrides here are unlayered, so they beat the Tailwind utilities the
   renderer emits (those live in @layer utilities). */

:root {
  --jr-red: #ec1e24;          /* wordmark, accents, card fades, CTA border */
  --jr-page: #f8f8f8;         /* page background */
  --jr-band: #ffffff;         /* white bands */
  --jr-card: #ffffff;
  --jr-muted: #a3a3a3;        /* hints on dark */
  --jr-field-border: #ccc8c0;
  --jr-rule: #a1a1a1;         /* footer divider */
  --jr-font: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* Barlow, self-hosted: Google's latin subset of the five weights the design
   uses (from @fontsource/barlow 5.2.8, SIL OFL, fonts/OFL.txt). The Google
   Fonts stylesheet it replaces blocked rendering for ~0.9 s on a phone.
   layout.html preloads 400 and 700, the weights above the fold. */
@font-face { font-family: "Barlow"; font-style: normal; font-display: swap; font-weight: 100;
  src: url(/fonts/barlow-latin-100-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-display: swap; font-weight: 400;
  src: url(/fonts/barlow-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-display: swap; font-weight: 500;
  src: url(/fonts/barlow-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-display: swap; font-weight: 600;
  src: url(/fonts/barlow-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-display: swap; font-weight: 700;
  src: url(/fonts/barlow-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Dark (Figma Homepage-Desktop-Dark Mode): bands alternate pure black and
   #202020, text is white. The kit's dark neutrals are blue-tinted
   (#0e1319), so they're replaced site-wide, not just on the homepage. */
:root[data-theme="dark"] {
  --jr-page: #202020;
  --jr-band: #000000;
  --jr-card: #000000;
  --color-surface: #202020;
  --color-text: #ffffff;
  --color-secondary: #a3a3a3;
}

body {
  font-family: var(--jr-font);
  background: var(--jr-page);
}

/* The design's content column is 1280px; the kit's containers are 1152
   and count their px-6 gutters inside the max width, so add those back. */
.max-w-6xl { max-width: calc(80rem + 3rem); }

/* ── Buttons (Figma "Button": 18px Medium, 12/31 padding, 4px radius) ── */
#app .btn-primary,
.jr-footer .btn-primary {
  border-radius: 4px;
  padding: 0.75rem 1.9375rem;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.5rem;
  letter-spacing: 0;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.jr-wordmark {
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 1;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}
@media (min-width: 1024px) { .jr-wordmark { font-size: 2.5rem; } }
.jr-accent { color: var(--jr-red); }

.jr-header .navlink {
  color: var(--color-text);
  font-size: 1.125rem;
  font-weight: 400;
  padding: 0.375rem 0.5rem;
  border-radius: 0;
}
@media (min-width: 1280px) { .jr-header .navlink { font-size: 1.25rem; } }
.jr-header .navlink:hover { color: var(--jr-red); }
.jr-header .navlink-active { font-weight: 400; }
.jr-header .navlink-active::after {
  left: 0.5rem;
  right: 0.5rem;
  bottom: -2px;
  height: 1px;
  border-radius: 0;
  background: var(--jr-red);
}

/* Anchor jumps land below the 96px sticky header */
.zk-section-wrap { scroll-margin-top: 6.5rem; }

/* Red square light/dark toggle */
.jr-header .zk-theme-btn {
  width: 2.25rem;
  height: 2.25rem;
  margin-left: 0.5rem;
  border-radius: 5px;
  background: var(--color-primary);
  color: #fff;
  opacity: 1;
}
.jr-header .zk-theme-btn:hover { background: var(--color-primary); filter: brightness(1.1); }
.jr-header .zk-theme-btn svg { width: 1.125rem; height: 1.125rem; }

/* Menu panel (below lg; no Figma frame): opens under the 80px header (the
   kit's panel assumes 64 and covered its bottom edge), the design's 18px
   Medium phone links on hairlines, red for the current page instead of the
   kit's pink pill. Scrolls when an open group runs past the screen. */
.jr-header .zk-mnav-panel {
  top: 5rem;
  max-height: calc(100vh - 5rem);
  max-height: calc(100dvh - 5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 1.5rem 1rem;
  background: var(--jr-band);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  border-bottom: 2px solid var(--jr-red);
  box-shadow: 0 24px 40px -16px rgb(0 0 0 / 0.3);
}
.jr-header .zk-mnav-panel .navlink {
  padding: 0.8125rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  border-radius: 0;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5rem;
}
.jr-header .zk-mnav-panel > :last-child,
.jr-header .zk-mnav-panel > :last-child > .navlink { border-bottom: 0; }
.jr-header .zk-mnav-panel .navlink-active { background: none; color: var(--jr-red); }
.jr-header .zk-mnav-panel .zk-navgroup-chev { width: 1.125rem; height: 1.125rem; color: var(--jr-red); opacity: 1; }
.jr-header .zk-mnav-panel .zk-navgroup[open] > summary { border-bottom-color: transparent; }
.jr-header .zk-mnav-panel .zk-navgroup-panel {
  gap: 0;
  padding: 0 0 0.5rem 1rem;
  border-radius: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}
.jr-header .zk-mnav-panel .zk-navgroup-item {
  padding: 0.5625rem 0;
  border-radius: 0;
  font-size: 1rem;
  white-space: normal;
}
.jr-header .zk-mnav-panel .zk-navgroup-item:hover { background: none; color: var(--jr-red); }

/* ── Home hero ───────────────────────────────────────────────────────── */
.hero-image { color: #fff; border-bottom: 0; }
.hero-image .zk-hero-content { padding-block: 3.5rem; }
@media (min-width: 768px) { .hero-image .zk-hero-content { padding-block: 4.25rem; } }
.hero-image h1 {
  font-weight: 700;
  font-size: clamp(2.25rem, 3vw + 1rem, 3.75rem);
  line-height: 1.2;
  letter-spacing: 0;
  max-width: 43rem;
}
.hero-image h1 + p {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  max-width: 40rem;
  opacity: 1;
}

/* Hero copy slides in from the left (Figma HeroAnimation) */
@keyframes jr-slide-in {
  from { opacity: 0; transform: translateX(-3rem); }
  to   { opacity: 1; transform: none; }
}
.hero-image .zk-hero-content > * { animation: jr-slide-in 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-image .zk-hero-content > :nth-child(2) { animation-delay: 120ms; }
.hero-image .zk-hero-content > :nth-child(3) { animation-delay: 240ms; }

/* ── Section headings (Figma: 36px Bold) ─────────────────────────────── */
.jr-sec-title,
.zk-split h2,
.zk-tiles-sec h2,
.zk-contactcta h2,
.zk-contactcta-form h3 {
  font-size: clamp(1.75rem, 1.5vw + 1.1rem, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}
.jr-sec-title { text-align: center; }

/* ── Station cards (feature-grid variant "stations") ─────────────────── */
.jr-stations { background: var(--jr-page); }
.jr-stations > div { padding-block: 2.5rem 2.75rem; }
.jr-stations-grid {
  margin-top: 1.75rem;
  display: grid;
  gap: 2px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px)  { .jr-stations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .jr-stations-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.jr-station {
  display: flex;
  flex-direction: column;
  background: var(--jr-card);
  color: var(--color-text);
  text-decoration: none;
  overflow: hidden;
}
.jr-station-media {
  position: relative;
  aspect-ratio: 426 / 200;
  display: grid;
  place-items: center;
  background: #404040;
  overflow: hidden;
}
/* Absolutely centred so the % caps resolve against the panel (the grid
   cell's height is not definite, which let square logos overflow) */
.jr-station-media img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 70%;
  max-height: 66%;
  object-fit: contain;
  transition: transform 400ms ease;
}
.jr-station-media .zk-image-placeholder { position: absolute; inset: 0; }
.jr-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 0.3rem 0.65rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.jr-station-body { padding: 1.25rem 1.5rem 1.75rem; }
.jr-station-body :is(h2, h3) {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
}
.jr-station-body p { margin-top: 0.35rem; font-size: 0.875rem; line-height: 1.5; }
.jr-station-body .jr-station-link {
  color: var(--jr-red);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
a.jr-station:hover .jr-station-media img { transform: scale(1.05); }
a.jr-station:hover .jr-station-link span,
a.jr-station:focus-visible .jr-station-link span { text-decoration: underline; text-underline-offset: 3px; }

/* ── Photo cards (feature-grid variant "photo") ──────────────────────── */
.jr-photocards { background: var(--jr-band); }
.jr-photocards > div { padding-block: 2.75rem 4.25rem; }
.jr-photocards-grid {
  margin-top: 1.5rem;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px)  { .jr-photocards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .jr-photocards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.jr-photocard {
  position: relative;
  display: block;
  aspect-ratio: 420 / 264;
  overflow: hidden;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}
.jr-photocard > img,
.jr-photocard > .zk-image-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}
/* Figma: linear fade from transparent grey to brand red */
.jr-photocard-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(168 168 168 / 0), var(--jr-red));
}
.jr-photocard-veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(236 30 36 / 0.35), var(--jr-red));
  opacity: 0;
  transition: opacity 450ms ease;
}
/* Title sits at the bottom; the description row opens on hover/focus */
.jr-photocard-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 1.25rem 0.9rem;
  text-align: center;
  display: grid;
  grid-template-rows: auto 0fr;
  row-gap: 0;
  transition: grid-template-rows 450ms cubic-bezier(0.2, 0.7, 0.2, 1), row-gap 450ms ease;
}
.jr-photocard-copy :is(h2, h3) { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.jr-photocard-copy p {
  min-height: 0;
  overflow: hidden;
  font-size: 1.125rem;
  line-height: 1.3;
  opacity: 0;
  transition: opacity 350ms ease;
}
/* :focus as well as :hover so a tap opens the card on touch screens — the
   mobile design shows titles only, so the description waits for a tap */
.jr-photocard:hover .jr-photocard-copy,
.jr-photocard:focus .jr-photocard-copy { grid-template-rows: auto 1fr; row-gap: 0.5rem; }
.jr-photocard:hover .jr-photocard-copy p,
.jr-photocard:focus .jr-photocard-copy p { opacity: 1; }
.jr-photocard:hover .jr-photocard-veil::after,
.jr-photocard:focus .jr-photocard-veil::after { opacity: 1; }
.jr-photocard:hover > img { transform: scale(1.05); }
.jr-photocard:focus { outline: none; }
.jr-photocard:focus-visible { outline: 3px solid var(--jr-red); outline-offset: 3px; }

/* ── Text + image bands (split) ──────────────────────────────────────── */
.zk-split { background: var(--jr-band); border-top: 0; }
.zk-split-flip { background: var(--jr-page); }
.zk-split > div { row-gap: 2rem; padding-block: 3.5rem; }
@media (min-width: 768px) {
  .zk-split > div { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 1.8rem; }
  .zk-split-flip > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 2.5rem; }
  .zk-split-flip .zk-split-media { order: -1; }
}
.zk-split .zk-rich {
  color: var(--color-text);
  font-size: 1.125rem;
  line-height: 1.4;
}
.zk-split .zk-split-media img {
  width: 100%;
  max-width: none;
  aspect-ratio: 565 / 310;
  object-fit: cover;
  border-radius: 10px;
}
/* Stacked, a band shows its photo first (as Homepage Mobile draws it) */
@media (max-width: 767px) { .zk-split .zk-split-media { order: -1; } }

/* ── Community tiles (image-tiles): black band, red rings ─────────────── */
.zk-tiles-sec {
  --jr-ring: clamp(240px, 27vw, 514px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #000;
  color: #fff;
  border-top: 0;
}
.zk-tiles-sec::before,
.zk-tiles-sec::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: var(--jr-ring);
  height: var(--jr-ring);
  background: url("/assets/home/circles.svg") center / contain no-repeat;
  pointer-events: none;
}
.zk-tiles-sec::before { left: calc(var(--jr-ring) * -0.426); bottom: calc(var(--jr-ring) * -0.558); }
.zk-tiles-sec::after  { right: calc(var(--jr-ring) * -0.4);  top: calc(var(--jr-ring) * -0.613); }
.zk-tiles-sec > div { padding-block: 2.5rem 3.25rem; }
.zk-tiles-sec h2 { color: #fff; text-align: center; }
.zk-tiles-sec .zk-rich {
  color: #fff;
  text-align: center;
  margin-inline: auto;
  margin-top: 0.5rem;
  font-size: 1.125rem;
}
.zk-tiles-sec .zk-tiles { margin-top: 2rem; gap: 15px; }
@media (min-width: 768px) and (max-width: 1023px) {
  .zk-tiles-sec .zk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.zk-tiles-sec .zk-tile {
  aspect-ratio: 309 / 224;
  max-width: none;
  border-radius: 10px;
}
/* Figma: #a8a8a8 multiply ≈ a 34% black veil */
.zk-tiles-sec .zk-tile-veil { background: rgb(0 0 0 / 0.34); }
.zk-tiles-sec .zk-tile-link:hover .zk-tile-veil { background: rgb(0 0 0 / 0.5); }
.zk-tiles-sec .zk-tile-label { font-size: 1.25rem; }
@media (min-width: 1024px) { .zk-tiles-sec .zk-tile-label { font-size: 1.5rem; } }

/* ── Contact CTA: black card, red border, map under the pitch ─────────── */
.zk-contactcta { background: var(--jr-page); padding: 3rem 1rem; }
@media (min-width: 768px) { .zk-contactcta { padding: 5rem 1.5rem; } }
.zk-contactcta-card {
  max-width: 80rem;
  background: #000;
  border: 5px solid var(--jr-red);
}
@media (min-width: 1024px) {
  .zk-contactcta-card { padding: 2.75rem 4.7rem 3.5rem; column-gap: clamp(3rem, 8vw, 8.3rem); }
}
.zk-contactcta-copy p { opacity: 1; font-size: 1.125rem; line-height: 1.35; margin-top: 1.75rem; }
.zk-contactcta-img { display: block; margin-top: 1.75rem; width: 329px; max-width: 100%; height: auto; }
/* Balanced, so a two-line title splits evenly ("Contact an Account /
   Executive Today!", as on the Locations and station pages) */
.zk-contactcta-form h3 { margin-bottom: 1.25rem; text-wrap: balance; }
.zk-contactcta-form form { margin-top: 0; max-width: none; }
/* Field styles are shared with the contact page's form (.jr-contact-form) */
.zk-contactcta-form label,
.jr-contact-form label { font-size: 0.875rem; font-weight: 400; }
.zk-contactcta-form .input,
.jr-contact-form .input {
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid var(--jr-field-border);
  border-radius: 4px;
  font-size: 1rem;
  background: #fff;
  color: #111;
}
/* 118 tall as drawn (rows="5" alone makes it 142) */
.zk-contactcta-form textarea.input,
.jr-contact-form textarea.input { min-height: 118px; height: 118px; line-height: 1.5; }
/* The phone hint sits 4px above the Message label, not a full row gap */
.zk-contactcta-form form > div:has(> .zk-field-hint),
.jr-contact-form form > div:has(> .zk-field-hint) { margin-block-end: 4px; }
.zk-contactcta-form .input::placeholder,
.jr-contact-form .input::placeholder { color: rgb(54 65 83 / 0.5); opacity: 1; }
.zk-contactcta-form .zk-field-hint,
.jr-contact-form .zk-field-hint { color: var(--jr-muted); font-size: 1rem; }
.zk-contactcta-form button[type="submit"],
.jr-contact-form button[type="submit"] { display: flex; margin: 1.75rem auto 0; }
/* The thank-you card that replaces the form is white; the panel's white
   text (and site.css's white form h3) made its "Thank you!" vanish */
.zk-contactcta-form .card,
.zk-contactcta-form .card h3 { color: var(--color-text); }

/* ── Footer (Figma Footer-Desktop) ───────────────────────────────────── */
.jr-footer { background: #000; color: #fff; }
.jr-footer a { color: inherit; text-decoration: none; }
.jr-footer a:hover { color: var(--jr-red); }
.jr-footer .jr-wordmark { color: #fff; }
.jr-footer .jr-wordmark:hover { color: #fff; }
.jr-wordmark-lg { font-size: 2.25rem; }
@media (min-width: 1024px) { .jr-wordmark-lg { font-size: 3rem; } }
.jr-footer-main {
  max-width: calc(80rem + 3rem);
  margin-inline: auto;
  padding: 3rem 1.5rem;
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .jr-footer-main { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); padding-block: 2.25rem 3.25rem; }
}
/* Tablet: the contact column gets the room the email address needs (at
   1.7 / 1 / 1 it ran 37px off a 768 screen) */
@media (min-width: 768px) and (max-width: 1023px) {
  .jr-footer-main { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1.3fr); column-gap: 2rem; }
}
.jr-footer-tagline { margin-top: 0.75rem; font-size: 1.25rem; }
.jr-footer-h { font-weight: 600; font-size: 1.25rem; margin-bottom: 0.75rem; }
.jr-footer-links { font-size: 1.125rem; line-height: 35px; }
.jr-footer-contact { display: grid; gap: 1.25rem; font-size: 1.125rem; }
.jr-footer-muted { color: var(--jr-muted); }
.jr-footer-socials { margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; text-decoration: underline; }
/* Brand-mark links: a 36px tap target holding a 22px white mark that goes
   red on hover like the other footer links. The row wraps on narrow columns. */
.jr-footer-socials:has(.jr-social) { gap: 0.25rem; margin-left: -0.4375rem; }
.jr-footer .jr-social { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 4px; }
.jr-footer .jr-social svg { width: 1.375rem; height: 1.375rem; }
.jr-footer .jr-social:focus-visible { outline: 2px solid var(--jr-red); outline-offset: 2px; }
@media (min-width: 1024px) {
  .jr-footer-tagline, .jr-footer-h { font-size: 1.5rem; }
  .jr-footer-links, .jr-footer-contact { font-size: 1.25rem; }
}
.jr-footer-bar { border-top: 1px solid var(--jr-rule); }
.jr-footer-bar-inner {
  max-width: calc(80rem + 3rem);
  margin-inline: auto;
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  font-weight: 100;
  font-size: 1.125rem;
  line-height: 35px;
}
@media (min-width: 1024px) { .jr-footer-bar-inner { font-size: 1.25rem; } }
/* Each side wraps as a unit; Barlow Thin's space is only ~4px, so the
   "|" between legal links gets a little air */
.jr-footer-bar-inner > span { white-space: nowrap; }
/* The kit pads <body> while its corner notice shows; pad the black footer
   instead so no light strip appears under it */
body.zk-has-notice { padding-bottom: 0; }
body.zk-has-notice .jr-footer { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
.jr-footer-legal [aria-hidden] { margin-inline: 0.2em; }

/* Soundwave under the tagline (Figma Footer-Desktop "Group 391"). It sits
   22px left of the wordmark in the design; its faded ends keep it looking
   aligned. Desktop only: Footer-Mobile doesn't have it. */
.jr-footer-wave { display: none; }
@media (min-width: 768px) {
  .jr-footer-wave {
    display: block;
    width: 337px;
    max-width: calc(100% + 1.375rem);
    height: auto;
    margin-left: -1.375rem;
  }
}

/* ══ Interior pages (Figma About / FAQ / Contact / Listen Live) ═══════════
   Desktop light frames, 1920 canvas. Pages opt in with meta.layout "bands"
   (Contact always uses it); the renderer wraps the body in .jr-page. */

/* Hero: a 315px photo band with the copy centred in it. The 44.7% veil
   (the design's #8d8d8d multiply) is set inline by heroHtml. */
.hero-image.jr-hero-page { display: flex; align-items: center; min-height: 315px; }
.hero-image.jr-hero-page .zk-hero-content { width: 100%; padding-block: 3rem; }
/* 833px title box (the widest drawn, Locations), so "Radio Advertising in
   Joplin, MO" stays on one line and Stations' title breaks after "States" */
.hero-image.jr-hero-page h1 { max-width: 52.0625rem; }

/* Thin red rails on the 1440 frame edges, from the hero to the footer
   (Figma "Rectangle 40": 1px #ff0000). Only where the screen is wide
   enough to show them outside the 1280 column. */
.jr-page { position: relative; }
/* A short page still runs its rails down to the footer */
#app:has(> .jr-page) { display: flex; flex-direction: column; }
#app > .jr-page { flex: 1 0 auto; }
@media (min-width: 1500px) {
  .jr-page::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 720px);
    width: 1440px;
    border-inline: 1px solid #f00;
    pointer-events: none;
    z-index: 1;
  }
}
.jr-page-norails::after { display: none; }

/* Intro prose on the column (About): 18px, 34px under the hero */
.jr-intro > div { padding-top: 2.125rem; }
.jr-intro-copy {
  max-width: 1183px;
  color: var(--color-text);
  font-size: 1.125rem;
  line-height: 1.2;
}
/* Paragraphs a blank line apart, as drawn */
.jr-intro-copy p { margin-block: 1.2em; }
.jr-intro-copy > :first-child { margin-top: 0; }
.jr-intro-copy > :last-child { margin-bottom: 0; }

/* Headings with a row of buttons under each (Market: "Missouri", then its
   city buttons): 36px heads, 48px buttons 15px apart */
.jr-intro-copy h2 {
  margin: 46px 0 0;
  font-size: clamp(1.75rem, 1.5vw + 1.1rem, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}
.jr-intro-copy p:has(> .btn-primary) { display: flex; flex-wrap: wrap; gap: 15px; margin: 12px 0 0; }
.jr-intro-copy p:has(> .btn-primary) + h2 { margin-top: 23px; }
/* Prose straight into the footer CTA (Market): 84px above its red rule */
.jr-intro:has(+ .jr-ctafoot) > div { padding-bottom: 5.25rem; }

/* Text + image bands sit on the page grey here (white on the homepage),
   unless marked white (split "white") */
.jr-page .zk-split,
:root[data-theme="dark"] #app .jr-page .zk-split { background: var(--jr-page); }
.jr-page .zk-split.jr-band-white,
:root[data-theme="dark"] #app .jr-page .zk-split.jr-band-white { background: var(--jr-band); }

/* About's layout (589 / 126 / 565, 492px heads). :where keeps the
   specificity these had before the opt-out, so the phone rules still win. */
.jr-page:where(:not(.jr-page-splits-home)) .zk-split > div { padding-block: 3.75rem 3.625rem; }
.jr-page:where(:not(.jr-page-splits-home)) .zk-split-flip > div { padding-block: 2.375rem 3.375rem; }
.jr-page:where(:not(.jr-page-splits-home)) .zk-split h2 { max-width: 30.75rem; }
.jr-page:where(:not(.jr-page-splits-home)) .zk-split .zk-rich { max-width: 589px; margin-top: 1.1rem; line-height: 1.2; }
.jr-page:where(:not(.jr-page-splits-home)) .zk-split .btn-primary { margin-top: 1.8rem; }
/* Tablet: interior bands stay stacked, photo first. Their copy runs long
   (Hiring's bands are 300+ words), so side by side at 768 the photo floated
   in a tall column of white space. */
@media (min-width: 768px) and (max-width: 1023px) {
  .jr-page .zk-split > div,
  .jr-page .zk-split-flip > div { grid-template-columns: minmax(0, 1fr); }
  .jr-page .zk-split .zk-split-media { order: -1; }
  .jr-page .zk-split h2,
  .jr-page .zk-split .zk-rich { max-width: none; }
}
@media (min-width: 1024px) {
  .jr-page:where(:not(.jr-page-splits-home)) .zk-split > div { grid-template-columns: minmax(0, 589fr) minmax(0, 565fr); column-gap: 7.875rem; }
  .jr-page:where(:not(.jr-page-splits-home)) .zk-split-flip > div { grid-template-columns: minmax(0, 565fr) minmax(0, 565fr); column-gap: 9.375rem; }
}

/* meta.splits "home" (Figma Stations): the homepage's split, with one-line
   heads and a 600px body; the picture-left one is 565 / 127 / 588.
   Spacing as drawn: 58 / 58 in the white band, 115 under the photo cards,
   76 over the questions, 119 under them, 104 over the contact card. */
.jr-page-splits-home .zk-split .zk-rich { max-width: 600px; margin-top: 1.425rem; line-height: 1.2; }
.jr-page-splits-home .zk-split-flip .zk-rich { margin-top: 0.725rem; }
@media (min-width: 640px) {
  .jr-page-splits-home .zk-split > div { padding-block: 3.625rem; }
  .jr-page-splits-home .zk-split-flip > div { padding-block: 3.59375rem 2.3875rem; }
  .jr-page-splits-home .zk-split:not(.zk-split-flip):not(.jr-band-white) > div { padding-block: 3.71875rem 3.25rem; }
  .jr-page.jr-page-splits-home .zk-contactcta { padding-block: 3.25rem 6.5rem; }
}
@media (min-width: 1024px) {
  .jr-page-splits-home .zk-split-flip > div { grid-template-columns: minmax(0, 565fr) minmax(0, 588fr); column-gap: 7.9375rem; }
}

/* meta.splits "station" (Figma station page): About's bands, spaced as
   drawn: the photo 46 under the hero, the next band's copy 59 under that
   photo, 69 from its button to the white band. The picture-left band's
   copy runs 589 wide, 24px past the column, as drawn. */
@media (min-width: 640px) {
  .jr-page-splits-station .zk-split:not(.zk-split-flip) > div { padding-block: 2.875rem 2.3125rem; }
  .jr-page-splits-station .zk-split-flip > div { padding-block: 1.375rem 4.3125rem; }
}
@media (min-width: 1024px) {
  .jr-page-splits-station .zk-split-flip .zk-rich { max-width: none; margin-right: -24px; }
}

/* Photo cards on an interior page: on the page grey, 45px under the band
   above (Figma Stations "Ways We Help…") */
.jr-page .jr-photocards { background: var(--jr-page); }
.jr-page .jr-photocards > div { padding-block: 2.8125rem 3.59375rem; }
.jr-page .jr-photocards .jr-sec-title + .jr-photocards-grid { margin-top: 2.1875rem; }

/* Station grid straight under the intro (Stations): no title, 38px under
   the copy, 79px over the next band */
.jr-intro + .zk-section-wrap > .jr-stations > div { padding-block: 0.6rem 4.9rem; }

/* A narrow intro centred on the page (meta.introAlign "center") */
.jr-intro-center .jr-intro-copy { max-width: 781px; margin-inline: auto; }

/* A line under a card-grid title (Listen Live "Pick a station below…") */
.jr-sec-intro {
  margin-top: 1.25rem;
  text-align: center;
  color: var(--color-text);
  font-size: 1.125rem;
  line-height: 1.2;
}
.jr-sec-intro + .jr-stations-grid,
.jr-sec-intro + .jr-photocards-grid { margin-top: 2.1rem; }

/* ── Region cards (feature-grid variant "regions") ─────────────────────── */
.jr-regions { background: var(--jr-band); }
.jr-regions > div { padding-block: 2.6875rem 4.625rem; }
.jr-regions-grid {
  margin-top: 1.125rem;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px)  { .jr-regions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .jr-regions-grid { grid-template-columns: repeat(var(--jr-cols, 4), minmax(0, 1fr)); } }
.jr-region {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 240px;
  padding: 31px 16px 15px;
  background: var(--jr-card);
  color: var(--color-text);
  text-align: center;
  text-decoration: none;
  border: 3px solid var(--color-primary);
  border-radius: 10px;
}
/* Pictures keep their own size (the state SVGs are ~75–135 × 72) */
.jr-region-media {
  height: 72px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.jr-region-media img { width: auto; height: auto; max-width: 100%; max-height: 72px; }
.jr-region-media .zk-image-placeholder { width: 120px; height: 72px; }
.jr-region h3 { margin-top: 4px; font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.jr-region p { margin-top: 18px; max-width: 15rem; font-size: 1.125rem; line-height: 1.2; }
a.jr-region:hover h3 { color: var(--jr-red); }

/* Three across (Figma station "What is Advertiser Fit?"): 426 × 307 cards
   13px apart on a 1304 row, ~85px icons, the copy set left; 57px under */
.jr-regions-wide > div { padding-bottom: 3.5625rem; }
.jr-regions-wide .jr-regions-grid { margin-top: 1.2375rem; gap: 13px; }
@media (min-width: 1024px) { .jr-regions-wide .jr-regions-grid { margin-inline: -12px; } }
.jr-regions-wide .jr-region { min-height: 307px; padding: 30px 31px 25px; }
.jr-regions-wide .jr-region-media { height: 88px; align-items: center; }
.jr-regions-wide .jr-region-media img { max-height: 88px; }
.jr-regions-wide .jr-region h3 { margin-top: 8px; }
.jr-regions-wide .jr-region p { margin-top: 13px; max-width: none; align-self: stretch; text-align: left; }

/* ── Question accordion (feature-grid variant "faq") ───────────────────── */
.jr-faqs > div { padding-block: 2.4375rem 0.75rem; }
.jr-faqs-title {
  font-size: clamp(1.75rem, 1.5vw + 1.1rem, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}
.jr-faqs .jr-sec-intro { text-align: left; }
.jr-faq-list { margin-top: 1.375rem; display: grid; gap: 25px; }
.jr-faq {
  background: var(--jr-card);
  color: var(--color-text);
  border: 3px solid var(--color-primary);
  border-radius: 10px;
}
.jr-faq-q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 25px 25px 25px 37px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}
.jr-faq-q::-webkit-details-marker { display: none; }
.jr-faq-q::marker { content: ""; }
.jr-faq-q:focus { outline: none; }
.jr-faq-q:focus-visible { outline: 3px solid var(--jr-red); outline-offset: 4px; border-radius: 6px; }
/* Pinned to the first line, 4px above its centre as drawn (stays put when
   a question wraps) */
.jr-faq-chev { flex-shrink: 0; align-self: flex-start; margin-top: 3px; transition: transform 200ms ease; }
.jr-faq:not([open]) .jr-faq-chev { transform: rotate(180deg); }
.jr-faq-a {
  margin-top: -0.25rem;
  padding: 0 56px 33px 37px;
  font-size: 1.125rem;
  line-height: 1.2;
}

/* ── Centred callout on an interior page (Figma station "KIX 102.5 Radio
   Personalities": 36px head, 18px copy 589 wide, the button centred) ─── */
.jr-page .zk-callout { background: var(--jr-page); border-top: 0; }
.jr-page .zk-callout > div { padding-block: 2.9375rem 3.375rem; }
.jr-page .zk-callout h2 {
  font-size: clamp(1.75rem, 1.5vw + 1.1rem, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}
.jr-page .zk-callout .zk-rich {
  max-width: 589px;
  margin-top: 0.675rem;
  color: var(--color-text);
  font-size: 1.125rem;
  line-height: 1.2;
}
.jr-page .zk-callout > div > .btn-primary { margin-top: 1.575rem; }

/* ── Personality cards (split variant "person") ───────────────────────── */
/* Figma station page: two columns 677px apart on a 1322 row; a 251px round
   photo with a 1px red ring drawn inside it, 17px, then the copy. Buttons
   line up along each row's bottom. 64px between rows, 83 over the
   contact card. */
.jr-people { background: var(--jr-page); }
.jr-people-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 4rem;
  padding-bottom: 0;
}
@media (min-width: 1024px) {
  .jr-people-grid {
    max-width: calc(1322px + 3rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }
}
/* Column, so the editor's action bar sits above the card, not beside it */
.jr-people-grid > .zk-section-wrap { display: flex; flex-direction: column; min-width: 0; }
.jr-person { flex: 1; display: flex; align-items: flex-start; gap: 17px; color: var(--color-text); }
.jr-person-photo { flex-shrink: 0; width: 251px; margin-top: 3px; }
.jr-person-photo img,
.jr-person-photo .zk-image-placeholder {
  display: block;
  width: 251px;
  height: 251px;
  border-radius: 50%;
  object-fit: cover;
  outline: 1px solid var(--color-primary);
  outline-offset: -1px;
}
.jr-person-copy { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.jr-person-name {
  max-width: 345px;
  color: var(--color-primary);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: 0.04em;
}
.jr-person-bio { max-width: 376px; margin-top: 12px; font-size: 1.125rem; line-height: 1.2; letter-spacing: 0.02em; }
.jr-person-bio > :first-child { margin-top: 0; }
.jr-person-sched { margin-top: 18px; font-size: 1.25rem; font-weight: 600; line-height: 24px; letter-spacing: 0.02em; }
.jr-person-sched b { font-weight: 600; }
.jr-person-sched span { margin-left: 9px; color: var(--color-primary); }
/* Pinned to the bottom of the row, at least 30px under the schedule */
.jr-person-copy .btn-primary { margin-top: auto; }
.jr-person-copy > .jr-person-sched,
.jr-person-copy > .jr-person-bio:last-of-type { margin-bottom: 30px; }
.jr-people + .zk-section-wrap > .zk-contactcta { padding-block: 5.1875rem 6.0625rem; }

/* ── Question cards (feature-grid variant "qa") ───────────────────────── */
/* Figma Stations FAQ: 426 × 232 cards, 13 / 11px apart, on a 1304 grid
   (12px past the column each side) */
.jr-qas > div { padding-block: 2.3875rem 3.71875rem; }
.jr-qa-grid {
  margin-top: 1.7125rem;
  display: grid;
  gap: 11px 13px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px)  { .jr-qa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .jr-qa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-inline: -12px; } }
.jr-qa {
  min-height: 232px;
  padding: 18.7px 11px 24px 25px;
  background: var(--jr-card);
  color: var(--color-text);
  border: 3px solid var(--color-primary);
  border-radius: 10px;
}
.jr-qa h3 { max-width: 363px; font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.jr-qa p { margin-top: 18.7px; font-size: 1.125rem; line-height: 1.2; }

/* Contact CTA on these pages: 52px under an accordion / 83px under the
   station grid (their own bottom padding makes up the rest) */
.jr-page .zk-contactcta { padding-block: 2.4375rem 3.625rem; }
/* Straight under the intro prose (Locations): 58px */
.jr-intro + .zk-section-wrap > .zk-contactcta { padding-top: 3.625rem; }

/* ── Contact page ──────────────────────────────────────────────────────── */
.jr-contact > div { padding-block: 3.5rem 4.125rem; display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
  .jr-contact > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
}
.jr-contact-info { padding-top: 5px; color: var(--color-text); }
.jr-contact-intro { max-width: 36rem; font-size: 1.125rem; line-height: 1.2; }
.jr-contact-intro.article > * { margin: 0; }
.jr-contact-h { margin-top: 2.5rem; font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.jr-contact-details { margin-top: 1rem; display: grid; gap: 1.25rem; font-size: 1.125rem; line-height: 1.2; }
.jr-contact-details a { color: inherit; text-decoration: none; }
.jr-contact-details a:hover { color: var(--jr-red); }
.jr-contact-form form { margin-top: 0; max-width: 488px; }
.jr-contact-form label { color: var(--color-text); }

/* ── Footer CTA ("Let's Talk"): white band under a 2px red rule ────────── */
.jr-ctafoot { background: var(--jr-band); border-top: 2px solid var(--color-primary); }
.jr-ctafoot > div { padding-block: 2.3125rem 2.5625rem; }
.jr-ctafoot h2 {
  font-size: clamp(1.75rem, 1.5vw + 1.1rem, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}
.jr-ctafoot p { margin-top: 0.8rem; color: var(--color-text); font-size: 1.125rem; line-height: 1.2; }

/* ══ Service pages (Figma Hiring, Event Marketing, On-Air Talent) ══════════
   meta.splits "service". Bands as drawn on the 1920 frames: the picture-
   right split is 600 / 115 / 565, the picture-left one 565 / 127 / 588. */
.jr-page-splits-service .zk-split-flip h2 { max-width: none; }
.jr-page-splits-service .zk-split .zk-rich p + p { margin-top: 1.2em; }
.jr-page-splits-service .zk-split .zk-rich > :first-child { margin-top: 0; }
.jr-page-splits-service .zk-split .zk-rich > :last-child { margin-bottom: 0; }
/* Event Types: bullets 27px in, 3px between items */
.jr-page-splits-service .zk-split .zk-rich ul { padding-left: 27px; }
.jr-page-splits-service .zk-split .zk-rich li { margin: 0 0 3px; }
@media (min-width: 640px) {
  /* Grey bands: 51 over the first copy, 63 between, 25 into the next band
     (64 when a white band follows); white bands: 48 over, 53 under */
  .jr-page-splits-service .zk-split > div { padding-block: 3.1875rem 1.9375rem; }
  .jr-page-splits-service .zk-split-flip > div { padding-block: 2rem 1.5625rem; }
  .jr-page-splits-service .zk-section-wrap:has(+ .zk-section-wrap > .jr-band-white) > .zk-split:not(.jr-band-white) > div { padding-bottom: 4rem; }
  .jr-page-splits-service .zk-split.jr-band-white > div { padding-block: 3rem 1.75rem; }
  .jr-page-splits-service .zk-split-flip.jr-band-white > div { padding-block: 1.75rem 3.3125rem; }
}
@media (min-width: 1024px) {
  .jr-page-splits-service .zk-split > div { grid-template-columns: minmax(0, 600fr) minmax(0, 565fr); column-gap: 7.1875rem; }
  .jr-page-splits-service .zk-split-flip > div { grid-template-columns: minmax(0, 565fr) minmax(0, 588fr); column-gap: 7.9375rem; }
  .jr-page-splits-service .zk-split .zk-rich { max-width: 600px; }
}
/* Questions: 52px under a coloured band, 80 under a white one; 69 to the
   contact card, which sits 104 over the footer */
.jr-page-splits-service .jr-qas > div { padding-block: 3.28125rem 1.875rem; }
.jr-page-splits-service .zk-section-wrap:has(> .jr-band-white) + .zk-section-wrap > .jr-qas > div { padding-top: 5rem; }
.jr-page-splits-service .jr-qa { min-height: 252px; padding-top: 29px; }
.jr-page-splits-service .jr-qa p { margin-top: 15px; }
@media (min-width: 640px) {
  .jr-page.jr-page-splits-service .zk-contactcta { padding-bottom: 6.5rem; }
}
/* Contact card as drawn here (and on Advertise): copy 531 wide 70 in, the
   form column 539 wide 64 from the right with its fields 488 wide down the
   middle */
.jr-page-splits-service .zk-contactcta-copy p,
.jr-page-splits-advertise .zk-contactcta-copy p { max-width: 489px; margin-top: 17px; }
.jr-page-splits-service .zk-contactcta-form form,
.jr-page-splits-advertise .zk-contactcta-form form { max-width: 488px; margin-inline: auto; }
@media (min-width: 1024px) {
  .jr-page-splits-service .zk-contactcta-card,
  .jr-page-splits-advertise .zk-contactcta-card {
    grid-template-columns: minmax(0, 531fr) minmax(0, 539fr);
    column-gap: 65px;
    padding-inline: 70px 64px;
  }
}

/* Two questions side by side (Figma Event Marketing): 627 × 213, 20 apart */
.jr-qas-2 .jr-qa-grid { gap: 20px; }
@media (min-width: 1024px) { .jr-qas-2 .jr-qa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: 0; } }
.jr-qas-2 .jr-qa,
.jr-page-splits-service .jr-qas-2 .jr-qa { min-height: 213px; padding-inline: 38px 24px; }
.jr-qas-2 .jr-qa h3 { max-width: 535px; }

/* ── Red and black halves (feature-grid variant "panels") ─────────────── */
/* Figma Hiring: one 314px band split at the middle of the screen, each half's
   copy on the 1280 column, 52 / 51px off the split, 39 over and 37 under */
.jr-panels { color: #fff; background: linear-gradient(to right, var(--jr-red) 50%, #000 50%); }
.jr-panels-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jr-panel { padding: 39px 52px 37px 0; }
.jr-panel:nth-child(even) { padding: 39px 0 37px 51px; }
.jr-panel h2 {
  font-size: clamp(1.75rem, 1.5vw + 1.1rem, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}
.jr-panel p { max-width: 588px; margin-top: 18px; font-size: 1.125rem; line-height: 1.2; }
/* The right-hand heading runs 30px past the column, as drawn ("Ways to
   Build a Recruitment Campaign" on one line); only where there's margin */
@media (min-width: 1400px) { .jr-panel:nth-child(even) h2 { margin-right: -2.5rem; } }
@media (max-width: 767px) {
  .jr-panels { background: none; }
  .jr-panels-grid { grid-template-columns: minmax(0, 1fr); padding-inline: 0; }
  .jr-panel, .jr-panel:nth-child(even) { padding: 28px 20px 32px; background: #000; }
  .jr-panel:nth-child(odd) { background: var(--jr-red); }
}

/* ── Host cards (feature-grid variant "talent") ───────────────────────── */
/* Figma On-Air Talent: a 36px station name, 22px, then 309 × 350 cards 14px
   apart: a 138px round photo (1px red ring) 22 from the top, the name 18
   under it, the schedule 18 under that, and the sound-bite link 23 off the
   bottom. Stations 64px apart, 34 under the intro band, 177 over the
   footer CTA. */
.jr-talent { background: var(--jr-page); }
.jr-talent > div { padding-top: 4rem; }
.zk-section-wrap:has(> .jr-band-white) + .zk-section-wrap > .jr-talent > div { padding-top: 2.125rem; }
.zk-section-wrap:has(> .jr-talent):has(+ .jr-ctafoot) > .jr-talent > div { padding-bottom: 11.0625rem; }
.jr-talent-title {
  font-size: clamp(1.75rem, 1.5vw + 1.1rem, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}
.jr-talent-grid {
  margin-top: 22px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px)  { .jr-talent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .jr-talent-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.jr-host {
  display: flex;
  flex-direction: column;
  min-height: 350px;
  padding: 19px 20px 20px;
  background: var(--jr-card);
  color: var(--color-text);
  border: 3px solid var(--color-primary);
  border-radius: 10px;
}
/* At full width the schedule and link start 37px in, as drawn, and run to
   16px off the right edge so "Weekday Evenings: 7p–midnight" stays on one
   line (Figma widens those boxes card by card); photo and name stay centred */
@media (min-width: 1280px) {
  .jr-host { padding-inline: 16px; }
  .jr-host-sched, .jr-host-link { margin-left: 21px; }
}
.jr-host-photo { align-self: center; width: 138px; }
.jr-host-photo img,
.jr-host-photo .zk-image-placeholder {
  display: block;
  width: 138px;
  height: 138px;
  min-height: 0;
  border-radius: 50%;
  object-fit: cover;
  outline: 1px solid var(--color-primary);
  outline-offset: -1px;
}
.jr-host h3 { margin-top: 18px; text-align: center; font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.jr-host-sched { margin-top: 18px; font-size: 1.125rem; line-height: 1.2; }
/* Pinned to the bottom, at least 12px under the schedule (15 as drawn
   under a three-line one) */
.jr-host-link {
  margin-top: auto;
  padding-top: 12px;
  align-self: flex-start;
  color: var(--color-primary);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.jr-host-link:hover span,
.jr-host-link:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }

/* ══ Advertise (Figma Advertise-Desktop) ════════════════════════════════════
   A white band (the intro beside the numbered list), the market cards, the
   talent band, the black tabs band, the "More Ways" cards and the contact
   card. The variants are general; meta.splits "advertise" carries the
   page's own spacing. */

/* ── Numbered list (feature-grid variant "numbered") ──────────────────── */
/* Figma "Why Radio Works for Advertising?": 36px red figures beside 24px
   titles, rows 114px apart on #cecece hairlines. Beside an intro (sec.body)
   the band is 549 / 100 / 631, both heads 64px under its top; the list
   ends 36px over the bottom edge, where the red rings (454px, 48px in)
   rise to at least 23px under the intro. */
.jr-numbered { background: var(--jr-band); color: var(--color-text); overflow: hidden; }
.jr-numbered > div { padding-block: 4rem 2.25rem; }
.jr-numbered-split > div { padding-bottom: 0; }
.jr-numbered-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem; }
.jr-numbered-intro { max-width: 548px; color: var(--color-text); font-size: 1.125rem; line-height: 1.2; }
.jr-numbered-intro h2 {
  max-width: 539px;
  font-size: clamp(1.75rem, 1.5vw + 1.1rem, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}
/* Paragraphs a blank line apart, 18px under the heading */
.jr-numbered-intro p { margin: 1.2em 0 0; }
.jr-numbered-intro h2 + p { margin-top: 18px; }
.jr-numbered-intro > :first-child { margin-top: 0; }
.jr-numbered-title {
  font-size: clamp(1.75rem, 1.5vw + 1.1rem, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}
.jr-steps { margin: 23px 0 0; padding: 0; list-style: none; counter-reset: jr-step; }
.jr-step {
  counter-increment: jr-step;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  column-gap: 17px;
  padding: 13px 0 24px;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 19%, transparent);
}
.jr-step:first-child { padding-top: 0; border-top: 0; }
.jr-step:last-child { padding-bottom: 0; }
/* The figure's line starts 6px above the title's, as drawn */
.jr-step::before {
  content: counter(jr-step);
  grid-row: 1 / span 2;
  margin-top: -6px;
  color: var(--color-primary);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.jr-step h3 { grid-column: 2; font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.jr-step p { grid-column: 2; margin-top: 4px; font-size: 1.125rem; line-height: 1.2; }
.jr-rings {
  width: 454px;
  height: 227px;
  margin: 23px 0 0 48px;
  background: url("/assets/home/circles.svg") center top / 454px 454px no-repeat;
}
@media (min-width: 1024px) {
  .jr-numbered-split .jr-numbered-grid { grid-template-columns: minmax(0, 549fr) minmax(0, 631fr); gap: 0 100px; }
  .jr-numbered-split .jr-numbered-list { grid-column: 2; grid-row: 1 / span 2; padding-bottom: 2.25rem; }
  .jr-numbered-split .jr-rings { grid-column: 1; grid-row: 2; align-self: end; }
}

/* ── Link cards (feature-grid variant "links") ───────────────────────── */
/* Figma "Advertise by Market": the question cards' 426 × 232 outlines on a
   1304 grid, 13 / 10px apart: a 24px title 22px in, its copy 22 under it,
   and an 18px SemiBold red link 27px off the bottom */
.jr-links { background: var(--jr-page); }
.jr-links > div { padding-block: 1.8125rem 4rem; }
.jr-links-grid {
  margin-top: 24px;
  display: grid;
  gap: 10px 13px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px)  { .jr-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .jr-links-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-inline: -12px; } }
.jr-linkcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 232px;
  padding: 22px 16px 27px 25px;
  background: var(--jr-card);
  color: var(--color-text);
  text-decoration: none;
  border: 3px solid var(--color-primary);
  border-radius: 10px;
}
.jr-linkcard h3 { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.jr-linkcard p { margin-top: 22px; font-size: 1.125rem; line-height: 1.2; }
a.jr-linkcard:hover h3 { color: var(--jr-red); }
/* A card's link, pinned to the bottom (link, region and post cards) */
.jr-card-link {
  margin-top: auto;
  padding-top: 18px;
  align-self: flex-start;
  color: var(--color-primary);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
}
a:hover > .jr-card-link span,
a:focus-visible > .jr-card-link span,
a:hover > * > .jr-card-link span,
a:focus-visible > * > .jr-card-link span { text-decoration: underline; text-underline-offset: 3px; }

/* ── Tabs (feature-grid variant "tabs") ───────────────────────────────── */
/* Figma "Ways to Advertise": a black band; 58px tabs 2px apart down the
   left, each a 6px bar (white on the chosen tab, #2e2e2e) and 24px Bold
   (white on red, else #727272); then the chosen tab's 36px heading, copy
   and button (486 wide) and its 430 × 310 photo. 314 / 25 / 486 / 25 / 430
   on the column. 64px over the title, 59 under the photo. */
.jr-tabs { background: #000; color: #fff; }
.jr-tabs > div { padding-block: 4rem 3.6875rem; }
.jr-tabs-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
.jr-tabs-title {
  color: #fff;
  font-size: clamp(1.75rem, 1.5vw + 1.1rem, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}
.jr-tabs-list { margin-top: 24px; display: grid; gap: 2px; }
.jr-tab {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 6px 16px 6px 10px;
  border-left: 6px solid #2e2e2e;
  border-radius: 0 10px 10px 0;
  color: #727272;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: color 200ms ease, background-color 200ms ease;
}
.jr-tab:hover { color: #bdbdbd; }
.jr-tab:has(:checked) { background: var(--color-primary); border-left-color: #fff; color: #fff; }
.jr-tab:has(:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
/* The radio stays focusable (arrow keys move between tabs) but unseen */
.jr-tab input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.jr-tabpanels { display: grid; row-gap: 3rem; }
.jr-tabpanel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.jr-tabpanel-copy h3 { font-size: clamp(1.75rem, 1.5vw + 1.1rem, 2.25rem); font-weight: 700; line-height: 1.2; }
.jr-tabpanel-copy p { margin-top: 9px; font-size: 1.125rem; line-height: 1.2; }
.jr-tabpanel-copy .btn-primary { display: inline-block; margin-top: 19px; }
.jr-tabpanel-media img,
.jr-tabpanel-media .zk-image-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 430 / 310;
  object-fit: cover;
  border-radius: 10px;
}
/* One panel shows at a time, the one whose radio is checked. All of them
   share one grid cell, so the band keeps the tallest one's height and
   doesn't jump between tabs. Browsers without :has() list every panel. */
@supports selector(:has(*)) {
  .jr-tabpanels { row-gap: 0; }
  .jr-tabpanel {
    grid-area: 1 / 1;
    visibility: hidden;
    opacity: 0;
    transition: opacity 250ms ease, visibility 0s linear 250ms;
  }
  .jr-tabs:has(.jr-tab:nth-child(1) :checked) .jr-tabpanel:nth-child(1),
  .jr-tabs:has(.jr-tab:nth-child(2) :checked) .jr-tabpanel:nth-child(2),
  .jr-tabs:has(.jr-tab:nth-child(3) :checked) .jr-tabpanel:nth-child(3),
  .jr-tabs:has(.jr-tab:nth-child(4) :checked) .jr-tabpanel:nth-child(4),
  .jr-tabs:has(.jr-tab:nth-child(5) :checked) .jr-tabpanel:nth-child(5),
  .jr-tabs:has(.jr-tab:nth-child(6) :checked) .jr-tabpanel:nth-child(6),
  .jr-tabs:has(.jr-tab:nth-child(7) :checked) .jr-tabpanel:nth-child(7),
  .jr-tabs:has(.jr-tab:nth-child(8) :checked) .jr-tabpanel:nth-child(8) {
    visibility: visible;
    opacity: 1;
    transition: opacity 250ms ease;
  }
}
/* Tablet and small laptop: the tabs two a row over the panel, its copy
   beside the photo. The drawn layout needs the full column: below 1280
   the title and the longer tab names wrap. */
@media (min-width: 640px) {
  .jr-tabs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-tabpanel { grid-template-columns: minmax(0, 486fr) minmax(0, 430fr); column-gap: 25px; }
}
@media (min-width: 1280px) {
  .jr-tabs-grid { grid-template-columns: minmax(0, 314fr) minmax(0, 941fr); column-gap: 25px; }
  .jr-tabs-title { white-space: nowrap; }
  .jr-tabs-list { grid-template-columns: minmax(0, 1fr); width: 270px; max-width: 100%; }
  /* The photo's top 8px under the title's; the heading level with the
     first tab */
  .jr-tabpanels { margin-top: 8px; }
  .jr-tabpanel-copy { padding-top: 62px; }
}
/* The tabs and title sit 16px left of the column, as drawn, only where
   the screen has the margin for it */
@media (min-width: 1400px) {
  .jr-tabs-title { margin-left: -16px; }
  .jr-tabs-list { max-width: calc(100% + 16px); margin-left: -16px; }
}

/* ── Linked region cards (Figma "More Ways to Advertise") ─────────────── */
.jr-region .jr-card-link { padding-top: 18px; }

/* ── The page's spacing (meta.splits "advertise") ─────────────────────── */
/* Talent band: 608 / 107 / 565, the photo 104px under the market cards and
   93 over the tabs band; the button 22px under the copy */
.jr-page-splits-advertise .zk-split .btn-primary { margin-top: 1.35rem; }
@media (min-width: 640px) {
  .jr-page-splits-advertise .zk-split > div { padding-block: 2.5rem 5.8125rem; }
}
@media (min-width: 1024px) {
  .jr-page-splits-advertise .zk-split > div { grid-template-columns: minmax(0, 608fr) minmax(0, 565fr); column-gap: 6.6875rem; }
  .jr-page-splits-advertise .zk-split .zk-rich { max-width: 608px; }
}
/* "More Ways": the title 46px under the tabs band, cards 28 under it at
   426 × 321: the icon 25px in on an 88px row, the title 2 under it, the
   copy 24 under that, the link 21px off the bottom */
.jr-page-splits-advertise .jr-regions { background: var(--jr-page); }
.jr-page-splits-advertise .jr-regions > div { padding-block: 2.875rem 0; }
.jr-page-splits-advertise .jr-regions-wide .jr-regions-grid { margin-top: 1.75rem; }
.jr-page-splits-advertise .jr-regions-wide .jr-region { min-height: 321px; padding: 25px 16px 21px; }
.jr-page-splits-advertise .jr-regions-wide .jr-region h3 { margin-top: 2px; }
.jr-page-splits-advertise .jr-regions-wide .jr-region p { margin-top: 24px; }
/* Contact card 69px under the cards, 40 over the footer (laid out as on
   the service pages, above); the form title breaks after "Executive", as
   drawn, rather than balancing */
.jr-page.jr-page-splits-advertise .zk-contactcta { padding-block: 4.3125rem 2.5rem; }
.jr-page-splits-advertise .zk-contactcta-form h3 { text-wrap: wrap; }

/* ══ Blog (no Figma frame) ════════════════════════════════════════════════
   Built from the pieces the designed pages use: the interior hero (a black
   band when there's no photo), the market cards for posts, and the 18px
   Barlow body copy on an 800px reading column. */
.jr-hero-plain { background-color: #000; position: relative; overflow: hidden; isolation: isolate; }
/* The homepage community band's red rings, off the top-right corner */
.jr-hero-plain::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -170px;
  top: -260px;
  width: 514px;
  height: 514px;
  background: url("/assets/home/circles.svg") center / contain no-repeat;
  pointer-events: none;
}
.jr-hero-narrow .zk-hero-content { max-width: calc(800px + 3rem); }
.jr-hero-page .zk-hero-kicker { font-size: 1rem; font-weight: 600; letter-spacing: 0.12em; opacity: 0.85; }

/* Post cards: three a row on the page grey, 1304 wide like the market
   cards; the cover 16:9 inside the outline */
.jr-blog { background: var(--jr-page); }
.jr-blog > div { padding-block: 3.5rem 4.5rem; }
.jr-blog-grid {
  display: grid;
  gap: 24px 13px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px)  { .jr-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .jr-blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-inline: -12px; } }
.jr-sec-title + .jr-blog-grid { margin-top: 1.75rem; }
.jr-postcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--jr-card);
  color: var(--color-text);
  text-decoration: none;
  border: 3px solid var(--color-primary);
  border-radius: 10px;
}
.jr-postcard-cover { aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.jr-postcard-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
/* The rings rise from the bottom-left corner, as on the Advertise band */
.jr-postcard-blank { background: #000 url("/assets/home/circles.svg") left 24px bottom -150px / 300px 300px no-repeat; }
.jr-postcard-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 20px 16px 27px 25px; }
.jr-post-date { color: var(--color-primary); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.jr-postcard h2,
.jr-postcard h3 { margin-top: 8px; font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.jr-postcard p:not(.jr-post-date) { margin-top: 14px; font-size: 1.125rem; line-height: 1.2; }
.jr-postcard:hover h2,
.jr-postcard:hover h3 { color: var(--jr-red); }
.jr-postcard:hover .jr-postcard-cover img { transform: scale(1.04); }
.jr-postcard:focus-visible { outline: 3px solid var(--jr-red); outline-offset: 3px; }
.jr-blog-grid > button { margin-top: 1rem; }
.jr-blog-empty { padding-block: 1rem; text-align: center; color: var(--color-text); font-size: 1.25rem; }

/* The post: a white band, its article on the 800px column the hero copy
   shares */
.jr-post { background: var(--jr-band); color: var(--color-text); }
.jr-post-col { max-width: calc(800px + 3rem); padding-block: 2.25rem 4.5rem; }
.jr-post-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary);
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
}
.jr-post-back:hover span { text-decoration: underline; text-underline-offset: 3px; }
.jr-post-body { margin-top: 1.75rem; font-size: 1.125rem; line-height: 1.6; }
.jr-post-body > :first-child { margin-top: 0; }
.jr-post-body > :last-child { margin-bottom: 0; }
.jr-post-body p { margin: 0 0 1.2em; }
.jr-post-body h2 {
  margin: 1.6em 0 0.5em;
  font-size: clamp(1.75rem, 1.5vw + 1.1rem, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}
.jr-post-body h3 { margin: 1.4em 0 0.4em; font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.jr-post-body h4 { margin: 1.2em 0 0.4em; font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
.jr-post-body a { color: var(--color-primary); font-weight: 500; text-underline-offset: 3px; }
.jr-post-body ul,
.jr-post-body ol { margin: 0 0 1.2em; padding-left: 1.5em; }
.jr-post-body li { margin: 0 0 0.4em; padding-left: 0.25em; }
.jr-post-body li::marker { color: var(--color-primary); font-weight: 700; }
.jr-post-body blockquote {
  margin: 1.6em 0;
  padding: 0.25em 0 0.25em 1.25em;
  border-left: 5px solid var(--color-primary);
  color: var(--color-text);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.3;
}
.jr-post-body blockquote p:last-child { margin-bottom: 0; }
.jr-post-body img,
.jr-post-body video,
.jr-post-body iframe { display: block; width: 100%; height: auto; margin: 1.6em 0; border-radius: 10px; }
.jr-post-body iframe { aspect-ratio: 16 / 9; border: 0; }
.jr-post-body figure { margin: 1.6em 0; }
.jr-post-body figure img { margin: 0; }
.jr-post-body figcaption { margin-top: 0.5em; color: var(--color-secondary); font-size: 0.875rem; }
.jr-post-body hr { margin: 2.5em 0; border: 0; border-top: 2px solid var(--color-primary); width: 64px; }
.jr-post-body table { width: 100%; margin: 1.6em 0; border-collapse: collapse; font-size: 1rem; }
.jr-post-body th,
.jr-post-body td { padding: 0.6em 0.75em; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 19%, transparent); text-align: left; }
.jr-post-body th { font-weight: 700; }
.jr-blog-more > div { padding-block: 3rem 4.5rem; }
/* Fewer than three more posts sit centred under the centred title */
@media (min-width: 1024px) {
  .jr-blog-more .jr-blog-grid { grid-template-columns: repeat(var(--jr-n, 3), minmax(0, 426px)); justify-content: center; }
}

/* ── Dark mode (Figma Homepage-Desktop-Dark Mode) ─────────────────────────
   Tokens above do most of it; these beat the kit's own dark overrides in
   site.css, which tint the header/footer blue and wash every bg-black/
   section to 3% white. */
:root[data-theme="dark"] .jr-header { background: #000; border-bottom-color: transparent; }
:root[data-theme="dark"] .jr-footer { background: #000; }
:root[data-theme="dark"] #app .zk-split { background: var(--jr-band); }
:root[data-theme="dark"] #app .zk-split-flip { background: var(--jr-page); }
/* Light puts the photo cards on white; dark puts them on #202020, not black */
:root[data-theme="dark"] .jr-photocards { background: var(--jr-page); }

/* ── Scroll reveal (Figma Section3/Section4 animation frames) ─────────────
   custom.js adds .jr-reveal to band copy and cards, then .is-in once each
   scrolls into view. Without JS nothing is ever hidden. */
.jr-reveal {
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--jr-delay, 0ms);
}
.jr-reveal:not(.is-in) { opacity: 0; transform: translateY(1.5rem); }

@media (prefers-reduced-motion: reduce) {
  .hero-image .zk-hero-content > * { animation: none; }
  .jr-reveal, .jr-photocard-copy, .jr-photocard-copy p, .jr-photocard > img,
  .jr-station-media img { transition: none; }
  .jr-reveal:not(.is-in) { opacity: 1; transform: none; }
}

/* ══ Mobile (Figma "Homepage Mobile", 375 wide) ═════════════════════════════
   Everything below 640px. Desktop/tablet rules above are untouched; these
   only re-size and re-order for the single-column phone layout. */
@media (max-width: 639px) {
  /* Header: 30px red toggle, then the hamburger 17px to its right */
  .jr-header .zk-theme-btn { width: 30px; height: 30px; margin: 0 0.6rem 0 0; }
  .jr-header .zk-theme-btn svg { width: 14px; height: 14px; }
  .jr-header .zk-mnav-btn { width: 2.25rem; margin-right: -0.25rem; }

  /* Hero: 40px headline, 16px intro */
  .hero-image .zk-hero-content { padding-block: 2.8rem 2.4rem; }
  .hero-image h1 { font-size: 2.5rem; }
  .hero-image h1 + p { font-size: 1rem; margin-top: 1.2rem; }
  .hero-image .zk-hero-content > div:last-child { margin-top: 1.125rem; }

  /* Section headings: 30px */
  .jr-sec-title,
  .zk-split h2,
  .zk-tiles-sec h2,
  .zk-contactcta h2,
  .zk-contactcta-form h3 { font-size: 1.875rem; }

  /* Station cards: taller logo panel, bigger logos, tight copy */
  .jr-stations > div { padding: 2rem 30px 1.5rem; }
  .jr-stations .jr-sec-title { max-width: 19.5rem; margin-inline: auto; }
  .jr-stations-grid { margin-top: 1.6rem; gap: 9px; }
  .jr-station-media { aspect-ratio: 315 / 181; }
  .jr-station-media img { max-width: 80%; max-height: 66%; }
  .jr-badge { left: 9px; }
  .jr-station-body { padding: 6px 14px 12px; }
  .jr-station-body p { margin-top: 0.15rem; }
  .jr-station-body .jr-station-link { margin-top: 0.6rem; }

  /* Text + image bands: picture first, 14px copy, 20px gutters */
  .zk-split > div { padding: 28px 20px 42px; row-gap: 18px; }
  .zk-split-flip > div { padding-block: 35px; }
  .zk-split .zk-split-media img { aspect-ratio: 335 / 184; }
  .zk-split .zk-rich { font-size: 0.875rem; line-height: 1.3; }
  .zk-split .btn-primary { margin-top: 1.1rem; }

  /* Community: one tile per row, a single big ring bottom-left */
  .zk-tiles-sec { --jr-ring: 514px; }
  .zk-tiles-sec::after { display: none; }
  .zk-tiles-sec::before { left: -264px; bottom: -333px; }
  .zk-tiles-sec > div { padding: 25px 33px 53px; }
  .zk-tiles-sec h2 { max-width: 15.5rem; margin-inline: auto; }
  .zk-tiles-sec .zk-rich { font-size: 0.875rem; max-width: 18.25rem; margin-top: 0.75rem; }
  .zk-tiles-sec .zk-tiles { grid-template-columns: minmax(0, 1fr); gap: 19px; margin-top: 26px; }
  .zk-tiles-sec .zk-tile-label { font-size: 1.5rem; }

  /* Photo cards: one per row, titles only until tapped */
  .jr-photocards > div { padding: 37px 30px 31px; }
  .jr-photocards .jr-sec-title { max-width: 19.25rem; margin-inline: auto; }
  .jr-photocards-grid { gap: 23px; margin-top: 1.3rem; }
  .jr-photocard { aspect-ratio: 316 / 264; }

  /* Media-plan card: 18px page margin, Name + Email side by side */
  .zk-contactcta { padding: 28px 18px 46px; }
  .zk-contactcta-card { padding: 18px 7px 40px; }
  .zk-contactcta-copy { padding-inline: 9px; }
  .zk-contactcta-copy p { font-size: 0.875rem; margin-top: 1.25rem; }
  .zk-contactcta-img { width: 100%; max-width: 293px; margin: 1rem auto 0; }
  .zk-contactcta-form h3 { margin-bottom: 0.8rem; }
  .zk-contactcta-form form > .grid { grid-template-columns: minmax(0, 145fr) minmax(0, 162fr); gap: 9px; }
  .zk-contactcta-form .input { padding-left: 8px; }
  .zk-contactcta-form .zk-field-hint { font-size: 0.875rem; }
  .zk-contactcta-form button[type="submit"] { margin-top: 1.5rem; }

  /* Footer: stacked, 24px headings, one-line 14px copyright bar */
  .jr-footer-main { padding: 1.75rem 23px 2.5rem; gap: 2rem; }
  .jr-wordmark-lg { font-size: 2.1875rem; }
  .jr-footer-tagline { font-size: 1.125rem; margin-top: 0.4rem; }
  .jr-footer-h { font-size: 1.5rem; margin-bottom: 0.4rem; }
  /* The design fits both sides on one line; with the kit's Privacy link
     added the legal side drops to a second line instead of breaking mid-name */
  .jr-footer-bar-inner { padding: 0.6rem 9px 0.9rem; font-size: 0.875rem; column-gap: 0.75rem; line-height: 1.75rem; }

  /* Interior pages (Figma FAQ-Mobile, the only interior phone frame: a
     323px photo band with a 30px title and 16px intro, 30px heads, 14px
     copy; the homepage's 20px gutters elsewhere) */
  .hero-image.jr-hero-page { min-height: 323px; }
  .hero-image.jr-hero-page .zk-hero-content { padding-block: 2.5rem; }
  .hero-image.jr-hero-page h1 { font-size: 1.875rem; }
  .hero-image.jr-hero-page h1 + p { margin-top: 0.875rem; }
  .jr-intro-copy, .jr-sec-intro, .jr-contact-intro, .jr-contact-details { font-size: 0.875rem; }
  .jr-intro > div { padding-top: 1.75rem; }
  .jr-intro-copy h2 { margin-top: 2rem; font-size: 1.875rem; }
  .jr-intro + .zk-section-wrap > .zk-contactcta { padding-top: 2rem; }
  /* Personality cards: a 104px photo beside the copy */
  .jr-people-grid { row-gap: 2.5rem; }
  .jr-person { gap: 14px; }
  .jr-person-photo { width: 104px; margin-top: 2px; }
  .jr-person-photo img, .jr-person-photo .zk-image-placeholder { width: 104px; height: 104px; }
  .jr-person-name { font-size: 1.5rem; line-height: 1.75rem; letter-spacing: 0.02em; }
  .jr-person-bio { margin-top: 8px; font-size: 0.875rem; line-height: 1.3; }
  .jr-person-sched { margin-top: 12px; font-size: 1rem; line-height: 1.375rem; }
  .jr-person-copy > .jr-person-sched,
  .jr-person-copy > .jr-person-bio:last-of-type { margin-bottom: 18px; }
  .jr-people + .zk-section-wrap > .zk-contactcta { padding-block: 2.5rem 2.875rem; }
  .jr-page .zk-callout > div { padding-block: 2rem 2.25rem; }
  .jr-page .zk-callout .zk-rich { font-size: 0.875rem; line-height: 1.3; }
  .jr-qa { min-height: 0; }
  .jr-qa h3 { font-size: 1.25rem; }
  .jr-qa p { margin-top: 12px; font-size: 0.875rem; line-height: 1.3; }
  .jr-qas > div { padding-block: 2rem 2.5rem; }
  .jr-regions-wide .jr-region { min-height: 0; }
  /* Two even buttons a row rather than a ragged wrap */
  .jr-intro-copy p:has(> .btn-primary) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #app .jr-intro-copy p > .btn-primary { padding-inline: 0.5rem; font-size: 1rem; }
  .jr-intro-copy p:has(> .btn-primary) + h2 { margin-top: 1.25rem; }
  .jr-intro:has(+ .jr-ctafoot) > div { padding-bottom: 2.5rem; }
  .jr-page .zk-split > div, .jr-page .zk-split-flip > div { padding-block: 28px 35px; }
  .jr-page .zk-split .zk-rich { line-height: 1.3; }
  /* Where a desktop spacing rule outranks the phone ones: the Stations
     grid ends 24px over the next band (as on the homepage), photo cards
     sit 37 / 31 in their band */
  .jr-intro + .zk-section-wrap > .jr-stations > div { padding-bottom: 1.5rem; }
  .jr-page .jr-photocards > div { padding-block: 37px 31px; }
  .jr-faqs-title, .jr-ctafoot h2 { font-size: 1.875rem; }
  .jr-regions > div { padding-block: 2rem 2.5rem; }
  .jr-region { min-height: 0; padding-bottom: 1.25rem; }
  .jr-region h3 { font-size: 1.375rem; }
  .jr-region p { font-size: 1rem; }
  /* Accordion as drawn: the title centred 23px under the hero, 312px cards
     32px in and 23px apart, 24px questions 12px in, the chevron 15px off
     the right and centred on the question, 14px answers */
  .jr-faqs > div { padding-top: 23px; }
  .jr-faqs-title, .jr-faqs .jr-sec-intro { text-align: center; }
  .jr-faq-list { gap: 23px; margin: 15px 8px 0; }
  .jr-faq-q { padding: 25px 15px 25px 12px; gap: 12px; }
  .jr-faq-chev { align-self: center; margin-top: 0; }
  .jr-faq-a { padding: 0 15px 19px 12px; font-size: 0.875rem; }
  .jr-contact > div { padding-block: 2rem 2.5rem; gap: 2rem; }
  .jr-contact-h { margin-top: 1.5rem; font-size: 1.375rem; }
  .jr-contact-form form > .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9px; }
  .jr-ctafoot > div { padding-block: 1.75rem 2rem; gap: 1.25rem; }
  .jr-ctafoot p { font-size: 0.875rem; }
  /* Service pages: cards size to their copy */
  .jr-page-splits-service .jr-qa,
  .jr-page-splits-service .jr-qas-2 .jr-qa { min-height: 0; padding: 18px 16px 22px 20px; }
  .jr-page-splits-service .jr-qas > div,
  .jr-page-splits-service .zk-section-wrap:has(> .jr-band-white) + .zk-section-wrap > .jr-qas > div { padding-block: 2rem 1rem; }
  .jr-panel h2, .jr-talent-title { font-size: 1.875rem; }
  .jr-panel p { margin-top: 12px; font-size: 0.875rem; line-height: 1.3; }
  /* Host cards: two a row, a 96px photo, 14px copy */
  .jr-talent > div { padding-top: 2.5rem; }
  .zk-section-wrap:has(> .jr-band-white) + .zk-section-wrap > .jr-talent > div { padding-top: 1.75rem; }
  .zk-section-wrap:has(> .jr-talent):has(+ .jr-ctafoot) > .jr-talent > div { padding-bottom: 3rem; }
  .jr-talent-grid { margin-top: 14px; gap: 10px; }
  .jr-host { min-height: 0; padding: 14px 12px 14px; }
  .jr-host-photo, .jr-host-photo img, .jr-host-photo .zk-image-placeholder { width: 96px; height: 96px; }
  .jr-host h3 { margin-top: 10px; font-size: 1.125rem; }
  .jr-host-sched { margin-top: 8px; font-size: 0.875rem; line-height: 1.3; }
  .jr-host-link { padding-top: 12px; font-size: 0.875rem; }
  /* Advertise (no phone frame; FAQ-Mobile's sizes): the intro over the
     list, the rings centred at the band's foot */
  .jr-numbered > div { padding-top: 2rem; }
  .jr-numbered-grid { row-gap: 2rem; }
  .jr-numbered-intro { font-size: 0.875rem; line-height: 1.3; }
  .jr-numbered-intro h2, .jr-numbered-title, .jr-tabs-title, .jr-tabpanel-copy h3 { font-size: 1.875rem; }
  .jr-numbered-intro h2 + p { margin-top: 12px; }
  .jr-steps { margin-top: 16px; }
  .jr-step { grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; padding: 12px 0 16px; }
  .jr-step::before { margin-top: -4px; font-size: 1.75rem; }
  .jr-step h3 { font-size: 1.25rem; }
  .jr-step p { font-size: 0.875rem; line-height: 1.3; }
  .jr-rings { width: 300px; height: 150px; margin: 4px auto 0; background-size: 300px 300px; }
  .jr-links > div { padding-block: 2rem 2.5rem; }
  .jr-links-grid { margin-top: 1.25rem; }
  .jr-linkcard { min-height: 0; padding: 18px 16px 20px 20px; }
  .jr-linkcard h3 { font-size: 1.25rem; }
  .jr-linkcard p { margin-top: 12px; font-size: 0.875rem; line-height: 1.3; }
  .jr-card-link { padding-top: 14px; font-size: 1rem; }
  .jr-tabs > div { padding-block: 2rem 2.5rem; }
  .jr-tabs-grid { row-gap: 1.5rem; }
  .jr-tabs-list { margin-top: 16px; }
  .jr-tab { min-height: 52px; font-size: 1.25rem; }
  .jr-tabpanel-media { order: -1; }
  .jr-tabpanel-copy p { font-size: 0.875rem; line-height: 1.3; }
  .jr-tabpanel-copy .btn-primary { margin-top: 1.1rem; }
  .jr-page-splits-advertise .jr-regions > div { padding-top: 2rem; }
  .jr-page-splits-advertise .jr-regions-wide .jr-region { min-height: 0; }
  .jr-page-splits-advertise .jr-regions-wide .jr-region p { margin-top: 14px; }
  .jr-page.jr-page-splits-advertise .zk-contactcta { padding-block: 2rem 2.875rem; }
  /* Blog: 16px article copy (long reads), smaller rings on the plain hero */
  .jr-hero-plain::after { right: -150px; top: -170px; width: 300px; height: 300px; }
  .jr-blog > div { padding-block: 2rem 2.5rem; }
  .jr-postcard-body { padding: 16px 16px 20px 20px; }
  .jr-postcard h2, .jr-postcard h3 { font-size: 1.25rem; }
  .jr-postcard p:not(.jr-post-date) { margin-top: 10px; font-size: 0.875rem; line-height: 1.3; }
  .jr-post-col { padding-block: 1.5rem 2.75rem; }
  .jr-post-back { font-size: 1rem; }
  .jr-post-body { margin-top: 1.25rem; font-size: 1rem; }
  .jr-post-body h2 { font-size: 1.625rem; }
  .jr-post-body h3 { font-size: 1.25rem; }
  .jr-post-body blockquote { font-size: 1.25rem; }
}