/* ============================================================
   RowPal — rowpal.app
   Built from Figma design (node 703:8820)

   Every type size is a variable in the :root block below, so the
   typography can be adjusted in one place.
   ============================================================ */

:root {
  /* ---- section backgrounds ---- */
  --sky:            #c3eeff;
  --mint:           #edf4ea;
  --blue:           #005aae;
  --rose:           #e9dadb;
  --cream:          #f7eee2;
  --navy:           #000d36;

  /* ---- ink ---- */
  --ink:            #000000;
  --ink-invert:     #f7fdff;
  --green:          #16a34a;   /* "ANY"                     */
  --olive:          #2a3425;   /* How it works + card bg    */
  --red:            #ea1628;   /* Stay in the Zone          */
  --grey:           #4e4e4e;   /* Zone subheading           */
  --gold:           #9c6f1a;   /* FAQs                      */
  --cyan:           #0190c8;   /* hero note                 */
  --cta-bg:         #272727;
  --teal:           #12a99a;   /* footer links              */
  --footer-grey:    #a8b3d5;

  /* ---- fonts ---- */
  --font-heading: "Plein", ui-rounded, "SF Pro Rounded", "Trebuchet MS", system-ui, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-ui:      ui-rounded, "SF Pro Rounded", "Inter", system-ui, sans-serif;

  /* ---- type sizes ----
     One line per size, running smoothly between the two Figma modes:
     the Mobile number on a 390px phone, the Desktop number once the
     window is 1245px wide (where the column reaches its full 1200px).
     In between, the size slides between the two.
             (mobile)  (how far it grows)  (desktop) */
  --fs-hero:       clamp(3.125rem,  calc(3.125rem + 20 * (100vw - 390px) / 855), 4.375rem);  /* H1     50 → 70 */
  --fs-section:    clamp(3.125rem,  calc(3.125rem + 20 * (100vw - 390px) / 855), 4.375rem);  /* H1     50 → 70 */
  --fs-lede:       clamp(1.5rem,    calc(1.5rem   + 10 * (100vw - 390px) / 855), 2.125rem);  /* body l 24 → 34 */
  --fs-cta:        clamp(1.625rem,  calc(1.625rem + 10 * (100vw - 390px) / 855), 2.25rem);   /*        26 → 36 */
  --fs-note:       clamp(1.5rem,    calc(1.5rem   + 10 * (100vw - 390px) / 855), 2.125rem);  /* body l 24 → 34 */
  --fs-card-title: clamp(1.875rem,  calc(1.875rem + 10 * (100vw - 390px) / 855), 2.5rem);    /* H2     30 → 40 */
  --fs-card-body:  clamp(1.25rem,   calc(1.25rem  +  4 * (100vw - 390px) / 855), 1.5rem);    /* body m 20 → 24 */
  --fs-zone-lede:  clamp(1.5rem,    calc(1.5rem   + 10 * (100vw - 390px) / 855), 2.125rem);  /* body l 24 → 34 */
  --fs-faq-q:      clamp(1.25rem,   calc(1.25rem  + 10 * (100vw - 390px) / 855), 1.875rem);  /* H3     20 → 30 */
  --fs-faq-a:      clamp(1.25rem,   calc(1.25rem  +  4 * (100vw - 390px) / 855), 1.5rem);    /* body m 20 → 24 */
  --fs-footer:     1rem;                                 /* 16      */

  /* ---- layout ---- */
  --content:       75rem;                                /* 1200px  */
  --pad-x:         clamp(1.25rem, 4vw, 1.375rem);        /* 20 → 22 */

  /* ---- one percent of the window height ----
     svh ignores the toolbars that come and go on phones; older
     browsers fall back to plain vh. */
  --vh:            1vh;
}

