/* how.css — /how-it-works page. Loaded only by how-it-works.html; reuses the
   landing.css design tokens (dark, coral accent, rounded). Matches the site. */
.how{padding:clamp(52px,9vh,116px) 0 clamp(40px,6vh,80px)}
/* anchor jumps (#wrap from step 3, the prompt modal, FAQ) must clear the 76px sticky nav */
#wrap,.aff-block{scroll-margin-top:92px}
.how-head{max-width:730px;margin:0 0 clamp(28px,4.5vh,48px)}
/* hero grid: text left, the live CargoX show right — visible at scroll zero */
.how-head.hh-grid{max-width:none;display:grid;grid-template-columns:minmax(0,680px) minmax(320px,1fr);
  gap:clamp(22px,3vw,44px);align-items:center}
.hh-side{min-width:0}
.hh-media{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line-2);
  background:#0d0d0d;transition:border-color .2s ease,transform .25s ease;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.hh-media:hover{border-color:var(--ink-dim);transform:translateY(-2px)}
.hh-media video{display:block;width:100%;height:auto}
.hh-chrome{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#161619;
  border-bottom:1px solid var(--line)}
.hh-chrome i{width:10px;height:10px;border-radius:50%}
.hh-chrome i:nth-child(1){background:#ff5f57}
.hh-chrome i:nth-child(2){background:#febc2e}
.hh-chrome i:nth-child(3){background:#28c840}
.hh-chrome b{margin-left:10px;font-weight:500;font-size:11.5px;color:var(--ink-dim);letter-spacing:.02em;
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:7px;padding:3px 12px}
.hh-cap{margin:12px 2px 0;font-size:12.5px;line-height:1.5;color:var(--ink-dim)}
.hh-cap em{color:var(--ink);font-style:normal;font-weight:600}

/* reassurance callout */
.how-callout{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line-2);
  background:var(--accent-soft);border-radius:var(--radius);padding:18px 20px;margin-top:24px}
.how-callout .ic{font-size:20px;line-height:1.3;flex:0 0 auto}
.how-callout p{margin:0;color:var(--ink);font-size:15px;line-height:1.55}

/* "works with your builder" pills */
.how-builders{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.how-builder{border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);
  border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:600;white-space:nowrap}

/* two lanes: prompts vs motion backgrounds */
.how-lanes{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:10px}
.how-lane{border:1px solid var(--line);background:var(--bg-soft);border-radius:var(--radius-lg);padding:24px;
  min-width:0}                          /* grid blowout guard: the pre snippet must not widen the card */
.how-lane .how-code{max-width:100%}
.how-lane h3{margin:0 0 12px;font-size:18px;display:flex;align-items:center;gap:10px}
.how-lane ol{margin:0;padding-left:20px;color:var(--ink-dim);line-height:1.75;font-size:14.5px}
.how-lane ol li{margin:6px 0}
.how-lane ol strong{color:var(--ink);font-weight:600}
.how-code{margin:14px 0 0;border:1px solid var(--line);background:#0c0c0e;border-radius:12px;
  padding:16px 18px;overflow-x:auto;font-size:13.5px;line-height:1.7;color:#cdd3e0;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;white-space:pre}
.how-code .t{color:var(--accent-hi)}

/* starter-line template cards ("The line you put above the prompt") */
.how-tpl{border:1px solid var(--line);background:var(--bg-soft);border-radius:var(--radius-lg);
  padding:20px 22px;margin-top:14px}
.how-tpl-label{margin:0;font-size:14px;font-weight:700;color:var(--ink)}
.how-code.wrapline{white-space:pre-wrap;overflow-wrap:anywhere;user-select:all}
.how-tpl-note{margin:12px 0 0;font-size:13.5px;line-height:1.65;color:var(--ink-dim)}
.how-tpl-note em{color:var(--ink)}

/* interactive starter-line composer */
.how-composer{border-color:var(--line-2);background:var(--bg-soft)}
.hc-goals{display:flex;gap:10px;flex-wrap:wrap;border:0;padding:0;margin:14px 0 4px}
.hc-legend{font-size:13px;color:var(--ink-dim);margin-bottom:10px;padding:0}
.hc-goal{cursor:pointer;position:relative}
.hc-goal input{position:absolute;opacity:0;pointer-events:none}
.hc-goal span{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line-2);background:var(--surface-2);
  border-radius:12px;padding:10px 16px;transition:border-color .15s ease}
.hc-goal strong{font-size:14px;color:var(--ink)}
.hc-goal small{color:var(--ink-dim);font-size:12px}
.hc-goal input:checked+span{border-color:var(--accent-hi);background:rgba(255,255,255,.05)}
.hc-goal input:focus-visible+span{outline:2px solid var(--accent-hi);outline-offset:2px}
.hc-row{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.hc-row[hidden]{display:none}   /* display:flex would otherwise defeat the hidden attr */
.hc-label{font-size:12.5px;font-weight:600;color:var(--ink-dim)}
.hc-input{width:100%;box-sizing:border-box;background:#0c0c0e;border:1px solid var(--line);border-radius:10px;
  color:#e6e8ee;font:inherit;font-size:14.5px;line-height:1.55;padding:11px 13px;resize:vertical}
.hc-input:focus{outline:none;border-color:var(--accent-hi)}
.hc-input::placeholder{color:var(--ink-faint,#777)}
.hc-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-dim);margin-top:4px;cursor:pointer}
.hc-out-label{margin-top:16px}
.hc-out{min-height:64px}
.hc-builders{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px}
.hc-b-label{font-size:12.5px;color:var(--ink-dim);margin-right:4px}
.hc-builder{border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);border-radius:999px;
  padding:8px 16px;font-size:13.5px;font-weight:600;cursor:pointer;transition:border-color .15s ease}
.hc-builder:hover{border-color:var(--ink-dim)}
.hc-builder.on{border-color:var(--accent-hi);background:rgba(255,255,255,.06)}
.hc-fallback{margin-top:18px}

/* worked example: cargo-group hero → full CargoX site (top showcase) */
.how-ex{display:grid;grid-template-columns:minmax(220px,400px) 1fr;gap:22px;align-items:start;margin-top:10px}
.how-ex-media img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);display:block}
.how-ex-body p{margin:0 0 12px;color:var(--ink-dim);font-size:14.5px;line-height:1.65}
.how-ex-body p strong{color:var(--ink)}
.how-ex-show{margin-top:10px}
.how-ex-show .how-ex-media{display:block;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  background:#0d0d0d;transition:border-color .2s ease}
.how-ex-show .how-ex-media:hover{border-color:var(--ink-dim)}
.how-ex-show video{display:block;width:100%;height:auto}
.how-ex-cols{display:grid;grid-template-columns:1.05fr 1fr;gap:22px;margin-top:20px;align-items:start}
.how-ex-cols .how-code{margin-top:0}
.how-ex-cols .how-tpl-note{margin-top:10px}

/* content copy buttons: real CTA size (the .sm chip size is for the nav only) */
.how-copy{padding:11px 20px;font-size:13.5px;min-height:44px}
.how-tpl .how-copy{margin-top:12px}

@media(max-width:720px){
  .how-lanes{grid-template-columns:1fr}
  .how-ex{grid-template-columns:1fr}
  .how-ex-cols{grid-template-columns:1fr}
  .how-head.hh-grid{grid-template-columns:1fr}
  .hh-side{order:-1}                   /* mobile: the colorful show FIRST, then the pitch */
  .hc-input{font-size:16px}            /* <16px makes iOS Safari zoom on focus */
  .hc-goal span{padding:12px 16px}     /* comfortable tap targets */
  .hc-builder{padding:10px 16px;min-height:40px}
  .how-copy{min-height:44px}
  .hc-goals{gap:8px}
  .how-tpl{padding:16px 16px}
}