/* Stitch Garden — shared styles for the marketing site.
   Colours mirror ios/App/Design/Theme.swift, so the site and the app agree. */

:root {
  --accent: #5a6b3c;
  --accent-strong: #465330;
  --accent-ink: #fffcfc;
  --done: #537961;
  --canvas: #faf5f5;
  --surface: #fffcfc;
  --mat: #f3ecee;
  --edge: #dfd0d6;
  --text: #3a2e36;
  --text-secondary: #6e5f68;
  --text-tertiary: var(--text-secondary);
  --blush: #f7e9ed;
  --aida: rgba(58, 46, 54, 0.055);
  --shadow: rgba(58, 46, 54, 0.08);
  --shadow-deep: rgba(58, 46, 54, 0.22);
  --glass: rgba(250, 245, 245, 0.72);
  --bezel: #1c1a1d;
  --bezel-edge: #3b373c;
  --radius-card: 18px;
  --radius-chip: 12px;
  --space-tight: 6px;
  --space-snug: 10px;
  --space-regular: 16px;
  --space-loose: 22px;
  --max-width: 1200px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Georgia", ui-serif, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #b2c48c;
    --accent-strong: #c9d9a8;
    --accent-ink: #171316;
    --done: #93c7a3;
    --canvas: #171316;
    --surface: #231d21;
    --mat: #1d181b;
    --edge: #443a40;
    --text: #f4ecef;
    --text-secondary: #d2c4cb;
    --text-tertiary: #9c8e96;
    --blush: #2e2329;
    --aida: rgba(244, 236, 239, 0.045);
    --shadow: rgba(0, 0, 0, 0.35);
    --shadow-deep: rgba(0, 0, 0, 0.6);
    --glass: rgba(23, 19, 22, 0.72);
    --bezel: #0c0b0c;
    --bezel-edge: #4a454b;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

@media (prefers-color-scheme: dark) {
  a {
    color: var(--accent);
  }
}

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

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

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--space-loose);
  padding-right: var(--space-loose);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  background: var(--surface);
  padding: 8px 14px;
  border-radius: 8px;
}

.skip:focus {
  left: 8px;
}

/* Header — glass belongs to the control layer */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px 0;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-regular);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-snug);
  text-decoration: none;
  color: var(--text);
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .brand {
    color: var(--text);
  }
}

.brand img {
  height: 34px;
  width: 34px;
  border-radius: 9px;
  box-shadow: 0 2px 6px var(--shadow);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-loose);
}

.site-nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 15px;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--text);
}

.site-nav .nav-cta {
  color: var(--accent-ink);
  background: var(--accent-strong);
  padding: 7px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
}

.site-nav .nav-cta:hover {
  color: var(--accent-ink);
  background: var(--accent);
}

@media (prefers-color-scheme: dark) {
  .site-nav .nav-cta {
    background: var(--accent);
  }
  .site-nav .nav-cta:hover {
    background: var(--accent-strong);
  }
}

@media (max-width: 720px) {
  .site-nav .nav-section {
    display: none;
  }
}

/* Buttons */

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.button:hover {
  transform: translateY(-1px);
}

.button--primary {
  background: var(--accent-strong);
  color: var(--accent-ink);
  box-shadow: 0 8px 20px var(--shadow);
}

.button--primary:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

@media (prefers-color-scheme: dark) {
  .button--primary {
    background: var(--accent);
  }
  .button--primary:hover {
    background: var(--accent-strong);
  }
}

.button--quiet {
  background: var(--surface);
  color: var(--text);
  border-color: var(--edge);
}

@media (prefers-color-scheme: dark) {
  .button--quiet {
    color: var(--text);
  }
}

.button svg {
  flex-shrink: 0;
}

/* Store badges — not live until launch */

.badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 14px;
  border-radius: 12px;
  background: #000;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  line-height: 1.25;
}

.badge strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.badge svg {
  flex-shrink: 0;
}

