body:has(.how-page){overflow-x:clip}
.how-page{background:#061e32;color:#f5f4ef}
.how-shell{width:min(100%,1200px);margin-inline:auto}
.how-hero{position:relative;padding:calc(var(--header-h,76px) + 72px) var(--gutter,clamp(22px,8vw,120px)) clamp(72px,9vw,128px);background:radial-gradient(ellipse at 82% 35%,rgba(26,68,96,.56),transparent 38%),linear-gradient(120deg,#061e32,#08243a 72%,#09263d)}
.how-hero__layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.56fr);align-items:end;gap:clamp(36px,7vw,104px)}
.how-hero__visual-column{display:grid;gap:clamp(22px,2.6vw,34px);align-self:center;min-width:0}
.how-hero__photo{position:relative;isolation:isolate;aspect-ratio:1.55/1;margin:0;overflow:hidden;border:1px solid rgba(228,238,245,.2);border-radius:20px;background:#102b41;box-shadow:0 22px 70px rgba(0,0,0,.2)}
.how-hero__photo::after{position:absolute;z-index:0;inset:35% 0 0;background:linear-gradient(180deg,transparent,rgba(3,20,34,.82));content:"";pointer-events:none}
.how-hero__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.how-hero__photo figcaption{position:absolute;z-index:1;right:18px;bottom:17px;left:18px;display:grid;gap:6px;color:#f5f4ef}
.how-hero__photo figcaption span:first-child{color:#d5e0e8;font-size:10px;font-weight:750;letter-spacing:.16em}
.how-hero__photo figcaption span:last-child{font-size:clamp(14px,1.25vw,17px);font-weight:600;line-height:1.35}
.how-breadcrumb{display:flex;align-items:center;gap:10px;margin:0 0 38px;color:#a9b7c4;font-size:12px}
.how-breadcrumb a{text-decoration:underline;text-decoration-color:rgba(245,244,239,.34);text-underline-offset:4px}
.how-breadcrumb a:hover{color:#fff}
.how-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 18px;color:#bdcbd6;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.how-eyebrow>span{display:block;width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#ef2b35;box-shadow:0 0 13px rgba(239,43,53,.35)}
.how-page h1,.how-page h2,.how-page h3,.how-page p{margin-top:0}
.how-page h1{max-width:14ch;margin-bottom:22px;color:#f5f4ef;font-size:clamp(46px,6.2vw,78px);font-weight:650;line-height:.98;letter-spacing:-.055em;text-wrap:balance}
.how-hero__lead{max-width:58ch;margin-bottom:28px;color:#c1ccd5;font-size:clamp(17px,1.7vw,20px);line-height:1.65;text-wrap:pretty}
.how-hero__links{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.how-primary-link{display:inline-flex;min-height:48px;align-items:center;justify-content:center;gap:14px;padding:13px 19px;border:1px solid transparent;border-radius:999px;background:#d91f2a;color:#fff;font-size:13px;font-weight:650;line-height:1.2;text-decoration:none;transition:background-color .18s ease,transform .18s ease}
.how-primary-link:hover{background:#b81922;transform:translateY(-1px)}
.how-primary-link span{color:#ffb0b4}
.how-secondary-link{color:#f5f4ef;font-size:13px;font-weight:600;text-decoration:underline;text-decoration-color:rgba(245,244,239,.4);text-underline-offset:5px}
.how-secondary-link:hover{color:#ffb0b4}
.how-hero__note{position:relative;max-width:390px;margin:0 0 6px;padding:24px 0 0 22px;border-top:1px solid rgba(245,244,239,.24)}
.how-hero__note-mark{position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:#ef2b35;box-shadow:0 0 15px rgba(239,43,53,.42)}
.how-hero__note-label{margin-bottom:10px;color:#f5f4ef;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.how-hero__note p:last-child{margin:0;color:#aebbc6;font-size:15px;line-height:1.7}
.how-sequence-intro{padding:clamp(62px,8vw,104px) var(--gutter,clamp(22px,8vw,120px)) clamp(34px,5vw,60px);background:#061e32}
.how-sequence-intro .how-shell{max-width:860px}
.how-sequence-intro h2,.how-details h2,.how-cta h2{max-width:17ch;margin-bottom:16px;color:#f5f4ef;font-size:clamp(34px,4.7vw,60px);font-weight:620;line-height:1;letter-spacing:-.05em;text-wrap:balance}
.how-sequence-intro .how-shell>p:last-child{max-width:60ch;margin:0;color:#a9b7c4;font-size:16px;line-height:1.65}
#how-story-track{position:relative;height:100svh;min-height:100svh;background:#061e32}
#how-page .how-story-stage{position:relative;top:auto;display:block;height:100svh;min-height:560px;padding:0;overflow:hidden;background:radial-gradient(ellipse at 73% 47%,rgba(17,55,82,.82),transparent 44%),linear-gradient(105deg,#061e32,#08253b 72%,#0a2a43)}
#how-page .how-story-stage .stage-glow{width:52vw;height:52vw;right:4vw;top:3%;opacity:.8}
#how-page .how-story-stage .story-copy{left:clamp(26px,7vw,104px);top:50%;width:min(34vw,470px);height:min(72svh,530px);max-width:470px;transform:translateY(-50%);display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
#how-page .how-story-stage .story-cards{position:relative;inset:auto;flex:1;min-height:0;opacity:0}
#how-page .how-story-stage .story-step{inset:0;max-width:100%}
#how-page .how-story-stage .story-step h2{max-width:12ch;margin:15px 0;font-size:clamp(36px,4.6vw,62px);line-height:.98;letter-spacing:-.055em}
#how-page .how-story-stage .story-step>p:last-child{max-width:42ch;color:#b5c3ce;font-size:clamp(14px,1.25vw,17px);line-height:1.65}
#how-page .how-story-stage .story-controls{position:relative;left:auto;bottom:auto;display:flex;align-items:center;gap:14px;margin:18px 0 0;opacity:0}
#how-page .how-story-stage .product-stage{position:absolute;inset:0;z-index:5;width:100%;height:auto;overflow:hidden}
#how-page .how-story-stage .brand-opening{visibility:hidden}
#how-page .how-story-stage .story-ink{z-index:4}
#how-page .how-story-stage .impact-detected{z-index:7}
#how-page .how-story-stage.story-sequence-unavailable .product-fallback,
#how-page .how-story-stage.story-sequence-unavailable .story-canvas,
#how-page .how-story-stage.story-sequence-unavailable .story-ink,
#how-page .how-story-stage.story-sequence-unavailable .impact-detected,
#how-page .how-story-stage.story-sequence-unavailable .brand-opening{visibility:hidden!important;opacity:0!important}
#how-page .how-story-stage.story-sequence-unavailable [data-model-status]{top:auto;bottom:62px;left:clamp(26px,7vw,104px);right:clamp(26px,7vw,104px);width:auto!important}
.how-details{padding:clamp(78px,9vw,120px) var(--gutter,clamp(22px,8vw,120px));border-top:1px solid rgba(245,244,239,.09);background:linear-gradient(118deg,#08243a,#061e32 72%,#08253d)}
.how-details .how-eyebrow{margin-bottom:17px}
.how-details h2{margin-bottom:clamp(34px,5vw,58px)}
.how-details__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid rgba(245,244,239,.17);border-bottom:1px solid rgba(245,244,239,.17)}
.how-details__grid article{min-height:224px;padding:22px 24px 25px;border-right:1px solid rgba(245,244,239,.12)}
.how-details__grid article:first-child{padding-left:0}
.how-details__grid article:last-child{padding-right:0;border-right:0}
.how-detail-number{display:block;margin-bottom:28px;color:#ff747b;font-size:11px;font-weight:750;letter-spacing:.14em}
.how-details__grid h3{margin:0 0 11px;color:#f5f4ef;font-size:19px;font-weight:620;line-height:1.2;letter-spacing:-.02em}
.how-details__grid p{max-width:38ch;margin:0;color:#aebbc6;font-size:14px;line-height:1.7}
.how-cta{padding:clamp(64px,8vw,96px) var(--gutter,clamp(22px,8vw,120px));background:#071f33}
.how-cta__layout{display:flex;align-items:end;justify-content:space-between;gap:40px}
.how-cta h2{max-width:12ch;margin:0}
.how-cta__links{display:flex;flex-wrap:wrap;align-items:center;gap:16px 23px;max-width:430px}
.how-cta__links .how-primary-link{flex:0 0 auto}
.how-page a:focus-visible{outline:2px solid #ff737b;outline-offset:4px}

@media(max-width:900px){
  .how-hero__layout{grid-template-columns:minmax(0,1fr) minmax(220px,.62fr);gap:34px}
  #how-page .how-story-stage .story-copy{left:36px;width:min(40vw,420px)}
  #how-page .how-story-stage .story-step h2{font-size:clamp(34px,5.2vw,50px)}
  #how-story-track{min-height:100svh}
}
@media(max-width:760px){
  .how-hero{padding-top:calc(var(--header-h,76px) + 54px)}
  .how-hero__layout{grid-template-columns:minmax(0,1fr);gap:40px}
  .how-hero__note{max-width:520px;margin-left:8px}
  .how-hero__visual-column{width:min(100%,560px);gap:22px;margin:0 auto}
  .how-hero__photo{aspect-ratio:1.65/1}
  .how-sequence-intro{padding-top:64px}
  #how-story-track{min-height:100svh}
  #how-page .how-story-stage{min-height:540px}
  #how-page .how-story-stage .story-copy{left:22px;right:22px;top:clamp(88px,12svh,106px);width:auto;height:auto;max-height:38svh;min-height:0;transform:none}
  #how-page .how-story-stage .story-cards{flex:none;min-height:clamp(200px,26svh,240px)}
  #how-page .how-story-stage .story-step h2{max-width:14ch;margin:8px 0 10px;font-size:clamp(30px,7.2vw,42px);line-height:1}
  #how-page .how-story-stage .story-step>p:last-child{max-width:45ch;font-size:clamp(12px,3.2vw,14px);line-height:1.45;margin-bottom:6px}
  #how-page .how-story-stage .story-step .eyebrow{font-size:10px;margin-bottom:10px}
  #how-page .how-story-stage .story-controls{gap:12px;margin-top:10px}
  #how-page .how-story-stage .story-controls button{width:36px;height:36px}
  #how-page .how-story-stage .product-stage{inset:0}
  #how-page .how-story-stage .story-ink path{stroke-width:5}
  .how-details__grid{grid-template-columns:minmax(0,1fr)}
  .how-details__grid article,.how-details__grid article:first-child,.how-details__grid article:last-child{min-height:0;padding:22px 0 24px;border-right:0;border-bottom:1px solid rgba(245,244,239,.12)}
  .how-details__grid article:last-child{border-bottom:0}
  .how-detail-number{margin-bottom:17px}
  .how-cta__layout{align-items:flex-start;flex-direction:column}
  .how-cta__links{align-items:flex-start;flex-direction:column}
}
@media(max-width:380px){
  #how-page .how-story-stage .story-copy{top:84px;max-height:36svh}
  #how-page .how-story-stage .story-step h2{font-size:clamp(27px,7.3vw,32px);margin:6px 0 8px}
  #how-page .how-story-stage .story-step>p:last-child{font-size:11px;line-height:1.35}
  #how-page .how-story-stage .story-controls{margin-top:4px}
}
@media(prefers-reduced-motion:reduce){
  .how-page .how-primary-link{transition:none}
}

@media(max-width:620px){body:has(.how-page) .footer-col ul{column-gap:4px}}
@media(max-width:380px){body:has(.how-page) .footer-col ul{grid-template-columns:1fr}}