@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-wght-normal-6cb0cbcb7a2a366352c7398c8952c74e46fe323e64dc7244639d7f16de256082.woff2) format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/assets/jetbrains-mono-latin-wght-normal-80880a2005eaf62ffc0bbf8dff021a2d83cd047acb34c6d2e4fe80272b18f23f.woff2) format("woff2");
}
/* ===========================================================================
   VTT design tokens — marketing dark theme

   A reusable token layer (primitives -> semantic -> Bootstrap bridge) for the
   sleek, dark marketing surface. Everything is scoped to `.vtt-marketing` so
   it can never leak into the logged-in app / admin (which keep their current
   light styling). The whole product is expected to go dark eventually; when
   that happens this file is the single place the palette lives.

   Palette + type follow the team's "minimal-dark" landing direction
   (~/projects/vtt-marketing/mockups): deep slate background, Inter body with
   JetBrains Mono technical accents, brand-blue accent.
   =========================================================================== */

.vtt-marketing,
.vtt-app {
  /* --- brand --- */
  --vtt-brand: #389dd8;
  --vtt-brand-rgb: 56, 157, 216;
  --vtt-brand-2: #8bb4e6;

  /* --- neutral surfaces (deep cool slate) --- */
  /* The page is kept deep; surfaces are lifted well clear of it so cards and
     panels read as distinct objects rather than borders in the dark. */
  --vtt-bg: #090c0f;
  --vtt-surface-1: #181f28; /* cards, modals — clearly lifted off the page */
  --vtt-surface-2: #202a34; /* elevated panels, inputs */
  --vtt-surface-3: #2a3540; /* hover / raised */

  /* --- text --- */
  --vtt-text: #f1f4f7;
  --vtt-text-2: #cbd4db;
  --vtt-muted: #9ba6ad;

  /* --- borders --- */
  --vtt-border: rgba(231, 236, 239, 0.18);
  --vtt-border-strong: rgba(231, 236, 239, 0.34);

  /* --- accent (on dark) --- */
  --vtt-accent: #389dd8;
  --vtt-accent-hover: #5cb3e6;
  --vtt-accent-soft: rgba(56, 157, 216, 0.14);

  /* --- radius --- */
  --vtt-radius-sm: 0.5rem;
  --vtt-radius: 0.85rem;
  --vtt-radius-lg: 1.15rem;

  /* --- elevation (top highlight + drop shadow reads as a lifted surface) --- */
  --vtt-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 20px 48px -16px rgba(0, 0, 0, 0.7);
  --vtt-shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 12px 30px -16px rgba(0, 0, 0, 0.6);

  /* --- typography --- */
  --vtt-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --vtt-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --vtt-text-5xl: clamp(2.6rem, 6vw, 4rem);
  --vtt-text-4xl: clamp(2rem, 4vw, 2.75rem);
  --vtt-text-3xl: 1.75rem;
  --vtt-text-2xl: 1.4rem;
  --vtt-text-lg: 1.15rem;

  /* --- rhythm --- */
  --vtt-section-y: clamp(3.5rem, 7vw, 6.5rem);
}

/* ---------------------------------------------------------------------------
   Bootstrap bridge — remap Bootstrap 5.3's stock dark CSS variables to the VTT
   palette so every Bootstrap component (cards, modals, form controls, dropdowns,
   tooltips, alerts, close button) inherits our refined surfaces instead of the
   default grey-dark. Bootstrap's CDN CSS loads AFTER this file, but the
   `[data-bs-theme="dark"].vtt-marketing` selector (specificity 0,2,0) outranks
   Bootstrap's `[data-bs-theme=dark]` (0,1,0), so these win regardless of order.
   Components read these vars at use-time, so re-pointing them is enough.
   --------------------------------------------------------------------------- */
