/* ══════════════════════════════════════════════════════════════════════
   PhaseParadise, landing page
   ────────────────────────────────────────────────────────────────────
   The page runs light. The app runs dark. Two sections (the cycle and
   the closing) go dark on purpose, so the phase colours can glow the
   way they do inside the app.
   ══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────── TOKENS */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* surfaces */
  --bg-primary: #F8F9FA;
  --bg-primary-dark: #0B0C10;
  --surface-warm: #FBF8F6;

  /* cycle phases */
  --phase-menstruation: #E85150;
  --phase-menstruation-dark: #D94342;
  --phase-follicular: #64BC97;
  --phase-follicular-dark: #47986E;
  --phase-ovulation: #FEBC52;
  --phase-ovulation-dark: #F9B53F;
  --phase-luteal: #A28DEA;
  --phase-luteal-dark: #9E83EB;
  --phase-spotting: #F48FB1;
  --phase-spotting-dark: #F48FB1;

  /* the one action colour */
  --brand-accent: #F06A2C;

  /* type */
  --text-body: #1C1C1E;
  --text-body-dark: #F3F5FB;
  --text-muted: #6B7280;
  --text-muted-dark: #D3D8E5;

  /* accent, per background. the light tint only reads on dark */
  --accent: var(--phase-follicular-dark);
  --accent-on-dark: var(--phase-follicular);

  /* fonts */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* rhythm */
  --wrap: 1160px;
  --gut: clamp(20px, 5vw, 40px);
  --section-y: clamp(96px, 13vw, 160px);

  /* motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.9s;
}

/* ───────────────────────────────────────────────────────────── BASE */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-body);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

ol, ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, p { margin: 0; }

::selection {
  background: rgba(240, 106, 44, 0.22);
  color: var(--text-body);
}

:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 5px;
  border-radius: 6px;
}

/* the text arrives from assets/locales/, so the page holds still for one beat
   rather than showing its empty frame first */
body { transition: opacity 0.4s var(--ease); }
.i18n-pending body { opacity: 0; }

.noscript {
  max-width: 620px;
  margin: 22vh auto;
  padding-inline: var(--gut);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-muted);
  text-align: center;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--text-body);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  border-radius: 8px;
}
.skip-link:focus-visible { left: 16px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* ───────────────────────────────────────────────── TYPE PRIMITIVES */
.eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(0.6875rem, 1.1vw, 0.75rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.25em;
}
.eyebrow--onDark { color: var(--text-muted-dark); }

.lede {
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 40ch;
  text-wrap: pretty;
}
.lede--onDark { color: var(--text-muted-dark); }

.section__title,
.beat__title,
.phases__title,
.cta__title,
.hero__title {
  font-weight: 800;
  font-stretch: 125%;
  line-height: 0.94;
  letter-spacing: -0.015em;
  /* line breaks come from the locale files. balancing is left off so the
     browser does not split a line the translator meant to keep whole,
     while long lines still wrap on narrow screens. */
  text-wrap: wrap;
}

.section__title,
.beat__title,
.phases__title {
  font-size: clamp(2.125rem, 5.2vw, 4rem);
  margin-bottom: 0.55em;
}

/* the app's two-tone headline, kept for the two moments that earn it */
em {
  font-style: normal;
  color: var(--accent);
}
.cta__title em,
.phases__title em { color: var(--accent-on-dark); }

/* ────────────────────────────────────────────────────────────── NAV */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color 0.5s var(--ease), box-shadow 0.5s var(--ease),
              backdrop-filter 0.5s var(--ease);
}
.nav.is-stuck {
  background: rgba(248, 249, 250, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgba(28, 28, 30, 0.07);
}
/* the two sections that go dark need a dark bar over them */
.nav--onDark.is-stuck {
  background: rgba(11, 12, 16, 0.66);
  box-shadow: 0 1px 0 rgba(243, 245, 251, 0.09);
}

.nav__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 14px var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* the wordmark file carries the strapline underneath. at nav size that
   only reads as a smudge, so the frame crops it away. both logos are
   stacked in the same window and cross-fade. */
.nav__brand {
  --logo-h: 37px;   /* full height of the image file */
  --logo-top: 6.6px; /* trimmed off the top */
  position: relative;
  display: block;
  height: 21px;
  width: calc(var(--logo-h) * 5.9611); /* 1991 / 334 */
  overflow: hidden;
}
.nav__logo {
  position: absolute;
  top: calc(var(--logo-top) * -1);
  left: 0;
  height: var(--logo-h);
  width: auto;
  transition: opacity 0.45s var(--ease);
}
.nav__logo--dark { opacity: 0; }
.nav--onDark .nav__logo--light { opacity: 0; }
.nav--onDark .nav__logo--dark { opacity: 1; }

.nav__end {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
}

/* ─────────────────────────────────────────────── language switcher */
.lang {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}
.lang__btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 5px 2px;
  font: inherit;
  letter-spacing: inherit;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.35s var(--ease);
}
.lang__btn:hover { color: var(--text-body); }
.lang__btn[aria-pressed="true"] {
  color: var(--text-body);
  font-weight: 500;
}
.lang__sep {
  color: var(--text-muted);
  opacity: 0.4;
}
.nav--onDark .lang__btn,
.nav--onDark .lang__sep { color: var(--text-muted-dark); }
.nav--onDark .lang__btn:hover,
.nav--onDark .lang__btn[aria-pressed="true"] { color: var(--text-body-dark); }

