/* Engagement family styles
   ----------------------------------------------------------------
   Shared by /pricing, /ai-adoption-audit, the three platform pages
   (/copilot-adoption, /gemini-adoption, /claude-implementation) and
   /events/. Same visual language as /hackathons-and-workshops and
   /curriculum-design (navy hero, soft-grey phase section,
   hairline-ruled entries, navy closing band) so the whole set reads
   as one. One file for the family instead of six near-identical
   copies. Class names namespaced `en-`.
*/

/* ----------------------------------------------------------------
   Shared atoms
   Everything sits on one left-aligned 960px column (--en-col). Narrower
   reading blocks keep their measure but start on that column's left
   edge rather than centring.
---------------------------------------------------------------- */

:root {
    --en-col: 960px;
}

/* Context label: plain sentence-case text, dark gold on white and gold
   on navy. Used sparingly (page context in heroes), not above every H2. */
.en-eyebrow,
.en-kicker {
    font-family: var(--font-label);
    font-size: 0.95rem;
    font-weight: var(--fw-semibold);
    color: #9a7426; /* gold darkened to pass contrast on white */
    margin: 0 0 0.75rem;
}

.en-section {
    padding: 6rem 0;
    background: var(--bg);
}

.en-section--subtle {
    background: var(--bg-subtle);
}

.en-section-header {
    max-width: var(--en-col);
    margin: 0 auto 3rem;
}

.en-section-header h2 {
    font-size: clamp(1.75rem, 3.2vw, 2.375rem);
    line-height: 1.15;
    letter-spacing: var(--ls-tight);
    margin-top: 0;
    margin-bottom: 1rem;
}

.en-section-intro {
    max-width: 60ch;
    font-size: 1.0625rem;
    color: var(--text-light);
    line-height: 1.7;
    margin: 0;
}

/* Inline links in running copy — navy with a quiet underline rule. */
.en-section-intro a,
.en-prose a,
.en-faq-item p a,
.en-rung-facts a,
.en-scenario p a,
.en-note a,
.en-guarantee a,
.en-stuck-foot p a,
.en-stuck-answer a {
    color: var(--navy);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(26, 43, 74, 0.3);
    transition: border-color 0.2s ease;
}

.en-section-intro a:hover,
.en-prose a:hover,
.en-faq-item p a:hover,
.en-rung-facts a:hover,
.en-scenario p a:hover,
.en-note a:hover,
.en-guarantee a:hover,
.en-stuck-foot p a:hover,
.en-stuck-answer a:hover {
    border-bottom-color: var(--navy);
}

/* Standalone "go somewhere" link — same treatment as the homepage
   footnote link. */
