/* QXR Software — Redesign 2026 */
/* Brand colors: #44276e #2f3b9e #5081d1 #7164b5 #c6c6c6 */

:root {
  --qxr-ink:      #0b0a12;
  --qxr-deep:     #110e1e;
  --qxr-plum:     #1a1430;
  --qxr-surface:  #211a38;
  --qxr-violet:   #44276e;
  --qxr-indigo:   #2f3b9e;
  --qxr-blue:     #5081d1;
  --qxr-lavender: #7164b5;
  --qxr-silver:   #c6c6c6;
  --qxr-fog:      #9b97b8;
  --qxr-ghost:    #e8e6f4;
  --qxr-white:    #ffffff;
  --qxr-lime:     #b8f045;
  --qxr-teal:     #1db89e;
  --qxr-warn:     #c9a227;
  --qxr-danger:   #c23a3a;
  --qxr-success:  #2d9d5c;

  --border-subtle: rgba(113, 100, 181, 0.15);
  --border-mid:    rgba(113, 100, 181, 0.3);
  --border-strong: rgba(113, 100, 181, 0.5);

  --font-display: 'DM Serif Display', Georgia, serif;
  --font-sans:    'Instrument Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Fira Mono', monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;

  --max-w: 1200px;
  --nav-h: 72px;
}

/* legacy aliases so old class names still resolve */
:root {
  --color-bg: var(--qxr-ink);
  --color-bg-elevated: var(--qxr-deep);
  --color-surface: var(--qxr-plum);
  --color-surface-2: var(--qxr-surface);
  --color-text: var(--qxr-ghost);
  --color-text-muted: var(--qxr-fog);
  --color-border: var(--border-subtle);
  --color-border-strong: var(--border-mid);
  --color-accent: var(--qxr-lavender);
  --color-accent-hover: #a89dff;
  --color-accent-glow: rgba(113,100,181,0.35);
  --color-green: var(--qxr-success);
  --color-green-muted: #1f6d41;
  --color-teal: var(--qxr-teal);
  --color-warm: var(--qxr-warn);
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-sans: 'Instrument Sans', system-ui, sans-serif;
  --max-content: var(--max-w);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem;
  --space-4: 1.5rem;  --space-5: 2.5rem; --space-6: 4rem;
  --z-header: 200;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

body {
  background: var(--qxr-ink);
  color: var(--qxr-ghost);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(68,39,110,0.28) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 5%, rgba(47,59,158,0.15) 0%, transparent 45%);
  background-attachment: fixed;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  line-height: 1.12;
}

/* SKIP LINK */
.skip-link {
  position: absolute; left: -9999px; top: -9999px;
  padding: 0.5rem 1rem;
  background: var(--qxr-lime); color: #111;
  border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; z-index: 9999;
}
.skip-link:focus { left: 1rem; top: 1rem; }
.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; }

/* NAV */
.site-header {
  position: sticky; top: 0; z-index: 200;
  height: var(--nav-h);
  background: rgba(11, 10, 18, 0.9);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header__inner {
  max-width: var(--max-w); margin: 0 auto; height: 100%;
  padding: 0 2.5rem;
  display: flex; align-items: center; gap: 1.5rem;
}
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.logo__img { height: 52px; width: auto; object-fit: contain; }
.logo__text { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.06em; color: var(--qxr-ghost); }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 2rem; list-style: none; }
.site-nav a { font-size: 14px; color: var(--qxr-fog); transition: color 0.18s; padding-bottom: 2px; border-bottom: 1px solid transparent; }
.site-nav a:hover { color: var(--qxr-ghost); }
.site-nav a[aria-current="page"] { color: var(--qxr-ghost); border-bottom-color: var(--qxr-lavender); }

