/* ===========================================================================
 * Hiroi Slides — App chrome (studio)
 * Marketing + dashboard shell styles: nav, footer, buttons, hero, feature grid,
 * pricing table, dashboard cards, modal. This file styles the *frame* around the
 * product; the deck/slide rendering lives in slides-deck.css.
 *
 * Hard rule: only the design-tokens.css custom properties (--color-*, --font-*,
 * --space-*, --radius-*, --shadow-*, --ease-*, --duration-*) are used here, so
 * the whole surface is automatically light/dark aware. Accent = brand teal.
 * ======================================================================== */

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

[x-cloak] { display: none !important; }

.hs-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.hs-main { flex: 1 1 auto; }

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

.hs-nav-links a:focus-visible,
.hs-footer-links a:focus-visible,
.hs-link-arrow:focus-visible {
  outline: none;
  border-radius: var(--radius-xs);
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-primary);
}

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

::selection { background: color-mix(in srgb, var(--color-primary) 32%, transparent); color: var(--color-text-primary); }
::-moz-selection { background: color-mix(in srgb, var(--color-primary) 32%, transparent); color: var(--color-text-primary); }
.hs-spotlight ::selection, .hs-cta-card ::selection, .hs-deckdemo.is-dark ::selection, .hs-mock-slide ::selection { color: #f5f2ed; }
.hs-spotlight ::-moz-selection, .hs-cta-card ::-moz-selection, .hs-deckdemo.is-dark ::-moz-selection, .hs-mock-slide ::-moz-selection { color: #f5f2ed; }

.hs-display {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: var(--tracking-tighter);
  line-height: var(--line-height-tight);
}

/* Shared section shell */
.hs-section { padding: var(--space-20) var(--space-6); }
.hs-container { max-width: 1140px; margin: 0 auto; }
.hs-container-wide { max-width: 1280px; margin: 0 auto; }

.hs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: 'Sora', system-ui, sans-serif;
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-primary);
}

.hs-accent { color: var(--color-primary); }

/* Visually hidden but available to assistive tech — used for section headings
   that keep the document's heading outline logical without adding visual noise. */
.hs-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content link — visually hidden until focused, then restored at the
   top-left as a real on-screen affordance using the shared focus-ring shadow. */
.hs-skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hs-skip-link:focus,
.hs-skip-link:focus-visible {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  z-index: var(--z-toast, 1100);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-family: 'Sora', system-ui, sans-serif;
  font-size: var(--font-size-base);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm);
  outline: none;
  box-shadow: var(--focus-ring-shadow);
}
.hs-main:focus-visible { outline: none; }

/* --------------------------------------------------------------------------- *
 * Buttons
 * --------------------------------------------------------------------------- */
.hs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--button-height-lg);
  padding: 0 var(--space-5);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-family: 'Sora', system-ui, sans-serif;
  font-size: var(--font-size-base);
  font-weight: 600;
  letter-spacing: var(--tracking-normal);
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-base),
              border-color var(--transition-base), box-shadow var(--transition-base),
              color var(--transition-base);
}
.hs-btn:active { transform: translateY(1px) scale(0.96); }
.hs-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary);
}
.hs-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.hs-btn i, .hs-btn svg { width: 1.05em; height: 1.05em; }

.hs-btn-primary {
  background: var(--color-primary);
  /* Shared dark-mode contrast token (owned by slides-tokens.css): dark ink on the
     bright teal primary in dark mode. Falls back to the design-tokens on-primary
     if the slides token layer isn't present, so white never sits on bright teal. */
  color: var(--color-on-primary, var(--color-text-on-primary));
  box-shadow: var(--shadow-sm);
}
.hs-btn-primary:hover {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.hs-btn-ghost {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
.hs-btn-ghost:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border-hover);
}

.hs-btn-soft {
  background: var(--color-primary-bg);
  color: var(--color-primary);
}
.hs-btn-soft:hover { background: var(--color-primary-200); }

.hs-btn-lg { height: 3.25rem; padding: 0 var(--space-8); font-size: var(--font-size-md); }
.hs-btn-block { width: 100%; }

.hs-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 600;
  color: var(--color-primary);
  transition: gap var(--transition-base), color var(--transition-base);
}
.hs-link-arrow i, .hs-link-arrow svg { width: 1em; height: 1em; }
.hs-link-arrow:hover { gap: var(--space-3); color: var(--color-primary-hover); }

/* --------------------------------------------------------------------------- *
 * Top navigation (sticky)
 * --------------------------------------------------------------------------- */
.hs-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--color-background) 80%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--color-border);
}
.hs-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  height: 4.25rem;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.hs-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--font-size-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}
.hs-wordmark-text { font-weight: 500; }
.hs-wordmark-text strong { font-weight: 700; }
.hs-wordmark-mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  box-shadow: var(--shadow-sm);
}
.hs-wordmark-mark i, .hs-wordmark-mark svg { width: 1rem; height: 1rem; }
.hs-wordmark-sm { font-size: var(--font-size-md); }
.hs-wordmark-sm .hs-wordmark-mark { width: 1.75rem; height: 1.75rem; }

.hs-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-left: var(--space-4);
}
.hs-nav-links a {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: color var(--transition-base);
}
.hs-nav-links a:hover { color: var(--color-text-primary); }

.hs-nav-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.hs-nav-actions .hs-btn { height: var(--button-height-md); padding: 0 var(--space-4); font-size: var(--font-size-base); }
/* Non-interactive "you are here" marker shown in place of the Open Studio CTA on the Studio page. */
.hs-nav-here {
  display: inline-flex; align-items: center; gap: 7px;
  height: var(--button-height-md); padding: 0 var(--space-4);
  font: 600 var(--font-size-base) var(--font-family-sans); letter-spacing: var(--tracking-tight, -.01em);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  background: var(--color-background-secondary);
}
.hs-nav-here i, .hs-nav-here svg { width: 16px; height: 16px; color: var(--color-text-tertiary); }

.hs-nav-toggle {
  display: none;
  margin-left: auto;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  cursor: pointer;
}
.hs-nav-toggle i, .hs-nav-toggle svg { width: 1.25rem; height: 1.25rem; }
.hs-nav-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); }

.hs-nav-mobile {
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--color-background);
}
.hs-nav-mobile a:not(.hs-btn) {
  padding: var(--space-3) 0;
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--color-text-secondary);
}
.hs-nav-mobile .hs-btn { margin-top: var(--space-2); }

/* --------------------------------------------------------------------------- *
 * Footer
 * --------------------------------------------------------------------------- */
.hs-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-background-secondary);
  padding: var(--space-10) var(--space-6);
}
.hs-footer-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.hs-footer-links {
  display: flex;
  gap: var(--space-6);
}
.hs-footer-links a {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  transition: color var(--transition-base);
}
.hs-footer-links a:hover { color: var(--color-text-primary); }
.hs-footer-by {
  margin-left: auto;
  font-size: var(--font-size-sm);
  /* Secondary: tertiary fails AA on this 13px footer note across every page. */
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------- *
 * Blueprint grid — warm gridlines behind hero / dividers (Linear/Stripe lineage)
 * --------------------------------------------------------------------------- */
.hs-blueprint {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--color-neutral-900) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--color-neutral-900) 6%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}
[data-theme="dark"] .hs-blueprint {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

/* --------------------------------------------------------------------------- *
 * Hero — asymmetric split (copy ~45% left / live product ~55% right)
 * --------------------------------------------------------------------------- */
.hs-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(var(--space-16), 8vw, 7rem) var(--space-6) clamp(var(--space-16), 7vw, var(--space-24, 6rem));
  border-bottom: 1px solid var(--color-border);
}
.hs-hero-glow {
  position: absolute;
  inset: -25% -10% auto auto;
  width: 70%;
  height: 80%;
  pointer-events: none;
  background:
    radial-gradient(46% 60% at 72% 22%, var(--color-primary-100), transparent 70%),
    radial-gradient(40% 52% at 92% 6%, color-mix(in srgb, var(--color-primary-400) 20%, transparent), transparent 72%);
  filter: blur(10px);
  z-index: 0;
}
.hs-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: center;
  gap: clamp(var(--space-8), 4vw, var(--space-16));
}
.hs-hero-copy { max-width: 36rem; }

/* Centered hero variant (pricing / legal) — single column, no product visual. */
.hs-hero-center { padding-bottom: var(--space-8); }
.hs-hero-center .hs-hero-inner {
  grid-template-columns: 1fr;
  max-width: 820px;
  text-align: center;
}
.hs-hero-center .hs-pill { margin: 0 auto; }
.hs-hero-center .hs-hero-sub { margin-inline: auto; max-width: 56ch; }
.hs-hero-center h1 { font-size: clamp(2.5rem, 5vw, var(--font-size-6xl)); }

/* Teal eyebrow pill */
.hs-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3125rem var(--space-3) 0.3125rem var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-primary-bg);
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  color: var(--color-primary);
  font-family: 'Sora', system-ui, sans-serif;
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
}
.hs-pill i, .hs-pill svg { width: 0.95em; height: 0.95em; }
.hs-pill-dot {
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
}
.hs-pill-dot i, .hs-pill-dot svg { width: 0.7rem; height: 0.7rem; display: block; }

