/* ===========================================================
   RedSpaceMusic — Design System
   Ported from the RedSpaceMusicDesignSystem_9db00e reference
   build: exact color/type/space/radius/shadow/motion tokens,
   exact Button/Badge/StatusPill specs. Editorial dark theme —
   serif display type, hairline grid borders, sharp corners,
   monospace for data and labels.
   =========================================================== */

/* ---- Design tokens ---- */
:root{
  /* Color ramps */
  --red-50:#FFE9EA; --red-100:#FFC7CA; --red-200:#FF9A9F; --red-300:#FB6169; --red-400:#F82F3A;
  --red-500:#F5061A; --red-600:#D6021A; --red-700:#AD0217; --red-800:#800113; --red-900:#52000C;
  --gray-0:#FFFFFF; --gray-25:#F7F7F6; --gray-50:#EDEDEC; --gray-100:#D9D9D8; --gray-200:#B8B8B8;
  --gray-300:#909092; --gray-400:#6B6B6E; --gray-500:#4C4C4F; --gray-600:#333335; --gray-700:#232326;
  --gray-800:#18181B; --gray-850:#131315; --gray-900:#0E0E0F; --gray-950:#0A0A0B;
  --green-500:#2AC46A; --green-700:#17703C;
  --amber-500:#E8A93B; --amber-700:#8A611E;
  --blue-500:#4B9EF0; --blue-700:#2A5D91;
  --teal-500:#2FB8AE; --violet-500:#8C7CF0;

  /* Semantic — dark (default theme for this site) */
  --color-canvas:var(--gray-950);
  --color-surface:var(--gray-900);
  --color-surface-elevated:var(--gray-850);
  --color-card:var(--gray-800);
  --color-border:var(--gray-700);
  --color-border-strong:var(--gray-600);
  --color-text-primary:var(--gray-25);
  --color-text-secondary:var(--gray-200);
  --color-text-muted:var(--gray-400);
  --color-text-disabled:var(--gray-500);
  --color-text-inverse:var(--gray-950);

  --color-brand-primary:var(--red-500);
  --color-brand-primary-hover:var(--red-400);
  --color-brand-primary-active:var(--red-600);
  --color-brand-on-primary:var(--gray-0);

  --color-success:var(--green-500);
  --color-success-bg:color-mix(in oklab, var(--green-500) 16%, transparent);
  --color-warning:var(--amber-500);
  --color-warning-bg:color-mix(in oklab, var(--amber-500) 16%, transparent);
  --color-danger:var(--red-400);
  --color-danger-bg:color-mix(in oklab, var(--red-400) 16%, transparent);
  --color-info:var(--blue-500);
  --color-info-bg:color-mix(in oklab, var(--blue-500) 16%, transparent);

  --color-focus-ring:var(--red-400);
  --status-live:var(--green-500);
  --status-pending:var(--amber-500);
  --status-processing:var(--blue-500);
  --status-rejected:var(--red-400);
  --status-draft:var(--gray-400);

  /* Type */
  --font-display:'Space Grotesk', 'Manrope', -apple-system, sans-serif;
  --font-sans:'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-extrabold:800;

  --title-lg-size:24px; --title-md-size:19px; --title-sm-size:15px;
  --body-lg-size:17px; --body-md-size:15px; --body-sm-size:13px;
  --caption-size:12px; --caption-tracking:0.01em;
  --label-size:12px; --label-tracking:0.08em;
  --button-lg-size:15px; --button-md-size:14px; --button-sm-size:13px;
  --nav-size:14px;
  --data-mono-lg-size:32px; --data-mono-md-size:20px; --data-mono-sm-size:13px; --data-mono-weight:var(--weight-medium);
  --table-header-size:11px;

  /* Space */
  --rsm-section:128px;
  --container-max:1280px;
  --container-narrow:720px;

  /* Radius */
  --radius-xs:2px; --radius-sm:3px; --radius-md:5px; --radius-lg:8px; --radius-full:999px;
  --radius-button:var(--radius-xs);
  --radius-input:var(--radius-xs);
  --radius-card:var(--radius-md);
  --radius-modal:var(--radius-lg);
  --radius-badge:var(--radius-xs);

  /* Shadow / border */
  --shadow-sm:0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:0 4px 12px rgba(0,0,0,0.45);
  --shadow-lg:0 12px 32px rgba(0,0,0,0.5);
  --shadow-xl:0 24px 64px rgba(0,0,0,0.55);
  --shadow-focus:0 0 0 3px color-mix(in oklab, var(--red-400) 45%, transparent);
  --shadow-glow-brand:0 0 24px color-mix(in oklab, var(--red-500) 35%, transparent);
  --border-hairline:1px solid var(--color-border);
  --border-hairline-strong:1px solid var(--color-border-strong);

  /* Motion */
  --duration-instant:80ms; --duration-fast:140ms; --duration-base:200ms; --duration-slow:320ms; --duration-slower:480ms;
  --ease-precision:cubic-bezier(0.2,0,0,1);
  --ease-standard:cubic-bezier(0.4,0,0.2,1);
  --ease-entrance:cubic-bezier(0,0,0.2,1);
  --ease-exit:cubic-bezier(0.4,0,1,1);

  --header-h:72px;
}
@media (prefers-reduced-motion: reduce){
  :root{ --duration-instant:0ms; --duration-fast:0ms; --duration-base:0ms; --duration-slow:0ms; --duration-slower:0ms; }
}

