/* ==========================================================================
   Simple Stack — design system
   One signature theme, first-class light + dark.
   Vanilla CSS, no build step. Fonts: Bricolage Grotesque / Hanken Grotesk / JetBrains Mono.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  color-scheme: dark;

  --font-display: "Bricolage Grotesque", "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* fluid type scale */
  --step--1: clamp(0.82rem, 0.78rem + 0.2vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.36rem + 0.7vw, 1.92rem);
  --step-3: clamp(1.92rem, 1.7rem + 1.1vw, 2.6rem);
  --step-4: clamp(2.4rem, 2rem + 2vw, 3.6rem);
  --step-5: clamp(3rem, 2.3rem + 3.4vw, 5rem);
  --step-6: clamp(3.6rem, 2.4rem + 5.6vw, 6.75rem);

  --container: 1160px;
  --container-narrow: 920px;
  --gap: clamp(16px, 1.4vw, 24px);
  --nav-gutter: clamp(10px, 1.3vw, 16px);
  --nav-pill-h: 58px;
  --nav-flow-h: calc(var(--nav-pill-h) + var(--nav-gutter) * 2);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 34px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* signature accent (ember) — shared hue, mode tunes lightness */
  --accent: #ef5a26;
  --accent-2: #ff8a3d;
  --accent-ink: #1a0a04;
}

/* -------- DARK (default) -------- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #08080b;
  --bg-grad-1: #120c10;
  --bg-grad-2: #08080b;
  --surface: #101015;
  --surface-2: #15151c;
  --surface-3: #1c1c25;
  --surface-glass: rgba(18, 18, 25, 0.55);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-highlight: rgba(255, 255, 255, 0.18);
  --surface-inset: rgba(255, 255, 255, 0.025);

  --border: rgba(255, 255, 255, 0.08);
  --border-2: rgba(255, 255, 255, 0.13);
  --border-glow: color-mix(in srgb, var(--accent) 42%, transparent);

  --text: #f6f4f1;
  --text-muted: #a7a4af;
  --text-faint: #6f6c79;

  /* Accent: only --accent / --accent-2 / --accent-ink are set per palette
     (see the [data-accent] blocks below); the rest derive from them so a
     palette swap needs just three values. */
  --accent: #ff6a38;
  --accent-2: #ffac5e;
  --accent-ink: #190a03;
  --accent-text: color-mix(in srgb, var(--accent) 84%, #ffffff);
  --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 32%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 50%, transparent);

  --success: #3ddc97;
  --success-soft: rgba(61, 220, 151, 0.13);
  --warn: #f7c948;
  --warn-soft: rgba(247, 201, 72, 0.14);
  --danger: #ff6b81;
  --danger-soft: rgba(255, 107, 129, 0.14);
  --info: #5cc8ff;
  --info-soft: rgba(92, 200, 255, 0.13);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 44px 90px -30px rgba(0, 0, 0, 0.8);
  --ring: 0 0 0 1px var(--border);

  --grain-opacity: 0.05;
  --mesh-1: color-mix(in srgb, var(--accent) 50%, transparent);
  --mesh-2: rgba(255, 60, 120, 0.34);
  --mesh-3: rgba(120, 90, 255, 0.3);
  --mesh-4: rgba(255, 180, 70, 0.28);
}

/* -------- LIGHT -------- */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #faf8f5;
  --bg-grad-1: #fff4ec;
  --bg-grad-2: #faf8f5;
  --surface: #ffffff;
  --surface-2: #fbf9f6;
  --surface-3: #f4f1ea;
  --surface-glass: rgba(255, 253, 250, 0.62);
  --glass-border: rgba(28, 22, 18, 0.09);
  --glass-highlight: rgba(255, 255, 255, 0.85);
  --surface-inset: rgba(20, 16, 14, 0.025);

  --border: rgba(28, 22, 18, 0.1);
  --border-2: rgba(28, 22, 18, 0.16);
  --border-glow: color-mix(in srgb, var(--accent) 34%, transparent);

  --text: #181318;
  --text-muted: #5d5660;
  --text-faint: #8d8690;

  --accent: #e8531e;
  --accent-2: #ff8a3d;
  --accent-ink: #fffaf6;
  --accent-text: color-mix(in srgb, var(--accent) 70%, #000000);
  --accent-soft: color-mix(in srgb, var(--accent) 9%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 28%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 28%, transparent);

  --success: #11936b;
  --success-soft: rgba(17, 147, 107, 0.11);
  --warn: #b07206;
  --warn-soft: rgba(176, 114, 6, 0.12);
  --danger: #cc3a52;
  --danger-soft: rgba(204, 58, 82, 0.1);
  --info: #1f7fb8;
  --info-soft: rgba(31, 127, 184, 0.1);

  --shadow-sm: 0 2px 6px rgba(36, 24, 18, 0.07);
  --shadow: 0 24px 50px -24px rgba(46, 30, 22, 0.26);
  --shadow-lg: 0 40px 80px -30px rgba(46, 30, 22, 0.3);
  --ring: 0 0 0 1px var(--border);

  --grain-opacity: 0.04;
  --mesh-1: color-mix(in srgb, var(--accent) 22%, transparent);
  --mesh-2: rgba(255, 80, 130, 0.16);
  --mesh-3: rgba(120, 90, 255, 0.13);
  --mesh-4: rgba(255, 170, 60, 0.2);
}

/* ------------------------------------------------- accent palettes (1–20) --
   Pick one with APP_ACCENT in .env (or preview on /themes). Each palette only
   sets --accent / --accent-2 (gradient partner) / --accent-ink (text ON the
   accent); every other accent variable derives from these in the theme blocks
   above, so they work in both light and dark. Keep these in sync with
   accent_presets() in app/bootstrap.php (number + name). */
