/*
 * Quantum — powered by Multiuniversal
 * Shares design tokens/typography with multiuniversal.com; independent nav & content.
 */

/* --- Custom Properties --- */
:root {
  --bg-primary:   #0a0a0f;
  --bg-secondary: #101018;
  --bg-tertiary:  #1a1a24;
  --bg-elevated:  #22222e;
  --bg-surface:   #2a2a38;

  --accent-primary:       #EE3D43;
  --accent-primary-hover: #F55B60;
  --accent-primary-glow:  rgba(238, 61, 67, 0.25);
  --accent-blue:          #4A8FCA;
  --accent-blue-hover:    #6aaad9;
  --accent-orange:        #F5871F;
  --accent-green:         #7DC242;
  --accent-magenta:       #C8378B;
  --accent-red:           #EE3D43;

  --text-primary:   #E8ECF7;
  --text-secondary: #B8BFD2;
  --text-muted:     #8896AD;

  --border-subtle: rgba(125, 211, 252, 0.12);
  --border-hover:  rgba(125, 211, 252, 0.25);
  --card-bg:       rgba(255, 255, 255, 0.02);

  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 6px;

  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.7;
  padding-top: 72px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* Sticky footer: every page is <nav (fixed)><main><footer>, so on a page
     shorter than the viewport (e.g. account.php with just one accordion
     section open) the footer would otherwise float above the fold with
     bare body background underneath it instead of sitting flush against
     the bottom edge. main growing to fill any leftover space pushes the
     footer down to the true bottom in that case, with no effect at all
     once real content is taller than the viewport (the normal case). */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--accent-primary-hover); }

img { max-width: 100%; height: auto; display: block; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Generic show/hide toggle for scripts — add/remove this class instead of
   ever setting element.style.display. Required, not just a preference: this
   site's CSP is `style-src 'self'` with no 'unsafe-inline', so the browser
   silently discards every inline style="" attribute and every JS
   element.style.x assignment — only real classes in this external
   stylesheet actually take effect. !important because this utility's whole
   job is "hidden no matter what else applies". */
.hidden { display: none !important; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }

p { color: var(--text-secondary); margin-bottom: 1rem; }
ul { list-style: none; }

/* --- Layout --- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section     { padding: 80px 0; }
.section-alt { background: var(--bg-secondary); }
.txt-center  { text-align: center; }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  line-height: 1;
}

.btn-primary { background: #D63540; color: #fff; }
.btn-primary:hover {
  background: var(--accent-primary-hover);
  color: #fff;
  box-shadow: 0 0 40px var(--accent-primary-glow);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-hover);
  font-weight: 500;
}
.btn-ghost:hover {
  background: var(--card-bg);
  border-color: var(--accent-orange);
  color: var(--text-primary);
}

.btn-lg { padding: 18px 40px; font-size: 1.1rem; }

/* --- Cards --- */
/* --- Navigation --- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  transition: all var(--transition);
}

.navbar .container {
  display: flex;
  align-items: center;
  gap: 36px;
  height: 72px;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.navbar-brand img { height: 32px; width: auto; }
.navbar-brand .brand-badge {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-left: 1px solid var(--border-subtle);
  padding-left: 10px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
}

.nav-links a {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: relative;
  padding: 4px 0;
  transition: color var(--transition);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--accent-primary);
  transition: width var(--transition);
}

.nav-links a:hover, .nav-links a.active { color: var(--text-primary); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 16px; }
/* .nav-cta a.btn also matches the plainer ".nav-links a" rule above (mono
   font, muted color, uppercase, 4px 0 padding, hover-underline pseudo-element)
   since it's nested inside .nav-links — this restores the button's own
   intended look. Only text-transform was ever overridden before, which is
   why the button looked broken (wrong font/color/padding) next to the plain
   nav links on desktop; the mobile layout happened to mask the padding
   problem because its own override forces width:100%. */
.nav-cta a.btn, .nav-cta .btn {
  text-transform: none;
  font-family: var(--font);
  letter-spacing: 0.01em;
  padding: 11px 20px;
  color: #fff;
}
.nav-cta a.btn::after, .nav-cta .btn::after { display: none; }

/* The desktop app isn't downloadable yet — this replaces what used to be a
   real download link/button. Most instances are real links to /pricing
   (where the waitlist is), just visually toned down since they're not the
   primary CTA; .is-static marks the one true dead-end (a <span> on the
   pricing page itself, where linking to /pricing would be circular) so it
   doesn't look interactive when it isn't. */
.btn-coming-soon { opacity: 0.85; }
.btn-coming-soon.is-static { cursor: default; }
.btn-coming-soon.is-static:hover { transform: none; box-shadow: none; }

/* Nav dropdown — mirrors multiuniversal.com's exactly (grouping the 3 modes
   under one "Product" trigger instead of listing them flat, same fix they
   use for their own larger nav via the About/Services dropdowns). */
.nav-dropdown { position: relative; }

.nav-dropdown-trigger {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  transition: color var(--transition);
  min-height: 44px;
}

.nav-dropdown-trigger span {
  position: relative;
  padding-bottom: 2px;
}

.nav-dropdown-trigger span::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent-primary);
  transition: width var(--transition);
}

