/**
 * Prizmi design system: black + green (less neon).
 * Use with Bootstrap 5.
 */
:root {
  --prizmi-dark: #0d0d0d;
  --prizmi-dark-soft: #1a1a1a;
  --prizmi-green: #16a34a;
  --prizmi-green-hover: #15803d;
  --prizmi-green-muted: rgba(22, 163, 74, 0.15);
  --prizmi-light: #fafafa;
  --prizmi-text: #333333;
  --prizmi-text-muted: #6b7280;
  --prizmi-border: #e5e7eb;
  --prizmi-error: #dc2626;
  --prizmi-success: #16a34a;

  /* Chat bubble palette — the canonical source of truth for the Prizmi app's
   * conversation surfaces (the Flutter app mirrors these in
   * app/lib/ui/tokens/brand_colors.dart; the dashboard itself doesn't render a
   * chat, but the brand lives here). Composed from the triad above:
   * pure-white Prizmi (agent) cards with a hairline border on the off-white
   * canvas, and a confident deep-green "you" bubble with white text
   * (5.0:1, WCAG-AA). Dark-theme equivalents live in the Flutter token file. */
  --prizmi-chat-canvas: var(--prizmi-light);       /* conversation background */
  --prizmi-chat-agent-bubble: #ffffff;             /* Prizmi message card */
  --prizmi-chat-agent-border: var(--prizmi-border);
  --prizmi-chat-agent-text: #1a1a1a;
  --prizmi-chat-user-bubble: var(--prizmi-green-hover);  /* "you" bubble */
  --prizmi-chat-user-text: #ffffff;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--prizmi-light);
  color: var(--prizmi-text);
  padding-top: 56px; /* fixed navbar height */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  padding: 2rem 0;
}

/* Navbar: black background, white text, green hover */
.navbar-prizmi {
  background-color: var(--prizmi-dark) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.navbar-prizmi .navbar-brand {
  color: #fff !important;
  font-weight: 600;
}

.navbar-prizmi .navbar-brand:hover {
  color: var(--prizmi-green) !important;
}

.navbar-prizmi .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
}

.navbar-prizmi .nav-link:hover,
.navbar-prizmi .nav-link:focus {
  color: var(--prizmi-green) !important;
}

.navbar-prizmi .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
}

.navbar-prizmi form .btn,
.navbar-prizmi form .btn-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  background: none;
  border: none;
  font-size: inherit;
  padding: 0;
}

.navbar-prizmi form .btn:hover,
.navbar-prizmi form .btn-link:hover {
  color: var(--prizmi-green);
}

/* Form inputs without .form-control (e.g. Django-rendered) */
.prizmi-card input[type="text"],
.prizmi-card input[type="password"],
.prizmi-card input[type="email"] {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border: 1px solid var(--prizmi-border);
  border-radius: 0.25rem;
}

.prizmi-card input:focus {
  border-color: var(--prizmi-green);
  outline: 0;
  box-shadow: 0 0 0 0.2rem var(--prizmi-green-muted);
}

/* Buttons: green primary */
.btn-prizmi {
  background-color: var(--prizmi-green);
  border-color: var(--prizmi-green);
  color: #fff;
}

.btn-prizmi:hover {
  background-color: var(--prizmi-green-hover);
  border-color: var(--prizmi-green-hover);
  color: #fff;
}

.btn-outline-prizmi {
  border-color: var(--prizmi-green);
  color: var(--prizmi-green);
}

/* Thinking Level segmented control.

   Paid plan: the selected option gets a solid brand-green fill (.tl-selected) and
   that fill is the ONLY selection cue — no ✓ (the checkmark would be redundant,
   and adding/removing it on click resized the buttons). Uses the AA-safe deeper
   green (--prizmi-green-hover, #15803d) with white text — matching the app —
   because white on the lighter --prizmi-green (#16a34a) fails WCAG AA.

   Free (locked) plan (.tl-locked): every option is grayed (btn-outline-secondary
   + :disabled) with NO green fill, and a ✓ marks the current level — the only
   cue there since there's no color, the same read as the chat app. The ✓'s width
   is reserved on all three options (::before toggled visible/hidden, never
   inserted/removed) so the locked control never shifts.

   Both tiers use min-width so all three segments are equal width. */
.tl-option {
  min-width: 7rem;         /* equal-width segments; fits the widest label */
  text-align: center;
  white-space: nowrap;
}
.tl-locked .tl-option::before {
  content: '\2713';        /* ✓ */
  visibility: hidden;      /* reserve its width on every locked option */
  margin-right: 0.3rem;
}
.tl-locked .tl-option.tl-active::before { visibility: visible; }
.tl-option.tl-selected,
.tl-option.tl-selected:hover,
.tl-option.tl-selected:focus {
  background-color: var(--prizmi-green-hover);
  border-color: var(--prizmi-green-hover);
  color: #fff;
}

.btn-outline-prizmi:hover {
  background-color: var(--prizmi-green-muted);
  border-color: var(--prizmi-green);
  color: var(--prizmi-green-hover);
}

/* Dashboard: phone verification gate modal (SMS skill) */
.prizmi-modal-spotlight {
  border-top: 4px solid var(--prizmi-green);
  border-radius: 0.375rem;
  overflow: hidden;
}

.prizmi-modal-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--prizmi-green-muted);
  color: var(--prizmi-green);
}

.prizmi-modal-icon-wrap svg {
  flex-shrink: 0;
}

/* Profile: intl-tel-input (country flags + E.164) */
.phone-iti-wrap .iti {
  width: 100%;
}
.phone-iti-wrap .iti__tel-input {
  border: 1px solid var(--prizmi-border);
  border-radius: 0.25rem;
}
.phone-iti-wrap .iti__tel-input:focus {
  border-color: var(--prizmi-green);
  outline: 0;
  box-shadow: 0 0 0 0.2rem var(--prizmi-green-muted);
}
.phone-iti-wrap .iti__selected-flag {
  border-radius: 0.25rem 0 0 0.25rem;
}
.iti__country-list {
  z-index: 1080;
}

/* Download CTA: black background, white text (Black/Green/White theme) */
.btn-prizmi-dark {
  background-color: var(--prizmi-dark);
  border-color: var(--prizmi-dark);
  color: #fff;
}

.btn-prizmi-dark:hover {
  background-color: var(--prizmi-dark-soft);
  border-color: var(--prizmi-dark-soft);
  color: #fff;
}

.btn-download-primary {
  font-size: 0.95rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
}

/* Skill setup / mode chooser modals: preserve newlines in instruction text */
.skill-setup-instructions-preline {
  white-space: pre-line;
}

