/* ==========================================================================
   Radio Ad Repeat — main stylesheet
   Palette: Signal Clear · Type: Space Grotesk + 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:'Space Grotesk',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.05;            /* shared heading line-height — client spec 2026-09-10 */
  --h-ls:-.05em;          /* shared heading tracking — client spec 2026-09-10 */

  /* 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 */

  /* ⚠️ 700 is Space Grotesk's TOP weight. These were 900/800/800 for Archivo;
     left at 900 the browser clamps h1 and h2 to the same 700 outline and the
     weight step between them silently disappears. Size and tracking carry the
     hierarchy instead — which is how the page already reads at 68px vs 42px.
     ⚠️ These defaults are mirrored in RAR_Appearance::type_settings(); css()
     compares against them to decide whether to emit anything, so the two must
     be changed together or a client's choice is written or dropped wrongly. */
  --h1-min:38px; --h1-max:68px; --h1-w:700; --h1-ls:-.05em;
  --h2-min:26px; --h2-max:42px; --h2-w:700; --h2-ls:-.05em;
  --h3-min:18px; --h3-max:22px; --h3-w:700; --h3-ls:-.05em;


  /* The site is light-only by design. Declaring the scheme keeps the browser's
     own widgets — form fields, selects, scrollbars — light on a device set to
     dark, which is where an unstated scheme leaves dark inputs on white cards. */
  color-scheme:light;
}

/* --- self-hosted fonts (latin subset, variable) -------------------------- */
/* ⚠️ 300–700 is the file's REAL axis, read off the woff2 — not a range we
   would like it to have. Declared wider, the browser silently clamps (or
   synthesises), which is how Lato once rendered body copy at 400 in its 700
   outline with no error anywhere. See assets/fonts/README.md. */
@font-face{
  font-family:'Space Grotesk';
  src:url('../fonts/spacegrotesk.woff2') format('woff2-variations'),
      url('../fonts/spacegrotesk.woff2') format('woff2');
  font-weight:300 700; 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}
/* --ink-2 is a mid navy: on the four navy surfaces it is all but invisible, so
   a keyboard user loses the focus ring exactly where the page is darkest.
   These are the only places that need the light variant. */
.rar-evidence :focus-visible,
.rar-closing :focus-visible,
.rar-overlay :focus-visible,
.site-footer :focus-visible{outline-color:var(--signal-lt)}
.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);
}
/* A minimum height rather than fixed padding. At the 48px logo the design now
   specifies this lands at 78px, and a client who sets a taller logo in the
   Customizer gets a taller header rather than a squashed one. */
.site-header .inner{
  max-width:var(--wrap);margin:0 auto;padding:12px 22px;min-height:78px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
@media(max-width:900px){.site-header .inner{padding:10px 18px;min-height:66px}}
/* Scrolled: a shadow, and nothing else. A header that CHANGES HEIGHT on scroll
   is the obvious next move and the wrong one — `position:sticky` stays in flow,
   so shrinking it shifts the whole document by the difference. A shadow costs
   no layout at all. */
/* Opaque once scrolled. The resting header is 88% white with a backdrop blur,
   which is fine over the page's light bands — but the navy evidence section
   sliding under it read straight through as a dark bar across the top of the
   viewport. Nothing to blur once it is solid, so the filter goes too. */
.site-header.is-stuck{
  background:var(--bg);backdrop-filter:none;
  box-shadow:0 1px 0 var(--line),0 8px 24px rgba(11,27,43,.06);
  border-bottom-color:transparent;
}
.site-logo{
  font-family:var(--font-display);font-weight:700;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)}
/* 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 .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:2px;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 11px;border-radius:9px;
  font-weight:500;transition:color .12s ease,background-color .12s ease;
}
.site-nav a:not(.nav-cta):hover{color:var(--ink);background:transparent}
.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)}
/* Icon-only, so it needs a square of its own rather than the text padding. */
.nav-search{display:grid;place-items:center;width:40px;height:40px;padding:0}
@media(max-width:1080px){.nav-search{display:none}}
/* --- 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}
/* ⚠️ 1060px, not 680. Seven top-level items — one Browse menu, three
   destinations, Support, sign-in and the CTA — measure 822px beside a 160px
   wordmark: what a 1024px tablet cannot hold and a 1100px laptop can. It was
   1180 while Browse and Locations were two items, each with a glyph. */
@media(max-width:1060px){
  .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 --------------------------------------------------------------- */
/* One control, a lot of air. The opening is sized in viewport height rather
   than padding so the search box lands in the same place on a laptop and a
   desktop, and nothing else is allowed into the space — the emptiness is the
   instruction. svh, not vh, so mobile browser chrome cannot push the box under
   the fold; the vh line above it is the fallback for older engines. */
/* ⚠️ The outer padding is the give in this composition, not the internal gaps.
   The rhythm the brief asked for between eyebrow, H1, copy, search and the
   reassurance row adds ~80px of content height; spending that AND the old outer
   padding put the hero at 786px, well past the 650–720 target. So the internal
   gaps stand as specified and the outer frame gives the height back. */
.rar-hero{
  position:relative;display:flex;align-items:center;
  padding:clamp(60px,6.6vw,92px) 0 clamp(56px,6vw,86px);
  text-align:center;overflow:hidden;
}
/* Only the homepage. The ten inner pages reuse this hero with a heading and a
   search box and nothing else, so a 680px floor there is not breathing room —
   it is a hole under the search box. */
.rar-hero.is-home{
  min-height:min(700px,88vh);
  min-height:min(700px,88svh);
}
/* A brand cue, not a headline: the short rule does the work an icon would,
   without adding another glyph above the biggest type on the site. */
.rar-eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-body);font-weight:500;font-size:11.5px;
  letter-spacing:.3em;text-transform:uppercase;
  color:color-mix(in srgb, var(--ink) 62%, transparent);
  margin-bottom:clamp(22px,2.9vw,34px);
}
.rar-eyebrow .rule{width:26px;height:2px;border-radius:2px;background:var(--signal);flex-shrink:0}

/* 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;width:100%}
/* ENVIRONMENTAL EDGES.
   Two washes, always present and costing nothing: a warm one on the left (the
   dashboard glow of a car at the moment you hear the ad) and a cool one on the
   right (the studio it came from). They are colour temperature, not
   illustration — nothing here draws a car or a microphone, and both are gone
   long before they reach the headline.
   ⚠️ They are the FLOOR, not the finish. Set the two photographs under
   Customizer → Appearance → Homepage hero and they layer over these. */
/* The homepage hero drops the shared centre glow: the environment now lives at
   the edges, and a tint in the middle is the one thing the composition must not
   have. Inner pages keep it — they have no edge treatment of their own. */
.rar-hero.is-home::before{display:none}
.rar-hero.is-home::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(58% 78% at -6% 42%,color-mix(in srgb, var(--signal) 13%, transparent),transparent 68%),
    radial-gradient(52% 74% at 104% 58%,color-mix(in srgb, var(--ink-2) 15%, transparent),transparent 66%);
}
@media(max-width:760px){
  /* On a phone the two washes come in from the top corners rather than the
     sides — there are no sides — and stop well above the headline. */
  .rar-hero.is-home::after{
    background:
      radial-gradient(70% 34% at 0% 0%,color-mix(in srgb, var(--signal) 14%, transparent),transparent 70%),
      radial-gradient(70% 34% at 100% 0%,color-mix(in srgb, var(--ink-2) 15%, transparent),transparent 70%);
  }
}

/* Optional atmospheric photography, anchored off the far edges and gone by the
   time it reaches the headline. Heavy blur + low opacity + a mask that fades to
   nothing: context, never a background image. Absent by default — the hero is
   designed to read as finished with neither of them set. */
/* ⚠️ Recognisable, not mush. The first cut ran blur(22px) at 24% — "context,
   never a background image" taken so far that a car became a beige smear and
   the slots looked empty even when filled. Paul's reference shows the
   dashboard and the ON AIR sign as things you can NAME, softened and fading
   to nothing by the time they reach the headline. So: a light blur that keeps
   edges, near-full opacity at the viewport edge, and a mask that does the
   fading — the mask is what protects the centre, not the opacity. */
.rar-ambient .edge{
  position:absolute;top:0;bottom:0;width:min(36vw,520px);
  height:100%;object-fit:cover;pointer-events:none;
  opacity:.74;filter:blur(2.5px) saturate(.88) brightness(1.04);
}
.rar-ambient .edge-left{
  left:0;object-position:60% 50%;
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 14%,rgba(0,0,0,.5) 42%,transparent 74%);
  mask-image:linear-gradient(to right,#000 0%,#000 14%,rgba(0,0,0,.5) 42%,transparent 74%);
}
.rar-ambient .edge-right{
  /* The ON AIR sign sits mid-frame in the photograph. Covering the full hero
     height scaled it ~1.5× and put its letters under the headline; anchoring
     off-centre lost it altogether. So the right slot is SHORT — 64% of the
     hero, top-anchored — which scales the frame down until the whole sign
     fits the slice, small and high, the way a sign hangs in a studio. A
     second mask fades its bottom edge so the short box has no floor. */
  right:0;bottom:auto;height:56%;object-position:38% 50%;
  -webkit-mask-image:
    linear-gradient(to left,#000 0%,#000 14%,rgba(0,0,0,.5) 42%,transparent 74%),
    linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to left,#000 0%,#000 14%,rgba(0,0,0,.5) 42%,transparent 74%),
    linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);
  mask-composite:intersect;
}
/* Between 900 and 1180 the columns beside the search box are narrow; keep the
   photographs but pull them in so they are gone well before the headline. */
@media(max-width:1180px){
  .rar-ambient .edge{width:min(30vw,360px);opacity:.7}
}
/* On a phone the edges reach the text before they have faded, so they go. */
/* ⚠️ On a phone the photographs become two SHOULDERS at the top corners —
   150px tall, gone by 110px where the headline begins, masked to the centre
   and to their own floor. Full-height side slots would run under the text;
   an all-white hero was the complaint. The measurements: at 390px the h1
   starts 110px into the hero, so the mask reaches zero before that. */
