/*
 * aihi-home.css - the homepage's own styles (Phase 3, homepage builder; listed in $page->css by templates/pages/home.php).
 * The look is the approved mockup E (designs/homepage-2026-10-24/Combined.dc.html, decision D12): the values below are
 * the mockup's, through the tokens of aihi-site.css (loaded first). The shared parts keep their shared styles (header,
 * footer, the plan table, the Ad box frame, the size bars, buttons, the yellow note); this file adds the finder hero,
 * the finder card, the size cards, the How we rank band and the inside of the Ad box.
 * Fluid like the mockup (flex-wrap, auto-fit grids); every small-screen rule sits in ONE marked block at the end.
 * Strict CSP: no inline style on the page, so every look is a class here.
 */

/* ---------------------------------------------------------------- the finder hero (#finder) */

/* The photo behind the band (George, 26 Oct 2026: "some high quality server background with real servers running",
   "clean environment and modern", then "a corridor of a server room with servers on both sides", "option 2"): a data
   centre aisle with server racks on both sides, in its natural colours. Pexels photo 4508751 by Brett Sayles, read on
   26 Oct 2026 under the Pexels License (free for websites, no credit required). Kept on this site (img-src 'self') as
   WebP at 800, 1280 and 1920 px with a very light blur (the door mesh made the files heavy and cannot be seen under the
   veil), without its metadata. A navy veil keeps the white words readable: darkest on the left under the heading,
   lighter on the right. Measured against the photo's brightest pixels under the words (1440 px and 390 px wide): white
   9.5:1 or more, the lead 6.1:1, the teal line 4.8:1; in the see-through card 7:1 or more. */
.aihi-hero {
  background-color: var(--c-band);
  background-image: linear-gradient(90deg, rgba(0, 12, 42, 0.9) 0%, rgba(0, 12, 42, 0.8) 45%, rgba(0, 12, 42, 0.5) 100%),
    url("/assets/img/hero-corridor-1920.webp?v=20261026");
  background-size: cover;
  background-position: center;
}
@media (max-width: 1280px) {
  .aihi-hero {
    background-image: linear-gradient(90deg, rgba(0, 12, 42, 0.9) 0%, rgba(0, 12, 42, 0.8) 45%, rgba(0, 12, 42, 0.5) 100%),
      url("/assets/img/hero-corridor-1280.webp?v=20261026");
  }
}
/* phones and narrow tablets: the card sits under the words, so the veil is even from top to bottom */
@media (max-width: 800px) {
  .aihi-hero {
    background-image: linear-gradient(180deg, rgba(0, 12, 42, 0.8) 0%, rgba(0, 12, 42, 0.88) 100%),
      url("/assets/img/hero-corridor-800.webp?v=20261026");
  }
}

.aihi-hero__inner {
  padding-top: 24px;
  padding-bottom: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: flex-start;
}
.aihi-hero__text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.aihi-hero__points {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--c-on-dark-text);
}
.aihi-hero__points li { display: flex; gap: 14px; align-items: baseline; }
.aihi-hero__num { color: var(--c-teal); font-weight: 700; font-size: 14px; }

/* ---------------------------------------------------------------- the finder card */

/* on the photo the card is see-through glass: the servers show softly behind it (without backdrop-filter it is simply
   80 % navy, which still keeps every word above 7:1) */
.aihi-hero .aihi-finder {
  background: rgba(6, 20, 58, 0.8);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
}

