/* ==========================================================================
   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 lightened from #8a8794 to clear WCAG AA 4.5:1 even on the
     lightest glass body bg: --surface-3 #1c1c25 + --surface-inset (white 2.5%)
     ~ #22222a, where #8a8794 was only 4.49:1. #9d99a7 = 5.67:1 there, and
     6.0–7.2:1 on every solid dark surface. It renders real body copy
     (stat subs, plan-per, faint mono labels). */
  --text-faint: #9d99a7;

  /* 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 darkened from #8d8690 to clear WCAG AA 4.5:1 on --bg #faf8f5 */
  --text-faint: #6d6772;

  --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;
  transition: color 0.18s var(--ease), opacity 0.18s var(--ease);
}

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;
}

/* Baseline: ease hover/focus state changes on interactive elements so colour,
   background, border, icon and shadow shifts fade in/out instead of snapping.
   Deliberately low-specificity + early in the cascade — any component with its
   own `transition` (buttons, cards, the scroll-reveal system) overrides this, so
   it only fills in elements that would otherwise change state instantly. */
button, summary, label,
[role="button"], [role="tab"], [role="menuitem"], [role="switch"],
[class*="-card"], [class*="-btn"], [class*="-chip"], [class*="-tab"], [class*="-pill"],
[class*="-link"], [class*="-toggle"], .chip, .tag, .pill,
input, select, textarea {
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease),
    border-color 0.18s var(--ease), box-shadow 0.22s var(--ease),
    transform 0.18s var(--ease), opacity 0.18s var(--ease),
    fill 0.18s var(--ease), stroke 0.18s var(--ease);
}

/* skip-to-content link: visually-hidden until focused, then pinned top-left.
   Markup (the marketing agent adds <a class="skip-link" href="#main"> as the
   first focusable element, with id="main" on the content wrapper). */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 8px;
  top: 8px;
}

/* ------------------------------------------------------------ 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;
}
/* Styled select: drop the native chrome, draw a custom chevron + surface, so a
   bare <select> matches the design system everywhere (not just inside forms). */
select {
  -webkit-appearance: none;
  appearance: none;
  padding: 10px 38px 10px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398949f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}
select:hover { border-color: var(--border-glow); }
.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: 40px;
  height: 40px;
  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 {
  /* Tinted-glass band: NO hard divider lines. The translucent surface lets the
     fixed, breathing ambient orbs glow THROUGH the section, so bands read as
     soft glass over the page rather than ruled-off boxes — and consecutive
     .section-alt blocks merge with no seam. (Deliberately no full-section
     backdrop blur: across this many tall bands it murders scroll perf.) */
  background: color-mix(in srgb, var(--surface-2) 56%, transparent);
}
.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;
}
/* Base gradient-text utility — paints any .grad span with the accent gradient.
   Scoped variants below (hero, cms hero) override with bespoke gradients. */
.grad {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.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);
}
/* The URL takes the slack and truncates; the scene tag/badge never shrinks or
   clips (it's the label that identifies the window). */
.app-bar .app-url {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.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); }
}

/* ====== Hero glass window — morphing flagship-feature showcase (storefront) ======
   The window drifts gently (ambient). On each scene change the body height eases
   smoothly to the new scene while the old fades out and the new scene's elements
   rise / grow / fill in on a stagger — a true content morph, not a snap. */
.hero-cycle .app-window { animation: winFloat 13s ease-in-out infinite; }
@keyframes winFloat {
  0%, 100% { transform: perspective(1500px) rotateY(-8deg) rotateX(2.4deg) translateY(0); }
  50% { transform: perspective(1500px) rotateY(-5.6deg) rotateX(1.5deg) translateY(-11px); }
}
/* the body eases its height as differently-sized scenes swap in (JS locks/animates height) */
/* minmax(0,1fr) pins the single column to the window width so a wide scene (e.g. the
   studio image grid) can't expand the auto column and overflow the device frame. */
.hero-cycle .app-body { position: relative; grid-template-columns: minmax(0, 1fr); transition: height 0.62s var(--ease); will-change: height; }
/* scenes stack: only the active one is in flow + visible */
.app-scene { display: block; }
.hero-cycle .app-scene { position: absolute; inset: 0 auto auto 0; right: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.hero-cycle .app-scene.is-active {
  position: relative; right: auto; opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 0.45s var(--ease) 0.1s;
}
.hero-cycle .app-scene.is-leaving {
  position: absolute; inset: 0 0 auto 0; opacity: 0; visibility: visible; pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

/* --- shared element-entrance motion (engine-owned; scenes only add the classes + --i) --- */
.app-scene .s-rise { opacity: 0; transform: translateY(15px); }
.hero-cycle .app-scene.is-active .s-rise { animation: sRise 0.66s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 62ms + 0.14s); }
@keyframes sRise { to { opacity: 1; transform: none; } }
.app-scene .s-grow { transform: scaleY(0.05); transform-origin: bottom; opacity: 0; }
.hero-cycle .app-scene.is-active .s-grow { animation: sGrow 0.74s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 42ms + 0.22s); }
@keyframes sGrow { 0% { transform: scaleY(0.05); opacity: 0; } 35% { opacity: 1; } 100% { transform: scaleY(1); opacity: 1; } }
.app-scene .s-fill { width: 0; }
.hero-cycle .app-scene.is-active .s-fill { animation: sFill 0.95s var(--ease-out) 0.34s both; }
@keyframes sFill { to { width: var(--fill, 100%); } }

.app-bar .app-tag {
  flex: none;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  padding: 5px 10px;
  border-radius: 7px;
  white-space: nowrap;
}
.hero-dots { display: flex; gap: 7px; justify-content: center; margin-top: 18px; position: relative; z-index: 3; }
.hero-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--border-2); transition: background 0.35s var(--ease), width 0.35s var(--ease); }
.hero-dot.is-on { width: 20px; background: var(--accent); }

/* ---- 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 h3 {
  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;
}
/* "Normal price" discount anchor shown struck-through before the launch price. */
.plan-price-was {
  color: var(--text-faint);
  font-weight: 500;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  margin-right: 0.28em;
  opacity: 0.85;
}
.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;
  direction: rtl; /* copy → right, sign-in mock → left (DOM order kept for mobile stack) */
}
.social-wrap > * { direction: ltr; }
.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));
  /* Movement and fade are SEPARATE tracks so the glide stays one continuous
     motion (no mid-path slow-down) while the cursor still fades in quickly. */
  animation: authCursorMove 7s var(--ease) infinite, authCursorFade 7s linear infinite;
}
.auth-cursor svg { width: 100%; height: 100%; display: block; }
/* One smooth glide from the start point straight to the button, then press →
   release → lift. The only translate happens 9%→22%; everything after is at the
   button, so there is no second movement. */
