/* Homepage bundle: globals.css, then styles.css, then enterprise.css. Edit those files, then regenerate this one. */
/* Meyer reset 2.0, vendored so first paint does not wait on a second
   render-blocking request to cdnjs. Same rules as reset.min.css 2.0. */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

/* =====================================================
   BRAND TOKENS
   ===================================================== */
:root {
  /* brand */
  --arctic-powder: #F1F6F4;
  --mystic-mint: #D9E8E2;
  --nocturnal-expedition: #114C5A;
  --oceanic-noir: #172B36;
  --forsythia: #FFC801;
  --deep-saffron: #FF9932;

  /* status: data layer only */
  --clay: #9C4A3E;
  --moss: #2D5E41;

  /* roles */
  --bg: var(--arctic-powder);
  --bg-alt: var(--mystic-mint);
  --bg-dark: var(--oceanic-noir);
  --bg-band: var(--nocturnal-expedition);
  --text: var(--oceanic-noir);
  --text-secondary: var(--nocturnal-expedition);
  --text-on-dark: var(--arctic-powder);
  --text-secondary-on-dark: var(--mystic-mint);
  --cta-fill: var(--forsythia);
  --cta-text: var(--oceanic-noir);
  --cta-hover: var(--deep-saffron);

  /* Phosphor Icons, Regular weight (MIT). CSS masks so chrome inherits currentColor. */
  --ph-caret-down: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20256%20256%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M213.66%2C101.66l-80%2C80a8%2C8%2C0%2C0%2C1-11.32%2C0l-80-80A8%2C8%2C0%2C0%2C1%2C53.66%2C90.34L128%2C164.69l74.34-74.35a8%2C8%2C0%2C0%2C1%2C11.32%2C11.32Z%27%2F%3E%3C%2Fsvg%3E");
  --ph-list: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20256%20256%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M224%2C128a8%2C8%2C0%2C0%2C1-8%2C8H40a8%2C8%2C0%2C0%2C1%2C0-16H216A8%2C8%2C0%2C0%2C1%2C224%2C128ZM40%2C72H216a8%2C8%2C0%2C0%2C0%2C0-16H40a8%2C8%2C0%2C0%2C0%2C0%2C16ZM216%2C184H40a8%2C8%2C0%2C0%2C0%2C0%2C16H216a8%2C8%2C0%2C0%2C0%2C0-16Z%27%2F%3E%3C%2Fsvg%3E");
  --ph-x: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20256%20256%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M205.66%2C194.34a8%2C8%2C0%2C0%2C1-11.32%2C11.32L128%2C139.31%2C61.66%2C205.66a8%2C8%2C0%2C0%2C1-11.32-11.32L116.69%2C128%2C50.34%2C61.66A8%2C8%2C0%2C0%2C1%2C61.66%2C50.34L128%2C116.69l66.34-66.35a8%2C8%2C0%2C0%2C1%2C11.32%2C11.32L139.31%2C128Z%27%2F%3E%3C%2Fsvg%3E");
  --ph-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20256%20256%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M229.66%2C77.66l-128%2C128a8%2C8%2C0%2C0%2C1-11.32%2C0l-56-56a8%2C8%2C0%2C0%2C1%2C11.32-11.32L96%2C188.69%2C218.34%2C66.34a8%2C8%2C0%2C0%2C1%2C11.32%2C11.32Z%27%2F%3E%3C%2Fsvg%3E");
  --ph-minus: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20256%20256%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M224%2C128a8%2C8%2C0%2C0%2C1-8%2C8H40a8%2C8%2C0%2C0%2C1%2C0-16H216A8%2C8%2C0%2C0%2C1%2C224%2C128Z%27%2F%3E%3C%2Fsvg%3E");

  --font-body: "Switzer", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-headline: "Lastik", Georgia, serif;
}

/* =====================================================
   SELF-HOSTED FONTS
   Switzer weights actually in use site-wide (400/500/600/700/800).
   Lastik: Regular only, used for major headlines (hero h1 + top-level
   section h2s), per the brand refresh brief.
   ===================================================== */
