/* ============================================================
   landing-core.css — OneSync Console system corrections for the
   logged-out landing pages. Loaded LAST (immediately before </head>)
   so it wins ties over the webflow theme + slug/ui-polish + console-base.
   Scoped per page via .lc-home / .lc-pricing / .lc-comparison / .lc-contact
   on .page-wrapper, and via .terms-container for the four legal pages.
   Tokens: bg #0a0a0a · panel #0f0f0f · raised #161616 · line #232323
   line-2 #2e2e2e · muted #9a9a9a / #b3b3b3 · money #4ade80.
   ============================================================ */

:root{
  --lc-bg:#0a0a0a; --lc-panel:#0f0f0f; --lc-raised:#161616;
  --lc-line:#232323; --lc-line-2:#2e2e2e;
  --lc-muted:#9a9a9a; --lc-muted-2:#b3b3b3; --lc-money:#4ade80;
}

/* ---- two-tone headline qualifier (item 6) ---- */
.hl-muted{ color:rgba(255,255,255,.55)!important; -webkit-text-fill-color:rgba(255,255,255,.55)!important; }

/* Kill gradient text-fill on inner-page display headings everywhere they appear
   (home / comparison / contact) so nothing fades to <3:1 (LC-20). */
.display-1,.display-1.biger,.display-1.smaller{
  background:none!important; -webkit-text-fill-color:#fff!important; color:#fff!important;
}

/* ============================================================
   1) HOMEPAGE  (.lc-home)  — LC-05 / LC-11 / LC-23
   ============================================================ */

/* LC-05: drop the hero wordmark image; make the H1 the biggest thing. */
.lc-home .hero-logo-center,.lc-home .hero-main-logo{ display:none!important; }

/* LC-05: tagline = plain 16px/500 muted text, no glass card / animation. */
.lc-home .hero-tagline{
  background:none!important; border:0!important; border-radius:0!important;
  box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
  text-shadow:none!important; animation:none!important; overflow:visible!important;
  padding:0!important; margin:18px auto 0!important; max-width:640px!important;
  color:var(--lc-muted-2)!important; font-size:clamp(15px,2.2vw,18px)!important;
  font-weight:500!important; line-height:1.6!important;
}
.lc-home .hero-tagline:before{ display:none!important; }
.lc-home .hero-tagline:hover{ transform:none!important; box-shadow:none!important; }
.lc-home .hero-tagline strong{ color:#fff!important; text-shadow:none!important; }

/* AWAL promise chips: existing bullets → hairline pills that resolve to one CTA. */
.lc-home .feature-item{
  background:var(--lc-panel)!important; border:1px solid var(--lc-line-2)!important;
  backdrop-filter:none!important; color:var(--lc-muted-2)!important; border-radius:6px!important;
  font-size:13px!important; font-weight:600!important; justify-content:center!important;
}
.lc-home .feature-item:hover{ background:var(--lc-raised)!important; transform:none!important; }

/* Secondary hero link (added in markup next to the white primary button). */
.lc-home .hero-secondary-link{
  display:inline-flex; align-items:center; gap:6px; min-height:44px;
  color:var(--lc-muted-2); font-size:15px; font-weight:600; text-decoration:none;
  margin-left:20px;
}
.lc-home .hero-secondary-link:hover{ color:#fff; }
.lc-home .hero-buttons-container{ align-items:center; flex-wrap:wrap; }

/* LC-23 / LC-05: feature cards visibly separate from the canvas. */
.lc-home .step-box-main{
  background:var(--lc-panel)!important; border:1px solid var(--lc-line-2)!important;
  border-radius:8px!important; padding:24px!important;
}

/* Feature-card icons: neutral white line-art on the raised chip. */
.lc-home .step-icon{
  background:var(--lc-raised)!important; border:1px solid var(--lc-line)!important;
  border-radius:8px!important; width:44px!important; height:44px!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
}
.lc-home .step-icon .small-icon{ filter:brightness(0) invert(1)!important; width:22px!important; height:22px!important; }
.lc-home .step-icon svg{ width:22px; height:22px; color:#fff; }

/* LC-23: partner-application form — neutralise purple, white submit, readable legal. */
.lc-home #partner-application .grid-2-columns{ gap:40px!important; }
.lc-home #partner-application [style*="rgba(255,255,255,0.2)"],
.lc-home #partner-application [style*="rgba(255,255,255,0.2)"]{
  background:var(--lc-raised)!important; border:1px solid var(--lc-line-2)!important;
}
.lc-home #partner-application [style*="#ffffff"]{ color:var(--lc-muted-2)!important; }
/* keep the qualification stat numbers emphatic (white) */
.lc-home #partner-application [style*="font-size: 1.5rem"][style*="#ffffff"]{ color:#fff!important; }
.lc-home #partner-application [style*="rgba(255,255,255,0.1)"]{
  background:var(--lc-raised)!important; border:1px solid var(--lc-line-2)!important;
}
.lc-home #partner-application-form input,
.lc-home #partner-application-form select,
.lc-home #partner-application-form textarea{
  background:var(--lc-raised)!important; border:1px solid var(--lc-line-2)!important;
  color:#fff!important; font-size:16px!important; border-radius:6px!important;
}
.lc-home #submit-btn{
  background:#fff!important; color:#000!important; border-radius:6px!important;
  font-weight:700!important; min-height:48px!important;
}
.lc-home #partner-application-form p a{
  color:var(--lc-muted-2)!important; font-size:13px!important;
  display:inline-block; padding:6px 0; text-decoration:underline;
}
.lc-home #partner-application-form p{ font-size:13px!important; }
/* Spotify search: keep button clear of the field; stack on small phones. */
.lc-home #spotify-search{ padding-right:96px!important; }
@media (max-width:480px){
  .lc-home #partner-application-form div[style*="position: relative"]{ display:block; }
  .lc-home #spotify-search{ padding-right:18px!important; }
  .lc-home #partner-application-form div[style*="position: relative"] button[onclick="searchSpotify()"]{
    position:static!important; transform:none!important; width:100%!important;
    margin-top:8px!important; padding:12px!important; min-height:44px!important;
  }
}