:root[data-accent="1"]  { --accent:#6366f1; --accent-2:#818cf8; --accent-ink:#ffffff; } /* Indigo */
:root[data-accent="2"]  { --accent:#3b82f6; --accent-2:#60a5fa; --accent-ink:#ffffff; } /* Blue */
:root[data-accent="3"]  { --accent:#0ea5e9; --accent-2:#38bdf8; --accent-ink:#ffffff; } /* Sky */
:root[data-accent="4"]  { --accent:#06b6d4; --accent-2:#22d3ee; --accent-ink:#ffffff; } /* Cyan */
:root[data-accent="5"]  { --accent:#14b8a6; --accent-2:#2dd4bf; --accent-ink:#04241f; } /* Teal */
:root[data-accent="6"]  { --accent:#10b981; --accent-2:#34d399; --accent-ink:#03251a; } /* Emerald */
:root[data-accent="7"]  { --accent:#22c55e; --accent-2:#4ade80; --accent-ink:#052e16; } /* Green */
:root[data-accent="8"]  { --accent:#84cc16; --accent-2:#a3e635; --accent-ink:#1a2e05; } /* Lime */
:root[data-accent="9"]  { --accent:#eab308; --accent-2:#facc15; --accent-ink:#2a2205; } /* Yellow */
:root[data-accent="10"] { --accent:#f59e0b; --accent-2:#fbbf24; --accent-ink:#2a1a02; } /* Amber */
:root[data-accent="11"] { --accent:#f97316; --accent-2:#fb923c; --accent-ink:#2a1402; } /* Orange */
:root[data-accent="12"] { --accent:#ef4444; --accent-2:#f87171; --accent-ink:#ffffff; } /* Red */
:root[data-accent="13"] { --accent:#f43f5e; --accent-2:#fb7185; --accent-ink:#ffffff; } /* Rose */
:root[data-accent="14"] { --accent:#ec4899; --accent-2:#f472b6; --accent-ink:#ffffff; } /* Pink */
:root[data-accent="15"] { --accent:#d946ef; --accent-2:#e879f9; --accent-ink:#ffffff; } /* Fuchsia */
:root[data-accent="16"] { --accent:#a855f7; --accent-2:#c084fc; --accent-ink:#ffffff; } /* Purple */
:root[data-accent="17"] { --accent:#8b5cf6; --accent-2:#a78bfa; --accent-ink:#ffffff; } /* Violet */
:root[data-accent="18"] { --accent:#5eead4; --accent-2:#99f6e4; --accent-ink:#04231f; } /* Mint (pastel) */
:root[data-accent="19"] { --accent:#c4b5fd; --accent-2:#ddd6fe; --accent-ink:#1e1b4b; } /* Lavender (pastel) */
:root[data-accent="20"] { --accent:#64748b; --accent-2:#94a3b8; --accent-ink:#ffffff; } /* Slate */

/* ----------------------------------------------------------------- reset -- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow-x: clip;
}

body {
  position: relative;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* atmospheric backdrop + grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 680px at 78% -8%, var(--bg-grad-1), transparent 60%),
    radial-gradient(900px 600px at -6% 4%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 55%),
    var(--bg-grad-2);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a {
  color: inherit;
  text-decoration: none;
}

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

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------ typography -- */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--text);
  text-wrap: balance;
}

p {
  margin: 0;
}

strong {
  color: var(--text);
  font-weight: 600;
}

code,
.mono {
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.muted {
  color: var(--text-muted);
}

[hidden],
.hidden {
  display: none !important;
}

.eyebrow,
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.eyebrow::before,
.section-kicker::before {
  content: "";
  width: 16px;
  height: 1px;
  background: var(--accent-line);
}

/* ------------------------------------------------------------- layout ----- */
.content {
  width: min(var(--container), 100% - 40px);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) 0 80px;
  display: grid;
  gap: var(--gap);
}

.section-heading {
  max-width: 720px;
}
.section-heading h1,
.section-heading h2 {
  font-size: var(--step-3);
}
.section-heading p {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: 1.55;
}
.section-heading.compact {
  margin-bottom: 6px;
}
.section-heading.compact h2 {
  font-size: var(--step-2);
}

.grid {
  display: grid;
  gap: var(--gap);
}
.grid.two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid.three-up {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dashboard-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* A dashboard row with a single panel (per-profile dashboards hide some widgets)
   should fill the width instead of leaving a lopsided empty column. */
.dashboard-grid.is-solo {
  grid-template-columns: minmax(0, 1fr);
}

/* -------------------------------------------------------------- panels ---- */
.panel {
  position: relative;
  min-width: 0;
  padding: clamp(20px, 2.4vw, 30px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.panel > .eyebrow {
  margin-top: 0;
}
.panel h2 {
  font-size: var(--step-2);
  margin-bottom: 10px;
}
.panel h3 {
  font-size: var(--step-1);
}
.panel p {
  color: var(--text-muted);
  line-height: 1.6;
}
.panel + .panel,
.panel * + p {
  margin-top: 0;
}

.panel-dark {
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
    linear-gradient(160deg, var(--surface-3), var(--surface));
  border-color: var(--border-2);
  color: var(--text);
}
:root[data-theme="light"] .panel-dark {
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent) 92%, #2a1208), transparent 60%),
    linear-gradient(160deg, #1b1410, #120d0a);
  color: #fdf6ef;
  border-color: rgba(255, 255, 255, 0.08);
}
:root[data-theme="light"] .panel-dark p,
:root[data-theme="light"] .panel-dark .item-subtitle,
:root[data-theme="light"] .panel-dark .account-meta {
  color: rgba(253, 246, 239, 0.74);
}
:root[data-theme="light"] .panel-dark .account-email,
:root[data-theme="light"] .panel-dark strong,
:root[data-theme="light"] .panel-dark h1,
:root[data-theme="light"] .panel-dark h2 {
  color: #fff;
}

.panel-accent {
  background:
    radial-gradient(130% 130% at 0% 0%, var(--accent-soft), transparent 60%),
    var(--surface);
  border-color: var(--accent-line);
}

.panel-dark p {
  color: var(--text-muted);
}

/* ------------------------------------------------------------- buttons ---- */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease),
    background 0.18s var(--ease), box-shadow 0.25s var(--ease), color 0.18s var(--ease);
}
.button:hover {
  transform: translateY(-2px);
  border-color: var(--border-glow);
  box-shadow: var(--shadow-sm);
}
.button:active {
  transform: translateY(0);
}
.button:disabled,
.button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.button-primary {
  border-color: transparent;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  box-shadow: 0 10px 28px -10px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.button-primary:hover {
  border-color: transparent;
  box-shadow: 0 16px 40px -12px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.button-ghost {
  background: transparent;
  border-color: var(--border-2);
}
.button-small {
  min-height: 36px;
  padding: 0 14px;
  font-size: 0.82rem;
  border-radius: 8px;
}
.button-danger {
  border-color: color-mix(in srgb, var(--danger) 32%, transparent);
  background: var(--danger-soft);
  color: var(--danger);
}
.button-danger:hover {
  border-color: var(--danger);
}
.button svg {
  width: 17px;
  height: 17px;
}

/* ---------------------------------------------------------- forms --------- */
.inline-form {
  display: grid;
  gap: 12px;
}
.inline-form label,
.admin-search-form label,
.admin-notes-form label {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
input,
textarea,
select {
  font-family: inherit;
}
.inline-form input,
.inline-form textarea,
.admin-search-form input,
.admin-search-form select,
.admin-notes-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.inline-form input::placeholder,
.inline-form textarea::placeholder {
  color: var(--text-faint);
}
.inline-form input:focus,
.inline-form textarea:focus,
.admin-search-form input:focus,
.admin-search-form select:focus,
.admin-notes-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.checkbox-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  min-height: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ---- auth / login page ---- */
.auth-page {
  width: min(620px, 100% - 32px);
  margin: 0 auto;
  min-height: calc(100svh - var(--nav-flow-h) - 64px);
  align-content: center;
  padding: 40px 0 64px;
}
.auth-card {
  text-align: center;
  padding: clamp(30px, 4vw, 52px);
}
.auth-card .eyebrow {
  justify-content: center;
}
.auth-card h1 {
  font-size: var(--step-3);
}
.auth-card > p {
  margin: 14px auto 0;
  max-width: 470px;
}
.auth-form {
  max-width: 460px;
  margin: 30px auto 0;
  text-align: left;
}
.auth-form {
  gap: 14px;
}
/* Single success notice sits above the form with clear breathing room. */
.auth-card .flash {
  margin: 22px 0 0;
  text-align: left;
}
/* After requesting a code: the email locks and a hairline separates it from
   the code-entry step so the two are visually distinct, not crammed. */
.auth-code-step {
  display: grid;
  gap: 14px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
/* Obvious "locked" treatment for the read-only email after a code is sent. */
.inline-form input[readonly] {
  background: var(--surface);
  color: var(--text-muted);
  border-style: dashed;
  cursor: not-allowed;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8693' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 15px;
}
.inline-form input[readonly]:focus {
  outline: none;
  border-color: var(--border-2);
  box-shadow: none;
}
.link-button {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}
.link-button:hover {
  text-decoration: underline;
}
.auth-foot {
  margin-top: 18px;
  text-align: center;
  font-size: 0.86rem;
}

/* ---- social / oauth sign-in ---- */
.auth-providers {
  max-width: 460px;
  margin: 26px auto 0;
  display: grid;
  gap: 16px;
}
.oauth-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.2s var(--ease), opacity 0.18s var(--ease);
}
.oauth-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.oauth-button svg {
  width: 18px;
  height: 18px;
}
/* Apple brand: black button on light, white on dark. */
.oauth-apple {
  background: #000;
  color: #fff;
}
:root[data-theme="dark"] .oauth-apple {
  background: #fff;
  color: #000;
}
.auth-divider {
  position: relative;
  text-align: center;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.auth-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}
.auth-divider span {
  position: relative;
  padding: 0 12px;
  background: var(--surface);
}

/* account screen: link a sign-in provider */
.signin-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}
.signin-methods .oauth-button {
  flex: 0 1 200px;
}
.signin-method.is-linked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--success);
  border-radius: var(--radius-sm);
  color: var(--success);
  font-weight: 600;
  font-size: 0.95rem;
}

/* admin: product file management */
.admin-product-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}
.admin-product-form .file-label-input { flex: 1 1 200px; }
.admin-product-form .file-label-input,
.admin-product-form .file-field {
  min-height: 46px;
}

/* Custom file picker — the native input is hidden but still does the work; the
   label is the click target so it opens the OS picker, and we show the filename. */
.file-field {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex: 0 1 auto;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface-2);
  overflow: hidden;
  cursor: pointer;
  max-width: 100%;
}
.file-field .file-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.file-field .file-btn {
  display: inline-grid;
  place-items: center;
  padding: 0 16px;
  align-self: stretch;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text);
  background: var(--surface-3);
  border-right: 1px solid var(--border-2);
  white-space: nowrap;
}
.file-field:hover .file-btn { background: color-mix(in srgb, var(--accent) 12%, var(--surface-3)); }
.file-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.file-field .file-name {
  padding: 0 14px;
  font-size: 0.88rem;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.file-field .file-name.has-file { color: var(--text); }

/* Armed state for the "email buyers" failsafe (turns red until a 2nd click). */
.notify-buyers-btn.is-armed {
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  background: var(--danger-soft);
  color: var(--danger);
}
.admin-notify-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.inline-confirm { display: inline; }

/* legal pages */
.legal-body h2 {
  font-size: var(--step-2);
  margin: 30px 0 10px;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { margin: 0 0 12px; color: var(--text-muted); line-height: 1.65; }
.legal-body p a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.legal-body .plain-list { margin: 0 0 16px; }
.legal-body strong { color: var(--text); }

/* ------------------------------------------------------- chips & pills ---- */
.signal-chip,
.status-pill,
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-inset);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.signal-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

.status-pill {
  min-height: 24px;
  padding: 0 10px;
  border-color: transparent;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.status-paid,
.status-processed,
.status-ready,
.status-active,
.status-trialing,
.status-subscribed {
  background: var(--success-soft);
  color: var(--success);
}
.status-open,
.status-received,
.status-free,
.status-done,
.status-checkout-completed,
.status-past-due,
.status-pending,
.status-scheduled {
  background: var(--warn-soft);
  color: var(--warn);
}
.status-expired,
.status-failed,
.status-blocked,
.status-canceled,
.status-incomplete,
.status-incomplete-expired,
.status-unpaid,
.status-refunded,
.status-disputed {
  background: var(--danger-soft);
  color: var(--danger);
}

/* -------------------------------------------------------------- lists ----- */
.plain-list,
.checklist,
.api-list {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.plain-list li {
  position: relative;
  padding-left: 26px;
  color: var(--text-muted);
  line-height: 1.55;
}
.plain-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.plain-list li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: calc(0.55em + 3px);
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--accent);
}

.checklist li {
  position: relative;
  padding: 13px 14px 13px 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  line-height: 1.45;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 999px;
}
.checklist li.is-ready::before {
  background: var(--success);
  box-shadow: 0 0 0 4px var(--success-soft);
}
.checklist li.is-pending::before {
  background: var(--warn);
  box-shadow: 0 0 0 4px var(--warn-soft);
}

.api-list li {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.api-list code {
  color: var(--accent-text);
  font-weight: 600;
}
.api-list span {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.list-item:first-of-type {
  border-top: 0;
}
.notes-list {
  margin-top: 16px;
}
.item-meta {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.list-item strong,
.empty-state strong {
  font-size: 1.02rem;
  font-weight: 600;
}
.item-subtitle,
.empty-state span,
.account-meta {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}
.list-item > code {
  flex: 0 0 auto;
  max-width: 44%;
  text-align: right;
  align-self: center;
}
.note-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.note-form {
  padding-bottom: 18px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.empty-state {
  display: grid;
  gap: 6px;
  padding: 22px;
  border: 1px dashed var(--border-2);
  border-radius: var(--radius);
  background: var(--surface-inset);
  text-align: left;
}
/* A CTA button directly under an empty-state shouldn't sit flush against it. */
.empty-state + .button {
  margin-top: 18px;
}

.key-reveal {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
}
.key-reveal span {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.key-reveal code {
  color: var(--text);
  font-size: 0.86rem;
}

/* --------------------------------------------------------- stats / chips -- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: 18px;
}
.stat {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-inset);
}
.stat span {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.stat strong {
  display: block;
  margin: 8px 0 6px;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat p {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.price-chip {
  display: grid;
  gap: 4px;
  min-width: 160px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-inset);
}
.price-chip span,
.price-chip small {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.price-chip strong {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
}

/* =====================================================  SITE NAV  ========= */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: var(--nav-gutter) 0;
  pointer-events: none; /* the gutter lets clicks/scroll pass; the pill re-enables */
}
.nav-inner {
  pointer-events: auto;
  width: min(var(--container), 100% - 28px);
  margin: 0 auto;
  height: var(--nav-pill-h);
  padding: 0 12px 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: 999px;
  background: var(--surface-glass);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 12px 36px -14px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.site-nav.is-scrolled .nav-inner {
  box-shadow:
    0 18px 48px -16px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--text);
}
.logo-badge {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(150deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: 0 6px 18px -6px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  border-radius: 9px;
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 500;
  transition: color 0.16s var(--ease), background 0.16s var(--ease);
}
.nav-link:hover,
.nav-link.is-active {
  color: var(--text);
  background: var(--surface-inset);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-2);
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.4s var(--ease);
}
.theme-toggle:hover {
  color: var(--text);
  border-color: var(--border-glow);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
}
.theme-toggle .icon-sun {
  display: none;
}
.theme-toggle .icon-moon {
  display: block;
}
:root[data-theme="light"] .theme-toggle .icon-sun {
  display: block;
}
:root[data-theme="light"] .theme-toggle .icon-moon {
  display: none;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.6px;
  margin: 4px auto;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
body.menu-open .nav-toggle span:nth-child(1) {
  transform: translateY(5.6px) rotate(45deg);
}
body.menu-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}
body.menu-open .nav-toggle span:nth-child(3) {
  transform: translateY(-5.6px) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  top: calc(var(--nav-flow-h) + 8px);
  left: 14px;
  right: 14px;
  z-index: 99;
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 22px;
  background: var(--surface-glass);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 22px 54px -18px rgba(0, 0, 0, 0.55), inset 0 1px 0 var(--glass-highlight);
  transform: translateY(-12px) scale(0.98);
  opacity: 0;
  visibility: hidden;
  transform-origin: top center;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
body.menu-open .mobile-menu {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.mobile-menu a {
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 500;
}
.mobile-menu a:hover,
.mobile-menu a.is-active {
  background: var(--surface-inset);
  color: var(--accent-text);
}
.mm-theme,
.mm-link {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 13px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.mm-theme { margin-top: 4px; }
.mm-theme:hover,
.mm-link:hover { background: var(--surface-inset); color: var(--accent-text); }
.mm-theme-to-dark { display: none; }
:root[data-theme="light"] .mm-theme-to-dark { display: inline; }
:root[data-theme="light"] .mm-theme-to-light { display: none; }

/* ----------------------------------------------------------- flash -------- */
.flash-host {
  width: min(var(--container), 100% - 40px);
  margin: 18px auto 0;
}
.flash {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-weight: 500;
}
.flash-success {
  color: var(--success);
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
}
.flash-error {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 28%, transparent);
}

/* =====================================================  LANDING  ========== */
.home {
  width: 100%;
  display: block;
  overflow: clip;
}
.section {
  position: relative;
  padding: clamp(64px, 9vw, 130px) 0;
}
.section-inner {
  width: min(var(--container), 100% - 40px);
  margin: 0 auto;
}
.section-inner.narrow {
  width: min(var(--container-narrow), 100% - 40px);
}
.section-alt {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.section-head {
  max-width: 760px;
  margin-bottom: clamp(34px, 5vw, 58px);
}
.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head.center .section-kicker {
  justify-content: center;
}
.section-head h2 {
  font-size: var(--step-4);
}
.section-head p {
  margin-top: 16px;
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: 1.55;
}

/* ---- hero ---- */
.hero {
  position: relative;
  /* Pull the hero up behind the floating nav so its gradient sits under the
     glass pill, then pad the content back down below the pill. */
  margin-top: calc(var(--nav-flow-h) * -1);
  padding: calc(var(--nav-flow-h) + clamp(34px, 5vh, 66px)) 0 clamp(56px, 7.5vw, 100px);
  overflow: clip;
}
.hero-bg {
  position: absolute;
  inset: -20% -10% auto;
  height: 760px;
  z-index: -1;
  pointer-events: none;
  filter: blur(8px);
}
.hero-glow {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  animation: drift 18s var(--ease) infinite alternate;
}
:root[data-theme="light"] .hero-glow {
  mix-blend-mode: multiply;
}
.hero-glow.g1 { top: -8%; left: 8%; width: 540px; height: 540px; background: radial-gradient(circle, var(--mesh-1), transparent 65%); }
.hero-glow.g2 { top: -14%; right: 4%; width: 620px; height: 620px; background: radial-gradient(circle, var(--mesh-2), transparent 65%); animation-delay: -6s; }
.hero-glow.g3 { top: 18%; left: 38%; width: 520px; height: 520px; background: radial-gradient(circle, var(--mesh-3), transparent 65%); animation-delay: -11s; }
.hero-glow.g4 { top: 2%; right: 30%; width: 420px; height: 420px; background: radial-gradient(circle, var(--mesh-4), transparent 65%); animation-delay: -3s; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(40px, 30px, 0) scale(1.12); }
}

.hero-inner {
  width: min(var(--container), 100% - 40px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.hero-copy { max-width: 620px; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 7px 7px 14px;
  margin-bottom: 18px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  font-size: 0.82rem;
  color: var(--text-muted);
}
.hero-badge b {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.hero-title {
  font-size: clamp(3.1rem, 2rem + 4.1vw, 5.1rem);
  line-height: 0.97;
  letter-spacing: -0.035em;
}
.hero-title .grad {
  background: linear-gradient(120deg, var(--accent-2), var(--accent) 55%, var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  margin-top: 16px;
  max-width: 500px;
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: 1.5;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.hero-cta .button {
  min-height: 52px;
  padding: 0 26px;
  font-size: 1rem;
}
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.signal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* hero terminal / product visual */
.hero-visual {
  position: relative;
}
.app-window {
  position: relative;
  z-index: 1;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: perspective(1400px) rotateY(-9deg) rotateX(3deg);
  transition: transform 0.5s var(--ease);
}
.hero-visual:hover .app-window {
  transform: perspective(1400px) rotateY(-4deg) rotateX(1deg);
}
.app-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.app-bar i {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--border-2);
}
.app-bar i:first-child { background: #ff6b81; }
.app-bar i:nth-child(2) { background: #f7c948; }
.app-bar i:nth-child(3) { background: #3ddc97; }
.app-bar span {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-faint);
}
.app-body {
  display: grid;
  gap: 12px;
  padding: 18px;
}
.app-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.app-row .lbl {
  display: grid;
  gap: 5px;
}
.app-row .lbl b {
  font-family: var(--font-display);
  font-size: 0.96rem;
}
.app-row .lbl small {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.68rem;
}
.app-row .val {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}
.app-row .val.accent { color: var(--accent-text); }
.app-spark {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 40px;
}
.app-spark i {
  width: 7px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  opacity: 0.85;
}
.hero-float {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border: 1px solid var(--border-2);
  border-radius: 14px;
  background: var(--surface-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
  animation: bob 5s var(--ease) infinite alternate;
}
.hero-float .dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 0 4px var(--success-soft);
}
.hero-float.f1 { top: 12%; left: -36px; }
.hero-float.f2 { bottom: 8%; right: -28px; animation-delay: -2.5s; }
@keyframes bob {
  from { transform: translateY(0); }
  to { transform: translateY(-12px); }
}

/* ---- marquee ---- */
.marquee {
  position: relative;
  padding: 26px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
.marquee-track span {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  text-transform: uppercase;
  white-space: nowrap;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---- bento feature grid ---- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gap);
}
.bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.bento-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(420px 220px at var(--mx, 80%) 0%, var(--accent-soft), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.bento-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-glow);
  box-shadow: var(--shadow);
}
.bento-card:hover::after {
  opacity: 1;
}
.bento-card.col-3 { grid-column: span 3; }
.bento-card.col-2 { grid-column: span 2; }
.bento-card.col-4 { grid-column: span 4; }
.bento-card.col-6 { grid-column: span 6; }
.bento-card h3 {
  font-size: var(--step-1);
}
.bento-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}
.feature-ico {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-text);
}
.feature-ico svg { width: 22px; height: 22px; }
.bento-card .feature-foot {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
/* Full-width (col-6) bento cards: text fills the left, the pill stack sits in a
   tidy right column, so the card never leaves an empty right half. Collapses to a
   single column on narrow screens. */
.bento-wide { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; width: 100%; }
.bento-wide > div:first-child { display: flex; flex-direction: column; gap: 12px; }
.bento-wide .mini-stack { margin-top: 0; }
@media (min-width: 760px) {
  .bento-wide { grid-template-columns: minmax(0, 1fr) minmax(200px, 280px); gap: 34px; }
}

/* ---- steps / how it works ---- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  counter-reset: step;
}
.step {
  position: relative;
  padding: 26px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-text);
}
.step h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.step p {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
.step-line {
  position: absolute;
  top: 38px;
  right: -webkit-calc(var(--gap) * -0.5);
  right: calc(var(--gap) * -0.5 - 1px);
  width: var(--gap);
  height: 1px;
  background: var(--border-2);
}

/* ---- includes grid ---- */
.includes-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}
.includes-grid span {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 500;
}
.includes-grid span::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
}
.mini-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
}
.mini-stack span {
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* ---- faq ---- */
.faq {
  display: grid;
  gap: 10px;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.faq-item.is-open {
  border-color: var(--border-glow);
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 22px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.faq-q .ico {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}
.faq-q .ico::before,
.faq-q .ico::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--accent-text);
  transition: transform 0.3s var(--ease);
}
.faq-q .ico::before { width: 14px; height: 2px; }
.faq-q .ico::after { width: 2px; height: 14px; }
.faq-item.is-open .faq-q .ico::after { transform: scaleY(0); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease);
}
.faq-a p {
  padding: 0 22px 22px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---- testimonial / quote ---- */
.quote-band {
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
.quote-band blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.22;
  letter-spacing: -0.02em;
}
.quote-band blockquote .grad {
  background: linear-gradient(120deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.quote-cite {
  margin-top: 26px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

/* ---- CTA band ---- */
.cta-band {
  position: relative;
  padding: clamp(48px, 7vw, 92px);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 160% at 100% 0%, var(--accent-soft), transparent 60%),
    radial-gradient(120% 160% at 0% 100%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 60%),
    var(--surface);
  overflow: hidden;
  text-align: center;
}
.cta-band h2 {
  font-size: var(--step-4);
  max-width: 640px;
  margin: 0 auto;
}
.cta-band p {
  max-width: 520px;
  margin: 16px auto 0;
  color: var(--text-muted);
  font-size: var(--step-1);
}
.cta-band .hero-cta {
  justify-content: center;
}

/* ---- use cases ---- */
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.usecase {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 24px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.usecase:hover {
  transform: translateY(-4px);
  border-color: var(--border-glow);
  box-shadow: var(--shadow);
}
.usecase h3 {
  font-size: 1.04rem;
}
.usecase p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}
.usecase-ico {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-text);
}
.usecase-ico svg {
  width: 20px;
  height: 20px;
}
.usecase-feature {
  border-color: var(--accent-line);
  background:
    radial-gradient(130% 130% at 100% 0%, var(--accent-soft), transparent 62%),
    var(--surface);
}
.usecase-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- floating CTA ---- */
.floating-cta {
  position: fixed;
  z-index: 90;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 16px 40px -10px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(160%);
  opacity: 0;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease), box-shadow 0.25s var(--ease);
}
.floating-cta.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.floating-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 52px -10px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}
.floating-cta svg {
  width: 17px;
  height: 17px;
}
.floating-cta .cta-price {
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid rgba(0, 0, 0, 0.22);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .floating-cta {
    left: 50%;
    right: auto;
    bottom: 16px;
    transform: translate(-50%, 180%);
  }
  .floating-cta.is-visible {
    transform: translate(-50%, 0);
  }
  .floating-cta:hover {
    transform: translate(-50%, -3px);
  }
}

/* =====================================================  FOOTER  =========== */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.footer-grid {
  width: min(var(--container), 100% - 40px);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 76px) 0 0;
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
}
.footer-brand p {
  margin-top: 16px;
  max-width: 320px;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}
.footer-col h4 {
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.footer-col a {
  display: block;
  padding: 6px 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  transition: color 0.16s var(--ease);
}
.footer-col a:hover {
  color: var(--accent-text);
}
.footer-bottom {
  width: min(var(--container), 100% - 40px);
  margin: clamp(40px, 5vw, 60px) auto 0;
  padding: 22px 0 36px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--text-faint);
  font-size: 0.86rem;
}
.footer-bottom .footer-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* =====================================================  PRICING  ========== */
.pricing-hero h1,
.page-hero h1,
.dashboard-hero h1 {
  font-size: var(--step-4);
}
.page-hero,
.pricing-hero,
.dashboard-hero {
  padding: clamp(28px, 4vw, 46px);
}
.page-hero p,
.pricing-hero p,
.dashboard-hero p {
  margin-top: 14px;
  color: var(--text-muted);
  font-size: var(--step-1);
  max-width: 640px;
}

.billing-toggle {
  display: inline-flex;
  width: fit-content;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
}
.billing-toggle a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  color: var(--text-muted);
  font-weight: 600;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.billing-toggle a.is-active {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  box-shadow: 0 8px 20px -8px var(--accent-glow);
}
.billing-save {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: inherit;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.billing-toggle a.is-active .billing-save {
  background: rgba(255, 255, 255, 0.28);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
.price-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.price-plan.is-current {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 1px var(--accent-line), var(--shadow);
}
.price-plan.is-pending-change {
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}
.plan-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.plan-topline .eyebrow {
  margin-bottom: 0;
}
/* The "Current · monthly" badge straddles the top border of the active plan card
   (absolute, half on / half off) so it never pushes the card content down or
   changes the card height. Opaque bg so the card border doesn't show through. */
.plan-current-pill {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--success) 38%, transparent);
  background: color-mix(in srgb, var(--success) 16%, var(--bg));
}
.plan-current-pill.status-pending {
  border-color: color-mix(in srgb, var(--warn) 38%, transparent);
  background: color-mix(in srgb, var(--warn) 16%, var(--bg));
}
.pricing-page[data-billing="monthly"] .billing-view[data-billing="yearly"],
.pricing-page[data-billing="yearly"] .billing-view[data-billing="monthly"] {
  display: none;
}
.plan-price {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  letter-spacing: -0.03em;
}
.plan-price small {
  color: var(--text-faint);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
}
.plan-price-note {
  display: block;
  margin-top: 6px;
  color: var(--accent, var(--text-faint));
  font-size: 0.85rem;
  font-weight: 600;
}
.launch-note {
  margin-top: 10px;
  font-weight: 600;
  color: var(--accent, inherit);
}
.plan-price-stack {
  display: grid;
  gap: 5px;
}
.was-price {
  width: fit-content;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-decoration: line-through;
}
.price-note {
  color: var(--text-faint);
  font-size: 0.82rem;
  line-height: 1.4;
}
.plan-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.plan-meta span,
.theme-mode {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-inset);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.plan-actions {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
}
.plan-actions .button {
  width: 100%;
}
.plan-schedule-slot:empty {
  display: none;
}

.lazy-billing-slot {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lazy-billing-slot.is-done { color: var(--success); }
.lazy-billing-slot.is-error { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--text-muted) 30%, transparent);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.schedule-card {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--border));
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
}
.schedule-card-next {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.schedule-card span {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.schedule-card strong { font-size: 0.95rem; }
.schedule-card time {
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surface-inset);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
}

/* =====================================================  PRODUCTS  ========= */
.product-sales-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
  gap: var(--gap);
  align-items: start;
}
.product-card-grid,
.product-support-stack {
  display: grid;
  gap: var(--gap);
}
.product-plan {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.flow-list {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.flow-list li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.flow-list span {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: linear-gradient(150deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
}
/* Downloads: full-width cards (one per purchase), split into purchase + private
   link on the left and the actual download buttons on the right. */
.downloads-list {
  display: grid;
  gap: var(--gap, 18px);
}
.download-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(20px, 3.5vw, 44px);
  align-items: start;
}
.download-card-info,
.download-card-files {
  display: grid;
  gap: 16px;
  align-content: start;
}
.download-card-files > .eyebrow { margin-bottom: -4px; }
@media (max-width: 768px) {
  .download-card { grid-template-columns: 1fr; gap: 20px; }
}
.panel-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* =====================================================  DASHBOARD  ======== */
.dashboard-hero .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.62fr);
  gap: var(--gap);
  align-items: start;
}
.account-card {
  display: grid;
  gap: 7px;
  padding: 18px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--surface-inset);
}
.account-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.account-email {
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-size: 1.32rem;
  line-height: 1.2;
}
.action-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
}

/* =====================================================  ADMIN  ============ */
/* Admin operator-action controls (user detail + webhook detail). */
.admin-ops {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.admin-ops > .eyebrow { display: block; margin-bottom: 10px; }
.admin-ops-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.admin-ops-form {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.admin-ops-form input,
.admin-ops-form select {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}
.admin-ops-form input[type="number"] { width: 120px; }
.admin-ops-form input[type="text"] { width: 170px; }
.admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.admin-metrics { margin-bottom: 14px; }

/* ----------------------------------------------------- /billing page ------ */
.billing-cols {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: var(--gap, 18px);
  align-items: start;
}
.billing-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.billing-plan {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 14px 0 18px;
}
.billing-facts { display: grid; gap: 12px; margin: 0 0 20px; }
.billing-facts > div { display: grid; gap: 2px; }
.billing-facts dt {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.billing-facts dd { margin: 0; color: var(--text); font-size: 0.95rem; }
.billing-summary .portal-button { width: 100%; }
.billing-summary .hint { margin-top: 12px; font-size: 0.85rem; color: var(--text-muted); }
.billing-table { width: 100%; border-collapse: collapse; }
.billing-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border);
}
.billing-table td { padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.billing-table tr:last-child td { border-bottom: 0; }
.billing-table .inv-link { text-align: right; }
.billing-table .inv-link a { color: var(--accent-text); font-weight: 600; }
.skeleton {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-inset) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.3s var(--ease) infinite;
}
.skeleton-pill { width: 64px; height: 22px; border-radius: 999px; }
.skeleton-h { width: 60%; height: 30px; margin: 14px 0 18px; }
.skeleton-line { width: 80%; height: 14px; }
.skeleton-btn { width: 100%; height: 42px; border-radius: var(--radius-sm); margin-top: 4px; }
.billing-skeleton-rows { display: grid; gap: 14px; margin-top: 16px; }
.skeleton-row { width: 100%; height: 18px; }
@keyframes skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
@media (max-width: 760px) { .billing-cols { grid-template-columns: 1fr; } }

/* ============================ AI Image Studio ============================== */
.studio-page, .gallery-page { padding-bottom: clamp(40px, 6vw, 72px); }
.studio-setup-banner {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 20px; padding: 14px 18px;
  border: 1px solid var(--accent-line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.studio-setup-ico { font-size: 1.6rem; line-height: 1; }
.studio-setup-banner strong { display: block; }
.studio-setup-banner span { color: var(--text-muted); font-size: 0.92rem; }

.studio-shell {
  display: grid;
  grid-template-columns: minmax(320px, 380px) 1fr;
  gap: clamp(18px, 2.4vw, 32px);
  align-items: start;
}
.studio-composer {
  position: sticky; top: calc(var(--nav-flow-h) + 12px);
  border: 1px solid var(--border); border-radius: var(--radius-lg, 20px);
  background: var(--surface);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.composer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.credit-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border-2); background: var(--surface-2);
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--text);
}
.credit-badge svg { width: 15px; height: 15px; color: var(--accent-text); }
.composer-label {
  display: block; margin: 16px 0 8px;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint);
}
.composer-label:first-of-type { margin-top: 0; }
.composer-prompt, .composer-fold textarea {
  width: 100%; resize: vertical; min-height: 92px;
  padding: 12px 14px; border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 0.96rem; line-height: 1.5;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.composer-prompt:focus, .composer-fold textarea:focus {
  outline: none; border-color: var(--border-glow);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.composer-fold { margin-top: 12px; }
.composer-fold summary {
  cursor: pointer; list-style: none; user-select: none;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-faint); padding: 4px 0;
}
.composer-fold summary::-webkit-details-marker { display: none; }
.composer-fold summary::after { content: " +"; }
.composer-fold[open] summary::after { content: " –"; }
.composer-fold textarea { min-height: 56px; margin-top: 8px; }

.seg-group { display: flex; gap: 8px; }
.model-group { flex-direction: column; }
.seg {
  flex: 1; cursor: pointer; text-align: left;
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); padding: 10px 12px;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease), transform 0.16s var(--ease);
}
.model-opt { display: grid; gap: 2px; }
.seg-title { font-weight: 600; font-size: 0.92rem; }
.seg-sub { font-size: 0.74rem; color: var(--text-muted); }
.count-group .seg { text-align: center; font-weight: 600; }
.seg:hover { border-color: var(--border-glow); }
.seg.is-on {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  box-shadow: 0 0 0 1px var(--accent), 0 6px 18px -10px var(--accent-glow);
}
.seg.is-on .seg-sub { color: var(--text); }

.ratio-group { display: flex; gap: 8px; flex-wrap: wrap; }
.ratio-opt {
  cursor: pointer; flex: 1 1 0; min-width: 56px;
  display: grid; gap: 6px; justify-items: center;
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 10px 6px;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}
.ratio-box { width: 26px; background: var(--border-2); border-radius: 4px; }
.ratio-name { font-size: 0.66rem; color: var(--text-muted); }
.ratio-opt:hover { border-color: var(--border-glow); }
.ratio-opt.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); box-shadow: 0 0 0 1px var(--accent); }
.ratio-opt.is-on .ratio-box { background: var(--accent); }
.ratio-opt.is-on .ratio-name { color: var(--text); }

.adv-row { display: grid; gap: 6px; margin: 12px 0; }
.adv-row label { font-size: 0.82rem; color: var(--text-muted); display: flex; justify-content: space-between; }
.adv-row label em { color: var(--text); font-style: normal; font-family: var(--font-mono); }
.adv-row input[type="range"] { width: 100%; accent-color: var(--accent); }
.seed-input { display: flex; gap: 8px; }
.seed-input input { flex: 1; height: 38px; padding: 0 12px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font: inherit; }
.seed-dice { width: 38px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); cursor: pointer; font-size: 1.05rem; }
.seed-dice:hover { border-color: var(--border-glow); }

.gen-submit {
  position: relative; width: 100%; margin-top: 20px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; font-size: 1rem; font-weight: 700;
}
.gen-cost { font-family: var(--font-mono); font-size: 0.82rem; opacity: 0.85; }
.gen-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.gen-submit.is-loading { color: transparent; }
.gen-submit.is-loading::after {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--accent-ink) 40%, transparent); border-top-color: var(--accent-ink);
  animation: spin 0.7s linear infinite;
}
.composer-hint { margin: 8px 0 0; font-size: 0.82rem; color: var(--danger); text-align: center; min-height: 1em; }
@keyframes spin { to { transform: rotate(360deg); } }

/* canvas / results */
.studio-canvas { min-height: 60vh; }
/* "Surprise me" prompt chip under the composer textarea */
.composer-prompt-tools { display: flex; justify-content: flex-end; margin: -2px 0 2px; }
.prompt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border-2); background: var(--surface-2);
  color: var(--text-muted); font-size: 0.82rem; font-weight: 600; cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.prompt-chip:hover { color: var(--accent-text); border-color: var(--border-glow); background: var(--surface-inset); }
.prompt-chip svg { width: 14px; height: 14px; }

/* In-place generation: skeleton thumbs live in the recent grid and each swaps to
   the finished image when it lands (app.js loadingThumbs()/fillThumbs()) — there is
   no big preview box, so the page never jumps on Generate. */
.recent-thumb.is-loading {
  position: relative; cursor: default;
  background: linear-gradient(110deg, var(--surface-2) 30%, color-mix(in srgb, var(--accent) 14%, var(--surface-inset)) 50%, var(--surface-2) 70%);
  background-size: 220% 100%; animation: skeleton-shimmer 1.4s var(--ease) infinite;
}
.recent-thumb.is-loading:hover { transform: none; border-color: var(--border); }
.thumb-spinner {
  position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; border: 2px solid color-mix(in srgb, var(--text) 16%, transparent);
  border-top-color: var(--accent); animation: spin 0.7s linear infinite;
}
.recent-thumb.is-fresh { animation: thumb-pop 0.45s var(--ease) both; }
@keyframes thumb-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .recent-thumb.is-loading { animation: none; }
  .recent-thumb.is-fresh { animation: none; }
}

.studio-empty { display: grid; place-items: center; text-align: center; padding: clamp(40px, 8vw, 90px) 20px; }
.studio-empty-orb {
  width: 96px; height: 96px; border-radius: 50%; margin-bottom: 22px;
  background: radial-gradient(circle at 35% 30%, var(--accent-2), var(--accent) 60%, transparent 72%);
  box-shadow: 0 0 60px -8px var(--accent-glow); animation: orb-pulse 3.4s var(--ease) infinite;
}
@keyframes orb-pulse { 0%,100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.08); opacity: 1; } }
.studio-empty h2 { margin: 0 0 8px; font-size: var(--step-3); }
.studio-empty p { color: var(--text-muted); max-width: 420px; }

.studio-recent { margin-top: clamp(28px, 4vw, 44px); }
.recent-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.recent-all { font-size: 0.85rem; color: var(--accent-text); font-weight: 600; }
.recent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.recent-thumb { aspect-ratio: 1 / 1; cursor: pointer; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); transition: transform 0.18s var(--ease), border-color 0.18s var(--ease); }
.recent-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.recent-thumb:hover { transform: translateY(-2px); border-color: var(--border-glow); }

/* ------------------------------- gallery ---------------------------------- */
.gallery-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gallery-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 18px 0 22px; }
.filter-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-2);
  background: var(--surface-2); color: var(--text-muted); font-size: 0.86rem; font-weight: 500;
  cursor: pointer; transition: color 0.16s var(--ease), border-color 0.16s var(--ease), background 0.16s var(--ease);
}
.pill span { font-family: var(--font-mono); font-size: 0.72rem; opacity: 0.7; }
.pill:hover { color: var(--text); border-color: var(--border-glow); }
.pill.is-on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.pill.is-on span { opacity: 0.85; }
.pill-add { border-style: dashed; }
.folder-actions { display: flex; gap: 14px; }
.folder-actions .link-button { background: none; border: 0; cursor: pointer; font: inherit; color: var(--text-muted); }
.folder-actions .link-button:hover { color: var(--text); }
.folder-actions .is-danger:hover { color: var(--danger); }

/* Uniform square thumbnail grid (the class is still ".masonry" for compatibility,
   but tiles are now 1:1, not variable-height). Mixed portrait/landscape ratios
   broke the layout; every tile is square with the image cover-cropped + centred.
   The full, uncropped image is shown in the lightbox. */
.masonry { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.masonry-item { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.masonry-img { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.masonry-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.4s var(--ease); }
.masonry-item:hover .masonry-img img { transform: scale(1.04); }
.masonry-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 12px; gap: 8px; opacity: 0; pointer-events: none; /* let image clicks reach the lightbox */
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
  transition: opacity 0.2s var(--ease);
}
.masonry-item:hover .masonry-overlay, .masonry-item:focus-within .masonry-overlay { opacity: 1; }
.masonry-prompt { margin: 0; color: #fff; font-size: 0.8rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; pointer-events: none; }
.masonry-actions { display: flex; gap: 8px; pointer-events: auto; }
.img-act {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 0; cursor: pointer; background: rgba(255,255,255,0.16); color: #fff; font-size: 1rem;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-decoration: none;
  transition: background 0.16s var(--ease), transform 0.16s var(--ease);
}
.img-act:hover { background: rgba(255,255,255,0.3); transform: translateY(-1px); }
.img-act.js-img-like.is-liked { background: var(--accent); color: var(--accent-ink); }

/* ------------------------------ lightbox ---------------------------------- */
body.lb-open { position: fixed; left: 0; right: 0; overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; grid-template-columns: 1fr minmax(280px, 340px); align-items: stretch;
  background: rgba(8, 7, 12, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lightbox[hidden] { display: none; }
.lb-stage { grid-column: 1; display: grid; place-items: center; padding: clamp(16px, 3vw, 48px); min-width: 0; }
.lb-stage img { max-width: 100%; max-height: 88vh; border-radius: 10px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7); }
.lb-meta {
  grid-column: 2; overflow-y: auto; padding: 28px 24px;
  background: var(--surface); border-left: 1px solid var(--border);
}
.lb-prompt { margin: 0 0 18px; color: var(--text); font-size: 0.98rem; line-height: 1.55; }
.lb-facts { display: grid; gap: 12px; margin: 0 0 22px; }
.lb-facts > div { display: grid; gap: 2px; }
.lb-facts dt { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.lb-facts dd { margin: 0; color: var(--text); font-size: 0.9rem; }
.lb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-actions .button { flex: 1 1 auto; }
.lb-actions #lb-like.is-on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.lb-folders { margin-top: 12px; display: grid; gap: 4px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.lb-folders[hidden] { display: none; }
.lb-folder-opt { text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; font: inherit; font-size: 0.9rem; }
.lb-folder-opt:hover { background: var(--surface-inset); }
.lb-folder-opt.is-on { color: var(--accent-text); font-weight: 600; }
/* Solid dark chip parked in the dark gutter just left of the meta panel (same
   right edge as the next arrow) so it never overlaps the prompt text. The dark
   fill keeps it visible over both the scrim and a bright image. On mobile the
   panel stacks below, so it returns to the top-right corner (media query). */
.lb-close { position: absolute; top: 16px; right: calc(min(340px, 36vw) + 18px); z-index: 6; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); background: rgba(18,16,24,0.82); color: #fff; font-size: 1.6rem; line-height: 1; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); box-shadow: 0 4px 16px rgba(0,0,0,0.35); }
.lb-close:hover { background: rgba(18,16,24,0.95); transform: scale(1.05); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.1); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; backdrop-filter: blur(6px); }
.lb-nav:hover { background: rgba(255,255,255,0.22); }
.lb-prev { left: 18px; }
.lb-next { right: calc(min(340px, 36vw) + 18px); }

@media (max-width: 920px) {
  .studio-shell { grid-template-columns: 1fr; }
  .studio-composer { position: static; }
  .masonry { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 760px) {
  /* Use the dynamic viewport height so the panel's bottom sits at the *visible*
     bottom (not behind the mobile browser toolbar), give the meta more room, and
     pad the bottom (incl. the safe-area inset) so the action buttons always clear
     the edge and are never clipped when the panel scrolls. */
  .lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; bottom: auto; height: 100vh; height: 100dvh; }
  .lb-stage { grid-column: 1; min-height: 0; padding: 14px; }
  .lb-stage img { max-height: 44vh; max-height: 44dvh; }
  .lb-meta { grid-column: 1; border-left: 0; border-top: 1px solid var(--border); max-height: 50vh; max-height: 50dvh; padding: 18px 18px calc(env(safe-area-inset-bottom, 0px) + 22px); }
  .lb-next { right: 18px; }
  .lb-close { right: 16px; }
  .lb-nav { top: 30vh; }
  .masonry { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
  .masonry-overlay { opacity: 1; pointer-events: auto; }
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 1px;
  margin: 0 0 2px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--border); /* shows through the 1px gaps as hairline dividers */
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.admin-stats .stat {
  display: grid;
  gap: 4px;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  transition: background 0.16s var(--ease);
}
.admin-stats .stat:hover {
  background: var(--surface-2);
}
.admin-stats .stat strong {
  order: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
}
.admin-stats .stat span {
  order: 2;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.admin-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.18s var(--ease);
}
.admin-tabs a:hover {
  color: var(--text);
  border-color: var(--border-glow);
}
.admin-tabs a.is-active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.admin-overview-panels {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: var(--gap);
}
.admin-overview-panels .admin-table-panel {
  grid-column: span 2;
}
.attention-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.attention-list a {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.attention-list a:hover {
  border-color: var(--border-glow);
  transform: translateY(-2px);
}
.attention-list strong {
  font-family: var(--font-display);
  font-size: 1.7rem;
}
.attention-list span {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
}
.admin-search-panel { padding: 20px; }
.admin-search-form {
  display: grid;
  grid-template-columns: 150px minmax(220px, 1fr) minmax(150px, 220px) auto;
  gap: 12px;
  align-items: end;
}
.admin-table-panel,
.admin-detail-page {
  margin-bottom: 4px;
}
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-sm);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.admin-table th,
.admin-table td {
  padding: 14px 14px;
  text-align: left;
  vertical-align: middle;
  border-top: 1px solid var(--border);
}
.admin-table thead th {
  border-top: 0;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.admin-table td {
  color: var(--text-muted);
  font-size: 0.9rem;
}
.admin-table td > strong,
.admin-table td > a {
  color: var(--text);
  font-weight: 600;
}
.admin-table td > a:hover { color: var(--accent-text); }
.admin-table td > span {
  display: block;
  margin-top: 3px;
  color: var(--text-faint);
  font-size: 0.78rem;
}
.admin-table-compact { min-width: 600px; }
.admin-table tbody tr {
  transition: background 0.14s var(--ease);
}
.admin-table tbody tr:hover {
  background: var(--surface-inset);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.88rem;
}
.pagination div { display: flex; gap: 8px; }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.9rem;
}
.back-link:hover { color: var(--accent-text); }
.back-link::before { content: "←"; }

.admin-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.admin-detail-header h1 {
  font-size: var(--step-3);
}
.admin-detail-header p {
  margin-top: 8px;
  color: var(--text-muted);
}
.admin-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.admin-facts span,
.admin-warning {
  display: grid;
  gap: 3px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.admin-facts strong {
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.96rem;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
}
.admin-warning {
  grid-column: 1 / -1;
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  background: var(--danger-soft);
  color: var(--danger);
  text-transform: none;
  font-family: var(--font-body);
}
.admin-notes-form,
.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 18px 0;
}
.admin-notes-form { display: grid; }
.admin-detail-sections {
  display: grid;
  gap: 22px;
  margin-top: 24px;
}
.admin-detail-sections section {
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.payload-view { margin-top: 18px; }
.payload-view summary {
  cursor: pointer;
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.payload-view pre {
  max-height: 520px;
  overflow: auto;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #0a0a0d;
  color: #e7e3dd;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.6;
}

/* =====================================================  THEMES PAGE  ====== */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
.theme-card {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 180px;
  /* Accent shown on the cards follows the live palette (reactive to data-accent). */
  --theme-primary: var(--accent);
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--theme-primary) 20%, transparent), transparent 60%),
    var(--theme-surface);
  color: var(--theme-ink);
  border: 1px solid color-mix(in srgb, var(--theme-primary) 34%, transparent);
}
.theme-card strong {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--theme-ink);
}
.theme-card span:not(.theme-mode) {
  color: color-mix(in srgb, var(--theme-ink) 72%, transparent);
  line-height: 1.5;
}
.theme-card em {
  align-self: end;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--theme-primary);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 600;
}
.theme-card.is-active {
  box-shadow: 0 0 0 2px var(--theme-primary), var(--shadow);
}

/* =====================================================  MODAL  ============ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 6, 9, 0.62);
  backdrop-filter: blur(8px);
}
.modal-backdrop.hidden { display: none; }
.modal-card {
  width: min(520px, 100%);
  padding: 30px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.3s var(--ease);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.modal-card h2 {
  margin: 6px 0 10px;
  font-size: var(--step-2);
}
.modal-card p {
  color: var(--text-muted);
  line-height: 1.6;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* legal */
.legal-page .plain-list { margin-top: 16px; }

/* ==============================================  social sign-in  ========= */
.social-wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(30px, 5vw, 76px);
  align-items: center;
}
.social-copy h2 { font-size: var(--step-4); }
.social-copy > p {
  margin-top: 16px;
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: 1.55;
}
.social-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.social-actions .oauth-button { flex: 1 1 220px; }
/* These two are a feature SHOWCASE, not the real sign-in (that lives on the
   login page). Make them read as a static preview, not clickable controls. */
.social-actions .oauth-demo { cursor: default; }
.social-actions .oauth-demo:hover { transform: none; box-shadow: none; }
.oauth-google {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-2);
}
.social-note {
  margin-top: 20px;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}
.social-note .dot-live {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}
.social-note a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.dot-live {
  width: 8px; height: 8px; flex: none;
  border-radius: 999px;
  background: var(--success);
  animation: livePulse 2.2s var(--ease) infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 var(--success-soft); }
  70%, 100% { box-shadow: 0 0 0 8px transparent; }
}

.social-demo { display: flex; justify-content: center; }
.signin-card {
  position: relative;
  width: min(360px, 100%);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.signin-card-head {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-faint);
}
.auth-logo {
  width: 16px; height: 16px; flex: none;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
}
.signin-card-body {
  position: relative;
  display: grid; gap: 12px;
  padding: 26px 22px 32px;
}
.signin-card-title {
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  text-align: center;
}
.auth-mock-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 0.92rem; font-weight: 600;
}
.auth-mock-btn svg { width: 17px; height: 17px; }
.auth-mock-btn.dark { background: #000; color: #fff; border-color: #000; }
:root[data-theme="dark"] .auth-mock-btn.dark { background: #fff; color: #000; }
/* sign-in mock: cursor clicks Apple -> button spins -> "Signed in" (7s loop) */
.auth-apple { position: relative; animation: authApplePress 7s var(--ease) infinite; }
.auth-apple-content { display: inline-flex; align-items: center; gap: 9px; animation: authContentOut 7s var(--ease) infinite; }
@keyframes authApplePress {
  0%, 21% { transform: scale(1); }
  24% { transform: scale(0.965); }
  28%, 100% { transform: scale(1); }
}
@keyframes authContentOut {
  0%, 26% { opacity: 1; }
  31%, 90% { opacity: 0; }
  96%, 100% { opacity: 1; }
}
.auth-spin {
  position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
  border-top-color: currentColor;
  opacity: 0; pointer-events: none;
  animation: authSpinShow 7s var(--ease) infinite, authSpin 0.7s linear infinite;
}
@keyframes authSpinShow {
  0%, 28% { opacity: 0; }
  33%, 52% { opacity: 1; }
  57%, 100% { opacity: 0; }
}
@keyframes authSpin { to { transform: rotate(360deg); } }
.auth-google { animation: authGoogleDim 7s var(--ease) infinite; }
@keyframes authGoogleDim {
  0%, 23% { opacity: 1; }
  30%, 90% { opacity: 0.38; }
  96%, 100% { opacity: 1; }
}
.auth-cursor {
  position: absolute; top: 72px; left: 50%;
  width: 22px; height: 22px;
  color: var(--text);
  opacity: 0; pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  animation: authCursor 7s var(--ease) infinite;
}
.auth-cursor svg { width: 100%; height: 100%; display: block; }
@keyframes authCursor {
  0%, 9% { opacity: 0; transform: translate(30px, 34px) scale(1); }
  15% { opacity: 1; transform: translate(8px, 11px) scale(1); }
  20% { opacity: 1; transform: translate(0, 0) scale(1); }
  23% { opacity: 1; transform: translate(0, 0) scale(0.8); }
  27% { opacity: 1; transform: translate(0, 0) scale(1); }
  33% { opacity: 0; transform: translate(2px, -4px) scale(1); }
  100% { opacity: 0; }
}
.auth-success {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: var(--surface);
  text-align: center;
  opacity: 0; visibility: hidden;
  animation: authSuccess 7s var(--ease) infinite;
}
.auth-success strong { font-family: var(--font-display); font-size: 1.35rem; }
.auth-success-sub { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.74rem; }
.auth-check {
  display: grid; place-items: center;
  width: 56px; height: 56px; margin-bottom: 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--success);
  animation: authCheckPop 7s var(--ease) infinite;
}
.auth-check svg { width: 27px; height: 27px; }
@keyframes authSuccess {
  0%, 53% { opacity: 0; visibility: hidden; }
  59%, 90% { opacity: 1; visibility: visible; }
  96%, 100% { opacity: 0; visibility: hidden; }
}
@keyframes authCheckPop {
  0%, 55% { transform: scale(0.3); }
  62% { transform: scale(1.12); }
  67%, 100% { transform: scale(1); }
}

/* ==============================================  admin console  ========== */
.console {
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.console-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-faint);
}
.console-bar i { width: 11px; height: 11px; flex: none; border-radius: 999px; background: var(--border-2); }
.console-bar i:first-child { background: #ff6b81; }
.console-bar i:nth-child(2) { background: #f7c948; }
.console-bar i:nth-child(3) { background: #3ddc97; }
.console-url { margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console-path { color: var(--accent-text); }
.console-live {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase;
}
.console-tabs {
  display: flex; gap: 2px;
  padding: 8px 10px 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.console-tabs::-webkit-scrollbar { display: none; }
.console-tab {
  position: relative;
  padding: 11px 16px;
  border: 0; background: none;
  color: var(--text-muted);
  font-family: var(--font-body); font-size: 0.92rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: color 0.18s var(--ease);
}
.console-tab:hover { color: var(--text); }
.console-tab.is-active { color: var(--text); }
.console-tab.is-active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 2px;
}
.console-body { padding: clamp(16px, 2.4vw, 26px); min-height: 280px; }
.console-panel { display: none; }
.console-panel.is-active { display: block; animation: panelIn 0.4s var(--ease-out); }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- template showcase (a second .console; tabs wired by ui.js) ---- */
.showcase-split { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.4vw, 30px); align-items: center; }
@media (min-width: 880px) { .showcase-split { grid-template-columns: 1fr 1fr; } }
/* let the code/mockup columns shrink so the pre-formatted code scrolls inside its
   own box instead of forcing the whole console wider than a phone screen */
.showcase-split > * { min-width: 0; }
.showcase-copy h3 { font-size: var(--step-1); margin-bottom: 8px; }
.showcase-copy > p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.55; margin: 0 0 16px; }
.showcase-copy .console-term { margin-top: 4px; }
.showcase-shot { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); padding: 16px; }
/* studio: image tile grid */
.shot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.shot-tile { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); position: relative; overflow: hidden; }
.shot-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(255,255,255,.12), transparent 60%); }
.shot-tile.t1 { background: linear-gradient(150deg, #ff7a59, #6c4cff); }
.shot-tile.t2 { background: linear-gradient(150deg, #18c2a8, #0b6efd); }
.shot-tile.t3 { background: linear-gradient(150deg, #ffb020, #ff5470); }
.shot-tile.t4 { background: linear-gradient(150deg, #7c5cff, #ff7ac6); }
.shot-tile.t5 { background: linear-gradient(150deg, #0ea5e9, #22d3a5); }
.shot-tile.t6 { background: linear-gradient(150deg, #f43f5e, #f59e0b); }
/* generic mockup rows (plans, ledger, members, endpoints) */
.shot-rows { display: grid; gap: 9px; }
.shot-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.shot-head strong { font-size: var(--step-1); }
.shot-head span { font-size: 0.78rem; color: var(--text-faint); font-family: var(--font-mono); }
.shot-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 0.9rem; }
.shot-row b { font-weight: 600; }
.shot-row .muted { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.82rem; }
.shot-row .price { font-weight: 700; }
.shot-row .delta { font-family: var(--font-mono); font-weight: 600; }
.shot-row .delta.up { color: var(--success); }
.shot-row .delta.down { color: var(--accent-text); }
.showcase-foot { text-align: center; color: var(--text-muted); font-size: 0.92rem; margin-top: clamp(20px, 3vw, 30px); }
.showcase-foot strong { color: var(--text); }

.console-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cmetric {
  padding: 15px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-inset);
}
.cmetric span {
  display: block;
  color: var(--text-faint); font-family: var(--font-mono);
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
.cmetric strong {
  display: block; margin: 9px 0 3px;
  font-family: var(--font-display); font-size: var(--step-2); line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.cmetric em { font-style: normal; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-faint); }
.cmetric em.up { color: var(--success); }
.console-chart {
  display: flex; align-items: flex-end; gap: clamp(5px, 1.5vw, 13px);
  height: 100px; margin-top: 14px; padding: 16px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-inset);
}
.console-chart i {
  flex: 1; height: var(--h, 50%);
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  opacity: 0.9; transform-origin: bottom;
}
.console-panel[data-panel="overview"].is-active .console-chart i {
  animation: barGrow 0.7s var(--ease-out) backwards;
}
@keyframes barGrow { from { transform: scaleY(0.02); opacity: 0; } to { transform: scaleY(1); opacity: 0.9; } }

.console-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.console-table th {
  text-align: left; padding: 9px 12px;
  color: var(--text-faint); font-family: var(--font-mono);
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.console-table td { padding: 13px 12px; border-bottom: 1px solid var(--border); }
.console-table tbody tr:last-child td { border-bottom: 0; }
.console-table td:first-child { font-family: var(--font-mono); font-size: 0.83rem; }

.console-stream { display: grid; gap: 8px; }
.stream-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-inset);
  font-size: 0.86rem;
}
.stream-row code { font-family: var(--font-mono); font-size: 0.79rem; color: var(--text); }
.stream-id { margin-left: auto; font-family: var(--font-mono); font-size: 0.71rem; color: var(--text-faint); }
.stream-row time { font-family: var(--font-mono); font-size: 0.71rem; color: var(--text-faint); min-width: 60px; text-align: right; }
.console-panel[data-panel="webhooks"].is-active .stream-row {
  animation: streamIn 0.5s var(--ease-out) backwards;
  animation-delay: calc(var(--si, 0) * 85ms);
}
@keyframes streamIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

.console-term {
  margin: 0; padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 0.52rem + 0.7vw, 0.85rem);
  line-height: 1.75; color: var(--text-muted);
  overflow-x: auto; white-space: pre;
}
.t-cmd { color: var(--accent-text); font-weight: 700; }
.t-str { color: var(--success); }
.t-prop { color: var(--info); }
.t-bool { color: var(--accent-2); }
.t-num { color: var(--warn); }
.t-punc { color: var(--text-faint); }

/* ==============================================  metric band  =========== */
.metric-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.metric {
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-inset);
}
.metric .count {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-4); line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.metric-unit {
  display: block; margin: 10px 0 12px;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--accent-text);
}
.metric p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; }
.metric p a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }

/* supply-chain stat row — reuses .metric cards, three across */
.supply-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: clamp(28px, 4vw, 46px);
}
@media (max-width: 880px) { .supply-band { grid-template-columns: 1fr; } }

/* supply-chain comparison: a pulsing "package cloud" vs four clean chips */
.dep-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(14px, 2.5vw, 34px); align-items: stretch; margin-top: clamp(28px, 4vw, 46px); }
.dep-col { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: clamp(18px, 2.4vw, 28px); }
.dep-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.dep-col-head strong { font-size: var(--step-1); }
.dep-col-head span { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-faint); }
.dep-cloud { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(10px, 1fr)); gap: 6px; align-content: start; min-height: 182px; }
.dep-cloud span { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--danger) 72%, var(--surface-2)); animation: depPulse 2.8s var(--ease) infinite; animation-delay: var(--d); }
@keyframes depPulse { 0%, 100% { opacity: 0.44; transform: scale(0.86); } 50% { opacity: 1; transform: scale(1); } }
.dep-chips { flex: 1; display: grid; gap: 11px; align-content: center; }
.dep-chips span { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); font-family: var(--font-mono); font-size: 0.95rem; color: var(--text); }
.dep-chips span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 16%, transparent); flex: none; }
.dep-col-foot { margin-top: 18px; color: var(--text-muted); font-size: 0.9rem; }
.dep-col-foot b { display: block; color: var(--text); font-family: var(--font-display); font-size: var(--step-2); line-height: 1.1; margin-bottom: 2px; }
.dep-col-react .dep-col-foot b { color: var(--danger); }
.dep-col-ss .dep-col-foot b { color: var(--success); }
.dep-vs { align-self: center; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--text-faint); letter-spacing: 0.04em; }
@media (max-width: 760px) { .dep-compare { grid-template-columns: 1fr; } .dep-vs { padding: 4px 0; }
  /* pin to 22 cols on mobile: 286 dots = 13 complete rows, so the last row is never a lonely orphan */
  .dep-cloud { grid-template-columns: repeat(22, minmax(0, 1fr)); gap: 5px; }
  .dep-cloud span { width: 8px; height: 8px; }
}
@media (prefers-reduced-motion: reduce) { .dep-cloud span { animation: none; opacity: 0.6; } }