.en-link {
    display: inline-block;
    color: var(--navy);
    font-weight: var(--fw-semibold);
    font-size: 0.95rem;
    text-decoration: none;
    border-bottom: 2px solid var(--navy);
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.en-link:hover {
    color: var(--blue);
    border-bottom-color: var(--blue);
}

/* ----------------------------------------------------------------
   Hero
---------------------------------------------------------------- */

.en-hero {
    padding: 140px 0 80px;
    background-color: var(--navy);
    /* Signature navy surface, same as the homepage closing band. */
    background-image: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: white;
}

.en-hero-inner {
    max-width: var(--en-col);
    margin: 0 auto;
}

.en-hero .en-eyebrow {
    color: var(--gold);
}

.en-hero h1 {
    max-width: 20ch;
}

.en-hero h1 {
    color: white;
    font-size: 3.25rem;
    margin: 0 0 1.5rem;
}

.en-subhead {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1.375rem;
    line-height: 1.45;
    color: white;
    margin: 0 0 1.5rem;
    max-width: 680px;
}

.en-lead {
    font-size: 1.125rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 2.5rem;
    max-width: 62ch;
}

.en-lead em {
    font-style: italic;
}

.en-hero-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

/* The shared primary button is navy, which disappears on the navy hero. */
.en-hero .cta-button-primary {
    background: white;
    color: var(--navy);
}

.en-hero .cta-button-primary:hover {
    background: var(--gold);
    color: var(--navy);
}

.en-hero-cta-note {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* ----------------------------------------------------------------
   Guarantee panel (/pricing) — the one boxed element on the page, so
   it reads as distinct from the ruled entries below it.
---------------------------------------------------------------- */

.en-guarantee-section {
    padding: 4rem 0 0;
    background: var(--bg);
}

.en-guarantee {
    max-width: var(--en-col);
    margin: 0 auto;
    padding: 2.25rem 2.5rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 3px solid var(--navy);
}

.en-guarantee-lead {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.55;
    color: var(--navy);
    margin: 0 0 1rem;
}

.en-guarantee-lead strong {
    font-weight: 700;
}

.en-guarantee-small {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-light);
    margin: 0;
}

/* ----------------------------------------------------------------
   Engagement rungs (/pricing) — hairline-ruled entries, facts as a
   definition list.
---------------------------------------------------------------- */

.en-rungs {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: var(--en-col);
    border-bottom: 1px solid var(--line);
}

.en-rung {
    padding: 2.5rem 0;
    border-top: 1px solid var(--line);
    scroll-margin-top: 100px;
}

.en-rung--featured {
    border-top: 2px solid var(--navy);
}

.en-rung-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1.25rem;
    margin-bottom: 1.5rem;
}

.en-rung-head h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: 1.625rem;
    letter-spacing: var(--ls-tight);
    color: var(--navy);
}

.en-rung-flag {
    font-family: var(--font-label);
    font-size: 0.95rem;
    font-weight: var(--fw-semibold);
    color: #9a7426;
}

.en-rung-facts {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 0.9rem 1.5rem;
    margin: 0;
}

.en-rung-facts dt {
    font-family: var(--font-label);
    font-size: 0.9375rem;
    font-weight: var(--fw-semibold);
    color: var(--navy);
    padding-top: 0.05em;
}

.en-rung-facts dd {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
}

.en-rung-facts dd p {
    margin: 0 0 0.75rem;
}

.en-rung-facts dd p:last-child {
    margin-bottom: 0;
}

.en-rung-price {
    color: var(--navy) !important;
}

.en-rung-price strong {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: 1.125rem;
}

.en-stages {
    margin: 0.75rem 0 0;
    padding-left: 1.25rem;
}

.en-stages li {
    margin: 0 0 0.6rem;
    line-height: 1.7;
}

.en-stages li:last-child {
    margin-bottom: 0;
}

.en-stages strong {
    color: var(--navy);
}

/* ----------------------------------------------------------------
   Where are you stuck? (/pricing)
---------------------------------------------------------------- */

.en-stuck {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: var(--en-col);
    border-bottom: 1px solid var(--line);
}

.en-stuck li {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 0.5rem 2rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--line);
}

.en-stuck-problem {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--navy);
}

.en-stuck-answer {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
}

.en-stuck-answer::before {
    content: '→ ';
    font-family: var(--font-label);
    color: var(--gold);
}

.en-stuck-foot {
    max-width: var(--en-col);
    margin: 2.5rem auto 0;
}

.en-stuck-foot p {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--text);
    margin: 0 0 1.5rem;
    max-width: 640px;
}

/* ----------------------------------------------------------------
   Phases / steps — mirrors .hw-phase
---------------------------------------------------------------- */

.en-phase-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: var(--en-col);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.en-phase {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 1.75rem;
    border-top: 1px solid var(--line);
    padding: 2.25rem 0.25rem;
    align-items: start;
}

.en-phase-number {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 3rem;
    line-height: 1;
    color: var(--blue);
    letter-spacing: -0.02em;
}

.en-phase-body h3 {
    font-size: 1.375rem;
    margin: 0 0 0.75rem;
    color: var(--navy);
}

.en-phase-body p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text);
    margin: 0;
}