@font-face {
  font-family: "Switzer";
  src: url("/fonts/switzer/Switzer-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/fonts/switzer/Switzer-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/fonts/switzer/Switzer-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/fonts/switzer/Switzer-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/fonts/switzer/Switzer-Extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lastik";
  src: url("/fonts/lastik/Lastik-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
  overflow: auto;
}

/* Default (light-surface) focus ring. Dark-band surfaces (nav, hero,
   closing CTA, footer) override to Forsythia below in enterprise.css /
   this file's dark-band block. */
:focus-visible {
  outline: 2px solid var(--nocturnal-expedition);
  outline-offset: 2px;
}

a {
  text-decoration: none;
}

.site-footer {
    background-color: var(--oceanic-noir);
    color: var(--mystic-mint);
    padding: 64px 24px 40px;
    font-family: var(--font-body);
    overflow: visible;
}

.site-footer .footer-inner {
    margin: 0 auto;
    width: 100%;
    max-width: 1320px;
}

.site-footer .footer-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 56px;
}

.site-footer .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.site-footer .footer-logo {
    display: inline-flex;
    align-items: center;
}

.site-footer .footer-logo img {
    height: 36px;
    width: auto;
    aspect-ratio: 348 / 198;
    display: block;
}

.site-footer .footer-demo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 28px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    color: var(--mystic-mint);
    text-decoration: none;
    transition: color 160ms ease;
}


.site-footer .footer-demo svg {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}

.site-footer .footer-demo:hover {
    color: var(--deep-saffron);
    text-decoration: underline;
}

.site-footer .footer-demo:focus-visible,
.site-footer .footer-col a:focus-visible,
.site-footer .footer-bottom a:focus-visible,
.site-footer .footer-social a:focus-visible,
.site-footer .lucis-icon:focus-visible {
    outline: 2px solid var(--forsythia);
    outline-offset: 3px;
}

.site-footer .footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
}

.site-footer .footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    color: var(--mystic-mint);
    background: transparent;
    border: 1px solid rgba(241, 246, 244, 0.14);
    border-radius: 50%;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.site-footer .footer-social a:hover {
    color: var(--deep-saffron);
    border-color: rgba(241, 246, 244, 0.35);
    background: rgba(241, 246, 244, 0.08);
}

.site-footer .footer-social svg {
    width: 16px;
    height: 16px;
    display: block;
}

.site-footer .footer-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 48px;
    align-items: start;
}

/* styles.css sets `nav` to a fixed header bar — isolate footer columns */
.site-footer .footer-col {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    z-index: auto;
}

.site-footer .footer-col h2,
.site-footer .footer-lucis h2 {
    margin: 0 0 16px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--arctic-powder);
}

.site-footer .footer-col ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    flex-grow: 0;
}

.site-footer .footer-col li {
    display: block;
    margin: 0;
    font-size: inherit;
    font-weight: 400;
    height: auto;
}

.site-footer .footer-col a {
    display: inline-block;
    color: var(--mystic-mint);
    font-size: 14px;
    line-height: 1.45;
    text-decoration: none;
    text-underline-offset: 3px;
    transition: color 160ms ease;
}

.site-footer .footer-col a:hover {
    color: var(--deep-saffron);
    text-decoration: underline;
}

.site-footer .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 24px;
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid var(--nocturnal-expedition);
    font-size: 14px;
    color: var(--mystic-mint);
}

.site-footer .footer-bottom a {
    color: var(--mystic-mint);
    text-decoration: none;
    text-underline-offset: 3px;
}

.site-footer .footer-bottom a:hover {
    color: var(--deep-saffron);
    text-decoration: underline;
}

.site-footer .footer-copy {
    margin: 0;
}

.site-footer .footer-lucis {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--nocturnal-expedition);
    text-align: center;
    display: grid;
    gap: 16px;
    justify-items: center;
}

.site-footer .footer-lucis h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.site-footer .lucis-icons {
    display: flex;
    gap: 18px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.site-footer .lucis-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--arctic-powder);
    text-decoration: none;
}

.site-footer .lucis-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

.site-footer .lucis-icon img.lucis-invert {
    filter: none;
}

.site-footer .lucis-icon:hover img {
    opacity: 1;
}

