/* How it works (/how-it-works/) only. Shared components live in /styles.css. */

/* ---------- header: note + on-page index ---------- */
.hw-head{ padding-bottom:clamp(40px, 1.5rem + 3vw, 80px); }
.hw-head-note{ margin-top:20px; }
.hw-toc{ margin-top:clamp(48px, 2rem + 3vw, 88px); }
.hw-toc ol{ list-style:none; display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); border-top:1px solid var(--line-2); }
.hw-toc a{ display:flex; flex-direction:column; gap:8px; padding:16px 16px 0 0; font-weight:600; font-size:var(--t-small); letter-spacing:-.012em; text-decoration:none; color:var(--ink-2); transition:color .15s; }
@media (hover: hover) and (pointer: fine){
  .hw-toc a:hover{ color:var(--ink); }
  .hw-toc a:hover .label{ color:var(--ink-2); }
}
.hw-toc .label{ color:var(--ink-3); font-variant-numeric:tabular-nums; transition:color .15s; }

/* Chapter anchors sit on the h2s; the global scroll-padding-top (88px) lands them just under the header. */

/* ---------- shared two-column chapter: copy + one phone ---------- */
.hw-split{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center; gap:clamp(40px, 6vw, 112px); }
.hw-split.rev{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
.hw-copy{ max-width:600px; }
.hw-copy .lede{ margin-top:24px; }
.hw-copy .kv, .hw-copy .rows{ margin-top:40px; }
.hw-copy > .note{ margin-top:16px; }
.hw-copy .actions{ margin-top:36px; gap:24px; }
.hw-more{ margin-top:28px; }
.hw-dev{ justify-self:center; max-width:310px; }

/* ---------- 01 scan: phone + homes + cars ---------- */
.hw-scan{ display:grid; grid-template-columns:minmax(0,280px) minmax(0,1fr) minmax(0,1fr); gap:clamp(32px, 4vw, 72px); align-items:start; }
.hw-sticky{ position:sticky; top:100px; }
.hw-mode h3{ display:flex; align-items:center; gap:12px; }
.hw-mode h3 .i{ width:24px; height:24px; color:var(--ink-2); }
.hw-mode .dim{ margin:12px 0 28px; max-width:44ch; }
.hw-mode .note{ margin-top:20px; }
.hw-mode .measure{ color:var(--ink); }

/* ---------- 03 scan again: copy + one phone ---------- */
.hw-pair{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center; gap:clamp(40px, 6vw, 112px); }
.hw-pair .rows > div{ grid-template-columns:96px minmax(0,1fr); }

/* ---------- 04 compare: the six stages as a table; mono only in the parameter column ---------- */
.hw-band{ border-block:1px solid var(--line); }
table.data.hw-pipe{ font-size:var(--t-body); }
table.data.hw-pipe thead th{ padding-bottom:12px; font:500 13px/1.35 var(--font); letter-spacing:0; text-transform:none; color:var(--ink-3); }
table.data.hw-pipe tbody th{ width:22%; padding:22px 24px 22px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font:600 var(--t-body)/1.45 var(--font-display); letter-spacing:-.012em; text-transform:none; color:var(--ink); white-space:normal; }
table.data.hw-pipe td{ padding:22px 32px 22px 0; line-height:1.55; }
table.data.hw-pipe td:first-of-type{ color:var(--ink-2); max-width:56ch; }
table.data.hw-pipe td:last-child{ width:26%; padding-right:0; }
.hw-pipe .mono{ display:block; font-size:var(--t-micro); line-height:1.6; color:var(--ink); white-space:nowrap; }
.hw-limits{ margin-top:32px; }

/* ---------- 05 review: the four calls ---------- */
.hw-status{ list-style:none; margin-top:40px; border-top:1px solid var(--line-2); }
.hw-status li{ display:grid; grid-template-columns:auto minmax(0,150px) auto minmax(0,1fr); align-items:baseline; gap:6px 14px; padding:18px 0; border-bottom:1px solid var(--line); }
.hw-status .dot{ align-self:center; }
.hw-status b{ font-weight:600; letter-spacing:-.012em; }
.hw-status .label{ white-space:nowrap; }
.hw-status p{ color:var(--ink-2); font-size:var(--t-small); }
.hw-copy .measure{ color:var(--ink); font-size:.86em; }

/* ---------- 07 record: phone + contents ---------- */
.hw-record{ display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(40px, 6vw, 112px); align-items:start; }
.hw-record .hw-dev{ position:sticky; top:100px; }
.hw-contents > div{ grid-template-columns:minmax(0,200px) minmax(0,1fr); padding:18px 0; }
.hw-contents dd{ font-size:var(--t-small); }
.hw-contents-note{ margin-top:20px; }

/* ---------- 06 Fair Charge: one sample check, drawn in HTML ---------- */
.hw-fc{ margin:0; padding:32px; border-radius:var(--radius-lg); background:var(--card); box-shadow:inset 0 0 0 1px var(--line); }
.hw-fc-figs{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; margin:28px 0 32px; }
.hw-fc-figs > div{ display:grid; gap:8px; }
.hw-fc-figs .big-num{ font-size:clamp(2.25rem, 1.4rem + 2.2vw, 3.5rem); white-space:nowrap; }
.hw-fc-range{ --from:15%; --to:25%; --at:80%; }
.hw-fc-figs .hw-fc-charged{ color:var(--new); }
.hw-fc-figs .hw-fc-typical{ color:var(--sealed); }
.hw-fc-verdict{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-top:28px; }

/* ---------- closing: one line to Security + the one primary action ---------- */
.hw-close{ padding-block:clamp(56px, 2rem + 4vw, 112px); }
.hw-close-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px 48px; }
.hw-close-line{ font-size:var(--t-lede); line-height:1.45; letter-spacing:-.014em; color:var(--ink-2); max-width:44ch; }
.hw-close-line .more{ margin-left:.25em; }
.hw-close-cta{ display:grid; gap:12px; justify-items:start; }