/* ----------------------------------------------------------------
   Scenarios (/pricing) — three ruled entries
---------------------------------------------------------------- */

.en-scenarios {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
    max-width: var(--en-col);
    margin: 0 auto;
}

.en-scenario {
    border-top: 1px solid var(--line);
    padding-top: 1.75rem;
}

.en-scenario h3 {
    font-size: 1.25rem;
    color: var(--navy);
    margin: 0 0 0.75rem;
}

.en-scenario p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text);
    margin: 0;
}

.en-note {
    max-width: 62ch;
    margin-top: 3rem;
    margin-left: max(0px, calc((100% - var(--en-col)) / 2));
    margin-right: auto;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-light);
}

/* ----------------------------------------------------------------
   Prose sections (platform pages)
---------------------------------------------------------------- */

.en-prose {
    max-width: 760px;
    margin-left: max(0px, calc((100% - var(--en-col)) / 2));
    margin-right: auto;
}

.en-prose h2 {
    font-size: clamp(1.75rem, 3.2vw, 2.375rem);
    line-height: 1.15;
    letter-spacing: var(--ls-tight);
    margin: 0 0 1.25rem;
}

.en-prose p {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--text);
    margin: 0 0 1.25rem;
}

.en-prose p:last-child {
    margin-bottom: 0;
}

.en-prose + .en-prose {
    margin-top: 4rem;
    padding-top: 4rem;
    border-top: 1px solid var(--line);
}

.en-proof-line {
    margin-top: 2rem !important;
}

/* ----------------------------------------------------------------
   Platform playbook blocks (/copilot-adoption, /gemini-adoption,
   /claude-implementation, /chatgpt-adoption)
---------------------------------------------------------------- */

.en-block {
    max-width: var(--en-col);
    margin: 0 auto;
}

.en-prose + .en-block,
.en-block + .en-block,
.en-block + .en-prose {
    margin-top: 4rem;
    padding-top: 4rem;
    border-top: 1px solid var(--line);
}

.en-block h2 {
    font-size: clamp(1.75rem, 3.2vw, 2.375rem);
    line-height: 1.15;
    letter-spacing: var(--ls-tight);
    margin: 0 0 1.5rem;
}

.en-block > p {
    max-width: 62ch;
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--text);
    margin: 0 0 1.25rem;
}

.en-block > p:last-child {
    margin-bottom: 0;
}

.en-block .en-list {
    margin-bottom: 1.5rem;
}

/* the next block's top rule does the separating */
.en-block > .en-list:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}

.en-block > .en-list:last-child li:last-child {
    padding-bottom: 0;
}

.en-usecases tbody tr:last-child > * {
    border-bottom: 0;
}

.en-list a {
    color: var(--navy);
    text-decoration: none;
    border-bottom: 1px solid rgba(26, 43, 74, 0.3);
}

.en-list a:hover {
    border-bottom-color: var(--navy);
}

/* Use cases: a table on desktop, stacked cards on phones */
.en-usecases {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.975rem;
    line-height: 1.6;
}

.en-usecases th,
.en-usecases td {
    text-align: left;
    vertical-align: top;
    padding: 1rem 1.25rem 1rem 0;
    border-bottom: 1px solid var(--line);
}

.en-usecases thead th {
    font-family: var(--font-label);
    font-size: 0.9375rem;
    font-weight: var(--fw-semibold);
    color: var(--navy);
    border-bottom: 2px solid var(--navy);
    padding-top: 0;
}

.en-usecases tbody th {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    color: var(--navy);
    width: 16%;
}

.en-usecases td {
    color: var(--text);
}

.en-usecases td:last-child {
    color: var(--text-light);
    width: 22%;
}

/* Illustrative scenario: labelled, and boxed so it can't be mistaken
   for client work */
.en-illustration-label {
    font-family: var(--font-label);
    font-size: 0.95rem;
    font-weight: var(--fw-semibold);
    color: #9a7426;
    margin: 0 0 0.6rem !important;
}