@media (min-width: 640px) {
    .site-footer {
        padding: 80px 24px 40px;
    }

    .site-footer .footer-cols {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .site-footer .footer-main {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 40px;
        align-items: start;
    }

    .site-footer .footer-brand {
        grid-column: span 4;
    }

    .site-footer .footer-cols {
        grid-column: span 8;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        column-gap: 20px;
        row-gap: 40px;
    }
}

@media (max-width: 639px) {
    .site-footer .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-footer .footer-lucis h2 {
        font-size: 16px;
        line-height: 1.4;
    }

    .site-footer .lucis-icon {
        width: 46px;
        height: 46px;
    }
}

.product-hunt img {
    width: 200px;
}/* home page */

:root {
    --radius-xs: 4px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;
    --shadow-sm: 0 6px 24px rgba(23, 43, 54, 0.08);
    --shadow-md: 0 12px 32px rgba(15, 25, 51, 0.12);
    --shadow-lg: 0 18px 40px rgba(23, 43, 54, 0.16), 0 4px 10px rgba(23, 43, 54, 0.06);
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --nav-offset: 72px;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden; /* Ensure no horizontal scrolling */
    margin: 0;
    padding: 0;
    width: 100%; /* Ensure body width matches the viewport */
    color-scheme: light;
    scroll-padding-top: calc(var(--nav-offset) + 16px);
}

h1, h2 {
    text-wrap: balance;
}

#main-content,
#faq,
h1[id],
h2[id],
h3[id],
section[id] {
    scroll-margin-top: calc(var(--nav-offset) + 16px);
}

button,
a,
.ent-cta,
.menu-button,
.faq-question,
.blog-category-card,
.ent-tab,
.nav-dropdown__trigger {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(17, 76, 90, 0.25);
}

a:focus-visible,
.ent-cta:focus-visible,
.faq-question:focus-visible,
.blog-category-card:focus-visible,
.ent-tab:focus-visible,
.nav-dropdown__trigger:focus-visible {
    outline: 2px solid var(--nocturnal-expedition);
    outline-offset: 2px;
}

/* Dark-surface focus ring: header/nav is Oceanic Noir site-wide */
.nav-bar :focus-visible,
.skip-link:focus-visible {
    outline-color: var(--forsythia);
}

/* ...but the "For teams" dropdown is a light popover floating off the
   dark nav — its rows keep the light-surface ring */
.nav-dropdown__menu :focus-visible {
    outline-color: var(--nocturnal-expedition);
}

body {
    overflow-x: hidden; /* Ensure no horizontal scrolling */
    margin: 0;
    padding: 0;
    width: 100%; /* Ensure body width matches the viewport */
    background-color: var(--arctic-powder);
    color: var(--oceanic-noir);
    font-family: var(--font-body);
}

/* Nav Bar Styles */

nav,
.nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 72px;
    box-sizing: border-box;
    background-color: var(--oceanic-noir);
    border-bottom: 1px solid var(--nocturnal-expedition);
    z-index: 1000;
    padding: 0 6%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.elqo-nav {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 100%;
}

.elqo-nav a {
    display: flex;
    align-items: center;
    height: 100%;
}

nav a,
nav a:visited {
    text-decoration: none;
    color: var(--arctic-powder);
}

.nav-links > ul > li > a:hover:not(.ent-nav-cta),
.nav-dropdown__trigger:hover {
    text-decoration: underline;
}

.nav-bar > .nav-links {
    display: flex;
    align-items: center;
    height: 100%;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    gap: 28px;
}

nav ul li {
    margin: 0;
    font-size: 0.9em;
    font-weight: bold;
    font-family: var(--font-body);
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    vertical-align: middle;
}

nav img,
.elqo-logo {
    height: auto;
    max-height: 40px;
    width: auto;
    aspect-ratio: 348 / 198;
    display: block;
}

.card-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* FAQ styles */

.faq-container {
    display: flex;
    flex-direction: column; /* Change layout to a single column */
    gap: 20px;
    max-width: 800px; /* Adjust width for readability */
    margin: 40px auto;
    font-family: var(--font-body);
}

.faq-title {
    font-family: var(--font-body);
    font-size: 36px;
    font-weight: 700;
    color: var(--oceanic-noir);
    text-align: center;
    margin: 20px 0;
    padding-top: 20px;
}

.faq-item {
    background-color: var(--arctic-powder);
    border: 1px solid var(--mystic-mint);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    font-size: 18px;
    font-weight: 600;
    color: var(--oceanic-noir);
    background-color: var(--arctic-powder);
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: transform 100ms var(--ease-out);
}

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

.faq-answer {
    padding: 15px 20px;
    font-size: 16px;
    color: var(--nocturnal-expedition);
    display: none; /* Hidden by default */
    margin-top: 10px; /* Add spacing between question and answer */
}

.faq-item.active .faq-answer {
    display: block; /* Ensure answers remain visible */
}

.faq-question::after {
    content: "";
    width: 1.1em;
    height: 1.1em;
    flex: 0 0 auto;
    background-color: currentColor;
    color: var(--oceanic-noir);
    -webkit-mask-image: var(--ph-caret-down);
    mask-image: var(--ph-caret-down);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    margin-left: 12px;
    transition: transform 180ms var(--ease-in-out);
    display: inline-block;
}

.faq-item.active .faq-question::after {
    transform: rotate(180deg);
}

/* privacy section */

.privacypolicy {
    padding: 10% 11%;
    margin: 0;
    height: auto; 
    width: 100%;
    text-align: left;
    overflow-x: clip; 
    position: relative; 
    font-family: var(--font-body);
}

.privacypolicy h1 {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--nocturnal-expedition);
    margin-bottom: 20px;
}

