/* Block 01 only. Desktop positioning and assets remain in the base styles. */
.hero picture, .hero__visual { display: contents; }
.hero picture > source { display: none; }
.hero__menu-toggle { display: none; }

@font-face { font-family: "IBM Plex Sans Mobile"; src: url("../assets/mobile/block-01-hero/fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Mobile"; src: url("../assets/mobile/block-01-hero/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Mobile"; src: url("../assets/mobile/block-01-hero/fonts/IBMPlexSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

@media (max-width: 767px) {
  .hero {
    --mobile-gutter: clamp(26px, 8.8vw, 48px);
    width: 100%; max-width: none; height: auto; padding-bottom: 25px;
    font-family: "IBM Plex Sans Mobile", sans-serif;
    background-image: linear-gradient(#e7e9ec88 1px, transparent 1px), linear-gradient(90deg, #e7e9ec88 1px, transparent 1px), radial-gradient(ellipse at 35% 43%, #ffffff70, transparent 78%);
    background-size: 42px 42px, 42px 42px, 100% 100%;
    background-position: 0 43px, 27px 0, 0 0;
  }
  .hero__header {
    position: relative; inset: auto; height: 48px; margin-inline: var(--mobile-gutter);
    display: flex; align-items: center; justify-content: space-between; border: 0; z-index: 5;
  }
  .hero__brand { position: static; width: 154px; height: 34px; }
  .hero__button--header { display: none; }
  .hero__menu-toggle {
    display: none; width: 44px; height: 44px; padding: 11px; border: 0; background: transparent;
    align-items: center; justify-content: center; flex-direction: column; gap: 4px; cursor: pointer;
    margin-right: -11px; color: #111;
  }
  .hero--menu-ready .hero__menu-toggle { display: flex; }
  .hero__menu-toggle span { display: block; width: 22px; height: 2px; border-radius: 1px; background: currentColor; }
  .hero__menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .hero__menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .hero__menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .hero__nav {
    position: static; width: auto; height: auto; display: flex; flex-wrap: wrap; gap: 0 14px;
  }
  .hero__nav a { font-size: 16px; line-height: 22px; padding-block: 11px; }
  .hero:not(.hero--menu-ready) .hero__header { height: auto; min-height: 48px; flex-wrap: wrap; }
  .hero--menu-ready .hero__nav {
    display: none; position: absolute; top: 48px; inset-inline: 0; width: auto; height: auto;
    padding: 8px 18px; background: #f9fafb; border: 1px solid #d9dde2; border-radius: 7px;
    box-shadow: 0 10px 25px #15202b24;
  }
  .hero--menu-open .hero__nav { display: flex; flex-direction: column; align-items: stretch; }
  .hero__copy { position: relative; inset: auto; width: auto; margin: 10px var(--mobile-gutter) 0; }
  .hero__eyebrow { font-size: clamp(10.5px, 2.9vw, 14px); line-height: 16px; letter-spacing: 1px; }
  .hero h1 { margin-top: 11px; font-size: clamp(29px, 8.7vw, 48px); line-height: 1.02; letter-spacing: -.9px; }
  .hero h1 span { white-space: normal; }
  .hero__description {
    margin-top: 13px; font-size: clamp(13px, 3.45vw, 18px); line-height: 1.3;
    letter-spacing: -.15px; white-space: normal;
  }
  .hero__description br { display: none; }
  .hero__actions { flex-direction: column; gap: 7px; margin-top: 15px; }
  .hero__actions .hero__button { width: 100%; min-height: 44px; height: auto; padding: 9px 6px; border-width: 1px; border-radius: 4px; font-size: 14px; line-height: 22px; gap: 8px; }
  .hero__button span { font-size: 22px; }
  .hero__visual {
    --hero-unit: calc((100vw - 2 * var(--mobile-gutter)) / 800);
    display: block; position: relative; width: calc(100% - 2 * var(--mobile-gutter));
    margin: 13px auto 0; aspect-ratio: 1341 / 1173;
  }
  .hero__journey { inset: 0; width: 100%; height: 100%; }
  .hero__step--05 { transform: skewY(8deg); }
  .hero__annotations { inset: 0; }
  .hero__note--system { left: calc(530 * var(--hero-unit)); top: calc(23 * var(--hero-unit)); width: calc(279 * var(--hero-unit)); }
  .hero__note--find { left: calc(318 * var(--hero-unit)); top: calc(14 * var(--hero-unit)); width: calc(134 * var(--hero-unit)); }
  .hero__note--trust { left: calc(496 * var(--hero-unit)); top: calc(171 * var(--hero-unit)); width: calc(136 * var(--hero-unit)); }
  .hero__note--request { left: calc(640 * var(--hero-unit)); top: calc(293 * var(--hero-unit)); width: calc(119 * var(--hero-unit)); }
  .hero__note--automation { left: calc(710 * var(--hero-unit)); top: calc(390 * var(--hero-unit)); width: calc(137 * var(--hero-unit)); }
  .hero__arrow--01 { left: calc(312 * var(--hero-unit)); top: calc(95 * var(--hero-unit)); }
  .hero__arrow--02 { left: calc(468 * var(--hero-unit)); top: calc(229 * var(--hero-unit)); }
  .hero__arrow--03 { left: calc(618 * var(--hero-unit)); top: calc(364 * var(--hero-unit)); }
  .hero__arrow--04 { left: calc(740 * var(--hero-unit)); top: calc(506 * var(--hero-unit)); }
  .hero__benefits {
    position: relative; inset: auto; margin: 20px 4.8% 0; width: 90.4%;
    display: grid; grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 1.1fr));
  }
  .hero__benefits li, .hero__benefits li + li, .hero__benefits li:last-child {
    width: auto; height: auto; min-width: 0; padding: 0 6px; gap: 5px;
  }
  .hero__benefits li:first-child { padding-left: 0; }
  .hero__benefits li:last-child { padding-right: 0; }
  .hero__benefits li + li { border-left: 1px solid #cbd0d8; }
  .hero__benefits img { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; }
  .hero__benefits h2 { font-size: clamp(9px, 2.45vw, 13px); line-height: 1.2; letter-spacing: -.25px; margin-bottom: 3px; }
  .hero__benefits p { font-size: clamp(8.5px, 2.3vw, 12px); line-height: 1.3; }
  .hero__benefits br { display: none; }
  .hero__signature { display: none; }
  .hero a:focus-visible, .hero button:focus-visible { outline: 2px solid #ff5c00; outline-offset: 3px; }
}