/* Wizard step dots */
.wizard-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--prizmi-green-muted, #e0e0e0);
  transition: background 0.2s;
}
.wizard-dot.active {
  background: var(--prizmi-green, #16a34a);
}
.wizard-dot.completed {
  background: var(--prizmi-green, #16a34a);
  opacity: 0.5;
}

/* -------------------------------------------------------------------------
   Dashboard: Unified skill card (Skills section – Cloud and Device tabs)
   Use .skill-card as the wrapper for each skill row. Children:
   - .skill-card-header: flex row with .skill-card-info (name, description, badges)
     and .skill-card-controls (toggles, buttons).
   - .skill-card-desc, .skill-card-meta: optional description and badge row.
   The dashboard JS builds these in buildSkillCard(). Toggle switches are plain
   Bootstrap .form-check-input; the site-wide green styling for them lives just
   below and applies everywhere, not only in here.
   ------------------------------------------------------------------------- */
.skill-card {
  padding: 0.875rem 1rem;
  border: 1px solid var(--prizmi-border);
  border-radius: 0.5rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.skill-card:hover {
  border-color: var(--prizmi-green);
  box-shadow: 0 0 0 1px var(--prizmi-green-muted);
}

/* -------------------------------------------------------------------------
   Toggles and checkboxes: Prizmi green, everywhere.

   Deliberately NOT scoped to a container. This rule used to apply only inside
   .skill-card and .list-group-item, so every checkbox elsewhere fell back to
   Bootstrap's default blue — the email preference page, the billing
   auto-refill switch, the plan auto-renew consent box and the profile
   reset-memory confirmation were all off-brand, and each new one would have
   needed somebody to remember to extend a selector list. Blue was never a
   deliberate choice anywhere; it was the framework default showing through.

   Bootstrap 5.3 draws the switch knob as an embedded SVG in
   --bs-form-switch-bg, and recolours it on focus, so the focus states have to
   be overridden too. Without them a green switch flashes blue the moment you
   click it, which reads as a rendering bug rather than a style.
   ------------------------------------------------------------------------- */
.form-check-input:checked {
  background-color: var(--prizmi-green);
  border-color: var(--prizmi-green);
}

.form-check-input:focus {
  border-color: var(--prizmi-green);
  box-shadow: 0 0 0 0.25rem var(--prizmi-green-muted);
}

/* The unchecked-but-focused knob: Bootstrap ships a blue SVG here. */
.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2316a34a'/%3e%3c/svg%3e");
}

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

.skill-card-info {
  flex: 1;
  min-width: 0;
}

.skill-card-name {
  font-weight: 600;
  font-size: 0.925rem;
  color: var(--prizmi-text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.skill-card-desc {
  color: var(--prizmi-text-muted);
  font-size: 0.82rem;
  margin-top: 0.25rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.skill-card-controls {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-shrink: 0;
}

.skill-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

/* Badge shown next to high-value skills (e.g. Gmail, Calendar) in the dashboard. */
.badge-featured {
  background-color: var(--prizmi-green-muted);
  color: var(--prizmi-green-hover);
  font-weight: 600;
  font-size: 0.7rem;
}

/* Optional badge to distinguish cloud vs device skills (e.g. "Cloud" label). */
.badge-skill-type {
  background-color: #e0f2fe;
  color: #0369a1;
  font-size: 0.7rem;
}

/* -------------------------------------------------------------------------
   Dashboard: Section sub-tabs (Skills → Cloud/Device; Tasks → Scheduled/Queued)
   Tab buttons use .section-tabs .nav-link; active tab has .active (green underline).
   Content panes use .subtab-pane and data-subtab; hidden pane has .d-none.
   ------------------------------------------------------------------------- */
.section-tabs {
  border-bottom: 2px solid var(--prizmi-border);
  gap: 0;
}

.section-tabs .nav-link {
  color: var(--prizmi-text-muted);
  font-weight: 500;
  font-size: 0.9rem;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 0.5rem 1rem;
  border-radius: 0;
  background: none;
  cursor: pointer;
}

.section-tabs .nav-link:hover {
  color: var(--prizmi-green);
  border-bottom-color: var(--prizmi-green-muted);
}

.section-tabs .nav-link.active {
  color: var(--prizmi-green);
  border-bottom-color: var(--prizmi-green);
  font-weight: 600;
}

.subtab-pane.d-none {
  display: none !important;
}

/* -------------------------------------------------------------------------
   Dashboard: Category filter pills (Skills section)
   Pills are inline buttons; selected category uses .active (green background).
   Used for "All" and per-category filtering in Cloud Skills and Device Skills tabs.
   ------------------------------------------------------------------------- */
.skill-category-pill {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--prizmi-border);
  color: var(--prizmi-text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #fff;
  white-space: nowrap;
}

.skill-category-pill:hover {
  border-color: var(--prizmi-green);
  color: var(--prizmi-green);
}

.skill-category-pill.active {
  background-color: var(--prizmi-green);
  border-color: var(--prizmi-green);
  color: #fff;
}

/* Links */
a {
  color: var(--prizmi-green);
}

a:hover {
  color: var(--prizmi-green-hover);
}

/* Cards / content panels */
.prizmi-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Footer */
.footer-prizmi {
  background-color: var(--prizmi-dark);
  color: rgba(255, 255, 255, 0.7);
  padding: 1rem 0;
  margin-top: auto;
}

.footer-prizmi a {
  color: rgba(255, 255, 255, 0.7);
}

.footer-prizmi a:hover {
  color: var(--prizmi-green);
}

.footer-social {
  margin-top: 0.5rem;
}

.footer-social a {
  display: inline-block;
  margin: 0 0.4rem;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s;
}

.footer-social a:hover {
  color: var(--prizmi-green);
}

/* Form controls: subtle border, focus green */
.form-control:focus,
.form-select:focus {
  border-color: var(--prizmi-green);
  box-shadow: 0 0 0 0.2rem var(--prizmi-green-muted);
}

/* Alerts / status */
.alert-prizmi-success {
  background-color: rgba(34, 197, 94, 0.12);
  border-color: var(--prizmi-green);
  color: #166534;
}

.alert-prizmi-error {
  background-color: rgba(220, 38, 38, 0.08);
  border-color: var(--prizmi-error);
  color: #991b1b;
}

.alert-prizmi-info {
  background-color: rgba(34, 197, 94, 0.08);
  border-color: var(--prizmi-green);
  color: var(--prizmi-text);
}

/* Status boxes (e.g. connect_device, run_command) – JS sets .status.success / .error / .info */
.status {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin: 1rem 0;
  border: 1px solid transparent;
}

.status.success {
  background-color: rgba(34, 197, 94, 0.15);
  border-color: var(--prizmi-green);
  color: #166534;
}

.status.error {
  background-color: rgba(220, 38, 38, 0.1);
  border-color: var(--prizmi-error);
  color: #991b1b;
}

.status.info {
  background-color: rgba(34, 197, 94, 0.08);
  border-color: var(--prizmi-green);
  color: var(--prizmi-text);
}

.privacy-note {
  font-size: 0.8rem;
  color: var(--prizmi-green);
  opacity: 0.8;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.25rem;
}

.privacy-note svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Selected device row in dashboard – clear green highlight with left bar */
.list-group-item.prizmi-device-selected {
  position: relative;
  background-color: var(--prizmi-green-muted);
  border-color: var(--prizmi-green);
}

.list-group-item.prizmi-device-selected::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: var(--prizmi-green);
  border-radius: 4px 0 0 4px;
}

/* Dashboard: two-column layout with side nav */
.dashboard-layout {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.dashboard-nav {
  flex-shrink: 0;
  width: 200px;
  position: sticky;
  top: 5rem;
}

.dashboard-nav .nav-link {
  color: var(--prizmi-text);
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  border-left: 3px solid transparent;
}

.dashboard-nav .nav-link:hover {
  background-color: var(--prizmi-green-muted);
  color: var(--prizmi-green-hover);
}

.dashboard-nav .nav-link.active {
  font-weight: 600;
  color: var(--prizmi-green);
  background-color: var(--prizmi-green-muted);
  border-left-color: var(--prizmi-green);
}

.dashboard-main {
  flex: 1;
  min-width: 0;
}

.dashboard-section {
  display: block;
}

.dashboard-section.d-none {
  display: none !important;
}

@media (max-width: 992px) {
  .dashboard-layout {
    flex-direction: column;
  }

  .dashboard-nav {
    position: static;
    width: 100%;
  }

  .dashboard-nav .nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.5rem;
  }

  .dashboard-nav .nav-link {
    white-space: nowrap;
  }

  .skill-card-header {
    flex-direction: column;
    gap: 0.5rem;
  }

  .skill-card-controls {
    align-self: flex-end;
  }
}

@media (max-width: 576px) {
  .skill-card-name {
    font-size: 0.875rem;
  }

  .skill-card-desc {
    font-size: 0.8rem;
  }
}

/* Download platforms (macOS / Windows / Linux columns) */
.download-platform {
  background-color: #ffffff;
  border-radius: 0.75rem;
  border: 1px solid var(--prizmi-border);
  padding: 1rem 1.25rem;
}

.download-platform h2 {
  margin-top: 0;
}

/* Onboarding step indicator */
.onboarding-steps {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  position: relative;
}

.onboarding-steps::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--prizmi-border);
  z-index: 0;
}

.onboarding-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  z-index: 1;
}

.onboarding-step-circle {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid var(--prizmi-border);
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--prizmi-text-muted);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.onboarding-step-label {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--prizmi-text-muted);
  text-align: center;
}