@supports (height: 1svh) {
  :root { --vh: 1svh; }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;              /* safety net: never scroll sideways */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3 { margin: 0; }

/* Each band paints one full-width stripe of colour; .wrap holds the
   1200px column in the middle of it. */
.band { width: 100%; }
.band--sky   { background: var(--sky); }
.band--mint  { background: var(--mint); }
.band--blue  { background: var(--blue); }
.band--rose  { background: var(--rose); }
.band--cream { background: var(--cream); }
.band--navy  { background: var(--navy); }

/* The design's column is exactly 1200px wide, with the cards and FAQ
   rows filling it edge to edge. Adding the padding into max-width keeps
   the content box at 1200px on a wide screen while still holding
   everything clear of the edges on a narrow one. */
.wrap {
  max-width: calc(var(--content) + 2 * var(--pad-x));
  margin: 0 auto;
  padding-inline: var(--pad-x);
}

/* ===================== Header ===================== */

.header .wrap {
  display: flex;
  justify-content: center;
  padding-block: clamp(1.25rem, 2.4vw, 1.875rem);
}

.logo-link { display: block; }

.logo {
  width: clamp(6.875rem, 13.66vw, 10.625rem);   /* 110 → 170px */
}

/* The header logo is fixed at 80px tall; width follows the picture. */
.header .logo {
  width: auto;
  height: 5rem;                                 /* 80px */
}

/* ===================== Hero ===================== */

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 3.21vw, 2.5rem);           /* 24 → 40px */
  padding-top: clamp(1.25rem, 3.2vw, 2.5rem);   /* 20 → 40px */
  padding-bottom: clamp(3rem, 8vw, 6.25rem);    /* 48 → 100px */
  padding-inline: calc(var(--pad-x) + clamp(0rem, 1.5vw, 1.375rem));  /* column pad + 22px */
  text-align: center;
}

.hero__title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: var(--fs-hero);
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--ink);
  text-wrap: balance;
}

.hero__title em {
  font-style: normal;
  color: var(--green);
}

/* Heading and paragraph, then the photo under them. */
.hero__strapline,
.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.hero__strapline { gap: clamp(2.25rem, 5.6vw, 4.375rem); }  /* 36 → 70px */
.hero__copy      { gap: clamp(1rem, 2.4vw, 1.875rem); }     /* 16 → 30px */

.hero__shot { width: 100%; }

.hero__lede {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-lede);
  line-height: 1.4;
  text-wrap: pretty;
}

.cta {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-cta);
  line-height: 1;
  color: #ffffff;
  background: var(--cta-bg);
  border-radius: 4.375rem;                       /* 70px */
  padding: clamp(1rem, 2.1vw, 1.65rem) clamp(1.75rem, 3.7vw, 2.875rem);
  white-space: nowrap;
  text-decoration: none;                         /* it's a link to the App Store */
}

.hero__note {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-note);
  line-height: 1.4;
  color: var(--cyan);
}

/* ===================== Shared section shell ===================== */

.section > .wrap { padding-block: clamp(3.5rem, 9.6vw, 7.5rem); }   /* 56 → 120px */

.section__title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: var(--fs-section);
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-align: center;
  text-wrap: balance;
}

.section__title--mint  { color: var(--olive); }
.section__title--blue  { color: var(--ink-invert); }
.section__title--rose  { color: var(--red); }
.section__title--cream { color: var(--gold); }

/* ===================== How it works ===================== */

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.2vw, 2.5rem);             /* 24 → 40px */
  margin-block: clamp(1.5rem, 3.7vw, 2.875rem);  /* 24 → 46px */
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--olive);
  border-radius: 1.875rem;                       /* 30px */
  overflow: hidden;                              /* keeps the artwork inside the rounded corners */
  color: #ffffff;
}

.card__copy {
  position: relative;
  z-index: 1;                                    /* stays above the artwork's clear top edge */
  display: flex;
  flex-direction: column;
  gap: 0.625rem;                                 /* 10px */
  padding: clamp(1.5rem, 3.2vw, 2.5rem) clamp(1.5rem, 3.2vw, 2.5rem) 0;
}

.card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-card-title);
  line-height: 1.29;
}

.card__body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-card-body);
  line-height: 1.4;
}

/* The artwork is a transparent SVG, so the card's own colour shows
   behind it. Each one sits against the bottom of the card, placed where
   it is in Figma. The numbers are percentages of the 580px card width,
   so the artwork keeps its position as the card gets narrower. */
.card__art--erg    { margin-top: -5.941%; }     /* starts 34.5px above the copy's bottom edge */
.card__art--camera { margin-top: 0.814%; }      /* starts 4.7px below the copy */

.card__art-svg,
.card__art img {
  display: block;
  /* When the picture has to shrink, it shrinks towards the bottom centre
     of the card, so it still sits on the card's bottom edge. */
  object-fit: contain;
  object-position: 50% 100%;
  /* Stacked on a phone: never taller than most of the screen. */
  max-height: calc(60 * var(--vh));
}

.card__art--erg .card__art-svg    { width: 100%; }                         /* 580 of 580px */
.card__art--camera .card__art-svg { width: 92.759%; margin-left: 1.728%; } /* 538 of 580px, 10px in */

/* ---- Fit the section to the window height ----
   While the cards sit side by side, the heading and both cards are sized
   to fit in one screen. The cards get height first, up to the design's
   695px. Anything left over goes to the padding, up to the design's
   120px. The artwork shrinks to fit the room left under the text.
   On a tall enough window this all lands back on the Figma sizes. */
@media (min-width: 801px) {
  .section--how {
    --how-gap:    clamp(1.25rem, calc(4 * var(--vh)), 2.875rem);                     /* 20 → 46px  */
    --how-chrome: calc(2 * 2.5rem + var(--fs-section) + 2 * var(--how-gap));
    --card-h:     clamp(26rem, calc(100 * var(--vh) - var(--how-chrome)), 43.4375rem); /* 416 → 695px */
    --how-pad:    clamp(2.5rem,
                        calc((100 * var(--vh) - var(--fs-section) - 2 * var(--how-gap) - var(--card-h)) / 2),
                        7.5rem);                                                        /* 40 → 120px */
  }

  .section--how > .wrap { padding-block: var(--how-pad); }
  .section--how .cards  { margin-block: var(--how-gap); }

  .card        { height: var(--card-h); }
  .card__copy  { flex-shrink: 0; }

  .card__art {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .card__art-svg {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
  }
}

/* ===================== Don't row alone ===================== */

/* The rowers and their stat cards are wider than the 1200px column
   on purpose, so this one image spills past it, centred. */
/* The padding lives on the band, not as a margin on the image — a
   bottom margin here would collapse out of the band and let the page
   background show as a stripe between the sections. */
.section--alone { padding-bottom: clamp(3.5rem, 9.6vw, 7.5rem); }
.section--alone > .wrap { padding-bottom: clamp(2rem, 5.6vw, 4.375rem); }

.alone__art {
  width: min(107.4375rem, 143%);                 /* 1719px at full size */
  margin-inline: auto;
}

/* ===================== Don't row alone: scene with scrolling pal cards ===================== */

/* Everything in the scene is sized in em, where 1em is one Figma pixel
   (16px). On phones narrower than about 557px the base shrinks so the phone
   still fits on screen; everywhere else the scene is drawn at Figma size. */
.race {
  position: relative;
  font-size: min(1rem, 2.87vw);
  height: 58.75em;                         /* the 940px scene */
  overflow: hidden;                        /* the scene is wider than most windows: trim it at the edges */
}

.race__scene {
  position: absolute;
  top: 0;
  left: 50%;
  width: 107.4375em;                       /* 1719px */
  max-width: none;
  height: auto;
  /* The phone sits 2.5px left of the picture's middle. This puts the
     phone, not the picture, in the middle of the window. */
  transform: translateX(calc(-50% + 0.15625em));
}

/* The strip of cards, laid over the phone's "Choose Your Pal" panel. It runs
   the full window width and pages one card at a time; the card that comes to
   rest in the middle, over the phone, is the selected one. */
.pal-cards {
  position: absolute;
  left: 0;
  right: 0;
  top: 36.96875em;                         /* 591.5px down the scene */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;           /* a swipe comes to rest with a card centred */
  overscroll-behavior-x: contain;          /* a sideways swipe moves the cards, not the browser back */
  scrollbar-width: none;
  cursor: grab;                            /* mouse users can click and drag the row */
  -webkit-user-select: none;               /* dragging shouldn't select the card text */
  user-select: none;
}

.pal-cards::-webkit-scrollbar { display: none; }

.pal-cards.is-grabbing { cursor: grabbing; }

/* While a mouse drags the row, and while it glides to a card afterwards,
   snapping is off so it can't fight the mouse. */
.pal-cards.is-settling { scroll-snap-type: none; }

.pal-card img { -webkit-user-drag: none; }  /* no ghost image when dragging over an icon */

.pal-cards:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: -3px;
}

.pal-cards__track {
  display: flex;
  gap: 1em;                                /* 16px */
  width: max-content;
  margin: 0;
  /* Half a window, less half a card, before the first card and after the last,
     so even the end cards can scroll to the middle. 5px underneath for the shadow. */
  padding: 0 calc(50% - 10.3125em) 0.3125em;
  list-style: none;
}

/* Page dots, one per card, where Figma draws them under the cards. The
   script moves .is-active to whichever card is centred. */
.pal-dots {
  position: absolute;
  top: 49.281em;                           /* 788.5px down the scene */
  left: 50%;
  transform: translateX(-50%);             /* centred on the phone, which sits in the middle of the window */
  display: flex;
  gap: 0.4375em;                           /* 7px */
}

.pal-dots__dot {
  width: 0.9375em;                         /* 15px */
  height: 0.9375em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transition: background-color 0.2s ease;
}

.pal-dots__dot.is-active { background: rgba(255, 255, 255, 0.95); }