@keyframes authCursorMove {
  0%, 9% { transform: translate(30px, 34px) scale(1); }
  22% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(0, 0) scale(0.82); }
  29% { transform: translate(0, 0) scale(1); }
  34%, 100% { transform: translate(1px, -3px) scale(1); }
}
@keyframes authCursorFade {
  0%, 9% { opacity: 0; }
  13%, 30% { opacity: 1; }
  34%, 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: capability constellation — every subsystem wired into one core */
.wired { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(16px, 3vw, 40px); max-width: 980px; margin: clamp(30px, 4vw, 48px) auto 0; }
.wired-wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.wired-wire { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; opacity: 0.9; stroke-dasharray: 1 7; stroke-linecap: round; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 75%, transparent)); animation: wireFlow 9s linear infinite; }
@keyframes wireFlow { to { stroke-dashoffset: -64; } }
.wired-rail { display: grid; gap: clamp(10px, 1.4vw, 15px); position: relative; z-index: 1; }
.wired-cap { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.wired-cap:hover { transform: translateY(-2px); border-color: var(--border-2); background: var(--surface-3); box-shadow: var(--shadow-sm); }
.wired-cap-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.wired-cap-ico svg { width: 18px; height: 18px; }
.wired-cap-label { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: var(--text); letter-spacing: -0.01em; min-width: 0; line-height: 1.25; }
.wired-cap-port { position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); transform: translateY(-50%); }
.wired-rail-l .wired-cap-port { right: -4px; }
.wired-rail-r .wired-cap-port { left: -4px; }
.wired-rail-r .wired-cap { flex-direction: row-reverse; text-align: right; }
.wired-core { display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; }
.wired-core-orb { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: clamp(132px, 15vw, 162px); height: clamp(132px, 15vw, 162px); border-radius: 50%; text-align: center; padding: 12px; box-sizing: border-box; background: var(--surface-2); border: 1px solid var(--accent-line); box-shadow: 0 0 48px -8px var(--accent-glow), 0 0 0 6px color-mix(in srgb, var(--accent) 7%, transparent); }
/* moving "energy": drifting accent blobs, blurred + slowly orbiting, clipped to the orb */
/* three soft blobs drifting on different organic paths (no shared rotation) so the
   energy reads as fluid/random plasma rather than spinning in a circle */
.orb-blob { position: absolute; z-index: -2; border-radius: 50%; filter: blur(13px); mix-blend-mode: screen; will-change: transform; }
.orb-blob-1 { width: 72%; height: 72%; left: 6%; top: 4%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 85%, transparent), transparent 68%); animation: orbBlob1 11s ease-in-out infinite alternate; }
.orb-blob-2 { width: 66%; height: 66%; right: 2%; bottom: 6%; background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 72%, transparent), transparent 68%); animation: orbBlob2 15s ease-in-out infinite alternate; }
.orb-blob-3 { width: 54%; height: 54%; left: 28%; top: 34%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%); animation: orbBlob3 9s ease-in-out infinite alternate; }
/* soft centred scrim so the label stays readable over the energy */
.wired-core-orb::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--surface-2) 58%, transparent) 0%, transparent 58%); }
.wired-core-name { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 1.4vw, 1.18rem); color: var(--text); letter-spacing: -0.01em; }
.wired-core-stack { position: relative; z-index: 1; font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-muted); letter-spacing: 0.02em; }
@keyframes orbBlob1 { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(20%, 16%) scale(1.18); } 66% { transform: translate(-14%, 22%) scale(0.9); } 100% { transform: translate(12%, -12%) scale(1.08); } }
@keyframes orbBlob2 { 0% { transform: translate(0, 0) scale(1.1); } 40% { transform: translate(-22%, -14%) scale(0.88); } 75% { transform: translate(12%, 16%) scale(1.24); } 100% { transform: translate(-8%, 10%) scale(1); } }
@keyframes orbBlob3 { 0% { transform: translate(0, 0) scale(0.95); } 50% { transform: translate(16%, -18%) scale(1.3); } 100% { transform: translate(-16%, 14%) scale(1); } }
@media (max-width: 760px) {
  /* Stacked: a tighter "hub" orb on top, then the capabilities as a clean,
     uniform 2-col grid. Cards share a min-height so 1- and 2-line labels line
     up row-to-row (no ragged gaps); wires are dropped (they only read radially). */
  .wired { grid-template-columns: 1fr; gap: 14px; max-width: 460px; }
  .wired-wires { display: none; }
  .wired-core { order: -1; }
  .wired-core-orb { width: 120px; height: 120px; box-shadow: 0 0 34px -10px var(--accent-glow), 0 0 0 5px color-mix(in srgb, var(--accent) 7%, transparent); }
  .wired-rail { grid-template-columns: 1fr 1fr; gap: 10px; }
  .wired-rail-r .wired-cap { flex-direction: row; text-align: left; }
  .wired-cap-port { display: none; }
  .wired-cap { padding: 11px 13px; min-height: 62px; }
  .wired-cap-label { font-size: 0.82rem; }
}
@media (max-width: 430px) { .wired-rail { grid-template-columns: 1fr; } .wired-cap { min-height: 54px; } }
@media (prefers-reduced-motion: reduce) { .wired-wire, .orb-blob { animation: none; } }

/* 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); } }
/* Flagship demos as a featured top row of 3; the other four sit full-width beneath. */
.demo-grid.demo-grid-rest { grid-template-columns: 1fr; margin-top: clamp(12px, 1.6vw, 18px); }
@media (min-width: 560px) { .demo-grid.demo-grid-rest { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .demo-grid.demo-grid-rest { grid-template-columns: repeat(4, 1fr); } }
.demo-card.is-featured { padding: 26px 24px 22px; border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface)); }
.demo-card.is-featured .demo-card-ico { width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.demo-card.is-featured:hover .demo-card-ico { color: var(--accent); }
.demo-card.is-featured .demo-card-name { font-size: calc(var(--step-0) * 1.14); }
.demo-card.is-featured .demo-card-hook { font-size: 0.94rem; }
.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-star { position: absolute; top: 16px; right: 16px; width: 17px; height: 17px; color: var(--accent); }
.demo-star svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 55%, transparent)); }
.demo-card.is-featured:hover .demo-star { transform: scale(1.12) rotate(8deg); transition: transform 0.25s var(--ease); }
.demo-card-head { display: flex; align-items: center; gap: 11px; padding-right: 22px; }
.demo-card-ico { flex: 0 0 auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; color: var(--text); transition: color 0.18s var(--ease); }
.demo-card-ico svg { width: 22px; height: 22px; display: block; }
.demo-card:hover .demo-card-ico { color: var(--accent); }
.demo-card-name { font-family: var(--font-display); font-weight: 700; font-size: var(--step-0); min-width: 0; }
.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  =========== */
/* The scroll-reveal entrance is a one-shot ANIMATION rather than a transition, so
   it never occupies an element's `transition` property. That keeps each element's
   own hover transition (cards lifting, borders glowing, shadows growing) smooth —
   previously the reveal's transition (opacity/transform only) replaced the card's
   hover transition, so border + shadow snapped instantly on hover. */
/* 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;
  animation: ssRevealIn 0.7s var(--ease-out) var(--reveal-delay, 0ms) backwards;
}
@keyframes ssRevealIn {
  from { opacity: 0; transform: translateY(26px); }
  to { 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; }
}

/* ---- Hero showcase mockup: scale-to-fit on phones ----
   The morphing window is laid out at ~480px; below that it overflows and clips
   its scenes (subs / studio / api / cms / app all hit this). `zoom` shrinks the
   whole window — layout height included, so there's no gap and the JS height-
   morph (which measures offsetHeight + ends at height:auto) stays self-
   consistent. Banded because zoom needs a unitless number and can't take a
   vw-derived calc. The 3D tilt + float drift are dropped while scaled so it
   sits flat and centred. */
@media (max-width: 512px) {
  .hero-visual { max-width: none; width: 100%; }
  .hero-visual .app-window { transform: none; animation: none; width: 480px; margin-inline: auto; zoom: 0.88; }
}
@media (max-width: 452px) { .hero-visual .app-window { zoom: 0.79; } }
@media (max-width: 412px) { .hero-visual .app-window { zoom: 0.71; } }
@media (max-width: 372px) { .hero-visual .app-window { zoom: 0.64; } }
@media (max-width: 340px) { .hero-visual .app-window { zoom: 0.56; } }

/* ===================== 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; white-space: nowrap; }
.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);
}
/* Below this the long note no longer fits on one line, so switch to a tight
   [badge] [Only £x →] pill (the note is restated at the pricing section anyway). */