.badge[aria-disabled="true"] {
  cursor: default;
}

/* Hero */

.hero {
  position: relative;
  padding: 56px 0 72px;
  overflow: hidden;
  isolation: isolate;
}

/* Aida cloth: a faint even-weave grid, fading out from the devices */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--aida) 1px, transparent 1px),
    linear-gradient(90deg, var(--aida) 1px, transparent 1px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 70% 45%, #000 20%, transparent 75%);
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 720px;
  height: 720px;
  right: -160px;
  top: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--blush) 0%, transparent 65%);
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: center;
}

.hero-copy {
  max-width: 540px;
}

.eyebrow {
  display: inline-block;
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-snug);
}

@media (prefers-color-scheme: dark) {
  .eyebrow {
    color: var(--accent);
  }
}

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(38px, 5.2vw, 62px);
  line-height: 1.05;
  margin: 0 0 20px;
  letter-spacing: -0.02em;
}

.hero h1 em {
  font-style: italic;
  color: var(--accent-strong);
}

@media (prefers-color-scheme: dark) {
  .hero h1 em {
    color: var(--accent);
  }
}

.lede {
  color: var(--text-secondary);
  font-size: 19px;
  margin: 0 0 28px;
}

.lede code,
.fmt-inline {
  font-family: var(--mono);
  font-size: 0.88em;
  color: var(--text);
  background: var(--mat);
  border: 1px solid var(--edge);
  border-radius: 6px;
  padding: 0 5px;
  white-space: nowrap;
}

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

.hero-note {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-secondary);
  font-size: 14px;
}

.hero-note li::before {
  content: "×";
  color: var(--accent);
  font-weight: 700;
  margin-right: 6px;
}

.hero-sample {
  font-size: 15px;
  color: var(--text-secondary);
}

.hero-sample a {
  font-weight: 600;
}

@media (max-width: 900px) {
  .hero {
    padding-top: 32px;
  }
  .hero .wrap {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-copy {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
  }
  .badges,
  .hero-note {
    justify-content: center;
  }
  .hero-actions {
    align-items: center;
  }
  .hero::before {
    -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 70%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 90% 60% at 50% 70%, #000 20%, transparent 75%);
  }
}

/* Devices — frames drawn here, screenshots are plain captures */

.device {
  container-type: inline-size;
  position: relative;
}

.device-frame {
  position: relative;
  background: var(--bezel);
  box-shadow:
    inset 0 0 0 1.5px var(--bezel-edge),
    0 2px 4px var(--shadow),
    0 30px 60px -12px var(--shadow-deep);
}

.device-frame img,
.device-frame picture {
  width: 100%;
  display: block;
}

/* Hold the screen's shape before (or without) the picture, and never show alt text in a bezel */
.device-frame img {
  background: var(--mat);
  color: transparent;
  object-fit: cover;
}

.device--phone .device-frame img {
  aspect-ratio: 1206 / 2622;
}

.device--tablet.is-landscape .device-frame img {
  aspect-ratio: 2420 / 1668;
}

.device--tablet.is-portrait .device-frame img {
  aspect-ratio: 1668 / 2420;
}

.device--phone .device-frame {
  padding: 3.6cqw;
  border-radius: 17cqw;
}

.device--phone .device-frame img {
  border-radius: 13.6cqw;
}

/* Dynamic Island */
.device--phone .device-frame::after {
  content: "";
  position: absolute;
  top: 6.2cqw;
  left: 50%;
  width: 29cqw;
  height: 8.6cqw;
  transform: translateX(-50%);
  background: #000;
  border-radius: 99px;
}

.device--tablet .device-frame {
  padding: 2.4cqw;
  border-radius: 4.8cqw;
}

.device--tablet .device-frame img {
  border-radius: 2.6cqw;
}

/* Front camera on the landscape edge */
.device--tablet.is-landscape .device-frame::after {
  content: "";
  position: absolute;
  top: 1cqw;
  left: 50%;
  width: 0.7cqw;
  height: 0.7cqw;
  transform: translateX(-50%);
  background: #2a2a30;
  border-radius: 50%;
}

.device--tablet.is-portrait .device-frame::after {
  content: "";
  position: absolute;
  left: 1cqw;
  top: 50%;
  width: 0.9cqw;
  height: 0.9cqw;
  transform: translateY(-50%);
  background: #2a2a30;
  border-radius: 50%;
}

/* Hero stage: tablet behind, phone in front */

.stage {
  position: relative;
  padding-bottom: 6%;
}

.stage .device--tablet {
  width: 100%;
}

.stage .device--phone {
  position: absolute;
  width: 29%;
  left: -7%;
  bottom: -4%;
}

@media (max-width: 900px) {
  .stage {
    max-width: 640px;
    margin: 0 auto;
    padding-left: 6%;
  }
  .stage .device--phone {
    left: 0;
  }
}

/* Proof strip */

.proof {
  padding: 28px 0;
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  background: var(--surface);
}

.proof ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-loose);
  text-align: center;
}