.hs-hero h1 {
  margin: var(--space-5) 0 0;
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.75rem, 5.4vw, var(--font-size-7xl));
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
}
.hs-hero h1 .hs-grad {
  background: linear-gradient(100deg, var(--color-primary), var(--color-primary-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hs-hero-sub {
  margin: var(--space-6) 0 0;
  max-width: 52ch;
  font-size: clamp(var(--font-size-md), 1.4vw, var(--font-size-lg));
  line-height: var(--line-height-snug);
  color: var(--color-text-secondary);
}
.hs-hero-cta {
  margin-top: var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.hs-hero-micro {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  font-size: var(--font-size-sm);
  /* Secondary: these hero trust signals sit at tertiary ~4.45:1 on the hero bg,
     just under AA — and must stay legible on the dark theme too. */
  color: var(--color-text-secondary);
}
.hs-hero-micro span { display: inline-flex; align-items: center; gap: var(--space-2); }
/* Neutral ink — teal is reserved for the hero's primary CTA (the one design law),
   so these trust-signal icons stay quiet punctuation, not accent. */
.hs-hero-micro i, .hs-hero-micro svg { width: 0.95em; height: 0.95em; color: var(--color-text-tertiary); }

/* ---- Hero visual — self-running "deck → narrated video" loop ---- */
.hs-hero-visual {
  position: relative;
  z-index: 1;
  justify-self: stretch;
  perspective: 1800px;
}
.hs-hero-visual::before {
  content: "";
  position: absolute;
  inset: 8% -12% -16% 4%;
  z-index: -1;
  background: radial-gradient(60% 60% at 60% 40%, color-mix(in srgb, var(--color-primary) 28%, transparent), transparent 70%);
  filter: blur(48px);
  opacity: 0.55;
  pointer-events: none;
}
.hs-mock {
  position: relative;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  /* Bleed slightly off the right edge per the spec. */
  margin-right: clamp(-4rem, -3vw, -1rem);
  transform: rotateY(-2deg) rotateX(1deg);
  transform-origin: left center;
}
.hs-mock-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-background-secondary);
}
.hs-mock-dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--color-border-hover); }
.hs-mock-label {
  margin-left: var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-tertiary);
}
.hs-mock-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.125rem var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-primary-bg);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
}
.hs-mock-badge i, .hs-mock-badge svg { width: 0.85em; height: 0.85em; }
.hs-mock-body {
  display: grid;
  grid-template-columns: 132px 1fr 188px;
  min-height: 380px;
}
.hs-mock-rail {
  border-right: 1px solid var(--color-border);
  padding: var(--space-3);
  background: var(--color-background-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.hs-mock-thumb {
  position: relative;
  height: 46px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.hs-mock-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--focus-ring-shadow);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}
.hs-mock-thumb.is-active {
  border-color: var(--color-primary);
  animation: hs-rail-cycle 7s var(--ease-standard) infinite;
}
@keyframes hs-rail-cycle {
  0%, 14% { border-color: var(--color-primary); }
  20%, 100% { border-color: var(--color-border); }
}
/* Each rail thumb lights up in turn, mirroring the stage cross-fade. */
.hs-mock-rail .hs-mock-thumb:nth-child(1) { animation: hs-rail-1 7s var(--ease-standard) infinite; }
.hs-mock-rail .hs-mock-thumb:nth-child(2) { animation: hs-rail-2 7s var(--ease-standard) infinite; }
.hs-mock-rail .hs-mock-thumb:nth-child(3) { animation: hs-rail-3 7s var(--ease-standard) infinite; }
@keyframes hs-rail-1 { 0%, 30%, 100% { border-color: var(--color-primary); } 31%, 99% { border-color: var(--color-border); } }
@keyframes hs-rail-2 { 0%, 32% { border-color: var(--color-border); } 33%, 63% { border-color: var(--color-primary); } 64%, 100% { border-color: var(--color-border); } }
@keyframes hs-rail-3 { 0%, 65% { border-color: var(--color-border); } 66%, 96% { border-color: var(--color-primary); } 97%, 100% { border-color: var(--color-border); } }
.hs-mock-thumb-bar {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-border-hover);
}
.hs-mock-thumb-bar.t1 { top: 10px; width: 60%; }
.hs-mock-thumb-bar.t2 { top: 20px; width: 40%; }
.hs-mock-stage {
  position: relative;
  padding: var(--space-5);
  display: grid;
  place-items: center;
  /* Clip the absolutely-positioned cross-fading slides to the stage column so
     they can never bleed into the rail or inspector during the loop. */
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--color-primary-50), transparent 70%),
    var(--color-background);
}
.hs-mock-slide {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  color: #f5f2ed;
  padding: var(--space-6) var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-2);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
/* Three stacked slides cross-fade like a real present run. */
.hs-mock-slide {
  position: absolute;
  inset: var(--space-5);
  /* Override the base width:100% — with left/right insets set, an explicit
     100% width made the slide overflow the stage into the inspector panel. */
  width: auto;
  opacity: 0;
}
.hs-mock-slide.s1 {
  background: linear-gradient(135deg, #0e0d0c, #134e4a);
  animation: hs-slide-1 7s var(--ease-standard) infinite;
}
.hs-mock-slide.s2 {
  background: linear-gradient(135deg, #0f766e, #042f2e);
  animation: hs-slide-2 7s var(--ease-standard) infinite;
}
.hs-mock-slide.s3 {
  background: linear-gradient(135deg, #1a1816, #0f766e);
  animation: hs-slide-3 7s var(--ease-standard) infinite;
}
@keyframes hs-slide-1 { 0%, 28% { opacity: 1; } 33%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hs-slide-2 { 0%, 31% { opacity: 0; } 36%, 61% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes hs-slide-3 { 0%, 64% { opacity: 0; } 69%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
.hs-mock-slide::before {
  content: "";
  position: absolute;
  inset: auto -20% -40% auto;
  width: 56%;
  height: 80%;
  background: radial-gradient(circle, var(--color-primary-400), transparent 65%);
  opacity: 0.45;
}
.hs-mock-eyebrow {
  position: relative;
  font-family: 'Sora', sans-serif;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-primary-400);
}
.hs-mock-title {
  position: relative;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  line-height: 1.05;
  letter-spacing: var(--tracking-tighter);
}
/* The headline of the FIRST slide types in, like the script being written. */
.hs-mock-slide.s1 .hs-mock-title {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--color-primary-400);
  animation: hs-type 7s steps(22, end) infinite, hs-caret 0.7s step-end infinite;
}
@keyframes hs-type {
  0% { max-width: 0; }
  16% { max-width: 100%; }
  28% { max-width: 100%; }
  33%, 100% { max-width: 100%; }
}
@keyframes hs-caret { 50% { border-color: transparent; } }
.hs-mock-line {
  position: relative;
  height: 5px;
  border-radius: var(--radius-full);
  background: rgba(245, 242, 237, 0.18);
}
.hs-mock-line.w-60 { width: 60%; }
.hs-mock-line.w-40 { width: 40%; }
/* Voiceover progress bar across the bottom of the stage slide. */
.hs-mock-vo {
  position: absolute;
  left: var(--space-6);
  right: var(--space-6);
  bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.hs-mock-vo i, .hs-mock-vo svg { width: 0.85rem; height: 0.85rem; color: var(--color-primary-400); flex: 0 0 auto; }
.hs-mock-vo-track {
  position: relative;
  flex: 1;
  height: 4px;
  border-radius: var(--radius-full);
  background: rgba(245, 242, 237, 0.2);
  overflow: hidden;
}
.hs-mock-vo-fill {
  position: absolute;
  inset: 0 100% 0 0;
  border-radius: inherit;
  background: var(--color-primary-400);
  animation: hs-vo 7s linear infinite;
}
@keyframes hs-vo {
  0% { inset: 0 100% 0 0; }
  28% { inset: 0 0 0 0; }
  33% { inset: 0 100% 0 0; }
  61% { inset: 0 0 0 0; }
  66% { inset: 0 100% 0 0; }
  94% { inset: 0 0 0 0; }
  100% { inset: 0 100% 0 0; }
}
.hs-mock-inspector {
  border-left: 1px solid var(--color-border);
  padding: var(--space-4);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.hs-mock-field { display: flex; flex-direction: column; gap: var(--space-2); }
.hs-mock-field-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.hs-mock-input {
  height: 26px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-input-bg);
}
.hs-mock-input.is-typing {
  position: relative;
  overflow: hidden;
}
.hs-mock-input.is-typing::after {
  content: "";
  position: absolute;
  left: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-primary-300);
  animation: hs-fill-line 7s var(--ease-standard) infinite;
}
@keyframes hs-fill-line {
  0% { width: 0; }
  16% { width: 70%; }
  100% { width: 70%; }
}
.hs-mock-swatches { display: flex; gap: var(--space-2); }
.hs-mock-swatch { width: 20px; height: 20px; border-radius: var(--radius-full); border: 1px solid var(--color-border); }
.hs-mock-swatch.is-active { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3.5px var(--color-primary); }
.hs-mock-record {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.hs-mock-record .hs-rec-dot {
  width: 7px; height: 7px; border-radius: var(--radius-full); background: #fff;
  animation: hs-pulse 1.4s var(--ease-standard) infinite;
}

/* --------------------------------------------------------------------------- *
 * Capability strip — honest "what's in the box", not a fabricated logo belt.
 * Neutral/ink chips; teal stays reserved for the primary CTA (the one design law).
 * --------------------------------------------------------------------------- */
.hs-belt {
  padding: var(--space-10) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-background-secondary);
}
.hs-belt-label {
  text-align: center;
  font-size: var(--font-size-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  /* Secondary (not tertiary): tertiary fails AA 4.5:1 for this small caps label
     on the warm secondary background. */
  color: var(--color-text-secondary);
}
.hs-belt-row {
  margin: var(--space-6) auto 0;
  max-width: 960px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) clamp(var(--space-4), 3vw, var(--space-8));
}
.hs-belt-cap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: var(--font-size-base);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}
/* Icons are neutral ink, not teal — the strip is informational, not a CTA. */
.hs-belt-cap i, .hs-belt-cap svg { width: 1.05em; height: 1.05em; color: var(--color-text-tertiary); }

/* --------------------------------------------------------------------------- *
 * Count-up stat band
 * --------------------------------------------------------------------------- */
.hs-stats {
  padding: clamp(var(--space-16), 7vw, var(--space-20)) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.hs-stats-grid {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.hs-stat {
  position: relative;
  text-align: center;
  padding: 0 var(--space-4);
}
.hs-stat:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 12%;
  right: 0;
  height: 76%;
  width: 1px;
  background: var(--color-border);
}
.hs-stat-num {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: clamp(2.25rem, 4.4vw, var(--font-size-5xl));
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--color-text-primary);
}
.hs-stat-num .hs-stat-unit { color: var(--color-primary); }
.hs-stat-label {
  margin-top: var(--space-3);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
}

/* --------------------------------------------------------------------------- *
 * Section header
 * --------------------------------------------------------------------------- */
.hs-sec-head { max-width: 680px; margin: 0 auto var(--space-12); text-align: center; }
.hs-sec-head h2 {
  margin: var(--space-3) 0 0;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: var(--tracking-tighter);
}
.hs-sec-head p {
  margin: var(--space-4) auto 0;
  max-width: 560px;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------- *
 * Use-case cards
 * --------------------------------------------------------------------------- */
.hs-usecases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.hs-usecase {
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-medium), box-shadow var(--transition-medium),
              border-color var(--transition-base);
}
.hs-usecase:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-hover);
}
.hs-usecase-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-lg);
  background: var(--color-primary-bg);
  color: var(--color-primary);
  margin-bottom: var(--space-5);
}
.hs-usecase-icon i, .hs-usecase-icon svg { width: 1.4rem; height: 1.4rem; }
.hs-usecase h3 {
  margin: 0 0 var(--space-2);
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: var(--font-size-xl);
  letter-spacing: var(--tracking-tight);
}
.hs-usecase p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
}

