/* ============================================================================
   COACHING — coaching.css

   Public, linked from the front page. Self-contained: the type comes from
   /fonts/, nothing loads from a third-party origin, and the sheet grammar
   (eyebrows, hairline rules, the two faces) is copied rather than shared.
   It borrows no other page's stylesheet on purpose. Extracting a shared
   sheet is a separate job; see AGENTS.md § Coaching.
   ============================================================================ */

/* --------------------------------------------------------------
   THE TYPE — latin and latin-ext subsets, from this origin.
   CJK and anything outside these ranges falls back to the
   reader's system fonts, which is correct: a CJK webfont is
   megabytes, and every device that needs one already has one.
   -------------------------------------------------------------- */

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/space-mono-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/space-mono-latin-ext-400-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/space-mono-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/space-mono-latin-ext-700-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The variable face is declared under the plain family name, not
   "Lexend Giga Variable" — iso-acknowledge.js asks for 'Lexend Giga'. */
@font-face {
    font-family: 'Lexend Giga';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/lexend-giga-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Lexend Giga';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/lexend-giga-latin-ext-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------
   TOKENS — the house values, repeated here so the page renders
   the same with styles.css absent (it is).
   -------------------------------------------------------------- */

:root {
    --ih-ground: #0b0b0c;
    --ih-ink: #e8e6e1;
    --ih-dim: #8a8781;
    --ih-red: rgb(255, 0, 57);

    --co-sheet: #f6f5f1;
    --co-ink: #1f2937;
    --co-body: #374151;
    --co-quiet: #6b7280;
    --co-rule: rgba(31, 41, 55, 0.14);

    --co-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --co-sans: 'Lexend Giga', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--co-sheet);
    color: var(--co-body);
    font-family: var(--co-sans);
    font-weight: 300;
    line-height: 1.75;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------
   THE HEAD — no band, no rail. The word-mark is the way home.
   -------------------------------------------------------------- */

.co-head {
    width: min(100%, 42rem);
    margin: 0 auto;
    padding: 2.5rem 1.5rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: baseline;
    justify-content: space-between;
}

.co-mark {
    font-family: var(--co-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--co-ink);
    text-decoration: none;
    white-space: nowrap;
}

.co-mark:hover { color: var(--ih-red); }

.co-eyebrow {
    font-family: var(--co-mono);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--co-quiet);
    margin: 0;
}


/* --------------------------------------------------------------
   THE PAGE — one column, 42rem, the width of the front page's lead.
   -------------------------------------------------------------- */

.co {
    width: min(100%, 42rem);
    margin: 0 auto;
    padding: 3rem 1.5rem 0;
}

.co h1 {
    font-family: var(--co-mono);
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    line-height: 1.15;
    font-weight: 700;
    color: var(--co-ink);
    margin: 0 0 1.5rem;
}

.co-stand {
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    line-height: 1.75;
    color: var(--co-body);
    margin: 0 0 1.5rem;
}

.co-asof {
    font-family: var(--co-mono);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--co-quiet);
    margin: 0 0 1rem;
}

.co section {
    border-top: 1px solid var(--co-rule);
    padding-top: 2.25rem;
    margin-top: 3.5rem;
}

.co h2 {
    font-family: var(--co-mono);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: var(--co-ink);
    margin: 0 0 1.25rem;
}

.co h3 {
    font-family: var(--co-mono);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--co-ink);
    margin: 2.5rem 0 0.5rem;
}

/* The one-line gloss under a group heading. */
.co h3 + .co-gloss {
    font-size: 0.9rem;
    color: var(--co-quiet);
    margin: 0 0 1.25rem;
}

.co p { margin: 0 0 1.25rem; }

.co strong { font-weight: 600; color: var(--co-ink); }

.co a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(31, 41, 55, 0.3);
}

.co a:hover, .co a:focus-visible { border-bottom-color: var(--ih-red); }

/* --------------------------------------------------------------
   THE ENTRIES — one per thing. Name, a line or two, a quiet label.
   -------------------------------------------------------------- */

.co-entries { margin: 0 0 1rem; padding: 0; list-style: none; }