.privacypolicy h2 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--oceanic-noir);
    margin-bottom: 15px;
    text-align: left;

}

.privacypolicy p {
    font-size: 1rem;
    font-weight: 400;
    color: var(--nocturnal-expedition);
    line-height: 1.6;
    text-align: left;
    margin-bottom: 20px;
}

.privacypolicy ul {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 20px;
}

/* terms section */

.terms {
    padding: 10% 11%;
    margin: 0;
    height: auto; 
    width: 100%;
    text-align: left;
    overflow-x: clip; 
    position: relative; 
    font-family: var(--font-body);
}

.terms h1 {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--nocturnal-expedition);
    margin-bottom: 20px;
}

.terms h2 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--oceanic-noir);
    margin-bottom: 15px;
    text-align: left;

}

.terms p {
    font-size: 1rem;
    font-weight: 400;
    color: var(--nocturnal-expedition);
    line-height: 1.6;
    text-align: left;
    margin-bottom: 20px;
}

.terms ul {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 20px;
}

section, header, footer {
    max-width: 100vw; /* Prevent sections from exceeding the viewport width */
    overflow-x: hidden;
}

/* Mobile menu styles */

.menu-button {
    display: none;
    background-color: transparent;
    border: none;
    color: var(--arctic-powder);
    font-size: 24px;
    cursor: pointer;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1001;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    transition: transform 100ms var(--ease-out);
}

.menu-button:active {
    transform: scale(0.97);
    transition-duration: 160ms;
}

@media screen and (max-width: 768px)  {
.body {
        overflow-x: hidden; 

    }

.menu-button {
            display: flex;
            font-size: 0;
            line-height: 0;
     }

.menu-button::before {
        content: "";
        width: 28px;
        height: 28px;
        background-color: currentColor;
        -webkit-mask-image: var(--ph-list);
        mask-image: var(--ph-list);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

.menu-button[aria-expanded="true"]::before {
        -webkit-mask-image: var(--ph-x);
        mask-image: var(--ph-x);
    }

.nav-bar .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        width: 250px;
        height: 100%;
        background-color: var(--oceanic-noir);
        flex-direction: column;
        transform: translateX(100%);
        transition: transform 320ms var(--ease-drawer);
        z-index: 1000;
        will-change: transform;
    }

.nav-links::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(23, 43, 54, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 320ms var(--ease-drawer);
        z-index: -1;
    }

.nav-links.active::before {
        opacity: 1;
        pointer-events: auto;
    }

.nav-links.active {
        transform: translateX(0);
    }

.nav-links.is-instant {
        transition: none;
    }

.nav-links.is-instant::before {
        transition: none;
    }

.nav-links ul {
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 24px;
        height: 100%;
        margin: 0;
        padding: 64px 20px 32px;
        text-align: left;
    }

.nav-links ul li {
        font-size: 20px;
        color: var(--arctic-powder);
        text-decoration: none;
        width: 100%;
        margin: 0;
    }

    .nav-links .nav-dropdown__caret {
        display: none;
    }

    .nav-links ul > li.ent-nav-cta-item {
        margin-top: auto;
        padding-top: 16px;
    }

.faq-title {
        font-size: 28px;
    }

.faq-item {
        font-size: 12px;
        width: 85%;
        align-items: center;
        margin: 0 auto;
        
    }

.terms h1, .privacypolicy h1 {
        margin-top: 30%;
    }
}

