/* ============================================================================
   app · the Phenome app page

   Sections in order: an inset photographic hero with a running line of
   promises, a centred display over a fan of phones that opens with the
   scroll, three screen cards, an image beside a paragraph and a set of chips,
   three insight cards, a split privacy panel, a question list, a split call
   and a dark featured grid. Between the insight cards and the privacy panel
   sits a bento of features in phone led rows.
   (A band of drifting live tiles sat after the insight cards until
   2026-09-16; it repeated every reading the cards and the bento already
   name, so it was removed at the user's request.)

   There is no membership, so nothing on this page mentions a fee.
   Type is ONE FAMILY, the site kit's, and the colour is Phenome's navy on a
   white ground. This page carried Newsreader for its display line and its pull
   quote until 2026-09-16; the system has no serif anywhere now, and the
   contrast the serif was drawing is drawn in weight and ink instead. See the
   text ladder in phenome-glass.css § 3.
   Copy rule: no dashes, no all caps.
   Scoped to `.apx` on <body>; motion that hides is keyed to `.apx-js`.
   ========================================================================== */

.apx {
  /* The page ground is white. A tint this pale reads as a wash over a whole
     page rather than as a surface, so the cool blues stay where they mean
     something: cards, tiles, recesses. Nothing large. */
  --ap-paper: #fff;
  --ap-card: #e6ebf4;
  --ap-sunk: var(--gl-tint-sunk, #f4f6fb);   /* the kit's recess, for surfaces */
  --ap-ink: #0a1233;
  --ap-night: #0b1024;
  --ap-grey: #5f6680;
  --ap-line: rgba(10, 18, 51, .12);
  --ap-ease: cubic-bezier(.16, 1, .3, 1);
  --ap-gut: clamp(20px, 3.3vw, 48px);
  --ap-max: 1344px;
  background: var(--ap-paper);
  color: var(--ap-ink);
}
.apx main { overflow-x: clip; }
.apx .ap-wrap { max-width: var(--ap-max); margin: 0 auto; padding: 0 var(--ap-gut); }

.apx .ap-eyebrow { margin: 0 0 14px; font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.005em; }
/* Every statement on this page is the kit's two tone display, .ph-display
   (phenome-glass.css § 3): the held back line first, the line that carries the
   point under it. The page's own .ap-h1 / .ap-display / .ap-h2 ladder is gone
   with it (2026-09-16, by request) — all this sheet still says about a heading
   is how big it is here, since the weight, the tracking and the two inks are
   the kit's. Section names that are one glance long stay solid, .ph-solid. */
.apx .ph-display { font-size: clamp(40px, 6.2vw, 92px); }
.apx .ap-hero .ph-display { font-size: clamp(38px, 5.2vw, 76px); }
.apx .ap-bento-head .ph-display { font-size: clamp(36px, 4.4vw, 66px); }
.apx .ap-lede { margin: 22px 0 0; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--ap-grey); }

