/* Phenome redesign, homepage.

   Every photograph here is drawn for its own frame. A section's height
   follows its photograph's proportions (desktop art at 1.86 or 2.0 to 1,
   phone art at 9 to 16), so the photograph is only ever trimmed where it
   is empty: from the top on very wide screens, from the sides on narrow
   ones. Nothing is scaled up, and nothing moves with the scroll. */

.ap-home { background: #fff; }

/* ---- full-width sections with a headline over empty photographic space ---- */
.hs { position: relative; overflow: hidden; text-align: center; isolation: isolate; }
.hs + .hs { margin-top: 12px; }
.hs-media { position: absolute; inset: 0; z-index: -1; display: block; }
.hs-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.hs-copy { position: relative; padding: clamp(56px, 5.6vw, 88px) 22px 0; }
.hs-name { margin: 0; font-size: clamp(40px, 4.4vw, 64px); line-height: 1.06; font-weight: 600; letter-spacing: -0.022em; }
.hs-tag { margin: 8px 0 0; font-size: clamp(21px, 2vw, 28px); line-height: 1.16; font-weight: 400; letter-spacing: -0.015em; }
.hs .ap-ctas { margin-top: 22px; }

/* On desktop the photograph is set a little smaller than its frame, standing
   on the section's floor, and its edges melt into the section's own ground
   (sampled from the photograph), so the product keeps air around it. The
   hero also fades its upper part into black, keeping the words clear. */
@media (min-width: 734px) {
  .hs-gut .hs-media img {
    position: absolute; left: 50%; bottom: 0;
    width: auto; height: var(--hs-art-h); max-width: none;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--hs-fade));
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--hs-fade));
    mask-composite: intersect;
  }
}

/* 1 · hero: 692px tall at 1440 (48vw); the art is
   3840 x 1840, drawn for that frame, so it fills it edge to edge. */
