/* How It Works page - specific styles */

.how-it-works-page {
  --hiw-blue: #0784f9;
  --hiw-deep-blue: #005dda;
  --hiw-navy: #020b1c;
  --hiw-silver: #e8ebef;
}

.how-it-works-page .site-header {
  background: #000;
  border-bottom-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: none;
}

.how-it-works-page .site-header__inner {
  height: 108px;
}

.how-it-works-page .brand--approved {
  width: 280px;
  height: 82px;
  background: transparent;
}

.how-it-works-page .site-nav {
  gap: clamp(2rem, 4vw, 4.5rem);
}

.how-it-works-page .site-nav a {
  position: relative;
  color: #fff;
  font-size: 16px;
}

.how-it-works-page .site-nav a[aria-current="page"]::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -23px;
  left: 0;
  height: 4px;
  border-radius: 4px;
  background: var(--hiw-blue);
}

.how-it-works-page .site-nav a:hover,
.how-it-works-page .site-nav a[aria-current="page"] {
  color: var(--hiw-deep-blue);
}

.how-it-works-page .btn--primary {
  border-color: var(--hiw-blue);
  background: var(--hiw-blue);
  color: #fff;
  box-shadow: 0 12px 30px rgba(7, 132, 249, 0.24);
}

.how-it-works-page .btn--primary:hover {
  border-color: var(--hiw-deep-blue);
  background: var(--hiw-deep-blue);
  color: #fff;
}