.proof strong {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.1;
  color: var(--text);
}

.proof span {
  color: var(--text-secondary);
  font-size: 14px;
}

@media (max-width: 640px) {
  .proof ul {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 24px;
  }
}

/* Sections */

.section {
  padding: 96px 0;
}

.section--tint {
  background: var(--mat);
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}

.section-head h2,
.story h2,
.split h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
}

.section-head p {
  color: var(--text-secondary);
  font-size: 18px;
  margin: 0;
}

@media (max-width: 640px) {
  .section {
    padding: 64px 0;
  }
  .section-head {
    margin-bottom: 40px;
  }
}

/* Formats — presented as a chart's own colour key, not a pill row */

.key {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius-card);
  max-width: 760px;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 10px 30px var(--shadow);
}

.key-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-regular);
  padding: 16px var(--space-loose);
}

.key-row + .key-row {
  border-top: 1px solid var(--edge);
}

.key-row .sym {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  transform: translateY(4px);
}

.key-row .fmt {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--accent-strong);
  min-width: 110px;
}

@media (prefers-color-scheme: dark) {
  .key-row .fmt {
    color: var(--accent);
  }
}

.key-row .leader {
  flex: 1;
  border-bottom: 1px dotted var(--edge);
  height: 0;
  transform: translateY(-5px);
  min-width: 24px;
}

.key-row .what {
  color: var(--text-secondary);
  font-size: 15px;
  text-align: right;
  max-width: 400px;
}

.key-foot {
  text-align: center;
  color: var(--text-secondary);
  font-size: 15px;
  margin: 24px auto 0;
  max-width: 620px;
}

@media (max-width: 600px) {
  .key-row .leader {
    display: none;
  }
  .key-row {
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .key-row .what {
    text-align: left;
    flex-basis: 100%;
    padding-left: 38px;
  }
}

/* Stories — a screenshot beside its story, sides alternating */

.stories {
  display: grid;
  gap: 120px;
}

.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}

.story:nth-child(even) .story-media {
  order: 2;
}

.story-media {
  display: flex;
  justify-content: center;
  position: relative;
}

.story-media::before {
  content: "";
  position: absolute;
  inset: 8% 4%;
  border-radius: 40px;
  background: var(--story-tint, var(--blush));
  opacity: 0.55;
  z-index: -1;
  transform: rotate(-3deg);
}

.story:nth-child(even) .story-media::before {
  transform: rotate(3deg);
}

.story-media .device--phone {
  width: min(320px, 72%);
}

.story-copy {
  max-width: 480px;
}

.story-copy > p {
  color: var(--text-secondary);
  font-size: 18px;
  margin: 0 0 20px;
}

.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.ticks li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
}

.ticks li::before {
  content: "×";
  position: absolute;
  left: 4px;
  top: -1px;
  color: var(--done);
  font-weight: 800;
  font-size: 18px;
}

