/* docs.html body CSS, bundled in original cascade order (cleanup stage 6a). This file is now the source: edit it directly; deploy-site.ps1 renames it by content hash. */
/* ---- style#sla-unified-dossier-ladder-styles ---- */
#sla-dossier-modal-overlay #sla-rank-ladder-section {
    margin: 12px 0 14px 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(8, 13, 24, 0.92);
    border: 1px solid rgba(var(--sla-accent-rgb), 0.22);
    box-sizing: border-box;
  }
  #sla-dossier-modal-overlay .sla-ladder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-family: Inter, system-ui, -apple-system, sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--sla-text-muted);
    text-transform: uppercase;
  }
  #sla-dossier-modal-overlay .sla-ladder-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }
  #sla-dossier-modal-overlay .sla-ladder-rung {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    border-radius: 8px;
    background: rgba(var(--sla-surface-slate-rgb), 0.75);
    border: 1px solid rgba(var(--sla-white-rgb), 0.08);
    cursor: pointer;
    transition: border-color 0.14s ease, background 0.14s ease;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    user-select: none;
  }
  #sla-dossier-modal-overlay .sla-ladder-rung:hover {
    border-color: rgba(var(--sla-accent-rgb), 0.65);
    background: rgba(var(--sla-accent-rgb), 0.12);
  }
  #sla-dossier-modal-overlay .sla-ladder-rung[data-active-rung="true"] {
    background: rgba(var(--sla-positive-rgb), 0.16);
    border: 1px solid var(--sla-positive);
    box-shadow: 0 0 14px rgba(var(--sla-positive-rgb), 0.22);
  }
  #sla-dossier-modal-overlay .sla-ladder-rung-rank {
    font-size: 10px;
    font-weight: 800;
    color: var(--sla-text-muted);
    line-height: 1.2;
  }
  #sla-dossier-modal-overlay .sla-ladder-rung[data-active-rung="true"] .sla-ladder-rung-rank {
    color: var(--sla-positive);
  }
  #sla-dossier-modal-overlay .sla-ladder-rung-stake {
    font-size: 11.5px;
    font-weight: 900;
    color: var(--sla-text);
    margin-top: 2px;
    line-height: 1.2;
  }
  #sla-dossier-modal-overlay .sla-ladder-rung[data-active-rung="true"] .sla-ladder-rung-stake {
    color: var(--sla-positive-soft);
  }
  #sla-search-autocomplete-dropdown {
    position: fixed;
    z-index: 99998;
    background: rgba(8, 12, 22, 0.98);
    border: 1px solid rgba(var(--sla-accent-rgb), 0.42);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(var(--sla-black-rgb), 0.85), 0 0 25px rgba(var(--sla-accent-rgb), 0.14);
    backdrop-filter: blur(16px);
    padding: 8px;
    display: none;
    max-height: 360px;
    overflow-y: auto;
    font-family: Inter, system-ui, -apple-system, sans-serif;
  }
  .sla-ac-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s ease;
    border-bottom: 1px solid rgba(var(--sla-white-rgb), 0.04);
  }
  .sla-ac-row:last-child {
    border-bottom: none;
  }
  .sla-ac-row:hover {
    background: rgba(var(--sla-accent-rgb), 0.12);
  }

/* ---- /sla-css-1125b28ea7.css ---- */
#sla-how-agentsla-works-section {
    max-width: 1220px;
    margin: 48px auto 56px auto;
    padding: 0 20px;
    box-sizing: border-box;
    font-family: Inter, system-ui, -apple-system, sans-serif;
    position: relative;
    z-index: 10;
  }
  .sla-tf-sec-header {
    text-align: center;
    margin-bottom: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .sla-tf-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(var(--sla-warning-rgb), 0.12);
    border: 1px solid rgba(var(--sla-warning-rgb), 0.38);
    color: var(--sla-warning);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  #sla-how-agentsla-works-section .sla-tf-hero-title,
  #sla-typeform-modal-backdrop .sla-tf-hero-title {
    font-size: clamp(2.5rem, 5.6vw, 4.5rem) !important;
    font-weight: 900 !important;
    color: var(--sla-text) !important;
    letter-spacing: -0.035em !important;
    line-height: 1.05 !important;
    margin: 0 auto 16px auto !important;
    text-transform: uppercase !important;
    max-width: 1040px !important;
    text-align: center !important;
  }
  #sla-how-agentsla-works-section .sla-tf-hero-subtitle,
  #sla-typeform-modal-backdrop .sla-tf-hero-subtitle {
    font-size: clamp(16px, 1.8vw, 19px) !important;
    color: var(--sla-text-muted) !important;
    line-height: 1.65 !important;
    max-width: 780px !important;
    margin: 0 auto !important;
    font-weight: 400 !important;
    text-align: center !important;
  }
  .sla-tf-card-logos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
  }
  .sla-tf-logo-stack {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .sla-tf-logo-avatar {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--sla-surface-slate);
    border: 1px solid rgba(var(--sla-white-rgb), 0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(var(--sla-black-rgb), 0.45);
  }
  .sla-tf-logo-avatar img {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: contain;
    background: var(--sla-white);
    padding: 1px;
  }
  .sla-tf-brand-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(var(--sla-surface-slate-rgb), 0.9);
    border: 1px solid rgba(var(--sla-white-rgb), 0.09);
    color: var(--sla-text-2);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .sla-tf-brand-chip img {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    object-fit: contain;
    display: block;
  }
  .sla-tf-persona-switcher {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
  }
  .sla-tf-persona-pill {
    background: rgba(var(--sla-surface-slate-rgb), 0.85);
    border: 1px solid rgba(var(--sla-white-rgb), 0.1);
    color: var(--sla-text-muted);
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.18s ease;
  }
  .sla-tf-persona-pill:hover {
    border-color: rgba(var(--sla-accent-rgb), 0.55);
    color: var(--sla-text);
  }
  .sla-tf-persona-pill[data-active="true"] {
    background: rgba(var(--sla-positive-rgb), 0.16);
    border-color: var(--sla-positive);
    color: var(--sla-positive-soft);
    box-shadow: 0 0 18px rgba(var(--sla-positive-rgb), 0.2);
  }
  .sla-tf-shell {
    background: linear-gradient(165deg, rgba(var(--sla-surface-2-rgb), 0.96) 0%, rgba(6, 10, 20, 0.98) 100%);
    border: 1px solid rgba(var(--sla-accent-rgb), 0.32);
    border-radius: 22px;
    padding: 32px 38px;
    box-shadow: 0 24px 64px rgba(var(--sla-black-rgb), 0.82), 0 0 32px rgba(var(--sla-accent-rgb), 0.08);
    position: relative;
    overflow: hidden;
  }
  @media (max-width: 768px) {
    .sla-tf-shell { padding: 22px 18px; }
  }
  .sla-tf-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(var(--sla-white-rgb), 0.07);
    flex-wrap: wrap;
  }
  .sla-tf-step-counter {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--sla-accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .sla-tf-progress-wrap {
    flex: 1;
    max-width: 320px;
    height: 6px;
    background: rgba(var(--sla-white-rgb), 0.08);
    border-radius: 999px;
    overflow: hidden;
  }
  .sla-tf-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sla-positive) 0%, var(--sla-accent) 100%);
    border-radius: 999px;
    transition: width 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .sla-tf-stage {
    animation: slaTfSlideIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes slaTfSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .sla-tf-q-title {
    font-size: clamp(21px, 2.8vw, 29px);
    font-weight: 900;
    color: var(--sla-text);
    letter-spacing: -0.02em;
    margin: 0 0 8px 0;
    line-height: 1.25;
  }
  .sla-tf-q-sub {
    font-size: 14.5px;
    color: var(--sla-text-muted);
    margin: 0 0 24px 0;
    line-height: 1.6;
  }
  .sla-tf-options-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  @media (max-width: 920px) {
    .sla-tf-options-list { grid-template-columns: 1fr; }
  }
  .sla-tf-option-card {
    background: rgba(var(--sla-surface-slate-rgb), 0.78);
    border: 1px solid rgba(var(--sla-white-rgb), 0.1);
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    user-select: none;
  }
  .sla-tf-option-card:hover {
    border-color: var(--sla-accent);
    background: rgba(var(--sla-accent-rgb), 0.1);
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(var(--sla-black-rgb), 0.55);
  }
  .sla-tf-option-card[data-selected="true"] { background: rgba(var(--sla-surface-slate-rgb), 0.78); border-color: rgba(var(--sla-white-rgb), 0.1); box-shadow: none; }
  .sla-tf-keybadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 9px;
    border-radius: 6px;
    background: rgba(var(--sla-accent-rgb), 0.14);
    border: 1px solid rgba(var(--sla-accent-rgb), 0.4);
    color: var(--sla-accent);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 800;
    width: fit-content;
  }
  .sla-tf-opt-heading {
    font-size: 16px;
    font-weight: 800;
    color: var(--sla-text);
    line-height: 1.3;
  }
  .sla-tf-opt-body {
    font-size: 13px;
    color: var(--sla-text-muted);
    line-height: 1.55;
  }
  .sla-tf-opt-metric {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 800;
    color: var(--sla-positive);
    padding-top: 8px;
    border-top: 1px solid rgba(var(--sla-white-rgb), 0.06);
  }

  /* Page 04: "THE AUTONOMOUS TRUST" Mirrored Chart Design */
  .sla-arch-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 18px 0 24px 0;
  }
  @media (max-width: 860px) {
    .sla-arch-chart-grid { grid-template-columns: 1fr; }
  }
  .sla-arch-col-card {
    border-radius: 20px;
    padding: 26px 28px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .sla-arch-col-legacy {
    background: linear-gradient(180deg, rgba(var(--sla-surface-slate-rgb), 0.72) 0%, rgba(9, 13, 24, 0.92) 100%);
    border: 1px solid rgba(var(--sla-white-rgb), 0.1);
    box-shadow: inset 0 1px 0 rgba(var(--sla-white-rgb), 0.04);
  }
  .sla-arch-col-sovereign {
    background: linear-gradient(165deg, rgba(var(--sla-positive-rgb), 0.12) 0%, rgba(10, 22, 40, 0.96) 55%, rgba(6, 12, 24, 0.98) 100%);
    border: 1.5px solid rgba(var(--sla-positive-rgb), 0.55);
    box-shadow: 0 20px 50px rgba(var(--sla-black-rgb), 0.65), 0 0 36px rgba(var(--sla-positive-rgb), 0.16);
  }
  .sla-arch-col-topbadge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    width: fit-content;
    margin-bottom: 14px;
  }
  .sla-arch-badge-legacy {
    background: rgba(var(--sla-danger-rgb), 0.12);
    border: 1px solid rgba(var(--sla-danger-rgb), 0.35);
    color: var(--sla-danger-soft);
  }
  .sla-arch-badge-sovereign {
    background: rgba(var(--sla-positive-rgb), 0.18);
    border: 1px solid rgba(var(--sla-positive-rgb), 0.5);
    color: #34d399;
  }
  .sla-arch-col-heading {
    font-size: 20px;
    font-weight: 900;
    color: var(--sla-text);
    letter-spacing: -0.02em;
    margin: 0 0 16px 0;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(var(--sla-white-rgb), 0.08);
  }
  .sla-arch-row-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .sla-arch-row-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 15px;
    border-radius: 13px;
    background: rgba(5, 9, 18, 0.65);
    border: 1px solid rgba(var(--sla-white-rgb), 0.06);
  }
  .sla-arch-col-sovereign .sla-arch-row-item {
    background: rgba(6, 14, 26, 0.82);
    border-color: rgba(var(--sla-positive-rgb), 0.25);
  }
  .sla-arch-row-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .sla-arch-icon-x {
    background: rgba(var(--sla-danger-rgb), 0.16);
    border: 1px solid rgba(var(--sla-danger-rgb), 0.4);
    color: var(--sla-danger-soft);
  }
  .sla-arch-icon-check {
    background: rgba(var(--sla-positive-rgb), 0.22);
    border: 1px solid rgba(var(--sla-positive-rgb), 0.55);
    color: var(--sla-positive);
  }
  .sla-arch-row-label {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-bottom: 3px;
  }
  .sla-arch-row-text {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--sla-text-3);
  }
  .sla-arch-col-sovereign .sla-arch-row-text {
    color: var(--sla-text);
    font-weight: 500;
  }

  /* Interactive Protocol Lab Pages (Pages 05, 06, 07) */
  .sla-tf-single-lab-stage {
    max-width: 760px;
    margin: 0 auto;
    background: rgba(var(--sla-surface-slate-rgb), 0.88);
    border: 1px solid rgba(var(--sla-accent-rgb), 0.35);
    border-radius: 18px;
    padding: 28px 30px;
    box-shadow: 0 18px 45px rgba(var(--sla-black-rgb), 0.6);
    transition: all 0.22s ease;
  }
  .sla-tf-single-lab-stage[data-step-done="true"] {
    border-color: var(--sla-positive);
    background: linear-gradient(165deg, rgba(var(--sla-positive-rgb), 0.14) 0%, rgba(var(--sla-surface-slate-rgb), 0.92) 100%);
    box-shadow: 0 0 32px rgba(var(--sla-positive-rgb), 0.2);
  }
  .sla-tf-single-lab-stage[data-verdict="warn"] {
    border-color: var(--sla-warning) !important;
    background: linear-gradient(165deg, rgba(var(--sla-warning-rgb), 0.14) 0%, rgba(var(--sla-surface-slate-rgb), 0.94) 100%) !important;
    box-shadow: 0 0 32px rgba(var(--sla-warning-rgb), 0.18) !important;
  }
  .sla-tf-single-lab-stage[data-verdict="danger"] {
    border-color: var(--sla-danger) !important;
    background: linear-gradient(165deg, rgba(var(--sla-danger-rgb), 0.15) 0%, rgba(var(--sla-surface-slate-rgb), 0.95) 100%) !important;
    box-shadow: 0 0 32px rgba(var(--sla-danger-rgb), 0.2) !important;
  }
  .sla-tf-step-status {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.05em;
  }
  .sla-tf-step-status[data-done="false"] {
    background: rgba(var(--sla-accent-rgb), 0.14);
    color: var(--sla-accent);
    border: 1px solid rgba(var(--sla-accent-rgb), 0.35);
  }
  .sla-tf-step-status[data-done="true"] {
    background: rgba(var(--sla-positive-rgb), 0.2);
    color: var(--sla-positive);
    border: 1px solid var(--sla-positive);
  }
  .sla-tf-step-status[data-verdict="warn"] {
    background: rgba(var(--sla-warning-rgb), 0.2) !important;
    color: #fdba74 !important;
    border: 1px solid var(--sla-warning) !important;
  }
  .sla-tf-step-status[data-verdict="danger"] {
    background: rgba(var(--sla-danger-rgb), 0.22) !important;
    color: #fca5a5 !important;
    border: 1px solid var(--sla-danger) !important;
  }
  .sla-tf-lab-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(5, 9, 18, 0.94);
    border: 1px solid rgba(var(--sla-accent-rgb), 0.42);
    border-radius: 12px;
    padding: 13px 16px;
    color: var(--sla-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    outline: none;
    margin-bottom: 12px;
  }
  .sla-tf-lab-input:focus {
    border-color: var(--sla-positive);
    box-shadow: 0 0 16px rgba(var(--sla-positive-rgb), 0.28);
  }
  .sla-tf-lab-btn {
    width: 100%;
    background: rgba(var(--sla-accent-rgb), 0.18);
    color: var(--sla-accent);
    border: 1px solid rgba(var(--sla-accent-rgb), 0.52);
    border-radius: 12px;
    padding: 13px 18px;
    font-size: 12.5px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.16s ease;
  }
  .sla-tf-lab-btn:hover {
    background: rgba(var(--sla-accent-rgb), 0.3);
    color: var(--sla-text);
  }
  .sla-tf-lab-btn[data-done="true"] {
    background: rgba(var(--sla-positive-rgb), 0.24);
    color: var(--sla-positive-soft);
    border-color: var(--sla-positive);
  }
  .sla-tf-lab-btn[data-verdict="warn"] {
    background: rgba(var(--sla-warning-rgb), 0.22) !important;
    color: #fed7aa !important;
    border-color: var(--sla-warning) !important;
  }
  .sla-tf-lab-btn[data-verdict="danger"] {
    background: rgba(var(--sla-danger-rgb), 0.24) !important;
    color: #fecaca !important;
    border-color: var(--sla-danger) !important;
  }
  .sla-tf-lab-output {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(4, 8, 16, 0.92);
    border: 1px solid rgba(var(--sla-white-rgb), 0.09);
    color: var(--sla-text-3);
    margin-top: 14px;
  }
  .sla-tf-footer-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(var(--sla-white-rgb), 0.07);
    flex-wrap: wrap;
  }
  .sla-tf-action-btn {
    background: linear-gradient(135deg, var(--sla-positive) 0%, var(--sla-positive-strong) 100%);
    color: #04130d;
    border: none;
    border-radius: 999px;
    padding: 11px 24px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.15s ease;
  }
  .sla-tf-action-btn:hover {
    opacity: 0.92;
  }
  .sla-tf-secondary-btn {
    background: rgba(var(--sla-accent-rgb), 0.14);
    color: var(--sla-accent);
    border: 1px solid rgba(var(--sla-accent-rgb), 0.4);
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
  }
  #sla-typeform-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3, 6, 14, 0.92);
    backdrop-filter: blur(16px);
    z-index: 999995;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
  }
  .sla-tf-modal-dialog {
    width: 100%;
    max-width: 1040px;
    margin: auto;
  }

  /* Universal 3-Role Dossier Modal */
  #sla-universal-dossier-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3, 6, 14, 0.88);
    backdrop-filter: blur(14px);
    z-index: 1000005;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    font-family: Inter, system-ui, -apple-system, sans-serif;
  }
  .sla-univ-dossier-card {
    width: 100%;
    max-width: 680px;
    background: linear-gradient(165deg, #080d1a 0%, #050912 100%);
    border: 1px solid rgba(var(--sla-accent-rgb), 0.35);
    border-radius: 22px;
    padding: 28px 30px;
    box-shadow: 0 28px 75px rgba(var(--sla-black-rgb), 0.92), 0 0 40px rgba(var(--sla-accent-rgb), 0.12);
    color: var(--sla-text);
    position: relative;
    margin: auto;
  }
  .sla-univ-close-btn {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(var(--sla-white-rgb), 0.06);
    border: 1px solid rgba(var(--sla-white-rgb), 0.12);
    color: var(--sla-text-muted);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sla-univ-close-btn:hover {
    color: var(--sla-text);
    border-color: rgba(var(--sla-accent-rgb), 0.5);
  }
  .sla-univ-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0 14px 0;
  }
  @media (max-width: 640px) {
    .sla-univ-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .sla-univ-kpi-box {
    background: rgba(var(--sla-surface-2-rgb), 0.9);
    border: 1px solid rgba(var(--sla-white-rgb), 0.08);
    border-radius: 12px;
    padding: 12px 14px;
  }
  .sla-dossier-lens-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 6px;
    margin: 14px 0 16px 0;
    background: rgba(5, 9, 18, 0.92);
    border: 1px solid rgba(var(--sla-accent-rgb), 0.28);
    border-radius: 14px;
  }
  .sla-dossier-lens-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--sla-text-muted);
    padding: 9px 10px;
    border-radius: 10px;
    font-family: Inter, system-ui, -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.16s ease;
    text-align: center;
    white-space: nowrap;
  }
  .sla-dossier-lens-btn:hover {
    color: var(--sla-text);
    background: rgba(var(--sla-white-rgb), 0.05);
  }
  .sla-dossier-lens-btn[data-active="true"] {
    background: rgba(var(--sla-positive-rgb), 0.18);
    border-color: var(--sla-positive);
    color: var(--sla-positive-soft);
    box-shadow: 0 0 16px rgba(var(--sla-positive-rgb), 0.18);
  }
  .sla-consumer-safety-card {
    background: linear-gradient(165deg, rgba(var(--sla-positive-rgb), 0.11) 0%, rgba(var(--sla-surface-2-rgb), 0.95) 100%);
    border: 1px solid rgba(var(--sla-positive-rgb), 0.42);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 14px;
  }
  .sla-consumer-pill-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
  }
  @media (max-width: 640px) {
    .sla-dossier-lens-bar { grid-template-columns: 1fr; }
    .sla-consumer-pill-row { grid-template-columns: 1fr; }
  }
  .sla-consumer-mini-box {
    background: rgba(5, 9, 18, 0.78);
    border: 1px solid rgba(var(--sla-white-rgb), 0.08);
    border-radius: 10px;
    padding: 10px 12px;
  }
  .sla-univ-ladder-box {
    background: rgba(var(--sla-surface-2-rgb), 0.85);
    border: 1px solid rgba(var(--sla-white-rgb), 0.08);
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 14px;
  }
  .sla-univ-ladder-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }
  @media (max-width: 640px) {
    .sla-univ-ladder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .sla-univ-rung {
    background: rgba(5, 9, 18, 0.9);
    border: 1px solid rgba(var(--sla-white-rgb), 0.08);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .sla-univ-rung:hover {
    border-color: var(--sla-accent);
    transform: translateY(-2px);
  }
  .sla-univ-rung[data-active="true"] {
    background: rgba(var(--sla-positive-rgb), 0.16);
    border-color: var(--sla-positive);
    box-shadow: 0 0 16px rgba(var(--sla-positive-rgb), 0.2);
  }
  .sla-univ-receipt-box {
    background: rgba(var(--sla-positive-rgb), 0.07);
    border: 1px solid rgba(var(--sla-positive-rgb), 0.35);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
  }
  .sla-univ-pre {
    background: #04070f;
    border: 1px solid rgba(var(--sla-white-rgb), 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--sla-text-2);
    overflow-x: auto;
    margin: 10px 0 14px 0;
    line-height: 1.5;
  }
  .sla-role-cta-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
  }
  .sla-role-primary-btn {
    width: 100%;
    padding: 14px 20px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, var(--sla-positive) 0%, var(--sla-positive-strong) 100%);
    color: #04130d;
    font-family: Inter, system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.15s ease;
  }
  .sla-role-primary-btn:hover {
    opacity: 0.92;
  }
  .sla-role-secondary-btn {
    width: 100%;
    padding: 14px 20px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, var(--sla-accent) 0%, #0284c7 100%);
    color: #041019;
    font-family: Inter, system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.15s ease;
  }
  .sla-role-secondary-btn:hover {
    opacity: 0.92;
  }

