/*
 * modern.css - loaded last on every page.
 * A calmer, flatter layer on top of styles.css / app.css / light.css:
 * one dark hero with a single soft glow, flat sections and cards, thin borders,
 * no gradient text, no glows, no animated decoration.
 * Home rules are scoped to .home-light; checkout / pay / line / account /
 * recover / trial rules are scoped to .page-frame (see "Platform pages").
 */

:root {
  --m-bg: #ffffff;
  --m-tint: #f7f6fa;
  --m-ink: #0f0d16;
  --m-text: #4d4858;
  --m-muted: #7a7486;
  --m-border: #e8e6ee;
  --m-border-strong: #d6d2e0;
  --m-card: #ffffff;
  --m-soft: #f3effd;
  --m-accent: #7c4ddb;
  --m-accent-ink: #6a3cc8;
  --m-shadow: 0 1px 2px rgba(15, 13, 22, .04), 0 8px 24px rgba(15, 13, 22, .05);
  --m-hero: #0b0a10;
}
[data-theme="dark"] {
  --m-bg: #0b0a10;
  --m-tint: #100e17;
  --m-ink: #f5f3fa;
  --m-text: #b4aec0;
  --m-muted: #8a8496;
  --m-border: rgba(255, 255, 255, .08);
  --m-border-strong: rgba(255, 255, 255, .16);
  --m-card: #13111b;
  --m-soft: rgba(155, 105, 255, .12);
  --m-accent: #a382f5;
  --m-accent-ink: #b89cff;
  --m-shadow: none;
}

html, body.home-light, .home-light .site-frame { background: var(--m-bg); }
.home-light { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* MARK: Hero - one dark surface, one soft glow */
.home-light .hero {
  padding-bottom: 0;
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(124, 77, 219, .38), transparent 75%),
    var(--m-hero);
}
.home-light .hero::before { content: none; }
.home-light .site-nav { border-bottom-color: rgba(255, 255, 255, .07); }
.home-light .nav-links a { font-weight: 500; }