.nav-dropdown-trigger:hover,
.nav-dropdown-trigger.active { color: var(--text-primary); }

.nav-dropdown-trigger:hover span::after,
.nav-dropdown-trigger.active span::after { width: 100%; }

.nav-dropdown-chevron {
  transition: transform var(--transition);
  margin-top: 1px;
}

.nav-dropdown.open .nav-dropdown-chevron { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 220px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 1001;
}

.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}

.nav-dropdown-menu a::after { display: none !important; }

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active {
  color: var(--accent-primary);
  background: rgba(238, 61, 67, 0.06);
}

/* Mobile menu toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1001;
  min-width: 44px; min-height: 44px;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text-primary);
  margin: 5px 0;
  transition: all var(--transition);
  border-radius: 2px;
}
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Gradient accent line */
.gradient-line {
  height: 2px;
  background: linear-gradient(90deg, var(--accent-red), var(--accent-orange), var(--accent-green), var(--accent-blue));
}

/* Grid overlay texture */
.vc-grid {
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Section header */
.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}
.section-header .label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-primary);
  margin-bottom: 12px;
}
.section-header h2 { margin-bottom: 16px; }
.section-header p { color: var(--text-secondary); font-size: 1.1rem; }

/* --- Hero (homepage) — mirrors multiuniversal.com's .home-hero-single exactly:
   a single centered block, no eyebrow, no two-column grid, no icon. --- */
.hero {
  position: relative;
  padding: 72px 0 40px;
  overflow: hidden;
}
.hero > .container { position: relative; }
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at top, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at top, #000 30%, transparent 70%);
}

.home-hero-single { position: relative; z-index: 1; }
.home-hero-h1 {
  margin: 0 0 24px;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--text-primary);
}
.home-hero-sub {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0 0 32px;
  max-width: 62ch;
}
.home-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.accent-blue    { color: var(--accent-blue); }
.accent-orange  { color: var(--accent-orange); }
.accent-green   { color: var(--accent-green); }
.accent-magenta { color: var(--accent-magenta); }
.accent-primary { color: var(--accent-primary); }

/* Simple inner-page hero — mirrors multiuniversal.com's .page-hero exactly:
   centered text, no icon, no grid overlay. */
.page-hero {
  padding: 48px 0 24px;
  text-align: center;
  border-bottom: 1px solid var(--border-subtle);
}
.page-hero h1        { margin-bottom: 8px; }
.page-hero .subtitle { color: var(--text-secondary); font-size: 1.1rem; }
.page-hero + .section { padding-top: 40px; }
.page-hero--no-border { border-bottom: none; }

/* "What we do" — one row per item — mirrors multiuniversal.com's
   .home-categories/.home-category exactly (one card per row, accent border-left). */
