/* /how-it-works — this page's entire visual layer.
 *
 * Written 2026-08-19 to bring the last narrow-column page onto the house band standard. Before this
 * file the page rendered in a 780px column with no section rhythm at all, while every other family
 * (/create/*, the silos, /about) had already moved to a full-width layout — measured side by side at
 * 1280px, this page was the only one still on the old shell's body.
 *
 * The band vocabulary is deliberately COPIED from create-animation.css rather than invented: same
 * gutter, same max column, same tint token, same kicker rule. That file is the reference the comic
 * and Kids MV pages were aligned to earlier this month, and a third dialect of "band" would put the
 * next page's author back where this one started. What is NOT copied is the class prefix — `an-`
 * never appears here and `hiw-` never appears there, because two pages sharing selectors is exactly
 * how the first picture-book attempt ended up reading like a shorter home page.
 *
 * This page has no photography of its own. Its visual weight comes from rhythm: alternating tint,
 * numbered cards, and one reused cover image in the hero. Nothing here downloads a new asset.
 */

/* Margin reset scoped to this page, matching create-animation.css. Without it the browser's default
   heading and paragraph margins return and fight the band padding. :where() keeps specificity at 0
   so any rule below wins without !important — and, importantly, it never matches a <section>, so it
   cannot zero the `margin-inline: auto` the bands depend on (see section-centring.test.js). */
.lp-hiw :where(h1, h2, h3, h4, p, ul, ol, li, figure, figcaption) { margin: 0; padding: 0; }
.lp-hiw :where(ul, ol) { list-style: none; }
.lp-hiw :where(img, svg) { max-width: 100%; }

.lp-hiw {
  --hiw-pad: clamp(36px, 3.6vw, 60px);
  /* Same pair as .landing2026HeaderInner — a content column narrower than the shared header leaves
     the logo and the header button hanging outside the text on wide screens. */
  --hiw-gutter: clamp(24px, 4vw, 72px);
  --hiw-max: 1560px;
  color: var(--rk-ink);
  font-family: var(--rk-font-body);
}

/* ═══ BANDS ═══════════════════════════════════════════════════════════════
   margin-inline (never the `margin` shorthand) — a shorthand here resets the inline margins to 0
   and the section slides to the left edge while keeping its width, which reads as "the design is
   inconsistent" rather than as a broken rule. That exact bug has shipped three times in this
   codebase; section-centring.test.js exists because of it. */
.lp-hiw .hiw-band {
  width: min(calc(100% - 2 * var(--hiw-gutter)), var(--hiw-max));
  margin-inline: auto;
  padding-block: var(--hiw-pad);
}
/* Tint marks the two blocks that carry the page's argument: the four steps, and where to go next. */
.lp-hiw .hiw-band-tint {
  --hiw-inset: clamp(18px, 2.4vw, 44px);
  background: var(--rk-paper-2);
  border-radius: clamp(18px, 1.8vw, 26px);
  padding-inline: var(--hiw-inset);
}

/* ═══ TYPE ════════════════════════════════════════════════════════════════ */
.lp-hiw .hiw-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 12.5px var(--rk-font-body);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--rk-emerald);
}
.lp-hiw .hiw-kicker::before { content: ""; width: 24px; height: 2px; background: currentColor; border-radius: 2px; }