[data-bs-theme="dark"].vtt-marketing,
[data-bs-theme="dark"] .vtt-marketing,
[data-bs-theme="dark"].vtt-app,
[data-bs-theme="dark"] .vtt-app {
  --bs-body-bg: var(--vtt-bg);
  --bs-body-bg-rgb: 11, 14, 17;
  --bs-body-color: var(--vtt-text);
  --bs-body-color-rgb: 231, 236, 239;
  --bs-emphasis-color: var(--vtt-text);
  --bs-emphasis-color-rgb: 231, 236, 239;
  --bs-secondary-color: var(--vtt-text-2);
  --bs-secondary-bg: var(--vtt-surface-2);
  --bs-tertiary-color: var(--vtt-muted);
  --bs-tertiary-bg: var(--vtt-surface-1);

  --bs-border-color: var(--vtt-border);
  --bs-border-color-translucent: var(--vtt-border);

  --bs-primary: var(--vtt-brand);
  --bs-primary-rgb: var(--vtt-brand-rgb);
  --bs-link-color: var(--vtt-accent);
  --bs-link-color-rgb: var(--vtt-brand-rgb);
  --bs-link-hover-color: var(--vtt-accent-hover);
  --bs-link-hover-color-rgb: 92, 179, 230;

  /* component surfaces */
  --bs-card-bg: var(--vtt-surface-1);
  --bs-card-border-color: var(--vtt-border-strong);
  --bs-card-cap-bg: var(--vtt-surface-2);
  --bs-modal-bg: var(--vtt-surface-1);
  --bs-modal-border-color: var(--vtt-border);
  --bs-dropdown-bg: var(--vtt-surface-1);
  --bs-dropdown-border-color: var(--vtt-border);
}
/* VoiceTextTranslate Brand Overrides
   Primary:   #389dd8
   Secondary: #8bb4e6
   Ternary:   #a6a6a6
*/

:root {
  --bs-primary: #389dd8;
  --bs-primary-rgb: 56, 157, 216;
  --bs-link-color: #389dd8;
  --bs-link-color-rgb: 56, 157, 216;
  --bs-link-hover-color: #2a7fb0;
}

.btn-primary {
  --bs-btn-bg: #389dd8;
  --bs-btn-border-color: #389dd8;
  --bs-btn-hover-bg: #2a7fb0;
  --bs-btn-hover-border-color: #2a7fb0;
  --bs-btn-active-bg: #2272a0;
  --bs-btn-active-border-color: #2272a0;
  --bs-btn-disabled-bg: #389dd8;
  --bs-btn-disabled-border-color: #389dd8;
}

.text-primary {
  color: #389dd8 !important;
}

.bg-brand-primary {
  background-color: #389dd8;
}

.bg-brand-secondary {
  background-color: #8bb4e6;
}

.bg-brand-navy {
  background-color: #1a3a4f;
}

.text-brand-navy {
  color: #1a3a4f;
}

.policy-page {
  max-width: 800px;
}

/* Beta badge */
.badge-beta {
  background-color: #8bb4e6;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3em 0.65em;
  border-radius: 0.4rem;
  vertical-align: middle;
}

/* Invitation banner */
.invitation-banner {
  background-color: #eaf4fb;
  border-inline-start: 4px solid #389dd8;
  color: #1e5f88;
}

/* Impersonation banner — deliberately loud. Lives above the user navbar
   in the impersonating tab so the admin can't forget which tab they're
   in. High-contrast amber + dark text + thick top/bottom borders so it
   reads as a system-level warning rather than a flash notice. */
.impersonation-banner {
  background-color: #ffb300;
  color: #1a1a1a;
  border-top: 3px solid #1a1a1a;
  border-bottom: 3px solid #1a1a1a;
  font-size: 0.95rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 1100;
}

.impersonation-banner strong {
  color: #1a1a1a;
}

.impersonation-banner .btn-dark {
  background-color: #1a1a1a;
  border-color: #1a1a1a;
}

/* Mirror directional Bootstrap Icons under RTL. Bootstrap's RTL CSS bundle
   handles utility-class flipping (margins, paddings, etc.) but icon glyphs
   are static — bi-arrow-left still renders as a left-pointing arrow even
   under dir="rtl". The class names (which JS uses to toggle expand/collapse
   state) stay untouched — only the rendered glyph mirrors. Vertical
   chevrons/arrows (up/down) are excluded because they aren't
   reading-order-sensitive.

   Apply to ::before because Bootstrap Icons render the glyph there as
   display: inline-block — transforms on the parent <i> can be inconsistent
   since <i> is display: inline by default. */