@media(max-width:900px){
  .rar-ambient .edge{
    display:block;width:56vw;height:150px;bottom:auto;opacity:.5;
    filter:blur(2px) saturate(.85) brightness(1.06);
  }
  .rar-ambient .edge-left{
    object-position:60% 45%;
    -webkit-mask-image:
      linear-gradient(to right,#000 0%,rgba(0,0,0,.6) 45%,transparent 85%),
      linear-gradient(to bottom,#000 0%,rgba(0,0,0,.7) 40%,transparent 74%);
    -webkit-mask-composite:source-in;
    mask-image:
      linear-gradient(to right,#000 0%,rgba(0,0,0,.6) 45%,transparent 85%),
      linear-gradient(to bottom,#000 0%,rgba(0,0,0,.7) 40%,transparent 74%);
    mask-composite:intersect;
  }
  .rar-ambient .edge-right{
    height:150px;object-position:38% 50%;
    -webkit-mask-image:
      linear-gradient(to left,#000 0%,rgba(0,0,0,.6) 45%,transparent 85%),
      linear-gradient(to bottom,#000 0%,rgba(0,0,0,.7) 40%,transparent 74%);
    -webkit-mask-composite:source-in;
    mask-image:
      linear-gradient(to left,#000 0%,rgba(0,0,0,.6) 45%,transparent 85%),
      linear-gradient(to bottom,#000 0%,rgba(0,0,0,.7) 40%,transparent 74%);
    mask-composite:intersect;
  }
}
.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}}
/* Tighter than the global heading line-height, but still driven BY it — a
   hardcoded value here would quietly disconnect the Customizer's line-height
   control from the biggest heading on the site. */
/* ⚠️ Exactly the shared rhythm, no hero-only offset. Paul's spec (2026-09-10)
   is one line-height for every heading — 1.05 — and a hero running tighter
   than that was the first thing to contradict it. Still Customizer-driven. */
.rar-hero h1{line-height:var(--h-lh);margin-bottom:.3em;text-wrap:balance}
.rar-hero h1 .accent{color:var(--signal);display:block}
.rar-hero p.sub{
  color:var(--tx-2);font-size:clamp(16.5px,1.8vw,19px);line-height:1.55;
  max-width:700px;margin:0 auto clamp(36px,4.2vw,50px);
}

/* --- search ------------------------------------------------------------- */
/* The primary product surface, not a site search box: 68px tall and 760 wide,
   which is the largest it can be before the placeholder stops reading as one
   sentence. Every number below adds up to that height — 48px controls, 8px
   padding either side, 2px border either side. */
/* 800px and 72px tall: the largest this can be before the placeholder stops
   reading as one sentence. Every number below adds up to that height — 52px
   controls, 8px padding either side, 2px border either side. */
.rar-search{max-width:min(800px,100%);margin:0 auto}
/* At rest: white, a hairline of ink rather than a grey box, and a shadow soft
   enough to read as lift instead of as a card. 72px tall = 50px controls +
   10px padding either side + a 1px border either side. */
.rar-field{
  display:flex;align-items:center;gap:10px;background:var(--bg);
  border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius:22px;padding:10px 10px 10px 24px;position:relative;
  box-shadow:0 1px 2px rgba(11,27,43,.04),0 10px 34px rgba(11,27,43,.07);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.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:17px;line-height:1.35;
  color:var(--tx);padding:13px 0;
}
.rar-field input::placeholder{color:#93A2B0}
.rar-mic,.rar-go{
  height:50px;border-radius:15px;flex-shrink:0;cursor:pointer;
  display:grid;place-items:center;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);transition:.15s;
}
/* Cool grey with a navy glyph, NOT orange. Orange is the one colour that means
   "this is the action" on this page, and a permanently glowing microphone spends
   that meaning on a secondary control. */
.rar-mic{width:50px}
.rar-mic:hover{background:var(--surface-2);border-color:var(--ink-2);color:var(--ink)}
.rar-go{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:auto;min-width:148px;padding:0 22px;
  background:var(--signal);border-color:var(--signal);color:#fff;
  font-family:var(--font-display);font-weight:800;font-size:15.5px;letter-spacing:-.01em;
}
.rar-go .rar-i{transition:transform .16s ease}
.rar-go:hover{background:var(--signal-d)}
.rar-go:hover .rar-i{transform:translateX(3px)}

/* One restrained line, not four chips plus a mic hint. Each label IS the
   example; the pill styling is stripped back so nothing under the field
   competes with the field. */
/* Soft chips, no borders, no shadows. Their job is to teach how forgiving the
   search is, so each label is vaguer than the last — and clicking one drops a
   fuller plain-English sentence into the field, which teaches the same thing
   twice. */
.rar-try{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin:clamp(18px,2.2vw,24px) 0 0;font-size:13.5px;color:var(--tx-2);
}
.rar-try .lbl{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;
  color:var(--tx-2);margin-right:2px;
}
.rar-try .rar-chip{
  background:var(--surface);border:0;padding:8px 15px;border-radius:10px;
  font-family:var(--font-body);font-size:13.5px;color:var(--tx-2);cursor:pointer;
  transition:background .15s,color .15s;
}
.rar-try .rar-chip:hover{background:var(--surface-2);color:var(--tx);transform:none}

/* Three plain facts, not a feature section — no boxes, no borders, no shadows.
   It answers "what happens if I type something vague" before anyone has to try
   it, and it is deliberately the quietest thing in the hero. */
/* Reassurance, not a feature row: it sits at the bottom of the hero's
   hierarchy and is styled to stay there. Everything here is one step quieter
   than it looks like it wants to be — smaller icons, smaller labels, a
   separator that barely exists. */
.rar-benefits{
  list-style:none;margin:clamp(52px,6.2vw,72px) auto 0;padding:0;max-width:690px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.rar-benefits li{display:flex;align-items:center;justify-content:center;gap:10px;text-align:left}
.rar-benefits li + li{border-left:1px solid color-mix(in srgb, var(--line) 60%, transparent)}
.rar-benefits .bico{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:color-mix(in srgb, var(--signal-soft) 72%, transparent);color:var(--signal);
}
.rar-benefits .btxt strong{
  display:block;font-family:var(--font-display);font-weight:700;font-size:13.5px;
  letter-spacing:-.015em;color:var(--tx-2);
}
.rar-benefits .btxt > span{
  display:block;font-size:12.5px;margin-top:1px;
  color:color-mix(in srgb, var(--tx-2) 76%, transparent);
}
/* ⚠️ Three columns on a phone too, icon over label, no descriptions — not
   three stacked rows with dividers. Stacked, the reassurance row was 212px of
   a 900px hero: a quiet footnote had become the tallest thing under the
   search box. The descriptions return at 721px where there is room to read
   them beside the icon. */
@media(max-width:720px){
  .rar-benefits{grid-template-columns:repeat(3,1fr);gap:6px;max-width:400px;margin-top:clamp(30px,8vw,44px)}
  .rar-benefits li{flex-direction:column;justify-content:flex-start;gap:7px;padding:0 4px;text-align:center}
  .rar-benefits li + li{border-left:0}
  .rar-benefits .bico{width:34px;height:34px}
  .rar-benefits .btxt strong{font-size:12.5px;color:var(--tx)}
  .rar-benefits .btxt > span{display:none}
}

.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)}

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

/* On a phone the field has ~160px left for text after two 48px controls and
   22px of lead-in. Reclaiming the padding and 4px per control buys back most of
   a word, which is the difference between reading the placeholder as a sentence
   and reading it as a fragment. */
/* Two rows on a phone, which is also the order the brief asks for: the field,
   then the actions. Keeping one row left roughly 120px for typing after a
   148px Search button and a 52px mic — the placeholder read "What did " and
   the input was the smallest thing in the hero. */
@media(max-width:560px){
  .rar-field{flex-wrap:wrap;padding:10px;gap:10px;border-radius:20px}
  .rar-field .icon{margin-left:8px}
  .rar-field input{flex:1 1 auto;font-size:16.5px;padding:8px 0;min-width:0}
  .rar-field .icon,.rar-field input{order:1}
  .rar-mic,.rar-go{order:2;height:50px}
  .rar-mic{width:50px;flex:0 0 50px}
  /* The action takes the rest of the row: on a phone it is the only button
     that matters, and a thumb should not have to aim for it. */
  .rar-go{flex:1 1 auto;min-width:0}
  /* Three examples, not five. Five wrapped to three rows and pushed the
     reassurance row — and everything after it — off the first screen. */
  .rar-try .rar-chip:nth-child(n+5){display:none}
  .rar-try{gap:8px}
}

/* --- 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(68px,8.5vw,118px) 0}
.rar-section.is-snug{padding:clamp(58px,6.6vw,96px) 0}
.rar-section.is-tight{padding:clamp(38px,4.2vw,60px) 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)}
/* The third ground. Reserved for a band that changes the subject rather than
   continuing it — on How It Works, the point where the page stops selling and
   starts saying what it cannot do.
   ⚠️ No border. The ground change IS the separation; hairlines top and bottom
   read as accidental rules once two of them land in the same scroll. */
.rar-section.soft{background:var(--signal-soft)}
.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)}
/* Directory sections read left-aligned: they introduce a list, and a centred
   heading over a left-aligned list has nothing to line up with. */
.sec-head.is-left{text-align:left;max-width:56ch;margin-left:0;margin-right:0}
.sec-head h2 .accent{color:var(--signal)}
/* The product demonstration is the page's clearest claim, so its heading sits
   a step above an ordinary section head — still driven by the Customizer's H2
   maximum, just multiplied. */
.rar-demo-sec .sec-head h2{font-size:clamp(28px,4.2vw,calc(var(--h2-max) * 1.14))}
/* ⚠️ A ch-based measure is wrong here: `ch` is sized off the BODY font, so a
   22ch cap that reads fine over 17px copy strangled a 48px heading into five
   short lines. The heading gets room in px; the paragraph under it keeps a
   reading measure of its own. */
.rar-demo-sec .sec-head{max-width:min(680px,100%)}
.rar-demo-sec .sec-head p{max-width:52ch;margin-left:auto;margin-right:auto}
/* Balanced, so a heading never leaves one orphaned word on its own line — the
   failure is worst at exactly the widths where the heading is largest relative
   to the column. Ignored by engines that do not support it; nothing depends
   on it. */
.sec-head h2,.break-head h2,.ev-head h2{text-wrap:balance}
/* ⚠️ Scoped to .sec-head, this silently stopped applying the moment a section
   grew a head of its own: `.ev-head .eyebrow` rendered as plain lowercase body
   text with no tracking, and the `.rule` mark inside it was an unstyled span
   with no dimensions at all. The eyebrow is a component, not a child of one. */
.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;
}
.eyebrow .rule{
  display:inline-block;width:24px;height:2px;border-radius:2px;
  background:currentColor;margin-right:10px;vertical-align:middle;
}
.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}
/* Hierarchy is deliberately bottom-heavy. Everything above the payoff exists
   only to convince you this is the right number, so the identifying facts are
   quiet and the number is the largest thing in the card. */
/* Card titles carry the heading spec too (Paul, 2026-09-10): the shared
   line-height and tracking, no private rhythm. */
.rar-card h3{font-size:19px;line-height:var(--h-lh);letter-spacing:var(--h3-ls);margin:0 0 3px}
.rar-card .meta{font-size:13px;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-strength.is-weak{color:var(--tx-2);background:var(--surface);border-color:var(--line)}
/* When the directory came up short, the web suggestions lead and the weak
   cards follow under their own honest heading. */
/* The "closest" group head: aligned to the results column, a real heading
   for a real group — and the cards under it are deliberately the quietest
   thing on the page. */
.rar-closest{max-width:740px;margin:30px auto 12px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rar-closest b{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:var(--h3-ls);color:var(--tx)}
.rar-closest span{font-size:13.5px;color:var(--tx-2)}
/* Weak results, compact and muted: surface ground, no shadow, small number,
   ghost Call. The hierarchy is the message — a strong match is the only thing
   on this page allowed to look like the answer. */
.rar-results.is-closest .rar-card{background:var(--surface);border-color:var(--line);box-shadow:none;padding:16px 18px;margin-bottom:10px}
.rar-results.is-closest .rar-card h3{font-size:16.5px}
.rar-results.is-closest .rar-card .rar-why{font-size:13.5px}
.rar-results.is-closest .rar-payoff{margin-top:12px;padding-top:10px}
.rar-results.is-closest .rar-phone{font-size:20px}
.rar-results.is-closest .rar-payoff .btn{background:var(--bg);color:var(--ink);border:1px solid var(--line);box-shadow:none;padding:9px 14px;font-size:14px}
.rar-results.is-closest .rar-payoff .btn:hover{border-color:var(--ink)}
.rar-results.is-closest .rar-second{margin-top:10px}
/* The number and Call are one unit because they are one thought. Splitting
   them — number here, a full-width Call button three elements later — made the
   number read as just another field. */
.rar-quote{
  margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--tx-2);font-style:italic;
}
.rar-quote 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-payoff{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
}
.rar-phone{
  font-family:var(--font-display);font-size:clamp(26px,3.6vw,30px);font-weight:800;
  letter-spacing:-.03em;line-height:1;color:var(--tx);text-decoration:none;
  font-variant-numeric:tabular-nums;margin:0;
}
.rar-phone:hover{color:var(--signal)}
.rar-payoff .btn{flex-shrink:0}
.rar-second{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px}
.rar-more{
  font-family:var(--font-body);font-size:13.5px;color:var(--tx-2);
  background:none;border:0;padding:0;cursor:pointer;text-decoration:none;
}
.rar-more:hover{color:var(--signal)}
.rar-more.is-btn{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.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;
}
/* Only the edit-listing form still uses the native player — there it IS the
   right control, because the member is checking the file they uploaded. */
.rar-audio{width:100%;margin:4px 0 6px}

/* ⚠️ The "directory came up short" block is a SECTION, not a caption. It
   keeps its lavender identity — "elsewhere on the internet", never a listing —
   but says so at heading size, because the small grey line it replaced was
   being read straight past and the weak cards beneath it were taken for the
   answer. Aligned to the results column. */
.rar-fallback{
  border:2px solid #D9CCF2;background:#FAF7FF;color:#3D3452;
  border-radius:var(--radius-lg);padding:clamp(22px,2.6vw,30px);margin:22px auto 0;max-width:740px;
}
.rar-fallback .fb-h{
  margin:0 0 8px;font-size:clamp(22px,2.6vw,27px);line-height:var(--h-lh);letter-spacing:var(--h2-ls);color:#2A2340;
}
.rar-fallback .fb-sub{margin:0 0 16px;font-size:15px;line-height:1.6;color:#5B5273;max-width:60ch}
.rar-fallback.is-quiet .fb-h{color:var(--tx)}
.rar-fallback.is-quiet .fb-sub{color:var(--tx-2)}
/* Deliberately unlike a result card: no border radius flourish, no shadow, no
   Call. It has to read as "elsewhere on the internet", not as a listing. */
.rar-weblist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:0}
.rar-weblist li{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-top:1px solid #E8DFF7}
.rar-weblist a,.rar-weblist .wl-name{
  font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:var(--h3-ls);
  color:#2A2340;text-decoration:none;
}
.rar-weblist a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:#C9B7E8}
.rar-weblist a:hover{color:#2A2340}
.rar-weblist .wl-ext{font-size:12px;opacity:.7;margin-left:3px}
.rar-weblist .wl-meta{font-size:13px;color:#6B5F86}
.rar-fallback.is-quiet{border-style:solid;border-color:var(--line);background:var(--surface);color:var(--tx-2)}
.rar-fallback.is-quiet .lbl{color:var(--tx-2);background:var(--bg);border-color:var(--line)}

.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 ------------------------------------------------------ */
/* The signature interaction. Near-full-screen and almost empty: at this moment
   the only two things that matter are "we are hearing you" and "here is the way
   out", so nothing else is on the screen to look at. */
.rar-overlay{
  position:fixed;inset:0;background:#08111B;z-index:100;
  display:none;align-items:center;justify-content:center;padding:24px;
}
.rar-overlay.is-open{display:flex}
.rar-voice-x{
  position:absolute;top:clamp(14px,2.4vw,26px);right:clamp(14px,2.4vw,26px);
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#C6D4DF;
  transition:background .15s,color .15s;
}
.rar-voice-x:hover{background:rgba(255,255,255,.14);color:#fff}
.rar-voice{width:100%;max-width:640px;text-align:center;color:#fff}
.rar-voice h2{color:#fff;font-size:clamp(23px,4.4vw,32px);letter-spacing:var(--h2-ls)}
.rar-wave{
  display:flex;align-items:center;justify-content:center;gap:4px;
  height:104px;margin:clamp(26px,4vw,38px) 0;
}
.rar-wave i{
  width:4px;height:8px;border-radius:3px;display:block;
  background:linear-gradient(180deg,var(--signal),var(--signal-lt));
}
/* A three-dot breath for the two moments the user is waiting on us. */
.rar-pulse{display:flex;justify-content:center;gap:9px;margin:0 auto 26px}
.rar-pulse i{
  width:11px;height:11px;border-radius:50%;background:var(--signal);display:block;
  animation:rar-breath 1.25s ease-in-out infinite;
}
.rar-pulse i:nth-child(2){animation-delay:.16s}
.rar-pulse i:nth-child(3){animation-delay:.32s}
@keyframes rar-breath{0%,100%{opacity:.25;transform:scale(.75)}50%{opacity:1;transform:scale(1)}}
.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:19px;text-align:left;min-height:92px;
  color:#E9EEF3;font-size:17px;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}

/* ⚠️ Focus, not only hover. Hover is the only affordance a mouse gets, but it
   is the ONLY affordance nothing else gets — a keyboard user needs the same row
   to come forward when they reach it. */
table.rar-table tbody tr:focus-within{background:var(--surface)}
/* A5 — information, not disabled UI. At --tx-2 it read as greyed-out chrome;
   this is a fact about the listing and should look like one. */
.rar-table .c-nophone{font-size:13.5px;color:var(--tx);opacity:.75}
/* A4 — recognition evidence, not a pull quote. Regular weight in a muted
   blue-grey: still clearly words from the commercial, but subordinate to the
   advertiser above it and the number beside it. Two lines, so one long
   transcript cannot make its row tower over the rest. */
.rar-table .c-hook{
  font-style:normal;color:var(--ink-2);opacity:.72;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* A3 — a tiny directional cue on the name, on hover AND focus. Play and Call
   stay separate controls; nothing here wraps the row in one giant link.
   ⚠️ Never on `.c-stretch`. That link IS the row (its ::after is the inset:0
   overlay that makes the whole row clickable), and this rule out-specifies it
   — so the "→" was painted into the overlay at the row's top-left corner, on
   top of the second letter of every station and city name, and the row click
   died with it. Those tables carry their own "Browse →" hint instead. */
.rar-table .c-name a:not(.c-stretch){position:relative}
.rar-table .c-name a:not(.c-stretch)::after{
  content:"→";margin-left:7px;opacity:0;display:inline-block;
  transform:translateX(-3px);transition:opacity .16s ease,transform .16s ease;
}
.rar-table tbody tr:hover .c-name a:not(.c-stretch)::after,
.rar-table .c-name a:not(.c-stretch):focus-visible::after{opacity:1;transform:translateX(0)}
table.rar-table tbody tr:hover .c-name a,
table.rar-table tbody tr:focus-within .c-name a{color:var(--signal)}

@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%}

  /* A record, not a squeezed table row. Advertiser first, then how to
     recognise it, then the number — the same order the product uses
     everywhere else, and the reason the desktop table is not simply scaled
     down onto a phone. */
  table.rar-table tbody tr{
    position:relative;padding:18px;border-bottom:1px solid var(--line);
  }
  table.rar-table tbody td.c-play{
    position:absolute;top:16px;right:16px;padding:0;width:auto;
  }
  table.rar-table tbody td.c-name{padding-right:96px}
  table.rar-table .c-name a{font-size:17px}
  table.rar-table .c-hook{margin-top:6px}
  table.rar-table tbody td[data-label="Phone"]{
    display:block;padding:12px 0 0;
  }
  table.rar-table tbody td[data-label="Phone"]::before{display:none}
  table.rar-table .c-phone{font-size:23px}
}



/* --- 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:1060px){ .rar-burger{display:grid} }
/* ⚠️ While the drawer is open the header must sit ABOVE the backdrop. It sat
   under it (header z 40, drawer z 45), which buried the only control anyone
   recognises for closing a menu — the panel then survived every resize and
   read as "open by default". The bars fold into an X so the same button is
   visibly the close. */
body.rar-nav-open .site-header{z-index:46}
.rar-burger .bars i{transition:transform .2s ease,opacity .2s ease}
.rar-burger[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.rar-burger[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.rar-burger[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* 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}
/* Honeypot: off-screen, never display:none (some bots skip hidden inputs). */
.rar-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.cf-turnstile{margin:6px 0 2px}
/* The search quick-link lives wherever the burger does: the nav's own search
   icon is inside the hidden list below 1060px. */
@media(max-width:1060px){
  .rar-quick-search{
    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-search:hover,.rar-quick-search:focus-visible{border-color:var(--ink);color:var(--signal)}
}
@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)}
/* A group is a <details>: a row that looks like the section label it used to
   be, a chevron, and its links only once opened. */
.drawer-group{margin:4px 0 0}
.drawer-group summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  padding:14px 12px;border-radius:11px;
  font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx-2);
}
.drawer-group summary::-webkit-details-marker{display:none}
.drawer-group summary:hover{background:var(--surface)}
.drawer-group summary i{
  width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease;
}
.drawer-group[open] summary i{transform:rotate(-135deg) translate(-2px,-2px)}
.drawer-group[open] summary{color:var(--tx)}
/* Inside <details> the links are no longer flex children of the panel, so
   they would flow inline; stack them like every other row. */
.drawer-group > a{display:block;padding-left:24px}
.drawer-group > a[aria-current="page"]{color:var(--signal)}
.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:1060px){
  .site-nav ul{display:none}
}


/* ==========================================================================
   SEARCH FIELD — states

   What used to be here: a conic-gradient light travelling round the perimeter,
   running permanently. Two problems. It is animation for its own sake on the
   one control the page is built around, and — because the hero input carried
   `autofocus` — the field also painted its border signal-orange on load, so the
   product's primary component looked permanently mid-interaction. Orange has
   one job on this page: it means "this is the action". Spending it on a resting
   state spends the meaning.

   Now: neutral at rest, deliberate on approach, signal only on focus.
   ========================================================================== */
.rar-field:hover{border-color:color-mix(in srgb, var(--ink) 24%, transparent)}
.rar-field:focus-within{
  border-color:var(--signal);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--signal) 13%, transparent),
    0 10px 34px rgba(11,27,43,.08);
}
.rar-field input:focus-visible{outline:none}

/* ==========================================================================
   EVIDENCE BAND — radio industry numbers
   ========================================================================== */
.rar-evidence{
  background:var(--ink);color:#fff;position:relative;overflow:hidden;
  padding:clamp(76px,9.4vw,128px) 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}
/* The homepage's one editorial moment. The headline IS the argument; the
   figures under it are footnotes that let a reader check it, which is why they
   are a row of columns on a rule rather than three glowing cards competing
   with the sentence above them. */
/* The loudest thing on the page, and the only place that is allowed to be.
   Wider measure and more scale than before — an editorial statement that has to
   carry a whole dark band cannot be sized like a section heading. */
.ev-head{margin:0 0 clamp(48px,5.6vw,72px)}
.ev-head h2{
  font-size:clamp(32px,6vw,calc(var(--h2-max) * 1.52));
  line-height:var(--h-lh);letter-spacing:var(--h2-ls);max-width:22ch;
  margin:0 0 24px;color:#7F97AC;
}
.ev-turn{display:block;color:#fff}
.ev-head p{
  max-width:660px;margin:0;color:#A8BCCB;
  font-size:clamp(16px,1.8vw,18px);line-height:1.65;
}
/* The subliminal broadcast motif. Oversized, static, ~4%, and behind
   everything: `.wrap` is already position:relative above it. */
.ev-motif{
  position:absolute;inset:auto 0 0;height:52%;opacity:.045;
  pointer-events:none;overflow:hidden;display:flex;align-items:flex-end;
}
.ev-motif .rar-waveline{
  width:100%;height:100%;margin:0;opacity:1;gap:min(1.1vw,16px);
  align-items:flex-end;
}
.ev-motif .rar-waveline i{width:min(.7vw,10px);background:#fff}
/* The bar heights are fixed pixels for the 34px hero strip; scaled to a
   percentage of the motif's own height they become the oversized frequency
   curve this band wants, from the same markup. */
.ev-motif .rar-waveline i.w1{height:14%}  .ev-motif .rar-waveline i.w2{height:26%}
.ev-motif .rar-waveline i.w3{height:38%}  .ev-motif .rar-waveline i.w4{height:50%}
.ev-motif .rar-waveline i.w5{height:62%}  .ev-motif .rar-waveline i.w6{height:74%}
.ev-motif .rar-waveline i.w7{height:86%}  .ev-motif .rar-waveline i.w8{height:100%}
.ev-motif .rar-waveline i.w9{height:80%}  .ev-motif .rar-waveline i.w10{height:56%}
.ev-motif .rar-waveline i.w11{height:32%} .ev-motif .rar-waveline i.w12{height:20%}
@media(max-width:760px){.ev-motif{display:none}}
.rar-figures{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(255,255,255,.15)}
.rar-figure{padding:26px 26px 0 0}
.rar-figure + .rar-figure{padding-left:26px;border-left:1px solid rgba(255,255,255,.15)}
.rar-figure b{
  display:block;font-family:var(--font-display);font-weight:900;
  font-size:clamp(28px,3.6vw,40px);letter-spacing:-.04em;line-height:1;
  color:#fff;margin-bottom:10px;
}
.rar-figure span{display:block;font-size:13.5px;line-height:1.55;color:#93A9BB;max-width:32ch}
@media(max-width:720px){
  .rar-figures{grid-template-columns:1fr;border-top:0}
  .rar-figure{padding:20px 0;border-top:1px solid rgba(255,255,255,.15)}
  .rar-figure + .rar-figure{padding-left:0;border-left:0}
}
.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;
}
/* The homepage band is left-aligned editorial; /for-radio-stations/ still runs
   the centred stat-card version, so this keys off the figures row itself. */
.rar-figures ~ .source{text-align:left;max-width:62ch}
.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)}
/* Eyebrows that carry an icon need to line it up; the ones that carry a `.rule`
   handle their own spacing, so this must not force a gap onto them. */
.eyebrow{display:inline-flex;align-items:center;gap:7px}
.eyebrow:has(.rule){gap:0}
.sec-head .eyebrow{justify-content:center}
.sec-head.is-left .eyebrow,.ev-head .eyebrow,.break-head .eyebrow{justify-content:flex-start}
.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
   The optional edge photography, and nothing else. Non-interactive, hidden from
   assistive tech, and gone on narrow screens. It should read as atmosphere,
   never as an illustration — see .rar-hero.is-home::after for the zero-byte
   version that ships when no photographs are set.
   ========================================================================== */
.rar-ambient{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.rar-hero .wrap{z-index:1}

/* Nothing in the ambient layer animates any more — the rings and the drifting
   fragments are both gone, and the edge wash is a static gradient — so there is
   no reduced-motion exception left to make here. */

/* ==========================================================================
   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}
}

/* --- how it works: ways in, voice, routes, expectations ------------------- */
/* Compact example rows, not six feature cards: each one is a real search, and
   the point is that any of them is enough to start. */
/* ⚠️ ONE WIDTH LADDER on this page. Sections were each choosing their own
   measure — 1340 / 1280 / 940 — which reads as an architectural wobble even
   though nothing is misaligned. There are exactly two widths now: this
   editorial column, and the demonstration stage, which is wider ON PURPOSE
   because it is the one piece of product on the page. `--hiw-col` is the
   editorial one; change it here and every section moves together. */
:root{ --hiw-col:1080px; }
.rar-ways{
  list-style:none;margin:0 auto clamp(20px,2.4vw,26px);padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:var(--hiw-col);
}
/* ⚠️ White on white with a hairline read as disabled form controls. They sit
   on the page's own surface token now, so they are visibly things you may
   pick — and the radius is the system's, not a bespoke 13px. */
.rar-ways a{
  display:flex;flex-direction:column;gap:4px;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;transition:border-color .15s ease,background-color .15s ease,transform .15s ease;
}
.rar-ways a:hover,.rar-ways a:focus-visible{background:var(--bg)}
.rar-ways a:hover,.rar-ways a:focus-visible{border-color:var(--ink);transform:translateY(-1px)}
.way-k{
  font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
}
.way-v{font-size:16px;color:var(--tx)}
.rar-ways a:hover .way-v,.rar-ways a:focus-visible .way-v{color:var(--signal)}
@media(max-width:820px){.rar-ways{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.rar-ways{grid-template-columns:1fr}}

/* Voice as the sixth way of remembering, inside the examples grid — it used to
   be a full-width band of its own for an action that is one tap. The cell is a
   <li>, not a link, so the button inside it is the only control. */
.way-voice{
  display:flex;flex-direction:column;gap:4px;
  background:var(--signal-soft);
  border:1px solid color-mix(in srgb, var(--signal) 22%, transparent);
  border-radius:var(--radius);padding:16px 18px;
}
.way-mic{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  margin-top:9px;padding:0;background:none;border:0;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:14px;
  letter-spacing:-.01em;color:var(--signal-d);
}
.way-mic .rar-i{transition:transform .16s ease}
.way-mic:hover .rar-i:last-child,
.way-mic:focus-visible .rar-i:last-child{transform:translateX(3px)}
/* One line, not a paragraph: what happens to the recording, said once. */
.rar-ways-note{
  display:flex;align-items:flex-start;gap:9px;margin:0 auto;
  max-width:var(--hiw-col);font-size:14.5px;line-height:1.6;color:var(--tx-2);
}
.rar-ways-note svg{color:var(--ok);flex-shrink:0;margin-top:3px}

/* Directory routes as a plain list of destinations. */
.rar-routes{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line);max-width:820px;
}
.rar-routes a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 0;text-decoration:none;border-bottom:1px solid var(--line);
  font-family:var(--font-display);font-weight:700;font-size:15.5px;
  letter-spacing:-.01em;color:var(--tx);
}
.rar-routes li:nth-child(odd) a{padding-right:26px}
.rar-routes li:nth-child(even) a{padding-left:26px;border-left:1px solid var(--line)}
.rar-routes a .rar-i{color:var(--ink-2);transition:transform .16s ease,color .16s ease}
.rar-routes a:hover,.rar-routes a:focus-visible{color:var(--signal)}
.rar-routes a:hover .rar-i,.rar-routes a:focus-visible .rar-i{color:var(--signal);transform:translateX(3px)}
/* Inside the merged band the routes have one column to live in, so the
   two-up grid (and its centre divider) would halve an already narrow track. */
.rar-routes.is-stack{grid-template-columns:1fr;max-width:none}
.rar-routes.is-stack li:nth-child(odd) a{padding-right:0}
.rar-routes.is-stack li:nth-child(even) a{padding-left:0;border-left:0}
.rar-routes.is-stack a{padding:14px 0}
@media(max-width:640px){
  .rar-routes{grid-template-columns:1fr}
  .rar-routes li:nth-child(odd) a{padding-right:0}
  .rar-routes li:nth-child(even) a{padding-left:0;border-left:0}
}

/* ⚠️ BROWSE + GOOD TO KNOW, one band. They were two quiet full-height
   sections that answer the same worry — what happens when the words are gone —
   and the second one ended the page on its own limitations at section scale.
   Peach ground, because a caveat printed on white between two white bands is
   read as small print. */
.rar-hiw-merge{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,4.4vw,60px);align-items:start;
  max-width:var(--hiw-col);
}
/* ⚠️ The left heading uses the section H2 scale; the right uses `.h-sm`, which
   is the system's existing smaller heading (about, contact, pricing, the
   directory recovery block all use it). Two headings at the same size compete;
   two invented sizes is two systems. So this rule is scoped to the left column
   and the right one is left alone to inherit .h-sm. */
.hm-browse h2{
  font-size:clamp(25px,3.2vw,calc(var(--h2-max) * .94));
  line-height:var(--h-lh);letter-spacing:var(--h2-ls);margin:0 0 14px;max-width:19ch;
}
.hm-know h2{margin:0 0 14px;max-width:24ch}
.rar-hiw-merge > div > p{margin:0 0 16px;font-size:15.5px;line-height:1.7;color:var(--tx-2)}
.hm-browse > p:last-of-type{margin-bottom:clamp(18px,2.2vw,26px)}
/* One hairline down the middle, the same value the homepage's peach band uses
   between its rows — the split is what the section IS, so it gets a structure
   rather than two cards floating on peach. */
.hm-know{border-left:1px solid rgba(11,27,43,.12);padding-left:clamp(28px,4vw,56px)}
.hm-know p:last-child{margin-bottom:0}
@media(max-width:900px){
  .rar-hiw-merge{grid-template-columns:1fr;gap:clamp(30px,5vw,44px)}
  .hm-browse h2{max-width:none}
  /* Stacked, a left rule would sit across the flow instead of between columns. */
  .hm-know{border-left:0;padding-left:0;border-top:1px solid rgba(11,27,43,.12);padding-top:clamp(26px,4vw,34px)}
}

.closing-alt{margin:22px 0 0}
.closing-alt a{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-size:14.5px;color:#9FB3C4;
}
.closing-alt a:hover{color:#fff}

/* --- directory: a search product, not a table on a page ------------------ */
/* ⚠️ Compact by design. This is the page someone lands on WANTING to look
   something up, so the header earns its space in one glance and gets out of the
   way — roughly a third shorter than the marketing-sized head it replaced. */
.rar-directory{padding:clamp(28px,3.4vw,44px) 22px clamp(56px,6vw,84px)}
.rar-dirhead{max-width:64ch;margin:0 0 clamp(20px,2.4vw,28px)}
.rar-dirhead h1{
  font-size:clamp(28px,3.6vw,42px);line-height:var(--h-lh);letter-spacing:var(--h1-ls);margin:0 0 10px;
}
.rar-dirhead p{margin:0;font-size:16px;line-height:1.55;color:var(--tx-2);max-width:58ch}

/* Native selects on purpose: they work with no JavaScript, they are keyboard
   accessible for free, and a phone gives the visitor its own picker instead of
   a bespoke drawer nobody can drive one-handed. */
.rar-facets{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px;align-items:center}
.rar-facet select{
  font:inherit;font-size:14px;color:var(--tx);cursor:pointer;
  background:var(--bg);border:1px solid var(--line);border-radius:11px;
  padding:9px 14px;min-height:42px;max-width:100%;
}
.rar-facet select:hover{border-color:var(--ink-2)}
.rar-facets .rar-facet-go{
  font-family:var(--font-display);font-weight:700;font-size:13.5px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;
  padding:10px 16px;min-height:42px;color:var(--tx);
}
.rar-facets .rar-facet-go:hover{border-color:var(--ink);background:var(--surface-2)}
/* With JS the change applies immediately, so the button is only a fallback. */
.rar-facets[data-rar-facets-ready] .rar-facet-go{display:none}

/* Chips appear only when something is actually narrowing the list. */
.rar-chipbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px}
.cb-label{
  font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tx-2);margin-right:2px;
}
.rar-fchip{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  background:var(--signal-soft);border:1px solid color-mix(in srgb, var(--signal) 22%, transparent);
  color:var(--tx);border-radius:100px;padding:6px 12px;font-size:13px;
  transition:border-color .14s ease,background .14s ease;
}
.rar-fchip i{font-style:normal;color:var(--signal);font-size:15px;line-height:1}
.rar-fchip:hover{background:#fff;border-color:var(--signal)}
.cb-clear{font-size:13px;color:var(--tx-2);text-decoration:underline;text-underline-offset:3px}
.cb-clear:hover{color:var(--signal)}

/* An answer, not a blank table. */
.rar-noresults{
  border:1px dashed var(--line);border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,44px);text-align:center;background:var(--bg);
}
.rar-noresults .nr-h{
  margin:0 0 8px;font-family:var(--font-display);font-weight:800;
  font-size:clamp(17px,2vw,20px);letter-spacing:-.02em;color:var(--tx);
}
.rar-noresults .nr-p{margin:0 auto 20px;max-width:52ch;font-size:14.5px;line-height:1.6;color:var(--tx-2)}
.rar-noresults .nr-do{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0}

.rar-pager{margin-top:clamp(22px,2.6vw,32px)}
.rar-pager .pager-count{
  margin:0 0 12px;font-size:13.5px;color:var(--tx-2);text-align:center;
}

/* The bridge back to fuzzy memory. A warm tint rather than grey: it is the
   product's own answer to "I could not find it", not a footer utility. */
.rar-recover{
  margin-top:clamp(40px,4.6vw,62px);
  background:color-mix(in srgb, var(--signal-soft) 55%, var(--bg));
  border:1px solid color-mix(in srgb, var(--signal) 14%, transparent);
  border-radius:var(--radius-lg);
  padding:clamp(26px,3.2vw,42px);text-align:center;
}
.rar-recover h2{margin:0 0 7px}
.rar-recover p{margin:0 auto 19px;max-width:48ch;font-size:15.5px;color:var(--tx-2)}
.rar-recover .rar-search{max-width:min(680px,100%)}

@media(max-width:640px){
  .rar-facets{gap:8px}
  .rar-facet{flex:1 1 calc(50% - 4px);min-width:0}
  .rar-facet select{width:100%}
  .rar-facets .rar-facet-go{flex:1 1 100%}
}

/* --- 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}
}

/* --- 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-working   .step-working,
.rar-voice.is-review    .step-review,
.rar-voice.is-denied    .step-denied{display:block}
/* The working state echoes back the exact words we are about to search for. */
.step-working .vs{
  font-style:italic;color:#C6D4DF;font-size:16px;max-width:40ch;margin-bottom:0;
}

.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)}
/* ⚠️ How It Works only. Its job is promise → input → get out of the way: the
   demonstration below is what the visitor came for, and a full-height hero in
   front of it delays the one thing that does the arguing. */
