/* ==========================================================================
   HOW IT WORKS — the page that has to answer every question someone would
   otherwise phone in. Long, but never a wall: a zipper of steps, a protocol,
   a self-qualifier, and the limits stated without apology.
   ========================================================================== */

[hidden] { display: none !important; }
.how-nojs-phone { font-family: var(--font-mono); font-weight: 600; text-decoration: underline; }

/* In-prose link that still clears a 32px tap target: it sits on its own line
   with real vertical padding instead of being a 17px-tall word in a sentence. */
.how-ilink {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  width: fit-content; max-width: 100%;
  margin-top: 0.25rem; padding-block: 0.5rem;
  font-size: var(--t-sm); font-weight: 650; color: var(--fg);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  transition: color var(--fast) var(--ease);
}
.how-ilink svg { flex: none; transition: transform var(--base) var(--ease-out); }
.how-ilink:hover { color: var(--signal-deep); }
.how-ilink:hover svg { transform: translateX(3px); }
.on-dark .how-ilink:hover { color: var(--signal); }

/* --------------------------------------------------------------------------
   HERO — promise on the left, an index on the right so nobody has to hunt.
   -------------------------------------------------------------------------- */
.how-hero {
  padding-block: clamp(2.25rem, 1rem + 5vw, 4.5rem) clamp(2.5rem, 1rem + 6vw, 5.25rem);
  background:
    radial-gradient(72% 108% at 6% -14%, color-mix(in srgb, var(--ink-700) 90%, var(--signal)) 0%, transparent 62%),
    url('../../img/pattern-grid.svg') 0 0 / 80px 80px repeat,
    var(--ink-900);
}
.how-hero__inner { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 62em) {
  .how-hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: var(--s-9); align-items: center; }
}
.how-hero__lede { min-width: 0; }
.how-hero h1 {
  margin-top: var(--s-3);
  font-size: clamp(2.75rem, 1.4rem + 5vw, 5rem);
  line-height: 0.9;
}
.how-hero .lead { margin-top: var(--s-5); max-width: 48ch; }
.how-hero__cta { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 33.99em) { .how-hero__cta .btn { width: 100%; } }
.how-hero__fine { margin-top: var(--s-4); font-size: var(--t-xs); color: var(--fg-muted); max-width: 56ch; }

/* The index reads as a shop clipboard: mono numbers, hairlines, no chrome. */
.how-index {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--ink-800) 82%, transparent);
  padding: var(--s-5);
}
.how-index__t {
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-muted);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule);
}
.how-index__list a {
  display: flex; align-items: baseline; gap: var(--s-4);
  min-height: 44px; padding-block: 0.5625rem; border-bottom: 1px solid var(--rule);
  font-size: var(--t-sm); font-weight: 550; color: var(--fg-muted);
  transition: color var(--fast) var(--ease), padding-left var(--fast) var(--ease);
}
.how-index__list li:last-child a { border-bottom: 0; padding-bottom: 0; }
.how-index__list a .num { color: var(--steel-500); font-size: var(--t-xs); flex: none; }
.how-index__list a:hover { color: var(--paper); padding-left: 4px; }
.how-index__list a:hover .num { color: var(--signal); }

/* --------------------------------------------------------------------------
   THE FOUR STEPS — alternating zipper, never four identical cards.
   -------------------------------------------------------------------------- */
.how-steps { display: grid; gap: var(--s-9); counter-reset: none; }
@media (min-width: 62em) { .how-steps { gap: var(--s-10); } }

.how-step { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 52em) {
  .how-step { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s-8); align-items: center; }
  .how-step:nth-child(even) .how-step__art { order: 2; }
}
.how-step__art {
  border: 1px solid var(--rule-strong); border-radius: var(--r-lg);
  overflow: hidden; background: var(--ink-800); box-shadow: var(--e-2);
}
.how-step__art img { width: 100%; }
.how-step__body { min-width: 0; }
.how-step__n {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--tr-label);
  color: var(--fg-subtle); display: flex; align-items: center; gap: var(--s-3);
}
.how-step__n::after { content: ''; height: 1px; flex: 1; background: var(--rule); }
.how-step__body h3 { margin-top: var(--s-3); }
.how-step__lead {
  margin-top: var(--s-2); font-size: var(--t-lead); font-weight: 550;
  color: var(--fg); line-height: 1.4; max-width: 34ch;
}
.how-step__body > p:not(.how-step__n):not(.how-step__lead) {
  margin-top: var(--s-4); color: var(--fg-muted); max-width: 60ch;
}

