/*
 * Landing page styles. Plain CSS, no build step: this file is served straight
 * out of build/web next to the Flutter app.
 *
 * Every size here comes from the Figma design (Heritage-App, Home 8970:36284),
 * drawn at 1440 wide: Primary-100 #FFC3AD, a black page, #121212 behind the
 * featured cards, white at 90/80/70/50/30 % for text and dividers.
 */

:root {
  --primary: #ffc3ad;
  --bg: #000;
  --bg-card: #121212;
  --text-90: rgba(255, 255, 255, 0.9);
  --text-80: rgba(255, 255, 255, 0.8);
  --text-70: rgba(255, 255, 255, 0.7);
  --text-50: rgba(255, 255, 255, 0.5);
  --divider: rgba(255, 255, 255, 0.3);
  --on-primary: rgba(0, 0, 0, 0.8);

  /* "SF Pro" throughout the design, headings included. It is the system face
     on Apple devices and may not be served as a web font, so elsewhere the
     platform's own sans stands in. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter: 88px;
  /* Discover and FAQ centre a 1248 column, which leaves 96 on each side. */
  --band-gutter: 96px;

  /* The design is drawn at 1440 and centres on anything wider, so the hero
     crop and the gutters stay exactly as drawn instead of stretching. */
  --frame: 1440px;
}

#landing {
  max-width: var(--frame);
  margin-inline: auto;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* An in-page link (#discover, #pricing, #faq) lands below the sticky
     header (.nav, 91 tall; 68 on a phone) instead of under it. */
  scroll-padding-top: 91px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-90);
  font-family: var(--font);
  font-size: 16px;
  line-height: normal;
  letter-spacing: -0.5px;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  /* The width/height attributes are there to reserve space while loading;
     without this they would also fix the rendered height and squash the
     image once CSS sets a width. */
  height: auto;
}

a {
  color: inherit;
}

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

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--primary);
  color: var(--on-primary);
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  font-weight: 510;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

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

/* Style=Primary: 16 Medium on Primary-100, 16 / 24 padding, so 51 tall. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  border: 0;
  border-radius: 360px;
  background: var(--primary);
  color: var(--on-primary);
  font: inherit;
  font-size: 16px;
  font-weight: 510;
  /* SF Pro's own line at 16, which makes the 51 of the design. */
  line-height: 19px;
  letter-spacing: -0.5px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.btn:hover {
  opacity: 0.88;
}

.btn:active {
  transform: translateY(1px);
}

/* Style=Primary, Property=Default: a fixed 265 wide. */
.btn--wide {
  width: 265px;
  padding-inline: 14px;
}

/* Style=Text: the label underlined by a Primary-100 rule. */
.btn--text {
  padding: 16px 0;
  border-radius: 0;
  border-bottom: 1px solid var(--primary);
  background: none;
  color: var(--primary);
}

.btn--text:hover {
  opacity: 0.8;
}

.btn__arrow {
  width: 16px;
  height: 16px;
  flex: none;
}

/* A card's two actions: Try it on the left, View Sample on the right. */
.actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* ------------------------------------------------------------------- type */

/* Heading 6 (medium) in Primary-100. Cards override the size and weight. */
.eyebrow {
  color: var(--primary);
  font-size: 16px;
  font-weight: 510;
  text-transform: uppercase;
}

/* Web Heading / Display 1: 98 / 100, tracking -3.43. Every display style in
   the design tracks at -3.5 % of its size, so it is written in em to scale
   with the clamp. */
.display {
  font-size: clamp(44px, 6.8vw, 98px);
  line-height: 1.0204;
  font-weight: 590;
  letter-spacing: -0.035em;
  color: var(--text-90);
}

/* Display 3: 48 / 52.8, tracking -1.68. */
.headline {
  font-size: clamp(32px, 3.34vw, 48px);
  line-height: 1.1;
  font-weight: 590;
  letter-spacing: -0.035em;
  color: var(--text-90);
}

/* Display 2: 62 / 65.1, tracking -2.17. */
.headline--lg {
  font-size: clamp(36px, 4.3vw, 62px);
  line-height: 1.05;
}

.lede {
  color: var(--text-70);
  font-size: 16px;
}

/* -------------------------------------------------------------- brand */

/* The app icon: a 52 tile, radius 8, with the mark slightly larger than the
   tile and nudged down, as in the design. */
.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #fff;
  font-size: 28px;
  font-weight: 590;
  text-decoration: none;
  white-space: nowrap;
}

.brand__tile {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  background: #1e1e1e;
}

.brand__tile img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 65.863px;
  max-width: none;
  height: 61.547px;
  object-fit: cover;
  transform: translate(calc(-50% - 0.03px), calc(-50% + 2.95px));
}

/* -------------------------------------------------------------------- nav */

.nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 91px;
  padding: 0 var(--gutter);
  background: var(--bg);
}

.nav__links {
  display: flex;
  gap: 64px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__links a {
  color: var(--text-70);
  font-size: 16px;
  font-weight: 510;
  text-decoration: none;
}

.nav__links a:hover {
  color: #fff;
}

/* "Sign in" beside "Get the App". Not in the Figma header (the design only
   has the footer's "Already a member? Sign in"), so it takes the header's
   own link style: 16 Medium, white at 70 %. */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav__signin {
  /* As tall a target as the button beside it. */
  padding: 16px 0;
  color: var(--text-70);
  font-size: 16px;
  font-weight: 510;
  text-decoration: none;
  white-space: nowrap;
}

.nav__signin:hover {
  color: #fff;
}

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

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
  min-height: 665px;
  padding: 100px var(--gutter) 45px;
  background: var(--bg);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Anchored right: the face and its origin labels are on that side, so a
   narrower screen crops the dark left half instead of the labels. */
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* Overlay / Hero Shade */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgb(0, 0, 0) 0%,
    rgba(0, 0, 0, 0.94) 33%,
    rgba(0, 0, 0, 0.12) 68%,
    rgba(0, 0, 0, 0.15) 100%
  );
}

.hero > *:not(.hero__media) {
  position: relative;
  z-index: 1;
  max-width: 610px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 15px;
}

/* ------------------------------------------------------------- discoveries */

.band {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 80px var(--band-gutter);
}

.band__heading {
  max-width: 724px;
}

.featured {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

/* Card 1: the image fills the card and the text sits on its shade. */
.card-lg {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  min-height: 505px;
  padding: 32px;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-card);
}

/* The stroke is drawn over the image, as Figma draws it. */
.card-lg::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--divider);
  border-radius: inherit;
  pointer-events: none;
}

.card-lg__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.card-lg__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Its origin labels sit on the left of the picture; keep them in when a
   narrower card crops it. */
.card-lg--start .card-lg__media img {
  object-position: left center;
}

/* Overlay / Card Shade */
.card-lg__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(18, 18, 18, 0.02) 0%,
    rgba(18, 18, 18, 0.07) 36%,
    rgba(18, 18, 18, 0.88) 72%,
    rgb(18, 18, 18) 100%
  );
}

.card-lg__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-lg__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-lg .eyebrow {
  font-size: 12px;
  font-weight: 590;
}

/* Display 4: 40 / 42, tracking -1.4. */
.card-lg__title {
  font-size: 40px;
  line-height: 1.05;
  font-weight: 590;
  letter-spacing: -0.035em;
  color: var(--text-90);
}

.card-lg__desc {
  color: var(--text-70);
  font-size: 13px;
}

/* Card 2: image, text, actions, then a divider; 350 wide, 99 apart. */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 350px));
  justify-content: space-between;
  gap: 36px 24px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 0;
}

.card::after {
  content: "";
  height: 1px;
  background: var(--divider);
}

.card__media {
  width: 100%;
  aspect-ratio: 350 / 250;
  object-fit: cover;
  border-radius: 8px;
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card .eyebrow {
  font-size: 14px;
  font-weight: 590;
}

.card__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-90);
}

.card__desc {
  color: var(--text-80);
  font-size: 13px;
}

/* ------------------------------------------------------------- family tree */

.split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  padding: 40px 0;
}

.split__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  flex: 0 1 549px;
}

.split__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.split__desc {
  color: var(--text-70);
  font-size: 18px;
}

.split img {
  flex: 0 1 600px;
  min-width: 0;
}

/* ----------------------------------------------------------------- sample */

.sample {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
  padding: 100px var(--gutter);
}

.sample__text {
  display: flex;
  flex-direction: column;
  gap: 48px;
  flex: 0 1 480px;
}

.sample__intro {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.sample__picker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
  max-width: 442px;
}

.sample__choose {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

/* The design's dropdown row: 24 Bold, a 24 chevron, 12 above the divider.
   A native select underneath keeps it usable everywhere. */
.sample__select {
  position: relative;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--divider);
}

.sample__select select {
  display: block;
  width: 100%;
  height: 24px;
  padding: 0 32px 0 0;
  border: 0;
  background: transparent;
  color: var(--text-90);
  font: inherit;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.5px;
  appearance: none;
  cursor: pointer;
}

.sample__select select option {
  background: var(--bg-card);
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}

.sample__chevron {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  color: #fff;
  pointer-events: none;
}

/* 549 x 409, the screenshot cropped to it as in the design, screen-blended
   so its black drops out. */
.sample__shot {
  position: relative;
  flex: 0 1 549px;
  aspect-ratio: 549 / 409;
  overflow: hidden;
  mix-blend-mode: screen;
}