/* ---- style#sla-uniform-option-cards-styles ---- */
#sla-how-agentsla-works-section .sla-tf-option-card,
  #sla-how-agentsla-works-section .sla-tf-option-card[data-selected="true"],
  #sla-how-agentsla-works-section .sla-tf-option-card[data-selected="false"],
  #sla-typeform-modal-backdrop .sla-tf-option-card,
  #sla-typeform-modal-backdrop .sla-tf-option-card[data-selected="true"],
  #sla-typeform-modal-backdrop .sla-tf-option-card[data-selected="false"] {
    background: rgba(var(--sla-surface-slate-rgb), 0.78) !important;
    border: 1px solid rgba(var(--sla-white-rgb), 0.1) !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: pointer !important;
    transition: all 0.18s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
  #sla-how-agentsla-works-section .sla-tf-option-card:hover,
  #sla-how-agentsla-works-section .sla-tf-option-card[data-selected="true"]:hover,
  #sla-how-agentsla-works-section .sla-tf-option-card[data-selected="false"]:hover,
  #sla-typeform-modal-backdrop .sla-tf-option-card:hover,
  #sla-typeform-modal-backdrop .sla-tf-option-card[data-selected="true"]:hover,
  #sla-typeform-modal-backdrop .sla-tf-option-card[data-selected="false"]:hover {
    border-color: var(--sla-accent) !important;
    background: rgba(var(--sla-accent-rgb), 0.1) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 32px rgba(var(--sla-black-rgb), 0.55) !important;
  }

/* ---- style#sla-step-buttons-layout-styles ---- */
#sla-how-agentsla-works-section [data-exec-primary],
  #sla-how-agentsla-works-section [data-exec-secondary],
  #sla-typeform-modal-backdrop [data-exec-primary],
  #sla-typeform-modal-backdrop [data-exec-secondary] {
    display: none !important;
  }

/* ---- style#sla-horizontal-prev-retake-styles ---- */
.sla-tf-shell .sla-tf-footer-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }

/* ---- /sla-css-3ac9d5cb88.css ---- */
/* 1. TOP SWITCHER: Single-Line Linear/iOS Segmented Control Track (No Floating Pills) */
  #sla-how-agentsla-works-section .sla-tf-persona-switcher,
  #sla-typeform-modal-backdrop .sla-tf-persona-switcher {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    max-width: 100% !important;
    margin: 0 auto 18px auto !important;
    padding: 4px !important;
    background: rgba(10, 15, 28, 0.92) !important;
    border: 1px solid rgba(var(--sla-white-rgb), 0.1) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 0 rgba(var(--sla-white-rgb), 0.04) !important;
  }

  #sla-how-agentsla-works-section .sla-tf-persona-pill,
  #sla-typeform-modal-backdrop .sla-tf-persona-pill {
    all: unset !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    min-height: 30px !important;
    padding: 6px 8px !important;
    border-radius: 7px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--sla-text-muted) !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  #sla-how-agentsla-works-section .sla-tf-persona-pill:hover,
  #sla-typeform-modal-backdrop .sla-tf-persona-pill:hover {
    color: var(--sla-text) !important;
    background: rgba(var(--sla-white-rgb), 0.05) !important;
  }

  #sla-how-agentsla-works-section .sla-tf-persona-pill[data-active="true"],
  #sla-typeform-modal-backdrop .sla-tf-persona-pill[data-active="true"] {
    background: rgba(var(--sla-accent-rgb), 0.14) !important;
    border-color: rgba(var(--sla-accent-rgb), 0.4) !important;
    color: var(--sla-accent) !important;
  }

  /* 2. PRIMARY STAGE & LAB BUTTONS: Sleek 8px Rectangular Bars with Multi-Line Wrap Safety */
  #sla-how-agentsla-works-section .sla-tf-action-btn,
  #sla-typeform-modal-backdrop .sla-tf-action-btn,
  #sla-how-agentsla-works-section .sla-tf-lab-btn,
  #sla-typeform-modal-backdrop .sla-tf-lab-btn {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    height: auto !important;
    min-height: 36px !important;
    padding: 9px 18px !important;
    border-radius: 8px !important;
    background: rgba(var(--sla-accent-rgb), 0.14) !important;
    border: 1px solid rgba(var(--sla-accent-rgb), 0.48) !important;
    color: var(--sla-accent) !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
  }

  #sla-how-agentsla-works-section .sla-tf-lab-btn,
  #sla-typeform-modal-backdrop .sla-tf-lab-btn {
    display: flex !important;
    width: 100% !important;
  }

  #sla-how-agentsla-works-section .sla-tf-action-btn:hover,
  #sla-typeform-modal-backdrop .sla-tf-action-btn:hover,
  #sla-how-agentsla-works-section .sla-tf-lab-btn:hover,
  #sla-typeform-modal-backdrop .sla-tf-lab-btn:hover {
    background: rgba(var(--sla-accent-rgb), 0.24) !important;
    border-color: var(--sla-accent) !important;
    color: var(--sla-text) !important;
  }

  /* 3. BOTTOM FOOTER BAR: Minimal Ghost / Hairline Micro-Buttons (Zero Bulk) */
  #sla-how-agentsla-works-section .sla-tf-footer-nav,
  #sla-typeform-modal-backdrop .sla-tf-footer-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 18px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(var(--sla-white-rgb), 0.07) !important;
    flex-wrap: nowrap !important;
  }

  #sla-how-agentsla-works-section .sla-tf-secondary-btn,
  #sla-typeform-modal-backdrop .sla-tf-secondary-btn {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    height: auto !important;
    min-height: 28px !important;
    padding: 5px 11px !important;
    border-radius: 6px !important;
    background: rgba(var(--sla-white-rgb), 0.03) !important;
    border: 1px solid rgba(var(--sla-white-rgb), 0.12) !important;
    color: var(--sla-text-muted) !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
  }

  #sla-how-agentsla-works-section .sla-tf-secondary-btn:hover,
  #sla-typeform-modal-backdrop .sla-tf-secondary-btn:hover {
    background: rgba(var(--sla-white-rgb), 0.08) !important;
    border-color: rgba(var(--sla-accent-rgb), 0.45) !important;
    color: var(--sla-text) !important;
  }

  /* 4. DOSSIER MODAL BUTTONS: Sleek 8px Bars with Safe Wrapping */
  #sla-universal-dossier-backdrop .sla-role-primary-btn,
  #sla-universal-dossier-backdrop .sla-role-secondary-btn {
    height: auto !important;
    min-height: 38px !important;
    padding: 9px 14px !important;
    border-radius: 8px !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* 5. MOBILE BREAKPOINT: Ultra-Clean & Compact */
  @media (max-width: 640px) {
    #sla-how-agentsla-works-section .sla-tf-persona-switcher,
    #sla-typeform-modal-backdrop .sla-tf-persona-switcher {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 3px !important;
      padding: 3px !important;
      margin-bottom: 12px !important;
    }

    #sla-how-agentsla-works-section .sla-tf-persona-pill,
    #sla-typeform-modal-backdrop .sla-tf-persona-pill {
      font-size: 10px !important;
      padding: 5px 4px !important;
      min-height: 26px !important;
      letter-spacing: 0 !important;
    }

    #sla-how-agentsla-works-section .sla-tf-action-btn,
    #sla-typeform-modal-backdrop .sla-tf-action-btn,
    #sla-how-agentsla-works-section .sla-tf-lab-btn,
    #sla-typeform-modal-backdrop .sla-tf-lab-btn {
      font-size: 11px !important;
      padding: 8px 12px !important;
      min-height: 34px !important;
    }

    #sla-how-agentsla-works-section .sla-tf-secondary-btn,
    #sla-typeform-modal-backdrop .sla-tf-secondary-btn {
      font-size: 10px !important;
      padding: 4px 9px !important;
      min-height: 26px !important;
    }
  }

/* ---- /sla-css-f136448496.css ---- */
/* 1. SHELL & PROGRESS TOPBAR: Clean 3-Part Layout on Desktop & Mobile */
  #sla-how-agentsla-works-section .sla-tf-shell,
  #sla-typeform-modal-backdrop .sla-tf-shell {
    background: linear-gradient(165deg, rgba(var(--sla-surface-2-rgb), 0.96) 0%, rgba(6, 10, 20, 0.98) 100%) !important;
    border: 1px solid rgba(var(--sla-accent-rgb), 0.28) !important;
    border-radius: 20px !important;
    padding: 28px 32px !important;
    box-shadow: 0 24px 60px rgba(var(--sla-black-rgb), 0.8) !important;
    box-sizing: border-box !important;
  }

  #sla-how-agentsla-works-section .sla-tf-topbar,
  #sla-typeform-modal-backdrop .sla-tf-topbar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(var(--sla-white-rgb), 0.07) !important;
    flex-wrap: nowrap !important;
  }

  /* Hide extra brand clusters inside topbar & footer nav so mobile chrome stays ultra-clean */
  .sla-topbar-brand-cluster,
  .sla-footer-ecosystem-strip {
    display: none !important;
  }

  /* 2. PAGE 01 & 02 GRID: 3-Column Bento on Desktop, 1-Column Compact Stack on Mobile */
  #sla-how-agentsla-works-section .sla-tf-options-list,
  #sla-typeform-modal-backdrop .sla-tf-options-list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 3. PAGE 03 (4 SECTORS): 2x2 Bento Grid on Desktop (Never 4-Across Skinny Columns!) */
  #sla-how-agentsla-works-section .sla-tf-options-list.sla-tf-sectors-bento,
  #sla-typeform-modal-backdrop .sla-tf-options-list.sla-tf-sectors-bento,
  #sla-how-agentsla-works-section .sla-tf-options-list[data-bento-sectors="true"],
  #sla-typeform-modal-backdrop .sla-tf-options-list[data-bento-sectors="true"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
  }

  /* 4. BENTO OPTION CARDS (Pages 01, 02, 03) */
  #sla-how-agentsla-works-section .sla-tf-option-card,
  #sla-typeform-modal-backdrop .sla-tf-option-card {
    background: rgba(13, 20, 36, 0.82) !important;
    border: 1px solid rgba(var(--sla-white-rgb), 0.1) !important;
    border-radius: 14px !important;
    padding: 18px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #sla-how-agentsla-works-section .sla-tf-card-logos,
  #sla-typeform-modal-backdrop .sla-tf-card-logos,
  #sla-how-agentsla-works-section .sla-card-top-flex,
  #sla-typeform-modal-backdrop .sla-card-top-flex {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    margin-bottom: 2px !important;
  }

  #sla-how-agentsla-works-section .sla-tf-keybadge,
  #sla-typeform-modal-backdrop .sla-tf-keybadge {
    font-size: 10.5px !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  #sla-how-agentsla-works-section .sla-tf-logo-stack,
  #sla-typeform-modal-backdrop .sla-tf-logo-stack,
  #sla-how-agentsla-works-section .sla-logo-avatar-stack,
  #sla-typeform-modal-backdrop .sla-logo-avatar-stack {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
  }

  #sla-how-agentsla-works-section .sla-tf-opt-heading,
  #sla-typeform-modal-backdrop .sla-tf-opt-heading {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--sla-text) !important;
    line-height: 1.3 !important;
    margin-top: 6px !important;
    word-break: break-word !important;
  }

  #sla-how-agentsla-works-section .sla-tf-opt-body,
  #sla-typeform-modal-backdrop .sla-tf-opt-body {
    font-size: 13px !important;
    color: var(--sla-text-muted) !important;
    line-height: 1.5 !important;
    margin-top: 6px !important;
  }

  /* Page 03 Leader Pill Row inside Sector Cards */
  .sla-sector-leader-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 11px !important;
    border-radius: 9px !important;
    background: rgba(6, 11, 22, 0.85) !important;
    border: 1px solid rgba(var(--sla-accent-rgb), 0.2) !important;
    margin-top: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #sla-how-agentsla-works-section .sla-tf-opt-metric,
  #sla-typeform-modal-backdrop .sla-tf-opt-metric {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--sla-positive) !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(var(--sla-white-rgb), 0.07) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* 5. TABLET & MOBILE BREAKPOINT (<= 820px): True Mobile-First Ergonomics */
  @media (max-width: 820px) {
    #sla-how-agentsla-works-section {
      padding: 36px 14px 44px 14px !important;
    }

    #sla-how-agentsla-works-section .sla-tf-shell,
    #sla-typeform-modal-backdrop .sla-tf-shell {
      padding: 18px 16px !important;
      border-radius: 16px !important;
    }

    #sla-how-agentsla-works-section .sla-tf-q-title,
    #sla-typeform-modal-backdrop .sla-tf-q-title {
      font-size: 19px !important;
      line-height: 1.28 !important;
      margin-bottom: 6px !important;
    }

    #sla-how-agentsla-works-section .sla-tf-q-sub,
    #sla-typeform-modal-backdrop .sla-tf-q-sub {
      font-size: 13px !important;
      line-height: 1.48 !important;
      margin-bottom: 14px !important;
    }

    /* Force ALL option grids (Pages 01, 02, AND Page 03) into a 1-column stack on mobile */
    #sla-how-agentsla-works-section .sla-tf-options-list,
    #sla-typeform-modal-backdrop .sla-tf-options-list,
    #sla-how-agentsla-works-section .sla-tf-options-list.sla-tf-sectors-bento,
    #sla-typeform-modal-backdrop .sla-tf-options-list.sla-tf-sectors-bento,
    #sla-how-agentsla-works-section .sla-tf-options-list[data-bento-sectors="true"],
    #sla-typeform-modal-backdrop .sla-tf-options-list[data-bento-sectors="true"] {
      grid-template-columns: 1fr !important;
      gap: 10px !important;
    }

    /* Compact thumb-friendly cards on mobile so all options fit without endless scrolling */
    #sla-how-agentsla-works-section .sla-tf-option-card,
    #sla-typeform-modal-backdrop .sla-tf-option-card {
      padding: 14px 15px !important;
      gap: 8px !important;
      border-radius: 12px !important;
    }

    #sla-how-agentsla-works-section .sla-tf-opt-heading,
    #sla-typeform-modal-backdrop .sla-tf-opt-heading {
      font-size: 15px !important;
      margin-top: 4px !important;
    }

    #sla-how-agentsla-works-section .sla-tf-opt-body,
    #sla-typeform-modal-backdrop .sla-tf-opt-body {
      font-size: 12.5px !important;
      line-height: 1.45 !important;
      margin-top: 4px !important;
    }

    #sla-how-agentsla-works-section .sla-tf-opt-metric,
    #sla-typeform-modal-backdrop .sla-tf-opt-metric {
      font-size: 10.5px !important;
      padding-top: 8px !important;
    }

    /* Page 04 Architecture Cards on mobile */
    .sla-arch-col-card,
    .sla-arch-col-legacy,
    .sla-arch-col-sovereign {
      padding: 18px 16px !important;
      border-radius: 14px !important;
    }

    /* Prevent iOS Safari auto-zoom when tapping the search input on Pages 05-07 */
    #sla-how-agentsla-works-section input.sla-tf-lab-input,
    #sla-typeform-modal-backdrop input.sla-tf-lab-input,
    #sla-journey-input-1 {
      font-size: 16px !important;
      padding: 12px 14px !important;
    }
  }

/* ---- style#sla-page03-sector-descriptions-styles ---- */
/* Ensure Page 03 card descriptions match the clean paragraph style of Pages 01 & 02 */
  #sla-how-agentsla-works-section .sla-tf-options-list[data-bento-sectors="true"] .sla-tf-opt-body,
  #sla-typeform-modal-backdrop .sla-tf-options-list[data-bento-sectors="true"] .sla-tf-opt-body,
  #sla-how-agentsla-works-section [data-pick-sector] .sla-tf-opt-body,
  #sla-typeform-modal-backdrop [data-pick-sector] .sla-tf-opt-body,
  .sla-sector-leader-pill {
    display: block !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    color: var(--sla-text-muted) !important;
    line-height: 1.52 !important;
    margin-top: 6px !important;
    font-weight: 400 !important;
  }

