/*
 * site.css - the Revsfr IPTV look for the server pages (checkout, payment,
 * line, My lines, free trial, admin). Loaded last, after styles.css / app.css,
 * and matches the React home (client/src/pages/LandingHome.tsx, .lp): white
 * and pale-green (#ecfdf5) sections, deep green headings (#064e3b), emerald
 * accents (#059669 / #35E28C), white cards with a soft green border, pill
 * buttons with the green gradient. Geist for all text (same as the React site).
 *
 * Selectors start with `:root:not([data-theme="dark"]) body .page-frame` so
 * they win over app.css's light theme rules without !important.
 */
:root {
  --ink: #0f1f14;
  --ink2: #2b3d33;
  --muted: #4b6358;
  --faint: #87A99B;
  --line: #d6efe3;
  --bg: #ffffff;
  --green-900: #064e3b;
  --green-800: #065f46;
  --green-600: #059669;
  --green-500: #10b981;
  --green-400: #34d399;
  --green-50: #ecfdf5;
  --signal: #35E28C;
  --violet: var(--green-600);
  --grad: linear-gradient(96deg, var(--green-600) 0%, var(--green-500) 55%, var(--green-400) 100%);
  --btn-grad: linear-gradient(135deg, var(--green-900), var(--green-600));
  --card-shadow: 0 12px 32px -22px rgba(6,78,59,.18);
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* MARK: Page */
:root:not([data-theme="dark"]):has(body:not(.home-light)),
:root:not([data-theme="dark"]) body,
:root:not([data-theme="dark"]) body:not(.home-light) { background: var(--bg); }
body, button, input, select, textarea { font-family: var(--sans); -webkit-font-smoothing: antialiased; }
:root:not([data-theme="dark"]) body .page-frame {
  color: var(--ink);
  background:
    radial-gradient(ellipse 45% 38% at 0% 0%, rgba(52,211,153,.20), transparent 72%),
    radial-gradient(ellipse 40% 42% at 100% 0%, rgba(5,150,105,.22), transparent 72%),
    radial-gradient(ellipse 35% 30% at 85% 100%, rgba(16,185,129,.12), transparent 75%),
    var(--bg);
}

/* MARK: Header and footer */
:root:not([data-theme="dark"]) body .page-frame .site-nav { border-bottom-color: var(--line); }
.brand { color: var(--green-900); text-decoration: none; }
/* The REV<b>SFR</b> wordmark, as on the home page (.logo-text) */
.logo-text { display: inline-block; font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1; letter-spacing: -.03em; color: var(--green-900); white-space: nowrap; }
.logo-text b { font-weight: 700; color: var(--green-600); }
:root:not([data-theme="dark"]) body .page-frame .page-links a { color: var(--ink2); font-size: 13px; font-weight: 500; }
:root:not([data-theme="dark"]) body .page-frame .page-links a:hover,
:root:not([data-theme="dark"]) body .page-frame .page-links a:focus-visible { color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .page-footer { border-top-color: var(--line); color: var(--muted); }
:root:not([data-theme="dark"]) body .page-frame .page-footer a { color: var(--ink); }
.lang-menu summary { border-color: var(--line) !important; background: #fff !important; color: var(--ink) !important; box-shadow: var(--card-shadow) !important; }
.lang-menu ul { border-color: var(--line) !important; background: #fff !important; box-shadow: 0 18px 40px rgba(6,78,59,.12) !important; }
.lang-menu a { color: var(--ink2) !important; }
.lang-menu a:hover, .lang-menu a[aria-current] { background: #ecfdf5 !important; color: var(--ink) !important; }
.lang-banner { background: var(--ink) !important; color: #fff !important; }

/* MARK: Buttons - the home page's pill buttons (.btn) */
:root:not([data-theme="dark"]) body .page-frame .button,
:root:not([data-theme="dark"]) body .page-frame .site-nav .button-nav {
  min-height: 46px; gap: 8px; padding: 0 22px;
  border: 0; border-radius: 999px;
  font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0;
  transform: none; transition: background .2s, box-shadow .2s, color .2s;
}
:root:not([data-theme="dark"]) body .page-frame .button-primary,
:root:not([data-theme="dark"]) body .page-frame .site-nav .button-nav {
  background: var(--ink); color: #fff; box-shadow: 0 6px 18px rgba(6,78,59,.12);
}
:root:not([data-theme="dark"]) body .page-frame .button-primary:hover,
:root:not([data-theme="dark"]) body .page-frame .site-nav .button-nav:hover { background: #065f46; box-shadow: 0 10px 24px rgba(6,78,59,.16); transform: none; }
:root:not([data-theme="dark"]) body .page-frame .site-nav .button-nav { min-height: 38px; padding: 0 16px; font-size: 13px; }
:root:not([data-theme="dark"]) body .page-frame .button-quiet,
:root:not([data-theme="dark"]) body .page-frame .button-outline {
  background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), var(--card-shadow);
}
:root:not([data-theme="dark"]) body .page-frame .button-quiet:hover,
:root:not([data-theme="dark"]) body .page-frame .button-outline:hover { background: #ecfdf5; transform: none; }
:root:not([data-theme="dark"]) body .page-frame .button:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
:root:not([data-theme="dark"]) body .page-frame .button[disabled] { opacity: .4; }
:root:not([data-theme="dark"]) body .page-frame .text-link,
:root:not([data-theme="dark"]) body .page-frame .mini-link,
:root:not([data-theme="dark"]) body .page-frame .back-link { color: var(--ink); font-weight: 600; }
:root:not([data-theme="dark"]) body .page-frame .back-link:hover { color: var(--ink2); }

/* Small buttons (copy, admin actions) */
:root:not([data-theme="dark"]) body .page-frame .mini-btn,
:root:not([data-theme="dark"]) body .page-frame .copy-btn {
  border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); box-shadow: none; font-weight: 600;
}
:root:not([data-theme="dark"]) body .page-frame .mini-btn:hover,
:root:not([data-theme="dark"]) body .page-frame .copy-btn:hover { background: #ecfdf5; }
:root:not([data-theme="dark"]) body .page-frame .mini-btn.danger { border-color: #f3c8c4; background: #fff6f5; color: #b4231a; }

/* MARK: Cards, headings, text */
:root:not([data-theme="dark"]) body .page-frame .panel {
  border-radius: 22px; background: radial-gradient(ellipse at 100% 0%, rgba(16,185,129,.16), transparent 42%), #fff;
  box-shadow: inset 0 0 0 1px var(--line), 0 24px 60px rgba(6,78,59,.06);
}
:root:not([data-theme="dark"]) body .page-frame .panel h1,
:root:not([data-theme="dark"]) body .page-frame .panel h2,
:root:not([data-theme="dark"]) body .page-frame .section-heading h2 { color: var(--ink); font-family: var(--sans); font-weight: 720; letter-spacing: -.045em; }
:root:not([data-theme="dark"]) body .page-frame .panel h1 span,
:root:not([data-theme="dark"]) body .page-frame .panel h2 span,
:root:not([data-theme="dark"]) body .page-frame .section-heading h2 span {
  color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text;
}
:root:not([data-theme="dark"]) body .page-frame .eyebrow,
:root:not([data-theme="dark"]) body .page-frame .panel .eyebrow,
:root:not([data-theme="dark"]) body .page-frame .chosen-plan-label,
:root:not([data-theme="dark"]) body .page-frame .summary .summary-head dt {
  color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .15em;
}
:root:not([data-theme="dark"]) body .page-frame .eyebrow-line { background: var(--grad); }
:root:not([data-theme="dark"]) body .page-frame .lede,
:root:not([data-theme="dark"]) body .page-frame .howto { color: var(--ink2); }
:root:not([data-theme="dark"]) body .page-frame .lede strong,
:root:not([data-theme="dark"]) body .page-frame .howto strong { color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .fine-print,
:root:not([data-theme="dark"]) body .page-frame .hint { color: var(--muted); }

/* MARK: Steps */
:root:not([data-theme="dark"]) body .page-frame .steps li { background: #fff; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) body .page-frame .steps li span { background: #ecfdf5; color: var(--ink2); }
:root:not([data-theme="dark"]) body .page-frame .steps li.done { color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .steps li.done span { background: #e7f8ee; color: #1f7a4c; }
:root:not([data-theme="dark"]) body .page-frame .steps li.current { color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink), var(--card-shadow); }
:root:not([data-theme="dark"]) body .page-frame .steps li.current span { background: var(--ink); color: #fff; }

/* MARK: Forms */
:root:not([data-theme="dark"]) body .page-frame .field > label,
:root:not([data-theme="dark"]) body .page-frame .field > legend { color: var(--ink); font-weight: 600; }
:root:not([data-theme="dark"]) body .page-frame .flow-form input:not([type=radio]):not([type=checkbox]),
:root:not([data-theme="dark"]) body .page-frame .flow-form select,
:root:not([data-theme="dark"]) body .page-frame .admin-form input,
:root:not([data-theme="dark"]) body .page-frame .admin-form select,
:root:not([data-theme="dark"]) body .page-frame .admin-search input,
:root:not([data-theme="dark"]) body .page-frame .mini-input {
  border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink);
}
:root:not([data-theme="dark"]) body .page-frame .flow-form input::placeholder { color: var(--faint); }
:root:not([data-theme="dark"]) body .page-frame .flow-form input:focus-visible,
:root:not([data-theme="dark"]) body .page-frame .flow-form select:focus-visible,
:root:not([data-theme="dark"]) body .page-frame .admin-form input:focus-visible,
:root:not([data-theme="dark"]) body .page-frame .admin-form select:focus-visible {
  outline: 2px solid rgba(5,150,105,.45); outline-offset: 1px; border-color: var(--violet);
}
:root:not([data-theme="dark"]) body .page-frame .check { color: var(--ink2); }

/* Choice tiles (format, payment method, devices) */
:root:not([data-theme="dark"]) body .page-frame .tile > span { border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) body .page-frame .tile:hover > span { background: #f6fdf9; box-shadow: inset 0 0 0 1px #bfe6d2; }
:root:not([data-theme="dark"]) body .page-frame .tile input:checked + span { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink), var(--card-shadow); }
:root:not([data-theme="dark"]) body .page-frame .tile b { color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .tile small { color: var(--muted); }
:root:not([data-theme="dark"]) body .page-frame .tile strong { color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .tile strong em,
:root:not([data-theme="dark"]) body .page-frame .tile em { color: var(--muted); }
:root:not([data-theme="dark"]) body .page-frame .pick-device > span { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) body .page-frame .pick-device input:checked + span { box-shadow: inset 0 0 0 1.5px var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .pick-device input:checked + span .pick-check { background: var(--ink); color: #fff; box-shadow: none; }

/* Notices */
:root:not([data-theme="dark"]) body .page-frame .notice-error { border-radius: 12px; background: #fff6f5; box-shadow: inset 0 0 0 1px #f3c8c4; color: #b4231a; }
:root:not([data-theme="dark"]) body .page-frame .notice-ok { border-radius: 12px; background: #f1fbf5; box-shadow: inset 0 0 0 1px #bfe8cf; color: #1f7a4c; }

/* MARK: Checkout and payment */
:root:not([data-theme="dark"]) body .page-frame .chosen-plan {
  border-radius: 16px; background: radial-gradient(ellipse at 0% 0%, rgba(52,211,153,.16), transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(5,150,105,.14), transparent 60%), #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}
:root:not([data-theme="dark"]) body .page-frame .chosen-plan-main strong,
:root:not([data-theme="dark"]) body .page-frame .chosen-plan-price strong { color: var(--ink); letter-spacing: -.02em; }
:root:not([data-theme="dark"]) body .page-frame .chosen-plan-main small,
:root:not([data-theme="dark"]) body .page-frame .chosen-plan-price small { color: var(--muted); }
:root:not([data-theme="dark"]) body .page-frame .chosen-plan-change { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) body .page-frame .chosen-plan-change:hover { background: #ecfdf5; }
:root:not([data-theme="dark"]) body .page-frame .summary { border-radius: 16px; background: #f6fdf9; box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) body .page-frame .summary div { border-bottom-color: var(--line); }
:root:not([data-theme="dark"]) body .page-frame .summary dt { color: var(--muted); }
:root:not([data-theme="dark"]) body .page-frame .summary dd,
:root:not([data-theme="dark"]) body .page-frame .summary .summary-total dd { color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .pay-option { border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--card-shadow); }
:root:not([data-theme="dark"]) body .page-frame .pay-option:hover { box-shadow: inset 0 0 0 1px #bfe6d2, 0 14px 30px rgba(6,78,59,.08); }
:root:not([data-theme="dark"]) body .page-frame .pay-icon { background: #ecfdf5; color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .pay-copy b { color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .pay-copy small,
:root:not([data-theme="dark"]) body .page-frame .pay-secure { color: var(--muted); }
:root:not([data-theme="dark"]) body .page-frame .pay-secure svg { color: #1f7a4c; }
:root:not([data-theme="dark"]) body .page-frame .spinner { border-color: var(--line); border-top-color: var(--ink); }

/* MARK: Line page, credentials, account */
:root:not([data-theme="dark"]) body .page-frame .line-status { color: var(--ink2); }
:root:not([data-theme="dark"]) body .page-frame .line-status b { color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .pill-live { background: #e7f8ee; color: #1f7a4c; }
:root:not([data-theme="dark"]) body .page-frame .pill-dead { background: #fff0ee; color: #b4231a; }
:root:not([data-theme="dark"]) body .page-frame .pill-ready { background: #ecfdf5; color: #047857; }
:root:not([data-theme="dark"]) body .page-frame .creds div { border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) body .page-frame .creds dt { color: var(--muted); }
:root:not([data-theme="dark"]) body .page-frame .creds code { color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame code.mini { color: var(--ink2); }
:root:not([data-theme="dark"]) body .page-frame .line-card,
:root:not([data-theme="dark"]) body .page-frame .sub-card,
:root:not([data-theme="dark"]) body .page-frame .sub-devices a { background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink2); }
:root:not([data-theme="dark"]) body .page-frame .line-card b,
:root:not([data-theme="dark"]) body .page-frame .sub-devices b { color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .line-card:hover,
:root:not([data-theme="dark"]) body .page-frame .sub-devices a:hover { background: #f6fdf9; }
:root:not([data-theme="dark"]) body .page-frame .device-tabs { background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--card-shadow); }
:root:not([data-theme="dark"]) body .page-frame .device-tab { color: var(--ink2); }
:root:not([data-theme="dark"]) body .page-frame .device-tab:hover { background: #ecfdf5; color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .device-tab.is-active { background: var(--ink); color: #fff; box-shadow: none; }
:root:not([data-theme="dark"]) body .page-frame .device-tab-add { border-color: var(--line); color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .add-device-card,
:root:not([data-theme="dark"]) body .page-frame .support-card,
:root:not([data-theme="dark"]) body .page-frame .renew-widget {
  background: radial-gradient(ellipse at 100% 0%, rgba(5,150,105,.12), transparent 55%), #fff; box-shadow: inset 0 0 0 1px var(--line);
}

/* MARK: Admin */
:root:not([data-theme="dark"]) body .page-frame .admin-bar h1 { color: var(--ink); font-weight: 720; letter-spacing: -.04em; }
:root:not([data-theme="dark"]) body .page-frame .admin-tabs a { color: var(--ink2); }
:root:not([data-theme="dark"]) body .page-frame .admin-tabs a:hover { background: #ecfdf5; color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .admin-tabs a[aria-current=page] { background: var(--ink); color: #fff; box-shadow: none; }
:root:not([data-theme="dark"]) body .page-frame .stat,
:root:not([data-theme="dark"]) body .page-frame .admin-card { border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--card-shadow); }
:root:not([data-theme="dark"]) body .page-frame .stat span,
:root:not([data-theme="dark"]) body .page-frame .stat small { color: var(--muted); }
:root:not([data-theme="dark"]) body .page-frame .stat strong,
:root:not([data-theme="dark"]) body .page-frame .admin-card h2 { color: var(--ink); font-family: var(--sans); letter-spacing: -.02em; }
:root:not([data-theme="dark"]) body .page-frame .admin-form label,
:root:not([data-theme="dark"]) body .page-frame .checks { color: var(--ink2); }
:root:not([data-theme="dark"]) body .page-frame .table-wrap { border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) body .page-frame .admin-table th { background: #f6fdf9; color: var(--muted); border-bottom-color: var(--line); }
:root:not([data-theme="dark"]) body .page-frame .admin-table td { color: var(--ink); border-bottom-color: #e6f5ed; }
:root:not([data-theme="dark"]) body .page-frame .admin-table tr:hover td { background: #f6fdf9; }

/* MARK: Plan cards (add-device page) */
.pricing-page .price-card { border-radius: 20px !important; background: #fff !important; box-shadow: var(--card-shadow) !important; }
.pricing-page .price-card.is-popular, .pricing-page .plan-card.is-popular { box-shadow: inset 0 0 0 1.5px var(--violet), 0 18px 40px rgba(5,150,105,.18) !important; }
.pricing-page .price-card h3, .pricing-page .price strong { color: var(--ink) !important; font-family: var(--sans) !important; }
.pricing-page .popular-badge { background: #ecfdf5 !important; color: #047857 !important; box-shadow: none !important; }
.pricing-page .plan-overline { color: var(--muted) !important; }
.pricing-page .price-card .button-outline { background: #fff !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--line) !important; }
.pricing-page .price-card .price-cta, .pricing-page .plan-card.is-popular > .button { background: var(--ink) !important; color: #fff !important; }
.pricing-page .billing-control { background: #fff !important; box-shadow: inset 0 0 0 1px var(--line) !important; }
.pricing-page .billing-option.is-selected { background: var(--ink) !important; color: #fff !important; box-shadow: none !important; }
.pricing-page .plan-features li::before { color: #1f7a4c !important; }

/* Arabic keeps its own font */
[dir="rtl"] body, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea { font-family: 'IBM Plex Sans Arabic', var(--sans); }
[dir="rtl"] .logo-text { font-family: var(--display); }

/* MARK: Line page details */
:root:not([data-theme="dark"]) body .page-frame .add-device-card { border: 1.5px dashed #bfe6d2; background: radial-gradient(ellipse at 0% 50%, rgba(52,211,153,.12), transparent 60%), #fff; }
:root:not([data-theme="dark"]) body .page-frame .add-device-icon { background: #ecfdf5; color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .pick-device b em { background: #ecfdf5; color: var(--ink2); }
:root:not([data-theme="dark"]) body .page-frame .pick-all { color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .pick-device input:checked + span { background: #fff; }
:root:not([data-theme="dark"]) body .page-frame .support-facts div,
:root:not([data-theme="dark"]) body .page-frame .fmt-facts div { background: #f6fdf9; box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) body .page-frame .code-actions button.text-link { color: var(--ink); }

/* MARK: Remaining accents */
:root:not([data-theme="dark"]) body .page-frame .device-tab-add { border-color: #bfe6d2; color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .device-tab-add > span[aria-hidden] { background: #ecfdf5; }
:root:not([data-theme="dark"]) body .page-frame .admin-form textarea { border-color: var(--line); }
:root:not([data-theme="dark"]) body .page-frame .admin-add summary { background: #ecfdf5; color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .admin-add .admin-form,
:root:not([data-theme="dark"]) body .page-frame .account-form .mode-section,
:root:not([data-theme="dark"]) body .page-frame .unlimited-list li,
:root:not([data-theme="dark"]) body .page-frame .pay-detail div,
:root:not([data-theme="dark"]) body .page-frame .support-facts li { background: #f6fdf9; box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) body .page-frame .support-facts span { color: var(--muted); }
:root:not([data-theme="dark"]) body .page-frame .support-facts b { color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .mac-input > span,
:root:not([data-theme="dark"]) body .page-frame .manual-group legend { color: var(--ink2); }
:root:not([data-theme="dark"]) body .page-frame .mode-card { background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--card-shadow); }
:root:not([data-theme="dark"]) body .page-frame .mode-auto { background: #ecfdf5; color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .manual-group { border-color: var(--line); }
:root:not([data-theme="dark"]) body .page-frame .lang-menu li a b { color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .coin-pick select { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) body .page-frame .pick-check { box-shadow: inset 0 0 0 1.5px #a7d9c0; }
:root:not([data-theme="dark"]) body .page-frame .pick-device input:checked + span { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink), var(--card-shadow); }
:root:not([data-theme="dark"]) body .page-frame .sub-devices a { background: #f6fdf9; color: var(--ink2); }
:root:not([data-theme="dark"]) body .page-frame .sub-devices a:hover { background: #ecfdf5; }
:root:not([data-theme="dark"]) body .page-frame .pay-card { background: radial-gradient(ellipse at 100% 0%, rgba(5,150,105,.14), transparent 60%), #fff; box-shadow: inset 0 0 0 1px var(--line), var(--card-shadow); }
:root:not([data-theme="dark"]) body .page-frame .pay-card .pay-icon { background: var(--ink); color: #fff; }
:root:not([data-theme="dark"]) body .page-frame .pay-badge { background: #ecfdf5; color: var(--ink2); }
:root:not([data-theme="dark"]) body .page-frame .pay-anim-glow { background: radial-gradient(closest-side, rgba(53,226,140,.25), transparent); }
:root:not([data-theme="dark"]) body .page-frame .trial-cta,
:root:not([data-theme="dark"]) body .page-frame .upsell { border-color: #bfe6d2; }

/* MARK: Revsfr identity
 * Same specificity as the rules above and later in the file, so these win:
 * green gradient pill buttons, Space Grotesk headings in deep green, mono
 * labels in emerald, green selection states. */
:root:not([data-theme="dark"]) body .page-frame {
  background:
    radial-gradient(ellipse 50% 34% at 0% 0%, rgba(52,211,153,.16), transparent 72%),
    radial-gradient(ellipse 45% 38% at 100% 0%, rgba(5,150,105,.12), transparent 72%),
    linear-gradient(180deg, #fff 0%, #fff 55%, var(--green-50) 100%);
}
:root:not([data-theme="dark"]) body .page-frame .button-primary,
:root:not([data-theme="dark"]) body .page-frame .site-nav .button-nav {
  background: var(--btn-grad); color: #fff; box-shadow: 0 10px 24px -12px rgba(5,150,105,.55);
}
:root:not([data-theme="dark"]) body .page-frame .button-primary:hover,
:root:not([data-theme="dark"]) body .page-frame .site-nav .button-nav:hover {
  background: var(--btn-grad); box-shadow: 0 14px 30px -12px rgba(5,150,105,.7); transform: translateY(-1px);
}
:root:not([data-theme="dark"]) body .page-frame .button-quiet,
:root:not([data-theme="dark"]) body .page-frame .button-outline {
  background: #fff; color: var(--green-900); box-shadow: inset 0 0 0 1.5px rgba(5,150,105,.35);
}
:root:not([data-theme="dark"]) body .page-frame .button-quiet:hover,
:root:not([data-theme="dark"]) body .page-frame .button-outline:hover { background: var(--green-50); }
:root:not([data-theme="dark"]) body .page-frame .button:focus-visible { outline: 2px solid var(--green-400); outline-offset: 3px; }

:root:not([data-theme="dark"]) body .page-frame .panel {
  border-radius: 18px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(5,150,105,.14), 0 20px 50px -24px rgba(6,78,59,.25);
}
:root:not([data-theme="dark"]) body .page-frame .panel h1,
:root:not([data-theme="dark"]) body .page-frame .panel h2,
:root:not([data-theme="dark"]) body .page-frame .section-heading h2,
:root:not([data-theme="dark"]) body .page-frame .admin-bar h1 {
  color: var(--green-900); font-family: var(--display); font-weight: 700; letter-spacing: -.02em;
}
:root:not([data-theme="dark"]) body .page-frame .panel h1 span,
:root:not([data-theme="dark"]) body .page-frame .panel h2 span,
:root:not([data-theme="dark"]) body .page-frame .section-heading h2 span { color: var(--green-600); background: none; -webkit-background-clip: border-box; background-clip: border-box; }
:root:not([data-theme="dark"]) body .page-frame .eyebrow,
:root:not([data-theme="dark"]) body .page-frame .panel .eyebrow,
:root:not([data-theme="dark"]) body .page-frame .chosen-plan-label,
:root:not([data-theme="dark"]) body .page-frame .summary .summary-head dt {
  color: var(--green-600); font-family: var(--mono); font-weight: 500; letter-spacing: .14em;
}
:root:not([data-theme="dark"]) body .page-frame .eyebrow-line { background: var(--green-600); }

:root:not([data-theme="dark"]) body .page-frame .steps li.current { box-shadow: inset 0 0 0 1.5px var(--green-600), var(--card-shadow); }
:root:not([data-theme="dark"]) body .page-frame .steps li.current span { background: var(--btn-grad); color: #fff; }
:root:not([data-theme="dark"]) body .page-frame .tile input:checked + span { box-shadow: inset 0 0 0 1.5px var(--green-600), 0 10px 24px -16px rgba(5,150,105,.5); background: #fff; }
:root:not([data-theme="dark"]) body .page-frame .pick-device input:checked + span { box-shadow: inset 0 0 0 1.5px var(--green-600), var(--card-shadow); }
:root:not([data-theme="dark"]) body .page-frame .pick-device input:checked + span .pick-check { background: var(--green-600); color: #fff; }
:root:not([data-theme="dark"]) body .page-frame .device-tab.is-active,
:root:not([data-theme="dark"]) body .page-frame .admin-tabs a[aria-current=page] { background: var(--btn-grad); color: #fff; }
:root:not([data-theme="dark"]) body .page-frame .flow-form input:focus-visible,
:root:not([data-theme="dark"]) body .page-frame .flow-form select:focus-visible,
:root:not([data-theme="dark"]) body .page-frame .admin-form input:focus-visible,
:root:not([data-theme="dark"]) body .page-frame .admin-form select:focus-visible { outline: 2px solid rgba(52,211,153,.5); border-color: var(--green-600); }
:root:not([data-theme="dark"]) body .page-frame .spinner { border-top-color: var(--green-600); }
:root:not([data-theme="dark"]) body .page-frame .pay-card .pay-icon { background: var(--btn-grad); }
:root:not([data-theme="dark"]) body .page-frame .chosen-plan { background: linear-gradient(135deg, var(--green-50), #fff 70%); box-shadow: inset 0 0 0 1px rgba(5,150,105,.18); }
:root:not([data-theme="dark"]) body .page-frame .text-link,
:root:not([data-theme="dark"]) body .page-frame .mini-link,
:root:not([data-theme="dark"]) body .page-frame .back-link { color: var(--green-800); }
:root:not([data-theme="dark"]) body .page-frame .page-links a:hover,
:root:not([data-theme="dark"]) body .page-frame .page-links a:focus-visible { color: var(--green-600); }
.pricing-page .price-card.is-popular, .pricing-page .plan-card.is-popular { box-shadow: inset 0 0 0 1.5px var(--green-600), 0 18px 40px -18px rgba(5,150,105,.35) !important; }
.pricing-page .price-card h3, .pricing-page .price strong { color: var(--green-900) !important; font-family: var(--display) !important; }
.pricing-page .price-card .price-cta, .pricing-page .plan-card.is-popular > .button,
.pricing-page .billing-option.is-selected { background: var(--btn-grad) !important; color: #fff !important; }
.lang-banner { background: var(--green-900) !important; }

/* Dark green footer, like the home page */
:root:not([data-theme="dark"]) body .page-frame .page-footer { color: var(--muted); }
:root:not([data-theme="dark"]) body .page-frame .page-footer a { color: var(--green-800); }
:root:not([data-theme="dark"]) body .page-frame .pay-card .pay-badge { background: #d1fae5; color: #047857; }