/* ============================================================================
   Courses4Horses — landing page styles
   ----------------------------------------------------------------------------
   All design tokens live in the :root block below. Edit those to retune the
   page; the rest of the file should rarely need to change.

   Alternate palettes are kept as commented blocks at the bottom of the tokens
   section. Replace the active :root values with one of them to swap mood.
   ============================================================================ */

:root {
    /* --- Colour ------------------------------------------------------------ */
    --ink:           #1a1f1d;   /* primary text */
    --ink-soft:      #4a5450;   /* secondary text, captions */
    --page:          #faf7f0;   /* page background */
    --paper:         #ffffff;   /* card / panel background */
    --rule:          #e3ddcd;   /* hairlines, dividers, borders */
    --accent:        #2B9D84;   /* CTA, eyebrows, callouts */
    --accent-dark:   #1a6b5c;   /* button shadow, hover */
    --accent-tint:   #def4ea;   /* callout / highlight panels */
    --dark:          #1a1f1d;   /* footer CTA band */

    /* --- Typography -------------------------------------------------------- */
    --font-sans:     "Titillium Web", system-ui, -apple-system, sans-serif;
    --font-mono:     "JetBrains Mono", ui-monospace, Menlo, monospace;

    /* --- Layout ------------------------------------------------------------ */
    --content-max-w: 1180px;
    --content-pad-x: 64px;
    --section-pad-y: 120px;

    /* --- Shape ------------------------------------------------------------- */
    --r-sm: 3px;
    --r-md: 4px;

    /* --- Effects ----------------------------------------------------------- */
    --shadow-pull:   0 14px 36px -16px rgba(0, 0, 0, .18);
    --shadow-btn:    0 8px 22px -10px var(--accent);
}

/* ----- Alternate palettes ---------------------------------------------------
   Uncomment one of the blocks below (and comment the active colours above)
   to swap to a different mood.

   Field Day — traditional country green
   --ink:#1f2419; --ink-soft:#3d4536; --page:#f5f0e8; --paper:#fff;
   --rule:#d4cab8; --accent:#2d4a36; --accent-dark:#1f3326; --accent-tint:#dee9d6;
   --dark:#1f2419;

   Show Ring — editorial navy + claret
   --ink:#14202e; --ink-soft:#2c3849; --page:#faf8f3; --paper:#fff;
   --rule:#d8d2c4; --accent:#8b3a3a; --accent-dark:#5e2222; --accent-tint:#f3e0e0;
   --dark:#14202e;

   Heath and Hedge — distinctive plum
   --ink:#1a1d20; --ink-soft:#2f3338; --page:#ede9e0; --paper:#fff;
   --rule:#c9c2b3; --accent:#4d3d52; --accent-dark:#322a36; --accent-tint:#e6dfea;
   --dark:#1a1d20;
   --------------------------------------------------------------------------- */


/* ============================================================================
   Reset + base
   ============================================================================ */

*, *::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; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }

body {
    background: var(--page);
    color: var(--ink);
    font-family: var(--font-sans);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ============================================================================
   Shared bits
   ============================================================================ */

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

.eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent);
}

.italic {
    font-style: italic;
    font-weight: 300;
    color: var(--accent);
}

.rule-label {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 48px;
    color: var(--ink-soft);
}
.rule-label .num { font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.rule-label .ln  { flex: 0 0 32px; height: 1px; background: var(--rule); }
.rule-label .t   { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }

.btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    padding: 13px 22px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .02em;
    box-shadow: 0 1px 0 var(--accent-dark) inset, var(--shadow-btn);
}
.btn.sm    { padding: 9px 16px; font-size: 13px; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); box-shadow: none; padding: 12px 22px; }


/* ============================================================================
   Nav
   ============================================================================ */

header.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px var(--content-pad-x);
    border-bottom: 1px solid var(--rule);
    background: var(--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(--ink);
    position: relative;
}
.brand .mark::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--accent);
}
.brand .sub { font-weight: 400; font-style: italic; color: var(--ink-soft); font-size: 13px; }

nav.links {
    display: flex;
    gap: 36px;
    font-size: 14px;
    font-weight: 500;
}

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


