/* =====================================================
   Elqo for Enterprise — page-scoped styles
   Loads after globals.css + styles.css. Inherits the
   site's nav, footer, fonts, and FAQ accordion behavior.
   Brand DNA (2026 refresh): Lastik major headlines + Switzer
   body/UI, Forsythia as the sole CTA-fill accent, Oceanic Noir
   ink, mostly light (Arctic Powder/Mystic Mint) bands with a
   few dark bands (nav, hero, comparison table, closing CTA,
   footer). Flat CTAs, solid cards. No glass.
   ===================================================== */

html:has(body.ent-page) {
    color-scheme: light;
}

.ent-page {
    background-color: var(--arctic-powder);
    color: var(--oceanic-noir);
    font-family: var(--font-body);
    color-scheme: light;
}

/* =====================================================
   Type defaults — H1/H2 (major section headlines) get the
   display serif (Lastik). Everything smaller stays on the
   body typeface at a bold weight. Page-scoped so other
   pages are untouched.
   ===================================================== */

.ent-page h1,
.ent-page h2 {
    font-family: var(--font-headline);
    letter-spacing: -0.00em;
}

.ent-page h3,
.ent-page h4,
.ent-page h5,
.ent-page h6,
.ent-page .faq-question {
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: -0.00em;
}

/* .faq-title always pairs with .ent-faq-title (the large FAQ section
   heading, ~2.4rem) — it's a major headline like every other h2 on
   the page, not a small UI label, so it gets Lastik too. */
.ent-page .ent-faq-title {
    font-family: var(--font-headline);
    font-weight: 400;
}

/* =====================================================
   Eyebrows (uppercase mini headings)
   ===================================================== */

.ent-eyebrow {
    margin: 0 0 14px;
    font-size: 0.78rem;
    font-weight: 800;
    font-family: var(--font-body);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--nocturnal-expedition);
}

.ent-eyebrow--center {
    text-align: center;
    color: var(--oceanic-noir);
    opacity: 0.6;
}

.ent-eyebrow--light {
    color: var(--mystic-mint);
}

/* =====================================================
   Gradient text (matches index.html's hero accent) —
   Forsythia highlight, dark backgrounds only (hero +
   closing CTA headline).
   ===================================================== */

.ent-gradient {
    color: var(--forsythia);
    display: inline-block;
}

.ent-gradient--dark {
    color: var(--forsythia);
}

/* =====================================================
   CTAs (rounded pills with shadow lift — matches the
   site's existing .cta-button1 / .cta-1v1 vocabulary)
   ===================================================== */

.ent-cta {
    display: inline-block;
    padding: 16px 36px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 1.05rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform 100ms var(--ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease;
    text-align: center;
    border: 3px solid transparent;
    letter-spacing: 0.01em;
}

.ent-cta--primary {
    background: var(--forsythia);
    color: var(--oceanic-noir);
    border-color: transparent;
    box-shadow: none;
}

.ent-cta--primary:hover {
    background: var(--deep-saffron);
}

/* Secondary button, on dark backgrounds */
.ent-cta--ghost {
    background: transparent;
    color: var(--arctic-powder);
    border-width: 1.5px;
    border-color: var(--arctic-powder);
}

.ent-cta--ghost:hover {
    background: var(--arctic-powder);
    color: var(--oceanic-noir);
    border-color: var(--arctic-powder);
}

/* Secondary button, on light backgrounds */
.ent-cta--outline {
    background: transparent;
    color: var(--oceanic-noir);
    border-width: 1.5px;
    border-color: var(--oceanic-noir);
}

.ent-cta--outline:hover {
    background: var(--oceanic-noir);
    color: var(--arctic-powder);
    border-color: var(--oceanic-noir);
}

.ent-cta--large {
    padding: 22px 64px;
    font-size: 1.25rem;
}

.ent-cta--long {
    padding: 18px 72px;
    font-size: 1.05rem;
    white-space: nowrap;
    min-width: min(680px, 100%);
}

.ent-cta--textlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--arctic-powder);
    text-decoration: none;
    border-bottom: 1px solid var(--mystic-mint);
    padding: 4px 0;
    transition: color 0.2s ease, border-color 0.2s ease;
    letter-spacing: 0.01em;
}

.ent-cta--textlink:hover {
    color: var(--deep-saffron);
    border-bottom-color: var(--deep-saffron);
}

.ent-cta--textlink::after {
    content: '\2192';
    font-size: 1em;
}

/* =====================================================
   HERO
   Flat navy gradient (no cyan-glow radials — that read as
   generic AI-SaaS dark mode). Split layout.
   ===================================================== */

.ent-hero {
    position: relative;
    width: 100%;
    padding: 140px 6% 100px;
    overflow: hidden;
    color: var(--arctic-powder);
    background: var(--oceanic-noir);
}

.ent-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
}
.ent-hero__video.is-active {
    opacity: 0.42;
}

.ent-hero__bg {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--oceanic-noir) 10%, transparent);
    z-index: 1;
}

.ent-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: center;
}

.ent-hero__copy {
    max-width: 720px;
}

.ent-hero__headline {
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: clamp(2.6rem, 4.8vw, 4.2rem);
    line-height: 1.08;
    color: var(--arctic-powder);
    margin: 0 0 22px;
    letter-spacing: -0.03em;
    text-align: center;
}

.ent-hero__headline .ent-gradient {
    display: inline;
}

.ent-hero__headline .ent-gradient em {
    font-style: italic;
}

/* index.html hero: the second line is the gold highlight; "ready" stays italic. */
.is-home .ent-hero__headline .ent-gradient {
    color: var(--forsythia);
}

.ent-hero__sub {
    font-family: var(--font-body);
    font-size: 1.18rem;
    line-height: 1.55;
    color: var(--mystic-mint);
    margin: 0 0 36px;
    max-width: 720px;
}

.ent-hero__ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.ent-hero__trustline {
    margin: 0;
    max-width: 56rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--mystic-mint);
    letter-spacing: 0.02em;
}

.ent-hero__visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =====================================================
   MOCK DASHBOARD CARDS
   Reused for hero-side preview AND the tabbed dashboard
   ===================================================== */

.ent-mock {
    background: var(--arctic-powder);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(23, 43, 54, 0.16);
    border: 1px solid var(--mystic-mint);
    overflow: hidden;
    width: 100%;
    color: var(--oceanic-noir);
}

.ent-mock--hero {
    max-width: 480px;
    transform: rotate(-1deg);
}

.ent-mock--full {
    max-width: 1200px;
    margin: 0 auto;
}

.ent-mock__topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    background: var(--mystic-mint);
}

.ent-mock__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mystic-mint);
    display: inline-block;
}

.ent-mock__dot:first-child { background: var(--clay); }
.ent-mock__dot:nth-child(2) { background: var(--nocturnal-expedition); }
.ent-mock__dot:nth-child(3) { background: var(--moss); }

.ent-mock__crumb {
    margin-left: 12px;
    flex: 1;
    min-width: 0;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: var(--font-body);
    color: var(--nocturnal-expedition);
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.ent-mock__body {
    padding: 24px 24px 26px;
}

.ent-mock__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.ent-mock__row--head {
    margin-bottom: 22px;
}

.ent-mock__eyebrow {
    margin: 0 0 6px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--nocturnal-expedition);
}

.ent-mock__bignum {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--oceanic-noir);
}

.ent-mock__bignum span {
    font-size: 1.4rem;
    color: var(--nocturnal-expedition);
    margin-left: 4px;
}

.ent-mock__delta {
    margin: 8px 0 0;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 700;
}

.ent-mock__delta--up {
    color: var(--moss);
}

.ent-mock__spark {
    width: 160px;
    height: 56px;
    flex-shrink: 0;
}

.ent-mock__spark svg { width: 100%; height: 100%; }

.ent-mock__spark--wide {
    width: 100%;
    height: 120px;
    margin-top: 18px;
}

.ent-mock__cohorts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
}

.ent-mock__cohort {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    align-items: center;
    gap: 12px;
}

.ent-mock__label {
    font-family: var(--font-body);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--oceanic-noir);
}

.ent-mock__bar {
    height: 8px;
    border-radius: 999px;
    background: var(--mystic-mint);
    overflow: hidden;
}

.ent-mock__bar span {
    display: block;
    height: 100%;
    background: var(--nocturnal-expedition);
    border-radius: 999px;
}

.ent-mock__pct {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 0.92rem;
    color: var(--oceanic-noir);
    min-width: 38px;
    text-align: right;
}

.ent-mock__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ent-mock__chip {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--mystic-mint);
    color: var(--nocturnal-expedition);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid var(--arctic-powder);
}

