:root {
  /* Neutral dark page palette — matches the workflow theme's #090a0f/#08090d
     family so home + pricing + workflow all sit on the same near-black
     canvas. The previous palette tinted #05030a/#120d23 with purple, which
     leaked into every page that wasn't workflow-themed (home + pricing
     headers blended into a violet wash). Brand accent colours below
     (--purple, --pink) still exist for buttons/CTAs that intentionally
     pop — only the page surface itself was depurpled. */
  --bg-0: #07080c;
  --bg-1: #08090e;
  --bg-2: #0a0d14;
  --surface: rgba(18, 21, 30, 0.74);
  --surface-strong: rgba(22, 26, 36, 0.9);
  /* Default panel borders are now neutral white-on-dark instead of
     purple-on-dark, so cards don't broadcast a violet outline. */
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text-primary: #ffffff;
  --text-secondary: #c2c6d4;
  --text-muted: #8a90a3;
  --purple: #9d4dff;
  --purple-soft: #c573ff;
  --pink: #ff5ed6;
  --cyan-soft: #66d9ff;
  --success: #37d996;
  --danger: #ff6d91;
  --warning: #ffbf69;
  /* Drop-shadow glow recoloured to cyan so floating panels read as cool
     rather than violet. */
  --shadow-glow: 0 24px 80px rgba(0, 212, 255, 0.18);
  --shadow-card: 0 22px 40px rgba(0, 0, 0, 0.38);

  /* Landing palette — hoisted from `body[data-page="home"]` so every
     page (pricing, legal, etc.) can use the .landing-* component
     styles with consistent colours. Previously these were scoped to
     the home page only, so .landing-section etc. fell back to inherited
     colours on other pages — a subtle source of the "pricing looks
     different than home" mismatch. */
  --landing-bg: #0a0a0f;
  --landing-bg-soft: #11131a;
  --landing-surface: rgba(14, 16, 22, 0.88);
  --landing-surface-strong: rgba(18, 21, 30, 0.96);
  --landing-border: rgba(0, 212, 255, 0.16);
  /* Was rgba(108, 99, 255, 0.34) — violet. Replaced with cyan-tinted
     white to match the no-violet rule. */
  --landing-border-strong: rgba(255, 255, 255, 0.22);
  --landing-accent: #00d4ff;
  /* Was #6c63ff — violet. Replaced with a brighter cyan for accent
     hovers / strong highlights. */
  --landing-accent-strong: #00b6e0;
  --landing-text: #f6f7fb;
  --landing-text-soft: #b3b9c8;
  --landing-space-1: 0.75rem;
  --landing-space-2: 1rem;
  --landing-space-3: 1.5rem;
  --landing-space-4: 2rem;
  --landing-space-5: 3rem;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text-primary);
  font-family: "Space Grotesk", sans-serif;
  /* SINGLE canonical canvas — same radial pattern + linear gradient that
     the home page uses, applied globally so every page (home, pricing,
     workflow, legal, etc.) reads as one continuous surface. The home
     page used to override this with its own bg (containing a hidden
     violet radial), making pricing look darker by comparison; that
     override has been collapsed into this single rule.
     The third radial (originally violet `108, 99, 255`) is now cyan to
     match the depurple direction. background-attachment: fixed pins
     the composition to the viewport so the header zone and content
     zone always sit on the same gradient slice, regardless of scroll. */
  background:
    radial-gradient(circle at 18% 16%, rgba(0, 212, 255, 0.10), transparent 26%),
    radial-gradient(circle at 82% 10%, rgba(0, 212, 255, 0.10), transparent 24%),
    radial-gradient(circle at 55% 75%, rgba(0, 212, 255, 0.05), transparent 32%),
    linear-gradient(180deg, #090a0f, #090b11 45%, #08090d 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  overflow-x: clip;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* Subtle dot grid — same intensity the home page used (and the
     workflow page mirrors). Position fixed + body's
     `background-attachment: fixed` means the texture stays put as the
     user scrolls, so the entire canvas reads as one continuous surface
     from header to footer. */
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.06) 0.8px, transparent 0.8px),
    radial-gradient(rgba(255, 255, 255, 0.03) 0.8px, transparent 0.8px);
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
  mask-image: none;
  opacity: 0.08;
}

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

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

h1,
h2,
h3,
p,
a,
button,
label,
span,
div {
  overflow-wrap: anywhere;
}

button,
input,
select,
textarea {
  font: inherit;
}

::selection {
  background: rgba(202, 106, 255, 0.32);
  color: white;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(0, 212, 255, 0.7), rgba(108, 99, 255, 0.5));
  border-radius: 999px;
}

::-webkit-scrollbar-track {
  background: rgba(8, 12, 18, 0.82);
}

.site-shell {
  position: relative;
  z-index: 1;
}

.content-wrap {
  width: min(1120px, calc(100% - 1rem));
  margin: 0 auto;
}

.glass-panel {
  /* Depurpled — was rgba(26, 19, 46, 0.9) → rgba(12, 10, 24, 0.78) which
     was an obvious violet wash on modals and dropdowns. Now matches the
     near-black canvas the rest of the page sits on, with the cyan
     accent reserved for hovers/focus. */
  background: linear-gradient(180deg, rgba(18, 21, 30, 0.92), rgba(11, 13, 18, 0.82));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(24px);
  border-radius: 24px;
}

.glass-panel-soft {
  background: rgba(16, 19, 26, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
  border-radius: 18px;
}

.gradient-stroke {
  position: relative;
}

.gradient-stroke::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(157, 77, 255, 0.65), rgba(255, 94, 214, 0.4), rgba(102, 217, 255, 0.28));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  background: rgba(145, 90, 255, 0.12);
  border: 1px solid rgba(195, 115, 255, 0.2);
  color: #f2d8ff;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--pink), var(--purple-soft));
  box-shadow: 0 0 16px rgba(255, 94, 214, 0.8);
}

.hero-title {
  font-family: "Sora", sans-serif;
  font-size: clamp(2.2rem, 4.5vw, 4.9rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
  margin: 1rem 0 0.85rem;
}

.hero-copy,
.section-copy,
.muted-copy {
  color: var(--text-secondary);
  line-height: 1.75;
}

.hero-copy {
  font-size: 1rem;
  max-width: 44rem;
}

.neon-button,
.ghost-button,
.soft-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  border-radius: 14px;
  padding: 0.8rem 1rem;
  font-weight: 700;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
  cursor: pointer;
  max-width: 100%;
}

.neon-button {
  color: white;
  background: linear-gradient(135deg, rgba(157, 77, 255, 0.96), rgba(255, 94, 214, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 34px rgba(164, 73, 255, 0.3);
}

.ghost-button {
  color: white;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.soft-button {
  color: #f8f4ff;
  background: rgba(126, 81, 255, 0.14);
  border: 1px solid rgba(195, 115, 255, 0.3);
}

.neon-button:hover,
.ghost-button:hover,
.soft-button:hover,
.nav-link:hover,
.tab-pill:hover,
.model-option:hover,
.upload-card-remove:hover,
.asset-action:hover {
  transform: translateY(-2px);
}

.neon-button:hover {
  box-shadow: 0 24px 44px rgba(164, 73, 255, 0.42);
}

.ghost-button:hover,
.soft-button:hover {
  border-color: rgba(255, 94, 214, 0.36);
  box-shadow: 0 16px 32px rgba(157, 77, 255, 0.12);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 0.8rem 0;
  backdrop-filter: blur(18px);
  background: linear-gradient(180deg, rgba(3, 3, 7, 0.85), rgba(3, 3, 7, 0.35));
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.brand-icon {
  width: 14rem;
  height: 3.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.brand-icon-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
}


.brand-title {
  font-family: "Sora", sans-serif;
  font-size: 1rem;
  letter-spacing: -0.03em;
}

.brand-subtitle {
  color: var(--text-muted);
  font-size: 0.76rem;
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  min-width: 0;
}

.nav-link {
  position: relative;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  color: var(--text-secondary);
  transition: color 180ms ease, box-shadow 180ms ease, background 180ms ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.nav-link-active {
  color: white;
  background: rgba(148, 87, 255, 0.14);
  box-shadow: 0 0 0 1px rgba(176, 115, 255, 0.25), 0 0 26px rgba(194, 96, 255, 0.18);
}

.nav-link:hover {
  color: white;
  background: rgba(255, 94, 214, 0.08);
  box-shadow: 0 0 0 1px rgba(255, 94, 214, 0.14), 0 0 20px rgba(205, 102, 255, 0.14);
}

.auth-slot {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

.user-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.user-badge {
  width: 2.8rem;
  height: 2.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 28%, rgba(148, 236, 255, 0.28), transparent 34%),
    linear-gradient(180deg, rgba(24, 36, 58, 0.98), rgba(10, 18, 32, 0.98));
  color: #f5fbff;
  font-family: "Sora", sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  border: 1px solid rgba(113, 227, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 1px rgba(90, 203, 255, 0.08),
    0 14px 28px rgba(0, 0, 0, 0.34);
  flex: 0 0 auto;
}

.icon-only-button {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  flex: 0 0 auto;
}

.hero-orb {
  position: absolute;
  width: 16rem;
  height: 16rem;
  border-radius: 999px;
  filter: blur(22px);
  opacity: 0.44;
}

.hero-orb-left {
  top: 2rem;
  left: -4rem;
  background: radial-gradient(circle, rgba(157, 77, 255, 0.54), transparent 70%);
}

.hero-orb-right {
  top: 6rem;
  right: -3rem;
  background: radial-gradient(circle, rgba(255, 94, 214, 0.4), transparent 70%);
}

.metrics-grid,
.feature-grid,
.model-card-grid,
.asset-grid,
.page-card-grid,
.upload-grid {
  display: grid;
  gap: 0.85rem;
}

.metrics-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.feature-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.model-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.asset-grid {
  /* `auto-fill` (not `auto-fit`) is intentional: with `auto-fit` a single
     video card collapses the empty tracks and stretches to fill the whole
     row, blowing up to ~1000px wide and looking like a critical layout
     bug. `auto-fill` keeps the empty tracks reserved at 1fr so the lone
     card sits at the same column width it would have in a multi-card
     grid. */
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}

.page-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.upload-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* First/Last frame blocks: when a model has no Last frame, the auto-fit grid
   would otherwise stretch the lone First-frame block to full width. JS adds
   .single-frame in that case; hold a 2-column track on wider screens so the
   First-frame block keeps a consistent (half) size. Still stacks on mobile. */
@media (min-width: 561px) {
  [data-section="frame-inputs"] .upload-grid.single-frame {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.metric-card,
.feature-card,
.model-card,
.info-card,
.asset-card,
.empty-state {
  position: relative;
  overflow: hidden;
  padding: 1.1rem;
}

.metric-card h3,
.feature-card h3,
.model-card h3,
.asset-card h3,
.info-card h3 {
  margin: 0.2rem 0 0.45rem;
  font-size: 1.12rem;
}

.metric-value {
  font-family: "Sora", sans-serif;
  font-size: 2rem;
  letter-spacing: -0.04em;
}

.micro-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #d9caff;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 1;
}

.icon-badge,
.model-icon,
.mini-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: white;
  font-weight: 800;
}

.icon-badge,
.model-icon {
  width: 3.35rem;
  height: 3.35rem;
}

.mini-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 12px;
  font-size: 0.78rem;
}

.icon-spark {
  background: linear-gradient(135deg, rgba(255, 96, 189, 0.96), rgba(153, 82, 255, 0.96));
}

.icon-bolt {
  background: linear-gradient(135deg, rgba(196, 86, 255, 0.96), rgba(255, 144, 79, 0.96));
}

.icon-wave {
  background: linear-gradient(135deg, rgba(102, 217, 255, 0.96), rgba(150, 92, 255, 0.96));
}

.icon-orbit {
  background: linear-gradient(135deg, rgba(255, 94, 214, 0.96), rgba(255, 118, 118, 0.96));
}

.model-logo-shell {
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(17, 11, 30, 0.98), rgba(8, 6, 18, 0.98));
  border: 1px solid rgba(196, 118, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 28px rgba(0, 0, 0, 0.32);
}

.model-logo-shell-hero {
  width: 100%;
  height: 13.5rem;
  border-radius: 24px;
  padding: 1rem;
  background:
    radial-gradient(circle at top, rgba(186, 99, 255, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(13, 10, 25, 1), rgba(6, 5, 12, 1));
  border-color: rgba(223, 118, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 44px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(157, 77, 255, 0.06);
}

.model-logo-shell-compact {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 14px;
  border-color: rgba(223, 118, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 20px rgba(0, 0, 0, 0.24);
}

.model-logo-glow {
  position: absolute;
  inset: 18%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(182, 95, 255, 0.28), transparent 72%);
  filter: blur(18px);
  opacity: 0.9;
}

.model-logo-image {
  position: relative;
  z-index: 1;
  width: 88%;
  height: 88%;
  object-fit: contain;
  filter: saturate(1.08) drop-shadow(0 8px 22px rgba(163, 93, 255, 0.18));
}

.model-logo-image-hero {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(1.1) drop-shadow(0 18px 38px rgba(130, 82, 255, 0.24));
}

.model-logo-image-compact {
  width: 84%;
  height: 84%;
  filter: saturate(1.05) drop-shadow(0 6px 14px rgba(130, 82, 255, 0.16));
}

.model-card-premium {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.model-card-visual {
  position: relative;
}

.card-shine::after {
  content: "";
  position: absolute;
  inset: -30% auto auto -20%;
  width: 50%;
  height: 180%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  transform: rotate(22deg);
  opacity: 0;
  transition: opacity 180ms ease;
}

.card-shine:hover::after {
  opacity: 1;
}

.tab-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.tab-pill {
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  transition: all 180ms ease;
}

.tab-pill-active {
  color: white;
  background: linear-gradient(135deg, rgba(157, 77, 255, 0.24), rgba(255, 94, 214, 0.16));
  border-color: rgba(255, 94, 214, 0.36);
  box-shadow: 0 0 26px rgba(200, 89, 255, 0.18);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* Subtle "Forgot your password?" affordance on the account-security
   change-password form. Right-aligned under the current-password
   input. POSTs to /auth/forgot-password with the logged-in email. */
.account-forgot-link {
  align-self: flex-end;
  margin-top: -0.25rem;
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(0, 212, 255, 0.85);
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: color 180ms ease, transform 180ms ease;
}

.account-forgot-link::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.55), rgba(168, 132, 255, 0.55), transparent);
  opacity: 0;
  transition: opacity 200ms ease;
}

.account-forgot-link:hover {
  color: #00d4ff;
  transform: translateY(-1px);
}

.account-forgot-link:hover::after,
.account-forgot-link:focus-visible::after {
  opacity: 1;
}

.account-forgot-link:disabled {
  opacity: 0.5;
  cursor: progress;
}

.account-forgot-link:focus-visible {
  outline: none;
  color: #00d4ff;
}

.field-label {
  font-size: 0.9rem;
  color: #efe5ff;
  font-weight: 700;
}

.field-hint {
  color: var(--text-muted);
  font-size: 0.83rem;
}

.input-shell,
.textarea-shell,
.select-shell,
.upload-zone,
.modal-input {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.1);
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
  min-width: 0;
}

.textarea-shell {
  min-height: 180px;
  resize: vertical;
}

.select-shell {
  appearance: none;
  background:
    linear-gradient(180deg, rgba(34, 24, 58, 0.96), rgba(18, 13, 35, 0.96));
  background-image:
    linear-gradient(45deg, transparent 50%, #f5eaff 50%),
    linear-gradient(135deg, #f5eaff 50%, transparent 50%);
  background-position:
    calc(100% - 1.1rem) calc(50% - 0.14rem),
    calc(100% - 0.78rem) calc(50% - 0.14rem);
  background-size: 0.38rem 0.38rem, 0.38rem 0.38rem;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}

.select-shell option {
  color: #f8f3ff;
  background: #171126;
}

.select-shell option:disabled {
  color: #8f86aa;
  background: #110d1e;
}

.input-shell:focus,
.textarea-shell:focus,
.select-shell:focus,
.modal-input:focus {
  border-color: rgba(208, 111, 255, 0.48);
  box-shadow: 0 0 0 3px rgba(171, 84, 255, 0.14);
}

.custom-dropdown {
  position: relative;
}

.dropdown-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.72rem 0.82rem;
  border-radius: 18px;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(29, 20, 49, 0.96), rgba(16, 12, 29, 0.96));
  border: 1px solid rgba(206, 122, 255, 0.16);
  color: white;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 28px rgba(0, 0, 0, 0.18);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.dropdown-button-content {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
}

.dropdown-button:hover,
.dropdown-button:focus-visible {
  border-color: rgba(229, 98, 255, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 34px rgba(83, 34, 139, 0.24);
}

.dropdown-current {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  flex: 1 1 auto;
}

.dropdown-current-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}

.dropdown-current-title {
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fffafc;
}

.dropdown-current-note {
  color: #a99cc8;
  font-size: 0.77rem;
  line-height: 1.35;
}

.dropdown-caret {
  color: #ead8ff;
  font-size: 0.9rem;
  flex: 0 0 auto;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 0;
  right: 0;
  padding: 0.45rem;
  border-radius: 18px;
  background: rgba(11, 8, 21, 0.98);
  border: 1px solid rgba(189, 117, 255, 0.18);
  box-shadow: var(--shadow-glow);
  display: none;
  z-index: 25;
}

.dropdown-menu.is-open {
  display: block;
}

.model-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border-radius: 14px;
  color: white;
  text-align: left;
  transition: background 180ms ease, border-color 180ms ease;
  min-width: 0;
  border: 1px solid transparent;
}

.model-option:hover,
.model-option.is-active {
  background: rgba(157, 77, 255, 0.11);
  border-color: rgba(223, 118, 255, 0.14);
}

.model-option-left {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  min-width: 0;
  flex: 1 1 auto;
}

.model-option-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}

.model-option-title {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fffafc;
}

.model-option-note {
  display: block;
  color: #a99cc8;
  font-size: 0.75rem;
  line-height: 1.35;
}

.model-option-pick {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.34rem 0.58rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #eddfff;
  font-size: 0.73rem;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}

.range-shell {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.range-line {
  width: 100%;
  accent-color: #c15dff;
}

.range-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--text-secondary);
  font-size: 0.92rem;
}

/* ── Duration slider — a filled bar with the value inside and a thin vertical
   handle (same dark/neutral theme colours, no accent recolour). ───────────── */
.duration-slider {
  position: relative;
}
.duration-slider-value {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  font-weight: 700;
  font-size: 0.95rem;
  color: #f8fbff;
  font-variant-numeric: tabular-nums;
}
.duration-slider .range-line {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  border-radius: 14px;
  cursor: pointer;
  outline: none;
  background-color: rgba(18, 21, 30, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-image: linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08));
  background-repeat: no-repeat;
  background-size: var(--range-pct, 0%) 100%;
}
.duration-slider .range-line:focus-visible {
  border-color: rgba(255, 255, 255, 0.24);
}
.duration-slider .range-line::-webkit-slider-runnable-track {
  height: 44px;
  background: transparent;
  border-radius: 14px;
}
.duration-slider .range-line::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 5px;
  height: 26px;
  margin-top: 9px;
  border-radius: 3px;
  background: #f4f6ff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
  cursor: ew-resize;
}
.duration-slider .range-line::-moz-range-track {
  height: 44px;
  background: transparent;
  border-radius: 14px;
}
.duration-slider .range-line::-moz-range-progress {
  height: 44px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 13px 0 0 13px;
}
.duration-slider .range-line::-moz-range-thumb {
  width: 5px;
  height: 26px;
  border: none;
  border-radius: 3px;
  background: #f4f6ff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
  cursor: ew-resize;
}

.setting-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem;
}

.setting-chip {
  width: 100%;
  min-height: 4.25rem;
  padding: 0.85rem 0.95rem;
  border-radius: 18px;
  text-align: left;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f8fbff;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.setting-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 212, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
}

.setting-chip-active {
  border-color: rgba(0, 212, 255, 0.34);
  background: linear-gradient(180deg, rgba(0, 212, 255, 0.12), rgba(108, 99, 255, 0.08));
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.08);
}

.setting-chip-title {
  display: block;
  font-weight: 700;
  line-height: 1.2;
  color: #f8fbff;
}

.setting-chip-note {
  display: block;
  margin-top: 0.28rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.58);
}

.workflow-select-shell {
  min-height: 3.5rem;
  padding: 0.9rem 2.9rem 0.9rem 1rem;
  border-radius: 18px;
  font-weight: 700;
  line-height: 1.35;
}

.workflow-select-wrap {
  position: relative;
}

.workflow-lock-banner {
  margin-top: 0.95rem;
  padding: 0.95rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 191, 105, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 191, 105, 0.08), rgba(255, 255, 255, 0.03));
}

.workflow-select-arrow {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  color: rgba(248, 251, 255, 0.72);
  font-size: 0.92rem;
  pointer-events: none;
  line-height: 1;
}

