/* Pilot Planner product page.
   Built on the Coetic X design system (coetic-x.com): the same surface tokens,
   type scale, eyebrow treatment, pill controls, radius/shadow scale and reveal
   motion. The product's own accent (#55bd8c) and navy (#242b56) are the values
   the homepage already assigns to Pilot Planner, so the two surfaces agree. */

:root {
  color-scheme: light;
  --header-height: 73px;

  /* Surfaces — Coetic X */
  --deep: #0f2733;
  --deep-2: #13293c;
  --light: #f4fbfb;
  --light-alt: #e6f1f0;

  /* Product identity — as defined for Pilot Planner on the Coetic X homepage */
  --product-bg: #242b56;
  --product-bg-deep: #1a2044;
  --accent: #55bd8c;
  --accent-strong: #2f8f8a;
  --accent-soft: rgba(85, 189, 140, 0.16);

  /* Text — flipped per section by .on-light */
  --ink: #eef7f6;
  --muted: #c2d4d6;
  --ink-dark: #0d1d22;
  --muted-dark: #4e5c5f;

  --border: rgba(255, 255, 255, 0.16);
  --border-light: #d5e2e0;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --pill: 999px;

  --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  --shadow-light: 0 24px 60px rgba(15, 29, 29, 0.12);

  --shell: 1180px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  background: var(--deep);
}

body {
  margin: 0;
  -webkit-tap-highlight-color: rgba(85, 189, 140, 0.16);
  padding-top: var(--header-height);
  overflow-x: hidden;
  background: var(--deep);
  color: var(--ink-dark);
  font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

/* Focus: dark ring on light surfaces, accent ring on dark ones. */
a:focus-visible,
.screen-gallery:focus-visible {
  border-radius: var(--radius-sm);
  outline: 3px solid #146046;
  outline-offset: 4px;
}

.site-header a:focus-visible,
.hero a:focus-visible,
.editorial-band--practice a:focus-visible,
.site-footer a:focus-visible {
  outline-color: #7fe0ae;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: var(--pill);
  background: var(--light);
  color: var(--ink-dark);
  font-weight: 650;
  text-decoration: none;
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: translateY(0);
}

.shell {
  width: min(var(--shell), calc(100% - 48px));
  margin-inline: auto;
  padding-inline: max(0px, env(safe-area-inset-left) - 8px)
    max(0px, env(safe-area-inset-right) - 8px);
}

/* ---------------------------------------------------------------- typography */

h1,
h2,
h3 {
  margin: 0;
  font-family: "Avenir Next", "Segoe UI", "Trebuchet MS", sans-serif;
  line-height: 1.08;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.6rem, 4.2vw, 3.9rem);
  font-weight: 750;
  letter-spacing: -0.021em;
}

h2 {
  font-size: clamp(1.9rem, 2.9vw, 2.7rem);
  font-weight: 740;
  letter-spacing: -0.018em;
}

h3 {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.008em;
}

p {
  text-wrap: pretty;
}

