@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html,
body{
  width:100%;
  min-height:100%;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

body{
  background:#fff;
  color:#111;
  font-family:Inter, Arial, Helvetica, sans-serif;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  display:block;
  width:100%;
  height:auto;
}

.how-page{
  width:100%;
  min-height:100vh;
  overflow:hidden;
  background:#fff;
}

.how-shell{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding-left:22px;
  padding-right:22px;
}

.how-hero{
  background:#111;
  color:#fff;
  padding:56px 0 64px;
}

.how-hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:38px;
  align-items:stretch;
}

.how-hero-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}

.how-eyebrow{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:32px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#d7d7d7;
  font-size:14px;
  line-height:1;
  letter-spacing:-.05px;
  font-weight:700;
  margin-bottom:22px;
}

.how-eyebrow-light{
  border-color:#e5e5e5;
  background:#f7f7f7;
  color:#555;
}

.how-eyebrow-dark{
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
  color:#d7d7d7;
}

.how-hero-title{
  max-width:760px;
  font-size:48px;
  line-height:1.02;
  letter-spacing:-1.55px;
  font-weight:800;
  color:#fff;
  margin-bottom:24px;
}

.how-hero-text{
  max-width:690px;
  font-size:18px;
  line-height:1.72;
  letter-spacing:-.08px;
  color:#cfcfcf;
}

.how-start-card{
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:24px;
  border-radius:26px;
  background:#fff;
  color:#111;
  box-shadow:0 24px 64px rgba(0,0,0,.22);
}

.how-start-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
}

.how-start-label{
  font-size:15px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.08px;
}

.how-start-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#f1f1f1;
  color:#555;
  font-size:13px;
  line-height:1;
  font-weight:800;
}

.how-start-options{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.how-start-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:62px;
  padding:0 18px;
  border:1px solid #e8e8e8;
  border-radius:14px;
  background:#f7f7f7;
  color:#111;
  font-size:16px;
  line-height:1;
  font-weight:700;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}

.how-start-option svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:0 0 auto;
}

.how-start-option:hover,
.how-start-option:focus-visible{
  border-color:#cfcfcf;
  background:#fff;
  transform:translateY(-1px);
  outline:none;
}

.how-primary-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:56px;
  margin-top:18px;
  padding:0 24px;
  border-radius:14px;
  background:#111;
  color:#fff;
  font-size:16px;
  line-height:1;
  font-weight:800;
  transition:transform .18s ease, opacity .18s ease;
}

.how-primary-button:hover,
.how-primary-button:focus-visible{
  transform:translateY(-1px);
  outline:none;
}

.how-guide{
  padding:84px 0 0;
}

.how-section-heading{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  align-items:end;
  padding-bottom:34px;
  border-bottom:1px solid #dedede;
}

.how-section-heading-compact{
  padding-bottom:28px;
}

.how-section-title{
  max-width:760px;
  font-size:36px;
  line-height:1.07;
  letter-spacing:-1.05px;
  font-weight:800;
  color:#111;
}

.how-section-intro{
  max-width:580px;
  font-size:17px;
  line-height:1.72;
  letter-spacing:-.06px;
  color:#4a4a4a;
}

.how-steps{
  position:relative;
  padding-top:40px;
}

.how-step{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  align-items:center;
  padding:0 0 72px;
}

.how-step:last-child{
  padding-bottom:0;
}

.how-step-media{
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
  border:1px solid #ededed;
  border-radius:24px;
  background:#f1f1f1;
}

.how-step-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .45s ease;
}

.how-step:hover .how-step-media img{
  transform:scale(1.015);
}

.how-step-copy{
  min-width:0;
}

.how-step-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  height:32px;
  padding:0 10px;
  margin-bottom:20px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-size:13px;
  line-height:1;
  font-weight:800;
  letter-spacing:.04em;
}

.how-step-title{
  max-width:620px;
  font-size:32px;
  line-height:1.08;
  letter-spacing:-.8px;
  font-weight:800;
  color:#111;
  margin-bottom:15px;
}

.how-step-text{
  max-width:620px;
  font-size:17px;
  line-height:1.72;
  letter-spacing:-.06px;
  color:#3f3f3f;
}

.how-suggestions{
  padding:96px 0 0;
}

.how-suggestion-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  padding-top:30px;
}

.how-suggestion-card{
  display:flex;
  flex-direction:column;
  min-height:310px;
  padding:26px 24px;
  border:1px solid #e7e7e7;
  border-radius:24px;
  background:#f5f5f5;
  color:#111;
}

.how-suggestion-card-dark{
  border-color:#111;
  background:#111;
  color:#fff;
}

.how-card-index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#fff;
  color:#111;
  font-size:13px;
  line-height:1;
  font-weight:800;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
}

.how-suggestion-card-dark .how-card-index{
  background:rgba(255,255,255,.12);
  color:#fff;
  box-shadow:none;
}

.how-card-copy{
  margin-top:auto;
  padding-top:42px;
}

.how-card-title{
  font-size:30px;
  line-height:1.08;
  letter-spacing:-.75px;
  font-weight:800;
  margin-bottom:12px;
}

