/* Phone and tablet layout (below 1024 px) for the public area. Every rule sits inside a
   max-width media query of 1023px or less, so the desktop design (1024 px and up) is unchanged. */

/* The menu button exists only below 1024 px. */
@media (min-width: 1024px) {
  .hm-nav__toggle {
    display: none;
  }
}

@media (max-width: 1023px) {
  html,
  body.public,
  body.auth {
    overflow-x: clip;
  }

  /* Decorative shapes are far wider than a phone: never let them widen the page. */
  .hm-deco,
  .hm-hero__shapes {
    display: none;
  }

  .hm-hero,
  .hm-section,
  .hm-footer {
    overflow: hidden;
  }

  /* ---- header: logo + menu button, the rest opens as a panel ---- */
  .hm-nav {
    padding-inline: 12px;
  }

  .hm-nav__box {
    padding-inline: 16px;
    gap: 8px;
    min-block-size: 64px;
  }

  .hm-logo {
    inline-size: auto;
    justify-content: flex-start;
  }

  .hm-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-inline-start: auto;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: 1px solid var(--color-primary-100);
    border-radius: var(--radius-md);
    background: var(--color-white);
    cursor: pointer;
  }

  .hm-nav__toggle:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }

  .hm-nav__bars,
  .hm-nav__bars::before,
  .hm-nav__bars::after {
    display: block;
    inline-size: 20px;
    block-size: 2px;
    border-radius: 2px;
    background: var(--color-primary-900);
  }

  .hm-nav__bars {
    position: relative;
  }

  .hm-nav__bars::before,
  .hm-nav__bars::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
  }

  .hm-nav__bars::before {
    inset-block-start: -6px;
  }

  .hm-nav__bars::after {
    inset-block-start: 6px;
  }

  .is-nav-open .hm-nav__bars {
    background: transparent;
  }

  .is-nav-open .hm-nav__bars::before {
    inset-block-start: 0;
    transform: rotate(45deg);
  }

  .is-nav-open .hm-nav__bars::after {
    inset-block-start: 0;
    transform: rotate(-45deg);
  }

  .hm-nav__links,
  .hm-nav__tools {
    display: none;
  }

  .is-nav-open .hm-nav__links {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    order: 2;
    align-items: stretch;
    gap: 4px;
    padding-block-start: 8px;
    border-block-start: 1px solid var(--color-primary-100);
  }

  .is-nav-open .hm-nav__tools {
    order: 3;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 100%;
    gap: 8px;
  }

  .is-nav-open .hm-nav__box {
    flex-wrap: wrap;
  }

  .hm-nav__link,
  .hm-nav__btn,
  .hm-lang button {
    min-block-size: 44px;
  }

  .hm-nav__link {
    inline-size: 100%;
    justify-content: space-between;
  }

  .hm-nav__btn {
    justify-content: center;
  }

  .hm-lang button {
    inline-size: 100%;
    padding-inline: 8px;
  }

  .hm-drop {
    inline-size: 100%;
  }

  .hm-menu {
    position: static;
    min-inline-size: 0;
    box-shadow: none;
    border: 1px solid var(--color-primary-100);
    margin-block-start: 4px;
  }

  .hm-menu__item {
    white-space: normal;
    min-block-size: 44px;
    display: flex;
    align-items: center;
  }

  /* ---- home ---- */
  .hm-hero {
    margin-block-start: 0;
    padding-block: 48px 48px;
    gap: 32px;
  }

  .hm-hero h1 {
    font-size: 26px;
    line-height: 40px;
  }

  .hm-search {
    padding: 20px 16px;
    gap: 24px;
  }

  .hm-logo,
  .hm-doc__cat,
  .hm-search input {
    min-block-size: 44px;
  }

  .hm-search__actions {
    flex-direction: column;
    gap: 12px;
  }

  .hm-btn {
    min-block-size: 44px;
    white-space: normal;
    text-align: center;
  }

  .hm-copy {
    white-space: normal;
    font-size: 15px;
  }

  .hm-footer {
    padding-block-start: 48px;
    gap: 32px;
  }

  .hm-footer__main {
    padding-inline: 16px;
  }

  .hm-fcol,
  .hm-fcol--discover,
  .hm-fcol--services,
  .hm-fcol--about,
  .hm-fcol--news {
    inline-size: 100%;
  }

  .hm-fcol--news {
    padding-inline-end: 0;
  }

  .hm-fcol__link {
    min-block-size: 44px;
    block-size: auto;
  }

  .hm-news .hm-btn {
    min-block-size: 44px;
  }

  .hm-news input {
    block-size: 44px;
  }

  .hm-social {
    flex-wrap: wrap;
  }

  /* No backdrop blur on phones. */
  .hm-nav__box,
  .hm-menu,
  .hm-promo {
    backdrop-filter: none;
  }

  /* ---- sign-in shell ---- */
  .auth-nav {
    padding-inline: 16px;
    block-size: 76px;
  }

  .auth-nav__close,
  .auth-lang button {
    min-block-size: 44px;
    min-inline-size: 44px;
  }

  .auth-card {
    min-inline-size: 0;
  }

  .auth-card input,
  .auth-card select,
  .auth-card button:not(.auth-mfa__link) {
    min-block-size: 44px;
  }

  .auth-footer {
    block-size: auto;
    min-block-size: 64px;
    padding: 16px;
    font-size: 14px;
    text-align: center;
  }

  .auth-mfa {
    padding-inline: 0;
  }

  .auth-mfa__codes {
    grid-template-columns: 1fr;
  }

  .auth-mfa__qr {
    max-inline-size: 100%;
  }

  .auth-mfa__qr img,
  .auth-mfa__qr svg {
    max-inline-size: 100%;
    block-size: auto;
  }

  .auth-card__forgot a,
  .auth-card__signup a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }
}

/* Home "benefits" quote card: on desktop the logo and the quote sit at fixed offsets inside a
   clipped card; below 1024 px they flow top to bottom so a long quote is never cut off. */
@media (max-width: 1023px) {
  .hm-quote {
    flex: none;
    min-block-size: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 40px 20px;
  }

  .hm-quote__brand,
  .hm-quote__body {
    position: static;
  }

  .hm-quote__body {
    inline-size: auto;
    max-inline-size: none;
    padding-block: 0;
  }

  .hm-quote__text {
    font-size: 26px;
    line-height: 44px;
  }
}

@media (max-width: 480px) {
  .hm-quote__word {
    inline-size: 150px;
    block-size: 30px;
  }

  .hm-quote__mark {
    inline-size: 36px;
    block-size: 36px;
  }

  .hm-quote__text {
    font-size: 22px;
    line-height: 38px;
  }
}

/* Home "when to inspect" photo: in the stacked layout it needs its own height (flex: 1 1 0
   collapsed it to nothing) and fills its frame centred on the person. */
@media (max-width: 1023px) {
  .hm-when__image {
    flex: none;
    block-size: 420px;
  }

  .hm-when__image img {
    position: static;
    inline-size: 100%;
    block-size: 100%;
    transform: none;
    object-fit: cover;
    object-position: 62% 30%;
  }
}

@media (max-width: 480px) {
  .hm-when__image {
    block-size: 340px;
  }
}