.ent-mock__chip--alt {
    background: var(--nocturnal-expedition);
    color: var(--arctic-powder);
    border-color: var(--nocturnal-expedition);
}

/* Recommended Action callout (hero mock + dashboard) */
.ent-mock__action {
    margin: 14px 0 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--mystic-mint);
    border: 1.5px solid var(--arctic-powder);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ent-mock__action-label {
    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--nocturnal-expedition);
    text-transform: uppercase;
}

.ent-mock__action-text {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--nocturnal-expedition);
    line-height: 1.4;
}

/* =====================================================
   PROBLEM PANEL (echoes .mission)
   ===================================================== */

.ent-problem {
    padding: 80px 6%;
    text-align: center;
    background: var(--arctic-powder);
    color: var(--oceanic-noir);
}

/* Alternating band: applied to whichever .ent-problem instance the
   brand-refresh spec calls for Mystic Mint instead of the Arctic
   Powder default (modifier class added in HTML, not a new component) */
.ent-problem--alt {
    background: var(--mystic-mint);
}

.ent-problem h2 {
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    line-height: 1.25;
    max-width: 1100px;
    margin: 0 auto 24px;
}

.ent-problem__sub {
    font-family: var(--font-body);
    font-size: 1.18rem;
    line-height: 1.65;
    max-width: 960px;
    margin: 0 auto;
    color: var(--oceanic-noir);
    font-weight: 500;
}

.ent-problem__qs {
    margin: 56px auto 0;
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ent-problem__qs--2col {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1200px;
}

.ent-problem__list {
    margin: 48px auto 0;
    max-width: 960px;
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: left;
}

.ent-problem__list .ent-problem__q {
    display: grid;
    grid-template-columns: 3.2rem 1fr;
    gap: 16px;
    align-items: start;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 20px 0;
    border-bottom: 1px solid var(--nocturnal-expedition);
}

.ent-problem__list .ent-problem__q:first-child {
    border-top: 1px solid var(--nocturnal-expedition);
}

.ent-problem__list .ent-problem__q:hover {
    box-shadow: none;
}

.ent-problem__list .ent-problem__qnum {
    margin-bottom: 0;
    padding-top: 3px;
}

.ent-problem__list .ent-problem__qtext {
    font-weight: 800;
}

.ent-problem__q {
    text-align: left;
    background: var(--arctic-powder);
    border-radius: 18px;
    padding: 26px 26px 28px;
    border: 1px solid var(--mystic-mint);
    box-shadow: 0 8px 22px rgba(23, 43, 54, 0.06);
    transition: transform 100ms var(--ease-out);
}

.ent-problem__q:hover {
    box-shadow: 0 14px 32px rgba(23, 43, 54, 0.12);
}

.ent-problem__qnum {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.18em;
    color: var(--nocturnal-expedition);
    margin-bottom: 14px;
}

.ent-problem__qtext {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.18rem;
    line-height: 1.3;
    color: var(--oceanic-noir);
}

/* =====================================================
   DASHBOARD PREVIEW with TABS
   ===================================================== */

.ent-dashboard {
    padding: 80px 6%;
    background: var(--arctic-powder);
    color: var(--oceanic-noir);
}

.ent-dashboard__head {
    text-align: center;
    max-width: 960px;
    margin: 0 auto 40px;
}

.ent-dashboard__head h2 {
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    line-height: 1.15;
    margin: 0 0 14px;
}

.ent-dashboard__sub {
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--nocturnal-expedition);
    margin: 0;
}

.ent-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 auto 32px;
    max-width: 1200px;
}

.ent-tab {
    padding: 12px 26px;
    min-height: 44px;
    border-radius: 999px;
    background: var(--arctic-powder);
    color: var(--oceanic-noir);
    border: 2px solid var(--mystic-mint);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.98rem;
    cursor: pointer;
    transition: transform 100ms var(--ease-out), background 200ms ease, border-color 200ms ease;
}

.ent-tab:hover {
    border-color: var(--nocturnal-expedition);
}

.ent-tab.is-active {
    background: var(--oceanic-noir);
    color: var(--arctic-powder);
    border-color: var(--oceanic-noir);
    box-shadow: 0 10px 24px rgba(23, 43, 54, 0.28);
}

.ent-tabpanels {
    max-width: 1200px;
    margin: 0 auto;
}

.ent-tabpanel {
    display: none;
}

.ent-tabpanel.is-active {
    display: block;
}

/* Overview KPIs */
.ent-mock__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 28px 24px 8px;
}

.ent-mock__kpi {
    padding: 18px;
    border-radius: 16px;
    background: var(--mystic-mint);
    border: 1px solid var(--arctic-powder);
}

/* Cohort table */
.ent-mock__table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
}

.ent-mock__table thead th {
    text-align: left;
    padding: 16px 20px;
    background: var(--mystic-mint);
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--oceanic-noir);
    font-weight: 800;
    border-bottom: 1px solid var(--arctic-powder);
}

.ent-mock__table tbody td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--mystic-mint);
    font-size: 0.95rem;
    color: var(--oceanic-noir);
}

.ent-mock__table tbody tr:last-child td {
    border-bottom: none;
}

.ent-mock__table tbody tr:hover {
    background: var(--arctic-powder);
}

.ent-pill-up,
.ent-pill-flat {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    font-family: var(--font-body);
}

.ent-pill-up {
    background: var(--mystic-mint);
    color: var(--moss);
}

.ent-pill-flat {
    background: var(--mystic-mint);
    color: var(--nocturnal-expedition);
}

/* Recommended Action chips (used in cohorts table + individuals list) */
.ent-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
}

.ent-action::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
    flex-shrink: 0;
}

.ent-action--promote {
    background: var(--mystic-mint);
    color: var(--moss);
}

.ent-action--scale {
    background: var(--mystic-mint);
    color: var(--nocturnal-expedition);
}

.ent-action--coach {
    background: var(--mystic-mint);
    color: var(--clay);
}

.ent-action--ontrack {
    background: var(--mystic-mint);
    color: var(--moss);
}

/* Competency heatgrid */
.ent-mock__heatgrid {
    display: grid;
    grid-template-columns: 200px 1fr;
    column-gap: 20px;
    row-gap: 14px;
    padding: 28px 24px;
    align-items: center;
}

.ent-mock__heatlabel {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--oceanic-noir);
}

.ent-mock__heatcells {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.ent-cell {
    height: 28px;
    border-radius: 6px;
    background: var(--mystic-mint);
}

.ent-mock__heataxis {
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.74rem;
    color: var(--nocturnal-expedition);
    text-align: center;
    margin-top: 4px;
    letter-spacing: 0.04em;
}

/* Individuals list */
.ent-mock__people {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ent-person {
    display: grid;
    grid-template-columns: 48px 1fr auto auto;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--mystic-mint);
    border: 1px solid var(--arctic-powder);
}

.ent-person__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--arctic-powder);
    color: var(--oceanic-noir);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 0.88rem;
    letter-spacing: 0.04em;
}

.ent-person__copy { min-width: 0; }

.ent-person__name {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 800;
    color: var(--oceanic-noir);
    font-size: 0.98rem;
}

.ent-person__role {
    margin: 2px 0 0;
    font-family: var(--font-body);
    color: var(--nocturnal-expedition);
    font-size: 0.85rem;
}

.ent-person__metric {
    text-align: right;
    font-family: var(--font-body);
}

.ent-person__metric strong {
    display: block;
    font-family: var(--font-body);
    font-weight: 800;
    color: var(--moss);
    font-size: 1.1rem;
}

.ent-person__metric--risk strong {
    color: var(--clay);
}

.ent-person__metric span {
    font-size: 0.78rem;
    color: var(--nocturnal-expedition);
    letter-spacing: 0.04em;
}

.ent-person__bar {
    height: 8px;
    border-radius: 999px;
    background: var(--mystic-mint);
    overflow: hidden;
}

.ent-person__bar span {
    display: block;
    height: 100%;
    background: var(--nocturnal-expedition);
}

.ent-person__bar--good span {
    background: var(--moss);
}

/* No third status color: a "middle band" score is plain Nocturnal
   Expedition, same as the bar's default (no color claim either way) */
.ent-person__bar--warn span {
    background: var(--nocturnal-expedition);
}

.ent-person__bar--risk span {
    background: var(--clay);
}

.ent-person__pct {
    align-self: center;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 0.88rem;
    white-space: nowrap;
}

.ent-person__pct--good { color: var(--moss); }
.ent-person__pct--warn { color: var(--nocturnal-expedition); }
.ent-person__pct--risk { color: var(--clay); }

