/* TH3 COLL3CTIV3 — design system v2 (loaded last).
   One semantic token layer (dark first, light as an equal), mapped onto the older tokens so every page
   inherits it, plus refined components: header, mobile dock, buttons, fields, cards, tabs, tables,
   empty states and motion. Palette comes from the logo: champagne gold, warm ivory, near-black.

   Mobile-first layout rules (documented here, implemented below):
   - Under 900px the top navigation collapses into the bottom dock (5 destinations, safe-area aware);
     the header keeps only the logo (emblem under 480px) and the appearance toggle, and it pins to the top.
   - Data tables become stacked cards under 640px: each row is a card, each cell shows its column name.
   - Secondary panels (filters, tool panels) live in <details> and start collapsed on phones.
   - Content gets bottom padding equal to the dock height so nothing hides behind it. */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: dark;
  /* surfaces (near-black with a warm undertone, from the logo field) */
  --bg-primary: #0B0C10;
  --bg-secondary: #111318;
  --surface-1: #15171D;          /* cards, panels */
  --surface-2: #1B1E25;          /* raised: inputs, menus, hover */
  --surface-3: #232731;          /* pressed, selected */
  --surface-glass: rgba(17, 19, 24, .72);
  --border-subtle: rgba(247, 240, 226, .08);
  --border-default: rgba(247, 240, 226, .13);
  --border-strong: rgba(237, 184, 104, .38);
  /* text (contrast on --bg-primary: 17.4 / 11.7 / 7.1; on cards 6.5+) */
  --text-primary: #F7F0E2;
  --text-secondary: #CFC7B8;
  --text-tertiary: #A39B8D;
  --text-on-accent: #1A1206;
  /* accent: logo gold */
  --accent-primary: #EDB868;
  --accent-primary-hover: #F3C886;
  --accent-primary-press: #D9A453;
  --accent-subtle: rgba(237, 184, 104, .12);
  --accent-text: #EDB868;        /* gold used as text (10.3:1 on bg) */
  --focus-ring: 0 0 0 2px var(--bg-primary), 0 0 0 4px rgba(237, 184, 104, .85);
  /* status (each ≥ 4.5:1 as text on --bg-primary) */
  --success: #5FD49A; --success-subtle: rgba(95, 212, 154, .12);
  --danger: #FF8A8A;  --danger-subtle: rgba(255, 138, 138, .12);
  --warning: #F2C060; --warning-subtle: rgba(242, 192, 96, .12);
  --info: #8EC5D0;    --info-subtle: rgba(142, 197, 208, .12);
  /* type scale (1.2 minor third, fluid at the top) */
  --font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-xs: .75rem; --text-sm: .875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem;
  --text-2xl: 1.75rem; --text-3xl: clamp(2rem, 4.5vw, 2.6rem); --text-4xl: clamp(2.4rem, 7vw, 3.6rem);
  /* 4px spacing grid */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  /* radius, elevation, motion */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-pill: 999px;
  --shadow-1: 0 1px 0 rgba(247, 240, 226, .04) inset, 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 1px 0 rgba(247, 240, 226, .05) inset, 0 12px 32px -16px rgba(0, 0, 0, .8);
  --shadow-3: 0 1px 0 rgba(247, 240, 226, .06) inset, 0 28px 64px -24px rgba(0, 0, 0, .9);
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(.3, 0, 0, 1.15);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;
  --dock-h: 64px;

  /* older tokens now follow the semantic layer */
  --bg: var(--bg-primary); --bg-2: var(--bg-secondary);
  --text: var(--text-primary); --text-2: var(--text-secondary); --muted: var(--text-tertiary); --link: var(--accent-text);
  --gold: var(--accent-text); --rv-gold: var(--accent-primary); --rv-ivory: var(--text-primary); --rv-obsidian: var(--bg-primary);
  --glass: var(--surface-1); --glass-edge: var(--border-default); --glass-edge-hi: var(--border-strong); --hairline: var(--border-subtle);
  --rv-line: var(--border-default); --ink-well: var(--surface-2);
  --pos: var(--success); --neg: var(--danger); --warn: var(--warning);
  --shadow: var(--shadow-1); --rv-e1: var(--shadow-1); --rv-e2: var(--shadow-2);
  --font-display: var(--font-ui); --font-body: var(--font-ui);
  --r-card: var(--radius-lg); --r-inner: var(--radius-md); --r-ctl: var(--radius-md);
  --bottom-nav-h: var(--dock-h);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg-primary: #F6F2EA;
  --bg-secondary: #EFE9DE;
  --surface-1: #FFFFFF;
  --surface-2: #FAF7F1;
  --surface-3: #F1EBDF;
  --surface-glass: rgba(255, 255, 255, .78);
  --border-subtle: rgba(22, 18, 12, .07);
  --border-default: rgba(22, 18, 12, .12);
  --border-strong: rgba(169, 116, 31, .45);
  --text-primary: #16120C;       /* 16.6:1 */
  --text-secondary: #474036;     /* 9.4:1 */
  --text-tertiary: #6B6356;      /* 5.6:1 */
  --text-on-accent: #FFFFFF;
  --accent-primary: #93651A;     /* the light logo's gold, one step deeper so white text clears 5:1 */
  --accent-primary-hover: #82591A;
  --accent-primary-press: #6F4C15;
  --accent-subtle: rgba(169, 116, 31, .1);
  --accent-text: #845A14;        /* 5.6:1 */
  --focus-ring: 0 0 0 2px var(--bg-primary), 0 0 0 4px rgba(132, 90, 20, .8);
  --success: #1F7A4D; --success-subtle: rgba(31, 122, 77, .1);
  --danger: #B3261E;  --danger-subtle: rgba(179, 38, 30, .08);
  --warning: #8A5A00; --warning-subtle: rgba(138, 90, 0, .1);
  --info: #2F6870;    --info-subtle: rgba(47, 104, 112, .1);
  --shadow-1: 0 1px 2px rgba(22, 18, 12, .06);
  --shadow-2: 0 8px 24px -12px rgba(22, 18, 12, .18);
  --shadow-3: 0 24px 48px -20px rgba(22, 18, 12, .22);
}