.nav-toggle { display: none; background: none; border: 1px solid var(--border-subtle); color: var(--qxr-ghost); font-size: 13px; font-weight: 500; padding: 0.4rem 0.75rem; border-radius: var(--radius-sm); }
.nav-cta { display: flex; gap: 0.75rem; margin-left: 1rem; }
.nav-mobile-actions { display: contents; }
.btn.nav-mobile-signin { display: none; }

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  padding: 0.55rem 1.2rem; border-radius: var(--radius-md);
  border: none; cursor: pointer; transition: all 0.18s;
  text-decoration: none; white-space: nowrap; line-height: 1.4;
}
.btn--accent { background: var(--qxr-indigo); color: #fff; box-shadow: 0 0 0 1px rgba(80,129,209,0.25); }
.btn--accent:hover { background: #3a48b5; transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--qxr-ghost); border: 1px solid var(--border-mid); }
.btn--ghost:hover { background: rgba(113,100,181,0.1); border-color: var(--border-strong); }
.btn--lime { background: var(--qxr-lime); color: #111; font-weight: 600; }
.btn--lime:hover { background: #cdf057; transform: translateY(-1px); }
.btn--danger { background: var(--qxr-danger); color: #fff; border: none; }
.btn--danger:hover { background: #a82f2f; }
.btn--sm { font-size: 12px; padding: 0.3rem 0.75rem; }
.btn--lg { font-size: 15px; padding: 0.75rem 1.75rem; border-radius: var(--radius-lg); }

/* PAGE HERO */
.page-hero { padding: calc(var(--nav-h) + 3rem) 2.5rem 3rem; max-width: var(--max-w); margin: 0 auto; }
.page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); color: var(--qxr-ghost); margin-bottom: 0.75rem; }
.hero__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--qxr-teal); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 8px; }
.hero__eyebrow::before, .hero__eyebrow::after { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--qxr-teal); opacity: 0.5; }
.hero__lead, .page-lead { font-size: 1rem; color: var(--qxr-fog); line-height: 1.7; max-width: 560px; }

/* PAGE BODY */
.page-body { padding: 2.5rem 0 5rem; }
.page-body__inner { max-width: 52rem; margin: 0 auto; padding: 0 2.5rem; }
.page-body__inner--wide { max-width: var(--max-w); }

/* SECTION */
.section { padding: 5rem 2.5rem; max-width: var(--max-w); margin: 0 auto; }
.section__inner { max-width: var(--max-w); margin: 0 auto; }
.section__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--qxr-lavender); display: block; margin-bottom: 0.5rem; }
.section__title { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 2.5rem); color: var(--qxr-ghost); margin-bottom: 0.75rem; }
.section__lead { font-size: 1rem; color: var(--qxr-fog); max-width: 500px; line-height: 1.7; }

/* CARDS */
.card { background: var(--qxr-deep); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1.5rem; transition: border-color 0.2s, transform 0.2s; }
.card:hover { border-color: var(--border-mid); }
.card--accent { border-color: rgba(80,129,209,0.25); background: rgba(47,59,158,0.1); }
.card--support { background: rgba(29,184,158,0.07); border-color: rgba(29,184,158,0.2); }

/* FORMS */
.form-stack { display: flex; flex-direction: column; gap: 1.5rem; }
.field label { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--qxr-fog); }
.field input, .field select, .field textarea { width: 100%; padding: 0.6rem 0.85rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--qxr-plum); color: var(--qxr-ghost); font: inherit; font-size: 14px; transition: border-color 0.18s, box-shadow 0.18s; }
.field input[type="radio"],
.field input[type="checkbox"] { width: auto; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--qxr-lavender); box-shadow: 0 0 0 3px rgba(113,100,181,0.18); }
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.field--check label { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; cursor: pointer; color: var(--qxr-ghost); }
.field--check input { width: auto; accent-color: var(--qxr-lavender); margin-top: 2px; }
.field-hint { font-size: 12px; color: var(--qxr-fog); margin-top: 4px; }
.form-note { font-size: 12px; color: var(--qxr-fog); }
.form-stack--wide { max-width: 36rem; }
.form-stack--full { max-width: none; }