/* --------------------------------------------------------------------------- *
 * How it works (3 step)
 * --------------------------------------------------------------------------- */
.hs-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  counter-reset: hs-step;
}
.hs-step { position: relative; padding-top: var(--space-10); }
.hs-step-num {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.hs-step h3 {
  margin: 0 0 var(--space-2);
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: var(--font-size-xl);
  letter-spacing: var(--tracking-tight);
}
.hs-step p { margin: 0; color: var(--color-text-secondary); line-height: var(--line-height-snug); }
.hs-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--space-10) + 1.375rem);
  left: calc(2.75rem + var(--space-4));
  right: calc(-1 * var(--space-8) + var(--space-4));
  height: 1px;
  background: linear-gradient(90deg, var(--color-border-hover), transparent);
}

/* --------------------------------------------------------------------------- *
 * Feature grid
 * --------------------------------------------------------------------------- */
.hs-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
.hs-feature {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.hs-feature:hover { border-color: var(--color-border-hover); box-shadow: var(--shadow-card-hover); }
.hs-feature-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}
.hs-feature-icon i, .hs-feature-icon svg { width: 1.25rem; height: 1.25rem; }
.hs-feature h3 {
  margin: 0 0 var(--space-1);
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: var(--font-size-lg);
  letter-spacing: var(--tracking-tight);
}
.hs-feature p { margin: 0; font-size: var(--font-size-base); color: var(--color-text-secondary); line-height: var(--line-height-snug); }

/* --------------------------------------------------------------------------- *
 * Chess feature rows — problem-led, alternating copy / live capture
 * --------------------------------------------------------------------------- */
.hs-chess {
  background: var(--color-background-secondary);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.hs-chess-row {
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(var(--space-16), 7vw, var(--space-24, 6rem)) var(--space-6);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
}
.hs-chess-row + .hs-chess-row { border-top: 1px solid var(--color-border); }
/* Alternate: even rows put the visual on the left. */
.hs-chess-row.is-flip .hs-chess-copy { order: 2; }
.hs-chess-row.is-flip .hs-chess-visual { order: 1; }
.hs-chess-problem {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: 'Sora', sans-serif;
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  /* Secondary: tertiary fails AA 4.5:1 for this 13px problem-eyebrow. */
  color: var(--color-text-secondary);
}
.hs-chess-problem i, .hs-chess-problem svg { width: 1em; height: 1em; }
.hs-chess-copy h3 {
  margin: var(--space-4) 0 0;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: clamp(var(--font-size-2xl), 3.4vw, var(--font-size-4xl));
  line-height: 1.08;
  letter-spacing: var(--tracking-tighter);
}
.hs-chess-copy p {
  margin: var(--space-4) 0 0;
  max-width: 46ch;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  color: var(--color-text-secondary);
}
.hs-chess-list {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.hs-chess-list li {
  display: flex;
  gap: var(--space-3);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
}
/* Neutral check ink — a column of teal checks down every feature row floods the
   page and competes with the hero/CTA teal (the one action that matters). Teal
   stays on the section's primary actions, not on confirmation glyphs. */
.hs-chess-list li i, .hs-chess-list li svg {
  flex: 0 0 auto;
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.15em;
  color: var(--color-text-tertiary);
}
.hs-chess-cta { margin-top: var(--space-6); }

/* Live capture frame — reuses the browser-chrome mock language */
.hs-frame {
  position: relative;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hs-frame-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-background-secondary);
}
.hs-frame-dot { width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--color-border-hover); }
.hs-frame-label {
  margin-left: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 500;
  /* Secondary: this 11px chrome label fails AA at tertiary on the secondary bg. */
  color: var(--color-text-secondary);
}
.hs-frame-body { padding: var(--space-6); }

/* ---- Live light↔dark deck toggle (our ownable demo) ---- */
.hs-deckdemo {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.hs-deckdemo-slide {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-2);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: background var(--duration-emphasized) var(--ease-emphasized),
              color var(--duration-emphasized) var(--ease-emphasized);
  /* Light theme (default) */
  background: linear-gradient(135deg, #faf9f7, #ece9e4);
  color: #1a1816;
}
.hs-deckdemo.is-dark .hs-deckdemo-slide {
  background: linear-gradient(135deg, #0e0d0c, #134e4a);
  color: #f5f2ed;
}
.hs-deckdemo-slide::before {
  content: "";
  position: absolute;
  inset: auto -16% -36% auto;
  width: 50%;
  height: 70%;
  background: radial-gradient(circle, var(--color-primary), transparent 65%);
  opacity: 0.22;
  transition: opacity var(--duration-emphasized) var(--ease-emphasized);
}
.hs-deckdemo.is-dark .hs-deckdemo-slide::before { opacity: 0.42; }
.hs-deckdemo-eyebrow {
  position: relative;
  font-family: 'Sora', sans-serif;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-primary);
}
.hs-deckdemo.is-dark .hs-deckdemo-eyebrow { color: var(--color-primary-400); }
.hs-deckdemo-title {
  position: relative;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  line-height: 1.04;
  letter-spacing: var(--tracking-tighter);
}
.hs-deckdemo-line {
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  opacity: 0.16;
}
.hs-deckdemo-line.w-60 { width: 60%; }
.hs-deckdemo-line.w-40 { width: 40%; }
/* Segmented light/dark control */
.hs-seg {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-background-secondary);
}
.hs-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--button-height-md);
  padding: 0 var(--space-4);
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: 'Sora', sans-serif;
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}
.hs-seg-btn i, .hs-seg-btn svg { width: 1em; height: 1em; }
.hs-seg-btn:hover { color: var(--color-text-primary); }
.hs-seg-btn:active { transform: scale(0.96); }
.hs-seg-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary); }
.hs-seg-btn.is-active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------- *
 * Deep-teal spotlight band (used sparingly — once)
 * --------------------------------------------------------------------------- */