/* ---- Reset / base ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--color-canvas); color:var(--color-text-primary);
  font-family:var(--font-sans); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--color-brand-primary); text-decoration:none; }
a:hover{ color:var(--color-brand-primary-hover); }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--color-brand-primary); color:var(--color-brand-on-primary); }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:var(--weight-bold); line-height:1.1; margin:0 0 16px; letter-spacing:-0.02em; color:var(--color-text-primary); }
h1{ font-size:clamp(2.4rem,5vw,4.2rem); }
h2{ font-size:clamp(1.8rem,3.2vw,2.75rem); }
h3{ font-size:var(--title-lg-size); font-family:var(--font-sans); font-weight:var(--weight-semibold); letter-spacing:0; }
p{ margin:0 0 16px; color:var(--color-text-secondary); font-size:var(--body-md-size); line-height:1.6; }

.wrap{ max-width:var(--container-max); margin:0 auto; padding:0 48px; }
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--color-brand-primary); color:#fff; padding:12px 20px; z-index:200; }
.skip-link:focus{ left:0; }
:focus-visible{ outline:none; box-shadow:var(--shadow-focus); border-radius:var(--radius-xs); }

/* ---- Buttons (ported 1:1 from Button.jsx variant/size maps) ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 18px; font-family:var(--font-sans); font-size:var(--button-md-size);
  font-weight:var(--weight-semibold); letter-spacing:0; border-radius:var(--radius-button);
  border:1px solid transparent; white-space:nowrap; cursor:pointer;
  transition:background var(--duration-fast) var(--ease-precision), border-color var(--duration-fast) var(--ease-precision);
}
.btn-primary{ background:var(--color-brand-primary); color:var(--color-brand-on-primary); border-color:var(--color-brand-primary); }
.btn-primary:hover{ background:var(--color-brand-primary-hover); border-color:var(--color-brand-primary-hover); color:var(--color-brand-on-primary); }
.btn-secondary{ background:transparent; color:var(--color-text-primary); border-color:var(--color-border-strong); }
.btn-secondary:hover{ background:var(--color-surface-elevated); color:var(--color-text-primary); }
.btn-ghost{ background:transparent; color:var(--color-text-secondary); border-color:transparent; }
.btn-ghost:hover{ background:var(--color-surface-elevated); color:var(--color-text-primary); }
.btn-destructive{ background:transparent; color:var(--color-danger); border-color:var(--color-danger); }
.btn-destructive:hover{ background:var(--color-danger-bg); }
.btn-outline-light{ color:var(--color-text-primary); border-color:var(--color-border-strong); background:transparent; }
.btn-outline-light:hover{ background:var(--color-surface-elevated); }
.btn-sm{ height:32px; padding:0 14px; font-size:var(--button-sm-size); gap:6px; }
.btn-lg{ height:48px; padding:0 24px; font-size:var(--button-lg-size); }
.btn-block{ width:100%; }

/* ---- Badge (ported 1:1) ---- */
.badge{
  display:inline-flex; align-items:center; height:22px; padding:0 8px; font-family:var(--font-sans);
  font-size:var(--caption-size); font-weight:var(--weight-semibold); letter-spacing:var(--caption-tracking);
  text-transform:uppercase; border-radius:var(--radius-badge); border:1px solid transparent;
}
.badge-neutral{ background:var(--color-surface-elevated); color:var(--color-text-secondary); border-color:var(--color-border-strong); }
.badge-brand{ background:color-mix(in oklab, var(--color-brand-primary) 16%, transparent); color:var(--red-300); }
.badge-success{ background:var(--color-success-bg); color:var(--green-500); }
.badge-warning{ background:var(--color-warning-bg); color:var(--amber-500); }
.badge-danger{ background:var(--color-danger-bg); color:var(--red-300); }
.badge-info{ background:var(--color-info-bg); color:var(--blue-500); }

/* ---- StatusPill (ported 1:1) ---- */
.status-pill{ display:inline-flex; align-items:center; gap:6px; font-size:var(--caption-size); color:var(--color-text-secondary); font-weight:var(--weight-medium); }
.status-pill::before{ content:""; width:6px; height:6px; border-radius:50%; flex-shrink:0; background:var(--status-draft); }
.status-pill.is-live::before{ background:var(--status-live); }
.status-pill.is-pending::before{ background:var(--status-pending); }
.status-pill.is-processing::before{ background:var(--status-processing); }
.status-pill.is-rejected::before{ background:var(--status-rejected); }

