/* Public marketing surface only. The radio player and panels retain their UI. */
:root { --saas-night:#111214; --saas-paper:#f4f5f7; --saas-ink:#202226; --saas-muted:#60656d; --saas-accent:#454a52; --saas-accent-bright:#292d33; --saas-mint:#e2e5ea; --saas-green:#cbd0d7; --saas-content:1240px; }
html { scroll-behavior:smooth; scroll-padding-top:88px; }
body { font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body,body * { letter-spacing:0!important; }
:focus-visible { outline:3px solid #7c838e; outline-offset:4px; }
.siteHeader { background:#111214; border-bottom:1px solid #34383e; backdrop-filter:none; }
.siteHeaderInner { min-height:80px; width:min(calc(100% - 64px),var(--saas-content)); gap:24px; }
.siteBrand,.siteBrand img { width:182px; flex-shrink:0; }
.siteBrand img { height:56px; }
.siteNav { gap:4px; }
.siteNav>a { font-size:12px; padding:0 9px; color:#bfc4cc; }
.siteNav>a[aria-current="page"] { color:#f4f5f7; background:transparent; border-color:transparent; }
.headerActions { gap:18px; flex-shrink:0; }
.headerLogin { color:#e0e3e8; }
.headerCta,.buttonPrimary { background:#e2e5ea; color:#202226; border:1px solid #e2e5ea; border-radius:6px; box-shadow:none; }
.headerCta:hover,.buttonPrimary:hover { background:#ffffff; color:#202226; border-color:#ffffff; }
.headerCta { min-height:40px; font-size:12px; padding:0 17px; }
.buttonPrimary,.buttonSecondary { min-height:48px; padding:0 24px; gap:24px; font-size:14px; border-radius:6px; }
.buttonSecondary { color:#292d33; border-color:#b7bdc6; background:transparent; }
.commercialHero { position:relative; height:740px; min-height:0; background:#111214; }
.heroInner { height:auto; min-height:0; padding:42px 0 0; width:min(calc(100% - 40px),1000px); align-items:flex-start; }
.heroCopy { position:relative; width:100%; z-index:1; }
.eyebrow { font-size:12px; text-transform:none; font-weight:650; color:#454a52; }
.commercialHero .eyebrow { color:#cbd0d7; display:flex; align-items:center; justify-content:center; gap:8px; }
.statusDot { width:6px; height:6px; border-radius:50%; background:#e2e5ea; }
.commercialHero h1 { font-size:80px; font-weight:720; margin:10px auto 8px; line-height:1.05; }
.heroLead { font-size:23px; line-height:1.4; color:#d4d8de; margin:0 auto; max-width:700px; }
.heroActions { display:flex; align-items:center; justify-content:center; gap:26px; margin-top:24px; }
.heroDemoLink { display:inline-flex; align-items:center; gap:14px; color:#eceef2; font-size:14px; min-height:48px; }
.heroDemoLink:hover { color:#e2e5ea; }
.heroTerms { color:#a9b0ba; font-size:11px; margin:14px 0 0; }
.heroProductBackground { position:absolute; top:auto; bottom:40px; left:0; right:0; margin:auto; width:min(calc(100% - 64px),680px); height:auto; aspect-ratio:1440 / 760; background:url('/marketing/product-live-254.jpg') center/contain no-repeat; opacity:1; transform:none; }
.heroCaption { position:absolute; bottom:14px; left:20px; right:20px; text-align:center; font-size:10px; color:#a9b0ba; margin:0; }
.sectionInner { width:min(calc(100% - 64px),var(--saas-content)); padding:88px 0; }
.sectionHeader { gap:32px; margin-bottom:40px; }
.sectionHeader h2,.previewCopy h2,.pageSection h2 { font-size:42px; line-height:1.1; max-width:760px; font-weight:650; }
.sectionHeader p:not(.eyebrow),.previewCopy>p:not(.eyebrow) { font-size:16px; line-height:1.6; }
.sectionBand { background:#fff; }
.sectionBand.is-soft { background:#f4f5f7; }
.sectionBand + .sectionBand { border-top:1px solid #dde0e5; }
.sectionBand.is-soft[aria-label="Radioapp en bref"] { background:#f4f5f7; }
.proofBar { background:transparent; gap:0; }
.proofItem { min-height:120px; background:transparent; padding:28px; border-right:1px solid #d9dde3; }
.proofItem:last-child { border:0; }
.proofItem strong { color:#272a30; font-size:28px; }
.proofItem span { color:#60656d; font-size:11px; }
.is-product-stage { background:#f4f5f7!important; color:#202226!important; }
.is-product-stage .sectionInner { padding:90px 0; }
.productPreviewLayout { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:70px; }
.is-product-stage .previewCopy h2 { color:#202226; }
.sectionBand.is-product-stage .previewCopy>p:not(.eyebrow) { color:#60656d; }
.previewChecklist { border-color:#d7dce2; }
.previewChecklist li { border-color:#d7dce2; color:#50565f; }
.previewChecklist li::before { background:#454a52; }
.is-product-stage .textLink { color:#454a52; }
.previewTool { border:0; box-shadow:none; background:transparent; border-radius:0; }
.previewToolbar { border:0; padding:0 0 22px; background:transparent; }
.previewToolbar>span { color:#60656d; text-transform:none; }
.previewViewport { background:transparent; min-height:600px; padding:0; }
.segmentedControl { background:#e1e4e9; border:1px solid #cdd2da; }
.segmentedControl button { color:#60656d; min-height:38px; }
.segmentedControl button[aria-selected="true"] { background:#fff; color:#272a30; box-shadow:0 2px 5px #25282d12; }
.previewTool[data-device="desktop"] .previewViewport,.previewTool[data-device="echo"] .previewViewport { min-height:440px; }
.is-saas-bento { background:#fff; }
.is-saas-bento .featureGrid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 32px; }
.is-saas-bento .featureCard,.is-saas-bento .featureCard:nth-child(n) { grid-column:auto; background:transparent; color:#272a30; border:0; border-top:1px solid #d9dde3; border-radius:0; padding:28px 0 36px; min-height:250px; box-shadow:none; }
.is-saas-bento .featureCard:hover { transform:none; box-shadow:none; }
.is-saas-bento .featureIcon,.is-saas-bento .featureCard:nth-child(n) .featureIcon { width:40px; height:40px; background:#e8ebef; border:0; border-radius:8px; }
.is-saas-bento .featureCard:nth-child(2) .featureIcon,.is-saas-bento .featureCard:nth-child(5) .featureIcon { background:#e8ebef; }
.is-saas-bento .featureCard:nth-child(n) .featureIcon img { filter:brightness(.2); width:21px; height:21px; }
.is-saas-bento .featureCard h3 { margin-top:25px; font-size:23px; }
.is-saas-bento .featureCard:nth-child(n) p { font-size:14px; color:#60656d; }
.is-directory-wall { background:#111214; }
.is-directory-wall .radioGrid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:30px 24px; }
body[data-site-page="home"] .is-directory-wall .radioGrid { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:900px; }
.is-directory-wall .stationBody h3 { font-size:15px; }
.is-directory-wall .stationTrack { font-size:12px; }
.is-directory-wall .stationArtist { font-size:11px; }
.is-directory-wall .directorySummary small { font-size:10px; }
.is-directory-wall .eyebrow { color:#e2e5ea; }
.pageIntro { min-height:0; background:#111214; }
.pageIntroInner { width:min(calc(100% - 64px),var(--saas-content)); padding:70px 0 66px; text-align:left; }
.pageIntro .eyebrow { color:#e2e5ea; }
.pageIntro h1 { margin:14px 0 0; max-width:850px; font-size:58px; line-height:1.1; }
.pageLead { margin:22px 0 0; max-width:730px; color:#b9c0ca; font-size:18px; }
.pageSection { margin-top:80px; }
.featureRows { gap:0 40px; }
.featureRow,.featureRow:nth-child(n) { background:transparent; color:#202226; border:0; border-top:1px solid #d9dde3; border-radius:0; padding:32px 0; min-height:230px; }
.featureRow h3 { font-size:26px; margin-top:12px; }
.featureRow:nth-child(n) p { color:#60656d; font-size:15px; }
.planGrid { gap:18px; }
.planCard { min-height:540px; padding:30px; box-shadow:none; }
.planCard.is-featured { transform:none; background:#eef0f3; color:#272a30; border-color:#9da5b1; box-shadow:none; }
.planBadge { background:#454a52; color:#ffffff; border-radius:4px; }
.planCard.is-featured .planName { color:#454a52; }
.planCard.is-featured .planDescription,.planCard.is-featured .planPrice span,.planCard.is-featured .planFeatures li { color:#555c66; }
.planCard.is-featured .planFeatures { border-color:#cdd2da; }
.planCard.is-featured .planFeatures li::before { color:#454a52; }
.planCard.is-featured .buttonPrimary { color:#fff; border-color:#454a52; background:#454a52; }
.planPrice strong { font-size:46px; }
.planTitle { font-size:27px; }
.planFeatures li { font-size:14px; }
.planDescription { min-height:64px; }
.billingToggle { background:#e1e4e9; padding:4px; }
.billingToggle button { min-height:38px; font-size:13px; }
.comparisonTable th,.comparisonTable td { font-size:14px; }
.processGrid { border:0; border-radius:0; background:transparent; gap:40px; }
.processStep { background:transparent; padding:24px 0; border-top:1px solid #cdd2da; min-height:230px; }
.processStep span { font-size:14px; color:#454a52; }
.processStep h3 { margin-top:36px; font-size:25px; }
.faqList summary { font-size:17px; min-height:76px; }
.aboutPanel,.aboutPanel:nth-child(n) { background:transparent; color:#202226; border:0; border-top:1px solid #cdd2da; border-radius:0; min-height:270px; padding:32px 0; }
.aboutGrid { gap:36px; }
.aboutPanel h2 { font-size:30px; margin-top:20px; }
.aboutPanel:nth-child(n) p:not(.eyebrow) { color:#60656d; }
.contactAside h2 { font-size:40px; }
.contactForm,.trialForm { box-shadow:none; border-color:#d7dce2; }
.field span,.trialOfferFieldset legend { font-size:13px; }
.field input,.field select,.field textarea { font-size:16px; min-height:48px; background:#fafbfc; }
.trialStage { background:#f4f5f7; color:#202226; }
.trialCopy h1 { font-size:56px; line-height:1.1; }
.trialCopy>p:not(.eyebrow) { color:#60656d; }
.trialLayout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:80px; padding:70px 0 90px; }
.trialPromises { border:0; border-top:1px solid #d7dce2; border-radius:0; background:transparent; }
.trialPromises li { background:transparent; padding:18px 0; border-bottom:1px solid #d7dce2; }
.trialPromises strong { color:#272a30; font-size:14px; }
.trialPromises span { color:#60656d; font-size:12px; }
.trialFinePrint { font-size:12px; }
.trialOfferPicker span { font-size:11px; }
.trialOfferPicker { background:#e9ecf0; }
.trialOfferPicker button[aria-pressed="true"] { border-color:#7c838e; background:#eef0f3; }
.closingCta { padding:84px 0; max-width:1000px; }
.closingCta h2 { font-size:52px; }
.closingCta .eyebrow { color:#e2e5ea; }
.sectionBand.is-contrast .closingCta p { color:#b9c0ca; }
.siteFooter { background:#111214; border-top:1px solid #34383e; }
.footerInner,.footerBottom { width:min(calc(100% - 64px),var(--saas-content)); }
.footerBrand img { width:185px; }
.footerBrand p,.footerGroup a { color:#b6bec9; font-size:13px; }
.footerGroup strong { font-size:12px; text-transform:none; }
.footerBottom { font-size:12px; color:#a9b0ba; }
.serviceState { background:transparent; border:0; padding:0; }
.navOnlyMobile { display:none!important; }
@media(min-width:1041px) and (max-height:850px) { .commercialHero { height:650px; } .heroInner { padding-top:32px; } .commercialHero h1 { font-size:64px; } .heroLead { font-size:20px; } .heroProductBackground { width:560px; bottom:32px; } }
@media(max-width:1100px) {
  .siteHeaderInner { gap:16px; width:calc(100% - 40px); }
  .siteBrand,.siteBrand img { width:160px; }
  .siteNav>a { padding:0 6px; font-size:11px; }
  .headerActions { gap:12px; }
  .productPreviewLayout { grid-template-columns:1fr; gap:40px; }
  .previewCopy { max-width:800px; }
  .previewTool { max-width:900px; width:100%; margin:0 auto; }
  .planCard { padding:24px; }
  .trialLayout { gap:40px; }
}
@media(max-width:900px) {
  .siteHeader,.siteHeaderInner { min-height:70px; }
  .headerLogin,.headerCta { display:none; }
  .headerActions { margin-left:auto; }
  .navToggle { display:grid; }
  .siteNav { position:fixed; top:70px; right:0; bottom:0; left:0; display:flex; flex-direction:column; justify-content:flex-start; background:#111214; padding:20px; opacity:0; visibility:hidden; pointer-events:none; transform:none; }
  .is-nav-open .siteNav { opacity:1; visibility:visible; pointer-events:auto; }
  .siteNav>a { width:100%; min-height:50px; font-size:18px; justify-content:flex-start; padding:0 12px; }
  .navOnlyMobile { display:flex!important; }
  .siteNav .navTrial { background:#e2e5ea; color:#202226; margin-top:16px; }
  .siteBrand img { height:50px; }
  .sectionHeader h2,.previewCopy h2,.pageSection h2 { font-size:36px; }
  .is-saas-bento .featureGrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .planGrid { grid-template-columns:1fr; }
  .planCard { min-height:0; }
  .planDescription { min-height:0; }
  .trialLayout { grid-template-columns:1fr; }
  .trialCopy h1 { font-size:46px; }
}
@media(max-width:560px) {
  .siteHeaderInner,.heroInner,.sectionInner,.pageIntroInner,.footerInner,.footerBottom { width:calc(100% - 40px); }
  .siteHeader,.siteHeaderInner { min-height:66px; }
  .siteNav { top:66px; height:calc(100dvh - 66px); overflow-y:auto; }
  .siteBrand,.siteBrand img { width:160px; }
  .commercialHero { height:610px; }
  .heroInner { padding:38px 0 0; }
  .commercialHero h1 { font-size:58px; margin-top:16px; }
  .heroLead { font-size:20px; margin-top:12px; }
  .heroActions { flex-direction:column; display:flex; gap:4px; margin-top:24px; }
  .heroActions>a { width:auto; flex:none; }
  .heroActions .buttonPrimary { min-width:220px; }
  .heroTerms { font-size:11px; margin-top:8px; }
  .heroProductBackground { width:calc(100% - 24px); bottom:39px; }
  .heroCaption { font-size:9px; bottom:17px; }
  .sectionInner,.is-product-stage .sectionInner { padding:60px 0; }
  .sectionHeader { flex-direction:column; gap:24px; margin-bottom:30px; }
  .sectionHeader h2,.previewCopy h2,.pageSection h2 { font-size:32px; }
  .sectionHeader p:not(.eyebrow),.previewCopy>p:not(.eyebrow) { font-size:15px; }
  .proofItem { padding:22px 14px; min-height:125px; }
  .proofItem strong { font-size:23px; }
  .proofItem span { font-size:11px; }
  .previewTool[data-device="desktop"] .previewViewport,.previewTool[data-device="echo"] .previewViewport { min-height:250px; }
  .previewViewport { min-height:520px; }
  .is-saas-bento .featureGrid { grid-template-columns:1fr; }
  .is-saas-bento .featureCard:nth-child(n) { min-height:0; padding:26px 0; }
  .is-saas-bento .featureCard h3 { font-size:23px; margin-top:20px; }
  .is-directory-wall .radioGrid,body[data-site-page="home"] .is-directory-wall .radioGrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 14px; }
  .is-directory-wall .stationBody h3 { font-size:14px; }
  .pageIntroInner { padding:44px 0; text-align:left; }
  .pageIntro h1 { font-size:40px; margin-left:0; }
  .pageLead { font-size:16px; margin:20px 0 0; }
  .pageSection { margin-top:50px; }
  .processGrid { gap:12px; }
  .processStep { min-height:0; padding:24px 0; }
  .processStep h3 { margin-top:20px; }
  .closingCta h2 { font-size:36px; }
  .trialLayout { padding:48px 0; gap:36px; }
  .trialCopy h1 { font-size:38px; }
  .trialPromises { margin-top:24px; }
  .trialForm { padding:24px 20px; }
  .trialFinePrint { font-size:11px; }
  .footerGroup a { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Silver and graphite accents follow the Radioapp metal logo. */
:root { --premium-blue:#454a52; --premium-blue-hover:#292d33; }
.commercialHero h1 { color:#f4f5f7; }
.statusDot { background:#cbd0d7; }
.heroDemoLink:hover,.footerGroup a:hover { color:#cbd0d7; }
.sectionBand.is-soft[aria-label="Radioapp en bref"] { background:#e7eaef; }
.proofItem { border-color:#cbd1d9; }
.proofItem:nth-child(-n+2) { border-bottom-color:#cbd1d9; }
.proofItem strong { color:#343941; }
.proofItem span { color:#565e69; }
.is-product-stage .eyebrow,.is-product-stage .textLink { color:#454a52; }
.segmentedControl button[aria-selected="true"] { color:#30353d; background:#ffffff; box-shadow:none; }
.is-saas-bento .featureCard:nth-child(3n) .featureIcon { background:#e8ebef; }
.featureIcon { background:#e8ebef; border-color:transparent; }
.planCard.is-featured .buttonPrimary:hover { color:#fff; background:#292d33; border-color:#292d33; }
.planCard:not(.is-featured) .buttonPrimary { background:#111214; color:#fff; border-color:#111214; }
.planCard:not(.is-featured) .buttonPrimary:hover { background:#34383e; border-color:#34383e; }
.planCard:not(.is-featured):hover { border-color:#7c838e; }
.billingToggle button[aria-pressed="true"] { color:#30353d; background:#fff; }
.trialOfferPicker button[aria-pressed="true"] { color:#30353d; box-shadow:0 0 0 1px #7c838e; }
.field input:focus,.field select:focus,.field textarea:focus { box-shadow:0 0 0 3px #7c838e26; }
.is-directory-wall .textLink,.is-directory-wall .eyebrow { color:#cbd0d7; }
.sectionBand.is-contrast .closingCta .eyebrow { color:#cbd0d7; }


/* A subtle metallic finish belongs to controls, not the product imagery. */
.headerCta,.buttonPrimary,.siteNav .navTrial {
  background:linear-gradient(180deg,#ffffff 0%,#e2e5ea 52%,#c8cdd5 100%);
  color:#202226; border-color:#dce1e8;
  box-shadow:inset 0 1px 0 #ffffff,0 2px 5px #00000018;
}
.headerCta:hover,.buttonPrimary:hover,.siteNav .navTrial:hover {
  background:linear-gradient(180deg,#ffffff,#e7ebf1);
  color:#202226; border-color:#ffffff;
}
.planCard.is-featured { background:#24272c; color:#f4f5f7; border-color:#676f7b; }
.planCard.is-featured .planName { color:#dce1e8; }
.planBadge { background:#dce1e8; color:#24272c; }
.planCard.is-featured .planDescription,.planCard.is-featured .planPrice span,.planCard.is-featured .planFeatures li { color:#d0d5dd; }
.planCard.is-featured .planFeatures { border-color:#525964; }
.planCard.is-featured .planFeatures li::before { color:#dce1e8; }
.planCard.is-featured .buttonPrimary { background:linear-gradient(180deg,#ffffff,#c8cdd5); color:#202226; border-color:#dce1e8; }
.planCard.is-featured .buttonPrimary:hover { background:#fff; color:#202226; border-color:#fff; }
.siteNav>a[aria-current="page"] { text-decoration:underline; text-underline-offset:7px; text-decoration-color:#aab2bf; }
.trialOfferPicker button[aria-pressed="true"] { background:#dce1e8; color:#30353d; border-color:#7c838e; }
.searchField:focus-within,.selectField:focus-within { box-shadow:0 0 0 3px #7c838e26; }
.is-directory-wall .searchField:focus-within,.is-directory-wall .selectField:focus-within { border-color:#b7bdc6; }
.previewSecureMark { color:#bfc7d3; }
.is-product-stage .buttonSecondary { color:#454a52; border-color:#b7bdc6; }
.is-product-stage .buttonSecondary:hover { color:#202226; border-color:#7c838e; }

