/* ==========================================================================
   Radio Ad Repeat — main stylesheet
   Palette: Signal Clear · Type: The Broadcaster (Archivo + DM Sans, self-hosted)
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */
:root{
  --ink:#0B1B2B;
  --ink-2:#1D4E6B;
  --signal:#FF4A1C;
  --signal-d:#E23C10;
  --signal-soft:#FFF1EC;
  --signal-lt:#FF8A62;   /* accent on dark backgrounds */
  --bg:#FFFFFF;
  --surface:#F5F7F9;
  --surface-2:#EDF1F5;
  --tx:#0B1B2B;
  --tx-2:#5A6B7A;
  --line:#E2E8EE;
  --ok:#166B3D;
  --ok-bg:#E7F7EE;
  --ok-line:#B7E6CB;
  --warn:#8A5A00;
  --warn-bg:#FFF4E5;
  --warn-line:#FFD9A0;

  --radius:14px;
  --radius-lg:20px;
  --shadow-sm:0 2px 10px rgba(11,27,43,.05);
  --shadow:0 8px 30px rgba(11,27,43,.09);
  --shadow-lg:0 20px 60px rgba(11,27,43,.14);
  --wrap:1340px;   /* wide directory tables earn the room on large screens */

  --font-display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* --- global type scale (Appearance panel in the Customizer) --------------
     Every value below is client-overridable. The vw middle term of each
     clamp() is deliberately NOT exposed: it is what keeps headings fluid
     between the mobile min and the desktop max, and what holds mobile
     overflow at 0px. Expose it and a client can size a heading wider than
     the viewport with no warning. */
  --fs-base:17px;
  --lh-base:1.65;
  --h-lh:1.08;            /* shared heading line-height */
  --h-ls:-.03em;          /* shared heading tracking */

  /* currentColor on the color property means "inherit", so headings keep
     picking up white inside dark bands until the client sets a real colour. */
  --heading:currentColor;
  --link:var(--ink-2);
  --link-h:var(--ink-2);  /* equals --link: there is no hover shift today */

  --h1-min:34px; --h1-max:60px; --h1-w:900; --h1-ls:-.04em;
  --h2-min:26px; --h2-max:42px; --h2-w:800; --h2-ls:-.03em;
  --h3-min:18px; --h3-max:22px; --h3-w:800; --h3-ls:-.02em;

  --logo-h:40px;   /* uploaded logo only; the wordmark sizes itself */
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0B1119; --surface:#131E2A; --surface-2:#18242F; --tx:#E9EEF3;
    --tx-2:#9FB3C4; --line:#22303F; --ink:#E9EEF3; --signal-soft:#241610;
    --shadow-sm:0 2px 10px rgba(0,0,0,.3);
    --shadow:0 8px 30px rgba(0,0,0,.4);
    --shadow-lg:0 20px 60px rgba(0,0,0,.5);
  }
}

/* --- self-hosted fonts (latin subset, variable) -------------------------- */
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-800.woff2') format('woff2-variations'),
      url('../fonts/archivo-800.woff2') format('woff2');
  font-weight:400 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'DM Sans';
  src:url('../fonts/dmsans-400.woff2') format('woff2-variations'),
      url('../fonts/dmsans-400.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}

/* --- base --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--tx);
  font-family:var(--font-body); font-size:var(--fs-base); line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{font-family:var(--font-display);line-height:var(--h-lh);letter-spacing:var(--h-ls);margin:0 0 .5em;color:var(--heading)}
h1{font-size:clamp(var(--h1-min),6vw,var(--h1-max));font-weight:var(--h1-w);letter-spacing:var(--h1-ls)}
h2{font-size:clamp(var(--h2-min),3.6vw,var(--h2-max));font-weight:var(--h2-w);letter-spacing:var(--h2-ls)}
h3{font-size:clamp(var(--h3-min),2.2vw,var(--h3-max));font-weight:var(--h3-w);letter-spacing:var(--h3-ls)}
p{margin:0 0 1em}
a{color:var(--link)}
/* :not([class]) keeps this off buttons and nav — a bare a:hover would beat
   .btn-primary (0,1,0) on specificity and recolour white button labels. */
a:not([class]):hover{color:var(--link-h)}
img{max-width:100%;height:auto}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}

:focus-visible{outline:3px solid var(--ink-2);outline-offset:3px;border-radius:6px}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
.skip-link:focus{
  position:fixed;top:10px;left:10px;z-index:999;background:var(--ink);
  color:#fff;padding:12px 18px;border-radius:8px;
}

/* --- header ------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.site-header .inner{
  max-width:var(--wrap);margin:0 auto;padding:14px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.site-logo{
  font-family:var(--font-display);font-weight:900;font-size:17px;
  letter-spacing:-.045em;text-decoration:none;color:var(--tx);
  display:inline-flex;align-items:center;gap:9px;
}
.site-logo span{color:var(--signal)}
.site-logo.has-image{gap:0}
/* Height is the only dimension set: width follows the file's own ratio, so
   resizing from the Customizer can never squash the logo. */
.site-logo .logo-img{
  display:block;height:var(--logo-h);width:auto;max-width:min(100%,320px);
  object-fit:contain;
}

.site-logo .mark{
  display:inline-flex;align-items:flex-end;gap:2px;height:17px;
}
.site-logo .mark i{
  width:3px;border-radius:2px;background:var(--signal);display:block;
}
.site-logo .mark i:nth-child(1){height:7px}
.site-logo .mark i:nth-child(2){height:15px}
.site-logo .mark i:nth-child(3){height:10px}
.site-logo .mark i:nth-child(4){height:17px}
.site-nav ul{display:flex;gap:8px;list-style:none;margin:0;padding:0;font-size:14.5px;align-items:center}
.site-nav a{
  color:var(--tx-2);text-decoration:none;padding:8px 12px;border-radius:9px;
  transition:color .12s ease,background-color .12s ease;
}
.site-nav a:hover,.site-nav .sub-toggle:hover{color:var(--tx);background:var(--surface-2)}
/* Where you are, in the accent — stated as plainly as the hover state, so the
   header answers "which section am I in" without being read word by word.
   Declared after :hover so an active item keeps its identity under the cursor. */
.site-nav a.is-current,
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a,
.site-nav .has-sub.is-current > .sub-toggle,
.site-nav .sub-menu a[aria-current="page"]{
  color:var(--signal);
  background:var(--signal-soft);
  font-weight:700;
}
/* The CTA owns its own colours; being "current" must not repaint it. */
.site-nav a.nav-cta.is-current{color:#fff;background:var(--ink)}
/* --- primary nav dropdowns ---------------------------------------------- */
/* .site-nav ul is a flex row, and the submenu is a ul inside it — without this
   reset the panel lays its links out horizontally across the header. */
.site-nav .has-sub{position:relative}
.site-nav .sub-toggle{
  display:inline-flex;align-items:center;gap:6px;
  font:inherit;font-size:14.5px;color:var(--tx-2);
  background:none;border:0;cursor:pointer;padding:8px 12px;border-radius:9px;
}
.site-nav .sub-toggle:hover{color:var(--tx);background:var(--surface)}
.site-nav .caret{
  width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s ease;
}
.site-nav .has-sub.is-open .sub-toggle{color:var(--tx);background:var(--surface)}
.site-nav .has-sub.is-open .caret{transform:rotate(-135deg) translate(-3px,-3px)}
.site-nav .sub-menu{
  display:block;position:absolute;top:calc(100% + 8px);left:0;z-index:50;
  min-width:214px;padding:8px;margin:0;list-style:none;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s;
}
.site-nav .sub-menu li{display:block}
.site-nav .sub-menu a{display:block;padding:9px 12px;white-space:nowrap}
/* Hover and focus-within keep the menus usable with JavaScript off; the
   .is-open class is the pinned state the script owns. */
.site-nav .has-sub:hover .sub-menu,
.site-nav .has-sub:focus-within .sub-menu,
.site-nav .has-sub.is-open .sub-menu{opacity:1;visibility:visible;transform:none}

.site-nav .nav-cta a,.site-nav a.nav-cta{
  background:var(--ink);color:#fff;font-family:var(--font-display);
  font-weight:700;font-size:13.5px;padding:10px 16px;
}
.site-nav .nav-cta a:hover,.site-nav a.nav-cta:hover{background:var(--ink-2);color:#fff}
@media(max-width:680px){
  .site-nav a:not(.nav-cta){display:none}
}

/* --- buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-display);font-weight:700;font-size:15px;
  padding:14px 24px;border-radius:12px;border:0;cursor:pointer;
  text-decoration:none;min-height:48px;transition:transform .12s,background .15s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--signal);color:#fff;box-shadow:0 6px 18px color-mix(in srgb, var(--signal) 28%, transparent)}
.btn-primary:hover{background:var(--signal-d)}
.btn-ghost{background:var(--bg);color:var(--tx);border:2px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2)}

/* --- hero --------------------------------------------------------------- */
.rar-hero{
  position:relative;padding:clamp(48px,8vw,92px) 0 clamp(40px,6vw,64px);
  text-align:center;overflow:hidden;
}
/* soft signal glow behind the search — pure CSS, costs no request */
.rar-hero::before{
  content:"";position:absolute;top:-10%;left:50%;transform:translateX(-50%);
  width:min(900px,120vw);height:520px;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb, var(--signal) 10%, transparent),transparent 70%);
}
.rar-hero .wrap{position:relative}
.rar-kicker{
  display:inline-flex;align-items:center;gap:9px;background:var(--bg);
  border:1px solid var(--line);color:var(--tx-2);font-size:13.5px;
  padding:7px 16px;border-radius:100px;margin-bottom:26px;box-shadow:var(--shadow-sm);
}
.rar-kicker .dot{
  width:7px;height:7px;border-radius:50%;background:var(--signal);
  animation:rar-pulse 2s infinite;flex-shrink:0;
}
@keyframes rar-pulse{0%,100%{opacity:1}50%{opacity:.3}}
.rar-hero h1 .accent{color:var(--signal);display:block}
.rar-hero p.sub{
  color:var(--tx-2);font-size:clamp(16px,2vw,19px);
  max-width:54ch;margin:0 auto 34px;
}