/* ---------- responsive ---------- */
@media (max-width: 1020px){
  .hw-toc ol{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .hw-toc li:nth-child(n+5) a{ padding-top:20px; }
  .hw-scan{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .hw-sticky{ position:static; grid-column:1 / -1; justify-self:center; max-width:260px; margin-bottom:24px; }
}
@media (max-width: 860px){
  .hw-split, .hw-split.rev, .hw-pair, .hw-record{ grid-template-columns:minmax(0,1fr); }
  .hw-split .hw-dev, .hw-pair .hw-dev, .hw-record .hw-dev{ position:static; order:2; max-width:240px; }
  .hw-split.rev .hw-dev{ order:2; }
  .hw-scan{ grid-template-columns:minmax(0,1fr); gap:56px; }
  .hw-sticky{ grid-column:auto; margin-bottom:0; }
  /* Pipeline: each stage becomes a stacked row (name, what happens, parameters). */
  .hw-pipe thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .hw-pipe tbody{ display:block; border-top:1px solid var(--line-2); }
  .hw-pipe tr{ display:block; padding:20px 0; border-bottom:1px solid var(--line); }
  table.data.hw-pipe tbody th, table.data.hw-pipe td{ display:block; width:auto; padding:0; border:0; }
  table.data.hw-pipe td:first-of-type{ margin-top:6px; font-size:var(--t-small); }
  table.data.hw-pipe td:last-child{ width:auto; margin-top:10px; }
  .hw-pipe .mono{ display:inline; white-space:normal; color:var(--ink-2); }
  .hw-pipe .mono + .mono::before{ content:" \00B7  "; color:var(--ink-4); }
}
@media (max-width: 560px){
  .hw-toc ol{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hw-toc li:last-child{ grid-column:1 / -1; }
  .hw-toc li a, .hw-toc li:nth-child(n+5) a{ flex-direction:row; align-items:baseline; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }
  .hw-status li{ grid-template-columns:auto minmax(0,1fr) auto; }
  .hw-status p{ grid-column:2 / -1; }
  .hw-pair .rows > div, .hw-contents > div{ grid-template-columns:minmax(0,1fr); }
  .hw-fc{ padding:24px 20px; }
  .hw-close-cta, .hw-close-cta .btn{ width:100%; }
}