/* Homepage "Why Artists Switch" table (.home-compare-table) — stacked cards on phones (LC-11). */
.lc-home .home-compare-table{ width:100%!important; }
@media (min-width:768px){
  .lc-home .home-compare-table{ min-width:0!important; }
}
@media (max-width:767px){
  .lc-home .home-compare-table{ min-width:0!important; display:block; }
  .lc-home .home-compare-table thead{ display:none!important; }
  .lc-home .home-compare-table tbody{ display:block; }
  .lc-home .home-compare-table tr{
    display:block!important; background:var(--lc-panel)!important;
    border:1px solid var(--lc-line-2)!important; border-radius:8px!important;
    margin-bottom:14px; padding:4px 0; overflow:hidden;
  }
  .lc-home .home-compare-table td{
    display:flex!important; justify-content:space-between; gap:16px;
    text-align:right!important; padding:11px 16px!important; border:0!important;
    border-bottom:1px solid #1c1c1c!important;
  }
  .lc-home .home-compare-table td:last-child{ border-bottom:0!important; }
  .lc-home .home-compare-table tr td:first-child{
    background:var(--lc-raised)!important; color:#fff!important; font-weight:700!important;
    text-align:left!important; border-bottom:1px solid var(--lc-line-2)!important;
  }
  .lc-home .home-compare-table td:not(:first-child)::before{
    content:attr(data-col); color:var(--lc-muted); font-weight:600;
    text-align:left; margin-right:auto;
  }
}

/* ============================================================
   2) PRICING  (.lc-pricing)  — LC-01 / LC-13 / LC-14 / LC-25 / LC-07
   ============================================================ */

/* LC-13 + LC-14: clear the fixed navbar and kill the 205px hero void. */
.lc-pricing .pricing-hero{ padding:110px 24px 20px!important; background:var(--lc-bg)!important; }
.lc-pricing .breadcrumb a{ color:var(--lc-muted-2)!important; }
.lc-pricing .breadcrumb{ margin-bottom:8px!important; }
.lc-pricing .pricing-subtitle{ margin-bottom:0!important; color:var(--lc-muted-2)!important; }
.lc-pricing .pricing-title{ font-size:clamp(2rem,5vw,3rem)!important; }

/* LC-14: tighten vertical rhythm so the page isn't scrolling through air. */
.lc-pricing .section{ padding:52px 24px!important; }
.lc-pricing .section-title{ margin-bottom:12px!important; }
.lc-pricing .pricing-grid{ margin-top:24px!important; }
.lc-pricing .pricing-term{ margin-bottom:8px!important; }
.lc-pricing .pricing-divider{ margin:12px 0!important; }
@media (max-width:768px){ .lc-pricing .section{ padding:40px 20px!important; } }