[dir="rtl"] .bi-arrow-left::before,
[dir="rtl"] .bi-arrow-right::before,
[dir="rtl"] .bi-chevron-left::before,
[dir="rtl"] .bi-chevron-right::before,
[dir="rtl"] .bi-arrow-left-short::before,
[dir="rtl"] .bi-arrow-right-short::before,
[dir="rtl"] .bi-arrow-bar-left::before,
[dir="rtl"] .bi-arrow-bar-right::before {
  transform: scaleX(-1);
}

/* Landing feature cards — force wrapping so any translation fits, even if a
   token would normally be unbreakable (long compound words, URLs, etc.). */
#pricing .card-body,
#pricing .card-body * {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Paginated user pages: make the content wrapper fill the scroll area so the
   pagination nav can dock at the bottom even when the table is short.

   `.page-fill` turns the wrapper into a flex column whose min-height matches
   the scroll ancestor (layout's <main overflow-y:auto>). `.pagination-sticky`
   then uses `margin-top: auto` to consume leftover vertical space — anchoring
   to the visible bottom on short pages — and `position: sticky; bottom: 0`
   keeps it docked while the table scrolls past on long pages. */
.page-fill {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.pagination-sticky {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  background: #fff;
  padding: 0.5rem 0;
  border-top: 1px solid #dee2e6;
  z-index: 5;
}

.pagination-sticky .pagination {
  margin-bottom: 0;
}

/* Sidebar — brand pastel blue */
.sidebar {
  background-color: #8bb4e6;
}

/* Page headings — brand dark navy (matches landing section headings) */
h2 {
  color: #1a3a4f;
}

/* Outline primary button — brand blue */
.btn-outline-primary {
  --bs-btn-color: #389dd8;
  --bs-btn-border-color: #389dd8;
  --bs-btn-hover-bg: #389dd8;
  --bs-btn-hover-border-color: #389dd8;
  --bs-btn-active-bg: #2a7fb0;
  --bs-btn-active-border-color: #2a7fb0;
}

/* Active list-group item — brand light blue so badges/buttons stay visible */
.list-group-item.active {
  --bs-list-group-active-bg: #8bb4e6;
  --bs-list-group-active-border-color: #8bb4e6;
}

/* Floating language dropdown */
.lang-floating-menu {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  max-height: 280px;
}

.lang-floating-search {
  padding: 0.4rem;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}

.lang-floating-list {
  overflow-y: auto;
  flex: 1;
}

.lang-option:hover {
  background-color: #f0f0f0;
}

/* VAD speech activity bar */
.vad-bar {
  position: relative;
  height: 10px;
  background-color: #ced4da;
  border-radius: 5px;
  overflow: hidden;
}

.vad-segment {
  position: absolute;
  top: 0;
  height: 100%;
  background-color: #389dd8;
  border-radius: 2px;
  min-width: 1px;
}

/* Upload progress badge tooltip */
.upload-progress-badge:hover .upload-tooltip {
  display: block !important;
}

.upload-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.4;
  padding: 0.3rem 0.6rem;
  border-radius: 0.25rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1070;
}

.lang-info-tip {
  background: #333;
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.4;
  padding: 0.4rem 0.6rem;
  border-radius: 0.25rem;
  white-space: nowrap;
  pointer-events: none;
}

/* "Sign in with Google" button — matches Google Identity Branding Guidelines
   (developers.google.com/identity/branding-guidelines). Light theme + square
   corners (4px) is Google's most common variant. Keeps brand recognition vs.
   a generic outline-secondary, and the deliberately Google-shaped chip makes
   it clear to users that the flow leaves our domain.

   Selector chained as .btn.btn-google to outrank Bootstrap's `.btn` (which
   loads AFTER application.css from the CDN and resets --bs-btn-border-color
   to transparent). The :root --bs-primary trick used by .btn-primary doesn't
   apply here — there's no --bs-google global, so we need raw specificity. */
.btn.btn-google {
  --bs-btn-color: #1f1f1f;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #747775;
  --bs-btn-border-width: 1px;
  --bs-btn-border-radius: 4px;
  --bs-btn-hover-color: #1f1f1f;
  --bs-btn-hover-bg: #f8f9fa;
  --bs-btn-hover-border-color: #747775;
  --bs-btn-active-color: #1f1f1f;
  --bs-btn-active-bg: #f1f3f4;
  --bs-btn-active-border-color: #747775;
  --bs-btn-disabled-color: #1f1f1f;
  --bs-btn-disabled-bg: #fff;
  --bs-btn-disabled-border-color: #747775;
  height: 40px;
  padding: 0 12px;
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.25px;
  line-height: 1;
  transition: background-color 0.2s, box-shadow 0.2s;
}

.btn.btn-google:hover {
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.30), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.btn.btn-google:active,
.btn.btn-google:focus {
  outline: none;
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.30), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
}

