.ii-hero, .ii-application, .ii-return {
  --ii-coal: #101a21;
  --ii-cream: #fff8ed;
  --ii-amber: #f2c27a;
  --ii-line: #f4d5a844;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.ii-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ii-cream);
  background: #101a21;
  padding: clamp(1rem, 2.4vh, 1.65rem) 1.15rem;
  border-bottom: 2px solid #c6945d;
  scroll-margin-top: 4rem;
}

.ii-hero__photo, .ii-hero__photo img, .ii-hero::before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ii-hero__photo { z-index: -2; }
.ii-hero__photo img { object-fit: cover; object-position: center; }
.ii-hero::before {
  z-index: -1;
  content: "";
  background:
    linear-gradient(0deg, #0a141db3, #0a141d00 24%, #0a141d0d 75%, #0a141d52),
    linear-gradient(90deg, #0a141d14, #0a141dcd 23%, #0a141dda 43%, #0a141ddc 65%, #0a141da8 82%, #0a141d21);
}
.ii-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.35rem;
  align-items: center;
  max-width: 72rem;
  margin-inline: auto;
}
.ii-hero__center { min-width: 0; }
.ii-hero__heading h1 {
  margin: 0;
  max-width: 22ch;
  font: 650 clamp(1.85rem, 4vw, 3.3rem)/1.08 system-ui, sans-serif;
  letter-spacing: -.046em;
  text-wrap: balance;
  overflow-wrap: break-word;
  color: var(--ii-cream);
}
.ii-hero__heading .crumbs {
  color: #f4e4cf;
  margin-bottom: .75rem;
  font-size: .8rem;
}
.ii-hero__heading .crumbs a { color: #f4d29f; text-decoration: underline; text-underline-offset: .2em; }
.ii-hero__heading .page-subtitle,
.ii-hero__lead {
  max-width: 49ch;
  margin: .9rem 0 0;
  padding-inline-start: .85rem;
  border-inline-start: 2px solid #e7ad65;
  font: 400 clamp(1rem, 1.45vw, 1.16rem)/1.5 system-ui, sans-serif;
  color: #f3e9da;
  text-wrap: pretty;
}
.ii-hero__lead strong { color: #ffd599; font-weight: 730; }
.ii-hero__heading .bay-badges { margin: .85rem 0 0; }
.ii-hero__heading .chip-time {
  color: #f1e6d6;
  background: #101a21d0;
  border: 1px solid var(--ii-line);
}

.ii-application {
  --ii-form-height: 680px;
  --ii-form-scale: 1;
  position: relative;
  width: 100%;
  max-width: 35rem;
  padding: .7rem;
  background: #101a21ee;
  border: 1px solid var(--ii-line);
  border-radius: 15px;
  box-shadow: 0 18px 55px #03080d70;
  text-align: left;
  scroll-margin-top: 1.2rem;
}
.ii-application::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline: 14% 55%;
  border-top: 2px solid var(--ii-amber);
}
.ii-application__mount {
  border-radius: 9px;
  background: #f8f1e6;
  height: calc(var(--ii-form-height) * var(--ii-form-scale));
  overflow: hidden;
}
.ii-application__frame {
  display: block;
  width: calc(100% / var(--ii-form-scale));
  height: var(--ii-form-height);
  transform: scale(var(--ii-form-scale));
  transform-origin: top left;
  border: 0;
}
.ii-application__fineprint {
  color: #e1d9ce;
  font-size: .69rem;
  line-height: 1.35;
  margin: .35rem .22rem 0;
}
.ii-application__fineprint a { color: #f8d29a; text-decoration: underline; text-underline-offset: .16em; }
.ii-application__fineprint svg { vertical-align: -.14em; margin-right: .2em; }
.ii-hero :focus-visible, .ii-return :focus-visible {
  outline: 2px solid var(--ii-amber);
  outline-offset: 4px;
}
.ii-hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem 1.4rem;
  margin: 1.45rem 0 0;
  max-width: 31rem;
  padding: .8rem 1rem;
  border: 1px solid #f4d5a82b;
  border-radius: .75rem;
  background: rgb(16 26 33 / 67%);
}
.ii-hero__facts > div:nth-child(n + 3) { border-top: 1px solid var(--ii-line); padding-top: .55rem; }
.ii-hero__facts dt { color: #eee2d4; font-size: .78rem; }
.ii-hero__facts dd {
  margin: .12rem 0 0;
  color: #f9cd8d;
  font-size: .96rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.ii-hero__facts dd span { color: #eee2d4; font-size: .76rem; font-weight: 400; }

.ii-return {
  width: min(100% - 2rem, 49rem);
  margin: clamp(2.25rem, 6vw, 4rem) auto;
  padding: clamp(1.35rem, 4vw, 2.5rem);
  background: var(--ii-coal);
  color: var(--ii-cream);
  border-radius: 18px;
  text-align: center;
  scroll-margin-top: 6rem;
}
.ii-return h2 {
  margin: 0;
  color: var(--ii-cream);
  font: 650 clamp(1.45rem, 3.6vw, 2.2rem)/1.16 system-ui, sans-serif;
  text-wrap: balance;
}
.ii-return .bay-badges { justify-content: center; margin: .85rem 0; }
.ii-return .chip-time { color: var(--ii-cream); background: #ffffff0d; border: 1px solid var(--ii-line); }
.ii-return__link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin: .65rem 0 0;
  padding: .65rem 1.25rem;
  border-radius: 8px;
  background: var(--ii-amber);
  color: #1f1a14;
  font-weight: 700;
  text-decoration: none;
}
.ii-return__link:hover { background: #ffda9c; color: #1f1a14; }
.ii-placeholder-links {
  max-width: 72rem;
  margin: 2.25rem auto;
  padding-inline: 1.15rem;
}
.ii-placeholder-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}
.ii-placeholder-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .45rem .8rem;
  border: 1px solid #b4c9dd;
  border-radius: 8px;
}

@media (min-width: 56rem) {
  .ii-hero {
    min-height: 66svh;
    display: grid;
    align-items: center;
    padding-inline: clamp(2rem, 5vw, 5.5rem);
  }
  .ii-hero__layout {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(22rem, .77fr);
    gap: clamp(1.6rem, 5vw, 5rem);
  }
  .ii-application { --ii-form-scale: .74; justify-self: end; }
}
@media (min-width: 56rem) and (max-height: 820px) {
  .ii-hero { padding-block: 1rem; }
  .ii-application { --ii-form-scale: .7; }
}
@media (max-width: 55.99rem) {
  .ii-hero__photo {
    height: min(100%, clamp(31rem, 82svh, 44rem));
    mask-image: linear-gradient(#000 70%, transparent 100%);
  }
  .ii-hero__photo img { object-position: center 32%; }
  .ii-hero::before {
    background:
      linear-gradient(180deg, #101a2161 0%, #101a2169 27%, #101a21d9 48%, #101a21 76%),
      linear-gradient(90deg, #101a2144, #101a2170 48%, #101a2144);
  }
  .ii-hero__layout { max-width: 35rem; }
  .ii-hero__facts { background-color: rgb(16 26 33 / 78%); }
}
@media (max-width: 23rem) {
  .ii-hero { padding-inline: .55rem; }
  .ii-application { padding: .375rem; }
}