.onboarding-step.completed .onboarding-step-circle {
  background-color: var(--prizmi-green);
  border-color: var(--prizmi-green);
  color: #ffffff;
}

.onboarding-step.active .onboarding-step-circle {
  background-color: var(--prizmi-green-muted);
  border-color: var(--prizmi-green);
  color: var(--prizmi-text);
}

.onboarding-step.completed .onboarding-step-label,
.onboarding-step.active .onboarding-step-label {
  color: var(--prizmi-text);
  font-weight: 500;
}

.onboarding-steps .onboarding-step-line {
  position: absolute;
  top: 14px;
  left: 50%;
  right: -50%;
  height: 2px;
  background-color: var(--prizmi-green);
  z-index: -1;
  transition: background-color 0.2s ease;
}

.onboarding-step:last-child .onboarding-step-line {
  display: none;
}

.onboarding-progress-text {
  font-size: 0.8rem;
  color: var(--prizmi-text-muted);
  margin-bottom: 0.75rem;
}

.onboarding-help {
  font-size: 0.8rem;
  color: var(--prizmi-text-muted);
  margin-bottom: 1.25rem;
}

@media (max-width: 576px) {
  .onboarding-step-label {
    font-size: 0.7rem;
  }

  .onboarding-steps {
    gap: 0.5rem;
  }
}

/* ===== Documentation ===== */

.docs-page {
  max-width: 800px;
  margin: 0 auto;
}

.docs-search-wrapper {
  position: relative;
}

.docs-search-input {
  font-size: 1.1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 2px solid var(--prizmi-border);
}

.docs-search-input:focus {
  border-color: var(--prizmi-green);
  box-shadow: 0 0 0 0.2rem var(--prizmi-green-muted);
}

.docs-search-results {
  background: #fff;
  border: 1px solid var(--prizmi-border);
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-top: 0.5rem;
}

.docs-search-results .list-group-item {
  border: none;
  border-bottom: 1px solid var(--prizmi-border);
  padding: 0.75rem 1rem;
}

.docs-search-results .list-group-item:last-child {
  border-bottom: none;
}

.docs-search-results .list-group-item a {
  color: var(--prizmi-text);
}

.docs-search-results .list-group-item a:hover {
  color: var(--prizmi-green);
}

/* -------------------------------------------------------------------------
   PrizmiDocsSearch widget (docs-search.js) — shared by the docs search box
   and the contact suggestions. .pds-option makes each result row a wrapping
   flex row so the optional answer snippet drops onto its own line; .pds-active
   is the keyboard-highlighted row; mark.pds-hl highlights matched query terms.
   ------------------------------------------------------------------------- */
.pds-option {
  position: relative; /* anchors the stretched result link below */
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
  cursor: pointer;
}

.pds-option .pds-link {
  color: var(--prizmi-text);
}

/* Make the WHOLE result row clickable (not just the title) while keeping the
   real <a> as the link — so Cmd/Ctrl/middle-click, right-click "open in new
   tab", keyboard focus, and screen-reader semantics all still work. */
.pds-option .pds-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.pds-option .pds-snippet {
  flex-basis: 100%;
  margin: 0.15rem 0 0;
  position: relative;
  z-index: 0; /* below the stretched link so row clicks open the entry */
}

.pds-option.pds-active,
.pds-option:hover {
  background: var(--prizmi-green-muted);
}

mark.pds-hl {
  background: var(--prizmi-green-muted);
  color: inherit;
  padding: 0 0.1em;
  border-radius: 2px;
}

.docs-tabs .nav-link {
  color: var(--prizmi-text);
  font-weight: 500;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.75rem 1.25rem;
}

.docs-tabs .nav-link:hover {
  color: var(--prizmi-green);
  border-bottom-color: var(--prizmi-green-muted);
}

.docs-tabs .nav-link.active {
  color: var(--prizmi-green);
  background: none;
  border-bottom-color: var(--prizmi-green);
}

.docs-tab-content {
  border-top: none;
}

.docs-category-desc {
  font-size: 0.95rem;
}

.docs-accordion-item {
  border: 1px solid var(--prizmi-border);
  border-radius: 0.5rem !important;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.docs-accordion-item .accordion-button {
  font-size: 1rem;
  font-weight: 500;
  color: var(--prizmi-text);
  background-color: #fff;
  padding: 1rem 1.25rem;
}

.docs-accordion-item .accordion-button:not(.collapsed) {
  color: var(--prizmi-green);
  background-color: var(--prizmi-green-muted);
  box-shadow: none;
}

.docs-accordion-item .accordion-button:focus {
  box-shadow: none;
  border-color: var(--prizmi-green);
}

.docs-accordion-item .accordion-button::after {
  filter: none;
}

.docs-accordion-item .accordion-body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--prizmi-text);
  padding: 1rem 1.25rem;
}