.rar-hero.is-compact{padding:clamp(34px,4.4vw,56px) 0 clamp(26px,3.2vw,38px)}
.rar-hero.is-compact .rar-eyebrow{margin-bottom:clamp(16px,2vw,22px)}
.rar-hero.is-compact p.sub{margin-bottom:clamp(26px,3vw,34px);max-width:640px}
.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:700;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}

/* ==========================================================================
   THE COMMERCIAL PAGE  (brief: RADIO-AD-REPEAT-COMMERCIAL-DETAIL-PAGE.md)

   Identity and payoff side by side, THE LINE as the biggest thing after the
   name, then listen-and-read on tint, then the station carousel, then the
   navy closing search. Station, city and date are printed once.
   ========================================================================== */
.rar-single{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;
  gap:clamp(28px,4vw,64px);align-items:start;
  padding:clamp(22px,3vw,36px) 22px clamp(48px,5.5vw,72px);
}
.sg-kicker{
  margin:0 0 10px;font-family:var(--font-display);font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tx-2);
}
.rar-single-main h1{font-size:clamp(32px,4.8vw,54px);margin:0 0 16px;max-width:16ch}
.sg-stations{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 clamp(22px,2.6vw,32px)}
.sg-chip{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-family:var(--font-display);font-weight:700;font-size:14.5px;letter-spacing:-.01em;
  color:var(--ink-2);background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:8px 12px;transition:border-color .15s ease,color .15s ease;
}
.sg-chip .rar-i{color:var(--signal)}
.sg-chip:hover,.sg-chip:focus-visible{border-color:var(--ink);color:var(--ink)}
.sg-day{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--tx-2)}
/* THE LINE. Display type, not an italic footnote: it is what a listener
   recognises, and the match highlight lives inside it. */