/* ========================================
   Blog Index & Blog Post Styles
   ======================================== */

.blog-index, .blog-post {
    padding-top: 14vh;
}

/* Blog Index Header */

.blog-index-header {
    padding: 72px 6% 52px;
    text-align: center;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(17, 76, 90, 0.12) 0%, transparent 70%);
}

.blog-index-header-inner {
    max-width: 760px;
    margin: 0 auto;
}

.blog-index-header h1 {
    font-family: var(--font-headline);
    font-size: 3.2rem;
    font-weight: 400;
    color: var(--oceanic-noir);
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.blog-index-header h1 .blog-heading-gradient {
    color: var(--nocturnal-expedition);
}

.blog-index-header p {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--nocturnal-expedition);
    line-height: 1.7;
    max-width: 620px;
    margin: 0 auto;
}

/* Blog Category Cards */

.blog-categories {
    padding: 0 6% 80px;
}

.blog-categories-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.blog-category-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px 28px;
    background: var(--arctic-powder);
    border: 1px solid var(--mystic-mint);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform 100ms var(--ease-out), border-color 200ms ease;
    text-align: left;
}

.blog-category-card--lead {
    grid-column: 1 / -1;
    padding: 40px 32px;
    min-height: 240px;
}

.blog-category-card--lead .blog-category-card__name {
    font-size: 1.28rem;
}

@media screen and (min-width: 900px) {
    .blog-categories-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .blog-category-card--lead {
        grid-column: span 3;
    }

    .blog-category-card:not(.blog-category-card--lead) {
        grid-column: span 2;
    }
}

.blog-category-card:hover {
    box-shadow: 0 12px 32px rgba(23, 43, 54, 0.1);
    border-color: var(--nocturnal-expedition);
}

.blog-category-card__icon {
    font-size: 2rem;
    line-height: 1;
}

.blog-category-card__name {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--oceanic-noir);
    line-height: 1.3;
}

.blog-category-card__desc {
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--nocturnal-expedition);
    line-height: 1.5;
    flex: 1;
}

.blog-category-card__count {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--nocturnal-expedition);
}

.blog-filter-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 6% 32px;
    max-width: calc(1200px + 12%);
    margin: 0 auto;
}

.blog-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--oceanic-noir);
    background: none;
    border: 1.5px solid var(--mystic-mint);
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    transition: transform 100ms var(--ease-out), border-color 0.2s, color 0.2s;
    white-space: nowrap;
}

.blog-back-btn:hover {
    border-color: var(--nocturnal-expedition);
    color: var(--nocturnal-expedition);
}

.blog-filter-header h2 {
    font-family: var(--font-body);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--oceanic-noir);
}

/* Blog Index Grid */

.blog-index-posts {
    padding: 0 6% 80px;
}

.blog-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
}

.blog-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--arctic-powder);
    border: 1px solid var(--mystic-mint);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 100ms var(--ease-out);
}

.blog-card:hover {
    box-shadow: 0 12px 32px rgba(23, 43, 54, 0.1);
}

.blog-card-body {
    padding: 28px;
}

.blog-category-tag {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--oceanic-noir);
    background: var(--mystic-mint);
    padding: 4px 10px;
    border-radius: var(--radius-xs);
    margin-bottom: 12px;
}

.blog-card h2 {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--oceanic-noir);
    line-height: 1.4;
    margin-bottom: 10px;
}

.blog-card p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--nocturnal-expedition);
    line-height: 1.6;
    margin-bottom: 16px;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--nocturnal-expedition);
}

/* Blog Post Article */

.blog-article {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 6%;
}

.blog-header {
    padding: 48px 0 32px;
    border-bottom: 1px solid var(--mystic-mint);
    margin-bottom: 36px;
}

.blog-header-inner {
    max-width: 760px;
}