.co-entry {
    border-top: 1px solid var(--co-rule);
    padding: 1.25rem 0 0;
    margin: 0 0 1.5rem;
}

.co-entry-name {
    font-family: var(--co-mono);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--co-ink);
    display: block;
    margin-bottom: 0.5rem;
}

.co-entry p { font-size: 0.94rem; margin: 0 0 0.75rem; }

.co-status {
    font-family: var(--co-mono);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--co-quiet);
}

/* --------------------------------------------------------------
   HOW I WORK — the numbered list, red counters.
   -------------------------------------------------------------- */

.co-how { margin: 0; padding: 0; list-style: none; counter-reset: how; }

.co-how li {
    counter-increment: how;
    position: relative;
    padding-left: 3rem;
    margin-bottom: 2rem;
}

.co-how li::before {
    content: counter(how, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.15rem;
    font-family: var(--co-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--ih-red);
}

.co-how b {
    display: block;
    font-family: var(--co-mono);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--co-ink);
    margin-bottom: 0.4rem;
}

.co-how p { font-size: 0.94rem; margin: 0; }

/* --------------------------------------------------------------
   THE FOOT
   -------------------------------------------------------------- */

.co-foot {
    width: min(100%, 42rem);
    margin: 4rem auto 0;
    padding: 1.5rem 1.5rem 4rem;
    border-top: 1px solid var(--co-rule);
    font-family: var(--co-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    line-height: 1.9;
    color: var(--co-quiet);
}

.co-foot a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(31, 41, 55, 0.25); }
.co-foot a:hover { border-bottom-color: var(--ih-red); }

/* --------------------------------------------------------------
   PRINT — people print an offer to read it properly. Clean A4,
   black on white, links showing where they go.
   -------------------------------------------------------------- */

