/* ==========================================================================
 * Nova for sleep experts (/experts/): one screen, no scroll.
 *
 * Built on css/tokens.css (colour, type, radii) and css/main.css (reset,
 * .frame ledger column, .brand, .btn, .device). Everything here is layout.
 *
 * Fit: sizes scale with BOTH viewport width and height (min(vw, svh)), so the
 * page fits one screen at 1440x900, 1280x720, 1024x768, 390x844 and 360x780.
 * Nothing is fixed-height and nothing is clipped: on a shorter screen (a phone
 * in landscape) the page simply scrolls.
 *
 * The stage is a size container: its pictures are sized in cq units from the
 * space the copy leaves, so they never push the page taller.
 * No gradients, no shadows. The only motion is the 3D turn (experts.js),
 * which never starts under reduced motion.
 * ========================================================================== */

.xp {
  --maxw: 1320px;                        /* main.css .frame, widened for one screen */
  --pad: clamp(16px, 4.4vw, 44px);       /* main.css .frame side padding */

  /* phones */
  --h1:   clamp(28px, min(8.4vw, 4.4svh), 40px);
  --sub:  clamp(14px, min(3.9vw, 2svh), 16px);
  --st-t: clamp(14.5px, min(4vw, 2svh), 16px);
  --st-b: clamp(13px, min(3.6vw, 1.8svh), 14.5px);
  --gap:  clamp(9px, 1.55svh, 18px);     /* between blocks */
}

@media (min-width: 900px) {
  .xp {
    --h1:   clamp(40px, min(4.9vw, 8svh), 76px);
    --sub:  clamp(15px, min(1.35vw, 2.25svh), 19px);
    --st-t: clamp(15px, min(1.2vw, 2svh), 17.5px);
    --st-b: clamp(13.5px, min(1.04vw, 1.75svh), 15.5px);
    --gap:  clamp(14px, 3svh, 34px);
  }
}

/* ---- Page: header / main / footer ---------------------------------------- */
.xp-page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
}

.xp-head { border-bottom: 1px solid var(--hairline); }
.xp-head__in {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: clamp(44px, 5.6svh, 64px);
}
.xp-head .brand { padding: 9px 8px; margin-inline: -8px; }   /* 26px mark + 18px = a 44px target */
/* The address in plain sight: mailto links do nothing on a computer without
 * a mail app, and many experts use webmail. */
.xp-head__mail {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding-inline: 8px; margin-inline: -8px;
  font-size: 13px; font-weight: 500;
  color: var(--text-2);
  transition: color .16s ease;
}
.xp-head__mail:hover { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 3px; }

.xp-main {
  width: 100%;              /* a grid item with .frame's auto margins would shrink to fit */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  row-gap: var(--gap);
  padding-block: clamp(6px, 1.2svh, 36px);
}

/* Phones: the copy's children join the grid, so the stage can sit between
 * the intro and the steps. display: contents keeps the DOM and focus order. */
.xp-copy { display: contents; }
.xp-stage { order: 1; }
.xp-steps, .xp-offer { order: 2; }

@media (min-width: 900px) {
  .xp-main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(28px, 4vw, 64px);
    align-items: center;
  }
  .xp-copy { display: flex; flex-direction: column; gap: var(--gap); }
  .xp-stage { order: 0; align-self: stretch; }
}

/* ---- Copy ------------------------------------------------------------------ */
.xp-eyebrow {
  color: var(--accent-bright);
  font-size: clamp(13px, min(1.1vw, 1.9svh), 15px);
  font-weight: 620;
  letter-spacing: 0.005em;
}

.xp-h1 {
  margin-top: calc(var(--gap) * -0.45);   /* eyebrow and headline read as one unit */
  font-size: var(--h1);
  line-height: 1.02;
  letter-spacing: -0.034em;
  font-weight: 700;
  text-wrap: balance;
}
.xp-h1:focus { outline: none; }           /* skip-link target, not a control */

.xp-sub {
  max-width: 46ch;
  font-size: var(--sub);
  line-height: 1.48;
  color: var(--text-2);
  text-wrap: pretty;
}