.nav .badge--sm img { height: 38px; width: auto; }
@media (max-width: 480px) {
  .nav .badge--sm img { height: 34px; }
  .nav__brand { --logo-h: 26px; --logo-top: 4.6px; height: 15px; }
  .lang { font-size: 0.6875rem; }
}
/* ──────────────────────────────────────────────────────────── BADGE */
.badge {
  display: inline-block;
  border-radius: 10px;
  transition: transform 0.5s var(--ease), filter 0.5s var(--ease);
}
.badge img { height: 54px; width: auto; }
.badge:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 10px 22px rgba(240, 106, 44, 0.28));
}
.badge:active { transform: translateY(0); }
.badge:focus-visible { outline-offset: 6px; }

/* One store per visitor. The nav and the hero carry both badges and hide
   the one the device cannot use, App Store on Apple, Google Play on the
   rest. The closing CTA carries no modifier, so it keeps showing both. */
.badge--android { display: none; }
.os-android .badge--apple { display: none; }
.os-android .badge--android { display: inline-block; }

/* below this the bar cannot hold all three, and the hero CTA is right
   underneath anyway */
@media (max-width: 400px) {
  .nav .badge--sm { display: none; }
}

/* ─────────────────────────────────────────────────────────── DEVICE */
.device {
  --dw: 280px;
  width: var(--dw);
  position: relative;
  flex: none;
}

.device__frame {
  padding: calc(var(--dw) * 0.011);
  border-radius: calc(var(--dw) * 0.169);
  background:
    linear-gradient(148deg,
      #7d838c 0%, #3a3e45 16%, #23262b 38%,
      #1a1c20 55%, #43474f 78%, #868c96 100%);
  box-shadow:
    0 1px 2px rgba(16, 18, 24, 0.10),
    0 16px 34px -14px rgba(16, 18, 24, 0.22),
    0 56px 80px -46px rgba(16, 18, 24, 0.34);
}

.device__screen {
  position: relative;
  border-radius: calc(var(--dw) * 0.158);
  overflow: hidden;
  background: #000;
  aspect-ratio: 402 / 874;
}
.device__screen > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A shot has no src until i18n.js knows the language, so it lands a moment
   after its frame. It fades up over the black panel instead of snapping in.
   Tied to .js, so with scripting off nothing can stay stuck at zero, and the
   reduced-motion block below flattens the transition to nothing. */
.js .device__screen > img {
  opacity: 0;
  transition: opacity 240ms ease;
}
.js .device__screen > img.is-loaded { opacity: 1; }

/* glass sheen across the panel */
.device__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(126deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.02) 22%,
    rgba(255, 255, 255, 0) 46%);
}

/* on the dark sections the drop shadow becomes a lift instead */
.phases .device__frame,
.cta .device__frame {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 30px 60px -20px rgba(0, 0, 0, 0.75);
}

/* ══════════════════════════════════════════════════════ 1 · HERO */
.hero {
  position: relative;
  padding-top: clamp(104px, 14vh, 158px);
  padding-bottom: clamp(48px, 7vw, 96px);
  overflow: hidden;
}

