section { position: relative; }

/* ---------- Hero ---------- */
.hero {
  padding-top: clamp(3rem, 6vw, 6rem);
  padding-bottom: var(--space-7);
  text-align: center;
}

.hero__eyebrow-free {
  display: inline-block;
  font-size: var(--text-small);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-3);
}

.hero__headline {
  font-size: var(--text-hero);
  max-width: 15ch;
  margin-inline: auto;
}

.hero__sub {
  margin: var(--space-3) auto 0;
  max-width: 34ch;
  font-size: var(--text-body-lg);
  color: var(--color-ink-soft);
}

.hero__actions {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.hero__hint {
  font-size: var(--text-tiny);
  color: var(--color-ink-faint);
}

.hero__visual {
  margin-top: var(--space-7);
  position: relative;
}

.hero__visual::before {
  content: "";
  position: absolute;
  inset: -10% 10% auto 10%;
  height: 70%;
  background: radial-gradient(closest-side, var(--color-accent-soft), transparent 72%);
  opacity: 0.55;
  filter: blur(2px);
  z-index: -1;
}

.hero__cards {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 1.4rem;
  display: grid;
  align-content: flex-start;
  gap: 0.65rem;
}

/* ---------- Story rows (two-column alternating sections) ---------- */
.story {
  padding-block: var(--space-8);
  border-top: 1px solid var(--color-line);
}

.story--alt { background: var(--color-bg-alt); }

.story__grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 900px) {
  .story__grid { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
  .story__grid--reverse .story__text { order: 2; }
  .story__grid--reverse .story__visual { order: 1; }
}

.story__text { max-width: 42ch; }

.story__grid { text-align: center; }
.story__text { margin-inline: auto; }

@media (min-width: 900px) {
  .story__grid { text-align: left; }
  .story__text { margin-inline: 0; }
}

.story__heading { font-size: var(--text-h1); }

.story__copy {
  margin-top: var(--space-3);
  font-size: var(--text-body-lg);
  color: var(--color-ink-soft);
}

.story__visual { position: relative; }

.story__steps {
  margin-top: var(--space-4);
  display: grid;
  gap: 0.85rem;
}

.story__step {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: var(--text-small);
  color: var(--color-ink-soft);
  justify-content: center;
}

@media (min-width: 900px) { .story__step { justify-content: flex-start; } }

.story__step-index {
  color: var(--color-accent);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* ---------- Free / checklist section ---------- */
.free {
  padding-block: var(--space-8);
  border-top: 1px solid var(--color-line);
  text-align: center;
}

.free__heading { font-size: var(--text-h1); }

.free__copy {
  margin: var(--space-3) auto 0;
  max-width: 40ch;
  font-size: var(--text-body-lg);
  color: var(--color-ink-soft);
}

.free__list {
  margin: var(--space-6) auto 0;
  max-width: 30rem;
  text-align: left;
}

/* ---------- Dark sections (privacy, offline, icloud, watch, formats) ---------- */
.dark-section {
  background: var(--color-dark-bg);
  color: var(--color-dark-ink);
  padding-block: var(--space-8);
}

.dark-section .story__copy { color: var(--color-dark-ink-soft); }
.dark-section .story__step { color: var(--color-dark-ink-soft); }
.dark-section { border-top: 1px solid var(--color-line-dark); }

.dark-section.story--flush { padding-top: var(--space-7); }

.trait-grid {
  margin-top: var(--space-4);
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 640px) { .trait-grid { grid-template-columns: 1fr 1fr; } }

.trait {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: var(--text-small);
  color: var(--color-dark-ink-soft);
  justify-content: center;
}

@media (min-width: 900px) { .trait { justify-content: flex-start; } }

.trait::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* ---------- Watch section: combined composition ---------- */
.watch-composition {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1rem, 4vw, 2.5rem);
}

.watch-composition .device-phone { max-width: 220px; }
.watch-composition .device-watch { max-width: 118px; margin-bottom: 1.5rem; }

/* ---------- Formats section ---------- */
.formats__copy { max-width: 40ch; margin-inline: auto; text-align: center; }
.formats .pill-row { justify-content: center; margin-top: var(--space-4); }

/* ---------- Final CTA ---------- */
.final-cta {
  padding-block: var(--space-8);
  text-align: center;
  border-top: 1px solid var(--color-line);
}

.final-cta__headline { font-size: var(--text-h1); max-width: 18ch; margin-inline: auto; }

.final-cta__sub {
  margin: var(--space-2) auto 0;
  max-width: 34ch;
  font-size: var(--text-body-lg);
  color: var(--color-ink-soft);
}

.final-cta__actions { margin-top: var(--space-4); }
.final-cta__hint { margin-top: var(--space-2); font-size: var(--text-tiny); color: var(--color-ink-faint); }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--color-line);
  padding-block: var(--space-5);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .footer__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

.footer__brand { font-weight: 650; }
.footer__tagline { font-size: var(--text-small); color: var(--color-ink-faint); margin-top: 0.2rem; }

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-small);
  color: var(--color-ink-soft);
}

.footer__links a:hover { color: var(--color-accent); }

.footer__meta {
  margin-top: var(--space-3);
  font-size: var(--text-tiny);
  color: var(--color-ink-faint);
}

/* ---------- Sequence (two-screen before/after, e.g. Import) ---------- */
.sequence {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 3vw, 2rem);
  flex-wrap: wrap;
}

.sequence__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.sequence__step .device-phone { max-width: 220px; }

.sequence__caption {
  font-size: var(--text-small);
  color: var(--color-ink-soft);
}

.sequence__arrow {
  color: var(--color-ink-faint);
  flex-shrink: 0;
}

.sequence__arrow svg { width: 22px; height: 22px; }

@media (max-width: 640px) {
  .sequence__arrow { transform: rotate(90deg); }
}

/* ---------- Flow strip (lightweight, no device mockup — e.g. Share) ---------- */
.flow-strip {
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-line);
  text-align: center;
}

.flow-strip__heading { font-size: var(--text-h2); }

.flow-strip__copy {
  margin: var(--space-2) auto 0;
  max-width: 36ch;
  font-size: var(--text-body);
  color: var(--color-ink-soft);
}

.flow-strip__icons {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.flow-strip__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-bg-alt);
  color: var(--color-ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow-strip__icon svg { width: 20px; height: 20px; }

.flow-strip__connector {
  color: var(--color-ink-faint);
}

.flow-strip__connector svg { width: 16px; height: 16px; }

/* ---------- Document page (privacy policy) ---------- */
.doc {
  padding-block: var(--space-7);
}

.doc__container {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.doc__title { font-size: var(--text-h1); }

.doc__updated {
  margin-top: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-ink-faint);
}

.doc__body {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-4);
}

.doc__body h2 {
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
}

.doc__body p, .doc__body li {
  color: var(--color-ink-soft);
  font-size: var(--text-body-lg);
}

.doc__body ul { display: grid; gap: 0.4rem; padding-left: 1.1rem; list-style: disc; }

.doc__body a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }