.how-page { background: #090e20; }
.how-hero { position: relative; padding-block: 86px 72px; text-align: center; }
.how-hero::before { position: absolute; content: ''; pointer-events: none; z-index: -1; inset: -84px -40px 0; background: radial-gradient(ellipse at 50% 20%,#6d63a925,transparent 65%); }
.how-page .eyebrow { color: #aab5d0; }
.how-hero h1 { margin-top: 22px; font-size: clamp(2.6rem,4.8vw,4rem); line-height: 1.12; font-weight: 480; letter-spacing: -.05em; }
.how-hero h1 > span { color: #c4c2dc; }
.how-lead { max-width: 610px; margin: 25px auto 0; font-size: 1.125rem; color: #b8c5dc; }
.how-path { position: relative; display: grid; grid-template-columns: 1fr 1.15fr 1.2fr; align-items: center; max-width: 880px; margin: 54px auto 0; padding: 34px 40px 76px; border: 1px solid #b9c9ef29; border-radius: 20px; background: linear-gradient(130deg,#18213ae6,#0c1529e6); box-shadow: 0 24px 72px #02071138,inset 0 1px #ffffff06; text-align: center; }
.how-endpoint { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.how-path svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.how-device svg { color: #b8caff; }
.how-path strong { font-weight: 550; font-size: 1rem; }
.how-path small { font-size: .6875rem; color: #a7b8d3; }
.how-channel { padding-inline: 14px; }
.how-channel > span { display: block; color: #b3dcca; font-size: .6875rem; }
.how-channel-line { position: relative; display: flex; align-items: center; justify-content: center; margin-block: 12px; height: 36px; color: #95e3bf; }
.how-channel-line::before { content: ''; position: absolute; inset: 17px 0; background: repeating-linear-gradient(90deg,#84dcb47d 0 6px,transparent 6px 13px); background-size: 26px 100%; animation: how-channel-flow 2.6s linear infinite; }
.how-channel-line svg { position: relative; width: 36px; height: 36px; padding: 7px; border: 1px solid #83d7b37a; border-radius: 50%; background: #142d30; }
.how-channel-line i { position: absolute; top: 6px; font-style: normal; font-size: 1.125rem; }
.how-channel-line i:first-child { right: -1px; }
.how-channel-line i:last-child { left: -1px; }
.how-boundary { padding: 22px 12px 18px; border: 1px solid #8ae7bb70; border-radius: 12px; background: radial-gradient(ellipse at 50% 30%,#62d2a51c,transparent 80%),#0b2429; box-shadow: 0 0 35px #59d2a70b; }
.how-boundary-label { display: block; font: .5625rem var(--mono); letter-spacing: .8px; color: #9de2c3; }
.how-model { display: flex; justify-content: center; align-items: center; gap: 10px; margin-block: 18px 15px; color: #d7f5e6; }
.how-model svg { width: 27px; height: 27px; color: #9fe9c6; }
.how-hardware { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; }
.how-hardware > span { padding: 4px 15px; border: 1px solid #8ce1b932; border-radius: 4px; color: #bce8d2; font: .625rem var(--mono); }
.how-operator { position: absolute; left: 24px; right: 24px; bottom: 23px; display: flex; align-items: center; justify-content: center; gap: 9px; color: #a3b2cd; font-size: .75rem; }
.how-operator svg { width: 18px; height: 18px; flex: 0 0 auto; color: #a3b2cd; }
.how-jump { display: inline-flex; align-items: center; gap: 18px; margin-top: 30px; padding: 12px; color: #becbe4; font-size: .8125rem; }
.how-jump:hover { color: #fff; }
.how-section { padding-block: 78px; border-top: 1px solid #b1c4ea24; }
.how-section-heading { max-width: 760px; margin-bottom: 34px; }
.how-section-heading h2 { margin-top: 16px; font-size: clamp(1.9rem,3.4vw,2.65rem); line-height: 1.18; }
.how-section-heading > p:last-child { max-width: 655px; margin-top: 21px; color: #b2bfd6; font-size: 1rem; }
.how-layers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.how-layers article { position: relative; display: flex; flex-direction: column; padding: 29px; border: 1px solid #adc0ec25; border-radius: 12px; background: #101a30; }
.how-layer-number { color: #6d80a5; font: .6875rem var(--mono); }
.how-layers h3 { margin-top: 23px; font-size: 1.25rem; font-weight: 550; letter-spacing: -.03em; }
.how-layers p { color: #b0bed5; font-size: .9375rem; margin-block: 12px 28px; }
.how-layer-example { margin-top: auto; padding-top: 17px; border-top: 1px solid #abc1e521; color: #8298bd; font-size: .75rem; }
.how-layers .how-layer-active { border-color: #8bdbb64f; background: linear-gradient(135deg,#173332,#10252d); }
.how-layer-active .how-layer-number, .how-layer-active .how-layer-example { color: #9bdbbe; }
.how-layer-active h3 { color: #d0f3e2; }
.how-steps { margin: 42px 0 0; padding: 0; list-style: none; }
.how-steps > li { display: grid; grid-template-columns: 48px minmax(0,1fr) 280px; column-gap: 30px; align-items: start; padding-block: 34px; border-bottom: 1px solid #b1c4ea1b; }
.how-steps > li:last-child { border-bottom: 0; padding-bottom: 0; }
.how-step-number { display: grid; place-items: center; height: 42px; width: 42px; margin-top: 2px; border-radius: 50%; border: 1px solid #c4c2dc4d; background: #c4c2dc0a; color: #c4c2dc; font: .6875rem var(--mono); }
.how-step-copy { max-width: 565px; padding-right: 25px; }
.how-step-copy h3 { font-size: 1.5rem; font-weight: 520; letter-spacing: -.03em; line-height: 1.3; margin-bottom: 16px; }
.how-step-copy p { color: #b3c1d9; font-size: .9375rem; }
.how-step-copy strong { color: #d8e1f2; font-weight: 550; }
.how-step-copy p.how-step-note { color: #8d9fbd; font-size: .8125rem; margin-top: 15px; }
.how-step-visual { align-self: center; padding: 21px; border: 1px solid #a7b9e22b; border-radius: 10px; background: linear-gradient(135deg,#152139,#11192d); text-align: center; font-size: .75rem; color: #c4d0e7; }
.how-step-visual > span:not(.how-mini-label):not(.how-lock-symbol) { display: block; }
.how-proof-arrow { margin: 12px 0; color: #8e9fbd; font-size: .6875rem; }
.how-proof-arrow b { margin-inline: 9px; color: #c4c2dc; font-size: 1rem; }
.how-arrow-return { margin-bottom: 0; color: #9edabb; }
.how-step-visual .how-verified { color: #b5e6ce; }
.how-checklist { text-align: left; }
.how-checklist > span { padding: 8px 4px; }
.how-checklist b { color: #9ee1bc; font-weight: 500; margin-right: 12px; }
.how-encrypt-visual { display: flex; flex-direction: column; align-items: center; }
.how-readable, .how-ciphertext { width: 100%; padding: 10px; border: 1px solid #b2c4ed35; border-radius: 5px; background: #afc2f00a; }
.how-ciphertext { color: #a9e2c5; border-color: #8adab643; background: #76dba80a; }
.how-lock-symbol { margin-block: 8px; color: #8fa7c9; }
.how-step-visual small { display: block; margin-top: 15px; color: #8da2c2; font-size: .625rem; line-height: 1.5; }
.how-compute-visual { border-color: #8adab65c; background: linear-gradient(135deg,#17332f,#10232a); }
.how-mini-label { color: #94d9b5; font: .5625rem var(--mono); letter-spacing: .7px; }
.how-compute-visual > div { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.how-compute-visual > div > span { padding: 14px 17px; border: 1px solid #9de2bf54; border-radius: 6px; color: #c9efdc; font: .875rem var(--mono); }
.how-compute-visual b { color: #7cb798; font-weight: 400; }
.how-compute-visual small { color: #96c5ae; }
.how-scope { display: grid; grid-template-columns: 1fr 1.35fr; gap: 60px; padding-bottom: 54px; }
.how-scope h2 { margin-top: 18px; font-size: clamp(1.9rem,3vw,2.5rem); }
.how-scope > div > p:not(.eyebrow) { color: #b2c0d8; font-size: .9375rem; }
.how-scope > div > p + p { margin-top: 16px; }
.how-reading { display: flex; flex-wrap: wrap; gap: 12px 26px; border-top: 1px solid #b1c4ea1b; padding-top: 29px; }
.how-reading h3 { flex-basis: 100%; margin-bottom: 3px; font-size: .75rem; font-weight: 500; color: #8d9fbd; }
.how-reading a { display: inline-flex; gap: 14px; padding-block: 7px; color: #c4c2dc; font-size: .8125rem; }
.how-reading a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
@keyframes how-channel-flow { to { background-position: 26px 0; } }
@media (max-width: 1050px) {
  .how-steps > li { grid-template-columns: 40px minmax(0,1fr) 235px; gap: 22px; }
  .how-step-copy { padding-right: 0; }
  .how-path { padding-inline: 28px; }
}
@media (max-width: 800px) {
  .how-hero { padding-block: 66px 55px; }
  .how-hero::before { inset-inline: 0; }
  .how-section { padding-block: 58px; }
  .how-hero h1 { font-size: clamp(2.6rem,6.8vw,3.5rem); }
  .how-path { grid-template-columns: 1fr 1fr 1.3fr; padding: 26px 18px 70px; }
  .how-path strong { font-size: .875rem; }
  .how-path small { font-size: .625rem; }
  .how-endpoint { gap: 9px; }
  .how-channel { padding-inline: 10px; }
  .how-channel > span { font-size: .625rem; }
  .how-boundary-label { font-size: .5rem; }
  .how-layers { gap: 12px; }
  .how-layers article { padding: 22px 18px; }
  .how-steps > li { grid-template-columns: 36px minmax(0,1fr); gap: 15px 18px; padding-block: 29px; }
  .how-step-number { width: 34px; height: 34px; }
  .how-step-copy { max-width: none; }
  .how-step-visual { grid-column: 2; max-width: 340px; width: 100%; margin-top: 9px; }
  .how-checklist { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; }
  .how-checklist > span { padding: 8px 0; font-size: .6875rem; }
  .how-checklist b { margin-right: 7px; }
  .how-scope { gap: 28px; }
}
@media (max-width: 540px) {
  .how-hero { padding-top: 48px; }
  .how-hero h1 { font-size: clamp(2.3rem,8vw,2.8rem); }
  .how-lead { font-size: 1rem; }
  .how-path { grid-template-columns: 1fr; gap: 21px; max-width: 350px; padding: 27px 22px 22px; margin-top: 34px; }
  .how-endpoint { flex-direction: row; justify-content: center; flex-wrap: wrap; column-gap: 12px; }
  .how-endpoint small { flex-basis: 100%; }
  .how-endpoint svg { width: 26px; height: 26px; }
  .how-channel { display: flex; align-items: center; justify-content: center; gap: 10px; }
  .how-channel-line { width: 44px; margin: 0; transform: rotate(90deg); }
  .how-channel-line svg { transform: rotate(-90deg); }
  .how-channel-line i { display: none; }
  .how-channel small { display: none; }
  .how-channel > span { width: 95px; }
  .how-boundary { padding: 17px; }
  .how-boundary-label { font-size: .5625rem; }
  .how-model { margin-block: 12px; }
  .how-hardware { margin-bottom: 9px; }
  .how-operator { position: static; font-size: .625rem; text-align: left; align-items: flex-start; line-height: 1.6; }
  .how-operator svg { width: 17px; height: 17px; }
  .how-jump { margin-top: 20px; }
  .how-section-heading h2 br { display: none; }
  .how-section-heading > p:last-child { font-size: .9375rem; }
  .how-layers { grid-template-columns: 1fr; }
  .how-layers article { padding: 23px; }
  .how-layers h3 { margin-top: 10px; }
  .how-layers p { margin-bottom: 18px; }
  .how-layer-number { position: absolute; top: 30px; right: 25px; }
  .how-steps > li { grid-template-columns: 30px minmax(0,1fr); gap: 15px; }
  .how-step-number { width: 29px; height: 29px; font-size: .625rem; }
  .how-step-copy h3 { font-size: 1.25rem; margin-top: 2px; }
  .how-step-copy p { font-size: .875rem; }
  .how-step-copy p.how-step-note { font-size: .75rem; }
  .how-step-visual { padding: 19px; }
  .how-checklist { display: block; }
  .how-scope { grid-template-columns: 1fr; gap: 23px; padding-bottom: 37px; }
  .how-reading { gap: 8px; }
  .how-reading a { width: 100%; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .how-channel-line::before { animation: none; } }