/* TABLES */
.data-table-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--qxr-deep); margin: 1rem 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { background: var(--qxr-plum); color: var(--qxr-ghost); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border-subtle); text-align: left; }
.data-table td { padding: 0.65rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--qxr-fog); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(113,100,181,0.05); color: var(--qxr-ghost); }
.data-table input, .data-table select { padding: 0.3rem 0.5rem; font: inherit; font-size: 13px; background: var(--qxr-surface); color: var(--qxr-ghost); border: 1px solid var(--border-subtle); border-radius: 4px; width: 100%; max-width: 14rem; }

/* BADGES */
.badge { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; font-weight: 500; }
.badge--active { background: rgba(29,184,158,0.15); color: var(--qxr-teal); border: 1px solid rgba(29,184,158,0.3); }
.badge--warn   { background: rgba(201,162,39,0.15);  color: var(--qxr-warn); border: 1px solid rgba(201,162,39,0.3); }
.badge--danger { background: rgba(194,58,58,0.15);   color: #e06060; border: 1px solid rgba(194,58,58,0.3); }
.badge--muted  { background: rgba(113,100,181,0.12); color: var(--qxr-lavender); border: 1px solid var(--border-subtle); }

/* STATS */
.stat-row { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; }
.stat { padding: 1rem 1.5rem; background: var(--qxr-deep); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); min-width: 100px; flex: 1; }
.stat__value { display: block; font-family: var(--font-display); font-size: 2rem; color: var(--qxr-ghost); line-height: 1; margin-bottom: 4px; }
.stat__label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--qxr-fog); }

/* PRODUCT GRID */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; }
.product-card { background: var(--qxr-deep); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; transition: border-color 0.2s, transform 0.2s; }
.product-card:hover { border-color: var(--border-mid); transform: translateY(-2px); }
.product-card h2, .product-card .ticket-form__title { font-size: 1.1rem; color: var(--qxr-ghost); }
.price { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 500; color: var(--qxr-ghost); }
.price__suffix { font-size: 0.8rem; color: var(--qxr-fog); font-weight: 400; }
.product-card--spaced { margin-bottom: 1rem; }

/* MISC */
.divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--border-subtle), transparent); margin: 2.5rem 0; }
.content-block { margin-bottom: 2.5rem; }
.content-block h2 { font-size: 1.2rem; color: var(--qxr-ghost); margin-bottom: 1rem; }
.content-block h3 { font-size: 1.05rem; color: var(--qxr-ghost); margin: 1.5rem 0 0.75rem; }
.content-block p { color: var(--qxr-fog); margin-bottom: 1rem; line-height: 1.75; }
.layout-split { display: grid; grid-template-columns: 1fr 2fr; gap: 2.5rem; align-items: start; }
.demo-banner { padding: 1rem 1.5rem; background: rgba(201,162,39,0.1); border: 1px solid rgba(201,162,39,0.3); border-radius: var(--radius-md); color: var(--qxr-ghost); font-size: 14px; margin-bottom: 1.5rem; }
.demo-banner strong { color: var(--qxr-warn); }
.demo-banner--hero { max-width: 42rem; }
.section-heading-spaced { margin-top: 2.5rem; }
.heading-sub { margin-top: 1.5rem; }
.page-body__follow { margin-top: 2.5rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

/* PROGRESS */
.progress { height: 6px; border-radius: 3px; background: var(--qxr-plum); overflow: hidden; margin: 8px 0; }
.progress__bar { height: 100%; width: 67%; border-radius: 3px; background: linear-gradient(90deg, var(--qxr-indigo), var(--qxr-blue)); }

/* FAQ */
.faq details { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--qxr-deep); padding: 0 1rem; margin-bottom: 0.5rem; }
.faq summary { cursor: pointer; padding: 1rem 0; font-weight: 600; color: var(--qxr-ghost); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 18px; color: var(--qxr-lavender); }
.faq details[open] summary::after { content: '−'; }
.faq details[open] summary { border-bottom: 1px solid var(--border-subtle); padding-bottom: 1rem; margin-bottom: 0.5rem; }
.faq details p { color: var(--qxr-fog); font-size: 14px; padding-bottom: 1rem; }

