/* How to start: the first-steps flow (FIG. 01, drafted on paper) and the
   five A's staircase (FIG. 02, drafted on the blueprint field).
   The linework follows the schematic robot (components.css): 2px round
   strokes that sketch themselves, dashed dimension lines, Space Mono
   annotations, chalk used sparingly. Colours come only from tokens.css;
   inside .section-light the same variables remap to the paper inks.
   Without JS, or with reduced motion, both figures render fully drawn;
   js/pages/how-to-start.js adds .is-armed and, once a figure scrolls into
   view, .is-drawn. */

/* ===== Shared linework ===== */
.hs-line { fill: none; stroke: var(--draft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hs-thin { stroke-width: 1.6; }
.hs-faint { stroke: var(--draft-dim); }
.hs-chalk { stroke: var(--chalk); }
.hs-fill { fill: var(--draft); }
.hs-fill-chalk { fill: var(--chalk); }

.hs-figcap {
    font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-muted);
}
.hs-fig-no { color: var(--draft); margin-right: var(--s2); }

/* ===== Drawing sequence =====
   Delay = step index (--i, inline on each step) x --step + element offset
   (--t). Strokes draw via dashoffset like .robot-draw; connectors and
   stair parts are revealed by a clip wipe in their drawing direction. */
[data-draw] { --step: 0.85s; }
.hs-draw, .hs-pop, .hs-wipe { --delay: calc(var(--i, 0) * var(--step) + var(--t, 0s)); }
.hs-wipe { --clip-from: inset(0 100% 0 0); }

[data-draw].is-armed .hs-draw { stroke-dasharray: var(--len, 200); stroke-dashoffset: var(--len, 200); }
[data-draw].is-armed .hs-pop { opacity: 0; }
[data-draw].is-armed .hs-wipe { clip-path: var(--clip-from); }
[data-draw].is-drawn .hs-draw { animation: hsDraw var(--dur, 0.7s) ease forwards var(--delay); }
[data-draw].is-drawn .hs-pop { animation: hsPop 0.3s ease forwards var(--delay); }
[data-draw].is-drawn .hs-wipe { animation: hsWipe var(--dur, 0.4s) ease-in-out forwards var(--delay); }
@keyframes hsDraw { to { stroke-dashoffset: 0; } }
@keyframes hsPop { to { opacity: 1; } }
@keyframes hsWipe { to { clip-path: inset(-14px); } }

@media (prefers-reduced-motion: reduce) {
    [data-draw] .hs-draw, [data-draw] .hs-pop, [data-draw] .hs-wipe {
        animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; clip-path: none !important;
    }
    [data-draw] .hs-stairs-steps::before { animation: none !important; opacity: 1 !important; }
}

/* ===== FIG. 01: first steps as a flow =====
   Phones: a vertical flow beside a "this quarter" dimension rail.
   Desktop: four nodes in a row, connectors drawing from node to node. */
.hs-flow {
    margin: var(--s6) 0 0;
    display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: var(--s4); row-gap: var(--s5);
}
.hs-flow-dim {
    grid-column: 1; grid-row: 1;
    display: flex; flex-direction: column; align-items: center; gap: var(--s2);
    border-top: 1px solid var(--draft-dim); border-bottom: 1px solid var(--draft-dim);
}
.hs-flow-dim::before, .hs-flow-dim::after {
    content: ""; flex: 1; width: 1px;
    background: repeating-linear-gradient(180deg, var(--draft-dim) 0 4px, transparent 4px 8px);
}
.hs-dim-label {
    font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
    writing-mode: vertical-rl; transform: rotate(180deg);
}
.hs-flow-steps { grid-column: 2; grid-row: 1; list-style: none; display: grid; row-gap: var(--s6); }
.hs-flow-step {
    position: relative;
    display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--s4);
    align-items: start; align-content: start;
}
.hs-node svg { width: 64px; height: 64px; overflow: visible; }
.hs-flow-num { display: block; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; color: var(--chalk); }
.hs-flow-text h3 { margin: var(--s1) 0 var(--s2); }
.hs-flow-text p { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.6; }

/* Connector: an origin ring, a drawn line, an arrowhead. Phones: down the
   node column into the next node. */
.hs-flow-link {
    position: absolute; left: 26px; top: 70px; bottom: calc(6px - var(--s6)); width: 12px;
    background: linear-gradient(var(--draft), var(--draft)) center 8px / 2px calc(100% - 16px) no-repeat;
    --clip-from: inset(0 0 100% 0); --t: 0.55s; --dur: 0.45s;
}
.hs-flow-link::before {
    content: ""; position: absolute; left: 2px; top: 0; width: 8px; height: 8px;
    border: 2px solid var(--draft); border-radius: 50%;
}
.hs-flow-link::after {
    content: ""; position: absolute; left: 1px; bottom: 0; width: 10px; height: 10px;
    background: var(--draft); clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.hs-flow .hs-figcap { grid-column: 1 / -1; grid-row: 2; }
/* After step 04: the goal mark, the first visible result */
.hs-flow-step:last-child { padding-bottom: 64px; }
.hs-flow-end { bottom: 0; background-size: 2px calc(100% - 26px); }
.hs-flow-link.hs-flow-end::after {
    left: -2px; bottom: 0; width: 16px; height: 16px; clip-path: none; border-radius: 50%;
    border: 2px solid var(--chalk); background: radial-gradient(circle, var(--chalk) 0 3px, transparent 3.5px);
}
.hs-flow-goal {
    position: absolute; left: 80px; bottom: 0; line-height: 16px;
    font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--chalk); white-space: nowrap;
}

@media (min-width: 900px) {
    .hs-flow { grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); }
    .hs-flow-dim {
        grid-column: 1; grid-row: 1; height: 14px;
        flex-direction: row; border: none;
        border-left: 1px solid var(--draft-dim); border-right: 1px solid var(--draft-dim);
    }
    .hs-flow-dim::before, .hs-flow-dim::after {
        width: auto; height: 1px;
        background: repeating-linear-gradient(90deg, var(--draft-dim) 0 4px, transparent 4px 8px);
    }
    .hs-dim-label { writing-mode: horizontal-tb; transform: none; }
    .hs-flow-steps { grid-column: 1; grid-row: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s7); padding-top: var(--s3); }
    .hs-flow-step { grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); }
    .hs-node svg { width: 96px; height: 96px; }
    .hs-flow-link {
        left: 108px; right: calc(12px - var(--s7)); top: 42px; bottom: auto; width: auto; height: 12px;
        background-position: 8px center; background-size: calc(100% - 16px) 2px;
        --clip-from: inset(0 100% 0 0);
    }
    .hs-flow-link::before { left: 0; top: 2px; }
    .hs-flow-link::after { left: auto; right: 0; top: 1px; bottom: auto; clip-path: polygon(0 0, 100% 50%, 0 100%); }
    .hs-flow .hs-figcap { grid-row: 3; }
    .hs-flow-step:last-child { padding-bottom: 0; }
    .hs-flow-end { right: 0; background-size: calc(100% - 26px) 2px; }
    .hs-flow-link.hs-flow-end::after { left: auto; right: 0; top: -2px; bottom: auto; }
    .hs-flow-goal { left: auto; right: 0; bottom: auto; top: 64px; }
}

/* ===== FIG. 02: the five A's =====
   Desktop: a staircase drawn in section (treads, risers, hatched mass),
   rising from Assess to Advance like the brochure's trajectory, with a
   chalk return loop from Advance back to Assess: reassess regularly.
   Phones: a vertical track of big A's with the return loop running up
   the left edge. */
.hs-stairs { --step: 0.45s; position: relative; margin: var(--s6) 0 0; padding-left: 44px; }
.hs-stairs-cap {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
    margin: 0 0 var(--s6) -44px;
}
.hs-legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); color: var(--text-muted); letter-spacing: 0.08em; }
.hs-legend-item { display: inline-flex; align-items: center; gap: var(--s2); }
.hs-legend-item:first-child { display: none; } /* no stairs drawn below the desktop layout */
.hs-legend-step { width: 16px; height: 10px; border-left: 2px solid var(--draft); border-top: 2px solid var(--draft); }
.hs-legend-loop {
    width: 22px; height: 2px;
    background: repeating-linear-gradient(90deg, var(--chalk) 0 6px, transparent 6px 10px);
}