@media (max-width: 900px) {
  .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: 1600px;
  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 36px 10px 13px; border: 1px solid var(--border); border-radius: 9px; background-color: 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); }
/* opaque warm tint mixed into the surface — not a translucent accent over
   near-black, which on a dark theme renders as muddy brown. */
.cms-band.bg-accent-soft { --band-bg: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.cms-band.bg-accent      { --band-bg: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.cms-band.bg-dark        { --band-bg: #0e1117; }
/* Subtle section separation: a hairline between consecutive bands so the page
   reads as distinct sections even when adjacent backgrounds are near-identical
   dark tones. Skipped where a band already carries its own colour (accent /
   image), inset shape (rounded), or an explicit top divider. */
.cms-band + .cms-band:not(.bg-accent):not(.bg-image):not(.is-rounded):not(.dt-line):not(.dt-fade):not(.dt-wave) {
  border-top: 1px solid var(--border);
}
.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,.68);
  --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)); } }
/* 2-up cards get cramped on large phones; drop to one column a touch earlier. */
@media (max-width: 640px) { .cms-cg-grid.cols-2 { grid-template-columns: 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: 0; justify-content: center; margin-top: 10px; }
/* 8px visual dot drawn inside a 24px transparent hit-area (padding + content-box
   background-clip) so the touch target clears the WCAG 2.5.5 minimum without
   changing the dot's look — arrows are hidden on mobile so dots are the only
   touch control. box-sizing:content-box keeps the 8px→22px active morph intact. */
.cms-q-dot { box-sizing: content-box; width: 8px; height: 8px; padding: 8px; border-radius: 50%; border: 0; background: var(--border-2); background-clip: content-box; cursor: pointer; transition: background .16s, width .16s; }
.cms-q-dot.is-on { background: var(--accent); background-clip: content-box; width: 22px; border-radius: 12px; }
@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; }
/* The IMAGE area is the rounded, overflow-clipped box (not the whole figure,
   which also holds the caption) — so all four corners round, and the hover
   zoom stays clipped inside the frame instead of spilling out. */
.cms-gal-open, .cms-gal-tile > img { display: block; width: 100%; border-radius: 12px; overflow: hidden; }
.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; }
.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; }
}
/* On narrow phones the rotating word (nowrap + a JS-measured fixed width) can
   clip/overflow .cms-hero (overflow:hidden). Let it flow onto its own line and
   drop the fixed-width morph so long configured words always fit. The inline
   width set by cms-public.js is overridden so the slot sizes to content. */
@media (max-width: 560px) {
  .cms-hero-rotate, .cms-hero-rotate.is-rot-ready {
    white-space: normal;
    width: auto !important;
    overflow: visible;
  }
  .cms-hero-title { overflow-wrap: anywhere; }
}
.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(2rem, 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: 16px; left: 0; right: 0; z-index: 2; display: flex; gap: 0; justify-content: center; }
/* 10px visual dot inside a ~28px transparent hit-area (see .cms-q-dot note). */
.cms-hero-dot { box-sizing: content-box; width: 10px; height: 10px; padding: 9px; border-radius: 50%; border: 0; background: rgba(255,255,255,.45); background-clip: content-box; cursor: pointer; transition: background .18s, width .18s; }
.cms-hero-dot.is-on { background: #fff; background-clip: content-box; width: 26px; border-radius: 13px; }

/* ---- 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); }

/* ---- Reference library showcase (storefront) ---- */
.refshow { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 56px); align-items: center; margin-top: clamp(26px, 4vw, 44px); }
/* let the columns shrink below their content (the inner mock/stats grids force a
   wide min-content otherwise → overflow on narrow screens) */
.refshow > * { min-width: 0; }
@media (max-width: 880px) { .refshow { grid-template-columns: 1fr; } }
.refshow-mock { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-lg); }
.refshow-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.refshow-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-2, var(--border)); }
.refshow-bar b { margin-left: 10px; font: 500 .76rem/1 var(--font-mono, monospace); color: var(--text-faint); letter-spacing: .02em; }
.refshow-body { display: grid; grid-template-columns: 54px minmax(0, 1fr); min-height: 250px; }
.refshow-side { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; border-right: 1px solid var(--border); align-items: center; background: var(--surface-2); }
.refshow-side u { width: 22px; height: 7px; border-radius: 3px; background: var(--border-2, var(--border)); opacity: .7; }
.refshow-side u.is-on { width: 26px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); opacity: 1; }
.refshow-main { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 18px; align-content: start; }
.refshow-chip { display: flex; align-items: center; justify-content: center; padding: 14px 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); font-size: .76rem; font-weight: 600; color: var(--text-muted); text-align: center; }
.refshow-chip:nth-child(3n+1) { border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); color: var(--text); }
.refshow-aside { display: flex; flex-direction: column; gap: 22px; }
.refshow-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.refshow-stats div { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 2px solid var(--accent); }
.refshow-stats strong { font-size: 1.7rem; line-height: 1; font-weight: 800; }
.refshow-stats span { color: var(--text-muted); font-size: .82rem; }
.refshow-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.refshow-points li { color: var(--text-muted); font-size: .94rem; line-height: 1.55; }
.refshow-points strong { color: var(--text); display: block; }
.refshow-points code { font-size: .85em; }
.refshow-term { margin: 0; padding: 13px 15px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); font: 500 .8rem/1.5 var(--font-mono, monospace); color: var(--text); overflow-x: auto; white-space: nowrap; }
@media (max-width: 520px) { .refshow-term { font-size: .64rem; padding: 10px 12px; } }

/* ---- Guides index (storefront /guides) ---- */
.guides-index .page-hero { text-align: center; }
.guides-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.guide-card { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .22s var(--ease); }
.guide-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); transform: translateY(-3px); box-shadow: var(--shadow); }
.guide-card h2 { margin: 0; font-size: 1.08rem; line-height: 1.3; }
.guide-card p { margin: 0; color: var(--text-muted); font-size: .92rem; line-height: 1.55; flex: 1; }
.guide-card-go { color: var(--accent-text, var(--accent)); font-weight: 600; font-size: .9rem; }