.blog-back-link {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--nocturnal-expedition);
    text-decoration: none;
    margin-bottom: 20px;
    transition: color 0.2s ease;
}

.blog-back-link:hover {
    color: var(--oceanic-noir);
}

.blog-article h1 {
    font-family: var(--font-headline);
    font-size: 2.4rem;
    font-weight: 400;
    color: var(--oceanic-noir);
    line-height: 1.25;
    margin-top: 12px;
    margin-bottom: 16px;
}

.blog-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--nocturnal-expedition);
    margin-top: 8px;
}

.blog-meta-sep {
    color: var(--mystic-mint);
}

/* Blog Author Byline */

.blog-author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
}

.blog-author-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.blog-author-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.blog-author-name {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--oceanic-noir);
}

.blog-author-name a {
    color: var(--oceanic-noir);
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-author-name a:hover {
    color: var(--nocturnal-expedition);
    text-decoration: underline;
}

.blog-author-role {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--nocturnal-expedition);
}

/* Blog Body Typography */

.blog-body {
    font-family: var(--font-body);
    font-size: 1.08rem;
    color: var(--oceanic-noir);
    line-height: 1.8;
}

.blog-body h2 {
    font-family: var(--font-body);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--oceanic-noir);
    margin-top: 48px;
    margin-bottom: 16px;
    line-height: 1.3;
}

.blog-body h3 {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--oceanic-noir);
    margin-top: 36px;
    margin-bottom: 12px;
    line-height: 1.35;
}

.blog-body p {
    margin-bottom: 20px;
}

.blog-body a:not(.blog-cta-btn) {
    color: var(--nocturnal-expedition);
    text-decoration: underline;
    text-decoration-color: rgba(17, 76, 90, 0.3);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.blog-body a:not(.blog-cta-btn):hover {
    color: var(--oceanic-noir);
    text-decoration-color: var(--oceanic-noir);
}

.blog-body ul, .blog-body ol {
    margin-bottom: 20px;
    padding-left: 24px;
}

.blog-body li {
    margin-bottom: 10px;
    line-height: 1.7;
}

.blog-body strong {
    font-weight: 700;
    color: var(--oceanic-noir);
}

.blog-body em {
    font-style: italic;
}

.blog-body blockquote {
    border-left: 4px solid var(--nocturnal-expedition);
    margin: 28px 0;
    padding: 16px 24px;
    background: var(--mystic-mint);
    border-radius: 0 8px 8px 0;
    color: var(--oceanic-noir);
    font-style: italic;
}

/* Blog CTA Box */

.blog-cta {
    background: var(--oceanic-noir);
    border-radius: 14px;
    padding: 36px 32px;
    margin: 40px 0;
    text-align: center;
}

.blog-cta h3 {
    font-family: var(--font-body);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--arctic-powder);
    margin-top: 0;
    margin-bottom: 10px;
}

.blog-cta p {
    font-family: var(--font-body);
    font-size: 0.98rem;
    color: var(--mystic-mint);
    line-height: 1.6;
    margin-bottom: 20px;
}

.blog-cta-btn {
    display: inline-block;
    padding: 14px 32px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--oceanic-noir);
    background: var(--forsythia);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: transform 100ms var(--ease-out), background-color 200ms ease;
}

.blog-cta-btn:hover {
    background: var(--deep-saffron);
    color: var(--oceanic-noir);
}

/* Blog Comparison Table */

.blog-comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 28px 0;
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.6;
}

.blog-comparison-table thead {
    background: var(--oceanic-noir);
    color: var(--arctic-powder);
}

.blog-comparison-table th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 700;
    font-size: 0.88rem;
}

.blog-comparison-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--mystic-mint);
    vertical-align: top;
}

.blog-comparison-table tbody tr:nth-child(even) {
    background: var(--mystic-mint);
}

.blog-comparison-table tbody tr:hover {
    background: rgba(17, 76, 90, 0.08);
}

/* Blog Related Posts */

.blog-related {
    background: var(--mystic-mint);
    padding: 60px 6%;
    margin-top: 60px;
}

.blog-related-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.blog-related h2 {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--oceanic-noir);
    margin-bottom: 28px;
    text-align: center;
}

