/* ============================================================================
   Courses4Horses — landing page styles
   ----------------------------------------------------------------------------
   Depends on the brand system already being loaded ahead of this file:
     - _variables.scss   (defines the $c4h-* SCSS tokens)
     - bootstrap         (compiled with the brand variable overrides)
     - _brand.scss       (defines .eyebrow, .tag, .stats, .testimonial,
                          .hero-pill, .region-pills, .section-num, .principle,
                          form-action utilities, etc.)
     - c4h-theme.scss    (scopes everything under body.c4h: typography scale,
                          button shape, form-control styling, em-in-headings)

   What this file owns:
     - Page-specific layout tokens (--content-max-w, content padding,
       section padding, the pull-testimonial shadow)
     - Landing-page wrappers and grids (.wrap, .hero, .grid, .two, .modules,
       .feat, .aud, .tr, .foot-cta, footer)
     - Contextual overrides where a brand component sits inside a coloured
       background (the eyebrow inside .diff, the section-num inside the dark
       foot-cta, the form-control inside .perk on the dark slab)

   What this file no longer owns (handed off to the brand system):
     - All colour, type, and surface tokens
     - .eyebrow, .italic, .rule-label, .btn, .lead, .tag, .testimonial,
       .stats / .stat / .num / .label, .region-pills / .region-pill,
       .section-num, .hero-pill, .form-control, alerts
     - Heading scale (h1-h6 are now sized by c4h-theme.scss)
     - section.alt (now .c4h-alt, provided by brand)

   The body element must have class="c4h" for this page to pick up the
   brand system. See base template.
   ============================================================================ */

:root {
    /* Landing-page-only layout tokens. Everything else lives in _variables.scss. */
    --content-max-w: 1180px;
    --content-pad-x: 64px;
    --section-pad-y: 120px;
    --shadow-pull:   0 14px 36px -16px rgba(0, 0, 0, .18);
}


/* ============================================================================
   Minimal reset
   c4h-theme.scss sets body background, color, font-family. We just
   normalise margins and bullets.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img, svg { display: block; max-width: 100%; }


/* ============================================================================
   Shared layout
   ============================================================================ */

.wrap {
    max-width: var(--content-max-w);
    margin: 0 auto;
    padding: 0 var(--content-pad-x);
}


/* ============================================================================
   Nav (header layout — bespoke, not the app's topnav)
   ============================================================================ */

header.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px var(--content-pad-x);
    border-bottom: 1px solid var(--c4h-rule);
    background: var(--c4h-page);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.1;
}
.brand .mark {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--c4h-ink);
    position: relative;
}
.brand .mark::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--c4h-accent);
}
.brand .sub {
    font-weight: 400;
    font-style: italic;
    color: var(--c4h-ink-soft);
    font-size: 13px;
}

nav.links {
    display: flex;
    gap: 36px;
    font-size: 14px;
    font-weight: 500;
}
nav.links a { color: var(--c4h-ink); }
nav.links a:hover { color: var(--c4h-accent); }

.nav-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}
.nav-actions .signin {
    font-size: 14px;
    font-weight: 500;
    color: var(--c4h-ink-soft);
}
.nav-actions .signin:hover { color: var(--c4h-accent); }

/* Mobile-only sticky in-page nav (see media query below) */
.section-strip { display: none; }


/* ============================================================================
   Hero
   ============================================================================ */

.hero { padding: 88px var(--content-pad-x) 96px; }

.hero .grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 72px;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
}

.hero p.lead {
    margin: 32px 0 36px;
    max-width: 520px;
    text-wrap: pretty;
}

.capture {
    display: flex;
    gap: 8px;
    max-width: 480px;
    margin-top: 24px;
}


/* ============================================================================
   Image slot (placeholder for hero/contributor photos)
   ============================================================================ */

.slot {
    background:
        repeating-linear-gradient(135deg, rgba(13, 31, 28, .06) 0 12px, rgba(13, 31, 28, .03) 12px 24px),
        var(--c4h-section-alt);
    border-radius: var(--c4h-r-md);
    position: relative;
    overflow: hidden;
}
.slot .cap {
    position: absolute;
    left: 14px; bottom: 14px;
    font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    font-size: 10px;
    letter-spacing: .02em;
    color: var(--c4h-ink-muted);
    background: rgba(255, 255, 255, .85);
    padding: 4px 7px;
    border-radius: 2px;
    max-width: 92%;
    line-height: 1.4;
}
.hero .slot { height: 560px; }


