/* Qurrent — marketing site (QAS-2586).
 *
 * One fluid layout from the Claude Design handoff in docs/design/homepage/: it matches
 * mobile.dc.html at 390px and desktop.dc.html at 1440px, and interpolates between them.
 * Fluid values are clamp(<390px value>, …, <1440px value>).
 *
 * Breakpoints: 640px (grids widen), 720px (hero switches to the desktop composition),
 * 880px (header nav appears), 960px (two-column sections).
 *
 * Tokens are named after the app's qr-* design system (mirrored in QurrentUI). The page's
 * secondary grey is darker than the app's --qr-text-2 on purpose, for 4.5:1 on the page.
 *
 * Dark mode (QAS-2588) redefines the colour tokens, and nothing else, in two places that must
 * match: under prefers-color-scheme (the default, which works without JavaScript) and under
 * [data-theme="dark"] (the header switch; theme.js). [data-theme="light"] opts out of the first.
 */

:root {
  color-scheme: light;

  /* Grounds */
  --qr-ground: #faf9f7;
  --qr-band: #ffffff;
  --qr-inset: #f1efeb;
  --qr-night: #171614;

  /* Text and lines */
  --qr-text: #1d1c1a;
  --qr-text-2: #5f5b54;
  --qr-text-night: #ece9e4;
  --qr-text-2-night: #a9a49c;
  --qr-hairline: #e8e5e0;
  --qr-hairline-night: #2c2a27;

  /* Accent: Slate, and Slate on a dark band */
  --qr-accent: #4a5b73;
  --qr-accent-hover: #3e4d61;
  --qr-accent-night: #a3b3cc;
  --qr-on-accent: #ffffff;

  /* Fills */
  --qr-fill: rgba(122, 116, 103, 0.12);
  --qr-fill-chip: rgba(122, 116, 103, 0.1);
  --qr-fill-night: rgba(173, 165, 150, 0.16);

  /* Device colours */
  --qr-device-ring: rgba(0, 0, 0, 0.06);
  --qr-watch-ring: #2c2a27;
  --qr-icon-ring: rgba(61, 57, 49, 0.18);
  --qr-bezel: #2a2825;
  --qr-bezel-dark: #3a3733;
  --qr-lid: #1b1a18;
  --qr-base: #cbc6be;
  --qr-base-notch: #aea89f;
  --qr-desktop: #d9d3c9;

  /* Type */
  --qr-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI",
    "Helvetica Neue", Helvetica, sans-serif;
  --qr-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --qr-h1: clamp(46px, 30.4px + 4vw, 88px);
  --qr-h2: clamp(34px, 27.31px + 1.714vw, 52px);
  --qr-lede-hero: clamp(18px, 16.51px + 0.381vw, 22px);
  --qr-lede: clamp(17px, 15.89px + 0.2857vw, 20px);
  --qr-body: clamp(15px, 14.63px + 0.0952vw, 16px);
  --qr-item: clamp(16px, 15.63px + 0.0952vw, 17px);
  --qr-eyebrow: clamp(12px, 11.63px + 0.0952vw, 13px);

  /* Space */
  --qr-content: 1200px;
  --qr-pad-x: clamp(20px, 9.524vw - 17.14px, 120px);
  --qr-pad-y: clamp(64px, 40.23px + 6.095vw, 128px);
  --qr-inner: calc(min(100vw, var(--qr-content) + 2 * var(--qr-pad-x)) - 2 * var(--qr-pad-x));
}