.hs-stairs-steps { list-style: none; position: relative; }
.hs-stair {
    position: relative;
    display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--s4);
    grid-template-areas: "a meta" "a h3" "a get" "a desc" "a cta";
    grid-template-rows: auto auto auto auto 1fr;
    padding-bottom: var(--s7); max-width: 720px;
}
.hs-stair:last-child { padding-bottom: 0; }
.hs-stair-a {
    grid-area: a; align-self: start; text-align: center;
    font-family: var(--font-display); font-weight: 800; font-size: 4.25rem; line-height: 0.8;
    color: transparent; -webkit-text-stroke: 1.5px var(--draft);
    transition: color 0.25s, -webkit-text-stroke-color 0.25s;
}
.hs-stair:hover .hs-stair-a, .hs-stair:focus-within .hs-stair-a { -webkit-text-stroke-color: var(--chalk); color: var(--chalk-tint); }
.hs-stair-meta { grid-area: meta; display: flex; align-items: center; gap: var(--s3); }
.hs-stair-num { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; color: var(--chalk); }
.hs-stair-icon { width: 30px; height: 30px; overflow: visible; }
.hs-stair h3 { grid-area: h3; margin: var(--s1) 0 var(--s3); }
.hs-stair-get { grid-area: get; color: var(--draft); font-weight: 600; font-size: 1rem; line-height: 1.4; }
.hs-get-k {
    display: block; margin-bottom: 3px;
    font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--text-muted);
}
.hs-stair-desc { grid-area: desc; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.55; margin-top: var(--s3); }
.hs-stair-cta { grid-area: cta; justify-self: start; align-self: start; margin-top: var(--s3); font-weight: 700; font-size: 0.9375rem; }

