/* how.css — "How it works" (#Product), after Meta Muse like the hero (hero3.css): one quiet eyebrow,
   one big headline with a ghosted second line, three steps in one row, one CTA. Replaces the two
   tall alternating Stress Lab / William blocks (owner 2026-10-21: "too large vertically, simplify it").
   The real app scenes and the blue/orange gradients stay, cropped into the step cards. */
.hw-section { position: relative; overflow: hidden; }
.hw-section::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(640px 280px at 50% 0, rgba(60,110,246,.10), transparent 70%); }
.hw {
  --hw-d: Sora, Outfit, system-ui, sans-serif; --hw-t: 'Public Sans', system-ui, sans-serif;
  --hw-ink: #fff; --hw-mute: rgba(255,255,255,.55); --hw-ghost: #8e8e95;
  --hw-card: #161618; --hw-line: rgba(255,255,255,.08); --hw-field: #232326;
  position: relative; padding: clamp(64px, 10vh, 112px) 0 clamp(56px, 9vh, 96px); font-family: var(--hw-t); color: var(--hw-ink);
}

/* ── head ── */
.hw-head { text-align: center; margin-bottom: clamp(36px, 6vh, 60px); }
.hw-eye { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font: 500 13px/1 var(--hw-t); color: var(--hw-mute); }
.hw-eye::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3c6ef6; box-shadow: 0 0 12px #3c6ef6; }
.hw .hw-h { display: flex; flex-direction: column; align-items: center; margin: 0;
  font: 600 clamp(36px, 5vw, 64px)/1.04 var(--hw-d); letter-spacing: -.045em; color: var(--hw-ink); text-wrap: balance; }
.hw-ghost { color: var(--hw-ghost); }

/* ── the three steps ── */
.hw-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hw-card { display: flex; flex-direction: column; margin: 0; border-radius: 28px; background: var(--hw-card);
  border: 1px solid var(--hw-line); overflow: hidden; transition: border-color .3s, transform .5s cubic-bezier(.2,.7,.2,1); }
.hw-card:hover { border-color: rgba(255,255,255,.16); transform: translateY(-4px); }
.hw-vis { position: relative; height: 248px; margin: 8px 8px 0; border-radius: 21px; overflow: hidden; background: #0e0e10; }
.hw-txt { padding: 22px 26px 28px; }
.hw-n { display: block; margin-bottom: 12px; font: 500 12px/1 var(--hw-t); letter-spacing: .08em; color: rgba(255,255,255,.52); font-variant-numeric: tabular-nums; }
.hw-txt h3 { margin: 0 0 8px; font: 600 22px/1.2 var(--hw-d); letter-spacing: -.03em; color: var(--hw-ink); }
.hw-txt p { margin: 0; font: 400 15px/1.5 var(--hw-t); color: var(--hw-mute); }

/* 01 — the hero's own pill, in miniature */
.hw-vis-ask { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0 18px; }
.hw-glow { position: absolute; inset: 0; background: radial-gradient(220px 140px at 50% 45%, rgba(60,110,246,.28), transparent 72%); }
.hw-bar { position: relative; display: flex; align-items: center; width: 100%; max-width: 340px; height: 56px; padding: 0 6px 0 18px;
  border-radius: 999px; background: var(--hw-field); border: 1px solid var(--hw-line); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.hw-f { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0 10px; text-align: left; }
.hw-f:first-child { flex: .6 1 auto; padding-left: 0; }
.hw-f + .hw-f::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--hw-line); }
.hw-f em { font: 500 10.5px/1 var(--hw-t); font-style: normal; color: rgba(255,255,255,.56); white-space: nowrap; }
.hw-f b { font: 500 14px/1.2 var(--hw-t); color: #fff; white-space: nowrap; }
.hw-f b.usd::before { content: "$"; color: rgba(255,255,255,.5); }   /* in CSS so the illustration carries no dollar figure in the page text (verify-site L-6) */
.hw-caret { display: inline-block; width: 1.5px; height: 14px; margin-left: 2px; vertical-align: -2px; background: #7c9cff; animation: hwBlink 1.1s steps(1) infinite; }
.hw-go { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: #111; }
.hw-go svg { width: 18px; height: 18px; }
.hw-card:hover .hw-go { background: #e8ecff; }
.hw-sub { position: relative; display: flex; gap: 8px; }
.hw-sub span { padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.05); font: 500 11.5px/1 var(--hw-t); color: rgba(255,255,255,.56); }
@keyframes hwBlink { 50% { opacity: 0; } }

/* 02 / 03 — the app's real scenes over the template's gradients */
.hw-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.hw-shot { position: absolute; max-width: none; height: auto; filter: drop-shadow(0 16px 30px rgba(0,0,0,.5));
  transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.hw-shot-lab { width: 150%; left: -6%; top: 14px; }
.hw-shot-will { width: 150%; left: -25%; top: -22%; }
.hw-card:hover .hw-shot { transform: scale(1.04) translateY(-4px); }

/* ── CTA ── */
.hw-cta { display: flex; justify-content: center; margin-top: clamp(32px, 5vh, 48px); }
.hw-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px 0 26px; border-radius: 999px;
  background: #fff; color: #111; font: 600 15px/1 var(--hw-t); text-decoration: none; transition: background .2s, transform .2s; }
.hw-btn svg { width: 18px; height: 18px; transition: transform .2s; }
.hw-btn:hover { background: #e8ecff; color: #111; }
.hw-btn:hover svg { transform: translateX(3px); }

/* ── reveal (js/how.js adds .hw-js, then .is-in per card; without JS everything simply shows) ── */
.hw-js .hw-head, .hw-js .hw-card, .hw-js .hw-cta { opacity: 0; transform: translateY(24px); filter: blur(6px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), filter .8s, border-color .3s; }
.hw-js .is-in { opacity: 1; transform: none; filter: none; }
.hw-js .hw-card.is-in:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .hw-js .hw-head, .hw-js .hw-card, .hw-js .hw-cta { opacity: 1; transform: none; filter: none; transition: none; }
  .hw-caret { animation: none; } .hw-card:hover, .hw-card:hover .hw-shot { transform: none; }
}

/* ── tablet: two up, the third full width; phone: one column, shorter pictures ── */
@media (max-width: 991px) {
  .hw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-card:last-child { grid-column: 1 / -1; }
  .hw-card:last-child .hw-shot-will { width: 90%; left: 5%; top: -12%; }
}
/* phones: the three cards become one swipeable row (scroll-snap), so the section stays one screen tall */
@media (max-width: 640px) {
  .hw-steps { display: flex; gap: 12px; margin: 0 -16px; padding: 0 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .hw-steps::-webkit-scrollbar { display: none; }
  .hw-card { flex: 0 0 84%; scroll-snap-align: start; }
  .hw-card:hover, .hw-js .hw-card.is-in:hover { transform: none; }
  .hw-vis { height: 220px; }
  .hw-card:last-child .hw-shot-will { width: 150%; left: -25%; top: -22%; }
  .hw-txt { padding: 20px 22px 24px; }
  .hw-txt h3 { font-size: 20px; }
}

/* tablet pass (T2.5): the step-01 pill's labels reach 12px; on touch a tapped card doesn't stay lifted */
@media (min-width: 700px) and (max-width: 1099px), (min-width: 700px) and (hover: none), (min-width: 700px) and (pointer: coarse) {
  .hw-f em, .hw-sub span { font-size: 12px; }
}
@media (hover: none) {
  .hw-card:hover, .hw-js .hw-card.is-in:hover, .hw-card:hover .hw-shot { transform: none; }
}