/* /how-search-works: the page layer only (VLP-2317).

   WHAT THIS FILE OWNS
   Everything that is this page and no other: the two-column hero with the request reader, the
   four-memories steps, the five-layer stack, the example results, the where-it-runs table and
   the measured figures. Layout additions only: no :root, no new colour. Every value comes from
   the folio tokens in /folio.css, loaded first.

   WHAT IT ASSUMES
   /folio.css for tokens, type, .sec/.head/.wrap, cards, rules, steps, FAQ, nav and footer.
   The page mounts no pinned act, so every section is flow and reads the same under ?static=1. */

/* ---------------- hero ---------------- */
.hero{padding:calc(var(--nav-h) + var(--nav-inset) + 72px) 0 var(--sec-pad)}
.hsw-hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:64px;align-items:center}
.hero-in{min-width:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.hero h1{margin-top:20px;max-width:16ch}
.hero-cta{margin-top:28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hero-lead{margin-top:24px;max-width:48ch;font-size:clamp(15.5px,1.25vw,17px)}

/* ---------------- the request reader ---------------- */
.hsw-demo{min-width:0;background:var(--surface);border:1px solid var(--line-2);border-radius:20px;
  padding:24px;box-shadow:var(--shadow)}
.hsw-demo-k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.hsw-box{margin-top:12px;display:flex;align-items:center;gap:12px;background:var(--ink);
  border:1px solid var(--line-2);border-radius:12px;padding:0 16px;
  transition:border-color .18s}
.hsw-box:focus-within{border-color:var(--blue)}
.hsw-glass{flex:0 0 auto;color:var(--muted)}
.hsw-box input{flex:1 1 auto;min-width:0;background:transparent;border:0;outline:0;color:var(--text);
  font-family:var(--sans);font-size:16px;line-height:1.4;padding:15px 0;-webkit-appearance:none;appearance:none}
.hsw-box input::-webkit-search-cancel-button{display:none}
.hsw-examples{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.hsw-ex{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);
  background:transparent;border:1px solid var(--line-2);border-radius:99px;padding:7px 12px;
  cursor:pointer;transition:color .18s,border-color .18s}
.hsw-ex:hover,.hsw-ex[aria-pressed="true"]{color:var(--text);border-color:var(--blue)}
.hsw-ex:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.hsw-plan{margin-top:20px;border-top:1px solid var(--line)}
.hsw-row{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;padding:13px 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.hsw-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.hsw-v{min-width:0;color:var(--text);font-size:15px;line-height:1.45}
.hsw-tags,.hsw-layers{display:flex;flex-wrap:wrap;gap:6px}
.hsw-t{font-family:var(--mono);font-size:11.5px;line-height:1.3;color:var(--text);
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:6px;padding:4px 8px;
  overflow-wrap:anywhere}
.hsw-t i{font-style:normal;color:var(--muted)}
.hsw-t.is-neg{text-decoration:line-through;text-decoration-color:var(--muted)}
.hsw-l{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--blue);
  border:1px solid rgba(76,141,255,.28);background:rgba(76,141,255,.07);border-radius:99px;padding:4px 10px}
.hsw-note{margin-top:16px;color:var(--dim)}

/* ---------------- four memories ---------------- */
.hsw-four .num{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase}
.hsw-four b{font-family:var(--serif);font-weight:400;font-size:clamp(21px,1.9vw,26px);letter-spacing:-.005em;line-height:1.15}

/* ---------------- the layer stack ---------------- */
.hsw-stack{max-width:1040px;margin:56px auto 0;border-top:1px solid var(--line)}
.hsw-layer{display:grid;grid-template-columns:64px minmax(0,1.35fr) minmax(0,1fr);gap:32px;
  padding:34px 0;border-bottom:1px solid var(--line);align-items:start}
.hsw-n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--blue);padding-top:6px}
.hsw-lt h3{font-family:var(--serif);font-weight:400;font-size:clamp(25px,2.3vw,32px);line-height:1.1;letter-spacing:-.005em}
.hsw-lt p{margin-top:12px;color:var(--muted);font-size:15.5px;line-height:1.6;max-width:56ch;text-wrap:pretty}
.hsw-facts{display:flex;flex-direction:column;gap:10px;padding-top:8px}
.hsw-facts li{position:relative;padding-left:18px;color:var(--text);font-size:14.5px;line-height:1.5}
.hsw-facts li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--blue)}
.hsw-layer code,.hsw-faq code{font-family:var(--mono);font-size:.86em;color:var(--text);
  background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:1px 5px;white-space:nowrap}