.hero__glow {
  position: absolute;
  top: -18%;
  left: 50%;
  translate: -50% 0;
  width: min(1200px, 150vw);
  aspect-ratio: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 45%,
      rgba(100, 188, 151, 0.13) 0%,
      rgba(162, 141, 234, 0.08) 34%,
      rgba(248, 249, 250, 0) 62%);
}

.hero__copy {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* tied to viewport height as well as width, so the phone peeks over
   the fold by about a third on any screen */
.hero__title {
  font-size: clamp(2.6rem, min(9.6vw, 12.2vh), 7rem);
  line-height: 0.9;
  letter-spacing: -0.025em;
  margin-bottom: 0.42em;
}
.hero__line { display: block; }

.hero__lede {
  max-width: 34ch;
  margin-bottom: 2.2em;
}

.hero__stage {
  position: relative;
  margin-top: clamp(30px, 4.5vh, 60px);
  display: flex;
  justify-content: center;
}
.device--hero { --dw: clamp(230px, min(30vw, 34vh), 312px); }

/* hero entrance, pure CSS. it waits for the text, then plays once */
.hero__eyebrow,
.hero__line,
.hero__lede,
.hero__cta,
.hero__stage {
  animation: rise 1.15s var(--ease) both;
}
.hero__eyebrow    { animation-delay: 0.05s; }
.hero__line:nth-child(1) { animation-delay: 0.14s; }
.hero__line:nth-child(2) { animation-delay: 0.22s; }
.hero__lede       { animation-delay: 0.34s; }
.hero__cta        { animation-delay: 0.44s; }
.hero__stage      { animation-delay: 0.5s; animation-duration: 1.5s; }

/* held until the strings are in, so nobody sees the entrance twice */
.i18n-pending .hero__eyebrow,
.i18n-pending .hero__line,
.i18n-pending .hero__lede,
.i18n-pending .hero__cta,
.i18n-pending .hero__stage { animation-play-state: paused; }

@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 34px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ══════════════════════════════════════════════════ 2 · BENEFITS */
.benefits {
  padding-block: var(--section-y);
  display: grid;
  gap: clamp(96px, 13vw, 168px);
}

.beat {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  justify-items: center;
  text-align: center;
}
.beat__title { font-size: clamp(2rem, 4.6vw, 3.5rem); }
.beat__visual .device { --dw: clamp(215px, 26vw, 272px); }

@media (min-width: 860px) {
  .beat {
    grid-template-columns: 1fr auto;
    justify-items: start;
    text-align: left;
    gap: clamp(48px, 8vw, 120px);
  }
  .beat__visual { justify-self: end; }
  .beat--flip .beat__text   { grid-column: 2; }
  .beat--flip .beat__visual { grid-column: 1; grid-row: 1; justify-self: start; }
}

/* ══════════════════════════════════════════ 3 · PHASES (signature) */
.phases {
  background: var(--bg-primary-dark);
  color: var(--text-body-dark);
  position: relative;
}

.phases__track { min-height: 100svh; }

.phases__sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: clamp(72px, 10vh, 120px);
  overflow: hidden;
}

/* a soft bloom behind the ring, tinted by the active phase */
.phases__sticky::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: min(900px, 130vw);
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--phase-live, #64BC97) 15%, transparent) 0%,
    rgba(11, 12, 16, 0) 58%);
  transition: background 1.1s var(--ease);
}

.phases__grid {
  position: relative;
  display: grid;
  gap: clamp(30px, 4vw, 56px);
  justify-items: center;
  text-align: center;
}

.phases__title { font-size: clamp(2rem, 5vw, 3.75rem); margin-bottom: 0.45em; }
.phases__intro .lede { margin-inline: auto; }

/* ── the ring ── */
.ring {
  --ring-size: clamp(196px, 30vh, 300px);
  position: relative;
  width: var(--ring-size);
  aspect-ratio: 1;
}
.ring__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* 35 on a 287 outer diameter is the 12.3% the app's day counter uses */
.ring__track,
.ring__arc {
  fill: none;
  stroke-width: 35;
  stroke-linecap: butt;
}
.ring__track { stroke: rgba(243, 245, 251, 0.09); }
/* nothing is drawn until the scroll draws it */
.ring__arc { stroke-dasharray: 0 9999; }

.ring__arc[data-phase="0"] { stroke: var(--phase-menstruation); }
.ring__arc[data-phase="1"] { stroke: var(--phase-follicular); }
.ring__arc[data-phase="2"] { stroke: var(--phase-ovulation); }
.ring__arc[data-phase="3"] { stroke: var(--phase-luteal); }