.aihi-finder {
  flex: 1 1 562px;                           /* 560 px + its two 1 px borders, as the mockup's content-box card (V-15) */
  min-width: 0;
  background: var(--c-dark-card);
  border: 1px solid var(--c-dark-border);
  border-radius: var(--r-finder);
  box-shadow: var(--shadow-finder);
  overflow: hidden;
}
.aihi-finder__top {
  padding: 20px 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--c-dark-divider);
}
.aihi-finder__progress { font-size: 14px; font-weight: 600; color: var(--c-on-dark-muted); }
.aihi-finder__dots { display: flex; gap: 6px; }
.aihi-finder__dot { display: block; width: 34px; height: 6px; border-radius: 3px; background: var(--c-dark-border); }
.aihi-finder__dot.is-done { background: var(--c-blue); }
.aihi-finder__dot.is-current { background: var(--c-teal); }
.aihi-finder__body {
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 470px;
}
.aihi-finder__body--result { padding: 26px; gap: 18px; }
.aihi-finder__title {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  scroll-margin-top: 16px;
}
.aihi-finder__body--result .aihi-finder__title { letter-spacing: 0; }
.aihi-finder__title:focus:not(:focus-visible) { outline: none; }
.aihi-finder__answers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 12px;
}
.aihi-finder__answer {
  text-align: left;
  min-height: 76px;
  padding: 14px 16px;
  border-radius: var(--r-answer);
  border: 1.5px solid var(--c-opt-border);
  background: var(--c-opt-bg);
  color: var(--c-white);
  font-family: var(--f-text);
  line-height: normal;                       /* as the mockup's buttons (the browser's own line height) */
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.aihi-finder__answer[aria-current="true"] { background: var(--c-blue); border-color: var(--c-blue); }
.aihi-finder__label { font-weight: 600; font-size: 17px; }
.aihi-finder__hint { font-size: 14px; color: var(--c-on-dark-muted); }
.aihi-finder__answer[aria-current="true"] .aihi-finder__hint { color: var(--c-white); }
@media (hover: hover) {
  .aihi-finder__answer:not([aria-current="true"]):hover { border-color: var(--c-on-dark-muted); }
}
.aihi-finder__answer:not([aria-current="true"]):focus-visible { border-color: var(--c-on-dark-muted); }
/* Windows contrast themes replace backgrounds: the earlier answer keeps a visible mark (P3-REV-a11y A14) */
@media (forced-colors: active) {
  .aihi-finder__answer[aria-current="true"], .aihi-finder__answer[aria-current="true"] .aihi-finder__hint {
    forced-color-adjust: none; background: Highlight; color: HighlightText;
  }
}
.aihi-finder__foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.aihi-finder__help { font-size: 14px; color: var(--c-on-dark-muted); }

/* the result */
.aihi-finder__head { display: flex; flex-direction: column; gap: 8px; }
.aihi-finder__why { color: var(--c-on-dark-2); }
.aihi-finder__summary { font-size: 14px; color: var(--c-on-dark-muted); }
.aihi-finder__picks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.aihi-finder__pick {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 16px;
  border-radius: var(--r-answer);
  background: var(--c-opt-bg);
  border: 1px solid var(--c-dark-border);
}
.aihi-finder__pick-text { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aihi-finder__pick-name { font-weight: 700; }
.aihi-finder__pick-what { font-size: 14px; color: var(--c-on-dark-2); }
.aihi-finder__pick-note { font-size: 13px; color: var(--c-on-dark-muted); }
.aihi-finder__pick-price { font-weight: 700; font-size: 18px; white-space: nowrap; display: flex; flex-direction: column; gap: 2px; }
/* the monthly cost of an hourly price, under it: "(about $248/month)" */
.aihi-finder__pick-month { font-size: 13px; font-weight: 600; color: var(--c-on-dark-2); }
.aihi-finder__pick .aihi-btn--visit { min-width: 84px; }
.aihi-finder__empty { color: var(--c-on-dark-2); }
.aihi-finder .aihi-finder__see { color: var(--c-on-dark-link); font-weight: 600; }
@media (hover: hover) { .aihi-finder .aihi-finder__see:hover { color: var(--c-white); } }
.aihi-finder .aihi-finder__see:focus-visible { color: var(--c-white); }

/* ---------------------------------------------------------------- the comparison table section (#compare) */

/* the line under the heading: one line wherever it fits (George's rule), wrapping only on narrow screens */
.aihi-home-compare__sub { text-wrap: pretty; }

/* the inside of the Ad box (its frame and the "Ad" label are shared: aihi-site.css .aihi-ad) */
.aihi-ad__body { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.aihi-ad__body .aihi-ad__text { flex: none; }
.aihi-ad__price { font-size: 14px; color: var(--c-muted); }
.aihi-ad .aihi-ad__btn { min-width: 0; }

/* ---------------------------------------------------------------- Pick what you want to run (#jobs, five cards; replaced
   "From small to large" on 27 Oct 2026) */

.aihi-sizes { padding-top: 56px; padding-bottom: 96px; }
.aihi-sizes__title { margin-bottom: 30px; }
.aihi-sizes__list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 16px;
}
.aihi-sizes__card {
  padding: 22px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-big);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.aihi-sizes__head { display: flex; align-items: flex-end; gap: 12px; }
.aihi-sizes__name { font-family: var(--f-head); font-weight: 800; font-size: 22px; line-height: 1.15; }
.aihi-sizes__name a { color: var(--c-text); text-decoration: none; }
@media (hover: hover) { .aihi-sizes__name a:hover { color: var(--c-text); text-decoration: underline; text-underline-offset: 4px; } }
.aihi-sizes__name a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.aihi-sizes__text { color: var(--c-text-2); }
.aihi-sizes__facts {
  margin-top: auto;
  padding-top: 4px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 12px;
  font-size: 14px;
}
.aihi-sizes__facts dt { color: var(--c-muted); }
.aihi-sizes__facts dd { margin: 0; }
.aihi-sizes__facts .aihi-sizes__from { font-weight: 600; }
/* the page's 730-hour note under the cards, when no part above them printed it */
.aihi-sizes__note { margin-top: 20px; }

/* ---------------------------------------------------------------- How we rank, in plain words (#how-we-rank) */

.aihi-rank__inner { padding-top: 92px; padding-bottom: 92px; display: flex; flex-direction: column; gap: 40px; }
.aihi-rank__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.aihi-rank .aihi-rank__method { color: var(--c-on-dark-link); font-weight: 600; }
@media (hover: hover) { .aihi-rank .aihi-rank__method:hover { color: var(--c-white); } }
.aihi-rank .aihi-rank__method:focus-visible { color: var(--c-white); }
.aihi-rank__points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 32px;
}
.aihi-rank__point { display: flex; flex-direction: column; gap: 10px; }
.aihi-rank__num { color: var(--c-teal); font-weight: 700; }
.aihi-rank__title { font-size: 22px; font-weight: 700; }
.aihi-rank__text { color: var(--c-on-dark-muted); }
.aihi-rank__box {
  border: 1px solid var(--c-opt-border);
  border-radius: var(--r-big);
  padding: 26px 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: baseline;
  scroll-margin-top: 16px;
}
.aihi-rank__box-title { font-family: var(--f-text); font-weight: 700; font-size: 19px; }
.aihi-rank__box-title a { color: var(--c-white); text-decoration: none; }
@media (hover: hover) { .aihi-rank__box-title a:hover { color: var(--c-white); text-decoration: underline; text-underline-offset: 4px; } }
.aihi-rank__box-title a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.aihi-rank__box-text { color: var(--c-on-dark-text); flex: 1 1 520px; min-width: 0; }

/* ================================================================ SMALL SCREENS (every small-screen rule is here) */

/* touch sizes at 1024 px and below: the finder's Back and Start over stay 44 px (they already are); the link to the
   table gets a taller target */
@media (max-width: 1024px) {
  .aihi-finder .aihi-finder__see, .aihi-rank .aihi-rank__method { display: inline-block; padding: 10px 0; margin: -10px 0; }
  .aihi-sizes__name a, .aihi-rank__box-title a { display: inline-block; padding: 8px 0; margin: -8px 0; }
}