/* The Coetic X eyebrow: small, light, widely tracked, muted — never shouted. */
.eyebrow {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.on-light .eyebrow {
  color: var(--accent-strong);
}

/* Availability marker, matching the homepage product card's status pill. */
.product-status {
  width: fit-content;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  margin: 0 0 22px;
  padding: 5px 12px;
  border: 1px solid rgba(85, 189, 140, 0.42);
  border-radius: var(--pill);
  background: rgba(85, 189, 140, 0.22);
  color: #f1f8f7;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------- header */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  height: var(--header-height);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(10, 24, 34, 0.62);
  color: var(--ink);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.product-brand {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.product-brand img {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-nav a {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--pill);
  color: rgba(238, 247, 246, 0.72);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

/* The homepage's underline that wipes in from the left. */
.site-nav a::after {
  position: absolute;
  right: 16px;
  bottom: 8px;
  left: 16px;
  height: 2px;
  border-radius: var(--pill);
  background: linear-gradient(90deg, rgba(85, 189, 140, 0.9), rgba(47, 143, 138, 0.3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s var(--ease);
  content: "";
}

.site-nav a:hover {
  color: var(--ink);
}

.site-nav a:hover::after {
  transform: scaleX(1);
}

.site-nav .nav-download {
  margin-left: 8px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: var(--light);
  color: var(--ink-dark);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.site-nav .nav-download::after {
  display: none;
}

.site-nav .nav-download:hover {
  background: var(--light-alt);
  color: var(--ink-dark);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: calc(100svh - var(--header-height));
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--deep);
  color: var(--ink);
}

.hero-backdrop,
.hero-overlay {
  position: absolute;
  inset: 0;
}

/* Graded cooler and deeper so the aviation plate sits inside the Coetic X
   petrol world instead of reading as a separate blue photograph. */
.hero-backdrop img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 46%;
  filter: brightness(0.74) saturate(0.86) hue-rotate(-6deg) contrast(1.04);
  transform: scale(1.04);
}

/* Layered radials over a long diagonal — the homepage's --bg-dark-gradient
   recipe, tuned to the product navy. This is what makes the field read smooth
   rather than as a flat wash over a photo. */
.hero-overlay {
  background: linear-gradient(to bottom, rgba(9, 22, 32, 0.88) 0%, rgba(9, 22, 32, 0.32) 16%,
      rgba(9, 22, 32, 0) 30%),
    radial-gradient(circle at 10% 30%, rgba(15, 39, 51, 0.82), transparent 58%),
    radial-gradient(circle at 88% 96%, rgba(26, 32, 68, 0.5), transparent 62%),
    linear-gradient(96deg, rgba(13, 33, 44, 0.93) 0%, rgba(15, 39, 51, 0.8) 32%,
      rgba(20, 44, 62, 0.42) 62%, rgba(24, 34, 66, 0.34) 100%);
}

.hero-fade {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 240px;
  background: linear-gradient(to bottom, rgba(12, 26, 38, 0) 0%, rgba(12, 26, 38, 0.55) 54%,
    rgba(13, 28, 40, 0.92) 100%);
}

.hero-layout {
  position: relative;
  z-index: 2;
  width: min(var(--shell), calc(100% - 48px));
  display: grid;
  grid-template-columns: minmax(340px, 0.92fr) minmax(420px, 1.08fr);
  align-items: center;
  gap: clamp(32px, 4.5vw, 72px);
  padding-block: 56px 104px;
}

.hero-copy {
  max-width: 520px;
}

.hero-tagline {
  max-width: 17ch;
  margin: 18px 0 0;
  color: #a9ccd0;
  font-size: clamp(1.2rem, 1.7vw, 1.55rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.008em;
  text-wrap: balance;
}

.hero-lead {
  max-width: 44ch;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 1.02rem;
}

/* ------------------------------------------------------------ store buttons */

.store-actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.store-link {
  min-width: 186px;
  min-height: 60px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
    transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.store-link:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.11);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  transform: translateY(-2px);
}

/* One filled action leads, in the homepage's primary-button colours. */
.store-link--primary {
  border-color: rgba(255, 255, 255, 0.5);
  background: var(--light);
  color: var(--ink-dark);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.store-link--primary:hover {
  border-color: rgba(255, 255, 255, 0.75);
  background: var(--light-alt);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.32);
}

.store-link img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

.store-link--primary img {
  filter: none;
}

.store-link span,
.store-link small,
.store-link strong {
  display: block;
}

.store-link small {
  white-space: nowrap;
  color: rgba(238, 247, 246, 0.6);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.1;
  text-transform: uppercase;
}

.store-link.store-link--primary small {
  color: rgba(13, 29, 34, 0.58);
}

.store-link strong {
  margin-top: 4px;
  font-size: 0.95rem;
  font-weight: 680;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.platform-note {
  margin: 14px 0 0;
  color: rgba(238, 247, 246, 0.42);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
}

/* -------------------------------------------------------------- hero stage */

/* All three screens share one 780x1688 aspect, so widths are a share of the
   stage: on a 120:100 stage, 38.5% makes the centre phone exactly as tall as
   the stage and 30.4% puts the flanking pair at 79% of that. Each is centred on
   its own percentage mark and rotated about its own centre, so the rotated
   bounding box stays symmetric and inside the stage at every size. */
.hero-devices {
  --stage-h: clamp(320px, calc(100svh - var(--header-height) - 250px), 600px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.hero-stage {
  position: relative;
  width: min(100%, calc(var(--stage-h) * 1.2));
  aspect-ratio: 120 / 100;
}

/* A soft pool of light under the cluster so it sits in the scene. */
.hero-stage::before {
  position: absolute;
  inset: 18% -6% -10%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(120, 210, 200, 0.24), rgba(85, 189, 140, 0) 100%);
  content: "";
}

.hero-device {
  position: absolute;
  bottom: 0;
  margin: 0;
  transform: var(--rest);
  transform-origin: center;
  transition: transform 0.5s var(--ease);
}

.hero-device img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.hero-device--study {
  --rest: rotate(-6deg);
  left: 3.8%;
  z-index: 1;
  width: 30.4%;
}

.hero-device--home {
  --rest: none;
  left: 30.75%;
  z-index: 3;
  width: 38.5%;
}

.hero-device--question {
  --rest: rotate(6deg);
  left: 65.8%;
  z-index: 2;
  width: 30.4%;
}

.hero-device--study,
.hero-device--question {
  bottom: 4%;
}

.hero-stage:hover .hero-device--study {
  transform: translate(-8px, -8px) rotate(-7.5deg);
}

.hero-stage:hover .hero-device--home {
  transform: translateY(-10px);
}

.hero-stage:hover .hero-device--question {
  transform: translate(8px, -8px) rotate(7.5deg);
}

.hero-next {
  position: absolute;
  bottom: 30px;
  left: 50%;
  z-index: 4;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 16px 7px 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(238, 247, 246, 0.68);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translateX(-50%);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
    background 0.2s var(--ease);
}

.hero-next:hover {
  border-color: rgba(85, 189, 140, 0.5);
  background: rgba(85, 189, 140, 0.1);
  color: var(--ink);
}

.hero-next b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(85, 189, 140, 0.18);
  color: var(--accent);
  font-size: 0.85rem;
  animation: nudge 3s ease-in-out infinite;
}

/* ----------------------------------------------------------------- sections */

.section {
  padding-block: clamp(64px, 5.2vw, 80px);
}

.on-light {
  color: var(--ink-dark);
}

/* Heading left, supporting line right and dropped to its baseline — the
   editorial split the homepage uses for its section openers. */
.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: end;
  gap: clamp(24px, 4vw, 64px);
  margin-bottom: clamp(28px, 3vw, 38px);
}

.section-heading h2 {
  max-width: 21ch;
}

.section-heading > p:last-child {
  max-width: 46ch;
  margin: 0;
  color: var(--muted-dark);
  font-size: 1rem;
}

/* ------------------------------------------------------------- study flow */

.journey-section {
  background: linear-gradient(to bottom, var(--light-alt) 0%, var(--light) 52%);
}

.journey-steps {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
  list-style: none;
  counter-reset: step;
}

.journey-steps li {
  padding-top: 26px;
  border-top: 1px solid var(--border-light);
}

.journey-steps > li > span {
  display: block;
  margin-bottom: 18px;
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
}

.journey-steps p {
  max-width: 34ch;
  margin: 12px 0 0;
  color: var(--muted-dark);
  font-size: 0.96rem;
}

/* -------------------------------------------------------- editorial bands */

.editorial-band {
  padding-block: clamp(64px, 5.2vw, 80px);
  overflow: hidden;
}

.editorial-band--home {
  background: var(--light);
}

.editorial-band--practice {
  background: radial-gradient(circle at 78% 18%, rgba(47, 143, 138, 0.26), transparent 56%),
    radial-gradient(circle at 12% 88%, rgba(85, 189, 140, 0.12), transparent 54%),
    linear-gradient(158deg, var(--product-bg-deep) 0%, var(--product-bg) 52%, #1d2447 100%);
  color: var(--ink);
}

.editorial-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.88fr) minmax(360px, 1.12fr);
  align-items: center;
  gap: clamp(44px, 6.5vw, 96px);
}

.editorial-layout--reverse {
  grid-template-columns: minmax(360px, 1.12fr) minmax(280px, 0.88fr);
}

.editorial-layout--reverse .editorial-device {
  grid-column: 2;
  grid-row: 1;
}

.editorial-layout--reverse .editorial-copy {
  grid-column: 1;
  grid-row: 1;
}

.editorial-device {
  position: relative;
  width: min(262px, 70%);
  margin: 0 auto;
}

.editorial-device::before {
  position: absolute;
  inset: -14% -32% -10%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.4) 60%, rgba(255, 255, 255, 0) 100%);
  content: "";
}

.editorial-band--practice .editorial-device::before {
  background: radial-gradient(closest-side, rgba(120, 210, 200, 0.26),
    rgba(85, 189, 140, 0.08) 58%, rgba(85, 189, 140, 0) 100%);
}

.editorial-band--practice .editorial-device img {
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 34px 76px rgba(0, 0, 0, 0.5);
}

.editorial-band--practice .feature-lines li {
  border-top-color: var(--border);
}

.editorial-band--practice .feature-lines b {
  color: var(--ink);
}

.editorial-band--practice .feature-lines span,
.editorial-band--practice .editorial-copy > p:not(.eyebrow):not(.content-note) {
  color: var(--muted);
}

.editorial-band--practice .content-note {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(238, 247, 246, 0.62);
}

.editorial-device img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: 0 34px 70px rgba(15, 39, 51, 0.2), 0 4px 14px rgba(15, 39, 51, 0.08);
}

.editorial-copy {
  max-width: 520px;
}

.editorial-copy h2 {
  max-width: 17ch;
}

.editorial-copy > p:not(.eyebrow):not(.content-note) {
  max-width: 46ch;
  margin: 22px 0 0;
  color: var(--muted-dark);
  font-size: 1rem;
}

.feature-lines {
  max-width: 460px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.feature-lines li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 20px;
  padding: 15px 0;
  border-top: 1px solid var(--border-light);
}

.feature-lines b {
  color: var(--ink-dark);
  font-size: 0.95rem;
  font-weight: 680;
}

.feature-lines span {
  color: var(--muted-dark);
  font-size: 0.88rem;
  text-align: right;
}

.content-note {
  max-width: 44ch;
  margin: 32px 0 0;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: rgba(47, 143, 138, 0.07);
  color: var(--muted-dark);
  font-size: 0.82rem;
  line-height: 1.55;
}

/* ------------------------------------------------------------------ screens */

.screens-section {
  overflow: hidden;
  background: linear-gradient(to bottom, var(--light) 0%, var(--light-alt) 100%);
  color: var(--ink-dark);
}

.screens-hint {
  display: none;
}

.screen-gallery {
  margin: 0;
  padding: 0;
  width: min(760px, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: clamp(16px, 2vw, 26px);
  list-style: none;
}

.screen-item {
  transition: transform 0.4s var(--ease);
}

.screen-item:first-child,
.screen-item:last-child {
  margin-top: 20px;
}

.screen-item figure {
  margin: 0;
}

.screen-item:hover {
  transform: translateY(-10px);
}

.screen-item:first-child:hover,
.screen-item:last-child:hover {
  transform: translateY(-8px);
}

.screen-item img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(15, 39, 51, 0.1);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 64px rgba(15, 39, 51, 0.18), 0 4px 14px rgba(15, 39, 51, 0.08);
}

.screen-item figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 13px;
  color: var(--muted-dark);
  font-size: 0.76rem;
}