.pal-card {
  flex: 0 0 auto;
  display: grid;
  grid-template-rows: auto 1fr auto;       /* title, number, note */
  row-gap: 0.5625em;                       /* 9px */
  width: 20.625em;                         /* 330px */
  height: 11em;                            /* 176px */
  padding: 1.25em;                         /* 20px */
  border-radius: 0.875em;                  /* 14px */
  background: #1e293b;
  box-shadow: 0.3125em 0.3125em 0 rgba(0, 0, 0, 0.12);
  color: #ffffff;
  font-family: var(--font-ui);
  scroll-snap-align: center;
  scroll-snap-stop: always;                /* one card per swipe, never flung past */
}

/* Figma draws the selected card's 2px outline inside the card, without
   moving anything in it, so it's an inset shadow rather than a border. */
.pal-card--selected {
  box-shadow: inset 0 0 0 0.125em rgba(213, 213, 213, 0.18),
              0.3125em 0.3125em 0 rgba(0, 0, 0, 0.12);
}

.pal-card__title,
.pal-card__note {
  font-size: 1.25em;                       /* 20px */
  line-height: 1.2;                        /* 24px row: puts the baseline where Figma has it */
  min-height: 1.2em;                       /* keeps the first card's empty note row */
  white-space: nowrap;
}

.pal-card__title { font-weight: 700; }

.pal-card__note {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

/* The big number sits on the bottom of its row, with its box trimmed to the
   tops of the capitals, like the text box in Figma. */
.pal-card__value {
  align-self: end;
  font-size: 3.625em;                      /* 58px */
  font-weight: 700;
  line-height: 1;
  text-box: trim-both cap alphabetic;
  white-space: nowrap;
}

.pal-card__small { font-size: 0.65517em; }  /* 38px */

.pal-card__unit {
  font-size: 0.31034em;                    /* 18px */
  color: rgba(255, 255, 255, 0.5);
  margin-left: 0.16667em;                  /* 3px */
}

.pal-card__trophy {
  display: inline-block;
  width: 1.0675em;                         /* 21.35px, in 20px title units */
  height: 1.1645em;                        /* 23.29px */
  margin: 0 0.3em 0 0.1em;                 /* 2px in from the edge, 6px before the words */
  vertical-align: -0.225em;                /* bottom 4.5px under the baseline, as in Figma */
}

.pal-card--pace {
  display: flex;
  align-items: center;
  gap: 0.625em;                            /* 10px */
}

.pal-card__main {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  display: grid;
  grid-template-rows: auto 1fr auto;
  row-gap: 0.5625em;
}

.pal-card__stepper {
  display: flex;
  flex-direction: column;
  gap: 0.5em;                              /* 8px */
}

.pal-card__stepper img {
  width: 4em;                              /* 64px */
  height: 4em;
}

.pal-card--solo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.53125em;                          /* 8.5px: the fish file has 0.5px spare at its top */
}

.pal-card--solo .pal-card__note { min-height: 0; }

.pal-card__fish {
  width: 1.858em;                          /* 29.73px */
  height: 1.5375em;                        /* 24.6px */
}

/* ===================== Stay in the Zone ===================== */

/* Three things stacked down the middle: the words, the two app icons, and
   the row screen. The band is never taller than the window: when space is
   short the padding and the gaps tighten first, then the row screen
   shrinks. On a tall enough window it all lands back on the Figma sizes. */
.section--zone {
  display: flex;
  flex-direction: column;
  max-height: calc(100 * var(--vh));
  overflow: hidden;
}

.section--zone > .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  width: 100%;
  /* Follows the window height, but also capped by its width so a tall,
     narrow window doesn't get extra padding. */
  gap: clamp(1.25rem, min(calc(5.6 * var(--vh)), 5.6vw), 4.375rem);            /* 20 → 70px  */
  padding-top: clamp(2.5rem, min(calc(13.3 * var(--vh)), 13.33vw), 10.375rem); /* 40 → 166px */
  padding-bottom: clamp(1.5rem, min(calc(7.2 * var(--vh)), 7.23vw), 5.625rem); /* 24 → 90px  */
}

.zone__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.875rem);             /* 16 → 30px */
  width: 100%;
}

.zone__lede {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-zone-lede);
  line-height: 1.4;
  color: var(--grey);
  text-align: center;
  max-width: 54rem;                              /* 864px */
  text-wrap: balance;
}

/* The two pictures: the RowPal and Apple Health icons, then the row screen.
   Both give way when the window is short, keeping the size they have
   relative to each other. */
.zone__sync,
.zone__watch {
  flex: 0 1 auto;
  min-height: 0;
  object-fit: contain;
}