.home-categories { display: flex; flex-direction: column; gap: 20px; }
.home-category {
  position: relative;
  cursor: pointer;
  background: var(--card-bg);
  border: 1px solid var(--border-hover);
  border-left: 3px solid var(--acc, var(--accent-blue));
  border-radius: var(--radius-md);
  padding: 28px 32px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.home-category:hover {
  border-color: var(--acc);
  border-left-color: var(--acc);
  box-shadow: 0 0 24px rgba(var(--acc-rgba), 0.15);
}
.home-category.accent-blue   { --acc: var(--accent-blue);   --acc-rgba: 74, 143, 202; }
.home-category.accent-orange { --acc: var(--accent-orange); --acc-rgba: 245, 135, 31; }
.home-category.accent-green  { --acc: var(--accent-green);  --acc-rgba: 125, 194, 66; }

.home-category-title {
  margin: 0 0 10px;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--acc, var(--accent-blue));
}
.home-category-title-link { color: inherit; text-decoration: none; }
.home-category-title-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.home-category:hover .home-category-title-link { opacity: 0.82; }
.home-category-desc { position: relative; z-index: 1; }

/* Why-us cards — mirrors multiuniversal.com's .principles-grid/.principle-card exactly. */
.principles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 32px; }
.principle-card {
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 32px;
  transition: border-color var(--transition);
}
.principle-card:hover { border-color: var(--accent-primary); }
.principle-card h3 { color: var(--accent-primary); margin-bottom: 12px; font-size: 18px; }
.principle-card p  { color: var(--text-secondary); font-size: 15px; margin-bottom: 0; }
.principle-card.card-blue h3    { color: var(--accent-blue); }
.principle-card.card-orange h3  { color: var(--accent-orange); }
.principle-card.card-green h3   { color: var(--accent-green); }
.principle-card.card-magenta h3 { color: var(--accent-magenta); }
.principle-card.card-blue:hover    { border-color: var(--accent-blue); }
.principle-card.card-orange:hover  { border-color: var(--accent-orange); }
.principle-card.card-green:hover   { border-color: var(--accent-green); }
.principle-card.card-magenta:hover { border-color: var(--accent-magenta); }

@media (max-width: 768px) { .principles-grid { grid-template-columns: 1fr; } }

/* "What it does" cards — mirrors multiuniversal.com's .solutions-grid/.solution-card exactly. */
.solutions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 32px; }
.solutions-grid--3 { grid-template-columns: repeat(3, 1fr); }
.solution-card {
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 32px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.solution-card:hover { border-color: var(--accent-primary); box-shadow: 0 0 20px var(--accent-primary-glow); }
.solution-card h3 { color: var(--accent-primary); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.solution-card p  { color: var(--text-secondary); font-size: 15px; margin-bottom: 0; }
.solution-card.card-blue h3    { color: var(--accent-blue); }
.solution-card.card-orange h3  { color: var(--accent-orange); }
.solution-card.card-green h3   { color: var(--accent-green); }
.solution-card.card-magenta h3 { color: var(--accent-magenta); }
.solution-card.card-blue:hover    { border-color: var(--accent-blue);    box-shadow: 0 0 20px rgba(74, 143, 202, 0.2); }
.solution-card.card-orange:hover  { border-color: var(--accent-orange);  box-shadow: 0 0 20px rgba(245, 135, 31, 0.2); }
.solution-card.card-green:hover   { border-color: var(--accent-green);   box-shadow: 0 0 20px rgba(125, 194, 66, 0.2); }
.solution-card.card-magenta:hover { border-color: var(--accent-magenta); box-shadow: 0 0 20px rgba(200, 55, 139, 0.2); }

@media (max-width: 768px) { .solutions-grid { grid-template-columns: 1fr; } }

/* Price badge on a .solution-card — mirrors multiuniversal.com's
   .scan-runtime/.scan-best pricing-page classes exactly. */
.solution-card.card-blue .scan-runtime    { color: var(--accent-blue); }
.solution-card.card-orange .scan-runtime  { color: var(--accent-orange); }
.solution-card.card-green .scan-runtime   { color: var(--accent-green); }
.solution-card.card-magenta .scan-runtime { color: var(--accent-magenta); }

.scan-runtime {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-primary);
  margin-bottom: 10px;
}

.scan-best {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

/* "How it works" — mirrors multiuniversal.com's .process-steps/.process-step
   exactly, deliberately WITHOUT numbered circles (their own CSS comment notes
   numbered process steps read as an AI-generated-design tell). */
.process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 48px; }
.process-step { padding: 32px 24px; text-align: center; }
.process-step h3 {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--accent-primary);
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}
.process-step p { color: var(--text-secondary); font-size: 14px; line-height: 1.7; margin-bottom: 0; }