.screen-item figcaption b {
  color: var(--ink-dark);
  font-weight: 680;
}

/* ----------------------------------------------------------------- download */

.site-footer {
  background: var(--deep);
  color: var(--ink);
}

.download-section {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.download-backdrop,
.download-overlay {
  position: absolute;
  inset: 0;
}

.download-backdrop img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 58%;
  filter: brightness(0.56) saturate(0.8) hue-rotate(-6deg);
}

.download-overlay {
  background: radial-gradient(circle at 50% 8%, rgba(29, 36, 71, 0.85), transparent 58%),
    radial-gradient(circle at 20% 88%, rgba(47, 143, 138, 0.22), transparent 56%),
    linear-gradient(to bottom, rgba(29, 36, 71, 0.9) 0%, rgba(13, 28, 40, 0.66) 42%,
      rgba(12, 25, 36, 0.94) 100%);
}

.download-content {
  position: relative;
  z-index: 2;
  padding-block: clamp(88px, 9vw, 124px);
  text-align: center;
}

.download-mark {
  width: 60px;
  height: 60px;
  margin-bottom: 26px;
  border-radius: var(--radius-md);
}

.download-content h2 {
  max-width: 15ch;
  margin-inline: auto;
}

.download-content > p:not(.eyebrow) {
  max-width: 42ch;
  margin: 20px auto 0;
  color: var(--muted);
}