.ring__marker {
  fill: #fff;
  stroke: var(--phase-menstruation);
  stroke-width: 4;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.55));
  transition: opacity 0.4s var(--ease), stroke 0.7s var(--ease);
}

.ring__center {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.1em;
  pointer-events: none;
}
.ring__day {
  font-size: calc(var(--ring-size, 260px) * 0.25);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-body-dark);
}
.ring__unit {
  font-family: var(--font-mono);
  font-size: calc(var(--ring-size, 260px) * 0.048);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted-dark);
}

/* ── the four lines ── */
.plist {
  display: grid;
  gap: 2px;
  width: 100%;
  max-width: 460px;
}
.plist__item {
  display: grid;
  gap: 0.15em;
  padding: 0.85em 0 0.85em 1.15em;
  border-left: 2px solid transparent;
  transition: opacity 0.7s var(--ease), border-color 0.7s var(--ease),
              transform 0.7s var(--ease);
  text-align: left;
}
.plist__name {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.plist__line {
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  color: var(--text-muted-dark);
  text-wrap: pretty;
}
.plist__item[data-phase="0"] { --pc: var(--phase-menstruation); }
.plist__item[data-phase="1"] { --pc: var(--phase-follicular); }
.plist__item[data-phase="2"] { --pc: var(--phase-ovulation); }
.plist__item[data-phase="3"] { --pc: var(--phase-luteal); }
.plist__name { color: var(--pc); }

/* enhanced state, only once JS has taken over the scroll */
.js .plist__item { opacity: 0.3; }
.js .plist__item.is-active {
  opacity: 1;
  border-left-color: var(--pc);
}

@media (min-width: 900px) {
  .phases__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "intro ring"
      "list  ring";
    justify-items: start;
    text-align: left;
    align-items: center;
    column-gap: clamp(40px, 5vw, 80px);
    row-gap: clamp(26px, 4vh, 48px);
  }
  .phases .wrap { max-width: 1030px; }
  .phases__intro { grid-area: intro; align-self: end; max-width: 520px; }
  .phases__intro .lede { margin-inline: 0; }
  .plist { grid-area: list; align-self: start; }
  .ring {
    grid-area: ring;
    align-self: center;
    justify-self: center;
    --ring-size: clamp(250px, 34vh, 340px);
  }
}

/* on small screens the four lines take turns instead of stacking */
@media (max-width: 899px) {
  .js .plist { display: grid; }
  .js .plist__item {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(10px);
    text-align: center;
    border-left: 0;
    padding-left: 0;
  }
  .js .plist__item.is-active { opacity: 1; transform: none; }
  .js .plist { min-height: 5.5em; }
}

/* ══════════════════════════════════════════════════ 4 · INSIGHTS */
.insights { padding-block: var(--section-y); }

.insights__grid {
  display: grid;
  gap: clamp(48px, 7vw, 90px);
  align-items: center;
  justify-items: center;
  text-align: center;
}

.insights__visual { position: relative; }
.insights__visual .device { --dw: clamp(228px, 27vw, 282px); }

/* the notification, floating just off the glass */
.notif {
  position: absolute;
  z-index: 2;
  top: 9%;
  left: 50%;
  translate: -50% 0;
  width: min(354px, 108%);
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 13px 15px;
  border-radius: 20px;
  background: rgba(250, 250, 252, 0.95);
  backdrop-filter: saturate(180%) blur(30px);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow:
    0 2px 8px rgba(16, 18, 24, 0.06),
    0 20px 46px -14px rgba(16, 18, 24, 0.30);
  text-align: left;
}
.notif__icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex: none;
  background: #fff;
  padding: 2px;
  box-shadow: 0 1px 3px rgba(16, 18, 24, 0.14);
}
.notif__body { min-width: 0; }
.notif__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 1px;
}
.notif__app {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-body);
}
.notif__time {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-muted);
}
.notif__text {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text-body);
  text-wrap: pretty;
}

.js-reveal .notif {
  opacity: 0;
  transform: translateY(-16px) scale(0.97);
}
.notif { transition: opacity 1s var(--ease) 0.25s, transform 1s var(--ease) 0.25s; }
.js-reveal [data-reveal].is-in .notif {
  opacity: 1;
  transform: none;
}