/* how-it-works: a horizontal deploy pipeline with a travelling glow dot */
.pipeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: clamp(30px, 4vw, 48px); padding-top: 34px; }
.pipe-rail { position: absolute; top: 16px; left: 8%; right: 8%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent-soft) 20%, var(--accent-soft) 80%, transparent); background-size: 220% 100%; animation: pipeSheen 6s linear infinite; }
@keyframes pipeSheen { from { background-position: 220% 0; } to { background-position: -220% 0; } }
.pipe-dot { position: absolute; top: 11px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle, var(--accent), transparent 72%); box-shadow: 0 0 18px 4px var(--accent-glow); animation: pipeTravel 6s var(--ease) infinite; }
@keyframes pipeTravel { 0% { left: 8%; } 92%, 100% { left: 92%; } }
.pipe-stage { position: relative; text-align: center; }
.pipe-node { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border-2); background: var(--surface); font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-faint); position: relative; z-index: 2; margin-bottom: 15px; animation: pipeLight 6s var(--ease) infinite; animation-delay: calc(var(--i) * 1.5s); }
@keyframes pipeLight { 0%, 12%, 46%, 100% { border-color: var(--border-2); color: var(--text-faint); box-shadow: none; } 20%, 34% { border-color: var(--accent); color: var(--accent-text); box-shadow: 0 0 0 5px var(--accent-soft); } }
.pipe-stage h3 { font-size: 1rem; margin-bottom: 5px; }
.pipe-cmd { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-muted); }
.pipe-foot { text-align: center; margin-top: clamp(24px, 3vw, 34px); font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-muted); display: flex; align-items: center; justify-content: center; gap: 9px; }
@media (max-width: 720px) { .pipeline { grid-template-columns: 1fr; gap: 22px; padding-top: 0; } .pipe-rail, .pipe-dot { display: none; } .pipe-node { animation: none; } }
@media (prefers-reduced-motion: reduce) { .pipe-rail, .pipe-dot, .pipe-node { animation: none; } }

