/* ============================================================================
   How it works (/how-it-works, pages/how-it-works.html): layered on tiny.css,
   so the header, brand, headline, the demonstration (.tt-demo, the phone
   frames), the creation buttons (.tt-make) and the footer are the
   homepage's own. This file adds only the four steps, their kicker lines
   and the demonstration's size here (reworked 2026-10-06; the "By text /
   With Tinfle" comparison left with the old angle).

   Contrast, as on the homepage: the step numbers use --tt-coral-big (large
   italic, 25px) and the smaller kicker lines --tt-coral-text (5.4:1).
   ========================================================================== */

/* The page is taller than a phone screen: let the footer follow the
   content instead of being pushed to the bottom of a tall window. There is
   no carousel here, so the column needs no sideways clip, and the
   demonstration may reach a little past the text. */
main.tth { flex: 0 0 auto; display: flex; flex-direction: column; gap: 34px; overflow-x: visible; }

/* ----- the four steps ----- */
.tth-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.tth-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: start; }
.tth-num {
    font-family: var(--tt-serif);
    font-style: italic;
    font-size: 1.6rem;
    line-height: 1.05;
    color: var(--tt-coral-big);
}
.tth-steps h2 {
    margin: 0;
    font-family: var(--tt-serif);
    font-weight: 400;
    font-size: 1.35rem;
    line-height: 1.2;
    color: var(--tt-ink);
}
.tth-steps p { margin: 6px 0 0; font-size: 0.95rem; line-height: 1.5; color: var(--tt-muted); }
/* The kicker under a step: "Tinfle it." (step 01; steps 03/04 lost theirs 2026-10-12) */
.tth-steps .tth-kicker { margin-top: 8px; font-family: var(--tt-serif); font-style: italic; font-size: 1.15rem; line-height: 1.3; color: var(--tt-coral-text); }

/* ----- the demonstration: a little larger than on the homepage ----- */
/* On phones it reaches 10px into the side margins; on tablets and laptops
   it is a 540px band, wider than the text column, centered */
.tth-demo { align-self: center; width: calc(100% + 20px); }
@media (min-width: 720px) {
    .tth-demo { width: 540px; }
}

/* ----- Make one for someone ----- */
.tth-make .tt-proof { justify-content: center; align-items: center; text-align: center; }