/* Dark: warm and dim, like the app's own dark mode. Grounds step up from the page to the
   white and inset bands, and the night bands (privacy, join, footer) sink below the page so
   they still read as their own sections. Keep the two blocks identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --qr-ground: #1a1917;
    --qr-band: #1f1d1b;
    --qr-inset: #252321;
    --qr-night: #0f0e0d;
    --qr-text: #ece9e4;
    --qr-text-2: #a9a49c;
    --qr-hairline: #2e2c29;
    --qr-accent: #a3b3cc;
    --qr-accent-hover: #b7c4d8;
    --qr-on-accent: #171614;
    --qr-fill: rgba(173, 165, 150, 0.16);
    --qr-fill-chip: rgba(173, 165, 150, 0.14);
    --qr-device-ring: rgba(255, 255, 255, 0.1);
    --qr-watch-ring: #3a3733;
    --qr-icon-ring: rgba(255, 255, 255, 0.14);
    --qr-desktop: #2b2825;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --qr-ground: #1a1917;
  --qr-band: #1f1d1b;
  --qr-inset: #252321;
  --qr-night: #0f0e0d;
  --qr-text: #ece9e4;
  --qr-text-2: #a9a49c;
  --qr-hairline: #2e2c29;
  --qr-accent: #a3b3cc;
  --qr-accent-hover: #b7c4d8;
  --qr-on-accent: #171614;
  --qr-fill: rgba(173, 165, 150, 0.16);
  --qr-fill-chip: rgba(173, 165, 150, 0.14);
  --qr-device-ring: rgba(255, 255, 255, 0.1);
  --qr-watch-ring: #3a3733;
  --qr-icon-ring: rgba(255, 255, 255, 0.14);
  --qr-desktop: #2b2825;
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--qr-ground);
  color: var(--qr-text);
  font-family: var(--qr-font);
  font-size: var(--qr-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

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

:where(ul, ol)[role="list"] {
  list-style: none;
  padding: 0;
}

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

/* A <picture> only chooses the light or dark screenshot; layout sees the <img> alone. */
picture {
  display: contents;
}

a {
  color: var(--qr-accent);
}

:focus-visible {
  outline: 3px solid var(--qr-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.night :focus-visible {
  outline-color: var(--qr-accent-night);
}

code {
  font-family: var(--qr-mono);
  font-size: 0.9em;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--qr-fill);
  color: var(--qr-text);
  white-space: nowrap;
}

.night code {
  background: var(--qr-fill-night);
  color: var(--qr-text-night);
}

.skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 10;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--qr-text);
  color: var(--qr-ground);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 12px;
}

/* Full-bleed band, centred content. */
.wrap {
  width: 100%;
  max-width: calc(var(--qr-content) + 2 * var(--qr-pad-x));
  margin-inline: auto;
  padding-inline: var(--qr-pad-x);
}

.band {
  padding-block: var(--qr-pad-y);
}

.band--white {
  background: var(--qr-band);
}

.band--inset {
  background: var(--qr-inset);
}

.night {
  background: var(--qr-night);
  color: var(--qr-text-night);
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--qr-accent);
  color: var(--qr-on-accent);
  font-size: clamp(17px, 16.63px + 0.0952vw, 18px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.button:hover {
  background: var(--qr-accent-hover);
}

.button--small {
  min-height: 44px;
  padding: 0 18px;
  font-size: 15px;
}

.button--night {
  background: var(--qr-accent-night);
  color: var(--qr-night);
}

.button--night:hover {
  background: #b7c4d8;
}

/* A status, not an action: the capsule's shape without the accent fill, so it doesn't read as
   something to tap. Used while there is no public TestFlight link. */
.button--soon,
.button--soon:hover {
  background: var(--qr-fill);
  color: var(--qr-text);
  cursor: default;
}

.night .button--soon {
  background: var(--qr-fill-night);
  color: var(--qr-text-night);
}

.site-header .button--soon {
  white-space: nowrap;
}

/* No room beside the theme switch on a phone; the hero repeats it just below. */
@media (max-width: 479.98px) {
  .site-header .button--soon {
    display: none;
  }
}

/* The light/dark switch (QAS-2588). Hidden until theme.js wires it, so it never appears dead. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--qr-text-2);
  cursor: pointer;
}

.theme-toggle[hidden] {
  display: none;
}

.theme-toggle:hover {
  background: var(--qr-fill);
  color: var(--qr-text);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
}

.theme-toggle[aria-pressed="true"] .theme-toggle__moon,
.theme-toggle[aria-pressed="false"] .theme-toggle__sun {
  display: none;
}

@media (min-width: 720px) {
  .button {
    min-height: 56px;
  }

  .button--small {
    min-height: 44px;
  }
}

/* ---------- Header ---------- */

.site-header {
  background: var(--qr-ground);
  border-bottom: 1px solid var(--qr-hairline);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: calc(var(--qr-content) + 2 * var(--qr-pad-x));
  height: clamp(64px, 58.06px + 1.524vw, 80px);
  margin-inline: auto;
  padding-inline: var(--qr-pad-x);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 9.26px + 0.19vw, 12px);
  min-height: 44px;
  color: var(--qr-text);
  font-size: clamp(18px, 17.26px + 0.19vw, 20px);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand img {
  width: clamp(32px, 30.51px + 0.381vw, 36px);
  height: auto;
  border-radius: 25%;
  box-shadow: 0 0 0 0.5px var(--qr-icon-ring);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 32px);
}

