/* The page below the hero. Every rule is scoped to .sx (a section) or .ft (the footer), and every
   inner class carries the x- prefix, so no rule here can reach the hero or the inside of an app
   screen. */
.sx {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 170px 40px 0;
}
.sx-h {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.6rem, 4.6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.sx-l {
  margin-top: 16px;
  max-width: 32ch;
  text-wrap: balance;
  font-size: clamp(17px, 1.25vw, 20px);
  color: var(--ink2);
}
.sx-center {
  text-align: center;
}
.sx-center .sx-l {
  margin-inline: auto;
}
/* a bare app screen (the hero's look), sized by --w */
.sx .x-bs {
  position: relative;
  width: var(--w, 300px);
  isolation: isolate;
}
.sx .x-bs > .glass {
  border-radius: 24px;
  box-shadow:
    0 0 0 1px rgba(244, 241, 234, 0.12),
    0 40px 80px -30px rgba(0, 0, 0, 0.95);
}
.sx .x-bs > .spill {
  inset: -20% -38%;
  z-index: -1;
  filter: blur(64px);
}
/* a cropped screen: the top of the real screen, where its main figure sits, fading into the
   ground before the tab bar and the Pia button */
.sx .x-crop > .glass {
  /* a centred section must not re-align the screen's own text */
  text-align: left;
  aspect-ratio: 390 / 640;
  border-radius: 30px;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 66%, transparent 99%);
}
.sx .x-crop > .glass::after {
  content: '';
  position: absolute;
  z-index: 40;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(244, 241, 234, 0.13);
  pointer-events: none;
}
.sx .x-cap {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
}
.sx .x-ctl {
  display: flex;
  gap: 10px;
  align-items: center;
}
.sx .x-ctl button {
  height: 36px;
  min-width: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(10, 10, 10, 0.6);
  color: var(--ink2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.sx .x-ctl button[hidden] {
  display: none;
}
.sx .x-ctl button:focus-visible,
.sx .x-dy-row:focus-visible {
  outline: 2px solid rgba(244, 241, 234, 0.35);
  outline-offset: 3px;
}
.sx .x-ctl svg {
  width: 14px;
  height: 14px;
}

/* light colours, each from its screen */
.sx .x-l-night {
  background:
    radial-gradient(closest-side at 44% 28%, rgba(80, 64, 230, 0.9), transparent),
    radial-gradient(closest-side at 52% 58%, rgba(160, 50, 130, 0.95), transparent),
    radial-gradient(closest-side at 58% 88%, rgba(240, 93, 53, 0.9), transparent);
}
.sx .x-l-gold {
  background:
    radial-gradient(closest-side at 50% 30%, rgba(201, 163, 92, 0.85), transparent),
    radial-gradient(closest-side at 50% 80%, rgba(240, 93, 53, 0.8), transparent);
}
.sx .x-l-cat {
  background:
    radial-gradient(closest-side at 50% 26%, rgba(92, 142, 194, 0.7), transparent),
    radial-gradient(closest-side at 60% 60%, rgba(95, 156, 129, 0.55), transparent),
    radial-gradient(closest-side at 44% 88%, rgba(201, 163, 92, 0.5), transparent);
  opacity: 0.8;
}
.sx .x-l-pos {
  background:
    radial-gradient(closest-side at 50% 34%, rgba(88, 176, 131, 0.75), transparent),
    radial-gradient(closest-side at 46% 80%, rgba(201, 163, 92, 0.45), transparent);
  opacity: 0.8;
}
.sx .x-l-ai {
  background:
    radial-gradient(closest-side at 50% 36%, rgba(127, 158, 196, 0.85), transparent),
    radial-gradient(closest-side at 50% 80%, rgba(80, 64, 230, 0.5), transparent);
  opacity: 0.85;
}
.sx .x-l-wheat {
  background:
    radial-gradient(closest-side at 50% 30%, rgba(201, 163, 92, 0.7), transparent),
    radial-gradient(closest-side at 52% 78%, rgba(127, 158, 196, 0.45), transparent);
  opacity: 0.8;
}
.sx .x-l-rose {
  background:
    radial-gradient(closest-side at 50% 30%, rgba(215, 105, 127, 0.6), transparent),
    radial-gradient(closest-side at 50% 78%, rgba(201, 163, 92, 0.45), transparent);
  opacity: 0.8;
}

/* ---------- 2. the night, pinned while you scroll ---------- */
.sx-night {
  padding-top: 120px;
}
.sx-night .x-nt-track {
  height: 300vh;
}
.sx-night .x-nt-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
}
.sx-night .x-nt-beats {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.sx-night .x-nt-beats li {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.2;
  color: var(--ink4);
  transition: color 420ms var(--ease);
}
.sx-night .x-nt-beats li::before {
  content: '';
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform-origin: 0 50%;
  transform: scaleX(0.4);
  transition: transform 420ms var(--ease);
}
.sx-night .x-nt-beats li.on {
  color: var(--ink);
}
.sx-night .x-nt-beats li.on::before {
  transform: scaleX(1);
}
.sx-night .x-nt-screen {
  --w: 360px;
  margin-right: 60px;
}
.sx-night .x-nt-screen > .spill {
  transition: opacity 700ms var(--ease);
}
.sx-night .x-nt-screen.x-dim > .spill {
  opacity: 0.62;
}

/* ---------- 2. every day: real screens, two by two ---------- */
.sx-day .x-dy-row {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(2, 380px);
  justify-content: center;
  column-gap: 120px;
  row-gap: 40px;
  align-items: start;
}
.sx-day .x-dy {
  margin: 0;
}
.sx-day .x-dy:nth-child(even) {
  margin-top: 150px;
  margin-bottom: -150px;
}
.sx-day .x-dy > .x-cap {
  margin-bottom: 20px;
}
.sx-day .x-dy > .x-bs {
  --w: 380px;
}

/* the smaller features, each in the colour of the screen it belongs with */
.sx-day .x-more {
  max-width: 880px;
  margin: 200px auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  text-align: left;
}
.sx-day .x-more > li {
  --t: 244, 241, 234;
  padding: 22px 22px 24px;
  border-radius: 18px;
  border: 1px solid rgba(var(--t), 0.3);
  background: radial-gradient(120% 90% at 0% 0%, rgba(var(--t), 0.16), transparent 70%);
}
.sx-day .x-more b {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
  color: rgb(var(--t));
}
.sx-day .x-more span {
  display: block;
  margin-top: 6px;
  color: var(--ink2);
}
.sx-day .x-more > .x-t-coral {
  --t: 240, 93, 53;
}
.sx-day .x-more > .x-t-teal {
  --t: 107, 163, 163;
}
.sx-day .x-more > .x-t-pos {
  --t: 88, 176, 131;
}
.sx-day .x-more > .x-t-rose {
  --t: 215, 105, 127;
}

/* ---------- 4. June, wrapped: a story deck ---------- */
.sx-june .x-jw {
  margin-top: 56px;
  position: relative;
  height: 760px;
}
.sx-june .x-jw-deck {
  position: absolute;
  inset: 0;
}
.sx-june .x-jw-deck > .x-bs {
  --w: 330px;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -165px;
  transition:
    transform 900ms var(--ease),
    opacity 900ms var(--ease);
  cursor: pointer;
}
.sx-june .x-jw-deck > .x-bs > .spill {
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.sx-june .x-jw-deck > .x-bs.x-cur > .spill {
  opacity: 1;
}
.sx-june .x-jw-deck > .x-bs.x-cur {
  z-index: 3;
  transform: none;
}
.sx-june .x-jw-deck > .x-bs.x-prev,
.sx-june .x-jw-deck > .x-bs.x-next {
  z-index: 2;
  opacity: 0.42;
}
.sx-june .x-jw-deck > .x-bs.x-prev {
  transform: translateX(-310px) scale(0.8) rotate(-3deg);
}
.sx-june .x-jw-deck > .x-bs.x-next {
  transform: translateX(310px) scale(0.8) rotate(3deg);
}
.sx-june .x-jw-deck > .x-bs.x-far-l,
.sx-june .x-jw-deck > .x-bs.x-far-r {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
.sx-june .x-jw-deck > .x-bs.x-far-l {
  transform: translateX(-520px) scale(0.66);
}
.sx-june .x-jw-deck > .x-bs.x-far-r {
  transform: translateX(520px) scale(0.66);
}
.sx-june .x-jw-ctl {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

/* ---------- 5. where you're going: three screens in an arc ---------- */
.sx-plan .x-pl-row {
  margin-top: 64px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 36px;
}
.sx-plan .x-pl {
  margin: 0;
  text-align: center;
}
.sx-plan .x-pl > .x-bs {
  --w: 330px;
}
.sx-plan .x-pl.x-mid > .x-bs {
  --w: 370px;
}
.sx-plan .x-pl.x-side {
  margin-top: 70px;
}
.sx-plan .x-pl > .x-cap {
  margin-top: 22px;
}

/* ---------- 6. Ask Pia ---------- */
.sx-pia .x-pia-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
}
.sx-pia .x-pia-screen {
  --w: 350px;
  margin-right: 60px;
}
.sx-pia .x-pia-mode {
  margin-top: 28px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.2;
  color: #9fb8d8;
}

/* a section's own light: one screen colour, spilling up behind its cards */
.sx-safe {
  isolation: isolate;
}
.sx .x-sx-light {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -150px;
  width: min(1200px, 130vw);
  height: 480px;
  transform: translateX(-50%);
  filter: blur(90px);
  pointer-events: none;
}
.sx-safe .x-sx-light {
  opacity: 0.65;
}

/* ---------- 7. private ---------- */
.sx-safe .x-sf {
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.sx-safe .x-sf > li {
  padding: 22px 20px 24px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--inset);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.35;
}
.sx-safe .x-sf svg {
  display: block;
  margin-bottom: 16px;
}

/* ---------- 9. questions ---------- */
.sx-faq .x-fq {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: 56px;
}
.sx-faq .x-fq details {
  border-top: 1px solid var(--line);
}
.sx-faq .x-fq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  font-weight: 500;
  font-size: 19px;
  cursor: pointer;
  list-style: none;
}
.sx-faq .x-fq summary::-webkit-details-marker {
  display: none;
}
.sx-faq .x-fq summary::after {
  content: '+';
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1;
  color: var(--ink3);
  transition: transform 300ms var(--ease);
}
.sx-faq .x-fq details[open] summary::after {
  transform: rotate(45deg);
}
.sx-faq .x-fq summary:focus-visible {
  outline: 2px solid rgba(244, 241, 234, 0.35);
  outline-offset: 4px;
}
.sx-faq .x-fq details p {
  padding: 0 0 22px;
  max-width: 60ch;
  color: var(--ink2);
}

/* ---------- 10. last call ---------- */
.sx-last {
  padding-bottom: 150px;
  text-align: center;
}
.sx-last .x-lc-light {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(1100px, 120vw);
  height: 560px;
  transform: translate(-50%, -30%);
  filter: blur(80px);
  opacity: 0.55;
  background:
    radial-gradient(closest-side at 30% 50%, rgba(92, 142, 194, 0.8), transparent),
    radial-gradient(closest-side at 52% 44%, rgba(160, 50, 130, 0.85), transparent),
    radial-gradient(closest-side at 70% 56%, rgba(240, 93, 53, 0.8), transparent),
    radial-gradient(closest-side at 50% 70%, rgba(201, 163, 92, 0.7), transparent);
  pointer-events: none;
}
.sx-last .x-lc {
  position: relative;
}
.sx-last .x-lc > img {
  width: 56px;
  height: 56px;
  margin-bottom: 26px;
}
.sx-last .x-lc > .join {
  margin: 36px auto 0;
}
.sx-last .x-lc > .fine {
  margin-top: 14px;
}
.sx-last .x-lc > .sent {
  margin-top: 36px;
}

/* ---------- footer ---------- */
.ft {
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 40px 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink3);
}
.ft nav {
  display: flex;
  gap: 22px;
}
.ft a {
  color: var(--ink2);
  text-decoration: none;
}
.ft a:hover {
  color: var(--ink);
}
.ft a:focus-visible {
  outline: 2px solid rgba(244, 241, 234, 0.35);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- laptop ---------- */
@media (max-width: 1180px) {
  .sx-night .x-nt-screen {
    --w: 320px;
    margin-right: 0;
  }
  .sx-day .x-dy-row {
    grid-template-columns: repeat(2, min(380px, 40vw));
    column-gap: min(120px, 8vw);
  }
  .sx-day .x-dy > .x-bs {
    --w: 100%;
  }
  .sx-plan .x-pl > .x-bs {
    --w: min(290px, 26vw);
  }
  .sx-plan .x-pl.x-mid > .x-bs {
    --w: min(330px, 30vw);
  }
  .sx-safe .x-sf {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sx-pia .x-pia-screen {
    margin-right: 0;
  }
}

/* the phone layout is mobile.css */

@media (prefers-reduced-motion: reduce) {
  .sx-june .x-jw-deck > .x-bs,
  .sx-june .x-jw-deck > .x-bs > .spill,
  .sx-night .x-nt-beats li,
  .sx-night .x-nt-beats li::before {
    transition: none;
  }
}