/* ============================================================================
   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 h1 {
    font-weight: 300;
    font-size: 76px;
    line-height: 1.02;
    letter-spacing: -.022em;
    text-wrap: balance;
}

.hero p.lede {
    font-weight: 300;
    font-size: 20px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 32px 0 36px;
    max-width: 520px;
    text-wrap: pretty;
}

.eyebrow.spaced { margin-bottom: 24px; }
.eyebrow .dot   { margin: 0 10px; color: var(--rule); }

.capture { display: flex; gap: 8px; max-width: 480px; }
.capture input {
    flex: 1;
    padding: 14px 16px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    outline: none;
}

.region {
    display: flex;
    gap: 14px;
    margin-top: 14px;
    flex-wrap: wrap;
    align-items: center;
}
.region .lab { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .14em; }
.radio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--rule);
    background: var(--paper);
    position: relative;
    display: inline-block;
}
.dot.on { border-color: var(--accent); }
.dot.on::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }

.fine { font-size: 12px; color: var(--ink-soft); margin-top: 12px; }

.stats { margin-top: 40px; display: flex; gap: 36px; flex-wrap: wrap; }
.stat .n { font-weight: 700; font-size: 28px; line-height: 1; }
.stat .l { font-size: 12px; color: var(--ink-soft); margin-top: 6px; text-transform: uppercase; letter-spacing: .14em; }


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

.slot {
    background:
        repeating-linear-gradient(135deg, rgba(40,30,20,.06) 0 12px, rgba(40,30,20,.03) 12px 24px),
        #e9e2d2;
    border-radius: var(--r-md);
    position: relative;
    overflow: hidden;
}
.slot .cap {
    position: absolute;
    left: 14px; bottom: 14px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .02em;
    color: #6b5c50;
    background: rgba(255, 255, 255, .75);
    padding: 4px 7px;
    border-radius: 2px;
    max-width: 92%;
    line-height: 1.4;
}
.hero .slot { height: 560px; }

.pull {
    position: absolute;
    bottom: -28px;
    left: -32px;
    background: var(--paper);
    padding: 14px 18px;
    border-radius: var(--r-sm);
    border: 1px solid var(--rule);
    max-width: 280px;
    box-shadow: var(--shadow-pull);
}
.pull .tag { font-size: 12px; color: var(--accent); text-transform: uppercase; letter-spacing: .18em; font-weight: 600; }
.pull .q   { font-size: 14px; margin-top: 4px; line-height: 1.4; font-style: italic; font-weight: 300; }
.pull .by  { font-size: 11px; color: var(--ink-soft); margin-top: 6px; letter-spacing: .04em; }


/* ============================================================================
   Sections
   ============================================================================ */

section {
    padding: var(--section-pad-y) var(--content-pad-x);
    border-top: 1px solid var(--rule);
    background: var(--page);
}
section.alt { background: var(--paper); }
section h2 {
    font-weight: 300;
    font-size: 46px;
    line-height: 1.1;
    letter-spacing: -.018em;
    text-wrap: balance;
}


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

.two {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 100px;
}
.two .lede {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: 36px;
    text-wrap: pretty;
}