/* ---------- 2. Base ---------- */
html { background: var(--bg-primary); -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body, :root[data-theme="light"] body {
  background: radial-gradient(70rem 32rem at 50% -14rem, rgba(237, 184, 104, .07), transparent 70%), var(--bg-primary);
  background-attachment: scroll;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
:root[data-theme="light"] body { background: radial-gradient(70rem 32rem at 50% -14rem, rgba(169, 116, 31, .08), transparent 70%), var(--bg-primary); }

/* typography: sans, tight tracking, clear steps */
body h1, body h2, body h3, body h4 { font-family: var(--font-ui); color: var(--text-primary); text-wrap: balance; }
body h1 { font-size: var(--text-4xl); font-weight: 650; letter-spacing: -.035em; line-height: 1.05; }
body h2 { font-size: var(--text-2xl); font-weight: 620; letter-spacing: -.022em; line-height: 1.15; }
body h3 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -.012em; line-height: 1.3; }
body .lede, body .page-head p { color: var(--text-secondary); font-size: var(--text-lg); line-height: 1.55; max-width: 62ch; text-wrap: pretty; }
body p { text-wrap: pretty; }
body .note { color: var(--text-tertiary); font-size: var(--text-sm); line-height: 1.5; }
/* Labels are sentence case: no tracked capitals (the logo is the only all-caps type on the page). */
body .eyebrow, body .eyebrow-pill { font-size: var(--text-sm); font-weight: 600; letter-spacing: -.005em; text-transform: none; color: var(--accent-text); }
body .eyebrow-pill { padding: 6px 12px 6px 10px; background: var(--accent-subtle); border: 0; border-radius: var(--radius-pill); }
/* Headlines are one colour: no highlighted phrase. */
body .gradient-text, body .hero-x h1 .gradient-text { background: none; -webkit-text-fill-color: currentColor; color: inherit; font-style: normal; }
body a { color: var(--accent-text); text-decoration-color: color-mix(in srgb, var(--accent-text) 40%, transparent); text-underline-offset: .22em; transition: text-decoration-color var(--dur-1); }
body a:hover { text-decoration-color: currentColor; }
::selection { background: rgba(237, 184, 104, .3); color: var(--text-primary); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
body :focus-visible { outline: none; }

/* ---------- 3. Surfaces ---------- */
body .panel, body .console-panel, body .stat, body .vcard, body .gcard, body .plan, body .handoff, body .grader,
body .guide-list a, body .plan-card, body .want, body .set-row, body .dupes, body .history-panel, body .station, body .fcard {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body a.guide-list a:hover, body .guide-list a:hover, body .station:hover { border-color: var(--border-default); box-shadow: var(--shadow-2); }
body .panel, body .console-panel { padding: var(--space-6); }
@media (min-width: 700px) { body .panel, body .console-panel { padding: var(--space-8); } }

/* ---------- 4. Header (pinned) and mobile dock ---------- */
body .site-header, :root[data-theme="light"] .site-header, :root[data-theme="light"].scrolled .site-header {
  background: var(--surface-glass);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-2);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
}
body .top-nav { gap: var(--space-1); }
body .top-nav a { position: relative; color: var(--text-secondary); font-size: var(--text-sm); font-weight: 550; letter-spacing: -.005em; text-transform: none; padding: 9px 14px; border-radius: var(--radius-pill); transition: color var(--dur-1), background var(--dur-1); }
body .top-nav a:hover { color: var(--text-primary); background: var(--surface-2); }
body .top-nav a[aria-current="page"]:not(.top-cta) { color: var(--text-primary); background: var(--surface-3); }
body .top-nav .top-cta[aria-current="page"] { box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 3px var(--accent-primary); }
body .top-nav a:not(.top-cta)::after { display: none; }
body .top-nav .top-cta, :root[data-theme="light"] .top-nav .top-cta { color: var(--text-on-accent); background: var(--accent-primary); border: 0; }
body .top-nav .top-cta:hover { background: var(--accent-primary-hover); }

body .bottom-nav, :root[data-theme="light"] .bottom-nav {
  height: var(--dock-h); padding: 6px; gap: 2px;
  border-radius: 24px;
  background: var(--surface-glass);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-3);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
}
body .nav-item { color: var(--text-tertiary); font-size: 11px; font-weight: 600; letter-spacing: .01em; border-radius: 18px; min-height: 48px; transition: color var(--dur-1), background var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-standard); -webkit-tap-highlight-color: transparent; }
body .nav-item:hover { color: var(--text-secondary); }
body .nav-item:active { transform: scale(.94); }
body .nav-item[aria-current="page"], :root[data-theme="light"] .nav-item[aria-current="page"] { color: var(--accent-text); background: var(--accent-subtle); box-shadow: none; }