.btn.btn-google:disabled,
.btn.btn-google.disabled {
  opacity: 0.38;
}

.btn.btn-google img {
  height: 18px;
  width: 18px;
}

/* Subtitle cue editing (project detail subtitle view) */
.subtitle-cue-edited {
  border-left: 3px solid var(--bs-warning);
  background-color: rgba(255, 193, 7, 0.08);
}

[dir="rtl"] .subtitle-cue-edited {
  border-left: 0;
  border-right: 3px solid var(--bs-warning);
}
/* ===========================================================================
   VTT marketing surface — dark theme restyle + hero/section layout.

   Everything here is scoped to `.vtt-marketing` (set on <body> only for the
   landing + policy pages). It never touches the logged-in app or admin.
   Tokens come from tokens.css; type from fonts.css.erb.
   =========================================================================== */

/* --- Base type ------------------------------------------------------------ */
.vtt-marketing {
  font-family: var(--vtt-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05", "ss01";
  letter-spacing: -0.011em;
  /* Render native controls (select popups, scrollbars) in dark mode. */
  color-scheme: dark;
}

/* Native <select> dropdown items — dark to match the theme (the popup is
   OS-rendered; color-scheme handles macOS, the option rule handles
   Chrome/Firefox on Windows/Linux). */
.vtt-marketing select option {
  background-color: var(--vtt-surface-2);
  color: var(--vtt-text);
}

.vtt-marketing h1,
.vtt-marketing h2,
.vtt-marketing h3,
.vtt-marketing h4,
.vtt-marketing h5 {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--vtt-text);
}

.vtt-marketing a {
  text-decoration: none;
}

/* Eyebrow / kicker — the one place the mono face shows. Used sparingly for
   section labels; gives the page a precise, "utility/technical" character
   without shouting. */
.vtt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--vtt-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vtt-muted);
}
.vtt-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vtt-accent);
  box-shadow: 0 0 0 4px var(--vtt-accent-soft);
}

.vtt-mono {
  font-family: var(--vtt-font-mono);
}

/* --- Navbar --------------------------------------------------------------- */
/* Header matches the footer shade — same surface bookending the page. */
.vtt-marketing .navbar {
  background-color: var(--vtt-surface-1);
  border-bottom: 1px solid var(--vtt-border);
}
.vtt-marketing .navbar .nav-text-link {
  color: var(--vtt-text-2);
  transition: color 0.15s ease;
}
.vtt-marketing .navbar .nav-text-link:hover {
  color: var(--vtt-text);
}
.vtt-marketing .navbar .form-select {
  border-color: var(--vtt-border);
  color: var(--vtt-text-2);
}