.docs-media-img {
  max-width: 100%;
  border-radius: 0.5rem;
  border: 1px solid var(--prizmi-border);
}

.docs-media-video {
  max-width: 100%;
  border-radius: 0.5rem;
}

.docs-media-caption {
  font-style: italic;
}

.docs-breadcrumb {
  font-size: 0.9rem;
}

.docs-breadcrumb .breadcrumb-item a {
  color: var(--prizmi-green);
}

.docs-entry-answer {
  font-size: 1rem;
  line-height: 1.7;
}

/* On-this-page table of contents (rendered for longer entries) */
.docs-toc {
  border-left: 3px solid var(--prizmi-green);
  padding: 0.25rem 0 0.25rem 0.9rem;
  background: #fafafa;
  border-radius: 0 6px 6px 0;
}
.docs-toc-label {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.docs-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.docs-toc-list li {
  margin: 0.15rem 0;
}
.docs-toc-list li.docs-toc-l3 { padding-left: 1rem; }
.docs-toc-list li.docs-toc-l4 { padding-left: 2rem; }
.docs-toc-list a {
  color: var(--prizmi-green-hover);
  text-decoration: none;
}
.docs-toc-list a:hover {
  text-decoration: underline;
}

/* Category badges for search results */
.badge.docs-badge-faq {
  background-color: #e0f2fe;
  color: #0369a1;
}

.badge.docs-badge-how_to {
  background-color: #dcfce7;
  color: #166534;
}

.badge.docs-badge-what_if {
  background-color: #fef3c7;
  color: #92400e;
}

@media (max-width: 576px) {
  .docs-tabs .nav-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }
}

/* -------------------------------------------------------------------------
   Contact / Support form (/contact/)
   -------------------------------------------------------------------------
   .contact-page         - Wrapper; constrains width and centres the card.
   .contact-card         - Main card padding (overrides prizmi-card if needed).
   .contact-doc-suggestions - Panel below message field: "Your question might
                              already be answered" with doc links (from contact.js).
   .contact-doc-suggestions-title - Label above the list.
   .contact-doc-list     - Unstyled list of suggestion rows.
   .contact-doc-item     - Each row: link (question) + category badge; border below.
   .contact-success      - Shown after submit: centred message and ref number.
   .contact-success-icon - Green circular checkmark above the success text.
   ------------------------------------------------------------------------- */
.contact-page {
  max-width: 640px;
  margin: 0 auto;
}

.contact-card {
  padding: 2rem;
}

.contact-doc-suggestions {
  margin-top: 0.5rem;
  border: 1px solid var(--prizmi-border);
  border-radius: 8px;
  background: #fff;
  padding: 0.75rem 1rem;
}

.contact-doc-suggestions-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--prizmi-text-muted);
  margin-bottom: 0.5rem;
}

.contact-doc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-doc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--prizmi-border);
  font-size: 0.9rem;
}

.contact-doc-item:last-child {
  border-bottom: none;
}

.contact-doc-item a {
  flex: 1;
  color: var(--prizmi-green);
  text-decoration: none;
}

.contact-doc-item a:hover {
  text-decoration: underline;
}

.contact-success {
  text-align: center;
  padding: 2rem 0;
}

.contact-success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--prizmi-green);
  color: #fff;
  font-size: 1.75rem;
  line-height: 56px;
  text-align: center;
}

@media (max-width: 576px) {
  .contact-card {
    padding: 1.25rem;
  }
}

/* -----------------------------------------------------------------------
   In-app browser banner — shown when the page is opened inside a social
   app's embedded WebView (Messenger, Instagram, etc.)
   ----------------------------------------------------------------------- */

.in-app-browser-banner {
  position: relative;
  z-index: 10;
  background: #fff3cd;
  border-bottom: 1px solid #ffc107;
  padding: 0.75rem 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.in-app-browser-banner .container {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.in-app-browser-banner-text {
  flex: 1;
  min-width: 200px;
  margin: 0;
  color: #664d03;
}

.in-app-browser-copy-btn {
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid #ffc107;
  color: #664d03;
  font-weight: 500;
}

.in-app-browser-copy-btn:hover {
  background: #ffc107;
  color: #000;
}

/* -----------------------------------------------------------------------
   Cookie consent banner
   ----------------------------------------------------------------------- */

.cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  background: var(--prizmi-dark);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.35);
  padding: 1.25rem 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.cookie-consent-banner a {
  color: var(--prizmi-green);
  text-decoration: underline;
}

.cookie-consent-banner a:hover {
  color: var(--prizmi-green-hover);
}

.cookie-consent-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.cookie-consent-text {
  flex: 1;
  min-width: 220px;
}

.cookie-consent-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.cookie-consent-actions .btn {
  font-size: 0.85rem;
  padding: 0.4rem 1rem;
  white-space: nowrap;
}

.btn-consent-accept {
  background: var(--prizmi-green);
  color: #fff;
  border: 1px solid var(--prizmi-green);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}

.btn-consent-accept:hover {
  background: var(--prizmi-green-hover);
  border-color: var(--prizmi-green-hover);
  color: #fff;
}

.btn-consent-reject {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}

.btn-consent-reject:hover {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.btn-consent-customize {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: none;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.4rem 0.5rem;
  font-size: 0.85rem;
}

.btn-consent-customize:hover {
  color: #fff;
}

/* Customisation panel (hidden by default) */
.cookie-consent-details {
  display: none;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.cookie-consent-details.open {
  display: block;
}

.cookie-consent-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
}

/* Label wraps both text and toggle so clicking the slider toggles the checkbox */
.cookie-consent-category-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  cursor: pointer;
  font-size: 0.88rem;
}

.cookie-consent-category label {
  margin: 0;
  cursor: pointer;
  font-size: 0.88rem;
}

.cookie-consent-category small {
  display: block;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
  margin-top: 0.15rem;
}

/* Toggle switch */
.consent-toggle {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

.consent-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.consent-toggle .slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.2s;
}

.consent-toggle .slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.consent-toggle input:checked + .slider {
  background: var(--prizmi-green);
}

.consent-toggle input:checked + .slider::before {
  transform: translateX(18px);
}

/* Small toggle variant for navbar */
.consent-toggle.consent-toggle-sm {
  width: 32px;
  height: 18px;
}
.consent-toggle-sm .slider {
  border-radius: 18px;
}
.consent-toggle-sm .slider::before {
  width: 14px;
  height: 14px;
  left: 2px;
  bottom: 2px;
}
.consent-toggle-sm input:checked + .slider::before {
  transform: translateX(14px);
}

/* Alive (Check-ins) toggle nav item.
 * Label and toggle stay inline at every size so they read as one
 * control. On mobile, font-size scales up to match the rest of the
 * collapsed menu items; on desktop, the label is small to fit the
 * compact navbar.
 */
.alive-toggle-item .alive-toggle-label {
  font-size: 0.8125rem;
  margin-right: 0.5rem;
}

@media (max-width: 767.98px) {
  .alive-toggle-item {
    padding: 0.5rem 0;
  }
  .alive-toggle-item .alive-toggle-label {
    font-size: 1rem;
    margin-right: 0.625rem;
  }
}

/* Alive-toggle toast notification */
.alive-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--prizmi-purple, #5b3a8c);
  color: #fff;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 9999;
  pointer-events: none;
}
.alive-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.cookie-consent-save-row {
  margin-top: 0.75rem;
  text-align: right;
}