.zone__sync  { width: clamp(11rem, 39.5%, 29.625rem); }   /* 474px at full size */
.zone__watch { width: clamp(17rem, 55.15%, 41.375rem); }  /* 662px at full size */

/* ===================== FAQs ===================== */

.faqs {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);           /* 12 → 20px */
  margin-top: clamp(1.5rem, 2.4vw, 1.875rem);
}

.faq {
  background: #ffffff;
  border-radius: 1.25rem;                        /* 20px */
  padding: clamp(1.5rem, 3.2vw, 2.5rem) clamp(1.5rem, 4vw, 3.125rem);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: var(--fs-faq-q);
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }

/* Chevron: a square with two sides drawn, turned 45°. Only half of the
   turned square is visible, so the chevron's visible middle sits a quarter
   of the square's diagonal away from the box's middle, towards the way it
   points. --chev-shift moves it back by exactly that much, so it lines up
   with the question text whichever way it is pointing. */
.faq__q::after {
  --chev-size: 1.375rem;                                   /* 22px */
  --chev-line: 0.1875rem;                                  /* 3px  */
  /* (size − line) × √2 ÷ 4: counting the line's thickness keeps the
     chevron at the same height pointing up and pointing down */
  --chev-shift: calc((var(--chev-size) - var(--chev-line)) * 0.35355);
  content: "";
  flex: 0 0 auto;
  width: var(--chev-size);
  height: var(--chev-size);
  margin-right: 0.6875rem;
  border-right: var(--chev-line) solid var(--ink);
  border-bottom: var(--chev-line) solid var(--ink);
  border-radius: 0 0 0.25rem 0;
  /* open: points down, so lift it */
  transform: translateY(calc(-1 * var(--chev-shift))) rotate(45deg);
  transition: transform 0.2s ease;
}

/* closed: points up, so drop it */
.faq:not([open]) .faq__q::after {
  transform: translateY(var(--chev-shift)) rotate(-135deg);
}

.faq__a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-faq-a);
  line-height: 1.4;
  color: var(--ink);
  margin-top: 0.625rem;                          /* 10px */
  text-wrap: pretty;
}

/* ===================== Help page ===================== */

/* A stand-in page: the site's header and footer with one line between
   them. The middle stretches to fill whatever the header and footer leave,
   so the words sit in the centre and the footer lands on the bottom edge
   rather than halfway up a tall window. */
.page--plain {
  display: flex;
  flex-direction: column;
  min-height: calc(100 * var(--vh));
}

.page--plain main,
.page--plain .section--help {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.section--help > .wrap {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.4vw, 1.875rem);             /* 16 → 30px */
  /* The middle already stretches, so it does not need the deep padding
     the sections on the main page use. */
  padding-block: clamp(2rem, 4.8vw, 3.75rem);    /* 32 → 60px */
  text-align: center;
}

.section__title--sky { color: var(--ink); }

.help__lede {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-lede);
  line-height: 1.4;
  max-width: 41.875rem;                          /* 670px */
  text-wrap: pretty;
}

.help__lede a { color: var(--blue); }

.help__lede a:hover,
.help__lede a:focus-visible { text-decoration: none; }

/* ===================== Footer ===================== */

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.875rem);             /* 16 → 30px */
  padding-block: clamp(3.5rem, 9.6vw, 7.5rem);   /* 56 → 120px, top and bottom */
}

.footer__nav {
  display: flex;
  gap: clamp(1.5rem, 3.8vw, 3rem);               /* 24 → 48px */
}

.footer__nav a {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-footer);
  color: var(--teal);
  text-decoration: none;
}

.footer__nav a:hover,
.footer__nav a:focus-visible { text-decoration: underline; }

.footer__copy {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-footer);
  color: var(--footer-grey);
}

/* ===================== Focus ===================== */

:where(a, summary):focus-visible {
  outline: 3px solid var(--cta-bg);
  outline-offset: 4px;
  border-radius: 4px;
}

.band--blue :where(a, summary):focus-visible,
.band--navy :where(a, summary):focus-visible { outline-color: #ffffff; }

/* ===================== Narrow screens ===================== */

@media (max-width: 800px) {
  /* One card above the other. */
  .cards { grid-template-columns: minmax(0, 1fr); }

  /* The design has no mobile layout for the wide illustrations. Running
     them edge to edge is the most size they can gain without cropping
     anything out of the picture. */
  .hero__shot,
  .alone__art {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
  }

  .zone__sync  { width: min(29.625rem, 62%); }
  .zone__watch { width: min(41.375rem, 96%); }
}

@media (max-width: 420px) {
  .alone__art { width: 185%; }
}

/* ===================== Motion ===================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}