/* ============================================================================
   .pull — positioning only. Visual styling comes from brand .testimonial.
   The template uses class="testimonial pull" on the hero quote.
   ============================================================================ */

.pull {
    position: absolute;
    bottom: -28px;
    left: -32px;
    max-width: 280px;
    box-shadow: var(--shadow-pull);
}


/* ============================================================================
   Section base layout
   c4h-theme.scss sizes h1-h6. We only own padding/borders/backgrounds.
   ============================================================================ */

section {
    padding: var(--section-pad-y) var(--content-pad-x);
    border-top: 1px solid var(--c4h-rule);
    background: var(--c4h-page);
}


/* ----- Problem (section 01) ----- */

.two {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 100px;
}

.moments .row {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid var(--c4h-rule);
}
.moments .row:last-child { border-bottom: 1px solid var(--c4h-rule); }
.moments .row .n {
    font-size: 12px;
    color: var(--c4h-accent);
    font-weight: 700;
    letter-spacing: .06em;
    padding-top: 2px;
}
.moments .row .t {
    font-size: 16px;
    line-height: 1.55;
    text-wrap: pretty;
}


/* ----- The course (section 02) ----- */

.cur-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 56px;
}
.cur-head .hint {
    font-size: 13px;
    color: var(--c4h-ink-soft);
    letter-spacing: .04em;
    padding-bottom: 8px;
}

.modules {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--c4h-rule);
    border-radius: var(--c4h-r-md);
    overflow: hidden;
}
.mod {
    padding: 28px 32px;
    background: var(--c4h-paper);
    border-bottom: 1px solid var(--c4h-rule);
}
.mod:nth-child(odd) { border-right: 1px solid var(--c4h-rule); }
.modules .mod:nth-last-child(-n+2) { border-bottom: none; }
.modules .mod:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--c4h-rule); }

.mod .head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 8px;
}
.mod .head .n {
    font-size: 12px;
    font-weight: 600;
    color: var(--c4h-accent);
    letter-spacing: .1em;
}
.mod .blurb {
    font-weight: 300;
    font-size: 15px;
    color: var(--c4h-ink-soft);
    margin-left: 26px;
    line-height: 1.5;
}
.mod ul { margin: 14px 0 0 26px; display: grid; gap: 6px; }
.mod li {
    font-size: 13px;
    padding-left: 16px;
    position: relative;
    line-height: 1.5;
}
.mod li::before {
    content: "";
    position: absolute; left: 0; top: 9px;
    width: 8px; height: 1px;
    background: var(--c4h-accent);
}

.callouts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 32px;
}
.callout {
    padding: 28px 32px;
    background: var(--c4h-accent-tint);
    border-radius: var(--c4h-r-md);
    border: 1px solid var(--c4h-rule);
}
.callout p {
    font-weight: 300;
    font-size: 15px;
    line-height: 1.55;
    opacity: .85;
    text-wrap: pretty;
    margin-top: 8px;
}


/* ----- How it works (section 03) ----- */

.hiw {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 80px;
    align-items: flex-start;
}
.hiw .slot { height: 320px; margin-top: 36px; }

.diff {
    margin-top: 36px;
    padding: 24px 28px;
    background: var(--c4h-accent);
    color: #fff;
    border-radius: var(--c4h-r-md);
}
/* Specificity bump — wins against body.c4h .eyebrow */
body.c4h .diff .eyebrow {
    color: rgba(255, 255, 255, .85);
    margin-bottom: 10px;
}
body.c4h .diff .eyebrow::before {
    background: rgba(255, 255, 255, .85);
}
.diff .t {
    font-weight: 400;
    font-size: 19px;
    line-height: 1.45;
    letter-spacing: -.005em;
}

.feat .row {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 24px;
    padding: 28px 0;
    border-top: 1px solid var(--c4h-rule);
}
.feat .row:last-child { border-bottom: 1px solid var(--c4h-rule); }
.feat p {
    font-weight: 300;
    font-size: 17px;
    color: var(--c4h-ink-soft);
    line-height: 1.55;
    text-wrap: pretty;
    margin-top: 6px;
}


/* ----- Audience (section 04) ----- */

.aud {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 48px;
}
.aud .box {
    padding: 40px 44px;
    border: 1px solid var(--c4h-rule);
    border-radius: var(--c4h-r-md);
}
.aud .for { background: var(--c4h-accent-tint); }
.aud .not { background: var(--c4h-page); }