.en-illustration {
    max-width: 760px;
    padding: 1.75rem 2rem;
    background: var(--paper);
    border: 1px dashed rgba(26, 43, 74, 0.35);
}

.en-illustration p {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--text);
}

/* Also see + last reviewed, above the footer */
.en-also {
    padding: 2.5rem 0 3rem;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}

.en-also-inner {
    max-width: var(--en-col);
    margin: 0 auto;
}

.en-also-label {
    font-family: var(--font-label);
    font-size: 0.95rem;
    font-weight: var(--fw-semibold);
    color: var(--navy);
    margin: 0 0 0.75rem;
}

.en-reviewed {
    margin: 1.75rem 0 0;
    font-size: 0.875rem;
    color: var(--text-light);
}

/* Platform name chip in the navy hero */
.en-hero .en-eyebrow .name-chip {
    border-color: transparent;
}

/* ----------------------------------------------------------------
   Lists (/ai-adoption-audit)
---------------------------------------------------------------- */

.en-list {
    list-style: none;
    padding: 0;
    max-width: 760px;
    margin-left: max(0px, calc((100% - var(--en-col)) / 2));
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--line);
}

.en-list li {
    position: relative;
    padding: 1.1rem 0 1.1rem 2rem;
    border-top: 1px solid var(--line);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text);
}

.en-list li::before {
    content: '';
    position: absolute;
    left: 0.25rem;
    top: 2.05rem;
    width: 0.75rem;
    height: 2px;
    background: var(--gold);
}

.en-list strong {
    color: var(--navy);
}

/* ----------------------------------------------------------------
   Price panel (/ai-adoption-audit) — figure lives on /pricing only
---------------------------------------------------------------- */

.en-price-panel {
    max-width: 760px;
    margin-left: max(0px, calc((100% - var(--en-col)) / 2));
    margin-right: auto;
    padding: 2rem 0;
    border-top: 2px solid var(--navy);
    border-bottom: 1px solid var(--line);
}

.en-price-panel h2 {
    font-size: 1.875rem;
    margin: 0 0 1rem;
}

.en-price-panel p {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--text);
    margin: 0 0 1.25rem;
}

/* ----------------------------------------------------------------
   FAQ — mirrors .hw-faq-item
---------------------------------------------------------------- */

.en-faq-list {
    max-width: var(--en-col);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 3rem;
}

.en-faq-item {
    border-top: 1px solid var(--line);
    padding-top: 1.5rem;
}

.en-faq-item h3 {
    font-size: 1.125rem;
    line-height: 1.35;
    margin: 0 0 0.75rem;
    color: var(--navy);
    text-wrap: balance;
}

.en-faq-item p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text);
    margin: 0;
}

/* ----------------------------------------------------------------
   Event card (/events/)
---------------------------------------------------------------- */

.en-event {
    max-width: var(--en-col);
    margin: 0 auto;
    padding: 2.5rem 0;
    border-top: 2px solid var(--navy);
    border-bottom: 1px solid var(--line);
}

.en-event h3 {
    font-family: var(--font-display);
    font-size: 1.625rem;
    letter-spacing: var(--ls-tight);
    color: var(--navy);
    margin: 0 0 0.75rem;
}

.en-event-line {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--text);
    margin: 0 0 1.5rem;
}