/* ---- Header ---- */
.site-header{
  position:sticky; top:0; z-index:60; background:var(--color-canvas);
  border-bottom:1px solid transparent; transition:border-color var(--duration-base) var(--ease-precision);
}
.site-header.is-scrolled{ border-bottom-color:var(--color-border); }
.header-inner{ height:72px; display:flex; align-items:center; justify-content:space-between; gap:40px; transition:height var(--duration-base) var(--ease-precision); }
.site-header.is-scrolled .header-inner{ height:60px; }
.logo{ display:flex; align-items:center; }
.logo img{ height:70px; display:block; }

.main-nav{ display:flex; align-items:center; gap:28px; font-size:var(--nav-size); font-weight:var(--weight-medium); color:var(--color-text-secondary); }
.nav-item{ position:relative; }
.nav-link{ background:none; border:none; color:inherit; font:inherit; height:72px; display:flex; align-items:center; gap:6px; }
.nav-link:hover, .nav-link.active{ color:var(--color-text-primary); }
a.nav-link{ height:auto; }
.dropdown-caret{ font-size:9px; opacity:0.7; }
.dropdown{
  position:absolute; top:66px; left:-20px; width:520px; padding:8px; background:var(--color-surface-elevated);
  border:var(--border-hairline); border-radius:var(--radius-card); box-shadow:var(--shadow-lg);
  display:none; grid-template-columns:1fr 1fr; gap:2px; z-index:10;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{ display:grid; }
.dropdown a{ display:block; padding:12px 14px; border-radius:var(--radius-sm); color:inherit; }
.dropdown a:hover{ background:var(--color-card); }
.dropdown-title{ font-size:var(--title-sm-size); font-weight:var(--weight-semibold); color:var(--color-text-primary); margin-bottom:3px; }
.dropdown-desc{ font-size:var(--body-sm-size); color:var(--color-text-muted); line-height:1.45; }

.header-actions{ display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; }
.nav-toggle span{ width:22px; height:2px; background:var(--color-text-primary); display:block; }
.mobile-nav{ display:none; flex-direction:column; padding:10px 48px 26px; border-top:var(--border-hairline); background:var(--color-canvas); }
.mobile-nav a{ padding:14px 0; border-bottom:var(--border-hairline); font-weight:var(--weight-medium); color:var(--color-text-secondary); }
.mobile-nav-actions{ display:flex; gap:12px; margin-top:18px; }
.mobile-nav-actions .btn{ flex:1; }
.mobile-nav.open{ display:flex; }
@media (max-width:900px){
  .main-nav, .header-actions .btn{ display:none; }
  .nav-toggle{ display:flex; }
  .wrap{ padding:0 24px; }
}

/* ---- Reveal-on-scroll (JS toggles .is-visible) ---- */
/* Reveal-on-scroll is progressive enhancement ONLY: content is visible
   by default (safe if JS fails to load/run). JS adds .pre-reveal on
   DOMContentLoaded — only once we know script execution actually
   works — then removes it via IntersectionObserver to animate in. */
[data-reveal]{ opacity:1; transform:none; }
[data-reveal].pre-reveal{ opacity:0; transform:translateY(18px); transition:opacity 620ms var(--ease-entrance), transform 620ms var(--ease-precision); }
[data-reveal].pre-reveal.is-visible{ opacity:1; transform:none; }

/* ---- Hero ---- */
.hero{ padding:104px 0 var(--rsm-section); }
.hero-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(430px,1fr)); gap:72px; align-items:start; }
.eyebrow-label{ font-size:var(--label-size); font-weight:var(--weight-semibold); letter-spacing:var(--label-tracking); text-transform:uppercase; color:var(--color-brand-primary); margin-bottom:20px; }
.hero h1{ font-size:clamp(56px,6.4vw,88px); line-height:0.98; letter-spacing:-0.02em; max-width:12ch; margin:0 0 28px; }
.hero .lead{ font-size:var(--body-lg-size); line-height:1.6; color:var(--color-text-secondary); max-width:46ch; margin:0 0 36px; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.fine-print{ font-family:var(--font-mono); font-size:var(--data-mono-sm-size); font-weight:var(--weight-semibold); color:var(--color-text-secondary); letter-spacing:0.01em; }

/* ---- Delivery card widget (hero) ---- */
.delivery-card{ background:var(--color-surface); border:var(--border-hairline); border-radius:var(--radius-card); padding:24px; }
.delivery-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.delivery-card-artwork{ width:88px; height:88px; flex-shrink:0; border-radius:var(--radius-xs); background:linear-gradient(135deg,var(--color-surface-elevated),var(--color-card)); position:relative; overflow:hidden; }
.delivery-card-artwork img{ width:100%; height:100%; object-fit:cover; display:block; }
.delivery-card-artwork:not(:has(img))::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 25%, color-mix(in oklab, var(--color-brand-primary) 30%, transparent), transparent 60%); }
.delivery-card-release{ display:flex; gap:16px; align-items:center; padding-bottom:20px; border-bottom:var(--border-hairline); }
.delivery-rail-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 8px; margin:0 -8px; border-radius:var(--radius-sm); transition:background var(--duration-fast) var(--ease-precision); }
.delivery-rail-row:hover{ background:var(--color-surface-elevated); }
.delivery-card-foot{ margin-top:20px; padding-top:20px; border-top:var(--border-hairline); display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:var(--data-mono-sm-size); font-weight:var(--weight-semibold); color:var(--color-text-secondary); }