.aud .box .eyebrow { margin-bottom: 18px; }
.aud .not .eyebrow { color: var(--c4h-ink-soft); }
.aud .not .eyebrow::before { background: var(--c4h-ink-muted); }

.aud ul { display: grid; gap: 14px; }
.aud li {
    padding-left: 28px;
    position: relative;
    font-size: 17px;
    line-height: 1.5;
    text-wrap: pretty;
}
.aud .for li::before {
    content: "";
    position: absolute; left: 0; top: 8px;
    width: 14px; height: 7px;
    border-left: 2px solid var(--c4h-accent-dark);
    border-bottom: 2px solid var(--c4h-accent-dark);
    transform: rotate(-45deg);
}
.aud .not li { color: var(--c4h-ink-soft); }
.aud .not li::before {
    content: "";
    position: absolute; left: 4px; top: 11px;
    width: 10px; height: 1px;
    background: var(--c4h-ink-soft);
}
.aud .note {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--c4h-rule);
    font-style: italic;
    font-weight: 300;
    font-size: 14px;
    color: var(--c4h-ink-soft);
    line-height: 1.55;
}


/* ----- Trust (section 05) ----- */

.tr {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: flex-start;
}
.tr .ed { margin-top: 40px; }
.tr .ed .row {
    padding: 18px 0;
    border-top: 1px solid var(--c4h-rule);
    display: grid;
    grid-template-columns: .7fr 1fr;
    gap: 24px;
}
.tr .ed .row:last-child { border-bottom: 1px solid var(--c4h-rule); }
.tr .ed .k {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .01em;
}
.tr .ed .v {
    font-weight: 300;
    font-size: 14px;
    color: var(--c4h-ink-soft);
    line-height: 1.55;
}

.contribs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.contribs .slot { height: 200px; }


/* ----- Foot CTA (section 06, dark band) ----- */

.foot-cta {
    background: var(--c4h-ink);
    color: var(--c4h-page);
    padding: var(--section-pad-y) var(--content-pad-x) 110px;
    border-top: 1px solid var(--c4h-rule);
}
/* Specificity bump — wins against body.c4h .section-num */
body.c4h .foot-cta .section-num {
    color: rgba(255, 255, 255, .65);
}
body.c4h .foot-cta .section-num .n {
    color: rgba(255, 255, 255, .35);
}
.foot-cta p {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .7);
    margin-top: 24px;
    max-width: 520px;
    text-wrap: pretty;
}
.foot-cta .grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: var(--content-max-w);
    margin: 0 auto;
}

.perk {
    background: rgba(255, 255, 255, .06);
    padding: 32px 36px;
    border-radius: var(--c4h-r-md);
    border: 1px solid rgba(255, 255, 255, .12);
}
.perk ul { display: grid; gap: 12px; margin: 16px 0 28px; }
.perk li {
    padding-left: 22px;
    position: relative;
    font-size: 15px;
    line-height: 1.5;
}
.perk li::before {
    content: "";
    position: absolute; left: 0; top: 9px;
    width: 12px; height: 1px;
    background: var(--c4h-accent);
}
/* Specificity bump — overrides body.c4h .form-control on the dark perk box */
body.c4h .perk .form-control {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .2);
    color: var(--c4h-page);
}
body.c4h .perk .form-control::placeholder { color: rgba(255, 255, 255, .45); }
body.c4h .perk .form-control:focus {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .4);
    box-shadow: none;
}


/* ============================================================================
   Footer
   ============================================================================ */

footer {
    background: var(--c4h-paper);
    padding: 56px var(--content-pad-x) 36px;
    border-top: 1px solid var(--c4h-rule);
}
footer .grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 48px;
    max-width: var(--content-max-w);
    margin: 0 auto;
}
footer .b {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
}
footer .b span {
    font-style: italic;
    font-weight: 300;
    color: var(--c4h-ink-soft);
}
footer .blurb {
    font-weight: 300;
    font-size: 14px;
    color: var(--c4h-ink-soft);
    margin-top: 16px;
    max-width: 340px;
    line-height: 1.55;
}
footer .col .eyebrow { margin-bottom: 12px; }
footer .col ul { display: grid; gap: 8px; font-size: 14px; }
footer .col a { color: var(--c4h-ink); }
footer .col a:hover { color: var(--c4h-accent); }

footer .legal {
    max-width: var(--content-max-w);
    margin: 40px auto 0;
    padding-top: 20px;
    border-top: 1px solid var(--c4h-rule);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    font-size: 12px;
    color: var(--c4h-ink-soft);
    letter-spacing: .04em;
}