.site-nav__links {
  display: none;
}

@media (min-width: 880px) {
  .site-nav__links {
    display: flex;
    gap: clamp(12px, 3.33vw - 17px, 32px);
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

.site-nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--qr-text-2);
  font-size: 15px;
  text-decoration: none;
}

.site-nav__links a:hover {
  color: var(--qr-text);
}

/* ---------- Section typography ---------- */

.eyebrow {
  font-size: var(--qr-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--qr-accent);
}

.night .eyebrow {
  color: var(--qr-accent-night);
}

h2 {
  max-width: 560px;
  font-size: var(--qr-h2);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.lede {
  max-width: 520px;
  font-size: var(--qr-lede);
  line-height: 1.5;
  color: var(--qr-text-2);
  text-wrap: pretty;
}

.night .lede {
  color: var(--qr-text-2-night);
}

.head {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 11.77px + 0.571vw, 20px);
}

.split .head {
  gap: clamp(14px, 10.29px + 0.952vw, 24px);
}

/* A row of titled, hairline-topped items. */
.features {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 14.51px + 0.381vw, 20px);
}

.features > li {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 3.26px + 0.19vw, 6px);
  padding-top: clamp(16px, 15.26px + 0.19vw, 18px);
  border-top: 1px solid var(--qr-hairline);
}

.night .features > li {
  border-top-color: var(--qr-hairline-night);
}

.features h3 {
  font-size: var(--qr-item);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.features p {
  color: var(--qr-text-2);
  text-wrap: pretty;
}

.night .features p {
  color: var(--qr-text-2-night);
}

@media (min-width: 640px) {
  .features--two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    row-gap: 28px;
  }
}

/* ---------- Device frames ----------
 * Each frame sizes from one custom property, --w: its outer width. Every other length is a
 * ratio of it, taken from the desktop artboard, so a frame is the same shape at every size.
 */

.iphone {
  --w: 300px;
  flex-shrink: 0;
  width: var(--w);
  padding: calc(var(--w) * 0.0333);
  border-radius: calc(var(--w) * 0.1867);
  background: var(--qr-bezel);
  box-shadow:
    0 calc(var(--w) * 0.08) calc(var(--w) * 0.2667) rgba(29, 28, 26, 0.18),
    0 0 0 1px var(--qr-device-ring);
}

.iphone--dark {
  background: var(--qr-bezel-dark);
}

.iphone img {
  width: 100%;
  border-radius: calc(var(--w) * 0.1533);
}

.watch {
  --w: 204px;
  flex-shrink: 0;
  width: var(--w);
  padding: calc(var(--w) * 0.0686);
  border-radius: calc(var(--w) * 0.255);
  background: #000;
  box-shadow:
    0 calc(var(--w) * 0.078) calc(var(--w) * 0.235) rgba(0, 0, 0, 0.22),
    0 0 0 2px var(--qr-watch-ring);
}

.watch img {
  width: 100%;
  border-radius: calc(var(--w) * 0.1667);
}

/* --w is the width of the base; the lid is 87.7% of it. */
.macbook {
  --w: 1040px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: var(--w);
  filter: drop-shadow(0 calc(var(--w) * 0.025) calc(var(--w) * 0.0423) rgba(29, 28, 26, 0.22));
}

.macbook__lid {
  width: 87.7%;
  padding: max(5px, var(--w) * 0.0154) max(5px, var(--w) * 0.0154) max(7px, var(--w) * 0.0212);
  border-radius: calc(var(--w) * 0.0337) calc(var(--w) * 0.0337) 0 0;
  background: var(--qr-lid);
  box-shadow: inset 0 0 0 1.5px var(--qr-bezel-dark);
}

.macbook__screen {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: max(3px, var(--w) * 0.0068);
  background: var(--qr-desktop);
}

/* A full-screen capture fills the screen. */
.macbook__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* A window grab sits on the desktop colour with its own shadow; --win is its share of the width. */
.macbook__screen img.window {
  width: var(--win, 80%);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 calc(var(--w) * 0.0106) calc(var(--w) * 0.025) rgba(0, 0, 0, 0.28));
}