/* ---- Marquee ---- */
.marquee-wrap{ border-top:var(--border-hairline); border-bottom:var(--border-hairline); padding:26px 0; overflow:hidden; }
.marquee-track{ display:flex; width:max-content; animation:rsm-marquee 46s linear infinite; }
.marquee-group{ display:flex; align-items:center; gap:56px; padding-right:56px; white-space:nowrap; }
@keyframes rsm-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* Platform logos: real official assets go in /assets/img/platforms/ —
   drop in a file named to match (e.g. spotify.png) via File Manager and
   it appears automatically. Until then, the platform name shows as
   plain text (see the onerror fallback in index.php). Logos are
   desaturated/dimmed to match the muted marquee style and brighten on
   hover; swap for each platform's official "mono/white" variant where
   available for the cleanest look on this dark background. */
.platform-logo{ display:inline-flex; align-items:center; height:24px; }
.platform-logo img{
  height:22px; width:auto; max-width:140px; object-fit:contain;
  filter:grayscale(1) brightness(1.8) opacity(0.55);
  transition:filter var(--duration-fast) var(--ease-precision);
}
.platform-logo:hover img{ filter:grayscale(1) brightness(1.8) opacity(0.9); }
.platform-logo-fallback{ display:none; font-size:var(--body-md-size); color:var(--color-text-muted); font-weight:var(--weight-medium); }

/* ---- Sections ---- */
.section{ max-width:var(--container-max); margin:0 auto; padding:var(--rsm-section) 48px 0; }
.section-alt{ margin-top:var(--rsm-section); border-top:var(--border-hairline); border-bottom:var(--border-hairline); background:var(--color-surface); }
.section-alt-inner{ max-width:var(--container-max); margin:0 auto; padding:96px 48px; }
.section-head{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:24px; margin-bottom:56px; }
.section-head h2{ margin:0; max-width:20ch; }
.section-head-link{ font-size:var(--body-md-size); color:var(--color-text-secondary); padding-bottom:8px; }
.section-head-link:hover{ color:var(--color-text-primary); }

/* ---- Hairline grids (steps / features) ---- */
.hairline-grid{ display:grid; gap:1px; background:var(--color-border); }
.hairline-grid.bordered{ border:var(--border-hairline); }
.hairline-grid-3{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.hairline-grid-cell{ background:var(--color-canvas); padding:40px 40px 44px 0; }
.hairline-grid.bordered .hairline-grid-cell{ padding:36px 32px 32px; transition:background var(--duration-fast) var(--ease-precision); display:block; }
.hairline-grid.bordered a.hairline-grid-cell:hover{ background:var(--color-surface); }
.step-num{ font-family:var(--font-mono); font-size:var(--data-mono-lg-size); font-weight:var(--data-mono-weight); color:var(--color-brand-primary); margin-bottom:28px; }
.step-title{ font-size:var(--title-lg-size); font-weight:var(--weight-semibold); margin-bottom:12px; }
.step-body{ font-size:var(--body-md-size); line-height:1.6; color:var(--color-text-secondary); max-width:34ch; }
.feature-cell-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:32px; }
.feature-code{ font-family:var(--font-mono); font-size:var(--data-mono-sm-size); font-weight:var(--weight-medium); color:var(--color-text-muted); }
.feature-arrow{ color:var(--color-brand-primary); font-size:15px; }
.feature-title{ font-size:var(--title-lg-size); font-weight:var(--weight-semibold); margin-bottom:12px; }
.feature-body{ font-size:var(--body-md-size); line-height:1.6; color:var(--color-text-secondary); }

/* ---- Stats / proof ---- */
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.stat-cell{ padding:48px 32px 48px 0; }
.stat-value{ font-family:var(--font-mono); font-size:var(--data-mono-lg-size); font-weight:var(--data-mono-weight); color:var(--color-text-primary); margin-bottom:10px; }
.stat-label{ font-size:var(--label-size); font-weight:var(--weight-semibold); letter-spacing:var(--label-tracking); text-transform:uppercase; color:var(--color-text-muted); }