/* ============================================================================
   Status messages on email forms
   ============================================================================ */

.form-status {
    margin-top: 12px;
    font-size: 13px;
    min-height: 1.2em;
    color: var(--c4h-ink-soft);
}
.form-status.is-success { color: var(--c4h-accent-dark); }
.form-status.is-error   { color: var(--c4h-highlight); }
.perk .form-status              { color: rgba(255, 255, 255, .7); }
.perk .form-status.is-success   { color: #fff; }
.perk .form-status.is-error     { color: var(--c4h-highlight-tint); }


/* ============================================================================
   Responsive
   ============================================================================ */

@media (max-width: 780px) {
    :root { --content-pad-x: 22px; --section-pad-y: 64px; }

    header.nav nav.links,
    .cur-head .hint { display: none; }

    header.nav { padding: 16px var(--content-pad-x); gap: 12px; }
    .brand { font-size: 13px; min-width: 0; }
    .brand .sub { font-size: 11px; }
    .nav-actions { gap: 10px; flex-shrink: 0; }
    .nav-actions .signin { font-size: 13px; }

    .section-strip {
        display: flex;
        gap: 22px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px var(--content-pad-x);
        background: var(--c4h-page);
        border-bottom: 1px solid var(--c4h-rule);
        position: sticky;
        top: 0;
        z-index: 20;
        scrollbar-width: none;
    }
    .section-strip::-webkit-scrollbar { display: none; }
    .section-strip a {
        flex: 0 0 auto;
        font-size: 13px;
        font-weight: 500;
        color: var(--c4h-ink-soft);
        white-space: nowrap;
    }
    .section-strip a:hover,
    .section-strip a:focus { color: var(--c4h-accent); }

    .hero { padding-top: 40px; padding-bottom: 56px; }
    .hero .grid,
    .two,
    .hiw,
    .aud,
    .tr,
    .foot-cta .grid,
    footer .grid { grid-template-columns: 1fr; gap: 36px; }

    .hero .slot      { height: 360px; }
    .pull            { left: 18px; }
    .capture         { flex-direction: column; }
    .modules,
    .callouts        { grid-template-columns: 1fr; }
    .modules .mod    { border-right: none; }
    .feat .row       { grid-template-columns: 40px 1fr; gap: 16px; padding: 20px 0; }
    .aud .box        { padding: 28px 24px; }
    .aud li          { font-size: 15px; }
    .contribs .slot  { height: 150px; }
    footer .grid     { gap: 28px; }
    .tr .ed .row     { grid-template-columns: 1fr; gap: 4px; }
}


/* ============================================================================
   Showing app pages (post-login)
   ----------------------------------------------------------------------------
   Used by `home.html` and `start_persona.html`. Selectors are prefixed
   `.c4h-` to keep clear of Bootstrap utility classes loaded by base.html.

   These are not landing-page specific but live in this file historically.
   They may move to their own stylesheet later.
   ============================================================================ */

.c4h-app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.c4h-app h1, .c4h-app h2, .c4h-app h3, .c4h-app h4,
.c4h-app p, .c4h-app ul { margin: 0; padding: 0; }
.c4h-app ul { list-style: none; }

.c4h-shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px var(--content-pad-x);
    border-bottom: 1px solid var(--c4h-rule);
    background: var(--c4h-page);
    gap: 24px;
    flex-wrap: wrap;
}
.c4h-shell .c4h-who {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--c4h-ink-soft);
}
.c4h-shell .c4h-who a { color: var(--c4h-ink-soft); }
.c4h-shell .c4h-who a:hover { color: var(--c4h-accent); }
.c4h-shell .c4h-who .sep { color: var(--c4h-rule); }

.c4h-main {
    flex: 1;
    padding: 64px var(--content-pad-x) 96px;
}
.c4h-wrap {
    max-width: 760px;
    margin: 0 auto;
}
.c4h-wrap.wide { max-width: var(--content-max-w); }

/* ----- Goal banner ------------------------------------------------------ */

.c4h-goal {
    background: var(--c4h-accent-tint);
    border: 1px solid var(--c4h-rule);
    border-left: 3px solid var(--c4h-accent);
    padding: 16px 20px;
    border-radius: var(--c4h-r-sm);
    margin-bottom: 40px;
}
.c4h-goal .lab {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c4h-accent-dark);
}
.c4h-goal .v {
    margin-top: 4px;
    font-size: 16px;
    line-height: 1.4;
    color: var(--c4h-ink);
}