/* ---------------- example results ---------------- */
.hsw-results{max-width:860px;margin:52px auto 0;display:flex;flex-direction:column;gap:14px}
.hsw-res{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.hsw-res-h{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.hsw-file{font-family:var(--mono);font-size:13px;color:var(--text);overflow-wrap:anywhere;min-width:0}
.hsw-tc{flex:0 0 auto;font-family:var(--mono);font-size:12px;color:var(--muted)}
.hsw-said{margin-top:10px;color:var(--text);font-size:16px;line-height:1.5}
.hsw-why{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}
.hsw-r{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);
  border:1px solid var(--line-2);border-radius:99px;padding:5px 10px}
.hsw-r:first-child{color:var(--blue);border-color:rgba(76,141,255,.28)}
.hsw-cap{max-width:60ch;margin-left:auto;margin-right:auto}

/* ---------------- where it runs ---------------- */
.hsw-table-wrap{max-width:1040px;margin:52px auto 0;overflow-x:auto;border:1px solid var(--line);
  border-radius:16px;background:var(--surface)}
.hsw-table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.45}
.hsw-table th,.hsw-table td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.hsw-table tbody tr:last-child th,.hsw-table tbody tr:last-child td{border-bottom:0}
.hsw-table thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);font-weight:400}
.hsw-table tbody th{color:var(--text);font-weight:500}
.hsw-table td{color:var(--muted)}
.hsw-table td:last-child{font-family:var(--mono);color:var(--text);white-space:nowrap}

/* ---------------- measured ---------------- */
.hsw-metrics{max-width:1040px;margin:52px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hsw-m{display:flex;flex-direction:column;padding:28px 24px;min-width:0}
.hsw-m+.hsw-m{border-left:1px solid var(--line)}
.hsw-mk{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);line-height:1.5}
.hsw-mv{margin-top:14px;font-family:var(--serif);font-size:clamp(44px,5vw,68px);line-height:1;color:var(--text)}
.hsw-ms{margin-top:10px;color:var(--muted);font-size:14.5px;line-height:1.5}
.hsw-delta{display:block;margin-top:8px;font-family:var(--mono);font-size:11.5px;color:var(--muted)}

/* ---------------- closer ---------------- */
.sec-closer .head .chip{margin:0 auto}
.hsw-links{margin-top:28px;display:flex;gap:22px;justify-content:center;flex-wrap:wrap}

/* ---------------- responsive ---------------- */
@media (max-width:1120px){
  .hsw-hero{gap:40px}
  .hsw-layer{grid-template-columns:52px minmax(0,1fr);gap:20px}
  .hsw-facts{grid-column:2}
}
@media (max-width:940px){
  .hsw-hero{grid-template-columns:minmax(0,1fr)}
  .hero h1{max-width:18ch}
}
@media (max-width:760px){
  .hero{padding-top:calc(var(--nav-h) + var(--nav-inset) + 40px)}
  .hsw-demo{padding:18px;border-radius:16px}
  .hsw-row{grid-template-columns:minmax(0,1fr);gap:8px}
  .hsw-layer{grid-template-columns:minmax(0,1fr);gap:12px;padding:28px 0}
  .hsw-facts{grid-column:auto}
  .hsw-n{padding-top:0}
  .hsw-metrics{grid-template-columns:minmax(0,1fr)}
  .hsw-m+.hsw-m{border-left:0;border-top:1px solid var(--line)}
  .hsw-m{padding:24px 4px}
  .hsw-res-h{flex-direction:column;gap:4px}
  .hsw-ex{min-height:44px;padding:0 14px}
  .hsw-table{font-size:14px;min-width:600px}
}