.moments .row {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid var(--rule);
}
.moments .row:last-child { border-bottom: 1px solid var(--rule); }
.moments .row .n { font-size: 12px; color: var(--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(--ink-soft); letter-spacing: .04em; padding-bottom: 8px; }

.modules {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    overflow: hidden;
}
.mod {
    padding: 28px 32px;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}
.mod:nth-child(odd) { border-right: 1px solid var(--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(--rule); }

.mod .head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; }
.mod .head .n { font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: .1em; }
.mod h3 { font-weight: 600; font-size: 22px; letter-spacing: -.01em; }
.mod .blurb { font-weight: 300; font-size: 15px; color: var(--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(--accent);
}

.callouts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 32px;
}
.callout {
    padding: 28px 32px;
    background: var(--accent-tint);
    border-radius: var(--r-md);
    border: 1px solid var(--rule);
}
.callout .tag { color: var(--accent-dark); }
.callout h4   { font-weight: 600; font-size: 24px; margin: 12px 0 8px; letter-spacing: -.01em; }
.callout p    { font-weight: 300; font-size: 15px; line-height: 1.55; opacity: .85; text-wrap: pretty; }


/* ----- 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(--accent);
    color: #fff;
    border-radius: var(--r-md);
}
.diff .eyebrow { color: rgba(255,255,255,.7); margin-bottom: 10px; }
.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(--rule);
}
.feat .row:last-child { border-bottom: 1px solid var(--rule); }
.feat h3 { font-weight: 600; font-size: 22px; margin-bottom: 6px; letter-spacing: -.005em; }
.feat p  { font-weight: 300; font-size: 17px; color: var(--ink-soft); line-height: 1.55; text-wrap: pretty; }


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

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

.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(--accent-dark);
    border-bottom: 2px solid var(--accent-dark);
    transform: rotate(-45deg);
}
.aud .not li { color: var(--ink-soft); }
.aud .not li::before {
    content: "";
    position: absolute; left: 4px; top: 11px;
    width: 10px; height: 1px;
    background: var(--ink-soft);
}
.aud .note {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
    font-style: italic;
    font-weight: 300;
    font-size: 14px;
    color: var(--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 .lede { font-weight: 300; font-size: 18px; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }
.tr .ed { margin-top: 40px; }
.tr .ed .row {
    padding: 18px 0;
    border-top: 1px solid var(--rule);
    display: grid;
    grid-template-columns: .7fr 1fr;
    gap: 24px;
}
.tr .ed .row:last-child { border-bottom: 1px solid var(--rule); }
.tr .ed .k { font-weight: 600; font-size: 14px; letter-spacing: .01em; }
.tr .ed .v { font-weight: 300; font-size: 14px; color: var(--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(--dark);
    color: var(--page);
    padding: var(--section-pad-y) var(--content-pad-x) 110px;
    border-top: 1px solid var(--rule);
}
.foot-cta .rule-label    { color: rgba(255,255,255,.55); }
.foot-cta .rule-label .ln { background: rgba(255,255,255,.2); }
.foot-cta h2 {
    font-size: 56px;
    line-height: 1.05;
    letter-spacing: -.022em;
    color: var(--page);
    text-wrap: balance;
}
.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(--r-md);
    border: 1px solid rgba(255,255,255,.12);
}
.perk .eyebrow { margin-bottom: 16px; }
.perk ul { display: grid; gap: 12px; margin-bottom: 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(--accent);
}
.perk .capture input {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.2);
    color: var(--page);
}
.perk .capture input::placeholder { color: rgba(255,255,255,.45); }


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

footer {
    background: var(--paper);
    padding: 56px var(--content-pad-x) 36px;
    border-top: 1px solid var(--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(--ink-soft); }
footer .blurb {
    font-weight: 300;
    font-size: 14px;
    color: var(--ink-soft);
    margin-top: 16px;
    max-width: 340px;
    line-height: 1.55;
}
footer .col .eyebrow { color: var(--ink-soft); margin-bottom: 12px; }
footer .col ul { display: grid; gap: 8px; font-size: 14px; }

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


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

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


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

@media (max-width: 780px) {
    :root { --content-pad-x: 22px; --section-pad-y: 64px; }
    header.nav nav.links,
    .nav-actions .signin,
    .cur-head .hint { display: none; }

    .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 h1       { font-size: 44px; }
    .hero .slot    { height: 360px; }
    .pull          { left: 18px; }
    .hero p.lede   { font-size: 17px; margin: 22px 0 28px; }
    .capture       { flex-direction: column; }
    .stats         { gap: 22px; }
    .stat .n       { font-size: 22px; }
    section h2     { font-size: 30px; }
    .modules,
    .callouts      { grid-template-columns: 1fr; }
    .modules .mod  { border-right: none; }
    .feat .row     { grid-template-columns: 40px 1fr; gap: 16px; padding: 20px 0; }
    .feat h3       { font-size: 18px; }
    .feat p        { font-size: 15px; }
    .aud .box      { padding: 28px 24px; }
    .aud li        { font-size: 15px; }
    .contribs .slot { height: 150px; }
    .foot-cta h2   { font-size: 34px; }
    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.

   Pages override `block outer` and put `<div class="c4h-app">…</div>` as the
   root so these styles apply without bleeding into other parts of the app.
   ============================================================================ */

.c4h-app {
    background: var(--page);
    color: var(--ink);
    font-family: var(--font-sans);
    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-app a  { color: inherit; text-decoration: none; }

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

.c4h-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
    display: inline-block;
}

.c4h-h1 {
    font-weight: 300;
    font-size: 48px;
    line-height: 1.1;
    letter-spacing: -.018em;
    text-wrap: balance;
}
.c4h-h1 .italic { font-style: italic; color: var(--accent); }

.c4h-lede {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin-top: 16px;
    max-width: 60ch;
    text-wrap: pretty;
}

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

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

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

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

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

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

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

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

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

.c4h-persona {
    display: block;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    padding: 24px 28px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    position: relative;
}
.c4h-persona:hover { border-color: var(--accent); }
.c4h-persona input[type=radio] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.c4h-persona:has(input[type=radio]:checked) {
    border-color: var(--accent);
    background: var(--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(--ink);
}
.c4h-persona .headline {
    font-size: 13px;
    color: var(--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(--ink-soft);
    margin-top: 6px;
}
.c4h-persona .quote::before { content: "“"; margin-right: 2px; }
.c4h-persona .quote::after  { content: "”"; margin-left: 2px; }

.c4h-alert {
    background: #fbecec;
    border: 1px solid #e7c2c2;
    color: #7d2424;
    padding: 12px 16px;
    border-radius: var(--r-sm);
    font-size: 14px;
    margin-bottom: 20px;
}

.c4h-actions {
    margin-top: 32px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
.c4h-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    padding: 13px 26px;
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: 0 1px 0 var(--accent-dark) inset, var(--shadow-btn);
    transition: background .15s;
}
.c4h-btn:hover { background: var(--accent-dark); }
.c4h-btn:disabled { opacity: .5; cursor: not-allowed; }
.c4h-btn.ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--rule);
    box-shadow: none;
}
.c4h-btn.ghost:hover { border-color: var(--accent); color: var(--accent); }

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