.sample__shot img {
  position: absolute;
  top: 0;
  left: -6.56%;
  width: 116.21%;
  max-width: none;
  height: 100.1%;
}

/* -------------------------------------------------------------------- faq */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 748px);
  gap: 80px;
  padding: 30px var(--band-gutter) 64px;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.faq__item {
  padding-bottom: 25px;
  border-bottom: 1px solid var(--divider);
}

.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  font-weight: 590;
  color: var(--text-90);
  cursor: pointer;
  list-style: none;
}

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

.faq__chevron {
  flex: none;
  width: 18px;
  height: 18px;
  margin-right: 4px;
  color: var(--primary);
  transition: transform 0.2s ease;
}

.faq__item[open] .faq__chevron {
  transform: rotate(180deg);
}

/* Not drawn in the design, which shows the questions closed. */
.faq__item p {
  margin-top: 12px;
  max-width: 62ch;
  color: var(--text-70);
  font-size: 14px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------- pricing */

/* Not in the Figma Home: added for Paddle's domain review, which needs the
   prices in the page itself (its crawler runs no JavaScript). Built from the
   FAQ's two columns and the featured cards' surface (#121212, 1px stroke,
   radius 16), with Display 4 for the price. The numbers must match the live
   Paddle catalogue that the paywall loads. The top padding is the FAQ's,
   so the gap after the sample section stays what it was.

   Wide: the intro and its "Try it" in the left column, the plans beside
   them. Stacked (see the 1240 query): intro, plans and note, then "Try it",
   so the price is read before the button. */
.pricing {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 748px);
  grid-template-rows: auto 1fr;
  gap: 25px 80px;
  padding: 30px var(--band-gutter) 80px;
}

.pricing__intro {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
}

.pricing__intro .lede {
  line-height: 1.5;
}

.pricing__cta {
  grid-column: 1;
  grid-row: 2;
}

.pricing__body {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border: 1px solid var(--divider);
  border-radius: 16px;
  background: var(--bg-card);
}

.plan .eyebrow {
  font-size: 14px;
  font-weight: 590;
}

.plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0;
}

/* Display 4, as the featured cards' titles. */
.plan__amount {
  color: var(--text-90);
  font-size: 40px;
  line-height: 1.05;
  font-weight: 590;
  letter-spacing: -0.035em;
}

.plan__period {
  color: var(--text-70);
  font-size: 16px;
  font-weight: 510;
}

.plan__desc {
  color: var(--text-70);
  font-size: 14px;
  line-height: 1.5;
}

.pricing__note {
  color: var(--text-50);
  font-size: 12px;
  line-height: 1.6;
}

.pricing__note a {
  color: var(--text-70);
}

.pricing__note a:hover {
  color: #fff;
}

/* ----------------------------------------------------------------- footer */

.footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
  padding: 45px var(--gutter);
}

.footer__tagline {
  color: var(--text-70);
  font-size: 12px;
}

.footer__member {
  color: var(--primary);
  font-size: 13px;
  white-space: pre-wrap;
}

.footer__member a {
  text-decoration: none;
}

.footer__member a:hover {
  text-decoration: underline;
}

.footer hr {
  align-self: stretch;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--divider);
}

/* Not in the Figma Home: the legal pages and contact Paddle's review asks
   for, styled as the header's section links, wrapping on a phone. */
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__links a {
  color: var(--text-70);
  font-size: 14px;
  font-weight: 510;
  text-decoration: none;
}

.footer__links a:hover {
  color: #fff;
}

.footer__links a[aria-current="page"] {
  color: var(--primary);
}

/* Who runs the site and how to reach them, in the legal row's colour. */
.footer__company {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 760px;
  color: var(--text-50);
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.footer__company a {
  color: var(--text-70);
}

.footer__company a:hover {
  color: #fff;
}

/* The design spaces the two with blanks; this is the same 104. */
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 104px;
  color: var(--text-50);
  font-size: 11px;
  font-weight: 510;
}

/* --------------------------------------------------------------- app boot */