/* ---- /sla-css-02badeb97f.css ---- */
/* 1. Hide the old 4-button switcher pills and replace with a sleek Dropdown */
  #sla-how-agentsla-works-section .sla-tf-persona-switcher,
  #sla-typeform-modal-backdrop .sla-tf-persona-switcher {
    display: none !important;
  }

  /* 2. Make the "INTERACTIVE M2M ORIENTATION" eyebrow an interactive fullscreen trigger */
  #sla-how-agentsla-works-section .sla-tf-hero-eyebrow,
  #sla-how-agentsla-works-section [data-sla-role="eyebrow"],
  #sla-typeform-modal-backdrop .sla-tf-hero-eyebrow,
  #sla-typeform-modal-backdrop [data-sla-role="eyebrow"] {
    cursor: pointer !important;
    user-select: none !important;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
  }
  #sla-how-agentsla-works-section .sla-tf-hero-eyebrow:hover,
  #sla-how-agentsla-works-section [data-sla-role="eyebrow"]:hover {
    transform: translateY(-1px) !important;
    border-color: var(--sla-accent) !important;
    box-shadow: 0 0 20px rgba(var(--sla-accent-rgb), 0.25) !important;
  }

  /* 3. Custom Dark-Glass Dropdown (immune to global <button> light-blue pill rules) */
  .sla-role-dropdown-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto 20px auto !important;
    position: relative !important;
    z-index: 120 !important;
    box-sizing: border-box !important;
  }

  .sla-role-dropdown-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 11px 16px !important;
    background: rgba(12, 19, 34, 0.95) !important;
    border: 1px solid rgba(var(--sla-accent-rgb), 0.42) !important;
    border-radius: 12px !important;
    color: var(--sla-text) !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    cursor: pointer !important;
    user-select: none !important;
    box-shadow: 0 10px 28px rgba(var(--sla-black-rgb), 0.55) !important;
    transition: all 0.16s ease !important;
    box-sizing: border-box !important;
  }

  .sla-role-dropdown-trigger:hover {
    border-color: var(--sla-accent) !important;
    background: rgba(16, 26, 46, 0.98) !important;
    box-shadow: 0 12px 32px rgba(var(--sla-accent-rgb), 0.18) !important;
  }

  .sla-role-dropdown-label-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .sla-role-dropdown-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: var(--sla-accent) !important;
    box-shadow: 0 0 10px var(--sla-accent) !important;
    flex-shrink: 0 !important;
  }

  .sla-role-dropdown-text {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: var(--sla-text) !important;
  }

  .sla-role-dropdown-chevron {
    font-size: 11px !important;
    color: var(--sla-accent) !important;
    transition: transform 0.18s ease !important;
    flex-shrink: 0 !important;
  }

  .sla-role-dropdown-bar[data-open="true"] .sla-role-dropdown-chevron {
    transform: rotate(180deg) !important;
  }

  .sla-role-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(8, 13, 26, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(var(--sla-accent-rgb), 0.45) !important;
    border-radius: 13px !important;
    padding: 6px !important;
    box-shadow: 0 24px 60px rgba(var(--sla-black-rgb), 0.85) !important;
    display: none !important;
    flex-direction: column !important;
    gap: 4px !important;
    box-sizing: border-box !important;
  }

  .sla-role-dropdown-bar[data-open="true"] .sla-role-dropdown-menu {
    display: flex !important;
  }

  .sla-role-dropdown-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 9px !important;
    color: var(--sla-text-3) !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.14s ease !important;
  }

  .sla-role-dropdown-item:hover {
    background: rgba(var(--sla-accent-rgb), 0.14) !important;
    color: var(--sla-text) !important;
  }

  .sla-role-dropdown-item[data-selected="true"] {
    background: rgba(var(--sla-positive-rgb), 0.14) !important;
    color: var(--sla-positive) !important;
    border: 1px solid rgba(var(--sla-positive-rgb), 0.35) !important;
  }

  .sla-role-dropdown-tag {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: var(--sla-text-faint) !important;
    text-transform: uppercase !important;
  }

  /* 4. Fullscreen Modal Upgrade (#sla-typeform-modal-backdrop) */
  #sla-typeform-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    background: rgba(3, 7, 15, 0.98) !important;
    backdrop-filter: blur(22px) !important;
    z-index: 2147483000 !important;
    overflow-y: auto !important;
    padding: 20px 16px 40px 16px !important;
    box-sizing: border-box !important;
  }

  #sla-typeform-modal-backdrop[data-open="true"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  #sla-typeform-modal-backdrop .sla-tf-modal-inner {
    width: 100% !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
  }

  @media (max-width: 640px) {
    .sla-role-dropdown-bar {
      max-width: 100% !important;
      margin-bottom: 14px !important;
    }
    .sla-role-dropdown-trigger {
      padding: 10px 13px !important;
      font-size: 11.5px !important;
    }
    #sla-typeform-modal-backdrop {
      padding: 12px 10px 28px 10px !important;
    }
  }

/* ---- style#sla-enter-site-fix-styles ---- */
/* Guarantee the Fullscreen Orientation Modal hides immediately when closed via "Enter Site" */
  #sla-typeform-modal-backdrop,
  #sla-typeform-modal-backdrop[data-open="false"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #sla-typeform-modal-backdrop[data-open="true"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  /* Style the "Enter Site" button in the modal topbar so it is always crisp, clickable, and visible */
  #sla-typeform-modal-backdrop [data-close-modal],
  #sla-typeform-modal-backdrop [data-tf-close],
  #sla-typeform-modal-backdrop .sla-tf-close-btn,
  #sla-typeform-modal-backdrop .sla-enter-site-btn {
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 2147483647 !important;
    position: relative !important;
  }

/* ---- style#sla-start-here-landing-styles ---- */
/* 1. Remove the inline Orientation shell from the landing page while keeping it inside the Fullscreen Modal */
  #sla-how-agentsla-works-section .sla-tf-shell,
  #sla-how-agentsla-works-section .sla-tf-persona-switcher,
  #sla-how-agentsla-works-section .sla-role-dropdown-bar {
    display: none !important;
  }

  #sla-typeform-modal-backdrop .sla-tf-shell {
    display: block !important;
  }

  /* 2. Make "WORKS" in "HOW AGENTSLA WORKS" electric blue */
  #sla-how-agentsla-works-section .sla-works-blue,
  #sla-typeform-modal-backdrop .sla-works-blue {
    color: var(--sla-accent) !important;
    -webkit-text-fill-color: var(--sla-accent) !important;
  }

  /* 3. "Start Here" Button with Black Font Color */
  .sla-start-here-btn-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 22px auto 8px auto !important;
    text-align: center !important;
  }

  #sla-start-here-fullscreen-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 36px !important;
    min-height: 44px !important;
    border-radius: 999px !important;
    background: var(--sla-accent) !important;
    border: 1px solid var(--sla-accent) !important;
    color: var(--sla-black) !important;
    -webkit-text-fill-color: var(--sla-black) !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: 0 10px 28px rgba(var(--sla-accent-rgb), 0.28) !important;
    transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease !important;
  }

  #sla-start-here-fullscreen-btn span {
    color: var(--sla-black) !important;
    -webkit-text-fill-color: var(--sla-black) !important;
  }

  #sla-start-here-fullscreen-btn:hover {
    background: var(--sla-accent-soft) !important;
    border-color: var(--sla-accent-soft) !important;
    color: var(--sla-black) !important;
    -webkit-text-fill-color: var(--sla-black) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 34px rgba(var(--sla-accent-rgb), 0.4) !important;
  }

/* ---- /sla-css-4d1734b91e.css ---- */
/* 1. Keep the Smart Auto-Indexer popup card completely invisible so it never shifts the search bar */
  #sla-smart-auto-indexer,
  #smart-auto-indexer,
  #sla-auto-indexer-card,
  #sla-d1-auto-indexer,
  .sla-smart-auto-indexer,
  .smart-auto-indexer-card,
  [data-smart-auto-indexer],
  [data-auto-indexer],
  .sla-silent-hidden-indexer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: fixed !important;
    left: -99999px !important;
    top: -99999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  /* 2. Horizontal Row: [ Search Bar Input ] + [ INSPECT DOSSIER Button ] on the Same Line */
  .sla-hero-search-inline-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px 0 14px 0 !important;
    flex-wrap: nowrap !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 30 !important;
  }

  .sla-hero-input-field-wrap {
    position: relative !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .sla-hero-input-field-wrap svg.sla-hero-search-icon {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    color: var(--sla-text-faint) !important;
    pointer-events: none !important;
    z-index: 3 !important;
  }

  .sla-hero-input-field-wrap input {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 18px 0 42px !important;
    border-radius: 999px !important;
    background: rgba(8, 13, 25, 0.92) !important;
    border: 1px solid rgba(var(--sla-white-rgb), 0.28) !important;
    color: var(--sla-text) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    outline: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  }

  .sla-hero-input-field-wrap input:focus {
    border-color: var(--sla-accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--sla-accent-rgb), 0.18) !important;
  }

  #sla-hero-inline-inspect-btn {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 24px !important;
    border-radius: 999px !important;
    background: var(--sla-accent) !important;
    border: 1px solid var(--sla-accent) !important;
    color: var(--sla-black) !important;
    -webkit-text-fill-color: var(--sla-black) !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    box-shadow: 0 8px 24px rgba(var(--sla-accent-rgb), 0.28) !important;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
    pointer-events: auto !important;
    user-select: none !important;
  }

  #sla-hero-inline-inspect-btn:hover {
    background: var(--sla-accent-soft) !important;
    border-color: var(--sla-accent-soft) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 12px 28px rgba(var(--sla-accent-rgb), 0.4) !important;
  }

  /* Hide the old duplicate INSPECT DOSSIER button from the lower pill row */
  .sla-hidden-old-inspect-btn {
    display: none !important;
  }

  /* 3. Live Base Mainnet (#8453) Cryptographic Dossier Modal */
  #sla-hero-dossier-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    background: rgba(3, 7, 16, 0.88) !important;
    backdrop-filter: blur(18px) !important;
    z-index: 2147483646 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px 16px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }

  #sla-hero-dossier-modal-backdrop[data-open="true"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .sla-hd-card {
    width: 100% !important;
    max-width: 100% !important;
    background: linear-gradient(165deg, rgba(11, 18, 34, 0.98) 0%, rgba(6, 10, 20, 0.99) 100%) !important;
    border: 1px solid rgba(var(--sla-accent-rgb), 0.4) !important;
    border-radius: 20px !important;
    padding: 26px 28px !important;
    box-shadow: 0 28px 80px rgba(var(--sla-black-rgb), 0.9), 0 0 40px rgba(var(--sla-accent-rgb), 0.14) !important;
    color: var(--sla-text) !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  .sla-hd-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding-bottom: 14px !important;
    margin-bottom: 18px !important;
    border-bottom: 1px solid rgba(var(--sla-white-rgb), 0.08) !important;
  }

  .sla-hd-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: rgba(var(--sla-positive-rgb), 0.14) !important;
    border: 1px solid rgba(var(--sla-positive-rgb), 0.4) !important;
    color: var(--sla-positive) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }

  .sla-hd-close {
    all: unset !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    background: rgba(var(--sla-white-rgb), 0.05) !important;
    border: 1px solid rgba(var(--sla-white-rgb), 0.14) !important;
    color: var(--sla-text-muted) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }

  .sla-hd-close:hover {
    background: rgba(var(--sla-white-rgb), 0.12) !important;
    color: var(--sla-text) !important;
    border-color: var(--sla-accent) !important;
  }

  .sla-hd-metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 18px 0 !important;
  }

  .sla-hd-metric-box {
    background: rgba(var(--sla-surface-slate-rgb), 0.8) !important;
    border: 1px solid rgba(var(--sla-white-rgb), 0.09) !important;
    border-radius: 12px !important;
    padding: 12px 13px !important;
    box-sizing: border-box !important;
  }

  .sla-hd-metric-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--sla-text-faint) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 5px !important;
  }

  .sla-hd-metric-val {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    color: var(--sla-text) !important;
  }

  .sla-hd-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 20px !important;
  }

  .sla-hd-btn-primary,
  .sla-hd-btn-secondary {
    all: unset !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 40px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
  }

  .sla-hd-btn-primary {
    background: var(--sla-accent) !important;
    border: 1px solid var(--sla-accent) !important;
    color: var(--sla-black) !important;
    -webkit-text-fill-color: var(--sla-black) !important;
  }

  .sla-hd-btn-secondary {
    background: rgba(var(--sla-accent-rgb), 0.12) !important;
    border: 1px solid rgba(var(--sla-accent-rgb), 0.4) !important;
    color: var(--sla-accent) !important;
  }

  @media (max-width: 640px) {
    .sla-hero-search-inline-row {
      gap: 8px !important;
    }
    .sla-hero-input-field-wrap input {
      height: 42px !important;
      min-height: 42px !important;
      font-size: 16px !important;
      padding: 0 12px 0 36px !important;
    }
    #sla-hero-inline-inspect-btn {
      height: 42px !important;
      min-height: 42px !important;
      padding: 0 14px !important;
      font-size: 11px !important;
    }
    .sla-hd-card {
      padding: 18px 16px !important;
    }
    .sla-hd-metrics-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .sla-hd-actions {
      grid-template-columns: 1fr !important;
    }
  }

/* ---- /sla-css-bc014727ec.css ---- */
/* 1. Hero Search Row & Lower Action Button Row Spacing */
  .sla-hero-search-inline-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 22px 0 18px 0 !important;
    flex-wrap: nowrap !important;
    box-sizing: border-box !important;
  }

  .sla-hero-pill-btn-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-top: 16px !important;
    width: 100% !important;
  }

  /* Ensure all 3 bottom pills (NPM I AGENTSLA, AGENTSLA.IO/MCP, AGENTSLA CREDENTIAL) share identical height & spacing */
  .sla-hero-pill-btn-row > button,
  .sla-hero-pill-btn-row > a,
  #sla-credential-trigger-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 20px !important;
    border-radius: 999px !important;
    background: var(--sla-accent) !important;
    border: 1px solid var(--sla-accent) !important;
    color: var(--sla-black) !important;
    -webkit-text-fill-color: var(--sla-black) !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    user-select: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
  }

  .sla-hero-pill-btn-row > button:hover,
  .sla-hero-pill-btn-row > a:hover,
  #sla-credential-trigger-btn:hover {
    background: var(--sla-accent-soft) !important;
    border-color: var(--sla-accent-soft) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 24px rgba(var(--sla-accent-rgb), 0.32) !important;
  }

  /* 2. Clean Single-Frame Modal Backdrop for "VERIFIED PROTOCOL CREDENTIAL" */
  #sla-credential-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    background: rgba(3, 7, 16, 0.88) !important;
    backdrop-filter: blur(20px) !important;
    z-index: 2147483645 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px 16px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }

  #sla-credential-modal-backdrop[data-open="true"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .sla-credential-modal-dialog {
    width: 100% !important;
    max-width: 640px !important;
    max-height: calc(100dvh - 40px) !important;
    overflow-y: auto !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    position: relative !important;
    margin: auto !important;
  }

  .sla-credential-modal-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-bottom: 10px !important;
    padding: 0 2px !important;
  }

  .sla-credential-modal-close {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    background: rgba(12, 19, 35, 0.95) !important;
    border: 1px solid rgba(var(--sla-accent-rgb), 0.4) !important;
    color: var(--sla-text) !important;
    -webkit-text-fill-color: var(--sla-text) !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 8px 24px rgba(var(--sla-black-rgb), 0.6) !important;
  }

  .sla-credential-modal-close:hover {
    background: var(--sla-accent) !important;
    border-color: var(--sla-accent) !important;
    color: var(--sla-black) !important;
    -webkit-text-fill-color: var(--sla-black) !important;
  }

  /* Ensure the credential card inside the modal fills the 640px frame cleanly with balanced spacing */
  #sla-credential-modal-body {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #sla-credential-modal-body > * {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 28px 30px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
    box-shadow: 0 28px 80px rgba(var(--sla-black-rgb), 0.9), 0 0 36px rgba(var(--sla-accent-rgb), 0.14) !important;
  }

  @media (max-width: 640px) {
    .sla-hero-pill-btn-row {
      gap: 8px !important;
    }
    .sla-hero-pill-btn-row > button,
    .sla-hero-pill-btn-row > a,
    #sla-credential-trigger-btn {
      height: 36px !important;
      min-height: 36px !important;
      padding: 0 14px !important;
      font-size: 10.5px !important;
    }
    #sla-credential-modal-body > * {
      padding: 20px 18px !important;
      border-radius: 16px !important;
    }
  }