/* Instrument-readout facts under each step. */
.how-facts {
  margin-top: var(--s-5); display: grid; gap: 0;
  border-top: 1px solid var(--rule);
}
.how-facts li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  min-height: 44px; padding-block: 0.5625rem; border-bottom: 1px solid var(--rule);
  font-size: var(--t-xs);
}
.how-facts__k {
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-subtle);
}
.how-facts__v { font-weight: 600; color: var(--fg); text-align: right; }
.how-facts__v .num { font-weight: 600; }

.how-step__note {
  margin-top: var(--s-4); font-size: var(--t-xs); color: var(--fg-muted);
  font-family: var(--font-mono); line-height: 1.55; max-width: 52ch;
}
.how-step__aside {
  display: flex; gap: var(--s-3); align-items: flex-start;
  margin-top: var(--s-5); padding: var(--s-4) var(--s-4) var(--s-4) var(--s-4);
  background: var(--bg-sunk); border-left: 3px solid var(--ink-800); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--t-sm); color: var(--fg-muted);
}
.how-step__aside svg { color: var(--fg); flex: none; margin-top: 2px; }
.how-step__aside a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   THE LIFT PROTOCOL
   -------------------------------------------------------------------------- */
.how-proto-section {
  background:
    url('../../img/pattern-grid.svg') 0 0 / 80px 80px repeat,
    var(--ink-900);
}
.how-proto__inner { display: grid; gap: var(--s-7); }
@media (min-width: 62em) {
  .how-proto__inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: var(--s-9); align-items: start;
  }
}
.how-proto__lede, .how-proto__col { min-width: 0; }
.how-proto__art {
  margin-top: var(--s-6); max-width: 26rem;
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  overflow: hidden; background: var(--ink-800);
}
.how-proto__art img { width: 100%; }
.how-proto__art figcaption {
  padding: var(--s-4) var(--s-5); border-top: 1px solid var(--rule);
  font-size: var(--t-xs); color: var(--fg-muted);
}

.how-proto { display: grid; border-top: 1px solid var(--rule); }
.how-proto__step {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4) var(--s-5);
  padding-block: var(--s-5); border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.how-proto__n {
  font-size: var(--t-sm); font-weight: 600; color: var(--steel-500);
  letter-spacing: 0.02em;
}
.how-proto__step p:last-child { color: var(--fg); font-size: var(--t-sm); line-height: 1.62; }
.how-proto__step:nth-child(4) { background: color-mix(in srgb, var(--ink-700) 70%, transparent); }
.how-proto__step:nth-child(4) .how-proto__n { color: var(--signal); }
.how-proto__step:nth-child(4) p:last-child { font-weight: 600; }
@media (min-width: 62em) {
  .how-proto__step:nth-child(4) { margin-inline: calc(-1 * var(--s-4)); padding-inline: var(--s-4); }
}
.how-proto__note { margin-top: var(--s-6); }

/* --------------------------------------------------------------------------
   IS MY VEHICLE A FIT — self-qualifier
   -------------------------------------------------------------------------- */
.how-fit { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 62em) {
  .how-fit { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-7); }
  .how-fit__verdict { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}
.how-fit__formT {
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-muted);
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--rule);
}
.how-fit__qs { display: grid; }
.how-q { border: 0; padding: var(--s-5) 0 0; margin: 0; border-bottom: 1px solid var(--rule); padding-bottom: var(--s-5); }
.how-fit__qs .how-q:last-child { border-bottom: 0; padding-bottom: 0; }
.how-q__legend { padding: 0; font-size: 1.0625rem; font-weight: 650; color: var(--fg); line-height: 1.4; }
.how-q__n {
  display: inline-block; margin-right: 0.5rem;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--tr-label);
  color: var(--fg-subtle); vertical-align: 1px;
}
.how-q__seg {
  position: relative; display: grid; width: 100%;
  grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: var(--s-4);
}
.how-q__seg label { min-width: 0; padding-inline: 0.5rem; }
.how-q__help { margin-top: var(--s-3); font-size: var(--t-xs); color: var(--fg-muted); line-height: 1.55; max-width: 62ch; }