/* ---- Mobile app backend showcase (storefront) ---- */
.app-show { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(26px, 4vw, 52px); align-items: center; margin-top: clamp(26px, 4vw, 44px); }
/* connect the sign-in card to the API call so they read as one app→backend flow */
.app-show-link { display: flex; align-items: center; justify-content: center; height: 30px; position: relative; }
.app-show-link::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 12%, transparent)); }
.app-show-link-dot { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--accent-line); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent); display: grid; place-items: center; }
.app-show-link-dot::after { content: ""; width: 6px; height: 6px; border-right: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent); transform: rotate(45deg) translate(-1px, -1px); }
@media (max-width: 880px) { .app-show { grid-template-columns: 1fr; } }
.app-show-visual { display: flex; flex-direction: column; gap: 0; }
.app-show-signin { margin: 0; }
.app-show-or { text-align: center; color: var(--text-muted); font-size: .82rem; margin: 4px 0 0; }
.app-show-api { margin: 0; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2, var(--surface)); box-shadow: var(--shadow); font: 500 .82rem/1.7 var(--font-mono, monospace); color: var(--text); white-space: pre-wrap; word-break: break-word; overflow-x: auto; }
.app-show-api .c-cm { color: var(--text-muted); }
.app-show-api .c-fn { color: var(--accent-text, var(--accent)); font-weight: 700; }
.app-show-api .c-k { color: var(--text-muted); }
.app-show-api .c-str { color: var(--accent-text, var(--accent)); }
.app-show-api .c-ok { color: #34d399; }
.app-show-feats li { border-left-color: var(--accent); }

/* ---- Storefront conversion bits (review fix-swarm) ---- */
.hero-reassure { margin: 12px 0 0; font-size: .92rem; color: var(--text-muted); }
.hero-reassure a { color: var(--accent-text, var(--accent)); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.demo-grid-note { max-width: 640px; margin: 6px auto 0; text-align: center; color: var(--text-muted); font-size: .95rem; }
.demo-dogfood { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 22px auto 0; max-width: 720px; text-align: center; color: var(--text-muted); font-size: .92rem; }
.home-buy-card { max-width: 680px; margin: 0 auto; text-align: center; padding: clamp(28px, 4vw, 44px); }
/* wider card → lay the feature list out in two left-aligned columns instead of one
   skinny centred column where every line wrapped. Reads cleaner + converts better. */
/* Centre the LAUNCH PRICE eyebrow to match the rest of the (centred) card. */
.home-buy-card .plan-topline { justify-content: center; }
/* Bullets pack into two balanced columns (CSS multicol) instead of a fixed
   2-col grid — items flow tightly with no per-row gaps regardless of length. */
.home-buy-card .plain-list { display: block; columns: 2; column-gap: 30px; text-align: left; margin-top: 24px; max-width: 600px; margin-inline: auto; }
.home-buy-card .plain-list li { font-size: 0.96rem; break-inside: avoid; margin-bottom: 12px; }
.home-buy-card .plan-price { font-size: clamp(2.6rem, 5vw, 3.4rem); }
.home-buy-card .button-primary { margin-top: 8px; padding: 16px 24px; font-size: 1.02rem; }
@media (max-width: 600px) { .home-buy-card .plain-list { grid-template-columns: 1fr; } }
.home-buy-reassure { margin: 14px 0 0; font-size: .88rem; color: var(--text-muted); }
.home-buy-reassure a { color: var(--accent-text, var(--accent)); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---- 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; }
/* ---- Side-by-side (split) editor view: settings/build left, live preview right ---- */
#cms-editor.is-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 18px; row-gap: 16px; align-items: start; }
#cms-editor.is-split > .cms-fold,
#cms-editor.is-split > .cms-builder,
#cms-editor.is-split > .cms-builder-actions { grid-column: 1; }
#cms-editor.is-split > .cms-preview { grid-column: 2; grid-row: 1 / 999; position: sticky; top: 70px; max-height: calc(100vh - 90px); overflow: auto; margin: 0; }
@media (max-width: 900px) { #cms-editor.is-split { display: flex; } #cms-editor.is-split > .cms-preview { position: static; max-height: none; } }
/* ---- "View as simple" toggle (lets a full editor preview the restricted view) ---- */
.cms-assimple { appearance: none; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font: 600 .8rem/1 inherit; padding: 7px 13px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.cms-assimple:hover { color: var(--text); border-color: var(--border-glow); }
.cms-assimple.is-on { color: #04342C; background: #5DCAA5; border-color: #5DCAA5; }
/* ---- Admin: assign CMS edit access to a user ---- */
.admin-cms-access-form { margin: 0 0 16px; display: flex; flex-direction: column; gap: 7px; }
.admin-cms-access-form label { font-weight: 600; font-size: .9rem; }
.admin-field-hint { margin: 0; font-size: .82rem; color: var(--text-muted); line-height: 1.5; }
.admin-cms-access-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin-cms-access-row select { min-width: 220px; }
.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-settings-form .cms-settings-subhead { margin: 4px 0 0; font-size: 1.02rem; color: var(--text); }
.cms-settings-form .cms-settings-subnote { margin: -10px 0 0; font-size: 0.86rem; }
.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%); } }

/* ============================================================================
   Hero showcase — bespoke per-feature scene styles (storefront morphing window).
   Each scene scoped under .scene-KEY. Built via the hero-bespoke-scenes workflow,
   theme-safe (tokens only), collision-renamed (hs-*) and critique-fixed.
   ========================================================================== */

/* ---- scene: studio ---- */
.scene-studio{display:flex;flex-direction:column;gap:12px;width:100%;box-sizing:border-box;font-family:var(--font-body)}
.scene-studio *{box-sizing:border-box}

.scene-studio .st-prompt{display:flex;align-items:center;gap:9px;width:100%;min-width:0;padding:7px 7px 7px 11px;background:var(--surface);border:1px solid var(--border);border-radius:calc(var(--radius-sm) + 2px)}
.scene-studio .st-spark{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 auto;color:var(--accent-text);border-radius:7px;background:var(--accent-soft)}
.scene-studio .st-ptext{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-body);font-size:0.82rem;color:var(--text);letter-spacing:.1px}
.scene-studio .st-model{flex:0 0 auto;font-family:var(--font-mono);font-size:0.62rem;letter-spacing:.3px;color:var(--text-faint);padding:3px 7px;border:1px solid var(--border);border-radius:99px;background:var(--surface-2)}
.scene-studio .st-gen{flex:0 0 auto;font-family:var(--font-body);font-size:0.74rem;font-weight:600;color:var(--accent-ink);background:var(--accent);border:0;border-radius:9px;padding:6px 13px;cursor:default;line-height:1}

.scene-studio .st-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:10px;width:100%;min-width:0}
.scene-studio .st-tile{position:relative;aspect-ratio:1/1;min-width:0;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border);background-color:var(--surface-3)}
.scene-studio .st-tile::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 4%, transparent);border-radius:inherit;pointer-events:none}

.scene-studio .st-i1{background-image:radial-gradient(120% 120% at 18% 12%, color-mix(in srgb, var(--accent) 60%, transparent), transparent 55%), linear-gradient(150deg, color-mix(in srgb, var(--accent-2) 42%, var(--surface-3)), color-mix(in srgb, var(--accent) 30%, var(--surface-3)) 92%)}
.scene-studio .st-i2{background-image:radial-gradient(130% 110% at 82% 18%, color-mix(in srgb, var(--info) 52%, transparent), transparent 60%), linear-gradient(200deg, color-mix(in srgb, var(--info) 30%, var(--surface-3)), color-mix(in srgb, var(--accent-2) 26%, var(--surface-3)) 95%)}
.scene-studio .st-i3{background-image:radial-gradient(110% 130% at 30% 80%, color-mix(in srgb, var(--success) 46%, transparent), transparent 58%), linear-gradient(125deg, color-mix(in srgb, var(--info) 26%, var(--surface-3)), color-mix(in srgb, var(--success) 30%, var(--surface-3)) 96%)}
.scene-studio .st-i4{background-image:radial-gradient(120% 120% at 50% 30%, color-mix(in srgb, var(--accent-2) 50%, transparent), transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--accent) 34%, var(--surface-3)), color-mix(in srgb, var(--info) 24%, var(--surface-3)) 98%)}
.scene-studio .st-i5{background-image:radial-gradient(130% 120% at 78% 82%, color-mix(in srgb, var(--accent) 50%, transparent), transparent 58%), linear-gradient(210deg, color-mix(in srgb, var(--accent-2) 40%, var(--surface-3)), color-mix(in srgb, var(--accent) 24%, var(--surface-3)) 94%)}
.scene-studio .st-i6{background-image:radial-gradient(120% 130% at 22% 28%, color-mix(in srgb, var(--info) 48%, transparent), transparent 56%), linear-gradient(140deg, color-mix(in srgb, var(--success) 26%, var(--surface-3)), color-mix(in srgb, var(--info) 32%, var(--surface-3)) 96%)}