@media (max-width: 860px) {
  .stories {
    gap: 80px;
  }
  .story {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .story:nth-child(even) .story-media {
    order: 0;
  }
  .story-copy {
    margin: 0 auto;
  }
  .story-media .device--phone {
    width: min(290px, 70%);
  }
}

/* iPad showcase */

.showcase .device--tablet {
  max-width: 980px;
  margin: 0 auto;
}

.showcase-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 980px;
  margin: 56px auto 0;
}

.showcase-points h3 {
  font-size: 17px;
  margin: 0 0 6px;
}

.showcase-points p {
  color: var(--text-secondary);
  font-size: 15px;
  margin: 0;
}

@media (max-width: 760px) {
  .showcase-points {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* Gallery — a row of phones that scrolls on small screens */

.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 1fr);
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 12px var(--space-loose) 40px;
  margin: 0 calc(var(--space-loose) * -1);
  scrollbar-width: none;
}

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

.gallery figure {
  margin: 0;
  scroll-snap-align: center;
}

.gallery figcaption {
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
  margin-top: 18px;
}

/* Feature grid — a thread swatch, not an icon-in-a-circle */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 580px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

.card {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: var(--space-loose);
  box-shadow: 0 10px 24px var(--shadow), 0 1px 2px var(--shadow);
}

.card h3 {
  font-size: 17px;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.card p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 15px;
}

.swatch {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Split — text beside a panel */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.split > div > p {
  color: var(--text-secondary);
  font-size: 18px;
}

@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* Languages */

.langs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.langs li {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 15px;
}

/* Privacy */

.privacy-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.privacy-list li {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 14px;
  padding: 16px 18px 16px 46px;
  position: relative;
  font-size: 15px;
  color: var(--text-secondary);
}

.privacy-list li strong {
  display: block;
  color: var(--text);
  font-size: 16px;
  margin-bottom: 2px;
}

.privacy-list li::before {
  content: "✓";
  position: absolute;
  left: 18px;
  top: 15px;
  color: var(--done);
  font-weight: 700;
}

/* Price */

.price-card {
  background: var(--surface);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 20px 50px var(--shadow);
  border: 1px solid var(--edge);
  position: relative;
  overflow: hidden;
}

.price-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 10px, transparent 10px 16px);
  opacity: 0.7;
}

.price-card h3 {
  font-family: var(--serif);
  font-size: 30px;
  margin: 0 0 6px;
}

.price-card > p {
  color: var(--text-secondary);
  margin: 0 0 22px;
}

/* Sample chart */

.sample {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 28px;
  padding: 36px;
  box-shadow: 0 20px 50px var(--shadow);
}

.sample img {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 10px 30px var(--shadow);
  image-rendering: pixelated;
}

.sample h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 34px);
  margin: 0 0 10px;
}

.sample p {
  color: var(--text-secondary);
  margin: 0 0 20px;
}

.sample .small {
  font-size: 14px;
  color: var(--text-tertiary);
  margin: 14px 0 0;
}

@media (max-width: 700px) {
  .sample {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 28px 22px;
  }
  .sample img {
    max-width: 220px;
    margin: 0 auto;
  }
}

/* FAQ */

.faq {
  max-width: 800px;
  margin: 0 auto;
  border-top: 1px solid var(--edge);
}

.faq details {
  border-bottom: 1px solid var(--edge);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 40px 20px 0;
  font-weight: 600;
  font-size: 17px;
  position: relative;
}

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

.faq summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 400;
  color: var(--accent);
  transition: transform 0.2s;
}

.faq details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq details p {
  margin: 0 0 20px;
  color: var(--text-secondary);
  font-size: 16px;
  max-width: 700px;
}

/* Closing call */

.closing {
  text-align: center;
  padding: 104px 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--aida) 1px, transparent 1px),
    linear-gradient(90deg, var(--aida) 1px, transparent 1px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse 50% 70% at 50% 50%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 50% 70% at 50% 50%, #000 10%, transparent 75%);
}