.hs-spotlight {
  position: relative;
  overflow: hidden;
  padding: clamp(var(--space-20), 9vw, 8rem) var(--space-6);
  background: linear-gradient(150deg, #0e0d0c 0%, #0f3b38 55%, #115e59 100%);
  color: #f5f2ed;
}
.hs-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(245, 242, 237, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(245, 242, 237, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(110% 80% at 80% 30%, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(110% 80% at 80% 30%, #000 20%, transparent 70%);
}
.hs-spotlight::after {
  content: "";
  position: absolute;
  inset: -30% -10% auto auto;
  width: 55%;
  height: 120%;
  background: radial-gradient(circle, var(--color-primary-400), transparent 62%);
  opacity: 0.32;
  pointer-events: none;
}
.hs-spotlight-inner {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
}
.hs-spotlight .hs-pill {
  background: rgba(245, 242, 237, 0.1);
  border-color: rgba(245, 242, 237, 0.22);
  /* AA: #5eead4 measured only 4.08:1 on the pill's translucent fill composited
     over the lightest end of the spotlight gradient (#115e59) — under AA for
     this 14px/600 label. #ccfbf1 (teal-100) → 5.36:1 there, AA across the whole
     gradient, and still clearly brand-teal. */
  color: #ccfbf1;
}
.hs-spotlight .hs-pill-dot { background: #2dd4bf; color: #042f2e; }
.hs-spotlight h2 {
  margin: var(--space-5) 0 0;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4.6vw, var(--font-size-5xl));
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
}
.hs-spotlight p {
  margin: var(--space-5) 0 0;
  max-width: 48ch;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  color: rgba(245, 242, 237, 0.78);
}
.hs-spotlight .hs-hero-cta { margin-top: var(--space-8); justify-content: flex-start; }
.hs-spotlight .hs-btn-ghost {
  color: #f5f2ed;
  border-color: rgba(245, 242, 237, 0.28);
  background: transparent;
}
.hs-spotlight .hs-btn-ghost:hover { background: rgba(245, 242, 237, 0.08); border-color: rgba(245, 242, 237, 0.45); }
/* Scroll-scrubbed transformation: prompt → finished frame. Driven by a single
   var(--scrub) the IntersectionObserver/scroll handler sets 0→1. */
.hs-scrub {
  position: relative;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(245, 242, 237, 0.16);
  background: rgba(14, 13, 12, 0.5);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  --scrub: 0;
}
.hs-scrub-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(245, 242, 237, 0.14);
  background: rgba(245, 242, 237, 0.04);
}
.hs-scrub-bar .hs-frame-dot { background: rgba(245, 242, 237, 0.28); }
.hs-scrub-bar .hs-frame-label { color: rgba(245, 242, 237, 0.6); }
.hs-scrub-body { position: relative; aspect-ratio: 16 / 9; }
/* Prompt layer fades out as the rendered frame fades in. */
.hs-scrub-prompt,
.hs-scrub-frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-8);
}
.hs-scrub-prompt {
  gap: var(--space-3);
  /* Fades fully out by the scrub midpoint so it never collides with the
     incoming (opaque-backed) frame; only one layer is substantially visible. */
  opacity: calc(1.2 - var(--scrub) * 2);
}
.hs-scrub-prompt-label {
  font-family: 'Sora', sans-serif;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: #5eead4;
}
.hs-scrub-prompt-text {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  color: rgba(245, 242, 237, 0.86);
}
.hs-scrub-frame {
  justify-content: flex-end;
  gap: var(--space-2);
  background: linear-gradient(135deg, #0f766e, #042f2e);
  /* Arrives only after the prompt has faded (window starts at scrub 0.4),
     so the two layers never sit at high opacity together. */
  opacity: calc(var(--scrub) * 2 - 0.8);
  transform: scale(calc(0.96 + 0.04 * var(--scrub)));
}
/* AA: #5eead4 fell to 3.70:1 over the lighter #0f766e end of the scrub-frame
   gradient — under AA for this 12px/700 eyebrow. #ccfbf1 (teal-100) → 4.86:1
   over #0f766e (AA) and far higher over the darker #042f2e end. */
.hs-scrub-frame .hs-deckdemo-eyebrow { color: #ccfbf1; }
.hs-scrub-frame .hs-deckdemo-title { color: #f5f2ed; }
.hs-scrub-frame .hs-deckdemo-line { background: #f5f2ed; }

/* --------------------------------------------------------------------------- *
 * Scroll reveal (IntersectionObserver toggles .is-in)
 * --------------------------------------------------------------------------- */
.hs-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.hs-reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------- *
 * Closing CTA band
 * --------------------------------------------------------------------------- */
.hs-cta-band { padding: var(--space-12) var(--space-6) var(--space-20); }
.hs-cta-card {
  position: relative;
  overflow: hidden;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(var(--space-12), 7vw, var(--space-20)) var(--space-8);
  border-radius: var(--radius-3xl);
  text-align: center;
  background: linear-gradient(135deg, #0e0d0c, #115e59);
  color: #f5f2ed;
  box-shadow: var(--shadow-2xl);
}
.hs-cta-card::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 60%;
  height: 120%;
  background: radial-gradient(circle, var(--color-primary-400), transparent 60%);
  opacity: 0.35;
  pointer-events: none;
}
.hs-cta-card h2 {
  position: relative;
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: var(--tracking-tighter);
}
.hs-cta-card p {
  position: relative;
  margin: var(--space-5) auto 0;
  max-width: 520px;
  font-size: var(--font-size-lg);
  color: rgba(245, 242, 237, 0.78);
}
.hs-cta-card .hs-hero-cta { margin-top: var(--space-8); }
.hs-cta-card .hs-btn-ghost {
  color: #f5f2ed;
  border-color: rgba(245, 242, 237, 0.28);
  background: transparent;
}
.hs-cta-card .hs-btn-ghost:hover { background: rgba(245, 242, 237, 0.08); border-color: rgba(245, 242, 237, 0.45); }

/* --------------------------------------------------------------------------- *
 * Pricing table
 * --------------------------------------------------------------------------- */
.hs-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  align-items: stretch;
}
.hs-plan {
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-medium), box-shadow var(--transition-medium),
              border-color var(--transition-base);
}
.hs-plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--color-border-hover); }
/* The recommended tier sits proud of the row — teal ring + a small upward lift +
   a faint accent-tinted surface so it's unmistakable at a glance, without
   flooding the card in teal paint. The wash is ~6% primary over the surface:
   enough to anchor the row's gaze, quiet enough that teal stays punctuation. */
.hs-plan.is-featured {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-xl);
  transform: translateY(-8px);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)),
      var(--color-surface) 38%);
}
.hs-plan.is-featured:hover { border-color: var(--color-primary); transform: translateY(-11px); }
/* Badge + spacer share one fixed height so every card's name/price/features
   align on the same baseline regardless of which tier is featured. */
.hs-plan-badge,
.hs-plan-badge-spacer {
  display: block;
  height: 1.5rem;
  margin-bottom: var(--space-4);
}
.hs-plan-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}
.hs-plan-name {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: var(--font-size-xl);
  letter-spacing: var(--tracking-tight);
}
.hs-plan-price {
  margin: var(--space-4) 0 var(--space-1);
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: var(--font-size-4xl);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
}
.hs-plan-price .hs-plan-per {
  font-size: var(--font-size-base);
  font-weight: 500;
  /* Secondary: tertiary measured 4.27:1 on the dark card surface (under AA). */
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-normal);
}
.hs-plan-credits {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}
.hs-plan-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-background-secondary);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.hs-plan-meta i, .hs-plan-meta svg { width: 0.95em; height: 0.95em; color: var(--color-text-tertiary); }
.hs-plan-feats {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.hs-plan-feats li {
  display: flex;
  gap: var(--space-3);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
}
/* Neutral check ink — a column of teal checks on every card floods the page and
   competes with the one primary CTA. Teal is reserved for the featured plan's
   "Most popular" badge + its primary button. The credit-gated AI line uses a
   warning glyph so the one caveat reads as a caveat, not a benefit. */
.hs-plan-feats li i, .hs-plan-feats li svg {
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  margin-top: 0.15em;
  color: var(--color-text-tertiary);
}
/* The one caveat on the Free card (AI is credit-gated) reads as a caveat via a
   warn-tinted glyph. References the shared --color-warning-text token (owned by
   the editor's tokens layer): a readable amber on light, a brightened amber that
   clears AA on dark surfaces — the old #d9890b fallback was only ~2.8:1 on white. */
.hs-plan-feats li.is-credit-gated i, .hs-plan-feats li.is-credit-gated svg { color: var(--color-warning-text, var(--color-warning)); }
.hs-plan-cta { margin-top: auto; }

.hs-pricing-note {
  max-width: 720px;
  margin: var(--space-10) auto 0;
  text-align: center;
  font-size: var(--font-size-base);
  /* Secondary: tertiary measured 4.38:1 (just under AA) on the page bg. */
  color: var(--color-text-secondary);
}
.hs-pricing-note strong { color: var(--color-text-secondary); font-weight: 600; }

/* --------------------------------------------------------------------------- *
 * Dashboard cards (deck gallery)
 * --------------------------------------------------------------------------- */
.hs-dash-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}
.hs-dash-head h1 {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: var(--font-size-3xl);
  line-height: 1.05;
  letter-spacing: var(--tracking-tighter);
}
.hs-dash-sub {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
}

.hs-dash-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-20) var(--space-4);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-base);
}

/* Skeleton loading cards — shape-match the real deck cards so the grid
   doesn't reflow when decks arrive. Shimmer is token-driven. */
.hs-skel-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.hs-skel-thumb { aspect-ratio: 16 / 9; }
.hs-skel-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}
.hs-skel-line { height: 0.75rem; border-radius: var(--radius-full); }
.hs-skel-line.w-70 { width: 70%; }
.hs-skel-line.w-40 { width: 40%; }
.hs-skel-thumb, .hs-skel-line {
  background: linear-gradient(
    100deg,
    var(--color-background-secondary) 30%,
    var(--color-background-tertiary) 50%,
    var(--color-background-secondary) 70%
  );
  background-size: 200% 100%;
  animation: hs-shimmer 1.4s var(--ease-standard) infinite;
}
@keyframes hs-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.hs-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
  gap: var(--space-5);
}
.hs-deck-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--transition-medium), box-shadow var(--transition-medium),
              border-color var(--transition-base);
}
.hs-deck-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-hover);
}
.hs-deck-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary), var(--shadow-lg);
  border-color: var(--color-primary);
}
.hs-deck-card:active { transform: translateY(-1px) scale(0.995); }
/* Optimistic / generating card — visible but not yet navigable. */
.hs-deck-card.is-pending {
  cursor: default;
  pointer-events: none;
  animation: hs-card-in var(--duration-emphasized) var(--ease-out);
}
.hs-deck-card.is-pending:hover { transform: none; box-shadow: var(--shadow-card); }
.hs-deck-thumb-spinner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: rgba(14, 13, 12, 0.28);
}
.hs-deck-thumb-spinner .hs-spinner {
  border-color: rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
}
@keyframes hs-card-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.hs-deck-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--color-background-tertiary), var(--color-background-secondary));
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
  color: #fff;
  overflow: hidden;
}
.hs-deck-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(14, 13, 12, 0.42));
  pointer-events: none;
}
.hs-deck-thumb-label {
  position: relative;
  z-index: 1;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: var(--font-size-md);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hs-deck-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5) var(--space-5);
}
.hs-deck-title {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: var(--font-size-md);
  letter-spacing: var(--tracking-tight);
  line-height: 1.25;
  margin: 0;
  color: var(--color-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hs-deck-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  /* Secondary: tertiary clears AA on the light card (4.62:1) but fails on the
     dark card surface (4.27:1). Secondary reads on both. */
  color: var(--color-text-secondary);
}
.hs-deck-meta-dot { color: var(--color-border-hover); }
.hs-deck-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.1875rem var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
}
.hs-deck-status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
}
.hs-deck-status.is-ready { background: var(--color-success-bg); color: var(--color-success-text); }
.hs-deck-status.is-generating { background: var(--color-info-bg); color: var(--color-info-text); }
.hs-deck-status.is-error { background: var(--color-error-bg); color: var(--color-error-text); }
.hs-deck-status.is-draft { background: var(--color-background-secondary); color: var(--color-text-secondary); }
/* Label text uses AA-safe --color-info-text (4.75:1 light / 6.39:1 dark);
   the 6px dot is graphical (3:1) so it keeps the vivid --color-info. */
