/* The landing page only. Shared chrome lives in style.css. */

.serif {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
}

.serif {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.01em;
  /* Let the browser drive the optical-size axis from the rendered size, which
     is what Figma does and why the headline and the wordmark differ. */
  font-optical-sizing: auto;
}

/* The hero mirrors the App Store screenshot: the two lines of the headline
   carry different weights and sizes, and "Move more." is the instruction, so it
   is the one that shouts.
   Centred on a phone, side by side from 860px up, where a single centred column
   leaves the screenshot stranded a long way below the fold. */
.hero { padding: 64px 0 72px; text-align: center; }
h1 { margin: 0; }
/* The rotated line reaches a few pixels wider and taller than its box. Room to
   lean, without a scrollbar. */
.hero-text { overflow: visible; }
body { overflow-x: hidden; }
/* Both lines carry the same -4deg as the Figma frame, each rotated about its
   own centre rather than the block as a whole, which is how the two text nodes
   are set up there. */
.h1-a {
  display: block;
  font-size: clamp(40px, 10.5vw, 62px);
  line-height: 1;
  font-weight: 400;
  transform: rotate(-4deg);
  transform-origin: 50% 50%;
}
/* Rotation does not change the layout box, so the margins here buy back the
   vertical room the tilt occupies and stop it colliding with the sub-line. */
.h1-b {
  display: block;
  font-size: clamp(52px, 14.5vw, 96px);
  line-height: 0.94;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 10px;
  margin-bottom: 18px;
  transform: rotate(-4deg);
  transform-origin: 50% 50%;
}
.lede {
  margin: 26px auto 0;
  font-size: 19px;
  line-height: 1.5;
  color: var(--secondary);
  max-width: 24em;
}
.lede b { color: var(--ink); font-weight: 700; }
/* Extra breathing room under two tilted lines, whose lower corners reach
   further down than their boxes admit. */
.lede-offset { margin-top: 34px; }

/* Device frame in CSS rather than baked into the image: the bezel stays sharp
   at any size, the file is a tenth of the weight, and the corners do not carry
   a background colour that would be wrong in dark mode. */
.device {
  width: min(248px, 62vw);
  margin: 48px auto 0;
  padding: 5px;
  background: #0E0E0E;
  border-radius: 34px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}
/* height:auto is load-bearing. The width/height attributes are there so the
   browser reserves the right space before the image decodes, but without
   height:auto the 1374 is taken as a literal CSS height and the screenshot is
   stretched to more than twice its proper ratio. */
.device img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 622 / 1374;
  border-radius: 29px;
}

.cta { margin-top: 40px; }
.button {
  /* inline-flex so the mark and the label share a gap and a centre line, rather
     than depending on a space character between them. */
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 16px 28px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
}
/* An explicit fill, and an explicit label colour.
   The label needs restating because style.css sets a:hover to the accent, which
   is more specific than .button and was repainting the text red. That accent is
   also the app's destructive colour, so the primary action turned into a
   warning on hover. */
.button:hover {
  background: var(--ink-hover);
  color: var(--paper);
}
/* Sized against the label's cap height rather than the font size, so it reads
   as part of the phrase rather than a picture placed next to it. */
.button-mark { width: 17px; height: 17px; flex: none; margin-top: -2px; }

/* The French label runs 40% longer than the English one, and the mark costs it
   another 28px. Below this width the phrase breaks in two, so tighten the sides
   instead. Wrapping is still the fallback for a longer language later. */
@media (max-width: 400px) {
  .button { padding-left: 20px; padding-right: 20px; }
}

.cta-note { margin: 14px 0 0; font-size: 14px; color: var(--muted); }

section { padding: 72px 0; }
h2 {
  margin: 0 0 34px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: 'Inter Tight', sans-serif;
  font-style: normal;
}

/* Numbered steps. The numeral carries the serif, as it does on every screen in
   the app where a count is the point. */
.step { display: flex; gap: 22px; padding: 18px 0; }
.step + .step { border-top: 1px solid var(--hairline); }
.step-n { font-size: 30px; line-height: 1.1; min-width: 42px; color: var(--ink); }
.step-body { flex: 1; }
.step-title { margin: 0 0 4px; font-size: 17px; font-weight: 500; }
.step-text { margin: 0; color: var(--secondary); font-size: 16px; }

.icon {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 0 22px;
  color: var(--ink);
  /* Stroke weight is scaled down as the icon grows, so a 44px icon reads as
     thin as the 26px one did rather than turning into a heavy glyph. */
  stroke-width: 1;
}

.quiet { color: var(--secondary); margin: 0; }
.quiet + .quiet { margin-top: 16px; }

@media (min-width: 860px) {
    
  .hero {
    display: flex;
    align-items: center;
    gap: 64px;
    text-align: left;
    padding: 72px 0 88px;
  }
  .hero-text { flex: 1; min-width: 0; }
  /* Sized so each line stays unbroken in the narrower two-column layout.
     "Move more." breaking across two lines loses the shape of the Figma frame,
     and nowrap makes that a guarantee rather than a hope. */
  .h1-a { font-size: 50px; }
  .h1-b { font-size: 74px; }
  .h1-a, .h1-b { white-space: nowrap; }
  /* The headline needs more of the row than the phone does. */
  .hero-text { flex: 1.25; }
  .lede { margin-left: 0; margin-right: 0; }

  /* Fixed rather than fluid: the phone is a 2.2:1 object, so letting it grow
     with the column makes it tower over the text it is meant to illustrate. */
  .device { width: 272px; margin: 0; flex: none; }

  section { padding: 88px 0; }
}

@media (min-width: 900px) {
  .steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
  /* Column layout: the numeral sits above its step rather than beside it, and
     the horizontal rules that separated stacked rows would only cut the columns
     in half, so they go. */
  .step { display: block; padding: 0; }
  .step + .step { border-top: 0; }
  .step-n { min-width: 0; font-size: 40px; margin-bottom: 10px; }
}