.how-card-text{
  font-size:17px;
  line-height:1.65;
  letter-spacing:-.05px;
  color:#444;
}

.how-suggestion-card-dark .how-card-text{
  color:#cfcfcf;
}

.how-text-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:max-content;
  min-height:34px;
  margin-top:24px;
  padding-bottom:3px;
  border-bottom:1px solid #111;
  color:#111;
  font-size:16px;
  line-height:1.25;
  font-weight:800;
  transition:opacity .18s ease;
}

.how-text-link svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.how-text-link-light{
  border-bottom-color:rgba(255,255,255,.78);
  color:#fff;
}

.how-text-link:hover,
.how-text-link:focus-visible{
  opacity:.7;
  outline:none;
}

.how-online{
  padding:96px 0 92px;
}

.how-online-box{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  align-items:end;
  padding:34px 26px;
  border-radius:26px;
  background:#111;
  color:#fff;
  overflow:hidden;
}

.how-online-title{
  max-width:700px;
  font-size:36px;
  line-height:1.06;
  letter-spacing:-1px;
  font-weight:800;
  margin-bottom:15px;
}

.how-online-text{
  max-width:680px;
  font-size:17px;
  line-height:1.7;
  letter-spacing:-.06px;
  color:#cfcfcf;
}

.how-online-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:56px;
  padding:0 24px;
  border-radius:14px;
  background:#fff;
  color:#111;
  font-size:16px;
  line-height:1;
  font-weight:800;
  transition:transform .18s ease, opacity .18s ease;
}

.how-online-button:hover,
.how-online-button:focus-visible{
  transform:translateY(-1px);
  outline:none;
}

@media (min-width:768px){
  .how-shell{
    padding-left:40px;
    padding-right:40px;
  }

  .how-hero{
    padding:74px 0 82px;
  }

  .how-hero-title{
    font-size:62px;
    letter-spacing:-2.2px;
  }

  .how-start-card{
    padding:30px;
  }

  .how-start-options{
    grid-template-columns:1fr 1fr;
  }

  .how-section-heading{
    grid-template-columns:minmax(0, 1.15fr) minmax(280px, .85fr);
    gap:54px;
  }

  .how-section-title{
    font-size:44px;
    letter-spacing:-1.4px;
  }

  .how-step{
    grid-template-columns:minmax(0, 1.12fr) minmax(300px, .88fr);
    gap:54px;
    padding-bottom:88px;
  }

  .how-step-reverse .how-step-media{
    order:2;
  }

  .how-step-reverse .how-step-copy{
    order:1;
  }

  .how-step-title{
    font-size:38px;
    letter-spacing:-1.05px;
  }

  .how-suggestion-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .how-suggestion-card{
    min-height:350px;
    padding:30px;
  }

  .how-online-box{
    grid-template-columns:minmax(0, 1fr) auto;
    gap:48px;
    padding:42px 40px;
  }

  .how-online-title{
    font-size:44px;
    letter-spacing:-1.4px;
  }

  .how-online-button{
    width:auto;
    min-width:190px;
  }
}

@media (min-width:1024px){
  .how-shell{
    padding-left:48px;
    padding-right:48px;
  }

  .how-hero-grid{
    grid-template-columns:minmax(0, 1.18fr) minmax(380px, .82fr);
    gap:70px;
    align-items:center;
  }

  .how-hero{
    padding:90px 0 96px;
  }

  .how-guide{
    padding-top:112px;
  }

  .how-steps{
    padding-top:52px;
  }

  .how-step{
    gap:76px;
    padding-bottom:104px;
  }

  .how-suggestions{
    padding-top:118px;
  }

  .how-online{
    padding-top:118px;
    padding-bottom:112px;
  }
}

@media (min-width:1280px){
  .how-shell{
    max-width:1248px;
    padding-left:64px;
    padding-right:64px;
  }
}

@media (max-width:767px){
  .how-hero-title{
    font-size:42px;
    letter-spacing:-1.3px;
  }

  .how-hero-text,
  .how-section-intro,
  .how-step-text,
  .how-card-text,
  .how-online-text{
    font-size:16px;
  }

  .how-section-title,
  .how-online-title{
    font-size:32px;
    letter-spacing:-.8px;
  }

  .how-step-title{
    font-size:30px;
    letter-spacing:-.7px;
  }
}

@media (max-width:420px){
  .how-shell{
    padding-left:18px;
    padding-right:18px;
  }

  .how-hero{
    padding-top:46px;
    padding-bottom:54px;
  }

  .how-hero-title{
    font-size:38px;
    letter-spacing:-1.1px;
  }

  .how-start-card,
  .how-suggestion-card{
    padding-left:20px;
    padding-right:20px;
  }

  .how-guide{
    padding-top:70px;
  }

  .how-step{
    padding-bottom:62px;
  }

  .how-suggestions{
    padding-top:78px;
  }

  .how-online{
    padding-top:78px;
    padding-bottom:78px;
  }

  .how-online-box{
    padding-left:22px;
    padding-right:22px;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition:none !important;
    animation:none !important;
  }
}