.closing img.icon {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  margin: 0 auto 26px;
  box-shadow: 0 16px 40px var(--shadow-deep);
}

.closing h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 48px);
  margin: 0 0 12px;
  letter-spacing: -0.015em;
}

.closing p {
  color: var(--text-secondary);
  font-size: 18px;
  margin: 0 auto 30px;
  max-width: 520px;
}

.closing .badges {
  justify-content: center;
}

/* Reveal on scroll — progressive, and never for those who asked for less motion */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
    @keyframes reveal {
      from {
        opacity: 0;
        transform: translateY(32px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
  }
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--edge);
  padding: 40px 0 48px;
  background: var(--surface);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-regular);
  align-items: center;
  justify-content: space-between;
  color: var(--text-tertiary);
  font-size: 14px;
}

.site-footer .foot-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
}

.site-footer .foot-brand img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-loose);
}

.site-footer a {
  color: var(--text-secondary);
  text-decoration: none;
}

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

/* Simple content pages (Support / Privacy) */

.doc {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 0 80px;
}

.doc h1 {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 40px);
  margin: 0 0 8px;
}

.doc .updated {
  color: var(--text-tertiary);
  font-size: 14px;
  margin: 0 0 40px;
}

.doc h2 {
  font-family: var(--serif);
  font-size: 22px;
  margin: 40px 0 12px;
}

.doc h3 {
  font-size: 17px;
  margin: 24px 0 8px;
}

.doc p,
.doc li {
  color: var(--text-secondary);
  font-size: 16px;
}

.doc strong {
  color: var(--text);
}

.doc a {
  word-break: break-word;
}

.doc .card {
  margin: 24px 0;
}

@media (max-width: 640px) {
  .site-nav {
    gap: var(--space-regular);
  }
  .site-footer .wrap {
    flex-direction: column;
    align-items: flex-start;
  }
}

.badge {
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 6px 16px var(--shadow);
  min-width: 168px;
}

.badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px var(--shadow);
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  .badge,
  .badge:hover {
    background: #000;
    color: #fff;
    box-shadow: inset 0 0 0 1px #6b6368, 0 6px 16px var(--shadow);
  }
}

.store-note {
  margin: -4px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}

/* Phones: one line for the header, both store badges on one row */

.brand span,
.site-nav a {
  white-space: nowrap;
}

@media (max-width: 480px) {
  .site-header .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
  .brand {
    font-size: 18px;
    gap: 8px;
  }
  .brand img {
    width: 30px;
    height: 30px;
  }
  .site-nav {
    gap: 14px;
  }
  .site-nav a {
    font-size: 14px;
  }
  .site-nav .nav-cta {
    padding: 6px 12px;
    font-size: 13px;
  }
  .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
  .badge {
    min-width: 0;
    padding: 8px 14px 8px 12px;
  }
  .badge strong {
    font-size: 15px;
  }
  .lede {
    font-size: 17px;
  }
}


/* A container has no width of its own to give; the stage must be told its width */
.stage {
  width: 100%;
}

@media (max-width: 480px) {
  .proof strong {
    font-size: 24px;
  }
  .proof span {
    font-size: 13px;
  }
}

/* The gallery bleeds to the screen's edge by exactly the gutter it sits in */
@media (max-width: 480px) {
  .gallery {
    margin: 0 -16px;
    padding: 12px 16px 40px;
  }
}

@media (prefers-color-scheme: dark) {
  .story-media::before {
    opacity: 0.14;
  }
}