.hs-deck-status.is-generating .hs-deck-status-dot { background: var(--color-info); animation: hs-pulse 1.4s var(--ease-standard) infinite; }
@keyframes hs-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.hs-deck-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-1);
  min-height: 100%;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1.5px dashed var(--color-border-hover);
  background: var(--color-background-secondary);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: border-color var(--transition-base), color var(--transition-base),
              background var(--transition-base), transform var(--transition-medium);
}
/* Quiet neutral lift on hover — a card-sized teal wash competes with real CTAs.
   Teal stays on the icon only; the border firms up to ink-hover, not primary. */
.hs-deck-new:hover {
  border-color: var(--color-border-hover);
  color: var(--color-text-primary);
  background: var(--color-surface);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}
.hs-deck-new:focus-visible {
  outline: none;
  border-style: solid;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary);
}
.hs-deck-new-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-base);
}
.hs-deck-new:hover .hs-deck-new-icon { transform: scale(1.06); }
.hs-deck-new-icon i, .hs-deck-new-icon svg { width: 1.4rem; height: 1.4rem; }
.hs-deck-new-label {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: var(--font-size-md);
}
.hs-deck-new-hint {
  font-size: var(--font-size-sm);
  /* Secondary: tertiary fails AA on this 13px hint over the dashed tile bg. */
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------- *
 * First-run onboarding — prompt box + starter gallery + primary action.
 * Replaces the old empty-state "void": there's always something to do here.
 * --------------------------------------------------------------------------- */
.hs-onboard {
  max-width: 760px;
  margin: var(--space-6) auto 0;
  text-align: center;
}
.hs-onboard-head { margin-bottom: var(--space-8); }
.hs-onboard-head .hs-pill { margin: 0 auto var(--space-5); }
.hs-onboard-head h2 {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: clamp(var(--font-size-2xl), 3.4vw, var(--font-size-4xl));
  line-height: 1.1;
  letter-spacing: var(--tracking-tighter);
}
.hs-onboard-head p {
  margin: var(--space-4) auto 0;
  max-width: 52ch;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  color: var(--color-text-secondary);
}

/* Inline prompt — the primary action. Teal lives on the Generate button only. */
.hs-onboard-prompt {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}
.hs-onboard-prompt .hs-textarea { min-height: 96px; }
.hs-onboard-prompt .hs-btn { align-self: stretch; }

.hs-onboard-galtitle {
  margin: var(--space-10) 0 var(--space-4);
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: var(--font-size-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.hs-onboard-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  text-align: left;
}
.hs-starter {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition-medium), box-shadow var(--transition-medium),
              border-color var(--transition-base);
}
.hs-starter:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-hover);
}
.hs-starter:active { transform: translateY(-1px) scale(0.995); }
.hs-starter:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary), var(--shadow-lg);
}
/* Tiny neutral-ink slide mock — distinct per intent, never teal-flooded. */
.hs-starter-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  aspect-ratio: 16 / 9;
  padding: var(--space-4);
  background: linear-gradient(150deg, hsl(35, 14%, 18%), hsl(30, 12%, 11%));
  border-bottom: 2px solid var(--color-border);
}
/* Three neutral-ink mocks, each shaped like its own slide archetype so the
   gallery reads as three distinct starting points — not three clones. The
   distinction is composition (title width, alignment, a stat block), never
   colour, so it stays quiet ink and never a teal wall. */
.hs-starter-eyebrow {
  width: 28%;
  height: 5px;
  border-radius: var(--radius-full);
  background: rgba(245, 242, 237, 0.55);
}
.hs-starter-title-bar {
  width: 70%;
  height: 9px;
  border-radius: var(--radius-full);
  background: rgba(245, 242, 237, 0.85);
}
.hs-starter-line {
  height: 4px;
  border-radius: var(--radius-full);
  background: rgba(245, 242, 237, 0.22);
}
.hs-starter-line.w-60 { width: 60%; }
.hs-starter-line.w-40 { width: 40%; }

/* Product demo → split-media: a media panel sits on the right, copy bottom-left. */
.hs-starter-preview.is-demo::after {
  content: "";
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 34%;
  bottom: 44%;
  border-radius: var(--radius-xs);
  background: rgba(245, 242, 237, 0.12);
  border: 1px solid rgba(245, 242, 237, 0.16);
}
.hs-starter-preview.is-demo .hs-starter-title-bar { width: 58%; }

/* Explainer → centered, calm agenda: everything centre-aligned, slimmer title. */
.hs-starter-preview.is-edu { align-items: center; text-align: center; }
.hs-starter-preview.is-edu .hs-starter-eyebrow { width: 22%; }
.hs-starter-preview.is-edu .hs-starter-title-bar { width: 60%; }

/* Pitch → big-stat moment: an oversized number block anchors the slide. */
.hs-starter-preview.is-pitch::after {
  content: "";
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  width: 30%;
  height: 30%;
  border-radius: var(--radius-sm);
  background: rgba(245, 242, 237, 0.16);
}
.hs-starter-preview.is-pitch .hs-starter-eyebrow { width: 34%; }
.hs-starter-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4) var(--space-4) var(--space-5);
}
.hs-starter-name {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: var(--font-size-md);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}
.hs-starter-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
}

/* Secondary on-ramps — quiet text buttons, no teal. */
.hs-onboard-alt {
  margin-top: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.hs-onboard-altlink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: 'Sora', sans-serif;
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition: color var(--transition-base);
}
.hs-onboard-altlink i, .hs-onboard-altlink svg { width: 1em; height: 1em; }
.hs-onboard-altlink:hover { color: var(--color-text-primary); }
.hs-onboard-altlink:focus-visible {
  outline: none;
  color: var(--color-text-primary);
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-primary);
}
.hs-onboard-altsep { color: var(--color-border-hover); }

@media (max-width: 680px) {
  .hs-onboard-gallery { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------- *
 * Spinner
 * --------------------------------------------------------------------------- */
.hs-spinner {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 2px solid var(--color-primary-200);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: hs-spin 0.7s linear infinite;
}
.hs-spinner-lg { width: 26px; height: 26px; border-width: 2.5px; }
@keyframes hs-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------- *
 * Modal
 * --------------------------------------------------------------------------- */
.hs-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-backdrop);
  background: rgba(14, 13, 12, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  padding: var(--space-6);
}
.hs-modal {
  z-index: var(--z-modal);
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - var(--space-12));
  overflow-y: auto;
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-2xl);
  padding: var(--space-8);
}
/* Backdrop fade (Alpine x-transition utility classes) */
.hs-fade-enter { transition: opacity var(--duration-base) var(--ease-out); }
.hs-fade-leave { transition: opacity var(--duration-base) var(--ease-in); }
.hs-fade-start { opacity: 0; }
.hs-fade-end { opacity: 1; }

/* Modal scale-in/out (Alpine x-transition utility classes) */
.hs-modal-enter { transition: opacity var(--duration-emphasized) var(--ease-emphasized), transform var(--duration-emphasized) var(--ease-emphasized); }
.hs-modal-leave { transition: opacity var(--duration-base) var(--ease-in), transform var(--duration-base) var(--ease-in); }
.hs-modal-enter-start { opacity: 0; transform: translateY(8px) scale(0.98); }
.hs-modal-enter-end { opacity: 1; transform: translateY(0) scale(1); }

/* Cross-step content shifts feel intentional, not jumpy. */
.hs-modal > div { animation: hs-step-in var(--duration-base) var(--ease-out); }
@keyframes hs-step-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.hs-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.hs-modal-head-titles {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.hs-modal-back {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-top: 0.125rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base),
              border-color var(--transition-base), transform var(--transition-fast);
}
.hs-modal-back:hover { background: var(--color-surface-hover); color: var(--color-text-primary); border-color: var(--color-border-hover); }
.hs-modal-back:active { transform: scale(0.94); }
.hs-modal-back:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary); }
.hs-modal-back i, .hs-modal-back svg { width: 1rem; height: 1rem; }

/* Step 1 — "how do you want to start" choice cards */
.hs-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.hs-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-base), background var(--transition-base),
              box-shadow var(--transition-base), transform var(--transition-medium);
}
.hs-choice:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.hs-choice:active { transform: translateY(0) scale(0.99); }
.hs-choice:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary); }
.hs-choice-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--color-background-secondary);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
  transition: background var(--transition-base), color var(--transition-base);
}
.hs-choice.is-accent .hs-choice-icon { background: var(--color-primary-bg); color: var(--color-primary); }
.hs-choice:hover .hs-choice-icon { background: var(--color-primary-bg); color: var(--color-primary); }
.hs-choice-icon i, .hs-choice-icon svg { width: 1.25rem; height: 1.25rem; }
.hs-choice-title {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: var(--font-size-md);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}
.hs-choice-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
}