.apx .ap-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border-radius: 99px; border: 0; cursor: pointer;
  font-size: 15px; font-weight: 500; text-decoration: none !important;
  background: var(--ap-ink); color: #fff !important;
  transition: background .25s ease, transform .3s var(--ap-ease), box-shadow .25s ease;
}
.apx .ap-pill:hover { background: var(--ph-accent, #203a85); }
.apx .ap-pill:active { transform: scale(.97); }
.apx .ap-pill.is-light { background: #fff; color: var(--ap-ink) !important; }
.apx .ap-pill.is-light:hover { background: #e8edf8; }
.apx .ap-pill.is-glass { background: rgba(255, 255, 255, .16); color: #fff !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.apx .ap-pill.is-glass:hover { background: rgba(255, 255, 255, .28); }
.apx .ap-pill.is-blue { background: var(--ph-accent, #203a85); }
.apx .ap-pill.is-blue:hover { background: var(--ap-ink); }
.apx .ap-pill svg { width: 16px; height: 16px; fill: currentColor; }

.apx .ap-arrow {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--ap-ink); color: #fff; flex: none; transition: transform .45s var(--ap-ease), background .25s ease;
}
.apx .ap-arrow svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.apx-js .apx .ap-up { opacity: 0; transform: translateY(34px); transition: opacity .9s ease, transform 1.1s var(--ap-ease); }
.apx-js .apx .ap-up.is-in { opacity: 1; transform: none; }
.apx-js .apx .ap-up.d1 { transition-delay: .08s; }
.apx-js .apx .ap-up.d2 { transition-delay: .16s; }
.apx-js .apx .ap-up.d3 { transition-delay: .24s; }

/* ---------------------------------------------------------------------------
   1 · HERO · an inset card over the running film, promises drifting below
   ------------------------------------------------------------------------ */
.apx .ap-hero { padding: 10px 10px 0; }
.apx .ap-hero-card {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(calc(100svh - 64px), 820px);
  border-radius: clamp(14px, 1.4vw, 22px); background: var(--ap-night); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
}
.apx .ap-hero-film { position: absolute; inset: 0; z-index: -2; }
.apx .ap-hero-film video { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; display: block; transform: scale(calc(1.06 - var(--hero-p, 0) * .06)); }
.apx .ap-hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 12, 30, .86) 0%, rgba(8, 12, 30, .5) 38%, rgba(8, 12, 30, 0) 64%), linear-gradient(180deg, transparent 60%, rgba(8, 12, 30, .6)); }
.apx .ap-hero-top { padding: clamp(80px, 9vw, 116px) clamp(22px, 2.6vw, 42px) 0; }
.apx .ap-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.apx .ap-hero-foot { padding: 0 clamp(22px, 2.6vw, 42px) clamp(22px, 2.6vw, 36px); }
.apx .ap-hero-foot p { margin: 0; max-width: 40ch; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.apx-js .apx .ap-hero-card { animation: ap-card 1.2s var(--ap-ease) both; }
.apx-js .apx .ap-hero-top > * { animation: ap-rise 1s var(--ap-ease) both; }
.apx-js .apx .ap-hero-top > :nth-child(2) { animation-delay: .1s; }
.apx-js .apx .ap-hero-top > :nth-child(3) { animation-delay: .2s; }
@keyframes ap-card { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ap-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .apx .ap-hero-shade { background: linear-gradient(180deg, rgba(8, 12, 30, .86) 20%, rgba(8, 12, 30, .3) 55%, rgba(8, 12, 30, .8)); }
}

/* ---------------------------------------------------------------------------
   2 · ONE APP · a centred display, then a fan of phones opening
   ------------------------------------------------------------------------ */
.apx .ap-intro { padding: clamp(90px, 10vw, 150px) 0 0; text-align: center; }
.apx .ap-intro .ap-lede { max-width: 640px; margin-inline: auto; }
.apx .ap-fan { position: relative; height: clamp(520px, 50vw, 680px); margin-top: clamp(40px, 5vw, 80px); }
.apx .ap-fan-in { position: absolute; left: 50%; top: 0; width: 0; height: 100%; }

/* a phone, drawn rather than photographed, so its screens are real type */
.apx .ap-phone {
  position: absolute; left: 0; top: 40px;
  width: clamp(200px, 17vw, 250px); aspect-ratio: 9 / 19.2;
  margin-left: calc(clamp(200px, 17vw, 250px) / -2);
  padding: 8px; box-sizing: border-box; border-radius: 34px;
  background: #151a2b; box-shadow: 0 30px 60px -30px rgba(10, 18, 51, .55), inset 0 0 0 1px rgba(255, 255, 255, .08);
  transform: translateX(calc(var(--i) * var(--spread, 0) * 1px)) translateY(calc(var(--lift) * 1px)) rotate(calc(var(--i) * var(--tilt, 0) * 1deg));
  transition: transform .2s linear;
  z-index: calc(10 - var(--i-abs));
}
.apx .ap-phone.is-main { width: clamp(230px, 19.5vw, 290px); margin-left: calc(clamp(230px, 19.5vw, 290px) / -2); top: 0; }
.apx .ap-scr {
  position: relative; width: 100%; height: 100%; border-radius: 27px; overflow: hidden;
  background: linear-gradient(180deg, #111834, #0b1024 55%); color: #fff;
  padding: 26px 12px 12px; box-sizing: border-box; font-size: 10px; text-align: left;
}
.apx .ap-scr::before { content: ''; position: absolute; top: 7px; left: 50%; width: 64px; height: 17px; margin-left: -32px; border-radius: 99px; background: #151a2b; }
.apx .ap-scr.is-light { background: linear-gradient(180deg, #eef2fb, #fff 50%); color: var(--ap-ink); }
.apx .ap-s-top { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 10px; font-size: 12px; font-weight: 600; }
.apx .ap-s-top img { width: 18px; height: 18px; }
.apx .ap-scr.is-dark-logo .ap-s-top img { filter: brightness(0) invert(1); }
.apx .ap-s-dates { display: flex; justify-content: space-between; margin: 0 0 10px; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, .07); font-size: 9.5px; color: rgba(255, 255, 255, .6); }
.apx .ap-s-dates b { color: #fff; font-weight: 600; }
.apx .ap-s-rings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 10px; }
.apx .ap-s-ring { position: relative; text-align: center; }
.apx .ap-s-ring i {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 600;
  background: conic-gradient(var(--c) calc(var(--p) * 360deg), rgba(255, 255, 255, .12) 0);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%); mask: radial-gradient(circle, transparent 56%, #000 57%);
}
.apx .ap-s-ring b { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1; display: grid; place-items: center; font-size: 12px; }
.apx .ap-s-ring span { display: block; margin-top: 6px; font-size: 8.5px; color: rgba(255, 255, 255, .62); }
.apx .ap-s-card { margin-top: 7px; padding: 9px 10px; border-radius: 12px; background: rgba(255, 255, 255, .07); }
.apx .ap-scr.is-light .ap-s-card { background: #fff; box-shadow: 0 6px 16px -12px rgba(10, 18, 51, .4); }
.apx .ap-s-card.is-glow { background: linear-gradient(160deg, rgba(95, 130, 255, .32), rgba(255, 255, 255, .06)); }
.apx .ap-s-k { display: flex; justify-content: space-between; margin: 0; font-size: 10.5px; font-weight: 600; }
.apx .ap-s-k small { font-weight: 400; color: rgba(255, 255, 255, .55); }
.apx .ap-s-d { margin: 4px 0 0; font-size: 9px; line-height: 1.4; color: rgba(255, 255, 255, .66); }
.apx .ap-scr.is-light .ap-s-d { color: var(--ap-grey); }
.apx .ap-s-big { margin: 2px 0 0; font-size: 30px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; }
.apx .ap-s-big small { font-size: 11px; font-weight: 500; margin-left: 3px; color: rgba(255, 255, 255, .6); }
.apx .ap-s-bar { height: 5px; margin-top: 7px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.apx .ap-s-bar i { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--c, #7fb2ff); border-radius: inherit; }
.apx .ap-s-dev { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; margin-bottom: 8px; }
.apx .ap-s-dev span { padding: 7px 4px; border-radius: 9px; background: rgba(255, 255, 255, .07); font-size: 8.5px; text-align: center; line-height: 1.2; }
.apx .ap-s-hyp { display: flex; align-items: flex-end; gap: 2px; height: 46px; margin-top: 8px; }
.apx .ap-s-hyp i { flex: var(--w) 1 0; height: calc(var(--h) * 100%); border-radius: 3px; background: linear-gradient(180deg, #8f9bff, #5b6cf0); }
.apx .ap-s-line { display: block; width: 100%; height: 56px; margin-top: 6px; }
.apx .ap-s-tabs { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: space-around; padding: 8px 4px; border-radius: 14px; background: rgba(255, 255, 255, .08); font-size: 8.5px; color: rgba(255, 255, 255, .6); }
.apx .ap-scr.is-light .ap-s-tabs { background: rgba(10, 18, 51, .05); color: var(--ap-grey); }
.apx .ap-s-tabs b { color: #fff; font-weight: 600; }
.apx .ap-scr.is-light .ap-s-tabs b { color: var(--ap-ink); }
.apx .ap-s-bubble { margin: 8px 0 0; padding: 9px 10px; border-radius: 12px 12px 12px 4px; background: rgba(255, 255, 255, .09); font-size: 9.5px; line-height: 1.45; }
.apx .ap-s-bubble.is-me { margin-left: 22px; border-radius: 12px 12px 4px 12px; background: var(--ph-accent, #203a85); }
.apx .ap-s-omics li { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-top: 1px solid rgba(10, 18, 51, .07); font-size: 10px; }
.apx .ap-s-omics { margin: 6px 0 0; padding: 0; list-style: none; }
.apx .ap-s-omics b { display: inline-grid; place-items: center; min-width: 26px; height: 18px; padding: 0 5px; border-radius: 99px; background: #e3eafb; color: var(--ph-accent, #203a85); font-size: 9px; }
@media (max-width: 760px) {
  .apx .ap-fan { height: 560px; }
  .apx .ap-fan .ap-phone:not(.is-main):not([data-i="-1"]):not([data-i="1"]) { display: none; }
}

/* ---------------------------------------------------------------------------
   6 · LONGEVITY AI · the proof band (devices/ring-lab/bdx.css § 7
   and § 7b), 2026-09-23 by request. Same ground, same heading, same glass
   panels and the same accordion: one number, --ai-open, decides which card is
   open, and every property that moves is computed from it, so the width, the
   photograph, the panel, the line, the bars and the type all travel on one
   620ms. Six cards, set as two rows of three (2026-09-23, by request), each row
   its own accordion with the lab's 2.5 against 1 and its first card open
   at rest. Type is held to this site's 15px floor.
   ------------------------------------------------------------------------ */
.apx .ap-evolve {
  --ai-ease: cubic-bezier(.16, 1, .3, 1);
  position: relative; color: #fff;
  padding: clamp(70px, 8vw, 110px) 0 clamp(70px, 8vw, 120px);
  background: linear-gradient(180deg, #070c24 0%, #2b3558 26%, #9aa3bd 48%, #eef1f7 70%, #fff 100%);
}
.apx .ap-ai-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 64px); align-items: end; }
.apx .ap-evolve .ph-display { font-size: clamp(40px, 5.6vw, 84px); }
.apx .ap-ai-intro .ap-eyebrow { color: rgba(255, 255, 255, .62); }
.apx .ap-ai-intro h3 { margin: 0 0 14px; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; color: #fff; }
.apx .ap-ai-intro > p:last-child { margin: 0; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .78); max-width: 46ch; }

.apx .ap-ai + .ap-ai { margin-top: 16px; }
.apx .ap-ai {
  margin-top: clamp(30px, 3.4vw, 50px); display: grid; gap: 16px;
  grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(360px, 60vw, 520px);
}
.apx .ap-ai-card { position: relative; border-radius: 28px; overflow: hidden; background: #1a2140; color: #fff; outline: none; }
.apx .ap-ai-card.is-big { grid-column: 1 / -1; }
.apx .ap-ai-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ai-ease); }
.apx .ap-ai-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 12, 36, .18), transparent 40%, rgba(7, 12, 36, .66)); }
.apx .ap-ai-panel {
  position: absolute; z-index: 1; top: 18px; left: 18px; width: min(380px, calc(100% - 36px)); box-sizing: border-box;
  padding: 16px 18px; border-radius: 16px; color: var(--ap-ink); background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  transform: translateY(12px); opacity: 0; transition: transform .8s var(--ai-ease), opacity .6s ease;
}
.apx .ap-ai.is-in .ap-ai-panel { transform: none; opacity: 1; }
.apx .ap-ai-k { margin: 0; font-size: 15px; font-weight: 600; color: var(--ap-grey); }
.apx .ap-ai-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.apx .ap-ai-stats.is-one { grid-template-columns: 1fr; }
.apx .ap-ai-stats p { margin: 0; padding: 12px; border-radius: 10px; background: #fff; }
.apx .ap-ai-stats b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.apx .ap-ai-stats span { display: block; margin-top: 2px; font-size: 15px; line-height: 1.3; color: var(--ap-grey); }
.apx .ap-ai-q { margin: 10px 0 0; font-size: 19px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
.apx .ap-ai-a { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px 12px 12px 4px; background: #fff; font-size: 15px; line-height: 1.45; }
.apx .ap-ai-line { display: block; width: 100%; height: 76px; margin-top: 10px; overflow: visible; }
.apx .ap-ai-line path { fill: none; stroke: var(--ph-accent, #203a85); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.8s var(--ai-ease) .3s; }
.apx .ap-ai.is-in .ap-ai-line path { stroke-dashoffset: 0; }
.apx .ap-ai-bars { display: flex; align-items: flex-end; gap: 6px; height: 70px; margin-top: 12px; }
.apx .ap-ai-bars i { flex: 1; height: 100%; border-radius: 4px; background: var(--ph-accent, #203a85); transform-origin: bottom; transform: scaleY(.05); transition: transform 1s var(--ai-ease) .4s; }
.apx .ap-ai.is-in .ap-ai-bars i { transform: scaleY(var(--h)); }
.apx .ap-ai-meter { height: 6px; margin-top: 12px; border-radius: 99px; background: rgba(10, 18, 51, .1); overflow: hidden; }
.apx .ap-ai-meter i { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: inherit; background: #ffb35c; transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ai-ease) .4s; }
.apx .ap-ai.is-in .ap-ai-meter i { transform: none; }
.apx .ap-ai-copy { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 26px; }
.apx .ap-ai-copy h3 { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.12; font-weight: 600; letter-spacing: -0.01em; }
.apx .ap-ai-copy h3 svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.apx .ap-ai-copy p { margin: 10px 0 0; max-width: 34ch; font-size: 18px; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.apx .ap-ai-card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* the accordion, where there is a pointer to hover and room for six */
@media (min-width: 1025px) and (hover: hover) {
  .apx .ap-ai { display: flex; align-items: stretch; gap: 16px; height: clamp(400px, 38vw, 540px); }
  .apx .ap-ai-card {
    --ai-open: 0;
    flex: 1 1 0; min-width: 0;
    flex-grow: calc(1 + var(--ai-open) * 1.5);
    transition: flex-grow .62s var(--ai-ease);
  }
  .apx .ap-ai:not(:has(.ap-ai-card:hover)):not(:has(.ap-ai-card:focus-visible)) .ap-ai-card.is-big,
  .apx .ap-ai-card:hover,
  .apx .ap-ai-card:focus-visible { --ai-open: 1; }
  .apx .ap-ai-card > img { transform: scale(calc(1 + var(--ai-open) * .05)); transition: transform .62s var(--ai-ease); }
  .apx .ap-ai.is-in .ap-ai-panel {
    opacity: var(--ai-open);
    transform: translateY(calc((1 - var(--ai-open)) * 14px));
    transition: transform .62s var(--ai-ease), opacity .45s var(--ai-ease);
  }
  .apx .ap-ai.is-in .ap-ai-line path { stroke-dashoffset: calc(400 * (1 - var(--ai-open))); transition: stroke-dashoffset 1.1s var(--ai-ease) .12s; }
  .apx .ap-ai.is-in .ap-ai-bars i { transform: scaleY(calc(.05 + (var(--h) - .05) * var(--ai-open))); transition: transform .7s var(--ai-ease) .1s; }
  .apx .ap-ai.is-in .ap-ai-meter i { transform: scaleX(var(--ai-open)); transition: transform .8s var(--ai-ease) .1s; }
  .apx .ap-ai-copy { left: 26px; right: 26px; }
  .apx .ap-ai-copy h3 { font-size: calc(clamp(20px, 1.7vw, 25px) + var(--ai-open) * 8px); transition: font-size .62s var(--ai-ease); }
  .apx .ap-ai-copy p {
    width: min(34ch, 360px);
    opacity: var(--ai-open);
    transform: translateY(calc((1 - var(--ai-open)) * 12px));
    transition: opacity .45s var(--ai-ease) .06s, transform .62s var(--ai-ease);
  }
}
@media (min-width: 1025px) and (hover: hover) and (prefers-reduced-motion: reduce) {
  .apx .ap-ai-card > img, .apx .ap-ai.is-in .ap-ai-panel, .apx .ap-ai-copy p { transform: none; }
  .apx .ap-ai-card, .apx .ap-ai.is-in .ap-ai-panel, .apx .ap-ai.is-in .ap-ai-line path,
  .apx .ap-ai.is-in .ap-ai-bars i, .apx .ap-ai.is-in .ap-ai-meter i, .apx .ap-ai-copy h3, .apx .ap-ai-copy p { transition: none; }
}
@media (max-width: 900px) {
  .apx .ap-ai-head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .apx .ap-ai { grid-template-columns: minmax(0, 1fr); }
  .apx .ap-ai-panel { right: 18px; width: auto; }
}
@media (max-width: 560px) {
  .apx .ap-ai-stats b { font-size: 20px; }
}

/* ---------------------------------------------------------------------------
   5 · REAL INSIGHT · three cards
   ------------------------------------------------------------------------ */
.apx .ap-stories { padding: 0 0 clamp(70px, 7vw, 110px); }
.apx .ap-story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 4vw, 64px); }
.apx .ap-story { display: flex; flex-direction: column; min-height: 290px; padding: 22px 24px; border-radius: 6px; background: var(--ap-card); }
.apx .ap-tag { align-self: flex-start; padding: 5px 10px; border-radius: 4px; background: var(--ap-ink); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: .03em; }
.apx .ap-story blockquote { margin: 26px 0 0; font-size: clamp(22px, 1.8vw, 27px); line-height: 1.28; letter-spacing: -0.015em; font-weight: 500; }
.apx .ap-story-by { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 26px; font-size: 16px; }
.apx .ap-story-by i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--ap-line); }
.apx .ap-story-by img { width: 20px; height: 20px; }
.apx .ap-story-by small { display: block; font-size: 15px; color: var(--ap-grey); }
@media (max-width: 900px) { .apx .ap-story-grid { grid-template-columns: minmax(0, 1fr); } .apx .ap-story { min-height: 0; } }

/* ---------------------------------------------------------------------------
   7 · FEATURE BENTO · phone led rows of app features
   ------------------------------------------------------------------------ */
/* The bento follows the fan of phones, so it opens a section break of its own
   rather than leaning on the one above it. */
.apx .ap-bento-sec { padding: clamp(70px, 7vw, 110px) 0 clamp(80px, 8vw, 120px); }
.apx .ap-bento-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: end; margin-bottom: clamp(30px, 3.4vw, 50px); }
.apx .ap-bento-head .ap-lede { margin: 0; font-size: 17px; }
/* 2026-09-23 by request: the bento keeps its first arrangement (the big tile
   top left, four small tiles beside it, one wide tile below) and takes the new
   content: the three screens section is folded in, the tiles that repeated a
   later section are gone, and every tile carries a picture where it used to
   carry an icon. Six tiles for what were eight places, so the wide tile below
   runs the full row. */
.apx .ap-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 260px; gap: 12px; }
.apx .ap-b {
  position: relative; overflow: hidden; border-radius: 16px; padding: 22px; box-sizing: border-box;
  background: var(--ap-sunk); box-shadow: inset 0 0 0 1px var(--ap-line); display: flex; flex-direction: column;
}
.apx .ap-b-copy { margin-top: auto; }
.apx .ap-b-copy h3 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.apx .ap-b-copy p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--ap-grey); max-width: 34ch; }

/* the big tile: a photograph full bleed, one reading on glass, the words on glass.
   2026-09-23 by request, every drawn picture in the bento became a photograph
   carrying ONE glass chip, the way "Find my ring" already did. */
.apx .ap-b.is-film { grid-column: span 2; grid-row: span 2; padding: 0; }
.apx .ap-b.is-film .ap-b-copy {
  position: absolute; left: 22px; bottom: 22px; max-width: 330px; padding: 18px 20px; border-radius: 14px;
  background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.apx .ap-b-scr { position: absolute; inset: 0; background: #e9edf5; }
.apx .ap-b-scr > img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; display: block; transition: transform 1.2s var(--ap-ease); }
.apx .ap-b.is-film:hover .ap-b-scr > img { transform: scale(1.04); }

/* the small tiles: a photograph where the icon used to be */
.apx .ap-b-pic {
  position: relative; flex: none; height: 104px; margin: -12px -12px 14px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(160deg, #dce4f5, #eef1f8);
}
.apx .ap-b-pic.is-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 42%; display: block; transition: transform 1.2s var(--ap-ease); }
.apx .ap-b:hover .ap-b-pic.is-photo > img { transform: scale(1.05); }
.apx .ap-b-pic.is-report > img { object-position: 50% 55%; }
.apx .ap-b-pic.is-mug > img { object-position: 40% 74%; }
.apx .ap-b-pic.is-talk > img { object-position: 50% 45%; }

/* the one glass chip every picture carries */
.apx .ap-b-chip {
  position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px;
  padding: 6px 11px 6px 9px; border-radius: 99px; background: rgba(11, 16, 36, .62);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap;
}
.apx .ap-b-chip b { padding: 1px 7px; border-radius: 99px; background: #fff; color: var(--ph-accent, #203a85); font-size: 12px; }
.apx .ap-b-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #7fb2ff; }
.apx .ap-b-mark { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.apx .ap-b-ping { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #7fb2ff; }
.apx .ap-b-ping::before, .apx .ap-b-ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid #7fb2ff; animation: ap-ping 2.4s ease-out infinite; }
.apx .ap-b-ping::after { animation-delay: 1.2s; }
@keyframes ap-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(4); opacity: 0; } }
/* the big tile's chip is larger and sits top right, clear of the words */
.apx .ap-b-chip.is-top { left: auto; right: 22px; top: 22px; bottom: auto; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 16px; font-size: 15px; }
.apx .ap-b-chip.is-top small { display: block; font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, .72); }
.apx .ap-b-dial {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: conic-gradient(#7fd4ff calc(var(--p) * 360deg), rgba(255, 255, 255, .18) 0);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 59%); mask: radial-gradient(circle, transparent 58%, #000 59%);
}

/* the wide tile: the words left, a photograph across the rest of the row with
   the trend on a glass card over it */
.apx .ap-b.is-wide { grid-column: span 2; }
.apx .ap-b.is-trend { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px; align-items: end; }
.apx .ap-b-chart { position: relative; align-self: stretch; margin: -12px -12px -12px 0; border-radius: 12px; overflow: hidden; background: #e9edf5; }
.apx .ap-b-chart-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; transition: transform 1.2s var(--ap-ease); }
.apx .ap-b.is-trend:hover .ap-b-chart-bg { transform: scale(1.04); }
.apx .ap-b-chart-card {
  position: absolute; left: 16px; bottom: 16px; width: min(340px, calc(100% - 32px)); padding: 14px 16px 0; box-sizing: border-box;
  border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; height: 150px;
  background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.apx .ap-b-chart-k { display: flex; align-items: baseline; gap: 12px; margin: 0; font-size: 15px; font-weight: 500; }
.apx .ap-b-chart-k b { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; color: var(--ph-accent, #203a85); }
.apx .ap-b-chart-k small { margin-left: auto; font-size: 15px; font-weight: 400; color: var(--ap-grey); }
.apx .ap-b-trend { flex: 1; width: calc(100% + 32px); margin: 6px -16px 0; min-height: 0; }
.apx .ap-b-trend .is-fill { fill: rgba(32, 58, 133, .12); }
.apx-js .apx .ap-b-trend path[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s .5s var(--ap-ease); }
.apx-js .apx .ap-up.is-in .ap-b-trend path[pathLength] { stroke-dashoffset: 0; }

@media (max-width: 1200px) {
  .apx .ap-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .apx .ap-bento-head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 600px) {
  .apx .ap-bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .apx .ap-b { min-height: 250px; }
  .apx .ap-b.is-film, .apx .ap-b.is-wide { grid-column: auto; grid-row: auto; min-height: 480px; }
  .apx .ap-b.is-film .ap-b-copy { right: 14px; left: 14px; bottom: 14px; }
  .apx .ap-b.is-trend { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .apx .ap-b-chart { height: 260px; margin: 0 -12px -12px; order: -1; }
  .apx .ap-b-chip.is-top { right: 14px; top: 14px; }
}

/* ---------------------------------------------------------------------------
   8 · PRIVACY · words left, a photograph running off the right edge
   ------------------------------------------------------------------------ */
.apx .ap-privacy { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 4vw, 60px); align-items: center; padding: 0 0 clamp(90px, 9vw, 140px) max(var(--ap-gut), calc((100vw - var(--ap-max)) / 2 + var(--ap-gut))); }
.apx .ap-privacy .ph-display { font-size: clamp(34px, 3.8vw, 56px); }
.apx .ap-privacy p { margin: 16px 0 26px; max-width: 42ch; font-size: 17px; line-height: 1.55; color: var(--ap-grey); }
.apx .ap-privacy-img { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px 0 0 6px; background: #d7deea; }
.apx .ap-privacy-img img { width: 100%; height: 100%; object-fit: cover; display: block; transform: translateY(calc((var(--par, .5) - .5) * -40px)) scale(1.08); }
@media (max-width: 860px) { .apx .ap-privacy { grid-template-columns: minmax(0, 1fr); padding-right: var(--ap-gut); } .apx .ap-privacy-img { border-radius: 6px; } }

/* ---------------------------------------------------------------------------
   9 · QUESTIONS
   ------------------------------------------------------------------------ */
.apx .ap-faq { padding: 0 0 clamp(90px, 9vw, 140px); }
/* The list is the shared `.acc.is-faq`, and on a white page the kit already
   answers this: the rows take the recess tint and come forward on hover. No
   override needed here. */

/* ---------------------------------------------------------------------------
   10 · START · words left, a photograph right
   ------------------------------------------------------------------------ */
/* CLOSE · supplements/nad's `.nd-end` card, rescoped. Same film, same scrim,
   same radius and padding ladder; the object is a drawn phone plus the ceramic
   ring render instead of the bottle. */
.apx .ap-start { padding: 16px 0 clamp(56px, 6vw, 96px); }
.apx .ap-end-bleed { width: 100%; max-width: 1536px; margin-inline: auto; padding-inline: clamp(20px, 3.3vw, 48px); box-sizing: border-box; }
.apx .ap-end-card {
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: clamp(32px, 6vw, 110px);
  padding: clamp(56px, 7vw, 110px) clamp(28px, 8vw, 150px); border-radius: 32px; color: #fff;
  background: radial-gradient(70% 140% at 12% 50%, #1d3d98 0%, #0a1e57 60%, #071641 100%);
}
.apx .ap-end-film { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.apx .ap-end-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 140% at 12% 50%, rgba(29, 61, 152, .55) 0%, rgba(10, 30, 87, .62) 60%, rgba(7, 22, 65, .78) 100%);
}

/* the object: the real app, keyed off its own film (the ring film's Health
   Monitor shot, 14.9 to 20.6s, cards lifting off the screen and settling
   back). A still of its last frame stands in wherever alpha video will not
   play; app.js swaps the film in only where it will. */
.apx .ap-end-card { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: clamp(24px, 4vw, 72px); padding-block: clamp(48px, 5vw, 80px); }
.apx .ap-end-obj { position: relative; justify-self: center; width: min(100%, 470px); aspect-ratio: 640 / 806; margin-left: -3%; }
.apx .ap-end-obj > img, .apx .ap-end-obj > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 40px 46px rgba(0, 0, 0, .42));
}
.apx .ap-end-obj > video { opacity: 0; transition: opacity .6s ease; }
.apx .ap-end-obj.is-playing > video { opacity: 1; }
.apx .ap-end-obj.is-playing > img { opacity: 0; transition: opacity .6s ease; }

/* the offer: one statement, one sentence, two buttons, one note, each
   separated by more air than the nad card allows, since this one says less */
.apx .ap-end-copy { position: relative; max-width: 460px; }
.apx .ap-end-copy p { margin: 0; }
.apx .ap-end-h { font-size: clamp(44px, 5vw, 76px); }
.apx .ap-end-lede { margin-top: 26px !important; max-width: 30ch; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.55; color: rgba(255, 255, 255, .8); }
.apx .ap-end-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 44px; }
.apx .ap-end-cta .ap-pill { height: 60px; min-width: 176px; padding: 0 36px; font-size: 19px; font-weight: 600; }
.apx .ap-end-note { margin-top: 22px !important; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .62); }

@media (max-width: 1024px) {
  .apx .ap-end-card { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; row-gap: 12px; }
  .apx .ap-end-copy { margin-inline: auto; }
  .apx .ap-end-lede { margin-inline: auto; }
  .apx .ap-end-cta { justify-content: center; }
  .apx .ap-end-obj { width: min(100%, 400px); margin-left: 0; }
}
@media (max-width: 560px) {
  .apx .ap-end-card { padding: 40px 22px 52px; border-radius: 24px; }
  .apx .ap-end-cta { margin-top: 34px; }
  .apx .ap-end-cta .ap-pill { flex: 1 1 0; min-width: 0; padding: 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .apx .ap-end-film { display: none; }
  .apx .ap-end-card { background-image: url("/site/assets/video/hero-aurora.webp"); background-size: cover; }
}

/* ---------------------------------------------------------------------------
   11 · INSIDE THE APP · DELETED 2026-09-16, by request. A slate panel closed
   the page with a featured "Book a session" card beside three links into the
   app, all three of which the nav and the bento already reach. The design is
   kept whole at the foot of devices/ring-lab (apx.css, `.apxd`), which is
   where this site parks a layout it has stopped shipping.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .apx-js .apx .ap-up { opacity: 1; transform: none; transition: none; }
  .apx-js .apx .ap-hero-card, .apx-js .apx .ap-hero-top > * { animation: none; }
  .apx .ap-b-ping::before, .apx .ap-b-ping::after { animation: none; }
  .apx-js .apx .ap-b-trend path { stroke-dashoffset: 0; transition: none; }
}