/* ---------- 5. Buttons ---------- */
body .btn {
  min-height: 44px; padding: 0 var(--space-5);
  font: 600 var(--text-md)/1 var(--font-ui); letter-spacing: -.005em;
  color: var(--text-on-accent); background: var(--accent-primary);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 6px 16px -8px rgba(237, 184, 104, .55);
  transition: background var(--dur-1), transform var(--dur-1) var(--ease-standard), box-shadow var(--dur-2);
  -webkit-tap-highlight-color: transparent;
}
body .btn:hover { background: var(--accent-primary-hover); filter: none; transform: none; box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 10px 24px -10px rgba(237, 184, 104, .6); }
body .btn:active { background: var(--accent-primary-press); transform: scale(.97); }
body .btn:focus-visible { box-shadow: var(--focus-ring); }
body .btn-ghost, :root[data-theme="light"] .btn-ghost { color: var(--text-primary); background: var(--surface-2); border-color: var(--border-default); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body .btn-ghost:hover { background: var(--surface-3); border-color: var(--border-strong); box-shadow: none; }
body .btn-ghost:active { background: var(--surface-3); }
body .btn-sm { min-height: 36px; padding: 0 var(--space-4); font-size: var(--text-sm); }
body .btn.danger, body .btn-ghost.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: var(--danger-subtle); }
body .btn[disabled], body .btn[aria-disabled="true"] { opacity: .45; transform: none; cursor: not-allowed; }
body .link-btn { color: var(--accent-text); font-weight: 600; }

/* ---------- 6. Fields ---------- */
body input[type="text"], body input[type="email"], body input[type="password"], body input[type="url"], body input[type="number"],
body input[type="search"], body input[type="tel"], body input[type="date"], body select, body textarea {
  min-height: 44px; padding: 10px 14px;
  font: 500 var(--text-md) var(--font-ui); color: var(--text-primary);
  background-color: var(--surface-2); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  box-shadow: none;
  transition: border-color var(--dur-1), box-shadow var(--dur-1), background-color var(--dur-1);
}
body input:hover, body select:hover, body textarea:hover { border-color: color-mix(in srgb, var(--text-primary) 22%, transparent); }
body input:focus, body select:focus, body textarea:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-subtle); background-color: var(--surface-1); }
body input::placeholder, body textarea::placeholder { color: var(--text-tertiary); opacity: 1; }
body select option { background: var(--surface-1); color: var(--text-primary); }
body .field label, body label.field-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); }
body .hint { color: var(--text-tertiary); font-weight: 500; }
body input[type="checkbox"], body input[type="radio"] { accent-color: var(--accent-primary); width: 18px; height: 18px; }
body details.more summary, body details > summary { color: var(--text-primary); font-weight: 600; cursor: pointer; }