.scene-studio .st-gening{filter:saturate(.72) brightness(.9)}
.scene-studio .st-shimmer{position:absolute;top:-60%;left:-60%;width:60%;height:220%;transform:rotate(20deg);background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 22%, transparent), transparent);animation:stShimmer 2.6s var(--ease,ease) infinite}
@keyframes stShimmer{0%{left:-60%}60%,100%{left:130%}}
.scene-studio .st-prog{position:absolute;left:7px;bottom:7px;font-family:var(--font-mono);font-size:0.6rem;font-weight:600;letter-spacing:.3px;color:var(--text);padding:2px 6px;border-radius:99px;background:color-mix(in srgb, var(--surface) 78%, transparent);border:1px solid color-mix(in srgb, var(--border-2) 70%, transparent);backdrop-filter:blur(3px)}

.scene-studio .st-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-width:0;padding:1px 2px;font-family:var(--font-mono);font-size:0.66rem;letter-spacing:.2px}
.scene-studio .st-credits{color:var(--accent-text);font-weight:600;white-space:nowrap}
.scene-studio .st-store{color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (prefers-reduced-motion: reduce){.scene-studio .st-shimmer{animation:none;opacity:.4}}

/* ---- scene: cms ---- */
.scene-cms{display:flex;flex-direction:column;gap:12px;width:100%;box-sizing:border-box;font-family:var(--font-body)}
.scene-cms *{box-sizing:border-box}

.scene-cms .cms-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);min-width:0}
.scene-cms .hs-cms-tabs{display:flex;align-items:center;gap:3px;min-width:0}
.scene-cms .hs-cms-tab{font-family:var(--font-mono);font-size:0.66rem;letter-spacing:.02em;color:var(--text-muted);padding:5px 10px;border-radius:7px;white-space:nowrap;border:1px solid transparent;transition:color .2s var(--ease)}
.scene-cms .hs-cms-tab.is-active{color:var(--accent-text);background:var(--accent-soft);border-color:var(--accent-line)}
.scene-cms .cms-access{display:inline-flex;align-items:center;gap:6px;flex:none;font-family:var(--font-mono);font-size:0.62rem;letter-spacing:.02em;color:var(--success);background:var(--success-soft);padding:5px 10px;border-radius:999px;white-space:nowrap}
.scene-cms .cms-access-dot{width:6px;height:6px;border-radius:50%;background:var(--success);animation:cmsPulse 2.8s var(--ease) infinite}
@keyframes cmsPulse{0%,100%{opacity:1}50%{opacity:.4}}

.scene-cms .cms-split{display:grid;grid-template-columns:44% 1fr;gap:12px;min-width:0;align-items:stretch}

.scene-cms .cms-blocks{display:flex;flex-direction:column;gap:9px;min-width:0}
.scene-cms .cms-block{display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);min-width:0;position:relative;transition:border-color .2s var(--ease),background .2s var(--ease)}
.scene-cms .cms-block.is-selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent-soft) 70%,transparent)}

.scene-cms .cms-grip{display:grid;grid-template-columns:repeat(2,3px);grid-auto-rows:3px;gap:3px;flex:none}
.scene-cms .cms-grip i{width:3px;height:3px;border-radius:50%;background:var(--text-faint)}
.scene-cms .cms-block.is-selected .cms-grip i{background:var(--accent)}

.scene-cms .cms-tile{flex:none;width:24px;height:24px;border-radius:7px;border:1px solid var(--border);background:var(--surface-3);display:flex;align-items:center;justify-content:center;gap:2px;overflow:hidden}
.scene-cms .cms-block.is-selected .cms-tile{border-color:var(--accent-line)}
.scene-cms .cms-tile-hero b{width:13px;height:8px;border-radius:2px;background:var(--accent);display:block}
.scene-cms .cms-tile-logos{gap:2px}
.scene-cms .cms-tile-logos u{width:3px;height:3px;border-radius:50%;background:var(--accent);text-decoration:none}
.scene-cms .cms-tile-price b{width:5px;height:12px;border-radius:1.5px;background:var(--text-faint);display:block}
.scene-cms .cms-tile-price b:last-child{background:var(--text-muted);height:9px}
.scene-cms .cms-tile-faq{flex-direction:column;gap:3px}
.scene-cms .cms-tile-faq em{width:14px;height:2px;border-radius:1px;background:var(--text-faint);display:block}
.scene-cms .cms-tile-faq em:first-child{width:10px;background:var(--text-muted)}

.scene-cms .cms-blabel{font-family:var(--font-display);font-size:0.82rem;color:var(--text);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.scene-cms .cms-block.is-selected .cms-blabel{color:var(--accent-text)}

.scene-cms .cms-edit{flex:none;width:20px;height:20px;border-radius:6px;border:1px solid var(--accent-line);background:var(--surface);display:flex;align-items:center;justify-content:center}
.scene-cms .cms-edit s{width:8px;height:8px;border:1.5px solid var(--accent);border-radius:2px;transform:rotate(45deg) translateY(-1px);border-right:none;border-top:none;text-decoration:none}

.scene-cms .hs-cms-preview{display:flex;flex-direction:column;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.scene-cms .cms-pv-top{display:flex;align-items:center;gap:8px;padding:7px 11px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.scene-cms .cms-dots{display:flex;gap:4px;flex:none}
.scene-cms .cms-dots i{width:6px;height:6px;border-radius:50%;background:var(--border-2)}
.scene-cms .cms-pv-label{font-family:var(--font-mono);font-size:0.6rem;letter-spacing:.05em;color:var(--text-faint)}

.scene-cms .cms-pv-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:11px;flex:1}
.scene-cms .cms-pv-head{width:78%;height:13px;border-radius:5px;background:var(--text-muted)}
.scene-cms .cms-pv-sub{width:60%;height:6px;border-radius:3px;background:var(--text-faint)}
.scene-cms .cms-pv-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:3px}
.scene-cms .cms-pv-cell{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px;display:flex;flex-direction:column;gap:6px;min-width:0}
.scene-cms .cms-pv-cell span{width:18px;height:18px;border-radius:6px;background:var(--accent-soft);border:1px solid var(--accent-line)}
.scene-cms .cms-pv-cell i{width:100%;height:5px;border-radius:3px;background:var(--text-faint)}
.scene-cms .cms-pv-cell i:after{content:"";display:block}
.scene-cms .cms-pv-cell:first-child i{width:80%}
.scene-cms .cms-pv-cta{margin-top:3px;align-self:flex-start;font-family:var(--font-display);font-size:0.62rem;font-weight:600;color:var(--accent-ink);background:var(--accent);padding:6px 13px;border-radius:999px;letter-spacing:.01em}

/* ---- scene: app ---- */
.scene-app .app-layout{display:flex;gap:14px;align-items:stretch;width:100%;box-sizing:border-box}

.scene-app .phone{flex:0 1 150px;min-width:120px;max-width:150px;border-radius:26px;background:var(--surface-3);border:1px solid var(--border-2);padding:9px;box-sizing:border-box;overflow:hidden}
.scene-app .phone-screen{position:relative;height:100%;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:13px 11px 11px;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden}
.scene-app .notch{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:34px;height:4px;border-radius:3px;background:var(--surface-3);border:1px solid var(--border)}

.scene-app .brand{display:flex;align-items:center;gap:6px;margin-top:9px}
.scene-app .logo-dot{width:13px;height:13px;border-radius:5px;background:linear-gradient(150deg,var(--accent),var(--accent-2));box-shadow:0 0 0 3px var(--accent-soft)}
.scene-app .brand-name{font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--text);letter-spacing:-.01em}

.scene-app .signin-head{font-family:var(--font-display);font-weight:600;font-size:.7rem;color:var(--text-muted);margin:12px 0 9px}

