:root {
  --saas-night: #080a0d;
  --saas-panel: #11151a;
  --saas-panel-raised: #171c23;
  --saas-paper: #f2f4f7;
  --saas-white: #ffffff;
  --saas-ink: #101319;
  --saas-muted: #68707d;
  --saas-accent: #087a58;
  --saas-accent-bright: #0b946a;
  --saas-mint: #7af0c1;
  --saas-green: #68e18f;
  --saas-line: rgba(16, 19, 25, 0.12);
  --saas-line-dark: rgba(255, 255, 255, 0.12);
  --saas-content: 1180px;
}

html {
  background: var(--saas-night);
  color-scheme: light;
}

body {
  background: var(--saas-paper);
  color: var(--saas-ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::before { display: none; }

::selection {
  background: var(--saas-accent);
  color: var(--saas-white);
}

.siteHeader {
  min-height: 72px;
  border-bottom: 1px solid var(--saas-line-dark);
  background: rgba(8, 10, 13, 0.92);
  backdrop-filter: blur(22px) saturate(130%);
}

.siteHeaderInner {
  width: min(calc(100% - 40px), var(--saas-content));
  min-height: 72px;
}

.siteBrand,
.siteBrand img {
  width: 190px;
}

.siteBrand img {
  height: 50px;
  filter: none;
  object-fit: contain;
  object-position: left center;
}

.siteNav {
  gap: 2px;
}

.siteNav > a {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0 12px;
  color: #9ba4b1;
  font-size: 12px;
  font-weight: 650;
}

.siteNav > a:hover {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.siteNav > a[aria-current="page"] {
  border-color: rgba(122, 240, 193, 0.18);
  background: rgba(8, 122, 88, 0.16);
  color: #fff;
}

.headerLogin {
  color: #b5bdc8;
  font-size: 12px;
  font-weight: 650;
}

.headerLogin:hover { color: #fff; }

.headerCta,
.buttonPrimary,
.buttonSecondary {
  min-height: 44px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
}

.headerCta,
.buttonPrimary {
  border: 1px solid var(--saas-accent-bright);
  background: var(--saas-accent);
  color: #fff;
  box-shadow: none;
}

.headerCta:hover,
.buttonPrimary:hover {
  border-color: #26b887;
  background: var(--saas-accent-bright);
  color: #fff;
  transform: translateY(-1px);
}

.buttonSecondary {
  border: 1px solid rgba(16, 19, 25, 0.18);
  background: transparent;
  color: var(--saas-ink);
}

.buttonSecondary:hover {
  border-color: var(--saas-accent);
  background: transparent;
  color: var(--saas-accent);
  transform: translateY(-1px);
}

.navToggle {
  width: 42px;
  height: 42px;
  border: 1px solid var(--saas-line-dark);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
}

.commercialHero {
  height: auto;
  min-height: 0;
  overflow: hidden;
  background: var(--saas-night);
  color: #f8fafc;
}

.heroProductBackground {
  top: 32px;
  width: 300px;
  height: 300px;
  background-image: url("/assets/radioapp-logo-silver.png");
  background-size: contain;
  opacity: 0.96;
}

.heroProductBackground::before,
.heroProductBackground::after { display: none; }

.heroInner {
  width: min(calc(100% - 48px), var(--saas-content));
  height: auto;
  min-height: 0;
  align-items: flex-start;
  padding: 346px 0 50px;
}

.heroCopy {
  width: min(100%, 1040px);
}

.eyebrow {
  color: var(--saas-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.commercialHero .eyebrow {
  color: var(--saas-mint);
}

.commercialHero h1 {
  max-width: 1040px;
  margin-top: 12px;
  font-size: 72px;
  font-weight: 760;
  line-height: 0.98;
}

.heroLead {
  max-width: 720px;
  margin-top: 22px;
  color: #a7b0bd;
  font-size: 19px;
}

.heroActions {
  gap: 10px;
  margin-top: 28px;
}

.commercialHero .buttonSecondary,
.is-contrast .buttonSecondary,
.is-product-stage .buttonSecondary {
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.commercialHero .buttonSecondary:hover,
.is-contrast .buttonSecondary:hover,
.is-product-stage .buttonSecondary:hover {
  border-color: var(--saas-mint);
  color: var(--saas-mint);
}

.heroSignalBar {
  width: min(100%, 820px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 30px auto 0;
  overflow: hidden;
  border: 1px solid var(--saas-line-dark);
  border-radius: 8px;
  background: var(--saas-line-dark);
  text-align: left;
}

.heroSignal {
  min-height: 70px;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  align-content: center;
  gap: 3px 10px;
  background: #0e1116;
  padding: 14px 18px;
}

.heroSignal i {
  width: 7px;
  height: 7px;
  align-self: center;
  border-radius: 50%;
  background: var(--saas-green);
  box-shadow: 0 0 0 4px rgba(104, 225, 143, 0.1);
}

.heroSignal strong {
  color: #eef2f7;
  font-size: 12px;
  font-weight: 700;
}

.heroSignal span {
  grid-column: 2;
  color: #737e8d;
  font-size: 10px;
  line-height: 1.35;
}

.heroProof { display: none !important; }

.sectionBand {
  border: 0;
  background: var(--saas-white);
  color: var(--saas-ink);
}

.sectionBand + .sectionBand { border-top: 1px solid var(--saas-line); }

.sectionBand.is-soft {
  background: var(--saas-paper);
  color: var(--saas-ink);
}

.sectionBand.is-contrast,
.sectionBand.is-product-stage {
  background: var(--saas-night);
  color: #f7f9fc;
}

.sectionInner {
  width: min(calc(100% - 48px), var(--saas-content));
  padding: 116px 0;
}

.sectionHeader {
  align-items: flex-end;
  gap: 36px;
  margin-bottom: 52px;
}

.sectionHeader > div:first-child { max-width: 800px; }

.sectionHeader h2,
.pageSection h2,
.closingCta h2,
.previewCopy h2 {
  margin-top: 12px;
  color: inherit;
  font-size: 50px;
  font-weight: 740;
  line-height: 1.04;
}

.sectionHeader p:not(.eyebrow),
.pageSection > p,
.closingCta p,
.previewCopy > p:not(.eyebrow) {
  max-width: 720px;
  margin-top: 18px;
  color: var(--saas-muted);
  font-size: 17px;
  line-height: 1.55;
}

.sectionBand.is-contrast .sectionHeader p:not(.eyebrow),
.sectionBand.is-contrast .closingCta p,
.sectionBand.is-product-stage .previewCopy > p:not(.eyebrow) {
  color: #8f99a8;
}

.proofBar {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--saas-line-dark);
}

.proofItem {
  min-height: 142px;
  border: 0;
  background: #0e1116;
  padding: 30px;
}

.proofItem strong {
  color: #f5f7fa;
  font-size: 31px;
  font-weight: 740;
}

.proofItem span {
  max-width: 220px;
  color: #778190;
  font-size: 12px;
  line-height: 1.45;
}

.sectionBand.is-soft[aria-label="Radioapp en bref"] {
  background: var(--saas-night);
}

.is-product-stage .sectionInner {
  padding-top: 128px;
  padding-bottom: 128px;
}

.productPreviewLayout {
  grid-template-columns: minmax(0, 0.7fr) minmax(560px, 1.3fr);
  gap: 80px;
}

.is-product-stage .previewCopy h2 { color: #fff; }

.previewChecklist {
  gap: 0;
  margin-top: 30px;
  border-top: 1px solid var(--saas-line-dark);
}

.previewChecklist li {
  min-height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--saas-line-dark);
  color: #aeb7c3;
  font-size: 13px;
}

.previewChecklist li::before {
  width: 6px;
  height: 6px;
  background: var(--saas-mint);
}

.textLink {
  color: var(--saas-accent);
  font-size: 14px;
  font-weight: 750;
}

.is-product-stage .textLink { color: var(--saas-mint); }
.textLink:hover { color: var(--saas-accent-bright); }

.previewTool {
  border: 1px solid rgba(122, 240, 193, 0.2);
  border-radius: 8px;
  background: #050608;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.44);
}

.previewToolbar {
  min-height: 62px;
  border-bottom: 1px solid var(--saas-line-dark);
  background: #10141a;
}

.previewToolbar > span {
  color: #dfe5ec;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.segmentedControl,
.billingToggle {
  border: 1px solid rgba(16, 19, 25, 0.1);
  border-radius: 7px;
  background: #e4e8ed;
  padding: 3px;
}

.segmentedControl {
  border-color: var(--saas-line-dark);
  background: #191e25;
}

.segmentedControl button,
.billingToggle button {
  min-height: 34px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
}

.segmentedControl button { color: #8d97a5; }

.segmentedControl button[aria-selected="true"],
.segmentedControl button[aria-pressed="true"] {
  background: var(--saas-accent);
  color: #fff;
}

.billingToggle button[aria-pressed="true"] {
  background: #fff;
  color: var(--saas-ink);
  box-shadow: none;
}

.previewViewport {
  min-height: 630px;
  background: #050608;
}

.previewDevice {
  position: relative;
  border-color: #303844;
  border-radius: 7px;
  background: #000;
}

.previewDesktopChrome,
.previewEchoCamera {
  display: none;
}

.previewTool[data-device="desktop"] .previewDevice {
  width: 100%;
  max-width: 1120px;
  overflow: hidden;
  border: 1px solid #363e49;
  border-radius: 12px;
  background: #0b0e12;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
}

.previewTool[data-device="desktop"] .previewViewport,
.previewTool[data-device="echo"] .previewViewport {
  min-height: 520px;
  align-content: center;
}

.previewTool[data-device="desktop"] .previewDesktopChrome {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 42px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 92px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 14px;
  background: #171c22;
}

.previewWindowControls {
  display: flex;
  align-items: center;
  gap: 7px;
}

.previewWindowControls i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #59616d;
}

.previewWindowControls i:first-child { background: #ff6c62; }
.previewWindowControls i:nth-child(2) { background: #f5bf4f; }
.previewWindowControls i:last-child { background: #61c454; }

.previewAddress {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 14px;
  background: #0d1116;
  color: #9da7b4;
  font-size: 10px;
  font-weight: 650;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.previewSecureMark {
  color: #7bd9ae;
  font-size: 9px;
  font-weight: 750;
  text-align: right;
  text-transform: uppercase;
}

.previewTool[data-device="desktop"] .previewDevice iframe,
.previewTool[data-device="echo"] .previewDevice iframe {
  position: absolute;
  max-width: none;
  border: 0;
}

.previewTool[data-device="echo"] .previewDevice {
  width: min(100%, 760px);
  overflow: hidden;
  border: 10px solid #282d34;
  border-radius: 18px;
  background: #080a0d;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.previewTool[data-device="echo"] .previewEchoCamera {
  position: absolute;
  z-index: 3;
  top: 5px;
  left: 50%;
  display: block;
  width: 5px;
  height: 5px;
  border: 1px solid #525b67;
  border-radius: 50%;
  background: #07090b;
  transform: translateX(-50%);
}

.is-saas-bento {
  background: #e9edf2;
}

.is-saas-bento .featureGrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.is-saas-bento .featureCard {
  min-height: 320px;
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(16, 19, 25, 0.08);
  border-radius: 8px;
  background: #fff;
  padding: 34px;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.is-saas-bento .featureCard:nth-child(1),
.is-saas-bento .featureCard:nth-child(5) { grid-column: span 7; }

.is-saas-bento .featureCard:nth-child(2),
.is-saas-bento .featureCard:nth-child(4) { grid-column: span 5; }

.is-saas-bento .featureCard:nth-child(1) {
  background: var(--saas-night);
  color: #fff;
}

.is-saas-bento .featureCard:nth-child(2) {
  border-color: var(--saas-accent);
  background: var(--saas-accent);
  color: #fff;
}

.is-saas-bento .featureCard:hover {
  border-color: rgba(8, 122, 88, 0.28);
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.12);
  transform: translateY(-4px);
}

.is-saas-bento .featureIcon {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(16, 19, 25, 0.08);
  border-radius: 7px;
  background: #eef1f5;
}

.is-saas-bento .featureCard:nth-child(1) .featureIcon,
.is-saas-bento .featureCard:nth-child(2) .featureIcon {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
}

.is-saas-bento .featureCard:nth-child(1) .featureIcon img,
.is-saas-bento .featureCard:nth-child(2) .featureIcon img { filter: brightness(0) invert(1); }

.is-saas-bento .featureCard h3 {
  margin-top: auto;
  color: inherit;
  font-size: 28px;
}

.is-saas-bento .featureCard p {
  color: var(--saas-muted);
  font-size: 14px;
}

.is-saas-bento .featureCard:nth-child(1) p,
.is-saas-bento .featureCard:nth-child(2) p { color: rgba(255, 255, 255, 0.68); }

.planGrid {
  gap: 12px;
}

.planCard {
  min-height: 590px;
  border: 1px solid var(--saas-line);
  border-radius: 8px;
  background: #fff;
  padding: 32px;
  color: var(--saas-ink);
}

.planCard.is-featured {
  border-color: var(--saas-accent);
  background: var(--saas-accent);
  color: #fff;
  box-shadow: 0 26px 70px rgba(8, 122, 88, 0.22);
  transform: translateY(-10px);
}

.planBadge {
  border-radius: 5px;
  background: #fff;
  color: var(--saas-accent);
  font-size: 10px;
  font-weight: 850;
}

.planName {
  color: var(--saas-accent);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.planCard.is-featured .planName { color: #d9f8ec; }
.planTitle { font-size: 26px; }
.planDescription { color: var(--saas-muted); font-size: 14px; }
.planPrice strong { font-size: 48px; }
.planPrice span { color: var(--saas-muted); }
.planFeatures { border-top-color: var(--saas-line); }
.planFeatures li { color: #454c57; font-size: 13px; }
.planFeatures li::before { color: var(--saas-accent); }
.planCard.is-featured .planDescription,
.planCard.is-featured .planPrice span,
.planCard.is-featured .planFeatures li { color: rgba(255, 255, 255, 0.76); }
.planCard.is-featured .planFeatures { border-top-color: rgba(255, 255, 255, 0.2); }
.planCard.is-featured .planFeatures li::before { color: var(--saas-mint); }
.planCard.is-featured .buttonPrimary { border-color: #fff; background: #fff; color: var(--saas-accent); }

.processGrid {
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--saas-line);
  border-radius: 8px;
  background: var(--saas-line);
}

.processStep {
  min-height: 310px;
  border: 0;
  border-radius: 0;
  background: #fff;
  padding: 34px;
}

.processStep span {
  color: var(--saas-accent);
  font-size: 11px;
  font-weight: 850;
}

.processStep h3 {
  margin-top: 86px;
  color: var(--saas-ink);
  font-size: 25px;
}

.processStep p { color: var(--saas-muted); font-size: 14px; }

.faqList {
  border-top: 1px solid var(--saas-line);
}

.faqList details { border-bottom-color: var(--saas-line); }
.faqList summary { min-height: 82px; color: var(--saas-ink); font-size: 17px; }
.faqList summary::after { color: var(--saas-accent); }
.faqList details p { color: var(--saas-muted); }

.pageIntro {
  min-height: 560px;
  overflow: hidden;
  background-color: var(--saas-night);
  background-image: url("/assets/radioapp-icon-256.png");
  background-position: calc(100% - max(32px, calc((100% - var(--saas-content)) / 2))) center;
  background-repeat: no-repeat;
  background-size: 300px;
  color: #fff;
}

.pageIntro::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--saas-line-dark);
  content: "";
}

.pageIntroInner {
  width: min(calc(100% - 48px), var(--saas-content));
  padding: 150px 360px 92px 0;
}

.pageIntro h1 {
  max-width: 820px;
  margin: 14px 0 0;
  font-size: 64px;
  font-weight: 760;
  line-height: 1;
}

.pageLead {
  max-width: 690px;
  margin: 24px 0 0;
  color: #97a1af;
  font-size: 18px;
}

.pageSection { margin-top: 110px; }
.pageSection:first-child { margin-top: 0; }

.featureRows {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border: 0;
  background: transparent;
}

.featureRow {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--saas-line);
  border-radius: 8px;
  background: #f7f8fa;
  padding: 32px;
}

.featureRow:nth-child(4n + 1) {
  background: var(--saas-night);
  color: #fff;
}

.featureRow:nth-child(4n + 2) {
  border-color: var(--saas-accent);
  background: var(--saas-accent);
  color: #fff;
}

.featureRow h3 {
  margin-top: auto;
  color: inherit;
  font-size: 27px;
}

.featureRow p {
  color: var(--saas-muted);
  font-size: 14px;
}

.featureRow:nth-child(4n + 1) p,
.featureRow:nth-child(4n + 2) p { color: rgba(255, 255, 255, 0.7); }

.comparisonWrap {
  border: 1px solid var(--saas-line);
  border-radius: 8px;
  background: #fff;
}

.comparisonTable th,
.comparisonTable td {
  border-bottom-color: var(--saas-line);
  padding: 20px;
  font-size: 13px;
}

.comparisonTable th { color: var(--saas-ink); }
.comparisonTable td { color: var(--saas-muted); }
.comparisonTable td[data-yes="true"] { color: var(--saas-accent); font-weight: 750; }

.directorySummary {
  border: 1px solid var(--saas-line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

.directorySummary span { min-width: 92px; padding: 8px 12px; }
.directorySummary strong { color: var(--saas-ink); font-size: 22px; }
.directorySummary small { color: var(--saas-muted); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; }

.directoryTools {
  gap: 10px;
  border: 1px solid var(--saas-line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.searchField,
.selectField {
  min-height: 48px;
  border: 1px solid var(--saas-line);
  border-radius: 7px;
  background: #f7f8fa;
}

.searchField:focus-within,
.selectField:focus-within { border-color: var(--saas-accent); box-shadow: 0 0 0 3px rgba(8, 122, 88, 0.1); }
.searchField input,
.selectField select { color: var(--saas-ink); font-size: 13px; }

.radioGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px 16px;
  border: 0;
  background: transparent;
}

.stationCard {
  overflow: hidden;
  border: 1px solid var(--saas-line);
  border-radius: 8px;
  background: #fff;
  color: var(--saas-ink);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.stationCard:hover {
  box-shadow: 0 24px 58px rgba(16, 24, 40, 0.13);
  transform: translateY(-4px);
}

.stationArtwork { border: 0; border-radius: 0; }
.stationBody { padding: 18px; }
.stationBody h3 { color: var(--saas-ink); font-size: 15px; }
.stationTrack { color: var(--saas-ink); font-size: 12px; }
.stationArtist { color: var(--saas-muted); font-size: 11px; }
.stationOpen { color: var(--saas-accent); font-size: 12px; font-weight: 750; }
.stationDetails { border-radius: 6px; background: #edf0f4; color: var(--saas-ink); }

.radioSkeleton { border-radius: 8px; background: #e6e9ee; }

.is-directory-wall {
  background: #090b0e;
  color: #f4f6f8;
}

.is-directory-wall .sectionHeader {
  align-items: flex-end;
  border-bottom: 0;
}

.is-directory-wall .sectionHeader h2 { color: #f4f6f8; }
.is-directory-wall .sectionHeader p:not(.eyebrow) { color: #8a929e; }

.is-directory-wall .directorySummary {
  display: grid;
  grid-template-columns: repeat(2, minmax(92px, auto));
  border: 0;
  border-top: 1px solid #272b31;
  border-bottom: 1px solid #272b31;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.is-directory-wall .directorySummary span {
  min-width: 92px;
  min-height: 64px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 8px 18px;
}

.is-directory-wall .directorySummary span + span { border-left: 1px solid #272b31; }
.is-directory-wall .directorySummary strong { color: #f5f7fa; font-size: 20px; }
.is-directory-wall .directorySummary small { color: #626a76; font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; }

.is-directory-wall .directoryTools {
  width: min(100%, 520px);
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.is-directory-wall .searchField {
  min-height: 46px;
  border: 1px solid #30343b;
  border-radius: 7px;
  background: #12151a;
}

.is-directory-wall .searchField:focus-within {
  border-color: #6c747f;
  background: #171b21;
  box-shadow: none;
}

.is-directory-wall .searchField img { filter: brightness(0) invert(1); opacity: 0.46; }
.is-directory-wall .searchField input { color: #f3f5f7; font-size: 12px; }
.is-directory-wall .searchField input::placeholder { color: #666d77; }

.is-directory-wall .radioGrid {
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 210px));
  gap: 26px 14px;
}

.is-directory-wall .stationCard {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f1f3f5;
}

.is-directory-wall .stationCard:hover {
  box-shadow: none;
  transform: translateY(-4px);
}

.is-directory-wall .stationArtwork {
  border: 1px solid #2c3037;
  border-radius: 7px;
  background: #1b1d22;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
}

.is-directory-wall .stationArtworkLink:hover .stationArtwork {
  border-color: #59616d;
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.3);
}

.is-directory-wall .stationArtwork > img:last-child {
  width: 44px;
  height: 44px;
  bottom: 9px;
  left: 9px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  background: rgba(8, 9, 11, 0.88);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
}

.is-directory-wall .stationArtwork::after {
  width: 38px;
  height: 38px;
  right: 9px;
  bottom: 9px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(10, 11, 13, 0.84);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.is-directory-wall .stationBody { padding: 11px 2px 0; }
.is-directory-wall .stationBody h3 { color: #f1f2f4; font-size: 12px; }
.is-directory-wall .stationTitleLink:hover { color: #fff; }
.is-directory-wall .stationTrack { margin-top: 6px; color: #aeb2ba; font-size: 10px; }
.is-directory-wall .stationArtist { margin-top: 4px; color: #666b74; font-size: 8px; }
.is-directory-wall .stationActions { display: none; }
.is-directory-wall .radioSkeleton { border: 1px solid #2c3037; border-radius: 7px; background: #171a1f; }
.is-directory-wall .directoryEmpty { border-color: #2c3037; background: #12151a; color: #7e8793; }
.is-directory-wall .legalNote { border-color: #252a31; color: #626a75; }
.is-directory-wall .textLink { color: var(--saas-mint); }

.aboutGrid {
  gap: 12px;
}

.aboutPanel {
  min-height: 390px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--saas-line);
  border-radius: 8px;
  background: #f7f8fa;
  padding: 38px;
}

.aboutPanel:nth-child(2),
.aboutPanel:nth-child(3) {
  border-color: var(--saas-night);
  background: var(--saas-night);
  color: #fff;
}

.aboutPanel h2 {
  margin-top: auto;
  color: inherit;
  font-size: 34px;
}

.aboutPanel p:not(.eyebrow) { color: var(--saas-muted); font-size: 15px; }
.aboutPanel:nth-child(2) p:not(.eyebrow),
.aboutPanel:nth-child(3) p:not(.eyebrow) { color: #929ba8; }

.contactLayout {
  grid-template-columns: minmax(0, 0.75fr) minmax(540px, 1.25fr);
  gap: 70px;
}

.contactAside h2 { color: var(--saas-ink); font-size: 48px; }
.contactAside p { color: var(--saas-muted); font-size: 16px; }
.contactDirect a { color: var(--saas-ink); }

.contactForm {
  border: 1px solid var(--saas-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(16, 24, 40, 0.12);
  padding: 34px;
}

.field span { color: #48505c; font-size: 11px; font-weight: 750; }
.field input,
.field select,
.field textarea {
  border: 1px solid #d4d9e0;
  border-radius: 7px;
  background: #f8f9fb;
  color: var(--saas-ink);
  font-size: 14px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--saas-accent);
  box-shadow: 0 0 0 3px rgba(8, 122, 88, 0.1);
}

.consentField { color: var(--saas-muted); }
.consentField input { accent-color: var(--saas-accent); }
.formStatus:empty { display: none; }
.formStatus:not(:empty) {
  margin-top: 18px;
  border: 1px solid var(--saas-line);
  border-radius: 7px;
  background: #f4f6f8;
  padding: 14px 16px;
  color: var(--saas-muted);
}

.trialStage {
  overflow: hidden;
  background: var(--saas-night);
  color: #f7f9fb;
}

.trialLayout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr);
  align-items: center;
  gap: 76px;
  padding: 96px 0 104px;
}

.trialCopy h1 {
  max-width: 650px;
  margin-top: 16px;
  font-size: 62px;
  line-height: 0.98;
}

.trialCopy > p:not(.eyebrow) {
  max-width: 620px;
  margin-top: 24px;
  color: #98a2af;
  font-size: 17px;
  line-height: 1.65;
}

.trialPromises {
  display: grid;
  gap: 1px;
  margin: 34px 0 0;
  overflow: hidden;
  border: 1px solid var(--saas-line-dark);
  border-radius: 8px;
  background: var(--saas-line-dark);
  list-style: none;
}

.trialPromises li {
  display: grid;
  gap: 3px;
  background: #0e1116;
  padding: 15px 18px;
}

.trialPromises strong { color: #f2f4f7; font-size: 13px; }
.trialPromises span { color: #737d89; font-size: 11px; }

.trialForm {
  position: relative;
  display: grid;
  gap: 18px;
  border: 1px solid #dfe3e8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.34);
  padding: 36px;
  color: var(--saas-ink);
}

.trialFormHeader h2 { margin-top: 8px; font-size: 34px; }
.trialFormHeader > p:not(.eyebrow) {
  margin-top: 10px;
  color: var(--saas-muted);
  font-size: 13px;
  line-height: 1.55;
}

.trialOfferFieldset { min-width: 0; margin: 0; border: 0; padding: 0; }
.trialOfferFieldset legend {
  margin-bottom: 8px;
  color: #48505c;
  font-size: 11px;
  font-weight: 750;
}

.trialOfferPicker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  border-radius: 8px;
  background: #eef1f4;
  padding: 5px;
}

.trialOfferPicker button {
  min-width: 0;
  min-height: 58px;
  display: grid;
  place-content: center;
  gap: 3px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #737b86;
  cursor: pointer;
}

.trialOfferPicker button:hover { color: var(--saas-ink); }
.trialOfferPicker button[aria-pressed="true"] {
  border-color: #d9dde3;
  background: #fff;
  color: var(--saas-ink);
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
}

.trialOfferPicker strong { font-size: 13px; }
.trialOfferPicker span { font-size: 9px; }
.trialForm .buttonPrimary { width: 100%; margin-top: 2px; }
.trialFinePrint { color: #777f8a; font-size: 10px; line-height: 1.55; }
.trialForm .formStatus { margin-top: 0; }

.closingCta {
  max-width: 960px;
  padding-top: 136px;
  padding-bottom: 136px;
}

.closingCta h2 { font-size: 58px; }
.closingCta p { color: #8f99a8; font-size: 18px; }

.legalNote {
  border-top-color: var(--saas-line);
  color: var(--saas-muted);
  font-size: 11px;
}

.stationDialog {
  border: 1px solid var(--saas-line-dark);
  border-radius: 8px;
  background: rgba(12, 15, 20, 0.96);
  color: #fff;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.42);
}

.stationDialog::backdrop { background: rgba(4, 5, 7, 0.72); }
.dialogClose { border-radius: 6px; background: #242a33; color: #fff; }
.dialogStation img { background: #11151a; }
.dialogStation p { color: #9aa4b1; }

.siteFooter {
  border: 0;
  background: var(--saas-night);
  color: #fff;
}

.footerInner {
  width: min(calc(100% - 48px), var(--saas-content));
  gap: 88px;
  padding: 74px 0 42px;
}

.footerBrand img {
  width: 148px;
  filter: none;
}

.footerBrand p { color: #737e8d; font-size: 12px; }
.footerGroup strong { color: #fff; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.footerGroup a { color: #7f8997; font-size: 12px; }
.footerGroup a:hover { color: var(--saas-mint); }

.footerBottom {
  width: min(calc(100% - 48px), var(--saas-content));
  border-top: 1px solid var(--saas-line-dark);
  color: #65707e;
  font-size: 10px;
}

.serviceState {
  border: 1px solid var(--saas-line-dark);
  border-radius: 6px;
  background: #0f1318;
  padding: 7px 10px;
}

.serviceState i { background: var(--saas-green); }

@media (max-height: 800px) and (min-width: 821px) {
  .commercialHero { min-height: 0; }
  .heroProductBackground { top: 14px; width: 260px; height: 260px; }
  .heroInner { padding-top: 288px; padding-bottom: 38px; }
  .commercialHero h1 { font-size: 56px; }
  .heroLead { margin-top: 14px; font-size: 16px; }
  .heroActions { margin-top: 20px; }
  .heroSignalBar { margin-top: 22px; }
  .heroSignal { min-height: 62px; }
}

@media (max-width: 1040px) {
  .siteHeaderInner,
  .heroInner,
  .sectionInner,
  .pageIntroInner,
  .footerInner,
  .footerBottom { width: min(calc(100% - 40px), var(--saas-content)); }
  .siteNav > a { padding: 0 8px; }
  .siteBrand,
  .siteBrand img { width: 166px; }
  .siteBrand img { height: 44px; }
  .productPreviewLayout { grid-template-columns: 1fr; }
  .previewCopy { max-width: 760px; }
  .pageIntroInner { padding-right: 300px; }
  .pageIntro { background-size: 240px; }
  .radioGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .is-directory-wall .radioGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contactLayout { grid-template-columns: 1fr; }
  .trialLayout { grid-template-columns: 1fr; gap: 50px; }
  .trialCopy { max-width: 760px; }
}

@media (max-width: 820px) {
  .siteHeader,
  .siteHeaderInner { min-height: 66px; }
  .siteBrand,
  .siteBrand img { width: 164px; }
  .siteBrand img { height: 48px; }
  .headerActions { margin-left: auto; }
  .headerLogin,
  .headerCta { display: none; }
  .navToggle { display: grid; }
  .siteNav {
    top: 66px;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px max(26px, env(safe-area-inset-bottom));
    background: rgba(8, 10, 13, 0.98);
  }
  .siteNav > a {
    width: 100%;
    min-height: 54px;
    justify-content: flex-start;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 0 16px;
    color: #d8dee7;
    font-size: 18px;
  }
  .commercialHero { height: auto; min-height: 0; }
  .heroProductBackground { top: 22px; width: 270px; height: 270px; }
  .heroInner { min-height: 0; padding: 306px 0 54px; }
  .commercialHero h1 { font-size: 50px; }
  .heroLead { font-size: 17px; }
  .heroSignalBar { width: 100%; }
  .sectionInner { padding: 88px 0; }
  .sectionHeader { align-items: flex-start; }
  .sectionHeader h2,
  .pageSection h2,
  .closingCta h2,
  .previewCopy h2 { font-size: 42px; }
  .proofBar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .is-saas-bento .featureCard,
  .is-saas-bento .featureCard:nth-child(1),
  .is-saas-bento .featureCard:nth-child(2),
  .is-saas-bento .featureCard:nth-child(4),
  .is-saas-bento .featureCard:nth-child(5) { grid-column: span 6; }
  .planGrid { grid-template-columns: 1fr; gap: 14px; }
  .planCard { min-height: auto; }
  .planCard.is-featured { transform: none; }
  .featureRows { grid-template-columns: 1fr; }
  .featureRow { min-height: 260px; }
  .processGrid { grid-template-columns: 1fr; }
  .processStep { min-height: 230px; }
  .processStep h3 { margin-top: 54px; }
  .pageIntro { min-height: 490px; background-size: 180px; background-position: calc(100% - 20px) 88px; }
  .pageIntroInner { padding: 252px 0 66px; }
  .pageIntro h1 { font-size: 48px; }
  .aboutGrid { grid-template-columns: 1fr; }
  .aboutPanel { min-height: 320px; }
  .footerInner { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 560px) {
  .siteHeaderInner,
  .heroInner,
  .sectionInner,
  .pageIntroInner,
  .footerInner,
  .footerBottom { width: calc(100% - 28px); }
  .commercialHero { min-height: 0; }
  .siteHeader,
  .siteHeaderInner { min-height: 62px; }
  .siteBrand,
  .siteBrand img { width: 150px; }
  .siteBrand img { height: 44px; }
  .siteNav { top: 62px; }
  .heroProductBackground { top: 10px; width: 210px; height: 210px; }
  .heroInner { min-height: 0; padding: 234px 0 28px; }
  .commercialHero h1 { font-size: 38px; }
  .heroLead { margin-top: 18px; font-size: 15px; }
  .heroActions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 24px; }
  .heroActions > a { width: 100%; }
  .heroSignalBar { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
  .heroSignal { min-height: 68px; padding: 11px 12px; }
  .heroSignal strong { font-size: 10px; }
  .heroSignal span { font-size: 9px; }
  .heroSignal:nth-child(3) { display: none; }
  .sectionInner { padding: 72px 0; }
  .sectionHeader { margin-bottom: 36px; }
  .sectionHeader h2,
  .pageSection h2,
  .closingCta h2,
  .previewCopy h2,
  .contactAside h2 { font-size: 34px; }
  .proofItem { min-height: 128px; padding: 22px 18px; }
  .proofItem strong { font-size: 25px; }
  .proofItem span { font-size: 10px; }
  .productPreviewLayout { gap: 48px; }
  .previewToolbar { display: grid; gap: 10px; }
  .previewToolbar > span { display: none; }
  .segmentedControl { width: 100%; }
  .previewViewport { min-height: 520px; padding: 16px 10px; }
  .previewTool[data-device="desktop"] .previewViewport,
  .previewTool[data-device="echo"] .previewViewport { min-height: 360px; }
  .previewTool[data-device="desktop"] .previewDesktopChrome {
    grid-template-columns: 58px minmax(0, 1fr);
  }
  .previewTool[data-device="desktop"] .previewSecureMark { display: none; }
  .is-saas-bento .featureGrid { grid-template-columns: 1fr; }
  .is-saas-bento .featureCard,
  .is-saas-bento .featureCard:nth-child(1),
  .is-saas-bento .featureCard:nth-child(2),
  .is-saas-bento .featureCard:nth-child(4),
  .is-saas-bento .featureCard:nth-child(5) {
    min-height: 260px;
    grid-column: auto;
    padding: 28px;
  }
  .is-saas-bento .featureCard h3 { font-size: 25px; }
  .planCard { padding: 28px 22px; }
  .planPrice strong { font-size: 42px; }
  .pageIntro { min-height: 440px; background-size: 138px; background-position: center 76px; }
  .pageIntroInner { padding: 232px 0 58px; text-align: center; }
  .pageIntro h1 { margin-right: auto; margin-left: auto; font-size: 39px; }
  .pageLead { margin-right: auto; margin-left: auto; font-size: 16px; }
  .radioGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
  .is-directory-wall .radioGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 10px; }
  .is-directory-wall .stationArtwork > img:last-child { width: 40px; height: 40px; bottom: 8px; left: 8px; }
  .is-directory-wall .stationArtwork::after { width: 34px; height: 34px; right: 8px; bottom: 8px; font-size: 10px; }
  .stationBody { padding: 14px; }
  .stationBody h3 { font-size: 13px; }
  .stationActions { margin-top: 12px; }
  .directorySummary { width: 100%; }
  .directoryTools { grid-template-columns: 1fr; }
  .aboutPanel { min-height: 280px; padding: 28px; }
  .aboutPanel h2 { font-size: 29px; }
  .contactForm { padding: 24px 18px; }
  .trialLayout { gap: 38px; padding: 62px 0 72px; }
  .trialCopy h1 { font-size: 42px; }
  .trialCopy > p:not(.eyebrow) { font-size: 15px; }
  .trialForm { gap: 16px; padding: 24px 18px; }
  .trialFormHeader h2 { font-size: 28px; }
  .trialOfferPicker { gap: 4px; }
  .trialOfferPicker button { min-height: 54px; }
  .formGrid { grid-template-columns: 1fr; }
  .field.is-wide { grid-column: auto; }
  .closingCta { padding-top: 92px; padding-bottom: 92px; }
  .closingCta h2 { font-size: 38px; }
  .footerNav { grid-template-columns: repeat(2, 1fr); }
  .footerBottom { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .headerCta,
  .buttonPrimary,
  .buttonSecondary,
  .featureCard,
  .stationCard { transition: none; }
}