/* proof: a throughput gauge beside a mono data table */
.proof-panel { display: grid; grid-template-columns: 1fr; gap: clamp(22px, 3vw, 48px); align-items: center; }
@media (min-width: 760px) { .proof-panel { grid-template-columns: minmax(220px, 280px) 1fr; } }
.gauge { position: relative; aspect-ratio: 1; width: 100%; max-width: 280px; margin-inline: auto; }
.gauge-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge-track, .gauge-arc { fill: none; stroke-width: 9; }
.gauge-track { stroke: var(--surface-2); }
.gauge-arc { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; }
.reveal.is-visible .gauge-arc { animation: gaugeFill 1.6s var(--ease-out) forwards; }
@keyframes gaugeFill { to { stroke-dashoffset: 59; } }
.gauge-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.gauge-center strong { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; }
.gauge-center span { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); margin-top: 7px; }
.proof-table { width: 100%; border-collapse: collapse; }
.proof-table td { padding: clamp(13px, 1.6vw, 18px) 14px; border-bottom: 1px solid var(--border); }
.proof-table td:first-child { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-muted); }
.proof-table td:last-child { text-align: right; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.proof-table tr:last-child td { border-bottom: 0; }
.proof-table td.ok { color: var(--success); font-family: var(--font-mono); font-size: 0.9rem; font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .reveal.is-visible .gauge-arc { animation: none; stroke-dashoffset: 59; } }

/* ============ per-profile SIGNATURE sections (one distinct archetype per template) ============ */
/* versus — membership: locked vs unlocked, two columns */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2.5vw, 28px); margin-top: clamp(28px, 4vw, 46px); }
@media (max-width: 680px) { .versus { grid-template-columns: 1fr; } }
.versus-col { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: clamp(18px, 2.4vw, 26px); }
.versus-col.is-in { border-color: color-mix(in srgb, var(--success) 32%, var(--border)); background: color-mix(in srgb, var(--success) 5%, var(--surface)); }
.versus-head { display: block; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin-bottom: 14px; }
.versus-col.is-in .versus-head { color: var(--success); }
.versus-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.versus-col li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.95rem; line-height: 1.45; }
.versus-col li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.versus-col.is-out li svg { color: var(--danger); }
.versus-col.is-out li span { color: var(--text-muted); }
.versus-col.is-in li svg { color: var(--success); }

/* studio mock — image-studio: a faux render result */
.studio-mock { margin-top: clamp(28px, 4vw, 46px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: clamp(16px, 2.2vw, 24px); }
.studio-prompt { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--bg); margin-bottom: 16px; }
.studio-prompt svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.studio-prompt span { font-family: var(--font-mono); font-size: 0.84rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 620px) { .studio-grid { grid-template-columns: repeat(2, 1fr); } }
.studio-cap { position: absolute; left: 8px; bottom: 8px; z-index: 2; padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); color: #fff; font-family: var(--font-mono); font-size: 0.6rem; }
.shot-tile[data-busy]::after { background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, 0.2) 50%, transparent 68%); background-size: 220% 100%; animation: studioShimmer 1.3s linear infinite; }
@keyframes studioShimmer { from { background-position: 220% 0; } to { background-position: -120% 0; } }
.studio-caption { margin-top: 14px; text-align: center; font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-faint); }
@media (prefers-reduced-motion: reduce) { .shot-tile[data-busy]::after { animation: none; } }

/* proof stats + table — digital-downloads */
.sig-proof { display: grid; gap: clamp(16px, 2.4vw, 26px); margin-top: clamp(28px, 4vw, 46px); }
.proof-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.8vw, 20px); }
@media (max-width: 720px) { .proof-stats { grid-template-columns: 1fr; } }
.proof-stat { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: clamp(18px, 2.2vw, 26px); }
.proof-stat strong { display: block; font-family: var(--font-display); font-size: var(--step-4); line-height: 1; letter-spacing: -0.04em; color: var(--accent-text); margin-bottom: 12px; }
.proof-stat span { color: var(--text-muted); font-size: 0.88rem; line-height: 1.5; }
.sig-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.sig-table th, .sig-table td { padding: 14px 18px; border-bottom: 1px solid var(--border); text-align: left; font-size: 0.92rem; vertical-align: top; }
.sig-table th { width: 32%; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.sig-table td { color: var(--text-muted); }
.sig-table tr:last-child th, .sig-table tr:last-child td { border-bottom: 0; }

/* ledger data table — credit-usage */
.ledger-wrap { margin-top: clamp(28px, 4vw, 46px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.ledger-table { width: 100%; border-collapse: collapse; }
.ledger-table th { text-align: left; padding: 14px 18px; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); border-bottom: 1px solid var(--border); }
.ledger-table th.ta-r { text-align: right; }
.ledger-table td { padding: 13px 18px; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.ledger-table tbody tr:last-child td { border-bottom: 0; }
.ledger-table .ta-r { text-align: right; font-family: var(--font-mono); }
.ledger-bal { color: var(--text-faint); }
.ledger-type { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font-family: var(--font-mono); font-weight: 700; font-size: 0.8rem; }
.ledger-type.is-up { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); }
.ledger-type.is-down { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }

/* request terminal — api-product */
.sig-term-wrap { margin-top: clamp(28px, 4vw, 46px); border: 1px solid var(--border-2); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-lg); max-width: 760px; margin-inline: auto; }
.sig-term { margin: 0; border: 0; border-radius: 0; line-height: 1.7; }
.tl-comment { color: var(--text-faint); }
.tl-cmd { color: var(--text); }
.tl-out { color: var(--success); }

/* everything-wired: a hub-and-spoke power map — every subsystem flows into one core */
.fluxmap { margin-top: clamp(28px, 4vw, 46px); }
.fluxmap-svg { display: block; width: 100%; height: auto; max-width: 1000px; margin-inline: auto; }
.fluxmap-mob-svg { display: none; }
.flux-line { fill: none; stroke: var(--border-2); stroke-width: 1.5; }
.flux-node-box { fill: var(--surface); stroke: var(--border); stroke-width: 1.25; }
.flux-node-label { fill: var(--text); font-family: var(--font-mono); font-size: 19px; }
.flux-core-circle { fill: var(--accent); }
.flux-core-title { fill: var(--accent-ink); font-family: var(--font-display); font-weight: 700; font-size: 25px; }
.flux-core-sub { fill: var(--accent-ink); font-family: var(--font-mono); font-size: 14px; opacity: 0.85; }
.flux-pulse { fill: var(--accent); offset-rotate: 0deg; animation: fluxFlow 2.4s linear infinite; }
@keyframes fluxFlow { 0% { offset-distance: 0%; opacity: 0; } 16% { opacity: 1; } 84% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@media (max-width: 720px) {
  .fluxmap-svg { display: none; }
  .fluxmap-mob-svg { display: block; width: 100%; max-width: 420px; height: auto; margin-inline: auto; }
  .flux-core-title-m { font-size: 16px; }
  .flux-core-sub-m { font-size: 8.5px; }
  .flux-node-label-m { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .flux-pulse { animation: none; opacity: 0.7; } }

/* live-demos grid: cards linking out to each demo subdomain (new tab) */
.demo-grid { display: grid; grid-template-columns: 1fr; gap: clamp(12px, 1.6vw, 18px); margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 560px) { .demo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 880px) { .demo-grid { grid-template-columns: repeat(3, 1fr); } }
.demo-card { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 20px 20px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); text-decoration: none; color: inherit; transition: transform 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease); }
.demo-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 14px 34px -22px color-mix(in srgb, var(--accent) 70%, transparent); }
.demo-dot { position: absolute; top: 20px; right: 20px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.demo-card-name { font-family: var(--font-display); font-weight: 700; font-size: var(--step-0); padding-right: 22px; }
.demo-here { font-style: normal; font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin-left: 6px; vertical-align: middle; }
.demo-card-hook { color: var(--text-muted); font-size: 0.92rem; line-height: 1.45; flex: 1; }
.demo-card-go { margin-top: 4px; font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-faint); display: flex; align-items: center; gap: 5px; }
.demo-card:hover .demo-card-go { color: var(--accent); }
.demo-arrow { font-size: 0.92rem; transition: transform 0.18s var(--ease); }
.demo-card:hover .demo-arrow { transform: translate(2px, -2px); }
.demo-card.is-current { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }

/* agent-first: split editorial — a file tree beside a "reading the repo" terminal */
.agent-split { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.4vw, 26px); align-items: stretch; margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 860px) { .agent-split { grid-template-columns: minmax(240px, 320px) 1fr; } }
.agent-tree { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.tree-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); }
.tree-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.filetree { list-style: none; margin: 0; padding: 14px 16px; display: grid; gap: 6px; flex: 1; font-family: var(--font-mono); font-size: 0.82rem; }
.filetree li { color: var(--text); }
.ft-dir { color: var(--text-muted); font-weight: 600; }
.ft-file { position: relative; padding-left: 18px; }
.ft-dim { color: var(--text-faint); }
.ft-key { color: var(--accent-text); font-weight: 600; }
.ft-key::before { content: ""; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.agent-tree-foot { margin: 0; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--text-muted); }
.agent-console .console-body { min-height: 226px; }
.term-caret { display: inline-block; width: 8px; height: 1.05em; background: var(--accent); vertical-align: text-bottom; margin-left: 2px; animation: caretBlink 1.1s step-end infinite; }
@keyframes caretBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .term-caret { animation: none; } }

/* =====================================================  MOTION  =========== */
.reveal {
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
/* only hide pre-reveal when JS is present, so no-JS / SEO still sees content */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.hero [data-stagger] {
  opacity: 0;
  transform: translateY(20px);
  animation: heroIn 0.85s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 95ms + 120ms);
}
@keyframes heroIn {
  to { opacity: 1; transform: none; }
}
.hero-visual {
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  animation: heroVis 1s var(--ease-out) 0.35s forwards;
}
@keyframes heroVis {
  to { opacity: 1; transform: none; }
}

/* =====================================================  RESPONSIVE  ======= */
@media (max-width: 1040px) {
  .bento-card.col-3 { grid-column: span 6; }
  .bento-card.col-2,
  .bento-card.col-4 { grid-column: span 3; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step-line { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 920px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  /* On mobile the hamburger owns everything: the theme toggle + account dropdown
     move into the overlay, leaving just the brand and the hamburger in the pill. */
  .nav-actions .theme-toggle,
  .nav-actions .nav-account { display: none; }
  /* Stacked hero (copy over visual): centre everything so the copy doesn't sit
     lost on the left with dead space beside it. */
  .hero-inner { grid-template-columns: 1fr; justify-items: center; }
  .hero-copy { text-align: center; max-width: 660px; margin-inline: auto; }
  /* the sub is a max-width block, so it needs auto margins to centre under the
     headline (text-align only centres the text inside it, not the box). */
  .hero-sub { margin-inline: auto; }
  .hero-cta { justify-content: center; }
  .hero-proof { justify-content: center; }
  .hero-visual { max-width: 520px; margin-inline: auto; }
  .hero-float { display: none; }
  .hero,
  .dashboard-grid,
  .grid.two-up,
  .grid.three-up,
  .stats,
  .pricing-grid,
  .product-sales-grid,
  .theme-grid,
  .includes-grid,
  .admin-overview-panels,
  .admin-facts,
  .attention-list,
  .dashboard-hero .hero-grid,
  .admin-search-form {
    grid-template-columns: 1fr;
  }
  .admin-overview-panels .admin-table-panel { grid-column: auto; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-card.col-2,
  .bento-card.col-3,
  .bento-card.col-4,
  .bento-card.col-6 { grid-column: span 2; }
  .social-wrap { grid-template-columns: 1fr; }
  .console-metrics,
  .metric-band,
  .usecase-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .content { width: min(100% - 28px, var(--container)); }
  .nav-cta-desktop { display: none; }
  .nav-inner { padding-left: 16px; }
  .metric .count { font-size: var(--step-3); }
  .cmetric strong { font-size: var(--step-1); }
  .console-body { min-height: 0; }
  .pricing-grid,
  .usecase-grid,
  .bento { grid-template-columns: 1fr; }
  .bento-card.col-2,
  .bento-card.col-3,
  .bento-card.col-4,
  .bento-card.col-6 { grid-column: span 1; }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-cta .button,
  .cta-band .button { width: 100%; }
  .list-item { flex-direction: column; }
  .list-item > code { max-width: 100%; text-align: left; align-self: flex-start; }
  .admin-detail-header { flex-direction: column; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  /* dashboard status tiles: compact on phones (were desktop-sized = far too big) */
  .stats { grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
  .stat { padding: 13px 15px; }
  .stat strong { font-size: var(--step-1); margin: 5px 0 4px; }
  .stat p { font-size: 0.85rem; line-height: 1.4; }
  .account-card { padding: 16px 18px; }
  .account-email { font-size: 1rem; overflow-wrap: anywhere; word-break: break-word; }
  .dashboard-hero h1 { font-size: var(--step-3); }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero [data-stagger],
  .hero-visual { opacity: 1; transform: none; animation: none; }
  .app-window { transform: none; }
  .auth-apple, .auth-apple-content, .auth-spin, .auth-google, .auth-cursor, .auth-success, .auth-check, .dot-live { animation: none; }
  .auth-spin, .auth-cursor, .auth-success { opacity: 0; visibility: hidden; }
  .auth-apple-content { opacity: 1; }
  .console-chart i, .stream-row { animation: none; }
}

/* ===================== Launch offer ribbon ===================== */
/* Sits inside the hero (on the gradient), just under the floating nav. */
.offer-ribbon {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto clamp(20px, 3.5vw, 34px);
  padding: 7px 8px 7px 16px;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 14px 36px -16px var(--accent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.offer-ribbon:hover { transform: translateY(-1px); box-shadow: 0 18px 40px -16px var(--accent); }
.offer-ribbon-tag {
  flex: none;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .68rem;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.16);
  white-space: nowrap;
}
.offer-ribbon-text { font-size: .9rem; min-width: 0; }
.offer-ribbon-cta {
  flex: none;
  font-weight: 800;
  white-space: nowrap;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--accent-ink);
  color: var(--accent-2);
}
/* Mobile: drop the long note; keep a tight [badge] [Get it] pill on one line. */
@media (max-width: 720px) {
  .offer-ribbon { gap: 9px; padding: 6px 7px 6px 13px; }
  .offer-ribbon-text { display: none; }
  .offer-ribbon-tag { font-size: .62rem; padding: 4px 9px; letter-spacing: .04em; }
  .offer-ribbon-cta { font-size: .82rem; padding: 6px 12px; }
}

/* ===================== Thank-you / post-purchase ===================== */
.thanks-hero { text-align: center; }
.thanks-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
}
.thanks-check svg { width: 32px; height: 32px; }
.thanks-hero .hero-cta { justify-content: center; margin-top: 6px; }
.thanks-next { margin-top: 22px; }
.thanks-steps { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: step; }
.thanks-steps li {
  position: relative;
  padding: 14px 16px 14px 52px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.thanks-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 14px; top: 14px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-text, var(--accent));
  font-weight: 800; font-size: .85rem;
}

/* ===================== Admin audit trail ===================== */
.audit-summary { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.audit-stat {
  flex: 1 1 160px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.audit-stat span { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1; }
.audit-stat small { display: block; margin-top: 2px; color: var(--text-faint); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.audit-stat em { display: block; margin-top: 6px; font-style: normal; font-size: .82rem; color: var(--text-faint); }
.audit-subhead { margin: 18px 0 8px; font-size: .95rem; }

/* ===================== Agent-first callout ===================== */
.agent-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin: clamp(24px, 3.5vw, 38px) auto 0;
  max-width: 760px;
  padding: 18px 22px;
  border: 1px solid color-mix(in srgb, var(--success) 38%, var(--border-2));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--success) 9%, var(--surface-2));
  text-align: center;
}
.agent-cta-kicker {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--success);
}
.agent-cta code {
  font-size: 1rem;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border-2);
}
.agent-cta code strong { color: var(--success); }
.agent-cta-tail { color: var(--text-muted); font-size: 0.92rem; }

/* ===================== Agent-first value props ===================== */
.value-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: clamp(22px, 3vw, 34px) auto 0;
}
.value-item {
  padding: 18px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}
.value-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.04rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.value-item span {
  display: block;
  margin-top: 7px;
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.4;
}
@media (max-width: 900px) { .value-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .value-row { grid-template-columns: 1fr; } }

/* ===================== Toasts (auto-dismiss notifications) ===================== */
.toast-stack {
  position: fixed;
  z-index: 1000;
  right: clamp(12px, 2vw, 22px);
  bottom: clamp(12px, 2vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(380px, calc(100vw - 24px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 16px 42px -16px rgba(0, 0, 0, 0.6), 0 2px 8px -4px rgba(0, 0, 0, 0.4);
  font-size: 0.92rem;
  line-height: 1.42;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.26s var(--ease, ease), transform 0.26s var(--ease, ease);
}
.toast.is-in { opacity: 1; transform: none; }
.toast.is-out { opacity: 0; transform: translateY(6px) scale(0.98); }
.toast-ico { flex: none; width: 19px; height: 19px; margin-top: 1px; }
.toast-msg { flex: 1 1 auto; min-width: 0; }
.toast-x {
  flex: none;
  margin: -2px -4px -2px 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--text-faint);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 7px;
}
.toast-x:hover { color: var(--text); background: var(--surface-2); }
.toast-success { border-color: color-mix(in srgb, var(--success) 42%, transparent); }
.toast-success .toast-ico { color: var(--success); }
.toast-error { border-color: color-mix(in srgb, var(--danger) 42%, transparent); }
.toast-error .toast-ico { color: var(--danger); }
.toast-info .toast-ico,
.toast-warning .toast-ico { color: var(--accent-text, var(--accent)); }
.toast-warning { border-color: var(--accent-line, var(--border-2)); }
@media (max-width: 560px) {
  .toast-stack { left: 12px; right: 12px; bottom: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 0.15s ease; transform: none; }
  .toast.is-in, .toast.is-out { transform: none; }
}

/* ----------------------------------------------- account + delete pages ---- */
/* Nav account: a glassy icon-button that opens the Account / Billing / Sign out
   dropdown (sits next to the matching circular theme toggle). */
.nav-account {
  position: relative;
  display: inline-flex;
}
.nav-avatar {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-2);
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.nav-avatar svg { width: 18px; height: 18px; }
.nav-avatar:hover {
  color: var(--text);
  border-color: var(--border-glow);
  transform: translateY(-1px);
}
.nav-avatar.is-active {
  color: var(--text);
  border-color: var(--border-glow);
}
.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 184px;
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 16px;
  /* Near-opaque so menu items stay legible over busy content (e.g. the studio
     image grid) — the frosted blur only softens the very edges. */
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid var(--border);
  box-shadow: 0 22px 54px -18px rgba(0, 0, 0, 0.55), inset 0 1px 0 var(--glass-highlight);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  z-index: 120;
}
.nav-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.nav-dropdown a,
.nav-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}
.nav-dropdown a:hover,
.nav-dropdown button:hover {
  background: var(--surface-inset);
  color: var(--accent-text);
}
.nav-dropdown .nav-dd-signout { color: var(--danger); }
.nav-dropdown .nav-dd-signout:hover { color: var(--danger); background: var(--danger-soft); }

.account-page .page-hero { margin-bottom: 22px; }
.account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap, 18px);
  align-items: stretch;   /* same-row cards share the tallest card's height */
}
.acct-card {
  display: flex;
  flex-direction: column;
}
.acct-card h2 { margin: 2px 0 0; font-size: var(--step-1, 1.15rem); }
.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;        /* pin the button row to the bottom — cards line up */
  padding-top: 14px;
}
.acct-card .is-linked { cursor: default; opacity: 0.85; }
.eyebrow.is-rekt { color: var(--danger); }
.acct-danger { border-color: color-mix(in srgb, var(--danger) 26%, var(--border)); }

/* Full-width, low-key delete bar at the foot of the account page. */
.acct-danger-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: var(--gap, 18px);
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 14px);
  background: var(--surface-inset);
}
.acct-danger-bar .acct-danger-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.acct-danger-bar strong { font-size: 0.98rem; }
.acct-danger-bar .muted { font-size: 0.88rem; }

/* Delete-account two-step flow */
.delete-page .account-grid,
.delete-page .delete-flow { max-width: 620px; }
.delete-flow { margin-inline: auto; }
.delete-losses {
  margin: 16px 0 4px;
  padding-left: 20px;
  display: grid;
  gap: 9px;
  color: var(--text-muted);
  line-height: 1.5;
}
.delete-losses li::marker { color: var(--danger); }
.delete-losses strong { color: var(--text); }
.hint {
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: var(--radius-sm, 10px);
  background: var(--surface-inset);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.88rem;
}

/* --------------------------------------------------- accent palette picker - */
.accent-section { margin-top: 22px; }
.accent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.accent-swatch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 14px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm, 12px);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.accent-swatch:hover { transform: translateY(-2px); border-color: var(--border-glow); }
.accent-swatch.is-active {
  border-color: var(--sw);
  box-shadow: 0 0 0 1px var(--sw), 0 10px 26px -14px var(--sw);
}
.accent-dot {
  width: 100%;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--sw2), var(--sw));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.accent-swatch strong { font-size: 0.92rem; }
.accent-swatch em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.accent-swatch.is-active em { color: var(--sw); }

/* ============================ [demo-mode] Demo mode banner (removable block) === */
.demo-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .5rem 1rem;
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--accent-text);
  background: linear-gradient(90deg, var(--accent-soft), color-mix(in srgb, var(--accent) 22%, transparent));
  border-bottom: 1px solid var(--accent-line);
  text-align: center;
  position: relative;
  z-index: 60;
}
.demo-banner-text { color: var(--text); }
.demo-banner-text strong { color: var(--accent-text); font-weight: 700; letter-spacing: .01em; }
.demo-banner-dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-glow);
  animation: demoPulse 2s var(--ease, ease-out) infinite;
  flex: none;
}
@keyframes demoPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70% { box-shadow: 0 0 0 .5rem transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.demo-banner-cta {
  display: inline-flex; align-items: center;
  padding: .22rem .7rem;
  border-radius: 999px;
  font-weight: 600;
  color: var(--accent-text);
  border: 1px solid var(--accent-line);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  text-decoration: none;
  transition: background .15s var(--ease-out, ease), transform .15s var(--ease-out, ease);
}
.demo-banner-cta:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); transform: translateY(-1px); }
.auth-demo-enter { margin-top: .4rem; }
@media (max-width: 560px) {
  .demo-banner { font-size: .76rem; padding: .45rem .7rem; gap: .45rem; }
}