/* ---- Testimonial ---- */
.testimonial-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:64px; align-items:center; }
.testimonial-portrait{ position:relative; aspect-ratio:4/5; max-width:420px; width:100%; border-radius:var(--radius-xs); background:linear-gradient(135deg,var(--color-surface-elevated),var(--color-card)); overflow:hidden; }
.testimonial-portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
.testimonial-portrait:not(:has(img))::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 65% 20%, color-mix(in oklab, var(--color-brand-primary) 25%, transparent), transparent 60%); }
.testimonial-quote{ font-family:var(--font-display); font-size:clamp(28px,2.8vw,44px); line-height:1.15; letter-spacing:-0.01em; font-weight:var(--weight-bold); margin:0 0 36px; max-width:24ch; color:var(--color-text-primary); }
.testimonial-attr{ display:flex; align-items:center; gap:16px; margin-bottom:36px; }
.testimonial-name{ font-size:var(--title-sm-size); font-weight:var(--weight-semibold); }
.testimonial-divider{ width:1px; height:16px; background:var(--color-border-strong); }
.testimonial-role{ font-size:var(--body-sm-size); color:var(--color-text-muted); }
.testimonial-foot{ display:flex; align-items:center; gap:32px; padding-top:28px; border-top:var(--border-hairline); }
.testimonial-stat{ font-family:var(--font-mono); font-size:var(--data-mono-md-size); font-weight:var(--weight-semibold); color:var(--color-text-primary); }
.testimonial-stat-label{ font-size:var(--body-sm-size); color:var(--color-text-muted); max-width:22ch; }
.testimonial-nav{ margin-left:auto; display:flex; gap:8px; }

/* ---- Pricing ---- */
.pricing-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; align-items:start; }
.price-card{ background:var(--color-card); border:var(--border-hairline); border-radius:var(--radius-card); padding:32px 28px 28px; display:flex; flex-direction:column; gap:24px; }
.price-card.featured{ border-color:var(--color-brand-primary); }
.price-card-head{ display:flex; align-items:center; justify-content:space-between; min-height:22px; }
.price-amount-row{ display:flex; align-items:baseline; gap:8px; }
.price-amount{ font-family:var(--font-mono); font-size:44px; font-weight:var(--data-mono-weight); letter-spacing:-0.02em; }
.price-unit{ font-size:var(--body-sm-size); color:var(--color-text-muted); }
.price-for{ font-size:var(--body-sm-size); color:var(--color-text-secondary); margin-top:10px; }
.price-items{ display:flex; flex-direction:column; gap:12px; padding-top:8px; border-top:var(--border-hairline); }
.price-item{ display:flex; gap:12px; font-size:var(--body-md-size); color:var(--color-text-secondary); }
.price-item::before{ content:"—"; color:var(--color-text-muted); font-family:var(--font-mono); font-size:12px; padding-top:3px; }
.price-card-cta{ margin-top:auto; }

/* ---- Labels / roster widget ---- */
.roster-card{ background:var(--color-canvas); border:var(--border-hairline); border-radius:var(--radius-card); padding:28px; }
.roster-label{ font-size:var(--label-size); font-weight:var(--weight-semibold); letter-spacing:var(--label-tracking); text-transform:uppercase; color:var(--color-text-muted); margin-bottom:24px; }
.roster-owner{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:var(--color-card); border:1px solid var(--color-brand-primary); border-radius:var(--radius-sm); }
.roster-list{ display:flex; flex-direction:column; gap:10px; margin-top:10px; padding-left:28px; position:relative; }
.roster-list::before{ content:""; position:absolute; left:12px; top:-10px; bottom:22px; width:1px; background:var(--color-border-strong); }
.roster-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 16px; background:var(--color-card); border:var(--border-hairline); border-radius:var(--radius-sm); transition:background var(--duration-fast) var(--ease-precision); }
.roster-row:hover{ background:var(--color-surface-elevated); }
.roster-foot{ display:flex; justify-content:space-between; margin-top:24px; padding-top:20px; border-top:var(--border-hairline); font-family:var(--font-mono); font-size:var(--data-mono-sm-size); font-weight:var(--weight-semibold); color:var(--color-text-secondary); }

/* ---- Blog / post cards ---- */
.post-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:32px; }
.post-card{ display:block; }
.post-thumb{ position:relative; aspect-ratio:16/10; margin-bottom:20px; border-radius:var(--radius-xs); background:linear-gradient(135deg,var(--color-surface-elevated),var(--color-card)); overflow:hidden; }
.post-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-thumb:not(:has(img))::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 25%, color-mix(in oklab, var(--color-brand-primary) 22%, transparent), transparent 60%); }
.post-meta{ display:flex; align-items:center; gap:12px; margin-bottom:12px; font-family:var(--font-mono); font-size:var(--data-mono-sm-size); font-weight:var(--weight-medium); color:var(--color-text-muted); }
.post-meta .cat{ color:var(--color-brand-primary); }
.post-title{ font-family:var(--font-display); font-size:var(--title-lg-size); line-height:1.25; color:var(--color-text-primary); margin-bottom:10px; font-weight:var(--weight-bold); }
.post-excerpt{ font-size:var(--body-md-size); line-height:1.6; color:var(--color-text-secondary); }

/* ---- Generic card / grid (reused across inner pages) ---- */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr; } }

.card{ background:var(--color-card); border:var(--border-hairline); border-radius:var(--radius-card); padding:28px; transition:border-color var(--duration-fast) var(--ease-precision); }
.card:hover{ border-color:var(--color-border-strong); }
.card h3{ margin-bottom:8px; }
.card p{ margin-bottom:0; font-size:var(--body-sm-size); }
.card .icon{ width:40px; height:40px; border-radius:var(--radius-sm); margin-bottom:16px; background:color-mix(in oklab, var(--color-brand-primary) 16%, transparent); color:var(--color-brand-primary); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:var(--weight-semibold); }
.card-link{ display:inline-block; margin-top:14px; color:var(--color-brand-primary); font-weight:var(--weight-semibold); font-size:var(--body-sm-size); }