/* --- search ------------------------------------------------------------- */
.rar-search{max-width:740px;margin:0 auto}
.rar-field{
  display:flex;align-items:center;gap:10px;background:var(--bg);
  border:2px solid var(--line);border-radius:18px;padding:9px 9px 9px 20px;
  box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s;
}
.rar-field:focus-within{
  border-color:var(--ink-2);box-shadow:0 0 0 5px rgba(29,78,107,.1),var(--shadow-lg);
}
.rar-field .icon{flex-shrink:0;color:var(--tx-2);display:grid;place-items:center}
.rar-field input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-family:var(--font-body);font-size:16.5px;color:var(--tx);padding:13px 0;
}
.rar-field input::placeholder{color:#93A2B0}
.rar-mic,.rar-go{
  width:48px;height:48px;border-radius:13px;flex-shrink:0;cursor:pointer;
  display:grid;place-items:center;border:1px solid var(--line);
  background:var(--surface);color:var(--tx);transition:.15s;
}
.rar-mic:hover{background:var(--signal);border-color:var(--signal);color:#fff}
.rar-go{background:var(--signal);border-color:var(--signal);color:#fff;box-shadow:0 4px 14px color-mix(in srgb, var(--signal) 30%, transparent)}
.rar-go:hover{background:var(--signal-d)}

.rar-chips{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.rar-chip{
  background:var(--bg);border:1px solid var(--line);color:var(--tx-2);
  font-family:var(--font-body);font-size:13.5px;padding:9px 16px;
  border-radius:100px;cursor:pointer;transition:.15s;
}
.rar-chip:hover{border-color:var(--ink);color:var(--tx);transform:translateY(-1px)}
.rar-hint{font-size:13.5px;color:var(--tx-2);margin-top:18px}

/* decorative waveform strip under the hero */
.rar-waveline{
  display:flex;align-items:flex-end;justify-content:center;gap:3px;height:34px;
  margin-top:44px;opacity:.32;pointer-events:none;
}
.rar-waveline i{width:3px;border-radius:2px;background:var(--ink-2);display:block}

/* --- sections ----------------------------------------------------------- */
/* Three tiers of breathing room, not one.
   Every band used to carry the same 68px and the page read as uniformly empty —
   nothing felt dense, so nothing felt like a pause. Statement sections keep the
   full measure; sections that do work get less; connective sections get least.
   The spaciousness is the brand, so this varies the rhythm rather than
   flattening it. */
.rar-section{padding:clamp(52px,7vw,84px) 0}
.rar-section.is-snug{padding:clamp(38px,4.6vw,56px) 0}
.rar-section.is-tight{padding:clamp(30px,3.4vw,44px) 0}
.rar-section.is-snug .sec-head{margin-bottom:clamp(24px,3vw,34px)}
.rar-section.is-tight .sec-head{margin-bottom:clamp(18px,2.4vw,26px)}
.rar-section.tint{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rar-section.dark{background:var(--ink);color:#fff}
.rar-section.dark h2{color:#fff}
.rar-section.dark p{color:#9FB3C4}
.sec-head{text-align:center;max-width:60ch;margin:0 auto clamp(32px,4vw,48px)}
.sec-head .eyebrow{
  font-family:var(--font-display);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--signal);
  display:block;margin-bottom:12px;
}
.sec-head p{color:var(--tx-2);font-size:16.5px;margin:0}
.rar-section.dark .sec-head p{color:#9FB3C4}

.rar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}

/* numbered step cards */
.rar-step{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px 26px;position:relative;transition:transform .18s,box-shadow .18s;
}
.rar-step:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.rar-step .num{
  font-family:var(--font-display);font-weight:900;font-size:13px;
  letter-spacing:.12em;color:var(--signal);display:block;margin-bottom:16px;
}
.rar-step p{color:var(--tx-2);font-size:15px;margin:0}

/* station cards */
.rar-stations{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.rar-station{
  display:block;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 20px;text-decoration:none;
  color:var(--tx);transition:transform .16s,border-color .16s,box-shadow .16s;
}
.rar-station:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:var(--shadow-sm)}
.rar-station strong{font-family:var(--font-display);font-weight:800;font-size:16px;display:block;letter-spacing:-.02em}
.rar-station span{font-size:13px;color:var(--tx-2)}
.rar-empty{
  text-align:center;color:var(--tx-2);border:1px dashed var(--line);
  border-radius:var(--radius);padding:34px 20px;font-size:15px;
}

/* --- results ------------------------------------------------------------ */
.rar-results{max-width:740px;margin:30px auto 0;text-align:left}
.rar-card{
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;
  background:var(--bg);margin-bottom:14px;box-shadow:var(--shadow-sm);
}
.rar-card.is-top{border:2px solid var(--ink);box-shadow:var(--shadow);padding:26px}
.rar-card h3{margin-bottom:2px}
.rar-card .meta{font-size:13.5px;color:var(--tx-2);margin:0}
.rar-strength{
  display:inline-block;font-family:var(--font-display);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:100px;
  margin-bottom:13px;color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok-line);
}
.rar-strength.is-possible{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}
.rar-phone{
  font-family:var(--font-display);font-size:clamp(28px,5.4vw,36px);font-weight:900;
  letter-spacing:-.03em;color:var(--tx);text-decoration:none;display:inline-block;
  margin:14px 0 4px;
}
.rar-phone:hover{color:var(--signal)}
.rar-badge{
  display:inline-block;background:var(--surface);border:1px solid var(--line);
  color:var(--tx-2);font-size:12.5px;padding:5px 12px;border-radius:100px;
  margin:0 6px 6px 0;text-decoration:none;
}
a.rar-badge:hover{border-color:var(--ink);color:var(--tx)}
.rar-why{
  font-size:13.5px;color:var(--tx-2);border-left:3px solid var(--signal);
  padding-left:12px;margin:15px 0;
}
.rar-audio{width:100%;margin-top:12px}
.rar-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.rar-actions .btn{flex:1;font-size:13.5px;padding:10px 14px;min-height:44px}

.rar-fallback{
  border:2px dashed #C9B7E8;background:#FAF7FF;color:#3D3452;
  border-radius:var(--radius-lg);padding:22px;margin-top:28px;
}
.rar-fallback .lbl{
  display:inline-block;font-family:var(--font-display);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#6B4BA8;background:#F0E9FC;
  border:1px solid #DCCDF5;padding:5px 11px;border-radius:100px;margin-bottom:11px;
}
.rar-status{text-align:center;color:var(--tx-2);padding:36px 12px;font-size:15px}

/* --- voice overlay ------------------------------------------------------ */
.rar-overlay{
  position:fixed;inset:0;background:rgba(8,17,27,.97);z-index:100;
  display:none;align-items:center;justify-content:center;padding:24px;
}
.rar-overlay.is-open{display:flex}
.rar-voice{width:100%;max-width:520px;text-align:center;color:#fff}
.rar-voice h2{color:#fff;font-size:clamp(21px,4vw,28px)}
.rar-wave{display:flex;align-items:center;justify-content:center;gap:3.5px;height:78px;margin:22px 0}
.rar-wave i{width:4px;height:8px;border-radius:3px;background:linear-gradient(180deg,var(--signal),var(--signal-lt));display:block;transition:height .09s}
.rar-recbtn{
  width:88px;height:88px;border-radius:50%;background:var(--signal);border:0;
  display:grid;place-items:center;cursor:pointer;margin:0 auto 22px;
  animation:rar-ring 2s infinite;
}
.rar-recbtn.is-stopped{animation:none;background:#2A3B4C}
@keyframes rar-ring{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--signal) 50%, transparent)}
  70%{box-shadow:0 0 0 26px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
.rar-transcript{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:14px;padding:17px;text-align:left;min-height:82px;
  color:#E9EEF3;font-size:16px;line-height:1.6;margin-bottom:8px;
}
.rar-voice .hint{font-size:12.5px;color:#8CA0B2;text-align:left;margin-bottom:18px;min-height:1em}
.rar-voice .row{display:flex;gap:10px}
.rar-voice .row .btn{flex:1}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ==========================================================================
   DIRECTORY TABLES  (restored — this block was removed by accident during a
   footer cleanup, which is what put the mobile tables back into real-table
   layout and overflowed a 320px viewport.)

   A table, not cards: this IS a directory. Below 760px each row becomes a
   stacked card via data-label, so nothing is truncated and nothing scrolls
   sideways.
   ========================================================================== */
.rar-table-wrap{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
}
table.rar-table{width:100%;border-collapse:collapse;font-size:15px}
table.rar-table thead th{
  text-align:left;font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tx-2);
  padding:14px 20px;background:var(--surface);border-bottom:1px solid var(--line);
  white-space:nowrap;
}
table.rar-table tbody td{padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:middle}
table.rar-table tbody tr:last-child td{border-bottom:0}
table.rar-table tbody tr{transition:background .14s}
table.rar-table tbody tr:hover{background:var(--surface)}
.rar-table .c-name{font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:-.02em}
.rar-table .c-name a{color:var(--tx);text-decoration:none}
.rar-table .c-name a:hover{color:var(--signal)}
.rar-table .c-sub{display:block;font-family:var(--font-body);font-weight:400;font-size:13px;color:var(--tx-2);letter-spacing:0;margin-top:2px}
.rar-table .c-phone{
  font-family:var(--font-display);font-weight:900;font-size:19px;letter-spacing:-.02em;
  color:var(--tx);text-decoration:none;white-space:nowrap;
}
.rar-table .c-phone:hover{color:var(--signal)}
.rar-table .c-num{font-family:var(--font-display);font-weight:800;color:var(--tx-2);font-variant-numeric:tabular-nums}
.rar-table .c-go{text-align:right;white-space:nowrap}
.rar-table .c-go a{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:40px;padding:9px 15px;border-radius:10px;background:var(--signal);
  color:#fff;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:13.5px;
}
.rar-table .c-go a:hover{background:var(--signal-d)}
.rar-table .c-go a.is-ghost{background:transparent;color:var(--tx);border:1.5px solid var(--line)}
.rar-table .c-go a.is-ghost:hover{border-color:var(--ink);background:transparent}

@media(max-width:760px){
  /* display:none, never the screen-reader clip — a clipped thead still takes
     part in the table layout algorithm and pushes the table past the viewport.
     Nothing is lost: every stacked cell prints its own label via data-label. */
  table.rar-table thead{display:none}
  table.rar-table,table.rar-table tbody,table.rar-table tr,table.rar-table td{display:block;width:100%}
  table.rar-table{table-layout:auto}
  table.rar-table tr{border-bottom:1px solid var(--line);padding:16px 18px}
  table.rar-table tr:last-child{border-bottom:0}
  table.rar-table tbody td{
    border:0;padding:4px 0;display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  }
  table.rar-table tbody td::before{
    content:attr(data-label);font-family:var(--font-display);font-size:11px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:var(--tx-2);flex-shrink:0;
  }
  table.rar-table tbody td.c-name{display:block;padding-bottom:8px}
  table.rar-table tbody td.c-name::before{display:none}
  table.rar-table .c-go{text-align:left;padding-top:12px}
  table.rar-table .c-go::before{display:none}
  table.rar-table .c-go a{width:100%}
}



/* --- burger + mobile drawer --------------------------------------------- */
.rar-burger{
  display:none;width:44px;height:44px;border-radius:11px;border:1px solid var(--line);
  background:var(--surface);cursor:pointer;padding:0;place-items:center;
}
.rar-burger .bars{display:grid;gap:4px}
.rar-burger .bars i{display:block;width:18px;height:2px;background:var(--tx);border-radius:2px}
@media(max-width:680px){ .rar-burger{display:grid} }

/* Quick account action, beside the burger on the widths where the nav
   collapses. Icon only: the header cluster has no room for a label at 320px,
   and this is a shortcut for people who already know what it is. */
.rar-quick{display:none}
@media(max-width:680px){
  .rar-quick{
    display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;
    border:1px solid var(--line);border-radius:11px;background:var(--bg);
    color:var(--tx);text-decoration:none;
  }
  .rar-quick:hover,.rar-quick:focus-visible{border-color:var(--ink);color:var(--signal)}
}

.rar-drawer{
  position:fixed;inset:0;background:rgba(8,17,27,.55);z-index:45;
  display:none;justify-content:flex-end;
}
.rar-drawer.is-open{display:flex}
.rar-drawer .panel{
  background:var(--bg);width:min(320px,86vw);height:100%;padding:86px 22px 22px;
  display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-lg);
}
.rar-drawer .panel a{
  padding:14px 12px;border-radius:11px;text-decoration:none;color:var(--tx);
  font-family:var(--font-display);font-weight:700;font-size:16px;
}
/* :not(.btn) — the generic drawer hover (0,3,1) outranks .btn-primary (0,1,0),
   so it was repainting the button's orange to near-white while the button kept
   its white label. White on white: the CTA vanished on touch. */
.rar-drawer .panel a:not(.btn):hover{background:var(--surface)}
.rar-drawer .panel a.btn-primary:hover{background:var(--signal-d);color:#fff}
.rar-drawer .panel a.btn-ghost:hover{background:var(--surface);color:var(--tx)}
.drawer-group{
  margin:14px 0 2px;padding:0 12px;font-size:11.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tx-2);
  font-family:var(--font-display);
}
.rar-drawer .panel a.btn{margin-top:10px;color:#fff}
body.rar-nav-open{overflow:hidden}

/* --- pagination + inline CTA band --------------------------------------- */
.rar-pager{margin-top:26px}
.rar-pager .nav-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.rar-pager .page-numbers{
  display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0 12px;
  border:1px solid var(--line);border-radius:11px;text-decoration:none;color:var(--tx);
  font-family:var(--font-display);font-weight:700;font-size:14px;
}
.rar-pager .page-numbers:hover{border-color:var(--ink)}
.rar-pager .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}
.rar-pager .screen-reader-text{display:none}

.rar-cta-band{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px 24px;text-align:center;
}
.rar-cta-band h2{margin-bottom:16px}


/* Below the burger breakpoint the inline nav (CTA included) is redundant —
   every link lives in the drawer. Keeping the CTA here made the header cluster
   wider than the viewport and it wrapped onto two rows. Same fix as OMREW. */
@media(max-width:680px){
  .site-nav ul{display:none}
}


/* ==========================================================================
   PROCESS RAIL  (restored — deleted by the same bad cleanup as the tables)
   Shows the product at each step instead of only describing it.
   ========================================================================== */
.rar-process{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative}
.rar-process .step{position:relative;padding:0 22px}
.rar-process .step:first-child{padding-left:0}
.rar-process .step:last-child{padding-right:0}
.rar-process .step::after{
  content:"";position:absolute;top:19px;left:calc(50% + 26px);right:calc(-50% + 26px);
  height:2px;background:var(--line);
}
.rar-process .step:last-child::after{display:none}
.rar-process .marker{
  width:40px;height:40px;border-radius:50%;background:var(--signal);color:#fff;
  font-family:var(--font-display);font-weight:900;font-size:15px;
  display:grid;place-items:center;margin:0 auto 20px;position:relative;z-index:1;
  box-shadow:0 4px 14px color-mix(in srgb, var(--signal) 30%, transparent);
}
.rar-process h3{text-align:center;margin-bottom:8px}
.rar-process p{text-align:center;color:var(--tx-2);font-size:14.5px;margin:0 0 20px}
.rar-section.dark .rar-process p{color:#9FB3C4}

/* the small product artefacts under each step */
.rar-demo{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;min-height:92px;display:flex;flex-direction:column;justify-content:center;
  gap:8px;box-shadow:var(--shadow-sm);
}
.rar-demo .fake-field{
  display:flex;align-items:center;gap:9px;border:1.5px solid var(--line);
  border-radius:10px;padding:10px 12px;font-size:13px;color:var(--tx-2);background:var(--bg);
}
.rar-demo .fake-field .dot{width:22px;height:22px;border-radius:7px;background:var(--signal);flex-shrink:0}
.rar-demo .caret{display:inline-block;width:2px;height:14px;background:var(--signal);vertical-align:-2px;animation:rar-pulse 1.1s infinite}
.rar-demo .clues{display:flex;flex-wrap:wrap;gap:6px}
.rar-demo .clue{
  font-size:12px;padding:5px 10px;border-radius:100px;background:var(--signal-soft);
  color:var(--signal-d);border:1px solid color-mix(in srgb, var(--signal) 22%, transparent);font-weight:500;
}
.rar-demo .mini-result{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rar-demo .mini-result strong{font-family:var(--font-display);font-size:13px;display:block;letter-spacing:-.02em}
.rar-demo .mini-result .num{font-family:var(--font-display);font-weight:900;font-size:17px;letter-spacing:-.02em}
.rar-demo .mini-result .call{
  background:var(--signal);color:#fff;font-family:var(--font-display);font-weight:700;
  font-size:11.5px;padding:7px 11px;border-radius:8px;white-space:nowrap;
}

/* ==========================================================================
   FLOWING SEARCH BORDER
   Replaces the heavy focus glow. A light travels round the perimeter on hover
   and while focused. Built with a masked conic-gradient so it is one element,
   no extra DOM, no JS. @property gives us an animatable angle; browsers that
   lack it fall back to a static signal-coloured border (never nothing).
   ========================================================================== */
@property --rar-angle{ syntax:'<angle>'; initial-value:0deg; inherits:false }

.rar-field{position:relative;isolation:isolate}
.rar-field::before{
  content:"";position:absolute;inset:-2px;border-radius:20px;padding:2px;
  background:conic-gradient(
    from var(--rar-angle),
    transparent 0deg 200deg,
    color-mix(in srgb, var(--signal) 35%, transparent) 250deg,
    var(--signal) 300deg,
    color-mix(in srgb, var(--signal) 35%, transparent) 330deg,
    transparent 360deg
  );
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  /* Always running. The travelling light is what says "this is the one control
     on this page" — it should be doing that before anyone reaches for it,
     rather than only rewarding a hover that may never happen on touch. */
  opacity:1;transition:opacity .3s ease;pointer-events:none;z-index:-1;
  animation:rar-flow 3s linear infinite;
}
/* Approach still changes it: the light quickens on hover and focus. */
.rar-field:hover::before,
.rar-field:focus-within::before{
  opacity:1;
  animation-duration:1.8s;
}
@keyframes rar-flow{ to{ --rar-angle:360deg } }

/* the ring is gone — the travelling light IS the focus affordance */
.rar-field:focus-within{
  border-color:var(--line);
  box-shadow:var(--shadow);
}
/* keyboard users still get an unmistakable, non-animated indicator */
.rar-field:focus-within{outline:2px solid transparent;outline-offset:2px}
.rar-field input:focus-visible{outline:none}
.rar-search:focus-within .rar-field{border-color:color-mix(in srgb, var(--signal) 35%, transparent)}

@media (prefers-reduced-motion: reduce){
  /* Now that it runs by default, this has to stop the base animation too —
     a permanently moving light is exactly what this setting asks us not to do. */
  .rar-field::before,
  .rar-field:hover::before,
  .rar-field:focus-within::before{animation:none;opacity:1}
  .rar-field:focus-within{border-color:var(--signal)}
}
@supports not (background: conic-gradient(from 0deg, red, blue)){
  .rar-field:hover,.rar-field:focus-within{border-color:var(--signal)}
}

/* ==========================================================================
   EVIDENCE BAND — radio industry numbers
   ========================================================================== */
.rar-evidence{
  background:var(--ink);color:#fff;position:relative;overflow:hidden;
  padding:clamp(52px,7vw,80px) 0;
}
.rar-evidence::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(circle at 12% 20%,color-mix(in srgb, var(--signal) 20%, transparent),transparent 42%),
    radial-gradient(circle at 88% 80%,rgba(29,78,107,.55),transparent 46%);
}
.rar-evidence .wrap{position:relative}
.rar-evidence .sec-head h2{color:#fff}
.rar-evidence .sec-head p{color:#A8BCCB}
.rar-evidence .eyebrow{color:var(--signal-lt)}
.rar-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.rar-stat{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius-lg);padding:26px 22px;text-align:center;
  transition:transform .18s,border-color .18s,background .18s;
}
.rar-stat:hover{transform:translateY(-3px);border-color:rgba(255,138,98,.5);background:rgba(255,255,255,.08)}
.rar-stat .ico{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  margin:0 auto 16px;background:color-mix(in srgb, var(--signal) 16%, transparent);color:var(--signal-lt);
}
.rar-stat b{
  display:block;font-family:var(--font-display);font-weight:900;
  font-size:clamp(30px,4vw,40px);letter-spacing:-.04em;line-height:1;color:#fff;margin-bottom:10px;
}
.rar-stat span{display:block;font-size:14px;color:#A8BCCB;line-height:1.5}
.rar-evidence .source{
  text-align:center;margin:30px 0 0;font-size:12.5px;color:#7C93A6;
}
.rar-evidence .punch{
  text-align:center;max-width:62ch;margin:34px auto 0;font-size:clamp(17px,2.2vw,21px);
  color:#fff;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.35;
}
.rar-evidence .punch em{color:var(--signal);font-style:normal}

/* --- icon treatments ---------------------------------------------------- */
.rar-i{flex-shrink:0}
.icon-badge{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--signal-soft);color:var(--signal-d);margin-bottom:16px;
}
.rar-step.on-dark .icon-badge{background:color-mix(in srgb, var(--signal) 16%, transparent);color:var(--signal-lt)}
.rar-process .marker .rar-i{color:#fff}
.sec-head .eyebrow{display:inline-flex;align-items:center;gap:7px;justify-content:center}
.rar-empty .rar-i{display:block;margin:0 auto 10px;color:var(--tx-2);opacity:.7}
.rar-table .c-name .rar-i{color:var(--tx-2);margin-right:7px;vertical-align:-3px}

/* ==========================================================================
   HERO AMBIENT LAYER
   Faded, slow, non-interactive. Its job is to TEACH: the drifting fragments
   are literally examples of what you can type, so the empty space explains
   the product instead of just being empty. Hidden from assistive tech,
   hidden on small screens (no room), and stopped for reduced-motion users.
   ========================================================================== */
.rar-ambient{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.rar-hero .wrap{z-index:1}

/* concentric "on air" signal rings behind the search box */
.rar-ambient .rings{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:min(1100px,96vw);aspect-ratio:1;pointer-events:none;
}
.rar-ambient .rings i{
  position:absolute;inset:0;margin:auto;border-radius:50%;
  border:1px solid color-mix(in srgb, var(--signal) 14%, transparent);
  animation:rar-ring-out 9s ease-out infinite;
}
.rar-ambient .rings i:nth-child(1){width:26%;height:26%;animation-delay:0s}
.rar-ambient .rings i:nth-child(2){width:26%;height:26%;animation-delay:3s}
.rar-ambient .rings i:nth-child(3){width:26%;height:26%;animation-delay:6s}
@keyframes rar-ring-out{
  0%{transform:scale(1);opacity:0}
  15%{opacity:.55}
  100%{transform:scale(3.4);opacity:0}
}

/* drifting memory fragments — the teaching bit */
.rar-ambient .frag{
  position:absolute;font-family:var(--font-body);font-size:13.5px;
  color:var(--tx-2);opacity:0;white-space:nowrap;
  background:var(--bg);border:1px solid var(--line);
  padding:8px 14px;border-radius:100px;box-shadow:var(--shadow-sm);
  animation:rar-drift 16s ease-in-out infinite;
}
.rar-ambient .frag .rar-i{vertical-align:-3px;margin-right:6px;color:var(--signal);opacity:.8}
@keyframes rar-drift{
  0%   {opacity:0;transform:translateY(14px)}
  12%  {opacity:.62;transform:translateY(0)}
  30%  {opacity:.62;transform:translateY(-6px)}
  44%  {opacity:0;transform:translateY(-16px)}
  100% {opacity:0;transform:translateY(-16px)}
}
.rar-ambient .f1{left:2%;top:20%;animation-delay:0s}
.rar-ambient .f2{right:2%;top:31%;animation-delay:2.6s}
.rar-ambient .f3{left:5%;top:57%;animation-delay:5.2s}
.rar-ambient .f4{right:4%;top:66%;animation-delay:7.8s}
.rar-ambient .f5{left:12%;top:80%;animation-delay:10.4s}
.rar-ambient .f6{right:11%;top:14%;animation-delay:13s}

/* the gutters only exist on wide screens */
@media(max-width:1180px){ .rar-ambient .frag{display:none} }
@media(max-width:760px){ .rar-ambient .rings{display:none} }

@media (prefers-reduced-motion: reduce){
  .rar-ambient .frag{animation:none;opacity:.5;transform:none}
  .rar-ambient .rings i{animation:none;opacity:.25}
}

/* ==========================================================================
   AUTH + DASHBOARD
   ========================================================================== */
.rar-auth{display:grid;grid-template-columns:minmax(0,460px);justify-content:center;gap:34px}
.rar-auth.is-wide{grid-template-columns:minmax(0,460px) minmax(0,320px)}
@media(max-width:900px){ .rar-auth.is-wide{grid-template-columns:minmax(0,460px)} }

.rar-auth-card{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(26px,4vw,38px);box-shadow:var(--shadow);
}
.rar-auth-card h1{font-size:clamp(26px,3.4vw,34px);margin-bottom:6px}
.rar-auth-card > .muted{margin-bottom:22px}
.rar-auth-alt{margin:20px 0 0;font-size:14px;color:var(--tx-2);text-align:center}
.rar-auth-alt span{margin:0 6px;opacity:.5}
.rar-auth-aside{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:26px;align-self:start;
}
.rar-ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rar-ticks li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--tx-2)}
.rar-ticks .rar-i{color:var(--ok);flex-shrink:0;margin-top:3px}

/* forms */
.rar-form label{
  display:block;font-family:var(--font-display);font-weight:700;font-size:13.5px;
  margin:18px 0 7px;color:var(--tx);
}
.rar-form label:first-of-type{margin-top:0}
.rar-form input[type=text],.rar-form input[type=email],.rar-form input[type=password],
.rar-form input[type=tel],.rar-form input[type=url],.rar-form input[type=file],.rar-form textarea{
  width:100%;border:2px solid var(--line);border-radius:12px;padding:13px 15px;
  font-family:var(--font-body);font-size:16px;background:var(--bg);color:var(--tx);
  transition:border-color .15s,box-shadow .15s;
}
.rar-form input:focus,.rar-form textarea:focus{
  outline:none;border-color:var(--signal);box-shadow:0 0 0 4px color-mix(in srgb, var(--signal) 12%, transparent);
}
.rar-form input[type=file]{padding:11px 13px;font-size:14px}
.rar-help{font-size:12.5px;color:var(--tx-2);margin:7px 0 0}
.rar-check{
  display:flex;align-items:flex-start;gap:10px;margin:20px 0 0;
  font-family:var(--font-body);font-weight:400;font-size:14.5px;color:var(--tx-2);
}
.rar-check input{width:19px;height:19px;margin-top:2px;accent-color:var(--signal);flex-shrink:0}
.rar-block{width:100%;margin-top:22px}
.rar-reassure{
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:13px;color:var(--tx-2);margin:14px 0 0;
}
.rar-reassure .rar-i{color:var(--ok)}
.rar-field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){ .rar-field-row{grid-template-columns:1fr;gap:0} }
.rar-upload-form{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(22px,3vw,30px);margin-top:14px;
}

/* flash messages */
.rar-flash{
  border-radius:12px;padding:13px 16px;margin-bottom:20px;font-size:14.5px;
  border:1px solid var(--line);background:var(--surface);
}
.rar-flash.is-success{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.rar-flash.is-error{background:#FDECEC;border-color:#F5C4C4;color:#A32020}
.rar-flash.is-notice{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}

/* dashboard */
.rar-dash-head{background:var(--ink);color:#fff;padding:clamp(34px,5vw,52px) 0}
.rar-dash-head h1{color:#fff;margin-bottom:4px}
.rar-dash-head p{color:#9FB3C4;margin:0;font-size:14.5px}
.rar-dash-head a{color:#fff;text-decoration:underline}
.rar-dash-head .eyebrow{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--signal-lt);margin-bottom:12px;
}
.rar-stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.rar-ministat{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px;box-shadow:var(--shadow-sm);
}
.rar-ministat .ico{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--signal-soft);color:var(--signal-d);margin-bottom:12px;
}
.rar-ministat b{
  display:block;font-family:var(--font-display);font-weight:900;font-size:30px;
  letter-spacing:-.03em;line-height:1;margin-bottom:4px;
}
.rar-ministat span{font-size:13.5px;color:var(--tx-2)}

.rar-pill{
  display:inline-block;font-family:var(--font-display);font-weight:700;font-size:12px;
  padding:5px 11px;border-radius:100px;letter-spacing:.04em;white-space:nowrap;
}
.rar-pill.is-live{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-line)}
.rar-pill.is-pend{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line)}
.rar-pill.is-chg{background:#FDECEC;color:#A32020;border:1px solid #F5C4C4}
.rar-table .c-note{
  display:block;font-size:12.5px;color:#A32020;margin-top:6px;
  font-family:var(--font-body);font-weight:400;letter-spacing:0;
}

/* --- optional-field + nudge --------------------------------------------- */
.rar-optional{
  font-family:var(--font-body);font-weight:400;font-size:12px;color:var(--tx-2);
  background:var(--surface-2);border-radius:100px;padding:2px 9px;margin-left:8px;
  vertical-align:1px;letter-spacing:0;
}
.rar-nudge{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--signal-soft);border:1px solid color-mix(in srgb, var(--signal) 22%, transparent);
  border-radius:12px;padding:14px 16px;margin-top:12px;
  font-size:13.5px;color:var(--tx-2);line-height:1.55;
}
.rar-nudge .rar-i{color:var(--signal-d);flex-shrink:0;margin-top:2px}
.rar-nudge strong{display:block;color:var(--tx);font-family:var(--font-display);font-size:14px;margin-bottom:3px}
.rar-table .c-hint{
  display:inline-flex;align-items:center;gap:6px;margin-top:7px;
  font-family:var(--font-body);font-weight:400;font-size:12.5px;letter-spacing:0;
  color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-line);
  padding:4px 10px;border-radius:100px;
}
.rar-table .c-hint .rar-i{color:var(--warn)}

/* --- inline play button in tables --------------------------------------- */
.rar-table .c-play{width:56px;padding-right:0}
.rar-play{
  width:40px;height:40px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);color:var(--tx);cursor:pointer;
  display:grid;place-items:center;transition:.15s;padding:0;
}
.rar-play:hover{background:var(--signal);border-color:var(--signal);color:#fff}
.rar-play .bars{display:flex;align-items:center;gap:2.5px;height:15px}
.rar-play .bars i{width:3px;height:6px;border-radius:2px;background:currentColor;display:block}
.rar-play .bars i:nth-child(2){height:14px}
.rar-play .bars i:nth-child(3){height:9px}
/* playing: the bars dance, so the row that is sounding is unmistakable */
.rar-play.is-playing{background:var(--signal);border-color:var(--signal);color:#fff}
.rar-play.is-playing .bars i{animation:rar-eq .9s ease-in-out infinite}
.rar-play.is-playing .bars i:nth-child(2){animation-delay:.15s}
.rar-play.is-playing .bars i:nth-child(3){animation-delay:.3s}
@keyframes rar-eq{0%,100%{height:5px}50%{height:15px}}
.rar-play.is-empty{
  background:transparent;border:1px dashed var(--line);color:var(--tx-2);
  opacity:.55;cursor:default;
}
@media (prefers-reduced-motion: reduce){
  .rar-play.is-playing .bars i{animation:none;height:14px}
}

/* the half-remembered line */
.rar-table .c-hook{
  display:block;margin-top:6px;font-family:var(--font-body);font-weight:400;
  font-size:13px;font-style:italic;color:var(--ink-2);letter-spacing:0;
}

/* mobile: the play control leads the stacked card */
@media(max-width:760px){
  .rar-table .c-play{width:auto;padding:0 0 10px}
  .rar-table .c-play::before{display:none}
  .rar-table tbody td.c-play{display:block}
}

/* --- directory toolbar (count + sort) ----------------------------------- */
/* Filter box. Full width above the count/sort row — it is the primary control
   on this page, and the token used for the search field's focus ring elsewhere
   is reused so the two read as the same kind of input. */
.rar-dirsearch{
  display:flex;align-items:center;gap:10px;width:100%;margin-bottom:14px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);
  padding:6px 6px 6px 16px;box-shadow:var(--shadow-sm);
}
.rar-dirsearch .icon{display:inline-flex;color:var(--tx-2);flex-shrink:0}
.rar-dirsearch input{
  flex:1;min-width:0;border:0;background:none;padding:12px 0;
  font-family:var(--font-body);font-size:16px;color:var(--tx);
}
.rar-dirsearch input::placeholder{color:var(--tx-2)}
.rar-dirsearch input:focus{outline:none}
.rar-dirsearch input::-webkit-search-cancel-button{cursor:pointer}
.rar-dirsearch:focus-within{
  border-color:var(--ink-2);box-shadow:0 0 0 5px rgba(29,78,107,.1),var(--shadow-sm);
}
.rar-dirsearch .btn{flex-shrink:0}
/* The results are being replaced, not emptied — dimming says "working" without
   the layout jump of a spinner swapped in for the table. */
.rar-dirsearch.is-filtering .icon{opacity:.45}
[data-rar-dirresults][aria-busy="true"]{opacity:.55;transition:opacity .12s ease}

@media (max-width:560px){
  .rar-dirsearch{padding-left:12px}
  .rar-dirsearch .btn{padding-left:14px;padding-right:14px}
}

.rar-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:16px;
}
.rar-toolbar .count{font-size:14.5px;color:var(--tx-2)}
.rar-toolbar .count b{color:var(--tx);font-family:var(--font-display);font-weight:800}
.rar-sort{display:flex;gap:6px;flex-wrap:wrap}
.rar-sort a{
  font-size:13.5px;text-decoration:none;color:var(--tx-2);
  border:1px solid var(--line);border-radius:100px;padding:7px 14px;background:var(--bg);
}
.rar-sort a:hover{border-color:var(--ink);color:var(--tx)}
.rar-sort a.is-on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:500}

/* ==========================================================================
   TABLE REFINEMENTS
   Fixes three things visible at 1340px: columns sprawling apart, a count that
   read as an afterthought, and a row where only a small ghost button was
   clickable.
   ========================================================================== */

/* Fixed layout stops the name column eating the width and flinging the rest
   to the far edge. Percentages, so it still adapts. */
table.rar-table{table-layout:fixed}
table.rar-table.is-stations .h-station{width:38%}
table.rar-table.is-stations .h-market{width:26%}
table.rar-table.is-stations .h-count{width:18%}
table.rar-table.is-stations .h-go{width:18%}

/* whole-row target: one real anchor, stretched over the row */
table.rar-table tbody tr{position:relative}
.rar-table .c-stretch{
  font-family:var(--font-display);font-weight:800;font-size:16px;
  letter-spacing:-.02em;color:var(--tx);text-decoration:none;
}
.rar-table .c-stretch::after{content:"";position:absolute;inset:0;z-index:1}
.rar-table tbody tr:hover .c-stretch{color:var(--signal)}
.rar-table .c-stretch:focus-visible{outline:none}
.rar-table tbody tr:focus-within{background:var(--surface);box-shadow:inset 3px 0 0 var(--signal)}

/* station rows: icon + stacked body */
.rar-table.is-stations .c-name{display:flex;align-items:flex-start;gap:12px}
.rar-table .c-ico{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  display:grid;place-items:center;background:var(--signal-soft);color:var(--signal-d);
}
.rar-table .c-body{display:block;min-width:0}

/* the count now reads as a quantity, not a stray digit */
.rar-table .c-num b{
  font-family:var(--font-display);font-weight:900;font-size:19px;
  letter-spacing:-.02em;color:var(--tx);
}
.rar-table .c-num .unit{font-size:13px;color:var(--tx-2);margin-left:5px}

/* the ghost button becomes an affordance hint — the row itself is the target */
.rar-go-hint{
  display:inline-flex;align-items:center;gap:6px;justify-content:flex-end;
  font-family:var(--font-display);font-weight:700;font-size:13.5px;
  color:var(--tx-2);transition:color .15s,transform .15s;
}
.rar-table tbody tr:hover .rar-go-hint{color:var(--signal);transform:translateX(3px)}

/* ads table gets the same width discipline */
table.rar-table:not(.is-stations) col,
table.rar-table:not(.is-stations) th:nth-child(1){width:64px}
table.rar-table:not(.is-stations) th:nth-child(2){width:40%}
table.rar-table:not(.is-stations) th:nth-child(3){width:20%}
table.rar-table:not(.is-stations) th:nth-child(4){width:20%}
table.rar-table:not(.is-stations) th:nth-child(5){width:14%}

/* tighten the vertical rhythm — sections were floating apart */
.rar-section{padding:clamp(46px,5.5vw,68px) 0}
.sec-head{margin-bottom:clamp(26px,3vw,36px)}

@media(max-width:760px){
  table.rar-table{table-layout:auto}
  .rar-table.is-stations .c-name{align-items:center}
  .rar-go-hint{display:none}
  .rar-table .c-num b{font-size:17px}
}

/* --- stacked-card corrections (stations) --------------------------------
   Three things broke when the row gained an icon and a stretched link:
   the name floated right, the count separated from its unit, and the now-
   empty action cell left dead space at the bottom of every card.
   ------------------------------------------------------------------------ */
.rar-table .c-val{display:inline-flex;align-items:baseline;gap:5px}
@media(max-width:760px){
  .rar-table.is-stations tbody td.c-name{
    display:flex;justify-content:flex-start;align-items:center;gap:12px;
  }
  .rar-table.is-stations .c-go{display:none}
  .rar-table .c-num{align-items:center}
}

/* --- process rail on mobile (corrected) ---------------------------------
   The vertical rail was drawn at left:19px while the step content also
   started at 0, so the line ran straight through the headings. Give the
   marker its own gutter and indent the content past it.
   ------------------------------------------------------------------------ */
@media(max-width:820px){
  .rar-process{grid-template-columns:1fr;gap:30px}
  .rar-process .step{
    position:relative;
    padding:0 0 0 60px;      /* gutter for the marker + rail */
    min-height:44px;
  }
  .rar-process .marker{
    position:absolute;left:0;top:0;margin:0;
    width:42px;height:42px;
  }
  .rar-process .step::after{
    top:52px;                /* starts just below the marker */
    left:20px;               /* centred in the gutter */
    right:auto;bottom:-30px;
    width:2px;height:auto;
    background:var(--line);
  }
  .rar-process h3,.rar-process p{text-align:left}
  .rar-process h3{margin-bottom:6px;padding-top:8px}
  .rar-process p{margin-bottom:14px}
}

/* First/last steps carry edge overrides for the desktop 3-column rail
   (`padding-left:0` / `padding-right:0`). Those selectors are more specific
   than the mobile rule above, so step 01 kept hugging the edge and its text
   ran under the marker. Restate them at matching specificity. */
@media(max-width:820px){
  .rar-process .step:first-child,
  .rar-process .step:last-child{padding:0 0 0 60px}
}

/* --- ads table: stacked-card corrections -------------------------------- */
.rar-table .c-val.is-stack{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.rar-table .c-val.is-stack .c-sub{margin-top:0}

@media(max-width:760px){
  /* an audio-less row has an empty play cell — do not let it occupy a line */
  .rar-table td.c-play:empty{display:none}
  .rar-table td.c-play{padding-bottom:12px}
  /* value groups align right against their label, and may wrap as a block */
  .rar-table .c-val.is-stack{align-items:flex-end}
  .rar-table tbody td{gap:18px}
}
@media(min-width:761px){
  .rar-table .c-val.is-stack{align-items:flex-start;text-align:left}
}

/* --- search results page ------------------------------------------------ */
.rar-searchpage{padding:clamp(32px,4.5vw,56px) 0 clamp(48px,6vw,72px)}
.rar-searchbar{max-width:740px;margin:0 auto 26px}
.rar-yousaid{font-size:14.5px;color:var(--tx-2);margin:0 0 12px;text-align:center}
.rar-yousaid b{color:var(--tx);font-weight:500}
.rar-resultcount{max-width:740px;margin:0 auto 16px;font-size:14.5px;color:var(--tx-2)}
.rar-resultcount b{color:var(--tx);font-family:var(--font-display);font-weight:800}
.rar-results.is-static{margin-top:0}
.rar-card .badges{margin:10px 0 2px}
.rar-card .rar-block{width:100%;margin-top:12px}
.rar-refine{
  max-width:740px;margin:28px auto 0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;
}
.rar-refine .rar-chips{justify-content:flex-start;margin-top:14px}
.rar-refine .rar-chip{text-decoration:none}
.rar-note{
  max-width:740px;margin:18px auto 0;font-size:13px;color:var(--warn);
  background:var(--warn-bg);border:1px solid var(--warn-line);
  border-radius:10px;padding:10px 14px;text-align:center;
}
.rar-status .rar-i{color:var(--tx-2);opacity:.6;margin-bottom:8px}
.rar-fallback{max-width:740px;margin:26px auto 0}
.rar-card h3 a{color:var(--tx);text-decoration:none}
.rar-card h3 a:hover{color:var(--signal)}

/* ==========================================================================
   VOICE OVERLAY — four states, one panel
   Explainer first: we tell people why we want the microphone BEFORE the
   browser prompt appears. After one grant we skip straight to listening.
   ========================================================================== */
.rar-voice-step{display:none}
.rar-voice.is-explainer .step-explainer,
.rar-voice.is-recording .step-recording,
.rar-voice.is-review    .step-review,
.rar-voice.is-denied    .step-denied{display:block}

.rar-voice-ico{
  width:64px;height:64px;border-radius:20px;margin:0 auto 20px;
  display:grid;place-items:center;background:color-mix(in srgb, var(--signal) 16%, transparent);color:var(--signal-lt);
}
.rar-voice-ico.is-muted{background:rgba(255,255,255,.08);color:#8CA0B2}
.rar-voice h2{color:#fff;margin-bottom:8px}
.rar-voice .vs{color:#9FB3C4;font-size:14.5px;margin-bottom:26px;max-width:44ch;margin-left:auto;margin-right:auto}
.rar-voice .row{display:flex;gap:10px;justify-content:center}
.rar-voice .row .btn{flex:1;max-width:220px}
.rar-typeinstead{
  display:block;margin:18px auto 0;background:none;border:0;cursor:pointer;
  font-family:var(--font-body);font-size:13.5px;color:#9FB3C4;text-decoration:underline;
}
.rar-typeinstead:hover{color:#fff}

.rar-live{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;
  background:color-mix(in srgb, var(--signal) 16%, transparent);border:1px solid color-mix(in srgb, var(--signal) 45%, transparent);color:var(--signal-lt);
  font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:6px 13px;border-radius:100px;
}
.rar-live i{width:8px;height:8px;border-radius:50%;background:var(--signal);animation:rar-pulse 1.1s infinite}
.rar-recbtn{color:#fff}
.rar-recnote{color:#8CA0B2;font-size:13px;margin:14px 0 0}
.rar-voice .rar-transcript:focus{outline:2px solid var(--signal);outline-offset:2px}
.rar-voice .rar-transcript:empty::before{
  content:attr(data-placeholder);color:#6B7C8C;
}

/* (horizontal .rar-tabs retired — replaced by the vertical .rar-sidenav below) */

/* the "no audio" flag: a quiet inline note, not a block pill that distorts the cell */
.rar-table .c-flag{
  display:inline-flex;align-items:center;gap:5px;margin-top:6px;
  font-family:var(--font-body);font-weight:400;font-size:12.5px;
  color:var(--warn);letter-spacing:0;
}
.rar-table .c-flag .rar-i{color:var(--warn)}
.rar-table.is-mine .h-station{width:auto}

/* danger zone */
.rar-danger{
  background:#FDF6F6;border:1px solid #F3D4D4;border-radius:var(--radius-lg);
  padding:clamp(20px,3vw,28px);margin-top:14px;
}
.rar-danger p{font-size:14.5px;color:#7A4A4A;margin-bottom:16px}
.btn-danger{background:#A32020;color:#fff}
.btn-danger:hover{background:#8A1A1A}
.rar-optional{
  font-family:var(--font-body);font-weight:400;font-size:12px;color:var(--tx-2);
  background:var(--surface);border:1px solid var(--line);
  padding:2px 8px;border-radius:100px;margin-left:6px;
}
.rar-note.is-info{
  color:var(--ink-2);background:#EFF6FB;border-color:#CFE3F0;
  max-width:none;margin:0 0 20px;
}
.rar-nudge{
  display:flex;gap:12px;align-items:flex-start;margin:16px 0 0;
  background:var(--signal-soft);border:1px solid color-mix(in srgb, var(--signal) 22%, transparent);
  border-radius:12px;padding:14px 16px;font-size:13.5px;color:var(--tx-2);
}
.rar-nudge .rar-i{color:var(--signal-d);flex-shrink:0;margin-top:2px}
.rar-nudge strong{display:block;color:var(--tx);margin-bottom:3px}
@media(max-width:640px){
  .rar-tabs a{padding:14px 13px;font-size:13.5px}
}

/* ==========================================================================
   ACCOUNT — WooCommerce-style vertical nav
   Analytics sit ABOVE the layout and stay put on every tab: "is this working?"
   is the question a member has regardless of which section they are in.
   ========================================================================== */
.rar-account{
  display:grid;grid-template-columns:236px minmax(0,1fr);
  gap:clamp(22px,3vw,40px);margin-top:clamp(24px,3vw,34px);align-items:start;
}
.rar-sidenav{
  display:flex;flex-direction:column;gap:2px;position:sticky;top:86px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:10px;box-shadow:var(--shadow-sm);
}
.rar-sidenav a{
  display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:11px;
  text-decoration:none;color:var(--tx-2);
  font-family:var(--font-display);font-weight:700;font-size:14.5px;
  transition:background .14s,color .14s;
}
.rar-sidenav a:hover{background:var(--surface);color:var(--tx)}
.rar-sidenav a.is-on{background:var(--ink);color:#fff}
.rar-sidenav a.is-on .rar-i{color:#fff}
.rar-sidenav .lbl{flex:1}
.rar-sidenav .n{
  background:var(--surface);border:1px solid var(--line);color:var(--tx-2);
  font-size:11.5px;padding:2px 8px;border-radius:100px;
}
.rar-sidenav a.is-on .n{background:rgba(255,255,255,.16);border-color:transparent;color:#fff}
.rar-sidenav a.is-out{
  margin-top:8px;padding-top:16px;border-top:1px solid var(--line);
  border-radius:0 0 11px 11px;font-weight:400;font-family:var(--font-body);font-size:14px;
}
.rar-account-panel{min-width:0}
.rar-account-panel > h2:first-child{margin-top:0}

/* stats bar stays a row of three, always visible */
.rar-stat-row{margin-bottom:0}

@media(max-width:900px){
  .rar-account{grid-template-columns:1fr;gap:20px}
  .rar-sidenav{
    position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none;
    padding:8px;gap:4px;
  }
  .rar-sidenav::-webkit-scrollbar{display:none}
  .rar-sidenav a{white-space:nowrap;padding:11px 14px}
  .rar-sidenav a.is-out{
    margin-top:0;padding-top:11px;border-top:0;border-left:1px solid var(--line);
    border-radius:11px;margin-left:4px;padding-left:16px;
  }
}

/* Stats are three short numbers — stacking them full-width buried the nav
   under three screens of card. Keep them as a compact row on phones. */
@media(max-width:640px){
  .rar-stat-row{grid-template-columns:repeat(3,1fr);gap:8px}
  .rar-ministat{padding:14px 10px;text-align:center}
  .rar-ministat .ico{width:30px;height:30px;border-radius:9px;margin:0 auto 8px}
  .rar-ministat .ico .rar-i{width:16px;height:16px}
  .rar-ministat b{font-size:22px}
  .rar-ministat span{font-size:11.5px;line-height:1.3;display:block}
}

/* ==========================================================================
   MARKETING PAGES
   ========================================================================== */
.rar-hero.is-page{padding:clamp(44px,6vw,74px) 0 clamp(34px,4vw,48px)}
.rar-hero.is-page h1{font-size:clamp(30px,5vw,52px)}
.rar-lede{max-width:60ch;margin:0 auto 26px;color:var(--tx-2);font-size:clamp(16px,2vw,19px)}
.rar-lede p:last-child{margin-bottom:0}

/* numbered prose steps */
.rar-steps-list{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rar-steps-list li{
  counter-increment:s;position:relative;padding:18px 20px 18px 62px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  font-size:15.5px;color:var(--tx-2);
}
.rar-steps-list li::before{
  content:counter(s);position:absolute;left:18px;top:16px;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--signal);color:#fff;
  font-family:var(--font-display);font-weight:900;font-size:13px;
}
.rar-steps-list strong{color:var(--tx)}

/* FAQ accordion — native <details>, no JS */
.rar-faq{display:grid;gap:10px}
.rar-faq-item{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;
}
.rar-faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 20px;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:800;font-size:16.5px;letter-spacing:-.02em;
}
.rar-faq-item summary::-webkit-details-marker{display:none}
.rar-faq-item summary:hover{background:var(--surface)}
.rar-faq-item summary i{
  width:22px;height:22px;flex-shrink:0;position:relative;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);transition:.18s;
}
.rar-faq-item summary i::before,
.rar-faq-item summary i::after{
  content:"";position:absolute;inset:0;margin:auto;background:var(--tx-2);
}
.rar-faq-item summary i::before{width:10px;height:2px}
.rar-faq-item summary i::after{width:2px;height:10px;transition:transform .18s}
.rar-faq-item[open] summary i{background:var(--signal);border-color:var(--signal)}
.rar-faq-item[open] summary i::before,
.rar-faq-item[open] summary i::after{background:#fff}
.rar-faq-item[open] summary i::after{transform:scaleY(0)}
.rar-faq-item .a{padding:0 20px 20px;color:var(--tx-2);font-size:15.5px}
.rar-faq-item .a p{margin:0;max-width:70ch}

/* pricing */
.rar-price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px;align-items:start}
.rar-price{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px 24px;position:relative;
}
.rar-price.is-featured{border:2px solid var(--ink);box-shadow:var(--shadow)}
.rar-price .tag{
  position:absolute;top:-11px;left:24px;background:var(--signal);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;padding:4px 11px;border-radius:100px;
}
.rar-price .amount{
  font-family:var(--font-display);font-weight:900;font-size:34px;
  letter-spacing:-.03em;color:var(--tx);margin:0 0 18px;
}
.rar-price .rar-ticks{margin-bottom:20px}
.rar-price .rar-block{margin-top:0}

/* contact layout */
.rar-contact-cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(22px,3vw,40px);align-items:start}
@media(max-width:860px){.rar-contact-cols{grid-template-columns:1fr}}

/* honeypot: present for bots, gone for everyone else */
.rar-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.rar-form select{
  width:100%;border:2px solid var(--line);border-radius:12px;padding:13px 15px;
  font-family:var(--font-body);font-size:16px;background:var(--bg);color:var(--tx);
}
.rar-form select:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 4px color-mix(in srgb, var(--signal) 12%, transparent)}

/* --- legal pages --------------------------------------------------------- */
.rar-legal-date{color:var(--tx-2);font-size:14px;margin:0}
.rar-legal-body{font-size:16.5px;line-height:1.75;color:var(--tx-2)}
.rar-legal-body h2{
  font-size:clamp(20px,2.4vw,25px);color:var(--tx);
  margin:38px 0 12px;padding-top:22px;border-top:1px solid var(--line);
}
.rar-legal-body h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.rar-legal-body p{margin:0 0 15px;max-width:74ch}
.rar-legal-body ul,.rar-legal-body ol{margin:0 0 18px;padding-left:22px;max-width:74ch}
.rar-legal-body li{margin-bottom:8px}
.rar-legal-body strong{color:var(--tx)}
.rar-agent{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--signal);
  border-radius:var(--radius);padding:18px 20px;margin:0 0 18px;
}
.rar-agent p{margin:0;color:var(--tx)}
.rar-legal-warning{
  background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--radius-lg);
  padding:20px 22px;margin-bottom:30px;color:var(--warn);
}
.rar-legal-warning strong{
  display:block;font-family:var(--font-display);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;
}
.rar-legal-warning p{margin:0 0 14px;font-size:14.5px;color:#6B4A00}
.rar-legal-cross{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:40px;
  padding-top:24px;border-top:1px solid var(--line);
}
.rar-legal-cross a{
  font-size:13.5px;text-decoration:none;color:var(--tx-2);
  border:1px solid var(--line);border-radius:100px;padding:8px 15px;
}
.rar-legal-cross a:hover{border-color:var(--ink);color:var(--tx)}

/* ==========================================================================
   FOOTER
   Brand block left, link columns right, social under the brand, a legal strip
   fenced between two rules, then the disclaimer.
   ========================================================================== */
.site-footer{background:var(--ink);color:#9FB3C4;padding:clamp(44px,5vw,64px) 0 32px;font-size:14px}
.site-footer a{color:#9FB3C4;text-decoration:none}
.site-footer a:hover{color:#fff}

.footer-top{
  display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2.2fr);
  gap:clamp(28px,4vw,64px);padding-bottom:clamp(30px,4vw,44px);
}
.footer-brand{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:900;font-size:19px;
  letter-spacing:-.04em;color:#fff;text-decoration:none;
}
.footer-brand .accent{color:var(--signal)}
.footer-brand .mark{display:inline-flex;align-items:flex-end;gap:2px;height:17px}
.footer-brand .mark i{width:3px;border-radius:2px;background:var(--signal);display:block}
.footer-brand .mark i:nth-child(1){height:7px}
.footer-brand .mark i:nth-child(2){height:15px}
.footer-brand .mark i:nth-child(3){height:10px}
.footer-brand .mark i:nth-child(4){height:17px}
.footer-tag{margin:14px 0 0;max-width:34ch;color:#7C93A6;font-size:13.5px}

.footer-social{display:flex;gap:8px;list-style:none;margin:24px 0 0;padding:0}
.footer-social a{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:#C6D5E0;transition:.15s;
}
.footer-social a:hover{background:var(--signal);border-color:var(--signal);color:#fff}

.footer-menus{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px}
.footer-menus h4{
  font-family:var(--font-display);font-size:11.5px;font-weight:700;color:#fff;
  letter-spacing:.13em;text-transform:uppercase;margin:0 0 14px;
}
.footer-menus ul{list-style:none;margin:0;padding:0}
.footer-menus li{margin-bottom:9px;line-height:1.5}

/* the fenced legal strip */
.footer-legal{
  display:flex;flex-wrap:wrap;gap:26px;padding:18px 0;
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.footer-legal a{
  font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:#C6D5E0;
}
.footer-legal a:hover{color:#fff}

.footer-disclaimer{padding-top:26px}
.footer-disclaimer h5{
  font-family:var(--font-display);font-size:11.5px;font-weight:700;color:#fff;
  letter-spacing:.13em;text-transform:uppercase;margin:0 0 10px;
}
.footer-disclaimer p{color:#6F8496;font-size:12.5px;line-height:1.7;margin:0 0 16px;max-width:none}
.footer-disclaimer .footer-bottom{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:0;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);
  color:#6F8496;font-size:12.5px;
}
@media(max-width:860px){
  .footer-top{grid-template-columns:1fr;gap:32px}
  .footer-menus{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media(max-width:460px){
  .footer-menus{grid-template-columns:1fr}
  .footer-legal{gap:14px 20px}
}

/* ==========================================================================
   UTILITIES  (restored — lost in the same cleanup that took the tables and the
   process rail. Their absence is what left buttons uncentred, section padding
   inconsistent, and the mobile header CTA unable to shorten itself.)

   These exist so templates never need a style="" attribute: our CSP is
   `style-src 'self'`, which blocks inline style attributes as well as
   <style> blocks.
   ========================================================================== */
.page-pad{padding:clamp(40px,6vw,64px) 22px}
.page-narrow{max-width:780px;margin-left:auto;margin-right:auto}
.text-center{text-align:center}
.muted{color:var(--tx-2)}
.mt-1{margin-top:14px}
.mt-2{margin-top:22px}
.mt-3{margin-top:34px}
.mb-0{margin-bottom:0}
.h-sm{font-size:20px}
.on-white{color:#fff}
.list-disc{list-style:disc;padding-left:1.2em}
.hide-sm{display:inline}

/* dark-section variant of the step card */
.rar-step.on-dark{background:transparent;border-color:rgba(255,255,255,.14)}
.rar-step.on-dark h3{color:#fff}
.rar-step.on-dark p{color:#9FB3C4}
.rar-step.on-dark .icon-badge{background:color-mix(in srgb, var(--signal) 16%, transparent);color:var(--signal-lt)}

/* waveform bar heights — class-based, deterministic, CSP-safe */
.rar-waveline i.w1{height:5px}   .rar-waveline i.w2{height:9px}
.rar-waveline i.w3{height:13px}  .rar-waveline i.w4{height:17px}
.rar-waveline i.w5{height:21px}  .rar-waveline i.w6{height:25px}
.rar-waveline i.w7{height:29px}  .rar-waveline i.w8{height:33px}
.rar-waveline i.w9{height:27px}  .rar-waveline i.w10{height:19px}
.rar-waveline i.w11{height:11px} .rar-waveline i.w12{height:7px}

/* footer brand column + social glyph sizing */
.footer-brand-col{min-width:0}
.rar-social-i{display:block}

/* legal page wrapper */
.rar-legal{max-width:820px}

/* the mobile header CTA sheds its suffix rather than wrapping the header */
@media(max-width:520px){
  .hide-sm{display:none}
}

/* ==========================================================================
   SINGLE LISTING
   The phone number is why anyone is here, so it gets its own card that stays
   in view on desktop while the rest is read.
   ========================================================================== */
.rar-crumbs{
  padding-top:22px;font-size:13.5px;color:var(--tx-2);
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
}
.rar-crumbs a{color:var(--tx-2);text-decoration:none}
.rar-crumbs a:hover{color:var(--signal)}
.rar-crumbs .current{color:var(--tx)}
.rar-crumbs span[aria-hidden]{opacity:.45}

.rar-single{
  display:grid;grid-template-columns:minmax(0,1fr) 330px;
  gap:clamp(24px,3.5vw,48px);align-items:start;
  padding:clamp(20px,3vw,32px) 22px clamp(44px,5vw,64px);
}
.rar-single-main{min-width:0}
.rar-single-main h1{font-size:clamp(28px,4.4vw,46px);margin-bottom:8px}
.rar-single-meta{color:var(--tx-2);font-size:15.5px;margin:0 0 14px}
.rar-single-hook{
  font-size:clamp(17px,2.2vw,21px);font-style:italic;color:var(--ink-2);
  border-left:3px solid var(--signal);padding-left:16px;margin:0 0 26px;max-width:60ch;
}

.rar-single-player{
  display:flex;align-items:center;gap:16px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px;
}
.rar-single-player strong{display:block;font-family:var(--font-display);font-size:16px;letter-spacing:-.02em}
.rar-single-player span{font-size:13.5px;color:var(--tx-2)}
.rar-single-player.is-empty{background:transparent;border-style:dashed}
.rar-play.is-lg{width:56px;height:56px;border-radius:16px}
.rar-play.is-lg .bars{height:22px;gap:3.5px}
.rar-play.is-lg .bars i{width:4px;height:9px}
.rar-play.is-lg .bars i:nth-child(2){height:21px}
.rar-play.is-lg .bars i:nth-child(3){height:13px}

.rar-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px 24px;margin:0}
.rar-facts > div{padding:14px 0;border-bottom:1px solid var(--line)}
.rar-facts dt{
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--tx-2);margin-bottom:8px;
}
.rar-facts dt .rar-i{color:var(--signal)}
.rar-facts dd{margin:0;font-size:15px;color:var(--tx)}

.rar-transcript-box{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:22px;
}
.rar-transcript-box p{margin:0 0 12px;color:var(--tx-2);font-size:15.5px;line-height:1.75;max-width:70ch}
.rar-transcript-box .src{font-size:12.5px;color:var(--tx-2);opacity:.75}
.rar-report{margin-top:30px;font-size:13.5px;color:var(--tx-2)}

.rar-callcard{
  position:sticky;top:96px;background:var(--bg);border:2px solid var(--ink);
  border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow);
}
.rar-callcard .lbl{
  display:block;font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tx-2);margin-bottom:8px;
}
.rar-callcard .rar-phone{font-size:clamp(26px,3vw,32px);margin:0 0 16px;display:block}
.rar-callcard .rar-block{width:100%}
.rar-found{
  display:flex;align-items:center;gap:8px;margin:18px 0 0;padding-top:16px;
  border-top:1px solid var(--line);font-size:13.5px;color:var(--tx-2);
}
.rar-found .rar-i{color:var(--ok)}
.rar-found b{color:var(--tx)}
.rar-verify{margin:14px 0 0;font-size:12.5px;color:var(--tx-2);line-height:1.6}
.rar-single-cta{padding:clamp(36px,4vw,52px) 22px}

@media(max-width:900px){
  .rar-single{grid-template-columns:1fr;padding-bottom:32px}
  /* on a phone the number belongs first, not after the whole page */
  .rar-callcard{position:static;order:-1}
}

/* ==========================================================================
   HOMEPAGE — demo, commercial cards, browse tabs, closing CTAs
   Built from the existing tokens only. No new colours, no new radii.
   ========================================================================== */

.btn-sm{padding:9px 14px;font-size:13.5px;border-radius:10px}
.rar-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.ticks{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:9px}
.ticks li{display:flex;align-items:flex-start;gap:10px;font-size:15.5px;color:var(--tx-2)}
.ticks li svg{color:var(--signal);flex-shrink:0;margin-top:3px}

/* --- product demonstration ---------------------------------------------- */
/* Query on one side, result on the other, so the value is legible in one look
   without a paragraph explaining it. */
.rar-demo-pair{
  display:grid;grid-template-columns:1fr auto 1fr;gap:26px;align-items:center;
  max-width:1040px;margin:0 auto;
}
.demo-label{
  display:block;font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tx-2);margin-bottom:10px;
}
.demo-query{
  display:flex;align-items:center;gap:11px;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:17px 18px;box-shadow:var(--shadow-sm);
  font-size:16.5px;color:var(--tx);
}
.demo-query svg{color:var(--tx-2);flex-shrink:0}
.demo-note{margin:12px 0 0;font-size:13.5px;color:var(--tx-2);line-height:1.5}
.demo-arrow{color:var(--signal);display:grid;place-items:center}
/* min-width:0 so a long query string cannot push a grid column wider than
   its track and blow out the row. */
.demo-ask,.demo-hit{min-width:0}
.demo-hit .rar-card{margin:0}

@media(max-width:860px){
  .rar-demo-pair{grid-template-columns:1fr;gap:18px}
  .demo-arrow{transform:rotate(90deg);justify-self:center}
}

/* --- commercial cards ---------------------------------------------------- */
/* Three across on desktop, two on tablet, one on a phone. auto-fit would let a
   lone card stretch the full width, so the counts are set explicitly. */
.rar-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1000px){.rar-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.rar-cards{grid-template-columns:1fr}}

.rar-card{
  display:flex;flex-direction:column;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow-sm);
  transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease;
}
.rar-card:hover{box-shadow:var(--shadow);border-color:var(--surface-2);transform:translateY(-2px)}
.rar-card .card-name{
  font-size:18px;line-height:1.25;margin:0 0 4px;letter-spacing:-.02em;
}
.rar-card .card-name a{color:var(--tx);text-decoration:none}
.rar-card .card-name a:hover{color:var(--signal)}
.rar-card .card-meta{margin:0 0 12px;font-size:13.5px;color:var(--tx-2)}
.rar-card .card-station{margin:0 0 10px}
/* The frequency is what people remember first, so it gets to look like a dial
   reading rather than another line of grey metadata. */
.rar-card .freq{
  display:inline-block;font-family:var(--font-display);font-weight:800;
  font-size:13.5px;letter-spacing:-.01em;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);
  border-radius:8px;padding:5px 10px;
}
.rar-card .card-when{
  display:flex;align-items:center;gap:6px;
  margin:0 0 12px;font-size:12.5px;color:var(--tx-2);
}
.rar-card .card-when svg{flex-shrink:0;opacity:.8}
.rar-card .card-script{
  margin:0 0 16px;font-size:14.5px;line-height:1.55;color:var(--tx-2);
  font-style:italic;
  /* Two lines, so a long transcript cannot make one card tower over its row. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.rar-card .card-script mark{
  background:var(--signal-soft);color:var(--signal);
  font-style:normal;font-weight:700;padding:0 3px;border-radius:4px;
  /* Underline as well as colour: the match must survive greyscale. */
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
}
.rar-card .card-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
}
/* The play control keeps the shared .rar-play behaviour but grows a label —
   audio is the product, not a secondary affordance. */
.rar-card .card-play{
  width:auto;height:auto;border-radius:10px;padding:8px 12px;
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-weight:700;font-size:13px;
}
.rar-card .card-play .txt{white-space:nowrap}
.rar-card .card-call{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rar-card .card-call .num{
  font-family:var(--font-display);font-weight:900;font-size:15.5px;
  letter-spacing:-.02em;color:var(--tx);white-space:nowrap;
}
.rar-card.is-demo{box-shadow:var(--shadow)}
.rar-card.is-demo:hover{transform:none}
.rar-card .card-play.is-static{cursor:default}

@media(max-width:400px){
  .rar-card .card-foot{flex-direction:column;align-items:stretch}
  .rar-card .card-call{justify-content:space-between}
}

/* --- browse tabs --------------------------------------------------------- */
/* Every panel renders and shows until JS marks the set ready, so with no
   JavaScript this is three labelled lists rather than two invisible ones. */
.rar-tabs .tablist{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.rar-tabs .tab{
  font:inherit;font-size:13.5px;cursor:pointer;
  color:var(--tx-2);background:var(--bg);
  border:1px solid var(--line);border-radius:100px;padding:9px 18px;
}
.rar-tabs .tab:hover{color:var(--tx);border-color:var(--ink)}
.rar-tabs .tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.rar-tabs .tabpanel + .tabpanel{margin-top:30px}
.rar-tabs .tabpanel-label{
  font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tx-2);text-align:center;margin:0 0 14px;
}
.rar-tabs[data-rar-tabs-ready] .tabpanel-label{display:none}
.rar-tabs[data-rar-tabs-ready] .tabpanel[hidden]{display:none}
.term-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.term-pill{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--bg);border:1px solid var(--line);border-radius:11px;
  padding:13px 15px;text-decoration:none;transition:.15s;
}
.term-pill:hover{border-color:var(--ink);box-shadow:var(--shadow-sm)}
.term-pill .t{font-family:var(--font-display);font-weight:700;font-size:14.5px;color:var(--tx)}
.term-pill .n{
  font-size:12px;color:var(--tx-2);background:var(--surface);
  border-radius:100px;padding:2px 9px;flex-shrink:0;
}

/* --- paired pitches ------------------------------------------------------ */
/* Two audiences, one band. Each card carries its own message end to end, so
   they read as a choice rather than as one section interrupted. */
.rar-pitches{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.pitch{
  display:flex;flex-direction:column;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px;box-shadow:var(--shadow-sm);
}
.pitch.is-alt{background:var(--surface)}
.pitch h2{margin:10px 0 8px}
.pitch .lead{color:var(--tx-2);margin:0 0 20px;font-size:15.5px}
.pitch .rar-cta-row{justify-content:flex-start;margin:auto 0 0;padding-top:4px}
.pitch .rar-reassure{margin-top:10px;font-size:12.5px}
.pitch .ticks{margin-bottom:auto}

/* Compact numbered steps: the three-across grid needed a full band to itself,
   where stacked rows say the same thing in half the height. */
.pitch-steps{list-style:none;margin:0 auto 22px;padding:0;display:grid;gap:14px}
.pitch-steps li{display:flex;align-items:flex-start;gap:13px}
.pitch-steps .icon-badge{flex-shrink:0;width:38px;height:38px}
.pitch-steps strong{display:block;font-family:var(--font-display);font-size:15px;color:var(--tx)}
.pitch-steps li > span:last-child{font-size:14px;color:var(--tx-2);line-height:1.5}

@media(max-width:860px){
  .rar-pitches{grid-template-columns:1fr}
  .pitch{padding:24px 20px}
}

/* --- closing search ------------------------------------------------------ */
.rar-again .sec-head{margin-bottom:26px}
.rar-again .rar-search{max-width:760px;margin:0 auto}

/* ==========================================================================
   SINGLE COMMERCIAL — identity line, player, transcript, related list
   ========================================================================== */

/* --- identity line ------------------------------------------------------- */
.rar-idline{margin:0 0 24px}
.rar-idline .idl-what{margin:0 0 10px;font-size:15.5px;color:var(--tx-2)}
.rar-idline .idl-where{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
/* Station gets dial treatment: people remember the frequency before the name. */
.rar-idline .freq{
  font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:-.01em;
  color:var(--ink-2);background:var(--surface);border:1px solid var(--line);
  border-radius:9px;padding:6px 12px;
}
.rar-idline .when{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--tx-2)}

/* --- block headings ------------------------------------------------------ */
.blk-h{font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--tx-2);margin:0 0 12px}
.blk-note{margin:12px 0 0;font-size:13.5px;color:var(--tx-2)}
.rar-audio-block,.rar-script-block,.rar-aired-block{margin:0 0 30px}

/* --- player -------------------------------------------------------------- */
.rar-player audio{width:100%}
.rar-player.is-enhanced audio{display:none}
.rar-player .pl-ui{
  display:flex;align-items:center;gap:16px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow-sm);
}
.pl-toggle{
  width:52px;height:52px;flex-shrink:0;border-radius:50%;cursor:pointer;
  border:0;background:var(--signal);color:#fff;
  display:grid;place-items:center;transition:.15s;
}
.pl-toggle:hover{background:var(--signal-d)}
/* CSS triangle, so the control needs no icon request and no inline SVG swap. */
.ico-play{
  width:0;height:0;margin-left:3px;
  border-left:15px solid currentColor;
  border-top:9px solid transparent;border-bottom:9px solid transparent;
}
.rar-player.is-playing .ico-play{
  width:14px;height:16px;margin-left:0;border:0;
  background:linear-gradient(to right,currentColor 0 4px,transparent 4px 10px,currentColor 10px 14px);
}
.pl-track{flex:1;min-width:0}
.pl-seek{
  width:100%;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;
}
.pl-seek::-webkit-slider-runnable-track{height:6px;border-radius:100px;background:var(--surface-2)}
.pl-seek::-moz-range-track{height:6px;border-radius:100px;background:var(--surface-2)}
.pl-seek::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-5px;
  border-radius:50%;background:var(--signal);border:2px solid var(--bg);box-shadow:var(--shadow-sm);
}
.pl-seek::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--signal);
  border:2px solid var(--bg);box-shadow:var(--shadow-sm);
}
.pl-seek:focus-visible{outline:3px solid var(--ink-2);outline-offset:4px;border-radius:100px}
.pl-time{
  display:flex;gap:6px;margin:8px 0 0;font-size:12.5px;color:var(--tx-2);
  font-variant-numeric:tabular-nums;
}

/* --- no audio ------------------------------------------------------------ */
/* Small and quiet: an absence must not out-shout the transcript beneath it. */
.rar-noaudio{
  display:flex;align-items:flex-start;gap:10px;margin:0 0 30px;
  padding:12px 14px;border-radius:11px;background:var(--surface);
  font-size:13.5px;color:var(--tx-2);line-height:1.5;
}
.rar-noaudio svg{flex-shrink:0;margin-top:2px;opacity:.7}
.rar-noaudio strong{display:block;color:var(--tx);font-size:14px}

/* --- transcript ---------------------------------------------------------- */
/* Reading matter, not disabled form content: generous measure and leading. */
.rar-transcript{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--signal);
  border-radius:var(--radius);padding:22px 24px;
  font-size:16.5px;line-height:1.75;color:var(--tx);max-width:68ch;
}
.rar-transcript mark{
  background:var(--signal-soft);color:var(--signal);font-weight:700;
  padding:1px 4px;border-radius:4px;
  /* Underlined as well as coloured, so the match survives greyscale. */
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px;
}
.script-why{
  display:flex;align-items:center;gap:7px;margin:0 0 10px;
  font-size:13px;color:var(--signal);font-weight:600;
}
.script-src{margin:10px 0 0;font-size:12.5px;color:var(--tx-2)}
.script-src a{margin-left:6px}

/* --- where it aired ------------------------------------------------------ */
.rar-airlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rar-airlist li{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:13px 16px;border:1px solid var(--line);border-radius:11px;background:var(--bg);
}
.rar-airlist .freq{
  font-family:var(--font-display);font-weight:800;font-size:15px;
  color:var(--ink-2);text-decoration:none;
}
.rar-airlist .freq:hover{color:var(--signal)}
.rar-airlist .sub{font-size:13.5px;color:var(--tx-2)}

/* --- advertiser card ----------------------------------------------------- */
.rar-callcard .cc-name{
  font-family:var(--font-display);font-weight:800;font-size:16px;
  margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line);color:var(--tx);
}
.rar-callcard .cc-row{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:14px;color:var(--tx-2)}
.rar-callcard .cc-row svg{flex-shrink:0;opacity:.75}
.rar-callcard .cc-claim{
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;color:var(--tx-2);
}

/* --- related list -------------------------------------------------------- */
.rar-list{display:grid;gap:12px}
.rar-listrow{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;transition:border-color .15s ease,box-shadow .15s ease;
}
.rar-listrow:hover{border-color:var(--surface-2);box-shadow:var(--shadow-sm)}
.lr-main{min-width:0;flex:1 1 320px}
.lr-main h3{font-size:17px;margin:0 0 3px;letter-spacing:-.02em}
.lr-main h3 a{color:var(--tx);text-decoration:none}
.lr-main h3 a:hover{color:var(--signal)}
.lr-meta,.lr-aired{margin:0;font-size:13px;color:var(--tx-2)}
.lr-aired{font-weight:600;color:var(--ink-2)}
.lr-script{margin:7px 0 0;font-size:13.5px;color:var(--tx-2);font-style:italic}
.lr-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lr-num{font-family:var(--font-display);font-weight:900;font-size:15px;letter-spacing:-.02em;color:var(--tx)}

/* --- mobile call bar ----------------------------------------------------- */
/* Rendered only when a number exists, and only shown on small screens. */
.rar-stickycall{display:none}
@media(max-width:760px){
  .rar-stickycall{
    display:block;position:sticky;bottom:0;z-index:30;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--bg) 92%,transparent);
    backdrop-filter:blur(10px);border-top:1px solid var(--line);
  }
  .rar-stickycall .btn{width:100%;justify-content:center}
}

@media(max-width:900px){
  .rar-single-main h1{font-size:clamp(26px,7vw,34px)}
  .rar-transcript{padding:18px;font-size:15.5px}
  .rar-listrow{gap:12px}
  .lr-act{width:100%;justify-content:space-between}
}

/* --- match-sound toggle --------------------------------------------------- */
/* Sits in the legal strip: a preference, not an emergency control. */
.sound-toggle{
  display:inline-flex;align-items:center;gap:7px;
  font:inherit;font-size:13px;cursor:pointer;
  background:none;border:0;padding:0;color:inherit;opacity:.75;
}
.sound-toggle:hover{opacity:1}
.sound-toggle svg{opacity:.8}
.sound-toggle [data-rar-sound-label]{
  font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.08em;
  border:1px solid currentColor;border-radius:100px;padding:1px 7px;opacity:.8;
}
.sound-toggle[aria-pressed="false"]{opacity:.5}
.sound-toggle[aria-pressed="false"] [data-rar-sound-label]{opacity:.6}

/* --- nav signal bars ------------------------------------------------------ */
/* Still until you hover, or until you are in that section — then they play,
   using the same bar idiom as the logo mark and the play button. */
.site-nav .navwave{
  display:inline-flex;align-items:flex-end;gap:2px;height:11px;
  margin-right:8px;vertical-align:-1px;
}
.site-nav .navwave i{
  width:2px;border-radius:1px;background:currentColor;display:block;
  transform-origin:bottom;opacity:.4;transition:opacity .15s ease;
}
.site-nav .navwave i:nth-child(1){height:5px}
.site-nav .navwave i:nth-child(2){height:11px;animation-delay:.12s}
.site-nav .navwave i:nth-child(3){height:8px;animation-delay:.24s}
.site-nav a:hover .navwave i,
.site-nav .sub-toggle:hover .navwave i,
.site-nav a.is-current .navwave i,
.site-nav .has-sub.is-current > .sub-toggle .navwave i,
.site-nav .current-menu-item > a .navwave i{
  opacity:1;
  animation:rar-navwave .85s ease-in-out infinite;
}
/* scaleY, not height: it animates on the compositor and never reflows the nav. */
@keyframes rar-navwave{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}

@media (prefers-reduced-motion: reduce){
  .site-nav .navwave i{animation:none!important}
}

/* --- contact: which listing this is about --------------------------------- */
/* Only rendered when a listing sent them here; a plain contact visit sees none
   of it. */
.rar-ref{
  display:grid;gap:3px;margin-bottom:20px;padding:14px 16px;
  background:var(--signal-soft);border:1px solid var(--line);
  border-left:3px solid var(--signal);border-radius:11px;
}
.rar-ref .lbl{
  font-family:var(--font-display);font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tx-2);
}
.rar-ref a{font-family:var(--font-display);font-weight:800;font-size:15.5px;color:var(--tx);text-decoration:none}
.rar-ref a:hover{color:var(--signal)}
.rar-ref .sub{font-size:13px;color:var(--tx-2)}

/* --- play affordance ------------------------------------------------------ */
/* At rest a triangle, because three bars read as "this is audio" rather than
   "press this". While playing the bars take over and dance, so the state change
   is unmistakable — and it matches the triangle on the listing page's player.
   Pure CSS, so no markup changed and every existing button inherits it. */
.rar-play::before{
  content:"";width:0;height:0;flex-shrink:0;margin-left:2px;
  border-left:10px solid currentColor;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
}
.rar-play .bars{display:none}
.rar-play.is-playing::before{display:none}
.rar-play.is-playing .bars{display:flex}
.rar-play.card-play::before{margin-left:0}