.macbook__base {
  display: flex;
  justify-content: center;
  width: 100%;
  height: max(8px, var(--w) * 0.0202);
  border-radius: 0 0 calc(var(--w) * 0.0404) calc(var(--w) * 0.0404);
  background: var(--qr-base);
  box-shadow: inset 0 1px 0 #e4e0d9;
}

.macbook__base::before {
  content: "";
  width: 14.04%;
  height: 43%;
  border-radius: 0 0 calc(var(--w) * 0.0087) calc(var(--w) * 0.0087);
  background: var(--qr-base-notch);
}

/* ---------- Hero ---------- */

.hero {
  padding-top: clamp(40px, 19.2px + 5.333vw, 96px);
  padding-bottom: 64px;
  overflow: hidden;
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 19.77px + 0.571vw, 28px);
}

.hero__kicker {
  display: flex;
  align-items: center;
  gap: clamp(8px, 7.26px + 0.19vw, 10px);
  font-size: clamp(14px, 13.63px + 0.0952vw, 15px);
  color: var(--qr-text-2);
}

.hero__kicker::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--qr-accent);
}

.hero h1 {
  max-width: 900px;
  font-size: var(--qr-h1);
  font-weight: 700;
  line-height: 1.01;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

@media (min-width: 960px) {
  .hero h1 {
    line-height: 1;
    letter-spacing: -0.045em;
  }
}

.hero .lede {
  max-width: 640px;
  font-size: var(--qr-lede-hero);
}

.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}

.hero__cta .button {
  align-self: stretch;
}

.hero__note {
  font-size: clamp(14px, 13.63px + 0.0952vw, 15px);
  color: var(--qr-text-2);
}

/* The device group is one composition, scaled as a unit: every size is in cqw of its box. */
.hero__devices {
  container-type: inline-size;
  position: relative;
  width: min(100%, 1200px);
  margin: 38px auto 0;
  aspect-ratio: 350 / 400;
}

.hero__devices > * {
  position: absolute;
}

.hero__mac {
  left: 0;
  top: 0;
}

.hero__mac .macbook {
  --w: 99.14cqw;
}

.hero__mac .macbook__screen img.window {
  --win: 79.9%;
}

.hero__watch {
  left: 1.71%;
  bottom: 0;
}

.hero__watch .watch {
  --w: 31.43cqw;
}

.hero__phone {
  right: 0;
  bottom: 0;
}

.hero__phone .iphone {
  --w: 42.86cqw;
}

@media (min-width: 720px) {
  .hero__text {
    align-items: center;
    text-align: center;
  }

  .hero__cta {
    flex-direction: row;
    gap: 20px;
    padding-top: 8px;
  }

  .hero__cta .button {
    align-self: auto;
  }

  .hero__devices {
    aspect-ratio: 1200 / 720;
    margin-top: clamp(48px, 5vw, 72px);
  }

  .hero__mac {
    left: 5.833%;
  }

  .hero__mac .macbook {
    --w: 86.667cqw;
  }

  .hero__watch {
    left: 0;
    bottom: 3.333%;
  }

  .hero__watch .watch {
    --w: 15.667cqw;
  }

  .hero__phone {
    right: 2%;
  }

  .hero__phone .iphone {
    --w: 23.333cqw;
  }
}

/* ---------- The four facts ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 24px;
  padding-block: clamp(32px, 20.11px + 3.048vw, 64px);
}

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

.facts strong {
  font-size: clamp(15px, 13.89px + 0.2857vw, 18px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.facts span {
  font-size: clamp(14px, 13.63px + 0.0952vw, 15px);
  line-height: 1.45;
  color: var(--qr-text-2);
}

@media (min-width: 960px) {
  .facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 48px;
  }

  .facts li {
    gap: 8px;
  }
}

/* ---------- Split: words beside a pair of phones ----------
 * Stacked, the order is heading → phones → list (as mobile.dc.html). Side by side, the
 * heading and list sit centred against the phones; --flip puts the phones first.
 */

.split {
  display: grid;
  grid-template-areas: "head" "media" "list";
  gap: 20px;
}

.split > .head {
  grid-area: head;
}