.how-fit__panel {
  border: 1.5px solid var(--rule-strong); border-radius: var(--r-lg);
  background: var(--bg-raised); padding: var(--s-5); box-shadow: var(--e-1);
}
.how-fit__panel--go { border-color: color-mix(in srgb, var(--go) 42%, transparent); background: var(--go-wash); }
.how-fit__panel--flag { border-color: var(--rule-strong); background: var(--bg-raised); }
.how-fit__vT {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: var(--tr-display); font-size: 1.375rem; line-height: 1.1; color: var(--fg);
}
.how-fit__vBody { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--fg-muted); line-height: 1.62; }
.how-fit__panel--go .how-fit__vBody { color: #16603A; }
.how-fit__panel .btn { margin-top: var(--s-5); }
.how-fit__vFine { margin-top: var(--s-4); font-size: var(--t-xs); color: var(--fg-muted); line-height: 1.55; }

.how-fit__flags { margin-top: var(--s-5); display: grid; gap: var(--s-4); }
.how-fit__flags li { border-top: 1px solid var(--rule); padding-top: var(--s-4); }
.how-fit__flagQ { font-size: var(--t-sm); font-weight: 650; color: var(--fg); line-height: 1.45; }
.how-fit__flagWhy { margin-top: 0.375rem; font-size: var(--t-xs); color: var(--fg-muted); line-height: 1.55; }
.how-fit__flagNote {
  margin-top: var(--s-3); padding: 0.5rem 0.6875rem;
  background: var(--ink-900); border-radius: var(--r-sm);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
}
.how-fit__flagTag {
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--steel-500);
}
.how-fit__flagNote .num { font-size: var(--t-xs); font-weight: 600; color: var(--signal); letter-spacing: 0; }

/* Hard limits */
.how-fit__hard { margin-top: var(--s-8); }
.how-fit__hardT {
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-muted);
  padding-bottom: var(--s-3); border-bottom: 1.5px solid var(--rule-strong);
}
.how-limits { display: grid; }
.how-limits li {
  display: grid; gap: 0.375rem var(--s-6); padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule); font-size: var(--t-sm); color: var(--fg-muted);
}
@media (min-width: 46em) { .how-limits li { grid-template-columns: 12rem minmax(0, 1fr); align-items: baseline; } }
.how-limits__k { font-weight: 650; color: var(--fg); }
.how-limits__k.num { font-size: 1.0625rem; letter-spacing: -0.03em; }
.how-fit__stop { margin-top: var(--s-6); }

/* --------------------------------------------------------------------------
   SCOPE — included / bring
   -------------------------------------------------------------------------- */