.store-actions--footer {
  justify-content: center;
  margin-top: 38px;
}

.footer-bottom {
  min-height: 108px;
  padding-bottom: env(safe-area-inset-bottom);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px 36px;
  padding-block: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-identity {
  display: grid;
  gap: 5px;
}

.footer-brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.footer-attribution {
  margin: 0;
  color: rgba(238, 247, 246, 0.44);
  font-size: 0.75rem;
}

.footer-attribution a {
  display: inline-block;
  padding-block: 6px;
  color: rgba(238, 247, 246, 0.72);
  text-decoration: underline;
  text-decoration-color: rgba(238, 247, 246, 0.24);
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}

.footer-attribution a:hover {
  color: var(--ink);
  text-decoration-color: rgba(238, 247, 246, 0.7);
}

.footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
}

.footer-bottom nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: 12px;
  border-radius: var(--pill);
  color: rgba(238, 247, 246, 0.6);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.footer-bottom nav a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}

.footer-copyright {
  justify-self: end;
  margin: 0;
  color: rgba(238, 247, 246, 0.38);
  font-size: 0.75rem;
}

/* ------------------------------------------------------------------ motion */

/* Fade and lift on entry, with reusable stagger classes. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--delay, 0s);
}

.delay-08 { --delay: 0.08s; }
.delay-10 { --delay: 0.1s; }
.delay-12 { --delay: 0.12s; }
.delay-16 { --delay: 0.16s; }

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Without JS nothing may stay hidden. */
.no-js .reveal {
  opacity: 1;
  transform: none;
}

