/* how-it-works.css: the How it works page's own sheet (how-it-works.html; S2-3 of the website build).
 * Three ways in, small pictures of the sample reports with one line each under the two reports' names, three promises.
 * Class prefix: hw-.
 * Tokens only (instrument.css holds the dark palette); no inline styles (CSP); no coloured left or top stripes
 * (colour goes on a full border, a wash, a dot or a chip); no em or en dash. */

.hw-hero { padding: 104px 0 clamp(20px, 3vw, 36px); }
/* the site's one hero headline size (components.css .hero h1): 32 px on a phone, 56 px at 1440 */
.hw-hero h1 { margin: 0 0 10px; font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.05; }
.hw-sub { margin: 0; max-width: 60ch; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.55; color: var(--muted); }
/* the site's button row (components.css .hero .hero-actions): never a ragged wrap, one full-width column on a phone */
.hw-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), max-content)); gap: 12px; margin-top: 22px; }

.hw-sec { padding: clamp(32px, 4vw, 56px) 0; }
.hw-h2 { margin: 0 0 18px; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.08; }
/* (.hw-sec p above sets every paragraph's margin to 0; the lead needs the section in its selector to keep its own) */
.hw-sec .hw-lead { margin: -6px 0 18px; color: var(--muted); }
.hw-sec h3 { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.2; }
.hw-sec p { margin: 0; }

/* ── three ways in ─────────────────────────────────────────────────────── */
.hw-ways { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.hw-way { display: flex; gap: 18px; align-items: flex-start; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.hw-n {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(230, 182, 84, .12); border: 1px solid rgba(230, 182, 84, .5); color: var(--gold);
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
}
.hw-way-body { display: grid; gap: 10px; min-width: 0; flex: 1; }
.hw-way-body > p { max-width: 70ch; color: var(--muted); line-height: 1.55; }
.hw-way-body > .btn { justify-self: start; }
.hw-price {
  display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: var(--r-pill);
  background: rgba(230, 182, 84, .1); border: 1px solid rgba(230, 182, 84, .4);
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; color: var(--gold); vertical-align: middle;
}
.hw-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hw-pair > div { display: grid; gap: 10px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.hw-pair p { color: var(--muted); line-height: 1.55; }
.hw-pair .hw-name { color: var(--ink); font-weight: 700; font-size: 1.05rem; }
.hw-pair .btn { justify-self: start; }
.hw-note { font-size: 0.92rem; color: var(--faint) !important; }

/* ── six small pictures, one line each ─────────────────────────────────── */
.hw-views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hw-view { margin: 0; min-width: 0; }
/* every picture sits in the same 16:10 window and shows its top, so the six read as one row of cards; the frame keeps a
   strip of its own under the picture for the "Open the full example" tag, so the tag never sits on a capture's words */
.hw-view .capture-slot { overflow: hidden; padding-bottom: 40px; border: 1px solid var(--line-2); border-radius: 12px; background: #0b0e0d; }
.hw-view .capture-slot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
/* …except the cost of a click, cut to its content on 27 Sep (768 x 220: the three prices and the pricing note, where the
   16:10 window showed a picture half empty). In that window it would be zoomed until it filled it and lose its prices on
   the right, so it shows whole instead, across two columns wherever the grid has two or three, in a window as tall as a
   16:10 card beside it (3.3 = two columns and a gap, against one column's 16:10; the picture is 3.49, so it fills the
   width and the few pixels left under it are the picture's own ground colour) */
.hw-view--wide { grid-column: span 2; }
.hw-view--wide .capture-slot img { aspect-ratio: 3.3; object-fit: contain; }
.hw-view figcaption { margin: 10px 2px 0; font-size: 0.95rem; line-height: 1.45; color: var(--ink); }
/* the two reports' names over their pictures (the owner's examples of 26 Sep are all the Market report's, so the views say
   whose they are without a sentence), with the page's own price chip; the first sits under the lead, the second clears
   the row of pictures above it */
.hw-sec .hw-group { margin: 34px 0 14px; font-size: 1.1rem; }
.hw-sec .hw-lead + .hw-group { margin-top: 0; }

/* ── three promises ────────────────────────────────────────────────────── */
.hw-promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hw-promise { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.hw-promise p { color: var(--muted); font-size: 0.95rem; line-height: 1.5; }

.hw-close { text-align: left; }

@media (max-width: 920px) {
  .hw-views { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-promises { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .hw-hero { padding-top: 92px; }
  .hw-actions { grid-template-columns: 1fr; }
  .hw-way { flex-direction: column; gap: 12px; padding: 18px; }
  .hw-pair { grid-template-columns: minmax(0, 1fr); }
  .hw-views { grid-template-columns: minmax(0, 1fr); }
  .hw-view--wide { grid-column: auto; }
  .hw-way-body > .btn, .hw-pair .btn { justify-self: stretch; }
  .hw-price { margin: 6px 0 0; }
}