.credit-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  border-radius: 999px;
  background: rgba(78, 255, 175, 0.08);
  border: 1px solid rgba(55, 217, 150, 0.24);
  color: #d9fff0;
  font-weight: 700;
}

.workflow-top-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
}

.workflow-top-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.workflow-top-tag {
  padding: 0.42rem 0.78rem;
  font-size: 0.72rem;
}

.workflow-top-text {
  margin: 0;
  color: #d3c9ea;
  font-size: 0.9rem;
  line-height: 1.45;
}

.workflow-credit-pill {
  padding: 0.5rem 0.72rem;
  font-size: 0.88rem;
  white-space: nowrap;
  flex: 0 0 auto;
}

.support-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.42rem 0.72rem;
  border-radius: 999px;
  color: #e9ddff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.support-pill-ico {
  display: inline-flex;
  align-items: center;
  color: var(--cyan-soft, #66d9ff);
}
.support-pill-ico svg {
  width: 14px;
  height: 14px;
  display: block;
}
/* Capability the selected model does NOT have — dimmed, neutral icon. */
.support-pill-off {
  opacity: 0.5;
}
.support-pill-off .support-pill-ico {
  color: rgba(255, 255, 255, 0.5);
}

.upload-zone {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: flex-start;
  padding: 0.95rem;
  cursor: pointer;
}

.upload-zone input {
  display: none;
}

.upload-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.85rem;
}

.upload-card {
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.upload-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.upload-card-meta {
  padding: 0.7rem;
}

.upload-card-title {
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upload-card-remove {
  margin-top: 0.65rem;
  width: 100%;
  padding: 0.65rem 0.8rem;
  border-radius: 12px;
  background: rgba(255, 109, 145, 0.12);
  color: #ffdbe6;
  border: 1px solid rgba(255, 109, 145, 0.2);
}

/* ── Reference media tiles — clean square thumbnails with @Image1/@Video1/@Audio1
   badges (images, videos, audios, first/last frame). ───────────────────────── */
#referencePreview,
#audioReferencePreview,
#videoReferencePreview,
#firstFramePreview,
#lastFramePreview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.ref-tile {
  position: relative;
  width: 104px;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.ref-tile img,
.ref-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ref-tile-audio,
.ref-tile-video {
  background: rgba(0, 212, 255, 0.06);
}
.ref-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan-soft, #66d9ff);
}
.ref-tile-icon svg {
  width: 30px;
  height: 30px;
}
.ref-tile-badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #06151b;
  background: linear-gradient(135deg, #00d4ff, #8ff1ff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.ref-tile-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  transition: background 0.15s ease, transform 0.1s ease;
}
.ref-tile-remove:hover {
  background: rgba(255, 80, 110, 0.9);
}
.ref-tile-remove:active {
  transform: scale(0.92);
}

.generation-box {
  min-height: 100%;
  padding: 1.15rem;
}

.progress-shell {
  min-height: 24rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  padding: 1.2rem;
}

.progress-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  color: #f7ebff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.progress-debug-button {
  margin-top: 0.2rem;
}

.spinner-ring {
  width: 4rem;
  height: 4rem;
  border-radius: 999px;
  border: 4px solid rgba(255, 255, 255, 0.08);
  border-top-color: var(--pink);
  border-right-color: var(--purple);
  animation: spin 1s linear infinite;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.78rem;
  border-radius: 999px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  flex-shrink: 0;
}

.refunded-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 0.4rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(0, 212, 255, 0.12);
  color: #c0eaff;
  border: 1px solid rgba(0, 212, 255, 0.25);
  white-space: nowrap;
  flex-shrink: 0;
  vertical-align: middle;
}

.status-submitting,
.status-pending,
.status-in-progress {
  background: rgba(255, 191, 105, 0.12);
  color: #ffdba8;
  border: 1px solid rgba(255, 191, 105, 0.18);
}

.status-completed {
  background: rgba(55, 217, 150, 0.12);
  color: #d8fff0;
  border: 1px solid rgba(55, 217, 150, 0.18);
}

.status-failed,
.status-cancelled,
.status-expired {
  background: rgba(255, 109, 145, 0.12);
  color: #ffdbe6;
  border: 1px solid rgba(255, 109, 145, 0.18);
}

.result-video-wrap {
  overflow: hidden;
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.asset-card video {
  width: 100%;
  height: auto;
  display: block;
  background: #09070f;
  border-radius: 16px;
}

/* Result clip: cap the height so a vertical (9:16) video fits in the viewport
   without scrolling — width shrinks to keep aspect ratio, centred. */
.asset-card video.result-clip {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(64vh, 600px);
  margin: 0 auto;
  object-fit: contain;
}

.asset-live-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.72rem 1rem;
  border-radius: 999px;
  background: rgba(0, 212, 255, 0.1);
  color: #aef4ff;
  border: 1px solid rgba(0, 212, 255, 0.16);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.asset-card-pending {
  position: relative;
  overflow: hidden;
}

.storage-note-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  background: rgba(255, 200, 60, 0.08);
  border: 1px solid rgba(255, 200, 60, 0.2);
  border-radius: 14px;
  color: #f5d78a;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

.storage-note-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.asset-expiry-note {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  padding: 0.35rem 0.5rem 0;
  text-align: right;
}

.asset-card-pending::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg, transparent 22%, rgba(0, 212, 255, 0.08) 38%, rgba(125, 234, 255, 0.18) 50%, rgba(108, 99, 255, 0.08) 62%, transparent 78%);
  transform: translateX(-55%);
  animation: asset-wave-sweep 4.8s ease-in-out infinite;
  pointer-events: none;
}

.asset-card-pending > * {
  position: relative;
  z-index: 1;
}

.asset-progress-hero {
  position: relative;
  min-height: 220px;
  padding: 1.25rem;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(0, 212, 255, 0.14), transparent 30%),
    radial-gradient(circle at bottom right, rgba(108, 99, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(10, 16, 25, 0.98), rgba(7, 11, 18, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.asset-progress-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(18px);
  opacity: 0.7;
}

.asset-progress-orb-one {
  width: 7rem;
  height: 7rem;
  top: -1rem;
  left: -1rem;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.26), transparent 68%);
}

.asset-progress-orb-two {
  width: 8rem;
  height: 8rem;
  right: -1.5rem;
  bottom: -1.5rem;
  background: radial-gradient(circle, rgba(108, 99, 255, 0.22), transparent 68%);
}

.asset-progress-wave-line {
  position: absolute;
  left: -12%;
  right: -12%;
  height: 4.5rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 212, 255, 0.04), rgba(130, 238, 255, 0.18), rgba(108, 99, 255, 0.08));
  filter: blur(10px);
  animation: asset-wave-float 5s ease-in-out infinite;
}

.asset-progress-wave-line-one {
  top: 26%;
}

.asset-progress-wave-line-two {
  top: 56%;
  animation-delay: 1.3s;
}

.asset-progress-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-width: 30rem;
}

.asset-progress-kicker {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.38rem 0.72rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(239, 247, 255, 0.82);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.asset-progress-copy h4 {
  margin: 0;
  font-family: "Syne", sans-serif;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  line-height: 0.98;
  color: #f8fbff;
}

.asset-progress-copy p {
  margin: 0;
  color: rgba(239, 247, 255, 0.72);
  line-height: 1.55;
}

.asset-progress-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  max-width: 26rem;
}

.asset-progress-stat {
  padding: 0.85rem 0.9rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.asset-progress-stat-label {
  display: block;
  margin-bottom: 0.35rem;
  color: rgba(239, 247, 255, 0.56);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.asset-progress-stat strong {
  color: #f8fbff;
  font-family: "Syne", sans-serif;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
}

.asset-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 1rem 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.asset-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.asset-action {
  flex: 1 1 140px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  font-weight: 700;
  transition: transform 180ms ease, border-color 180ms ease;
  max-width: 100%;
}

.asset-action-primary {
  color: white;
  background: linear-gradient(135deg, rgba(157, 77, 255, 0.95), rgba(255, 94, 214, 0.9));
}

.asset-action-secondary {
  color: #efe7ff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
}

.detail-tile {
  padding: 0.8rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.detail-tile-strong {
  background: linear-gradient(180deg, rgba(48, 31, 84, 0.88), rgba(22, 16, 40, 0.92));
  border-color: rgba(229, 98, 255, 0.18);
}

.run-clock {
  font-family: "Sora", sans-serif;
  font-size: 1.5rem;
  letter-spacing: -0.04em;
  color: #ffffff;
}

.json-box {
  padding: 0.9rem;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #f8f3ff;
  font-size: 0.88rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow: auto;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 2, 10, 0.82);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 60;
}

.modal-backdrop.is-open {
  display: flex;
}

.modal-panel {
  width: min(560px, 100%);
  padding: 1.15rem;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(20, 14, 36, 0.98), rgba(8, 7, 16, 0.96));
  border: 1px solid rgba(196, 111, 255, 0.22);
  box-shadow: var(--shadow-glow);
  max-height: calc(100vh - 2rem);
  overflow: auto;
}

.modal-panel-lg {
  width: min(860px, 100%);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.modal-close {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 12px;
  color: white;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.service-debug-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 0;
}

.service-debug-tab {
  padding: 8px 18px;
  border-radius: 8px 8px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}

.service-debug-tab.is-active {
  color: #00d4ff;
  border-bottom-color: #00d4ff;
}

.service-debug-tab:hover:not(.is-active) {
  color: rgba(255, 255, 255, 0.75);
}

.footer-shell {
  padding: 0.8rem 0 1.8rem;
}

.footer-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.footer-link-list,
.social-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.footer-link,
.social-link {
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 180ms ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-link:hover,
.social-link:hover {
  color: white;
  border-color: rgba(255, 94, 214, 0.28);
  box-shadow: 0 0 24px rgba(181, 90, 255, 0.12);
}

.empty-state {
  text-align: center;
  padding: 2rem 1.2rem;
}

.empty-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  border-radius: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(157, 77, 255, 0.18), rgba(255, 94, 214, 0.12));
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  animation: shimmer 1.5s infinite;
}

.toast-stack {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  z-index: 80;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  min-width: 280px;
  max-width: 380px;
  padding: 0.85rem 1rem;
  border-radius: 16px;
  color: white;
  background: rgba(10, 8, 20, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
}
.toast-msg { flex: 1; font-weight: 600; line-height: 1.45; }
.toast-close {
  flex: none; background: none; border: none; cursor: pointer;
  color: rgba(255, 255, 255, 0.5); font-size: 20px; line-height: 1;
  padding: 0 2px; margin: -2px -2px 0 0; transition: color 0.15s;
}
.toast-close:hover { color: #fff; }

.toast-success {
  border-color: rgba(55, 217, 150, 0.3);
}

.toast-error {
  border-color: rgba(255, 109, 145, 0.3);
}

.toast-info {
  border-color: rgba(157, 77, 255, 0.3);
}

body[data-theme="workflow"] {
  /* Mirror the new global body bg so workflow + home + pricing share
     one continuous canvas. Radials anchored above/below the viewport
     edges so the header zone sits in the brightest slice (not the
     fade-out skirt) and background-attachment:fixed keeps the
     composition stable as the workflow's sticky panels scroll. */
  background:
    radial-gradient(ellipse 60% 50% at 18% -8%, rgba(0, 212, 255, 0.085), transparent 70%),
    radial-gradient(ellipse 55% 45% at 82% -6%, rgba(0, 212, 255, 0.055), transparent 70%),
    radial-gradient(ellipse 80% 50% at 50% 108%, rgba(0, 212, 255, 0.045), transparent 72%),
    linear-gradient(180deg, #0a0b10, #08090d 60%, #08090d 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  color: #f6f7fb;
  font-family: "DM Sans", sans-serif;
}

body[data-theme="workflow"]::before {
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.06) 0.8px, transparent 0.8px),
    radial-gradient(rgba(255, 255, 255, 0.03) 0.8px, transparent 0.8px);
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
  mask-image: none;
  opacity: 0.08;
}

body[data-theme="workflow"] .content-wrap {
  width: min(1180px, calc(100% - 2rem));
}

body[data-theme="workflow"] .site-header:not(.landing-site-header) {
  padding: 0.9rem 0;
  background: rgba(8, 10, 16, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
}


body[data-theme="workflow"] .brand-title {
  font-family: "Syne", sans-serif;
  font-size: 1rem;
  letter-spacing: -0.04em;
  color: #f8fbff;
}

body[data-theme="workflow"] .brand-subtitle {
  color: rgba(255, 255, 255, 0.46);
}

body[data-theme="workflow"] .nav-link {
  color: rgba(246, 247, 251, 0.72);
  background: transparent;
}

body[data-theme="workflow"] .nav-link-active,
body[data-theme="workflow"] .nav-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

body[data-theme="workflow"] .glass-panel,
body[data-theme="workflow"] .glass-panel-soft {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-theme="workflow"] .gradient-stroke::before {
  display: none;
}

body[data-theme="workflow"] .neon-button {
  color: #081015;
  background: linear-gradient(135deg, #00d4ff, #8ff1ff);
  box-shadow: 0 16px 42px rgba(0, 212, 255, 0.18);
}

body[data-theme="workflow"] .ghost-button,
body[data-theme="workflow"] .soft-button {
  color: #edf3ff;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.workflow-page-shell {
  padding: 2.3rem 0 2rem;
}

.workflow-page-stack {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.workflow-hero-panel,
.workflow-form-shell,
.workflow-output-shell {
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(18, 21, 30, 0.94), rgba(10, 13, 20, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 24px 62px rgba(0, 0, 0, 0.3);
}

.workflow-hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 1.2rem;
  padding: 1.1rem 1.25rem;
  align-items: end;
}

.workflow-hero-panel-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.9rem 1.1rem;
  flex-wrap: wrap;
}

.workflow-hero-line {
  margin: 0;
  font-family: "Syne", sans-serif;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.3;
  color: rgba(248, 251, 255, 0.9);
}

.workflow-hero-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.workflow-quick-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 1rem 0.65rem 0.75rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.14), rgba(143, 241, 255, 0.06));
  border: 1px solid rgba(0, 212, 255, 0.35);
  color: #f8fbff;
  text-decoration: none;
  font-family: "Syne", sans-serif;
  letter-spacing: -0.01em;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  overflow: hidden;
}

.workflow-quick-action:hover,
.workflow-quick-action:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(0, 212, 255, 0.7);
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.22), rgba(143, 241, 255, 0.1));
  box-shadow: 0 8px 24px rgba(0, 212, 255, 0.18);
  outline: none;
}

.workflow-quick-action-glow {
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at top left, rgba(0, 212, 255, 0.45), transparent 60%);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.workflow-quick-action:hover .workflow-quick-action-glow,
.workflow-quick-action:focus-visible .workflow-quick-action-glow {
  opacity: 1;
}

.workflow-quick-action-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 212, 255, 0.18);
  border: 1px solid rgba(0, 212, 255, 0.4);
  flex-shrink: 0;
}

.workflow-quick-action-icon svg {
  width: 20px;
  height: 20px;
}

.workflow-quick-action-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.15;
}

.workflow-quick-action-title {
  font-weight: 700;
  font-size: 0.95rem;
}

.workflow-quick-action-sub {
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
  letter-spacing: 0;
}

.workflow-quick-action-arrow {
  position: relative;
  font-size: 1.05rem;
  color: rgba(0, 212, 255, 0.85);
  transition: transform 0.18s ease;
}

.workflow-quick-action:hover .workflow-quick-action-arrow {
  transform: translateX(2px);
}

@media (max-width: 640px) {
  .workflow-quick-action-sub { display: none; }
  .workflow-quick-action { padding: 0.55rem 0.85rem 0.55rem 0.6rem; }
}

/* ── Upscale page ───────────────────────────────────────────────── */

/* Source video preview after a file is chosen. Sits below the upload zone. */
.upscale-source-preview {
  margin-top: 1rem;
  display: grid;
  gap: 0.9rem;
  position: relative;
}

.upscale-source-video {
  width: 100%;
  max-height: 320px;
  border-radius: 18px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: block;
}

.upscale-source-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.7rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
}

.upscale-source-meta > div {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 0.55rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.upscale-source-meta span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.upscale-source-meta strong {
  color: #f8fbff;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upscale-source-clear {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(8, 10, 16, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.upscale-source-clear:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(8, 10, 16, 0.85);
}

/* Resolution target selector — two cards side by side. */
.upscale-target-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
}

.upscale-target-option {
  position: relative;
  cursor: pointer;
  display: block;
}

.upscale-target-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.upscale-target-card {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.15rem 1.25rem;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.upscale-target-option:hover .upscale-target-card {
  border-color: rgba(0, 212, 255, 0.4);
  background: rgba(0, 212, 255, 0.04);
  transform: translateY(-1px);
}

.upscale-target-option.is-selected .upscale-target-card {
  border-color: rgba(0, 212, 255, 0.7);
  background: linear-gradient(180deg, rgba(0, 212, 255, 0.1), rgba(0, 212, 255, 0.025));
  box-shadow: 0 8px 28px rgba(0, 212, 255, 0.15);
}

.upscale-target-option.is-selected .upscale-target-card::after {
  content: "✓";
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #00d4ff;
  color: #081015;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upscale-target-name {
  font-family: "Syne", sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #f8fbff;
  line-height: 1;
}

.upscale-target-detail {
  font-family: "DM Sans", sans-serif;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.4rem;
}

.upscale-target-cost {
  font-family: "DM Sans", sans-serif;
  font-size: 0.78rem;
  color: rgba(0, 212, 255, 0.9);
  margin-top: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Run summary panel — appears once a file + target are picked. */
.upscale-summary-block {
  background: rgba(0, 212, 255, 0.04);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 18px;
  padding: 1.05rem 1.2rem 1.15rem;
}

.upscale-summary-block .workflow-block-head {
  margin-bottom: 0.7rem;
}

.upscale-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.85rem 1.1rem;
  margin: 0;
}

.upscale-summary-grid > div {
  min-width: 0;
}

.upscale-summary-grid dt {
  font-family: "DM Sans", sans-serif;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.upscale-summary-grid dd {
  font-family: "Syne", sans-serif;
  font-size: 1.05rem;
  color: #f8fbff;
  margin: 0;
  letter-spacing: -0.01em;
}

/* Submit button: keep the workflow neon-button look but soften when disabled
   so the page doesn't feel broken before a file is picked. */
body[data-page="upscale"] .workflow-submit-button {
  margin-top: 0.5rem;
}

body[data-page="upscale"] .workflow-submit-button:disabled,
body[data-page="upscale"] .workflow-submit-button[disabled] {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.45);
  box-shadow: none;
  cursor: not-allowed;
  filter: none;
}

/* Output panel: result video + actions. */
.upscale-result-video {
  width: 100%;
  border-radius: 18px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: block;
}

.upscale-result-actions {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* Empty state for the right-side output panel before submission. */
.upscale-output-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 2.4rem 1.5rem;
  text-align: center;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.015);
}

.upscale-output-empty-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 212, 255, 0.12);
  border: 1px solid rgba(0, 212, 255, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.upscale-output-empty-icon svg {
  width: 22px;
  height: 22px;
}

.upscale-output-empty-title {
  font-family: "Syne", sans-serif;
  font-size: 1rem;
  color: #f8fbff;
  letter-spacing: -0.01em;
}

.upscale-output-empty-sub {
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  max-width: 28ch;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .upscale-target-grid { gap: 0.65rem; }
  .upscale-target-card { padding: 1rem 1rem; }
  .upscale-target-name { font-size: 1.35rem; }
}

/* Live progress bar shown on the in-progress upscale card. Reads percent
   from the sanitized progressInfo field on the Generation response. */
.upscale-progress-bar {
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0.6rem 0 0.9rem;
  overflow: visible;
}

.upscale-progress-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(0, 212, 255, 0.55), #00d4ff);
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.4);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  min-width: 8px;
}

.upscale-progress-bar-label {
  position: absolute;
  right: 0;
  top: -1.4rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(0, 212, 255, 0.9);
}

.workflow-hero-title,
.workflow-form-intro h2,
.workflow-output-intro h2 {
  font-family: "Syne", sans-serif;
  letter-spacing: -0.05em;
  color: #f8fbff;
}

.workflow-hero-title {
  font-size: clamp(1.9rem, 3.7vw, 3.2rem);
  line-height: 0.96;
  margin: 0.55rem 0 0.45rem;
  max-width: 10ch;
}

.workflow-hero-text,
.workflow-form-intro p,
.workflow-block-head p,
.workflow-output-intro p {
  color: rgba(255, 255, 255, 0.64);
  line-height: 1.6;
  margin: 0;
}

.workflow-hero-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

.workflow-credit-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(0, 212, 255, 0.18);
  color: #d9faff;
  padding: 0.5rem 0.72rem;
}

.workflow-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 1.25rem;
  align-items: start;
}