@keyframes nudge {
  0%,
  74%,
  100% {
    transform: translateY(0);
  }
  86% {
    transform: translateY(3px);
  }
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1020px) {
  .hero-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-block: 56px 108px;
  }

  .hero-copy {
    max-width: 640px;
  }

  .hero-devices {
    --stage-h: min(420px, 52svh);
  }

  .section-heading {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 18px;
  }

  .journey-steps {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .journey-steps li {
    padding-block: 24px;
  }

  .journey-steps li:last-child {
    border-bottom: 1px solid var(--border-light);
  }

  .journey-steps > li > span {
    margin-bottom: 12px;
  }

  .journey-steps p {
    max-width: 52ch;
  }

  .editorial-layout,
  .editorial-layout--reverse {
    gap: clamp(36px, 5vw, 64px);
  }
}

@media (max-width: 760px) {
  :root {
    --header-height: 64px;
    --radius-lg: 22px;
    --radius-md: 14px;
  }

  body {
    font-size: 16px;
  }

  .shell,
  .hero-layout {
    width: min(100% - 32px, var(--shell));
  }

  .product-brand img {
    width: 30px;
    height: 30px;
  }

  .product-brand span {
    font-size: 0.9rem;
  }

  .site-nav {
    gap: 0;
  }

  .site-nav a {
    padding-inline: 10px;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
  }

  .site-nav .nav-journey {
    display: none;
  }

  h1 {
    font-size: clamp(2.1rem, 9.4vw, 2.6rem);
    font-weight: 720;
  }

  h2 {
    font-size: clamp(1.6rem, 6.2vw, 2rem);
    font-weight: 720;
  }

  h3 {
    font-size: 1.05rem;
  }

  .hero-layout {
    gap: 30px;
    padding-block: 34px 84px;
  }

  .product-status {
    margin-bottom: 18px;
  }

  .hero-tagline {
    max-width: 24ch;
    margin-top: 12px;
    font-size: 1.08rem;
  }

  .hero-lead {
    margin-top: 14px;
    font-size: 0.92rem;
  }

  .store-actions {
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .store-actions {
    margin-top: 22px;
    gap: 9px;
  }

  .store-link {
    min-width: 0;
    min-height: 50px;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 13px;
    border-radius: 12px;
  }

  .store-link img {
    width: 20px;
    height: 20px;
  }

  .store-link small {
    font-size: 0.64rem;
  }

  .store-link strong {
    font-size: 0.86rem;
  }

  .product-status {
    min-height: 26px;
    margin-bottom: 16px;
    padding: 4px 11px;
    font-size: 0.66rem;
  }

  .hero-next {
    font-size: 0.74rem;
  }

  .hero-devices {
    --stage-h: clamp(230px, 38svh, 320px);
  }

  .hero-next {
    bottom: 16px;
    gap: 9px;
    padding: 6px 15px 6px 6px;
    font-size: 0.68rem;
  }

  .hero-next b {
    width: 27px;
    height: 27px;
  }

  .hero-fade {
    height: 170px;
  }

  .section,
  .editorial-band {
    padding-block: 60px;
  }

  .section-heading {
    margin-bottom: 24px;
  }

  .editorial-layout,
  .editorial-layout--reverse {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .editorial-layout--reverse .editorial-device,
  .editorial-layout--reverse .editorial-copy {
    grid-column: 1;
  }

  .editorial-layout--reverse .editorial-device {
    grid-row: 2;
  }

  .editorial-layout--reverse .editorial-copy {
    grid-row: 1;
  }

  .editorial-device {
    width: min(236px, 68%);
  }

  .feature-lines li {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .feature-lines span {
    text-align: left;
  }

  .screens-hint {
    display: block;
    margin-top: 10px;
    font-size: 0.76rem;
    color: var(--accent-strong);
    font-size: 0.78rem;
  }

  /* Bleeds to the viewport edge so the next card is visibly cut off — that peek
     is the affordance, since the scrollbar is hidden. */
  .screen-scroller {
    width: calc(100% + 32px);
    margin-inline: -16px;
  }

  .screen-gallery {
    padding: 14px 16px 10px;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(54vw, 220px);
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
  }

  .screen-gallery::-webkit-scrollbar {
    display: none;
  }

  .screen-item,
  .screen-item:first-child,
  .screen-item:last-child,
  .screen-item:hover,
  .screen-item:first-child:hover,
  .screen-item:last-child:hover {
    margin-top: 0;
    transform: none;
  }

  .screen-item {
    scroll-snap-align: start;
  }

  .screen-item figcaption {
    display: grid;
    gap: 2px;
    margin-top: 14px;
  }

  .footer-bottom {
    padding-block: 34px;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .footer-identity {
    gap: 0;
    justify-items: center;
  }

  .footer-copyright {
    justify-self: center;
  }
}

@media (max-width: 480px) {
  .store-link {
    grid-template-columns: 20px auto;
    justify-content: center;
    gap: 10px;
  }

  .store-link small {
    display: none;
  }

  .store-link strong {
    margin-top: 0;
    font-size: 0.88rem;
  }
}

@media (max-width: 359px) {
  .store-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .store-link {
    min-height: 60px;
    justify-content: center;
  }
}

@media (max-width: 360px) {
  .site-nav a[href="#screens"] {
    display: none;
  }

  h1 {
    font-size: 2.25rem;
  }

  .hero-layout {
    gap: 24px;
    padding-block: 26px 98px;
  }

  .hero-tagline {
    font-size: 1.02rem;
  }

  .hero-lead {
    font-size: 0.9rem;
  }

  .hero-devices {
    --stage-h: clamp(195px, 32svh, 240px);
  }
}

/* Laptops around 720px tall cannot hold a heading plus three portrait plates
   at full size, so the row steps down instead of spilling past the fold. */
@media (min-width: 761px) and (max-height: 820px) {
  .section,
  .editorial-band {
    padding-block: 54px;
  }

  .section-heading {
    margin-bottom: 26px;
  }

  .screen-gallery {
    width: min(580px, 100%);
  }

  .editorial-device {
    width: min(226px, 64%);
  }
}

/* Phones held sideways have roughly 320px of usable height. The stacked layout
   would bury the CTA, so copy and stage sit side by side and the whole block
   compresses hard to keep the download buttons in the first screen. */
@media (max-height: 560px) and (min-width: 560px) and (orientation: landscape) {
  .hero-layout {
    grid-template-columns: minmax(280px, 1.05fr) minmax(240px, 0.95fr);
    align-items: center;
    gap: 28px;
    padding-block: 18px 58px;
  }

  .hero-copy {
    max-width: none;
  }

  .hero-devices {
    --stage-h: clamp(170px, 58svh, 280px);
  }

  .product-status {
    min-height: 26px;
    margin-bottom: 10px;
    padding: 4px 10px;
    font-size: 0.64rem;
  }

  .eyebrow {
    margin-bottom: 8px;
    font-size: 0.66rem;
  }

  h1 {
    font-size: clamp(1.9rem, 4.2vw, 2.5rem);
  }

  .hero-tagline {
    max-width: 30ch;
    margin-top: 8px;
    font-size: 1rem;
  }

  .hero-lead {
    max-width: 52ch;
    margin-top: 9px;
    font-size: 0.85rem;
    line-height: 1.5;
  }

  .store-actions {
    margin-top: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .store-link {
    min-height: 50px;
    padding-inline: 13px;
  }

  .platform-note {
    margin-top: 8px;
  }

  .hero-next {
    bottom: 10px;
  }
}

/* Older phones in landscape leave ~256px of usable height. Reclaim what the
   chrome takes and compress the type another step so the CTA still lands in
   the first screen. */
@media (max-height: 420px) and (min-width: 560px) and (orientation: landscape) {
  :root {
    --header-height: 54px;
  }

  .hero-layout {
    padding-block: 12px 46px;
  }

  h1 {
    font-size: 1.7rem;
  }

  .hero-tagline {
    margin-top: 6px;
    font-size: 0.94rem;
  }

  .hero-lead {
    margin-top: 7px;
    font-size: 0.8rem;
    line-height: 1.45;
  }

  .store-actions {
    margin-top: 11px;
  }

  .store-link {
    min-height: 46px;
  }

  .store-link strong {
    font-size: 0.8rem;
  }

  .platform-note {
    margin-top: 6px;
    font-size: 0.68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Content must still arrive, just without the travel. */
  .reveal {
    opacity: 1;
    transform: none;
  }

  /* The staged tilt is presentation, not motion, so it stays; each element
     falls back to its own resting transform. */
  .hero-stage:hover .hero-device,
  .screen-item:hover {
    transform: var(--rest, none) !important;
  }

  .store-link:hover,
  .site-nav .nav-download:hover {
    transform: none;
  }

  .site-nav a::after {
    display: none;
  }

  .hero-next b {
    animation: none;
  }
}

/* ==========================================================================
   Legal and support pages (privacy, terms, account deletion, support).
   Same tokens and rhythm as the product page: dark masthead, light article.
   ========================================================================== */

.legal-header {
  position: relative;
  padding-block: clamp(48px, 6vw, 76px) clamp(40px, 5vw, 60px);
  background: radial-gradient(circle at 12% 20%, rgba(47, 143, 138, 0.3), transparent 56%),
    radial-gradient(circle at 88% 90%, rgba(36, 43, 86, 0.55), transparent 58%),
    linear-gradient(158deg, var(--deep) 0%, var(--deep-2) 48%, var(--product-bg-deep) 100%);
  color: var(--ink);
}

.back-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.back-link:hover {
  color: var(--ink);
}

.legal-header h1 {
  max-width: 18ch;
  font-size: clamp(2.1rem, 3.6vw, 3rem);
}

.updated {
  margin: 16px 0 0;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.legal-intro {
  max-width: 58ch;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1rem;
}

.legal-main {
  padding-block: clamp(48px, 5.4vw, 76px) clamp(64px, 7vw, 96px);
  background: linear-gradient(to bottom, var(--light) 0%, var(--light-alt) 100%);
  color: var(--ink-dark);
}

.legal-body {
  width: min(760px, calc(100% - 48px));
  margin-inline: auto;
}

/* Plain-language précis before the clauses. */
.summary {
  display: block;
  margin-bottom: clamp(36px, 4vw, 52px);
  padding: 22px 24px;
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: rgba(47, 143, 138, 0.08);
  color: var(--muted-dark);
  font-size: 0.95rem;
}

.summary strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink-dark);
  font-size: 1rem;
}

.legal-section {
  margin-top: clamp(30px, 3.4vw, 44px);
}

.legal-section:first-of-type {
  margin-top: 0;
}

.legal-section h2 {
  margin-bottom: 14px;
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  font-weight: 720;
  letter-spacing: -0.008em;
}

.legal-section h3 {
  margin-top: 22px;
  margin-bottom: 8px;
  font-size: 1rem;
}

.legal-section p,
.legal-section li {
  color: var(--muted-dark);
  font-size: 0.97rem;
}

.legal-section p {
  margin: 0 0 14px;
}

.legal-section p:last-child {
  margin-bottom: 0;
}

.legal-section ul,
.legal-section ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

.legal-section li {
  margin-bottom: 7px;
}

.legal-section a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-decoration-color: rgba(47, 143, 138, 0.4);
  text-underline-offset: 3px;
}

.legal-section a:hover {
  text-decoration-color: var(--accent-strong);
}

/* Data table used by the privacy policy */
.data-table {
  width: 100%;
  margin: 0 0 14px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.data-table th,
.data-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border-light);
  color: var(--muted-dark);
  text-align: left;
  vertical-align: top;
}

.data-table th {
  color: var(--ink-dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.table-scroll {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

/* Numbered instructions on the deletion page */
.steps {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  counter-reset: deletion-step;
}

.steps li {
  position: relative;
  margin-bottom: 14px;
  padding-left: 42px;
  counter-increment: deletion-step;
}

.steps li::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 750;
  content: counter(deletion-step);
}

.contact-card {
  margin-top: clamp(36px, 4vw, 52px);
  padding: 26px 28px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--white);
}

.contact-card h2 {
  margin-bottom: 10px;
  font-size: 1.15rem;
  font-weight: 720;
}

.contact-card p {
  margin: 0 0 12px;
  color: var(--muted-dark);
  font-size: 0.97rem;
}

.contact-card p:last-child {
  margin-bottom: 0;
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(36px, 4vw, 52px);
  padding-top: 26px;
  border-top: 1px solid var(--border-light);
}

.legal-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--border-light);
  border-radius: var(--pill);
  background: var(--white);
  color: var(--ink-dark);
  font-size: 0.82rem;
  font-weight: 620;
  text-decoration: none;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.legal-links a:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

@media (max-width: 760px) {
  .legal-body {
    width: min(100% - 32px, 760px);
  }

  .legal-header h1 {
    font-size: clamp(1.8rem, 8vw, 2.3rem);
  }

  .summary,
  .contact-card {
    padding: 18px 20px;
  }

  .legal-section p,
  .legal-section li {
    font-size: 0.94rem;
  }
}

/* The legal header carries four routes; narrow phones keep only the two the
   stores link to directly. Every route stays reachable from the body links and
   the footer. */
@media (max-width: 560px) {
  .site-nav .nav-delete {
    display: none;
  }
}

@media (max-width: 430px) {
  .site-nav .nav-terms {
    display: none;
  }
}

/* Inline links inside the summary callout sit in running text. */
.summary a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-decoration-color: rgba(47, 143, 138, 0.4);
  text-underline-offset: 3px;
}