.split--wide {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

@media (max-width: 860px) {
  .split--wide {
    grid-template-columns: 1fr;
  }
}

/* Eight privacy facts: always whole rows */
.privacy-list {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1000px) {
  .privacy-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .privacy-list {
    grid-template-columns: 1fr;
  }
}

/* The film: a plain rounded card, the shape of the chart */
.film {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  aspect-ratio: 884 / 1080;
  margin: 0 auto;
  border-radius: 24px;
  background: var(--mat);
  box-shadow: 0 2px 4px var(--shadow), 0 30px 60px -12px var(--shadow-deep);
}

.stage--region {
  padding-bottom: 8%;
}

.stage--region .device--phone {
  width: 30%;
  left: auto;
  right: -4%;
  bottom: -2%;
}

@media (max-width: 900px) {
  .stage--region {
    padding-left: 0;
    padding-right: 6%;
  }
  .stage--region .device--phone {
    right: 0;
  }
}

/* Language menu — a disclosure, so it works without script */

.lang-menu {
  position: relative;
}

.lang-menu summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  padding: 6px 8px;
  border-radius: 8px;
}

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

.lang-menu summary:hover,
.lang-menu[open] summary {
  color: var(--text);
  background: var(--mat);
}

.lang-menu ul {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  margin: 0;
  padding: 6px;
  list-style: none;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 14px;
  box-shadow: 0 16px 40px var(--shadow-deep);
  z-index: 60;
}

.lang-menu li a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
}

.lang-menu li a:hover {
  background: var(--mat);
  color: var(--text);
}

.lang-menu li a[aria-current] {
  color: var(--accent-strong);
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .lang-menu li a[aria-current] {
    color: var(--accent);
  }
}

.site-footer .lang-menu ul {
  top: auto;
  bottom: calc(100% + 8px);
  right: auto;
  left: 0;
}

.langs a {
  color: var(--text);
  text-decoration: none;
}

.langs li:has(a:hover) {
  border-color: var(--accent);
}

