/* How follows Why's numbered, connected blocks. All four steps stay visible.
   data-how-story also keeps the legacy workflow in motion.js from initializing. */
.how[data-how-story] {
  width:min(1440px,100vw);
  padding:100px;
  background:var(--ink);
  color:#ececed;
}
.how[data-how-story] .how-top {
  display:grid;
  grid-template-columns:minmax(0,1fr) 420px;
  align-items:end;
  gap:80px;
  width:100%;
  margin:0 0 72px;
  text-align:left;
}
.how[data-how-story] .how-say { display:flex; flex-direction:column; align-items:flex-start; gap:28px; min-width:0; width:100%; margin:0; }
.how[data-how-story] .how-top .eyebrow { align-self:flex-start; }
.how[data-how-story] .how-h { font-size:48px; line-height:58px; letter-spacing:-1.9px; }
.how[data-how-story] .how-sub { max-width:420px; margin:0; color:#a7a7af; opacity:1; font-size:16px; font-weight:300; line-height:26px; letter-spacing:-.16px; }
.how .how-blocks { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin:0; padding:0; list-style:none; background:var(--hairline-soft); }
.how .how-block { display:flex; flex-direction:column; gap:14px; min-width:0; padding:36px 32px 36px; background:var(--ink); }
.how .how-block:first-child { background:#222; }
.how .how-number { color:#9a9aa2; font-size:12px; font-variant-numeric:tabular-nums; letter-spacing:1.2px; }
.how .how-block h3 { margin:0; color:#fff; font-size:20px; font-weight:400; line-height:28px; letter-spacing:-.4px; }
.how .how-block-copy { margin:0 0 12px; color:#a7a7af; font-size:15px; font-weight:300; line-height:24px; }
.how .how-example { display:flex; flex-direction:column; gap:12px; margin-top:auto; padding-top:22px; border-top:1px solid var(--hairline-soft); }
.how .how-example-label { color:#a7a7af; font-size:12px; line-height:19px; }
.how .how-quote { margin:0; color:#ececed; font-size:19px; font-weight:400; line-height:29px; letter-spacing:-.3px; }
.how .how-example-note { margin:0; color:#a7a7af; font-size:12px; font-weight:400; line-height:20px; }
.how .how-customer-name { margin:0; color:#ececed; font-size:17px; line-height:26px; letter-spacing:-.2px; }
.how .how-example-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; }
.how .how-example-facts dt { margin:0 0 6px; color:#9a9aa2; font-size:11px; line-height:18px; }
.how .how-example-facts dd { margin:0; color:#ececed; font-size:19px; line-height:26px; }
.how .how-amount { margin:0; color:#ececed; font-size:38px; font-weight:400; line-height:46px; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.how .how-amount span { margin-right:4px; color:#b8adca; font-size:14px; letter-spacing:0; }
.how .how-approval { color:#c3afdf; font-size:12px; line-height:20px; }
.how .how-disclaimer { margin:22px 0 0; color:#9a9aa2; font-size:12px; line-height:20px; }
.how .how-capabilities { display:grid; grid-template-columns:160px minmax(0,1fr); gap:20px; margin-top:34px; padding-top:22px; border-top:1px solid var(--hairline-soft); color:#9098a5; font-size:11px; line-height:18px; }
.how .how-capabilities ul { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:12px 24px; list-style:none; margin:0; padding:0; }
@media(max-width:1100px) {
  .how[data-how-story] { padding:88px 32px 72px; }
  .how[data-how-story] .how-top { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; margin-bottom:56px; }
  .how .how-blocks { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .how .how-block { padding:32px; }
}
@media(max-width:600px) {
  .how[data-how-story] { padding:72px 23px 56px; }
  .how[data-how-story] .how-top { grid-template-columns:minmax(0,1fr); gap:24px; margin-bottom:36px; }
  .how[data-how-story] .how-say { gap:24px; }
  .how[data-how-story] .how-h { font-size:36px; line-height:43px; letter-spacing:-1.4px; }
  .how[data-how-story] .how-sub { font-size:15px; font-weight:400; line-height:25px; }
  .how .how-blocks { grid-template-columns:minmax(0,1fr); }
  .how .how-block { padding:28px 24px 32px; }
  .how .how-block-copy { font-weight:400; margin-bottom:6px; }
  .how .how-example { margin-top:0; padding-top:20px; }
  .how .how-example-label,.how .how-example-note,.how .how-approval { font-size:13px; line-height:21px; }
  .how .how-example-facts dt { font-size:12px; line-height:19px; }
  .how .how-capabilities { grid-template-columns:minmax(0,1fr); gap:12px; margin-top:28px; }
  .how .how-capabilities ul { justify-content:flex-start; gap:10px 20px; }
}