/* TEAM */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; }
.team-card { padding: 1.5rem; background: var(--qxr-deep); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.team-card strong { display: block; color: var(--qxr-ghost); margin-bottom: 4px; }

/* LEGAL */
.legal h2 { font-size: 1.1rem; color: var(--qxr-ghost); margin: 2.5rem 0 1rem; }
.legal h2:first-child { margin-top: 0; }
.legal p { color: var(--qxr-fog); margin-bottom: 1rem; font-size: 15px; line-height: 1.75; }

/* SUITE */
.suite-hero-title { font-size: clamp(2rem, 4vw, 3rem); color: var(--qxr-ghost); }
.suite-cta { background: linear-gradient(135deg, rgba(47,59,158,0.18), rgba(68,39,110,0.12)); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: 2.5rem; }
.suite-cta .section__inner { max-width: var(--max-w); margin: 0 auto; }
.suite-cta__line { font-family: var(--font-display); font-size: 1.5rem; color: var(--qxr-ghost); }
.suite-cta__sub { color: var(--qxr-fog); font-size: 15px; }
.suite-swimlane { margin-bottom: 4rem; }
.suite-swimlane__h { font-size: 1.2rem; color: var(--qxr-ghost); margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-subtle); }
.suite-band { background: var(--qxr-plum); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 0.4rem 0.85rem; display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--qxr-lavender); margin-bottom: 1.5rem; }
.suite-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.suite-card { background: var(--qxr-deep); padding: 1rem; display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; transition: background 0.15s; }
.suite-card:hover { background: var(--qxr-plum); }
.suite-card__tag { font-family: var(--font-mono); font-size: 11px; font-weight: 400; opacity: 0.7; }
.suite-card__tag--dark { opacity: 0.55; }
.suite-grid--trials { grid-template-columns: repeat(4, 1fr); }
.suite-trial-spotlight { background: var(--qxr-deep); border: 1px solid var(--border-mid); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.5rem; }
.suite-trial-spotlight__controls { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.suite-trial-spotlight__meta { font-family: var(--font-mono); font-size: 11px; color: var(--qxr-lavender); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; }
.suite-trial-spotlight h3 { font-size: 1.2rem; color: var(--qxr-ghost); margin-bottom: 1rem; }
.suite-trial-spotlight__dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: 13px; }
.suite-trial-spotlight__dl dt { color: var(--qxr-fog); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; align-self: center; }
.suite-trial-spotlight__dl dd { color: var(--qxr-ghost); }
.suite-pricing-note { font-size: 13px; color: var(--qxr-fog); margin-top: 1rem; }
.suite-swimlane--lx {}
.suite-swimlane--synth {}
.suite-swimlane--profx {}

/* ITV THEME */
body.theme-itv { --qxr-ink: #0f0a14; --qxr-deep: #141020; }
.itv-hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.itv-hero__logo { width: 100%; max-width: 520px; margin: 0 auto; border-radius: var(--radius-lg); }
.itv-hero__lead { max-width: 520px; }

/* FIELDSET */
.fieldset-tiers { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 1rem; margin: 0; }
.fieldset-tiers__legend { padding: 0 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--qxr-ghost); text-transform: uppercase; letter-spacing: 0.06em; }

/* TICKET FORM */
.ticket-form__title { margin-top: 0; color: var(--qxr-ghost); font-size: 1.2rem; font-family: var(--font-display); letter-spacing: -0.02em; }

/* FOOTER */
.site-footer { border-top: 1px solid var(--border-subtle); padding: 1.5rem 2.5rem; font-size: 13px; color: var(--qxr-fog); }
.site-footer__inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.site-footer a { color: var(--qxr-fog); transition: color 0.15s; }
.site-footer a:hover { color: var(--qxr-ghost); }

/* PRIVACY NOTICE */
.qxr-privacy-notice {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 950;
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  background: rgba(17, 14, 30, .96);
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
  color: var(--qxr-fog);
}
.qxr-privacy-notice__body {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: 13px;
  line-height: 1.5;
}
.qxr-privacy-notice__body strong {
  color: var(--qxr-ghost);
}
.qxr-privacy-notice__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

/* HERO STATS */
.hero__stats { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-subtle); }
.hero__stats .stat { background: rgba(255,255,255,0.03); }