/* Hero mock — scrollable compact learner list */
.ent-mock--hero .ent-mock__people--scroll {
    padding: 10px 12px 12px;
    max-height: 430px;
    overflow-y: auto;
    gap: 4px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--mystic-mint) transparent;
}

.ent-mock--hero .ent-mock__people--scroll:focus {
    outline: 2px solid rgba(17, 76, 90, 0.45);
    outline-offset: -2px;
}

.ent-mock--hero .ent-mock__people--scroll::-webkit-scrollbar {
    width: 5px;
}

.ent-mock--hero .ent-mock__people--scroll::-webkit-scrollbar-thumb {
    background: var(--mystic-mint);
    border-radius: 999px;
}

.ent-mock--hero .ent-person--compact {
    grid-template-columns: 30px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 10px;
}

.ent-mock--hero .ent-person--compact .ent-person__avatar {
    width: 30px;
    height: 30px;
    font-size: 0.62rem;
}

.ent-mock--hero .ent-person--compact .ent-person__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ent-mock--hero .ent-person--compact .ent-person__name {
    font-size: 0.8rem;
    line-height: 1.15;
    margin: 0;
}

.ent-mock--hero .ent-person--compact .ent-person__role {
    font-size: 0.68rem;
    line-height: 1.2;
    margin: 0;
}

.ent-mock--hero .ent-person--compact .ent-person__bar {
    height: 5px;
    margin-top: 1px;
}

.ent-mock--hero .ent-person--compact .ent-person__pct {
    font-size: 0.7rem;
}

/* =====================================================
   COMPARISON TABLE
   ===================================================== */

.ent-compare {
    padding: 80px 6%;
    background: var(--arctic-powder);
    color: var(--oceanic-noir);
}

.ent-compare__head {
    text-align: center;
    max-width: 960px;
    margin: 0 auto 48px;
}

.ent-compare__head h2 {
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    line-height: 1.18;
    margin: 0 0 14px;
}

.ent-compare__sub {
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--nocturnal-expedition);
    margin: 0;
}

.ent-compare__grid {
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--mystic-mint);
    box-shadow: 0 16px 36px rgba(23, 43, 54, 0.1);
    background: var(--arctic-powder);
}

.ent-compare__col--header,
.ent-compare__row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
    align-items: stretch;
}

.ent-compare__grid--5col .ent-compare__col--header,
.ent-compare__grid--5col .ent-compare__row {
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr;
}

.ent-compare__col--header {
    background: var(--oceanic-noir);
}

.ent-compare__col--header .ent-compare__cell {
    color: var(--arctic-powder);
    padding: 22px 22px;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.ent-compare__col--header .ent-compare__cell--rowhead {
    background: var(--oceanic-noir);
}

.ent-compare__col--header .ent-compare__cell--elqo {
    background: var(--nocturnal-expedition);
    color: var(--arctic-powder);
}

.ent-compare__pillar {
    display: inline-block;
}

.ent-compare__row {
    border-top: 1px solid var(--mystic-mint);
}

.ent-compare__cell {
    padding: 20px 22px;
    font-family: var(--font-body);
    font-size: 0.98rem;
    color: var(--oceanic-noir);
    display: flex;
    align-items: center;
    border-left: 1px solid var(--mystic-mint);
}

.ent-compare__cell--rowhead {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--oceanic-noir);
    background: var(--arctic-powder);
    border-left: none;
}

.ent-compare__cell--elqo {
    background: var(--mystic-mint);
    border-left: 1px solid var(--mystic-mint);
}

.ent-compare__row:hover .ent-compare__cell {
    background: var(--mystic-mint);
}

.ent-compare__row:hover .ent-compare__cell--elqo {
    background: var(--mystic-mint);
}

.ent-compare__row:hover .ent-compare__cell--rowhead {
    background: var(--mystic-mint);
}

.ent-mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* Comparison-answer marks: these are Yes/No/Partial answers, not
   performance data, so per brand refresh rule they never use
   Moss/Clay — plain Arctic Powder text + icon on the dark band. */
.ent-mark--ok,
.ent-mark--no,
.ent-mark--mid {
    background: rgba(241, 246, 244, 0.12);
    color: var(--arctic-powder);
}

.ent-mark--ok::before,
.ent-mark--no::before,
.ent-mark--mid::before {
    content: '';
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.ent-mark--ok::before {
    -webkit-mask-image: var(--ph-check);
    mask-image: var(--ph-check);
}

.ent-mark--no::before {
    -webkit-mask-image: var(--ph-x);
    mask-image: var(--ph-x);
}

.ent-mark--mid::before {
    -webkit-mask-image: var(--ph-minus);
    mask-image: var(--ph-minus);
}

/* =====================================================
   DIFFERENTIATORS (6 cards, 3x2)
   ===================================================== */

.ent-diffs {
    padding: 80px 6%;
    background: var(--arctic-powder);
    color: var(--oceanic-noir);
}

.ent-diffs__head {
    text-align: center;
    max-width: 1100px;
    margin: 0 auto 48px;
}

.ent-diffs__head h2 {
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    line-height: 1.18;
    margin: 0;
}

/* Alternating band, same modifier pattern as .ent-problem--alt above */
.ent-diffs--alt {
    background: var(--mystic-mint);
}

.ent-diffs__grid {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Card panel inverts relative to its section: Mystic Mint panel on the
   Arctic Powder default section, Arctic Powder panel on the Mystic
   Mint (--alt) section, so the panel always reads against its band. */
.ent-diff-card {
    background: var(--mystic-mint);
    border-radius: 20px;
    padding: 32px 28px;
    box-shadow: none;
    border: none;
    transition: transform 100ms var(--ease-out);
}

.ent-diffs--alt .ent-diff-card {
    background: var(--arctic-powder);
}

.ent-diff__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--arctic-powder);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    color: var(--nocturnal-expedition);
}

.ent-diffs--alt .ent-diff__icon {
    background: var(--mystic-mint);
}

.ent-diff__icon svg {
    width: 32px;
    height: 32px;
}

.ent-diff-card h3 {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--oceanic-noir);
    line-height: 1.25;
}

.ent-diff-card p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--nocturnal-expedition);
}

/* =====================================================
   SECURITY & COMPLIANCE STRIP
   ===================================================== */

/* Both instances of this component (§6 "Speaking vs multiple choice" and
   §10 "Security/compliance") flip from the legacy dark navy to a light
   Arctic Powder band per the brand refresh spec — full role flip, not a
   token substitution, applied uniformly since it's one shared class. */
.ent-security {
    background: var(--arctic-powder);
    padding: 80px 6%;
    color: var(--oceanic-noir);
}

.ent-security__inner {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 60px;
    align-items: center;
}

.ent-security__copy h2 {
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
    margin: 0 0 14px;
    color: var(--oceanic-noir);
    line-height: 1.2;
}

.ent-security__copy p {
    font-family: var(--font-body);
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--oceanic-noir);
    margin: 0;
}

.ent-security__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* WHY VOICE — side-by-side session comprehension mock */
.ent-security--voice .ent-security__inner {
    align-items: stretch;
}

.ent-security__visual {
    min-width: 0;
    display: flex;
}