/* ---- style#sla-hero-match-directory-dimensions-styles ---- */
/* Force the Hero Section & Inner Containers to match the Directory Section's Full Width */
  [data-sla-hero-section="true"],
  [data-sla-hero-container="true"],
  [data-sla-hero-col="true"],
  [data-sla-hero-grid="true"] {
    display: block !important;
    grid-template-columns: 1fr !important;
    box-sizing: border-box !important;
  }

  [data-sla-hero-col="true"],
  [data-sla-hero-col="true"] > h1,
  [data-sla-hero-col="true"] > p,
  [data-sla-hero-col="true"] > div,
  .sla-hero-search-inline-row,
  .sla-hero-input-field-wrap,
  .sla-hero-pill-btn-row {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

/* ---- style#sla-unified-hero-paragraph-styles ---- */
[data-sla-hero-subcopy="true"] {
    box-sizing: border-box !important;
  }

  [data-sla-hero-subcopy="true"] a,
  [data-sla-hero-subcopy="true"] strong,
  [data-sla-hero-subcopy="true"] b,
  [data-sla-hero-subcopy="true"] span {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-decoration: none !important;
  }

  /* Hide the old separate Pre-Transaction Safety Check paragraph below the search bar */
  [data-sla-safety-check-removed="true"] {
    display: none !important;
  }

/* ---- style#sla-equal-hero-gap-styles ---- */
/* Default baseline spacing matching the Title -> Description visual gap (~36px-38px) before JS fine-tunes to the exact pixel */
  [data-sla-hero-subcopy="true"] {
    margin-bottom: 33px !important;
    padding-bottom: 0 !important;
  }

  [data-sla-search-outer-wrap="true"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .sla-hero-search-inline-row {
    margin-top: 0 !important;
    margin-bottom: 38px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .sla-hero-pill-btn-row {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

/* ---- style#sla-start-here-and-black-x-styles ---- */
/* 1. Ensure the Full-Screen "Start Here" Orientation Modal sits ABOVE the "How It Works" Modal */
  #sla-typeform-modal-backdrop {
    z-index: 2147483647 !important;
  }

  #sla-typeform-modal-backdrop[data-open="true"],
  #sla-typeform-modal-backdrop.open,
  #sla-typeform-modal-backdrop.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #sla-typeform-modal-backdrop[data-open="false"]:not(.open):not(.active) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* 2. Blue Background + Black "X" Modal Close Button (matches Mock) */
  .sla-hiw-modal-close,
  .sla-credential-modal-close,
  .sla-hd-close,
  #sla-typeform-modal-backdrop [data-tf-close],
  #sla-typeform-modal-backdrop .sla-tf-close,
  [data-sla-black-x-close="true"] {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background: var(--sla-accent) !important;
    background-color: var(--sla-accent) !important;
    background-image: none !important;
    border: 1px solid var(--sla-accent) !important;
    color: var(--sla-black) !important;
    -webkit-text-fill-color: var(--sla-black) !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    user-select: none !important;
    box-shadow: 0 0 22px rgba(var(--sla-accent-rgb), 0.45), 0 8px 20px rgba(var(--sla-black-rgb), 0.5) !important;
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
  }

  .sla-hiw-modal-close:hover,
  .sla-credential-modal-close:hover,
  .sla-hd-close:hover,
  #sla-typeform-modal-backdrop [data-tf-close]:hover,
  #sla-typeform-modal-backdrop .sla-tf-close:hover,
  [data-sla-black-x-close="true"]:hover {
    background: var(--sla-accent-soft) !important;
    background-color: var(--sla-accent-soft) !important;
    border-color: var(--sla-accent-soft) !important;
    color: var(--sla-black) !important;
    -webkit-text-fill-color: var(--sla-black) !important;
    box-shadow: 0 0 28px rgba(var(--sla-accent-rgb), 0.65), 0 10px 24px rgba(var(--sla-black-rgb), 0.6) !important;
    transform: translateY(-1px) !important;
  }

/* ---- style#sla-how-it-works-inline-landing-styles ---- */
/* 1. Show "HOW AGENTSLA WORKS" directly on the landing page with smooth scroll offset */
  #sla-how-agentsla-works-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    scroll-margin-top: 96px !important;
  }

  /* 2. "How It Works" Button in the Header */
  #sla-header-how-it-works-btn {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 34px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    background: var(--sla-accent) !important;
    border: 1px solid var(--sla-accent) !important;
    color: var(--sla-black) !important;
    -webkit-text-fill-color: var(--sla-black) !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
  }

  #sla-header-how-it-works-btn:hover {
    background: var(--sla-accent-soft) !important;
    border-color: var(--sla-accent-soft) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(var(--sla-accent-rgb), 0.32) !important;
  }

/* ---- /sla-css-df6057f2bb.css ---- */
/* Hide the original 4 FAQ pill buttons visually while keeping them in the DOM for filter binding */
  [data-sla-faq-orig-btn-row="true"] {
    display: none !important;
  }

  /* Custom FAQ Dropdown Wrapper */
  #sla-faq-dropdown-wrap {
    position: relative !important;
    display: inline-block !important;
    margin-top: 4px !important;
    margin-bottom: 24px !important;
    z-index: 50 !important;
  }

  /* Sky-Blue Pill Dropdown Trigger Button */
  #sla-faq-dropdown-trigger {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    min-width: 250px !important;
    height: 42px !important;
    padding: 0 20px !important;
    border-radius: 999px !important;
    background: var(--sla-accent) !important;
    border: 1px solid var(--sla-accent) !important;
    color: var(--sla-black) !important;
    -webkit-text-fill-color: var(--sla-black) !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    user-select: none !important;
    box-shadow: 0 8px 24px rgba(var(--sla-accent-rgb), 0.25) !important;
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
  }

  #sla-faq-dropdown-trigger:hover {
    background: var(--sla-accent-soft) !important;
    border-color: var(--sla-accent-soft) !important;
    box-shadow: 0 10px 28px rgba(var(--sla-accent-rgb), 0.38) !important;
    transform: translateY(-1px) !important;
  }

  #sla-faq-dropdown-trigger .sla-faq-dd-chevron {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    color: var(--sla-black) !important;
    -webkit-text-fill-color: var(--sla-black) !important;
    transition: transform 0.2s ease !important;
  }

  #sla-faq-dropdown-wrap[data-open="true"] #sla-faq-dropdown-trigger .sla-faq-dd-chevron {
    transform: rotate(180deg) !important;
  }

  /* Dropdown Menu List */
  #sla-faq-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    min-width: 100% !important;
    width: max-content !important;
    background: rgba(var(--sla-surface-2-rgb), 0.98) !important;
    backdrop-filter: blur(18px) !important;
    border: 1px solid rgba(var(--sla-accent-rgb), 0.42) !important;
    border-radius: 16px !important;
    padding: 6px !important;
    box-shadow: 0 20px 50px rgba(var(--sla-black-rgb), 0.85), 0 0 24px rgba(var(--sla-accent-rgb), 0.15) !important;
    display: none !important;
    flex-direction: column !important;
    gap: 4px !important;
    box-sizing: border-box !important;
  }

  #sla-faq-dropdown-wrap[data-open="true"] #sla-faq-dropdown-menu {
    display: flex !important;
  }

  .sla-faq-dropdown-item {
    all: unset !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 11px 16px !important;
    border-radius: 11px !important;
    color: var(--sla-black) !important;
    -webkit-text-fill-color: var(--sla-black) !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
  }

  .sla-faq-dropdown-item:hover {
    background: rgba(var(--sla-accent-rgb), 0.16) !important;
    color: var(--sla-accent) !important;
    -webkit-text-fill-color: var(--sla-accent) !important;
  }

  .sla-faq-dropdown-item[data-selected="true"] {
    background: var(--sla-accent) !important;
    color: var(--sla-black) !important;
    -webkit-text-fill-color: var(--sla-black) !important;
    font-weight: 900 !important;
  }

/* ---- style#sla-remove-faq-logos-styles ---- */
/* Hide any injected brand/entity logos inside FAQ cards while keeping the right-hand '+' toggle button intact */
  [data-sla-faq-card="true"] img,
  [data-sla-faq-card="true"] [class*="logo"],
  [data-sla-faq-card="true"] [class*="avatar"],
  [data-sla-faq-card="true"] [class*="favicon"],
  [data-sla-faq-card="true"] [data-brand-logo],
  [data-sla-faq-logo-removed="true"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

/* ---- style#sla-remove-fair-ranking-only-styles ---- */
[data-sla-fair-ranking-card-only="true"] {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

/* ---- /sla-css-4e06e15da2.css ---- */
/* 1. Force-hide all 3 original hero buttons (including #sla-credential-trigger-btn) so ONLY the dropdown shows */
  .sla-hero-pill-btn-row > *:not(#sla-hero-actions-dropdown-wrap),
  #sla-credential-trigger-btn,
  [data-sla-hero-orig-pill="true"] {
    display: none !important;
  }

  /* 2. Preserve exact spacing between the Search Bar row and the Dropdown row */
  .sla-hero-search-inline-row {
    margin-bottom: 38px !important;
  }

  .sla-hero-pill-btn-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 3. Dropdown Wrapper */
  #sla-hero-actions-dropdown-wrap {
    position: relative !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 60 !important;
  }

  /* 4. Sky-Blue Pill Dropdown Trigger Button (prevent any ::before/::after duplicate icons) */
  #sla-hero-actions-dropdown-trigger {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    min-width: 235px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 20px !important;
    border-radius: 999px !important;
    background: var(--sla-accent) !important;
    border: 1px solid var(--sla-accent) !important;
    color: var(--sla-black) !important;
    -webkit-text-fill-color: var(--sla-black) !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    user-select: none !important;
    box-shadow: 0 8px 24px rgba(var(--sla-accent-rgb), 0.25) !important;
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
  }

  #sla-hero-actions-dropdown-trigger::before,
  #sla-hero-actions-dropdown-trigger::after,
  #sla-hero-actions-dropdown-label::before,
  #sla-hero-actions-dropdown-label::after,
  .sla-hero-actions-dropdown-item::before,
  .sla-hero-actions-dropdown-item::after {
    content: none !important;
    display: none !important;
  }

  #sla-hero-actions-dropdown-trigger:hover {
    background: var(--sla-accent-soft) !important;
    border-color: var(--sla-accent-soft) !important;
    box-shadow: 0 10px 28px rgba(var(--sla-accent-rgb), 0.38) !important;
    transform: translateY(-1px) !important;
  }

  #sla-hero-actions-dropdown-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--sla-black) !important;
    -webkit-text-fill-color: var(--sla-black) !important;
  }

  #sla-hero-actions-dropdown-label svg {
    width: 14px !important;
    height: 14px !important;
    stroke: var(--sla-black) !important;
    color: var(--sla-black) !important;
    flex-shrink: 0 !important;
  }

  #sla-hero-actions-dropdown-trigger .sla-hero-dd-chevron {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    color: var(--sla-black) !important;
    -webkit-text-fill-color: var(--sla-black) !important;
    transition: transform 0.2s ease !important;
  }

  #sla-hero-actions-dropdown-wrap[data-open="true"] #sla-hero-actions-dropdown-trigger .sla-hero-dd-chevron {
    transform: rotate(180deg) !important;
  }

  /* 5. Dropdown Menu Popup */
  #sla-hero-actions-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    min-width: 100% !important;
    width: max-content !important;
    background: rgba(var(--sla-surface-2-rgb), 0.98) !important;
    backdrop-filter: blur(18px) !important;
    border: 1px solid rgba(var(--sla-accent-rgb), 0.42) !important;
    border-radius: 16px !important;
    padding: 6px !important;
    box-shadow: 0 20px 50px rgba(var(--sla-black-rgb), 0.85), 0 0 24px rgba(var(--sla-accent-rgb), 0.15) !important;
    display: none !important;
    flex-direction: column !important;
    gap: 4px !important;
    box-sizing: border-box !important;
  }

  #sla-hero-actions-dropdown-wrap[data-open="true"] #sla-hero-actions-dropdown-menu {
    display: flex !important;
  }

  .sla-hero-actions-dropdown-item {
    all: unset !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 11px 16px !important;
    border-radius: 11px !important;
    color: var(--sla-black) !important;
    -webkit-text-fill-color: var(--sla-black) !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
  }

  .sla-hero-actions-dropdown-item svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    stroke: currentColor !important;
  }

  .sla-hero-actions-dropdown-item:hover {
    background: rgba(var(--sla-accent-rgb), 0.16) !important;
    color: var(--sla-accent) !important;
    -webkit-text-fill-color: var(--sla-accent) !important;
  }

  .sla-hero-actions-dropdown-item[data-selected="true"] {
    background: var(--sla-accent) !important;
    color: var(--sla-black) !important;
    -webkit-text-fill-color: var(--sla-black) !important;
    font-weight: 900 !important;
  }

  .sla-hero-actions-dropdown-item[data-selected="true"] svg {
    stroke: var(--sla-black) !important;
    color: var(--sla-black) !important;
  }