.hs-hero { height: clamp(560px, 48vw, 800px); background: #000; color: #f5f5f7; }
.hs-promise { font-size: clamp(44px, 5.2vw, 80px); letter-spacing: -0.022em; }
.hs-hero .hs-tag { color: #f5f5f7; }
/* On black the photograph can sit smaller than the frame: whatever it does not
   cover is the same black, so the words always keep clear space above it. */
.hs-media-dark img {
  position: absolute; left: 50%; bottom: 0; width: auto; height: var(--hs-art-h, 100%); max-width: none;
  transform: translateX(-50%); object-fit: contain;
  /* a lit floor is a little lighter than black: its sides melt into the section */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
}
/* the family stands in the photograph's lower 75%; at 72% of the frame the
   boxes clear the buttons at every desktop width */
.hs-hero { --hs-art-h: 72%; }

/* 2 · gut: art 3840 x 1920 (2 to 1), its ground is #f5f6f8 */
.hs-gut { height: clamp(560px, 48vw, 800px); background: #f5f6f8; color: #1d1d1f; --hs-art-h: 80%; --hs-fade: 8%; }

/* 3 · the Ring: one ring floating on black. It fills 22% to 85% of its
   photograph's height, so the photograph is set at 84% of the frame and
   dropped 7.5% below it: the ring then clears the buttons at every desktop
   width and the empty black under it is cut away. */
.hs-ring { height: clamp(560px, 48vw, 800px); background: #000; color: #f5f5f7; --hs-art-h: 82%; }
/* the five rings' photograph is pure black to its edges and fades itself at
   the foot, so it needs no side melt; its lowest 18% is empty black, so it
   drops 9% below the floor to give the buttons air above the centre ring */
.hs-ring .hs-media-dark img { bottom: -9%; -webkit-mask-image: none; mask-image: none; }
.hs-ring .hs-tag { color: #f5f5f7; }
.hs-foot { position: absolute; left: 0; right: 0; bottom: clamp(22px, 3vw, 40px); margin: 0; font-size: 14px; letter-spacing: -0.01em; color: #86868b; }

/* 4 · the Band: five colourways in an arc, set like the Ring's, on the
   photograph's own grey (sampled from its edges), so the page keeps its black
   and light rhythm and the photograph has no seam */
.hs-band { height: clamp(560px, 48vw, 800px); background: rgb(228, 232, 233); color: #1d1d1f; --hs-art-h: 82%; }
.hs-band .hs-media-dark img { bottom: -10%; }

/* (retired) the Band's six straps on white, names beneath, then four numbers */
.hb { margin-top: 12px; background: #fff; color: #1d1d1f; text-align: center; padding-bottom: clamp(64px, 6vw, 96px); }
.hb-straps { list-style: none; margin: clamp(28px, 3vw, 48px) auto 0; padding: 0 22px; max-width: 1260px; display: flex; justify-content: center; gap: clamp(6px, 1.2vw, 20px); }
.hb-straps li { flex: 0 1 190px; }
.hb-straps img { display: block; width: 100%; height: auto; }
.hb-straps span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.3; color: #6e6e73; letter-spacing: -0.01em; }
.hb-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; max-width: 980px; margin: clamp(40px, 4.4vw, 64px) auto 0; padding: 0 22px; }
.hb-specs b { display: block; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
.hb-specs span { display: block; margin-top: 6px; font-size: 14px; color: #6e6e73; }

/* 5 · the grid: two across, 12px apart */
.hg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px 12px 0; }
.hg-tile { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 2880 / 2384; background: var(--tile); color: #1d1d1f; text-align: center; }
.hg-copy { position: relative; z-index: 2; padding: clamp(38px, 3.9vw, 56px) 20px 0; }
.hg-name { margin: 0; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.1; font-weight: 600; letter-spacing: -0.022em; }
.hg-tag { margin: 6px 0 0; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.24; letter-spacing: -0.015em; }
.hg-tile .ap-ctas { margin-top: 16px; gap: 12px; }
/* Each photograph is drawn for its tile, so it fills it: nothing is masked,
   and on narrower tiles only its empty sides are trimmed. */
.hg-img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.hg-tile.ap-dark { background: #000; color: #f5f5f7; }
/* the carrier photograph's own sky, sampled by height and mapped onto the tile
   (the photograph stands in its lower 86%), so it can sit lower without a seam */
.hg-sky { background: linear-gradient(to bottom, rgb(180,222,253) 0%, rgb(180,223,253) 14%, rgb(196,230,254) 40%, rgb(216,238,253) 57%, rgb(240,249,255) 74%, rgb(253,253,254) 91%, rgb(254,254,254) 100%); }
/* On a flat ground (black, flat grey) a photograph can stand a little lower
   and smaller; its edges melt into the same ground, so there is no seam. */
@media (min-width: 834px) {
  .hg-fit .hg-img {
    inset: auto 0 0 0; margin: 0 auto; width: auto; height: var(--hg-art-h); max-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 10%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 10%);
    mask-composite: intersect;
  }
}

/* 6 · the science, opened as a chapter: a coloured eyebrow, a big
   centred headline, a grey paragraph whose key phrases are set dark; then two
   tiles, one per sequencing method, dark and light. */
.hn { padding: clamp(100px, 11vw, 170px) 22px clamp(80px, 9vw, 140px); background: #fff; color: #1d1d1f; text-align: center; }
.hn-intro { max-width: 860px; margin: 0 auto; }
/* the small line over a headline, as on the product and testing pages: 500
   weight in the brand navy */
.hn-eyebrow { margin: 0; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: #203a85; }
.hn-h { margin: 12px 0 0; font-size: clamp(48px, 6.4vw, 96px); line-height: 1.02; font-weight: 700; letter-spacing: -0.045em; }
.hn-copy { margin: clamp(24px, 2.6vw, 36px) auto 0; max-width: 700px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; font-weight: 500; letter-spacing: -0.012em; color: #86868b; }
.hn-copy b { color: #1d1d1f; font-weight: 600; }
.hn-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 1260px; margin: clamp(56px, 6vw, 88px) auto 0; text-align: left; }
.hn-tile { position: relative; overflow: hidden; min-height: clamp(380px, 34vw, 500px); padding: clamp(32px, 3.4vw, 52px); border-radius: 28px; background: #f5f5f7; color: #1d1d1f; }
.hn-tile-dark { background: #000; color: #f5f5f7; }
.hn-k { position: relative; margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ap-blue); }
.hn-tile-dark .hn-k { color: var(--ap-link-dark); }
.hn-v { position: relative; margin: 10px 0 0; font-size: clamp(36px, 3.6vw, 56px); line-height: 1.04; font-weight: 700; letter-spacing: -0.04em; }
.hn-l { position: relative; margin: 16px 0 0; max-width: 360px; font-size: 17px; line-height: 1.45; font-weight: 500; color: #6e6e73; }
.hn-tile-dark .hn-l { color: #a1a1a6; }
/* the genome tile carries the kit box's own dotted arcs; the microbiome tile,
   rows of short reads, the way shotgun sequencing sees a sample */
.hn-art { position: absolute; right: 0; bottom: 0; width: min(64%, 400px); height: auto; }

/* 7 · how it works: the three steps printed on every box, as icons in the
   brand blue with a name and one line each */
.hw { padding: clamp(90px, 10vw, 150px) 22px; background: #f5f5f7; color: #1d1d1f; text-align: center; }
.hw-intro { max-width: 860px; margin: 0 auto; }
.hw-h { margin: 14px 0 0; font-size: clamp(44px, 5.6vw, 80px); line-height: 1.05; font-weight: 600; letter-spacing: -0.022em; }
.hw-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); max-width: 1060px; margin: clamp(52px, 6vw, 84px) auto 0; padding: 0; }
.hw-steps svg { display: block; width: 48px; height: 48px; margin: 0 auto 20px; color: var(--ap-blue); }
.hw-steps h3 { margin: 0; font-size: clamp(21px, 1.8vw, 24px); font-weight: 600; letter-spacing: -0.02em; }
.hw-steps p { margin: 10px auto 0; max-width: 300px; font-size: 17px; line-height: 1.45; color: #6e6e73; }
.hw-more { margin: clamp(44px, 5vw, 64px) 0 0; font-size: 17px; }

/* 8 · why Phenome */
.hy { padding: clamp(90px, 10vw, 150px) 0 clamp(70px, 8vw, 120px); background: #fff; color: #1d1d1f; }
.hy-h { margin: 0; font-size: clamp(44px, 5.6vw, 80px); line-height: 1.05; font-weight: 600; letter-spacing: -0.022em; }
.hy-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.hy-card { padding: 32px 28px 34px; border-radius: 22px; background: #f5f5f7; }
.hy-card svg { width: 34px; height: 34px; margin-bottom: 20px; color: #1d1d1f; }
.hy-card h3 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.hy-card p { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: #6e6e73; }
.hy-quiz { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: clamp(56px, 6vw, 88px); }
.hy-quiz p { margin: 0; font-size: clamp(21px, 2vw, 28px); font-weight: 600; letter-spacing: -0.02em; }

/* 9 · the Hub */
.hh { padding: clamp(80px, 9vw, 130px) 0 clamp(90px, 10vw, 150px); background: #f5f5f7; color: #1d1d1f; }
.hh-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.hh-card { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; background: #000; color: #fff !important; text-decoration: none; transition: transform .5s var(--ap-spring), box-shadow .5s var(--ap-spring); }
.hh-card:hover { transform: scale(1.015); box-shadow: 0 24px 48px -24px rgba(0,0,0,.35); }
.hh-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hh-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0) 46%); }
.hh-k, .hh-t { position: relative; z-index: 2; display: block; padding: 0 26px; }
.hh-k { padding-top: 26px; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: rgba(255,255,255,.72); }
.hh-t { margin-top: 8px; font-size: 21px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }

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

/* Buy pills that the storefront reports as unavailable step aside. */
.ap-home [data-ph-buy][aria-disabled='true'] { display: none; }

@media (max-width: 733px) {
  /* phone art is 9 to 16; these heights keep it nearly whole */
  .hs-hero { height: 480px; }
  /* the desktop photograph, anchored low: wider than the screen for the ring
     and band below; the hero's family (12% to 88% across it) is set at the
     screen's width, whole and unmasked, close under the buttons */
  .hs-media-dark img { height: auto; width: 120vw; }
  .hs-hero .hs-media-dark img { width: 100vw; -webkit-mask-image: none; mask-image: none; }
  .hs-gut { height: 680px; }
  /* the rings, centred at 140vw and set low, clear of the buttons */
  .hs-ring { height: 520px; }
  .hs-ring .hs-media-dark img { width: 140vw; bottom: 16px; }
  /* the five bands span 10% to 90% across their photograph: at 116vw all
     five stay on screen */
  .hs-band { height: 480px; }
  .hs-band .hs-media-dark img { width: 116vw; bottom: 16px; }
  .hg { grid-template-columns: 1fr; padding: 12px 0 0; }
  .hg-tile { aspect-ratio: auto; min-height: 520px; }
  /* each tile's photograph at the tile's width, a little above the tile's
     foot and below the words; its top and bottom edges melt into the ground */
  .hg-tile .hg-img {
    inset: auto 0 24px 0; width: 100%; height: auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 90%, transparent 100%);
  }
  .hn-tiles { grid-template-columns: 1fr; }
  .hn-tile { min-height: 360px; }
  .hw-steps { grid-template-columns: 1fr; gap: 40px; }
  .hz-photo { aspect-ratio: 4 / 5; }
  .hz-photo img { object-position: 74% 70%; }
  .hy-grid { grid-template-columns: 1fr; }
  .hy-quiz { flex-direction: column; gap: 16px; }
  .hb-straps { flex-wrap: wrap; row-gap: 18px; }
  .hb-straps li { flex: 0 1 30%; }
  .hb-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .hs-copy { padding-top: 56px; }
}