.cookie-consent-footer-link {
  color: rgba(255, 255, 255, 0.55) !important;
  text-decoration: none !important;
  margin-left: 0.5rem;
}

.cookie-consent-footer-link:hover {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: underline !important;
}

@media (max-width: 576px) {
  .cookie-consent-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .cookie-consent-actions {
    justify-content: stretch;
  }
  .cookie-consent-actions .btn {
    flex: 1;
    text-align: center;
  }
}

/* =========================================================================
   Homepage (marketing landing page at /)
   =========================================================================
   Styles for agent/home.html: hero, "How it works", feature rows (alternating
   text/media), media placeholders, bottom CTA, and scroll animations.
   Uses --prizmi-* variables from the top of this file. Responsive rules at
   the end of this section stack content on small screens and reduce font sizes.
   ------------------------------------------------------------------------- */

/* ----- Hero ----- */
.homepage-hero {
  background: linear-gradient(180deg, var(--prizmi-dark) 0%, #111 100%);
  padding: 6rem 0 5rem;
  text-align: center;
  margin-top: -56px;
  padding-top: calc(56px + 6rem);
}

.homepage-hero-inner {
  max-width: 720px;
  margin: 0 auto;
}

.homepage-hero-title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.homepage-hero-highlight {
  color: var(--prizmi-green);
}

.homepage-hero-subtitle {
  font-size: 1.2rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 2rem;
}

.homepage-promo-text {
  color: var(--prizmi-green);
  font-weight: 500;
}

.homepage-urgency {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fbbf24;
  letter-spacing: 0.02em;
}

.homepage-hero-note {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.4);
}

/* ----- CTA Buttons ----- */
.homepage-cta-btn {
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.homepage-cta-btn:hover {
  transform: translateY(-1px);
}

.homepage-cta-primary {
  background-color: var(--prizmi-green);
  border-color: var(--prizmi-green);
  color: #fff;
  box-shadow: 0 4px 20px rgba(22, 163, 74, 0.35);
}

.homepage-cta-primary:hover {
  background-color: var(--prizmi-green-hover);
  border-color: var(--prizmi-green-hover);
  color: #fff;
  box-shadow: 0 6px 28px rgba(22, 163, 74, 0.45);
}

.homepage-cta-secondary {
  background-color: transparent;
  border: 2px solid var(--prizmi-green);
  color: var(--prizmi-green);
}

.homepage-cta-secondary:hover {
  background-color: var(--prizmi-green);
  color: #fff;
}

.homepage-cta-muted {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
  margin-top: 0.5rem;
}

/* ----- Waitlist page ----- */
.waitlist-section {
  padding: 5rem 0;
  min-height: 60vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--prizmi-dark) 0%, #1a1a2e 100%);
}

.waitlist-card {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  padding: 3rem 2rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  backdrop-filter: blur(8px);
}

.waitlist-title {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.waitlist-subtitle {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.7;
  margin-bottom: 2rem;
}

.waitlist-subtitle strong {
  color: var(--prizmi-green);
}

.waitlist-form {
  text-align: center;
}

.waitlist-input-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.waitlist-input {
  flex: 1;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.waitlist-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.waitlist-input:focus {
  outline: none;
  border-color: var(--prizmi-green);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.waitlist-submit {
  white-space: nowrap;
}

.waitlist-privacy-note {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 0.75rem;
}

.waitlist-privacy-note a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: underline;
}

.waitlist-success {
  padding: 1rem 0;
}

.waitlist-success-icon {
  color: var(--prizmi-green);
  margin-bottom: 1.5rem;
}

@media (max-width: 575.98px) {
  .waitlist-input-row {
    flex-direction: column;
  }

  .waitlist-card {
    padding: 2rem 1.25rem;
  }

  .waitlist-title {
    font-size: 1.5rem;
  }
}

/* ----- How it works ----- */
.homepage-how-it-works {
  padding: 5rem 0 4rem;
  background-color: #fff;
  border-bottom: 1px solid var(--prizmi-border);
}

.homepage-section-heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--prizmi-text);
  text-align: center;
  margin-bottom: 3rem;
  letter-spacing: -0.01em;
}

.homepage-step-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--prizmi-green-muted);
  color: var(--prizmi-green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.homepage-step-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--prizmi-text);
  margin-bottom: 0.5rem;
}

.homepage-step-desc {
  font-size: 0.95rem;
  color: var(--prizmi-text-muted);
  line-height: 1.6;
  max-width: 280px;
  margin: 0 auto;
}

/* ----- Privacy & security ----- */
.homepage-privacy {
  background: linear-gradient(180deg, var(--prizmi-dark) 0%, #111 100%);
  padding: 5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.homepage-privacy-heading {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: 3rem;
  letter-spacing: -0.01em;
}

.homepage-privacy-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: rgba(22, 163, 74, 0.15);
  color: var(--prizmi-green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.homepage-privacy-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.5rem;
}

.homepage-privacy-desc {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  max-width: 300px;
  margin: 0 auto;
}

.homepage-privacy-detail {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  line-height: 1.7;
  max-width: 680px;
  margin: 3rem auto 0;
}

.homepage-privacy-link {
  color: var(--prizmi-green);
  text-decoration: none;
  font-weight: 500;
}

.homepage-privacy-link:hover {
  color: var(--prizmi-green-hover);
  text-decoration: underline;
}

/* ----- Feature rows ----- */
.homepage-feature-row {
  padding: 5rem 0;
  background-color: #fafafa;
}

.homepage-feature-row-alt {
  background-color: #fff;
}

.homepage-feature-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--prizmi-green);
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.homepage-feature-desc {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--prizmi-text);
  margin-bottom: 1.5rem;
}

.homepage-feature-desc p:last-child {
  margin-bottom: 0;
}

/* ----- Media container ----- */
.homepage-media-container {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  background: var(--prizmi-dark);
}

.homepage-media-img,
.homepage-media-video {
  width: 100%;
  display: block;
  border-radius: 12px;
}

/* ----- Demo playback toggle -----
   homepage.js strips the native `controls` off the feature clips and injects
   this button in their place (that file's header explains why). It is the WCAG
   2.2.2 pause mechanism for a loop that starts on its own, so it can never be
   decorative: it fades in with the pointer, stays put on a touch screen that has
   no hover to reveal it, and is always visible once focused. */