/* ---- style#sla-all-dropdowns-black-font-styles ---- */
/* Force all fonts and icons in both the FAQ dropdown and Hero dropdown to solid black (#000000) */
  html body #sla-faq-dropdown-wrap,
  html body #sla-faq-dropdown-wrap *,
  html body #sla-faq-dropdown-trigger,
  html body #sla-faq-dropdown-trigger *,
  html body #sla-faq-dropdown-menu,
  html body #sla-faq-dropdown-menu *,
  html body .sla-faq-dropdown-item,
  html body .sla-faq-dropdown-item *,
  html body .sla-faq-dropdown-item:hover,
  html body .sla-faq-dropdown-item:hover *,
  html body .sla-faq-dropdown-item[data-selected="true"],
  html body .sla-faq-dropdown-item[data-selected="true"] *,
  html body #sla-hero-actions-dropdown-wrap,
  html body #sla-hero-actions-dropdown-wrap *,
  html body #sla-hero-actions-dropdown-trigger,
  html body #sla-hero-actions-dropdown-trigger *,
  html body #sla-hero-actions-dropdown-menu,
  html body #sla-hero-actions-dropdown-menu *,
  html body .sla-hero-actions-dropdown-item,
  html body .sla-hero-actions-dropdown-item *,
  html body .sla-hero-actions-dropdown-item:hover,
  html body .sla-hero-actions-dropdown-item:hover *,
  html body .sla-hero-actions-dropdown-item[data-selected="true"],
  html body .sla-hero-actions-dropdown-item[data-selected="true"] * {
    color: var(--sla-black) !important;
    -webkit-text-fill-color: var(--sla-black) !important;
    font-weight: 900 !important;
  }

  html body #sla-hero-actions-dropdown-wrap svg,
  html body #sla-hero-actions-dropdown-wrap svg * {
    stroke: var(--sla-black) !important;
    color: var(--sla-black) !important;
    fill: none !important;
  }

/* ---- style#sla-dropdown-cap-height-arrow-styles ---- */
/* Match dropdown arrow height to uppercase font cap-height in both FAQ & Hero dropdowns */
  html body #sla-faq-dropdown-trigger .sla-dd-chevron,
  html body #sla-faq-dropdown-trigger > span:last-child,
  html body #sla-hero-actions-dropdown-trigger .sla-hero-dd-chevron,
  html body #sla-hero-actions-dropdown-trigger > span:last-child {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    color: var(--sla-black) !important;
    -webkit-text-fill-color: var(--sla-black) !important;
    transform: scale(1.08) !important;
    transform-origin: center center !important;
    transition: transform 0.2s ease !important;
  }

  html body #sla-faq-dropdown-wrap[data-open="true"] #sla-faq-dropdown-trigger .sla-dd-chevron,
  html body #sla-faq-dropdown-wrap[data-open="true"] #sla-faq-dropdown-trigger > span:last-child,
  html body #sla-hero-actions-dropdown-wrap[data-open="true"] #sla-hero-actions-dropdown-trigger .sla-hero-dd-chevron,
  html body #sla-hero-actions-dropdown-wrap[data-open="true"] #sla-hero-actions-dropdown-trigger > span:last-child {
    transform: scale(1.08) rotate(180deg) !important;
  }

/* ---- /sla-css-ebc18bb27d.css ---- */
/* 3-Column Footer Grid (Brand/Escrow Left | TOOLS Middle | LEGAL & COMPLIANCE Right) */
  #sla-footer-main-3col-row {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 8px 24px 12px 24px !important;
    display: grid !important;
    grid-template-columns: minmax(260px, 1.35fr) minmax(190px, 0.85fr) minmax(240px, 1fr) !important;
    gap: 48px !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  @media (max-width: 860px) {
    #sla-footer-main-3col-row {
      grid-template-columns: 1fr !important;
      gap: 32px !important;
    }
  }

  /* Footer Brand Row: Logo + AGENT (white) + SLA (blue) */
  #sla-footer-brand-header {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    text-decoration: none !important;
  }

  #sla-footer-brand-logo-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  #sla-footer-brand-wordmark {
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  #sla-footer-brand-wordmark .sla-word-agent {
    color: var(--sla-white) !important;
    -webkit-text-fill-color: var(--sla-white) !important;
  }

  #sla-footer-brand-wordmark .sla-word-sla {
    color: var(--sla-accent) !important;
    -webkit-text-fill-color: var(--sla-accent) !important;
  }

  /* Shared Column Styling for TOOLS and LEGAL & COMPLIANCE */
  #sla-footer-tools-column,
  #sla-footer-legal-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    min-width: 190px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  .sla-footer-legal-heading {
    font-family: "JetBrains Mono", monospace !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--sla-warning) !important;
    -webkit-text-fill-color: var(--sla-warning) !important;
    margin: 0 0 4px 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }

  .sla-footer-legal-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 9px !important;
    background: transparent !important;
    border: none !important;
  }

  .sla-footer-legal-list li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }

  /* Plain monospace <a> links (zero button bubbles) */
  html body footer a.sla-footer-legal-anchor,
  html body #sla-footer-tools-column a.sla-footer-legal-anchor,
  html body #sla-footer-legal-column a.sla-footer-legal-anchor {
    all: unset !important;
    display: inline-block !important;
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.01em !important;
    color: var(--sla-text-3) !important;
    -webkit-text-fill-color: var(--sla-text-3) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    width: auto !important;
    text-decoration: none !important;
    text-transform: none !important;
    cursor: pointer !important;
    transition: color 0.15s ease !important;
  }

  html body footer a.sla-footer-legal-anchor:hover,
  html body #sla-footer-tools-column a.sla-footer-legal-anchor:hover,
  html body #sla-footer-legal-column a.sla-footer-legal-anchor:hover {
    color: var(--sla-white) !important;
    -webkit-text-fill-color: var(--sla-white) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .sla-footer-regulatory-microcopy {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 22px auto 0 auto !important;
    padding: 14px 24px 0 24px !important;
    border-top: 1px solid rgba(var(--sla-white-rgb), 0.05) !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
    color: var(--sla-text-faint) !important;
    text-align: left !important;
    box-sizing: border-box !important;
    background: transparent !important;
  }

  /* Full-Screen Legal & Compliance Dossier Modal */
  #sla-legal-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    background: rgba(3, 7, 15, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    z-index: 2147483646 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    box-sizing: border-box !important;
  }

  #sla-legal-modal-backdrop[data-open="true"] {
    display: flex !important;
  }

  .sla-legal-modal-shell {
    width: 100% !important;
    max-width: 960px !important;
    max-height: 88dvh !important;
    background: rgba(var(--sla-surface-2-rgb), 0.98) !important;
    border: 1px solid rgba(var(--sla-accent-rgb), 0.3) !important;
    border-radius: 22px !important;
    box-shadow: 0 28px 90px rgba(var(--sla-black-rgb), 0.88), 0 0 40px rgba(var(--sla-accent-rgb), 0.12) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  .sla-legal-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 24px 28px 18px 28px !important;
    border-bottom: 1px solid rgba(var(--sla-white-rgb), 0.08) !important;
    background: rgba(var(--sla-surface-slate-rgb), 0.6) !important;
  }

  .sla-legal-modal-eyebrow {
    font-family: "JetBrains Mono", monospace !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    color: var(--sla-warning) !important;
    text-transform: uppercase !important;
    margin: 0 0 4px 0 !important;
  }

  .sla-legal-modal-title {
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: clamp(18px, 2.5vw, 24px) !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    color: var(--sla-white) !important;
    text-transform: uppercase !important;
    margin: 0 !important;
  }

  .sla-legal-modal-close {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background: var(--sla-accent) !important;
    border: 1px solid var(--sla-accent) !important;
    color: var(--sla-black) !important;
    -webkit-text-fill-color: var(--sla-black) !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }

  .sla-legal-tabs-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
    padding: 14px 28px !important;
    border-bottom: 1px solid rgba(var(--sla-white-rgb), 0.08) !important;
    background: rgba(8, 13, 25, 0.85) !important;
  }

  html body .sla-legal-tab-link {
    all: unset !important;
    font-family: "JetBrains Mono", monospace !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--sla-text-muted) !important;
    -webkit-text-fill-color: var(--sla-text-muted) !important;
    background: transparent !important;
    border: none !important;
    padding: 4px 0 !important;
    cursor: pointer !important;
    border-bottom: 2px solid transparent !important;
  }

  html body .sla-legal-tab-link[data-active="true"] {
    color: var(--sla-white) !important;
    -webkit-text-fill-color: var(--sla-white) !important;
    border-bottom: 2px solid var(--sla-warning) !important;
    font-weight: 700 !important;
  }

  .sla-legal-modal-body {
    padding: 28px !important;
    overflow-y: auto !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    color: var(--sla-text-3) !important;
    font-size: 14px !important;
    line-height: 1.68 !important;
  }

  .sla-legal-modal-body h4 {
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--sla-white) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    margin: 22px 0 8px 0 !important;
  }

  .sla-legal-modal-body h4:first-child {
    margin-top: 0 !important;
  }

  .sla-legal-modal-body p {
    margin: 0 0 14px 0 !important;
    color: var(--sla-text-3) !important;
  }

  .sla-legal-modal-body ul {
    margin: 0 0 16px 0 !important;
    padding-left: 20px !important;
    color: var(--sla-text-3) !important;
  }

  .sla-legal-modal-body li {
    margin-bottom: 6px !important;
  }