.scene-app .auth-stack{display:flex;flex-direction:column;gap:7px}
.scene-app .auth-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;box-sizing:border-box;height:27px;border-radius:8px;font-family:var(--font-body);font-size:.6rem;font-weight:600;letter-spacing:-.01em;cursor:default;border:1px solid transparent;padding:0;white-space:nowrap}
.scene-app .hs-auth-apple{background:color-mix(in srgb,var(--text) 92%,var(--surface));color:var(--surface)}
.scene-app .g-apple{width:11px;height:11px;fill:var(--surface);flex:0 0 auto;margin-top:-1px}
.scene-app .hs-auth-google{background:var(--surface);border:1px solid var(--border);color:var(--text)}
.scene-app .g-google{font-family:var(--font-display);font-weight:800;font-size:.66rem;background:linear-gradient(120deg,var(--info),var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.scene-app .auth-magic{background:var(--surface-2);color:var(--text-muted);border-color:var(--border)}

.scene-app .trust-row{display:flex;align-items:center;gap:5px;margin-top:auto;padding-top:10px;font-family:var(--font-mono);font-size:.5rem;color:var(--text-faint);letter-spacing:.01em}
.scene-app .trust-dot{width:5px;height:5px;border-radius:50%;background:var(--success);box-shadow:0 0 0 2px var(--success-soft);flex:0 0 auto}

.scene-app .api-card{flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:13px 15px;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden}
.scene-app .api-head{display:flex;align-items:center;gap:8px;padding-bottom:11px;border-bottom:1px solid var(--border);min-width:0}
.scene-app .method{font-family:var(--font-mono);font-size:.56rem;font-weight:700;letter-spacing:.06em;color:var(--accent-text);background:var(--accent-soft);padding:2px 6px;border-radius:5px;flex:0 0 auto}
.scene-app .path{font-family:var(--font-mono);font-size:.66rem;color:var(--text-muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scene-app .pill-201{font-family:var(--font-mono);font-size:.56rem;font-weight:700;color:var(--success);background:color-mix(in srgb,var(--success) 16%,transparent);padding:2px 7px;border-radius:99px;flex:0 0 auto;letter-spacing:.02em}

.scene-app .json{padding:11px 0 0;font-family:var(--font-mono);font-size:.66rem;line-height:1.55}
.scene-app .ln{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene-app .in1{padding-left:14px}
.scene-app .in2{padding-left:28px}
.scene-app .k{color:var(--info)}
.scene-app .s{color:var(--success)}
.scene-app .num{color:var(--accent-text)}
.scene-app .pn{color:var(--text-faint)}

.scene-app .cur{display:inline-block;width:1px;height:.74em;background:var(--success);margin:0 0 -1px 1px;vertical-align:baseline;animation:scene-app-blink 1.15s steps(1) infinite;opacity:.85}
@keyframes scene-app-blink{0%,49%{opacity:.85}50%,100%{opacity:0}}

.scene-app .api-foot{display:flex;align-items:baseline;gap:7px;margin-top:auto;padding-top:11px;border-top:1px solid var(--border)}
.scene-app .foot-lbl{font-family:var(--font-mono);font-size:.56rem;color:var(--text-faint);letter-spacing:.05em;text-transform:uppercase}
.scene-app .foot-val{font-family:var(--font-display);font-weight:600;font-size:.84rem;color:var(--text);letter-spacing:-.01em}
.scene-app .unit{font-family:var(--font-mono);font-size:.56rem;font-weight:400;color:var(--text-faint);margin-left:1px}

@media (prefers-reduced-motion:reduce){.scene-app .cur{animation:none;opacity:.6}}

/* ---- scene: api ---- */
.scene-api {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
}
.scene-api * { box-sizing: border-box; }

.scene-api .term {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 0;
}
.scene-api .term-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-3) 70%, transparent);
}
.scene-api .term-dots { display: inline-flex; gap: 5px; }
.scene-api .term-dots i {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--border-2);
}
.scene-api .term-dots i:first-child { background: color-mix(in srgb, var(--danger) 55%, var(--border-2)); }
.scene-api .term-dots i:nth-child(2) { background: color-mix(in srgb, var(--warn) 55%, var(--border-2)); }
.scene-api .term-dots i:nth-child(3) { background: color-mix(in srgb, var(--success) 55%, var(--border-2)); }
.scene-api .term-name {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}
.scene-api .term-tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--success);
  background: color-mix(in srgb, var(--success) 14%, transparent);
  padding: 2px 7px;
  border-radius: 999px;
}

.scene-api .term-body {
  padding: 12px 13px 13px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  line-height: 1.65;
}
.scene-api .t-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-muted);
}
.scene-api .t-prompt { color: var(--accent-text); margin-right: 5px; }
.scene-api .t-cont { padding-left: 28px; color: var(--text); }
.scene-api .hs-t-str { color: var(--text); }
.scene-api .t-faint { color: var(--text-faint); }
.scene-api .t-res { margin-top: 7px; }
.scene-api .t-key { color: var(--info); }
.scene-api .hs-t-num { color: var(--accent-2); }
.scene-api .t-caret {
  display: inline-block;
  width: 6px; height: 0.78em;
  margin-left: 4px;
  vertical-align: -1px;
  background: var(--accent);
  border-radius: 1px;
  animation: scene-api-blink 1.15s steps(1) infinite;
}
@keyframes scene-api-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .scene-api .t-caret { animation: none; opacity: 0.85; }
}

.scene-api .meter {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px 11px;
  min-width: 0;
}
.scene-api .meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.scene-api .meter-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}
.scene-api .meter-val {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text);
  white-space: nowrap;
}
.scene-api .meter-sep { color: var(--text-faint); margin: 0 1px; }
.scene-api .meter-track {
  height: 8px;
  background: color-mix(in srgb, var(--surface-inset) 80%, var(--surface));
  border-radius: 999px;
  overflow: hidden;
}
.scene-api .meter-fill {
  height: 100%;
  width: var(--fill);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}
.scene-api .meter-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.scene-api .meter-pct {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.03em;
  color: var(--accent-text);
}
.scene-api .meter-reset {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.03em;
  color: var(--text-faint);
}

.scene-api .keyrow {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  min-width: 0;
}
.scene-api .key-dot {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent);
}
.scene-api .key-name {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scene-api .key-spacer { flex: 1 1 auto; min-width: 0; }
.scene-api .key-btn {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.scene-api .key-btn:hover {
  color: var(--text);
  border-color: var(--border-2);
  background: var(--surface-3);
}
.scene-api .key-btn--danger:hover {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

/* ---- scene: subs ---- */
.scene-subs{
  display:flex;
  flex-direction:column;
  gap:11px;
  width:100%;
  box-sizing:border-box;
  font-family:var(--font-body);
}
.scene-subs *{box-sizing:border-box;}

.scene-subs .subs-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}
.scene-subs .subs-head-l{min-width:0;}
.scene-subs .subs-label{
  display:block;
  font-family:var(--font-mono);
  font-size:0.62rem;
  letter-spacing:0.05em;
  color:var(--text-faint);
  margin-bottom:5px;
}
.scene-subs .subs-figrow{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.scene-subs .subs-mrr{
  font-family:var(--font-display);
  font-size:1.42rem;
  font-weight:700;
  line-height:1;
  letter-spacing:-0.015em;
  color:var(--text);
  white-space:nowrap;
}
.scene-subs .subs-chip{
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-family:var(--font-mono);
  font-size:0.66rem;
  font-weight:600;
  line-height:1;
  padding:3px 7px;
  border-radius:999px;
  color:var(--success);
  background:color-mix(in srgb, var(--success) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--success) 26%, transparent);
  white-space:nowrap;
}
.scene-subs .subs-chip-arrow{font-size:0.52rem;line-height:1;transform:translateY(0.5px);}

.scene-subs .subs-head-r{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--border);
  flex:none;
}
.scene-subs .subs-spark-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent);
  animation:subsPulse 2.6s var(--ease) infinite;
}
.scene-subs .subs-live{
  font-family:var(--font-mono);
  font-size:0.58rem;
  letter-spacing:0.08em;
  color:var(--text-muted);
  text-transform:uppercase;
}