/* ----- Recommendation card (Read next) --------------------------------- */

.c4h-rec {
    display: block;
    padding: 28px 32px;
    background: var(--c4h-paper);
    border: 1px solid var(--c4h-rule);
    border-radius: var(--c4h-r-md);
    transition: border-color .15s, transform .15s;
    margin-bottom: 32px;
}
.c4h-rec:hover {
    border-color: var(--c4h-accent);
    transform: translateY(-2px);
}
.c4h-rec .tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c4h-accent);
    margin-bottom: 8px;
}
.c4h-rec .title {
    font-weight: 600;
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: -.005em;
    color: var(--c4h-ink);
}
.c4h-rec .reason {
    margin-top: 10px;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.55;
    color: var(--c4h-ink-soft);
}
.c4h-rec .arrow {
    margin-top: 16px;
    font-size: 13px;
    color: var(--c4h-accent);
    font-weight: 600;
    letter-spacing: .04em;
}

.c4h-end {
    padding: 24px 28px;
    background: var(--c4h-paper);
    border: 1px dashed var(--c4h-rule);
    border-radius: var(--c4h-r-md);
    font-size: 16px;
    color: var(--c4h-ink-soft);
    text-align: center;
    margin-bottom: 32px;
}

/* ----- Side actions ---------------------------------------------------- */

.c4h-sidelinks {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--c4h-rule);
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 14px;
}
.c4h-sidelinks a {
    color: var(--c4h-ink-soft);
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}
.c4h-sidelinks a:hover {
    color: var(--c4h-accent);
    border-bottom-color: var(--c4h-accent);
}

/* ----- Persona cards (onboarding) -------------------------------------- */

.c4h-personas {
    display: grid;
    gap: 14px;
    margin-top: 32px;
}

.c4h-persona {
    display: block;
    background: var(--c4h-paper);
    border: 1px solid var(--c4h-rule);
    border-radius: var(--c4h-r-md);
    padding: 24px 28px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    position: relative;
}
.c4h-persona:hover { border-color: var(--c4h-accent); }
.c4h-persona input[type=radio] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.c4h-persona:has(input[type=radio]:checked) {
    border-color: var(--c4h-accent);
    background: var(--c4h-accent-tint);
}

.c4h-persona .row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.c4h-persona .name {
    font-weight: 600;
    font-size: 19px;
    letter-spacing: -.005em;
    color: var(--c4h-ink);
}
.c4h-persona .headline {
    font-size: 13px;
    color: var(--c4h-ink-soft);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 600;
}
.c4h-persona .quote {
    font-style: italic;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.5;
    color: var(--c4h-ink-soft);
    margin-top: 6px;
}
.c4h-persona .quote::before { content: "“"; margin-right: 2px; }
.c4h-persona .quote::after  { content: "”"; margin-left: 2px; }

.c4h-alert {
    background: var(--c4h-highlight-tint);
    border: 1px solid var(--c4h-highlight);
    color: var(--c4h-highlight-dark);
    padding: 12px 16px;
    border-radius: var(--c4h-r-sm);
    font-size: 14px;
    margin-bottom: 20px;
}

.c4h-actions {
    margin-top: 32px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

@media (max-width: 780px) {
    .c4h-main { padding: 40px var(--content-pad-x) 64px; }
    .c4h-rec  { padding: 22px 24px; }
    .c4h-rec .title { font-size: 20px; }
    .c4h-persona { padding: 20px 22px; }
    .c4h-actions { justify-content: stretch; }
}


/* ============================================================================
   Path Overview (ADR 0006 Phase 1 Slice 1 - /showing/path/)
   Read-only journey list: one row per lesson in the persona path.
   ============================================================================ */

.c4h-path {
    margin: 24px 0;
    padding: 0;
    list-style: none;
}

.c4h-path-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 16px;
    align-items: start;
    padding: 16px 0;
    border-bottom: 1px solid var(--c4h-rule);
}

.c4h-path-idx {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 2px solid var(--c4h-rule);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--c4h-ink-soft);
    background: var(--c4h-paper);
}

.c4h-path-done .c4h-path-idx {
    background: var(--c4h-accent);
    border-color: var(--c4h-accent);
    color: #fff;
}

.c4h-path-current .c4h-path-idx {
    background: var(--c4h-accent-tint);
    border-color: var(--c4h-accent);
    color: var(--c4h-accent-dark);
    box-shadow: 0 0 0 4px var(--c4h-accent-tint);
}