.how-scope-section { background: var(--bg-sunk); border-block: 1px solid var(--rule); }
.how-scope { display: grid; gap: var(--s-6); }
@media (min-width: 52em) { .how-scope { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
.how-scope__col {
  background: var(--bg-raised); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: var(--s-6);
}
.how-scope__t { display: flex; align-items: center; gap: var(--s-3); font-size: 1.25rem; }
.how-scope__mark {
  width: 26px; height: 26px; border-radius: var(--r-xs); flex: none;
  display: grid; place-items: center; color: var(--paper); background: var(--ink-800);
}
.how-scope__mark--yes { background: var(--go); }
.how-scope__mark--bring { background: var(--ink-800); }
.how-scope__list { margin-top: var(--s-5); }
.how-scope__list li {
  position: relative; padding-left: var(--s-6); padding-block: 0.5rem;
  font-size: var(--t-sm); color: var(--fg); border-top: 1px solid var(--rule);
}
.how-scope__list li:first-child { border-top: 0; padding-top: 0; }
.how-scope__list li::before {
  content: ''; position: absolute; left: 0; top: 1.05em;
  width: 10px; height: 2px; background: var(--rule-strong);
}
.how-scope__list li:first-child::before { top: 0.6em; }
.how-scope__foot { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.how-scope__foot a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   WHAT WE DO NOT DO — stated at size, not hidden in fine print.
   -------------------------------------------------------------------------- */
.how-limits-section {
  background:
    url('../../img/pattern-grid.svg') 0 0 / 80px 80px repeat,
    var(--ink-900);
}
.how-nots { counter-reset: not; border-top: 1px solid var(--rule); }
.how-nots li {
  counter-increment: not;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4) var(--s-5);
  align-items: start; padding-block: var(--s-5);
  border-bottom: 1px solid var(--rule);
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.4375rem);
  font-weight: 550; line-height: 1.42; color: var(--fg); max-width: 70ch;
}
.how-nots li::before {
  content: counter(not, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.06em; color: var(--steel-500);
  padding-top: 0.45em;
}
.how-limits__tail {
  margin-top: var(--s-7); max-width: 62ch;
  font-size: var(--t-sm); color: var(--fg-muted); line-height: 1.68;
  padding-left: var(--s-5); border-left: 2px solid var(--rule-strong);
}

/* --------------------------------------------------------------------------
   TIME AND THE BUFFER
   -------------------------------------------------------------------------- */
.how-buffer { padding: var(--s-6); }
.how-buffer__track {
  display: grid; grid-template-columns: 1.6fr 0.5fr 3fr 0.5fr 1.6fr;
  height: 46px; border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--rule-strong);
}
.how-buffer__seg--other { background: var(--bg-sunk); }
.how-buffer__seg--buf {
  background: repeating-linear-gradient(-45deg,
    var(--steel-200) 0 6px, var(--bg-sunk) 6px 12px);
  border-inline: 1px solid var(--rule-strong);
}
.how-buffer__seg--yours { background: var(--ink-800); }
.how-buffer__legend { margin-top: var(--s-5); display: grid; gap: var(--s-4); }
@media (min-width: 52em) { .how-buffer__legend { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.how-buffer__legend li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); font-size: var(--t-xs); color: var(--fg-muted); line-height: 1.55; }
.how-buffer__legend strong { display: block; color: var(--fg); font-size: var(--t-sm); font-weight: 650; margin-bottom: 2px; }
.how-buffer__key { width: 14px; height: 14px; border-radius: 3px; margin-top: 4px; border: 1px solid var(--rule-strong); }
.how-buffer__key--other { background: var(--bg-sunk); }
.how-buffer__key--buf { background: repeating-linear-gradient(-45deg, var(--steel-200) 0 4px, var(--bg-sunk) 4px 8px); }
.how-buffer__key--yours { background: var(--ink-800); }

.how-time__notes { margin-top: var(--s-7); }
.how-note { padding-top: var(--s-4); border-top: 2px solid var(--ink-800); }
.how-note__t { font-size: 1.125rem; }
.how-note p { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--fg-muted); }
.how-time__cancel { margin-top: var(--s-7); }
.how-time__cancel a { color: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   RULES
   -------------------------------------------------------------------------- */
.how-rules-section { background: var(--bg-sunk); border-block: 1px solid var(--rule); }
.how-rules { counter-reset: rule; display: grid; gap: var(--s-5); }
@media (min-width: 46em) { .how-rules { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-7); } }
@media (min-width: 72em) { .how-rules { grid-template-columns: repeat(2, 1fr); } }
.how-rule {
  counter-increment: rule; position: relative;
  background: var(--bg-raised); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: var(--s-5) var(--s-5) var(--s-5) var(--s-8);
}
.how-rule::before {
  content: counter(rule, decimal-leading-zero);
  position: absolute; left: var(--s-5); top: var(--s-5);
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.04em; color: var(--fg-subtle);
}
.how-rule h3 { font-size: 1.125rem; }
.how-rule p { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--fg-muted); }

/* --------------------------------------------------------------------------
   FIRST TIMER
   -------------------------------------------------------------------------- */
.how-first { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 62em) {
  .how-first { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-9); }
  .how-first__lede { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}
.how-first__lede .btn { margin-top: var(--s-6); }
.how-first__list { display: grid; border-top: 1px solid var(--rule-strong); }
.how-first__list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4) var(--s-5);
  padding-block: var(--s-5); border-bottom: 1px solid var(--rule);
  font-size: var(--t-sm); color: var(--fg-muted); line-height: 1.68;
}
.how-first__list strong { color: var(--fg); font-weight: 650; }
.how-first__n {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  border: 1.5px solid var(--rule-strong); color: var(--fg);
  font-size: var(--t-xs); font-weight: 600;
}

/* --------------------------------------------------------------------------
   CLOSING CTA
   -------------------------------------------------------------------------- */
.how-close {
  background:
    radial-gradient(70% 130% at 92% 0%, color-mix(in srgb, var(--ink-700) 88%, var(--signal)) 0%, transparent 60%),
    var(--ink-900);
}
.how-close__inner { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 62em) { .how-close__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-9); } }
.how-close h2 { font-size: var(--t-d2); }
.how-close .lead { margin-top: var(--s-4); max-width: 52ch; }
.how-close .lead strong { color: var(--paper); }
.how-close__act { display: grid; gap: var(--s-3); justify-items: stretch; }
@media (min-width: 34em) { .how-close__act { justify-items: start; } }
@media (min-width: 62em) { .how-close__act { justify-items: end; } }
.how-close__fine { color: var(--fg-muted); max-width: 32ch; }
@media (min-width: 62em) { .how-close__fine { text-align: right; } }