/* ===================================== Per-profile landing spotlight section === */
.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.spotlight-card {
  position: relative;
  padding: 26px 24px 24px;
  /* Thin accent-tinted border all the way around (no thick one-sided bar). */
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.spotlight-num {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; margin-bottom: 14px;
  border-radius: 9px;
  font-family: var(--font-mono); font-size: .85rem; font-weight: 700;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.spotlight-card h3 { margin: 0 0 8px; font-size: var(--step-1, 1.15rem); }
.spotlight-card p { margin: 0; color: var(--text-muted); line-height: 1.6; font-size: .95rem; }

/* Gallery pagination */
.gallery-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
  margin: 36px auto 8px;
}
.gallery-pagination .muted { font-size: .88rem; }

/* ============================ Image-to-image studio tabs + reference upload === */
.studio-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; }
.studio-tab { flex: 1; padding: 8px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.studio-tab.is-on { background: var(--accent); color: var(--accent-ink); }
.studio-pane[hidden] { display: none; }

.ref-drop { position: relative; border: 1.5px dashed var(--border-2, var(--border)); border-radius: var(--radius); background: var(--surface-2); transition: border-color .15s, background .15s; overflow: hidden; }
.ref-drop.is-drag { border-color: var(--accent); background: var(--accent-soft); }
.ref-drop.is-uploading { opacity: .6; pointer-events: none; }
.ref-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 132px; padding: 18px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; }
.ref-empty svg { width: 26px; height: 26px; opacity: .8; }
.ref-empty span { font-weight: 600; font-size: .9rem; color: var(--text); }
.ref-empty small { font-size: .72rem; color: var(--text-faint); }
.ref-preview { position: relative; }
.ref-preview img { display: block; width: 100%; max-height: 280px; object-fit: contain; background: var(--surface-inset); }
.ref-clear { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(18,16,24,.82); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.ref-source { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; font-size: .68rem; font-weight: 600; color: #fff; background: rgba(18,16,24,.72); }
.composer-range { width: 100%; }
.composer-mini { margin: 6px 0 4px; font-size: .74rem; color: var(--text-faint); }

/* ===================================== Gallery bulk select ============= */
.js-select-toggle { margin-left: auto; }
.bulk-bar { position: sticky; top: 12px; z-index: 30; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; padding: 10px 16px; border: 1px solid var(--accent-line); border-radius: var(--radius); background: var(--surface-glass, var(--surface)); backdrop-filter: blur(8px); box-shadow: var(--shadow); }
.bulk-bar[hidden] { display: none; }
.bulk-count strong { color: var(--accent-text); }
.bulk-spacer { flex: 1; }
.masonry-check { position: absolute; top: 10px; left: 10px; z-index: 4; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: rgba(18,16,24,.45); color: #fff; display: none; place-items: center; box-shadow: 0 1px 6px rgba(0,0,0,.3); }
.masonry-check svg { width: 14px; height: 14px; opacity: 0; transition: opacity .12s; }
.masonry.is-selecting .masonry-check { display: grid; }
.masonry.is-selecting .masonry-item { cursor: pointer; }
.masonry.is-selecting .masonry-img { pointer-events: none; }
.masonry-item.is-selected .masonry-check { background: var(--accent); border-color: var(--accent); }
.masonry-item.is-selected .masonry-check svg { opacity: 1; }
.masonry-item.is-selected .masonry-img { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 12px; }

/* ============================ members app (sidebar shell) ============ */
/* The /members app owns the full viewport: hide the marketing chrome. */
body.page-members .site-nav,
body.page-members #mobile-menu,
body.page-members .site-footer,
body.page-members #floating-cta { display: none !important; }
body.page-members { background: var(--bg); }

/* ---- universal member shell (shell-member): the logged-in app pages
   (dashboard/account/billing/downloads/studio/gallery) render their existing
   <main class="content …"> inside the .mapp sidebar chrome ---- */
body.shell-member, body.shell-admin { background: var(--bg); }
.shell-member .content, .shell-admin .content {
  width: 100%;
  max-width: 1180px;
  margin: 0;
  padding: clamp(22px, 3vw, 40px) clamp(18px, 3vw, 38px) 64px;
}
/* the member/admin top bar is mobile-only (burger + theme + account); on desktop
   the sidebar carries nav + the account/theme/sign-out foot menu. Scoped by body
   class so it beats the later, equal-specificity `.mapp-topbar { display:flex }`. */
body.shell-member .mapp-topbar-slim,
body.shell-admin .mapp-topbar-slim {
  display: none;
  position: sticky;
  top: 0;
  z-index: 20;
  gap: 10px;
  padding: 11px clamp(16px, 3vw, 22px);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(8px);
}
.mapp-topbar-slim .mapp-topbar-spacer { flex: 1; }
.mapp-topbar-brand { padding: 0; }
@media (max-width: 860px) {
  body.shell-member .mapp-topbar-slim,
  body.shell-admin .mapp-topbar-slim { display: flex; }
}
/* admin sidebar accents: the "Admin" badge by the logo + the Exit-to-app link */
.mapp-logo-tag {
  font-family: var(--font-mono, monospace);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-soft);
  padding: 2px 6px;
  border-radius: 6px;
  vertical-align: middle;
}
.mapp-exit { color: var(--text-faint); margin-bottom: 4px; }
.mapp-exit:hover { color: var(--text); }

/* membership: the merged /members base route renders in the member shell with a
   horizontal sub-nav (its old ?v= views) at the top of the content column. */
.members-subnav { display: flex; gap: 4px; flex-wrap: wrap; align-self: flex-start; margin-bottom: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-inset); }
.members-subnav-link { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; text-decoration: none; color: var(--text-muted); font-weight: 600; font-size: 0.85rem; transition: background 0.15s, color 0.15s; }
.members-subnav-link .mapp-nav-ico { width: 17px; height: 17px; }
.members-subnav-link .mapp-nav-ico svg { width: 16px; height: 16px; }
.members-subnav-link:hover { color: var(--text); }
.members-subnav-link.is-active { color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.mapp-views { display: grid; gap: clamp(14px, 2vw, 20px); align-content: start; }
.members-view-title { font-size: var(--step-2); letter-spacing: -0.02em; }
.members-view-sub { color: var(--text-muted); margin-top: -10px; }

/* [demo-mode] the demo switcher when it sits in the member-shell sidebar foot:
   full-width, and its dropdown opens upward (it's pinned to the bottom). */
.mapp-demo { margin-bottom: 10px; }
.mapp-demo .nav-demo { width: 100%; }
.mapp-demo .nav-demo-btn { width: 100%; justify-content: space-between; }
.mapp-demo .nav-demo-dropdown { top: auto; bottom: calc(100% + 8px); left: 0; right: 0; }

/* live credit-balance widget — sidebar pill (desktop) + compact topbar (mobile) */
.mapp-credits { display: flex; align-items: center; gap: 9px; padding: 9px 11px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); text-decoration: none; color: var(--text); transition: border-color 0.15s, background 0.15s; }
.mapp-credits:hover { border-color: var(--border-glow); background: var(--surface); }
.mapp-credits-ico { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--accent-soft); color: var(--accent-text); }
.mapp-credits-ico svg { width: 17px; height: 17px; }
.mapp-credits-meta { display: grid; line-height: 1.15; }
.mapp-credits-meta strong { font-size: 1rem; }
.mapp-credits-meta span { font-size: 0.7rem; color: var(--text-faint); }
.mapp-credits-top { margin: 0; padding: 5px 10px 5px 6px; gap: 7px; border-radius: 999px; }
.mapp-credits-top .mapp-credits-ico { width: 24px; height: 24px; border-radius: 999px; }
.mapp-credits-top .mapp-credits-ico svg { width: 15px; height: 15px; }
.mapp-credits-top .mapp-credits-meta strong { font-size: 0.86rem; }
.mapp-credits-top .mapp-credits-meta span { display: none; }

.mapp { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.mapp-side { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; padding: 20px 16px; border-right: 1px solid var(--border); background: var(--surface); }
.mapp-logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; text-decoration: none; color: var(--text); }
.mapp-logo-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: var(--accent-ink); font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; flex: none; }
.mapp-logo-txt { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.mapp-nav { display: flex; flex-direction: column; gap: 3px; }
.mapp-nav-link { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--text-muted); font-weight: 600; font-size: 0.95rem; transition: background 0.15s, color 0.15s; }
.mapp-nav-link:hover { background: var(--surface-2); color: var(--text); }
.mapp-nav-link.is-active { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-text); }
.mapp-nav-lock { margin-left: auto; display: grid; place-items: center; color: var(--text-faint); }
.mapp-nav-lock svg { width: 15px; height: 15px; }
.mapp-nav-link.is-locked { color: var(--text-faint); }
.mapp-nav-link.is-locked:hover { color: var(--text); }
.mapp-nav-link.is-locked:hover .mapp-nav-lock { color: var(--accent-text); }
.mapp-nav-ico { display: grid; place-items: center; width: 20px; height: 20px; flex: none; }
.mapp-nav-ico svg { width: 19px; height: 19px; }
.mapp-side-foot { margin-top: auto; padding-top: 12px; }
.mapp-menuwrap { position: relative; }
.mapp-userwrap { width: 100%; }
.mapp-user { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 1px solid transparent; border-radius: 11px; background: none; color: var(--text); cursor: pointer; text-align: left; transition: background 0.15s, border-color 0.15s; }
.mapp-user:hover, .mapp-user[aria-expanded="true"] { background: var(--surface-2); border-color: var(--border); }
.mapp-user-av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-weight: 700; font-size: 0.82rem; flex: none; }
.mapp-user-av.sm { width: 30px; height: 30px; font-size: 0.74rem; border: 0; background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: var(--accent-ink); }
.mapp-user-meta { display: grid; line-height: 1.25; min-width: 0; }
.mapp-user-meta strong { font-size: 0.9rem; }
.mapp-user-meta span { font-size: 0.74rem; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapp-user-chev { width: 16px; height: 16px; margin-left: auto; color: var(--text-faint); flex: none; transition: transform 0.18s; }
.mapp-user[aria-expanded="true"] .mapp-user-chev { transform: rotate(180deg); }

.mapp-main { min-width: 0; display: flex; flex-direction: column; }
.mapp-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px clamp(18px, 3vw, 38px); border-bottom: 1px solid var(--border); }
.mapp-topbar-head h1 { font-size: var(--step-2); letter-spacing: -0.02em; }
.mapp-topbar-sub { color: var(--text-muted); font-size: 0.9rem; margin-top: 2px; }
.mapp-topbar-actions { display: flex; align-items: center; gap: 10px; }
.mapp-iconbtn { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--text-muted); cursor: pointer; flex: none; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.mapp-iconbtn:hover, .mapp-iconbtn[aria-expanded="true"] { color: var(--text); border-color: var(--border-2); background: var(--surface-2); }
.mapp-iconbtn svg { width: 18px; height: 18px; }
.mapp-mob-user { border: 0; background: none; }
.mapp-mob-user:hover { background: none; }
.mapp-bell-dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 999px; background: var(--accent); border: 2px solid var(--surface); }
.mapp-burger span { display: block; width: 16px; height: 1.8px; border-radius: 2px; background: currentColor; transition: transform 0.2s, opacity 0.2s; }
.mapp-burger span + span { margin-top: 4px; }
.drawer-open .mapp-burger span:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
.drawer-open .mapp-burger span:nth-child(2) { opacity: 0; }
.drawer-open .mapp-burger span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }
.mapp-content { padding: clamp(18px, 3vw, 30px); display: grid; gap: clamp(14px, 2vw, 20px); align-content: start; }
@media (prefers-reduced-motion: no-preference) {
  .mapp-content > * { animation: mappIn 0.4s var(--ease) both; }
  .mapp-content > *:nth-child(2) { animation-delay: 0.06s; }
  .mapp-content > *:nth-child(3) { animation-delay: 0.12s; }
}
@keyframes mappIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* dropdown menus (account / notifications) */
.mapp-menu { position: absolute; z-index: 30; min-width: 224px; padding: 6px; border: 1px solid var(--border-2); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.16s, transform 0.16s, visibility 0.16s; }
.mapp-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.mapp-userwrap .mapp-menu { bottom: calc(100% + 8px); left: 0; right: 0; }
.mapp-bellwrap .mapp-menu, .mapp-menu-end { top: calc(100% + 8px); right: 0; }
.mapp-menu-wide { min-width: 280px; }
.mapp-menu-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 10px 6px; }
.mapp-menu-head strong { font-size: 0.88rem; }
.mapp-menu-head span { font-size: 0.72rem; color: var(--text-faint); }
.mapp-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--text); font: inherit; font-size: 0.9rem; text-align: left; text-decoration: none; cursor: pointer; }
.mapp-menu-item svg { width: 17px; height: 17px; color: var(--text-faint); flex: none; }
.mapp-menu-item:hover { background: var(--surface-2); }
.mapp-menu-item.is-danger { color: var(--danger); }
.mapp-menu-item.is-danger svg { color: var(--danger); }
.mapp-menu-sep { height: 1px; margin: 5px 8px; background: var(--border); }
.mapp-menu-foot { display: block; padding: 9px 10px 5px; margin-top: 4px; border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--accent-text); text-decoration: none; text-align: center; }
.mapp-notif { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 9px; padding: 9px 10px; border-radius: 9px; }
.mapp-notif:hover { background: var(--surface-2); }
.mapp-notif .mapp-feed-dot { margin-top: 6px; }
.mapp-notif-txt { font-size: 0.86rem; color: var(--text-muted); line-height: 1.4; }
.mapp-notif-txt b { color: var(--text); font-weight: 600; }
.mapp-notif-txt em { display: block; font-style: normal; font-size: 0.72rem; color: var(--text-faint); margin-top: 2px; }

.mapp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); }
.mapp-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mapp-kpi { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.mapp-kpi-label { color: var(--text-faint); font-size: 0.8rem; font-weight: 600; }
.mapp-kpi-val { display: block; margin: 8px 0 6px; font-family: var(--font-display); font-size: var(--step-3); line-height: 1; letter-spacing: -0.03em; }
.mapp-delta { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600; }
.mapp-delta.is-up { color: var(--success); }
.mapp-delta.is-down { color: var(--danger); }

.mapp-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 20px); align-items: stretch; }
.mapp-col-2 { grid-column: span 2; }
.mapp-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: clamp(16px, 2vw, 22px); }
.mapp-card > .button { align-self: flex-start; }
.mapp-card-flush { padding: 0; overflow: hidden; }
.mapp-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.mapp-card-head h2 { font-size: 1.02rem; }
.mapp-card-meta { color: var(--text-faint); font-family: var(--font-mono); font-size: 0.74rem; }

.mapp-bars { display: flex; align-items: flex-end; gap: clamp(5px, 1.2vw, 12px); flex: 1; min-height: 180px; }
.mapp-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; height: 100%; }
.mapp-bar { width: 100%; max-width: 30px; min-height: 4px; height: var(--h); border-radius: 6px 6px 0 0; background: color-mix(in srgb, var(--accent) 30%, var(--surface-2)); }
.mapp-bar[data-on] { background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.mapp-bar-col em { font-style: normal; font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-faint); }

.mapp-feed { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.mapp-feed-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.mapp-feed-row:last-child { border-bottom: 0; }
.mapp-feed-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--text-faint); flex: none; }
.mapp-feed-dot.is-up { background: var(--accent); }
.mapp-feed-dot.is-pay { background: var(--success); }
.mapp-feed-dot.is-new { background: var(--info); }
.mapp-feed-dot.is-warn { background: var(--danger); }
.mapp-feed-txt { font-size: 0.88rem; color: var(--text-muted); }
.mapp-feed-txt b { color: var(--text); font-weight: 600; }
.mapp-feed-row time { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-faint); white-space: nowrap; }

.mapp-line { width: 100%; height: 200px; display: block; }
.mapp-line-stroke { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.mapp-meter-list { display: grid; gap: 14px; align-content: space-between; flex: 1; list-style: none; margin: 0; padding: 0; }
.mapp-meter-head { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 6px; }
.mapp-meter-head b { font-family: var(--font-mono); }
.mapp-meter { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.mapp-meter span { display: block; height: 100%; border-radius: 999px; }

.mapp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mapp-toolbar-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mapp-search { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-faint); background: var(--surface); }
.mapp-search:focus-within { border-color: var(--accent); }
.mapp-search svg { width: 16px; height: 16px; flex: none; }
.mapp-search input { width: 200px; max-width: 46vw; padding: 9px 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 0.88rem; outline: none; }
.mapp-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mapp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px; background: none; font-size: 0.84rem; color: var(--text-muted); cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.mapp-chip:hover { color: var(--text); border-color: var(--border-2); }
.mapp-chip i { font-style: normal; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-faint); }
.mapp-chip.is-on { background: var(--text); color: var(--bg); border-color: var(--text); }
.mapp-chip.is-on i { color: var(--bg); opacity: 0.7; }
.mapp-table-wrap { overflow-x: auto; }
.mapp-table { width: 100%; border-collapse: collapse; }
.mapp-table th { text-align: left; padding: 13px 18px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); border-bottom: 1px solid var(--border); white-space: nowrap; }
.mapp-table td { padding: 12px 18px; border-bottom: 1px solid var(--border); font-size: 0.9rem; white-space: nowrap; }
.mapp-table tbody tr:last-child td { border-bottom: 0; }
.mapp-table tbody tr:hover { background: var(--surface-2); }
.mapp-table .ta-r { text-align: right; }
.mapp-table .mono { font-family: var(--font-mono); }
.mapp-table .muted { color: var(--text-faint); }
.mapp-cust { display: flex; align-items: center; gap: 11px; }
.mapp-cust-av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-weight: 700; font-size: 0.78rem; flex: none; }
.mapp-cust-meta { display: grid; line-height: 1.25; }
.mapp-cust-meta b { font-weight: 600; }
.mapp-cust-meta span { font-size: 0.74rem; color: var(--text-faint); }
.mapp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; }
.mapp-pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.mapp-pill.is-active { color: var(--success); background: color-mix(in srgb, var(--success) 15%, transparent); }
.mapp-pill.is-trial { color: var(--info); background: color-mix(in srgb, var(--info) 15%, transparent); }
.mapp-pill.is-past { color: var(--danger); background: color-mix(in srgb, var(--danger) 15%, transparent); }
.mapp-pill.is-cancel { color: var(--text-faint); background: var(--surface-2); }
.mapp-table-foot { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--text-faint); }
.mapp-pager { display: flex; gap: 8px; }
.mapp-pager button { padding: 6px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 0.82rem; cursor: pointer; }
.mapp-pager button:disabled { opacity: 0.45; cursor: default; }

.mapp-form { display: grid; gap: 14px; max-width: 460px; }
.mapp-field { display: grid; gap: 6px; }
.mapp-field span { font-size: 0.82rem; color: var(--text-muted); font-weight: 600; }
.mapp-field input { padding: 10px 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 0.9rem; }
.mapp-plan { display: grid; gap: 9px; justify-items: start; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
/* when the plan card has nothing after it (Billing), drop the trailing divider */
.mapp-card > .mapp-plan:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
/* equal-height card row (Billing top cards) */
.mapp-row-even { align-items: stretch; }
/* member list + stat list (overview/analytics widgets) */
.mapp-mlist { list-style: none; margin: 0; padding: 0; }
.mapp-mlist li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.mapp-mlist li:last-child { border-bottom: 0; }
.mapp-mlist .mapp-cust { flex: 1; min-width: 0; }
.mapp-mlist time { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-faint); white-space: nowrap; }
.mapp-statlist { list-style: none; margin: 0; padding: 0; }
.mapp-statlist li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; color: var(--text-muted); }
.mapp-statlist li:last-child { border-bottom: 0; }
.mapp-statlist b { font-family: var(--font-mono); font-weight: 600; color: var(--text); }
.mapp-statlist b.is-up { color: var(--success); }
.mapp-statlist b.is-down { color: var(--danger); }
.mapp-plan-tag { padding: 5px 13px; border-radius: 999px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); font-weight: 700; font-size: 0.85rem; }
.mapp-plan p { color: var(--text-muted); font-size: 0.86rem; }
.mapp-toggles { display: grid; gap: 2px; }
.mapp-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 0.9rem; cursor: pointer; }
.mapp-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mapp-toggle i { width: 38px; height: 22px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); position: relative; transition: background 0.18s; flex: none; }
.mapp-toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: var(--text-faint); transition: transform 0.18s, background 0.18s; }
.mapp-toggle input:checked + i { background: var(--accent); border-color: var(--accent); }
.mapp-toggle input:checked + i::after { transform: translateX(16px); background: #fff; }
.mapp-muted { color: var(--text-faint); font-size: 0.86rem; margin-top: 4px; }
.mapp-link { border: 0; background: none; color: var(--accent-text); font: inherit; font-size: 0.84rem; cursor: pointer; padding: 0; }
.mapp-link:hover { text-decoration: underline; }
.mapp-flush-head { padding: 16px 18px 0; }
.mapp-flush-head h2 { font-size: 1.02rem; }
.mapp-table-empty { padding: 28px 18px; text-align: center; color: var(--text-faint); font-size: 0.9rem; }

/* billing: payment method card */
.mapp-pay { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mapp-pay-brand { display: grid; place-items: center; width: 46px; height: 30px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); font-family: var(--font-display); font-weight: 800; font-size: 0.7rem; letter-spacing: 0.04em; flex: none; }
.mapp-pay-meta { display: grid; line-height: 1.3; }
.mapp-pay-meta b { font-weight: 600; }
.mapp-pay-meta span { font-size: 0.76rem; color: var(--text-faint); }

/* resources grid */
.mapp-res-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); }
.mapp-res-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.mapp-res-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text); }
.mapp-res-ico svg { width: 21px; height: 21px; }
.mapp-res-type { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); }
.mapp-res-card h3 { font-size: 1rem; }
.mapp-res-card p { color: var(--text-muted); font-size: 0.86rem; line-height: 1.45; flex: 1; }
.mapp-res-card .button { margin-top: 4px; }