.c4h-path-text { min-width: 0; }

.c4h-path-title {
    font-weight: 600;
    color: var(--c4h-ink);
    font-size: 18px;
    border-bottom: 1px dotted transparent;
}

.c4h-path-title:hover {
    border-bottom-color: var(--c4h-accent);
    color: var(--c4h-accent);
}

.c4h-path-module {
    font-size: 13px;
    color: var(--c4h-ink-soft);
    margin-top: 2px;
}

.c4h-path-reason {
    font-size: 15px;
    color: var(--c4h-ink);
    margin-top: 6px;
    line-height: 1.5;
}

.c4h-path-done .c4h-path-reason,
.c4h-path-done .c4h-path-title { color: var(--c4h-ink-soft); }

.c4h-path-state {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c4h-ink-soft);
    white-space: nowrap;
    padding-top: 6px;
}

.c4h-path-current .c4h-path-state {
    color: var(--c4h-accent);
    font-weight: 600;
}

.c4h-path-current {
    background: var(--c4h-accent-tint);
    border-radius: var(--c4h-r-md);
    padding-left: 12px;
    padding-right: 12px;
    margin-left: -12px;
    margin-right: -12px;
}

@media (max-width: 600px) {
    .c4h-path-row {
        grid-template-columns: 28px 1fr;
        gap: 12px;
    }
    .c4h-path-state {
        grid-column: 2 / 3;
        padding-top: 0;
    }
}

/* ============================================================================
   Path Strip (ADR 0006 Phase 1 Slice 2 - persistent chrome on showing pages)
   One dot per lesson in the persona path, grouped visually by Module.
   Sticky top on desktop (>=768px), fixed bottom on mobile.
   ============================================================================ */

.c4h-pathstrip {
    background: var(--c4h-paper);
    border-bottom: 1px solid var(--c4h-rule);
    padding: 12px var(--content-pad-x, 24px);
    z-index: 50;
    font-family: 'Titillium Web', system-ui, -apple-system, sans-serif;
}

.c4h-pathstrip-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: var(--content-max-w, 1180px);
    margin: 0 auto;
}

.c4h-pathstrip-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c4h-ink-soft);
    white-space: nowrap;
    line-height: 1.3;
}

.c4h-pathstrip-progress {
    display: block;
    font-size: 11px;
    color: var(--c4h-ink-soft);
    opacity: 0.8;
}

.c4h-pathstrip-nodes {
    display: flex;
    align-items: center;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: thin;
}

.c4h-pathstrip-group {
    display: flex;
    align-items: center;
    padding-right: 10px;
    margin-right: 10px;
    border-right: 1px dashed var(--c4h-rule);
    flex-shrink: 0;
}

.c4h-pathstrip-group:last-child {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}

.c4h-pathstrip-mod {
    font-size: 10px;
    color: var(--c4h-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 10px;
    white-space: nowrap;
    opacity: 0.75;
}

.c4h-pathstrip-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 2px solid var(--c4h-rule);
    margin: 0 3px;
    background: var(--c4h-paper);
    transition: transform 0.1s;
    flex-shrink: 0;
}

.c4h-pathstrip-dot:hover {
    transform: scale(1.25);
}

.c4h-pathstrip-dot.c4h-pathstrip-done {
    background: var(--c4h-accent);
    border-color: var(--c4h-accent);
}

.c4h-pathstrip-dot.c4h-pathstrip-current {
    background: var(--c4h-accent-tint);
    border-color: var(--c4h-accent);
    box-shadow: 0 0 0 3px var(--c4h-accent-tint);
    transform: scale(1.15);
}

.c4h-pathstrip-view-all {
    font-size: 13px;
    color: var(--c4h-accent);
    white-space: nowrap;
    border-bottom: 1px dotted transparent;
    flex-shrink: 0;
}

.c4h-pathstrip-view-all:hover {
    border-bottom-color: var(--c4h-accent);
}

@media (min-width: 768px) {
    .c4h-pathstrip {
        position: sticky;
        top: 0;
    }
}

@media (max-width: 767px) {
    .c4h-pathstrip {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-bottom: none;
        border-top: 1px solid var(--c4h-rule);
        padding: 10px 16px;
    }
    .c4h-pathstrip-inner {
        gap: 12px;
    }
    .c4h-pathstrip-view-all {
        display: none; /* tap a dot or the path overview link in the body */
    }
    /* room for the fixed bottom strip so content isn't covered */
    .c4h-main {
        padding-bottom: 72px;
    }
}