/* ============================================
   DATA RIDERS — Agents Store (App-Store style)
   Used on /agents/, /agentes/, and on both home pages.
   ============================================ */

/* ------------------------------------------------------------
   Data Riders Agent — embed-slot placeholder (used until the
   conversational widget is pasted in).
   ------------------------------------------------------------ */
.dr-agent-placeholder {
    background: linear-gradient(135deg, rgba(77, 163, 255, 0.08), rgba(124, 92, 255, 0.06));
    border: 1px dashed var(--border-color-strong);
    border-radius: var(--radius-lg);
    padding: 48px 32px;
    text-align: center;
    color: var(--text-secondary);
}
.dr-agent-placeholder-icon {
    width: 72px; height: 72px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(77, 163, 255, 0.15);
    color: var(--accent-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
}
.dr-agent-placeholder h3 { color: var(--text-primary); font-size: 1.25rem; margin-bottom: 12px; }
.dr-agent-placeholder p  { max-width: 560px; margin: 0 auto 10px; line-height: 1.55; font-size: 0.95rem; }
.dr-agent-placeholder-meta { color: var(--text-muted); font-size: 0.82rem; margin-top: 16px; }
.dr-agent-placeholder-meta i { color: var(--accent-blue); margin-right: 6px; }


/* ---------- Section wrapper ---------- */
.agents-store {
    padding: 80px 0;
    background: var(--bg-primary, #0a0e1a);
    position: relative;
}
.agents-store-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}
.agents-store-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-blue, #4A9EFF);
    font-weight: 700;
    margin-bottom: 12px;
}
.agents-store-title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.15;
    margin-bottom: 14px;
    color: var(--text-primary, #fff);
}
.agents-store-subtitle {
    font-size: 1.05rem;
    color: var(--text-secondary, #a0a8b8);
    line-height: 1.55;
}

/* ---------- Grid of app cards ----------
   Sprint 2026-04-22E2: 6-column virtual grid. Every card spans 2 columns
   (= 3 cards per row). When exactly 5 cards are present, we offset the 4th
   card to start at column 2 so that cards 4 & 5 sit in columns 2-3 and 4-5,
   which means they keep the SAME width as row 1 and render centered as a
   whole. No orphan is ever stretched wider than its peers. */
.agents-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.agents-grid > .agent-card {
    grid-column: span 2; /* default: 3 cards per row, equal width */
}
/* Exactly 5 cards → card 4 starts at col 2 → row 2 has 2 cards same width, centered */
.agents-grid > .agent-card:nth-last-child(2):nth-child(4) {
    grid-column: 2 / span 2;
}

/* 2-column layout for mid-size tablets (≤ 1024 px) */
@media (max-width: 1024px) {
    .agents-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .agents-grid > .agent-card { grid-column: span 2; }
    /* Cancel the 3+2 centering at this breakpoint — 2+2+1 is the natural fit */
    .agents-grid > .agent-card:nth-last-child(2):nth-child(4) {
        grid-column: span 2;
    }
    /* Last orphan on a 5-card grid spans full row so it centers naturally */
    .agents-grid > .agent-card:nth-last-child(1):nth-child(5) { grid-column: span 4; }
}

/* ---------- App card (the "app store tile") ---------- */
.agent-card {
    position: relative;
    background: var(--bg-card, #12182a);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 20px;
    padding: 24px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
    overflow: hidden;
}
.agent-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(74,158,255,0.06), rgba(123,104,238,0.04));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.agent-card:hover {
    transform: translateY(-4px);
    border-color: rgba(74,158,255,0.35);
    box-shadow: 0 20px 40px -20px rgba(74,158,255,0.35);
}
.agent-card:hover::before { opacity: 1; }

.agent-card-top {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}
/* 2026-04-22E2: bumped app icon to 88px (app-store scale) so agent cards
   read as real applications rather than bulleted list items. */
.agent-icon {
    width: 88px;
    height: 88px;
    border-radius: 22px;
    flex-shrink: 0;
    object-fit: cover;
    background: #000;
    box-shadow: 0 10px 24px -8px rgba(0,0,0,0.55);
}
.agent-card-title-wrap { flex: 1; min-width: 0; }
.agent-card-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    margin: 0 0 4px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.agent-card-tag {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-blue, #4A9EFF);
    font-weight: 600;
}
.agent-card-desc {
    font-size: 0.92rem;
    color: var(--text-secondary, #a0a8b8);
    line-height: 1.55;
    position: relative;
    z-index: 1;
    flex: 1;
    margin: 0;
}
.agent-card-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
    position: relative;
    z-index: 1;
}
.agent-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
    border: none;
    cursor: pointer;
}
.agent-btn-open {
    background: linear-gradient(135deg, #4A9EFF, #7B68EE);
    color: #fff;
}
.agent-btn-open:hover { transform: translateY(-1px); opacity: 0.92; }
.agent-btn-info {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary, #fff);
    border: 1px solid rgba(255,255,255,0.1);
}
.agent-btn-info:hover {
    background: rgba(74,158,255,0.12);
    border-color: rgba(74,158,255,0.35);
}
.agent-btn i { font-size: 0.82rem; }

/* ---------- Compact variant for homepage ---------- */
.agents-store.compact {
    padding: 60px 0;
}
.agents-store.compact .agents-store-header { margin-bottom: 32px; }
.agents-store.compact .agent-card {
    padding: 18px;
}
.agents-store.compact .agent-icon { width: 60px; height: 60px; border-radius: 14px; }
.agents-store.compact .agent-card-title { font-size: 1.05rem; }
.agents-store.compact .agent-card-desc { font-size: 0.86rem; }

/* ---------- Dedicated agent page styles ---------- */
.agent-page-hero {
    position: relative;
    padding: 120px 20px 60px;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary, #0a0e1a);
    overflow: hidden;
}
.agent-page-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.35;
    z-index: 0;
}
.agent-page-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,14,26,0.4) 0%, var(--bg-primary, #0a0e1a) 90%);
}
.agent-page-hero-content {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}
.agent-page-hero-icon {
    width: 96px;
    height: 96px;
    border-radius: 22px;
    margin: 0 auto 20px;
    display: block;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
}
.agent-page-eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-blue, #4A9EFF);
    font-weight: 700;
    margin-bottom: 14px;
}
.agent-page-hero h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.1;
    margin-bottom: 18px;
    color: var(--text-primary, #fff);
}
.agent-page-hero .lead {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-secondary, #a0a8b8);
    max-width: 620px;
    margin: 0 auto 28px;
}
.agent-page-hero-cta {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ---------- Embed area (desktop) / CTA (mobile) ---------- */
.agent-embed-section {
    padding: 40px 20px 80px;
    background: var(--bg-primary, #0a0e1a);
}
.agent-embed-wrapper {
    /* Sprint 2026-04-27G34 — embed expanded edge-to-edge of the site
       container (.nav-container = min(1140px, 100% - 48px)), so the iframe
       aligns with the logo on the left and the language flag on the right
       of the navbar. No more 900px cap — let the parent .container decide. */
    max-width: 100%;
    margin: 0 auto;
    background: var(--bg-card, #12182a);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
}
.agent-embed-desktop {
    display: block;
}
.agent-embed-desktop iframe {
    display: block;
    width: 100%;
    /* Minimum height so the embedded app (TSM.ai, RIDE Agent, Muiraquitãna,
       GISTM.ai) has enough vertical room to show header + input + first answer
       without the visitor needing to scroll inside the iframe. Taller on larger
       viewports so it doesn't feel cramped. */
    height: clamp(720px, 82vh, 960px);
    min-height: 720px;
    border: none;
    background: #000;
}
.agent-embed-mobile {
    display: none;
    padding: 32px 22px;
    text-align: center;
}
.agent-embed-mobile i.agent-robot {
    font-size: 2.4rem;
    color: var(--accent-blue, #4A9EFF);
    margin-bottom: 16px;
    display: block;
}
.agent-embed-mobile h3 {
    font-size: 1.15rem;
    color: var(--text-primary, #fff);
    margin-bottom: 10px;
}
.agent-embed-mobile p {
    font-size: 0.92rem;
    color: var(--text-secondary, #a0a8b8);
    line-height: 1.55;
    margin-bottom: 20px;
}
.agent-embed-mobile .mobile-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, #4A9EFF, #7B68EE);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.agent-embed-mobile .mobile-open-btn:hover { transform: translateY(-1px); opacity: 0.92; }

/* Responsive — mobile breakpoint flips embed → CTA */
@media (max-width: 768px) {
    .agent-embed-desktop { display: none; }
    .agent-embed-mobile { display: block; }
    .agents-grid {
        grid-template-columns: 1fr;
        padding: 0 16px;
        gap: 16px;
    }
    /* Override the multi-column span rules for single-column mobile */
    .agents-grid > .agent-card,
    .agents-grid > .agent-card:nth-last-child(2):nth-child(4),
    .agents-grid > .agent-card:nth-last-child(2):nth-child(4) ~ .agent-card,
    .agents-grid > .agent-card:nth-last-child(1):nth-child(5) {
        grid-column: auto;
    }
    .agent-page-hero { padding: 100px 20px 40px; min-height: auto; }
}

/* ---------- Dropdown nav item for Agents (legacy – now in global.css) ----------
   The full styling for the agents dropdown lives in css/global.css since the
   dropdown is injected on EVERY page (166 of them) by js/global.js, and
   global.css is the only stylesheet guaranteed to load on every page.
   Keeping a stub here so legacy minimal references still resolve. */
.nav-dropdown.agents-dropdown .nav-dropdown-menu img.nav-agent-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

/* ---------- MuCA PDF download form (Muiraquitãna page) ---------- */
.muca-download-section {
    padding: 80px 20px;
    background: linear-gradient(180deg, var(--bg-primary, #0a0e1a) 0%, #0e1324 100%);
}
.muca-download-wrapper {
    max-width: 860px;
    margin: 0 auto;
    background: var(--bg-card, #12182a);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 22px;
    padding: 40px 32px;
    text-align: center;
}
.muca-download-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(74,158,255,0.14);
    color: var(--accent-blue, #4A9EFF);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.muca-download-wrapper h2 {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    margin-bottom: 12px;
    color: var(--text-primary, #fff);
}
.muca-download-wrapper p.lead {
    font-size: 1rem;
    color: var(--text-secondary, #a0a8b8);
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto 24px;
}
.muca-form-box {
    max-width: 460px;
    margin: 0 auto;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 22px;
}
.muca-form-box input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: var(--text-primary, #fff);
    font-size: 0.95rem;
    margin-bottom: 10px;
    transition: border-color 0.2s ease;
}
.muca-form-box input:focus {
    outline: none;
    border-color: var(--accent-blue, #4A9EFF);
}
.muca-form-box input.error { border-color: #ef4444; }
.muca-form-error {
    color: #ef4444;
    font-size: 0.8rem;
    text-align: left;
    margin-top: -6px;
    margin-bottom: 8px;
    display: none;
}
.muca-form-error.visible { display: block; }
.muca-form-box button {
    width: 100%;
    padding: 13px;
    border-radius: 10px;
    background: linear-gradient(135deg, #4A9EFF, #7B68EE);
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.muca-form-box button:hover { transform: translateY(-1px); opacity: 0.92; }
.muca-form-box button:disabled { opacity: 0.6; cursor: not-allowed; }
.muca-success {
    display: none;
    padding: 24px;
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.3);
    border-radius: 14px;
    color: var(--text-primary, #fff);
}
.muca-success i { color: #10b981; font-size: 1.8rem; margin-bottom: 10px; }
.muca-success h3 { margin-bottom: 8px; }
.muca-success a.download-pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 22px;
    border-radius: 10px;
    background: linear-gradient(135deg, #4A9EFF, #7B68EE);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

/* ---------- 2-column variant (PDF preview + form) ---------- */
.muca-download-wrapper-2col {
    max-width: 1080px;
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 40px;
    align-items: center;
    text-align: left;
    padding: 40px;
}
/* ---------- Horizontal cover variant ----------
   Use when the preview image is landscape (e.g. 16:9 cover). Stacks
   the preview on top full-width and the form below — better for
   wide/horizontal visuals than squeezing them into a 340px column. */
.muca-download-wrapper-2col.muca-download-wrapper-horizontal {
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 980px;
    padding: 36px;
}
.muca-download-wrapper-horizontal .muca-download-preview {
    transform: none;
    max-width: 100%;
}
.muca-download-wrapper-horizontal .muca-download-preview:hover {
    transform: translateY(-4px);
}
.muca-download-wrapper-horizontal .muca-download-preview img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.muca-download-preview {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06);
    transform: rotate(-1.5deg);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.muca-download-preview:hover {
    transform: rotate(0deg) translateY(-4px);
    box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(74,158,255,0.3);
}
.muca-download-preview img {
    width: 100%;
    height: auto;
    display: block;
}
.muca-preview-label {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 6px 10px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.muca-preview-label i { color: #ef4444; }
.muca-download-form-col { min-width: 0; }
.muca-download-wrapper-2col .muca-download-form-col h2 { text-align: left; }
.muca-download-wrapper-2col .muca-download-form-col p.lead {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}
.muca-download-wrapper-2col .muca-form-box { margin-left: 0; margin-right: 0; }
.muca-download-wrapper-2col .muca-success { text-align: left; }

@media (max-width: 768px) {
    .muca-download-wrapper-2col {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 28px 22px;
        text-align: center;
    }
    .muca-download-preview {
        max-width: 260px;
        margin: 0 auto;
        transform: none;
    }
    .muca-download-wrapper-2col .muca-download-form-col h2,
    .muca-download-wrapper-2col .muca-download-form-col p.lead,
    .muca-download-wrapper-2col .muca-success { text-align: center; }
    .muca-download-wrapper-2col .muca-form-box { margin: 0 auto; }
}

/* ---------- MuCA CTA banner (Visit MuCA) with logo ---------- */
.muca-cta-banner { position: relative; }
.muca-cta-logo {
    height: 72px;
    width: auto;
    display: block;
    margin: 0 auto 18px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}

/* ---------- About Muiraquitãna ---------- */
.muira-about {
    padding: 80px 20px;
    background: var(--bg-primary, #0a0e1a);
}
.muira-about-wrap {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.muira-about-img {
    width: 100%;
    border-radius: 20px;
    display: block;
    aspect-ratio: 4/5;
    object-fit: cover;
    box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
}
.muira-about-text h2 {
    font-size: clamp(1.6rem, 3.6vw, 2.2rem);
    margin-bottom: 16px;
    color: var(--text-primary, #fff);
}
.muira-about-text p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-secondary, #a0a8b8);
    margin-bottom: 14px;
}
.muira-about-text .ritual {
    font-style: italic;
    color: var(--text-primary, #fff);
    border-left: 3px solid #e8935c;
    padding-left: 14px;
    margin: 18px 0;
}
@media (max-width: 768px) {
    .muira-about-wrap { grid-template-columns: 1fr; gap: 28px; }
}

/* ========== Extra styles used by dedicated agent pages ========== */

/* Hero with side-by-side text + visual */
.agent-page-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.agent-page-hero-text { text-align: left; }
.agent-page-hero-text h1 { margin-bottom: 18px; }
.agent-page-hero-text p {
    font-size: 1.08rem;
    color: var(--text-secondary, #a0a8b8);
    line-height: 1.65;
    margin-bottom: 24px;
}
.agent-page-hero-visual img {
    width: 100%;
    border-radius: 18px;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55);
    display: block;
}
.agent-page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent-blue, #4A9EFF);
}
.agent-page-eyebrow img {
    width: 36px; height: 36px; border-radius: 9px; object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.agent-page-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.agent-page-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ag-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(74,158,255,0.1);
    border: 1px solid rgba(74,158,255,0.2);
    font-size: 0.78rem;
    color: var(--text-secondary, #a0a8b8);
}
.ag-pill i { color: var(--accent-blue, #4A9EFF); font-size: 0.85rem; }

/* Breadcrumb */
.breadcrumb {
    font-size: 0.85rem;
    color: var(--text-secondary, #a0a8b8);
    padding-top: 8px;
}
.breadcrumb a { color: var(--accent-blue, #4A9EFF); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { margin: 0 8px; opacity: 0.5; }

/* Bulleted list inside a card */
.agent-card-bullets {
    list-style: none;
    padding: 0;
    margin: 14px 0 18px;
}
.agent-card-bullets li {
    position: relative;
    padding: 4px 0 4px 22px;
    font-size: 0.82rem;
    color: var(--text-secondary, #a0a8b8);
    line-height: 1.5;
}
.agent-card-bullets li::before {
    content: "\f00c"; /* fa-check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0; top: 4px;
    color: var(--accent-blue, #4A9EFF);
    font-size: 0.78rem;
}

/* iframe wrapper inside dedicated pages */
.agent-iframe-wrap {
    /* Sprint 2026-04-27G34 — embed iframe widened to fill the entire site
       container (parent .container = min(1140px, 100% - 48px)), so the
       embedded agent visually aligns with the navbar (logo on the left,
       language flag on the right). Previously capped at 1000px which made
       the iframe feel narrow on desktop. */
    max-width: 100%;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
    background: #000;
}
/* Same min-height guarantee when the iframe is in a generic .agent-iframe-wrap
   (used on all four agent pages — TSM.ai, RIDE Agent, Muiraquitãna, GISTM.ai).
   This defeats the HTML `height="640"` attribute, which was too short to show
   the embedded app's own header + input area comfortably. */
.agent-iframe-wrap iframe {
    display: block;
    width: 100%;
    height: clamp(720px, 82vh, 960px);
    min-height: 720px;
    border: 0;
    background: #000;
}

/* Mobile card replacement for embed */
.agent-mobile-card {
    max-width: 460px;
    margin: 0 auto;
    padding: 28px 22px;
    background: var(--bg-card, #12182a);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    text-align: center;
}
.agent-mobile-card h3 { color: var(--text-primary, #fff); margin-bottom: 8px; }
.agent-mobile-card p { color: var(--text-secondary, #a0a8b8); font-size: 0.9rem; margin-bottom: 16px; }
.ride-mobile-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #4A9EFF, #7B68EE);
    color: #fff;
    font-size: 1.4rem;
}

/* Responsive for hero grid */
@media (max-width: 900px) {
    .agent-page-hero-grid { grid-template-columns: 1fr; gap: 32px; }
    .agent-page-hero-visual { max-width: 500px; margin: 0 auto; }
}
@media (max-width: 768px) {
    .agent-page-hero { padding: 100px 20px 40px; }
    .agent-embed-desktop { display: none; }
    .agent-embed-mobile { display: block; }
}
@media (min-width: 769px) {
    .agent-embed-mobile { display: none; }
}

/* =====================================================================
   2026-04-25G23 — Per-agent brand palettes
   ---------------------------------------------------------------------
   The agent icons were re-issued with FULLY TRANSPARENT backgrounds
   (PNG, alpha = 0). Against the site's dark navy (#0D1B2A) a black icon
   tile would erase any dark-on-transparent glyph (e.g. TSM·AI black mark,
   CMSI black bars). Instead, each agent card now sets its OWN icon-tile
   background, accent (tag) colour, hover glow and bullet-check colour
   so the application reads as its own product and the transparent icon
   sits on a tone that matches the original artwork.
   Pattern: .agent-card--<slug>
       └─ .agent-icon              →  brand-coloured tile / gradient
       └─ .agent-card-tag          →  brand accent
       └─ .agent-card-bullets li::before → brand accent
       └─ &::before (hover overlay)→  subtle brand-tinted gradient
       └─ &:hover                  →  brand-tinted shadow + border
   ===================================================================== */

/* RIDE Agent — signature blue→indigo gradient (Data Riders default) */
.agent-card--ride .agent-icon {
    background: linear-gradient(135deg, #1B1C55 0%, #4A9EFF 60%, #7B68EE 100%);
    padding: 6px;
}
.agent-card--ride .agent-card-tag { color: #7B68EE; }
.agent-card--ride .agent-card-bullets li::before { color: #7B68EE; }

/* AquaTwin — neon cyan / teal water palette */
.agent-card--aquatwin .agent-icon {
    background: linear-gradient(135deg, #0F2B4C 0%, #1C7FAF 55%, #2ED3E6 100%);
    padding: 6px;
}
.agent-card--aquatwin .agent-card-tag { color: #2ED3E6; }
.agent-card--aquatwin .agent-card-bullets li::before { color: #2ED3E6; }
.agent-card--aquatwin::before {
    background: linear-gradient(135deg, rgba(46,211,230,0.10), rgba(28,127,175,0.06));
}
.agent-card--aquatwin:hover {
    border-color: rgba(46,211,230,0.40);
    box-shadow: 0 20px 40px -20px rgba(46,211,230,0.40);
}

/* TSM.AI v2 — warm parchment ICON (cream BG embedded) + burgundy accent.
   The icon PNG (icon-tsm-ai-v2.png, 2026-04-25 user-supplied) already
   ships with its OWN cream background and charcoal "TSM·AI" wordmark
   inside a thin square + circle frame. The card therefore lets the icon
   fill the tile (object-fit:cover) with no extra tile gradient. */
.agent-card--tsm .agent-icon {
    background: #F4E9CF; /* fallback if PNG ever shrinks */
    object-fit: cover;
    padding: 0;
}
.agent-card--tsm .agent-card-tag { color: #A93340; }
.agent-card--tsm .agent-card-bullets li::before { color: #A93340; }
.agent-card--tsm::before {
    background: linear-gradient(135deg, rgba(138,31,43,0.12), rgba(244,233,207,0.06));
}
.agent-card--tsm:hover {
    border-color: rgba(244,233,207,0.50);
    box-shadow: 0 20px 40px -20px rgba(138,31,43,0.50);
}

/* CMSI AI Assessor — ivory ICON (cream BG embedded) + deep burgundy accent.
   The icon PNG (icon-cmsi-assessor.png, 2026-04-25 user-supplied) shows
   ten stacked black/burgundy bars on a parchment background. Same logic
   as TSM: the icon already provides the tile colour, so no gradient
   layer is added underneath. */
.agent-card--cmsi .agent-icon {
    background: #F4E7C8;
    object-fit: cover;
    padding: 0;
}
.agent-card--cmsi .agent-card-tag { color: #7E1730; }
.agent-card--cmsi .agent-card-bullets li::before { color: #7E1730; }
.agent-card--cmsi::before {
    background: linear-gradient(135deg, rgba(126,23,48,0.12), rgba(244,231,200,0.06));
}
.agent-card--cmsi:hover {
    border-color: rgba(244,231,200,0.50);
    box-shadow: 0 20px 40px -20px rgba(126,23,48,0.50);
}

/* GISTM.ai — deep blue compliance palette */
.agent-card--gistm .agent-icon {
    background: linear-gradient(135deg, #0D1B2A 0%, #1B3A5C 60%, #4A9EFF 100%);
    padding: 6px;
}
.agent-card--gistm .agent-card-tag { color: #4A9EFF; }
.agent-card--gistm .agent-card-bullets li::before { color: #4A9EFF; }
.agent-card--gistm::before {
    background: linear-gradient(135deg, rgba(74,158,255,0.10), rgba(27,58,92,0.06));
}
.agent-card--gistm:hover {
    border-color: rgba(74,158,255,0.45);
    box-shadow: 0 20px 40px -20px rgba(74,158,255,0.45);
}

/* TCM AI Assessor — copper / bronze tones */
.agent-card--tcm .agent-icon {
    background: linear-gradient(135deg, #5C2E0B 0%, #B87333 60%, #D89759 100%);
    padding: 6px;
}
.agent-card--tcm .agent-card-tag { color: #D89759; }
.agent-card--tcm .agent-card-bullets li::before { color: #D89759; }
.agent-card--tcm::before {
    background: linear-gradient(135deg, rgba(216,151,89,0.10), rgba(184,115,51,0.06));
}
.agent-card--tcm:hover {
    border-color: rgba(216,151,89,0.45);
    box-shadow: 0 20px 40px -20px rgba(184,115,51,0.45);
}

/* Muiraquitãna — Amazon green / earth palette */
.agent-card--muiraquitana .agent-icon {
    background: linear-gradient(135deg, #2D5016 0%, #5F8A3A 60%, #8FB339 100%);
    padding: 4px;
}
.agent-card--muiraquitana .agent-card-tag { color: #7AB31E; }
.agent-card--muiraquitana .agent-card-bullets li::before { color: #7AB31E; }
.agent-card--muiraquitana::before {
    background: linear-gradient(135deg, rgba(122,179,30,0.10), rgba(45,80,22,0.06));
}
.agent-card--muiraquitana:hover {
    border-color: rgba(122,179,30,0.45);
    box-shadow: 0 20px 40px -20px rgba(122,179,30,0.45);
}

/* Data Riders Agent — signature navy → electric blue */
.agent-card--dr .agent-icon {
    background: linear-gradient(135deg, #0D1B2A 0%, #1B1C55 55%, #46A6FF 100%);
    padding: 6px;
}
.agent-card--dr .agent-card-tag { color: #46A6FF; }
.agent-card--dr .agent-card-bullets li::before { color: #46A6FF; }
.agent-card--dr::before {
    background: linear-gradient(135deg, rgba(70,166,255,0.10), rgba(27,28,85,0.06));
}
.agent-card--dr:hover {
    border-color: rgba(70,166,255,0.45);
    box-shadow: 0 20px 40px -20px rgba(70,166,255,0.45);
}

/* SiteVisits.ai — charcoal stone + turquoise mineral + copper accent.
   The icon ships with its own black background baked in, so use cover. */
.agent-card--sitevisits .agent-icon {
    background: #0A0A0A;
    padding: 0;
    object-fit: cover;
}
.agent-card--sitevisits .agent-card-tag { color: #4FB8A5; }
.agent-card--sitevisits .agent-card-bullets li::before { color: #4FB8A5; }
.agent-card--sitevisits::before {
    background: linear-gradient(135deg, rgba(79,184,165,0.10), rgba(184,115,51,0.06));
}
.agent-card--sitevisits:hover {
    border-color: rgba(79,184,165,0.45);
    box-shadow: 0 20px 40px -20px rgba(79,184,165,0.45);
}

/* PAEBM.ai — black + mustard orange (icon ships with baked-in dark BG). */
.agent-card--paebm .agent-icon {
    background: #111111;
    padding: 0;
    object-fit: cover;
}
.agent-card--paebm .agent-card-tag { color: #E0A040; }
.agent-card--paebm .agent-card-bullets li::before { color: #E0A040; }
.agent-card--paebm::before {
    background: linear-gradient(135deg, rgba(224,160,64,0.12), rgba(224,160,64,0.04));
}
.agent-card--paebm:hover {
    border-color: rgba(224,160,64,0.50);
    box-shadow: 0 20px 40px -20px rgba(224,160,64,0.50);
}

/* ISO 14001 Pré-Auditor — cream + sage green eco palette
   (icon ships with cream BG baked in, like TSM/CMSI). */
.agent-card--iso14001 .agent-icon {
    background: #F2E8D8;
    padding: 0;
    object-fit: cover;
}
.agent-card--iso14001 .agent-card-tag { color: #7F927B; }
.agent-card--iso14001 .agent-card-bullets li::before { color: #7F927B; }
.agent-card--iso14001::before {
    background: linear-gradient(135deg, rgba(127,146,123,0.10), rgba(242,232,216,0.06));
}
.agent-card--iso14001:hover {
    border-color: rgba(127,146,123,0.50);
    box-shadow: 0 20px 40px -20px rgba(127,146,123,0.50);
}

/* Default: branded icons that are TRANSPARENT PNGs (RIDE, AquaTwin,
   GISTM, TCM, Muira, DR) show the brand-coloured tile through their
   alpha channel — use object-fit:contain so they're not cropped.
   Exception: TSM and CMSI ship with their OWN parchment background
   embedded in the artwork and override this back to `cover` above. */
.agent-card[class*="agent-card--"] .agent-icon {
    object-fit: contain;
}

/* Eyebrow icon tiles on individual agent pages — same brand palette as
   the cards, but smaller. The image stays object-fit:cover by default,
   so we switch it to contain plus a 3 px breathing room. */
.agent-page-eyebrow img {
    object-fit: contain;
    padding: 3px;
}
.agent-page-eyebrow.eb-ride         img { background: linear-gradient(135deg, #1B1C55, #4A9EFF 60%, #7B68EE); }
.agent-page-eyebrow.eb-aquatwin     img { background: linear-gradient(135deg, #0F2B4C, #1C7FAF 55%, #2ED3E6); }
/* TSM and CMSI ship with embedded cream BG → `cover`, no extra tile */
.agent-page-eyebrow.eb-tsm          img { background: #F4E9CF; object-fit: cover; padding: 0; }
.agent-page-eyebrow.eb-cmsi         img { background: #F4E7C8; object-fit: cover; padding: 0; }
.agent-page-eyebrow.eb-gistm        img { background: linear-gradient(135deg, #0D1B2A, #1B3A5C 60%, #4A9EFF); }
.agent-page-eyebrow.eb-tcm          img { background: linear-gradient(135deg, #5C2E0B, #B87333 60%, #D89759); }
.agent-page-eyebrow.eb-muiraquitana img { background: linear-gradient(135deg, #2D5016, #5F8A3A 60%, #8FB339); }
.agent-page-eyebrow.eb-dr           img { background: linear-gradient(135deg, #0D1B2A, #1B1C55 55%, #46A6FF); }
/* SiteVisits, PAEBM ship with baked-in dark backgrounds → cover; ISO 14001 ships with baked-in cream → cover */
.agent-page-eyebrow.eb-sitevisits   img { background: #0A0A0A; object-fit: cover; padding: 0; }
.agent-page-eyebrow.eb-paebm        img { background: #111111; object-fit: cover; padding: 0; }
.agent-page-eyebrow.eb-iso14001     img { background: #F2E8D8; object-fit: cover; padding: 0; }

/* =====================================================================
   Sprint 2026-04-27G32 — "Chat with the agent" attention banner
   ---------------------------------------------------------------------
   Sits between the section subtitle and the iframe on every agent that
   exposes an interactive LLM chat (GISTM.ai, TCM, CMSI, ISO 14001,
   PAEBM, SiteVisits, TSM.AI, AquaTwin). Goal: tell the visitor — in a
   visually unmissable way — that the embed below is NOT a static demo;
   it's a real conversational AI they can talk to right now, ask about
   their results, drill into any indicator, or request explanations.

   Visual language: animated bordered pill + headline + arrow pointing
   down at the iframe. The icon orbits a subtle "thinking" pulse and a
   tiny "live" dot blinks in the corner.
   ===================================================================== */
.agent-chat-highlight {
    position: relative;
    /* Sprint 2026-04-27G34 — banner kept at a comfortable reading width
       (1000px) even though the iframe below now stretches edge-to-edge of
       the .container (≈1140px). A banner that's too wide hurts readability;
       the slightly narrower pill, centred, looks intentional and the arrow
       still clearly points at the iframe. */
    max-width: 1000px;
    /* Sprint 2026-04-27G32-P2 — bottom margin increased to 56px so the
       bouncing arrow (which now sits at bottom: -18px and is 36px tall)
       has a comfortable safe zone before the iframe wrapper toolbar
       (the black bar containing "AquaTwin Agent / DEMO / REINIC" etc.).
       Previously the toolbar — which has its own opaque background and
       creates a stacking context — visually clipped the lower half of
       the arrow even though the parent card has no overflow:hidden. */
    margin: 28px auto 56px;
    /* Ensure the card creates a stacking context so its absolutely-
       positioned descendant arrow can be raised above sibling iframe
       wrappers via z-index. */
    z-index: 2;
    padding: 22px 28px 22px 88px;
    border-radius: 18px;
    background:
        radial-gradient(ellipse at top left, rgba(124,92,255,0.18), transparent 60%),
        radial-gradient(ellipse at bottom right, rgba(74,158,255,0.14), transparent 60%),
        linear-gradient(135deg, rgba(124,92,255,0.10) 0%, rgba(74,158,255,0.08) 100%);
    border: 1px solid rgba(124,92,255,0.35);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 16px 40px -20px rgba(124,92,255,0.45);
    /* Sprint 2026-04-27G32 — overflow removed from the card so the
       down-arrow at bottom: -14px can render outside the card. The
       sweeping shine animation, which previously relied on overflow:hidden
       on the parent, now uses its own clipping via overflow on the ::before
       pseudo-element (it's painted within the rounded rect of the card via
       border-radius inheritance + clip-path). */
}
/* Sweeping shine that moves left-to-right every 6s.
   Sprint 2026-04-27G32 — the parent .agent-chat-highlight no longer uses
   overflow:hidden (so the down-arrow at bottom: -14px stays fully visible).
   To prevent the translated shine from leaking past the rounded rectangle
   of the card, we apply overflow:hidden + matching border-radius directly
   on the ::before via clip-path on the parent — no, simpler: we use a
   background-position animation here instead of translateX, so the shine
   gradient slides INSIDE a static pseudo-element clipped to the card via
   matching border-radius. */
.agent-chat-highlight::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(115deg,
            transparent 30%,
            rgba(255,255,255,0.08) 48%,
            rgba(255,255,255,0.16) 50%,
            rgba(255,255,255,0.08) 52%,
            transparent 70%) -100% 0 / 300% 100% no-repeat;
    animation: agentChatShine 7s ease-in-out 1.5s infinite;
    pointer-events: none;
}
@keyframes agentChatShine {
    0%   { background-position: -100% 0; }
    55%  { background-position: 200% 0; }
    100% { background-position: 200% 0; }
}

/* Big chat-bubble icon on the left */
.agent-chat-highlight-icon {
    position: absolute;
    left: 22px; top: 50%;
    transform: translateY(-50%);
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #7B68EE 0%, #4A9EFF 100%);
    color: #fff;
    font-size: 1.45rem;
    box-shadow: 0 10px 24px -8px rgba(123,104,238,0.55);
}
/* Pulsing ring around the icon */
.agent-chat-highlight-icon::after {
    content: "";
    position: absolute; inset: -6px;
    border-radius: 18px;
    border: 2px solid rgba(123,104,238,0.55);
    animation: agentChatPulse 2.4s ease-out infinite;
}
@keyframes agentChatPulse {
    0%   { transform: scale(0.92); opacity: 0.85; }
    70%  { transform: scale(1.18); opacity: 0; }
    100% { transform: scale(1.18); opacity: 0; }
}

/* Tiny "LIVE" dot in the top-right corner */
.agent-chat-highlight-live {
    position: absolute;
    top: 14px; right: 18px;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: #7AE582;
}
.agent-chat-highlight-live::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #7AE582;
    box-shadow: 0 0 0 0 rgba(122,229,130,0.7);
    animation: agentChatLive 1.6s ease-out infinite;
}
@keyframes agentChatLive {
    0%   { box-shadow: 0 0 0 0 rgba(122,229,130,0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(122,229,130,0); }
    100% { box-shadow: 0 0 0 0 rgba(122,229,130,0); }
}

.agent-chat-highlight-title {
    margin: 0 0 4px;
    font-size: 1.18rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
}
.agent-chat-highlight-title .accent {
    background: linear-gradient(135deg, #B79CFF 0%, #6FB8FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.agent-chat-highlight-text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.82);
}
.agent-chat-highlight-text strong {
    color: #fff;
    font-weight: 600;
}
.agent-chat-highlight-arrow {
    position: absolute;
    /* Sprint 2026-04-27G32-P2 — bumped from 28px to 36px so the chevron
       reads clearly even on small screens, and pulled further down
       (bottom: -18px) so half the circle clearly sits OUTSIDE the card
       and the arrow visibly "points at" the iframe below. */
    bottom: -18px; left: 50%;
    transform: translateX(-50%);
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #7B68EE 0%, #4A9EFF 100%);
    color: #fff;
    font-size: 0.92rem;
    /* Sprint 2026-04-27G32-P2 — added a dark ring (matches page bg) so
       the arrow visually "punches through" the iframe wrapper toolbar
       below, instead of being clipped by it. */
    border: 3px solid #0D1B2A;
    box-shadow:
        0 6px 18px -4px rgba(74,158,255,0.55),
        0 0 0 1px rgba(124,92,255,0.45);
    /* Force the arrow above ALL sibling stacking contexts (the iframe
       wrapper / its toolbar). 10 is plenty since the card itself only
       sits at z-index: 2; raising further would also raise above the
       site-wide nav, which we don't want. */
    z-index: 10;
    animation: agentChatBounce 1.8s ease-in-out infinite;
}
@keyframes agentChatBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(6px); }
}

/* Mobile: drop the side icon, stack vertically */
@media (max-width: 640px) {
    .agent-chat-highlight {
        padding: 70px 22px 22px;
        text-align: center;
    }
    .agent-chat-highlight-icon {
        position: static;
        transform: none;
        margin: 0 auto 12px;
    }
    .agent-chat-highlight-live {
        top: 14px; right: 50%; transform: translateX(50%);
    }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .agent-chat-highlight::before,
    .agent-chat-highlight-icon::after,
    .agent-chat-highlight-live::before,
    .agent-chat-highlight-arrow {
        animation: none;
    }
}