/* invite modal */
.mapp-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, #000 62%, transparent); backdrop-filter: blur(3px); }
.mapp-modal.hidden { display: none; }
.mapp-modal-card { position: relative; width: min(440px, 100%); padding: clamp(22px, 4vw, 30px); border: 1px solid var(--border-2); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); animation: mappModalIn 0.22s var(--ease-out); }
@keyframes mappModalIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.mapp-modal-x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--text-faint); cursor: pointer; }
.mapp-modal-x:hover { background: var(--surface-2); color: var(--text); }
.mapp-modal-x svg { width: 18px; height: 18px; }
.mapp-modal-card h2 { font-size: 1.25rem; }
.mapp-modal-sub { color: var(--text-muted); font-size: 0.9rem; margin: 6px 0 18px; }
.mapp-modal-card .mapp-form { max-width: none; }
.mapp-modal-card select { padding: 10px 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 0.9rem; }
.mapp-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.mapp-modal-done { text-align: center; }
.mapp-modal-done.hidden { display: none; }
.mapp-modal-check { display: grid; place-items: center; width: 56px; height: 56px; margin: 4px auto 14px; border-radius: 999px; background: var(--success); color: #fff; }
.mapp-modal-check svg { width: 28px; height: 28px; }

/* drawer scrim + desktop/mobile control visibility */
.mapp-scrim { display: none; }
.mapp-mobonly { display: none; }

@media (max-width: 860px) {
  .mapp { grid-template-columns: 1fr; }
  .mapp-side { position: fixed; top: 0; left: 0; z-index: 120; width: 264px; max-width: 84vw; height: 100vh; border-right: 1px solid var(--border); transform: translateX(-100%); transition: transform 0.24s var(--ease-out); }
  .drawer-open .mapp-side { transform: none; box-shadow: var(--shadow-lg); }
  .mapp-side-foot { display: none; }
  .mapp-scrim { display: block; position: fixed; inset: 0; z-index: 110; background: color-mix(in srgb, #000 50%, transparent); opacity: 0; visibility: hidden; transition: opacity 0.24s, visibility 0.24s; }
  .drawer-open .mapp-scrim { opacity: 1; visibility: visible; }
  .mapp-topbar { padding: 14px clamp(16px, 4vw, 22px); }
  .mapp-deskonly { display: none; }
  .mapp-mobonly { display: grid; }
  .mapp-topbar-sub { display: none; }
  .mapp-menu-end { position: fixed; top: 64px; right: 14px; left: auto; }
  .mapp-kpis, .mapp-kpis-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mapp-row { grid-template-columns: 1fr; }
  .mapp-col-2 { grid-column: span 1; }
  .mapp-res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .mapp-kpis, .mapp-kpis-3 { grid-template-columns: 1fr 1fr; }
  .mapp-res-grid { grid-template-columns: 1fr; }
  .mapp-toolbar { align-items: stretch; }
  .mapp-search input { width: 100%; max-width: none; }
  .mapp-search { flex: 1; }
}

/* ===================================================================
   DEMO NAV + CONVERSION + PER-PROFILE DASHBOARD / LANDING EXTRAS
   (demo switcher, buy CTAs, dashboard quick-tools, "by the numbers" band)
   =================================================================== */

/* --- [demo-mode] top-bar demo switcher --- */
.nav-demo { position: relative; display: inline-flex; }
/* Transparent like the sibling .theme-toggle — the floating glass nav pill IS the
   glass; re-applying --surface-glass here double-stacked the fill into a dark blob. */
.nav-demo-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px;
  border: 1px solid var(--border-2); border-radius: 999px;
  background: transparent;
  color: var(--text); font: 600 0.86rem var(--font-body); cursor: pointer; white-space: nowrap;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.nav-demo-btn:hover { border-color: var(--border-glow); background: color-mix(in srgb, var(--text) 6%, transparent); transform: translateY(-1px); }
.nav-demo-label { color: var(--text-muted); font-weight: 500; }
.nav-demo-label strong { color: var(--text); font-weight: 700; }
.nav-demo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); flex: none; }
.nav-demo-caret { width: 15px; height: 15px; color: var(--text-faint); flex: none; }
.nav-demo-dropdown {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 234px;
  display: grid; gap: 2px; padding: 8px;
  border-radius: 16px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  backdrop-filter: blur(24px) saturate(190%); -webkit-backdrop-filter: blur(24px) saturate(190%);
  box-shadow: 0 22px 54px -18px rgba(0,0,0,.55), inset 0 1px 0 var(--glass-highlight);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top left;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; z-index: 120;
}
.nav-demo-dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.nav-demo-head { padding: 6px 12px 4px; font: 600 0.7rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.nav-demo-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 10px; color: var(--text); font: 500 0.92rem var(--font-body); text-decoration: none;
}
.nav-demo-link:hover { background: var(--surface-inset); color: var(--accent-text); }
.nav-demo-link.is-current { background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; }
.nav-demo-link em { font-style: normal; font-size: 0.72rem; color: var(--accent-text); }
.nav-demo-buy {
  margin-top: 4px; padding: 10px 12px; border-radius: 10px; text-align: center; text-decoration: none;
  font: 700 0.9rem var(--font-body); color: var(--accent-ink);
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
}
.nav-demo-buy:hover { filter: brightness(1.05); }
@media (max-width: 700px) {
  .nav-demo-label { display: none; }
  .nav-demo-btn { padding: 0 9px; }
  .nav-demo-dropdown { left: auto; right: 0; transform-origin: top right; }
}

/* --- [demo-mode] floating buy button still shows inside the members app --- */
body.is-demo.page-members #floating-cta { display: inline-flex !important; }
/* …but never in the admin shell, where it overlaps the page-builder controls. */
body.shell-admin #floating-cta { display: none !important; }

/* --- [demo-mode] inline buy strip on demo app pages --- */
.demo-buy-strip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: var(--gap); padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border)); border-radius: var(--radius);
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface));
}
.demo-buy-strip-tag {
  flex: none; padding: 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-text);
  font: 700 0.7rem var(--font-body); letter-spacing: .08em; text-transform: uppercase;
}
.demo-buy-strip-text { flex: 1 1 280px; margin: 0; color: var(--text-muted); font-size: 0.92rem; line-height: 1.5; }
.demo-buy-strip-cta { flex: none; }

/* --- per-profile dashboard quick-tools --- */
.quicktools-grid {
  display: grid; gap: 12px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.quicktool {
  position: relative; display: grid; gap: 2px; align-content: start;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-inset); color: var(--text); text-decoration: none;
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.quicktool:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, var(--surface-inset)); }
.quicktool-label { font-weight: 700; font-size: 1rem; }
.quicktool-hook { color: var(--text-faint); font-size: 0.85rem; padding-right: 18px; }
.quicktool-arrow { position: absolute; top: 14px; right: 14px; color: var(--text-faint); transition: transform .18s var(--ease), color .18s var(--ease); }
.quicktool:hover .quicktool-arrow { color: var(--accent-text); transform: translateX(3px); }

/* --- per-profile landing "by the numbers" stat band --- */
.statband-grid {
  display: grid; gap: clamp(14px, 2vw, 22px); margin-top: clamp(26px, 3.4vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.statband-stat {
  display: grid; gap: 8px; align-content: start;
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
}
.statband-value {
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(2.3rem, 4.4vw, 3.3rem);
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.statband-label { color: var(--text-muted); font-size: 0.92rem; line-height: 1.5; }

/* ===================================================================
   CMS PAGE BUILDER — public page render + the admin editor
   =================================================================== */

/* ---- public-facing rendered pages ---- */
/* ====================================================================
   CMS public render — section bands + component library.
   Each row renders as a full-bleed <section class="cms-band"> whose inner
   wrapper re-contains the column grid. Everything themes via design tokens
   and is reduced-motion safe. (Editor chrome lives further below.)
   ==================================================================== */

/* the CMS page is a full-width flow of bands (overrides the centered .content) */
.content.cms-page { width: 100%; max-width: none; margin: 0; padding: 0; display: block; gap: 0; }

/* ---- section band ---- */
.cms-band { position: relative; width: 100%; padding-block: clamp(36px, 5vw, 60px); background: var(--band-bg, transparent); }
.cms-band-inner { width: 100%; max-width: 1080px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 48px); }
.cms-band.w-narrow .cms-band-inner { max-width: 720px; }
.cms-band.w-normal .cms-band-inner { max-width: 1080px; }
.cms-band.w-wide   .cms-band-inner { max-width: 1280px; }
.cms-band.w-full   .cms-band-inner { max-width: none; padding-inline: 0; }
.cms-band.pad-none { padding-block: 0; }
.cms-band.pad-s  { padding-block: clamp(20px, 3vw, 34px); }
.cms-band.pad-m  { padding-block: clamp(36px, 5vw, 60px); }
.cms-band.pad-l  { padding-block: clamp(54px, 8vw, 96px); }
.cms-band.pad-xl { padding-block: clamp(72px, 11vw, 132px); }
.cms-band.align-center { text-align: center; }
.cms-band.align-right  { text-align: right; }
.cms-band.has-minh { display: grid; min-height: var(--band-minh, auto); align-content: start; }
.cms-band.has-minh.valign-center { align-content: center; }
.cms-band.has-minh.valign-bottom { align-content: end; }
.cms-band.is-rounded { width: auto; margin-inline: clamp(12px, 3vw, 32px); border-radius: var(--radius-lg); overflow: hidden; }

/* backgrounds */
.cms-band.bg-surface     { --band-bg: var(--surface); }
.cms-band.bg-inset       { --band-bg: var(--surface-inset); }
.cms-band.bg-accent-soft { --band-bg: var(--accent-soft); }
.cms-band.bg-accent      { --band-bg: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.cms-band.bg-dark        { --band-bg: #0e1117; }
.cms-band.bg-image { background-image: linear-gradient(rgba(8,10,14,var(--band-ov,.45)), rgba(8,10,14,var(--band-ov,.45))), var(--band-img); background-size: cover; background-position: var(--band-pos, center); background-repeat: no-repeat; }
.cms-band.is-fixed { background-attachment: fixed; }
@media (hover: none), (prefers-reduced-motion: reduce) { .cms-band.is-fixed { background-attachment: scroll; } }

/* dark band: re-point ink tokens so content is light on any site theme */
.cms-band.is-dark { --text: #f3f5fb; --text-muted: rgba(243,245,251,.74); --text-faint: rgba(243,245,251,.55);
  --border: rgba(255,255,255,.15); --border-2: rgba(255,255,255,.24); --surface: rgba(255,255,255,.06);
  --surface-2: rgba(255,255,255,.09); --surface-inset: rgba(255,255,255,.05); --accent-soft: rgba(255,255,255,.1);
  --accent-text: #fff; color: var(--text); }

/* top dividers between bands */
.cms-band.dt-line { border-top: 1px solid var(--border); }
.cms-band.dt-fade::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border-2), transparent); }
.cms-band.dt-wave::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 16px; background: var(--accent); opacity: .9;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='16'%3E%3Cpath d='M0 16 Q20 0 40 8 T80 8 V16 Z' fill='black'/%3E%3C/svg%3E") repeat-x bottom / 80px 16px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='16'%3E%3Cpath d='M0 16 Q20 0 40 8 T80 8 V16 Z' fill='black'/%3E%3C/svg%3E") repeat-x bottom / 80px 16px; }

/* ---- column grid (within a band) ---- */
.cms-row { display: grid; gap: clamp(18px, 2.6vw, 30px); align-items: start; }
.cms-cols-1 { grid-template-columns: minmax(0, 1fr); }
.cms-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cms-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cms-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 820px) { .cms-cols-2, .cms-cols-3, .cms-cols-4 { grid-template-columns: minmax(0, 1fr); } }
.cms-col { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 22px); min-width: 0; }
.cms-band.align-center .cms-col { align-items: center; }
.cms-band.align-right  .cms-col { align-items: flex-end; }

/* ---- scroll reveal (JS-gated so no-JS users see everything) ---- */
/* every section band animates its inner content in as a unit as it enters view */
.cms-js .cms-band[data-reveal] .cms-band-inner { transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.cms-js .cms-band[data-reveal="up"]:not(.is-in) .cms-band-inner,
.cms-js .cms-band[data-reveal="stagger"]:not(.is-in) .cms-band-inner { opacity: 0; transform: translateY(36px); }
.cms-js .cms-band[data-reveal="fade"]:not(.is-in) .cms-band-inner { opacity: 0; }
.cms-js .cms-band[data-reveal].is-in .cms-band-inner { opacity: 1; transform: none; }
/* hero copy: a staggered entrance on load */
.cms-js .cms-hero-content[data-reveal] > * { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.cms-js .cms-hero-content[data-reveal].is-in > * { opacity: 1; transform: none; }
.cms-js .cms-hero-content[data-reveal] > *:nth-child(1) { transition-delay: .08s; }
.cms-js .cms-hero-content[data-reveal] > *:nth-child(2) { transition-delay: .2s; }
.cms-js .cms-hero-content[data-reveal] > *:nth-child(3) { transition-delay: .32s; }
.cms-js .cms-hero-content[data-reveal] > *:nth-child(4) { transition-delay: .44s; }
.cms-js .cms-hero-content[data-reveal] > *:nth-child(n+5) { transition-delay: .56s; }
@media (prefers-reduced-motion: reduce) {
  .cms-js .cms-band[data-reveal] .cms-band-inner,
  .cms-js .cms-hero-content[data-reveal] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- shared bits ---- */
.ta-left { text-align: left; } .ta-center { text-align: center; } .ta-right { text-align: right; }
.cms-eyebrow { display: inline-block; font: 600 .72rem/1 var(--font-mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); margin-bottom: .35em; }
.cms-block-head { max-width: 680px; margin: 0 0 clamp(24px, 4vw, 40px); }
.cms-band.align-center .cms-block-head { margin-inline: auto; }
.cms-block-title { margin: 0 0 .3em; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; letter-spacing: -.02em; }
.cms-block-intro { margin: 0; color: var(--text-muted); font-size: 1.02rem; line-height: 1.6; }

/* ---- heading block ---- */
.cms-heading { margin: 0; display: flex; flex-direction: column; gap: .25em; }
.cms-heading.ta-center { align-items: center; } .cms-heading.ta-right { align-items: flex-end; }
.cms-heading :where(h2,h3,h4) { margin: 0; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.cms-heading.sz-m  :where(h2,h3,h4) { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.cms-heading.sz-l  :where(h2,h3,h4) { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.cms-heading.sz-xl :where(h2,h3,h4) { font-size: clamp(2.1rem, 4.6vw, 3.2rem); }
.cms-heading.sz-display :where(h2,h3,h4) { font-size: clamp(2.6rem, 6vw, 4.2rem); font-weight: 800; }
.cms-heading.ink-gradient :where(h2,h3,h4) { background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cms-heading.ink-muted :where(h2,h3,h4) { color: var(--text-muted); }

/* ---- text block ---- */
.cms-text { color: var(--text-muted); line-height: 1.7; }
.cms-text.measure-narrow { max-width: 58ch; } .cms-text.measure-normal { max-width: 70ch; } .cms-text.measure-wide { max-width: none; }
.cms-text.ta-center { margin-inline: auto; } .cms-text.ta-right { margin-left: auto; }
.cms-text :where(h2, h3, h4) { color: var(--text); margin: 1.2em 0 .4em; line-height: 1.2; }
.cms-text :where(h2,h3,h4):first-child { margin-top: 0; }
.cms-text :where(p) { margin: 0 0 .9em; }
.cms-text :where(ul, ol) { margin: 0 0 .9em 1.2em; }
.cms-text :where(li) { margin: .25em 0; }
.cms-text a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.cms-text :where(blockquote) { margin: 1em 0; padding-left: 1em; border-left: 3px solid var(--accent); color: var(--text); }

/* ---- buttons ---- */
.button-large { padding: 14px 28px; font-size: 1.02rem; border-radius: 12px; }
.button-ghost { background: transparent; border: 1px solid color-mix(in srgb, currentColor 38%, transparent); color: inherit; box-shadow: none; }
.button-ghost:hover { background: color-mix(in srgb, currentColor 10%, transparent); border-color: color-mix(in srgb, currentColor 60%, transparent); }
.cms-btn-wrap.ta-center { display: flex; justify-content: center; }
.cms-btn-wrap.ta-right { display: flex; justify-content: flex-end; }
.cms-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.cms-btns.ta-center { justify-content: center; } .cms-btns.ta-right { justify-content: flex-end; }

/* ---- icon block ---- */
.cms-iconblock { display: flex; }
.cms-iconblock.ta-center { justify-content: center; } .cms-iconblock.ta-right { justify-content: flex-end; }
.cms-iconblock svg { width: 34px; height: 34px; color: var(--text); }
.cms-iconblock.sz-s svg { width: 24px; height: 24px; } .cms-iconblock.sz-l svg { width: 48px; height: 48px; }
.cms-iconblock.is-accent svg { color: var(--accent-text); }

/* ---- image block ---- */
.cms-image { display: block; max-width: 100%; height: auto; }
.cms-image.is-rounded { border-radius: var(--radius-lg); }
.cms-image.is-shadow { box-shadow: var(--shadow-lg); }
.cms-image.r-16x9 { aspect-ratio: 16/9; width: 100%; object-fit: cover; }
.cms-image.r-4x3  { aspect-ratio: 4/3;  width: 100%; object-fit: cover; }
.cms-image.r-1x1  { aspect-ratio: 1/1;  width: 100%; object-fit: cover; }
.cms-image.r-3x4  { aspect-ratio: 3/4;  width: 100%; object-fit: cover; }
.cms-image.is-empty { display: grid; place-items: center; min-height: 160px; border: 1px dashed var(--border-2); border-radius: var(--radius-lg); color: var(--text-faint); font-size: .9rem; }
.cms-figure { margin: 0; } .cms-figure figcaption { margin-top: 10px; color: var(--text-faint); font-size: .85rem; }

/* ---- checklist (shared) ---- */
.cms-checklist { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cms-checklist li { display: flex; align-items: flex-start; gap: 10px; color: var(--text); }
.cms-checklist svg { width: 20px; height: 20px; flex: none; color: var(--accent-text); margin-top: 1px; }

/* ---- card + card grid ---- */
.cms-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; text-decoration: none; color: inherit; }
.cms-card.style-outline { background: transparent; }
.cms-card.style-glass { background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(8px); }
.cms-card.style-elevated { border-color: transparent; box-shadow: var(--shadow); }
.cms-card.is-link { transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); }
.cms-card.is-link:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow); }
.cms-card-img { width: 100%; height: 180px; object-fit: cover; }
.cms-card-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.cms-card-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); margin-bottom: 4px; }
.cms-card-icon svg { width: 22px; height: 22px; }
.cms-card-title { font-size: 1.08rem; }
.cms-card-text { color: var(--text-muted); font-size: .93rem; line-height: 1.6; }

.cms-cardgrid { display: flex; flex-direction: column; }
.cms-cg-grid { display: grid; gap: clamp(14px, 2vw, 22px); }
.cms-cg-grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.cms-cg-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.cms-cg-grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .cms-cg-grid.cols-3, .cms-cg-grid.cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .cms-cg-grid { grid-template-columns: 1fr !important; } }
.cms-cg-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--radius-lg); text-decoration: none; color: inherit; text-align: left; transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); }
.cms-cardgrid.st-bordered .cms-cg-card { border: 1px solid var(--border); background: var(--surface); }
.cms-cardgrid.st-filled .cms-cg-card { background: var(--surface-inset); }
.cms-cardgrid.st-elevated .cms-cg-card { background: var(--surface); box-shadow: var(--shadow); }
.cms-cardgrid.st-plain .cms-cg-card { padding: 8px 0; }
.cms-cg-card.is-link:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow); }
.cms-cg-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--accent-soft); color: var(--accent-text); }
.cms-cg-icon svg { width: 24px; height: 24px; }
.cms-cg-img { width: 100%; height: 150px; object-fit: cover; border-radius: 12px; }
.cms-cg-title { font-size: 1.08rem; }
.cms-cg-body { margin: 0; color: var(--text-muted); font-size: .93rem; line-height: 1.6; }

/* ---- feature (media + text) ---- */
.cms-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.cms-feature.media-right .cms-fm-figure { order: 2; }
@media (max-width: 820px) { .cms-feature { grid-template-columns: 1fr; } .cms-feature.media-right .cms-fm-figure { order: 0; } }
.cms-fm-text { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.cms-band.align-center .cms-fm-text { align-items: flex-start; text-align: left; }
.cms-fm-title { margin: 0; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.18; letter-spacing: -.02em; }
.cms-fm-body { color: var(--text-muted); line-height: 1.7; }
.cms-fm-body p { margin: 0 0 .7em; }
.cms-fm-media { position: relative; overflow: hidden; }
.cms-fm-media img, .cms-fm-ph { width: 100%; display: block; }
.cms-fm-media.r-16x9 img, .cms-fm-media.r-16x9 .cms-fm-ph { aspect-ratio: 16/9; object-fit: cover; }
.cms-fm-media.r-4x3 img, .cms-fm-media.r-4x3 .cms-fm-ph { aspect-ratio: 4/3; object-fit: cover; }
.cms-fm-media.r-1x1 img, .cms-fm-media.r-1x1 .cms-fm-ph { aspect-ratio: 1/1; object-fit: cover; }
.cms-fm-media.r-3x4 img, .cms-fm-media.r-3x4 .cms-fm-ph { aspect-ratio: 3/4; object-fit: cover; }
.cms-fm-ph { background: linear-gradient(135deg, var(--surface-inset), var(--surface-2)); }
.cms-fm-media.ms-rounded { border-radius: var(--radius-lg); }
.cms-fm-media.ms-shadow { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.cms-fm-media.ms-framed { border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 8px; background: var(--surface); }
.cms-fm-media.ms-framed img { border-radius: calc(var(--radius-lg) - 6px); }
.cms-fm-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); font-weight: 600; text-decoration: none; }
.cms-fm-link svg { width: 18px; height: 18px; transition: transform .18s var(--ease); }
.cms-fm-link:hover svg { transform: translateX(3px); }

/* ---- feature list ---- */
.cms-flist { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.cms-flist.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 700px) { .cms-flist.cols-2 { grid-template-columns: 1fr; } }
.cms-fl-item { display: flex; gap: 14px; align-items: flex-start; text-align: left; }
.cms-fl-ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-soft); color: var(--accent-text); }
.cms-fl-ic svg { width: 20px; height: 20px; }
.cms-fl-tx { display: flex; flex-direction: column; gap: 2px; }
.cms-fl-tx strong { font-size: 1.02rem; }
.cms-fl-tx span { color: var(--text-muted); font-size: .92rem; line-height: 1.55; }

/* ---- steps / timeline ---- */
.cms-steps { display: flex; flex-direction: column; }
.cms-step-list { list-style: none; margin: 0; padding: 0; }
.cms-steps.o-horizontal .cms-step-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(20px, 3vw, 36px); }
.cms-steps.o-horizontal .cms-step { position: relative; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cms-steps.o-horizontal .cms-step::after { content: ""; position: absolute; top: 20px; left: calc(40px + 14px); right: -18px; height: 2px; background: linear-gradient(90deg, var(--border-2), transparent); }
.cms-steps.o-horizontal .cms-step:last-child::after { display: none; }
.cms-steps.o-vertical .cms-step-list { display: flex; flex-direction: column; gap: 0; }
.cms-steps.o-vertical .cms-step { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding-bottom: 28px; }
.cms-steps.o-vertical .cms-step::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: -4px; width: 2px; background: var(--border-2); }
.cms-steps.o-vertical .cms-step:last-child::before { display: none; }
.cms-step-num, .cms-step-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); font-weight: 700; }
.cms-step-ic svg { width: 20px; height: 20px; }
.cms-step-bd strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.cms-step-bd p { margin: 0; color: var(--text-muted); font-size: .93rem; line-height: 1.6; }
.cms-step-img { width: 100%; border-radius: 12px; margin-bottom: 10px; }