.workflow-form-shell {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.workflow-form-intro,
.workflow-output-intro {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.workflow-form-kicker {
  color: rgba(0, 212, 255, 0.82);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.workflow-form-intro h2,
.workflow-output-intro h2 {
  font-size: 1.9rem;
  line-height: 1;
  margin: 0;
}

.workflow-form-block {
  padding: 1.05rem;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Consistent vertical rhythm between immediate children of a form block.
   Without this rule, sibling spacing was inconsistent — block-head had its
   own margin-bottom but raw form-field / grid siblings had none, so some
   pairs were tight while others had a gap. Margin-collapse handles overlap
   with block-head's existing margin-bottom so this never doubles. */
.workflow-form-block > * + * {
  margin-top: 0.95rem;
}

.workflow-upload-shell {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.workflow-block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.95rem;
}

.workflow-block-title {
  font-family: "Syne", sans-serif;
  font-size: 1.1rem;
  color: #f8fbff;
  letter-spacing: -0.04em;
}

.workflow-support-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.85rem;
}

/* Per-model advisory shown below the support pills (e.g. Seedance 2.0's
   plan/face notice). Muted green so it reads as a helpful tip, not an
   error. Hidden by default via the `hidden` attribute set in HTML; JS
   toggles it based on the active model. */
.model-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.85rem;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  background: rgba(52, 211, 153, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.28);
  color: rgba(190, 242, 220, 0.95);
  font-size: 0.82rem;
  line-height: 1.45;
}
.model-notice[hidden] { display: none; }
.model-notice-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.18);
  color: #34d399;
  font-weight: 700;
}
.model-notice-copy strong {
  color: #6ee7b7;
  display: block;
  margin-bottom: 0.15rem;
}

body[data-theme="workflow"] .field-label {
  color: #f0f6ff;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* Naked inline SVG icon next to the field label. The SVG itself carries
   the brand purple→pink gradient via stroke="url(#brandIconGradient)" so
   no CSS color is needed here — keeping the wrapper transparent lets the
   gradient read clean against the dark form background. */
.field-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.field-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Submit button glyph inherits the button's white color. The button itself
   already carries the brand gradient — adding another badge here would just
   compete with it. */
.workflow-submit-button .ui-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

body[data-theme="workflow"] .field-hint {
  color: rgba(255, 255, 255, 0.5);
}

body[data-theme="workflow"] .input-shell,
body[data-theme="workflow"] .textarea-shell,
body[data-theme="workflow"] .select-shell,
body[data-theme="workflow"] .upload-zone,
body[data-theme="workflow"] .modal-input,
body[data-theme="workflow"] .dropdown-button {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f8fbff;
  box-shadow: none;
}

body[data-theme="workflow"] .textarea-shell {
  min-height: 190px;
  border-radius: 22px;
}

.prompt-editor-shell {
  position: relative;
}

.prompt-editor {
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
  line-height: 1.55;
}

.prompt-editor.is-empty:before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.42);
  pointer-events: none;
  display: block;
}

/* Character counter that appears under the prompt editor when the active
   model has a hard cap (currently Kling 3.0 — 2500 chars). Hidden by
   default; shown only when a model with `getPromptCharLimit()` non-null
   is selected. Three visual states:
     * normal  — calm muted grey
     * .is-warning — amber, fires from limit-10 onwards (last 10 chars)
     * .is-cap     — red, fires when the user hits the cap exactly
   The counter sits absolutely in the bottom-right of the editor shell so
   it doesn't push other layout around. */
.prompt-char-counter {
  position: absolute;
  bottom: 0.55rem;
  right: 0.8rem;
  font-size: 0.7rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(7, 9, 26, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
  pointer-events: none;
  letter-spacing: 0.02em;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.prompt-char-counter[hidden] { display: none; }
.prompt-char-counter.is-warning {
  color: #ffd0a0;
  background: rgba(255, 165, 70, 0.12);
  border-color: rgba(255, 165, 70, 0.32);
}
.prompt-char-counter.is-cap {
  color: #ffb1c2;
  background: rgba(255, 90, 130, 0.14);
  border-color: rgba(255, 90, 130, 0.42);
}

.prompt-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 2px;
  padding: 2px 8px 2px 3px;
  border-radius: 999px;
  background: rgba(0, 212, 255, 0.13);
  border: 1px solid rgba(0, 212, 255, 0.4);
  color: #eaf9ff;
  font-size: 0.85rem;
  font-weight: 500;
  vertical-align: baseline;
  user-select: none;
  cursor: default;
}

.prompt-chip img {
  width: 22px;
  height: 22px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Glyph used inside the chip for video / audio refs (no thumbnail). Matches
   the image-thumbnail dimensions so chip width is consistent across kinds. */
.prompt-chip-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  line-height: 1;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.prompt-chip-video {
  background: rgba(168, 132, 255, 0.16);
  border-color: rgba(168, 132, 255, 0.5);
  color: #ece1ff;
}

.prompt-chip-audio {
  background: rgba(255, 90, 210, 0.14);
  border-color: rgba(255, 90, 210, 0.5);
  color: #ffd7f0;
}

.prompt-chip-text {
  white-space: nowrap;
}

.prompt-mention-popup {
  position: absolute;
  z-index: 60;
  min-width: 200px;
  max-width: 280px;
  max-height: 240px;
  overflow-y: auto;
  background: rgba(11, 14, 21, 0.98);
  border: 1px solid rgba(0, 212, 255, 0.28);
  border-radius: 14px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.45);
  padding: 6px;
}

.prompt-mention-popup[hidden] {
  display: none;
}

.prompt-mention-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #eaf3ff;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.prompt-mention-item:hover,
.prompt-mention-item.is-active {
  background: rgba(0, 212, 255, 0.08);
  border-color: rgba(0, 212, 255, 0.35);
}

.prompt-mention-item img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Glyph used in the mention popup for video / audio rows. Same footprint as
   the image thumbnail (32×32) so all rows align. */
.prompt-mention-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.prompt-mention-label {
  font-size: 0.88rem;
  font-weight: 500;
}

.prompt-mention-empty {
  padding: 10px 12px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
}

.prompt-hint code {
  background: rgba(0, 212, 255, 0.1);
  padding: 1px 6px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.8rem;
}

body[data-theme="workflow"] .select-shell {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: linear-gradient(180deg, rgba(17, 20, 29, 0.98), rgba(10, 13, 20, 0.98));
  color: #f8fbff;
}

body[data-theme="workflow"] .select-shell option {
  background: #0e121b;
  color: #f8fbff;
}

body[data-theme="workflow"] .select-shell::-ms-expand {
  display: none;
}

body[data-theme="workflow"] .select-shell:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

body[data-theme="workflow"] .select-shell:disabled + .workflow-select-arrow {
  opacity: 0.5;
}

body[data-theme="workflow"] .textarea-shell:focus,
body[data-theme="workflow"] .select-shell:focus,
body[data-theme="workflow"] .modal-input:focus,
body[data-theme="workflow"] .dropdown-button:focus-visible {
  border-color: rgba(0, 212, 255, 0.28);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.08);
}

body[data-theme="workflow"] .dropdown-button:hover {
  border-color: rgba(0, 212, 255, 0.24);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.04);
}

body[data-theme="workflow"] .dropdown-menu {
  background: rgba(11, 14, 21, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-theme="workflow"] .model-option:hover,
body[data-theme="workflow"] .model-option.is-active {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(0, 212, 255, 0.16);
}

body[data-theme="workflow"] .support-pill {
  color: #edf8ff;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

body[data-theme="workflow"] .upload-zone {
  padding: 1rem;
  border-radius: 22px;
}

/* Make the compact video/audio reference tiles read as clickable upload
   panels (like the reference-images zone) rather than flat rows. */
body[data-theme="workflow"] .upload-zone-icon {
  padding: 0.95rem 1rem;
  border-radius: 18px;
}

/* Clear, consistent hover affordance on EVERY upload panel (reference images,
   first/last frame, video refs, audio refs — all models) so users can tell
   they're clickable upload targets. */
body[data-theme="workflow"] .upload-zone,
body[data-theme="workflow"] .upload-zone-icon {
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

body[data-theme="workflow"] .upload-zone:hover,
body[data-theme="workflow"] .upload-zone-icon:hover {
  border-color: rgba(0, 212, 255, 0.5);
  background: rgba(0, 212, 255, 0.06);
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.22), 0 10px 26px rgba(0, 0, 0, 0.28);
}

body[data-theme="workflow"] .upload-card,
body[data-theme="workflow"] .detail-tile,
body[data-theme="workflow"] .json-box,
body[data-theme="workflow"] .empty-state,
body[data-theme="workflow"] .result-video-wrap {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

body[data-theme="workflow"] .upload-card-remove {
  background: rgba(255, 255, 255, 0.04);
  color: #f8fbff;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-theme="workflow"] .range-meta {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.88rem;
}

body[data-theme="workflow"] .range-line {
  accent-color: #00d4ff;
}

.workflow-submit-button {
  min-height: 3.4rem;
  border-radius: 18px;
}

.workflow-output-shell {
  padding: 1.4rem;
  position: sticky;
  top: 6rem;
}

.workflow-output-intro {
  margin-bottom: 1rem;
}

body[data-theme="workflow"] .generation-box {
  padding: 1.2rem;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

body[data-theme="workflow"] .progress-shell {
  min-height: 20rem;
}

body[data-theme="workflow"] .progress-badge {
  color: #f4fbff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-theme="workflow"] .spinner-ring {
  border-top-color: #00d4ff;
  border-right-color: #6c63ff;
}

body[data-theme="workflow"] .status-submitting,
body[data-theme="workflow"] .status-pending,
body[data-theme="workflow"] .status-in-progress {
  background: rgba(255, 255, 255, 0.05);
  color: #f7fbff;
  border: 1px solid rgba(0, 212, 255, 0.18);
}

body[data-theme="workflow"] .status-completed {
  background: rgba(0, 212, 255, 0.1);
  color: #d6fbff;
  border: 1px solid rgba(0, 212, 255, 0.18);
}

body[data-theme="workflow"] .status-failed,
body[data-theme="workflow"] .status-cancelled,
body[data-theme="workflow"] .status-expired {
  background: rgba(255, 255, 255, 0.05);
  color: #ffdbe6;
  border: 1px solid rgba(255, 109, 145, 0.18);
}

body[data-theme="workflow"] .asset-action-primary {
  color: #081015;
  background: linear-gradient(135deg, #00d4ff, #8ff1ff);
}

body[data-theme="workflow"] .asset-action-secondary {
  color: #eff7ff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-theme="workflow"] .detail-tile-strong {
  background: linear-gradient(180deg, rgba(13, 24, 32, 0.92), rgba(9, 14, 20, 0.94));
  border-color: rgba(0, 212, 255, 0.12);
}

/* Mirror the My Videos card visual treatment on the workflow output panel so
   playback and download look identical across both pages. */
body[data-theme="workflow"] .asset-card {
  padding: 1.2rem;
}

body[data-theme="workflow"] .asset-card h3 {
  font-family: "Syne", sans-serif;
  color: #f8fbff;
}

body[data-theme="workflow"] .asset-card video {
  height: auto;
  border-radius: 18px;
  background: #06080d;
}

body[data-theme="workflow"] .asset-card .asset-meta {
  color: rgba(255, 255, 255, 0.68);
}

body[data-theme="workflow"] .asset-card-pending .asset-action-primary[disabled] {
  opacity: 1;
  color: #081015;
  background: linear-gradient(135deg, #00d4ff, #8ff1ff);
  cursor: default;
}

body[data-page="assets"] {
  background:
    radial-gradient(circle at 14% 12%, rgba(0, 212, 255, 0.08), transparent 24%),
    radial-gradient(circle at 82% 8%, rgba(108, 99, 255, 0.12), transparent 24%),
    radial-gradient(circle at 65% 70%, rgba(0, 212, 255, 0.05), transparent 28%),
    linear-gradient(180deg, #090a0f, #090b11 46%, #08090d 100%);
  color: #f6f7fb;
  font-family: "DM Sans", sans-serif;
}

body[data-page="assets"]::before {
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.06) 0.8px, transparent 0.8px),
    radial-gradient(rgba(255, 255, 255, 0.03) 0.8px, transparent 0.8px);
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
  mask-image: none;
  opacity: 0.08;
}

body[data-page="assets"] .content-wrap {
  width: min(1180px, calc(100% - 2rem));
}

.assets-page-shell {
  padding: 2.3rem 0 2rem;
}

.assets-page-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.assets-hero-panel {
  padding: 1.45rem 1.5rem;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(18, 21, 30, 0.94), rgba(10, 13, 20, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 24px 62px rgba(0, 0, 0, 0.3);
}

.assets-hero-title {
  font-family: "Syne", sans-serif;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #f8fbff;
  margin: 0.4rem 0 0;
}

.assets-hero-text {
  margin: 0;
  max-width: 38rem;
  color: rgba(255, 255, 255, 0.64);
  line-height: 1.6;
}

body[data-page="assets"] .asset-grid {
  gap: 1rem;
}

.assets-card-shell,
.assets-empty-shell {
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(18, 21, 30, 0.94), rgba(10, 13, 20, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 24px 62px rgba(0, 0, 0, 0.3);
}

body[data-page="assets"] .asset-card {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.asset-card-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 160px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.asset-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.asset-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.asset-card-head-left {
  flex: 1 1 auto;
  min-width: 0;
}

.asset-card-mode {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #d9caff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-bottom: 0.4rem;
}

body[data-page="assets"] .asset-card-title {
  margin: 0;
  font-family: "Syne", sans-serif;
  font-size: 1.05rem;
  line-height: 1.25;
  color: #f8fbff;
  word-break: normal;
  overflow-wrap: anywhere;
}

.asset-card-status-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  flex-shrink: 0;
}

.asset-card-status-stack .status-badge,
.asset-card-status-stack .asset-live-pill {
  padding: 0.4rem 0.65rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.asset-card-status-stack .refunded-tag {
  margin-left: 0;
}

.asset-card-prompt {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.66);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.asset-card-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 0.75rem;
  margin: 0;
  padding: 0.65rem 0.75rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.asset-card-meta > div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.asset-card-meta dt {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.42);
  margin: 0;
}

.asset-card-meta dd {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: #eaf3ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asset-card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.15rem;
}

.asset-card-actions .asset-action {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  border-radius: 12px;
  white-space: nowrap;
}

.asset-card-actions .asset-action span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.asset-grid-sentinel {
  height: 1px;
  width: 100%;
}

.asset-grid-loading,
.asset-grid-end,
.asset-grid-error {
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  padding: 1.1rem 1rem;
  margin-top: 0.6rem;
}

.asset-grid-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.asset-grid-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0, 212, 255, 0.25);
  border-top-color: #00d4ff;
  border-radius: 50%;
  animation: asset-spin 700ms linear infinite;
}

@keyframes asset-spin {
  to { transform: rotate(360deg); }
}

.asset-grid-end {
  opacity: 0.55;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  padding-top: 1.25rem;
}

.asset-grid-error {
  color: rgba(255, 180, 200, 0.8);
}

body[data-page="assets"] .asset-card h3,
body[data-page="assets"] .empty-state h2 {
  font-family: "Syne", sans-serif;
  color: #f8fbff;
}

body[data-page="assets"] .asset-card video {
  height: auto;
  border-radius: 18px;
  background: #06080d;
}

body[data-page="assets"] .asset-meta,
body[data-page="assets"] .muted-copy,
body[data-page="assets"] .detail-tile {
  color: rgba(255, 255, 255, 0.68);
}

body[data-page="assets"] .detail-tile,
body[data-page="assets"] .json-box,
body[data-page="assets"] .empty-state,
body[data-page="assets"] .glass-panel-soft {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

body[data-page="assets"] .asset-action-primary {
  color: #081015;
  background: linear-gradient(135deg, #00d4ff, #8ff1ff);
}

body[data-page="assets"] .asset-action-secondary {
  color: #eff7ff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-page="assets"] .asset-card-pending .asset-action-primary[disabled] {
  opacity: 1;
  color: #081015;
  background: linear-gradient(135deg, #00d4ff, #8ff1ff);
  cursor: default;
}

@keyframes asset-wave-sweep {
  0% {
    transform: translateX(-55%);
    opacity: 0.25;
  }

  50% {
    transform: translateX(18%);
    opacity: 0.72;
  }

  100% {
    transform: translateX(70%);
    opacity: 0.18;
  }
}

@keyframes asset-wave-float {
  0%,
  100% {
    transform: translateX(-4%) scaleX(1);
    opacity: 0.38;
  }

  50% {
    transform: translateX(4%) scaleX(1.04);
    opacity: 0.7;
  }
}

body[data-page="account"],
body[data-page="credits"] {
  background:
    radial-gradient(circle at 14% 12%, rgba(0, 212, 255, 0.08), transparent 24%),
    radial-gradient(circle at 82% 8%, rgba(108, 99, 255, 0.12), transparent 24%),
    radial-gradient(circle at 65% 70%, rgba(0, 212, 255, 0.05), transparent 28%),
    linear-gradient(180deg, #090a0f, #090b11 46%, #08090d 100%);
  color: #f6f7fb;
  font-family: "DM Sans", sans-serif;
}

body[data-page="account"]::before,
body[data-page="credits"]::before {
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.06) 0.8px, transparent 0.8px),
    radial-gradient(rgba(255, 255, 255, 0.03) 0.8px, transparent 0.8px);
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
  mask-image: none;
  opacity: 0.08;
}

body[data-page="account"] .content-wrap,
body[data-page="credits"] .content-wrap {
  width: min(1180px, calc(100% - 2rem));
}

.account-page-shell,
.credits-page-shell {
  padding: 2.3rem 0 2rem;
}

.account-page-stack,
.credits-page-stack,
.credits-main-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.account-hero-panel,
.credits-hero-panel,
.account-card-shell,
.credits-card-shell,
.credits-balance-shell {
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(18, 21, 30, 0.94), rgba(10, 13, 20, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 24px 62px rgba(0, 0, 0, 0.3);
  padding: 1.45rem 1.5rem;
}

.account-hero-title,
.credits-hero-title,
.account-section-title {
  font-family: "Syne", sans-serif;
  color: #f8fbff;
  letter-spacing: -0.05em;
}

.account-hero-title,
.credits-hero-title {
  font-size: clamp(2.2rem, 4.4vw, 4rem);
  line-height: 0.96;
  margin: 0.8rem 0 0.75rem;
  max-width: 12ch;
}

/* Account hero: compact, single-line header (the big clamped size + 12ch cap
   made "Account & Security" wrap and tower over the page). */
.account-hero-panel { padding: 1rem 1.3rem; }
.account-hero-title {
  font-size: 1.55rem;
  line-height: 1.2;
  margin: 0.25rem 0 0.3rem;
  max-width: none;
  white-space: nowrap;
}
.account-hero-text { font-size: 0.82rem; line-height: 1.45; }

/* Credits page overrides — tighter, one-line titles + horizontal layouts.
   Lives below the shared .credits-hero-title/.credits-balance-value rules so
   these win without !important. */
body[data-page="credits"] .credits-hero-title {
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  max-width: none;
  margin: 0.25rem 0 0.4rem;
}

body[data-page="credits"] .credits-hero-text {
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 52rem;
}

.credits-hero-head {
  display: flex;
  align-items: flex-start;
  gap: 0.95rem;
}

.credits-hero-copy {
  flex: 1 1 auto;
  min-width: 0;
}

/* Reusable cyan-tinted icon badge — soft cyan halo, thin border, holds an SVG.
   Used on the hero, balance, facts row, and section heads so every iconified
   block reads as part of one system. Sized variants stay proportional. */
.credits-section-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(143, 241, 255, 0.28);
}

.credits-section-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.credits-section-icon-lg {
  width: 56px;
  height: 56px;
  border-radius: 16px;
}

.credits-section-icon-lg svg {
  width: 28px;
  height: 28px;
}

.credits-section-head {
  display: flex;
  align-items: flex-start;
  gap: 0.95rem;
  margin-bottom: 1rem;
}

.credits-section-head-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.credits-section-title {
  font-family: "Syne", sans-serif;
  font-size: 1.25rem;
  margin: 0.2rem 0 0.25rem;
  letter-spacing: -0.025em;
  color: #f8fbff;
  line-height: 1.15;
}

.credits-section-sub {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
}

/* Balance row — horizontal layout, cyan icon on the left, big-but-not-huge
   number, soft USD/INR sub-line, and a top-up CTA on the right. Wraps on
   narrow viewports (handled by flex-wrap). */
body[data-page="credits"] .credits-balance-shell {
  text-align: left;
  padding: 1.2rem 1.4rem;
}

.credits-balance-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.credits-balance-icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(143, 241, 255, 0.28);
}

.credits-balance-icon svg {
  width: 28px;
  height: 28px;
  display: block;
}

.credits-balance-meta {
  flex: 1 1 200px;
  min-width: 0;
}

body[data-page="credits"] .credits-balance-value {
  margin: 0.2rem 0 0.1rem;
  font-size: clamp(1.7rem, 2.8vw, 2.2rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.credits-balance-unit {
  font-family: "DM Sans", sans-serif;
  font-size: 0.7em;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.6);
}

.credits-balance-sub {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
}

.credits-balance-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  font-size: 0.88rem;
  border-radius: 12px;
}

.credits-balance-cta svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Quick facts strip — three iconified mini-cards in one shell, equal columns
   on desktop, single column on narrow screens. */
.credits-quick-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  padding: 1rem 1.25rem;
}

.credits-quick-facts-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.credits-fact {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.credits-fact-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(143, 241, 255, 0.22);
}

.credits-fact-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.credits-fact-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.credits-fact-copy strong {
  font-size: 0.92rem;
  color: #f8fbff;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.credits-fact-copy span {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.35;
}

/* Model card refinements — separator + iconified meta rows. */
body[data-page="credits"] .credits-model-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.05rem;
}

.credits-model-top-copy {
  flex: 1 1 auto;
  min-width: 0;
}

body[data-page="credits"] .credits-model-top h3 {
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

body[data-page="credits"] .credits-model-top p {
  font-size: 0.83rem;
  margin: 0.3rem 0 0;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}

.credits-model-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143, 241, 255, 0.18), transparent);
}

body[data-page="credits"] .credits-model-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
}

.credits-meta-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.83rem;
  min-width: 0;
}