.en-event-details {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.en-event-details li {
    font-family: var(--font-label);
    font-size: 0.9375rem;
    font-weight: var(--fw-semibold);
    color: var(--text-light);
}

/* ----------------------------------------------------------------
   Closing CTA — mirrors .hw-closing
---------------------------------------------------------------- */

.en-closing {
    padding: 6rem 0;
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
}

.en-closing-inner {
    max-width: var(--en-col);
    margin: 0 auto;
}

.en-closing-inner h2 {
    color: white;
    font-size: clamp(1.75rem, 3.2vw, 2.375rem);
    line-height: 1.15;
    letter-spacing: var(--ls-tight);
    max-width: 22ch;
    margin: 0 0 1.25rem;
}

.en-closing-lead {
    max-width: 58ch;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.0625rem;
    line-height: 1.75;
    margin: 0 0 2rem;
}

.en-closing-note {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    margin: 1.25rem 0 0;
}

.en-closing-note a {
    color: white;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.en-closing-note a:hover {
    border-bottom-color: white;
}

/* ----------------------------------------------------------------
   Responsive
---------------------------------------------------------------- */

@media (max-width: 900px) {
    .en-scenarios {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .en-hero {
        padding: 110px 0 60px;
    }

    .en-hero h1 {
        font-size: 2.25rem;
    }

    .en-subhead {
        font-size: 1.125rem;
    }

    .en-lead {
        font-size: 1rem;
        line-height: 1.7;
    }

    .en-section,
    .en-closing {
        padding: 4rem 0;
    }

    .en-guarantee-section {
        padding-top: 3rem;
    }

    .en-guarantee {
        padding: 1.75rem 1.5rem;
    }

    .en-guarantee-lead {
        font-size: 1.0625rem;
    }

    .en-section-header {
        margin-bottom: 2.5rem;
    }

    .en-section-header h2,
    .en-prose h2 {
        font-size: 1.625rem;
    }

    .en-rung {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.25rem;
        padding: 2rem 0;
    }

    .en-rung-head h3 {
        font-size: 1.375rem;
    }

    .en-rung-facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.25rem;
    }

    .en-rung-facts dt {
        margin-top: 0.75rem;
    }

    .en-stuck li {
        grid-template-columns: 1fr;
    }

    .en-phase {
        grid-template-columns: 1fr;
        padding: 1.75rem 0.25rem;
        gap: 0.75rem;
    }

    .en-phase-number {
        font-size: 2.25rem;
    }

    .en-phase-body h3 {
        font-size: 1.2rem;
    }

    .en-prose + .en-prose {
        margin-top: 3rem;
        padding-top: 3rem;
    }

    .en-faq-list {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .en-prose + .en-block,
    .en-block + .en-block,
    .en-block + .en-prose {
        margin-top: 3rem;
        padding-top: 3rem;
    }

    .en-usecases thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .en-usecases,
    .en-usecases tbody,
    .en-usecases tr,
    .en-usecases th,
    .en-usecases td {
        display: block;
        width: auto !important;
    }

    .en-usecases tr {
        padding: 1.25rem 0;
        border-top: 1px solid var(--line);
    }

    .en-usecases tr:last-child {
        padding-bottom: 0;
    }

    .en-usecases th,
    .en-usecases td {
        padding: 0.2rem 0;
        border: 0;
    }

    .en-usecases tbody th {
        font-size: 1.0625rem;
        margin-bottom: 0.35rem;
    }

    .en-usecases td::before {
        content: attr(data-label) ": ";
        font-weight: var(--fw-semibold);
        color: var(--navy);
    }

    .en-illustration {
        padding: 1.25rem 1.25rem;
    }

    .en-closing-inner h2 {
        font-size: 1.625rem;
    }
}

@media (max-width: 480px) {
    .en-hero {
        padding: 100px 0 50px;
    }

    .en-hero h1 {
        font-size: 1.875rem;
    }

    .en-section-header h2,
    .en-prose h2 {
        font-size: 1.375rem;
    }
}

/* ----------------------------------------------------------------
   Platform diagrams (/copilot-adoption, /gemini-adoption,
   /claude-implementation, /chatgpt-adoption)
   Three shared figures: the workflow rail (.en-flow), the route
   timeline (.en-route) and the dashboards-vs-baseline comparison
   (.en-measure). All plain HTML, so crawlers and screen readers get
   the text. Motion is one-shot: js/platform.js adds .is-staged to
   figures that start below the fold, then .is-in when they scroll
   into view. Without JS, or with reduced motion, they render in their
   final state.
---------------------------------------------------------------- */

/* "What's already in your licence" as ruled tiles */
.en-list--grid {
    max-width: var(--en-col);
    margin-left: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 2.5rem;
    border-bottom: 0;
}

.en-list--grid li {
    padding: 1.5rem 0 1.75rem;
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
}

.en-list--grid li::before {
    top: -1px;
    left: 0;
    width: 2rem;
}

.en-list--grid strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: var(--fw-bold);
    margin-bottom: 0.4rem;
}

/* Workflow rail: context → draft → a person decides → measured */
.en-flow {
    list-style: none;
    padding: 0;
    margin: 2.75rem 0 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 2rem;
}

.en-flow-step {
    position: relative;
    padding-top: 2.25rem;
    margin: 0;
}

/* node */
.en-flow-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--navy);
    background: var(--bg);
    z-index: 1;
}

