/* Reset */

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

body,
h1,
h2,
h3,
p,
ol,
ul,
figure {
  margin: 0;
}

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

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* The root background also fills the overscroll area */
html {
  background-color: var(--color-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Base typography */

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
}

/* The footer always sits on the bottom edge: main takes up any leftover height */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

main {
  flex-grow: 1;
  width: 100%;
}

h1,
h2,
h3 {
  color: var(--color-heading);
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

h1 {
  font-size: var(--size-h1);
}

h2 {
  font-size: var(--size-h2);
}

h3 {
  font-size: var(--size-h3);
}

a {
  color: var(--color-text);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-thickness 150ms ease-out;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--color-heading);
  outline-offset: 3px;
}

/* The only body variation: footer column headings, "Coming soon:" and bold in legal text */
.emphasis,
strong {
  color: var(--color-heading);
  font-weight: 600;
}

/* Anchor targets clear the sticky header */
[id] {
  scroll-margin-top: var(--header-height);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/* Layout helpers */

.container {
  max-width: calc(var(--width-page) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.measure {
  max-width: var(--width-text);
}

.section {
  margin-block: var(--space-6);
}

@media (min-width: 48rem) {
  .section {
    margin-block: var(--space-7);
  }
}

.centered {
  max-width: var(--width-text);
  margin-inline: auto;
  text-align: center;
}

/* Media slots: the box keeps its aspect ratio even if a replacement image is slightly off-size */
.media {
  overflow: hidden;
}

.media img,
.media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.skip-link {
  position: absolute;
  top: var(--space-1);
  left: var(--space-1);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding-inline: var(--space-2);
  background: var(--color-bg);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap-target);
  text-decoration: none;
}

.brand__icon {
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 22.37%;
}

.brand__name {
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--size-h3);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-heading);
}

/* App Store badge: 40px in the header, 56px in hero and final CTA */

.app-store-badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  text-decoration: none;
  transition: transform 150ms ease-out;
}

.app-store-badge:hover {
  transform: translateY(-1px);
}

.app-store-badge img {
  width: auto;
  height: var(--badge-small);
}

.badge-large img {
  height: var(--badge-large);
}

/* Large badge with the pricing line beside it; the line wraps below when there's no room */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}

/* Hero */

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

@media (min-width: 48rem) {
  .hero {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }
}

.hero__text > * + * {
  margin-top: var(--space-3);
}

.hero__media {
  container-type: inline-size;
}

/* Frameless iPhone screen lifted by a shadow: the video keeps the device's aspect ratio, capped by --device-max-height and 80% of the viewport height */
.device {
  width: round(down, min(100cqi, var(--device-max-height) * 736 / 1600, 80svh * 736 / 1600), 1px);
  margin-inline: auto;
  transform: rotate(3deg);
}

/* cover, not the default contain: the video fills the screen without letterboxing */
.device video {
  width: 100%;
  aspect-ratio: 736 / 1600;
  object-fit: cover;
  box-shadow: var(--shadow-screen);
}

/* Section titles (How it works, Features, FAQ) */

.section__title {
  margin-bottom: var(--space-4);
}

/* Interlude */

.interlude h2 {
  text-wrap: balance;
}

.interlude__media {
  aspect-ratio: 1720 / 1120;
  margin-top: var(--space-4);
}

/* How it works */

.steps {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 48rem) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

/* The screenshots are the content: full column width, lifted like the hero screen */
.step__media {
  width: 100%;
  height: auto;
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-screen);
}

.step h3 {
  margin-bottom: var(--space-1);
}

/* Features */

.features {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 48rem) {
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* White prints: the feature cards are the page's only boxes */
.card {
  padding: var(--space-4);
  background: var(--color-card);
  box-shadow: var(--shadow-card);
}

/* Staggered like loose photo prints: a slight tilt and offset per card */
.feature {
  transform: translate(var(--shift-x, 0), var(--shift-y, 0)) rotate(var(--tilt, 0deg));
}

.feature:nth-child(1) { --tilt: -0.75deg; --shift-x: -2px; }
.feature:nth-child(2) { --tilt: 0.75deg;  --shift-x: 2px; }
.feature:nth-child(3) { --tilt: -0.5deg;  --shift-x: 2px; }
.feature:nth-child(4) { --tilt: 0.75deg;  --shift-x: -2px; }

@media (min-width: 48rem) {
  .feature:nth-child(1) { --tilt: -1.5deg; --shift-x: -6px; --shift-y: 4px; }
  .feature:nth-child(2) { --tilt: 1deg;    --shift-x: 6px;  --shift-y: 16px; }
  .feature:nth-child(3) { --tilt: 1.25deg; --shift-x: 4px;  --shift-y: -4px; }
  .feature:nth-child(4) { --tilt: -1deg;   --shift-x: -4px; --shift-y: 10px; }
}

.feature__media {
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-3);
}

.feature h3 {
  margin-bottom: var(--space-1);
}

.features__soon {
  margin-top: var(--space-4);
}

/* Privacy: centered, as wide as the FAQ */

.privacy {
  max-width: var(--width-text);
  margin-inline: auto;
  text-align: center;
}

/* Equal-width lines at any viewport, without manual breaks */
.privacy p {
  text-wrap: balance;
}

.privacy > * + * {
  margin-top: var(--space-2);
}

/* FAQ: native details separated by hairlines; the summary reads as H3, with a "+" that turns into "−" */

.faq {
  max-width: var(--width-text);
  margin-inline: auto;
}

.faq details + details {
  border-top: 1px solid var(--color-divider);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--tap-target);
  padding-block: var(--space-3);
  list-style: none;
  cursor: pointer;
}

/* The title's margin already separates it from the first question */
.faq details:first-child summary {
  padding-top: 0;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--size-h3);
}

.faq details[open] summary::after {
  content: "−";
}

.faq details p {
  padding-bottom: var(--space-3);
}

/* Final CTA */

.final-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.final-cta .cta-row {
  justify-content: center;
}

/* Footer */

/* Bottom padding matches the gap above the copyright row */
.site-footer {
  padding-block: var(--space-5) var(--space-4);
  background: var(--color-surface);
}

.site-footer__columns {
  display: grid;
  gap: var(--space-4) var(--space-3);
}

/* Spans the page width, outer columns flush with the content edges */
@media (min-width: 48rem) {
  .site-footer__columns {
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
  }
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  overflow-wrap: anywhere;
}

/* With a mouse the links don't need 44px rows */
@media (pointer: fine) {
  .site-footer__links {
    margin-top: var(--space-1);
  }

  .site-footer__links li + li {
    margin-top: var(--space-1);
  }

  .site-footer__links a {
    min-height: 0;
  }
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 var(--space-3);
  margin-top: var(--space-4);
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap-target);
  text-decoration: none;
}

/* Legal pages (and the support page): one text column */

.prose {
  max-width: var(--width-text);
  margin-inline: auto;
  padding-block: var(--space-5);
}

.prose > * + * {
  margin-top: var(--space-2);
}

.prose h2 {
  margin-top: var(--space-4);
}

.prose ul {
  padding-left: var(--space-3);
  list-style: disc;
}

.prose li + li {
  margin-top: var(--space-1);
}

/* 404: centered in the space above the footer */

.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-block: var(--space-5);
  text-align: center;
}