.blog-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.blog-related-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--arctic-powder);
    border: 1px solid var(--mystic-mint);
    border-radius: 12px;
    padding: 24px;
    transition: transform 100ms var(--ease-out);
}

.blog-related-card:hover {
    box-shadow: 0 8px 24px rgba(23, 43, 54, 0.08);
}

.blog-related-card h3 {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--oceanic-noir);
    line-height: 1.4;
    margin-top: 10px;
    margin-bottom: 8px;
}

.blog-related-card p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--nocturnal-expedition);
    line-height: 1.6;
}

/* Blog Responsive — Tablet */

@media screen and (max-width: 768px)  {
.blog-index-header h1 {
        font-size: 2.2rem;
    }

.blog-categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

.blog-filter-header h2 {
        font-size: 1.3rem;
    }

.blog-index-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

.blog-article h1 {
        font-size: 1.8rem;
    }

.blog-body h2 {
        font-size: 1.35rem;
    }

.blog-body h3 {
        font-size: 1.1rem;
    }

.blog-comparison-table {
        font-size: 0.82rem;
    }

.blog-comparison-table th, .blog-comparison-table td {
        padding: 10px 10px;
    }

.blog-related-grid {
        grid-template-columns: 1fr;
    }

.blog-cta {
        padding: 28px 20px;
    }
}

/* Blog Responsive — Mobile */

@media screen and (max-width: 480px)  {
.blog-index-header {
        padding: 40px 5% 28px;
    }

.blog-index-header h1 {
        font-size: 1.8rem;
    }

.blog-categories-grid {
        grid-template-columns: 1fr;
    }

.blog-category-card--lead {
        grid-column: 1 / -1;
        padding: 28px 22px;
    }

.blog-categories {
        padding: 0 4% 60px;
    }

.blog-filter-header {
        padding: 0 4% 24px;
        flex-wrap: wrap;
    }

.blog-index-posts {
        padding: 0 4% 60px;
    }

.blog-card-body {
        padding: 20px;
    }

.blog-article {
        padding: 0 5%;
    }

.blog-article h1 {
        font-size: 1.5rem;
    }

.blog-body {
        font-size: 1rem;
    }

.blog-body h2 {
        font-size: 1.2rem;
        margin-top: 36px;
    }

.blog-comparison-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

.blog-cta h3 {
        font-size: 1.15rem;
    }

.blog-cta-btn {
        padding: 12px 24px;
        font-size: 0.95rem;
    }
}

@media (prefers-reduced-transparency: reduce)  {
nav {
        background-color: var(--oceanic-noir);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

.nav-links ul li.nav-dropdown .nav-dropdown__menu, .nav-dropdown__menu {
        background-color: var(--arctic-powder);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

.nav-links ul li.nav-dropdown .nav-dropdown__menu::before, .nav-dropdown__menu::before {
        background-color: var(--arctic-powder);
    }
}

/* =====================================================
   FOR TEAMS dropdown menu (site-wide)
   Desktop: hover + focus-within. Mobile drawer: nested.
   ===================================================== */

.nav-links ul li.nav-dropdown {
    position: relative;
    margin: 0;
    display: inline-flex;
    align-items: center;
}

.nav-dropdown__trigger {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--arctic-powder);
    text-decoration: none;
    text-align: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    -webkit-appearance: none;
    appearance: none;
    transition: transform 100ms var(--ease-out);
}

.nav-dropdown__trigger:hover, .nav-dropdown__trigger:focus, .nav-dropdown__trigger:focus-visible {
    color: var(--arctic-powder);
    background: transparent;
}

.nav-dropdown__caret {
    font-size: 0.85em;
    transition: transform 180ms var(--ease-out);
    display: inline-block;
}

.nav-dropdown:hover .nav-dropdown__caret, .nav-dropdown:focus-within .nav-dropdown__caret, .nav-dropdown__trigger[aria-expanded="true"] .nav-dropdown__caret {
    transform: rotate(180deg);
}

.nav-links ul li.nav-dropdown .nav-dropdown__menu, nav .nav-dropdown__menu, .nav-dropdown__menu {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    min-width: 240px;
    height: auto;
    margin: 0;
    padding: 10px;
    background-color: var(--arctic-powder);
    background-image: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--mystic-mint);
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transform-origin: top right;
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
    z-index: 1100;
}