.sg-line{margin:0;padding:0 0 0 clamp(16px,2vw,22px);border-left:3px solid var(--signal)}
.sg-line p{
  margin:0 0 10px;font-family:var(--font-display);font-weight:700;
  font-size:clamp(21px,2.6vw,30px);line-height:var(--h-lh);letter-spacing:var(--h2-ls);
  color:var(--ink);max-width:24ch;text-wrap:balance;
}
.sg-line p mark{background:var(--signal-soft);color:var(--signal);padding:0 4px;border-radius:5px}
.sg-line cite{font-style:normal;font-size:13.5px;color:var(--tx-2)}

/* The confirm strip: the search that brought them here, acknowledged and
   closed. Quiet — a strip, not a banner. */
.rar-confirm{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:0 0 22px;padding:12px 16px;border-radius:var(--radius);
  background:var(--signal-soft);border:1px solid color-mix(in srgb, var(--signal) 22%, transparent);
}
.rar-confirm p{margin:0}
.cf-q{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14.5px;color:var(--tx)}
.cf-q .rar-i{color:var(--signal);flex-shrink:0}
.cf-q b{font-weight:600}
.cf-ask{color:var(--tx-2)}
.cf-acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cf-yes{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:var(--ink);color:#fff;border:0;border-radius:10px;padding:9px 14px;
  font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:-.01em;
}
.cf-yes:hover{background:var(--ink-2)}
.cf-yes:disabled{background:var(--ok-bg);color:var(--ok);cursor:default}
.cf-no{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink);
}
.cf-no:hover{color:var(--signal)}

/* Listen and read: player beside transcript. */
.ln-grid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(22px,3.4vw,48px);align-items:start;
}
.ln-play .demo-label,.ln-read .demo-label{margin-bottom:10px}
.ln-play .rar-noaudio{margin:0}
.rar-listen .rar-transcript{max-width:none}
.rar-listen .script-src{margin-top:10px}
.rar-single-more .rar-recent-head{margin-bottom:18px}
@media(max-width:820px){.ln-grid{grid-template-columns:1fr;gap:22px}}
.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)}
.cc-facts{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:8px}
.cc-facts > div{display:flex;align-items:baseline;gap:12px;font-size:13.5px}
.cc-facts dt{
  flex:0 0 52px;font-family:var(--font-display);font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tx-2);
}
.cc-facts dd{margin:0;color:var(--tx)}
.cc-facts dd b{color:var(--ok)}
.cc-claim{margin:14px 0 0;font-size:13.5px;color:var(--tx-2)}
.cc-claim a{color:var(--ink);font-weight:600}
.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:36px}
  /* On a phone the name comes first and the number card straight after it —
     not the card before the name, which read as a page about a phone number. */
  .rar-callcard{position:static}
  .rar-single-main h1{max-width:none}
  .sg-line p{max-width:none}
}

/* ==========================================================================
   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. */
/* The query is a caption; the result is the object. 0.78fr against 1fr gives
   the match roughly 28% more room than an even split did, which is what makes
   the section read as "we found it" rather than as two panels of equal weight. */
.rar-demo-pair{
  display:grid;grid-template-columns:0.78fr auto 1fr;gap:clamp(20px,3vw,38px);
  align-items:center;max-width:1000px;margin:0 auto;
}
/* ==========================================================================
   THE DEMONSTRATION STAGE

   One contained surface holding the whole story — memory, arrow, result,
   caption and the three-step rail — because the two halves floating on white
   read as two unrelated things with a decorative arrow between them.

   Depth without a third colour: warm tint outside, neutral for the memory,
   white for the result. The result card is the only white thing here, which is
   what makes it read as the answer rather than as another panel.
   ========================================================================== */
.rar-stage{
  background:color-mix(in srgb, var(--signal-soft) 62%, var(--bg));
  border:1px solid color-mix(in srgb, var(--signal) 13%, transparent);
  border-radius:clamp(20px,2.2vw,28px);
  padding:clamp(24px,2.7vw,40px);
  max-width:1240px;margin:clamp(34px,3.8vw,48px) auto 0;
}
/* Top-aligned inside the stage, so "Try something like" and "What we found"
   start on the same line. (This flips the earlier centring: that existed to
   stop the short column stranding whitespace on a bare white background — once
   both halves sit inside one bordered surface, the space is contained and
   aligning the two labels is the stronger read.) */
.rar-stage .rar-demo-pair{max-width:none;align-items:start}
.rar-stage .demo-arrow{align-self:center}
/* Inside the stage the rail is part of the demonstration, not a caption under
   a section, so it loses the extra air it needed when it stood alone. */
.rar-stage .rar-rail{margin-top:clamp(22px,2.2vw,30px);max-width:none}
/* §2 — the memory block reads as the caption to the result, so it sits near
   that card's optical centre rather than pinned to the top of a much taller
   column. A nudge, not mathematical centring: the two labels stay close enough
   to read as a pair. */
.rar-stage .demo-ask{padding-top:clamp(0px,3vw,52px)}
/* §7 — the caption belongs to the card above it, not to the space below. */
.rar-stage .demo-hit .demo-note{margin-top:10px}
.rar-stage .demo-ask .demo-note{margin-top:10px}

/* The result stack: every example in one grid cell, so the stage is as tall as
   its tallest example and a swap costs no layout. */
.hit-stack{display:grid}
.hit-stack > .rar-card{
  grid-area:1/1;visibility:hidden;opacity:0;
  transition:opacity .45s ease,border-color .45s ease;
}
.hit-stack > .rar-card.is-on{visibility:visible;opacity:1}

/* ==========================================================================
   DEMONSTRATION STAGES

   Every stage below changes opacity and colour only. Nothing here touches a
   layout property after paint, which is what keeps a four-step sequence at 0
   CLS — and it is why the card is dimmed rather than built up piece by piece.

   Stage 0/1  the memory is being typed; the match has not happened yet
   Stage 2    it resolves — strength pill, full card
   Stage 3    the matching words light up: WHY it was found
   Stage 4    the payoff — number, Call, Listen
   ========================================================================== */
[data-stage] .rar-strength,
[data-stage] .rar-payoff,
[data-stage] .rar-second{transition:opacity .45s ease}
/* The soft reset: the whole stage eases down for half a second between
   examples rather than backspacing the sentence away. */
.rar-stage[data-reset] .hit-stack > .rar-card.is-on,
.rar-stage[data-reset] .q-type{opacity:0}
.rar-stage[data-reset] .rar-strength,
.rar-stage[data-reset] .rar-payoff,
.rar-stage[data-reset] .rar-second{opacity:0}
[data-stage] .rar-quote mark{transition:background-color .4s ease,color .4s ease}

/* ⚠️ Subdued, never disabled. At 40% the result read as switched off and the
   section looked broken for the first second and a half — the structure has to
   stay recognisable throughout, so nothing here drops below ~62%, and the card
   keeps its full border the whole way. Emphasis is staged; the card is not
   built up out of nothing.
   ⚠️ The CARD barely dims (88%) — it is the PAYOFF that stages in. Dimming the
   whole card to make the match feel like an event meant that every visitor who
   scrolled the section into view met a washed-out result for the first 1.7
   seconds, and every screenshot of the section caught it looking disabled. The
   transformation is carried by the strength pill, the phrase highlight and the
   number arriving — not by making the result hard to read first. */
[data-stage="0"] .hit-stack > .rar-card.is-on,
[data-stage="1"] .hit-stack > .rar-card.is-on{opacity:.88}
[data-stage="0"] .rar-strength,
[data-stage="1"] .rar-strength{opacity:0}
[data-stage="0"] .rar-payoff,[data-stage="1"] .rar-payoff,
[data-stage="0"] .rar-second,[data-stage="1"] .rar-second{opacity:.5}
[data-stage="2"] .rar-payoff,[data-stage="2"] .rar-second{opacity:.84}
/* The highlight IS the explanation of why this was found, so it arrives with
   the match — not before there is anything to explain. */
[data-stage="0"] .rar-quote mark,[data-stage="1"] .rar-quote mark{
  background:transparent;color:inherit;font-weight:inherit;text-decoration:none;
}
/* Visible at rest, unmistakable on the match: it travels 8px once and settles.
   ⚠️ Once — a directional cue that keeps moving stops meaning direction and
   starts meaning "look at me". */
.demo-arrow{
  color:color-mix(in srgb, var(--ink) 32%, transparent);
  transition:color .45s ease,transform .45s cubic-bezier(.2,.7,.3,1);
}
[data-stage="2"] .demo-arrow,
[data-stage="3"] .demo-arrow{color:var(--signal);transform:translateX(8px)}
@media(max-width:860px){
  /* Stacked, so the cue points down the story instead of across it. */
  [data-stage="2"] .demo-arrow,
  [data-stage="3"] .demo-arrow{transform:rotate(90deg) translateX(8px)}
}

/* The rail is the caption for the same sequence, so it lights with it — and
   the hairline between steps completes in signal as the flow reaches them.
   ⚠️ An editorial signal line, not a progress bar: 1px, subordinate to the
   labels, no circles, no percentages, no "step 2 of 3". */
.rail-step .rail-n{transition:color .3s ease}
.rail-step .rail-body strong{transition:color .3s ease}
.rail-step::after{transition:background-color .45s ease}
[data-rail-step]:not(.is-on) .rail-n{color:var(--tx-2)}
[data-rail-step]:not(.is-on) .rail-body strong{color:var(--tx-2)}
/* ⚠️ Scoped to .rar-stage on purpose. The base connector rule
   (`.rail-step:not(:last-child)::after`) sits further down the stylesheet at
   the same specificity, so an unscoped version of this lost the cascade and the
   line silently never turned. The extra class settles it regardless of order.
   The connector belongs to the step it leads AWAY from, so it may only turn
   once the step it leads TO is active. */
.rar-stage [data-rail-step].is-on:has(+ [data-rail-step].is-on)::after{background:var(--signal)}

@media (prefers-reduced-motion: reduce){
  /* demo.js never starts the sequence here, but a stage attribute could still
     be present from a prior state — the finished look must win regardless. */
  [data-stage] .hit-stack > .rar-card.is-on,
  [data-stage] .rar-strength,
  [data-stage] .rar-payoff,
  [data-stage] .rar-second{opacity:1}
  .demo-arrow{color:var(--signal);transform:none}
  .rar-stage .rail-step:not(:last-child)::after{background:var(--signal)}
  [data-rail-step] .rail-n{color:var(--signal)}
  [data-rail-step] .rail-body strong{color:var(--tx)}
}

/* ⚠️ Centred, not top-aligned — and this reversed an earlier decision on
   purpose. Aligning the two labels mattered while the columns were a similar
   height; once the result card grew into the star of the section, top-aligning
   left ~200px of dead space under the query and stranded the arrow beside
   nothing. A caption centred against the object it describes is the composition
   that actually holds. */
.demo-arrow{align-self:center}
.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;
}
/* ⚠️ This is a <p>, and it must not read as a field. White, bordered and
   shadowed, it was indistinguishable from the real search box in the hero and
   people clicked it. Soft surface, hairline, no shadow, default cursor, no
   hover and no focus state — an example being shown, not a control offered. */
.demo-query{
  display:flex;align-items:center;gap:11px;background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:none;cursor:default;
  padding:17px 18px;margin:0;font-size:16.5px;color:var(--tx);
}
.demo-query svg{color:var(--tx-2);flex-shrink:0}
/* The type-on rig. Every query occupies the SAME grid cell, so the box is
   always as tall as the longest of them and cycling through examples cannot
   resize anything. The active `.q-real` is the accessible sentence; while the
   animation runs it goes transparent but keeps holding the cell open, and
   `.q-type` — aria-hidden — is what the characters are typed into. */
.q-line{display:grid;min-width:0}
.q-line > *{grid-area:1/1;min-width:0}
.q-real{visibility:hidden;opacity:0}
.q-real.is-on{visibility:visible;opacity:1}
.q-type{display:none}
.rar-stage.is-anim .q-real.is-on{opacity:0}
.rar-stage.is-anim .q-type{display:block}
.demo-note{margin:12px 0 0;font-size:13.5px;color:var(--tx-2);line-height:1.5}
/* ⚠️ Colour lives in the stage block above, not here — this rule sits later in
   the file and was overriding the inert state, so the arrow pointed at a match
   that had not happened yet. */
.demo-arrow{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}
/* The payoff of the whole section, and the one card allowed to sit forward of
   the tint it is on. Everything inside it steps up with it. */
.demo-hit .rar-card.is-top{border-width:2px;padding:clamp(22px,2.2vw,28px)}
/* ~10% up on the pieces that carry the point. In the full page the stage sits
   between a big hero and a big editorial band, and at the old scale its content
   read as a footnote to both. The container height is unchanged. */