/* ---- style#sla-clean-consolidated-styles ---- */
/* Sticky Top Header Always Stays Above Scrolling Content */
  html body header,
  html body nav,
  html body .navbar,
  html body .site-header {
    z-index: 10000 !important;
    background-color: rgba(5, 8, 18, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  /* Canonical Bottom Footer — Always at the Bottom of the Page */
  footer#sla-canonical-bottom-footer,
  html body footer {
    width: 100% !important;
    max-width: 100% !important;
    margin: 64px auto 0 auto !important;
    padding: 36px 0 28px 0 !important;
    border-top: 1px solid rgba(var(--sla-white-rgb), 0.08) !important;
    background: transparent !important;
    box-sizing: border-box !important;
    display: block !important;
    clear: both !important;
    position: relative !important;
    z-index: 10 !important;
  }

  /* Keep Orientation Walkthrough at 2147483600 so the Live Dossier Modal (2147483647) always opens ON TOP of it */
  #sla-orientation-modal,
  #sla-orientation-backdrop,
  #orientation-modal,
  #walkthrough-modal,
  [id*="orientation"][id*="modal"],
  [id*="orientation"][id*="backdrop"],
  [id*="walkthrough"][id*="modal"],
  [id*="walkthrough"][id*="backdrop"] {
    z-index: 2147483600 !important;
  }

  /* Ensure all brand logos and icons are always visible */
  img[src*="favicons"],
  img[src*="logo"],
  img[src*="icon"],
  .brand-logo,
  .agent-logo {
    visibility: visible !important;
    opacity: 1 !important;
  }

/* ---- style#sla-dossier-dropdown-black-font-styles ---- */
/* Force black font and black icons on the Dossier dropdown trigger and all dropdown options */
  html body .sla-oed-view-dropdown-wrap button.sla-oed-view-dropdown-trigger,
  html body .sla-oed-view-dropdown-wrap button.sla-oed-view-dropdown-trigger *,
  html body .sla-oed-view-dropdown-wrap .sla-oed-view-trigger-left,
  html body .sla-oed-view-dropdown-wrap .sla-oed-view-trigger-chevron,
  html body .sla-oed-view-dropdown-wrap button.sla-oed-view-dropdown-option,
  html body .sla-oed-view-dropdown-wrap button.sla-oed-view-dropdown-option[data-selected="true"],
  html body .sla-oed-view-dropdown-wrap button.sla-oed-view-dropdown-option:hover,
  html body .sla-oed-view-dropdown-wrap button.sla-oed-view-dropdown-option * {
    color: var(--sla-black) !important;
    -webkit-text-fill-color: var(--sla-black) !important;
    font-weight: 900 !important;
  }

  html body .sla-oed-view-dropdown-wrap svg,
  html body .sla-oed-view-dropdown-wrap svg path {
    stroke: var(--sla-black) !important;
    color: var(--sla-black) !important;
  }

  html body .sla-oed-view-dropdown-wrap button.sla-oed-view-dropdown-trigger,
  html body .sla-oed-view-dropdown-wrap button.sla-oed-view-dropdown-option,
  html body .sla-oed-view-dropdown-wrap button.sla-oed-view-dropdown-option[data-selected="true"] {
    background: var(--sla-accent) !important;
    background-color: var(--sla-accent) !important;
    border-radius: 999px !important;
  }

  html body .sla-oed-view-dropdown-wrap button.sla-oed-view-dropdown-trigger:hover,
  html body .sla-oed-view-dropdown-wrap button.sla-oed-view-dropdown-option:hover {
    background: var(--sla-accent-soft) !important;
    background-color: var(--sla-accent-soft) !important;
  }

  html body .sla-oed-view-dropdown-menu {
    gap: 8px !important;
    padding: 10px !important;
  }

/* ---- /sla-css-93617e0dcc.css ---- */
/* Hide the original side-by-side OPEN FULL DIRECTORY & TOP 10 DIRECTORY LISTS buttons once replaced */
  [data-sla-hidden-orig-dir-btn="true"],
  .sla-dir-browse-clone-wrap,
  .sla-dir-spotify-dropdown-wrap {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -99999px !important;
  }

  /* "BROWSE DIRECTORY" Trigger Button */
  html body button#sla-browse-directory-modal-trigger {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 10px 24px !important;
    border-radius: 999px !important;
    background: var(--sla-accent) !important;
    background-color: var(--sla-accent) !important;
    border: 1px solid var(--sla-accent) !important;
    box-shadow: 0 0 20px rgba(var(--sla-accent-rgb), 0.32) !important;
    color: var(--sla-black) !important;
    -webkit-text-fill-color: var(--sla-black) !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    user-select: none !important;
    position: relative !important;
    z-index: 20 !important;
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
  }

  html body button#sla-browse-directory-modal-trigger:hover {
    background: var(--sla-accent-deep) !important;
    background-color: var(--sla-accent-deep) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 0 28px rgba(var(--sla-accent-rgb), 0.52) !important;
  }

  html body button#sla-browse-directory-modal-trigger,
  html body button#sla-browse-directory-modal-trigger * {
    color: var(--sla-black) !important;
    -webkit-text-fill-color: var(--sla-black) !important;
  }

  /* Exact Dark Sheet Modal from Screenshot 2026-11-05 123550.png (Immune to global <button> and <h2> mutators) */
  #sla-browse-directory-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    background: rgba(2, 6, 15, 0.82) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    z-index: 2147483646 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
    box-sizing: border-box !important;
  }

  #sla-browse-directory-modal-backdrop[data-open="true"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #sla-browse-directory-modal-backdrop .sla-dir-sheet-card {
    width: 100% !important;
    max-width: 440px !important;
    background: #0d121f !important;
    background-color: #0d121f !important;
    border: 1px solid rgba(var(--sla-white-rgb), 0.09) !important;
    border-radius: 20px !important;
    box-shadow: 0 28px 80px rgba(var(--sla-black-rgb), 0.92) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    text-align: left !important;
    color: var(--sla-white) !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    padding: 0 !important;
  }

  #sla-browse-directory-modal-backdrop .sla-dir-sheet-handle {
    width: 42px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(var(--sla-text-muted-rgb), 0.42) !important;
    margin: 12px auto 6px auto !important;
  }

  #sla-browse-directory-modal-backdrop .sla-dir-sheet-header {
    padding: 8px 24px 18px 24px !important;
    border-bottom: 1px solid rgba(var(--sla-white-rgb), 0.08) !important;
    text-align: left !important;
  }

  #sla-browse-directory-modal-backdrop .sla-dir-sheet-title {
    display: block !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    color: var(--sla-white) !important;
    -webkit-text-fill-color: var(--sla-white) !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.25 !important;
    text-align: left !important;
  }

  #sla-browse-directory-modal-backdrop .sla-dir-sheet-sub {
    display: block !important;
    font-family: "JetBrains Mono", monospace !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--sla-text-muted) !important;
    -webkit-text-fill-color: var(--sla-text-muted) !important;
    margin: 0 !important;
    text-align: left !important;
  }

  #sla-browse-directory-modal-backdrop .sla-dir-sheet-list {
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  /* Plain dark list rows (Using <div> so global <button> blue-pill rules never touch them) */
  #sla-browse-directory-modal-backdrop .sla-dir-sheet-row {
    all: unset !important;
    box-sizing: border-box !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 15px 24px !important;
    margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--sla-white) !important;
    -webkit-text-fill-color: var(--sla-white) !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    text-align: left !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background-color 0.14s ease !important;
  }

  #sla-browse-directory-modal-backdrop .sla-dir-sheet-row:hover {
    background: rgba(var(--sla-white-rgb), 0.05) !important;
    background-color: rgba(var(--sla-white-rgb), 0.05) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #sla-browse-directory-modal-backdrop .sla-dir-sheet-row span {
    color: var(--sla-white) !important;
    -webkit-text-fill-color: var(--sla-white) !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: none !important;
  }

/* ---- style#sla-dossier-modal-7point-surgical-styles ---- */
/* 1. Hide the COPY ENDPOINT pill button completely */
  html body #sla-orientation-exact-dossier-backdrop [data-sla-hidden-copy-endpoint-btn="true"] {
    display: none !important;
  }

  /* 2. Delete blue background behind "X" close button and turn "X" pure white */
  html body #sla-orientation-exact-dossier-backdrop button[data-sla-dossier-close="true"],
  html body #sla-orientation-exact-dossier-backdrop [data-sla-dossier-close="true"] {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--sla-white) !important;
    -webkit-text-fill-color: var(--sla-white) !important;
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    user-select: none !important;
  }

  html body #sla-orientation-exact-dossier-backdrop [data-sla-dossier-close="true"] * {
    color: var(--sla-white) !important;
    -webkit-text-fill-color: var(--sla-white) !important;
    stroke: var(--sla-white) !important;
  }

  /* 3. White copy symbol directly at the end of https://agentsla.io/mcp */
  html body #sla-orientation-exact-dossier-backdrop .sla-endpoint-url-inline-copy-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
  }

  html body #sla-orientation-exact-dossier-backdrop span.sla-endpoint-inline-copy-icon {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    margin-left: 8px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--sla-white) !important;
    -webkit-text-fill-color: var(--sla-white) !important;
    cursor: pointer !important;
    vertical-align: middle !important;
  }

  html body #sla-orientation-exact-dossier-backdrop span.sla-endpoint-inline-copy-icon svg,
  html body #sla-orientation-exact-dossier-backdrop span.sla-endpoint-inline-copy-icon svg * {
    stroke: var(--sla-white) !important;
    fill: none !important;
  }

/* ---- style#sla-spotify-picked-for-you-cards-css ---- */
/* 3-column grid aligned flush with the LIVE SOVEREIGN ORACLE VERIFICATION SWEEP bar */
  html body:not([data-sla-active-tab="console"]):not([data-sla-active-tab="top10"]) #sla-main-directory-grid,
  html body:not([data-sla-active-tab="console"]):not([data-sla-active-tab="top10"]) #home-preview-grid,
  html body:not([data-sla-active-tab="console"]):not([data-sla-active-tab="top10"]) .sla-spotify-pfy-grid {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-content: space-between !important;
    align-items: start !important;
    gap: 18px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 8px 0 !important;
    box-sizing: border-box !important;
  }

  @media (max-width: 960px) {
    html body:not([data-sla-active-tab="console"]):not([data-sla-active-tab="top10"]) #sla-main-directory-grid,
    html body:not([data-sla-active-tab="console"]):not([data-sla-active-tab="top10"]) #home-preview-grid,
    html body:not([data-sla-active-tab="console"]):not([data-sla-active-tab="top10"]) .sla-spotify-pfy-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }

  @media (max-width: 620px) {
    html body:not([data-sla-active-tab="console"]):not([data-sla-active-tab="top10"]) #sla-main-directory-grid,
    html body:not([data-sla-active-tab="console"]):not([data-sla-active-tab="top10"]) #home-preview-grid,
    html body:not([data-sla-active-tab="console"]):not([data-sla-active-tab="top10"]) .sla-spotify-pfy-grid {
      grid-template-columns: minmax(0, 1fr) !important;
    }
  }

  /* Host element maintains exact 420 / 200 (2.1 : 1) ratio inside its column */
  html body #sla-main-directory-grid > .sla-spotify-pfy-host,
  html body #home-preview-grid > .sla-spotify-pfy-host,
  html body .sla-spotify-pfy-host {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 420px !important;
    aspect-ratio: 420 / 200 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 200px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    border: none !important;
    background: transparent !important;
    overflow: visible !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

/* ---- style#sla-dossier-white-close-and-copy-css ---- */
/* Ultra-high specificity override so global blue-pill button rules NEVER turn the Dossier Close (X) black */
  html body #sla-orientation-exact-dossier-backdrop button.sla-dossier-clean-close-btn:not(#_):not(#_),
  html body #sla-orientation-exact-dossier-backdrop [data-sla-close-btn="1"]:not(#_):not(#_),
  html body #sla-orientation-exact-dossier-backdrop button[aria-label*="Close" i]:not(#_):not(#_) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--sla-white) !important;
    -webkit-text-fill-color: var(--sla-white) !important;
    fill: var(--sla-white) !important;
    stroke: var(--sla-white) !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    opacity: 1 !important;
  }

  html body #sla-orientation-exact-dossier-backdrop button.sla-dossier-clean-close-btn:not(#_):not(#_) *,
  html body #sla-orientation-exact-dossier-backdrop [data-sla-close-btn="1"]:not(#_):not(#_) * {
    color: var(--sla-white) !important;
    -webkit-text-fill-color: var(--sla-white) !important;
    stroke: var(--sla-white) !important;
  }

  /* Pure white inline copy icon button next to the Dossier URL (no blue pill background) */
  html body #sla-orientation-exact-dossier-backdrop button.sla-dossier-inline-copy-icon-btn:not(#_):not(#_) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--sla-white) !important;
    -webkit-text-fill-color: var(--sla-white) !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    margin-left: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    vertical-align: middle !important;
  }

  html body #sla-orientation-exact-dossier-backdrop button.sla-dossier-inline-copy-icon-btn:not(#_):not(#_) svg,
  html body #sla-orientation-exact-dossier-backdrop button.sla-dossier-inline-copy-icon-btn:not(#_):not(#_) svg * {
    stroke: var(--sla-white) !important;
    fill: none !important;
    color: var(--sla-white) !important;
  }

/* ---- style#sla-collapse-pagination-footer-gap-css ---- */
/* Collapse bottom spacing under the pagination bar & directory section */
  html body #sla-dir-pagination-bar {
    margin-bottom: 0px !important;
  }

  html body #directory-preview,
  html body #directory,
  html body section:has(#sla-main-directory-grid),
  html body section:has(#home-preview-grid),
  html body main {
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
  }

  /* Pull footer tight under the pagination bar */
  html body footer {
    margin-top: 16px !important;
    padding-top: 24px !important;
  }

/* ---- /sla-css-1eb937eb39.css ---- */
/* 3 Spotify quick-access buttons mounted directly under the navbar across DIRECTORY, CONSOLE, and TOP 10 GLOBAL */
  html body > #sla-spotify-quick-picks-wrap:not(#_):not(#_),
  html body[data-sla-active-tab="directory"] > #sla-spotify-quick-picks-wrap:not(#_):not(#_),
  html body[data-sla-active-tab="console"] > #sla-spotify-quick-picks-wrap:not(#_):not(#_),
  html body[data-sla-active-tab="top10"] > #sla-spotify-quick-picks-wrap:not(#_):not(#_),
  html body #sla-spotify-quick-picks-wrap:not(#_):not(#_) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 1216px !important;
    margin: 14px auto 14px auto !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 45 !important;
  }

  /* Separator line removed */
  html body #sla-spotify-below-buttons-divider { display: none !important; height: 0 !important; margin: 0 !important; border: none !important; }

  /* Strictly 3-column x 1-row Spotify quick-access button grid */
  html body .sla-spotify-quick-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
  }

  @media (max-width: 860px) {
    html body .sla-spotify-quick-grid {
      grid-template-columns: minmax(0, 1fr) !important;
    }
  }

  /* Individual Spotify horizontal shortcut button (64px tall, flush 64x64 left square, #282828 right body) */
  html body button.sla-spotify-quick-btn:not(#_):not(#_) {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--sla-border-neutral-2) !important;
    background-color: var(--sla-border-neutral-2) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(var(--sla-black-rgb), 0.35) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    text-align: left !important;
    user-select: none !important;
    transition: background-color 0.18s ease, transform 0.14s ease !important;
  }

  html body button.sla-spotify-quick-btn:not(#_):not(#_):hover {
    background: #3e3e3e !important;
    background-color: #3e3e3e !important;
  }

  html body button.sla-spotify-quick-btn[data-active="true"]:not(#_):not(#_) {
    background: var(--sla-border-neutral) !important;
    background-color: var(--sla-border-neutral) !important;
    box-shadow: inset 0 0 0 1.5px rgba(var(--sla-accent-rgb), 0.85), 0 4px 12px rgba(var(--sla-black-rgb), 0.4) !important;
  }

  /* Left 64x64 flush square artwork tile */
  html body .sla-spotify-quick-art {
    flex: 0 0 64px !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #181818 !important;
    box-shadow: 4px 0 12px rgba(var(--sla-black-rgb), 0.35) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .sla-spotify-quick-art svg,
  html body .sla-spotify-quick-art img {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Right bold white label */
  html body .sla-spotify-quick-label {
    flex: 1 1 auto !important;
    padding: 0 16px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    color: var(--sla-white) !important;
    -webkit-text-fill-color: var(--sla-white) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word !important;
    text-align: left !important;
  }

/* ---- /sla-css-8fb1e3d4c8.css ---- */
/* 1. Prevent navbar "How It Works" blue pill flash AND keep it white (#ffffff) unless explicitly clicked */
  html body header nav a:first-child,
  html body header a[href*="how-it-works"],
  html body nav a[href*="how-it-works"] {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--sla-white) !important;
    -webkit-text-fill-color: var(--sla-white) !important;
    text-transform: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body header nav a:first-child:hover,
  html body header a[href*="how-it-works"]:hover,
  html body nav a[href*="how-it-works"]:hover {
    color: var(--sla-accent) !important;
    -webkit-text-fill-color: var(--sla-accent) !important;
  }

  /* 2. Force every LIVE SOVEREIGN ORACLE VERIFICATION SWEEP box to stack vertically (Header Row on top, Track Row underneath) */
  html body [data-sla-sweep-box="1"]:not(#_):not(#_) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 18px !important;
    box-sizing: border-box !important;
  }

  html body .sla-60s-sweep-header-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .sla-60s-sweep-title {
    font-family: 'JetBrains Mono', 'Inter', monospace !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--sla-positive) !important;
    -webkit-text-fill-color: var(--sla-positive) !important;
    white-space: nowrap !important;
  }

  html body .sla-60s-sweep-timer {
    font-family: 'JetBrains Mono', 'Inter', monospace !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    color: var(--sla-accent) !important;
    -webkit-text-fill-color: var(--sla-accent) !important;
    white-space: nowrap !important;
  }

  /* Visual 60s sweep progress track & GPU-accelerated flicker-free fill bar */
  html body .sla-60s-sweep-track {
    width: 100% !important;
    height: 6px !important;
    min-height: 6px !important;
    max-height: 6px !important;
    background: rgba(var(--sla-white-rgb), 0.08) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    display: block !important;
    transform: translateZ(0) !important;
  }

  html body .sla-60s-sweep-fill {
    width: 100% !important;
    height: 100% !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, var(--sla-positive) 0%, var(--sla-accent) 100%) !important;
    transform-origin: left center !important;
    will-change: transform !important;
    transition: none !important;
    display: block !important;
  }

  /* 3. Lock LOCK ESCROW width so it never stretches wide during initial load and jumps when INSPECT DOSSIER mounts */
  html body button.sla-top10-lock-btn-fixed:not(#_):not(#_) {
    width: auto !important;
    min-width: 118px !important;
    max-width: 132px !important;
    flex: 0 0 auto !important;
  }

  /* INSPECT DOSSIER button in the QUICK ACTION column next to LOCK ESCROW */
  html body button.sla-top10-inspect-btn:not(#_):not(#_) {
    background: rgba(var(--sla-accent-rgb), 0.12) !important;
    background-color: rgba(var(--sla-accent-rgb), 0.12) !important;
    border: 1px solid rgba(var(--sla-accent-rgb), 0.45) !important;
    color: var(--sla-accent) !important;
    -webkit-text-fill-color: var(--sla-accent) !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
  }

  html body button.sla-top10-inspect-btn:not(#_):not(#_):hover {
    background: var(--sla-accent) !important;
    background-color: var(--sla-accent) !important;
    border-color: var(--sla-accent) !important;
    color: var(--sla-surface-1) !important;
    -webkit-text-fill-color: var(--sla-surface-1) !important;
  }