.nav-dropdown__menu.is-instant {
    transition: none;
}

.nav-links ul li.nav-dropdown .nav-dropdown__menu::before, .nav-dropdown__menu::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 24px;
    width: 14px;
    height: 14px;
    background-color: rgba(241, 246, 244, 0.85);
    border-left: 1px solid var(--mystic-mint);
    border-top: 1px solid var(--mystic-mint);
    transform: rotate(45deg);
}

.nav-links ul li.nav-dropdown:hover .nav-dropdown__menu, .nav-links ul li.nav-dropdown:focus-within .nav-dropdown__menu, .nav-links ul li.nav-dropdown .nav-dropdown__trigger[aria-expanded="true"] + .nav-dropdown__menu, .nav-dropdown:hover .nav-dropdown__menu, .nav-dropdown:focus-within .nav-dropdown__menu, .nav-dropdown__trigger[aria-expanded="true"] + .nav-dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown__menu li {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    font-size: inherit !important;
}

.nav-dropdown__menu a {
    display: block;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--oceanic-noir);
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: background 0.18s ease, color 0.18s ease;
    white-space: nowrap;
}

.nav-dropdown__menu a:hover, .nav-dropdown__menu a:focus-visible {
    background: var(--mystic-mint);
    color: var(--oceanic-noir);
}

@media screen and (max-width: 768px)  {
.nav-links ul li.nav-dropdown {
        margin: 0;
        display: block;
    }

.nav-dropdown__trigger {
        font-size: 20px;
        padding: 0;
        cursor: default;
    }

.nav-dropdown__caret {
        display: none;
    }

.nav-dropdown__menu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 8px 0 0 12px;
        min-width: 0;
        gap: 6px;
    }

.nav-dropdown__menu::before {
        display: none;
    }

.nav-dropdown__menu a {
        padding: 6px 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--oceanic-noir);
        opacity: 0.85;
    }
}

.skip-link {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    z-index: 10000;
    padding: 0.55rem 0.9rem;
    background: var(--oceanic-noir);
    color: var(--arctic-powder);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-xs);
    transform: translateY(-180%);
}

.skip-link:focus {
    transform: none;
    outline: 2px solid var(--forsythia);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .blog-category-card:hover,
    .blog-cta-btn:hover,
    .blog-related-card:hover,
    .blog-related-card:active,
    .blog-card:hover,
    .blog-card:active,
    .blog-back-btn:active,
    .ent-cta:hover,
    .ent-cta--primary:hover,
    .ent-cta--ghost:hover,
    .ent-problem__q:hover,
    .ent-tab:hover,
    .ent-diff-card:hover,
    .ent-nav-cta:hover,
    .site-footer .footer-social a:hover {
        transform: none;
    }

    .blog-category-card,
    .blog-cta-btn,
    .blog-related-card,
    .blog-card,
    .blog-back-btn {
        transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease;
    }

    .nav-dropdown__menu {
        transform: none;
        transition: opacity 200ms ease;
    }

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

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

    .nav-links::before {
        transition: opacity 200ms ease;
    }
}

@media (hover: hover) and (pointer: fine) {
    .blog-category-card:hover { transform: translateY(-1px); }
    .blog-card:hover { transform: translateY(-1px); }
    .blog-cta-btn:hover { transform: translateY(-1px); }
    .blog-related-card:hover { transform: translateY(-1px); }
}

@media (hover: none), (pointer: coarse) {
    .blog-category-card:hover,
    .blog-cta-btn:hover,
    .blog-related-card:hover,
    .blog-card:hover {
        transform: none;
    }
}

/* ---- Press feedback ---- */
.blog-cta-btn:active,
.faq-question:active,
.blog-category-card:active,
.nav-dropdown__trigger:active,
.blog-card:active,
.blog-related-card:active,
.blog-back-btn:active {
    transform: scale(0.97);
    transition-duration: 160ms;
}

#blog-categories-section,
#blog-filtered-view {
    transition: opacity 200ms var(--ease-out);
}
/* =====================================================
   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: 44px;
    padding: 0 52px;
    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 {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 4px;
    background: none;
    border: none;
    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;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    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, 44px); }
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;
    }
}