.demo-hit .rar-card h3{font-size:clamp(20px,2.2vw,24px)}
.demo-hit .rar-quote{font-size:clamp(15.5px,1.7vw,18px)}
.demo-hit .rar-phone{font-size:clamp(30px,3.7vw,37px)}
.demo-hit .rar-card .meta{font-size:14px}
.demo-hit .rar-payoff .btn{font-size:16px;padding:15px 26px}
.rar-stage .demo-query{font-size:clamp(16px,1.7vw,18px)}
.rar-stage .rail-body strong{font-size:16.5px}
.rar-stage .rail-n{font-size:13px}
.rar-stage .demo-label{font-size:12.5px}
.demo-hit .rar-payoff{margin-top:18px;padding-top:16px}

/* ==========================================================================
   THE DEMONSTRATION AT FEATURE SCALE

   On the homepage the stage is one band of seven and sized to sit among them.
   On How It Works it IS the page — the brief's note was that the demo was
   small relative to the vertical territory it was given, and the fix is a
   bigger demonstration inside a shorter page, not more padding around the same
   card. Only type and padding change here: the stage's grid, its stacking and
   every animation state are shared with the homepage and stay identical.
   ========================================================================== */
/* ⚠️ The one width allowed past the editorial column, and the reason is that
   it is the only actual product on the page. 1240 against 1080 is a visible,
   deliberate step; 1280 against 1340 and 940 was three near-misses. */
.rar-demo-feature .rar-stage{
  max-width:1240px;padding:clamp(26px,3.2vw,48px);
  border-radius:var(--radius-lg);
  margin-top:clamp(26px,3vw,36px);
}
/* §3 — the tint band's own hairlines drew two thin dark rules across the page,
   right where the demonstration meets the section under it. Background change
   is the separation; a rule on top of it reads as an accident. (Scoped: the
   homepage's tint bands are approved and keep theirs.) */
.rar-section.tint.rar-demo-feature{border-top-color:transparent;border-bottom-color:transparent}
/* §6 — the arrow belongs to the transformation. At ~57px a side it was
   floating in dead space between two objects rather than joining them. */
.rar-demo-feature .rar-demo-pair{gap:clamp(20px,2.2vw,32px)}
/* ⚠️ §7 — the two labels share a baseline and the two component boxes start on
   the same line. This reverses the optical centring one pass earlier: centring
   fixed the stranded-whitespace symptom by moving the left block down, which
   broke the read that matters — the eye should travel ACROSS from what you
   remembered to what was found, not diagonally. The left column is instead
   given real presence (below) so the two sides balance without cheating the
   alignment. */
/* Both columns span the stage, so the two labels start on one line AND the two
   captions finish on one line — the memory note lands level with the result
   caption instead of leaving the left column hanging in mid-air. The space
   between them is then bounded top and bottom, which is what makes it read as
   room rather than as an unfinished column. */
.rar-demo-feature .rar-stage .demo-ask{
  align-self:stretch;padding-top:0;display:flex;flex-direction:column;
}
.rar-demo-feature .rar-stage .demo-ask .demo-note{margin-top:auto}
/* ⚠️ The arrow belongs beside the two boxes, not at the midpoint of a column
   that is mostly air. The offset is the label (≈28px) plus half the memory
   panel (132/2) — both fixed at feature scale, and the whole rule is gone below
   1080px where the stage stacks and the cue turns downward. */
.rar-demo-feature .rar-stage .demo-arrow{align-self:start;margin-top:94px}
/* A panel, not a one-line field: at 111px against a 409px card the memory read
   as an afterthought beside the result. */
.rar-demo-feature .rar-stage .demo-query{
  min-height:132px;padding:26px 22px;align-items:flex-start;
}
.rar-demo-feature .rar-stage .demo-query .rar-i{margin-top:3px}
/* Two lines, the second in signal: the sentence has a hinge in the middle and
   letting it wrap wherever put "to the" at the end of line two. */
.rar-demo-feature .sec-head{max-width:min(830px,100%)}
.rar-demo-feature .sec-head h2 .accent{display:block}
.rar-demo-feature .rar-stage .demo-label{font-size:13px;margin-bottom:12px}
.rar-demo-feature .rar-stage .demo-query{font-size:clamp(17px,1.9vw,21px);padding:20px 20px}
.rar-demo-feature .demo-note{font-size:14px}
/* The result card carries the payoff, so it takes the largest share of the
   increase — the phone number has to be legible from a full-page view. */
.rar-demo-feature .demo-hit .rar-card.is-top{padding:clamp(24px,2.9vw,38px)}
.rar-demo-feature .demo-hit .rar-card h3{font-size:clamp(22px,2.7vw,31px)}
.rar-demo-feature .demo-hit .rar-card .meta{font-size:14.5px}
.rar-demo-feature .demo-hit .rar-quote{font-size:clamp(16px,1.9vw,20.5px)}
.rar-demo-feature .demo-hit .rar-phone{font-size:clamp(32px,4.4vw,47px)}
.rar-demo-feature .demo-hit .rar-payoff .btn{font-size:17px;padding:16px 30px}
.rar-demo-feature .rar-stage .rar-rail{margin-top:clamp(26px,2.6vw,34px)}
.rar-demo-feature .rar-stage .rail-body strong{font-size:18px}
.rar-demo-feature .rar-stage .rail-n{font-size:14px}
.rar-demo-feature .rar-stage .rail-d{font-size:14.5px}

/* ⚠️ Feature scale needs more room than the shared 860px collapse allows. At
   900px the payoff wrapped — number on one line, Call under it — the card grew
   a third taller, and the memory column stranded ~350px of empty tint beside
   it. So the story goes vertical earlier on this page: keeping two columns
   because they technically fit costs more than the composition is worth. */
@media(max-width:1080px){
  .rar-demo-feature .rar-demo-pair{grid-template-columns:1fr;gap:18px}
  /* Stacked, the column rules above stop meaning anything: nothing is beside
     anything, so the memory panel is sized by its text and the note goes back
     under it rather than being pushed to the bottom of a column that no longer
     has a partner. */
  .rar-demo-feature .rar-stage .demo-ask{align-self:auto;display:block}
  .rar-demo-feature .rar-stage .demo-ask .demo-note{margin-top:10px}
  /* ⚠️ Top-aligned, not centred. The queries all share one grid cell so the box
     is as tall as the LONGEST of them — at 430px that is three lines — and
     centring floated the magnifier halfway down a box whose visible line sits
     at the top. */
  .rar-demo-feature .rar-stage .demo-query{min-height:0;padding:18px}
  /* ⚠️ The 94px offset belongs to the side-by-side composition only. Left in
     place it shoved the downward cue 94px clear of the box it points away
     from. */
  .rar-demo-feature .rar-stage .demo-arrow{align-self:auto;margin-top:0}
  .rar-demo-feature .demo-arrow{transform:rotate(90deg);justify-self:center}
  .rar-demo-feature [data-stage="2"] .demo-arrow,
  .rar-demo-feature [data-stage="3"] .demo-arrow{transform:rotate(90deg) translateX(8px)}
}

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

/* --- labelled play button ------------------------------------------------ */
/* The square 40px .rar-play grows a text label wherever the row has room for
   one. Deliberately NOT scoped to a parent any more: the directory list rows
   already asked for this modifier and never got it, so their "Listen · 0:13"
   was being squeezed inside a 40px box. */
.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;
}
.card-play .txt{white-space:nowrap}
.rar-play.is-static{cursor:default}
.rar-play.is-static:hover{background:var(--surface);border-color:var(--line);color:var(--tx)}

/* --- product demonstration card ------------------------------------------ */
.rar-card.is-demo{box-shadow:var(--shadow);margin:0}

/* --- recently heard ------------------------------------------------------ */
/* Section 2, immediately after the hero: the page makes a promise up top and
   then shows real commercials with real numbers before it explains anything. */
.rar-recent-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(18px,3vw,40px);margin-bottom:clamp(20px,2.4vw,28px);
}
/* `.mb-0` on the head loses to `.rar-section.is-snug .sec-head` on specificity
   (0,1,0 against 0,2,0), so the utility silently did nothing and the section
   head kept a second bottom margin under this one. */
.rar-recent-head .sec-head{margin-bottom:0}
/* One control region: the link and the two arrows all operate the same track,
   so they share a row instead of the arrows floating in one of their own. */
.recent-aside{display:flex;align-items:center;gap:20px;flex-shrink:0;padding-bottom:2px}
.recent-all{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap;
  font-family:var(--font-display);font-weight:800;font-size:15px;
  letter-spacing:-.01em;color:var(--ink-2);
}
.recent-all:hover{color:var(--signal)}
.recent-all .rar-i{transition:transform .16s ease}
.recent-all:hover .rar-i{transform:translateX(3px)}
@media(max-width:820px){
  .rar-recent-head{flex-direction:column;align-items:flex-start;gap:14px}
  .recent-aside{flex-wrap:wrap;gap:10px 16px;padding-bottom:0}
}

/* A scroll-snap list, not a JavaScript slider: it scrolls with a trackpad, a
   finger and the keyboard whether or not carousel.js ever loads, which is also
   what makes reduced-motion free — the arrows just stop animating. */
.rar-carousel{position:relative}
.rar-track{
  list-style:none;margin:0;padding:4px 4px 14px;
  /* A clamp, not minmax(): in an overflowing column track minmax() collapses
     to its minimum, which pinned every card at 300px on a 1440 screen. */
  display:grid;grid-auto-flow:column;grid-auto-columns:clamp(300px,26vw,376px);
  gap:20px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:thin;
}
.rar-track::-webkit-scrollbar{height:6px}
.rar-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:100px}
/* Denser than it was by roughly 26px: the old card carried its air in the gaps
   between four elements that all wanted to be seen. Broadcast context is
   compact metadata, the advertiser and the transcript sit close together as one
   recognition unit, and the flexible space is spent above the divider so the
   payoff row always sits on the card's floor. */
.rar-slide{
  scroll-snap-align:start;display:flex;flex-direction:column;min-width:0;
  background:var(--bg);border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius:18px;padding:20px;min-height:182px;box-shadow:var(--shadow-sm);
  transition:box-shadow .15s ease,border-color .15s ease;
}
.rar-slide:hover{box-shadow:var(--shadow);border-color:var(--surface-2)}
.sl-top{display:flex;align-items:center;gap:10px;margin-bottom:15px}
.sl-id{display:flex;flex-direction:column;gap:2px;min-width:0}
/* Fallback station identity. Sized and shaped as a logo slot so a real station
   mark drops straight in — ⚠️ nothing here may be fabricated branding, so until
   stations supply logos this stays a generic signal glyph. */