.langs li:has(a[aria-current]) {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.langs li a[aria-current] {
  color: var(--accent-ink);
}

@media (prefers-color-scheme: dark) {
  .langs li:has(a[aria-current]) {
    background: var(--accent);
    border-color: var(--accent);
  }
}

/* The language list's link covers its whole pill */
.langs li:has(a) {
  padding: 0;
}

.langs li a {
  display: block;
  padding: 7px 16px;
}

/* Footer: brand on the left, links and the language menu together on the right */
.site-footer .wrap {
  justify-content: flex-start;
}

.site-footer nav {
  margin-left: auto;
}

.site-footer .lang-menu {
  order: 3;
}

.site-footer .lang-menu ul {
  left: auto;
  right: 0;
}

@media (max-width: 640px) {
  .site-footer nav {
    margin-left: 0;
  }
  .site-footer .lang-menu {
    order: 0;
  }
  .site-footer .lang-menu ul {
    right: auto;
    left: 0;
  }
}

/* Decorative chart colours belong in CSS so the production CSP can stay strict. */
.chart-ink-1 { background:#c1587a; }
.chart-ink-2 { background:#d9a441; }
.chart-ink-3 { background:#6b8fa3; }
.chart-ink-4 { background:#7a8f6b; }
.chart-ink-5 { background:#8f8fc9; }
.chart-ink-6 { --story-tint:#f2d6de; }
.chart-ink-7 { --story-tint:#f4e4c4; }
.chart-ink-8 { --story-tint:#dfe6d2; }
.chart-ink-9 { --story-tint:#dde3ee; }
.chart-ink-10 { background:#5a6b3c; }
.chart-ink-11 { background:#c98a5b; }
.chart-ink-12 { background:#b06b9e; }
.chart-ink-13 { background:#9c6b4f; }

/* Localized navigation can be much wider than the English labels. Let it wrap,
   keeping every control reachable instead of clipping the page at phone widths. */
.site-header .wrap { flex-wrap: wrap; }
.site-nav { flex-wrap: wrap; min-width: 0; }
.site-nav > a, .lang-menu summary { min-height: 44px; display: inline-flex; align-items: center; }
.brand { flex-shrink: 0; }
.lang-menu ul { max-height: min(65vh, 32rem); overflow-y: auto; overscroll-behavior: contain; }
.lang-menu li a { min-height: 44px; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
.gallery { scrollbar-width: thin; }
.gallery::-webkit-scrollbar { display: block; height: 6px; }
.gallery::-webkit-scrollbar-thumb { background: var(--edge); border-radius: 3px; }
.not-found-title { font-family: var(--serif); font-size: clamp(30px, 4vw, 44px); margin: 0 0 12px; }

@media (max-width: 1100px) {
  /* A wrapping header must not occupy the viewport while reading or following anchors. */
  .site-header { position: relative; }
  .site-nav { gap: 4px 16px; }
  html { scroll-padding-top: 16px; }
}
@media (max-width: 720px) {
  .site-header .wrap { gap: 8px; }
  .site-nav { width: 100%; }
  .site-nav .nav-section { display: inline-flex; }
  .site-nav > a { white-space: normal; }
  .hero { padding-top: 32px; }
  .price-card { padding: 28px 24px; }
  .card, .price-card, .proof li { min-width: 0; overflow-wrap: anywhere; }
  .section-head p, .story-copy > p, .split > div > p { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.doc { overflow-wrap: anywhere; hyphens: auto; }
.site-nav { position: relative; }
.site-nav .lang-menu { position: static; }

/* A short landscape viewport leaves less room below a wrapped navigation row. */
@media (max-height: 500px) {
  .site-header .lang-menu ul { max-height: 40vh; }
}

/* Instagram: a line icon in the text's own ink, like the language menu's globe. */
a.social { display: inline-flex; align-items: center; gap: 8px; }
a.social svg { flex: none; }
.closing-social { margin: 44px 0 16px; }
.closing-social a { text-decoration: none; }
.closing-social a:hover span { text-decoration: underline; }
.closing-social a { color: var(--text-secondary); }

/* A phone gets two rows in the header: the brand, the language and the free chart on the
   first, the sections on the second as one strip that scrolls sideways. Left to wrap on
   their own, the links took a row and a half and the button a third. */
.nav-links { display: contents; }
.nav-links a { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 720px) {
  .site-header .wrap { position: relative; column-gap: 8px; row-gap: 0; justify-content: flex-start; }
  .site-nav { display: contents; }
  .site-header .brand { order: 0; margin-right: auto; }
  .site-nav .lang-menu { order: 1; }
  .site-nav .nav-cta { order: 2; min-height: 0; padding: 6px 12px; font-size: 13px; }
  .site-header .wrap::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
  .site-nav > a:not(.nav-cta) { order: 4; margin-right: 12px; }
  .nav-links {
    order: 4; display: flex; gap: 20px; flex-basis: 100%; min-width: 0;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    padding-right: 24px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; flex: none; }
  .site-nav .lang-menu ul { top: 52px; }

  /* The footer: the brand and the language on one row, every link under them. */
  .site-footer .wrap { flex-direction: row; flex-wrap: wrap; align-items: center; row-gap: 4px; }
  .site-footer .foot-brand { order: 0; }
  .site-footer .lang-menu { order: 1; margin-left: auto; }
  .site-footer nav { order: 2; flex-basis: 100%; gap: 0 20px; }
  /* Instagram takes a row of its own under the links, in the middle, rather than being
     whichever word the wrap happened to leave alone at the start of a line. */
  .site-footer nav a.social { flex-basis: 100%; justify-content: center; }
  .site-footer .lang-menu ul { left: auto; right: 0; }
}
/* Too narrow for the language's code beside the free chart: the globe says it alone. */
@media (max-width: 420px) {
  .site-header .lang-menu summary span { display: none; }
  .site-header .brand { font-size: 17px; gap: 6px; }
  .site-header .brand img { width: 28px; height: 28px; }
  .site-nav .nav-cta { padding: 6px 10px; }
}

/* Until the stores list the app a badge says so and goes nowhere, so it does not lift. */
.badge[aria-disabled="true"]:hover { transform: none; }