/* --- Buttons -------------------------------------------------------------- */
.vtt-marketing .btn {
  --bs-btn-font-weight: 500;
  border-radius: var(--vtt-radius-sm);
  letter-spacing: 0;
}
.vtt-marketing .btn-lg {
  padding: 0.7rem 1.4rem;
  font-size: 1rem;
}
/* Primary CTA — brand fill with a soft accent glow on dark. */
.vtt-marketing .btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--vtt-accent);
  --bs-btn-border-color: var(--vtt-accent);
  --bs-btn-hover-bg: var(--vtt-accent-hover);
  --bs-btn-hover-border-color: var(--vtt-accent-hover);
  --bs-btn-hover-color: #06121b;
  --bs-btn-active-bg: var(--vtt-accent-hover);
  box-shadow: 0 8px 28px -10px rgba(56, 157, 216, 0.6);
}
.vtt-marketing .btn-primary:hover {
  box-shadow: 0 10px 34px -8px rgba(56, 157, 216, 0.75);
}
/* Outline / ghost button readable on dark. */
.vtt-marketing .btn-outline-light {
  --bs-btn-color: var(--vtt-text);
  --bs-btn-border-color: var(--vtt-border-strong);
  --bs-btn-hover-bg: rgba(231, 236, 239, 0.06);
  --bs-btn-hover-border-color: var(--vtt-text-2);
  --bs-btn-hover-color: var(--vtt-text);
  --bs-btn-active-bg: rgba(231, 236, 239, 0.1);
}
.vtt-marketing .btn-light {
  --bs-btn-bg: var(--vtt-text);
  --bs-btn-border-color: var(--vtt-text);
  --bs-btn-color: #0b0e11;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-hover-color: #0b0e11;
}

/* --- Section scaffolding -------------------------------------------------- */
.vtt-section {
  padding-block: var(--vtt-section-y);
}
.vtt-section-tint {
  background:
    linear-gradient(180deg, rgba(56, 157, 216, 0.03), transparent 40%),
    var(--vtt-bg);
  border-top: 1px solid var(--vtt-border);
  border-bottom: 1px solid var(--vtt-border);
}
.vtt-section-head {
  max-width: 46rem;
  margin-inline: auto;
}
.vtt-section-head h2 {
  font-size: var(--vtt-text-4xl);
  line-height: 1.15;
}
.vtt-section-head p {
  color: var(--vtt-text-2);
  font-size: var(--vtt-text-lg);
}

/* --- Hero ----------------------------------------------------------------- */
.vtt-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 11vw, 8.5rem) var(--vtt-section-y);
  text-align: center;
}
/* Atmospheric accent glow behind the headline — subtle, single source. */
.vtt-hero::before {
  content: "";
  position: absolute;
  inset: -30% 0 auto 0;
  height: 70%;
  background: radial-gradient(
    62% 60% at 50% 0%,
    rgba(56, 157, 216, 0.18),
    rgba(56, 157, 216, 0.05) 45%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
}
.vtt-hero > * {
  position: relative;
  z-index: 1;
}
.vtt-hero h1 {
  font-size: var(--vtt-text-5xl);
  line-height: 1.06;
  margin: 1.4rem auto 0;
  max-width: 18ch;
}
.vtt-hero .vtt-hero-sub {
  margin: 1.4rem auto 0;
  max-width: 40rem;
  font-size: var(--vtt-text-lg);
  line-height: 1.6;
  color: var(--vtt-text-2);
}
.vtt-hero-cta {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}
/* Trust strip below the fold of the hero. */
.vtt-hero-trust {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.9rem;
  justify-content: center;
  font-family: var(--vtt-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--vtt-muted);
}
.vtt-hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.vtt-hero-trust i {
  color: var(--vtt-accent);
}

/* --- Cards ---------------------------------------------------------------- */
.vtt-marketing .card {
  /* All cards share the credits/"Simple Pricing" card treatment: surface-1
     with a soft accent tint from the top. */
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(56, 157, 216, 0.08), transparent 60%),
    var(--vtt-surface-1);
  border-radius: var(--vtt-radius-lg);
  box-shadow: var(--vtt-shadow-sm);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.vtt-marketing .card:hover {
  transform: translateY(-3px);
  border-color: rgba(56, 157, 216, 0.55);
  box-shadow: var(--vtt-shadow);
}
/* Icon chips at the top of each feature card. */
.vtt-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--vtt-radius);
  background: var(--vtt-accent-soft);
  color: var(--vtt-accent);
  font-size: 1.4rem;
  margin-bottom: 0.85rem;
}
/* List check/dash icons keep the accent; secondary text stays legible. */
.vtt-marketing #pricing .text-success,
.vtt-marketing #pricing .text-primary {
  color: var(--vtt-accent) !important;
}
.vtt-marketing #pricing .text-muted {
  color: var(--vtt-muted) !important;
}
.vtt-marketing #pricing .card-body li {
  color: var(--vtt-text-2);
}
.vtt-marketing #pricing .card-body strong {
  color: var(--vtt-text);
}