/* BANNER */
.banner-fundraise { background: linear-gradient(135deg, rgba(47,59,158,0.18), rgba(68,39,110,0.1)); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.banner-fundraise .section__inner { max-width: var(--max-w); margin: 0 auto; padding: 2.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; }
.contact-line .section__inner { max-width: var(--max-w); margin: 0 auto; padding: 1.5rem 2.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; border-top: 1px solid var(--border-subtle); }
.tooling .section__inner { max-width: var(--max-w); margin: 0 auto; padding: 2rem 2.5rem; text-align: center; }
.tooling__strip { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
.tooling__strip span { font-family: var(--font-mono); font-size: 13px; color: var(--qxr-fog); letter-spacing: 0.08em; }

.actions .section__inner { max-width: var(--max-w); margin: 0 auto; padding: 2.5rem; }
.actions__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; }
.actions__cards .card h3 { font-size: 1.15rem; color: var(--qxr-ghost); margin-bottom: 0.5rem; }
.actions__cards .card p { font-size: 14px; color: var(--qxr-fog); margin-bottom: 1rem; }

/* RESPONSIVE */
@media (max-width: 900px) {
  .layout-split { grid-template-columns: 1fr; }
  .suite-grid--trials { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .site-header__inner { gap: .5rem; padding: 0 1rem; }
  .nav-mobile-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
    min-width: 0;
  }
  .nav-toggle { display: flex; flex: 0 0 auto; margin-left: 0; }
  .btn.nav-mobile-signin {
    display: inline-flex;
    flex: 0 1 auto;
    justify-content: center;
    margin-left: 0;
    max-width: min(42vw, 11rem);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-cta { display: none; }
  .site-nav {
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: rgba(11,10,18,0.98); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
    max-height: 0; overflow: hidden; transition: max-height 0.25s ease;
  }
  .site-nav.is-open { max-height: 360px; }
  .site-nav ul { flex-direction: column; padding: 1rem; gap: 0; }
  .site-nav li a { display: block; padding: 0.75rem 0; border-bottom: 1px solid var(--border-subtle); }
  .page-hero { padding: calc(var(--nav-h) + 2rem) 1rem 2rem; }
  .page-body__inner { padding: 0 1rem; }
  .section { padding: 3rem 1rem; }
  .site-footer { padding: 1.5rem 1rem; }
  .qxr-privacy-notice {
    flex-direction: column;
    align-items: stretch;
    left: .75rem;
    right: .75rem;
    bottom: .75rem;
  }
  .qxr-privacy-notice__actions {
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .suite-grid--trials { grid-template-columns: repeat(2, 1fr); }
}

/* ── CART NAV BUTTON ── */
.nav-cart{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-sans);font-size:13px;font-weight:500;
  padding:.4rem .85rem;border-radius:var(--radius-md);
  border:1px solid var(--border-mid);color:var(--qxr-ghost);
  background:transparent;cursor:pointer;transition:all .18s;
  text-decoration:none;white-space:nowrap;
}
.nav-cart:hover{background:rgba(113,100,181,.12);border-color:var(--border-strong)}
.nav-cart__count{
  position:absolute;top:-7px;right:-7px;
  min-width:18px;height:18px;border-radius:9px;
  background:var(--qxr-indigo);color:#fff;
  font-size:10px;font-weight:600;font-family:var(--font-mono);
  display:flex;align-items:center;justify-content:center;
  padding:0 4px;line-height:1;
  transition:transform .2s;
}
.nav-cart__count.bump{transform:scale(1.35)}
.nav-cart__count.hidden{display:none}

/* ── CART DRAWER ── */
#cart-drawer{
  position:fixed;top:var(--nav-h);right:0;bottom:0;z-index:300;
  width:360px;max-width:100vw;
  background:var(--qxr-deep);
  border-left:1px solid var(--border-subtle);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .28s cubic-bezier(.22,1,.36,1);
  box-shadow:-8px 0 32px rgba(0,0,0,.45);
}
#cart-drawer.open{transform:translateX(0)}
.cart-drawer__head{
  padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-subtle);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.cart-drawer__head h2{font-size:1rem;color:var(--qxr-ghost);font-family:var(--font-sans);font-weight:600}
.cart-drawer__close{background:none;border:1px solid var(--border-subtle);color:var(--qxr-fog);width:30px;height:30px;border-radius:6px;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.cart-drawer__close:hover{background:rgba(113,100,181,.15);color:var(--qxr-ghost)}
.cart-drawer__body{flex:1;overflow-y:auto;padding:1rem 1.5rem}
.cart-drawer__empty{text-align:center;padding:3rem 1rem;color:var(--qxr-fog);font-size:14px}
.cart-drawer__empty p{margin-top:.5rem;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em}
.cart-item{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 0;border-bottom:1px solid var(--border-subtle)}
.cart-item:last-child{border-bottom:none}
.cart-item__swatch{width:36px;height:36px;border-radius:7px;flex-shrink:0;background:rgba(47,59,158,.3);border:1px solid rgba(80,129,209,.2);display:flex;align-items:center;justify-content:center;font-size:14px}
.cart-item__info{flex:1;min-width:0}
.cart-item__name{font-size:13px;font-weight:500;color:var(--qxr-ghost);line-height:1.35;margin-bottom:3px}
.cart-item__tier{font-family:var(--font-mono);font-size:11px;color:var(--qxr-fog)}
.cart-item__price{font-family:var(--font-mono);font-size:13px;color:var(--qxr-ghost);flex-shrink:0;text-align:right}
.cart-item__remove{background:none;border:none;color:var(--qxr-fog);font-size:16px;cursor:pointer;padding:0 4px;line-height:1;transition:color .15s;flex-shrink:0}
.cart-item__remove:hover{color:#e06060}
.cart-drawer__foot{padding:1.25rem 1.5rem;border-top:1px solid var(--border-subtle);flex-shrink:0}
.cart-drawer__total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1rem;font-size:15px;color:var(--qxr-ghost)}
.cart-drawer__total span:first-child{color:var(--qxr-fog);font-size:13px}
.cart-drawer__total .total-amt{font-family:var(--font-mono);font-weight:500;font-size:1.1rem}
.cart-drawer__note{font-size:11px;color:var(--qxr-fog);margin-top:.6rem;text-align:center;font-family:var(--font-mono)}

/* Cart overlay backdrop */
#cart-backdrop{position:fixed;inset:0;z-index:299;background:rgba(7,6,14,.5);backdrop-filter:blur(4px);display:none}
#cart-backdrop.open{display:block}

/* Toast */
.qxr-toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--qxr-plum);border:1px solid var(--border-mid);border-radius:var(--radius-md);padding:.7rem 1.2rem;font-size:13px;color:var(--qxr-ghost);box-shadow:0 8px 32px rgba(0,0,0,.4);transform:translateY(120%);transition:transform .28s;z-index:500;max-width:300px;pointer-events:none}
.qxr-toast.show{transform:translateY(0)}
.qxr-toast:not(.show){display:none}