.scene-subs .subs-chart{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 14px 10px;
  min-width:0;
}
.scene-subs .subs-bars{
  display:flex;
  align-items:flex-end;
  gap:7px;
  height:96px;
  min-width:0;
}
.scene-subs .subs-bar{
  flex:1 1 0;
  min-width:0;
  border-radius:4px 4px 0 0;
  background:linear-gradient(to bottom, var(--accent-2), var(--accent));
  transform-origin:bottom;
  position:relative;
}
.scene-subs .subs-bar.is-peak{
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}
.scene-subs .subs-bar.is-peak::after{
  content:"";
  position:absolute;
  top:-5px;left:50%;
  width:4px;height:4px;
  border-radius:50%;
  background:var(--accent);
  transform:translateX(-50%);
}
.scene-subs .subs-axis{
  display:flex;
  justify-content:space-between;
  margin-top:8px;
  font-family:var(--font-mono);
  font-size:0.58rem;
  letter-spacing:0.04em;
  color:var(--text-faint);
}

.scene-subs .subs-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  min-width:0;
}
.scene-subs .subs-row-l{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.scene-subs .subs-ico{
  flex:none;
  width:28px;height:28px;
  border-radius:8px;
  background:var(--surface-3);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
}
.scene-subs .subs-ico-dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.scene-subs .subs-ico-hook{
  background:var(--success-soft);
  border-color:color-mix(in srgb, var(--success) 22%, transparent);
}
.scene-subs .subs-hook-glyph{
  width:11px;height:11px;
  border:1.5px solid var(--success);
  border-top:none;border-right:none;
  border-radius:0 0 0 4px;
  transform:translateY(-1px);
}
.scene-subs .subs-row-txt{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.scene-subs .subs-row-title{
  font-family:var(--font-display);
  font-size:0.84rem;
  font-weight:600;
  color:var(--text);
  line-height:1.1;
}
.scene-subs .subs-row-sub{
  font-family:var(--font-mono);
  font-size:0.62rem;
  letter-spacing:0.03em;
  color:var(--text-faint);
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.scene-subs .subs-row-r{flex:none;text-align:right;}
.scene-subs .subs-price{
  font-family:var(--font-display);
  font-size:0.98rem;
  font-weight:700;
  color:var(--accent-text);
  letter-spacing:-0.01em;
  white-space:nowrap;
}
.scene-subs .subs-price-per{
  font-family:var(--font-mono);
  font-size:0.6rem;
  font-weight:500;
  color:var(--text-faint);
  margin-left:1px;
}

.scene-subs .subs-row-r-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}
.scene-subs .subs-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-family:var(--font-mono);
  font-size:0.62rem;
  font-weight:600;
  line-height:1;
  padding:3px 8px;
  border-radius:999px;
  color:var(--success);
  background:color-mix(in srgb, var(--success) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--success) 24%, transparent);
  white-space:nowrap;
}
.scene-subs .subs-pill-tick{font-size:0.6rem;line-height:1;}
.scene-subs .subs-credit{
  font-family:var(--font-mono);
  font-size:0.58rem;
  letter-spacing:0.02em;
  color:var(--text-faint);
  white-space:nowrap;
}

@keyframes subsPulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--success) 50%, transparent);}
  70%{box-shadow:0 0 0 6px color-mix(in srgb, var(--success) 0%, transparent);}
  100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--success) 0%, transparent);}
}
@media (prefers-reduced-motion:reduce){
  .scene-subs .subs-spark-dot{animation:none;}
}

/* Real renders for the hero image-studio scene: drop studio-1.webp … studio-6.webp
   into public/assets/hero/ and the render adds .has-photos, swapping the gradient
   placeholders for the photos. No code change needed when the files appear. */
.scene-studio.has-photos .st-tile { background-size: cover; background-position: center; background-repeat: no-repeat; }
.scene-studio.has-photos .st-i1 { background-image: url(hero/studio-1.webp); }
.scene-studio.has-photos .st-i2 { background-image: url(hero/studio-2.webp); }
.scene-studio.has-photos .st-i3 { background-image: url(hero/studio-3.webp); }
.scene-studio.has-photos .st-i4 { background-image: url(hero/studio-4.webp); }
.scene-studio.has-photos .st-i5 { background-image: url(hero/studio-5.webp); }
.scene-studio.has-photos .st-i6 { background-image: url(hero/studio-6.webp); }

/* ===== Ambient: drifting glowing orb lights behind the whole page (viewport-fixed,
   so every section gets moving light; section-alt is translucent so they show through). ===== */
.page-amb { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.amb-orb { position: absolute; border-radius: 50%; opacity: 0.62; will-change: transform, scale, opacity; }
/* Each orb drifts slowly (translate) AND gently "breathes" (independent scale +
   opacity pulse). The two animations run on different properties so they compose;
   different breathe durations + negative offsets keep them out of sync = alive. */
.amb-orb-1 { width: 46vw; height: 46vw; left: -11vw; top: 4vh; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 34%, transparent), transparent 66%); animation: ambFloat1 34s ease-in-out infinite alternate, ambBreathe 8.5s ease-in-out -1s infinite; }
.amb-orb-2 { width: 40vw; height: 40vw; right: -9vw; top: 26vh; background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 30%, transparent), transparent 66%); animation: ambFloat2 44s ease-in-out infinite alternate, ambBreathe 11s ease-in-out -4s infinite; }
.amb-orb-3 { width: 52vw; height: 52vw; left: 6vw; top: 60vh; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 28%, transparent), transparent 67%); animation: ambFloat3 38s ease-in-out infinite alternate, ambBreathe 9.5s ease-in-out -6s infinite; }
.amb-orb-4 { width: 38vw; height: 38vw; right: 2vw; top: 82vh; background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 24%, transparent), transparent 66%); animation: ambFloat1 50s ease-in-out infinite alternate-reverse, ambBreathe 12.5s ease-in-out -2.5s infinite; }
@keyframes ambFloat1 { from { transform: translate(0, 0); } to { transform: translate(9vw, 7vh); } }
@keyframes ambFloat2 { from { transform: translate(0, 0); } to { transform: translate(-8vw, 9vh); } }
@keyframes ambFloat3 { from { transform: translate(0, 0); } to { transform: translate(7vw, -8vh); } }
@keyframes ambBreathe { 0%, 100% { scale: 1; opacity: 0.55; } 50% { scale: 1.09; opacity: 0.74; } }
@media (prefers-reduced-motion: reduce) { .amb-orb { animation: none; } }

/* ===== Reference mockup: the faux window cycles its sidebar selection + main view ===== */
.refshow-main { position: relative; display: block; min-height: 280px; }
.refshow-view { display: flex; flex-direction: column; justify-content: center; }
.refshow-view > * { width: 100%; }
.refshow-main .refshow-view { position: absolute; inset: 18px; opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease); pointer-events: none; }
.refshow-main .refshow-view.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
.refshow-side u { transition: width 0.4s var(--ease), background 0.4s var(--ease), opacity 0.4s var(--ease); }