@media (max-width: 768px) {
  .process-steps { grid-template-columns: 1fr; gap: 8px; }
  .process-step { border-left: 2px solid var(--accent-primary); text-align: left; padding: 24px 32px; }
}

/* Simple centered inner-page CTA — mirrors multiuniversal.com's
   .page-cta-heading/.page-cta-sub pattern (a plain .section.txt-center). */
.page-cta-heading { margin-bottom: 16px; }
.page-cta-sub     { max-width: 520px; margin: 0 auto 32px; }

/* CTA band (homepage) — mirrors multiuniversal.com's .cta-block exactly:
   bordered gradient panel with a grid-overlay texture and an eyebrow. */
.cta-block {
  position: relative;
  padding: 72px 64px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent-primary);
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
  overflow: hidden;
}
.cta-block .cta-grid-overlay { position: absolute; inset: 0; opacity: 0.3; pointer-events: none; }
.cta-block .cta-content { position: relative; max-width: 720px; }
.cta-block h2 { font-size: clamp(2rem, 5vw, 3.5rem); margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.cta-block .cta-sub { font-size: 1.1rem; color: var(--text-secondary); margin-top: 20px; margin-bottom: 0; line-height: 1.55; max-width: 560px; }
.cta-block .cta-btns { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

@media (max-width: 768px) { .cta-block { padding: 48px 28px; } }

/* --- Footer --- */
footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
}
footer .gradient-line { height: 3px; }

.footer-cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 48px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.footer-brand-logo { height: 36px; width: auto; margin-bottom: 20px; }
.footer-brand-tagline {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 300px;
  margin: 0;
}

.footer-col-heading {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-orange);
  margin-bottom: 16px;
}

.footer-col-links { display: flex; flex-direction: column; gap: 10px; }
.footer-col-links a {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition);
}
.footer-col-links a:hover { color: var(--text-primary); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  flex-wrap: wrap;
  gap: 8px;
}

/* --- Animations --- */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* --- Responsive --- */
@media (max-width: 991px) {
  .nav-toggle { display: flex; margin-left: auto; }

  .nav-links {
    position: fixed;
    top: 0; right: -100%;
    width: 280px;
    height: 100vh;
    background: var(--bg-secondary);
    flex: none;
    flex-direction: column;
    align-items: flex-start;
    padding: 90px 28px 28px;
    gap: 0;
    border-left: 1px solid var(--border-subtle);
    transition: right var(--transition);
  }
  .nav-links.open { right: 0; }
  .nav-links a {
    padding: 16px 0;
    font-size: 1rem;
    width: 100%;
    border-bottom: 1px solid var(--border-subtle);
  }
  .nav-links a::after { display: none; }

  .nav-dropdown { width: 100%; }
  .nav-dropdown-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 16px 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--border-subtle);
    min-height: 0;
  }
  .nav-dropdown-trigger span::after { display: none; }
  .nav-dropdown-menu {
    position: static;
    opacity: 1;
    visibility: hidden;
    transform: none;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition), visibility var(--transition);
  }
  .nav-dropdown.open .nav-dropdown-menu { visibility: visible; max-height: 400px; }
  .nav-dropdown-menu a {
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.9rem;
  }

  .nav-cta {
    margin-left: 0;
    margin-top: 16px;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .nav-cta .btn { width: 100%; justify-content: center; }

  .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
  }
  .nav-overlay.active { display: block; }
}