/* rail to the next node */
.en-flow-step::after {
    content: '';
    position: absolute;
    top: 7px;
    left: 16px;
    right: -2rem;
    height: 2px;
    background: var(--gold);
    transform-origin: left center;
}

.en-flow-step:last-child::after {
    display: none;
}

.en-flow-step--person::before {
    background: var(--navy);
    box-shadow: 0 0 0 5px rgba(212, 168, 75, 0.35);
}

.en-flow-step h3 {
    font-size: 1.125rem;
    line-height: 1.3;
    color: var(--navy);
    margin: 0 0 0.5rem;
}

.en-flow-step p {
    font-size: 0.975rem;
    line-height: 1.65;
    color: var(--text);
    margin: 0;
}

/* Route: a week-scaled timeline of engagements and check-ins */
.en-route {
    --weeks: 18;
    --label-w: 14rem;
    --route-gap: 2rem;
    margin-top: 2.5rem;
}

.en-route-scale {
    position: relative;
    height: 1.75rem;
    margin-left: calc(var(--label-w) + var(--route-gap));
    border-bottom: 2px solid var(--navy);
}

.en-route-scale span {
    position: absolute;
    left: calc(var(--at) / var(--weeks) * 100%);
    bottom: 0.4rem;
    font-family: var(--font-label);
    font-size: 0.8125rem;
    font-weight: var(--fw-semibold);
    color: var(--text-light);
    white-space: nowrap;
}

.en-route-scale span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.4rem;
    width: 1px;
    height: 0.4rem;
    background: var(--navy);
}

/* last label hangs left of its tick so it never overruns the column */
.en-route-scale span:last-child {
    left: auto;
    right: calc((var(--weeks) - var(--at)) / var(--weeks) * 100%);
}

.en-route-scale span:last-child::after {
    left: auto;
    right: 0;
}

.en-route-rows {
    list-style: none;
    padding: 0;
    margin: 0;
}

.en-route-row {
    display: grid;
    grid-template-columns: var(--label-w) minmax(0, 1fr);
    grid-template-areas:
        "label track"
        "label desc";
    column-gap: var(--route-gap);
    padding: 1.25rem 0;
    margin: 0;
    border-bottom: 1px solid var(--line);
}

.en-route-label {
    grid-area: label;
}

.en-route-label h3 {
    font-size: 1.0625rem;
    line-height: 1.3;
    color: var(--navy);
    margin: 0 0 0.2rem;
}

.en-route-when {
    font-family: var(--font-label);
    font-size: 0.875rem;
    font-weight: var(--fw-semibold);
    color: #9a7426;
    margin: 0;
}

.en-route-track {
    grid-area: track;
    position: relative;
    height: 12px;
    margin: 0.35rem 0 0.9rem;
    background: linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat;
}

.en-route-bar {
    position: absolute;
    top: 0;
    left: calc(var(--start) / var(--weeks) * 100%);
    width: calc(var(--span) / var(--weeks) * 100%);
    height: 100%;
    background: var(--navy);
    border-radius: 2px;
    transform-origin: left center;
}