/* Shown while the Flutter app boots after a call to action. */
.booting {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.app-mode .booting,
.is-booting .booting {
  display: flex;
}

.booting__spinner {
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .booting__spinner {
    animation-duration: 2.4s;
  }

  * {
    scroll-behavior: auto !important;
  }
}

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

@media (max-width: 1100px) {
  :root {
    --gutter: 40px;
    --band-gutter: 40px;
  }

  .nav__links {
    gap: 32px;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split,
  .sample {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .split__text,
  .sample__text {
    flex: none;
  }

  .split img {
    flex: none;
    align-self: center;
    width: 100%;
    max-width: 600px;
  }

  .sample__shot {
    flex: none;
    align-self: center;
    width: 100%;
    max-width: 549px;
  }

  .faq {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

/* Pricing stacks earlier than the FAQ: below about 1240 its 420 intro
   column leaves two plan cards too narrow for their label and price. */
@media (max-width: 1240px) {
  .pricing {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 40px;
  }

  .pricing__intro,
  .pricing__body,
  .pricing__cta {
    grid-column: auto;
    grid-row: auto;
  }

  .pricing__intro .lede {
    max-width: 640px;
  }
}

/* Pricing (not in the Figma header) is the fourth section link. Below
   about 1015 wide the four no longer fit beside the brand, "Sign in" and
   the button, and just above 1100, where the gaps grow back to 64 and the
   gutters to 88, they do not fit either up to about 1205; there it gives
   way and stays in the footer. */
@media (max-width: 1040px), (min-width: 1101px) and (max-width: 1220px) {
  .nav__optional {
    display: none;
  }
}

/* Below about 935 the other three do not fit on one line either (they
   wrapped to two and three lines): the section links go, as on a phone,
   and the brand, "Sign in" and "Get the App" stay. */
@media (max-width: 940px) {
  .nav > nav {
    display: none;
  }
}

@media (max-width: 760px) {
  :root {
    --gutter: 20px;
    --band-gutter: 20px;
  }

  html {
    scroll-padding-top: 68px;
  }

  .nav {
    height: 68px;
    gap: 12px;
  }

  .nav > nav {
    display: none;
  }

  .nav .brand {
    font-size: 20px;
    gap: 10px;
  }

  .nav .brand__tile {
    width: 36px;
    height: 36px;
  }

  .nav .brand__tile img {
    width: 45.6px;
    height: 42.6px;
    transform: translate(-50%, calc(-50% + 2px));
  }

  .nav .btn {
    padding: 11px 16px;
    font-size: 15px;
  }

  /* The section links are gone; "Sign in" stays, at the button's 15. */
  .nav__actions {
    gap: 16px;
  }

  .nav__signin {
    font-size: 15px;
  }

  /* A phone is too narrow to set the text beside the face, and over it the
     origin labels collide with the headline: the picture goes above the
     text instead, fading into the page. */
  .hero {
    min-height: 0;
    gap: 18px;
    padding: 0 var(--gutter) 48px;
  }

  .hero__media {
    position: relative;
    align-self: stretch;
    margin: 0 calc(-1 * var(--gutter)) -8px;
    aspect-ratio: 1000 / 840;
  }

  .hero__media::after {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 72%,
      rgb(0, 0, 0) 100%
    );
  }

  .hero__actions {
    width: 100%;
    gap: 8px;
  }

  .hero__actions .btn--wide {
    width: 100%;
  }

  .band {
    gap: 32px;
    padding: 56px var(--band-gutter);
  }

  .featured {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .card-lg {
    min-height: 420px;
    padding: 20px;
  }

  .card-lg__title {
    font-size: 30px;
  }

  .cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .split {
    padding: 0;
  }

  .split__text {
    gap: 32px;
  }

  .split__desc {
    font-size: 16px;
  }

  .sample {
    padding: 56px var(--gutter);
  }

  .sample__picker,
  .sample__picker .btn--wide {
    width: 100%;
    max-width: none;
  }

  .faq {
    padding: 8px var(--band-gutter) 48px;
  }

  .pricing {
    gap: 32px;
    padding: 8px var(--band-gutter) 56px;
  }

  .pricing__cta .btn--wide {
    width: 100%;
  }

  .plans {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .plan {
    padding: 24px 20px;
  }

  .plan__amount {
    font-size: 34px;
  }

  .footer__links {
    gap: 12px 24px;
  }

  .footer {
    padding: 40px var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px));
  }
}

/* Phones narrower than 430: the brand, "Sign in" and "Get the App" with
   its arrow are 413 wide together, so the page scrolled sideways. The
   arrow goes, the button narrows and the gaps and the brand tighten
   (364 wide). The sample report pages share this header. */
@media (max-width: 429px) {
  .nav {
    gap: 10px;
  }

  .nav .brand {
    gap: 8px;
    font-size: 18px;
  }

  .nav__actions {
    gap: 12px;
  }

  .nav .btn {
    padding-inline: 14px;
  }

  .nav .btn .btn__arrow {
    display: none;
  }
}

/* 360 (many Android phones): a size smaller again, 351 wide. */
@media (max-width: 374px) {
  .nav .brand {
    font-size: 17px;
  }

  .nav__signin,
  .nav .btn {
    font-size: 14px;
  }
}

/* The narrowest phones (320): only the app icon is left of the brand. Its
   name stays the link's text for screen readers. The legal pages' header
   holds the brand alone and keeps it. */
@media (max-width: 359px) {
  .nav:has(.nav__actions) .brand {
    font-size: 0;
  }
}