/* ---- style#sla-navbar-clean-links-css ---- */
/* Force "How It Works" in the top navbar to always be plain text (never a blue pill button) */
  html body header a[data-sla-nav-how="1"]:not(#_):not(#_):not(#_),
  html body nav a[data-sla-nav-how="1"]:not(#_):not(#_):not(#_),
  html body header button[data-sla-nav-how="1"]:not(#_):not(#_):not(#_),
  html body header nav a:first-of-type:not(#_):not(#_):not(#_),
  html body header a[href*="how-it-works"]:not(#_):not(#_):not(#_) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--sla-white) !important;
    -webkit-text-fill-color: var(--sla-white) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    height: auto !important;
    min-height: 0 !important;
  }

  html body header a[data-sla-nav-how="1"]:not(#_):not(#_):not(#_):hover,
  html body header nav a:first-of-type:not(#_):not(#_):not(#_):hover,
  html body header a[href*="how-it-works"]:not(#_):not(#_):not(#_):hover {
    color: var(--sla-accent) !important;
    -webkit-text-fill-color: var(--sla-accent) !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  /* Only highlight "Directory" in blue (#38bdf8) when DIRECTORY is the active tab; keep it white on CONSOLE and TOP 10 GLOBAL */
  html body[data-sla-active-tab="console"] header a[data-sla-nav-dir="1"]:not(#_):not(#_):not(#_),
  html body[data-sla-active-tab="top10"] header a[data-sla-nav-dir="1"]:not(#_):not(#_):not(#_) {
    color: var(--sla-white) !important;
    -webkit-text-fill-color: var(--sla-white) !important;
  }

  html body[data-sla-active-tab="directory"] header a[data-sla-nav-dir="1"] { color: var(--sla-white) !important; -webkit-text-fill-color: var(--sla-white) !important; }

/* ---- style#sla-clean-spacing-and-footer-flow-css ---- */
html body #sla-spotify-below-buttons-divider:not(#_):not(#_):not(#_):not(#_) {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    border: none !important;
  }

  html body main:not(#_):not(#_):not(#_) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
  }

  html body footer:not(#_):not(#_):not(#_):not(#_) {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    clear: both !important;
    width: 100% !important;
    margin-top: 64px !important;
  }

/* ---- style#sla-collapse-main-top-gap-exact-css ---- */
/* 1. Tighten bottom margin on the 3 Spotify buttons wrapper */
  html body > #sla-spotify-quick-picks-wrap:not(#_):not(#_):not(#_):not(#_),
  html body #sla-spotify-quick-picks-wrap:not(#_):not(#_):not(#_):not(#_) {
    margin-top: 12px !important;
    margin-bottom: 10px !important;
    padding-bottom: 0px !important;
  }

  /* 2. Remove the 56px top padding (pt-8 sm:pt-14) on <main> right below the 3 Spotify buttons */
  html body main.max-w-7xl:not(#_):not(#_):not(#_):not(#_),
  html body #sla-spotify-quick-picks-wrap + main:not(#_):not(#_):not(#_):not(#_) {
    padding-top: 0px !important;
    margin-top: 0px !important;
  }

  /* 3. Collapse the leftover empty <section class="border-b border-[#262B38] pb-6"> (L13607) that created the blank space and line above the titles */
  html body main > section.border-b.pb-6:first-child:not(#_):not(#_):not(#_):not(#_),
  html body main > section:has(> [data-sla-collapsed-tabbar="true"]):not(#_):not(#_):not(#_):not(#_) {
    display: none !important;
    height: 0px !important;
    min-height: 0px !important;
    max-height: 0px !important;
    padding: 0px !important;
    margin: 0px !important;
    border: none !important;
    overflow: hidden !important;
  }

  /* 4. Zero out Tailwind space-y-16 top margin (64px) on the 3 tab panels so titles sit right below the 3-button row */
  html body main > #tab-panel-directory:not(#_):not(#_):not(#_):not(#_),
  html body main > #tab-panel-console:not(#_):not(#_):not(#_):not(#_),
  html body #sla-isolated-console-view:not(#_):not(#_):not(#_):not(#_),
  html body #sla-spotify-top10-view:not(#_):not(#_):not(#_):not(#_) {
    margin-top: 0px !important;
    padding-top: 0px !important;
  }

/* ---- style#sla-top10-7col-locked-css ---- */
/* 1. Lock 7-column grid alignment across all Top 10 Global Lists tables */
  html body #sla-spotify-top10-view .sla-sp-thead:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_),
  html body #sla-spotify-top10-view .sla-sp-col-headers:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_),
  html body #sla-spotify-top10-view .sla-sp-header-7col:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_),
  html body #sla-spotify-top10-view .sla-sp-track:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) {
    display: grid !important;
    grid-template-columns: 42px minmax(210px, 2.05fr) minmax(170px, 1.45fr) minmax(92px, 0.8fr) minmax(72px, 0.65fr) minmax(122px, 1.05fr) minmax(248px, 2fr) !important;
    align-items: center !important;
    column-gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2. Force QUICK ACTION cell onto a single horizontal row (never wrap onto 2 lines) */
  html body #sla-spotify-top10-view .sla-sp-actions:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_),
  html body #sla-spotify-top10-view .sla-sp-track > div:last-child:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }

  /* 3. Hide any 3rd button or duplicate INSPECT DOSSIER button in QUICK ACTION with 13-ID specificity */
  html body #sla-spotify-top10-view .sla-sp-actions > *:nth-child(n+3):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_),
  html body #sla-spotify-top10-view .sla-sp-track > div:last-child > *:nth-child(n+3):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_),
  html body #sla-spotify-top10-view .sla-sp-actions > .sla-sp-btn-inspect:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_),
  html body #sla-spotify-top10-view .sla-sp-actions > [data-sla-dup-inspect="1"]:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    position: absolute !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  /* 4. Style Button #1 (LOCK ESCROW) as solid sky-blue pill */
  html body #sla-spotify-top10-view .sla-sp-actions > button:nth-child(1):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 30px !important;
    padding: 0 13px !important;
    border-radius: 9999px !important;
    background: var(--sla-accent) !important;
    background-color: var(--sla-accent) !important;
    border: 1px solid var(--sla-accent) !important;
    color: var(--sla-surface-1) !important;
    -webkit-text-fill-color: var(--sla-surface-1) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
  }

  /* 5. Style Button #2 (INSPECT DOSSIER) as dark-outline pill */
  html body #sla-spotify-top10-view .sla-sp-actions > button:nth-child(2):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 30px !important;
    padding: 0 13px !important;
    border-radius: 9999px !important;
    background: rgba(var(--sla-surface-slate-rgb), 0.9) !important;
    background-color: rgba(var(--sla-surface-slate-rgb), 0.9) !important;
    border: 1px solid rgba(var(--sla-accent-rgb), 0.42) !important;
    color: var(--sla-accent) !important;
    -webkit-text-fill-color: var(--sla-accent) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
  }

/* ---- /sla-mobile-v1.css ---- */
/*
 * sla-mobile-v1.css: phone layout fixes. Loaded LAST on every page so it wins over the older
 * stylesheets (which use !important everywhere). Only applies at 640px and below.
 */
@media (max-width: 640px) {

  /* 1. Dashboard tab bar: three compact tabs side by side instead of three 64px stacked cards.
     (Older rules use :not(#_) chains for specificity, so these use one more.) */
  html body #sla-spotify-quick-picks-wrap:not(#_):not(#_):not(#_):not(#_):not(#_) {
    padding: 8px 12px !important;
  }
  html body #sla-spotify-quick-picks-wrap .sla-spotify-quick-grid:not(#_):not(#_):not(#_):not(#_):not(#_) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  html body #sla-spotify-quick-picks-wrap .sla-spotify-quick-art:not(#_):not(#_):not(#_):not(#_):not(#_) {
    display: none !important;
  }
  html body #sla-spotify-quick-picks-wrap .sla-spotify-quick-label:not(#_):not(#_):not(#_):not(#_):not(#_) {
    flex: 1 1 auto !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.04em !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: center !important;
  }
  /* 2. Comparison table: one card per row instead of an 860px-wide table */
  html body .sla-table-wrapper {
    overflow: visible !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html body .sla-comparison-table,
  html body .sla-comparison-table tbody,
  html body .sla-comparison-table tr,
  html body .sla-comparison-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  html body .sla-comparison-table thead {
    display: none !important;
  }
  html body .sla-comparison-table tr {
    margin: 0 0 12px 0 !important;
    padding: 14px 16px !important;
    border: 1px solid var(--sla-border) !important;
    border-radius: 16px !important;
    background: #0B0D13 !important;
  }
  html body .sla-comparison-table td {
    padding: 10px 0 !important;
    border: none !important;
    border-top: 1px solid #1c2130 !important;
    background: transparent !important;
    text-align: left !important;
  }
  html body .sla-comparison-table td.row-title,
  html body .sla-comparison-table td:first-child {
    border-top: none !important;
    padding-top: 0 !important;
    font-size: 13px !important;
    color: var(--sla-accent-strong) !important;
  }
  html body .sla-comparison-table td:nth-child(2)::before,
  html body .sla-comparison-table td:nth-child(3)::before,
  html body .sla-comparison-table td:nth-child(4)::before {
    display: block !important;
    margin-bottom: 4px !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    color: var(--sla-gray-ink) !important;
  }
  html body .sla-comparison-table td:nth-child(2)::before { content: "MCP DIRECTORIES" !important; }
  html body .sla-comparison-table td:nth-child(3)::before { content: "X402 PAYMENT RAILS" !important; }
  html body .sla-comparison-table td:nth-child(4)::before { content: "AGENTSLA" !important; color: var(--sla-accent-strong) !important; }

  /* 3. Hero search: full-width box and button */
  html body section [data-sla-hero-search-row="1"] input[placeholder*="Search verified APIs"],
  html body main section:first-of-type [data-sla-hero-search-row="1"] input[placeholder*="Search verified APIs"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  html body [data-sla-hero-search-row="1"] > button,
  html body [data-sla-hero-search-row="1"] > a {
    width: 100% !important;
    min-height: 46px !important;
  }

  /* 4. Footer links: comfortable tap targets (were 18px tall) */
  html body .sla-footer-legal-anchor {
    display: inline-block !important;
    padding: 9px 0 !important;
    line-height: 1.3 !important;
  }

  /* 5. Directory category menu: text was clipped by desktop padding */
  html body #dir-cat-select:not(#_):not(#_) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 42px !important;
    font-size: 12.5px !important;
  }
}