.hiw-opening {
  padding: 0 0 clamp(3rem, 6vw, 5.5rem);
  background: linear-gradient(180deg, var(--hiw-navy) 0 68%, #f4f7fb 68% 100%);
}

.hiw-opening__grid {
  position: relative;
  display: block;
  width: 100%;
  min-height: 840px;
}

.hiw-opening__copy {
  position: relative;
  z-index: 2;
  width: min(44%, 570px);
  margin-left: max(var(--gutter), calc((100vw - var(--container)) / 2));
  padding: clamp(4.5rem, 7vw, 7rem) 0 2rem;
}

.hiw-opening__copy .eyebrow {
  color: #75c4ff;
}

.hiw-opening__copy h1 {
  max-width: 12ch;
  color: #fff;
  font-size: clamp(44px, 5.2vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.hiw-opening__copy h1 span {
  color: var(--hiw-blue);
}

.hiw-opening__lede {
  max-width: 59ch;
  margin: var(--space-5) 0 var(--space-6);
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.72;
}

.hiw-opening__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hiw-opening__secondary {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(2, 11, 28, 0.22);
  color: #fff;
}

.hiw-opening__secondary:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.hiw-opening__note {
  margin-top: var(--space-5);
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

.hiw-opening__visual {
  position: absolute;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
  min-height: 840px;
  border: 1px solid rgba(0, 93, 218, 0.16);
  border-radius: 0;
  background: var(--hiw-navy);
  box-shadow: 0 30px 80px rgba(2, 11, 28, 0.2);
}

.hiw-opening__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(2, 11, 28, 0.97) 0%, rgba(2, 11, 28, 0.9) 31%, rgba(2, 11, 28, 0.38) 55%, rgba(2, 11, 28, 0.04) 82%),
    linear-gradient(180deg, rgba(2, 11, 28, 0.02) 48%, rgba(2, 11, 28, 0.78) 100%);
  pointer-events: none;
}

.hiw-opening__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hiw-flow {
  position: absolute;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: 176px;
  left: 52%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 94px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.hiw-flow__card {
  --flow-pad: 16px;
  min-height: 126px;
  padding: var(--flow-pad);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--hiw-navy);
  box-shadow: 0 14px 34px rgba(2, 11, 28, 0.22);
}

.hiw-flow__label,
.hiw-flow__outcome span,
.hiw-example span {
  display: block;
  color: #75c4ff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hiw-flow__card strong {
  display: block;
  margin: 0 0 6px;
  color: var(--hiw-deep-blue);
  font-size: 20px;
  text-transform: uppercase;
}

.hiw-flow__card > span:last-child {
  color: #25344a;
  font-size: 12px;
  line-height: 1.45;
}

.hiw-flow__label {
  margin: calc(var(--flow-pad) * -1) calc(var(--flow-pad) * -1) 12px;
  padding: 9px var(--flow-pad);
  border-radius: 15px 15px 0 0;
  background: var(--hiw-navy);
  color: #fff;
}

.hiw-flow__bridge {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: var(--hiw-navy);
  box-shadow: 0 14px 34px rgba(2, 11, 28, 0.22);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hiw-flow__bridge::before,
.hiw-flow__bridge::after {
  position: absolute;
  top: 28px;
  width: auto;
  height: auto;
  background: none;
  color: var(--hiw-blue);
  font-size: 22px;
  font-weight: 800;
}

.hiw-flow__bridge::before { content: '→'; left: -18px; }
.hiw-flow__bridge::after { content: '→'; right: -18px; }

.hiw-flow__bridge img {
  width: 76px;
  height: auto;
  filter: drop-shadow(0 7px 18px rgba(7, 132, 249, 0.45));
}

.hiw-flow__outcome {
  position: absolute;
  right: max(var(--gutter), calc((100vw - var(--container)) / 2));
  bottom: 30px;
  left: max(var(--gutter), calc((100vw - var(--container)) / 2));
  display: grid;
  grid-template-columns: 0.9fr 1.2fr 1.4fr;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 15px 20px;
  border: 1px solid rgba(117, 196, 255, 0.34);
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(0, 93, 218, 0.94), rgba(7, 132, 249, 0.94));
  color: #fff;
}

.hiw-flow__outcome span { color: #fff; }
.hiw-flow__outcome strong { font-size: 18px; }

.hiw-flow__outcome small {
  grid-column: auto;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  text-align: center;
}

.hiw-example {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(2rem, 4vw, 3.5rem);
  overflow: hidden;
  border: 1px solid rgba(117, 196, 255, 0.2);
  border-radius: 20px;
  background: var(--hiw-navy);
  box-shadow: 0 20px 50px rgba(2, 11, 28, 0.14);
}

.hiw-example__item,
.hiw-example__connector {
  min-width: 0;
  padding: 22px clamp(16px, 2.2vw, 28px);
  border-right: 1px solid rgba(255, 255, 255, 0.13);
  color: #fff;
}

.hiw-example > :nth-child(even) { border-right: 0; }
.hiw-example > :nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.13); }

.hiw-example strong {
  display: block;
  margin: 7px 0 4px;
  color: #fff;
  font-size: clamp(18px, 1.8vw, 24px);
}

.hiw-example small {
  color: rgba(255, 255, 255, 0.64);
  font-size: 12px;
}

.hiw-example__connector {
  background: rgba(7, 132, 249, 0.1);
  text-align: center;
}

.hiw-example__item--liability {
  background: var(--hiw-deep-blue);
}

.hiw-example__note {
  margin-top: 14px;
  color: #667386;
  font-size: 12px;
  text-align: center;
}

/* Concept grid */
.concept-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.concept-card {
  padding: var(--space-6);
  border: 1px solid var(--line-100);
  border-radius: var(--radius-lg);
  background: var(--paper-50);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.concept-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.concept-card h3 {
  margin-bottom: var(--space-3);
  font-size: 18px;
}

.concept-card p {
  margin: 0 0 var(--space-3);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-500);
}

.concept-card__detail {
  font-size: 13px;
  padding: var(--space-3);
  background: var(--paper-100);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-100);
  color: var(--ink-700);
}

.concept-card__detail strong {
  color: var(--forest-800);
}

/* Terms list */
.terms-list {
  display: grid;
  gap: var(--space-3);
  max-width: 760px;
  margin-inline: auto;
}

.term-item {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--paper-50);
  border: 1px solid var(--line-100);
}

.term-item dt {
  margin-bottom: var(--space-2);
  font-weight: 800;
  font-size: 15px;
  color: var(--forest-800);
}

.term-item dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-500);
}

.term-item dd em {
  font-style: normal;
  color: var(--ink-700);
}

/* HIW Steps */
.hiw-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
  counter-reset: hiw-step;
}

.hiw-step {
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--line-100);
  border-radius: var(--radius-lg);
  background: var(--paper-50);
}

.hiw-step__number {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mint-400);
  color: var(--forest-900);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  flex-shrink: 0;
}

.hiw-step__number::before {
  content: counter(hiw-step);
  counter-increment: hiw-step;
}

.hiw-step__content h3 {
  margin-bottom: var(--space-3);
  font-size: 20px;
}