.credits-meta-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(143, 241, 255, 0.18);
}

.credits-meta-icon svg {
  width: 13px;
  height: 13px;
  display: block;
}

.credits-meta-label {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 0;
}

.credits-meta-value {
  color: #f0f9ff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Locked / signed-out state */
.credits-locked-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  padding: 2rem 1.5rem;
}

.credits-locked-title {
  font-family: "Syne", sans-serif;
  font-size: 1.4rem;
  margin: 0;
  color: #f8fbff;
  letter-spacing: -0.02em;
}

.credits-locked-copy {
  margin: 0;
  font-size: 0.92rem;
  max-width: 32rem;
}

@media (max-width: 760px) {
  .credits-quick-facts {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .credits-balance-cta {
    width: 100%;
    justify-content: center;
  }
  .credits-balance-row {
    gap: 0.85rem;
  }
}

.account-hero-text,
.credits-hero-text,
.credits-balance-copy {
  margin: 0;
  max-width: 38rem;
  color: rgba(255, 255, 255, 0.64);
  line-height: 1.6;
}

.account-main-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.account-section-title {
  font-size: 1.9rem;
  line-height: 1;
  margin: 0.55rem 0 0;
}

.account-section-copy {
  margin: 0.8rem 0 0;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.6;
  max-width: 46rem;
}

.account-subsection-title {
  margin: 0 0 0.85rem;
  font-family: "Syne", sans-serif;
  font-size: 1.2rem;
  color: #f8fbff;
}

.account-stack-lg,
.account-stack-xl,
.account-history-list {
  display: flex;
  flex-direction: column;
}

.account-stack-lg {
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.account-stack-xl {
  gap: 1.25rem;
}

.account-history-list {
  gap: 0.95rem;
}

.account-history-card {
  padding: 1rem 1.05rem;
  border-radius: 22px;
}

.account-history-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.account-history-topline h3 {
  margin: 0.35rem 0 0;
  font-size: 1.12rem;
  color: #f8fbff;
}

.credits-balance-shell {
  text-align: center;
}

.credits-balance-value {
  margin-top: 0.85rem;
  font-family: "Syne", sans-serif;
  font-size: clamp(2.8rem, 5vw, 4.4rem);
  line-height: 0.96;
  letter-spacing: -0.06em;
  color: #f8fbff;
}

/* ── Credit-history timeline ──────────────────────────────────────────────
   Vertical activity feed on the credits page: a connector rail with a coloured
   icon dot per event, title + model/spec detail + relative time, and a signed
   credit delta on the right. Category colours come from .credit-event-cat-*. */
.credits-timeline {
  display: flex;
  flex-direction: column;
  margin-top: 0.4rem;
}
.credit-event {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0;
}
.credit-event-rail {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.credit-event-rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.08);
}
.credit-event:first-child .credit-event-rail::before { top: 50%; }
.credit-event:last-child .credit-event-rail::before { bottom: 50%; }
.credit-event-dot {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-strong, rgba(22, 26, 36, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #9fb4c6;
}
.credit-event-dot svg { width: 18px; height: 18px; }
.credit-event-body { min-width: 0; }
.credit-event-title {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: #ffffff;
  line-height: 1.25;
}
.credit-event-detail {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.credit-event-time {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 0.18rem;
}
.credit-event-amount {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.85);
}
.credit-event-amount-unit {
  font-size: 0.66rem;
  font-weight: 600;
  opacity: 0.55;
  margin-left: 0.18rem;
}
.credit-event-add .credit-event-amount { color: #7af0c0; }
/* Category dot colours (override the neutral default). */
.credit-event-cat-purchase .credit-event-dot,
.credit-event-cat-bonus .credit-event-dot,
.credit-event-cat-refund .credit-event-dot {
  color: #7af0c0;
  border-color: rgba(122, 240, 192, 0.32);
  background: rgba(122, 240, 192, 0.08);
}
.credit-event-cat-video .credit-event-dot {
  color: #66d9ff;
  border-color: rgba(0, 212, 255, 0.3);
  background: rgba(0, 212, 255, 0.07);
}
.credit-event-cat-upscale .credit-event-dot {
  color: #66d9ff;
  border-color: rgba(0, 212, 255, 0.3);
  background: rgba(0, 212, 255, 0.07);
}
.credit-event-cat-image .credit-event-dot {
  color: #c19bff;
  border-color: rgba(157, 77, 255, 0.32);
  background: rgba(157, 77, 255, 0.08);
}
.credit-event-cat-clawback .credit-event-dot,
.credit-event-cat-admin .credit-event-dot {
  color: #ffbf69;
  border-color: rgba(255, 191, 105, 0.32);
  background: rgba(255, 191, 105, 0.08);
}
.credit-event-skeleton {
  height: 56px;
  border-radius: 14px;
  margin: 0.45rem 0;
}
.credits-history-sentinel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1rem 0 0.4rem;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.82rem;
}
.credits-history-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-top-color: #66d9ff;
  animation: credits-spin 0.7s linear infinite;
}
@keyframes credits-spin {
  to { transform: rotate(360deg); }
}
.credits-history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  padding: 2.4rem 1rem;
  color: rgba(255, 255, 255, 0.5);
}
.credits-history-empty svg {
  width: 34px;
  height: 34px;
  color: rgba(255, 255, 255, 0.28);
  margin-bottom: 0.3rem;
}
.credits-history-empty strong { color: rgba(255, 255, 255, 0.82); font-size: 1rem; }
.credits-history-empty span { font-size: 0.85rem; }
@media (max-width: 560px) {
  .credit-event { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 0.7rem; }
  .credit-event-dot { width: 36px; height: 36px; border-radius: 11px; }
  .credit-event-dot svg { width: 16px; height: 16px; }
  .credit-event-title { font-size: 0.9rem; }
  .credit-event-amount { font-size: 0.95rem; }
}

.credits-model-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.credits-model-card {
  padding: 1rem;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.credits-model-top {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

.credits-model-top h3 {
  margin: 0;
  font-family: "Syne", sans-serif;
  font-size: 1.2rem;
  color: #f8fbff;
}

.credits-model-top p,
.credits-model-meta {
  margin: 0.35rem 0 0;
  color: rgba(255, 255, 255, 0.64);
}

.credits-model-meta {
  display: grid;
  gap: 0.45rem;
  margin-top: 1rem;
}

.landing-modal-panel {
  background: linear-gradient(180deg, rgba(18, 21, 30, 0.98), rgba(9, 12, 18, 0.98));
  border: 1px solid rgba(0, 212, 255, 0.18);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42), 0 0 32px rgba(0, 212, 255, 0.05);
}

.modal-panel-login {
  width: min(516px, 100%);
  padding: 2rem 2rem 1.9rem;
}

/* ── Auth modal revamp: spacious, themed, iconed ──────────────────────── */
.auth-modal-header { align-items: flex-start; }
.auth-header-row {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}
.auth-header-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  margin-top: 0.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  color: #00d4ff;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.16), rgba(123, 111, 255, 0.16));
  border: 1px solid rgba(0, 212, 255, 0.28);
}
.auth-header-icon svg { width: 23px; height: 23px; }

.auth-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 1.25rem 0 0.4rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: rgba(0, 212, 255, 0.07);
  border: 1px solid rgba(0, 212, 255, 0.2);
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(234, 246, 255, 0.82);
}
.auth-notice-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 0.05rem;
  color: #00d4ff;
}
.auth-notice-icon svg { width: 22px; height: 22px; }
.auth-notice strong { color: #9af0cf; font-weight: 700; }

/* Roomier form fields inside the auth modal — one consistent rhythm:
   even gap between fields, a single tight label→input gap, and every
   control (text inputs AND the +91 phone field) sharing one skin/size. */
.modal-panel-login .landing-login-form { display: flex; flex-direction: column; gap: 1.05rem; }
.modal-panel-login .form-field { gap: 0.45rem; }
.modal-panel-login .modal-input { padding: 0.8rem 0.95rem; border-radius: 12px; font-size: 0.95rem; }
.modal-panel-login .field-label {
  margin-bottom: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.72);
}
.modal-panel-login .landing-primary-button { padding: 0.9rem; margin-top: 0.45rem; }

/* The +91 mobile field must read as the SAME control as the text inputs:
   same height, radius, background, border, and font size. Override the
   default (darker/taller) otpx skin while it lives inside the auth modal. */
.modal-panel-login .otpx-phone-row {
  margin-bottom: 0;
  gap: 0;
  padding: 0 0.95rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.modal-panel-login .otpx-phone-row:focus-within {
  border-color: rgba(0, 212, 255, 0.28);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.08);
}
.modal-panel-login .otpx-cc {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  padding: 0 0.7rem 0 0;
  margin-right: 0.7rem;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-panel-login .otpx-phone {
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.8rem 0;
}

/* Kill the browser autofill repaint that turns prefilled Email/Password
   fields pale (the empty Mobile field stays dark) — keep all fields on the
   same dark skin whether autofilled or not. */
.modal-panel-login .modal-input:-webkit-autofill,
.modal-panel-login .modal-input:-webkit-autofill:hover,
.modal-panel-login .modal-input:-webkit-autofill:focus,
.modal-panel-login .otpx-phone:-webkit-autofill,
.modal-panel-login .otpx-phone:-webkit-autofill:hover,
.modal-panel-login .otpx-phone:-webkit-autofill:focus {
  -webkit-text-fill-color: #f8fbff;
  -webkit-box-shadow: 0 0 0 1000px #1b1f29 inset;
  caret-color: #f8fbff;
  transition: background-color 9999s ease-in-out 0s;
}

/* Top-up modal price breakdown. Defined here (not inline on credits.html) so the
   modal renders correctly on EVERY page app.openTopupModal can open it from —
   e.g. the workflow page, where the label/amount rows would otherwise collapse
   together for lack of these flex rules. */
.topup-modal-panel { max-width: 460px; }
.topup-breakdown {
  margin: 1.1rem 0 0.4rem;
  padding: 0.95rem 1rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.topup-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.3rem 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.92rem;
}
.topup-breakdown-row strong {
  color: #ffffff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.topup-breakdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0.4rem 0;
}
.topup-breakdown-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-top: 0.45rem;
}
.topup-breakdown-total span {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
}
.topup-breakdown-total strong {
  font-family: 'Syne', 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  background: linear-gradient(135deg, #00d4ff, #8ff1ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.topup-error {
  margin: 0.85rem 0 0;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  background: rgba(255, 109, 145, 0.08);
  border: 1px solid rgba(255, 109, 145, 0.35);
  color: #ffb1c2;
  font-size: 0.85rem;
}

.landing-modal-copy {
  color: rgba(255, 255, 255, 0.64);
}

.landing-login-form .modal-input {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f8fbff;
}

.landing-login-form .modal-input:focus {
  border-color: rgba(0, 212, 255, 0.28);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.08);
}

body[data-page="home"] {
  /* All landing-palette variables now live in :root so every page
     (pricing, legal, etc.) can render the .landing-* components the
     same way home does. Only the font + colour overrides remain here. */
  color: var(--landing-text);
  font-family: "DM Sans", sans-serif;
}

/* Pricing reuses the entire landing-* component stack — apply the same
   DM Sans typography and landing-text colour so the page reads with the
   home page's hierarchy / weight, not the default Space Grotesk used by
   other pages. This was the "looks different" surface the user spotted:
   pricing inherited the global font + colour, home used DM Sans and
   --landing-text, so the same components rendered with different
   typographic feels on the two pages. */
body[data-page="pricing"],
body[data-page="legal"] {
  color: var(--landing-text);
  font-family: "DM Sans", sans-serif;
}

body[data-page="home"] .content-wrap {
  width: min(1180px, calc(100% - 2rem));
}

body[data-page="home"] .glass-panel,
body[data-page="home"] .glass-panel-soft {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-page="home"] .gradient-stroke::before {
  display: none;
}

body[data-page="home"] .site-header {
  padding: 1rem 0;
  border-bottom: none;
  background: transparent;
  backdrop-filter: none;
}

body[data-theme="workflow"] .site-header {
  padding: 1rem 0;
  border-bottom: none;
  background: transparent;
  backdrop-filter: none;
}

.landing-site-header {
  transition: padding 180ms ease, background 180ms ease, border-color 180ms ease, backdrop-filter 180ms ease;
}

.landing-site-header.is-scrolled {
  padding: 0.8rem 0;
  background: rgba(8, 10, 16, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
}

.landing-nav-shell {
  padding: 0.25rem 0;
}

.landing-nav-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 1rem;
}

.landing-brand-lockup {
  gap: 0.8rem;
}

.landing-brand-icon {
  width: 14rem;
  height: 3.8rem;
}

.landing-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

/* Pill-style nav links: muted text by default, on hover a soft brand
   gradient pill fades in with a tiny spring lift. Active page (set by
   layout.js via the `is-active` modifier) keeps a calmer version of
   the pill visible so the user always knows where they are. */
.landing-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  color: rgba(246, 247, 251, 0.7);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 220ms ease, transform 240ms ease;
  isolation: isolate;
  white-space: nowrap;
}

.landing-nav-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(0, 212, 255, 0.16), rgba(168, 132, 255, 0.13) 55%, rgba(255, 90, 210, 0.16));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 1px rgba(0, 212, 255, 0.10) inset,
    0 6px 18px rgba(0, 212, 255, 0.14);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 240ms ease, transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: -1;
  pointer-events: none;
}

.landing-nav-link::after {
  /* Slim gradient underline that grows in below the pill on hover —
     adds a second beat of motion without making the pill itself busy. */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  height: 2px;
  width: 0;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, #00d4ff, #a884ff, #ff5ad2, transparent);
  transform: translateX(-50%);
  opacity: 0;
  transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1), opacity 240ms ease;
  pointer-events: none;
}

.landing-nav-link:hover,
.landing-nav-link:focus-visible {
  color: #ffffff;
  transform: translateY(-1px);
}

.landing-nav-link:hover::before,
.landing-nav-link:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.landing-nav-link:hover::after,
.landing-nav-link:focus-visible::after {
  width: 56%;
  opacity: 1;
}

.landing-nav-link:focus-visible {
  outline: none;
}

.landing-nav-link:focus-visible::before {
  border-color: rgba(0, 212, 255, 0.5);
}

.landing-nav-link.is-active {
  color: #ffffff;
}

/* Pricing nav-link tweaks: keep the label centered with the badge sitting
   tight to its right, no full-pill widening. */
.landing-nav-link-pricing {
  gap: 0.45rem;
}

.landing-nav-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0b0d1a;
  background: linear-gradient(135deg, #ffd86b, #ff8a5b 55%, #ff5ad2);
  box-shadow: 0 4px 14px rgba(255, 138, 91, 0.35);
  animation: navBadgePulse 1.8s ease-in-out infinite;
  white-space: nowrap;
}

@keyframes navBadgePulse {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 4px 14px rgba(255, 138, 91, 0.35); }
  50%      { transform: translateY(-1px) scale(1.05); box-shadow: 0 6px 18px rgba(255, 138, 91, 0.55); }
}

.landing-nav-link.is-active::before {
  opacity: 0.7;
  transform: scale(1);
  background:
    linear-gradient(135deg, rgba(0, 212, 255, 0.10), rgba(168, 132, 255, 0.08) 55%, rgba(255, 90, 210, 0.10));
  box-shadow: 0 0 0 1px rgba(168, 132, 255, 0.18) inset;
}

@media (prefers-reduced-motion: reduce) {
  .landing-nav-link,
  .landing-nav-link::before,
  .landing-nav-link::after {
    transition: none !important;
  }
}

.landing-auth-slot {
  justify-content: flex-end;
}

.landing-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.8rem;
}

.header-credit-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.72rem;
  padding: 0.58rem 0.85rem 0.58rem 0.7rem;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(17, 21, 31, 0.96), rgba(10, 13, 20, 0.96));
  color: #eef8ff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 16px 30px rgba(0, 0, 0, 0.28);
  font-size: 0.86rem;
  white-space: nowrap;
}

.header-credit-chip:hover {
  border-color: rgba(0, 212, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 34px rgba(0, 0, 0, 0.32);
}

.header-credit-icon {
  position: relative;
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.42), transparent 34%),
    linear-gradient(180deg, #36e0ff, #1498df);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 10px 18px rgba(20, 152, 223, 0.28);
  flex: 0 0 auto;
}

.header-credit-icon-ring {
  position: absolute;
  inset: 0.18rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.26);
}