.home-light .hero-copy { padding-top: 88px; }
.home-light .hero-kicker {
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
}
.home-light .signal-dot { width: 6px; height: 6px; background: #a382f5; box-shadow: none; }
.home-light .hero h1 {
  margin: 28px auto 20px;
  max-width: 14ch;
  color: #fff;
  font: 600 clamp(44px, 6.4vw, 84px)/1 var(--sans);
  letter-spacing: -.045em;
  text-shadow: none;
}
.home-light .hero h1 span { color: rgba(255, 255, 255, .5); }
.home-light .hero-copy > p {
  max-width: 540px;
  color: rgba(255, 255, 255, .62);
  font-size: 17px;
  line-height: 1.6;
}
.home-light .hero-actions { margin-top: 34px; gap: 12px; }
.home-light .hero-actions .button { min-height: 48px; padding: 0 24px; font-size: 15px !important; }
.home-light .hero-actions .hero-plans {
  background: rgba(255, 255, 255, .04) !important;
  border-color: rgba(255, 255, 255, .16) !important;
}
.home-light .hero-actions .hero-plans:hover { background: rgba(255, 255, 255, .09) !important; border-color: rgba(255, 255, 255, .28) !important; }
.home-light .hero-how { margin-top: 20px; color: rgba(255, 255, 255, .6); font-weight: 500; }
.home-light .hero-how .play-outline { border-color: rgba(255, 255, 255, .2); }

.home-light .hero-devices { width: min(920px, 94vw); margin: 48px auto 0; }
.home-light .hero-devices::before { content: none; }
.home-light .hero-devices img { filter: none; animation: none; }

/* MARK: Stats - straddles the hero's bottom edge */
.home-light .stats-band { margin-top: -64px; padding: 0 0 24px; background: transparent; }
.home-light .stats-grid,
[data-theme="dark"] .home-light .stats-grid {
  margin-bottom: 28px;
  border: 1px solid var(--m-border);
  border-radius: 16px;
  background: var(--m-card);
  box-shadow: 0 1px 2px rgba(15, 13, 22, .06), 0 16px 40px rgba(15, 13, 22, .10);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.home-light .stats-grid div { padding: 26px 28px; }
.home-light .stats-grid div + div { border-left-color: var(--m-border); }
.home-light .stats-grid dt { color: var(--m-muted); font-size: 14px; }
.home-light .stats-grid dd { color: var(--m-ink); font-weight: 600; letter-spacing: -.035em; }
.home-light .stats-grid dd span { color: var(--m-accent); }

.home-light .stats-band .channel-chip,
[data-theme="dark"] .home-light .stats-band .channel-chip {
  min-height: 40px;
  padding: 0 14px 0 10px;
  border: 1px solid var(--m-border);
  background: var(--m-card);
  box-shadow: none;
  color: var(--m-text);
  font-weight: 500;
}
.home-light .stats-band .channel-chip:hover { border-color: var(--m-border-strong); background: var(--m-tint); color: var(--m-ink); }
.home-light .chip-symbol,
[data-theme="dark"] .home-light .chip-symbol { width: 22px; height: 22px; border-radius: 6px; background: transparent; color: var(--m-accent); }
.home-light .chip-symbol .ico { width: 16px; height: 16px; }

/* MARK: Sections - flat backgrounds, consistent rhythm */
.home-light .section { padding: 96px 0; }
.home-light .features-section,
.home-light .pricing-section,
.home-light .devices-section,
.home-light .discover-section,
.home-light .faq-section { background: var(--m-bg); }
.home-light .proof-section,
.home-light .newsletter-section { background: var(--m-tint); }
.home-light .features-section { padding-top: 88px; }
.home-light .pricing-glow,
.home-light .proof-ambient,
.home-light .closing-atmosphere,
.home-light .devices-art-glow,
.home-light .devices-art::after,
.home-light .art-index,
.home-light .quote-glint,
.home-light .feature-index,
.home-light .feature-card::before,
.home-light .feature-card::after { display: none; }

/* Headings: two-tone, no gradient text */
.home-light main .eyebrow,
.home-light .newsletter-section .eyebrow {
  gap: 0;
  color: var(--m-accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
}
.home-light main .eyebrow-line,
.home-light .newsletter-section .eyebrow-line { display: none; }
.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 {
  margin-top: 12px;
  color: var(--m-ink);
  font: 600 clamp(32px, 3.8vw, 50px)/1.06 var(--sans);
  letter-spacing: -.04em;
}
.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,
[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 {
  color: var(--m-muted);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
.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 { color: var(--m-text); font-size: 16px; line-height: 1.65; }
.home-light .centered-heading { margin-bottom: 56px; }
.home-light main .text-link { color: var(--m-accent); font-size: 14px; font-weight: 600; }

/* MARK: Feature cards */
.home-light .feature-grid { gap: 16px; }
.home-light .feature-card,
[data-theme="dark"] .home-light .feature-card {
  min-height: 0;
  padding: 28px;
  border: 1px solid var(--m-border);
  border-radius: 16px;
  background: var(--m-card);
  box-shadow: none;
  transform: none;
}
.home-light .feature-card:hover { border-color: var(--m-border-strong); box-shadow: var(--m-shadow); transform: none; }
.home-light .feature-orb,
[data-theme="dark"] .home-light .feature-orb {
  width: 44px;
  height: 44px;
  margin-bottom: 22px;
  border: 0;
  border-radius: 12px;
  background: var(--m-soft);
  box-shadow: none;
  color: var(--m-accent);
}
.home-light .feature-orb .ico { width: 22px; height: 22px; }
.home-light .feature-card h3 { margin: 0 0 8px; color: var(--m-ink); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.home-light .feature-card p { color: var(--m-text); font-size: 15px; line-height: 1.6; }
.home-light .feature-card > a { margin-top: 18px; color: var(--m-accent); font-size: 14px; font-weight: 600; }

/* MARK: Pricing */
.home-light .pricing-section { padding-top: 96px; }
.home-light .billing-label { color: var(--m-accent); font-size: 13px; letter-spacing: .02em; text-transform: none; }
.home-light .billing-sub { color: var(--m-ink); }
.home-light .billing-control,
[data-theme="dark"] .home-light .billing-control { padding: 4px; background: var(--m-tint); box-shadow: inset 0 0 0 1px var(--m-border); }
.home-light .billing-option { color: var(--m-text); font-weight: 500; }
.home-light .billing-option.is-selected { background: var(--m-ink); color: var(--m-bg); box-shadow: 0 1px 2px rgba(15, 13, 22, .2); }
.home-light .billing-option span,
[data-theme="dark"] .home-light .billing-option span { background: var(--m-soft); color: var(--m-accent); }
.home-light .billing-option.is-selected span { background: rgba(255, 255, 255, .16); color: inherit; }
[data-theme="dark"] .home-light .billing-option.is-selected span { background: rgba(15, 13, 22, .1); }

.home-light .plan-card,
.home-light .price-card,
[data-theme="dark"] .home-light .price-card:not(.price-card-featured),
[data-theme="dark"] .home-light .plan-card.is-popular {
  border: 1px solid var(--m-border);
  border-radius: 20px;
  background: var(--m-card);
  box-shadow: none;
  transform: none;
}
.home-light .price-card:hover { box-shadow: var(--m-shadow); transform: none; }
.home-light .plan-card.is-popular,
.home-light .plan-card.is-popular:hover {
  border-color: var(--m-accent);
  box-shadow: 0 0 0 1px var(--m-accent), var(--m-shadow);
}
.home-light .plan-overline { color: var(--m-muted); letter-spacing: .08em; }
.home-light .plan-card h3 { color: var(--m-ink); font-weight: 600; letter-spacing: -.03em; }
.home-light .plan-card .price strong { font-weight: 600; letter-spacing: -.045em; }
.home-light .popular-badge {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--m-accent);
  box-shadow: none;
  color: #fff;
  letter-spacing: .06em;
}
.home-light .plan-card .plan-features svg,
[data-theme="dark"] .home-light .plan-card .plan-features svg { padding: 0; background: transparent; color: var(--m-accent); }
.home-light .plan-more { border-top-color: var(--m-border); }
.home-light .plan-more summary { color: var(--m-text); font-weight: 500; }
.home-light .plan-more dl div { border-bottom: 1px solid var(--m-border); }
.home-light .pricing-footnote { color: var(--m-muted); }
.home-light .pricing-footnote span { display: none; }
.home-light .trial-cta,
[data-theme="dark"] .home-light .trial-cta {
  border: 1px solid var(--m-border);
  border-radius: 16px;
  background: var(--m-tint);
  box-shadow: none;
}

/* MARK: Devices */
.home-light .list-orb,
[data-theme="dark"] .home-light .list-orb { border: 0; background: var(--m-soft); color: var(--m-accent); font-weight: 600; }
.home-light .device-list strong { color: var(--m-ink); font-weight: 600; }
.home-light .device-list small { color: var(--m-muted); font-size: 14px; }
.home-light .device-compatibility { border-top-color: var(--m-border); }
.home-light .micro-label { color: var(--m-muted); font-size: 12px; font-weight: 500; letter-spacing: .04em; }
.home-light .compatibility-list span,
[data-theme="dark"] .home-light .compatibility-list span { border-color: var(--m-border); background: var(--m-card); color: var(--m-text); font-size: 13px; }
.home-light .devices-art > img { border: 1px solid var(--m-border); border-radius: 20px; box-shadow: var(--m-shadow); }
.home-light .devices-caption,
[data-theme="dark"] .home-light .devices-caption {
  border: 1px solid var(--m-border);
  border-radius: 12px;
  background: var(--m-card);
  box-shadow: var(--m-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.home-light .devices-caption b { color: var(--m-ink); }

/* MARK: How it works */
.home-light .proof-section { padding: 96px 0; border: 0; }
.home-light .proof-symbols { color: var(--m-muted); letter-spacing: .08em; }
.home-light .proof-symbols i { background: var(--m-border-strong); box-shadow: none; }
.home-light .quote-card,
[data-theme="dark"] .home-light .quote-card {
  border: 1px solid var(--m-border);
  border-radius: 20px;
  background: var(--m-card);
  box-shadow: var(--m-shadow);
}
.home-light .quote-card blockquote { color: var(--m-ink); font-weight: 500; letter-spacing: -.015em; }
.home-light .person-avatar { border: 0; background: var(--m-accent); color: #fff; }
.home-light .sample-tag { border-color: var(--m-border); color: var(--m-muted); }
.home-light .quote-controls { border-top-color: var(--m-border); }
.home-light .quote-progress,
[data-theme="dark"] .home-light .quote-progress { background: var(--m-border); }
.home-light .quote-progress i { background: var(--m-accent); box-shadow: none; }
.home-light .quote-arrow,
[data-theme="dark"] .home-light .quote-arrow { border-color: var(--m-border-strong); background: var(--m-card); color: var(--m-ink); }
.home-light .quote-arrow:hover,
[data-theme="dark"] .home-light .quote-arrow:hover { background: var(--m-tint); }

/* MARK: Discover */
.home-light .content-toolbar { border-bottom-color: var(--m-border); }
.home-light .content-tab { color: var(--m-text); font-weight: 500; }
.home-light .content-tab:hover { background: var(--m-tint); color: var(--m-ink); }
.home-light .content-tab.is-active { border-color: transparent; background: var(--m-ink); color: var(--m-bg); box-shadow: none; }
.home-light .toolbar-note { color: var(--m-muted); }
.home-light .toolbar-note .signal-dot { background: var(--m-accent); }
.home-light .story-art { border: 1px solid var(--m-border); border-radius: 16px; box-shadow: none; }
.home-light .story-number { color: var(--m-muted); }
.home-light .story-copy h3 { color: var(--m-ink); font-weight: 600; letter-spacing: -.02em; }
.home-light .story-copy p { color: var(--m-text); font-size: 14px; }
.home-light .round-link { border-color: var(--m-border-strong); color: var(--m-ink); }
.home-light .round-link:hover,
[data-theme="dark"] .home-light .round-link:hover { background: var(--m-tint); }
.home-light .live-ribbon,
[data-theme="dark"] .home-light .live-ribbon { border: 1px solid var(--m-border); border-radius: 14px; background: var(--m-tint); box-shadow: none; }
.home-light .live-ribbon > strong { color: var(--m-ink); font-weight: 600; }
.home-light .ribbon-link { color: var(--m-accent); font-weight: 600; }

/* MARK: FAQ */
.home-light .faq-list { border-top-color: var(--m-border); }
.home-light .faq-item { border-bottom-color: var(--m-border); }
.home-light .faq-item summary { color: var(--m-ink); font-weight: 500; letter-spacing: -.01em; }
.home-light .faq-plus { border-color: var(--m-border-strong); }
.home-light .faq-plus::before, .home-light .faq-plus::after { background: var(--m-ink); }
.home-light .faq-item p { color: var(--m-text); font-size: 15px; line-height: 1.65; }

/* MARK: Closing band - a single flat accent block */
.home-light .closing-section { padding: 72px 0; border: 0; background: var(--m-accent); }
[data-theme="dark"] .home-light .closing-section { background: #5b34b0; }
.home-light .closing-section .eyebrow { color: rgba(255, 255, 255, .8); }
.home-light .closing-inner h2 { font-weight: 600; letter-spacing: -.04em; }
.home-light .closing-inner h2 span { color: rgba(255, 255, 255, .7); opacity: 1; }
.home-light .closing-section .button-primary { box-shadow: none; }

/* MARK: Recover strip + footer */
.home-light .newsletter-section { border: 0; }
.home-light .site-footer { border-top-color: var(--m-border); background: var(--m-bg); }
.home-light .footer-column strong { color: var(--m-ink); font-weight: 600; }
.home-light .footer-column a { color: var(--m-muted); }
.home-light .footer-column a:hover { color: var(--m-ink); }
.home-light .footer-bottom { border-top-color: var(--m-border); color: var(--m-muted); }
.home-light .footer-bottom > a { color: var(--m-ink); }

/* MARK: Guide - long-form reading section with an "On this page" index */
.home-light .guide-section { background: var(--m-tint); }
.home-light .guide-section .centered-heading > p { max-width: 620px; }
.guide-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; }
.guide-toc { position: sticky; top: 24px; padding: 22px; border: 1px solid var(--m-border); border-radius: 16px; background: var(--m-card); }
.guide-toc strong { display: block; margin-bottom: 12px; color: var(--m-ink); font-size: 14px; font-weight: 600; }
.guide-toc ol { margin: 0; padding: 0 0 0 18px; color: var(--m-muted); font-size: 14px; line-height: 1.5; }
.guide-toc li + li { margin-top: 8px; }
.guide-toc a { color: var(--m-text); text-decoration: none; }
.guide-toc a:hover, .guide-toc a:focus-visible { color: var(--m-accent); text-decoration: underline; }
.guide-article { max-width: 720px; color: var(--m-text); font-size: 17px; line-height: 1.75; }
.guide-part { scroll-margin-top: 24px; }
.guide-part + .guide-part { margin-top: 44px; padding-top: 44px; border-top: 1px solid var(--m-border); }
.guide-part h3 { margin: 0 0 14px; color: var(--m-ink); font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; line-height: 1.25; letter-spacing: -.025em; }
.guide-part p { margin: 0 0 16px; }
.guide-part ul, .guide-part ol { margin: 0 0 16px; padding-left: 22px; }
.guide-part li + li { margin-top: 8px; }
.guide-part li::marker { color: var(--m-accent); font-weight: 600; }
.guide-part strong { color: var(--m-ink); font-weight: 600; }
.guide-part > :last-child { margin-bottom: 0; }
.guide-cta { margin: 44px 0 0; }
/* MARK: Responsive */
@media (max-width: 1000px) {
  .home-light .stats-grid div:nth-child(n+3) { border-top-color: var(--m-border); }
  .guide-layout { grid-template-columns: 1fr; gap: 32px; }
  .guide-toc { position: static; }
}
@media (max-width: 720px) {
  .guide-article { font-size: 16px; }
  .guide-part + .guide-part { margin-top: 32px; padding-top: 32px; }
}
@media (max-width: 720px) {
  .home-light .hero-copy { padding-top: 56px; }
  .home-light .hero h1 { margin: 22px auto 16px; font-size: clamp(40px, 11vw, 56px); }
  .home-light .hero-copy > p { max-width: 420px; font-size: 15px; }
  .home-light .hero-actions { margin-top: 26px; }
  .home-light .hero-devices { margin-top: 32px; }
  .home-light .stats-band { margin-top: -36px; }
  .home-light .stats-grid div { padding: 20px; }
  .home-light .section, .home-light .proof-section { padding: 80px 0; }
  .home-light .features-section { padding-top: 64px; }
  .home-light .centered-heading { margin-bottom: 36px; }
  .home-light .feature-card { padding: 20px; }
  .home-light .feature-orb { width: 40px; height: 40px; margin-bottom: 14px; }
  .home-light .feature-card > a { margin-top: 12px; }
}
@media (max-width: 520px) {
  .home-light .feature-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MARK: Platform pages (checkout, pay, line, account, recover, trial, admin)
   app.css styles these with `:root:not([data-theme="dark"]) .page-frame ...`
   (and a dark base). `:root:not(#m)` lifts these rules above both, so one set
   of variables drives light and dark.
   ========================================================================== */
:root { --m-page: #f7f7f9; }
[data-theme="dark"] { --m-page: #0b0a10; }

:root:not(#m) body:not(.home-light),
:root:not(#m) .page-frame { background: var(--m-page); color: var(--m-ink); }
:root:not(#m) .page-frame .page-glow { display: none; }
:root:not(#m) .page-frame { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Header + footer */
:root:not(#m) .page-frame .site-nav { border-bottom-color: var(--m-border); }
:root:not(#m) .page-frame .brand { color: var(--m-ink); }
:root:not(#m) .page-frame .page-links a { color: var(--m-text); font-size: 14px; font-weight: 500; }
:root:not(#m) .page-frame .page-links a:hover,
:root:not(#m) .page-frame .page-links a:focus-visible { color: var(--m-ink); }
:root:not(#m) .page-frame .theme-toggle { border-color: var(--m-border-strong); background: var(--m-card); color: var(--m-ink); box-shadow: none; }
:root:not(#m) .page-frame .theme-toggle:hover { background: var(--m-tint); }
:root:not(#m) .page-frame .lang-menu summary { border-color: var(--m-border-strong); background: var(--m-card); color: var(--m-ink); box-shadow: none; }
:root:not(#m) .page-frame .lang-menu summary:hover,
:root:not(#m) .page-frame .lang-menu[open] summary { background: var(--m-tint); border-color: var(--m-muted); }
.brand-badge { background: var(--m-accent, #7c4ddb); box-shadow: none; }
:root:not(#m) .page-frame .page-footer { border-top-color: var(--m-border); color: var(--m-muted); font-size: 13px; letter-spacing: 0; }
:root:not(#m) .page-frame .page-footer a { color: var(--m-text); }
:root:not(#m) .page-frame .page-main { padding: 56px 0 96px; gap: 16px; }

/* Panels: white card, thin border, one soft shadow */
:root:not(#m) .page-frame .panel {
  padding: 40px;
  border: 1px solid var(--m-border);
  border-radius: 20px;
  background: var(--m-card);
  box-shadow: var(--m-shadow);
}
:root:not(#m) .page-frame .panel.narrow { max-width: 560px; }
:root:not(#m) .page-frame .panel .eyebrow {
  gap: 0;
  color: var(--m-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
}
:root:not(#m) .page-frame .eyebrow-line { display: none; }
:root:not(#m) .page-frame .panel h1 {
  margin: 10px 0 10px;
  color: var(--m-ink);
  font: 600 clamp(30px, 3.6vw, 40px)/1.1 var(--sans);
  letter-spacing: -.035em;
}
:root:not(#m) .page-frame .panel h2 { color: var(--m-ink); font-family: var(--sans); font-weight: 600; letter-spacing: -.025em; }
:root:not(#m) .page-frame .panel h1 span,
:root:not(#m) .page-frame .panel h2 span {
  color: var(--m-muted);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
:root:not(#m) .page-frame .lede { margin-bottom: 24px; color: var(--m-text); font-size: 15px; line-height: 1.65; }
:root:not(#m) .page-frame .lede strong,
:root:not(#m) .page-frame .howto strong { color: var(--m-ink); font-weight: 600; }
:root:not(#m) .page-frame .howto { color: var(--m-text); font-size: 15px; }
:root:not(#m) .page-frame .fine-print { color: var(--m-muted); font-size: 13px; }
:root:not(#m) .page-frame .text-link { color: var(--m-accent); font-weight: 600; }
:root:not(#m) .page-frame .sub-title { font-size: 18px !important; }

/* Outline buttons on cards */
:root:not(#m) .page-frame .button-quiet {
  background: var(--m-card) !important;
  border-color: var(--m-border-strong) !important;
  color: var(--m-ink) !important;
}
:root:not(#m) .page-frame .button-quiet:hover { background: var(--m-tint) !important; border-color: var(--m-muted) !important; }
:root:not(#m) .page-frame .flow-form > .button,
:root:not(#m) .page-frame .pay-option .button,
:root:not(#m) .page-frame .back-btn { border-radius: 10px; }

/* Steps: a quiet stepper, not pills */
:root:not(#m) .page-frame .steps { gap: 6px 22px; }
:root:not(#m) .page-frame .steps li { padding: 0; background: none; box-shadow: none; color: var(--m-muted); font-size: 13px; font-weight: 500; }
:root:not(#m) .page-frame .steps li span { width: 24px; height: 24px; border: 1px solid var(--m-border-strong); background: var(--m-card); color: var(--m-muted); font-size: 12px; font-weight: 600; }
:root:not(#m) .page-frame .steps li.done { color: var(--m-text); }
:root:not(#m) .page-frame .steps li.done span { border-color: transparent; background: var(--m-soft); color: var(--m-accent); }
:root:not(#m) .page-frame .steps li.current { background: none; box-shadow: none; color: var(--m-ink); font-weight: 600; }
:root:not(#m) .page-frame .steps li.current span { border-color: var(--m-accent); background: var(--m-accent); color: #fff; }

/* Forms */
:root:not(#m) .page-frame .field > label,
:root:not(#m) .page-frame .field > legend { color: var(--m-ink); font-size: 14px; font-weight: 500; }
:root:not(#m) .page-frame .hint { color: var(--m-muted); font-size: 13px; }
:root:not(#m) .page-frame .flow-form input:not([type=radio]):not([type=checkbox]),
:root:not(#m) .page-frame .flow-form select,
:root:not(#m) .page-frame .flow-form textarea {
  min-height: 46px;
  border: 1px solid var(--m-border-strong);
  border-radius: 10px;
  background: var(--m-card);
  color: var(--m-ink);
  font-size: 15px;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
:root:not(#m) .page-frame .flow-form input::placeholder { color: var(--m-muted); }
:root:not(#m) .page-frame .flow-form input:focus-visible,
:root:not(#m) .page-frame .flow-form select:focus-visible,
:root:not(#m) .page-frame .flow-form textarea:focus-visible {
  outline: none;
  border-color: var(--m-accent);
  box-shadow: 0 0 0 3px var(--m-soft);
}
:root:not(#m) .page-frame .check { color: var(--m-text); font-size: 14px; }

/* Choice tiles (format, renew length) and device pickers */
:root:not(#m) .page-frame .tile > span,
:root:not(#m) .page-frame .pick-device > span {
  padding: 16px;
  border-radius: 12px;
  background: var(--m-card);
  box-shadow: inset 0 0 0 1px var(--m-border-strong);
}
:root:not(#m) .page-frame .tile:hover > span,
:root:not(#m) .page-frame .pick-device:hover > span { background: var(--m-tint); }
:root:not(#m) .page-frame .tile input:checked + span,
:root:not(#m) .page-frame .pick-device input:checked + span {
  background: var(--m-card);
  box-shadow: inset 0 0 0 2px var(--m-accent);
}
:root:not(#m) .page-frame .tile b,
:root:not(#m) .page-frame .pick-device b { color: var(--m-ink); font-family: var(--sans); font-weight: 600; letter-spacing: -.01em; }
:root:not(#m) .page-frame .tile small,
:root:not(#m) .page-frame .pick-device small { color: var(--m-muted); font-size: 13px; }
:root:not(#m) .page-frame .tile strong { color: var(--m-ink); font-family: var(--sans); font-weight: 600; letter-spacing: -.02em; }
:root:not(#m) .page-frame .tile strong em { color: var(--m-muted); }
:root:not(#m) .page-frame .pick-check { box-shadow: inset 0 0 0 1.5px var(--m-border-strong); }
:root:not(#m) .page-frame .pick-device input:checked + span .pick-check { background: var(--m-accent); box-shadow: none; }
:root:not(#m) .page-frame .pick-device b em { background: var(--m-soft); color: var(--m-accent); white-space: nowrap; }
:root:not(#m) .page-frame .pick-all,
:root:not(#m) .page-frame .code-actions button.text-link { color: var(--m-accent); }
:root:not(#m) .page-frame .scope-hint { color: var(--m-text); }
:root:not(#m) .page-frame .scope-hint strong { color: var(--m-ink); }

/* Chosen plan + order summary */
:root:not(#m) .page-frame .chosen-plan,
:root:not(#m) .page-frame .summary {
  border-radius: 14px;
  background: var(--m-tint);
  box-shadow: inset 0 0 0 1px var(--m-border);
}
:root:not(#m) .page-frame .chosen-plan-label,
:root:not(#m) .page-frame .summary .summary-head dt { color: var(--m-muted); letter-spacing: .06em; }
:root:not(#m) .page-frame .chosen-plan-main strong,
:root:not(#m) .page-frame .chosen-plan-price strong { color: var(--m-ink); font-family: var(--sans); font-weight: 600; letter-spacing: -.02em; }
:root:not(#m) .page-frame .chosen-plan-main small,
:root:not(#m) .page-frame .chosen-plan-price small { color: var(--m-muted); }
:root:not(#m) .page-frame .chosen-plan-change { border-radius: 8px; background: var(--m-card); color: var(--m-ink); box-shadow: inset 0 0 0 1px var(--m-border-strong); }
:root:not(#m) .page-frame .chosen-plan-change:hover { background: var(--m-bg); }
:root:not(#m) .page-frame .summary div { border-bottom-color: var(--m-border); font-size: 14px; }
:root:not(#m) .page-frame .summary dt { color: var(--m-muted); }
:root:not(#m) .page-frame .summary dd,
:root:not(#m) .page-frame .summary .summary-total dd { color: var(--m-ink); }
:root:not(#m) .page-frame .summary .summary-total dd { font-family: var(--sans); font-weight: 600; letter-spacing: -.02em; }

/* Payment methods: same card, a small accent per method */
:root:not(#m) .page-frame .pay-option,
:root:not(#m) .page-frame .pay-card,
:root:not(#m) .page-frame .pay-crypto {
  border-radius: 14px;
  background: var(--m-card);
  box-shadow: inset 0 0 0 1px var(--m-border-strong);
  transform: none;
}
:root:not(#m) .page-frame .pay-option:hover { box-shadow: inset 0 0 0 1px var(--m-muted); transform: none; }
:root:not(#m) .page-frame .pay-icon { border-radius: 10px; background: var(--m-soft); color: var(--m-accent); box-shadow: none; }
:root:not(#m) .page-frame .pay-crypto .pay-icon { background: rgba(247, 147, 26, .12); color: #c26a05; }
[data-theme="dark"] .page-frame .pay-crypto .pay-icon { color: #ffc46b !important; }
:root:not(#m) .page-frame .pay-copy b { color: var(--m-ink); font-family: var(--sans); font-weight: 600; }
:root:not(#m) .page-frame .pay-copy small,
:root:not(#m) .page-frame .pay-secure { color: var(--m-muted); }
:root:not(#m) .page-frame .pay-secure svg { color: var(--m-accent); }
:root:not(#m) .page-frame .pay-card .pay-badge { background: var(--m-soft); color: var(--m-accent); }
:root:not(#m) .page-frame .spinner { border-color: var(--m-border); border-top-color: var(--m-accent); }

/* Notices */
:root:not(#m) .page-frame .notice { border-radius: 10px; font-size: 14px; }

/* Line page */
:root:not(#m) .page-frame .device-tabs {
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--m-border);
  border-radius: 14px;
  background: var(--m-card);
  box-shadow: none;
}
:root:not(#m) .page-frame .device-tab { border-radius: 10px; color: var(--m-text); box-shadow: none; }
:root:not(#m) .page-frame .device-tab:hover { background: var(--m-tint); color: var(--m-ink); }
:root:not(#m) .page-frame .device-tab.is-active { background: var(--m-ink); color: var(--m-bg); box-shadow: none; }
:root:not(#m) .page-frame .device-tab-copy b { font-family: var(--sans); font-weight: 600; }
:root:not(#m) .page-frame .device-tab.is-active .device-dot { box-shadow: none; }
:root:not(#m) .page-frame .dot-live,
:root:not(#m) .page-frame .dot-dead { box-shadow: none; }
:root:not(#m) .page-frame .device-tab-add { border: 1px dashed var(--m-border-strong); color: var(--m-accent); }
:root:not(#m) .page-frame .device-tab-add > span[aria-hidden] { background: var(--m-soft); color: var(--m-accent); }

:root:not(#m) .page-frame .line-status { color: var(--m-text); }
:root:not(#m) .page-frame .line-status b { color: var(--m-ink); }
:root:not(#m) .page-frame .pill { padding: 4px 10px; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
:root:not(#m) .page-frame .creds { gap: 8px; }
:root:not(#m) .page-frame .creds div {
  padding: 12px 12px 12px 16px;
  border-radius: 12px;
  background: var(--m-tint);
  box-shadow: inset 0 0 0 1px var(--m-border);
}
:root:not(#m) .page-frame .creds dt { color: var(--m-muted); font-size: 13px; font-weight: 500; }
:root:not(#m) .page-frame .creds code { color: var(--m-ink); font-size: 14px; }
:root:not(#m) .page-frame .copy-btn {
  border: 1px solid var(--m-border-strong);
  border-radius: 8px;
  background: var(--m-card);
  color: var(--m-ink);
  box-shadow: none;
}
:root:not(#m) .page-frame .copy-btn:hover { background: var(--m-bg); border-color: var(--m-muted); }

:root:not(#m) .page-frame .add-device-card {
  border: 1px solid var(--m-border);
  border-radius: 20px;
  background: var(--m-card);
  box-shadow: var(--m-shadow);
}
:root:not(#m) .page-frame .add-device-icon { border-radius: 12px; background: var(--m-soft); color: var(--m-accent); }
:root:not(#m) .page-frame .add-device-copy h2 { color: var(--m-ink); font-family: var(--sans); font-weight: 600; letter-spacing: -.02em; }
:root:not(#m) .page-frame .add-device-copy p { color: var(--m-text); }
:root:not(#m) .page-frame .support-facts li { border-radius: 10px; background: var(--m-tint); box-shadow: inset 0 0 0 1px var(--m-border); }
:root:not(#m) .page-frame .support-facts span { color: var(--m-muted); }
:root:not(#m) .page-frame .support-facts b { color: var(--m-ink); }
:root:not(#m) .page-frame .back-link { color: var(--m-text); }
:root:not(#m) .page-frame .back-link:hover { color: var(--m-ink); }
#renew:target { animation: none; }

/* My lines: subscription cards */
:root:not(#m) .page-frame .sub-card,
:root:not(#m) .page-frame .line-card {
  border-radius: 14px;
  background: var(--m-card);
  box-shadow: inset 0 0 0 1px var(--m-border-strong);
}
:root:not(#m) .page-frame .line-card { color: var(--m-text); }
:root:not(#m) .page-frame .line-card b,
:root:not(#m) .page-frame .sub-devices b { color: var(--m-ink); }
:root:not(#m) .page-frame .line-card:hover { background: var(--m-tint); }
:root:not(#m) .page-frame .sub-card-head small,
:root:not(#m) .page-frame .sub-devices small { color: var(--m-muted); }
:root:not(#m) .page-frame .sub-devices a { border-radius: 10px; background: var(--m-tint); color: var(--m-text); font-size: 14px; }
:root:not(#m) .page-frame .sub-devices a:hover { background: var(--m-soft); }

/* Admin: shared surfaces only */
:root:not(#m) .page-frame .stat,
:root:not(#m) .page-frame .admin-card,
:root:not(#m) .page-frame .table-wrap { background: var(--m-card); box-shadow: inset 0 0 0 1px var(--m-border); }
:root:not(#m) .page-frame .admin-bar h1,
:root:not(#m) .page-frame .admin-card h2,
:root:not(#m) .page-frame .stat strong { color: var(--m-ink); font-family: var(--sans); }
:root:not(#m) .page-frame .admin-tabs a { color: var(--m-text); font-size: 13px; }
:root:not(#m) .page-frame .admin-tabs a[aria-current=page] { background: var(--m-ink); color: var(--m-bg); box-shadow: none; }
:root:not(#m) .page-frame .admin-table th { background: var(--m-tint); color: var(--m-muted); border-bottom-color: var(--m-border); }
:root:not(#m) .page-frame .admin-table td { color: var(--m-ink); border-bottom-color: var(--m-border); }
:root:not(#m) .page-frame .admin-table tr:hover td { background: var(--m-tint); }

/* Floating corner buttons: flat */
.float-trial,
.float-note-icon { background: #7c4ddb; box-shadow: 0 6px 20px rgba(15, 13, 22, .18); }

@media (max-width: 720px) {
  :root:not(#m) .page-frame .page-main { padding: 32px 0 72px; }
  :root:not(#m) .page-frame .panel { padding: 24px 20px; border-radius: 16px; }
  :root:not(#m) .page-frame .panel h1 { font-size: clamp(28px, 8vw, 34px); }
  :root:not(#m) .page-frame .steps { gap: 6px 14px; }
  :root:not(#m) .page-frame .add-device-card { padding: 20px; }
}
/* ==========================================================================
   MARK: Guide pages (/pricing, /what-is-iptv) - layout() + .guide-page
   Reuses .guide-layout / .guide-toc / .guide-article / .guide-part from the home guide.
   ========================================================================== */
.guide-page { display: grid; gap: 72px; min-width: 0; }
.guide-hero { max-width: 760px; margin: 24px auto 0; text-align: center; }
:root:not(#m) .page-frame .guide-page .eyebrow { justify-content: center; color: var(--m-accent); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
:root:not(#m) .page-frame .guide-hero h1 { margin: 16px 0 18px; color: var(--m-ink); font: 600 clamp(36px, 5.4vw, 60px)/1.05 var(--sans); letter-spacing: -.045em; }
:root:not(#m) .page-frame .guide-page h1 span,
:root:not(#m) .page-frame .guide-page h2 span { color: var(--m-muted); background: none; -webkit-background-clip: border-box; background-clip: border-box; }
.guide-hero > p { max-width: 620px; margin: 0 auto; color: var(--m-text); font-size: 17px; line-height: 1.65; }
.guide-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
:root:not(#m) .page-frame .guide-page h2 { margin: 0 0 12px; color: var(--m-ink); font: 600 clamp(28px, 3.4vw, 42px)/1.1 var(--sans); letter-spacing: -.035em; }
/* Plans block on /pricing: same cards as the home page */
.guide-page .add-pricing { margin: 0; }
/* Price tables */
.guide-prices > p { margin: 0 0 22px; color: var(--m-text); font-size: 16px; }
.guide-table-wrap { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--m-border); border-radius: 16px; background: var(--m-card); }
.guide-table { width: 100%; min-width: 520px; border-collapse: collapse; color: var(--m-text); font-size: 15px; }
.guide-table caption { padding: 16px 20px 6px; color: var(--m-muted); font-size: 13px; font-weight: 600; text-align: left; caption-side: top; }
.guide-table th, .guide-table td { padding: 14px 20px; border-bottom: 1px solid var(--m-border); text-align: left; vertical-align: top; }
.guide-table thead th { color: var(--m-muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.guide-table thead th small { margin-left: 4px; padding: 2px 6px; border-radius: 999px; background: var(--m-soft); color: var(--m-accent); font-size: 11px; }
.guide-table tbody th { color: var(--m-ink); font-weight: 600; }
.guide-table tbody th small { display: block; margin-top: 2px; color: var(--m-muted); font-size: 12px; font-weight: 400; }
.guide-table td.is-featured { color: var(--m-ink); font-weight: 600; background: var(--m-soft); }
.guide-table tbody tr:last-child th, .guide-table tbody tr:last-child td { border-bottom: 0; }
.guide-article .guide-table-wrap { margin: 4px 0 18px; }
.guide-article a { color: var(--m-accent); text-decoration: underline; text-underline-offset: 3px; }
/* FAQ, closing band and related links */
.guide-faq { max-width: 820px; width: 100%; margin: 0 auto; }
.guide-faq .faq-list { margin-top: 20px; }
.guide-close { padding: 48px 32px; border-radius: 20px; background: var(--m-tint); border: 1px solid var(--m-border); text-align: center; }
.guide-close > p { max-width: 560px; margin: 0 auto; color: var(--m-text); font-size: 16px; line-height: 1.6; }
.guide-related { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: -32px; }
.guide-related a { padding: 10px 16px; border: 1px solid var(--m-border); border-radius: 999px; background: var(--m-card); color: var(--m-ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.guide-related a:hover { border-color: var(--m-border-strong); background: var(--m-tint); }
@media (max-width: 720px) {
  .guide-page { gap: 52px; }
  .guide-hero { margin-top: 8px; }
  .guide-hero > p { font-size: 16px; }
  .guide-close { padding: 36px 20px; }
  .guide-related { margin-top: -20px; }
}