/* LC-01: explicit responsive grids (3 / 2 / 1). Cards must be min-width:0. */
.lc-pricing .pricing-grid{
  display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:24px!important;
}
@media (max-width:1023px){ .lc-pricing .pricing-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } }
@media (max-width:639px){ .lc-pricing .pricing-grid{ grid-template-columns:1fr!important; } }
/* the single Free-distribution grid stays one centred column */
.lc-pricing .pricing-grid[style*="600px"]{ grid-template-columns:1fr!important; max-width:520px!important; }

/* LC-01/LC-07: Console cards, no purple/gold washes. */
.lc-pricing .pricing-card{
  min-width:0!important; background:var(--lc-panel)!important;
  border:1px solid var(--lc-line)!important; border-radius:8px!important; padding:28px 24px!important;
}
.lc-pricing .pricing-card.featured{ border-color:var(--lc-line-2)!important; background:var(--lc-panel)!important; }
.lc-pricing .pricing-card.gold,
.lc-pricing .pricing-card.platinum{ border-color:var(--lc-line-2)!important; background:var(--lc-panel)!important; }
.lc-pricing .pricing-card:hover{ transform:none!important; border-color:var(--lc-line-2)!important; box-shadow:none!important; }

/* prices 28px/700; unit line plain muted. Money stays green only for the $0 free hero. */
.lc-pricing .pricing-price{ font-size:1.9rem!important; font-weight:700!important; color:#fff!important; }
.lc-pricing .pricing-card.gold .pricing-price,
.lc-pricing .pricing-card.platinum .pricing-price{ color:#fff!important; }

/* one solid white CTA per card. */
.lc-pricing .pricing-cta,
.lc-pricing .pricing-card.gold .pricing-cta,
.lc-pricing .pricing-card.platinum .pricing-cta{
  background:#fff!important; color:#000!important; border-radius:6px!important;
  font-weight:700!important; padding:13px 24px!important; min-height:44px;
}
.lc-pricing .pricing-cta:hover{ transform:none!important; box-shadow:none!important; opacity:.9; }

/* LC-25: badges never gold/purple, never two lines. */
.lc-pricing .pricing-badge,
.lc-pricing .pricing-badge.gold-badge,
.lc-pricing .pricing-badge.platinum-badge{
  background:var(--lc-raised)!important; color:#fff!important; border:1px solid var(--lc-line-2)!important;
  white-space:nowrap!important; font-size:12px!important; letter-spacing:.4px!important;
}

/* LC-07: kill the remaining purple/red info & CTA washes on pricing. */
.lc-pricing .info-box{ background:var(--lc-raised)!important; border-left:2px solid var(--lc-line-2)!important; }
.lc-pricing .info-box h4{ color:#fff!important; }
.lc-pricing .info-box li::before{ color:var(--lc-muted)!important; }
.lc-pricing .pro-tip-box{ background:var(--lc-raised)!important; border-left:2px solid var(--lc-line-2)!important; }
.lc-pricing .pro-tip-box h4{ color:#fff!important; }
.lc-pricing .white-glove-badge{ background:var(--lc-raised)!important; color:#fff!important; border:1px solid var(--lc-line-2)!important; }
.lc-pricing .cta-section{ background:var(--lc-panel)!important; border-top:1px solid var(--lc-line)!important; }
.lc-pricing .cta-btn{ background:#fff!important; color:#000!important; border-radius:6px!important; }
.lc-pricing .cta-btn:hover{ transform:none!important; box-shadow:none!important; opacity:.9; }

/* jump-pill row (added in markup under the subtitle). */
.lc-pricing .pricing-jump{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:20px auto 0; max-width:720px;
}
.lc-pricing .pricing-jump a{
  display:inline-flex; align-items:center; min-height:40px; padding:8px 16px;
  border:1px solid var(--lc-line-2); border-radius:999px; color:var(--lc-muted-2);
  font-size:13px; font-weight:600; text-decoration:none;
}
.lc-pricing .pricing-jump a:hover{ color:#fff; border-color:#3a3a3a; }

/* ============================================================
   3) COMPARISON  (.lc-comparison)  — LC-02 / LC-03 / LC-12 / LC-31
   ============================================================ */

/* LC-03: kill the overflow:visible!important hack and let grids/tables use full width. */
.lc-comparison .comparison-table-wrapper{ overflow-x:auto!important; position:relative; margin:32px 0!important; }
.lc-comparison #why-onesync .container > div[style*="display: grid"],
.lc-comparison #why-onesync .container > div[style*="display:grid"]{ width:100%!important; }

/* stats card: fluid padding so it never forces overflow at 375 (LC-02). */
.lc-comparison .lc-stats-card{ padding:clamp(20px,5vw,55px) clamp(16px,4vw,50px)!important; }
/* LC-02: 2-up stats on phones with clamp() numbers. */
@media (max-width:640px){
  .lc-comparison .stats-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .lc-comparison .stats-grid > div{ border-right:0!important; padding:16px 8px!important; }
  .lc-comparison .stats-grid > div > div:first-child{ font-size:clamp(1.7rem,9vw,2.6rem)!important; letter-spacing:-1px!important; }
}

/* LC-12: tables fit at >=768 (no viewport overflow at 820/1280); scroll + fade as a safety net. */
@media (min-width:768px){
  .lc-comparison .comparison-table{ min-width:0!important; width:100%!important; }
  .lc-comparison .comparison-table th,
  .lc-comparison .comparison-table td{ padding:14px 12px!important; }
  .lc-comparison .comparison-table-wrapper::after{
    content:""; position:absolute; top:0; right:0; width:36px; height:100%;
    pointer-events:none; background:linear-gradient(90deg,rgba(10,10,10,0),var(--lc-bg));
  }
  .lc-comparison .comparison-table th:first-child,
  .lc-comparison .comparison-table td:first-child{ position:sticky; left:0; background:var(--lc-panel); z-index:1; }
}
/* neutralise the purple header highlight. */
.lc-comparison .comparison-table th.highlight{ background:var(--lc-raised)!important; color:#fff!important; }

/* LC-12: stacked cards below 768 so every competitor value + dollar figure is readable on a phone. */
@media (max-width:767px){
  .lc-comparison .comparison-table-wrapper{ overflow:visible!important; margin:20px 0!important; }
  .lc-comparison .comparison-table{ min-width:0!important; width:100%!important; display:block; }
  .lc-comparison .comparison-table thead{ display:none!important; }
  .lc-comparison .comparison-table tbody{ display:block; }
  .lc-comparison .comparison-table tr{
    display:block!important; background:var(--lc-panel)!important;
    border:1px solid var(--lc-line-2)!important; border-radius:8px!important;
    margin-bottom:14px; padding:4px 0; overflow:hidden;
  }
  .lc-comparison .comparison-table td{
    display:flex!important; justify-content:space-between; gap:16px; align-items:baseline;
    text-align:right!important; padding:11px 16px!important; border:0!important;
    border-bottom:1px solid #1c1c1c!important;
  }
  .lc-comparison .comparison-table td:last-child{ border-bottom:0!important; }
  .lc-comparison .comparison-table tr td:first-child{
    background:var(--lc-raised)!important; color:#fff!important; font-weight:700!important;
    text-align:left!important; display:block!important; border-bottom:1px solid var(--lc-line-2)!important;
  }
  .lc-comparison .comparison-table td.highlight-col,
  .lc-comparison .comparison-table td:not(:first-child){ position:static!important; }
  .lc-comparison .comparison-table td:not(:first-child)::before{
    content:attr(data-col); color:var(--lc-muted); font-weight:600;
    text-align:left; margin-right:auto; flex:0 0 auto;
  }
}

/* LC-31: single-column TOC + related-link lists on phones. */
@media (max-width:640px){
  .lc-comparison .toc-grid,
  .lc-comparison .related-links-grid,
  .lc-comparison [style*="column-count: 2"],
  .lc-comparison [style*="column-count:2"]{ grid-template-columns:1fr!important; column-count:1!important; }
}

/* ============================================================
   4) LEGAL  (.terms-container)  — LC-06 / LC-22  (blocker)
   One Console dark template for legal / terms / privacy / refund.
   ============================================================ */

.terms-container{
  background:var(--lc-panel)!important; border:1px solid var(--lc-line)!important;
  border-radius:12px!important; backdrop-filter:none!important; box-shadow:none!important;
  max-width:860px!important; padding:clamp(24px,4vw,44px)!important;
  margin-top:110px!important; margin-bottom:64px!important;
}
.terms-title{
  background:none!important; -webkit-text-fill-color:#fff!important; color:#fff!important;
  text-shadow:none!important; font-size:clamp(1.9rem,5vw,2.6rem)!important; font-weight:700!important;
}
.effective-date{
  background:var(--lc-raised)!important; border:1px solid var(--lc-line-2)!important;
  color:var(--lc-muted)!important; font-style:normal!important; border-radius:8px!important;
  font-size:14px!important; padding:12px 16px!important;
}
.terms-section{
  background:var(--lc-raised)!important; border:1px solid var(--lc-line-2)!important;
  border-left:2px solid var(--lc-line-2)!important; border-radius:8px!important; padding:clamp(20px,3vw,30px)!important;
}
.terms-section:hover{ transform:none!important; box-shadow:none!important; background:var(--lc-raised)!important; }
.section-title.section-title,
.terms-container .section-title{
  background:none!important; -webkit-text-fill-color:#fff!important; color:#fff!important;
  border-image:none!important; border-bottom:1px solid var(--lc-line-2)!important;
  font-size:clamp(1.25rem,3.5vw,1.5rem)!important; font-weight:600!important;
}
.terms-container .section-title::before{ display:none!important; }
.terms-content,.terms-container p,.terms-container li,.terms-container div{ color:var(--lc-muted-2); }
.terms-content{ color:var(--lc-muted-2)!important; font-size:16px!important; line-height:1.8!important; }
.terms-container h3{ color:#fff!important; }
.terms-container h3::before{ background:#fff!important; }
.terms-list li{ color:var(--lc-muted-2)!important; }
.terms-list li::before{ color:var(--lc-muted)!important; }

/* inline "OneSync Media LLC" chips → plain bold white text, not a purple pill. */
.terms-container .highlight{
  background:none!important; color:#fff!important; padding:0!important; box-shadow:none!important;
  border:0!important; border-radius:0!important; font-weight:600!important; display:inline!important;
}

/* Back-to-Home → plain text link with chevron, not a gradient pill. */
.back-btn{
  background:none!important; color:var(--lc-muted-2)!important; box-shadow:none!important;
  border:0!important; border-radius:0!important; padding:8px 0!important; font-size:14px!important; font-weight:600!important;
}
.back-btn:hover{ background:none!important; color:#fff!important; transform:none!important; box-shadow:none!important; }

/* callout boxes → Console panels, no emoji glyphs. */
.terms-container .warning-box,
.terms-container .info-box,
.terms-container .legal-section{
  background:var(--lc-raised)!important; border:1px solid var(--lc-line-2)!important; border-radius:8px!important;
}
.terms-container .warning-box-title,
.terms-container .info-box-title,
.terms-container .legal-section-title{ color:#fff!important; }
.terms-container .warning-box-title::before,
.terms-container .info-box-title::before{ display:none!important; }

/* TOC (terms / privacy) → dark card, single column on phones. */
.table-of-contents{
  background:var(--lc-raised)!important; border:1px solid var(--lc-line-2)!important; border-radius:8px!important;
}
.toc-title{ color:#fff!important; }
.toc-list a{ color:var(--lc-muted-2)!important; }
.toc-list a:hover{ background:var(--lc-line)!important; color:#fff!important; transform:none!important; }
@media (max-width:640px){ .toc-list{ column-count:1!important; } }

/* ============================================================
   5) CONTACT  (.lc-contact)  — LC-20 / LC-21
   ============================================================ */

/* LC-20: no headline fade, collapse the empty hero. */
.lc-contact .display-1.biger{ color:#fff!important; -webkit-text-fill-color:#fff!important; background:none!important; }
.lc-contact .hero.for-inner{ padding:110px 24px 24px!important; min-height:0!important; }
.lc-contact .hero.for-inner .container{ min-height:0!important; }

/* LC-21: email as the primary action — white, 18px/600, 48px row. */
.lc-contact .contact-email{
  display:inline-flex; align-items:center; min-height:48px;
  color:#fff!important; font-size:18px!important; font-weight:600!important; text-decoration:none;
}
.lc-contact .contact-email:hover{ text-decoration:underline; }
.lc-contact .subhead.small{ color:var(--lc-muted)!important; }
/* Instagram handle rendered as a real link. */
.lc-contact .contact-social-link{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--lc-muted-2)!important; font-weight:600; text-decoration:none;
}
.lc-contact .contact-social-link:hover{ color:#fff!important; }
/* social icon tap targets. */
.lc-contact .social-link-main{ min-width:44px!important; min-height:44px!important; display:inline-flex!important; align-items:center; justify-content:center; }

/* ============================================================
   6) SHARED tap-target / tiny-text floors on these pages (LC-26/27)
   ============================================================ */
.lc-comparison .breadcrumb a,.lc-pricing .breadcrumb a{ display:inline-block; padding:8px 4px; min-height:36px; }
/* comparison in-page TOC + Key-Takeaway CTA tap targets (LC-27) */
.lc-comparison nav ol li a{ display:inline-block; padding:9px 6px; }
.lc-comparison .highlight-box p a{ display:inline-block; padding:11px 0; }