/* ---- stat band ---- */
.cms-statband { display: flex; flex-direction: column; }
.cms-stat-grid { display: grid; gap: clamp(20px, 3vw, 36px); }
.cms-stat-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cms-stat-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cms-stat-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .cms-stat-grid.cols-3, .cms-stat-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
.cms-statband.is-divided .cms-stat { border-left: 1px solid var(--border); padding-left: clamp(16px, 2.5vw, 32px); }
.cms-statband.is-divided .cms-stat-grid > .cms-stat:first-child { border-left: 0; padding-left: 0; }
.cms-stat { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.cms-band.align-center .cms-stat { text-align: center; align-items: center; }
.cms-stat-val { font: 800 clamp(2rem, 4.5vw, 3.2rem)/1 var(--font-display, inherit); letter-spacing: -.03em; background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cms-band.is-dark .cms-stat-val { background: none; color: #fff; }
.cms-stat-lab { color: var(--text-muted); font-size: .95rem; font-weight: 500; }
.cms-stat-sub { color: var(--text-faint); font-size: .82rem; }

/* ---- testimonials ---- */
.cms-stars { display: inline-flex; gap: 2px; margin-bottom: 12px; color: #f5b942; }
.cms-star { width: 18px; height: 18px; }
.cms-quote { display: flex; flex-direction: column; margin: 0; }
.cms-quote blockquote { margin: 0 0 16px; font-size: 1.15rem; line-height: 1.55; color: var(--text); font-weight: 500; }
.cms-q-foot { display: flex; align-items: center; gap: 12px; }
.cms-q-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.cms-q-who { display: flex; flex-direction: column; }
.cms-q-who strong { font-size: .98rem; } .cms-q-who span { color: var(--text-muted); font-size: .86rem; }
.cms-quotes.is-grid { display: grid; gap: 20px; }
.cms-quotes.is-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cms-quotes.is-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .cms-quotes.is-grid { grid-template-columns: 1fr !important; } }
.cms-quotes.is-grid .cms-quote, .cms-quotes.is-single .cms-quote { padding: 26px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.cms-quotes.is-single { max-width: 720px; margin: 0 auto; }
.cms-quotes.is-single .cms-quote blockquote { font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.cms-quotes.is-carousel { position: relative; max-width: 884px; margin: 0 auto; padding-inline: 62px; }
@media (max-width: 760px) { .cms-quotes.is-carousel { padding-inline: 0; } }
.cms-q-track { position: relative; overflow: hidden; }
.cms-q-slide { display: none; }
.cms-q-slide.is-active { display: block; animation: cmsFadeIn .5s var(--ease) both; }
.cms-quotes.is-carousel .cms-quote { padding: 30px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); text-align: center; align-items: center; }
.cms-quotes.is-carousel .cms-stars { justify-content: center; }
.cms-q-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; display: grid; place-items: center; z-index: 2; transition: color .16s, border-color .16s, background .16s; }
.cms-q-arrow:hover { color: var(--accent-text); border-color: var(--accent); }
.cms-q-arrow svg { width: 18px; height: 18px; }
.cms-q-arrow.prev { left: 0; transform: translateY(-50%) scaleX(-1); }
.cms-q-arrow.next { right: 0; }
@media (max-width: 760px) { .cms-q-arrow { display: none; } }
.cms-q-dots { display: flex; gap: 7px; justify-content: center; margin-top: 18px; }
.cms-q-dot { width: 8px; height: 8px; border-radius: 50%; border: 0; background: var(--border-2); cursor: pointer; transition: background .16s, width .16s; }
.cms-q-dot.is-on { background: var(--accent); width: 22px; border-radius: 4px; }
@keyframes cmsFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- pricing ---- */
.cms-pricing { display: flex; flex-direction: column; }
.cms-plan-grid { display: grid; gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.cms-plan-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cms-plan-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cms-plan-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .cms-plan-grid.cols-3, .cms-plan-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cms-plan-grid { grid-template-columns: 1fr !important; } }
.cms-plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); text-align: left; }
.cms-plan.is-featured { border-color: var(--accent); box-shadow: 0 18px 50px -28px var(--accent-glow); transform: scale(1.025); padding-top: 40px; }
@media (max-width: 620px) { .cms-plan.is-featured { transform: none; } }
.cms-plan-ribbon { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); z-index: 2; white-space: nowrap; padding: 5px 16px; border-radius: 999px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); font: 700 .7rem/1 inherit; letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 6px 16px -6px var(--accent-glow); }
.cms-plan-name { font-weight: 700; font-size: 1.1rem; }
.cms-plan-price { display: flex; align-items: baseline; gap: 4px; }
.cms-plan-amt { font: 800 clamp(2rem, 3.5vw, 2.6rem)/1 var(--font-display, inherit); letter-spacing: -.02em; }
.cms-plan-per { color: var(--text-faint); font-size: .9rem; }
.cms-plan-desc { margin: 0; color: var(--text-muted); font-size: .9rem; }
.cms-plan-feats { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cms-plan-feats li { display: flex; align-items: flex-start; gap: 9px; font-size: .92rem; }
.cms-plan-feats svg { width: 18px; height: 18px; flex: none; color: var(--accent-text); margin-top: 1px; }
.cms-plan-feats li.is-out { color: var(--text-faint); }
.cms-plan-feats .cms-dash { width: 18px; flex: none; text-align: center; color: var(--text-faint); }
.cms-plan-cta { width: 100%; justify-content: center; margin-top: auto; }
.cms-bill-toggle { display: inline-flex; align-items: center; gap: 12px; margin: 0 auto clamp(24px,4vw,36px); color: var(--text-muted); font-size: .92rem; font-weight: 500; }
.cms-bill-switch { width: 46px; height: 26px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--surface-inset); position: relative; cursor: pointer; padding: 0; }
.cms-bill-switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.cms-bill-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); }
.cms-bill-switch[aria-checked="true"] .cms-bill-knob { transform: translateX(20px); }

/* ---- accordion ---- */
.cms-accordion { display: flex; flex-direction: column; }
.cms-acc-list { display: grid; gap: 12px; }
.cms-accordion.l-two-col .cms-acc-list { grid-template-columns: 1fr 1fr; gap: 12px 20px; }
@media (max-width: 760px) { .cms-accordion.l-two-col .cms-acc-list { grid-template-columns: 1fr; } }
.cms-acc-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; align-self: start; }
.cms-acc-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border: 0; background: transparent; color: var(--text); font: 600 1rem/1.4 inherit; text-align: left; cursor: pointer; }
.cms-acc-chev { flex: none; width: 12px; height: 12px; border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint); transform: rotate(45deg); transition: transform .26s var(--ease); margin-bottom: 4px; }
.cms-acc-item.is-open .cms-acc-chev { transform: rotate(-135deg); margin-bottom: -4px; }
.cms-acc-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.cms-acc-item.is-open .cms-acc-a { grid-template-rows: 1fr; }
.cms-acc-a-in { overflow: hidden; min-height: 0; }
.cms-acc-a-in > * { padding: 0 20px; }
.cms-acc-a-in > :first-child { padding-top: 2px; } .cms-acc-a-in > :last-child { padding-bottom: 18px; }
.cms-acc-a-in { color: var(--text-muted); line-height: 1.65; }
.cms-acc-a-in p { margin: 0 0 .6em; padding-inline: 20px; }

/* ---- tabs ---- */
.cms-tabsblock { display: flex; flex-direction: column; gap: 20px; }
.cms-tablist { position: relative; display: inline-flex; gap: 4px; padding: 5px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-inset); align-self: flex-start; flex-wrap: wrap; }
.cms-tabsblock.a-center .cms-tablist { align-self: center; }
.cms-tablist .cms-tab { border: 0; background: transparent; color: var(--text-muted); font: 600 .9rem/1 inherit; padding: 9px 18px; border-radius: 999px; cursor: pointer; transition: color .18s, background .18s; }
.cms-tablist .cms-tab.is-on { color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.cms-tabpanel { color: var(--text-muted); line-height: 1.7; }
.cms-tabpanel p { margin: 0 0 .8em; }

/* ---- comparison ---- */
.cms-compare { overflow-x: auto; }
.cms-compare table { width: 100%; border-collapse: collapse; }
.cms-compare th, .cms-compare td { padding: 14px 18px; text-align: center; border-bottom: 1px solid var(--border); }
.cms-compare thead th { font-size: 1rem; }
.cms-compare th[scope="row"] { text-align: left; font-weight: 500; color: var(--text); }
.cms-compare .is-hi { background: var(--accent-soft); }
.cms-compare thead .is-hi { border-radius: 12px 12px 0 0; color: var(--accent-text); }
.cms-cmp-yes { color: var(--success); display: inline-grid; place-items: center; }
.cms-cmp-yes svg { width: 20px; height: 20px; }
.cms-cmp-no { color: var(--text-faint); font-size: 1.2rem; }
.cms-cmp-part { color: var(--text-muted); } .cms-cmp-txt { color: var(--text-muted); font-size: .9rem; }
@media (max-width: 620px) { .cms-compare th, .cms-compare td { padding: 10px; font-size: .88rem; } }

/* ---- CTA band ---- */
.cms-ctaband.a-center { text-align: center; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.cms-ctaband.a-split { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
@media (max-width: 760px) { .cms-ctaband.a-split { grid-template-columns: 1fr; } }
.cms-cta-title { margin: 0; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.1; letter-spacing: -.02em; }
.cms-cta-sub { margin: 0; color: var(--text-muted); font-size: 1.08rem; line-height: 1.6; }
.cms-band.is-dark .cms-cta-sub { color: rgba(255,255,255,.82); }
.cms-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.cms-ctaband.a-center .cms-cta-actions { justify-content: center; }
.cms-ct-list { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 6px; }
.cms-ctaband.a-center .cms-ct-list { justify-content: center; }
.cms-ct-row { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); text-decoration: none; font-size: .92rem; }
.cms-ct-row:hover { color: var(--accent-text); }
.cms-ct-ic svg { width: 18px; height: 18px; }

/* ---- banner ---- */
.cms-banner { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: var(--radius); font-size: .94rem; }
.cms-banner.tone-accent { background: var(--accent-soft); color: var(--accent-text); }
.cms-banner.tone-info { background: color-mix(in srgb, #3b82f6 16%, transparent); color: #2563eb; }
.cms-banner.tone-success { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.cms-banner.tone-warning { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.cms-banner.tone-neutral { background: var(--surface-inset); color: var(--text); }
.cms-bn-ic { display: inline-grid; place-items: center; } .cms-bn-ic svg { width: 20px; height: 20px; }
.cms-bn-tx { flex: 1; } .cms-bn-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: inherit; text-decoration: underline; }
.cms-bn-link svg { width: 15px; height: 15px; }
.cms-bn-x { border: 0; background: transparent; color: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; opacity: .6; padding: 2px 4px; }
.cms-bn-x:hover { opacity: 1; }

/* ---- gallery ---- */
.cms-gallery { display: flex; flex-direction: column; }
.cms-gal-grid { display: grid; gap: 12px; }
.cms-gallery.per-2 .cms-gal-grid { grid-template-columns: repeat(2, 1fr); }
.cms-gallery.per-3 .cms-gal-grid { grid-template-columns: repeat(3, 1fr); }
.cms-gallery.per-4 .cms-gal-grid { grid-template-columns: repeat(4, 1fr); }
.cms-gallery.per-5 .cms-gal-grid { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .cms-gal-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 560px) { .cms-gal-grid { grid-template-columns: repeat(2, 1fr) !important; } }
.cms-gallery.l-masonry .cms-gal-grid { display: block; column-count: 3; column-gap: 12px; }
@media (max-width: 900px) { .cms-gallery.l-masonry .cms-gal-grid { column-count: 2; } }
.cms-gallery.l-masonry .cms-gal-tile { break-inside: avoid; margin-bottom: 12px; }
.cms-gal-tile { margin: 0; overflow: hidden; border-radius: 12px; }
.cms-gal-tile img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 1/1; transition: transform .3s var(--ease); }
.cms-gallery.l-masonry .cms-gal-tile img { aspect-ratio: auto; }
.cms-gal-tile:hover img { transform: scale(1.05); }
.cms-gal-open { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; width: 100%; }
.cms-gal-tile figcaption { padding: 8px 4px 0; font-size: .82rem; color: var(--text-faint); }

/* lightbox */
.cms-lb { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(0,0,0,.9); padding: 24px; opacity: 0; transition: opacity .2s var(--ease); }
.cms-lb.is-in { opacity: 1; }
.cms-lb img { max-width: 92vw; max-height: 84vh; border-radius: 8px; }
.cms-lb-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 1.4rem; cursor: pointer; }
.cms-lb-btn.prev { left: 18px; } .cms-lb-btn.next { right: 18px; } .cms-lb-x { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 1.4rem; cursor: pointer; }

/* ---- logo strip ---- */
.cms-logos { display: flex; flex-direction: column; gap: 18px; align-items: center; }
.cms-logos-cap { margin: 0; color: var(--text-faint); font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cms-logos-row { display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 56px); align-items: center; justify-content: center; }
.cms-logo { display: inline-grid; place-items: center; }
.cms-logo img { height: 30px; width: auto; object-fit: contain; opacity: .8; }
.cms-logo-ph { font: 700 1.1rem var(--font-display, inherit); color: var(--text-faint); letter-spacing: -.01em; }
.cms-logos.is-gray .cms-logo img { filter: grayscale(1); opacity: .55; transition: filter .2s, opacity .2s; }
.cms-logos.is-gray .cms-logo:hover img { filter: grayscale(0); opacity: 1; }
.cms-logos-vp { width: 100%; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cms-logos-track { display: flex; gap: clamp(24px, 5vw, 56px); align-items: center; width: max-content; }
.cms-logos.is-marquee .cms-logos-track { animation: cmsMarquee 30s linear infinite; }
.cms-logos.is-marquee:hover .cms-logos-track,
.cms-logos.is-marquee:focus-within .cms-logos-track { animation-play-state: paused; } /* pause for mouse + keyboard */
@keyframes cmsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cms-logos.is-marquee .cms-logos-track { animation: none; } }

/* ---- video ---- */
.cms-video { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius-lg); background: #000; }
.cms-video.r-16x9 { aspect-ratio: 16/9; } .cms-video.r-4x3 { aspect-ratio: 4/3; } .cms-video.r-1x1 { aspect-ratio: 1/1; }
.cms-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cms-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cms-video-play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #111; cursor: pointer; display: grid; place-items: center; transition: transform .18s var(--ease), background .18s; }
.cms-video-play svg { width: 28px; height: 28px; margin-left: 3px; }
.cms-video-play:hover { transform: scale(1.08); background: #fff; }

/* ---- hero ---- */
.cms-hero { position: relative; overflow: hidden; display: grid; }
.cms-hero.h-auto { min-height: auto; padding-block: clamp(56px, 9vw, 110px); }
.cms-hero.h-tall { min-height: 62vh; }
.cms-hero.h-full { min-height: 88vh; }
@supports (height: 100svh) { .cms-hero.h-full { min-height: calc(100svh - 64px); } }
.cms-hero-bg { position: absolute; inset: 0; z-index: 0; }
.cms-hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.1s var(--ease); }
.cms-hero-slide.is-active { opacity: 1; }
.cms-hero.is-static .cms-hero-slide:first-child { opacity: 1; }
.cms-hero.t-kenburns.has-bg .cms-hero-slide.is-active { animation: cmsKenburns 16s ease-in-out infinite alternate; } /* continuous slow drift */
@keyframes cmsKenburns { from { transform: scale(1.02); } to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .cms-hero.t-kenburns .cms-hero-slide { animation: none !important; } }

/* hero rotating accent words (looping; powered by cms-public.js) */
/* Rotating accent word: a masked, one-line slot that morphs its WIDTH smoothly
   (no headline reflow/jerk) while the word slides up-and-out / in-from-below.
   JS (cms-public.js initRotators) sets the explicit width from a hidden measurer. */
.cms-hero-rotate { display: inline-block; vertical-align: bottom; white-space: nowrap; }
.cms-hero-rotate.is-rot-ready { overflow: hidden; transition: width .42s var(--ease-out); }
/* Directional reveal: outgoing word wipes/fades out RIGHT→LEFT, incoming word
   reveals/fades in LEFT→RIGHT (clip-path eats/grows the right edge). */
.cms-rot-word { display: inline-block; clip-path: inset(0 0 0 0); transition: clip-path .34s var(--ease-out), opacity .34s var(--ease-out); }
.cms-rot-word.is-rot-out { clip-path: inset(0 100% 0 0); opacity: 0; }
.cms-rot-word.is-rot-in { clip-path: inset(0 100% 0 0); opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .cms-hero-rotate.is-rot-ready { transition: none; }
  .cms-rot-word { transition: none; }
  .cms-rot-word.is-rot-out, .cms-rot-word.is-rot-in { clip-path: inset(0 0 0 0); opacity: 1; }
}
.cms-hero-inner { position: relative; z-index: 1; align-self: center; width: 100%; max-width: 1180px; margin: 0 auto; padding: clamp(28px, 6vw, 72px); }
.cms-hero.v-top .cms-hero-inner { align-self: start; } .cms-hero.v-bottom .cms-hero-inner { align-self: end; }
.cms-hero-content { display: flex; flex-direction: column; gap: 20px; max-width: 740px; align-items: flex-start; }
.cms-hero.a-center .cms-hero-content { max-width: 820px; margin: 0 auto; align-items: center; text-align: center; }
.cms-hero.has-bg { color: #fff; }
.cms-hero.has-bg .cms-hero-title, .cms-hero.has-bg .cms-hero-sub, .cms-hero.has-bg .cms-hero-eyebrow { color: #fff; }
.cms-hero-eyebrow { font: 600 .8rem/1 var(--font-mono, monospace); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); }
.cms-hero.has-bg .cms-hero-eyebrow { color: rgba(255,255,255,.85); }
.cms-hero-title { margin: 0; font: 800 clamp(2.4rem, 6vw, 4.6rem)/1.04 var(--font-display, inherit); letter-spacing: -.03em; text-wrap: balance; }
.cms-hero-title .grad { background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cms-hero.has-bg .cms-hero-title .grad { background: linear-gradient(120deg, #fff, color-mix(in srgb, var(--accent) 60%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* The rotating accent puts its text in a CHILD .cms-rot-word, which inherits the
   parent .grad's transparent fill but NOT its gradient background — so it renders
   invisible. Paint the gradient on the word itself (coexists fine with the
   clip-path wipe). This is the fix for "the rotating word shows blank". */
.cms-hero-title .cms-hero-rotate.grad { color: transparent; }
.cms-hero-title .cms-hero-rotate .cms-rot-word { background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.cms-hero.has-bg .cms-hero-title .cms-hero-rotate .cms-rot-word { background: linear-gradient(120deg, #fff, color-mix(in srgb, var(--accent) 60%, #fff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.cms-hero-sub { margin: 0; font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.55; color: var(--text-muted); max-width: 640px; }
.cms-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.cms-hero.a-center .cms-hero-actions { justify-content: center; }
.cms-hero-dots { position: absolute; bottom: 24px; left: 0; right: 0; z-index: 2; display: flex; gap: 9px; justify-content: center; }
.cms-hero-dot { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(255,255,255,.45); cursor: pointer; padding: 0; transition: background .18s, width .18s; }
.cms-hero-dot.is-on { background: #fff; width: 26px; border-radius: 5px; }

/* ---- hero behind the floating nav: a true full-screen splash ---- */
/* the first band pulls up under the floating pill nav (which keeps its glass look over the hero) */
body.has-overlay-hero .cms-page > section.cms-band:first-child { margin-top: calc(var(--nav-flow-h) * -1); }
body.has-overlay-hero .cms-hero.h-full { min-height: 100vh; }
@supports (height: 100svh) { body.has-overlay-hero .cms-hero.h-full { min-height: 100svh; } }
body.has-overlay-hero .cms-hero.v-top .cms-hero-inner { padding-top: calc(var(--nav-flow-h) + 16px); } /* keep top-aligned copy clear of the pill */
body.has-overlay-hero #site-nav { --glass-border: transparent; } /* let the hero show through the pill edge */
body.has-overlay-hero #site-nav:not(.is-scrolled) .nav-inner { background: color-mix(in srgb, #0b0d12 26%, transparent); box-shadow: 0 10px 30px -18px rgba(0,0,0,.5); }
body.has-overlay-hero #site-nav:not(.is-scrolled) .nav-brand,
body.has-overlay-hero #site-nav:not(.is-scrolled) .nav-link,
body.has-overlay-hero #site-nav:not(.is-scrolled) .theme-toggle,
body.has-overlay-hero #site-nav:not(.is-scrolled) .nav-avatar,
body.has-overlay-hero #site-nav:not(.is-scrolled) .nav-demo-btn,
body.has-overlay-hero #site-nav:not(.is-scrolled) .nav-demo-btn .nav-demo-label,
body.has-overlay-hero #site-nav:not(.is-scrolled) .nav-demo-btn .nav-demo-label strong,
body.has-overlay-hero #site-nav:not(.is-scrolled) .nav-demo-caret { color: #fff; }
body.has-overlay-hero #site-nav:not(.is-scrolled) .nav-demo-btn { border-color: rgba(255,255,255,0.32); }

/* ---- global announcement bar (a site setting; pinned to the very top of every page) ---- */
.cms-sitebanner { position: relative; z-index: 60; font-size: .92rem; }
.cms-sitebanner-in { width: min(var(--container), 100% - 28px); margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 9px 40px; flex-wrap: wrap; }
.cms-sitebanner.tone-accent { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, var(--surface)), color-mix(in srgb, var(--accent-2) 20%, var(--surface))); color: var(--accent-text); }
.cms-sitebanner.tone-info { background: color-mix(in srgb, #3b82f6 15%, var(--surface)); color: #2563eb; }
.cms-sitebanner.tone-success { background: color-mix(in srgb, var(--success) 15%, var(--surface)); color: var(--success); }
.cms-sitebanner.tone-warning { background: color-mix(in srgb, #f59e0b 16%, var(--surface)); color: #b45309; }
.cms-sitebanner.tone-neutral { background: var(--surface-inset); color: var(--text); }
.cms-sitebanner-tx { font-weight: 500; }
.cms-sitebanner-link { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cms-sitebanner-x { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; opacity: .6; padding: 2px 6px; }
.cms-sitebanner-x:hover { opacity: 1; }
@media (max-width: 560px) { .cms-sitebanner-in { justify-content: flex-start; padding: 9px 36px 9px 4px; } }

/* ---- storefront: CMS showcase section (an animated builder mockup) ---- */
.cms-showcase .cms-show { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(28px, 5vw, 60px); align-items: center; margin-top: clamp(26px, 4vw, 44px); }
@media (max-width: 880px) { .cms-showcase .cms-show { grid-template-columns: 1fr; } }
.cms-show-mock { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-lg); animation: cmsMockFloat 7s ease-in-out infinite; }
@keyframes cmsMockFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .cms-show-mock { animation: none; } }
.cms-mock-bar { display: flex; gap: 6px; padding: 11px 14px; background: var(--surface-inset); border-bottom: 1px solid var(--border); }
.cms-mock-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-2); }
.cms-mock-body { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--surface-2); }
.cms-mock-band { border-radius: 8px; padding: 14px; }
.cms-mock-band.is-hero { background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 14px; }
.cms-mock-band.is-hero .m-h { width: 62%; height: 12px; border-radius: 4px; background: rgba(255,255,255,.94); }
.cms-mock-band.is-hero .m-sub { width: 44%; height: 7px; border-radius: 4px; background: rgba(255,255,255,.6); }
.cms-mock-band.is-hero .m-btns { display: flex; gap: 6px; margin-top: 5px; }
.cms-mock-band.is-hero .m-btns i { width: 46px; height: 15px; border-radius: 7px; background: rgba(255,255,255,.92); }
.cms-mock-band.is-hero .m-btns i:last-child { background: rgba(255,255,255,.34); }
.cms-mock-band.is-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: transparent; padding: 4px; }
.cms-mock-band.is-cards u { height: 48px; border-radius: 7px; background: var(--surface-inset); border: 1px solid var(--border); }
.cms-mock-band.is-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; background: transparent; padding: 4px; }
.cms-mock-band.is-split b { height: 56px; border-radius: 7px; background: linear-gradient(135deg, var(--surface-inset), var(--surface-2)); border: 1px solid var(--border); }
.cms-mock-band.is-split .m-lines { display: flex; flex-direction: column; gap: 6px; }
.cms-mock-band.is-split .m-lines s { height: 7px; border-radius: 4px; background: var(--border-2); }
.cms-mock-band.is-split .m-lines s:nth-child(2) { width: 80%; } .cms-mock-band.is-split .m-lines s:nth-child(3) { width: 58%; }
.cms-mock-band.is-dark { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; background: #0e1117; }
.cms-mock-band.is-dark o { height: 32px; border-radius: 6px; background: rgba(255,255,255,.09); }
.cms-show-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.cms-show-feats li { display: flex; flex-direction: column; gap: 3px; padding-left: 16px; border-left: 2px solid var(--accent); }
.cms-show-feats strong { font-size: 1.04rem; }
.cms-show-feats span { color: var(--text-muted); font-size: .92rem; line-height: 1.55; }
.cms-show-cta { text-align: center; margin-top: clamp(26px, 4vw, 40px); }

/* ---- 404 page ---- */
.notfound { max-width: 560px; margin: 0 auto; text-align: center; padding-block: clamp(56px, 14vh, 160px); display: flex; flex-direction: column; align-items: center; }
.notfound-code { font: 800 clamp(3.6rem, 12vw, 6rem)/1 var(--font-display, inherit); letter-spacing: -.04em; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.notfound h1 { margin: .12em 0 .3em; font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: -.02em; }
.notfound p { margin: 0 0 1.7em; color: var(--text-muted); line-height: 1.6; max-width: 460px; }

/* ---- divider + spacer ---- */
.cms-divider { border: 0; border-top: 1px solid var(--border); margin: 0; width: 100%; }
.cms-divider.d-dotted { border-top-style: dotted; border-top-width: 2px; }
.cms-divider.d-gradient { border: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.cms-divider.w-short { width: 64px; margin-inline: auto; border-top-width: 3px; border-color: var(--accent); }
.cms-divider.d-gradient.w-short { width: 64px; margin-inline: auto; }
.cms-band.align-left .cms-divider.w-short { margin-inline: 0; }
.cms-spacer-xs { height: 8px; } .cms-spacer-s { height: 16px; } .cms-spacer-m { height: 30px; } .cms-spacer-l { height: 56px; } .cms-spacer-xl { height: 88px; } .cms-spacer-2xl { height: 128px; }
.cms-html { line-height: 1.6; }

/* ---- editor (rows -> columns -> blocks; collapsible cards, FLIP reorder) ---- */
#cms-editor { display: flex; flex-direction: column; gap: 18px; }
.cms-ic { display: inline-grid; place-items: center; line-height: 0; }
.cms-ic svg { width: 17px; height: 17px; display: block; }

/* small square icon buttons (reorder / delete) */
.cms-mini { width: 30px; height: 30px; flex: none; padding: 0; border: 1px solid var(--border-2); border-radius: 9px; background: var(--surface); color: var(--text-muted); cursor: pointer; display: inline-grid; place-items: center; transition: color .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease), transform .12s var(--ease); }
.cms-mini .cms-ic { width: 100%; height: 100%; }
.cms-mini svg { display: block; }
.cms-mini .cms-ic svg { width: 15px; height: 15px; }
.cms-mini:hover { color: var(--text); border-color: var(--border-glow); background: var(--surface-2); }
.cms-mini:active { transform: scale(.92); }
.cms-mini[title^="Delete"]:hover { color: #fff; background: var(--danger); border-color: var(--danger); }

/* collapsible fold (page settings) */
.cms-fold { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-inset); overflow: hidden; }
.cms-fold-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border: 0; background: transparent; color: var(--text); font-weight: 600; font-size: .95rem; cursor: pointer; transition: background .16s var(--ease); }
.cms-fold-head:hover { background: color-mix(in srgb, var(--text) 5%, var(--surface-inset)); }
.cms-fold-body { display: none; }
.cms-fold.is-open .cms-fold-body { display: block; animation: cmsBkReveal .24s var(--ease); }
.cms-fold-inner { min-height: 0; }
.cms-fold .cms-settings { padding: 2px 16px 18px; }
.cms-settings-form { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.cms-settings-form .cms-settings { width: 100%; }
.cms-settings-form > button[type="submit"] { margin-top: 2px; }
.cms-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 16px; align-items: start; }
.cms-set { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; color: var(--text-muted); }
.cms-set-wide { grid-column: 1 / -1; }
.cms-set > span { font-weight: 500; }
.cms-set input:not([type="checkbox"]):not([type="radio"]), .cms-set select, .cms-set textarea { font-family: inherit; width: 100%; }
.cms-set.cms-check { flex-direction: row; align-items: center; gap: 9px; }
.cms-set.cms-check input { width: auto; flex: none; }
/* Inline checkboxes get their own full row so they never sit misaligned beside a
   labelled field (the "Let visitors dismiss it" / "Use as homepage" float fix). */
.cms-settings > .cms-set.cms-check { grid-column: 1 / -1; margin-top: 2px; }
.cms-set.cms-check span { white-space: nowrap; }
.cms-check { display: inline-flex; align-items: center; gap: 9px; }

/* caret chevron — rotates open */
.cms-bk-caret { display: inline-grid; place-items: center; line-height: 0; color: var(--text-faint); transition: transform .3s var(--ease), color .16s var(--ease); }
.cms-bk-caret svg { width: 16px; height: 16px; }
.cms-bk.is-open .cms-bk-caret, .cms-fold.is-open .cms-bk-caret { transform: rotate(180deg); }

/* sticky top toolbar (classic CMS chrome): tabs left, Save + actions right.
   Sibling of #cms-editor so cms.js's root.innerHTML reset never wipes it. */
.cms-toolbar { position: sticky; top: 12px; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(12px); box-shadow: var(--shadow-sm); }
.cms-toolbar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.cms-toolbar .cms-tabs { align-self: auto; }

/* build / preview tab bar */
.cms-tabs { display: inline-flex; align-self: flex-start; gap: 3px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-inset); }
.cms-tab { appearance: none; border: 0; background: transparent; color: var(--text-muted); font: 600 .85rem/1 inherit; padding: 8px 20px; border-radius: 999px; cursor: pointer; transition: color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease); }
.cms-tab:hover { color: var(--text); }
.cms-tab.is-on { color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 4px 14px -4px var(--accent-glow); }

/* builder canvas */
.cms-builder { display: flex; flex-direction: column; gap: 16px; }
/* ---- editor polish: builder-canvas depth + premium micro-interactions ---- */
.cms-row-edit:hover { box-shadow: 0 14px 36px -26px rgba(0,0,0,0.6); }
.cms-row-edit:focus-within { border-color: var(--accent-line); }
.cms-col-edit { transition: border-color 0.16s var(--ease), background 0.16s var(--ease); }
.cms-col-edit:hover { border-color: var(--border-2); }
.cms-bk:hover { border-color: var(--border-2); box-shadow: 0 8px 22px -16px rgba(0,0,0,0.5); }
.cms-bk-head:active { transform: scale(0.997); }
.cms-add { position: relative; }
.cms-add:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -12px var(--accent-glow); }
.cms-mini:active, .cms-seg-btn:active { transform: scale(0.9); }
.cms-empty { animation: cmsEmptyIn 0.45s var(--ease) both; }
@keyframes cmsEmptyIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cms-empty { animation: none; } }
.cms-empty { padding: 40px 24px; border: 1.5px dashed var(--border-2); border-radius: var(--radius); text-align: center; display: flex; flex-direction: column; gap: 4px; }
.cms-empty p { margin: 0; }

/* row card */
.cms-row-edit { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-inset); padding: 14px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.cms-row-edit:hover { border-color: var(--border-2); }
.cms-row-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cms-row-label, .cms-col-label { font: 600 .68rem var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.cms-row-spacer { flex: 1; }

/* segmented column-count control */
.cms-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border-2); border-radius: 10px; background: var(--surface); }
.cms-seg-btn { width: 28px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); font: 600 .8rem/1 var(--font-mono, monospace); cursor: pointer; transition: color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease); }
.cms-seg-btn:hover { color: var(--text); }
.cms-seg-btn.is-on { color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 2px 8px -2px var(--accent-glow); }

/* columns grid */
.cms-cols-edit { display: grid; gap: 12px; }
.cms-ce-1 { grid-template-columns: 1fr; } .cms-ce-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.cms-ce-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .cms-ce-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .cms-ce-2, .cms-ce-3, .cms-ce-4 { grid-template-columns: 1fr; } }
.cms-col-edit { display: flex; flex-direction: column; gap: 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 11px; min-width: 0; }
.cms-col-head { display: flex; align-items: center; gap: 6px; }
.cms-col-head .cms-col-label { flex: 1; }