.ent-security__visual .ent-mock--hero {
    max-width: none;
    transform: none;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ent-security__visual .ent-mock__people--scroll {
    max-height: none;
    overflow: hidden;
    flex: 1;
    justify-content: space-evenly;
}

.ent-chip {
    padding: 10px 18px;
    border-radius: 999px;
    border: none;
    background: var(--mystic-mint);
    color: var(--oceanic-noir);
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.ent-chip em {
    font-style: normal;
    font-weight: 600;
    opacity: 0.7;
    margin-left: 4px;
    font-size: 0.84rem;
}

/* =====================================================
   FAQ OVERRIDE (reuses .faq-container/item/etc. from
   styles.css, restyled onto the brand refresh token set
   instead of the legacy gray/sky-blue palette)
   ===================================================== */

.ent-faq-title {
    font-size: 2.4rem;
    margin-top: 60px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    color: var(--oceanic-noir);
}

.ent-page .faq-container {
    max-width: 960px;
}

.ent-page .faq-item {
    border: 1px solid var(--mystic-mint);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(23, 43, 54, 0.08);
    margin-bottom: 16px;
}

.ent-page .faq-question {
    padding: 18px 24px;
    font-size: 1.05rem;
    color: var(--oceanic-noir);
    background-color: var(--arctic-powder);
    border-radius: 14px;
}

.ent-page .faq-question:hover {
    background-color: var(--mystic-mint);
}

.ent-page .faq-answer {
    padding: 0 24px 20px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--nocturnal-expedition);
}

.ent-page .faq-question::after {
    color: var(--nocturnal-expedition);
}

/* FAQ section had no section-level background before this refresh —
   spec calls for a Mystic Mint band here, so give it the same
   padding rhythm as the other full-bleed sections on the page. */
.ent-faq-band {
    background: var(--mystic-mint);
    padding: 80px 6%;
}
.ent-faq-band .faq-title {
    margin-top: 0;
    padding-top: 0;
}
.ent-faq-band .faq-container {
    margin-top: 40px;
    margin-bottom: 0;
}

/* =====================================================
   FINAL CTA
   ===================================================== */

.ent-final-cta {
    padding: 80px 6%;
    background: var(--oceanic-noir);
    text-align: center;
    color: var(--arctic-powder);
}

.ent-final-cta__inner {
    max-width: 1100px;
    margin: 0 auto;
}

.ent-final-cta h2 {
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
    line-height: 1.18;
    margin: 0 0 18px;
    color: var(--arctic-powder);
}

.ent-final-cta p {
    font-family: var(--font-body);
    font-size: 1.18rem;
    line-height: 1.5;
    color: var(--mystic-mint);
    margin: 0 0 32px;
}

/* Dark-surface focus ring: the nocturnal-expedition default ring from
   styles.css is nearly invisible against these Oceanic Noir bands. */
.ent-hero :focus-visible,
.ent-compare :focus-visible,
.ent-final-cta :focus-visible {
    outline-color: var(--forsythia);
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 1024px) {
    .ent-hero__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .ent-hero__visual {
        order: 2;
    }

    .ent-mock--hero {
        max-width: 460px;
        transform: rotate(0deg);
    }

    .ent-mock__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ent-diffs__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ent-security__inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .ent-mock__heatgrid {
        grid-template-columns: 160px 1fr;
    }

    .ent-person {
        grid-template-columns: 44px 1fr auto;
        row-gap: 10px;
    }

    .ent-person .ent-action {
        grid-column: 2 / -1;
        justify-self: start;
    }

    .ent-problem__qs {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ent-hero {
        padding: 80px 6% 48px;
    }

    .ent-hero__headline {
        font-size: clamp(2rem, 7vw, 2.6rem);
    }

    .ent-hero__sub {
        font-size: 1.05rem;
    }

    .ent-hero__ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .ent-cta {
        text-align: center;
    }

    .ent-problem {
        padding: 56px 6%;
    }

    .ent-problem__qs {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 40px;
    }

    .ent-problem__q {
        padding: 22px 22px 24px;
    }

    .ent-problem__qtext {
        font-size: 1.05rem;
    }

    .ent-dashboard {
        padding: 56px 6%;
    }

    .ent-tabs {
        gap: 6px;
    }

    .ent-tab {
        padding: 10px 16px;
        font-size: 0.88rem;
    }

    .ent-mock__grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 20px 16px 4px;
    }

    .ent-mock__bignum {
        font-size: 1.9rem;
    }

    .ent-mock__heatgrid {
        grid-template-columns: 1fr;
        row-gap: 8px;
    }

    .ent-mock__heataxis {
        grid-column: 1;
    }

    .ent-mock__table {
        font-size: 0.85rem;
    }

    .ent-mock__table thead th,
    .ent-mock__table tbody td {
        padding: 12px 14px;
    }

    /* Comparison table → stacked card mode */
    .ent-compare {
        padding: 56px 6%;
    }

    .ent-compare__col--header {
        display: none;
    }

    .ent-compare__row {
        grid-template-columns: 1fr;
        padding: 18px 18px 6px;
        gap: 0;
        border-top: none;
        border-bottom: 1px solid var(--mystic-mint);
    }

    .ent-compare__row:last-child {
        border-bottom: none;
    }

    .ent-compare__cell--rowhead {
        background: transparent;
        font-size: 1rem;
        margin-bottom: 8px;
        padding: 0 0 8px;
        border-bottom: 1px solid var(--mystic-mint);
    }

    .ent-compare__cell {
        padding: 8px 0;
        border-left: none;
        justify-content: space-between;
    }

    .ent-compare__cell:not(.ent-compare__cell--rowhead)::before {
        content: attr(data-label);
        font-family: var(--font-body);
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--nocturnal-expedition);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-right: 12px;
    }

    .ent-compare__cell--elqo {
        background: transparent;
        border-left: none;
    }

    .ent-compare__cell--elqo:not(.ent-compare__cell--rowhead)::before {
        color: var(--nocturnal-expedition);
    }

    .ent-diffs__grid {
        grid-template-columns: 1fr;
    }

    .ent-diff-card {
        padding: 26px 24px;
    }

    .ent-security {
        padding: 56px 6%;
    }

    .ent-diffs {
        padding: 56px 6%;
    }

    .ent-security__chips {
        gap: 8px;
    }

    .ent-chip {
        padding: 8px 14px;
        font-size: 0.86rem;
    }

    .ent-final-cta {
        padding: 56px 6%;
    }

    .ent-cta--large {
        padding: 18px 36px;
        font-size: 1.05rem;
        width: 100%;
    }

    .ent-cta--long {
        white-space: normal;
        padding: 16px 20px;
        font-size: 0.95rem;
        line-height: 1.25;
        min-width: 0;
    }

    .ent-person {
        grid-template-columns: 40px 1fr auto;
        padding: 12px 14px;
    }

    .ent-faq-title {
        font-size: 1.8rem;
        margin-top: 40px;
    }

    /* Nav pill on mobile (inside the hamburger menu) */
    .nav-links ul li a.nav-pill {
        display: inline-block;
        margin-top: 8px;
    }
}

@media (max-width: 480px) {
    .ent-mock__topbar {
        padding: 12px 14px;
    }

    .ent-mock__crumb {
        font-size: 0.7rem;
    }
}

/* =====================================================
   REDESIGN ADDITIONS (front-door / B2B)
   Balanced restyle + new sections: proof, how-it-works,
   nav individuals link + demo pill, scroll reveal.
   ===================================================== */

/* Balanced refinements: tighter radii, softer shadows,
   tabular numerals on figures. Pills are kept on purpose. */
.ent-problem__q { border-radius: 12px; box-shadow: 0 6px 18px rgba(23, 43, 54, 0.05); }
.ent-diff-card { border-radius: 14px; }
.ent-compare__grid { border-radius: 14px; box-shadow: 0 10px 28px rgba(23, 43, 54, 0.08); }
/* .ent-cta--primary / --large stay flat (no shadow) per the button rules
   declared where the class is defined earlier in this file */

.ent-mock__bignum,
.ent-mock__delta,
.ent-mock__pct,
.ent-mock__table td,
.ent-person__metric strong {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Scroll reveal (progressive enhancement, reduced-motion safe) */
.js .ent-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.ent-reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .js .ent-reveal { opacity: 1 !important; transform: none !important; transition: opacity 200ms ease !important; }
    .ent-hero__video { display: none; }
    .is-home .ent-hero__bg { background: var(--oceanic-noir); }
    .ent-hero--video .ent-hero__bg { background: var(--oceanic-noir); }
}

/* Nav: keep every item on one vertical centre line.
   Desktop only — on mobile the drawer needs its items to
   stack in a block column, not stay inline-flex.
   Base alignment also lives in styles.css so blog/light pages match. */
@media screen and (min-width: 769px) {
    .nav-bar .nav-links ul {
        align-items: center;
    }
    .nav-bar .nav-links ul > li {
        display: inline-flex;
        align-items: center;
        line-height: 1;
    }
}

/* Nav: persistent demo pill */
.ent-nav-individuals-item,
.ent-nav-cta-item { margin: 0; display: inline-flex; align-items: center; }

.ent-nav-individuals {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--mystic-mint) !important;
    text-transform: none;
    letter-spacing: 0.01em;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.ent-nav-individuals:hover { color: var(--arctic-powder) !important; border-bottom-color: var(--mystic-mint); }

/* Default: Forsythia primary button. On the home page (.is-home) this
   demotes to secondary-on-dark, since the hero already carries the one
   primary CTA in that viewport — see .is-home override below. */
.ent-nav-cta {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 999px;
    background: var(--forsythia);
    color: var(--oceanic-noir) !important;
    border: 2px solid transparent;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    text-transform: none;
    box-shadow: none;
    transition: transform 100ms var(--ease-out), background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.ent-nav-cta:hover {
    background: var(--deep-saffron);
}

/* Home page only: nav CTA demotes to secondary-on-dark so the hero's
   own primary button remains the one gold fill in the viewport. */
.is-home .ent-nav-cta {
    background: transparent;
    color: var(--arctic-powder) !important;
    border-color: var(--arctic-powder);
}
.is-home .ent-nav-cta:hover {
    background: rgba(241, 246, 244, 0.1);
    color: var(--arctic-powder) !important;
}

/* Why Elqo: two-card grid */
.ent-diffs__grid--two {
    grid-template-columns: repeat(2, 1fr);
}

/* Why Elqo: four-card grid */
.ent-diffs__grid--four {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1320px;
}

/* Why Elqo: three-card grid, asymmetric lead card (keyword pages) */
.ent-diffs__grid--three {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
}
.ent-diffs__grid--three .ent-diff-card--lead {
    grid-column: span 2;
}

/* Why Elqo: five-card grid, asymmetric lead card (index.html only) */
.ent-diffs__grid--five {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    max-width: 1320px;
}
.ent-diffs__grid--five .ent-diff-card--lead {
    grid-column: span 2;
}

/* =====================================================
   REDESIGN RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) {
    .ent-diffs__grid--four { grid-template-columns: repeat(2, 1fr); }
    .ent-diffs__grid--five { grid-template-columns: repeat(2, 1fr); }
    .ent-diffs__grid--five .ent-diff-card--lead { grid-column: span 2; }
    .ent-diffs__grid--three { grid-template-columns: repeat(2, 1fr); }
    .ent-diffs__grid--three .ent-diff-card--lead { grid-column: span 2; }
}

@media (max-width: 768px) {
    .ent-diffs__grid--two { grid-template-columns: 1fr; }
    .ent-diffs__grid--four { grid-template-columns: 1fr; }
    .ent-diffs__grid--five { grid-template-columns: 1fr; }
    .ent-diffs__grid--five .ent-diff-card--lead { grid-column: span 1; }
    .ent-diffs__grid--three { grid-template-columns: 1fr; }
    .ent-diffs__grid--three .ent-diff-card--lead { grid-column: span 1; }

    /* Nav individuals + demo pill inside the mobile menu panel */
    .ent-nav-individuals-item,
    .ent-nav-cta-item { margin: 0; }
    .ent-nav-cta { display: inline-block; margin-top: 8px; }
}

/* =====================================================
   Contact page — two-column hero + enterprise FAQ
   ===================================================== */

.ent-contact-hero {
    display: grid;
    grid-template-columns: 35% 65%;
    gap: 60px;
    align-items: start;
    max-width: 1440px;
    margin: 0 auto;
    padding: 96px 6% 64px;
}

.ent-contact-hero__left {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 40px;
}

.ent-contact-hero__heading {
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: clamp(2rem, 2.8vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--ent-ink, var(--oceanic-noir));
    margin: 0 0 24px;
}

.ent-contact-hero__subtext {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--ent-muted, var(--nocturnal-expedition));
    margin: 0 0 36px;
    max-width: 560px;
}

.ent-contact-hero__email {
    margin-bottom: 28px;
}

.ent-contact-hero__email-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ent-body, var(--oceanic-noir));
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    transition: color 0.2s ease;
}

.ent-contact-hero__email-link:hover {
    color: var(--ent-accent, var(--nocturnal-expedition));
}

.ent-contact-hero__email-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    opacity: 0.75;
}

.ent-contact-hero__right {
    display: flex;
    flex-direction: column;
}

.ent-contact-hero__calendly-card {
    background: var(--arctic-powder);
    border: 1px solid var(--mystic-mint);
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(23, 43, 54, 0.08);
    overflow: hidden;
    padding: 8px;
}

/* Enterprise FAQ section */

.ent-contact-faq {
    background: var(--arctic-powder);
    padding: 80px 6%;
    text-align: center;
}

.ent-contact-faq__heading {
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    letter-spacing: -0.02em;
    color: var(--oceanic-noir);
    margin: 0 0 48px;
}

.ent-contact-faq__accordion {
    max-width: 960px;
    margin: 0 auto;
    text-align: left;
}

/* Responsive */

@media (max-width: 900px) {
    .ent-contact-hero {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 124px 5% 60px;
    }

    .ent-contact-hero__left {
        padding-top: 0;
    }

    .ent-contact-hero__heading {
        font-size: clamp(2.4rem, 8vw, 3.6rem);
        white-space: normal;
    }

    .ent-contact-hero__subtext {
        max-width: 100%;
    }

    .ent-contact-hero__right {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .ent-contact-hero {
        padding: 116px 4% 50px;
    }

    .ent-contact-hero__calendly-card {
        padding: 4px;
        border-radius: 14px;
    }

    .ent-contact-faq {
        padding: 60px 4% 80px;
    }
}

/* =====================================================
   DARK THEME — solid navy surfaces
   -----------------------------------------------------
   Source of truth for .ent-page. Solid fills, no glass.
   Palette: lifted navy + sky-blue var(--nocturnal-expedition) accent.
   Product mocks are solid light islands on the dark page.

   NOTE: bespoke sections on university / coach / highschool
   / keyword pages that use their own (non-ent-) classes are
   NOT covered here and may need a spot-check.
   ===================================================== */

.ent-page {
    /* Most bands are light now (Arctic Powder default / Mystic Mint alt).
       Dark bands (nav, hero, compare, closing CTA, footer) declare their
       own colors directly rather than through these shared roles. */
    --ent-bg:         var(--arctic-powder);
    --ent-bg-alt:     var(--mystic-mint);
    --ent-surface:    var(--arctic-powder);
    --ent-surface-2:  var(--mystic-mint);
    --ent-border:     rgba(23, 43, 54, 0.12);
    --ent-border-soft:rgba(23, 43, 54, 0.08);
    --ent-ink:        var(--oceanic-noir);
    --ent-body:       var(--nocturnal-expedition);
    --ent-muted:      var(--nocturnal-expedition);
    --ent-muted-2:    var(--nocturnal-expedition);
    --ent-accent:     var(--nocturnal-expedition);
    --ent-on-accent:  var(--arctic-powder);
    --ent-ok:         var(--moss);
    --ent-ok-bg:      var(--mystic-mint);
    --ent-warn:       var(--nocturnal-expedition);
    --ent-warn-bg:    var(--mystic-mint);
    --ent-risk:       var(--clay);
    --ent-risk-bg:    var(--mystic-mint);
    --ent-mock-ink:   var(--oceanic-noir);
    --ent-mock-body:  var(--nocturnal-expedition);
    --ent-mock-muted: var(--nocturnal-expedition);

    background-color: var(--ent-bg);
    color: var(--ent-body);
}

/* ---- Desktop nav: Oceanic Noir everywhere (matches the base rule in
   styles.css — declared again here at .ent-page specificity so nothing
   in this file can accidentally re-lighten it). Mobile drawer is handled
   further down + by mobile-nav-fix.css. ---- */
.ent-page .nav-bar {
    background: var(--oceanic-noir);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--nocturnal-expedition);
    box-shadow: none;
}

/* Homepage: the bar is clear over the hero. script.js writes --nav-fill
   (0–1) as the hero copy reaches the bar, so the navy gradients in
   before the headline slides under the links. No JS keeps the solid bar. */
.js .is-home .nav-bar {
    --nav-fill: 0;
    background: transparent;
    border-bottom-color: color-mix(in srgb, var(--nocturnal-expedition) calc(var(--nav-fill) * 100%), transparent);
}
.js .is-home .nav-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, var(--oceanic-noir) 0%, color-mix(in srgb, var(--oceanic-noir) 78%, var(--nocturnal-expedition)) 100%);
    opacity: var(--nav-fill);
}

/* Homepage audit strip. In normal flow so it scrolls away; the fixed
   nav sits just under it until script.js parks the nav at top: 0. */
.announce-bar {
    position: relative;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 37px;
    padding: 8px 44px;
    background: var(--arctic-powder);
    color: var(--oceanic-noir);
    border-bottom: 1px solid rgba(23, 43, 54, 0.12);
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.3;
    text-align: center;
}
html.announce-dismissed .announce-bar { display: none; }
.announce-bar__link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.announce-bar__link:hover { color: var(--nocturnal-expedition); }
.announce-bar__dismiss {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px 8px;
    margin: 0;
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--oceanic-noir);
    cursor: pointer;
}
.announce-bar__dismiss:hover { color: var(--nocturnal-expedition); }
.is-home .nav-bar { top: var(--announce-h, 37px); }
html.announce-dismissed .is-home .nav-bar { top: 0; }
.ent-page .menu-button { color: var(--arctic-powder); }
.ent-page .nav-links ul li a,
.ent-page .nav-links ul li a:visited { color: var(--arctic-powder); }
.ent-page .nav-links ul li a:hover { color: var(--deep-saffron); }
.ent-page .nav-dropdown__trigger { color: var(--arctic-powder); }
.ent-page .nav-dropdown__trigger:hover { color: var(--deep-saffron); }

/* The rule above's "ul li a" is broad enough to also catch the nested
   dropdown popover's links — restore the dark-on-light color the
   comment below expects (specificity fix, not a design change). */
.ent-page .nav-links ul li .nav-dropdown__menu a,
.ent-page .nav-links ul li .nav-dropdown__menu a:visited { color: var(--oceanic-noir); }
.ent-page .nav-links ul li .nav-dropdown__menu a:hover { color: var(--oceanic-noir); background: var(--mystic-mint); }

/* The "For teams" dropdown is a light popover floating off the dark nav —
   intentionally NOT overridden dark here; it inherits the light base
   treatment from styles.css (Arctic Powder bg, Oceanic Noir text, Mystic
   Mint row hover), which already matches the brand refresh spec. */

/* ---- Eyebrows ---- */
.ent-eyebrow--center { color: var(--ent-muted); opacity: 1; }

/* ---- Centered hero (index) ---- */
.is-home .ent-hero {
    min-height: 90vh;
    min-height: 90dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.is-home .ent-hero__inner {
    width: 100%;
}
.ent-hero--center { padding-bottom: 100px; }
.ent-hero--center .ent-hero__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    max-width: 1440px;
    gap: 0;
}
.ent-hero--center .ent-hero__copy { max-width: 100%; width: 100%; }
.ent-hero--center .ent-hero__headline {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(2.6rem, 4.8vw, 4rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
}
/* Accent stays inline so both sentences flow as one continuous headline. */
.ent-hero--center .ent-hero__headline .ent-gradient { display: inline; white-space: normal; }
.ent-hero--center .ent-hero__sub {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.28rem;
}
.ent-hero--center .ent-hero__ctas { justify-content: center; margin-bottom: 0; }
.ent-hero--center .ent-hero__trustline,
.ent-hero--center .ent-hero-preview__trust { margin: 24px auto 0; text-align: center; }
.is-home .ent-hero > .ent-hero-preview__trust {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 28px;
    z-index: 2;
    margin: 0 auto;
    padding: 0 6%;
    text-align: center;
}
.ent-hero--center .ent-hero__visual { margin-top: 48px; width: 100%; }
.ent-hero--center .ent-hero__visual .ent-mock--hero { transform: none; margin: 0 auto; max-width: 1100px; }

/* Homepage hero keeps a translucent Oceanic Noir veil over the
   background video. Other .ent-page heroes stay solid navy. */
.ent-page:not(.is-home) .ent-hero__bg {
    background: var(--oceanic-noir);
}

/* Video hero (education, coach): same layout as the homepage hero
   (video background, centered copy, trust line pinned to the
   bottom), without adopting .is-home's nav/CTA side effects. */
.ent-hero--video {
    min-height: 90vh;
    min-height: 90dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ent-hero--video .ent-hero__inner {
    width: 100%;
}
.ent-page .ent-hero--video .ent-hero__bg {
    background: color-mix(in srgb, var(--oceanic-noir) 10%, transparent);
}
.ent-hero--video > .ent-hero-preview__trust {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 28px;
    z-index: 2;
    margin: 0 auto;
    padding: 0 6%;
    max-width: none;
    text-align: center;
    white-space: nowrap;
}

.ent-hero-preview {
    position: relative;
    z-index: 1;
    padding: 8px 6% 90px;
    text-align: center;
    background: linear-gradient(180deg, var(--nocturnal-expedition) 0%, var(--oceanic-noir) 62%);
}
.ent-hero-preview__trust {
    margin: 16px auto 0;
    max-width: 56rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--mystic-mint);
    letter-spacing: 0.02em;
}
.ent-hero-preview .ent-hero__visual { justify-content: center; }
.ent-hero-preview .ent-mock--hero {
    max-width: 1100px;
    margin: 0 auto;
    transform: none;
}
.ent-hero-preview .ent-mock-caption {
    margin: 16px auto 0;
    max-width: 56rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--mystic-mint);
}
.ent-diffs__note {
    margin: 22px 0 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ent-muted);
}
.ent-diffs__note a {
    color: var(--nocturnal-expedition);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ent-diffs__note a:hover {
    color: var(--oceanic-noir);
}

/* ---- Instant press feedback (Apple response) ---- */
.ent-page .ent-cta:active {
    transform: scale(0.97);
    transition-duration: 160ms;
}

/* ---- Problem (default Arctic Powder; --alt modifier Mystic Mint) ---- */
.ent-problem { background: var(--ent-bg); color: var(--ent-body); }
.ent-problem--alt { background: var(--ent-bg-alt); }
.ent-problem h2 { color: var(--ent-ink); }
.ent-problem__sub { color: var(--oceanic-noir); }
.ent-problem__q {
    background: var(--ent-surface);
    border-color: var(--ent-border);
    box-shadow: 0 10px 28px rgba(23, 43, 54, 0.08);
}
.ent-problem--alt .ent-problem__q { background: var(--arctic-powder); }
.ent-problem__q:hover { box-shadow: 0 16px 36px rgba(23, 43, 54, 0.12); }
.ent-problem__list .ent-problem__q {
    background: transparent;
    border: none;
    box-shadow: none;
    border-bottom: 1px solid var(--nocturnal-expedition);
}
.ent-problem__list .ent-problem__q:first-child {
    border-top: 1px solid var(--nocturnal-expedition);
}
.ent-problem__list .ent-problem__q:hover { box-shadow: none; }
.ent-problem__qtext { color: var(--ent-ink); }

/* ---- Dashboard (Arctic Powder, per spec) ---- */
.ent-dashboard { background: var(--ent-bg); color: var(--ent-body); }
.ent-dashboard__head h2 { color: var(--ent-ink); }
.ent-dashboard__sub { color: var(--ent-muted); }
.ent-tab {
    background: var(--arctic-powder);
    color: var(--ent-body);
    border-color: var(--mystic-mint);
}
.ent-tab:hover { border-color: var(--ent-accent); }
.ent-tab.is-active {
    background: var(--oceanic-noir);
    color: var(--arctic-powder);
    border-color: var(--oceanic-noir);
    box-shadow: 0 10px 24px rgba(23, 43, 54, 0.28);
}

/* ---- Mock cards — light product islands, unchanged whichever band
   they sit on (already Arctic Powder via the base .ent-mock rule) ---- */
.ent-mock__topbar {
    background: var(--mystic-mint);
}
.ent-mock__kpi {
    background: var(--mystic-mint);
    border-color: var(--arctic-powder);
}
.ent-mock__bar { background: var(--mystic-mint); }
.ent-mock__chip {
    background: var(--mystic-mint);
    color: var(--nocturnal-expedition);
    border-color: var(--arctic-powder);
}
.ent-mock__chip--alt {
    background: var(--nocturnal-expedition);
    color: var(--arctic-powder);
    border-color: var(--nocturnal-expedition);
}
.ent-mock__table thead th {
    background: var(--mystic-mint);
    border-bottom-color: var(--arctic-powder);
}
.ent-mock__table tbody td {
    border-bottom-color: var(--mystic-mint);
}
.ent-mock__table tbody tr:hover { background: var(--mystic-mint); }
.ent-cell { background: var(--mystic-mint); }
.ent-cell--3 { background: rgba(17, 76, 90, 0.22); }
.ent-cell--4 { background: rgba(17, 76, 90, 0.34); }
.ent-cell--5 { background: rgba(17, 76, 90, 0.46); }
.ent-cell--6 { background: rgba(17, 76, 90, 0.58); }
.ent-cell--7 { background: rgba(17, 76, 90, 0.70); }
.ent-cell--8 { background: rgba(17, 76, 90, 0.82); }
.ent-cell--9 { background: rgba(17, 76, 90, 0.92); }
.ent-cell--10 { background: var(--nocturnal-expedition); }
.ent-person {
    background: var(--mystic-mint);
    border-color: var(--arctic-powder);
}
.ent-person__bar { background: var(--mystic-mint); }
.ent-mock--hero .ent-mock__people--scroll { scrollbar-color: var(--mystic-mint) transparent; }
.ent-mock--hero .ent-mock__people--scroll::-webkit-scrollbar-thumb { background: var(--mystic-mint); }
.ent-action--promote { background: var(--mystic-mint); color: var(--moss); }
.ent-action--scale { background: var(--mystic-mint); color: var(--nocturnal-expedition); }
.ent-action--coach { background: var(--mystic-mint); color: var(--clay); }
.ent-action--ontrack { background: var(--mystic-mint); color: var(--moss); }
.ent-mock__action {
    background: var(--mystic-mint);
    border-color: var(--arctic-powder);
}
.ent-mock__action-label { color: var(--nocturnal-expedition); }
.ent-mock__action-text { color: var(--nocturnal-expedition); }

/* ---- Comparison table: stays dark (Nocturnal Expedition band) per
   spec — the only section that doesn't follow the light-band default,
   so it sets its own colors instead of going through --ent-bg/surface. ---- */
.ent-compare { background: var(--nocturnal-expedition); color: var(--arctic-powder); }
.ent-compare__head h2 { color: var(--arctic-powder); }
.ent-compare__sub { color: var(--mystic-mint); }
.ent-compare__grid {
    background: var(--nocturnal-expedition);
    border-color: rgba(241, 246, 244, 0.16);
    box-shadow: 0 24px 60px rgba(23, 43, 54, 0.32);
}
.ent-compare__col--header { background: rgba(241, 246, 244, 0.08); }
.ent-compare__col--header .ent-compare__cell { color: var(--arctic-powder); }
.ent-compare__col--header .ent-compare__cell--rowhead { background: rgba(241, 246, 244, 0.08); }
.ent-compare__col--header .ent-compare__cell--elqo { background: var(--oceanic-noir); color: var(--arctic-powder); }
.ent-compare__row { border-top-color: rgba(241, 246, 244, 0.12); }
.ent-compare__cell { color: var(--arctic-powder); border-left-color: rgba(241, 246, 244, 0.12); }
.ent-compare__cell--rowhead { color: var(--arctic-powder); background: rgba(241, 246, 244, 0.04); }
.ent-compare__cell--elqo { background: rgba(241, 246, 244, 0.06); border-left-color: rgba(241, 246, 244, 0.16); }
.ent-compare__row:hover .ent-compare__cell { background: rgba(241, 246, 244, 0.08); }
.ent-compare__row:hover .ent-compare__cell--elqo { background: rgba(241, 246, 244, 0.1); }
.ent-compare__row:hover .ent-compare__cell--rowhead { background: rgba(241, 246, 244, 0.06); }
/* .ent-mark--ok/no/mid keep the plain-Arctic-Powder treatment declared
   earlier in this file — comparison answers, not performance data. */

/* ---- Why Elqo cards (default Arctic Powder; --alt modifier Mystic Mint,
   handled by the .ent-diffs--alt rule declared earlier in this file) ---- */
.ent-diffs { background: var(--ent-bg); color: var(--ent-body); }
.ent-diffs__head h2 { color: var(--ent-ink); }

/* Keyword / region / integrations: document-width reading column.
   Meyer reset strips heading size, so unstyled h2s were collapsing into body copy. */
.ent-keyword {
    padding: 96px 6% 104px;
    background: var(--ent-bg);
    color: var(--ent-body);
}
.ent-keyword + .ent-diffs {
    border-top: 1px solid var(--ent-border-soft);
}
.ent-keyword-body {
    max-width: 960px;
    margin: 0 auto;
    text-align: left;
}
.ent-keyword-block {
    padding: 56px 0 0;
    margin: 56px 0 0;
    border-top: 1px solid var(--ent-border-soft);
}
.ent-keyword-block:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}
.ent-keyword-block h2 {
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: clamp(1.45rem, 2.2vw, 1.9rem);
    line-height: 1.22;
    letter-spacing: -0.03em;
    color: var(--ent-ink);
    margin: 0 0 20px;
}
.ent-keyword-block p {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ent-body);
    margin: 0 0 1.1em;
}
.ent-keyword-block p:last-child {
    margin-bottom: 0;
}
.ent-keyword-body ul {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
.ent-keyword-body li {
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--ent-border-soft);
    color: var(--ent-body);
    line-height: 1.5;
}
.ent-keyword-body li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.ent-keyword-body--split {
    max-width: 1200px;
}
.ent-keyword-facts {
    max-width: 1100px;
    margin: 72px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 56px;
    border-top: 1px solid var(--ent-border-soft);
}
.ent-keyword-facts > div {
    padding: 28px 0;
    border-bottom: 1px solid var(--ent-border-soft);
}
.ent-keyword-facts dt {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: -0.02em;
    color: var(--ent-ink);
    margin: 0 0 8px;
}
.ent-keyword-facts dd {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--ent-body);
}
@media (min-width: 900px) {
    .ent-keyword-body--split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 64px;
    }
    .ent-keyword-body--split .ent-keyword-block {
        margin-top: 0;
        padding-top: 40px;
        padding-bottom: 8px;
        border-top: 1px solid var(--ent-border-soft);
    }
}
@media (max-width: 768px) {
    .ent-keyword {
        padding: 64px 6% 72px;
    }
    .ent-keyword-block {
        padding-top: 40px;
        margin-top: 40px;
    }
    .ent-keyword-facts {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 48px;
    }
}
.ent-diff-card h3 { color: var(--ent-ink); }
.ent-diff-card p { color: var(--ent-muted); }

/* ---- Security strip: light now (see the component rule earlier in
   this file), delineated with a hairline instead of navy borders ---- */
.ent-security { border-top: 1px solid var(--mystic-mint); border-bottom: 1px solid var(--mystic-mint); }

/* ---- FAQ ---- */
.ent-faq-title { color: var(--ent-ink); }
.ent-page .faq-item {
    background: var(--ent-surface);
    border-color: var(--ent-border);
    box-shadow: 0 10px 28px rgba(23, 43, 54, 0.08);
}
.ent-page .faq-question { color: var(--ent-ink); background-color: transparent; }
.ent-page .faq-question:hover { background-color: var(--mystic-mint); }
.ent-page .faq-answer { color: var(--ent-muted); }

/* ---- Footer: always dark (Oceanic Noir), regardless of the mostly-light
   page above it — text colors set explicitly rather than through
   --ent-body/--ent-ink, which are light-band roles on this page. ---- */
.ent-page .site-footer .footer-inner { max-width: 1440px; }
.ent-page .site-footer { background: var(--oceanic-noir); color: var(--mystic-mint); }
.ent-page .site-footer h2 { color: var(--arctic-powder); }
.ent-page .site-footer .footer-copy,
.ent-page .site-footer .footer-bottom p { color: var(--mystic-mint); }

/* ---- Contact page (keeps it usable under the dark theme) ---- */
.ent-contact-hero__email-icon { opacity: 0.8; }
.ent-contact-faq { background: var(--ent-bg-alt); }
.ent-contact-faq__heading { color: var(--ent-ink); }