/* Credits / price highlight box — shares the standard card background now;
   only the price color is special. */
.vtt-credits .vtt-price {
  color: var(--vtt-accent);
}

/* --- Tooltips / info icons ------------------------------------------------ */
.vtt-marketing .bi-info-circle {
  cursor: help;
}

/* --- Policies ------------------------------------------------------------- */
.vtt-marketing #policies p {
  color: var(--vtt-text-2);
}
.vtt-marketing #policies .policy-link {
  color: var(--vtt-accent);
  font-family: var(--vtt-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
}
.vtt-marketing #policies .policy-link:hover {
  color: var(--vtt-accent-hover);
}

/* --- Beta banner (was a light pastel strip) ------------------------------- */
.vtt-marketing .invitation-banner {
  background-color: var(--vtt-surface-2);
  border-block: 1px solid var(--vtt-border);
  border-inline-start: 3px solid var(--vtt-accent);
  color: var(--vtt-text-2);
}
.vtt-marketing .invitation-banner a {
  color: var(--vtt-accent);
}

/* --- Footer --------------------------------------------------------------- */
.vtt-footer {
  background: var(--vtt-surface-1);
  border-top: 1px solid var(--vtt-border);
  color: var(--vtt-text-2);
}
.vtt-footer h5 {
  color: var(--vtt-text);
}
.vtt-footer a {
  color: var(--vtt-text-2);
  transition: color 0.15s ease;
}
.vtt-footer a:hover {
  color: var(--vtt-text);
}
.vtt-footer .footer-meta a,
.vtt-footer .footer-meta {
  color: var(--vtt-text-2);
  font-family: var(--vtt-font-mono);
  font-size: 0.78rem;
}
.vtt-footer hr {
  border-color: var(--vtt-border);
  opacity: 1;
}

/* --- Modals --------------------------------------------------------------- */
.vtt-marketing .modal-content {
  border: 1px solid var(--vtt-border);
  border-radius: var(--vtt-radius-lg);
  box-shadow: var(--vtt-shadow);
}
.vtt-marketing .modal .form-control {
  background-color: var(--vtt-surface-2);
  border-color: var(--vtt-border);
  color: var(--vtt-text);
}
.vtt-marketing .modal .form-control:focus {
  background-color: var(--vtt-surface-2);
  border-color: var(--vtt-accent);
  box-shadow: 0 0 0 0.2rem var(--vtt-accent-soft);
  color: var(--vtt-text);
}
.vtt-marketing .modal .form-label {
  color: var(--vtt-text-2);
  font-size: 0.9rem;
}
.vtt-marketing .modal .form-text {
  color: var(--vtt-muted);
}
/* The Google SSO button stays its mandated white chip (brand compliance) —
   nothing here touches .btn-google. The "OR" divider text stays legible: */
.vtt-marketing .modal .text-muted {
  color: var(--vtt-muted) !important;
}

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vtt-marketing .card,
  .vtt-marketing .btn {
    transition: none;
  }
  .vtt-marketing .card:hover {
    transform: none;
  }
}
/* ===========================================================================
   Logged-in app — dark theme.

   Reuses the shared design tokens + Bootstrap dark-variable bridge from
   tokens.css (which now also targets .vtt-app). Everything here is scoped to
   `.vtt-app`, set on <body> only for authenticated, non-admin pages — so the
   admin area keeps its existing light styling.
   =========================================================================== */

