@layer page {
  /* ---------- Hero ---------- */
  .home-hero {
    padding-block: var(--space-18) 80px;
    overflow: hidden;
  }

  .home-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-12);
  }

  .home-hero__copy {
    display: grid;
    justify-items: start;
    gap: var(--space-6);
    min-width: 0;
  }

  .home-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px var(--space-3);
    border: 1px solid var(--band-line);
    border-radius: var(--radius-capsule);
    color: var(--band-text-2);
    font: var(--type-label);

    & .icon {
      width: 14px;
      height: 14px;
    }
  }

  .home-hero__title em {
    display: block;
  }

  .home-hero .actions {
    margin-top: 0;
  }

  .home-search {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px;
    border-radius: var(--radius-card);
    background: var(--surface);
    color: var(--text-1);

    & :focus-visible {
      outline-color: var(--accent-text);
    }

    & .btn {
      min-height: 48px;
      padding-inline: 22px;
    }
  }

  .home-search__query {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 48px;
    padding: 0 14px;
    border-radius: var(--radius-control);
    color: var(--text-2);

    & .icon {
      width: 20px;
      height: 20px;
    }

    & input {
      width: 100%;
      min-width: 0;
      border: 0;
      background: transparent;
      color: var(--text-1);
      font: var(--type-body);
      outline: none;

      &::placeholder {
        color: var(--text-3);
      }
    }

    &:focus-within {
      outline: 2px solid var(--accent-text);
      outline-offset: -2px;
    }
  }

  .home-search__level {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    border-left: 1px solid var(--line);

    & select {
      height: 48px;
      max-width: 168px;
      padding: 0 36px 0 14px;
      border: 0;
      border-radius: var(--radius-control);
      background: transparent;
      color: var(--text-1);
      font: 500 16px / 24px var(--font-body);
      appearance: none;
      cursor: pointer;

      &:focus-visible {
        outline: 2px solid var(--accent-text);
        outline-offset: -2px;
      }
    }

    & .icon {
      position: absolute;
      right: 14px;
      width: 16px;
      height: 16px;
      color: var(--text-2);
      pointer-events: none;
    }
  }

  /* The dashboard on a phone, drawn from the real route component. */
  .home-visual {
    position: relative;
    display: grid;
    container-type: inline-size;
    place-items: center;
    min-height: 520px;
  }

  .home-visual--photo {
    place-items: start;
  }

  .home-visual__photo {
    position: relative;
    width: min(544px, 100% - 40px);
    aspect-ratio: 544 / 440;
    overflow: hidden;
    border-radius: var(--radius-dialog);
    background: var(--band-wash);

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    & figcaption {
      position: absolute;
      bottom: var(--space-5);
      left: var(--space-5);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      max-width: calc(min(240px, 100cqi - 268px) - var(--space-8));
      padding: 6px 10px;
      border-radius: var(--radius-control);
      background: var(--band);
      color: var(--band-text);
      font: var(--type-micro);

      & .icon {
        width: 14px;
        height: 14px;
        color: var(--band-text-2);
      }
    }
  }

  .home-phone {
    width: 268px;
    padding: var(--space-2);
    border-radius: 36px;
    background: var(--brand-indigo);
    box-shadow:
      0 0 0 1px var(--band-line),
      var(--shadow-raised);
  }

  .home-visual--photo .home-phone {
    position: absolute;
    top: var(--space-12);
    left: min(240px, 100% - 268px);
  }

  .home-phone__screen {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    min-height: 456px;
    padding: 18px var(--space-4);
    border-radius: 28px;
    background: var(--page);
    color: var(--text-1);
  }

  .home-phone__top img {
    width: auto;
    height: 25px;
  }

  .home-phone__summary {
    display: grid;
    justify-items: start;
    gap: 10px;
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);

    & .gauge {
      width: 100%;
    }
  }

  .home-phone__label {
    color: var(--text-2);
    font: var(--type-micro);
  }

  .home-phone__heading {
    font: var(--type-label);
  }

  .home-phone__route {
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);

    & .route__stop {
      gap: 10px;
      padding-bottom: var(--space-3);
    }

    & .route__label {
      font: 600 12px / 16px var(--font-body);
    }

    & .route__stop--future .route__label {
      font-weight: 500;
    }

    & .route__note {
      font: var(--type-micro);
      font-weight: 400;
    }
  }

  /* ---------- Section heads ---------- */
  .home-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4) var(--space-8);
    margin-bottom: var(--space-8);
  }

  .home-head__text {
    display: grid;
    gap: var(--space-2);
  }

  .home-head__kicker {
    color: var(--accent-text);
    font: var(--type-interface);
  }

  .home-head__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--target-public);
    color: var(--accent-text);
    font: 600 16px / 24px var(--font-body);
    text-decoration: none;

    & .icon {
      width: 16px;
      height: 16px;
      transition: transform 120ms ease-out;
    }

    &:hover {
      text-decoration: underline;

      & .icon {
        transform: translateX(2px);
      }
    }
  }

  /* ---------- The four promises ---------- */
  .promises__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4) var(--space-12);
    margin-bottom: var(--space-12);

    & .home-head {
      margin-bottom: 0;
    }

    & .section__title {
      max-width: 22ch;
    }

    & .section__intro {
      max-width: 40ch;
    }
  }

  .promises__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-8);
  }

  .promise {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
  }

  .promise__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-3);
    border-radius: var(--radius-card);
    background: var(--surface-sunk);
    color: var(--text-1);

    & .icon {
      width: 22px;
      height: 22px;
    }
  }

  .promise__title {
    font: var(--type-subsection);
  }

  .promise__body {
    color: var(--text-2);
  }

  /* ---------- Updates you can see ---------- */
  .section.updates {
    padding-block: var(--section-space);
    border-block: 1px solid var(--line);
    background: var(--surface);
  }

  .updates + .section {
    padding-top: var(--section-space);
  }

  .updates__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    align-items: center;
    gap: var(--space-24);
  }

  .updates__title {
    margin-top: var(--space-2);
    font: var(--type-page-title);
  }

  .updates__intro {
    max-width: 56ch;
    margin-top: var(--space-4);
    color: var(--text-2);
    font: var(--type-body-large);
  }

  .updates__points {
    margin-top: var(--space-8);

    & li {
      display: grid;
      grid-template-columns: 20px minmax(0, 1fr);
      gap: 14px;
      padding-block: var(--space-5);
      border-top: 1px solid var(--line);
    }

    & .icon {
      width: 20px;
      height: 20px;
      margin-top: 2px;
      color: var(--text-1);
    }
  }

  .updates__point {
    font: 600 16px / 24px var(--font-body);
  }

  .updates__detail {
    margin-top: 2px;
    color: var(--text-2);
    font: var(--type-interface);
    font-weight: 400;
  }

  .updates__route {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-dialog);
    background: var(--page);
  }

  .updates__route-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
  }

  .updates__example {
    color: var(--text-3);
    font: var(--type-micro);
  }

  /* ---------- Counters ---------- */
  .counters {
    padding-block: var(--space-14);
  }

  .counters__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-8);

    & li {
      padding-left: var(--space-6);
      border-left: 1px solid var(--band-line);
    }
  }

  .counters__value {
    color: var(--band-text);
    font: 600 48px / 56px var(--font-display);
  }

  .counters__label {
    margin-top: var(--space-1);
    color: var(--band-text-2);
    font: var(--type-body);
  }

  /* ---------- Testimonials ---------- */
  .testimonials__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);

    & > li {
      display: grid;
    }
  }

  .testimonial {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--space-4);
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);

    & > .icon {
      width: 28px;
      height: 28px;
      color: var(--brand-periwinkle);
    }
  }

  .testimonial__quote p {
    font: var(--type-body-large);
  }

  .testimonial__by {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-4);

    & .avatar {
      width: 40px;
      height: 40px;
    }
  }

  .testimonial__name {
    display: block;
    font: 600 14px / 20px var(--font-body);
  }

  .testimonial__study {
    display: block;
    color: var(--text-2);
    font: var(--type-micro);
  }

  /* ---------- Family hub, partners and careers ---------- */
  .journey__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .journey__card {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    justify-items: start;
    gap: var(--space-2);
    padding: var(--space-8);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);

    & .home-head__link {
      margin-top: var(--space-2);
    }
  }

  .journey__card--wash {
    border-color: transparent;
    background: var(--wash);
  }

  .journey__kicker {
    color: var(--text-2);
    font: var(--type-interface);
  }

  .journey__title {
    font: 600 22px / 28px var(--font-display);
  }

  .journey__body {
    color: var(--text-2);
  }

  /* ---------- Narrower screens ---------- */
  @media (max-width: 1199px) {
    .updates__inner {
      gap: var(--space-12);
    }
  }

  /* Too narrow for the photo and the phone side by side: the phone stands alone. */
  @media (min-width: 900px) and (max-width: 1279px) {
    .home-hero__inner {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .home-visual {
      min-height: 0;
    }

    .home-visual__photo {
      display: none;
    }

    .home-visual--photo .home-phone {
      position: static;
    }
  }

  @media (max-width: 1023px) {
    .promises__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .testimonials__list,
    .journey__list {
      grid-template-columns: minmax(0, 1fr);
    }

    .updates__inner {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 899px) {
    .home-hero {
      padding-block: var(--space-10) var(--space-12);
    }

    .home-hero__inner {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-8);
    }

    .home-hero__copy {
      gap: var(--space-5);
    }

    .home-hero .actions {
      width: 100%;

      & .btn {
        flex: 1 1 100%;
      }
    }

    .home-search__level {
      display: none;
    }

    .home-search__query {
      gap: var(--space-2);
      padding-inline: 10px;
    }

    .home-search .btn {
      padding-inline: var(--space-4);
    }

    .home-visual {
      display: block;
      place-items: normal;
      min-height: 0;
    }

    .home-visual__photo {
      width: 100%;
      aspect-ratio: 16 / 10;

      & figcaption {
        top: var(--space-3);
        bottom: auto;
        left: var(--space-3);
        max-width: calc(100% - var(--space-6));
      }
    }

    .home-phone,
    .home-visual--photo .home-phone {
      position: relative;
      top: auto;
      left: auto;
      width: auto;
      padding: 0;
      border-radius: 0;
      background: none;
      box-shadow: none;
    }

    .home-visual--photo .home-phone {
      margin: calc(-1 * var(--space-12)) var(--space-4) 0;
    }

    .home-phone__screen {
      display: block;
      min-height: 0;
      padding: 0;
      background: none;
    }

    .home-phone__top,
    .home-phone__heading,
    .home-phone__route {
      display: none;
    }

    .home-phone__summary {
      padding: var(--space-4);
      box-shadow: var(--shadow-raised);
    }

    .updates__title {
      font: var(--type-section);
    }

    .updates__route {
      padding: var(--space-5);
    }

    .counters__value {
      font-size: 36px;
      line-height: 44px;
    }
  }

  @media (max-width: 599px) {
    .promises__list {
      grid-template-columns: minmax(0, 1fr);
    }

    .promises__list {
      gap: 0;
    }

    .promise {
      grid-template-columns: 48px minmax(0, 1fr);
      column-gap: var(--space-4);
      padding-block: var(--space-5);

      & .promise__icon {
        grid-row: span 2;
        margin-bottom: 0;
      }
    }

    .counters__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-6) var(--space-4);

      & li {
        padding-left: var(--space-4);
      }
    }

    .journey__card {
      padding: var(--space-6);
    }
  }
}