.header-credit-icon-core {
  position: relative;
  z-index: 1;
  color: #05243a;
  font-family: "Space Grotesk", "DM Sans", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.header-credit-copy {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28rem;
}

.header-credit-value {
  color: #f8fbff;
  font-size: 1.04rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.header-credit-label {
  color: rgba(238, 248, 255, 0.78);
  font-size: 0.88rem;
}

.user-badge-button {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 999px;
  box-shadow: 0 0 0 1px transparent;
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.user-badge-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(113, 227, 255, 0.16);
}

.user-tools {
  position: relative;
}

.user-menu {
  position: absolute;
  top: calc(100% + 0.7rem);
  right: 0;
  min-width: 12rem;
  padding: 0.45rem;
  border-radius: 18px;
  background: rgba(14, 16, 22, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
  display: none;
  z-index: 45;
}

.user-menu.is-open {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.user-menu-link {
  display: inline-flex;
  width: 100%;
  padding: 0.78rem 0.85rem;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.78);
  background: transparent;
  text-align: left;
}

.user-menu-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
}

.user-menu-link-button {
  border: none;
}

.mobile-user-panel {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.mobile-user-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.landing-cta-button,
.landing-primary-button,
.landing-ghost-button,
.landing-outline-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border-radius: 999px;
  padding: 0.9rem 1.2rem;
  min-height: 2.9rem;
  font-weight: 700;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.landing-cta-button,
.landing-primary-button {
  color: #081015;
  background: linear-gradient(135deg, #00d4ff, #8ff1ff);
  box-shadow: 0 16px 42px rgba(0, 212, 255, 0.18);
}

.landing-cta-button:hover,
.landing-primary-button:hover,
.landing-ghost-button:hover,
.landing-outline-button:hover,
.landing-inline-link:hover,
.landing-text-link:hover {
  transform: translateY(-2px);
}

.landing-cta-button-subtle {
  background: rgba(255, 255, 255, 0.05);
  color: #f8fbff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.landing-ghost-button,
.landing-outline-button {
  color: #edf3ff;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.landing-primary-button-block,
.landing-outline-button {
  width: 100%;
}

.landing-menu-toggle {
  display: none;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.28rem;
}

.landing-menu-toggle span {
  width: 1rem;
  height: 1px;
  background: #f8fbff;
}

.landing-mobile-menu {
  display: none;
  margin-top: 0.9rem;
  padding: 1rem;
  border-radius: 22px;
  background: rgba(14, 16, 22, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
}

.landing-mobile-menu.is-open {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.landing-homepage {
  padding-bottom: 2rem;
}

.landing-kicker {
  color: rgba(0, 212, 255, 0.82);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.landing-section,
.landing-hero-section {
  padding: 1.5rem 0;
}

.landing-hero-section {
  padding-top: 2.4rem;
}

/* Stacked hero: the title block sits compact above the carousel, and the
   carousel takes the full hero width below it. Before the stack, the
   carousel was crammed into a ~520px right-column which forced the video
   pane into a portrait box that aggressively cropped 16:9 footage. */
.landing-hero-grid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.7rem;
}

.landing-hero-copy {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}

.landing-hero-title,
.landing-section-title,
.landing-cta-title {
  font-family: "Syne", sans-serif;
  letter-spacing: -0.06em;
  color: #f8fbff;
}

.landing-hero-title {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: 1;
  margin: 0.7rem 0 0.9rem;
}

.landing-hero-text,
.landing-section-head p,
.landing-model-tagline,
.landing-mode-card p,
.landing-step-card p,
.landing-example-card p,
.landing-price-card p,
.landing-footer-brand p {
  color: var(--landing-text-soft);
}

.landing-hero-text {
  max-width: 36rem;
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 auto;
}

.landing-hero-actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
  justify-content: center;
}

/* Social-proof badge in the hero. Auto-increments by 1 each UTC day
   (anchored 2026-05-16 = 650) via renderCreatorCount() in home.js. */
.landing-creator-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  margin-top: 1.6rem;
  padding: 0.46rem 1rem 0.46rem 0.5rem;
  border-radius: 999px;
  position: relative;
  background:
    linear-gradient(135deg, rgba(0, 212, 255, 0.10), rgba(168, 132, 255, 0.10) 60%, rgba(255, 90, 210, 0.10));
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 0 0 1px rgba(0, 212, 255, 0.10) inset,
    0 8px 28px rgba(0, 212, 255, 0.10),
    0 2px 10px rgba(168, 132, 255, 0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.92rem;
  color: rgba(248, 251, 255, 0.92);
  isolation: isolate;
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.landing-creator-badge::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, rgba(0, 212, 255, 0.55), rgba(168, 132, 255, 0.35) 45%, rgba(255, 90, 210, 0.50));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.55;
  pointer-events: none;
  z-index: -1;
}

.landing-creator-badge::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: skewX(-18deg);
  animation: landingCreatorSheen 4.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes landingCreatorSheen {
  0%, 60% { left: -120%; }
  85% { left: 140%; }
  100% { left: 140%; }
}

.landing-creator-badge:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 0 0 1px rgba(0, 212, 255, 0.18) inset,
    0 12px 36px rgba(0, 212, 255, 0.18),
    0 4px 16px rgba(168, 132, 255, 0.18);
}

.landing-creator-avatars {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.landing-creator-avatar {
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(15, 18, 27, 0.95);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.landing-creator-avatar + .landing-creator-avatar {
  margin-left: -10px;
}

.landing-creator-avatar-1 {
  background: linear-gradient(135deg, #00d4ff, #6ee7ff);
}

.landing-creator-avatar-2 {
  background: linear-gradient(135deg, #a884ff, #ff5ad2);
}

.landing-creator-avatar-3 {
  background: linear-gradient(135deg, #ffb96b, #ff5a8a);
}

.landing-creator-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.landing-creator-pulse {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #37d996;
  box-shadow: 0 0 0 0 rgba(55, 217, 150, 0.7);
  animation: landingCreatorPulse 1.8s ease-out infinite;
  flex-shrink: 0;
}

@keyframes landingCreatorPulse {
  0%   { box-shadow: 0 0 0 0 rgba(55, 217, 150, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(55, 217, 150, 0); }
  100% { box-shadow: 0 0 0 0 rgba(55, 217, 150, 0); }
}

.landing-creator-count {
  display: inline-block;
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  background: linear-gradient(120deg, #00d4ff, #a884ff 55%, #ff5ad2);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
  padding: 0 0.05rem;
  white-space: nowrap; /* never stack the digits, even when squeezed */
}

.landing-creator-tail {
  color: rgba(248, 251, 255, 0.78);
}

.landing-creator-em-dash {
  color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 640px) {
  .landing-creator-badge {
    font-size: 0.84rem;
    padding: 0.4rem 0.85rem 0.4rem 0.45rem;
    gap: 0.55rem;
  }
  .landing-creator-avatar {
    width: 22px;
    height: 22px;
  }
  /* Flow the copy as normal wrapping text (not a compressed flex row) and drop
     the model-list tail + pulse dot on mobile so nothing overflows or stacks. */
  .landing-creator-copy {
    display: block;
    white-space: normal;
    line-height: 1.4;
  }
  .landing-creator-pulse,
  .landing-creator-em-dash,
  .landing-creator-tail {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-creator-badge::after,
  .landing-creator-pulse {
    animation: none;
  }
}

.landing-hero-meta {
  margin-top: 1.1rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.92rem;
}

.landing-hero-media {
  position: relative;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

.landing-hero-glow {
  position: absolute;
  inset: -8% -2% -6% -2%;
  background:
    radial-gradient(ellipse 55% 50% at 28% 35%, rgba(0, 212, 255, 0.18), transparent 65%),
    radial-gradient(ellipse 50% 45% at 78% 65%, rgba(168, 132, 255, 0.16), transparent 62%);
  filter: blur(48px);
  pointer-events: none;
}

.landing-carousel-shell {
  position: relative;
  z-index: 1;
  padding: 1rem;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(15, 18, 27, 0.96), rgba(8, 10, 16, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
}

.landing-carousel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.landing-panel-label {
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.landing-panel-title {
  color: #f9fbff;
  font-size: 1rem;
  font-weight: 700;
  margin-top: 0.28rem;
}

.landing-panel-dots {
  display: inline-flex;
  gap: 0.35rem;
}

.landing-panel-dots span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.landing-carousel-stage {
  position: relative;
  /* The video pane occupies ~70% of the stage width, so at 16/6.5
     overall aspect the video sub-pane lands at ~1.72 — only ~3% crop
     against 16:9 source footage (visually imperceptible). */
  aspect-ratio: 16 / 6.5;
  border-radius: 22px;
  overflow: hidden;
  background: #05070d;
}

/* ── Header chrome: "REC" pill + slide counter ───────────────────────── */
.landing-carousel-head-copy {
  min-width: 0;
}

.landing-panel-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.landing-panel-rec {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff5a8a;
  box-shadow: 0 0 0 0 rgba(255, 90, 138, 0.7);
  animation: landingStudioRec 1.6s ease-out infinite;
}

@keyframes landingStudioRec {
  0%   { box-shadow: 0 0 0 0 rgba(255, 90, 138, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 90, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 90, 138, 0); }
}

.landing-panel-meta {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.landing-panel-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 0.1rem;
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #f9fbff;
  font-variant-numeric: tabular-nums;
  padding: 0.32rem 0.62rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.landing-panel-counter-of {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.78rem;
  font-weight: 500;
}

/* ── Two-pane stage slide: studio panel + video output ──────────────── */
.landing-stage-slide {
  position: absolute;
  inset: 0;
  display: grid;
  /* Studio gets ~30% of width, video gets ~70%. Combined with the
     16/6.5 stage aspect the video sub-pane lands at ~1.72:1, which
     is within ~3% of 16:9 — visually uncropped. */
  grid-template-columns: minmax(0, 0.44fr) minmax(0, 1fr);
  gap: 0.55rem;
  padding: 0.55rem;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 420ms ease, transform 420ms ease;
  pointer-events: none;
}

.landing-stage-slide.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Per-slide accent colors used for caret, model dot, button glow, etc. */
.landing-stage-slide.accent-cyan   { --stage-accent: #00d4ff; --stage-accent-soft: rgba(0, 212, 255, 0.18); }
.landing-stage-slide.accent-violet { --stage-accent: #a884ff; --stage-accent-soft: rgba(168, 132, 255, 0.20); }
.landing-stage-slide.accent-ice    { --stage-accent: #73edff; --stage-accent-soft: rgba(115, 237, 255, 0.18); }

/* ── Studio panel (left) ────────────────────────────────────────────── */
.landing-stage-studio {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.75rem 0.85rem 0.85rem;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    rgba(10, 12, 18, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* The prompt field grows to fill the leftover vertical space inside the
   studio panel, while its inner box caps its own height and scrolls.
   This guarantees the Generate button stays anchored at the bottom no
   matter how long the prompt is — without that anchoring, slides with
   longer prompts (Hanuman, speaker) pushed the button below the
   visible area. */
.landing-stage-field-prompt {
  flex: 1 1 auto;
  min-height: 0;
}

.landing-stage-studio-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.landing-stage-studio-pill {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

.landing-stage-studio-pill:nth-child(1) { background: rgba(255, 90, 138, 0.55); }
.landing-stage-studio-pill:nth-child(2) { background: rgba(255, 191, 105, 0.55); }
.landing-stage-studio-pill:nth-child(3) { background: rgba(55, 217, 150, 0.55); }

.landing-stage-studio-app {
  margin-left: 0.4rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.42);
  letter-spacing: 0.06em;
  text-transform: lowercase;
}

.landing-stage-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  min-height: 0;
}

.landing-stage-field-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.42);
}

.landing-stage-prompt {
  position: relative;
  display: block;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(248, 251, 255, 0.92);
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 0.6rem 0.75rem;
  /* Fill the field's leftover height, but cap so the Generate button
     below stays visible. Overflowing text scrolls inside this box; JS
     keeps the cursor pinned to the bottom while typewriting. */
  flex: 1 1 auto;
  min-height: 3.6rem;
  max-height: 100%;
  overflow-y: auto;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.landing-stage-prompt::-webkit-scrollbar {
  width: 5px;
}

.landing-stage-prompt::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}

.landing-stage-prompt::-webkit-scrollbar-track {
  background: transparent;
}

.landing-stage-prompt-text {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
}

.landing-stage-caret {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--stage-accent, #00d4ff);
  animation: landingStageCaret 1.05s steps(1, end) infinite;
  border-radius: 1px;
}

.landing-stage-caret.is-paused {
  animation: none;
  opacity: 0;
}

@keyframes landingStageCaret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.landing-stage-model-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  min-height: 1.8rem;
}

.landing-stage-model-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.72rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--stage-accent-soft, rgba(0, 212, 255, 0.18));
  box-shadow: 0 0 0 1px var(--stage-accent-soft, rgba(0, 212, 255, 0.10)) inset;
  font-size: 0.74rem;
  font-weight: 600;
  color: #f8fbff;
  white-space: nowrap;
  opacity: 1;
  transform: scale(1);
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.landing-stage-model-chip.is-hidden {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}

.landing-stage-model-chip.is-pop {
  animation: landingStageChipPop 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes landingStageChipPop {
  0%   { opacity: 0; transform: scale(0.7); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

.landing-stage-model-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--stage-accent, #00d4ff);
  box-shadow: 0 0 8px var(--stage-accent, #00d4ff);
}

.landing-stage-generate {
  flex: 0 0 auto;
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.85rem;
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #050810;
  background: linear-gradient(135deg, #00d4ff, #a884ff 60%, #ff5ad2);
  cursor: default;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 212, 255, 0.22);
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

.landing-stage-generate.is-priming {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(168, 132, 255, 0.32), 0 0 0 4px rgba(168, 132, 255, 0.18);
  filter: brightness(1.08);
}

.landing-stage-generate.is-loading {
  filter: brightness(0.94) saturate(0.85);
}

.landing-stage-generate.is-loading .landing-stage-generate-spark {
  display: none;
}

.landing-stage-generate.is-done {
  filter: brightness(1.05);
  background: linear-gradient(135deg, #37d996, #00d4ff);
}

.landing-stage-generate-spinner {
  display: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(5, 8, 16, 0.25);
  border-top-color: #050810;
  animation: landingStageSpin 0.7s linear infinite;
}

.landing-stage-generate.is-loading .landing-stage-generate-spinner {
  display: inline-block;
}

@keyframes landingStageSpin {
  to { transform: rotate(360deg); }
}

/* ── Video output (right pane) ──────────────────────────────────────── */
.landing-stage-video {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #05070d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  min-height: 100%;
}

.landing-stage-video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.02);
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 480ms ease, transform 800ms ease;
}

.landing-stage-slide.is-playing .landing-stage-video-el {
  opacity: 1;
  transform: scale(1);
}

.landing-stage-video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  background:
    radial-gradient(120% 80% at 50% 30%, rgba(0, 212, 255, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(15, 18, 27, 0.5), rgba(8, 10, 16, 0.85));
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity 420ms ease;
}

.landing-stage-video-placeholder.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.landing-stage-video-ph-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.55);
}

.landing-stage-slide.video-missing .landing-stage-video-placeholder {
  /* If the source 404s the placeholder stays put forever. */
  opacity: 1 !important;
}

.landing-stage-video-chrome {
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  pointer-events: none;
}

.landing-stage-video-rec {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.26rem 0.55rem;
  border-radius: 999px;
  background: rgba(8, 10, 16, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f8fbff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.landing-stage-video-rec-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #37d996;
  box-shadow: 0 0 6px #37d996;
  animation: landingStageRecDot 1.4s ease-in-out infinite;
}

@keyframes landingStageRecDot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.landing-stage-video-title {
  font-size: 0.76rem;
  font-weight: 600;
  color: rgba(248, 251, 255, 0.85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Responsive: stack panel above video on narrow viewports ──────────
   Mobile uses a different layout model than desktop. On desktop the
   slides are absolute-positioned overlays so they can cross-fade in
   place inside a fixed-aspect-ratio stage. That approach broke on
   mobile because:
     1. A fixed min-height (420px) on the stage left the video pane
        sized to "whatever's left after the studio" — unpredictable and
        often squished against the bottom edge.
     2. The cross-fade is barely perceptible on a phone-sized stage.
   The mobile rules below switch to a flow layout: only the active
   slide takes layout space (display:none on the others), the video
   pane gets an explicit 16:9 aspect ratio so its shape is always
   predictable, and the stage sizes itself to the active slide's
   actual content. */
@media (max-width: 880px) {
  .landing-carousel-stage {
    aspect-ratio: auto;
    min-height: 0;  /* sized by the active slide's content */
  }
  .landing-stage-slide {
    position: relative;
    inset: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0.55rem;
    /* No opacity transition on mobile — instant swap reads better on a
       small screen and we can't afford the absolute-overlay layout
       cost (see comment above). Active slide stays at opacity:1. */
    opacity: 1;
    transform: none;
    transition: none;
    pointer-events: auto;
  }
  .landing-stage-slide:not(.is-active) {
    display: none;
  }
  .landing-stage-studio {
    padding: 0.75rem 0.85rem 0.85rem;
    gap: 0.55rem;
  }
  .landing-stage-prompt {
    min-height: 3.4rem;
  }
  .landing-stage-video {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
}

@media (max-width: 480px) {
  .landing-stage-prompt {
    font-size: 0.76rem;
    min-height: 3rem;
  }
  .landing-stage-prompt-text {
    font-size: 0.72rem;
  }
  .landing-stage-generate {
    padding: 0.55rem 0.8rem;
    font-size: 0.8rem;
  }
  .landing-stage-video-title {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-stage-caret,
  .landing-panel-rec,
  .landing-stage-video-rec-dot,
  .landing-stage-model-chip.is-pop {
    animation: none !important;
  }
}

.landing-carousel-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 0.9rem;
}

.landing-carousel-chip {
  padding: 0.8rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  text-align: left;
  min-width: 0;
}

.landing-carousel-chip.is-active {
  border-color: rgba(0, 212, 255, 0.28);
  background: rgba(0, 212, 255, 0.07);
}

.landing-carousel-chip-title {
  display: block;
  color: #f8fbff;
  font-size: 0.92rem;
  font-weight: 700;
}

.landing-carousel-chip-tag {
  display: block;
  margin-top: 0.18rem;
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.74rem;
}

.landing-proof-section {
  padding: 0.25rem 0 1rem;
}

.landing-proof-shell {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.landing-proof-label {
  color: rgba(255, 255, 255, 0.42);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  white-space: nowrap;
}

.landing-proof-marquee {
  overflow: hidden;
}

.landing-proof-track {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-width: max-content;
  animation: landing-marquee 18s linear infinite;
}

.landing-proof-item {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.landing-proof-logo-shell {
  width: 1.8rem;
  height: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}

.landing-proof-logo-shell img {
  width: 1.15rem;
  height: 1.15rem;
  object-fit: contain;
}

.landing-section-head {
  margin-bottom: 1.4rem;
}

.landing-section-head-inline {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.landing-section-title {
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  line-height: 1.05;
  margin: 0.6rem 0 0;
  max-width: 40rem;
}

.landing-text-link,
.landing-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #f4f8ff;
  font-weight: 700;
}

.landing-text-link::after,
.landing-inline-link::after {
  content: "→";
}

.landing-steps-grid,
.landing-model-grid,
.landing-mode-grid,
.landing-example-grid,
.landing-price-grid {
  display: grid;
  gap: 0.85rem;
  /* Four packs (Free, Premium Pass, Starter, Studio) share one row on desktop;
     the panels shrink to fit and stack to a single column at <=980px. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.landing-steps-grid,
.landing-model-grid,
.landing-mode-grid,
.landing-example-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Single-line card strip — cards never wrap to an orphan 2nd line; they scroll
   horizontally instead (the Higgsfield/OpenArt model-row pattern). Overrides the
   grid display above (same specificity, later in the file). */
.landing-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.85rem;
  overflow-x: auto;
  padding-bottom: 0.7rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 212, 255, 0.35) transparent;
}
.landing-strip::-webkit-scrollbar { height: 6px; }
.landing-strip::-webkit-scrollbar-thumb { background: rgba(0, 212, 255, 0.3); border-radius: 999px; }
.landing-strip > * { scroll-snap-align: start; }
.landing-mode-grid.landing-strip > * { flex: 0 0 clamp(190px, 19%, 230px); }
.landing-model-grid.landing-strip > * { flex: 0 0 clamp(250px, 31%, 300px); }
@media (max-width: 760px) {
  .landing-mode-grid.landing-strip > * { flex-basis: 74vw; }
  .landing-model-grid.landing-strip > * { flex-basis: 80vw; }
}

/* Small icon chip beside a section eyebrow — "make use of icons". */
.landing-head-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  margin-bottom: 0.55rem;
  color: #6fe3ff;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(143, 241, 255, 0.05));
  border: 1px solid rgba(0, 212, 255, 0.28);
}
.landing-head-icon svg { width: 17px; height: 17px; }

/* Examples — image showcase row + section sublabels */
.landing-example-sublabel {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.4rem 0 0.85rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
}
/* The pill reuses .landing-mode-tag (top-aligned on mode cards); re-center it
   and drop its card margin so it lines up with the label text here. */
.landing-example-sublabel .landing-mode-tag {
  align-self: center;
  margin-bottom: 0;
}
.landing-example-sublabel + .landing-image-grid,
.landing-example-sublabel + .landing-example-grid { margin-top: 0; }
.landing-example-sublabel:nth-of-type(2) { margin-top: 1.6rem; }
.landing-image-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}
.landing-image-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}
.landing-image-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.landing-image-tile:hover img { transform: scale(1.05); }
.landing-image-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.35));
  pointer-events: none;
}
@media (max-width: 760px) {
  .landing-image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Model carousel — single-line track with stylish arrow buttons, no scrollbar. */
.landing-carousel { position: relative; }
.landing-carousel-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.85rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.2rem 0.2rem 0.4rem;
}
.landing-carousel-track::-webkit-scrollbar { display: none; }
.landing-carousel-track > * {
  flex: 0 0 clamp(270px, 32%, 310px);
  scroll-snap-align: start;
}
.landing-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #bff2ff;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.24), rgba(12, 14, 20, 0.92));
  border: 1px solid rgba(0, 212, 255, 0.42);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.landing-carousel-arrow:hover {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.42), rgba(12, 14, 20, 0.96));
  border-color: rgba(0, 212, 255, 0.75);
  color: #fff;
  transform: translateY(-50%) scale(1.06);
}
.landing-carousel-arrow:disabled { opacity: 0.3; cursor: default; transform: translateY(-50%); }
.landing-carousel-arrow svg { width: 20px; height: 20px; }
.landing-carousel-arrow.is-prev { left: -16px; }
.landing-carousel-arrow.is-next { right: -16px; }
@media (max-width: 760px) {
  .landing-carousel-track > * { flex-basis: 82vw; }
  .landing-carousel-arrow { display: none; }
}

.landing-price-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.landing-step-card,
.landing-model-card,
.landing-mode-card,
.landing-example-card,
.landing-price-card,
.landing-cta-shell {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(18, 21, 30, 0.92), rgba(11, 13, 18, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.28);
}

.landing-step-card,
.landing-model-card,
.landing-mode-card,
.landing-example-card,
.landing-price-card {
  padding: 1.35rem;
}

.landing-step-number {
  color: rgba(255, 255, 255, 0.26);
  font-family: "Syne", sans-serif;
  font-size: 3rem;
  line-height: 0.9;
}

.landing-step-icon,
.landing-mode-icon {
  width: 3.1rem;
  height: 3.1rem;
  margin: 1.1rem 0 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.12), rgba(108, 99, 255, 0.18));
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f8fbff;
}

.landing-step-icon svg,
.landing-mode-icon svg {
  width: 1.45rem;
  height: 1.45rem;
}

.landing-step-card h3,
.landing-model-name,
.landing-mode-card h3,
.landing-example-card h3,
.landing-price-name,
.landing-cta-title {
  font-family: "Syne", sans-serif;
}

.landing-step-card h3,
.landing-mode-card h3,
.landing-example-card h3 {
  margin: 0 0 0.55rem;
  font-size: 1.32rem;
}

.landing-step-card p,
.landing-mode-card p,
.landing-example-card p,
.landing-price-card p {
  margin: 0;
  line-height: 1.55;
}

.landing-model-card {
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 100%;
  padding: 1.15rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(0, 212, 255, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(18, 21, 30, 0.94), rgba(11, 13, 18, 0.96));
}

.landing-model-card:hover,
.landing-mode-card:hover,
.landing-price-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 212, 255, 0.2);
  box-shadow: 0 24px 62px rgba(0, 0, 0, 0.34);
}

.landing-model-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0.24rem 0.5rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0, 212, 255, 0.18), rgba(0, 212, 255, 0.08));
  color: #a5efff;
  border: 1px solid rgba(0, 212, 255, 0.16);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.landing-model-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.landing-model-top {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  flex: 1 1 auto;
}

.landing-model-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #f8fbff;
}

.landing-model-tagline {
  margin: 0;
  max-width: none;
  line-height: 1.5;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
}

/* ── SEO / copy overhaul additions ───────────────────────────────────────── */
.landing-hero-title-tagline {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.62);
}
.landing-section-sub {
  margin: 0.6rem 0 0;
  max-width: 44rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
}
/* Provider-tinted model icon (homepage "Frontier models" grid) */
.landing-model-ic {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--tint, #00d4ff), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.landing-model-badge.is-image {
  background: linear-gradient(180deg, rgba(123, 111, 255, 0.2), rgba(123, 111, 255, 0.08));
  color: #d8d2ff;
  border-color: rgba(123, 111, 255, 0.22);
}
.landing-model-badge.is-video {
  background: linear-gradient(180deg, rgba(0, 212, 255, 0.18), rgba(0, 212, 255, 0.08));
  color: #a5efff;
  border-color: rgba(0, 212, 255, 0.16);
}
/* [Image] / [Video] type tag on creation-mode cards */
.landing-mode-tag {
  align-self: flex-start;
  width: fit-content;
  display: inline-flex;
  padding: 0.18rem 0.6rem;
  margin-bottom: 0.7rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.landing-mode-tag-image { background: rgba(123, 111, 255, 0.22); color: #e3deff; border: 1px solid rgba(123, 111, 255, 0.4); }
.landing-mode-tag-video { background: rgba(0, 212, 255, 0.18); color: #bff2ff; border: 1px solid rgba(0, 212, 255, 0.4); }
/* Pricing teaser band */
.landing-pricing-teaser {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.landing-pricing-foot {
  margin-top: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-align: center;
}
.landing-pricing-note { margin: 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); }
.landing-cta-sub { margin: 0.6rem auto 0; max-width: 34rem; line-height: 1.6; color: rgba(255, 255, 255, 0.66); }
/* Guest-only: signed-in users are already creating, so the "Already creating?
   Sign in" line is hidden for them (shown only when body.is-guest). */
.landing-cta-signin { display: none; margin: 1rem 0 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.55); }
body.is-guest .landing-cta-signin { display: block; }
.landing-cta-signin a { color: #6fe3ff; text-decoration: none; }
.landing-cta-signin a:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .landing-pricing-teaser { grid-template-columns: 1fr; }
}

.landing-model-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: auto;
}

.landing-model-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.46rem 0.75rem;
  border-radius: 999px;
  color: #eef8ff;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.79rem;
  font-weight: 600;
  line-height: 1;
}

.landing-mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.landing-mode-card-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 280px;
  isolation: isolate;
}

.landing-mode-card-bg .landing-mode-card-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 13, 18, 0) 0%, rgba(11, 13, 18, 0.18) 45%, rgba(11, 13, 18, 0.7) 100%);
  z-index: 0;
  transition: background 220ms ease;
}

.landing-mode-card-bg:hover .landing-mode-card-overlay {
  background:
    linear-gradient(180deg, rgba(11, 13, 18, 0) 0%, rgba(11, 13, 18, 0.1) 45%, rgba(11, 13, 18, 0.6) 100%);
}

.landing-mode-card-bg .landing-mode-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-top: auto;
}

.landing-mode-card-bg h3 {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.landing-mode-card-bg p {
  color: rgba(244, 248, 255, 0.86);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

.landing-step-card-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 280px;
  isolation: isolate;
}

.landing-step-card-bg .landing-step-card-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 13, 18, 0) 0%, rgba(11, 13, 18, 0.18) 45%, rgba(11, 13, 18, 0.7) 100%);
  z-index: 0;
  transition: background 220ms ease;
}