.homepage-media-toggle {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

/* A paused clip is showing a still frame, so the way to start it has to be on
   screen rather than behind a hover the visitor may never perform. Ordered
   before the hover and focus rules, which share its specificity and should
   still win. */
.homepage-media-toggle[data-state="paused"] {
  opacity: 0.85;
}

.homepage-media-container:hover .homepage-media-toggle,
.homepage-media-container:focus-within .homepage-media-toggle {
  opacity: 1;
}

.homepage-media-toggle:hover {
  background: rgba(0, 0, 0, 0.75);
}

.homepage-media-toggle:focus-visible {
  opacity: 1;
  outline: 2px solid var(--prizmi-green);
  outline-offset: 2px;
}

/* No hover to reveal it on a touch screen, so keep it visible but quiet. */
@media (hover: none) {
  .homepage-media-toggle {
    opacity: 0.7;
  }
}

.homepage-media-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  color: rgba(255, 255, 255, 0.25);
  gap: 1rem;
  font-size: 0.9rem;
}

/* ----- Bottom CTA ----- */
.homepage-bottom-cta {
  background: linear-gradient(180deg, #111 0%, var(--prizmi-dark) 100%);
  padding: 5rem 0;
}

.homepage-bottom-cta-title {
  font-size: 2.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.homepage-bottom-cta-desc {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 2rem;
}

/* ----- Scroll animations ----- */
.homepage-animate {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.homepage-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.homepage-animate[data-animate="slide-in-left"] {
  transform: translateX(-40px);
}

.homepage-animate[data-animate="slide-in-right"] {
  transform: translateX(40px);
}

.homepage-animate[data-animate="slide-in-left"].is-visible,
.homepage-animate[data-animate="slide-in-right"].is-visible {
  transform: translateX(0);
}

/* ----- Responsive ----- */
@media (max-width: 767.98px) {
  .homepage-hero {
    padding: 4rem 0 3rem;
    padding-top: calc(56px + 4rem);
  }

  .homepage-hero-title {
    font-size: 2rem;
  }

  .homepage-hero-subtitle {
    font-size: 1rem;
  }

  .homepage-how-it-works {
    padding: 3rem 0;
  }

  .homepage-privacy {
    padding: 3rem 0;
  }

  .homepage-privacy-heading {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }

  .homepage-privacy-desc {
    max-width: 100%;
  }

  .homepage-section-heading {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }

  .homepage-feature-row {
    padding: 3rem 0;
  }

  .homepage-feature-title {
    font-size: 1.5rem;
  }

  .homepage-feature-desc {
    font-size: 1rem;
  }

  .homepage-media-placeholder {
    min-height: 220px;
  }

  .homepage-bottom-cta {
    padding: 3rem 0;
  }

  .homepage-bottom-cta-title {
    font-size: 1.5rem;
  }

  .homepage-cta-btn {
    font-size: 0.95rem;
    padding: 0.65rem 1.5rem;
  }
}

@media (max-width: 575.98px) {
  .homepage-hero-title {
    font-size: 1.75rem;
  }

  .homepage-step-desc {
    max-width: 100%;
  }
}


/* =========================================================================
   Dashboard Onboarding Tour (Driver.js v2 theme overrides)
   ========================================================================= */

.driver-popover {
  background: var(--prizmi-dark) !important;
  color: var(--prizmi-light) !important;
  border: 2px solid var(--prizmi-green) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
  max-width: 360px !important;
  padding: 20px !important;
}

.driver-popover-title {
  color: var(--prizmi-green) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
}

.driver-popover-description {
  color: rgba(250, 250, 250, 0.9) !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  margin-top: 6px !important;
}

.driver-popover-progress-text {
  color: rgba(250, 250, 250, 0.45) !important;
  font-size: 0.75rem !important;
}

.driver-popover-next-btn,
.driver-popover-prev-btn {
  border-radius: 6px !important;
  font-weight: 500 !important;
  padding: 6px 16px !important;
  font-size: 0.85rem !important;
}

.driver-popover-next-btn {
  background: var(--prizmi-green) !important;
  color: #fff !important;
  border: none !important;
}

.driver-popover-next-btn:hover {
  background: var(--prizmi-green-hover) !important;
}

.driver-popover-prev-btn {
  background: transparent !important;
  border: 1px solid var(--prizmi-green) !important;
  color: var(--prizmi-green) !important;
}

.driver-popover-prev-btn:hover {
  background: var(--prizmi-green-muted) !important;
}

.driver-popover-close-btn {
  color: rgba(250, 250, 250, 0.6) !important;
}

.driver-popover-close-btn:hover {
  color: var(--prizmi-light) !important;
}

/* Tour help button in navbar */
#tour-help-btn {
  font-size: 0.85rem;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  transition: border-color 0.2s, color 0.2s;
  text-decoration: none;
  cursor: pointer;
  margin-left: 0.5rem;
  margin-right: 0.75rem;
}

#tour-help-btn:hover {
  border-color: var(--prizmi-green);
  color: var(--prizmi-green);
}

/* Welcome modal for tour prompt */
.tour-welcome-modal .modal-content {
  background: var(--prizmi-dark);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

.tour-welcome-modal .modal-body {
  text-align: center;
  padding: 2.5rem 2rem;
}

.tour-welcome-modal .modal-body h4 {
  color: var(--prizmi-green);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.tour-welcome-modal .modal-body p {
  color: rgba(250, 250, 250, 0.8);
  margin-bottom: 1.5rem;
}

/* =========================================================================
   Videos library (/videos/, /videos/category/<key>/, /videos/<slug>/)
   =========================================================================
   Styles for agent/videos.html, agent/video_detail.html, and the shared card
   partial. Built on the same vocabulary as the homepage: the dark full-bleed
   hero (which cancels body's 56px navbar offset the way .homepage-hero does),
   .skill-category-pill for the category chips, and the --prizmi-* variables at
   the top of this file.

   Two structural notes:

   - The player is a real <iframe> in the server-rendered HTML (Google will not
     index a video that needs a click to appear). .video-player reserves the 16:9
     box up front so the frame arriving cannot shift the page (CLS), and
     .video-player-poster sits *behind* the frame as an instant first-party paint
     — never in front, which would hide the video from indexing.
   - Cards are a single <a> with span children. The grid is CSS Grid so that
     JavaScript can reorder cards by relevance simply by re-appending nodes,
     with no absolute positioning to maintain.

   Responsive: 3 columns >= 1200px, 2 from 768px, 1 below, with larger tap
   targets on phones. Motion is disabled under prefers-reduced-motion.
   ------------------------------------------------------------------------- */

/* ----- Hero ----- */
.videos-hero {
  background: linear-gradient(180deg, var(--prizmi-dark) 0%, #111 100%);
  color: var(--prizmi-light);
  padding: 4.5rem 0 3rem;
  margin-top: -56px;
  padding-top: calc(56px + 4rem);
}

.videos-breadcrumb {
  font-size: 0.85rem;
  color: rgba(250, 250, 250, 0.55);
  margin-bottom: 1rem;
}

.videos-breadcrumb a {
  color: rgba(250, 250, 250, 0.75);
  text-decoration: none;
}

.videos-breadcrumb a:hover,
.videos-breadcrumb a:focus-visible {
  color: var(--prizmi-green);
  text-decoration: underline;
}

.videos-breadcrumb span {
  margin: 0 0.4rem;
}

.videos-hero-title {
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.videos-hero-lead {
  font-size: 1.1rem;
  color: rgba(250, 250, 250, 0.75);
  max-width: 44rem;
  margin-bottom: 2rem;
}

.videos-search {
  display: flex;
  gap: 0.5rem;
  max-width: 40rem;
}

.videos-search-input {
  font-size: 1.05rem;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--prizmi-light);
}

.videos-search-input::placeholder {
  /* 0.45 composites to ~4.24:1 on this background, under the 4.5:1 AA floor,
     and the placeholder carries the only hint about what is searchable. */
  color: rgba(250, 250, 250, 0.6);
}

.videos-search-input:focus {
  background: rgba(255, 255, 255, 0.1);
  color: var(--prizmi-light);
  border-color: var(--prizmi-green);
  box-shadow: 0 0 0 0.2rem var(--prizmi-green-muted);
}

.videos-search-submit {
  border-radius: 999px;
  padding-inline: 1.5rem;
  white-space: nowrap;
}

.videos-search-status {
  min-height: 1.4rem;
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  color: rgba(250, 250, 250, 0.6);
}

.videos-hero-sub {
  margin: 1.5rem 0 0;
  font-size: 0.92rem;
  color: rgba(250, 250, 250, 0.6);
}

.videos-hero-sub a {
  color: var(--prizmi-green);
}

/* ----- Body ----- */
.videos-body {
  background-color: var(--prizmi-light);
  padding: 2.5rem 0 4rem;
}

.videos-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.videos-chips .skill-category-pill {
  text-decoration: none;
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
}

.videos-chip-count {
  margin-left: 0.4rem;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

/* ----- Featured card ----- */
.video-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: center;
  background: #fff;
  border: 1px solid var(--prizmi-border);
  border-radius: 16px;
  padding: 1.25rem;
  margin-bottom: 2.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.video-featured:hover,
.video-featured:focus-visible {
  border-color: var(--prizmi-green);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  color: inherit;
}

.video-featured-thumb {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: var(--prizmi-dark);
  aspect-ratio: 16 / 9;
}

.video-featured-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-featured-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.video-featured-flag {
  align-self: flex-start;
  background: var(--prizmi-green-muted);
  color: var(--prizmi-green-hover);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.video-featured-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}

.video-featured-summary {
  color: var(--prizmi-text-muted);
  line-height: 1.55;
}

.video-featured-cta {
  color: var(--prizmi-green);
  font-weight: 600;
}

/* ----- Grid + cards ----- */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.video-card {
  min-width: 0;
}

.video-card.is-hidden {
  display: none;
}

.video-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--prizmi-border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.video-card-link:hover,
.video-card-link:focus-visible {
  border-color: var(--prizmi-green);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  color: inherit;
}

.video-card-thumb {
  position: relative;
  display: block;
  background: var(--prizmi-dark);
  aspect-ratio: 16 / 9;
}

.video-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: rgba(13, 13, 13, 0.72);
  color: #fff;
  padding-left: 3px; /* optically centre the triangle */
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.video-card-link:hover .video-card-play,
.video-featured:hover .video-card-play {
  background: var(--prizmi-green);
}

.video-card-duration {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  background: rgba(13, 13, 13, 0.85);
  color: #fff;
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.video-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem;
}

.video-card-category {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--prizmi-green-hover);
}

.video-card-title {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--prizmi-text);
}

.video-card-summary {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--prizmi-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----- Empty state + outro ----- */
.videos-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--prizmi-text-muted);
}

.videos-empty-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--prizmi-text);
  margin-bottom: 0.4rem;
}