/* the later work depends on what the Audit finds, so it's drawn open */
.en-route-row--open .en-route-bar {
    background: var(--bg);
    border: 2px solid var(--navy);
}

.en-route-dot {
    position: absolute;
    top: 50%;
    left: calc(var(--at) / var(--weeks) * 100%);
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--gold);
    border: 2px solid var(--navy);
}

.en-route-desc {
    grid-area: desc;
    font-size: 0.975rem;
    line-height: 1.65;
    color: var(--text);
    margin: 0;
    max-width: 58ch;
}

.en-route-note {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-light);
    margin: 1rem 0 0;
    max-width: 62ch;
}

/* Dashboards vs baseline */
.en-measure {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4.5rem minmax(0, 1fr);
    align-items: stretch;
    margin-top: 2.5rem;
}

.en-measure-col {
    padding: 1.75rem 2rem 2rem;
    background: var(--paper);
    border: 1px solid var(--line);
}

.en-measure-col--ours {
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
    border: 0;
    border-top: 3px solid var(--gold);
    color: white;
}

.en-measure-col h3 {
    font-size: 1.1875rem;
    color: var(--navy);
    margin: 0 0 0.25rem;
}

.en-measure-sub {
    font-size: 0.95rem;
    color: var(--text-light);
    margin: 0 0 1.25rem;
}

.en-measure-col ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.en-measure-col li {
    position: relative;
    padding: 0.6rem 0 0.6rem 1.5rem;
    margin: 0;
    border-top: 1px solid var(--line);
    font-size: 0.975rem;
    line-height: 1.5;
}

.en-measure-col li::before {
    content: '';
    position: absolute;
    left: 0.1rem;
    top: 1.25rem;
    width: 0.6rem;
    height: 2px;
    background: var(--text-light);
}

.en-measure-verdict {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: 1rem;
    color: var(--navy);
    margin: 0;
}

.en-measure-col--ours h3,
.en-measure-col--ours .en-measure-verdict {
    color: white;
}

.en-measure-col--ours .en-measure-sub {
    color: rgba(255, 255, 255, 0.7);
}

.en-measure-col--ours li {
    color: rgba(255, 255, 255, 0.92);
    border-top-color: rgba(255, 255, 255, 0.15);
}

.en-measure-col--ours li::before {
    background: var(--gold);
}

.en-measure-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}

.en-measure-arrow svg {
    width: 3rem;
    height: 1.5rem;
    overflow: visible;
}