/* ===== app-backend section: a premium iPhone device showing the in-app login ===== */
.app-show-visual { display: flex; justify-content: center; align-items: center; }
.iphone { position: relative; width: min(290px, 80%); }
/* elliptical + closest-side so the glow fades fully inside its box — no hard rectangle edge */
.iphone-glow { position: absolute; inset: -22%; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side at 50% 46%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 82%); }
.iphone-frame { position: relative; z-index: 1; aspect-ratio: 290 / 600; border-radius: 46px; padding: 11px; background: linear-gradient(155deg, #34343c, #161619 62%); box-shadow: 0 44px 90px -34px rgba(0,0,0,.85), inset 0 0 0 1.5px rgba(255,255,255,.07), inset 0 0 0 7px #0c0c0e; }
.iphone-island { position: absolute; top: 21px; left: 50%; transform: translateX(-50%); width: 86px; height: 25px; background: #000; border-radius: 999px; z-index: 3; }
.iphone-screen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: radial-gradient(125% 70% at 50% 0%, color-mix(in srgb, var(--accent) 13%, var(--surface)), var(--surface) 58%); display: flex; flex-direction: column; }
.iphone-status { display: flex; justify-content: space-between; align-items: center; padding: 15px 26px 0; font: 700 0.74rem var(--font-display); color: var(--text); }
.iphone-sig { display: inline-flex; align-items: flex-end; gap: 2px; }
.iphone-sig i { width: 3px; background: var(--text); border-radius: 1px; }
.iphone-sig i:nth-child(1) { height: 5px; }
.iphone-sig i:nth-child(2) { height: 7px; }
.iphone-sig i:nth-child(3) { height: 9px; }
.iphone-sig i:nth-child(4) { height: 11px; }
.iphone-sig b { width: 22px; height: 11px; margin-left: 5px; border-radius: 3px; border: 1.4px solid var(--text); position: relative; display: inline-block; }
.iphone-sig b::after { content: ""; position: absolute; top: 1.6px; left: 1.6px; bottom: 1.6px; width: 62%; background: var(--text); border-radius: 1px; }
.iphone-app { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; padding: 0 26px 44px; }
.iphone-logo { width: 58px; height: 58px; border-radius: 17px; background: linear-gradient(150deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 0 5px color-mix(in srgb, var(--accent) 13%, transparent); }
.iphone-appname { margin: 6px 0 0; font: 700 1.16rem var(--font-display); color: var(--text); letter-spacing: -0.01em; }
.iphone-h { margin: 0 0 8px; font: 500 0.84rem var(--font-display); color: var(--text-muted); }
.ios-btn { width: 100%; min-height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; gap: 9px; font: 600 0.9rem var(--font-display); border: 0; cursor: default; line-height: 1; }
.ios-btn svg { width: 17px; height: 17px; flex: none; }
.ios-apple { background: #fff; color: #000; }
.ios-apple svg { margin-top: -2px; }
.ios-google { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.ios-email { background: transparent; color: var(--text-muted); min-height: 0; padding-top: 4px; font-size: 0.8rem; font-weight: 500; }
.iphone-foot { display: flex; align-items: center; gap: 7px; margin: 8px 0 0; font: 500 0.64rem var(--font-mono); color: var(--text-faint); }
.iphone-foot-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
@media (max-width: 760px) { .iphone { width: min(258px, 72%); } }

/* ===== reference mockup — distinct layout per sidebar tab ===== */
.refshow-view { align-content: start; }
.rv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* page-template thumbnails */
.rv-tpls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rv-tpl { display: flex; flex-direction: column; gap: 5px; padding: 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.rv-tpl-bar { height: 5px; width: 56%; border-radius: 2px; background: var(--border-2); }
.rv-tpl-hero { height: 32px; border-radius: 6px; background: linear-gradient(120deg, var(--accent-soft), color-mix(in srgb, var(--accent) 10%, var(--surface-3))); border: 1px solid var(--accent-line); }
.rv-tpl-rows { display: flex; gap: 5px; }
.rv-tpl-rows i { flex: 1; height: 16px; border-radius: 4px; background: var(--surface-3); border: 1px solid var(--border); }
.rv-tpl b { font: 600 0.74rem/1 var(--font-display); color: var(--text-muted); margin-top: 1px; }
/* UI kit — real mini elements */
.rv-uikit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; align-content: start; }
.rv-ui { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 11px; font: 600 0.82rem var(--font-display); }
.rv-ui-btn { background: var(--accent); color: var(--accent-ink); }
.rv-ui-btn2 { background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); }
.rv-ui-input { background: var(--surface); border: 1px solid var(--border); color: var(--text-faint); justify-content: flex-start; padding: 0 13px; font-weight: 400; font-size: 0.78rem; }
.rv-ui-toggle { background: var(--surface-2); border: 1px solid var(--border); }
.rv-ui-toggle i { width: 36px; height: 20px; border-radius: 999px; background: var(--accent); position: relative; }
.rv-ui-toggle i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.rv-ui-badge { background: var(--success-soft); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); font-size: 0.74rem; }
.rv-ui-pill { background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-line); font-family: var(--font-mono); font-size: 0.72rem; }
.rv-ui-ava { background: var(--surface-2); border: 1px solid var(--border); }
.rv-ui-ava u { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--surface-2); margin-left: -8px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.rv-ui-ava u:first-child { margin-left: 0; }
.rv-ui-bar { background: var(--surface-2); border: 1px solid var(--border); }
.rv-ui-bar i { width: 72%; height: 7px; border-radius: 999px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
/* guides list */
.rv-guides { display: flex; flex-direction: column; gap: 9px; }
.rv-guide { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); }
.rv-guide-ico { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); border: 1px solid var(--accent-line); position: relative; }
.rv-guide-ico::after { content: ""; position: absolute; left: 8px; right: 8px; top: 7px; bottom: 7px; border: 1.5px solid var(--accent); border-radius: 2px; }
.rv-guide-tx { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rv-guide-tx b { font: 600 0.84rem var(--font-display); color: var(--text); }
.rv-guide-tx i { height: 5px; width: 58%; border-radius: 3px; background: var(--surface-3); }
.rv-guide-arrow { flex: none; width: 7px; height: 7px; border-right: 1.6px solid var(--text-faint); border-bottom: 1.6px solid var(--text-faint); transform: rotate(-45deg); }
/* FitPlan AI profile overrides */
body.profile-app-backend {
  --accent: #5be37a;
  --accent-2: #38a3ff;
  --accent-3: #ff7a66;
}

body.profile-app-backend .page-amb,
body.profile-app-backend .hero-bg {
  display: none;
}

body.profile-app-backend .hero {
  min-height: min(860px, calc(100svh - 72px));
}

body.profile-app-backend .hero-inner {
  align-items: center;
}

body.profile-app-backend .hero-proof .signal-chip:nth-child(1) {
  --chip-accent: #5be37a;
}

body.profile-app-backend .hero-proof .signal-chip:nth-child(2) {
  --chip-accent: #38a3ff;
}

body.profile-app-backend .hero-proof .signal-chip:nth-child(3) {
  --chip-accent: #ff7a66;
}

body.profile-app-backend .hero-proof .signal-chip:nth-child(4) {
  --chip-accent: #f5c64d;
}

body.profile-app-backend .hero-visual {
  position: relative;
  min-height: clamp(330px, 42vw, 560px);
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  background: #07100d url('/assets/fitplan-hero.png') center / cover no-repeat;
  box-shadow: 0 34px 90px rgba(0,0,0,.42);
}

body.profile-app-backend .hero-visual .app-window,
body.profile-app-backend .hero-visual .hero-dots {
  display: none;
}

body.profile-app-backend .hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7,16,13,.06), rgba(7,16,13,0) 42%, rgba(7,16,13,.22));
  pointer-events: none;
}

body.profile-app-backend .social-section {
  display: none;
}