@media (max-width: 768px) {
  body { padding-top: 65px; }
  .navbar .container { height: 65px; }
  .hero { padding: 64px 0 56px; }
  .section { padding: 56px 0; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .footer-cols { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* --- Auth forms (login / register / account) --- */
.auth-shell {
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 40px;
}

/* account.php has far more content than a login/register form — it sits
   near the top of the viewport instead of vertically centered, and its card
   uses a wider cap than the shared .auth-card default (420px), which is
   sized for a short login/register form, not a settings page with several
   accordion sections. min-height: 0 overrides .auth-shell's
   calc(100vh - 72px), which exists to vertically center a short auth form —
   now that this section is top-aligned instead, that reserved height just
   became dead space below a short card (e.g. only "Subscription" expanded),
   pushing the footer past the fold and forcing a scrollbar for no reason. */
.account-shell { align-items: flex-start; min-height: 0; }
.account-card-width { max-width: 760px; }

.auth-card h1 { font-size: 1.6rem; margin-bottom: 8px; }
.auth-card .auth-sub { color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 28px; }

.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.form-group input {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font);
  font-size: 0.95rem;
  color: var(--text-primary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition);
}
.form-group input:focus {
  outline: none;
  border-color: var(--accent-blue);
}

.form-submit { width: 100%; justify-content: center; margin-top: 4px; }

/* A short value (e.g. a euro amount) next to its submit button, instead of
   .form-group input's default full-width — a two-digit number stretched
   across the whole card looks disproportionate. */
.inline-input-row { display: flex; align-items: center; gap: 12px; }
.inline-input-row input.input-compact { width: 100px; flex: none; }

.form-message {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  display: none;
}
.form-message.error {
  display: block;
  background: rgba(238, 61, 67, 0.1);
  border: 1px solid rgba(238, 61, 67, 0.3);
  color: var(--accent-primary-hover);
}
.form-message.success {
  display: block;
  background: rgba(125, 194, 66, 0.1);
  border: 1px solid rgba(125, 194, 66, 0.3);
  color: var(--accent-green);
}
.auth-switch {
  text-align: center;
  margin-top: 24px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* --- Account / pairing page --- */
.account-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-subtle);
}
.account-info .label {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#verify-banner { margin-top: 10px; }

/* Account page subsections (Subscription, Connect the desktop app,
   Connected devices, Change email, Change password) — collapsed by default,
   expand on click. Same native <details>/<summary> pattern as the pricing
   page's .faq-item (no JS needed for expand/collapse), kept as its own
   generic component rather than reusing .faq-item directly since that
   class is scoped to read as "frequently asked questions" in markup. */
.collapsible-list { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.collapsible-item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition);
}
.collapsible-item[open] { border-color: var(--accent-primary); }
.collapsible-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
  user-select: none;
  gap: 16px;
}
.collapsible-item summary::-webkit-details-marker { display: none; }
.collapsible-item summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--accent-primary);
  flex-shrink: 0;
  transition: transform var(--transition);
}
.collapsible-item[open] summary::after { transform: rotate(45deg); }
.collapsible-item summary:hover { color: var(--accent-primary); }
.collapsible-body {
  padding: 4px 20px 20px;
  border-top: 1px solid var(--border-subtle);
}
.collapsible-body .form-message:first-child { margin-top: 16px; }

/* Separates two distinct sub-concerns sharing one collapsible card (e.g.
   Subscription + Account credit) without splitting them into two cards. */
.collapsible-divider { height: 1px; background: var(--border-subtle); margin: 28px 0 20px; }
.account-subsection-heading {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.account-muted-text { color: var(--text-muted); font-size: 0.9rem; }
.account-spaced-bottom { margin-bottom: 16px; }

.token-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}
/* min-width: 0 on the actual flex child (.token-row-info, not the nested
   label) lets it shrink below its content's natural width — without it, a
   long unbreakable string pushes the row wider than its container instead
   of wrapping. Setting it only on the nested .token-row-label wouldn't
   constrain the outer flex item's own sizing. */