@media (min-width: 860px) {
  .insights__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: start;
    text-align: left;
  }
  .insights__visual { justify-self: end; }
}

/* ══════════════════════════════════════════════ 5 · PARTNER PAGE */
.partner {
  padding-block: var(--section-y);
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 70% 12%, rgba(244, 143, 177, 0.10) 0%, rgba(248, 249, 250, 0) 58%),
    radial-gradient(90% 70% at 12% 88%, rgba(240, 106, 44, 0.06) 0%, rgba(248, 249, 250, 0) 60%),
    var(--surface-warm);
}
.partner__grid {
  display: grid;
  gap: clamp(48px, 7vw, 88px);
  align-items: center;
  justify-items: center;
  text-align: center;
}
.partner__text { max-width: 480px; }
.partner__text .lede { max-width: 38ch; }
.partner__text .section__title { font-size: clamp(2rem, 4.6vw, 3.5rem); }

.partner__stage {
  position: relative;
  display: flex;
  justify-content: center;
}
.device--front { --dw: clamp(240px, 30vw, 302px); z-index: 2; }
.device--behind { display: none; }

@media (min-width: 900px) {
  .partner__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: start;
    text-align: left;
  }
  .partner__stage {
    justify-self: end;
    /* the second phone lives in this margin */
    padding-left: clamp(70px, 11vw, 160px);
  }
  .device--behind {
    display: block;
    --dw: clamp(180px, 21vw, 232px);
    position: absolute;
    left: 0;
    top: 17%;
    z-index: 1;
    opacity: 0.92;
  }
}

/* ══════════════════════════════════════════════════════ 6 · CTA */
.cta {
  background: var(--bg-primary-dark);
  color: var(--text-body-dark);
  padding-top: clamp(104px, 14vw, 172px);
  padding-bottom: 0;
  overflow: hidden;
  position: relative;
}
.cta::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  translate: -50% 0;
  width: min(1000px, 140vw);
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(100, 188, 151, 0.13) 0%,
    rgba(162, 141, 234, 0.07) 38%,
    rgba(11, 12, 16, 0) 64%);
}

.cta__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cta__title {
  font-size: clamp(2.25rem, 6.6vw, 5.25rem);
  margin-bottom: 0.4em;
}
.cta__lede { margin-bottom: 2.4em; }

.cta__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* the closing lineup dissolves into the dark instead of being cut */
.lineup {
  width: 100%;
  margin-top: clamp(56px, 8vw, 100px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(12px, 2.2vw, 26px);
  height: clamp(230px, 30vw, 360px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
}
.lineup__item--mid .device { --dw: clamp(196px, 24vw, 268px); }
.lineup__item--side { display: none; margin-top: clamp(26px, 4vw, 58px); }
.lineup__item--side .device { --dw: clamp(150px, 19vw, 214px); opacity: 0.5; }

@media (min-width: 760px) {
  .lineup__item--side { display: block; }
}

/* ────────────────────────────────────────────────────────── FOOTER */
.foot {
  background: var(--bg-primary-dark);
  color: var(--text-muted-dark);
  padding-top: clamp(24px, 4vw, 48px);
  padding-bottom: clamp(40px, 6vw, 64px);
  position: relative;
}
.foot__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.foot__logo { height: 46px; width: auto; opacity: 0.9; }
.foot__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.foot__link {
  color: var(--text-primary-dark);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
  opacity: 0.78;
  transition: opacity 0.2s var(--ease), color 0.2s var(--ease);
}
.foot__link:hover,
.foot__link:focus-visible {
  color: #fff;
  opacity: 1;
}
.foot__note {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--text-muted-dark);
  opacity: 0.7;
}

/* ────────────────────────────────────────────────── SCROLL REVEAL */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
}
[data-reveal] {
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.js-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ───────────────────────────────────────────────── REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js-reveal [data-reveal],
  .js-reveal [data-reveal].is-in,
  .js-reveal .notif {
    opacity: 1;
    transform: none;
  }

  /* the ring is shown whole, the four lines all at once */
  .phases__track { min-height: 0; }
  .phases__sticky { position: static; min-height: 0; }
  .js .plist__item { opacity: 1; }
  @media (max-width: 899px) {
    .js .plist__item {
      grid-area: auto;
      opacity: 1;
      transform: none;
    }
    .js .plist { min-height: 0; gap: 1.1em; }
  }
}