:root {
  --ink: #201f22;
  --muted: #6d6a70;
  --line: rgba(31, 29, 34, .10);
  --paper: #fffdf9;
  --warm-paper: #fff9ed;
  --cream: #fff3d4;
  --gold: #ffad24;
  --orange: #ff7a1a;
  --pink: #ff4f76;
  --blue: #3c7cff;
  --cyan: #3bc8d4;
  --purple: #8c66ff;
  --green: #51b96e;
  --radius-xl: 38px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --shadow: 0 24px 80px rgba(29, 24, 15, .14);
  --shell: min(1160px, calc(100vw - 48px));
  /* the "Our Mac apps" strip (/shared/apps.css) lines up with the header */
  --apps-width: var(--shell);
  /* the terms page's body text and its contents box */
  --body-ink: #3a383d;
  --card: #fff;
  /* form controls and scrollbars follow the system too */
  color-scheme: light dark;
  /* lets a height animate to and from auto */
  interpolate-size: allow-keywords;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 0%, rgba(255, 193, 76, .16), transparent 26rem),
    var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.shell { width: var(--shell); margin-inline: auto; }

.site-header {
  width: var(--shell);
  height: 84px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -.02em;
}
.brand img { width: 42px; height: 42px; border-radius: 10px; }
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-buy,
.header-download {
  text-decoration: none;
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(16px);
  font-size: 14px;
  font-weight: 650;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.header-buy {
  background: linear-gradient(135deg, #ffd45c, #ff9d1d 58%, #ff7b2c);
  color: #251404;
  border-color: rgba(181, 102, 13, .16);
  box-shadow: 0 7px 22px rgba(235, 132, 16, .16), inset 0 1px rgba(255,255,255,.72);
}
.header-download { background: rgba(255,255,255,.7); }
.header-buy:hover,
.header-download:hover { transform: translateY(-1px); }
.header-download:hover { background: rgba(255,255,255,.95); }

.hero {
  min-height: 680px;
  display: grid;
  grid-template-columns: 1.03fr .97fr;
  align-items: center;
  gap: 36px;
  padding: 72px 0 74px;
}
.hero-copy { position: relative; z-index: 2; max-width: 640px; }
.eyebrow, .kicker {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a6331;
}
h1, h2, h3, p { margin-top: 0; }
/* let the browser even out the lines instead of hand-placed <br> */
h1, h2, h3 { text-wrap: balance; }
h1 {
  margin-bottom: 25px;
  font-size: clamp(56px, 7.2vw, 94px);
  line-height: .94;
  letter-spacing: -.065em;
  font-weight: 780;
}
h1 span {
  background: linear-gradient(100deg, #f05a29 0%, #f5a51d 43%, #e6b82e 67%, #6b87e8 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-lede {
  max-width: 630px;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.48;
  letter-spacing: -.018em;
  color: #555158;
}
.hero-actions { display: flex; align-items: center; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 720;
  letter-spacing: -.015em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary {
  color: #251404;
  background: linear-gradient(135deg, #ffd45c, #ff9d1d 58%, #ff7b2c);
  box-shadow: 0 12px 34px rgba(235, 132, 16, .23), inset 0 1px rgba(255,255,255,.8);
}
.button-primary:hover { box-shadow: 0 16px 40px rgba(235, 132, 16, .30), inset 0 1px rgba(255,255,255,.8); }
.button-secondary { background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(31,29,34,.05); }
.button-download { gap: 8px; }
.download-arrow {
  display: inline-block;
  font-size: 1.05em;
  line-height: 1;
  transform: translateY(-1px);
}
.micro { margin: 15px 0 0; font-size: 13px; color: #858087; }

.hero-art {
  min-height: 560px;
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.hero-icon {
  width: min(470px, 92%);
  height: auto;
  position: relative;
  z-index: 5;
  filter: drop-shadow(0 42px 42px rgba(52, 35, 7, .18));
  animation: hover 7s ease-in-out infinite;
}
@keyframes hover { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(.8deg); } }
.glow { position: absolute; border-radius: 50%; filter: blur(18px); z-index: 0; }
.glow-a { width: 370px; height: 370px; background: rgba(255, 180, 36, .28); bottom: 70px; left: 20px; }
.glow-b { width: 240px; height: 240px; background: rgba(91, 116, 255, .16); top: 68px; right: 10px; }
.can-rim {
  position: absolute;
  border: 1px solid rgba(119, 112, 98, .18);
  border-radius: 50%;
  transform: rotate(-12deg);
  z-index: 1;
}
.rim-one { width: 455px; height: 185px; bottom: 62px; left: 18px; }
.rim-two { width: 390px; height: 145px; bottom: 83px; left: 54px; border-color: rgba(255, 166, 22, .34); }

.os-stamp {
  position: absolute;
  right: 0;
  bottom: 24px;
  z-index: 6;
  padding: 15px 24px 15px 50px;
  border-radius: 999px;
  border: 2px solid rgba(111,91,61,.32);
  background: linear-gradient(180deg, #fffdf6, #eee8dd);
  box-shadow: inset 0 1px white, 0 12px 24px rgba(68,58,41,.10);
  text-decoration: none;
  transition: transform .18s ease;
}
.os-stamp:hover { transform: translateY(-3px); }
.os-stamp strong { display: block; font-size: 16px; letter-spacing: -.025em; }
.os-stamp span:not(.stamp-hole) { display: block; margin-top: 1px; color: #786f65; font-size: 13px; }

.product-shot { padding: 8px 0 118px; }
/* The shot is an @2x capture of a 900pt window, so 900 CSS px is its true
   size. Past that the browser upscales it and the UI text goes soft, so the
   frame stops there, centred in the wider shell. */
.shot-frame {
  position: relative;
  max-width: calc(900px + 24px);
  margin-inline: auto;
  padding: 12px;
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,239,201,.75));
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(51, 42, 24, .08);
  overflow: hidden;
}
/* height: auto is load-bearing — without it the height attribute on the img
   stays at 900px while width shrinks, so the shot stretches on narrow screens. */
.shot-frame img { display: block; width: 100%; height: auto; border-radius: 20px; position: relative; z-index: 2; }
.shot-light {
  position: absolute;
  width: 55%;
  height: 72%;
  left: 18%;
  bottom: -52%;
  border-radius: 50%;
  background: #ffd159;
  filter: blur(60px);
  opacity: .55;
  z-index: 1;
}

.use-cases { padding: 48px 0 128px; }
.section-intro { max-width: 700px; margin-bottom: 58px; }
.section-intro h2 {
  margin-bottom: 0;
  font-size: clamp(46px, 6vw, 78px);
  line-height: .98;
  letter-spacing: -.055em;
}
.section-lede { margin: 20px 0 0; max-width: 560px; color: #625d64; font-size: 18px; line-height: 1.55; }
.use-label { margin-bottom: 10px; font-size: 14px; font-weight: 720; color: rgba(37,31,43,.55); }
.profiles-block h3, .feature-copy h3 {
  margin-bottom: 17px;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.02;
  letter-spacing: -.045em;
}
.profiles-block p:not(.use-label), .feature-copy p:not(.use-label) {
  max-width: 560px;
  color: #625d64;
  font-size: 18px;
  line-height: 1.55;
}

/* nine little cards of file types */
.usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* The whole card is the control: press it and its types move to the next app. */
.usecase {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  padding: 26px 24px 24px;
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, #fff, #fff6e4);
  border: 1px solid rgba(61,53,67,.08);
  box-shadow: 0 10px 30px rgba(31,29,34,.05);
}
.usecase:hover { border-color: rgba(61,53,67,.18); }
.usecase:focus-visible { outline: 2px solid #f0a92a; outline-offset: 3px; }
.usecase:active { transform: scale(.994); }
.usecase h3 { margin-bottom: 4px; font-size: 19px; letter-spacing: -.028em; }
.usecase .chips { margin-top: 16px; }

/* The sieve: press the can opener and the types above drop through it into
   the next app in the row. The drops are decorative; the real state is which
   target carries .is-current, so the card still reads correctly with the
   animation suppressed. */
.router { margin-top: auto; padding-top: 6px; display: grid; justify-items: center; }
/* The can opener itself is the nozzle: it slides along the row to sit over
   whichever app currently handles the types, then pours them into it.
   --pointer-x is measured in JS from the current pill's centre; it falls back
   to the middle of the row. */
.router { --pointer-x: 50%; }
.pointer {
  position: relative;
  align-self: stretch;
  height: 52px;
  margin: 6px 0 4px;
}
.nozzle {
  position: absolute;
  top: 0;
  left: var(--pointer-x);
  width: 30px;
  height: 30px;
  margin-left: -15px;
  filter: drop-shadow(0 4px 7px rgba(52,35,7,.22));
  transition: left .34s cubic-bezier(.34, .9, .36, 1);
}
.drop {
  position: absolute;
  top: 28px;
  left: var(--pointer-x);
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 2px;
  background: #f0a92a;
  opacity: 0;
}
/* Delayed so the opener has moved before it pours. */
.is-routing .drop { animation: sift .4s .16s ease-in forwards; }
@keyframes sift {
  0% { opacity: 0; transform: translateY(-6px) scaleY(.7); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(24px) scaleY(1.1); }
}
.targets { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; }
.targets li {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(61,53,67,.1);
  background: rgba(255,255,255,.6);
  color: #857f88;
  font-size: 13px;
  font-weight: 620;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.targets .is-current {
  border-color: rgba(240,169,42,.55);
  background: linear-gradient(180deg, #ffd88f, #f8b64a);
  color: #4a3410;
}
.is-routing .is-current { animation: land .42s .3s ease-out both; }
@keyframes land {
  0% { transform: scale(1); }
  45% { transform: scale(1.11); }
  100% { transform: scale(1); }
}

/* ------------------------------------------------------------------
   A window onto a screenshot, at the app's true size.

   The shots are @2x captures of a 900pt window, so they are drawn at
   half their pixel size: one source pixel lands on one device pixel
   of a retina screen. Nothing is scaled, so nothing is interpolated.

   Per figure:  --x --y  source pixel at the window's top left
                --iw     the source image's natural width
                --vw --vh  the window's size, in CSS pixels
   ------------------------------------------------------------------ */
.shot {
  --dpr: 2;
  position: relative;
  width: 100%;
  max-width: calc(var(--vw) * 1px);
  aspect-ratio: var(--vw) / var(--vh);
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid rgba(61,53,67,.10);
  background: linear-gradient(180deg, var(--warm-paper), var(--cream));
  box-shadow: var(--shadow);
}
/* The crop is expressed as a share of the window, not in fixed pixels, so a
   narrower shell shrinks the image and its offsets together and the whole
   crop stays visible. At --vw px and up the percentages resolve back to the
   true 1:1 size, so nothing is interpolated on a full-width layout.
   left is a share of the window's width, top of its height — the window's
   aspect-ratio makes those the same scale factor. */
.shot img {
  position: absolute;
  display: block;
  max-width: none;
  width: calc(var(--iw) / var(--dpr) / var(--vw) * 100%);
  height: auto;
  left: calc(var(--x) / var(--dpr) / var(--vw) * -100%);
  top: calc(var(--y) / var(--dpr) / var(--vh) * -100%);
}

.features { padding: 0 0 40px; }
.feature-row {
  margin: 0 0 clamp(64px, 8vw, 112px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.feature-row.reverse .feature-copy { order: 2; }
.feature-copy { max-width: 560px; }
.feature-copy p + p { margin-top: 16px; }
.feature-row .shot { justify-self: center; }
/* Sits between two feature rows: a question the reader is already asking,
   answered without a full row of its own. */
.prompt-note {
  margin: calc(clamp(64px, 8vw, 112px) * -.5) auto clamp(64px, 8vw, 112px);
  max-width: 640px;
  text-align: center;
}
.prompt-note summary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 19px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 6px 18px rgba(31,29,34,.05);
  cursor: pointer;
  font-size: 16px;
  font-weight: 680;
  letter-spacing: -.02em;
  list-style: none;
  user-select: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
/* Opening slides the answer down. Browsers without ::details-content simply
   show it at once. */
.prompt-note::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    block-size .36s cubic-bezier(.33, .9, .36, 1),
    opacity .28s ease,
    content-visibility .36s allow-discrete;
}
.prompt-note[open]::details-content { block-size: auto; opacity: 1; }
.prompt-note summary::-webkit-details-marker { display: none; }
.prompt-note summary::after { content: "+"; color: #a8a2a9; font-weight: 600; }
.prompt-note[open] summary::after { content: "–"; }
.prompt-note summary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(31,29,34,.08); }
.prompt-note p {
  margin: 14px 0 0;
  padding: 20px 24px;
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, #fff, #fff6e4);
  border: 1px solid rgba(61,53,67,.08);
  color: #625d64;
  font-size: 17px;
  line-height: 1.6;
}
.prompt-note a { font-weight: 680; color: #b3720f; text-underline-offset: 3px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.chips span {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(61,53,67,.1);
  font: 650 13px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  box-shadow: inset 0 1px rgba(255,255,255,.76);
}
.profiles-block {
  margin: 24px 0;
  padding: 58px;
  border-radius: var(--radius-xl);
  background: #17171a;
  color: white;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 60px;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.profiles-block::after {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  right: -130px; bottom: -210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,163,28,.30), transparent 67%);
}
.profiles-block p:not(.use-label) { color: rgba(255,255,255,.64); }
.profiles-tweak {
  margin-top: 14px !important;
  font-weight: 700;
  color: #ffb131 !important;
  letter-spacing: -.02em;
}
.profiles-block .use-label { color: rgba(255,255,255,.52); }
.profiles-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; position: relative; z-index: 2; }
.profile-card {
  min-height: 240px;
  padding: 22px;
  border-radius: 22px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
}
.profile-day { transform: rotate(-2.2deg) translateY(8px); }
.profile-side { transform: rotate(2.4deg) translateY(-6px); }
.profile-writing { transform: rotate(1.6deg) translateY(6px); }
.profile-client { transform: rotate(-1.8deg) translateY(-4px); }
.profile-title { font-weight: 750; letter-spacing: -.02em; display: flex; gap: 8px; align-items: center; margin-bottom: 28px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #ffb131; box-shadow: 0 0 18px #ffb131; }
.profile-card dl { margin: 0; }
.profile-card dl div { display: flex; justify-content: space-between; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.10); gap: 14px; }
.profile-card dt { color: rgba(255,255,255,.52); }
.profile-card dd { margin: 0; font-weight: 650; text-align: right; }

code { font: 650 .9em ui-monospace, SFMono-Regular, Menlo, monospace; }

.extras { padding: 30px 0 118px; }
.extras-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 56px); }
.extra h3 { margin: 24px 0 8px; font-size: 24px; letter-spacing: -.032em; }
.extra p { margin: 0; max-width: 520px; color: #625d64; font-size: 17px; line-height: 1.55; }
/* A card that carries no shot starts with its heading. */
.extra-wordy h3 { margin-top: 0; }
.chips-plain { margin-top: 18px; }
.chips-plain span {
  font-family: inherit;
  font-size: 14px;
  font-weight: 620;
  letter-spacing: -.01em;
  color: #4a454c;
}

.security { padding: 118px 0 126px; }
.security-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.security-copy p { max-width: 580px; color: #625d64; font-size: 18px; line-height: 1.6; }
.security-copy p + p { margin-top: 16px; }
.security .shot { justify-self: center; }
.supply-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 6px 20px rgba(31,29,34,.05);
  font-size: 15px;
  font-weight: 680;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.supply-link svg { flex: none; color: var(--orange); }
.supply-link-arrow { color: #b3720f; transition: transform .2s ease; }
.supply-link:hover { transform: translateY(-1px); border-color: rgba(255, 173, 36, .5); box-shadow: 0 10px 24px rgba(235, 132, 16, .14); }
.supply-link:hover .supply-link-arrow { transform: translateX(3px); }
.supply-link:focus-visible { outline: 2px solid #f0a92a; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .supply-link, .supply-link-arrow { transition: none; }
}

.faq { margin-top: clamp(56px, 7vw, 86px); border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  padding: 22px 0;
  cursor: pointer;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.028em;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: #a8a2a9; font-weight: 600; }
.faq details[open] summary::after { content: "–"; }
.faq details p {
  margin: 0 0 22px;
  max-width: 70ch;
  color: #625d64;
  font-size: 17px;
  line-height: 1.6;
}
.faq details p + p { margin-top: -6px; }

/* A quiet list, ruled like the FAQ above it: version and date in a narrow
   column to scan down, the change itself in the wide one to read across. */
.changelog { padding: 0 0 126px; }
.changes { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.change {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 8px 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.change-meta {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 3px;
  font-size: 14px;
  color: var(--muted);
}
.change-version { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.change-body h3 {
  margin: 0 0 6px;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -.028em;
  text-wrap: pretty;
}
.change-body p { margin: 0; max-width: 70ch; color: #625d64; font-size: 17px; line-height: 1.6; }
.change-tag {
  display: inline-block;
  margin-right: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: 3px;
}
.changelog-all-link {
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.changelog-all-link:hover { color: var(--ink); }
.changelog-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(80vh, 900px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.changelog-dialog[open] { display: flex; flex-direction: column; }
.changelog-dialog::backdrop { background: rgba(20, 18, 22, .45); }
.changelog-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}
.changelog-dialog-head h2 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.changelog-dialog-head form { margin: 0; }
.changelog-dialog-close {
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.changelog-dialog .changes { overflow-y: auto; padding: 0 24px; border-top: 0; }
.changelog-dialog .change:last-child { border-bottom: 0; }

.tag-fix { background: rgba(81, 185, 110, .14); color: #2f7a45; }
.tag-improved { background: rgba(60, 124, 255, .12); color: #2f5fc4; }
.tag-new { background: rgba(255, 173, 36, .18); color: #8a6331; }

.supply { max-width: 700px; padding: 96px 0 104px; color: var(--muted); font-size: 17px; line-height: 1.55; }
.supply-icon { flex: none; width: .85em; height: .85em; color: var(--orange); }
.supply h2 { display: flex; align-items: center; gap: .35em; margin: 0 0 18px; color: var(--ink); font-size: clamp(32px, 4vw, 44px); line-height: 1.05; letter-spacing: -.04em; }
.supply ul { margin: 0 0 18px; padding-left: 1.2em; }
.supply li + li { margin-top: 8px; }
.trust { background: #f5f3ef; padding: 118px 0 108px; }
.trust-inner { position: relative; }
.section-intro.compact { margin-bottom: 50px; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(32,31,34,.10); border: 1px solid rgba(32,31,34,.10); border-radius: 26px; overflow: hidden; }
.trust-item { min-height: 170px; padding: 30px; background: #fbfaf7; display: flex; flex-direction: column; gap: 10px; }
.trust-item strong { font-size: 21px; letter-spacing: -.03em; }
.trust-item span { color: #746f75; line-height: 1.5; }
.privacy-stamp {
  margin: 58px auto 0;
  width: fit-content;
  min-width: 310px;
  padding: 20px 28px 20px 54px;
  position: relative;
  border-radius: 999px;
  border: 2px solid rgba(111,91,61,.32);
  background: linear-gradient(180deg, #fffdf6, #eee8dd);
  box-shadow: inset 0 1px white, 0 12px 24px rgba(68,58,41,.08);
  text-align: left;
  transition: transform .18s ease;
}
.privacy-stamp:hover { transform: translateY(-3px); }
.privacy-stamp strong { display: block; font-size: 20px; letter-spacing: -.025em; }
.privacy-stamp span:not(.stamp-hole) { display: block; color: #786f65; font-size: 14px; margin-top: 2px; }
.stamp-hole { position: absolute; left: 22px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #d8d1c7; box-shadow: inset 0 2px 3px rgba(78,66,51,.2); }

.router-section { padding: 110px 0 118px; background: #f7f4ee; }
.router-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.router-copy p { color: #666068; font-size: 19px; line-height: 1.58; max-width: 570px; }
.router-copy p + p { margin-top: 18px; }
.router-note { font-size: 14px !important; color: #8a838c !important; }
.router-section .shot { justify-self: center; }

.buy-section {
  position: relative;
  overflow: hidden;
  padding: 125px 0 132px;
  background: #161517;
  color: white;
}
.buy-inner { position: relative; z-index: 2; text-align: center; max-width: 850px; }
.buy-icon { width: 116px; height: 116px; border-radius: 27px; box-shadow: 0 25px 70px rgba(255, 162, 25, .18); margin-bottom: 28px; }
.buy-section .kicker { color: #d2a65c; }
.buy-section h2 { margin-bottom: 30px; font-size: clamp(46px, 6vw, 78px); line-height: .98; letter-spacing: -.055em; }
.price { font-size: 84px; line-height: 1; letter-spacing: -.07em; font-weight: 790; }
.price span { font-size: .42em; vertical-align: top; position: relative; top: .16em; margin-right: 5px; color: #d9ac64; }
.price-note { color: rgba(255,255,255,.56); margin: 9px 0 28px; }
.button-large { min-height: 58px; padding-inline: 28px; font-size: 17px; }
.buy-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.button-dark-secondary {
  gap: 8px;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.17);
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}
.button-dark-secondary:hover {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.24);
}
.buy-footnote { margin: 18px auto 0; color: rgba(255,255,255,.40); font-size: 13px; }
.buy-control {
  margin: 20px auto 0;
  max-width: 520px;
  color: rgba(255,255,255,.66);
  font-size: 17px;
  line-height: 1.5;
}
.buy-glow { position: absolute; left: 50%; bottom: -390px; width: 930px; height: 650px; margin-left: -465px; border-radius: 50%; background: radial-gradient(circle, rgba(255,169,41,.52), rgba(255,87,47,.16) 39%, transparent 68%); filter: blur(20px); }

/* Once the hero has scrolled away the header comes back along the bottom,
   so buying stays one press away without a bar covering the hero itself. */
.sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 253, 249, .82);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px rgba(31,29,34,.06);
  transform: translateY(115%);
  transition: transform .42s cubic-bezier(.32, .86, .38, 1);
}
.sticky-bar.is-up { transform: translateY(0); }
.sticky-inner { position: relative; display: flex; align-items: center; gap: 12px; }
.sticky-bar .brand { margin-right: auto; }
.sticky-bar .brand img { width: 34px; height: 34px; }

/* Contents, opening upwards out of the bar. */
.toc-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.7);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.toc-button:hover { background: #fff; border-color: rgba(31,29,34,.2); }
.toc-button span,
.toc-button span::before,
.toc-button span::after {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}
.toc-button span { position: relative; }
.toc-button span::before,
.toc-button span::after { content: ""; position: absolute; left: 0; }
.toc-button span::before { top: -5px; }
.toc-button span::after { top: 5px; }
.toc-pop {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(255, 253, 249, .96);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 44px rgba(31,29,34,.16);
  transform: translateY(8px);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}
.toc-pop[hidden] { display: none; }
.toc-pop.is-open { transform: translateY(0); opacity: 1; }
.toc-pop a {
  padding: 9px 12px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -.015em;
}
.toc-pop a:hover { background: rgba(255, 173, 36, .16); }

.footer { min-height: 90px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #8a858b; font-size: 13px; }
.footer nav { display: flex; gap: 19px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--ink); }

@media (max-width: 900px) {
  :root { --shell: min(100% - 32px, 720px); }
  .site-header { height: 72px; }
  .hero { grid-template-columns: 1fr; padding-top: 58px; text-align: center; }
  .hero-copy { margin-inline: auto; }
  .hero-lede { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-art { min-height: 470px; }
  .product-shot { padding-bottom: 86px; }
  .profiles-block,
  .feature-row,
  .router-grid,
  .security-grid,
  .extras-grid { grid-template-columns: 1fr; }
  .feature-row.reverse .feature-copy { order: 0; }
  /* Stacked, the column gap becomes the gap between a row's copy and its own
     shot. Tighten it so the shot groups with the text it illustrates and the
     row margin below stays the larger, separating space. */
  .feature-row { row-gap: 20px; }
  /* Stacked, the 24px block margin is far tighter than the gap between feature
     rows, so the next row's h3 reads as part of this block. Match the row
     rhythm instead. */
  .profiles-block { row-gap: 26px; margin: clamp(64px, 8vw, 112px) 0; }
  /* Stacked, each card's copy sits right above the next card's shot, and the
     row gap was barely wider than the 24px between a shot and its own
     heading. Widen it so a card groups with its own image. */
  .extras-grid { row-gap: 64px; }
  .usecase-grid { grid-template-columns: 1fr 1fr; }
  .profiles-block { padding: 42px; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  /* Single-column hero puts the icon dead centre, so an overlaid stamp lands on
     top of it and squashes to four lines. Drop it into the grid flow instead:
     it sits under the icon at its natural one-line-per-sentence width. */
  .hero-art { grid-auto-rows: min-content; align-content: center; gap: 6px; }
  .os-stamp {
    position: relative;
    right: auto;
    bottom: auto;
    text-align: left;
    max-width: 100%;
  }
  .os-stamp:hover { transform: translateY(-3px); }
}

@media (max-width: 620px) {
  :root { --shell: calc(100vw - 28px); }
  /* The narrow column would squeeze the text; the version and month go above it instead. */
  .change { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
  .change-meta { flex-direction: row; gap: 10px; padding-top: 0; }
  .header-actions { gap: 6px; }
  .header-download { display: none; }
  .header-buy { padding-inline: 13px; }
  .hero { min-height: auto; padding-top: 42px; }
  h1 { font-size: 53px; }
  .hero-art { min-height: 360px; }
  .hero-icon { width: 340px; max-width: 94vw; }
  .os-stamp { padding: 12px 20px 12px 44px; }
  .os-stamp .stamp-hole { left: 18px; }
  .rim-one { width: 330px; height: 130px; left: 50%; transform: translateX(-50%) rotate(-12deg); }
  .rim-two { width: 285px; height: 105px; left: 50%; transform: translateX(-50%) rotate(-12deg); }
  .shot-frame { padding: 7px; border-radius: 20px; }
  .shot-frame img { border-radius: 14px; }
  .section-intro h2, .router-copy h2, .buy-section h2 { font-size: 46px; }
  .profiles-block { border-radius: 26px; padding: 30px; }
  .profiles-block h3, .feature-copy h3 { font-size: 34px; }
  .usecase-grid { grid-template-columns: 1fr; }
  .profiles-cards { grid-template-columns: 1fr; }
  .profile-day, .profile-side, .profile-writing, .profile-client { transform: none; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-item { min-height: 140px; }
  .privacy-stamp { min-width: 0; width: 100%; }
  .footer { flex-direction: column; justify-content: center; padding: 25px 0; }
}

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

/* Below the buy section: one narrow column of plain claims, set like the FAQ. */
.supply { padding: 104px 0 96px; }
.supply > * { max-width: 760px; }
.supply h2 {
  display: flex;
  align-items: center;
  gap: .35em;
  margin-bottom: 14px;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -.045em;
}
.supply-icon { flex: none; width: .9em; height: .9em; color: var(--orange); }
.supply p { margin: 0; color: #625d64; font-size: 18px; line-height: 1.6; }
.supply ul { margin: 34px 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.supply li {
  position: relative;
  padding: 18px 0 18px 30px;
  border-bottom: 1px solid var(--line);
  color: #4a454c;
  font-size: 17px;
  line-height: 1.55;
}
.supply li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: calc(18px + .55em);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(255, 173, 36, .6);
}
.supply a { font-weight: 680; color: #b3720f; text-underline-offset: 3px; }

/* The supply chain text, in a dialog opened from the short section above. */
.more { text-decoration: none; }
.more::after { content: " →"; }
.more:hover { text-decoration: underline; }
.modal {
  width: min(720px, calc(100vw - 24px));
  max-width: none;
  max-height: min(calc(100% - 24px), 900px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
  overscroll-behavior: contain;
}
.modal::backdrop { background: rgba(20, 18, 22, .45); backdrop-filter: blur(4px); }
.modal[open] { animation: modal-in .18s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
body:has(.modal[open]) { overflow: hidden; }
/* The close button stays in the corner as the text scrolls. */
.modal__close { position: sticky; top: 0; float: right; padding: 12px; }
.modal__close form { margin: 0; }
.close {
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
}
.supply.modal__body { padding: 32px clamp(20px, 5vw, 40px) 36px; }
.modal__body h2 { font-size: clamp(28px, 4vw, 36px); }
.modal__body ul { margin: 24px 0; }

/* ------------------------------------------------------------------
   Dark, when the system is. The same warm page at night: the paper
   goes to a near-black with a little brown in it, the gold stays gold,
   and the screenshots swap to their dark captures through <picture>.
   The sections that were already dark (profiles, buy) stay the darkest
   thing on the page so they still read as set apart.
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f2eee8;
    --muted: #a19ca4;
    --line: rgba(255, 255, 255, .11);
    --paper: #151417;
    --warm-paper: #1c1a1d;
    --cream: #221e19;
    --shadow: 0 24px 80px rgba(0, 0, 0, .45);
    --body-ink: #d6d1d9;
    --card: #1c1a1d;
  }
  body {
    background:
      radial-gradient(circle at 82% 0%, rgba(255, 173, 36, .10), transparent 26rem),
      var(--paper);
  }

  .header-download { background: rgba(255,255,255,.06); }
  .header-download:hover { background: rgba(255,255,255,.12); }

  .eyebrow, .kicker { color: #d9a95c; }
  .hero-lede { color: #b8b3bb; }
  .button-secondary { background: rgba(255,255,255,.06); box-shadow: none; }
  .micro { color: #8f8a93; }
  .can-rim { border-color: rgba(255, 240, 210, .14); }
  .os-stamp, .privacy-stamp {
    border-color: rgba(255, 214, 150, .22);
    background: linear-gradient(180deg, #2a2724, #1f1d1b);
    box-shadow: inset 0 1px rgba(255,255,255,.06), 0 12px 24px rgba(0,0,0,.3);
  }
  .os-stamp span:not(.stamp-hole), .privacy-stamp span:not(.stamp-hole) { color: #b3a996; }
  .stamp-hole { background: #3a3631; box-shadow: inset 0 2px 3px rgba(0,0,0,.4); }

  .shot-frame {
    background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,190,90,.08));
    box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.08);
  }
  .shot-light { opacity: .22; }
  .shot { border-color: rgba(255,255,255,.10); }

  .section-lede,
  .profiles-block p:not(.use-label), .feature-copy p:not(.use-label),
  .prompt-note p, .extra p, .security-copy p, .faq details p, .change-body p { color: #aaa4ad; }
  .profiles-block p:not(.use-label) { color: rgba(255,255,255,.64); }
  .use-label { color: rgba(255,255,255,.5); }

  .usecase {
    background: linear-gradient(150deg, #1f1d20, #241f19);
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
  }
  .usecase:hover { border-color: rgba(255,255,255,.18); }
  .targets li { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: #9c96a1; }

  .prompt-note summary { background: rgba(255,255,255,.06); box-shadow: none; }
  .prompt-note summary:hover { box-shadow: 0 10px 24px rgba(0,0,0,.3); }
  .prompt-note p { background: linear-gradient(150deg, #1f1d20, #241f19); border-color: rgba(255,255,255,.08); }
  .prompt-note a { color: #f0b04a; }

  .chips span { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); box-shadow: none; }
  .chips-plain span { color: #cbc5ce; }

  /* Already dark in light mode: lifted a step so it still stands off the page. */
  .profiles-block { background: #201f23; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }

  .tag-fix { background: rgba(81, 185, 110, .18); color: #7bd495; }
  .tag-improved { background: rgba(60, 124, 255, .2); color: #93b4ff; }
  .tag-new { background: rgba(255, 173, 36, .18); color: #e4b567; }

  .trust { background: #1a191b; }
  .trust-grid { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.08); }
  .trust-item { background: #171618; }
  .trust-item span { color: #9d97a1; }

  .router-section { background: #1a1917; }
  .router-copy p { color: #aca6af; }
  .router-note { color: #8f8993 !important; }

  .buy-section { background: #0e0d0f; }
  .supply p { color: #aaa4ad; }
  .supply li { color: #cbc5ce; }
  .supply a { color: #f0b04a; }
  .supply-link { background: rgba(255,255,255,.06); box-shadow: none; }
  .supply-link-arrow { color: #f0b04a; }

  .sticky-bar { background: rgba(21, 20, 23, .82); box-shadow: 0 -10px 30px rgba(0,0,0,.35); }
  .toc-button { background: rgba(255,255,255,.06); }
  .toc-button:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); }
  .toc-pop { background: rgba(30, 28, 32, .96); box-shadow: 0 18px 44px rgba(0,0,0,.45); }
}