/* ---------- 7. Chips, tabs, segmented controls, banners ---------- */
body .chip { font-size: var(--text-xs); font-weight: 600; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--surface-3); border: 1px solid var(--border-subtle); color: var(--text-secondary); }
body .chip.send { background: var(--success-subtle); color: var(--success); border-color: transparent; }
body .chip.aff, body .chip.ex-chip { background: var(--accent-subtle); color: var(--accent-text); border-color: transparent; }
body .seg, body .vault-viewbar .seg { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); padding: 3px; }
body .seg label, body .seg-btn { min-height: 38px; border-radius: var(--radius-pill); color: var(--text-secondary); font-weight: 600; transition: background var(--dur-2) var(--ease-standard), color var(--dur-1); }
body .seg label:has(input:checked), body .seg-btn[aria-pressed="true"] { background: var(--surface-1); color: var(--text-primary); box-shadow: var(--shadow-1), 0 0 0 1px var(--border-default); }
body .seg label:has(input:checked) span { color: var(--text-primary); }
body .mk-tabs { gap: var(--space-1); border-bottom: 1px solid var(--border-subtle); scrollbar-width: none; }
body .mk-tabs a { color: var(--text-tertiary); font-weight: 600; font-size: var(--text-sm); padding: 12px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--dur-1), border-color var(--dur-2); }
body .mk-tabs a:hover { color: var(--text-primary); }
body .mk-tabs a[aria-current="page"] { color: var(--text-primary); border-bottom-color: var(--accent-primary); }
body .legal-banner { background: var(--surface-1); border: 1px solid var(--border-default); border-left: 3px solid var(--accent-primary); border-radius: var(--radius-md); color: var(--text-secondary); }
body .legal-banner b, body .legal-banner.warn b { color: var(--text-primary); }
body .legal-banner.warn { border-left-color: var(--warning); }
body .form-status.ok { color: var(--success); } body .form-status.bad { color: var(--danger); }
body .v.pos, body dd.pos { color: var(--success); } body .v.neg, body dd.neg { color: var(--danger); }

/* ---------- 8. Empty states (one look everywhere) ---------- */
body .empty, body .mk-state, body .vault-empty, body .empty-results {
  display: grid; justify-items: center; gap: var(--space-2);
  padding: var(--space-10) var(--space-6); text-align: center; color: var(--text-secondary);
  background: var(--surface-1); border: 1px dashed var(--border-default); border-radius: var(--radius-lg); box-shadow: none;
}
body .empty b, body .mk-state b, body .empty-results b { color: var(--text-primary); font-size: var(--text-lg); font-weight: 600; letter-spacing: -.01em; }
body .empty p, body .mk-state p, body .empty-results p { max-width: 44ch; margin: 0; }
body .empty .btn, body .mk-state .btn, body .empty-results .btn { margin-top: var(--space-2); }
body .empty-results img, body .empty img { filter: none; opacity: .9; }