/* add-block dashed button */
.cms-add { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 9px; border: 1.5px dashed var(--border-2); border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font: 600 .82rem/1 inherit; cursor: pointer; transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease); }
.cms-add .cms-ic svg { width: 15px; height: 15px; }
.cms-add:hover { color: var(--accent-text); border-color: var(--border-glow); background: var(--accent-soft); }

/* collapsible block card */
.cms-bk { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-inset); overflow: hidden; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.cms-bk.is-open { border-color: var(--accent-line); box-shadow: 0 8px 24px -16px var(--accent-glow); }
.cms-bk-head { display: flex; align-items: center; gap: 10px; padding: 9px 10px; cursor: pointer; user-select: none; transition: background .16s var(--ease); }
.cms-bk-head:hover { background: color-mix(in srgb, var(--text) 5%, var(--surface-inset)); }
.cms-bk-head > .cms-ic { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-text); }
.cms-bk-head > .cms-ic svg { width: 16px; height: 16px; }
.cms-bk-type { flex: none; font: 600 .67rem var(--font-mono, monospace); letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); }
.cms-bk-sum { flex: 1; min-width: 0; font-size: .86rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cms-bk-ctrls { display: flex; align-items: center; gap: 5px; }
.cms-bk-ctrls .cms-mini { width: 28px; height: 28px; }
.cms-bk-ctrls .cms-bk-caret { margin-left: 2px; }
/* Reliable collapse via display toggle — the 0fr→1fr grid-rows trick left an
   ~18px sliver of the first field label leaking under every closed card. */
.cms-bk-body { display: none; }
.cms-bk.is-open .cms-bk-body { display: block; animation: cmsBkReveal .24s var(--ease); }
.cms-bk-inner { display: flex; flex-direction: column; gap: 11px; padding: 6px 12px 14px; }
@keyframes cmsBkReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* fields */
.cms-field { display: flex; flex-direction: column; gap: 5px; }
.cms-field-label { font-size: .76rem; font-weight: 600; color: var(--text-muted); }
.cms-field input[type=text], .cms-field input[type=number], .cms-field select, .cms-field textarea { width: 100%; }
.cms-field.cms-check { flex-direction: row; align-items: center; gap: 9px; font-size: .86rem; color: var(--text-muted); }

/* CMS editor form controls — give the page-settings, block fields, section-design
   and announcement forms the same styled-input look as the rest of admin. They were
   bare native OS controls (only width/font-family were set: no border/padding/bg/ring). */
.cms-set input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.cms-set select,
.cms-set textarea,
.cms-field input[type=text],
.cms-field input[type=number],
.cms-field input[type=url],
.cms-field input[type=email],
.cms-field select,
.cms-field textarea {
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: .9rem;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.cms-set textarea, .cms-field textarea { min-height: 64px; line-height: 1.5; resize: vertical; }
.cms-set input::placeholder, .cms-set textarea::placeholder,
.cms-field input::placeholder, .cms-field textarea::placeholder { color: var(--text-faint); }
.cms-set input:not([type="checkbox"]):focus, .cms-set select:focus, .cms-set textarea:focus,
.cms-field input:focus, .cms-field select:focus, .cms-field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
/* native checkboxes: size + accent-tint to match admin's .checkbox-row */
.cms-set.cms-check input[type="checkbox"], .cms-field.cms-check input[type="checkbox"] {
  width: 17px; height: 17px; min-height: 0; flex: none; accent-color: var(--accent); cursor: pointer;
}

/* rich-text field */
.cms-rt { border: 1px solid var(--border-2); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); transition: border-color .16s var(--ease), box-shadow .16s var(--ease); }
.cms-rt:focus-within { border-color: var(--border-glow); box-shadow: 0 0 0 3px var(--accent-soft); }
.cms-rt-bar { display: flex; gap: 2px; padding: 5px; border-bottom: 1px solid var(--border); background: var(--surface-inset); }
.cms-rt-bar button { min-width: 30px; height: 26px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 6px; font-size: .82rem; transition: background .14s var(--ease), color .14s var(--ease); }
.cms-rt-bar button:hover { background: var(--surface-2); color: var(--text); }
.cms-rt-ed { min-height: 72px; padding: 10px 12px; font-size: .92rem; line-height: 1.55; outline: none; color: var(--text); }
.cms-rt-ed:empty::before { content: "Type here…"; color: var(--text-faint); }

/* media field */
.cms-media-field { display: flex; gap: 12px; align-items: center; }
.cms-media-thumb { width: 76px; height: 58px; flex: none; display: grid; place-items: center; border: 1px solid var(--border-2); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-inset); font-size: .7rem; }
.cms-media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cms-media-actions { display: flex; flex-direction: column; gap: 6px; }

/* popover (block picker, presets) */
.cms-pop { position: absolute; z-index: 220; min-width: 200px; max-height: 320px; overflow-y: auto; padding: 6px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: top left; transition: opacity .16s var(--ease), transform .16s var(--ease); }
.cms-pop.is-in { opacity: 1; transform: none; }
.cms-pop-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: 500 .88rem/1 inherit; text-align: left; cursor: pointer; transition: background .14s var(--ease), color .14s var(--ease); }
.cms-pop-item .cms-ic { flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--surface-inset); color: var(--text-muted); }
.cms-pop-item .cms-ic svg { width: 15px; height: 15px; }
.cms-pop-item:hover { background: var(--accent-soft); color: var(--accent-text); }
.cms-pop-item:hover .cms-ic { background: var(--accent-soft); color: var(--accent-text); }

/* bottom actions */
.cms-builder-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cms-bigbtn { display: inline-flex; align-items: center; gap: 8px; }
.cms-bigbtn .cms-ic svg { width: 16px; height: 16px; }

/* live preview pane */
.cms-preview { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); padding: clamp(14px, 2.4vw, 28px); min-height: 200px; display: flex; flex-direction: column; gap: 12px; }
.cms-preview.is-mobile { align-items: center; }
.cms-prev-page { max-width: 1080px; margin: 0 auto; }
.cms-prev-msg { text-align: center; padding: 40px 0; }
.cms-pv-hint { display: inline-flex; align-items: center; gap: 8px; align-self: center; font-size: .82rem; color: var(--text-muted); }
.cms-pv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); flex: none; }
/* device-width iframe preview: its own viewport makes responsive @media fire */
.cms-prev-frame { display: block; width: 100%; height: 72vh; min-height: 460px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface); color-scheme: dark; }
/* in-preview click-to-edit affordance (this stylesheet also loads inside the iframe) */
.cms-pv-edit [data-cms-bk] { cursor: pointer; }
.cms-pv-edit [data-cms-bk]:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
/* build-panel highlight when a block is picked from the preview */
.cms-bk.is-justpicked { animation: cmsPick 1.5s var(--ease); }
@keyframes cmsPick { 0%, 45% { box-shadow: 0 0 0 2px var(--accent), 0 10px 28px -16px var(--accent-glow); } 100% { box-shadow: none; } }

/* sticky savebar */
.cms-savebar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: sticky; bottom: 0; z-index: 5; padding: 14px 16px; margin: 4px -2px 0; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(12px); box-shadow: 0 -6px 20px -16px rgba(0,0,0,.5); }
.cms-slug { font: .8rem var(--font-mono, monospace); color: var(--text-faint); background: var(--surface-inset); padding: 4px 9px; border-radius: 7px; }
.cms-save-msg { font-size: .85rem; color: var(--text-faint); margin-left: auto; transition: color .2s var(--ease); }
.cms-save-msg.is-ok { color: var(--success); } .cms-save-msg.is-bad { color: var(--danger); }

/* media modal */
.cms-modal-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(0,0,0,.55); padding: 20px; opacity: 0; transition: opacity .2s var(--ease); }
.cms-modal-overlay.is-in { opacity: 1; }
.cms-modal { width: min(640px, 100%); max-height: 82vh; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); transform: translateY(12px) scale(.98); transition: transform .26s var(--ease-out); }
.cms-modal-overlay.is-in .cms-modal { transform: none; }
.cms-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); }
.cms-modal-x { border: 0; background: transparent; color: var(--text-muted); font-size: 1.05rem; cursor: pointer; line-height: 1; padding: 4px; border-radius: 6px; transition: color .14s var(--ease), background .14s var(--ease); }
.cms-modal-x:hover { color: var(--text); background: var(--surface-inset); }
.cms-modal-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.cms-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.cms-media-pick { border: 1px solid var(--border-2); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-inset); cursor: pointer; aspect-ratio: 4/3; padding: 0; transition: border-color .16s var(--ease), transform .16s var(--ease); }
.cms-media-pick:hover { border-color: var(--accent); transform: translateY(-2px); }
.cms-media-pick img { width: 100%; height: 100%; object-fit: cover; }

/* ---- editor: new field types + section design + grouped picker ---- */
.cms-toolbar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* colour field */
.cms-color { display: flex; flex-direction: column; gap: 8px; }
.cms-color-sw { display: flex; gap: 6px; flex-wrap: wrap; }
.cms-sw { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border-2); cursor: pointer; padding: 0; transition: transform .12s var(--ease), box-shadow .12s var(--ease); }
.cms-sw:hover { transform: scale(1.1); }
.cms-sw.is-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.cms-sw-x { background: var(--surface-inset); color: var(--text-faint); font-size: .8rem; display: grid; place-items: center; }
.cms-color-row { display: flex; gap: 8px; align-items: center; }
.cms-color-hex { width: 40px; height: 40px; padding: 2px; border: 1px solid var(--border-2); border-radius: 8px; background: var(--surface); cursor: pointer; }
.cms-color-txt { flex: 1; font-family: var(--font-mono, monospace); font-size: .82rem; }

/* range field */
.cms-range { display: flex; align-items: center; gap: 12px; }
.cms-range input[type=range] { flex: 1; accent-color: var(--accent); }
.cms-range-val { min-width: 52px; text-align: right; font: 600 .82rem var(--font-mono, monospace); color: var(--accent-text); }

/* repeater field */
.cms-rep { gap: 8px; }
.cms-rep-list { display: flex; flex-direction: column; gap: 8px; }
.cms-rep-item { border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.cms-rep-item.is-open { border-color: var(--accent-line); }
.cms-rep-head { display: flex; align-items: center; gap: 9px; padding: 8px 9px; cursor: pointer; user-select: none; }
.cms-rep-head:hover { background: var(--surface-inset); }
.cms-rep-no { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--surface-inset); color: var(--text-faint); font: 600 .72rem/1 var(--font-mono, monospace); display: grid; place-items: center; }
.cms-rep-sum { flex: 1; min-width: 0; font-size: .85rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cms-rep-ctrls { display: flex; align-items: center; gap: 4px; }
.cms-rep-ctrls .cms-mini { width: 26px; height: 26px; }
.cms-rep-body { display: none; }
.cms-rep-item.is-open .cms-rep-body { display: block; animation: cmsBkReveal .22s var(--ease); }
.cms-rep-inner { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 4px 11px 12px; }
.cms-rep-foot { display: flex; align-items: center; gap: 10px; }
.cms-rep-add { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1.5px dashed var(--border-2); border-radius: 8px; background: transparent; color: var(--text-muted); font: 600 .8rem/1 inherit; cursor: pointer; transition: color .14s, border-color .14s, background .14s; }
.cms-rep-add:hover:not(:disabled) { color: var(--accent-text); border-color: var(--border-glow); background: var(--accent-soft); }
.cms-rep-add:disabled { opacity: .4; cursor: not-allowed; }
.cms-rep-add .cms-ic svg { width: 14px; height: 14px; }
.cms-rep-cap { font: .72rem var(--font-mono, monospace); color: var(--text-faint); }

/* section design panel + button */
.cms-design-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border: 1px solid var(--border-2); border-radius: 9px; background: var(--surface); color: var(--text-muted); font: 600 .76rem/1 inherit; cursor: pointer; transition: color .16s, border-color .16s, background .16s; }
.cms-design-btn .cms-ic svg { width: 15px; height: 15px; }
.cms-design-btn:hover { color: var(--text); border-color: var(--border-glow); }
.cms-design-btn.is-on { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-soft); }
.cms-sec-dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--border-2); }
.cms-sec-dot.is-none { background: repeating-linear-gradient(45deg, var(--surface-inset), var(--surface-inset) 2px, transparent 2px, transparent 4px) !important; }
.cms-row-edit.has-design { border-color: var(--accent-line); }
.cms-sec-body { margin: 0 0 14px; padding: 14px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface); animation: cmsEmptyIn .3s var(--ease) both; }
.cms-sec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.cms-sec-gt { grid-column: 1 / -1; font: 600 .68rem var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); margin-top: 4px; }
.cms-sec-gt:first-child { margin-top: 0; }
.cms-sec-body .cms-field-label { font-size: .72rem; }

/* grouped / searchable block picker */
.cms-pop-blocks { width: 320px; max-width: calc(100vw - 24px); max-height: 60vh; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.cms-pick-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); }
.cms-pick-head .cms-ic { color: var(--text-faint); }
.cms-pick-search { flex: 1; border: 0; background: transparent; font: inherit; font-size: .9rem; color: var(--text); outline: none; }
.cms-pick-list { overflow-y: auto; padding: 6px; }
.cms-pick-group { padding: 8px 10px 4px; font: 600 .66rem var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.cms-pick-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cms-pick-tx strong { font-size: .88rem; font-weight: 600; }
.cms-pick-hint { font-size: .76rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cms-pick-none { padding: 20px; text-align: center; }
.cms-pop-blocks .cms-pop-item { align-items: flex-start; }

/* preview width toggle */
.cms-wtoggle { display: inline-flex; gap: 3px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-inset); }
.cms-wbtn { border: 0; background: transparent; color: var(--text-muted); font: 600 .78rem/1 inherit; padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: color .16s, background .16s; }
.cms-wbtn.is-on { color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.cms-preview.is-mobile .cms-prev-frame { width: 390px; max-width: 100%; height: 740px; max-height: 78vh; border-radius: 26px; box-shadow: 0 0 0 9px var(--surface-inset), var(--shadow-lg); }

@media (prefers-reduced-motion: reduce) {
  .cms-fold-body, .cms-bk-body, .cms-bk-caret, .cms-pop, .cms-modal, .cms-modal-overlay, .cms-tab, .cms-seg-btn, .cms-mini, .cms-rep-body { transition: none !important; }
  .cms-bk.is-open .cms-bk-body, .cms-fold.is-open .cms-fold-body, .cms-rep-item.is-open .cms-rep-body { animation: none !important; }
}
.hidden { display: none; }

/* ---- cookie consent banner (only when GA is configured; gates Consent Mode) ---- */
.cookie-banner {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(14px);
  z-index: 200; width: min(680px, calc(100vw - 28px));
  align-items: center; gap: 14px 18px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: 16px;
  border: 1px solid var(--glass-border); background: var(--surface-glass);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 22px 54px -18px rgba(0, 0, 0, 0.55), inset 0 1px 0 var(--glass-highlight);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.cookie-banner:not([hidden]) { display: flex; }
.cookie-banner.is-shown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.cookie-banner-text { flex: 1; min-width: 220px; margin: 0; font-size: .86rem; line-height: 1.5; color: var(--text-muted); }
.cookie-banner-text strong { color: var(--text); font-weight: 600; }
.cookie-banner-text a { color: var(--accent-text); }
.cookie-banner-actions { display: flex; gap: 8px; flex: none; }
@media (max-width: 540px) {
  .cookie-banner { bottom: 10px; flex-direction: column; align-items: stretch; gap: 12px; }
  .cookie-banner-actions { justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .cookie-banner { transition: opacity .2s linear, visibility .2s; transform: translateX(-50%); } }