.split > .media {
  grid-area: media;
}

.split > .features {
  grid-area: list;
  padding-top: 4px;
}

.phones {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
  padding-block: 8px;
}

.phones .iphone {
  --w: min(240px, calc((var(--qr-inner) - 14px) / 2 - 8px));
}

.phones .iphone--low {
  margin-top: calc(var(--w) * 0.2133);
}

.phones--single .iphone {
  --w: 214px;
}

@media (min-width: 960px) {
  .split {
    grid-template-columns: minmax(0, 520px) auto;
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". media" "head media" "list media" ". media";
    justify-content: space-between;
    column-gap: 64px;
    row-gap: 0;
  }

  .split--flip {
    grid-template-columns: auto minmax(0, 520px);
    grid-template-areas: "media ." "media head" "media list" "media .";
  }

  .split--find {
    grid-template-columns: minmax(0, 520px) minmax(0, 560px);
  }

  .split--find > .media {
    justify-content: center;
  }

  .split > .features {
    padding-top: 36px;
  }

  .phones {
    gap: 32px;
    padding-block: 0;
  }

  .phones .iphone {
    --w: clamp(170px, 170px + (100vw - 960px) * 0.2708, 300px);
  }

  .phones--single .iphone {
    --w: clamp(240px, 240px + (100vw - 960px) * 0.1667, 320px);
  }
}

/* Filter chips in Find. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.chips li {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 7px;
  background: var(--qr-fill-chip);
  font-size: 14px;
  color: var(--qr-accent);
}

/* ---------- Privacy (dark) ---------- */

.split--private > .features {
  padding-top: 4px;
}

@media (min-width: 640px) {
  .split--private > .features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 28px;
  }
}

@media (min-width: 960px) {
  .split--private {
    grid-template-columns: minmax(0, 760px) auto;
    column-gap: 80px;
  }

  .split--private h2 {
    max-width: 640px;
  }

  .split--private .lede {
    max-width: 600px;
  }

  .split--private > .features {
    padding-top: 40px;
  }
}

/* ---------- Stack: a heading row, then a row of devices ---------- */

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

.stack__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stack__head h2 {
  max-width: 620px;
}

@media (min-width: 960px) {
  .stack {
    gap: 56px;
  }

  .stack--tight {
    gap: 44px;
  }

  .stack__head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 64px;
  }

  .stack__head .lede {
    max-width: 480px;
  }

  .stack__head .lede--narrow {
    max-width: 460px;
  }
}

/* Three phones with captions. Narrow: a swipeable row that peeks at the next card. */
.cards {
  display: flex;
  gap: 16px;
  margin-inline: calc(-1 * var(--qr-pad-x));
  padding: 8px var(--qr-pad-x) 40px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--qr-pad-x);
  scrollbar-width: none;
}

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

.card {
  display: flex;
  flex: 0 0 232px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  scroll-snap-align: start;
}

.card .iphone {
  --w: 180px;
}

.card__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: stretch;
}

.card__text h3 {
  font-size: var(--qr-item);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.card__text p {
  line-height: 1.5;
  color: var(--qr-text-2);
  text-wrap: pretty;
}

@media (min-width: 640px) {
  .cards {
    --gap: clamp(24px, 2.9vw, 56px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
    margin-inline: 0;
    padding: 8px 0 0;
    overflow: visible;
  }

  .card {
    gap: 20px;
  }

  .card .iphone {
    --w: min(270px, calc((var(--qr-inner) - 2 * var(--gap)) / 3 - 8px));
  }
}

/* ---------- Apple Watch ---------- */

.watches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 28px;
  padding-top: 8px;
}

.watches figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.watches .watch {
  --w: min(180px, calc((var(--qr-inner) - 12px) / 2 - 21px));
}

.watches figcaption {
  font-size: clamp(14px, 13.26px + 0.19vw, 16px);
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
}

@media (min-width: 960px) {
  .watches {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    padding-top: 0;
  }

  .watches figure {
    gap: 20px;
  }

  .watches .watch {
    --w: min(204px, calc((var(--qr-inner) - 96px) / 4 - 8px));
  }
}

/* ---------- Mac ---------- */

.mac-hero {
  display: flex;
  justify-content: center;
  padding-block: 8px;
}

.mac-hero .macbook {
  --w: min(1229px, calc(var(--qr-inner) - 7px));
}

.mac-cards {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding-top: 8px;
}

.mac-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.mac-card .macbook {
  --w: min(369px, calc(var(--qr-inner) - 7px));
}

.mac-card .card__text {
  gap: 4px;
}

@media (min-width: 640px) and (max-width: 959.98px) {
  .mac-card {
    flex-direction: row;
    gap: 32px;
  }

  .mac-card .macbook {
    --w: 320px;
  }
}

@media (min-width: 960px) {
  .mac-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px;
    padding-top: 0;
  }

  .mac-card {
    gap: 24px;
  }

  .mac-card .macbook {
    --w: min(369px, calc((var(--qr-inner) - 96px) / 3));
  }

  .mac-card .card__text {
    gap: 6px;
  }
}