.en-measure-arrow path {
    fill: none;
    stroke: var(--gold);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Motion ---- */

.is-staged .en-flow-step,
.is-staged .en-route-row,
.is-staged .en-measure-col {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.is-staged .en-flow-step::after {
    transform: scaleX(0);
    transition: transform 0.45s var(--ease);
}

.is-staged .en-route-bar {
    transform: scaleX(0);
    transition: transform 0.7s var(--ease);
}

.is-staged .en-route-dot {
    transform: scale(0);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.is-staged .en-measure-arrow path {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    transition: stroke-dashoffset 0.5s var(--ease);
}

.is-staged.is-in .en-flow-step,
.is-staged.is-in .en-route-row,
.is-staged.is-in .en-measure-col {
    opacity: 1;
    transform: none;
}

.is-staged.is-in .en-flow-step::after,
.is-staged.is-in .en-route-bar,
.is-staged.is-in .en-route-dot {
    transform: none;
}

.is-staged.is-in .en-measure-arrow path {
    stroke-dashoffset: 0;
}

/* stagger: each step lands, then its rail draws to the next */
.en-flow-step:nth-child(2) { transition-delay: 0.45s; }
.en-flow-step:nth-child(3) { transition-delay: 0.9s; }
.en-flow-step:nth-child(4) { transition-delay: 1.35s; }
.en-flow-step:nth-child(1)::after { transition-delay: 0.2s; }
.en-flow-step:nth-child(2)::after { transition-delay: 0.65s; }
.en-flow-step:nth-child(3)::after { transition-delay: 1.1s; }

.en-route-row:nth-child(2) { transition-delay: 0.15s; }
.en-route-row:nth-child(3) { transition-delay: 0.3s; }
.en-route-row:nth-child(4) { transition-delay: 0.45s; }
.en-route-row:nth-child(5) { transition-delay: 0.6s; }
.en-route-row:nth-child(6) { transition-delay: 0.75s; }
.en-route-row:nth-child(1) .en-route-bar { transition-delay: 0.2s; }
.en-route-row:nth-child(2) .en-route-bar { transition-delay: 0.45s; }
.en-route-row:nth-child(3) .en-route-dot { transition-delay: 0.75s; }
.en-route-row:nth-child(4) .en-route-dot { transition-delay: 0.9s; }
.en-route-row:nth-child(5) .en-route-bar { transition-delay: 1.05s; }
.en-route-row:nth-child(6) .en-route-dot { transition-delay: 1.4s; }

.en-measure-arrow path { transition-delay: 0.35s; }
.en-measure-col--ours { transition-delay: 0.6s; }

@media (prefers-reduced-motion: reduce) {
    .is-staged .en-flow-step,
    .is-staged .en-route-row,
    .is-staged .en-measure-col,
    .is-staged .en-flow-step::after,
    .is-staged .en-route-bar,
    .is-staged .en-route-dot,
    .is-staged .en-measure-arrow path {
        opacity: 1;
        transform: none;
        stroke-dashoffset: 0;
        transition: none;
    }
}

@media (max-width: 900px) {
    .en-list--grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .en-route {
        --label-w: 11rem;
    }
}

@media (max-width: 768px) {
    .en-list--grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .en-list--grid li {
        padding: 1.1rem 0 1.25rem;
    }

    /* rail turns vertical */
    .en-flow {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 2rem;
    }

    .en-flow-step {
        padding: 0 0 1.75rem 2.25rem;
    }

    .en-flow-step:last-child {
        padding-bottom: 0;
    }

    .en-flow-step::before {
        top: 0.2rem;
    }

    .en-flow-step::after {
        top: calc(0.2rem + 16px);
        left: 7px;
        right: auto;
        bottom: 0;
        width: 2px;
        height: auto;
        transform-origin: center top;
    }

    .is-staged .en-flow-step::after {
        transform: scaleY(0);
    }

    .en-route-scale {
        margin-left: 0;
    }

    .en-route-scale span:nth-child(even) {
        display: none;
    }

    .en-route-row {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "label"
            "track"
            "desc";
        padding: 1.1rem 0;
    }

    .en-route-track {
        margin: 0.75rem 0;
    }

    .en-measure {
        grid-template-columns: minmax(0, 1fr);
    }

    .en-measure-col {
        padding: 1.5rem 1.25rem 1.5rem;
    }

    .en-measure-arrow {
        height: 3.5rem;
    }

    .en-measure-arrow svg {
        transform: rotate(90deg);
    }
}

/* ----------------------------------------------------------------
   Meta pages (/meta-business-agent, /meta-muse)
---------------------------------------------------------------- */

/* Side-by-side comparison: both value columns carry equal weight */
.en-usecases--compare tbody th {
    width: 24%;
}

.en-usecases--compare td,
.en-usecases--compare td:last-child {
    width: 38%;
    color: var(--text);
}

.en-block .en-usecases + p {
    margin-top: 1.5rem;
}

/* Numbered steps: a real sequence, so numbers replace the gold dash */
.en-list--steps {
    counter-reset: en-step;
}

.en-list--steps li {
    counter-increment: en-step;
    padding-left: 2.5rem;
}

.en-list--steps li::before {
    content: counter(en-step, decimal-leading-zero);
    top: 1.1rem;
    left: 0;
    width: auto;
    height: auto;
    background: none;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: var(--fw-semibold);
    line-height: 1.75;
    color: #9a7426;
}