.token-row-info { min-width: 0; }
.token-row-label { font-weight: 600; overflow-wrap: break-word; }
.token-row-meta  { font-size: 14px; color: var(--text-muted); }
.token-row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Inline rename input — same tokens as .form-group input, sized to sit
   inline in a token-row instead of as a full-width block field. */
.rename-input {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  font-family: var(--font);
  font-size: 0.95rem;
  color: var(--text-primary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.rename-input:focus {
  outline: none;
  border-color: var(--accent-blue);
}

.twofa-secret {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  word-break: break-all;
  color: var(--accent-green);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.twofa-recovery-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--text-primary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 16px;
}

.pairing-code-display {
  font-family: var(--font-mono);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--accent-green);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 24px;
  margin: 24px 0 12px;
}

/* ============================================================
   LEGAL / CONTENT PAGES (terms, privacy)
   ============================================================ */

.content-wide   { max-width: 860px; margin: 0 auto; }
.content-padded { padding: 60px 0; }

.doc-meta {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 14px;
  margin-bottom: 32px;
}

.content-main {
  font-size: 1.05rem;
  line-height: 1.8;
}

.content-main h3 {
  margin-top: 32px;
  margin-bottom: 12px;
  color: var(--accent-primary);
}

.content-main p  { margin-bottom: 16px; }
.content-main ul { margin: 0 0 16px 20px; }
.content-main li { margin-bottom: 8px; }

.content-main a {
  color: var(--accent-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14px;
}

.data-table tr { border-bottom: 1px solid var(--bg-tertiary); }
.data-table th { text-align: left; padding: 10px 12px; color: var(--accent-primary); }
.data-table td { padding: 10px 12px; }

/* ============================================================
   404 PAGE
   ============================================================ */

.error-terminal {
  max-width: 700px;
  margin: 80px auto;
  padding: 48px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--accent-red);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
}

.error-terminal h1    { color: var(--accent-red); font-size: 36px; margin-bottom: 24px; }
.error-terminal p     { color: var(--text-secondary); margin-bottom: 12px; font-size: 14px; }
.error-terminal a     { color: var(--accent-blue); }
.error-title          { color: var(--text-primary); font-family: var(--font-mono); font-size: 22px; margin-bottom: 32px; }
.error-path           { color: var(--accent-primary); }
.error-trace          { color: var(--text-muted); }
.text-red             { color: var(--accent-red); }
.error-actions        { margin-top: 32px; display: flex; gap: 16px; }

.pairing-expiry {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* ============================================================
   DISABLED BUTTONS — no override existed anywhere; a disabled
   .btn-primary previously fell back to whatever the browser
   default happened to render, inconsistent across engines.
   ============================================================ */

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   CUSTOM CHECKBOX — the native checkbox had zero styling, so it
   rendered as a stark OS-default square against the dark theme.
   appearance:none + a hand-drawn checkmark keeps it consistent
   with the rest of the site's fully custom component language.
   ============================================================ */

.checkbox-custom {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-hover);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: background var(--transition), border-color var(--transition);
}

.checkbox-custom:hover   { border-color: var(--accent-primary); }
.checkbox-custom:checked { background: var(--accent-primary); border-color: var(--accent-primary); }
.checkbox-custom:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkbox-custom:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

/* ============================================================
   FAQ ACCORDION — ported from multiuniversal.com's .faq-list
   exactly (native <details>/<summary>, no JS needed).
   ============================================================ */

.faq-list { max-width: 800px; margin: 40px auto 0; }

.faq-item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color var(--transition);
}

.faq-item[open] { border-color: var(--accent-primary); }

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
  user-select: none;
  gap: 16px;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--accent-primary);
  flex-shrink: 0;
  transition: transform var(--transition);
}

.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--accent-primary); }

.faq-answer {
  padding: 16px 24px 20px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.75;
  border-top: 1px solid var(--border-subtle);
}

