.how-shell{overflow:hidden}
.how-page{background:var(--ink);color:var(--text)}
.how-page .site-header{background:rgba(13,19,30,.94);border-bottom:1px solid var(--line)}
.how-page .footer{background:#080e15}
.how-page .footer-bottom{margin-top:38px;padding-top:24px}

.how-hero{padding-top:40px;padding-bottom:55px;display:grid;gap:28px}
.how-top-card{display:grid;grid-template-columns:1.1fr .9fr;min-height:540px;border:1px solid var(--line);border-radius:34px;overflow:hidden;background:linear-gradient(180deg,#111925 0%,#0c121b 100%);box-shadow:0 28px 70px rgba(0,0,0,.28)}
.how-top-card__copy{padding:36px 38px 34px;display:flex;flex-direction:column;justify-content:flex-start}
.how-top-card h1{font-size:clamp(54px,5.5vw,96px);line-height:.94;margin:18px 0 26px;color:#f6f8fb;max-width:10ch}
.how-top-card .eyebrow{color:var(--blue)}
.how-top-card .eyebrow:before{background:var(--blue)}
.how-top-card__split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:end;margin-top:auto}
.how-rule{width:150px;height:4px;background:linear-gradient(90deg,var(--blue),#c6e6fa);margin-bottom:18px}
.how-lead{font:600 clamp(26px,2.6vw,44px)/1.02 'Space Grotesk',sans-serif;letter-spacing:-.04em;color:#f0f4f8;margin:0}
.how-lead--alt{font:500 clamp(18px,1.75vw,28px)/1.18 'DM Sans',sans-serif;letter-spacing:-.02em;color:#a8b2bf;max-width:30ch}
.how-top-card__visual{position:relative;display:flex;align-items:flex-end;justify-content:flex-end;padding:28px 28px 34px 0;overflow:hidden;background:radial-gradient(circle at 72% 28%,rgba(169,214,245,.12),transparent 34%),linear-gradient(135deg,#121a25 0%,#0b1119 100%)}
.how-summary{position:relative;z-index:1;display:grid;gap:14px;margin-left:auto;align-self:flex-end;width:min(100%,320px);padding:6px 0 0}
.how-summary p{margin:0;padding:16px 18px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.04);color:#dce3ea;font:500 16px/1.3 'DM Sans',sans-serif}
.how-spark{position:absolute;top:38px;right:42px;font-size:48px;color:var(--blue);opacity:.9}
/* Keep the glow on the glyph, not a rotated brightness-filter layer (Safari). */
.how-page .how-spark{background:transparent;border:0;box-shadow:none;filter:none;transform:none;pointer-events:none;text-shadow:0 0 6px rgba(255,255,255,.7),0 0 18px rgba(169,214,245,.5);animation:howSparkSoftGlow 4s ease-in-out infinite}
@keyframes howSparkSoftGlow{0%,100%{text-shadow:0 0 5px rgba(255,255,255,.55),0 0 14px rgba(169,214,245,.35)}50%{text-shadow:0 0 8px rgba(255,255,255,.8),0 0 22px rgba(169,214,245,.55)}}
@media(prefers-reduced-motion:reduce){.how-page .how-spark{animation:none}}
.how-glow{position:absolute;border-radius:50%;filter:blur(12px);opacity:.4}
.how-glow--one{right:58px;top:132px;width:170px;height:170px;background:rgba(169,214,245,.45)}
.how-glow--two{right:110px;bottom:88px;width:250px;height:250px;background:rgba(255,255,255,.14)}
.how-fade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.06),transparent 40%,rgba(169,214,245,.05) 100%)}

.how-overview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.how-overview-card{border:1px solid var(--line);background:#101722;padding:26px;border-radius:26px;min-height:220px;display:flex;flex-direction:column}
.how-overview-card span{color:var(--blue);font-family:'Space Grotesk';letter-spacing:.15em}
.how-overview-card h3{font-size:24px;margin:20px 0 14px}
.how-overview-card p{color:var(--muted)}

.how-detail{background:#0a1018;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.how-detail--alt{background:#0c121b}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:45px}
.section-head>p{max-width:400px;color:var(--muted);font-size:17px}
.section-head h2{font-size:clamp(34px,4vw,62px);max-width:12ch}

.process-steps{max-width:980px;margin-left:auto}
.process-step{display:grid;grid-template-columns:110px 1fr;border-top:1px solid var(--line);padding:32px 0}
.process-step span{color:var(--blue);font-family:'Space Grotesk';letter-spacing:.15em}
.process-step h3{font-size:24px;margin:0 0 12px}
.process-step p{color:var(--muted);font-size:17px;line-height:1.8;margin:0}

.expect-grid,.standard-grid,.faq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.expect-card,.standard-card{border:1px solid var(--line);background:#101722;border-radius:26px;padding:26px}
.expect-label{margin:0 0 10px;color:var(--blue);font-family:'Space Grotesk';letter-spacing:.16em;text-transform:uppercase;font-size:12px}
.expect-card p{margin:0;color:var(--muted);font-size:17px;line-height:1.8}
.standard-card h3{font-size:22px;margin:0 0 10px}
.standard-card p{color:var(--muted);margin:0;line-height:1.8}
.standard-card--promise{background:linear-gradient(180deg,#111925 0%,#0c121b 100%)}
.standard-badge{margin:0 0 10px;color:var(--blue);font:700 12px/1.1 'Space Grotesk';letter-spacing:.18em;text-transform:uppercase}

.faq-grid{grid-template-columns:repeat(2,1fr)}
.faq-item{border:1px solid var(--line);border-radius:22px;background:#101722;padding:0;overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:22px 24px;font:700 18px/1.3 'Space Grotesk',sans-serif;display:flex;justify-content:space-between;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';color:var(--blue);font-size:24px;line-height:1}
.faq-item[open] summary::after{content:'–'}
.faq-item p{margin:0;padding:0 24px 22px;color:var(--muted);font-size:16px;line-height:1.8}

.how-cta{padding-top:50px;padding-bottom:95px;background:#09101a;border-top:1px solid rgba(255,255,255,.06)}
.how-cta__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;max-width:920px;margin:0 auto}
.how-cta__inner h2{color:#f6f7fa;margin:0}
.how-cta__inner p{color:#aab2bf;max-width:720px;margin:0}
.how-cta__actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.button--ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.button--ghost:hover{background:#101722;color:var(--ice);transform:translateY(-2px)}

.how-page .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s}
.how-page .reveal.visible{opacity:1;transform:none}

@media(max-width:900px){
  .how-top-card{grid-template-columns:1fr}
  .how-top-card__visual{min-height:240px;padding:18px 18px 20px}
  .how-top-card__split{grid-template-columns:1fr;gap:18px}
  .how-overview-grid,.expect-grid,.standard-grid,.faq-grid{grid-template-columns:1fr 1fr}
  .process-steps{max-width:none}
  .how-page .footer{grid-template-columns:1fr 1fr}
}

@media(max-width:600px){
  .how-hero{padding-top:24px}
  .how-top-card{border-radius:28px}
  .how-top-card__copy{padding:24px 22px 18px}
  .how-top-card h1{font-size:clamp(40px,12vw,58px)}
  .how-lead{font-size:22px}
  .how-lead--alt{font-size:16px}
  .how-rule{width:116px}
  .how-top-card__visual{min-height:200px;padding:14px 14px 18px}
  .how-summary{width:100%}
  .how-summary p{padding:14px 16px;font-size:14px}
  .how-overview-grid,.expect-grid,.standard-grid,.faq-grid{grid-template-columns:1fr;gap:16px}
  .how-overview-card,.expect-card,.standard-card{padding:22px;min-height:auto}
  .section-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:24px}
  .section-head>p{max-width:none;width:100%}
  .section-head h2{max-width:none;width:100%}
  .process-steps{margin-left:0;width:100%}
  .process-step{grid-template-columns:1fr;gap:10px;padding:24px 0}
  .process-step span{margin-bottom:4px}
  .process-step h3{font-size:22px}
  .section-head h2{font-size:clamp(30px,9vw,44px)}
  .faq-item summary{padding:20px 18px;font-size:17px}
  .faq-item p{padding:0 18px 18px}
  .how-cta{padding-bottom:70px}
  .how-cta__actions{width:100%;flex-direction:column}
  .how-cta__actions .button{width:100%}
}