@media(max-width:768px){
  #cart-drawer{width:100vw;border-left:none}
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE / RESPONSIVE — Comprehensive pass
   Target: 320px–767px (phones), 768px–1023px (tablets)
   Touch target minimum: 44px (WCAG 2.5.5 / Apple HIG / Android)
   ═══════════════════════════════════════════════════════════════ */

/* ── Touch targets: ensure all interactive elements are 44px min ── */
@media (max-width: 1024px) {
  .btn        { min-height: 44px; padding: 0.6rem 1.2rem; }
  .btn--sm    { min-height: 40px; padding: 0.5rem 0.9rem; font-size: 13px; }
  .btn--lg    { min-height: 52px; padding: 0.85rem 2rem; }
  .nav-cart   { min-height: 44px; padding: 0.5rem 0.9rem; }

  /* Ensure field inputs are easy to tap */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select,
  textarea { min-height: 44px; font-size: 16px; /* prevents iOS zoom */ }
}

/* ── Tables: horizontal scroll on small screens ─────────────────── */
@media (max-width: 768px) {
  .data-table-wrap  { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table       { min-width: 520px; font-size: 13px; }
  .data-table th,
  .data-table td    { padding: 0.5rem 0.6rem; }

  /* catalog-table (audio.html) */
  .catalog-table          { min-width: 600px; font-size: 12px; }
  .catalog-table th,
  .catalog-table td       { padding: 0.5rem 0.6rem; }

  /* planet table (ITV) */
  .planet-table           { min-width: 480px; font-size: 12px; }
}

/* ── stat-row: horizontal scroll or 2-col grid ──────────────────── */
@media (max-width: 768px) {
  .stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .stat     { padding: .75rem; }
  .stat__value { font-size: 1.5rem; }
}

/* ── Stats band (index.html) ────────────────────────────────────── */
@media (max-width: 480px) {
  .stats-band { grid-template-columns: 1fr 1fr !important; }
  .sbi        { border-right: none !important; border-bottom: 1px solid var(--border-subtle); padding: 1.25rem; }
}

/* ── Form stacks: full-width on mobile ──────────────────────────── */
@media (max-width: 768px) {
  .form-stack,
  .form-stack--wide,
  .form-stack--full { gap: .75rem; }
  .form-stack .field,
  .form-stack--wide .field { width: 100%; }
  .field-row { flex-direction: column; }
}

/* ── Product / content cards ────────────────────────────────────── */
@media (max-width: 768px) {
  .product-card { padding: 1.25rem; }
  .quick-cards  { grid-template-columns: 1fr !important; }
  .card-grid    { grid-template-columns: 1fr !important; }
}

/* ── Hero title sizing ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .hero-title { font-size: 2.2rem !important; letter-spacing: -.02em; }
  .hero__lead { font-size: 1rem; }
  .itv-hero   { padding: calc(var(--nav-h) + 2rem) 1rem 1.5rem; }
}

/* ── Page hero padding ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .page-hero         { padding: calc(var(--nav-h) + 1.5rem) 1rem 1.5rem; }
  .page-hero h1      { font-size: 1.8rem; }
  .page-lead         { font-size: .95rem; }
  .hero__eyebrow     { font-size: 9px; }
}

/* ── ITV stats bar ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  .itv-stats         { grid-template-columns: repeat(2, 1fr) !important; }
  .itv-stat          { border-right: none !important; border-bottom: 1px solid var(--border-subtle); }
  .itv-stat:nth-child(odd)  { border-right: 1px solid var(--border-subtle) !important; }
  .itv-stat:last-child,
  .itv-stat:nth-last-child(2):nth-child(odd) { border-bottom: none; }
}

/* ── ITV gallery ────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
}
@media (max-width: 400px) {
  .gallery-grid { grid-template-columns: 1fr; }
}

/* ── Store page: commerce-cart collapses on mobile ──────────────── */
/* On mobile, the sticky cart sidebar hides; nav-drawer cart is the UX */
@media (max-width: 959px) {
  .commerce-layout { padding: var(--space-3) 1rem var(--space-5); }
  .commerce-cart   { display: none; } /* hidden on mobile — use nav cart drawer */
  .commerce-grid   { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
}
@media (max-width: 480px) {
  .commerce-grid      { grid-template-columns: 1fr; }
  .commerce-toolbar   { padding: var(--space-3) 1rem; }
  .commerce-filters   { gap: .35rem; }
  .commerce-filter    { padding: .4rem .7rem; font-size: .8rem; }
  .commerce-hero h1   { font-size: 1.6rem; }
  .commerce-hero__lead{ font-size: .95rem; }
}

/* ── Axion suite page ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .pricing-options    { grid-template-columns: 1fr !important; }
  .detail-body        { grid-template-columns: 1fr !important; }
  .suite-card         { padding: 1rem; }
}

/* ── Footer on mobile ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .site-footer__inner { flex-direction: column; gap: .5rem; text-align: center; }
}

/* ── Mobile bottom nav (admin & tester pages) ───────────────────── */
/* Injected by those pages' own <style> blocks */

/* ── Cart drawer already 100vw on mobile (in earlier rule) ──────── */
/* Confirm touch-close works via backdrop */
#cart-backdrop { cursor: pointer; }

/* ── Lightbox on mobile ─────────────────────────────────────────── */
@media (max-width: 600px) {
  #itv-lightbox .lb-wrap { max-width: 98vw; }
  #itv-lightbox .lb-img  { max-height: 70svh; }
  #itv-lightbox .lb-nav button { padding: .55rem .9rem; }
}

/* ── Tester/Admin page: mobile-specific banner ──────────────────── */
.mobile-portal-notice {
  display: none;
  background: rgba(201,162,39,.1);
  border: 1px solid rgba(201,162,39,.25);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin: 1rem;
  text-align: center;
}
.mobile-portal-notice h2 {
  font-family: var(--font-sans); font-size: 1rem;
  font-weight: 600; color: var(--qxr-warn); margin-bottom: .5rem;
}
.mobile-portal-notice p {
  font-size: 14px; color: var(--qxr-fog); line-height: 1.65; margin-bottom: .75rem;
}
@media (max-width: 768px) {
  .mobile-portal-notice { display: block; }
}

/* ── Admin server-status cards ──────────────────────────────────── */
.server-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .75rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 600px) {
  .server-status-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
  .server-status-grid { grid-template-columns: 1fr; }
}
.srv-card {
  background: var(--qxr-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: .9rem 1.1rem;
  display: flex; align-items: center; gap: .75rem;
  transition: border-color .2s;
}
.srv-card--ok     { border-color: rgba(29,184,158,.25); background: rgba(29,184,158,.04); }
.srv-card--warn   { border-color: rgba(201,162,39,.25); background: rgba(201,162,39,.04); }
.srv-card--error  { border-color: rgba(194,58,58,.25);  background: rgba(194,58,58,.04);  }
.srv-card--pending{ border-color: rgba(113,100,181,.2); }
.srv-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.srv-dot--ok      { background: var(--qxr-teal);    box-shadow: 0 0 6px rgba(29,184,158,.5); }
.srv-dot--warn    { background: var(--qxr-warn);    box-shadow: 0 0 6px rgba(201,162,39,.4); }
.srv-dot--error   { background: #e06060;            box-shadow: 0 0 6px rgba(194,58,58,.4);  }
.srv-dot--pending { background: var(--qxr-lavender); animation: srv-pulse 1.5s ease-in-out infinite; }
@keyframes srv-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.srv-info { flex: 1; min-width: 0; }
.srv-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--qxr-fog); }
.srv-value { font-size: 13px; font-weight: 500; color: var(--qxr-ghost); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv-refresh {
  background: none; border: 1px solid var(--border-subtle);
  color: var(--qxr-fog); border-radius: var(--radius-md);
  font-size: 11px; padding: .3rem .6rem; cursor: pointer;
  font-family: var(--font-mono); transition: all .15s; flex-shrink: 0;
}
.srv-refresh:hover { color: var(--qxr-ghost); border-color: var(--border-mid); }

/* ── Mobile bottom navigation bar (admin) ───────────────────────── */
.admin-mobile-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: rgba(10,8,18,.97); backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-subtle);
  padding: .5rem .25rem env(safe-area-inset-bottom, .5rem);
  justify-content: space-around; align-items: center;
}
@media (max-width: 768px) {
  .admin-mobile-nav { display: flex; }
  /* pad the main content so it doesn't hide behind the bar */
  .admin-main { padding-bottom: 80px !important; }
}
.mob-nav-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; color: var(--qxr-fog);
  font-size: 10px; font-family: var(--font-mono); letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer;
  padding: .4rem .5rem; border-radius: var(--radius-md);
  transition: color .15s, background .15s;
  min-width: 52px; min-height: 44px; justify-content: center;
}
.mob-nav-btn .mob-icon { font-size: 20px; line-height: 1; }
.mob-nav-btn.active,
.mob-nav-btn:hover { color: var(--qxr-ghost); background: rgba(113,100,181,.12); }