/* ---- CTA band ---- */
.cta-final{ margin-top:var(--rsm-section); border-top:var(--border-hairline); background:var(--color-surface); }
.cta-final-inner{ max-width:var(--container-max); margin:0 auto; padding:120px 48px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:28px; }
.cta-final h2{ font-size:clamp(40px,5.2vw,80px); line-height:1; letter-spacing:-0.02em; max-width:18ch; margin:0; }
.cta-final p{ font-size:var(--body-lg-size); color:var(--color-text-secondary); margin:0; max-width:44ch; }
.cta-final .btn-primary-glow{ box-shadow:var(--shadow-glow-brand); border-radius:var(--radius-button); }

/* ---- Legacy CTA band (inner pages) ---- */
.cta-band{ background:var(--color-surface); border:var(--border-hairline); border-radius:var(--radius-card); padding:64px 40px; text-align:center; margin:0; }
.cta-band h2{ color:var(--color-text-primary); }
.cta-band p{ max-width:520px; margin:0 auto 30px; }

/* ---- Footer ---- */
.site-footer{ border-top:var(--border-hairline); background:var(--color-canvas); }
.footer-cols{ max-width:var(--container-max); margin:0 auto; padding:80px 48px 32px; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:48px; }
.footer-col-title{ font-size:var(--label-size); font-weight:var(--weight-semibold); letter-spacing:var(--label-tracking); text-transform:uppercase; color:var(--color-text-primary); margin-bottom:20px; }
.footer-col a{ display:block; font-size:var(--body-md-size); color:var(--color-text-muted); padding:6px 0; }
.footer-col a:hover{ color:var(--color-text-primary); }
.footer-bottom-wrap{ max-width:var(--container-max); margin:0 auto; padding:0 48px; }
.footer-bottom{ border-top:var(--border-hairline); padding:24px 0 48px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; }
.footer-brand-row{ display:flex; align-items:center; gap:20px; }
.footer-brand-row img{ height:20px; opacity:0.9; }
.footer-copy{ font-size:var(--caption-size); color:var(--color-text-muted); }
.footer-locale{ font-family:var(--font-mono); font-size:var(--data-mono-sm-size); font-weight:var(--weight-medium); color:var(--color-text-muted); }

/* ---- Accordion / FAQ ---- */
.accordion-group + .accordion-group{ margin-top:34px; }
.accordion-group h3{ color:var(--color-brand-primary); font-size:var(--label-size); text-transform:uppercase; letter-spacing:var(--label-tracking); margin-bottom:12px; font-family:var(--font-sans); }
.accordion-item{ border-bottom:var(--border-hairline); }
.accordion-q{ width:100%; text-align:left; background:none; border:none; color:var(--color-text-primary); padding:18px 0; font-family:var(--font-sans); font-size:var(--title-sm-size); font-weight:var(--weight-semibold); display:flex; justify-content:space-between; align-items:center; gap:16px; }
.accordion-q::after{ content:"+"; color:var(--color-brand-primary); font-size:1.3rem; flex-shrink:0; transition:transform var(--duration-fast) var(--ease-precision); }
.accordion-item.open .accordion-q::after{ transform:rotate(45deg); }
.accordion-a{ display:none; padding:0 0 20px; color:var(--color-text-secondary); font-size:var(--body-sm-size); }
.accordion-item.open .accordion-a{ display:block; }

/* ---- Tables ---- */
.compare-table{ width:100%; border-collapse:collapse; margin-top:60px; font-size:var(--body-sm-size); }
.compare-table th,.compare-table td{ padding:14px 18px; border-bottom:var(--border-hairline); text-align:center; }
.compare-table th:first-child,.compare-table td:first-child{ text-align:left; color:var(--color-text-primary); }
.compare-table thead th{ font-family:var(--font-mono); color:var(--color-brand-primary); font-weight:var(--weight-medium); font-size:var(--table-header-size); text-transform:uppercase; letter-spacing:0.06em; }
.table-scroll{ overflow-x:auto; }