/* Phones: the track between the A's */
.hs-stair-spine {
    position: absolute; left: 27px; top: 72px; bottom: 10px; width: 2px;
    background: var(--draft-dim);
    --clip-from: inset(0 0 100% 0); --t: 0.25s; --dur: 0.4s;
}
.hs-stair-spine::after {
    content: ""; position: absolute; left: -4px; bottom: -4px; width: 10px; height: 8px;
    background: var(--draft-dim); clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/* Phones: the return loop, one dashed segment per step, drawn upward
   from Advance to Assess after the track is complete. */
.hs-stair-back {
    position: absolute; left: -24px; top: 0; bottom: 0; width: 24px;
    background: repeating-linear-gradient(180deg, var(--chalk) 0 6px, transparent 6px 11px) left top / 2px 100% no-repeat;
    --clip-from: inset(100% 0 0 0); --dur: 0.22s;
    --delay: calc(2.3s + (4 - var(--i, 0)) * 0.22s);
}
.hs-stair:first-child .hs-stair-back {
    top: 30px;
    background:
        repeating-linear-gradient(180deg, var(--chalk) 0 6px, transparent 6px 11px) left top / 2px 100% no-repeat,
        repeating-linear-gradient(90deg, var(--chalk) 0 6px, transparent 6px 11px) left top / calc(100% - 6px) 2px no-repeat;
}
.hs-stair:first-child .hs-stair-back::after {
    content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 10px;
    background: var(--chalk); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.hs-stair:last-child .hs-stair-back {
    bottom: auto; height: 32px;
    background:
        repeating-linear-gradient(180deg, var(--chalk) 0 6px, transparent 6px 11px) left top / 2px 100% no-repeat,
        repeating-linear-gradient(90deg, var(--chalk) 0 6px, transparent 6px 11px) left bottom / 100% 2px no-repeat;
}
.hs-stairs-return {
    position: absolute; left: 0; top: 50%; margin: 0;
    writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
    font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--chalk); white-space: nowrap;
}
.hs-stair-block, .hs-stair-riser, .hs-loop { display: none; }

@media (min-width: 1060px) {
    .hs-stairs {
        --rise: 52px; --base: 36px; --gx: 32px; --drop: 44px; --floor: 36px;
        padding: 0 var(--gx) calc(var(--drop) + var(--floor));
    }
    .hs-stairs-cap {
        position: absolute; left: var(--gx); top: 0; margin: 0; max-width: 20%;
        flex-direction: column; align-items: flex-start;
    }
    .hs-legend { flex-direction: column; align-items: flex-start; }
    .hs-legend-item:first-child { display: inline-flex; }
    .hs-stairs-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; }
    /* the ground line */
    .hs-stairs-steps::after {
        content: ""; position: absolute; left: -20px; right: -20px; bottom: -1px; height: 1px; background: var(--draft-dim);
    }
    .hs-stair {
        grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s3);
        grid-template-areas: "a meta" "h3 h3" "get get" "desc desc" "cta cta";
        grid-template-rows: auto;
        padding: 0 var(--s5) var(--s5) var(--s4); max-width: none;
        margin-bottom: calc(var(--base) + var(--i) * var(--rise));
    }
    .hs-stair:last-child { padding-bottom: var(--s5); }
    .hs-stair-a { font-size: 5.5rem; text-align: left; }
    .hs-stair-meta { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--s2); padding-bottom: 2px; }
    .hs-stair h3 { margin-top: var(--s3); }
    .hs-stair-spine, .hs-stair-back { display: none; }

    /* tread + hatched mass under it, drawn left to right */
    .hs-stair-block {
        display: block; position: absolute; left: 0; right: 0; top: 100%;
        height: calc(var(--base) + var(--i) * var(--rise));
        border-top: 2px solid var(--draft);
        --t: 0.2s; --dur: 0.35s;
    }
    /* the section hatching under the treads: one layer clipped to the stair
       profile, so the pattern runs through without seams; it fades in once
       the profile is drawn */
    .hs-stairs-steps::before {
        content: ""; position: absolute; inset: 0; pointer-events: none;
        background: repeating-linear-gradient(135deg, var(--draft-faint) 0 1px, transparent 1px 10px);
        clip-path: polygon(
            0 100%,
            0 calc(100% - var(--base)), 20% calc(100% - var(--base)),
            20% calc(100% - var(--base) - var(--rise)), 40% calc(100% - var(--base) - var(--rise)),
            40% calc(100% - var(--base) - 2 * var(--rise)), 60% calc(100% - var(--base) - 2 * var(--rise)),
            60% calc(100% - var(--base) - 3 * var(--rise)), 80% calc(100% - var(--base) - 3 * var(--rise)),
            80% calc(100% - var(--base) - 4 * var(--rise)), 100% calc(100% - var(--base) - 4 * var(--rise)),
            100% 100%);
    }
    [data-draw].is-armed .hs-stairs-steps::before { opacity: 0; }
    [data-draw].is-drawn .hs-stairs-steps::before { animation: hsPop 0.8s ease forwards 2.2s; }
    .hs-stair:last-child .hs-stair-block { border-right: 2px solid var(--draft); }
    /* the nosing: a chalk point on the rising path, as in the brochure */
    .hs-stair-block::before {
        content: ""; position: absolute; left: -6px; top: -7px; width: 12px; height: 12px;
        border-radius: 50%; background: var(--chalk);
    }
    /* riser, drawn upward from the previous tread */
    .hs-stair-riser {
        display: block; position: absolute; left: -1px; top: 100%; width: 2px; height: var(--rise);
        background: var(--draft);
        --clip-from: inset(100% 0 0 0); --t: 0s; --dur: 0.2s;
    }
    .hs-stair:first-child .hs-stair-riser { height: var(--base); }

    /* return loop: Advance, down the back, under the floor, up into Assess */
    .hs-loop { display: block; position: absolute; inset: 0; pointer-events: none; }
    .hs-loop-seg { position: absolute; --dur: 0.2s; }
    .hs-loop-top, .hs-loop-run, .hs-loop-in {
        height: 2px; background: repeating-linear-gradient(90deg, var(--chalk) 0 6px, transparent 6px 11px);
    }
    .hs-loop-right, .hs-loop-left {
        width: 2px; background: repeating-linear-gradient(180deg, var(--chalk) 0 6px, transparent 6px 11px);
    }
    .hs-loop-top {
        right: 12px; width: calc(var(--gx) - 12px);
        bottom: calc(var(--drop) + var(--floor) + var(--base) + 4 * var(--rise) - 1px);
        --t: 2.45s; --dur: 0.12s;
    }
    .hs-loop-right {
        right: 12px; bottom: var(--floor);
        height: calc(var(--drop) + var(--base) + 4 * var(--rise));
        --clip-from: inset(0 0 100% 0); --t: 2.57s; --dur: 0.4s;
    }
    .hs-loop-run {
        left: 12px; right: 12px; bottom: var(--floor);
        background-position: right center;
        --clip-from: inset(0 0 0 100%); --t: 2.97s; --dur: 0.6s;
    }
    .hs-loop-left {
        left: 12px; bottom: var(--floor);
        height: calc(var(--drop) + var(--base) / 2);
        --clip-from: inset(100% 0 0 0); --t: 3.57s; --dur: 0.15s;
    }
    .hs-loop-in {
        left: 12px; width: calc(var(--gx) - 16px);
        bottom: calc(var(--floor) + var(--drop) + var(--base) / 2);
        --t: 3.72s; --dur: 0.15s;
    }
    .hs-loop-in::after {
        content: ""; position: absolute; right: -2px; top: -4px; width: 8px; height: 10px;
        background: var(--chalk); clip-path: polygon(0 0, 100% 50%, 0 100%);
    }
    .hs-stairs-return {
        left: 50%; top: auto; bottom: calc(var(--floor) + 12px);
        writing-mode: horizontal-tb; transform: translateX(-50%);
    }
}