/* Optional-field tag next to a label */
.hs-field-opt {
  margin-left: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 500;
  /* Secondary: tertiary fails AA on the dark modal surface (4.27:1). */
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-wide);
}

/* Aspect-ratio picker (blank deck) */
.hs-aspect-row { display: flex; gap: var(--space-3); }
.hs-aspect {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--transition-base), background var(--transition-base),
              transform var(--transition-fast), box-shadow var(--transition-base);
}
.hs-aspect:hover { border-color: var(--color-border-hover); }
.hs-aspect:active { transform: scale(0.98); }
.hs-aspect:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary); }
.hs-aspect.is-active { border-color: var(--color-primary); background: var(--color-primary-50); }
.hs-aspect-box {
  flex: 0 0 auto;
  border-radius: var(--radius-xs);
  border: 1.5px solid var(--color-border-hover);
  background: var(--color-background-secondary);
}
.hs-aspect.is-active .hs-aspect-box { border-color: var(--color-primary); background: var(--color-primary-bg); }
.hs-aspect-box.is-wide { width: 2rem; height: 1.125rem; }
.hs-aspect-box.is-tall { width: 1.125rem; height: 2rem; }
.hs-aspect-label {
  display: flex;
  flex-direction: column;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: 1.2;
}
.hs-aspect-hint {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--font-size-xs);
  /* Secondary: tertiary fails AA on the dark modal surface (4.27:1). */
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-wide);
}

/* Auto chip — icon + label, wider than a numeric chip */
.hs-chip-auto {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-left: var(--space-3);
  padding-right: var(--space-4);
}
.hs-chip-auto i, .hs-chip-auto svg { width: 0.95em; height: 0.95em; }
.hs-modal-head h2 {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: var(--font-size-2xl);
  letter-spacing: var(--tracking-tight);
}
.hs-modal-sub {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.hs-modal-generating {
  text-align: center;
  padding: var(--space-10) var(--space-4) var(--space-8);
}
.hs-modal-generating .hs-spinner { margin: 0 auto var(--space-5); }
.hs-modal-generating h2 {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: var(--font-size-lg);
  letter-spacing: var(--tracking-tight);
}
.hs-modal-generating p {
  margin: var(--space-2) auto 0;
  max-width: 320px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
}

/* Modal form layout */
.hs-form-row { margin-bottom: var(--space-5); }
.hs-form-row:last-of-type { margin-bottom: 0; }
.hs-field-hint { font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* Native select with chevron */
.hs-select-wrap { position: relative; }
.hs-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-10);
  cursor: pointer;
}
.hs-select-caret {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  width: 1.05rem;
  height: 1.05rem;
  color: var(--color-text-tertiary);
  pointer-events: none;
}

/* Slide-count chips */
.hs-chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hs-chip {
  min-width: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-family: 'Sora', sans-serif;
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition-base), background var(--transition-base),
              color var(--transition-base), transform var(--transition-fast);
}
.hs-chip:hover { border-color: var(--color-border-hover); color: var(--color-text-primary); }
.hs-chip:active { transform: scale(0.96); }
.hs-chip.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}
.hs-chip:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary); }

/* Theme swatches */
.hs-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
.hs-theme-swatch {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-base), transform var(--transition-fast),
              box-shadow var(--transition-base);
}
.hs-theme-swatch:hover { transform: translateY(-2px); border-color: var(--color-border-hover); box-shadow: var(--shadow-sm); }
.hs-theme-swatch.is-active { border-color: var(--color-primary); box-shadow: var(--focus-ring-shadow); }
.hs-theme-swatch:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary); }
.hs-theme-chips { display: flex; gap: var(--space-1); }
.hs-theme-chip { width: 18px; height: 18px; border-radius: var(--radius-xs); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); }
.hs-theme-name {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
}

/* Inline alert (errors) */
.hs-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-error-border);
  background: var(--color-error-bg);
  color: var(--color-error-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
}
.hs-alert i, .hs-alert svg { flex: 0 0 auto; width: 1.05em; height: 1.05em; margin-top: 0.1em; }
.hs-alert-link { margin-left: var(--space-1); font-weight: 600; text-decoration: underline; }
.hs-modal-close {
  position: relative;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}
.hs-modal-close:hover { background: var(--color-surface-hover); color: var(--color-text-primary); }
.hs-modal-close:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); }
.hs-modal-close i, .hs-modal-close svg { width: 1.1rem; height: 1.1rem; }
/* Transparent hit-extender: grows the 32px visible box to a 40x40 click target. */
.hs-modal-back::before, .hs-modal-close::before { content: ""; position: absolute; inset: -4px; }
.hs-field-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
}
.hs-input, .hs-textarea, .hs-select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-input-bg);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-base);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.hs-textarea { min-height: 110px; resize: vertical; line-height: var(--line-height-snug); }
.hs-input:focus, .hs-textarea:focus, .hs-select:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary);
}
.hs-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Collapsible "Options" group inside the AI-generate modal — keeps the modal to
   Prompt + Generate by default, with Intent/Slides/Theme tucked away. Mirrors the
   editor's Sources disclosure. */
.hs-form-disclosure { margin-top: var(--space-5); border-top: 1px solid var(--color-border); }
.hs-form-disclosure-summary {
  display: flex; align-items: center; gap: var(--space-2); cursor: pointer; list-style: none;
  padding-top: var(--space-4); min-height: 28px; user-select: none;
  font: 600 var(--font-size-sm) var(--font-family-sans); color: var(--color-text-secondary);
}
.hs-form-disclosure-summary::-webkit-details-marker { display: none; }
.hs-form-disclosure-summary > i:first-child, .hs-form-disclosure-summary > svg:first-child { width: 15px; height: 15px; color: var(--color-text-tertiary); }
.hs-form-disclosure-chevron {
  margin-left: auto; width: 16px; height: 16px; color: var(--color-text-tertiary);
  transition: transform var(--transition-fast);
}
.hs-form-disclosure[open] .hs-form-disclosure-chevron { transform: rotate(180deg); }
.hs-form-disclosure-body { padding-top: var(--space-4); }
.hs-form-disclosure-body .hs-form-row:last-of-type { margin-bottom: 0; }

/* --------------------------------------------------------------------------- *
 * Responsive
 * --------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .hs-hero-inner { grid-template-columns: 1fr; gap: var(--space-12); text-align: center; }
  .hs-hero-copy { max-width: 40rem; margin: 0 auto; }
  .hs-hero-sub { margin-inline: auto; }
  .hs-hero-cta, .hs-hero-micro { justify-content: center; }
  .hs-mock { transform: none; margin-right: 0; }
  .hs-hero-glow { inset: -25% -10% auto -10%; width: auto; }
  .hs-spotlight-inner { grid-template-columns: 1fr; gap: var(--space-12); }
  .hs-spotlight .hs-hero-cta { justify-content: center; }
  .hs-chess-row { grid-template-columns: 1fr; gap: var(--space-8); }
  .hs-chess-row.is-flip .hs-chess-copy { order: 1; }
  .hs-chess-row.is-flip .hs-chess-visual { order: 2; }
}

@media (max-width: 920px) {
  .hs-pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .hs-usecases, .hs-steps { grid-template-columns: 1fr; gap: var(--space-6); }
  .hs-step:not(:last-child)::after { display: none; }
  .hs-features { grid-template-columns: 1fr; }
  .hs-mock-body { grid-template-columns: 1fr; min-height: 0; }
  .hs-mock-rail { flex-direction: row; border-right: none; border-bottom: 1px solid var(--color-border); }
  .hs-mock-thumb { flex: 1; }
  .hs-mock-inspector { border-left: none; border-top: 1px solid var(--color-border); }
  .hs-mock-slide { position: relative; inset: auto; }
  .hs-mock-slide.s2, .hs-mock-slide.s3 { display: none; }
  .hs-mock-slide.s1 { opacity: 1; animation: none; }
  .hs-mock-slide.s1 .hs-mock-title { animation: none; max-width: 100%; border-right: none; }
  .hs-stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-10) var(--space-6); }
  .hs-stat:nth-child(2)::after { display: none; }
}

@media (max-width: 480px) {
  .hs-stats-grid { grid-template-columns: 1fr; }
  .hs-stat::after { display: none !important; }
  .hs-stat:not(:last-child) { padding-bottom: var(--space-8); border-bottom: 1px solid var(--color-border); }
}

/* --------------------------------------------------------------------------- *
 * Reduced motion — hold every self-running loop on a static, finished frame.
 * --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hs-mock-slide.s1,
  .hs-mock-slide.s2,
  .hs-mock-slide.s3,
  .hs-mock-thumb,
  .hs-mock-vo-fill,
  .hs-mock-input.is-typing::after,
  .hs-mock-rail .hs-mock-thumb,
  .hs-deck-status.is-generating .hs-deck-status-dot,
  .hs-mock-record .hs-rec-dot {
    animation: none !important;
  }
  .hs-mock-slide.s1 { opacity: 1; }
  .hs-mock-slide.s2, .hs-mock-slide.s3 { opacity: 0; }
  .hs-mock-slide.s1 .hs-mock-title { border-right: none; max-width: 100%; }
  .hs-mock-vo-fill { inset: 0 30% 0 0; }
  .hs-mock-input.is-typing::after { width: 70%; }
  .hs-mock-thumb.is-active { border-color: var(--color-primary); }
  .hs-reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 760px) {
  .hs-section { padding: var(--space-16) var(--space-5); }
  .hs-nav-links { display: none; }
  .hs-nav-actions { display: none; }
  .hs-nav-toggle { display: inline-flex; }
  .hs-nav-mobile { display: flex; }
  .hs-pricing-grid { grid-template-columns: 1fr; }
  /* Single column — no cross-card baseline to hold, so drop the empty badge slot. */
  .hs-plan-badge-spacer { display: none; }
  /* Stacked — the featured lift would read as a misaligned gap, so flatten it
     (the teal ring + badge already mark the recommended tier). */
  .hs-plan.is-featured, .hs-plan.is-featured:hover { transform: none; }
  .hs-footer-inner { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .hs-footer-by { margin-left: 0; }
}