/* ---- Forms ---- */
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:var(--body-sm-size); font-weight:var(--weight-semibold); margin-bottom:7px; color:var(--color-text-primary); }
.field input{ width:100%; padding:12px 14px; border-radius:var(--radius-input); border:var(--border-hairline); background:var(--color-surface); color:var(--color-text-primary); font-size:var(--body-md-size); font-family:inherit; }
.field input:focus{ border-color:var(--color-brand-primary); outline:none; }
.field-row{ display:flex; justify-content:space-between; align-items:center; font-size:var(--body-sm-size); margin-bottom:20px; }
.checkbox-row{ display:flex; align-items:flex-start; gap:10px; font-size:var(--body-sm-size); color:var(--color-text-muted); margin-bottom:20px; }
.divider{ display:flex; align-items:center; gap:14px; margin:24px 0; color:var(--color-text-muted); font-size:var(--caption-size); }
.divider::before,.divider::after{ content:""; flex:1; height:1px; background:var(--color-border); }
.sso-row{ display:flex; gap:12px; }
.sso-row .btn{ flex:1; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
textarea,select{ width:100%; padding:12px 14px; border-radius:var(--radius-input); border:var(--border-hairline); background:var(--color-surface); color:var(--color-text-primary); font-family:inherit; }
textarea{ resize:vertical; min-height:140px; }

/* ---- Auth pages ---- */
.auth-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:60px 24px; background:radial-gradient(900px 500px at 50% 0%, color-mix(in oklab, var(--color-brand-primary) 12%, transparent), transparent 60%), var(--color-canvas); }
.auth-card{ width:100%; max-width:420px; background:var(--color-surface); border:var(--border-hairline); border-radius:var(--radius-card); padding:40px; }
.auth-card .logo{ justify-content:center; margin-bottom:28px; }
.auth-card .logo img{ height:28px; }
.auth-card h1{ font-size:1.6rem; text-align:center; }
.auth-sub{ text-align:center; margin-bottom:28px; font-size:var(--body-sm-size); }
.auth-footer{ text-align:center; margin-top:24px; font-size:var(--body-sm-size); color:var(--color-text-muted); }
.auth-footer a{ font-weight:var(--weight-semibold); }
.auth-mini-header{ height:72px; display:flex; align-items:center; }

/* ---- Breadcrumb / article ---- */
.breadcrumb{ font-size:var(--body-sm-size); color:var(--color-text-muted); margin-bottom:18px; }
.breadcrumb a{ color:var(--color-text-secondary); }
.article-wrap{ max-width:var(--container-narrow); margin:0 auto; }
.article-header{ text-align:center; margin-bottom:40px; }
.article-body h2{ margin-top:44px; font-size:var(--title-lg-size); font-family:var(--font-sans); font-weight:var(--weight-semibold); }
.article-body h3{ margin-top:30px; }
.article-body p{ font-size:var(--body-lg-size); }
.article-body ul,.article-body ol{ margin:0 0 20px; padding-left:22px; color:var(--color-text-secondary); }
.article-body li{ margin-bottom:8px; }

/* ---- Legal TOC ---- */
.legal-layout{ display:grid; grid-template-columns:220px 1fr; gap:60px; align-items:start; }
@media (max-width:900px){ .legal-layout{ grid-template-columns:1fr; } }
.legal-toc{ position:sticky; top:calc(var(--header-h) + 24px); }
.legal-toc a{ display:block; padding:8px 0 8px 14px; font-size:var(--body-sm-size); color:var(--color-text-muted); border-left:2px solid var(--color-border); }
.legal-toc a:hover{ color:var(--color-brand-primary); border-color:var(--color-brand-primary); }
.updated-badge{ display:inline-block; font-size:var(--caption-size); color:var(--color-text-muted); background:var(--color-surface); border:var(--border-hairline); padding:5px 12px; border-radius:var(--radius-full); margin-bottom:20px; }

/* ---- 404 ---- */
.error-page{ min-height:80vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:60px 24px; }
.error-code{ font-family:var(--font-mono); font-size:5rem; color:var(--color-brand-primary); line-height:1; margin-bottom:10px; }
.error-search{ max-width:420px; margin:26px auto; display:flex; gap:10px; }
.error-search input{ flex:1; padding:12px 16px; border-radius:var(--radius-input); border:var(--border-hairline); background:var(--color-surface); color:var(--color-text-primary); }
.error-links{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:20px; }

/* ---- Job listing ---- */
.job-row{ display:flex; justify-content:space-between; align-items:center; padding:22px 0; border-bottom:var(--border-hairline); gap:16px; flex-wrap:wrap; }
.job-title{ font-family:var(--font-sans); font-weight:var(--weight-semibold); font-size:var(--title-sm-size); }
.job-meta{ font-size:var(--caption-size); color:var(--color-text-muted); }

/* ---- Platform grid ---- */
.platform-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--color-border); border:var(--border-hairline); }
@media (max-width:900px){ .platform-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:640px){ .platform-grid{ grid-template-columns:repeat(3,1fr); } }
.platform-tile{ background:var(--color-canvas); padding:18px 8px; text-align:center; font-size:var(--body-sm-size); color:var(--color-text-secondary); font-weight:var(--weight-medium); }