.vtt-app {
  font-family: var(--vtt-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Render native controls (select popups, scrollbars) dark. */
  color-scheme: dark;
}

/* Native <select> dropdown items (sidebar language picker, modal selects). */
.vtt-app select option {
  background-color: var(--vtt-surface-2);
  color: var(--vtt-text);
}

/* Headings — override the global brand.css `h2 { color:#1a3a4f }`. */
.vtt-app h1,
.vtt-app h2,
.vtt-app h3,
.vtt-app h4,
.vtt-app h5,
.vtt-app h6 {
  color: var(--vtt-text);
}

.vtt-app .text-muted {
  color: var(--vtt-muted) !important;
}

/* --- Top navbar (was bg-brand-navy) --------------------------------------- */
.vtt-app .navbar {
  background-color: var(--vtt-surface-1) !important;
  border-bottom: 1px solid var(--vtt-border);
}

/* --- Sidebar (was pastel #8bb4e6) ----------------------------------------- */
.vtt-app .sidebar {
  background-color: var(--vtt-surface-1) !important;
  border-inline-end: 1px solid var(--vtt-border);
}
/* Inactive links carry `.text-dark` in the markup (readable on the old pastel
   sidebar) — repaint them for dark. Active pills keep the accent fill. */
.vtt-app .sidebar .nav-link:not(.active) {
  color: var(--vtt-text-2) !important;
}
.vtt-app .sidebar .nav-link:not(.active):hover {
  background-color: var(--vtt-surface-3);
  color: var(--vtt-text) !important;
}
.vtt-app .sidebar .nav-pills .nav-link.active {
  background-color: var(--vtt-accent);
  color: #fff;
}
/* Sidebar section labels (admin reuse only; harmless here). */
.vtt-app .sidebar .text-muted {
  color: var(--vtt-muted) !important;
}

/* --- Cards ---------------------------------------------------------------- */
.vtt-app .card {
  box-shadow: var(--vtt-shadow-sm);
}

/* --- Light utility backgrounds across app views -> dark surfaces -----------
   bg-light: panel headers, transcript panels, status badges.
   bg-white:  card headers, autocomplete dropdowns.
   (The Get-the-App QR keeps an explicit inline white so it stays scannable.) */
.vtt-app .bg-light {
  background-color: var(--vtt-surface-2) !important;
}
.vtt-app .bg-white {
  background-color: var(--vtt-surface-1) !important;
}

/* --- Sticky pagination bar (brand.css hardcodes white) -------------------- */
.vtt-app .pagination-sticky {
  background: var(--vtt-surface-1);
  border-top-color: var(--vtt-border);
}

/* --- Floating language menu (brand.css hardcodes white) ------------------- */
.vtt-app .lang-floating-menu {
  background: var(--vtt-surface-1);
  border-color: var(--vtt-border);
}
.vtt-app .lang-floating-search {
  border-bottom-color: var(--vtt-border);
}
.vtt-app .lang-option:hover {
  background-color: var(--vtt-surface-3);
}

/* --- Tables --------------------------------------------------------------- */
.vtt-app .table {
  --bs-table-color: var(--vtt-text);
  --bs-table-border-color: var(--vtt-border);
}

/* --- Language picker (voice-to-text + conversation) -----------------------
   These pages define a page-local `.lang-picker-*` widget (built by their
   Stimulus controllers) that hardcodes white/grey. Repaint for dark; the
   `.vtt-app` prefix outranks the page-local rules. */
.vtt-app .lang-picker-toggle {
  background: var(--vtt-surface-2);
  border-color: var(--vtt-border);
  color: var(--vtt-text);
}
.vtt-app .lang-picker-toggle:hover {
  border-color: var(--vtt-accent);
}
.vtt-app .lang-picker-toggle.disabled {
  background: var(--vtt-surface-3);
  color: var(--vtt-muted);
}
.vtt-app .lang-picker-dropdown {
  background: var(--vtt-surface-1);
  border-color: var(--vtt-border);
  box-shadow: var(--vtt-shadow);
}
.vtt-app .lang-picker-search {
  background: var(--vtt-surface-2);
  border-bottom-color: var(--vtt-border);
  color: var(--vtt-text);
}
.vtt-app .lang-picker-search::placeholder {
  color: var(--vtt-muted);
}
.vtt-app .lang-picker-item:hover {
  background-color: var(--vtt-surface-3);
}
.vtt-app .lang-picker-divider {
  border-top-color: var(--vtt-border);
}
/* (.lang-picker-item.active keeps its brand-accent fill — reads fine on dark.) */
.vtt-app .mic-level-bar {
  background-color: var(--vtt-surface-3);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 * Explicit require order (was require_tree, which is alphabetical and fragile):
 * fonts -> tokens (design tokens consumed downstream) -> brand (shared app/admin
 * light styling) -> landing (marketing-scoped dark restyles). Order is
 * load-bearing, so it's spelled out rather than left to require_tree.
 *






 */