/* ===========================================================================
   WORKSPACE CHROME + DASHBOARD WORKSPACE
   Product chrome for the signed-in dashboard (base.html renders these on the
   slides.dashboard endpoint only). Not marketing: compact in-app nav, a credit
   balance chip (mirrors the editor's), a current-plan badge, plus a slim usage
   strip and the API-keys panel on the dashboard body.
   =========================================================================== */

/* Compact workspace nav links — current item gets primary text + a teal underline. */
.hs-ws-nav a { position: relative; }
.hs-ws-nav a.is-current { color: var(--color-text-primary); font-weight: 600; }
.hs-ws-nav a.is-current::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1.3rem; height: 2px;
  background: var(--color-primary); border-radius: var(--radius-full);
}
.hs-ws-nav a:focus-visible {
  outline: none; border-radius: var(--radius-sm);
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-primary);
}

.hs-ws-actions { gap: var(--space-2); }

/* Current-plan badge — quiet hairline pill for free, teal-tinted for paid. */
.hs-ws-plan {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 36px; padding: 0 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-secondary);
  font: 600 var(--font-size-sm) var(--font-family-sans); letter-spacing: var(--tracking-normal);
}
.hs-ws-plan i, .hs-ws-plan svg { width: 14px; height: 14px; flex: none; color: var(--color-text-tertiary); }
.hs-ws-plan__name { color: var(--color-text-primary); }
.hs-ws-plan.is-paid {
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  background: var(--color-primary-100, color-mix(in srgb, var(--color-primary) 9%, var(--color-surface)));
}
.hs-ws-plan.is-paid i, .hs-ws-plan.is-paid svg { color: var(--color-primary); }

/* Credit balance chip — same pattern as the editor topbar chip (the editor's
   copy lives in editor.html's <style>; this is the studio-shell copy). 'i, svg'
   icon-size selector because Lucide swaps the <i> for an <svg>. */
.hs-credit-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 36px; min-height: 36px; padding: 0 12px;
  border-radius: var(--radius-full); text-decoration: none; cursor: pointer;
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-secondary);
  font: 600 var(--font-size-sm) var(--font-family-sans); letter-spacing: var(--tracking-normal);
  transition: background var(--transition-fast, .12s) ease,
              border-color var(--transition-fast, .12s) ease,
              color var(--transition-fast, .12s) ease,
              transform var(--transition-fast, .12s) ease;
}
.hs-credit-chip i, .hs-credit-chip svg { width: 16px; height: 16px; flex: none; color: var(--color-primary); }
.hs-credit-chip__val { font-variant-numeric: tabular-nums; color: var(--color-text-primary); }
.hs-credit-chip:hover { border-color: var(--color-border-hover); color: var(--color-text-primary); background: var(--color-surface-hover); }
.hs-credit-chip:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary); }
.hs-credit-chip:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .hs-credit-chip { transition: none; } .hs-credit-chip:active { transform: none; } }

/* ---- Usage strip --------------------------------------------------------- */
.hs-usage-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  margin: 0 0 var(--space-8);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.hs-usage-items {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap; font-size: var(--font-size-sm); color: var(--color-text-secondary);
}
.hs-usage-item { display: inline-flex; align-items: center; gap: 7px; color: var(--color-text-primary); font-weight: 600; }
.hs-usage-item i, .hs-usage-item svg { width: 15px; height: 15px; flex: none; color: var(--color-text-tertiary); }
.hs-usage-muted { color: var(--color-text-tertiary); font-weight: 500; }
.hs-usage-sep { width: 1px; height: 16px; background: var(--color-border); flex: none; }
.hs-usage-upgrade {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 34px; padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  background: var(--color-primary-100, color-mix(in srgb, var(--color-primary) 9%, var(--color-surface)));
  color: var(--color-primary); text-decoration: none;
  font: 600 var(--font-size-sm) var(--font-family-sans);
  transition: background var(--transition-fast, .12s) ease, transform var(--transition-fast, .12s) ease;
}
.hs-usage-upgrade i, .hs-usage-upgrade svg { width: 15px; height: 15px; flex: none; }
.hs-usage-upgrade:hover { background: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface)); }
.hs-usage-upgrade:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary); }
.hs-usage-upgrade:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .hs-usage-upgrade { transition: none; } .hs-usage-upgrade:active { transform: none; } }

/* ---- API keys panel ------------------------------------------------------ */
.hs-apikeys {
  margin-top: var(--space-16);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border);
  scroll-margin-top: 5.5rem; /* clears the sticky nav when jumped to via #api-keys */
}
.hs-apikeys-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-6);
}
.hs-apikeys-title {
  margin: 0; font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: var(--font-size-xl); letter-spacing: var(--tracking-tight);
}
.hs-apikeys-sub {
  margin: var(--space-2) 0 0; font-size: var(--font-size-sm);
  color: var(--color-text-secondary); line-height: var(--line-height-snug); max-width: 52ch;
}
.hs-apikeys-sub code {
  font-family: var(--font-family-mono, ui-monospace, monospace); font-size: 0.92em;
  padding: 0.05em 0.35em; border-radius: var(--radius-xs, 4px);
  background: var(--color-background-secondary); color: var(--color-text-primary);
}
.hs-apikeys-soon {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-4); border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg); color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}
.hs-apikeys-soon i, .hs-apikeys-soon svg { width: 16px; height: 16px; flex: none; }
.hs-apikeys-loading { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-2) 0; }

.hs-apikeys-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-10) var(--space-4); text-align: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.hs-apikeys-empty i, .hs-apikeys-empty svg { width: 28px; height: 28px; color: var(--color-text-tertiary); }
.hs-apikeys-empty p { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }

.hs-apikeys-tablewrap {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); overflow-x: auto;
}
.hs-apikeys-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.hs-apikeys-table th {
  text-align: left; padding: var(--space-3) var(--space-4);
  font-weight: 600; font-size: var(--font-size-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-wider); color: var(--color-text-tertiary);
  border-bottom: 1px solid var(--color-border); white-space: nowrap;
}
.hs-apikeys-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
  color: var(--color-text-secondary); vertical-align: middle; white-space: nowrap;
}
.hs-apikeys-table tr:last-child td { border-bottom: none; }
.hs-apikeys-name { color: var(--color-text-primary); font-weight: 600; }
.hs-apikeys-prefix {
  font-family: var(--font-family-mono, ui-monospace, monospace);
  color: var(--color-text-primary); font-size: 0.9em;
}
.hs-tnum-col { text-align: right; }
.hs-apikeys-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.hs-apikeys-status-dot { width: 7px; height: 7px; border-radius: var(--radius-full); flex: none; }
.hs-apikeys-status.is-active { color: var(--color-success-text); }
.hs-apikeys-status.is-active .hs-apikeys-status-dot { background: var(--color-success, #0e9f6e); }
.hs-apikeys-status.is-revoked { color: var(--color-text-tertiary); }
.hs-apikeys-status.is-revoked .hs-apikeys-status-dot { background: var(--color-text-tertiary); }
.hs-apikeys-actions { text-align: right; }
.hs-apikeys-revoke {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
  padding: 0 var(--space-3); border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-secondary); font: 600 var(--font-size-sm) var(--font-family-sans); cursor: pointer;
  transition: color var(--transition-fast, .12s) ease, border-color var(--transition-fast, .12s) ease,
              background var(--transition-fast, .12s) ease, transform var(--transition-fast, .12s) ease;
}
.hs-apikeys-revoke:hover { color: var(--color-error-text, #dc2626); border-color: var(--color-error-text, #dc2626); background: var(--color-error-bg, var(--color-background-secondary)); }
.hs-apikeys-revoke:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary); }
.hs-apikeys-revoke:active { transform: scale(.96); }
.hs-apikeys-revoke:disabled { cursor: default; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .hs-apikeys-revoke { transition: none; } .hs-apikeys-revoke:active { transform: none; } }

/* Inline code sample + the reveal value share the .hs-code block. */
.hs-apikeys-sample { margin-top: var(--space-5); }
.hs-apikeys-sample-label {
  display: block; margin-bottom: var(--space-2);
  font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking-wider); color: var(--color-text-tertiary);
}
.hs-code {
  margin: 0; padding: var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-background-secondary);
  font-family: var(--font-family-mono, ui-monospace, monospace);
  font-size: var(--font-size-sm); line-height: 1.6;
  color: var(--color-text-primary); overflow-x: auto;
  white-space: pre;
}
.hs-code .hs-code-tok { color: var(--color-primary); font-weight: 600; }
.hs-code::selection, .hs-code *::selection { background: color-mix(in srgb, var(--color-primary) 32%, transparent); }