.landing-step-card-bg:hover .landing-step-card-overlay {
  background:
    linear-gradient(180deg, rgba(11, 13, 18, 0) 0%, rgba(11, 13, 18, 0.1) 45%, rgba(11, 13, 18, 0.6) 100%);
}

.landing-step-card-bg .landing-step-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-top: auto;
}

.landing-step-card-bg .landing-step-number {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}

.landing-step-card-bg h3 {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.landing-step-card-bg p {
  color: rgba(244, 248, 255, 0.86);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

.landing-example-card {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(12, 14, 22, 0.7), rgba(8, 10, 16, 0.94));
}

.landing-example-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.landing-example-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(8, 10, 16, 0) 30%,
    rgba(8, 10, 16, 0.55) 65%,
    rgba(8, 10, 16, 0.92) 100%
  );
}

.landing-example-body {
  position: relative;
  z-index: 2;
}

.landing-example-card.example-cyan {
  box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.08), 0 20px 54px rgba(0, 0, 0, 0.28);
}

.landing-example-card.example-violet {
  box-shadow: inset 0 0 0 1px rgba(108, 99, 255, 0.1), 0 20px 54px rgba(0, 0, 0, 0.28);
}

.landing-example-card.example-ice {
  box-shadow: inset 0 0 0 1px rgba(123, 232, 255, 0.1), 0 20px 54px rgba(0, 0, 0, 0.28);
}

.landing-example-count {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.18em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.landing-price-card {
  display: flex;
  flex-direction: column;
}

/* Push each pack's CTA to the bottom so all four buttons line up across the
   row even when the feature lists differ in length. */
.landing-price-card > a {
  margin-top: auto;
}

.landing-price-card-featured {
  border-color: rgba(0, 212, 255, 0.24);
  background: linear-gradient(180deg, rgba(18, 25, 34, 0.98), rgba(10, 13, 21, 0.98));
}

.landing-price-badge {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 1rem;
  padding: 0.36rem 0.72rem;
  border-radius: 999px;
  background: rgba(0, 212, 255, 0.12);
  color: #9cebff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.landing-price-name {
  font-size: 1.1rem;
  color: #f8fbff;
}

.landing-price-value {
  margin-top: 0.55rem;
  font-family: "Syne", sans-serif;
  font-size: 2.8rem;
  line-height: 1;
  letter-spacing: -0.06em;
}

.landing-price-value span {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.55);
  margin-left: 0.25rem;
}

.landing-price-credit-line {
  margin-top: 0.45rem;
  color: rgba(0, 212, 255, 0.82);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* "+ N free credits when you sign up" — a mint bonus note under the paid
   packs' credit line so buyers know the signup free credits are included. */
.landing-price-bonus-line {
  margin-top: 0.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(147, 244, 212, 0.1);
  border: 1px solid rgba(147, 244, 212, 0.28);
  color: #9af0cf;
  font-size: 0.78rem;
  font-weight: 700;
}

.landing-pricing-note {
  margin-bottom: 1rem;
  padding: 0.95rem 1rem;
  border-radius: 22px;
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.2);
  color: #f8fbff;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Top-up callout — sits below the package grid and points users at the
   credits page when they want more credits later. Single horizontal row
   with a gradient border ring, soft brand glow, and an animated arrow on
   hover. Stacks gracefully on narrow viewports. */
.landing-topup-callout {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.75rem auto 0;
  padding: 1px;
  max-width: 720px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.55) 0%, rgba(123, 111, 255, 0.55) 100%);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  box-shadow: 0 18px 40px -22px rgba(0, 212, 255, 0.45),
              0 8px 22px -16px rgba(123, 111, 255, 0.35);
}

.landing-topup-callout:hover,
.landing-topup-callout:focus-visible {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.85) 0%, rgba(123, 111, 255, 0.85) 100%);
  box-shadow: 0 22px 52px -22px rgba(0, 212, 255, 0.6),
              0 12px 28px -16px rgba(123, 111, 255, 0.5);
  outline: none;
}

/* Inner dark fill — keeps the gradient as a thin border ring, so the
   callout looks like a glowing pill rather than a solid-coloured chip. */
.landing-topup-callout::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(13, 17, 39, 0.95) 0%, rgba(20, 25, 55, 0.95) 100%);
  z-index: 0;
}

.landing-topup-icon,
.landing-topup-text,
.landing-topup-arrow {
  position: relative;
  z-index: 1;
}

.landing-topup-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-left: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.18) 0%, rgba(123, 111, 255, 0.18) 100%);
  color: #00d4ff;
}
.landing-topup-icon svg { width: 18px; height: 18px; }