/* ---------- 9. Tables: rows become cards on phones ---------- */
body table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
body th { color: var(--text-tertiary); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; text-transform: none; }
body td, body th { border-color: var(--border-subtle); }
@media (max-width: 639px) {
  body table.stack-ready:not(.no-stack) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body table.stack-ready:not(.no-stack) { min-width: 0; }
  body table.stack-ready:not(.no-stack), body table.stack-ready:not(.no-stack) tbody, body table.stack-ready:not(.no-stack) tr, body table.stack-ready:not(.no-stack) td, body table.stack-ready:not(.no-stack) tbody th { display: block; width: 100%; }
  body table.stack-ready:not(.no-stack) tr { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
  body table.stack-ready:not(.no-stack) td, body table.stack-ready:not(.no-stack) tbody th { display: flex; justify-content: space-between; gap: var(--space-4); padding: 6px 0; border: 0; text-align: right; white-space: normal; }
  body table.stack-ready:not(.no-stack) td::before, body table.stack-ready:not(.no-stack) tbody th::before { content: attr(data-label); color: var(--text-tertiary); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; text-transform: none; text-align: left; }
  body table.stack-ready:not(.no-stack) td:first-child, body table.stack-ready:not(.no-stack) tbody th:first-child { font-weight: 600; color: var(--text-primary); text-align: left; }
  body table.stack-ready:not(.no-stack) td[data-label=""]::before { content: none; }
  body .table-scroll:has(> table.stack-ready:not(.no-stack)) { overflow: visible; }
  body table.stack-ready:not(.no-stack) td > *, body table.stack-ready:not(.no-stack) td { min-width: 0; overflow-wrap: anywhere; }
}

/* ---------- 10. Cards in grids: hover lift (pointer devices only) ---------- */
@media (hover: hover) and (pointer: fine) {
  body .mk-tile, body .vcard, body .station, body .guide-list a { transition: transform var(--dur-2) var(--ease-standard), box-shadow var(--dur-2), border-color var(--dur-2); }
  body .mk-tile:hover, body .station:hover, body .guide-list a:hover { transform: translateY(-2px); }
}
body .mk-tile { background: var(--surface-1); border-color: var(--border-subtle); border-radius: var(--radius-lg); }
body .mk-tile:active { transform: scale(.985); }

/* ---------- 11. Progress ---------- */
body progress, body .progress { appearance: none; height: 6px; border: 0; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
body progress::-webkit-progress-bar { background: var(--surface-3); border-radius: var(--radius-pill); }
body progress::-webkit-progress-value { background: var(--accent-primary); border-radius: var(--radius-pill); transition: width var(--dur-3) var(--ease-standard); }
body progress::-moz-progress-bar { background: var(--accent-primary); border-radius: var(--radius-pill); }

/* ---------- 12. Footer ---------- */
body .site-footer, :root[data-theme="light"] .site-footer { background: transparent; border-top: 1px solid var(--border-subtle); color: var(--text-tertiary); }
body .site-footer a { color: var(--text-secondary); }
body .site-footer a:hover { color: var(--text-primary); }

/* ---------- 13. Motion and the save-data / reduced-motion promise ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  body .btn:active, body .nav-item:active, body .mk-tile:active { transform: none; }
}

/* ---------- 14. Vault card placeholders and photo frames: neutral, on-palette ---------- */
body .pcard .hcard-face { background: var(--surface-2); }
body .pcard .pc-img { background: linear-gradient(110deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%); background-size: 200% 100%; }
body .pcard-big .pc-img { background: var(--bg-secondary); }
body .pc-empty {
  background: radial-gradient(circle at 75% 15%, rgba(237, 184, 104, .14), transparent 55%),
    repeating-linear-gradient(135deg, var(--surface-2) 0 12px, var(--surface-1) 12px 24px);
}
body .pc-empty::before { border-color: var(--border-default); }
body .pc-empty-name { color: var(--text-primary); font-family: var(--font-ui); font-weight: 650; letter-spacing: -.01em; }
body .pc-empty-meta { color: var(--text-secondary); }
body .pc-empty-note { color: var(--accent-text); text-transform: none; letter-spacing: 0; font-size: var(--text-xs); font-weight: 600; }

/* ---------- 15. Pages that fill in after load keep the footer below the fold (no layout shift) ---------- */
body .mk-page, body .vault-page { min-height: calc(100vh - 120px); min-height: calc(100dvh - 120px); }

/* ---------- 16. Small labels that used to be tracked capitals ---------- */
body .rarity-pill, body .plan-badge, body .pack .pack-label small, body .admin-tag { text-transform: none; letter-spacing: 0; }

/* ---------- 17. Plans: flat surfaces, flat numbers; the recommended plan is marked by its border only ---------- */
body .plan, body .plan.plus, body .plan.pro, :root[data-theme="light"] .plan.pro { background: var(--surface-1); box-shadow: var(--shadow-1); }
body .plan.pro { border-color: var(--border-strong); box-shadow: var(--shadow-2), 0 0 0 1px var(--border-strong); }
body .plan.plus::before, body .plan.pro::before { display: none; animation: none; }
body .plan .price, body .plan.pro .price, body .plan.plus .price, :root[data-theme="light"] .plan.plus .price {
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--text-primary); -webkit-text-fill-color: currentColor;
  font-family: var(--font-ui); font-weight: 650; letter-spacing: -.03em;
}
body .plan .price small { -webkit-text-fill-color: currentColor; color: var(--text-tertiary); font-weight: 500; letter-spacing: 0; }
body .plan li::marker, body .plan.pro li::marker { color: var(--accent-text); }