/* light.css - home page only. The hero stays dark; a blurred fade carries
   it into a white page with purple accents. Loaded after styles.css/app.css. */

:root {
  --l-bg: #ffffff;
  --l-tint: #f7f3ff;
  --l-ink: #160f24;
  --l-text: #4f4662;
  --l-muted: #7d7490;
  --l-line: rgba(124, 77, 219, .14);
  --l-line-strong: rgba(124, 77, 219, .32);
  --l-purple: #7c4ddb;
  --l-purple-2: #9b69ff;
  --l-glow: rgba(124, 77, 219, .18);
  --l-card-shadow: 0 14px 40px rgba(76, 40, 140, .08), 0 2px 6px rgba(76, 40, 140, .04);
}

html, body.home-light { background: var(--l-bg); }
.home-light .site-frame { background: var(--l-bg); }

/* MARK: Hero - starfield + moving light */
.hero-starfield { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.home-light .hero-stars { opacity: .05; }
.hero-lights { position: absolute; z-index: -2; inset: 0; overflow: hidden; pointer-events: none; }
.hero-lights .beam {
  position: absolute; top: -20%; width: 34vw; height: 140%;
  background: linear-gradient(90deg, transparent, rgba(187,145,255,.16) 45%, rgba(230,215,255,.22) 50%, rgba(187,145,255,.16) 55%, transparent);
  filter: blur(26px); mix-blend-mode: screen; transform-origin: 50% 0;
}
.hero-lights .beam-a { left: 10%; transform: rotate(18deg); animation: beamSweep 14s ease-in-out infinite alternate; }
.hero-lights .beam-b { left: 42%; width: 22vw; opacity: .8; transform: rotate(-12deg); animation: beamSweep 18s ease-in-out -6s infinite alternate-reverse; }
.hero-lights .beam-c { right: 4%; transform: rotate(-24deg); opacity: .7; animation: beamSweep 16s ease-in-out -3s infinite alternate; }
.hero-lights .aurora {
  position: absolute; left: 50%; top: 4%; width: 70vw; height: 46vw; max-height: 620px;
  border-radius: 50%; transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 40%, rgba(155,105,255,.42), rgba(107,61,194,.18) 40%, transparent 70%);
  filter: blur(50px); animation: auroraPulse 9s ease-in-out infinite;
}
@keyframes beamSweep { from { transform: translateX(-6vw) rotate(14deg); opacity: .35; } to { transform: translateX(6vw) rotate(-8deg); opacity: .9; } }
@keyframes hazeBreath { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes auroraPulse { 0%, 100% { opacity: .75; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.08); } }

/* MARK: Hero -> white transition (long, layered blur) */
.home-light .hero { padding-bottom: 430px; }
.hero-fade {
  position: relative;
  z-index: 3;
  height: 680px;
  margin-top: -440px;
  margin-bottom: -200px;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(60,30,110,.10) 12%,
    rgba(155,105,255,.20) 26%,
    rgba(214,195,255,.52) 40%,
    rgba(240,232,255,.84) 52%,
    rgba(251,249,255,.97) 60%,
    #fff 64%);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 18%, #000 40%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 18%, #000 40%);
}
/* Two soft purple hazes along the seam */
.hero-fade::before, .hero-fade::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.hero-fade::before {
  left: 4%; right: 4%; top: 22%; height: 260px;
  background: radial-gradient(ellipse at 50% 50%, rgba(155,105,255,.5), rgba(155,105,255,.16) 45%, transparent 72%);
  filter: blur(60px);
}
.hero-fade::after {
  left: 18%; right: 18%; top: 52%; height: 220px;
  background: radial-gradient(ellipse at 50% 50%, rgba(205,180,255,.55), transparent 70%);
  filter: blur(50px);
  animation: hazeBreath 10s ease-in-out infinite;
}
.home-light .hero-bottom-glow { display: none; }