.hiw-step__content p {
  margin: 0 0 var(--space-3);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-500);
}

.hiw-step__content p:last-child {
  margin-bottom: 0;
}

.hiw-step__content strong {
  color: var(--forest-800);
}

/* After grid */
.after-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.after-card {
  padding: var(--space-6);
  border: 1px solid var(--line-100);
  border-radius: var(--radius-lg);
  background: var(--paper-50);
}

.after-card h3 {
  margin-bottom: var(--space-3);
  font-size: 18px;
}

.after-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-500);
}

/* Beginner hiking journey */
.hiw-beginner { border-top: 1px solid rgba(117,196,255,.16); background: var(--hiw-navy); }
.hiw-beginner__hero { position: relative; min-height: 700px; overflow: hidden; isolation: isolate; }
.hiw-beginner__hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(2,11,28,.98) 0%, rgba(2,11,28,.88) 34%, rgba(2,11,28,.22) 68%, rgba(2,11,28,.06) 100%), linear-gradient(180deg, transparent 58%, #020b1c 100%); }
.hiw-beginner__hero > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hiw-beginner__hero-inner { display: flex; align-items: center; min-height: inherit; }
.hiw-beginner .section__head { max-width: 620px; margin: 0; }
.hiw-beginner .eyebrow { color: #75c4ff; }
.hiw-beginner h2 { max-width: 12ch; color: #fff; font-size: clamp(42px,5vw,68px); line-height: 1.02; }
.hiw-beginner h2 span { color: var(--hiw-blue); }
.hiw-beginner .section__head > p { max-width: 52ch; color: rgba(255,255,255,.8); font-size: 17px; line-height: 1.72; }
.hiw-beginner__reassurance { display: flex; align-items: center; gap: 1rem; width: fit-content; margin-top: 2rem; padding: 1rem 1.35rem; border: 1px solid rgba(7,132,249,.48); border-radius: 14px; background: rgba(2,11,28,.72); color: #fff !important; font-weight: 700; }
.hiw-beginner__reassurance span { display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--hiw-blue); border-radius: 50%; color: #75c4ff; }
.hiw-beginner__features { padding-top: 1.5rem; padding-bottom: clamp(4rem,8vw,7rem); }
.beginner-grid {
  display: grid;
  gap: 1rem;
  counter-reset: beginner;
}

.beginner-card {
  display: grid;
  grid-template-columns: 108px minmax(0,1fr) minmax(300px,.9fr);
  min-height: 190px;
  overflow: hidden;
  border: 1px solid rgba(117,196,255,.22);
  border-radius: 16px;
  background: linear-gradient(100deg,rgba(7,132,249,.1),rgba(255,255,255,.025));
}
.beginner-card__rail { display: grid; place-items: center; align-content: center; gap: .8rem; border-right: 1px solid rgba(117,196,255,.2); background: rgba(7,132,249,.09); }
.beginner-card__rail strong { color: #75c4ff; font: 800 27px var(--font-mono); }
.beginner-card__rail svg { width: 48px; height: 48px; fill: none; stroke: var(--hiw-blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.beginner-card__copy { align-self: center; padding: 1.7rem 2rem; }
.beginner-card h3 { margin-bottom: .75rem; color: #fff; font-size: clamp(21px,2vw,28px); }
.beginner-card p { margin: 0; color: rgba(255,255,255,.68); font-size: 14px; line-height: 1.7; }
.beginner-card__demo { align-self: center; display: grid; grid-template-columns: repeat(5,28px); gap: .55rem; margin: 1.25rem; padding: 1.4rem; border: 1px solid rgba(117,196,255,.2); border-radius: 12px; background: rgba(0,20,52,.62); color: #a9d9ff; }
.beginner-card__demo span { display: grid; place-items: center; height: 28px; border-radius: 50%; background: rgba(117,196,255,.12); }
.beginner-card__demo .is-active { background: var(--hiw-blue); color: #fff; }
.beginner-card__demo strong { grid-column: 1/-1; margin-top: .5rem; color: #fff; font-size: 17px; }
.beginner-card__demo--help,.beginner-card__demo--guide,.beginner-card__demo--warning { grid-template-columns: 1fr; }
.beginner-card__demo--help span,.beginner-card__demo--guide span,.beginner-card__demo--warning span { display: block; height: auto; padding-top: .45rem; border-top: 1px solid rgba(117,196,255,.15); border-radius: 0; background: none; }
.beginner-card__demo--help i { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: .5rem; border: 1px solid var(--hiw-blue); border-radius: 50%; color: #75c4ff; font-style: normal; }
.beginner-card__demo--guide span { color: #75c4ff; }
.beginner-card__demo--warning strong { color: #ffb63e; }

/* Compact VPS */
.vps__inner--compact {
  grid-template-columns: 1.08fr .92fr;
  align-items: stretch;
  max-width: none;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(117,196,255,.2);
  border-radius: 24px;
  background: #020b1c;
  box-shadow: 0 24px 70px rgba(2,11,28,.22);
  text-align: left;
}
.how-it-works-page .vps { border-top: 1px solid rgba(117,196,255,.14); background: #020b1c; }
.vps__visual { min-height: 520px; overflow: hidden; }
.vps__visual img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.vps__inner--compact .vps__copy { align-self: center; padding: clamp(2rem,5vw,4.5rem); }
.vps__inner--compact .vps__copy .eyebrow { color: #75c4ff; }
.vps__inner--compact .vps__copy h2 { color: #fff; }
.vps__inner--compact .vps__copy > p { color: rgba(255,255,255,.72); }

.vps__inner--compact .vps__comparison {
  display: none;
}

.how-it-works-page .cta-band { border: 1px solid rgba(117,196,255,.22); background: linear-gradient(135deg,#020b1c,#052451); }
.how-it-works-page .cta-band::before { background: radial-gradient(90% 130% at 50% -30%,rgba(7,132,249,.32),transparent 62%); }
.how-it-works-page .cta-band .eyebrow { color: #75c4ff; }
.how-it-works-page .cta-band .btn--primary { box-shadow: 0 12px 30px rgba(7,132,249,.32); }

/* Responsive */
@media (max-width: 1020px) {
  .concept-grid,
  .after-grid,
  .beginner-grid {
    grid-template-columns: 1fr;
  }

  .hiw-opening__grid {
    min-height: 760px;
  }

  .how-it-works-page .site-header__inner {
    height: 92px;
  }

  .how-it-works-page .brand--approved {
    width: 220px;
    height: 66px;
  }

  .hiw-opening__copy {
    width: min(46%, 440px);
    margin-left: var(--gutter);
    padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  }

  .hiw-opening__copy h1 {
    font-size: clamp(40px, 5.4vw, 56px);
  }

  .hiw-opening__visual {
    min-height: 760px;
  }

  .hiw-flow {
    grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1fr);
  }

  .hiw-flow__card {
    --flow-pad: 13px;
    min-height: 134px;
  }

  .hiw-flow__bridge img {
    width: 58px;
  }

  .hiw-example {
    grid-template-columns: repeat(2, 1fr);
  }

  .hiw-example > :nth-child(2) {
    border-right: 0;
  }

  .hiw-example > :nth-child(-n+2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  }
}

@media (max-width: 760px) {
  .how-it-works-page .site-nav {
    background: #000;
    border-bottom-color: rgba(255, 255, 255, 0.14);
  }

  .how-it-works-page .site-header__inner {
    height: 72px;
  }

  .how-it-works-page .brand--approved {
    width: 148px;
    height: 48px;
  }

  .how-it-works-page .site-nav a {
    color: #fff;
    border-bottom-color: rgba(117, 196, 255, 0.16);
  }

  .how-it-works-page .nav-toggle__icon,
  .how-it-works-page .nav-toggle__icon::before,
  .how-it-works-page .nav-toggle__icon::after {
    background: #fff;
  }

  .hiw-opening {
    padding-top: 2.5rem;
    background: #f4f7fb;
  }

  .hiw-opening__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.25rem;
    min-height: 0;
  }

  .hiw-opening__copy {
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .hiw-opening__copy .eyebrow {
    color: var(--hiw-deep-blue);
  }

  .hiw-opening__copy h1 {
    max-width: 13ch;
    color: var(--hiw-navy);
    font-size: clamp(40px, 12vw, 54px);
  }

  .hiw-opening__lede {
    color: #4a586d;
  }

  .hiw-opening__secondary {
    border-color: #b9c6d5;
    background: #fff;
    color: var(--hiw-navy);
  }

  .hiw-opening__note {
    color: #667386;
  }

  .hiw-opening__actions {
    flex-direction: column;
  }

  .hiw-opening__actions .btn {
    width: 100%;
  }

  .hiw-opening__visual {
    position: relative;
    inset: auto;
    min-height: 560px;
    border-radius: 22px;
  }

  .hiw-opening__photo {
    object-position: 62% center;
  }

  .hiw-flow {
    left: clamp(1rem, 2.5vw, 2rem);
    bottom: 144px;
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
    gap: 6px;
  }

  .hiw-flow__card {
    --flow-pad: 11px;
    min-height: 142px;
  }

  .hiw-flow__card strong {
    font-size: 16px;
  }

  .hiw-flow__card > span:last-child {
    font-size: 10px;
  }

  .hiw-flow__bridge img {
    width: 44px;
  }

  .hiw-flow__bridge span {
    font-size: 8px;
  }

  .hiw-flow__bridge::before,
  .hiw-flow__bridge::after {
    top: 19px;
    font-size: 14px;
  }

  .hiw-flow__bridge::before { left: -4px; }
  .hiw-flow__bridge::after { right: -4px; }

  .hiw-flow__outcome {
    left: clamp(1rem, 2.5vw, 2rem);
    padding: 12px 14px;
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hiw-flow__outcome small {
    grid-column: 1;
  }

  .hiw-flow__outcome strong {
    font-size: 15px;
  }

  .hiw-example {
    grid-template-columns: 1fr;
  }

  .hiw-example__item,
  .hiw-example__connector,
  .hiw-example > :nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  }

  .hiw-example > :last-child {
    border-bottom: 0;
  }

  .hiw-step {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .hiw-step__number {
    width: 36px;
    height: 36px;
    font-size: 14px;
    margin: 0 auto;
  }

  .hiw-step__content h3 {
    font-size: 18px;
  }
}

/* Full-width cinematic glossary chapters */
.hiw-glossary {
  padding-bottom: 0;
  border-top: 1px solid rgba(117,196,255,.18);
  background: var(--hiw-navy);
  color: #fff;
}

.hiw-glossary > .container { width: 100%; max-width: none; padding-inline: 0; }
.hiw-glossary .section__head {
  max-width: 680px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hiw-glossary .section__head .eyebrow { color: #75c4ff; }
.hiw-glossary .section__head h2 { color: #fff; }
.hiw-glossary .section__head > p:last-child { color: rgba(255,255,255,.7); }

.glossary-groups {
  display: grid;
  gap: 0;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

.glossary-group {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(480px,1fr);
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-top: 1px solid rgba(117,196,255,.22);
  border-radius: 0;
  background: #020b1c;
  box-shadow: inset 0 1px rgba(117,196,255,.18), inset 0 14px 18px -20px rgba(2,11,28,.8);
}
.glossary-group::before,.glossary-group::after { content: ''; position: absolute; inset: 0; z-index: -2; }
.glossary-group::before { background: url('/images/how-it-works-terms-basics-full.webp') center 42% / cover no-repeat; }
.glossary-group:nth-child(2)::before { background-image: url('/images/how-it-works-terms-offer-full.webp'); background-position: center 48%; }
.glossary-group:nth-child(3)::before { inset: 0 -60px; transform: translateX(-50px); background-image: url('/images/how-it-works-terms-profit-full.webp'); background-position: center 22%; }
.glossary-group::after { z-index: -1; background: linear-gradient(90deg,rgba(2,11,28,.82) 0%,rgba(2,11,28,.6) 30%,rgba(2,11,28,.18) 48%,transparent 62%); }

.glossary-group--reverse .glossary-group__visual { order: 0; }

.glossary-group__visual {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 0;
  overflow: visible;
  background: none;
}

.glossary-group:nth-child(2) .glossary-group__visual,
.glossary-group:nth-child(3) .glossary-group__visual { background: none; }

.glossary-group__visual::after { display: none; }

.glossary-group__visual img { display: none; }

.glossary-group__caption {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  width: min(650px,100%);
  margin-left: max(var(--gutter),calc((100vw - var(--container))/2));
  padding: clamp(3rem,7vw,6rem) clamp(2rem,5vw,5rem) clamp(3rem,7vw,6rem) 0;
  color: #fff;
}

.glossary-group__caption .eyebrow { color: #75c4ff; }
.glossary-group__caption h3 { max-width: 9ch; margin: .5rem 0 1.2rem; color: #fff; font-size: clamp(54px,6.3vw,92px); line-height: .96; letter-spacing: -.05em; }
.glossary-group__caption p:last-child { max-width: 34ch; margin: 0; color: rgba(255,255,255,.86); font-size: clamp(17px,1.5vw,21px); font-weight: 600; line-height: 1.55; }

.glossary-group__terms {
  display: grid;
  align-content: center;
  margin: 0;
  padding: clamp(3rem,6vw,5rem) max(var(--gutter),calc((100vw - var(--container))/2)) clamp(3rem,6vw,5rem) clamp(1.5rem,4vw,4rem);
}

.glossary-group__terms .term-item {
  position: relative;
  margin-bottom: .8rem;
  padding: clamp(1rem,1.5vw,1.35rem) 1.25rem clamp(1rem,1.5vw,1.35rem) 4.7rem;
  border: 1px solid rgba(117,196,255,.22);
  border-radius: 12px;
  background: rgba(2,20,50,.72);
  box-shadow: 0 14px 35px rgba(2,11,28,.22);
  backdrop-filter: blur(12px);
}

.glossary-group__terms .term-item:last-child { margin-bottom: 0; border-bottom: 1px solid rgba(117,196,255,.22); }
.glossary-group__terms .term-item::before {
  content: attr(data-term);
  position: absolute;
  top: clamp(1rem, 2vw, 1.45rem);
  left: 1.25rem;
  color: var(--hiw-blue);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
}

.glossary-group__terms .term-item dt { margin-bottom: .35rem; color: #fff; font-size: 18px; }
.glossary-group__terms .term-item dd { color: rgba(230,239,249,.76); line-height: 1.58; }
.glossary-group__terms .term-item dd em { color: #fff; }

/* Approved connected journey and record */
.hiw-journey {
  overflow: hidden;
  border-top: 1px solid rgba(117, 196, 255, .2);
  background: var(--hiw-navy);
  color: #fff;
}

.hiw-journey__hero {
  position: relative;
  min-height: clamp(460px, 50vw, 650px);
  border-bottom: 1px solid rgba(117, 196, 255, .2);
  background: var(--hiw-navy) url('/images/how-it-works-journey.webp') center / cover no-repeat;
}

.hiw-journey__hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(2,11,28,.98) 0%, rgba(2,11,28,.86) 38%, rgba(2,11,28,.18) 70%, rgba(2,11,28,.05) 100%), linear-gradient(0deg, rgba(2,11,28,.42), transparent 50%);
}

.hiw-journey__hero > img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: none;
}

.hiw-journey__hero-inner {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  min-height: inherit;
}

.hiw-journey__hero .section__head { max-width: 620px; margin: 0; }
.hiw-journey__hero .eyebrow, .journey-record .eyebrow { color: #75c4ff; }
.hiw-journey__hero h2 { max-width: 13ch; color: #fff; font-size: clamp(42px, 5.2vw, 68px); line-height: 1.02; letter-spacing: -.04em; }
.hiw-journey__hero .section__head > p:last-child { max-width: 54ch; color: rgba(255,255,255,.78); }

.hiw-journey__body { padding-top: clamp(3rem, 6vw, 5.5rem); padding-bottom: clamp(3.5rem, 7vw, 6.5rem); }
.hiw-journey .hiw-steps { gap: 0; }

.hiw-journey .hiw-step {
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 0;
  padding: 0;
  border: 1px solid rgba(117,196,255,.22);
  border-bottom: 0;
  border-radius: 0;
  background: linear-gradient(100deg, rgba(7,132,249,.1), rgba(255,255,255,.025));
}

.hiw-journey .hiw-step:first-child { border-radius: 18px 18px 0 0; }
.hiw-journey .hiw-step:last-child { border-bottom: 1px solid rgba(117,196,255,.22); border-radius: 0 0 18px 18px; }
.hiw-journey .hiw-step__number {
  align-self: stretch;
  align-content: center;
  gap: .7rem;
  width: auto;
  height: auto;
  border-right: 1px solid rgba(117,196,255,.2);
  border-radius: 0;
  background: rgba(7,132,249,.09);
  color: transparent;
  font-size: 0;
}
.hiw-journey .hiw-step__number::before { color: #75c4ff; font-size: 26px; font-weight: 800; }

.hiw-step__icon {
  width: 46px;
  height: 46px;
  overflow: visible;
  fill: none;
  stroke: var(--hiw-blue);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 7px 16px rgba(7,132,249,.28));
}

.hiw-journey .hiw-step__content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(140px, .48fr);
  padding: clamp(1.5rem, 3vw, 2.4rem);
}

.hiw-journey .hiw-step__content h3 { grid-column: 1 / 3; margin: 0 0 1.35rem; color: #fff; font-size: clamp(21px, 2vw, 28px); }
.hiw-journey .hiw-step__content p { margin: 0; padding-right: clamp(1rem, 3vw, 2.5rem); color: rgba(255,255,255,.63); line-height: 1.7; }
.hiw-journey .hiw-step__content p:last-child { padding-right: 0; padding-left: clamp(1rem, 3vw, 2.5rem); border-left: 1px solid rgba(117,196,255,.18); color: rgba(255,255,255,.86); }
.hiw-journey .hiw-step__content strong { display: block; margin-bottom: .35rem; color: #75c4ff; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.hiw-journey .hiw-step__content p:first-of-type strong { color: rgba(255,255,255,.48); }
.hiw-journey .hiw-step__content strong::before {
  content: '✓';
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: .55rem;
  border-radius: 50%;
  background: var(--hiw-blue);
  color: #fff;
  letter-spacing: 0;
}
.hiw-journey .hiw-step__content p:first-of-type strong::before { content: '×'; background: #64748b; }

.hiw-step__visual {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-height: 132px;
  margin-left: clamp(1rem, 2.5vw, 2rem);
  padding: .75rem;
  border-left: 1px solid rgba(117,196,255,.16);
  color: #a9d9ff;
}
.hiw-step__visual svg { width: 100%; max-width: 180px; height: auto; fill: none; stroke: #087ff5; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 8px 20px rgba(7,132,249,.2)); }
.hiw-step__visual text { fill: #e4f3ff; stroke: none; font: 700 16px var(--font-mono); }
.hiw-step__visual--reward text { font-size: 42px; }
.hiw-step__visual .hiw-step__accent { fill: rgba(7,132,249,.25); }

.journey-record { margin-top: clamp(4rem, 8vw, 7rem); padding-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid rgba(117,196,255,.2); }
.journey-record .section__head { max-width: 760px; }
.journey-record h2 { color: #fff; }
.journey-record .after-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.journey-record .after-card { padding: clamp(1.35rem, 2.4vw, 2rem); border-color: rgba(117,196,255,.22); background: rgba(255,255,255,.04); }
.journey-record .after-card > span { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 1.2rem; border: 1px solid rgba(117,196,255,.35); border-radius: 11px; color: #75c4ff; font-family: var(--font-mono); font-size: 18px; }
.journey-record .after-card h3 { color: #fff; }
.journey-record .after-card p { color: rgba(255,255,255,.64); }

@media (max-width: 1020px) {
  .glossary-group { grid-template-columns: minmax(300px,.9fr) minmax(0,1.1fr); min-height: 0; }
  .glossary-group__caption { margin-left: var(--gutter); padding-right: 1.5rem; }
  .glossary-group__terms { padding-right: var(--gutter); padding-left: 1.25rem; }
  .journey-record .after-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hiw-journey .hiw-step__content { grid-template-columns: repeat(2, minmax(0, 1fr)) 128px; }
  .hiw-step__visual { margin-left: 1rem; padding: .4rem; }
}

@media (min-width: 761px) and (max-width: 900px) and (orientation: portrait) {
  .glossary-groups { gap: 0; }
  .glossary-group {
    grid-template-columns: minmax(300px,.88fr) minmax(0,1.12fr);
    min-height: 0;
  }
  .glossary-group__visual { min-height: 0; }
  .glossary-group__terms {
    align-content: center;
    padding-block: 2rem;
  }
  .glossary-group__caption h3 { font-size: clamp(52px,7vw,64px); line-height: .98; }
  .glossary-group__caption p:last-child { max-width: 42ch; color: rgba(255,255,255,.88); font-size: 17px; font-weight: 600; line-height: 1.55; }
  .glossary-group:nth-child(2)::before { inset: 0 -50px; transform: translateX(-35px); background-position: center 5%; }
}

@media (min-width: 901px) and (max-width: 1100px) and (orientation: landscape) {
  .glossary-group:nth-child(1)::before { background-position: center 5%; }
  .glossary-group:nth-child(2)::before { inset: 0 -50px; transform: translateX(-35px); background-position: center 5%; }
}

@media (max-width: 760px) {
  .glossary-group { grid-template-columns: 1fr; min-height: 0; border-radius: 0; }
  .glossary-group--reverse .glossary-group__visual { order: 0; }
  .glossary-group__visual { min-height: 330px; }
  .glossary-group__caption { align-self: end; margin: 0; padding: 3rem var(--gutter) 2rem; }
  .glossary-group__caption h3 { max-width: 9ch; font-size: clamp(46px,14vw,60px); }
  .glossary-group__terms { padding: 1rem var(--gutter) 3rem; }
  .glossary-group__terms .term-item { padding-left: 4rem; }
  .glossary-group:nth-child(3)::before { inset: 0 -30px; transform: translateX(-24px); }
  .hiw-journey__hero { min-height: 620px; }
  .hiw-journey__hero::after { background: linear-gradient(180deg, rgba(2,11,28,.1) 20%, rgba(2,11,28,.94) 70%, #020b1c 100%); }
  .hiw-journey__hero > img { object-position: 68% center; }
  .hiw-journey__hero-inner { align-items: flex-end; padding-bottom: 3rem; }
  .hiw-journey__hero h2 { font-size: clamp(38px, 11vw, 52px); }
  .hiw-journey .hiw-step { grid-template-columns: 56px minmax(0, 1fr); }
  .hiw-journey .hiw-step__number { margin: 0; }
  .hiw-journey .hiw-step__number::before { font-size: 19px; }
  .hiw-step__icon { width: 30px; height: 30px; stroke-width: 3.5; }
  .hiw-journey .hiw-step__content { grid-template-columns: 1fr; padding: 1.25rem; }
  .hiw-journey .hiw-step__content h3 { grid-column: 1; }
  .hiw-journey .hiw-step__content p { padding: 0 0 1.15rem; }
  .hiw-journey .hiw-step__content p:last-child { padding: 1.15rem 0 0; border-top: 1px solid rgba(117,196,255,.18); border-left: 0; }
  .hiw-step__visual { grid-column: 1; grid-row: auto; min-height: 120px; margin: 1.25rem 0 0; padding: 1rem 0 0; border-top: 1px solid rgba(117,196,255,.16); border-left: 0; }
  .journey-record .after-grid { grid-template-columns: 1fr; }
}

/* Keep both people visible when the tall source photography is cropped into tablet and desktop panels. */
@media (min-width: 761px) {
  .glossary-group:nth-child(1)::before,
  .glossary-group:nth-child(2)::before {
    background-position: center 5%;
  }
}

@media (max-width: 1020px) {
  .beginner-card { grid-template-columns: 88px minmax(0,1fr) minmax(230px,.82fr); }
  .beginner-card__copy { padding: 1.4rem; }
  .beginner-card__demo { margin: .9rem; padding: 1rem; }
  .vps__inner--compact { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .hiw-beginner__hero { min-height: 720px; }
  .hiw-beginner__hero::after { background: linear-gradient(180deg,rgba(2,11,28,.16) 15%,rgba(2,11,28,.92) 62%,#020b1c 100%); }
  .hiw-beginner__hero > img { object-position: 63% center; }
  .hiw-beginner__hero-inner { align-items: flex-end; padding-bottom: 3rem; }
  .hiw-beginner h2 { font-size: clamp(38px,11vw,52px); }
  .hiw-beginner .section__head > p { font-size: 15px; }
  .hiw-beginner__reassurance { align-items: flex-start; font-size: 14px !important; }
  .beginner-card { grid-template-columns: 68px minmax(0,1fr); }
  .beginner-card__rail { grid-row: 1 / 3; }
  .beginner-card__rail strong { font-size: 21px; }
  .beginner-card__rail svg { width: 36px; height: 36px; }
  .beginner-card__copy { padding: 1.25rem; }
  .beginner-card__demo { grid-column: 2; margin: 0 1.25rem 1.25rem; }
  .vps__inner--compact { grid-template-columns: 1fr; }
  .vps__visual { min-height: 360px; }
  .vps__inner--compact .vps__copy { padding: 2rem 1.4rem; }
}