/* 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 grid 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
---------------------------------------------------------------- */

.en-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue);
    margin: 0 0 0.75rem;
}

.en-kicker {
    font-family: var(--font-mono);
    font-size: var(--fs-tiny);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--navy);
    margin: 0 0 0.75rem;
}

.en-kicker .mark,
.en-rung-flag .mark {
    color: var(--gold);
}

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

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

.en-section-header {
    max-width: 760px;
    margin: 0 auto 3.5rem;
    text-align: center;
}

.en-section-header h2 {
    font-size: 2.25rem;
    margin-top: 0;
    margin-bottom: 1rem;
}

.en-section-intro {
    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 — 56px grid, same as the homepage
       closing band and the OG cards. No soft washes. */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
    background-size: 56px 56px, 56px 56px, auto;
    color: white;
}

.en-hero-inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.en-hero .en-eyebrow {
    color: rgba(255, 255, 255, 0.7);
}

.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 auto 1.5rem;
    max-width: 680px;
}

.en-lead {
    font-size: 1.125rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 auto 2.5rem;
    max-width: 740px;
    text-align: left;
}

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

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

.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: 880px;
    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, gold mono
   numeral, facts as a definition list.
---------------------------------------------------------------- */

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

.en-rung {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: 2rem;
    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-num {
    font-family: var(--font-mono);
    font-size: var(--fs-tiny);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    color: var(--gold);
    line-height: 2.6;
}

.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-mono);
    font-size: var(--fs-tiny);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--navy);
}

.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-mono);
    font-size: var(--fs-tiny);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-light);
    padding-top: 0.3em;
}

.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: 960px;
    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-mono);
    color: var(--gold);
}

.en-stuck-foot {
    max-width: 960px;
    margin: 2.5rem auto 0;
    text-align: center;
}

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

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

.en-phase-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 880px;
    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: 1040px;
    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: 760px;
    margin: 3rem auto 0;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-light);
}

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

.en-prose {
    max-width: 760px;
    margin: 0 auto;
}

.en-prose h2 {
    font-size: 2rem;
    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;
}

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

.en-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 760px;
    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: 1.3rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: 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: 0 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: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.en-faq-item {
    background: var(--bg-subtle);
    border: 1px solid rgba(15, 31, 51, 0.06);
    border-radius: 12px;
    padding: 2rem 2.25rem;
}

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

.en-faq-item h3 {
    font-size: 1.125rem;
    margin: 0 0 0.75rem;
    color: var(--navy);
}

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

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

.en-event {
    max-width: 880px;
    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-mono);
    font-size: var(--fs-tiny);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-light);
}

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

.en-closing {
    padding: 6rem 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
    background-size: 56px 56px, 56px 56px, auto;
}

.en-closing-inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.en-closing-inner h2 {
    color: white;
    font-size: 2rem;
    margin: 0 0 1.25rem;
}

.en-closing-lead {
    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-num {
        line-height: 1.5;
    }

    .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-item {
        padding: 1.5rem;
    }

    .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;
    }

    .en-faq-item {
        padding: 1.5rem 1.25rem;
    }
}