/* ============================================================
   PRICING CARD — a single, standalone hero card for the one
   €1000/mo plan. Deliberately its own component rather than a
   reused .solution-card: that class is a grid-cell built for
   many-cards-at-a-glance catalog pages (see multiuniversal.com's
   own pricing.php) and looks thin/lost carrying a page alone.
   ============================================================ */

.pricing-card {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  padding: 48px 40px;
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 48px rgba(238, 61, 67, 0.10);
}

.pricing-plan-name {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-primary);
  text-align: center;
  margin-bottom: 18px;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-bottom: 20px;
}

.pricing-price-amount { font-size: 3.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); }
.pricing-price-period { font-size: 1.05rem; color: var(--text-muted); }

.subscription-period-text { text-align: center; }
.subscription-period-text.is-renewing { color: var(--accent-green); }

.subscription-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 24px;
  margin-top: 12px;
}

/* De-emphasized action, e.g. "Cancel subscription" — a bordered .btn-ghost
   box gives it the same visual weight as the neutral/primary actions next
   to it, which reads wrong for the one action here that ends the
   subscription. A plain underlined text button signals "secondary,
   available if you need it" instead of competing for attention. */
.btn-subtle {
  background: none;
  border: none;
  color: var(--text-muted);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-left: 4px;
  padding-right: 4px;
}
.btn-subtle:hover {
  background: none;
  color: var(--accent-primary-hover);
}

.pricing-desc {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 28px;
}

.pricing-beta-notice {
  text-align: left;
  background: rgba(245, 135, 31, 0.08);
  border: 1px solid rgba(245, 135, 31, 0.35);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 28px;
}
.pricing-beta-notice p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.pricing-beta-notice p + p { margin-top: 8px; }
.pricing-beta-notice strong { color: var(--accent-orange); }

.pricing-feature-list {
  text-align: left;
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pricing-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.pricing-feature-list li::before {
  content: '\2713';
  flex-shrink: 0;
  color: var(--accent-green);
  font-weight: 700;
}

.pricing-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 20px;
  text-align: left;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
}

.pricing-footnote {
  margin-top: 16px;
  font-size: 14px;
  color: var(--text-muted);
}

/* Join-the-waiting-list modal — a real <dialog>, restyled to match the site
   instead of the browser's plain default box. */
/* Centered explicitly rather than relying on the UA's own
   inset:0 + margin:auto dialog centering — that only centers when the
   dialog's own width/height stay auto, and this one sets an explicit
   width, which pins it to the top-left instead. */
.waitlist-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 36px;
  width: calc(100% - 40px);
  max-width: 440px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
.waitlist-modal::backdrop {
  background: rgba(10, 10, 15, 0.75);
  backdrop-filter: blur(4px);
}
.waitlist-modal h2 { font-size: 1.35rem; margin-bottom: 8px; }
.waitlist-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
}
.waitlist-modal-close:hover { color: var(--text-primary); }

@media (max-width: 480px) {
  .waitlist-modal { padding: 28px 22px; }
}