/* ---------- The rest, briefly ---------- */

.features--three {
  gap: 16px;
}

.features--three > li {
  gap: 3px;
  padding-top: clamp(14px, 13.26px + 0.19vw, 16px);
}

.features--three h3 {
  font-size: 16px;
}

.features--three p {
  font-size: 15px;
  line-height: 1.5;
}

@media (min-width: 640px) {
  .features--three {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 26px;
  }
}

@media (min-width: 960px) {
  .features--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 48px;
  }

  .features--three > li {
    padding-top: 14px;
  }
}

/* ---------- On purpose ---------- */

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

.purpose .features {
  padding-top: 4px;
}

.purpose .features h3 {
  font-size: clamp(16px, 14.51px + 0.381vw, 20px);
}

.purpose .features p {
  line-height: 1.5;
}

@media (min-width: 640px) {
  .purpose .features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    row-gap: 32px;
  }
}

@media (min-width: 960px) {
  .purpose {
    display: grid;
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    align-items: center;
    gap: 80px;
  }

  .purpose .head {
    gap: 24px;
  }

  .purpose .lede {
    max-width: 420px;
  }

  .purpose .features {
    padding-top: 0;
  }
}

/* ---------- Join ---------- */

.join {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 19.77px + 0.571vw, 28px);
  padding-block: clamp(72px, 63.09px + 2.286vw, 96px);
  text-align: center;
}

.join img {
  width: clamp(80px, 74.06px + 1.524vw, 96px);
  border-radius: 23%;
}

.join h2 {
  font-size: clamp(44px, 38.06px + 1.524vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.join .lede {
  max-width: 560px;
}

.join .button {
  align-self: stretch;
}

@media (min-width: 720px) {
  .join .button {
    align-self: auto;
  }
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--qr-night);
  border-top: 1px solid var(--qr-hairline-night);
  color: var(--qr-text-2-night);
  font-size: 14px;
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: calc(var(--qr-content) + 2 * var(--qr-pad-x));
  margin-inline: auto;
  padding: 28px var(--qr-pad-x) 40px;
}

@media (min-width: 720px) {
  .site-footer__inner {
    padding-block: 38px;
  }
}

.site-footer nav {
  display: flex;
  gap: clamp(20px, 18.51px + 0.381vw, 28px);
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--qr-text-2-night);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--qr-text-night);
}

.site-footer :focus-visible {
  outline-color: var(--qr-accent-night);
}

/* ---------- Document pages (privacy, support) ---------- */

.doc {
  max-width: calc(680px + 2 * var(--qr-pad-x));
  margin-inline: auto;
  padding: clamp(40px, 25.14px + 3.81vw, 96px) var(--qr-pad-x) var(--qr-pad-y);
}

.doc h1 {
  margin-bottom: 24px;
  font-size: var(--qr-h2);
  line-height: 1.07;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.doc h2 {
  margin: 48px 0 12px;
  font-size: clamp(24px, 21.77px + 0.571vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.doc h3 {
  margin: 28px 0 6px;
  font-size: var(--qr-item);
  font-weight: 600;
  line-height: 1.35;
}

.doc h3.qa + p {
  margin-top: 0;
}

.doc p,
.doc ul,
.doc ol {
  margin: 12px 0;
  color: var(--qr-text-2);
  font-size: var(--qr-body);
  line-height: 1.6;
}

.doc strong {
  color: var(--qr-text);
  font-weight: 600;
}

.doc li + li {
  margin-top: 6px;
}

.doc code {
  white-space: normal;
}