/* ---- Filter pills ---- */
.filter-pills{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
.pill{ padding:9px 18px; border-radius:var(--radius-full); border:var(--border-hairline); font-size:var(--body-sm-size); color:var(--color-text-secondary); background:none; }
.pill.active{ background:var(--color-brand-primary); border-color:var(--color-brand-primary); color:#fff; }

/* ---- Pricing toggle (inner pricing page) ---- */
.pricing-toggle{ display:flex; justify-content:center; align-items:center; gap:14px; margin-bottom:48px; }
.pricing-toggle .switch{ width:52px; height:28px; background:var(--color-surface-elevated); border:var(--border-hairline); border-radius:var(--radius-full); position:relative; cursor:pointer; }
.pricing-toggle .switch::after{ content:""; position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:var(--color-brand-primary); transition:left var(--duration-fast) var(--ease-precision); }
.pricing-toggle .switch.on::after{ left:26px; }
.save-badge{ background:var(--color-success-bg); color:var(--color-success); font-size:var(--caption-size); font-weight:var(--weight-bold); padding:3px 10px; border-radius:var(--radius-full); }

/* ---- Utility ---- */
.text-center{ text-align:center; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; gap:36px; } }
.two-col.reverse .col-visual{ order:2; }
.visual-placeholder{ aspect-ratio:4/3; border-radius:var(--radius-card); background:var(--color-surface); border:var(--border-hairline); display:flex; align-items:center; justify-content:center; color:var(--color-text-muted); font-family:var(--font-mono); font-size:var(--data-mono-sm-size); position:relative; overflow:hidden; }
.visual-placeholder img{ width:100%; height:100%; object-fit:cover; display:block; }
.visual-placeholder:not(:has(img))::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 20%, color-mix(in oklab, var(--color-brand-primary) 20%, transparent), transparent 55%); }

@media (max-width:640px){
  .section{ padding:80px 24px 0; }
  .section-alt-inner{ padding:64px 24px; }
  .hero{ padding:72px 0 80px; }
  .cta-final-inner{ padding:72px 24px; }
  .footer-cols{ padding:56px 24px 24px; }
  .footer-bottom-wrap{ padding:0 24px; }
}

/* ===========================================================
   Compatibility layer — legacy class names used on inner pages
   (pricing/features/for-labels/about/help-center/success-stories
   etc.), remapped onto the current design tokens so every page
   shares one visual language without rewriting each template.
   =========================================================== */

.hero-inner{ max-width:780px; margin:0 auto; text-align:center; }
.hero-inner .lead{ margin-left:auto; margin-right:auto; }
.hero-inner .hero-ctas{ justify-content:center; }

.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:var(--caption-size); font-weight:var(--weight-semibold);
  letter-spacing:var(--label-tracking); text-transform:uppercase; color:var(--color-brand-primary);
  background:color-mix(in oklab, var(--color-brand-primary) 12%, transparent); border:1px solid color-mix(in oklab, var(--color-brand-primary) 30%, transparent);
  padding:7px 16px; border-radius:var(--radius-full); margin-bottom:24px; }

.section-header{ max-width:640px; margin:0 auto 56px; text-align:center; }
.section-header p{ font-size:var(--body-lg-size); }
.section-header.left{ margin-left:0; text-align:left; }

.section-tight{ padding:60px 48px; max-width:var(--container-max); margin:0 auto; }
@media (max-width:640px){ .section-tight{ padding:48px 24px; } }

.stat-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
@media (max-width:700px){ .stat-bar{ grid-template-columns:repeat(2,1fr); } }
.stat-num{ font-family:var(--font-mono); font-size:var(--data-mono-lg-size); font-weight:var(--data-mono-weight); color:var(--color-brand-primary); margin-bottom:6px; }

.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; counter-reset:step; }
@media (max-width:800px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; padding-top:8px; }
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  font-family:var(--font-mono); font-size:0.85rem; color:var(--color-brand-primary);
  border:1px solid var(--color-brand-primary); border-radius:var(--radius-full); width:34px; height:34px;
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.step h3{ margin-bottom:8px; }

.pricing-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
@media (max-width:900px){ .pricing-cards{ grid-template-columns:1fr; } }

.testimonial{ background:var(--color-surface); border:var(--border-hairline); border-radius:var(--radius-lg); padding:48px; max-width:760px; margin:0 auto; text-align:center; }
.testimonial blockquote{ font-family:var(--font-display); font-size:1.4rem; margin:0 0 20px; line-height:1.4; font-weight:var(--weight-bold); }
.testimonial cite{ font-style:normal; color:var(--color-text-muted); font-size:var(--body-sm-size); }

/* success-stories.php post-card children (thumb/body/tag/meta-row) */
.post-card .thumb{ position:relative; aspect-ratio:16/10; margin-bottom:20px; border-radius:var(--radius-xs); background:linear-gradient(135deg,var(--color-surface-elevated),var(--color-card)); overflow:hidden; }
.post-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-card .thumb:not(:has(img))::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 25%, color-mix(in oklab, var(--color-brand-primary) 22%, transparent), transparent 60%); }
.post-card .body{ padding:0 0 22px; }
.post-card .tag{ display:inline-block; font-family:var(--font-mono); font-size:var(--data-mono-sm-size); color:var(--color-brand-primary); margin-bottom:10px; }
.post-card .meta-row{ font-size:var(--caption-size); color:var(--color-text-muted); margin-top:10px; margin-bottom:0; }
.post-card h3{ font-family:var(--font-display); font-weight:var(--weight-bold); font-size:var(--title-lg-size); margin-bottom:0; }

.visually-hidden{ position:absolute !important; left:-9999px; }