.lp-hiw h1 {
  margin-top: 14px;
  font-family: var(--rk-font-display);
  font-size: clamp(36px, 3.3vw, 54px);
  line-height: 1.07;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.lp-hiw h2 {
  margin-top: 12px;
  font-family: var(--rk-font-display);
  font-size: clamp(28px, 2.5vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.lp-hiw h3 { font: 700 clamp(17px, 1.2vw, 20px)/1.3 var(--rk-font-body); color: var(--rk-ink); }
.lp-hiw .hiw-lede {
  margin-top: 12px;
  color: var(--rk-ink-soft);
  font-size: clamp(15.5px, 1.1vw, 17.5px);
  line-height: 1.6;
  max-width: 62ch;
}
.lp-hiw .hiw-head { max-width: 760px; }

/* ═══ 1 · HERO ════════════════════════════════════════════════════════════
   Copy left, one reused cover right — the same two-column hero shape the create pages use. The
   image is decorative proof, not information, so it drops out entirely below the breakpoint rather
   than stacking and pushing the first step below the fold. */
.lp-hiw .hiw-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: clamp(24px, 3.4vw, 64px);
  align-items: center;
}
.lp-hiw .hiw-hero-art {
  justify-self: end;
  width: min(100%, 420px);
  aspect-ratio: 1 / 1;
  border-radius: clamp(16px, 1.6vw, 24px);
  overflow: hidden;
  box-shadow: var(--rk-shadow-object);
  background: var(--rk-surface);
}
.lp-hiw .hiw-hero-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ═══ 2 · STEPS ═══════════════════════════════════════════════════════════
   Four cards, 2×2 on desktop. The old layout ran them as one tall list, which buried the fact that
   the whole workflow is only four moves — the single most useful thing this page has to say.
   auto-fit rather than a fixed column count so the tablet range degrades on its own. */
.lp-hiw .hiw-steps {
  display: grid;
  /* Two columns, stated rather than auto-fit. There are exactly four steps and they are numbered:
     auto-fit at this container width resolves to three, which lays them out 3 + 1 and makes the
     fourth read as an afterthought instead of the last move in a four-move sequence. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 26px);
  margin-top: clamp(26px, 2.6vw, 40px);
}
.lp-hiw .hiw-step {
  position: relative;
  padding: clamp(22px, 2vw, 30px);
  background: var(--rk-surface);
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius-lg);
  box-shadow: var(--rk-shadow-card);
}
.lp-hiw .hiw-step-num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--rk-emerald-soft);
  color: var(--rk-emerald);
  font: 700 15px var(--rk-font-body);
}
.lp-hiw .hiw-step h3 { margin-top: 14px; }
.lp-hiw .hiw-step p {
  margin-top: 10px;
  color: var(--rk-ink-soft);
  font-size: clamp(14.5px, 1vw, 16px);
  line-height: 1.62;
}

/* ═══ 3 · FORMATS ═════════════════════════════════════════════════════════
   The four things the workflow can produce. Images are the ones /about already ships, so this block
   adds markup and no bytes. Whole card is the link target — a text-only link inside a card is a
   smaller tap target than the card the user is already aiming at. */
.lp-hiw .hiw-formats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(16px, 1.6vw, 26px);
  margin-top: clamp(26px, 2.6vw, 40px);
}
.lp-hiw .hiw-format {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius-lg);
  overflow: hidden;
  background: var(--rk-surface);
  text-decoration: none;
  color: inherit;
  transition: transform .18s, box-shadow .18s;
}
.lp-hiw .hiw-format:hover { transform: translateY(-2px); box-shadow: var(--rk-shadow-card); }
.lp-hiw .hiw-format-art { aspect-ratio: 4 / 3; overflow: hidden; background: var(--rk-paper-2); }
.lp-hiw .hiw-format-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-hiw .hiw-format-body { padding: clamp(16px, 1.4vw, 22px); }
.lp-hiw .hiw-format-body p {
  margin-top: 8px;
  color: var(--rk-ink-soft);
  font-size: clamp(14px, .95vw, 15.5px);
  line-height: 1.55;
}

/* ═══ 4 · NEXT ════════════════════════════════════════════════════════════ */
.lp-hiw .hiw-next-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(12px, 1.2vw, 18px);
  margin-top: clamp(22px, 2.2vw, 32px);
}
.lp-hiw .hiw-crosslink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: var(--rk-surface);
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius-lg);
  text-decoration: none;
  color: var(--rk-ink);
  font: 600 15px var(--rk-font-body);
  transition: border-color .18s, transform .18s;
}
.lp-hiw .hiw-crosslink::after { content: "→"; color: var(--rk-emerald); transition: transform .18s; }
.lp-hiw .hiw-crosslink:hover { border-color: var(--rk-emerald); transform: translateY(-1px); }
.lp-hiw .hiw-crosslink:hover::after { transform: translateX(3px); }

/* ═══ 5 · FAQ ═════════════════════════════════════════════════════════════
   Native <details>. Not a JS accordion: the answers have to be present and readable with scripting
   off, which is what lets an answer engine quote them — the reason this page carries FAQ markup at
   all. */
.lp-hiw .hiw-faq-list { margin-top: clamp(22px, 2.2vw, 34px); display: grid; gap: 10px; }
.lp-hiw .hiw-faq-item {
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius-lg);
  background: var(--rk-surface);
  overflow: hidden;
}
.lp-hiw .hiw-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font: 600 clamp(15px, 1.05vw, 16.5px)/1.45 var(--rk-font-body);
}
.lp-hiw .hiw-faq-item summary::-webkit-details-marker { display: none; }
.lp-hiw .hiw-faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--rk-emerald);
  font: 400 22px/1 var(--rk-font-body);
  transition: transform .2s;
}
.lp-hiw .hiw-faq-item[open] summary::after { transform: rotate(45deg); }
.lp-hiw .hiw-faq-item p {
  padding: 0 22px 20px;
  color: var(--rk-ink-soft);
  font-size: clamp(14.5px, 1vw, 16px);
  line-height: 1.65;
}

/* ═══ RESPONSIVE ══════════════════════════════════════════════════════════
   One breakpoint. The hero collapses to a single column and drops its art; everything else is
   already auto-fit and needs no instruction. */
@media (max-width: 860px) {
  .lp-hiw .hiw-hero { grid-template-columns: 1fr; }
  .lp-hiw .hiw-hero-art { display: none; }
  /* Below this width two step columns leave roughly 26 characters per line, which breaks the
     step text into a ragged tower. One column reads. */
  .lp-hiw .hiw-steps { grid-template-columns: 1fr; }
}