.how-it-works-page { background: #f4f7fb; }
.how-it-works-page main {
  width: min(var(--public-shell-max, 1760px), calc(100% - (var(--public-page-gutter, clamp(22px, 3.2vw, 58px)) * 2)));
  margin: 0 auto;
  padding: 24px 0 42px;
  overflow: hidden;
  box-sizing: border-box;
}
.hiw-kicker { margin: 0; color: #0879ed; font-size: 12px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.hiw-hero { position: relative; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(310px,.75fr); gap: clamp(30px,6vw,90px); width: 100%; min-height: 560px; margin: 0 auto; padding: clamp(70px,9vw,128px) clamp(34px,7vw,92px); overflow: hidden; box-sizing: border-box; align-items: center; color: #fff; background: linear-gradient(125deg,#061f67 0%,#075ddd 56%,#1197f3 100%); }
.hiw-hero::after { position: absolute; right: -80px; bottom: -150px; width: 560px; height: 560px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; content: ""; }
.hiw-hero-copy { position: relative; z-index: 2; max-width: 760px; }
.hiw-hero .hiw-kicker { color: #9fd5ff; }
.hiw-hero h1 { margin: 18px 0 28px; font-family: "Barlow Semi Condensed",sans-serif; font-size: clamp(62px,8vw,116px); font-weight: 900; line-height: .82; letter-spacing: -.055em; text-transform: uppercase; }
.hiw-hero h1 span { display: block; color: #fff; }
.hiw-hero-copy > p:last-child { max-width: 700px; margin: 0; color: rgba(255,255,255,.84); font-size: clamp(17px,1.65vw,22px); line-height: 1.6; }
.hiw-hero-panel { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px 18px; padding: 30px; border: 1px solid rgba(255,255,255,.25); background: rgba(4,30,94,.28); backdrop-filter: blur(12px); }
.hiw-hero-panel span { display: grid; min-height: 58px; padding: 0 18px; place-items: center start; border-left: 4px solid #78ceff; color: #fff; background: rgba(255,255,255,.1); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.hiw-hero-panel i { color: rgba(255,255,255,.65); font-style: normal; font-size: 22px; }
.hiw-hero-number { position: absolute; z-index: 0; right: 2%; bottom: -12%; color: rgba(255,255,255,.055); font-family: "Barlow Semi Condensed",sans-serif; font-size: clamp(180px,29vw,430px); font-weight: 900; line-height: .8; }
.hiw-process { width: min(1180px,calc(100% - 48px)); margin: 0 auto; padding: clamp(78px,10vw,140px) 0; }
.hiw-section-heading { display: grid; grid-template-columns: .35fr 1fr; gap: 30px; align-items: end; margin-bottom: 58px; }
.hiw-section-heading h2,.hiw-scoring h2,.hiw-connect h2,.hiw-cta h2 { margin: 0; color: #08254d; font-family: "Barlow Semi Condensed",sans-serif; font-size: clamp(43px,5.2vw,72px); font-weight: 900; line-height: .95; letter-spacing: -.035em; text-transform: uppercase; }
.hiw-steps { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px; margin: 0; padding: 0; list-style: none; background: #dce6f1; }
.hiw-steps li { display: grid; grid-template-columns: auto 1fr; gap: 24px; min-height: 230px; padding: clamp(28px,4vw,46px); background: #fff; }
.hiw-step-number { color: #0878ed; font-family: "Barlow Semi Condensed",sans-serif; font-size: 48px; font-weight: 900; line-height: 1; }
.hiw-steps h3 { margin: 3px 0 14px; color: #0a2c56; font-size: 23px; text-transform: uppercase; }
.hiw-steps p { margin: 0; color: #60748a; font-size: 16px; line-height: 1.7; }
.hiw-scoring { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); gap: clamp(40px,7vw,100px); width: 100%; margin: 0 auto; padding: clamp(65px,8vw,110px) clamp(32px,6vw,84px); box-sizing: border-box; align-items: center; background: #eaf1f9; }
.hiw-scoring-copy > p:last-child { color: #5e7187; font-size: 17px; line-height: 1.7; }
.hiw-scoring h2 { margin: 15px 0 25px; }
.hiw-system-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.hiw-system-grid article { display: flex; min-height: 150px; padding: 25px; flex-direction: column; justify-content: space-between; border-top: 5px solid #0878ed; color: #0b315d; background: #fff; box-shadow: 0 16px 38px rgba(7,42,84,.08); }
.hiw-system-grid strong { font-size: 20px; }
.hiw-system-grid span { color: #64788e; font-size: 14px; line-height: 1.55; }
.hiw-system-grid .hiw-custom { grid-column: 1/-1; min-height: 120px; border-top-color: #1437b7; }
.hiw-connect { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.52fr); gap: clamp(42px,8vw,110px); width: min(1180px,calc(100% - 48px)); margin: 0 auto; padding: clamp(80px,10vw,140px) 0; align-items: center; }
.hiw-connect h2 { margin: 15px 0 24px; }
.hiw-connect p:last-child { max-width: 720px; color: #60748a; font-size: 17px; line-height: 1.7; }
.hiw-connect aside { display: flex; min-height: 260px; padding: 34px; flex-direction: column; justify-content: flex-end; color: #fff; background: linear-gradient(145deg,#082c76,#087cf0); box-shadow: 0 28px 64px rgba(7,69,151,.2); }
.hiw-connect aside > span { margin-bottom: auto; color: rgba(255,255,255,.18); font-family: "Barlow Semi Condensed",sans-serif; font-size: 94px; font-weight: 900; line-height: .8; }
.hiw-connect aside strong { font-size: 24px; text-transform: uppercase; }
.hiw-connect aside small { margin-top: 8px; color: rgba(255,255,255,.72); }
.hiw-cta { display: grid; grid-template-columns: 1fr auto; gap: 35px; width: min(1180px,calc(100% - 48px)); margin: 0 auto clamp(60px,8vw,100px); padding: clamp(40px,6vw,70px); box-sizing: border-box; align-items: center; background: #fff; box-shadow: 0 22px 60px rgba(7,39,77,.1); }
.hiw-cta h2 { max-width: 720px; margin-top: 12px; font-size: clamp(40px,4.5vw,64px); }
.hiw-cta-actions { display: flex; min-width: 260px; flex-direction: column; gap: 12px; }
.hiw-primary-action { display: flex; min-height: 56px; padding: 0 20px; align-items: center; justify-content: space-between; color: #fff; background: linear-gradient(100deg,#0757ba,#078df1); font-weight: 900; text-decoration: none; }
.hiw-primary-action span { font-size: 23px; }
.hiw-contact-action { color: #0b5eb8; font-size: 13px; font-weight: 800; text-align: center; }
@media (max-width: 900px) {
  .hiw-hero,.hiw-scoring,.hiw-connect,.hiw-cta { grid-template-columns: 1fr; }
  .hiw-hero { min-height: auto; }
  .hiw-hero-panel { max-width: 560px; }
  .hiw-section-heading { grid-template-columns: 1fr; }
  .hiw-cta-actions { min-width: 0; }
}
@media (max-width: 620px) {
  .how-it-works-page main { width: 100%; padding-top: 0; }
  .hiw-hero { width: 100%; padding: 58px 22px; }
  .hiw-hero h1 { font-size: 57px; }
  .hiw-hero-panel { padding: 18px; gap: 9px 12px; }
  .hiw-process,.hiw-connect,.hiw-cta { width: calc(100% - 24px); }
  .hiw-steps,.hiw-system-grid { grid-template-columns: 1fr; }
  .hiw-steps li { min-height: 0; grid-template-columns: 1fr; }
  .hiw-system-grid .hiw-custom { grid-column: auto; }
  .hiw-scoring { width: 100%; padding: 58px 20px; }
  .hiw-cta { padding: 30px 22px; }
}