/* ---- API-key reveal (one-time) ------------------------------------------ */
.hs-keyreveal {
  display: flex; align-items: stretch; gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-4);
}
.hs-keyreveal-value {
  flex: 1 1 auto; min-width: 0; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-background-secondary);
  font-family: var(--font-family-mono, ui-monospace, monospace);
  font-size: var(--font-size-sm); color: var(--color-text-primary);
  word-break: break-all; user-select: all;
}
.hs-keyreveal-value::selection { background: color-mix(in srgb, var(--color-primary) 32%, transparent); }
.hs-keyreveal-copy {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-primary); font: 600 var(--font-size-sm) var(--font-family-sans); cursor: pointer;
  transition: background var(--transition-fast, .12s) ease, border-color var(--transition-fast, .12s) ease, transform var(--transition-fast, .12s) ease;
}
.hs-keyreveal-copy i, .hs-keyreveal-copy svg { width: 15px; height: 15px; flex: none; }
.hs-keyreveal-copy:hover { background: var(--color-surface-hover); border-color: var(--color-border-hover); }
.hs-keyreveal-copy:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary); }
.hs-keyreveal-copy:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .hs-keyreveal-copy { transition: none; } .hs-keyreveal-copy:active { transform: none; } }

/* Warn-tinted alert variant for the "store this safely" notice. */
.hs-alert-warn {
  border-color: color-mix(in srgb, var(--color-warning-text, #b45309) 30%, var(--color-border));
  background: var(--color-warning-bg, color-mix(in srgb, var(--color-warning-text, #b45309) 8%, var(--color-surface)));
  color: var(--color-warning-text, #b45309);
}

@media (max-width: 900px) {
  .hs-apikeys-head { align-items: flex-start; }
}

/* ===========================================================================
 * Shared toast (account page + any base-extending surface). Mirrors the
 * dashboard/editor toast shape so feedback reads consistently across surfaces.
 * The dashboard ships its own copy in its <style> block; this is the shell copy.
 * 'i, svg' icon sizing because Lucide swaps the <i> for an <svg>.
 * ======================================================================== */
.hs-account .hs-toast,
.hs-toast.hs-toast--shell {
  position: fixed; bottom: var(--space-6); left: 50%; transform: translateX(-50%);
  z-index: var(--z-toast, 1100);
  display: inline-flex; align-items: center; gap: var(--space-2);
  max-width: min(90vw, 30rem);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-text-primary); color: var(--color-surface);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-sm); font-weight: 600;
}
.hs-account .hs-toast i, .hs-account .hs-toast svg { width: 17px; height: 17px; flex: none; }
.hs-account .hs-toast[data-kind="error"] { background: var(--color-error, #dc2626); color: #fff; }

/* Info-tinted alert variant (used by the From-a-URL "coming soon" note). */
.hs-alert-info {
  border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
  background: var(--color-primary-bg, color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)));
  color: var(--color-text-secondary);
}
.hs-alert-info i, .hs-alert-info svg { color: var(--color-primary); }

/* ===========================================================================
 * Profile menu — avatar circle + dropdown (workspace nav + editor topbar)
 * ======================================================================== */
.hs-profile { position: relative; flex: none; }
.hs-avatar-btn {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; padding: 0;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-primary-bg, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)));
  color: var(--color-primary);
  font: 700 var(--font-size-sm) var(--font-family-sans);
  cursor: pointer; overflow: hidden;
  transition: border-color var(--transition-base), transform var(--transition-fast),
              box-shadow var(--transition-base);
}
.hs-avatar-btn:hover { border-color: var(--color-primary); }
.hs-avatar-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary); }
.hs-avatar-btn:active { transform: scale(.96); }
.hs-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.hs-avatar-initial { line-height: 1; text-transform: uppercase; }

.hs-profile-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: var(--z-dropdown, 1000);
  min-width: 220px; max-width: 280px;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-xl, var(--shadow-lg));
}
.hs-profile-email {
  padding: var(--space-2) var(--space-3) var(--space-3);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hs-profile-item {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none; border-radius: var(--radius-sm); background: transparent;
  color: var(--color-text-primary); text-decoration: none; text-align: left;
  font: 500 var(--font-size-sm) var(--font-family-sans); cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}
.hs-profile-item i, .hs-profile-item svg { width: 16px; height: 16px; flex: none; color: var(--color-text-tertiary); }
.hs-profile-item:hover { background: var(--color-surface-hover); }
.hs-profile-item:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary); }
.hs-profile-signout { margin-top: var(--space-1); padding-top: var(--space-1); border-top: 1px solid var(--color-border); }
.hs-profile-danger:hover { color: var(--color-error, #dc2626); }
.hs-profile-danger:hover i, .hs-profile-danger:hover svg { color: var(--color-error, #dc2626); }

/* ===========================================================================
 * Buy-credits modal — packs grid (shared include)
 * ======================================================================== */
.hs-buy-modal { max-width: 560px; }
.hs-buy-balance {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-background-secondary);
  font-size: var(--font-size-sm); color: var(--color-text-secondary);
}
.hs-buy-balance-ic { display: grid; place-items: center; color: var(--color-primary); }
.hs-buy-balance-ic i, .hs-buy-balance-ic svg { width: 16px; height: 16px; }
.hs-buy-balance-val { margin-left: auto; font-weight: 700; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.hs-buy-balance-unit { color: var(--color-text-tertiary); }

.hs-buy-packs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
}
.hs-buy-pack {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  padding: var(--space-5) var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer; text-align: center;
  transition: border-color var(--transition-base), box-shadow var(--transition-base),
              transform var(--transition-medium);
}
.hs-buy-pack:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.hs-buy-pack:active { transform: translateY(0) scale(.99); }
.hs-buy-pack:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary); }
.hs-buy-pack:disabled { cursor: default; opacity: .7; }
.hs-buy-pack:disabled:hover { transform: none; box-shadow: none; border-color: var(--color-border); }
.hs-buy-pack.is-best { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
.hs-buy-pack-tag {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  padding: 2px var(--space-2); border-radius: var(--radius-full);
  background: var(--color-primary); color: var(--color-surface, #fff);
  font-size: var(--font-size-2xs, 0.6875rem); font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.hs-buy-pack-credits { font-size: var(--font-size-xl); font-weight: 800; color: var(--color-text-primary); font-variant-numeric: tabular-nums; line-height: 1.1; }
.hs-buy-pack-unit { font-size: var(--font-size-xs); color: var(--color-text-tertiary); }
.hs-buy-pack-price { margin-top: var(--space-1); font-size: var(--font-size-lg); font-weight: 700; color: var(--color-primary); }
.hs-buy-pack-cta {
  display: inline-flex; align-items: center; gap: 5px; margin-top: var(--space-3);
  font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-secondary);
}
.hs-buy-pack-cta i, .hs-buy-pack-cta svg { width: 14px; height: 14px; }
.hs-buy-pack:hover .hs-buy-pack-cta { color: var(--color-primary); }
.hs-buy-foot { margin-top: var(--space-6); display: flex; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .hs-avatar-btn, .hs-buy-pack { transition: none; }
  .hs-avatar-btn:active, .hs-buy-pack:hover, .hs-buy-pack:active { transform: none; }
}
@media (max-width: 560px) {
  .hs-buy-packs { grid-template-columns: 1fr; }
}

/* ===========================================================================
 * Account page
 * ======================================================================== */
.hs-account { padding-top: var(--space-8); padding-bottom: var(--space-12); }
.hs-account-head { margin-bottom: var(--space-8); }
.hs-account-head h1 { margin: 0 0 var(--space-2); }
.hs-account-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5);
  align-items: start;
}
.hs-account-card-wide { grid-column: 1 / -1; }
.hs-account-card {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.hs-account-card-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.hs-account-card-head h2 { margin: 0; font-size: var(--font-size-lg); }
.hs-account-card-ic {
  display: grid; place-items: center; flex: none; width: 2rem; height: 2rem;
  border-radius: var(--radius-md); background: var(--color-primary-bg); color: var(--color-primary);
}
.hs-account-card-ic i, .hs-account-card-ic svg { width: 1.05rem; height: 1.05rem; }

.hs-account-dl { margin: 0; }
.hs-account-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border);
}
.hs-account-row:last-child { border-bottom: none; }
.hs-account-row dt { color: var(--color-text-tertiary); font-size: var(--font-size-sm); }
.hs-account-row dd { margin: 0; font-weight: 600; color: var(--color-text-primary); text-align: right; }

.hs-account-plan { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.hs-account-plan-price { font-size: var(--font-size-xl); font-weight: 800; color: var(--color-text-primary); }
.hs-account-plan-per { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-tertiary); }
.hs-account-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

.hs-account-balance { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-secondary); }
.hs-account-balance i, .hs-account-balance svg { width: 15px; height: 15px; color: var(--color-primary); }
.hs-account-balance .hs-tnum { color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.hs-account-balance-unit { color: var(--color-text-tertiary); font-weight: 500; }

.hs-account-empty { padding: var(--space-6) 0; color: var(--color-text-tertiary); font-size: var(--font-size-sm); }
.hs-account-table-wrap { overflow-x: auto; }
.hs-account-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.hs-account-table th {
  text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border);
  color: var(--color-text-tertiary); font-weight: 600; white-space: nowrap;
}
.hs-account-table td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); color: var(--color-text-primary); }
.hs-account-table tbody tr:last-child td { border-bottom: none; }
.hs-account-table .hs-tnum-col { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hs-txn-label { font-weight: 500; }
.hs-amt-pos { color: var(--color-success-text, #15803d); font-weight: 700; }
.hs-amt-neg { color: var(--color-text-secondary); font-weight: 600; }
.hs-account-more { margin-top: var(--space-4); display: flex; justify-content: center; }
.hs-account-signout-copy { margin: 0 0 var(--space-4); color: var(--color-text-secondary); font-size: var(--font-size-sm); }

@media (max-width: 760px) {
  .hs-account-grid { grid-template-columns: 1fr; }
}