/* Shared split-photo hero (Tom 10-08: every hero = text left on ink, photo right, as /schools/ and /digital-equity/).
   Same desktop layout as .de-hero in pages-de-v3.css, for pages that had a text-only hero (Contact, Warranty). */
.hp-hero .hero__h1 { font-size: clamp(2.125rem, 1.35rem + 2.4vw, 3.5rem); line-height: 1.06; letter-spacing: -0.022em; max-width: 16ch; text-wrap: balance; }
.hp-hero .hero__sub, .hp-hero .answer { margin-top: var(--s4); max-width: 34rem; text-wrap: pretty; }
.hp-hero .hero__actions { margin-top: var(--s6); }
@media (max-width: 47.99rem) { .hp-hero .hero__actions .btn { width: 100%; } }
.ct-hero .hero__photo img { object-position: 50% 15%; }
/* Warranty: the "On this page" list moved out of the hero to the top of the terms section */
.g6-terms .g6-toc.g6-toc--below { margin: var(--s10) 0 var(--s8); max-width: 40rem; }
.hp-hero .g6-war-care, .hp-hero .g6-war-date { margin-top: var(--s3); max-width: 34rem; }
@media (min-width: 64rem) {
  .hp-hero { padding: var(--inset) var(--inset) 0; }
  .hp-hero .hero__grid { max-width: 1440px; margin-inline: auto; overflow: hidden;
    min-height: clamp(500px, calc(100svh - var(--header-h) - var(--utility-h) - 150px), 620px); }
  .hp-hero .hero__photo { left: 44%; }
  .hp-hero .hero__photo picture { border-radius: 0; }
  .hp-hero .hero__photo::after { border-radius: 0;
    background:
      linear-gradient(90deg, var(--ink) 0%, var(--ink) 10%, rgb(18 19 17 / 0.9) 18%, rgb(18 19 17 / 0.72) 27%,
        rgb(18 19 17 / 0.5) 37%, rgb(18 19 17 / 0.3) 49%, rgb(18 19 17 / 0.14) 63%, rgb(18 19 17 / 0.05) 80%, rgb(18 19 17 / 0.02) 100%),
      linear-gradient(0deg, rgb(18 19 17 / 0.32) 0%, rgb(18 19 17 / 0) 34%); }
  .hp-hero .hero__text { padding: 48px max(40px, (min(100vw - 32px, 1440px) - var(--container)) / 2); }
  .hp-hero .hero__text > * { max-width: 36rem; }
  .hero.hp-hero .hero__text p { color: #e4e5df; }
}

/* Tom 10-09 "Finish all the HERO images" (ct-hero-bg): FriendlyGreenRobotContactCenter.png, left fade baked in (neutralised to ink, experiments/heroes_batch_1009.py).
   Full-bleed at 64rem+ like /buyback/ .bb-hero2, right-anchored, never scaled past its native 1672px; the ink keeps the text side
   readable; past 1672px the image's left edge is feathered into the ink. Phones get the 4:3 photo-side crop. */
@media (min-width: 64rem) {
  .hero.ct-hero .hero__photo { left: 0; right: 0; top: 0; bottom: 0; width: auto; height: 100%; min-width: 0; aspect-ratio: auto; transform: none; }
  .hero.ct-hero .hero__photo picture { display: flex; justify-content: flex-end; height: 100%; border-radius: 0; }
  .hero.ct-hero .hero__photo img { width: min(100%, 1672px); height: 100%; object-fit: cover; object-position: 100% 4%; transform: none; } /* keep the antennae in (1920 cropped them at 40%) */
  .hero.ct-hero .hero__photo::after { border-radius: 0; background:
    linear-gradient(90deg, var(--ink) 0%, var(--ink) 38%, rgb(18 19 17 / 0.7) 50%, rgb(18 19 17 / 0.25) 60%, rgb(18 19 17 / 0) 70%),
    linear-gradient(0deg, rgb(18 19 17 / 0.3) 0%, rgb(18 19 17 / 0) 34%); }
}
@media (min-width: 104.50rem) {
  .hero.ct-hero .hero__photo img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%); mask-image: linear-gradient(90deg, transparent 0, #000 8%); }
}