/* MARK: Shared section text */
.home-light main .eyebrow,
.home-light .newsletter-section .eyebrow { color: var(--l-purple); font-weight: 700; }
.home-light main .eyebrow-line,
.home-light .newsletter-section .eyebrow-line { background: linear-gradient(90deg, var(--l-purple-2), rgba(155,105,255,.2)); box-shadow: 0 0 8px rgba(155,105,255,.5); }
.home-light .section-heading h2,
.home-light .devices-copy h2,
.home-light .proof-copy h2,
.home-light .faq-intro h2,
.home-light .newsletter-inner h2 { color: var(--l-ink); }
.home-light .section-heading h2 span,
.home-light .devices-copy h2 span,
.home-light .proof-copy h2 span,
.home-light .pricing-heading h2 span,
.home-light .faq-intro h2 span,
.home-light .newsletter-inner h2 span {
  color: transparent;
  background: linear-gradient(100deg, #6b3dc2, #9b69ff 60%, #b98cff);
  -webkit-background-clip: text;
  background-clip: text;
}
.home-light .centered-heading > p,
.home-light .devices-copy > p,
.home-light .faq-intro > p,
.home-light .proof-copy > p,
.home-light .heading-aside p,
.home-light .newsletter-inner p,
.home-light .pricing-aside { color: var(--l-text); }
.home-light main .text-link { color: var(--l-purple); }
.home-light .micro-label { color: var(--l-muted); }

/* MARK: Channel band */
.home-light .channel-band { border: 0; background: transparent; padding-top: 10px; }
.home-light .channel-band::after { border-top-color: var(--l-line); box-shadow: 0 -13px 44px rgba(124,77,219,.06); }
.home-light .channel-band-copy strong { color: var(--l-ink); }
.home-light .channel-chip { border-color: var(--l-line); background: #fff; color: var(--l-text); box-shadow: var(--l-card-shadow); }
.home-light .channel-chip:hover { border-color: var(--l-line-strong); background: var(--l-tint); color: var(--l-ink); }
.home-light .chip-symbol { color: var(--l-purple-2); text-shadow: 0 0 12px rgba(155,105,255,.35); }

/* MARK: Features */
.home-light .features-section { background: radial-gradient(ellipse 50% 60% at 8% 50%, rgba(155,105,255,.08), transparent 70%), var(--l-bg); }
.home-light .feature-card { border-color: var(--l-line); background: radial-gradient(ellipse at 80% 120%, rgba(155,105,255,.12), transparent 60%), #fff; box-shadow: var(--l-card-shadow); }
.home-light .feature-card::before { background: linear-gradient(90deg, rgba(124,77,219,.4), rgba(124,77,219,0)); }
.home-light .feature-card::after { background: radial-gradient(circle, rgba(155,105,255,.14), transparent 69%); }
.home-light .feature-card:hover { border-color: var(--l-line-strong); box-shadow: 0 20px 50px rgba(76,40,140,.12), 0 0 0 4px rgba(155,105,255,.06); }
.home-light .feature-orb { border-color: rgba(124,77,219,.25); background: radial-gradient(circle at 38% 30%, #fff, #efe6ff 70%); box-shadow: 0 0 0 5px rgba(155,105,255,.07), 0 8px 22px rgba(124,77,219,.18); color: var(--l-purple); }
.home-light .feature-index { color: var(--l-muted); }
.home-light .feature-card h3 { color: var(--l-ink); }
.home-light .feature-card p { color: var(--l-text); }
.home-light .feature-card > a { color: var(--l-purple); }

/* MARK: Devices */
.home-light .devices-section { background: linear-gradient(180deg, var(--l-bg), var(--l-tint)); }
.home-light .list-orb { border-color: var(--l-line-strong); background: #f0e8ff; color: var(--l-purple); }
.home-light .device-list strong { color: var(--l-ink); }
.home-light .device-list small { color: var(--l-muted); }
.home-light .device-compatibility { border-top-color: var(--l-line); }
.home-light .compatibility-list span { border-color: var(--l-line); background: #fff; color: var(--l-text); }
.home-light .devices-art-glow { background: radial-gradient(ellipse at 60% 48%, rgba(155,105,255,.35), rgba(155,105,255,.08) 50%, transparent 74%); }
.home-light .devices-art > img { border-color: rgba(124,77,219,.2); box-shadow: 0 30px 70px rgba(76,40,140,.22), 0 0 40px rgba(155,105,255,.2); }
.home-light .devices-art::after { border-color: var(--l-line-strong); background: rgba(155,105,255,.06); }
.home-light .devices-caption { border-color: var(--l-line); background: rgba(255,255,255,.88); box-shadow: 0 14px 34px rgba(76,40,140,.16); }
.home-light .devices-caption b { color: var(--l-ink); }
.home-light .devices-caption small { color: var(--l-muted); }
.home-light .caption-mark, .home-light .caption-wave { color: var(--l-purple); }

/* MARK: How it works */
.home-light .proof-section { border: 0; background: radial-gradient(ellipse 45% 70% at 90% 55%, rgba(155,105,255,.2), transparent 70%), radial-gradient(ellipse 40% 60% at 10% 50%, rgba(155,105,255,.1), transparent 70%), var(--l-tint); }
.home-light .proof-section::before { opacity: 0; }
.home-light .proof-ambient { display: none; }
.home-light .proof-symbols { color: var(--l-muted); }
.home-light .proof-symbols i { background: var(--l-purple-2); box-shadow: 0 0 8px var(--l-purple-2); }
.home-light .quote-card { border-color: var(--l-line); background: #fff; box-shadow: 0 24px 60px rgba(76,40,140,.12); }
.home-light .quote-glint { color: rgba(155,105,255,.35); }
.home-light .quote-card blockquote { color: var(--l-ink); }
.home-light .person-avatar { border-color: transparent; background: linear-gradient(135deg, #9b69ff, #6b3dc2); color: #fff; }
.home-light .quote-card figcaption strong { color: var(--l-ink); }
.home-light .quote-card figcaption small { color: var(--l-muted); }
.home-light .sample-tag { border-color: var(--l-line); color: var(--l-purple); }
.home-light .quote-controls { border-top-color: var(--l-line); color: var(--l-muted); }
.home-light .quote-progress { background: #ece4fb; }
.home-light .quote-arrow { border-color: var(--l-line-strong); background: #fff; color: var(--l-purple); }
.home-light .quote-arrow:hover { background: #f0e8ff; }

/* MARK: Discover */
.home-light .discover-section { background: var(--l-bg); }
.home-light .content-toolbar { border-bottom-color: var(--l-line); }
.home-light .content-tab { color: var(--l-muted); }
.home-light .content-tab:hover { color: var(--l-ink); background: var(--l-tint); }
.home-light .content-tab.is-active { border-color: transparent; background: linear-gradient(120deg, #9b69ff, #6b3dc2); color: #fff; box-shadow: 0 8px 20px rgba(124,77,219,.3); }
.home-light .toolbar-note { color: var(--l-muted); }
.home-light .story-art { border-color: rgba(124,77,219,.16); box-shadow: 0 18px 40px rgba(76,40,140,.16); }
.home-light .story-number { color: var(--l-purple); }
.home-light .story-copy h3 { color: var(--l-ink); }
.home-light .story-copy p { color: var(--l-text); }
.home-light .round-link { border-color: var(--l-line-strong); color: var(--l-purple); }
.home-light .round-link:hover { background: #f0e8ff; }
.home-light .live-ribbon { border-color: var(--l-line); background: linear-gradient(100deg, #f3ecff, #fff 70%); box-shadow: var(--l-card-shadow); }
.home-light .ribbon-live { border-color: rgba(230,60,100,.25); background: rgba(250,94,127,.1); color: #d8325a; }
.home-light .live-ribbon > strong { color: var(--l-ink); }
.home-light .ribbon-copy { color: var(--l-muted); }
.home-light .ribbon-link { color: var(--l-purple); }

/* MARK: Pricing */
.home-light .pricing-section { background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(155,105,255,.14), transparent 70%), var(--l-tint); }
.home-light .price-card { background: #fff; box-shadow: var(--l-card-shadow), inset 0 0 0 1px var(--l-line); }
.home-light .price-card:hover { box-shadow: 0 24px 60px rgba(76,40,140,.14), inset 0 0 0 1px var(--l-line-strong); }
.home-light .plan-overline { color: var(--l-purple); }
.home-light .price-card h3 { color: var(--l-ink); }
.home-light .plan-desc { color: var(--l-text); }
.home-light .price strong { color: var(--l-ink); }
.home-light .price-period, .home-light .billing-note { color: var(--l-muted); }
.home-light .price-card .button-outline { background: #f1eaff; color: #4b2a92; }
.home-light .price-card .button-outline:hover { background: #e4d6ff; }
.home-light .plan-features li { color: var(--l-text); }
.home-light .plan-features li::before { color: var(--l-purple-2); }
/* Featured plan keeps the dark purple look as the accent */
.home-light .price-card-featured { background: radial-gradient(ellipse at 50% 0, rgba(185,140,255,.45), transparent 60%), linear-gradient(150deg, #3a2266, #1c1033 75%); box-shadow: 0 30px 70px rgba(91,48,170,.35), 0 0 0 1px rgba(155,105,255,.35); }
.home-light .price-card-featured h3,
.home-light .price-card-featured .price strong { color: #fff; }
.home-light .price-card-featured .plan-overline { color: #d6c0ff; }
.home-light .price-card-featured .plan-desc,
.home-light .price-card-featured .plan-features li { color: #d9cfe8; }
.home-light .price-card-featured .price-period,
.home-light .price-card-featured .billing-note { color: #b9add0; }
.home-light .price-card-featured .plan-features li::before { color: #c9a8ff; }
.home-light .popular-badge { background: rgba(255,255,255,.14); color: #fff; }
.home-light .pricing-footnote { color: var(--l-muted); }
.home-light .pricing-footnote span { color: var(--l-purple-2); }

/* MARK: FAQ */
.home-light .faq-section { background: var(--l-bg); }
.home-light .faq-list { border-top-color: var(--l-line); }
.home-light .faq-item { border-bottom-color: var(--l-line); }
.home-light .faq-item summary { color: var(--l-ink); }
.home-light .faq-plus { border-color: var(--l-line-strong); }
.home-light .faq-plus::before, .home-light .faq-plus::after { background: var(--l-purple); }
.home-light .faq-item p { color: var(--l-text); }

/* MARK: Closing banner - the one bold purple block */
.home-light .closing-section { border: 0; background: linear-gradient(110deg, #6b3dc2, #8b5cf6 50%, #a879ff); }
.home-light .closing-atmosphere { background: radial-gradient(ellipse at 85% 40%, rgba(255,255,255,.25), transparent 45%), radial-gradient(ellipse at 10% 120%, rgba(40,15,90,.35), transparent 55%); }
.home-light .closing-section .eyebrow { color: rgba(255,255,255,.85); }
.home-light .closing-section .eyebrow-line { background: rgba(255,255,255,.7); box-shadow: none; }
.home-light .closing-inner h2 span { color: #fff; opacity: .78; }
.home-light .closing-inner p, .home-light .closing-actions small { color: rgba(255,255,255,.82); }
.home-light .closing-section .button-primary { background: #fff; color: #4b2a92; box-shadow: 0 12px 30px rgba(40,15,90,.3); }

/* MARK: Recover strip + footer */
.home-light .newsletter-section { background: radial-gradient(ellipse 40% 80% at 88% 50%, rgba(155,105,255,.14), transparent 70%), var(--l-tint); }
.home-light .site-footer { border-top-color: var(--l-line); background: var(--l-bg); }
.home-light .site-footer::before { opacity: 0; }
.home-light .site-footer .brand { color: var(--l-ink); }
.home-light .site-footer .brand-mark { color: var(--l-purple); }
.home-light .site-footer .brand-mark svg path:nth-child(2) { fill: #fff; }
.home-light .site-footer .brand-dot { color: var(--l-purple); }
.home-light .footer-brand > p { color: var(--l-muted); }
.home-light .footer-column strong { color: var(--l-ink); }
.home-light .footer-column a { color: var(--l-muted); }
.home-light .footer-column a:hover { color: var(--l-purple); }
.home-light .footer-bottom { border-top-color: var(--l-line); color: var(--l-muted); }
.home-light .footer-bottom > a { color: var(--l-purple); }

/* Focus ring readable on white */
.home-light main :focus-visible,
.home-light .site-footer :focus-visible { outline-color: var(--l-purple); }

/* MARK: Icons */
.ico { width: 1em; height: 1em; display: inline-block; flex: none; vertical-align: -.15em; }
.dash-link > span { display: inline-grid; place-items: center; width: 14px; }
.dash-link .ico { width: 12px; height: 12px; }
.dash-search .ico { width: 10px; height: 10px; }
.dash-brand-mark svg { width: 13px; height: 13px; color: var(--violet-bright); }
.home-light .chip-symbol { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #f1eaff; text-shadow: none; }
.home-light .chip-symbol .ico { width: 15px; height: 15px; }
.home-light .feature-orb .ico { width: 20px; height: 20px; }
.home-light .compatibility-list span { display: inline-flex; align-items: center; gap: 7px; }
.home-light .compatibility-list .ico { width: 15px; height: 15px; color: var(--l-purple); }
.home-light .caption-mark .ico { width: 20px; height: 20px; }

/* MARK: Stats band (first white block, sits above the fade) */
.stats-band { position: relative; z-index: 4; padding: 0 0 70px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 34px; border-radius: 22px; background: rgba(255,255,255,.78); box-shadow: 0 24px 70px rgba(76,40,140,.12), inset 0 0 0 1px var(--l-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.stats-grid div { display: flex; flex-direction: column-reverse; gap: 6px; padding: 28px 30px; }
.stats-grid div + div { border-left: 1px solid var(--l-line); }
.stats-grid dt { color: var(--l-muted); font-size: 13px; font-weight: 500; }
.stats-grid dd { margin: 0; color: var(--l-ink); font: 600 clamp(28px, 3vw, 40px)/1 var(--display); letter-spacing: -.023em; }
.stats-grid dd span { color: var(--l-purple-2); }
.stats-band .channel-chip-list { justify-content: center; gap: 10px; }
.home-light .stats-band .channel-chip { min-height: 46px; gap: 10px; padding: 0 16px 0 9px; border-radius: 999px; font-size: 13px; font-weight: 600; }

/* MARK: Readable type on white (base file uses very small sizes) */
.home-light main .eyebrow, .home-light .newsletter-section .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .18em; }
.home-light .centered-heading > p, .home-light .devices-copy > p, .home-light .faq-intro > p, .home-light .proof-copy > p,
.home-light .heading-aside p, .home-light .newsletter-inner p { font-size: 15px; line-height: 1.7; }
.home-light .feature-index { font-size: 10px; }
.home-light .feature-card h3 { font-size: 19px; }
.home-light .feature-card p { font-size: 14px; line-height: 1.65; }
.home-light .feature-card > a, .home-light main .text-link { font-size: 13px; }
.home-light .device-list strong { font-size: 15px; }
.home-light .device-list small { font-size: 13px; }
.home-light .list-orb { width: 30px; height: 30px; font-size: 10px; }
.home-light .compatibility-list span { padding: 9px 12px; font-size: 12px; border-radius: 10px; }
.home-light .micro-label { font-size: 10px; }
.home-light .devices-caption b { font-size: 13px; }
.home-light .devices-caption small { font-size: 11px; }
.home-light .art-index { font-size: 9px; }
.home-light .quote-card figcaption strong { font-size: 13px; }
.home-light .quote-card figcaption small, .home-light .quote-controls { font-size: 11px; }
.home-light .person-avatar { width: 40px; height: 40px; font-size: 12px; }
.home-light .sample-tag { font-size: 9px; }
.home-light .proof-symbols { font-size: 10px; }
.home-light .content-tab { padding: 10px 16px; font-size: 13px; border-radius: 999px; }
.home-light .toolbar-note { font-size: 12px; }
.home-light .story-category { font-size: 9px; }
.home-light .story-number { font-size: 10px; }
.home-light .story-copy h3 { font-size: 18px; }
.home-light .story-copy p { font-size: 13px; }
.home-light .live-ribbon > strong { font-size: 14px; }
.home-light .ribbon-copy, .home-light .ribbon-link { font-size: 12px; }
.home-light .ribbon-live { font-size: 9px; }
.home-light .faq-item summary { font-size: 16px; padding: 22px 2px; }
.home-light .faq-item p { font-size: 14px; }
.home-light .closing-inner p { font-size: 15px; }
.home-light .closing-actions small { font-size: 12px; }
.home-light .footer-brand > p { font-size: 13px; }
.home-light .footer-column strong { font-size: 13px; }
.home-light .footer-column a { font-size: 13px; }
.home-light .footer-bottom { font-size: 12px; }
.home-light .pricing-footnote { font-size: 13px; }

/* MARK: Plans (3 tiers + billing period) */
.home-light .pricing-section { position: relative; isolation: isolate; overflow: hidden; padding-top: 40px; background: var(--l-bg); }
.pricing-glow { position: absolute; z-index: -1; left: 50%; top: 30%; width: 80%; height: 70%; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 50%, rgba(155,105,255,.16), transparent 70%); filter: blur(30px); }
.home-light .pricing-heading { align-items: flex-end; margin-bottom: 44px; }
.billing-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.billing-copy { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.billing-label { color: var(--l-purple); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.billing-sub { color: var(--l-ink); font: 600 16px var(--display); letter-spacing: -.009em; }
.home-light .billing-control { padding: 5px; border-radius: 999px; background: #f1eaff; box-shadow: inset 0 0 0 1px var(--l-line); }
.home-light .billing-option { min-height: 40px; padding: 0 16px; color: var(--l-text); font-size: 13px; }
.home-light .billing-option span { margin-left: 6px; padding: 2px 6px; border-radius: 999px; background: rgba(124,77,219,.12); color: var(--l-purple); font-size: 10px; font-weight: 700; }
.home-light .billing-option.is-selected { background: linear-gradient(130deg, #9b69ff, #6b3dc2); color: #fff; box-shadow: 0 8px 20px rgba(124,77,219,.35); }
.home-light .billing-option.is-selected span { background: rgba(255,255,255,.22); color: #fff; }
.home-light .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.home-light .plan-card { display: flex; flex-direction: column; padding: 34px 30px 26px; border-radius: 24px; }
.home-light .plan-card .plan-overline { font-size: 11px; text-transform: uppercase; }
.home-light .plan-card h3 { margin-top: 10px; font-size: 30px; }
.home-light .plan-card .plan-desc { min-height: 44px; font-size: 14px; line-height: 1.55; }
.home-light .plan-card .price { margin-top: 22px; }
.home-light .plan-card .price strong { font-size: 52px; }
.home-light .plan-card .price-period { font-size: 14px; }
/* The big number is the total for the period ("$25.62 / 3 months"): let the period wrap under long totals. */
.home-light .plan-card .price { flex-wrap: wrap; row-gap: 4px; }
.home-light .plan-card .billing-note { margin: 10px 0 22px; min-height: 18px; font-size: 13px; }
.home-light .plan-card .plan-features { order: 0; gap: 12px; margin: 0 0 26px; }
.home-light .plan-card .plan-features li { display: flex; align-items: flex-start; gap: 10px; padding: 0; font-size: 14px; }
.home-light .plan-card .plan-features li::before { content: none; }
.home-light .plan-card .plan-features svg { width: 18px; height: 18px; flex: none; padding: 2px; border-radius: 50%; background: #f1eaff; color: var(--l-purple); }
.home-light .plan-card > .button { margin-top: auto; min-height: 50px; font-size: 14px; }
.home-light .popular-badge { top: 26px; right: 26px; padding: 7px 12px; font-size: 10px; text-transform: uppercase; background: linear-gradient(130deg, #b98cff, #8b5cf6); color: #fff; box-shadow: 0 6px 18px rgba(155,105,255,.45); }
.home-light .price-card-featured .plan-features svg { background: rgba(255,255,255,.14); color: #e2d2ff; }
.plan-more { margin-top: 14px; border-top: 1px solid var(--l-line); padding-top: 12px; }
.plan-more summary { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px; color: var(--l-purple); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.plan-more summary::-webkit-details-marker { display: none; }
.plan-more summary::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.plan-more[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.plan-more dl { display: grid; gap: 0; margin: 12px 0 0; }
.plan-more dl div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px dashed var(--l-line); font-size: 13px; }
.plan-more dt { color: var(--l-muted); }
.plan-more dd { margin: 0; color: var(--l-ink); text-align: right; font-weight: 500; }
.price-card-featured .plan-more { border-top-color: rgba(255,255,255,.14); }
.price-card-featured .plan-more summary { color: #e2d2ff; }
.price-card-featured .plan-more dl div { border-bottom-color: rgba(255,255,255,.12); }
.price-card-featured .plan-more dt { color: #b9add0; }
.price-card-featured .plan-more dd { color: #fff; }
.home-light .price-card-featured { transform: translateY(-10px); }
.home-light .price-card-featured:hover { transform: translateY(-14px); }

@media (max-width: 1000px) {
  .home-light .pricing-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .home-light .price-card-featured { transform: none; }
  .home-light .pricing-heading { flex-direction: column; align-items: flex-start; }
  .billing-wrap, .billing-copy { align-items: flex-start; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid div:nth-child(3) { border-left: 0; }
  .stats-grid div:nth-child(n+3) { border-top: 1px solid var(--l-line); }
}
@media (max-width: 560px) {
  .home-light .billing-control { flex-wrap: wrap; border-radius: 16px; }
  .home-light .billing-option { padding: 0 11px; font-size: 12px; }
  .stats-grid div { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-lights .beam, .hero-lights .aurora, .hero-fade::after { animation: none; }
}

@media (max-width: 720px) {
  .home-light .hero { padding-bottom: 300px; }
  .hero-fade { height: 480px; margin-top: -310px; margin-bottom: -140px; }
}

/* MARK: Dark mode (header toggle) - same layout, dark surfaces.
   Most colors above come from the --l-* variables; this swaps them and
   overrides the few hard-coded light surfaces. */
[data-theme="dark"] {
  --l-bg: #08070e;
  --l-tint: #0d0a17;
  --l-ink: #f7f4ff;
  --l-text: #b9b0c6;
  --l-muted: #8f86a0;
  --l-line: rgba(195, 171, 255, .14);
  --l-line-strong: rgba(195, 171, 255, .3);
  --l-purple: #bb91ff;
  --l-purple-2: #a77bff;
  --l-card-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  --d-card: #120e1d;
  --d-soft: rgba(155, 105, 255, .16);
}
[data-theme="dark"] .hero-fade {
  background: linear-gradient(180deg,
    rgba(8,7,14,0) 0%,
    rgba(40,20,74,.18) 14%,
    rgba(90,50,160,.24) 28%,
    rgba(40,22,72,.6) 42%,
    rgba(14,10,24,.9) 54%,
    rgba(8,7,14,.98) 60%,
    #08070e 64%);
}
[data-theme="dark"] .hero-fade::after { background: radial-gradient(ellipse at 50% 50%, rgba(155,105,255,.35), transparent 70%); }
[data-theme="dark"] .home-light .section-heading h2 span,
[data-theme="dark"] .home-light .devices-copy h2 span,
[data-theme="dark"] .home-light .proof-copy h2 span,
[data-theme="dark"] .home-light .pricing-heading h2 span,
[data-theme="dark"] .home-light .faq-intro h2 span,
[data-theme="dark"] .home-light .newsletter-inner h2 span { background-image: linear-gradient(100deg, #9b69ff, #c9a8ff 60%, #e2d2ff); }

[data-theme="dark"] .stats-grid { background: rgba(18,14,29,.82); box-shadow: 0 24px 70px rgba(0,0,0,.45), inset 0 0 0 1px var(--l-line); }
[data-theme="dark"] .home-light .channel-chip,
[data-theme="dark"] .home-light .compatibility-list span,
[data-theme="dark"] .home-light .quote-card,
[data-theme="dark"] .home-light .quote-arrow,
[data-theme="dark"] .home-light .price-card:not(.price-card-featured) { background: var(--d-card); }
[data-theme="dark"] .home-light .channel-chip:hover { background: #1a1428; }
[data-theme="dark"] .home-light .chip-symbol,
[data-theme="dark"] .home-light .list-orb,
[data-theme="dark"] .home-light .quote-arrow:hover,
[data-theme="dark"] .home-light .round-link:hover,
[data-theme="dark"] .home-light .plan-card .plan-features svg { background: var(--d-soft); }
[data-theme="dark"] .home-light .feature-card { background: radial-gradient(ellipse at 80% 120%, rgba(155,105,255,.18), transparent 60%), var(--d-card); }
[data-theme="dark"] .home-light .feature-orb { background: radial-gradient(circle at 38% 30%, rgba(165,111,246,.3), rgba(38,24,58,.6) 70%); box-shadow: 0 0 0 5px rgba(151,104,222,.06), 0 0 21px rgba(142,80,220,.22); }
[data-theme="dark"] .home-light .devices-caption { background: rgba(18,14,29,.9); }
[data-theme="dark"] .home-light .quote-progress { background: rgba(231,216,255,.12); }
[data-theme="dark"] .home-light .live-ribbon { background: linear-gradient(100deg, rgba(50,31,68,.8), var(--d-card) 70%); }
[data-theme="dark"] .home-light .ribbon-live { color: #ff9aad; }
[data-theme="dark"] .home-light .price-card .button-outline { background: rgba(255,255,255,.07); color: #f2eafa; }
[data-theme="dark"] .home-light .price-card .button-outline:hover { background: rgba(151,105,207,.24); }
[data-theme="dark"] .home-light .billing-control { background: rgba(255,255,255,.05); }
[data-theme="dark"] .home-light .billing-option span { background: rgba(187,145,255,.16); }
[data-theme="dark"] .home-light .closing-section .button-primary { color: #4b2a92; }
[data-theme="dark"] .home-light .site-footer .brand-mark svg path:nth-child(2) { fill: #08070e; }
[data-theme="dark"] .home-light .stats-band .channel-chip { color: var(--l-text); }
[data-theme="dark"] .home-light .notice-error { color: #ffb4ae; }

/* MARK: "Most popular" plan - same card as the others, only an accent ring + badge */
.home-light .plan-card.is-popular { box-shadow: var(--l-card-shadow), inset 0 0 0 2px var(--l-purple-2), 0 22px 60px rgba(124,77,219,.16); }
.home-light .plan-card.is-popular:hover { box-shadow: 0 26px 64px rgba(76,40,140,.18), inset 0 0 0 2px var(--l-purple-2); }
.home-light .plan-card.is-popular > .button { color: #fff; }
[data-theme="dark"] .home-light .plan-card.is-popular { background: var(--d-card); }

/* MARK: Hero without the dashboard preview: shorter dark area, same long fade */
/* Dark starry area runs well past the buttons, then a long, layered
   transition: deep purple -> violet glow -> lavender -> white. */
/* The fade starts lower, and the stats band is pulled up into it (negative
   margin-bottom), so the lavender glow runs behind and below the stats cards. */
/* The hero's bottom edge must sit inside the fully-masked, blurred part of
   the fade (>= 34% of its height), otherwise a hard line shows. */
.home-light .hero { padding-bottom: 560px; }
.hero-fade {
  height: 1000px;
  margin-top: -450px;
  margin-bottom: -500px;
  background:
    radial-gradient(120% 50% at 50% 40%, rgba(160,110,255,.32), transparent 64%),
    linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(40,18,80,.16) 9%,
      rgba(88,48,170,.26) 18%,
      rgba(140,95,240,.34) 27%,
      rgba(186,152,255,.5) 36%,
      rgba(214,195,255,.66) 45%,
      rgba(232,222,255,.8) 54%,
      rgba(244,239,255,.9) 62%,
      rgba(251,249,255,.97) 69%,
      #fff 74%);
  -webkit-backdrop-filter: blur(40px) saturate(1.25);
  backdrop-filter: blur(40px) saturate(1.25);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 14%, #000 34%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 14%, #000 34%);
}
/* Wide violet glow where the dark meets the light, plus a softer lavender horizon below it. */
.hero-fade::before { left: -6%; right: -6%; top: 20%; height: 380px; filter: blur(80px);
  background: radial-gradient(ellipse at 50% 50%, rgba(150,95,255,.55), rgba(150,95,255,.18) 45%, transparent 72%); }
/* Lavender haze centred on the stats band, spilling below it. */
.hero-fade::after { left: 10%; right: 10%; top: 40%; height: 380px; filter: blur(70px);
  background: radial-gradient(ellipse at 50% 50%, rgba(212,190,255,.62), transparent 70%); }
[data-theme="dark"] .hero-fade {
  background:
    radial-gradient(120% 50% at 50% 40%, rgba(130,80,230,.28), transparent 64%),
    linear-gradient(180deg,
      rgba(8,7,14,0) 0%,
      rgba(40,20,74,.18) 10%,
      rgba(90,50,160,.26) 20%,
      rgba(80,44,146,.4) 32%,
      rgba(52,28,96,.58) 46%,
      rgba(28,16,52,.76) 57%,
      rgba(14,10,24,.92) 65%,
      rgba(8,7,14,.98) 70%,
      #08070e 74%);
}
@media (max-width: 720px) {
  .home-light .hero { padding-bottom: 440px; }
  .hero-fade { height: 760px; margin-top: -340px; margin-bottom: -390px; }
  .hero-fade::before { height: 240px; filter: blur(60px); }
  .hero-fade::after { height: 180px; filter: blur(45px); }
}
/* The long fade ends under the features section; keep that section (and its
   heading) above the fade's backdrop blur. Its background matches the fade's
   final colour, so there is no visible seam. */
.home-light .features-section { position: relative; z-index: 5;
  background: radial-gradient(ellipse 50% 60% at 8% 50%, rgba(155,105,255,.08), transparent 70%),
    linear-gradient(180deg, transparent 0, var(--l-bg) 220px); }

/* MARK: Free-trial invitation under the plans */
.trial-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 26px auto 0; max-width: 860px; padding: 20px 24px; border-radius: 20px;
  background: radial-gradient(ellipse at 0% 50%, rgba(155,105,255,.14), transparent 60%), #fff; box-shadow: var(--l-card-shadow), inset 0 0 0 1px var(--l-line); }
.trial-cta div { display: grid; gap: 4px; }
.trial-cta strong { color: var(--l-ink); font: 600 18px/1.3 var(--display); letter-spacing: -.009em; }
.trial-cta div span { color: var(--l-muted); font-size: 14px; }
.trial-cta .button { flex: none; }
[data-theme="dark"] .trial-cta { background: radial-gradient(ellipse at 0% 50%, rgba(155,105,255,.18), transparent 60%), #120e1e; }
@media (max-width: 720px) { .trial-cta { flex-direction: column; align-items: stretch; text-align: center; } }

/* MARK: Hero buttons: 1. Start for free (primary), 2. View plans (glass); "How it works" link below */
.hero-actions { flex-wrap: wrap; }
.hero-actions .hero-free span { color: #fff; }
.hero-actions .hero-plans { border: 1px solid rgba(214,197,255,.42); background: rgba(155,105,255,.16); color: #fff; box-shadow: 0 8px 24px rgba(118,60,206,.18), inset 0 1px rgba(255,255,255,.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero-actions .hero-plans:hover { background: rgba(155,105,255,.28); border-color: rgba(230,215,255,.6); }
.hero-actions .hero-plans span { color: #d9c2ff; }
.hero-how { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; padding: 6px 4px; color: rgba(236,228,250,.78); font-size: 13px; font-weight: 600; transition: color .2s; }
.hero-how .play-outline { width: 26px; height: 26px; font-size: 8px !important; transition: border-color .2s, background .2s; }
.hero-how:hover { color: #fff; }
.hero-how:hover .play-outline { border-color: rgba(255,255,255,.8); background: rgba(155,105,255,.25); }
.hero-how:focus-visible { outline: 2px solid #d7c4ff; outline-offset: 4px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .hero-how, .hero-how .play-outline { transition: none; } }
@media (max-width: 520px) {
  .hero-actions .button { flex: 1 1 42%; justify-content: center; }
  .hero-how { margin-top: 14px; font-size: 12px; }
}
/* MARK: Hero devices image (TV, laptop, phone, tablet, box) under the buttons */
.hero-devices { position: relative; z-index: 1; width: min(880px, 94vw); margin: 26px auto 0; }
.hero-devices::before { content: ""; position: absolute; inset: 12% 8% 6%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse at 50% 55%, rgba(155,105,255,.38), transparent 70%); filter: blur(40px); pointer-events: none; }
.hero-devices img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgba(30,10,70,.55)); animation: heroFloat 7s ease-in-out infinite; }
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .hero-devices img { animation: none; } }
/* The image fills the space that used to sit empty under the buttons: a
   shorter hero bottom, and the fade starts a little over the image's base.
   The hero's bottom edge stays inside the fade's fully-masked part (>= 34%). */
/* The image's own soft glow runs past its last device: let it overlap the space below. */
.hero-devices { margin-bottom: -8%; }
.home-light .hero { padding-bottom: 220px; }
.hero-fade { margin-top: -360px; }
/* Stats cards right under the image, so they are in view without scrolling
   past an empty band. They are pulled up by the fade's negative bottom margin
   (a margin on .stats-band itself would collapse into it and do nothing). */
.hero-fade { margin-bottom: -800px; }
/* The stats card now sits on the dark end of the hero: more solid, so it reads cleanly. */
.home-light .stats-grid { background: rgba(255,255,255,.94); box-shadow: 0 24px 70px rgba(20,8,50,.35), inset 0 0 0 1px var(--l-line); }
[data-theme="dark"] .home-light .stats-grid { background: rgba(22,16,36,.92); box-shadow: 0 24px 70px rgba(0,0,0,.45), inset 0 0 0 1px rgba(195,171,255,.14); }
@media (max-width: 720px) {
  .hero-devices { margin-top: 18px; }
  .home-light .hero { padding-bottom: 170px; }
  .hero-fade { margin-top: -280px; margin-bottom: -610px; }
}