/* =====================================================================
   how_it_works.css — /how-it-works, the How It Works design

   Source of truth: bmad-output/redesign-how-it-works/dc/How-It-Works.dc.html.
   The artboard is static inline styles at one desktop width; this sheet is
   those styles written out once as a page vocabulary — the design system's
   mobile tokens as the default (decisions.md §4: there is no mobile
   artboard), the artboard's values from the site's 768px breakpoint. Every
   desktop literal below is a value from the artboard; when goal 11's diff
   finds one that is not, the sheet is wrong, not the artboard.

   ⛔ EVERY SELECTOR THAT NAMES A CLASS NAMES AN hiw- ONE (design contract
   §4.6), so this sheet cannot reach a component on any other page. Enforced
   by tests/test_how_it_works.py. The one body-level rule is scoped with
   :has().

   ⛔ NO CUSTOM PROPERTIES ARE DEFINED HERE (contract §1.6). The design's
   palette ships as literals (decisions.md §3):
     page #FDF8F0  band #F5EDE1  card #FFFEFB  line #E9E0CF
     ink #2C2418   heading #1F5540  forest #2D6A4F  hover #24503C
     body #55503F  muted #6E6555  gold #C8922A
   ===================================================================== */

/* The artboard's helmet paints the whole page #FDF8F0; the shared chrome
   has no background of its own and shows it. Scoped so no other page
   changes. */
body:has(.hiw-page) { background: #FDF8F0; }

.hiw-page {
    font-family: Inter, system-ui, sans-serif;
    color: #2C2418;
    -webkit-font-smoothing: antialiased;
    /* The artboard's root sets no line-height, so every element without one
       of its own renders at `normal`; styles.css gives body 1.6. Explicit
       values below override this where the artboard sets one. */
    line-height: normal;
}
.hiw-page *, .hiw-page *::before, .hiw-page *::after { box-sizing: border-box; }
/* The helmet's `a { color }` / `a:hover`; :where() keeps it at zero
   specificity. The artboard sets no text-decoration on body links, so the
   UA underline stands. */
:where(.hiw-page) a { color: #2D6A4F; }
:where(.hiw-page) a:hover { color: #24503C; }

/* --- Section shells ---------------------------------------------------
   Artboard: <section style="padding:88px 56px"> (Steps: 72px 56px 80px)
   wrapping <div style="max-width:1120px;margin:0 auto">. The band colour
   is full-bleed; the measure is the inner wrapper. Mobile: the tokens'
   48px / 20px. */
.hiw-section, .hiw-band { padding: 48px 20px; }
.hiw-band { background: #F5EDE1; }
.hiw-inner { max-width: 1120px; margin: 0 auto; }

/* --- Type --------------------------------------------------------------- */
.hiw-label, .hiw-kicker, .hiw-card-label {
    margin: 0 0 12px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2D6A4F;
}
.hiw-kicker { margin: 0; }
.hiw-card-label { margin: auto 0 0; }
.hiw-h1 {
    margin: 0 0 18px;
    font-family: Lora, Georgia, serif;
    font-weight: 600;
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    max-width: 700px;
    text-wrap: pretty;
    color: #2C2418;
}
.hiw-h2 {
    margin: 0 0 16px;
    font-family: Lora, Georgia, serif;
    font-weight: 600;
    font-size: 27px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #1F5540;
    text-wrap: pretty;
}
.hiw-h2--tight { margin: 0 0 28px; max-width: 700px; }
.hiw-lede {
    margin: 0 0 40px;
    font-size: 17px;
    line-height: 1.6;
    color: #55503F;
    max-width: 620px;
    text-wrap: pretty;
}
.hiw-sub {
    margin: 0 0 24px;
    font-size: 17px;
    line-height: 1.65;
    color: #6E6555;
    text-wrap: pretty;
}
.hiw-body { margin: 0; font-size: 16px; line-height: 1.65; color: #55503F; }
.hiw-note { margin: 22px 0 0; font-size: 15px; line-height: 1.65; color: #6E6555; max-width: 700px; }

/* --- Cards and grids ---------------------------------------------------- */
.hiw-card {
    background: #FFFEFB;
    border: 1px solid #E9E0CF;
    border-radius: 12px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: none;
}
.hiw-card--feature { border-color: #2D6A4F; }
.hiw-num {
    margin: 0;
    font-family: Lora, Georgia, serif;
    font-weight: 600;
    font-size: 19px;
    color: #C8922A;
}
.hiw-card-title {
    margin: 0;
    font-family: Lora, Georgia, serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.25;
    color: #2C2418;
}
.hiw-tri, .hiw-duo { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
.hiw-plans { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; }

/* --- Credits -------------------------------------------------------------- */
.hiw-credits-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.hiw-rows { margin: 0; padding: 0; }
.hiw-row {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 0;
    border-top: 1px solid #E9E0CF;
    margin: 0;
}
.hiw-row:last-child { border-bottom: 1px solid #E9E0CF; }
.hiw-row-label { margin: 0; font-size: 16px; color: #2C2418; }
.hiw-row-figure {
    margin: 0;
    font-family: Lora, Georgia, serif;
    font-weight: 600;
    font-size: 17px;
    color: #2C2418;
    white-space: nowrap;
}
.hiw-row-figure--free { color: #2D6A4F; }
.hiw-total { margin: 20px 0 0; }
/* The artboard's "How much is free" card is a plain block (no flex, no
   gap): its margins do the spacing. Goal 11 diff, run 1. */
.hiw-free-card { display: block; gap: normal; padding: 26px; }
.hiw-free-title {
    margin: 0 0 10px;
    font-family: Lora, Georgia, serif;
    font-weight: 600;
    font-size: 20px;
    line-height: normal;
    color: #2C2418;
}
.hiw-free-body { margin: 0 0 14px; }
.hiw-free-trial { margin: 0; }

/* --- Pricing -------------------------------------------------------------- */
.hiw-plan { padding: 24px; }
.hiw-plan-name {
    margin: 0;
    font-family: Lora, Georgia, serif;
    font-weight: 600;
    font-size: 19px;
    line-height: normal;
    color: #2C2418;
}
.hiw-price {
    margin: 0;
    font-family: Lora, Georgia, serif;
    font-weight: 600;
    font-size: 34px;
    line-height: 1.1;
    color: #2C2418;
}
/* The unit span sets only size and colour; family and weight are the
   price's (Lora 600), as in the artboard. */
.hiw-price-unit { font-size: 17px; color: #6E6555; }
.hiw-plan-note { margin: 0; font-size: 15px; line-height: 1.65; color: #55503F; }
.hiw-plan-cta { margin-top: auto; font-size: 15px; font-weight: 600; color: #2D6A4F; }

@media (min-width: 768px) {
    .hiw-section, .hiw-band { padding: 88px 56px; }
    .hiw-steps { padding: 72px 56px 80px; }

    .hiw-h1 { font-size: 46px; }
    .hiw-h2 { font-size: 38px; }
    .hiw-lede { font-size: 19px; }
    .hiw-sub { font-size: 18px; }

    .hiw-tri { grid-template-columns: repeat(3, 1fr); }
    .hiw-duo { grid-template-columns: repeat(2, 1fr); }
    .hiw-plans { grid-template-columns: repeat(3, 1fr); }
    .hiw-credits-grid { grid-template-columns: 1.15fr 0.85fr; gap: 56px; }
}