.sl-mark{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  overflow:hidden;
}
.sl-where{
  font-family:var(--font-display);font-weight:700;font-size:14px;
  letter-spacing:-.01em;color:var(--ink-2);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Advertiser-supplied broadcast context ("Airs mornings"). ⚠️ Never a clock
   time — there is no airplay log, so one would be invented. See rar_ad_slide().
   `.is-meta` is the fallback when a listing has no daypart: it drops a step
   further back so the listed date reads as filing information, not as airtime. */
.sl-when{font-size:13px;color:var(--tx-2);white-space:nowrap}
.sl-when.is-meta{color:color-mix(in srgb, var(--tx-2) 62%, transparent)}
.sl-name{font-size:18px;line-height:var(--h-lh);letter-spacing:var(--h3-ls);margin:0 0 7px}
.sl-name a{color:var(--tx);text-decoration:none}
.sl-name a:hover{color:var(--signal)}
/* ⚠️ Not italic. Two lines of italic secondary text is a slab of texture, and
   in a card whose job is "recognise this, then call" it was competing with both
   the advertiser above it and the number below. Regular DM Sans reads as
   context; italic read as a quotation demanding to be read. */
.sl-script{
  margin:0 0 16px;font-size:14.5px;line-height:1.5;color:var(--tx-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sl-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 color-mix(in srgb, var(--line) 80%, transparent);
}
/* The payoff line. Only the number gets the accent icon, and it is the only
   thing in the card allowed to look like an action. */
.sl-num{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--font-display);font-weight:800;font-size:18.5px;
  letter-spacing:-.025em;color:var(--tx);font-variant-numeric:tabular-nums;
  min-height:44px;
}
.sl-num .rar-i{color:var(--signal);flex-shrink:0}
.sl-num:hover{color:var(--signal)}
.sl-alt{
  font-family:var(--font-display);font-weight:800;font-size:15px;
  color:var(--ink-2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;
}
.sl-alt:hover{color:var(--signal)}
.sl-play{
  width:auto;height:auto;border-radius:10px;padding:8px 13px;flex-shrink:0;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:700;font-size:12.5px;
}
.sl-play .txt{white-space:nowrap}

/* Two small buttons at the track's own top-right — never a pair of giant
   floating chevrons over the cards. Rendered hidden in PHP and revealed by
   carousel.js, because arrows that do nothing are worse than no arrows. */
.rar-carousel-nav{display:flex;gap:8px}
.cnav{
  width:40px;height:40px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:var(--bg);border:1px solid var(--line);color:var(--ink-2);transition:.15s;
}
.cnav:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
.cnav:disabled{opacity:.35;cursor:default}
.cnav[data-carousel-prev] .rar-i{transform:rotate(180deg)}
/* ⚠️ Arrows at every width now. They were hidden below 820px on the theory
   that swiping is obvious — but a mouse in a narrow window has nothing to
   swipe with, and the carousel read as idle. Smaller on a phone, never gone. */
@media(max-width:820px){.cnav{width:36px;height:36px}}
.rar-track{cursor:grab}
.rar-track:active{cursor:grabbing}
.rar-track.is-dragged a{pointer-events:none}
/* Full-bleed track on small screens so the NEXT card actually peeks past the
   right edge — inside the wrap's 22px gutter the track ends exactly where the
   87vw card does, and "there is more this way" was invisible.
   ⚠️ Negative inline margins are the classic cause of horizontal overflow;
   this pair is exact (-22px margin against 22px padding) and the harness
   probes 320/375 on every run. */
@media(max-width:820px){
  .rar-track{
    margin-inline:-22px;padding-inline:22px;scroll-padding-inline:22px;
  }
}
@media(max-width:520px){
  .rar-track{grid-auto-columns:84vw;gap:14px}
  .rar-slide{padding:20px}
}

/* The section itself sets the room the carousel needs above it for its arrows. */
.rar-recent{position:relative}

/* --- three-step rail ------------------------------------------------------ */
/* A caption under the demonstration, not a section. Roughly 130px on desktop
   against the ~560px the full stepped version used to take directly beneath a
   demo that had already made the same point. */
/* ⚠️ No full-width rule across the top and no vertical rules between the steps.
   Four hairlines boxing three short captions turned this into a specification
   sheet; the numbers and the spacing carry the sequence on their own, and a
   short connector between steps says "then" without drawing a table. */
.rar-rail{
  list-style:none;margin:clamp(44px,5vw,64px) auto 0;padding:0;max-width:940px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);
}
.rail-step{display:flex;align-items:flex-start;gap:14px;padding:0;position:relative}
/* The connector: a short line from this step toward the next, sitting on the
   marker's centre line. Never after the last one. */
.rail-step:not(:last-child)::after{
  content:"";position:absolute;top:11px;left:100%;
  width:clamp(20px,3vw,40px);height:1px;background:var(--line);
}
.rail-n{
  font-family:var(--font-display);font-weight:900;font-size:12px;letter-spacing:.12em;
  color:var(--signal);flex-shrink:0;padding-top:3px;
}
.rail-body{min-width:0}
.rail-body strong{
  display:block;font-family:var(--font-display);font-weight:800;font-size:15.5px;
  letter-spacing:-.02em;color:var(--tx);
}
.rail-d{display:block;margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--tx-2)}
@media(max-width:820px){
  .rar-rail{grid-template-columns:1fr;gap:22px}
  .rail-step:not(:last-child)::after{
    /* Vertical now: the sequence still has to read as 01 → 02 → 03. */
    top:26px;left:5px;width:1px;height:22px;
  }
}

/* --- browse: three directory columns ------------------------------------- */
/* Hairlines and type, not cards. Three rounded boxes here would have made the
   fourth card grid on one page; a vertical rule between columns says the same
   thing and disappears when you are not looking for it. */
.rar-browse{
  display:grid;grid-template-columns:repeat(3,1fr);
  /* stretch, so the three "Browse …" links land on one line however uneven the
     lists above them are — the dataset decides the lists, not the layout. */
  gap:clamp(26px,4vw,56px);align-items:stretch;
}
.br-col{display:flex;flex-direction:column;min-width:0}
.br-col + .br-col{
  padding-left:clamp(26px,4vw,56px);
  margin-left:calc(clamp(26px,4vw,56px) * -1);
  border-left:1px solid var(--line);
}
.br-h{
  font-family:var(--font-display);font-weight:800;font-size:clamp(17px,1.8vw,20px);
  letter-spacing:-.02em;color:var(--tx);margin:0 0 6px;
}
.br-note{margin:0 0 20px;font-size:14px;line-height:1.5;color:var(--tx-2);max-width:30ch}
.br-list{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:1px}
.br-list a{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 0;text-decoration:none;color:var(--tx);
  border-bottom:1px solid color-mix(in srgb, var(--line) 65%, transparent);
  transition:color .14s ease;
}
.br-list li:last-child a{border-bottom:0}
.br-list .t{
  font-family:var(--font-display);font-weight:700;font-size:14.5px;
  letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.br-list .n{
  flex-shrink:0;font-size:12px;color:var(--tx-2);
  font-variant-numeric:tabular-nums;
}
.br-list a:hover,.br-list a:focus-visible{color:var(--signal)}
.br-list a:hover .n,.br-list a:focus-visible .n{color:var(--signal)}
/* A quiet directional cue on approach — 3px, and only on the item under the
   cursor or keyboard. This is still the secondary browse route; it should not
   start competing with the search. */
.br-list .t::after{
  content:"→";margin-left:7px;opacity:0;display:inline-block;
  transition:opacity .16s ease,transform .16s ease;transform:translateX(-3px);
}
.br-list a:hover .t::after,
.br-list a:focus-visible .t::after{opacity:1;transform:translateX(0)}
.br-all{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-family:var(--font-display);font-weight:800;font-size:14.5px;
  letter-spacing:-.01em;color:var(--ink-2);text-decoration:none;
}
.br-all:hover{color:var(--signal)}
.br-all .rar-i{transition:transform .16s ease}
.br-all:hover .rar-i{transform:translateX(3px)}

/* Stacked, with the rule turned horizontal. A column is allowed to be shorter
   than its neighbours — the dataset decides, not the layout. */
@media(max-width:860px){
  .rar-browse{grid-template-columns:1fr;gap:0}
  .br-col + .br-col{
    padding-left:0;margin-left:0;border-left:0;
    padding-top:28px;margin-top:28px;border-top:1px solid var(--line);
  }
  .br-note{max-width:none}
}

/* --- the commercial break ------------------------------------------------ */
/* The one place on the page where the audience changes, and the only band that
   is neither white nor tint nor navy — the ground shifts before a word is read.
   Deliberately asymmetric: the statement holds its own column and the two paths
   stack beside it as rows on a shared rule, because two equal cards floating in
   white space read as "features 4 and 5" and got scrolled past. */
.rar-break{
  background:var(--signal-soft);
  border-top:1px solid color-mix(in srgb, var(--signal) 20%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--signal) 20%, transparent);
  padding:clamp(76px,9.4vw,128px) 0;
}
.rar-break .wrap{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(30px,5vw,74px);align-items:start;
}
.break-head h2{
  font-size:clamp(26px,3.7vw,calc(var(--h2-max) * 1.06));
  line-height:var(--h-lh);letter-spacing:var(--h2-ls);max-width:15ch;margin:0 0 16px;
}
.break-head p{margin:0;max-width:40ch;font-size:16px;line-height:1.6;color:var(--tx-2)}

.break-paths{display:grid;gap:0;border-top:1px solid rgba(11,27,43,.12)}
.path{padding:26px 0;border-bottom:1px solid rgba(11,27,43,.12)}
.path:last-child{border-bottom:0;padding-bottom:0}
.path-who{
  display:block;font-family:var(--font-display);font-size:11.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--signal);margin-bottom:11px;
}
.path h3{font-size:clamp(17px,1.9vw,20px);line-height:var(--h-lh);letter-spacing:var(--h3-ls);margin:0 0 8px}
.path p{margin:0 0 16px;max-width:46ch;font-size:14.5px;line-height:1.6;color:var(--tx-2)}
/* Only the revenue action is a button. The station path is a text CTA, which is
   the asymmetry doing the prioritising instead of a "primary/secondary" pair of
   identical blobs. */
.path-go{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:-.01em;
  color:var(--ink);border-bottom:2px solid var(--signal);padding-bottom:3px;
}
.path-go:hover{color:var(--signal)}
.path-note{display:block;margin-top:13px;font-size:12.5px;color:var(--tx-2)}

@media(max-width:900px){
  .rar-break .wrap{grid-template-columns:1fr;gap:clamp(26px,4vw,38px)}
  .break-head h2,.break-head p{max-width:none}
}

/* ==========================================================================
   THE AUDIENCE PAGES — For advertisers, For radio stations

   Two readers, two compositions. The advertiser page shows the OBJECT — a real
   listing beside the headline — and everything after it is caption. The
   station page makes the ARGUMENT — attribution, in a dark editorial band —
   and shows the station page itself. If the two ever start sharing a shape
   again, that is the bug this pass fixed.
   ========================================================================== */

/* --- advertisers: hero with the card ------------------------------------- */
.rar-hero.is-adv{text-align:left;padding-bottom:clamp(40px,4.6vw,64px)}
.rar-hero.is-adv::before{left:auto;right:-8%;transform:none;width:min(720px,70vw)}
.adv-hero{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(30px,5vw,72px);align-items:center;
}
.adv-say .rar-eyebrow{margin-bottom:clamp(16px,2vw,22px)}
.adv-say h1{font-size:clamp(34px,4.6vw,58px);max-width:12ch}
.adv-say .rar-lede{margin-left:0;margin-right:0;max-width:44ch}
.adv-say .rar-reassure{justify-content:flex-start}
/* The card is the same result card the search page renders — it must read as
   a result, not as a hero illustration, so it keeps every one of its own
   styles and only gets a caption above and below. */
.adv-show{min-width:0}
.adv-show .demo-label{margin-bottom:10px}
.adv-show .rar-card{margin:0}
.adv-show .rar-card.is-top{padding:clamp(22px,2.4vw,30px)}
.adv-show .demo-note{margin-top:10px}
@media(max-width:900px){
  .adv-hero{grid-template-columns:1fr;gap:30px}
  .adv-say h1{max-width:none}
  .rar-hero.is-adv::before{right:auto;left:50%;transform:translateX(-50%)}
}

/* --- advertisers: proof --------------------------------------------------- */
.adv-proof{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(30px,5vw,72px);align-items:center;
}
.ap-say h2{font-size:clamp(26px,3.2vw,var(--h2-max));max-width:16ch;margin:0 0 14px}
.ap-say p{margin:0 0 12px;max-width:46ch;font-size:16px;line-height:1.65;color:var(--tx-2)}
.ap-say .ap-note{font-size:14.5px}
.ap-table{min-width:0}
.ap-table .demo-label{margin-bottom:10px}
/* ⚠️ `.rar-tally`, not `.rar-found` — that class already belongs to the
   "found N times" line on a single listing and collided on first render.
   The dashboard's own column, not a mock-up of one: every row is a real
   listing and every count is the real meta. Zero is zero. */