/* ---- Steps: a numbered sequence joined by a hairline --------------------- */
.xp-steps {
  display: grid;
  row-gap: calc(var(--gap) * 0.7);
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: xp-step;
}
.xp-step {
  position: relative;
  padding-left: 37px;
  counter-increment: xp-step;
}
.xp-step::before {
  content: counter(xp-step);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 25px; height: 25px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: var(--r-pill);
  color: var(--accent-bright);
  font-size: 12.5px; font-weight: 650; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.xp-step:not(:last-child)::after {
  content: "";
  position: absolute; left: 12px; top: 29px;
  bottom: calc(var(--gap) * -0.7 + 4px);
  width: 1px;
  background: color-mix(in srgb, var(--accent) 28%, transparent);
}
.xp-step__title {
  padding-top: 1px;
  font-size: var(--st-t);
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.008em;
  color: var(--text-1);
}
/* Step 3 is what the partner programme gives an expert, not an app screen. */
.xp-tag {
  display: inline-block;
  padding: 1px 8px 2px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: var(--r-pill);
  color: var(--accent-bright);
  font-size: 11.5px; font-weight: 600; line-height: 1.35;
  letter-spacing: 0.01em;
  white-space: nowrap;
  vertical-align: 1px;
}
.xp-step__body {
  margin-top: 1px;
  max-width: 54ch;
  font-size: var(--st-b);
  line-height: 1.42;
  color: var(--text-2);
  text-wrap: pretty;
}

/* ---- Offer and call to action -------------------------------------------- */
.xp-offer {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 18px;
  margin-top: calc(var(--gap) * 0.2);
}
.xp-cta {
  min-height: 48px;
  padding-inline: 22px;
  font-size: 15px;
}
.xp-cta:focus-visible { border-radius: var(--r-card); }
.xp-offer__terms {
  font-size: clamp(13px, min(3.5vw, 1.8svh), 14px);
  line-height: 1.45;
  color: var(--text-2);
}

/* ---- Stage: Nova Room and the app on one shelf line ---------------------- */
/* A size container: it takes the height the copy leaves on desktop (a fixed
 * strip on phones) and the pictures are sized from it, so they never make
 * the page taller. */
.xp-stage {
  container-type: size;
  display: grid;
  place-items: center;
  margin: 0;
  height: calc(clamp(104px, 15svh, 220px) + 1px);   /* phones: pictures + shelf */
}

.xp-set {
  display: grid;
  /* phones: room | phone | legend; row 2 is the shelf under the two pictures */
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-rows: calc(100cqh - 1px) 1px;
  column-gap: 10px;
  width: 100%;
  margin: 0;
}
.xp-set::before {                    /* the shelf */
  content: "";
  grid-row: 2;
  grid-column: 1 / 3;
  background: color-mix(in srgb, var(--text-3) 60%, transparent);
}

/* True scale: Nova Room is 68 x 52 mm, the iPhone in the screenshot about
 * 150 x 72 mm. Its case fills 92% of the 4:5 canvas height, so the canvas is
 * 0.48 of the phone's height: on phones (where the phone is cut by the shelf)
 * that equals the phone's width. */
.xp-room {
  position: relative;
  grid-row: 1; grid-column: 1;
  align-self: end;
  height: calc((100cqh - 1px) * 0.82);
  aspect-ratio: 4 / 5;
}
.xp-room__still,
.xp-room__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.xp-room__canvas { opacity: 0; transition: opacity .9s ease; }
.xp-room.is-live .xp-room__canvas { opacity: 1; }
.xp-room__still { transition: opacity .9s ease; }
.xp-room.is-live .xp-room__still { opacity: 0; }

/* Phones: the screenshot rises from behind the shelf, cut by the line. */
.xp-phone {
  grid-row: 1; grid-column: 2;
  align-self: end;
  width: calc((100cqh - 1px) * 0.82);
  height: calc(100cqh - 1px);
  padding: 4px 4px 0;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}
.xp-phone .device__screen { border-radius: 10px 10px 0 0; }

.xp-caps {
  grid-row: 1; grid-column: 3;
  align-self: end;
  display: flex; flex-direction: column; gap: 8px;
  padding-left: 4px;
}
.xp-cap {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-2);
}
.xp-cap b { display: block; font-weight: 620; color: var(--text-1); }
.xp-cap span { white-space: nowrap; }      /* break between phrases, never inside */

/* Desktop: the whole phone stands on the shelf beside Nova Room, and the
 * labels hang from the line under each picture. */
@media (min-width: 900px) {
  .xp-stage { height: auto; min-height: 340px; }
  .xp-set {
    --cap: 64px;                                   /* label row under the line */
    --pic: min(calc(100cqh - var(--cap)), calc(94cqw / 0.85), 620px);
    grid-template-columns: auto auto;
    grid-template-rows: auto 1px auto;
    column-gap: 6cqw;
    width: auto;
  }
  .xp-set::before { grid-column: 1 / -1; }
  .xp-room { height: calc(var(--pic) * 0.48); }
  .xp-phone {
    width: calc(var(--pic) * 0.46);
    height: auto;
    padding: max(5px, calc(var(--pic) * 0.014));
    border-bottom: 1px solid var(--hairline);
    border-radius: max(14px, calc(var(--pic) * 0.052));
  }
  .xp-phone .device__screen { border-radius: max(10px, calc(var(--pic) * 0.04)); }
  .xp-caps {
    grid-row: 3; grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    gap: normal;                     /* a subgrid's normal gap is the shelf's */
    padding: 12px 0 0;
  }
  .xp-cap { max-width: 26ch; font-size: 13px; line-height: 1.4; }
}

/* ---- Footer -------------------------------------------------------------- */
.xp-foot { border-top: 1px solid var(--hairline); }
.xp-foot__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 4px 20px; flex-wrap: wrap;
  min-height: 44px;
  font-size: 12.5px;
  color: var(--text-2);
}
.xp-foot__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;
  padding-inline: 6px; margin-inline: -6px;
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--text-2) 45%, transparent);
  text-underline-offset: 3px;
  transition: color .16s ease;
}
.xp-foot__link:hover { color: var(--accent-bright); }

/* Header and footer links fill their 44px rows, so an outside ring would be
 * cut by the screen edge: draw it inside the target instead. */
.xp-head a:focus-visible,
.xp-foot a:focus-visible { outline-offset: -2px; border-radius: 8px; }