/* Apple-style, white, system type. Tokens first. */
:root {
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #86868b;
  --bg: #ffffff;
  --tile: #f5f5f7;
  --rule: #d2d2d7;
  --link: #0066cc;
  --blue: #0071e3;
  --blue-hover: #0077ed;
  --content: 980px;
  --wide: 1200px;
  --gutter: 22px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
}

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

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 64px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.47 var(--font);
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol { margin: 0; }
h1, h2, h3, .hero-sub, .tile-tagline, .app-tagline, .closing p, .intro p { text-wrap: balance; }
ul { padding: 0; list-style: none; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.eyebrow {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: -0.022em;
  margin-bottom: 8px;
}

/* ------------------------------------------------------------ navigation */

.globalnav {
  background: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.globalnav-inner {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* Spaced capitals, instrument-maker style. The trailing letter-spacing is
   pulled back so the word still lines up with the content edge. */
.wordmark {
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.22em;
  margin-right: -0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wordmark:hover { text-decoration: none; }
.globalnav ul { display: flex; gap: 22px; }
.globalnav ul a { color: var(--text); opacity: 0.8; font-size: 13px; letter-spacing: -0.01em; }
.globalnav ul a:hover { opacity: 1; text-decoration: none; }

.localnav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}
.localnav-inner {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.localnav-title {
  color: var(--text);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.011em;
}
.localnav-title:hover { text-decoration: none; }
.localnav ul { display: flex; align-items: center; gap: 22px; }
.localnav ul a:not(.pill) { color: var(--text); font-size: 12px; letter-spacing: -0.01em; opacity: 0.88; }
.localnav ul a[aria-current="page"] { opacity: 0.48; pointer-events: none; }

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

.pill {
  display: inline-block;
  padding: 11px 21px;
  border-radius: 980px;
  background: var(--blue);
  border: 1px solid var(--blue);
  color: #fff;
  font-size: 17px;
  line-height: 1.18;
  letter-spacing: -0.022em;
  white-space: nowrap;
  transition: background 0.2s;
}
.pill:hover { background: var(--blue-hover); text-decoration: none; }
.pill-outline { background: transparent; color: var(--blue); }
.pill-outline:hover { background: var(--blue); color: #fff; }
.pill-small { padding: 4px 11px; font-size: 12px; letter-spacing: -0.01em; }
.pill-large { padding: 14px 26px; }
/* In place of an App Store button, for an app that is not released yet. */
.pill-soon, .pill-soon:hover {
  background: transparent;
  border-color: var(--rule);
  color: var(--text-2);
  cursor: default;
}

.more::after { content: "\00a0›"; }

/* ------------------------------------------------------------ home */

.hero {
  max-width: var(--content);
  margin: 0 auto;
  padding: 120px var(--gutter) 88px;
  text-align: center;
}
.hero h1,
.app-hero h1,
.privacy-hero h1 {
  font-size: clamp(44px, 7.4vw, 80px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.hero-sub {
  max-width: 640px;
  margin: 24px auto 0;
  font-size: clamp(21px, 2.4vw, 24px);
  line-height: 1.33;
  letter-spacing: 0.009em;
  color: var(--text-2);
}

/* A little wider than the text column, so five headings fit on one line each. */
.principles-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--gutter) 120px;
}
.principles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px 28px;
  border-top: 1px solid var(--rule);
  padding-top: 40px;
}
.principle svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--text);
  color: var(--text);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 16px;
}
.principle h3 { hyphens: manual; font-size: 21px; line-height: 1.19; font-weight: 600; letter-spacing: 0.011em; margin-bottom: 8px; }
.principle p { color: var(--text-2); }

.apps { padding: 0 12px 12px; }
.section-title {
  max-width: var(--content);
  margin: 0 auto 40px;
  padding: 0 10px;
  text-align: center;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.003em;
}
.tiles {
  max-width: var(--wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.tile {
  container-type: inline-size; /* lets .tile-shots size itself from the tile's width (cqw) */
  background: var(--tile);
  border-radius: 28px;
  padding: 56px 24px 0;
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tiles .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tile .app-icon { width: 72px; margin-bottom: 20px; }
.tile h3 { font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: 0; }
.tile-tagline { margin-top: 8px; font-size: 21px; line-height: 1.38; letter-spacing: 0.011em; color: var(--text-2); max-width: 420px; }
.tile-actions { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.tile-actions .pill { padding: 8px 16px; font-size: 15px; }
/* Every tile shows three shots at the same size, so the full-width last tile
   matches the half-width ones. The row is cut off at the tile's bottom edge. */
.tile-shots {
  width: min(100%, 528px);   /* three 168px shots + two 12px gaps */
  aspect-ratio: 528 / 300;   /* shows the top ~83% of each shot */
  min-height: 0;             /* hold the ratio; the tile clips what hangs below */
  margin-top: 44px;
  display: flex;
  justify-content: center;
  align-items: flex-start;   /* not stretch: keep each shot's aspect ratio */
  gap: 12px;
}
/* The full-width last tile lays its shots out at a half tile's content width.
   cqw measures this tile's content box (border box minus 2 × 24px padding), so a
   half tile's content is ((100cqw + 48px) - 12px gap) / 2 - 48px = 50cqw - 30px. */
.tiles .tile:last-child:nth-child(odd) .tile-shots { width: min(528px, calc(50cqw - 30px)); }
.tile-shots img {
  width: calc((100% - 24px) / 3);
  height: auto;
  flex: none;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.08);
}

.closing {
  max-width: 720px;
  margin: 0 auto 120px;
  padding: 120px var(--gutter) 120px;
  text-align: center;
  border-bottom: 1px solid var(--rule);
}
.closing h2 { font-size: clamp(32px, 5vw, 48px); line-height: 1.08; font-weight: 600; letter-spacing: -0.003em; }
.closing p { margin-top: 20px; font-size: 21px; line-height: 1.38; letter-spacing: 0.011em; color: var(--text-2); }
.closing p:last-child { margin-top: 24px; }

.about {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter) 140px;
  text-align: center;
}
.about-word {
  font-size: clamp(40px, 6vw, 56px);
  line-height: 1.07;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 20px;
}
.about p:not(.eyebrow) { font-size: 21px; line-height: 1.43; letter-spacing: 0.011em; color: var(--text-2); }
.about i { font-style: italic; }

/* ------------------------------------------------------------ app page */

.app-icon {
  border-radius: 22.37%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07);
}
.app-icon-large { width: 128px; margin: 0 auto 28px; }

.app-hero {
  max-width: var(--content);
  margin: 0 auto;
  padding: 88px var(--gutter) 64px;
  text-align: center;
}
.app-tagline {
  margin-top: 12px;
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.004em;
  color: var(--text-2);
}
.app-meta { margin: 20px 0 32px; font-size: 14px; color: var(--text-3); letter-spacing: -0.016em; }

.gallery { padding-bottom: 96px; }
.gallery-track {
  --edge: max(var(--gutter), calc((100vw - var(--content)) / 2 + var(--gutter)));
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--edge);
  padding: 4px var(--edge) 24px;
  scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track li { flex: none; scroll-snap-align: start; }
.gallery-track img {
  width: 280px;
  border-radius: 24px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.08);
}
/* Under the gallery: the Light/Dark switch centred, paddles on the right. */
.gallery-controls {
  max-width: var(--content);
  margin: 8px auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.gallery-paddles {
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: 16px;
}
.appearance-toggle {
  grid-column: 2;
  display: inline-flex;
  padding: 3px;
  background: #e8e8ed;
  border-radius: 980px;
}
.appearance-toggle button {
  min-width: 76px;
  padding: 7px 16px;
  border: 0;
  border-radius: 980px;
  background: transparent;
  color: var(--text);
  font: 600 14px/1.2 var(--font);
  letter-spacing: -0.016em;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
.appearance-toggle button[aria-pressed="false"] { color: var(--text-2); }
.appearance-toggle button[aria-pressed="true"] {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}
.gallery-paddles button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #e8e8ed;
  color: var(--text);
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  transition: background 0.2s, opacity 0.2s;
}
.gallery-paddles button:hover { background: #dcdce1; }
.gallery-paddles button:disabled { opacity: 0.36; cursor: default; background: #e8e8ed; }
.gallery-paddles svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------ iPhone Duo */

/* A row under the screenshots: folded, half open and open, all at one
   height. Bezels are ~2% of the device, as on the hardware. */
.duo-row {
  --duo-h: clamp(220px, 22vw, 330px);
  margin-top: 72px;
  text-align: center;
}
.duo-title { font-size: clamp(28px, 4vw, 40px); line-height: 1.1; font-weight: 600; letter-spacing: -0.003em; padding: 0 var(--gutter); }
.duo-sub { margin-top: 8px; font-size: 21px; color: var(--text-2); padding: 0 var(--gutter); }
/* Centred when all three fit; scrolls sideways (snapping) when they don't. */
.duo-track {
  display: flex;
  align-items: flex-start;   /* devices share a top line; captions can differ in length */
  gap: 48px;
  width: max-content;
  max-width: 100%;
  margin: 40px auto 0;
  padding: 8px var(--gutter) 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  scrollbar-width: none;
}
.duo-track::-webkit-scrollbar { display: none; }
.duo-track li { flex: none; scroll-snap-align: center; }
/* min-content: each caption wraps to its own device's width, so a long
   caption can't widen the row. */
.duo-track figure { margin: 0; width: min-content; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.duo-track figcaption { min-width: 100%; font-size: 15px; line-height: 1.4; color: var(--text-2); text-wrap: balance; }
.duo-track figcaption strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }

.duo-screen img, .duo-flat img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Folded: the 466x678pt cover screen. The camera is a hole in the top-right
   corner, above the status bar that runs down that edge. */
.duo-closed {
  height: var(--duo-h);
  aspect-ratio: 466 / 678;
  padding: 1.9%;
  background: #1a1a1c;
  border-radius: 12.8% / 8.8%;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
}
.duo-screen { position: relative; height: 100%; }
.duo-screen img { border-radius: 11.5% / 7.9%; }
.duo-camera {
  position: absolute;
  top: 1.8%;
  right: 6.2%;
  width: 7.7%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #0b0b0c;
}

/* Open flat: the 951x669pt inner display, held like a book. */
.duo-flat {
  height: var(--duo-h);
  aspect-ratio: 951 / 669;
  padding: 1.1%;
  background: #1a1a1c;
  border-radius: 5% / 7.1%;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
}
.duo-flat img { border-radius: 4.3% / 6.1%; }

/* Half open: the same spread, each half turned toward you around the fold. */
.duo-book {
  display: flex;
  perspective: calc(var(--duo-h) * 5);
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.14));
}
.duo-half {
  position: relative;
  height: var(--duo-h);
  aspect-ratio: 475.5 / 669;
  overflow: hidden;
  border: calc(var(--duo-h) * 0.018) solid #1a1a1c;
  background: #1a1a1c;
}
.duo-half img { position: absolute; top: 0; height: 100%; width: 200%; max-width: none; }
.duo-half-left {
  border-right: 0;
  border-radius: calc(var(--duo-h) * 0.07) 0 0 calc(var(--duo-h) * 0.07);
  transform-origin: right center;
  transform: rotateY(26deg);
}
.duo-half-right {
  border-left: 0;
  border-radius: 0 calc(var(--duo-h) * 0.07) calc(var(--duo-h) * 0.07) 0;
  transform-origin: left center;
  transform: rotateY(-26deg);
}
.duo-half-left img { left: 0; }
.duo-half-right img { left: -100%; }
/* Light falls off into the fold. */
.duo-half::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.duo-half-left::after { background: linear-gradient(to left, rgba(0, 0, 0, 0.16), transparent 28%); }
.duo-half-right::after { background: linear-gradient(to right, rgba(0, 0, 0, 0.10), transparent 28%); }

.intro {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--gutter) 96px;
  text-align: center;
}
.intro p {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.004em;
  color: var(--text-2);
}
.intro strong { color: var(--text); font-weight: 600; }

.features {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--gutter) 96px;
}
.features ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 40px;
  border-top: 1px solid var(--rule);
  padding-top: 48px;
}
.features h3 { font-size: 21px; line-height: 1.19; font-weight: 600; letter-spacing: 0.011em; margin-bottom: 8px; }
.features p { color: var(--text-2); }