.videos-outro {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--prizmi-border);
  text-align: center;
}

.videos-outro-title {
  font-size: 1.2rem;
  font-weight: 600;
}

.videos-outro-body {
  color: var(--prizmi-text-muted);
  margin: 0;
}

/* ----- Watch page ----- */
.video-detail {
  padding: 1.5rem 0 3rem;
}

.video-breadcrumb {
  font-size: 0.85rem;
  color: var(--prizmi-text-muted);
  margin-bottom: 1rem;
}

.video-breadcrumb span {
  margin: 0 0.4rem;
}

/* The 16:9 box is reserved before anything loads, so replacing the facade with
   the iframe cannot shift the page. */
.video-player {
  position: relative;
  aspect-ratio: 16 / 9;
  /* Clicking a chapter scrolls the player into view (video-player.js). The
     navbar is position:fixed, so it covers the top of the viewport and took the
     first 62px of the video with it: the seek worked, but you could not see
     what you had seeked to. scroll-margin-top is the browser's own answer —
     scrollIntoView aligns to the margin box rather than the border box.

     56px is the navbar constant body's padding-top is already built on. The bar
     measures a few pixels taller than that in practice, so the added 1.5rem is
     doing two jobs: absorbing the difference and leaving the video visibly
     clear of the bar instead of welded to it. Measured at 1440x900 and 390x844
     after a chapter click — none of the player is covered at either size. */
  scroll-margin-top: calc(56px + 1.5rem);
  border-radius: 12px;
  overflow: hidden;
  background: var(--prizmi-dark);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  /* The gap under the player used to come from .video-player-note, which was
     deleted with the facade — leaving the h1 welded to the bottom edge of the
     video at every viewport (Bootstrap reboot zeroes h1's margin-top). It
     belongs on the player either way: the spacing should not depend on whether
     an optional paragraph happens to be rendered beneath it. */
  margin-bottom: 1.5rem;
}

/* Every child of .video-player is absolutely positioned, so the box has no
   in-flow content to give it a height. Where aspect-ratio is unsupported
   (Safari before 15, i.e. iOS 14 and earlier) it therefore computes to zero and
   the poster and play button do not render at all — an invisible player, not a
   degraded one. The classic intrinsic-ratio hack fills that in.

   Scoped behind @supports rather than declared alongside aspect-ratio: setting a
   definite height and an aspect ratio on the same box makes the used size depend
   on sizing rules that are easy to get subtly wrong, and only one of the two is
   ever needed. */
@supports not (aspect-ratio: 16 / 9) {
  .video-player {
    height: 0;
    padding-top: 56.25%;
  }
}

.video-player iframe,
.video-player-poster {
  position: absolute;
  /* Longhands as well as `inset`: the shorthand only shipped in Safari 14.1,
     which is *later* than the versions the aspect-ratio fallback above exists
     for. Without these the frame would be laid out at its static position on
     exactly those browsers and clipped by overflow: hidden — a blank box, the
     failure the fallback was added to prevent. */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Behind the frame, never in front: an element covering the video disqualifies
   it from Google's video indexing. Both are in the same stacking context, so
   this is what guarantees the order regardless of source order. */
.video-player-poster {
  z-index: 0;
  object-fit: cover;
  display: block;
}

.video-player iframe {
  z-index: 1;
}

/* Previous/next within a series. Two equal columns on a wide screen, stacked on
   a phone; "next" holds the right-hand column even when it is the only link, so
   the pair always reads as a sequence. */
.video-series-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 2rem 0 0;
}