/* ---- Reduced transparency: solidify frost materials ---- */
@media (prefers-reduced-transparency: reduce) {
    .ent-page .nav-bar,
    .js .is-home .nav-bar {
        background: var(--oceanic-noir);
        border-bottom-color: var(--nocturnal-expedition);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .js .is-home .nav-bar::after { content: none; }
    .ent-page .nav-dropdown__menu,
    .ent-page .nav-links ul li.nav-dropdown .nav-dropdown__menu {
        background: var(--ent-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .ent-problem__q,
    .ent-tab,
    .ent-diff-card,
    .ent-page .faq-item {
        background: var(--arctic-powder);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .ent-compare__grid {
        background: var(--nocturnal-expedition);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .ent-mock {
        background: var(--arctic-powder);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .ent-mock__topbar { background: var(--mystic-mint); }
}

/* ---- Dark theme: mobile overrides for the stacked comparison card ---- */
@media (max-width: 768px) {
    .ent-hero--center { padding-bottom: 72px; }
    /* Centered hero: rein in the desktop clamp so headlines don't render oversized on phones */
    .ent-hero--center .ent-hero__headline { font-size: clamp(2rem, 7.5vw, 2.75rem); max-width: 100%; line-height: 1.1; }
    .ent-hero--center .ent-hero__sub { font-size: 1.05rem; }
    .ent-hero--center .ent-hero__visual { margin-top: 32px; }
    .ent-hero--center .ent-hero__visual .ent-mock--hero { max-width: 100%; }
    .ent-hero-preview { padding: 4px 5% 70px; }
    .ent-hero-preview .ent-mock--hero { max-width: 100%; }
    .ent-hero--video > .ent-hero-preview__trust { white-space: normal; }

    /* Dashboard mock: wide tables scroll horizontally inside the card instead of clipping */
    .ent-tabpanel .ent-mock--full { overflow-x: auto; }

    .ent-compare__row { border-bottom-color: var(--ent-border-soft); }
    .ent-compare__cell--rowhead { border-bottom-color: var(--ent-border-soft); }
    .ent-compare__cell:not(.ent-compare__cell--rowhead)::before { color: var(--ent-muted-2); }
    .ent-compare__cell--elqo:not(.ent-compare__cell--rowhead)::before { color: var(--mystic-mint); }
}

/* =====================================================
   DARK THEME — mobile nav drawer (overrides the legacy
   cyan panel on ent-pages) + contact-page mobile fixes.
   Scoped to .ent-page so consumer/blog navs are untouched.
   ===================================================== */
@media (max-width: 768px) {
    /* Full-height dark slide-in drawer */
    .ent-page .nav-bar .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        width: min(340px, 88vw);
        height: 100%;
        height: 100dvh;
        background: var(--oceanic-noir);
        border-left: 1px solid rgba(241, 246, 244, 0.12);
        box-shadow: -24px 0 60px rgba(23, 43, 54, 0.50);
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 320ms var(--ease-drawer);
        z-index: 1000;
        will-change: transform;
    }
    .ent-page .nav-bar .nav-links.active { transform: translateX(0); }
    .ent-page .nav-bar .nav-links.is-instant { transition: none; }
    .ent-page .nav-bar .nav-links ul {
        justify-content: flex-start;
        align-items: stretch;
        height: 100%;
        margin: 0;
        padding: 64px 20px 32px;
        background: transparent;
        gap: 6px;
    }
    .ent-page .nav-links ul > li { width: 100%; margin: 0; }
    .ent-page .nav-links .nav-dropdown__caret { display: none; }
    .ent-page .nav-links ul > li.ent-nav-cta-item {
        margin-top: auto;
        padding-top: 16px;
    }
    .ent-page .nav-links ul > li > a,
    .ent-page .nav-links .nav-dropdown__trigger {
        display: block;
        color: var(--arctic-powder) !important;
        font-size: 1.05rem;
        padding: 12px 0;
    }
    .ent-page .nav-dropdown__menu a { color: rgba(241, 246, 244, 0.82) !important; }
    /* Book a demo pill: filled cyan, centered text (overrides the legacy ghost style) */
    .ent-page .nav-links .ent-nav-cta {
        display: block;
        width: 100%;
        text-align: center;
        padding: 14px 20px;
        background: var(--forsythia) !important;
        color: var(--oceanic-noir) !important;
        border-color: transparent !important;
        box-shadow: none;
    }
    .is-home .nav-links .ent-nav-cta {
        background: transparent !important;
        color: var(--arctic-powder) !important;
        border-color: var(--arctic-powder) !important;
    }
    /* Hamburger / X sits above the drawer and stays white */
    .ent-page .menu-button { z-index: 1002; color: var(--arctic-powder); }

    /* Contact page: calendly must not force horizontal overflow on small screens */
    .ent-page .ent-contact-hero__calendly-card .calendly-inline-widget { min-width: 0 !important; }
}

/* =====================================================
   PRICING — included feature lists inside diff cards
   ===================================================== */

.ent-include-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ent-include-list li {
    position: relative;
    padding-left: 1.15rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--ent-body, var(--nocturnal-expedition));
}

.ent-include-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ent-accent, var(--nocturnal-expedition));
}

/* =====================================================
   PRICING PAGE — plan cards, feature matrix, trust
   (Go1 / Canvas / Articulate structure)
   ===================================================== */

.ent-pricing-hero .ent-hero__headline {
    font-size: clamp(1.85rem, 3.2vw, 2.85rem);
    max-width: none;
}

.ent-pricing-hero .ent-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.ent-matrix-section {
    padding: 80px 6%;
    background: var(--arctic-powder);
}

.ent-matrix-section__head {
    text-align: center;
    max-width: 960px;
    margin: 0 auto 48px;
}

.ent-matrix-section__head h2 {
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    line-height: 1.18;
    color: var(--oceanic-noir);
    margin: 0 0 12px;
}

.ent-matrix-section__sub {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--nocturnal-expedition);
}

.ent-matrix-block {
    max-width: 1200px;
    margin: 0 auto 36px;
}

.ent-matrix-block__title {
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--oceanic-noir);
}

.ent-matrix {
    background: var(--arctic-powder);
    border: 1px solid var(--mystic-mint);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(23, 43, 54, 0.06);
}

.ent-matrix__row {
    display: grid;
    grid-template-columns: 1fr 120px;
    border-top: 1px solid var(--mystic-mint);
}

.ent-matrix__row:first-child {
    border-top: none;
}

.ent-matrix__row--head {
    background: var(--mystic-mint);
}

.ent-matrix__row--head .ent-matrix__cell {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--oceanic-noir);
}

.ent-matrix__cell {
    padding: 14px 20px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--nocturnal-expedition);
    display: flex;
    align-items: center;
}

.ent-matrix__cell--check {
    justify-content: center;
    border-left: 1px solid var(--mystic-mint);
    background: rgba(17, 76, 90, 0.04);
}

.ent-matrix__row--head .ent-matrix__cell--check {
    background: var(--mystic-mint);
}

/* Matrix sits on Arctic Powder — reuse the mark component but invert
   the dark-band Arctic Powder treatment so Yes/check reads as ink. */
.ent-matrix .ent-mark--ok,
.ent-matrix .ent-mark--no,
.ent-matrix .ent-mark--mid {
    color: var(--oceanic-noir);
    background: transparent;
}

@media (max-width: 640px) {
    .ent-matrix__row {
        grid-template-columns: 1fr 88px;
    }
    .ent-matrix__cell {
        padding: 12px 14px;
        font-size: 0.9rem;
    }
}

@media (hover: hover) and (pointer: fine) {
    .ent-cta--primary:hover { transform: translateY(-2px); }
    .ent-cta--ghost:hover, .ent-cta--outline:hover { transform: translateY(-2px); }
    .ent-problem__q:hover { transform: translateY(-1px); }
    .ent-tab:hover { transform: translateY(-1px); }
    .ent-diff-card:hover { transform: translateY(-1px); }
    .ent-nav-cta:hover { transform: translateY(-1px); }
    .ent-page .site-footer .footer-social a:hover { transform: translateY(-1px); }
}

@media (hover: none), (pointer: coarse) {
    .ent-cta:hover,
    .ent-cta--primary:hover,
    .ent-cta--ghost:hover, .ent-cta--outline:hover,
    .ent-problem__q:hover,
    .ent-tab:hover,
    .ent-diff-card:hover,
    .ent-nav-cta:hover,
    .ent-page .site-footer .footer-social a:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ent-cta:hover,
    .ent-cta--primary:hover,
    .ent-cta--ghost:hover, .ent-cta--outline:hover,
    .ent-problem__q:hover,
    .ent-tab:hover,
    .ent-diff-card:hover,
    .ent-nav-cta:hover,
    .ent-page .site-footer .footer-social a:hover {
        transform: none;
    }

    .ent-page .nav-bar .nav-links {
        transform: none !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 200ms ease, visibility 200ms ease;
    }

    .ent-page .nav-bar .nav-links.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* ---- Press feedback ---- */
.ent-tab:active,
.ent-diff-card:active,
.ent-nav-cta:active,
.ent-page .site-footer .footer-social a:active {
    transform: scale(0.97);
    transition-duration: 160ms;
}

/* ---- Comprehension Gap report landing ---- */
.ent-report-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 96px 6% 28px;
}

.ent-report-hero__left {
    text-align: center;
}

.ent-report-hero__heading {
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: clamp(2.1rem, 3.6vw, 3.2rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--ent-ink);
    margin: 0 0 20px;
}

.ent-report-hero__hook {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    line-height: 1.35;
    color: var(--ent-ink);
    margin: 0 0 18px;
}

.ent-report-hero__body {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--ent-body);
    margin: 0 auto 28px;
    max-width: 56rem;
}

.ent-report-hero__cta {
    min-width: min(28rem, 100%);
    padding-left: 80px;
    padding-right: 80px;
}

.ent-report-reads {
    padding: 28px 6% 80px;
    background: var(--ent-bg);
}

.ent-report-reads h2 {
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    color: var(--ent-ink);
    margin: 0 0 32px;
    text-align: center;
}

.ent-report-reads__grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ent-report-read {
    display: block;
    text-decoration: none;
    background: var(--ent-surface);
    border: 1px solid var(--ent-border);
    border-radius: 18px;
    padding: 28px 24px;
    color: inherit;
}

.ent-report-read:hover {
    border-color: var(--ent-accent);
}

.ent-report-read h3 {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--ent-ink);
}

.ent-report-read p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ent-muted);
}

@media (max-width: 900px) {
    .ent-report-hero {
        padding: 124px 5% 56px;
    }

    .ent-report-hero__body {
        max-width: none;
    }

    .ent-report-reads__grid {
        grid-template-columns: 1fr;
    }
}