/* Tiered-plans grid (4 cards) — the single-card .pricing-card styling is kept
   as the base; --tier tightens it to fit four abreast. */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 28px 0 36px;
}
.pricing-card--tier {
  max-width: none;
  margin: 0;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.pricing-card--tier .pricing-price-amount { font-size: 2.4rem; }
.pricing-card--tier .subscribe-plan-btn { margin-top: auto; }
.pricing-quota {
  font-size: 14.5px;
  color: var(--text-secondary);
  margin: 0 0 24px;
}
/* Consecutive quota/feature lines on one card sit together as a block —
   only the last keeps the full gap before the Subscribe button. */
.pricing-quota:has(+ .pricing-quota) {
  margin-bottom: 4px;
}

/* One Multiuniversal-logo color per tier (ascending: green, blue, yellow,
   red). Overrides .btn-primary's background by attribute-selector
   specificity; a uniform brightness lift replaces the per-color hover
   tokens most of these accents don't have. */
.subscribe-plan-btn[data-plan="starter"]   { background: var(--accent-green); }
.subscribe-plan-btn[data-plan="pro"]       { background: var(--accent-blue); }
.subscribe-plan-btn[data-plan="max"]       { background: var(--accent-orange); }
.subscribe-plan-btn[data-plan="unlimited"] { background: var(--accent-primary); }
/* The plan title takes its tier's color too — the card is identified by the
   data-plan on its own Subscribe button. */
.pricing-card--tier:has([data-plan="starter"])   .pricing-plan-name { color: var(--accent-green); }
.pricing-card--tier:has([data-plan="pro"])       .pricing-plan-name { color: var(--accent-blue); }
.pricing-card--tier:has([data-plan="max"])       .pricing-plan-name { color: var(--accent-orange); }
.pricing-card--tier:has([data-plan="unlimited"]) .pricing-plan-name { color: var(--accent-primary); }
.subscribe-plan-btn[data-plan]:hover {
  filter: brightness(1.12);
  box-shadow: 0 0 32px rgba(255, 255, 255, 0.08);
}
.pricing-beta-notice--page { max-width: 640px; margin: 0 auto 8px; }
.pricing-shared { max-width: 640px; margin: 0 auto; text-align: center; }
.pricing-shared .pricing-feature-list { margin-bottom: 24px; }

/* Any link that opens a new tab gets the ↗ indicator automatically —
   attribute-based so no per-link class is ever needed. */
a[target="_blank"]::after {
  content: "\2197"; /* ↗ */
  display: inline-block;
  margin-left: 5px;
  font-size: 0.8em;
  line-height: 1;
  opacity: 0.75;
}

/* Team page: founder card */
.team-card {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 40px;
  max-width: 860px;
  margin: 0 auto;
}
.team-photo {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.team-bio h2 { margin-bottom: 4px; }
.team-bio .team-role { color: var(--accent-blue); font-weight: 600; margin-bottom: 16px; }
.team-bio p { color: var(--text-secondary); font-size: 15px; }
.team-links { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
@media (max-width: 768px) {
  .team-card { flex-direction: column; align-items: center; text-align: center; padding: 28px; }
  .team-links { justify-content: center; }
}

/* Account page: weekly usage bar */
.usage-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--border-hover);
  overflow: hidden;
  margin: 6px 0 4px;
}
.usage-bar-fill {
  /* Empty until checkout.js sets the real percentage (via the CSSOM, which
     CSP allows — an inline style="" attribute here would be discarded by
     style-src 'self' and the div would default to full width). */
  width: 0;
  height: 100%;
  border-radius: 4px;
  background: var(--accent-green);
  transition: width 0.3s ease;
}
.usage-bar-fill.is-high { background: var(--accent-orange); }
.usage-bar-fill.is-full { background: var(--accent-primary); }

.plan-switch-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

/* Account page: the renewal line — "Renews/Ends on ⟨date⟩" and the
   auto-renew switch together on one line (the switch IS the cancel control
   under internal billing: off = the subscription ends at the paid date). */
.subscription-period-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  /* A full line of air before the action buttons below — overrides the
     tighter default of .account-spaced-bottom. */
  margin-bottom: 28px;
}
.subscription-period-row .subscription-period-text { margin: 0; }

.autorenew-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.autorenew-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.autorenew-slider {
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: var(--border-hover);
  position: relative;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.autorenew-slider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.2s ease, background 0.2s ease;
}
.autorenew-toggle input:checked + .autorenew-slider {
  background: var(--accent-green);
}
.autorenew-toggle input:checked + .autorenew-slider::after {
  transform: translateX(18px);
  background: #ffffff;
}
.autorenew-toggle input:disabled + .autorenew-slider {
  opacity: 0.5;
}

@media (max-width: 560px) {
  .pricing-card { padding: 40px 24px; }
  .pricing-price-amount { font-size: 2.6rem; }
  .pricing-card--tier .pricing-price-amount { font-size: 2.2rem; }
}