.video-series-link {
  display: block;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--prizmi-border);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.video-series-link:hover {
  border-color: var(--prizmi-green);
  transform: translateY(-2px);
}

.video-series-next {
  grid-column: 2;
  text-align: right;
}

.video-series-direction {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--prizmi-text-muted);
  margin-bottom: 0.2rem;
}

.video-series-title {
  display: block;
  font-weight: 600;
  line-height: 1.35;
}

/* Shown only when the YouTube player could not load at all. */
/* Contrast here is not decoration. This note used to appear only after someone
   pressed play, so a low-vision visitor had already chosen to interact with the
   player; it now appears unprompted on page load whenever YouTube is blocked,
   and it is the only thing on the page explaining why the video is missing. It
   has to be readable by the people most likely to be running the blocker.

   Measured against the note's own background — rgba(0,0,0,0.04) over the #fafafa
   body computes to about #f0f0f0 — the previous values failed WCAG 2.1 AA (1.4.3)
   for normal text: --prizmi-text-muted #6b7280 at 4.24:1 and the inherited link
   green #16a34a at 2.89:1, against the 4.5:1 required. #4b5563 gives 6.63:1 and
   #14532d gives 7.99:1. */
.video-player-error {
  font-size: 0.9rem;
  color: #4b5563;
  background: rgba(0, 0, 0, 0.04);
  border-left: 3px solid var(--prizmi-green);
  padding: 0.75rem 1rem;
  border-radius: 0 8px 8px 0;
  margin: 0 0 1.5rem;
}

.video-player-error a {
  color: #14532d;
  text-decoration: underline;
}

.video-title {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.video-meta {
  font-size: 0.9rem;
  color: var(--prizmi-text-muted);
  margin-bottom: 1.5rem;
}

.video-meta span {
  margin: 0 0.45rem;
}

.video-meta-category {
  color: var(--prizmi-green-hover);
  font-weight: 600;
  text-decoration: none;
}

.video-description {
  font-size: 1.02rem;
  line-height: 1.7;
}

.video-description p:last-child {
  margin-bottom: 0;
}

.video-cta-row {
  margin: 1.75rem 0 2.5rem;
}

.video-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.9rem;
}

.video-chapters,
.video-transcript,
.video-questions {
  margin-bottom: 2.5rem;
}

.video-chapter-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--prizmi-border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.video-chapter-list li + li {
  border-top: 1px solid var(--prizmi-border);
}

.video-chapter {
  display: flex;
  gap: 0.9rem;
  width: 100%;
  padding: 0.7rem 1rem;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.video-chapter:hover,
.video-chapter:focus-visible {
  background: var(--prizmi-green-muted);
}

.video-chapter-time {
  color: var(--prizmi-green-hover);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 3.2rem;
}

.video-chapter-label {
  color: var(--prizmi-text);
}

.video-transcript-details {
  border: 1px solid var(--prizmi-border);
  border-radius: 12px;
  background: #fff;
  padding: 0.9rem 1rem;
}

.video-transcript-details summary {
  cursor: pointer;
  font-weight: 600;
}

.video-transcript-body {
  margin-top: 1rem;
  max-height: 26rem;
  overflow-y: auto;
  color: var(--prizmi-text-muted);
  line-height: 1.7;
}

.video-question-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0;
}

/* ----- Watch page sidebar ----- */
.video-sidebar .video-section-title {
  margin-top: 0.5rem;
}

.video-related-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.video-doc-links {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

.video-doc-links li + li {
  margin-top: 0.5rem;
}

.video-subscribe {
  background: #fff;
  border: 1px solid var(--prizmi-border);
  border-radius: 12px;
  padding: 1.1rem;
  margin-bottom: 1.5rem;
}

.video-subscribe p {
  font-size: 0.9rem;
  color: var(--prizmi-text-muted);
  margin-bottom: 0.75rem;
}

.video-back {
  font-size: 0.9rem;
  margin: 0;
}

/* ----- Responsive ----- */
@media (max-width: 1199.98px) {
  .videos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .videos-hero {
    padding: 3.5rem 0 2.25rem;
    padding-top: calc(56px + 2.5rem);
  }

  .videos-hero-title {
    font-size: 1.9rem;
  }

  .videos-hero-lead {
    font-size: 1rem;
  }

  .videos-search {
    flex-direction: column;
  }

  .videos-search-submit {
    width: 100%;
  }

  .videos-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  .video-featured {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .video-featured-title {
    font-size: 1.25rem;
  }

  .video-title {
    font-size: 1.45rem;
  }

  /* Comfortable thumb targets on a phone: padding alone gave ~35px, and these
     sit 0.5rem apart in a wrapping row, which is where undersized targets
     actually cause mistaps. */
  .videos-chips .skill-category-pill {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }

  .video-chapter {
    padding: 0.9rem 1rem;
  }

  .video-question-links .btn {
    width: 100%;
  }

  .video-series-nav {
    grid-template-columns: 1fr;
  }

  .video-series-next {
    grid-column: 1;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-card-link,
  .video-featured,
  .video-card-play,
  .video-series-link {
    transition: none;
  }

  /* homepage.js leaves every demo clip paused under this preference, so the
     control that starts one must not be hidden behind a hover. Both selectors,
     to outrank the [data-state="paused"] rule rather than tie with it. */
  .homepage-media-toggle,
  .homepage-media-toggle[data-state="paused"] {
    opacity: 1;
    transition: none;
  }

  .video-card-link:hover,
  .video-card-link:focus-visible,
  .video-featured:hover,
  .video-featured:focus-visible,
  .video-series-link:hover,
  .video-series-link:focus-visible {
    transform: none;
  }
}

/* Secondary path out of the homepage's bottom CTA for a visitor who wants to
   see the product work before making an account. Lives with the Videos block
   because it only renders when ENABLE_VIDEOS_PAGE is on. */
.homepage-cta-videos {
  margin: 1.5rem 0 0;
  font-size: 0.95rem;
  color: rgba(250, 250, 250, 0.65);
}

.homepage-cta-videos a {
  color: var(--prizmi-green);
}

/* Scheduled work that would be paused or cancelled by turning off / removing a
   messaging app. Rendered inside the dashboard's channel confirmation dialogs
   from /api/channels/<id>/dependents/. Green left rule rather than a red alert
   panel: nothing has gone wrong, the user is being shown a consequence before
   they choose it. */
.channel-impact {
  border-left: 3px solid var(--prizmi-green);
  background-color: var(--prizmi-green-muted);
  border-radius: 0 6px 6px 0;
  padding: 0.75rem 0.9rem;
}

.channel-impact-list {
  max-height: 11rem;
  overflow-y: auto;
}

.channel-impact-item {
  display: flex;
  flex-direction: column;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(22, 163, 74, 0.18);
}

.channel-impact-item:last-child {
  border-bottom: 0;
}

.channel-impact-title {
  font-weight: 500;
  color: var(--prizmi-text);
  overflow-wrap: anywhere;
}

.channel-impact-when {
  margin-top: 0.1rem;
}