.landing-topup-text {
  flex: 1;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  padding: 0.85rem 0;
}
.landing-topup-text strong {
  font-weight: 700;
  background: linear-gradient(135deg, #00d4ff 0%, #b7a4ff 60%, #ffffff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.landing-topup-arrow {
  flex-shrink: 0;
  margin-right: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: transform 0.18s ease;
}
.landing-topup-arrow svg { width: 18px; height: 18px; }
.landing-topup-callout:hover .landing-topup-arrow,
.landing-topup-callout:focus-visible .landing-topup-arrow {
  transform: translateX(4px);
}

/* ── India-first checkout trust strip ─────────────────────────────────
   Sits below the topup callout on the pricing page. Single compact
   row of rounded payment-provider tiles (UPI brands + concept icons
   for Cards/Netbanking/Wallets) with a short headline. Designed to be
   visible but unobtrusive — total height < 110px on desktop. */
.landing-payments-trust {
  margin: 1.1rem auto 0;
  max-width: 720px;
  padding: 0.85rem 1.1rem;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-align: center;
}

.landing-payments-headline {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.84rem;
  line-height: 1.45;
  color: rgba(248, 251, 255, 0.78);
}

.landing-payments-headline strong {
  color: #f8fbff;
  font-weight: 700;
  margin-right: 0.35rem;
}

.landing-payments-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 16px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.landing-payments-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

.landing-payments-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-payments-tile {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #ffffff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 220ms ease;
}

.landing-payments-tile:hover {
  transform: translateY(-2px) rotate(-1deg);
  box-shadow:
    0 6px 18px rgba(0, 212, 255, 0.22),
    0 0 0 1px rgba(0, 212, 255, 0.25) inset;
}

.landing-payments-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.landing-payments-svg-tile {
  background: linear-gradient(135deg, #f6f8fc, #e7edf5);
  color: #0c1424;
}

.landing-payments-svg-tile svg {
  display: block;
}

@media (max-width: 640px) {
  .landing-payments-trust {
    padding: 0.75rem 0.85rem;
    gap: 0.6rem;
  }
  .landing-payments-headline {
    font-size: 0.8rem;
  }
  .landing-payments-tile {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }
  .landing-payments-tile img {
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 640px) {
  .landing-topup-callout {
    border-radius: 22px;
  }
  .landing-topup-text {
    font-size: 0.88rem;
    padding: 0.75rem 0;
  }
  .landing-topup-icon { margin-left: 0.75rem; }
  .landing-topup-arrow { margin-right: 0.85rem; }
}

/* ── Pricing top arrangement (compact heading + payments band) ────────────
   Heading and the currency selector share one row; the India-first payments
   strip becomes a slim horizontal band right under it. Same colours/tiles as
   before — just rearranged tighter and moved to the top. */
.landing-pricing-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.85rem 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.landing-pricing-header-row .landing-pricing-head { margin-bottom: 0; }
.landing-pricing-header-row .landing-pricing-toolbar { margin-bottom: 0; }
.landing-pricing-header-row .landing-pricing-rate-shell { min-width: 11rem; }

/* Smaller, tighter heading — scoped to the pricing page only so it doesn't
   touch other section titles. */
.landing-pricing-head .landing-section-title {
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.06;
  margin-top: 0.4rem;
  max-width: 30rem;
}

/* Payments trust as a horizontal band at the top of the pricing section. */
.landing-payments-trust.landing-payments-band {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  max-width: none;
  margin: 0 0 1rem;
  padding: 0.65rem 1.05rem;
  border-radius: 16px;
  gap: 0.6rem 1.25rem;
  flex-wrap: wrap;
}
.landing-payments-trust.landing-payments-band .landing-payments-headline {
  justify-content: flex-start;
  text-align: left;
  flex-wrap: wrap;
}
.landing-payments-trust.landing-payments-band .landing-payments-icons {
  justify-content: flex-end;
  gap: 0.45rem;
}
.landing-payments-trust.landing-payments-band .landing-payments-tile {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

@media (max-width: 720px) {
  .landing-pricing-header-row { align-items: flex-start; }
  .landing-payments-trust.landing-payments-band {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
  }
  .landing-payments-trust.landing-payments-band .landing-payments-headline { justify-content: center; }
  .landing-payments-trust.landing-payments-band .landing-payments-icons { justify-content: center; }
  .landing-payments-trust.landing-payments-band .landing-payments-tile { width: 34px; height: 34px; }
}

.landing-price-value-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.landing-price-strike {
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.92rem;
  text-decoration: line-through;
}

.landing-price-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  color: rgba(255, 255, 255, 0.82);
}

.landing-price-list li::before {
  content: "";
  display: inline-block;
  width: 0.46rem;
  height: 0.46rem;
  margin-right: 0.7rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #00d4ff, #6c63ff);
  vertical-align: middle;
}

.landing-plan-count-head {
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.landing-plan-count-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0.9rem 0 1rem;
}

.landing-plan-count-card {
  padding: 0.9rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.landing-plan-count-value {
  font-family: "Syne", sans-serif;
  font-size: 1.65rem;
  line-height: 1;
  color: #f8fbff;
}

.landing-plan-count-label {
  margin-top: 0.35rem;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.82rem;
  line-height: 1.45;
}

.landing-plan-footnote {
  margin-bottom: 1.15rem;
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* ── Mobile OTP verify banner ─────────────────────────────────────────── */
.otp-verify-banner {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  padding: 0.6rem 2.6rem 0.6rem 1rem;
  font-size: 0.9rem;
  color: #eaf6ff;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.16), rgba(123, 111, 255, 0.16));
  border-bottom: 1px solid rgba(0, 212, 255, 0.28);
}
.otp-verify-banner strong { color: #9af0cf; }
.otp-verify-btn {
  font: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  color: #06181f;
  background: linear-gradient(135deg, #00d4ff, #8ff1ff);
  border: none;
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  cursor: pointer;
  white-space: nowrap;
}
.otp-verify-btn:hover { filter: brightness(1.05); }
.otp-verify-close {
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
}

/* ── Premium feature list ─────────────────────────────────────────────
   Shared by the pricing cards and the credits page. Replaces the old
   per-pack clip-count grid with a clean, benefit-led checklist. */
.premium-feature-head {
  margin-top: 1.1rem;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.premium-features {
  list-style: none;
  padding: 0;
  margin: 0.85rem 0 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
}

.premium-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  line-height: 1.46;
}

.premium-feature-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 0.06rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #06181f;
  background: linear-gradient(135deg, #00d4ff, #8ff1ff);
  box-shadow: 0 4px 12px -4px rgba(0, 212, 255, 0.5);
}

.premium-feature-check svg {
  width: 13px;
  height: 13px;
}

.premium-feature strong {
  color: #f8fbff;
  font-weight: 700;
}

.landing-pricing-head {
  margin-bottom: 1rem;
}

.landing-pricing-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.landing-pricing-rate-shell {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 14rem;
}

.landing-pricing-label {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.landing-pricing-select {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.8rem 2.4rem 0.8rem 0.95rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(17, 20, 29, 0.96), rgba(10, 12, 18, 0.96));
  color: #f8fbff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #f5eaff 50%),
    linear-gradient(135deg, #f5eaff 50%, transparent 50%);
  background-position:
    calc(100% - 1.1rem) calc(50% - 0.14rem),
    calc(100% - 0.78rem) calc(50% - 0.14rem);
  background-size: 0.38rem 0.38rem, 0.38rem 0.38rem;
  background-repeat: no-repeat;
}

/* Square INR / USD segmented toggle — replaces the currency dropdown.
   Left = INR (default active), right = USD. The active half lights up with
   the brand cyan gradient (matches .landing-primary-button). */
.price-toggle {
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  min-height: 2.9rem;
  padding: 4px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(17, 20, 29, 0.96), rgba(10, 12, 18, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.price-toggle-option {
  flex: 1 1 0;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font: inherit;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease;
}
.price-toggle-option:not(.is-active):hover {
  color: #f8fbff;
  background: rgba(255, 255, 255, 0.06);
}
.price-toggle-option.is-active {
  color: #081015;
  background: linear-gradient(135deg, #00d4ff, #8ff1ff);
  box-shadow: 0 10px 24px rgba(0, 212, 255, 0.22);
}
.price-toggle-option:active {
  transform: translateY(1px);
}

.landing-pricing-rate-copy {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.9rem;
  line-height: 1.45;
}

.landing-cta-section {
  padding: 2rem 0 0.5rem;
}

.landing-cta-shell {
  padding: 3.2rem 1.5rem;
  text-align: center;
  background:
    radial-gradient(circle at top, rgba(0, 212, 255, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(16, 20, 29, 0.98), rgba(9, 12, 18, 0.98));
}

.landing-cta-title {
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  line-height: 1.04;
  margin: 0.9rem auto 0;
  max-width: 22ch;
}

.landing-cta-actions {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.landing-cta-note {
  margin: 0.85rem 0 0;
  color: rgba(255, 255, 255, 0.52);
}

.landing-footer {
  padding: 2rem 0 2.6rem;
}

.landing-footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 0.8fr;
  gap: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.landing-footer-title {
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.landing-footer-list {
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
}

.landing-footer-list a,
.landing-footer-brand p {
  color: rgba(255, 255, 255, 0.72);
}

.landing-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}

.landing-footer-brand-lockup {
  width: fit-content;
}

.landing-footer-brand p {
  margin: 0;
  max-width: 22rem;
  line-height: 1.65;
}

.landing-footer-socials {
  display: flex;
  gap: 0.65rem;
}

.landing-footer-socials a {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #f7fbff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-transform: lowercase;
}

/* Legal entity + GSTIN line — shown beneath the copyright on every page. */
.landing-footer-entity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.58);
}

.landing-footer-entity strong {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}

.landing-footer-entity-divider {
  width: 1px;
  height: 0.95rem;
  background: rgba(255, 255, 255, 0.18);
}

.landing-footer-gstin {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.landing-footer-gstin span {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.12rem 0.5rem;
}

.reveal-section {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 520ms ease, transform 520ms ease;
}

.reveal-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes landing-marquee {
  to {
    transform: translateX(calc(-50% - 0.5rem));
  }
}

.mobile-nav-toggle {
  display: none;
}

.mobile-menu {
  display: none;
  margin-top: 0.8rem;
}

.mobile-menu.is-open {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

@media (max-width: 980px) {
  .desktop-only {
    display: none !important;
  }

  .mobile-nav-toggle {
    display: inline-flex;
  }

  .workflow-hero-panel,
  .workflow-main-grid,
  .landing-hero-grid,
  .landing-footer-grid {
    grid-template-columns: 1fr;
  }

  .workflow-output-shell {
    position: static;
    top: auto;
  }

  .workflow-hero-side {
    align-items: stretch;
  }

  .landing-nav-row {
    grid-template-columns: auto 1fr auto;
  }

  .landing-auth-slot {
    display: none;
  }

  .landing-menu-toggle {
    display: inline-flex;
  }

  .landing-steps-grid,
  .landing-model-grid,
  .landing-mode-grid,
  .landing-example-grid,
  .landing-price-grid,
  .landing-price-grid-two,
  .credits-model-grid,
  .account-main-grid {
    grid-template-columns: 1fr;
  }

  /* Carousel chip nav: keep all three chips on one row but allow them
     to shrink and scroll horizontally if they overflow. Previously this
     was forced to 1fr (one chip per row) which created a tall vertical
     stack that dominated the section on phones. */
  .landing-carousel-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }
  .landing-carousel-chip {
    padding: 0.6rem 0.55rem;
  }
  .landing-carousel-chip-title {
    font-size: 0.8rem;
  }
  .landing-carousel-chip-tag {
    font-size: 0.66rem;
  }

  .landing-proof-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .content-wrap {
    width: min(100% - 1rem, 100%);
  }

  .hero-title {
    font-size: 2.15rem;
  }

  .nav-row {
    align-items: flex-start;
  }

  .nav-links {
    display: none;
  }

  /* The desktop auth slot is hidden by `.landing-auth-slot { display: none }`
     in the 980px block; the mobile auth slot lives inside the open hamburger
     menu and must stay visible — never blanket-hide `.auth-slot` here. */

  .asset-meta {
    grid-template-columns: 1fr;
  }

  .asset-progress-stats {
    grid-template-columns: 1fr;
  }

  body[data-theme="workflow"] .content-wrap,
  body[data-page="home"] .content-wrap {
    width: min(100% - 1rem, 100%);
  }

  .workflow-page-shell {
    padding: 1.4rem 0 1.5rem;
  }

  .workflow-hero-panel,
  .workflow-form-shell,
  .workflow-output-shell,
  .landing-carousel-shell,
  .landing-step-card,
  .landing-model-card,
  .landing-mode-card,
  .landing-example-card,
  .landing-price-card,
  .landing-cta-shell {
    border-radius: 24px;
  }

  .workflow-hero-panel,
  .workflow-form-shell,
  .workflow-output-shell {
    padding: 1rem;
  }

  .workflow-form-block {
    padding: 0.9rem;
  }

  .workflow-form-intro h2,
  .workflow-output-intro h2,
  .account-section-title {
    font-size: 1.5rem;
  }

  .workflow-hero-title {
    font-size: 2.3rem;
  }

  .workflow-hero-step {
    padding: 0.8rem 0.9rem;
  }

  .workflow-hero-step span {
    font-size: 1.35rem;
  }

  .workflow-block-head {
    flex-direction: column;
    margin-bottom: 0.8rem;
  }

  .landing-site-header,
  body[data-theme="workflow"] .site-header {
    padding: 0.75rem 0;
  }

  .landing-hero-title {
    font-size: 2.7rem;
  }

  .landing-section-title,
  .landing-cta-title {
    font-size: 2rem;
  }

  .landing-section-head-inline {
    flex-direction: column;
    align-items: flex-start;
  }

  .landing-hero-actions,
  .landing-cta-actions {
    width: 100%;
  }

  .landing-primary-button,
  .landing-ghost-button,
  .landing-cta-button {
    width: 100%;
  }

  .account-page-shell,
  .credits-page-shell {
    padding: 1.4rem 0 1.5rem;
  }

  .account-hero-panel,
  .credits-hero-panel,
  .account-card-shell,
  .credits-card-shell,
  .credits-balance-shell {
    padding: 1rem;
    border-radius: 24px;
  }

  .credits-hero-title {
    font-size: 2.2rem;
  }
  .account-hero-title {
    font-size: 1.4rem;
  }

  .workflow-top-strip {
    align-items: flex-start;
    flex-direction: column;
    padding: 0.8rem 0.9rem;
  }

  .workflow-top-copy {
    align-items: flex-start;
    gap: 0.55rem;
  }

  .workflow-top-text {
    font-size: 0.86rem;
  }

  /* ── Mobile header polish ───────────────────────────────────────────────
     The desktop logo is 20.5rem (~328px) wide which overflows on phones and
     squeezes the hamburger off-screen. Scale down for ≤720px viewports. */
  .landing-brand-icon {
    width: 11rem;
    height: 3rem;
  }

  /* The brand-logo image was scoped to `object-position: left center`, which
     left a big gap on small screens — center it here so it sits flush. */
  .brand-icon-image {
    object-position: left center;
  }

  /* The mobile auth panel should fill the menu with enough breathing room. */
  .landing-mobile-menu {
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* On very narrow screens the credit chip + badge can wrap awkwardly inside
     the mobile-user-head row — let them flex down. */
  .mobile-user-head {
    flex-wrap: wrap;
  }

  /* Sign-in button inside the open hamburger menu should be full width. */
  .landing-mobile-menu .ghost-button {
    width: 100%;
    justify-content: center;
  }
}

/* Tiny phones (≤380px) — squeeze the logo a touch more so the hamburger always
   fits without horizontal scroll. */
@media (max-width: 380px) {
  .landing-brand-icon {
    width: 9rem;
    height: 2.6rem;
  }
}

body[data-page="legal"] {
  /* Legal pages keep their custom cyan border accents but inherit the
     unified canvas from the global `body` rule (was overriding it with
     its own bg that included a violet radial — same source of mismatch
     home had). */
  --border: rgba(0, 212, 255, 0.15);
  --border-strong: rgba(0, 212, 255, 0.35);
}

body[data-page="legal"] .site-header {
  background: transparent;
  backdrop-filter: none;
  border-bottom: none;
}

body[data-page="legal"] .landing-site-header.is-scrolled {
  background: rgba(8, 10, 16, 0.82);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
}

body[data-page="legal"] .gradient-stroke::before {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.45), rgba(143, 241, 255, 0.12), rgba(0, 212, 255, 0.06));
}

body[data-page="legal"] .eyebrow {
  background: rgba(0, 212, 255, 0.08);
  border-color: rgba(0, 212, 255, 0.22);
  color: rgba(0, 212, 255, 0.88);
}

body[data-page="legal"] .eyebrow-dot {
  background: linear-gradient(180deg, #00d4ff, #66d9ff);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.65);
}

body[data-page="legal"] .text-indigo-400 {
  color: rgba(0, 212, 255, 0.78) !important;
}

body[data-page="legal"] .modal-input:focus {
  border-color: rgba(0, 212, 255, 0.28);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.08);
}

body[data-page="legal"] .modal-input {
  border-color: rgba(255, 255, 255, 0.08);
}

body[data-page="legal"] .glass-panel {
  background: linear-gradient(180deg, rgba(14, 16, 22, 0.92), rgba(9, 12, 18, 0.88));
}

body[data-page="legal"] .glass-panel-soft {
  background: rgba(14, 16, 22, 0.7);
  border-color: rgba(255, 255, 255, 0.07);
}

/* Compact icon-style upload zones for audio + video reference clips. Shown
   only on models that the catalog flags as supportsAudioReference /
   supportsVideoReference (today: seedance-2-0 only). */
.workflow-ref-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 0.85rem;
}

.workflow-ref-icon-field {
  flex: 1 1 220px;
  min-width: 200px;
}

.upload-zone-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.95rem;
  cursor: pointer;
  border-radius: 14px;
}

.upload-zone-icon input {
  display: none;
}

.upload-zone-icon-glyph {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(143, 241, 255, 0.28);
}

.upload-zone-icon-glyph svg {
  width: 1.2rem;
  height: 1.2rem;
  display: block;
}

.upload-zone-icon-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

/* Sound on/off toggle. Replaces the prior dropdown — single click flips
   between sound-on and sound-off. Disabled (greyed) when the selected model
   has no audio capability. */
.sound-toggle {
  --sound-toggle-track-w: 76px;
  --sound-toggle-track-h: 34px;
  --sound-toggle-thumb-size: 28px;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.sound-toggle:focus-visible {
  outline: 2px solid rgba(168, 132, 255, 0.6);
  outline-offset: 4px;
  border-radius: 22px;
}

.sound-toggle-track {
  position: relative;
  width: var(--sound-toggle-track-w);
  height: var(--sound-toggle-track-h);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  overflow: hidden;
}

.sound-toggle.is-on .sound-toggle-track {
  /* Match the .neon-button brand gradient so the toggle reads as a primary
     control, not a secondary accent. */
  background: linear-gradient(135deg, rgba(157, 77, 255, 0.95), rgba(255, 94, 214, 0.95));
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 10px 24px rgba(164, 73, 255, 0.32);
}

.sound-toggle-thumb {
  position: absolute;
  top: 50%;
  left: 3px;
  width: var(--sound-toggle-thumb-size);
  height: var(--sound-toggle-thumb-size);
  transform: translate(0, -50%);
  background: #f4f1ff;
  color: #6b2bd9;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 220ms cubic-bezier(0.5, 0, 0.2, 1.2), background 220ms ease, color 220ms ease;
  z-index: 2;
}

.sound-toggle-thumb svg {
  width: 14px;
  height: 14px;
  display: block;
}

.sound-toggle.is-on .sound-toggle-thumb {
  transform: translate(calc(var(--sound-toggle-track-w) - var(--sound-toggle-thumb-size) - 6px), -50%);
}

.sound-toggle-thumb-glyph {
  display: inline-block;
  line-height: 1;
}

.sound-toggle-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  pointer-events: none;
  transition: opacity 180ms ease;
}

.sound-toggle-label-on {
  left: 12px;
  opacity: 0;
}

.sound-toggle-label-off {
  right: 12px;
  opacity: 0.7;
  color: rgba(255, 255, 255, 0.55);
}

.sound-toggle.is-on .sound-toggle-label-on {
  opacity: 1;
}

.sound-toggle.is-on .sound-toggle-label-off {
  opacity: 0;
}

.sound-toggle-state {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.sound-toggle.is-disabled,
.sound-toggle[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

.sound-toggle.is-disabled:hover .sound-toggle-track,
.sound-toggle[disabled]:hover .sound-toggle-track {
  background: rgba(255, 255, 255, 0.06);
}

/* ─── Quick launcher ───────────────────────────────────────────────────────
   Three-square shortcut strip rendered directly below the site header on
   Home, Workflow, and Upscale. Lets a visitor pivot between the two
   production flows (Create / Upscale) and their library (My Videos) in one
   tap without scrolling. Active card highlight is set by common.js based
   on body[data-page] so the user always sees where they currently are.
   Mobile-first: three columns even on the narrowest viewport, just smaller. */
.quick-launch {
  padding: 0.9rem 0 0.2rem;
}

.quick-launch-row {
  display: flex;
  gap: 0.55rem;
  /* On wide screens the cards share the width equally → one clean row. On
     narrow screens their min-width forces a horizontal swipe instead of
     wrapping, so it stays one row and stays usable on phones/tablets. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.quick-launch-row::-webkit-scrollbar { display: none; }

.quick-launch-card {
  position: relative;
  flex: 1 0 0;
  min-width: 116px;          /* keeps cards readable; triggers swipe on phones */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 0.5rem;
  min-height: 72px;
  border-radius: 16px;
  text-decoration: none;
  color: #f8fbff;
  background: linear-gradient(180deg, rgba(18, 21, 30, 0.95), rgba(10, 13, 20, 0.95));
  border: 1px solid rgba(0, 212, 255, 0.2);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  overflow: hidden;
}

/* Hairline top accent — picks up the brand cyan and adds depth without a
   heavy border. Acts as the visual signature shared with header tabs. */
.quick-launch-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.55), transparent);
  opacity: 0.75;
  pointer-events: none;
}

.quick-launch-card:hover,
.quick-launch-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(0, 212, 255, 0.6);
  box-shadow: 0 22px 50px rgba(0, 212, 255, 0.22);
  background: linear-gradient(180deg, rgba(22, 30, 45, 0.95), rgba(10, 13, 20, 0.95));
  outline: none;
}

.quick-launch-card-glow {
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at top, rgba(0, 212, 255, 0.42), transparent 60%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.quick-launch-card:hover .quick-launch-card-glow,
.quick-launch-card:focus-visible .quick-launch-card-glow,
.quick-launch-card.is-active .quick-launch-card-glow {
  opacity: 1;
}

.quick-launch-card-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.22), rgba(143, 241, 255, 0.06));
  border: 1px solid rgba(0, 212, 255, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.quick-launch-card-icon svg {
  width: 21px;
  height: 21px;
}

.quick-launch-card-label {
  position: relative;
  font-family: "DM Sans", sans-serif;   /* crisp + proportional — Syne reads stretched here */
  font-weight: 700;
  font-size: 0.83rem;
  letter-spacing: -0.005em;
  text-align: center;
}

/* "Free" tag, top-right corner of the card. Hidden by default; shown only to
   visitors who can still claim the signup bonus (body.can-claim-free, set by
   auth.js for guests + signed-in users who haven't claimed yet). */
.quick-launch-free {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  align-items: center;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #051016;
  background: linear-gradient(135deg, #00d4ff, #8ff1ff);
  border-radius: 999px;
  padding: 0.16rem 0.46rem;
  box-shadow: 0 3px 10px rgba(0, 212, 255, 0.3);
  pointer-events: none;
}

body.can-claim-free .quick-launch-free {
  display: inline-flex;
}

/* Green "Beta" tag, top-right corner — always shown (marks a beta surface). */
.quick-launch-beta {
  display: inline-flex;
  align-items: center;
  position: absolute;
  top: 6px;
  right: 6px;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #04231a;
  background: linear-gradient(135deg, #37d996, #8ff6c8);
  border-radius: 999px;
  padding: 0.16rem 0.46rem;
  box-shadow: 0 3px 10px rgba(55, 217, 150, 0.35);
  pointer-events: none;
}
/* If a card is both Free + Beta, stack the Beta below the Free tag. */
body.can-claim-free .quick-launch-card .quick-launch-free + .quick-launch-beta { top: 22px; }

/* Active-page highlight: brighter ring + soft cyan wash to make the
   current-context card unmistakable without competing with hover. */
.quick-launch-card.is-active {
  border-color: rgba(0, 212, 255, 0.75);
  background: linear-gradient(180deg, rgba(0, 212, 255, 0.16), rgba(10, 13, 20, 0.95));
  box-shadow: 0 22px 50px rgba(0, 212, 255, 0.2);
}

.quick-launch-card.is-active .quick-launch-card-icon {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.35), rgba(143, 241, 255, 0.12));
  border-color: rgba(0, 212, 255, 0.7);
}

@media (max-width: 760px) {
  .quick-launch {
    padding: 0.65rem 0 0;
  }
  .quick-launch-row {
    gap: 0.45rem;
  }
  .quick-launch-card {
    min-width: 102px;
    padding: 0.55rem 0.3rem;
    min-height: 66px;
    border-radius: 14px;
    gap: 0.3rem;
  }
  .quick-launch-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 11px;
  }
  .quick-launch-card-icon svg {
    width: 18px;
    height: 18px;
  }
  .quick-launch-card-label {
    font-size: 0.72rem;
  }
}

@media (max-width: 420px) {
  .quick-launch-card {
    min-width: 90px;
    padding: 0.5rem 0.25rem;
    min-height: 62px;
  }
  .quick-launch-card-label {
    font-size: 0.66rem;
  }
  .quick-launch-free, .quick-launch-beta {
    font-size: 0.55rem;
    padding: 0.14rem 0.4rem;
  }
}

/* ─── Free-credit nudge ─────────────────────────────────────────────────────
   Guest-only "17 free credits on sign-up" prompt shown beside every
   video-creation CTA (hero, bottom CTA, header button, the Video Generation
   quick-launch card, and the workflow generate button). Visibility is driven
   entirely by `body.is-guest` — auth.js toggles that class from renderAuthState
   based on session state, so these elements appear ONLY for signed-out
   visitors and vanish the instant someone signs in. Deliberately NOT placed on
   upscale CTAs — free signup credits can't be spent on upscaling. The "17"
   mirrors the backend FREE_BONUS_CREDITS constant. */
.free-nudge,
.free-chip {
  display: none;
}

/* Pill: a clickable badge that opens the register modal via data-open-login. */
.free-nudge {
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  text-decoration: none;
  font-family: "DM Sans", sans-serif;
  font-size: 0.86rem;
  line-height: 1.2;
  color: #cdeffb;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.14), rgba(123, 111, 255, 0.12));
  border: 1px solid rgba(0, 212, 255, 0.4);
  box-shadow: 0 10px 30px rgba(0, 212, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

body.is-guest .free-nudge {
  display: inline-flex;
}

/* Centered block variant — drops the pill on its own line under a CTA. */
body.is-guest .free-nudge.free-nudge--center {
  display: flex;
  width: fit-content;
  margin: 1.15rem auto 0;
}

.free-nudge:hover,
.free-nudge:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(0, 212, 255, 0.7);
  box-shadow: 0 16px 40px rgba(0, 212, 255, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  outline: none;
}

.free-nudge strong {
  color: #00d4ff;
  font-weight: 700;
}

.free-nudge-spark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #00d4ff;
  flex: none;
  filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.55));
}

.free-nudge-spark svg {
  width: 16px;
  height: 16px;
}

/* Chip: a compact inline tag embedded inside a button or quick-launch card. */
.free-chip {
  align-items: center;
  gap: 0.28rem;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #081015;
  background: linear-gradient(135deg, #00d4ff, #8ff1ff);
  box-shadow: 0 4px 14px rgba(0, 212, 255, 0.3);
  white-space: nowrap;
}

body.is-guest .free-chip {
  display: inline-flex;
}

/* On the filled-cyan header CTA the chip would clash — flip it to a
   translucent dark tag so it reads cleanly on the gradient button. */
.landing-cta-button .free-chip {
  color: #eafbff;
  background: rgba(8, 16, 21, 0.24);
  box-shadow: none;
}

/* Quick-launch card chip: a thin pill sitting just under the card label. */
.free-chip--card {
  margin-top: 0.1rem;
  font-size: 0.58rem;
  padding: 0.14rem 0.45rem;
}

@media (prefers-reduced-motion: reduce) {
  .free-nudge {
    transition: none;
  }
  .free-nudge:hover,
  .free-nudge:focus-visible {
    transform: none;
  }
}

@media (max-width: 640px) {
  .free-nudge {
    font-size: 0.8rem;
    padding: 0.45rem 0.8rem;
  }
  /* The launcher cards get cramped on phones — keep the card label clean and
     rely on the hero/header nudges to carry the free-credit message there. */
  body.is-guest .free-chip--card {
    display: none;
  }
}

/* ── Promo coupon popup ──────────────────────────────────────────────────
   Site-wide offer modal (layout.js renderSharedModals → #promoCouponModal).
   Reuses .modal-backdrop / .is-open for show-hide; everything below styles
   the panel and its contents into an attention-grabbing offer card. */
.promo-modal-panel {
  position: relative;
  width: min(416px, 100%);
  padding: 2.3rem 1.9rem 1.7rem;
  text-align: center;
  overflow: hidden;
  border: 1px solid rgba(0, 212, 255, 0.3);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(0, 212, 255, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(22, 16, 40, 0.99), rgba(8, 7, 16, 0.98));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), 0 0 70px rgba(0, 212, 255, 0.16);
}
.promo-modal-backdrop.is-open .promo-modal-panel {
  animation: promo-pop 0.42s cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
}
@keyframes promo-pop {
  0% { transform: translateY(22px) scale(0.94); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.promo-modal-glow {
  position: absolute;
  top: -42%;
  left: 50%;
  width: 320px;
  height: 320px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(123, 111, 255, 0.32), transparent 65%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}
.promo-modal-panel > *:not(.promo-modal-glow) { position: relative; z-index: 1; }

/* Close button — crisp SVG, perfectly centred. */
.promo-modal-close {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.promo-modal-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
}

/* Offer badge — star + label on one centred baseline. */
.promo-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  margin-bottom: 1.05rem;
  padding: 0.34rem 0.85rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #06181f;
  background: linear-gradient(135deg, #00d4ff, #8ff1ff);
  box-shadow: 0 6px 18px rgba(0, 212, 255, 0.32);
}
.promo-modal-badge-star { font-size: 0.82rem; line-height: 1; }

.promo-modal-title {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.22;
  color: #fff;
  margin: 0 0 0.5rem;
}
.promo-modal-text {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0 auto 1.25rem;
  max-width: 32ch;
}
.promo-modal-text:empty { display: none; }

/* Reward card — big gradient number with a baseline-aligned unit. */
.promo-modal-reward {
  margin: 0 auto 1.15rem;
  padding: 1.05rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(0, 212, 255, 0.22);
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(123, 111, 255, 0.08));
}
.promo-reward-big {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: 2.1rem;
  line-height: 1.05;
  background: linear-gradient(135deg, #00d4ff, #93f4d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.promo-reward-big span {
  font-size: 1rem;
  font-weight: 700;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.72);
}
.promo-reward-sub {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.6);
}
.promo-reward-hot { color: #93f4d4; font-weight: 700; }

/* Code line + note. */
.promo-modal-code-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.promo-modal-code-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.42);
}
.promo-modal-code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 1rem;
  color: #00d4ff;
  padding: 0.32rem 0.8rem;
  border-radius: 9px;
  border: 1px dashed rgba(0, 212, 255, 0.45);
  background: rgba(0, 212, 255, 0.07);
}
.promo-modal-code-note {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 1.3rem;
}

/* CTA — full-width pill (inherits .landing-primary-button) with an arrow. */
.promo-modal-cta {
  width: 100%;
  font-size: 0.98rem;
}
.promo-modal-cta svg { flex-shrink: 0; }

.promo-modal-dismiss {
  display: block;
  margin: 0.85rem auto 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.82rem;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s ease;
}
.promo-modal-dismiss:hover { color: rgba(255, 255, 255, 0.72); }
.promo-modal-expiry {
  margin-top: 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: #ff9db1;
}
.promo-modal-expiry:empty { display: none; }

@media (max-width: 480px) {
  .promo-modal-panel { padding: 2rem 1.35rem 1.5rem; }
  .promo-modal-title { font-size: 1.32rem; }
  .promo-reward-big { font-size: 1.85rem; }
}

/* ───────────────────────── Image Garage ───────────────────────── */
.ig-main { padding: 96px 0 80px; display: flex; flex-direction: column; gap: 1.5rem; }
.ig-page-head { text-align: center; margin-bottom: 0.5rem; }
.ig-kicker { display: inline-flex; align-items: center; gap: 0.5rem; color: #00d4ff; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.8rem; }
.ig-garage-icon { display: inline-flex; color: #00d4ff; }
.ig-title { font-family: 'Syne', sans-serif; font-size: clamp(1.6rem, 3.6vw, 2.6rem); margin: 0.5rem 0 0.35rem; color: #fff; line-height: 1.05; }
.ig-sub { color: rgba(255,255,255,0.55); font-size: 0.95rem; margin: 0; }

/* Mosaic (masonry via columns) */
.ig-mosaic { column-count: 5; column-gap: 0.6rem; }
.ig-mosaic-card { position: relative; break-inside: avoid; margin: 0 0 0.6rem; border-radius: 12px; overflow: hidden; cursor: pointer; background: rgba(255,255,255,0.03); }
.ig-mosaic-card img { width: 100%; display: block; }
.ig-mosaic-ov { position: absolute; inset: auto 0 0 0; padding: 0.5rem; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.78)); color: #fff; font-size: 0.7rem; opacity: 0; transition: opacity 0.18s; display: flex; flex-direction: column; gap: 2px; }
.ig-mosaic-card:hover .ig-mosaic-ov { opacity: 1; }
.ig-mosaic-prompt { color: rgba(255,255,255,0.7); font-size: 0.65rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) { .ig-mosaic { column-count: 4; } }
@media (max-width: 800px) { .ig-mosaic { column-count: 3; } }
@media (max-width: 520px) { .ig-mosaic { column-count: 2; } }

/* Generation panel */
/* position+z-index so the model dropdown (an absolute child) paints ABOVE the
   gallery below it. `.glass-panel` has backdrop-filter, which makes this panel
   an atomic stacking context — without lifting the panel itself, the dropdown's
   own z-index can't escape above the later gallery section in DOM order. Kept
   below the site header (z-index 40). */
.ig-panel { position: relative; z-index: 30; padding: 1.25rem; border-radius: 20px; display: flex; flex-direction: column; gap: 1rem; }
.ig-controls { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-start; }
.ig-control { display: flex; flex-direction: column; gap: 0.45rem; }
.ig-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); }
.ig-select { min-width: 15rem; min-height: 2.6rem; padding: 0.55rem 0.8rem; border-radius: 12px; background: linear-gradient(180deg, rgba(17,20,29,0.96), rgba(10,12,18,0.96)); color: #f8fbff; border: 1px solid rgba(255,255,255,0.1); }
.ig-est { color: rgba(255,255,255,0.5); font-size: 0.72rem; }

/* Custom model picker (replaces the native select) */
.ig-control-model { position: relative; }
.ig-model-picker { position: relative; }
.ig-model-trigger { display: flex; align-items: center; gap: 0.6rem; min-width: 17rem; padding: 0.5rem 0.7rem; border-radius: 14px; background: linear-gradient(180deg, rgba(17,20,29,0.96), rgba(10,12,18,0.96)); border: 1px solid rgba(255,255,255,0.12); color: #f8fbff; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.ig-model-trigger:hover { border-color: rgba(0,212,255,0.45); box-shadow: 0 0 0 3px rgba(0,212,255,0.08); }
.ig-model-ic { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 11px; color: #fff; background: linear-gradient(135deg, var(--tint, #00d4ff), rgba(255,255,255,0.06)); box-shadow: inset 0 1px 6px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.08); }
.ig-model-trig-text { display: flex; flex-direction: column; align-items: flex-start; flex: 1; line-height: 1.15; min-width: 0; }
.ig-model-trig-name { font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
.ig-model-trig-sub { font-size: 0.68rem; color: rgba(255,255,255,0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14rem; }
.ig-model-chev { color: rgba(255,255,255,0.5); flex: none; }
.ig-model-panel { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 21rem; max-height: 360px; overflow-y: auto; padding: 0.45rem; border-radius: 16px; background: linear-gradient(180deg, rgba(20,23,32,0.99), rgba(12,14,20,0.99)); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 26px 64px -22px rgba(0,0,0,0.78); backdrop-filter: blur(18px); }
.ig-model-panel[hidden] { display: none; }
.ig-model-group { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.4); padding: 0.55rem 0.5rem 0.25rem; }
.ig-model-row { display: flex; align-items: center; gap: 0.65rem; width: 100%; padding: 0.5rem; border: none; background: none; border-radius: 11px; cursor: pointer; text-align: left; color: #f4f8ff; transition: background 0.12s; }
.ig-model-row:hover { background: rgba(0,212,255,0.1); }
.ig-model-row.is-active { background: rgba(0,212,255,0.16); box-shadow: inset 0 0 0 1px rgba(0,212,255,0.35); }
.ig-model-row-text { display: flex; flex-direction: column; line-height: 1.2; }
.ig-model-row-name { font-weight: 600; font-size: 0.9rem; }
.ig-model-row-sub { font-size: 0.68rem; color: rgba(255,255,255,0.45); }
.ig-chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ig-chip { padding: 0.4rem 0.7rem; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.8); font-size: 0.8rem; cursor: pointer; transition: all 0.15s; }
.ig-chip:hover { border-color: rgba(0,212,255,0.4); }
.ig-chip.is-active { border-color: #00d4ff; background: rgba(0,212,255,0.16); color: #fff; }
/* Icon-based aspect-ratio buttons (shape glyph + small label) */
.ig-ratio-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 52px; height: 52px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.7); cursor: pointer; transition: all 0.15s; }
.ig-ratio-btn span { font-size: 0.6rem; letter-spacing: 0.02em; }
.ig-ratio-btn:hover { border-color: rgba(0,212,255,0.4); color: #fff; }
.ig-ratio-btn.is-active { border-color: #00d4ff; background: rgba(0,212,255,0.16); color: #00d4ff; }

/* Reference upload */
.ig-ref-drop { min-width: 12rem; min-height: 2.6rem; border: 1px dashed rgba(255,255,255,0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(255,255,255,0.45); font-size: 0.78rem; padding: 0.5rem; }
.ig-ref-drop.is-drag { border-color: #00d4ff; background: rgba(0,212,255,0.06); }
.ig-ref-thumbs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.4rem; }
.ig-ref-thumb { position: relative; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; }
.ig-ref-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ig-ref-x { position: absolute; top: 1px; right: 1px; width: 16px; height: 16px; border-radius: 50%; border: none; background: rgba(0,0,0,0.7); color: #fff; font-size: 9px; cursor: pointer; line-height: 1; }

/* Prompt + generate */
.ig-prompt-wrap { display: flex; flex-direction: column; gap: 0.6rem; }
.ig-prompt { width: 100%; min-height: 84px; resize: vertical; padding: 0.85rem; border-radius: 14px; background: rgba(8,10,16,0.7); border: 1px solid rgba(255,255,255,0.1); color: #f4f8ff; font-family: 'DM Sans', sans-serif; font-size: 0.95rem; }
/* One compact row: enhance · char-count · (spacer) · cost · generate */
.ig-action-bar { display: flex; align-items: center; gap: 0.6rem; }
.ig-action-spacer { flex: 1 1 auto; }
.ig-charcount { color: rgba(255,255,255,0.35); font-size: 0.72rem; }
.ig-soft-btn { background: rgba(123,111,255,0.16); border: 1px solid rgba(123,111,255,0.3); color: #d8d2ff; border-radius: 10px; padding: 0.45rem 0.85rem; font-size: 0.8rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.ig-soft-btn:hover { background: rgba(123,111,255,0.26); }
.ig-cost-hint { color: rgba(255,255,255,0.6); font-size: 0.85rem; white-space: nowrap; }
.ig-generate { min-width: 11rem; }
.ig-panel-note { color: #ff8a8a; font-size: 0.8rem; min-height: 0; }
.ig-panel-note:empty { display: none; }

/* Grids (inflight + gallery) */
.ig-section-h { font-family: 'Syne', sans-serif; color: #fff; font-size: 1.1rem; margin: 0 0 0.6rem; }
.ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; }
@media (max-width: 900px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }
.ig-card { position: relative; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,0.03); cursor: pointer; aspect-ratio: 1/1; }
.ig-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-card-overlay { position: absolute; inset: 0 0 auto 0; display: flex; justify-content: space-between; padding: 0.5rem; font-size: 0.66rem; color: #fff; background: linear-gradient(180deg, rgba(0,0,0,0.6), transparent); opacity: 0; transition: opacity 0.18s; }
.ig-card:hover .ig-card-overlay { opacity: 1; }
.ig-card-badge { background: rgba(0,0,0,0.5); padding: 2px 8px; border-radius: 999px; }
.ig-card-prompt { position: absolute; inset: auto 0 0 0; padding: 0.5rem; font-size: 0.7rem; color: rgba(255,255,255,0.85); background: linear-gradient(180deg, transparent, rgba(0,0,0,0.8)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; opacity: 0; transition: opacity 0.18s; }
.ig-card:hover .ig-card-prompt { opacity: 1; }

/* Attach-to-video button (Seedream 5.0 Lite cards) */
.ig-attach-card {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: #bff2ff;
  background: rgba(8, 12, 18, 0.72);
  border: 1px solid rgba(0, 212, 255, 0.4);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease;
  backdrop-filter: blur(4px);
}
.ig-card:hover .ig-attach-card { opacity: 1; }
.ig-attach-card:hover { background: rgba(0, 212, 255, 0.32); color: #fff; transform: scale(1.08); }
@media (hover: none) { .ig-attach-card { opacity: 0.92; } }
.ig-card-loading { aspect-ratio: 1/1; display: flex; align-items: flex-end; padding: 0.6rem; background: rgba(255,255,255,0.04); }
.ig-card-shimmer { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(255,255,255,0.04) 30%, rgba(0,212,255,0.12) 50%, rgba(255,255,255,0.04) 70%); background-size: 200% 100%; animation: igShimmer 1.4s infinite; }
@keyframes igShimmer { to { background-position: -200% 0; } }
.ig-card-loadmeta { position: relative; color: rgba(255,255,255,0.7); font-size: 0.72rem; }
.ig-dots::after { content: "…"; animation: igDots 1.2s steps(4) infinite; }
@keyframes igDots { 0%{content:""} 25%{content:"."} 50%{content:".."} 75%{content:"..."} }

/* Tabs */
.ig-tabs { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; }
.ig-tab { background: none; border: none; border-bottom: 2px solid transparent; color: rgba(255,255,255,0.55); padding: 0.4rem 0.2rem; font-size: 0.95rem; cursor: pointer; }
.ig-tab.is-active { color: #fff; border-bottom-color: #00d4ff; }
.ig-gallery-title { display: flex; align-items: center; gap: 0.5rem; }
.ig-private-tag { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; padding: 2px 8px; }
.ig-empty { color: rgba(255,255,255,0.4); text-align: center; padding: 2rem; }
.ig-load-more-wrap { text-align: center; margin-top: 1rem; }

/* Lightbox */
.ig-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 2rem; }
.ig-lightbox.is-open { display: flex; }
.ig-lightbox-backdrop { position: absolute; inset: 0; background: rgba(2,4,10,0.85); backdrop-filter: blur(6px); }
.ig-lightbox-card { position: relative; z-index: 1; display: flex; gap: 1.25rem; max-width: 1100px; width: 100%; max-height: 88vh; background: linear-gradient(180deg, rgba(18,21,30,0.96), rgba(11,13,18,0.96)); border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; padding: 1.25rem; overflow: hidden; }
.ig-lightbox-img { flex: 0 0 62%; display: flex; align-items: center; justify-content: center; background: #05060a; border-radius: 12px; overflow: hidden; }
.ig-lightbox-img img { max-width: 100%; max-height: 80vh; object-fit: contain; }
.ig-lightbox-detail { flex: 1; overflow-y: auto; color: #fff; }
.ig-lightbox-detail h3 { font-family: 'Syne', sans-serif; margin: 0 0 0.5rem; }
.ig-lb-prompt { color: rgba(255,255,255,0.7); font-size: 0.9rem; line-height: 1.6; }
.ig-lb-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0; }
.ig-lb-meta span { background: rgba(255,255,255,0.06); border-radius: 8px; padding: 3px 8px; font-size: 0.72rem; color: rgba(255,255,255,0.7); }
.ig-lb-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.ig-lightbox-x { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; background: rgba(0,0,0,0.5); border: none; color: #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; }
@media (max-width: 800px) { .ig-lightbox-card { flex-direction: column; max-height: 92vh; overflow-y: auto; } .ig-lightbox-img { flex: none; } }

/* ── Image Garage — mobile ─────────────────────────────────────────────── */
@media (max-width: 760px) {
  .ig-main { padding-left: 0; padding-right: 0; }
  .ig-title { font-size: clamp(1.5rem, 7vw, 2.1rem); }
  .ig-sub { font-size: 0.9rem; }
  .ig-panel { padding: 1rem; border-radius: 16px; gap: 0.9rem; }
  .ig-controls { gap: 0.9rem 1rem; }
  /* Each control takes the full row so nothing overflows the viewport. */
  .ig-control { width: 100%; }
  .ig-model-picker { width: 100%; }
  .ig-model-trigger { min-width: 0; width: 100%; }
  .ig-model-panel { min-width: 0; width: 100%; max-width: 100%; }
  .ig-model-trig-sub { max-width: 60vw; }
  .ig-select, .ig-ref-drop { min-width: 0; width: 100%; }
  /* Action bar wraps: enhance + count on top, cost + full-width generate below. */
  .ig-action-bar { flex-wrap: wrap; gap: 0.5rem 0.6rem; }
  .ig-action-spacer { flex-basis: 100%; height: 0; }
  .ig-cost-hint { margin-left: auto; }
  .ig-generate { width: 100%; min-width: 0; order: 9; }
}
@media (max-width: 420px) {
  .ig-ratio-btn { width: 46px; height: 46px; }
  .ig-grid { gap: 0.5rem; }
}

/* Motion Control — Character Orientation segmented toggle (Image | Video).
   Full-width segmented control: the two options split the row evenly so there
   is no dead space; inactive options are quiet, the active one carries the
   brand gradient. Mirrors the pricing INR/USD toggle styling. */
.orientation-toggle {
  display: flex;
  width: 100%;
  gap: 0.25rem;
  padding: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
}
.orientation-toggle .orientation-opt {
  flex: 1 1 0;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.orientation-toggle .orientation-opt:hover { color: #fff; }
.orientation-toggle .orientation-opt.active {
  background: linear-gradient(90deg, #22d3ee, #3b82f6);
  color: #06121f;
  box-shadow: 0 6px 18px rgba(34, 211, 238, 0.32);
}

/* Motion Control collapses any Output-Settings row whose second control is
   hidden (frame shape, etc.) to a single full-width column — so the visible
   control fills the row instead of leaving an empty half. */
.mc-single-col { grid-template-columns: 1fr !important; }

/* AI-generation compliance label (IT Rules 2026 — SGI disclosure). Theme-matched
   cyan, kept small and unobtrusive. `.ig-ai-badge` is an output-card overlay chip
   (sits beside the model badge); `.ig-ai-label` is the inline label used on the
   lightbox, video result, assets card, and Muse output nodes. */
.ig-ai-badge {
  background: rgba(0, 212, 255, 0.14);
  color: #7fe3ff;
  border: 1px solid rgba(0, 212, 255, 0.30);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 2px 7px;
}

.ig-ai-label {
  font-size: 11px;
  color: #9fe9ff;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.85;
  display: inline-block;
  margin-bottom: 4px;
}

/* AI label as a chip in the lightbox meta row — matches the other meta chips'
   shape, cyan-tinted so it reads as the SGI disclosure without crowding the
   action buttons below. */
.ig-lb-meta .ig-ai-chip {
  background: rgba(0, 212, 255, 0.14);
  color: #7fe3ff;
  border: 1px solid rgba(0, 212, 255, 0.30);
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Cap the lightbox prompt height so a long prompt scrolls inside its own box
   instead of pushing the meta row + action buttons off-screen. */
.ig-lb-prompt {
  max-height: 9.5em;
  overflow-y: auto;
  padding-right: 6px;
}

/* ── Custom mobile-OTP modal (server-driven, no third-party widget) ───────── */
.otpx-backdrop {
  position: fixed; inset: 0; z-index: 1200; display: none;
  align-items: center; justify-content: center; padding: 1.25rem;
  background: rgba(2, 4, 10, 0.72); backdrop-filter: blur(8px);
}
.otpx-backdrop.is-open { display: flex; animation: otpxFade 0.18s ease-out; }
@keyframes otpxFade { from { opacity: 0; } to { opacity: 1; } }
.otpx-card {
  position: relative; width: 100%; max-width: 400px; padding: 2rem 1.75rem 1.75rem;
  border-radius: 22px; text-align: center;
  background: linear-gradient(180deg, rgba(20, 24, 34, 0.98), rgba(12, 14, 20, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.85);
  animation: otpxPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes otpxPop { from { transform: translateY(10px) scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }
.otpx-close {
  position: absolute; top: 12px; right: 14px; width: 30px; height: 30px;
  border: none; border-radius: 50%; cursor: pointer; font-size: 14px;
  background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.7);
}
.otpx-close:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.otpx-badge {
  display: inline-block; margin-bottom: 0.9rem; padding: 4px 12px; border-radius: 999px;
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  color: #7fe3ff; background: rgba(0, 212, 255, 0.12); border: 1px solid rgba(0, 212, 255, 0.3);
}
.otpx-title { font-family: 'Syne', sans-serif; color: #fff; font-size: 1.45rem; margin: 0 0 0.4rem; }
.otpx-sub { color: rgba(255, 255, 255, 0.55); font-size: 0.85rem; margin: 0 0 1.25rem; line-height: 1.5; }
.otpx-phone-row {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;
  background: rgba(8, 10, 16, 0.7); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px; padding: 0.35rem 0.6rem;
}
.otpx-phone-row:focus-within { border-color: rgba(0, 212, 255, 0.55); box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1); }
.otpx-cc { color: rgba(255, 255, 255, 0.7); font-weight: 700; font-size: 1rem; padding-left: 0.3rem; }
.otpx-phone {
  flex: 1; background: none; border: none; outline: none; color: #f4f8ff;
  font-size: 1.1rem; letter-spacing: 0.06em; padding: 0.6rem 0.3rem; font-family: inherit;
}
.otpx-digits { display: flex; justify-content: center; gap: 0.6rem; margin-bottom: 1.1rem; }
.otpx-digit {
  width: 56px; height: 64px; text-align: center; font-size: 1.7rem; font-weight: 700;
  color: #fff; background: rgba(8, 10, 16, 0.7); border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px; outline: none; transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  -moz-appearance: textfield;
}
.otpx-digit::-webkit-outer-spin-button, .otpx-digit::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.otpx-digit:focus { border-color: #00d4ff; box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.14); transform: translateY(-1px); }
.otpx-digit:disabled { opacity: 0.5; }
@media (max-width: 420px) { .otpx-digit { width: 48px; height: 56px; font-size: 1.45rem; } }
.otpx-btn {
  width: 100%; padding: 0.85rem; border: none; border-radius: 14px; cursor: pointer;
  font-size: 0.98rem; font-weight: 700; color: #03121b;
  background: linear-gradient(135deg, #00d4ff, #4de1ff);
  box-shadow: 0 10px 26px -10px rgba(0, 212, 255, 0.6); transition: filter 0.15s, transform 0.1s;
}
.otpx-btn:hover { filter: brightness(1.07); }
.otpx-btn:active { transform: translateY(1px); }
.otpx-btn:disabled { opacity: 0.6; cursor: default; filter: none; }
.otpx-msg { min-height: 1.1rem; margin-top: 0.7rem; font-size: 0.8rem; }
.otpx-msg-error { color: #ff8a8a; }
.otpx-msg-info { color: #9fe9ff; }
.otpx-resend { margin-top: 1rem; font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); }
.otpx-link {
  background: none; border: none; padding: 0; cursor: pointer; font-size: inherit;
  color: #7fe3ff; font-weight: 600; text-decoration: underline; font-family: inherit;
}
.otpx-link:disabled { color: rgba(255, 255, 255, 0.35); cursor: default; text-decoration: none; }
.otpx-timer { color: rgba(255, 255, 255, 0.4); }

/* Email ⇆ Phone login slider (segmented control) */
.auth-seg {
  position: relative; display: flex; margin: 0 0 18px; padding: 4px;
  border-radius: 12px; background: rgba(8, 10, 16, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.auth-seg-thumb {
  position: absolute; top: 4px; left: 4px; bottom: 4px; width: calc(50% - 4px);
  border-radius: 9px; background: linear-gradient(135deg, rgba(0, 212, 255, 0.9), rgba(77, 225, 255, 0.9));
  box-shadow: 0 4px 14px -4px rgba(0, 212, 255, 0.6);
  transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.auth-seg.is-email .auth-seg-thumb { transform: translateX(100%); }
.auth-seg-btn {
  position: relative; z-index: 1; flex: 1; padding: 9px 6px; border: none; background: none;
  cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.55); transition: color 0.2s;
}
.auth-seg-btn.is-active { color: #03121b; }