/* Phenome redesign, the Ring page's sections brought over from Tiffany's
   devices/ring: the charging case features (lab.css), Biometrics (bio.css),
   Tuned to you (fit.css and fit.js) and Design and specification (kit.css)
   stand on this page with their own stylesheets. What her page added on top
   under `.ph-flat` (ring.css § 12) is repeated here without that prefix, as
   this page's body does not carry her class. */

/* This page's body carries `ph-flat` too, so bio.css and kit.css (every rule of
   which is scoped to it) draw Biometrics and the kit as on her page. */

/* ---- the case's six features, under the sensing photograph on its black:
   her own dark list (lab.css § 3, white glyph and words), in three columns.
   `.lab` paints white, so this one is transparent. -------------------------- */
.lab.pd-feat { background: transparent; color: #fff; padding: clamp(40px, 5vw, 72px) 24px clamp(88px, 10vw, 150px); }
.lab.pd-feat .lab-featlist { max-width: 1080px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 48px; }
/* the words set as Biometrics sets its list (bio.css .rbio-list b, span) */
.lab.pd-feat .lab-ft { margin: 16px 0 0; font-size: clamp(20px, 1.6vw, 25px); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: #f5f5f7; }
.lab.pd-feat .lab-fd { margin: 2px 0 0; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.4; color: #86868b; }
@media (max-width: 900px) {
  .lab.pd-feat .lab-featlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .lab.pd-feat { padding: 32px 16px 88px; }
  .lab.pd-feat .lab-featlist { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
/* the same list in ink on a white section (the Band's readings) */
.lab.pd-feat.is-light { color: #1d1d1f; padding-top: clamp(56px, 6vw, 88px); padding-bottom: 0; }
.lab.pd-feat.is-light .lab-featlist svg { stroke: #1d1d1f; }
.lab.pd-feat.is-light .lab-ft { color: #1d1d1f; }
.lab.pd-feat.is-light .lab-fd { color: #6e6e73; }

/* ---- "Choose your ring", from ring.css § 9 (.pick), as she set it, for any
   page that carries her columns (the Band's straps) --------------------------- */
.ph-flat .pick { background: #fff; color: #1d1d1f; }
.ph-flat .pick .opener > .pick-scroll,
.ph-flat .pick .opener > .opener-t { grid-column: 1 / -1; }
.ph-flat .pick .opener-t { text-align: center; }
.ph-flat .pick .pick-h { align-items: center; text-align: center; margin-inline: auto; }
.ph-flat .pick-card { align-items: center; justify-items: center; text-align: center; }
.ph-flat .pick-card .pick-fig { justify-self: stretch; align-self: stretch; width: 100%; }
.ph-flat .pick-card .pick-dots { justify-content: center; margin-left: 0; }
.ph-flat .pick-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(16px, 2.6vw, 48px);
  margin-top: clamp(40px, 4.6vw, 68px);
}
.ph-flat .pick-card { display: flex; flex-direction: column; min-width: 0; }
@supports (grid-template-rows: subgrid) {
  .ph-flat .pick-cols { grid-template-rows: repeat(6, auto); }
  .ph-flat .pick-card { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: 0; }
}
.ph-flat .pick-fig { position: relative; margin: 0 0 clamp(16px, 1.8vw, 24px); aspect-ratio: 4 / 3; }
.ph-flat .pick-fig img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
  opacity: 0;
  transition: opacity 320ms var(--ease-frosted-out, ease);
}
.ph-flat .pick-fig img.on { opacity: 1; }
.ph-flat .pick-dots { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px -5px; min-height: 40px; }
.ph-flat .fin-dot::before { box-shadow: 0 2px 5px -2px #10214b47 !important; }
.ph-flat .pick-dotname { margin: 0 0 14px; font-size: 16px; line-height: 22px; color: #6e6e73; }
.ph-flat .pick-name { margin: 0; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; color: #1d1d1f; }
.ph-flat .pick-price { margin: 6px 0 16px; font-size: 17px; line-height: 24px; color: #6e6e73; font-variant-numeric: tabular-nums; }
.ph-flat .pick-buy { align-self: start; justify-self: center; width: min(100%, 280px); justify-content: center; }
@media (max-width: 900px) {
  .ph-flat .pick-scroll { overflow-x: auto; overscroll-behavior-x: contain; margin-inline: calc(var(--ph-margin, 22px) * -1); padding-inline: var(--ph-margin, 22px); }
  .ph-flat .pick-cols { min-width: 640px; column-gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-flat .pick-fig img { transition: none; }
}
/* the Band's columns: its renders stand upright, so a square plate; a colour's
   price and button show only while its disc is chosen (her script marks them
   .on with the photograph); a price the store cannot give yet is left out */
.ph-flat .pick-band .pick-fig { aspect-ratio: 1 / 1; }
/* On a phone the Band's three straps stack, one full card each, instead of a
   row that runs off the screen. */
@media (max-width: 733px) {
  .ph-flat .pick-band .pick-scroll { overflow: visible; margin-inline: 0; padding-inline: 0; }
  .ph-flat .pick-band .pick-cols { min-width: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 64px; }
  .ph-flat .pick-band .pick-card { display: flex; flex-direction: column; grid-row: auto; }
  .ph-flat .pick-band .pick-fig { width: min(100%, 300px); align-self: center; }
  .ph-flat .pick-band .pick-buy { align-self: center; }
}
.ph-flat .pick-card .pick-price > [data-fin-img]:not(.on),
.ph-flat .pick-card .pick-buy[data-fin-img]:not(.on) { display: none; }
.ph-flat .pick .pick-price:has(.on.ph-unavailable),
.ph-flat .pick .pick-price:has(> .ph-unavailable:only-child) { visibility: hidden; }

/* ---- her two line headings (Biometrics, Tuned to you, the kit) in the page's
   own pair (product.css): her first line is the small grey line over the
   headline (.pd-eyebrow), her second the headline itself (.pd-h) -------------- */
.ph-flat .rbio-h.ph-display,
.rtune-lab .rtune-h.ph-display,
.ph-flat .rkit-h.ph-display,
.ph-flat .pick-h.ph-display {
  /* -0.022em: what the page's headlines render with (the site root's h1, h2
     rule outranks .pd-h's -0.045em) */
  font-size: clamp(44px, 5.6vw, 80px); line-height: 1.05; font-weight: 600; letter-spacing: -0.022em; color: #1d1d1f;
}
.ph-flat .rbio-h.ph-display > span,
.rtune-lab .rtune-h.ph-display > span,
.ph-flat .rkit-h.ph-display > span,
.ph-flat .pick-h.ph-display > span {
  display: block; font: inherit; letter-spacing: inherit; color: inherit;
}
.ph-flat .rbio-h.ph-display > .ph-display-lead,
.rtune-lab .rtune-h.ph-display > .ph-display-lead,
.ph-flat .rkit-h.ph-display > .ph-display-lead,
.ph-flat .pick-h.ph-display > .ph-display-lead {
  margin-bottom: 14px; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: #86868b;
}

/* ---- Biometrics and Tuned to you on black: one dark run from the hero to
   Sleep. Each section is black itself, as its content fades
   in over the page's base. -------------------------------------------------- */
.ph-flat .rbio { background: #000; }
/* The case section's wrapper is black too, so no white shows at its seam with
   the hero, which ends on a fractional pixel. */
.ph-flat .rlab { background: #000; }
.ph-flat .rbio-h.ph-display,
.rtune-lab .rtune-h.ph-display { color: #f5f5f7; }
.ph-flat .rbio-list b,
.ph-flat .rbio-call em { color: #f5f5f7; }
.ph-flat .rbio-list span { color: #86868b; }
.ph-flat .rbio-lead path { stroke: rgba(255, 255, 255, .38); }
.ph-flat .rbio-lead circle { fill: #f5f5f7; }
.ph-flat .rbio-lead circle.halo { fill: rgba(255, 255, 255, .16); }
/* hers multiplies the render into white; on black that would draw it black */
.ph-flat .rbio-ring img { mix-blend-mode: normal; }
.rtune,
.rtune-lab,
.rtune-lab .fit-show { background: #000; color: #f5f5f7; }

/* ---- § 12 · Tuned to you, as ring.css sets it ------------------------------- */
.rtune-lab .rtune-h { margin: 0 auto clamp(20px, 3vw, 60px); }
.rtune-lab .fit-show { padding-top: clamp(72px, 8vw, 128px); }
.rtune-lab .fit-name { font-size: clamp(28px, 2.4vw, 36px); font-weight: 600; letter-spacing: -0.02em; color: #f5f5f7; }
.rtune-lab .fit-desc { font-size: clamp(18px, 1.35vw, 20px); line-height: 1.55; color: #86868b; }
.rtune-lab .fit-dots button { background: rgba(255, 255, 255, .25); }
.rtune-lab .fit-dots button.on { background: #f5f5f7; }
.rtune-lab .fit-arr { background: #1d1d1f; border-color: rgba(255, 255, 255, .18); color: #f5f5f7; }
.rtune-lab .fit-arr:hover { background: #2c2c2e; }
.rtune-lab .fit-show { --fit-top: calc(56px + max(24px, (100vh - 56px - 630px) / 2)); }
.rtune-lab .fit-phone { width: 300px; aspect-ratio: 300 / 623; border-radius: 50px; }
.rtune-lab .fit-scr { border-radius: 42px; padding: 50px 16px 16px; }
.rtune-lab .fit-notch { top: 22px; width: 90px; height: 25px; }
.rtune-lab .fit-text { width: calc(50% - 190px); }
.rtune-lab .fit-item.is-right .fit-text { margin-right: 60px; width: calc(50% - 250px); }
/* room after the last feature, so the phone is still pinned while it is read
   (without it the phone began to leave under the bars on the last screen) */
@media (min-width: 901px) {
  .rtune-lab .fit-items { padding-bottom: 260px; }
  /* The features pass the pinned phone half a screen apart, so the one that
     comes next stands whole under the one being read and the one after it
     waits below the screen. At 600 apart on a laptop the next one's last
     lines were cut by the bottom of the screen. */
  .rtune-lab .fit-show { --fit-item: clamp(340px, calc(50vh - 40px), 600px); }
  .rtune-lab .fit-item { padding-top: clamp(0px, calc(50vh - 414px), 150px); }
}
@media (max-width: 1100px) {
  .rtune-lab .fit-text { width: calc(50% - 175px); }
  .rtune-lab .fit-item.is-right .fit-text { width: calc(50% - 235px); }
}
@media (max-width: 900px) {
  .rtune-lab .fit-text,
  .rtune-lab .fit-item.is-right .fit-text { width: 100%; margin-right: 0; }
  .rtune-lab .fit-mini { width: 280px; }
  .rtune-lab .fit-mini .fit-phone { width: 100%; }
}

/* ---- the phone's screens are the app itself (apple/app/harness.js), drawn at
   the app's 390 point width and scaled into the glass: 282 wide in the 300
   phone, 262 wide in the 280 phone narrow layouts use --------------------- */
.rtune-lab .fit-scr.pl-scr { padding: 0; background: #242124; }
.rtune-lab .fit-device .pl-view { --pl-scale: 0.7231; }
.rtune-lab .fit-mini .pl-view { --pl-scale: 0.6718; }