.rar-tally{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
}
.tally-head,.tally-row{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 110px;
  gap:14px;align-items:center;padding:14px 20px;
}
.tally-head{
  background:var(--surface);border-bottom:1px solid var(--line);
  font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tx-2);
}
.tally-row{border-bottom:1px solid var(--line);font-size:15px}
.tally-row:last-child{border-bottom:0}
.tr-name{font-weight:600;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-sta{color:var(--tx-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rar-tally .num{text-align:right}
.tally-row .num b{font-family:var(--font-display);font-size:20px;letter-spacing:-.02em;color:var(--ink)}
@media(max-width:900px){
  .adv-proof{grid-template-columns:1fr;gap:26px}
  .ap-say h2{max-width:none}
}
@media(max-width:480px){
  .tally-head,.tally-row{grid-template-columns:minmax(0,1fr) 84px;gap:10px;padding:12px 16px}
  .tally-head span:nth-child(2),.tally-row .tr-sta{display:none}
}

/* The closing band with a button instead of a search box. */
.rar-closing.is-cta p.closing-alt{color:#9FB3C4;font-size:14.5px;max-width:none}
.rar-closing.is-cta .closing-alt a{margin-left:4px}

/* --- stations: hero actions ---------------------------------------------- */
.hero-acts{
  display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;margin:0;
}
.hero-alt{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-family:var(--font-display);font-weight:700;font-size:15px;
  letter-spacing:-.01em;color:var(--ink);
}
.hero-alt .rar-i{color:var(--ink-2);transition:transform .16s ease,color .16s ease}
.hero-alt:hover,.hero-alt:focus-visible{color:var(--signal)}
.hero-alt:hover .rar-i,.hero-alt:focus-visible .rar-i{color:var(--signal);transform:translateX(3px)}

/* --- stations: the argument (dark) --------------------------------------- */
/* Left-set, not centred: a statement to a sales manager, not a headline to a
   crowd. The three items are a numbered list — their numbers, in order — on a
   hairline, not three cards. */
.rar-sta-argue{padding:clamp(64px,7.6vw,104px) 0}
.rar-sta-argue .sec-head.is-left{max-width:60ch;margin-bottom:clamp(30px,3.6vw,46px)}
.rar-sta-argue .sec-head h2{font-size:clamp(32px,4.6vw,calc(var(--h2-max) * 1.3))}
.rar-sta-argue .sec-head p{max-width:58ch;font-size:16.5px}
.sta-gets{
  list-style:none;margin:0;padding:0;counter-reset:g;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,40px);
  border-top:1px solid rgba(255,255,255,.14);padding-top:clamp(24px,2.8vw,34px);
}
.sta-gets li{counter-increment:g;position:relative;padding-left:44px}
.sta-gets li::before{
  content:"0" counter(g);position:absolute;left:0;top:2px;
  font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--signal-lt);
}
.sta-gets strong{
  display:block;font-family:var(--font-display);font-weight:700;font-size:18px;
  letter-spacing:-.02em;color:#fff;margin-bottom:8px;
}
.sta-gets span{display:block;font-size:15px;line-height:1.6;color:#A8BCCB}
@media(max-width:820px){.sta-gets{grid-template-columns:1fr;gap:22px}}

/* --- stations: the station page, in miniature --------------------------- */
.rar-sta-preview{max-width:1080px;margin:0 auto}
.sp-frame{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(18px,2.4vw,28px);overflow:hidden;
}
.sp-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.sp-head .eyebrow{color:var(--tx-2)}
.sp-head strong{font-family:var(--font-display);font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em;color:var(--ink)}
.sp-count{font-size:14px;color:var(--tx-2)}
/* The homepage track bleeds to the viewport edge on a phone; inside a framed
   preview it must stay inside the frame. */
@media(max-width:760px){
  .sp-frame .rar-track{margin-inline:0;padding-inline:0;scroll-padding-inline:0}
}
.sp-link{margin:16px 0 0;text-align:right}
.sp-link a{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink);
}
.sp-link a .rar-i{color:var(--ink-2);transition:transform .16s ease,color .16s ease}
.sp-link a:hover,.sp-link a:focus-visible{color:var(--signal)}
.sp-link a:hover .rar-i,.sp-link a:focus-visible .rar-i{color:var(--signal);transform:translateX(3px)}

/* The one thing a station can act on today: the link, ready to paste. A code
   box, deliberately plain — it is a thing to copy, not a thing to admire. */
.rar-snippet{max-width:1080px;margin:clamp(22px,2.6vw,32px) auto 0}
.sn-label{
  display:block;font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tx-2);margin-bottom:8px;
}
.sn-code{
  margin:0;padding:16px 18px;background:var(--ink);color:#DCE6EE;border-radius:var(--radius);
  font-size:13.5px;line-height:1.55;overflow-x:auto;white-space:pre-wrap;word-break:break-all;
}
.sn-code:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.sn-note{display:block;margin-top:8px;font-size:13.5px;color:var(--tx-2)}

/* --- stations: what it takes -------------------------------------------- */
.sta-takes{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(30px,5vw,72px);align-items:start;
}
.st-say h2{font-size:clamp(26px,3.2vw,var(--h2-max));max-width:14ch;margin:0 0 14px}
.st-say p{margin:0;max-width:46ch;font-size:15.5px;line-height:1.65;color:var(--tx-2)}
@media(max-width:900px){
  .sta-takes{grid-template-columns:1fr;gap:24px}
  .st-say h2{max-width:none}
}

/* What happens next — three lines over the form, no timelines. */
.sta-next{
  list-style:none;margin:0 auto clamp(22px,2.6vw,30px);padding:0;counter-reset:n;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
}
.sta-next li{
  counter-increment:n;position:relative;padding:14px 16px 14px 46px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  font-size:14.5px;line-height:1.5;color:var(--tx);
}
.sta-next li::before{
  content:counter(n);position:absolute;left:14px;top:13px;width:22px;height:22px;
  border-radius:50%;background:var(--signal);color:#fff;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:12px;
}
@media(max-width:640px){.sta-next{grid-template-columns:1fr}}

/* --- closing search ------------------------------------------------------ */
/* The last utility action, on the footer's own navy so the two run together.
   It is a search box with a sentence over it, not another marketing band —
   the page ends by giving something back rather than asking for something. */
.rar-closing{
  background:var(--ink);color:#fff;text-align:center;
  padding:clamp(52px,6vw,80px) 0 clamp(34px,3.6vw,48px);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.rar-closing h2{color:#fff;margin:0 0 10px}
.rar-closing p{margin:0 auto clamp(24px,3vw,32px);max-width:44ch;font-size:16px;color:#9FB3C4}
.rar-closing .rar-search{max-width:min(680px,100%)}
.rar-closing .rar-field{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);box-shadow:none;
}
.rar-closing .rar-field:focus-within{
  border-color:var(--signal-lt);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--signal) 22%, transparent);
}
.rar-closing .rar-field input{color:#fff}
.rar-closing .rar-field input::placeholder{color:#7E93A5}
.rar-closing .rar-field .icon{color:#8CA0B2}
.rar-closing .rar-mic{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);color:#fff}
.rar-closing .rar-mic:hover{background:var(--signal);border-color:var(--signal)}

/* ==========================================================================
   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:var(--h3-ls)}
.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}


@media (prefers-reduced-motion: reduce){
}

/* --- 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}

/* How It Works 0.30: asymmetric introduction and an editorial examples index.
   Scoped to this page; shared demo state and homepage composition stay intact. */
.hiw-intro.rar-hero{background:var(--bg);text-align:left;padding:clamp(40px,6vw,84px) 0}
.hiw-intro::before,.hiw-intro::after{display:none}
.hiw-intro-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:clamp(28px,5vw,72px)}
.hiw-intro-copy,.hiw-intro-search{min-width:0}
.hiw-intro.rar-hero h1{font-size:clamp(var(--h1-min),4.8vw,var(--h1-max));max-width:12ch;line-height:var(--h-lh);margin:0 0 22px;text-wrap:balance}
.hiw-intro.rar-hero p.sub{margin:0;max-width:43ch}
.hiw-intro-search{padding:clamp(20px,2.5vw,36px);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
.hiw-intro-search .rar-field{padding-left:16px;border-radius:var(--radius)}
.hiw-intro-search .rar-go{min-width:0;padding-inline:18px}
.hiw-intro-search .rar-field input{font-size:15px}
.hiw-proof.rar-section{padding-block:clamp(36px,5vw,64px)}
.hiw-proof .sec-head{max-width:none;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);column-gap:50px;text-align:left;margin-bottom:30px}
.hiw-proof .sec-head .eyebrow{grid-column:1/-1;justify-content:flex-start}
.hiw-proof .sec-head h2{font-size:clamp(28px,3.2vw,var(--h2-max));margin:0;max-width:24ch}
.hiw-proof .sec-head p{margin:0;align-self:end;max-width:34ch}
.hiw-proof .rar-stage{background:var(--bg);border-color:var(--line);box-shadow:var(--shadow-sm)}
.hiw-explore-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px 64px;align-items:start}
.hiw-explore .sec-head{text-align:left;margin:0;max-width:none}
.hiw-explore .sec-head .eyebrow{justify-content:flex-start}
.hiw-explore .sec-head h2{max-width:14ch;font-size:clamp(28px,3.4vw,var(--h2-max))}
.hiw-explore .sec-head p{margin:0;max-width:35ch}
.hiw-explore .rar-ways{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;margin:0;gap:12px}
.hiw-explore .rar-ways li{min-width:0}
.hiw-explore .rar-ways a{height:100%;padding:22px 38px 22px 20px;position:relative;gap:9px}
.hiw-explore .rar-ways a::after{content:'↗';position:absolute;right:16px;top:19px;color:var(--ink-2)}
.hiw-explore .rar-ways a:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.hiw-explore .way-v{font-size:18px;line-height:1.4;overflow-wrap:anywhere}
.hiw-explore .way-voice{padding:20px}
.hiw-explore .rar-ways-note{grid-column:2;margin:0;font-size:14px}
.hiw-browse .rar-hiw-merge{max-width:1240px;gap:clamp(32px,6vw,80px)}
.hiw-browse .hm-know{padding:28px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg)}
@media(max-width:1080px){
 .hiw-intro-grid{grid-template-columns:1fr;gap:28px}
 .hiw-intro.rar-hero h1{max-width:20ch}
 .hiw-intro.rar-hero p.sub{max-width:60ch}
 .hiw-intro-search{max-width:800px;width:100%}
 .hiw-proof .sec-head{grid-template-columns:1fr;gap:14px}
 .hiw-proof .sec-head p{max-width:60ch}
 .hiw-explore-grid{grid-template-columns:1fr;gap:28px}
 .hiw-explore .sec-head h2,.hiw-explore .sec-head p{max-width:100%}
 .hiw-explore .rar-ways-note{grid-column:1}
}
@media(max-width:540px){
 .hiw-intro-search{padding:16px 12px}
 .hiw-intro-search .rar-field{padding-left:12px}
 .hiw-intro-search .rar-go{padding-inline:12px}
 .hiw-explore .rar-ways{grid-template-columns:1fr}
 .hiw-explore .rar-ways a{padding-block:18px}
 .hiw-browse .hm-know{padding:22px}
}

/* 0.31: explain the journey, with a readable directory example throughout. */
.hiw-intro.rar-hero{padding-block:clamp(38px,5vw,68px)}
.hiw-intro-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.hiw-intro.rar-hero h1{max-width:17ch}
.hiw-intro-search{background:var(--ink);color:var(--bg);padding:28px 32px;border:0}
.hiw-overview{list-style:none;padding:0;margin:0;display:grid;gap:0}
.hiw-overview li{display:flex;align-items:center;gap:20px;padding:18px 0}
.hiw-overview li+li{border-top:1px solid color-mix(in srgb,var(--bg) 20%,transparent)}
.hiw-overview span{color:var(--signal);font:700 14px var(--font-display)}
.hiw-overview strong{font:700 clamp(18px,2vw,24px) var(--font-display);letter-spacing:-.02em}
.hiw-proof .rar-stage{padding:clamp(22px,3vw,40px)}
.hiw-proof .rar-stage .demo-query{background:var(--signal-soft);border:0;border-left:3px solid var(--signal);border-radius:0;min-height:0;padding:18px;font-size:clamp(19px,2vw,25px);font-family:var(--font-display);line-height:1.35}
.hiw-proof .demo-query > svg{display:none}
.hiw-guide{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:20px}
.hiw-guide li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start}
.hiw-guide-n{font:700 12px var(--font-display);color:var(--signal);padding-top:4px}
.hiw-guide h3{font-size:19px;margin:0 0 6px;letter-spacing:var(--h3-ls)}
.hiw-guide p{font-size:14.5px;line-height:1.6;color:var(--tx-2);margin:0;max-width:43ch}
.hiw-proof .rar-stage .demo-ask .demo-note{margin-top:22px;font-size:12px}
.hiw-proof .rar-stage .rar-rail{display:none}
.hiw-proof .rar-stage .demo-hit{align-self:center}
.hiw-proof .rar-stage .demo-arrow{margin-top:0;align-self:center}
.hiw-proof .rar-stage .hit-stack > .rar-card.is-on,
.hiw-proof .rar-stage .rar-payoff,
.hiw-proof .rar-stage .rar-second{opacity:1}
.hiw-proof .rar-stage .rar-card.is-top{border:1px solid var(--line);box-shadow:var(--shadow-sm);background:var(--surface)}
.hiw-proof .rar-stage .rar-quote{font-style:normal;font-size:18px;line-height:1.65}
.hiw-proof .rar-stage .demo-label{color:var(--ink-2)}
@media(max-width:1080px){
 .hiw-intro-grid{grid-template-columns:1fr}
 .hiw-overview{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
 .hiw-overview li{display:grid;gap:10px;padding:0;align-content:start}
 .hiw-overview li+li{border:0}
 .hiw-proof .rar-stage .demo-arrow{justify-self:center}
}
@media(max-width:540px){
 .hiw-overview{grid-template-columns:1fr;gap:16px}
 .hiw-overview li{display:flex;gap:16px}
 .hiw-intro-search{padding:24px}
 .hiw-proof .rar-stage .rar-card.is-top{padding:20px}
 .hiw-proof .rar-stage .rar-phone{font-size:clamp(24px,7vw,36px)}
 .hiw-proof .rar-stage .demo-query{font-size:20px}
}