/* How the app differs from its competitors: one heading, one paragraph. */
.why {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter) 96px;
  text-align: center;
}
.why h2 {
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.003em;
  margin-bottom: 20px;
}
.why p { font-size: 21px; line-height: 1.43; letter-spacing: 0.011em; color: var(--text-2); text-wrap: pretty; }

.proof {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--gutter) 96px;
  text-align: center;
}
.stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px 80px;
  margin-bottom: 96px;
}
.stats li { max-width: 460px; }
.stats strong {
  display: block;
  font-size: clamp(34px, 5.6vw, 56px);
  line-height: 1.07;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.stats span { display: block; margin-top: 8px; font-size: 17px; color: var(--text-2); text-wrap: balance; }
.proof-title {
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.003em;
  margin-bottom: 40px;
}
.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.reviews-single { grid-template-columns: minmax(0, 620px); justify-content: center; }
.review {
  margin: 0;
  height: 100%;
  background: var(--tile);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.review .stars { color: #ff9500; font-size: 17px; letter-spacing: 3px; margin-bottom: 16px; }
.review blockquote { margin: 0 0 20px; }
/* Centre stars + quote in the space above the source line, which stays at the
   bottom: the two auto margins split the free space evenly. */
.review > :first-child { margin-top: auto; }
.review figcaption { margin-top: auto; }
.review blockquote p { font-size: 21px; line-height: 1.38; font-weight: 600; letter-spacing: 0.011em; }
.reviews-single .review blockquote p { font-size: 24px; line-height: 1.33; }
.review figcaption { font-size: 14px; color: var(--text-3); letter-spacing: -0.016em; }

.privacy-card {
  max-width: calc(var(--content) - 2 * var(--gutter));
  margin: 0 auto 24px;
  background: var(--tile);
  border-radius: 28px;
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.privacy-card h2 { font-size: 32px; line-height: 1.125; font-weight: 600; letter-spacing: 0.004em; margin-bottom: 20px; }
.checks li {
  position: relative;
  padding: 0 0 16px 34px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.checks li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}

.note {
  max-width: var(--content);
  margin: 0 auto;
  padding: 8px var(--gutter) 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: -0.01em;
}

.more-apps {
  max-width: var(--content);
  margin: 0 auto;
  padding: 96px var(--gutter) 120px;
  text-align: center;
}
.more-apps h2 { font-size: 28px; font-weight: 600; letter-spacing: 0.007em; margin-bottom: 36px; }
.more-apps ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 40px; }
.more-apps a { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--text); font-size: 14px; }
.more-apps a:hover { text-decoration: none; color: var(--link); }
.more-apps .app-icon { width: 64px; }

/* ------------------------------------------------------------ privacy */

.policy {
  max-width: 736px;
  margin: 0 auto;
  padding: 80px var(--gutter) 120px;
}
.policy .eyebrow a { color: var(--text-2); }
.policy h1 { font-size: clamp(40px, 6vw, 56px); line-height: 1.07; font-weight: 600; letter-spacing: -0.005em; }
.policy-date { margin: 16px 0 48px; font-size: 14px; color: var(--text-3); }
.policy h2 {
  font-size: 24px;
  line-height: 1.17;
  font-weight: 600;
  letter-spacing: 0.009em;
  margin: 48px 0 14px;
}
.policy p, .policy li { font-size: 17px; line-height: 1.53; }
.policy p + p { margin-top: 14px; }
.policy ul, .policy ol { margin: 14px 0; padding-left: 22px; }
.policy ul { list-style: disc; }
.policy ol { list-style: decimal; }
.policy li { margin-bottom: 10px; padding-left: 4px; }
.policy li::marker { color: var(--text-3); }
.policy strong { font-weight: 600; }
.policy a { overflow-wrap: anywhere; }

.privacy-hero {
  max-width: var(--content);
  margin: 0 auto;
  padding: 120px var(--gutter) 72px;
  text-align: center;
}
.policies {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--gutter) 140px;
}
.policies h2 { font-size: 14px; font-weight: 600; color: var(--text-3); letter-spacing: -0.016em; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.policies li { border-bottom: 1px solid var(--rule); }
.policy-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 22px 0;
  color: var(--text);
}
.policy-row:hover { text-decoration: none; }
.policy-row .app-icon { width: 56px; }
.policy-row-text strong { display: block; font-size: 19px; font-weight: 600; letter-spacing: 0.012em; margin-bottom: 2px; }
.policy-row-text span { color: var(--text-2); font-size: 15px; line-height: 1.47; letter-spacing: -0.016em; display: block; }
.policy-row-link { color: var(--link); font-size: 15px; white-space: nowrap; }
.policy-row-link::after { content: "\00a0›"; }
.policy-row:hover .policy-row-link { text-decoration: underline; }

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

.footer { background: var(--tile); font-size: 12px; line-height: 1.33; letter-spacing: -0.01em; color: var(--text-3); }
.footer-inner { max-width: var(--content); margin: 0 auto; padding: 20px var(--gutter) 24px; }
.footer-inner > p { padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 14px; }
.footer-row ul { display: flex; flex-wrap: wrap; gap: 0; }
.footer-row li + li::before { content: "|"; margin: 0 10px; color: var(--rule); }
.footer a { color: var(--text-2); }

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

@media (max-width: 1068px) {
  .principles { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 734px) {
  :root { --gutter: 16px; }
  .globalnav ul { gap: 16px; }
  .hero { padding: 72px var(--gutter) 56px; }
  .hero br { display: none; }
  .principles-wrap { padding-bottom: 80px; }
  .principles { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; }
  .apps { padding: 0 8px 8px; }
  .tiles { grid-template-columns: 1fr; gap: 8px; }
  .tile { padding-top: 44px; border-radius: 22px; }
  .tile h3 { font-size: 32px; }
  .tile-tagline { font-size: 19px; }
  /* Phones: a larger middle shot, with the other two peeking in from the sides. */
  .tile-shots,
  .tiles .tile:last-child:nth-child(odd) .tile-shots { width: 100%; aspect-ratio: auto; height: min(320px, 78cqw); margin-top: 36px; }
  .tile-shots img { width: 46%; border-radius: 16px 16px 0 0; }
  .closing { padding: 88px var(--gutter) 88px; margin: 0 var(--gutter) 88px; }
  .about { padding-bottom: 100px; }
  .about p:not(.eyebrow) { font-size: 19px; }
  .closing p { font-size: 19px; }

  .localnav-title { font-size: 19px; }
  .localnav ul { gap: 14px; }
  .app-hero { padding: 56px var(--gutter) 48px; }
  .app-icon-large { width: 104px; }
  .gallery { padding-bottom: 64px; }
  .gallery-track { gap: 12px; }
  .gallery-track img { width: min(64vw, 260px); border-radius: 18px; }
  .gallery-paddles { display: none; }
  .gallery-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .duo-row { margin-top: 48px; }
  .duo-sub { font-size: 19px; }
  .duo-track { gap: 28px; justify-content: flex-start; }
  .intro, .features { padding-bottom: 64px; }
  .features ul { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; }
  .why { padding-bottom: 64px; }
  .why p { font-size: 19px; }
  .proof { padding-bottom: 64px; }
  .stats { gap: 28px; margin-bottom: 64px; }
  .review { padding: 24px; border-radius: 20px; }
  .review blockquote p, .reviews-single .review blockquote p { font-size: 19px; }
  .privacy-card { grid-template-columns: 1fr; padding: 36px 24px; margin: 0 var(--gutter) 24px; border-radius: 22px; gap: 28px; }
  .privacy-card h2 { font-size: 28px; }
  .more-apps { padding: 72px var(--gutter) 88px; }

  .policy { padding: 56px var(--gutter) 88px; }
  .privacy-hero { padding: 72px var(--gutter) 48px; }
  .policy-row { grid-template-columns: 48px 1fr; gap: 16px; align-items: start; }
  .policy-row .app-icon { width: 48px; }
  .policy-row-link { grid-column: 2; }
  .footer-row { flex-direction: column; }
}

@media (min-width: 735px) and (max-width: 1068px) {
  .features ul { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pill, .gallery-paddles button { transition: none; }
}