@media print {
    @page { margin: 16mm 14mm; }

    body { background: #fff; color: #000; font-size: 10pt; line-height: 1.5; }

    .co-head, .co, .co-foot { width: 100%; max-width: none; padding-left: 0; padding-right: 0; }
    .co-head { padding-top: 0; }
    .co { padding-top: 1rem; }

    .co h1 { font-size: 18pt; color: #000; }
    .co h2 { font-size: 12pt; color: #000; page-break-after: avoid; }
    .co h3 { font-size: 9pt; color: #000; page-break-after: avoid; }
    .co-stand { font-size: 10pt; }

    .co section { margin-top: 14pt; padding-top: 8pt; border-top: 0.5pt solid #999; page-break-inside: auto; }
    .co h2 { margin-bottom: 8pt; }
    .co h3 { margin: 14pt 0 3pt; }
    .co p, .co-entry p, .co-how p { margin: 0 0 6pt; }
    .co h3 + .co-gloss { font-size: 9pt; margin-bottom: 8pt; }

    .co-entry { padding-top: 7pt; margin-bottom: 8pt; border-top: 0.5pt solid #ccc; }
    .co-entry-name { font-size: 10pt; margin-bottom: 2pt; }
    .co-entry p { font-size: 9.5pt; }
    .co-status { font-size: 7pt; }

    .co-how li { margin-bottom: 9pt; padding-left: 26pt; }
    .co-how li::before { color: #000; font-size: 8pt; top: 1pt; }
    .co-how b { font-size: 9.5pt; margin-bottom: 2pt; }
    .co-how p { font-size: 9.5pt; }

    .co-asof { margin-bottom: 0; }
    .co-foot { margin-top: 14pt; padding: 8pt 0 0; font-size: 8pt; line-height: 1.6; }

    .co-entry, .co-how li { page-break-inside: avoid; }

    .co a, .co-foot a { border-bottom: none; text-decoration: underline; }

    /* Where the link actually goes — a printed page has no hover. */
    .co a[href^="http"]::after {
        content: ' (' attr(href) ')';
        font-family: var(--co-mono);
        font-size: 8pt;
        word-break: break-all;
    }

    /* The acknowledgement screen is dismissed before anyone prints,
       but belt and braces: it is never on paper. */
    #iso-ack, .iso-ack { display: none !important; }
}

/* --------------------------------------------------------------
   COACHING ADDITIONS
   -------------------------------------------------------------- */

/* Places — hand-maintained, like the as-of date. */
.co-places {
    font-family: var(--co-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--co-ink);
    margin: 0 0 1rem;
}

.co-places .co-dots { color: var(--ih-red); letter-spacing: 0.3em; margin-left: 0.5em; }

/* Two-column facts: sync / async / term. Stacks on a phone. */
.co-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0 2rem;
    margin: 0 0 1rem;
}

.co-grid .co-entry { margin-bottom: 1rem; }

/* The way in. */
.co-cta {
    display: inline-block;
    font-family: var(--co-mono);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    color: var(--co-ink);
    padding: 0.85rem 1.25rem;
    border: 1px solid var(--co-ink) !important;
    margin: 0.5rem 0 1.5rem;
}

.co-cta:hover, .co-cta:focus-visible { border-color: var(--ih-red) !important; color: var(--ih-red); }

/* Plain lists — most of the page. */
.co-list { margin: 0 0 1.25rem; padding-left: 1.1rem; }
.co-list li { margin-bottom: 0.6rem; padding-left: 0.25rem; }
.co-list li::marker { color: var(--co-quiet); }

/* Numbered steps without a bold lead line. */
.co-how li > p:only-child { padding-top: 0; }

/* Quoted words, when they arrive. */
.co-quote {
    margin: 0 0 2rem;
    padding: 0 0 0 1.25rem;
    border-left: 2px solid var(--ih-red);
}

.co-quote p { font-size: 1rem; margin: 0 0 0.5rem; }

.co-quote cite {
    font-family: var(--co-mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-style: normal;
    color: var(--co-quiet);
}

@media print {
    .co-cta { border: none !important; padding: 0; }
    .co-grid { display: block; }
}

/* --------------------------------------------------------------
   THE FORM — /coaching/start. Same sheet grammar: hairlines,
   the two faces, red only as a focus mark.
   -------------------------------------------------------------- */

.co-form section { margin-top: 2.5rem; }
.co-form h2 { margin-bottom: 1.5rem; }

.co-field { display: block; margin: 0 0 1.75rem; padding: 0; border: 0; min-width: 0; }
.co-label { display: block; font-family: var(--co-mono); font-size: 0.85rem; font-weight: 700; color: var(--co-ink); line-height: 1.5; margin-bottom: 0.4rem; padding: 0; }
.co-help { display: block; font-size: 0.85rem; color: var(--co-quiet); margin: -0.2rem 0 0.5rem; }
.co-help.co-inline { display: inline; font-family: var(--co-sans); font-weight: 300; margin: 0; }

.co-form input[type="text"],
.co-form input[type="email"],
.co-form input[type="tel"],
.co-form textarea {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    color: var(--co-ink);
    background: #fff;
    border: 1px solid var(--co-rule);
    border-radius: 0;
    padding: 0.7rem 0.8rem;
    line-height: 1.6;
    -webkit-appearance: none;
}
.co-form textarea { resize: vertical; min-height: 6rem; }
.co-form input:focus, .co-form textarea:focus { outline: 2px solid var(--ih-red); outline-offset: 1px; border-color: transparent; }

.co-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 1.25rem; }

.co-choice { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.95rem; margin: 0 0 0.45rem; cursor: pointer; }
.co-choice input { accent-color: var(--co-ink); margin: 0; transform: translateY(0.1rem); }
.co-choice input:focus-visible { outline: 2px solid var(--ih-red); outline-offset: 2px; }

.co-notice { font-size: 0.85rem; color: var(--co-quiet); border-top: 1px solid var(--co-rule); padding-top: 1.25rem; margin-top: 1rem; }

.co-send { font: inherit; font-family: var(--co-mono); background: transparent; cursor: pointer; }

/* The honeypot: off-screen, not display:none, so bots still fill it. */
.co-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.co-eyebrow a { color: inherit; text-decoration: none; }
.co-eyebrow a:hover { color: var(--ih-red); }
